/* Home v2 — src/pages/index.njk.
   Issue de la maquette P15a du 2026-09-16, dont Antoine a retenu la variante B.
   Aucun jeton, aucune nuance locale : tout vient de jetons.css.

   Ce que cette feuille ajoute au référentiel, et rien d'autre :
   - .heros-accueil          : le héros de la home
   - .heros-accueil--colonnes: la mise en deux colonnes, texte puis clavier
   - .heros-accueil__chips   : les 6 arguments du héros, en texte simple, visibles à toutes les largeurs
   - .pourquoi-liste         : les trois problèmes de « Pourquoi changer d'AZERTY »
   - .preuve-adoption        : le chiffre d'adoption et sa date de relevé
   ————————————————————————————————————————————————————————————————— */

/* ——— Héros de la home ——— */

/* Rythme du héros de /download (lot 7, A055) : la marge de section s'ajoutait
   au padding et laissait 112 px (mobile) à 144 px (bureau) sous l'en-tête. */
.heros-accueil {
  margin-top: 0;
  padding-block: var(--e-7) 0;
}

@media (min-width: 1024px) {
  .heros-accueil {
    padding-top: var(--e-8);
  }
}

.heros-accueil h1 {
  max-width: none;
  margin-bottom: var(--e-3);
}

.heros-accueil__accroche {
  font-size: var(--t-h4);
  color: var(--texte-2);
  max-width: 54ch;
  margin-bottom: var(--e-5);
}

/* Six arguments en texte simple, sans cadre à aucune largeur : un argument
   n'est pas un contrôle (lot 7, A229 ; QCM du 2026-10-11). Deux colonnes de
   trois lignes, trois colonnes de deux entre 480 et 1023 px : six se partagent
   toujours en rangées pleines, cinq laissaient une orpheline. */
.heros-accueil__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-5);
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) and (max-width: 1023px) {
  .heros-accueil__chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.heros-accueil__chip {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-size: var(--t-petit);
  color: var(--texte-2);
}

/* Glyphe en h4 (seconde critique du 2026-10-11) : en corps, le « . » ne se
   voyait pas. */
.heros-accueil__chip span {
  flex: none;
  min-width: 1.5em;
  font-family: var(--police-serif);
  font-size: var(--t-h4);
  line-height: 1;
  color: var(--encre);
}

/* La puce survolée allume sa touche (monterChipsHeros) : elle le dit en
   passant en encre, soulignée en --action, la couleur du contour allumé.
   Seulement quand le dessin est interactif et que l'appareil survole ; les
   puces restent du texte (A229), donc pas de curseur de lien. */
@media (hover: hover) {
  .heros-accueil:has(.clavier[data-interactif]) .heros-accueil__chip:hover {
    color: var(--encre);
    text-decoration: underline;
    text-decoration-color: var(--action);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
  }

  .heros-accueil:has(.clavier[data-interactif]) .heros-accueil__chip:hover span {
    text-decoration: none;
  }
}

.heros-accueil__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.heros-accueil__reassurance {
  font-size: var(--t-petit);
  color: var(--texte-2);
}

.heros-accueil__clavier {
  margin-top: var(--e-6);
}

/* ——— Deux colonnes : texte à gauche, clavier à droite dès 1024 px ———
   Le clavier est en cqi : il se remet à l'échelle de sa colonne tout seul.
   En dessous du seuil la grille retombe en une colonne, donc le héros
   s'empile texte puis clavier sur mobile — c'est voulu.

   Le h1 est hors grille et court sur toute la largeur : c'est ce qui permet
   de le tenir sur une ligne tout en donnant au clavier la part majoritaire.
   L'action principale a sa propre ligne, ce qui libère encore de la largeur. */

.heros-accueil__titre-plein {
  max-width: none;
}

.heros-accueil__actions--principale {
  margin-bottom: var(--e-3);
}

@media (min-width: 1024px) {
  .heros-accueil--colonnes .heros-accueil__grille {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--e-7);
    /* Haut du clavier au niveau de l'accroche (lot 7, A231). */
    align-items: start;
  }

  .heros-accueil--colonnes .heros-accueil__clavier {
    margin-top: 0;
  }

  .heros-accueil--colonnes .heros-accueil__accroche {
    max-width: none;
  }
}

/* ——— Le clavier du héros ouvre le plein écran ———
   Le déclencheur est un bouton secondaire visible sous le dessin, à toutes
   les largeurs (A054, lot 7 ; décision d'Antoine du 2026-10-01). Posé en
   surface transparente sur le dessin, il prenait la souris aux touches : ni
   bulle ni fiche au survol. Une pastille propre se lisait comme les badges
   d'argument (A229) : c'est le `.bouton--secondaire` du système (critique
   du 2026-10-02). Écrit en lien au build, il marche sans JS. */

.heros-accueil__loupe {
  margin-top: var(--e-3);
  /* « Voir le clavier » et « en grand » sont deux éléments du flex : l'écart
     tient lieu d'espace-mot (l'espace du span s'ajoutait au gap de 8 px). */
  gap: 0.3em;
}

/* Invite sous le dessin (critique du 2026-10-11) : le héros ne grave que la
   base, rien ne disait de survoler. Elle n'a de sens que si le dessin est
   interactif (JS) et visible (pas sous 640 px). */
.heros-accueil__invite {
  margin-top: var(--e-3);
  font-size: var(--t-petit);
  color: var(--texte-2);
  /* Pas de « touche. » seul en seconde ligne à 1440 px. */
  text-wrap: pretty;
}

.heros-accueil__clavier:not(:has([data-interactif])) .heros-accueil__invite {
  display: none;
}

/* Le clavier du héros est nu au repos : aucun cercle, aucun coin (décision
   d'Antoine du 2026-10-11, 23 h 15 : douze touches cerclées « intimident
   beaucoup trop »). Au survol d'une puce (.heros-accueil__chips), js/v2/clavier.js
   (monterChipsHeros) pose data-allumee sur ses touches : le cercle bleu de la bascule de /guide.
   La transition ne porte que sur le contour, jamais sur le fond ni le texte
   (le changement de thème ne doit rien animer du contraste), et n'existe pas
   sous prefers-reduced-motion. */
.clavier[data-survol="touche"] .clavier__touche--car,
.clavier[data-survol="touche"] .clavier__touche--mod {
  transition: border-color 150ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* La puce « Verr. Maj. intelligent » allume aussi la touche Verr. Maj.
   (data-mods, seconde critique du 2026-10-11) : é seul ne disait pas le geste. */
.clavier[data-survol="touche"] .clavier__touche--car[data-allumee],
.clavier[data-survol="touche"] .clavier__touche--mod[data-allumee] {
  border-color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action);
}

@media (prefers-reduced-motion: reduce) {
  .clavier[data-survol="touche"] .clavier__touche--car,
  .clavier[data-survol="touche"] .clavier__touche--mod {
    transition: none;
  }
}

/* Sous 640 px, un seul clavier sur la page : celui du parcours (lot 7, A221).
   Le dessin du héros disparaît, son bouton reste et ouvre le plein écran.
   Le bouton n'a plus de « grand » à opposer, et les deux actions secondaires
   se partagent une ligne (critique du 2026-10-11). */
@media screen and (max-width: 639px) {
  .heros-accueil__clavier .clavier-defilement,
  .heros-accueil__clavier .clavier-defilement__indice,
  .heros-accueil__invite,
  .heros-accueil__grand {
    display: none;
  }

  .heros-accueil__clavier {
    margin-top: var(--e-3);
  }

  .heros-accueil__loupe {
    margin-top: 0;
  }

  .heros-accueil__actions:not(.heros-accueil__actions--principale) {
    flex-wrap: nowrap;
    gap: var(--e-2);
  }

  .heros-accueil__actions:not(.heros-accueil__actions--principale) .bouton {
    flex: 1 1 0;
    padding-inline: var(--e-2);
    text-align: center;
  }

}

/* Le détail légal du bandeau (fondation, numéro RNA) vit sur /association ;
   le bandeau garde l'essentiel. D'abord sous 640 px ; à toutes les largeurs
   depuis la seconde critique du 2026-10-11 (le RNA fermait le premier écran
   à 1440 × 900). */
.bloc-amcf__detail {
  display: none;
}

/* Libellés des modificateurs (Tab, Entrée, Verr. Maj.) : 8 px au bureau à
   1.3cqi, plancher de 11 px (lot 7, A022). Sous 640 px la règle du défilement
   s'applique seule. */
@media screen and (min-width: 640px) {
  .heros-accueil__clavier .clavier__libelle {
    font-size: max(11px, 1.3cqi);
  }
}

/* La rangée d'actions de l'aide-mémoire (plein écran, imprimer, PDF) n'a rien à
   faire dans un héros : le bouton sous le dessin est le déclencheur. Seul le
   dialogue de la macro est conservé. */
.heros-accueil .clavier-aide__actions {
  display: none;
}

/* ——— Preuve d'adoption ———
   Un nombre et la date à laquelle il a été relevé, sur la même ligne de lecture.
   ⛔ Pas d'animation au défilement : un nombre qui défile signale une page
   fabriquée, et le §8 des fondations ne l'autorise pas. */

.preuve-adoption {
  border-left: 1px solid var(--encre);
  padding-left: var(--e-4);
  margin-bottom: var(--e-6);
}

/* En sans, pas en serif : « un chiffre-clé en serif » est une entorse nommée de
   DESIGN.md (critique du 2026-10-11). */
.preuve-adoption__nombre {
  font-family: var(--police-sans);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.1;
  display: block;
}

.preuve-adoption__mesure {
  font-size: var(--t-petit);
  color: var(--texte-2);
}

/* ——— Ajustements du lot 7 de l'audit v2 ——— */

/* Le bandeau AMCF clôt le héros, sous la grille (A249). */
.heros-accueil .bloc-amcf {
  margin-top: var(--e-6);
}

/* Ligne de contribution du bandeau AMCF (QCM du 2026-10-11). */
.bloc-amcf__contribuer {
  margin-top: var(--e-2);
}

/* « Pourquoi changer » : trois problèmes côte à côte dès 768 px, empilés
   dessous, sans accordéon (QCM du 2026-10-11). */
.pourquoi-liste {
  display: grid;
  gap: var(--e-5);
  margin: var(--e-5) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .pourquoi-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-6);
  }
}

.pourquoi-liste__caracteres {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--police-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.1;
  color: var(--encre);
}

.pourquoi-liste strong {
  display: block;
  margin-bottom: var(--e-1);
}

/* La notice repliée du bloc institutions précède les cartes (A222). */
#institutions .notice + .etapes-suivantes {
  margin-top: var(--e-5);
}

/* En mobile, citations en taille de corps : les quatre témoignages tenaient
   plus d'un écran (A524). */
@media (max-width: 767px) {
  .temoignage p {
    font-size: var(--t-corps);
  }
}

/* ——— Critique pré-publication du 2026-10-11, P2 n° 3 et 4 (QCM du soir) ——— */

/* Ligne de preuve du héros, à toutes les largeurs (seconde critique, P1) :
   le clavier nu au repos ne montrait plus ce qui change. Le É résultat en
   serif, comme les glyphes des puces, mais plus grand : c'est la preuve. */
.heros-accueil__chips {
  margin-bottom: var(--e-4);
}

.heros-accueil__preuve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
  font-size: var(--t-corps);
  color: var(--encre);
}

.heros-accueil__preuve-resultat {
  font-family: var(--police-serif);
  font-size: 1.75em;
  line-height: 1;
}

/* La phrase AFNOR venue de « Notre vision » ferme « Pourquoi changer ». */
.pourquoi-afnor {
  margin-top: var(--e-6);
}

/* « Et maintenant ? » : une action principale, puis trois liens texte. */
.et-maintenant__principale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-5);
}

.et-maintenant__detail {
  font-size: var(--t-petit);
  color: var(--texte-2);
}

.et-maintenant__liens {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--texte-2);
}

.et-maintenant__liens li + li {
  margin-top: var(--e-2);
}

/* Cible de 44 px sans couper la phrase : le lien grandit en hauteur, en ligne. */
.et-maintenant__liens a {
  display: inline-block;
  padding-block: 10px;
  font-weight: 600;
}

/* Lien seul sous les questions : cible de 44 px (A147). */
.questions-accueil__tout a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
}