/* header.css
   Relevé sur la source (1440px) : nav pleine largeur, 80px de haut, padding
   intérieur 40px/10px (= --gutter à cette largeur). Logo SVG (239×70 intrinsèque,
   ratio 3.41) contenu dans une case 123×60 (object-fit: contain). Le bouton
   « MENU » est une pastille rouge (--c-red), rayon 20px, texte Climate Crisis
   27px encre foncée. Aucun lien de nav visible sur la source sans interaction :
   reconstruit ici en <details>/<summary> natif (zéro JS) plutôt qu'en bouton
   inerte, avec les mêmes ancres/libellés que la nav du footer (tâche 17) pour
   rester cohérent site-wide. Le header source scrolle avec la page (pas de
   position fixe observée) ; ce choix le rend fixe et pilote la classe
   .site-header--scrolled via initHeader() — cohérence avec le module JS déjà
   livré (tâche 4), qui suppose un header persistant. */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: 80px;
  display: flex;
  align-items: center;
  background: transparent;
  /* Le fond garde --dur-base : c'est notre propre bascule transparent -> orange,
     la source n'en a pas (son fond est orange en permanence). Le glissement,
     lui, suit la courbe relevée sur elle. `box-shadow` a quitté cette liste en
     même temps que le liseré. */
  transition: background-color var(--dur-base) var(--ease-out),
              transform var(--dur-header) var(--ease-header);
}

/* Escamotage au défilement descendant, révélation en remontée — relevé sur la
   source le 2026-08-13 : sa barre collante est à `translateY(-80px)` (soit sa
   hauteur exacte) à défilement nul et pendant toute descente, et revient à 0
   dès qu'on remonte. C'était le constat n° 34, laissé de côté en tâche 18.
   Une différence de structure, assumée : la source a DEUX barres — le logo et
   la pastille MENU du haut de page appartiennent à son hero, et sa barre
   collante est un second bloc, caché tant qu'on n'est pas remonté. Nous n'en
   avons qu'une, qui joue les deux rôles ; elle reste donc visible en haut de
   page (transparente, comme aujourd'hui) pour ne pas faire disparaître le logo
   et le MENU que la source, elle, affiche bien à défilement nul. Le
   comportement visible est le même aux trois états : logo + MENU en haut de
   page, rien pendant la descente, barre orange en remontée. */
.site-header--hidden {
  transform: translateY(-100%);
}

/* Fond de la barre : --c-orange, pas --c-cream.
   Relevé sur la source le 2026-08-12 (tâche 18), en balayant le sous-arbre du
   conteneur d'en-tête (A₁.1 : la couleur est portée par la barre interne, pas
   par le conteneur, dont le background-color calculé est entièrement
   transparent). La déclaration relevée sur la barre correspond exactement au
   token --c-orange.
   Échantillonnée à treize offsets de défilement (0, 100, 400, 1200, 2500, 4500,
   7000, 9000, 10900, 12000, 12500, 13500, 14000) et aux trois largeurs de
   référence : la valeur est CONSTANTE. La source ne change pas le fond de son
   en-tête selon la section, ni au défilement — seule sa VISIBILITÉ change.
   Le crème d'origine mettait le logotype blanc (le SVG du logo est rempli en
   blanc) à 1,048 : 1 de contraste, c'est-à-dire invisible ; sur l'orange il
   remonte à 2,057 : 1, la valeur mesurée sur la source. */
/* Pas de liseré sous la barre : relevé sur la source le 2026-08-13, en
   remontant toute la chaîne d'ancêtres de sa barre collante — `box-shadow` et
   `border-bottom` valent `none` sur chacun d'eux. Le trait sombre de 2px posé
   ici était un ajout, et il tranchait d'autant plus que la barre est orange sur
   un fond souvent orange lui aussi. */
.site-header--scrolled {
  background: var(--c-orange);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-header__logo {
  display: block;
  width: 123px;
  height: 60px;
}

.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* ---------- Menu (details/summary natif) ---------- */
.site-header__menu {
  position: relative;
}

.site-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-red);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-27);
  line-height: 1;
}

.site-header__menu-btn::-webkit-details-marker { display: none; }
.site-header__menu-btn::marker { content: ""; }

/* Panneau de navigation — relevé sur la source le 2026-08-13, menu ouvert, aux
   trois largeurs de référence. Sa carte crème à ombre dure était une
   invention : la source pose une carte JAUNE, à grand rayon et ombre douce,
   dont les entrées sont séparées par un filet.
     panneau     311 × 403 à 1440 (largeur CONSTANTE aux trois paliers),
                 fond 255 232 120 = --c-yellow,
                 rayon 40px, padding 20px 30px, gap 10px,
                 ombre 0 10px 20px noir à 5 % = --shadow-soft,
                 overflow: hidden (il rogne le chevron au repos, voir plus bas)
     position    bord droit aligné sur celui de la pastille MENU ; haut du
                 panneau à 23,8px sous le bas de la pastille aux trois paliers
                 (1440 : 66,2 -> 90 ; 390 : 55,4 -> 79), d'où --sp-5.
     entrée      hauteur de ligne + 10px de padding bas, filet 2px solid
                 61 0 27 = --c-ink-alt posé SOUS ce padding — et AUCUN
                 filet sous la dernière entrée (mesuré : son ::after est à 0px).
     texte       Poppins 600, aligné à gauche, couleur 59 0 27 = --c-ink,
                 interligne 0,9 et chasse -0,03em aux trois paliers ; corps
                 37px à 1440, 42px à 1024, 33px à 390 — la source GROSSIT en
                 tablette, ce n'est pas une erreur de relevé (mesuré deux fois).
   ⚠ La source a DEUX panneaux (comme elle a deux barres, cf. plus haut) : celui
   de son hero, mesuré ici, et celui de sa barre collante, qui reste à 42px à
   1440. Nous n'avons qu'une barre : elle prend les valeurs du panneau du hero,
   celui qui est visible en haut de page. */
.site-header__nav {
  position: absolute;
  top: calc(100% + var(--sp-5));
  right: 0;
  width: 311px;
  padding: 20px 30px;
  border-radius: 40px;
  background: var(--c-yellow);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Ouverture en fondu, relevée sur la source le 2026-08-13 : son panneau de
   navigation apparaît en opacité de 0 à 1 en ~224ms, sans glissement ni
   changement de taille (311 × 403 constant, position constante). Le nôtre
   apparaissait d'un coup. La fermeture, elle, n'est pas animée non plus sur la
   source ; `<details>` ne le permettrait pas sans JavaScript, et ce n'est donc
   pas un écart. */
@keyframes menu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.site-header__menu[open] .site-header__nav {
  animation: menu-fade-in var(--dur-menu) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__menu[open] .site-header__nav { animation: none; }
}

.site-header__nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-header__nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding-block-end: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-37);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--c-ink);
}

/* Le filet appartient à l'entrée, pas au panneau : la dernière n'en a pas.
   Il est posé en absolu, comme sur la source, et non en `border-block-end` sur
   l'entrée elle-même : un bord ajouterait ses 2px à la hauteur de chaque ligne
   (43,3 relevés -> 45,3), soit 10px de trop sur le panneau. */
.site-header__nav li:not(:last-child) a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-block-end: 2px solid var(--c-ink-alt);
  pointer-events: none;
}

/* Chevron double au survol — relevé sur la source le 2026-08-13 : icône
   Phosphor `caret-double-right` (poids fill), 29 × 29, remplie
   246 194 244 = --c-pink-light. Au repos elle est `position: absolute;
   left: -25px`, donc hors du panneau et rognée par son `overflow: hidden` ;
   au survol elle repasse dans le flux, en tête de ligne, et pousse le libellé
   de ses 29px. Reproduit ici par une marge négative plutôt que par une bascule
   de positionnement : mêmes états, mais animables.
   ⚠ La DURÉE, elle, n'est pas relevée (la source anime en JS, sa transition
   calculée ne dit rien) : --dur-fast est un choix, pas une mesure. */
.site-header__nav a::before {
  content: "";
  flex: none;
  width: 29px;
  height: 29px;
  margin-inline-start: -29px;
  opacity: 0;
  background: var(--c-pink-light);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-80,80A8,8,0,0,1,128,208V147.31L61.66,213.66A8,8,0,0,1,48,208V48a8,8,0,0,1,13.66-5.66L128,108.69V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: margin var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.site-header__nav a:hover::before,
.site-header__nav a:focus-visible::before {
  margin-inline-start: 0;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav a::before { transition: none; }
}

/* Hauteurs relevées sur la source le 2026-08-12 (tâche 18), barre `.framer-2Czye`
   mesurée en-tête révélé (la source l'escamote en descente : il faut remonter
   pour l'amener à y = 0 avant de mesurer) :
     1440 → 1440 × 80    padding 10px 40px
     1024 → 1024 × 64    padding 0 20px 0 0
      390 →  390 × 64    padding 0 20px 0 0
   Ce n'est donc PAS « 64 constant » : 80 au-dessus de 1200, 64 en dessous.
   Le local valait 80 / 68 / 56 ; les deux paliers inférieurs passent à 64. */
@media (max-width: 1199px) {
  .site-header { height: 64px; }
  .site-header__logo { width: 104px; height: 50px; }
  .site-header__menu-btn { font-size: var(--fs-22); }
  /* Le panneau, lui, ne rétrécit pas : 311px de large aux trois paliers, et un
     corps de texte PLUS GRAND qu'à 1440 (42 contre 37). */
  .site-header__nav a { font-size: var(--fs-42); }
}

@media (max-width: 809px) {
  .site-header { height: 64px; }
  .site-header__logo { width: 84px; height: 40px; }
  .site-header__menu-btn { font-size: var(--fs-18); padding: var(--sp-2) var(--sp-4); }
  .site-header__nav a { font-size: var(--fs-33); }
}