/* mug/styles-fia.css — copie conforme de la feuille des landing pages
   (landing-page/formation-ia-dirigeant/styles-fia.css), déposée ici le
   25/09/2026 sur demande : « reprends le design et la structure des LP ».

   Convention du dépôt : chaque page porte SA copie de la feuille (les dix
   landing pages en ont une chacune). Cette page servait jusqu'ici
   styles-fia.optim.css, la feuille de l'accueil : mêmes classes, mais pas les
   mêmes jetons ni le même rythme de section, donc pas le même rendu. Elle
   rejoint la feuille des LP pour que le design soit le leur, pas une
   approximation.

   Ce qui reste dans mug.css : le hero, les annotations manuscrites, la modale
   de réservation, la signature tricolore, la barre de progression, les
   révélations, et les composants de LP qui vivent dans le <style> en ligne des
   LP (parti pris, cartes tarifaires, cas d'usage) — recopiés tels quels.
*/
/* polices auto-hébergées (assets/fonts) — voir styles-fonts-local.css chargé
   avant celle-ci dans le <head> ; fonts.gstatic.com est bloqué dans certains
   bacs à sable de test, donc l'auto-hébergement est aussi ce qui permet de
   vérifier le rendu réel. Gain de perf en prime : un domaine externe de
   moins à résoudre/connecter avant le premier texte visible. */

/* clip (pas hidden) : overflow-x:hidden sans overflow-y explicite force le
   navigateur à promouvoir overflow-y en "auto" (règle CSS overflow-3) ->
   <body> devient son propre conteneur de scroll, ce qui casse position:sticky
   sur tous ses descendants (dont le header, jamais réellement sticky malgré
   la règle déjà présente -> trouvé le 12/08 en vérifiant en direct, demande
   explicite "passer le header en sticky"). clip ne déclenche pas cette
   promotion. */
html, body { margin: 0; max-width: 100%; overflow-x: clip; }

.fia-page {
  /* LE BLEU DU LOGO, à l'échantillon près, comme les pages du site depuis la
     PR #169. Mesuré au pixel sur le fichier du logo (#437af4 sur 72 % de ses
     pixels bleus) et sur le favicon (#4379f2).

     Ces pages portaient le Brand Blue #4169E1 du Design System depuis le 13/08.
     C'est le `royalblue` du CSS : un arrondi du bleu du logo sur la couleur
     standard la plus proche qui passe le contraste, que le DS n'explique nulle
     part. Côme a refusé cet arrondi à l'œil le 09/09/2026, deux fois, puis a
     demandé que les landing pages suivent le site : « oui mets les landing
     pages sur le même bleu ».

     Ce que ça coûte, écrit ici pour que personne ne le « corrige » sans le
     savoir : #4379f2 fait 4,00:1 sur blanc, sous les 4,5:1 du niveau AA pour du
     texte de taille normale. Il passe le seuil du grand texte et celui des
     composants d'interface (3:1). La fidélité de marque l'emporte, c'est une
     décision prise en connaissance de cause. Ne pas assombrir cette variable
     sans l'accord de Côme. */
  --blue: #4379f2;
  /* Échelle bleue DS, palier 700. Depuis le 10/09/2026, uniquement des fonds
     de survol : le repos porte --blue, le pigment du logo (Tanguy). */
  --blue-dark: #1D4ED8;
  --blue-soft: #EFF6FF; /* DS Blue 50 */
  --cream: #FFFFFF; /* DS : "fond TOUJOURS blanc pur" — plus de aplat crème sur le footer */
  --ink: #111827; /* DS Dark/Ink */
  --muted: #4B5563; /* DS Gray 600 (body/légendes) */
  --dark: #1F2937; /* DS neutre 800 */
  --red: #EF4444; /* DS Brand Red, réservé aux aplats et aux gros éléments */
  --red-accessible: #DC2626; /* DS Red 600, pour tout TEXTE rouge (4,83:1 sur blanc) */
  --line: #E5E7EB; /* DS Gray 100 (bordures/séparateurs) */
  --radius-sm: 8px; /* DS : tabs */
  --radius: 12px; /* DS : rayon carte standard */
  --radius-lg: 16px; /* DS : carte proéminente (formulaire, bloc session) */
  --radius-pricing: 20px; /* DS : carte pricing/résumé */
  --radius-pill: 9999px; /* DS : badges, tags, pills */

  /* échelle typographique — valeurs mesurées sur la vraie page (l'échelle
     "nombre d'or" posée initialement était une invention mathématique, pas
     la réalité de Framer). */
  --t-1: 13px;
  --t0: 16px;
  --t1: 20px;
  --t2: 20px;
  --t3: 25px;
  --t4: 40px;
  --t5: 53px;

  --sp0: 16px;
  --sp1: 20px;
  --sp2: 26px;
  --sp3: 33px;
  --sp4: 42px;
  --sp5: 53px;
  --sp6: 68px;
  --sp7: 86px;
  --sp8: 110px;
  --sp9: 140px;

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.fia-page *, .fia-page *::before, .fia-page *::after { box-sizing: border-box; }
.fia-page img { max-width: 100%; height: auto; display: block; }
.fia-page a { color: inherit; text-decoration: none; }
/* DS : une seule famille (Inter) partout, y compris les titres — différenciés
   par le poids, pas par une police display séparée (Manrope retirée). */
.fia-page h1, .fia-page h2, .fia-page h3, .fia-page h4, .fia-page .fia-h2 { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ---- conteneurs & utilitaires ---- */
.fia-page .fia-wrap { max-width: clamp(1080px, 82vw, 1320px); margin: 0 auto; padding: 0 var(--sp2); }
/* fiches produits élargies (27/08, demande explicite : "les fiches produits sont
   trop étroites") : le wrap standard plafonne à ~1120px à 1366px d'écran (clamp
   1080px/82vw/1320px) - trop juste pour 3 cartes pricing (liste + bouton), tombées
   à ~334px chacune depuis le passage à 3 colonnes. Élargi UNIQUEMENT pour cette
   section (le reste de la page garde le wrap standard) : ~389px/carte à 1366px,
   jusqu'à ~460px sur grand écran. Padding interne des cartes (var(--sp4)) inchangé,
   c'est la largeur du conteneur qui bouge, pas celle de la carte elle-même. */
.fia-page .fia-section--pricing .fia-wrap { max-width: clamp(1080px, 94vw, 1500px); }
/* padding-top augmenté 80->110px (var(--sp8)) : les sections se suivaient
   sans assez d'air, lues comme "collées" les unes aux autres — la bordure
   entre deux sections est portée par bottom(N) + top(N+1), donc augmenter
   seulement le haut suffit à desserrer chaque frontière une seule fois
   plutôt que de la compter en double. Bas laissé à 80px (vérifié uniforme
   sur les 6 sections, aucune classe dérogatoire). */
.fia-page .fia-section { padding: var(--sp8) 0 80px; }
.fia-page .fia-eyebrow {
  /* police corrigée le 26/08 : le DS (branche docs) distingue explicitement 2 styles -
     "Eyebrow" (Inter, gras, majuscules) et un style SÉPARÉ "Mono / URL" (Courier New,
     réservé aux URL) - la police mono ici était une confusion entre les deux. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--t-1); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 var(--sp0);
}
.fia-page h2.fia-h2 { font-size: clamp(28px, 3.4vw, var(--t4)); line-height: 1.1; font-weight: 700; margin: 0 0 var(--sp1); letter-spacing: -.02em; }
.fia-page .fia-h2 em { font-style: normal; color: var(--blue); }
.fia-page .fia-lead { font-size: var(--t1); line-height: 1.2; font-weight: 300; color: var(--muted); max-width: 900px; margin: 0 0 var(--sp5); } /* poids corrigé 500->300 le 26/08 : le DS (branche docs) étiquette explicitement ce style "Lead · 300" */
.fia-page .fia-center { text-align: center; }
.fia-page .fia-center .fia-lead, .fia-page .fia-lead.fia-center { margin-left: auto; margin-right: auto; }

/* ---- boutons ---- */
/* bordure bleue fine (12/08, demande directe). Elle portait --blue-dark ;
   depuis le 10/09/2026 c'est --blue, le bleu du logo, comme tout le repos
   de la page (Tanguy). Ce qui suit décrit l'intention d'origine :
   var(--blue) - un contour de la même teinte que le fond se serait fondu
   dedans, invisible. */
.fia-page .fia-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: #fff; font-weight: 600; font-size: var(--t0);
  padding: var(--sp1) var(--sp3); border-radius: 10px; border: 1px solid var(--blue);
  box-shadow: 0 1px 2px 0 rgba(67,121,242,.3), 0 4px 12px 0 rgba(67,121,242,.18);
  transition: background .18s ease, transform .18s ease;
}
.fia-page .fia-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
.fia-page .fia-btn--ghost { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); box-shadow: none; }
.fia-page .fia-btn--ghost:hover { background: var(--blue-dark); color: #fff; }
.fia-page .fia-btn--outline { background: #fff; color: var(--ink); border: 1.5px solid var(--line); padding: var(--sp0) calc(var(--sp3) - var(--sp0)); box-shadow: none; }
.fia-page .fia-btn--outline:hover { background: #fff; color: var(--blue); border-color: var(--blue); }
/* session complète (01/09, correction directe : "UX quand non dispo gris") : le CTA
   perd son bleu d'incitation quand placesRestantes === 0, cf. rowHtml/plainRowHtml. */
.fia-page .fia-btn--muted { background: var(--muted); color: #fff; border-color: var(--muted); box-shadow: none; }
.fia-page .fia-btn--muted:hover { background: var(--muted); transform: none; }
/* modale de préqualification (01/09, mise en accord avec le Design System - "V2France IA
   - Design System.html", branche docs) : overlay teinté Ink (pas de gris hors palette),
   carte avec l'ombre bleutée .fia-elevated déjà utilisée sur le formulaire GHL de cette
   page (cohérence visuelle carte-flottante-sur-carte-flottante), transition d'apparition
   200ms ease-out sans rebond (DS §12 "Animations sobres"), anneau de focus bleu clair
   4px sur les options/le lien passer (DS §12 "Focus inputs : bordure #4169E1 + ring 4px
   #EFF6FF"), question en 22px/700 (taille de l'exemple H3 du DS, pas un choix arbitraire).
   2 questions à choix unique reprises des champs GHL setters, fermeture auto après la
   2e réponse ou via le lien "passer". */
.fia-page .fia-prequal { position: fixed; inset: 0; background: rgba(17,24,39,.6); display: flex; align-items: center; justify-content: center; padding: var(--sp3); z-index: 80; opacity: 0; transition: opacity .2s ease-out; }
.fia-page .fia-prequal[hidden] { display: none; }
.fia-page .fia-prequal.is-open { opacity: 1; }
.fia-page .fia-prequal__card { background: #fff; border-radius: var(--radius-lg); padding: var(--sp4); max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 60px -28px rgba(67,121,242,.4); transform: translateY(8px) scale(.98); transition: transform .2s ease-out; }
.fia-page .fia-prequal.is-open .fia-prequal__card { transform: translateY(0) scale(1); }
/* retour direct (01/09, capture à l'appui) : "padding faible entre le texte et le
   1er bouton" - cause réelle trouvée : `.fia-hero#hero p` (styles-fia.css et le <style>
   inline de cette page) remet à plat tout <p> dans la hero (margin:0, taille du DS de
   la hero), et gagne sur la spécificité face à mes règles à cause de l'ID #hero. Ces 2
   blocs sont passés de <p> à <div> dans le markup pour sortir de ce conflit, plutôt que
   d'entrer dans une course à la spécificité fragile. */
.fia-page .fia-prequal__eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin: 0 0 var(--sp1); }
.fia-page .fia-prequal__question { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 var(--sp3); }
.fia-page .fia-prequal__options { display: flex; flex-direction: column; gap: 14px; }
/* retour direct (01/09, capture à l'appui) : "le padding est faible" - les boutons
   héritaient du padding compact de .fia-btn--outline (pensé pour un CTA inline), trop
   serré pour des réponses de quiz empilées en pleine largeur. Padding propre, plus
   généreux, chiffres DS (var(--sp1)/var(--sp2)). */
.fia-page .fia-prequal__opt { width: 100%; padding: var(--sp1) var(--sp2); font-size: 15px; }
.fia-page .fia-prequal__opt:focus-visible, .fia-page .fia-prequal__skip:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.fia-page .fia-prequal__steps { display: flex; justify-content: center; gap: 6px; margin: var(--sp3) 0 var(--sp2); }
.fia-page .fia-prequal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.fia-page .fia-prequal__dot.is-active { background: var(--blue); }
.fia-page .fia-prequal__skip { display: block; margin: 0 auto; background: none; border: none; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
@media (max-width: 480px) { .fia-page .fia-prequal__card { padding: var(--sp3); } }
@media (prefers-reduced-motion: reduce) { .fia-page .fia-prequal, .fia-page .fia-prequal__card { transition: none; } }
.fia-page .fia-cta-row { display: flex; margin-top: var(--sp5); }

/* ---- header ----
   backdrop-filter sur un élément sticky force le navigateur à recomposer le
   flou à chaque frame de scroll (jank vécu). Fond quasi opaque à la place. */
.fia-page .fia-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--line);
}
.fia-page .fia-nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.fia-page .fia-nav__logo img { height: 46px; }
.fia-page .fia-nav__links { display: flex; align-items: center; gap: 28px; }
.fia-page .fia-nav__links a:not(.fia-btn) { font-weight: 500; color: var(--muted); }
.fia-page .fia-nav__links a:not(.fia-btn):hover { color: var(--ink); }

/* ---- hero ---- */
/* padding-top uniformisé le 12/08 sur le rythme sitewide (var(--sp8), 110px,
   identique au padding-top de .fia-section) : un style="padding-top:32px"
   posé en inline sur la section écrasait tout, laissant un écart header/hero
   deux fois plus faible que partout ailleurs sur la page.
   Réduit de moitié (12/08, 2e retour) : 110px jugé trop généreux une fois vu
   en vrai - ramené à --sp8/2 (55px) plutôt qu'une valeur en dur, pour rester
   une fraction lisible du même rythme sitewide (uniformisé desktop+mobile,
   voir la media query plus bas). */
/* padding top augmenté 55->68px (var(--sp6)) le 25/08 : trop serré contre le header
   (demande explicite "le padding semble faible", capture à l'appui). */
.fia-page .fia-hero { padding: var(--sp6) 0 80px; background: #fff; }
.fia-page .fia-hero__proof { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.fia-page .fia-hero__proof img.fia-cpf { height: 62px; width: auto; }
.fia-page .fia-hero__proof img.fia-stationf { height: 30px; width: auto; }
.fia-page .fia-hero__tp { max-width: 240px; }
/* align-items:stretch (pas start) : la colonne texte est nettement plus courte
   que le formulaire (mesuré : ~600px de contenu contre ~760px pour le
   formulaire) -> avec "start" ça laissait ~166px de vide en bas de la colonne
   gauche avant la section suivante. Étirée + .fia-hero__text-col en
   justify-content:space-between, le texte se répartit sur toute la hauteur
   au lieu de laisser un blanc mort. */
/* 1.3fr/.7fr écrasait trop le formulaire (retour direct : "trop écrasé") ->
   1.2fr/.8fr + gap resserré 56->44px (récupère de la largeur des deux côtés
   sans rien retirer) : formulaire remonté à ~380-450px selon l'écran (contre
   ~330-370px), au prix d'un H1 un peu moins grand (30-34px contre 32-38px,
   toujours nettement au-dessus des 24-32px d'avant la passe "produit de
   luxe"). Vérifié empiriquement (DOM réel) à 1181 et 1440px. */
.fia-page .fia-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: stretch; }
.fia-page .fia-hero__text { display: flex; flex-direction: column; gap: 26px; }
/* taille/graisse corrigées le 26/08 (retour direct, plus de débat DS : "la police de
   l'accroche n'est pas cohérente avec le reste du site, trop grasse et pas assez
   grande") - après plusieurs allers-retours sur la catégorie DS à suivre (19/08, 25/08,
   voir historique ci-dessous conservé), on tranche ici sur l'œil plutôt que sur le
   texte du DS : 800 jugé trop lourd -> 700 ; plafond 53px jugé trop petit -> 64px.
   RÉAJUSTÉ le 27/08 (retour explicite persistant : "le gras n'est pas conforme avec le
   design system") : la page DS elle-même plante à l'inspection en direct (cible qui
   crashe), donc pas de nouvelle mesure possible ; le site utilise déjà 700 (Bold Inter)
   pour .fia-h2 sans retour négatif, mais à l'échelle du hero (64px) ce même poids se lit
   visuellement plus lourd qu'à 40px - passage à 600 (SemiBold Inter), un cran sous le
   reste du site, cohérent avec la taille bien plus grande de ce texte précis. Taille
   inchangée (pas re-signalée cette fois). */
.fia-page .fia-hero h1 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.0; font-weight: 600; letter-spacing: -1.6px; margin: 0 0 22px; }
/* Historique conservé : taille corrigée le 19/08 (demande explicite "l'accroche est
   trop grosse, vérifie le design system") : le clamp jusqu'à 72px suivait la catégorie
   "Display H1" du DS (72-96px, "V2France IA - Design System.html", branche docs) - la
   bonne catégorie pour un H1 de page est "H1" (48px, letter-spacing -1.2px, line-height
   1.0), pas Display H1 qui n'a pas d'usage documenté sur cette page.
   RÉAJUSTÉ le 25/08 : le DS se contredit lui-même entre son tableau texte ("Display H1
   72-96px", rejeté le 19/08 comme "trop grosse") et sa démo visuelle rendue ("Display"
   = 52px/800/-1.56px) - suivi la démo rendue, via --t5 (53px). Cette 3e valeur a
   ensuite été jugée trop petite ET trop grasse (26/08, voir ci-dessus) : le débat DS
   lui-même n'a jamais tranché, la décision finale vient du retour direct sur le rendu
   réel. */
.fia-page .fia-hero h1 span { color: var(--blue); }
.fia-page .fia-hero p { font-size: 20px; line-height: 1.2; color: var(--muted); margin: 0 0 28px; }
/* restructuration hero (24/08, brief structuré Felipe/agence Short) : sous-titre plus
   petit que le H1 + bloc "3 points" en gras, format 1-2-3, sous le titre. Le détail du
   contenu est dans le commentaire de l'index.html qui charge cette feuille (identique à
   formation-ia-paris, adapté au ton de la page). Posé ici plutôt que dans le <style> de
   page, pour éviter la duplication.
   La mention d'un index-b.html (variante B) est retirée le 09/09/2026 : ce fichier
   n'existe plus, il est devenu landing-page/formation-ia-cpf/ et ses deux anciennes
   adresses redirigent en 308 vers elle. */
.fia-page .fia-hero__subtitle { font-size: 20px; font-weight: 600; color: var(--muted); margin: -14px 0 0; }
.fia-page .fia-hero__three { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: fia-hero-three; }
.fia-page .fia-hero__three li { counter-increment: fia-hero-three; position: relative; padding-left: 30px; font-size: 17px; font-weight: 400; color: var(--ink); }
.fia-page .fia-hero__three li::before { content: counter(fia-hero-three) "."; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 800; }
@media (max-width: 560px) { .fia-page .fia-hero h1 { line-height: 1.2; } }
.fia-page .fia-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.fia-page .fia-badge {
  font-size: 14px; font-weight: 600; color: var(--blue);
  background: rgba(67,121,242,.1); border: 1px solid rgba(67,121,242,.22); padding: 8px 16px; border-radius: var(--radius-pill);
}
/* bordure bleue fine (12/08, demande directe) : le formulaire n'avait qu'un
   hairline gris + une ombre teintée bleu (glow, pas un contour net) -
   remplacé par une vraie bordure bleue, fine (1px). */
.fia-page .fia-form-card { position: relative; background: #fff; border: 1px solid var(--blue); border-radius: var(--radius-lg); padding: 10px; box-shadow: 0 24px 60px -28px rgba(67,121,242,.4); overflow: hidden; }
.fia-page .fia-form-card iframe { width: 100%; border: none; border-radius: 0; min-height: 720px; display: block; margin-bottom: -16px; }
/* masque du trait GHL (12/08, élargi 19/08 - barre grise du pied recaptcha/GHL
   encore visible chez l'utilisateur avec les 24px d'origine) : recouvre le bas
   de la carte, largement sous le texte de consentement réel (~72px de marge
   blanche mesurée avant tout contenu utile), jamais de contenu utile. */
/* 23/09/2026 : 24 px, la valeur des pages de ville. Les deux pages servent le MEME
   formulaire GHL (oBcuG79krDx5mh9zv2fG) : le masque doit couvrir le meme artefact,
   et 44 px mordaient 20 px de plus sur le bas de la carte. */
.fia-page .fia-form-card__mask { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 24px; background: #fff; pointer-events: none; }

/* ---- piliers (parti pris) ----
   fond, rayon et icône mesurés sur la vraie page : pas de bordure (l'effet
   de contour vient du contraste doux entre le fond bleu à 10% d'opacité et
   le blanc), rayon 10px, icône 140x140 à 30% d'opacité positionnée pour
   déborder du coin haut-droit et rognée par overflow:hidden. */
.fia-page .fia-pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp2); margin: var(--sp5) auto 0; max-width: 940px; }
.fia-page .fia-pillar { position: relative; overflow: hidden; flex: 0 1 420px; background: rgba(67,121,242,.1); border-radius: var(--radius); padding: var(--sp4) var(--sp3); text-align: left; }
.fia-page .fia-pillar h3 { font-size: 38px; line-height: 1; font-weight: 600; color: var(--blue); margin: 0 0 var(--sp0); }
.fia-page .fia-pillar p { margin: 0; color: var(--muted); font-size: var(--t0); }
.fia-page .fia-pillar__ico { position: absolute; top: 7px; right: -10px; width: 140px; height: 140px; color: var(--blue); stroke-width: 1.5; opacity: .3; }

/* ---- avis Trustpilot (widget) ---- */
.fia-page .fia-avis__more { font-weight: 600; color: var(--blue); margin: -8px 0 var(--sp2); }
/* écart titre->widget corrigé le 12/08 : le H2 n'a que --sp1 (20px) de margin-bottom
   partout sur la page (l'air vient normalement du prochain élément, cf. .fia-lead
   à --sp5 ou .fia-fiches3 à margin-top:--sp5) — cette section sautait cette étape,
   d'où le titre "collé" au widget. Alignée sur le même --sp5 (53px) que le reste. */
.fia-page .fia-avis .trustpilot-widget { margin: var(--sp5) auto var(--sp4); max-width: 1030px; }

/* ---- citation isolée (verbatim Trustpilot, hero + sections, 19/08) : réutilise
   le langage typographique de .fia-lead (t1, muted pour l'attribution) plutôt que
   d'inventer une nouvelle échelle. Dans le hero, la colonne flex (.fia-hero__text-col,
   gap:30px) gère déjà l'espacement — pas de marge forcée ici, sinon elle s'additionne
   au gap (même piège que .fia-hero__bubbles/.fia-proofs-mini documenté plus haut). */
/* refonte selon le Design System France IA v2 (25/08, demande explicite,
   capture à l'appui : les étoiles s'affichaient en texte brut non stylé,
   collées à l'attribution) - section 13 "Imagerie" du DS (branche docs) :
   "Témoignages : citation en grand italique serif (Libre Caslon Text
   italic ~31px), attribution nom 700 + fonction grise" + section 5
   "étoiles de notation" en vert #10B981 (même couleur que le badge Google
   Reviews du DS). Attribution scindée en 3 éléments distincts (nom / rôle
   / étoiles) au lieu d'un seul bloc de texte gris. */
.fia-page .fia-quote { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 31px; line-height: 1.3; font-weight: 400; font-style: italic; color: var(--ink); margin: 0; }
.fia-page .fia-quote__attribution { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 10px; font-style: normal; }
.fia-page .fia-quote__name { font-weight: 700; font-size: 14px; color: var(--ink); }
.fia-page .fia-quote__role { font-weight: 500; font-size: 14px; color: var(--muted); }
.fia-page .fia-quote__stars { color: #10B981; font-size: 14px; letter-spacing: 1px; }
.fia-page .fia-section .fia-quote { max-width: 640px; margin: var(--sp3) auto 0; text-align: center; }
.fia-page .fia-section .fia-quote__attribution { justify-content: center; }

/* ---- preuve tangible (photos de session, 19/08) : grille 3 colonnes sobre, texte des
   légendes aligné à gauche (lisible) même si le titre au-dessus est centré. */
.fia-page .fia-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); margin-top: var(--sp1); text-align: left; }
.fia-page .fia-proof-grid figure { margin: 0; }
.fia-page .fia-proof-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); display: block; }
.fia-page .fia-proof-grid figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.4; }
@media (max-width: 960px) { .fia-page .fia-proof-grid { grid-template-columns: minmax(0,1fr); } }

/* ---- mur de photos "Vu depuis la salle" (25/08, demande explicite : "2 blocs animés
   de photo qui loop, 1 partant de la droite l'autre partant de la gauche") : remplace
   .fia-proof-grid (grille statique, laissée ci-dessus, plus utilisée sur cette page).
   Même mécanique que .fia-partners__track (boucle CSS pure, 2 copies identiques du
   jeu d'images, translateX 0 -> -50%) - ici sur 2 bandes empilées, la 2e en sens
   inverse via animation-direction:reverse sur le même @keyframes. */
.fia-page .fia-photowall { display: flex; flex-direction: column; gap: var(--sp2); margin-top: var(--sp5); }
.fia-page .fia-photowall__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.fia-page .fia-photowall__track { display: flex; flex-wrap: nowrap; width: max-content; gap: var(--sp2); animation: fia-photowall-loop 50s linear infinite; }
.fia-page .fia-photowall__row--b .fia-photowall__track { animation-direction: reverse; }
.fia-page .fia-photowall__track img { flex: 0 0 auto; height: 260px; width: auto; aspect-ratio: auto; object-fit: contain; /* 22/09 : format propre de chaque photo, plus de 3:4 forcé qui rognait 44 % des photos paysage */ border-radius: var(--radius); display: block; }
/* 23/09/2026 (Côme) : « le carrousel des avis ne doit pas se terminer, ça doit former
   une loop ». La piste porte un `gap`, donc un jeu complet mesure 50 % de la largeur
   PLUS la moitié d'un gap : celui qui sépare la dernière carte d'un jeu de la première
   du suivant n'est compté nulle part dans les 50 %. S'arrêter à -50 % laissait donc un
   ressaut de 13 px (var(--sp2) / 2) à chaque tour, visible comme une cassure. */
@keyframes fia-photowall-loop { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--sp2) / 2)); } }
/* piste = 2 copies IDENTIQUES mises côte à côte -> -50% de la largeur totale déplace
   exactement d'un jeu complet, la boucle est donc invisible (même principe que
   fia-partners-loop plus haut). */
@media (prefers-reduced-motion: reduce) { .fia-page .fia-photowall__track { animation: none; } }
@media (max-width: 640px) { .fia-page .fia-photowall__track img { height: 180px; } }

/* ---- mur de logos partenaires (remonté le 21/08, demande explicite, juste après la
   hero) : padding réduit à --sp3 retiré (21/08, demande explicite, "problème de
   padding" — trop collé sous la hero) — c'est maintenant une section à part entière,
   avec son propre H2 ("Ils nous ont fait confiance"), elle reprend le rythme --sp8
   standard de .fia-section plutôt que le padding compact hérité de son ancienne
   position en bande secondaire.
   Logos en niveaux de gris au repos (cohérent avec le traitement discret voulu),
   couleur au survol.
   Boucle continue (19/08, demande explicite "copier le style de la home") : la home
   anime ça en JS (moteur de marquee Framer, contenu répété 3x dans son DOM) ; ici, 2
   copies identiques + une boucle CSS pure (translateX(0) -> translateX(-50%), linéaire,
   infinie) suffisent pour un résultat parfaitement sans à-coup, sans dépendance JS.
   Fondu sur les bords (mask-image) repris à l'identique du markup home — même dégradé
   (12,5%/87,5%), même effet "les logos apparaissent/disparaissent en fondu" plutôt que
   coupés net par le overflow:hidden du viewport. */
/* écart titre -> carrousel uniformisé (21/08, demande explicite, "me semble faible par
   rapport au reste de la page") : cette section n'a pas de .fia-lead sous le H2 (contrairement
   aux autres), donc il ne restait que la marge propre du H2 (--sp1, 20px) - repris ici en
   margin-top --sp5 (53px) sur le viewport, le même rythme titre->contenu que .fia-fiches3 et
   .fia-carousel ailleurs sur la page. */
.fia-page .fia-partners__viewport {
  margin-top: var(--sp5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
.fia-page .fia-partners__track { display: flex; flex-wrap: nowrap; align-items: flex-end; width: max-content; gap: var(--sp4); animation: fia-partners-loop 40s linear infinite; }
/* logos agrandis une 3e fois (21/08, demande explicite "agrandi encore un peu plus") : 28 -> 42 -> 56 -> 68px. */
.fia-page .fia-partners__track img { flex: 0 0 auto; height: 68px; width: auto; object-fit: contain; opacity: .65; filter: grayscale(1); transform-origin: center bottom; transition: opacity .2s ease, filter .2s ease, transform .12s ease-out, margin .12s ease-out; }
.fia-page .fia-partners__track img:hover { opacity: 1; filter: grayscale(0); }
/* effet loupe façon dock macOS (31/08, demande explicite) : le grossissement lui-même
   (calcul de l'échelle selon la distance au curseur) est piloté en JS dans
   custom-fixes.js (fonction dockEffect) — la transform ci-dessus ne fait que rendre
   ce changement fluide au lieu d'un saut brut à chaque frame de mousemove. */
/* même correction que fia-photowall-loop : le gap vaut ici var(--sp4), donc 21 px de
   ressaut à chaque tour tant qu'on s'arrêtait à -50 %. */
@keyframes fia-partners-loop { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--sp4) / 2)); } }
/* piste = 2 copies IDENTIQUES mises côte à côte -> -50% de la largeur totale déplace
   exactement une copie ; l'image au repositionnement (from) est donc pixel-identique à
   l'image juste avant (to), pas de saut visible au bouclage. */
@media (prefers-reduced-motion: reduce) { .fia-page .fia-partners__track { animation: none; } }

/* ---- accordéon modules ---- */
.fia-page .fia-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp5); align-items: start; }
.fia-page .fia-acc-grid img { border-radius: var(--radius); width: 100%; aspect-ratio: 510/530; object-fit: cover; }
.fia-page .fia-acc details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.fia-page .fia-acc summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; padding: var(--sp1) 0; font-weight: 500; font-size: 20px; font-family: 'Inter', sans-serif; }
.fia-page .fia-acc summary::-webkit-details-marker { display: none; }
.fia-page .fia-acc__ico { flex: 0 0 auto; width: 30px; height: 30px; color: var(--blue); }
.fia-page .fia-acc h3 { font: inherit; margin: 0; display: inline; font-family: 'Inter', sans-serif; }
.fia-page .fia-acc__plus { margin-left: auto; color: var(--blue); font-size: 24px; line-height: 1; }
.fia-page .fia-acc__plus::after { content: "+"; }
.fia-page .fia-acc details[open] .fia-acc__plus::after { content: "–"; }
.fia-page .fia-acc details p { margin: 0 0 var(--sp1) 46px; color: var(--muted); font-size: var(--t0); }
.fia-page .fia-acc-tools { display: grid; grid-template-columns: repeat(3, auto); gap: 18px 32px; margin-top: var(--sp5); }
.fia-page .fia-acc-tools img { height: 28px; width: 140px; object-fit: contain; object-position: left center; }
@media (max-width: 560px) { .fia-page .fia-acc-tools { grid-template-columns: repeat(2, auto); } }

/* ---- étapes (pratique et personnalisée) ---- */
.fia-page .fia-steps { display: flex; flex-direction: column; gap: var(--sp5); margin-top: var(--sp5); }
.fia-page .fia-step { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp5); align-items: center; }
.fia-page .fia-step--rev .fia-step__media { order: 2; }
.fia-page .fia-step__media img { width: 100%; border-radius: var(--radius); aspect-ratio: 446/295; object-fit: cover; }
.fia-page .fia-step__num { display: inline-block; font-family: 'Menlo', 'Courier New', monospace; color: var(--blue); font-size: var(--t-1); margin-bottom: var(--sp0); }
.fia-page .fia-step h3 { font-size: var(--t3); line-height: 1.2; font-weight: 700; margin: 0 0 var(--sp0); }
.fia-page .fia-step p { margin: 0; color: var(--muted); font-size: var(--t0); }

/* ---- cartes 3 (faite pour vous si) ---- */
.fia-page .fia-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); margin-top: var(--sp5); }
/* refonte alignée sur la section "Cette formation est faite pour vous si..." de la
   homepage franceia.com (25/08, demande explicite, 2 captures de référence : "ce
   design pour les points") : fond bleu clair au lieu de blanc, titre coloré bleu,
   tout centré (texte + lien) - remplace le style carte blanche/bordure neutre. */
.fia-page .fia-card { background: var(--blue-soft); border: 1px solid rgba(67,121,242,.2); border-radius: var(--radius-lg); padding: var(--sp4); text-align: center; box-shadow: none; }
.fia-page .fia-card h3 { font-size: var(--t2); line-height: 1.25; font-weight: 700; color: var(--blue); margin: 0 0 var(--sp1); }
.fia-page .fia-card p { margin: 0 0 var(--sp2); color: var(--muted); font-size: 15px; }
/* Le bleu de marque, comme partout ailleurs (Côme, 09/09/2026 : « cela doit
   être le même bleu partout »). Ces liens sont posés sur --blue-soft, où il ne
   donne que 3,67:1, sous le seuil AA de 4,5:1 : c'est le coût assumé de
   l'uniformité de teinte. Le palier 700 y donnait 6,16:1, mais il se voyait. */
.fia-page .fia-card__link { display: inline-block; font-weight: 600; color: var(--blue); }
.fia-page .fia-card__link:hover { text-decoration: underline; }

/* ---- bénéfices (vous repartirez avec) ---- */
.fia-page .fia-benefits { display: flex; flex-direction: column; margin-top: var(--sp5); }
.fia-page .fia-benefit { border-bottom: 1px solid var(--line); padding: var(--sp3) 0; }
.fia-page .fia-benefit__head { display: flex; align-items: center; gap: var(--sp0); padding: var(--sp1) var(--sp3); border-bottom: 1px solid var(--line); }
.fia-page .fia-benefit__num { font-family: 'Menlo', 'Courier New', monospace; color: var(--blue); font-size: var(--t-1); }
.fia-page .fia-benefit__head p { font-size: var(--t1); font-weight: 700; margin: 0; }
.fia-page .fia-benefit__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4); align-items: center; padding-top: var(--sp3); }
.fia-page .fia-benefit__hook { font-weight: 600; color: var(--ink); margin: 0 0 var(--sp1); }
.fia-page .fia-benefit__body ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: var(--t0); }
.fia-page .fia-benefit__body img { width: 100%; aspect-ratio: 504/260; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---- formateurs (carrousel) ---- */
.fia-page .fia-carousel { position: relative; margin-top: var(--sp5); }
.fia-page .fia-trainers { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: none; }
.fia-page .fia-trainers::-webkit-scrollbar { display: none; }
/* cartes agrandies une 2e fois (24/08, brief structuré, "grandes photos") : 300 -> 320px,
   même taille que formation-ia-paris. */
.fia-page .fia-trainer { position: relative; flex: 0 0 320px; aspect-ratio: 1/1; /* 22/09 : carré comme les photos (1254x1254), le 340/420 en rognait 19 % */ border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; display: block; }
.fia-page .fia-trainer img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.fia-page .fia-trainer:hover img { transform: none; } /* 22/09 : plus de zoom au survol, il rognait l'image */
/* 22/09 (« pas d'image coupée ») : les cartes tombent entières à toutes les largeurs.
   3 par vue sur desktop, 2 sur tablette, 1 sur mobile ; l'accroche du défilement est
   obligatoire, donc le carrousel s'arrête toujours sur une carte entière (boutons et
   défilement auto avancent d'une largeur de carte, voir custom-fixes.js). */
.fia-page .fia-trainers { scroll-snap-type: x mandatory; }
.fia-page .fia-trainer { flex-basis: calc((100% - 52px) / 3); }
@media (max-width: 1023px) { .fia-page .fia-trainer { flex-basis: calc((100% - 26px) / 2); } }
@media (max-width: 599px) { .fia-page .fia-trainer { flex-basis: 100%; } }
.fia-page .fia-trainer__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%); }
/* 25/09 (Côme, deux captures) : la légende des cartes formateurs reprend le traitement
   de la homepage. Le nom seul sur sa ligne, le volume en pastille bleue en dessous, le
   rôle en dernier, le tout aligné à gauche. La pastille grise posée en ligne derrière le
   nom se lisait comme une parenthèse ; sur sa propre ligne, elle se lit comme la preuve
   qu'elle est. Mise en page reprise de styles-fia.css (homepage), mais la pastille reste
   translucide (Côme, 25/09, capture) : le bleu plein de la homepage tirait l'oeil avant
   le nom, le blanc à 18 % se pose sur la photo sans la percer. */
.fia-page .fia-trainer__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp1); color: #fff; text-align: left; }
.fia-page .fia-trainer__name { display: grid; justify-items: start; row-gap: 8px; }
.fia-page .fia-trainer__name p { font-size: var(--t1); line-height: 26px; font-weight: 700; margin: 0; }
.fia-page .fia-trainer__stat { font-size: 12px; line-height: 18px; font-weight: 600; background: rgba(255,255,255,.18); color: #fff; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.fia-page .fia-trainer__role { font-size: 14px; line-height: 20px; color: rgba(255,255,255,.92); margin: 10px 0 0; }
.fia-page .fia-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px -8px rgba(0,0,0,.25); cursor: pointer; z-index: 2; }
.fia-page .fia-carousel__btn--prev { left: -24px; }
.fia-page .fia-carousel__btn--next { right: -24px; }

/* ---- résumé (carte) ---- */
.fia-page .fia-summary { display: flex; flex-direction: column; align-items: center; gap: var(--sp3); }
.fia-page .fia-summary__card { width: 100%; max-width: 550px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pricing); overflow: hidden; text-align: left; }
.fia-page .fia-summary__head { background: var(--blue); padding: var(--sp3) var(--sp3) var(--sp2); }
.fia-page .fia-summary__head h3 { color: #fff; font-size: var(--t3); line-height: 1.2; font-weight: 700; text-align: center; margin: 0 0 var(--sp2); }
.fia-page .fia-summary__head img { width: 100%; aspect-ratio: 490/269; object-fit: cover; border-radius: 0; }
.fia-page .fia-summary__body { padding: var(--sp3); }
.fia-page .fia-summary__list { list-style: none; margin: 0 0 var(--sp2); padding: 0; display: flex; flex-direction: column; gap: var(--sp2); }
.fia-page .fia-summary__list li { display: flex; gap: 14px; align-items: flex-start; }
.fia-page .fia-summary__list svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }
.fia-page .fia-summary__list p { margin: 0; color: var(--ink); font-size: var(--t0); }
.fia-page .fia-summary__price { text-align: center; font-size: 40px; font-weight: 800; color: var(--blue); margin: 0; padding-top: var(--sp2); border-top: 1px solid var(--line); }

/* ---- FAQ ---- */
/* 2 blocs (24/08, demande explicite) : même liste .fia-faq réutilisée deux fois, un
   sous-titre + un peu d'air entre les deux groupes - même traitement que formation-ia-paris. */
.fia-page .fia-faq__group { max-width: clamp(940px, 60vw, 1080px); margin: 0 auto; }
.fia-page .fia-faq__group + .fia-faq__group { margin-top: var(--sp6); }
.fia-page .fia-faq__group-title { font-size: var(--t2); font-weight: 700; margin: 0 0 var(--sp3); color: var(--ink); }
.fia-page .fia-faq { max-width: clamp(940px, 60vw, 1080px); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.fia-page .fia-faq__group .fia-faq { max-width: none; }
.fia-page .fia-faq details { border: 1px solid rgba(67,121,242,.35); border-radius: var(--radius); padding: 4px 20px; }
.fia-page .fia-faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 18px; padding: var(--sp1) 0; display: flex; justify-content: space-between; gap: 16px; }
.fia-page .fia-faq summary::-webkit-details-marker { display: none; }
.fia-page .fia-faq summary::after { content: "+"; color: var(--blue); font-size: 24px; line-height: 1; }
.fia-page .fia-faq details[open] summary::after { content: "–"; }
/* justify + hyphens: manual + text-align-last:left : même traitement que les
   autres paragraphes justifiés de la page (voir .fia-lead, .fia-opco-cpf p
   historique) — sans quoi la dernière ligne d'une réponse se retrouve
   étirée bord à bord au lieu de s'arrêter naturellement à gauche. */
.fia-page .fia-faq details p { margin: 0 0 var(--sp1); color: var(--muted); text-align: justify; text-align-last: left; hyphens: manual; font-size: var(--t0); }
.fia-page .fia-faq details ol { text-align: justify; text-align-last: left; hyphens: manual; margin: 0; padding-left: 22px; color: var(--muted); font-size: var(--t0); }
.fia-page .fia-faq details li { margin-bottom: 8px; }
/* même bug que .fia-opco-cpf p (11/08) : justify sur une colonne qui se
   resserre en mobile étire les espaces entre mots -> désactivé <=640px. */
@media (max-width: 640px) {
  .fia-page .fia-faq details p, .fia-page .fia-faq details ol { text-align: left; hyphens: none; }
}
.fia-page .fia-faq__more { display: flex; align-items: center; gap: 16px; padding: var(--sp1) 0; font-weight: 600; font-size: var(--t1); color: var(--ink); }
.fia-page .fia-faq__more::after { content: "↗"; margin-left: auto; color: var(--blue); font-size: 20px; }
.fia-page .fia-faq__more:hover { color: var(--blue); }

/* ---- footer ---- */
.fia-page .fia-footer { background: var(--cream); color: var(--muted); padding: 64px 0 var(--sp3); }
/* 2 colonnes (brand+Qualiopi, Légal) : la grille "auto auto auto auto" datait
   des 4 groupes Certification/CPF/OPCO/Légal (retirés le 12/08 au profit du
   footer réel de la homepage, qui n'a que ces 2 groupes). */
.fia-page .fia-footer__top { display: grid; grid-template-columns: 1fr auto; gap: var(--sp6); }
.fia-page .fia-footer img.fia-footer__logo { height: 36px; margin-bottom: var(--sp0); }
.fia-page .fia-footer__brand p { color: var(--ink); font-weight: 500; margin: 0; font-size: var(--t0); }
.fia-page .fia-footer__group-title, .fia-page .fia-footer h4 { color: var(--ink); font-size: 22px; font-weight: 600; margin: 0 0 var(--sp2); }
.fia-page .fia-footer ul { list-style: none; margin: 0; padding: 0; }
.fia-page .fia-footer li { margin-bottom: var(--sp2); font-size: var(--t0); }
.fia-page .fia-footer a { color: var(--muted); }
/* 09/09/2026. Les liens du pied mesuraient 15 a 20px de haut, sous les 24px du
   critere de taille de cible de WCAG 2.2. Le correctif existait deja dans la
   feuille racine, mais ces pages chargent leur PROPRE copie locale et ne
   l'avaient jamais recu : meme famille que le plancher de 12px. `inline-block`
   est necessaire pour qu'un lien en ligne accepte du remplissage vertical.
   Arbitrage de Come le 09/09/2026 : « corrige les cibles tactiles sur les
   landing pages ». Le pied de page est sous le formulaire, aucun appel a
   l'action ni aucune iframe ne se deplace. */
.fia-page .fia-footer a { display: inline-block; padding: 4px 0; line-height: 1.5; }
.fia-page .fia-footer a:hover { color: var(--blue); }
.fia-page .fia-footer__qualiopi { margin-top: var(--sp2); max-width: 256px; }
.fia-page .fia-footer__qualiopi img { width: 256px; max-width: 100%; height: auto; display: block; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-sm); }
.fia-page .fia-footer__qualiopi small { display: block; font-size: var(--t-1); color: var(--muted); margin: 10px 0 6px; line-height: 1.4; max-width: 256px; }
/* --blue-dark et non --blue : cette mention de 13px est de la petite ligne
   légale, pas un endroit où le bleu de marque se lit. Le bleu du logo n'y
   donne que 3,99:1, sous le seuil AA ; le palier 700 du Design System y donne
   6,70:1. Même traitement que le pied de page du site (PR #169). */
.fia-page .fia-footer__qualiopi a { color: var(--blue); font-size: var(--t-1); font-weight: 500; }
.fia-page .fia-footer__bottom { border-top: 1px solid rgba(0,0,0,.1); margin-top: 38px; padding-top: var(--sp2); font-size: var(--t-1); text-align: center; color: var(--muted); }

/* 09/09/2026. Le <small> de ce bloc n'avait aucune taille déclarée : il héritait
   du 0.8333em que le navigateur applique par défaut à cette balise, soit
   10.83px, sous le plancher de lisibilité de 12px. La règle a été posée sur la
   feuille racine (PR #148), mais les landing pages chargent leur PROPRE copie
   locale de styles-fia.css : elle ne les atteignait pas. Arbitrage de Côme le
   09/09/2026 : « passe à 12 px ». Le bloc est sous le formulaire, aucun appel à
   l'action ni aucune iframe ne se déplace. */
.fia-page .fia-footer__bottom small { font-size: 12px; line-height: 1.5; }

/* ---- animation d'apparition au scroll ---- */
.fia-page .fia-fade { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.fia-page .fia-fade.fia-in { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════════
   LANDING /formation-ia-paris — refonte A/B (structure dédiée, pas de
   nav header/footer, scroll < 60s). Composants ajoutés ci-dessous,
   au maximum sur les tokens/classes déjà existants au-dessus.
   ════════════════════════════════════════════════════════════════════ */

/* ---- header sans nav : logo + CTA seul ---- */
.fia-page .fia-header--minimal .fia-nav { justify-content: space-between; }
.fia-page .fia-header--minimal .fia-nav__logo img { height: 38px; }
/* CTA header : plus compact que le bouton standard (--sp1/--sp3), trop large
   dans une barre fine de 72px de haut. */
.fia-page .fia-header .fia-btn { padding: 12px 24px; font-size: 15px; }
/* nowrap (25/08, bug trouvé en vérifiant les retouches du 24/08) : .fia-btn est
   display:flex - dans ce contexte le texte "Je souhaite prendre rendez-vous"
   (plus long que l'ancien "Prendre rendez-vous") passait sur 2 lignes en mobile
   MÊME avec largeur disponible suffisante (258px de texte pour ~287px de place à
   390px de large, vérifié en direct) : un flex item text-wrappe par défaut avant
   de remplir tout l'espace laissé par justify-content:space-between. nowrap seul
   suffit, ne déborde jamais (mesuré à 390px, le seuil le plus serré). */
.fia-page .fia-header .fia-btn { white-space: nowrap; }

/* ---- barre de progression verticale (droite) ---- */
.fia-progress-rail {
  position: fixed; top: 50%; right: 18px; transform: translateY(-50%); z-index: 40;
  width: 3px; height: 220px; background: var(--line, #E5E7EB); border-radius: var(--radius-pill); overflow: hidden;
}
.fia-progress-rail__fill {
  /* transform:scaleY() au lieu d'animer height (13/08, perf) : évite un recalcul de layout
     à chaque scroll — rendu visuel identique. */
  width: 100%; height: 100%; background: var(--blue); border-radius: var(--radius-pill);
  transform: scaleY(0); transform-origin: top; transition: transform .12s linear;
}
@media (max-width: 780px) { .fia-progress-rail { display: none; } }

/* ---- badges preuves du hero (refonte 12/08) : anciennes cartes 4/3 pleine
   largeur de colonne (image + légende en overlay dégradé) jugées trop
   grosses -> réduites à ~1/3, texte sorti du bloc et posé dessous (plus
   d'overlay), image/logo réel au lieu d'un fond de couleur plein (voir
   OPCO : plus de fond bleu, juste l'icône). Tailles reprises de l'échelle
   72/40/12 demandée pour le hero : logo/icône 40px de haut, texte 12/11px. */
.fia-page .fia-proofs-mini { display: flex; gap: 28px; flex-wrap: wrap; }
.fia-page .fia-proof-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; color: inherit; transition: transform .2s ease; }
.fia-page .fia-proof-mini:hover { transform: translateY(-2px); }
.fia-page .fia-proof-mini__img { height: 40px; width: auto; max-width: 110px; object-fit: contain; display: block; }
.fia-page .fia-proof-mini__img--icon { display: flex; align-items: center; justify-content: center; width: 40px; color: var(--blue); }
.fia-page .fia-proof-mini__img--icon svg { width: 30px; height: 30px; }
.fia-page .fia-proof-mini__title { font-weight: 700; font-size: 12px; color: var(--ink); line-height: 1.3; }
.fia-page .fia-proof-mini__sub { font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 1px; }

/* ---- Notre formation : 3 fiches (refonte 12/08, remplace "Nos formations"
   parti pris + liste animée). Corrigé le 12/08 (2e retour) : les 3 cartes
   sont collées (gap:0, bordure partagée plutôt que 3 blocs espacés) et
   forcées à la même hauteur (align-items:stretch, plus start qui laissait
   chaque carte à sa propre hauteur de contenu). Hover = zoom : la carte
   entière scale légèrement + l'image (fiche 1) zoome en plus, même easing
   que le reste des interactions de la page ; z-index au survol pour que la
   carte agrandie passe visuellement devant ses voisines collées. */
.fia-fiches3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--sp5); align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.fia-fiche { background: #fff; padding: var(--sp3); position: relative; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); }
.fia-fiche:not(:first-child) { border-left: 1px solid var(--line); }
.fia-fiche:hover { transform: scale(1.02); box-shadow: 0 16px 32px -16px rgba(67,121,242,.3); z-index: 2; }
/* pastille numérotée (12/08, 6e retour, remplace les 2 chiffres d'impact
   retirés) : centrée sur le coin haut-gauche de chaque fiche (translate
   -50%/-50% depuis top:0/left:0), donc à cheval sur la bordure - la carte
   de gauche déborde sur le bord extérieur du bloc, celles du milieu/droite
   débordent sur la bordure partagée avec leur voisine. Pleinement ronde
   (50%) : une pastille numérotée est reconnaissable précisément parce
   qu'elle est ronde — cohérent avec le Design System (13/08), qui rétablit
   des rayons partout sur la page. aria-hidden : l'étiquette
   "avant/pendant/après la formation" juste à côté porte déjà la même
   information d'ordre. */
.fia-fiche__num {
  position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -4px rgba(67,121,242,.5);
}
/* vignette d'étape (12/08, 4e retour) : les 3 fiches suivent en réalité une
   chronologie (avant / pendant / après la formation), jamais rendue
   explicite jusqu'ici -> étiquette en haut à gauche de chaque fiche pour
   le dire clairement, "écrit en gros" (14px gras, pas un petit eyebrow
   discret). */
.fia-fiche__step { display: inline-block; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--blue); background: var(--blue-soft); padding: 6px 14px; margin-bottom: var(--sp2); border-radius: var(--radius-pill); }
.fia-fiche h3 { font-size: var(--t2); font-weight: 700; margin: 0 0 var(--sp1); }
.fia-fiche__subtitle { color: var(--muted); font-size: var(--t0); margin: 0 0 var(--sp2); font-weight: 500; text-align: center; }
.fia-fiche__media { overflow: hidden; margin: 0 0 var(--sp2); aspect-ratio: 4/3; }
.fia-fiche__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.fia-fiche:hover .fia-fiche__media img { transform: scale(1.08); }
.fia-fiche__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fia-fiche__list li { position: relative; padding-left: 20px; font-size: var(--t0); color: var(--ink); }
.fia-fiche__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--blue); }
/* copie resserrée le 12/08 (2e retour) : les 3 items par fiche tenaient sur
   des paragraphes longs (titre + phrase d'explication), ce qui forçait la
   fiche du milieu à dépasser largement les 2 autres et les 3 cartes
   (collées, même hauteur) à s'aligner sur elle. Réduits à une ligne courte
   et percutante par item, même niveau que les listes à puce des 2 autres
   fiches -> plus de strong/span imbriqués, un seul niveau de texte. */
.fia-fiche__steps { list-style: none; margin: 0; padding: 0; counter-reset: fiche-step; display: flex; flex-direction: column; gap: var(--sp2); }
.fia-fiche__steps li { counter-increment: fiche-step; font-size: var(--t0); font-weight: 700; color: var(--ink); }
.fia-fiche__steps li::before { content: counter(fiche-step) ". "; color: var(--blue); }
/* refait en grille icône+nom (12/08, "je veux ça" + référence visuelle) : la bande
   d'icônes seules ne permettait pas d'identifier Gamma/Perplexity/NotebookLM sans
   les connaître déjà -> chaque logo est maintenant accompagné de son nom, en grille
   2 colonnes pour rester lisible dans la largeur étroite d'une fiche (1/3 de page). */
.fia-fiche__tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp1) var(--sp2); margin-top: var(--sp3); padding-top: var(--sp3); border-top: 1px solid var(--line); }
.fia-fiche__tool { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fia-fiche__tool img { height: 26px; width: 26px; object-fit: contain; flex: 0 0 auto; }
.fia-fiche__tool span { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Bento Box "Ce que vous allez savoir faire" (25/08, demande explicite,
   structure fournie : "2 fiches en haut, 1 grande fiche en bas sur toute la
   largeur"). Réutilise .fia-fiche__num (pastille bleue déjà stylée) et
   .fia-fiche__tools/.fia-fiche__tool (grille icône+nom, orpheline depuis un
   tour antérieur) plutôt que de dupliquer des styles équivalents. */
.fia-bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp2); margin-top: var(--sp5); align-items: stretch; }
.fia-bento__card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp3); display: flex; flex-direction: column; box-shadow: var(--shadow-card, 0 2px 4px -1px rgba(0,0,0,.02), 0 4px 6px -1px rgba(0,0,0,.02)); }
.fia-bento__card h3 { font-size: var(--t2); font-weight: 700; margin: var(--sp1) 0 var(--sp1); }
.fia-bento__value { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 var(--sp2); }
.fia-bento__list, .fia-bento__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fia-bento__list li, .fia-bento__checklist li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; }
.fia-bento__list li::before { content: "–"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 800; }
.fia-bento__checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; }
.fia-bento__card .fia-fiche__tools { margin-top: var(--sp3); }
/* fiche 1 : logos seuls, sans libellé, même présentation que la section "Outils IA"
   de la homepage franceia.com (grille simple, logos seuls côte à côte, format
   uniforme) - remplace la grille icône+nom à 4 outils (25/08, demande explicite :
   "ajoute plus de logo comme sur la homepage, même présentation"). 6 logos, jeu
   identique à celui de la homepage. */
/* 26/08 : tentative de pastille icône+nom (pill) sur ce bloc suite à une
   capture de référence - REVENU en arrière le jour même (retour explicite
   "c'était mieux avant les logos") : la présentation "logos seuls" ci-dessus
   (25/08) reste donc la version active. Le format pill reste en revanche
   gardé pour la fiche 2 juste en dessous (.fia-bento__chip), qui elle n'a
   pas fait l'objet de ce retour. */
.fia-bento__logos { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; align-content: center; row-gap: 22px; column-gap: 36px; margin-top: var(--sp3); padding-top: var(--sp3); border-top: 1px solid var(--line); }
.fia-bento__logos img { height: 38px; width: auto; object-fit: contain; justify-self: center; }
/* fiche 2 : icônes+cases plutôt que des logos d'outils (25/08, demande explicite :
   "les logos dans 1 des fiches pas 2 - dans la suivante ajouter des icônes +
   cases"). Icônes génériques (pas des marques) : Prompt/Excel/Mail/PDF, mêmes
   pictos style trait que .fia-pin-ico déjà utilisé sur la page (stroke, 24x24).
   Passage en pastille pleinement arrondie tenté le 26/08 (capture de référence,
   "je veux ce genre d'icône et logo"), puis REVENU en arrière le jour même
   (retour explicite sur capture de ce bloc précis, sans commentaire) - retour
   au rectangle arrondi fond bleu clair d'origine (25/08). */
.fia-bento__chips { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: min-content; align-content: center; gap: 10px; margin-top: var(--sp3); padding-top: var(--sp3); border-top: 1px solid var(--line); min-height: 132px; }
.fia-bento__chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--blue-soft); border-radius: var(--radius); }
.fia-bento__chip svg { width: 18px; height: 18px; color: var(--blue); flex: 0 0 auto; }
.fia-bento__chip span { font-size: 13px; font-weight: 700; color: var(--ink); }
/* carte 3 : pleine largeur, "la claque" (demande explicite) - fond bleu pour
   la faire ressortir comme le climax de la section, contraste avec les 2
   cartes blanches au-dessus. RESTYLÉE le 27/08 (demande explicite : "même style
   que la formule premium, bordure bleue, fond blanc") : abandon du fond dégradé
   bleu au profit du même traitement que .fia-pricing__card--highlight (fond
   blanc, bordure bleue 2px, ombre douce) - reste distinct des 2 cartes blanches
   au-dessus par la bordure + l'ombre, plus par un bloc de couleur plein. */
.fia-bento__card--full { grid-column: 1 / -1; background: #fff; border: 2px solid var(--blue); box-shadow: 0 5px 24px -3px rgba(67,121,242,.15), 0 1px 4px 0 rgba(0,0,0,.02); }
.fia-bento__card--full h3 { color: var(--ink); }
.fia-bento__card--full .fia-bento__value { color: var(--muted); }
.fia-bento__card--full .fia-bento__checklist li { color: var(--ink); }
.fia-bento__card--full .fia-bento__checklist li::before { color: var(--blue); }
/* pastille "3" (25/08, demande explicite : "même design pour les chiffres, le 3
   n'est pas visible") : la variante translucide précédente (blanc 25% sur fond
   bleu + texte blanc hérité) rendait le chiffre quasi illisible - remplacée par
   .fia-fiche__num standard, identique aux pastilles 1/2, sans override. */
@media (max-width: 900px) { .fia-bento { grid-template-columns: minmax(0,1fr); } }

@media (max-width: 900px) {
  .fia-fiches3 { grid-template-columns: minmax(0,1fr); }
  /* empilées, la bordure partagée passe du côté gauche au-dessus (sinon un
     simple trait vertical résiduel sans rôle de séparateur en 1 colonne). */
  .fia-fiche:not(:first-child) { border-left: none; border-top: 1px solid var(--line); }
}

/* ---- CTA prix (remplace le bloc OPCO/CPF, retiré le 12/08) ---- */
/* encadré (12/08, 3e retour) : le CTA juste après les fiches était redondant
   avec celui-ci (2 boutons "Je souhaite me former" quasi collés) -> le
   premier retiré, celui-ci devient le seul CTA de la zone.
   Chrome refait deux fois : d'abord carte blanche façon .fia-session-block
   (7e retour), puis (8e retour, "bloc bleu avec CTA blanc") en plein bleu -
   le bouton passe blanc pour rester lisible sur ce fond (même patron que
   l'ancien bloc "Last Call" avant sa suppression : c'est un traitement déjà
   éprouvé sur cette page). Padding : --sp4 (42px), identique à .fia-tab-panel.
   Écart avec le bloc précédent (8e retour, "anormalement important") : la
   section n'a pas de H2 pour absorber le padding-top de section standard
   (--sp8, 110px), qui s'ajoutait au padding-bottom de la section précédente
   (80px) pour un total de 190px - réduit via .fia-section--cta-price. */
.fia-page .fia-section--cta-price { padding-top: var(--sp3); }
.fia-cta-price { max-width: 640px; margin: 0 auto; text-align: center; background: var(--blue); padding: var(--sp4); border-radius: var(--radius-lg); }
.fia-cta-price__text { font-size: var(--t3); font-weight: 700; margin: 0 0 var(--sp2); color: #fff; }
.fia-cta-price .fia-btn { background: #fff; color: var(--blue); border-color: #fff; }
.fia-cta-price .fia-btn:hover { background: var(--blue-soft); color: var(--blue); }
.fia-cta-price__note { font-size: 13px; color: rgba(255,255,255,.75); margin: var(--sp1) 0 0; }

/* ---- lignes de session (date/salle/places + CTA) ---- */
.fia-page .fia-session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: var(--radius); padding: 14px; margin-bottom: 8px; flex-wrap: wrap; background: #fff; }
.fia-page .fia-sessions-more { width: 100%; margin-top: 8px; }
.fia-page .fia-session-row:last-child { margin-bottom: 0; }
.fia-page .fia-session-row__info { display: flex; flex-direction: column; gap: 3px; }
.fia-page .fia-session-row__date { font-weight: 700; font-size: 16px; }
.fia-page .fia-session-row__meta, .fia-page .fia-session-row__trainer, .fia-page .fia-session-row__places { font-size: 13px; color: var(--muted); }
.fia-page .fia-session-row .fia-btn { padding: 8px 18px; height: auto; font-size: 14px; }
/* colonne CTA + compteur de places, et icône de lieu (24/08, brief structuré, priorité aux
   dernières consignes) : même redesign que formation-ia-paris/index.html - le compteur de
   places vit sous le bouton (texte discret, jamais un badge plein), l'icône de lieu est
   posée devant le champ lieu. Voir le commentaire CSS de formation-ia-paris pour le détail
   du raisonnement (remplace le badge .fia-fomo hérité du 13/08 pour ce cas précis - le
   badge "spectateurs" du champ Formateur garde son traitement d'origine). */
.fia-page .fia-session-row__cta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fia-page .fia-places-text { font-size: 11px; font-style: italic; font-weight: 700; }
/* --red-accessible : #EF4444 ne donne que 3,76:1 sur blanc, et ce texte fait
   11px gras, donc il relève du seuil 4,5:1. Le palier 600 donne 4,83:1. */
.fia-page .fia-places-text.is-red { color: var(--red-accessible); }
.fia-page .fia-places-text.is-blue { color: var(--blue); }
.fia-page .fia-places-text.is-grey { color: var(--muted); }
.fia-page .fia-pin-ico { width: 12px; height: 12px; flex: 0 0 auto; vertical-align: -2px; margin-right: 3px; color: var(--muted); }
/* FOMO (12/08) : uniquement sur les 2 premières lignes de l'onglet "Prochaines
   dates" (demande explicite). 5e retour ("passer en bas du bloc et
   l'associer à l'info adéquate") : plus de bandeau à part - le message
   remplace le champ "places restantes" (ligne 1, sujet = places) ou
   s'associe au champ "Formateur" (ligne 2, sujet = formateur), directement
   dans .fia-session-row__meta / __trainer. Fond rouge plein, texte et icône
   blancs via currentColor, reste posée en fin de champ, pas en bandeau
   séparé. Rayon/bordure/ombre alignés le 13/08 sur .fia-btn (même radius
   10px, même traitement bordure+ombre colorée que le CTA) plutôt que sur le
   rayon "badge" du DS (13px, essai précédent) — demande explicite de
   reprendre le design des boutons CTA, en rouge (#DC2626 = rouge 600 DS,
   même relation que --blue-dark à --blue sur .fia-btn), hauteur/largeur du
   FOMO inchangées (padding/font-size non repris du CTA). */
/* fond --red-accessible : le badge porte du texte blanc 12px gras, et
   #EF4444 ne lui donnait que 3,76:1. Le palier 600 donne 4,83:1. */
.fia-page .fia-fomo { display: inline-flex; align-items: center; gap: 4px; background: var(--red-accessible); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 10px 3px 8px; border-radius: 10px; border: 1px solid #DC2626; box-shadow: 0 1px 2px 0 rgba(239,68,68,.3), 0 4px 12px 0 rgba(239,68,68,.18); }
.fia-page .fia-fomo__ico { width: 12px; height: 12px; flex: 0 0 auto; }

/* ---- onglets génériques (sessions/salles) ---- */
.fia-page .fia-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp3); }
.fia-page .fia-tab { font-size: var(--t0); font-weight: 600; border: 1.5px solid var(--blue); border-radius: var(--radius-sm); padding: 8px 18px; background: #fff; color: var(--blue); cursor: pointer; }
.fia-page .fia-tab[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.fia-page .fia-tab-panel { display: none; background: #fff; border-radius: var(--radius); padding: var(--sp3); text-align: left; max-width: 720px; margin: 0 auto; }
.fia-page .fia-tab-panel.is-active { display: block; }
.fia-page .fia-tab-panel h3 { margin: 0 0 8px; font-size: 22px; }
.fia-page .fia-tab-panel p { color: var(--muted); margin: 0 0 var(--sp2); font-size: var(--t0); }

/* ---- sessions : onglets + contenu fondus en un seul bloc plus large ----
   Les onglets deviennent l'en-tête du bloc (bandeau bleu clair), le panneau
   perd sa propre bordure/ombre/plafond de largeur (portés par le bloc). */
.fia-page .fia-session-block { max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 2px 10px -6px rgba(22,22,26,.12); overflow: hidden; }
.fia-page .fia-session-block .fia-tabs { margin: 0; padding: 20px 24px; background: var(--blue-soft); border-bottom: 1px solid var(--line); }
.fia-page .fia-session-block .fia-tab-panel { border: none; box-shadow: none; border-radius: 0; max-width: none; margin: 0; padding: var(--sp4); }
.fia-page .fia-session-block .fia-salle-tabs__panel.is-active { padding: var(--sp4); }

/* ---- vignette salle (fallback sans photo) ---- */
.fia-page .fia-salle__img { height: 180px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; border-radius: var(--radius); }

/* ---- sessions en onglets par salle ----
   Bug corrigé deux fois : la règle générique est .fia-page .fia-tab-panel.is-active
   (3 classes) — mon premier correctif à 2 classes perdait encore. Il faut le même
   préfixe .fia-page pour égaler sa spécificité et gagner à l'ordre de déclaration. */
.fia-page .fia-salle-tabs__panel.is-active { display: grid; grid-template-columns: 1.1fr .9fr; }
.fia-salle-tabs__panel { gap: var(--sp4); align-items: stretch; text-align: left; max-width: none; }
.fia-salle-tabs__panel .fia-salle__img { height: auto; min-height: 260px; }
/* format unique (13/08) : hauteur fixe plutôt que 100% du track de la grille — sans ça,
   la hauteur de la rangée dépendait du ratio intrinsèque de CHAQUE photo (Station F en
   600x600 donnait un panneau carré, France IA en 385x444 un panneau plus haut) au lieu
   d'un format identique sur les deux onglets. */
.fia-salle-tabs__panel img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 780px) { .fia-page .fia-salle-tabs__panel.is-active { grid-template-columns: minmax(0,1fr); } }

/* ════════ Mouvement — langage emprunté à Alan ════════
   Cascade/easing/profondeur repris d'Alan. Rayons : cohérence page dédiée — boutons et
   onglets en pill (999px, comme les badges/puces déjà présents), cartes à --radius (18px). */
@keyframes fia-rise {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fia-pop {
  0%   { opacity: 0; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}
/* état de départ : masqué tant que le même IntersectionObserver que .fia-fade
   (custom-fixes.js) n'a pas ajouté .fia-in — l'animation ne joue qu'au scroll,
   jamais au chargement pour un bloc déjà dans le viewport. */
.fia-page .fia-rise, .fia-page .fia-pop { opacity: 0; }
.fia-page .fia-rise { transform: translateY(24px); }
.fia-page .fia-pop { transform: scale(.95); }
@media (prefers-reduced-motion: no-preference) {
  .fia-page .fia-rise.fia-in { animation: fia-rise .5s cubic-bezier(.16,1,.3,1) both; }
  .fia-page .fia-pop.fia-in { animation: fia-pop .2s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0ms); }
}
@media (prefers-reduced-motion: reduce) {
  .fia-page .fia-rise, .fia-page .fia-pop { animation: none; opacity: 1; transform: none; }
}
.fia-page .fia-elevated { box-shadow: 0 20px 48px -24px rgba(67,121,242, .35); }

/* ---- typographie : cohérence police (page dédiée uniquement, ne touche pas
   les tokens --t* partagés avec le reste du site) ---- */
.fia-page p { font-family: 'Inter', sans-serif; }
.fia-page .fia-lead { font-size: var(--t3); }
.fia-page .fia-lead { text-align: justify; text-align-last: left; hyphens: manual; }
/* .fia-lead centré (intro courte sous un H2) : le justify casse sur les phrases
   courtes à largeur mobile (grands blancs entre mots) -> centré, sans césure,
   pour ces cas précis. Les paragraphes plus longs ci-dessus restent justifiés.
   Règle pour un ancêtre .fia-center (ex. .fia-wrap.fia-center) ET pour .fia-lead
   portant directement .fia-center sur lui-même (13/08 : ce 2e cas ne marchait
   pas, même spécificité que la règle justify du dessus -> c'est elle qui
   gagnait, à tort, en cascade). 14/08 : le texte restait visuellement "collé
   à gauche" malgré text-align:center -> text-align-last:left (réglé plus haut
   pour le cas justify) n'était jamais réinitialisé ici, donc la DERNIÈRE ligne
   du paragraphe (souvent la plus courte) retombait à gauche à chaque fois. */
.fia-page .fia-center .fia-lead, .fia-page .fia-lead.fia-center { text-align: center; text-align-last: center; hyphens: none; }

/* ════════════════════════════════════════════════════════════════════
   FINITION — typographie, matières, interactions
   Une seule courbe d'easing partout (celle déjà utilisée pour le scroll-reveal
   Alan-inspired), un seul système d'ombre (neutre au repos, teintée bleu au
   survol — la même logique que .fia-elevated déjà en place sur le formulaire),
   des états de focus visibles, et le grain qui manquait (nombres alignés,
   titres équilibrés, logos qui répondent au survol).
   ════════════════════════════════════════════════════════════════════ */

/* ---- typographie ---- */
/* titres : chasse resserrée cohérente (le H2 l'avait déjà, pas les H3) +
   répartition équilibrée des retours à la ligne (dégrade proprement si le
   navigateur ne supporte pas balance). */
.fia-page h3, .fia-page .fia-tab-panel h3 { letter-spacing: -.01em; text-wrap: balance; }
.fia-page h2.fia-h2 { text-wrap: balance; }
/* chiffres alignés : dates, prix, notes — l'oeil décroche sur des chiffres
   à chasse variable dans une liste (dates de session, prix, TrustScore). */
.fia-page .fia-session-row__date,
.fia-page .fia-gavis__rating strong { font-variant-numeric: tabular-nums; }

/* ---- matières : les cartes ont un léger relief au repos (ombre neutre très
   discrète), pas seulement une bordure plate — et se soulèvent au survol
   avec une ombre teintée bleu, cohérent avec le formulaire (.fia-elevated). */
.fia-page .fia-session-row, .fia-page .fia-tab-panel {
  box-shadow: 0 2px 10px -6px rgba(22,22,26,.12);
}
.fia-page .fia-session-row {
  transition: box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1);
}
.fia-page .fia-session-row:hover { box-shadow: 0 10px 24px -14px rgba(67,121,242,.3); border-color: rgba(67,121,242,.3); }

/* ---- interactions : une seule courbe d'easing (cubic-bezier(.16,1,.3,1),
   déjà utilisée pour le scroll-reveal) sur tous les éléments interactifs,
   au lieu du mélange ease/.18s/.2s/.25s hérité des ajouts successifs. */
.fia-page .fia-btn { transition: background .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1); }
.fia-page .fia-btn:hover { box-shadow: 0 10px 24px -12px rgba(67,121,242,.5); }
.fia-page .fia-tool-rotate { transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1); }
.fia-page .fia-tab { transition: background .25s cubic-bezier(.16,1,.3,1), color .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1); }
.fia-page .fia-tab:not([aria-selected="true"]):hover { background: rgba(67,121,242,.08); }
.fia-page .fia-footer a { transition: color .25s cubic-bezier(.16,1,.3,1); }
.fia-page .fia-trainer img { transition: transform .5s cubic-bezier(.16,1,.3,1); }

/* focus clavier visible et cohérent — anneau bleu de la marque, jamais le
   contour par défaut du navigateur (incohérent d'un moteur à l'autre). */
.fia-page a:focus-visible, .fia-page button:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--radius-sm);
}
.fia-page .fia-tab:focus-visible { outline-offset: 2px; }

/* ---- corrections signalées après relecture ---- */
/* iframe du formulaire un peu plus haute que sa carte (overflow:hidden coupait
   net à travers son propre contenu -> lu comme "une ligne horizontale"
   parasite juste au-dessus de l'arrondi bas). Marge remontée de 5px. */
.fia-page .fia-form-card iframe { margin-bottom: -11px; }
/* padding latéral général de la page (.fia-wrap) : 26px jugé trop juste,
   remonté à 40px pour respirer davantage par rapport aux bords de l'écran. */
.fia-page .fia-wrap { padding: 0 40px; }
/* pastille Qualiopi retirée : en position absolue coin haut-gauche du form-card,
   elle recouvrait le propre titre du formulaire GHL (contenu interne à l'iframe,
   hors de notre contrôle) -> collision visuelle constatée en capture, pas un
   simple désaccord de style. */

/* ---- responsive ---- */
/* seuil dédié, plus large que les autres grilles : la colonne texte du hero A
   ("Transformez votre usage de [outil] en vrai levier de croissance, en 2
   jours.") ne tient plus en 2 lignes dans la colonne à 2 voies entre 960 et
   ~1180px (mesuré : ~430-495px de large à cette tranche) -> passage en 1
   colonne prolongé jusqu'à 1180px, sans changer le seuil des autres grilles. */
@media (max-width: 1180px) { .fia-page .fia-hero__grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 960px) {
  .fia-page .fia-pillars, .fia-page .fia-cards3 { grid-template-columns: minmax(0,1fr); }
  /* padding mesuré à 25px sur la vraie page en mobile (var(--sp4)/(--sp3) du
     desktop faisait manquer ~16px de largeur de texte). */
  .fia-page .fia-pillar { padding: 25px; }
  .fia-page .fia-prog { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .fia-page .fia-acc-grid { grid-template-columns: minmax(0,1fr); }
  .fia-page .fia-footer__top { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .fia-page .fia-step { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .fia-page .fia-step--rev .fia-step__media { order: 0; }
  .fia-page .fia-benefit__body { grid-template-columns: minmax(0,1fr); gap: 20px; }
  /* même logique qu'en desktop : haut augmenté (56->72px), bas inchangé. */
  .fia-page .fia-section { padding: 72px 0 56px; }
  /* .fia-hero : même rythme que .fia-section (72px) réduit de moitié à son
     tour (12/08, 2e retour, cf. commentaire desktop) -> --sp8/2 en mobile
     s'écrirait 36px ; exprimé en dur ici faute d'un token mobile équivalent
     à --sp8, mais reste la moitié exacte de la valeur mobile de .fia-section
     juste au-dessus, donc le même rapport 1:2 qu'en desktop. Le
     padding-bottom:0 du hero (posé dans le <style> de page, après cette
     feuille) reste prioritaire quel que soit le viewport - pas besoin de le
     répéter ici. */
  .fia-page .fia-hero { padding: 36px 0 56px; }
}
/* trouvé le 12/08 en vérifiant le hero en mobile (390px) : le CTA header
   ("Je souhaite me former", plus long que l'ancien "Prendre rendez-vous")
   passait sur 2 lignes dans le bouton -> le padding fixe de .fia-wrap
   (40px de chaque côté, jamais réduit en mobile) ne laissait que ~156px de
   texte utile au bouton. Réduit à 20px <=480px (gain de largeur utile
   partout sur la page, pas seulement le header) + bouton header légèrement
   resserré en plus, pour une marge de sécurité. */
@media (max-width: 480px) {
  .fia-page .fia-wrap { padding: 0 20px; }
  .fia-page .fia-header .fia-btn { font-size: 14px; padding: 10px 16px; }
}

/* Logo recouvert par le CTA en mobile, trouve le 09/09 sur une capture au pli
   d'un iPhone 14. Le diagnostic tenait a une mesure : l'ancre du logo passait
   de 109 px a 76 px a 390 px de large, puis a 6 px a 320. Ce n'est pas un
   chevauchement de boites, c'est un debordement. L'ancre est un element flex
   qui se laisse comprimer par defaut ; l'image qu'elle contient, elle, garde sa
   largeur propre (hauteur fixe, largeur auto) et depasse de sa boite. Le bouton
   etant ecrit apres dans le document, il se peint par-dessus.
   Deux gestes, un par cause :
   - le logo ne se comprime plus (flex-shrink a 0). C'est l'identite de la
     marque, c'est la derniere chose qui doit ceder ;
   - le bouton et le logo suivent la largeur de l'ecran. Les bornes des clamp
     sont mesurees, pas devinees : a 480 px on retrouve exactement les valeurs
     d'avant (38 px de logo, 14 px de texte), et a 320 px, le plus petit ecran
     encore en circulation, les deux tiennent sans entamer la gouttiere.
   Le libelle n'est pas raccourci et le nowrap du 12/08 reste : c'est lui qui
   garantit que le bouton ne repasse pas sur deux lignes. */
.fia-page .fia-header--minimal .fia-nav { gap: 12px; }
.fia-page .fia-header--minimal .fia-nav__logo { flex: 0 0 auto; }
@media (max-width: 480px) {
  .fia-page .fia-header--minimal .fia-nav__logo img { height: clamp(26px, 7.7vw, 38px); }
  .fia-page .fia-header--minimal .fia-btn { font-size: clamp(10px, 3.1vw, 14px); padding: 10px clamp(8px, 3vw, 16px); }
}

/* ═══ Anti-CLS : la carte du formulaire ne bouge plus au chargement ═══
   Mesuré le 08/09 sur /landing-page/formation-ia-paris/ en 1440x900, CLS 1,04
   pour un seuil « bon » à 0,1. La cause n'est pas le bandeau Trustpilot, qui ne
   fait que subir : c'est cette carte, et la séquence est en trois temps.

   1. Au premier rendu la carte fait 731px, réservés par le `min-height: 720px`
      posé sur l'iframe juste au-dessus.
   2. Vers 740ms le script de GHL sort l'iframe du flux (`position: absolute`)
      pour l'initialiser. Un plancher posé sur un élément hors flux ne compte
      plus dans la hauteur du parent : la carte tombe à 22px, et toute la page
      remonte de 110px.
   3. Vers 2150ms l'iframe revient dans le flux en annonçant 3791px — la hauteur
      de son document avant que sa propre feuille de style ne s'applique. La
      carte explose à 3802px et pousse tout de 3181px, puis se corrige à 731px
      120ms plus tard. Deux décalages géants en 120ms.

   Deux gardes, et une porte. Le plancher passe sur la CARTE : hors flux ou non,
   elle tient ses 731px. Le plafond sur l'IFRAME coupe le pic de 3791px à la
   hauteur réelle du formulaire, 720px : au chargement, plus rien ne bouge.

   La porte est le `:focus-within`. Le formulaire grandit légitimement quand il
   affiche ses erreurs de validation : mesuré à 817px après un envoi à vide. Ce
   cas n'arrive qu'APRÈS que le visiteur a cliqué dans l'iframe, ce qui rend
   celle-ci `:focus-within` côté page. Le plafond se lève alors, les erreurs
   s'affichent en entier, et ce décalage-là ne compte pas dans le CLS (Chrome
   ignore les décalages qui suivent une interaction de moins de 500ms).

   Si GHL change la hauteur du formulaire, les deux nombres sont à re-mesurer :
   ils ne se déduisent d'aucune règle. (2026-09-08) */
.fia-page .fia-form-card { min-height: 731px; }
.fia-form-chargement .fia-page .fia-form-card iframe { max-height: 720px; }