/* =============================================================================
   Écran mot de passe (uniquement dans la version en ligne)
   ============================================================================= */

/* Rien du site ne s'affiche tant que ce n'est pas déverrouillé */
body.is-sealed .intro,
body.is-sealed .story,
body.is-sealed .music,
body.is-sealed .progress { display: none; }

.lock {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: linear-gradient(180deg, #1e131c 0%, #170f15 55%, #120b10 100%);
  transition: opacity .8s var(--ease-soft), visibility 0s .8s;
}
.lock.is-open { opacity: 0; visibility: hidden; }

.lock__card {
  width: min(100%, 360px);
  display: grid;
  gap: .9rem;
  text-align: center;
  color: var(--ivory);
}

.lock__icon { font-size: 2rem; line-height: 1; opacity: .85; }

.lock__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--gold-soft);
}

.lock__text { margin: 0 0 .6rem; font-size: .95rem; color: rgba(251, 247, 241, .65); }

.lock__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.lock__input {
  width: 100%;
  min-height: 52px;
  padding: 0 1.1rem;
  border: 1px solid rgba(230, 211, 171, .3);
  border-radius: 14px;
  font: inherit;
  font-size: 1rem; /* ≥ 16px : pas de zoom automatique sur iPhone */
  text-align: center;
  color: var(--ivory);
  background: rgba(255, 253, 249, .06);
  outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.lock__input:focus {
  border-color: rgba(230, 211, 171, .75);
  box-shadow: 0 0 0 4px rgba(230, 211, 171, .12);
}

.lock__btn {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ivory);
  background: linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-soft) 100%);
  transition: opacity .3s;
}
.lock__btn:disabled { opacity: .7; cursor: wait; }

.lock__msg { min-height: 1.5em; margin: 0; font-size: .9rem; color: var(--rose); }

.lock__card.is-wrong { animation: lockShake .45s var(--ease-soft); }
@keyframes lockShake {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .lock__card.is-wrong { animation: none; }
}