/* ---------------------------------------------------------------------------
   En-tête commun à toutes les pages publiques : marque, navigation de bureau,
   bouton à deux traits et panneau plein écran sur mobile.
   Chargé par toutes les pages, y compris celles dont le reste du style est
   en ligne dans le document.
   --------------------------------------------------------------------------- */

header {
  position: relative; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0 10px;
}
.brand { display: inline-flex; }
.brand img, .brand svg { height: 46px; width: auto; display: block; }

.nav-desktop a {
  color: #93A7BB; text-decoration: none;
  font-size: 14.5px; font-weight: 500; margin-left: 26px;
  transition: color .2s;
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="page"] { color: #F3F7FA; }

/* ---------- Bouton à deux traits ---------- */
.burger {
  display: none; position: relative;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  z-index: 70; /* au-dessus du panneau : le même bouton ouvre et referme */
}
.burger span {
  position: absolute; left: 11px; width: 22px; height: 2px;
  background: #F3F7FA; border-radius: 2px;
  transition: top .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
/* Les deux traits se rejoignent puis pivotent : le « = » devient une croix. */
body.nav-open .burger span { top: 21px; }
body.nav-open .burger span:nth-child(1) { transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { transform: rotate(-45deg); }

/* ---------- Panneau plein écran ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center;
  padding: 0 32px;
  background:
    radial-gradient(760px 520px at 82% 8%, rgba(28, 62, 96, 0.9), transparent 62%),
    linear-gradient(168deg, #102338 0%, #0A1725 58%, #05080C 100%);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
body.nav-open .menu { transform: translateX(0); }
/* Le panneau étant sorti de l'en-tête, il passe au-dessus de lui : sans ça, le
   bouton se retrouve dessous, invisible et hors de portée du doigt. On remonte
   l'en-tête entier pendant l'ouverture — la marque et la croix restent en vue,
   à leur place habituelle. */
body.nav-open header { z-index: 80; }
/* Le fond ne défile pas derrière le panneau. */
body.nav-open { overflow: hidden; }

.menu nav { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.menu nav a {
  color: #F3F7FA; text-decoration: none;
  font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: -0.03em;
  padding: 10px 0;
  /* Les entrées arrivent en cascade, une fois le panneau en place. */
  opacity: 0; transform: translateX(28px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(60ms * var(--i, 0));
}
body.nav-open .menu nav a { opacity: 1; transform: none; }
.menu nav a[aria-current="page"] { color: #D9F24B; }
.menu nav a:nth-last-child(-n + 2) { font-size: clamp(17px, 4.5vw, 20px); font-weight: 600; color: #93A7BB; }

@media (max-width: 880px) {
  .nav-desktop { display: none; }
  .burger { display: block; }
  .brand img, .brand svg { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu, .menu nav a, .burger span { transition: none; }
}