/* ============================================================
   DONNÉES PERSONNELLES — une page qu'on lit, pas qu'on signe.

   Aucune mise en page savante ici, volontairement : c'est un document
   qu'on doit pouvoir lire d'un trait, chercher au Ctrl+F, imprimer.
   Les cartes du reste du site (.card .block, déjà dans socle.css)
   suffisent à séparer les sections ; ce fichier n'ajoute que ce que
   socle.css ne fournit pas.
   ============================================================ */

.cf-tete { margin-bottom: var(--s5); }
.cf-tete .lede { max-width: 62ch; }

/* L'encart « à compléter » se distingue du reste par sa couleur : c'est
   un rappel pour l'éditeur du site, pas une information pour le
   visiteur — l'ambre du site suffit à le sortir du lot sans avoir l'air
   d'une alerte de sécurité. */
.cf-a-completer {
  border-color: color-mix(in srgb, var(--a) 35%, var(--line));
  background: var(--a-soft);
}
.cf-a-completer h2 { color: var(--a); }
.cf-a-completer code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--a);
}

.card.block h3.cf-h3 {
  margin: var(--s4) 0 var(--s2);
  font-family: var(--display);
  font-stretch: var(--w-serre);
  font-size: var(--t-base);
  font-weight: 650;
  color: var(--ink);
}
.card.block h3.cf-h3:first-child { margin-top: 0; }

.card.block p { line-height: 1.65; color: var(--ink-soft); max-width: 68ch; }
.card.block p + p { margin-top: var(--s3); }
.card.block strong { color: var(--ink); font-weight: 650; }
.card.block code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-alt);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

.cf-liste {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: var(--s3) 0;
  padding-left: var(--s4);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 68ch;
}

.cf-maj {
  margin-top: var(--s5);
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

/* MENTIONS LÉGALES — un seul bloc, lu comme un document plutôt que
   feuilleté comme les autres pages. Traitement éditorial plutôt qu'un
   simple changement de police : les intitulés deviennent des petites
   capitales ambrées façon ours de journal, le corps du texte passe
   dans la graisse la plus légère de Bricolage (300, celle des titres
   du site — jamais utilisée aussi claire ailleurs) pour un rendu plus
   posé qu'un texte d'interface, et la toute première lettre de la
   page s'agrandit en lettrine, comme l'ouverture d'un article. */
.ml-bloc h3.cf-h3 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 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);
}
.ml-bloc h3.cf-h3:first-child { margin-top: 0; }
.ml-bloc h3.cf-h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.ml-bloc p {
  font-family: var(--display);
  font-weight: 340;
  font-size: 1.08rem;
  line-height: 1.85;
  letter-spacing: 0.002em;
}

.ml-bloc > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 650;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.04em 0.08em 0 0;
  color: var(--a);
}