/* 30/09/2026 — film d'ouverture de l'accueil (motion design sur le modèle de la vidéo de référence).
   Se joue seul (~30 s), se passe à tout moment, se termine sur l'écran de la planète. Aucun script tiers. */
#ef-film{--o:#ffac76;--c:#98e6f8;--ink:#eff8ff;--soft:#a9c4d4;--e:cubic-bezier(0.23,1,0.32,1);
 position:fixed;inset:0;z-index:300;background:radial-gradient(120% 90% at 50% 110%,#0c2536 0,#040c16 60%);color:var(--ink);
 font-family:Manrope,system-ui,sans-serif;overflow:hidden;transition:opacity .9s var(--e)}
#ef-film.is-fin{opacity:0;pointer-events:none}
#ef-film *{box-sizing:border-box}
.ff-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.04);filter:blur(10px);
 transition:opacity .55s var(--e),transform .7s var(--e),filter .55s var(--e),visibility 0s .7s}
.ff-scene.is-on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .55s var(--e),transform .8s var(--e),filter .55s var(--e),visibility 0s}
.ff-scene.is-out{opacity:0;transform:translate3d(-7%,0,0) scale(.97);filter:blur(16px)}
.ff-lbl{font-size:clamp(.62rem,.8vw,.78rem);letter-spacing:.28em;text-transform:uppercase;color:var(--c);font-weight:700}
.ff-t{margin:0;font-weight:500;letter-spacing:-.045em;line-height:1.02;font-size:clamp(2.2rem,5.2vw,5.4rem);text-wrap:balance}
.ff-t em{font-style:normal;color:var(--o)}
.ff-t--md{font-size:clamp(1.8rem,3.6vw,3.6rem)}
.ff-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .15em;margin:0 -.03em -.15em}
.ff-w>i{display:inline-block;font-style:inherit;transform:translate3d(0,108%,0);opacity:0}
.is-on .ff-w>i{animation:ffWord .9s var(--e) forwards;animation-delay:calc(var(--d,0ms) + var(--k,0) * 75ms)}
@keyframes ffWord{from{transform:translate3d(0,108%,0);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
.ff-in{opacity:0;transform:translate3d(0,16px,0)}
.is-on .ff-in{animation:ffIn .8s var(--e) forwards;animation-delay:var(--d,0ms)}
@keyframes ffIn{to{opacity:1;transform:none}}
.ff-pop{opacity:0;transform:scale(.9) translate3d(0,14px,0)}
.is-on .ff-pop{animation:ffPop .8s var(--e) forwards;animation-delay:var(--d,0ms)}
@keyframes ffPop{to{opacity:1;transform:none}}
.ff-card{border:1px solid #9ed6ee40;border-radius:14px;background:linear-gradient(160deg,#0f2438f0,#08192af0);box-shadow:0 30px 70px -25px #000c,inset 0 1px 0 #ffffff12}

/* ---- l'arc de la planète (fil conducteur, comme dans la vidéo) ---- */
.ff-arc{position:absolute;left:50%;bottom:0;width:190vw;height:62vh;transform:translate(-50%,0);opacity:0;transition:opacity 1s var(--e),transform 1.6s cubic-bezier(.7,0,.2,1);pointer-events:none;transform-origin:50% 100%}
.ff-arc.is-on{opacity:1}
.ff-arc.is-zoom{transform:translate(-50%,0) scale(2.6);opacity:0}
.ff-arc::before{content:'';position:absolute;left:0;right:0;top:34%;height:160%;border-radius:50%;border-top:1.5px solid #bdefff;box-shadow:0 -10px 40px -6px #4cc7f080,inset 0 30px 60px -30px #4cc7f055;background:radial-gradient(60% 40% at 50% 0,#0f3a50aa,#040c1600 70%)}

/* ---- scène 1 : grille 3D + recherche + titre ---- */
.ff-grid{position:absolute;inset:-20%;perspective:1100px;perspective-origin:50% 30%}
.ff-grid__plane{position:absolute;left:50%;top:50%;width:170vw;display:grid;grid-template-columns:repeat(8,1fr);gap:1.6vw;
 transform:translate(-50%,-50%) rotateX(52deg) rotateZ(-10deg);animation:ffDrift 9s linear forwards}
@keyframes ffDrift{from{transform:translate(-50%,-44%) rotateX(52deg) rotateZ(-10deg)}to{transform:translate(-50%,-56%) rotateX(52deg) rotateZ(-10deg)}}
.ff-grid__plane span{aspect-ratio:1350/928;border-radius:8px;background:#0b1a2b center/cover no-repeat;border:1px solid #98e6f82e;opacity:.32;filter:saturate(.6) brightness(.8)}
.ff-s1 .ff-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center;padding:0 5vw;
 background:radial-gradient(45% 40% at 50% 50%,#040c16e6,#040c1600 100%)}
.ff-search{position:relative;width:min(38rem,90vw);min-height:3.4rem;display:flex;align-items:center;gap:.8rem;padding:0 1.2rem;border-radius:999px;border:1px solid #9ed6ee55;background:#0d2033f2;box-shadow:0 20px 50px -20px #000;font-size:clamp(.95rem,1.3vw,1.15rem);text-align:left}
.ff-search .ff-lens{flex:none;width:1em;height:1em;border:2px solid var(--c);border-radius:50%;position:relative}
.ff-search .ff-lens::after{content:'';position:absolute;width:.45em;height:2px;background:var(--c);right:-.42em;bottom:-.12em;transform:rotate(45deg)}
.ff-search .ff-go{margin-left:auto;flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--o);display:grid;place-items:center;color:#14100c;font-weight:800}
.ff-caret{display:inline-block;width:2px;height:1.1em;background:var(--o);vertical-align:-.15em;margin-left:2px;animation:ffCaret 1s steps(2) infinite}
@keyframes ffCaret{50%{opacity:0}}
.ff-sugg{position:absolute;left:0;right:0;top:calc(100% + .5rem);margin:0;padding:.4rem;list-style:none;border-radius:14px;border:1px solid #9ed6ee40;background:#0b1a2bf5;opacity:0;transform:translateY(-6px);transition:opacity .35s var(--e),transform .35s var(--e);font-size:.9em;color:var(--soft)}
.ff-sugg.is-on{opacity:1;transform:none}
.ff-sugg li{padding:.55rem .8rem;border-radius:9px;transition:background .25s,color .25s}
.ff-sugg li.is-hot{background:#ffac7626;color:var(--ink)}

/* ---- scène 2 : la marque ---- */
.ff-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:0 6vw 12vh}
.ff-brand{display:flex;align-items:center;gap:.4em;font-weight:800;letter-spacing:-.04em;font-size:clamp(3rem,8vw,7.5rem);line-height:1}
.ff-brand b{color:var(--o);font-weight:800}
.ff-mark{width:.62em;height:.62em;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ffd2b3,#ff8a3d 70%);box-shadow:0 0 40px #ff8a3d66;flex:none}
.is-on .ff-brand{animation:ffBrand 1.3s var(--e) both}
@keyframes ffBrand{from{opacity:0;transform:scale(.86);filter:blur(14px);letter-spacing:.08em}to{opacity:1;transform:none;filter:none;letter-spacing:-.04em}}

/* ---- scène 3 : le portable ---- */
.ff-s3 .ff-top{position:absolute;left:0;right:0;top:9vh;text-align:center;padding:0 6vw}
.ff-laptop{position:absolute;left:50%;bottom:-2vh;width:min(62vw,860px);transform:translate(-50%,40%) rotateX(24deg);opacity:0;perspective:1400px}
.is-on .ff-laptop{animation:ffLaptop 1.4s var(--e) .35s forwards}
@keyframes ffLaptop{to{transform:translate(-50%,0) rotateX(0);opacity:1}}
.ff-laptop__lid{border:2px solid #9ed6ee55;border-bottom:0;border-radius:16px 16px 0 0;background:#0b2b3c;padding:1.6%;box-shadow:0 -20px 80px -30px #4cc7f066}
.ff-laptop__screen{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#061120}
.ff-laptop__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .8s var(--e),transform 3s linear;transform:scale(1.04)}
.ff-laptop__screen img.is-on{opacity:1;transform:none}

/* ---- scène 4 : écrans qui volent ---- */
.ff-s4 .ff-left{position:absolute;left:6vw;top:50%;transform:translateY(-50%);z-index:2;max-width:34vw}
.ff-fly{position:absolute;inset:0;perspective:1200px;perspective-origin:70% 50%}
.ff-fly span{position:absolute;top:var(--y);left:0;width:clamp(15rem,28vw,30rem);aspect-ratio:1350/928;border-radius:12px;background:#0b1a2b center/cover no-repeat;border:1.5px solid #9ed6ee55;box-shadow:0 30px 60px -20px #000d;
 opacity:0;transform:translate3d(110vw,0,-200px) rotateY(-30deg)}
.is-on .ff-fly span{animation:ffFly 3.2s cubic-bezier(.3,.7,.3,1) forwards;animation-delay:var(--d)}
@keyframes ffFly{0%{opacity:0;transform:translate3d(110vw,0,-300px) rotateY(-34deg);filter:blur(8px)}18%{opacity:1;filter:none}
 70%{transform:translate3d(var(--x),0,var(--z)) rotateY(-18deg);opacity:1}100%{transform:translate3d(calc(var(--x) - 8vw),0,var(--z)) rotateY(-14deg);opacity:1}}

/* ---- scène 5 : orbite reliée aux usages ---- */
.ff-s5 .ff-left{position:absolute;left:6vw;top:14vh;z-index:3}
.ff-swap{position:relative;display:block;height:1.1em;overflow:hidden;color:var(--c)}
.ff-swap span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(100%);transition:opacity .45s var(--e),transform .55s var(--e)}
.ff-swap span.is-on{opacity:1;transform:none}
.ff-swap span.is-out{opacity:0;transform:translateY(-100%)}
.ff-orbit{position:absolute;left:18vw;top:58%;width:min(34vw,54vh);aspect-ratio:1;transform:translate(-50%,-50%)}
.ff-orbit i{position:absolute;inset:0;border:1px solid #98e6f84d;border-radius:50%}
.ff-orbit i:nth-child(2){inset:18%;border-color:#98e6f833}
.ff-orbit .ff-rot{position:absolute;inset:0;animation:ffSpin 16s linear infinite}
.ff-orbit .ff-rot:nth-of-type(2){inset:18%;animation-duration:11s;animation-direction:reverse}
.ff-orbit .ff-rot b{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:#0b1a2b;border:1.5px solid var(--c)}
.ff-orbit .ff-rot b.o{background:var(--o);border-color:#ffd6b8;box-shadow:0 0 12px #ff8a3d}
@keyframes ffSpin{to{transform:rotate(360deg)}}
.ff-core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:24%;display:grid;place-items:center;font-weight:800;font-size:clamp(.9rem,1.5vw,1.4rem);color:#14100c;background:radial-gradient(circle at 32% 30%,#ffd2b3,#ff8a3d 75%);box-shadow:0 0 50px #ff8a3d55}
.ff-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ff-links path{fill:none;stroke:#98e6f8aa;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}
.ff-links path.is-on{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--e)}
.ff-uses{position:absolute;right:6vw;top:18vh;display:flex;flex-direction:column;gap:1.4rem;width:min(30rem,40vw)}
.ff-use{display:flex;gap:1rem;align-items:center;padding:1rem 1.2rem;opacity:0;transform:translate3d(30px,0,0) scale(.96);transition:opacity .6s var(--e),transform .7s var(--e)}
.ff-use.is-on{opacity:1;transform:none}
.ff-use img{width:7.5rem;aspect-ratio:1350/928;border-radius:6px;object-fit:cover;object-position:top;flex:none}
.ff-use b{display:block;font-size:1.05rem}
.ff-use small{color:var(--soft);font-size:.85rem;line-height:1.35;display:block}

/* ---- scène 6 : notifications ---- */
.ff-s6 .ff-left{position:absolute;left:6vw;top:50%;transform:translateY(-50%)}
.ff-notifs{position:absolute;right:8vw;top:50%;transform:translateY(-50%);width:min(27rem,44vw);display:flex;flex-direction:column;gap:.7rem}
.ff-notif{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;opacity:0;transform:translate3d(0,-18px,0) scale(.96)}
.is-on .ff-notif{animation:ffNotif .7s var(--e) forwards;animation-delay:var(--d)}
@keyframes ffNotif{to{opacity:1;transform:none}}
.ff-notif i{flex:none;width:2.1rem;height:2.1rem;border-radius:10px;background:#98e6f81f;border:1px solid #98e6f855;display:grid;place-items:center;font-style:normal;color:var(--c);font-weight:800;font-size:.8rem}
.ff-notif b{display:block;font-size:.95rem}
.ff-notif small{color:var(--soft);font-size:.78rem}
.ff-notif em{margin-left:auto;font-style:normal;color:var(--o);font-size:.75rem;white-space:nowrap}

/* ---- scène 7 : chiffres + courbe ---- */
.ff-s7 .ff-stats{position:absolute;left:6vw;right:6vw;top:50%;transform:translateY(-58%);display:grid;grid-template-columns:1.2fr 1fr;gap:4vw;align-items:center}
.ff-big{font-size:clamp(5rem,13vw,12rem);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--o);font-variant-numeric:tabular-nums}
.ff-big small{display:block;font-size:clamp(1rem,1.6vw,1.4rem);letter-spacing:0;color:var(--ink);font-weight:600;margin-top:.6rem}
.ff-chart{padding:1.2rem 1.4rem}
.ff-chart svg{width:100%;height:auto;display:block}
.ff-chart path.l{fill:none;stroke:var(--c);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1}
.ff-chart path.a{fill:url(#ffg);opacity:0;transition:opacity 1s .9s}
.is-on .ff-chart path.l{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .4s}
.is-on .ff-chart path.a{opacity:1}
.ff-mini{display:flex;gap:1rem;margin-top:1rem}
.ff-mini div{flex:1;padding:.9rem 1rem}
.ff-mini b{display:block;font-size:clamp(1.6rem,2.6vw,2.4rem);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ff-mini small{color:var(--soft);font-size:.8rem}

/* ---- scène 8 : tableau de bord ---- */
.ff-s8 .ff-top{position:absolute;left:6vw;top:10vh}
.ff-dash{position:absolute;left:6vw;right:6vw;top:27vh;bottom:18vh;display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:1.2rem}
.ff-dash>div{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}
.ff-dash>div:first-child{grid-row:span 2}
.ff-dash b{font-size:1.05rem}
.ff-dash small{color:var(--soft);font-size:.82rem;line-height:1.35}
.ff-dash img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top;border-radius:8px;border:1px solid #9ed6ee30}
.ff-bars{flex:1;display:flex;align-items:flex-end;gap:8%;padding-top:.6rem}
.ff-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(#ffac76,#ff8a3d88);height:0;transition:height 1s var(--e)}
.is-on .ff-bars i{height:var(--h)}
.ff-tag{align-self:flex-start;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c);border:1px solid #98e6f855;border-radius:999px;padding:.2rem .6rem}

/* ---- scène 9 et 10 : appel et signature ---- */
.ff-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.5rem;border-radius:999px;border:0;background:var(--o);color:#14100c;font:800 1rem Manrope,system-ui,sans-serif;cursor:pointer;box-shadow:0 14px 40px -12px #ff8a3daa;transition:transform .16s var(--e)}
.ff-cta:hover{transform:translateY(-2px)}.ff-cta:active{transform:scale(.97)}
.ff-small{color:var(--soft);font-size:.85rem}
.ff-univers{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;color:var(--soft);font-size:.82rem;letter-spacing:.06em}
.ff-univers span::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--c);margin-right:.5rem;vertical-align:2px}

/* ---- commandes ---- */
.ff-skip{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vh,2rem);z-index:10;border:1px solid #9ed6ee55;background:#08192acc;color:var(--ink);border-radius:999px;padding:.6rem 1.1rem;font:600 .85rem Manrope,system-ui,sans-serif;cursor:pointer;transition:border-color .16s,transform .16s}
.ff-skip:hover{border-color:var(--o)}.ff-skip:active{transform:scale(.97)}
.ff-prog{position:absolute;left:0;top:0;height:2px;background:var(--o);width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:10}
.ff-brandbar{position:absolute;left:clamp(1rem,5vw,4.5rem);top:clamp(1rem,3vh,1.8rem);z-index:10;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;opacity:.9}
.ff-brandbar b{color:var(--o)}

/* ---- téléphone ---- */
@media (max-width:760px){
 .ff-s4 .ff-left,.ff-s6 .ff-left{left:6vw;right:6vw;top:14vh;transform:none;max-width:none}
 .ff-fly span{width:70vw;top:calc(var(--y) + 22vh)}
 .ff-s5 .ff-left{top:12vh;left:6vw;right:6vw}
 .ff-orbit{left:50%;top:44%;width:58vw}
 .ff-uses{left:6vw;right:6vw;top:auto;bottom:14vh;width:auto;gap:.6rem}
 .ff-use{padding:.6rem .8rem}.ff-use img{width:4.5rem}.ff-links{display:none}
 .ff-notifs{left:6vw;right:6vw;width:auto;top:auto;bottom:12vh;transform:none}
 .ff-s7 .ff-stats{grid-template-columns:1fr;top:44%}
 .ff-dash{grid-template-columns:1fr 1fr;grid-template-rows:auto;top:24vh;bottom:12vh}
 .ff-dash>div:first-child{grid-row:auto;grid-column:span 2}
 .ff-dash>div:first-child img{max-height:22vh}
 .ff-laptop{width:92vw}
 .ff-s3 .ff-top{top:14vh}
}
/* ---- bouton son (les navigateurs exigent un geste du visiteur avant tout son) ---- */
.ff-son{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:calc(clamp(1rem,3vh,2rem) + 3.2rem);z-index:10;display:inline-flex;align-items:center;gap:.55rem;border:1px solid #ffac76;background:#ffac7622;color:var(--ink);border-radius:999px;padding:.6rem 1.1rem;font:700 .85rem Manrope,system-ui,sans-serif;cursor:pointer;animation:ffSonAppel 1.6s ease-in-out 2.5s 4;transition:transform .16s,background .16s}
.ff-son:hover{background:#ffac7640}.ff-son:active{transform:scale(.97)}
.ff-son.is-on{border-color:#9ed6ee55;background:#08192acc;animation:none;font-weight:600}
.ff-hp{position:relative;width:.55rem;height:.7rem;background:currentColor;clip-path:polygon(0 30%,40% 30%,100% 0,100% 100%,40% 70%,0 70%)}
.ff-hp::after{content:'';position:absolute;left:.75rem;top:-.15rem;width:.45rem;height:1rem;border:2px solid currentColor;border-left:0;border-radius:0 1rem 1rem 0;opacity:.8}
.ff-son:not(.is-on) .ff-hp::after{border-color:transparent}
@keyframes ffSonAppel{50%{box-shadow:0 0 0 6px #ffac7633}}