/* Pavés des codes 10S-ADMIN et PIN SASP, finitions */

/* Mot de passe 10S-ADMIN : pavé numérique */
.keypad {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 30px 40px;
  border-radius: inherit;
  background: rgba(8, 8, 10, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  animation: decrypt-in 0.2s ease-out;
}
.keypad[hidden] { display: none; }
.keypad__title { margin: 0; font-weight: 700; text-align: center; }
.keypad__dots { display: flex; gap: 12px; min-height: 14px; }
.keypad__dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--text); }
.keypad__dots i.on { background: var(--text); }
.keypad__msg { margin: 0; min-height: 1.2em; color: #ff6b70; font-size: 0.8125rem; font-weight: 600; }
.keypad.is-wrong .keypad__dots { animation: keypad-shake 0.4s; }
@keyframes keypad-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.keypad__keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; }
.keypad__keys button {
  width: 72px; height: 72px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 1.75rem;
  font-weight: 500;
  cursor: pointer;
}
.keypad__keys button:hover { background: rgba(255, 255, 255, 0.2); }
.keypad__keys button:active { background: rgba(255, 255, 255, 0.35); }
.keypad__keys button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.keypad__keys .keypad__fn { background: none; font-size: 0.9375rem; font-weight: 600; }
.keypad__join { display: none; }
@media (max-width: 520px) { .keypad__keys { grid-template-columns: repeat(3, 64px); gap: 12px 18px; } .keypad__keys button { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .keypad, .keypad.is-wrong .keypad__dots { animation: none; } }

.tile--alert dd { color: #ff6b70; }

.code-card__text { margin: 0 0 12px; color: var(--muted); font-size: 0.875rem; }
.code-card__form { display: flex; flex-wrap: wrap; gap: 10px; }
.code-card__form .input { width: 180px; letter-spacing: 0.2em; }

/* PIN SASP : le pavé prend le style terminal vert */
.keypad[data-theme="sasp"] {
  background:
    repeating-linear-gradient(to bottom, rgba(124, 224, 158, 0.04) 0 1px, transparent 1px 3px),
    rgba(2, 5, 3, 0.96);
  color: #7ce09e;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  text-shadow: none;
}
.keypad[data-theme="sasp"] .keypad__title { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }
.keypad[data-theme="sasp"] .keypad__dots i { border-color: #7ce09e; border-radius: 0; }
.keypad[data-theme="sasp"] .keypad__dots i.on { background: #7ce09e; box-shadow: none; }
.keypad[data-theme="sasp"] .keypad__msg { color: #ff4d55; font-size: 0.6875rem; text-transform: uppercase; }
.keypad[data-theme="sasp"] .keypad__keys button { border: 1px solid rgba(124, 224, 158, 0.35); border-radius: 4px; background: rgba(124, 224, 158, 0.05); color: #7ce09e; font-family: inherit; }
.keypad[data-theme="sasp"] .keypad__keys button:hover { background: rgba(124, 224, 158, 0.15); }
.keypad[data-theme="sasp"] .keypad__keys .keypad__fn { border-color: transparent; background: none; font-size: 0.75rem; }

/* Admin : interrupteur du PIN SASP */
.pin-toggle b { color: var(--muted); }
.pin-toggle[aria-pressed="true"] { border-color: rgba(63, 191, 127, 0.6); background: var(--green-soft); }
.pin-toggle[aria-pressed="true"] b { color: var(--green); }

/* Finitions */
.wifi-net .sys { display: block; }
/* points de pagination masqués */
.home__dots { visibility: hidden; }
/* admin : menu défilant sur écran peu haut */
.sidebar { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
@media (max-height: 880px) { .sidebar .nav { padding-top: 8px; padding-bottom: 8px; } }

/* Verre */
.widget, .dock, .wifi-menu {
  --glass-tint: rgba(22, 23, 27, 0.28);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.05)), var(--glass-tint);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 12px 32px rgba(0, 0, 0, 0.35);
}
.widget:hover { --glass-tint: rgba(34, 36, 41, 0.36); background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.06)), var(--glass-tint); }
.wifi-menu { --glass-tint: rgba(26, 28, 32, 0.46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 44px rgba(0, 0, 0, 0.5); }
.thread__head {
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), rgba(20, 21, 24, 0.46);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.keypad {
  background: rgba(8, 8, 10, 0.5);
  -webkit-backdrop-filter: blur(34px) saturate(1.6);
  backdrop-filter: blur(34px) saturate(1.6);
}
.photo-view__nav, body[data-mode="public"] .member__close {
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.photo-view__nav { background: rgba(20, 20, 24, 0.26); }
body[data-mode="public"] .member__close { background: rgba(255, 255, 255, 0.08); }

/* Écran verrouillé : heure, date et code */
.keypad__clock { display: none; }
.keypad.is-lock { justify-content: flex-start; padding-top: 70px; -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4); }
.keypad.is-lock .keypad__clock { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 26px; }
.keypad__clock b { font-family: var(--head); font-weight: 600; font-size: 4.5rem; line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); }
.keypad__clock span { color: rgba(236, 236, 238, 0.82); font-weight: 600; text-transform: capitalize; }
.keypad.is-lock [data-keypad-cancel] { visibility: hidden; }