/* ═══════════════ Séquence de démarrage / verrouillage ═══════════════ */
#boot,#lock,#welcome,#shut,#off{position:fixed;inset:0;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center}
#boot,#shut{background:#000;color:#fff;transition:opacity .5s;align-items:center;justify-content:center;padding:0}
#boot .blogo{width:min(200px,60vw);height:auto;margin:0 auto 28px;animation:logoPop 1.1s cubic-bezier(.2,1.4,.3,1) both;display:flex;justify-content:center}
#boot .blogo img,#off-logo img{width:100%;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 22px rgba(0,170,255,.45));}
#off-logo{width:min(180px,60vw);height:auto;margin:0 auto}
@media (max-width:720px){
  #boot .blogo{width:min(150px,55vw);margin-bottom:36px}
}
@keyframes logoPop{0%{opacity:0;transform:scale(.4) translateY(30px)}60%{opacity:1;transform:scale(1.08) translateY(0)}100%{opacity:1;transform:scale(1)}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(255,210,40,.4)) drop-shadow(0 10px 20px rgba(0,0,0,.5))}50%{filter:drop-shadow(0 0 28px rgba(255,220,60,.85)) drop-shadow(0 16px 30px rgba(0,0,0,.7))}}
.spinner{position:relative;width:38px;height:38px;animation:spin 1.9s linear infinite}
.spinner i{position:absolute;inset:0;animation:orbit 2.3s cubic-bezier(.5,.15,.5,.85) infinite}
.spinner i::after{content:"";position:absolute;top:0;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor}
.spinner i:nth-child(2){animation-delay:.09s}.spinner i:nth-child(3){animation-delay:.18s}
.spinner i:nth-child(4){animation-delay:.27s}.spinner i:nth-child(5){animation-delay:.36s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

#lock{z-index:610;background:#000;color:#fff;transition:opacity .45s;justify-content:center;padding:24px 16px;overflow-y:auto;gap:28px}
#lock .lwall{position:absolute;inset:0;z-index:-1}
#lock .lwall::after{content:"";position:absolute;inset:0;background:rgba(0,0,20,.18)}
#l-time{font-size:clamp(36px,8vh,88px);font-weight:600;letter-spacing:-2px;text-shadow:0 2px 22px rgba(0,0,0,.4);line-height:1}
#l-date{font-size:clamp(14px,2.6vh,22px);font-weight:400;margin-top:8px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
#l-hint{position:absolute;bottom:max(16px,6vh);font-size:13px;opacity:.85;animation:pulse 2.4s ease infinite}
@keyframes pulse{50%{opacity:.4}}
#lock .login,#lock .l-clock,#lock #l-hint{position:relative;z-index:5}
#lock .l-clock{display:flex;flex-direction:column;align-items:center}
#lock .login{display:flex;flex-direction:column;align-items:center;gap:14px}
#lock.login-mode #l-hint{display:none}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}}
.avatar{width:clamp(72px,16vh,140px);height:clamp(72px,16vh,140px);border-radius:50%;background:var(--acrylic2);-webkit-backdrop-filter:blur(calc(20px * var(--blur-scale)));backdrop-filter:blur(calc(20px * var(--blur-scale)));display:flex;align-items:center;justify-content:center;border:1px solid var(--stroke2);flex-shrink:0}
@media (max-width:720px){
  #lock{gap:20px;padding:20px 12px}
  #l-time{font-size:clamp(32px,10vw,56px)}
  .avatar{width:84px;height:84px}
}
.avatar svg{width:56%;height:56%;opacity:.9}
#lock .uname{font-size:clamp(16px,4.5vh,24px);font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.4)}
#l-pass{display:flex;gap:8px;margin-top:2px;align-items:center}
#l-pass input{width:min(240px,54vw);height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.25);border-bottom:2px solid var(--accent);background:rgba(0,0,0,.4);color:#fff;outline:none;border-radius:8px;font-size:14px;backdrop-filter:blur(12px)}
#l-pass input::placeholder{color:rgba(255,255,255,.55)}
#l-go{height:40px;padding:0 18px;flex-shrink:0;border-radius:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:14px;font-weight:600;transition:background .15s,border-color .15s;backdrop-filter:blur(12px)}
#l-go:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5)}
#l-go:active{background:rgba(255,255,255,.35)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
#l-pass.shake{animation:shake .4s}
#l-pass.shake input{border-bottom-color:#e23f44}
#welcome{z-index:615;background:#000;color:#fff;gap:34px;transition:opacity .4s}
#welcome .wt{font-size:26px;font-weight:300}
#off{z-index:620;background:#000;color:#fff;gap:26px;cursor:pointer}
#off .otxt{font-size:15px;opacity:.7}