/* Formation Salarié Augmenté (formations/salarie-augmente/) : page claire, une idée par écran, et les agents ont un visage :
   les personnages en pâte à modeler de la page NIKIBOT (assets/img/nikibot/personnages/<couleur>-<expression>.webp).
   Règles de la page : fond blanc ou très clair, titres centrés tous au même style (.sa-h2), un seul visuel par section,
   le magenta sur un seul mot, aucun texte posé sur un autre ; un personnage ne dépasse que de derrière un cadre.
   Couleurs de l’accueil (accueil.css). Chaque personnage a sa teinte pastel (.sa-t-<couleur>).
   Tout mouvement s’arrête si le visiteur a demandé moins d’animations. */

.sa-mot { background: linear-gradient(100deg, var(--ac-magenta), #e04de0 55%, var(--ac-magenta-clair)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sa-sec { padding: clamp(88px, 12vw, 160px) var(--ac-marge); scroll-margin-top: 80px; }
.sa-sec > .ac-cadre { max-width: 1160px; }
.sa-blanc { background: #fff; } .sa-fond { background: var(--ac-fond); } .sa-sable { background: var(--ac-sable); }
.sa-h2 { max-width: 880px; margin: 0 auto !important; text-align: center; font-weight: 500; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; color: var(--ac-encre); }
.sa-h2-grand { max-width: 1000px; font-size: clamp(40px, 6vw, 88px); line-height: 1; letter-spacing: -0.05em; }
.sa-sur { font-size: 17px; color: var(--ac-gris); text-align: center; }
.sa-lien-fleche { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; color: var(--ac-magenta); text-decoration: none; }
.sa-lien-fleche .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .2s; }
.sa-lien-fleche:hover { text-decoration: underline; text-underline-offset: 4px; }
.sa-lien-fleche:hover .ico { transform: translateX(3px); }
.sa-inter { background: var(--ac-magenta); }
.sa-t-citron { --teinte: #fff0b3; } .sa-t-lavande { --teinte: #e8e0ff; } .sa-t-menthe { --teinte: #d6f2e1; }
.sa-t-azur { --teinte: #d5ecfa; } .sa-t-cobalt { --teinte: #d9e1ff; } .sa-t-corail { --teinte: #ffddd4; }
.sa-bot, .sa-p-bot, .sa-etape-bot, .sa-b-bot, .sa-foule-bot { height: auto; }
.sa-bot, .sa-carte-bot, .sa-p-bot, .sa-etape-bot, .sa-b-bot, .sa-foule-bot { filter: drop-shadow(0 12px 14px rgba(60, 40, 20, .14)); user-select: none; -webkit-user-drag: none; }

/* ---------------------------------------------------------------- haut de page */
.sa-hero-boite { padding: 0 0 64px; background: linear-gradient(180deg, #fff 0%, #fff 38%, var(--ac-sable) 100%); }
.sa-hero-boite::before { display: none; }
.sa-hero-tete { position: relative; padding: 156px var(--ac-marge) 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.sa-hero h1 { font-weight: 500; font-size: clamp(52px, 8vw, 116px); line-height: .96; letter-spacing: -0.055em; max-width: none; }
.sa-hero .ac-h1-surtitre { margin-bottom: 24px; }
.sa-h-ligne { display: block; padding-bottom: .05em; }
.sa-hero-intro { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: var(--ac-texte); max-width: 560px; text-wrap: balance; }
.sa-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 4px; }
.sa-hero-prix { font-size: 15px; color: var(--ac-gris); }

.sa-produit { position: relative; max-width: 860px; margin: 64px auto 0; padding: 0 var(--ac-marge); box-sizing: content-box; }
.sa-hero { overflow-x: clip; }
.sa-bot { position: absolute; z-index: 0; }
.sa-bot-1 { left: calc(var(--ac-marge) + 10%); top: -68px; width: 118px; }
.sa-bot-2 { left: calc(var(--ac-marge) - 66px); bottom: 13%; width: 120px; rotate: -9deg; }
.sa-bot-3 { right: calc(var(--ac-marge) - 60px); bottom: 38%; width: 108px; rotate: 8deg; }
.sa-app { position: relative; z-index: 1; border-radius: 20px; background: #fff; overflow: hidden; text-align: left; box-shadow: 0 0 0 1px rgba(35, 11, 32, .06), 0 40px 100px rgba(35, 11, 32, .12); }
.sa-app-barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--ac-ligne); font-size: 14px; }
.sa-app-feux { display: flex; gap: 7px; } .sa-app-feux i { width: 11px; height: 11px; border-radius: 50%; background: #e7e1e5; }
.sa-app-titre { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ac-encre); }
.sa-app-titre img { width: 24px; height: auto; }
.sa-app-etat { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ac-gris); }
.sa-app-etat i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-magenta); }
.sa-app-main { display: grid; gap: 28px; padding: 36px clamp(22px, 5vw, 56px) 40px; }
.sa-a-entree { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ac-gris); }
.sa-a-entree .ac-mono { font-size: 11px; color: #fff; background: var(--ac-encre); padding: 4px 10px; border-radius: 99px; flex: none; }
.sa-a-titre { font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; color: var(--ac-encre); margin-bottom: 14px !important; }
.sa-a-l { padding: 15px 0; border-top: 1px solid var(--ac-ligne); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.35; color: var(--ac-texte); }
.sa-a-l:last-child { border-bottom: 1px solid var(--ac-ligne); }
.sa-a-l span { display: inline-block; }
.sa-a-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sa-a-attend { font-size: 15px; color: var(--ac-gris); }
.sa-a-bouton { position: relative; display: inline-grid; font: 14px var(--ac-mono); padding: 13px 22px; border-radius: 99px; background: var(--ac-nuit); color: #fff; white-space: nowrap; }
.sa-a-b1, .sa-a-b2 { grid-area: 1 / 1; text-align: center; }
.sa-a-b2 { opacity: 0; }
.sa-outils { margin-top: 64px; padding-bottom: 0; }

/* Arrivée du haut de page, puis la séquence de l’agent (« anime » posé par le script, « joue » quand la fenêtre est à l’écran). */
.js .sa-hero-tete > * { animation: sa-arrive .9s cubic-bezier(.2, .7, .2, 1) both; }
.js .sa-hero-tete > :nth-child(2) { animation-delay: .12s; } .js .sa-hero-tete > :nth-child(3) { animation-delay: .22s; } .js .sa-hero-tete > :nth-child(4) { animation-delay: .3s; }
.js .sa-produit { animation: sa-monte 1.1s .3s cubic-bezier(.2, .7, .2, 1) both; }
.js .sa-bot-1 { animation: sa-pointe-haut .8s 1.5s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .sa-bot-2 { animation: sa-pointe-gauche .8s 1.8s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .sa-bot-3 { animation: sa-pointe-droite .8s 2.1s cubic-bezier(.2, 1.3, .4, 1) both; }
.sa-app.anime .sa-a-entree, .sa-app.anime .sa-a-titre, .sa-app.anime .sa-a-l span, .sa-app.anime .sa-a-pied { opacity: 0; }
.sa-app.joue .sa-a-entree { animation: sa-arrive .6s .5s both; }
.sa-app.joue .sa-a-titre { animation: sa-arrive .6s 1.1s both; }
.sa-app.joue .sa-a-l span { animation: sa-ecrit .8s calc(1.7s + var(--i) * .75s) cubic-bezier(.4, 0, .2, 1) both; }
.sa-app.joue .sa-a-pied { animation: sa-arrive .6s 4.2s both; }
.sa-app.joue .sa-a-bouton { animation: sa-appui .5s 5.8s both; }
.sa-app.joue .sa-a-b1 { animation: sa-sort .25s 5.9s both; }
.sa-app.joue .sa-a-b2 { animation: sa-entre .3s 6.1s both; }
.sa-app.joue .sa-a-attend { animation: sa-sort .3s 5.9s both; }

@keyframes sa-pointe-haut { from { transform: translateY(70%); } to { transform: none; } }
@keyframes sa-pointe-gauche { from { transform: translateX(70%); } to { transform: none; } }
@keyframes sa-pointe-droite { from { transform: translateX(-70%); } to { transform: none; } }
@keyframes sa-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sa-monte { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes sa-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sa-ecrit { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes sa-appui { 0% { transform: none; } 45% { transform: scale(.94); } 100% { transform: none; background: var(--ac-magenta); } }
@keyframes sa-sort { to { opacity: 0; } }
@keyframes sa-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes sa-coche { 0% { background: #d9d0d6; transform: scale(.6); } 60% { transform: scale(1.15); } 100% { background: var(--ac-nuit); transform: none; } }
@keyframes sa-temps { to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- « Le lundi qui suit la formation » */
.sa-lundi .ac-cadre { max-width: 1000px; }
.sa-lundi-texte { margin-top: 20px !important; text-align: center; font-weight: 500; font-size: clamp(32px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.045em; color: var(--ac-encre); text-wrap: balance; }
.sa-mots-actif .sa-m { opacity: .14; transition: opacity .35s ease; }
.sa-mots-actif .sa-m.on { opacity: 1; }
/* une fois la phrase découpée en mots, le passage accentué prend une seule teinte (un dégradé par mot ferait des à-coups) */
.sa-mots-actif .sa-mot { background: none; }
.sa-mots-actif .sa-mot .sa-m { color: #d61ad6; }

/* ---------------------------------------------------------------- « Quel agent allez-vous construire ? » */
.sa-onglets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.sa-carte { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 24px 10px 24px; border: 0; border-radius: 26px; background: linear-gradient(180deg, var(--teinte) 0%, #fff 58%); font-family: inherit; color: var(--ac-encre); text-align: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(35, 11, 32, .04); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.sa-carte-bot { width: auto; height: 74px; margin-bottom: 12px; }
.sa-carte b { font-weight: 500; font-size: 15.5px; line-height: 1.2; letter-spacing: -0.01em; }
.sa-carte span { font-size: 13.5px; line-height: 1.3; color: var(--ac-gris); }
.sa-carte:hover { transform: translateY(-4px); }
.sa-carte[aria-selected="true"] { transform: translateY(-10px); box-shadow: 0 0 0 1px rgba(35, 11, 32, .04), 0 24px 48px rgba(35, 11, 32, .13); }
.sa-carte:focus-visible { outline: 2px solid var(--ac-magenta); outline-offset: 3px; }
.sa-onglet-temps { position: absolute; left: 28px; right: 28px; bottom: 10px; height: 3px; border-radius: 2px; background: var(--ac-magenta); transform: scaleX(0); transform-origin: left; }
.sa-carte[aria-selected="true"] .sa-onglet-temps { animation: sa-temps var(--sa-duree, 8s) linear forwards; }
.sa-demo.en-pause .sa-onglet-temps, .sa-demo.hors-ecran .sa-onglet-temps { animation-play-state: paused !important; }
.sa-demo.sans-auto .sa-onglet-temps { animation: none !important; }

.sa-panneaux { margin-top: 72px; min-height: 470px; }
.sa-panneau { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.sa-p-qui { display: grid; justify-items: start; gap: 14px; }
.sa-p-bot { width: 124px; margin-bottom: 10px; }
.sa-p-qui .ac-mono { font-size: 12.5px; color: var(--ac-gris); }
.sa-panneau[hidden] { display: none; }
.sa-panneau:focus-visible { outline: 2px solid var(--ac-magenta); outline-offset: 8px; border-radius: 12px; }
.sa-p-tache { font-weight: 500; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.06; letter-spacing: -0.04em; color: var(--ac-encre); text-wrap: balance; }
.sa-f-visage { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--teinte); display: grid; place-items: center; }
.sa-f-visage img { width: 30px; height: auto; }
.sa-fenetre { background: #fff; color: var(--ac-encre); border-radius: 22px; padding: 26px 28px; box-shadow: 0 0 0 1px rgba(35, 11, 32, .04), 0 30px 80px rgba(35, 11, 32, .1); }
.sa-fenetre .ac-agent-entete { padding-bottom: 18px; }
.sa-f-entree { display: flex; align-items: center; gap: 12px; margin-top: 20px !important; font-size: 15px; color: var(--ac-gris); }
.sa-f-entree .ac-mono { font-size: 11px; color: #fff; background: var(--ac-encre); padding: 4px 9px; border-radius: 99px; flex: none; }
.sa-fenetre .sa-f-etapes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; font-size: 16px; }
.sa-f-etapes li { display: flex; align-items: center; gap: 12px; }
.sa-f-etapes .ac-point { width: 22px; height: 22px; font-size: 11px; }
.sa-f-sortie { margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: var(--ac-fond); display: grid; gap: 4px; }
.sa-f-sortie .ac-mono { font-size: 11px; color: var(--ac-gris); }
.sa-f-sortie b { font-weight: 600; font-size: 15px; }
.sa-f-sortie p:not(.ac-mono) { font-size: 15px; line-height: 1.5; color: var(--ac-texte); }
.sa-f-valider { display: flex; align-items: center; gap: 10px; margin-top: 20px !important; font-size: 15px; color: var(--ac-gris); }
.sa-f-valider > .ac-point { width: 10px; height: 10px; }
.sa-f-valider .ac-valider { font-size: 13px; padding: 9px 16px; }
.sa-demo-note { margin-top: 36px !important; font-size: 14px; color: var(--ac-gris); text-align: center; }

/* Le panneau joue : la demande arrive, les étapes se cochent, le résultat apparaît, la validation attend. */
.js .sa-panneau .sa-p-qui, .js .sa-panneau .sa-f-entree, .js .sa-panneau .sa-f-etapes li, .js .sa-panneau .sa-f-sortie, .js .sa-panneau .sa-f-valider { opacity: 0; }
.js .sa-panneau.joue .sa-p-qui { animation: sa-arrive .6s cubic-bezier(.2, .7, .2, 1) both; }
.js .sa-panneau.joue .sa-p-bot { animation: sa-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.js .sa-panneau.joue .sa-f-entree { animation: sa-arrive .5s .3s both; }
.js .sa-panneau.joue .sa-f-etapes li { animation: sa-arrive .45s calc(.9s + var(--i) * .7s) both; }
.js .sa-panneau.joue .sa-f-etapes .ac-point { animation: sa-coche .45s calc(1.05s + var(--i) * .7s) both; }
.js .sa-panneau.joue .sa-f-sortie { animation: sa-arrive .55s 3.2s both; }
.js .sa-panneau.joue .sa-f-valider { animation: sa-arrive .5s 4s both; }

/* ---------------------------------------------------------------- les 2 jours en quatre étapes */
.sa-parcours .sa-etapes { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sa-etape { display: flex; flex-direction: column; gap: 10px; }
.sa-etape-scene { position: relative; overflow: hidden; height: 230px; margin-bottom: 14px; border-radius: 28px; display: grid; place-items: center; background: var(--ac-sable); }
.sa-etape:nth-child(2) .sa-etape-scene { background: #f6e9ee; } .sa-etape:nth-child(3) .sa-etape-scene { background: #fbdfee; } .sa-etape:nth-child(4) .sa-etape-scene { background: #ffd2ea; }
.sa-etape-num { position: absolute; left: 20px; top: 18px; font-size: 12.5px; color: var(--ac-gris); }
.sa-etape-bot { width: 116px; margin-top: 14px; }
.sa-etape-etat { position: absolute; right: 16px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: #fff; font: 12px var(--ac-mono); color: var(--ac-encre); }
.sa-etape-etat i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-magenta); }
.sa-etape > * { padding-left: 6px; padding-right: 6px; } .sa-etape > .sa-etape-scene { padding: 0; }
.sa-etape-quand { font-size: 12.5px; color: var(--ac-gris); }
.sa-etape h3 { font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.sa-etape > p:not(.sa-etape-quand) { font-size: 16px; line-height: 1.5; color: var(--ac-gris); }
.js .sa-parcours .sa-etape { opacity: 0; transform: translateY(28px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * .1s); }
.js .sa-parcours.est-visible .sa-etape { opacity: 1; transform: none; }
.sa-dort .sa-etape-etat { opacity: 0; transition: opacity .4s; } .sa-dort .sa-etape-etat.on { opacity: 1; }

.sa-detail { margin: 72px auto 0; max-width: 880px; border-top: 1px solid var(--ac-ligne); border-bottom: 1px solid var(--ac-ligne); }
.sa-detail summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; }
.sa-detail summary::-webkit-details-marker { display: none; }
.sa-detail summary:hover { color: var(--ac-magenta); }
.sa-detail summary .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(90deg); transition: transform .25s; }
.sa-detail[open] summary .ico { transform: rotate(-90deg); }
.sa-detail-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; padding: 6px 0 32px; }
.sa-detail-corps .ac-mono { font-size: 12px; color: var(--ac-gris); }
.sa-detail-corps h3 { font-weight: 500; font-size: 17px; margin-top: 18px !important; }
.sa-detail-corps p { font-size: 15px; line-height: 1.55; color: var(--ac-texte); margin-top: 6px !important; }
.sa-detail-liv { padding: 12px 14px; border-radius: 12px; background: var(--ac-fond); margin-top: 16px !important; display: grid; gap: 4px; }
.sa-detail-pied { grid-column: 1 / -1; font-size: 14px !important; color: var(--ac-gris) !important; }

/* ---------------------------------------------------------------- « En bref » : cinq tuiles */
.sa-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(280px, auto); gap: 18px; margin-top: 64px; }
.sa-b { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 32px; border-radius: 28px; background: #fff; }
.sa-b h3 { font-weight: 400; font-size: 17px; line-height: 1.35; color: var(--ac-gris); }
.sa-b-geant { font-weight: 500; font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.055em; color: var(--ac-encre); white-space: nowrap; }
.sa-b-zero { grid-column: span 2; grid-row: span 2; padding: 48px; justify-content: space-between; }
.sa-b-zero .sa-b-geant { font-size: clamp(120px, 15vw, 220px); line-height: .9; margin-left: -.04em; }
.sa-b-zero .sa-mot { display: inline-block; padding-right: .08em; }
.sa-b-zero h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ac-encre); max-width: 440px; margin-top: auto !important; }
.sa-b-zero > p:not(.sa-b-geant) { font-size: 17px; line-height: 1.45; color: var(--ac-gris); max-width: 440px; margin-top: 6px !important; }
.sa-b-zero .sa-lien-fleche { margin-top: 18px; align-self: flex-start; }
/* le personnage est dans le flux, en haut de la tuile : il ne peut pas toucher le chiffre */
.sa-b-agent { background: #efe9ff; }
.sa-b-bot { width: 88px; margin-bottom: auto; }
.sa-qualiopi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 48px !important; font-size: 16px; color: var(--ac-texte); }
.sa-qualiopi img { width: auto; height: 46px; mix-blend-mode: multiply; }
.sa-qualiopi .sa-lien-fleche { font-size: 16px; }
.sa-note { margin-top: 18px !important; text-align: center; font-size: 13px; color: var(--ac-gris-2); }
.js .sa-bref .sa-b { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .sa-bref .sa-b:nth-child(2) { transition-delay: .08s; } .js .sa-bref .sa-b:nth-child(3) { transition-delay: .16s; }
.js .sa-bref .sa-b:nth-child(4) { transition-delay: .24s; } .js .sa-bref .sa-b:nth-child(5) { transition-delay: .32s; }
.js .sa-bref.est-visible .sa-b { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- « Démarrer » */
.sa-demarrer .sa-cinq { position: relative; list-style: none; margin: 80px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.sa-cinq .sa-cinq-trace { position: absolute; left: 22px; right: calc(20% - 35px); top: 21px; border-top: 2px dashed var(--ac-ligne-2); clip-path: inset(-2px 100% -2px 0); transition: clip-path 2s cubic-bezier(.4, 0, .2, 1) .2s; }
.sa-demarrer.est-visible .sa-cinq-trace, html:not(.js) .sa-cinq-trace { clip-path: inset(-2px 0 -2px 0); }
.sa-cinq li:not(.sa-cinq-trace) { position: relative; display: grid; gap: 18px; align-content: start; grid-template-rows: auto 1fr; }
.sa-cinq span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 500; background: #fff; color: var(--ac-encre); border: 1.5px solid var(--ac-ligne-2); transition: background .4s, color .4s, border-color .4s; transition-delay: calc(.3s + var(--i) * .35s); }
.sa-demarrer.est-visible .sa-cinq span, html:not(.js) .sa-cinq span { background: var(--ac-encre); color: #fff; border-color: var(--ac-encre); }
.sa-demarrer.est-visible .sa-cinq li:last-child span, html:not(.js) .sa-cinq li:last-child span { background: var(--ac-magenta); border-color: var(--ac-magenta); }
.sa-cinq p { padding: 22px 22px 26px; border-radius: 22px; background: var(--ac-fond); font-size: 16px; line-height: 1.45; color: var(--ac-gris); }
.sa-cinq b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--ac-encre); }
.js .sa-demarrer .sa-cinq p { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.4s + var(--i) * .35s); }
.js .sa-demarrer.est-visible .sa-cinq p { opacity: 1; transform: none; }
.sa-dates { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 80px; padding: 36px 40px; border-radius: 28px; background: var(--ac-fond); }
.sa-dates > div { display: grid; gap: 10px; max-width: 780px; }
.sa-dates p { font-size: 19px; line-height: 1.4; color: var(--ac-encre); text-wrap: balance; }
.sa-dates .sa-dates-pratique { font-size: 14px; color: var(--ac-gris); }
.sa-dates a:not(.ac-btn) { color: inherit; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- dernier appel */
.sa-final { padding-top: 24px; padding-bottom: clamp(24px, 4vw, 56px); }
.sa-final-panneau { position: relative; overflow: hidden; max-width: 1360px; margin: 0 auto; padding: clamp(72px, 9vw, 132px) 24px 0; border-radius: 44px; background: var(--ac-sable); }
.sa-final .sa-hero-actions { margin-top: 44px; }
.sa-foule { display: flex; justify-content: center; align-items: flex-end; margin: clamp(56px, 7vw, 104px) -24px -2.2%; }
.sa-foule-bot { flex: none; width: 9.4%; margin-left: -1.3%; }
.sa-foule-bot:first-child { margin-left: 0; }
.sa-foule-bot:nth-child(3n+1) { margin-bottom: 1.6%; } .sa-foule-bot:nth-child(4n+2) { margin-bottom: 3%; width: 8.6%; } .sa-foule-bot:nth-child(odd) { z-index: 1; position: relative; }
.js .sa-final .sa-foule-bot { transform: translateY(115%); transition: transform .9s cubic-bezier(.2, 1.25, .4, 1); transition-delay: calc(.15s + var(--k) * .06s); }
.js .sa-final.est-visible .sa-foule-bot { transform: none; }

/* ---------------------------------------------------------------- tablette et téléphone */
@media (max-width: 1100px) {
  .sa-bot-2, .sa-bot-3 { display: none; }
  .sa-onglets { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .sa-parcours .sa-etapes { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .sa-bento { grid-template-columns: 1fr 1fr; }
  .sa-b-zero { grid-row: auto; min-height: 420px; }
  /* les cinq étapes passent en colonne, le tracé en pointillés descend à gauche */
  .sa-demarrer .sa-cinq { grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin-left: auto; margin-right: auto; }
  .sa-cinq .sa-cinq-trace { left: 21px; right: auto; top: 22px; bottom: 40px; border-top: 0; border-left: 2px dashed var(--ac-ligne-2); clip-path: inset(0 -2px 100% -2px); }
  .sa-demarrer.est-visible .sa-cinq-trace, html:not(.js) .sa-cinq-trace { clip-path: inset(0 -2px 0 -2px); }
  .sa-cinq li:not(.sa-cinq-trace) { grid-template-columns: 44px 1fr; grid-template-rows: auto; align-items: start; gap: 16px; }
}
@media (max-width: 900px) {
  .sa-panneaux { min-height: 0; }
  .sa-panneau { grid-template-columns: 1fr; gap: 36px; max-width: 600px; }
  .sa-p-qui { justify-items: center; text-align: center; }
  .sa-p-bot { width: 104px; }
}
@media (max-width: 760px) {
  .sa-sec { padding: 88px 20px; }
  .sa-hero-boite { padding-bottom: 48px; }
  .sa-hero-tete { padding: 124px 16px 0; gap: 20px; }
  .sa-hero h1 { font-size: clamp(46px, 14.5vw, 64px); }
  .sa-hero .ac-h1-surtitre { font-size: 12.5px; margin-bottom: 20px; }
  .sa-hero-actions { width: 100%; }
  .sa-hero-actions .ac-btn { flex: 1 1 100%; }
  .sa-produit { margin-top: 48px; padding: 0 6px; }
  .sa-app { border-radius: 16px; }
  .sa-app-barre { grid-template-columns: auto 1fr; gap: 12px; padding: 0 14px; height: 44px; font-size: 13px; }
  .sa-app-etat { display: none; }
  .sa-app-main { gap: 22px; padding: 24px 18px 26px; }
  .sa-a-entree { font-size: 14px; }
  .sa-a-l { padding: 13px 0; }
  .sa-a-attend { font-size: 13.5px; }
  .sa-a-bouton { font-size: 12.5px; padding: 12px 16px; }
  .sa-outils { margin-top: 48px; }
  .sa-bot-1 { left: auto; right: 12%; top: -50px; width: 88px; }
  .sa-app-titre img { width: 22px; }
  .sa-onglets { gap: 10px; row-gap: 14px; margin-top: 44px; }
  .sa-carte { padding: 16px 6px 20px; border-radius: 20px; }
  .sa-carte-bot { height: 54px; margin-bottom: 8px; }
  .sa-carte b { font-size: 13.5px; }
  .sa-carte span { display: none; }
  .sa-carte[aria-selected="true"] { transform: translateY(-5px); }
  .sa-onglet-temps { left: 18px; right: 18px; bottom: 8px; }
  .sa-panneaux { margin-top: 44px; }
  .sa-panneau { gap: 28px; }
  .sa-p-tache { font-size: 28px; }
  .sa-fenetre { padding: 20px; border-radius: 18px; }
  .sa-fenetre .sa-f-etapes { font-size: 15px; }
  .sa-parcours .sa-etapes { grid-template-columns: 1fr; row-gap: 40px; margin-top: 48px; }
  .sa-etape-scene { height: 190px; border-radius: 22px; }
  .sa-etape-bot { width: 100px; }
  .sa-b-bot { width: 60px; margin-bottom: 14px; }
  .sa-detail { margin-top: 56px; }
  .sa-detail-corps { grid-template-columns: 1fr; }
  .sa-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 12px; margin-top: 44px; }
  .sa-b { padding: 22px; border-radius: 22px; min-height: 170px; }
  .sa-b h3 { font-size: 15px; }
  .sa-b-geant { font-size: clamp(34px, 10vw, 44px); }
  .sa-b-zero { min-height: 0; padding: 28px; gap: 8px; }
  .sa-b-zero h3 { font-size: 21px; }
  .sa-b-zero .sa-b-geant { font-size: clamp(110px, 34vw, 150px); margin-bottom: 28px !important; }
  .sa-qualiopi { flex-direction: column; margin-top: 36px !important; text-align: center; }
  .sa-demarrer .sa-cinq { margin-top: 48px; gap: 12px; }
  .sa-cinq li:not(.sa-cinq-trace) { gap: 12px; }
  .sa-cinq p { padding: 16px 18px 18px; border-radius: 18px; }
  .sa-cinq b { font-size: 17px; }
  .sa-final { padding: 12px 12px 20px; }
  .sa-final-panneau { padding: 72px 20px 0; border-radius: 30px; }
  .sa-foule { margin: 56px -20px -4.5%; }
  .sa-foule-bot { width: 19.5%; margin-left: -3%; }
  .sa-foule-bot:nth-child(4n+2) { width: 18%; margin-bottom: 5%; }
  .sa-foule-bot:nth-child(n+7) { display: none; }
  .sa-dates { flex-direction: column; align-items: stretch; margin-top: 56px; padding: 26px; border-radius: 22px; }
  .sa-dates p { font-size: 17px; }
}

/* Moins d’animations : tout est affiché d’emblée, rien ne bouge seul. */
@media (prefers-reduced-motion: reduce) {
  .js .sa-hero-tete > *, .js .sa-produit, .js .sa-bot { animation: none !important; }
  .js .sa-parcours .sa-etape, .js .sa-demarrer .sa-cinq p, .js .sa-final .sa-foule-bot { opacity: 1; transform: none; transition: none; }
  .sa-cinq .sa-cinq-trace { clip-path: none; transition: none; }
  .sa-carte { transition: none; }
  .js .sa-panneau .sa-p-qui, .js .sa-panneau .sa-p-bot, .js .sa-panneau .sa-f-entree, .js .sa-panneau .sa-f-etapes li, .js .sa-panneau .sa-f-sortie, .js .sa-panneau .sa-f-valider { opacity: 1; animation: none !important; }
  .js .sa-panneau .ac-point { animation: none !important; }
  .sa-onglet-temps { display: none; }
  .js .sa-bref .sa-b { opacity: 1; transform: none; transition: none; }
  .sa-cinq span { transition: none; }
}