/* =========================================================================
   Med Tech Academy : Accueil
   Design system "L'Atelier Clinique" (cf. DESIGN.md, source de vérité)
   Azur dominant + texte encre · plat au repos · profondeur par tramage
   Hallmark · genre: editorial · macrostructure: Map/Diagram
   · design-system: DESIGN.md · designed-as-app · pre-emit: P4 H5 E4 S4 R5 V4
   ========================================================================= */

/* ---------- Polices (Libre Franklin, auto-hébergée) ----------
   Self-host des woff2 plutôt que le CDN Google : supprime le transfert d'IP du
   visiteur vers Google (RGPD/CNIL) et la dépendance réseau tierce sur le chemin du
   LCP. Police variable : un seul fichier (latin) couvre les poids 400 à 700 ;
   latin-ext n'est téléchargé qu'à la demande (unicode-range). Ranges repris à
   l'identique de la feuille Google d'origine. */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/libre-franklin-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Couleurs */
  --azur: #0babdc;
  --azur-deep: #067a9e;
  --azur-tint: #e3f4fa;
  --cyan: #1cbced;
  --indigo: #232a74;
  --ink: #242424;
  --slate: #636363;
  --bg: #ffffff;
  --surface: #eceff1;
  --surface-soft: #f5f7f8;
  --hairline: #dcdcde;
  --mint: #e4f0e7;
  --on-fill: #ffffff;

  /* Statuts sessions (couleur + libellé texte, jamais couleur seule) */
  --status-ok: #1b6b3a;
  --status-warn: #8a5a12;
  --status-full: #c62828;
  --status-last: #b3261e;
  --status-last-bg: #fdecea;
  /* Or fonctionnel des étoiles de notation (convention universelle du rating),
     unique usage de cette teinte. */
  --rating: #f4b400;

  /* Typographie */
  --font-display: "Libre Franklin", system-ui, sans-serif;
  --font-title: "Libre Franklin", Arial, sans-serif;
  --font-body: "Libre Franklin", system-ui, sans-serif;

  /* Échelle ancrée sur le hero (référence) : le h1 du hero est l'apex de la
     page ; tous les autres paliers se rangent strictement en dessous.
     Paliers max : 3.2 (display) → 2.05 (headline) → 1.45 (title) → 1.2 (subtitle) → 1 (body).
     Le saut display/headline (~1.56) est volontairement net : un seul apex, assumé. */
  --fs-display: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem);
  --fs-headline: clamp(1.5rem, 1.1rem + 1.05vw, 2.05rem);
  --fs-title: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem);
  --fs-subtitle: clamp(1.05rem, 0.95rem + 0.45vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;

  /* Rayons */
  --r-sm: 5px;
  --r-pill: 30px;

  /* Rythme d'espacement, échelle 4pt */
  --space-2xs: 0.5rem;   /* 8  */
  --space-xs: 0.75rem;   /* 12 */
  --space-sm: 1rem;      /* 16 */
  --space-md: 1.5rem;    /* 24 */
  --space-lg: 2rem;      /* 32 */
  --space-xl: 3rem;      /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --space-section-tight: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --container: 78rem;
  --container-wide: 88rem;

  /* Élévation (réponse à un état uniquement) */
  --lift: 0 8px 24px rgba(11, 171, 220, 0.14);

  /* Z-index sémantique */
  --z-toolbar: 20;
  --z-stickybar: 30;
  --z-header: 40;
  --z-mobilenav: 60;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(5.5rem + env(safe-area-inset-top)); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* L'attribut hidden doit gagner sur tout display auteur (.ses { display: grid }, .btn…) :
   la règle UA [hidden] est sinon écrasée et le filtrage en place d'agenda.js (el.hidden = true)
   n'a aucun effet visuel. Garde verrouillée par tests/StylesTest.php. */
[hidden] { display: none !important; }

/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.1; text-wrap: balance; }
h1 { font-family: var(--font-display); }
/* Tracking resserré sur le palier headline (cf. hero h1 à -0.022em, DESIGN.md headline -0.01em). */
h2 { letter-spacing: -0.01em; }
p { text-wrap: pretty; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-left: max(clamp(1.25rem, 0.5rem + 3vw, 2.5rem), env(safe-area-inset-left)); padding-right: max(clamp(1.25rem, 0.5rem + 3vw, 2.5rem), env(safe-area-inset-right)); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-section-tight); }
.section--surface { background: var(--surface-soft); }
.section--tint { background: var(--azur-tint); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.section-head h2 { font-size: var(--fs-headline); }
.section-head p { color: var(--slate); margin-top: 0.75rem; max-width: 54ch; }
.section-head p.measure { color: var(--ink); max-width: 57ch; }
/* Variante centrée : pour les sections dont le contenu remplit toute la largeur
   (grille symétrique, tableau). Crée un rythme alterné avec les têtes alignées à gauche. */
.section-head--center { max-width: 52rem; margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head--center p.measure { max-width: 57ch; }
/* Variante deux colonnes : titre à gauche, paragraphe d'explication à droite.
   Pour les intros longues qui restent plus lisibles alignées à gauche. */
.section-head--split { max-width: none; }
.section-head--split .head-title { margin: 0; }
.section-head--split p.measure { margin-top: var(--space-md); }
@media (min-width: 60rem) {
  .section-head--split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: end; }
  .section-head--split p.measure { margin-top: 0; max-width: 56ch; }
}
.measure { max-width: 57ch; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--on-fill);
  padding: 0.6rem 1rem; border-radius: var(--r-sm);
  transition: top 0.2s var(--ease-out-quart);
}
.skip-link:focus { top: 1rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.02em;
  padding: calc(0.7em + 4px) calc(1.5em + 4px);
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  box-shadow: none;
  transition: background-color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--azur); color: var(--ink); }
/* Lift au survol (Règle du Plat au Repos : l'ombre ne répond qu'à un état).
   Réservé au CTA primaire ; le press (:active) repose le bouton à plat. */
.btn--primary:hover { background: var(--cyan); transform: translateY(-2px); box-shadow: var(--lift); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--azur); }
.btn--secondary:hover { background: var(--surface); }
.btn--block { width: 100%; }
.btn--lg { font-size: 0.9375rem; padding: calc(0.85em + 4px) calc(1.8em + 4px); }

.textlink {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--azur-deep); font-weight: 600;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s var(--ease-out-quart);
  width: fit-content;
}
.textlink:hover { border-bottom-color: var(--azur-deep); }
.textlink .chev { transition: transform 0.2s var(--ease-out-quart); }
.textlink:hover .chev { transform: translateX(3px); }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-label); font-weight: 500; color: var(--slate);
  background: var(--surface); border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem; white-space: nowrap;
}
.badge--mint { background: var(--mint); color: var(--ink); }

.checks { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); color: var(--slate); }
.check svg { color: var(--azur-deep); flex-shrink: 0; }
.check strong { color: var(--ink); }

/* =========================================================================
   Bandeau réglementaire
   ========================================================================= */
.banner {
  background: var(--azur-tint); color: var(--ink);
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--hairline);
}
.banner .container { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; padding-block: 0.6rem; text-align: center; }
/* Sur le fond azur-voile, azur-deep tombe à 4.34:1 en petit corps (< AA 4.5) : le lien
   passe en encre soulignée d'azur profond (texte 13.7:1, soulignement graphique 4.34 > 3). */
.banner a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--azur-deep); }
.banner a:hover { border-bottom-color: var(--ink); }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.85rem; padding-top: max(0.85rem, env(safe-area-inset-top)); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 3.25rem; width: auto; }

.nav-main { display: none; }
.nav-main ul { display: flex; align-items: center; gap: clamp(0.75rem, 0.3rem + 1.2vw, 1.6rem); }
.nav-main a {
  font-size: var(--fs-small); font-weight: 500; color: var(--slate);
  padding-block: 0.4rem; border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}
.nav-main a:hover, .nav-main a[aria-current="page"] { color: var(--azur-deep); border-bottom-color: var(--azur); }
/* Première lecture : les deux formations passent en gras encre ; les pages info
   restent en slate, plus léger. Un filet vertical sépare les deux niveaux. */
.nav-main a.nav-main__primary { font-weight: 700; color: var(--ink); }
.nav-main__sep { align-self: center; width: 1px; height: 1.15rem; background: var(--hairline); flex-shrink: 0; }
/* Lien « Prochaines dates » : accent calendrier devant le libellé (nav + mobile). */
.nav-dates { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-dates svg { flex-shrink: 0; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Téléphone = action du header, dans le bouton outline (remplace « Être rappelée »).
   Icône seule (cible 44px) sous 22rem, icône + numéro au-delà. tel: cliquable,
   tap-to-call sur mobile pour une audience surtout mobile. */
.header-phone { min-height: 44px; white-space: nowrap; }
.header-phone svg { flex-shrink: 0; }
.header-phone__num { display: none; }
@media (min-width: 22rem) { .header-phone__num { display: inline; } }

.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
.nav-toggle svg { color: var(--ink); }

/* Menu mobile (panneau) */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-mobilenav);
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.32s var(--ease-out-quart);
  display: flex; flex-direction: column;
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; padding: max(0.85rem, env(safe-area-inset-top)) clamp(1.25rem, 0.5rem + 3vw, 2.5rem) 0.85rem; border-bottom: 1px solid var(--hairline); }
.mobile-nav__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.mobile-nav ul { padding: 1rem clamp(1.25rem, 0.5rem + 3vw, 2.5rem); display: flex; flex-direction: column; }
.mobile-nav li { border-bottom: 1px solid var(--hairline); }
.mobile-nav a { display: block; padding: 1rem 0.25rem; font-family: var(--font-title); font-weight: 500; font-size: 1.15rem; }
/* Groupe « Formations » en première lecture : libellé sobre + deux formations en gras. */
.mobile-nav__label { border-bottom: none; padding: 1rem 0.25rem 0.35rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.mobile-nav a.is-primary { font-weight: 700; }
.mobile-nav__cta { padding: 1.5rem clamp(1.25rem, 0.5rem + 3vw, 2.5rem) max(1.5rem, calc(1.5rem + env(safe-area-inset-bottom))); margin-top: auto; }
.scroll-locked { overflow: hidden; }

/* =========================================================================
   Hero
   ========================================================================= */
/* Le voile azur porte toute la bande du hero (il fusionne avec le bandeau
   réglementaire en dessous) : une seule entrée en matière, assumée, au lieu
   d'un wash qui s'éteint à mi-hauteur. */
.hero { background: linear-gradient(170deg, var(--azur-tint) 0%, var(--bg) 100%); border-bottom: 1px solid var(--hairline); overflow: clip; }
/* Budget vertical serré : la bande de confiance doit rester visible au-dessus
   du pli sur un laptop courant (~800px de viewport utile). */
.hero .container { padding-block: clamp(2.25rem, 1.25rem + 2.5vw, 3.75rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
/* La carte est le diagramme organisateur de la page : la grille lui donne la
   colonne majeure en desktop ; en mobile la copy reste première en lecture. */
.hero__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; }
.hero__copy { min-width: 0; max-width: 46rem; }
/* Display : l'apex de la page, dimensionné pour commander la hiérarchie
   (saut ~1.56 sur le headline), interligne et tracking resserrés. */
.hero h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.022em; }
.hero h1 .hl { color: var(--azur-deep); }
/* Rythme en deux clusters : [titre→lede] serré, rupture, [CTA→assist] serré, filet, trust. */
/* Lede nettement secondaire au titre : taille propre, plus petite que --fs-subtitle,
   pour de l'air sous le display sans concurrencer le h1. */
.hero__lede { font-size: var(--fs-subtitle); line-height: 1.5; color: var(--ink); margin-top: var(--space-sm); max-width: 48ch; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: var(--space-lg); }
/* Sous ~432px les deux CTA ne tiennent plus sur une ligne et wrappent en deux
   lignes inégales : on les empile pleine largeur (cohérent avec le CTA mobile). */
@media (max-width: 27rem) {
  .hero__actions { flex-direction: column; align-items: stretch; }
}
/* Microcopy secondaire : un cran sous le lede (ardoise), interligne resserré pour
   se lire comme un bloc. La réassurance « Sans engagement. » reste en encre. */
.hero__assist { font-size: var(--fs-small); line-height: 1.5; color: var(--slate); margin-top: var(--space-sm); max-width: 52ch; }
.hero__assist strong { font-weight: 700; color: var(--ink); }
/* Bande de confiance pleine largeur sous la grille : Qualiopi + faits produit,
   posés sur un filet qui referme le hero (plus un appendice de la colonne copy). */
.hero__trust { display: flex; align-items: center; gap: 0.75rem 1.75rem; flex-wrap: wrap; margin-top: clamp(1.25rem, 1rem + 0.75vw, 1.75rem); padding-top: var(--space-sm); border-top: 1px solid var(--hairline); }
.hero__qualiopi { height: 2rem; width: auto; flex-shrink: 0; }
.hero__figure { position: relative; min-width: 0; isolation: isolate; }
/* Carte SVG inline (villes ciblables individuellement). Plafonnée aussi en vh :
   sur un écran peu haut, la carte cède de la hauteur plutôt que de pousser la
   bande de confiance sous le pli. */
.hero__figure--map .hero-map { display: block; width: 100%; height: auto; max-height: min(30rem, 56vh); }
/* Légende fonctionnelle : dit comment lire le diagramme (chaque point répond).
   La pastille reprend la géométrie du marqueur (azur profond cerclé de blanc). */
.hero__legend { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: var(--space-sm); font-size: var(--fs-small); color: var(--slate); }
.hero__legend-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--azur-deep); box-shadow: 0 0 0 2px var(--bg); flex-shrink: 0; }
@media (max-width: 59.99rem) { .hero__figure--map .hero-map { max-height: 22rem; } }
.hero-map a { cursor: pointer; }
/* Couleurs des marqueurs de ville : source unique pour les deux rendus (serveur
   sur la home, MTAMap.marker sur la page sessions). La géométrie reste en
   attributs (r, opacity varient avec l'état sélectionné côté JS). */
/* Tracé de la métropole : couleur centralisée pour les deux cartes (hero + agenda),
   stroke aligné sur le token azur. Le fond reste une teinte de carte propre. */
.france-land { fill: #cfeaf4; stroke: var(--azur); }
.city-halo { fill: var(--azur); }
.city-dot { fill: var(--azur-deep); stroke: var(--bg); stroke-width: 2; }
.city.is-selected .city-dot { fill: var(--azur); }
/* Survol/focus d'une ville : le halo s'élargit comme une impulsion de lumière
   (métaphore IPL), le point grossit, le libellé s'encre d'azur profond. Chaque
   ville est un lien vers ses sessions : l'exploration de la carte répond. */
.hero-map .city-halo, .hero-map .city-dot {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.25s var(--ease-out-quart), opacity 0.25s var(--ease-out-quart);
}
.hero-map .city-label { fill: var(--ink); transition: fill 0.25s var(--ease-out-quart); }
.hero-map a:hover .city-halo, .hero-map a:focus-visible .city-halo { transform: scale(1.8); opacity: 0.3; }
.hero-map a:hover .city-dot, .hero-map a:focus-visible .city-dot { transform: scale(1.25); }
.hero-map a:hover .city-label, .hero-map a:focus-visible .city-label { fill: var(--azur-deep); }
/* Delight : à l'apparition de la carte, les villes s'allument une à une, de la
   plus importante (Paris) à la moins (--o = rang d'importance porté par <g>).
   Fade de groupe = l'opacité du halo (0.16) est préservée. One-shot, pas de
   boucle. Éteint si reduced-motion (gating .js-motion + bloc plus bas). */
.js-motion .hero-map .city {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: city-in 0.55s var(--ease-out-quart) both;
  animation-delay: calc(var(--o) * 0.11s);
}
@keyframes city-in {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* =========================================================================
   Tableau comparatif
   ========================================================================= */
.compare-wrap { border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 30rem; }
.compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.compare thead th { background: var(--azur); color: var(--ink); font-family: var(--font-title); font-weight: 700; vertical-align: middle; }
/* Case d'angle rattachée à la colonne de gauche (même fond que les libellés de critères). */
.compare thead th.corner { background: var(--surface-soft); color: var(--ink); font-weight: 700; font-size: var(--fs-small); }
/* En-tête compact : « Formation » léger + nom en gras, sur une seule ligne. */
.compare thead .form-kind { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); }
.compare thead .form-name { font-size: var(--fs-subtitle); }
.compare th, .compare td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--hairline); }
.compare th[scope="row"] { font-weight: 600; color: var(--ink); width: 32%; background: var(--surface-soft); }
.compare td { color: var(--slate); border-left: 1px solid var(--hairline); }
.compare thead th + th { border-left: 1px solid rgba(255,255,255,0.35); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare td strong { color: var(--ink); }
/* Prix : même encre colorée que le prix des fiches (offer__net). Un seul critère
   porte la couleur dans le corps du tableau : celui qui décide. */
.compare td strong.price { color: var(--azur-deep); }
/* Sous-titres de groupe : segmentent le tableau par type de renseignement (programme, technologie...). */
.compare-group th {
  text-align: left; background: var(--azur-tint); color: var(--azur-deep);
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-small);
  padding: 0.55rem 1.1rem;
}
/* Ligne CTA du tableau : un bouton par formation, sous sa colonne. */
.compare tfoot td { padding: 1rem 1.1rem; text-align: center; vertical-align: middle; border-top: 1px solid var(--hairline); border-bottom: none; }
.compare tfoot td.corner { background: var(--surface-soft); border-left: none; }
.compare tfoot .btn { margin: 0; }
/* Ligne Disponibilité : épingle azur devant le nombre de villes. */
.ville-cell { display: inline-flex; align-items: center; gap: 0.4rem; }
.ville-cell .ville-pin { color: var(--azur-deep); flex-shrink: 0; }

/* =========================================================================
   Mécanisme (split texte + image)
   ========================================================================= */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
.split__copy { min-width: 0; }
.split__copy h2 { font-size: var(--fs-headline); }
.split__copy p { color: var(--ink); margin-top: 1rem; max-width: 52ch; }
.split__copy p.lede { font-size: var(--fs-subtitle); color: var(--ink); }
/* Exergue de section : le claim ownable (« Plus d'heures sur la peau... ») est le
   h2 de la bande mécanisme, posé seul avant la grille. Palier headline (le display
   du hero reste le seul apex) ; la présence vient de l'isolement, pas de l'échelle. */
.claim { font-size: var(--fs-headline); max-width: 30ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); text-wrap: balance; }
.claim .hl { color: var(--azur-deep); }
.split__cities { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
/* Badges de villes : des repères épinglés (écho des marqueurs azur profond de la
   carte du hero), pas des métadonnées grises. Surface blanche sur le fond tramé,
   texte encre, point azur profond en tête. */
.split__cities .badge { background: var(--bg); border: 1px solid var(--hairline); color: var(--ink); }
.split__cities .badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--azur-deep); flex-shrink: 0; }
.split__figure img { width: 100%; aspect-ratio: 1400 / 933; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--hairline); }
/* Légende factuelle sous la photo : même voix que la légende de la carte du hero. */
.split__figure figcaption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--slate); }

/* =========================================================================
   Preuve sociale
   ========================================================================= */
/* Chiffres de preuve composés dans la phrase : chiffre azur profond gras,
   libellé encre au même corps. Pas de cartes gros-chiffre/petit-label
   (template SaaS banni par DESIGN.md). */
.proof-figures { font-size: var(--fs-subtitle); max-width: 60ch; margin-bottom: var(--space-lg); }
.proof-figures strong { color: var(--azur-deep); }
/* Témoignages : cartes plates au repos, avatar monogramme azur (pas de photo
   stock), 5 étoiles azur (notes vérifiées sur la fiche Google). Tenu sobre,
   pas de surenchère (cf. DESIGN.md). */
.testimonials { display: grid; gap: var(--space-md); }
.testimonial {
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--space-lg);
}
/* Étoiles en or (convention universelle du rating : en azur elles se lisaient
   comme un décor, pas comme une note). Usage fonctionnel unique de cette teinte,
   doublé d'un « 5/5 » texte (la couleur n'est jamais seule porteuse de sens). */
.testimonial__stars { display: inline-flex; align-items: center; gap: 0.15rem; color: var(--rating); }
.testimonial__stars svg { width: 1.05rem; height: 1.05rem; }
.testimonial__score { margin-left: 0.3rem; font-family: var(--font-title); font-weight: 700; font-size: var(--fs-label); color: var(--slate); }
.testimonial blockquote { margin: 0; color: var(--ink); font-size: var(--fs-small); }
.testimonial__who { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; padding-top: var(--space-2xs); }
.testimonial__avatar {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  background: var(--azur-tint); color: var(--azur-deep); border-radius: 50%;
  font-family: var(--font-title); font-weight: 700; font-size: 0.95rem;
}
.testimonial__id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.testimonial__name { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
.testimonial__meta { font-size: var(--fs-label); color: var(--slate); }
.proof-disclaimer { font-size: var(--fs-label); color: var(--slate); max-width: 65ch; }
/* Paires d'avis (fiches formation) : 2 colonnes, largeur contenue. La mention
   de provenance porte sa propre marge. */
.testimonials--two { max-width: 52rem; }
.testimonials--two + .proof-disclaimer { margin-top: var(--space-sm); }
@media (min-width: 60rem) {
  .testimonials--two { grid-template-columns: repeat(2, 1fr); }
}
/* Citations de l'accueil : composition éditoriale à filets, pas une grille de
   cartes clonées. La voix principale en grand à gauche, deux voix en colonne à
   droite ; séparation par filets, plat sur le fond tramé (cf. DESIGN.md). */
.quotes { display: grid; gap: var(--space-lg); }
.quotes + .proof-disclaimer { margin-top: var(--space-lg); }
.testimonial--bare { background: transparent; border: none; border-radius: 0; padding: 0; }
.testimonial--bare blockquote { font-size: var(--fs-body); }
.testimonial--lead blockquote { font-size: var(--fs-title); font-weight: 400; line-height: 1.45; text-wrap: balance; max-width: 30ch; }
.quotes__side { display: grid; gap: var(--space-lg); align-content: start; }
.quotes__side .testimonial--bare { border-top: 1px solid var(--hairline); padding-top: var(--space-lg); }
@media (min-width: 60rem) {
  .quotes { grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
  .quotes__side { border-left: 1px solid var(--hairline); padding-left: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
  .quotes__side .testimonial--bare:first-child { border-top: none; padding-top: 0; }
}

/* =========================================================================
   Bloc pré-inscription
   ========================================================================= */
.signup { background: var(--azur-tint); border-top: 1px solid var(--hairline); }
.signup .container { max-width: 50rem; }
.signup__head { text-align: center; max-width: 40rem; margin-inline: auto; margin-bottom: 2rem; }
.signup__head h2 { font-size: var(--fs-headline); }
.signup__head p { color: var(--ink); margin-top: 0.75rem; }
.form-card { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.form-grid { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--fs-label); font-weight: 600; color: var(--ink); }
.field input, .field select {
  font: inherit; font-size: var(--fs-small); color: var(--ink);
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 0.7rem 0.85rem; width: 100%;
  transition: border-color 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.field input::placeholder { color: var(--slate); }
.field input:focus, .field select:focus { outline: none; border-color: var(--azur); box-shadow: 0 0 0 3px rgba(11, 171, 220, 0.18); }
.field--full { grid-column: 1 / -1; }
.consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-small); color: var(--slate); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--azur); }
/* Petite pulsation au cochage du consentement : le seul engagement demandé
   sur la page répond d'un battement, sans fanfare. */
.consent input:checked { animation: consent-pop 0.25s var(--ease-out-quart); }
@keyframes consent-pop { 50% { transform: scale(1.25); } }
.consent a { color: var(--azur-deep); border-bottom: 1px solid var(--azur-deep); }
.form-card .btn { margin-top: 0.5rem; }
.form-note { font-size: var(--fs-small); color: var(--slate); text-align: center; margin-top: 0.75rem; max-width: 58ch; margin-inline: auto; }
.signup__reassure { display: flex; justify-content: center; gap: 1rem 1.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--surface-soft); border-top: 1px solid var(--hairline); }
.site-footer .container { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.footer-grid { display: grid; gap: 2rem; }
.footer-brand .brand { margin-bottom: 0.9rem; }
.footer-brand p { font-size: var(--fs-small); color: var(--slate); max-width: 30ch; }
.footer-col h3 { font-family: var(--font-title); font-size: var(--fs-small); font-weight: 700; margin-bottom: 0.85rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
/* padding-block : porte la cible tactile à >= 24px de haut (WCAG 2.2 AA 2.5.8) sans
   bouleverser le rythme de la colonne. */
.footer-col a { font-size: var(--fs-small); color: var(--slate); width: fit-content; padding-block: 0.25rem; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.footer-col a:hover { color: var(--azur-deep); border-bottom-color: var(--azur-deep); }
.footer-legal { border-top: 1px solid var(--hairline); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--slate); }

/* =========================================================================
   Motion (le contenu est visible par défaut ; le reveal est une surcouche)
   ========================================================================= */
.js-motion .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart); }
.js-motion .reveal.is-visible { opacity: 1; transform: none; }
.js-motion .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js-motion .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js-motion .reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js-motion .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 40rem) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (min-width: 60rem) {
  .nav-main { display: block; margin-left: auto; }
  /* Sépare franchement le groupe d'actions du groupe de liens : la nav reste serrée,
     les actions se détachent (groupement par l'espace, pas par une bordure). */
  .header-actions { margin-left: clamp(1.5rem, 0.5rem + 1.5vw, 2.5rem); }
  .nav-toggle { display: none; }
  .hero__grid { grid-template-columns: 0.95fr 1.05fr; }
  .split { grid-template-columns: 1.15fr 1fr; }
  .split--reverse .split__figure { order: -1; }
}

/* =========================================================================
   Prochaines sessions (liste pilotée par sessions.json)
   ========================================================================= */
.sessions__filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  margin-bottom: var(--space-md);
}
.seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-pill); overflow: hidden; background: var(--bg); }
.seg__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--slate); padding: 0.6rem 1.1rem; min-height: 44px;
  transition: background 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}
.seg__btn + .seg__btn { border-left: 1px solid var(--hairline); }
.seg__btn.is-active { background: var(--azur-deep); color: var(--on-fill); }
.sessions__ville select {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 0.6rem 0.9rem; min-height: 44px; max-width: 100%;
}

.sessions__list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
/* Ligne-session (cf. wireframe) : tag formation, date, ville, statut en texte + pastille,
   CTA. Empilée en mobile, alignée sur une rangée au-dessus de 48rem. */
.ses {
  display: grid; gap: 0.5rem 1rem; align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "form status"
    "date date"
    "ville ville"
    "cta cta";
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 1rem 1.15rem;
}
.ses__form { grid-area: form; justify-self: start; }
.ses__date { grid-area: date; font-size: var(--fs-body); }
.ses__ville { grid-area: ville; color: var(--slate); font-size: var(--fs-small); }
/* Statut : la couleur n'est jamais seule porteuse de sens (pastille + libellé texte, WCAG). */
.ses__status {
  grid-area: status; justify-self: end;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
}
.ses__status .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ses__status.is-ok { color: var(--status-ok); }
.ses__status.is-warn { color: var(--status-warn); }
.ses__status.is-full { color: var(--status-full); }
/* Dernière place : rareté réelle (places.remaining === 1), mise en avant FOMO sobre
   en pastille rouge pleine. La couleur n'est pas seule porteuse de sens (libellé texte). */
.ses__status.is-last {
  color: var(--status-last); font-weight: 700;
  background: var(--status-last-bg); padding: 0.2rem 0.65rem; border-radius: var(--r-pill);
}
.ses__cta { grid-area: cta; justify-self: stretch; padding: 0.7rem 1.2rem; } /* cible tactile >= 44px */

.sessions__more { text-align: center; margin-top: var(--space-md); }
.sessions__empty { color: var(--slate); margin-top: var(--space-sm); }
.sessions__fallback { color: var(--slate); font-size: var(--fs-small); max-width: 52ch; }

@media (min-width: 48rem) {
  .ses {
    grid-template-columns: auto minmax(11rem, auto) 1fr auto auto;
    grid-template-areas: "form date ville status cta";
    gap: 1.25rem;
  }
  .ses__ville { font-size: var(--fs-body); }
  .ses__status { justify-self: start; }
  .ses__cta { justify-self: end; }
}

/* =========================================================================
   Page Sessions : hero proximité, agenda groupé par mois, bande de réassurance
   ========================================================================= */

/* Chiffre accentué inline (ex. « 11 villes ») : dans une phrase, pas le
   template gros-chiffre / petit-label. */
.count { font-family: var(--font-title); font-weight: 700; color: var(--azur-deep); }

/* Pages où le titre de page est intégré à l'intro d'une section (ex-hero retiré : sessions, FAQ).
   Le H1 reste un cran sous le display de l'accueil ; intro et repères en dessous. */
main > .section:first-of-type:not(.hero) { padding-top: clamp(2rem, 1.25rem + 2vw, 3rem); }
.section-head h1 { font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.1rem); line-height: 1.15; letter-spacing: -0.018em; }
.section-head h1 .hl { color: var(--azur-deep); }
.section-head p.lede-strong { font-size: var(--fs-subtitle); line-height: 1.5; color: var(--ink); }
.section-head .checks { margin-top: var(--space-md); }
.section-head .faq-nav { margin-top: var(--space-md); }

/* =========================================================================
   Pages légales (mentions légales, CGV) : prose sobre, colonne étroite.
   ========================================================================= */
.legal { max-width: 80ch; }
.legal > * + * { margin-top: var(--space-sm); }
.legal h2 { font-family: var(--font-title); font-size: var(--fs-title); color: var(--ink); margin-top: var(--space-xl); }
.legal h2 + p, .legal h2 + ul, .legal h2 + .legal-meta { margin-top: var(--space-sm); }
.legal p, .legal li { color: var(--ink); }
.legal ul { list-style: disc; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.legal a { color: var(--azur-deep); border-bottom: 1px solid currentColor; word-break: break-word; }
.legal a:hover { color: var(--cyan); }
.legal .legal-updated { color: var(--slate); font-size: var(--fs-small); }
/* Encart d'identité (éditeur, hébergeur) : paire libellé / valeur sur fond doux. */
.legal-meta { padding: var(--space-md); background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-sm); display: grid; gap: 0.45rem; }
.legal-meta > div { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.legal-meta dt { font-weight: 700; color: var(--ink); }
.legal-meta dd { color: var(--ink); margin: 0; }

/* En-tête des sessions en deux colonnes : titre/intro à gauche, petite carte des
   villes disponibles à droite (en face). L'agenda (listes mensuelles) reste en
   pleine largeur en-dessous, hors de cette grille. Carte ~moitié du hero. */
.sessions-cols { display: grid; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.france-card { margin: 0; }
.france-map { display: block; width: 100%; max-width: 26rem; height: auto; max-height: 28rem; margin-inline: auto; }
/* Mobile : la carte est un repère, pas l'outil principal ; compacte, elle laisse la
   toolbar et la première date remonter vers la ligne de flottaison. */
@media (max-width: 59.99rem) { .france-map { max-height: 14rem; } }
.france-map .city { cursor: pointer; }
.france-map .city-label { fill: var(--ink); }
.france-map .city.is-selected .city-label { fill: var(--azur-deep); }
@media (min-width: 60rem) {
  .sessions-cols { grid-template-columns: 1fr minmax(18rem, 26rem); align-items: center; }
  .sessions-cols__head { grid-column: 1; min-width: 0; }
  .sessions-cols__map { grid-column: 2; }
}

/* Barre d'outils de l'agenda : filtres (formation, ville, mois) + réinitialiser.
   Sticky sous le header en desktop : sur ~150 lignes, re-filtrer ne doit pas
   exiger de tout remonter. Pas de sticky en mobile (la barre wrappe sur deux
   rangées et mangerait l'écran). */
.agenda-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: var(--space-sm); }
@media (min-width: 48rem) {
  .agenda-toolbar { position: sticky; top: 4.85rem; z-index: var(--z-toolbar); background: var(--bg); padding-block: 0.5rem; }
}
/* Avis de filtre (ex. ville réinitialisée car sans session pour la formation choisie). */
.agenda-notice { font-size: var(--fs-small); color: var(--ink); background: var(--azur-tint); border-radius: var(--r-sm); padding: 0.5rem 0.85rem; margin: 0 0 var(--space-sm); width: fit-content; max-width: 100%; }
.filter-reset { font-size: var(--fs-small); color: var(--azur-deep); font-weight: 600; border-bottom: 1.5px solid transparent; min-height: 44px; }
.filter-reset:hover { border-bottom-color: var(--azur-deep); }
.agenda-count { font-size: var(--fs-small); color: var(--slate); margin: 0 0 var(--space-md); }
.agenda-count strong { color: var(--ink); font-family: var(--font-title); }

/* Agenda : suite de groupes mensuels reliés par un filet de mois, pas une grille
   de cartes. Le temps structure la liste ; les lignes-sessions réutilisent .ses. */
.agenda { display: flex; flex-direction: column; gap: var(--space-xl); }
.agenda__month-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--font-title); font-size: var(--fs-title); font-weight: 700; color: var(--ink);
  padding-bottom: 0.6rem; margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}
.agenda__month-count { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; color: var(--slate); white-space: nowrap; }

/* Bande de rappel (aucune date ne convient). */
.recall { background: var(--surface-soft); }
.recall .container { max-width: 60rem; text-align: center; padding-block: var(--space-xl); }
.recall p { font-size: var(--fs-subtitle); color: var(--ink); max-width: 60ch; margin-inline: auto; }
.recall a { color: var(--azur-deep); font-weight: 600; border-bottom: 1.5px solid var(--azur-deep); }

/* Encart Combo (cross-sell sous le tableau comparatif de l'accueil) : bande douce,
   texte à gauche, prix + CTA à droite ; passe en colonne quand l'espace manque. */
.combo-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.combo-cta__body { flex: 1 1 22rem; }
.combo-cta__body h2 { margin: 0 0 var(--space-2xs); }
.combo-cta__body p { margin: 0; max-width: 56ch; }
.combo-cta__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.combo-cta__price { font-size: var(--fs-subtitle); color: var(--ink); }
.combo-cta__price strong { color: var(--azur-deep); font-size: var(--fs-title); }

/* Contexte de la demande, rempli au clic sur une session, au-dessus du formulaire. */
.session-context { align-items: center; gap: 0.6rem; background: var(--mint); color: var(--ink); border-radius: var(--r-sm); padding: 0.7rem 1rem; font-size: var(--fs-small); margin-bottom: var(--space-md); }
.session-context.is-shown { display: flex; }
/* Le contexte de demande apparaît en douceur quand une session vient d'être
   choisie : le formulaire accuse réception, il ne surgit pas. */
.js-motion .session-context.is-shown { animation: faq-reveal 0.3s var(--ease-out-quart) both; }
.session-context svg { color: var(--azur-deep); flex-shrink: 0; }

/* Extrait d'agenda (accueil) : tête posée sur un filet (écho du filet de mois de
   l'agenda), compteur factuel à droite, trois lignes .ses réelles, CTA de section
   en sortie. De vraies dates plutôt qu'un panneau d'annonce. */
.glimpse-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap;
  padding-bottom: 0.75rem; margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline);
}
.glimpse-head h2 { font-size: var(--fs-headline); }
.glimpse-head__count { font-size: var(--fs-small); color: var(--slate); white-space: nowrap; }
.glimpse-head__count strong, .glimpse-head__count [data-city-count] { font-family: var(--font-title); font-weight: 700; color: var(--azur-deep); }
.glimpse-empty { color: var(--slate); max-width: 57ch; }
.glimpse-more { display: flex; justify-content: flex-end; margin-top: var(--space-md); }
@media (max-width: 27rem) { .glimpse-more .btn { width: 100%; } }

/* =========================================================================
   Page FAQ : sommaire d'ancres + accordéons natifs <details> par thème
   La couleur n'est jamais seule porteuse de sens ; tout est lisible et
   navigable sans JS (les <details> s'ouvrent nativement). Le reveal n'est
   qu'une surcouche .js-motion, neutralisée en reduced-motion (bloc global).
   ========================================================================= */

/* Sommaire : pastilles d'ancres vers les 4 thèmes, dans le hero. */
.faq-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.faq-nav a {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 44px;
  font-size: var(--fs-small); font-weight: 600; color: var(--azur-deep);
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 0.55rem 0.95rem;
  transition: background 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.faq-nav a:hover { background: var(--azur-tint); border-color: var(--azur); }

/* Un thème = un titre souligné d'un filet + une pile d'accordéons. */
.faq-group { scroll-margin-top: calc(6rem + env(safe-area-inset-top)); }
.faq-group + .faq-group { margin-top: var(--space-2xl); }
.faq-group__title {
  font-family: var(--font-title); font-size: var(--fs-title); font-weight: 700; color: var(--ink);
  padding-bottom: 0.6rem; margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline);
}
.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }

.faq-item { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.faq-item[open] { border-color: var(--azur); }
/* La question = le summary cliquable. On supprime le marqueur natif (triangle)
   au profit d'un chevron azur qui pivote. Cible tactile >= 44px. */
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.2rem; min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-subtitle); color: var(--ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--azur-deep); }
.faq-q:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; border-radius: var(--r-sm); }
.faq-chev { flex-shrink: 0; color: var(--azur-deep); transition: transform 0.25s var(--ease-out-quart); }
.faq-item[open] .faq-q { border-bottom: 1px solid var(--hairline); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 1rem 1.2rem 1.2rem; }
.faq-a p { color: var(--ink); font-size: var(--fs-small); max-width: 57ch; }
.faq-a p + p { margin-top: 0.7rem; }
.faq-a ul.faq-a__list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.7rem; }
.faq-a ul.faq-a__list li { position: relative; padding-left: 1.1rem; color: var(--ink); font-size: var(--fs-small); }
.faq-a ul.faq-a__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--azur); }
.faq-a .textlink { margin-top: 0.85rem; }
.js-motion .faq-item[open] .faq-a { animation: faq-reveal 0.3s var(--ease-out-quart) both; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Façade vidéo (FAQ) : poster local + bouton play ; l'iframe YouTube (nocookie) ne
   remplace la façade qu'au clic. Sans JS, le poster est un lien vers YouTube. */
.video-facade { margin: var(--space-md) 0 0; max-width: 52rem; }
.video-facade__poster { position: relative; display: block; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--hairline); }
.video-facade__poster img { display: block; width: 100%; height: auto; }
.video-facade__play { position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; display: grid; place-items: center; background: var(--azur); color: var(--ink); border-radius: var(--r-pill); transition: background-color 0.2s ease, transform 0.2s var(--ease-out-quart); }
.video-facade__play svg { margin-left: 3px; } /* recentre optiquement le triangle */
.video-facade__poster:hover .video-facade__play { background: var(--cyan); transform: scale(1.07); }
.video-facade__poster:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.video-facade__caption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--slate); }
.video-facade iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  .video-facade__play { transition: none; }
  .video-facade__poster:hover .video-facade__play { transform: none; }
}

/* =========================================================================
   Fiche formation (formation-laser.html / formation-ipl.html)
   Titre intégré à la colonne de contenu (gauche) + carte CTA sticky (droite),
   détails en onglets pleine largeur dessous, barre CTA sticky en bas sur mobile.
   CRO : prix ancré, CTA persistant, programme scannable, dates au point de décision.
   Plat, azur, sans ombre. Pas de cartes imbriquées.
   ========================================================================= */
/* Espacement resserré propre aux fiches (la classe has-mobile-cta n'est que sur elles). */
.has-mobile-cta main > .section:first-of-type { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1rem, 0.75rem + 0.75vw, 1.5rem); }
.section:has(.tabs) { padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

/* Hero de fiche : voile azur signature (même matière que le hero d'accueil et le
   hero court de la page Sessions). La price-card blanche s'en détache par tramage,
   sans ombre : profondeur par surfaces, fidèle au système plat. */
.fiche-hero { background: linear-gradient(170deg, var(--azur-tint) 0%, var(--bg) 100%); border-bottom: 1px solid var(--hairline); }
.has-mobile-cta main > .section.fiche-hero { padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 4rem) clamp(2rem, 1.25rem + 2vw, 3.25rem); }
/* Sur le voile, le badge mint (pastel sur pastel) se délave : il repasse en blanc à filet. */
.fiche-hero .badge--mint { background: var(--bg); border: 1px solid var(--hairline); color: var(--ink); }

/* Intro : le H1 est l'apex de la fiche, un cran sous le display de la home. */
.fiche-intro h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.022em; max-width: 24ch; margin-top: 0.6rem; text-wrap: balance; }
.fiche-intro h1 .hl { color: var(--azur-deep); }
.fiche-intro__lede { font-size: var(--fs-subtitle); color: var(--ink); margin-top: 0.75rem; max-width: 52ch; }
.fiche-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.25rem; margin-top: var(--space-md); }
/* Récap mobile : reprend les repères de la price-card (masquée sous 64rem) pour
   qu'ils restent visibles au point de décision ; redondant dès que l'aside existe. */
.fiche-intro__specs { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--hairline); }
/* .spec-list (plus bas) repose display:flex à spécificité égale : on le double ici. */
@media (min-width: 64rem) { .spec-list.fiche-intro__specs { display: none; } }

/* Bloc prix + offre (carte sticky et barre mobile). Un seul mécanisme d'offre :
   le prix net + une mention datée. Jamais de compte à rebours ni d'empilement promo. */
.offer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.7rem; }
.offer__net { font-family: var(--font-title); font-weight: 700; color: var(--azur-deep); font-size: clamp(2.1rem, 1.7rem + 1.2vw, 2.6rem); line-height: 1; }
.offer__ht { color: var(--slate); font-size: var(--fs-small); }
.offer-note { margin-top: 0.6rem; display: flex; gap: 0.5rem; align-items: center; width: fit-content; max-width: 100%; background: var(--mint); color: var(--ink); border-radius: var(--r-pill); padding: 0.4rem 0.85rem; font-size: var(--fs-label); }
.offer-note svg { color: var(--azur-deep); flex-shrink: 0; }

/* Corps : contenu + carte sticky (desktop). Carte masquée sur mobile (relais : barre CTA fixe). */
.fiche-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); }
.fiche-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xl); }
.fiche-block + .fiche-block { margin-top: var(--space-2xl); }
.fiche-block h3 { font-size: var(--fs-title); }
.fiche-block > p { color: var(--ink); margin-top: 0.75rem; max-width: 57ch; }
.fiche-block > p.lede { font-size: var(--fs-subtitle); }
.fiche-block .spec-list { margin-top: var(--space-md); }
/* Panneau à deux blocs courts (Certification & financement) : côte à côte dès que
   la largeur le permet, sinon le texte flotte seul à gauche d'une colonne vide. */
@media (min-width: 52rem) {
  .fiche-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
  .fiche-cols .fiche-block + .fiche-block { margin-top: 0; }
}
.fiche-aside { display: none; }
@media (min-width: 64rem) {
  .fiche-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .fiche-aside { display: block; position: sticky; top: 5.75rem; }
}
.price-card { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.price-card__cta { margin-top: var(--space-md); }
.price-card .spec-list { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--hairline); }

/* Liste de specs (carte). Icône + libellé. */
.spec-list { display: flex; flex-direction: column; gap: 0.65rem; }
.spec-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-small); color: var(--ink); }
.spec-list svg { color: var(--azur-deep); flex-shrink: 0; margin-top: 0.1rem; }
.spec-list strong { font-weight: 700; }

/* Objectifs pédagogiques. */
.objectives { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.objective { display: flex; gap: 0.75rem; align-items: flex-start; }
.objective svg { color: var(--azur-deep); flex-shrink: 0; margin-top: 0.15rem; }
.objective p { color: var(--ink); }

/* Programme : liste plate (lecture simple, pas de cartes imbriquées dans le panneau). */
.prog-list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.prog-list li { padding: 0.85rem 0; border-top: 1px solid var(--hairline); }
.prog-list li:first-child { border-top: none; padding-top: 0.25rem; }
.prog-list__t { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.prog-list__name { font-family: var(--font-title); font-weight: 700; color: var(--ink); }
.prog-list__dur { color: var(--slate); font-size: var(--fs-small); white-space: nowrap; }
.prog-list li p { color: var(--ink); font-size: var(--fs-small); margin-top: 0.25rem; max-width: 57ch; }

/* Note secondaire : flexibilité des dates de pratique (cf. FAQ). */
.prog-flex { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: var(--space-md); color: var(--slate); font-size: var(--fs-small); max-width: 57ch; }
.prog-flex svg { color: var(--azur-deep); flex-shrink: 0; margin-top: 0.1rem; }

/* Deux étapes (théorie puis pratique) segmentées : pastilles numérotées reliées par un rail. */
.prog-steps { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xl); }
.prog-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.prog-step__num { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; background: var(--azur); color: var(--ink); border-radius: 50%; font-family: var(--font-title); font-weight: 700; position: relative; z-index: 1; }
.prog-step:not(:last-child)::before { content: ""; position: absolute; left: 1.125rem; top: 2.25rem; bottom: calc(-1 * var(--space-xl)); width: 2px; background: var(--hairline); }
.prog-step__body { min-width: 0; }
.prog-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; flex-wrap: wrap; }
.prog-step__head h4 { font-family: var(--font-title); font-size: var(--fs-title); font-weight: 700; color: var(--ink); }

/* Mécanisme de confiance + figure pratique (visuel officiel Med Tech Academy, jamais de fausse imagerie). */
.mecanisme { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-top: var(--space-md); }
@media (min-width: 52rem) { .mecanisme { grid-template-columns: 1fr 1fr; align-items: center; } }
.mecanisme p { color: var(--ink); }
.mecanisme p + p { margin-top: 0.75rem; }
/* Exergue : la phrase qui porte la promesse (« pas l'attestation ») pèse plus que le
   corps qui l'entoure. Hiérarchie par l'échelle et le poids, pas par la décoration. */
.mecanisme__claim { font-size: var(--fs-subtitle); font-weight: 600; line-height: 1.45; text-wrap: balance; }
.mecanisme p + .mecanisme__claim, .mecanisme .mecanisme__claim + p { margin-top: var(--space-sm); }
.mecanisme__figure { margin: 0; }
.mecanisme__figure img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--hairline); }

/* Modalités : faits avec icône de tête, en grille 2 colonnes. */
.facts { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
.facts .fact { display: flex; gap: 0.7rem; align-items: flex-start; }
.facts .fact > svg { color: var(--azur-deep); flex-shrink: 0; margin-top: 0.15rem; }
.facts .fact > div { min-width: 0; }
.fact h4 { font-family: var(--font-title); font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.fact p { font-size: var(--fs-small); color: var(--slate); margin-top: 0.3rem; }
.fact a { color: var(--azur-deep); border-bottom: 1px solid transparent; }
.fact a:hover { border-bottom-color: var(--azur-deep); }

/* Onglets façon dossier : onglet actif = carte blanche bordée rattachée au panneau.
   Repli sans JS : barre masquée, panneaux empilés (chacun avec son titre). */
.tabs__bar { display: none; }
.js-tabs .tabs__bar { display: block; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 0.3rem; position: relative; z-index: 1; }
/* Sous 34rem, 4 onglets ne tiennent pas sur une rangée : défilement horizontal.
   flex-wrap: nowrap évite le cassage du motif « dossier » (liseré haut actif). */
@media (max-width: 34rem) {
  .tabs__list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs__list::-webkit-scrollbar { display: none; }
}
.tabs__tab { appearance: none; cursor: pointer; font-family: var(--font-title); font-weight: 600; font-size: var(--fs-small); color: var(--slate); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 0.65rem 1.05rem; min-height: 44px; margin-bottom: -1px; transition: background 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart); }
.tabs__tab:hover { color: var(--ink); background: var(--surface); }
.tabs__tab[aria-selected="true"] { color: var(--azur-deep); background: var(--bg); border-color: var(--hairline); border-top: 2px solid var(--azur); padding-top: calc(0.65rem - 1px); }
.tabs__tab:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.tabs__panel { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.js-tabs .tabs__panel:not(.is-active) { display: none; }
.js-motion .js-tabs .tabs__panel.is-active { animation: faq-reveal 0.3s var(--ease-out-quart) both; }

/* Barre CTA fixe en bas (mobile uniquement). Masquée des 64rem (carte sticky prend le relais). */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-stickybar); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem clamp(1rem, 0.5rem + 3vw, 1.5rem) max(0.6rem, env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--hairline); }
.mobile-cta__price { display: flex; flex-direction: column; line-height: 1.15; }
.mobile-cta__price .net { font-family: var(--font-title); font-weight: 700; color: var(--azur-deep); }
.mobile-cta__price .ht { font-size: var(--fs-label); color: var(--slate); }
.mobile-cta .btn { flex-shrink: 0; }
body.has-mobile-cta { padding-bottom: max(4.75rem, calc(4.75rem + env(safe-area-inset-bottom))); }
@media (min-width: 64rem) { .mobile-cta { display: none; } body.has-mobile-cta { padding-bottom: 0; } }

/* =========================================================================
   Validation de formulaire (form-validate.js)
   ========================================================================= */
/* Honeypot anti-bot : retiré du flux et invisible, mais pas display:none ni
   visibility:hidden (certains bots ignorent ces champs) ni hors viewport seul. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field-error {
  display: block;
  font-size: var(--fs-small);
  color: var(--status-full);
  margin-top: 0.3rem;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--status-full);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
  outline: none;
}
.form-success {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: var(--space-lg);
}
.form-success svg { color: var(--azur-deep); flex-shrink: 0; margin-top: 0.1rem; }
.form-success__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-title); color: var(--ink);
}
.form-success__body { font-size: var(--fs-small); color: var(--slate); margin-top: 0.4rem; }
/* Variante page /merci (cible du Post-Redirect-Get) : bloc autonome, plus aéré. */
.form-success--page { padding: var(--space-xl) 0; max-width: 36rem; margin-inline: auto; }
.form-success--page .form-success__body { font-size: var(--fs-body); margin-bottom: 1.25rem; }
/* Message d'échec d'envoi (repli téléphone) : signalé en rouge statut. */
.form-send-failed { color: var(--status-full); }