/* =========================================================================
   mentions-legales.css — Chargé uniquement sur le template
   `mentions-legales`, en complément de comprendre.css (qui fournit le hero
   partagé .cp-hero).
   ========================================================================= */

/* Fond blanc, comme les gabarits « Comprendre » : le lavande global du site
   est réservé aux pages éditoriales/cartes. */
body.tpl-mentions-legales {
  background-color: var(--c-white);
}

.mentions-legales {
  overflow-x: hidden; /* le hero pleine largeur ne déborde jamais en X */
}

/* --- Corps : une colonne, largeur de lecture confortable ---------------- */
.ml-body {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
}

.ml-body__inner {
  max-width: 820px;
  margin-inline: auto;
}

/* --- Titres de sections (H2) -------------------------------------------- */
.ml-body .prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-purple-dark);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  margin: 2.5rem 0 0.85rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--c-purple-light);
  scroll-margin-top: var(--header-height);
}

/* Le tout premier titre n'a ni marge haute ni filet de séparation. */
.ml-body .prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- Sous-titres (H3) --------------------------------------------------- */
.ml-body .prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-coral);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.25;
  margin: 1.75rem 0 0.5rem;
  scroll-margin-top: var(--header-height);
}

/* --- Paragraphes ------------------------------------------------------- */
.ml-body .prose p {
  color: var(--c-purple-dark);
  line-height: 1.65;
  margin: 0 0 1rem;
}

/* --- Liens -------------------------------------------------------------- */
.ml-body .prose a {
  color: var(--c-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ml-body .prose a:hover,
.ml-body .prose a:focus-visible {
  color: var(--color-secondary-hover);
}

/* --- Listes ------------------------------------------------------------ */
.ml-body .prose ul {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}
.ml-body .prose li {
  color: var(--c-purple-dark);
  line-height: 1.6;
  margin: 0.35rem 0;
}

/* --- Dernière mise à jour (petit texte discret en fin de page) ---------- */
.ml-body .prose p em:only-child {
  color: #6b6f9c;
  font-size: 0.9rem;
}

/* Encadré d'information : hérite du composant global .callout, on n'ajuste
   que la respiration. */
.ml-body .callout {
  margin: 1.5rem 0;
}

@media (max-width: 1023px) {
  .ml-body {
    padding-inline: 1.5rem;
  }
}