/* ─────────────────────────────────────────────────────────────
   Piano Piatto — mise en page des documents légaux
   Une colonne étroite, une hiérarchie nette : ces textes sont
   longs, et le seul vrai enjeu de design est qu'on puisse
   les parcourir sans se perdre.
   ───────────────────────────────────────────────────────────── */

.doc { padding: 56px 0 96px; }
.doc .page { max-width: 780px; }

.retour {
  display: inline-block; font-size: 15px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; margin-bottom: 28px;
}
.retour:hover { color: var(--terra); }

.doc-corps {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 52px 56px; box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .doc-corps { padding: 32px 24px; border-radius: var(--r-lg); } }

.doc-corps h1 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: 8px; }
.doc-corps h2 {
  font-size: 25px; margin: 44px 0 14px; padding-top: 10px;
  scroll-margin-top: 102px;
}
.doc-corps h3 { font-family: var(--sans); font-size: 17.5px; font-weight: 700; margin: 28px 0 10px; }
.doc-corps h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 700; margin: 22px 0 8px; }

.doc-corps p { margin: 0 0 16px; color: var(--ink-2); font-size: 16px; line-height: 1.68; }
.doc-corps strong { color: var(--ink); font-weight: 600; }
.doc-corps a { color: var(--terra); }

.doc-corps ul, .doc-corps ol { margin: 0 0 18px; padding-left: 22px; color: var(--ink-2); font-size: 16px; line-height: 1.68; }
.doc-corps li { margin-bottom: 7px; }
.doc-corps li::marker { color: var(--terra-light); }

.doc-corps hr { border: 0; border-top: 1px solid var(--border); margin: 34px 0; }

.doc-corps code {
  background: var(--cream); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 6px; font-size: 14px;
}

/* Les tableaux légaux sont larges : ils défilent dans leur propre boîte
   plutôt que de faire déborder toute la page sur téléphone. */
.tableau { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--border); border-radius: var(--r-md); }
.doc-corps table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 460px; }
.doc-corps th, .doc-corps td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc-corps thead th { background: var(--surface-mute); font-weight: 700; font-size: 13px; letter-spacing: .2px; white-space: nowrap; }
.doc-corps tbody tr:last-child td { border-bottom: 0; }
.doc-corps td { color: var(--ink-2); }

.doc-pied { margin-top: 26px; text-align: center; font-size: 15px; color: var(--ink-2); }
.doc-pied a { color: var(--terra); }