/* =======================================================================
 *  LES DOCUMENTS — CGU, CONFIDENTIALITÉ, MENTIONS LÉGALES
 * =======================================================================
 *
 *  Ces pages partagent la direction artistique de la vitrine : elles
 *  chargent `accueil.css` pour les jetons, la barre et les boutons, et
 *  n'ajoutent ici que ce qu'un document demande en propre.
 *
 *  UN DOCUMENT N'EST PAS UNE SECTION DE VITRINE.
 *  Pas d'empilement de plaques, pas de mots qui montent, pas de curseur qui
 *  attire : on vient y chercher une phrase précise, souvent pressé, parfois
 *  inquiet. Le mouvement s'efface, la lisibilité passe devant. Ce qui reste
 *  de la vitrine, c'est la matière — le papier, l'encre, la plaque sombre en
 *  ouverture — pour qu'on reste chez le même éditeur.
 * ======================================================================= */

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

/* ------------------------------ L'OUVERTURE ---------------------------- */
.doc-haut {
  background: var(--nuit); color: #fff;
  padding: calc(96px + 4vw) 0 clamp(48px, 6vw, 78px);
  border-radius: 0 0 var(--r-plaque) var(--r-plaque);
}
.doc-dedans { width: min(1100px, calc(100% - 48px)); margin: 0 auto; }
.doc-haut h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 700;
  letter-spacing: -.045em; line-height: 1.02; margin: 18px 0 14px;
  max-width: 18ch;
}
.doc-date {
  font-family: var(--mono); font-size: .78rem;
  color: rgba(255, 255, 255, .62);
}
.doc-chapo {
  margin-top: 16px; max-width: 62ch; font-size: 1.02rem; line-height: 1.62;
  color: rgba(255, 255, 255, .74);
}

/* ------------------------------- LE CORPS ------------------------------ */
.doc-corps {
  background: var(--papier); color: var(--encre);
  border-radius: var(--r-plaque) var(--r-plaque) 0 0;
  margin-top: -14px; padding: clamp(44px, 6vw, 80px) 0 clamp(60px, 8vw, 110px);
}
.doc-grille {
  width: min(1100px, calc(100% - 48px)); margin: 0 auto;
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  align-items: start;
}

/*  LE SOMMAIRE SUIT LA LECTURE. Sur un document de dix sections, savoir où
 *  l'on est vaut autant que le texte : sans repère, on relit trois fois le
 *  même paragraphe en croyant avoir avancé. */
.doc-somm {
  position: sticky; top: 92px;
  border: 1px solid var(--trait); border-radius: 20px;
  padding: 20px 18px; background: var(--papier2);
}
.doc-somm b {
  display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 12px; font-weight: 600;
}
.doc-somm a {
  display: block; padding: 6px 10px; margin: 0 -10px; border-radius: 9px;
  font-size: .85rem; line-height: 1.35; color: var(--gris); text-decoration: none;
  transition: color .25s var(--elan), background .25s var(--elan);
}
.doc-somm a:hover { color: var(--encre); background: rgba(0, 0, 0, .045); }
.doc-somm a[aria-current="true"] {
  color: var(--encre); background: var(--cyan-d); font-weight: 600;
}

.doc-texte { max-width: 68ch; }
.doc-texte section { scroll-margin-top: 96px; }
.doc-texte section + section { margin-top: clamp(38px, 4.5vw, 58px); }
.doc-texte h2 {
  font-size: clamp(1.28rem, 2.3vw, 1.62rem); font-weight: 700;
  letter-spacing: -.03em; margin-bottom: 14px;
}
.doc-texte h3 {
  font-size: 1rem; font-weight: 650; margin: 26px 0 8px; letter-spacing: -.01em;
}
.doc-texte p, .doc-texte li {
  font-size: .95rem; line-height: 1.68; color: #3c3c46;
}
.doc-texte p + p { margin-top: 12px; }
.doc-texte ul, .doc-texte ol { margin: 12px 0 0 22px; display: grid; gap: 7px; }
.doc-texte a { color: var(--cyan-t); text-decoration: underline; text-underline-offset: 2px; }
.doc-texte b, .doc-texte strong { color: var(--encre); font-weight: 650; }

/*  L'ENCADRÉ. Ce qu'il ne faut pas rater dans un document qu'on parcourt en
 *  diagonale : une somme, une durée, un droit. */
.doc-net {
  margin-top: 18px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--trait); background: var(--papier2);
}
.doc-net p { margin: 0; }
.doc-net p + p { margin-top: 8px; }

/*  Le tableau des définitions et des tarifs : il doit pouvoir défiler seul
 *  sur un téléphone, sans emporter la page avec lui. */
.doc-tableau { overflow-x: auto; margin-top: 16px; }
.doc-tableau table { border-collapse: collapse; width: 100%; min-width: 420px; }
.doc-tableau th, .doc-tableau td {
  text-align: left; padding: 11px 14px; font-size: .88rem;
  border-bottom: 1px solid var(--trait); vertical-align: top;
}
.doc-tableau th { font-weight: 650; color: var(--encre); white-space: nowrap; }
.doc-tableau td { color: #3c3c46; }

/* ------------------------------- LE PIED ------------------------------- */
.doc-pied {
  background: var(--papier); border-top: 1px solid var(--trait);
  padding: 30px 0 46px;
}
.doc-pied .doc-dedans {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: .84rem; color: var(--gris);
}
.doc-pied nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.doc-pied a { color: var(--gris); text-decoration: none; }
.doc-pied a:hover { color: var(--encre); }

@media (max-width: 860px) {
  .doc-grille { grid-template-columns: 1fr; }
  /*  Un sommaire collé au-dessus du texte sur un petit écran mange la moitié
   *  de la hauteur utile : il redevient un simple bloc en tête. */
  .doc-somm { position: static; }
  .doc-pied nav { margin-left: 0; }
}