/* Refonte — page /comparatif (étape 2, première des pages principales).
   Toute valeur vient de css/v2/jetons.css. Le tableau comparatif lui-même est
   un composant transverse : il vit dans css/v2/composants.css. */

/* ——— Héro : même rythme que /download, sans la colonne signature ——— */

/* Padding bas a zero, ecart assume avec le heros de /download (DA §2, ecart du
   2026-08-28) : ce heros n'a pas de colonne signature, donc les 24 px de padding
   bas s'ajoutaient au rythme inter-sections de 96 px et le creux avant
   « Dix criteres » se lisait comme un trou. A zero, l'ecart EST le rythme. */
.hero-comparatif {
  padding-block: var(--e-7) 0;
}

@media (min-width: 1024px) {
  .hero-comparatif {
    padding-block: var(--e-8) 0;
  }
}

/* Aucune mesure sur le titre : c'est le conteneur qui borne, et le titre tient
   ainsi sur une seule ligne partout ou la largeur le permet (mesure du
   2026-08-29 : 829 px de texte contre 1104 px utiles a 1440, 928 a 1024).
   ⚠️ `max-width: none` est obligatoire : le socle plafonne tout h1 a 22ch, et
   retirer la valeur locale y retombe au lieu de liberer le titre (mesure du
   2026-08-29 : 701 px sur deux lignes). `balance` sert en dessous de 1024,
   la ou le titre casse pour de bon. */
.hero-comparatif h1 {
  font-size: var(--t-heros);
  line-height: 1.08;
  max-width: none;
  text-wrap: balance;
}

/* Une ligne de 768 à 1079 px aussi (arbitrage B du 2026-08-29 ; audit v2 A232,
   décision d'Antoine du 2026-09-26). En Literata, le titre fait 18,2 fois sa
   taille de police (946 px à 52 px, mesuré le 2026-09-26) : le diviseur 19 laisse
   la marge d'une barre de défilement. ≈ 37 px à 768, ≈ 49 px à 1024. */
@media (min-width: 768px) and (max-width: 1079px) {
  .page-comparatif-principal .hero-comparatif h1 {
    font-size: min(var(--t-heros), calc((100vw - 2 * var(--gouttiere)) / 19));
  }
}

/* 68ch : la mesure de prose du site, et non les 56ch d'origine qui laissaient
   520 px de vide a droite sur le premier ecran (arbitrage d'Antoine du
   2026-08-29, option B des quatre maquettes). */
.hero-comparatif__definition {
  font-size: var(--t-h4);
  line-height: 1.4;
  max-width: 68ch;
  color: var(--texte-2);
}

/* En encre sur /comparatif, comme /download : c'est le premier texte à lire
   (audit v2 A151, 2026-09-26). /azerty-ameliore garde son gris. */
.page-comparatif-principal .hero-comparatif__definition {
  color: var(--encre);
}

/* ——— Cartes des dispositions ergonomiques : trois colonnes dès 768 px ——— */

.cartes-dispositions {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 768px) {
    .cartes-dispositions {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cartes-dispositions h3 {
  font-size: var(--t-h4);
}

.cartes-dispositions p {
  margin-bottom: 0;
}

.cartes-dispositions {
  margin-block: var(--e-6);
}

/* ——— Bloc de mesure : un tableau de deux lignes n'a pas à traverser
       1200 px. Même plafond que les captures d'une notice pleine (44rem). ——— */

/* Boutons en fin de section (/azerty-ameliore, 2026-09-26). */
.actions-disposition {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.bloc-mesure {
  max-width: 44rem;
  margin-block: var(--e-6);
}

/* Juste sous un h2, seule sa marge de 24 px compte (RC-03, 2026-09-28). */
h2 + .cartes-dispositions,
h2 + .bloc-mesure {
  margin-top: 0;
}

/* `.prose p` plafonne à 68ch, et le `ch` suit la police de l'élément : 68 caractères
   de texte petit tombaient à 473 px quand les paragraphes voisins en font 575 (mesuré
   le 2026-09-01, retour d'Antoine). La mesure est reprise en rem pour que la note
   s'aligne sur la colonne de texte, pas sur son propre corps. Sélecteur à deux classes :
   `.prose p` porte déjà un max-width et battrait `.note-mesure` seul à specificité
   supérieure. */
.note-mesure {
  margin-top: var(--e-4);
}

.prose .note-mesure {
  max-width: 36rem;
}

/* ——— Citation du § AFNOR : le composant .temoignage, hors de sa grille ——— */

.citation-afnor {
  max-width: 68ch;
  margin-block: var(--e-6);
}

/* ——— FAQ : les .notice ne portent qu'un filet haut ; le dernier a besoin
       du filet bas pour fermer la liste. ——— */

.faq-liste .notice:last-child {
  border-bottom: 1px solid var(--bordure);
}

.faq-liste .notice__contenu p {
  margin-bottom: 0;
}

.bilan-ergonomiques {
  margin-top: var(--e-6);
}

/* ——— Bloc « Ce qu'il y a à retenir » (§ AFNOR) : deux cartes de règles face à
       face, pour que l'écart de mémorisation se lise sans lire. ——— */

/* Écart --e-5, celui des témoignages juste après (lot 7, A137). */
.cartes-regles {
  display: grid;
  gap: var(--e-5);
  margin-block: var(--e-5);
}

@media (min-width: 768px) {
  .cartes-regles {
    grid-template-columns: 1fr 1fr;
  }
}

/* Même niveau et même taille que les cartes de dispositions : le titre est un
   h3 pour ne pas sauter de niveau sous le h2, et garde l'échelle h4. */
.cartes-regles h3 {
  font-size: var(--t-h4);
  margin-bottom: var(--e-3);
}

/* Les listes de règles ne passent pas par .prose : la mesure de 68ch n'a pas de
   sens dans une colonne de carte, qui est déjà plus étroite. */
.cartes-regles ul {
  margin-bottom: 0;
  padding-left: var(--e-5);
}

.cartes-regles li + li {
  margin-top: var(--e-3);
}

/* Puce en filet de 2 px, celle des listes de faits de /download (`.canal__faits`) :
   audit v2 A482, décision d'Antoine du 2026-09-26. */
.cartes-regles .liste-filet {
  list-style: none;
  padding-left: 0;
}

.liste-filet li {
  position: relative;
  padding-left: var(--e-5);
}

.liste-filet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 2px;
  background: var(--action);
}

/* ——— Tableau « Dix critères » : trois colonnes de valeurs égales au bureau
       (audit v2 A529, 2026-09-26). Au-dessus du seuil de reflux seulement : en
       dessous, les cellules sont des blocs et la règle ne joue plus. ——— */

.page-comparatif-principal .tableau-compare:not(.tableau-compare--compact) table {
  table-layout: fixed;
}

.page-comparatif-principal .tableau-compare:not(.tableau-compare--compact) thead th:first-child {
  width: 34%;
}

/* Cartes de reflux compactes (audit v2 A262, 2026-09-26) : l'étiquette de colonne
   passe sur la ligne de la valeur au lieu d'une ligne à elle. Les dix critères
   restent, un tiers de hauteur en moins. Le texte de remplacement vide garde la
   règle a11y du composant (l'en-tête de colonne est déjà annoncé). */
@container compare (max-width: 52rem) {
  .page-comparatif-principal .tableau-compare td::before {
    content: attr(data-colonne) "\00a0: ";
    content: attr(data-colonne) "\00a0: " / "";
    display: inline;
  }

  .page-comparatif-principal .tableau-compare td + td {
    margin-top: var(--e-2);
  }
}

/* ——— Tableaux compacts sous 480 px (audit v2 A531, 2026-09-26) : en-têtes
       « Global » / « AFNOR », « AZERTY » gardé pour les lecteurs d'écran ;
       largeur automatique et padding latéral --e-2. Une colonne d'intitulés
       fixée à 50 % coupait davantage (mesuré : 175 px contre 223 px à 390,
       3 lignes contre 1) — décision d'Antoine du 2026-09-26. ——— */

@media (max-width: 479px) {
  .entete-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .page-comparatif-principal .tableau-compare--compact th,
  .page-comparatif-principal .tableau-compare--compact td {
    padding-inline: var(--e-2);
  }
}