/* =========================================================================
   Pages légales — mise en page « prose » lisible sur le thème sombre.
   ========================================================================= */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 24px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; margin-bottom: 10px; }
.legal .updated {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted-3);
  letter-spacing: .04em; margin-bottom: 8px;
}
.legal .intro { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 18px 0 8px; }
.legal h2 {
  font-family: var(--font-head); font-size: 1.3rem; margin: 40px 0 14px;
  padding-top: 26px; border-top: 1px solid var(--border-soft);
}
.legal h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.legal p { color: var(--muted); line-height: 1.7; font-size: 1rem; margin-bottom: 14px; }
.legal ul { margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; list-style: none; }
.legal li { color: var(--muted); line-height: 1.65; font-size: 1rem; display: flex; gap: 10px; }
.legal li::before { content: "—"; color: var(--cyan); flex: none; }
.legal a { color: var(--cyan); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); font-weight: 600; }
.legal .box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; margin: 18px 0;
}
.legal .box p:last-child { margin-bottom: 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; display: block; overflow-x: auto; }
.legal th, .legal td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border-soft);
  font-size: .95rem; color: var(--muted); vertical-align: top;
}
.legal th { color: var(--text); font-family: var(--font-head); font-weight: 600; white-space: nowrap; }
.legal .back { display: inline-block; margin-top: 40px; font-family: var(--font-mono); font-size: 13px; }