/* brianplus.com — feuille dédiée aux pages légales (mentions, confidentialité).
 *
 * Volontairement minimale : ces pages doivent rester lisibles sans JS et
 * traversables au clavier. Elle ne redéfinit aucune classe de brutal.css et
 * ne touche jamais à la nav (contrat vérifié par check-nav-contract.js).
 */

.legal-crumb {
  font-family: var(--b-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 4vh;
}
.legal-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

.legal-updated {
  font-size: 14px;
  opacity: .6;
  margin: 2vh 0 0;
}

.legal-body { max-width: 68ch; margin-top: 6vh; }
.legal-body h2 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  margin: 8vh 0 2vh;
  padding-top: 3vh;
  border-top: 1px solid rgba(18, 18, 16, .15);
}
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body h3 { font-size: 18px; margin: 4vh 0 1vh; }
.legal-body p, .legal-body li { font-size: 16.5px; line-height: 1.65; }
.legal-body p { margin: 0 0 1.6em; }
.legal-body ul { margin: 0 0 1.6em; padding-left: 1.2em; }
.legal-body li { margin-bottom: .6em; }
.legal-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Tableau des traitements : doit rester lisible sur mobile, d'où le scroll
   horizontal confiné plutôt qu'un reflow qui casserait la lecture en colonnes. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 1.6em; }
.legal-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.legal-table th, .legal-table td {
  border: 1px solid rgba(18, 18, 16, .15);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.legal-table th { font-weight: 600; background: rgba(18, 18, 16, .04); }

/* Champs que seul l'éditeur peut renseigner (identité légale, SIRET…).
   check-legal-placeholders.js échoue tant qu'il en reste un. */
.legal-todo {
  background: #ffe9a8;
  color: #4a3b00;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .legal-body h2 { border-top-color: rgba(245, 243, 236, .18); }
  .legal-table th, .legal-table td { border-color: rgba(245, 243, 236, .18); }
  .legal-table th { background: rgba(245, 243, 236, .05); }
}