/* LA PORTE DE MOGAHUB — 22/10/2026. Sombre par choix : c'est la chambre forte, pas un écran de travail. */
@property --teinte{syntax:'<color>';inherits:true;initial-value:rgba(0,0,0,0)}
:root{
  --fond:#05060b;--texte:#f3f5fa;--doux:#a3abbd;--pale:#666e82;
  --verre:rgba(255,255,255,.045);--verre-fort:rgba(255,255,255,.085);
  --bord:rgba(255,255,255,.09);--bord-fort:rgba(255,255,255,.2);
  --rouge:#e4032e;--rouge-vif:#ff2d55;--violet:#7c3aed;--cyan:#22d3ee;--vert:#34d399;--ambre:#fbbf24;
  --etat:var(--vert);
  --police:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ressort:cubic-bezier(.2,.9,.25,1.15);
  --glisse:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--fond);color:var(--texte);font-family:var(--police);overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none;
  --teinte:rgba(0,0,0,0);transition:--teinte 1.2s ease}
body[data-vue="inconnu"],body[data-vue="demande"]{--teinte:rgba(251,191,36,.14)}
body[data-vue="verrou"]{--teinte:rgba(255,45,85,.17)}
body[data-vue="cle"],body[data-vue="perso"],body[data-vue="bienvenue"]{--teinte:rgba(34,211,238,.13)}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid rgba(255,45,85,.8);outline-offset:3px}
button:disabled{opacity:.55;cursor:default}

/* ── le décor ── */
#ciel{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.aurore{position:fixed;inset:-20%;z-index:0;filter:blur(80px) saturate(135%);pointer-events:none}
.aurore i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurore i:nth-child(1){width:48vw;height:48vw;left:24%;top:6%;background:radial-gradient(circle,rgba(228,3,46,.44),transparent 62%);animation:derive1 26s ease-in-out infinite alternate}
.aurore i:nth-child(2){width:42vw;height:42vw;left:50%;top:30%;background:radial-gradient(circle,rgba(124,58,237,.34),transparent 62%);animation:derive2 33s ease-in-out infinite alternate}
.aurore i:nth-child(3){width:38vw;height:38vw;left:6%;top:42%;background:radial-gradient(circle,rgba(34,211,238,.15),transparent 62%);animation:derive3 39s ease-in-out infinite alternate}
@keyframes derive1{to{transform:translate(12vw,9vh) scale(1.15)}}
@keyframes derive2{to{transform:translate(-14vw,-8vh) scale(.9)}}
@keyframes derive3{to{transform:translate(10vw,-12vh) scale(1.2)}}
.sol{position:fixed;left:-60%;right:-60%;bottom:-6vh;height:46vh;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:72px 72px;transform:perspective(380px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.95),transparent 80%);mask-image:linear-gradient(to top,rgba(0,0,0,.95),transparent 80%);
  animation:avance 7s linear infinite}
@keyframes avance{to{background-position:0 72px,0 0}}
.teinte{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(62% 58% at 50% 40%,var(--teinte),transparent 72%)}
.teinte::after{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(0,0,0,.62))}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ── la pastille d'état ── */
.statut{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:10px;padding:8px 15px 8px 12px;border-radius:999px;
  background:rgba(10,12,20,.55);border:1px solid var(--bord);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:12.5px;color:var(--doux);white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.statut i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--etat);box-shadow:0 0 10px var(--etat);transition:background .5s,box-shadow .5s;position:relative}
.statut i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--etat);animation:pouls 2.2s ease-out infinite}
@keyframes pouls{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}

/* ── les vues ── */
.scene{position:relative;z-index:5;height:100%}
.vue{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px 64px;
  opacity:0;visibility:hidden;transform:translateY(22px) scale(.98);filter:blur(12px);
  transition:opacity .45s var(--glisse),transform .6s var(--glisse),filter .45s var(--glisse),visibility 0s .6s}
body[data-vue="mur"] #v-mur,body[data-vue="pin"] #v-pin,body[data-vue="cle"] #v-cle,body[data-vue="inconnu"] #v-inconnu,
body[data-vue="demande"] #v-demande,body[data-vue="verrou"] #v-verrou,body[data-vue="perso"] #v-perso,
body[data-vue="bienvenue"] #v-bienvenue,body[data-vue="attente"] #v-attente{
  opacity:1;visibility:visible;transform:none;filter:none;
  transition:opacity .6s var(--glisse) .1s,transform .9s var(--glisse) .1s,filter .6s var(--glisse) .1s,visibility 0s}
.h1{font-size:clamp(34px,4.4vw,54px);font-weight:700;letter-spacing:-.035em;line-height:1.04;text-align:center;
  background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffd1da 50%,#fff 60%,#c9cfdc 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:reflet 5s ease-in-out infinite}
@keyframes reflet{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
.h2{font-size:clamp(26px,3vw,32px);font-weight:700;letter-spacing:-.028em;text-align:center}
.p{color:var(--doux);font-size:15px;margin-top:10px;text-align:center;max-width:440px;line-height:1.55}
.surtitre{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--pale);font-weight:650;margin-bottom:12px}
.soustitre{margin-top:10px;color:var(--doux);font-size:15.5px;text-align:center}
.lien{margin-top:20px;font-size:13.5px;color:var(--pale);padding:6px 10px;border-radius:8px;transition:color .2s}
.lien:hover{color:var(--texte)}
.note{min-height:20px;margin-top:14px;font-size:13.5px;color:#ff8da0;text-align:center;max-width:420px}
.note.douce{color:var(--doux)}

/* l'orbe : le cadran de la chambre forte autour du logo */
.orbe{position:relative;width:136px;height:136px;display:grid;place-items:center;margin-bottom:20px;flex:none}
.orbe::before{content:"";position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle,rgba(228,3,46,.38),transparent 64%);filter:blur(12px);animation:respire 4.6s ease-in-out infinite}
@keyframes respire{50%{transform:scale(1.14);opacity:.72}}
.cadran{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cadran circle{fill:none;transform-box:fill-box;transform-origin:center}
.cadran .c1{stroke:rgba(255,255,255,.24);stroke-width:1.3;stroke-dasharray:1.2 7.4;animation:tourne 70s linear infinite}
.cadran .c2{stroke:url(#gArc);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:96 34 16 34 64 46;animation:tourne 16s linear infinite reverse;filter:drop-shadow(0 0 6px rgba(255,45,85,.7))}
.cadran .c3{stroke:rgba(255,255,255,.1);stroke-width:1}
@keyframes tourne{to{transform:rotate(360deg)}}
.logo{position:relative;width:66px;height:66px;border-radius:19px;background:linear-gradient(160deg,#1a1b22,#050507);display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.07);font-weight:800;font-size:35px;letter-spacing:-.05em;line-height:1}
.logo span{color:#fff;transform:translateY(-3px);white-space:nowrap}.logo b{color:var(--rouge)}
.logo.petit{width:46px;height:46px;border-radius:14px;font-size:24px}

/* le mur des profils */
.recherche{margin:26px 0 18px;width:min(560px,100%);display:flex;align-items:center;gap:12px;height:52px;padding:0 16px 0 18px;border-radius:16px;
  background:var(--verre);border:1px solid var(--bord);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:border-color .25s,box-shadow .25s,background .25s;flex:none}
.recherche:focus-within{border-color:rgba(255,45,85,.55);box-shadow:0 0 0 4px rgba(228,3,46,.14),0 12px 40px rgba(228,3,46,.14);background:var(--verre-fort)}
.recherche svg{width:18px;height:18px;flex:none}
.recherche input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--texte);font:inherit;font-size:15.5px;user-select:text}
.recherche input::placeholder{color:var(--pale)}
.mur{width:min(840px,100%);max-height:min(46vh,440px);overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;padding:8px 8px 22px;
  grid-auto-rows:max-content;min-height:150px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent);mask-image:linear-gradient(to bottom,#000 86%,transparent)}
.carte{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:22px 10px 17px;border-radius:20px;background:var(--verre);border:1px solid var(--bord);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s var(--glisse),background .25s,box-shadow .3s;animation:monte .75s var(--glisse) backwards;animation-delay:calc(var(--i) * 42ms + .12s);overflow:hidden}
.carte>*{flex:none}
.carte::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(230px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.13),transparent 45%);opacity:0;transition:opacity .3s}
.carte::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,45,85,.8),rgba(124,58,237,.55) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.carte:hover,.carte:focus-visible{background:var(--verre-fort);box-shadow:0 20px 50px rgba(0,0,0,.5);outline:none}
.carte:hover::before,.carte:hover::after,.carte:focus-visible::after{opacity:1}
.carte:active{transform:perspective(800px) scale(.97)}
@keyframes monte{from{opacity:0;transform:translateY(26px) scale(.95)}}
.ava{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:20px;letter-spacing:.02em;color:#fff;overflow:hidden;
  background:linear-gradient(140deg,var(--c1,#ff2d55),var(--c2,#7c3aed));box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nom{font-weight:650;font-size:15px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role{font-size:12.5px;color:var(--pale);position:relative}
.badge{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.32)}
.badge svg{width:12px;height:12px}
.vide{grid-column:1/-1;text-align:center;color:var(--pale);padding:30px 0}

/* le code */
.ava-xl{position:relative;width:156px;height:156px;display:grid;place-items:center;margin-bottom:14px;flex:none}
.ava-xl .ava{width:106px;height:106px;font-size:34px}
.anneau{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.anneau circle{fill:none;stroke-width:4;stroke-linecap:round}
.anneau .piste{stroke:rgba(255,255,255,.06)}
.anneau .seg{stroke:rgba(255,255,255,.14);transition:stroke .25s,filter .25s}
.anneau .seg.on{stroke:var(--rouge-vif);filter:drop-shadow(0 0 6px rgba(255,45,85,.95))}
#v-pin.ok .anneau .seg{stroke:var(--vert);filter:drop-shadow(0 0 8px rgba(52,211,153,.95))}
#v-pin.non .anneau .seg{stroke:#ff4d6d}
#v-pin.neuf .anneau .seg.on{stroke:var(--cyan);filter:drop-shadow(0 0 6px rgba(34,211,238,.95))}
.qui{font-size:24px;font-weight:700;letter-spacing:-.02em;text-align:center}
.points{display:flex;gap:16px;margin:22px 0 10px}
.points i{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);transition:all .28s var(--ressort)}
.points i.on{background:#fff;border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.75);transform:scale(1.18)}
#v-pin.ok .points i{background:var(--vert);border-color:var(--vert);box-shadow:0 0 18px rgba(52,211,153,.85)}
#v-pin.non .points{animation:secoue .5s}
@keyframes secoue{15%,55%{transform:translateX(-11px)}35%,75%{transform:translateX(11px)}}
.msg{min-height:21px;font-size:13.5px;color:var(--doux);margin-bottom:20px;transition:color .25s;text-align:center;max-width:380px}
#v-pin.non .msg{color:#ff6b81}#v-pin.ok .msg{color:var(--vert)}#v-pin.neuf .msg{color:#a5f3fc}
.pave{display:grid;grid-template-columns:repeat(3,76px);gap:14px 24px}
.touche{width:76px;height:76px;border-radius:50%;background:var(--verre);border:1px solid var(--bord);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:27px;font-weight:450;display:grid;place-items:center;position:relative;overflow:hidden;transition:background .2s,transform .12s,border-color .2s,box-shadow .2s}
.touche:hover{background:var(--verre-fort);border-color:var(--bord-fort)}
.touche:active,.touche.appui{transform:scale(.9);background:rgba(255,255,255,.16);box-shadow:0 0 24px rgba(255,255,255,.15)}
.touche.texte{font-size:13px;color:var(--doux);background:none;border-color:transparent}
.touche.texte:hover{color:#fff;background:var(--verre)}
.touche svg{width:24px;height:24px}
.onde{position:absolute;border-radius:50%;background:rgba(255,255,255,.32);transform:scale(0);animation:onde .55s ease-out forwards;pointer-events:none}
@keyframes onde{to{transform:scale(2.4);opacity:0}}

/* la clé d'accès */
.empreinte{position:relative;width:176px;height:176px;display:grid;place-items:center;margin-bottom:26px;flex:none}
.empreinte::before{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.3),transparent 64%);filter:blur(10px);animation:respire 3.2s ease-in-out infinite}
.empreinte .r1,.empreinte .r2{position:absolute;border-radius:50%}
.empreinte .r1{inset:0;border:1px solid rgba(34,211,238,.38);background:radial-gradient(circle,rgba(8,20,30,.6),rgba(5,6,11,.2))}
.empreinte .r2{inset:-15px;border:1px dashed rgba(34,211,238,.2);animation:tourne 22s linear infinite}
.empreinte svg{position:relative;width:96px;height:110px;overflow:visible}
.empreinte path{fill:none;stroke:var(--cyan);stroke-width:2.7;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(34,211,238,.75));transition:stroke .4s,filter .4s}
.balai{position:absolute;left:20%;right:20%;height:2px;top:18%;border-radius:2px;background:linear-gradient(90deg,transparent,#cffafe,transparent);box-shadow:0 0 22px 5px rgba(34,211,238,.6);opacity:0}
.scan .balai{opacity:1;animation:balaie .9s ease-in-out infinite alternate}
@keyframes balaie{from{top:16%}to{top:82%}}
.ok .empreinte path{stroke:var(--vert);filter:drop-shadow(0 0 7px rgba(52,211,153,.95))}
.ok .empreinte .r1{border-color:rgba(52,211,153,.6)}
.ok .balai{opacity:0}

.actions{display:flex;flex-direction:column;gap:12px;width:min(340px,100%);margin-top:28px}
.bouton{position:relative;height:54px;border-radius:16px;font-weight:620;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;transition:transform .15s,box-shadow .3s,background .3s,border-color .3s}
.bouton svg{width:19px;height:19px;flex:none}
.bouton.plein{background:linear-gradient(135deg,#ff2d55,#e4032e 55%,#a8021d);box-shadow:0 14px 36px rgba(228,3,46,.38),inset 0 1px 0 rgba(255,255,255,.28)}
.bouton.plein::after,.bouton.cyan::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:eclair 4.5s ease-in-out infinite}
@keyframes eclair{0%,62%{left:-60%}82%,100%{left:130%}}
.bouton.plein:hover{box-shadow:0 18px 48px rgba(228,3,46,.55),inset 0 1px 0 rgba(255,255,255,.32);transform:translateY(-1px)}
.bouton.cyan{background:linear-gradient(135deg,#22d3ee,#0891b2);color:#031418;box-shadow:0 14px 36px rgba(34,211,238,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.bouton.cyan:hover{box-shadow:0 18px 48px rgba(34,211,238,.45);transform:translateY(-1px)}
.bouton.verre{background:var(--verre);border:1px solid var(--bord);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bouton.verre:hover{background:var(--verre-fort);border-color:var(--bord-fort)}
.bouton:active{transform:scale(.98)}

/* l'appareil inconnu : le radar */
.radar{position:relative;width:232px;height:232px;border-radius:50%;margin-bottom:28px;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle,rgba(251,191,36,.07),transparent 70%),repeating-radial-gradient(circle,transparent 0 38px,rgba(255,255,255,.075) 38px 39px);border:1px solid rgba(255,255,255,.11);
  box-shadow:0 0 60px rgba(251,191,36,.08),inset 0 0 40px rgba(0,0,0,.5)}
.radar .balayage{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg 284deg,rgba(251,191,36,.06) 300deg,rgba(251,191,36,.5) 360deg);animation:tourne 3.2s linear infinite}
.radar .croix{position:absolute;inset:0;border-radius:50%;background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)) center/1px 100% no-repeat,linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.06)) center/100% 1px no-repeat}
.radar .blip{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ambre);box-shadow:0 0 12px var(--ambre);opacity:0;animation:blip 3.2s ease-out infinite}
.radar .b1{left:28%;top:32%;animation-delay:.35s}.radar .b2{left:68%;top:62%;animation-delay:1.5s}.radar .b3{left:58%;top:22%;animation-delay:2.4s}
@keyframes blip{0%,6%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.25)}55%,100%{opacity:0;transform:scale(1)}}

/* la demande : le numéro à faire correspondre */
.orbite{position:relative;width:250px;height:250px;display:grid;place-items:center;margin-bottom:22px;flex:none}
.orbite svg{position:absolute;inset:0;width:100%;height:100%;animation:tourne 26s linear infinite}
.orbite circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 9}
.orbite circle.fin{stroke-dasharray:1 6;opacity:.6}
.orbite .sat{position:absolute;inset:0;animation:tourne 4.2s linear infinite}
.orbite .sat i{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ambre);box-shadow:0 0 16px 3px rgba(251,191,36,.75)}
.numero{font-size:122px;font-weight:750;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;perspective:600px;
  background:linear-gradient(180deg,#fff 25%,#aab2c4);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 34px rgba(251,191,36,.25))}
.numero span{display:inline-block;animation:chiffre 1s var(--ressort) backwards}
.numero span+span{animation-delay:.14s}
@keyframes chiffre{from{opacity:0;transform:translateY(34px) rotateX(75deg);filter:blur(8px)}}
#v-demande.accorde .numero{background:linear-gradient(180deg,#d1fae5,#34d399);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 10px 34px rgba(52,211,153,.5))}
#v-demande.accorde .sat i{background:var(--vert);box-shadow:0 0 16px 3px rgba(52,211,153,.8)}
.attente{display:flex;gap:8px;margin-top:20px;height:14px;align-items:center}
.attente i{width:7px;height:7px;border-radius:50%;background:var(--doux);animation:saute 1.2s ease-in-out infinite}
.attente i:nth-child(2){animation-delay:.15s}.attente i:nth-child(3){animation-delay:.3s}
@keyframes saute{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-8px);opacity:1}}
#v-demande.accorde .attente,#v-demande.accorde .lien,#v-demande.fini .attente{visibility:hidden}

/* le profil protégé */
.compte{position:relative;width:196px;height:196px;display:grid;place-items:center;margin-bottom:26px;flex:none}
.compte svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.compte circle{fill:none;stroke-width:5;stroke-linecap:round}
.compte .piste{stroke:rgba(255,255,255,.07)}
.compte .reste{stroke:var(--rouge-vif);filter:drop-shadow(0 0 9px rgba(255,45,85,.75));transition:stroke-dashoffset 1s linear}
.compte .dedans{display:flex;flex-direction:column;align-items:center;gap:6px}
.compte .dedans svg{position:static;width:26px;height:26px;transform:none}
.compte .temps{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* le QR du poste : le téléphone confirme */
body[data-vue="tel"],body[data-vue="ok"]{--teinte:rgba(34,211,238,.13)}
body[data-vue="tel"] #v-tel,body[data-vue="ok"] #v-ok{opacity:1;visibility:visible;transform:none;filter:none;
  transition:opacity .6s var(--glisse) .1s,transform .9s var(--glisse) .1s,filter .6s var(--glisse) .1s,visibility 0s}
.qr-cadre{position:relative;width:256px;height:256px;display:grid;place-items:center;margin-bottom:24px;flex:none}
.qr-cadre::before{content:"";position:absolute;inset:-26px;border-radius:40px;background:radial-gradient(circle,rgba(34,211,238,.28),transparent 66%);filter:blur(12px);animation:respire 3.4s ease-in-out infinite}
.qr-carte{position:relative;width:212px;height:212px;border-radius:20px;background:#fff;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4)}
.qr-carte svg{width:100%;height:100%;display:block}
.qr-cadre i{position:absolute;width:34px;height:34px;border:3px solid var(--cyan);filter:drop-shadow(0 0 8px rgba(34,211,238,.8));animation:coin 2.4s var(--glisse) infinite alternate}
.qr-cadre .c1{top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:14px}
.qr-cadre .c2{top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:14px}
.qr-cadre .c3{bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:14px}
.qr-cadre .c4{bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:14px}
@keyframes coin{to{transform:scale(.92)}}
.qr-balai{position:absolute;left:30px;right:30px;height:2px;top:30px;border-radius:2px;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 18px 4px rgba(34,211,238,.55);animation:balaieqr 2.2s ease-in-out infinite alternate}
@keyframes balaieqr{to{top:224px}}
#v-tel.ok .qr-carte{box-shadow:0 0 0 3px var(--vert),0 0 70px rgba(52,211,153,.6)}
#v-tel.ok .qr-cadre i{border-color:var(--vert)}
#v-tel.ok .qr-balai,#v-tel.ok .attente{visibility:hidden}
.tel-alt{margin-top:0;padding:0 22px}   /* 22/10 : le texte ne touche plus les bords (« Mon code, puis mon téléphone ») */
#v-ok.fait .actions{display:none}

/* la chambre forte */
.coffre{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
.coffre.actif{display:block}
.battant{position:absolute;top:0;bottom:0;width:50.4%;transition:transform .5s cubic-bezier(.77,0,.18,1);
  background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 35%),repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px),linear-gradient(180deg,#15161c,#07080b)}
.battant.g{left:0;transform:translateX(-103%);box-shadow:inset -1px 0 0 rgba(255,45,85,.75),22px 0 70px rgba(228,3,46,.3)}
.battant.d{right:0;transform:translateX(103%);box-shadow:inset 1px 0 0 rgba(255,45,85,.75),-22px 0 70px rgba(228,3,46,.3)}
.coffre.ferme .battant{transform:none}
.serrure{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.55);
  background:radial-gradient(circle at 50% 32%,#272930,#0a0b0f 72%);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 0 70px rgba(228,3,46,.4),inset 0 2px 0 rgba(255,255,255,.09);
  transition:opacity .25s,transform .45s var(--ressort),box-shadow .4s}
.coffre.ferme .serrure{opacity:1;transform:none;transition-delay:.3s}
.serrure svg{width:92px;height:92px;transition:transform .55s var(--ressort);overflow:visible}
.coffre.tourne .serrure svg{transform:rotate(220deg)}
.coffre.tourne .serrure{box-shadow:0 0 0 1px rgba(52,211,153,.5),0 0 90px rgba(52,211,153,.5),inset 0 2px 0 rgba(255,255,255,.09)}

.pied{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;font-size:12px;color:var(--pale);display:flex;align-items:center;gap:8px;white-space:nowrap}
.pied svg{width:13px;height:13px}
.vol{position:fixed;z-index:70;margin:0;pointer-events:none;transition:left .6s var(--glisse),top .6s var(--glisse),width .6s var(--glisse),height .6s var(--glisse),font-size .6s var(--glisse)}

@media (max-height:800px){
  .orbe{width:106px;height:106px;margin-bottom:12px}.orbe .logo{width:54px;height:54px;border-radius:16px;font-size:29px}
  .surtitre{margin-bottom:6px}.h1{font-size:40px}.soustitre{margin-top:6px}.recherche{margin:18px 0 12px;height:48px}
  .ava-xl{width:130px;height:130px;margin-bottom:8px}.ava-xl .ava{width:88px;height:88px;font-size:29px}.points{margin:14px 0 8px}.msg{margin-bottom:12px}
  .pave{gap:10px 22px}.touche{width:66px;height:66px;font-size:24px}
  .empreinte,.compte{width:150px;height:150px;margin-bottom:18px}.radar{width:190px;height:190px;margin-bottom:20px}.orbite{width:200px;height:200px}.numero{font-size:100px}
}
@media (max-width:640px){
  .mur{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px;max-height:50vh}
  .carte{padding:18px 8px 14px}.ava{width:54px;height:54px;font-size:18px}
  .pave{grid-template-columns:repeat(3,70px);gap:12px 20px}.touche{width:70px;height:70px}
  .numero{font-size:96px}.orbite{width:210px;height:210px}
  .statut{font-size:11.5px}.pied{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  #ciel,.sol{display:none}
}