@layer layout {
/* ============================================================================
   HEADER — un SEUL markup pour desktop et mobile.
   #site-nav est une barre flex a partir de 1024 px, un panneau hors ecran
   en dessous. Zero duplication, donc pas de doublon pour les lecteurs d'ecran.
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: var(--bw-hair) solid var(--c-border);
  transition: box-shadow var(--dur) var(--ease-out);
}

/* ATTENTION — le fond translucide et son flou vivent sur ce pseudo-element,
   JAMAIS sur .site-header lui-meme : `backdrop-filter` fait de l'element un
   BLOC CONTENEUR pour ses descendants en `position: fixed`. Pose sur le
   header, il enfermait le tiroir mobile (#site-nav, son enfant) dans la boite
   du header : `inset: 0` se calculait sur 64 px de haut au lieu du viewport,
   et le menu s'affichait en pave tronque sous le logo. Le sous-site du trail,
   dont le header n'a pas de flou, n'a jamais eu ce bug — d'ou le diagnostic. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(250 247 242 / .92);
  backdrop-filter: blur(12px);
  transition: background var(--dur) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--sh-2); }
.site-header.is-scrolled::before { background: rgb(250 247 242 / .98); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}
@media (min-width: 1024px) {
  .site-header__inner { min-height: var(--header-h-lg); }
}

.site-header__brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.site-header__logo { height: 38px; width: auto; }
@media (min-width: 1024px) { .site-header__logo { height: 46px; } }

/* ---- Burger ------------------------------------------------------------ */
.burger {
  --burger-w: 26px;
  display: grid;
  place-items: center;
  width: var(--hit-target);
  height: var(--hit-target);
  flex: none;
  order: 3;
}
.burger__bar, .burger__bar::before, .burger__bar::after {
  content: '';
  display: block;
  width: var(--burger-w);
  height: 3px;
  border-radius: 2px;
  background: var(--c-ink-900);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.burger__bar { position: relative; }
.burger__bar::before { position: absolute; top: -8px; }
.burger__bar::after { position: absolute; top: 8px; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after { transform: translateY(-8px) rotate(-45deg); }

/* ---- Navigation -------------------------------------------------------- */
.site-nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: var(--t-color);
  position: relative;
}
.site-nav__link:hover { color: var(--c-red-600); }
.site-nav__link.is-current { color: var(--c-red-600); }
.site-nav__link.is-current::after {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: var(--g-brand);
  transform: skewX(var(--chevron-skew));
}

.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* La place est reservee : le basculement connecte/deconnecte ne doit
   provoquer aucun decalage de mise en page. */
@media (min-width: 1024px) {
  .site-header__actions { min-width: 176px; justify-content: flex-end; }
}

/* ============================================================================
   MOBILE — tiroir hors ecran. Bascule a 1024 px et non 768 : six liens plus
   un bouton d'action ne tiennent pas sur une tablette en portrait.
   ========================================================================= */
@media (max-width: 1023.98px) {
  .site-nav {
    position: fixed;
    inset: 0;                     /* plein ecran : 100 % de la largeur ET de la hauteur */
    padding: calc(var(--header-h) + var(--sp-8)) var(--sp-6) var(--sp-10);
    padding-bottom: max(var(--sp-10), env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    background: var(--c-ink-900);
    color: var(--c-text-invert);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: var(--z-drawer);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .site-nav__link {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
    color: var(--c-paper);
    padding-block: var(--sp-3);
  }
  .site-nav__link:hover, .site-nav__link.is-current { color: var(--c-gold-500); }
  .site-nav__link.is-current::after { background: var(--c-gold-500); }
  .site-header__actions { flex-direction: column; align-items: stretch; }
  .site-header__actions .btn { width: 100%; }
  .site-nav__social { justify-content: center; margin-top: auto; }
  .site-nav__social .social__link { color: var(--c-paper); border-color: #444; }

  /* Le tiroir couvre tout l'ecran : le burger doit rester AU-DESSUS de lui,
     sinon plus rien ne permet de fermer le menu au doigt (Echap n'existe pas
     sur telephone). Ses barres passent en clair, sans quoi la croix serait
     noire sur noir. */
  .burger { position: relative; z-index: calc(var(--z-drawer) + 1); }
  .burger[aria-expanded="true"] .burger__bar::before,
  .burger[aria-expanded="true"] .burger__bar::after { background: var(--c-paper); }

  .drawer__backdrop {
    position: fixed;
    inset: 0;
    background: var(--scrim-modal);
    /* SOUS la couche du header, et non juste sous --z-drawer : .site-header
       est un contexte d'empilement (sticky + z-index), donc tout son
       sous-arbre — #site-nav compris — se peint au niveau --z-header. Un
       scrim a --z-drawer - 1 se retrouvait donc PAR-DESSUS le tiroir : il
       le grisait et avalait les clics sur les liens du menu. */
    z-index: calc(var(--z-header) - 1);
  }
}

@media (min-width: 1024px) {
  .burger { display: none; }
  .site-nav { display: flex; align-items: center; gap: var(--sp-6); }
  .drawer__backdrop { display: none; }
}
}

/* ATTENTION — deux pieges se cumulent ici, et il faut traiter les deux.
   Sur desktop, les reseaux sociaux vivent dans le pied de page ; il faut donc
   masquer ceux du header. Or `.social { display: flex }` est declare dans
   components.css :

   1) COUCHE. `.social` est dans la couche `components`, qui vient APRES
      `layout`. Une regle posee en couche layout serait ignoree quelle que
      soit sa specificite. D'ou le @layer components ci-dessous.
   2) ORDRE. A specificite egale et dans la meme couche, c'est le dernier
      declare qui gagne — et head.html charge header.css AVANT components.css.
      Il faut donc une specificite superieure : `.site-nav .site-nav__social`
      (0,2,0) l'emporte sur `.social` (0,1,0). */
@layer components {
  @media (min-width: 1024px) {
    .site-nav .site-nav__social { display: none; }
  }
}

@layer layout {
/* ============================================================================
   REFONTE — header sombre, et header transparent pose SUR le hero.
   Additif : sans .theme-dark ni .page--hero, rien ne change.
   ========================================================================= */

.site-header::before { transition: background var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }

.theme-dark .site-header::before { background: rgb(11 11 14 / .70); }
.theme-dark .site-header.is-scrolled::before { background: rgb(11 11 14 / .92); }
.theme-dark .site-header.is-scrolled { box-shadow: 0 1px 0 rgb(255 255 255 / .06), var(--sh-2); }

/* Les barres du burger etaient en noir dur. */
.theme-dark .burger__bar,
.theme-dark .burger__bar::before,
.theme-dark .burger__bar::after { background: var(--c-text); }
.theme-dark .site-nav__link:hover { color: var(--c-accent); }

/* Le lien de la page courante ne se distingue plus visuellement : ni couleur,
   ni filet. Le `:not(:hover)` evite de dependre de l'ordre des regles — le
   survol doit continuer a fonctionner sur ce lien comme sur les autres.
   `aria-current="page"` reste pose par header.js : les lecteurs d'ecran
   annoncent toujours la page courante. */
.theme-dark .site-nav__link.is-current:not(:hover) { color: var(--c-text); }
.theme-dark .site-nav__link.is-current::after { content: none; }

/* ---- Header pose SUR le hero, puis epingle apres un peu de defilement ----
   En haut de page il est `absolute` : il flotte sur l'image ET defile avec
   elle. Passe le seuil, header.js pose .is-pinned et il devient `fixed`.
   L'apparition anime `top` et NON `transform` : un transform ferait du header
   le bloc conteneur de ses descendants en position: fixed, donc du tiroir de
   navigation mobile (meme piege que le backdrop-filter, plus haut). */
.page--hero .site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-bottom-color: transparent;
}
/* Tant qu'il n'est pas epingle, le header est POSE sur l'image : ni fond, ni
   ombre. Sans cette ligne, `.is-scrolled` (pose des le 8e pixel) lui collerait
   une ombre alors qu'il flotte encore sur le hero. */
.page--hero .site-header:not(.is-pinned)::before { opacity: 0; }
.page--hero .site-header:not(.is-pinned) { box-shadow: none; }
.page--hero .site-header.is-pinned {
  position: fixed;
  border-bottom-color: var(--c-border);
  animation: header-descend var(--dur) var(--ease-out);
}
@keyframes header-descend { from { top: calc(var(--header-h-lg) * -1); } }
@media (prefers-reduced-motion: reduce) {
  .page--hero .site-header.is-pinned { animation: none; }
}

/* Le header etant hors flux, la section n'a plus a etre remontee : il lui
   suffit de reserver sa hauteur en haut. */
.page--hero main > :first-child { padding-top: calc(var(--header-h) + var(--sp-12)); }
@media (min-width: 1024px) {
  .page--hero main > :first-child { padding-top: calc(var(--header-h-lg) + var(--sp-16)); }
}

/* Tiroir mobile : meme halo dore que le reste du theme. */
@media (max-width: 1023.98px) {
  .theme-dark .site-nav { background: var(--c-bg); isolation: isolate; }
  .theme-dark .site-nav::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -8rem; right: -8rem;
    width: 26rem; aspect-ratio: 1;
    border-radius: var(--r-circle);
    background: var(--c-gold-500);
    filter: blur(120px);
    opacity: .22;
    pointer-events: none;
  }
  .theme-dark .site-nav__social .social__link { border-color: var(--c-border-strong); }
}
}

@layer layout {
/* Un seul logo visible a la fois : la variante claire ne sert qu'au theme sombre. */
.site-header__logo--sombre { display: none; }
.theme-dark .site-header__logo--clair { display: none; }
.theme-dark .site-header__logo--sombre { display: block; }

/* Logo agrandi, et barre descendue de quelques pixels : le padding haut
   decale le contenu vers le bas SANS grossir la barre, puisque la hauteur
   est fixee par min-height et que le modele de boite est en border-box. */
.theme-dark .site-header__logo { height: 52px; }
.theme-dark .site-header__inner { padding-top: var(--sp-2); }
@media (min-width: 1024px) {
  .theme-dark .site-header__logo { height: 66px; }
  .theme-dark .site-header__inner { padding-top: var(--sp-3); }
}
}

@layer layout {
/* Menu centre et plus grand, comme sur le design de reference.
   Reserve au theme sombre tant que la refonte ne couvre que l'accueil.
   La zone de marque prend la MEME largeur que la zone d'actions : sans cela,
   `margin-inline: auto` centrerait le menu entre les deux, donc de travers. */
@media (min-width: 1024px) {
  .theme-dark .site-header__brand { min-width: 176px; }
  .theme-dark .site-nav { flex: 1; }
  .theme-dark .site-nav__primary { margin-inline: auto; }
  .theme-dark .site-nav__list { gap: var(--sp-6); }
  /* Plus grand mais plus fin : a 19 px, le semi-gras d'origine pesait trop.
     (Inter n'est charge qu'en 400/600/800 : un 500 retomberait sur 400.) */
  .theme-dark .site-nav__link { font-size: var(--fs-md); font-weight: var(--fw-regular); letter-spacing: 0; }
}
}