/* Pages légales — reprend les tokens « Néon Stadium » (../tokens.css) en mise en page lecture. */
body { margin: 0; background: var(--bg); color: var(--txt); }
.legal { max-width: 46rem; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s3); }
.legal-top .brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--txt); text-decoration: none; }
.legal-top .brand span { color: var(--lime); }
:root[data-theme="light"] .legal-top .brand span { color: var(--lime-ink); }
.legal h1 { font-family: var(--font-display); font-size: var(--fs-h1); text-transform: uppercase;
  letter-spacing: .02em; line-height: .95; margin: var(--s5) 0 var(--s2); }
.legal h2 { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin: var(--s6) 0 var(--s3); padding-top: var(--s3);
  border-top: 2px solid var(--rule); }
.legal h3 { font-family: var(--font-ui); font-size: .98rem; font-weight: 700; margin: var(--s4) 0 var(--s2); }
.legal p, .legal li { font-size: .95rem; line-height: 1.65; }
.legal ul { padding-left: 1.1rem; }
.legal li { margin-bottom: var(--s2); }
.legal a { color: var(--info-text); }
.legal .maj { color: var(--muted); font-size: var(--fs-sm); margin-top: 0; }
.legal .lead { font-size: 1rem; color: var(--muted); }
.legal table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: var(--fs-sm); }
/* Quatre colonnes de texte ne se réduisent pas en deçà d'environ 500 px sans devenir
   illisibles. Plutôt que de faire scroller la page entière sur un téléphone, le tableau
   défile dans son propre cadre. `display: block` est nécessaire : un `overflow` sur un
   `table` est ignoré. */
@media (max-width: 560px) {
  .legal table { display: block; overflow-x: auto; }
  .legal table td, .legal table th { min-width: 8em; }
}
.legal th, .legal td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line);
  vertical-align: top; }
.legal th { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.legal .box { border: 2px solid var(--rule); padding: var(--s4); margin: var(--s4) 0; }
.legal .box.warn { border-color: var(--magenta); }
:root[data-theme="light"] .legal .box.warn { border-color: var(--magenta-ink); }
.legal .box p:first-child { margin-top: 0; }
.legal .box p:last-child { margin-bottom: 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7);
  padding-top: var(--s3); border-top: 2px solid var(--rule); font-size: var(--fs-sm); }
.legal-nav a { color: var(--muted); }
.legal-nav a[aria-current] { color: var(--accent-text); font-weight: 700; }
.legal .todo { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--txt);
  padding: 1px 6px; border-radius: var(--r-xs); font-family: var(--font-ui); }
.legal-lang { display: flex; gap: var(--s2); font-family: var(--font-ui); font-size: var(--fs-xs);
  letter-spacing: .06em; }
.legal-lang a { color: var(--muted); text-decoration: none; padding: 2px 6px; border: 1px solid var(--line-strong);
  border-radius: var(--r-xs); }
.legal-lang a[aria-current] { color: var(--ink); background: var(--lime); border-color: var(--lime); font-weight: 700; }