/* 04/10/2026 — motion design qui construit les pages (même langage que le film d'intro et qu'educform31.fr).
   Intro : sur-titre tapé, titre mot à mot, texte et boutons qui arrivent, visuel en profondeur, badges un par un.
   Défilement : titres de section mot à mot, cartes en profondeur décalées, captures et images qui se posent.
   Fondu flouté entre les pages. Transform et opacity seulement sur le contenu ; mouvements réduits ou impression :
   tout est visible, rien ne bouge. Classes posées par motion/pp-motion.js ; pp-mo est posée dans le <head>. */
:root{--pm-e:cubic-bezier(.23,1,.32,1)}

/* ---- fondu flouté entre les pages (navigateurs récents ; ignoré ailleurs). Toute la page, en-tête compris : la première
   image de la page suivante peut être dessinée avant ses polices, le flou masque leur arrivée ---- */
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:pmVtOut .26s cubic-bezier(.4,0,1,1) both}
 ::view-transition-new(root){animation:pmVtIn .55s var(--pm-e) both}
}
@keyframes pmVtOut{to{opacity:0;filter:blur(8px)}}
@keyframes pmVtIn{from{opacity:0;filter:blur(10px);transform:translate3d(0,12px,0)}}

/* ---- garde-fous : rien ne déborde pendant les entrées en profondeur ; les sections ne s'estompent plus en bloc,
   ce sont leurs éléments qui se construisent (main.js ne garde que .in pour les compteurs et la frise) ---- */
html.pp-mo main{overflow-x:clip}
html.pp-mo .reveal{opacity:1;transform:none;transition:none}

/* ---- avant la construction : l'intro attend (le film, ou le script). Filet : sans construction, tout s'affiche
   au bout de 3,5 s — jamais pendant le film (pp-film-prep, pp-film-on), sinon la page finie apparaîtrait sous le film
   qui s'efface, puis se reconstruirait ---- */
html.pp-mo:not(.pp-go) :is(.section-hero .pill,.section-hero .eyebrow,.section-hero h1,.section-hero .pilot,.section-hero .lead,.section-hero .btn-row,.section-hero .hero-more,.section-hero .voir-mouvement,.section-hero .hint,.section-hero .hero-3d,.section-hero .phone-wrap,.entry>h1,.entry>.entry-content,.home .trust>span){opacity:0}
html.pp-mo:not(.pp-go):not(.pp-film-on):not(.pp-film-prep) :is(.section-hero .pill,.section-hero .eyebrow,.section-hero h1,.section-hero .pilot,.section-hero .lead,.section-hero .btn-row,.section-hero .hero-more,.section-hero .voir-mouvement,.section-hero .hint,.section-hero .hero-3d,.section-hero .phone-wrap,.entry>h1,.entry>.entry-content,.home .trust>span){animation:pmFilet 0s 3.5s forwards}
@keyframes pmFilet{to{opacity:1}}

/* ---- éléments en attente du défilement ---- */
html.pp-mo .pm-r:not(.pm-on){opacity:0}
html.pp-mo .pm-h0{opacity:0}
html.pp-mo:not(.pp-go):not(.pp-film-on):not(.pp-film-prep) :is(.pm-r,.pm-h0){animation:pmFilet 0s 3.5s forwards}
html.pp-mo .pm-r:not(.pm-on):focus-within{opacity:1}
html.pp-mo .pm-h:not(.pm-on) .pm-i{opacity:0;transform:translate3d(0,105%,0)}

/* ---- titres mot à mot ---- */
.pm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .06em .2em;margin:-.1em -.06em -.2em}
.pm-i{display:inline-block}
html.pp-go .pm-h.pm-on .pm-i{animation:pmMot .9s var(--pm-e) calc(var(--pm-d,0ms) + var(--k,0) * var(--pm-s,55ms)) backwards}

/* ---- sur-titre tapé (la place du texte est réservée) ---- */
.pm-ty-a{position:relative}
.pm-ty-b{visibility:hidden}
.pm-tape .pm-ty-a::after{content:"";position:absolute;right:-4px;top:.08em;bottom:.04em;width:2px;border-radius:1px;background:currentColor;animation:pmCaret .9s steps(2) infinite}
.pm-tape-fin .pm-ty-a::after{animation:pmCaret .9s steps(2) 2,pmCaretFin .3s 1.8s forwards}

/* ---- entrées ---- */
html.pp-go .pm-up.pm-on{animation:pmUp .8s var(--pm-e) var(--pm-d,0ms) backwards}
html.pp-go .pm-pop.pm-on{animation:pmPop .6s var(--pm-e) var(--pm-d,0ms) backwards}
html.pp-go .pm-3d.pm-on{animation:pmDepth .95s var(--pm-e) var(--pm-d,0ms) backwards}
html.pp-go .pm-tel.pm-on{animation:pmTel 1.15s var(--pm-e) var(--pm-d,0ms) backwards}
html.pp-go .pm-cote.pm-on{animation:pmCote .95s var(--pm-e) var(--pm-d,0ms) backwards}
html.pp-go .hero-3d.pm-vis.pm-on{animation:pmVis 1.5s var(--pm-e) var(--pm-d,0ms) backwards}
html.pp-go .phone-wrap.pm-vis.pm-on{animation:pmTelHero 1.35s var(--pm-e) var(--pm-d,0ms) backwards}

/* visuel du haut de page : le téléphone se remplit, le badge arrive, les niveaux se cochent */
html.pp-go .pm-vis.pm-on .phone-screen>*{animation:pmUp .55s var(--pm-e) calc(var(--pm-d,0ms) + 620ms + var(--n,0) * 70ms) backwards}
html.pp-go .pm-vis.pm-on .lvl.on{animation:pmPop .45s var(--pm-e) calc(var(--pm-d,0ms) + 1150ms + var(--n,0) * 160ms) backwards}
html.pp-go .pm-vis.pm-on .tphone-screen img{animation:pmPose 1.7s var(--pm-e) calc(var(--pm-d,0ms) + 200ms) backwards}
html.pp-go .pm-vis.pm-on .tphone-badge{animation:pmBadge .6s var(--pm-e) calc(var(--pm-d,0ms) + 1000ms) backwards}

/* dans les cartes : pictogrammes, coches et numéros d'étape, captures qui se posent */
html.pp-go .pm-on :is(.icon-box,.check-sq,.step-n){animation:pmPop .6s var(--pm-e) calc(var(--pm-d,0ms) + 260ms) backwards}
html.pp-go :is(.pm-3d,.pm-tel).pm-on img{animation:pmPose 1.5s var(--pm-e) var(--pm-d,0ms) backwards}

/* « Sur papier / Avec Passerelle Pro » : les photos se posent, le trait se trace, chaque côté arrive de son bord */
html.pp-go .pm-fond.pm-on{animation:pmFond 1.8s var(--pm-e) var(--pm-d,0ms) backwards}
html.pp-go .pm-fond.pm-on .duo-apercu__trait{transform-origin:50% 0;animation:pmTrait 1.3s var(--pm-e) calc(var(--pm-d,0ms) + 350ms) backwards}
.duo-apercu__cote--papier{--pm-x:-36px}
.duo-apercu__cote--pp{--pm-x:36px}
@media (max-width:760px){.duo-apercu__cote--papier,.duo-apercu__cote--pp{--pm-x:0px}}

/* révélés sans animation (déjà au-dessus de l'écran, saut d'ancre) */
html.pp-go .pm-net,html.pp-go .pm-net :is(.pm-i,.icon-box,.check-sq,.step-n,img,.phone-screen>*,.lvl,.tphone-badge,.duo-apercu__trait){animation:none!important}

@keyframes pmUp{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes pmPop{from{opacity:0;transform:scale(.9)}}
@keyframes pmMot{from{opacity:0;transform:translate3d(0,105%,0)}}
@keyframes pmDepth{from{opacity:0;transform:perspective(1000px) translate3d(0,34px,-130px) rotateX(11deg)}}
@keyframes pmTel{from{opacity:0;transform:perspective(1000px) translate3d(0,30px,-240px) rotateY(-24deg)}}
@keyframes pmCote{from{opacity:0;transform:translate3d(var(--pm-x,0px),16px,0)}}
@keyframes pmVis{from{opacity:0;transform:perspective(1400px) translate3d(0,26px,-300px) rotateY(-20deg) rotateX(6deg)}}
@keyframes pmTelHero{from{opacity:0;transform:perspective(1000px) translate3d(0,40px,-340px) rotateY(-34deg)}}
@keyframes pmPose{from{transform:scale(1.09)}}
@keyframes pmBadge{from{opacity:0;scale:.5}}
@keyframes pmFond{from{opacity:0;transform:scale(1.08)}}
@keyframes pmTrait{from{transform:scaleY(0)}}
@keyframes pmCaret{50%{opacity:0}}
@keyframes pmCaretFin{to{opacity:0}}

/* ---- page statique (outil de capture automatisé, ou ?mouvement=0) : tout est visible sans défiler ---- */
html.pp-statique :is(.reveal,.rv){opacity:1;transform:none;transition:none}
html.pp-statique .frise path{stroke-dashoffset:0;transition:none}

/* ---- tout visible, rien ne bouge : impression, filet du script, mouvements réduits activés en cours de visite ---- */
html.pm-tout :is(.pm-r,.pm-on,.pm-i,.pm-h0,.section-hero :is(.pill,.eyebrow,h1,.pilot,.lead,.btn-row,.btn-row>*,.hero-more,.voir-mouvement,.hint,.hero-3d,.phone-wrap),.entry>*,.trust>span){opacity:1!important;transform:none!important;animation:none!important}
html.pm-tout .pm-ty-b{visibility:visible}
@media print{
 html.pp-mo :is(.pm-r,.pm-on,.pm-i,.pm-h0,.section-hero :is(.pill,.eyebrow,h1,.pilot,.lead,.btn-row,.btn-row>*,.hero-more,.voir-mouvement,.hint,.hero-3d,.phone-wrap),.entry>*,.trust>span){opacity:1!important;transform:none!important;animation:none!important}
 .pm-ty-b{visibility:visible}
 .pm-ty-a::after{display:none}
}
@media (prefers-reduced-motion:reduce){
 html.pp-mo :is(.pm-r,.pm-on,.pm-i,.pm-h0,.section-hero :is(.pill,.eyebrow,h1,.pilot,.lead,.btn-row,.btn-row>*,.hero-more,.voir-mouvement,.hint,.hero-3d,.phone-wrap),.entry>*,.trust>span){opacity:1!important;animation:none!important}
 html.pp-mo :is(.pm-r,.pm-on,.pm-i){transform:none!important}
 .pm-ty-b{visibility:visible}
 .pm-ty-a::after{display:none}
}

/* ---- 1.6.0 (27/10/2026) : carte de recherche de « Mon espace » (entre en profondeur avec l'intro) et schéma du
   module Gestion (les quatre parties arrivent une à une, comme l'écran du téléphone des autres modules) ---- */
html.pp-mo:not(.pp-go) .mon-espace .espace-carte{opacity:0}
html.pp-mo:not(.pp-go):not(.pp-film-on):not(.pp-film-prep) .mon-espace .espace-carte{animation:pmFilet 0s 3.5s forwards}
html.pp-go .mon-espace .espace-carte{animation:pmDepth .95s var(--pm-e) .32s backwards}
html.pp-go .pm-vis.pm-on .gv-ligne{animation:pmUp .55s var(--pm-e) calc(var(--pm-d,0ms) + 560ms + var(--n,0) * 110ms) backwards}
html.pp-go .pm-vis.pm-on .gv-ok{animation:pmPop .45s var(--pm-e) calc(var(--pm-d,0ms) + 980ms + var(--n,0) * 110ms) backwards}
html.pp-go .pm-net :is(.gv-ligne,.gv-ok){animation:none!important}
html.pm-tout .mon-espace .espace-carte{opacity:1!important;animation:none!important}
@media print{html.pp-mo .mon-espace .espace-carte{opacity:1!important;animation:none!important}}
@media (prefers-reduced-motion:reduce){html.pp-mo .mon-espace .espace-carte{opacity:1!important;animation:none!important}}