/* =============================================================================
   Inoma Canada — 04-accueil.css
   -----------------------------------------------------------------------------
   L'accueil est la PLANCHE 00 d'un catalogue d'atelier.

   Trois lois gouvernent toute cette feuille. Elles ne sont pas décoratives :
   chacune ferme une porte par laquelle une page technique se met à mentir.

     1. AUCUN CHIFFRE NE S'ANIME JAMAIS. Un nombre qui défile mime la précision
        au lieu de la fournir, et rend le numéro AHRI faux à l'écran pendant
        toute la durée du compteur — c'est-à-dire pendant la capture d'écran que
        l'entrepreneur envoie à son collègue. Zéro odomètre, zéro compteur.

     2. L'OR NE DIT QU'UNE CHOSE : « vous êtes ici ». Réticule, pastille active,
        étiquette de planche, filet de la ligne pointée — plus le bouton
        principal, qui est la même idée appliquée à l'action. Toute autre
        occurrence de --brut-or dans cette feuille est un bug, et c'est grepable.

     3. AUCUN SENS NE REPOSE SUR UN FILET ARGENT. L'argent fait 1,57:1 sur le
        fond de page : il est décor. Dès qu'un trait SIGNIFIE quelque chose
        (une famille, un état, une limite), il est marine, ardoise ou glace, et
        il est doublé d'un mot.

   UNE SEULE DESCENTE DANS LE NOIR — la planche 03. Deux, et plus aucune ne
   compte.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LA PLANCHE — enveloppe commune
   -----------------------------------------------------------------------------
   Chaque section est une planche numérotée. Le numéro vit dans la gouttière de
   gauche, en chasse fixe, et n'apparaît qu'au-dessus de 75 rem : en dessous il
   n'y a pas de gouttière, et un numéro qui se glisse dans la colonne de lecture
   devient un intrus.
--------------------------------------------------------------------------- */
.planche { position: relative; }

.planche__numero {
  display: none;
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
  font-variant-numeric: tabular-nums;
}
/* 78 rem et non 75 : entre 1200 et 1220 px, la branche `max()` retombait sur la
   marge de 1,5 rem et le numéro venait se poser SOUS le surtitre de la section.
   À 1248 px, le texte commence à 56 px et le numéro s'arrête à 42. */
@media (min-width: 78rem) {
  .planche__numero {
    display: block;
    position: absolute;
    top: var(--espace-8);
    left: max(var(--espace-5), calc(50% - var(--largeur-contenu) / 2 - 4.5rem));
    writing-mode: vertical-rl;
  }
}
/* Le numéro de la planche de nuit descend AVEC la rampe. Posé à 4 rem comme les
   autres, il serait tombé dans la zone où le dégradé est encore clair — glace
   sur nuage, soit un numéro invisible. Il suit donc le même décalage que le
   contenu, et pour la même raison. */
.planche--nuit .planche__numero {
  color: var(--couleur-trait-nuit);
  top: calc(var(--espace-8) + var(--rampe));
}

/* Sur une planche, RIEN N'EST ROND et rien ne se soulève. Les composants
   partagés (cartes, appel professionnel, visuel du duo) gardent leurs rayons
   ailleurs sur le site : ici ils s'alignent sur les panneaux, sinon la page
   mélange deux vocabulaires de forme sans que ça veuille dire quoi que ce soit. */
.planche .carte,
.planche .carte__visuel,
.planche .appel-pro,
.planche .duo-visuel__image,
.planche .visuel-attente { border-radius: 0; }

/* ---------------------------------------------------------------------------
   PLANCHE 00 — LA COUVERTURE
   -----------------------------------------------------------------------------
   Le principe qui gouverne tout ce bloc : AUCUN texte ne se pose sur l'image
   animée. Il se pose sur un VOILE opaque, tendu par-dessus la vidéo.

   Pourquoi ce n'est pas un détail : une vidéo change 24 fois par seconde. Un
   contraste mesuré sur une image ne dit rien de la suivante, et il n'existe
   aucune façon honnête de certifier « AA » du texte posé sur une image mouvante.
   En interposant un aplat d'opacité connue, le pire cas devient calculable — on
   suppose la vidéo BLANCHE (le fond le plus défavorable possible), on aplatit le
   voile par-dessus, et on contrôle le texte contre cette couleur. C'est ce que
   fait outils/verifier-contrastes.mjs, qui RELIT les arrêts ci-dessous : ils ne
   doivent pas être allégés, ni réécrits dans une autre syntaxe (color-mix(),
   rgb(… / 82%) et les pourcentages décimaux lui sont invisibles).
--------------------------------------------------------------------------- */
.heros {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(44rem, 92vh);
  padding-block: var(--espace-8) var(--espace-9);
  background: var(--brut-marine-nuit); /* couleur de repli avant toute image */
  color: var(--couleur-texte-sur-sombre);
  overflow: hidden;
}

.heros__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* L'affiche est peinte par l'élément <video> lui-même (attribut `poster`) :
   elle est donc visible immédiatement, avant que le moindre octet de vidéo ne
   soit demandé, et elle reste l'image affichée si la lecture n'est jamais
   lancée (mouvement réduit, économie de données, écran étroit, pas de JS). */
.heros__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%; /* garde l'appareil dans le cadre au recadrage */
  display: block;
}

.heros__voile {
  position: absolute;
  inset: 0;

  /* Jusqu'où le TEXTE peut aller, en pourcentage de la largeur du cadre.
     outils/verifier-contrastes.mjs lit cette valeur, puis relit les arrêts du
     dégradé ci-dessous et contrôle le plus transparent d'entre eux situé dans
     cette zone. Les deux nombres ne peuvent donc plus se désynchroniser : la
     feuille de style EST la source de vérité du contrôle. */
  --voile-zone-texte: 100;

  /* Mobile : voile plein. La colonne de texte occupe toute la largeur, il n'y a
     aucune zone où l'on puisse se permettre de laisser passer l'image. */
  background: linear-gradient(
    180deg,
    rgba(0, 26, 49, 0.86) 0%,
    rgba(0, 26, 49, 0.90) 100%
  );
}
@media (min-width: 62rem) {
  /* Grand écran : le voile s'ouvre vers la droite.
     Il était à 0,95 / 0,93 sur toute la moitié gauche : l'appareil y était
     quasiment invisible, autrement dit on faisait télécharger 1,1 Mo de vidéo
     pour afficher un aplat bleu. Les arrêts ci-dessous laissent l'hélice se
     voir à droite tout en gardant le texte au-dessus du seuil AA — 0,82 dans la
     colonne de texte donne 10,2:1 pour du blanc, soit plus du double du seuil.
     La zone de texte s'arrête à 52 % : au-delà, le voile n'a plus à protéger
     quoi que ce soit. */
  .heros__voile {
    --voile-zone-texte: 52;
    background: linear-gradient(
      96deg,
      rgba(0, 26, 49, 0.88) 0%,
      rgba(0, 26, 49, 0.82) 52%,
      rgba(0, 26, 49, 0.46) 74%,
      rgba(0, 26, 49, 0.18) 100%
    );
  }
}

/* Traits de coupe — la fenêtre d'où l'on regarde l'appareil.
   Ils transforment la partie claire du voile en VIGNETTE CADRÉE plutôt qu'en
   dégradé qui s'arrête faute de mieux : le 1,1 Mo de vidéo achète alors quelque
   chose qu'on voit. Purement décoratifs, argent sur fond sombre (11,6:1), donc
   invisibles sur petit écran où le voile est plein. */
.heros__cadre {
  display: none;
  position: absolute;
  z-index: 1;
  top: var(--espace-8);
  right: var(--espace-6);
  bottom: var(--espace-8);
  left: 58%;
  pointer-events: none;
}
@media (min-width: 62rem) { .heros__cadre { display: block; } }
.heros__cadre::before,
.heros__cadre::after {
  content: "";
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--trait-fin) solid var(--brut-argent);
  opacity: 0.55;
}
.heros__cadre::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.heros__cadre::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.heros__inner { position: relative; width: 100%; }
.heros__contenu { max-width: 40rem; }
@media (min-width: 62rem) {
  /* 46 % du conteneur : la limite de la zone où le voile est au maximum. */
  .heros__contenu { max-width: min(42rem, 46%); }
}

.heros .surtitre { color: var(--couleur-accent); }

/* LA MESURE — le seul objet de cette taille sur toute la page.
   Elle vit DANS le <h1> : un lecteur d'écran entend une phrase entière,
   « −30 °C — et elle chauffe encore. », et non un nombre orphelin suivi d'un
   fragment. Elle ne compte pas, ne tourne pas, ne s'incrémente pas (loi 1). */
.heros h1 {
  color: var(--couleur-texte-sur-sombre);
  margin-bottom: var(--espace-4);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: var(--graisse-forte);
  font-stretch: var(--chasse-normale);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.heros__mesure {
  display: block;
  margin-bottom: var(--espace-3);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: var(--graisse-extra);
  font-stretch: var(--chasse-serree);
  line-height: 0.86;
  letter-spacing: var(--lettrage-mesure);
  font-variant-numeric: tabular-nums;
  color: var(--brut-blanc);
}

/* `.heros__provenance` et `.heros__texte` ont été retirés le 2026-08-07 avec les
   deux blocs qu'ils habillaient (voir index.html). Le titre tombe donc
   directement sur les boutons : c'est le <h1> qui porte la marge basse, sinon
   la mesure et le bouton se toucheraient. */
h1 + .heros__actions { margin-top: var(--espace-6); }

.heros__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }

.heros__mention {
  margin: var(--espace-6) 0 0;
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux-sombre);
}

/* --- Le sommaire des planches --------------------------------------------
   L'entrepreneur arrive avec une question et trois minutes. Le sommaire est la
   réponse la moins spectaculaire et la plus utile : quatre ancres au-dessus de
   la ligne de flottaison, dont celle qui mène au numéro AHRI.
--------------------------------------------------------------------------- */
.sommaire {
  margin-top: var(--espace-7);
  padding-top: var(--espace-5);
  border-top: var(--trait-fin) solid rgba(255, 255, 255, 0.22);
}
.sommaire__cle {
  display: block;
  margin-bottom: var(--espace-3);
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux-sombre);
}
.sommaire__liste {
  display: grid;
  gap: var(--espace-2) var(--espace-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 40rem) { .sommaire__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sommaire__liste li { margin: 0; }
.sommaire__lien {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  /* 44 px, comme toutes les autres cibles du site (bouton pause, pastilles de
     la règle, sélecteur de capacité). Sans ce minimum, la ligne ne faisait que
     31 px : conforme AA, mais en dessous de ce que le projet s'impose. */
  min-height: 2.75rem;
  font-size: var(--taille-sm);
  color: var(--brut-blanc);
  text-decoration: none;
}
.sommaire__lien:hover { color: var(--couleur-accent); }
.sommaire__lien:hover .sommaire__numero { color: var(--couleur-accent); }
.sommaire__numero {
  font-family: var(--police-mono);
  font-size: var(--taille-xs);
  font-variant-numeric: tabular-nums;
  color: var(--couleur-texte-doux-sombre);
  transition: color var(--duree-etat) var(--courbe-etat);
}

/* --- Bouton pause : exigence WCAG 2.2.2, pas un ornement ------------------ */
.heros__bascule {
  position: absolute;
  right: var(--espace-5);
  bottom: var(--espace-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px : cible tactile minimale (Apple HIG / WCAG 2.5.5). */
  width: 2.75rem;
  height: 2.75rem;
  border: var(--trait-fin) solid rgba(255, 255, 255, 0.35);
  border-radius: var(--rayon-plein);
  background: rgba(0, 26, 49, 0.72);
  color: var(--brut-blanc);
  cursor: pointer;
  transition: background var(--transition-douce), border-color var(--transition-douce);
}
.heros__bascule:hover {
  background: rgba(0, 26, 49, 0.92);
  border-color: var(--couleur-accent);
}
/* L'icône affichée dépend de l'état, porté par [data-en-lecture]. */
.heros__icone--lecture { display: block; }
.heros__icone--pause   { display: none; }
.heros__bascule[data-en-lecture="true"] .heros__icone--lecture { display: none; }
.heros__bascule[data-en-lecture="true"] .heros__icone--pause   { display: block; }
/* Sans JS, la vidéo ne démarre jamais : un bouton qui ne pilote rien n'a pas
   lieu d'être affiché. js/accueil.js le révèle en posant [hidden="false"]. */
.heros__bascule[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   PLANCHE 01 — LE RELEVÉ
   -----------------------------------------------------------------------------
   Quatre chiffres, chacun avec sa provenance en chasse fixe. La ligne de source
   ne coûte rien et c'est elle qui fait la différence devant un entrepreneur qui
   a déjà vu passer des fiches optimistes.
--------------------------------------------------------------------------- */
.preuve {
  display: grid;
  gap: var(--trait-fin);
  grid-template-columns: repeat(2, 1fr);
  background: var(--couleur-bordure);
  border: var(--trait-fin) solid var(--couleur-bordure);
  overflow: hidden;
}
@media (min-width: 62rem) { .preuve { grid-template-columns: repeat(4, 1fr); } }

.preuve__case {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-5);
  background: var(--couleur-surface);
  transition: background var(--duree-etat) var(--courbe-etat);
}
@media (min-width: 48rem) { .preuve__case { padding: var(--espace-6) var(--espace-5); } }

/* Le −30 °C est l'argument qui décide au Québec : il porte un filet de tête.
   Marine et non or : l'or ne fait que 1,7:1 sur du blanc — le filet aurait été
   invisible, et un repère qu'on ne voit pas n'emphase rien. Le marine est à
   11,6:1. Contrôlé par outils/verifier-contrastes.mjs.
   La valeur et son libellé restent parfaitement lisibles sans ce filet : il
   hiérarchise, il ne porte aucune information (WCAG 1.4.1). */
.preuve__case--phare { box-shadow: inset 0 3px 0 0 var(--couleur-primaire); }

.preuve__valeur {
  font-family: var(--police-mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--couleur-primaire);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.preuve__cle {
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
  line-height: 1.4;
}
.preuve__source {
  margin-top: auto;
  padding-top: var(--espace-3);
  font-family: var(--police-mono);
  font-size: var(--taille-xs);
  color: var(--couleur-texte-secondaire);
  line-height: 1.45;
  transition: color var(--duree-etat) var(--courbe-etat);
}
.preuve__source::before { content: "— "; }
/* Le seul geste de cette planche : pointer une case fait remonter sa provenance
   de l'ardoise à l'encre. On ne déplace rien, on ne soulève rien — on rend
   lisible ce qu'on regarde. */
.preuve__case:hover .preuve__source,
.preuve__case:focus-within .preuve__source { color: var(--couleur-texte); }

/* ---------------------------------------------------------------------------
   PLANCHE 02 — L'AIDE FINANCIÈRE
--------------------------------------------------------------------------- */
.bandeau-subv {
  display: grid;
  gap: var(--espace-5);
  align-items: center;
  padding: var(--espace-6);
  background: linear-gradient(135deg, var(--brut-marine) 0%, var(--brut-marine-nuit) 100%);
  color: var(--couleur-texte-sur-sombre);
}
@media (min-width: 62rem) {
  .bandeau-subv { grid-template-columns: minmax(0, 1.5fr) auto; gap: var(--espace-7); }
}

.bandeau-subv__titre {
  margin: 0 0 var(--espace-2);
  font-family: var(--police-mono);
  font-size: clamp(1.5rem, 4.2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--couleur-accent);
  font-variant-numeric: tabular-nums;
}
/* `.bandeau-subv__texte` porte soit un <p> unique, soit le bloc « pourquoi il
   n'y a pas de montant ici » — un motif et, replié, ce que le programme exige.
   D'où la marge basse : le sélecteur de province le suit immédiatement. */
.bandeau-subv__texte {
  margin: 0 0 var(--espace-4);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux-sombre);
}
.bandeau-subv .province { margin-bottom: 0; }
.bandeau-subv__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
  align-items: center;
}
.bandeau-subv .subv__lien { color: var(--couleur-accent); }

/* ===========================================================================
   PLANCHE 03 — LA RÈGLE GRADUÉE
   ---------------------------------------------------------------------------
   La seule planche de nuit de la page, et le moment signature.

   Neuf références posées à leur position RÉELLE en BTU sur un axe commun : la
   composition est dessinée par la donnée, pas par un graphiste. Les intervalles
   sont irréguliers parce que le catalogue l'est.

   La pastille EST la certification — trois glyphes, aucun mot :
     * disque plein or ............ le modèle porte son propre numéro AHRI ;
     * anneau or pointillé ........ il est couvert par des combinaisons ;
     * anneau argent creux ........ la combinaison reste à certifier.
   La politique d'honnêteté du projet devient une propriété graphique. On voit
   d'un coup d'œil que les unités intérieures multizone ne portent pas de
   numéro propre, sans avoir lu une ligne.
   ======================================================================== */
/* Fond NU, sans quadrillage.
   Il portait une trame de calibration à 1,29:1 — assez discrète pour être
   inoffensive, croyais-je. À l'écran elle ne l'était pas : ses lignes ont
   exactement le poids de celles des rails, et l'œil ne distinguait plus le
   décor de l'instrument. Sur une planche dont TOUT le propos est de faire lire
   une position sur un axe, un fond qui imite l'axe est un contresens.

   LA DESCENTE ET LA REMONTÉE
   -----------------------------------------------------------------------------
   Le papier ne devient pas noir d'un coup. Il descend PAR LES BLEUS DE LA
   MARQUE — nuage, marine, marine nuit, abysse — puis remonte par les mêmes à la
   sortie. Trois raisons, dans cet ordre d'importance :

     * une coupure franche entre #F4F7FA et #000D19 se voit comme un défaut de
       chargement, pas comme une intention ;
     * passer par le marine donne un sens à la descente : c'est la couleur du
       lettrage du logo, la page s'enfonce dans sa propre palette au lieu de
       fondre vers un gris quelconque ;
     * techniquement, un long dégradé entre deux luminances extrêmes montre des
       bandes sur un écran 8 bits. Quatre arrêts rapprochés dans des teintes
       voisines, non.

   La remontée n'est pas une symétrie décorative : sans elle, on quitterait le
   noir aussi brutalement qu'on y est entré, et c'est le mur du froid qui
   ramasserait la coupure.

   `--rampe` gouverne À LA FOIS la hauteur du dégradé et le rembourrage de la
   section : le contenu commence donc TOUJOURS après la fin de la rampe, jamais
   dessus. Les deux ne peuvent pas se désynchroniser, et c'est ce qui garantit
   qu'aucun texte clair ne se retrouve un jour sur du fond clair. */
.planche--nuit {
  --rampe: 6rem;
  color: var(--couleur-texte-sur-sombre);
  padding-block: calc(var(--espace-8) + var(--rampe));
  background: linear-gradient(
    to bottom,
    var(--couleur-fond) 0,
    var(--brut-marine) calc(var(--rampe) * 0.38),
    var(--brut-marine-nuit) calc(var(--rampe) * 0.68),
    var(--couleur-planche-nuit) var(--rampe),
    var(--couleur-planche-nuit) calc(100% - var(--rampe)),
    var(--brut-marine-nuit) calc(100% - var(--rampe) * 0.68),
    var(--brut-marine) calc(100% - var(--rampe) * 0.38),
    var(--couleur-fond) 100%
  );
}
@media (min-width: 48rem) {
  .planche--nuit {
    --rampe: 9rem;
    padding-block: calc(var(--espace-9) + var(--rampe));
  }
}
.planche--nuit h2,
.planche--nuit h3 { color: var(--couleur-texte-sur-sombre); }
.planche--nuit .surtitre { color: var(--couleur-accent); }
.planche--nuit .intro { color: var(--couleur-texte-doux-sombre); }

/* Le repli sans JS : une phrase et un lien vers le catalogue complet. C'est un
   état complet, pas un pis-aller — et c'est la seule chose que le HTML contient
   au départ, donc rien ne peut « disparaître ». */
.regle__repli {
  margin: 0;
  padding: var(--espace-6);
  border: var(--trait-fin) dashed var(--couleur-trait-nuit);
  color: var(--couleur-texte-doux-sombre);
}
.regle__repli a { color: var(--couleur-accent); }

/* --- L'axe et ses trois rails -------------------------------------------- */
.regle__cadre { margin: 0; padding: 0; border: 0; min-width: 0; }

/* LA CONSIGNE — trois mots et une flèche.
   Le premier lecteur de cette page n'a pas compris qu'il fallait cliquer les
   pastilles : il a vu un graphique. Un instrument qu'on ne devine pas est un
   ornement, et tout ce que la planche 03 apporte se perd. On l'écrit donc,
   au-dessus de l'axe, là où le regard arrive avant de descendre. */
.regle__consigne {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  margin: 0 0 var(--espace-4);
  padding: var(--espace-2) var(--espace-4);
  border: var(--trait-fin) solid var(--couleur-aiguille);
  border-radius: var(--rayon-plein);
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-accent);
}
.regle__consigne svg { flex: 0 0 auto; }

/* L'axe gradué n'existe qu'à partir de 52 rem — voir la note sur le repli, plus
   bas. Mobile-first : la version drapeau est celle qu'on lit ici par défaut. */
.regle__graduations { display: none; }
@media (min-width: 52rem) {
  .regle__graduations {
    display: block;
    position: relative;
    height: 1.5rem;
    margin-bottom: var(--espace-2);
    border-bottom: var(--trait-fin) solid var(--couleur-trait-nuit);
  }
}
.regle__graduation {
  position: absolute;
  left: var(--x);
  bottom: 0;
  transform: translateX(-50%);
  padding-bottom: var(--espace-2);
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--couleur-trait-nuit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.regle__graduation::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--trait-fin) * -1);
  width: var(--trait-fin);
  height: var(--espace-2);
  background: var(--couleur-trait-nuit);
}

.regle__rail {
  display: grid;
  gap: var(--espace-2);
  padding-block: var(--espace-4);
  border-bottom: var(--trait-fin) solid rgba(200, 220, 234, 0.34);
}
.regle__rail-cle {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-trait-nuit);
}

/* La piste. Deux mises en page, un seul composant, un seul modèle mental.

   PAR DÉFAUT (téléphone) — règle SEGMENTÉE : les mêmes boutons en drapeau,
   dans le même ordre, chacun haut de 44 px. Le rail proportionnel y serait
   illisible : l'écart minimal de l'axe (12k − 9k) vaut 9,78 % de la largeur,
   soit 35 px sur un téléphone de 360 px — deux pastilles qui se chevauchent.

   À PARTIR DE 52 rem — règle PROPORTIONNELLE : l'axe fait alors environ 780 px,
   donc ce même écart vaut 77 px, au-dessus de la cible tactile minimale. C'est
   là que la position vraie en BTU devient lisible, et c'est tout l'intérêt du
   dispositif : les intervalles sont irréguliers parce que le catalogue l'est. */
.regle__piste {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}
@media (min-width: 52rem) {
  .regle__piste {
    display: block;
    /* 2,75 rem de cible tactile + la place du libellé, qui est désormais
       toujours affiché sous la pastille. */
    height: 4.75rem;
  }
  /* L'axe PORTE la composition : c'est lui qui dit que les pastilles sont
     posées sur une même règle. Deux pixels et 0,55 d'opacité — soit 4,7:1 sur
     l'abysse. Il est passé de 1 px / 0,28 (2,04:1, sous le seuil) à ceci en
     deux fois : d'abord pour respecter le seuil, ensuite parce que le fond
     quadrillé le noyait. Le quadrillage est parti ; le trait, lui, reste franc. */
  .regle__piste::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 1.375rem;
    height: var(--trait-moyen);
    background: rgba(200, 220, 234, 0.55);
  }
}

/* L'input reste dans le flux, juste avant son étiquette : c'est ce qui permet
   à `:checked + .regle__cran` et `:focus-visible + .regle__cran` de fonctionner
   sans une seule règle générée, et à l'anneau de focus de se dessiner sur la
   pastille plutôt que dans un coin de l'écran. */
.regle__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.regle__cran {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: 2.75rem;
  padding-inline: var(--espace-3);
  border: var(--trait-fin) solid rgba(200, 220, 234, 0.3);
  border-radius: var(--rayon-md);
  cursor: pointer;
}
@media (min-width: 52rem) {
  .regle__cran {
    position: absolute;
    left: var(--x);
    top: 1.375rem;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
  }
}
/* Le glyphe lui-même, au centre de la cible tactile de 44 px.

   Il a été AGRANDI de 0,9 à 1,25 rem et posé sur un halo permanent : à 14 px et
   sans halo, il se lisait comme un point de graphique, pas comme un bouton. Le
   halo est la moitié du travail d'affordance — il donne au glyphe la surface
   d'une cible, sans occuper la place d'une vraie pastille de 44 px. */
.regle__cran::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--rayon-plein);
  border: var(--trait-moyen) solid var(--brut-argent);
  background: transparent;
  box-shadow: 0 0 0 5px rgba(200, 220, 234, 0.10);
  transition: transform var(--duree-etat) var(--courbe-etat),
              background-color var(--duree-etat) var(--courbe-etat),
              box-shadow var(--duree-etat) var(--courbe-etat),
              border-color var(--duree-etat) var(--courbe-etat);
}
/* certifie — disque plein or : le modèle porte son propre numéro AHRI. */
.regle__cran--certifie::before {
  background: var(--couleur-aiguille);
  border-color: var(--couleur-aiguille);
}
/* couvert — anneau or pointillé : certifié à travers des combinaisons. */
.regle__cran--couvert::before {
  border-style: dashed;
  border-color: var(--couleur-aiguille);
}
/* a-certifier — anneau argent creux : rien n'est publié, rien n'est inventé. */
.regle__cran--a-certifier::before { border-color: var(--brut-argent); }

.regle__cran:hover::before {
  transform: scale(1.15);
  box-shadow: 0 0 0 7px rgba(200, 220, 234, 0.18);
}

/* Halo à 0,45 et non 0,22 : à 0,22 il ne faisait que 1,57:1 sur l'abysse, donc
   au-dessus de 52 rem l'état coché ne tenait plus qu'à un écart d'échelle entre
   deux tailles voisines — invisible pour qui ne survole pas. */
.regle__radio:checked + .regle__cran::before {
  transform: scale(1.3);
  box-shadow: 0 0 0 7px rgba(248, 192, 56, 0.45);
}
.regle__radio:focus-visible + .regle__cran {
  outline: var(--focus-epaisseur) solid var(--focus-anneau-clair);
  outline-offset: var(--focus-decalage);
  border-radius: var(--rayon-plein);
}
/* Tant qu'on tient une pastille, les graduations passent de glace à blanc :
   l'instrument s'éclaire dans la main. C'est le seul retour physique de la
   page, et il ne déplace rien. */
.regle__cadre:active .regle__graduation,
.regle__cadre:active .regle__rail-cle { color: var(--brut-blanc); }

/* Le modèle sous la pastille : visible dès qu'il y a la place, sinon au survol
   et au focus seulement — neuf libellés de 9 caractères ne tiennent pas côte à
   côte sur un téléphone. */
.regle__cran-modele {
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--couleur-trait-nuit);
  white-space: nowrap;
}
@media (min-width: 52rem) {
  /* Le modèle est désormais TOUJOURS visible sous sa pastille.
     Il ne se montrait qu'au survol, ce qui supposait qu'on avait déjà compris
     qu'il y avait quelque chose à survoler — et sur un écran tactile, il n'y a
     pas de survol du tout. C'était devenu tenable : avec les unités intérieures
     multizone retirées de la règle, il reste cinq libellés sur deux rails au
     lieu de neuf sur trois, et ils ne se chevauchent plus. */
  .regle__cran-modele {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    transition: color var(--duree-etat) var(--courbe-etat);
  }
  .regle__cran:hover .regle__cran-modele,
  .regle__radio:checked + .regle__cran .regle__cran-modele,
  .regle__radio:focus-visible + .regle__cran .regle__cran-modele {
    color: var(--brut-blanc);
  }
}

/* Le réticule — le filet vertical « vous êtes ici », posé par le JS via --x.
   Il traverse les trois rails : c'est ce qui montre que la même capacité existe
   sur plusieurs familles (18 000 BTU/h se lit sur deux rails). */
.regle__reticule { display: none; }
@media (min-width: 52rem) {
  .regle__reticule {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--x, 50%);
    width: var(--trait-fin);
    background: var(--couleur-aiguille);
    opacity: 0.65;
    transform: translateX(-50%);
    transition: left var(--duree-etat) var(--courbe-etat);
    pointer-events: none;
  }
}
.regle__rails { position: relative; }

/* En drapeau (téléphone), l'état actif ne peut pas reposer sur la seule taille
   du glyphe : le cadre du bouton passe à l'or. */
.regle__radio:checked + .regle__cran {
  border-color: var(--couleur-aiguille);
  background: rgba(248, 192, 56, 0.10);
}
@media (min-width: 52rem) {
  .regle__radio:checked + .regle__cran { border-color: transparent; background: transparent; }
}

/* --- LE BORDEREAU — ce que la graduation choisie donne à lire ------------- */
.regle__planches { margin-top: var(--espace-6); }

.bordereau {
  display: grid;
  gap: var(--espace-5);
  padding: var(--espace-5);
  border: var(--trait-fin) solid rgba(200, 220, 234, 0.28);
  background: rgba(200, 220, 234, 0.04);
}
@media (min-width: 62rem) {
  .bordereau { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--espace-6); }
}
.bordereau__ref {
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux-sombre);
  font-variant-numeric: tabular-nums;
}
.bordereau__modele {
  margin: var(--espace-2) 0 var(--espace-4);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--graisse-extra);
  font-stretch: var(--chasse-serree);
  letter-spacing: var(--lettrage-titre);
  line-height: 1;
  color: var(--brut-blanc);
}
.bordereau__specs {
  display: grid;
  gap: var(--espace-2);
  margin: 0;
}
.bordereau__ligne {
  display: flex;
  align-items: baseline;
  gap: var(--espace-3);
  margin: 0;
  font-size: var(--taille-sm);
}
/* Les points de conduite : ils relient l'intitulé à sa valeur sans un filet
   porteur de sens, et ils rendent une ligne vide visiblement vide. */
.bordereau__cle {
  flex: 0 0 auto;
  color: var(--couleur-texte-doux-sombre);
}
/* Les points se posent sur la LIGNE DE BASE du texte, pas à mi-hauteur d'x :
   la ligne est en `align-items: baseline`, donc c'est `align-self: baseline`
   qui les aligne sur l'intitulé et sa valeur. */
.bordereau__points {
  flex: 1 1 auto;
  align-self: baseline;
  border-bottom: var(--trait-fin) dotted rgba(200, 220, 234, 0.4);
}
.bordereau__valeur {
  flex: 0 0 auto;
  font-family: var(--police-mono);
  font-variant-numeric: tabular-nums;
  color: var(--brut-blanc);
}
.bordereau__valeur--attente {
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--couleur-texte-doux-sombre);
}

/* La cartouche du certificat — le seul endroit de la page où un chiffre a le
   droit d'être aussi gros qu'un titre. */
.cartouche {
  display: grid;
  gap: var(--espace-4);
  align-content: start;
  padding: var(--espace-5);
  border: var(--trait-fin) solid rgba(248, 192, 56, 0.35);
  background: rgba(248, 192, 56, 0.06);
}
.cartouche__cle {
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-accent);
}
.cartouche__numero {
  display: block;
  margin-top: var(--espace-1);
  font-family: var(--police-mono);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--couleur-accent);
  font-variant-numeric: tabular-nums;
  /* Un clic sélectionne le numéro entier : l'entrepreneur qui n'a pas de
     presse-papier disponible (hors HTTPS) le prend quand même d'un geste. */
  user-select: all;
}
.cartouche__montant {
  display: block;
  margin-top: var(--espace-1);
  font-family: var(--police-mono);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--brut-blanc);
  font-variant-numeric: tabular-nums;
}
/* Pas de montant dans cette province : la valeur cède au motif. Même endroit,
   corps de phrase — un « Aucun montant » composé au corps du chiffre se lirait
   comme une valeur, et c'est précisément là que l'œil vient chercher une somme. */
.cartouche__montant--attente {
  font-family: var(--police-titre);
  font-size: var(--taille-md);
  font-style: italic;
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte-doux-sombre);
}
.cartouche__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }
.cartouche .subv__lien { color: var(--couleur-accent); }
/* Les icônes de presentation.js n'ont ni width ni height : elles suivent la
   taille qu'on leur donne ici, et 02-base leur impose display:block. */
.cartouche .bouton svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

.bordereau__colonne { display: grid; gap: var(--espace-4); align-content: start; }

/* Cartouche d'attente : le registre de l'honnêteté — crème et brun, la même
   couleur que « à confirmer » et « en préparation » partout ailleurs sur le
   site. Elle n'affiche AUCUN numéro, parce qu'il n'y en a aucun. */
.cartouche--attente {
  border-color: rgba(248, 192, 56, 0.25);
  background: rgba(253, 243, 220, 0.06);
}
.cartouche--attente .cartouche__cle { color: var(--brut-or); }
.cartouche__texte {
  margin: 0;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-doux-sombre);
}

.bordereau__fiche {
  margin: 0;
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
}
/* Le lien doit être recoloré LUI-MÊME : `a { color: var(--couleur-primaire) }`
   de 02-base est une valeur spécifiée, elle bat l'héritage de son paragraphe.
   Le marine sur l'abysse ne fait que 1,46:1 — c'est la même famille de bug que
   le `.hero`/`.heros` corrigé plus haut, et elle ne se voit que dans un
   navigateur. La planche de nuit n'est pas `.section--sombre`, donc rien ne la
   rattrapait. */
.bordereau__fiche a { color: var(--couleur-accent); }

.regle__note {
  margin: var(--espace-5) 0 0;
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux-sombre);
}
/* ---------------------------------------------------------------------------
   LE REGISTRE AHRI — retiré le 2026-08-06
   -----------------------------------------------------------------------------
   Ses ~90 lignes de style sont parties avec lui. Il n'y a pas de raison de
   garder du CSS pour un bloc que plus aucun code ne rend : la prochaine
   personne le lirait comme un composant vivant et essaierait de le retrouver
   à l'écran. L'historique git le garde s'il faut le ressusciter.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   PLANCHE 06 — LES GAMMES
--------------------------------------------------------------------------- */
.gammes { display: grid; gap: var(--espace-5); }
@media (min-width: 48rem) { .gammes { grid-template-columns: repeat(2, 1fr); } }

/* Sur une planche, rien ne se soulève. Le survol change le filet, pas l'altitude. */
.planche .carte--interactive:hover {
  transform: none;
  box-shadow: var(--ombre-xs);
  border-color: var(--couleur-primaire);
}

/* ---------------------------------------------------------------------------
   PLANCHE 07 — QUATRE CHOSES
   -----------------------------------------------------------------------------
   La numérotation est légitime ici : ce sont quatre arguments distincts, pas une
   séquence. Le numéro est donc traité comme un numéro de MARGE — en chasse fixe,
   au filet, à côté du titre — et non comme une pastille décorative.
--------------------------------------------------------------------------- */
.arguments { display: grid; gap: var(--espace-6); }
@media (min-width: 48rem) { .arguments { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .arguments { grid-template-columns: repeat(4, 1fr); } }

.argument { padding-top: var(--espace-4); border-top: var(--trait-moyen) solid var(--couleur-primaire); }
.argument__numero {
  display: block;
  margin-bottom: var(--espace-3);
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--couleur-texte-secondaire);
  font-variant-numeric: tabular-nums;
}
.argument h3 { font-size: var(--taille-md); margin-bottom: var(--espace-2); }
.argument p { color: var(--couleur-texte-secondaire); font-size: var(--taille-sm); }

/* ---------------------------------------------------------------------------
   PLANCHE 08 — CE QUE NOUS PUBLIERONS
   -----------------------------------------------------------------------------
   Publier les trous de la fiche technique est contre-intuitif, et c'est
   exactement pour ça que ça fonctionne devant un installateur : une fiche qui
   répond à tout est une fiche que personne n'a vérifiée.
--------------------------------------------------------------------------- */
.attente {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--trait-fin) dashed var(--couleur-trait);
  overflow: hidden;
}
.attente__ligne {
  display: grid;
  gap: var(--espace-1) var(--espace-5);
  grid-template-columns: auto 1fr;
  align-items: baseline;
  padding: var(--espace-4) var(--espace-5);
  background: var(--couleur-surface);
}
.attente__ligne + .attente__ligne { border-top: var(--trait-fin) dashed var(--couleur-trait); }
@media (min-width: 48rem) {
  .attente__ligne { grid-template-columns: 7rem 14rem 1fr; align-items: center; }
}

.attente__badge {
  justify-self: start;
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  background: var(--couleur-alerte-fond);
  color: var(--couleur-alerte);
  font-family: var(--police-mono);
  font-size: var(--taille-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.attente__titre {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  color: var(--couleur-texte);
}
.attente__texte {
  grid-column: 1 / -1;
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}
@media (min-width: 48rem) { .attente__texte { grid-column: auto; } }

/* ---------------------------------------------------------------------------
   LE RAIL DE MARGE — où l'on en est dans la planche
   -----------------------------------------------------------------------------
   Dix crans, un par planche, le cran courant en or. Posé PAR LE JS et
   aria-hidden : c'est un indicateur, pas une navigation. Le sommaire de la
   couverture et la navigation de l'en-tête assurent déjà le déplacement — un
   troisième dispositif focusable n'ajouterait que de la dette au clavier.
--------------------------------------------------------------------------- */
.rail {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: max(var(--espace-4), calc(50% - var(--largeur-large) / 2));
  z-index: 2;
  flex-direction: column;
  gap: var(--espace-2);
}
@media (min-width: 82rem) { .rail { display: flex; } }
.rail__cran {
  width: 1.25rem;
  height: var(--trait-moyen);
  background: var(--couleur-trait);
  transition: background var(--duree-etat) var(--courbe-etat),
              width var(--duree-etat) var(--courbe-etat);
}
.rail__cran[data-courant="true"] { width: 2rem; background: var(--couleur-aiguille); }

/* ---------------------------------------------------------------------------
   RÉVÉLATION AU DÉFILEMENT
   -----------------------------------------------------------------------------
   Posée par js/accueil.js, et UNIQUEMENT si l'utilisateur ne demande pas un
   mouvement réduit. L'état initial n'est jamais `opacity: 0` en CSS pur : si le
   JS échoue, la page resterait invisible. C'est le JS qui pose [data-reveler],
   donc rien ne peut disparaître sans lui.
--------------------------------------------------------------------------- */
[data-reveler] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duree-reveler) var(--courbe-planche),
              transform var(--duree-reveler) var(--courbe-planche);
}
[data-reveler="vu"] { opacity: 1; transform: none; }

/* Les filets de la couverture se TRACENT, de gauche à droite : une règle qu'on
   repose sur la table. Trois au maximum, décalés de 40 ms — au-delà, ce n'est
   plus une chorégraphie, c'est une file d'attente. */
[data-tracer] { transform: scaleX(0); transform-origin: left center; }
[data-tracer="vu"] {
  transform: scaleX(1);
  transition: transform var(--duree-trait) var(--courbe-planche);
}

/* ---------------------------------------------------------------------------
   MOUVEMENT RÉDUIT — on coupe tout ce qui bouge
   -----------------------------------------------------------------------------
   La règle globale de 02-base.css neutralise les animations CSS. Elle ne peut
   rien contre ce que pilote le JS : brancherVideo(), brancherRevelation() et le
   rail testent donc matchMedia eux-mêmes. La règle graduée, elle, reste
   INTÉGRALEMENT utilisable — c'est l'état de référence, pas une version
   dégradée : seul le glissement du réticule disparaît.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveler] { opacity: 1; transform: none; transition: none; }
  [data-tracer] { transform: none; transition: none; }
  .regle__reticule { transition: none; }
  .regle__cran::before { transition: none; }
  .regle__cran:hover::before { transform: none; }
  .regle__radio:checked + .regle__cran::before { transform: scale(1.45); }
}