/* ─────────────────────────────────────────────────────────────────────────
   Page Formule (template-formule.php), réutilisée par la page « À propos ».
   Chargée uniquement sur ce gabarit (ml_fiche_formule_enqueue() dans
   functions.php, handle « ml-fiche-formule »), dépendante de main.css : tous
   les tokens (--ml-*) sont lus depuis le :root de main.css, jamais
   redéclarés ici. Dépend aussi de popup-formules.css (chargé sur tout le
   site public), dont ce fichier affine deux classes partagées
   (.ml-formule-destinations-entete) dans le nouveau
   corps de page à deux colonnes.

   Mobile first, palier principal à 900px comme le reste du thème. Toute
   animation respecte prefers-reduced-motion.

   Le gabarit est assigné à plusieurs pages (formules spéciales, « À
   propos ») : rien ici n'est propre à une formule, tout tient sur les
   tokens, les classes et la présence ou non d'une formule reliée (voir les
   classes .ml-formule-layout--seul et .ml-formule-hero-inner--seul, posées
   par le template quand aucun terme n'est relié à la page).
───────────────────────────────────────────────────────────────────────── */

/* ── FILET : un mot trop long ne pousse jamais son conteneur hors de l'écran ──
   Les textes de ce gabarit sont éditables dans Gutenberg (voir CLAUDE.md) :
   un nom d'école, une adresse ou un mot composé plus long que prévu peut
   arriver demain. « break-word » ne coupe un mot QUE s'il ne tient pas seul
   sur sa ligne, jamais dans les cas normaux où les mots se séparent déjà aux
   espaces : c'est le même filet que .ml-info-list li dans main.css, posé ici
   sur les titres et les paragraphes du gabarit plutôt que sur un seul champ. */
.ml-formule-titre,
.ml-formule-hero-texte > p,
.ml-formule-bloc,
.ml-formule-devis,
.ml-formule-cta-inner {
  overflow-wrap: break-word;
}

/* ── Fil d'Ariane du chrome : masqué, re-rendu en blanc dans le hero ──────
   Même procédé que la page Langue (assets/css/page-langue.css) : la classe
   body vient de ml_body_classes() (inc/template-functions.php), pas d'un
   sélecteur de modèle. */
body.ml-page-formule > .ml-fil-ariane {
  display: none;
}

/* La barre de menu flotte par dessus le haut de page violet : marge basse
   négative égale à la hauteur de la barre, comme sur la page Langue. */
body.ml-page-formule .ml-header {
  margin-block-end: calc(-1 * (var(--ml-header-h) + var(--ml-space-sm)));
}

/* ── HAUT DE PAGE : bloc violet plein, grand arrondi en bas à droite ──────
   Même langage visuel que la page Langue : une seule couleur pleine plutôt
   qu'une photo, pour ne jamais dépendre d'un visuel choisi par la cliente.
   Le padding du haut réserve la hauteur de la barre de menu qui survole le
   bloc. */
.ml-formule-hero {
  position: relative;
  isolation: isolate;
  background: var(--ml-accent);
  color: #fff;
  padding-block: calc(var(--ml-header-h) + var(--ml-space-lg)) var(--ml-space-xl);
  padding-inline: var(--ml-space-sm);
  border-end-end-radius: 140px;
}

/* SUR TÉLÉPHONE, LE BLOC VIOLET FAIT AU MOINS UN ÉCRAN, ET IL GRANDIT AVEC SON
   CONTENU (demande de Marino).

   « min-block-size » et non « block-size » : c'est toute la différence. Une
   hauteur fixe couperait le texte d'une formule bavarde ; un plancher garantit
   la pleine hauteur quand le contenu est court, et laisse le bloc s'allonger
   quand il ne l'est pas. Aucun contenu ne sort donc jamais du violet, y compris
   pendant l'apparition au défilement, qui fait descendre les éléments de
   quelques dizaines de pixels avant de les poser.

   L'unité est « svh », jamais « vh » : sur un téléphone, « vh » compte l'écran
   barres du navigateur RÉTRACTÉES, donc plus haut qu'il ne l'est vraiment tant
   qu'on n'a pas défilé. Le bas du bloc passait sous la barre d'outils.

   Le contenu se centre dans la hauteur : sans cela, un texte court se collerait
   en haut et laisserait un grand vide violet sous lui. */
@media (max-width: 899.98px) {
  .ml-formule-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 100svh;
    padding-block-end: var(--ml-space-xl);
  }
}

.ml-formule-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* « minmax(0, 1fr) », pas « 1fr » seul : sans le plancher à zéro, une
     grille CSS ne laisse jamais sa colonne descendre sous la largeur de
     contenu minimale de ce qu'elle porte. Sur un téléphone, cette colonne est
     seule (aucune colonne explicite n'est posée avant 900px, la grille en
     déduit une piste implicite « auto »), et le h1 (max-inline-size: 18ch,
     plus bas) réclamait alors toute cette largeur même quand l'écran ne
     l'offrait pas : le titre, le paragraphe et le visuel débordaient tous
     ensemble du conteneur et de l'écran. Constaté par Marino sur « Immersion
     chez le professeur », mais le défaut ne tenait à aucun texte en
     particulier : mesuré et corrigé en août 2026, la colonne suit désormais
     toujours la largeur réelle disponible, et son contenu s'enroule dedans
     plutôt que de la pousser. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ml-space-lg);
}
@media (min-width: 900px) {
  .ml-formule-hero-inner {
    /* Même raison qu'au dessus : la colonne de texte ne doit jamais imposer
       sa largeur de contenu à la grille. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--ml-space-xl);
  }
  /* Sans visuel (image non choisie dans le groupe éditable) : une seule
     colonne de texte, centrée et bornée en largeur pour rester lisible.
     C'est l'état de la page « À propos » tant qu'aucune image n'est posée. */
  .ml-formule-hero-inner--seul {
    grid-template-columns: minmax(0, 1fr);
  }
  .ml-formule-hero-inner--seul .ml-formule-hero-texte {
    max-inline-size: 62ch;
  }
}

/* Fil d'Ariane rendu ici, en blanc sur le violet (voir plus haut : le fil du
   chrome est masqué sur ce seul gabarit). */
.ml-formule-hero .ml-fil-ariane {
  max-inline-size: none;
  margin: 0 0 var(--ml-space-md);
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
}
.ml-formule-hero .ml-fil-ariane a {
  color: rgba(255, 255, 255, 0.85);
}
.ml-formule-hero .ml-fil-ariane a:hover,
.ml-formule-hero .ml-fil-ariane a:focus-visible {
  color: #fff;
}
.ml-formule-hero .ml-fil-ariane a:focus-visible {
  outline-color: #fff;
}
.ml-formule-hero .ml-fil-ariane li[aria-current="page"] {
  color: #fff;
}

/* Pastille d'âge : ne s'affiche que si une formule est reliée à la page et
   qu'un âge est renseigné sur son terme. Blanc plein, texte foncé : c'est la
   même famille que la pastille des cartes de formule (popup-formules.css),
   jamais un violet clair illisible sur le violet du fond. */
.ml-formule-hero-age {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.9em;
  margin-block-end: var(--ml-space-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ml-accent-dark);
  border-radius: var(--ml-radius-pill);
  font-family: var(--ml-font-heading);
  font-weight: 700;
  font-size: var(--ml-fs-sm);
  box-shadow: var(--ml-shadow-sm);
}

.ml-formule-titre {
  color: #fff;
  font-size: var(--ml-fs-h1);
  max-inline-size: 18ch;
  margin-block: 0 var(--ml-space-sm);
  text-shadow: 0 2px 18px rgba(20, 8, 28, 0.25);
}

/* Le ou les paragraphes d'introduction du haut de page, directement dans le
   bloc de texte (aucune autre classe : voir la décomposition dans
   template-formule.php). */
.ml-formule-hero-texte > p {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--ml-fs-lg);
  max-inline-size: 52ch;
}

/* Le seul fait calculé du haut de page : le nombre de destinations. Même
   habillage que les statistiques de la page Langue (page-langue.css), pour
   rester dans le même langage visuel. */
.ml-formule-hero-stats {
  margin-block-start: var(--ml-space-lg);
}
/* LE NOMBRE ET SON LIBELLE SUR UNE SEULE LIGNE, le libelle en petit a cote
   (demande de Marino). Ils etaient l'un sous l'autre, et le libelle repetait le
   nombre : la colonne affichait donc le meme chiffre deux fois de suite. Le
   libelle a perdu son nombre (voir template-formule.php), il tient desormais a
   cote sans encombrer. baseline pour que le petit texte s'aligne sur le pied du
   grand chiffre, wrap pour qu'il passe dessous sur un ecran etroit plutot que de
   comprimer le chiffre. */
.ml-formule-hero-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
}
.ml-formule-hero-stat-nombre {
  font-family: var(--ml-font-heading);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  color: #fff;
}
.ml-formule-hero-stat-libelle {
  font-size: var(--ml-fs-sm);
  color: rgba(255, 255, 255, 0.78);
}

/* Visuel du haut de page : la photo éditable du groupe, encadrée de blanc,
   grand arrondi et ombre franche (langage de la page Langue). N'existe que
   si une image est choisie : voir .ml-formule-hero-inner--seul plus haut
   pour le cas contraire. */
.ml-formule-hero-visual {
  display: flex;
  justify-content: center;
}
.ml-formule-hero-photo {
  display: block;
  inline-size: 100%;
  max-inline-size: 460px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ml-radius-lg);
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--ml-shadow-lg);
}

/* ── CORPS DE PAGE : contenu à gauche, carte devis collante à droite ──────
   Grille CSS avec align-items: start : c'est ce qui permet à la carte devis
   de rester collante (position: sticky) sans être étirée à la hauteur de la
   colonne de contenu, exactement le procédé déjà employé pour le sommaire de
   la page d'information (voir .ml-info-grid dans main.css). ── */
.ml-formule-corps {
  background: var(--ml-bg);
}

.ml-formule-layout-principal > .ml-formule-bloc + .ml-formule-bloc {
  margin-block-start: var(--ml-space-xl);
}

@media (min-width: 900px) {
  .ml-formule-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--ml-space-xl);
  }
  /* Sans formule reliée (page « À propos ») : pas de carte devis, donc pas
     de seconde colonne. Une seule colonne pleine largeur. */
  .ml-formule-layout--seul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mesure de lecture confortable pour la prose du contenu éditorial : sans
   elle, la colonne de contenu (jusqu'à 1200px sur la page « À propos », sans
   carte devis) serait trop large pour se lire d'un trait. */
.ml-formule-bloc-contenu p {
  max-inline-size: 68ch;
  color: var(--ml-text-mid);
  font-size: var(--ml-fs-lg);
}
.ml-formule-bloc-contenu h2,
.ml-formule-bloc-atouts h2 {
  max-inline-size: 26ch;
}

/* ── CE QUI EST COMPRIS : la liste éditable devient une grille de points
   cochés, en CSS seul (le contenu reste une simple liste à puces pour la
   cliente, éditable comme n'importe quelle liste Gutenberg). auto-fit :
   la grille s'adapte aussi bien à la colonne étroite (avec carte devis)
   qu'à la pleine largeur (page « À propos », sans carte devis), sans
   dépendre d'un point de rupture fixe. ── */
.ml-formule-bloc-atouts ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ml-space-sm);
  margin-block-start: var(--ml-space-md);
  list-style: none;
  padding: 0;
}
.ml-formule-bloc-atouts ul > li {
  position: relative;
  /* LE TEXTE EST CENTRE VERTICALEMENT DANS SA CASE, pas cale en haut. La liste
     est une grille : une case d'une seule ligne, placee sur la meme rangee
     qu'une case de deux lignes, est etiree a la hauteur de sa voisine. Son
     texte restait alors en haut pendant que la coche, elle, se centrait a
     cinquante pour cent : les deux ne se regardaient plus (constat de Marino).
     La coche est en position absolue, donc hors du flux : le seul enfant de
     cette boite flex est le texte. */
  display: flex;
  align-items: center;
  padding-block: var(--ml-space-sm);
  padding-inline-end: var(--ml-space-sm);
  padding-inline-start: calc(var(--ml-space-md) + 1.5em);
  background: var(--ml-bg);
  border: 1px solid var(--ml-accent-bordure);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow-sm);
  color: var(--ml-text);
  transition: border-color 220ms var(--ml-ease), transform 220ms var(--ml-ease);
}
.ml-formule-bloc-atouts ul > li:hover {
  border-color: var(--ml-accent);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .ml-formule-bloc-atouts ul > li {
    transition: none;
  }
  .ml-formule-bloc-atouts ul > li:hover {
    transform: none;
  }
}
/* La coche : un masque CSS (même technique que le filigrane du globe,
   .ml-watermark dans main.css), teinté de l'accent. Aucun nouveau fichier
   SVG : le tracé est un petit SVG intégré directement dans l'URL. */
.ml-formule-bloc-atouts ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--ml-space-sm);
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 1.1em;
  block-size: 1.1em;
  background-color: var(--ml-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── LES DESTINATIONS QUI LA PROPOSENT : section calculée, PLEINE LARGEUR ──
   Elle vivait dans la colonne de gauche du corps de page, à côté de la carte
   devis : trente-trois cartes sur une colonne étroite. Marino l'a sortie de là
   en août 2026, et elle sert désormais le carrousel de l'accueil.

   Rien à styler pour la piste elle même : tout le carrousel
   (.ml-destinations-*) est déjà dans main.css, chargé partout. L'en-tête
   (.ml-formule-destinations-entete) est stylé par popup-formules.css, lui aussi
   sur tout le site public. Cette section ne pose donc que son fond et son
   espacement. ── */
.ml-formule-destinations {
  background: var(--ml-bg-alt);
}
.ml-formule-destinations .ml-formule-destinations-entete {
  margin-block-end: var(--ml-space-md);
  /* A GAUCHE, pas centre (demande de Marino). L'en-tete est centre par
     popup-formules.css, ou il coiffe une grille de cartes centree. Ici il coiffe
     un carrousel qui demarre au bord gauche du conteneur : un titre centre au
     dessus d'une piste alignee a gauche flotte sans rien pour le tenir. */
  text-align: start;
}
.ml-formule-destinations .ml-formule-destinations-entete p {
  margin-inline: 0;
}

/* ── FAQ : accordéon natif details/summary, même construction visuelle que
   la FAQ de la fiche pays (fiche-pays.css), redéclarée ici sous ses propres
   classes : les deux gabarits ne partagent pas de feuille de style. ── */
.ml-formule-section-titre {
  max-inline-size: 26ch;
}
.ml-formule-faq-liste {
  display: grid;
  gap: var(--ml-space-sm);
  margin-block-start: var(--ml-space-lg);
}
.ml-formule-faq-item {
  background: var(--ml-bg-alt);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  padding: var(--ml-space-sm) var(--ml-space-md);
}
.ml-formule-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ml-space-sm);
  cursor: pointer;
  list-style: none;
}
.ml-formule-faq-question::-webkit-details-marker {
  display: none;
}
.ml-formule-faq-question h3 {
  font-size: var(--ml-fs-base);
  margin: 0;
}
.ml-formule-faq-question::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.4rem;
  color: var(--ml-accent);
  transition: rotate 200ms var(--ml-ease);
}
.ml-formule-faq-item[open] .ml-formule-faq-question::after {
  rotate: 45deg;
}
@media (prefers-reduced-motion: reduce) {
  .ml-formule-faq-question::after {
    transition: none;
  }
}
.ml-formule-faq-question:focus-visible {
  outline: 2px solid var(--ml-accent);
  outline-offset: 2px;
}
.ml-formule-faq-reponse {
  padding-block-start: var(--ml-space-sm);
  color: var(--ml-text-mid);
}
.ml-formule-faq-reponse a {
  color: var(--ml-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── CARTE DEVIS : l'élément collant du gabarit ────────────────────────────
   N'existe dans le DOM que si une formule est reliée à la page (voir
   template-formule.php) : sur « À propos », .ml-formule-devis n'apparaît
   jamais. Sur mobile, elle est une carte ordinaire, en dernière position du
   corps de page. Sur bureau, elle devient collante (voir la règle à
   900px ci dessus, à côté de .ml-formule-layout). ── */
.ml-formule-devis {
  margin-block-start: var(--ml-space-xl);
  padding: var(--ml-space-lg);
  background: var(--ml-bg);
  border: 1px solid var(--ml-accent-bordure);
  border-radius: var(--ml-radius-lg);
  box-shadow: var(--ml-shadow-md);
}
@media (min-width: 900px) {
  .ml-formule-devis {
    position: sticky;
    /* Même formule que le sommaire de la page d'information (main.css,
       .ml-info-sommaire) : elle tient compte de la barre de menu collante. */
    top: calc(var(--ml-header-h) + var(--ml-space-md));
    margin-block-start: 0;
  }
}
.ml-formule-devis-age {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.75em;
  margin-block-end: var(--ml-space-sm);
  background: var(--ml-accent-soft);
  color: var(--ml-accent-dark);
  border-radius: var(--ml-radius-pill);
  font-family: var(--ml-font-heading);
  font-weight: 700;
  font-size: var(--ml-fs-sm);
}
.ml-formule-devis-titre {
  margin: 0 0 0.35em;
  font-family: var(--ml-font-heading);
  font-weight: 700;
  font-size: var(--ml-fs-h3);
  color: var(--ml-primary);
}
.ml-formule-devis-texte {
  margin: 0 0 var(--ml-space-md);
  color: var(--ml-text-mid);
}
.ml-formule-devis-bouton {
  inline-size: 100%;
  justify-content: center;
}

/* ── APPEL FINAL : dégradé de la couleur de marque (comme la page Langue et
   les fiches Pays). ── */
.ml-formule-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, var(--ml-accent), var(--ml-accent-dark));
  color: #fff;
  text-align: center;
}
.ml-formule-cta h2 {
  color: #fff;
}
/* Le paragraphe suit directement le h2, tous deux enfants directs du
   conteneur : la règle générale .ml-section > .ml-container > h2 + p
   (main.css) le repeindrait en gris par dessus le blanc voulu. Même
   correctif que le CTA des pages Langue et Pays. */
.ml-formule-cta.ml-section > .ml-container > h2 + p {
  color: #fff;
  max-inline-size: 46ch;
  margin-inline: auto;
}
/* Filigrane : le même champ de bulles que les autres appels à l'action
   (assets/img/bulles-fond.png). Image de fond CSS, rien à décrire pour une
   synthèse vocale, rien à télécharger tant que la section n'est pas peinte.
   Motif statique : rien à couper pour prefers-reduced-motion. */
.ml-formule-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../img/bulles-fond.png');
  background-repeat: no-repeat;
  background-position: 58% 0;
  background-size: 190% auto;
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
}
@media (min-width: 900px) {
  .ml-formule-cta::before {
    background-position: center 0;
    background-size: 100% auto;
  }
}
.ml-formule-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--ml-space-sm);
}
/* La grille gère déjà l'écart : on annule la marge basse du composant humain
   (main.css), sinon le geste se doublerait avec le gap, comme corrigé sur
   les CTA des pages Langue et Pays. */
.ml-formule-cta-inner .ml-cta-humain {
  margin-block-end: 0;
}
.ml-formule-cta-bouton {
  margin-block-start: var(--ml-space-sm);
  background: #fff;
  color: var(--ml-accent);
}
.ml-formule-cta-bouton:hover {
  background: var(--ml-accent-soft);
}