* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; }

header {
  background:#254970;
  color:#fff;
  text-align:center;
  padding:35px 0 25px 0;
}

header h1 { font-size:42px; }

.separator { height:1px; background:#666; }

nav { background:#254970; }

.menu {
  display:flex;
  justify-content:center;
  list-style:none;
}

.menu a {
  display:block;
  padding:20px 30px;
  color:#fff;
  text-decoration:none;
  position:relative;
}

.menu a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:3px;
  background:#254970;
  transition:width 0.3s ease;
}

.menu a:hover::after,
.menu a.active::after {
  width:100%;
}

/* Sous-menu (animé) */
.submenu {
  width:100%;
  background: rgba(50,98,150,0.85);
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
  padding-left:120px; /* ≈ 3 cm */
}

.submenu ul { list-style:none; padding:40px 0; }
.submenu li { margin-bottom:20px; }

.submenu a {
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  position:relative;
  display:inline-block;
}

.submenu a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:#fff;
  transition:width 0.3s ease;
}

.submenu a:hover::after { width:100%; }

/* Breadcrumb */
.breadcrumb { margin-bottom:20px; font-size:14px; }
.breadcrumb span { cursor:pointer; color:#0077cc; }
.breadcrumb span:hover { text-decoration:underline; }

/* Contenu */
.content { padding:40px; }
.page { display:none; }
.page.active { display:block; }