/* ============================================================
   legal.css — Pages légales (conditions, confidentialité)
   ------------------------------------------------------------
   Scopée à body.legal. Ordre de chargement :
       style.css → corp.css → legal.css

   Ces pages se PARCOURENT, elles ne se lisent pas d'un trait :
   la mise en page privilégie donc le repérage (sommaire, numéros,
   tableaux) sur le confort de lecture longue. Colonne étroite
   (68 caractères) parce qu'un paragraphe juridique sur toute la
   largeur d'un écran est illisible.

   Aucun effet décoratif ici : ni ombre portée, ni dégradé, ni
   animation d'apparition. Une page de conditions qui bouge au
   défilement n'inspire pas confiance.
   ============================================================ */

body.legal {
  background: var(--corp-black);
  color: var(--ink);
  font-family: "Monocraft", ui-monospace, monospace;
}

body.legal .lg-main { position: relative; z-index: 1; padding-top: 96px; }
body.legal .lg-wrap { max-width: 780px; padding-bottom: 80px; }

/* ---- Fil d'Ariane ---- */
body.legal .lg-crumbs {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 26px;
  font-size: 12px;
  color: var(--faint);
}
body.legal .lg-crumbs a { color: var(--muted); text-decoration: none; }
body.legal .lg-crumbs a:hover { color: var(--corp-red); }

/* ---- Titre ---- */
body.legal .lg-head {
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
body.legal .lg-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.1;
  color: var(--ink);
  font-weight: 400;
}
body.legal .lg-updated { margin: 0; font-size: 12px; color: var(--faint); }

/* ---- Sommaire ---- */
body.legal .lg-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
  margin-bottom: 44px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
body.legal .lg-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 2px;
}
body.legal .lg-toc a:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
body.legal .lg-toc a span { font-size: 11px; color: var(--corp-red); }

/* ---- Sections ---- */
body.legal .lg-sec { margin-bottom: 40px; scroll-margin-top: 96px; }
body.legal .lg-sec-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  font-size: clamp(16px, 2.6vw, 20px);
  font-weight: 400;
  color: var(--ink);
}
body.legal .lg-sec-num { font-size: 11px; color: var(--corp-red); flex-shrink: 0; }

body.legal .lg-body { font-size: 14px; line-height: 1.8; color: var(--muted); }
body.legal .lg-body p { margin: 0 0 14px; max-width: 68ch; }
body.legal .lg-body p:last-child { margin-bottom: 0; }
body.legal .lg-body strong { color: var(--ink); font-weight: 400; }
body.legal .lg-body a { color: var(--corp-red); text-decoration: none; border-bottom: 1px solid rgba(232, 57, 47, .4); }
body.legal .lg-body a:hover { border-bottom-color: var(--corp-red); }
body.legal .lg-body code {
  padding: 2px 6px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, .05);
  border-radius: 2px;
  color: var(--corp-accent);
}

body.legal .lg-body ul { margin: 0 0 14px; padding: 0; list-style: none; max-width: 68ch; }
body.legal .lg-body li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}
body.legal .lg-body li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 6px; height: 6px;
  background: var(--corp-red);
}

/* ---- Tableaux ---- */
body.legal .lg-table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 13px;
}
body.legal .lg-table th,
body.legal .lg-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--line);
}
body.legal .lg-table thead th { background: var(--surface); color: var(--corp-accent); font-weight: 400; font-size: 12px; }
body.legal .lg-table tbody th { width: 34%; color: var(--ink); font-weight: 400; background: rgba(255, 255, 255, .015); }
body.legal .lg-table td { color: var(--muted); }

/* Un tableau doit défiler dans son cadre, jamais faire défiler la page. */
body.legal .lg-body { overflow-x: auto; }

body.legal .lg-foot {
  margin: 50px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}
body.legal .lg-foot a { color: var(--corp-red); text-decoration: none; }

@media (max-width: 620px) {
  body.legal .lg-table tbody th { width: auto; }
}