/* Clavier de code à 4 chiffres (page code.html + écran « Modifier le code »). */
.pin-page{margin:0;background:var(--surface);color:var(--on-surface);font-family:'Roboto Flex',system-ui,sans-serif;}
.pin-wrap{min-height:100vh;max-width:420px;margin:0 auto;padding:48px 20px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-sizing:border-box;}
.pin-badge{width:64px;height:64px;border-radius:var(--shape-full);background:var(--primary-container);color:var(--on-primary-container);display:flex;align-items:center;justify-content:center;}
.pin-badge .msi{font-size:30px;}

.pin{display:flex;flex-direction:column;align-items:center;}
.pin-title{margin:0 0 4px;font-size:26px;line-height:32px;font-weight:700;text-align:center;}
.pin-sub{margin:0;font-size:14px;line-height:20px;color:var(--on-surface-variant);text-align:center;}
.pin-dots{margin-top:28px;display:flex;gap:18px;}
.pin-dots i{width:18px;height:18px;border-radius:var(--shape-full);border:2px solid var(--outline);box-sizing:border-box;display:block;transition:background .12s,border-color .12s;}
.pin-dots i.on{background:var(--primary);border-color:var(--primary);}
.pin[data-state="error"] .pin-dots i.on{background:var(--error);border-color:var(--error);}
.pin[data-state="ok"] .pin-dots i.on{background:var(--success);border-color:var(--success);}
.pin-dots.shake{animation:pin-shake .4s;}
@keyframes pin-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.pin-msg{margin:14px 0 0;min-height:20px;font-size:13px;line-height:20px;font-weight:600;text-align:center;color:var(--on-surface-variant);}
.pin[data-state="error"] .pin-msg{color:var(--error);}
.pin[data-state="ok"] .pin-msg{color:var(--success);}
.pin-pad{margin-top:14px;display:grid;grid-template-columns:repeat(3,76px);gap:14px 22px;}
.pin-key{width:76px;height:76px;border:none;border-radius:var(--shape-full);background:var(--surface-container-high);color:var(--on-surface);font-family:'Roboto Mono',monospace;font-size:26px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.pin-key:active{background:var(--surface-container-highest);}
.pin-key:focus-visible{outline:2px solid var(--on-surface);outline-offset:2px;}
.pin-key:disabled{opacity:.35;cursor:default;}
.pin-back{background:transparent;}
.pin-back .msi{font-size:26px;}
@media (prefers-reduced-motion:reduce){.pin-dots.shake{animation:none;}}