/* Feuille de style commune aux pages légales (confidentialité, conditions). */

:root {
  /* Reprise de la rampe neutre d'index.css — voir son commentaire. Les
     pages légales ne chargent pas index.css : sans cette copie, le
     dégradé de navbar.css tomberait dans le vide ici. */
  --bg: #121214;
  --bg-page: #16161A;
  --card: #1E1E22;
  --navbar-bg: #0E0E10;
  --navbar-border: #2A2A30;
  --primary: #00D4FF;
  --primary-deep: #00A8CC;
  --danger: #FF4757;
  --text-main: #F5F5F7;
  --text-secondary: #A8A8B0;
}

html[data-theme="light"] {
  --bg: #F2F2F0;
  --bg-page: #EBEBE8;
  --card: #FFFFFF;
  --navbar-bg: #FFFFFF;
  --navbar-border: #E0E0DC;
  --primary: #00707F;
  --primary-deep: #005A6B;
  --danger: #E03040;
  --text-main: #1C1C1E;
  --text-secondary: #54545C;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-page);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  padding-bottom: 80px;
}

.legal-page {
  /* ch plutôt qu'un px fixe : la mesure de lecture (DESIGN.md, Body — 65-75ch)
     doit suivre la métrique réelle de la police, pas une largeur choisie à
     l'œil. 820px produisait ~100 caractères/ligne, bien au-delà du plafond
     documenté — le seul endroit du site où la mesure longue-forme compte. */
  max-width: 72ch;
  margin: 0 auto;
  padding: 48px 20px 24px;
}

.legal-page h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.legal-updated {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 32px;
}

.legal-page h2 {
  font-size: 1.15rem;
  margin: 32px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--navbar-border);
  color: var(--text-main);
}

.legal-page h2:first-of-type { border-top: 0; padding-top: 0; }

.legal-page p,
.legal-page li { color: var(--text-secondary); font-size: 0.95rem; }

.legal-page p { margin-bottom: 12px; }

.legal-page ul { margin: 0 0 16px 22px; }
.legal-page li { margin-bottom: 8px; }

.legal-page strong { color: var(--text-main); }

.legal-page a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.legal-page a:hover,
.legal-page a:focus-visible { text-decoration: underline; }

/* Encadré d'avertissement (non-affiliation, contact à compléter, etc.) */
.legal-callout {
  background: var(--card);
  /* Le liseré gauche décoratif est retiré (DESIGN.md : aucune bordure
     d'accent sur un côté d'une carte). Le fond distinct de la page plus un
     contour complet suffisent à distinguer l'encadré. */
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 20px 0;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-callout.warn { border-left-color: var(--danger); }

.legal-back {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.legal-back:hover { color: var(--text-main); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--navbar-border);
  color: var(--text-secondary);
  vertical-align: top;
}
.legal-table th { color: var(--text-main); font-weight: 700; }

.legal-table-wrap { overflow-x: auto; }

@media (max-width: 768px) {
  .legal-page { padding: 32px 16px 20px; }
}