/* ============================================================================
   SYSTÈME A — le socle partagé des deux pages du site Vasectomie BE
   Figé le 2026-08-12. Extrait et consolidé depuis
   `_Deliverables/home-a-2026-08-12/home.css` (direction A, base validée 34/35).

   CE FICHIER NE CONTIENT AUCUNE MISE EN PAGE DE PAGE PARTICULIÈRE.
   Il porte les jetons, les bandes, l'en-tête, le pied et les composants.
   Une page ajoute son propre fichier pour ses compositions.

   ── LES QUATRE INTERDITS, ET ILS SONT MESURÉS PAR `verifier-systeme.mjs` ──
   ⛔ AUCUNE BOÎTE hors boutons d'action. Ni carte, ni cadre, ni ombre, ni
      arrondi. Mesuré chez Elevate Medical : 2 rayons sur toute la page,
      contre 47,5 de médiane sur les 18 sites médicaux du corpus.
   ⛔ MANROPE SEULE. L'Instrument Serif est refusé (R-12, 12/08 : « A tout nu,
      Manrope partout »). Un `<button>` n'hérite PAS de la police : il faut le
      lui dire, sinon il prend celle du système et introduit la 2e police.
   ⛔ DES FILETS SOUS LES CHOSES, JAMAIS AUTOUR. Un seul côté bordé, toujours
      `block-end` (ou `block-start` pour un pied de bloc). Deux côtés = boîte.
   ⛔ AUCUNE REQUÊTE TIERCE. Les fontes sont auto-hébergées dans `assets/`.

   ── PALETTE, décidée par Gary le 12/08 (D-09) ──
   ⛔ « On va faire plutôt un fond BLEU CIEL avec une couleur plus foncée qui sera
      pas verte foncée mais BLEU FONCÉ. Et puis après, quand on scrolle, ça devient
      pas rose mais ça devient BLANC. »
   Trois couleurs de fond, et rien d'autre :
     bleu ciel     #b3cfe2   la nappe de départ
     blanc         #ffffff   la nappe après défilement
     bleu foncé    #0c2c3d   le texte, et les bandes sombres
     corail        #f28a6b   UNE action, jamais deux
     filet clair   #446274   sur le ciel ET sur le blanc
     filet sombre  #647f8f   sur le bleu foncé

   ── COMMENT ELLE A ÉTÉ CONSTRUITE, et pourquoi ce n'est pas « la même en bleu » ──
   Les couleurs d'Elevate ont été converties en OKLCH, puis la TEINTE seule a été
   tournée vers 235°, à luminance et chroma conservés. Motif : le bleu et le vert
   n'ont pas la même luminance perçue à teinte égale, et une rotation faite dans
   l'espace RGB aurait déplacé les contrastes sans qu'on le voie.
     elevate light-green #b2d1cc → L 0,8365  C 0,0338  H 184,7°
     elevate dark-green  #00302f → L 0,2795  C 0,0479  H 192,6°
   Notre ciel monte le chroma à 0,040 (contre 0,034) : à 0,034 en bleu, la couleur
   vire au gris et ne se lit plus comme un ciel.

   ── CONTRASTES RECALCULÉS SUR LA PALETTE BLEUE ──
     encre / ciel .......... 8,97   ✅  (7,84 en vert : le bleu gagne 1,1 point)
     encre / blanc ......... 14,55  ✅
     blanc / encre ......... 14,55  ✅
     ciel / encre .......... 8,97   ✅
     encre / corail ........ 5,98   ✅  (4,90 en vert)
     filet clair / ciel .... 3,99   ✅   filet clair / blanc ... 6,47  ✅
     filet sombre / encre .. 3,45   ✅
     ⛔ blanc / corail ...... 2,42  INTERDIT. Sur le corail, il n'y a que l'encre.
   ⚠️ LE CORAIL N'A PAS BOUGÉ, et c'est une mesure, pas une négligence. Le fond de
      départ ayant foncé de 0,64 à 0,59 de luminance et l'encre de 0,038 à 0,022,
      le même corail passe de 4,90 à 5,98 contre l'encre. Il ne vibre pas non plus :
      la vibration demande deux chromas forts, or le ciel est à C 0,040 contre 0,135
      pour le corail. Orange sur bleu est un couple complémentaire à chroma dissymé-
      trique : c'est ce qui rend l'action unique repérable d'un coup d'œil.
   Ce commentaire ne fait PAS foi. C'est `verifier-systeme.mjs` qui mesure, dans
   un vrai navigateur, en faisant RÉSOUDRE les couleurs par le navigateur.

   ── 13/08 AU SOIR — LA PALETTE PASSE AU TURQUOISE, ET LA PROPORTION CHANGE ──
   Tout ce qui précède reste écrit : c'était vrai jusqu'au 13/08 à 14 h, et ses
   contrastes sont ceux de la palette bleue. ⛔ Ils ne décrivent plus ce fichier.
   Ce bloc-ci les remplace, et porte sa date.

   Gary, devant le comparateur `_Deliverables/palettes-2026-08-13/` (D-41) :
   « Ok, on peut rester sur le TURQUOISE. Mais je trouve que le blanc il est
     trop blanc. Les deux nappes : j'aimerais bien que ce soit plus comme le
     fond #98D7DF. On fait tout comme ça, et de temps en temps on passe en
     #ffffff. »

   ⛔ CE QUI CHANGE N'EST PAS UNE VALEUR, C'EST UNE PROPORTION. Le système
   alternait deux nappes à parts comparables — c'est même le mécanisme de
   bascule au défilement ci-dessous. Il porte désormais UNE DOMINANTE et UNE
   PONCTUATION :
     nappe dominante  #98d7df   elle porte la page
     second état      #ffffff   OCCASIONNEL, et jamais sans raison écrite
     encre            #003035
     corail           #f28a6b   inchangé, une action et jamais deux
     filet clair      #34676c
     filet sombre     #588388

   ⛔ La bascule `[data-fond]` n'est PAS supprimée : c'est elle qui rend le
   second état possible. Ce qui change, c'est qu'une page ne déclare plus
   `data-fond-declencheur="blanc"` par alternance, mais par MOTIF ÉCRIT. Dans
   `gabarit.html`, la seule section blanche est l'illustration pleine largeur —
   et c'est exactement le bon usage : une surface qui doit se distinguer de la
   nappe pour exister.

   Contrastes de la fiche `turquoise` (`palettes-2026-08-13/palettes.json`),
   mesurés par l'instrument du dossier :
     encre / nappe .... 8,90   encre / blanc .... 14,25
     encre / corail ... 5,85   filets ........... 3,40 à 6,36
     ⛔ blanc / corail . 2,44   TOUJOURS INTERDIT. Sur le corail, que l'encre.
   Et ce commentaire-ci ne fait pas foi non plus : c'est `verifier-systeme.mjs`
   et la mire de `palettes-2026-08-13` qui mesurent.
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════ fontes ═══
   Auto-hébergées. `font-display: swap` + `size-adjust` implicite : Manrope est
   une variable à un seul axe, un fichier couvre les graisses 300 à 700. */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-300_700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-300_700-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ════════════════════════════════════════════════════════════ les jetons ═══ */
:root {
  /* ---- couleurs ----
     ⛔ LES NOMS NE CHANGENT PAS, LES VALEURS OUI (13/08, D-41). `--ciel` ne
     désigne plus un bleu ciel mais LA NAPPE DOMINANTE. Le nom est conservé
     volontairement : le renommer obligerait à toucher `gabarit.html`,
     `verifier-systeme.mjs`, `parcours-4/shared/jetons.css` et
     `parcours-4/trois-zones.css` — un changement de vocabulaire ne vaut pas
     qu'on rouvre le parcours. C'est déjà la convention de
     `palettes-2026-08-13/palettes.css`. */
  --ciel:   #98d7df;   /* nappe DOMINANTE — elle porte la page */
  --blanc:  #ffffff;   /* second état, OCCASIONNEL, jamais sans raison écrite */
  --encre:  #003035;
  --corail: #f28a6b;   /* inchangé */
  --filet-clair:  #34676c;
  --filet-sombre: #588388;

  /* ═══ LE FOND QUI CHANGE AU DÉFILEMENT (D-09) ═══
     Mécanisme relevé dans la VRAIE feuille d'Elevate (`elevate-main.css`, 110 Ko,
     récupérée le 12/08) : chaque section porte `data-global-bg-trigger="<nom>"`,
     un script pose l'attribut correspondant sur la racine, et le CSS ne fait que
     `[data-global-bg=light-green]{--clr-global-bg:#b2d1cc}`. Rien de plus.

     ⛔ ICI, LE FOND GLOBAL NE BASCULE QU'ENTRE LES DEUX NAPPES CLAIRES.
     C'est ce qui rend le mécanisme sûr SANS JavaScript : sans script, l'attribut
     n'est jamais posé, le fond reste le ciel, et l'encre tient 8,97:1 dessus comme
     14,55:1 sur le blanc. Une bande SOMBRE ne passe jamais par ce mécanisme : elle
     peint son propre fond (`.bande--encre`), sinon une page sans script afficherait
     du blanc sur du ciel.
     ⚠️ La durée 400 ms et la courbe sont celles d'Elevate (`--transition-duration`
     et `--transition-bezier`), pas les nôtres : c'est leur transition de fond. */
  --fond-global: var(--ciel);
  --bascule-duree: 400ms;
  --bascule-courbe: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ---- LA LARGEUR DE RÉFÉRENCE, et pourquoi elle existe ----
     `.claude/rules/myvicto-header-pill-fit.md`, payée deux fois :
     « Ne jamais dimensionner en `vw` un contenu enfermé dans un conteneur qui
     a un `max-width`. Indexer sur la largeur du conteneur, pas sur celle de la
     fenêtre. » Passé le palier, le contenant est figé et le contenu continue
     de grossir : à 1280 il reste de la marge, à 1440 il n'y en a plus.

     `--fit` est la largeur RÉELLEMENT disponible, plafonnée. TOUTE grandeur
     qui grandit avec l'écran s'indexe sur elle, et sur rien d'autre. Il n'y a
     AUCUN `vw` ailleurs que dans cette ligne.
     Réserve honnête : `100vw` compte la barre de défilement, donc `--fit` est
     surestimé d'environ 15 px sur un bureau à barre permanente. L'écart est
     inférieur à 0,5 px sur toutes les tailles calculées ci-dessous. */
  --page-max:    82.5rem;                        /* 1320 = colonne 1240 + 2 × 40 */
  --contenu-max: 77.5rem;                        /* 1240, mesuré chez Elevate à 1440 */
  --fit: min(100vw, var(--page-max));

  /* ---- gouttière : 20 px à 320, 40 px dès 1320 ----
     À 390 px la colonne utile fait donc 350 px, ce qui est exactement la mesure
     du vault (`PARCOURS.md` § 6 : 41 à 46 signes par ligne, irréductible). */
  --gouttiere: clamp(1.25rem, calc(1.25rem + (var(--fit) - 20rem) * 0.02), 2.5rem);

  /* ---- ÉCHELLE TYPOGRAPHIQUE — huit paliers, pas neuf ----
     Interpolation linéaire sur `--fit`, jamais sur `vw`.
     Valeurs aux deux bouts (320 px → 1320 px et au-delà) :
       display  40 → 69,6 px      bloc     20 → 25,6 px
       titre    28 → 44,8 px      sous     16,8 → 19,2 px
       corps    17 → 18 px        appui    15 → 15,6 px
       petit    14 px fixe        micro    11 px fixe

     ⛔ POURQUOI LE DISPLAY PLAFONNE À 69,6 px ET PAS À 84.
     Elevate Medical, la référence, a LE PLUS PETIT TITRE des 18 sites médicaux
     mesurés : 32 px — et c'est la page la plus vide du corpus (rang 1 sur 18 en
     part de fond, 0,881). À l'inverse `ruhdental` titre à 158 px et n'a que
     11,7 % de vide, le plus mauvais score. L'aération ne vient PAS de la grosse
     typo. La médiane de la famille médecine est à 73 px : 69,6 s'y range, et
     laisse 3,87:1 de rapport avec le corps (NN/g : 3:1 minimum pour une
     hiérarchie forte).
     ⚠️ C'est un ARBITRAGE de ma part, pas une décision de Gary. Il se défait en
     changeant UNE valeur, la borne haute de `--t-display`. Il est signalé comme
     tel dans SYSTEME.md. */
  --t-display: clamp(2.5rem,    calc(2.5rem    + (var(--fit) - 20rem) * 0.0296), 4.35rem);
  --t-titre:   clamp(1.75rem,   calc(1.75rem   + (var(--fit) - 20rem) * 0.0168), 2.8rem);
  --t-bloc:    clamp(1.25rem,   calc(1.25rem   + (var(--fit) - 20rem) * 0.0056), 1.6rem);
  /* ⚠️ CORRIGÉ APRÈS MESURE (12/08). Le plancher était à 1,05rem : à 390 px le
     palier « sous » rendait 16,97 px et le corps 17,07 px. Le chapô était donc
     PLUS PETIT que le texte courant, sur la largeur qui porte tout le trafic.
     Une hiérarchie qui s'inverse en mobile n'est pas une hiérarchie. */
  --t-sous:    clamp(1.125rem,  calc(1.125rem  + (var(--fit) - 20rem) * 0.0012), 1.2rem);
  --t-corps:   clamp(1.0625rem, calc(1.0625rem + (var(--fit) - 20rem) * 0.001),  1.125rem);
  --t-appui:   clamp(0.9375rem, calc(0.9375rem + (var(--fit) - 20rem) * 0.0006), 0.975rem);
  --t-petit:   0.875rem;
  --t-micro:   0.6875rem;

  /* ---- interlignes et mesure ---- */
  /* ── LES INTERLIGNES, et la seule chose qu'Elevate fait 28 fois sur 38 ──
     Relevé dans `elevate-main.css` : `line-height: 1.516` apparaît 28 fois, `1.6`
     trois fois, le reste est du 0 ou du 1,15 de normalisation. UNE valeur, presque
     partout, titres compris — c'est trop constant pour être un accident, et c'est
     probablement une part de l'aération que la capture ne pouvait pas expliquer.
     Le système avait DIX interlignes différents (1,6 · 1,55 · 1,5 · 1,45 · 1,4 ·
     1,35 · 1,32 · 1,25 · 1,2 · 1,18). Il en a QUATRE.
     ⚠️ 1,516 ne peut pas monter jusqu'aux deux « grands » : le plus gros titre
     d'Elevate fait 32 px, où 1,516 donne 48 px d'interligne ; à notre display de
     69,6 px il donnerait 105 px, et le titre se disloquerait. */
  --lh-display: 0.98;
  --lh-titre:   1.06;
  --lh:         1.516;
  --lh-serre:   1.25;
  /* La colonne de prose. ⚠️ `ch` mesure la largeur du ZÉRO, qui est plus large
     que la moyenne des minuscules : 62ch rendait 80 signes par ligne, mesurés
     dans le navigateur — au-dessus des 50-75 de NN/g. 54ch rend ~70 signes.
     Sur mobile c'est la gouttière qui commande, et elle donne 43 signes. */
  --mesure:     54ch;

  /* ---- espacement, base 4 px ---- */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e6: 1.5rem;   --e8: 2rem;     --e12: 3rem;    --e16: 4rem;   --e24: 6rem;

  /* respiration verticale d'une bande : 48 px à 320, 112 px dès 1320.
     Elevate : 47 % de la hauteur en bandes totalement vides. C'est le trou qui
     aère, pas la suppression de mots. */
  --bande-y: clamp(3rem, calc(3rem + (var(--fit) - 20rem) * 0.064), 7rem);

  /* ---- cibles et filets ---- */
  --cible: 2.75rem;                 /* 44 px, WCAG 2.5.5 */
  --trait: 1px;

  /* ---- l'en-tête collant ----
     ⚠️ PIÈGE DÉJÀ PAYÉ : un élément collant ne prend pas le fond de son parent
     DOM, il survole les bandes suivantes. Tout composant collant de ce système
     porte donc SON PROPRE FOND, et la garde le vérifie.
     `--entete-h` a une valeur CSS utilisable sans JavaScript. Une page qui
     mesure la hauteur réelle peut la réécrire (`ResizeObserver`), jamais la
     capturer une seule fois au chargement. */
  --entete-h: 7rem;

  /* ── LES GRAISSES, et l'écart assumé avec la référence ──
     Relevé dans `elevate-main.css` : poids 400 (16 fois), 500 (14 fois), 700 (3),
     600 (2). Leur titre de section est en 400, leur h1-alt en 500. NOUS SOMMES
     PLUS LOURDS, à 650 sur les titres. C'est la base validée 34/35 par le
     directeur créatif, et je ne la défais pas : l'écart est écrit, il se referme
     en changeant CES DEUX JETONS, pas en réécrivant vingt règles. */
  --w-titre: 650;
  --w-appui: 700;

  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* ═════════════════════════════════════════════════════════════ le socle ═══ */
*, *::before, *::after { box-sizing: border-box; }

/* ═══════════════════ LA NAPPE QUI CHANGE AU DÉFILEMENT (D-09) ═══════════════
   `--fond-global` vaut le ciel tant que rien ne le change. Un script optionnel
   pose `data-fond="blanc"` sur `<html>` quand une section déclarante entre à
   l'écran. AUCUNE PAGE NE DÉPEND DE CE SCRIPT : sans lui, la nappe reste le ciel
   et tout reste lisible. C'est ce qui distingue une amélioration progressive
   d'une dépendance déguisée.
   ⛔ Ce mécanisme ne connaît QUE des nappes claires. Voir le jeton. */
[data-fond="ciel"]  { --fond-global: var(--ciel); }
[data-fond="blanc"] { --fond-global: var(--blanc); }

html {
  min-inline-size: 20rem;
  background: var(--fond-global);
  transition: background-color var(--bascule-duree) var(--bascule-courbe);
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--entete-h) + 1rem);
}

body {
  margin: 0;
  background: var(--fond-global);
  transition: background-color var(--bascule-duree) var(--bascule-courbe);
  color: var(--encre);
  font-size: var(--t-corps);
  line-height: var(--lh);
  font-weight: 400;
}

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-inline-size: 100%; height: auto; }

/* ⛔ La police ne s'hérite PAS sur les contrôles de formulaire. Sans cette
   ligne, le premier `<button>` de la première page introduit Arial, et le site
   qui n'en veut qu'une en a deux. Défaut mesuré le 12/08 sur la home. */
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- titres : la taille vient du jeton, jamais d'une valeur écrite à la main -- */
.t-display { font-size: var(--t-display); font-weight: var(--w-titre); line-height: var(--lh-display); letter-spacing: -0.042em; text-wrap: balance; }
h1 { font-size: var(--t-display); font-weight: var(--w-titre); line-height: var(--lh-display); letter-spacing: -0.042em; text-wrap: balance; }
h2 { font-size: var(--t-titre);   font-weight: var(--w-titre); line-height: var(--lh-titre);   letter-spacing: -0.03em;  text-wrap: balance; }
h3 { font-size: var(--t-bloc);    font-weight: var(--w-titre); line-height: var(--lh); letter-spacing: -0.016em; }
h4 { font-size: var(--t-sous);    font-weight: var(--w-appui); line-height: var(--lh); }

/* ═══════════════════════════════════════════════════════════ le focus ═════
   L'encre porte le contraste, le corail porte l'identité. Le corail SEUL ne
   passe pas — 1,50:1 sur le ciel, mesuré. Défaut déjà payé le 11/08.
   L'anneau porte aussi sur `:focus` tout court dans une fenêtre modale, parce
   que `:focus-visible` n'est pas garanti sur un focus PROGRAMMÉ, et une modale
   ne fait que ça. */
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible,
.modale :where(a, button, summary, [tabindex]):focus {
  outline: 0.1875rem solid var(--encre);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--corail) 55%, transparent);
  border-radius: 0;
}
.bande--encre :where(a, button, summary, [tabindex]):focus-visible,
.pied :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--blanc); }

/* le lien d'évitement : premier dans l'ordre du DOM, donc premier au clavier */
.saut {
  position: fixed;
  z-index: 60;
  inset-block-start: var(--e2);
  inset-inline-start: var(--e2);
  min-block-size: var(--cible);
  padding: var(--e3) var(--e4);
  display: inline-flex;
  align-items: center;
  color: var(--blanc);
  background: var(--encre);
  font-size: var(--t-petit);
  font-weight: var(--w-appui);
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 180ms var(--sortie);
}
.saut:focus-visible { transform: translateY(0); }

/* ═══════════════════════════════════════════ LE SYSTÈME DE BANDES ═════════
   Une bande = une section, pleine largeur, posée sur la nappe.
   ⛔ LE DÉFAUT EST `.bande--nappe`, QUI NE PEINT RIEN. C'est la nappe globale qui
   se voit à travers, et c'est elle qui passe du ciel au blanc au défilement. Une
   bande qui peint son propre fond CASSE la continuité : elle ne se justifie que
   pour une rupture assumée (`.bande--encre`), et elle se compte. Elevate : 2 couleurs de fond peintes, la
   première couvrant 98,5 % de la surface. Médiane du corpus : 6.
   ⛔ Plafond du système : 3 ruptures maximum par page, pied compris.

   La grille interne donne UN SEUL BORD GAUCHE à tout le site, et rend les
   sorties de bord SANS `100vw`, SANS marge négative et SANS `overflow-x`.
   `100vw` compterait la barre de défilement et fabriquerait un débordement ;
   une marge négative recopiée à la main dérive au premier ajustement. */
.bande {
  padding-block: var(--bande-y);
  display: grid;
  grid-template-columns:
    [bord-g] minmax(var(--gouttiere), 1fr)
    [texte-g] minmax(0, var(--contenu-max))
    [texte-d] minmax(var(--gouttiere), 1fr) [bord-d];
}
/* tout enfant direct se range dans la colonne de texte, sans qu'on le demande */
.bande > * { grid-column: texte-g / texte-d; }
/* les trois sorties de bord, nommées */
.bande > .pleine-largeur { grid-column: bord-g / bord-d; }
.bande > .sortie-droite  { grid-column: texte-g / bord-d; }
.bande > .sortie-gauche  { grid-column: bord-g / texte-d; }

.bande--nappe { background: transparent; color: var(--encre); }   /* laisse voir la nappe globale */
.bande--ciel  { background: var(--ciel);  color: var(--encre); }
.bande--blanc   { background: var(--blanc);   color: var(--encre); }
.bande--encre  { background: var(--encre);   color: var(--blanc); }
.bande--encre { background: var(--encre); color: var(--blanc); }

/* la bande sans respiration verticale, pour un bloc image qui touche ses voisins */
.bande--serree { padding-block: 0; }

/* ═════════════════════════════════════════════════ L'EN-TÊTE PARTAGÉ ═════
   Collant sur les DEUX largeurs. Mesure du 12/08 sur la home : en `relative`,
   les deux seules actions du site étaient atteignables sur 0,7 % de la hauteur
   au bureau et 1,1 % en mobile, avec un intervalle de 7 200 px sans aucune
   action. Une page de 11 000 px sans action permanente n'a pas d'action.

   ⛔ IL PORTE SON PROPRE FOND. C'est le piège n°2 du brief : un élément collant
   prend le fond de la bande qu'il survole, pas celui de son parent DOM. Sans
   `background` déclaré ici, le texte de l'en-tête passe sur la bande sombre et
   tombe à 1,00:1. La garde refuse tout `position: sticky` sans fond opaque.

   ⛔ DEUX ÉTAGES, AUX DEUX LARGEURS, ET C'EST L'ORDRE DE TABULATION QUI L'IMPOSE.
   Étage 1 : identité à gauche, action permanente à droite. Étage 2 : navigation.
   L'ordre du DOM est identité → action → navigation, donc l'ordre au clavier
   descend et va vers la droite dans chaque rangée : il suit l'ordre visuel.
   La disposition « identité | navigation | action » sur une seule ligne est
   IMPOSSIBLE à ordre de tabulation correct — le clavier passerait par l'action
   avant la navigation qui est visuellement à sa gauche. Et à 390 px les trois
   ne tiennent de toute façon pas sur une ligne : mesuré, l'identité fait 188 px
   en capitales interlettrées et la navigation 297 px, pour 350 px utiles.

   HAUTEUR MESURÉE (Manrope, deux rangées de cible 44 px) :
     390 px  → 108 px, soit 12,8 % d'une fenêtre de 844
     1440 px → 108 px. Elevate Medical, la référence, est à 96 px.
   Le repli à ~60 px obtenu sur la home dépend d'un script qui MESURE la hauteur
   réelle ; il n'est pas dans ce socle, parce que le site doit fonctionner sans
   JavaScript. Une page qui charge un script pose `data-entete="compact"` :
   le style existe, il n'est jamais une dépendance. */
.entete {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  /* ⛔ Il porte son propre fond — piège n°2 — mais ce fond est LA NAPPE GLOBALE :
     un en-tête resté au ciel au-dessus d'une page devenue blanche ferait une
     bande de couleur en haut de l'écran, que personne n'a demandée. */
  background: var(--fond-global);
  transition: background-color var(--bascule-duree) var(--bascule-courbe);
  color: var(--encre);
  border-block-end: var(--trait) solid var(--filet-clair);
  padding-block: var(--e2);
  display: grid;
  grid-template-columns:
    [bord-g] minmax(var(--gouttiere), 1fr)
    [texte-g] minmax(0, var(--contenu-max))
    [texte-d] minmax(var(--gouttiere), 1fr) [bord-d];
}
/* Étage 1 : identité + action. `space-between` les pousse aux deux bords. */
.entete__contenu {
  grid-column: texte-g / texte-d;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
}
.entete__identite {
  font-size: var(--t-micro);
  font-weight: var(--w-appui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: var(--lh);
  text-decoration: none;
  color: inherit;
  min-block-size: var(--cible);
  display: inline-flex;
  align-items: center;
}
/* Étage 2 : la navigation, sur sa propre rangée, dans la même colonne de texte.
   ⛔ Trois entrées, pas cinq. Elevate en a 5 avec 17 sous-entrées repliées ; ce
   site a deux pages. Cowan 2001 plafonne à 4 options simultanées, et NN/g
   mesure qu'un hamburger sur bureau divise l'usage de la navigation par deux
   (48 % → 27 %) : la navigation reste VISIBLE, sur les deux largeurs.
   ⛔ Un libellé nomme son sujet (R-02). Jamais « En savoir plus ». */
.entete__nav {
  grid-column: texte-g / texte-d;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1) var(--e4);
}
.entete__nav a {
  min-block-size: var(--cible);
  padding-block: var(--e1);
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: var(--t-petit);
  font-weight: var(--w-appui);
  line-height: var(--lh);
  text-decoration: none;
  border-block-end: var(--trait) solid transparent;
}
.entete__nav a:hover { border-block-end-color: var(--filet-clair); }
/* « indiquer où l'on se trouve » : NN/g le dit « probably the single most
   common mistake » du design de menu. Le filet plein, jamais une pastille. */
.entete__nav a[aria-current="page"] { border-block-end: 2px solid currentColor; }

.entete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); }

/* le repli, disponible pour une page qui charge un script. Sans script, rien
   ne le déclenche et l'en-tête reste complet : c'est un ajout, pas une
   dépendance. */
[data-entete="compact"] .entete { padding-block: var(--e2); }
[data-entete="compact"] .entete__identite,
[data-entete="compact"] .entete__nav { display: none; }

/* ══════════════════════════════════════════════════════ LES ACTIONS ═══════
   ⛔ SEULE exception à « aucune boîte » de tout le système.
   Le corail ne désigne QU'UNE action sur une page. Mesuré le 12/08 : deux
   actions corail se croisaient sur 17,4 % des écrans au bureau. Le téléphone
   de l'en-tête prend l'encre pleine (10,10:1), il reste une action pleine. */
.action {
  min-block-size: var(--cible);
  min-inline-size: var(--cible);
  padding: var(--e3) var(--e6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--encre);
  font-size: var(--t-appui);
  font-weight: var(--w-appui);
  line-height: var(--lh-serre);
  text-align: center;
  text-decoration: none;
  border: var(--trait) solid var(--encre);
  background: transparent;
  cursor: pointer;
  transition: background-color 180ms linear, color 180ms linear;
}
.action--corail { background: var(--corail); }              /* ⛔ une seule par page */
.action--encre  { background: var(--encre); color: var(--blanc); }
.action--ligne  { background: transparent; }
.action:hover   { background: var(--encre); color: var(--blanc); }
.action--encre:hover { background: var(--blanc); color: var(--encre); }

.bande--encre .action, .bande--encre .action, .pied .action { color: var(--blanc); border-color: var(--blanc); }
.bande--encre .action:hover, .bande--encre .action:hover, .pied .action:hover { background: var(--blanc); color: var(--encre); }
.bande--encre .action--corail, .bande--encre .action--corail, .pied .action--corail { color: var(--encre); border-color: var(--encre); }

/* L'ACTION INERTE : visible, désignée, et sans URL inventée.
   Quand la destination n'existe pas encore, on ne fabrique pas de lien mort :
   on montre le contrôle et on dit qu'il ne mène nulle part. Filet tireté. */
.action-inerte {
  min-block-size: var(--cible);
  padding-block: var(--e3);
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: var(--t-appui);
  font-weight: var(--w-appui);
  line-height: var(--lh-serre);
  /* ⛔ 2026-08-14 · R-25. Le filet TIRETÉ est retiré. Gary : « Arrête un peu avec
     tous ces pointillés que je vois partout. Les pointillés, ça donne vraiment
     pas bien. J'ai pas l'impression qu'Elevate, tu avais comme ça plein de
     pointillés partout. » Il a raison sur la mesure : Elevate ne dessine AUCUNE
     boîte, et un pointillé est un filet — il tombe sous la même règle.
     ⛔ CE N'ÉTAIT PAS UNE FAUTE DE CONSTRUCTION, C'ÉTAIT UNE FAUTE DE SOCLE :
        elle était reproduite par tout constructeur, sur toute page, depuis le
        début. La corriger ici est la seule façon qu'elle ne revienne pas.
     Ce qui distingue un contrôle inerte maintenant : le POIDS (700), la TAILLE
     (corps d'appui) et le curseur — jamais un trait décoratif. */
  cursor: not-allowed;
}
.action-inerte + .note { margin-block-start: var(--e2); }

/* le lien de texte : un filet dessous, jamais un cadre. C'est la mécanique n°1
   d'Elevate — ses 14 liens de service et ses 5 appels secondaires sont tous
   soulignés, aucun n'est encadré. */
.lien-filet {
  color: inherit;
  font-weight: var(--w-appui);
  text-decoration: none;
  border-block-end: var(--trait) solid currentColor;
}
/* le même, en cible tactile autonome (hors paragraphe) */
.lien-filet--cible { min-block-size: var(--cible); display: inline-flex; align-items: center; }

/* ══════════════════════════════════════════════════ LES COMPOSANTS ═══════ */

/* ---- le surtitre : une étiquette, jamais une phrase ---- */
.surtitre {
  display: block;
  margin-block-end: var(--e4);
  font-size: var(--t-micro);
  font-weight: var(--w-appui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: var(--lh);
}

/* ---- LE TITRE DE SECTION ----
   ⛔ R-01 (12/08) : « J'avais déjà dit que je voulais pas ces petites phrases
      là en dessous, que ça sert à rien. » IL N'Y A DONC AUCUN COMPOSANT DE
      SOUS-TITRE DE SECTION dans ce système, et la garde refuse tout élément
      qui en tiendrait lieu (`.sous-titre`, `.chapo-section`, `.intro-section`).
   ⛔ R-02 : un titre NOMME son sujet. « Ce que ça coûte », pas « Le caractère
      définitif ». Le balayage vertical du bord gauche n'accroche que le premier
      mot (Nielsen 2006, 232 utilisateurs). */
.titre-section { margin-block-end: var(--e8); max-inline-size: 26ch; }

/* ---- LE BLOC DE TEXTE ----
   62 signes au plafond bureau ; à 390 px la gouttière donne 41 à 46, et c'est
   irréductible. NHS : phrases de 20 mots, paragraphes de 3 phrases. */
.prose { max-inline-size: var(--mesure); }
.prose > * + * { margin-block-start: var(--e4); }
.prose p { max-inline-size: var(--mesure); }
.chapo { font-size: var(--t-sous); font-weight: 500; max-inline-size: 42ch; }
.note  { display: block; font-size: var(--t-petit); line-height: var(--lh); max-inline-size: 52ch; }

/* ---- LA LISTE À FILETS ----
   Un filet SOUS chaque entrée, jamais autour. Le dernier n'en porte pas : deux
   filets à quatre pixels d'écart, c'est un cadre qui commence. */
.liste-filet > li {
  padding-block: var(--e4);
  border-block-end: var(--trait) solid var(--filet-clair);
}
.liste-filet > li:last-child { border-block-end: 0; }
.bande--encre .liste-filet > li,
.bande--encre .liste-filet > li,
.pied .liste-filet > li { border-block-end-color: var(--filet-sombre); }

/* la variante à deux colonnes (intitulé à gauche, valeur à droite) : elle sert
   au prix et à toute paire question/réponse courte. À 390 px la valeur passe
   sous son intitulé, elle ne se rogne jamais. */
.liste-filet--paire > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2) var(--e6);
}
.liste-filet__valeur { font-weight: var(--w-appui); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- LE DÉPLIANT ----
   ⛔ Aucune information DUE ne vit derrière un dépliant (risques,
      contre-indications, prix, autres contraceptions, caractère définitif,
      absence d'urgence). `PARCOURS.md` § 0 : « On hiérarchise par le poids et
      par l'ordre. Jamais par la disponibilité. »
   Filet sous l'intitulé. Aucun cadre, aucun fond, aucun arrondi. */
.depliant { border-block-end: var(--trait) solid var(--filet-clair); }
.depliant > summary {
  min-block-size: var(--cible);
  padding-block: var(--e4);
  padding-inline-end: 2.5rem;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--t-sous);
  font-weight: var(--w-titre);
  line-height: var(--lh);
  cursor: pointer;
  list-style: none;
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: var(--lh-serre);
}
.depliant[open] > summary::after { content: "\2013"; }
.depliant__reponse { padding-block: 0 var(--e6); max-inline-size: var(--mesure); }
.bande--encre .depliant, .bande--encre .depliant { border-block-end-color: var(--filet-sombre); }

/* ---- L'EMPLACEMENT D'ILLUSTRATION ----
   ⛔ Jamais de carte : pas de fond propre, pas de cadre, pas d'arrondi, pas
      d'ombre. La composition SORT par un bord de page (classes `.sortie-*` de
      la grille de bande), donc le quatrième côté ne se referme jamais.
   Le trait de l'illustration est de la couleur du texte, sur le fond de la
   page : c'est ce que fait Elevate, et c'est pour ça que ses 4 illustrations
   n'ajoutent AUCUN rayon à la page.
   ⛔ `width` et `height` sont obligatoires sur l'image. Mesuré le 11/08 :
      12 photos sans dimensions = +714 px de saut de mise en page à 390 px. */
.illustration { margin: 0; }
.illustration img, .illustration svg { inline-size: 100%; }
.illustration__mention {
  margin-block-start: var(--e3);
  max-inline-size: 52ch;
  font-size: var(--t-petit);
  line-height: var(--lh);
}

/* le bloc muet : une image pleine largeur, sans titre posé dessus, sans texte,
   sans bouton. Chez Elevate c'est le bloc le PLUS HAUT de la page (752 px,
   10,9 %) et il porte ZÉRO mot. C'est la respiration qui remplace dix blocs
   allégés. */
.bloc-muet { margin: 0; }
.bloc-muet img, .bloc-muet svg { inline-size: 100%; }

/* ---- LA COLONNE COLLANTE (sommaire, repère de lecture) ----
   ⛔ Elle porte SON PROPRE FOND, comme l'en-tête, et pour la même raison.
   ⛔ Elle est `static` sous 62rem : mesuré sur la home, un sommaire de 7 liens
      à 44 px fait ~350 px, soit 41 % d'une fenêtre de 844. Il cacherait plus
      qu'il n'aiderait. */
.colonne-collante { align-self: start; }
.colonne-collante__titre {
  padding-block-end: var(--e3);
  border-block-end: var(--trait) solid var(--filet-clair);
  font-size: var(--t-micro);
  font-weight: var(--w-appui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.colonne-collante a {
  min-block-size: var(--cible);
  padding-block: var(--e2);
  display: flex;
  gap: var(--e3);
  align-items: baseline;
  color: inherit;
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: var(--lh);
  text-decoration: none;
  border-block-end: var(--trait) solid transparent;
}
.colonne-collante a:hover { border-block-end-color: var(--filet-clair); }
.colonne-collante a[aria-current="true"] { font-weight: var(--w-appui); border-block-end: 2px solid currentColor; }

/* ══════════════════════════════════════════════════════ LE PIED PARTAGÉ ═══
   ⛔ LA LIGNE D'ENTITÉ EST OBLIGATOIRE (U5, article 37 du Code de déontologie
      médicale belge). R-04 refuse son EMPLACEMENT et sa TAILLE d'origine —
      corps 13 sous un H1 de 84 px — pas son existence. Elle vit donc ici, au
      corps d'appui, avec un filet au-dessus pour qu'on la trouve.
      « Un refus n'annule pas une obligation légale. » */
.pied {
  background: var(--encre);
  color: var(--blanc);
  padding-block: var(--bande-y);
  border-block-start: var(--trait) solid var(--filet-sombre);
  display: grid;
  grid-template-columns:
    [bord-g] minmax(var(--gouttiere), 1fr)
    [texte-g] minmax(0, var(--contenu-max))
    [texte-d] minmax(var(--gouttiere), 1fr) [bord-d];
}
.pied > * { grid-column: texte-g / texte-d; }
.pied__nom { font-size: var(--t-bloc); font-weight: var(--w-titre); letter-spacing: -0.02em; }
.pied__colonnes {
  margin-block-start: var(--e12);
  display: grid;
  gap: var(--e8);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.pied__col { display: grid; gap: var(--e3); align-content: start; }
.pied__col p { font-size: var(--t-petit); line-height: var(--lh); max-inline-size: 40ch; }
.pied__titre {
  padding-block-end: var(--e2);
  border-block-end: var(--trait) solid var(--filet-sombre);
  font-size: var(--t-micro);
  font-weight: var(--w-appui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pied__entite {
  margin-block-start: var(--e12);
  padding-block-start: var(--e4);
  border-block-start: var(--trait) solid var(--filet-sombre);
  max-inline-size: 60ch;
  font-size: var(--t-appui);
  line-height: var(--lh);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════ LA FENÊTRE MODALE ════════
   D-03 : le quiz et le parcours arrivent en fenêtre, ils ne s'étalent plus
   dans la page.
   ⛔ AUCUNE BORDURE : un panneau encadré sur quatre côtés serait la première
      boîte de la page. C'est un fond plein, et une ombre au-delà de 48rem.
   ⛔ À 390 px la fenêtre est PLEIN ÉCRAN. Tout le trafic est mobile : une
      modale centrée y perd de la place pour un effet que personne ne regarde. */
.modale {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--encre);
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  overflow: hidden;
}
/* ⛔ CORRIGÉ LE 13/08 : le voile était ÉCRIT EN DUR, `rgb(11 52 52 / 0.72)` —
   une troisième valeur d'encre, qui n'était ni celle du jeton bleu (#0c2c3d) ni
   celle d'aujourd'hui. Une couleur en dur est une couleur qui ne suit pas le
   prochain changement, et celle-ci avait déjà décroché. Elle lit le jeton.
   `color-mix()` est Baseline widely available depuis le 2025-11-09. */
.modale::backdrop { background: color-mix(in srgb, var(--encre) 72%, transparent); }
/* ⛔ LA NAPPE DOMINANTE (D-41, 13/08). Le panneau de la fenêtre EST la page que
   l'on regarde quand elle est ouverte : c'est lui qui porte le turquoise. */
.modale__panneau {
  block-size: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--ciel);
}
.modale__barre { display: flex; justify-content: flex-end; padding: var(--e3) var(--e4); }
.modale__corps { overflow: auto; padding: 0 var(--e4) var(--e8); }
/* le fond de page ne défile plus tant que la fenêtre est ouverte */
html.modale-ouverte { overflow: hidden; }

@media (min-width: 48rem) {
  .modale {
    inline-size: min(75rem, 94vw);
    block-size: min(52rem, 90vh);
    margin: auto;
  }
  /* ⛔ Même correction que le voile : elle était en dur, elle lit le jeton. */
  .modale__panneau { box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--encre) 35%, transparent); }
}

/* ═════════════════════════════════════════════════════════ ≥ 62rem ════════ */
@media (min-width: 62rem) {
  .colonne-collante {
    position: sticky;
    inset-block-start: calc(var(--entete-h) + var(--e6));
    z-index: 3;
    background: var(--fond-global);
  }
  .bande--ciel  .colonne-collante { background: var(--ciel); }
  .bande--blanc .colonne-collante { background: var(--blanc); }
  .bande--encre .colonne-collante { background: var(--encre); }
}

/* ═════════════════════════════════════════════════════════ < 30rem ════════
   Deux lignes d'en-tête assumées et mesurées. Voir le commentaire de `.entete`. */
@media (max-width: 30rem) {
  /* La navigation prend toute la rangée et répartit ses trois entrées.
     Mesuré à 350 px utiles : trois libellés courts et deux écarts tiennent sur
     une ligne. Un quatrième passerait à la ligne et l'en-tête gagnerait 44 px —
     c'est la raison chiffrée du plafond à TROIS entrées. */
  .entete__nav { justify-content: space-between; gap: var(--e1) var(--e2); }
  /* ⚠️ NE PAS mettre `flex: 1 1 auto` sur l'identité : mesuré le 12/08, elle
     prenait alors les 347 px de la rangée et poussait l'action à la ligne
     suivante. L'en-tête montait de 108 à 159 px, soit 18,8 % de la fenêtre. */
  .entete__contenu { gap: var(--e2) var(--e4); }
}

/* ═══════════════════════════════════════════════════════════ mouvement ════ */
@media (prefers-reduced-motion: no-preference) {
  .entree-texte { animation: entree-texte 640ms 40ms var(--sortie) both; }
  .entree-scene { animation: entree-scene 760ms 40ms var(--sortie) both; }
  .depliant__reponse { animation: entree-reponse 240ms var(--sortie) both; }
}
/* ⚠️ CORRIGÉ APRÈS MESURE (12/08). `.entree-scene` translatait de 1,25rem en X.
   Posée sur une illustration qui sort par le bord droit, cette translation
   fabrique 20 px de DÉBORDEMENT HORIZONTAL pendant les 760 ms de l'animation —
   mesuré par la garde à six largeurs, de 1024 à 1920. Une barre de défilement
   qui apparaît puis disparaît est un défaut, pas un effet.
   ⛔ Aucune animation de ce système ne translate en X. */
@keyframes entree-texte  { from { opacity: 0; transform: translateY(1rem); }    to { opacity: 1; transform: none; } }
@keyframes entree-scene  { from { opacity: 0; transform: translateY(1.5rem); }  to { opacity: 1; transform: none; } }
@keyframes entree-reponse{ from { opacity: 0; transform: translateY(-0.35rem);} to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════ impression ════ */
@media print {
  .entete, .saut { position: static; }
  .depliant > summary::after { content: ""; }
  .depliant__reponse { display: block !important; }
}

/* ═══════════════════════════════════════ les repères de fabrication ═══════
   Visibles, jamais invisibles : un emplacement de copy qui ne se voit pas est
   un mensonge. Filet POINTILLÉ dessous, jamais un cadre.
   ⛔ Ces deux classes n'ont RIEN À FAIRE sur une page livrée. La garde les
      compte et les publie.
   ⛔ `.copy` NE SE POSE JAMAIS sur un élément qui porte déjà un filet.
      Mesuré le 12/08 : posée sur `.pied__entite` (qui a un filet au-dessus),
      elle ajoutait le filet du dessous et fabriquait la première BOÎTE du site.
      Elle enveloppe le TEXTE, pas le conteneur : `<p class="x"><span class="copy">…` */
/* ⛔ 2026-08-14 · R-25. Le filet POINTILLÉ est retiré, même motif. Le repère
   reste VISIBLE — c'est sa raison d'être, « un emplacement de copy qui ne se
   voit pas est un mensonge » — mais il se voit par le POIDS, pas par un trait. */
.copy {
  font-weight: var(--w-appui);
}
.bande--encre .copy, .bande--encre .copy, .pied .copy { border-block-end-color: var(--filet-sombre); }

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-21 · D-88 — L'EN-TÊTE DU SOCLE PASSE À UNE SEULE RANGÉE
   ══════════════════════════════════════════════════════════════════════════
   ⛔ R-60, Gary le 21/08 : « Pourquoi est-ce que j'ai un header sur deux étages ?
      Pourquoi tu me mets ça sur deux étages ? Et je te signale que c'est tout le
      temps la même chose. »

   Ce bloc est ÉCRIT À LA SUITE, il ne réécrit rien au-dessus. Le commentaire de
   `.entete` (l. 400 et suivantes) reste tel quel : c'est la trace de ce qui était
   cru le 12/08, et l'argument qu'il portait est faux. Il disait :

     « La disposition identité | navigation | action sur une seule ligne est
       IMPOSSIBLE à ordre de tabulation correct — le clavier passerait par
       l'action avant la navigation qui est visuellement à sa gauche. »

   ⛔ C'est faux, et la correction ne coûte rien : il suffit que l'ORDRE DU DOM
      soit identité → navigation → action. Il l'est. La tabulation suit alors
      exactement l'ordre visuel de gauche à droite. L'ancien agencement mettait
      l'action AVANT la navigation dans le DOM ; c'est ça qui obligeait à deux
      rangées, pas la disposition.

   ⛔ CE QUI A ÉTÉ MESURÉ, ET QUI TRANCHE. Elevate Medical, la référence du
      dossier, est sur UNE rangée : logo à gauche, navigation au centre, un seul
      bouton plein à droite (capture `_Research/reference-elevate-2026-08-14/`,
      ouverte le 21/08). Six références santé relevées sur Mobbin le même jour le
      sont aussi, sur six (`_Research/refs-entetes-mobbin-2026-08-21/`). Le
      deuxième étage ne venait d'aucune d'elles.

   ⚠️ LE RAIL DE L'EN-TÊTE EST PLUS LARGE QUE CELUI DU CONTENU, et c'est mesuré,
      pas décoratif : chez Elevate le header occupe 88,5 % de la fenêtre (1 338 px
      à 1 512) quand le corps descend à 79 % (SPEC § 3, « il y a une hiérarchie de
      retrait, pas une gouttière unique »). Sans ça, les quatre entrées dictées en
      D-75 ne tiennent pas : elles demandent à elles seules ~590 px.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* 1 338 px = 88,5 % de 1 512, mesuré chez Elevate. Le clamp de `--gouttiere`
     reprend la main dès que la fenêtre est plus étroite. */
  --entete-max: 83.625rem;
}

/* corrige `.entete` (0,1,0) l. 414 -> même spécificité, ordre.
   La grille à trois colonnes du socle imposait le rail du CONTENU (1 240) à
   l'en-tête. Elle laisse la place à un rail propre. */
.entete {
  display: block;
  padding-inline: var(--gouttiere);
}

/* corrige `.entete__contenu` (0,1,0) l. 433 -> ordre.
   Trois zones, une rangée, jamais de retour à la ligne. */
.entete__contenu {
  max-inline-size: var(--entete-max);
  margin-inline: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--e6);
  min-inline-size: 0;
}
.entete__identite { flex: 0 0 auto; }

/* corrige `.entete__nav` (0,1,0) l. 459 -> ordre.
   Elle n'est plus une rangée de la grille : c'est la zone du milieu. */
.entete__nav {
  flex: 1 1 auto;
  min-inline-size: 0;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 var(--e6);
}
.entete__actions { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--e4); }

/* ── LE REPLI · un bouton, et le volet est REPLIÉ PAR LE SCRIPT ─────────────
   ⛔ CE N'EST PAS UN `<details>`, et ce n'est pas un détail de forme. Un
      dépliant sert à cacher du contenu ; la garde `aucun-depliant-sur-la-page`
      en interdit un sur ce dossier, et son objet est juste. Un contrôle de
      navigation est un autre objet — mais on ne desserre pas une garde pour se
      faire de la place, on change d'outil.
   ⛔ ET IL RESTE VRAI SANS JAVASCRIPT. Le volet est ouvert par défaut ; c'est le
      script qui le REPLIE, jamais qui le révèle (doctrine de `home.js`). Script
      coupé, la navigation est là, en clair, sous la rangée. Une page qui perdrait
      son menu sans script aurait fait de la navigation une dépendance.
   ⛔ AUCUNE BOÎTE DESSINÉE (garde `zero-boite-dessinee`) : le contrôle porte un
      filet SOUS son mot, comme tous les liens de ce système. Le seul objet cerné
      du site est `.action`. */
.entete__repli {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  min-block-size: var(--cible);
  padding: 0;
  background: transparent;
  border: 0;
  border-block-end: 2px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: var(--t-petit);
  font-weight: var(--w-appui);
  line-height: var(--lh);
  cursor: pointer;
  white-space: nowrap;
}

/* ⛔ LE VOLET NE FAIT JAMAIS GRANDIR L'EN-TÊTE. Il est posé par-dessus la page.
   Sans ça, l'ouvrir fabriquerait exactement la deuxième rangée que R-60 refuse,
   et `--entete-h` (que la page remesure) se mettrait à sauter. */
.entete__volet {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: inherit;
  color: inherit;
  border-block-end: var(--trait) solid var(--filet-clair);
  padding: var(--e4) var(--gouttiere) var(--e6);
}
.entete__volet-nav { display: flex; flex-direction: column; }
.entete__volet-nav a {
  display: flex;
  align-items: center;
  min-block-size: var(--cible);
  padding-block: var(--e2);
  color: inherit;
  text-decoration: none;
  font-size: var(--t-appui);
  font-weight: var(--w-appui);
  border-block-end: var(--trait) solid var(--filet-clair);
}
.entete__volet-action { margin-block-start: var(--e4); inline-size: 100%; }
/* ⚠️ L'ÉTAT FERMÉ EST POSÉ PAR LE SCRIPT, jamais par la feuille : sans script,
   `data-repli` n'existe pas et le volet reste ouvert. */
.entete[data-repli="ferme"] .entete__volet { display: none; }