@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');

/* =====================================================================
   Page d'accueil : écran de mot de passe (tout noir, rien derrière)
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body{
  height:100%;
  background:#000;
}

body{
  min-height:100%;
  color:#fff;
  font-family: Montserrat, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

.gate{
  width:100%;
  display:flex;
  justify-content:center;
  transition: opacity .45s ease, transform .45s ease;
}
body.leaving .gate{
  opacity:0;
  transform: scale(.98);
}

.gate-form{
  width:100%;
  max-width:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.gate-label{
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  text-align:center;
  transition: color .3s ease;
}
.gate-label.err{ color:#ff9fbb; }

.pwd-wrap{
  position:relative;
  width:100%;
}

#pwd{
  width:100%;
  padding:14px 48px;            /* même marge des deux côtés : le texte reste centré */
  border:none;
  border-radius:12px;
  font-size:1.1rem;             /* ≥ 16px : pas de zoom automatique sur iPhone */
  text-align:center;
  font-family:inherit;
  color:#000;
  background:#fff;
  outline:none;
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  transition: box-shadow .3s ease;
}
#pwd:focus{ box-shadow: 0 0 0 3px rgba(255,255,255,.35); }

/* Pas d'icônes Safari par-dessus le bouton œil */
#pwd::-webkit-caps-lock-indicator{ display:none; }
#pwd::-webkit-credentials-auto-fill-button{ visibility:hidden; position:absolute; right:0; }
#pwd::-webkit-contacts-auto-fill-button{ visibility:hidden; position:absolute; right:0; }

.eye{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:none;
  color:#555;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.eye svg{ width:22px; height:22px; display:block; }
.eye .eye-closed{ display:none; }
.eye[aria-pressed="true"] .eye-open{ display:none; }
.eye[aria-pressed="true"] .eye-closed{ display:block; }

.shake{ animation: shake .45s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(7px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce){
  .gate, .shake{ transition:none; animation:none; }
}