/* legal.css — feuille des pages légales (terms, mentions-legales).
 *
 * ⚠️ POURQUOI EXTERNE ET PAS UN <style> INLINE (2026-07-14)
 * La CSP de production (infra/nginx/rendtrack.conf) pose `style-src 'self'` —
 * SANS 'unsafe-inline'. Tout bloc <style> et tout attribut style="…" y est donc
 * bloqué : les pages qui portaient leur CSS en inline s'affichaient ENTIÈREMENT
 * NUES (Times New Roman, liens bleus, zéro design). Invisible en dev, où aucune
 * CSP n'est posée — le Go ne pose pas de CSP, seul nginx le fait, et il n'est
 * pas encore déployé (Lot 7). Prouvé au navigateur en servant static/ avec la
 * CSP exacte de la conf nginx.
 * → Toute nouvelle page statique doit LIER une feuille, jamais l'incorporer.
 * Reste à traiter : static/index.html (la landing : 1 bloc <style> + 31
 * attributs style="…") — cf. ROADMAP RendTrack.
 */

:root {
  --bg: #080c14; --bg2: #0d1220; --surface: #121929;
  --border: #1e2a3d; --gold: #e8b84b; --text: #eef2f8;
  --text2: #8899b4; --muted: #4a5878;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Mono', monospace; background: var(--bg); color: var(--text); }
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: linear-gradient(rgba(232,184,75,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(232,184,75,0.03) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none; z-index: 0;
}
/* La barre, le logo et `.nav-right` vivent dans `nav.css` (partagé avec la
   landing). Le `<nav>` de ces pages porte `class="lang-bar"`. */
.back { font-size: 11px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.back:hover { color: var(--gold); }
.container { max-width: 760px; margin: 0 auto; padding: 100px 40px 80px; position: relative; z-index: 1; }
h1 { font-family: 'Syne', sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -1px; margin-bottom: 8px; }
.updated { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 48px; }
h2 { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700; color: var(--gold); margin: 36px 0 12px; letter-spacing: -0.3px; }
p { font-size: 13px; line-height: 1.9; color: var(--text2); margin-bottom: 12px; }
ul { padding-left: 20px; margin-bottom: 12px; }
li { font-size: 13px; line-height: 1.9; color: var(--text2); margin-bottom: 4px; }
a { color: var(--gold); }
.divider { height: 1px; background: var(--border); margin: 48px 0; }
footer { text-align: center; padding: 40px; font-size: 10px; color: var(--muted); position: relative; z-index: 1; }

/* Remplaçants des attributs style="…" inline (bloqués par la CSP). */
.note { font-size: 11px; color: var(--muted); }

/* Jeton « fait d'entité à renseigner » — les faits sont bloqués sur
 * l'immatriculation au REQ, puis revue juriste. Cf.
 * _Docs/_Shared/PROCHAINES-SESSIONS.md « Session 1 — Légal cross-app ». */
.todo {
  background: rgba(232,184,75,0.12); color: var(--gold);
  padding: 1px 5px; border-radius: 3px; font-style: normal;
}

/* Bascule FR/EN : deux blocs complets, un seul affiché. Préféré au swap de
 * textContent (data-en) de la landing, qui écrase le markup interne — un texte
 * légal contient du <strong>/<em>/<a> porteurs de sens. */
.lang-btns { display: flex; gap: 4px; }
.lang-btn {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font-family: 'DM Mono', monospace; font-size: 10px; padding: 3px 8px;
  border-radius: 4px; cursor: pointer;
}
.lang-btn.active { background: rgba(232,184,75,0.12); color: var(--gold); border-color: var(--gold); }
/* [lang-block] : règles déménagées dans lang.css (feuille partagée avec la
 * page d'accueil, qui en avait besoin aussi). Ne pas les redupliquer ici. */