/* ==========================================================================
   AFAAR — Mentions légales
   Motif absent de afaar.css : colonne de texte long, centrée, en lecture
   confortable. Implémentation de « Page Mentions légales.dc.html ».
   Aucune valeur nouvelle hors la largeur de colonne (820px) et le rythme
   vertical du corps de texte (1.75), tous deux pris tels quels dans le
   bundle.
   ========================================================================== */

/* --- Colonne de contenu --- */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* --- Titre de page --- */
.legal__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal__title {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 400;
}

/* --- Bloc « titre + texte » --- */
.legal__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal__block h2 {
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 400;
}
.legal__block p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text-body);
  text-wrap: pretty;
}

/* ==========================================================================
   MOBILE
   Le bundle ne fournit pas de maquette 390 pour cette page : on reprend les
   valeurs mobile déjà définies dans afaar.css (gouttière --gutter-m, titre
   de héro 40px) sans introduire de mise en page nouvelle.
   ========================================================================== */

@media (max-width: 899px) {

  .legal {
    padding: 28px var(--gutter-m) 130px; /* 130px : dégagement du CTA collant */
    gap: 28px;
  }
  .legal__title { font-size: 40px; }
  .legal .eyebrow { font-size: 11px; letter-spacing: .16em; }
}