/* ============================================
   COLLECTIF WEB — PAGES LÉGALES
   Confidentialité, témoins, accessibilité, plan du site. Aucune maquette
   d'origine : la colonne de lecture d'un guide, sans sa table des matières.
   Deux de ces pages reçoivent une politique servie par Termageddon, qui pose
   son propre balisage — d'où les règles qui reprennent ce qu'il injecte.
   ============================================ */

.page-legale { max-width: 1120px; margin: 0 auto clamp(88px, 11vw, 136px); }

.legale-tete { margin: 0 0 var(--space-6); }
.legale-tete h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}
.legale-tete .legale-intro {
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 70ch;
  margin: 0 0 var(--space-3);
}
.legale-tete .meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--muted);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1.5px solid var(--border);
}

/* ====== La colonne de lecture ====== */
.lecture { max-width: 70ch; }
.lecture > p { font-size: var(--fs-body-l); line-height: 1.65; color: var(--fg-soft); margin: 0 0 var(--space-4); }
.lecture h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: var(--space-7) 0 var(--space-3);
}
.lecture h2:first-child { margin-top: 0; }
.lecture h3 { font-size: 21px; margin: var(--space-5) 0 var(--space-3); }
.lecture h4 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; margin: var(--space-4) 0 var(--space-2); }
.lecture ul,
.lecture ol { margin: 0 0 var(--space-4); padding-left: 22px; }
.lecture li { font-size: var(--fs-body-l); line-height: 1.65; color: var(--fg-soft); margin-bottom: 8px; }
.lecture a { color: var(--fg); }
.lecture a:hover,
.lecture a:focus-visible { color: var(--accent); }
.lecture table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.lecture th,
.lecture td { text-align: left; padding: 10px 14px; border: 1.5px solid var(--border); font-size: var(--fs-body); color: var(--fg-soft); }
.lecture th { color: var(--fg); font-family: var(--font-sans); font-weight: 600; }

/* ====== Ce que Termageddon injecte ======
   Il pose ses propres tailles et sa propre couleur de texte. Les tokens du site
   reprennent la main : la politique doit se lire dans les deux modes
   d'affichage, et ses tableaux ne doivent pas pousser la page en largeur. */
#policy { font-family: var(--font-sans); color: var(--fg-soft); }
#policy h1,
#policy h2,
#policy h3,
#policy h4 { color: var(--fg); font-family: var(--font-display); text-transform: uppercase; letter-spacing: -.02em; }
#policy h3,
#policy h4 { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
#policy p,
#policy li { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-soft); }
#policy a { color: var(--fg); }
#policy table { display: block; max-width: 100%; overflow-x: auto; }
#policy [style*="background"] { background: transparent !important; }

/* ====== Le plan du site ====== */
.plan-liste { display: grid; gap: var(--space-5); max-width: 70ch; }
.plan-groupe h2 {
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--border);
}
.plan-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plan-groupe li a {
  display: block;
  padding: 10px 0;
  font-size: var(--fs-body-l);
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
}
.plan-groupe li a:hover,
.plan-groupe li a:focus-visible { color: var(--fg); }

/* ====== Motion (D-058) ====== */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}