/* ============================================================
   PAGES LEGALES / A PROPOS (privacy.html, terms.html, about.html)
   Couche au-dessus de css/nocturne-base.css : tokens presents,
   mode sombre via .pd-dark gratuit.
   ============================================================ */
.legal-header {
  display: flex; align-items: center; gap: 10px;
  max-width: 820px; margin: 0 auto; padding: 22px clamp(14px, 4vw, 28px) 0;
}
.legal-header a {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-text); font-family: var(--font-heading); font-size: 16px;
}
.legal-header .pd-footermono {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--color-accent); color: var(--color-accent); font-size: 12px;
}

.legal {
  max-width: 820px; margin: 0 auto;
  padding: 28px clamp(14px, 4vw, 28px) 64px;
}
.legal h1 { font-size: 32px; letter-spacing: -.02em; margin-bottom: var(--space-2); }
.legal .legal-meta { color: var(--color-neutral-600); font-size: 13px; margin-bottom: var(--space-8); }
.legal h2 {
  font-size: 20px; margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-6); border-top: 1px solid var(--color-divider);
}
.legal h3 { font-size: 16px; margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { font-size: 14.5px; color: var(--color-neutral-300); }
.legal ul { margin: 0 0 var(--space-4); padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal strong { color: var(--color-text); }
.legal .legal-note {
  margin: var(--space-6) 0; padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: 13.5px;
}