/* Pages légales (mentions-legales.php, confidentialite.php). Chargée après
   base.css. Une colonne de lecture, sans décor : des pages qu'on consulte,
   pas qu'on regarde. Liens à l'encre, comme sur l'accueil (violet réservé). */
.legal { padding: 140px 0 100px; }
.legal-inner { max-width: 760px; }
.legal h1 {
  font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--ink); font-weight: 700; margin-bottom: 10px;
}
.legal-updated { font-size: 13.5px; color: var(--muted); margin-bottom: 36px; }
.legal h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); margin: 40px 0 12px; line-height: 1.3;
}
.legal p, .legal li, .legal td, .legal th {
  font-size: 15.5px; line-height: 1.7; color: var(--text);
}
.legal p { margin-bottom: 14px; }
.legal ul { padding-left: 20px; margin-bottom: 14px; }
.legal li { margin-bottom: 4px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration-thickness: 2px; }

/* Tableau des traitements : sur mobile, il défile plutôt que d'écraser ses
   trois colonnes. */
.legal table {
  display: block; overflow-x: auto;
  width: 100%; border-collapse: collapse; margin: 8px 0 18px;
}
.legal th, .legal td {
  text-align: left; vertical-align: top;
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line);
  min-width: 180px;
}
.legal th { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* Information manquante : visible tant qu'elle n'est pas fournie. */
.legal-todo { background: #fff3c4; color: var(--ink); padding: 1px 6px; border-radius: 4px; }

@media (max-width: 720px) {
  .legal { padding: 110px 0 70px; }
}