/* =============================================================
   FICHES ÉVÉNEMENT / FORMATION / WEBINAIRE (demande B10)

   Les valeurs typographiques sont CELLES DE `mist-article.css` (article v2),
   recopiées à l'identique : 720 px de lecture, 260 px d'appui, interligne
   1.75, marges d'intertitre `clamp(38px,4.4vw,56px) 0 14px`, puce ronde
   orange de 6 px. Deux gabarits qui se ressemblent à 10 px près se lisent
   comme une erreur ; identiques, ils se lisent comme un système.

   ⚠️ CE FICHIER NE DÉCLARE AUCUNE VARIABLE CSS. Il n'en consomme que via
   `var(--x, repli)`. Une variable déclarée ici pourrait entrer en collision
   avec une propriété qu'Elementor lit — c'est le défaut `--display` du 06/09 :
   42 éléments de l'accueil passés en serif, et pas une sonde pour broncher.
   ============================================================= */

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

.mist-fiche-grille{
  display:grid;
  /* 720 de lecture + 260 d'appui : les pistes portent la largeur, le contenu
     n'a pas besoin d'un `max-width` propre. Même choix que l'article v2. */
  grid-template-columns:minmax(0,720px) 260px;
  gap:56px;
  align-items:start;
  justify-content:center;
}

.mist-fiche-lecture{ padding-top:8px }

.mist-fiche-aside{
  /* ⚠️ `position:sticky` ne mord QUE si aucun ancêtre ne porte
     `overflow:hidden` et si l'élément est plus court que la fenêtre. La
     colonne peut être longue : on borne sa hauteur et on la fait défiler
     elle-même, sinon elle cesse simplement de coller, sans rien dire. */
  position:sticky;
  top:24px;
  align-self:start;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ---------- Visuel affiché en entier (fiches webinaire) ----------
   `mist-ds.css:375` impose `aspect-ratio:4/3` et `object-fit:cover` à
   `.event-hero-img`. C'est le bon comportement pour une photo de terrain, et
   le mauvais pour une AFFICHE : le 08/09, le mot « REPLAY » du visuel
   « Alcool et substances psychoactives » était coupé en deux.
   ⚠️ Surcharge portée par une classe posée sur la section, pas une correction
   du design system : les événements et les formations gardent leur recadrage. */
.mist-fiche-visuel-entier .event-hero-img{
  aspect-ratio:auto;
  object-fit:contain;
  height:auto;
}

/* ---------- Fiche sans descriptif ----------
   Les neuf webinaires n'ont pas de corps rédactionnel. Plutôt qu'une piste de
   720 px vide à gauche, les cartes d'appui deviennent le contenu : elles se
   posent en ligne, et la colonne cesse d'être collante — il n'y a plus rien
   à côté de quoi coller. */
.mist-fiche-sans-corps .mist-fiche-aside{
  position:static;
  max-height:none;
  overflow:visible;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
}
.mist-fiche-sans-corps .mist-fiche-carte{
  flex:1 1 260px;
  max-width:340px;
}

/* Sous le point de rupture d'Elementor, une seule colonne et plus rien de
   collant : un bloc collant sur un téléphone masque le contenu qu'il résume. */
@media (max-width:1024px){
  .mist-fiche-grille{ grid-template-columns:minmax(0,1fr); gap:32px }
  .mist-fiche-aside{ position:static; max-height:none; overflow:visible }
}

/* ---------- Typographie du corps ----------
   Bloc recopié de `mist-article.css`. Le sélecteur `[data-mist="corps"]` est
   celui de l'article v2 : il est réutilisé tel quel, donc une correction de
   typographie faite là-bas profite aux fiches sans être repayée ici. Seules
   les règles ci-dessous sont propres aux fiches. */

.mist-fiche-corps{
  font-size:var(--fs-body,16.5px);
  /* 1.75 et non 1.6 : sur 720 px une ligne porte environ 90 caractères, et
     c'est l'interligne qui rend la ligne suivante trouvable. */
  line-height:1.75;
  color:var(--ink-soft,#4A5076);
}

.mist-fiche-corps > *:first-child{ margin-top:0 }
.mist-fiche-corps p{ margin:0 0 1.15em }

.mist-fiche-corps h2{
  font-family:var(--mist-font-display,'Mulish','Century Gothic','AppleGothic',sans-serif);
  font-weight:800;
  font-size:var(--fs-h3,clamp(21px, 2.1vw, 27px));
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink,#1F2444);
  /* L'espace AVANT est plus du triple de l'espace APRÈS : c'est lui qui sépare
     « Au programme » de « Pour qui ? », et c'est le seul repère de structure
     dans une fiche sans image intercalaire. */
  margin:clamp(38px,4.4vw,56px) 0 14px;
}
.mist-fiche-corps h3{
  font-family:var(--mist-font-display,'Mulish','Century Gothic','AppleGothic',sans-serif);
  font-weight:700;
  font-size:var(--fs-h4,19px);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--ink,#1F2444);
  margin:clamp(26px,3vw,36px) 0 10px;
}
.mist-fiche-corps strong{ color:var(--ink,#1F2444); font-weight:700 }

/* Puce dessinée : `list-style` ne sait pas colorer une puce indépendamment du
   texte, et `::marker` ne prend ni taille ni position fine partout. */
.mist-fiche-corps ul{ list-style:none; margin:0 0 1.15em; padding:0 }
.mist-fiche-corps ul li{ position:relative; padding-left:1.6em; margin:0 0 .55em }
.mist-fiche-corps ul li::before{
  content:'';
  position:absolute;
  left:.35em;
  /* Calé sur la première ligne, pas sur la hauteur de l'élément : une puce
     centrée verticalement descend au milieu d'un item de trois lignes. */
  top:calc(.875em - 3px);
  width:6px; height:6px;
  border-radius:50%;
  background:var(--orange,#E94E1B);
}
.mist-fiche-corps ol{ margin:0 0 1.15em; padding-left:1.5em }
.mist-fiche-corps ol li{ margin:0 0 .55em }
.mist-fiche-corps ol li::marker{ color:var(--blue,#3E4982); font-weight:700 }

/* ---------- Cartes de la colonne d'appui ---------- */

.mist-fiche-carte{
  border:1px solid var(--line,#E7E6F2);
  border-radius:var(--r-m,22px);
  background:var(--bg-mist,#F2F0F9);
  padding:16px 18px;
}
.mist-fiche-carte-titre{
  font-family:var(--mist-font-display,'Mulish',sans-serif);
  font-weight:800;
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue,#3E4982);
  margin:0 0 10px;
}

.mist-fiche-infos{ margin:0 }
.mist-fiche-info{ margin:0 0 10px }
.mist-fiche-info:last-child{ margin-bottom:0 }
.mist-fiche-info dt{
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft,#4A5076);
  opacity:.75;
  margin:0;
}
.mist-fiche-info dd{
  margin:2px 0 0;
  font-size:14.5px;
  line-height:1.45;
  color:var(--ink,#1F2444);
  font-weight:600;
}

/* ---------- Échéance ---------- */

.mist-fiche-echeance-date{
  margin:0 0 10px;
  font-size:15px;
  font-weight:700;
  color:var(--ink,#1F2444);
}
/* Le compte à rebours de la latérale est plus étroit que celui du hero : il
   tient dans 260 px moins les marges. Les boîtes viennent du design system, on
   ne redéclare que la contrainte de largeur. */
.mist-fiche-aside .countdown-sm{ gap:6px }
.mist-fiche-aside .countdown-sm .cd-box{ min-width:0; flex:1; padding:8px 4px }

/* ---------- Partage ---------- */

.mist-fiche-partage-boutons{ display:flex; flex-wrap:wrap; gap:8px }
/* ⚠️ Des BOUTONS, et donc une apparence explicite. `mist-ds.css:65` pose
   `a{color:inherit;text-decoration:none}` : dans ce kit rien n'a d'apparence
   propre, elle vient toujours d'une classe. */
.mist-fiche-partage-btn{
  appearance:none;
  border:1px solid var(--line,#E7E6F2);
  background:#fff;
  border-radius:999px;
  padding:7px 13px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--blue,#3E4982);
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.mist-fiche-partage-btn:hover,
.mist-fiche-partage-btn:focus-visible{
  border-color:var(--orange,#E94E1B);
  color:var(--orange,#E94E1B);
}
.mist-fiche-partage-retour{
  margin:10px 0 0;
  font-size:13px;
  font-weight:600;
  color:var(--orange,#E94E1B);
}

/* ---------- Contact du centre ---------- */

.mist-fiche-contact-nom{ margin:0; font-weight:700; color:var(--ink,#1F2444) }
.mist-fiche-contact-adresse{
  margin:4px 0 0;
  font-size:14px;
  line-height:1.45;
  color:var(--ink-soft,#4A5076);
}
.mist-fiche-contact-tel{ margin:8px 0 0; font-size:15px; font-weight:700 }
.mist-fiche-contact-tel a,
.mist-fiche-contact-lien a{
  color:var(--orange,#E94E1B);
  text-decoration:underline;
  text-underline-offset:3px;
}
.mist-fiche-contact-lien{ margin:8px 0 0; font-size:14px; font-weight:600 }

/* ---------- LE CARROUSEL : « la piste » (R-CARROUSEL, 22/09) ----------
 *
 * 🔴 CES RÈGLES SONT GÉNÉRIQUES ET CETTE FEUILLE EST GLOBALE. `mist-fiche.css`
 * est mise en file sur TOUTES les pages (`functions.php:195`) : c'est ce qui
 * permet au bloc « À lire aussi » des articles — rendu par un widget Elementor,
 * avec ses propres dépendances de style — de porter le même carrousel que le
 * bas des fiches de séance, sans qu'on écrive deux fois le même chrome. Deux
 * carrousels écrits séparément divergent au premier réglage.
 *
 * 🔴 UNE PISTE QUI DÉFILE, PAS UN DIAPORAMA. Ce qui tient est montré, le reste
 * défile : à trois cartes en 1440 il n'y a ni flèche ni pagination, à huit
 * replays la piste défile, et à 390 la carte suivante DÉPASSE — c'est ce
 * débord qui dit au doigt qu'il y a autre chose. Sur un téléphone il n'y a
 * aucune barre de défilement au repos : sans signal visible, le visiteur voit
 * exactement ce qu'il voyait avant (leçon des tableaux de tarifs, D-10).
 */

.mist-piste{ position:relative }

/* Le titre et les chevrons sur la même ligne : les flèches doivent être au
   bord haut-droit du bloc, là où l'œil les cherche, pas sous la piste. */
.mist-piste-tete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 22px;
}
/* ⚠️ (0,1,1) — un sélecteur d'enfant, pour battre `.mist-fiche-liees-titre` et
   `.mist-lies-titre` qui portaient la marge basse quand le titre était seul.
   Une media query n'ajoute aucune spécificité : la règle doit gagner d'emblée. */
.mist-piste-tete > h2{ margin:0 }

.mist-piste-nav{ display:flex; gap:8px; flex:0 0 auto }
/* Le script révèle la navigation ; sans cette règle, `hidden` serait écrasé par
   le `display:flex` ci-dessus et deux flèches inertes resteraient à l'écran. */
.mist-piste-nav[hidden]{ display:none }

.mist-piste-fleche{
  width:40px;
  height:40px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--line,#E7E6F2);
  border-radius:999px;
  background:#fff;
  color:var(--ink,#1F2444);
  cursor:pointer;
  transition:border-color .15s, color .15s, opacity .15s;
}
.mist-piste-fleche:hover:not(:disabled),
.mist-piste-fleche:focus-visible{
  border-color:var(--orange,#E94E1B);
  color:var(--orange,#E94E1B);
}
/* Désactivée plutôt que masquée : une flèche qui disparaît en bout de course
   fait sauter la mise en page, et le doigt retombe sur l'autre. */
.mist-piste-fleche:disabled{ opacity:.35; cursor:default }

.mist-piste-voie{
  display:grid;
  /* ⚠️ `column`, PAS `repeat(3,…)`. En flux de colonnes, les cartes se posent
     les unes après les autres sans limite de nombre : c'est ce qui fait tenir
     la même règle à 1, à 3 et à 20 contenus. */
  grid-auto-flow:column;
  gap:18px;
  overflow-x:auto;
  /* Le survol lève la carte de 2 px et le focus pose un contour : sans la
     gouttière verticale ci-dessous, `overflow-y:hidden` les rognerait. */
  overflow-y:hidden;
  padding:6px 0;
  /* `proximity` et non `mandatory` : `mandatory` se bat avec un défilement
     programmé en douceur, et fige la piste entre deux cartes sur certains
     navigateurs. */
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* La barre de défilement est masquée : les chevrons et le débord de la carte
     suivante disent déjà qu'il y a de la course. */
  scrollbar-width:none;
}
.mist-piste-voie::-webkit-scrollbar{ display:none }
.mist-piste-voie > *{ scroll-snap-align:start }

.mist-piste-points{
  display:flex;
  /* 🔴 `wrap`, ET CE N'EST PAS UN DÉTAIL. Il y a un point par vue : à 390 px une
     vue vaut une carte, donc vingt contenus font vingt points. Sans le retour à
     la ligne, la rangée finirait par DÉBORDER la fenêtre le jour où Anne-Laure
     garnira ses catalogues — « ils vont les garnir », Daniel, 22/09 — et le
     débordement horizontal est précisément l'un des huit critères de sonde.
     Le corriger le jour où il arrive, c'est le corriger après la cliente. */
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:18px 0 0;
}
.mist-piste-points[hidden]{ display:none }
.mist-piste-point{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--line,#E7E6F2);
  cursor:pointer;
  transition:width .15s, background-color .15s;
}
.mist-piste-point[aria-current="true"]{
  width:22px;
  background:var(--orange,#E94E1B);
}

@media (prefers-reduced-motion:reduce){
  .mist-piste-voie{ scroll-behavior:auto }
  .mist-piste-point,
  .mist-piste-fleche{ transition:none }
}

/* ---------- Contenus associés (bas de fiche, R-EVT4) ---------- */

.mist-fiche-liees{ background:var(--bg-soft,#FAF7F2) }
.mist-fiche-liees-titre{ margin:0 0 22px }
/* R-EVT-FIN (27/09) — « Prochains événements sur ce thème », puis le carrousel,
   dans la MÊME section. L'écart vient d'ici et pas d'une seconde `.section` :
   deux rembourrages de 96 px à la suite feraient un trou de 192 px entre deux
   blocs qui se lisent ensemble. */
.mist-fiche-theme + .mist-piste{ margin-top:clamp(40px,5vw,64px) }
/* ⚠️ TROIS PISTES FIXES, PAS `auto-fit` NI `min-content`. Avec une largeur
   souple, une séance liée seule s'étirerait sur les 1 224 px du conteneur :
   une carte de la largeur de l'écran pour un seul titre. Mesuré le 08/09 sur
   la fiche SST, qui n'a qu'une session à venir. La largeur fixe garde la même
   carte qu'il y en ait une ou huit — et c'est elle qui donne au script son
   pas de défilement. */
.mist-fiche-liees-grille{ grid-auto-columns:calc((100% - 36px) / 3) }
@media (max-width:900px){
  .mist-fiche-liees-grille{ grid-auto-columns:calc((100% - 18px) / 2) }
}
@media (max-width:600px){
  /* 🔴 86 %, PAS 100 %. À pleine largeur, une piste à 390 est indiscernable
     d'une colonne empilée : rien ne dit qu'il y a une carte suivante. Le
     débord est le seul signal qu'un téléphone donne — il n'y a pas de barre de
     défilement au repos, et le survol n'existe pas. */
  .mist-fiche-liees-grille{ grid-auto-columns:86% }
}
.mist-fiche-liee{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line,#E7E6F2);
  border-radius:var(--r-m,22px);
  background:#fff;
  /* ⚠️ LE REMBOURRAGE DESCEND D'UN NIVEAU, dans `.mist-fiche-liee-texte`.
     L'image est servie à fleur de bord (R-EVT4, 21/09) : laissé ici, il
     l'encadrerait de blanc sur trois côtés. `overflow:hidden` est ce qui fait
     que le haut de l'image épouse le rayon de la carte — sans lui, un
     rectangle dépasse dans les deux coins supérieurs. */
  padding:0;
  overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.mist-fiche-liee:hover,
.mist-fiche-liee:focus-visible{
  border-color:var(--orange,#E94E1B);
  transform:translateY(-2px);
}
.mist-fiche-liee-image{
  display:block;
  width:100%;
  /* Le même rapport que les cartes d'article et que les cartes de catalogue :
     deux gabarits qui se ressemblent à 10 px près se lisent comme une erreur,
     identiques ils se lisent comme un système. */
  aspect-ratio:16/9;
  object-fit:cover;
  /* Le haut de l'affiche porte le titre : à cadrage égal, mieux vaut perdre le
     bas. Sans cette ligne, `cover` centre et coupe les deux. */
  object-position:center top;
  /* ⚠️ La base atomique d'Elementor pose `.e-image{max-width:100%}` mais rien
     sur la hauteur : sans `height:auto`, une image plus haute que large
     déformerait la rangée. */
  height:auto;
}
/* 🔴 LES REPLAYS PORTENT DES AFFICHES CARRÉES, PAS DES PHOTOS.
   Mesuré le 21/09 : les neuf vignettes de webinaire font 400 × 400 et portent
   du TEXTE. Rognées en 16/9, elles perdaient le haut et le bas de leur titre,
   coupé en plein mot — sur une page à 200, un seul h1, débordement 0, zéro
   image cassée et zéro erreur. Seule la capture l'a montré.
   Le carré n'est pas un choix : c'est le cadrage que `/ressources/videos/`
   sert déjà pour les mêmes fichiers. */
.mist-fiche-liee-image-carre{
  aspect-ratio:1;
  object-position:center center;
}
.mist-fiche-liee-texte{
  display:block;
  padding:18px 20px;
}
.mist-fiche-liee-meta{
  display:block;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--orange,#E94E1B);
  margin-bottom:6px;
}
.mist-fiche-liee-titre{
  display:block;
  font-family:var(--mist-font-display,'Mulish',sans-serif);
  font-weight:700;
  font-size:16.5px;
  line-height:1.35;
  color:var(--ink,#1F2444);
}

/* ---------- CTA collant, mobile uniquement ---------- */

/* Masqué par défaut, et RÉVÉLÉ PAR LE SCRIPT seulement au bon gabarit. Sans
   le `hidden` du HTML, un visiteur sans JavaScript verrait une barre qui ne
   fait rien. */
.mist-fiche-cta-mobile{ display:none }

@media (max-width:1024px){
  .mist-fiche-cta-mobile:not([hidden]){
    display:block;
    position:fixed;
    inset:auto 0 0 0;
    z-index:80;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line,#E7E6F2);
  }
  .mist-fiche-cta-mobile .btn{ width:100%; justify-content:center }
  /* La barre couvre le bas de page : on rend sa hauteur au document, sinon
     elle masque le dernier lien du pied de page — un défaut qui ne se voit
     qu'en faisant défiler jusqu'en bas, donc jamais sur une capture partielle. */
  body:has(.mist-fiche-cta-mobile:not([hidden])){ padding-bottom:76px }

  /* 🔴 LE CHATBOT MANGEAIT LE BORD DROIT DU BOUTON — mesuré le 08/09.
     `.chatbot-fab` est en `position:fixed` en bas à droite, au MÊME `z-index`
     que la barre (80) : à égalité, c'est l'ordre du document qui tranche, et
     il arrive après. `document.elementFromPoint()` au bord droit du bouton
     rendait `button.chatbot-fab` : un appui à cet endroit ouvrait la
     conversation au lieu de l'inscription.
     ⚠️ Aucune capture ne montre ça — les deux éléments sont côte à côte et
     l'un est rond. Seule la mesure du point de clic l'a trouvé.
     On DÉPLACE les deux lanceurs plutôt que de surélever la barre : passer la
     barre au-dessus les rendrait, eux, inatteignables. `transform` ne touche
     pas au flux, donc rien d'autre ne bouge. */
  body:has(.mist-fiche-cta-mobile:not([hidden])) .chatbot-fab,
  body:has(.mist-fiche-cta-mobile:not([hidden])) .mist-disk-launcher{
    transform:translateY(-76px);
  }
}

@media (prefers-reduced-motion:reduce){
  .mist-fiche-liee{ transition:none }
  .mist-fiche-liee:hover,
  .mist-fiche-liee:focus-visible{ transform:none }
}

/* EVENEMENTS-AL-1310 (13/10) — « Inscription obligatoire pour participer à
   l'événement. » : plus d'italique, et le poids de la DATE du hero.
   Anne-Laure : « retirer l'italique et le mettre un peu plus en gras, comme la
   date ». La date est une puce `.event-meta .em` (mist-ds.css:367) : 14 px,
   graisse 600, couleur `--ink-soft`. On reprend ces trois valeurs, pas une
   approximation — « comme la date » se mesure.
   ⚠️ SPECIFICITE (0,1,0), VOLONTAIREMENT. Les deux etats qui portent une
   information plus forte gardent la main : `.is-full .event-notice` (rouge,
   mist-ds.css:373) et `.event-notice.event-closes` (mist-fin-inscriptions.css),
   tous deux en (0,2,0). Cette feuille arrive apres `mist-ds` (dependance
   declaree), donc a specificite egale c'est elle qui gagne sur l'italique. */
.event-notice{ font-style:normal; font-weight:600; color:var(--ink-soft) }