/* legal.css : les pages de texte long, posees sur les jetons de base.css.
 *
 * Pourquoi un second fichier plutot qu'un ajout a base.css : base.css decrit
 * un magazine, une page de vente qui respire. Un texte juridique a d'autres
 * besoins (numerotation, tableaux, ancres) dont aucune page de vente ne se
 * sert. Les melanger ferait payer a chaque page de vente un poids qu'elle
 * n'utilise pas, et rendrait base.css plus difficile a relire.
 *
 * Aucune couleur, aucune police, aucun espacement n'est redefini ici : tout
 * vient des variables de base.css. Si la marque change, ces pages suivent.
 */

body.doc { padding-bottom: var(--space-xl); }

.doc-tete { padding-block: clamp(2.5rem, 9vw, 4.5rem) var(--space-md); }
.doc-tete h1 { font-size: clamp(1.9rem, 7vw, 2.7rem); margin-top: var(--space-xs); }
.doc-date { color: var(--stone); font-size: .82rem; margin-top: var(--space-sm); }

.doc h2 {
  font-size: clamp(1.25rem, 4.4vw, 1.5rem);
  margin-block: var(--space-lg) var(--space-sm);
  border-top: 1px solid var(--line-faible);
  padding-top: var(--space-md);
}
.doc h3 {
  font-family: var(--font-body); font-size: .92rem; font-weight: 500;
  letter-spacing: .04em; color: var(--sand);
  margin-block: var(--space-md) var(--space-xs);
}
.doc p, .doc li { font-size: .95rem; }
.doc ul, .doc ol { padding-left: 1.15rem; margin: 0 0 var(--space-sm); }
.doc li { margin-bottom: .35rem; }
.doc a { color: var(--gold); text-underline-offset: .18em; }

/* Le sommaire : sur un texte de cette longueur, pouvoir sauter est une
   politesse, pas un ornement. */
.doc-sommaire {
  border: 1px solid var(--line-faible); border-radius: 2px;
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
}
.doc-sommaire ol { margin: 0; }
.doc-sommaire a { color: var(--sand); text-decoration: none; }
.doc-sommaire a:hover { color: var(--gold); text-decoration: underline; }

/* Ce qu'il ne faut pas rater : une seule par page, jamais deux. */
.doc-cadre {
  border-left: 2px solid var(--gold); background: var(--charcoal);
  padding: var(--space-sm) var(--space-md); margin-block: var(--space-md);
}
.doc-cadre p:last-child { margin-bottom: 0; }

.doc-manque { color: var(--terracotta); font-weight: 500; }

.doc table { width: 100%; border-collapse: collapse; margin-block: var(--space-sm); font-size: .88rem; }
.doc th, .doc td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--line-faible); vertical-align: top; }
.doc th { color: var(--stone); font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.doc-pied {
  margin-top: var(--space-xl); border-top: 1px solid var(--line);
  padding-top: var(--space-md); display: flex; flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md); font-size: .85rem;
}
.doc-pied a { color: var(--stone); text-decoration: none; }
.doc-pied a:hover { color: var(--gold); }
.doc-pied a[aria-current="page"] { color: var(--bone); }

/* ─── Le pied de page legal, pose par capture.js sur toutes les pages ───
 *
 * Il n'est pas recopie dans le HTML des quatre pages : quatre fichiers a
 * modifier pour ajouter un lien, ce sont trois occasions d'en oublier un.
 * capture.js le pose, et charge cette feuille si elle manque.
 *
 * Les liens heritent de la couleur du pied : ils doivent se lire, pas se
 * voir. Une page de vente n'a pas a crier ses conditions generales, elle a
 * a les rendre trouvables.
 */
.pied-legal {
  flex-basis: 100%; display: flex; flex-wrap: wrap;
  gap: .7rem 1.6rem; margin-top: .9rem;
}
.pied-legal a { color: inherit; text-decoration: none; opacity: .75; }
.pied-legal a:hover, .pied-legal a:focus-visible { color: var(--gold); opacity: 1; }