/* MkFunded – scène animée + mise en page plein écran des pages d'authentification (v1) */
:root{--navy:#050f33;--navy2:#0a1f66;--blue:#0a55ff;--ink:#0b1330;--mute:#5b6785;--line:#dbe3f5}
.au{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);height:100vh;height:100dvh;overflow:hidden;background:#fff}
.stage{position:relative;overflow:hidden;background:radial-gradient(900px 600px at 20% 10%,#12307f 0,transparent 60%),linear-gradient(160deg,#071a52,#050f33 70%);color:#fff;isolation:isolate}
.st-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.95}
.st-in{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(1.2rem,3.2vh,2.2rem) clamp(1.4rem,4vw,3.4rem) 0}
.stage .mkb{display:inline-flex;align-items:center;gap:.6rem}.stage .mkb b{font:800 1.5rem/1 var(--font,'Plus Jakarta Sans',system-ui,sans-serif);letter-spacing:-.03em;color:#fff;display:block}.stage .mkb small{display:block;font:600 .6rem/1.2 var(--font,system-ui);letter-spacing:.14em;color:#9fb6ee;margin-top:.2rem}
.st-mid{align-self:center;max-width:27rem;display:grid;gap:1.1rem}
.st-h{font:800 clamp(1.7rem,3vw,2.6rem)/1.05 var(--font,'Plus Jakarta Sans',system-ui,sans-serif);letter-spacing:-.035em;text-wrap:balance}
.fcard{position:relative;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(140,175,255,.3);border-radius:18px;padding:1.1rem 1.25rem 1.3rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-height:134px;transition:opacity .45s,transform .45s}
.fcard.out{opacity:0;transform:translateY(-12px)}.fcard.pre{opacity:0;transform:translateY(14px);transition:none}
.ftag{display:inline-block;background:#fff;color:#0a2272;font:800 .7rem/1 var(--font,system-ui);padding:.32rem .6rem;border-radius:7px;margin-bottom:.6rem}
.ftag[data-k=promo]{background:#ffd95e}.ftag[data-k=certificate]{background:#7be3b4}.ftag[data-k=event]{background:#ffb4c0}
.ftitle{display:block;font-size:1.25rem;line-height:1.25;letter-spacing:-.02em}.fbody{color:#cdd9ff;font-size:.93rem;margin-top:.3rem;max-width:30rem}
.fcta{display:inline-block;margin-top:.7rem;font-weight:700;font-size:.88rem;color:#fff;border-bottom:2px solid #5fa0ff}.fcta::after{content:' →'}
.fbar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#5fa0ff,#9fc4ff)}
.fbar.run{animation:fbar var(--dur,6500ms) linear forwards}@keyframes fbar{to{transform:scaleX(1)}}
.fdots{display:flex;gap:6px}.fdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:.3s}.fdots i.on{background:#fff;width:22px;border-radius:5px}
/* certificat qui se retourne et flotte */
.cert{position:absolute;right:clamp(.8rem,2vw,2.2rem);top:34%;width:min(225px,31%);margin:0;perspective:900px;animation:cfloat 6s ease-in-out infinite}
.cert-in{background:linear-gradient(#fff,#f1f5ff);color:var(--ink);border-radius:14px;padding:.8rem .9rem;box-shadow:0 24px 50px -18px rgba(0,0,0,.6);transform:rotate(-4deg);transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.cert.flip .cert-in{transform:rotate(-4deg) rotateY(90deg)}
.cert-hd{display:flex;align-items:center;gap:.4rem;border-bottom:2px solid var(--blue);padding-bottom:.4rem}.cert-hd span{font-weight:800;font-size:.82rem;letter-spacing:-.02em}.cert-hd em{margin-left:auto;font:700 .55rem/1 var(--font,system-ui);font-style:normal;letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.cert-t{display:block;font-size:1.02rem;letter-spacing:-.02em;margin:.55rem 0 .15rem}.cert-n{font-size:.68rem;color:var(--mute)}.cert-n u{text-decoration:none;font-weight:700;color:var(--ink)}.cert-d{font-size:.62rem;line-height:1.35;color:var(--mute);margin:.35rem 0}
.cert-ft{display:flex;justify-content:space-between;align-items:flex-end}.qr{width:38px;height:38px;fill:#0b1330}.seal{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#ffe9a3,#d9a620);box-shadow:0 0 0 3px rgba(217,166,32,.3)}
.cert figcaption{margin-top:.5rem;font-size:.66rem;color:#9fb6ee;text-align:center}
@keyframes cfloat{50%{transform:translateY(-10px)}}
/* bandeau défilant sans fin */
.tick{overflow:hidden;border-top:1px solid rgba(140,175,255,.2);margin:0 calc(-1*clamp(1.4rem,4vw,3.4rem));padding:.75rem 0;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick-t{display:inline-flex;gap:2.4rem;padding-left:2.4rem;animation:tick var(--tk,60s) linear infinite;font-size:.84rem;color:#cdd9ff}.tick-t span{display:inline-flex;gap:.5rem;align-items:center}.tick-t b{color:#fff}.tick-t i{width:6px;height:6px;border-radius:50%;background:#5fa0ff}
@keyframes tick{to{transform:translateX(-50%)}}
/* panneau formulaire */
.panel{position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding-top:max(5.2rem,13vh)!important;align-items:center;padding:clamp(1rem,3vh,2rem) clamp(1.2rem,4vw,3rem);overflow-y:auto;min-width:0;background:linear-gradient(180deg,#fff,#f6f8ff)}
.panel .ptop{position:absolute;top:1rem;right:1.2rem;display:flex;gap:.6rem}
.panel .ptop a{font-weight:700;font-size:.86rem;color:var(--blue);border:1px solid var(--line);background:#fff;padding:.5rem .9rem;border-radius:10px}.panel .ptop a:hover{background:#eef3ff}
.panel .card{width:100%;max-width:430px;background:transparent;border:0;box-shadow:none;padding:0;animation:none}
.panel .mk-head,.panel .alert.gd{display:none}
.panel h1{text-align:left;font-size:clamp(1.5rem,3.2vh,1.9rem)}.panel .sub{text-align:left;margin-bottom:clamp(.7rem,2vh,1.2rem)}
.panel .f{margin-bottom:clamp(.6rem,1.6vh,.95rem)}.panel .in input,.panel .ct{height:clamp(46px,6vh,52px)}
.panel .or{margin:clamp(.6rem,1.6vh,1rem) 0}.panel .btn,.panel .gbtn{min-height:clamp(46px,6vh,52px)}
.panel .foot{position:absolute;left:0;right:0;bottom:.7rem;margin:0 auto;padding:0;font-size:.72rem;color:var(--mute);width:100%;max-width:430px;text-align:center}.panel .foot .soc,.panel .foot .trustpilot-widget{display:none}
/* assistant d'inscription */
.wz-top{display:flex;align-items:center;gap:.5rem;margin:.1rem 0 clamp(.7rem,2vh,1.1rem)}
.wz-top span{flex:1;height:5px;border-radius:4px;background:#e3e9f7;overflow:hidden;position:relative}.wz-top span::after{content:'';position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}.wz-top span.on::after{transform:scaleX(1)}
.wz-top b{font-size:.78rem;color:var(--mute);min-width:3.4rem;text-align:right}
.wz-step{display:none}.wz-step.on{display:block;animation:wzin .45s cubic-bezier(.22,1,.36,1)}.wz-step.back.on{animation-name:wzback}
@keyframes wzin{from{opacity:0;transform:translateX(26px)}}@keyframes wzback{from{opacity:0;transform:translateX(-26px)}}
.wz-nav{display:flex;gap:.7rem;margin-top:.4rem}.wz-nav .btn{flex:1;width:auto}.wz-nav .btn.back{flex:0 0 58px;width:58px;background:#fff;color:var(--blue);border:1.5px solid var(--line);box-shadow:none;padding:0 1.1rem}
/* mobile : la scène devient un bandeau compact, tout reste dans l'écran */
@media(max-width:959px){.au{display:block;height:auto;min-height:100dvh;overflow:visible}
 .stage{height:auto;min-height:0}.st-in{display:block;padding:1rem 1.2rem .1rem}.st-mid{max-width:none;gap:.6rem;margin-top:.7rem}.st-h,.cert,.fdots{display:none}.st-top{display:flex}
 .fcard{min-height:0;padding:.75rem .95rem 1rem;border-radius:14px}.ftitle{font-size:1rem}.fbody{font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tick{margin:.7rem -1.2rem 0;padding:.5rem 0}
 .panel{display:block;overflow:visible;padding:1.2rem 1.2rem 1.6rem}.panel .ptop{position:static;justify-content:flex-end;margin-bottom:.8rem}.panel{padding-top:1.2rem!important}.panel .foot{position:static;margin:1.2rem auto 0;padding-bottom:.4rem}.panel .card{margin:0 auto}}
@media(max-height:690px) and (min-width:960px){.cert{display:none}.st-h{font-size:1.7rem}}
@media(prefers-reduced-motion:reduce){.cert,.tick-t,.fbar.run{animation:none!important}.wz-step.on{animation:none}}

/* ============================================================
   v2 — Pages d'authentification : finition pro + chorégraphie
   (lot 43). Un seul moment d'entrée orchestré, le reste des
   animations répond à une action de l'utilisateur.
   ============================================================ */

/* --- 1. Le panneau du formulaire est clair : on lui donne sa
       propre palette d'encre, au lieu d'hériter du thème sombre
       de la page (ce qui donnait des titres gris délavés). --- */
.panel h1,.panel h2{color:#0b1330;font-weight:800;letter-spacing:-.035em}
.panel .sub,.panel .hint,.panel .alt,.panel .meta,.panel .terms,.panel .fb,.panel .rules{color:#5b6785}
.panel .f>label{color:#3b4873;font-weight:600}
.panel .f:focus-within>label{color:#0a55ff}
.panel .meta a,.panel .alt a,.panel .terms a,.panel .acc a{color:#0a55ff;font-weight:700}
.panel .in>.ic,.panel .eye{color:#8d9abd}
.panel .in:focus-within>.ic{color:#0a55ff}
.panel .eye:hover{color:#0b1330}
.panel .in input,.panel .ct,.panel .dd .ds input{background:#fff;border:1px solid #dbe3f5;color:#0b1330;-webkit-text-fill-color:#0b1330}
.panel .in input::placeholder{color:#68758f;-webkit-text-fill-color:#68758f}
.panel .in input:focus,.panel .ct:focus,.panel .ct.open{border-color:#0a55ff;background:#fff;box-shadow:0 0 0 4px rgba(10,85,255,.13)}
.panel .in input:-webkit-autofill{-webkit-text-fill-color:#0b1330;-webkit-box-shadow:0 0 0 40px #fff inset}
.panel .in.ok input{border-color:#13a97a}.panel .in.bad input{border-color:#d93a57}
.panel .fb.bad{color:#c62f4c}.panel .fb.ok{color:#0b7d5a}
.panel .or{color:#5b6785}.panel .or::before,.panel .or::after{background:#e3e9f7}
.panel .gbtn{background:#fff;border:1px solid #dbe3f5;color:#16204a;box-shadow:0 1px 2px rgba(10,30,90,.06)}
.panel .gbtn:hover{background:#f4f7ff;border-color:#b9ccff}
.panel .btn{background:linear-gradient(135deg,#0a55ff,#1b3df0);box-shadow:0 12px 28px -10px rgba(10,85,255,.65)}
.panel .btn:hover:not(:disabled){box-shadow:0 18px 38px -12px rgba(10,85,255,.75)}
.panel .alert{background:#eef3ff;color:#16204a}.panel .alert i{color:#0a55ff}
.panel .alert.err{background:#fff0f3;color:#5a1322}.panel .alert.err i{color:#c62f4c}
.panel .meter i{background:#e3e9f7}
.panel .dd{background:#fff;border-color:#c9d8ff;box-shadow:0 24px 60px -24px rgba(8,24,70,.45)}
.panel .dd li{color:#16204a}.panel .dd li:hover,.panel .dd li.on{background:#eef3ff}
.panel .dd li em{color:#5b6785}

/* --- 2. Le formulaire est centré dans sa colonne : plus de
       grand vide sous le bouton. margin auto = sûr au débordement. --- */
@media(min-width:960px){.panel{padding-top:clamp(3.4rem,8vh,5rem)!important}}
.panel .card{margin-block:auto}
.panel h1{margin-bottom:.5rem}
.panel h1::after{content:'';display:block;width:46px;height:3px;border-radius:3px;margin-top:.55rem;background:linear-gradient(90deg,#0a55ff,#6fa6ff)}

/* --- 3. L'entrée : une seule séquence au chargement. --- */
@keyframes auUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes auLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mk-js .panel .card>*{animation:auUp .62s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(60ms * var(--i,0) + 60ms)}
.mk-js .panel .card>*:nth-child(2){--i:1}.mk-js .panel .card>*:nth-child(3){--i:2}
.mk-js .panel .card>*:nth-child(4){--i:3}.mk-js .panel .card>*:nth-child(5){--i:4}
.mk-js .panel .card>*:nth-child(6){--i:5}.mk-js .panel .card>*:nth-child(n+7){--i:6}
.mk-js .panel h1::after{transform-origin:0 50%;animation:auLine .6s .34s cubic-bezier(.22,1,.36,1) both}
.mk-js .panel .ptop,.mk-js .panel .foot{animation:auUp .6s .5s cubic-bezier(.22,1,.36,1) both}
.mk-js .stage .st-top,.mk-js .st-h,.mk-js .fcard,.mk-js .fdots,.mk-js .tick{animation:auUp .78s cubic-bezier(.22,1,.36,1) both}
.mk-js .stage .st-top{animation-delay:40ms}
.mk-js .st-h{animation-delay:130ms}
.mk-js .fcard{animation-delay:260ms}
.mk-js .fdots{animation-delay:340ms}
.mk-js .tick{animation-delay:480ms}
.mk-js .cert{animation:auUp .85s .3s cubic-bezier(.22,1,.36,1) both,cfloat 6s ease-in-out 1.2s infinite}

/* --- 4. La pub (carte d'annonces) : relais en relief plutôt
       qu'un simple fondu, reflet lent, étiquette qui rebondit. --- */
.st-mid{perspective:1100px}
.fcard{transform-origin:50% 100%;transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1),filter .42s,border-color .3s}
.fcard.out{opacity:0;transform:translateY(-14px) rotateX(9deg) scale(.97);filter:blur(3px)}
.fcard.pre{opacity:0;transform:translateY(16px) rotateX(-9deg) scale(.97);filter:blur(3px);transition:none}
.fcard::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);animation:fSheen 7s ease-in-out infinite;pointer-events:none}
@keyframes fSheen{0%,58%{left:-60%}92%,100%{left:135%}}
.fcard:hover{border-color:rgba(170,200,255,.55)}
@keyframes tagPop{from{opacity:0;transform:translateY(6px) scale(.86)}to{opacity:1;transform:none}}
.ftag.pop{animation:tagPop .45s cubic-bezier(.34,1.45,.64,1) both}
@keyframes txIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.fcard.sw .ftitle{animation:txIn .5s .04s cubic-bezier(.22,1,.36,1) both}
.fcard.sw .fbody{animation:txIn .5s .11s cubic-bezier(.22,1,.36,1) both}
.fcard.sw .fcta{animation:txIn .5s .18s cubic-bezier(.22,1,.36,1) both}
.fcta{transition:transform .25s,border-color .25s}.fcta:hover{transform:translateX(3px);border-bottom-color:#fff}
.tick:hover .tick-t{animation-play-state:paused}

/* --- 5. Le certificat répond au survol (et met sa flottaison en pause). --- */
@media(hover:hover){
 .cert:hover{animation-play-state:paused}
 .cert:hover .cert-in{transform:rotate(-1.5deg) scale(1.05);box-shadow:0 34px 70px -18px rgba(0,0,0,.72)}
}

/* --- 6. L'offre en cours, côté formulaire : une seule ligne,
       alimentée par le même fil d'annonces que la scène. --- */
.apx{display:flex;align-items:center;gap:.6rem;position:relative;overflow:hidden;margin-top:clamp(.9rem,2.4vh,1.5rem);padding:.72rem .95rem;border-radius:14px;border:1px solid #e3e9f7;background:linear-gradient(135deg,#f4f7ff,#fff);font-size:.84rem;color:#3b4873;transition:border-color .25s,transform .25s,box-shadow .25s}
.apx:hover{border-color:#b9ccff;transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(10,85,255,.6)}
.apx[hidden]{display:none}
.apx-d{width:7px;height:7px;border-radius:50%;background:#0a55ff;flex:0 0 auto;animation:apxD 1.9s ease-out infinite}
@keyframes apxD{0%{box-shadow:0 0 0 0 rgba(10,85,255,.5)}100%{box-shadow:0 0 0 9px rgba(10,85,255,0)}}
.apx-g{color:#0a55ff;font-weight:800;flex:0 0 auto}
.apx-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apx-a{font-style:normal;font-weight:700;color:#0a55ff;flex:0 0 auto}.apx-a::after{content:' \2192'}
.apx-a[hidden]{display:none}
@keyframes apxSw{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.apx.sw .apx-g,.apx.sw .apx-t,.apx.sw .apx-a{animation:apxSw .5s cubic-bezier(.22,1,.36,1) both}
@media(max-width:959px){.apx{margin-top:1rem}}
@media(max-width:560px){.apx{flex-wrap:wrap;row-gap:.2rem}.apx-t{flex:1 0 100%;white-space:normal;order:4}.apx-a{margin-left:auto}}

@media(prefers-reduced-motion:reduce){
 .mk-js .panel .card>*,.mk-js .panel .ptop,.mk-js .panel .foot,.mk-js .stage .st-top,.mk-js .st-h,.mk-js .fcard,.mk-js .fdots,.mk-js .tick,.mk-js .cert{opacity:1!important;animation:none!important}
 .fcard::after,.ftag.pop,.fcard.sw .ftitle,.fcard.sw .fbody,.fcard.sw .fcta,.apx.sw .apx-g,.apx.sw .apx-t,.apx.sw .apx-a,.apx-d{animation:none!important}
 .mk-js .panel h1::after{animation:none!important}
}