/* ═══════════════════════════════════════════════════════════
   PAGES LÉGALES — « Mentions légales », « Protection des données »
   Contrairement aux autres pages du site, le contenu n'est pas
   fait de blocs `cabinet/*` mais de blocs Gutenberg natifs
   (titres, paragraphes, listes) : c'est du texte long, révisable
   par le cabinet sans passer par le code. La mise en forme se
   fait donc ici, en portée depuis la classe de <body> posée par
   functions.php, plutôt que dans un gabarit de section.
   Le sommaire en tête de page est construit par src/js/legal.js.
   ═══════════════════════════════════════════════════════════ */

/* Fond blanc pour la colonne de lecture : le corps du site est gris très
   clair (--color-bg), et un document de plusieurs écrans se lit mieux sur
   blanc. Le hero peint son propre dégradé par-dessus, en pleine largeur. */
.cabinet-page-legal .wp-block-post-content {
  --legal-width: 820px;
  background: var(--color-white);
  padding-bottom: 90px;
}

/* Chaque bloc du contenu est ramené à la largeur de lecture et centré —
   sauf le hero, qui reste en pleine largeur comme sur les autres pages.
   Le gabarit `templates/page.html` donne 100 % de largeur au contenu,
   c'est donc bien ici que la contrainte est posée. */
.cabinet-page-legal .wp-block-post-content > *:not(.cabinet-hero) {
  width: min(var(--legal-width), 100% - 2 * var(--site-padding));
  margin-inline: auto;
}

/* ── Ligne de mise à jour, juste sous le hero ──────────────── */
.cabinet-page-legal .wp-block-post-content > .cabinet-legal__updated {
  display: block;
  margin-block: var(--space-6) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
}

/* Le texte ne colle pas au bas du hero, quel que soit le bloc qui ouvre le
   document (ligne de mise à jour, titre…). Le sélecteur doit l'emporter sur
   la règle des paragraphes plus bas, qui remet leur marge haute à zéro, et
   suivre celle de la ligne de mise à jour, de même poids. */
.cabinet-page-legal .wp-block-post-content > .cabinet-hero + * {
  margin-top: var(--space-10);
}

/* ── Sommaire (injecté par legal.js) ──────────────────────── */
.cabinet-legal-toc {
  margin-block: 28px 8px;
  padding: 26px 28px;
  background: linear-gradient(135deg, #ebf8f8 0%, #f5fdfd 100%);
  border: 1px solid rgba(58, 191, 191, 0.22);
  border-radius: var(--radius-lg);
}

.cabinet-legal-toc__title {
  margin: 0 0 var(--space-4);
  font-size: 0.75rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}

/* Deux colonnes : une quinzaine de sections tiennent ainsi sans repousser
   le début du texte trop bas. `break-inside` empêche un intitulé long
   d'être coupé entre les deux colonnes. */
.cabinet-legal-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-8);
}

.cabinet-legal-toc__list li {
  break-inside: avoid;
  margin-bottom: var(--space-2);
  line-height: var(--line-height-normal);
}

.cabinet-legal-toc__list a {
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
  transition: color var(--transition-fast);
}

.cabinet-legal-toc__list a:hover,
.cabinet-legal-toc__list a:focus-visible {
  color: var(--color-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Titres de section ────────────────────────────────────── */
/* Le filet supérieur remplace les blocs séparateurs : une section ajoutée
   depuis l'admin est ainsi détachée de la précédente sans avoir à insérer
   quoi que ce soit. L'écart sous l'en-tête collant vient de la règle commune
   (--sticky-header-offset, voir global.css). */
.cabinet-page-legal .wp-block-post-content > h2 {
  margin-block: var(--space-12) var(--space-5);
  padding-top: var(--space-10);
  border-top: 1px solid #e6edef;
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-navy);
}

.cabinet-page-legal .wp-block-post-content > h2:first-of-type {
  margin-top: var(--space-8);
  padding-top: 0;
  border-top: 0;
}

/* Sous-section (« Demande de prise en charge pour un adulte »…). La barre
   teal est posée en absolu, hors du flux, pour que le texte reste aligné
   sur celui des paragraphes. */
.cabinet-page-legal .wp-block-post-content > h3 {
  position: relative;
  margin-block: var(--space-8) var(--space-4);
  font-family: var(--font-family-base);
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-navy);
}

.cabinet-page-legal .wp-block-post-content > h3::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 2px;
  background: var(--color-teal);
}

/* ── Corps de texte ──────────────────────────────────────── */
.cabinet-page-legal .wp-block-post-content > p {
  margin-block: 0 var(--space-5);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text);
}

.cabinet-page-legal .wp-block-post-content > p strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}

/* Chapeau d'introduction, plus grand et en gris, comme les sous-titres de
   section du reste du site. */
.cabinet-page-legal .cabinet-legal__lead {
  font-size: 1.15rem;
  color: var(--color-muted);
}

/* Encart de coordonnées (responsable du traitement, hébergeur…). */
.cabinet-page-legal .cabinet-legal__card {
  padding: 22px 26px;
  background: var(--color-bg);
  border-left: 3px solid var(--color-teal);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.cabinet-page-legal .wp-block-post-content > ul {
  margin-block: 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.cabinet-page-legal .wp-block-post-content > ul li {
  position: relative;
  padding-left: 26px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}

.cabinet-page-legal .wp-block-post-content > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
}

/* Séparateur ajouté à la main depuis l'éditeur — le filet des titres suffit
   normalement, mais autant qu'il reste discret s'il y en a un. */
.cabinet-page-legal .wp-block-post-content > hr {
  margin-block: var(--space-10);
  border: 0;
  border-top: 1px solid #e6edef;
}

/* Liens dans le texte uniquement : ceux du sommaire ont leur propre style. */
.cabinet-page-legal .wp-block-post-content > p a,
.cabinet-page-legal .wp-block-post-content > ul a {
  color: var(--color-teal-dark);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

.cabinet-page-legal .wp-block-post-content > p a:hover,
.cabinet-page-legal .wp-block-post-content > ul a:hover {
  color: var(--color-navy);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .cabinet-legal-toc__list {
    columns: 1;
  }

  .cabinet-page-legal .wp-block-post-content > h2 {
    margin-block: var(--space-10) var(--space-4);
    padding-top: var(--space-8);
    font-size: 1.3rem;
  }

  .cabinet-page-legal .wp-block-post-content > p,
  .cabinet-page-legal .wp-block-post-content > ul li {
    font-size: var(--font-size-base);
  }

  .cabinet-page-legal .cabinet-legal__lead {
    font-size: var(--font-size-md);
  }

  .cabinet-page-legal .cabinet-legal__card {
    padding: 18px 20px;
  }

  .cabinet-page-legal .wp-block-post-content {
    padding-bottom: 60px;
  }
}

/* ── Impression ──────────────────────────────────────────── */
/* Ces pages sont régulièrement imprimées ou enregistrées en PDF pour être
   remises aux familles : on retire le sommaire, qui n'est cliquable que sur
   écran, et les fonds colorés. */
@media print {
  .cabinet-legal-toc {
    display: none;
  }

  .cabinet-page-legal .cabinet-legal__card {
    background: none;
  }

  .cabinet-page-legal .wp-block-post-content > h2 {
    break-after: avoid;
  }
}