/* Refonte — socle typographique et composants de base.
   Toute valeur vient de css/v2/jetons.css ; aucune nuance, rayon ou
   espacement local (fondations §15.6). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-sans);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.55;
}

/* ——— Titres (fondations §3) ——— */

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0 0 var(--e-4);
}

h1 {
  font-family: var(--police-serif);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.12;
  max-width: 22ch;
}

/* Une seule marge sous un h2 de section, sur tout le site : 24 px
   (DESIGN.md, Layout ; A152, C-04 tranché le 2026-09-28). */
h2 {
  margin-bottom: var(--e-5);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
}

h4 {
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
}

/* Titres équilibrés : sans cela la marque se coupait (« Télécharger AZERTY » /
   « Global ») et les h3 finissaient sur un mot seul à 320 px (lot 7, A144). */
h1,
h2,
h3 {
  text-wrap: balance;
}

.texte-heros {
  font-family: var(--police-serif);
  font-size: var(--t-heros);
  font-weight: 600;
  line-height: 1.08;
}

/* Niveau propre au projet : glyphes de la composition signature, jamais du texte */
.caractere-signature {
  font-family: var(--police-serif);
  font-size: var(--t-caractere);
  font-weight: 600;
  line-height: 1;
}

.texte-2 {
  color: var(--texte-2);
}

.texte-petit {
  font-size: var(--t-petit);
  line-height: 1.5;
}

/* Titre ramené au corps courant (h3 « Vous êtes sur mobile ? » de /download).
   Existe pour remplacer un style= inline que la CSP supprimait en production
   (T1, 2026-09-02) : ⛔ jamais de font-size en attribut style. */
.texte-corps {
  font-size: var(--t-corps);
  line-height: 1.5;
}

/* ——— Prose ——— */

/* `p.prose` : la classe posée sur le paragraphe lui-même ne bornait rien, le
   socle ne visant que ses descendants (lot 7, A248). */
.prose p,
.prose ul,
.prose ol,
p.prose {
  max-width: 68ch;
}

/* Note en petit corps dans la prose : le `ch` suit la police de l'élément,
   68ch de texte petit tombaient à 473 px contre 575 px pour le paragraphe
   voisin (mesuré le 2026-09-01). Bornée en rem pour s'aligner sur la colonne
   de texte. Deux classes : `.prose p` gagnerait contre `.texte-petit` seul. */
.prose .texte-petit {
  max-width: 36rem;
}

/* Combinaison de touches ou paire « touche → résultat » : un seul bloc, qui ne
   se coupe pas en fin de ligne (lot 7, A206). */
.insecable {
  white-space: nowrap;
}

/* ——— Liens ——— */

a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* ——— Focus (fondations §1 : anneau 2 px + 2 px d'écart) ——— */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ——— Technique : code, empreintes, raccourcis ——— */

code,
pre,
kbd,
samp {
  font-family: var(--police-mono);
  font-size: var(--t-petit);
}

/* Empreintes et identifiants insécables : casser plutôt que déborder */
code,
samp {
  overflow-wrap: anywhere;
}

kbd {
  display: inline-block;
  padding: 0 var(--e-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-controle);
  background: var(--surface);
  line-height: 1.6;
}

/* ——— Conteneur et sections (fondations §4-5) ——— */

.conteneur {
  max-width: var(--conteneur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  margin-block: var(--rythme-section);
  /* Les chips du sommaire (guide.njk) sautent pile au sommet sans ça : le
     titre colle au bord du viewport (retour d'Antoine, 2026-09-24). */
  scroll-margin-top: var(--e-6);
}

/* Ancre posée dans une section (/guide#cartes) : même marge que la section. */
.section > [id] {
  scroll-margin-top: var(--e-6);
}

img {
  max-width: 100%;
  height: auto;
}

/* ——— Boutons (addendum §4 : le primaire s'inverse en thème sombre) ——— */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible-min);
  padding: var(--e-2) var(--e-5);
  border: none;
  border-radius: var(--rayon-controle);
  font-family: var(--police-sans);
  font-size: var(--t-corps);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration-color var(--duree-controle) ease-out;
}

/* ⚠️ `display: inline-flex` écrase `[hidden]` : sans JS, « Ouvrir en plein
   écran » et « Imprimer l'aide-mémoire » s'affichaient et ne faisaient rien
   (critique du 2026-10-02). */
.bouton[hidden] {
  display: none;
}

.bouton--primaire {
  background: var(--bouton-primaire-fond);
  color: var(--bouton-primaire-texte);
}

.bouton--secondaire {
  background: transparent;
  border: 1px solid var(--encre);
  color: var(--encre);
}

/* Secondaire accentue : un telechargement reel qui reste depriorise. Porte la
   couleur d'action sans prendre le poids du bouton primaire (plan §6.5, qui
   depriorise l'EXE ; retour d'Antoine du 2026-08-27, qui le voulait colore).
   Mesure : 6,6:1 en ivoire, 7,7:1 en sombre. */
.bouton--accent {
  background: transparent;
  border: 1px solid var(--action);
  color: var(--action);
}

.bouton:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bouton:active {
  transform: translateY(1px);
}

/* État désactivé — figé le 2026-08-31 avec la famille formulaire (arrêt 2 clos).
   ⛔ L'état provisoire était `opacity: 0.55`, et l'opacité composite le texte
   ET le fond : mesuré sur le primaire posé sur `--papier`, il rendait 1,86:1 en
   ivoire et 1,99:1 en sombre, très en dessous du 4,5:1 de AA. Or c'est l'état
   que porte le bouton d'envoi de chaque formulaire pendant la requête, quand
   son libellé (« Envoi en cours… ») est justement ce qu'il faut lire.
   Le remplaçant est opaque et uniforme quelle que soit la variante : fond
   `--bordure`, texte `--texte-2`, soit 4,91:1 en ivoire et 4,60:1 en sombre.
   Le fond ne se détache que de 1,42:1 sur le papier — c'est voulu, le bloc doit
   se lire comme inerte pendant que son libellé reste lisible. */
.bouton:disabled,
.bouton[aria-disabled="true"] {
  background: var(--bordure);
  color: var(--texte-2);
  border-color: var(--bordure);
  cursor: not-allowed;
}

.bouton:disabled:hover,
.bouton[aria-disabled="true"]:hover {
  text-decoration: none;
}

.bouton:disabled:active,
.bouton[aria-disabled="true"]:active {
  transform: none;
}

/* ——— Messages d'état (fondations §1 : fond + titre coloré + texte) ——— */

.message {
  border: 1px solid var(--bordure);
  padding: var(--e-4) var(--e-5);
  margin-block: var(--e-5);
}

.message__titre {
  display: block;
  font-weight: 600;
  margin-bottom: var(--e-1);
}

.message p:last-child {
  margin-bottom: 0;
}

.message--succes {
  background: var(--succes-fond);
}

.message--succes .message__titre {
  color: var(--succes);
}

.message--avertissement {
  background: var(--avertissement-fond);
}

.message--avertissement .message__titre {
  color: var(--avertissement);
}

.message--erreur {
  background: var(--erreur-fond);
}

.message--erreur .message__titre {
  color: var(--erreur);
}

/* ——— Carte : surface délimitée par bordure, jamais par contraste (fondations §1) ——— */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: var(--e-5);
}

/* Remplissage uniforme de 24 px en bas de carte (DESIGN.md), décision d'Antoine du 2026-09-29, lot 8. */
.carte > :last-child {
  margin-bottom: 0;
}

/* ——— Utilitaires d'accessibilité ——— */

/* ⛔ `.sr-only` est l'alias v1 de `.visuellement-cache`, et sa place est ici,
   dans le socle, pas dans `compat-v1.css` : ce n'est pas une classe de mise en
   forme héritée, c'est la primitive qui soustrait un texte réservé aux lecteurs
   d'écran. Mesuré le 2026-09-20 sur /testeur, qui porte le composant testeur v1
   sans charger `compat-v1.css` : trois textes destinés aux seuls lecteurs
   d'écran — « Introduction du parcours », sa description, et le titre
   « Testeur AZERTY Global » — s'affichaient en clair et repoussaient le clavier
   de 125 px vers le bas. Toute page portant un composant v1 est exposée ; la
   déclarer dans le socle couvre les 17 pages compat comme les autres. */
.visuellement-cache,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'une page EN vers une page seulement française : « (in French) » est
   lu par le lecteur d'écran (span .visuellement-cache, décision du
   2026-10-01) et une étiquette « FR » le dit aux voyants (QCM d'Antoine du
   2026-10-10, critique pré-publication E1). Le texte de remplacement vide
   (`/ ""`) garde l'étiquette hors de l'arbre d'accessibilité : pas de
   « (in French) FR » à l'oral. Les liens qui affichent déjà « (in French) »
   en clair (PDF) n'ont pas de span caché et restent sans étiquette.
   P2 de la critique E1 (QCM du 2026-10-10) : taille unique de 12 px (0.7em
   tombait à 9,8 px, puis max(0.7em, 11px) donnait quatre tailles) ; aucune
   étiquette dans les tableaux (16 cellules sur 18 de /en/guide), leur
   légende le dit une fois ; le pied des pages EN porte l'étiquette sur ses
   liens et l'explique (.etiquette-fr, même dessin). Dans les cartes
   « What's next? » (.etape-suivante), le span caché est dans le <strong> du
   titre : l'étiquette suit ce titre, pas la description. */
:lang(en) a[hreflang="fr"]:has(> .visuellement-cache)::after,
:lang(en) a[hreflang="fr"] > strong:has(> .visuellement-cache)::after,
.etiquette-fr {
  content: "FR" / "";
  display: inline-block;
  margin-inline-start: 0.35em;
  padding: 0 0.3em;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  vertical-align: 0.15em;
  text-decoration: none;
}

:lang(en) :is(td, th) a[hreflang="fr"]:has(> .visuellement-cache)::after {
  content: none;
}

.etiquette-fr {
  margin-inline: 0 0.1em;
}

.lien-evitement {
  position: absolute;
  left: var(--e-4);
  top: var(--e-2);
  z-index: 100;
  background: var(--surface);
  color: var(--encre);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--encre);
  transform: translateY(-200%);
}

.lien-evitement:focus {
  transform: none;
}