/* mug.css — page /mug : alignée sur le Design System officiel France IA
   (branche `docs`, "V2France IA - Design System.html", v1.0 août 2026).
   Écrit MOBILE FIRST : le point d'entrée réel de cette page est un scan de
   QR code (téléphone), pas un desktop. Les styles de base ciblent un petit
   écran ; min-width enrichit progressivement. Isolé à cette seule page —
   aucun fichier partagé (styles-fia.css, custom-fixes.*) n'est touché.

   Couche "fun" (2e passe) : vapeur, pulsation, confetti sobre, révélation
   au scroll, barre de progression, easter egg caché. Tout reste dans les
   interdits du DS : pas de dégradé, pas de rebond, palette à plat, Inter
   uniquement.

   Hero 2 blocs (3e passe, 04/09) : au-delà de 960px le hero suit le même
   patron que les LP (texte à gauche aligné à gauche, colonne à droite) -
   la colonne de droite porte la pastille de certification "tampon" (Tanguy
   Lepage, fondateur, qui valide les 2 offres) plutôt qu'une carte
   générique. En dessous de 960px le texte reste centré (préférence
   explicite conservée), la pastille disparaît. */

/* ---- tokens : valeurs exactes du :root du fichier source du DS ---- */
/* Le voile de préchargement, la barre de progression et la modale vivent HORS de
   tout wrapper `.fia-page` (ils sont en position:fixed, avant le premier wrapper
   dans le DOM). Les tokens déclarés sur `.fia-page` ne les atteignaient donc pas :
   `var(--blue)` & co. y étaient invalides, ce qui rendait l'icône du voile
   transparente, le confetti invisible, le mot en noir par défaut et la barre de
   progression sans couleur. On étend le même scope de tokens à ces éléments plutôt
   que de recopier la palette. */
/* 25/09 : .fia-mug-tricolor rejoint ce périmètre. Elle vit elle aussi HORS de
   tout .fia-page (position: fixed, avant le premier wrapper), donc var(--blue)
   y était invalide et le premier tiers de la signature tricolore se peignait
   en TRANSPARENT. Mesuré au navigateur : span 1 en rgba(0,0,0,0), span 2 en
   blanc, span 3 en rouge — le drapeau n'avait plus que deux bandes depuis que
   le header est passé en fixed. Blanc et rouge s'en sortaient parce qu'ils
   sont écrits en dur. */
.fia-page,
.fia-mug-tricolor,
.fia-mug-progress {
  --blue: #4379f2;        /* le bleu du logo, comme tout le site depuis le 09/09 */
  /* Le jeton --blue-label (#4169E1) a été retiré le 10/09/2026. Il avait été
     posé la veille pour les petits labels, que le bleu du logo laisse à 4,00:1
     sur blanc. Tanguy a tranché le même jour : « Le bleu du logo partout. » Ne
     pas le rouvrir sans lui : la page n'a plus qu'un seul bleu, et c'est le
     pigment du logo. */
  --blue-dark: #1d4ed8;   /* DS --royal-deep */
  --blue-soft: #EFF6FF;   /* DS --blue50 */
  /* Les jetons --blue-100 (#DBEAFE) et --blue-200 (#BFDBFE) ont été retirés le
     10/09/2026. Ils ne servaient qu'à trois bordures pâles, passées au bleu de
     marque sur demande de Côme (« oui, celui-là aussi »). Deux jetons sans
     emploi sont un piège : quelqu'un les rebrancherait en croyant suivre le
     Design System, et ferait revenir un second bleu sur la page. */
  --g100: #F3F4F6;        /* DS --g100 : piste de barre de progression */
  /* Blue 100. Retiré le 10/09 faute d'emploi, réintroduit le 25/09 avec le
     sien : le §6 du DS veut ce bleu-là sur la BORDURE des cartes au survol.
     Ce n'est ni du texte ni un aplat de repos, la décision « le bleu du logo
     partout » n'est pas touchée. */
  --blue-100: #DBEAFE;
  --red: #EF4444;         /* DS --rouge */
  --green: #10B981;
  --amber: #D97706;
  --amber-badge: #FFF8EB;
  --amber-50: #FFFBEB;
  --ink: #111827;         /* DS --ink */
  --muted: #4B5563;       /* DS --g600 */
  --g700: #374151;
  --line: #E5E7EB;        /* DS --g200 (bordures) */
  --line-card: #E2E8F0;
  /* 25/09 : blanc pur, la règle du DS reprise par les 10 landing pages refondues
     (« fond TOUJOURS blanc pur »). Le pied de page partagé lit var(--cream) : il
     portait ici un aplat bleu pâle, seule page du site à en garder un. */
  --cream: #FFFFFF;
  --dark: #1F2937;        /* DS neutre 800, la valeur des landing pages */

  /* Échelle des rayons du DS §11, alignée sur celle des landing pages. Ces
     valeurs vivaient en dur dans une douzaine de règles, avec la remarque
     répétée « les tokens --radius-lg et --radius-pill des LP n'existent pas
     ici ». Ils existent maintenant, et chaque rayon de la page dit à quelle
     catégorie de surface il appartient plutôt qu'un nombre isolé. */
  --radius: 12px;         /* carte standard */
  --radius-lg: 16px;      /* carte proéminente, média */
  --radius-pricing: 20px; /* carte d'offre, panneau de modale */
  --radius-pill: 9999px;  /* pastilles, puces, boutons ronds */

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
}
.fia-page h1, .fia-page h2, .fia-page h3, .fia-page h4, .fia-page .fia-h2,
.fia-page .fia-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
}
.fia-page .fia-eyebrow { font-weight: 700; letter-spacing: .14em; }

/* §9 du DS, « Web » : contenu max 1200-1280px centré, marges latérales 48-60px.
   On était à 1140px de large avec 20px de marge : le hook touchait presque les
   bords (« padding trop faible », 07/09). Les 48-60px sont une consigne desktop ;
   en mobile on garde 24px, une valeur de l'échelle du §10 et celle du reste du
   site. .fia-wrap (feuille partagée, 1080/24) est ramené au même gabarit, mais
   seulement sous .fia-page de cette page : sans ça le hero et les sections du bas
   n'auraient pas la même largeur. */
.fia-page .fia-mug-wide { max-width: clamp(1080px, 82vw, 1320px); margin: 0 auto; padding: 0 var(--sp2); }

/* ---- boutons ---- */
/* 25/09 : tout le gabarit des boutons vient maintenant de la feuille des LP. Ne
   reste ici que ce qu'un <button> n'hérite pas et qu'un <a> hérite : les CTA de
   cette page ouvrent une modale, ce sont donc des <button>, et sans ces trois
   propriétés ils sortaient en Arial, avec la bordure « outset » du navigateur et
   une hauteur de 4px inférieure à celle des CTA en <a>. */
.fia-page button.fia-btn { font-family: inherit; line-height: 1.5; border: 0; }
.fia-page button.fia-btn--outline { border: 1.5px solid var(--line); }
.fia-page button.fia-btn--ghost { border: 1.5px solid var(--blue); }

/* ---- signature tricolore (DS §1 "Marque") ---- */
/* Header toujours visible. styles-fia.css déclare bien `position: sticky` sur
   .fia-header, mais ici le header est enfermé dans son propre wrapper .fia-page qui
   se referme juste après lui : sticky n'a aucune hauteur de référence et le header
   défile. Exactement le cas de la home, corrigé de la même façon dans
   custom-fixes.css (que cette page ne charge pas) : on passe en `fixed` et on
   compense la hauteur sur le body. La signature tricolore passe fixed elle aussi,
   sinon le header la recouvrirait dès le chargement. */
.fia-mug-tricolor { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; display: grid; grid-template-columns: 1fr 1fr 1fr; height: 4px; }
.fia-page .fia-header { position: fixed; top: 5px; left: 0; right: 0; }
body { padding-top: 78px; }            /* 5 tricolore + 72 nav + 1 bordure */
html { scroll-padding-top: 100px; }    /* l'ancre #offres ne passe plus sous le header */
.fia-mug-tricolor span:nth-child(1) { background: var(--blue); }
.fia-mug-tricolor span:nth-child(2) { background: #fff; }
.fia-mug-tricolor span:nth-child(3) { background: #EF4444; }

/* ---- révélation d'ouverture (hero) ---- */
/* 28/09 (Côme, « l'animation est trop brouillon, ajouter un fade in ») : l'entrée
   était un glissement de 12px vers le haut, joué par cinq éléments à cinq instants
   différents, dont un bloc de photos de plusieurs centaines de pixels. Cinq choses
   qui bougent en même temps dans des sens et à des rythmes différents, c'est ce qui
   faisait brouillon. C'est maintenant un FONDU seul : rien ne se déplace, rien ne
   pousse la mise en page, et la cascade est douce (60ms d'écart, 550ms de fondu). */
@keyframes fia-mug-reveal { from { opacity: 0; } to { opacity: 1; } }
/* §12 du DS : « fade-in au scroll, easing ease-out, 200-300ms. Aucun bounce. »
   La révélation d'ouverture était à 500ms sur une courbe maison, hors de la
   fourchette. Les révélations au scroll, elles, étaient déjà à 300ms ease-out. */
.fia-mug-reveal { animation: fia-mug-reveal .55s ease-out both; }
.fia-mug-reveal--1 { animation-delay: 0s; }
.fia-mug-reveal--2 { animation-delay: .06s; }
.fia-mug-reveal--3 { animation-delay: .12s; }
.fia-mug-reveal--4 { animation-delay: .18s; }
.fia-mug-reveal--5 { animation-delay: .24s; }

/* ---- révélation au scroll (sections sous le hero) : n'agit que si le JS
   a confirmé être vivant (classe posée en tout premier dans <head>) —
   sinon le contenu reste visible par défaut, jamais caché sans filet. ---- */
.fia-js .fia-mug-scroll-reveal { opacity: 0; transition: opacity .5s ease-out; }
.fia-mug-scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fia-mug-reveal, .fia-js .fia-mug-scroll-reveal { animation: none; opacity: 1; transform: none; transition: none; }
}

/* ---- barre de progression de scroll ---- */
.fia-mug-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--blue); width: 0%; z-index: 10002; }

/* Le voile de préchargement a été supprimé le 08/09 (demande explicite) :
   markup, animations, confettis et barre de progression sont partis ensemble.
   La page s'ouvre directement sur son hook. */

/* Rôle « H2 » du DS : 40-42px, 700, letter-spacing -0.025em, line-height 1.25.
   styles-fia.css (partagé avec tout le site) est à -.02em et 1.1 : on recale pour
   cette page seulement. Le plancher passe de 28 à 32px pour ne pas descendre trop
   loin sous le rôle en mobile. */
.fia-page h2.fia-h2 { font-size: clamp(32px, 3.4vw, 40px); letter-spacing: -.025em; line-height: 1.25; }
/* Rôle « Lead / sous-titre » : 300 (Light), 17-24px, lh 1.53. La feuille partagée
   le rend en 500, ce qui en fait un body gras et non un lead. */
/* Un seul rôle de sous-texte sur toute la page (demande du 10/09 : « même
   police, même couleur, même taille »). Le 300 (Inter Light) du rôle « Lead »
   du DS était la vraie cause du « la police n'est pas la même » : à côté d'un
   texte de carte en 400, Light lit comme une autre fonte. Un seul poids, une
   seule couleur, une seule taille — 18px, dans la fourchette 17-24 du rôle. */
.fia-page .fia-lead { font-weight: 400; font-size: 18px; line-height: 1.53; color: var(--muted); max-width: 620px; }

/* ══════════════════════ HERO ══════════════════════ */
/* padding bas de 56px, la même valeur que le padding vertical de .fia-section--tight
   sur lequel tourne toute la page : le vide sous le hero devient identique au vide
   entre deux sections (56 + 56). Il était de 0 avant, le hero collait à la section
   suivante. */
/* §10 du DS : les espacements se prennent dans 8/12/16/20/24/32/36/48/60/96.
   40, 56 et 88 n'y sont pas — remplacés par 48, 60 et 96. */
/* 60px en haut comme en bas, à toutes les largeurs (10/09, « padding
   incohérent ») : le hero montait à 96px en haut pour 60 en bas au-delà de
   960px, seule section de la page à ne pas être symétrique, et la seule à ne
   pas ouvrir sur la même respiration que les autres. */
/* 25/09 (Côme, « le padding ») : j'avais lu la première remarque comme « trop de
   blanc » et retiré le padding bas du hero (60px -> 0). La remarque suivante tranche
   dans l'autre sens, « un padding plus important » : le hero respire davantage, en
   haut comme en bas. Valeurs prises sur l'échelle des LP (--sp6/--sp7), pas à l'oeil.
   En dessous de 700px elles retombent, un téléphone n'a pas 86px à donner au blanc. */
/* 28/09 (Côme, « le CTA vient après la ligne de flottaison, corriger ça » et
   « mobile first ») : le hero se serre, en partant du téléphone. Le rembourrage haut
   passe de 64 à 26px en mobile et de var(--sp7) (80px) à 40px en desktop. Le
   rembourrage bas ne bouge quasiment pas : il ne coûte rien au premier écran. */
/* 28/09 (Côme, « padding trop important entre CTA et avis ») : le vide sous le CTA
   cumulait trois valeurs — 68px de rembourrage bas du hero, 22px de marge du P.-S.
   et les 110px (--sp8) de rembourrage haut de la section d'avis, soit 200px de blanc
   pour une seule respiration. Le hero descend à 24px en bas et la bande d'avis à
   --sp3 : 57px au total, l'écart normal entre deux blocs de la page. */
/* 28/09, 3e passe (Côme : « la hero semble écrasée », « besoin d'aération », « la
   vidéo témoignage et les avis doivent arriver APRÈS la ligne de flottaison »).
   Deux consignes qui se tenaient jusqu'ici : le CTA doit être au-dessus de la ligne
   (27/09) ET rien d'autre ne doit apparaître avant. Le hero prend donc une hauteur
   PLANCHER d'un écran moins tout ce qui le surplombe (73px de bandeau + 5px de
   filet tricolore, mesurés au navigateur, pas déduits), et son contenu s'y
   centre : sur un écran haut, l'air va à l'intérieur du hero au lieu de laisser
   monter la bande d'avis. 100svh et non 100vh : sur téléphone, 100vh compte la
   barre d'URL rétractée et pousserait le CTA sous la ligne. La ligne en vh reste
   pour les navigateurs qui ignorent svh. */
/* 28/09 (Côme : « la hero est trop pauvre, plus qualitatif »). Le fond était un blanc
   plat avec deux pastilles aux coins. À la place, un lavis : le bleu clair de la marque
   en haut, éteint avant la moitié de la hauteur. C'est le fond de la référence envoyée
   le 25/09, ramené à un seul jeton (--blue-soft) au lieu d'un arc-en-ciel. Il est posé
   en ::before et non en background pour ne pas écraser le #fff qui reste la surface. */
.fia-mug-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 46%;
  background: linear-gradient(180deg, var(--blue-soft) 0%, rgba(239, 246, 255, 0) 100%);
  opacity: .72;
  pointer-events: none;
}
.fia-mug-hero {
  position: relative; background: #fff; overflow: hidden;
  padding: 12px 0 20px;
  min-height: calc(100vh - 78px);
  min-height: calc(100svh - 78px);
  display: grid; align-content: center;
}
@media (min-width: 700px) { .fia-mug-hero { padding: 14px 0 24px; } }
/* L'aération ne s'ouvre qu'à partir de 760px de HAUTEUR. En dessous (un portable
   1280x640, un téléphone en paysage) la hauteur manque déjà et le hero garde le
   rythme serré qui tient le CTA au-dessus de la ligne. */
@media (min-height: 760px) {
  .fia-mug-hero { padding: clamp(14px, 2.4vh, 30px) 0 clamp(24px, 4.4vh, 50px); }
  .fia-mug-hero h1 { margin-bottom: clamp(24px, 3.6vh, 38px); }
  .fia-page p.fia-mug-hero__lead { margin-bottom: clamp(26px, 3.6vh, 38px); }
}
.fia-mug-hero > .fia-mug-wide { position: relative; z-index: 1; }
.fia-mug-hero__blob { position: absolute; border-radius: var(--radius-pill); pointer-events: none; }
.fia-mug-hero__blob--1 { top: -90px; right: -90px; width: 220px; height: 220px; background: var(--blue-soft); opacity: .5; }
.fia-mug-hero__blob--2 { bottom: -70px; left: -90px; width: 180px; height: 180px; background: var(--amber-50); opacity: .4; }

/* tampon décoratif : à cheval sur le bord droit du hook, opacité faible
   pour ne jamais gêner la lecture du H1 - purement graphique (voir
   commentaire HTML sur la différence avec le vrai cachet légal). */
/* 28/09 : le tampon décoratif du hero est supprimé (voir index.html). */

/* 28/09 (Côme) : « une hero comme l'image, mais avec les photos en plus sur les
   côtés ». La grille a donc TROIS colonnes en desktop : cadres à gauche, le bloc de
   la maquette au centre, cadres à droite. En dessous de 1080px il n'y a plus la
   largeur pour flanquer quoi que ce soit : les deux côtés se rejoignent en rangée 1,
   au-dessus du texte, et redeviennent l'éventail. C'est la même grille dans les deux
   cas, seules les zones changent — aucun bloc n'est dupliqué ni caché pour ça. */
.fia-mug-hero__grid {
  position: relative; display: grid; grid-template-columns: auto auto;
  justify-content: center; align-items: start; gap: 0; text-align: center;
  --pw: 52vw; --pr: .28;
}
.fia-mug-hero__cote { display: flex; align-items: flex-start; }
.fia-mug-hero__cote--g { grid-column: 1; grid-row: 1; }
.fia-mug-hero__cote--d { grid-column: 2; grid-row: 1; margin-left: calc(var(--pw) * -1 * var(--pr)); }
/* Jusqu'à 700px : UN cadre par côté, donc deux en tout, et nettement plus grands
   que les trois d'avant (52vw contre 46%). La page se lit d'abord sur téléphone. */
.fia-mug-hero__cote > .fia-mug-pola:nth-of-type(n + 2) { display: none; }
.fia-mug-hero__cote--g .fia-mug-pola--1 { --rot: -5deg; }
.fia-mug-hero__cote--d .fia-mug-pola--3 { --rot: 5deg; }

/* 25/09, 4e passe : la colonne ne plafonne plus à 560px. Elle bornait la longueur
   de ligne de TOUS ses enfants, donc aussi les photos, qui rétrécissaient entre 560
   et 960px de large (mesuré : 222px de carte à 560, 213px à 768, alors que la place
   existait). Chaque élément de copie porte maintenant son propre plafond, et le bloc
   des photos prend la largeur du conteneur. */
.fia-mug-hero__text { grid-column: 1 / -1; grid-row: 2; max-width: 100%; margin-top: clamp(16px, 2.2vh, 26px); }

/* L'icône mug intégrée au hook a été supprimée le 09/09 (demande explicite) :
   .fia-mug-icon-inline, .fia-mug-steam, .fia-mug-confetti et leurs deux
   animations partent avec elle, plus rien ne les portait. */

/* badge + pulsation ponctuelle */
/* .fia-mug-badge (« Message trouvé ») retiré le 07/09 avec son markup. */
@keyframes fia-mug-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }

/* salutation dynamique : "Bonjour" par défaut (rendu serveur), le JS le
   remplace par "Bonsoir" le soir — jamais vide sans JS */
/* rôle « Lead » (300) en text-accent #4169E1 : le 20px/600 d'avant ne correspondait
   à aucun rôle de l'échelle. */
#mug-greeting { color: var(--blue); font-weight: inherit; }

/* 52px et non 76 (08/09) : le hook dicté fait 103 caractères, il tombait sur
   5 lignes et 406px de haut à 76px, ce qui remplissait l'écran à lui seul.
   À cette longueur c'est le rôle « H1 » du DS §4 (48px) qui s'applique, pas
   le rôle « Display H1 » (72-96px) réservé aux hooks courts. */
/* Rôle « H1 » du DS §4 au pied de la lettre : 48px, 700, line-height 1.0,
   letter-spacing -1.2px. La page était à 52px/800/1.08/-1.04px, quatre écarts
   sur un seul rôle. Le 52px datait du 08/09, quand il s'agissait de descendre
   du rôle « Display H1 » (72-96px) trop grand pour un hook de 103 caractères :
   le bon palier en dessous, c'est 48. */
/* 28/09, 2e message (Côme, « la police ne semble pas être en accord avec le Design
   System ») : le titre était monté à 64px / -1,6px le matin même. 64 n'est AUCUN rôle
   du DS §4 : il y a « H1 » (48px, 700, line-height 1.0, letter-spacing -1,2px) et
   « Display H1 » (72 à 96px, réservé aux hooks courts). 64 tombait entre les deux, et
   le letter-spacing était inventé. Retour au rôle « H1 » au pied de la lettre.
   Le hook reste ce que l'œil attrape en premier : rien d'autre sur la page n'approche
   48px, et l'accroche est à 17. C'est l'écart qui fait la hiérarchie, pas la taille. */
/* 28/09, 2e passe (Côme : « la hero est un peu chargée, réduire le sous-texte pour
   augmenter le padding »). Le sous-texte est passé de 141 à 101 caractères ; la place
   gagnée va aux écarts entre les quatre étages du hero, qui étaient tombés à 12-18px
   quand il a fallu remonter le CTA au-dessus de la ligne de flottaison.
   Ces écarts se mesurent en VH et non en VW, comme la largeur des polaroïds
   (min(28%, 40vh)) : sur un écran bas — un portable 1280x640 — une marge en vw
   s'ouvre alors que la hauteur manque, et le CTA repasse sous la ligne de
   flottaison. En vh, l'air ne vient que là où il y a de la hauteur à donner. */
/* 28/09 : la seconde phrase du titre passe au bleu de marque, comme le <em> des H2.
   Elle a porté un dégradé de bleus l'après-midi du 28/09 ; il est retiré le même jour
   à la vérification du Design System demandée par Côme (§3 : « AUCUN dégradé,
   couleur plate uniquement »). Bleu plein, donc. */
.fia-mug-hero h1 em { font-style: normal; color: var(--blue); }
.fia-mug-hero h1 { max-width: 1000px; margin: 0 auto clamp(14px, 2.2vh, 24px); font-size: clamp(24px, 5.2vw, 48px); font-weight: 700; line-height: 1.05; letter-spacing: -1.2px; }

/* ── 25/09, 2e passe : surtitre et accroche du hero (section 1 du brief) ──
   Le surtitre est le rôle « Eyebrow » du DS : petit, gras, bleu de marque, une
   seule ligne de sens. L'accroche est le rôle « Lead » (17px, 1,55), plafonnée à
   58 caractères par ligne pour rester lisible sur la colonne large du desktop.
   Le sélecteur porte `.fia-page p` (0,1,1) pour passer devant la règle de la
   feuille des LP, qui fixe la famille et la taille de tous les <p> de la page. */
/* `.fia-mug-hero__sur` (la ligne bleue au-dessus du titre) est retirée avec son
   markup le 25/09. Rien d'autre ne la portait.

   L'accroche, elle, monte d'un rôle. Elle était en 17px gris sous trois lignes de
   photos et se perdait (Côme : « on a un peu plus de visu sur l'accroche, que je
   trouve un peu perdue »). Elle passe au corps de la « Lead » haute du DS, à l'encre
   pleine et non en gris, et son texte est trois fois plus court : c'est le couple
   taille + longueur qui la fait exister, pas la taille seule.
   28/09 : elle REDESCEND à 17px (« la police de ce texte est trop importante », et
   « le regard doit être attiré vers le hook »). Elle garde l'encre pleine et son
   texte court, c'est ce qui la rend lisible sans qu'elle concurrence le titre. */
/* La taille ne bouge PAS : 17px est le plancher du rôle « Lead » du DS §4 (17-24px),
   et le clamp descend déjà à 16 sous 1 333px. Descendre encore sortirait de l'échelle,
   ce qui est exactement ce qui avait été reproché le matin même. C'est la longueur du
   texte qui chargeait le hero, pas sa taille : c'est elle qui a été réduite. */
.fia-page p.fia-mug-hero__lead { max-width: 620px; margin: 0 auto clamp(16px, 2.6vh, 26px); font-size: clamp(16px, 1.2vw, 17px); line-height: 1.5; color: var(--ink); }

/* ── Les polaroids ──
   28/09 (Côme) : « plus d'images », « agrandis les photos », « le padding est trop
   important entre le hook et les images », « une petite animation au survol ».

   PLUS ET PLUS GRANDES, en même temps, c'est arithmétique : dans une largeur donnée,
   n cartes qui se chevauchent de o ne peuvent grandir que si la largeur augmente ou
   si le recouvrement augmente. Les deux leviers sont tirés. Le bloc SORT du wrap
   (margin négatif calculé, jamais une valeur en dur) pour occuper 96vw au lieu des
   ~1140px du conteneur, et le recouvrement passe à 36 % de la carte.
   Résultat mesuré à 1440 : 5 cartes de 387px au lieu de 3 cartes de 341px.

   Sous 900px, on retombe à 3 cartes : cinq cartes sur un téléphone donneraient des
   vignettes, l'inverse de ce qui est demandé. Les 2 dernières sont simplement
   masquées, ce sont les 3 mêmes photos qu'avant qui restent.

   Les largeurs et le recouvrement sont en POURCENTAGE du conteneur, jamais en pixels,
   et se règlent par deux variables : n x --pw moins (n-1) x --po fait toujours 100 %,
   donc rien ne déborde du `overflow: hidden` du hero à aucune largeur.

   Le décalage vertical n'est pas décoratif : les cartes du dessus recouvrent un tiers
   des voisines, légende comprise. Descendre les voisines fait passer leur bande
   manuscrite sous le bord bas de celle qui les couvre. Un contrôle d'occultation le
   vérifie sur 11 largeurs.

   Les photos gardent leur format d'origine (`height: auto`, aucun `aspect-ratio`,
   aucun `object-fit`) : le cadre carré du vrai polaroid rognerait 25 % de chacune,
   et la consigne du 25/09 est « pas d'images tronquées, pas de crop, rien ». */

/* Le cadre lui-même ne bouge pas d'un côté à l'autre : même fond blanc, même bande
   basse, même ombre en trois plans. Seules sa largeur (--pw) et sa rotation (--rot)
   changent selon la disposition. */
.fia-mug-pola { --rot: 0deg; flex: 0 0 auto; width: var(--pw); margin: 0; background: #fff; border-radius: 3px; padding: 10px 10px 30px; border: 1px solid rgba(15, 23, 42, .06); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 12px 26px rgba(15, 23, 42, .13), 0 34px 62px rgba(15, 23, 42, .10); transform: rotate(var(--rot)); }
/* Le recouvrement est une FRACTION DE LA CARTE (--pr), pas un pourcentage du
   conteneur : quand la carte rétrécit, le recouvrement rétrécit avec elle. En
   pourcentage du conteneur, une carte plus étroite se retrouvait à moitié cachée. */
.fia-mug-hero__cote > .fia-mug-pola + .fia-mug-pola { margin-left: calc(var(--pw) * -1 * var(--pr)); }
.fia-mug-pola img { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--blue-soft); }

/* 700 à 1080px : les quatre cadres, en un seul éventail au-dessus du texte. La
   largeur est plafonnée par la HAUTEUR de la fenêtre autant que par sa largeur : une
   photo en 4/3 coûte 0,75 x sa largeur, et sur une tablette posée à plat c'est la
   hauteur qui manque en premier. */
@media (min-width: 700px) {
  .fia-mug-hero__grid { --pw: min(29vw, 32vh); --pr: .3; }
  .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(2) { display: block; }
  .fia-mug-hero__cote--g .fia-mug-pola--1 { --rot: -6deg; margin-top: 2%; }
  .fia-mug-hero__cote--g .fia-mug-pola--2 { --rot: -2deg; z-index: 2; }
  .fia-mug-hero__cote--d .fia-mug-pola--3 { --rot: 2deg;  z-index: 2; }
  .fia-mug-hero__cote--d .fia-mug-pola--4 { --rot: 6deg;  margin-top: 2%; }
}

/* À partir de 1080px : les deux côtés se détachent et encadrent le bloc central.
   Chaque côté empile ses deux cadres, décalés vers l'extérieur et penchés en sens
   inverse, comme deux tirages posés l'un sur l'autre. Le bloc central est plafonné à
   760px : à 600 comme sur la maquette, le titre tombait sur quatre lignes et la coche
   la plus longue se coupait en deux. 760 est la largeur où le titre tient en deux
   lignes, les quatre coches en deux colonnes d'une ligne, et où il reste de la place
   pour un cadre de chaque côté. */
@media (min-width: 1080px) {
  .fia-mug-hero__grid {
    /* La grille sort de .fia-mug-wide (1320px) : à cette largeur, une fois le bloc
       central servi, il ne restait pas de quoi loger un cadre de chaque côté sans
       qu'il déborde sur le texte. Elle reprend le même calcul de débordement que
       l'éventail d'avant. */
    /* 28/09, 15 h 15 (Côme : « augmenter la taille des images sur les côtés, juste
       en desktop ») : la grille prend toute la largeur moins 24px de chaque côté
       (au lieu de 94vw plafonné à 1500px), et les cadres passent de
       min(290px, 26vh) à min(340px, 33vh). Troisième borne : la largeur réelle
       d'une colonne de côté, moins 16px, pour qu'un cadre ne passe jamais sur le
       texte (à 1080px il le recouvrait de 67px avant cette passe). */
    width: min(1680px, calc(100vw - 48px));
    margin-left: calc((100% - min(1680px, calc(100vw - 48px))) / 2);
    grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr);
    align-items: center;
    /* 15 h 30 (Côme : « augmente la taille, si y a du chevauchement le texte passe
       devant ») : jusqu'à 400px et 38vh, et jusqu'à 56px de PLUS que la colonne de
       côté (--col). Le cadre déborde alors vers le texte, jamais hors de l'écran
       (voir l'ancrage en fin de fichier), et le texte passe devant. */
    --col: calc((min(1680px, calc(100vw - 48px)) - 760px) / 2);
    --pw: min(400px, 38vh, calc(var(--col) + 56px)); --pr: 0;
    --zz: max(0px, calc(var(--col) - var(--pw)));
  }
  .fia-mug-hero__cote { flex-direction: column; }
  .fia-mug-hero__cote--g { grid-column: 1; grid-row: 1; align-items: flex-end; }
  .fia-mug-hero__text    { grid-column: 2; grid-row: 1; margin-top: 0; }
  .fia-mug-hero__cote--d { grid-column: 3; grid-row: 1; align-items: flex-start; margin-left: 0; }
  .fia-mug-hero__cote > .fia-mug-pola + .fia-mug-pola { margin-left: 0; margin-top: calc(var(--pw) * -.08); }
  /* Le titre est plafonné à 1000px plus bas dans la feuille, pour la disposition
     centrée. Ici la colonne du milieu en fait 720 : sans ce plafond, le titre
     débordait sous les cadres de gauche et de droite, qui passaient par-dessus. */
  /* text-wrap: balance répartit les lignes du titre à égalité au lieu de laisser un
     mot seul en dernière ligne. Ignoré par les navigateurs qui ne le connaissent pas,
     où le titre se coupe comme avant. */
  .fia-mug-hero h1 { max-width: 100%; text-wrap: balance; }
  .fia-page p.fia-mug-hero__lead { text-wrap: balance; }
  .fia-mug-hero__cote--g .fia-mug-pola--1 { --rot: -7deg; align-self: flex-start; z-index: 2; margin-top: 0; }
  .fia-mug-hero__cote--g .fia-mug-pola--2 { --rot: 3.5deg; align-self: flex-end; }
  .fia-mug-hero__cote--d .fia-mug-pola--3 { --rot: 7deg; align-self: flex-end; z-index: 2; margin-top: 0; }
  .fia-mug-hero__cote--d .fia-mug-pola--4 { --rot: -3.5deg; align-self: flex-start; }
}

/* Entre 1080 et 1279px, la colonne du milieu descend à 680px : à 760, les côtés
   n'avaient plus que 120px de large et les cadres rapetissaient. À 680, ils gardent
   160 à 210px et le titre passe sur quatre lignes, sans rien pousser sous la ligne
   de flottaison (vérifié à 1080×800 et 1180×820). */
@media (min-width: 1080px) and (max-width: 1279px) {
  .fia-mug-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
    --col: calc((100vw - 48px - 680px) / 2);
  }
}

/* 28/09 (Côme : « toujours un peu vide sur la version desktop »). Le bloc central
   faisait 400px de haut dans un hero de 820 : les deux colonnes de photos ne
   remplissaient que la moitié du vide. Un TROISIÈME cadre par côté, mais seulement
   quand l'écran a la hauteur de le porter (820px). En dessous, deux par côté comme
   avant : trois cadres empilés sur un portable 1280x640 repousseraient le bouton
   sous la ligne de flottaison, et c'est la règle qui prime. */
@media (min-width: 1080px) and (min-height: 820px) {
  .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(3) { display: block; }
  .fia-mug-hero__cote--g .fia-mug-pola--5 { --rot: -4deg; align-self: flex-start; }
  .fia-mug-hero__cote--d .fia-mug-pola--6 { --rot: 4deg;  align-self: flex-end; }
}

/* 28/09 : zoom au survol (demande explicite). La rotation vit dans --rot pour que
   le survol puisse la RÉPÉTER : `transform` est une seule propriété, un
   `scale()` au survol effacerait l'inclinaison de la carte s'il ne la reprenait pas.
   La carte survolée passe au-dessus de toutes les autres, ombre comprise.
   `@media (hover: hover)` : sur un écran tactile, `:hover` reste collé après le
   toucher, la carte resterait agrandie. */
@media (hover: hover) and (pointer: fine) {
  .fia-mug-pola { transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease; }
  .fia-mug-pola:hover { transform: rotate(var(--rot)) scale(1.035); box-shadow: 0 2px 4px rgba(15, 23, 42, .10), 0 20px 40px rgba(15, 23, 42, .18), 0 48px 84px rgba(15, 23, 42, .14); z-index: 9; }
}
/* Mouvement réduit : le zoom tombe, l'ombre et la remontée au premier plan restent.
   Le survol continue donc de désigner la carte, sans rien faire bouger. */
@media (prefers-reduced-motion: reduce) {
  .fia-mug-pola { transition: none; }
  .fia-mug-pola:hover { transform: rotate(var(--rot)); }
}

/* 17px et non 18 (07/09, capture à l'appui : « le texte Bonjour est trop
   gros »). 17px reste le plancher de la « Lead » du DS §4 ; la phrase a été
   raccourcie en même temps, c'est elle qui pesait le plus. */

 /* 25/09, 2e passe : le bandeau de preuve est descendu en tête de la bande d'avis,
    le bouton ferme donc la colonne de texte et n'a plus rien à espacer en dessous. */
.fia-mug-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 0; }
/* Le bouton secondaire est aussi haut que le principal : .fia-btn--outline porte un
   padding compact pensé pour un lien dans le texte, qui donnait deux boutons de
   hauteurs différentes côte à côte. Il reprend ici celui du bouton plein, moins le
   demi-pixel de bordure qu'il a en plus : sans ça les deux boutons finissent à 1px
   d'écart, ce qui se voit quand ils sont posés l'un à côté de l'autre. */
/* Le bouton du hero est plus gros que les autres de la page. C'est la règle des pages
   d'upsell : un seul geste en haut d'écran, et il se voit de loin. */
/* 28/09 (« le CTA fait trop massif sur mobile ») : le gros bouton est une règle de
   DESKTOP. En téléphone il tenait sur deux lignes et occupait un cinquième du premier
   écran. Il y revient à la taille courante des boutons de la page, et le libellé tient
   alors sur une seule ligne dès 360px. */
.fia-page .fia-mug-hero__actions .fia-btn--xl { font-size: 15px; padding: var(--sp0) var(--sp2); border-radius: 10px; }
@media (min-width: 700px) {
  .fia-page .fia-mug-hero__actions .fia-btn--xl { font-size: 17px; padding: calc(var(--sp1) + 3px) calc(var(--sp3) + 10px); border-radius: 12px; }
}
/* Les trois points de réassurance sous les boutons. C'est la bande que porte toute page
   d'upsell sous son CTA : ce qu'on achète, dit en trois faits, pas en arguments. Ils se
   replient les uns sous les autres en téléphone. */
.fia-mug-hero__points { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; gap: 10px 28px; margin: clamp(16px, 2.2vh, 24px) auto clamp(18px, 2.4vh, 26px); padding: 0; list-style: none; width: fit-content; max-width: 100%; text-align: left; }
@media (min-width: 620px) { .fia-mug-hero__points { grid-template-columns: repeat(2, minmax(0, auto)); } }
.fia-page .fia-mug-hero__points li { display: flex; align-items: center; gap: 9px; font-size: 15px; line-height: 1.35; color: var(--ink); }
/* Pastille pleine plutôt qu'une coche nue : c'est ce qui distingue une liste de
   réassurance d'une liste à puces, sur toutes les pages d'upsell regardées. */
.fia-mug-hero__check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--blue); color: #fff; }
.fia-mug-hero__check svg { width: 12px; height: 12px; }

/* 28/09 : la rangée de visages de formateurs est supprimée (voir index.html), ses
   règles partent avec elle. */

/* Trustpilot et les 2 vignettes sur UNE seule ligne, centrés verticalement
   (demande du 07/09 : « aligne le Trustpilot avec les 2 vignettes »). Le
   gabarit Micro Star tient sur une ligne de 24px, donc à la hauteur des
   pastilles ; en dessous de ~700px de large la ligne se replie d'elle-même,
   Trustpilot au-dessus des 2 vignettes. */
.fia-mug-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
/* 25/09 : 270x24 -> 292x28. Le logo « Trustpilot » du gabarit micro a été vu coupé
   sur une capture, juste après les étoiles : l'iframe fait exactement la taille de son
   contenu et le moindre arrondi de rendu le rogne. Quelques pixels de marge coûtent
   moins cher qu'un logo tiers tronqué. */
.fia-mug-proof__tp { flex: 0 0 auto; width: min(292px, 100%); height: 28px; }

/* 25/09 (Côme, « vérifie que tout s'affiche parfaitement sur mobile et tablette ») :
   les deux boutons du carrousel formateurs sont posés à -24px de la piste, donc hors
   du conteneur. Sur grand écran la marge du wrap les rattrape ; en dessous de 700px
   elle n'existe plus et le bouton gauche sortait de l'écran (mesuré : bord gauche à
   -4px sur 390px de large), coupé par l'écran. Ils rentrent dans le carrousel.
   Le même défaut existe sur les landing pages, qui portent la même règle. */
@media (max-width: 700px) {
  .fia-page .fia-carousel__btn--prev { left: 6px; }
  .fia-page .fia-carousel__btn--next { right: 6px; }
}
/* Texte en --blue-dark (#1D4ED8) et non en bleu de marque : à 12px sur le bleu
   pâle du fond, le bleu du logo tombait à 3,67:1, et le bleu du DS n'aurait fait
   que 4,45:1, toujours sous les 4,5:1 exigés. Le #1D4ED8 met la pastille à
   6,16:1. La bordure, elle, reste au bleu de la page : c'est un contour, pas du
   texte, et 3,67:1 dépasse les 3:1 demandés pour un composant. */
/* `.fia-mug-proof__chip` (pastille « Certifié Qualiopi ») : retirée le 28/09 à
   14 h 30 à la demande de Côme, avec ses règles. Qualiopi reste en pied de page. */
/* Note des avis Google (25/09), posée à la place de « 1 400+ professionnels formés ».
   Sur une ligne, à la hauteur d'œil du widget Trustpilot voisin : les deux preuves se
   lisent comme une paire, et la pastille Qualiopi ferme la ligne. Étoiles au jaune du
   Design System des LP (#F5B301), pas au bleu de marque : ce sont des étoiles Google.
   Le 5,0 n'est pas en gras par décoration, c'est la valeur portée par la phrase. */
.fia-mug-proof__google { display: inline-flex; align-items: center; gap: 8px; }
.fia-mug-proof__google-nom { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; }
.fia-mug-proof__google-etoiles { color: #F5B301; font-size: 17px; line-height: 1; letter-spacing: 2px; }
.fia-mug-proof__google-val { font-size: 15px; font-weight: 700; color: var(--ink); }

/* ══ BANDEAU DE PREUVE (section 2 du brief du 25/09) ══
   « Bandeau sobre et épuré » : une ligne de notes et de certification, puis un
   avis réel en dessous, séparés par un filet. Posé en tête de la bande d'avis,
   dont il devient l'en-tête. Sur mobile la ligne de notes se replie d'elle-même
   (flex-wrap), les trois éléments restent centrés et aucun ne se coupe. */
/* 28/09 : l'avis écrit (.fia-mug-preuve__avis) a été retiré de cette bande, le
   témoignage vidéo le remplace sous le carrousel. Il ne reste que la ligne de notes,
   remontée dans le hero le même jour. */
.fia-mug-preuve { max-width: 900px; margin: 0 auto; text-align: center; }
.fia-mug-preuve__notes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; }
.fia-mug-preuve__avis { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.fia-page .fia-mug-preuve__avis blockquote { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.55; color: var(--ink); font-style: italic; }
.fia-mug-preuve__avis figcaption { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.fia-mug-preuve__avis figcaption strong { color: var(--ink); font-weight: 700; }
.fia-mug-preuve__avis figcaption span::before { content: " · "; }

/* Limite assumée sous les 2 cartes d'offre : du texte de note, centré, qui ne
   doit pas peser autant que les cartes au-dessus. */
.fia-page p.fia-mug-limite { max-width: 720px; margin: 26px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--muted); }
/* 25/09 : la ligne « Note 5,0 · 139 avis » est retirée du markup (Côme), avec ses
   trois règles : score, valeur et lien vers la fiche Google. Le bloc garde le nom
   et les étoiles. */

/* ══════════════════════ MUR DE PHOTOS ══════════════════════
   25/09/2026 : .fia-mug-photowall est retiré. Il était une recopie renommée du
   .fia-photowall des LP, faite quand cette page servait la feuille de l'accueil,
   qui ne porte pas ce composant. La page sert maintenant la feuille des LP : le
   vrai composant est là, avec ses jetons, ses 260px de haut et sa boucle. Un seul
   écart disparaît au passage, et c'est un gain : la recopie forçait `aspect-ratio:
   3/4` sur des photos paysage, le composant des LP respecte le format de chacune
   (corrigé chez eux le 22/09). */

/* pastille "tampon" (Tanguy Lepage) retirée le 04/09 (capture à l'appui) -
   .fia-mug-hero__visual retirée du HTML avec elle, donc rien à styler ici
   pour l'instant (en attente d'un vrai tampon France IA, voir décision de
   session avant de la remplir à nouveau). */

/* ---- bande d'avis Google : cartes sur la même piste défilante que les photos ---- */
/* Recopié tel quel du <style> en ligne des LP. Les cartes ont une hauteur fixe et le
   verbatim est coupé à quatre lignes : sans ça la signature saute d'une carte à
   l'autre (Côme, 23/09, « même texte au même endroit, même taille de bloc »). */
/* 28/09, 3e passe : la bande de notes est remontée DANS le hero, sa section a disparu.
   Elle ferme la colonne centrale, sous le bouton, et se replie d'elle-même en dessous
   de 700px (le gabarit Trustpilot fait 292px de large, il prend sa propre ligne). */
.fia-mug-hero .fia-mug-preuve { margin: clamp(20px, 2.6vh, 30px) auto 0; max-width: 100%; }
.fia-mug-hero .fia-mug-preuve__notes { gap: 12px 18px; }
/* Les offres suivent maintenant le hero directement. Le rembourrage haut de
   .fia-section (110px) creuserait un trou juste sous la ligne de flottaison. */
.fia-page #offres { padding-top: var(--sp4); }
.fia-page .fia-avis-google .fia-photowall { margin-top: 0; }
.fia-page .fia-avis-google__track { animation-duration: 70s; }
/* 27 photos par bande : la durée suit au prorata pour garder la vitesse des LP
   (38 s pour 7 photos → 147 s pour 27). La piste des avis est recalée sur la même
   vitesse en px/s par le script en bas de index.html. */
.fia-page .fia-photowall__track:not(.fia-avis-google__track) { animation-duration: 147s; }
.fia-page .fia-avis-card { flex: 0 0 auto; width: 340px; height: 214px; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.fia-page .fia-avis-card__note { display: flex; align-items: center; gap: 8px; }
.fia-page .fia-avis-card__stars { color: #F5B301; letter-spacing: 2px; font-size: 15px; }
.fia-page .fia-avis-card__valeur { font-size: 13px; font-weight: 700; color: var(--ink); }
.fia-page .fia-avis-card blockquote { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fia-page .fia-avis-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin-top: auto; }
.fia-page .fia-avis-card figcaption strong { color: var(--ink); }
.fia-page .fia-avis-card figcaption span { color: var(--muted); font-size: 12px; }
/* En dessous de 360px de large, le titre tombe sur cinq lignes et l'accroche sur six :
   le bouton passait sous la ligne de flottaison sur un écran de 568px de haut. Titre et
   accroche descendent d'un cran, et l'éventail s'aplatit encore. */
@media (max-width: 360px) {
  .fia-mug-hero h1 { font-size: 24px; letter-spacing: -.8px; margin-bottom: 8px; }
  .fia-page p.fia-mug-hero__lead { font-size: 15px; line-height: 1.45; margin-bottom: 12px; }
  /* 28/09 : l'air rendu au hero ne vaut pas pour le plus petit écran, où chaque pixel
     compte pour le CTA. Les écarts y restent à leur ancienne valeur. */
  /* 9 % et non 6 : à 6, le contrôle d'occultation voyait le bout de la légende de la
     carte 1 passer sous celle du milieu à 320px. Un bout de légende mangé coûte plus
     cher que les ~10px de hauteur que ça rend au premier écran. */
}

@media (max-width: 560px) { .fia-page .fia-avis-card { width: 280px; height: 208px; } }

/* ══════════════════════ COMPOSANTS REPRIS DES LP ══════════════════════ */
/* 25/09/2026 (Côme, « reprends le design et la structure des LP ») : trois blocs
   de cette page vivaient sur des composants maison — .fia-mug-fiche (les 3 étapes),
   .fia-mug-offer (les 2 offres), .fia-mug-case (les 3 exemples). Ils sont remplacés
   par les composants des landing pages, dont le CSS vit dans le <style> en ligne de
   landing-page/formation-ia-dirigeant/index.html (et non dans la feuille partagée).
   Il est recopié ici À L'IDENTIQUE, pas réécrit, pour que les deux pages rendent
   pareil. Les écarts sont en fin de section, nommés un par un. */

/* ---- cartes « parti pris » : ici, les 3 étapes après réservation ---- */
.fia-page .fia-parti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: var(--sp5); }
.fia-page .fia-parti__card { position: relative; overflow: hidden; background: var(--blue-soft); border: 1px solid var(--blue); border-radius: var(--radius); padding: 22px 26px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fia-page .fia-parti__card p { position: relative; z-index: 2; margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); text-align: center; max-width: 30ch; }
.fia-page .fia-parti__card h3 { position: relative; z-index: 2; margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--blue); text-align: center; }
@media (max-width: 900px) { .fia-page .fia-parti { grid-template-columns: minmax(0, 1fr); gap: 16px; } .fia-page .fia-parti__card h3 { font-size: 26px; } }
/* ÉCART assumé : sur les LP, le titre de la carte est le gros mot bleu (« Concret »,
   « En présentiel »). Ici les titres sont des phrases (« On vous met en relation ») :
   à 30px en bleu, trois phrases de cette longueur écrasaient la section. Le numéro
   d'étape prend ce rôle — il est ce qui dit qu'on lit une séquence — et le titre
   redescend au corps d'un H4. Le reste de la carte est celui des LP. */
.fia-page .fia-mug-etapes .fia-mug-etape__num { position: relative; z-index: 2; font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--blue); }
.fia-page .fia-mug-etapes h3 { font-size: 20px; line-height: 1.3; color: var(--ink); margin: 6px 0 0; }
@media (max-width: 900px) { .fia-page .fia-mug-etapes h3 { font-size: 19px; } }

/* ---- cartes tarifaires : ici, les 2 offres ---- */
.fia-pricing { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp3); margin-top: var(--sp5); align-items: stretch; max-width: 940px; margin-left: auto; margin-right: auto; }
.fia-pricing__card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pricing); padding: var(--sp4); display: flex; flex-direction: column; text-align: center; }
.fia-pricing__card--highlight { 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-pricing__eyebrow { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin: var(--sp1) 0 4px; }
.fia-pricing__card h3 { font-size: 24px; font-weight: 700; margin: 0 0 var(--sp2); }
.fia-pricing__price { font-size: 36px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.1; }
.fia-pricing__price span { font-size: 16px; font-weight: 600; color: var(--muted); }
.fia-pricing__price-note { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.fia-pricing__prix { margin: 0; }
.fia-page .fia-pricing__subtitle { font-size: 14px; font-weight: 400; font-style: normal; line-height: 1.43; color: var(--muted); margin: var(--sp1) 0 var(--sp3); }
.fia-pricing__list { list-style: none; margin: 0 0 var(--sp3); padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; text-align: left; }
.fia-pricing__list li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.4; }
.fia-pricing__list li.is-included::before { content: "✓"; position: absolute; left: 0; top: 0; color: #10B981; font-weight: 800; }
.fia-pricing__list li.is-ico::before { content: none; }
.fia-pricing__list li.is-ico svg { position: absolute; left: 0; top: 0; width: 18px; height: 18px; color: var(--blue); }
.fia-pricing__card .fia-btn { align-self: center; margin-top: auto; padding: var(--sp1) var(--sp3); font-size: var(--t0); }
.fia-pricing__card--highlight .fia-btn { background: var(--blue); border-color: var(--blue); }
.fia-pricing__card--highlight .fia-btn:hover { background: var(--blue-dark); border-color: var(--blue); }
@media (max-width: 1000px) { .fia-pricing { grid-template-columns: minmax(0,1fr); } }
/* ÉCART assumé, et c'est le seul de structure : les LP accrochent leurs deux cartes
   à une sous-grille pour que prix, liste et bouton tombent à la même hauteur. Ici
   la colonne intermédiaire est restée après le retrait des annotations manuscrites,
   et une sous-grille ne saute pas ce niveau. La colonne porte la hauteur, et le
   bouton reste en bas par margin-top:auto — ce que fait déjà le composant. */
.fia-page .fia-pricing > .fia-mug-offer-col { display: flex; flex-direction: column; }
.fia-page .fia-mug-offer-col > .fia-pricing__card { flex: 1; }
/* 28/09 : les deux annotations manuscrites au-dessus des cartes d'offre sont
   supprimées, flèche comprise. Avec elles tombe la dernière exception au DS §16 :
   plus une seule police hors Inter sur cette page. */

/* ---- cartes de cas d'usage : ici, les 3 exemples d'automatisation ---- */
.fia-page .fia-usecases { background: var(--blue-soft); }
.fia-page .fia-usecases__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: var(--sp4); grid-auto-rows: 1fr; }
.fia-page .fia-usecase {
  display: flex; flex-direction: column; padding: 20px; border-radius: 16px; color: var(--ink);
  background: #fff;
  border: 1px solid rgba(67,121,242,.2);
  box-shadow: 0 1px 2px rgba(17,24,39,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fia-page .fia-usecase:hover { transform: translateY(-4px); border-color: rgba(67,121,242,.55); box-shadow: 0 12px 28px rgba(17,24,39,.10); }
.fia-page .fia-usecase__icone { width: 26px; height: 26px; margin-bottom: 10px; color: var(--blue); }
.fia-page .fia-usecase__titre { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; color: var(--ink); min-height: calc(2 * 1.25em); }
.fia-page .fia-usecase__ligne { font-size: 14px; line-height: 1.5; margin: 0; color: var(--muted); flex-grow: 1; }
@media (prefers-reduced-motion: reduce) {
  .fia-page .fia-usecase { transition: none; }
  .fia-page .fia-usecase:hover { transform: none; }
}
/* ÉCART assumé : trois cartes ici, huit sur les LP — la grille passe de 4 à 3
   colonnes. La marge basse du texte tombe à 0 : elle servait à écarter le lien
   « En savoir plus », qui n'existe pas sur ces cartes (voir index.html). */
.fia-page .fia-mug-cases3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .fia-page .fia-usecases__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fia-page .fia-usecases__grille { grid-template-columns: 1fr; gap: 12px; } }

/* ---- pied de page : trois colonnes ici, deux sur les LP ---- */
/* Les LP n'ont pas de colonne « Pages » (1fr auto). Elle existe ici depuis
   l'origine et n'a pas à disparaître dans un changement de design. */
.fia-page .fia-footer__top { grid-template-columns: 1fr auto auto; }
@media (max-width: 900px) { .fia-page .fia-footer__top { grid-template-columns: minmax(0,1fr); } }

/* ══════════════════════ AVIS ══════════════════════
   25/09 : .fia-mug-avis est retiré avec le widget Trustpilot du milieu de page
   (voir index.html). Les avis sont désormais la bande des LP, juste sous le hero. */

/* ══════════════════════ FORMATEURS ══════════════════════ */
/* 25/09 : le fond de la section est posé dans le markup (style="background:#fafafa"),
   comme sur les LP, pour garder l'alternance blanc / bleu clair / neutre. */

/* ══════════════════════ VIDÉO À VENIR ══════════════════════ */
.fia-mug-soon { text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); padding: 32px 24px; background: #fff; }
.fia-mug-soon__icon { width: 48px; height: 48px; border-radius: var(--radius-pill); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue); }
.fia-mug-soon__icon svg { width: 20px; height: 20px; }
.fia-mug-soon h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.fia-mug-soon p { color: var(--muted); margin: 0; font-size: 14.5px; }

/* ══════════════════════ BANDEAU QUESTION ══════════════════════ */
.fia-mug-note { text-align: center; background: var(--blue-soft); border: 1px solid var(--blue); border-radius: var(--radius-lg); padding: 24px; }
/* rôle « Body » du DS : 18-20px, 400, lh 1.625. Le 16px/600 d'avant n'existe pas
   dans l'échelle. */
.fia-mug-note p { font-size: 18px; font-weight: 400; line-height: 1.625; margin: 0 0 16px; color: var(--muted); }

/* ══════════════════════ PARTAGE RÉSEAUX ══════════════════════ */
.fia-mug-share { text-align: center; }
/* Le chapô prend le rôle commun de sous-texte : plus de règle de taille propre
   à cette section, c'est .fia-lead qui décide, comme partout ailleurs. Reste
   la seule chose qui lui soit particulière, la gouttière avant les boutons. */
.fia-mug-share .fia-lead { margin: 0 auto 24px; }
/* align-items: center — en `stretch` (défaut), le bouton bordé imposait sa hauteur
   au bouton plein et les deux CTA n'étaient plus au même gabarit. */
.fia-mug-share__row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Même gabarit pour les trois destinations : les libellés font de 6 à 10
   caractères, en largeur automatique les boutons auraient trois tailles pour
   trois actions de même poids. */
.fia-mug-share__row .fia-btn { min-width: 152px; justify-content: center; text-align: center; }
/* 28/09 : le P.-S. manuscrit du hero est supprimé (voir index.html). Ses règles
   partent avec lui, y compris le recentrage en grand écran plus bas. */

/* ══════════════════════ MODALE ══════════════════════ */
.fia-mug-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-end; justify-content: center; padding: 0; }
.fia-mug-modal.is-open { display: flex; }
.fia-mug-modal__backdrop { position: absolute; inset: 0; background: rgba(17,24,39,.6); border: none; padding: 0; cursor: default; }
.fia-mug-modal__panel { position: relative; width: 100%; max-height: 92vh; overflow: auto; background: #fff; border-radius: var(--radius-pricing) var(--radius-pricing) 0 0; padding: 8px; box-shadow: 0 -12px 40px -4px rgba(0,0,0,.25); }
.fia-mug-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 4px; }
.fia-mug-modal__head h2 { font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; }
.fia-mug-modal__close { flex: 0 0 auto; font-family: inherit; width: 40px; height: 40px; border: none; border-radius: var(--radius-pill); background: var(--blue-soft); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.fia-mug-modal__close:hover { background: var(--blue); color: #fff; }
/* La modale porte le widget de /cta-rdv depuis le 11/09 : il lui faut de la
   largeur pour le calendrier qui suit la qualification. Le plancher de hauteur
   ne sert qu'à éviter une modale haute de zéro le temps que form_embed.js
   reçoive sa mesure ; il reste SOUS la hauteur réelle du widget (552px mesurés
   à la première étape) pour ne pas lui imposer du vide en dessous. */
.fia-mug-modal .fia-form-card { box-shadow: none; border: none; margin: 4px; padding: 4px; }
.fia-mug-modal .fia-form-card iframe { min-height: 420px; }

/* ══════════════════════ ≥560px ══════════════════════ */
@media (min-width: 560px) {
  .fia-mug-soon { padding: 32px; }
  .fia-mug-note { padding: 32px 36px; }
}

/* ══════════════════════ ≥700px : offres côte à côte, modale centrée ══════════════════════ */
@media (min-width: 700px) {
  .fia-mug-modal { align-items: center; padding: 20px; }
  .fia-mug-modal__panel { max-width: 720px; border-radius: var(--radius-pricing); }
}

/* ══════════════════════ ≥960px : hero grand format ══════════════════════ */
@media (min-width: 960px) {
  .fia-mug-hero__blob--1 { top: -120px; right: -100px; width: 320px; height: 320px; }
  .fia-mug-hero__blob--2 { bottom: -90px; left: -110px; width: 260px; height: 260px; }
  /* Une seule colonne, centrée : le hero est redevenu titre -> photos -> accroche
     -> bouton, empilés. La grille n'a plus qu'un enfant. */
  .fia-mug-hero__actions { justify-content: center; }
  /* Le hook profite de la pleine largeur mais reste plafonné, donc recentré à la
     main. Retour à 1000px avec le retour au rôle « H1 » du DS : à 48px, le titre
     tient sur deux lignes dans 1000px. */
  .fia-mug-hero h1 { max-width: 1000px; margin-left: auto; margin-right: auto; }
}


/* ══════════════════════ TÉMOIGNAGE VIDÉO ══════════════════════
   28/09 (Côme, capture à l'appui) : le composant .fia-temoin des landing pages arrive
   sur cette page. Son CSS ne vit que dans le <style> en ligne des LP, jamais dans la
   feuille partagée : il est donc recopié ici, règle pour règle, sans rien changer.
   Vidéo à gauche, parole à droite, une seule colonne sous 900px avec la vidéo au-dessus
   (c'est elle qui accroche). Le cadre blanc a été retiré le 23/09, l'ombre portée est
   ce qui décolle la vidéo du fond bleu clair. Le rapport 5/4 et le point de fuite à
   38 % viennent du recadrage du 23/09 : le fichier n'a aucune bande noire, c'est le
   décor qui est sombre, il y avait un cadrage à resserrer, pas des bandes à couper. */
/* 28/09, 2e passe (Côme : « supprimer le fond et supprimer le titre + sous-titres et
   mettre au-dessus du carrousel d'avis »). Ce n'est plus une section à elle : c'est un
   bloc posé dans la bande d'avis, entre la ligne de notes et le carrousel. Donc ni fond
   bleu, ni rembourrage vertical de section — seulement l'écart qui le sépare du
   carrousel en dessous. */
/* PAS de `padding: 0` : le bloc porte aussi .fia-wrap, dont tout le rembourrage
   latéral (la gouttière de 20 à 40px) vient de là. L'écraser collait la vidéo et la
   citation aux deux bords de l'écran en mobile. */
.fia-page .fia-temoin { background: transparent; margin-bottom: var(--sp4); }
@media (min-width: 900px) { .fia-page .fia-temoin { margin-bottom: var(--sp5); } }
/* le duo ouvrait le bloc sous un titre et une accroche, qui ont disparu : plus de marge
   haute à prendre, la ligne de notes porte déjà la sienne. */
.fia-page .fia-temoin .fia-temoin__duo { margin-top: 0; }
.fia-page .fia-temoin__duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp3); margin-top: var(--sp4); align-items: center; }
@media (min-width: 900px) {
  .fia-page .fia-temoin__duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp5); margin-top: var(--sp5); }
}
.fia-page .fia-temoin__cadre {
  margin: 0 auto; width: 100%; max-width: 656px;
  padding: 0; background: transparent; border: 0; border-radius: var(--radius);
  box-shadow: 0 5px 24px -3px rgba(67, 121, 242, .18), 0 1px 4px 0 rgba(0, 0, 0, .04);
}
.fia-page .fia-temoin__video { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 38%; border-radius: var(--radius); background: #000; }
.fia-page .fia-temoin__mot { margin: 0; text-align: left; }
.fia-page .fia-temoin__citation { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); border-left: 3px solid var(--blue); padding-left: var(--sp2); }
@media (min-width: 900px) { .fia-page .fia-temoin__citation { font-size: 20px; line-height: 1.5; } }
.fia-page .fia-temoin__legende { margin-top: var(--sp2); text-align: left; }
.fia-page .fia-temoin__qui { margin: 0 0 var(--sp1); display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.fia-page .fia-temoin__qui strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.fia-page .fia-temoin__qui span { font-size: 14px; color: var(--muted); }

/* ============================================================================
   28/09, 4e passe sur le hero (Côme) : « Augmente le padding. Sur la version
   mobile : augmente la taille du hook et baisse la police du reste. Objectif rendre
   le hook plus visible mais conserver tout au-dessus de la ligne de flottaison. »
   Placé en fin de fichier pour passer après tous les réglages antérieurs du hero.
   ============================================================================ */

/* Le hero est une grille : sans min-width: 0, le gabarit Trustpilot (292px fixes)
   imposait sa largeur à toute la colonne sur un écran de 320px, qui débordait à
   droite et décentrait le titre et le bouton. */
.fia-mug-hero > .fia-mug-wide, .fia-mug-hero__text { min-width: 0; }

/* Ordinateur et tablette : plus d'air entre titre, sous-texte, puces, bouton et
   notes. Les écarts suivent la hauteur d'écran (vh), comme le reste du hero, pour
   que le bouton ET les notes restent visibles dès 1280×640. */
@media (min-width: 700px) {
  .fia-mug-hero h1 { margin-bottom: clamp(18px, 4.2vh, 44px); }
  .fia-page p.fia-mug-hero__lead { margin-bottom: clamp(20px, 4.2vh, 44px); }
  .fia-mug-hero__points { gap: 12px 32px; margin: clamp(20px, 4.2vh, 44px) auto clamp(22px, 4.2vh, 44px); }
  .fia-mug-hero .fia-mug-preuve { margin-top: clamp(22px, 4vh, 40px); }
  .fia-mug-hero .fia-mug-preuve__notes { gap: 16px 28px; }
}

/* Téléphone : le titre passe de 24px à 27-38px selon la largeur, tout le reste
   descend d'un cran (sous-texte 14px, puces 13,5px, bouton 14,5px, notes 13px).
   La place gagnée vient aussi des photos, dont la taille suit désormais la
   hauteur d'écran (18vh) : grandes sur un écran haut, compactes sur un court. */
@media (max-width: 699px) {
  .fia-mug-hero { padding-top: clamp(20px, 4vh, 40px); padding-bottom: clamp(24px, 4vh, 40px); }
  .fia-mug-hero__grid { --pw: 46vw; --pr: .1; }
  .fia-mug-hero__cote--g { justify-content: flex-end; }
  .fia-mug-hero__cote--d { justify-content: flex-start; }
  .fia-mug-pola { padding: 7px 7px 20px; }
  /* 28/09, 15 h 45 (Côme : « sur téléphone les images peuvent être placées sous
     le texte, à droite et à gauche, orientées de la même manière ») : le texte
     passe en rangée 1, les deux cadres en rangée 2, sous la bande de notes, avec
     leur inclinaison (-5° et +5°). Le titre est la première chose lue ; les
     photos ne coûtent plus de hauteur au premier écran, elles reprennent donc
     une taille fixe (46vw) et le hero retrouve de l'air en haut. */
  .fia-mug-hero__text { grid-row: 1; margin-top: 0; }
  .fia-mug-hero__cote--g, .fia-mug-hero__cote--d { grid-row: 2; margin-top: clamp(26px, 4vh, 40px); }
  .fia-mug-hero h1 { font-size: clamp(27px, 8.4vw, 38px); line-height: 1.06; letter-spacing: -1px; margin-bottom: clamp(16px, 2.4vh, 26px); text-wrap: balance; }
  .fia-page p.fia-mug-hero__lead { font-size: 15px; margin-bottom: clamp(14px, 2.1vh, 22px); text-wrap: balance; }
  .fia-mug-hero__points { gap: clamp(9px, 1.35vh, 14px) 20px; margin: clamp(14px, 2.1vh, 22px) auto clamp(22px, 3.3vh, 34px); }
  .fia-page .fia-mug-hero__points li { font-size: 13.5px; gap: 8px; }
  .fia-mug-hero__check { width: 17px; height: 17px; }
  .fia-mug-hero__check svg { width: 10px; height: 10px; }
  .fia-page .fia-mug-hero__actions .fia-btn--xl { font-size: 14.5px; padding: 12px 20px; }
  .fia-mug-hero .fia-mug-preuve { margin-top: clamp(20px, 3vh, 30px); }
  .fia-mug-hero .fia-mug-preuve__notes { gap: 10px; }
  .fia-mug-proof__google-nom, .fia-mug-proof__google-val { font-size: 13px; }
  .fia-mug-proof__google-etoiles { font-size: 14px; }
}
/* 320px : la gouttière passe à 16px (le minimum du site) et le gabarit Trustpilot
   est légèrement réduit, faute de pouvoir changer sa largeur fixe. */
@media (max-width: 359px) {
  .fia-mug-hero .fia-mug-wide { padding-left: 16px; padding-right: 16px; }
  .fia-mug-hero .fia-mug-proof__tp { transform: scale(.92); }
  .fia-mug-hero h1 { margin-bottom: 12px; }
}

/* ============================================================================
   28/09, 5e passe (Côme, 14 h 30) : « Sur la version desktop l'accroche semble
   trop petite. Vérifier avec le Design System. »
   Vérifié : le DS v2 §4 distingue « Display H1 » (700/800, 72-96px, letter-spacing
   -1,8 à -4,8px), le rôle de l'accroche du hero, du « H1 » standard (48px) que la
   page utilisait. L'accroche passe donc en Display : 800, jusqu'à 80px. Sa taille
   suit aussi la hauteur d'écran (8,6vh) : 77px sur 1440×900, 55px sur un portable
   1280×640, où 72px pousserait le bouton sous la ligne de flottaison.
   Le sous-texte prend le rôle « Lead » du même tableau : 300 (Light), #374151,
   interligne 1,53, 18 à 22px sur ordinateur.
   ============================================================================ */
.fia-mug-hero h1 { font-weight: 800; }
.fia-page p.fia-mug-hero__lead { font-weight: 300; color: #374151; line-height: 1.53; }
@media (min-width: 700px) {
  .fia-mug-hero h1 { font-size: clamp(44px, min(5.4vw, 8.6vh), 80px); line-height: 1.02; letter-spacing: -2.4px; }
  .fia-page p.fia-mug-hero__lead { max-width: 720px; font-size: clamp(18px, 1.5vw, 22px); }
}

/* ============================================================================
   28/09, 6e passe (Côme, 14 h 50) : « Les images ne sont pas géniales sur mobile,
   je veux de l'humanisation » ; bande de notes : « même échelle » sur mobile,
   « agrandir » sur ordinateur.
   ============================================================================ */

/* Photos : les images changent dans le HTML (selfies de groupe, visages de près).
   Leur taille sur téléphone ne dépend plus de la hauteur d'écran depuis qu'elles
   sont passées sous le texte (15 h 45) : voir le bloc « Téléphone » plus haut. */

/* Notes Google et Trustpilot à la même échelle. Le gabarit Trustpilot est un
   iframe de 28px de haut dont on ne règle pas la police ; c'est donc la note
   Google qui s'aligne sur lui : « Avis Google » à la taille de « Excellent »,
   étoiles à la taille des carrés verts, et 2px plus haut, parce que le gabarit
   cale son contenu en haut de sa boîte. */
.fia-mug-hero .fia-mug-proof__google { gap: 8px; position: relative; top: -2px; }
.fia-mug-hero .fia-mug-proof__google-nom,
.fia-mug-hero .fia-mug-proof__google-val { font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; }
.fia-mug-hero .fia-mug-proof__google-etoiles { font-size: 21px; letter-spacing: 1px; }
/* Ordinateur : les deux grandissent d'un quart. `zoom` agrandit l'iframe
   Trustpilot en gardant son rendu net et sa place dans la ligne (un transform
   l'agrandirait sans lui réserver la place). */
@media (min-width: 700px) {
  .fia-mug-hero .fia-mug-proof__tp { zoom: 1.25; }
  .fia-mug-hero .fia-mug-proof__google { top: -3px; gap: 10px; }
  .fia-mug-hero .fia-mug-proof__google-nom,
  .fia-mug-hero .fia-mug-proof__google-val { font-size: 21px; }
  .fia-mug-hero .fia-mug-proof__google-etoiles { font-size: 26px; }
}

/* 28/09, 15 h (Côme : « problème de largeur, texte trop long » sur le chapô des
   offres). Les chapôs sous les H2 plafonnaient à 620px : un texte un peu long s'y
   empilait en quatre lignes étroites sous un titre d'une ligne, avec un mot seul
   en dernière ligne. Ils passent à 900px (le plafond du composant d'origine) et
   les textes ont été raccourcis dans le HTML : sur ordinateur, chaque chapô tient
   sur UNE ligne sous son titre. Quand il doit se replier (tablette, téléphone),
   `text-wrap: balance` donne aux lignes la même longueur. */
.fia-page .fia-lead { max-width: 900px; text-wrap: balance; }

/* ============================================================================
   28/09, 15 h 30 (Côme) : « Change les photos. Augmente la taille, si y a du
   chevauchement le texte passe devant. »
   ============================================================================ */
/* Nouvelle série de photos : trois sont en portrait, une en panoramique. Toutes
   sont recadrées au 4:3 du polaroïd, centrées, pour que les cadres gardent la même
   forme. */
.fia-mug-hero .fia-mug-pola img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 1080px) {
  /* Le texte passe devant les cadres, même survolés (le survol monte un cadre à
     z-index 9, mais à l'intérieur de sa colonne, qui reste à 1). */
  .fia-mug-hero__cote { position: relative; z-index: 1; }
  .fia-mug-hero__text { position: relative; z-index: 5; }
  /* Ancrage : chaque cadre part du bord EXTÉRIEUR de sa colonne. Plus large que
     la colonne, il déborde donc vers le texte et jamais hors de l'écran. Le
     zigzag d'avant (un cadre sur deux décalé vers l'intérieur) ne garde que la
     place qui reste (--zz) : nulle quand le cadre remplit la colonne. */
  .fia-mug-hero__cote--g > .fia-mug-pola { align-self: flex-start; margin-left: 0; }
  .fia-mug-hero .fia-mug-hero__cote--g > .fia-mug-pola--2 { margin-left: var(--zz); }
  .fia-mug-hero__cote--d > .fia-mug-pola { align-self: flex-end; margin-right: 0; }
  .fia-mug-hero .fia-mug-hero__cote--d > .fia-mug-pola--4 { margin-right: var(--zz); }
  /* Cadres plus grands, pile plus serrée : 14% de recouvrement au lieu de 8%,
     pour que trois cadres tiennent encore dans la hauteur du hero. */
  .fia-mug-hero__cote > .fia-mug-pola + .fia-mug-pola { margin-top: calc(var(--pw) * -.14); }
}

/* ═══ 28/09, 16 h : REFONTE DE TEST « un seul message, le coaching » ═══
   Voir le commentaire du hero dans index.html. Tout ce qui suit est neuf ; les
   règles des blocs retirés (formateurs, murs de photos, bandeau « Une question ? »)
   restent plus haut tant que le test n'est pas tranché, elles ne ciblent plus rien. */

/* -- Le parcours en deux étapes, au-dessus du titre. La première est faite (coche),
      la seconde est celle où l'on est. Aucun pourcentage, aucune jauge à remplir :
      deux étapes, c'est tout ce que le lecteur a vécu et tout ce qu'on lui propose. -- */
.fia-mug-parcours { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 auto clamp(14px, 2.4vh, 26px); padding: 0; list-style: none; }
.fia-mug-parcours li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink); }
.fia-mug-parcours li + li::before { content: ""; width: clamp(28px, 4vw, 56px); height: 2px; margin: 0 12px; background: var(--blue); border-radius: 2px; }
.fia-mug-parcours li.is-fait { color: var(--muted); }
.fia-mug-parcours__pastille { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.fia-mug-parcours li.is-fait .fia-mug-parcours__pastille { background: var(--blue-soft); color: var(--blue); border: 1px solid var(--blue); }
.fia-mug-parcours li.is-fait .fia-mug-parcours__pastille svg { width: 12px; height: 12px; }
.fia-mug-parcours li.is-en-cours .fia-mug-parcours__pastille { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(67,121,242,.18); }
@media (min-width: 700px) { .fia-mug-parcours li { font-size: 15px; } }

/* -- 28/09, 19 h 40 : la ligne de prix sous le bouton est retirée (Côme). Le bloc
      ne porte plus que le bouton. (À 17 h 50, deux accolades orphelines plus haut
      dans ce fichier faisaient tomber la règle d'origine de .fia-mug-hero__actions :
      retirées, la règle d'origine s'applique de nouveau.) -- */
.fia-mug-hero__actions { flex-direction: column; align-items: center; }

/* -- Section démo : la vidéo dans un cadre de fenêtre, le texte à côté. -- */
.fia-page .fia-mug-demos { background: var(--blue-soft); }
.fia-mug-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: var(--sp4); }
.fia-mug-demo__ecran { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(17,24,39,.28), 0 2px 6px rgba(17,24,39,.06); }
.fia-mug-demo__barre { display: flex; gap: 6px; padding: 10px 14px; background: #F8FAFC; border-bottom: 1px solid var(--line); }
.fia-mug-demo__barre span { width: 10px; height: 10px; border-radius: 50%; background: #E2E8F0; }
.fia-mug-demo__video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: #F8FAFC; }
.fia-mug-demo__ecran figcaption { padding: 8px 14px; font-size: 13px; line-height: 1.4; color: var(--muted); border-top: 1px solid var(--line); }
.fia-page p.fia-mug-demo__eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.fia-page .fia-mug-demo__texte h3 { margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; font-weight: 700; color: var(--ink); }
.fia-page .fia-mug-demo__texte > p:not(.fia-mug-demo__eyebrow) { margin: 0 0 18px; font-size: 17px; line-height: 1.53; color: var(--muted); }
.fia-mug-demo__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fia-page .fia-mug-demo__liste li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.35; color: var(--ink); }
@media (min-width: 561px) { .fia-page .fia-mug-cases2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fia-page .fia-mug-cases2 { margin-top: var(--sp4); }
@media (max-width: 899px) {
  .fia-mug-demo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fia-page .fia-mug-demo__texte h3 { font-size: 22px; }
  .fia-page .fia-mug-demo__texte > p:not(.fia-mug-demo__eyebrow) { font-size: 16px; }
  .fia-page .fia-mug-demo__liste li { font-size: 15px; }
}

/* -- Les trois étapes après la réservation, sous les prix. -- */
.fia-page h3.fia-mug-apres__titre { margin: var(--sp5) 0 0; text-align: center; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--ink); }
.fia-page .fia-parti.fia-mug-apres { margin-top: var(--sp2); }

/* -- Appel final : un bouton, et la sortie « pas maintenant » vers les avis. -- */
.fia-page .fia-mug-final { background: var(--blue-soft); }
.fia-page .fia-mug-final .fia-lead { margin: 0 auto var(--sp3); }
.fia-page p.fia-mug-final__non { margin: var(--sp2) 0 0; font-size: 15px; line-height: 1.5; }
.fia-page p.fia-mug-final__non a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.fia-page p.fia-mug-final__non a:hover { color: var(--ink); }

@media (max-width: 699px) {
  .fia-mug-parcours { margin-bottom: clamp(12px, 2vh, 20px); }
  .fia-mug-parcours li { font-size: 13px; gap: 7px; }
  .fia-mug-parcours__pastille { width: 22px; height: 22px; }
  .fia-mug-hero__actions { gap: 8px; }
}
/* Le plus petit téléphone (320x568) : le parcours et la ligne de prix ajoutent deux
   lignes au premier écran ; on reprend l'air ailleurs pour que la bande de notes y
   tienne encore, comme avant la refonte. */
@media (max-width: 359px) {
  .fia-mug-parcours { margin-bottom: 8px; }
  .fia-mug-hero__points { gap: 6px 20px; margin-top: 10px; margin-bottom: 14px; }
  .fia-mug-hero .fia-mug-preuve { margin-top: 10px; }
}
/* Deux cartes côte à côte : le titre n'a plus besoin de réserver deux lignes. */
.fia-page .fia-mug-cases2 .fia-usecase__titre { min-height: 0; }

/* 29/09 : polaroïds « cas pratiques » du hero. La capture d'écran est blanche sur un
   cadre blanc : un filet la détache. La légende occupe la bande basse du polaroïd,
   en Inter (pas de manuscrit), et remplace une partie de sa marge. */
.fia-mug-hero .fia-mug-pola--ecran img { box-sizing: border-box; border: 1px solid var(--line); background: #fff; }
.fia-mug-pola--ecran { padding-bottom: 12px; }
.fia-mug-pola figcaption { margin: 0; padding-top: 10px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-align: center; text-wrap: balance; }
@media (max-width: 699px) {
  .fia-mug-pola--ecran { padding-bottom: 9px; }
  .fia-mug-pola figcaption { padding-top: 7px; font-size: 11.5px; }
}
/* Les cadres se chevauchent, et depuis la 3e passe du 29/09 ils sont TOUS légendés :
   dans une colonne, le cadre du dessus passe devant celui d'en dessous, pour que sa
   bande légendée recouvre le haut de l'image suivante et jamais l'inverse (le texte
   du hero, à 5, reste devant tout). Le survol garde la priorité. */
.fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(1) { z-index: 3; }
.fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(2) { z-index: 2; }
.fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(3) { z-index: 1; }
.fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:hover { z-index: 9; }
/* Téléphone : deux cadres légendés côte à côte, sans chevauchement (--pr à 0). */
@media (max-width: 699px) {
  .fia-mug-hero .fia-mug-hero__grid { --pw: 44vw; --pr: 0; }
}

/* Polaroïds d'une autre formation (upsell) : le nom public de la formation en
   surtitre, au bleu de la marque, au-dessus de la légende. */
.fia-mug-pola__formation { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
/* Tablette (700 à 1079px) : les quatre cadres de l'éventail sont légendés ; on réduit
   le recouvrement (30 % de la carte) pour qu'aucune légende ne passe sous sa voisine. */
@media (min-width: 700px) and (max-width: 1079px) {
  .fia-mug-hero .fia-mug-hero__grid { --pw: min(23.5vw, 32vh); --pr: .05; }
}
/* Tablette en paysage et petites fenêtres (700 à 1079px de large, 820px de haut au
   plus) : l'éventail passe au-dessus du texte et c'est la hauteur qui manque. Déjà
   avant les légendes, la bande de notes tombait sous la ligne de flottaison en
   1024x768 ; les cadres suivent donc la hauteur de plus près. */
@media (min-width: 700px) and (max-width: 1079px) and (max-height: 820px) {
  .fia-mug-hero .fia-mug-hero__grid { --pw: min(23.5vw, 18vh); }
  .fia-mug-hero .fia-mug-pola--ecran { padding-bottom: 9px; }
  .fia-mug-hero .fia-mug-pola figcaption { padding-top: 7px; font-size: 12px; }
  .fia-mug-hero .fia-mug-pola__formation { font-size: 9.5px; margin-bottom: 2px; }
}

/* 29/09, 11 h 30 (Côme : « sur mobile tu en mets 2 au-dessus aussi, de chaque côté »
   du parcours) : sur téléphone, les deux cadres de la Formation agents IA (--2 et
   --4) passent au-dessus du parcours, un de chaque côté ; les deux cadres du coaching
   (--1 et --3) restent sous la bande de notes. Les colonnes s'effacent
   (display: contents) pour que chaque cadre prenne sa place dans la grille du hero :
   aucun cadre n'est dupliqué dans le HTML. Ils ont la largeur de ceux du bas ; sur un
   écran court, le script placé après le hero (index.html) les fait remonter sous le
   bord haut du hero (--rogne) pour que les avis restent au premier écran. */
@media (max-width: 699px) {
  .fia-mug-hero .fia-mug-hero__cote { display: contents; }
  .fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(2) { display: block; grid-row: 1; justify-self: center; width: var(--pw); margin: calc(-1 * var(--rogne, 0px)) 0 8px; }
  .fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(2) figcaption { padding-top: 5px; font-size: 11px; }
  .fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola--ecran:nth-of-type(2) { padding-bottom: 7px; }
  .fia-mug-hero .fia-mug-hero__text { grid-row: 2; }
  .fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(1) { grid-row: 3; margin-top: clamp(26px, 4vh, 40px); }
  .fia-mug-hero .fia-mug-hero__cote--g > .fia-mug-pola { grid-column: 1; justify-self: end; }
  .fia-mug-hero .fia-mug-hero__cote--d > .fia-mug-pola { grid-column: 2; justify-self: start; }
  .fia-mug-hero { padding-top: 16px; }
  .fia-mug-hero .fia-mug-hero__cote--g .fia-mug-pola--2 { --rot: 4deg; }
  .fia-mug-hero .fia-mug-hero__cote--d .fia-mug-pola--4 { --rot: -4deg; }
  .fia-mug-hero .fia-mug-pola__formation { font-size: 9.5px; letter-spacing: .02em; margin-bottom: 2px; }
}
/* Les colonnes effacées ne portent plus le fondu d'entrée : chaque cadre le reprend. */
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola { animation: fia-mug-reveal .55s ease-out .12s both; }
}
/* Centrage sur téléphone : deux cadres de 44vw plus les deux gouttières dépassaient
   la largeur de l'écran sous 433px (395px de contenu sur un écran de 390). Le bloc
   débordait à droite et tout le texte centré du hero était décalé de 2 à 5px. La
   largeur d'un cadre est désormais bornée à la moitié de la place entre les
   gouttières. */
@media (max-width: 699px) {
  .fia-mug-hero .fia-mug-hero__grid { --pw: min(44vw, calc(50vw - var(--sp2))); }
}
@media (max-width: 359px) {
  .fia-mug-hero .fia-mug-hero__grid { --pw: min(44vw, calc(50vw - 16px)); }
}
/* Écran très court (moins de 620px de haut, 320x568 par exemple) : les deux cadres du
   haut feraient passer le bouton sous le premier écran. Ils s'effacent là seulement. */
@media (max-width: 699px) and (max-height: 619px) {
  .fia-mug-hero .fia-mug-hero__cote > .fia-mug-pola:nth-of-type(2) { display: none; }
}
/* 29/09 (vérification avant production) : depuis que les cadres ont une légende, « le
   texte passe devant » ne suffit plus. Entre 1080 et 1250px environ, les cadres
   débordent vers le centre (jusqu'à 56px, voulu le 28/09) et la phrase « Quatre
   heures… », sur une seule ligne, se mêlait à leurs légendes (« Votre boîte triée… »
   à gauche, « L'IA branchée… » à droite). Le sous-titre se borne à la place que les
   cadres laissent libre et passe sur deux lignes équilibrées quand il le faut. Au-delà,
   les cadres ne débordent plus et la règle ne change rien. */
@media (min-width: 1080px) {
  .fia-page .fia-mug-hero p.fia-mug-hero__lead { max-width: min(720px, calc(100% - 2 * max(0px, var(--pw) - var(--col)) - 24px)); }
}
/* Tablette couchée et ordinateur de moins de 760px de haut (portable 1280x720 une fois
   le navigateur ouvert, 1152x648, iPad en paysage dans Safari) : le sous-titre borné
   ci-dessus peut passer sur deux lignes, et sur tablette l'éventail est au-dessus du
   texte ; les quatre écarts du hero (4,2vh) se resserrent à 3vh pour garder les avis
   au premier écran. Au-dessus de 760px de haut, rien ne change. */
@media (min-width: 700px) and (max-height: 759px) {
  .fia-mug-hero h1 { margin-bottom: clamp(16px, 3vh, 44px); }
  .fia-page p.fia-mug-hero__lead { margin-bottom: clamp(16px, 3vh, 44px); }
  .fia-mug-hero__points { margin: clamp(16px, 3vh, 44px) auto clamp(18px, 3.2vh, 44px); }
  .fia-mug-hero .fia-mug-preuve { margin-top: clamp(18px, 3vh, 40px); }
}
/* Tablette couchée très courte (700 à 1079px de large, moins de 720px de haut) : les
   cadres de l'éventail et le titre suivent la hauteur d'un cran de plus (16vh au lieu
   de 18vh pour les cadres, 7,4vh au lieu de 8,6vh pour le titre). */
@media (min-width: 700px) and (max-width: 1079px) and (max-height: 719px) {
  .fia-mug-hero .fia-mug-hero__grid { --pw: min(23.5vw, 16vh); }
  .fia-mug-hero h1 { font-size: clamp(40px, min(5.4vw, 7.4vh), 80px); }
}

/* 29/09 (Côme : « en cliquant sur la fenêtre, un effet de pop-up comme sur la home
   page ») : la fenêtre de démonstration s'ouvre en grand. Même pop-up que les captures
   de la page d'accueil (custom-fixes.js, correctif C) : fond noir à 55 %, fenêtre
   centrée aux coins arrondis et ombrée, rond blanc à croix en haut à droite. Seul ajout :
   un fondu de 0,18 s, coupé si le visiteur a demandé moins d'animations. Le pop-up est
   ajouté à <body>, hors de .fia-page : aucune variable de jeton dans ses règles (elles y
   seraient invalides), les couleurs sont écrites en clair. */
.fia-mug-demo__ecran { position: relative; cursor: zoom-in; }
.fia-mug-demo__agrandir { position: absolute; top: 4px; right: 8px; display: flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #94A3B8; cursor: zoom-in; }
.fia-mug-demo__ecran:hover .fia-mug-demo__agrandir, .fia-mug-demo__agrandir:focus-visible { color: var(--blue); }
.fia-mug-demo__agrandir:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.fia-mug-agrandi { position: fixed; inset: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .55); cursor: zoom-out; animation: fia-mug-agrandi-fond .18s ease-out; }
.fia-mug-agrandi[hidden] { display: none; }
.fia-mug-agrandi__fenetre { width: min(1280px, 94vw, calc((88vh - 31px) * 1.6)); background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 48px rgba(0, 0, 0, .45); cursor: default; animation: fia-mug-agrandi-fenetre .18s ease-out; }
.fia-mug-agrandi__barre { display: flex; gap: 6px; padding: 10px 14px; background: #F8FAFC; border-bottom: 1px solid #E5E7EB; }
.fia-mug-agrandi__barre span { width: 10px; height: 10px; border-radius: 50%; background: #E2E8F0; }
.fia-mug-agrandi__video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: #F8FAFC; }
.fia-mug-agrandi__fermer { position: fixed; top: 18px; right: 22px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #222; cursor: pointer; }
.fia-mug-agrandi__fermer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes fia-mug-agrandi-fond { from { opacity: 0; } }
@keyframes fia-mug-agrandi-fenetre { from { transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .fia-mug-agrandi, .fia-mug-agrandi__fenetre { animation: none; }
}