/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   la-cote.css — « La cote » : la mesure est le seul ornement de la page.

   Source de vérité : « Kamba - specification La cote.html » (racine du dépôt, 15 septembre 2026).
   Ce fichier est LE registre des valeurs. Le gate tests/one-set-of-values.test.js dérive du bloc
   :root ci-dessous — et de lui seul — les couleurs, tailles, espacements, rayons et traits admis
   dans toute feuille gouvernée (celle-ci, plus le <style> et les style="" de toute page qui la
   lie). Une valeur littérale hors de ce bloc est un bug, pas un détail. Les familles se lisent
   dans les NOMS : --taille-* (échelle §2.2), --espace-* (rampe §2.3), --rayon-* (§2.3),
   --trait-* (§2.3) ; les couleurs se lisent dans les VALEURS.

   Lot 1 (`one-set-of-values`) : jetons §2, états §3, paliers §4, les quatre gabarits partagés §6,
   appliqués à une seule surface témoin (connexion / inscription / mot de passe). Le reste du site
   ne lie pas encore cette feuille et ne bouge pas.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── §5 Les fontes — sept fichiers, auto-hébergés, sous-ensemble latin + latin-étendu ─────────
   Construits par tools/fonts/build-fonts.py depuis les sources OFL (licences dans /fonts/). Nom de
   fichier = empreinte du contenu : le serveur les sert immutables un an. font-display: swap
   partout ; les replis à métriques ajustées (plus bas) font que l'échange ne déplace rien. */
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-roman.ec055471.woff2') format('woff2'); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-italic.1e721d5d.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/plex-sans-400.8dbe39df.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/plex-sans-500.800d9de9.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/plex-sans-600.8f22af2c.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plex-mono-400.09becd8e.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plex-mono-500.f715ea27.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
/* Replis à métriques ajustées — mesurés une fois par tools/fonts/measure-fallbacks.js, puis figés. */
@font-face { font-family: 'Newsreader repli'; src: local('Georgia'); size-adjust: 101.19%; ascent-override: 72.63%; descent-override: 26.19%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Sans repli'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Arial'); size-adjust: 98.75%; ascent-override: 103.79%; descent-override: 27.85%; line-gap-override: 0%; }
@font-face { font-family: 'IBM Plex Mono repli'; src: local('Menlo Regular'), local('Menlo-Regular'), local('Menlo'), local('Consolas'); size-adjust: 99.66%; ascent-override: 102.85%; descent-override: 27.59%; line-gap-override: 0%; }

/* ── §2 Les valeurs — LE bloc de jetons (base mobile ; les paliers §4 le réécrivent plus bas) ── */
:root {
  /* 2.1 Palette — onze jetons, un rôle chacun */
  --papier: #f8f7f3;            /* fond de page, unique fond par défaut */
  --bande: #ecebe4;             /* second fond, alternance de sections */
  --surface-donnee: #ffffff;    /* champs, tableaux, fond des dessins */
  --encre: #1a1d1b;             /* texte, trait du dessin, filets forts — 15,9:1 sur papier (recalculé) */
  --cote: #8a6a1e;              /* cotes, numéros d'étape, étiquettes mono — 4,7:1 sur papier, jamais sous 11 pt */
  --piece: #bda06f;             /* silhouettes de quincaillerie — jamais du texte */
  --action: #23483b;            /* bouton primaire, liens, validé, anneau de focus — 9,5:1 */
  --alerte-trait: #9a4e14;      /* contour 1,5 px des avertissements et des champs en erreur */
  --alerte-fond: #fbf0e3;       /* fond de ces blocs */
  --alerte-encre: #7d3f10;      /* texte sur alerte-fond — 7,2:1 ; toujours à pleine opacité */
  /* `fix-to-the-wall` (décision de Renaud du 18/10, lots 44 et 46 du marketing, partie C) : un SECOND registre
     d'alerte, rouge, pour la fixation au mur obligatoire et le basculement (niveaux 2 à 4). Le premier (ambre)
     reste celui de tous les autres avertissements et du niveau 1. */
  --danger-trait: #a8231c;      /* contour 1,5 px de l'avertissement grave — 6,3:1 sur danger-fond */
  --danger-fond: #fcecea;       /* fond de ces blocs */
  --danger-encre: #8a1c16;      /* texte sur danger-fond — 8,1:1 ; toujours à pleine opacité */
  --filet-fort: rgba(26, 29, 27, 0.30);     /* tête de tableau, fin de bloc, contour de champ */
  --filet-section: rgba(26, 29, 27, 0.18);  /* séparation de sections */
  --filet-liste: rgba(26, 29, 27, 0.12);    /* lignes d'une liste */
  /* Opacités de texte sur papier (§2.1) : 100 % = --encre, 82 % prose secondaire, étiquette mono.
     ⚠ La spéc dit 60 % pour l'étiquette : recalculé, 60 % rend 4,38:1 sur papier et 4,22:1 sur
     bande, sous le 4,5:1 non négociable du même document. 64 % est la première valeur qui tient
     sur papier (4,97), bande (4,76) et surface-donnée (5,11). Décision consignée dans RESULT.md. */
  --encre-secondaire: rgba(26, 29, 27, 0.82);
  --encre-etiquette: rgba(26, 29, 27, 0.64);
  /* Teintes d'état (§3) — chaque valeur est une cellule de la table des états */
  --encre-50: rgba(26, 29, 27, 0.50);   /* champ survolé : contour 30 → 50 % */
  --encre-45: rgba(26, 29, 27, 0.45);   /* texte désactivé — primaire, champ, carte */
  --encre-40: rgba(26, 29, 27, 0.40);   /* texte désactivé — secondaire, segment */
  --encre-35: rgba(26, 29, 27, 0.35);   /* glyphe du stepper en butée */
  --encre-15: rgba(26, 29, 27, 0.15);   /* contour désactivé */
  --encre-12: rgba(26, 29, 27, 0.12);   /* fond désactivé du primaire ; touche active du stepper */
  --encre-08: rgba(26, 29, 27, 0.08);   /* secondaire actif */
  --encre-06: rgba(26, 29, 27, 0.06);   /* stepper et segment survolés */
  --action-survol: #1b3a2f;             /* primaire survolé (−12 % L) ; lien survolé */
  --action-actif: #16291f;              /* primaire actif */
  --lien-actif: #0f1f18;                /* lien actif */

  /* 2.2 Échelle typographique — trois familles, trois emplois disjoints (colonne MOBILE ici) */
  --police-lecture: 'Newsreader', 'Newsreader repli', Georgia, serif;             /* ce qui se lit */
  --police-interface: 'IBM Plex Sans', 'IBM Plex Sans repli', system-ui, sans-serif; /* ce qui s'actionne */
  --police-mesure: 'IBM Plex Mono', 'IBM Plex Mono repli', ui-monospace, monospace;  /* ce qui se mesure */
  --taille-d1: 36px;          --interligne-d1: 1.08;       --lettrage-d1: -0.015em;
  --taille-h2: 26px;          --interligne-h2: 1.15;       --lettrage-h2: -0.01em;
  --taille-h3: 16px;          --interligne-h3: 1.3;
  --taille-h4: 17px;          --interligne-h4: 1.3;
  --taille-prose: 16px;       --interligne-prose: 1.6;     --mesure-prose: 70ch;
  --taille-valeur: 22px;      --interligne-valeur: 1.1;
  --taille-unite: 12px;
  --taille-interface: 14px;   --interligne-interface: 1.55;
  --taille-intitule: 14px;    --interligne-intitule: 1.3;
  --taille-bouton: 14px;      --interligne-bouton: 1;
  --taille-etiquette: 11px;   --interligne-etiquette: 1.3; --lettrage-etiquette: 0.14em;
  --taille-donnee: 12px;      --interligne-donnee: 1.45;
  --taille-cote-dessin: 11px; --interligne-cote-dessin: 1; --lettrage-cote-dessin: 0.02em;

  /* 2.3 Grille */
  --gouttiere: 24px;
  --largeur-contenu: 1280px;
  --marge-page: 16px;             /* < 600 ; 24 dès 600 ; 28 dès 880 (§4) */
  --largeur-formulaire: 440px;    /* gabarit « formulaire étroit » (§1) */
  --rail-guide: 320px;            /* rail latéral des guides (§4, ≥ 1080) */
  /* Espacement : unité 4 px, rampe close — toute autre valeur est un bug */
  --espace-4: 4px;  --espace-8: 8px;  --espace-12: 12px; --espace-16: 16px; --espace-24: 24px;
  --espace-32: 32px; --espace-44: 44px; --espace-56: 56px; --espace-80: 80px;
  /* Rayons : 0 partout, deux exceptions */
  --rayon-bouton: 4px;
  --rayon-pastille: 50%;
  /* Traits : trois épaisseurs, pas quatre */
  --trait-filet: 1px;      /* séparations, contours de champ */
  --trait-dessin: 1.5px;   /* trait de dessin, contour d'avertissement, champ en erreur */
  --trait-anneau: 2px;     /* anneau de focus */
  /* §3 Règles transverses */
  --anneau-decalage: 2px;  /* outline-offset de l'anneau */
  --cible-tactile: 48px;   /* minimum, sans exception */
  --duree: 120ms;          /* background-color et border-color uniquement */
}

/* ── §4 Paliers — quatre, en min-width, sur une base mobile ──────────────────────────────────── */
@media (min-width: 600px) {
  :root {
    --marge-page: 24px;
    --taille-d1: 58px;     --interligne-d1: 1.06;
    --taille-h2: 36px;     --interligne-h2: 1.12;
    --taille-h3: 18px;
    --taille-h4: 20px;     --interligne-h4: 1.25;
    --taille-valeur: 26px;
    --taille-etiquette: 12px;
  }
}
@media (min-width: 880px) {
  :root { --marge-page: 28px; }
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papier); }
.la-cote {
  color: var(--encre);
  font-family: var(--police-interface);
  font-size: var(--taille-interface);
  line-height: var(--interligne-interface);
}
.la-cote img, .la-cote svg { display: block; max-width: 100%; }
/* :where() keeps this base at zero specificity: a component rule (.bouton--primaire { color }) must win
   over it — measured 1,67:1 on the primary button before this was so (encre on action). */
:where(.la-cote) button, :where(.la-cote) input, :where(.la-cote) select, :where(.la-cote) textarea { font: inherit; color: inherit; }

/* Règle transverse du focus (§3), non négociable : jamais supprimée, jamais remplacée par un fond. */
:focus-visible { outline: var(--trait-anneau) solid var(--action); outline-offset: var(--anneau-decalage); }
.avertissement :focus-visible { outline-color: var(--alerte-encre); }

/* ── Niveaux typographiques (§2.2) ────────────────────────────────────────────────────────────── */
.d1 { font-family: var(--police-lecture); font-weight: 300; font-size: var(--taille-d1); line-height: var(--interligne-d1); letter-spacing: var(--lettrage-d1); text-wrap: balance; }
.h2 { font-family: var(--police-lecture); font-weight: 300; font-size: var(--taille-h2); line-height: var(--interligne-h2); letter-spacing: var(--lettrage-h2); text-wrap: balance; }
.h3 { font-family: var(--police-lecture); font-weight: 500; font-size: var(--taille-h3); line-height: var(--interligne-h3); }
.h4 { font-family: var(--police-lecture); font-weight: 500; font-size: var(--taille-h4); line-height: var(--interligne-h4); }
.prose { font-family: var(--police-lecture); font-weight: 400; font-size: var(--taille-prose); line-height: var(--interligne-prose); max-width: var(--mesure-prose); text-wrap: pretty; }
.prose--secondaire { color: var(--encre-secondaire); }
.valeur { font-family: var(--police-lecture); font-weight: 400; font-size: var(--taille-valeur); line-height: var(--interligne-valeur); font-variant-numeric: tabular-nums; }
.valeur__unite { font-family: var(--police-mesure); font-weight: 400; font-size: var(--taille-unite); font-variant-numeric: tabular-nums; }
.intitule { font-family: var(--police-interface); font-weight: 600; font-size: var(--taille-intitule); line-height: var(--interligne-intitule); }
.etiquette { font-family: var(--police-mesure); font-weight: 400; font-size: var(--taille-etiquette); line-height: var(--interligne-etiquette); letter-spacing: var(--lettrage-etiquette); text-transform: uppercase; color: var(--encre-etiquette); font-variant-numeric: tabular-nums; }
.donnee { font-family: var(--police-mesure); font-weight: 400; font-size: var(--taille-donnee); line-height: var(--interligne-donnee); font-variant-numeric: tabular-nums; }
.cote-dessin { font-family: var(--police-mesure); font-weight: 400; font-size: var(--taille-cote-dessin); line-height: var(--interligne-cote-dessin); letter-spacing: var(--lettrage-cote-dessin); color: var(--cote); font-variant-numeric: tabular-nums; }

/* ── §3 Les états — huit composants ───────────────────────────────────────────────────────────── */

/* Boutons. Le libellé : Plex Sans 500, 14 / 1, lettrage 0. Rayon 4 px (l'une des deux exceptions). */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-8);
  min-height: var(--cible-tactile); padding: 0 var(--espace-16);
  border-radius: var(--rayon-bouton);
  font-family: var(--police-interface); font-weight: 500; font-size: var(--taille-bouton); line-height: var(--interligne-bouton); letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--duree), border-color var(--duree);
}
.bouton--pleine { width: 100%; }
.bouton--primaire { background: var(--action); color: var(--papier); border: 0; }
.bouton--primaire:hover { background: var(--action-survol); }
.bouton--primaire:active { background: var(--action-actif); }
.bouton--primaire[aria-disabled="true"] { background: var(--encre-12); color: var(--encre-45); cursor: default; }
/* Secondaire. ⚠ La spéc écrit « contour 1 px → 1,5 px » au survol ; c'est un déplacement de géométrie,
   que sa propre règle transverse interdit. Le survol renforce le contour par la couleur (encre) et
   le fond (bande), à épaisseur constante. Décision consignée dans RESULT.md. */
.bouton--secondaire { background: var(--surface-donnee); color: var(--encre); border: var(--trait-filet) solid var(--filet-fort); }
.bouton--secondaire:hover { background: var(--bande); border-color: var(--encre); }
.bouton--secondaire:active { background: var(--encre-08); }
.bouton--secondaire[aria-disabled="true"] { border-color: var(--encre-15); color: var(--encre-40); cursor: default; }
/* Chargement : libellé remplacé par le verbe d'attente, largeur figée par le script, aria-busy. */
.bouton[aria-busy="true"] { cursor: progress; }
.bouton__icone { width: var(--espace-24); height: var(--espace-24); flex: 0 0 auto; }

/* Champ texte / nombre */
.champ { display: block; }
.champ + .champ, .champ + .segments, .segments + .champ { margin-top: var(--espace-16); }
.champ__intitule { display: block; font-family: var(--police-interface); font-weight: 600; font-size: var(--taille-intitule); line-height: var(--interligne-intitule); margin-bottom: var(--espace-8); }
.champ__intitule-note { font-weight: 400; color: var(--encre-secondaire); }
.champ__saisie {
  display: block; width: 100%; min-height: var(--cible-tactile); padding: 0 var(--espace-12);
  background: var(--surface-donnee); color: var(--encre);
  border: var(--trait-filet) solid var(--filet-fort); border-radius: 0;
  font-family: var(--police-interface); font-size: var(--taille-interface); line-height: var(--interligne-interface);
  transition: background-color var(--duree), border-color var(--duree);
}
.champ__saisie::placeholder { color: var(--encre-etiquette); opacity: 1; }
.champ__saisie:hover { border-color: var(--encre-50); }
.champ__saisie:disabled, .champ__saisie[aria-disabled="true"] { background: var(--bande); border-color: var(--encre-15); color: var(--encre-45); }
.champ__saisie[aria-invalid="true"], .champ--erreur .champ__saisie { border: var(--trait-dessin) solid var(--alerte-trait); }
.champ__erreur { display: block; margin-top: var(--espace-8); font-family: var(--police-interface); font-size: var(--taille-donnee); line-height: var(--interligne-etiquette); color: var(--alerte-encre); }
.champ__aide[hidden] { display: none; }
.champ__aide { display: block; margin-top: var(--espace-8); font-size: var(--taille-interface); line-height: var(--interligne-interface); color: var(--encre-secondaire); }
/* Chargement d'un champ : contenu masqué par un rectangle bande, hauteur conservée */
.champ--attente .champ__saisie { background: var(--bande); color: transparent; }

/* Segment (type, pays, unités — et les onglets connexion / inscription) */
.segments { display: flex; border: var(--trait-filet) solid var(--filet-fort); background: var(--surface-donnee); }
.segment {
  flex: 1 1 0; min-height: var(--cible-tactile); padding: 0 var(--espace-12);
  background: transparent; color: var(--encre); border: 0; border-radius: 0;
  font-family: var(--police-interface); font-weight: 500; font-size: var(--taille-bouton); line-height: var(--interligne-bouton);
  cursor: pointer; transition: background-color var(--duree);
}
.segment + .segment { border-left: var(--trait-filet) solid var(--filet-liste); }
.segment:hover { background: var(--encre-06); }
.segment[aria-pressed="true"], .segment.active { background: var(--action); color: var(--papier); }
.segment[aria-disabled="true"] { color: var(--encre-40); cursor: default; }
.segment__bientot { font-family: var(--police-mesure); font-size: var(--taille-cote-dessin); text-transform: uppercase; letter-spacing: var(--lettrage-etiquette); }
.segments[aria-busy="true"] .segment { pointer-events: none; cursor: progress; }
.segments--erreur { border: var(--trait-dessin) solid var(--alerte-trait); }

/* Stepper (− / valeur / +) */
.stepper { display: inline-flex; align-items: stretch; border: var(--trait-filet) solid var(--filet-fort); background: var(--surface-donnee); }
.stepper__touche { min-width: var(--cible-tactile); min-height: var(--cible-tactile); background: transparent; border: 0; border-radius: 0; cursor: pointer; transition: background-color var(--duree); }
.stepper__touche:hover { background: var(--encre-06); }
.stepper__touche:active { background: var(--encre-12); }
.stepper__touche[aria-disabled="true"] { color: var(--encre-35); cursor: default; }
.stepper__valeur { display: inline-flex; align-items: center; padding: 0 var(--espace-12); font-family: var(--police-mesure); font-size: var(--taille-donnee); font-variant-numeric: tabular-nums; border-left: var(--trait-filet) solid var(--filet-liste); border-right: var(--trait-filet) solid var(--filet-liste); }
.stepper--erreur { border: var(--trait-dessin) solid var(--alerte-trait); }

/* Carte / ligne cliquable */
.ligne-cliquable { display: block; background: var(--surface-donnee); color: inherit; text-decoration: none; border: var(--trait-filet) solid var(--filet-liste); padding: var(--espace-16); transition: background-color var(--duree), border-color var(--duree); }
.ligne-cliquable:hover { border-color: var(--filet-fort); }
.ligne-cliquable:active { background: var(--bande); }
.ligne-cliquable[aria-disabled="true"] { color: var(--encre-45); cursor: default; }
.ligne-cliquable--erreur { border: var(--trait-dessin) solid var(--alerte-trait); }
.squelette { background: var(--bande); color: transparent; }

/* Lien. Souligné au repos aussi (le lien ne peut pas tenir à la couleur seule — WCAG 1.4.1) ;
   la spéc ne nomme que le survol : décision consignée dans RESULT.md. */
.lien, .case__texte a, .prose a, .message-etat a { color: var(--action); text-decoration: underline; text-decoration-thickness: var(--trait-filet); text-underline-offset: var(--anneau-decalage); }
.lien:hover, .case__texte a:hover, .prose a:hover, .message-etat a:hover { color: var(--action-survol); }
.lien:active, .case__texte a:active, .prose a:active, .message-etat a:active { color: var(--lien-actif); }
.lien[aria-disabled="true"] { color: inherit; text-decoration: none; pointer-events: none; }
.lien--bloc { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }

/* Bloc « calculé par Kamba » */
.calcule { display: block; }
.calcule__valeur { font-family: var(--police-lecture); font-size: var(--taille-valeur); line-height: var(--interligne-valeur); font-variant-numeric: tabular-nums; }
.calcule__unite { font-family: var(--police-mesure); font-size: var(--taille-unite); }
.calcule--attente .calcule__valeur { background: var(--bande); color: transparent; }
.calcule__attente { font-family: var(--police-mesure); font-size: var(--taille-donnee); color: var(--encre-etiquette); }

/* Bloc d'avertissement (§2 palette, §3) — l'élément de plus fort contraste de l'écran */
.avertissement { border: var(--trait-dessin) solid var(--alerte-trait); background: var(--alerte-fond); color: var(--alerte-encre); padding: var(--espace-12) var(--espace-16); font-size: var(--taille-interface); line-height: var(--interligne-interface); }
.avertissement a { color: inherit; }

/* Message d'état en prose (succès, information) — la spéc n'a pas de bloc pour eux ; voir RESULT.md */
.message-etat { font-size: var(--taille-interface); line-height: var(--interligne-interface); color: var(--encre); }

/* Séparateur à libellé (« ou continuer par e-mail ») */
.separateur { display: flex; align-items: center; gap: var(--espace-12); margin: var(--espace-16) 0; }
.separateur::before, .separateur::after { content: ''; flex: 1 1 0; border-top: var(--trait-filet) solid var(--filet-liste); }

/* Case à cocher — la ligne entière est la cible (48 px) */
.case { display: flex; align-items: flex-start; gap: var(--espace-12); min-height: var(--cible-tactile); padding: var(--espace-12) 0; cursor: pointer; }
.case__boite { flex: 0 0 auto; width: var(--espace-24); height: var(--espace-24); margin: 0; accent-color: var(--action); cursor: pointer; }
.case__texte { font-size: var(--taille-interface); line-height: var(--interligne-interface); cursor: pointer; }

/* Utilitaires d'état de page (les scripts basculent ces classes) */
.hidden { display: none; }
.panel { display: none; }
.panel.active { display: block; }
.alerte-page { display: none; }
.alerte-page.show { display: block; margin-bottom: var(--espace-16); }

/* ── §6 Les quatre gabarits partagés ──────────────────────────────────────────────────────────── */

/* Formulaire étroit — une colonne, 440 px, champs du §3. Rythme : 44 de padding, 24 sous le H2,
   16 entre blocs frères, 8 dans un bloc. */
.formulaire-etroit { width: 100%; max-width: var(--largeur-formulaire); margin: 0 auto; padding: var(--espace-44) 0; }
.formulaire-etroit__entete { margin-bottom: var(--espace-24); }
.formulaire-etroit__marque { display: inline-flex; align-items: center; min-height: var(--cible-tactile); min-width: var(--cible-tactile); margin-bottom: var(--espace-8); }
.formulaire-etroit__logo { height: 36px; width: auto; }
.formulaire-etroit__titre { margin-bottom: var(--espace-8); }
.formulaire-etroit__bloc + .formulaire-etroit__bloc, .formulaire-etroit__bloc + .champ, .champ + .formulaire-etroit__bloc { margin-top: var(--espace-16); }
.formulaire-etroit__action { margin-top: var(--espace-24); }
.formulaire-etroit__pied { margin-top: var(--espace-24); color: var(--encre-secondaire); }
.formulaire-etroit__pied .lien { color: var(--action); }

/* Message étroit — même colonne, un titre, une prose, un bouton primaire */
.message-etroit { width: 100%; max-width: var(--largeur-formulaire); margin: 0 auto; padding: var(--espace-44) 0; }
.message-etroit__titre { margin-bottom: var(--espace-24); }
.message-etroit__texte + .message-etroit__texte { margin-top: var(--espace-16); }
.message-etroit__action { margin-top: var(--espace-24); }

/* Ligne de réglage — intitulé à gauche, contrôle à droite, filet 1 px */
.ligne-reglage { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-16); min-height: var(--cible-tactile); padding: var(--espace-12) 0; border-bottom: var(--trait-filet) solid var(--filet-liste); }
.ligne-reglage__intitule { font-family: var(--police-interface); font-weight: 600; font-size: var(--taille-intitule); line-height: var(--interligne-intitule); }
.ligne-reglage__aide { display: block; margin-top: var(--espace-4); font-weight: 400; color: var(--encre-secondaire); }
.ligne-reglage__controle { flex: 0 0 auto; }

/* Question de pose — intitulé, aide, réponses (segments ≤ 3, grille au-delà), lien de référence,
   ligne décidée. Cinq éléments dans un ordre fixe (arbitrage du 2026-09-16, lot `one-question-shape`) :
   le gabarit a été FORMALISÉ depuis l'écran qui existait — l'intitulé est celui de la ligne de
   réglage (Plex Sans 600 / 14), l'aide est le corps de l'interface (Plex Sans 400 / 14) à l'encre
   secondaire. Les valeurs de lecture (Newsreader, prose) que ces deux règles portaient ne
   sélectionnaient rien : elles ont été remplacées, pas complétées. */
.question-pose + .question-pose { margin-top: var(--espace-32); }
.question-pose__intitule { font-family: var(--police-interface); font-weight: 600; font-size: var(--taille-intitule); line-height: var(--interligne-intitule); margin-bottom: var(--espace-8); }
.question-pose__aide { font-family: var(--police-interface); font-weight: 400; font-size: var(--taille-interface); line-height: var(--interligne-interface); color: var(--encre-secondaire); max-width: var(--mesure-prose); margin: 0 0 var(--espace-16); text-wrap: pretty; }
.question-pose__reponses { margin-bottom: var(--espace-8); }
.question-pose__erreur { display: block; margin-top: var(--espace-8); font-size: var(--taille-donnee); color: var(--alerte-encre); }
.question-pose__reference { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }

/* Page : la colonne de contenu, avec la marge du palier */
.page-la-cote { width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; padding: 0 var(--marge-page); }

/* ── Mouvement ────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .la-cote *, .la-cote *::before, .la-cote *::after { transition: none; }
}