:root{--nuit:#080D1C;--nuit-2:#0E1630;--verre:rgba(18,26,52,.62);--verre-bord:rgba(160,180,255,.16);--texte:#E8ECF7;--texte-2:#9AA7C7;--indigo:#401983;--bleu:#16288C;--azur:#015DA8;--turquoise:#03A193;--degrade:linear-gradient(90deg,#7C4DDB,#3E63E0,#1E8BD6,#03A193)}
*{box-sizing:border-box}
body.entree{margin:0;min-height:100vh;background:var(--nuit);color:var(--texte);font-family:"IBM Plex Sans",system-ui,sans-serif;overflow-x:hidden;position:relative}
.aurore{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.aurore i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.aurore .b1{width:640px;height:640px;left:-160px;top:-180px;background:radial-gradient(circle,#4B1FA3 0,transparent 68%);animation:flotte1 22s ease-in-out infinite alternate}
.aurore .b2{width:720px;height:720px;right:-220px;top:20%;background:radial-gradient(circle,#0A5CB8 0,transparent 68%);animation:flotte2 26s ease-in-out infinite alternate}
.aurore .b3{width:560px;height:560px;left:30%;bottom:-260px;background:radial-gradient(circle,#03A193 0,transparent 68%);opacity:.38;animation:flotte3 30s ease-in-out infinite alternate}
@keyframes flotte1{to{transform:translate(180px,140px) scale(1.15)}}
@keyframes flotte2{to{transform:translate(-200px,-120px) scale(1.1)}}
@keyframes flotte3{to{transform:translate(160px,-90px) scale(1.2)}}
.grille-fond{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(150,170,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,170,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 40% 35%,#000 0,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 40% 35%,#000 0,transparent 75%)}
.ecran{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:56px;align-items:center;padding:48px clamp(24px,5vw,88px);max-width:1500px;margin:0 auto}
.ecran .marque,.carte-entree .marque{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:0;margin:0}
.marque-nom{font-weight:600;font-size:20px;letter-spacing:.14em;color:#fff}
.marque-trait{width:32px;height:3px;border-radius:2px;background:var(--degrade)}
.marque-sous{font-size:13px;color:var(--texte-2)}
.accroche{font-size:clamp(34px,4.2vw,58px);line-height:1.06;font-weight:600;letter-spacing:-.02em;margin:28px 0 18px;color:#fff;animation:monte .9s .1s both cubic-bezier(.2,.7,.2,1)}
.degrade{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:glisse 8s linear infinite}
@keyframes glisse{to{background-position:200% 0}}
.chapeau{max-width:560px;font-size:17px;line-height:1.6;color:var(--texte-2);margin:0 0 30px;animation:monte .9s .25s both cubic-bezier(.2,.7,.2,1)}
@keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.maquette{max-width:640px;border-radius:14px;background:var(--verre);border:1px solid var(--verre-bord);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.02) inset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;animation:monte 1s .4s both cubic-bezier(.2,.7,.2,1);transform:perspective(1400px) rotateY(-4deg) rotateX(2deg)}
.m-barre{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--verre-bord);background:rgba(255,255,255,.03)}
.m-barre span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.m-barre em{margin-left:12px;font-style:normal;font-size:12px;color:var(--texte-2);letter-spacing:.02em}
.m-corps{padding:16px}
.m-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-kpi{padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--verre-bord)}
.m-kpi small{display:block;font-size:11px;color:var(--texte-2);margin-bottom:6px}
.m-kpi strong{display:block;font-size:24px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.m-var{display:inline-block;margin-top:4px;font-size:11px;font-weight:600;color:#5FE0CF}
.m-neg{color:#FFB366}
.m-kpi.alerte{border-color:rgba(255,179,102,.35)}
.m-bas{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;margin-top:10px}
.m-graphe,.m-chat{padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--verre-bord);min-height:150px}
.m-graphe small,.m-chat small{display:block;font-size:11px;color:var(--texte-2);margin-bottom:8px}
.m-barres{display:flex;align-items:flex-end;gap:7px;height:104px}
.m-barres i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#5E7BFF,#2B3F9E);transform-origin:bottom;transform:scaleY(0);animation:pousse .8s forwards cubic-bezier(.2,.8,.2,1)}
.m-barres i:nth-child(1){height:38%;animation-delay:.9s}.m-barres i:nth-child(2){height:52%;animation-delay:1s}.m-barres i:nth-child(3){height:44%;animation-delay:1.09s}.m-barres i:nth-child(4){height:63%;animation-delay:1.18s}
.m-barres i:nth-child(5){height:58%;animation-delay:1.27s}.m-barres i:nth-child(6){height:74%;animation-delay:1.36s}.m-barres i:nth-child(7){height:69%;animation-delay:1.45s}.m-barres i:nth-child(8){height:92%;animation-delay:1.54s}
.m-barres i.dernier{background:linear-gradient(180deg,#34D4C0,#03A193);box-shadow:0 0 22px rgba(3,161,147,.5)}
@keyframes pousse{to{transform:scaleY(1)}}
.m-fil{display:flex;flex-direction:column;gap:6px}
.bulle{max-width:92%;padding:7px 10px;border-radius:10px;font-size:11.5px;line-height:1.4;animation:apparait .4s both}
.bulle.moi{align-self:flex-end;background:rgba(94,123,255,.25);color:#DDE5FF}
.bulle.agent{align-self:flex-start;background:rgba(255,255,255,.07);color:var(--texte)}
.bulle.saisie{display:flex;gap:4px;align-items:center;padding:9px 11px}
.bulle.saisie i{width:5px;height:5px;border-radius:50%;background:var(--texte-2);animation:point 1s infinite}
.bulle.saisie i:nth-child(2){animation-delay:.15s}.bulle.saisie i:nth-child(3){animation-delay:.3s}
@keyframes point{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.m-note{margin:10px 2px 0;font-size:10.5px;color:var(--texte-2);letter-spacing:.04em}
.atouts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--texte-2);animation:monte 1s .6s both}
.atouts li{display:flex;align-items:center;gap:9px}
.pastille-atout{width:8px;height:8px;border-radius:50%;background:var(--degrade);box-shadow:0 0 12px rgba(3,161,147,.7)}

.carte-entree{width:100%;padding:34px;border-radius:16px;background:var(--verre);border:1px solid var(--verre-bord);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:monte 1s .3s both cubic-bezier(.2,.7,.2,1)}
.carte-connexion{max-width:440px;justify-self:center;position:relative}
.carte-connexion::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;background:var(--degrade);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.carte-centre{max-width:480px;margin:40px auto;position:relative;z-index:1}
.carte-entree h1,.carte-entree h2{font-size:24px;font-weight:600;margin:0 0 4px;color:#fff}
.carte-entree .marque{margin-bottom:18px}
.carte-entree .aide{color:var(--texte-2);font-size:14px;margin:4px 0 18px;overflow-wrap:anywhere}
.carte-entree label{display:block;font-size:13.5px;font-weight:500;margin:16px 0 6px;color:var(--texte)}
.carte-entree input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid rgba(160,180,255,.22);border-radius:9px;background:rgba(6,10,24,.55);color:#fff;transition:border-color .15s,box-shadow .15s}
.carte-entree input:focus{outline:none;border-color:#5E7BFF;box-shadow:0 0 0 3px rgba(94,123,255,.25)}
.bouton-entree{margin-top:26px;width:100%;padding:13px 16px;font:inherit;font-weight:600;font-size:16px;color:#fff;background:linear-gradient(90deg,#5B3FD0,#2F54D6,#0A7BC4);border:0;border-radius:9px;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s;box-shadow:0 10px 30px rgba(47,84,214,.35)}
.bouton-entree:hover{transform:translateY(-1px);filter:brightness(1.08)}
.bouton-entree:disabled{opacity:.6;cursor:wait;transform:none}
.message{margin:16px 0 0;font-size:14px;color:#FF8F85}
.message.ok{color:#5FE0CF}
.pied-carte{margin:22px 0 0;font-size:12.5px;color:var(--texte-2);text-align:center}
.etapes{padding-left:20px;font-size:14px;color:var(--texte-2)}
.qr{display:flex;justify-content:center;margin:10px 0}
.qr svg{width:200px;height:200px;background:#fff;border-radius:10px;padding:4px}
code{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.06em;color:#fff}
a.lien{color:#8FB0FF}
.logo-contour{display:block;width:150px;height:auto;opacity:.95;filter:drop-shadow(0 0 14px rgba(94,123,255,.25))}
.carte-centre .logo-contour{width:110px}
.ecran .marque-scene{align-items:flex-end;gap:18px}
.etape{animation:entre .45s both cubic-bezier(.2,.7,.2,1)}
.etape[hidden]{display:none}
@keyframes entre{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.champ-mdp{position:relative}
.champ-mdp input{padding-right:92px}
.voir{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#8FB0FF;font:inherit;font-size:13px;cursor:pointer;padding:6px 8px;border-radius:6px}
.voir:hover{background:rgba(143,176,255,.12)}
.qui{margin:6px 0 0;font-size:14px;color:var(--texte-2);overflow-wrap:anywhere}
.qui strong{color:#fff;font-weight:500}
.code-saisie{font-size:30px!important;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;padding:14px 14px 14px calc(14px + .5em)!important}
.code-saisie::placeholder{color:rgba(160,180,255,.35)}
.aide-code{margin:8px 0 0;font-size:12.5px;color:var(--texte-2);text-align:center}
.retour{display:block;margin:18px auto 0;background:none;border:0;color:var(--texte-2);font:inherit;font-size:13.5px;cursor:pointer}
.retour:hover{color:#fff;text-decoration:underline}
.secoue{animation:secoue .4s}
@keyframes secoue{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.chargement .bouton-entree,.chargement .code-saisie{opacity:.6}

@media (max-width:980px){
  .ecran{grid-template-columns:1fr;gap:28px;padding:28px 20px 40px}
  .scene{order:2}
  .carte-connexion{order:1;max-width:520px}
  .maquette{transform:none}
  .accroche{margin-top:8px}
}
@media (max-width:560px){
  .m-kpis{grid-template-columns:1fr 1fr 1fr;gap:6px}.m-kpi{padding:8px}.m-kpi strong{font-size:17px}
  .m-bas{grid-template-columns:1fr}
  .carte-entree{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .m-barres i{transform:none}
}