/* =====================================================================
   Page d'accès invités + bouton de déconnexion.
   S'appuie sur les variables et composants de style.css (.btn, .field,
   .alert) ; seul ce qui est propre à la page de connexion est ici.
   Fichier public : ne rien y mettre de privé.
   ===================================================================== */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
}

.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
}

.login-card {
  width: 100%;
  max-width: 480px;
  background: var(--cream); /* comme le fond de l'illustration fondue */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 26px 34px;
  text-align: center;
}

@media (min-width: 520px) {
  .login-card { padding: 56px 48px 42px; }
}

/* Illustration couple + phare du faire-part (seule image publique, cf.
   PUBLIC_STATIC). Fond blanc cassé fondu dans la carte, bords adoucis. */
.login-illu {
  width: 100%;
  height: auto;
  margin: -8px auto 22px;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}

.login-monogram {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  color: var(--blue-deep);
  margin: 0 0 14px;
}

.login-monogram span {
  color: var(--ink);
}

.login-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}

.login-lede {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0 0 30px;
}

.login-form {
  text-align: left;
}

.login-form .field {
  margin-bottom: 20px;
}

.login-form input[type="password"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 1.05rem; /* ≥ 16px : pas de zoom automatique sur iOS */
  padding: 13px 16px;
  border: 1px solid rgba(63, 61, 56, 0.14);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: 0.06em;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.login-form input[type="password"]:focus-visible {
  outline: none;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(92, 130, 166, 0.22);
}

/* Les alertes de style.css sont prévues pour le fond sauge du RSVP. */
.login-card .alert {
  text-align: left;
  color: var(--ink);
}

.login-card .alert-error {
  background: #fbf1ec;
  box-shadow: inset 0 0 0 1px #e9c3ad;
}

.login-card .alert-success {
  background: var(--blue-soft);
  box-shadow: none;
}

/* Bouton « Se déconnecter » du pied de page du site. */
.logout-form {
  margin-top: 18px;
}

.logout-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(92, 130, 166, 0.5);
  text-underline-offset: 4px;
  cursor: pointer;
}

.logout-btn:hover, .logout-btn:focus-visible { color: var(--blue-deep); }