/* ═══════════════ 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}
#boot .blogo{width:88px;height:88px;margin-bottom:70px}
#boot .blogo svg,#off-logo svg{width:100%;height:100%}
.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:flex-start;padding-top:clamp(28px,12vh,16vh);overflow-y:auto}
#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(40px,9vh,96px);font-weight:600;letter-spacing:-2px;text-shadow:0 2px 22px rgba(0,0,0,.4);line-height:1}
#l-date{font-size:clamp(15px,3vh,26px);font-weight:400;margin-top:10px;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{display:none;flex-direction:column;align-items:center;gap:clamp(8px,2.2vh,16px);margin-top:clamp(24px,6vh,48px)}
#lock.login-mode .l-clock,#lock.login-mode #l-hint{display:none}
#lock.login-mode .login{display:flex;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}}
.avatar{width:clamp(84px,20vh,168px);height:clamp(84px,20vh,168px);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}
.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:0;margin-top:2px}
#l-pass input{width:min(238px,54vw);height:clamp(30px,7vh,34px);padding:0 12px;border:1px solid var(--stroke2);border-bottom:2px solid var(--accent);background:rgba(0,0,0,.35);color:#fff;outline:none;border-radius:4px 0 0 4px;font-size:13px}
#l-pass input::placeholder{color:rgba(255,255,255,.6)}
#l-go{width:clamp(30px,7vh,34px);height:clamp(30px,7vh,34px);flex-shrink:0;border-radius:0 4px 4px 0;background-color:var(--acrylic2);border:1px solid var(--stroke2);border-left:none;display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
#l-go:hover{background-color:rgba(255,255,255,.18)}
@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:var(--accent);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}