/* ===========================================================================
   IF3 — Pages légales (mentions légales, politique de confidentialité)
   ===========================================================================
   Feuille dédiée, volontairement minuscule : ces pages sont du texte long,
   pas des composants. Tout le reste (hero, conteneur, pied de page) vient
   de design-system.css / pages.css, déjà chargés par la page.

   ⚠️ N'utiliser QUE des tokens qui existent réellement dans
   design-system.css. Les espacements sautent --s7, --s9 et --s11 : une
   valeur inexistante annule TOUTE la déclaration, sans erreur ni
   avertissement (bug réel déjà payé deux fois sur ce projet).
   Disponibles : s1 s2 s3 s4 s5 s6 s8 s10 s12 s16 s20 s24 s32 s40 s48.
   =========================================================================== */

/* Colonne de lecture : même largeur que le corps de texte des pages à blocs
   (--pb-col: 48rem). Un texte juridique se lit en colonne étroite, jamais
   sur toute la largeur de l'écran. */
.legal {
  max-width: 48rem;
}

.legal__updated {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--s10);
}

/* Sommaire : de simples ancres, pas un composant de navigation. */
.legal__toc {
  border-left: 3px solid var(--violet);
  padding-left: var(--s4);
  margin-bottom: var(--s12);
}

.legal__toc ol {
  margin: 0;
  padding-left: var(--s4);
}

.legal__toc li {
  margin-bottom: var(--s1);
}

.legal section {
  margin-bottom: var(--s12);
  /* La barre de navigation est fixe : sans ça, un clic sur une ancre du
     sommaire fait atterrir le titre DERRIÈRE l'en-tête. Même correctif que
     .pb-block sur les pages à blocs. */
  scroll-margin-top: 6rem;
}

.legal h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--s4);
}

.legal h3 {
  font-size: var(--text-lg);
  margin-top: var(--s6);
  margin-bottom: var(--s2);
}

.legal p,
.legal li {
  line-height: 1.7;
}

.legal p {
  margin-bottom: var(--s4);
}

.legal ul {
  margin-bottom: var(--s4);
  padding-left: var(--s5);
}

.legal li {
  margin-bottom: var(--s2);
}

/* Encadré « ce qu'il faut retenir » — filet violet, jamais un fond coloré
   plein : la règle du site est de rester épuré, et un aplat de couleur sur
   plusieurs paragraphes fatigue la lecture. */
.legal__callout {
  border-left: 3px solid var(--violet);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s6);
  background: var(--bg-alt);
}

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

/* Tableau « quelle donnée, pour quoi » : c'est une vraie donnée tabulaire,
   pas une mise en page. */
.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s6);
  font-size: var(--text-sm);
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
}

.legal__table th {
  font-weight: 700;
  border-bottom: 2px solid var(--border-strong);
}

/* Sous 40rem, un tableau à 2 colonnes serrées devient illisible : chaque
   ligne s'empile, avec son intitulé de colonne au-dessus (même principe que
   les tableaux des emails candidates, section 27.1 du carnet). */
@media (max-width: 40rem) {
  .legal__table thead { display: none; }
  .legal__table tr {
    display: block;
    border-bottom: 1px solid var(--border);
    padding: var(--s2) 0;
  }
  .legal__table td {
    display: block;
    border: 0;
    padding: var(--s1) 0;
  }
  .legal__table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
  }
}