/* SIKAVO — Authentification PIN */
:root{
    --pin-blue:#0b45ef;
    --pin-blue-deep:#062ebc;
    --pin-orange:#ff6b00;
    --pin-text:#080b12;
    --pin-muted:#9bb5cc;
    --pin-error:#b42318;
    --pin-error-bg:#fff1f0;
    --pin-success:#176a34;
    --pin-success-bg:#e9f8ed;
}

/* ---------- Connexion PIN façon écran de déverrouillage ---------- */
.pin-lock-body{
    margin:0;
    min-width:320px;
    min-height:100vh;
    background:#fff;
    color:var(--pin-text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior:none;
}
.pin-lock-screen{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    background:#fff;
}
.pin-lock-shell{
    width:min(100%,480px);
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    grid-template-rows:auto auto 1fr;
    padding:calc(22px + env(safe-area-inset-top)) 24px calc(18px + env(safe-area-inset-bottom));
    box-sizing:border-box;
}
.pin-lock-brand{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:2px;
}
.pin-lock-logo{
    display:block;
    width:168px;
    height:auto;
    max-height:64px;
    object-fit:contain;
}
.pin-lock-message{
    text-align:center;
    padding-top:clamp(88px,13vh,145px);
}
.pin-lock-message h1{
    margin:0;
    color:#0b0d12;
    font-size:clamp(25px,6.3vw,32px);
    line-height:1.22;
    font-weight:400;
    letter-spacing:-.025em;
}
.pin-lock-alert{
    width:min(100%,360px);
    margin:20px auto 0;
    padding:11px 14px;
    border-radius:14px;
    font-size:13px;
    line-height:1.35;
    box-sizing:border-box;
}
.pin-lock-alert-error{color:var(--pin-error);background:var(--pin-error-bg)}
.pin-lock-alert-success{color:var(--pin-success);background:var(--pin-success-bg)}
.pin-lock-form{
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-top:38px;
}
.pin-lock-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    min-height:28px;
    margin-bottom:clamp(82px,13vh,138px);
}
.pin-lock-dot{
    width:20px;
    height:20px;
    border-radius:50%;
    box-sizing:border-box;
    background:#d9e5ee;
    transform:scale(.84);
    transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}
.pin-lock-dot.is-filled{
    background:var(--pin-blue);
    transform:scale(1);
    box-shadow:0 0 0 4px rgba(11,69,239,.07);
}
.pin-lock-dot.is-last{
    background:var(--pin-orange);
}
.pin-lock-keypad{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:center;
    justify-items:center;
    row-gap:clamp(25px,4.1vh,42px);
    width:100%;
    padding:0 8px;
    box-sizing:border-box;
}
.pin-lock-key{
    appearance:none;
    -webkit-appearance:none;
    width:82px;
    height:60px;
    border:0;
    border-radius:30px;
    background:transparent;
    color:#05070b;
    font:inherit;
    font-size:clamp(36px,10vw,48px);
    font-weight:400;
    line-height:1;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    transition:background .08s ease,transform .08s ease;
}
.pin-lock-key:active{
    background:#f0f4f8;
    transform:scale(.94);
}
.pin-lock-key:focus-visible,
.pin-lock-forgot:focus-visible{
    outline:3px solid rgba(11,69,239,.25);
    outline-offset:3px;
}
.pin-lock-forgot{
    justify-self:center;
    align-self:center;
    color:#0b0d12;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    letter-spacing:.01em;
    padding:18px 4px;
    white-space:nowrap;
}
.pin-lock-empty{
    width:82px;
    height:60px;
    display:block;
}
.pin-lock-shell.is-submitting .pin-lock-key{
    pointer-events:none;
    opacity:.56;
}

/* ---------- Autres écrans PIN déjà utilisés par SIKAVO ---------- */
.pin-card{max-width:420px}.pin-input-wrap{position:relative}.pin-input-wrap input,.pin-panel input{width:100%;box-sizing:border-box}.pin-input-wrap input{font-size:30px;letter-spacing:.38em;text-align:center;padding-right:52px}.pin-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:transparent;font-size:20px;cursor:pointer}.pin-label,.pin-panel label{display:block;font-weight:700;margin:12px 0 7px}.pin-help{font-size:12px;opacity:.68;margin:6px 0 14px}.pin-secondary,.pin-tertiary{display:block;text-align:center;margin-top:16px;text-decoration:none}.pin-tertiary{font-size:13px;opacity:.75}.pin-success{padding:11px 13px;margin:10px 0;border-radius:12px;background:#e9f8ed;color:#176a34}.pin-simple{min-height:100vh;display:grid;place-items:center;padding:22px;background:#f8f5ee}.pin-panel{width:min(100%,430px);background:#fff;padding:26px;border-radius:24px;box-shadow:0 18px 60px rgba(7,20,49,.09)}.pin-panel h1{margin:10px 0}.pin-panel p{color:#667085}.pin-panel input{padding:14px;border:1px solid #d7dbe3;border-radius:13px;font-size:16px}.pin-panel input[inputmode="numeric"]{font-size:28px;letter-spacing:.3em;text-align:center}.pin-panel .nx-btn{width:100%;margin-top:16px}.pin-logo{display:block;width:118px;max-height:50px;margin:0 auto 15px}

@media (min-width:700px){
    .pin-lock-shell{padding-left:34px;padding-right:34px}
    .pin-lock-message{padding-top:92px}
    .pin-lock-dots{margin-bottom:86px}
    .pin-lock-keypad{row-gap:28px}
    .pin-lock-key{font-size:42px}
}
@media (max-height:720px){
    .pin-lock-shell{padding-top:14px;padding-bottom:10px}
    .pin-lock-logo{width:145px;max-height:54px}
    .pin-lock-message{padding-top:42px}
    .pin-lock-message h1{font-size:24px}
    .pin-lock-form{padding-top:24px}
    .pin-lock-dots{margin-bottom:42px;gap:18px}
    .pin-lock-dot{width:17px;height:17px}
    .pin-lock-keypad{row-gap:13px}
    .pin-lock-key{height:50px;font-size:34px}
    .pin-lock-forgot{padding:12px 2px;font-size:14px}
    .pin-lock-empty{height:50px}
}
@media(max-width:520px){
    .pin-panel{padding:22px 18px;border-radius:20px}.pin-input-wrap input{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
    .pin-lock-dot,.pin-lock-key{transition:none}
}