/* ==========================================================
   Audyo — Protect : bouton rouge, écran verrouillé, pavé à code
   (boîtier, touches et bouclier : visuels générés avec Higgsfield)
   ========================================================== */

/* ---------- bouton PROTECT (barre du haut, mode DJ) ---------- */
.protect-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 7px;
  border: 1px solid #ff3b30; border-radius: 10px; cursor: pointer;
  background: radial-gradient(120% 140% at 30% 20%, #8a1219, #3a0509 60%, #220306);
  color: #fff; font: 700 16px 'Barlow Condensed', 'Arial Narrow', var(--font-ui); letter-spacing: 2px;
  animation: protPulse 1.8s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
}
.protect-btn img { width: 28px; height: 28px; object-fit: contain; animation: protBeat 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 59, 48, .8)); }
.protect-btn:hover { filter: brightness(1.2); }
.protect-btn:active { transform: scale(.96); }
.protect-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body:not(.mode-dj) .protect-btn { display: none; }
@keyframes protPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 59, 48, .45), inset 0 0 8px rgba(255, 59, 48, .25); }
  50% { box-shadow: 0 0 20px 3px rgba(255, 59, 48, .8), inset 0 0 14px rgba(255, 59, 48, .5); }
}
@keyframes protBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.08); } 48% { transform: scale(1); } }
@media (max-width: 520px) { .protect-btn span { display: none; } .protect-btn { padding: 0 7px; } }

/* ---------- écran verrouillé ---------- */
.prot-lock {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; background: #03040a;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: contain;
}
.prot-lock[hidden] { display: none; }
.prot-lock.setup { background: rgba(3, 4, 10, .92); }
.prot-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.prot-clock {
  position: absolute; top: 4vh; left: 0; right: 0; text-align: center; pointer-events: none;
  font: 700 clamp(56px, 10vw, 140px)/1 'Barlow Condensed', 'Arial Narrow', sans-serif; color: #fff; letter-spacing: 2px;
  text-shadow: 0 0 30px rgba(255, 59, 48, .55), 0 4px 20px rgba(0, 0, 0, .8); opacity: .9;
}
.prot-hint {
  position: absolute; bottom: 5vh; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none;
  font: 600 clamp(15px, 2vw, 20px) 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: 1.5px; text-transform: uppercase;
  color: #ffb3ad; text-shadow: 0 0 12px rgba(255, 59, 48, .7); animation: protHint 2.4s ease-in-out infinite;
}
@keyframes protHint { 50% { opacity: .35; } }
.prot-lock.setup .prot-clock, .prot-lock.setup .prot-hint, .prot-lock:has(.kp:not([hidden])) .prot-hint, .prot-lock:has(.kp:not([hidden])) .prot-clock { display: none; }

/* ---------- pavé à code (boîtier Higgsfield) ---------- */
.kp {
  position: relative; z-index: 1; container-type: inline-size;
  width: min(360px, 92vw, calc((100dvh - 40px) * .7037)); aspect-ratio: 608 / 864;
  background: url("../assets/protect/keypad-panel.webp") center / 100% 100% no-repeat;
  border-radius: 9% / 6.3%; /* arrondit les coins du bas, perdus avec le reflet de l'image */
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .8)) drop-shadow(0 0 40px rgba(255, 59, 48, .25));
  animation: kpIn .28s ease-out;
}
.kp[hidden] { display: none; }
@keyframes kpIn { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.kp.shake { animation: kpShake .42s ease; }
@keyframes kpShake { 15%, 55% { transform: translateX(-3cqw); } 35%, 75% { transform: translateX(3cqw); } }
.kp-in { position: absolute; inset: 9% 11% 6%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kp-brand { display: inline-flex; align-items: center; gap: 1.6cqw; font: 700 4.4cqw 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: 1.2cqw; color: #ff5a50; text-shadow: 0 0 2cqw rgba(255, 59, 48, .8); }
.kp-brand img { width: 6cqw; height: 6cqw; object-fit: contain; }
.kp-title { margin: 2.6cqw 0 0; font: 700 6.6cqw/1.1 'Barlow Condensed', 'Arial Narrow', sans-serif; color: #fff; letter-spacing: .3cqw; }
.kp-sub { margin: 1cqw 0 0; font: 500 3.7cqw 'Barlow', var(--font-ui); color: #b9b9c2; }
.kp-dots { display: flex; gap: 4.5cqw; margin: 4cqw 0 1.4cqw; }
.kp-dots i { width: 4cqw; height: 4cqw; border-radius: 50%; border: .5cqw solid #ff3b30; background: transparent; transition: background-color .12s ease, box-shadow .12s ease; }
.kp-dots i.on { background: #ff3b30; box-shadow: 0 0 2.5cqw rgba(255, 59, 48, .9); }
.kp-msg { min-height: 5cqw; margin: 0; font: 600 3.6cqw 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .3cqw; color: #9fe3b0; }
.kp-msg.bad { color: #ff6b62; }
.kp-keys { display: grid; grid-template-columns: repeat(3, 18.5cqw); gap: 2.2cqw 4.2cqw; margin-top: auto; justify-content: center; }
.kp-key {
  width: 18.5cqw; aspect-ratio: 194 / 200; padding: 0; border: 0; border-radius: 3cqw; cursor: pointer;
  background: url("../assets/protect/keypad-key.webp") center / 100% 100% no-repeat;
  color: #fff; font: 600 8.4cqw/1 'Barlow Condensed', 'Arial Narrow', sans-serif;
  text-shadow: 0 0 2.4cqw rgba(255, 59, 48, .85);
  transition: transform .08s ease, filter .12s ease;
}
.kp-key:hover { filter: brightness(1.35); }
.kp-key:active { transform: scale(.93); filter: brightness(1.7) drop-shadow(0 0 2cqw rgba(255, 59, 48, .9)); }
.kp-key:focus-visible { outline: .7cqw solid #ff3b30; outline-offset: .6cqw; }
.kp-fn { font-size: 6cqw; color: #ffb3ad; }
.kp-cancel { margin-top: 2.4cqw; border: 0; background: transparent; color: #b9b9c2; cursor: pointer; font: 600 4cqw 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .4cqw; text-transform: uppercase; }
.kp-cancel:hover { color: #fff; }
.kp-cancel[hidden] { display: none; }

/* ---------- réglages (onglet Visuels du DJ) ---------- */
.prot-set { margin: 8px 0 6px; padding: 10px 0 8px; border-top: 1px solid var(--rb-line, #2a2a30); border-bottom: 1px solid var(--rb-line, #2a2a30); }
.prot-set-head { display: flex; align-items: center; gap: 8px; }
.prot-set-head img { width: 24px; height: 24px; object-fit: contain; }
.prot-set-head b { font: 700 17px 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: 1.5px; color: #ff5a50; text-transform: uppercase; }
.prot-state { margin-left: auto; padding: 2px 8px; border-radius: 2px; font: 600 12px 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .5px; color: #9b9ba3; border: 1px solid #3a3a42; }
.prot-state.ok { color: #000; background: #3fd16b; border-color: #3fd16b; }
.prot-set .rec-note { font-size: 12.5px; margin: 4px 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .protect-btn, .protect-btn img, .prot-hint, .kp, .kp.shake { animation: none; }
}