/* custom-fixes.css — correctifs additifs France IA (ne modifie pas le markup Framer)
   Chargé après le CSS Framer ; n'agit que là où c'est ciblé. */

/* --- Correctif : carte "En résumé" (.framer-1b5mujw-container) non centrée
   sur mobile ---
   Le centrage vient du parent flex (justify-content/align-items:center),
   mais l'élément est enveloppé dans un wrapper Framer display:contents
   (.ssr-variant) : Safari/WebKit a un bug connu où display:contents casse
   la transmission du centrage flex à ses enfants (pas reproduit sous
   Chromium ici, mais le pattern correspond exactement au bug rapporté).
   On centre l'élément directement via margin:auto, indépendant du parent. */
@media (max-width: 809.98px) {
  .framer-1b5mujw-container {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- Correctif : boutons CTA carrés sur l'accueil (design de référence) ---
   Les 4 variants du bouton CTA (.framer-1oavery + .framer-5l1eky, ex. "Je
   souhaite me former") ont un border-radius:2px posé en inline style par
   Framer -> pas tout à fait carré. Les autres pages (.fia-btn) sont déjà à
   0. Ne touche pas .framer-13cw1a9 (carte-lien "infos réglementaires",
   10px, un autre composant, pas un CTA). */
.framer-1oavery.framer-5l1eky {
  border-radius: 0 !important;
}

/* --- Correctif : espace entre le carrousel formateurs et le bandeau de
   logos partenaires qui le suit directement dans la même section Framer
   "Par qui" (aucune marge entre les deux -> collés visuellement). Le
   conteneur du carrousel (.framer-184r1zl-container) a une hauteur fixée
   par Framer -> une marge côté carrousel déborderait sans pousser le
   bandeau suivant. On pousse donc le bandeau logos lui-même. */
.framer-1xubgt1-container { margin-top: 48px !important; }

/* --- Correctif : lien "infos réglementaires" sans curseur pointer ---
   Le variant Framer .framer-v-klbe6k réécrit cursor:unset sur ce lien
   (règle .framer-FkSfn.framer-v-klbe6k.framer-13cw1a9), écrasant le
   cursor:pointer de base -> le lien reste cliquable mais ne le montre pas. */
.framer-FkSfn.framer-v-klbe6k.framer-13cw1a9 {
  cursor: pointer !important;
}

/* --- Correctif A : CTA final (.framer-ip6llc) centré en mobile ---
   En desktop : aucun changement (le bloc reste tel que Framer le pose).
   En mobile : la largeur figée 486px + position:absolute cassaient le centrage
   ("calé à gauche") -> on repasse le bloc en flux normal, centré. */
@media (max-width: 600px) {
  .framer-ip6llc {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* --- Correctif RESPONSIVE : cartes "outils" (.framer-1igyoip) en mobile/tablette ---
   Framer fige .framer-1x7avox à `width:min-content`. En ≤809px, le hack
   `white-space:normal` fait wrapper le texte -> min-content s'effondre à la
   largeur du mot le plus long (~106px) et le texte ne remplit plus la carte.
   On force le bloc texte à occuper toute la largeur de la carte. */
@media (max-width: 809px) {
  .framer-1x7avox { width: 100% !important; }
  .framer-256qve  { flex: 1 1 0% !important; width: auto !important; min-width: 0 !important; }
}

/* --- Widget Trustpilot "Grid" (remplace l'ancienne grille d'avis images) ---
   Dans la colonne flex centrée, le widget se réduisait à sa largeur de contenu
   (~300px). On le force pleine largeur pour que l'iframe s'initialise au bon format. */
.trustpilot-widget[data-template-id="539adbd6dec7e10e686debee"] {
  width: 100% !important;
  max-width: 1050px !important;   /* largeur de contenu récurrente de la page (méthode/outils) */
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  /* L'iframe rend plusieurs rangées pleines (data-style-height=1000px sur le
     HTML) ; on clippe le conteneur pour n'afficher qu'1,5 à 2 rangées. */
  height: 720px !important;
  max-height: 720px !important;
  overflow: hidden !important;
}
/* fondu en bas pour signaler "plus d'avis" et rendre la coupe intentionnelle */
.trustpilot-widget[data-template-id="539adbd6dec7e10e686debee"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

/* ===== Section "Financement" masquée (retrait de la mention CPF) =====
   #financement (.framer-1mcc8wr) = toute la section (carte Qualiopi + bloc
   "Financer ma formation" qui mentionne le CPF). Section entière masquée
   (pas seulement son enfant .framer-1bt4a1) pour ne laisser aucun vide de
   padding entre "En résumé" et la FAQ. Markup Framer non modifié. */
#financement { display: none !important; }

/* ===== Image décorative héros masquée =====
   .framer-1szusr9 = wrapper de l'image "Élément décoratif en arrière-plan
   sur FranceIA" (2kSfRxJFOw5ZrUBx1c56q0OpNQ.png), dans la rangée de confiance
   du héros (.framer-xsno, à côté du logo Station F). Flex row -> aucun vide
   résiduel une fois masquée. */
.framer-1szusr9 { display: none !important; }

/* --- Correctif FORMULAIRE HERO : le cadre doit grandir avec le formulaire ---
   Le formulaire LeadConnector (iframe) s'agrandit quand des erreurs de validation
   s'affichent (form_embed.js passe la hauteur de 760px à ~1007px). Mais les
   conteneurs Framer avaient une hauteur FIGÉE -> l'iframe débordait du cadre bordé
   et la bordure ne suivait plus. On laisse ces conteneurs s'adapter à la hauteur réelle. */
.framer-1umhgvr-container,   /* conteneur de l'embed */
.framer-1if9qh6 {            /* cadre bordé (border-radius + bordure bleue) */
  height: auto !important;
}

/* --- Anti-CLS : réserver la hauteur du formulaire au desktop ---
   La rangée hero est centrée verticalement (align-items:center). Au chargement,
   l'iframe LeadConnector passe de ~0 à sa hauteur finale -> la rangée grandit et
   le H1 saute. On réserve la hauteur finale du form dès le départ pour figer la
   rangée. (height:auto reste actif -> le cadre peut quand même grandir avec les
   erreurs de validation.)
   MAJ 2026-07-01 : le formulaire GHL a été modifié, hauteur réelle mesurée
   638px (au lieu de 760px avant) -> l'ancienne réservation laissait ~122px de
   vide sous le form. Ajusté à 650px (léger tampon sur 638px, sans recréer un
   vide visible). Si GHL change encore le form, remesurer et réajuster. */
@media (min-width: 810px) {
  .framer-1if9qh6 { min-height: 650px !important; }
}

/* --- Badges followers/formés (.framer-i3qgtm) : taille uniforme + ellipsis ---
   En local ces pastilles ont une largeur auto (123-157px selon le texte) -> rendu
   irrégulier. On fige une largeur uniforme et on tronque le texte trop long ("…"). */
.framer-i3qgtm {
  width: 120px !important;
  flex: 0 0 120px !important;
  min-width: 0 !important;        /* sinon min-width:auto (flex) garde la largeur du contenu */
  overflow: hidden !important;
}
/* La rangée nom+pastille (.framer-hom3ao) est en flex-start avec un gap de 20px et
   un nom qui ne rétrécit pas (flex:0 0 auto, white-space:pre). Pour les noms longs
   (Edouard 182px, Djouzar 180px), nom + gap + pastille débordait la largeur dispo
   (316px) -> la pastille touchait le bord droit de l'image. On réduit le gap (20->8)
   et la pastille (135->120) pour que même le nom le plus long tienne (182+8+120=310
   < 316) sans le tronquer. Le nom devient rétractable (ellipsis) en filet de sécurité
   si un futur nom est encore plus long. */
.framer-hom3ao { gap: 8px !important; }
.framer-hom3ao > .framer-1abujn8 {
  min-width: 0 !important;
  flex-shrink: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.framer-i3qgtm > .framer-1yc7j0c {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.framer-i3qgtm .framer-text,
.framer-i3qgtm p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --- FAQ "Informations additionnelles" : padding parasite sous la question ---
   La carte (.framer-13cw1a9) est un flex `gap:10px`. Le panneau réponse injecté
   (.faq-answer-injected) est un 2e enfant flex -> le gap ajoute 10px sous la
   question MÊME réponse fermée (carte 72px au lieu de 62px, padding asymétrique).
   On retire le gap : l'espacement à l'ouverture reste assuré par le
   margin-top/padding-top du panneau réponse. (Classe exclusive à cette FAQ.) */
.framer-13cw1a9 { gap: 0 !important; }

/* --- Espacement vertical des sections du bas ---
   pmsten/1mcc8wr : padding Framer trop ample (160/160, 100/100) -> rythme 80px. */
.framer-pmsten  { padding-top: 80px !important; padding-bottom: 80px !important; }
.framer-1mcc8wr { padding-top: 80px !important; padding-bottom: 80px !important; }

/* framer-9n6et5 = galerie photos effondrée (images en hauteur 0, vide sur prod
   aussi) -> 250px de vide entre "Financer ma formation" et la FAQ. On la masque. */
.framer-9n6et5 { display: none !important; }

/* framer-4xjfhd (FAQ) : la bannière CTA suivante est conçue pour remonter/flotter
   par-dessus cette section (~-182px). Il faut donc un padding-bas suffisant pour
   qu'elle ne chevauche pas la dernière carte FAQ (gap visé ~60px -> 182+60). */
.framer-4xjfhd  { padding-top: 80px !important; padding-bottom: 180px !important; }
/* Mobile : la bannière CTA (.framer-ip6llc) passe en position:static (correctif A
   plus haut) -> le padding-top:180px de .framer-hGmAr (réservé à la bannière
   ABSOLUE en desktop) devient un vide de 180px. Cumulé au padBot:180 de la FAQ
   (utile seulement contre le chevauchement desktop), ça donnait ~360px. On retire
   les deux réservations en mobile pour un gap propre (~80px). */
@media (max-width: 600px) {
  .framer-4xjfhd { padding-bottom: 80px !important; }
  .framer-hGmAr { padding-top: 0 !important; }
}

/* --- Indice visuel de cliquabilité sur les images zoomables (outils) --- */
img.fia-zoomable { cursor: zoom-in; }

/* --- #2 : section "Vous repartirez avec" (.framer-1gtyqqb) : seules les images
   doivent paraître cliquables. Les wrappers de carte Framer ont cursor:pointer
   (résidu de l'ancien tap-to-zoom) -> on remet le curseur par défaut partout,
   sauf sur les images zoomables. --- */
.framer-1gtyqqb, .framer-1gtyqqb * { cursor: default !important; }
.framer-1gtyqqb img.fia-zoomable { cursor: zoom-in !important; }

/* --- #1 : formulaire hero (.framer-1if9qh6) : le formulaire LeadConnector a un
   padding interne plus grand en haut (~75px) qu'en bas (~63px). Le cadre a
   overflow:hidden -> on décale l'iframe de ~6px vers le haut pour équilibrer
   visuellement (69/69). Fond blanc pour que le léger jeu en bas reste invisible. --- */
.framer-1if9qh6 { background: #fff !important; }
/* l'iframe a un `transform:none !important` inline (form_embed.js) -> on décale
   plutôt le conteneur parent. */
.framer-1if9qh6 .framer-1umhgvr-container { transform: translateY(-6px) !important; }
/* (barre grise du form masquée via un div injecté en JS — voir custom-fixes.js —
   car Framer occupe déjà ::after/::before de ce cadre pour dessiner la bordure.) */

/* --- Correctif 6 : marquee des logos partenaires (défilement auto, comme le live) ---
   Le JS Framer ne tourne pas hors-ligne -> le bandeau est figé. On rejoue le
   défilement en CSS. Les logos sont triplés dans le DOM -> -33.333% boucle sans couture. */
/* Distance = EXACTEMENT un set de logos (calculée en px par le JS depuis
   scrollWidth/3) -> loop sans couture quelle que soit la largeur (le %, lui, était
   relatif à la largeur CONTRAINTE du ul (1180px) et non au contenu -> saut au reset
   + ~393px seulement parcourus). La durée est aussi posée par le JS pour une vitesse
   px/s constante (responsive). Fallback 33.333% si le JS n'a pas (encore) tourné. */
@keyframes fia-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--fia-marquee-distance, 33.333%))); }
}
ul.fia-marquee-on { animation: fia-marquee 32s linear infinite; will-change: transform; }
ul.fia-marquee-on:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  ul.fia-marquee-on { animation: none; }
}


/* --- #1 : bouton « Plus d'avis » (.framer-1s3tofu-container) sous le widget
   Trustpilot : c'est un <a> sans href -> ne mène nulle part. On le retire.
   Le parent est un flex column gap:50px -> l'espace réservé se résorbe seul. */
.framer-1s3tofu-container { display: none !important; }

/* --- #2 : section programme « Passez de débutant à pro »
   (.framer-t7bRU.framer-h2fc5d) : la rangée 2 colonnes était centrée
   verticalement (align-items:center) -> le bloc droit (accordéon, plus court)
   flottait au milieu du visuel gauche. Comme l'ouverture d'une réponse rallonge
   le bloc droit, on cale tout en HAUT pour qu'il grandisse vers le bas. */
.framer-t7bRU.framer-h2fc5d { align-items: flex-start !important; }
/* Le 1er item de l'accordéon a un padding-top de 20px -> son TEXTE (« En amont »)
   démarre 20px sous le bord haut de l'image de gauche. On remonte tout le bloc
   accordéon de 20px pour caler la 1ʳᵉ ligne sur le haut de l'image (il continue de
   grandir vers le bas à l'ouverture). NB : le bloc a un `transform:none !important`
   inline (reset d'anim Framer) -> on passe par une marge négative, pas un transform. */
.framer-t7bRU.framer-h2fc5d .framer-1lwkg2v { margin-top: -20px !important; }

/* --- #3 : footer (.framer-1b96qjt) : bloc gauche (texte+logo, ~358px) et bloc
   droit (2 colonnes de liens, ~281px) étaient calés en haut seulement -> le bas
   des liens flottait ~76px au-dessus du bas du bloc gauche. Les 2 colonnes ont 6
   items chacune (symétriques) : on étire le bloc droit à la hauteur de la rangée
   et on répartit les liens (space-between) -> 1ʳᵉ ligne alignée en haut, dernière
   ligne alignée en bas avec le bloc gauche. */
.framer-1b96qjt { align-items: stretch !important; }
.framer-1b96qjt > .framer-g304z2 { align-items: stretch !important; height: auto !important; }
.framer-1b96qjt .framer-1gyz63k,
.framer-1b96qjt .framer-p4209l { height: 100% !important; justify-content: space-between !important; }
/* Le bloc gauche a ~23px de jeu vide sous son dernier texte visible
   (« Téléchargez… ») : le bloc Qualiopi (h243, justify:center) ne contient que
   197px -> 23px de marge en haut ET en bas. La nav étirée (space-between) collait
   donc sa dernière ligne 23px trop bas. On réserve ces 23px en bas des colonnes
   pour que « Formations »/« Règlement intérieur » s'alignent sur « Téléchargez ». */
.framer-1b96qjt .framer-1gyz63k,
.framer-1b96qjt .framer-p4209l { padding-bottom: 23px !important; }

/* --- Bouton « Discutons de vos besoins » (.framer-wf5pyd-container) : bordure de
   hover blanche ---
   Le système de hover (data-fbtn, défini inline dans index.html) fait, pour un
   bouton « white » : fond -> bleu + bordure (box-shadow inset 2px) -> bleu. Sur le
   bandeau CTA déjà bleu, le bouton se fond entièrement en bleu. On garde le fond
   bleu mais on force la bordure de hover en BLANC pour qu'il reste délimité.
   Sélecteur plus spécifique que la règle inline (.container + a.framer-1oavery). */
.framer-wf5pyd-container a.framer-1oavery[data-fbtn]:hover {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px inset !important;
}

/* --- Fade-in léger des blocs de section (AU SCROLL, fidèle au site modèle) ---
   Chaque grand bloc démarre légèrement décalé + transparent, puis apparaît
   quand il entre dans le viewport (classe .fia-in ajoutée par IntersectionObserver).
   La classe .fia-fade n'est posée que par JS -> sans JS, contenu visible.
   Désactivé si prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .fia-fade        { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
  .fia-fade.fia-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
}

/* ############################################################################
   HARMONISATION LARGEUR ACCUEIL (2026-07-01)
   L'export Framer n'a jamais eu de conteneur de contenu unique : chaque section
   déclare sa propre largeur (950 à 1400px de max-width selon les blocs), alors
   que les 5 autres pages du site (rebuild "clean") utilisent uniformément
   `.fia-wrap { max-width: 1080px }`. On aligne chaque conteneur de section sur
   1080px pour que les bords de contenu correspondent d'une page à l'autre.
   Chaque classe = le conteneur RACINE de sa section (Framer scope les enfants
   en `width:100%`/flex -> ils héritent automatiquement de la nouvelle largeur,
   pas besoin de toucher les sous-éléments), sauf mention contraire. Vérifié
   Playwright 1440/1280/1024/mobile après application (aucun débordement, pas
   de casse des carrousels/marquees qui sont déjà en width:100% sans px dur).
   ############################################################################ */
/* Hero (titre + formulaire) : 950 -> 1080. Le surplus va à la colonne texte
   (le formulaire a son propre max-width:400px indépendant, inchangé). */
.framer-1je0bjv { max-width: 1080px !important; }
/* "Notre parti pris" / "Méthodologie" (header) / "Vous repartirez" (header) :
   règle Framer partagée entre les 3 (max-width:1400 jamais atteint, la vraie
   largeur venait du padding parent) -> 1080 devient la contrainte liante. */
.framer-1jokq6u, .framer-1oo4pu1, .framer-1mvtgc0 { max-width: 1080px !important; }
/* "Cette formation est faite pour vous si…" (Pour qui). */
.framer-uj0cak { max-width: 1080px !important; }
/* "Formez-vous avec les meilleurs" (carrousel formateurs) ; .framer-1bt4a1
   partage la même règle Framer mais est dans #financement (display:none),
   donc harmless de l'inclure ici. */
.framer-101awo, .framer-1bt4a1 { max-width: 1080px !important; }
/* "En résumé" (carte pricing). */
.framer-cuivky { max-width: 1080px !important; }
/* FAQ "Informations additionnelles" (était la section la plus large, 1340px). */
.framer-1t9ps02 { max-width: 1080px !important; }
/* Composant réutilisé (outer wrapper) : "Méthodologie" (3 étapes) ET "Vous
   repartirez avec" (5 bullets) partagent CETTE MÊME règle Framer (padding
   0 25px = 50px d'inset total déjà présent -> le contenu interne suit
   automatiquement à 1080-50=1030px, cohérent avec le reste de la page). */
.framer-jlya5n, .framer-1y24ecl { max-width: 1080px !important; }
/* .framer-1gtyqqb ("Vous repartirez avec", contenu interne) a SA PROPRE
   max-width:1000px fixée en dur par Framer (contrairement à .framer-23e2hf,
   son équivalent côté Méthodologie, qui suit le parent) -> override direct
   pour matcher l'inset 1030px des autres sections. */
.framer-1gtyqqb { max-width: 1030px !important; }
/* Section "Passez de débutant à pro" (Services) : pas de conteneur avec
   max-width propre (.framer-zsgur9-container est width:100%, la largeur
   1240px venait du padding 100px de la section .framer-1x9fy0h) -> cap direct. */
.framer-zsgur9-container { max-width: 1080px !important; }
/* Bandeau logos/badges de confiance (#avis) : scope Framer différent
   (.framer-2KCPH), largeur FIXE en dur (width:1100px, pas juste max-width) ->
   les deux propriétés doivent être overridées. */
.framer-rkr8s { width: 1080px !important; max-width: 1080px !important; }
/* Widget Trustpilot (grille avis) : max-width déjà fixé à 1050px plus haut
   dans ce fichier (correctif largeur initiale) -> réduit à 1030px pour garder
   le même inset de 50px que les autres sections (1080-50=1030). */
.trustpilot-widget[data-template-id="539adbd6dec7e10e686debee"] { max-width: 1030px !important; }
/* Footer. */
.framer-1b96qjt { max-width: 1080px !important; }