/* ============================================================
   OPTERIA : page « Formation » (08/10/2026, demande Axel ; refonte du design le même jour, toujours à la demande d'Axel).
   Architecture gleap.ai : premier écran centré et grande fenêtre animée sur la peinture, grand texte, récit collant du parcours,
   piliers, onglets en pilule, fiche éditoriale à filets fins. Chargée seulement par formation.html, après da-cerveau.css (cartes
   grises, cadres peints, fiches blanches ; moteur de scènes de cerveau.js : la fiche reçoit e1, e2… à chaque étape).
   Animations propres : formation.js. Transform, opacity et clip-path ; tout est posé si l'utilisateur réduit les animations.
   ============================================================ */

.page-formation { --orange: #FB4D17; --vert-ok: #2f7d3e; }

/* ---------- Pièces communes ---------- */
.fo-tete { max-width: 780px; margin-bottom: 48px; }
.fo-tete .meta { margin: 0 0 14px; }
.fo-tete .h { margin: 0; }
.fo-lien { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(0,0,0,.3); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.fo-lien:hover { text-decoration-color: var(--ink); }
.fo-av--orange { background: var(--orange); }
.fo-av--orange svg { width: 18px; height: 18px; }
.fo-ok { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #ececea; font-size: 13px; color: var(--vert-ok); opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .45s cubic-bezier(.3,1.4,.5,1) !important; }
.fo-ok i { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 9px; font-style: normal; font-weight: 500; }


/* ---------- Les fiches du parcours (reprises dans le récit collant) ---------- */
.fo-visio__direct { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #fdecec; color: #c0362c; font-size: 11.5px; font-style: normal; font-weight: 500; }
.fo-visio__direct i { width: 6px; height: 6px; border-radius: 50%; background: #e0412f; animation: fo-pouls 1.4s ease-in-out infinite; }
.fo-appli__etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--vert-ok); }
.fo-appli__etat i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px rgba(58,166,85,.18); animation: fo-pouls 2s ease-in-out infinite; }
.fo-mode { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 22px; }
.fo-mode span { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(11,11,11,.07); font-size: 13px; color: var(--ink); }

/* 1) le socle : chaque module se coche à son tour, la barre avance */
.fo-modules__tete { display: flex; align-items: center; gap: 12px; }
.fo-modules__tete b { font-size: 15px; font-weight: 500; }
.fo-modules__barre { flex: 1; height: 6px; border-radius: 6px; background: #efeff1; overflow: hidden; }
.fo-modules__barre i { display: block; height: 100%; border-radius: inherit; background: #191919; transform-origin: 0 50%; transform: scaleX(0); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.fo-modules[data-etape="1"] .fo-modules__barre i { transform: scaleX(.2); } .fo-modules[data-etape="2"] .fo-modules__barre i { transform: scaleX(.4); }
.fo-modules[data-etape="3"] .fo-modules__barre i { transform: scaleX(.6); } .fo-modules[data-etape="4"] .fo-modules__barre i { transform: scaleX(.8); }
.fo-modules.e5 .fo-modules__barre i { transform: scaleX(1); background: var(--vert); }
.fo-modules ul { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fo-modules li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(11,11,11,.07); font-size: 13px; color: #8a8a90; }
.fo-modules .fs-coche, .fo-appli .fs-coche { width: 16px; height: 16px; animation: none; opacity: .25; transform: scale(.6); transition: opacity .25s ease, transform .45s cubic-bezier(.3,1.6,.5,1) !important; }
.fo-modules.e1 li:nth-child(1), .fo-modules.e2 li:nth-child(2), .fo-modules.e3 li:nth-child(3), .fo-modules.e4 li:nth-child(4), .fo-modules.e5 li:nth-child(5) { color: var(--encre); }
.fo-modules.e1 li:nth-child(1) .fs-coche, .fo-modules.e2 li:nth-child(2) .fs-coche, .fo-modules.e3 li:nth-child(3) .fs-coche,
.fo-modules.e4 li:nth-child(4) .fs-coche, .fo-modules.e5 li:nth-child(5) .fs-coche { opacity: 1; transform: none; }
.fo-modules[data-etape="1"] li:nth-child(1), .fo-modules[data-etape="2"] li:nth-child(2), .fo-modules[data-etape="3"] li:nth-child(3),
.fo-modules[data-etape="4"] li:nth-child(4), .fo-modules[data-etape="5"] li:nth-child(5) { border-color: rgba(251,77,23,.4); background: rgba(251,77,23,.045); }
.fo-modules.e6 .fo-ok { opacity: 1; transform: none; }

/* 2) l'atelier en visio : la tâche s'affiche sur l'écran partagé, les étapes s'écrivent, la parole passe d'une vignette à l'autre */
.fo-visio { max-width: 320px; padding: 12px; }
.fo-visio__barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fo-visio__direct { margin-left: 0; }
.fo-visio__num { display: grid; font-size: 12.5px; font-weight: 500; color: var(--encre); }
.fo-visio__a, .fo-visio__b { grid-area: 1 / 1; justify-self: end; transition: opacity .35s ease, transform .35s ease; }
.fo-visio__b { opacity: 0; transform: translateY(4px); }
.fo-visio.e4 .fo-visio__a { opacity: 0; transform: translateY(-4px); } .fo-visio.e4 .fo-visio__b { opacity: 1; transform: none; }
.fo-visio__ecran { margin-top: 10px; padding: 14px; border-radius: 10px; background: #f4f4f2; }
.fo-visio__tache { font-size: 14.5px; font-weight: 500; line-height: 1.3; opacity: 0; transform: translateY(5px); }
.fo-visio__tache small { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 400; color: #8a8a90; }
.fo-visio.e1 .fo-visio__tache { opacity: 1; transform: none; }
.fo-visio ol { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; }
.fo-visio ol li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; background: #fff; font-size: 12.5px; opacity: 0; transform: translateX(-8px); }
.fo-visio ol b { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; background: #191919; color: #fff; font-size: 10px; font-weight: 500; }
.fo-visio.e2 li:nth-child(1), .fo-visio.e3 li:nth-child(2), .fo-visio.e4 li:nth-child(3) { opacity: 1; transform: none; }
.fo-visio.e4 li:nth-child(3) b { background: var(--orange); }
.fo-visio__gens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.fo-visio__vignette { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 7px; border-radius: 9px; background: #2a2a2c; color: rgba(255,255,255,.8); font-size: 11px; transition: box-shadow .3s ease !important; }
.fo-visio__vignette .cv-av { width: 26px; height: 26px; background: #4a4a4e; }
.fo-visio__vignette .fo-av--orange { background: var(--orange); }
/* qui parle : vous d'abord, puis l'équipe OpterIA, puis votre équipe */
.fo-visio__vignette.is-parle, .fo-visio.e2 .fo-visio__vignette:nth-child(2), .fo-visio.e3 .fo-visio__vignette:nth-child(3) { box-shadow: 0 0 0 2px #3aa655; }
.fo-visio.e2 .fo-visio__vignette.is-parle, .fo-visio.e3 .fo-visio__vignette:nth-child(2) { box-shadow: none; }
.fo-visio.e4 .fo-visio__vignette:nth-child(3) { box-shadow: none; }
.fo-visio.e4 .fo-visio__vignette:nth-child(2) { box-shadow: 0 0 0 2px #3aa655; }

/* 3) l'application : le flux se coche, puis la jauge « après » se raccourcit */
.fo-appli__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fo-appli__tete b { display: block; font-size: 15px; font-weight: 500; }
.fo-appli__tete small { display: block; margin-top: 2px; font-size: 12px; color: #6b6b70; }
.fo-appli__etat { flex: none; padding: 3px 9px; border-radius: 999px; background: #eef7ef; font-size: 11.5px; }
.fo-appli__flux { display: flex; flex-direction: column; gap: 6px; margin-top: 14px !important; }
.fo-appli__flux li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(11,11,11,.07); font-size: 13px; color: #8a8a90; }
.fo-appli.e1 li:nth-child(1), .fo-appli.e2 li:nth-child(2), .fo-appli.e3 li:nth-child(3) { color: var(--encre); }
.fo-appli.e1 li:nth-child(1) .fs-coche, .fo-appli.e2 li:nth-child(2) .fs-coche, .fo-appli.e3 li:nth-child(3) .fs-coche { opacity: 1; transform: none; }
.fo-appli__mesure { margin-top: 12px; padding-top: 12px; border-top: 1px solid #ececea; }
.fo-appli__mesure p { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--encre); }
.fo-appli__ligne, .fo-jauge__ligne { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: #6b6b70; }
.fo-appli__ligne i, .fo-jauge__ligne i { height: 10px; border-radius: 6px; background: #efeff1; overflow: hidden; }
.fo-appli__ligne b, .fo-jauge__ligne b { display: block; height: 100%; border-radius: inherit; background: #9a9a96; transform-origin: 0 50%; }
.fo-appli__ligne--apres b { background: var(--orange); transform: scaleX(1); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.fo-appli.e4 .fo-appli__ligne--apres b { transform: scaleX(.42); }


/* ---------- L'approche : trois cartes ---------- */
.fo-piliers__titre { max-width: 900px; margin-bottom: 0; }
.fo-piliers .cv-item__txt h3 { font-size: 20px; letter-spacing: -.02em; }
.fo-choix ul { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.fo-choix li { padding: 8px 11px; border-radius: 9px; border: 1px solid rgba(11,11,11,.08); font-size: 13px; color: #6b6b70; }
.fo-choix[data-etape="1"] li:nth-child(1), .fo-choix[data-etape="2"] li:nth-child(3), .fo-choix[data-etape="3"] li:nth-child(4), .fo-choix.e4 li:nth-child(2) { border-color: rgba(251,77,23,.45); background: rgba(251,77,23,.05); color: var(--encre); }
.fo-choix.e4 li:nth-child(2) { border-color: #191919; background: #191919; color: #fff; }
.fo-choix__ok { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; font-size: 12.5px; color: var(--vert-ok); opacity: 0; transform: translateY(4px); }
.fo-choix__ok i, .fo-suivi li i { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 9px; font-style: normal; font-weight: 500; }
.fo-choix.e4 .fo-choix__ok { opacity: 1; transform: none; }
.fo-suivi ul { display: flex; flex-direction: column; margin-top: 10px; }
.fo-suivi li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #f0f0ef; font-size: 13px; }
.fo-suivi li:first-child { border-top: 0; }
.fo-suivi li i { opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .45s cubic-bezier(.3,1.6,.5,1) !important; }
.fo-suivi.e1 li:nth-child(1) i, .fo-suivi.e2 li:nth-child(2) i, .fo-suivi.e3 li:nth-child(3) i { opacity: 1; transform: none; }
/* la jauge avant / après : suit le défilement (formation.js pose --g de 0 à 1) */
.fo-jauge .fo-jauge__ligne { margin-top: 10px; }
.fo-jauge__ligne--apres b { background: var(--orange); transform: scaleX(calc(1 - .58 * var(--g, 0))); }
.fo-jauge__liste { display: flex; flex-direction: column; margin-top: 12px !important; padding-top: 4px !important; border-top: 1px solid #f0f0ef; }
.fo-jauge__liste li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 12.5px; }
.fo-jauge__liste em { padding: 2px 8px; border-radius: 999px; background: #eef7ef; color: var(--vert-ok); font-size: 11px; font-style: normal; font-weight: 500; opacity: calc(var(--g, 0) * 1.6 - .4); }
.fo-jauge__note { margin-top: 8px !important; font-size: 11px; color: #8a8a90; }


/* ---------- Et après : la bascule vers Bobby ---------- */
.fo-relais__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 32px 0 0; }
.fo-bascule { display: flex; flex-direction: column; }
.fo-bascule__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(11,11,11,.08); opacity: 0; transform: translateY(6px); }
.fo-bascule__ligne .cv-av { width: 32px; height: 32px; font-size: 10.5px; }
.fo-bascule__ligne b { display: block; font-size: 14px; font-weight: 500; }
.fo-bascule__ligne small { display: block; margin-top: 2px; font-size: 12px; color: #6b6b70; }
.fo-bascule__ligne > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 10px; font-style: normal; }
.fo-bascule__ligne--bobby { border-color: rgba(251,77,23,.4); background: rgba(251,77,23,.045); }
.fo-bascule.e1 .fo-bascule__ligne:first-child, .fo-bascule.e3 .fo-bascule__ligne--bobby { opacity: 1; transform: none; }
.fo-bascule__lien { position: relative; height: 34px; margin-left: 27px; }
.fo-bascule__lien span { position: absolute; left: 0; top: 0; width: 2px; height: 100%; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--orange) 0 5px, transparent 5px 9px); transform-origin: 50% 0; transform: scaleY(0); transition: transform .7s cubic-bezier(.22,1,.36,1) !important; }
.fo-bascule.e2 .fo-bascule__lien span { transform: none; }
.fo-bascule.e4 .fo-ok { opacity: 1; transform: none; }

/* ---------- Financement : le label sur sa plaque blanche, qui flotte ---------- */
.fo-fin__plaque { display: grid; place-items: center; width: 260px; max-width: 78%; padding: 18px 20px; border-radius: 22px; background: #fff; box-shadow: none; transform: rotate(-3deg); animation: fo-plaque 7s ease-in-out infinite; }
.fo-fin__plaque img { display: block; width: 100%; height: auto; }
@keyframes fo-plaque { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-6px); } }
.fo-fin .cv-coffre__actif { margin-top: 22px; line-height: 1.55; }

.fo-tete--centre { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Premier écran : titre centré, puis la grande fenêtre du parcours sur la peinture (comme le studio de /bobby-cm) ---------- */
.fo-hero .cv-hero__tete { max-width: 900px; }
.fo-scene { position: relative; margin-top: 72px; padding: 56px 48px; border-radius: var(--r); background: var(--gris-cadre); overflow: hidden; isolation: isolate; text-align: left; }
html.js .fo-scene { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity 1s ease .25s, transform 1.2s cubic-bezier(.22,1,.36,1) .25s; }
html.js .fo-scene.is-in { opacity: 1; transform: none; }
.fo-studio, .fo-notif, .fo-panneau__txt { --paper: #fff; --ink: #292929; --texte: #353535; --muet: rgba(53,53,53,.7); color-scheme: light; }
.fo-studio { max-width: 1060px; margin: 0 auto; border-radius: 16px; background: #fff; color: #0d0f14; font-size: 14px; line-height: 1.4; box-shadow: none; overflow: hidden; }
.fo-studio p, .fo-studio ul, .fo-studio ol { margin: 0; } .fo-studio ul, .fo-studio ol { list-style: none; padding: 0; }
.fo-studio__barre { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 18px; border-bottom: 1px solid #ececea; }
.fo-studio__points { display: flex; gap: 6px; } .fo-studio__points i { width: 10px; height: 10px; border-radius: 50%; background: #e4e4e2; }
.fo-studio__titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.fo-studio__titre .cv-av { width: 22px; height: 22px; } .fo-studio__titre .cv-av svg { width: 14px; height: 14px; }
/* le fil d'avancement dans la barre : chaque temps s'allume en orange, puis passe au noir quand il est fait */
.fo-studio__etapes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fo-studio__etapes > i { width: 28px; height: 2px; border-radius: 2px; background: #ececea; position: relative; overflow: hidden; }
.fo-studio__etapes > i::after { content: ""; position: absolute; inset: 0; background: #191919; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s ease; }
.fo-studio.e6 .fo-studio__etapes > i:nth-of-type(1)::after, .fo-studio.e10 .fo-studio__etapes > i:nth-of-type(2)::after { transform: none; }
.fo-pas { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #f4f4f2; color: #8a8a90; font-size: 12.5px; transition: background .35s ease, color .35s ease; }
.fo-pas b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e4e4e2; color: #6b6b70; font-size: 11px; font-weight: 500; transition: background .35s ease, color .35s ease; }
.fo-studio .fo-pas--1, .fo-studio.e6 .fo-pas--2, .fo-studio.e10 .fo-pas--3 { background: #fff1eb; color: #c2410c; }
.fo-studio .fo-pas--1 b, .fo-studio.e6 .fo-pas--2 b, .fo-studio.e10 .fo-pas--3 b { background: var(--orange); color: #fff; }
.fo-studio.e5 .fo-pas--1, .fo-studio.e9 .fo-pas--2, .fo-studio.e11 .fo-pas--3 { background: #f1f1ef; color: #191919; }
.fo-studio.e5 .fo-pas--1 b, .fo-studio.e9 .fo-pas--2 b, .fo-studio.e11 .fo-pas--3 b { background: #191919; color: #fff; }

.fo-studio__corps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-height: 380px; padding: 20px; }
.fo-col { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid #ececea; opacity: .42; transition: opacity .5s ease, border-color .4s ease, box-shadow .4s ease; }
.fo-col--socle, .fo-studio.e6 .fo-col--atelier, .fo-studio.e10 .fo-col--appli { opacity: 1; }
.fo-studio:not(.e6) .fo-col--socle, .fo-studio.e6:not(.e10) .fo-col--atelier, .fo-studio.e10 .fo-col--appli { border-color: rgba(251,77,23,.38); box-shadow: none; }
.fo-col__lab { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 500; }
.fo-col__lab small { margin-top: 2px; font-size: 12px; font-weight: 400; color: #8a8a90; }
.fo-col__modules { display: flex; flex-direction: column; gap: 6px; }
.fo-col__modules li, .fo-col__flux li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; background: #f7f7f5; font-size: 13px; color: #8a8a90; transition: color .3s ease, background .3s ease; }
.fo-studio .fs-coche { width: 16px; height: 16px; animation: none; opacity: .25; transform: scale(.6); transition: opacity .25s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
.fo-studio.e1 .fo-col__modules li:nth-child(1), .fo-studio.e2 .fo-col__modules li:nth-child(2), .fo-studio.e3 .fo-col__modules li:nth-child(3), .fo-studio.e4 .fo-col__modules li:nth-child(4), .fo-studio.e5 .fo-col__modules li:nth-child(5),
.fo-studio.e10 .fo-col__flux li { color: #0d0f14; }
.fo-studio.e1 .fo-col__modules li:nth-child(1) .fs-coche, .fo-studio.e2 .fo-col__modules li:nth-child(2) .fs-coche, .fo-studio.e3 .fo-col__modules li:nth-child(3) .fs-coche,
.fo-studio.e4 .fo-col__modules li:nth-child(4) .fs-coche, .fo-studio.e5 .fo-col__modules li:nth-child(5) .fs-coche, .fo-studio.e10 .fo-col__flux .fs-coche { opacity: 1; transform: none; }
.fo-studio.e10 .fo-col__flux li:nth-child(2), .fo-studio.e10 .fo-col__flux li:nth-child(2) .fs-coche { transition-delay: .35s; }
.fo-studio.e10 .fo-col__flux li:nth-child(3), .fo-studio.e10 .fo-col__flux li:nth-child(3) .fs-coche { transition-delay: .7s; }
.fo-col__barre { display: flex; align-items: center; gap: 10px; margin-top: auto !important; font-size: 12px; }
.fo-col__barre span { flex: 1; height: 6px; border-radius: 6px; background: #efeff1; overflow: hidden; }
.fo-col__barre i { display: block; height: 100%; border-radius: inherit; background: #191919; transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.fo-studio.e1 .fo-col__barre i { transform: scaleX(.2); } .fo-studio.e2 .fo-col__barre i { transform: scaleX(.4); } .fo-studio.e3 .fo-col__barre i { transform: scaleX(.6); }
.fo-studio.e4 .fo-col__barre i { transform: scaleX(.8); } .fo-studio.e5 .fo-col__barre i { transform: none; background: var(--vert); }
.fo-col__barre b { font-weight: 500; color: var(--vert-ok); opacity: 0; transition: opacity .3s ease; } .fo-studio.e5 .fo-col__barre b { opacity: 1; }
/* l'atelier : les vignettes de la visio, la tâche sur l'écran partagé, les étapes qui s'écrivent */
.fo-mini-visio { position: relative; padding: 10px; border-radius: 10px; background: #1d1d1f; }
.fo-mini-visio__direct { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(224,65,47,.18); color: #ff8a7a; font-size: 10.5px; font-weight: 500; }
.fo-mini-visio__direct i { width: 5px; height: 5px; border-radius: 50%; background: #e0412f; animation: fo-pouls 1.4s ease-in-out infinite; }
.fo-mini-visio__gens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
.fo-mini-visio__gens > span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 8px; background: #2c2c2f; color: rgba(255,255,255,.75); font-size: 10.5px; opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .3s ease; }
.fo-mini-visio__gens .cv-av { width: 24px; height: 24px; background: #4a4a4e; font-size: 9px; } .fo-mini-visio__gens .fo-av--orange { background: var(--orange); }
.fo-studio.e6 .fo-mini-visio__gens > span { opacity: 1; transform: none; }
.fo-studio.e6 .fo-mini-visio__gens > span:nth-child(2) { transition-delay: .12s; } .fo-studio.e6 .fo-mini-visio__gens > span:nth-child(3) { transition-delay: .24s; }
.fo-studio.e6:not(.e7) .fo-mini-visio__gens > span:nth-child(1), .fo-studio.e7:not(.e9) .fo-mini-visio__gens > span:nth-child(2), .fo-studio.e9 .fo-mini-visio__gens > span:nth-child(3) { box-shadow: 0 0 0 2px #3aa655; }
.fo-col__tache { padding: 10px 12px; border-radius: 9px; background: #f7f7f5; opacity: 0; transform: translateY(6px); transition: opacity .4s ease .3s, transform .4s ease .3s; }
.fo-col__tache small { display: block; font-size: 11px; color: #8a8a90; } .fo-col__tache b { font-size: 13.5px; font-weight: 500; }
.fo-studio.e6 .fo-col__tache { opacity: 1; transform: none; }
.fo-col__etapes { display: flex; flex-direction: column; gap: 5px; }
.fo-col__etapes li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .4s ease; }
.fo-col__etapes b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #191919; color: #fff; font-size: 10px; font-weight: 500; }
.fo-studio.e7 .fo-col__etapes li:nth-child(1), .fo-studio.e8 .fo-col__etapes li:nth-child(2), .fo-studio.e9 .fo-col__etapes li:nth-child(3) { opacity: 1; transform: none; }
.fo-studio.e9 .fo-col__etapes li:nth-child(3) b { background: var(--orange); }
/* l'application : passe en service, le flux se coche, la jauge « après » se raccourcit */
.fo-col__etat { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #f1f1ef; color: #8a8a90; font-size: 12px; font-weight: 500; transition: background .35s ease, color .35s ease; }
.fo-col__etat i { width: 7px; height: 7px; border-radius: 50%; background: #c9c9c5; }
.fo-studio.e10 .fo-col__etat { background: #eef7ef; color: var(--vert-ok); } .fo-studio.e10 .fo-col__etat i { background: var(--vert); animation: fo-pouls 2s ease-in-out infinite; }
.fo-col__flux { display: flex; flex-direction: column; gap: 6px; }
.fo-col__mesure { margin-top: auto; padding-top: 12px; border-top: 1px solid #ececea; }
.fo-col__mesure p { margin-bottom: 4px !important; font-size: 12px; font-weight: 500; }
.fo-barre { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; color: #6b6b70; }
.fo-barre i { height: 8px; border-radius: 6px; background: #efeff1; overflow: hidden; }
.fo-barre b { display: block; height: 100%; border-radius: inherit; background: #9a9a96; }
.fo-barre--apres b { background: var(--orange); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.fo-studio.e11 .fo-barre--apres b { transform: scaleX(.42); }
.fo-notif { position: absolute; right: 30px; bottom: 24px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; color: #0d0f14; font-size: 13px; box-shadow: none; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.4,.5,1); }
.fo-notif b { display: block; font-weight: 500; } .fo-notif small { display: block; font-size: 11.5px; color: #6b6b70; }
.fo-notif__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eef7ef; }
.fo-notif__ico i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 9px; font-style: normal; }
.fo-studio.e11 ~ .fo-notif { opacity: 1; transform: none; transition-delay: .9s; }
@keyframes fo-pouls { 50% { opacity: .3; } }

/* ---------- Le principe : grand texte ---------- */
.fo-intro { padding: 104px 0 24px; }
.fo-intro__meta { margin: 0 0 22px; }

/* ---------- Le parcours : récit collant (ordinateur) ---------- */
.fo-parcours { padding-bottom: 24px; }
.fo-parcours .fo-tete { margin-bottom: 0; }
.fo-recit { position: relative; height: 290vh; }
.fo-recit__colle { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-top: 64px; }
.fo-recit__grille { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: repeat(3, auto); column-gap: 64px; align-content: center; width: 100%; }
.fo-temps { display: contents; }
.fo-temps__txt { grid-column: 1; position: relative; z-index: 1; padding: 16px 0 16px 58px; cursor: pointer; }
/* le temps qui n'est pas lu s'estompe, sauf son numéro qui reste plein par-dessus la frise */
.fo-temps__titre, .fo-temps__plus, .fo-temps__num span { opacity: .4; transition: opacity .5s ease; }
.fo-temps[data-n="1"] .fo-temps__txt { grid-row: 1; } .fo-temps[data-n="2"] .fo-temps__txt { grid-row: 2; } .fo-temps[data-n="3"] .fo-temps__txt { grid-row: 3; }
.fo-temps__num { display: flex; align-items: center; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--orange); }
.fo-temps__num b { position: absolute; z-index: 1; left: 0; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #ededea; color: var(--ink); font-size: 14px; font-weight: 500; transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
.fo-temps__titre { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -.03em; line-height: 1.18; color: var(--ink); }
.fo-temps__plus { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22,1,.36,1); }
.fo-temps__plus > div { overflow: hidden; }
.fo-temps__plus p:first-child { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--muet); }
.fo-temps__plus .fo-mode { padding-top: 16px; }
:is(.fo-recit[data-temps="1"] [data-n="1"], .fo-recit[data-temps="2"] [data-n="2"], .fo-recit[data-temps="3"] [data-n="3"]) :is(.fo-temps__titre, .fo-temps__plus, .fo-temps__num span) { opacity: 1; }
.fo-recit[data-temps="1"] [data-n="1"] .fo-temps__plus, .fo-recit[data-temps="2"] [data-n="2"] .fo-temps__plus, .fo-recit[data-temps="3"] [data-n="3"] .fo-temps__plus { grid-template-rows: 1fr; }
.fo-recit[data-temps="1"] [data-n="1"] .fo-temps__num b, .fo-recit[data-temps="2"] [data-n="2"] .fo-temps__num b, .fo-recit[data-temps="3"] [data-n="3"] .fo-temps__num b { background: var(--orange); color: #fff; transform: scale(1.06); }
.fo-recit[data-temps="2"] [data-n="1"] .fo-temps__num b, .fo-recit[data-temps="3"] [data-n="1"] .fo-temps__num b, .fo-recit[data-temps="3"] [data-n="2"] .fo-temps__num b { background: #191919; color: #fff; }
/* la frise : un trait gris derrière les numéros, le trait orange se dessine avec le défilement (--p) */
.fo-frise { grid-column: 1; grid-row: 1 / 4; justify-self: start; position: relative; width: 2px; margin: 30px 0 30px 15px; border-radius: 2px; background: #e6e6e2; overflow: hidden; }
.fo-frise i { position: absolute; inset: 0; border-radius: inherit; background: var(--orange); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
/* la toile de droite : trois peintures qui se relaient, la fenêtre du temps lu par-dessus */
.fo-recit__toile { grid-column: 2; grid-row: 1 / 4; position: relative; height: min(560px, calc(100vh - 150px)); border-radius: 20px; background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.fo-recit__toile .cv-peinture { transition: opacity .7s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
.fo-recit__peint2, .fo-recit__peint3 { opacity: 0; transform: scale(1.06); }
.fo-recit[data-temps="2"] .fo-recit__peint2, .fo-recit[data-temps="3"] .fo-recit__peint3 { opacity: 1; transform: none; }
.fo-temps__fiche { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; z-index: 1; width: min(360px, 82%); opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .45s ease, transform .7s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.fo-temps__fiche .cv-fiche { max-width: none; }
.fo-recit[data-temps="1"] [data-n="1"] .fo-temps__fiche, .fo-recit[data-temps="2"] [data-n="2"] .fo-temps__fiche, .fo-recit[data-temps="3"] [data-n="3"] .fo-temps__fiche { opacity: 1; transform: none; transition-delay: .12s; pointer-events: auto; }

/* ---------- L'approche : numéros et survol ---------- */
.fo-piliers .cv-item { transition: transform .45s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .fo-piliers .cv-item:hover { transform: translateY(-4px); } }
.fo-piliers .cv-trois { counter-reset: pilier; }
.fo-piliers .cv-item__txt h3::before { counter-increment: pilier; content: "0" counter(pilier); display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: 0; color: var(--orange); }

/* ---------- Exemples : onglets en pilule et grande toile ---------- */
.fo-exemples .fo-tete { margin-bottom: 36px; }
.fo-onglets { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 5px; border-radius: 999px; background: #ededea; overflow-x: auto; scrollbar-width: none; }
.fo-onglets::-webkit-scrollbar { display: none; }
.fo-onglet { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muet); font: inherit; font-size: 15.5px; white-space: nowrap; cursor: pointer; overflow: hidden; transition: background .3s ease, color .3s ease; -webkit-tap-highlight-color: transparent; }
.fo-onglet svg { width: 18px; height: 18px; flex: none; }
.fo-onglet:hover { color: var(--ink); }
.fo-onglet[aria-selected="true"] { background: #d9d9d1; color: var(--ink); }
.fo-onglet:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* la barre de progression de l'onglet actif, quand les exemples défilent tout seuls */
.fo-onglet::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: currentColor; opacity: .45; transform-origin: 0 50%; transform: scaleX(0); }
.fo-onglets.is-auto .fo-onglet[aria-selected="true"]::after { animation: fo-progres var(--duree, 6.5s) linear forwards; }
@keyframes fo-progres { to { transform: scaleX(1); } }
.fo-onglets__toile { position: relative; display: grid; place-items: center; min-height: 480px; padding: 56px 48px; border-radius: var(--r); background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.fo-panneau { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; align-items: center; width: 100%; max-width: 920px; }
.fo-panneau[hidden] { display: none; }
.fo-panneau.is-entre .fo-panneau__txt { animation: fo-entre .6s cubic-bezier(.22,1,.36,1) both; }
.fo-panneau.is-entre .fo-flux { animation: fo-entre .7s cubic-bezier(.22,1,.36,1) .08s both; }
@keyframes fo-entre { from { opacity: 0; transform: translateY(16px); } }
.fo-panneau__txt { padding: 30px 30px 32px; border-radius: 18px; background: rgba(255,255,255,.84); color: var(--ink); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fo-panneau__tag { display: inline-flex; margin: 0 0 18px; padding: 4px 10px; border-radius: 999px; background: #fff1eb; color: #c2410c; font-size: 12.5px; font-weight: 500; }
.fo-panneau__txt h3 { margin: 0; font-size: clamp(24px, 2.3vw, 30px); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.fo-panneau__txt p:last-child { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--muet); }
.fo-flux { max-width: none; }
.fo-flux__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fo-flux__tete b { display: block; font-size: 15px; font-weight: 500; } .fo-flux__tete small { display: block; margin-top: 2px; font-size: 12px; color: #6b6b70; }
.fo-flux__tete em { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #eef7ef; color: var(--vert-ok); font-size: 11.5px; font-style: normal; font-weight: 500; }
.fo-flux__tete em i { width: 6px; height: 6px; border-radius: 50%; background: var(--vert); animation: fo-pouls 2s ease-in-out infinite; }
.fo-flux ol { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 0; }
.fo-flux li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(11,11,11,.07); opacity: .4; transform: translateX(-6px); transition: opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease; }
.fo-flux li b { display: block; font-size: 13.5px; font-weight: 500; } .fo-flux li small { display: block; margin-top: 1px; font-size: 12px; color: #6b6b70; }
.fo-flux__n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: #f1f1ef; color: #6b6b70; font-size: 12px; font-weight: 500; transition: background .3s ease, color .3s ease; }
.fo-flux.e1 li:nth-child(1), .fo-flux.e2 li:nth-child(2), .fo-flux.e3 li:nth-child(3) { opacity: 1; transform: none; }
.fo-flux.e1 li:nth-child(1) .fo-flux__n, .fo-flux.e2 li:nth-child(2) .fo-flux__n, .fo-flux.e3 li:nth-child(3) .fo-flux__n { background: #191919; color: #fff; }
.fo-flux[data-etape="1"] li:nth-child(1), .fo-flux[data-etape="2"] li:nth-child(2), .fo-flux[data-etape="3"] li:nth-child(3) { border-color: rgba(251,77,23,.4); background: rgba(251,77,23,.045); }
.fo-flux[data-etape="1"] li:nth-child(1) .fo-flux__n, .fo-flux[data-etape="2"] li:nth-child(2) .fo-flux__n, .fo-flux[data-etape="3"] li:nth-child(3) .fo-flux__n { background: var(--orange); }
.fo-flux.e4 .fo-ok { opacity: 1; transform: none; }
.fo-onglets__note { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 14px; color: var(--muet); text-align: center; }
.fo-onglets__note i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
/* les parcours possibles : quatre colonnes éditoriales sous un filet */
.fo-pistes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: 80px; }
.fo-pistes__titre { grid-column: 1 / -1; margin: 0 0 22px; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.fo-pistes > div { padding-top: 18px; border-top: 1px solid var(--line); }
.fo-pistes b { display: block; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.fo-pistes > div p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--muet); }

/* ---------- Infos pratiques : la fiche de la formation ---------- */
.fo-infos { padding-top: 104px; }
.fo-infos__grille { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 88px; align-items: start; }
.fo-infos__colle { position: sticky; top: 110px; }
.fo-infos__colle .meta { margin: 0 0 14px; }
.fo-infos__colle .h { margin: 0; }
.fo-cles { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 32px 0 0; padding: 0; }
.fo-cles li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.35; color: var(--ink); }
.fo-cles small { display: block; font-size: 12.5px; color: var(--muet); }
.fo-cles__ico, .fo-ligne__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--gris-carte); color: #191919; transition: background .3s ease, color .3s ease; }
.fo-cles__ico svg, .fo-ligne__ico svg { width: 19px; height: 19px; }
.fo-certif { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 30px; padding: 14px; border-radius: 18px; background: var(--gris-carte); }
.fo-certif__logo { display: grid; place-items: center; padding: 10px 8px; border-radius: 12px; background: #fff; box-shadow: none; transition: transform .3s ease; }
.fo-certif__logo:hover { transform: translateY(-2px); }
.fo-certif__logo img { display: block; width: 100%; height: auto; }
.fo-certif__txt p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muet); }
.fo-certif__txt .fo-certif__titre { margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--ink); }
.fo-certif__txt .fo-lien { display: inline-block; margin-top: 6px; font-size: 12.5px; }
.fo-infos__btn { margin-top: 26px; }
.fo-fiche { margin: 0; }
.fo-ligne { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; padding: 26px 0; }
.fo-ligne::before, .fo-ligne:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.fo-ligne:last-child::after { top: auto; bottom: 0; }
.fo-ligne dt { display: flex; align-items: center; gap: 14px; align-self: start; font-size: 17px; color: var(--ink); }
.fo-ligne dd { margin: 0; padding-top: 6px; font-size: 16px; line-height: 1.6; color: var(--muet); }
.fo-ligne dd p { margin: 0; }
.fo-ligne dd ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fo-ligne dd li { position: relative; padding-left: 18px; }
.fo-ligne dd li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.fo-ligne dd a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(0,0,0,.3); text-underline-offset: 3px; }
.fo-ligne dd a:hover { text-decoration-color: var(--ink); }
@media (hover: hover) { .fo-ligne:hover .fo-ligne__ico { background: var(--orange); color: #fff; } }
/* au défilement : le filet se trace de gauche à droite, puis le libellé et le texte montent */
html.js .fo-ligne::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.22,1,.36,1); }
html.js .fo-ligne dt, html.js .fo-ligne dd { opacity: 0; transform: translateY(10px); transition: opacity .6s ease .15s, transform .6s cubic-bezier(.22,1,.36,1) .15s; }
html.js .fo-ligne dd { transition-delay: .27s; }
html.js .fo-ligne.is-in::before { transform: none; }
html.js .fo-ligne.is-in dt, html.js .fo-ligne.is-in dd { opacity: 1; transform: none; }

/* ---------- Mode nuit ---------- */
html[data-theme="nuit"] .fo-mode span { background: #2a2a2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="nuit"] .fo-lien, html[data-theme="nuit"] .fo-ligne dd a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
html[data-theme="nuit"] :is(.fo-scene, .fo-recit__toile, .fo-onglets__toile) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .fo-temps__num b { background: #2a2a2a; color: #fff; }
html[data-theme="nuit"] .fo-recit[data-temps="2"] [data-n="1"] .fo-temps__num b, html[data-theme="nuit"] .fo-recit[data-temps="3"] [data-n="1"] .fo-temps__num b, html[data-theme="nuit"] .fo-recit[data-temps="3"] [data-n="2"] .fo-temps__num b { background: #fff; color: #141414; }
html[data-theme="nuit"] .fo-frise { background: #333; }
html[data-theme="nuit"] .fo-onglets { background: #1f1f1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .fo-onglet[aria-selected="true"] { background: #3a3a3a; color: #fff; }
html[data-theme="nuit"] .fo-onglet:hover { color: #fff; }
html[data-theme="nuit"] .fo-onglet:focus-visible { outline-color: #fff; }
html[data-theme="nuit"] :is(.fo-cles__ico, .fo-ligne__ico) { background: #2a2a2a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="nuit"] .fo-certif { background: #1f1f1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .fo-panneau__txt { background: rgba(255,255,255,.9); }

/* ---------- Mouvement réduit : tout est posé, le parcours s'empile ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .fo-scene { opacity: 1; transform: none; transition: none; }
  .fo-studio *, .fo-notif, .fo-flux *, .fo-panneau, .fo-visio__direct i, .fo-appli__etat i, .fo-fin__plaque { transition: none !important; animation: none !important; }
  .fo-modules__barre i, .fo-appli__ligne--apres b, .fo-bascule__lien span, .fo-ok { transition: none !important; }
  html.js .fo-ligne::before, html.js .fo-ligne dt, html.js .fo-ligne dd { transform: none; opacity: 1; transition: none; }
  .fo-jauge { --g: 1; }
}

/* ---------- Le parcours empilé : tablette, téléphone et mouvement réduit ---------- */
@media (max-width: 960px), (prefers-reduced-motion: reduce) {
  .fo-parcours .fo-tete { margin-bottom: 36px; }
  .fo-recit { height: auto; }
  .fo-recit__colle { position: static; display: block; height: auto; padding: 0; }
  .fo-recit__grille { display: flex; flex-direction: column; gap: 22px; }
  .fo-frise, .fo-recit__toile { display: none; }
  .fo-temps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 18px; border-radius: 24px; background: var(--gris-carte); }
  .fo-temps .fo-temps__txt, .fo-temps .fo-temps__fiche { grid-column: auto !important; grid-row: auto !important; align-self: stretch; justify-self: stretch; width: auto; }
  .fo-temps__txt { padding: 8px 6px 4px 54px; cursor: default; }
  .fo-temps__titre, .fo-temps__plus, .fo-temps__num span { opacity: 1 !important; }
  .fo-temps__num b { left: 6px; top: 6px; background: var(--orange) !important; color: #fff !important; transform: none !important; }
  .fo-temps__plus { grid-template-rows: 1fr !important; }
  .fo-temps__fiche { display: grid; place-items: center; width: auto; min-height: 340px; padding: 32px 18px; border-radius: 20px; opacity: 1 !important; transform: none !important; pointer-events: auto; background: var(--peinture) 30% 40% / cover no-repeat; }
  .fo-temps[data-n="2"] .fo-temps__fiche { background-image: var(--peinture-2); background-position: 70% 30%; }
  .fo-temps[data-n="3"] .fo-temps__fiche { background-image: var(--peinture-3); background-position: 40% 50%; }
  .fo-temps__fiche .cv-fiche { max-width: 320px; width: 100%; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
  .fo-infos__grille { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; }
  .fo-ligne { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
  .fo-pistes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}
@media (max-width: 960px) {
  .fo-scene { margin-top: 48px; padding: 36px 24px; }
  .fo-studio__corps { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* une seule colonne à la fois : celle du temps en cours */
  .fo-col { opacity: 1; }
  .fo-col--atelier, .fo-col--appli, .fo-studio.e6 .fo-col--socle, .fo-studio.e10 .fo-col--atelier { display: none; }
  .fo-studio.e6:not(.e10) .fo-col--atelier, .fo-studio.e10 .fo-col--appli { display: flex; }
  .fo-col { min-height: 330px; }
  .fo-intro { padding: 72px 0 8px; }
  .fo-panneau { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 520px; }
  .fo-onglets__toile { padding: 36px 24px; }
  .fo-infos { padding-top: 72px; }
  .fo-infos__grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fo-infos__colle { position: static; }
  .fo-certif { max-width: 520px; }
}

/* ---------- Téléphone (390 px) ---------- */
@media (max-width: 720px) {
  .fo-scene { margin: 40px calc(var(--gutter) * -1 + 8px) 0; padding: 14px 10px 70px; border-radius: 18px; }
  .fo-studio__barre { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .fo-studio__points { display: none; }
  .fo-studio__etapes { margin-left: 0; width: 100%; justify-content: space-between; }
  .fo-studio__etapes > i { flex: 1; width: auto; }
  .fo-pas { font-size: 11.5px; padding-right: 8px; }
  .fo-studio__corps { padding: 12px; }
  .fo-col { min-height: 318px; padding: 14px; }
  .fo-notif { left: 50%; right: auto; bottom: 14px; transform: translate(-50%, 12px) scale(.96); white-space: nowrap; }
  .fo-studio.e11 ~ .fo-notif { transform: translate(-50%, 0); }
  .fo-temps { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px; border-radius: 20px; }
  .fo-temps__txt { padding: 6px 4px 0 48px; }
  .fo-temps__num b { left: 2px; top: 2px; width: 30px; height: 30px; }
  .fo-temps__titre { font-size: 24px; }
  .fo-temps__plus p:first-child { font-size: 16px; }
  .fo-temps__fiche { min-height: 0; padding: 26px 12px; }
  .fo-exemples .fo-tete { text-align: left; }
  .fo-onglets { width: auto; margin: 0 calc(var(--gutter) * -1) 14px; padding: 5px; border-radius: 0; background: none; }
  .fo-onglets .fo-onglet { background: #ededea; }
  .fo-onglets .fo-onglet[aria-selected="true"] { background: #191919; color: #fff; }
  .fo-onglets .fo-onglet:first-child { margin-left: calc(var(--gutter) - 5px); } .fo-onglets .fo-onglet:last-child { margin-right: calc(var(--gutter) - 5px); }
  .fo-onglets__toile { min-height: 0; margin: 0 calc(var(--gutter) * -1 + 8px); padding: 18px 12px; border-radius: 18px; }
  .fo-panneau__txt { padding: 22px 20px 24px; }
  .fo-onglets__note { font-size: 13px; text-align: left; justify-content: flex-start; }
  .fo-pistes { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 56px; }
  .fo-pistes > div { padding: 16px 0; }
  .fo-pistes__titre { margin-bottom: 10px; }
  .fo-ligne { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 0; }
  .fo-ligne dd { padding: 0 0 0 50px; font-size: 15.5px; }
  .fo-certif { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .fo-infos__btn { width: 100%; justify-content: center; }
}
html[data-theme="nuit"] .fo-onglets .fo-onglet { background: #1f1f1f; }
html[data-theme="nuit"] .fo-onglets .fo-onglet[aria-selected="true"] { background: #fff; color: #141414; }
@media (min-width: 721px) { html[data-theme="nuit"] .fo-onglets .fo-onglet { background: transparent; } html[data-theme="nuit"] .fo-onglets .fo-onglet[aria-selected="true"] { background: #3a3a3a; color: #fff; } }