/* ============================================================
   legal.css — feuille du lot C : les pages de TEXTE.

   Chargée APRÈS `chrome.css` par : mentions-legales · confidentialite ·
   cookies · cgu · cgv · unsubscribe · dev-gate · prod-gate (pages
   racine écrites à la main) et par manifeste.html · merci.html
   (générées, qui ajoutent le lien dans leur propre <head>).

   Elle ne redéclare AUCUN token et ne duplique aucun composant : tout
   ce qui est partagé (surfaces, boutons, formulaires, `.steps`,
   `.fit-list`, `.table-scroll`, `.wrap--prose`) vient de chrome.css.
   Ici, uniquement le corps d'article : colonne de lecture, filets
   entre articles, tableaux RGPD, notes.

   Contraste (BRIEF-V2 §2.1) : la surface est `--stone`. Sur pierre,
   `--muted` ne fait que 4,4:1 et `--orange-ink` 4,2:1 → le corps prend
   `--text` (12,5:1), les méta `--text-2` (≈ 10:1), les liens l'encre
   marine soulignée. L'orange n'y sert que de FILET, jamais de texte.
   ============================================================ */

/* ============================================================
   1 · SURFACE DE LECTURE
   ============================================================ */
.legal-main { background: var(--stone); color: var(--text); }

/* Sur pierre, `a:not([class])` de chrome.css passerait en `--navy` :
   on l'étend aux liens portant une classe utilitaire et on garde le
   survol orange-encre (sur le fond crème d'un `.card`, 5,1:1). */
.legal-main a:not(.btn):not(.logo):not(.nav-cta):not(.nav-founders) {
  color: var(--navy); text-decoration: underline;
  text-underline-offset: 0.16em; text-decoration-thickness: 1px;
}
.legal-main a:not(.btn):hover { text-decoration-thickness: 2px; }

/* Sur pierre, `--muted` ne fait que 4,4:1 et `--orange-ink` 4,2:1 : les
   ledes, notes et étiquettes basculent sur `--text-2` / `--text`, comme
   le fait `.on-stone` dans chrome.css (la classe n'est pas posée ici,
   c'est `.legal-main` qui porte la surface). */
.legal-main .lede,
.legal-main .fine,
.legal-main .hint,
.legal-main .meta { color: var(--text-2); }
.legal-main .eyebrow { color: var(--text); }

/* chrome.css laisse h1 sans marge basse : sans ça la lede colle au titre. */
.legal-main h1 + .lede,
.legal-main h1 + p { margin-top: 16px; }

/* ============================================================
   2 · DOCUMENT JURIDIQUE — colonne unique, filets, prose 62ch
   ============================================================ */
.legal-doc {
  width: 100%;
  max-width: calc(var(--prose) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(64px, 8vw, 104px);
  color: var(--text);
}

/* Même dessin que `.eyebrow` de chrome.css (mono + trait orange 28 px),
   mais en `--text` : c'est la règle des surfaces pierre. */
.legal-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.legal-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--orange); flex: none;
}

.legal-doc h1 { margin: 0 0 12px; max-width: 18ch; }

.legal-meta {
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; color: var(--text-2); margin: 0 0 8px;
}
.legal-history {
  font-size: var(--fs-small); line-height: 1.6; color: var(--text-2);
  margin: 0 0 36px; padding-left: 16px; border-left: 2px solid var(--orange);
}

.legal-doc h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-variation-settings: var(--fv-h2);
  margin: 44px 0 10px; padding-top: 20px;
  border-top: 1px solid var(--line-strong);
  max-width: none;
}
.legal-doc > h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-doc h3 {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  font-variation-settings: normal; font-weight: 500;
  color: var(--text); margin: 26px 0 8px;
}

.legal-doc p,
.legal-doc li { font-size: 15.5px; line-height: var(--lh-prose); color: var(--text); }
.legal-doc p { margin: 0 0 14px; max-width: var(--prose); }
.legal-doc ul,
.legal-doc ol { margin: 0 0 16px; padding-left: 22px; max-width: var(--prose); }
.legal-doc li { margin-bottom: 8px; }
.legal-doc li::marker { color: var(--orange-ink); }
.legal-doc strong { color: var(--navy); }
.legal-doc dl { margin: 0 0 16px; }
.legal-doc dt { font-variation-settings: var(--fv-ui); color: var(--navy); margin-top: 12px; }
.legal-doc dd { margin: 4px 0 0; font-size: 15.5px; line-height: var(--lh-prose); }

/* ------------------------------------------------------------------
   Tableaux. Un <table> ne descend jamais sous la largeur intrinsèque
   de son contenu : les tableaux RGPD élargissaient le viewport à
   519 px sur /confidentialite et 624 px sur /cookies. `table-layout:
   fixed` force les colonnes à se partager la largeur disponible ;
   `.table-scroll` reste le filet pour les contenus vraiment larges.
   ------------------------------------------------------------------ */
.legal-doc .table-scroll { margin: 8px 0 20px; }

table.legal-table {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  font-size: 14px; margin: 8px 0 20px;
}
table.legal-table th,
table.legal-table td {
  padding: 11px 14px 11px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
  line-height: 1.55; color: var(--text);
}
table.legal-table th {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  font-weight: 500; color: var(--navy);
  border-bottom-color: var(--line-strong);
}
table.legal-table tr:last-child td { border-bottom: none; }

.legal-sep { border: none; height: 1px; background: var(--line-strong); margin: 44px 0 16px; }
.legal-footnote { font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }

@media (max-width: 720px) {
  .legal-doc { overflow-wrap: anywhere; }
  table.legal-table th,
  table.legal-table td { padding: 9px 8px 9px 0; }
}

/* ============================================================
   3 · MANIFESTE — sept articles, une ligne datée par filet
   Le manifeste n'a pas de feuille propre (BRIEF-V2 §6.4) : son corps
   vit ici. Pas de lettrine, pas d'italique (la police n'en a pas).
   ============================================================ */
.manifesto-intro { margin-bottom: clamp(28px, 4vw, 44px); }

.article {
  padding: clamp(30px, 5vw, 46px) 0;
  border-top: 1px solid var(--line-strong);
}
.article:first-of-type { border-top: 0; padding-top: 0; }
.article .roman {
  display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.article h2 { margin-bottom: 16px; max-width: 22ch; }
.article p {
  font-size: 16.5px; line-height: var(--lh-prose);
  color: var(--text); margin: 0 0 16px; max-width: var(--prose);
}

/* Citation : un filet orange, aucune guillemet décorative. */
.article .quote {
  margin: 26px 0; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--orange);
}
.article .quote p {
  margin: 0; font-size: 1.3125rem; line-height: 1.4;
  color: var(--navy); letter-spacing: -0.01em;
  font-variation-settings: "opsz" 40, "wdth" 100, "wght" 500;
}
.article .quote cite {
  display: block; margin-top: 10px; font-style: normal;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-2);
}

/* Signature, sur navy (section des engagements). */
.signature {
  margin-top: clamp(34px, 5vw, 52px); padding-top: 24px;
  border-top: 1px solid var(--line-light);
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: 0.04em; color: var(--on-navy-3); max-width: none;
}
.signature strong {
  display: block; margin-top: 10px; color: var(--cream);
  font-family: var(--font); font-size: 1.125rem; letter-spacing: -0.01em;
  font-variation-settings: var(--fv-h3);
}

/* ============================================================
   4 · MERCI — encart de rappel financier
   ============================================================ */
.thanks-steps { margin: 40px 0 0; }
.thanks-steps h2 {
  font-size: var(--fs-h3); font-variation-settings: var(--fv-h3);
  margin: 2px 0 6px; max-width: none;
}
.thanks-note {
  margin-top: 40px; padding: 4px 0 4px 18px;
  border-left: 2px solid var(--orange);
  font-size: 14px; line-height: 1.65; color: var(--muted);
}
.thanks-note strong { color: var(--navy); }

/* ============================================================
   5 · IMPRESSION — une page juridique doit s'imprimer proprement
   ============================================================ */
@media print {
  .legal-main { background: #fff; }
  .legal-doc { max-width: none; padding: 0; }
  .article { break-inside: avoid; }
}