/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   lecture.css — « La cote » sur les pages qu'on vient LIRE (lot `the-reading-room`, lot 3b du
   redesign) : les guides, le hub des guides, les pages de référence et la 404 — et, depuis
   `join-the-waitlist`, la page d'inscription /waitlist, qui en prend le gabarit.
   @registre /css/la-cote.css

   Source de vérité : « Kamba - specification La cote.html » (racine du dépôt, 15 septembre 2026),
   dont le pied de page dit la règle : « toute valeur absente de ce document est une décision non
   prise ». Cette feuille n'invente donc AUCUNE valeur : chaque couleur, taille, espacement, rayon
   et trait est un jeton de public/css/la-cote.css (§2), et le gate tests/one-set-of-values.test.js
   le vérifie — ces pages sont GOUVERNÉES, elles tiennent zéro littéral hors du registre.

   Ce que la spécification dit de ces pages, et donc ce que fait ce fichier :
     §1  « Guides éditoriaux — Maquettée » · « Pages de référence — Couverte : gabarit de la page
          guide, sans le rail d'outil » · « 404 — Couverte : gabarit "message étroit" ». Le rail
          d'outil (« essayez avec vos mesures ») est posé par le lot 3c-a (`try-it-here`) : la
          page guide ci-dessous. L'article garde la largeur que le §4 lui donne À CÔTÉ du rail
          (1fr contre 320 px dans 1 280), celle qu'il avait déjà quand la colonne était vide.
     §6  « Accueil, guides, référence, … 404 — Restylé : structure et copie inchangées. Ce sont des
          classes et des balises sémantiques qui changent, pas l'ordre du contenu. » Les crochets
          de mise en page (.ref-article, .ref-table, .guide-steps, .tool-card, .hub-list…) gardent
          leur nom parce que les gates SEO et le rendu SSR s'y accrochent ; c'est le VOCABULAIRE qui
          passe à celui de la direction (.d1, .h2, .prose, .etiquette, .lien, .bouton, .donnee).
     §2.2 Trois familles, trois emplois disjoints : Newsreader pour ce qui se lit (titres, prose),
          Plex Sans pour ce qui s'actionne (fil d'Ariane, en-tête, boutons, tableaux), Plex Mono
          pour ce qui se mesure (étiquettes, numéros d'étape, temps de lecture).
     §2.3 Rythme d'une section : 44 de padding, 24 sous un H2, 16 entre blocs frères, 8 dans un
          bloc. Rayons 0 (le bouton excepté). Aucune carte arrondie, aucune ombre, aucun dégradé.
     §4  Quatre paliers en min-width sur une base mobile. Les tableaux : voir le bloc « Tableaux »
          plus bas — le palier < 600 y est une déviation NOMMÉE, pas un oubli.
     §7 (arbitrages, 2026-09-16) Le hub : « pas de grille de cartes — vingt-trois cartes font un
          mur, pas un index. Un sommaire à filets, groupé par intention, avec le temps de lecture à
          droite. » C'est le vocabulaire du sommaire du PDF.

   🔴 LES RESETS S'ÉCRIVENT EN :where(), SANS EXCEPTION. Un reset de base à spécificité (0,1,1)
   a mangé la couleur du bouton primaire au lot 1 — contraste tombé à 1,67:1, invisible pour un
   gate unitaire, attrapé seulement en e2e sur la page SERVIE. Toute règle de cette feuille qui
   pose un défaut sur un ÉLÉMENT (p, li, td, a…) passe par :where(), pour qu'une classe de
   composant (.bouton--primaire, .etiquette, .lien) gagne toujours.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Lien d'évitement — hors écran jusqu'au focus, où il redevient une cible de 48 px ──────── */
.saut-contenu { position: absolute; left: 0; top: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut-contenu:focus-visible { position: static; overflow: visible; clip-path: none; margin: var(--espace-8); }

/* ── La page : le pied reste en bas, même quand le message est court (la 404) ──────────────── */
:where(body.la-cote) { min-height: 100vh; display: flex; flex-direction: column; }
:where(.la-cote main) { flex: 1 0 auto; }

/* ── En-tête de page ───────────────────────────────────────────────────────────────────────────
   Le même en-tête que l'accueil (accueil.css), sans la navigation primaire : ces pages n'en ont
   jamais eu — logo, langue, connexion, action. Un filet de section sous la barre, pas une ombre.
   L'en-tête GLOBAL est le lot 2 de la direction ; le jour où il existe, ces règles partent. */
.site-header { background: var(--papier); border-bottom: var(--trait-filet) solid var(--filet-section); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-16); flex-wrap: wrap; padding: var(--espace-8) var(--marge-page); width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; }
.logo { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.logo img { height: var(--espace-24); width: auto; }
.header__actions { display: flex; align-items: center; gap: var(--espace-8); flex-wrap: wrap; }
/* Le sélecteur de langue est un champ (§3) : même contour, même cible, même anneau. */
.lang-select { width: auto; padding: 0 var(--espace-12); }
/* 48 px DANS LES DEUX SENS (leçon de l'accueil : « Tarifs » mesurait 44 px de large). */
.lien--bloc { min-width: var(--cible-tactile); }

/* ── La page guide : l'article, puis le rail d'outil (lot `try-it-here`, 3c-a) ────────────────
   §4 ≥ 1080 : « guides (article 1fr / rail 320 px) » ; ≥ 880 : « Guides : le rail latéral passe
   sous l'article ». Le rail est l'amorce de l'accueil, montée une troisième fois (sa feuille est
   /css/amorce.css) ; ici, seulement SA PLACE. Il est dans le document APRÈS l'article, donc :
     < 1080  il vient en fin d'article, une seule fois, à la largeur de la colonne de texte — à la
             place de l'ancien bouton du bloc de fin (un seul appel à l'action, pas deux) ;
     ≥ 1080  la grille ouvre sa seconde piste et le rail y est COLLANT (« persistant », tour 2).
   Le calcul est celui que `the-reading-room` avait posé : la colonne d'article garde EXACTEMENT la
   largeur qu'elle avait à côté du rail vide (1 280 − 320 − 24, moins les marges de page). */
.page-guide { width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; }
.page-guide > .ref-article { padding-bottom: var(--espace-44); }
.page-guide > .amorce--rail { width: calc(100% - var(--marge-page) - var(--marge-page)); max-width: calc(var(--largeur-contenu) - var(--rail-guide) - var(--gouttiere) - var(--marge-page) - var(--marge-page)); margin: 0 auto var(--espace-80); }

/* ── La colonne de l'article ───────────────────────────────────────────────────────────────────
   §4, ≥ 1080 : « guides (article 1fr / rail 320 px) », contenu plafonné à 1 280. Le rail est le
   lot 3c ; l'article prend dès maintenant la largeur qu'il aura À CÔTÉ de lui — dérivée des trois
   jetons, jamais tapée — et la prose s'y limite à sa mesure (70 ch, registre). */
.ref-article { width: 100%; max-width: calc(var(--largeur-contenu) - var(--rail-guide) - var(--gouttiere)); margin: 0 auto; padding: var(--espace-44) var(--marge-page) var(--espace-80); }
:where(.ref-article p, .ref-article li, .ref-article dd, .ref-article figcaption) { 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; }
:where(.ref-article p + p) { margin-top: var(--espace-16); }
:where(.ref-article h2) { margin-top: var(--espace-44); margin-bottom: var(--espace-24); }
:where(.ref-article h3) { margin-top: var(--espace-24); margin-bottom: var(--espace-8); }
:where(.ref-article h2 + p, .ref-article h2 + ul, .ref-article h2 + ol, .ref-article h2 + table, .ref-article h2 + .ref-table-wrap) { margin-top: 0; }
:where(.ref-article ul, .ref-article ol) { margin: var(--espace-16) 0; padding-left: var(--espace-24); }
:where(.ref-article li + li) { margin-top: var(--espace-8); }
:where(.ref-article strong) { font-weight: 500; color: var(--encre); }
/* Le lien de prose est celui du registre (.lien) ; le repos est souligné, la couleur est --action. */
:where(.ref-article a) { color: var(--action); text-decoration: underline; text-decoration-thickness: var(--trait-filet); text-underline-offset: var(--anneau-decalage); }
:where(.ref-article a:hover) { color: var(--action-survol); }
:where(.ref-article a:active) { color: var(--lien-actif); }
/* Une ancre visée par le sommaire d'une page longue (#safety, #tool-…) s'arrête sous l'en-tête. */
:where(.ref-article [id]) { scroll-margin-top: var(--espace-80); }

/* Fil d'Ariane : de l'interface (Plex Sans), en encre secondaire ; chaque maillon est une cible. */
.ref-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--espace-4); margin-bottom: var(--espace-16); color: var(--encre-secondaire); }
.ref-breadcrumb .sep { color: var(--encre-etiquette); padding: 0 var(--espace-4); }
.ref-breadcrumb .current { color: var(--encre); }
/* Le chapeau (« Guide », « Reference ») est une étiquette mono ; le H1 est le D1. */
.ref-eyebrow { display: block; margin-bottom: var(--espace-12); }
:where(.ref-article h1) { margin-bottom: var(--espace-24); }
.ref-intro { margin-bottom: var(--espace-16); }
/* La note d'origine (« Figures for France… ») : la prose, en italique (la seule italique servie). */
.ref-note { font-style: italic; color: var(--encre-secondaire); }
.ref-label { margin-top: var(--espace-16); font-weight: 500; color: var(--encre); }
.ref-kamba, .part-beat strong, .bevel-verdict strong { font-weight: 500; color: var(--encre); }
.part-beat { margin-bottom: var(--espace-12); }
.ref-xref { margin-top: var(--espace-32); }
.ref-list { margin-top: var(--espace-16); }

/* ── Les étapes numérotées d'un guide ───────────────────────────────────────────────────────────
   Une liste à filets : le numéro d'étape est une COTE (Mono, --cote — §2.1), dans une colonne de
   44 px, le titre d'étape est un titre de bloc (H3, §2.2), le corps est la prose. */
.guide-steps { list-style: none; margin: var(--espace-32) 0 var(--espace-8); padding: 0; counter-reset: gstep; border-top: var(--trait-filet) solid var(--filet-fort); }
.guide-steps > li { counter-increment: gstep; position: relative; padding: var(--espace-16) 0 var(--espace-24) var(--espace-56); margin: 0; border-bottom: var(--trait-filet) solid var(--filet-liste); }
.guide-steps > li::before { content: counter(gstep); position: absolute; left: 0; top: var(--espace-16); width: var(--espace-44); font-family: var(--police-mesure); font-weight: 400; font-size: var(--taille-valeur); line-height: var(--interligne-h3); color: var(--cote); font-variant-numeric: tabular-nums; }
.guide-step-title { margin: 0 0 var(--espace-8); }
.guide-steplink { margin-top: var(--espace-8); }

/* ── Tableaux (les références, l'aperçu des outils, les comparaisons) ────────────────────────────
   Un bloc de données : fond --surface-donnee, tête de tableau sur un filet FORT, lignes sur un
   filet de LISTE, aucun rayon. Le texte des cellules est le corps d'interface (Plex Sans 14) : ces
   tableaux comparent des MOTS (« Lowest », « Paint only »), pas des mesures, et la « donnée
   tabulaire » Mono 12 du §2.2 est réservée à ce qui se mesure (les colonnes de cotes).
   §4 < 600 : « chaque ligne devient un bloc "intitulé au-dessus, valeur en dessous", l'en-tête
   disparaît et se répète comme étiquette de ligne ». Tenu depuis `try-it-here` (lot 3c-a) — la
   déviation que `the-reading-room` avait nommée est payée :
     · l'étiquette répétée est le NOM DE LA COLONNE, porté par chaque cellule dans `data-label` et
       traduit par le SIXIÈME porteur (`data-i18n-label`, dans les DEUX résolveurs : SSR
       shared/landing-ssr.js et navigateur public/js/kamba-i18n.js) ; le CSS le peint par attr() ;
     · 🔴 le texte peint est MUET pour l'accessibilité (`content: … / ""`, le texte alternatif du
       contenu généré) : la cellule garde son rôle et son en-tête de colonne, le lecteur d'écran
       annonce déjà « MDF » par l'association — l'étiquette peinte le dirait une seconde fois ;
     · l'en-tête disparaît À L'ÉCRAN seulement (masqué hors écran, jamais `display: none`), pour
       que les cellules d'en-tête restent dans l'arbre d'accessibilité ;
     · les rôles de tableau sont POSÉS dans le balisage (table / rowgroup / row / columnheader /
       rowheader / cell) : passer un tableau en `display: block` retire ses rôles implicites dans
       plusieurs moteurs, et l'association cellule ↔ en-tête avec eux. Mesuré au navigateur, les
       deux options : voir handoff/tih-table-a11y.txt.
   Base mobile (§4 : paliers en min-width) : empilé d'abord, le tableau revient à ≥ 600. */
.ref-table-wrap { overflow-x: auto; margin: var(--espace-16) 0; }
.ref-table { width: 100%; border-collapse: collapse; margin: var(--espace-16) 0; background: var(--surface-donnee); border: var(--trait-filet) solid var(--filet-liste); font-family: var(--police-interface); font-size: var(--taille-interface); line-height: var(--interligne-interface); }
.ref-table-wrap > .ref-table { margin: 0; }
.ref-table caption { text-align: left; padding: 0 0 var(--espace-8); color: var(--encre-secondaire); caption-side: top; }
.ref-table th, .ref-table td { padding: var(--espace-8) var(--espace-12); text-align: left; vertical-align: middle; }
.ref-table thead th { font-weight: 600; font-size: var(--taille-intitule); line-height: var(--interligne-intitule); color: var(--encre); border-bottom: var(--trait-filet) solid var(--filet-fort); background: var(--bande); }
.ref-table tbody th { font-weight: 500; color: var(--encre); }
/* < 600 — la ligne est un bloc, chaque cellule est « étiquette au-dessus, valeur en dessous ». */
.ref-table, .ref-table tbody, .ref-table tr, .ref-table tbody th, .ref-table td { display: block; }
.ref-table thead { position: absolute; overflow: hidden; clip-path: inset(50%); white-space: nowrap; width: var(--trait-filet); height: var(--trait-filet); }
.ref-table tbody tr { padding: var(--espace-8) var(--espace-12); }
.ref-table tbody tr + tr { border-top: var(--trait-filet) solid var(--filet-liste); }
.ref-table tbody th, .ref-table tbody td { padding: var(--espace-4) 0; }
.ref-table tbody [data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; 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); }
@media (min-width: 600px) {
  .ref-table { display: table; }
  .ref-table thead { position: static; overflow: visible; clip-path: none; white-space: normal; width: auto; height: auto; display: table-header-group; }
  .ref-table tbody { display: table-row-group; }
  .ref-table tr { display: table-row; }
  .ref-table tbody th, .ref-table td { display: table-cell; }
  .ref-table tbody tr { padding: 0; }
  .ref-table tbody tr + tr { border-top: 0; }
  .ref-table tbody th, .ref-table tbody td { padding: var(--espace-8) var(--espace-12); }
  .ref-table tbody tr + tr td, .ref-table tbody tr + tr th { border-top: var(--trait-filet) solid var(--filet-liste); }
  .ref-table tbody [data-label]::before { content: none; }
}
:where(.ref-table a) { color: var(--action); }
/* Le besoin d'un outil (« Essential », « Optional ») est une étiquette, pas une gélule (rayons 0). */
.need { display: inline-block; white-space: nowrap; }
.need--essential { color: var(--encre); }

/* ── Les fiches d'outil (guide « Tools for DIY furniture ») ─────────────────────────────────────
   Une fiche est un bloc de données : filet de liste, fond --surface-donnee, aucun rayon. Le dessin
   de l'outil est une silhouette : sa boîte prend les jetons de la rampe (80 × 56). */
.tool-cat { margin-top: var(--espace-8); }
.tool-card { border: var(--trait-filet) solid var(--filet-liste); background: var(--surface-donnee); padding: var(--espace-24); margin-top: var(--espace-16); }
.tool-card__head { display: flex; align-items: center; gap: var(--espace-16); }
.tool-ico { flex: none; width: var(--espace-80); height: var(--espace-56); display: flex; align-items: center; justify-content: center; background: var(--papier); border: var(--trait-filet) solid var(--filet-liste); padding: var(--espace-4); }
.tool-ico svg { width: 100%; height: 100%; display: block; }
.tool-card__name { margin: 0 0 var(--espace-4); }
.tool-card__summary { margin: 0; color: var(--encre-secondaire); }
.tool-facts { margin: var(--espace-16) 0 0; padding: 0; display: grid; gap: var(--espace-8); }
.tool-fact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-4) var(--espace-16); }
.tool-fact dt { margin-top: var(--espace-4); }
.tool-fact dd { margin: 0; }
.tool-how { margin-top: var(--espace-16); }
.tool-how__label { margin: 0 0 var(--espace-8); }
.tool-steps { margin: 0; padding-left: var(--espace-24); display: grid; gap: var(--espace-4); }
.tool-tips { margin-top: var(--espace-16); color: var(--encre-secondaire); }
.tool-tips strong { color: var(--encre); font-weight: 500; }

/* ── Le hub : un sommaire à filets, groupé par intention, le temps de lecture à droite ──────────
   Arbitrage §7 (2026-09-16). Une ligne par page : le titre (H3) est le lien, le temps de lecture
   (Mono, une mesure) est calé à droite sur la même ligne, le résumé suit en prose secondaire. La
   ligne est une cible de 48 px ; le groupe est un H2 ; le tout sur des filets, sans carte. */
.hub-group { margin-top: var(--espace-44); margin-bottom: var(--espace-16); }
.hub-list { list-style: none; margin: 0; padding: 0; border-top: var(--trait-filet) solid var(--filet-fort); }
/* La ligne du sommaire prend toute la colonne (le <li> de prose est borné à 70 ch, pas celui-ci). */
.hub-card { max-width: none; border-bottom: var(--trait-filet) solid var(--filet-liste); padding: var(--espace-4) 0 var(--espace-16); }
.hub-card__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-16); }
.hub-card__link { display: inline-flex; align-items: center; min-height: var(--cible-tactile); min-width: var(--cible-tactile); color: var(--action); text-decoration: underline; text-decoration-thickness: var(--trait-filet); text-underline-offset: var(--anneau-decalage); }
.hub-card__link:hover { color: var(--action-survol); }
.hub-card__link:active { color: var(--lien-actif); }
.hub-card__temps { flex: none; white-space: nowrap; color: var(--encre-etiquette); }
/* « Reading time » est dit aux lecteurs d'écran et pas peint : à droite, le chiffre suffit. */
.hub-card__lecture { position: absolute; overflow: hidden; clip-path: inset(50%); white-space: nowrap; width: var(--trait-filet); height: var(--trait-filet); }
.hub-card__blurb { margin: 0; color: var(--encre-secondaire); }

/* ── Le bloc de fin (« Start your build » + la FAQ) ─────────────────────────────────────────────
   Pas une carte chaude arrondie : une section de plus, ouverte par un filet fort. */
.ref-cta { margin-top: var(--espace-56); padding-top: var(--espace-24); border-top: var(--trait-filet) solid var(--filet-fort); }
.ref-faq { margin-top: var(--espace-16); color: var(--encre-secondaire); }

/* ── La 404 : le gabarit « message étroit » du registre, et rien d'autre ─────────────────────────
   Le code d'erreur est une mesure : Mono, couleur --cote. */
.notfound { padding-top: var(--espace-80); }
.notfound__code { display: block; margin-bottom: var(--espace-8); font-family: var(--police-mesure); font-weight: 400; font-size: var(--taille-valeur); line-height: var(--interligne-valeur); color: var(--cote); font-variant-numeric: tabular-nums; }
.notfound__actions { display: flex; flex-direction: column; gap: var(--espace-12); }

/* ── La page d'inscription (/waitlist, lot `join-the-waitlist`) ──────────────────────────────────
   Une page de lecture qui porte UN formulaire : les champs du §3 tels quels (.champ, .bouton), dans
   la colonne du gabarit « formulaire étroit » (§6), sans la centrer — l'article est aligné à gauche.
   Aucune valeur neuve : la largeur et les espacements sont des jetons du registre. */
.inscription__formulaire { max-width: var(--largeur-formulaire); }
.inscription__action { margin-top: var(--espace-16); }
.inscription__etat:not(:empty) { margin-top: var(--espace-16); }

/* ── Pied de page ──────────────────────────────────────────────────────────────────────────────  */
.site-footer { background: var(--bande); border-top: var(--trait-filet) solid var(--filet-section); }
.site-footer__logo { display: block; height: var(--espace-24); width: auto; }
.site-footer__bar-inner { display: flex; justify-content: space-between; gap: var(--espace-16); flex-wrap: wrap; padding: var(--espace-12) var(--marge-page); width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; color: var(--encre-secondaire); }

/* ── §4 Les paliers ────────────────────────────────────────────────────────────────────────────  */
/* ≥ 600 — la fiche d'outil range ses faits sur deux pistes ; les actions de la 404 côte à côte. */
@media (min-width: 600px) {
  .tool-fact { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .tool-fact dt { margin-top: 0; }
  .notfound__actions { flex-direction: row; flex-wrap: wrap; }
}
/* ≥ 880 — le rythme de section s'ouvre. */
@media (min-width: 880px) {
  .ref-article { padding-top: var(--espace-56); }
}
/* ≥ 1080 — la page guide ouvre sa seconde piste : l'article 1fr, le rail 320 (§4). La marge de
   page passe du bord de l'article au bord de la grille ; la colonne de texte ne bouge pas.
   🔴 COLLANT, ET JAMAIS PLUS HAUT QUE L'ÉCRAN : un rail collant plus haut que la fenêtre cacherait
   son propre bas (le bouton) jusqu'à la fin de l'article. Il défile donc dans sa boîte au-delà. */
@media (min-width: 1080px) {
  .page-guide { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-guide); column-gap: var(--gouttiere); align-items: start; padding: 0 var(--marge-page); }
  .page-guide > .ref-article { max-width: none; margin: 0; padding-left: 0; padding-right: 0; padding-bottom: var(--espace-80); }
  .page-guide > .amorce--rail { position: sticky; top: var(--espace-24); width: auto; max-width: none; max-height: calc(100vh - var(--espace-24) - var(--espace-24)); overflow-y: auto; margin: var(--espace-56) 0 var(--espace-80); }
}