/* ============================================================
   OPTERIA : accueil, bloc « Formation », la colonne de texte (inchangée), commune aux propositions A, B et C (14/10/2026).
   Reprise telle quelle de da-accueil-formation.css (titre, frise 1-2-3, bouton, mention Qualiopi). Le script de chaque
   proposition pose sur la section --p (0 à 1) et data-temps (0 à 3), comme avant. Sans section collante.
   ============================================================ */
.af { --orange: #FB4D17; --vert: #3aa655; --vert-ok: #2f7d3e; --k1: 0; --k2: 0; --k3: 0; --p: 0; }
.af__grille { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: 64px; }

/* ---------- Le texte ---------- */
.af__txt .meta { margin: 0 0 14px; }
.af__titre { margin: 0; }
.af__phrase { margin: 20px 0 0; max-width: 460px; }
/* les trois temps : une frise verticale orange qui se remplit avec le récit, chaque temps s'allume puis passe au noir */
.af__temps { position: relative; list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 32px 0 0; padding: 0; }
.af__temps::before, .af__temps::after { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; margin-left: -1px; border-radius: 2px; background: #e6e6e2; }
.af__temps::after { background: var(--orange); transform-origin: 50% 0; transform: scaleY(var(--p)); }
.af__temps li { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--ink-3); transition: color .4s ease; }
.af__temps li > b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f1f1ef; color: var(--ink-3); font-size: 12.5px; font-weight: 500; box-shadow: 0 0 0 4px var(--paper); transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.3,1.6,.5,1); }
.af__temps li span { display: flex; flex-direction: column; line-height: 1.25; }
.af__temps small { margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.af[data-temps="1"] [data-n="1"], .af[data-temps="2"] [data-n="2"], .af[data-temps="3"] [data-n="3"],
.af[data-temps="2"] [data-n="1"], .af[data-temps="3"] [data-n="1"], .af[data-temps="3"] [data-n="2"] { color: var(--ink); }
.af[data-temps="1"] [data-n="1"] > b, .af[data-temps="2"] [data-n="2"] > b, .af[data-temps="3"] [data-n="3"] > b { background: var(--orange); color: #fff; transform: scale(1.08); }
.af[data-temps="2"] [data-n="1"] > b, .af[data-temps="3"] [data-n="1"] > b, .af[data-temps="3"] [data-n="2"] > b { background: #191919; color: #fff; }

.af__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin-top: 36px; }
/* le bouton : il s'allume à la fin du récit avec l'effet commun du site (da-bouton-halo.css, bouton-halo.js, data-halo="manuel") */

.af__label { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.af__label img { display: block; width: 92px; height: auto; padding: 5px 7px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,11,.08); }
.af__label span { display: flex; flex-direction: column; }
.af__label small { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

html[data-theme="nuit"] .af__temps::before { background: #333; }
html[data-theme="nuit"] .af__temps li > b { background: #2a2a2a; }
html[data-theme="nuit"] .af[data-temps="2"] [data-n="1"] > b, html[data-theme="nuit"] .af[data-temps="3"] [data-n="1"] > b, html[data-theme="nuit"] .af[data-temps="3"] [data-n="2"] > b { background: #fff; color: #141414; }

@media (max-width: 1080px) { .af__grille { gap: 40px; } }
@media (max-width: 960px) { .af__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .af__temps { margin-top: 26px; gap: 14px; }
  .af__temps li { font-size: 15px; }
  .af__bas { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .af *, .af *::before, .af *::after { transition: none !important; animation: none !important; }
}
/* ============================================================
   OPTERIA : accueil, bloc « Formation », proposition A « Le parcours », retravaillée le 14/10/2026 (Axel : « plus smooth,
   plus dans la DA, plus espacé, épuré, style SaaS, avec les exemples »). Même langage que « Votre parcours » juste au-dessus
   (da-gleap.css, .boucle) : fil gris fin, signal orange, tuiles arrondies à tête de Bobby, pastille de l'équipe, libellé
   + sous-titre gris. Ici le fil descend : le socle, l'atelier 1, l'atelier 2, l'application en service ; à chaque étape une
   petite carte d'exemple se pose. accueil-formation.js trace le fil, fait glisser la tête de Bobby et pose les états
   (.is-ici, .is-travail, .is-content, .is-ouvert, .is-fait, .is-fin). Aucune ombre, un filet de 1 px.
   Mouvement réduit : état final posé directement.
   ============================================================ */
.afa { --piste: #e4e3ea; --contour: #e3e2e8; --gris: #8e8e8a; --carte: #fff; --doux: #f6f6f4; --vert-fond: #edf3ed; --vert-bord: #cddbcc; --vert-txt: #4f7a47;
  --ease: cubic-bezier(.16,1,.3,1); --col: 104px;
  position: relative; display: block; color: var(--ink); text-decoration: none; }
html[data-theme="nuit"] .afa { --piste: #34343a; --contour: #333; --gris: rgba(255,255,255,.5); --carte: #1c1c1c; --doux: #252525; --vert-fond: #1c2a1c; --vert-bord: #2f4a2e; --vert-txt: #8cc48a; }
.afa:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 12px; }
.afa span, .afa small, .afa b, .afa i, .afa em { display: block; font-style: normal; }

.afa__cap { margin: 0 0 30px calc(var(--col) + 20px); font-size: 13px; color: var(--gris); }

/* le rail : quatre étapes, un fil vertical qui relie le centre des tuiles (accueil-formation.js le trace à la taille réelle) */
.afa__rail { position: relative; display: flex !important; flex-direction: column; gap: 34px; isolation: isolate; }
.afa__fil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.afa__fil path { fill: none; stroke-linecap: round; }
.afa__piste { stroke: var(--piste); stroke-width: 1.5; }
.afa__signal { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 0 100000; }

/* une étape : la tuile sur le fil, le libellé, puis sa carte d'exemple */
.afa__et { display: grid !important; grid-template-columns: var(--col) 148px minmax(0, 1fr); column-gap: 20px; align-items: start; }
.afa__id { display: flex !important; justify-content: center; }
.afa .boucle__id { display: flex !important; }
.afa .boucle__id { background: var(--carte); border-color: var(--contour); opacity: .5; transform: scale(.96); transition: opacity .7s var(--ease), transform .9s var(--ease), border-color .5s ease; }
.afa .boucle__tuile { width: 50px; height: 50px; border-radius: 14px; }
.afa .boucle__bobby { width: 40px; height: 40px; }
.afa .boucle__id--pilule { height: 52px; padding: 0 8px; }
.afa .boucle__equipe img { width: 36px; height: 36px; border-width: 2px; border-color: var(--carte); margin-left: -9px; }
.afa .boucle__equipe img:first-child { margin-left: 0; }
.afa__et.is-ici .boucle__id { border-color: var(--orange); }
.afa__et.is-vu .boucle__id { opacity: 1; transform: none; }

.afa__lab { padding-top: 13px; font-size: 15px; line-height: 1.3; color: var(--ink); opacity: .45; transition: opacity .7s var(--ease); }
.afa__lab small { margin-top: 3px; font-size: 12.5px; color: var(--gris); }
.afa__et.is-vu .afa__lab { opacity: 1; }

/* les cartes d'exemple : un filet de 1 px, elles glissent et se posent quand le signal arrive */
.afa__carte { display: flex !important; flex-direction: column; gap: 9px; padding: 13px 15px; border: 1px solid var(--contour); border-radius: 14px; background: var(--carte); font-size: 13px; line-height: 1.3;
  opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .7s var(--ease), transform 1s var(--ease); }
.afa__et.is-ouvert .afa__carte { opacity: 1; transform: none; }
.afa__carte > * { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.afa__et.is-ouvert .afa__carte > * { opacity: 1; transform: none; }
.afa__et.is-ouvert .afa__carte > :nth-child(2) { transition-delay: .12s; }
.afa__et.is-ouvert .afa__carte > :nth-child(3) { transition-delay: .24s; }
.afa__et.is-ouvert .afa__carte > :nth-child(4) { transition-delay: .36s; }

/* 1. le socle : trois modules qui se cochent */
.afa__ligne { display: flex !important; align-items: center; gap: 10px; color: var(--ink); }
.afa__coche { position: relative; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--contour); background: var(--carte); transition: background .5s ease, border-color .5s ease; }
.afa__coche::after { content: ""; position: absolute; left: 5px; top: 3px; width: 3px; height: 6px; border: solid var(--vert-txt); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.afa__ligne.is-fait .afa__coche { background: var(--vert-fond); border-color: var(--vert-bord); }
.afa__ligne.is-fait .afa__coche::after { transform: rotate(45deg) scale(1); }

/* pastilles d'état (en visio, en service) */
.afa__etat { display: inline-flex !important; align-self: flex-start; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--vert-fond); color: var(--vert-txt); font-size: 11.5px; font-weight: 500; }
.afa__etat i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.afa__et.is-ouvert .afa__etat i { animation: afa-pouls 2s ease-in-out infinite; }
@keyframes afa-pouls { 50% { opacity: .3; } }

/* 2. l'atelier 1 : vous, OpterIA, votre équipe, en visio */
.afa__gens { display: flex !important; gap: 18px; }
.afa__gens > span { display: flex !important; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.afa__gens i { display: grid !important; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--doux); border: 1px solid var(--contour); color: var(--gris); font-size: 10.5px; font-weight: 500; }
.afa__gens .afa__or { background: var(--orange); border-color: var(--orange); color: #fff; }

/* 3. l'atelier 2 : vos vraies demandes de devis */
.afa__dem { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--gris); font-size: 12px; }
.afa__dem b { font-weight: 400; font-size: 13px; color: var(--ink); }

/* 4. l'application : les demandes passent de « À traiter » à « Réponse prête » puis « Validée » */
.afa__suivi { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; }
.afa__suivi b { font-weight: 400; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afa__suivi em { display: grid !important; flex: none; justify-items: end; }
.afa__suivi em i { grid-area: 1 / 1; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; background: var(--doux); color: var(--gris);
  opacity: 0; transform: translate3d(0, 5px, 0); transition: opacity .45s ease, transform .6s var(--ease); }
.afa__suivi em i:nth-child(2) { background: rgba(251,77,23,.09); color: #c2410c; }
.afa__suivi em i:nth-child(3) { background: var(--vert-fond); color: var(--vert-txt); }
html[data-theme="nuit"] .afa__suivi em i:nth-child(2) { background: rgba(132,115,143,.18); color: #B3A3BE; }
.afa__suivi[data-s="0"] em i:nth-child(1), .afa__suivi[data-s="1"] em i:nth-child(2), .afa__suivi[data-s="2"] em i:nth-child(3) { opacity: 1; transform: none; }

/* la tête de Bobby qui suit le signal (accueil-formation.js la place sur le fil ; elle s'efface sur une étape) */
.afa__puce { position: absolute; left: 0; top: 0; z-index: 2; display: grid !important; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--orange); background: var(--paper); opacity: 0; transform: translate3d(var(--bx, 0px), var(--by, 0px), 0); will-change: transform; transition: opacity .35s ease; }
.afa__puce .boucle__bobby { width: 20px; height: 20px; opacity: 0; transform: scale(.4); transition: opacity .35s ease, transform .5s var(--ease); }
.afa__puce .boucle__bobby path, .afa__puce .boucle__bobby g { stroke: var(--orange); stroke-width: 6; }
.afa.is-route .afa__puce { opacity: 1; }
.afa.is-route .afa__puce .boucle__bobby { opacity: 1; transform: none; }

@media (max-width: 1180px) { .afa__et { grid-template-columns: var(--col) 118px minmax(0, 1fr); column-gap: 16px; } }
@media (max-width: 640px) {
  .afa { --col: 84px; }
  .afa__cap { margin: 0 0 22px calc(var(--col) + 14px); font-size: 12.5px; }
  .afa__rail { gap: 26px; }
  .afa__et { grid-template-columns: var(--col) minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
  .afa__carte { grid-column: 2; padding: 11px 13px; font-size: 12.5px; }
  .afa .boucle__tuile { width: 42px; height: 42px; border-radius: 12px; } .afa .boucle__bobby { width: 32px; height: 32px; }
  .afa .boucle__id--pilule { height: 44px; padding: 0 6px; } .afa .boucle__equipe img { width: 27px; height: 27px; margin-left: -7px; }
  .afa__lab { padding-top: 9px; font-size: 14.5px; }
  .afa__gens { gap: 10px; } .afa__gens > span { gap: 5px; font-size: 12px; } .afa__gens i { width: 22px; height: 22px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .afa *, .afa { transition: none !important; animation: none !important; } }