/* Feuille des pages légales : mentions légales, CGU, confidentialité, durées de
   conservation, exercice des droits.

   Elle complète `base.css` et n'en redéfinit aucune variable : les couleurs, les
   polices et l'échelle typographique viennent de là, sans exception. Une page
   légale qui ne ressemble pas à l'application donne l'impression d'un document
   rapporté d'ailleurs — et c'est précisément la page sur laquelle un visiteur
   cherche à savoir à qui il a affaire.

   Elle vit à la racine de `src/`, comme `base.css`, pour la même raison : les
   pages qui la chargent y sont aussi.

   Aucune déclaration de style n'est en ligne dans les pages. La politique de
   sécurité du contenu servie en production interdit `style-src 'unsafe-inline'`
   (voir `serveur/infra/lib/hebergement.ts`) : une page légale qui porterait son
   style dans un bloc `<style>` s'afficherait entièrement nue, sans qu'aucune
   requête n'échoue et sans la moindre erreur JavaScript. C'est le défaut du
   19 septembre 2026, reproduit. */

/* La marque de la barre redevient un lien vers l'application : depuis une page
   légale, c'est le chemin du retour. */
.barre .marque a { color: inherit; text-decoration: none; }
.barre .marque a:hover { color: var(--accent); }
.barre .marque a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Colonne de lecture. 76ch : au-delà, l'œil perd la ligne suivante, et ces pages
   sont les plus longues du produit. */
.document { max-width: 76ch; padding-block: 8px 0; }
.document h1 { margin-bottom: 4px; }
.document h2 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  margin: 34px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
  text-wrap: balance;
}
.document h3 { font-size: 14.5px; font-weight: 600; margin: 20px 0 6px; color: var(--ink-soft); }
.document p, .document li { font-size: 14.5px; color: var(--ink-soft); }
.document p { margin: 0 0 12px; }
.document ul { margin: 0 0 12px; padding-left: 20px; }
.document li { margin-bottom: 6px; }
.document strong, .document b { color: var(--ink); font-weight: 600; }
.document a { color: var(--accent); text-underline-offset: 2px; }
.document code { font-family: var(--mono); font-size: 13px; }

/* Encadré d'ouverture : ce que la page dit en une phrase. */
.resume {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 12px 16px; margin: 18px 0 8px;
}
.resume p:last-child { margin-bottom: 0; }

/* Identité de l'éditeur : une suite de couples libellé / valeur, pas un tableau —
   un tableau de deux colonnes se lit mal sur un téléphone. */
.identite-editeur { margin: 0 0 14px; }
.identite-editeur div {
  display: flex; flex-wrap: wrap; gap: 2px 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.identite-editeur dt { flex: 0 0 15em; color: var(--muted); font-size: 13px; }
.identite-editeur dd { flex: 1 1 18em; margin: 0; font-size: 14.5px; color: var(--ink); }

/* Tableaux de durées. */
.document table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 13.5px; }
.document th, .document td {
  text-align: left; vertical-align: top; padding: 8px 12px;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.document th { background: var(--surface-2); color: var(--ink); font-weight: 600; }