/* Mentions légales et politique de confidentialité : une page de texte.

   Comme l'administration, ces pages défilent, alors que l'application occupe
   l'écran sans défiler (base.css). Elles réemploient les jetons de tokens.css
   et les éléments de base.css, et ne posent ici que la mise en page d'un texte
   long : une colonne étroite, des titres de section lisibles, et des fiches
   « données, finalité, base légale, durée » pour chaque traitement. */

body.legal-page {
  overflow: auto;
  background: var(--bg-0);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.legal-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
}

/* ---- En-tête ---- */

.legal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-1);
  font-size: var(--fs-md);
}

.legal-brand {
  color: var(--ink-0);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal-nav,
.legal-languages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.legal-nav a,
.legal-languages a { color: var(--ink-2); }

.legal-nav a[aria-current],
.legal-languages a[aria-current] {
  color: var(--ink-0);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* ---- Texte ---- */

.legal-body h1 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-2xl);
}

/* base.css fait des h2 de petits intertitres de panneau, en capitales grises :
   ici ce sont des titres de section, à lire. */
.legal-body h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--ink-0);
  font-size: var(--fs-xl);
  text-transform: none;
  letter-spacing: -0.01em;
}

.legal-body h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-lg);
}

.legal-body p,
.legal-body li { color: var(--ink-1); }

.legal-body ul {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-5);
}

.legal-body li + li { margin-top: var(--sp-1); }

.legal-body a { text-decoration: underline; text-underline-offset: 2px; }

.legal-lead { font-size: var(--fs-md); }

/* Une valeur que la configuration ne donne pas encore. */
.legal-unset { color: var(--ink-3); font-style: italic; }

/* Coordonnées : une adresse postale garde ses retours à la ligne. */
.legal-card {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  background: var(--bg-1);
}

.legal-card p:last-child { margin-bottom: 0; }

.legal-address { white-space: pre-line; }

/* Fiche d'un traitement : quatre rubriques, intitulé à gauche sur un écran
   large, au-dessus sur un téléphone. */
.legal-facts {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--line-2);
  background: var(--bg-1);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
}

.legal-facts dt {
  color: var(--ink-2);
  font-size: var(--fs-md);
}

.legal-facts dd { margin: 0; color: var(--ink-1); }

@media (max-width: 560px) {
  .legal-facts { grid-template-columns: 1fr; gap: 0; }
  .legal-facts dd + dt { margin-top: var(--sp-2); }
}

/* ---- Avertissement réservé à l'administrateur ---- */

.legal-admin {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-1);
  background: var(--bg-2);
  font-size: var(--fs-md);
}

.legal-admin[data-kind='warn'] { border-left-color: var(--warn); }
.legal-admin[data-kind='ok'] { border-left-color: var(--ok); }

.legal-admin h2 {
  margin: 0 0 var(--sp-2);
  color: var(--warn);
  font-size: var(--fs-md);
  text-transform: none;
  letter-spacing: 0;
}

.legal-admin ul { margin: 0; padding-left: var(--sp-5); }

/* ---- Pied ---- */

.legal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-1);
}