/* Les pages légales. Elles héritent des jetons de style.css — même papier,
   même encre, même feuille : ce sont des pages de la maison, pas un document
   étranger collé au site.

   Un texte légal EST une suite numérotée : la numérotation ici porte une
   information vraie (on cite « article 4 »), elle ne décore pas. */

body { background: var(--paper); }

.legal {
  max-width: 78rem; margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) 4rem;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: start;
}

/* ── l'en-tête du document ─────────────────────────────────────────────── */
.legal-head { grid-column: 1 / -1; border-bottom: 1px solid var(--rule);
              padding-bottom: 1.6rem; }
.legal-kind {
  font: 500 .68rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--leaf);
}
.legal-head h1 {
  margin-top: .9rem;
  font: 400 clamp(2rem, 4.4vw, 3.1rem)/1.1 var(--serif);
  text-wrap: balance;
}
.legal-dates {
  margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 1.4rem;
  font: 400 .8rem/1.5 var(--mono); color: var(--ink-pale);
}
.legal-lead {
  margin-top: 1.4rem; max-width: 60ch;
  font-size: clamp(.98rem, 1.5vw, 1.08rem); color: var(--ink-soft);
}

/* ── le corps ──────────────────────────────────────────────────────────── */
.legal-body { max-width: 66ch; }

.legal-body section { padding-top: 2.6rem; }
.legal-body section + section { border-top: 1px solid var(--rule); }

.legal-body h2 {
  display: flex; gap: .8rem; align-items: baseline;
  font: 500 1.18rem/1.35 var(--sans); text-wrap: balance;
}
.legal-body h2 .n {
  flex: none; width: 1.6rem;
  font: 500 .78rem/1.9 var(--mono); color: var(--leaf);
}
.legal-body h3 {
  margin: 1.6rem 0 .5rem;
  font: 500 .95rem/1.4 var(--sans); color: var(--ink);
}
.legal-body p { margin-top: .9rem; color: var(--ink-soft); }
.legal-body strong { color: var(--ink); font-weight: 500; }
.legal-body a { color: var(--leaf); }

.legal-body ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.legal-body li {
  position: relative; padding-left: 1.1rem; margin-top: .55rem;
  color: var(--ink-soft);
}
.legal-body li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--rule-strong);
}
.legal-body li b { color: var(--ink); font-weight: 500; }

/* Ce que le tableau de données doit rendre lisible : quoi, pourquoi, jusqu'à
   quand. Trois colonnes, pas un paragraphe où l'on cherche. */
.data-table { margin-top: 1.4rem; overflow-x: auto; }
.data-table table {
  width: 100%; border-collapse: collapse;
  font-size: .87rem; text-align: left;
}
.data-table th {
  padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--rule-strong);
  font: 500 .66rem/1.4 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-pale); white-space: nowrap;
}
.data-table td {
  padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink-soft); vertical-align: top;
}
.data-table td:first-child { color: var(--ink); }
.data-table td:last-child { padding-right: 0; }

/* L'encadré : ce qu'il faut retenir même en diagonale. */
.note-box {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  border: 1px solid var(--rule); border-left: 2px solid var(--leaf);
  border-radius: 0 var(--edge) var(--edge) 0;
  background: var(--card);
}
.note-box p { margin-top: 0; font-size: .9rem; }
.note-box p + p { margin-top: .7rem; }

.contact-line {
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  border-radius: var(--edge); background: var(--leaf-wash);
  font: 500 .95rem/1.6 var(--sans); color: var(--leaf-strong);
}
.contact-line a { color: var(--leaf-strong); }

/* ── le sommaire ───────────────────────────────────────────────────────── */
.legal-toc { position: sticky; top: 5rem; }
.legal-toc-title {
  font: 500 .66rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-pale);
  padding-bottom: .8rem; border-bottom: 1px solid var(--rule);
}
.legal-toc ol { list-style: none; counter-reset: toc; margin-top: .5rem; }
.legal-toc li { counter-increment: toc; }
/* ⚠ `ol a`, PAS `a` : le lien vers l'autre document vit dans le même bloc.
   Un sélecteur trop large lui collerait le numéro de la dernière entrée. */
.legal-toc ol a {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .3rem;
  padding: .45rem 0;
  font: 400 .84rem/1.4 var(--sans); color: var(--ink-soft);
}
.legal-toc ol a::before {
  content: counter(toc); font: 500 .7rem/1.6 var(--mono); color: var(--ink-pale);
}
.legal-toc ol a:hover { color: var(--leaf); text-decoration: none; }

/* Le lien vers l'autre document : les deux vont toujours ensemble. */
.legal-sibling {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font: 400 .8rem/1.5 var(--sans); color: var(--ink-pale);
}
.legal-sibling a {
  display: block; margin-top: .35rem;
  font-weight: 500; color: var(--leaf);
}

@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; order: -1; }
  .legal-toc ol { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 480px) {
  .legal-toc ol { columns: 1; }
  /* Trois colonnes de tableau dans 360 px : chacune reçoit une largeur
     minimale et la boîte défile. Un texte légal qui se comprime en colonnes
     d'un mot ne se lit plus. */
  .data-table table { min-width: 30rem; }
}

/* Les liens d'un texte légal se visent avec le pouce comme les autres — et
   celui qui compte le plus est l'adresse à laquelle on exerce ses droits. */
@media (hover: none) and (pointer: coarse) {
  .legal-toc ol a { padding: .7rem 0; }
  .legal-sibling a { padding: .5rem 0; }
  .contact-line a, .legal-body p a {
    display: inline-block; padding: .35rem 0;
  }
}