/* Refonte — pages d'information légale (/confidentialite, /accessibilite,
   /mentions-legales, /licence), sur un seul gabarit (audit v2, A163). Un héros
   sobre, et des listes de définitions où le terme et son explication se lisent
   en vis-à-vis.
   ⛔ Rien de la famille formulaire ni des composants transverses ne se
   redescend ici : css/v2/composants.css en est la source. */

.hero-legal {
  padding-block: var(--e-7) 0;
}

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

/* ⚠️ `max-width: none` obligatoire : le socle plafonne tout h1 à 22ch, et
   retirer la valeur locale y retombe au lieu de libérer le titre. */
.hero-legal h1 {
  font-size: var(--t-heros);
  line-height: 1.08;
  max-width: none;
  text-wrap: balance;
}

.hero-legal__definition {
  font-size: var(--t-h4);
  line-height: 1.4;
  max-width: 68ch;
  color: var(--texte-2);
}

/* La phrase d'état (le niveau de conformité, l'absence de cookie) est ce
   qu'on lit en premier : en encre, le reste du chapô reste secondaire
   (critique du 2026-09-27, DESIGN.md › Neutral). */
.hero-legal__definition--etat {
  color: var(--encre);
}

/* Les deux paragraphes du chapô forment un groupe : 8 px entre eux, sans la
   marge basse du premier, qui fusionnait et donnait 16 px. */
.hero-legal__definition--etat:has(+ .hero-legal__definition) {
  margin-bottom: 0;
}

.hero-legal__definition--etat + .hero-legal__definition {
  margin-top: var(--e-2);
}

/* ——— Prose des sections ———
   `.mesure-lecture` (44rem) est calibrée pour les formulaires : en prose de
   17 px elle donnait plus de 100 caractères par ligne. 36rem ramène le corps
   vers 68 caractères. ⚠️ En rem, pas en ch (voir la note des fiches). */
.section .mesure-lecture > :is(p, ul, ol) {
  max-width: 36rem;
}

/* Un intertitre se rattache à ce qui le suit : plus d'air au-dessus
   qu'en dessous. */
.section .mesure-lecture > * + h3 {
  margin-top: var(--e-6);
}

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

/* ——— Listes de définitions ———
   Le terme à gauche, ce qu'il fait à droite : sur une page où chaque entrée est
   un outil ou un fichier, la paire se lit d'un coup d'œil et un lecteur d'écran
   l'annonce comme une paire.
   ⚠️ Largeur bornée en rem, jamais en ch : la borne en ch se calcule sur le
   corps du bloc, donc les lignes en petit corps se retrouveraient plus étroites
   que le paragraphe voisin. */

/* Sur une colonne, le terme colle à sa valeur et la paire suivante prend
   l'écart : à écarts égaux, une valeur flottait entre deux termes. */
.fiches {
  display: grid;
  margin: var(--e-5) 0 var(--e-6);
}

.fiches__nom {
  font-weight: 600;
  margin: 0;
}

.fiches__quoi {
  margin: var(--e-1) 0 var(--e-5);
  max-width: 44rem;
}

.fiches__quoi:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .fiches {
    grid-template-columns: minmax(auto, 15rem) 1fr;
    column-gap: var(--e-5);
    row-gap: var(--e-5);
  }

  .fiches__quoi {
    margin: 0;
  }
}

/* Les paragraphes d'une même explication restent serrés entre eux : c'est un
   bloc, pas une suite de paragraphes indépendants. */
.fiches__quoi > p {
  margin: 0;
}

.fiches__quoi > p + p {
  margin-top: var(--e-2);
}

/* /plan-du-site : les rubriques en grille, lues d'un coup d'œil sur grand
   écran ; une colonne sous 18rem de large. */
.plan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--e-7) var(--e-6);
}

.plan__rubrique h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--e-3);
}

.plan__rubrique ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

/* La version anglaise ferme le plan sur toute la largeur : seule dans une
   rangée de la grille, elle passait pour un oubli (critique du 2026-10-12). */
.plan__rubrique[lang="en"] {
  grid-column: 1 / -1;
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
}