/* EducForm31 — moteur commun des films d'intro des applications (04/10/2026), sur le modèle des films
   d'educform31.fr et de passerelle-pro.fr. Couleurs et polices viennent de la configuration de chaque outil
   (variables posées sur #ef-intro). Transform et opacity pour l'essentiel ; aucune ressource tierce. */

/* rideau anti-flash : posé par ef-intro.js (chargé sans defer) si le film va se jouer ; il s'efface seul au bout de 3 s */
html.ef-intro-prep body::after{content:'';position:fixed;inset:0;z-index:2147483001;background:var(--ef-rideau,#fff);animation:efiRideau 0s 3s forwards}
@keyframes efiRideau{to{visibility:hidden}}
html.ef-intro-on{overflow:hidden}

/* « Revoir l'intro » (près du bandeau de protection) */
.ef-revoir-intro a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ef-revoir-intro--seul{margin:0;padding:8px 16px 14px;text-align:center;font:500 12px/1.4 system-ui,sans-serif;color:#5a6b7a}
@media (prefers-reduced-motion:reduce){.ef-revoir-intro{display:none}}
@media print{.ef-revoir-intro,#ef-intro{display:none!important}html.ef-intro-prep body::after{display:none}}

#ef-intro{--fond:#fff;--fond2:#f3f4f6;--texte:#1f2937;--doux:#4b5563;--doux2:#6b7280;--accent:#2563eb;--accent2:#0891b2;--accent3:#db2777;
 --clair:#eef2ff;--ligne:#e5e7eb;--barre:#e9ecf1;--trame:#0000001a;--nuit:#1f2937;--nuit2:#0b1220;--accent-nuit:var(--accent);--cta:var(--accent);--cta-texte:#fff;
 --prog:var(--accent);--ft:Georgia,'Times New Roman',serif;--fx:system-ui,-apple-system,'Segoe UI',sans-serif;
 --e:cubic-bezier(.23,1,.32,1);--pad:clamp(16px,6vw,88px);
 position:fixed;inset:0;z-index:2147483000;overflow:hidden;color:var(--texte);font:400 16px/1.45 var(--fx);text-align:left;letter-spacing:normal;
 -webkit-font-smoothing:antialiased;background:radial-gradient(120% 85% at 50% 0,var(--fond) 0,var(--fond) 55%,var(--fond2) 100%);transition:opacity .9s var(--e)}
#ef-intro *,#ef-intro *::before,#ef-intro *::after{box-sizing:border-box}
#ef-intro.is-fin{opacity:0;pointer-events:none}
#ef-intro svg{max-width:none;flex:none}
#ef-intro img{max-width:none}
#ef-intro :where(h2,p,ol,ul,li){margin:0;padding:0;list-style:none}
.efi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- décor : trame de points, halos, nuit, arc ---- */
.efi-fond{position:absolute;inset:-60px;background-image:radial-gradient(circle,var(--trame) 1.1px,transparent 1.6px);background-size:28px 28px;animation:efiTrame 14s linear infinite}
@keyframes efiTrame{to{transform:translate(-28px,-28px)}}
.efi-halo i{position:absolute;width:30vmax;height:30vmax;border-radius:50%;background:var(--accent);filter:blur(70px);opacity:.13;animation:efiHalo 16s ease-in-out infinite alternate}
.efi-halo i+i{background:var(--accent2);opacity:.11;animation-duration:19s;animation-direction:alternate-reverse}
.efi-halo i:first-child{left:-12vmax;top:-14vmax}
.efi-halo i+i{right:-12vmax;bottom:-16vmax}
@keyframes efiHalo{to{transform:translate(9vmax,6vmax) scale(1.12)}}
.efi-nuit{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 110%,var(--nuit) 0,var(--nuit2) 62%);transform:translateY(101%);transition:transform .85s cubic-bezier(.7,0,.2,1)}
#ef-intro.is-nuit .efi-nuit{transform:none}
#ef-intro.apres-nuit .efi-nuit{transform:translateY(-101%);transition:transform .7s cubic-bezier(.55,0,.2,1)}
.efi-scene--nuit.is-on{transition-delay:.3s,.3s,0s}
.efi-arc{position:absolute;left:-12vw;right:-12vw;bottom:-11vh;height:38vh;opacity:0;color:var(--accent);transform-origin:50% 100%;pointer-events:none;transition:opacity 1s var(--e),transform 1.3s cubic-bezier(.7,0,.2,1)}
.efi-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.efi-arc .l{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1)}
.efi-arc .f{fill:url(#efiArcG);opacity:0;transition:opacity 1.2s .5s}
.efi-arc.is-on{opacity:1}.efi-arc.is-on .l{stroke-dashoffset:0}.efi-arc.is-on .f{opacity:1}
.efi-arc.is-on.is-bas{opacity:.35}
.efi-arc.is-zoom{opacity:0;transform:scale(2.2)}

/* ---- scènes et mises en page ---- */
.efi-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}
.efi-scene.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--e) .08s,transform .85s var(--e) .08s,visibility 0s}
.efi-scene.is-out{opacity:0;transform:translate(-3%,0) scale(.985)}
.efi-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)}
.efi-split--ecran{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.efi-split--tel{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.efi-txt{min-width:0}
.efi-vis{position:relative;height:100%;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
.efi-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 ---- */
.efi-eyb{margin:0 0 clamp(10px,1.6vh,16px);font:700 clamp(11px,.95vw,13px)/1.2 var(--fx);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.efi-centre .efi-eyb{margin:0}
.efi-t{margin:0;font:800 clamp(28px,3.9vw,58px)/1.06 var(--ft);letter-spacing:-.025em;color:var(--texte);text-wrap:balance}
.efi-t em{font-style:normal;color:var(--accent)}
.efi-t--md{font-size:clamp(28px,3.5vw,52px)}
.efi-t--xl{font-size:clamp(40px,6.2vw,96px)}
.efi-small{margin:clamp(12px,2vh,20px) 0 0;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--doux);max-width:31em}
.efi-centre .efi-small{margin:0}
.efi-small .efi-in{display:inline-block}
.efi-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .05em .16em;margin:-.08em -.05em -.16em}
.efi-w>i{display:inline-block;font-style:inherit;transform:translateY(118%)}
.is-joue .efi-w>i{animation:efiMot .85s var(--e) forwards;animation-delay:calc(var(--d,0ms) + var(--k,0) * 70ms)}
@keyframes efiMot{to{transform:none}}

/* ---- entrées génériques ---- */
.efi-in{opacity:0;transform:translateY(14px)}
.efi-pop{opacity:0;transform:scale(.93) translateY(14px)}
.is-joue :is(.efi-in,.efi-pop,.efi-notif){animation:efiIn .75s var(--e) var(--d,0ms) forwards}
@keyframes efiIn{to{opacity:1;transform:none}}
.efi-fade{opacity:0}
.is-joue .efi-fade{animation:efiOp .4s ease-out var(--d,0ms) forwards}
@keyframes efiOp{to{opacity:1}}
@keyframes efiSort{to{opacity:0;transform:scale(.85)}}
@keyframes efiTrace{to{stroke-dashoffset:0}}
@keyframes efiBarre{to{transform:none}}
@keyframes efiRond{to{transform:none}}
.efi-card{background:#fff;border:1px solid var(--ligne);border-radius:18px;box-shadow:0 26px 60px -26px #0f172a52,0 2px 8px #0f172a0d}
.efi-trace svg *{stroke-dasharray:1;stroke-dashoffset:1}
.is-joue .efi-trace svg *{animation:efiTrace .7s ease-out forwards;animation-delay:calc(var(--d,0ms) + 220ms)}

/* ---- logo et nom de l'outil ---- */
.efi-lg{display:inline-grid;place-items:center;flex:none;line-height:0}
.efi-lg>svg,.efi-lg>img{display:block;width:100%;height:auto}
.efi-logo{width:clamp(84px,9vw,132px)}
.is-joue .efi-logo{animation:efiLogo .8s cubic-bezier(.2,.9,.3,1.25) .05s backwards}
@keyframes efiLogo{from{opacity:0;transform:scale(.4) rotate(-14deg)}}
.efi-marque{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vh,24px)}
.efi-marque::before{content:'';position:absolute;left:50%;top:clamp(42px,4.5vw,66px);width:clamp(84px,9vw,132px);aspect-ratio:1;margin-left:calc(clamp(84px,9vw,132px) / -2);margin-top:calc(clamp(84px,9vw,132px) / -2);border:3px solid var(--accent);border-radius:30%;opacity:0;pointer-events:none}
.is-joue .efi-marque::before{animation:efiAnneau1 1s ease-out .45s}
@keyframes efiAnneau1{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.efi-nom{margin:0;font:900 clamp(48px,8.4vw,128px)/1 var(--ft);letter-spacing:-.035em;color:var(--texte);white-space:nowrap}
.efi-nom em{font-style:normal;color:var(--accent)}

/* ---- scène « probleme » : le bureau ---- */
.efi-bureau{position:relative;width:min(100cqw,94cqh);aspect-ratio:1}
.efi-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 #0f172a6b,0 1px 3px #0f172a24;opacity:0;container-type:inline-size}
.efi-f1{rotate:-8deg;translate:-58% -50%}
.efi-f2{rotate:6deg;translate:-43% -49%}
.efi-f3{rotate:-1.5deg}
.efi-f1::before,.efi-f2::before{content:'';position:absolute;left:9%;right:13%;top:10%;height:44%;background:repeating-linear-gradient(to bottom,var(--barre) 0 3.4%,transparent 3.4% 8.4%)}
.is-joue .efi-f{animation:efiChute .8s cubic-bezier(.2,.75,.25,1.04) var(--d,0ms) forwards}
@keyframes efiChute{from{opacity:0;transform:translateY(-55%) rotate(-9deg) scale(1.06)}30%{opacity:1}to{opacity:1;transform:none}}
.efi-page{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.4cqw;padding:8.5cqw 8.5cqw 7cqw;color:var(--texte);font-size:4.1cqw;line-height:1.25}
.efi-p-t{font:800 5.8cqw/1.1 var(--ft);letter-spacing:.01em}
.efi-p-s{margin-top:-1.2cqw;margin-bottom:1.4cqw;color:var(--doux2);font-size:3.3cqw;font-weight:600}
.efi-p-l{display:block;width:var(--w);height:2cqw;border-radius:1em;background:var(--barre)}
.efi-p-r{position:relative;display:block;margin-top:1.2cqw;padding:1.6cqw 0 1.6cqw 3.2cqw;border-left:1cqw solid var(--accent2);font-weight:700}
.efi-p-r+.efi-p-r{border-left-color:var(--accent)}
.efi-p-o{position:absolute;left:-3%;top:-18%;width:106%;height:136%;overflow:visible}
.efi-p-o path{fill:none;stroke:#c2410c;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.is-joue .efi-p-o path{animation:efiTrace .5s ease-out var(--d,0ms) forwards}
.efi-p-c{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;margin:1cqw 0 2cqw}
.efi-p-c>span{display:flex;flex-direction:column;gap:1.6cqw;padding:2.2cqw;border:1.5px solid var(--ligne);border-radius:1.6cqw;min-height:20cqw}
.efi-p-c small{font-size:2.9cqw;font-weight:700;color:var(--doux2)}
.efi-p-c i{display:block;height:1.4cqw;border-radius:1em;background:var(--barre)}
.efi-p-c i:last-child{width:62%}
.efi-p-a{align-self:flex-end;margin:.4cqw 2cqw 1cqw 0;font:italic 700 5.2cqw/1.15 var(--ft);color:#c2410c;rotate:-5deg}
.efi-postit{position:absolute;right:0;bottom:12%;width:38%;aspect-ratio:1;display:flex;align-items:center;padding:6%;background:#ffe27a;color:#4d3a00;font:600 clamp(12px,3.6cqmin,18px)/1.3 var(--fx);box-shadow:0 16px 26px -14px #0f172a73;rotate:6deg;opacity:0}
.is-joue .efi-postit{animation:efiColle .5s cubic-bezier(.2,.9,.3,1.2) var(--d,0ms) forwards}
@keyframes efiColle{from{opacity:0;transform:scale(1.35) translate(8%,-8%)}55%{opacity:1}to{opacity:1;transform:none}}
.efi-notif{position:absolute;left:0;bottom:5%;display:flex;align-items:center;gap:.75em;max-width:82%;padding:.75em 1.1em .75em .75em;border-radius:14px;font-size:clamp(12px,3.1cqmin,16px);line-height:1.3;opacity:0;transform:translateY(14px)}
.efi-notif>i{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:var(--clair);color:var(--accent);display:grid;place-items:center}
.efi-notif>i svg{width:1.25em;height:1.25em}
.efi-notif b{display:block;font-weight:700}
.efi-notif small{display:block;color:var(--doux);font-size:.92em}

/* ---- scène « recherche » ---- */
.efi-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(--ligne);box-shadow:0 22px 50px -24px #0f172a59;font-size:clamp(15px,1.3vw,19px);text-align:left;color:var(--texte)}
.efi-search>svg{width:1.25em;height:1.25em;color:var(--accent)}
.efi-champ{flex:1;min-width:0}
.efi-type{white-space:nowrap}
.efi-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--accent);animation:efiCaret 1s steps(2) infinite}
@keyframes efiCaret{50%{opacity:0}}
.efi-go{flex:none;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--texte);color:#fff;display:grid;place-items:center}
.efi-go svg{width:1.1rem;height:1.1rem}
.efi-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(--ligne);box-shadow:0 22px 50px -24px #0f172a4c;font-size:.9em;color:var(--doux);opacity:0;transform:translateY(-6px);transition:opacity .35s var(--e),transform .35s var(--e)}
.efi-sugg.is-on{opacity:1;transform:none}
.efi-sugg li{display:flex;align-items:center;gap:.7em;padding:.55rem .85rem;border-radius:12px;transition:background-color .25s,color .25s}
.efi-sugg li svg{width:1em;height:1em;opacity:.55}
.efi-sugg li.is-hot{background:var(--clair);color:var(--texte)}

/* ---- scène « ecran » : ordinateur ou téléphone ---- */
.efi-vue{position:relative;overflow:hidden;background:#fff;container-type:inline-size}
.efi-defil{position:absolute;left:0;top:0;width:100%}
.efi-defil>img{display:block;width:100%;height:auto}
.efi-haut{position:absolute;left:0;top:0;z-index:1;display:block;width:100%;height:auto;box-shadow:0 6px 14px -10px #0f172a66}
.is-joue .efi-defil{animation:efiDefil var(--t,2000ms) cubic-bezier(.45,0,.25,1) var(--d,700ms) forwards}
@keyframes efiDefil{to{transform:translateY(var(--y,0%))}}
.efi-pc{width:min(100cqw,140cqh);opacity:0;transform:translateY(12%) scale(.96)}
.is-joue .efi-pc{animation:efiIn 1s var(--e) .1s forwards}
.efi-pc-ecran{position:relative;padding:2.1%;border-radius:16px 16px 6px 6px;background:#1b1f27;box-shadow:0 40px 70px -34px #0f172a99,inset 0 0 0 2px #ffffff12}
.efi-pc-ecran::before{content:'';position:absolute;left:50%;top:.75%;width:.9%;aspect-ratio:1;margin-left:-.45%;border-radius:50%;background:#3a4150}
.efi-pc .efi-vue{aspect-ratio:16/10;border-radius:4px}
.efi-pc .efi-vue::after{content:'';position:absolute;inset:0;background:#1b1f27;opacity:1;pointer-events:none}
.is-joue .efi-pc .efi-vue::after{animation:efiAllume .5s ease-out .55s forwards}
@keyframes efiAllume{to{opacity:0}}
.efi-pc-base{position:relative;width:114%;height:0;padding-bottom:3.4%;margin:0 -7%;border-radius:0 0 18px 18px/0 0 60% 60%;background:linear-gradient(#d9dde3,#aab0ba)}
.efi-pc-base::before{content:'';position:absolute;left:50%;top:0;width:16%;height:38%;margin-left:-8%;border-radius:0 0 10px 10px;background:#9aa1ac}
.efi-tel{position:relative;height:min(97cqh,calc(100cqw * 2.02));aspect-ratio:9.9/20.3;container-type:inline-size;opacity:0;transform:translateY(10%) rotate(-5deg)}
.is-joue .efi-tel{animation:efiIn .95s var(--e) .15s forwards}
.efi-tel-cadre{position:absolute;inset:0;padding:4.6% 4.4%;border-radius:15%/7.3%;background:#1b1f27;box-shadow:0 40px 70px -30px #0f172a8c,inset 0 0 0 2px #ffffff14}
.efi-tel .efi-vue{width:100%;aspect-ratio:9/19;border-radius:11%/5.2%}
.efi-encoche{position:absolute;left:50%;top:6.2cqw;width:27cqw;height:4.4cqw;translate:-50% 0;border-radius:99px;background:#1b1f27;z-index:2}
/* bande d'état du téléphone : l'encoche ne masque pas l'en-tête de l'application */
.efi-tel .efi-defil,.efi-tel .efi-haut{top:8cqw}
.efi-tel .efi-vue::before{content:'';position:absolute;left:0;right:0;top:0;height:8cqw;background:#fff;z-index:2}
/* zones qui s'allument */
.efi-pt{position:absolute;border-radius:10px;opacity:0;transform:scale(1.25);box-shadow:0 0 0 3px var(--accent),0 0 0 9px color-mix(in srgb,var(--accent) 22%,transparent),0 12px 30px -8px #0f172a66;pointer-events:none}
@supports not (color:color-mix(in srgb,red,blue)){.efi-pt{box-shadow:0 0 0 3px var(--accent),0 12px 30px -8px #0f172a66}}
.is-joue .efi-pt{animation:efiPt .55s var(--e) var(--d,0ms) forwards}
@keyframes efiPt{to{opacity:1;transform:none}}
.efi-pt::after{content:'';position:absolute;inset:-3px;border:3px solid var(--accent);border-radius:12px;opacity:0}
.is-joue .efi-pt::after{animation:efiOnde 1s ease-out forwards;animation-delay:calc(var(--d,0ms) + 250ms)}
@keyframes efiOnde{0%{opacity:.8;transform:none}100%{opacity:0;transform:scale(1.18,1.5)}}
.efi-pt>em{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;padding:.4em .8em;border-radius:.6em;background:var(--texte);color:#fff;font:700 clamp(10px,2.3cqw,15px)/1.2 var(--fx);font-style:normal;white-space:nowrap;box-shadow:0 10px 24px -10px #0f172a99}
.efi-tel .efi-pt>em{font-size:clamp(10px,5.2cqw,14px)}
.efi-pt--bas>em{bottom:auto;top:calc(100% + 10px)}
.efi-pt--gauche>em{left:0;translate:0 0}
.efi-pt--droite>em{left:auto;right:0;translate:0 0}

/* ---- scène « etapes » : la liste qui se coche ---- */
.efi-liste{position:relative;width:min(32rem,100cqw);font-size:clamp(12px,min(2.3cqh,3.8cqw),16px);padding:1.3em 1.4em 1.1em}
.efi-l-tete{display:flex;align-items:center;gap:.85em;margin-bottom:.95em}
.efi-l-tete .ic{flex:none;width:2.6em;height:2.6em;border-radius:.75em;background:var(--accent);color:#fff;display:grid;place-items:center}
.efi-l-tete .ic svg{width:1.35em;height:1.35em}
.efi-l-tete b{display:block;font:800 1.15em/1.2 var(--ft)}
.efi-l-tete small{display:block;color:var(--doux);font-size:.9em}
.efi-barre{height:.42em;margin:0 0 .6em;border-radius:1em;background:var(--barre);overflow:hidden}
.efi-barre i{display:block;height:100%;border-radius:inherit;background:var(--prog);transform-origin:0 50%;transform:scaleX(0)}
.is-joue .efi-barre i{animation:efiBarre var(--t) linear var(--d,0ms) forwards}
.efi-items{position:relative;margin:0;padding:0;list-style:none}
.efi-it{position:relative;isolation:isolate;display:flex;align-items:center;gap:.85em;padding:.5em 0}
.efi-it::after{content:'';position:absolute;inset:0 -.6em;z-index:-1;border-radius:.7em;background:var(--clair);opacity:0}
.is-joue .efi-it::after{animation:efiLueur 1s ease-out var(--d,0ms) forwards}
@keyframes efiLueur{20%{opacity:1}to{opacity:0}}
.efi-it .rond{position:relative;flex:none;width:2.2em;height:2.2em;border-radius:.7em;background:#fff;border:2px solid var(--ligne);display:grid;place-items:center}
.efi-it .rond::before{content:'';position:absolute;inset:-2px;border-radius:.7em;background:var(--c);transform:scale(0)}
.efi-it .rond b{position:relative;grid-area:1/1;font:800 1em/1 var(--ft);color:var(--doux2)}
.efi-it .rond svg{position:relative;grid-area:1/1;width:1.2em;height:1.2em;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.efi-it .rond path{stroke-dasharray:1;stroke-dashoffset:1}
.is-joue .efi-it .rond::before{animation:efiRond .4s var(--e) var(--d,0ms) forwards}
.is-joue .efi-it .rond b{animation:efiSort .2s ease-in var(--d,0ms) forwards}
.is-joue .efi-it .rond path{animation:efiTrace .3s ease-out forwards;animation-delay:calc(var(--d) + 120ms)}
.efi-it .tx{min-width:0}
.efi-it .tx b{display:block;font-weight:700;line-height:1.25}
.efi-it .tx small{display:block;margin-top:.18em;color:var(--doux);font-size:.86em;line-height:1.3}
.efi-it .st{margin-left:auto;display:grid;font-size:.82em;font-weight:600;white-space:nowrap}
.efi-it .st>span{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:.3em;padding:.24em .7em;border-radius:1em}
.efi-it .st svg{width:1em;height:1em}
.efi-it .st .a{background:#f1f2f4;color:var(--doux2)}
.efi-it .st .b{background:var(--clair);color:var(--accent);opacity:0;transform:scale(.85)}
.is-joue .efi-it .st .a{animation:efiSort .25s ease-in var(--d,0ms) forwards}
.is-joue .efi-it .st .b{animation:efiIn .45s var(--e) forwards;animation-delay:calc(var(--d) + 80ms)}
.efi-tampon{position:absolute;right:1.1em;bottom:1.2em;padding:.45em .85em;border:.17em solid var(--accent);border-radius:.55em;background:#fffffff2;color:var(--accent);font:800 1.02em/1 var(--ft);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;rotate:-8deg;box-shadow:0 10px 24px -12px #0f172a66;opacity:0}
.is-joue .efi-tampon{animation:efiTampon .5s cubic-bezier(.2,.9,.3,1.15) var(--d,0ms) forwards}
@keyframes efiTampon{from{opacity:0;transform:scale(1.9)}45%{opacity:1}to{opacity:1;transform:none}}
@container (max-height:430px){.efi-it .tx small{display:none}.efi-it{padding:.32em 0}}

/* ---- scène « cartes » ---- */
.efi-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);width:min(64rem,100%);margin:clamp(4px,1vh,12px) 0;text-align:left}
.efi-cartes.efi-n2{grid-template-columns:repeat(2,minmax(0,1fr));width:min(44rem,100%)}
.efi-cartes.efi-n4{grid-template-columns:repeat(4,minmax(0,1fr));width:min(76rem,100%)}
.efi-carte{display:flex;flex-direction:column;gap:.9em;padding:clamp(16px,1.8vw,26px)}
.efi-carte .ic{flex:none;width:3em;height:3em;border-radius:.95em;background:var(--c);color:#fff;display:grid;place-items:center}
.efi-carte .ic svg{width:1.5em;height:1.5em}
.efi-carte b{display:block;font:800 clamp(17px,1.45vw,22px)/1.2 var(--ft);color:var(--texte)}
.efi-carte small{display:block;margin-top:.35em;color:var(--doux);font-size:clamp(13px,1vw,15px);line-height:1.45}

/* ---- scène « badges » (de nuit par défaut) ---- */
.efi-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.4vw,18px);width:min(64rem,100%);margin:clamp(4px,1vh,12px) 0}
.efi-badge{display:flex;align-items:center;gap:.8em;padding:.7em 1.4em .7em .7em;border-radius:999px;background:#fff;border:1px solid var(--ligne);color:var(--texte);text-align:left;box-shadow:0 22px 44px -26px #0f172a80}
.efi-badge .ic{flex:none;width:2.9em;height:2.9em;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.efi-badge .ic svg{width:1.45em;height:1.45em}
.efi-badge b{display:block;font:800 clamp(18px,1.6vw,24px)/1.15 var(--ft)}
.efi-badge small{display:block;margin-top:.15em;color:var(--doux);font-size:clamp(12.5px,.95vw,14.5px);line-height:1.35}
.efi-scene--nuit .efi-badge{background:#ffffff12;border-color:#ffffff26;color:#fff;box-shadow:0 26px 50px -30px #000000a0}
.efi-scene--nuit .efi-badge small{color:#cbd5e1}
.efi-scene--nuit .efi-badge .ic{background:var(--accent-nuit)}

/* ---- scènes de nuit ---- */
.efi-scene--nuit .efi-eyb{color:var(--accent-nuit)}
.efi-scene--nuit .efi-t,.efi-scene--nuit .efi-nom{color:#fff}
.efi-scene--nuit .efi-t em{color:var(--accent-nuit)}
.efi-scene--nuit .efi-small{color:#cbd5e1}

/* ---- scène « appel » ---- */
.efi-cta{position:relative;display:inline-flex;align-items:center;gap:.55em;margin:0;padding:.85em 1.6em;border:0;border-radius:999px;background:var(--cta);color:var(--cta-texte);font:700 clamp(19px,1.45vw,22px)/1.2 var(--fx);cursor:pointer;box-shadow:0 18px 40px -16px var(--cta);transition:filter .2s}
.efi-cta:hover{filter:brightness(.93)}
.efi-cta svg{width:1.05em;height:1.05em}
.efi-cta::after{content:'';position:absolute;inset:-3px;border:2px solid var(--cta);border-radius:999px;opacity:0;pointer-events:none}
.is-joue .efi-cta::after{animation:efiAnneau 1.1s ease-out 1.6s forwards}
@keyframes efiAnneau{0%{opacity:.8;transform:none}100%{opacity:0;transform:scale(1.15,1.5)}}

/* ---- scène « signature » ---- */
.efi-tag{margin:0;font-size:clamp(16px,1.5vw,21px);color:var(--doux)}
.efi-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}
.efi-solution svg{width:22px;height:22px}
.efi-solution b{font-weight:800;color:#eff8ff;letter-spacing:-.02em}
.efi-solution b span{color:#ffac76}
.efi-protec{margin:0;font:500 clamp(11.5px,.9vw,13px)/1.45 var(--fx);color:var(--doux2);max-width:34em}

/* ---- commandes ---- */
.efi-prog{position:absolute;left:0;top:0;z-index:6;width:100%;height:3px;background:var(--prog);transform-origin:0 50%;transform:scaleX(0)}
.is-parti .efi-prog{animation:efiBarre 1s linear forwards}
.efi-brandbar{position:absolute;left:var(--pad);top:clamp(16px,3.2vh,30px);z-index:5;display:flex;align-items:center;gap:10px;font:900 clamp(18px,1.45vw,22px)/1 var(--ft);letter-spacing:-.02em;color:var(--texte);transition:opacity .4s,color .5s}
.efi-brandbar .efi-lg{width:clamp(30px,2.4vw,36px)}
.efi-brandbar em{font-style:normal;color:var(--accent)}
#ef-intro[data-type="marque"] .efi-brandbar,#ef-intro[data-type="signature"] .efi-brandbar{opacity:0}
#ef-intro.is-nuit .efi-brandbar{color:#fff;transition-delay:0s,.45s}
.efi-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}
.efi-btn{position:relative;pointer-events:auto;display:inline-flex;align-items:center;gap:.55em;min-height:44px;margin:0;padding:.55em 1.15em;border:1.5px solid var(--ligne);border-radius:999px;background:#fffffff0;color:var(--texte);font:600 14px/1.1 var(--fx);cursor:pointer;transition:transform .16s var(--e),border-color .2s,background-color .3s,color .3s}
.efi-btn:hover{border-color:var(--texte)}
.efi-btn:active{transform:scale(.97)}
.efi-btn:focus-visible,.efi-cta:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.efi-btn svg{width:1.15em;height:1.15em}
.efi-btn[hidden]{display:none}
.efi-btn:disabled{cursor:default}
.efi-skip{margin-left:auto}
.efi-son .on,.efi-son.is-on .off{display:none}
.efi-son.is-on .on{display:block}
.efi-son::after{content:'';position:absolute;inset:-2px;border:2px solid var(--accent);border-radius:999px;opacity:0;pointer-events:none}
.is-parti .efi-son:not(.is-on)::after{animation:efiAppel 1.6s ease-out 2.4s 3}
@keyframes efiAppel{0%{opacity:.9;transform:none}100%{opacity:0;transform:scale(1.12,1.35)}}
#ef-intro.is-nuit .efi-btn{border-color:#ffffff40;background:#111827f0;color:#fff}
#ef-intro.is-nuit .efi-btn:hover{border-color:#fff}

/* ---- formats portrait (tablette, téléphone) ---- */
@media (max-aspect-ratio:1/1){
 .efi-split,.efi-split--ecran,.efi-split--tel{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)}
 .efi-t{font-size:clamp(28px,6.4vw,58px)}
 .efi-t--md{font-size:clamp(27px,6vw,54px)}
 .efi-t--xl{font-size:clamp(40px,10vw,84px)}
 .efi-small{font-size:clamp(15px,2.3vw,19px)}
 .efi-eyb{font-size:clamp(11px,1.7vw,13px)}
 .efi-cartes,.efi-cartes.efi-n2,.efi-cartes.efi-n4{grid-template-columns:minmax(0,1fr);max-width:34rem}
 .efi-carte{flex-direction:row;align-items:center;gap:14px}
 .efi-badges{flex-direction:column;align-items:stretch;max-width:30rem}
 .efi-tag{font-size:clamp(16px,2.6vw,21px)}
 .efi-nom{font-size:clamp(48px,14vw,128px)}
}
@media (max-width:600px){
 .efi-search{align-items:flex-start;min-height:0;padding:.75rem .45rem .75rem 1rem;border-radius:24px}
 .efi-search>svg{margin-top:.15em}
 .efi-type{white-space:normal}
 .efi-go{width:2.4rem;height:2.4rem}
 .efi-btn{padding:.5em .95em;font-size:13.5px}
 .efi-t{font-size:clamp(27px,7.8vw,40px)}
 .efi-t--xl{font-size:clamp(40px,12vw,56px)}
 .efi-small{font-size:15px}
 .efi-brandbar{gap:8px}
 .efi-cta{padding:.8em 1.3em}
 .efi-carte{padding:14px 16px}
 .efi-carte .ic{width:2.6em;height:2.6em}
 .efi-carte b{font-size:17px}
 .efi-carte small{font-size:13px}
 .efi-badge{padding:.55em 1.1em .55em .55em}
 .efi-badge b{font-size:18px}
}
/* écrans très bas (téléphone couché) */
@media (max-height:520px) and (min-aspect-ratio:1/1){
 .efi-split{padding-top:56px;padding-bottom:64px}
 .efi-centre{padding-top:52px;padding-bottom:68px;gap:10px}
 .efi-t{font-size:clamp(22px,3.4vw,36px)}
 .efi-t--xl{font-size:clamp(30px,5vw,48px)}
 .efi-nom{font-size:clamp(34px,6.4vw,64px)}
 .efi-small{font-size:14px;margin-top:8px}
 .efi-carte small,.efi-badge small{display:none}
}

/* ========== 2e couche : la page d'accueil de l'application se construit ========== */
.efc-caret{display:inline-block;width:2px;height:1em;margin-right:-2px;vertical-align:-.12em;background:var(--efc-caret,currentColor);animation:efcCaret 1s steps(2) infinite}
.efc-caret.is-fin{animation:efcCaret 1s steps(2) 2,efcCaretOut .3s 2s forwards}
@keyframes efcCaret{50%{opacity:0}}
@keyframes efcCaretOut{to{opacity:0}}
.efc-reste{opacity:0}
.efc-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .04em .16em;margin:-.1em -.04em -.16em}
.efc-i{display:inline-block;font-style:inherit}
.efc-mots .efc-i{opacity:0;transform:translate3d(0,110%,0)}
.efc-mots.efc-on .efc-i{animation:efcMot .9s cubic-bezier(.23,1,.32,1) forwards;animation-delay:calc(var(--efc-d,0ms) + var(--k,0) * 70ms)}
@keyframes efcMot{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.efc-mots .efc-i{opacity:1;transform:none;animation:none}.efc-reste{opacity:1}.efc-caret{display:none}}
@media print{.efc-mots .efc-i,.efc-reste{opacity:1!important;transform:none!important}.efc-caret{display:none}}