/* ===========================================================================
   Yem's — Pages légales

   Un document juridique se lit mal par nature. Le seul levier honnête est la
   typographie : une mesure courte, de l'air entre les blocs, une hiérarchie
   qu'on saisit sans lire. Rien de décoratif ici.

   Cette feuille n'utilise que des jetons sémantiques : elle a suivi seule le
   passage du site au fond blanc, sans une ligne à modifier. C'est tout
   l'intérêt de ne jamais écrire une couleur en dur.
   =========================================================================== */

.legal {
  margin-top: var(--sp-7);
  /* Environ 68 caractères par ligne. Au-delà, l'œil rate la ligne suivante,
     et c'est une des raisons pour lesquelles personne ne lit les CGV. */
  max-width: 68ch;
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-muted);
}

.legal strong { color: var(--text); font-weight: 600; }

.legal h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  margin: var(--sp-8) 0 var(--sp-3);
  /* Un filet sépare les articles sans ajouter une ligne à lire. */
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--sp-6); }

.legal p { margin: 0 0 var(--sp-4); }

.legal a { color: var(--accent); }

.legal__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.legal__liste li { position: relative; padding-left: var(--sp-5); }

/* Une puce en trait plutôt qu'un rond : même vocabulaire graphique que la
   couture du reste du site. */
.legal__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 12px;
  height: 1.5px;
  background: var(--accent);
}

.legal__stamp {
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  letter-spacing: .04em;
}

/* Encadré « à compléter ».
   Volontairement voyant : il signale une information que le client doit
   fournir avant l'ouverture. Il ne passe pas par strip_notes, donc il reste
   visible en production tant que personne ne l'a traité. C'est le but. */
.legal__note {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.7;
}

/* Champ que le client doit remplir. Pointillé pour qu'on ne le confonde pas
   avec du texte définitif.

   Sur le fond blanc, c'est le laiton SOMBRE qui porte, conformément à la
   planche d'identité. --accent le résout automatiquement selon le contexte :
   laiton sombre dans le corps clair, laiton clair dans les ancrages. */
.legal__champ {
  border-bottom: 1.5px dotted var(--accent);
  padding-bottom: 1px;
  color: var(--text);
}

@media (max-width: 640px) {
  .legal h2 { margin-top: var(--sp-6); }
}