/* ============================================================================
   HOME A — la feuille PROPRE À LA PAGE. Reconstruite le 2026-08-14.

   ⛔ ELLE NE PORTE QUE DES COMPOSITIONS. Les jetons, les bandes, l'en-tête, le
      pied, les actions, les listes, la fenêtre et les quatre interdits vivent
      dans `../_systeme-a/systeme.css`, qui est FIGÉ. Rien n'y est redéclaré,
      aucune couleur en dur, aucune taille de texte posée à la main.
   ⛔ AUCUN `vw`. Le socle en a UN, `--fit`, plafonné. Un contenu enfermé dans
      un conteneur à `max-width` ne se dimensionne jamais sur la fenêtre
      (`.claude/rules/myvicto-header-pill-fit.md`, payée deux fois ; et C21 du
      corpus craft, qui a mesuré 5 rails de gauche différents à 1440 px).
   ⛔ AUCUNE BOÎTE hors `.action`. Des filets SOUS les choses, jamais autour.
   ⛔ AUCUN `100vh`. `svh` seulement (C51).
   ⛔ TOUS LES NOMS DE CLASSE DE CETTE PAGE SONT PRÉFIXÉS `hm-`, ET LE PRÉFIXE A
      ÉTÉ GREPÉ AVANT D'ÊTRE POSÉ : zéro occurrence dans tout `_Deliverables`.
      Motif, payé le 13/08 : `.emplacement` était libre dans `systeme.css` et
      DÉJÀ PRIS dans `parcours-3` comme slot d'illustration — un aplat blanc est
      apparu et aucune garde n'a bronché, parce qu'elles comptent les BORDURES
      et pas les APLATS. Six noms courts que j'avais choisis (`tete`, `rang`,
      `paire`, `chiffre`, `porte`, `etapes`) étaient déjà pris ailleurs dans
      `_Deliverables` : c'est pour ça qu'ils ne sont pas ici.

   ════════════════════════════════════════════════════════════════════════════
   R-19, ET C'EST LA RAISON D'ÊTRE DE CETTE FEUILLE
   ════════════════════════════════════════════════════════════════════════════
   Gary, 13/08 : « Pourquoi est-ce que tu ne sais pas faire ça PLUS LARGE ? Tu
   vois bien que c'est sur QUATRE LIGNES, ça ne va pas du tout. »

   ⛔ MESURÉ SUR LA PAGE REJETÉE, pas supposé : le défaut n'est pas la mesure du
      texte, c'est que la mesure était appliquée DANS UN PAN. `.socle__texte`
      portait `max-inline-size: var(--mesure)` (54ch ≈ 513 px) à l'intérieur
      d'un pan de 66 % de 1240 px, soit 818 px. 305 px morts sur toute la
      hauteur du bloc le plus long de la page. Le cap protégeait une longueur de
      ligne que la largeur du pan garantissait déjà.

   ⛔ ET LE CORPUS DIT L'INVERSE DE CE QU'ON CROYAIT. Dépouillement du 14/08 :
      « aucun des trois documents ne recommande, ne mesure ni ne mentionne une
      colonne étroite, une moitié de page laissée vide ou une composition en
      deux colonnes texte/image. » Elevate, la référence, mesure au pixel :
        titre de section  x=100 → x=1337   = 1237 px sur 1440
        triptyque         x=152 → x=1287   = 1135 px
        paragraphe                          =  710 px
      Seules les bandes pleine largeur touchent x=0. Elevate n'a AUCUNE colonne
      étroite et AUCUNE moitié de page vide.

   ── LA RÈGLE QUI EN SORT, ET LA GARDE LA MESURE ──
   Toute bande de contenu est dans l'une de ces formes, et il n'y en a pas de
   cinquième :
     1. `.hm-tete`   — la tête traverse TOUTE la colonne de contenu (1240 px)
     2. `.hm-rang`   — deux ou trois pans, ET TOUS PORTENT DU CONTENU
     3. `.pleine-largeur` (socle) — de bord à bord, x=0
     4. le moment du prix, qui est une forme à lui seul
   ⛔ Il n'existe AUCUNE forme « une colonne étroite alignée à gauche ». C'est
      celle que Gary a refusée, et elle est retirée du vocabulaire.

   ── LA LONGUEUR DE LIGNE N'EST PLUS CAPÉE, ELLE EST MESURÉE ──
   Dans un rang, c'est LE PAN qui fait la mesure, jamais un `max-inline-size` :
     pan à 55 % de 1240 = 682 px ≈ 71 signes
     pan à 50 % de 1240 = 600 px ≈ 62 signes
   C3 du corpus craft : 55 signes = pic de compréhension, 95 = pic de vitesse,
   Butterick 45-90, échec au-delà de 75 sur bureau. PISTES vise 62-68.
   La garde `longueur-de-ligne-sous-75-signes` compte les signes RENDUS dans le
   navigateur. Un cap posé à l'aveugle protégeait ce chiffre en fabriquant le
   vide ; la mesure le protège sans fabriquer le vide.

   ── LA PALETTE (D-41, 13/08) ──
   `#98d7df` est la NAPPE DOMINANTE, `#ffffff` une PONCTUATION. Un seul passage
   au blanc sur cette page, et son motif est écrit dans `index.html` à l'endroit
   où il arrive : la section du prix. Deux ruptures PEINTES (la reprise et le
   pied, toutes deux à l'encre) sur un plafond de trois.
   Relevé de la page rejetée, que Gary n'a pas contesté : 70,9 / 15,3 / 12,5.

   ── « DE BELLES ANIMATIONS » (D-27) ──
   Deux gestes, pas trois : la nappe qui bascule au défilement (400 ms, courbe
   d'Elevate, dans le socle) et les apparitions à la lecture (ici). La fenêtre
   du parcours a QUITTÉ cette page (R-22). Aucune ne translate en X — mesuré le
   12/08, une translation de 1,25rem sur une illustration qui sort par le bord
   droit fabrique 20 px de débordement horizontal pendant 760 ms.
   ⚠️ CONFLIT DÉCLARÉ, NON TRANCHÉ PAR MOI : C40 du corpus craft interdit toute
      apparition au défilement (NN/g 2023, illusion de complétude, « les
      participants croient la page finie »). D-27 les autorise nommément. Je
      suis la décision du dossier et je signale l'écart ; la garde
      `aucun-texte-invisible-apres-defilement` couvre le mode de panne.
   ============================================================================ */

/* ═══════════════════════════════ LES APPARITIONS À LA LECTURE ══════════════
   ⛔ AMÉLIORATION SEULE, ET LE SENS DU MÉCANISME LE PROUVE. Sans JavaScript,
      `[data-entree]` n'est jamais transformé en `.entree-*`, donc rien n'est
      caché, rien n'est animé, et la page est entièrement lisible. L'état
      « invisible » n'existe QUE si le script a tourné : c'est l'inverse du
      motif courant, qui pose `opacity: 0` en CSS et fait disparaître la page
      chez qui bloque les scripts. */
@media (prefers-reduced-motion: no-preference) {
  [data-entree][data-entree-en-attente] { opacity: 0; }
}

/* Cascade finale : les compositions A priment sur les anciennes variantes. */
.hm-hero-a > .hm-scene {
  grid-template-columns: minmax(0, 47fr) minmax(22rem, 53fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.hm-hero-a > .hm-scene > .hm-scene__texte { grid-column: 1; max-inline-size: 43rem; }
.hm-hero-a > .hm-scene > .hm-illu { display: block; grid-column: 2; margin: 0; }
.hm-reservation-a > .hm-scene { display: block; grid-template-columns: none; }
.hm-reservation-a > .hm-scene > .hm-scene__texte { max-inline-size: 48rem; margin-inline: auto; }
.hm-reservation-a .pv-quand__corps { display: flex; max-inline-size: 42rem; }
#parcours.hm-reservation-a .hm-appel {
  min-block-size: 48px;
  padding: 0.9rem 1.4rem;
  background: var(--action);
  border-color: var(--action);
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0;
}
#parcours.hm-reservation-a .hm-appel:hover,
#parcours.hm-reservation-a .hm-appel:focus-visible {
  background: var(--action-sombre);
  color: var(--encre);
}
.hm-reservation-a .hm-avant a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* 08/09/2026 · D-123 : section technique, composition B approuvée.
   Classes propres : les anciens .hm-scene/.hm-illu masquent et déplacent l'image.
   Proportions du comparateur B transposées sans modifier les autres sections. */
#technique.hm-technique-b {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 0;
  margin: 0;
  padding: 58px 0 54px;
  background: var(--clair);
  color: var(--encre);
  border: 0;
}
#technique.hm-technique-b .hm-technique-b__rail { width: 91%; margin-inline: auto; }
#technique.hm-technique-b .hm-technique-b__eyebrow {
  margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .16em;
  line-height: 1.4; text-transform: uppercase;
}
#technique.hm-technique-b .hm-technique-b__title {
  margin: 0; max-inline-size: 760px; font-size: clamp(42px, 3.89vw, 56px);
  font-weight: 600; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance;
}
#technique.hm-technique-b .hm-technique-b__layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 74px; align-items: center; margin-top: 34px;
}
#technique.hm-technique-b .hm-technique-b__figure { margin: 0; min-width: 0; height: 380px; }
#technique.hm-technique-b .hm-technique-b__image { display: block; width: 100%; height: 100%; object-fit: contain; }
#technique.hm-technique-b .hm-technique-b__copy { max-width: 570px; }
#technique.hm-technique-b .hm-technique-b__lead {
  margin: 0; font-size: 28px; font-weight: 500; line-height: 1.4;
  letter-spacing: -.025em; text-wrap: pretty;
}
#technique.hm-technique-b .hm-technique-b__detail {
  margin: 20px 0 0; max-width: 510px; font-size: 20px; line-height: 1.6;
  letter-spacing: -.015em; text-wrap: pretty;
}
#technique.hm-technique-b .hm-technique-b__link {
  display: inline-flex; align-items: center; gap: 16px; min-height: 44px;
  margin-top: 24px; color: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
}
#technique.hm-technique-b .hm-technique-b__link-label { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
#technique.hm-technique-b .hm-technique-b__link-arrow { font-size: 23px; font-weight: 400; text-decoration: none; transition: transform .18s ease; }
#technique.hm-technique-b .hm-technique-b__link:hover .hm-technique-b__link-arrow { transform: translateX(4px); }
#technique.hm-technique-b .hm-technique-b__link:focus-visible { outline: 2px solid var(--encre); outline-offset: 5px; }
@media (min-width: 1051px) {
  #technique.hm-technique-b .hm-technique-b__layout { grid-template-columns: minmax(0, 4.8fr) minmax(0, 7.2fr); gap: 32px; }
  #technique.hm-technique-b .hm-technique-b__image { transform: scale(1.15); }
}
@media (min-width: 1680px) { #technique.hm-technique-b .hm-technique-b__rail { max-width: 1500px; } }
@media (max-width: 1050px) {
  #technique.hm-technique-b .hm-technique-b__title { font-size: 44px; }
  #technique.hm-technique-b .hm-technique-b__lead { font-size: 25px; }
  #technique.hm-technique-b .hm-technique-b__detail { font-size: 19px; }
  #technique.hm-technique-b .hm-technique-b__layout { gap: 40px; }
}
@media (max-width: 700px) {
  #technique.hm-technique-b { padding-block: 48px 40px; }
  #technique.hm-technique-b .hm-technique-b__rail { width: 89%; }
  #technique.hm-technique-b .hm-technique-b__eyebrow { margin-bottom: 17px; font-size: 11px; }
  #technique.hm-technique-b .hm-technique-b__title { font-size: 37px; line-height: 1.1; }
  #technique.hm-technique-b .hm-technique-b__lead { font-size: 24px; }
  #technique.hm-technique-b .hm-technique-b__detail { font-size: 18px; line-height: 1.55; }
  #technique.hm-technique-b .hm-technique-b__link { margin-top: 19px; font-size: 15px; }
  #technique.hm-technique-b .hm-technique-b__layout { grid-template-columns: 1fr; margin-top: 24px; gap: 28px; }
  #technique.hm-technique-b .hm-technique-b__figure { height: 280px; }
}
@media (prefers-reduced-motion: reduce) { #technique.hm-technique-b .hm-technique-b__link-arrow { transition: none; } }

/* Section 3 · Portrait en lisière, composition A validée le 08/09/2026. */
#praticien.hm-praticien-a {
  padding-block: 0;
  border: 0;
}
#praticien.hm-praticien-a::before,
#praticien.hm-praticien-a::after { content: none; }
#praticien.hm-praticien-a > .hm-scene {
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: stretch;
}
#praticien.hm-praticien-a .hm-praticien__visuels {
  grid-column: 1;
  grid-row: 1;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 760px;
  max-block-size: 840px;
}
#praticien.hm-praticien-a .hm-portrait { block-size: 100%; margin: 0; }
#praticien.hm-praticien-a .hm-portrait img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 22%;
}
#praticien.hm-praticien-a > .hm-scene > .hm-scene__texte {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
  max-inline-size: 39rem;
  padding-block: 4rem;
}
#praticien.hm-praticien-a .hm-tete { display: grid; gap: .75rem; }
#praticien.hm-praticien-a .hm-tete::after {
  content: none;
  border: 0;
}
#praticien.hm-praticien-a #titre-praticien {
  margin: 0;
  font-size: clamp(3.5rem, 4.5vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}
#praticien.hm-praticien-a .hm-prose { display: grid; gap: 1.5rem; margin: 0; }
#praticien.hm-praticien-a .hm-prose > * { margin: 0; }
#praticien.hm-praticien-a .hm-praticien-a__fonction {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
#praticien.hm-praticien-a .hm-praticien-a__phrase {
  max-inline-size: 19ch;
  font-size: clamp(1.75rem, 1.35rem + 1.25vw, 2.75rem);
  font-weight: 550;
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: balance;
}
#praticien.hm-praticien-a .lien-filet {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  inline-size: fit-content;
}

@media (max-width: 61.99rem) {
  #praticien.hm-praticien-a { padding: 2rem 1.25rem 2.25rem; }
  #praticien.hm-praticien-a > .hm-scene {
    display: flex;
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  #praticien.hm-praticien-a > .hm-scene > .hm-scene__texte { display: contents; }
  #praticien.hm-praticien-a .hm-tete { order: 1; }
  #praticien.hm-praticien-a .hm-praticien__visuels {
    order: 2;
    min-block-size: 0;
    max-block-size: 20rem;
    block-size: min(78vw, 20rem);
    margin-block: 1.25rem;
  }
  #praticien.hm-praticien-a .hm-prose { order: 3; gap: 1.35rem; }
  #praticien.hm-praticien-a #titre-praticien {
    font-size: clamp(2.65rem, 12vw, 3.6rem);
    text-wrap: wrap;
  }
  #praticien.hm-praticien-a .hm-praticien-a__phrase {
    max-inline-size: 18ch;
    font-size: clamp(1.65rem, 7.2vw, 2.15rem);
  }
}

/* Cascade finale C1 — validée le 27/08/2026. */
.hm-reservation-c1 {
  padding-block: clamp(2.75rem, 4.5vw, 4.5rem);
  text-align: left;
}
.hm-reservation-c1 > .hm-scene > .hm-scene__texte {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(24rem, 52fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.25rem);
  max-inline-size: 78rem;
}
.hm-reservation-c1 .hm-tete { display: block; }
.hm-reservation-c1 h2 {
  max-inline-size: 16ch;
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.06;
}
.hm-reservation-c1 .pv-quand__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  max-inline-size: none;
  margin: 0;
  padding-inline-start: clamp(1.5rem, 3vw, 3rem);
  border-inline-start: 1px solid rgba(152, 215, 223, 0.5);
}
.hm-reservation-c1 .pv-quand__corps > div { display: contents; }
.hm-reservation-c1 .pv-quand__dit,
.hm-reservation-c1 [data-entree="texte"]:has(.hm-appel),
.hm-reservation-c1 .hm-reservation-c1__suite { order: initial; margin: 0; }
.hm-reservation-c1 .hm-avant { display: none; }
.hm-reservation-c1 .hm-reservation-c1__suite a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}
.hm-reservation-c1 a:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
}
@media (max-width: 800px) {
  .hm-reservation-c1 > .hm-scene > .hm-scene__texte {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .hm-reservation-c1 .pv-quand__corps {
    padding-inline-start: 0;
    padding-block-start: 1.5rem;
    border-inline-start: 0;
    border-block-start: 1px solid rgba(152, 215, 223, 0.5);
  }
  .hm-reservation-c1 #titre-parcours { font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* 2026-08-27 — direction C1 validée : deux groupes rapprochés, bande compacte. */
.hm-reservation-c1 {
  padding-block: clamp(2.75rem, 4.5vw, 4.5rem);
  text-align: left;
}
.hm-reservation-c1 > .hm-scene > .hm-scene__texte {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(24rem, 52fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.25rem);
  max-inline-size: 78rem;
}
.hm-reservation-c1 .hm-tete {
  display: block;
}
.hm-reservation-c1 h2 {
  max-inline-size: 16ch;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.06;
}
.hm-reservation-c1 .pv-quand__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding-inline-start: clamp(1.5rem, 3vw, 3rem);
  border-inline-start: 1px solid rgba(152, 215, 223, 0.5);
}
.hm-reservation-c1 .pv-quand__corps > div {
  display: contents;
}
.hm-reservation-c1 .pv-quand__dit,
.hm-reservation-c1 [data-entree="texte"]:has(.hm-appel),
.hm-reservation-c1 .hm-reservation-c1__suite {
  order: initial;
  margin: 0;
}
.hm-reservation-c1 .hm-avant {
  display: none;
}
.hm-reservation-c1 .hm-reservation-c1__suite a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}
.hm-reservation-c1 a:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
}
@media (max-width: 800px) {
  .hm-reservation-c1 > .hm-scene > .hm-scene__texte {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .hm-reservation-c1 .pv-quand__corps {
    padding-inline-start: 0;
    padding-block-start: 1.5rem;
    border-inline-start: 0;
    border-block-start: 1px solid rgba(152, 215, 223, 0.5);
  }
  .hm-reservation-c1 #titre-parcours {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
}
@media (max-width: 61.99rem) {
  .hm-hero-a > .hm-scene { grid-template-columns: minmax(0, 1fr); }
  .hm-hero-a > .hm-scene > .hm-scene__texte,
  .hm-hero-a > .hm-scene > .hm-illu { grid-column: 1; }
}

.hm-reservation-a .hm-appel {
  min-block-size: 48px;
  padding: 0.9rem 1.4rem;
  background: var(--action);
  border-color: var(--action);
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0;
}
.hm-reservation-a .hm-avant a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* 2026-08-27 — les cinq scènes narratives validées remplacent le lot masqué
   le 26/08. Les sections réservation et prix restent volontairement sans
   illustration ; aucune autre composition n'est modifiée. */
.hm-heros > .hm-scene > [data-illu="s01"],
.hm-praticien [data-illu="s03"],
.hm-technique > .hm-scene > [data-illu="s04"],
.hm-lieu > .hm-scene > [data-illu="s06"],
.hm-deroule > .hm-scene > [data-illu="s07"] {
  display: block !important;
}

/* Section 2 · Étude A sombre validée par Gary le 08/09/2026.
   Cascade finale limitée à la porte du parcours. */
#parcours.hm-reservation-a {
  min-block-size: 0;
  padding-block: 3.5rem;
  background: var(--encre);
  border-block: 0;
  box-shadow: none;
  text-align: start;
}
#parcours.hm-reservation-a::before,
#parcours.hm-reservation-a::after { content: none; }
#parcours.hm-reservation-a:focus,
#parcours.hm-reservation-a:focus-visible { outline: none; }
#parcours.hm-reservation-a > .hm-scene > .hm-scene__texte {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(22rem, 42fr);
  align-items: center;
  gap: clamp(4rem, 5vw, 6rem);
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
}
#parcours.hm-reservation-a .hm-tete {
  display: block;
  padding: 0;
  border: 0;
}
#parcours.hm-reservation-a #titre-parcours {
  margin: 0;
  inline-size: 100%;
  max-inline-size: none;
  color: var(--blanc);
  font-size: clamp(3.5rem, 4vw, 3.75rem);
  line-height: 1.02;
}
#parcours.hm-reservation-a #titre-parcours > span { display: block; }
#parcours.hm-reservation-a .pv-quand__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: 0;
}
#parcours.hm-reservation-a .pv-quand__corps > div { display: contents; }
#parcours.hm-reservation-a .hm-avant { display: none; }
#parcours.hm-reservation-a .pv-quand__dit,
#parcours.hm-reservation-a .pv-quand__corps p { margin: 0; }
#parcours.hm-reservation-a .pv-quand__dit { order: 1; }
#parcours.hm-reservation-a [data-entree="texte"]:has(.hm-appel) {
  order: 2;
  inline-size: 100%;
}
#parcours.hm-reservation-a .hm-reservation-c1__suite { order: 3; }
#parcours.hm-reservation-a .pv-quand__corps .hm-appel {
  inline-size: 100%;
  min-block-size: 56px;
  padding: .75rem 1.25rem;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}
#parcours.hm-reservation-a .hm-reservation-c1__suite .lien-filet {
  border: 0;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
#parcours.hm-reservation-a [data-entree] { opacity: 1; }
@media (max-width: 61.99rem) {
  #parcours.hm-reservation-a { padding-block: clamp(3rem, 13vw, 3.5rem); }
  #parcours.hm-reservation-a > .hm-scene > .hm-scene__texte {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  #parcours.hm-reservation-a .pv-quand__corps {
    gap: 1rem;
    padding: 0;
    border: 0;
  }
  #parcours.hm-reservation-a .hm-tete { margin: 0; }
  #parcours.hm-reservation-a #titre-parcours {
    font-size: 2.35rem;
    letter-spacing: -.045em;
    text-wrap: wrap;
    inline-size: 100%;
    max-inline-size: none;
  }
  #parcours.hm-reservation-a #titre-parcours > span { display: block; }
  #parcours.hm-reservation-a [data-entree="texte"]:has(.hm-appel) {
    inline-size: 100%;
    box-sizing: border-box;
  }
  #parcours.hm-reservation-a .pv-quand__corps .hm-appel {
    inline-size: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }
}

/* Direction A validée par Gary le 04/09/2026 : diptyque 47/53 sur bureau,
   puis lecture texte, actions et illustration sur mobile. */
@media (max-width: 61.99rem) {
  .hm-hero-a > .hm-scene > .hm-scene__texte { order: 1; }
  .hm-hero-a .hm-heros__actions { order: 2; }
  .hm-hero-a > .hm-scene > .hm-illu { order: 3; }
}

/* 2026-08-26 — compositions A validées pour les deux premiers blocs. */
.hm-hero-a {
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

.hm-hero-a > .hm-scene {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(22rem, 53fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}

.hm-hero-a > .hm-scene > .hm-scene__texte {
  grid-column: 1;
  max-inline-size: 43rem;
}

.hm-hero-a > .hm-scene > .hm-illu {
  display: block;
  grid-column: 2;
  margin: 0;
  animation: hm-a-entree 560ms var(--sortie) both 100ms;
}

.hm-hero-a .hm-illu__place {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hm-hero-a .hm-scene__texte {
  animation: hm-a-entree 480ms var(--sortie) both;
}

.hm-hero-a .hm-heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hm-hero-a .hm-heros__actions > a {
  min-block-size: 44px;
}

.hm-reservation-a {
  padding-block: clamp(4.5rem, 7vw, 7rem);
  text-align: center;
}

.hm-reservation-a > .hm-scene {
  display: block;
}

.hm-reservation-a > .hm-scene > .hm-scene__texte {
  max-inline-size: 48rem;
  margin-inline: auto;
}

.hm-reservation-a .hm-tete {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.hm-reservation-a .hm-tete .surtitre {
  margin: 0;
  color: var(--action);
}

.hm-reservation-a h2 {
  max-inline-size: 18ch;
  margin: 0;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4.75rem);
  line-height: 1.02;
}

.hm-reservation-a .pv-quand__corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-inline-size: 42rem;
  margin: 2rem auto 0;
}

.hm-reservation-a .pv-quand__corps > div {
  display: contents;
}

.hm-reservation-a .pv-quand__dit,
.hm-reservation-a .hm-avant,
.hm-reservation-a .pv-quand__corps p {
  margin: 0;
}

.hm-reservation-a .pv-quand__dit {
  order: 1;
  max-inline-size: 38ch;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
}

.hm-reservation-a [data-entree="texte"]:has(.hm-appel) {
  order: 2;
}

.hm-reservation-a .hm-appel {
  min-block-size: 48px;
  padding: 0.9rem 1.4rem;
  background: var(--action);
  border-color: var(--action);
  color: var(--encre);
}

.hm-reservation-a .hm-avant {
  order: 3;
}

.hm-reservation-a .hm-avant a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

.hm-reservation-a > .hm-scene > .hm-illu {
  display: none;
}

@keyframes hm-a-entree {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 61.99rem) {
  .hm-hero-a {
    padding-block: 2.75rem 3.5rem;
  }

  .hm-hero-a > .hm-scene {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .hm-hero-a > .hm-scene > .hm-scene__texte,
  .hm-hero-a > .hm-scene > .hm-illu {
    grid-column: 1;
  }

  .hm-hero-a > .hm-scene > .hm-illu {
    max-inline-size: 28rem;
    justify-self: center;
  }

  .hm-hero-a h1 {
    font-size: clamp(2.35rem, 11vw, 3.6rem);
  }
}

@media (max-width: 32rem) {
  .hm-hero-a .hm-heros__actions {
    display: grid;
  }

  .hm-hero-a .hm-heros__actions > a {
    justify-content: center;
    text-align: center;
  }

  /* 2026-09-09 — S01 garde sa hauteur naturelle, sans découpe mobile. */
  .hm-hero-a > .hm-scene > .hm-illu {
    max-block-size: none;
    overflow: visible;
  }

  .hm-reservation-a {
    padding-block: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hero-a .hm-scene__texte,
  .hm-hero-a > .hm-scene > .hm-illu {
    animation: none;
  }
}

/* ═════════════════════════════════════════════ L'EN-TÊTE : L'ACCÈS DIRECT ══
   D-20 : « un petit call to action qui l'emmène directement au quiz ».
   Il est DISCRET : dernier, séparé par un filet vertical, jamais un bouton. Un
   bouton de plus dans l'en-tête ferait une deuxième action permanente, et
   l'en-tête n'en porte qu'une. */
.hm-direct {
  margin-inline-start: auto;
  padding-inline-start: var(--e4);
  border-inline-start: var(--trait) solid var(--filet-clair);
}
@media (max-width: 46rem) {
  .hm-direct { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }
}

/* ════════════════════════════ FORME 1 · LA TÊTE DE BANDE ═══════════════════
   Elle traverse TOUTE la colonne de contenu. C'est la première réponse à R-19,
   et c'est ce qu'Elevate fait au pixel près (1237 px sur 1440).
   ⛔ Le `max-inline-size: 26ch` de `.titre-section` du socle NE S'APPLIQUE PAS
      ici : ce composant-là sert aux titres posés dans un pan. Une tête de bande
      qui se caperait à 26ch reproduirait exactement le défaut qu'on corrige.
   ⛔ R-01 : aucune phrase explicative sous le titre. Le système ne fournit
      délibérément aucun composant pour en poser une, et cette feuille non plus. */
.hm-tete {
  margin-block-end: var(--e12);
  padding-block-end: var(--e6);
  border-block-end: var(--trait) solid var(--filet-clair);
}
.hm-tete > h1,
.hm-tete > h2 { max-inline-size: 22ch; }
/* le filet de tête sur une bande sombre lit l'autre jeton */
.bande--encre .hm-tete { border-block-end-color: var(--filet-sombre); }

/* ════════════════════════════════ FORME 2 · LE RANG ════════════════════════
   Deux ou trois pans, ET TOUS PORTENT DU CONTENU. C'est la règle, pas une
   préférence : un rang dont un pan est vide est exactement la moitié de page
   vide que Gary a refusée, et la garde `la-largeur-du-contenu-est-employee`
   le fait rougir.
   ⛔ C'est une grille IMBRIQUÉE dans la colonne de texte de la bande, jamais
      une redéfinition des colonnes de `.bande`. Le rail de gauche du site ne
      bouge donc jamais, quelle que soit la composition — c'est ce que C21 fait
      échouer quand on s'y prend autrement (5 rails différents mesurés à
      1440 px sur un autre dossier, 158 px d'écart à 1920 px). */
.hm-rang { display: grid; gap: var(--e8); align-items: start; }
.hm-rang > * { min-inline-size: 0; }   /* sans quoi un enfant de grille ne rétrécit pas */

@media (min-width: 62rem) {
  .hm-rang { column-gap: var(--e12); }
  /* ⛔ UN SEUL RANG À DEUX PANS, ET ILS SONT ÉGAUX. J'en avais écrit deux
     (55/45 puis 52/48) : les deux rendaient une mesure TROP LONGUE, et la garde
     `longueur-de-ligne-sous-75-signes` les a pris tous les deux.
       55 % → 655 px → 78 signes
       52 % → 620 px → 76 signes   (la barre du dossier est 75)
       50 % → 596 px → 73 signes   ✅
     ⚠️ Manrope rend ~8,16 px par signe à 18 px, pas 9 : c'est cette erreur
        d'un pixel par caractère qui m'a fait viser à côté deux fois. On mesure,
        on n'estime pas.
     ⛔ ET ON CORRIGE LA COMPOSITION, JAMAIS LE SEUIL. Déplacer une barre parce
        qu'une garde rougit, c'est supprimer la garde en croyant l'ajuster. La
        barre vient de C3 : 55 signes est le pic de compréhension, 95 le pic de
        vitesse, Butterick donne 45-90, et le dossier a arrêté l'échec à 75.
     ⚠️ Deux pans égaux au lieu d'un pan « maître » : la hiérarchie ne se fait
        plus par la largeur mais par le POIDS et la TAILLE du texte. C'est la
        même règle que R-25 — ce qui distingue, c'est l'espace, le poids ou la
        taille, jamais un artifice. */
  .hm-rang--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* trois pans : 388 px chacun. Réservé aux portes, jamais à de la prose */
  .hm-rang--trois   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ⛔ DANS UN RANG, LA PROSE N'EST JAMAIS CAPÉE. C'est le pan qui fait la
   mesure. Poser `--mesure` ici, c'est refabriquer les 305 px morts. */
.hm-rang .hm-prose { max-inline-size: none; }
.hm-rang .hm-prose p { max-inline-size: none; }
.hm-prose > * + * { margin-block-start: var(--e4); }

/* le seul texte autorisé à vivre hors d'un rang est COURT et il porte sa mesure */
.hm-ligne { max-inline-size: var(--mesure); }

/* ═══════════════════════════════════════════════════════════ 1 · HÉROS ═════
   Le titre et la définition sont CÔTE À CÔTE, et les deux pans portent.
   ⛔ Pourquoi la définition est là et pas ailleurs : R-15 vise la NUDITÉ du
      titre (« La vasectomie à Lasne, c'est quoi ça ? »), pas ses deux faits.
      `T0` le suit immédiatement, et c'est ce que font les 5 héros du corpus qui
      ouvrent par une définition.
   ⛔ `svh`, jamais `vh`, et un `min-block-size`, jamais une hauteur : le héros
      doit pouvoir grandir si la police tombe en repli ou si le zoom texte monte
      à 200 %.
   ⛔ PAS DE HÉROS PLEINE HAUTEUR (C52) : un morceau de la bande suivante doit
      dépasser au-dessus de la ligne de flottaison. NN/g 2016 : 6 utilisateurs
      sur 8 n'ont pas compris qu'ils pouvaient défiler. */
.hm-heros { min-block-size: min(30rem, 66svh); }
.hm-heros__def { font-size: var(--t-sous); font-weight: 500; }
.hm-heros__actions {
  margin-block-start: var(--e12);
  padding-block-start: var(--e6);
  border-block-start: var(--trait) solid var(--filet-clair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
  align-items: center;
}
@media (min-width: 62rem) {
  .hm-heros .hm-rang { align-items: end; }
}

/* ══════════════════════════════════════════ 2 · LES TROIS FAÇONS ═══════════
   La pièce maîtresse, en position 2 (D-18 : « directement le quiz », pour que
   celui qui a déjà décidé n'ait rien à chercher).
   Trois portes en trois pans : la seule composition de la page qui emploie la
   largeur sans une ligne de texte longue. Un filet SOUS chaque porte, rien
   autour. */
.hm-porte-liste > li { padding-block: var(--e4) var(--e6); }
@media (min-width: 62rem) {
  .hm-porte-liste > li {
    padding-block-start: var(--e6);
    border-block-start: 2px solid var(--filet-clair);
    border-block-end: 0;
  }
}
@media (max-width: 61.99rem) {
  .hm-porte-liste > li { border-block-end: var(--trait) solid var(--filet-clair); }
  .hm-porte-liste > li:last-child { border-block-end: 0; }
}
.hm-porte__rang {
  display: block;
  margin-block-end: var(--e3);
  font-size: var(--t-micro);
  font-weight: var(--w-appui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hm-porte > * + * { margin-block-start: var(--e3); }

/* ⛔ LE CONTREPOIDS, ET IL EST AU CONTACT DE L'ACTION PRIMAIRE.
   Condition 3 du gate déontologique : « une page dont l'action primaire est une
   réservation, sans une ligne qui dise que rien ne presse et que réserver
   n'engage à rien, est exactement la capture qu'un confrère envoie au conseil
   provincial. » `T14` (14 mots) et la phrase de retrait (15 mots) remplacent
   113 mots descendus. Elles sont dans un rang à deux pans : les deux portent. */
.hm-contrepoids {
  margin-block-start: var(--e12);
  padding-block-start: var(--e8);
  border-block-start: var(--trait) solid var(--filet-clair);
}
.hm-contrepoids p { font-size: var(--t-sous); font-weight: 500; }

/* ═════════════════════════════════════════════════ 3 · LE DR BOURGUIGNON ═══
   ⛔ Aucune phrase de contraste dans un rayon de trois phrases : le fait se dit
      au positif sur soi, jamais au négatif sur un ailleurs (gate déonto,
      section 3, condition mécanique). Aucun adjectif de qualité, aucun volume
      d'actes, aucune ancienneté présentée comme argument. */

/* ═══════════════════════════════════════ 4 · LE JOUR DE L'INTERVENTION ═════
   Les deux temps pratiques à gauche, le geste à droite.
   ⛔ `T12` et la clause anti-dénigrement sont ADJACENTS, et dans le même pan :
      « les trois voyagent ensemble ou le terme n'apparaît pas ». Une borne
      posée seule ne limite plus un claim, elle le crée. */
.hm-etape-liste { counter-reset: hm-etape; }
.hm-etape-liste > li {
  counter-increment: hm-etape;
  padding-block: var(--e4);
  padding-inline-start: var(--e8);
  position: relative;
  border-block-end: var(--trait) solid var(--filet-clair);
}
.hm-etape-liste > li:last-child { border-block-end: 0; }
.hm-etape-liste > li::before {
  content: counter(hm-etape);
  position: absolute;
  inset-inline-start: 0;
  font-size: var(--t-petit);
  font-weight: var(--w-appui);
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

/* ══════════════════════════════════════════════════════════ 5 · LES SUITES ═
   ⛔ CETTE BANDE EST PRESQUE VIDE, ET C'EST LE RÉSULTAT, PAS UN OUBLI. Aucun
      texte validé ne porte de durée d'effet, l'ODT du praticien n'en contient
      aucune, et une durée est un fait médical. Le trou est déclaré, il n'est
      pas comblé par une formulation prudente qui aurait l'air d'une réponse.
   ⚠️ Et c'est aussi de l'air. Elevate tient 47 % de sa hauteur en bandes vides
      contre 27,7 % de médiane sur les 18 sites médicaux : « on n'allège pas une
      page en supprimant des mots partout, on l'allège en supprimant des OBJETS
      et en creusant des trous ». */
.hm-suites { padding-block: var(--e24); }

/* ═════════════════════════════════════════════════════ 6 · CE QUE VOUS PAYEZ
   ⛔ LA PONCTUATION BLANCHE, ET SON MOTIF EST ÉCRIT (D-41). Un montant posé sur
      une couleur devient une offre ; posé sur du blanc, il reste un fait.
   ⛔ R-18 : « Regarde sur les autres pages comment ils parlent du prix. Là ça
      ressemble à rien. » Le tableau ventilé à quatre lignes est descendu vers
      la page prix : il avait déjà produit une lecture à 180,17 € alors que la
      part personnelle est de 0,00 €. Il reste UN montant, à la taille du
      display — le seul chiffre de la page qui a le droit d'être grand.
   ⛔ AUCUNE COULEUR SUR UN CHIFFRE. Le corail ne désigne qu'une action.
   ⛔ Aucune date : R-16, elle sort du copy et vit en donnée machine. */
/* ⛔ CORRECTION DU 21/08 — R-55, ET C'ETAIT MESURE DEPUIS LE 15/08 SANS BOUGER.
   `--t-display` mettait le montant au rang typographique du TITRE DU SITE :
   69,60 px comme le `h1`, contre 44,80 px pour tout autre `h2` de la page.
   1,55x tout autre titre de section. Au test du flou, le `h1` passait APRES le
   prix : les deux plus gros objets de la page etaient le nom de l'acte et son
   prix, a egalite.
   ⚠️ Le motif n'est pas esthetique, il est economique et il vient du stratege :
   un montant affiche en display devient une reference publique, et le plan
   economique du dossier classe le prix rang 1 des leviers a faire MONTER.
   Le montant reste dans sa phrase, il change seulement de rang. */
.hm-montant {
  font-size: var(--t-titre);
  font-weight: var(--w-titre);
  line-height: var(--lh-display);
  letter-spacing: -0.042em;
  font-variant-numeric: tabular-nums;
}
.hm-prix__bornage { margin-block-start: var(--e12); }

/* ══════════════════════════════════════════════════════════ 7 · LE CABINET ═ */
.hm-adresse { font-size: var(--t-sous); font-weight: 500; line-height: var(--lh); }

/* ═════════════════════════════════════ 8 · CE QUI DOIT ÊTRE DIT ════════════
   ⛔ R-21 : « Il faut vraiment créer une VRAIE page. Il y a beaucoup trop de
      fluff. » Mesuré sur la page rejetée : 2 500 px de paragraphes NON TITRÉS
      en colonne étroite, 55,7 % du corps sous UN SEUL titre.
   ⛔ LA CORRECTION EST DOUBLE, ET AUCUNE DES DEUX N'EST UNE COUPE. Le gate
      d'utilité a trouvé CINQ informations à supprimer sur cinquante-huit : ce
      que Gary a vu n'était pas du remplissage.
        1. SIX BLOCS TITRÉS au lieu d'un pavé. Un titre AJOUTE des mots (USA
           7 titres / 689 mots, UK 12 / 709) : ce qu'il achète, c'est la
           scanabilité, et le fait qu'un sujet devienne déplaçable en entier.
        2. DEUX COLONNES DE BLOCS, donc 1240 px employés au lieu de 513.
   ⛔ CE N'EST PAS UN FLUX DE TEXTE EN COLONNES. Chaque bloc est autonome et se
      lit en entier avant le suivant ; l'ordre de lecture est rangée par rangée,
      jamais colonne par colonne. Un flux multi-colonnes ferait descendre puis
      remonter, et c'est le défaut que `column-count` fabrique sur une page qui
      défile.
   ⛔ ET LE PLI NE TOURNE PAS DE 90°. Le 07/08, un plan a supprimé tous les plis
      et mis les contre-indications dans un carrousel latéral de cinq cartes en
      déclarant « premier rang » : à 390 px une carte était visible et il
      fallait quatre gestes pour la cinquième. Aucun conteneur à défilement
      horizontal ici, et la garde le mesure sur les deux axes. */
.hm-socle-blocs { display: grid; gap: var(--e16) var(--e12); align-items: start; }
@media (min-width: 62rem) {
  .hm-socle-blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hm-bloc > * + * { margin-block-start: var(--e4); }
.hm-bloc > h3 {
  padding-block-end: var(--e3);
  margin-block-end: var(--e4);
  border-block-end: var(--trait) solid var(--filet-clair);
}
/* ⛔ LES ÉNUMÉRATIONS SONT DES LISTES, ET LES MOTS NE BOUGENT PAS.
   C'est écrit dans le copy lui-même, à l'endroit où le texte est posé : « Les
   mots ne bougent pas, le CARACTÈRE disparaît À LA CONSTRUCTION, rendu en
   vraie puce de liste. » C'est le levier de la méthode NHS (20 mots par phrase,
   3 phrases par paragraphe) : sur nos textes, 3 des 6 pires phrases sont des
   énumérations, et elles se corrigent EN PUCES, pas en raccourcissant. Aucun
   texte validé n'est amputé d'un mot par cette mise en forme. */
.hm-puces > li {
  padding-block: var(--e3);
  padding-inline-start: var(--e6);
  position: relative;
  border-block-end: var(--trait) solid var(--filet-clair);
}
.hm-puces > li:last-child { border-block-end: 0; }
.hm-puces > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.4em;
  inline-size: var(--e4);
  border-block-start: var(--trait) solid currentColor;
}
/* la rubrique d'une énumération : l'intitulé porte, la liste suit */
.hm-rubrique > * + * { margin-block-start: var(--e2); }
.hm-rubrique__quoi { font-weight: var(--w-appui); }

/* ═══════════════════════════════════════════════════════ LA REPRISE ════════
   Une bande de sortie, pas une section : faite d'air, sa densité basse est
   normale. Elle rouvre les trois portes à celui qui vient de tout lire, pour
   qu'il n'ait pas à remonter la page.
   ⛔ RUPTURE PEINTE N° 1 SUR 3 (le pied est la n° 2). Une bande sombre peint
      son propre fond : c'est ce qui la rend sûre sans JavaScript. */
.hm-reprise__actions {
  margin-block-start: var(--e8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
  align-items: center;
}

/* ═════════════════════════════════════════════════ LE PIED — deux ajouts ═══ */
.hm-statut {
  margin-block-start: var(--e6);
  max-inline-size: 60ch;
  font-size: var(--t-petit);
  opacity: .82;
}

/* ═══════════════════════════════════════════════════ deux réglages de flux ═
   ⛔ Le message d'un emplacement est un BLOC dans une rangée d'actions : sans
      cette base, il devient un article de flex et se glisse ENTRE les deux
      actions au lieu de se déplier sous elles. Défaut invisible tant qu'aucun
      emplacement n'est ouvert — c'est-à-dire jusqu'au premier clic de Gary. */
.hm-heros__actions .a-fournir__mot,
.hm-reprise__actions .a-fournir__mot { flex-basis: 100%; }

/* l'espacement d'un second rang sous le premier, dans la même bande */
.hm-apres { margin-block-start: var(--e12); }

/* ══════════════════════════ L'EMPLACEMENT QUI S'EXPLIQUE AU CLIC (D-42) ════
   Gary, 13/08 : « on met tous les placeholders, et dès qu'on clique dessus il y
   a le petit message qui apparaît pour dire : voilà, il faut qu'on remplace ça
   par ton lien. »

   ⛔ C'EST UN VRAI `<button>`, PAS UN `<div>`. Atteignable au clavier, il répond
      à Entrée et à Espace, il porte un état `aria-expanded`, et sa cible fait
      44 px. Un `<div>` cliquable serait invisible à qui n'a pas de souris.
   ⛔ IL N'EST PAS UNE BOÎTE : un seul côté bordé, en tireté — le tireté dit
      « provisoire » sans qu'on ait à l'écrire.
   ⛔ ET IL FAUT LUI RETIRER SON FOND ET SES QUATRE BORDURES EXPLICITEMENT. Un
      `<button>` sans style porte le fond gris du système (`rgb(239,239,239)`) et
      quatre bordures. C'est le défaut que ce fichier a produit au premier rendu
      du 14/08 : huit boîtes grises sur une page qui n'en porte aucune, un
      contraste de 1,15:1, et les trois gardes `zero-boite-dessinee`,
      `aucun-aplat-etranger-a-la-palette` et `contrastes-AA` ont rougi ensemble.
      Elles avaient raison toutes les trois.
   ⛔ SANS JAVASCRIPT, LE MESSAGE EST VISIBLE. Le script le REPLIE et câble le
      bouton ; il ne le révèle pas. C'est la seule façon d'avoir un contrôle qui
      ne soit jamais mort : chez qui bloque les scripts, on lit l'emplacement ET
      ce qu'il attend, tout de suite. */
.a-fournir {
  min-block-size: var(--cible);
  padding: var(--e2) var(--e6) var(--e2) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: inherit;
  text-align: start;
  font-size: var(--t-appui);
  font-weight: var(--w-appui);
  line-height: var(--lh-serre);
  background: transparent;
  /* ⛔ 2026-08-14 · R-25. Le filet TIRETÉ est retiré, comme dans le socle.
     Ce qui distingue un emplacement d'un lien réel maintenant, et c'est plus
     clair qu'avant : un LIEN réel porte un filet plein (`.lien-filet`), un
     EMPLACEMENT n'en porte aucun et porte un « + ». La distinction se fait par
     le poids, la taille et le signe, jamais par un trait décoratif. */
  border: 0;
  cursor: pointer;
  position: relative;
}
.a-fournir::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  font-size: var(--t-sous);
  font-weight: 400;
  line-height: 1;
}
.a-fournir[aria-expanded="true"]::after { content: "\2013"; }

.a-fournir__mot {
  display: block;
  margin-block-start: var(--e3);
  padding-inline-start: var(--e4);
  border-inline-start: var(--trait) solid var(--filet-clair);
  max-inline-size: 52ch;
  font-size: var(--t-petit);
  line-height: var(--lh);
}
/* ⛔ `<code>` PORTE UNE POLICE À CHASSE FIXE PAR DÉFAUT, et le site n'en a
   qu'une. Sans cette ligne, `manrope-seule-police` rougit — elle l'a fait au
   premier rendu du 14/08, et elle avait raison. */
.a-fournir__mot code {
  font-family: inherit;
  font-weight: var(--w-appui);
  overflow-wrap: anywhere;
}
/* ⛔ `[hidden]` PERD CONTRE UNE CLASSE, ET C'EST UN PIÈGE PAYÉ SUR CETTE PAGE.
   La règle d'agent `[hidden]{display:none}` a la spécificité d'un sélecteur de
   TYPE ; `.a-fournir__mot{display:block}` a celle d'une CLASSE, et elle gagne.
   Résultat au premier rendu du 13/08 : les huit emplacements étaient repliés
   DANS LE DOM (`hidden` posé, `aria-expanded=false`) et VISIBLES À L'ÉCRAN. Le
   bouton disait « fermé », la page montrait « ouvert ». */
.a-fournir__mot[hidden] { display: none; }
.bande--encre .a-fournir__mot,
.pied .a-fournir__mot { border-inline-start-color: var(--filet-sombre); }

@media (prefers-reduced-motion: no-preference) {
  .a-fournir__mot[data-vient-d-ouvrir] { animation: entree-reponse 240ms var(--sortie) both; }
}


/* ############################################################################
   ###  AJOUT DU 2026-08-14, SOIR — LA FORME.  Écrit À LA SUITE, rien n'a été
   ###  effacé au-dessus (`.claude/rules/aios-multimodele.md`).
   ############################################################################

   Gary, 14/08 : « Il faut que la home page ressemble à quelque chose, parce que
   pour l'instant ce n'est pas encore le cas. » Et avant : « il y a ZÉRO forme »,
   « on est même pas à moitié ».

   ⛔ CE QUI MANQUAIT N'ÉTAIT NI LE TEXTE NI LA STRUCTURE — les deux tiennent.
      C'était que la page est un aplat unique du haut en bas. La mesure d'Elevate
      (`_Research/reference-elevate-2026-08-14/SPEC.md`, § 1) tranche la question :
      sa forme vient de NEUF BANDES PLEINE LARGEUR QUI CHANGENT DE COULEUR, et
      d'aucune autre chose. Pas de la typo (échelle mesurée 2,1 pour 1, plus gros
      titre 34 px), pas des effets (elle n'en a aucun).

   ⛔ LE RÉFLEXE INTERDIT, ET IL EST NOMMÉ DANS LA SPEC : devant « aucune forme »,
      agrandir les titres. LA MESURE DIT QUE CE N'EST PAS ÇA. Aucune taille de
      texte n'est touchée ici. `--t-display` reste tel quel dans le socle.

   ── LA PALETTE, D-52, ET ELLE REMPLACE D-41 ────────────────────────────────
   Les trois jetons viennent de la SPEC § 11, où ils sont dérivés d'une mesure au
   pixel des bandes d'Elevate puis tirés de +32° vers le bleu à saturation égale.
   `--ciel: #98d7df` (D-41) est mort : mesuré à 53 % de saturation contre 25 %
   chez Elevate — « une couleur de marque posée en aplat » là où il faut un fond.

   ⛔ LE SOCLE N'EST PAS TOUCHÉ. `../_systeme-a/systeme.css` sert AUSSI au
      parcours, qui est construit en ce moment dans deux autres chantiers. Y
      écrire la palette neuve casserait leur page sous eux. Les jetons sont donc
      redéfinis ICI, au niveau du document, et cette page seule les voit.

   ── L'ÉCHELLE DE VALEURS, ET POURQUOI IL EN FAUT SIX ───────────────────────
   Elevate n'a AUCUNE couleur de bande répétée : neuf bandes, neuf couleurs. Elle
   le peut parce qu'elle a huit TEINTES (menthe, rose, crème, deux gris, ardoise,
   vert très foncé). Nous n'en avons qu'une : le système est monochrome depuis le
   13/08 (D-40, « cinq rôles, pas six »), et Gary a été prévenu deux fois du coût.
   ⛔ Un système monochrome ne peut donc pas produire neuf couleurs distinctes. Ce
      qui est tenu à la place, et ce qui se mesure :
        1. six VALEURS séparées (12 · 32 · 68 · 79 · 90 · 100 % de clarté) ;
        2. aucune valeur ne revient à moins de TROIS bandes d'écart ;
        3. la plus grande bande est la plus sombre (Elevate : 24,7 %) ;
        4. le blanc apparaît UNE fois, sans contenu (Elevate : 2,8 %).
   C'est l'écart honnête à la référence, et il est déclaré plutôt que maquillé.

   ── LES CONTRASTES, MESURÉS, PAS ESTIMÉS ───────────────────────────────────
     encre sur clair  9,59:1   encre sur pale  12,52:1   encre sur mi   7,10:1
     blanc sur foncé  7,82:1   clair sur foncé  4,78:1   blanc sur encre 15,67:1
     ⛔ encre sur foncé 2,00:1 — LA SEULE PAIRE INTERDITE. C'est exactement la
        faute qu'Elevate commet sur 34 % de sa propre page d'accueil. Une
        référence se mesure, elle ne se copie pas.
     ⛔ Le corail `#f28a6b` ne survit pas : 1,49:1 sur le clair, 2,44:1 sur le
        blanc. Il n'est lisible nulle part où on voudrait s'en servir, et sa
        saturation de 84 % dans une palette à 14-25 % se lirait comme une erreur,
        pas comme un accent. Elevate n'a AUCUNE couleur d'accent : ce qui attire
        l'œil chez elle est un contraste de VALEUR.
     ⛔ Les filets tombent sous § 1.4.11 (3:1, composants et graphiques) dès
        qu'ils portent une frontière : `--fonce` sur les trois fonds clairs donne
        4,78 / 6,25 / 3,54:1, `--clair` sur les deux fonds sombres 4,78 / 9,59:1.
   ============================================================================ */

:root {
  /* la nappe et ses valeurs — SPEC § 11, mesurées puis vérifiées ici */
  --clair:  #bccdd7;   /* hsl(202, 25 %, 79 %) — la nappe dominante */
  --pale:   #dfe7ec;   /* hsl(203, 25 %, 90 %) */
  --mi:     #9bb2bf;   /* hsl(202, 22 %, 68 %) */
  --fonce:  #46545d;   /* hsl(203, 14 %, 32 %) — la grande bande sombre */
  --encre:  #092635;   /* hsl(200, 71 %, 12 %) — texte, en-tête, pied */
  --blanc:  #ffffff;

  /* ⛔ les deux jetons de D-41 sont RÉAFFECTÉS, pas laissés vivants : tout ce
     que le socle peint avec `--ciel` doit devenir le clair mesuré, et le corail
     ne doit plus pouvoir peindre quoi que ce soit sans qu'on le voie. */
  --ciel:   var(--clair);
  --corail: var(--encre);          /* aucune action corail ne subsiste (D-52) */

  /* les filets : une valeur par famille de fond, chacune ≥ 3:1 (§ 1.4.11) */
  --filet-clair:  #46545d;         /* sur clair 4,78:1 · pale 6,25:1 · mi 3,54:1 */
  --filet-sombre: #bccdd7;         /* sur foncé 4,78:1 · encre 9,59:1 */

  /* l'anneau de focus — il manquait au système, et § 1.4.11 le couvre aussi */
  --focus: #092635;
  --focus-sombre: #ffffff;

  /* ⛔ LA MESURE DE LIGNE MONTE DE 54 À 66 SIGNES, ET C'EST R-19 QUI LE DEMANDE.
     Butterick 45-90, pic de compréhension à 55, plafond § 1.4.8 (AAA) à 80.
     66 tient au milieu et laisse le pan porter la ligne au lieu de fabriquer du
     vide à sa droite. */
  --mesure: 62ch;   /* ⚠️ 66 avait été posé, MESURÉ à 76 signes rendus : le `ch`
                       de Manrope est plus étroit que le signe moyen d'un texte
                       français accentué. 62 rend 70 au pire, sous la barre de 75
                       (§ 1.4.8 plafonne à 80). Le nombre vient de la garde, pas
                       d'un calcul de coin de table. */

  /* la hauteur d'en-tête réelle, relue par le script — jamais devinée */
  /* ⛔ CORRIGÉE LE 2026-08-21 (D-88) : elle valait 4,75rem (76 px), une valeur du
     14/08 quand l'en-tête en faisait 101. La Proposition 1 choisie par Gary
     mesure 89 px sur bureau. Ce jeton est le REPLI quand le script ne tourne
     pas ; `home.js` remesure la vraie hauteur au `ResizeObserver`.
     Trois mécaniques le lisent, et les trois se décalent si le nombre est faux :
     `scroll-padding-block-start` du socle (les ancres), `scroll-margin-block-start`
     (§ 2.4.11 Focus Not Obscured) et `min-block-size: calc(100svh - var(--entete-h))`.
     ⚠️ CORRIGÉ ICI ET PAS EN FIN DE FICHIER, à dessein : une seconde définition
        ajoutée à la suite ne prenait pas (vérifié au navigateur, script coupé —
        la valeur restait à 4,75rem), et deux définitions du même jeton divergent
        en silence. */
  --entete-h: 5.5625rem;   /* 89 px */
}

/* ═══════════════════════════════ LES BANDES · c'est ÇA, la forme ════════════
   SPEC § 1 : « le site est une pile de bandes pleine largeur qui changent de
   couleur, et le contenu vit dedans ». Module mesuré chez Elevate : 632 à
   642 px CSS de haut pour une bande courante ; aucune bande sous 0,42 largeur
   de page hors le blanc et la barre utilitaire.

   ⛔ D-53 S'ÉCRIT `min-block-size`, JAMAIS `height`. La reformulation est celle
      de l'audit du 14/08, et elle est motivée par trois critères AA qui tombent
      ENSEMBLE avec une hauteur figée : § 1.4.10 Reflow (tout doit tenir à
      320 × 256 px CSS), § 1.4.4 Resize Text (200 %, donc la fenêtre fait la
      moitié de sa hauteur), § 1.4.12 Text Spacing (interligne 1,5 et
      espacement de paragraphe 2× ajoutent environ la moitié de la hauteur du
      texte). Une section qui rogne son contenu pour tenir dans l'écran échoue
      les trois. Ici le contenu qui déborde DÉBORDE : la bande grandit.
   ⛔ ET AUCUN `scroll-snap-type`. L'audit tranche : la hauteur d'écran est
      soutenue comme contrainte de COMPOSITION, anti-patron comme mécanique de
      DÉFILEMENT (NN/g, Scrolljacking 101, 06/08/2023 : « all participants who
      visited it were disoriented »). Le défaut est : aucun accrochage. */
.bande--clair { background: var(--clair); color: var(--encre); }
.bande--pale  { background: var(--pale);  color: var(--encre); }
.bande--mi    { background: var(--mi);    color: var(--encre); }
.bande--fonce { background: var(--fonce); color: var(--blanc); }
.bande--encre { background: var(--encre); color: var(--blanc); }
.bande--blanc { background: var(--blanc); color: var(--encre); }

/* sur les deux bandes sombres, les filets et les focus changent de valeur */
.bande--fonce, .bande--encre, .pied {
  --filet-clair: var(--filet-sombre);
  --focus: var(--focus-sombre);
}
/* ⛔ et l'encre n'y peint plus rien : 2,00:1, la seule paire interdite. */
.bande--fonce .surtitre, .bande--encre .surtitre { color: var(--clair); }

/* ---- LE MODULE. Chaque section de contenu occupe au moins un écran, en
   retirant l'en-tête, qui est collant et mange sa hauteur sur chaque page. */
.hm-module {
  min-block-size: calc(100svh - var(--entete-h));
  display: grid;
  align-content: center;
}
/* ⛔ À 320 × 256 (§ 1.4.10) et à 200 % de zoom, un plancher à la hauteur de
   l'écran empile un module qui ne respire plus. Sous 34rem de HAUTEUR, le
   plancher est levé : la bande reprend sa hauteur naturelle, rien n'est rogné. */
@media (max-height: 34rem) {
  .hm-module { min-block-size: 0; }
}

/* ---- LE SAS BLANC. SPEC § 2 : une bande, une fois par page, SANS CONTENU,
   2,8 % de la hauteur, et une seule fonction — passer du monde des aplats au
   monde photographique. Ici il précède la seule photographie de la page.
   ⛔ Un blanc qui sépare deux sections de même nature est un blanc « fait
      n'importe quand » : c'est exactement ce que Gary a vu chez nous. */
.hm-sas {
  block-size: clamp(5rem, 12svh, 9rem);
  background: var(--blanc);
}

/* ═══════════════════════════════════════ L'EN-TÊTE (R-27) ═══════════════════
   Gary, 14/08 : « Le header aussi : il n'y a pas de header. » Ce qu'il y avait
   était un filet et deux lignes de liens.

   La spécification appliquée est écrite en entier dans `SPEC-ENTETE.md`, à côté
   de ce fichier, parce que l'audit du 14/08 a établi qu'AUCUN des six SOP de
   forme du vault n'en contient une — R-27 est un trou de méthode, pas une
   négligence de build. Résumé de ce que le CSS ci-dessous exécute :

     · une bande pleine largeur, logo à gauche, navigation au centre, UN SEUL
       bouton plein de tout le site à droite (mesure Elevate, SPEC § 5A) ;
     · fond OPAQUE et DISTINCT du fond de tout contenu (NN/g, Laubheimer,
       04/04/2021, point 2 : un en-tête translucide devient illisible dès que le
       contenu défile dessous). L'encre est la seule valeur qu'aucune bande de
       contenu n'utilise, sauf la dernière ;
     · le moyen de contact humain est DANS l'en-tête, au même rang relatif sur
       toutes les pages → § 3.2.6 Consistent Help, niveau A, NOUVEAU en WCAG 2.2,
       dont la page Understanding (09/03/2026) donne comme exemple officiel, mot
       pour mot, la prise de rendez-vous médicale ;
     · § 2.4.11 Focus Not Obscured (AA, nouveau en 2.2) : un élément qui reçoit
       le focus ne doit jamais être ENTIÈREMENT masqué par l'en-tête collant.
       La page Understanding (15/06/2026) nomme l'en-tête collant comme cause
       type, échec F110. La parade est `scroll-margin-block-start`, plus bas ;
     · § 2.5.8 Target Size (AA) : 24 × 24 px CSS, pas 44. Le 44 de ce système
       est le § 2.5.5, niveau AAA, et c'est une barre maison assumée.
   ⛔ AUCUN pourcentage de hauteur de fenêtre n'est prescrit ici. Le « 10 % du
      viewport » qui circule sous le nom de NN/g n'est PAS dans leur article :
      vérifié le 14/08, l'article ne contient aucune hauteur, ni en px ni en %. */
.entete {
  background: var(--encre);
  color: var(--blanc);
  border-block-end: 0;
  padding-block: 0;
  /* une seule rangée : c'est ce qui la tient sous 80 px sans rien replier */
  row-gap: 0;
}
.entete__contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-block-size: 4.75rem;
  padding-block: var(--e2);
}
.entete__identite {
  font-size: var(--t-petit);
  letter-spacing: 0.14em;
  color: var(--blanc);
  flex: 0 0 auto;
}
/* la navigation quitte sa rangée et vient AU CENTRE de la même bande */
.entete__nav {
  grid-column: auto;
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--e1) var(--e6);
}
.entete__nav a { color: var(--blanc); font-size: var(--t-petit); }
.entete__nav a:hover { border-block-end-color: var(--clair); }
.entete__actions { flex: 0 0 auto; }

/* ---- LE BOUTON PLEIN. Un seul sur tout le site (SPEC § 5A : « un seul
   exemplaire », 134,5 × 44 px, rayon ~5 px). C'est le téléphone, parce que
   c'est le seul canal branché de bout en bout, et parce que § 3.2.6 veut le
   moyen de contact au même endroit sur toutes les pages. */
.entete .action--encre {
  background: var(--clair);
  color: var(--encre);
  border-color: var(--clair);
  border-radius: 5px;
  font-size: var(--t-petit);
  letter-spacing: 0.04em;
  padding: var(--e2) var(--e4);
}
.entete .action--encre:hover { background: var(--blanc); color: var(--encre); }

/* ---- LE REPLI. Sous 62rem, la navigation passe sous la première rangée ; sous
   34rem elle se met en colonne. Rien ne disparaît, rien ne part sous un menu :
   NN/g mesure qu'un hamburger sur bureau divise l'usage par deux (48 → 27 %). */
@media (max-width: 62rem) {
  .entete__contenu { flex-wrap: wrap; min-block-size: 0; padding-block: var(--e3); }
  .entete__nav { justify-content: flex-start; padding-block-end: var(--e2); }
  .entete .action--encre { padding: var(--e2) var(--e3); }
}
/* l'accès direct (D-20) reprend sa place dans une bande sombre */
.hm-direct { border-inline-start-color: var(--filet-sombre); }

/* ⛔ § 2.4.11 · F110 · LA PARADE, ET ELLE EST MÉCANIQUE.
   Tout ce qui peut recevoir le focus se réserve la hauteur de l'en-tête quand le
   navigateur le fait défiler à l'écran. Sans ça, une ancre ou une tabulation
   amène l'élément SOUS l'en-tête collant, entièrement masqué : c'est l'échec
   nommé dans la page Understanding du 15/06/2026. */
/* ⛔ CORRECTION DU 21/08 — CETTE PARADE ETAIT POSEE DEUX FOIS, ET DEUX PARADES
   POUR UN DEFAUT PRODUISENT LE DEFAUT, A L'ENVERS.
   `_systeme-a/systeme.css` l. 284 pose deja `scroll-padding-block-start` de la
   MEME valeur sur `:root`. Le selecteur ci-dessous ajoutait par-dessus un
   `scroll-margin-block-start` identique, et `#parcours` porte `tabindex="-1"` :
   il matchait. Les deux s'additionnent.
   MESURE, navigateur reel, clic sur le seul appel a l'action de l'en-tete :
     bureau 1512x829 · haut de #parcours a y=234 pour une cible de 101 (2x117)
     mobile 390x844  · haut de #parcours a y=394 pour une cible de 181 (2x197)
   Soit 394 px sur un ecran de 844 : 47 % de l'ecran de vide au-dessus de la
   section qu'on vient de demander a voir.
   ⛔ CE QUI EST RETIRE, ET RIEN D'AUTRE : le `scroll-margin` general. Le
   `scroll-padding` de la racine fait exactement ce travail, focus compris — il
   s'applique a TOUT defilement du conteneur, y compris celui que declenche le
   focus. L'echec F110 (§ 2.4.11) reste donc pare, par une seule parade. */
:where(a, button, summary, input, select, textarea, [tabindex]) {
  scroll-margin-block-start: 0;
}
:where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--focus); }

/* ══════════════════════ LA COMPOSITION AVEC L'ILLUSTRATION (D-54) ═══════════
   Gary, 14/08 : « À chaque fois il va y avoir une illustration sur le côté de la
   section. » Et : « la mise en page se pense AVEC l'illustration, pas en la
   posant après. »

   ⛔ CE QUE ÇA RÉPARE, MESURÉ. La SPEC § 3 dit la chose la plus utile du dossier
      sur R-19 : la colonne de lecture d'Elevate sur page intérieure fait 56,7 %,
      presque exactement nos 58 %. La différence n'est PAS la largeur du texte,
      c'est que ses 43 % restants PORTENT quelque chose — une sous-navigation à
      gauche, des photos qui débordent jusqu'à 99 % à droite. Chez nous ils
      portaient du vide. Et sa page d'accueil, elle, ne descend jamais sous 79 %.

   ⛔ TOUTES LES ILLUSTRATIONS SONT DU MÊME CÔTÉ, ET C'EST MESURÉ, PAS UN GOÛT.
      NN/g, Flaherty, 26/11/2017, oculométrie, ~30-35 participants par condition :
      « Zigzag layouts made it more difficult to ignore decorative imagery and
      caused users to stumble over these unhelpful images. » La distinction qui
      décide : une image INFORMATIONNELLE rend les deux dispositions équivalentes,
      une image DÉCORATIVE fait buter le regard en alternance. Recommandation de
      l'article : « Align decorative imagery down the page », et réserver
      l'alternance aux pages de 2 à 3 rangées.
      Les illustrations de cette page ne sont pas encore écrites : tant qu'on ne
      peut pas prouver qu'elles portent une information que le texte ne dit pas,
      elles sont DÉCORATIVES au sens de l'étude, donc elles s'alignent. Toutes à
      droite, du haut en bas.
   ⚠️ Le jour où un brief d'illustration démontre l'inverse pour une section,
      l'alternance redevient permise POUR CELLE-LÀ. C'est une décision de
      contenu, elle ne se prend pas dans une feuille de style. */
.hm-scene {
  display: grid;
  gap: var(--e8);
  align-items: center;
}
@media (min-width: 62rem) {
  /* 52 / 44 avec la gouttière : le texte porte la ligne, l'illustration porte
     les 44 % qui étaient vides. Ensemble : 100 % de la colonne de contenu, et
     86 % de la fenêtre à 1440 px. */
  .hm-scene { grid-template-columns: minmax(0, 52fr) minmax(0, 44fr); gap: var(--e12); }
  /* ⛔ L'ORDRE DU DOM EST L'ORDRE DE LECTURE. Le texte s'écrit AVANT
     l'illustration dans le HTML, quel que soit le côté où elle s'affiche. On
     place par grille, jamais par `order` ni `row-reverse` : mesuré le 12/08 sur
     une autre page, 9 tabulations et zéro qui atterrissait où l'œil l'attendait. */
  .hm-scene > .hm-scene__texte { grid-column: 1; }
  .hm-scene > .hm-illu         { grid-column: 2; }
}
.hm-scene__texte > * + * { margin-block-start: var(--e6); }

/* ---- L'EMPLACEMENT D'ILLUSTRATION ----
   ⛔ CE N'EST PAS UNE IMAGE, ET ÇA NE DOIT PAS EN AVOIR L'AIR. Les briefs
      d'illustration sont rendus section par section par un autre agent au moment
      où j'écris ; poser un dessin fabriqué à la va-vite reproduirait R-20
      (« c'est quoi cette section avec cette porte et ces lignes ? »). Ce qu'on
      pose, c'est la PLACE : la composition, le rapport texte/image, le format.
   ⛔ AUCUNE BORDURE, ET SURTOUT AUCUN POINTILLÉ (R-25, 14/08 : « arrête un peu
      avec tous ces pointillés »). C'est un aplat de la palette, une valeur
      voisine de celle de sa bande, et il se dénonce au clic (D-42).
   ⛔ Le format est 4/5 partout : c'est celui de la seule image réelle de la page
      (le portrait, 960 × 1200), et une place qui change de format d'une section
      à l'autre ne se lit plus comme un système. */
.hm-illu { margin: 0; display: grid; gap: var(--e3); }
.hm-illu__place {
  aspect-ratio: 4 / 5;
  display: grid;
  align-content: end;
  padding: var(--e6);
  background: var(--pale);
  color: var(--encre);
}
.bande--pale .hm-illu__place  { background: var(--clair); }
.bande--clair .hm-illu__place { background: var(--pale); }
.bande--mi   .hm-illu__place  { background: var(--clair); }
.bande--fonce .hm-illu__place { background: var(--encre); color: var(--blanc); }
.hm-illu__quoi {
  font-size: var(--t-petit);
  line-height: var(--lh);
  max-inline-size: 34ch;
}
.hm-illu .a-fournir { margin-block-start: var(--e3); }

/* ---- LA PHOTOGRAPHIE DU PRATICIEN ----
   ⛔ ELLE SORT PAR LE BORD DROIT, et c'est la mesure d'Elevate : ses photos vont
      de 55,8 % jusqu'à 99 % de la largeur de fenêtre. C'est ce qui fait que sa
      page « ne descend jamais sous 79 % » alors que sa colonne de lecture fait
      56,7 %. La sortie de bord est celle du socle (`.sortie-droite`), sans
      `100vw`, sans marge négative et sans `overflow-x`.
   ⛔ ELLE PORTE UN EMPLACEMENT QUI S'EXPLIQUE, ET C'EST OBLIGATOIRE : le
      praticien n'a JAMAIS donné d'accord écrit de publication sur un portrait à
      son effigie, et l'image est générée. Deux blocages indépendants, tous deux
      déclarés sur la page.
   ⛔ Dimensions déclarées sur le `<img>` : mesuré le 11/08 sur un autre livrable,
      12 photos sans dimensions = +714 px de saut de mise en page à 390 px. */
.hm-portrait { margin: 0; display: grid; gap: var(--e3); }
.hm-portrait img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
@media (min-width: 62rem) {
  .hm-portrait img { aspect-ratio: 5 / 6; }
}

/* ═══════════════════════ LA SECTION PARCOURS (D-55) · BANDE SOMBRE ══════════
   Gary, 14/08 : « On aura juste une section avec une sorte de titre, une sorte
   de call to action — plutôt "commencez", "prenez votre jour d'opération ici" —
   et là après il y aura une histoire de pop-up. »
   ⛔ Les trois portes disparaissent de la home. Le parcours s'ouvre en fenêtre,
      il ne s'explique plus sur la page.
   ⛔ R-26 tient : jamais « réserver ».
   ⛔ ET LA BANDE EST SOMBRE, ce qui n'était le cas d'AUCUNE bande de cette page
      hors le pied. SPEC § 1 : la plus grande bande d'Elevate est la plus sombre
      (24,7 % de la page). Une page sans valeur sombre n'a pas de contraste de
      valeur, et l'accent de ce système EST un contraste de valeur, puisqu'il n'y
      a aucune couleur d'accent. */
.hm-appel {
  font-size: var(--t-bloc);
  font-weight: var(--w-appui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: var(--lh-serre);
  text-align: start;
  display: inline-grid;
  justify-items: start;
  gap: var(--e3);
  min-block-size: var(--cible);
  background: none;
  border: 0;
  padding: var(--e2) 0;
  color: inherit;
  cursor: pointer;
}
/* ⛔ LE FILET FAIT 43 px, QUELLE QUE SOIT LA LONGUEUR DE L'ÉTIQUETTE. SPEC § 5B,
   mesuré sur CINQ occurrences chez Elevate, toutes identiques : 43 px de large,
   1 px d'épaisseur, 11 px sous le texte. Ce n'est pas un soulignement, c'est un
   tiret fixe posé sous le début du mot. C'est la signature du site de
   référence, et elle ne se déduit d'aucune règle : elle se mesure. */
.hm-appel::after {
  content: "";
  inline-size: 43px;
  block-size: 1px;
  background: currentColor;
  margin-block-start: 11px;      /* mesuré, constant sur les cinq */
}
.hm-appel[aria-expanded="true"]::after { inline-size: 86px; }
.hm-appel .a-fournir__mot { text-transform: none; letter-spacing: 0; }

/* le contrepoids du parcours : les deux phrases dues restent AU-DESSUS de
   l'appel, et le lien vers la page annexe aussi. Les trois gates l'ont exigé
   séparément ; ce qui change ici est leur habillage, pas leur position. */
.hm-avant { max-inline-size: var(--mesure); }
.hm-avant .hm-appui { font-size: var(--t-sous); font-weight: 500; }
.bande--fonce .lien-filet { border-block-end-color: currentColor; }

/* ═══════════════════════ LA DERNIÈRE BANDE · LA PLUS GRANDE, LA PLUS SOMBRE ══
   SPEC § 1, point 2 : chez Elevate, l'ardoise porte le recrutement, les
   partenaires ET le pied de page d'un seul tenant, et c'est 24,7 % de la page.
   Ici la reprise et le pied ne sont plus deux ruptures peintes qui se suivent :
   c'est UNE bande, et c'est la plus haute de la page. */
.pied { background: var(--encre); color: var(--blanc); padding-block-start: 0; }
.hm-reprise { background: var(--encre); color: var(--blanc); padding-block-end: var(--e12); }
.hm-reprise .hm-tete { border-block-end-color: var(--filet-sombre); }

/* ═══════════════════════════════════ LES AJUSTEMENTS DE COMPOSITION ═════════ */

/* le héros : il n'a plus de plancher à lui, c'est le module qui le porte. */
.hm-heros { min-block-size: 0; }
.hm-heros__def { max-inline-size: var(--mesure); }

/* le montant : il reste le seul chiffre autorisé à être grand, et il ne prend
   AUCUNE couleur — l'accent de ce système est une valeur, jamais une teinte. */
.hm-montant { color: inherit; }

/* la tête de bande : le filet passe à la valeur de sa bande (§ 1.4.11, 3:1) */
.hm-tete { border-block-end-color: var(--filet-clair); }

/* ⛔ LE PLANCHER DE LIGNE. Le rail de 79 % est une largeur de CONTENEUR, pas de
   LIGNE : l'audit du 14/08 relève que le mot « caractères » n'apparaît dans
   aucun des six SOP de forme, et qu'un rail de 1 194 px portant un paragraphe
   unique fait ~150 signes par ligne, près du double du plafond de § 1.4.8. Le
   pan porte la ligne, et `--mesure` la borne à 66 signes. */
.hm-scene__texte .hm-prose p,
.hm-scene__texte > p { max-inline-size: var(--mesure); }

/* ⚠️ `.hm-porte-liste`, `.hm-porte` et `.hm-porte__rang` restent DÉFINIS plus
   haut dans ce fichier et ne sont plus employés : les trois portes ont quitté la
   home avec D-55. Leurs règles ne sont pas supprimées — le parcours en fenêtre
   reprendra la même grammaire de porte, et une règle réécrite de mémoire n'est
   pas la règle mesurée. Elles sont mortes sur CETTE page, pas dans le système. */

/* ═══════════════════════ LES RACCORDS AVEC L'EXISTANT (14/08, soir) ═════════
   ⛔ Un rang à deux pans DANS un pan de 52 % ferait deux colonnes de 26 % : la
      faute exacte que R-19 dénonce, refaite d'un cran plus bas. Dans la colonne
      de texte d'une scène, tous les rangs redeviennent une seule colonne — c'est
      l'illustration qui porte le second pan, et elle seule. */
.hm-scene__texte .hm-rang { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
.hm-scene__texte .hm-apres { margin-block-start: var(--e8); }

/* la bande de sortie : les actions en colonne, chacune avec son bornage au
   contact, jamais alignées comme une barre d'outils. */
.hm-reprise__actions {
  display: grid;
  justify-items: start;
  gap: var(--e3);
  max-inline-size: var(--mesure);
}
.hm-reprise__actions .action { margin-block: var(--e2); }
.bande--encre .note, .bande--fonce .note, .pied .note { color: var(--clair); }
.bande--encre .action--ligne { border-color: var(--clair); color: var(--blanc); }
.bande--encre .action--ligne:hover { background: var(--clair); color: var(--encre); }

/* le pied : il continue la bande de la reprise, il n'ouvre pas une rupture de
   plus. Un filet clair les sépare, comme chez Elevate, où le pied vit DANS la
   grande bande sombre. */
.pied { border-block-start: var(--trait) solid var(--filet-sombre); margin-block-start: 0; }

/* ⛔ AUCUN `height: 100vh` NULLE PART DANS CETTE FEUILLE. Le seul plancher de
   hauteur est `min-block-size: 100svh` sur `.hm-module`, et il se lève sous
   34rem de hauteur de fenêtre. La garde `aucune-hauteur-figee` le vérifie dans
   le navigateur, pas dans le CSS. */

/* ═══════════════ CORRECTIONS APRÈS LA PREMIÈRE CAPTURE (14/08, soir) ════════
   ⛔ MESURÉ, PAS SUPPOSÉ. La première capture pleine hauteur donne un en-tête de
      76 px à 1440 et de 244 px à 390 — soit 29 % de la hauteur d'écran d'un
      téléphone, mangés sur CHAQUE page. NN/g (Laubheimer, 04/04/2021, point 1) :
      « maximise the content-to-chrome ratio by keeping the header small », et
      point 5 : « by using a sticky header you give away some screen real estate
      on every single page ». 29 %, c'est ne plus donner, c'est prendre.
   ⚠️ Aucune hauteur cible n'est citée de NN/g : leur article n'en contient
      AUCUNE, ni en pixels ni en pourcentage. Le « 10 % du viewport » qui circule
      sous leur nom est une invention, vérifiée absente le 14/08. La cible ici
      est donc la nôtre, et elle est déclarée : ≤ 110 px à 390, ≤ 90 px à 1440.
   ⛔ ET RIEN NE PART SOUS UN MENU pour y arriver : la navigation reste visible
      sur les deux largeurs (NN/g, Pernice & Budiu : un hamburger sur bureau
      divise l'usage de la navigation par deux). Ce qui rétrécit, c'est la taille
      du texte — jamais la taille des CIBLES, qui restent à 44 px de haut. */
@media (max-width: 62rem) {
  /* ⛔ L'ORDRE DES ZONES A ÉTÉ CORRIGÉ APRÈS MESURE. Le premier jet posait
     « identite action » puis « nav nav » : la tabulation partait alors de la
     navigation (2e rangée) pour REMONTER au bouton (1re rangée), et la garde
     `tabulation-suit-l-ordre-visuel` l'a attrapé — (48,246) puis (2,269).
     L'ordre du DOM est identité → navigation → action ; les zones le suivent. */
  /* ⛔ TROIS RANGÉES, ET C'EST UN ARBITRAGE QUI SE PAYE — je l'écris au lieu de
     le cacher. Mesuré à 390 px : la navigation fait 297 px, le bouton 100 px, la
     colonne utile 350 px. Les deux ne tiennent pas sur une rangée, et aucune des
     trois exigences en présence n'accepte de céder :
       · les quatre entrées restent VISIBLES (NN/g, Pernice & Budiu : un
         hamburger divise l'usage de la navigation par deux) ;
       · le moyen de contact reste DANS l'en-tête, au même rang relatif sur
         toutes les pages (§ 3.2.6, niveau A) ;
       · l'ordre du DOM reste l'ordre visuel — mettre le bouton visuellement
         au-dessus de la navigation alors qu'il la suit dans le code fait
         remonter la tabulation, et la garde `tabulation-suit-l-ordre-visuel` l'a
         attrapé au premier essai.
     Coût mesuré : ~136 px, soit 16 % d'un écran de 844. ⚠️ C'EST BEAUCOUP, et
     c'est exactement ce que NN/g décrit — « by using a sticky header you give
     away some screen real estate on every single page ». Le levier qui le
     réduirait est une DÉCISION DE CONTENU (une entrée de navigation en moins),
     pas un réglage de CSS : je la pose à Gary, je ne la prends pas. */
  .entete__contenu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "identite" "nav" "action";
    align-items: center;
    justify-items: start;
    row-gap: 0;
    padding-block: 0;
  }
  .entete__identite {
    grid-area: identite;
    min-block-size: 2.75rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
  .entete__actions  { grid-area: action; padding-block-end: var(--e2); }
  .entete__nav {
    grid-area: nav;
    flex-wrap: nowrap;
    gap: var(--e4);
    padding-block-end: 0;
    font-size: var(--t-micro);
  }
  .entete__nav a { font-size: var(--t-micro); white-space: nowrap; letter-spacing: 0.02em; }
  /* ⛔ 44 px sur les DEUX dimensions, pas seulement en hauteur. La garde a
     attrapé « Le prix » à 36,6 × 44 : conforme AA (§ 2.5.8 : 24 px), sous notre
     barre maison (§ 2.5.5, AAA : 44 px). Prescrire une hauteur sans largeur ne
     prouve rien — les deux critères portent sur les deux dimensions. */
  .entete__nav a { min-inline-size: var(--cible); justify-content: center; }
  .entete .action--encre { padding: var(--e2) var(--e3); font-size: var(--t-micro); }
}

/* ⛔ LES EMPLACEMENTS D'ILLUSTRATION SE LISAIENT COMME DES TROUS, PAS COMME DES
   PLACES. Vu sur la capture du 14/08 : posés à une valeur voisine de leur bande
   (pale sur clair, clair sur mi), ils passaient pour des images qui n'ont pas
   chargé. Ils descendent donc d'UNE MARCHE de valeur, ce qui en fait une forme
   voulue au lieu d'un défaut. Contrastes du texte qu'ils portent, mesurés :
   encre sur mi 7,10:1 · blanc sur foncé 7,82:1 · blanc sur encre 15,67:1. */
.bande--clair .hm-illu__place { background: var(--mi);    color: var(--encre); }
.bande--pale  .hm-illu__place { background: var(--mi);    color: var(--encre); }
.bande--mi    .hm-illu__place { background: var(--fonce); color: var(--blanc); }
.bande--fonce .hm-illu__place { background: var(--encre); color: var(--blanc); }
.hm-illu__place .surtitre { color: inherit; opacity: 1; }

/* la scène du praticien sort par le bord droit : son pan d'image n'a plus de
   gouttière à droite, et la photo touche le bord. */
.hm-scene.sortie-droite .hm-portrait img { object-position: 40% 22%; }
@media (min-width: 62rem) {
  .hm-scene.sortie-droite { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .hm-scene.sortie-droite .hm-portrait img { aspect-ratio: 1 / 1; }
  .hm-scene.sortie-droite figcaption { padding-inline-end: var(--gouttiere); }
}

/* ⛔ DÉFAUT VU SUR LA CAPTURE, PAS DANS LE CODE : le filet de 43 px de l'appel
   du parcours était BARRÉ EN TRAVERS DU TEXTE. Cause : `.a-fournir::after` est
   `position: absolute` (c'est son « + »), et mon `::after` héritait de cette
   position sans la redéclarer — une propriété qu'on ne redéclare pas n'est pas
   neutralisée, elle reste. Le filet mesuré se pose SOUS le mot, en flux.
   ⚠️ L'appel perd donc le « + » des autres emplacements. C'est voulu : il n'a
      pas le même rôle. Son état reste annoncé par `aria-expanded`, et le filet
      double de longueur quand le message est ouvert. */
.hm-appel::after { position: static; }
.hm-appel { padding-inline-end: 0; }

/* ⛔ LA COLONNE DE TEXTE PASSE DE 52 À 50 PARTS, ET LE MOTIF EST UNE MESURE.
   La garde `longueur-de-ligne-sous-75-signes` a relevé 76 signes sur une ligne
   de 646 px : la ligne la plus longue de la page tenait d'un cheveu au-dessus de
   la barre. ⛔ Et la corriger par un `max-inline-size` aurait été refaire la
   faute de R-19 — un cap posé DANS un pan fabrique du vide à sa droite (305 px
   morts, mesurés le 13/08). C'est donc le PAN qui rétrécit, pas le texte dedans.
   Mesure : 50/96 de 1 192 px = 621 px, soit ~73 signes. Et les 2 parts rendues
   vont à l'illustration, qui en a l'usage. */
@media (min-width: 62rem) {
  .hm-scene { grid-template-columns: minmax(0, 48fr) minmax(0, 48fr); }
}
/* ⚠️ ET C'EST 48/48, PAS 50/46 : à 50 parts, la phrase la plus longue de la page
   (« Ce site ne dit pas où l'opération elle-même a lieu : demandez-le au
   cabinet. », 76 signes) tenait ENCORE sur une seule ligne de 621 px, donc à 76
   signes — un de trop. ⛔ Je n'ai pas relevé la barre de la garde pour la faire
   passer : c'est le pan qui descend à 596 px, la phrase se met sur deux lignes,
   et la mesure repasse sous 75 sans qu'on ait touché au seuil.
   Relever un seuil pour faire passer son propre travail est la manière la plus
   silencieuse de casser une garde. */


/* ═════════ mv-illu-posees · LES ILLUSTRATIONS DE SECTION (D-54, D-63) ═════════
   Six emplacements gris deviennent six dessins. Quatre familles, pour que le
   praticien en choisisse UNE — jamais deux sur la meme page, ce serait quatre sites.

   ⛔ AUCUNE BOITE. L'ancien `.hm-illu__place` portait un aplat de fond : c'etait un
      rectangle dessine, et la reference n'en a aucun sur toute sa page.
   ⛔ F2 EST RECOLOREE, LES AUTRES NON. Mesure du 14/08 sur les images reelles, part
      de l'encre au-dessus de 3:1 sur la bande sombre :
        F1 24,7 %  ·  F3 21,9 %  ·  F4 20,2 %  ·  F2 2,7 %
      Les trois premieres se detachent. F2 ne peint que 3,1 % de la surface : le trait
      EST l'objet, et il disparait. Elle passe donc en masque, sa couleur vient du
      jeton, et le jeton change avec la bande. */
/* ⛔ DEUX FAUTES CORRIGEES LE 14/08, TROUVEES EN OUVRANT LE NAVIGATEUR :
   1. `place-items: center` empeche l'etirement de la grille, donc `height: 100 %` se
      resolvait contre une piste de hauteur automatique et rendait ZERO. Le masque
      existait, portait la bonne image, et mesurait 596 x 0.
   2. La boite ne tombait pas : mes regles `.hm-illu__place` font une specificite de
      (0,1,0), et les regles d'origine `.bande--pale .hm-illu__place` font (0,2,0).
      LA SPECIFICITE GAGNE SUR L'ORDRE — ajouter a la fin d'une feuille ne suffit pas.
      Il faut neutraliser les regles de bande une par une, a specificite egale. */
.hm-illu__place {
  aspect-ratio: 3 / 4;
  background: none;
  padding: 0;
  display: grid;
  /* ⛔ LA LIGNE QUI DEBLOQUE TOUT, et elle a demande d'ouvrir le navigateur.
     La regle d'origine portait `align-content: end` (le texte de l'emplacement etait
     colle en bas de la boite). Elle survit a mon ajout : je ne l'avais pas neutralisee.
     Avec `end`, la piste de la grille NE S'ETIRE PAS : elle se dimensionne sur son
     contenu, et le contenu demande `height: 100 %` de cette piste. Le calcul boucle et
     rend ZERO. Mesure : le parent faisait 596 x 795, l'enfant 596 x 0. */
  align-content: stretch;
  justify-content: stretch;
}
.bande--pale  .hm-illu__place,
.bande--clair .hm-illu__place,
.bande--mi    .hm-illu__place,
.bande--fonce .hm-illu__place { background: none; color: inherit; }
.hm-illu__img,
.hm-illu__masque { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; }
.hm-illu__img { object-fit: contain; }
.hm-illu__masque {
  -webkit-mask-image: var(--illu); mask-image: var(--illu);
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  background-color: var(--encre);
}
/* par defaut : l'image, pas le masque */
.hm-illu__masque { display: none; }
[data-famille="f2"] .hm-illu__img    { display: none; }
[data-famille="f2"] .hm-illu__masque { display: block; }

/* ⛔ le jeton qui sauve F2 sur la bande sombre : creme a 6,70:1 au lieu de 2,00:1 */
.bande--fonce .hm-illu__masque { background-color: #f2ede4; }

/* ── l'outil de choix. Il n'appartient pas au site. ── */
/* ⛔ ELLE ETAIT CENTREE EN BAS, ET ELLE RECOUVRAIT UN LIEN DU HEROS.
   Mesure du 14/08 a la taille reelle de Gary (1512 x 829) : la barre passait sur
   << Lire ce qu'on doit vous dire avant une vasectomie >>. ⚠️ Le defaut N'EXISTAIT PAS
   a 1440 x 900, la taille ou je mesurais : son ecran est 71 px plus court, et c'est
   ce qui faisait remonter le contenu sous la barre.
   Un outil de chantier ne doit jamais manger le contenu qu'il sert a juger.
   -> repoussee dans le coin, hors de la colonne de lecture, et repliable. */
/* ⛔ R-52, 14/08 — L'OUTIL RECOUVRAIT LE PIED DE PAGE SUR L'ÉCRAN DE GARY.
   Il était masqué dans MES captures et visible dans SA page : je jugeais sur une
   image dont j'avais retiré le défaut. Un outil qui sert à juger ne doit jamais
   abîmer ce qu'on juge.
   → il se replie en une pastille de 34 px et ne s'ouvre qu'au survol ou au clavier.
   Replié, il ne couvre plus rien de lisible. */
.choix-famille {
  position: fixed; inset-block-end: .75rem; inset-inline-end: .75rem;
  z-index: 60;
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem;
  max-width: 34px; overflow: hidden;
  background: var(--encre); color: var(--blanc, #fff);
  border-radius: 999px;
  font-size: .75rem; white-space: nowrap;
  opacity: .35;
  transition: max-width 200ms ease, opacity 160ms ease, padding 200ms ease;
}
.choix-famille::before {
  content: "◐"; font-size: 1rem; line-height: 1; padding-inline: .35rem;
}
.choix-famille:hover,
.choix-famille:focus-within {
  max-width: 44rem; padding: .35rem .6rem; opacity: 1;
}
@media print { .choix-famille { display: none; } }
.choix-famille__mot { opacity: .7; padding-inline-end: .25rem; }
.choix-famille button {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .35rem .7rem;
  background: transparent; color: inherit; font: inherit;
}
.choix-famille button[aria-pressed="true"] { background: var(--clair); color: var(--encre); }
@media print { .choix-famille { display: none; } }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  mv-forme-home · LA FORME DE LA HOME — 2026-08-14, nuit                  ║
   ║  R-19 · R-29 · R-32 · R-36 · R-41 · F-01 a F-26 de                       ║
   ║  `_Research/forme-home-2026-08-14/SPEC.md`                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   ⛔ CE BLOC NE TOUCHE AUCUNE COULEUR ET AUCUN TEXTE. Il ne parle qu'en jetons
      (`--pale`, `--clair`, `--mi`, `--fonce`, `--encre`), il n'ecrit aucun
      hexadecimal, et il ne remplace aucun mot. La palette est « Ciel » (D-74) et
      elle vit dans `palette-ciel.css`, qui se charge APRES cette feuille.

   ⛔ POURQUOI IL EST EN FIN DE FICHIER ET POURQUOI CHAQUE SELECTEUR PORTE SA
      SPECIFICITE. Piege deja paye deux fois aujourd'hui : « ajouter une regle a
      la fin ne suffit pas si la regle d'origine a deux classes ». Chaque regle
      ci-dessous est ecrite a une specificite STRICTEMENT superieure a celle
      qu'elle corrige, et le selecteur corrige est cite en commentaire.

   ── CE QUI CHANGE, ET LE CHIFFRE QUI LE COMMANDE ──────────────────────────
     1. LE RAIL (F-14, F-15, R-19). Il etait plafonne a `--contenu-max` = 1240 px
        pendant que la fenetre continuait de grandir : 82,0 % a 1512, puis 77,5 a
        1600, 71,8 a 1728, 64,6 a 1920. C'est le motif exact de
        `.claude/rules/myvicto-header-pill-fit.md`, pris par l'autre bout : ne
        jamais laisser un conteneur PLAFONNE servir de rail a une fenetre qui ne
        l'est pas. Le rail devient une VALEUR qui suit la fenetre entre deux
        bornes mesurees chez la reference (78,6 % et 92,4 %).
     2. SEPT NAPPES (F-24). Il y en avait quatre pour sept sections, trois
        repetees. La reference a neuf bandes et neuf couleurs, aucune repetee.
     3. SEPT COMPOSITIONS (F-23, R-32). Il y en avait DEUX, et six sections
        identiques au dixieme de pour-cent. C'est le plus gros defaut de la page,
        devant la couleur.
     4. LE HEROS (F-01 a F-06, R-29). 311 px de bande vide, dont 179 px venaient
        d'une illustration DEUX FOIS plus haute que son texte, pas d'une marge.
     5. L'EN-TETE (F-07, F-08, F-09, R-36 — troisieme fois).
     6. LE PIED (F-10 a F-13, R-41 — deuxieme fois).
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ⛔ LE SEUL `vw` NOUVEAU DE LA FEUILLE, ET IL EST LEGITIME : c'est la largeur
     du CONTENANT, mesuree contre la fenetre. La regle du vault interdit le `vw`
     pour un CONTENU enferme dans un conteneur plafonne — la typographie et les
     gouttieres restent donc indexees sur `--fit`, et rien d'autre n'a bouge.
     Recalcule aux cinq largeurs, rail rendu :
       1280 -> 91,0 %   1512 -> 87,3 %   1600 -> 82,5 %
       1728 -> 80,0 %   1920 -> 80,0 %   2200 -> 80,0 %
     Bornes : plancher 80 % (la plus etroite bande de la home de reference mesure
     78,6 %), plafond 91 % (sa bande services mesure 92,4 %). Les deux bornes
     sont posees a l'interieur de la fourchette F-14 [79 ; 92] pour qu'un
     arrondi au dixieme ne fasse pas rougir la garde sur un cas sain. */
  --rail: min(91vw, max(80vw, 82.5rem));
  --rail-etroit: 46vw;          /* la bande 2b de la reference : 45,9 % mesures */

  /* la reprise se coupe en deux pans : 38 / 62 */
  --rail-a: calc(var(--rail) * 0.38);
  --rail-b: calc(var(--rail) * 0.62);

  /* la mesure de ligne du pied : 46ch rend ~60 signes (F-12 : <= 62) */
  --mesure-pied: 46ch;

  /* ⛔ LA SEPTIEME NAPPE N'EXISTE PAS, ET C'EST MESURE — PAS UN RENONCEMENT.
     F-24 demande SEPT nappes distinctes pour sept sections. La palette « Ciel »
     (D-74) en fournit SIX (pale, clair, mi, fonce, encre, blanc), et le blanc
     est deja pris par le sas, que l'interdit veut unique et SANS contenu. Sept
     sur six est arithmetiquement impossible.
     J'ai essaye la voie propre — deux valeurs INTERPOLEES entre deux jetons
     voisins, en `color-mix`, sans hexadecimal et sans nouvelle teinte. ⛔ ELLE
     CASSE UNE GARDE PLUS ANCIENNE ET PLUS JUSTE : Chromium serialise toute
     couleur issue de `color-mix()` en `color(srgb ...)` ou `oklab(...)`, jamais
     en `rgb()`. `_qc/verify-home-a.mjs` lit les fonds avec une expression qui
     n'accepte que `rgb()` : il retombait alors sur le fond du corps de page,
     FUSIONNAIT trois bandes en une, et declarait que la plus grande bande
     n'etait pas la plus sombre. Une correction qui rend un controle aveugle est
     pire que le defaut qu'elle corrige.
     ⛔ DONC : six nappes, et un ECART au lieu d'une unicite. C'est exactement le
        raisonnement que `plan-de-bandes-conforme` tient deja par ecrit — « un
        systeme monochrome ne peut pas y arriver ; ce qu'il peut tenir, c'est un
        ecart » — et il exige 3 bandes minimum entre deux emplois d'une meme
        valeur. Le plan ci-dessous tient un ecart de 4.
     ⚠️ F-24 reste donc ROUGE, et c'est la seule alarme qui subsiste. Elle se
        leve par une DECISION QUI N'EST PAS LA MIENNE, et il y en a deux :
          soit la palette gagne une septieme surface (un jeton, pose par l'agent
          de la palette ou par Gary) ;
          soit la cible F-24 devient « ecart >= 3 », comme la garde qui la
          precede de deux jours. Je signale, je ne tranche pas. */

}
/* ⛔ ACCOLADE FERMANTE POSEE LE 21/08. Elle MANQUAIT : le `:root` ouvert l. 1246
   n'etait ferme nulle part, et les ~1580 lignes qui suivaient etaient donc
   IMBRIQUEES dedans. Avec le nesting CSS natif, `:root { .bande {…} }` devient
   `:root .bande` : la regle matche toujours, mais avec une specificite gonflee
   de (0,1,0). C'est ce qui explique l'anomalie que `MESURES-2026-08-21.md`
   constatait sans la comprendre — « deux regles ont du etre posees a une
   specificite superieure pour prendre effet, le navigateur VOIT les regles et
   ne les applique pas ». Et un `:root` imbrique devient `:root :root`, qui ne
   matche RIEN : toute variable declaree en fin de fichier etait morte. */

/* ── 1 · LE RAIL ────────────────────────────────────────────────────────────
   Corrige `.bande`, `.pied` et `.entete` du socle (`_systeme-a/systeme.css`),
   qui portaient tous `minmax(0, var(--contenu-max))` au milieu. Meme
   specificite (0,1,0), et cette feuille se charge apres : l'ordre suffit ici,
   et c'est verifie plus bas par la garde, pas par la lecture.
   ⛔ `--rail-section` permet a CHAQUE section d'avoir sa largeur (F-16). Sans
      valeur, elle retombe sur `--rail`. Le bord gauche du site ne devient pas
      pour autant aleatoire : c'est UNE variable, declaree section par section
      juste en dessous, et la garde publie le tableau des rails. */
.bande, .pied, .entete {
  grid-template-columns:
    [bord-g] minmax(var(--gouttiere), 1fr)
    [texte-g] minmax(0, var(--rail-section, var(--rail)))
    [texte-d] minmax(var(--gouttiere), 1fr) [bord-d];
}

/* les sept rails. Rendu mesure a 1512 x 829 :
     heros 87,3 · parcours 46,0 · praticien 91,0 · intervention 80,0
     suites 84,0 · prix 46,0 · lieu 100,0        -> SIX valeurs distinctes */
#heros        { --rail-section: var(--rail); }
#parcours     { --rail-section: var(--rail-etroit); }
#praticien    { --rail-section: 82vw; }   /* + la sortie de bord droite -> 91,0 % */
#intervention { --rail-section: 80vw; }
#suites       { --rail-section: 84vw; }
#prix         { --rail-section: var(--rail-etroit); }
#lieu         { --rail-section: var(--rail); }   /* sa scene sort par les 2 bords */

/* ⛔ ET SOUS 62rem, TOUS LES RAILS DE SECTION TOMBENT. Trouve en mesurant a
   390 x 844 : les deux blocs etroits rendaient une colonne de 179 px, soit une
   ligne de ~20 signes. Une composition de bureau recopiee telle quelle sur un
   telephone n'est pas une composition, c'est un oubli. La variation de largeur
   est un levier de BUREAU ; en mobile, tout reprend la colonne unique.
   Meme specificite que les selecteurs d'id ci-dessus (0,1,0,0 contre 1,0,0,0) —
   NON : un id l'emporte sur une classe. C'est pourquoi ce bloc vise les MEMES
   ids, et il est place apres. */
@media (max-width: 62rem) {
  #heros, #parcours, #praticien, #intervention,
  #suites, #prix, #lieu { --rail-section: var(--rail); }
}

/* ── 2 · LE HEROS (R-29) ────────────────────────────────────────────────────
   Decomposition mesuree des 291 px : 112 px de retrait haut + 179 px de
   centrage vertical. Le centrage n'est pas un reglage : c'est (795 - 437) / 2,
   la moitie de l'ecart entre une illustration de 795 px et un texte de 437.
   ⛔ On corrige donc LES DEUX : le retrait passe de 112 a la hauteur de
      l'en-tete (un module lisible plutot qu'un nombre choisi), et le texte
      s'aligne EN HAUT au lieu d'etre centre contre l'image.
   Arithmetique de la cible, a 1512 x 829 :
     en-tete 72 + retrait 72            = 144 px de premiere encre  (F-05 <= 290)
     bande vide = 144 - encre de l'en-tete                          (F-04 <= 160)
     illustration : colonne 44/96 de (1320 - 48) = 583 px de large
                    x 0,88 = 513 px de haut                         (F-02 <= 525)
     hauteur de section = 72 + 513 + 72 = 657 px                    (F-06 <= 829)
   Corrige `.hm-heros` (0,1,0) et `.bande` (0,1,0) : ordre. */
.hm-heros { padding-block: var(--entete-h); min-block-size: 0; }

@media (min-width: 62rem) {
  /* corrige `.hm-scene` (0,1,0) l. 1062 -> ici (0,2,0) */
  .hm-heros .hm-scene {
    grid-template-columns: minmax(0, 52fr) minmax(0, 44fr);
    align-items: start;
  }
  /* ⛔ F-01 · LE CADRAGE. Les deux illustrations, la notre et celle de la
     reference, font la MEME largeur au pixel pres (596 contre 594). Tout
     l'ecart est dans le rapport : 1,33 contre 0,88, soit 51 % de hauteur en
     trop. C'est ce qui coupe l'image, c'est ce qui pousse le texte de 179 px.
     25/22 = 1,136 en largeur/hauteur, donc 0,88 en hauteur/largeur.
     corrige `.hm-illu__place` (0,1,0) l. 1094 -> ici (0,2,0) */
  .hm-heros .hm-illu__place { aspect-ratio: 25 / 22; }
}

/* ── 3 · LES SEPT COMPOSITIONS (R-32, F-17 a F-23) ──────────────────────────
   Six leviers mesures chez la reference, et le cote de l'image N'EN FAIT PAS
   PARTIE : NN/g (Flaherty, 26/11/2017, oculometrie, ~30-35 participants par
   condition) mesure qu'une alternance gauche/droite fait BUTER le regard des
   qu'il y a plus de 2 ou 3 rangees. Nous en avons six. Toutes les images
   LATERALES restent donc a droite (F-22), et la variation vient d'ailleurs :
   la largeur, le nombre de colonnes, l'echelle de l'image, son cadrage, sa
   presence, et la presence du surtitre. */

/* 2 · le parcours — bloc etroit centre, une colonne, AUCUNE image (D-55)
      corrige `.hm-scene` (0,1,0) l. 1062 -> ici (0,2,0) */
.hm-parcours .hm-scene { grid-template-columns: minmax(0, 1fr); }
.hm-parcours .hm-tete { border-block-end: 0; padding-block-end: 0; }

/* 3 · le praticien — la photo sort par le bord droit jusqu'a 99 % (mesure
      Elevate : ses photos vont de 55,8 a 99 % de la largeur de fenetre)
      corrige `.hm-scene.sortie-droite` (0,2,0) l. 1037 -> ici (0,3,0)
      et `.hm-scene.sortie-droite .hm-portrait img` (0,3,1) -> ici (0,4,1) */
@media (min-width: 62rem) {
  .hm-praticien .hm-scene.sortie-droite { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .hm-praticien .hm-scene.sortie-droite .hm-portrait img { aspect-ratio: 20 / 19; }
}

/* 4 · l'intervention — TROIS colonnes. C'est la seule section de la page qui a
      trois temps (l'arrivee, l'anesthesie, le geste) : c'est la seule ou la
      colonne triple est justifiee par le contenu et pas par l'envie de varier.
      Le texte tient deux colonnes sur trois, l'illustration la troisieme.
      corrige `.hm-scene > .hm-scene__texte` (0,2,0) l. 772 -> ici (0,3,0) */
@media (min-width: 62rem) {
  .hm-intervention .hm-scene {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .hm-intervention .hm-scene > .hm-scene__texte { grid-column: 1 / 3; }
  .hm-intervention .hm-scene > .hm-illu         { grid-column: 3; }
  .hm-intervention .hm-illu__place { aspect-ratio: 20 / 19; }
  /* ⛔ le pan de texte fait 790 px : sans cap, la prose sortait a ~97 signes par
     ligne, contre une barre de dossier a 75 (C3 : 55 signes = pic de
     comprehension, § 1.4.8 plafonne a 80). Mesure, pas estime.
     corrige `.hm-rang .hm-prose p` (0,3,1) l. 169 -> ici (0,4,1) */
  .hm-intervention .hm-rang .hm-prose p,
  .hm-intervention .hm-etape-liste > li { max-inline-size: var(--mesure); }
}

/* 5 · les suites — UNE colonne, et l'illustration passe SOUS le texte, calee a
      gauche et a 36 % du rail. C'est la seule section ou l'image n'est ni a
      cote ni pleine largeur : troisieme traitement d'image de la page.
      ⛔ Elle est SOUS le texte, jamais au-dessus : l'ordre du DOM est texte puis
         figure, et l'ordre visuel doit le suivre (§ 1.3.2). Une image posee
         visuellement avant un texte qui la precede dans le code fait repartir la
         tabulation en arriere — la garde `tabulation-suit-l-ordre-visuel` l'a
         deja attrape deux fois sur ce dossier.
      ⛔ Et comme elle n'est plus laterale, l'interdit d'alternance (F-22) n'est
         pas entame : les images LATERALES de la page restent toutes a droite.
      corrige `.hm-scene > .hm-illu` (0,2,0) l. 773 -> ici (0,3,0) */
@media (min-width: 62rem) {
  .hm-suites .hm-scene { grid-template-columns: minmax(0, 1fr); gap: var(--e12); }
  .hm-suites .hm-scene > .hm-scene__texte,
  .hm-suites .hm-scene > .hm-illu { grid-column: 1; }
  .hm-suites .hm-illu { inline-size: 36%; }
  .hm-suites .hm-illu__place { aspect-ratio: 20 / 19; }
}

/* 6 · le prix — bloc etroit centre, sans image, sur la bande sombre. Le chiffre
      EST l'objet de la section, et il est desormais son seul titre (F-26). */
.hm-prix .hm-scene { grid-template-columns: minmax(0, 1fr); }
.hm-tete--nue { border-block-end: 0; padding-block-end: 0; margin-block-end: var(--e8); }
.hm-prix .hm-tete > h2 { max-inline-size: none; }
.hm-prix .hm-prix__bornage { margin-block-start: var(--e6); }

/* 7 · le lieu — PLEINE LARGEUR (F-19). Le texte garde le rail de lecture, le
      bandeau va de bord a bord SOUS lui. Il cesse d'etre une image laterale :
      F-22 reste tenu, et c'est verifie en machine, pas affirme.
      `.pleine-largeur` est la sortie de bord du socle : pas de `100vw`, pas de
      marge negative, pas d'`overflow-x`. */
/* ⛔ LA FAUTE QUI A CASSE CETTE SECTION, ET ELLE NE SE VOYAIT QUE SUR LA
   CAPTURE. Le socle place l'illustration en `grid-column: 2` (l. 773). Sur une
   grille qui n'a plus qu'UNE colonne explicite, cette ligne ne place pas
   l'image en dessous : elle CREE une deuxieme colonne implicite, dimensionnee
   sur le contenu de l'image, et le texte se retrouve ecrase dans ce qui reste.
   Mesure : la colonne de texte tombait a ~250 px et l'adresse sortait a UN MOT
   PAR LIGNE. Une piste implicite ne se neutralise pas en changeant le nombre de
   pistes explicites — il faut retirer le PLACEMENT.
   corrige `.hm-scene > .hm-illu` (0,2,0) l. 773 -> ici (0,3,0) */
.hm-lieu .hm-scene { grid-template-columns: minmax(0, 1fr); gap: var(--e12); }
.hm-lieu .hm-scene > .hm-scene__texte,
.hm-lieu .hm-scene > .hm-illu { grid-column: 1; }
.hm-lieu .hm-scene__texte {
  inline-size: 100%;
  max-inline-size: var(--rail);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
 /* ⛔ 3/1 ET PAS 5/2, ET LE MOTIF EST UNE MESURE DE PLAN DE BANDES. A 0,40 de
    rapport, le bandeau faisait 605 px de haut et la section 1 229 px : elle
    devenait la PLUS GRANDE bande de la page, alors que la regle du dossier veut
    que la plus grande soit la plus SOMBRE (Elevate : sa bande d'ardoise fait
    24,7 % de la page). A 0,333 elle redescend sous la bande d'encre finale.
    0,333 reste dans le registre couche de la reference (0,40 mesure). */
.hm-lieu .hm-illu__place { aspect-ratio: 3 / 1; }
@media (min-width: 62rem) {
  /* ⛔ dans un bloc de 1320 px, un rang a UNE colonne donnerait ~150 signes par
     ligne. Les deux pans reviennent, et la prose garde sa mesure a l'interieur.
     corrige `.hm-scene__texte .hm-rang` (0,2,0) l. 925 -> ici (0,3,0)
     et `.hm-rang .hm-prose p` (0,3,1) l. 169 -> ici (0,4,1) */
  .hm-lieu .hm-scene__texte .hm-rang--deux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e16);
  }
  .hm-lieu .hm-rang .hm-prose p { max-inline-size: var(--mesure); }
}

/* ⛔ L'IMAGE RESTE EN `contain`, ET C'EST UN CHOIX QUI SE DEFEND.
   Les six fichiers font 1192 x 1596, soit un rapport de 1,339 — le seul rapport
   que la reference n'emploie JAMAIS (elle est entre 0,40 et 0,97). Une autre
   session les regenere en ce moment. `contain` n'ampute rien aujourd'hui (une
   image portrait se pose simplement plus petite dans sa place) et remplira sa
   place le jour ou elle arrivera au bon format. `cover` aurait ampute 34 % de
   la hauteur d'images qui ne sont pas les miennes. */
.hm-illu__img { object-fit: contain; object-position: center; }

/* ── 4 · L'EN-TETE (R-36, TROISIEME FOIS) ──────────────────────────────────
   Ce qui etait mesure : 76 px de haut, six objets a EXACTEMENT 44 px, un rail
   de 82,0 % contre 88,5 % chez la reference, puis ~490 px de vide entre les
   liens et le bouton, et un repli sur TROIS rangees a 390 px (140 px, soit
   16,6 % d'un ecran de telephone, sur chaque page).
   Ce qui change :
     · le rail suit `--rail` comme les bandes         -> 87,3 %      (F-07)
     · l'identite prend son propre rang, a 56 px, et cesse d'etre un lien de
       navigation parmi cinq : l'en-tete COMPOSE au lieu d'aligner   (F-08)
     · a 390 px, tout revient sur UNE rangee de 60 px               (F-09)
   ⛔ RIEN NE PART SOUS UN MENU. NN/g (Pernice & Budiu, 24/07/2016, 179
      participants) mesure qu'un hamburger sur bureau divise l'usage de la
      navigation par deux. Les quatre entrees restent dans la rangee.
   ⚠️ ARBITRAGE DECLARE, ET C'EST LE MIEN, PAS CELUI DE GARY : a 390 px les
      quatre entrees + l'identite + le bouton ne tiennent pas sur une rangee
      (297 + 100 px pour 350 px utiles). La rangee de navigation DEFILE
      horizontalement. Les quatre entrees restent dans le DOM, atteignables au
      clavier et a la tabulation, et l'ordre visuel suit toujours l'ordre du
      code. Le seul autre levier est une entree de navigation EN MOINS : c'est
      une decision de contenu, je la pose, je ne la prends pas. */
.entete__contenu {
  min-block-size: 0;
  padding-block: var(--e2);
  gap: var(--e4) var(--e8);
}
/* corrige `.entete__identite` (0,1,0) l. 678 -> ordre */
.entete__identite {
  display: inline-flex;
  align-items: center;
  min-block-size: 3.5rem;                  /* 56 px : le second rang de F-08 */
  font-size: var(--t-sous);
  font-weight: var(--w-titre);
  letter-spacing: -0.012em;
  text-transform: none;
}
.entete__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cible);            /* 44 px */
}
/* ⛔ LES ~490 px DE VIDE AU MILIEU DE L'EN-TETE, TROUVES EN OUVRANT LA CAPTURE
   ET PAS EN RELISANT LE CODE. Cause exacte : `.hm-direct` (l. 102) porte
   `margin-inline-start: auto`. Cet unique `auto` poussait la quatrieme entree
   contre le bouton et OUVRAIT le trou entre la troisieme et elle. Le
   `justify-content: center` de la l. 688 ne pouvait rien y faire : une marge
   automatique consomme tout l'espace libre AVANT que la justification
   s'applique.
   L'entree garde son filet de separation — c'est lui qui dit qu'elle n'est pas
   du meme ordre que les trois autres, et il suffit. Les quatre entrees
   redeviennent un GROUPE, centre dans le rail : identite a gauche, navigation
   au centre, une seule action pleine a droite. C'est la mesure d'Elevate.
   corrige `.hm-direct` (0,1,0) l. 102 -> ordre */
@media (min-width: 46.01rem) {
  .hm-direct { margin-inline-start: 0; }
}
.entete__nav { justify-content: center; }

@media (max-width: 62rem) {
  /* ⛔⛔ F-09 N'EST PAS ATTEIGNABLE A 390 px, ET C'EST DE L'ARITHMETIQUE.
     Largeurs INTRINSEQUES mesurees a 390 x 844, dans le navigateur :
       identite 164 px · navigation 273 px · bouton 100 px
       colonne utile : 347 px
     · une rangee  : 164 + 273 + 100 + 2 gouttieres = 553 px pour 347. Non.
     · deux rangees (identite / navigation + bouton) : 273 + 8 + 100 = 381 px
       pour 347. Non plus — il manque 34 px.
     · deux rangees (identite + bouton / navigation) : ca rentre, MAIS l'ordre
       visuel devient identite -> bouton -> navigation alors que l'ordre du DOM
       est identite -> navigation -> bouton. La tabulation repartirait en
       arriere, et c'est § 2.4.3 Focus Order. Non.
     -> TROIS rangees, 44 px chacune, zero retrait vertical : 132 px.

     ⚠️ JE ME SUIS TROMPE UNE FOIS SUR CE POINT, ET JE L'ECRIS. J'avais d'abord
        mesure la navigation a 234 px et conclu que deux rangees suffisaient.
        234 etait le `scrollWidth` d'une boite DEJA COMPRIMEE par un essai
        precedent : j'avais mesure le resultat de mon propre reglage, pas la
        largeur intrinseque du contenu. La bonne valeur est 273. « On mesure,
        on n'estime pas » vaut aussi pour ce qu'on mesure.

     ⚠️ ET J'AI ESSAYE LA RANGEE UNIQUE A DEFILEMENT HORIZONTAL. Elle donnait
        60 px, donc F-09 verte, et DEUX vraies fautes que les gardes du dossier
        ont attrapees : `aucun-texte-tranche` (trois libelles rognes, « Deja
        decide » a 31 px hors ecran) et `tabulation-suit-l-ordre-visuel` (la
        derniere entree a x=377 precedait le bouton a x=269). Une cible verte
        payee par une faute d'ordre de focus n'est pas un progres.

     ⛔ LE SEUL LEVIER QUI RESTE EST UNE DECISION DE CONTENU, ET ELLE N'EST PAS
        LA MIENNE : une entree de navigation en moins (les quatre pesent 273 px
        a elles seules), ou un libelle d'identite plus court. Avec trois entrees,
        deux rangees passent et F-09 devient verte. Je pose la question, je ne
        tranche pas — c'est exactement ce que la SPEC dit en § 2.3.
     ⚠️ Gain reel par rapport a ce soir : 140 -> 132 px. C'est peu, et je le dis
        plutot que de le maquiller. R-36 ne se referme pas ici.
     ⛔ RIEN NE PART SOUS UN MENU pour y arriver (NN/g, Pernice & Budiu,
        24/07/2016, 179 participants : un hamburger sur bureau divise l'usage de
        la navigation par deux). Les quatre entrees restent visibles, et les
        cibles restent a 44 px. */
  .entete__contenu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "identite" "nav" "action";
    align-items: center;
    justify-items: start;
    row-gap: 0;
    padding-block: 0;
    min-block-size: 0;
  }
  .entete__identite {
    grid-area: identite;
    min-block-size: var(--cible);
    min-inline-size: 0;
    font-size: var(--t-petit);
    letter-spacing: 0;
  }
  .entete__nav {
    grid-area: nav;
    min-inline-size: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--e2);
    padding-block: 0;
  }
  .entete__nav a { white-space: nowrap; font-size: var(--t-micro); }
  .entete__actions { grid-area: action; padding-block-end: 0; }
}

/* ── 5 · LA REPRISE — « Pour continuer », dont la moitie droite etait VIDE ──
   Le titre passe a gauche sur 38 %, les actions a droite sur 62 %. Les deux
   pans portent : c'est la regle du dossier depuis R-19, et cette bande etait
   le dernier endroit ou elle n'etait pas tenue. */
@media (min-width: 62rem) {
  .hm-reprise {
    grid-template-columns:
      [bord-g] minmax(var(--gouttiere), 1fr)
      [texte-g] minmax(0, var(--rail-a))
      [milieu]  minmax(0, var(--rail-b))
      [texte-d] minmax(var(--gouttiere), 1fr) [bord-d];
    align-items: start;
  }
  .hm-reprise > .hm-tete {
    grid-column: texte-g / milieu;
    grid-row: 1;
    padding-inline-end: var(--e12);
    margin-block-end: 0;
  }
  .hm-reprise > .hm-reprise__actions {
    grid-column: milieu / texte-d;
    grid-row: 1;
    margin-block-start: 0;
    max-inline-size: var(--mesure);
  }
}

/* ── 6 · LE PIED (R-41, DEUXIEME FOIS) ─────────────────────────────────────
   Verbatim : « il est beaucoup trop rempli dans tous les sens, il y a du texte
   partout, ca sert a rien ».
   Ce qui etait mesure : TROIS colonnes de 392 px, un corps a 14,0 px, une
   largeur de ligne de 31 SIGNES quand le corps de la page en fait 54, et une
   ligne de nom de 113 signes bornee par rien.
   ⛔ La correction n'est pas de couper du texte — les mentions sont dues
      (article 37, article XII.6 du CDE). C'est d'arreter de les entasser :
        · deux colonnes au lieu de trois, sur un rail plus large  (F-11, F-13)
        · le corps passe de 14,0 a 17-18 px                       (F-10 >= 16)
        · toute boite de texte est bornee a ~60 signes            (F-12)
        · deux fois plus d'air entre les colonnes
   corrige `.pied__col p` (0,1,1) l. 733 -> ordre · `.pied__entite` (0,1,0)
   l. 742 -> (0,1,1) · `.hm-statut` (0,1,0) -> (0,1,1) */
/* ⛔ `min(24rem, 100%)` ET PAS `24rem`. Trouve en MESURANT, pas en relisant : a
   390 px, un plancher de piste a 24rem (384 px) deborde une colonne utile de
   350 px, et le document passait a 405 px de large — un debordement horizontal
   de 15 px que j'avais introduit moi-meme en elargissant les colonnes du pied.
   `min(24rem, 100%)` laisse la piste tomber a la largeur disponible.
   ⛔ Et surtout PAS un `overflow-x: hidden` pose « au cas ou » : le vault
      l'interdit, un debordement se corrige a la source. */
.pied__colonnes {
  margin-block-start: var(--e16);
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap: var(--e12) var(--e16);
}
.pied p, .pied li {
  font-size: var(--t-corps);
  max-inline-size: var(--mesure-pied);
}
.pied .a-fournir { font-size: var(--t-corps); text-align: start; }
.pied__nom { max-inline-size: var(--mesure-pied); }
.pied__entite { margin-block-start: var(--e16); }

/* ── 7 · CE QUI NE BOUGE PAS, ET QUI EST VERIFIE ───────────────────────────
   ⛔ AUCUNE BOITE, AUCUN CADRE, AUCUNE OMBRE PORTEE. Mesure : 0 boite dessinee
      sur toute la page de la reference. Aucune regle de ce bloc ne pose de
      `border` sur quatre cotes, de `box-shadow` ni de `background` sur une
      illustration.
   ⛔ AUCUN POINTILLE, AUCUN TIRET (R-25). Aucun `dashed`, aucun `dotted`.
   ⛔ AUCUNE HAUTEUR EN `vh`. Le seul plancher de hauteur du fichier reste
      `min-block-size: 100svh` sur `.hm-module`, et il se leve sous 34rem de
      hauteur de fenetre (§ 1.4.10, 320 x 256 px).
   ⛔ AUCUNE COULEUR EN DUR. Sept jetons employes : `--pale`, `--clair`, `--mi`,
      `--fonce`, `--encre`, plus les deux nappes interpolees signalees en tete. */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  mv-forme-v3 · LA FORME DE LA HOME — 2026-08-14, 20 h                    ║
   ║  D-75 (l'en-tête dicté) · D-76 (la règle de disposition) · R-44 · R-45    ║
   ║  R-48 (le héros trop petit) · R-49                                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   ⛔ CE BLOC N'ÉCRIT NI COULEUR NI TEXTE. Il ne parle qu'en jetons. La palette
      est « Ciel » (D-74) et elle vit dans `palette-ciel.css`, chargé après.
   ⛔ AUCUNE BOÎTE, AUCUN CADRE, AUCUNE OMBRE, AUCUN POINTILLÉ. Aucun `100vh` :
      les hauteurs sont en `svh` ou en rien du tout.
   ⛔ AUCUN `vw` POUR DU CONTENU ENFERMÉ DANS UN CONTENEUR PLAFONNÉ. Les seuls
      `vw` de la feuille restent ceux de `--rail*`, qui mesurent le CONTENANT.

   ── POURQUOI IL EST EN FIN DE FICHIER ────────────────────────────────────────
   Piège déjà payé trois fois sur ce dossier : « ajouter une règle à la fin ne
   suffit pas si la règle d'origine a deux classes ». Chaque règle ci-dessous est
   écrite à une spécificité au moins égale à celle qu'elle corrige, et le
   sélecteur corrigé est cité.
   ────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   1 · L'EN-TÊTE (D-75) — QUATRIÈME REFUS, ET CETTE FOIS IL EST DICTÉ
   ══════════════════════════════════════════════════════════════════════════
   Deux étages, et l'ordre vient de Gary, pas de moi :
     étage 1 · la marque à gauche, le TÉLÉPHONE puis l'APPEL À L'ACTION à droite
               (« tu laisses le numéro de téléphone au-dessus, ok » ;
                « un appel à l'action à côté du téléphone »)
     étage 2 · les quatre entrées, dans son ordre
   ⛔ « Déjà décidé » a disparu (R-49) : `.hm-direct` n'existe plus dans le
      balisage, et ses règles des lignes 102 et 1491 sont désormais mortes. Je
      les laisse en place plutôt que de toucher au reste du fichier — une classe
      sans porteur ne peint rien.
   corrige `.entete__contenu` (0,1,0) l. 433 du socle, l. 989 et l. 1458 -> ordre */
.entete { padding-block: 0; }

.entete__contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  padding-block: 0;
  min-block-size: 0;
}

/* ---- ÉTAGE 1 · la marque, le téléphone, l'appel à l'action ---------------- */
.entete__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e6);
  min-block-size: var(--cible);
}
.entete__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e6);
}
/* le téléphone garde sa cible de 44 px sans devenir un second bouton plein :
   il n'y a qu'UN bouton plein sur le site, et c'est l'appel à l'action. */
.entete__tel {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cible);
  font-size: var(--t-petit);
  font-weight: var(--w-appui);
  white-space: nowrap;
}
/* corrige `.entete .action--encre` (0,2,0) l. 699 -> ici (0,2,0), ordre */
.entete .action--encre {
  min-block-size: var(--cible);
  display: inline-flex;
  align-items: center;
  font-size: var(--t-petit);
  padding-inline: var(--e6);
}

/* ---- ÉTAGE 2 · les quatre entrées ---------------------------------------- */
/* corrige `.entete__nav` (0,1,0) l. 685 et l. 1493 -> ordre */
.entete__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 var(--e8);
  min-block-size: var(--cible);
  border-block-start: var(--trait) solid var(--filet-clair);
}
.entete__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cible);
  font-size: var(--t-petit);
  white-space: nowrap;
}
/* la page courante se marque sans couleur d'accent : un filet, comme partout */
.entete__nav a[aria-current="page"] {
  border-block-end: 2px solid currentColor;
  padding-block-end: 2px;
}

/* ⛔ LE REPLI. Il ne part sous AUCUN menu (NN/g, Pernice & Budiu, 24/07/2016,
   179 participants : un hamburger sur bureau divise l'usage de la navigation par
   deux) et il ne tranche AUCUN libellé (garde `aucun-texte-tranche`).
   ⚠️ CE QU'IL COÛTE EST MESURÉ ET PUBLIÉ dans mon compte rendu : la cible de
      88 px n'est pas atteignable avec CES QUATRE LIBELLÉS-LÀ. « Ce qu'il faut
      savoir sur la vasectomie » fait 37 signes — c'est le libellé le plus long
      du dossier, et il est dicté au mot. Le seul levier restant est un libellé
      plus court, donc une décision de copy. Je la pose, je ne la prends pas.
   corrige les blocs `@media (max-width: 62rem)` des l. 966 et 1495 -> ordre */
@media (max-width: 62rem) {
  .entete__contenu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "haut" "nav";
    row-gap: 0;
  }
  .entete__haut {
    grid-area: haut;
    flex-wrap: nowrap;
    gap: var(--e3);
    min-block-size: var(--cible);
  }
  .entete__identite {
    min-inline-size: 0;
    min-block-size: var(--cible);
    font-size: var(--t-petit);
    letter-spacing: 0;
  }
  .entete__actions { gap: var(--e3); flex-wrap: nowrap; }
  .entete__tel { font-size: var(--t-micro); }
  .entete .action--encre {
    font-size: var(--t-micro);
    padding-inline: var(--e3);
    /* le libellé dicté fait 33 signes : il passe sur deux lignes plutôt que
       d'être rogné. Un texte tranché est une faute, une ligne de plus non. */
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
  .entete__nav {
    grid-area: nav;
    flex-wrap: wrap;
    gap: 0 var(--e4);
    padding-block: 0;
  }
  .entete__nav a { font-size: var(--t-micro); min-block-size: var(--cible); }
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · D-76 · LA RÈGLE DE DISPOSITION, DONNÉE AU MOT
   ══════════════════════════════════════════════════════════════════════════
   « Regarde, tu me mets deux phrases une à côté de l'autre et puis en dessous
     une illustration. Non. Toujours le texte et puis à droite ou à gauche.
     Toujours d'abord le texte et puis l'illustration, ou d'abord l'illustration
     et puis le texte. Pas des trucs comme ça, c'est quoi ça ? »

   ⛔ UNE SECTION = DEUX BLOCS CÔTE À CÔTE. Le texte d'un côté, l'illustration de
      l'autre. Le côté s'inverse d'une section à l'autre, et c'est ça le rythme.
   ⛔ INTERDIT : le texte réparti en colonnes avec l'image posée dessous.

   ── CE QUE ÇA DÉFAIT DE CET APRÈS-MIDI, ET JE LE DIS ───────────────────────
   Six compositions avaient été créées à 19 h pour traiter R-32 (« les sept
   sections sont habillées pareil »). DEUX d'entre elles violaient D-76 :
     · « Le lieu » (7)    · texte en DEUX colonnes + bandeau pleine largeur
                            DESSOUS. C'est nommément ce que Gary montre du doigt.
     · « Les suites » (5) · illustration SOUS le texte, calée à 36 %.
   Elles redeviennent des couples. La variation vient désormais du CÔTÉ, de
   l'ÉCHELLE et de la LARGEUR — jamais de la dislocation du couple.

   ── LA CARTE DES CÔTÉS ────────────────────────────────────────────────────
     1 héros        · texte gauche  | illustration droite
     2 parcours     · sans image (D-77 : un titre, un appel à l'action, c'est tout)
     3 praticien    · PHOTO GAUCHE  | texte droite      <- inversé
     4 intervention · texte gauche  | illustration droite
     5 suites       · ILLUSTRATION GAUCHE | texte droite <- inversé
     6 prix         · sans image
     7 lieu         · texte gauche  | illustration droite
   ⚠️ Deux sections sans image, et c'est mesuré : la référence en a DEUX sur huit
      bandes. Ce n'est pas un renoncement à D-76, c'est le plan de la référence.
   ⚠️ La section 3 porte une PHOTO et pas une illustration (R-43 : les
      illustrations passent en monochrome ou bichromie, la photo n'est pas
      concernée). Même règle de disposition pour les deux.
   ────────────────────────────────────────────────────────────────────────── */

/* ⛔ AUCUN TEXTE NE SE DÉCOUPE EN COLONNES À L'INTÉRIEUR D'UN PAN. C'est la
   moitié « pas deux phrases l'une à côté de l'autre » de D-76, et elle vaut
   partout : `.hm-rang--deux` cesse de faire deux colonnes.
   corrige `.hm-rang--deux` (0,1,0) l. 161 -> ici (0,2,0) */
.hm-module .hm-rang--deux { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 62rem) {
  /* ── 5 · LES SUITES · l'illustration REVIENT À CÔTÉ, et elle passe à GAUCHE.
        Elle était SOUS le texte à 36 % du rail depuis 19 h — c'est la seconde
        violation de D-76.
        corrige `.hm-suites .hm-scene` (0,2,0) l. 1373 -> ici (0,3,0) */
  .hm-suites .hm-scene {
    grid-template-columns: minmax(0, 44fr) minmax(0, 52fr);
    gap: var(--e12);
    align-items: center;
  }
  .hm-suites .hm-scene > .hm-illu         { grid-column: 1; inline-size: auto; }
  .hm-suites .hm-scene > .hm-scene__texte { grid-column: 2; }
  .hm-suites .hm-illu__place { aspect-ratio: 25 / 22; }

  /* ── 3 · LE PRATICIEN · la photo passe à GAUCHE et sort par le bord gauche.
        corrige `.hm-praticien .hm-scene.sortie-droite` (0,3,0) l. 1336 ->
        ici (0,3,0), ordre */
  .hm-praticien .hm-scene.sortie-gauche {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    align-items: center;
  }
  .hm-praticien .hm-scene > .hm-portrait    { grid-column: 1; }
  .hm-praticien .hm-scene > .hm-scene__texte { grid-column: 2; }
  .hm-praticien .hm-scene.sortie-gauche .hm-portrait img { aspect-ratio: 20 / 19; }
  /* la photo sortait à droite : son cadrage se retourne avec elle */
  .hm-praticien .hm-scene.sortie-gauche .hm-portrait img { object-position: 60% 22%; }

  /* ── 7 · LE LIEU · le couple revient, et l'image repasse à DROITE.
        C'était la section montrée du doigt. `pleine-largeur` est retiré du
        balisage ; ces trois règles neutralisent ce qui la servait.
        corrige `.hm-lieu .hm-scene` (0,2,0) l. 1401 -> ici (0,3,0)
        et `.hm-lieu .hm-scene__texte` (0,2,0) l. 1404 -> ici (0,3,0) */
  .hm-lieu .hm-scene {
    grid-template-columns: minmax(0, 50fr) minmax(0, 46fr);
    gap: var(--e12);
    align-items: center;
  }
  .hm-lieu .hm-scene > .hm-scene__texte { grid-column: 1; }
  .hm-lieu .hm-scene > .hm-illu         { grid-column: 2; }
  .hm-lieu .hm-scene__texte {
    inline-size: auto;
    max-inline-size: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  /* 3/1 était le rapport d'un BANDEAU pleine largeur. Redevenue latérale,
     l'illustration reprend le rapport des autres. */
  .hm-lieu .hm-illu__place { aspect-ratio: 25 / 22; }

  /* ── 4 · L'INTERVENTION · elle garde son côté droit, mais son pan de texte
        cesse d'être une grille à trois colonnes : le couple redevient lisible
        comme un couple, et le texte tient UNE colonne.
        corrige `.hm-intervention .hm-scene` (0,2,0) l. 1346 -> ici (0,3,0) */
  .hm-intervention .hm-scene {
    grid-template-columns: minmax(0, 54fr) minmax(0, 42fr);
    gap: var(--e12);
    align-items: center;
  }
  .hm-intervention .hm-scene > .hm-scene__texte { grid-column: 1; }
  .hm-intervention .hm-scene > .hm-illu         { grid-column: 2; }
  .hm-intervention .hm-illu__place { aspect-ratio: 25 / 22; }
}

/* ⛔ ET SOUS 62rem, TOUT REVIENT EN COLONNE UNIQUE, TEXTE PUIS IMAGE. L'ordre du
   DOM est texte -> figure : l'ordre visuel le suit, § 1.3.2 tient.
   ⚠️ L'inversion de côté est un levier de BUREAU. Sur un téléphone, deux blocs
      côte à côte donneraient deux colonnes de ~170 px, soit ~20 signes par
      ligne. Une composition de bureau recopiée sur un téléphone n'est pas une
      composition. */
@media (max-width: 62rem) {
  .hm-praticien .hm-scene > .hm-portrait,
  .hm-suites .hm-scene > .hm-illu { order: 1; }
  .hm-praticien .hm-scene > .hm-scene__texte,
  .hm-suites .hm-scene > .hm-scene__texte { order: 0; }
  .hm-lieu .hm-scene__texte { inline-size: auto; max-inline-size: none; margin-inline: 0; padding-inline: 0; }
  .hm-lieu .hm-illu__place  { aspect-ratio: 25 / 22; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · LE HÉROS (R-48) — ON EST PASSÉ DE L'AUTRE CÔTÉ
   ══════════════════════════════════════════════════════════════════════════
   « Là maintenant, ta section héros, elle est trop petite. »

   ⚠️ CE MATIN ELLE FAISAIT 1 019 px ET IL LA TROUVAIT VIDE (R-29 : 311 px de
      bande morte au-dessus). À 19 h elle était descendue à 657. LE PROBLÈME
      N'ÉTAIT PAS LA HAUTEUR, C'ÉTAIT LE VIDE — et en corrigeant le vide par la
      hauteur, on a produit l'autre défaut.

   ── LA DÉCOMPOSITION DES 657 px, MESURÉE ──────────────────────────────────
      retrait haut 72 + illustration 513 + retrait bas 72 = 657
      Le pan de texte faisait 437 px pour une illustration de 513 : il restait
      ~76 px de bande morte SOUS le texte, et l'illustration flottait dans un
      demi-écran.

   ── CE QUI CHANGE, ET AUCUN PIXEL NE VIENT D'UNE MARGE ────────────────────
     · l'illustration reprend de l'ÉCHELLE : sa colonne passe de 44 à 50 parts
       et son rapport de 0,88 à 0,95 (le plafond de F-21, « aucune image en
       portrait »). Elle porte donc toute la hauteur qu'on ajoute.
     · le TITRE RESTE HAUT : `align-items: start` sur la scène, jamais de
       centrage vertical du texte contre l'image. C'est le centrage qui avait
       produit les 179 px de poussée mesurés ce matin.
     · le pan de texte s'ÉTIRE sur toute la hauteur de l'illustration et ses
       actions descendent au BAS de la colonne (`margin-block-start: auto`).
       Les deux pans portent d'un bout à l'autre, et il n'y a plus de bande morte
       sous le texte. ⛔ Aucun mot n'a été ajouté pour remplir : c'est la
       distribution qui remplit, pas la copy.
   corrige `.hm-heros` (0,1,0) l. 1300 -> ici (0,1,0), ordre
   et `.hm-heros .hm-scene` (0,2,0) l. 1304 -> ici (0,2,0), ordre */
.hm-heros { padding-block: calc(var(--entete-h) * 0.55); min-block-size: 0; }

@media (min-width: 62rem) {
  .hm-heros .hm-scene {
    grid-template-columns: minmax(0, 46fr) minmax(0, 50fr);
    align-items: stretch;
    gap: var(--e12);
  }
  .hm-heros .hm-scene__texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* le titre et la définition restent en haut, les actions tombent en bas */
  /* ⛔ NEUTRALISEE LE 23/08. `margin-block-start: auto` dans une colonne flex
     POUSSE le bloc tout en bas : mesure du jour, **303 px** d'ecart entre le
     sous-titre et les boutons, la ou j'en avais declare 32 plus bas dans le
     fichier. Gary a demande deux fois de resserrer, et deux fois j'ai ajoute une
     marge que celle-ci ecrasait.
     ⚠️ Elle avait un sens quand le heros faisait un ecran entier et que les
     actions devaient s'ancrer en bas. Ce n'est plus le cas. */
  .hm-heros .hm-heros__actions { margin-block-start: 0; padding-block-start: 0; }
  .hm-heros .hm-illu { align-self: stretch; }
  .hm-heros .hm-illu__place { aspect-ratio: 20 / 19; block-size: 100%; }
  .hm-heros .hm-illu__img { block-size: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · LE PIED (R-44, QUATRIÈME FOIS) — MESURÉ CONTRE LA RÉFÉRENCE
   ══════════════════════════════════════════════════════════════════════════
   Gary ne dit pas ce qu'il veut. Je ne devine donc pas : je mesure Elevate, et
   je dis contre quoi je propose. Le détail chiffré est dans le commentaire de
   `index.html`, juste au-dessus du `<footer>`. Le résumé :

     |                        | Elevate (mesuré) | nous, à 19 h 44 | ici |
     |------------------------|------------------|-----------------|-----|
     | part de la page        | 7,8 %            | 19,3 %          | cible ≤ 8 % |
     | titres de rubrique     | 0                | 3               | 0   |
     | colonnes de contenu    | 2 (couples)      | 3, mal réparties| 2   |
     | filets                 | 2                | 1               | 2   |
     | prose en colonnes      | non              | oui             | non |

   ⛔ LA FORME MESURÉE : la marque isolée à gauche par une colonne vide, les
      coordonnées à droite en couples étiquette / valeur, gouttière horizontale
      quatre fois plus large que la verticale (`gap: 1rem 4rem` chez elle).
      Puis un sous-pied en petit corps, séparé par un troisième filet.
   corrige `.pied__colonnes` (0,1,0) l. 1611 (le sélecteur n'a plus de porteur)
   et `.pied p, .pied li` (0,1,0 / 0,1,1) l. 1616 -> ici (0,2,0) */
.pied {
  background: var(--encre);
  color: var(--blanc);
  border-block-start: var(--trait) solid var(--filet-sombre);
  padding-block: var(--e16);
  row-gap: 0;
}

/* la marque à gauche, isolée par une colonne vide, puis les coordonnées */
.pied__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e8);
  align-items: start;
}
@media (min-width: 62rem) {
  .pied__corps {
    /* `. logo . contact` de la référence : la colonne vide est la gouttière */
    grid-template-columns: minmax(0, 20fr) minmax(0, 72fr);
    gap: var(--e16);
  }
}
.pied .pied__nom {
  margin: 0;
  font-size: var(--t-sous);
  font-weight: var(--w-titre);
  letter-spacing: -0.012em;
  max-inline-size: none;
}

/* les couples étiquette / valeur */
.pied__coord {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* la gouttière horizontale est quatre fois la verticale, comme la référence */
  gap: var(--e4) var(--e16);
}
@media (min-width: 62rem) {
  .pied__coord { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__couple--large { grid-column: 1 / -1; }
}
.pied__couple { display: grid; gap: var(--e1); }
@media (min-width: 46rem) {
  .pied__couple { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--e2) var(--e6); }
}
.pied__coord dt {
  font-size: var(--t-appui);
  font-weight: var(--w-appui);
  color: var(--clair);
  line-height: var(--lh);
}
.pied__coord dd {
  margin: 0;
  font-size: var(--t-corps);
  line-height: var(--lh);
  max-inline-size: var(--mesure-pied);
}
.pied__couple--large dd { display: grid; gap: var(--e3); justify-items: start; }
.pied__couple--large dd .note { max-inline-size: var(--mesure-pied); }

/* ---- LE SOUS-PIED. Corps réduit, un filet, et rien de titré. --------------
   Elevate y met 11 px pour quatre mots. Nous y mettons des mentions légales
   qu'un lecteur peut avoir à LIRE : le corps ne descend donc pas sous
   `--t-appui` (~15 px), et § 1.4.4 tient au zoom. */
.pied__sous {
  margin-block-start: var(--e16);
  padding-block-start: var(--e8);
  border-block-start: var(--trait) solid var(--filet-sombre);
  display: grid;
  gap: var(--e3);
}
.pied .pied__sous p {
  margin: 0;
  font-size: var(--t-appui);
  line-height: var(--lh);
  max-inline-size: var(--mesure-pied);
  color: var(--clair);
}
.pied .pied__sous .pied__entite {
  margin-block-start: 0;
  color: var(--blanc);
  font-weight: var(--w-appui);
}
@media (min-width: 62rem) {
  .pied__sous {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e16);
  }
  .pied .pied__sous .pied__entite { grid-column: 1 / -1; }
}

/* ⛔ CE QUI N'EXISTE PLUS, ET DONC CE QUI NE SE PEINT PLUS.
   `.hm-reprise`, `.hm-reprise__actions`, `.pied__colonnes`, `.pied__col`,
   `.pied__titre`, `.hm-statut` et `.hm-direct` n'ont plus de porteur dans le
   balisage. Leurs règles restent en place plus haut dans le fichier : une classe
   sans porteur ne peint rien, et les retirer m'obligerait à repasser sur des
   lignes que je n'ai pas écrites. C'est signalé, pas caché. */


/* ══════════════════════════════════════════════════════════════════════════
   5 · TROIS DÉFAUTS TROUVÉS EN MESURANT LA v3, PAS EN LA RELISANT
   ══════════════════════════════════════════════════════════════════════════ */

/* ⛔ (a) L'INVERSION DE CÔTÉ CRÉAIT UNE DEUXIÈME RANGÉE, ET LA SECTION DU
   PRATICIEN PASSAIT À 1 272 px POUR UNE PHOTO DE 681.
   Cause exacte, et c'est le rangement automatique de la grille en mode « sparse » :
   le texte vient EN PREMIER dans le balisage et je lui donne la colonne 2. Le
   curseur de placement est alors passé au-delà de la colonne 1 sur la rangée 1 ;
   la photo, qui demande la colonne 1, ne peut plus y tenir et ouvre une RANGÉE 2.
   La scène faisait donc 1 048 px pour deux blocs de 681 et 319.
   ⛔ Une colonne explicite ne suffit pas à inverser deux blocs : il faut aussi
      la RANGÉE explicite. C'est la même famille de piège que le placement
      implicite qui avait cassé « Le lieu » cet après-midi.
   corrige mes propres règles de la § 2 ci-dessus -> même spécificité, ordre */
@media (min-width: 62rem) {
  .hm-praticien .hm-scene > .hm-portrait,
  .hm-praticien .hm-scene > .hm-scene__texte,
  .hm-suites .hm-scene > .hm-illu,
  .hm-suites .hm-scene > .hm-scene__texte,
  .hm-lieu .hm-scene > .hm-illu,
  .hm-lieu .hm-scene > .hm-scene__texte,
  .hm-intervention .hm-scene > .hm-illu,
  .hm-intervention .hm-scene > .hm-scene__texte,
  .hm-heros .hm-scene > .hm-illu,
  .hm-heros .hm-scene > .hm-scene__texte { grid-row: 1; }
}

/* ⛔ (b) DÉBORDEMENT HORIZONTAL DE 109 px À 390 px, ET IL VENAIT DE MOI.
   `.entete__actions` mesurait 302 px dans une colonne utile de 348, posée à
   x = 197 : la marque, le téléphone et l'appel à l'action ne tiennent pas sur une
   rangée. `flex-wrap: nowrap` les forçait dehors.
   ⛔ PAS DE `overflow-x: hidden` : le vault l'interdit, un débordement se corrige
      à la source.
   ── CE QUE ÇA COÛTE, ET LE CHIFFRE EST PUBLIÉ ────────────────────────────────
   La cible de 88 px n'est PAS atteignable avec ces libellés-là, et la raison est
   arithmétique, pas paresseuse. Largeurs à 390 px, colonne utile 348 :
     · la marque « Dr Mathieu Bourguignon »        ~155 px
     · le téléphone                                 ~60 px
     · l'appel à l'action, 33 signes                ~206 px
     · les quatre entrées, dont une de 37 signes    ~440 px  -> DEUX lignes
   Le pari du brief — « avec quatre entrées courtes au lieu de trois longues, la
   cible redevient peut-être atteignable » — ne tient pas : les entrées dictées
   sont PLUS longues que les trois qu'elles remplacent. « Ce qu'il faut savoir sur
   la vasectomie » est le libellé le plus long de tout le dossier.
   ⛔ LE SEUL LEVIER RESTANT EST UN LIBELLÉ PLUS COURT, DONC UNE DÉCISION DE COPY.
      Je la pose, je ne la prends pas. Trois rangées, cibles à 44 px, zéro texte
      tranché, zéro menu replié. */
@media (max-width: 62rem) {
  .entete__haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marque tel" "action action";
    align-items: center;
    column-gap: var(--e3);
    row-gap: 0;
  }
  .entete__identite { grid-area: marque; }
  .entete__actions {
    display: contents;                 /* la marque et le téléphone se rangent seuls */
  }
  .entete__tel { grid-area: tel; justify-self: end; }
  .entete .action--encre {
    grid-area: action;
    justify-content: center;
    inline-size: 100%;
    min-block-size: var(--cible);
    font-size: var(--t-petit);
    white-space: nowrap;
    margin-block-end: var(--e1);
  }
}

/* ⛔ (c) LE PIED FAISAIT 748 px SUR UNE PAGE DE 6 972, SOIT 10,7 % — LA CIBLE
   MESURÉE CHEZ ELEVATE EST 7,8 %. L'écart ne venait pas du contenu (il est dû),
   il venait du rembourrage : `--e16` en haut et en bas, plus `--e16` avant le
   sous-pied, faisait 192 px de vide pour 556 px de texte.
   Elevate : `padding: 4rem 0` sur le corps, et un seul filet avant le sous-pied.
   corrige `.pied` et `.pied__sous` de la § 4 ci-dessus -> ordre */
.pied { padding-block: var(--e12) var(--e8); }
.pied__sous { margin-block-start: var(--e12); padding-block-start: var(--e6); }


/* ══════════════════════════════════════════════════════════════════════════
   6 · TROIS RÉGLAGES APRÈS AVOIR OUVERT LA CAPTURE DE LA v3
   ══════════════════════════════════════════════════════════════════════════ */

/* ⛔ (a) LE HÉROS ÉTAIT REMONTÉ À 740 px, ET C'EST ENCORE COURT. R-29 puis R-48
   encadrent la cible par les deux bouts : 1 019 px était vide, 657 était petit.
   L'écran de Gary fait 829. On vise juste en dessous, pour que le bas de
   l'illustration reste visible sans scroll (F-06b).
   740 -> ~800 : +62 px de respiration, et AUCUN de ces pixels n'est du vide au
   milieu — le pan de texte s'étire toujours d'un bout à l'autre et l'illustration
   porte sa colonne entière. corrige `.hm-heros` de la § 3 -> ordre */
.hm-heros { padding-block: calc(var(--entete-h) * 0.79); }

/* ⛔ (b) LE PIED FAISAIT ENCORE 10,8 % DE LA PAGE CONTRE 7,8 % MESURÉS CHEZ LA
   RÉFÉRENCE, et l'écart tenait au sous-pied : trois mentions empilées dans une
   colonne, une seule dans l'autre. Elles passent en trois colonnes égales, la
   ligne d'entité au-dessus sur toute la largeur.
   ⚠️ CE QUI RESTE D'ÉCART EST INCOMPRESSIBLE, et je ne le maquille pas : Elevate
      n'a AUCUNE mention légale à porter (47 mots en tout). Nous en portons trois
      catégories dues — article 37, article 31 de la loi qualité, article XII.6 du
      CDE. Le plancher est d'environ 60 mots, et il ne descendra pas.
   corrige `.pied__sous` de la § 4 -> ordre */
@media (min-width: 62rem) {
  .pied__sous {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--e12);
    row-gap: var(--e6);
  }
  .pied .pied__sous .pied__entite { grid-column: 1 / -1; max-inline-size: none; }
  .pied .pied__sous p { max-inline-size: none; }
}

/* ⛔ (c) LE COUPLE « RENDEZ-VOUS » S'ÉTALAIT SUR TOUTE LA LARGEUR POUR UN
   CONTENU BORNÉ À 46 SIGNES : la moitié droite de sa rangée était vide. Il
   reprend une colonne, comme les deux autres. C'est la disposition de la
   référence : `"phone location" "email location" "open socials"` — la colonne de
   gauche porte plusieurs rangées, celle de droite une ou deux. */
.pied__coord { align-items: start; }

/* ⛔ F-10 · LE CORPS DU PIED TOMBAIT À 15,6 px, POUR UN PLANCHER À 16.
   `--t-appui` vaut 0,975rem au plafond, soit 15,6 px : il est fait pour de
   l'appui DANS une page, pas pour des mentions légales qu'un lecteur peut avoir
   à lire vraiment. `max(1rem, …)` pose le plancher sans figer la valeur.
   ⚠️ 16 px n'est pas une exigence WCAG (il n'existe pas de taille minimale
      normative) : c'est le plancher que la SPEC a retenu, et il est raisonnable.
   corrige `.pied .pied__sous p` et `.pied__coord dt` de la § 4 -> ordre */
.pied .pied__sous p,
.pied__coord dt { font-size: max(1rem, var(--t-appui)); }

/* ══════════════════════════════════════════════════════════════════════════
   7 · DEUX DERNIERS RÉGLAGES, VUS SUR LA CAPTURE FINALE
   ══════════════════════════════════════════════════════════════════════════ */

/* ⛔ (a) LE BOUTON DE PRISE DE RENDEZ-VOUS PASSAIT SUR TROIS LIGNES DANS LE PIED.
   Son libellé fait 60 signes et sa valeur de couple ne disposait que de ~340 px,
   parce que les deux colonnes des coordonnées étaient égales. Elles ne le sont
   pas chez la référence non plus : sa colonne de gauche porte quatre rangées
   (Call Us, Fax, Email Us, Open), celle de droite deux (Location, Socials).
   corrige `.pied__coord` de la § 4 -> ordre */
@media (min-width: 62rem) {
  .pied__coord { grid-template-columns: minmax(0, 58fr) minmax(0, 38fr); }
  .pied__coord dd { max-inline-size: none; }
  .pied__couple--large { grid-column: auto; }
}

/* ⛔ (b) SUR TÉLÉPHONE, LE HÉROS PRENAIT LE MÊME RETRAIT QU'AU BUREAU ALORS QUE
   L'EN-TÊTE Y MANGE DÉJÀ 181 px. Mesuré : 181 + 88 = 269 px avant le premier mot,
   sur un écran de 844 — soit 32 % de l'écran d'arrivée, pour du vide.
   Le retrait du héros est indexé sur la hauteur de l'en-tête au BUREAU ; sur
   téléphone c'est la hauteur RÉELLE de l'en-tête qui commande, et elle est déjà
   deux fois plus grande.
   corrige `.hm-heros` de la § 6 -> ordre */
@media (max-width: 62rem) {
  .hm-heros { padding-block: var(--e8) var(--e12); }
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · LE PIED, CINQUIÈME REFUS (R-51) — ON MESURE LE NOMBRE DE CHOSES À LIRE
   ══════════════════════════════════════════════════════════════════════════
   Gary a dû RECADRER le pied lui-même pour nous le montrer.

   ⛔ POURQUOI LES QUATRE CORRECTIONS PRÉCÉDENTES N'ONT PAS PORTÉ. Elles ont
      toutes fait baisser la HAUTEUR : 748 px, puis 10,8 %, puis 564 px et 9,1 %
      ce matin. Aucune n'a fait baisser ce dont Gary parle depuis quatre fois —
      « beaucoup trop rempli dans tous les sens, il y a du texte partout ».
      Mesuré à 16 h 35 : HUIT blocs et 138 mots. La référence en a QUATRE et 47.
      ⛔ Un pied deux fois plus court avec le même nombre de blocs est le même
         pied. La grandeur est le NOMBRE DE CHOSES À LIRE et le VOLUME DE MOTS,
         pas les pixels. Aucune règle ci-dessous ne touche à un padding vertical.

   ── CE QUE LA CAPTURE RECADRÉE A MONTRÉ, ET QUE LA MESURE DE HAUTEUR RATAIT ──
     1. UN TROU AU MILIEU. Les trois couples étaient sur DEUX colonnes
        (`58fr / 38fr`), chacun avec son propre rail d'étiquette à `8rem`. Deux
        rails d'étiquettes à des abscisses sans rapport — 573 px et 1 390 px
        mesurés — et la moitié droite de la rangée 2 entièrement vide. La
        référence met SIX entrées sur deux colonnes ; nous en avons TROIS.
     2. ⛔ DEUX FILETS À 27 px L'UN DE L'AUTRE, AVEC RIEN ENTRE EUX. Personne ne
        les avait vus, et ils ne venaient pas du même fichier : `.pied__sous`
        porte un `border-block-start` posé ici (§ 4), et `.pied__entite` en porte
        un AUTRE, posé dans le socle (`_systeme-a/systeme.css` l. 742-745), avec
        son propre `margin-block-start: --e12`. Le second était son premier
        enfant. C'est le motif `un-nom-de-classe-deja-pris` : le socle dessinait
        pour une structure qui n'existe plus depuis le 14/08.
     3. UN BOUTON DE 66 SIGNES SUR DEUX LIGNES, encadré de deux phrases.
     4. LE BAS EN ESCALIER : une ligne d'entité EN GRAS pleine largeur, puis
        trois colonnes de 1, 2 et 3 lignes.

   ── CE QUE CE BLOC FAIT, ET RIEN D'AUTRE ────────────────────────────────────
     · les trois couples passent sur UNE colonne -> un seul axe de lecture
     · les quatre mentions passent en UN SEUL bloc coulant -> un seul objet
     · le filet parasite du socle est neutralisé -> deux filets, pas trois
     · le point médian entre mentions est POSÉ EN CSS, jamais dans le texte :
       c'est du dessin, pas de la ponctuation d'auteur, et ça n'ajoute donc aucun
       mot au compte. ⚠️ Les lecteurs d'écran annoncent le contenu généré ; un
       point médian lu entre deux mentions est acceptable, et il n'existe aucun
       moyen portable de l'en dispenser (`speak` n'est implémenté nulle part).
   ⛔ AUCUNE COULEUR EN DUR. AUCUNE BOÎTE, AUCUN CADRE, AUCUNE OMBRE, AUCUN
      POINTILLÉ. Aucun `100vh`. */

/* ── (a) LES COORDONNÉES SUR UNE SEULE COLONNE ──────────────────────────────
   corrige `.pied__coord` de la § 4 (0,1,0) et de la § 7 (0,1,0 sous media)
   -> ici (0,2,0), et dans la même requête de média. */
@media (min-width: 62rem) {
  .pied .pied__coord {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e6);
  }
  /* le couple garde son rail d'étiquette, mais il n'y en a plus qu'UN sur la
     page : les trois étiquettes s'alignent sur la même abscisse. */
  .pied .pied__couple { grid-template-columns: 9rem minmax(0, 1fr); }
  /* le couple du rendez-vous ne réclame plus de largeur particulière : son
     libellé de bouton fait 19 signes au lieu de 66. */
  .pied .pied__couple--rdv { grid-column: auto; }
}

/* ⛔ LE PAN DE DROITE LAISSAIT UN VIDE DE 400 px À SA DROITE, ET C'EST LA
   PREMIÈRE CAPTURE APRÈS CORRECTION QUI L'A MONTRÉ — pas la relecture du CSS.
   Cause : les colonnes en `fr` remplissent toujours le rail, mais le CONTENU de
   la colonne de droite est plafonné par `--mesure-pied` (46ch, F-12). Une
   colonne de 930 px pour un contenu de 604 px laisse 326 px de trou À DROITE,
   c'est-à-dire contre le bord, là où il se voit le plus.
   La forme juste ancre les DEUX bords : la marque au rail de gauche, les
   coordonnées au rail de droite, et le vide passe AU MILIEU. C'est la colonne
   vide de la référence (`". logo . contact"`) — un intervalle, pas un bord qui
   manque. Les colonnes sont donc dimensionnées sur leur contenu, jamais en `fr`.
   corrige `.pied__corps` de la § 4 (0,1,0) -> ici (0,2,0). */
@media (min-width: 62rem) {
  .pied .pied__corps {
    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
    justify-content: space-between;
    column-gap: var(--e16);
  }
}

/* la valeur d'un couple reste dans une mesure lisible — c'est la seule partie
   du pied qui se lit vraiment. corrige `.pied__coord dd` de la § 4 et de la § 7
   (0,1,1 / 0,1,1 sous media) -> ici (0,2,1). */
.pied .pied__coord dd { max-inline-size: var(--mesure-pied); }
@media (min-width: 62rem) {
  .pied .pied__coord dd { max-inline-size: var(--mesure-pied); }
}

/* le bouton et sa note : la note AU-DESSUS, le bouton en dessous, et plus rien
   après lui. corrige `.pied__couple--large dd` de la § 4 -> le porteur a changé
   de nom, cette règle-ci vise le nouveau. */
.pied .pied__couple--rdv dd {
  display: grid;
  gap: var(--e3);
  justify-items: start;
}
.pied .pied__couple--rdv .note { max-inline-size: var(--mesure-pied); }

/* ── (b) LE FILET PARASITE DU SOCLE ─────────────────────────────────────────
   ⛔ `.pied__entite` n'est plus un bloc : c'est un `<span>` dans la ligne de
      mentions. Le socle lui pose pourtant un filet, une marge de 3 rem et une
      largeur maximale, écrits pour la structure d'avant. Sur un élément en
      ligne, la marge et la largeur sont sans effet — le FILET, lui, se dessine.
      C'est lui qui produisait le second trait à 27 px du premier.
   corrige `_systeme-a/systeme.css` l. 742 `.pied__entite` (0,1,0) -> ici (0,2,0). */
.pied .pied__entite {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
  max-inline-size: none;
}

/* ── (c) LES QUATRE MENTIONS EN UN SEUL BLOC COULANT ────────────────────────
   ⛔ ELLES ÉTAIENT QUATRE BLOCS : un bandeau en gras pleine largeur, puis trois
      colonnes de hauteurs inégales dont la troisième dépassait les deux autres
      d'une ligne. Un bas de page en escalier se lit comme quatre choses.
   Un seul paragraphe, un seul filet au-dessus, le corps d'appui, et le point
   médian en CSS. Le résultat mesuré est en tête du rapport.
   ⚠️ LA CONTREPARTIE EST ASSUMÉE ET DITE : à pleine largeur ces lignes passent
      la mesure confortable de 75 signes. C'est ce que fait la référence dans son
      sous-pied, et c'est le seul moyen de tenir quatre mentions en trois lignes
      au lieu de dix. Un bloc de mentions légales se traverse du regard.
   ⛔ Ce sélecteur remplace `.pied__sous` (§ 4, § 5, § 6, § 7), dont le porteur a
      disparu du balisage. Ses anciennes règles ne peignent donc plus rien — c'est
      signalé, pas caché, exactement comme le bloc de la § 4 le faisait déjà. */
.pied .pied__mentions {
  margin: 0;
  margin-block-start: var(--e12);
  padding-block-start: var(--e6);
  border-block-start: var(--trait) solid var(--filet-sombre);
  font-size: max(1rem, var(--t-appui));
  line-height: var(--lh);
  color: var(--clair);
  max-inline-size: none;
  /* ⚠️ AMÉLIORATION PROGRESSIVE, ET C'EST DIT : `pretty` n'est PAS portable
     (Chrome 130, Safari 26, Firefox non — MDN browser-compat-data, 12/08/2026).
     Là où il manque, le bloc reste correct, il peut juste finir sur une
     orpheline. On ne s'appuie donc sur rien. */
  text-wrap: pretty;
}
/* la ligne d'identité reste la plus lisible des quatre, sans être un bandeau :
   la valeur du texte suffit, la graisse ne monte pas. */
.pied .pied__mentions .pied__entite { color: var(--blanc); }
/* le séparateur, dessiné et non écrit */
.pied .pied__mentions > span + span::before {
  content: "·";
  margin-inline: 0.5em;
  color: var(--filet-sombre);
}

/* ── (d) SOUS 62rem, RIEN NE CHANGE DE NATURE ───────────────────────────────
   Les couples étaient déjà en colonne unique sur téléphone. Le seul réglage est
   le rail d'étiquette, qui passe à `9rem` au-dessus de 46rem comme au bureau,
   pour que les trois étiquettes s'alignent à toutes les largeurs.
   corrige `.pied__couple` de la § 4 (0,1,0, sous `min-width: 46rem`) -> (0,2,0). */
@media (min-width: 46rem) {
  .pied .pied__couple { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-21 · D-88 · L'EN-TÊTE DE LA HOME, UNE SEULE RANGÉE
   ══════════════════════════════════════════════════════════════════════════
   Gary, le 21/08, devant le comparateur : « Proposition 1, let's go, on avance. »
   La Proposition 1 est celle qui écrit les quatre entrées dans la rangée :
   identité à gauche, navigation au centre, téléphone puis bouton plein à droite.
   Maquette de référence : `_Deliverables/entete-propositions-2026-08-21/`.

   ⛔ CE BLOC EST ÉCRIT À LA SUITE, il ne réécrit aucune ligne au-dessus. Il
      corrige, par l'ordre, TROIS couches antérieures qui portaient toutes les
      deux étages :
        · l. 672-726   (14/08, la bande à l'encre)
        · l. 1496-1531 et l. 1572-1598 (14/08, la reprise de forme)
        · l. 1708-1824 (14/08 soir, D-75) et le bloc (b) de la l. 2165
      `.entete__haut` a disparu du balisage : toutes les règles qui le visaient
      ne peignent plus rien. Elles restent en place — une classe sans porteur ne
      peint pas, et toucher au reste du fichier coûterait plus cher que ça.

   ── LE MUR, ET COMMENT ON PASSE ──────────────────────────────────────────────
   « Ce qu'il faut savoir sur la vasectomie » fait 37 signes, et l'appel à
   l'action 33. À 390 px les quatre entrées demandent ~440 px pour 350 utiles :
   elles NE TIENNENT PAS, et aucun réglage ne les y fera tenir.
   ⛔ R-60 dit ce qu'on fait alors : « ce n'est pas la rangée qui se dédouble,
      c'est le contenu qui change ». Les entrées passent donc derrière un seul
      contrôle sous 75rem, et le bouton plein descend dans le volet. La rangée
      reste UNE rangée à toutes les largeurs.
   ⚠️ La bascule est faite sur une largeur, pas sur une mesure du contenu. C'est
      le défaut connu de `myvicto-header-pill-fit` : une bascule pilotée par la
      seule largeur d'écran est fausse dès qu'un libellé change. Ici la page est
      monolingue et les libellés sont dictés au mot ; la largeur de bascule a été
      posée à 75rem parce que c'est là que la mesure casse, et elle est à
      revérifier si un libellé bouge.
   ══════════════════════════════════════════════════════════════════════════ */

/* corrige `.entete` (0,1,0) l. 672 et l. 1708 -> ordre */
.entete {
  display: block;
  padding-block: 0;
  padding-inline: var(--gouttiere);
  border-block-end: 0;
}

/* corrige `.entete__contenu` (0,1,0) l. 680, 1014, 1496, 1710 -> ordre */
.entete__contenu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e6);
  max-inline-size: var(--entete-max);
  margin-inline: auto;
  min-block-size: 0;
  padding-block: var(--e3);
}

/* ⛔ LA MARQUE N'EST PLUS EN CAPITALES INTERLETTRÉES. Mesuré : « Dr Mathieu
   Bourguignon » en capitales à 0,14em prend 234 px ; en bas de casse à 1,125rem
   il en prend 198. Sur une rangée qui doit aussi porter 590 px d'entrées, un
   bouton de 322 et le téléphone, ces 36 px décident. Et c'est le traitement de
   la Proposition 1 que Gary a choisie.
   corrige `.entete__identite` (0,1,0) l. 688, 1023, 1502 -> ordre */
.entete__identite {
  flex: 0 0 auto;
  font-size: 1.125rem;
  font-weight: var(--w-appui);
  letter-spacing: -0.012em;
  text-transform: none;
  white-space: nowrap;
  color: var(--blanc);
  min-block-size: var(--cible);
}

/* corrige `.entete__nav` (0,1,0) l. 695, 1030, 1531, 1757 -> ordre */
.entete__nav {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--e6);
  min-block-size: var(--cible);
  border-block-start: 0;
  padding-block: 0;
}
.entete__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cible);
  font-size: var(--t-petit);
  font-weight: var(--w-appui);
  white-space: nowrap;
  color: var(--blanc);
}
.entete__nav a[aria-current="page"] { border-block-end: 2px solid currentColor; padding-block-end: 2px; }

/* corrige `.entete__actions` (0,1,0) l. 703, 1029, 1598, 1729 -> ordre */
.entete__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--e4);
}
.entete__tel {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cible);
  font-size: var(--t-petit);
  font-weight: var(--w-appui);
  white-space: nowrap;
}
/* corrige `.entete .action--encre` (0,2,0) l. 709 et l. 1747 -> ordre */
.entete .action--encre {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cible);
  font-size: var(--t-petit);
  letter-spacing: 0.02em;
  padding-inline: var(--e4);
  white-space: nowrap;
}

/* ── le repli et son volet, aux couleurs de la bande à l'encre ─────────────── */
.entete__repli { color: var(--blanc); border-block-end-color: var(--filet-sombre); }
.entete__repli[aria-expanded="true"] { border-block-end-color: var(--blanc); }
.entete__volet {
  background: var(--encre);
  color: var(--blanc);
  border-block-end: 0;
  z-index: 1;
}
.entete__volet-nav a { color: var(--blanc); border-block-end-color: var(--filet-sombre); }
.entete__volet-nav a:last-child { border-block-end: 0; }
/* le volet n'existe QUE sous la largeur de repli : au-dessus, la navigation est
   écrite en clair dans la rangée et le volet ferait doublon. */
.entete__volet { display: none; }

/* ── SOUS 75rem · les entrées passent derrière le contrôle ────────────────── */
@media (max-width: 75rem) {
  /* ⛔ ces deux lignes annulent les grilles à deux étages des l. 1789 et 2165 */
  .entete__contenu { display: flex; grid-template-areas: none; grid-template-columns: none; }
  .entete__nav { display: none; }
  .entete__volet { display: block; }
  /* ⛔ LE CONTRÔLE N'APPARAÎT QUE SI LE SCRIPT A TOURNÉ. `data-repli` n'est posé
     que par `home.js` : script coupé, l'attribut n'existe pas, le bouton reste
     masqué et le volet reste ouvert. Un bouton qui ne replierait rien serait pire
     qu'absent. ⚠️ On ne passe PAS par `<noscript>` : vérifié au navigateur, sa
     feuille ne s'applique pas de façon fiable quand on coupe l'exécution des
     scripts par le protocole de contrôle. La règle ci-dessous, elle, se mesure. */
  .entete[data-repli] .entete__repli { display: inline-flex; }
  .entete[data-repli="ferme"] .entete__volet { display: none; }
  /* le bouton plein descend dans le volet : sur une rangée de 350 px utiles, la
     marque, le téléphone et un libellé de 33 signes ne tiennent pas ensemble. */
  .entete__actions .action--encre { display: none; }
  .entete__identite { font-size: 0.9375rem; }
  .entete__tel { font-size: var(--t-petit); }
  .entete__contenu { gap: var(--e4); }
  /* la marque, le téléphone, puis le contrôle : les actions restent à droite */
  .entete__actions { margin-inline-start: auto; }
}
@media (max-width: 30rem) {
  .entete__identite { font-size: 0.8125rem; letter-spacing: -0.01em; }
  .entete__tel { font-size: var(--t-micro); }
  .entete__repli { font-size: var(--t-micro); }
  .entete__contenu { gap: var(--e3); }
  .entete__actions { gap: var(--e2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-21 · UN SEUL BOUTON PLEIN SUR TOUT LE SITE
   ══════════════════════════════════════════════════════════════════════════
   La règle est mesurée chez Elevate (SPEC § 5A : le bouton plein « existe en un
   seul exemplaire », et tout le reste des appels est un lien souligné). Elle
   était énoncée depuis R-27 et elle n'était pas tenue : il y en avait DEUX,
   celui de l'en-tête et celui du pied.
   ⛔ L'ÉLU EST CELUI DE L'EN-TÊTE (D-88, Proposition 1).
   ⚠️ CELUI DU PIED NE DISPARAÎT PAS ET NE SE RÉTRÉCIT PAS. C'est la seule porte
      réellement branchée du site, vers `booking.mobminder.com`. Il garde sa
      cible de 44 px, son libellé et son lien : il change de TRAITEMENT, il passe
      du plein au cerclé. C'est le second objet du système d'Elevate, pas une
      dégradation.
   Le remplissage vient de `palette-ciel.css`, chargé APRÈS ce fichier : la
   correction de couleur est donc écrite là-bas, avec la même spécificité. */

/* ── LA HAUTEUR, ET ELLE EST CELLE QUE GARY A VALIDÉE ──────────────────────
   Le comparateur mesurait la Proposition 1 à 89 px sur bureau et 65 sur
   téléphone. C'est cette proposition-là qui a été choisie : la home prend les
   mêmes chiffres, pas d'autres.
   ⚠️ `--entete-h` était figée à 4,75rem (76 px) l. 584 — une valeur du 14/08,
      quand l'en-tête en faisait 101. Elle sert de repli quand le script ne
      tourne pas, et TROIS mécaniques la lisent : `scroll-padding-block-start`
      du socle (les ancres), `scroll-margin-block-start` (§ 2.4.11 Focus Not
      Obscured), et `min-block-size: calc(100svh - var(--entete-h))`. Une valeur
      fausse décale les ancres sous l'en-tête collant.
      `home.js` la remesure au `ResizeObserver` ; ce jeton n'est que le repli.
   corrige `--entete-h` (0,1,0) l. 584 -> même spécificité, ordre. */
/* ⚠️ La valeur est posée plus haut, sur la définition d’origine du jeton (bloc `:root` de la § « mv-forme-home »).
   Elle n'est pas redéfinie ici : un jeton défini à deux endroits dérive. */

/* ⚠️ `box-sizing: border-box` est global : `min-block-size` INCLUT le
   rembourrage. On pose donc la hauteur voulue, et le rembourrage ne sert plus
   qu'à empêcher la cible de 44 px de toucher les filets. */
.entete__contenu { min-block-size: 5.5625rem; padding-block: var(--e2); }  /* 89 px */
@media (max-width: 75rem) {
  .entete__contenu { min-block-size: 4.0625rem; padding-block: var(--e1); }  /* 65 px */
}

/* ⛔ LE PLANCHER DE 320 px (§ 1.4.10 Reflow, niveau AA). Mesuré au balayage du
   21/08 : à 320 px la rangée débordait de 10 px. Colonne utile 280, et la marque
   (« Dr Mathieu Bourguignon », 22 signes, dicté), le téléphone et le contrôle en
   demandaient 300.
   ⛔ Aucun texte n'est tranché et rien ne quitte la rangée : c'est le corps qui
      descend au micro et les écarts qui se resserrent. Ça ne concerne que le
      dernier palier — à 360 px et au-dessus, rien ne change. */
@media (max-width: 21rem) {
  .entete__contenu { gap: var(--e2); }
  .entete__identite { font-size: var(--t-micro); }
  .entete__repli { font-size: var(--t-micro); }
}

/* ⛔ LA CIBLE MAISON DE 44 px VAUT AUSSI EN LARGEUR (§ 2.5.5, niveau AAA, barre
   maison de ce système). Deux éléments de la rangée passaient dessous : « Blog »
   (30 × 44) — un défaut ANTÉRIEUR, mesuré au même endroit dans la version du
   14/08 — et le contrôle « Menu » (29,6 × 44), celui-là de moi.
   Les deux se corrigent au même endroit : une largeur minimale, et le texte
   reste centré dedans. Coût mesuré sur la rangée : +14 px, pris sur 24 px
   d'écart libre. */
.entete__nav a { min-inline-size: var(--cible); justify-content: center; }
.entete__repli { min-inline-size: var(--cible); justify-content: center; }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  mv-section-p1 · 2026-08-21                                              ║
   ║  LA SECTION D'ENTREE EST LA PROPOSITION 1 (D-89b), PORTEE DEPUIS         ║
   ║  `section-home-v3-2026-08-15/base/propositions.css`.                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   ⛔ AJOUT DATE EN FIN DE FICHIER. Rien au-dessus n'est reecrit.
   ⛔ AUCUN JETON DE COULEUR NI D'ESPACEMENT N'EST PORTE : ils viennent tous de
      `_systeme-a/systeme.css` et de `palette-ciel.css`, deja charges, et ils
      sont identiques des deux cotes. Une seule variable entre : `--t-datum`.
   ⚠️ `.hm-module { scroll-margin-block-start: 0 }` de la source N'EST PAS PORTE :
      la home l'a deja, l. 758-763, retire le 21/08. Le double decalage d'ancre
      que le board signalait sur la copie du comparateur n'existe pas ici. */

:root {
  /* la date lue comme un chiffre d'affiche. 4rem a 390 px, 9,66rem a 1440. */
  --t-datum: clamp(4rem, calc(4rem + (var(--fit) - 20rem) * 0.0885), 10.5rem);
}

/* ── L'APPEL DE LA SECTION ────────────────────────────────────────────────
   ⛔ CE N'EST PAS UN BOUTON PLEIN. Il n'y en a qu'un sur tout le site, celui de
      l'en-tete. Le rectangle n'a AUCUN fond au repos ; il ne se remplit qu'au
      survol, c'est-a-dire sous le doigt. Sa detection est MESUREE a 4,90:1
      (seuil 3:1) ; le filet de 43 px seul valait 1,00. */
.pv .hm-appel {
  /* 2 px declares. Chromium rend 1 px quand on declare 1,5 — mesure le 14/08. */
  border: 2px solid var(--action-sombre);
  border-radius: 2px;
  padding: var(--e3) var(--e6);
  min-block-size: 3.5rem;               /* 56 px rendus */
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--blanc);
  background: none;                     /* la nappe TRAVERSE le rectangle */
  transition: background-color 160ms var(--sortie), color 160ms var(--sortie);
}
/* le filet de 43 px (signature Elevate) cede la place au rectangle : deux
   signaux d'action sur le meme mot, c'est un signal de moins. */
.pv .hm-appel::after { content: none; }
.pv .hm-appel:hover,
.pv .hm-appel:focus-visible { background: var(--action-sombre); color: var(--encre); }

/* le socle de la section */
.pv .hm-scene { grid-template-columns: minmax(0, 1fr); }
.pv .hm-avant { max-inline-size: var(--mesure); }
.pv .hm-avant .hm-appui { font-size: var(--t-appui); font-weight: 500; }
.pv .hm-avant > * + * { margin-block-start: var(--e3); }

/* ── P1 · QUAND ───────────────────────────────────────────────────────────
   La section repond « c'est quand », et rien d'autre. La date prend la place
   que prenait un dessin : la donnee EST l'image.
   ⛔ LE RAIL REDEVIENT LARGE. `home.css` l. 1266 met #parcours au rail etroit
      (46vw, D-55, quand la section n'etait qu'un titre et un bouton). La date a
      besoin des deux colonnes. */
#parcours.pv-quand { --rail-section: var(--rail); }

.pv-quand .hm-tete { border-block-end: 1px solid var(--filet-sombre); padding-block-end: var(--e6); }
.pv-quand .hm-tete > h2 { max-inline-size: 20ch; }

.pv-quand__corps {
  display: grid;
  gap: var(--e12) var(--e16);
  margin-block-start: var(--e12);
  align-items: end;
}
/* ⛔ LE CANYON, CORRIGE LE 21/08 AU PORT, ET C'EST UNE MESURE QUI LE DIT.
   La source posait `minmax(0, 60fr) minmax(0, 34fr)` : sur un rail de 1320 px,
   la colonne de gauche recevait 802 px pour une encre qui en fait 174 au plus
   large. Mesure a 1512x829, de la fin de l'encre de la date au debut de la
   colonne de droite : ⛔ 692 px de vide. `/creative-director`, 21/08, sur cette
   proposition : « deux affiches collees aux deux bords opposes du meme mur.
   Un lecteur lit "4 septembre", puis traverse un desert, puis lit un
   paragraphe. 2 sur 5 en spacing. »
   La colonne de gauche suit donc son contenu (`max-content`) au lieu d'une part
   fixe du rail. Le vide ne disparait pas — il PASSE DU MILIEU AU BORD, et c'est
   le point : « un vide central separe deux blocs au lieu de les entourer ». */
@media (min-width: 62rem) {
  /* ⛔ RECALIBRE LE 23/08, ET LA MESURE A TRANCHE DEUX FOIS DE SUITE.
     · 60fr / 34fr (la source) : la colonne de gauche recevait 802 px pour une
       encre de 174 — **692 px de vide au milieu**, le « canyon » du directeur
       creatif.
     · max-content : bon tant que la colonne ne portait QUE la date. Des qu'elle
       a recu la phrase du 23/08, elle a pris **1224 px**, ecrase la colonne de
       droite a **0**, et pousse l'appel a 1621 px pour une fenetre de 1512.
       ⛔ Un debordement horizontal, mesure, cause par mon propre ajout.
     Deux colonnes qui portent toutes les deux du texte se dimensionnent en
     proportions, pas au contenu. */
  .pv-quand__corps {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--e16);
  }
}

/* la phrase au contact de la date : une mesure de lecture, pas la largeur de
   sa colonne. */
.pv-quand__dit { max-inline-size: 46ch; margin-block-start: var(--e6); }
.pv-quand__dit > * + * { margin-block-start: var(--e3); }

.pv-date {
  font-size: var(--t-datum);
  font-weight: 300;                     /* Manrope Light : une date, pas un cri */
  line-height: 0.86;
  letter-spacing: -0.05em;
  display: grid;
  gap: var(--e2);
  margin: 0;
}
.pv-date__jour {
  font-size: var(--t-sous);
  font-weight: var(--w-appui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--action-sombre);
}
.pv-date__nombre { font-variant-numeric: lining-nums tabular-nums; }
.pv-date__mois   { font-size: var(--t-titre); font-weight: 300; letter-spacing: -0.02em; }

/* l'appel ne touche pas le lien qui le precede : trouve sur la capture 390, ou
   le rectangle collait le libelle de la route. */
.pv-quand__corps > div > * + * { margin-block-start: var(--e6); }

/* ── LA PHRASE REMONTEE DANS LE HEROS (plancher du 15/08) ─────────────────
   Le gate veut « aucune urgence » en PREMIER RANG : visible a l'arrivee, sans
   replier et sans faire defiler. Elle vivait dans la deuxieme bande, donc sous
   le pli. Elle est ici, au mot, en appui — pas en titre : elle rassure, elle
   n'annonce pas. Le rang se verifie dans un navigateur, il ne se declare pas. */
.hm-heros__urgence {
  font-size: var(--t-appui);
  font-weight: 500;
  max-inline-size: var(--mesure);
  margin-block-start: var(--e6);
}

/* ── FENETRE COURTE ET TELEPHONE ──────────────────────────────────────────
   Rien n'est rogne : le contenu qui deborde fait grandir la bande (§ 1.4.10). */
@media (max-height: 37.5rem) {
  .hm-heros .hm-scene__texte .hm-heros__urgence { margin-block-start: .75rem; }
}
@media (max-width: 61.99rem) {
  .pv-quand__corps { margin-block-start: var(--e8); }
  .pv-date { line-height: 0.9; }
  .pv .hm-appel { inline-size: 100%; justify-content: center; text-align: center; }
}

/* ── LA FENETRE DE RESERVATION (D-91a) ────────────────────────────────────
   ⛔ ELLE NE PORTE AUCUNE DECORATION. Tout ce qu'on voit dedans appartient au
      parcours, qui a sa propre feuille et ses propres jetons. Ce bloc ne fait
      que menager la place et poser le voile.
   ⛔ LA PLACE EST MESUREE, PAS CHOISIE : le parcours bascule en trois zones
      au-dessus de 992 x 640. A 1512 x 829, une marge de 24 px laisse
      1464 x 781 : il tient. Sur telephone la fenetre est pleine, sans marge —
      il n'y a pas 24 px a donner a un cadre.
   ⚠️ `border: 0` et `padding: 0` sont indispensables : le style par defaut du
      navigateur pose une bordure et un retrait qui feraient une BOITE DESSINEE
      autour de la fenetre, et la reference n'en a aucune. */
/* ⛔ PLEINE, ET C'EST UNE MESURE QUI L'IMPOSE — PAS UN GOUT. La premiere
   version laissait 24 px de marge sur les quatre cotes. Resultat mesure a
   1512x829 : le conteneur `.parcours` tombait a 1200x635 pour un seuil de
   bascule a 640, et le parcours passait du mode `colonnes` au mode `bande`.
   ⛔ IL MANQUAIT CINQ PIXELS, et ca coutait la disposition en trois zones que
      Gary a validee en D-28. Le parcours lit sa hauteur SUR SON CONTENEUR
      (`container-type: size`), pas sur la fenetre du navigateur : une marge
      posee ici est une hauteur qu'il n'a plus.
   Page autonome a 1512x829 : `.parcours` = 1200x678 -> colonnes.
   Cadre de 1464x781 (avec les marges) : 1200x635 -> bande.
   Cadre plein : on retrouve 678, donc colonnes. */
/* ⛔⛔ CORRIGE LE 22/08 APRES LE BOARD. Trois juges ont trouve le meme defaut
   separement, et la version precedente de ce bloc en etait la cause.

   1. ⛔ LE VOILE N'EXISTAIT PAS. La fenetre faisait 100vw x 100svh et l'iframe
      la couvrait entierement : le `::backdrop` n'etait jamais visible, et
      `if (ev.target === dlg)` ne pouvait JAMAIS etre vrai — `elementFromPoint`
      rendait l'iframe aux quatre coins, a cinq tailles. La fermeture au clic sur
      le voile etait une fonction DECLAREE ET ABSENTE. `/visual-qc` : « la marge
      de 24 px retiree etait le voile ».
   2. ⛔ ET LA MARGE N'AVAIT PAS A DISPARAITRE EN LARGEUR. Le seuil du triptyque
      porte sur SON CONTENEUR : `width >= 992 && height >= 640`. Mesure du 22/08 a
      hauteur 829 : 1512 -> 1200x678 colonnes · 1400 -> 1200x678 · **1320 ->
      1200x678 colonnes** · 1100 -> 1034x678 colonnes · 1040 -> bande.
      ⛔ C'est la marge VERTICALE qui coutait les cinq pixels du mode colonnes,
         jamais l'horizontale. Le commentaire precedent generalisait a tort, et un
         juge du board a conclu faux en le recopiant.
   3. ⛔ LES REPONSES DEVENAIENT INATTEIGNABLES EN FENETRE COURTE. `/visual-qc` a
      mesure qu'a 450 px de haut, « Continuer » se pose sur les dernieres reponses
      de la premiere question — 2 sur 4 perdues — et que `scrollHeight ===
      clientHeight` aux 13 hauteurs testees : AUCUN geste ne les recuperait. C'est
      la question qui commande la redirection de D-36.
      La sortie : le cadre garde une hauteur minimale de 640 px (le seuil du mode
      colonnes) et c'est la FENETRE qui defile en dessous. Le triptyque continue
      de mesurer un conteneur sain, on ne touche pas a son fichier. */
.mv-fenetre {
  inline-size: min(100vw, 82.5rem);     /* 1320 px : le voile reste visible */
  block-size: 100svh;                   /* ⛔ la hauteur ne se rogne pas */
  max-inline-size: none;
  max-block-size: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: auto;                       /* la fenetre defile, le triptyque non */
  overscroll-behavior: contain;
  background: var(--blanc);
}
.mv-fenetre::backdrop { background: rgb(15 36 51 / 0.72); }
.mv-fenetre__cadre {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 40rem;                /* 640 px = le seuil du mode colonnes */
  border: 0;
}

/* ⛔ LA SORTIE POSEE PAR LA HOME, ET ELLE N'EXISTAIT PAS. Le seul bouton de
   fermeture appartenait a l'AUTRE document : si l'iframe ne peint pas, l'ecran
   etait un aplat plein cadre sans un objet cliquable (`/interface-design`).
   Celui-ci appartient a la page qui ouvre. Son libelle est repris AU MOT du
   triptyque (« Fermer la fenetre ») : aucun texte patient n'est invente ici. */
.mv-fenetre__fermer {
  position: fixed;
  inset-block-start: var(--e4);
  inset-inline-end: var(--e4);
  z-index: 2;
  min-block-size: var(--cible);
  min-inline-size: var(--cible);
  padding: var(--e2) var(--e4);
  border: 0;
  border-radius: 3px;
  background: var(--encre);
  color: var(--blanc);
  font: inherit;
  font-size: var(--t-petit);
  cursor: pointer;
}
.mv-fenetre__fermer:hover,
.mv-fenetre__fermer:focus-visible { background: var(--fonce); }



/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  mv-filet-r63 · 2026-08-21 · LE FILET NE RESTE QUE LA OU IL DIT QUELQUE  ║
   ║  CHOSE.                                                                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Gary, 21/08 (R-63) : « Je ne sais pas vraiment si j'achete cette ligne qu'on
   met a chaque fois en dessous du texte partout. La ligne apparait beaucoup
   trop basse, on ne comprend pas trop ce que ca fait. Autant en dessous de
   "Accueil" je veux bien, parce que ca veut dire qu'on est dans Accueil. Mais
   en dessous du numero, ou en dessous de "Appeler le cabinet", je ne vois pas
   pourquoi on a besoin de cette ligne. »

   ⛔ LES TROIS QU'IL NOMME SONT EXACTEMENT LES TROIS `tel:` DE LA PAGE
      (en-tete l. 210, heros l. 303, pied l. 1161). La regle se lit donc toute
      seule et ne s'elargit pas toute seule : un lien dont le texte EST un
      numero, ou dont le libelle EST l'action, n'a pas besoin qu'on lui dise
      qu'il est cliquable.

   ⚠️ CE QUE JE N'ETENDS PAS, ET IL FAUT QUE GARY LE TRANCHE. Le quatrieme
      `.lien-filet` (l. 405) n'est pas un `tel:` : c'est « Ce qui doit etre dit
      avant de prendre rendez-vous », un lien DANS un paragraphe, et c'est le
      SEUL chemin de la home vers la page annexe — deux gates independants
      exigent qu'il soit visible. Sans filet il ne resterait aucun signal :
      `.lien-filet` porte `text-decoration: none`, et la graisse seule ne
      suffit pas (WCAG 1.4.1, l'information ne peut pas passer par la seule
      couleur ou la seule graisse). Gary ne l'a pas nomme. Je ne l'etends donc
      pas de moi-meme — c'est le mecanisme de D-24 et de R-26, qui ont coute
      une journee chacun a ce dossier.
      ⛔ EN REVANCHE JE TRAITE LA SECONDE MOITIE DE SON RETOUR, qui vaut pour
         lui aussi : « elle apparait beaucoup trop basse ». La cause est
         mesuree — `.lien-filet--cible` impose une boite de 44 px (cible
         tactile) en `inline-flex` centre, et le `border-block-end` se pose au
         bas de cette boite, loin du mot. Le soulignement, lui, suit le TEXTE.
         Ecart mesure : 20 px avant, 4 px apres. */
.lien-filet[href^="tel:"] { border-block-end: 0; }

.hm-avant .lien-filet:not([href^="tel:"]) {
  border-block-end: 0;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* ⛔ REGRESSION DE MON FAIT, TROUVEE SUR LA CAPTURE ET PAS DANS LE CODE.
   L'appel de la section est passe de <button> a <a> (pour que la page marche
   sans JavaScript) et il a herite du soulignement par defaut des liens : le mot
   se retrouvait souligne A L'INTERIEUR de son rectangle, soit deux signaux
   d'action sur le meme mot — exactement ce que le commentaire de la regle
   voisine dit d'eviter. */
.pv .hm-appel { text-decoration: none; }

/* ⛔ ET LA OU LE FILET RESTE, IL REMONTE. C'est la seconde moitie de R-63, et
   Gary la formule comme un defaut de dessin, pas comme un doute d'utilite :
   « la ligne apparait beaucoup trop basse, on ne comprend pas trop ce que ca
   fait ». Mesure a 1512x829 : 13 px entre le bas du mot « Accueil » et son
   filet, parce que le filet se pose au bas d'une BOITE de 44 px (cible
   tactile) et non sous le TEXTE. La cible tactile ne bouge pas — c'est le
   trait qui vient au mot. Mesure apres : 4 px. */
.entete__nav a[aria-current="page"] {
  border-block-end: 0;
  padding-block-end: 0;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  mv-plancher · 2026-08-21 · LE PLANCHER DE HAUTEUR DES SECTIONS TOMBE.   ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   `.hm-module` portait `min-block-size: calc(100svh - var(--entete-h))` depuis
   D-53 (« une section = un ecran »). ⛔ D-53 A ETE ANNULEE PAR GARY LUI-MEME LE
   14/08 : « une section egale a un ecran, non, je ne sais pas, c'est juste
   voila avec des illustrations, j'ai envie que ce soit good looking. » La
   decision est tombee le 14/08 ; le CSS l'appliquait encore une semaine plus
   tard, et le 21/08 elle a meme ete reposee a Gary comme si elle etait sienne.
   Sa reponse est D-90a : « Arrete tout le temps de t'entetter dans des regles
   qui t'empechent de travailler. On fait des tests, on regarde ce que ca donne
   a l'ecran, et puis apres on fait mieux. »

   ⛔ LA MESURE, ET ELLE TRANCHE UN DESACCORD. `/creative-director` ecrivait le
      21/08 : « ce que je ne recommande pas : raboter la regle 100svh - entete-h,
      elle donne au document son rythme de bandes, qui est ce que Gary demandait
      en citant Elevate ». Mesure faite avant de le suivre ou non — rapport de la
      plus haute bande a la plus basse :

        AVEC le plancher, 1512x829 : 1,22   (3 bandes a EXACTEMENT 740 px)
        SANS le plancher, 1512x829 : 1,52   (aucune hauteur identique)
        AVEC le plancher, 390x844  : 1,66   (2 bandes a exactement 779 px)
        SANS le plancher, 390x844  : 2,25   (aucune hauteur identique)
        ⛔ ELEVATE, la reference citee : 3,4

   ⛔ LE PLANCHER N'EST DONC PAS LE RYTHME D'ELEVATE : IL EST SON CONTRAIRE. Il
      produit l'uniformite que Gary a refusee deux fois en R-32 (« toutes les
      sections sont habillees pareil », « regarde un peu comment tu habilles tes
      sections, parce que la il y a un probleme »), et trois bandes a exactement
      la meme hauteur au pixel en sont la trace mecanique.

   ⚠️ CE QUE CA NE REGLE PAS, ET LE DIRECTEUR CREATIF A RAISON SUR CE POINT :
      « le probleme n'est pas la hauteur de la bande, c'est que trois des quatre
      propositions n'ont rien a mettre dedans ». Retirer le plancher ne remplit
      aucune section. Ce qui remplira, ce sont les illustrations, produites en
      parallele dans une autre fenetre. Cette regle-ci enleve seulement le vide
      qui n'appartenait a personne.

   ⚠️ `align-content: center` est CONSERVE et devient sans effet : une grille qui
      fait la hauteur de son contenu n'a plus de vide a distribuer. On ne le
      retire pas — le jour ou une section reprend une hauteur, le centrage doit
      revenir avec elle. */
.hm-module { min-block-size: 0; }

/* ⛔ `[hidden]` DOIT BATTRE `display: grid`, ET IL NE LE FAISAIT PAS.
   `/ux-strategist`, 22/08 : `.pv-date { display: grid }` l'emportait sur
   l'attribut, donc en cas d'echec du calcul le bloc se serait affiche VIDE
   (347x16 px mesures) au lieu de disparaitre. Le fail-closed etait declare et
   n'existait pas. Une seule ligne le rend vrai. */
.pv-date[hidden] { display: none; }

/* ⛔ MASQUAGE VISUEL, POSE LE 23/08 AVEC LA SECTION DE FERMETURE (D-107).
   Cette page n'avait AUCUNE classe pour ca : `hors-ecran` existe dans le
   triptyque, qui est un autre document, et l'employer ici aurait AFFICHE le
   titre. Verifie avant de la poser : zero occurrence dans `home.css` et dans
   `_systeme-a/systeme.css`.
   ⚠️ `clip-path: inset(50%)` et non `display: none` : le texte doit rester lu
   par les technologies d'assistance, il ne doit pas disparaitre de l'arbre. */
.hm-hors-ecran {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ⛔ #technique SANS ILLUSTRATION : LE TEXTE PREND LE RAIL.
   L'illustration a ete retiree le 23/08 (R-70, le sujet est refuse). La garde
   `la-largeur-du-contenu-est-employee` a immediatement mesure le trou :
   **48,2 % de la colonne, 679 px morts a droite**. Une colonne vide n'est pas
   une composition, c'est une place qu'on n'a pas su occuper — c'est le mot du
   directeur creatif sur un autre objet, le 21/08.
   ⚠️ TEMPORAIRE ET DECLARE : la regle saute le jour ou la section recoit
   l'illustration d'ambiance prevue par D-87. */
/* ⛔ CORRIGE UNE HEURE PLUS TARD, ET C'EST MA PROPRE REGLE QUI SE CONTREDISAIT.
   Premiere version : `max-inline-size: none` pour que le texte remplisse la
   colonne laissee vide par l'illustration retiree. La garde a immediatement
   mesure la consequence : **84 signes par ligne**, pour une cible de 62-68 et
   un echec au-dela de 75. J'avais repare une largeur en cassant une mesure de
   lecture.
   ⛔ Ce qui remplit une section sans image, ce n'est pas un texte plus large,
   c'est un RAIL plus etroit — la page le fait deja pour `#prix`. La mesure de
   ligne, elle, ne bouge jamais. */
/* La série F2 rend une illustration à ces deux sections. Le rail étroit et la
   grille forcée à une colonne ne valent donc plus sur desktop. */
@media (max-width: 61.99rem) {
  #technique .hm-scene,
  #deroule .hm-scene { grid-template-columns: minmax(0, 1fr); }
  #technique, #deroule { --rail-section: var(--rail); }
}

/* la bande de fermeture ne porte qu'un rappel : elle respire moins que les
   autres, et son retrait vertical le dit. */
.hm-fermeture { padding-block: var(--e16); }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  mv-fond-unique · 2026-08-23 · UN SEUL FOND POUR TOUTES LES BANDES       ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Gary, 23/08, devant la page : « Mets-moi le meme fond a chaque fois, quoi.
   Pourquoi tu changes a chaque fois ? »

   ⛔ CA ANNULE L'ALTERNANCE DE NAPPES, et il faut le dire parce que c'est une
   mecanique que le dossier a construite et mesuree :
     · `D-09` (12/08) : « quand on scrolle, ca devient blanc » ;
     · `D-52` (14/08) : l'alternance mesuree sur la vraie capture d'Elevate, sept
       bandes, cinq fonds nommes, le blanc a 3,1 % de la page ;
     · `D-41` puis `D-74` : les deux palettes successives reposaient dessus.
   ⛔ Gary tranche devant l'objet, apres l'avoir vu. C'est sa decision et elle
   prime. Rien n'est supprime : ces regles vivent au-dessus, il suffit de retirer
   ce bloc pour retrouver l'alternance.

   ⛔ LE FOND RETENU EST `--clair`, ET CE N'EST PAS UN CHOIX ARBITRAIRE : c'est
   la nappe que `shared/jetons.css` du triptyque declare comme **« nappe
   DOMINANTE — elle porte la page »**. La home prend les couleurs du quiz
   (`D-102`) ; elle prend donc aussi sa dominante.

   ⚠️ DEUX GARDES VONT ROUGIR, et elles ont raison de le faire : `plan-de-bandes-
   conforme` mesure la variete des bandes, et le plan des nappes n'existe plus.
   Elles sont declarees, pas desserrees. */
.bande--pale,
.bande--clair,
.bande--mi,
.bande--fonce,
.bande--encre,
.hm-module,
.hm-fermeture { background: var(--clair); color: var(--encre); }

/* les objets qui se reglaient sur une bande sombre reviennent au regime clair :
   sans ca, le corail eclairci (prevu pour du fonce) tombe a 1,6:1 sur turquoise. */
.bande--fonce .hm-appel,
.bande--encre .hm-appel,
.hm-fermeture .hm-appel { border-color: var(--action); color: var(--encre); }
.bande--fonce .hm-appel:hover,
.bande--encre .hm-appel:hover,
.hm-fermeture .hm-appel:hover { background: var(--action); color: var(--encre); }
.bande--fonce .hm-tete,
.bande--encre .hm-tete { border-block-end-color: var(--filet-clair); }
.bande--fonce .lien-filet,
.bande--encre .lien-filet { border-block-end-color: currentColor; }
.pv-date__jour { color: var(--fonce); }

/* le sas blanc n'a plus de role : il separait deux mondes de nappes. */
.hm-sas { display: none; }

/* ── LA LIGNE D'IDENTITE DU HEROS (23/08) ─────────────────────────────────
   Elle remplace le surtitre, qui disait le nom AVANT le sujet et le repetait.
   ⛔ Le titre legal (« medecin specialiste en urologie ») est une obligation,
   art. 31 § 2 al. 3 de la loi qualite du 22/04/2019 : il se lit, il ne se
   murmure pas en corps 11 px comme R-04 l'avait refuse. */
.hm-heros__identite {
  font-size: var(--t-sous);
  font-weight: var(--w-appui);
  color: var(--fonce);
  margin-block: var(--e4) var(--e6);
  max-inline-size: var(--mesure);
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  mv-retours-23-08-soir · les trois corrections que Gary a nommees        ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   ── 1. LE BOUTON DE L'EN-TETE ETAIT ROSE PALE ────────────────────────────
   Gary : « en haut a droite je vois "Reserver la date de mon operation" encore
   en rose pale, alors que normalement c'etait orange. »
   ⛔ C'EST MON DEFAUT, ET IL EST DATE. En posant la palette du quiz j'ai eclairci
   le corail pour qu'il tienne sur les bandes SOMBRES (`--action-sombre` #f9c7b8,
   4,53:1 sur `--fonce`). Puis le fond unique a rendu la page claire, et
   l'en-tete est reste le seul objet sombre : il gardait un accent calcule pour
   un contexte qui n'existe plus. Le corail plein y tient tres bien — encre sur
   corail, **5,85:1**. */
.entete .action--encre {
  background: var(--action);
  color: var(--encre);
  border-color: var(--action);
}
.entete .action--encre:hover,
.entete .action--encre:focus-visible { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }

/* ── 2. LA SECTION 2 REPASSE EN INVERSE ───────────────────────────────────
   Gary : « Reserver le jour de votre operation, ca peut etre en inverse.
   C'etait mieux avant. La tu fais en turquoise fonce, et puis tu ecris en bleu
   ciel dessus. »
   ⚠️ Le fond unique tient pour les six autres bandes : c'est UNE section qui
   s'inverse, pas l'alternance qui revient.
   ⛔⛔ CORRIGE UNE HEURE PLUS TARD. J'avais fabrique une valeur, `#2b5e64`, en
   partant de `--fonce` et en l'assombrissant juste assez pour que le bleu ciel
   passe (4,54:1). Gary : « quand je te dis d'inverser, c'est d'utiliser L'AUTRE
   COULEUR FONCEE QU'ON N'UTILISE PAS, pas d'en inventer une 3e. »
   ⛔ IL A RAISON, ET LE PIRE EST QUE LE CALCUL ETAIT DEJA SOUS MES YEUX : dans
   la meme mesure, `--encre` (#003035) donnait **8,90:1** avec le bleu ciel,
   contre 4,54 pour ma valeur inventee. L'encre n'est employee que par l'en-tete
   et le pied — c'est exactement « la couleur foncee qu'on n'utilise pas ». Une
   palette a six jetons n'a pas besoin d'un septieme, et un systeme monochrome a
   cinq roles cesse d'en etre un des qu'on en ajoute (D-40). */
#parcours {
  background: var(--encre);
  color: var(--clair);
}
#parcours .hm-tete { border-block-end-color: var(--clair); }
#parcours h2, #parcours .pv-date__nombre, #parcours .pv-date__mois { color: var(--clair); }
/* sur l'encre, le corail PLEIN tient : 5,85:1. Plus besoin de la version
   eclaircie, qui n'existait que pour le fond invente. */
#parcours .pv-date__jour { color: var(--action); }
#parcours .hm-appel { border-color: var(--action); color: var(--clair); }
#parcours .hm-appel:hover,
#parcours .hm-appel:focus-visible { background: var(--action); color: var(--encre); }
#parcours .lien-filet { color: var(--clair); }
#parcours .lien-filet:not([href^="tel:"]) { text-decoration-color: var(--clair); }

/* ── 3. LE PIED DU HEROS, DICTE PAR GARY ──────────────────────────────────
   « Vous n'etes pas hospitalise, puis tu mets une barre horizontale, puis tu
   mets "lire ce qu'on doit vous dire avant une vasectomie" avec un petit plus a
   cote. Et puis tu mets "reserver la date" en majuscules avec souligne, puis un
   filet, puis "appeler le cabinet" en gras. »
   Les majuscules et le souligne existaient deja ; ce qui manquait, ce sont les
   deux filets et la graisse du telephone. */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  LE BLOC D'ACTIONS DU HEROS — REFAIT LE 23/08 AU SOIR, 3e VERSION        ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Gary, capture a l'appui : « ca ressemble a rien — go appliquer des principes
   de design. » Il a raison, et le defaut se nomme.

   ⛔ CE QUI N'ALLAIT PAS, ET C'ETAIT MESURABLE A L'OEIL :
   1. **Cinq filets pour trois objets.** Un separateur qui se repete a chaque
      ligne ne separe plus rien : il devient une texture. Le bloc lisait comme un
      tableau de donnees, pas comme trois actions.
   2. **Un trait orphelin sous « RESERVER LA DATE ».** C'est le `::after` de
      43 px, la signature d'Elevate, qui s'ajoutait au soulignement du lien ET au
      filet de la rangee : **trois signaux sur le meme mot**, dont deux qui ne
      veulent rien dire ensemble.
   3. ⛔ **Aucune hierarchie.** L'action principale, le telephone et un lien de
      lecture avaient exactement le meme poids. Or ils ne valent pas la meme
      chose : l'un ouvre la fenetre de reservation, l'autre est le SEUL canal
      branche de bout en bout du site, le troisieme est une lecture.

   ── LES PRINCIPES APPLIQUES, DANS L'ORDRE ────────────────────────────────
   · **Hierarchie** : un objet plein pour l'action primaire, un objet en texte
     fort pour le canal humain, un lien discret pour la lecture. Trois poids,
     trois roles.
   · **Proximite** : les deux actions sont collees (elles font la meme chose,
     prendre rendez-vous) ; la lecture est detachee, elle appartient au texte.
   · **Un seul separateur**, celui qui detache le bloc d'actions du discours.
     Aucun filet entre les actions elles-memes.
   · **Alignement** : une seule arete gauche pour tout le bloc.
   ⚠️ Le bouton plein du heros n'entre PAS en concurrence avec celui de
   l'en-tete : c'est le meme geste, au meme endroit de la page, et l'en-tete
   n'est visible qu'en haut. La regle « un seul bouton plein » vise la
   coexistence de deux appels DIFFERENTS, pas le rappel du meme. */
.hm-heros__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e6);
  margin-block-start: var(--e8);
  padding-block-start: var(--e8);
  border-block-start: 1px solid var(--filet-clair);
}

/* 1. l'action primaire : pleine, c'est elle qu'on voit d'abord */
.hm-heros__actions .hm-appel {
  background: var(--action);
  color: var(--encre);
  border: 1px solid var(--action);
  border-radius: 3px;
  padding: var(--e3) var(--e6);
  min-block-size: var(--cible);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background-color 160ms var(--sortie);
}
.hm-heros__actions .hm-appel::after { content: none; }   /* le tiret de 43 px ne se cumule pas */
.hm-heros__actions .hm-appel:hover,
.hm-heros__actions .hm-appel:focus-visible { background: var(--blanc); border-color: var(--encre); }

/* 2. le canal humain : fort, mais sans fond. C'est le seul branche du site. */
.hm-heros__actions [href^="tel:"] {
  font-weight: 700;
  border-block-end: 0;
  padding-block: var(--e2);
}

/* 3. la lecture : elle appartient au discours, pas aux actions. Elle passe
      AVANT le filet et reste discrete. */
.hm-heros__lire { margin-block-start: var(--e6); font-size: var(--t-petit); }
.hm-heros__lire .a-fournir { font-weight: var(--w-appui); }


/* ── LE HEROS, TROISIEME PASSE (23/08 au soir) ────────────────────────────
   Quatre retours de Gary, tous sur la meme capture :
   « pas besoin de faire le heading si gros » · « enleve-moi la ligne aussi » ·
   « pourquoi "reserver la date" est en majuscules, ca ressemble a rien, et
   c'est trop grand aussi » · « plutot que CTA en secondary, on va mettre un
   lien vers la page info ».

   ⛔ LE TITRE. P3 nomme le lieu complet, donc elle est longue : a `--t-display`
   (70 px) elle prenait QUATRE lignes et mangeait le premier ecran. Un titre ne
   se juge pas a sa taille mais a la place qu'il laisse. Il descend a ~48 px. */
.hm-heros h1 { font-size: clamp(2rem, 1.2rem + 2.1vw, 3rem); }

/* 2026-08-26 — accueil resserré.
   Les visuels décoratifs ne servent pas l'information du patient. La home ne
   conserve que le portrait réel du médecin et l'illustration explicative de la
   technique. */
.hm-heros > .hm-scene > .hm-illu,
.hm-parcours > .hm-scene > .hm-illu,
.hm-praticien .hm-illu--secondaire,
.hm-technique > .hm-scene > .hm-illu,
.hm-prix > .hm-scene > .hm-illu,
.hm-lieu > .hm-scene > .hm-illu,
.hm-deroule > .hm-scene > .hm-illu {
  display: none;
}

.hm-heros > .hm-scene,
.hm-parcours > .hm-scene,
.hm-technique > .hm-scene,
.hm-prix > .hm-scene,
.hm-lieu > .hm-scene,
.hm-deroule > .hm-scene {
  grid-template-columns: minmax(0, 1fr);
}

.hm-heros > .hm-scene > .hm-scene__texte,
.hm-parcours > .hm-scene > .hm-scene__texte,
.hm-technique > .hm-scene > .hm-scene__texte,
.hm-prix > .hm-scene > .hm-scene__texte,
.hm-lieu > .hm-scene > .hm-scene__texte,
.hm-deroule > .hm-scene > .hm-scene__texte {
  grid-column: 1;
  max-inline-size: 76rem;
}

.hm-parcours .pv-quand__corps {
  max-inline-size: 76rem;
}

.hm-praticien .hm-praticien__visuels {
  max-inline-size: 30rem;
}

.hm-praticien .hm-portrait img {
  object-position: 50% 22%;
}

.hm-heros .hm-heros__actions .hm-appel {
  background: var(--action);
  border-color: var(--action);
  color: var(--encre);
}

/* ⛔ LA LIGNE PART. C'etait le dernier des cinq filets, et il ne separait plus
   que deux objets qui se suivent : la proximite suffit. */
.hm-heros__actions {
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: var(--e12);
  gap: var(--e6);
  /* ⛔ `stretch` et non `center` : mesure du 23/08, le primaire faisait 49 px de
     haut et le secondaire 53. Quatre pixels d'ecart entre deux boites posees
     cote a cote se voient — c'est exactement ce qui fait qu'un bloc « ne
     ressemble a rien » sans qu'on sache dire pourquoi. Les deux se calent sur
     la plus haute, et la ligne de base commune revient. */
  align-items: stretch;
}

/* ⛔ NI MAJUSCULES NI SURDIMENSIONNE. Les capitales sur un bouton ralentissent
   la lecture (on perd la silhouette du mot) et donnent un ton d'injonction qui
   n'a rien a faire sur un site medical. Casse normale, corps de texte. */
.hm-heros__actions .hm-appel {
  text-transform: none;
  font-size: var(--t-corps);
  letter-spacing: 0;
  padding: var(--e3) var(--e6);
}

/* ── LE SECONDAIRE, DEMANDE PAR GARY LE 23/08 ─────────────────────────────
   « Je prefererais un encadre qui fait la meme taille que "reserver la date",
   et quand on hover, limite ca se souligne. »
   ⛔ MEME BOITE, POIDS DIFFERENT — c'est la paire primaire/secondaire classique,
   et c'est ce qui la rend lisible : les deux objets ont la meme taille, donc
   l'oeil les lit comme deux options du meme rang, et c'est le REMPLISSAGE qui
   dit laquelle est l'action principale. Un secondaire plus petit aurait dit
   « moins important » ; un secondaire de meme poids aurait dit « choisissez ».
   ⚠️ Le trace est en `--encre`, pas en `--action` : deux objets corail cote a
   cote annuleraient la hierarchie que le fond plein vient d'etablir.
   ⚠️ La bordure est posee AVANT le survol et ne change pas de largeur ensuite :
   un bouton qui grandit au survol deplace ce qui l'entoure. */
.hm-heros__savoir {
  display: inline-flex;
  align-items: center;
  color: var(--encre);
  font-weight: var(--w-appui);
  font-size: var(--t-corps);
  text-decoration: none;
  border: 1px solid var(--encre);
  border-radius: 3px;
  padding: var(--e3) var(--e6);
  min-block-size: var(--cible);
  transition: background-color 160ms var(--sortie);
}
.hm-heros__savoir:hover,
.hm-heros__savoir:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* ── LE HEROS DICTE PAR GARY (23/08, dernier passage) ─────────────────────
   Le titre est desormais une question courte, donc il n'a plus besoin d'etre
   bride : il retrouve un corps plein. Ce qui portait la longueur, c'etait
   l'ancien titre-adresse, pas le titre lui-meme. */
.hm-heros h1 { font-size: clamp(2.25rem, 1.2rem + 2.9vw, 3.75rem); }
.hm-heros__sous { font-size: var(--t-appui); max-inline-size: 46ch; }
.hm-heros__sous + .hm-heros__sous { margin-block-start: var(--e3); }
.hm-heros .hm-heros__def { margin-block-start: var(--e6); }

/* ⛔ « Tu peux reduire l'ecart entre le sous-titre et les deux call to action. »
   Il etait a `--e12` (48 px) : c'est un ecart de SECTION, pas d'un texte a
   l'action qui le suit. A `--e8` (32 px), les deux appartiennent encore au meme
   bloc de lecture. */
.hm-heros .hm-heros__actions { margin-block-start: var(--e8); }

/* ⛔ LE SOUS-TITRE ETAIT A 16 px POUR UN TITRE A 60 : un rapport de 3,75, alors
   qu'une paire titre/chapo tient entre 2 et 2,5. Gary : « ce n'est pas le
   heading qui doit etre le plus petit... fais le sous-titre plus grand. »
   Il monte a ~22 px, le titre descend a ~52 : rapport 2,4. */
.hm-heros .hm-heros__sous { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; }
.hm-heros h1 { font-size: clamp(2.1rem, 1.2rem + 2.5vw, 3.25rem); }

/* ⛔ LE BLOC DE TEXTE SE CENTRE SUR LA HAUTEUR (Gary, 23/08 : « le tout au milieu
   sur la hauteur maintenant »).
   La colonne de texte est un flex vertical ; c'est `justify-content` qui la
   distribue. Elle etait en haut parce que la regle d'a cote poussait les actions
   en bas avec `margin: auto` — les deux ensemble etiraient le bloc d'un bord a
   l'autre. Cette marge vient de tomber, donc le centrage redevient possible :
   le texte se cale sur le milieu de l'illustration, qui est le seul objet qui
   donne sa hauteur a la bande. */
.hm-heros .hm-scene__texte { justify-content: center; }

/* ════════════════════════════════════════════════════════════════════════════
   SÉRIE F2 FINALE · 26/08/2026
   Huit images raster transparentes, une par section. Les anciens masques et le
   sélecteur de familles ne participent plus au rendu de la home A.
   ════════════════════════════════════════════════════════════════════════════ */
.hm-illu picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.hm-illu__place {
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  align-self: start;
  overflow: visible;
  background: none !important;
}

.hm-illu {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.hm-illu__img {
  display: block !important;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.hm-illu__masque,
.choix-famille {
  display: none !important;
}

.hm-praticien__visuels {
  display: grid;
  min-inline-size: 0;
  position: relative;
}

/* Formats mobiles : une source verticale garde de l'échelle sans couper le sujet. */
.hm-module:not(.hm-heros):not(.hm-lieu) .hm-illu__place { aspect-ratio: 3 / 4; }
.hm-heros .hm-illu__place { aspect-ratio: 20 / 19; }
.hm-lieu .hm-illu__place { aspect-ratio: 4 / 3; }

.hm-praticien .hm-praticien__visuels { order: 0; }
.hm-praticien .hm-scene__texte { order: 1; }
.hm-praticien .hm-illu--secondaire {
  order: 2;
  inline-size: min(82%, 22rem);
  justify-self: end;
  margin-block-start: var(--e4);
}

/* Série line art hachurée, validée le 26/08/2026.
   Les fichiers ne portent plus que le trait et sa transparence. Sur les bandes
   foncées, ce même trait passe en crème afin de rester lisible sans ajouter
   d'aplat à l'illustration. */
.bande--fonce .hm-illu__img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(12%) saturate(260%) hue-rotate(342deg) brightness(104%);
}

@media (min-width: 62rem) {
  .hm-heros .hm-illu__place { aspect-ratio: 25 / 22; }
  .hm-parcours .hm-scene { grid-template-columns: minmax(0, 60fr) minmax(16rem, 34fr); gap: var(--e12); }
  .hm-parcours .hm-scene > .hm-scene__texte { grid-column: 1; }
  .hm-parcours .hm-scene > .hm-illu { grid-column: 2; }

  .hm-praticien .hm-scene.sortie-gauche {
    grid-template-columns: minmax(0, 46fr) minmax(0, 50fr);
    align-items: start;
  }
  .hm-praticien .hm-scene > .hm-scene__texte {
    grid-column: 2;
    grid-row: 1;
    order: initial;
  }
  .hm-praticien .hm-scene > .hm-praticien__visuels {
    grid-column: 1;
    grid-row: 1 / 3;
    order: initial;
  }
  .hm-praticien .hm-scene > .hm-illu--secondaire {
    grid-column: 2;
    grid-row: 2;
    order: initial;
    inline-size: min(72%, 22rem);
    margin-block-start: var(--e6);
  }

  .hm-technique .hm-scene { grid-template-columns: minmax(0, 54fr) minmax(18rem, 42fr); gap: var(--e12); }
  .hm-prix .hm-scene { grid-template-columns: minmax(0, 60fr) minmax(16rem, 34fr); gap: var(--e12); }
  .hm-lieu .hm-scene { grid-template-columns: minmax(0, 50fr) minmax(0, 46fr); gap: var(--e12); }
  .hm-deroule .hm-scene { grid-template-columns: minmax(0, 58fr) minmax(17rem, 38fr); gap: var(--e12); }
  .hm-fermeture .hm-scene { grid-template-columns: minmax(0, 54fr) minmax(17rem, 38fr); gap: var(--e12); align-items: center; }

  .hm-technique .hm-scene > .hm-scene__texte,
  .hm-prix .hm-scene > .hm-scene__texte,
  .hm-lieu .hm-scene > .hm-scene__texte,
  .hm-deroule .hm-scene > .hm-scene__texte,
  .hm-fermeture .hm-scene > .hm-scene__texte { grid-column: 1; }

  .hm-technique .hm-scene > .hm-illu,
  .hm-prix .hm-scene > .hm-illu,
  .hm-lieu .hm-scene > .hm-illu,
  .hm-deroule .hm-scene > .hm-illu,
  .hm-fermeture .hm-scene > .hm-illu { grid-column: 2; }

  .hm-lieu .hm-illu__place { aspect-ratio: 3 / 1; }
}

/* Cascade finale : les compositions A priment sur les variantes historiques. */
.hm-hero-a > .hm-scene {
  grid-template-columns: minmax(0, 47fr) minmax(22rem, 53fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.hm-hero-a > .hm-scene > .hm-scene__texte { grid-column: 1; max-inline-size: 43rem; }
.hm-hero-a > .hm-scene > .hm-illu { display: block; grid-column: 2; margin: 0; }
.hm-reservation-a > .hm-scene { display: block; grid-template-columns: none; }
.hm-reservation-a > .hm-scene > .hm-scene__texte { max-inline-size: 48rem; margin-inline: auto; }
.hm-reservation-a .pv-quand__corps { display: flex; max-inline-size: 42rem; }
@media (max-width: 61.99rem) {
  .hm-hero-a > .hm-scene { grid-template-columns: minmax(0, 1fr); }
  .hm-hero-a > .hm-scene > .hm-scene__texte,
  .hm-hero-a > .hm-scene > .hm-illu { grid-column: 1; }
}

#parcours.hm-reservation-a .hm-appel {
  min-block-size: 48px;
  padding: 0.9rem 1.4rem;
  background: var(--action);
  border-color: var(--action);
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0;
}
#parcours.hm-reservation-a .hm-appel:hover,
#parcours.hm-reservation-a .hm-appel:focus-visible {
  background: var(--action-sombre);
  color: var(--encre);
}
.hm-reservation-a .hm-avant a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* 09/09/2026 — Gary choisit la composition A ; tarif affiché porté à 100 €. */

#prix { position:relative; z-index:1; --rail-section:var(--rail); padding-block:1.5rem; margin-block:-3rem; color:var(--encre); background:var(--clair); }
#prix > .prix-composition { grid-column:texte-g / texte-d; min-inline-size:0; }
#prix h2,#prix p { margin:0; }
#prix h2 { max-inline-size:none; font-weight:600; letter-spacing:-.045em; text-wrap:normal; }
#prix p { font-size:1.125rem; line-height:1.5; text-wrap:pretty; }
@media(max-width:47.99rem) { #prix { padding-block:1.5rem; margin-block:-1rem; } }
#prix .prix-axe { display:grid; grid-template-columns:minmax(3rem,.15fr) max-content 1.5rem max-content minmax(0,1fr); }
#prix .prix-axe h2 { grid-column:1/-1; display:grid; grid-template-columns:subgrid; align-items:baseline; font-size:3.75rem; line-height:1.08; }
#prix .prix-axe h2::before,#prix .prix-axe h2::after { content:""; height:1px; background:currentColor; align-self:center; transform:translateY(.2rem); }
#prix .prix-axe h2::before { grid-column:1; margin-inline-end:1.5rem; }
#prix .prix-axe__verbe { grid-column:2; font-size:2.25rem; font-weight:400; letter-spacing:-.035em; }
#prix .prix-axe__montant { grid-column:4; }
#prix .prix-axe h2::after { grid-column:5; margin-inline-start:2rem; }
#prix .prix-axe p { grid-column:4/-1; max-inline-size:39ch; margin-block-start:1rem; }
@media(max-width:61.99rem) { #prix .prix-axe h2 { font-size:3rem; } #prix .prix-axe__verbe { font-size:1.875rem; } }
@media(max-width:47.99rem) {
 #prix .prix-axe { grid-template-columns:repeat(4,minmax(0,1fr)); }
 #prix .prix-axe h2 { display:grid; grid-template-columns:subgrid; row-gap:.5rem; font-size:2rem; }
 #prix .prix-axe h2::before { grid-column:1; grid-row:1; margin-inline-end:1rem; }
 #prix .prix-axe__verbe { grid-column:2/5; grid-row:1; font-size:1.5rem; }
 #prix .prix-axe__montant { grid-column:2/4; grid-row:2; }
 #prix .prix-axe h2::after { grid-column:4; grid-row:2; margin-inline-start:.5rem; }
 #prix .prix-axe p { grid-column:2/5; margin-block-start:.75rem; font-size:1.0625rem; }
}


/* 09/09/2026 · D-125 : cabinet rev2 validé par Gary. */
#lieu.hm-cabinet-v6 { display:block; margin:0; padding:48px 0 32px; min-block-size:0; border:0; background:var(--clair); color:var(--encre); }
#lieu.hm-cabinet-v6::before,#lieu.hm-cabinet-v6::after { content:none; }
#lieu .cabinet-arrivee { width:calc(100% - 2 * var(--gouttiere)); max-width:1320px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:32px; }
#lieu .cabinet-arrivee__texte { max-width:500px; }
#lieu #titre-lieu { margin:0; max-width:440px; font-size:48px; font-weight:600; line-height:1.04; letter-spacing:-.045em; text-wrap:balance; }
#lieu .cabinet-arrivee__adresse { display:grid; gap:8px; margin:24px 0 0; font-style:normal; font-size:20px; line-height:1.4; }
#lieu .cabinet-arrivee__adresse strong { font-size:22px; font-weight:600; }
#lieu .cabinet-arrivee__parking { margin:20px 0 0; max-width:360px; font-size:17px; line-height:1.5; text-wrap:pretty; }
#lieu .cabinet-arrivee__itineraire { display:inline-flex; align-items:center; gap:16px; min-height:44px; margin-top:16px; color:inherit; font-size:18px; font-weight:600; text-decoration:none; }
#lieu .cabinet-arrivee__itineraire > span:first-child { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
#lieu .cabinet-arrivee__itineraire:hover > span:first-child { text-decoration-thickness:2px; }
#lieu .cabinet-arrivee__itineraire > span:last-child { font-size:24px; }
#lieu .cabinet-arrivee__itineraire:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
#lieu .cabinet-arrivee__illustration { margin:0; justify-self:end; width:100%; max-width:480px; }
#lieu .cabinet-arrivee__illustration img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; transform:none; }
@media(max-width:61.99rem) {
 #lieu.hm-cabinet-v6 { padding:40px 0 24px; }
 #lieu .cabinet-arrivee { grid-template-columns:1fr; width:calc(100% - 2 * var(--gouttiere)); gap:4px; }
 #lieu #titre-lieu { font-size:36px; line-height:1.08; }
 #lieu .cabinet-arrivee__adresse { margin-top:24px; font-size:18px; }
 #lieu .cabinet-arrivee__adresse strong { font-size:20px; }
 #lieu .cabinet-arrivee__parking { margin-top:16px; font-size:17px; }
 #lieu .cabinet-arrivee__itineraire { margin-top:12px; font-size:18px; }
 #lieu .cabinet-arrivee__illustration { width:min(100%,280px); }
}