/* ═══════════════════════════════════════════════════════════════════
   MENTIONS & CONFIDENTIALITÉ — page de lecture longue
   Dépend de : tokens.css, base.css, nav.css, theme.css

   Une seule priorité ici : lire sans fatigue. Colonne étroite,
   sommaire à portée, sections nettement séparées.

   SOMMAIRE
   01. En-tête de page
   02. Mise en page à deux colonnes
   03. Sommaire latéral
   04. Article
   05. Encadré
   06. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. EN-TÊTE DE PAGE ────────────────────────────────────────────*/
.page-head {
  padding-top: calc(var(--nav-h) + var(--s-9));
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-line);
}

.page-head .eyebrow { margin-bottom: var(--s-5); }

.page-title {
  max-width: 16ch;
  font-size: var(--fs-h1);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}
.page-title em { font-style: italic; }

.page-head .lead { margin-top: var(--s-6); }

.page-meta {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}


/* ── 02. MISE EN PAGE À DEUX COLONNES ───────────────────────────────*/
.legal {
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  gap: var(--s-9);
  padding-block: var(--section-py);
}


/* ── 03. SOMMAIRE LATÉRAL ───────────────────────────────────────────
   Huit sections : sans sommaire, on se perd. Il reste visible tout
   au long de la lecture.                                          */
.toc {
  position: sticky;
  top: calc(var(--nav-h) + 6rem);
  align-self: start;
}

.toc-title {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.toc-list {
  display: flex;
  flex-direction: column;
}

.toc-list a {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: var(--s-2);
  padding-block: var(--s-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-heading);
  color: var(--c-ink-soft);
  transition: color var(--t);
}
.toc-list a:hover                   { color: var(--c-ink); }
.toc-list a[aria-current='true']    { color: var(--c-ink); }
.toc-list a[aria-current='true'] span:first-child { color: var(--c-ink); }


/* ── 04. ARTICLE ────────────────────────────────────────────────────*/
.clause {
  padding-bottom: var(--s-8);
  margin-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-line);
  scroll-margin-top: calc(var(--nav-h) + 4rem);
}
.clause:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.clause-num {
  margin-bottom: var(--s-4);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.clause-title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-title);
}

.clause p {
  max-width: 58rem;      /* ~70 caractères par ligne */
  color: var(--c-ink-soft);
}
.clause p + p  { margin-top: var(--s-4); }
.clause ul + p { margin-top: var(--s-5); }

/* Listes : un point par ligne, alignés sur un tiret */
.clause ul {
  max-width: 58rem;
  margin-top: var(--s-5);
}

.clause li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-ink-soft);
}
.clause li::before {
  content: '—';
  color: var(--c-ink-soft);
}
.clause li:last-child { border-bottom: 1px solid var(--c-line-soft); }


/* ── 05. ENCADRÉ ────────────────────────────────────────────────────*/
.note {
  max-width: 58rem;
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: var(--c-surface);
  border-left: 2px solid var(--c-ink);
}

.note-label {
  margin-bottom: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.note p {
  color: var(--c-ink);
  max-width: none;
}

.note a {
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--t);
}
.note a:hover { border-bottom-color: var(--c-ink); }


/* ── 06. RESPONSIVE ─────────────────────────────────────────────────*/

@media (max-width: 1024px) {
  .legal {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  /* Le sommaire passe en tête, déroulé à plat */
  .toc {
    position: static;
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--c-line);
  }

  .toc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2) var(--s-6);
  }
}

@media (max-width: 560px) {
  .toc-list { grid-template-columns: 1fr; }
}