/* ═══════════════════════════════════════════════════════════════════════════════════
   LE GABARIT DES PAGES DE TEXTE — mentions légales · politique cookies · 404
   (lot B de l'échelle typographique, spéc CMO 43191bb · direction 2026-09-10)

   ⚠️ CES TROIS PAGES PORTAIENT LE MÊME BLOC RECOPIÉ TROIS FOIS — identique au caractère
   près le jour où il a été extrait. Le blog avait connu le même point de départ et ses
   copies avaient fini par diverger (cinq feuilles pour neuf articles, lot C).
   TOUT STYLE DE PAGE DE TEXTE SE FAIT ICI, pas dans un <style> rouvert.

   La typographie vient des JETONS de l'échelle (déclarés dans shared.css).
   Un palier = un endroit. Aucune taille en dur, aucune pile de secours en Jost.

   Ce qui a changé au lot B, et pourquoi ça compte : la politique cookies porte 80
   paragraphes et 41 items de liste — la lecture la plus longue du site, jusqu'ici
   servie dans la plus petite taille (corps à 16, listes à 15, quand l'accueil est à 17).
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── Charpente ── */
.legal-wrap { padding-top: 0; }
.legal-hero { background: var(--dark); padding: 64px 24px 56px; }
.legal-hero-inner { max-width: 760px; margin: 0 auto; }
.legal-container { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.legal-back { margin-bottom: 32px; }
@media (max-width: 540px) { .legal-container { padding: 48px 16px 80px; } }

/* Norme 95 % (direction 2026-09-02) : aucune ligne de titre ne touche le bord de son cadre.
   On borne la MESURE et non le corps — le titre casse avant le bord au lieu d'être rapetissé.
   ⚠️ Ces pages ne sont pas atteintes par le bloc « NORME » de src/style.css : elles ne
   chargent pas ce fichier. Toute reprise de la norme doit être répercutée ici aussi. */
.legal-h3, .legal-hero-title { max-width: 80%; }
.legal-hero-sub, .legal-body p, .legal-body li, .legal-lead { max-width: 80%; }

/* ── Palier 1 — titre de page ── */
.legal-hero-title {
  font-family: var(--ff-titre); font-weight: 360;
  font-size: var(--fs-1); line-height: var(--lh-1);
  letter-spacing: -0.02em; color: var(--white); margin-bottom: 16px;
}

/* ── Palier 3 — titre de section ──
   3 occurrences dans les mentions, 21 dans la politique cookies. */
.legal-h3 {
  font-family: var(--ff-titre); font-weight: 400;
  font-size: var(--fs-3); line-height: var(--lh-3);
  letter-spacing: -0.02em; color: var(--dark); margin: 40px 0 16px;
}

/* ── Palier 6 — texte courant — interligne 1,70 ──
   Les listes passent au MÊME palier que les paragraphes : dans un texte juridique,
   une énumération est du texte courant, pas du secondaire. */
.legal-body, .legal-body ul li {
  font-family: var(--ff-texte); font-weight: 400;
  font-size: var(--fs-6); line-height: var(--lh-6);
}
.legal-body { color: var(--muted); }
.legal-body p { margin-bottom: 20px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: var(--dark); font-weight: 600; }
.legal-body ul { margin: 16px 0 20px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
/* Lien dans le texte : laiton-DEEP et non laiton-1. Mesuré sur le fond réel de ces pages,
   laiton-1 tombe à 2,70:1 — très au-dessous du 4,5:1 exigé sous 24 px. Règle du 2026-09-08. */
.legal-body a { color: var(--gold-deep); text-decoration: underline; text-decoration-color: rgba(127,98,52,.45); }
.legal-body a:hover { text-decoration-color: var(--gold-deep); }

/* ── Palier 7 — secondaire ── */
.legal-info-box, .legal-back a {
  font-family: var(--ff-texte); font-weight: 400;
  font-size: var(--fs-7); line-height: var(--lh-7);
}
.legal-info-box { background: var(--papier); border-left: 3px solid var(--gold); padding: 20px 24px; margin: 28px 0; }
.legal-back a { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; }
.legal-back a:hover { color: var(--gold-deep); }

/* ── Palier 8 — note ──
   « Dernière mise à jour : … » est une MÉTADONNÉE, pas une accroche : palier 8 et non 5
   (correction CMO du 2026-09-10). À 19 px, elle crierait une date de maintenance sous le titre. */
.legal-hero-sub {
  font-family: var(--ff-texte); font-weight: 400;
  font-size: var(--fs-8); line-height: var(--lh-8);
  color: rgba(255,255,255,.62);
}

/* ── Palier 9 — étiquette ── */
.legal-hero-kicker, .legal-info-box strong {
  font-family: var(--ff-texte); font-weight: 600;
  font-size: var(--fs-9); line-height: var(--lh-9);
  letter-spacing: .16em; text-transform: uppercase;
}
.legal-hero-kicker { color: var(--gold); margin-bottom: 20px; }   /* sur fond encre : le laiton-1 passe, mesuré */
.legal-info-box strong { color: var(--gold-deep); display: block; margin-bottom: 6px; }

/* ── Consentement Matomo ──
   #matomo-opt-out est du contenu TIERS injecté par optOutJS. On le laisse HÉRITER du
   palier 6 : aucune règle en dur ici, aucun balisage touché. C'est un mécanisme de
   consentement, il doit continuer de fonctionner. */