/* 04/10/2026 — film d'intro de l'accueil Passerelle Pro (~29 s), sur le modèle du film d'educform31.fr, aux couleurs du site.
   Transform et opacity seulement ; aucun script ni police tiers ; chargé seulement sur l'accueil. */

/* rideau posé dans le <head> si le film va se jouer ; il s'efface seul au bout de 3 s */
html.pp-film-prep body::after{content:'';position:fixed;inset:0;z-index:100000;background:#F7F5F0;animation:pfRideau 0s 3s forwards}
@keyframes pfRideau{to{visibility:hidden}}
html.pp-film-on{overflow:hidden}

/* « Revoir l'intro » (pied de page) */
.pp-revoir-intro a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pp-revoir-intro a:hover{color:var(--green,#1F7A6B)}
.no-js .pp-revoir-intro{display:none}
@media (prefers-reduced-motion:reduce){.pp-revoir-intro{display:none}}

#pp-film{--navy:#0F2A44;--navy2:#163a5c;--mint:#2EC4A6;--green:#1F7A6B;--cream:#F7F5F0;--coral:#f0663f;--slate:#3d4f63;--slate2:#5b6b7c;--line:#e6e2d9;--bar:#e3e8ee;--mintbg:#e8f7f3;
 --e:cubic-bezier(.23,1,.32,1);--s:Sora,Inter,sans-serif;--i:Inter,system-ui,sans-serif;--pad:clamp(16px,6vw,88px);
 position:fixed;inset:0;z-index:100001;overflow:hidden;color:var(--navy);font:400 16px/1.45 var(--i);-webkit-font-smoothing:antialiased;
 background:radial-gradient(120% 85% at 50% 0,#fcfbf8 0,#F7F5F0 55%,#efebe2 100%);transition:opacity .9s var(--e)}
#pp-film *,#pp-film *::before,#pp-film *::after{box-sizing:border-box}
#pp-film.is-fin{opacity:0;pointer-events:none}
#pp-film svg{max-width:none}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- décor : trame de points, nuit, passerelle ---- */
.pf-fond{position:absolute;inset:-60px;background-image:radial-gradient(circle,#0f2a4417 1.1px,transparent 1.6px);background-size:28px 28px;animation:pfTrame 14s linear infinite}
@keyframes pfTrame{to{transform:translate(-28px,-28px)}}
/* volet de nuit */
.pf-nuit{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 110%,#1d4a72 0,#0F2A44 62%);transform:translateY(101%);transition:transform .85s cubic-bezier(.7,0,.2,1)}
#pp-film.is-nuit .pf-nuit{transform:none}
#pp-film.apres-nuit .pf-nuit{transform:translateY(-101%);transition:transform .7s cubic-bezier(.55,0,.2,1)}
.pf-s8.is-on,.pf-s9.is-on{transition-delay:.3s,.3s,0s}
.pf-arc{position:absolute;left:-12vw;right:-12vw;bottom:-11vh;height:38vh;opacity:0;transform-origin:50% 100%;pointer-events:none;transition:opacity 1s var(--e),transform 1.3s cubic-bezier(.7,0,.2,1)}
.pf-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf-arc .l{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1)}
.pf-arc .f{fill:url(#pfArcG);opacity:0;transition:opacity 1.2s .5s}
.pf-arc.is-on{opacity:1}.pf-arc.is-on .l{stroke-dashoffset:0}.pf-arc.is-on .f{opacity:1}
.pf-arc.is-on.is-bas{opacity:.35}
.pf-arc.is-zoom{opacity:0;transform:scale(2.2)}

/* ---- scènes ---- */
.pf-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .5s var(--e),transform .8s var(--e),visibility 0s .8s}
.pf-scene.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--e) .08s,transform .85s var(--e) .08s,visibility 0s}
.pf-scene.is-out{opacity:0;transform:translate(-3%,0) scale(.985)}
.pf-split{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px);padding:clamp(64px,11vh,110px) var(--pad) clamp(78px,13vh,120px)}
.pf-txt{min-width:0}
.pf-vis{position:relative;height:100%;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
.pf-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(16px,2.8vh,28px);padding:clamp(64px,11vh,110px) var(--pad) clamp(96px,17vh,160px)}

/* ---- typographie ---- */
.pf-eyb{margin:0 0 clamp(10px,1.6vh,16px);font:600 clamp(11px,.95vw,13px)/1.2 var(--i);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.pf-centre .pf-eyb{margin:0}
.pf-t{margin:0;font:800 clamp(28px,3.9vw,58px)/1.05 var(--s);letter-spacing:-.035em;color:var(--navy);text-wrap:balance}
.pf-t em{font-style:normal;color:var(--green)}
.pf-t--md{font-size:clamp(28px,3.6vw,52px)}
.pf-t--xl{font-size:clamp(40px,6.2vw,96px)}
.pf-small{margin:clamp(12px,2vh,20px) 0 0;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--slate);max-width:31em}
.pf-centre .pf-small{margin:0}
.pf-small .pf-in{display:inline-block}
.pf-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .14em;margin:0 -.05em -.14em}
.pf-w>i{display:inline-block;font-style:inherit;transform:translateY(112%)}
.is-joue .pf-w>i{animation:pfMot .85s var(--e) forwards;animation-delay:calc(var(--d,0ms) + var(--k,0) * 70ms)}
@keyframes pfMot{to{transform:none}}

/* ---- entrées génériques ---- */
.pf-in{opacity:0;transform:translateY(14px)}
.pf-pop{opacity:0;transform:scale(.93) translateY(14px)}
.is-joue :is(.pf-in,.pf-pop,.pf-notif,.pf-toast){animation:pfIn .75s var(--e) var(--d,0ms) forwards}
@keyframes pfIn{to{opacity:1;transform:none}}
.pf-fade{opacity:0}
.is-joue .pf-fade{animation:pfOp .4s ease-out var(--d,0ms) forwards}
@keyframes pfOp{to{opacity:1}}
@keyframes pfSort{to{opacity:0;transform:scale(.85)}}
@keyframes pfTrace{to{stroke-dashoffset:0}}
@keyframes pfBarre{to{transform:none}}
@keyframes pfRond{to{transform:none}}
@keyframes pfClic{50%{transform:scale(.92)}}
.pf-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 60px -26px #0f2a4452,0 2px 8px #0f2a440d}
.pf-grib{fill:none;stroke:#1f3f8f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-joue .pf-grib{animation:pfTrace .6s ease-out var(--d,0ms) forwards}

/* ---- logo (deux piles, une passerelle) ---- */
.pf-lg .p{fill:var(--navy)}
.pf-lg .a{fill:none;stroke:var(--mint);stroke-width:4;stroke-linecap:round}
.pf-logo{width:clamp(92px,11vw,160px);height:auto;overflow:visible}
.pf-logo .p{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.pf-logo .a{stroke-dasharray:1;stroke-dashoffset:1}
.is-joue .pf-logo .p{animation:pfRond .6s var(--e) forwards}
.is-joue .pf-logo .p2{animation-delay:.12s}
.is-joue .pf-logo .a{animation:pfTrace .8s cubic-bezier(.65,0,.35,1) .3s forwards}
.pf-marque{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vh,24px)}
.pf-nom{margin:0;font:800 clamp(44px,8.2vw,124px)/1 var(--s);letter-spacing:-.045em;color:var(--navy);white-space:nowrap}
.pf-nom .pf-pro i{color:var(--mint)}

/* ---- scène 1 : le papier ---- */
.pf-bureau{position:relative;width:min(100cqw,94cqh);aspect-ratio:1}
.pf-f{position:absolute;left:50%;top:50%;height:84%;aspect-ratio:210/297;translate:-50% -50%;background:#fff;border-radius:4px;box-shadow:0 22px 40px -20px #0f2a446b,0 1px 3px #0f2a4424;opacity:0}
.pf-f svg{display:block;width:100%;height:100%}
.pf-f1{rotate:-8deg;translate:-58% -50%}
.pf-f2{rotate:6deg;translate:-43% -49%}
.pf-f3{rotate:-1.5deg}
.pf-f1::before,.pf-f2::before{content:'';position:absolute;left:9%;right:13%;top:10%;height:44%;background:repeating-linear-gradient(to bottom,#e3e8ee 0 3.4%,transparent 3.4% 8.4%)}
.is-joue .pf-f{animation:pfChute .8s cubic-bezier(.2,.75,.25,1.04) var(--d,0ms) forwards}
@keyframes pfChute{from{opacity:0;transform:translateY(-55%) rotate(-9deg) scale(1.06)}30%{opacity:1}to{opacity:1;transform:none}}
.pf-f .t1{font:800 22px var(--s);fill:var(--navy);letter-spacing:.02em}
.pf-f .t2{font:500 13px var(--i);fill:var(--slate2)}
.pf-f .t3{font:600 15px var(--i);fill:var(--navy)}
.pf-f .t4{font:600 19px var(--i);fill:#b8392a}
.pf-f .li rect{fill:var(--bar)}
.pf-f .ca rect{fill:none;stroke:#c9d3de;stroke-width:1.5}
.pf-f .t5{font:600 12.5px var(--i);fill:var(--slate2)}
.pf-rat{fill:none;stroke:#b8392a;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-joue .pf-rat{animation:pfTrace .35s ease-out var(--d,0ms) forwards}
.pf-postit{position:absolute;right:1%;top:9%;width:37%;aspect-ratio:1;display:flex;align-items:center;padding:6%;background:#ffe27a;color:#4d3a00;font:600 clamp(12px,3.7cqmin,18px)/1.3 var(--i);box-shadow:0 16px 26px -14px #0f2a4473;rotate:6deg;opacity:0}
.is-joue .pf-postit{animation:pfColle .5s cubic-bezier(.2,.9,.3,1.2) var(--d,0ms) forwards}
@keyframes pfColle{from{opacity:0;transform:scale(1.35) translate(8%,-8%)}55%{opacity:1}to{opacity:1;transform:none}}
.pf-notif{position:absolute;left:0;bottom:5%;display:flex;align-items:center;gap:.75em;max-width:80%;padding:.75em 1.1em .75em .75em;border-radius:14px;font-size:clamp(12px,3.1cqmin,16px);line-height:1.3;opacity:0}
.pf-notif>i{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:#fff0ea;color:#c2412b;display:grid;place-items:center}
.pf-notif>i svg{width:1.25em;height:1.25em}
.pf-notif b{display:block;font-weight:700}
.pf-notif small{display:block;color:var(--slate);font-size:.92em}

/* ---- scène 2 : la recherche ---- */
.pf-search{position:relative;width:min(40rem,100%);min-height:3.7rem;display:flex;align-items:center;gap:.8rem;padding:.35rem .45rem .35rem 1.25rem;border-radius:999px;background:#fff;border:1.5px solid var(--line);box-shadow:0 22px 50px -24px #0f2a4459;font-size:clamp(15px,1.3vw,19px);text-align:left;color:var(--navy)}
.pf-search>svg{flex:none;width:1.25em;height:1.25em;color:var(--green)}
.pf-champ{flex:1;min-width:0}
.pf-type{white-space:nowrap}
.pf-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--coral);animation:pfCaret 1s steps(2) infinite}
@keyframes pfCaret{50%{opacity:0}}
.pf-go{flex:none;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
.pf-go svg{width:1.1rem;height:1.1rem}
.pf-sugg{position:absolute;left:0;right:0;top:calc(100% + .5rem);margin:0;padding:.4rem;list-style:none;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 50px -24px #0f2a444c;font-size:.9em;color:var(--slate);opacity:0;transform:translateY(-6px);transition:opacity .35s var(--e),transform .35s var(--e)}
.pf-sugg.is-on{opacity:1;transform:none}
.pf-sugg li{display:flex;align-items:center;gap:.7em;padding:.55rem .85rem;border-radius:12px;transition:background-color .25s,color .25s}
.pf-sugg li svg{flex:none;width:1em;height:1em;opacity:.55}
.pf-sugg li.is-hot{background:var(--mintbg);color:var(--navy)}

/* ---- scène 4 : le circuit de signature ---- */
.pf-circuit{position:relative;width:min(31rem,100cqw);font-size:clamp(12px,min(2.6cqh,3.9cqw),16px);padding:1.35em 1.45em 1.25em}
.pf-c-tete{display:flex;align-items:center;gap:.85em;margin-bottom:1em}
.pf-c-tete .ic{flex:none;width:2.6em;height:2.6em;border-radius:.75em;background:var(--navy);color:#fff;display:grid;place-items:center}
.pf-c-tete .ic svg{width:1.35em;height:1.35em}
.pf-c-tete b{display:block;font:700 1.15em/1.2 var(--s)}
.pf-c-tete small{display:block;color:var(--slate);font-size:.9em}
.pf-barre{height:.42em;margin:0 0 .7em;border-radius:1em;background:#edf0f3;overflow:hidden}
.pf-barre i{display:block;height:100%;border-radius:inherit;background:var(--mint);transform-origin:0 50%;transform:scaleX(0)}
.is-joue .pf-barre i{animation:pfBarre var(--t) linear var(--d,0ms) forwards}
.pf-sigs{position:relative;margin:0;padding:0;list-style:none}
.pf-sigs::before{content:'';position:absolute;left:1.1em;top:1.4em;bottom:1.4em;width:2px;margin-left:-1px;background:var(--bar)}
.pf-sig{position:relative;isolation:isolate;display:flex;align-items:center;gap:.9em;padding:.45em 0}
.pf-sig::after{content:'';position:absolute;inset:0 -.6em;z-index:-1;border-radius:.7em;background:var(--mintbg);opacity:0}
.is-joue .pf-sig::after{animation:pfLueur 1s ease-out var(--d,0ms) forwards}
@keyframes pfLueur{20%{opacity:1}to{opacity:0}}
.pf-sig .rond{position:relative;flex:none;width:2.2em;height:2.2em;border-radius:50%;background:#fff;border:2px solid #d7dee6;display:grid;place-items:center}
.pf-sig .rond::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:var(--mint);transform:scale(0)}
.pf-sig .rond svg{position:relative;width:1.2em;height:1.2em;fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pf-sig .rond path{stroke-dasharray:1;stroke-dashoffset:1}
.is-joue .pf-sig .rond::before{animation:pfRond .4s var(--e) var(--d,0ms) forwards}
.is-joue .pf-sig .rond path{animation:pfTrace .3s ease-out forwards;animation-delay:calc(var(--d) + 120ms)}
.pf-sig .nm{min-width:0;font-weight:600}
.pf-sig .st{margin-left:auto;display:grid;font-size:.82em;font-weight:600;white-space:nowrap}
.pf-sig .st>span,.pf-st>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.3em;padding:.24em .7em;border-radius:1em}
.pf-sig .st>span{justify-self:end}
.pf-sig .st .a,.pf-st .a{background:#f0f2f5;color:var(--slate2)}
.pf-sig .st .b,.pf-st .b{background:var(--mintbg);color:var(--green)}
.pf-sig .st .b,.pf-st.up .b{opacity:0;transform:scale(.85)}
.is-joue .pf-sig .st .a,.is-joue .pf-st.up .a{animation:pfSort .25s ease-in var(--d,0ms) forwards}
.is-joue .pf-sig .st .b,.is-joue .pf-st.up .b{animation:pfIn .45s var(--e) forwards;animation-delay:calc(var(--d) + 80ms)}
.pf-tampon{position:absolute;right:1.2em;bottom:1.5em;padding:.45em .85em;border:.17em solid var(--green);border-radius:.55em;background:#fffffff2;color:var(--green);font:800 1.05em/1 var(--s);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;rotate:-8deg;box-shadow:0 10px 24px -12px #0f2a4466;opacity:0}
.is-joue .pf-tampon{animation:pfTampon .5s cubic-bezier(.2,.9,.3,1.15) var(--d,0ms) forwards}
@keyframes pfTampon{from{opacity:0;transform:scale(1.9)}45%{opacity:1}to{opacity:1;transform:none}}

/* ---- scène 5 : le tableau de bord ---- */
.pf-dash{position:relative;width:min(46rem,100cqw);font-size:clamp(11px,min(2.5cqh,2.3cqw),15px)}
.pf-dash-barre{display:flex;align-items:center;gap:.45em;padding:.8em 1.1em;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;background:#fbfaf7}
.pf-dash-barre>i{flex:none;width:.72em;height:.72em;border-radius:50%;background:#e2ddd2}
.pf-dash-barre b{margin-left:.5em;font:700 1.05em/1.2 var(--s);white-space:nowrap}
.pf-chip{margin-left:auto;padding:.3em .8em;border-radius:1em;background:var(--mintbg);color:var(--green);font-size:.82em;font-weight:600;white-space:nowrap}
.pf-relance{position:relative;margin-left:.6em}
.pf-rb{display:inline-block;padding:.42em .9em;border:1.5px solid var(--navy);border-radius:.6em;background:#fff;color:var(--navy);font-size:.85em;font-weight:600}
.is-joue .pf-rb{animation:pfClic .3s ease-out var(--d,0ms)}
.pf-curseur{position:absolute;left:52%;top:52%;width:1.5em;height:1.5em;opacity:0;transform:translate(4em,6em);pointer-events:none}
.pf-curseur svg{width:100%;height:100%;display:block}
.is-joue .pf-curseur{animation:pfCurseur .6s var(--e) var(--d,0ms) forwards}
@keyframes pfCurseur{from{opacity:0;transform:translate(4em,6em)}30%{opacity:1}to{opacity:1;transform:none}}
.pf-table{padding:.2em 1.1em 1.5em}
.pf-ligne{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:.6em;align-items:center;padding:.62em 0;border-bottom:1px solid #f0ede6}
.pf-ligne:last-child{border-bottom:0}
.pf-ligne.hd{padding:.85em 0 .5em;color:var(--slate2);font-size:.74em;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pf-ligne.hd span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-app{display:flex;align-items:center;gap:.6em;min-width:0}
.pf-app i{flex:none;width:2em;height:2em;border-radius:50%;background:#e8eef4;color:var(--slate2);display:grid;place-items:center}
.pf-app i svg{width:1.15em;height:1.15em}
.pf-app u{display:block;width:var(--w,70%);height:.55em;border-radius:1em;background:var(--bar)}
.pf-st{display:grid;font-size:.84em;font-weight:600;white-space:nowrap}
.pf-st>span{justify-self:start}
.pf-st svg{width:1em;height:1em}
.pf-toast{position:absolute;left:50%;bottom:0;translate:-50% 50%;display:flex;align-items:center;gap:.5em;padding:.65em 1.1em;border-radius:.8em;background:var(--navy);color:#fff;font-weight:600;font-size:.95em;white-space:nowrap;box-shadow:0 14px 30px -12px #0f2a448c;opacity:0;transform:translateY(1em)}
.pf-toast svg{width:1.1em;height:1.1em;color:var(--mint)}

/* ---- scène 6 : le téléphone du tuteur ---- */
.pf-tel{position:relative;height:min(97cqh,calc(100cqw * 1.95));aspect-ratio:9/17.6;container-type:inline-size;opacity:0;transform:translateY(10%) rotate(-5deg)}
.is-joue .pf-tel{animation:pfIn .95s var(--e) .15s forwards}
.pf-cadre{position:absolute;inset:0;padding:3.6cqw;border-radius:15%/7.4%;background:var(--navy);box-shadow:0 40px 70px -30px #0f2a448c,inset 0 0 0 2px #ffffff14}
.pf-encoche{position:absolute;left:50%;top:5.5cqw;width:28cqw;height:5cqw;translate:-50% 0;border-radius:3cqw;background:var(--navy);z-index:2}
.pf-ecran{height:100%;display:flex;flex-direction:column;gap:3.6cqw;padding:13cqw 6.5cqw 6cqw;border-radius:12%/5.8%;background:#fff;overflow:hidden;color:var(--navy);font-size:4.6cqw;line-height:1.3}
.pf-e-haut{display:flex;justify-content:space-between;align-items:center;color:var(--slate2);font-size:.9em}
.pf-mini{font:700 1.15em/1 var(--s);letter-spacing:-.02em;color:var(--navy)}
.pf-mini b{font-weight:700;color:var(--mint)}
.pf-e-st small{display:block;color:var(--slate2);font-size:.85em}
.pf-e-st u{display:block;width:62%;height:.75em;margin:.35em 0 .55em;border-radius:1em;background:var(--bar)}
.pf-e-st .ch{display:inline-block;padding:.2em .7em;border-radius:1em;background:var(--mintbg);color:var(--green);font-weight:600;font-size:.85em}
.pf-comp{padding:3cqw 3.4cqw;border:1px solid #edf0f3;border-radius:3.5cqw}
.pf-comp b{display:block;margin-bottom:.55em;font-size:.95em;font-weight:600}
.pf-niv{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2cqw}
.pf-niv i{position:relative;height:6.5cqw;border-radius:1.8cqw;background:#edf0f3}
.pf-niv i.on::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--mint);transform:scale(0)}
.pf-niv i.on::after{content:'';position:absolute;left:50%;top:50%;width:11cqw;height:11cqw;margin:-5.5cqw;border:2px solid var(--navy);border-radius:50%;opacity:0}
.is-joue .pf-niv i.on::before{animation:pfRond .3s var(--e) var(--d,0ms) forwards}
.is-joue .pf-niv i.on::after{animation:pfTap .55s ease-out forwards;animation-delay:calc(var(--d) - 80ms)}
@keyframes pfTap{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.45)}}
.pf-e-com{padding:2.6cqw 3.4cqw;border:1px solid #edf0f3;border-radius:3.5cqw;color:#8a97a5;font-size:.88em;min-height:13cqw}
.pf-e-sig{position:relative;min-height:25cqw;padding:2.6cqw 3.4cqw;border:1.5px dashed #c9d3de;border-radius:3.5cqw}
.pf-e-sig small{color:var(--slate2);font-size:.82em}
.pf-e-sig svg{display:block;width:62%;height:auto;margin-top:.15em}
.pf-cachet{position:absolute;color:#c2412b;opacity:0;rotate:-14deg}
.pf-cachet svg{display:block;width:100%;height:100%}
.pf-cachet text{font:700 11.5px var(--i);letter-spacing:1.6px}
.is-joue .pf-cachet{animation:pfCachet .45s cubic-bezier(.25,1.3,.5,1) var(--d,0ms) forwards}
@keyframes pfCachet{from{opacity:0;transform:scale(2.3) rotate(-22deg)}50%{opacity:.9}to{opacity:.88;transform:none}}
.pf-cachet--tel{right:2.5cqw;top:50%;width:21cqw;height:21cqw;margin-top:-10.5cqw}
.pf-e-btn{position:relative;display:grid;place-items:center;height:12cqw;margin-top:auto;border-radius:3.4cqw;background:var(--coral);color:#fff;font-weight:700;overflow:hidden}
.pf-e-btn::before{content:'';position:absolute;inset:0;background:var(--green);opacity:0}
.pf-e-btn>span{position:relative;grid-area:1/1;display:inline-flex;align-items:center;gap:.4em}
.pf-e-btn .b{opacity:0}
.pf-e-btn svg{width:1.1em;height:1.1em}
.is-joue .pf-e-btn{animation:pfClic .3s ease-out var(--d,0ms)}
.is-joue .pf-e-btn::before,.is-joue .pf-e-btn .b{animation:pfOp .3s ease-out forwards;animation-delay:calc(var(--d) + 150ms)}
.is-joue .pf-e-btn .a{animation:pfSort .2s forwards;animation-delay:calc(var(--d) + 150ms)}

/* ---- scène 7 : l'attestation et son cachet ---- */
.pf-doc-w{position:relative;height:min(90cqh,calc(100cqw * 1.36));aspect-ratio:210/297;container-type:inline-size}
.pf-doc{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.8cqw;padding:9cqw 8.5cqw 8cqw;border-radius:6px;background:#fff;box-shadow:0 30px 60px -28px #0f2a4473,0 1px 3px #0f2a441f;color:var(--navy);font-size:3.9cqw;opacity:0;transform:translateY(8%) rotate(3deg)}
.is-joue .pf-doc{animation:pfIn .9s var(--e) .2s forwards}
.pf-d-haut{display:flex;justify-content:space-between;align-items:center}
.pf-d-logo{width:11cqw;height:auto}
.pf-pdf{padding:.1em .45em;border:1.5px solid currentColor;border-radius:.4em;color:#c2412b;font-size:.8em;font-weight:700}
.pf-d-t{margin-top:2.4cqw;font:800 6.3cqw/1.1 var(--s);letter-spacing:-.01em}
.pf-d-s{margin-top:-1.4cqw;color:var(--slate2);font-size:.9em}
.pf-d-l,.pf-d-kv u{display:block;width:var(--w);height:2.1cqw;border-radius:1em;background:var(--bar);transform-origin:0 50%;transform:scaleX(0)}
.is-joue .pf-d-l,.is-joue .pf-d-kv u{animation:pfBarre .45s var(--e) var(--d,0ms) forwards}
.pf-d-kv{display:grid;grid-template-columns:auto 1fr;gap:2.6cqw 4cqw;align-items:center;margin-top:1.6cqw;color:var(--slate2);font-size:.92em;font-weight:600}
.pf-d-kv u{background:#cfd8e2}
.pf-d-kv u.m{background:var(--mint)}
.pf-d-bas{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;margin-top:auto}
.pf-d-bas>div{position:relative;min-height:35cqw;padding-top:2cqw;border-top:1.5px solid var(--bar)}
.pf-d-bas small{color:var(--slate2);font-size:.82em}
.pf-d-bas svg.sig{display:block;width:92%;height:auto}
.pf-cachet--doc{left:50%;bottom:1cqw;width:25cqw;height:25cqw;margin-left:-12.5cqw}
.pf-onde{position:absolute;left:75%;bottom:17cqw;width:30cqw;height:30cqw;margin:0 0 -15cqw -15cqw;border:2px solid #c2412b;border-radius:50%;opacity:0;pointer-events:none}
.is-joue .pf-onde{animation:pfOnde .7s ease-out forwards;animation-delay:calc(var(--d) + 120ms)}
@keyframes pfOnde{0%{opacity:.6;transform:scale(.5)}100%{opacity:0;transform:scale(1.8)}}
.pf-scelle{position:absolute;left:50%;bottom:0;translate:-50% 50%;display:inline-flex;align-items:center;gap:.5em;padding:.62em 1.15em;border-radius:999px;background:var(--navy);color:#fff;font:600 clamp(13px,3.6cqw,15px)/1 var(--i);white-space:nowrap;box-shadow:0 14px 30px -12px #0f2a448c}
.pf-scelle svg{width:1.1em;height:1.1em;color:var(--mint)}

/* ---- scène 8 : la sécurité (de nuit) ---- */
.pf-s8 .pf-eyb{color:var(--mint)}
.pf-s8 .pf-t{color:#fff}
.pf-s8 .pf-t em{color:var(--mint)}
.pf-s8 .pf-small{color:#c9d3de}
.pf-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);width:min(62rem,100%);margin:clamp(4px,1.2vh,14px) 0;text-align:left}
.pf-badge{display:flex;flex-direction:column;gap:.9em;padding:clamp(16px,1.8vw,26px);border:1px solid #ffffff21;border-radius:18px;background:#163a5c;color:#fff;box-shadow:0 26px 50px -30px #00000099}
.pf-badge .ic{flex:none;width:3em;height:3em;border-radius:.9em;background:var(--mint);color:var(--navy);display:grid;place-items:center}
.pf-badge .ic svg{width:1.5em;height:1.5em}
.pf-badge b{display:block;font:700 clamp(17px,1.45vw,22px)/1.2 var(--s)}
.pf-badge small{display:block;margin-top:.35em;color:#c9d3de;font-size:clamp(13px,1vw,15px);line-height:1.45}

/* ---- scène 9 : l'appel ---- */
.pf-cta{position:relative;display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.6em;border-radius:16px;background:var(--coral);color:#fff;font:700 clamp(19.5px,1.45vw,22px)/1.2 var(--i);text-decoration:none;box-shadow:0 18px 40px -16px #f0663fbf;transition:background-color .2s}
#pp-film .pf-cta,#pp-film .pf-cta:hover{color:#fff}
#pp-film .pf-cta:hover{background:#d9502b}
.pf-cta svg{width:1.05em;height:1.05em}
.pf-cta::after{content:'';position:absolute;inset:-2px;border:2px solid var(--coral);border-radius:18px;opacity:0;pointer-events:none}
.is-joue .pf-cta::after{animation:pfAnneau 1.1s ease-out 1.6s forwards}
@keyframes pfAnneau{0%{opacity:.8;transform:none}100%{opacity:0;transform:scale(1.2,1.55)}}

/* ---- scène 10 : la signature ---- */
.pf-tag{margin:0;font-size:clamp(16px,1.5vw,21px);color:var(--slate)}
.pf-solution{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:#040c16;color:#c6dce9;font:600 13px/1.2 Manrope,Inter,Arial,sans-serif}
.pf-solution svg{width:22px;height:22px}
.pf-solution b{font-weight:800;color:#eff8ff;letter-spacing:-.02em}
.pf-solution b span{color:#ffac76}

/* ---- commandes ---- */
.pf-prog{position:absolute;left:0;top:0;z-index:6;width:100%;height:3px;background:var(--mint);transform-origin:0 50%;transform:scaleX(0)}
.is-parti .pf-prog{animation:pfBarre 1s linear forwards}
.pf-brandbar{position:absolute;left:var(--pad);top:clamp(16px,3.2vh,30px);z-index:5;display:flex;align-items:center;gap:10px;font:700 clamp(17px,1.4vw,20px)/1 var(--s);letter-spacing:-.02em;color:var(--navy);transition:opacity .4s,color .5s}
.pf-brandbar svg{width:clamp(28px,2.3vw,34px);height:auto}
.pf-brandbar b{font-weight:700;color:var(--mint)}
.pf-brandbar .p{transition:fill .5s}
#pp-film[data-scene="3"] .pf-brandbar,#pp-film[data-scene="10"] .pf-brandbar{opacity:0}
#pp-film.is-nuit .pf-brandbar{color:#fff;transition-delay:0s,.45s}
#pp-film.is-nuit .pf-brandbar .p{fill:#fff}
.pf-ctrl{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(14px,3.2vh,30px);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}
.pf-btn{position:relative;pointer-events:auto;display:inline-flex;align-items:center;gap:.55em;min-height:44px;padding:.55em 1.15em;border:1.5px solid var(--line);border-radius:999px;background:#fffffff0;color:var(--navy);font:600 14px/1.1 var(--i);cursor:pointer;transition:transform .16s var(--e),border-color .2s,background-color .3s,color .3s}
.pf-btn:hover{border-color:var(--navy)}
.pf-btn:active{transform:scale(.97)}
.pf-btn:focus-visible,.pf-cta:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.pf-btn svg{width:1.15em;height:1.15em}
.pf-btn[hidden]{display:none}
.pf-btn:disabled{cursor:default}
.pf-skip{margin-left:auto}
.pf-son .on,.pf-son.is-on .off{display:none}
.pf-son.is-on .on{display:block}
.pf-son::after{content:'';position:absolute;inset:-2px;border:2px solid var(--mint);border-radius:999px;opacity:0;pointer-events:none}
.is-parti .pf-son:not(.is-on)::after{animation:pfAppel 1.6s ease-out 2.4s 3}
@keyframes pfAppel{0%{opacity:.9;transform:none}100%{opacity:0;transform:scale(1.12,1.35)}}
#pp-film.is-nuit .pf-btn{border-color:#ffffff40;background:#163a5cf0;color:#fff}
#pp-film.is-nuit .pf-btn:hover{border-color:#fff}
#pp-film.is-nuit .pf-btn:focus-visible{outline-color:var(--mint)}

/* ---- formats portrait (tablette, téléphone) ---- */
@media (max-aspect-ratio:1/1){
 .pf-split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:clamp(16px,3vh,36px);padding-top:clamp(72px,10vh,120px)}
 .pf-t{font-size:clamp(28px,6.6vw,58px)}
 .pf-t--md{font-size:clamp(27px,6.2vw,54px)}
 .pf-t--xl{font-size:clamp(40px,10vw,84px)}
 .pf-small{font-size:clamp(15px,2.3vw,19px)}
 .pf-eyb{font-size:clamp(11px,1.7vw,13px)}
 .pf-badges{grid-template-columns:minmax(0,1fr);max-width:34rem}
 .pf-badge{flex-direction:row;align-items:center;gap:14px}
 .pf-tag{font-size:clamp(16px,2.6vw,21px)}
}
@media (max-width:600px){
 .pf-search{align-items:flex-start;min-height:0;padding:.75rem .45rem .75rem 1rem;border-radius:24px}
 .pf-search>svg{margin-top:.15em}
 .pf-type{white-space:normal}
 .pf-go{width:2.4rem;height:2.4rem}
 .pf-chip{display:none}
 .pf-relance{margin-left:auto}
 .pf-ligne{grid-template-columns:2.2em repeat(3,minmax(0,1fr))}
 .pf-app u{display:none}
 .pf-ligne.hd span:first-child{visibility:hidden}
 .pf-btn{padding:.5em .95em;font-size:13.5px}
 .pf-t{font-size:clamp(28px,8.2vw,40px)}
 .pf-dash{font-size:12.5px}
 .pf-circuit{font-size:clamp(12px,min(2.6cqh,4.3cqw),16px)}
 .pf-brandbar{gap:8px}
 .pf-cta{padding:.8em 1.3em}
}
/* écrans très bas (téléphone couché) */
@media (max-height:520px) and (min-aspect-ratio:1/1){
 .pf-split{padding-top:56px;padding-bottom:64px}
 .pf-centre{padding-top:52px;padding-bottom:68px;gap:10px}
 .pf-t{font-size:clamp(22px,3.4vw,36px)}
 .pf-t--xl{font-size:clamp(30px,5vw,48px)}
 .pf-nom{font-size:clamp(34px,6.4vw,64px)}
 .pf-small{font-size:14px;margin-top:8px}
 .pf-badge small{display:none}
}

/* ---- 1.6.1 : scène 5 Gestion (facture payée, courbe du chiffre d'affaires) et scène 7 Formation en ligne et Qualité
   (cours qui avancent, jauge de satisfaction). Chiffres fictifs. ---- */
.pf-fact,.pf-cq{position:relative;width:min(31rem,100cqw);font-size:clamp(12px,min(2.6cqh,3.9cqw),16px);padding:1.35em 1.45em 1.25em;display:flex;flex-direction:column;gap:.7em}
.pf-fl{display:flex;justify-content:space-between;gap:1em;padding:.45em 0;border-bottom:1px dashed var(--line)}
.pf-fl b,.pf-ftot b{font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-ftot{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.pf-ftot b{font:800 1.5em/1 var(--s);letter-spacing:-.02em}
.pf-fbas{display:flex;justify-content:space-between;align-items:center;gap:1em;min-height:2.4em}
.pf-lien{display:inline-flex;align-items:center;gap:.45em;padding:.5em .85em;border-radius:.7em;background:var(--navy);color:#fff;font-weight:600;font-size:.88em}
.pf-lien svg{width:1.1em;height:1.1em}
.pf-paye{padding:.35em .9em;border:.17em solid var(--green);border-radius:.55em;color:var(--green);font:800 1.15em/1 var(--s);letter-spacing:.06em;text-transform:uppercase;rotate:-8deg;opacity:0}
.is-joue .pf-paye{animation:pfTampon .5s cubic-bezier(.2,.9,.3,1.15) var(--d,0ms) forwards}
.pf-fca{background:var(--cream);border-radius:.8em;padding:.6em .8em .4em}
.pf-fca small{font-size:.8em;color:var(--slate2)}
.pf-fca svg{display:block;width:100%;height:auto;margin-top:.2em}
.pf-fca-a{fill:var(--mint);opacity:0}
.pf-fca-l{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-joue .pf-fca-l{animation:pfTrace 1.4s var(--e) 1.9s forwards}
.is-joue .pf-fca-a{animation:pfAire .8s ease-out 2.6s forwards}
.pf-cl{display:grid;grid-template-columns:4.6em 1fr 4em;gap:.7em;align-items:center}
.pf-cbar{height:.6em;border-radius:.3em;background:var(--bar);overflow:hidden}
.pf-cbar i{display:block;height:100%;width:var(--w);border-radius:.3em;background:var(--mint);transform:scaleX(0);transform-origin:0 50%}
.is-joue .pf-cbar i{animation:pfBarre 1s var(--e) var(--d,0ms) forwards}
.pf-cl b{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-qual{display:grid;grid-template-columns:8.5em 1fr;gap:1em;align-items:center;margin-top:.3em;padding-top:.8em;border-top:1px solid var(--line)}
.pf-qual svg{width:100%;display:block}
.pf-qual .f,.pf-qual .v{fill:none;stroke-width:11;stroke-linecap:round}
.pf-qual .f{stroke:var(--bar)}
.pf-qual .v{stroke:var(--mint);stroke-dasharray:100;stroke-dashoffset:100}
.is-joue .pf-qual .v{animation:pfJauge 1.4s var(--e) 1.5s forwards}
.pf-qual b{display:block;font:800 1.7em/1.1 var(--s);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pf-qual small{color:var(--slate2);font-size:.85em}
@keyframes pfTrace{to{stroke-dashoffset:0}}
@keyframes pfAire{to{opacity:.16}}
@keyframes pfBarre{to{transform:none}}
@keyframes pfJauge{to{stroke-dashoffset:8}}