/* ============================================================
   CONDITIONS GÉNÉRALES DE VENTE — le même document que les mentions
   légales, en trois fois plus long.

   La page réutilise tout ce que confidentialite.css pose déjà :
   .cf-tete, .cf-a-completer, .cf-liste, .cf-maj, et surtout .ml-bloc
   et son traitement éditorial (intitulés en petites capitales ambrées,
   corps en Bricolage léger, lettrine à l'ouverture). Ce fichier
   n'ajoute que les trois choses qu'un contrat a et qu'une page de
   mentions n'a pas : un sommaire, un formulaire détachable, et de quoi
   couper la lettrine sur les cartes qui suivent la première.
   ============================================================ */

/* UNE SEULE LETTRINE PAR PAGE, ET C'EST LA PREMIÈRE.

   .ml-bloc pose une lettrine sur le premier paragraphe de chaque carte.
   Sur les mentions légales il n'y a qu'une carte, donc qu'une lettrine :
   c'est l'ouverture d'un article. Les CGV en comptent trois. Trois
   lettrines, ce n'est plus une ouverture, c'est un motif — et à
   mi-document, une majuscule géante au milieu de l'article 9 ressemble
   à une erreur de mise en page plutôt qu'à une intention. */
.cgv-suite > p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
}

/* LE SOMMAIRE — treize articles, c'est trop pour se repérer en
   faisant défiler.

   Il est numéroté parce que le document l'est : les numéros ne
   décorent pas, ils sont l'adresse à laquelle on renvoie (« voir
   l'article 8 »). Deux colonnes dès qu'il y a la place, pour qu'il
   tienne d'un seul regard au lieu de pousser le contrat sous la
   ligne de flottaison. */
.cgv-sommaire {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.cgv-sommaire-hd {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--a);
}

.cgv-sommaire ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s5);
  margin: 0;
  padding-left: 1.4em;
  color: var(--ink-faint);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.cgv-sommaire li::marker { font-variant-numeric: tabular-nums; }

.cgv-sommaire a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cgv-sommaire a:hover,
.cgv-sommaire a:focus-visible { color: var(--a); border-bottom-color: var(--a); }

@media (max-width: 34rem) {
  .cgv-sommaire { padding: var(--s3) var(--s4); }
  .cgv-sommaire ol { grid-template-columns: 1fr; }
}

/* L'ancre atterrit sous la barre du haut plutôt que dessous elle : sans
   ça, cliquer « Article 8 » dans le sommaire cache le titre qu'on
   venait chercher. */
.ml-bloc h3.cf-h3[id] { scroll-margin-top: var(--s6); }

/* LE FORMULAIRE DE RÉTRACTATION — la loi impose de le fournir, et
   quelqu'un doit pouvoir le recopier tel quel dans un courriel.

   Il est donc traité comme une pièce détachée du contrat et non comme
   un paragraphe de plus : encadré, sur le fond secondaire, dans la
   police du reste du site plutôt que dans le Bricolage léger de
   .ml-bloc — on le recopie, on ne le lit pas d'un trait. */
.cgv-formulaire {
  margin: var(--s4) 0 var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}

.ml-bloc .cgv-formulaire p {
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.7;
}

.cgv-formulaire-hd {
  font-family: var(--display) !important;
  font-size: var(--t-xs) !important;
  font-weight: 650 !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: var(--s3);
}