/* ---------------------------------------------------------------------------
 * Gabarit « Page légale » — hero sobre, sommaire collant, texte long.
 *
 * ⚠️ AUCUNE COULEUR, AUCUN RAYON, AUCUNE TAILLE N'EST ÉCRIT EN DUR : tout passe
 * par les variables de `mist-ds.css`, avec un repli littéral en second argument
 * pour que la feuille reste lisible seule. Les 28 variables globales du KIT
 * Elementor, elles, sont inutilisables (27 portent `deleted_at`, 3 ont une
 * valeur corrompue) — ce sont bien celles du design system CSS qu'on lit ici,
 * pas celles du kit.
 *
 * ⚠️ CE FICHIER DOUBLE UNE PARTIE DE `mist-article.css` (bloc `.mist-sommaire`).
 * C'est assumé et provisoire : l'incrément B10, qui porte le sommaire des
 * articles, est ÉCRIT MAIS NON DÉPLOYÉ. Le jour où il est livré, les deux
 * sommaires doivent être fusionnés — voir `QUESTIONS.md` §41. Le calcul, lui,
 * n'est PAS doublé : les deux lisent `mist-article-noyau.php`.
 * ------------------------------------------------------------------------- */

/* ---------- Le hero ---------- */

.mist-legale-hero { padding-bottom: clamp(28px, 3.5vw, 44px) }
.mist-legale-entete { max-width: 760px }
.mist-legale-titre { margin: 14px 0 0 }
.mist-legale-maj { margin: 14px 0 0 }

/* ---------- Les deux colonnes ---------- */

/* `minmax(0, …)` et pas `720px` seul : une piste de grille prend la largeur
   MINIMALE de son contenu par défaut, et un tableau large ou une URL sans
   espace la ferait déborder au lieu de la contraindre. C'est la cause la plus
   fréquente de débordement horizontal en grille, et elle ne se voit qu'au
   contenu réel. */
.mist-legale-grille {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 720px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  justify-content: center;
}
.mist-legale-grille.is-sans-sommaire {
  grid-template-columns: minmax(0, 720px);
}
.mist-legale-corps { padding-top: clamp(24px, 3vw, 40px) }

/* `align-items: start` ci-dessus n'est pas décoratif : dans une grille, un
   élément est étiré sur toute la hauteur de sa rangée par défaut, et un
   `position: sticky` sur un élément déjà aussi haut que son conteneur ne colle
   JAMAIS — sans que rien ne le signale. */
.mist-legale-sommaire {
  position: sticky;
  top: 24px;
  border: 1px solid var(--line, #E7E6F2);
  border-radius: var(--r-m, 22px);
  background: var(--bg-mist, #F2F0F9);
  padding: 16px 18px;
  /* Un sommaire plus haut que la fenêtre cesse de coller au bon endroit : il
     défile jusqu'au bout puis se fige. La politique de confidentialité en
     compte treize entrées. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.mist-legale-sommaire-titre {
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 800;
  font-size: var(--fs-small, 13.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink, #1F2444);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mist-legale-sommaire-titre::-webkit-details-marker { display: none }
/* Le chevron n'apparaît que là où le bloc est repliable, c'est-à-dire sous
   901 px : au bureau il est toujours ouvert, et un chevron y mentirait. */
.mist-legale-sommaire-titre::after {
  content: '';
  width: 9px; height: 9px; margin-left: 12px; flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  display: none;
}
.mist-legale-sommaire[open] .mist-legale-sommaire-titre::after { transform: rotate(-135deg) }

.mist-legale-sommaire-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px }
.mist-legale-sommaire-lien {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-s, 14px);
  font-size: var(--fs-small, 13.5px);
  line-height: 1.4;
  color: var(--ink-soft, #4A5076);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mist-legale-sommaire-lien:hover,
.mist-legale-sommaire-lien:focus-visible { background: #fff; color: var(--ink, #1F2444) }
.mist-legale-sommaire-lien.is-active {
  background: #fff;
  color: var(--blue, #3E4982);
  font-weight: 600;
  border-left-color: var(--orange, #E94E1B);
}

/* ---------- Le contenu Gutenberg ---------- */

.mist-legale-contenu { max-width: 720px }
.mist-legale-contenu > :first-child { margin-top: 0 }
.mist-legale-contenu p { margin: 0 0 16px; line-height: 1.65 }
.mist-legale-contenu h2 {
  font-size: var(--fs-h3, 27px);
  margin: 40px 0 14px;
  /* L'ancre ne doit pas coller au bord haut de la fenêtre après un clic dans
     le sommaire. L'en-tête du site n'est PAS collant (mesuré), donc 24 px de
     confort suffisent — pas la hauteur d'un header. */
  scroll-margin-top: 24px;
}
.mist-legale-contenu h3 { font-size: var(--fs-h4, 19px); margin: 28px 0 10px; scroll-margin-top: 24px }
.mist-legale-contenu ul,
.mist-legale-contenu ol { margin: 0 0 18px 22px; padding: 0 }
.mist-legale-contenu li { margin-bottom: 8px; line-height: 1.6 }
.mist-legale-contenu a {
  color: var(--blue, #3E4982);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Les politiques de confidentialité sont pleines d'URL entières
     (`https://support.microsoft.com/fr-fr/help/17442/…`). Sans cette coupure,
     chacune élargit la colonne et fait déborder la page — en mobile d'abord. */
  overflow-wrap: anywhere;
}
.mist-legale-contenu a:hover { color: var(--orange, #E94E1B) }
.mist-legale-contenu strong { font-weight: 700; color: var(--ink, #1F2444) }

/* Un tableau ne se contraint pas : il se fait défiler. Le rétrécir rend ses
   colonnes illisibles ; le laisser déborder casse la page entière. */
.mist-legale-contenu figure.wp-block-table,
.mist-legale-contenu .wp-block-table { overflow-x: auto; margin: 0 0 22px }
.mist-legale-contenu table { width: 100%; border-collapse: collapse; font-size: 14.5px }
.mist-legale-contenu th,
.mist-legale-contenu td {
  border: 1px solid var(--line, #E7E6F2);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.mist-legale-contenu th { background: var(--bg-mist, #F2F0F9); font-weight: 700 }

.mist-legale-contenu .wp-block-file,
.mist-legale-contenu .wp-block-buttons { margin: 0 0 22px }

/* ⚠️ LE BOUTON GUTENBERG N'HÉRITE PAS DE LA CHARTE, ET ÇA NE SE VOIT QUE SUR
   UNE CAPTURE. `wp-element-button` sort avec les couleurs du thème parent :
   fond bleu foncé, texte souligné et presque de la même valeur que le fond —
   lisible sur le papier, illisible à l'écran. Aucune sonde ne mesure un
   contraste, et le bouton répond parfaitement au clic. Il reprend donc ici
   l'apparence de `.btn-accent` du design system.
   ⚠️ `:where()` n'ajoute AUCUNE spécificité : sans les deux classes, les
   styles en ligne du thème parent l'emportent. */
.mist-legale-contenu .wp-block-button__link,
.mist-legale-contenu .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--orange, #E94E1B);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-accent, 0 10px 24px rgba(233, 78, 27, .25));
  transition: filter .2s, transform .18s cubic-bezier(.4, 0, .2, 1);
}
.mist-legale-contenu .wp-block-button__link:hover,
.mist-legale-contenu .wp-element-button:hover { filter: brightness(1.06); color: #fff }
.mist-legale-contenu .wp-block-button__link:focus-visible,
.mist-legale-contenu .wp-element-button:focus-visible {
  outline: 2px solid var(--blue, #3E4982);
  outline-offset: 3px;
}

/* Les réserves « à valider par MIST » : elles doivent se LIRE comme des
   réserves, pas comme du contenu. Une note en italique gris se confond avec le
   texte ; ce sont des questions posées à la cliente, et elles doivent lui
   sauter aux yeux en recette — puis disparaître une à une. */
.mist-legale-contenu .mist-a-valider {
  margin: 0 0 18px;
  padding: 11px 14px 11px 16px;
  border-left: 3px solid var(--orange, #E94E1B);
  border-radius: 0 var(--r-s, 14px) var(--r-s, 14px) 0;
  background: var(--orange-pale, #FDEEE9);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft, #4A5076);
}
/* La pastille dit à quoi sert le bloc sans qu'on ait à l'écrire dans chaque
   texte — et elle n'entre pas dans le contenu, donc elle ne se retrouvera pas
   dans un copier-coller vers un document. */
.mist-legale-contenu .mist-a-valider::before {
  content: 'À valider';
  display: block;
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange, #E94E1B);
  margin-bottom: 3px;
}

/* ---------- Sous 901 px : le sommaire passe en accordéon, au-dessus ---------- */

@media (max-width: 900px) {
  .mist-legale-grille { grid-template-columns: minmax(0, 1fr) }
  .mist-legale-sommaire {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0 0 8px;
  }
  .mist-legale-sommaire-titre::after { display: block }
  .mist-legale-contenu { max-width: none }
}