/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   accueil.css — « La cote » sur l'accueil (lot `the-front-door`, lot 3 du redesign).
   @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 de ce lot : « 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 — l'accueil est une page GOUVERNÉE, elle tient zéro
   littéral hors du registre.

   Ce que la spécification dit de cette page, et donc ce que fait ce fichier :
     §6  « Accueil … Restylé — Structure et copie inchangées. Ce sont des classes et des balises
          sémantiques qui changent, pas l'ordre du contenu. » Aucune section n'est ajoutée,
          déplacée ni retirée ; les crochets de mise en page (.hero__cta, .type-card, .faq-item…)
          gardent leur nom parce que du JS, des tests et le rendu SSR s'y accrochent — c'est le
          VOCABULAIRE qui passe à celui de la direction (.bouton, .prose, .d1, .etiquette, .lien).
     §4  Quatre paliers en min-width sur une base mobile. Le hero passe à deux colonnes à ≥ 1080
          (1,06fr / 0,94fr) et le dessin coté est sa seconde colonne — « < 600 … Hero : titre,
          phrase, bouton pleine largeur, puis le dessin coté ».
     §2.1 Un rôle par jeton, ET SEUL RÔLE. C'est pourquoi la bande de fin d'accueil n'est plus un
          aplat vert : --action est « bouton primaire, liens, marque validé, anneau de focus » et
          rien d'autre, donc elle devient une section de plus, sur --bande, avec son bouton.
     §2.3 Rythme d'une section : 44 de padding, 24 sous un H2, 16 entre blocs frères, 8 dans un
          bloc. Rayons 0 sauf le bouton. Aucune ombre, aucun dégradé, nulle part.

   🔴 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 (et non sur un composant) passe par :where().
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La colonne de page ────────────────────────────────────────────────────────────────────────
   .page-la-cote (registre) porte déjà max-width + marge du palier. Les sections sont pleine
   largeur, leur contenu est contraint (§2.3). */
.section { padding: var(--espace-44) 0; }
.section--bande { background: var(--bande); }
.section__colonne { width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; padding: 0 var(--marge-page); }
.section__colonne--mesure { max-width: var(--mesure-prose); }

/* Tête de section : étiquette mono, H2, puis 24 sous le H2 (§2.3). */
.section-head { margin-bottom: var(--espace-24); }
.section-head__titre { margin-top: var(--espace-8); }
.section-head__lede { margin-top: var(--espace-16); }

/* 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); }

/* ── En-tête de page ───────────────────────────────────────────────────────────────────────────
   Un filet de section sous la barre, pas une ombre : la page n'a aucun calque (§2.1). */
.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; }
.nav { display: none; }
.nav.is-open { display: flex; flex-direction: column; align-items: stretch; order: 3; flex-basis: 100%; gap: var(--espace-4); margin-top: var(--espace-8); padding-top: var(--espace-8); border-top: var(--trait-filet) solid var(--filet-liste); }
.header__actions { display: flex; align-items: center; gap: var(--espace-8); }
.header__cta { display: none; }
.nav__cta { margin-top: var(--espace-8); }

/* 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 registre ne déclare que min-height sur .lien--bloc, ce qui
   suffisait au formulaire étroit (des liens longs). Sur une page de navigation, « Tarifs » mesure
   44 px de large : la cible est de 48 px « sans exception » (§3), pas 48 px de haut seulement.
   Portée à l'accueil (cette feuille), pas au registre : élargir .lien--bloc partout est une
   décision du lot qui possède le registre. */
.lien--bloc { min-width: var(--cible-tactile); }
/* La note de tarif est centrée ; .lien--bloc est un inline-flex, donc on lui rend sa largeur. */
.price-card__note.lien--bloc { display: flex; width: 100%; justify-content: center; }

/* Le chapeau du hero — une étiquette, pas une gélule : les rayons sont à 0 (§2.3). */
.pill { display: inline-block; margin-bottom: var(--espace-12); }
/* L'accent du titre : l'italique Newsreader 400, la seule graisse italique servie (§5). La
   couleur reste --encre — « --action » a un rôle, et « accent de titre » n'en fait pas partie. */
.text-italic-green { font-style: italic; }
/* La coche d'une ligne incluse — une marque « validé », le seul emploi décoratif de --action. */
.tick { color: var(--action); }

/* ── Hero ──────────────────────────────────────────────────────────────────────────────────────
   Une colonne jusqu'à 1080, deux au-delà (§4). L'aperçu ne passe JAMAIS au-dessus des champs ni
   du texte : sur téléphone on lit d'abord, on vérifie ensuite. */
.accueil-hero { display: grid; gap: var(--espace-32); padding-top: var(--espace-44); padding-bottom: var(--espace-44); align-items: start; }
.hero__titre { margin-bottom: var(--espace-16); }
.hero__sub { margin-bottom: var(--espace-24); }
.hero__cta { display: flex; flex-direction: column; gap: var(--espace-12); }
.hero__cta .bouton { width: 100%; }
.hero__meta { margin-top: var(--espace-16); }
.hero__meta .dot { padding: 0 var(--espace-8); }
/* domain-bounds — la borne du périmètre, sous le CTA : c'est une borne, pas un argument, donc
   elle est plus discrète que la phrase du hero et ne lui dispute pas la place. */
.hero__scope { margin-top: var(--espace-16); color: var(--encre-secondaire); }

/* ── Aperçu de plan — le bloc-cote de l'accueil ────────────────────────────────────────────────
   Fond --surface-donnee : « ici il y a une donnée » (§2.1). Encadré d'un filet fort, sans rayon
   ni ombre. */
.plan-preview { border: var(--trait-filet) solid var(--filet-fort); background: var(--surface-donnee); }
.plan-preview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-12); flex-wrap: wrap; padding: var(--espace-12) var(--espace-16); border-bottom: var(--trait-filet) solid var(--filet-fort); }
.plan-preview__title { display: flex; align-items: center; gap: var(--espace-8); }
.plan-preview__body { display: grid; }
.elevation-pane { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--espace-44) var(--espace-32); border-bottom: var(--trait-filet) solid var(--filet-liste); }
.elevation { position: relative; width: 100%; max-width: var(--frame-w); }
.elevation__caption { margin-top: var(--espace-16); text-align: center; }
.cutlist-pane { padding: var(--espace-16); }

/* Le dessin en élévation. Traits à l'encre, cotes à --cote : la mesure est le seul ornement. */
/* §4 : « Le dessin coté est dimensionné en % de son conteneur avec un rapport fixe, jamais en
   unités de fenêtre. » Le rapport est celui du meuble (60 : 100), écrit par le générateur ; la
   borne --frame-w est la largeur que ce dessin a toujours eue — la spécification n'en donne pas,
   donc on garde celle qui est publiée plutôt que d'en inventer une. */
.frame { position: relative; width: 100%; aspect-ratio: var(--frame-ratio); border: var(--trait-dessin) solid var(--encre); background: var(--surface-donnee); display: flex; flex-direction: column; justify-content: space-evenly; padding: var(--espace-8) 0; }
/* numbers-we-publish + the-front-door — LES ÉTAGÈRES SONT COUPÉES PAR LE MONTANT. La liste de
   découpe compte six étagères de 27,3 cm pour trois niveaux : deux par niveau, interrompues par
   le renfort central. Un trait horizontal traversant dessinerait une étagère qu'on ne vend pas.
   La travée est émise par tools/gen-published-numbers.js, une par intervalle entre montants. */
.frame__niveau { display: flex; align-items: center; }
.frame__travee { height: var(--trait-dessin); background: var(--encre); flex: 1 1 0; }
.frame__travee + .frame__travee { margin-left: var(--trait-dessin); }
.frame .divider { position: absolute; top: var(--espace-8); bottom: var(--espace-8); width: var(--trait-dessin); background: var(--encre); }
/* Les cotes se placent par leurs BORDS (bottom / right), pas par un déplacement : le §7 de la
   direction n'a aucune géométrie animée, et le gate tient `transform` hors d'une feuille
   gouvernée pour qu'aucun déplacement ne puisse s'y glisser au survol. */
.dim { position: absolute; color: var(--cote); }
.dim--top { bottom: 100%; left: 0; right: 0; text-align: center; padding-bottom: var(--espace-4); }
.dim--side { top: 0; bottom: 0; right: 100%; display: flex; align-items: center; padding-right: var(--espace-4); }
.dim--side span { writing-mode: sideways-lr; }

/* La liste de découpe — un tableau dense (§2.2 « donnée tabulaire »). */
.cutlist { width: 100%; border-collapse: collapse; }
.cutlist th { text-align: left; padding: var(--espace-4) 0; border-bottom: var(--trait-filet) solid var(--filet-fort); }
.cutlist td { padding: var(--espace-4) 0; border-bottom: var(--trait-filet) solid var(--filet-liste); }
.cutlist .num { text-align: right; }
/* Un fait par ligne : côte à côte, « ~35 kg / section » et « 2,27 m² · MDF 18 mm » se lisaient
   comme une seule phrase. Ce sont trois relevés distincts du même plan. */
.chip-row { display: flex; flex-direction: column; gap: var(--espace-4); margin-top: var(--espace-12); }
/* `fix-to-the-wall` (lots 44 et 46 du marketing, F3) — la pastille de la fixation au mur obligatoire, en rouge : le
   registre --danger-* de la feuille La cote, celui de l'avertissement de basculement du configurateur. */
.chip-row__grave { color: var(--danger-encre); font-weight: 600; }
/* the-front-door — LA NOTE D'ORIGINE, ALLÉGÉE ET NON DÉPLACÉE (arbitrage PO). Elle qualifie le
   chiffre juste au-dessus d'elle : la déplacer republierait une affirmation non qualifiée. Elle
   passe au niveau LÉGENDE — la spécification n'a pas de niveau de ce nom, donc elle prend le
   niveau « corps d'interface » (Plex Sans 14/1,55, le plus petit niveau de PHRASE de l'échelle)
   en encre secondaire, et non le Mono, que le §2.2 réserve à « ce qui se mesure ». */
.plan-preview__origin { margin-top: var(--espace-8); color: var(--encre-secondaire); }

/* ── Amorce du configurateur — LA PLACE, PAS LE COMPOSANT ──────────────────────────────────────
   Lot 4. La structure arrêtée au tour 2 est hero descriptif → amorce → le reste ; ce lot pose la
   fente et rien d'autre. Elle ne peint rien et n'occupe rien tant qu'elle est vide : une bande
   réservée mais visible serait un composant inventé que le lot 4 devrait défaire. */
.amorce-slot:empty { display: none; }

/* ── Grilles de cartes ─────────────────────────────────────────────────────────────────────────
   Une carte de la direction n'a ni rayon, ni ombre, ni fond propre : un filet de liste, et le
   fond de la surface qui la porte. */
.grid { display: grid; gap: var(--espace-16); }
.carte { border: var(--trait-filet) solid var(--filet-liste); background: var(--surface-donnee); padding: var(--espace-16); }
.carte__titre { margin-bottom: var(--espace-8); }
.carte__texte { color: var(--encre-secondaire); }
/* Le numéro d'étape est une cote : Mono, couleur --cote (§2.1). */
.icon-chip { display: block; margin-bottom: var(--espace-8); }

/* ── Bande de statistiques ─────────────────────────────────────────────────────────────────────
   Trois valeurs chiffrées (Newsreader + unité Mono) et une action. */
/* `plain-and-safe` (lot marketing 10) — « les questions que Kamba vous pose ». Six cartes : le type (étiquette), la
   question du configurateur (titre), « Pourquoi » (étiquette), la raison, un lien facultatif. Un filet en tête : la
   section suit « Comment ça marche » (bande) et précède « Ce que vous obtenez » (sans bande). */
.questions { border-top: var(--trait-filet) solid var(--filet-liste); }
.questions__carte { display: flex; flex-direction: column; }
.questions__type { color: var(--encre-secondaire); }
.questions__carte .carte__titre { margin-top: var(--espace-8); overflow-wrap: break-word; }
.questions__pourquoi { margin-top: var(--espace-12); }
.questions__carte .carte__texte { margin-top: var(--espace-4); }
.questions__lien { margin-top: auto; padding-top: var(--espace-8); }
.questions__doute { margin-top: var(--espace-24); max-width: 70ch; }
.questions__cta { margin-top: var(--espace-16); }
.stat-band { margin-top: var(--espace-24); border-top: var(--trait-filet) solid var(--filet-fort); border-bottom: var(--trait-filet) solid var(--filet-fort); padding: var(--espace-16) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-16); flex-wrap: wrap; }
.stat-band__stats { display: flex; gap: var(--espace-32); flex-wrap: wrap; }
.stat-band__num { display: block; }
.stat-band__label { display: block; margin-top: var(--espace-4); }
/* `true-on-the-page` (M7) — la charge ne s'imprime jamais sans sa condition (clé du configurateur). */
.stat-band__condition { display: block; max-width: 18ch; margin-top: var(--espace-4); color: var(--encre-etiquette); font-size: var(--taille-interface); line-height: var(--interligne-interface); }

/* ── Cartes de type de meuble ──────────────────────────────────────────────────────────────────
   Poids égal : un seul gabarit, aucune carte héros. Le dessin vit sur --surface-donnee, qui
   signale la donnée ; le corps sur le fond de la section. */
.type-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--espace-16); align-items: stretch; }
.type-soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espace-16); margin-top: var(--espace-16); }
.type-card { display: flex; flex-direction: column; position: relative; border: var(--trait-filet) solid var(--filet-liste); background: var(--papier); }
.section--bande .type-card { background: var(--bande); }
.type-card__flag { position: absolute; top: var(--espace-8); left: var(--espace-8); z-index: 2; }
.type-card__media { display: flex; align-items: center; justify-content: center; padding: var(--espace-24) var(--espace-16); background: var(--surface-donnee); border-bottom: var(--trait-filet) solid var(--filet-liste); }
.type-card__render { display: flex; align-items: center; justify-content: center; width: 100%; }
.type-card__render svg { display: block; }
.type-card__icon { display: block; width: var(--espace-44); height: var(--espace-44); }
.type-card__body { padding: var(--espace-16); display: flex; flex-direction: column; flex: 1 1 auto; }
.type-card__texte { margin-top: var(--espace-8); color: var(--encre-secondaire); }
.type-card__cta { margin-top: var(--espace-12); align-self: flex-start; }
/* `under-slope-guides` : le seul type dont la carte pose une question avant le configurateur,
   donc le seul lien de guide. Plus discret que le CTA, exprès. */
.type-card__guide { margin-top: var(--espace-4); }

/* Capture « prévenez-moi » d'un type à venir — des champs du §3, pas un formulaire à part. */
.type-notify { margin-top: var(--espace-12); }
.type-notify__form { margin-top: var(--espace-8); display: flex; flex-direction: column; gap: var(--espace-8); }
.type-notify__form[hidden] { display: none; }
/* `launch-code` (R17) — the second face of a « notify me » card: once the sale is open, a sentence and a
   link to the news. Shown by /js/sale-legal-gate.js (it clears the inline display:none). */
.type-notify__news { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-8); }
.type-notify__feedback { margin-top: var(--espace-4); }
.type-notify__feedback[hidden] { display: none; }
.type-notify__feedback.is-err { color: var(--alerte-encre); }

/* ── Pourquoi Kamba ────────────────────────────────────────────────────────────────────────────  */
.why { display: grid; gap: var(--espace-32); align-items: start; }
.why__cta { margin-top: var(--espace-16); }
.why__word { display: block; color: var(--cote); }
.why__lead { display: block; margin-top: var(--espace-4); }

/* ── Tarif ─────────────────────────────────────────────────────────────────────────────────────
   Un bloc de données : fond --surface-donnee, filet fort, aucun rayon, aucune ombre, aucune
   pastille flottante. La mention « tout est inclus » redevient une étiquette de bloc. */
.price-card { max-width: var(--largeur-formulaire); margin: 0 auto; border: var(--trait-filet) solid var(--filet-fort); background: var(--surface-donnee); padding: var(--espace-24); }
.price-card__head { text-align: center; margin-bottom: var(--espace-16); }
.price-card__plan { display: block; }
.price-card__amount { display: block; margin-top: var(--espace-4); }
.price-card__unit { display: block; margin-top: var(--espace-4); color: var(--encre-secondaire); }
.price-card__list { list-style: none; margin: 0 0 var(--espace-16); padding: 0; display: flex; flex-direction: column; gap: var(--espace-8); }
.price-card__list li { display: flex; gap: var(--espace-8); align-items: baseline; }
.tick { flex: none; color: var(--action); }
.price-card__note { display: block; margin-top: var(--espace-12); text-align: center; color: var(--encre-secondaire); }
/* `sell-in-france` — où le plan est en vente, dit sous le prix (lot marketing 41, point 1). Une phrase : du
   texte courant (.prose), centré entre le prix et la liste ; ses deux faces sont permutées par
   sale-legal-gate.js. */
.price-card__where { display: block; margin: 0 auto var(--espace-16); text-align: center; }

/* ── FAQ ───────────────────────────────────────────────────────────────────────────────────────
   <details> natif (§6) : replié, sans JavaScript, indexable. Une liste à filets. */
.faq-list { border-top: var(--trait-filet) solid var(--filet-fort); }
.faq-item { border-bottom: var(--trait-filet) solid var(--filet-liste); }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--espace-12); min-height: var(--cible-tactile); padding: var(--espace-12) 0; }
.faq-q::-webkit-details-marker { display: none; }
/* La marque d'ouverture est un signe, pas une icône pivotée : un chevron demanderait un
   `transform`, que le §7 tient hors des feuilles gouvernées. Plus / moins, en Mono. */
.faq-q::after { content: '+'; flex: none; margin-left: auto; font-family: var(--police-mesure); font-size: var(--taille-donnee); color: var(--encre-etiquette); }
.faq-item[open] > .faq-q::after { content: '\2212'; }
.faq-a { padding: 0 0 var(--espace-16); }
.faq-a p + p { margin-top: var(--espace-8); }

/* ── Bande finale ──────────────────────────────────────────────────────────────────────────────
   Plus un aplat vert : --action a UN rôle (§2.1), et « fond de section » n'en fait pas partie. */
.cta-band { text-align: center; }
.cta-band__sub { margin: var(--espace-16) auto var(--espace-24); }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; }

/* ── Pied de page ──────────────────────────────────────────────────────────────────────────────  */
.site-footer { background: var(--bande); border-top: var(--trait-filet) solid var(--filet-section); }
.site-footer__grid { display: grid; gap: var(--espace-32); padding: var(--espace-44) var(--marge-page); width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; }
.site-footer__tagline { margin-top: var(--espace-8); color: var(--encre-secondaire); max-width: var(--mesure-prose); }
.site-footer__logo { height: var(--espace-24); width: auto; }
.footer-col-title { margin-bottom: var(--espace-8); }
.footer-links { display: flex; flex-direction: column; }
.site-footer__bar { border-top: var(--trait-filet) solid var(--filet-liste); }
.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 ────────────────────────────────────────────────────────────────────────────
   Quatre, en min-width, sur une base mobile — « l'acheteur mesure son mur avec son téléphone à la
   main ». La marge de page elle-même vit dans le registre (--marge-page). */

/* ≥ 600 — les grilles passent à deux pistes, les CTA du hero se rangent côte à côte. */
@media (min-width: 600px) {
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .hero__cta .bouton { width: auto; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ≥ 880 — la navigation tient sur une ligne, l'aperçu de plan s'ouvre en deux volets. */
@media (min-width: 880px) {
  .nav, .nav.is-open { display: flex; flex-direction: row; align-items: center; gap: var(--espace-16); order: 0; flex-basis: auto; margin-top: 0; padding-top: 0; border-top: 0; }
  .nav__cta { display: none; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plan-preview__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .elevation-pane { border-bottom: 0; border-right: var(--trait-filet) solid var(--filet-liste); }
  .cutlist-pane { padding: var(--espace-24); }
  .section { padding: var(--espace-56) 0; }
}

/* ≥ 1080 — « Les deux colonnes apparaissent : hero (1,06fr / 0,94fr) ». Le dessin coté prend la
   seconde ; il n'est jamais au-dessus du texte, quel que soit le palier. */
@media (min-width: 1080px) {
  .accueil-hero { grid-template-columns: 1.06fr 0.94fr; gap: var(--espace-56); align-items: center; }
  .why { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--espace-56); }
}