/* ===============================
   Login — surcouche légère
   (scopée à body.login pour ne rien casser)
   =============================== */

body.login{
  min-height:100vh;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(196,22,28,.08), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(196,22,28,.06), transparent 55%),
    var(--bg);
  color:var(--ink);
}

/* Carte principale */
body.login .auth-card{
  width:min(460px, 94vw);
  background:linear-gradient(180deg, rgba(18,18,23,.98), rgba(18,18,23,.92));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 32px rgba(0,0,0,.55);
  padding:18px 18px 14px;
  backdrop-filter: blur(8px);
  animation: auth-pop .22s ease-out;
}

@keyframes auth-pop{
  from{ transform:translateY(6px) scale(.98); opacity:0 }
  to{ transform:none; opacity:1 }
}

/* En-tête */
.auth-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.auth-head .dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 7px rgba(196,22,28,.18);
}
.auth-title{ margin:0; font-size:20px; font-weight:700; letter-spacing:.2px }
.auth-sub{ margin:6px 0 12px; color:var(--muted); }

/* Formulaire */
.auth-form label{ display:block; font-size:13px; color:#c5c9d2; margin-top:10px }
.auth-form input{
  width:100%; padding:10px 12px; margin-top:6px;
  border-radius:10px; border:1px solid #3a3a42; background:#0d0d12; color:var(--ink);
}
.auth-form .row-inline{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px;
}
.auth-form .remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:#c5c9d2; }
.auth-form .remember input{ width:auto; margin:0 }

/* Champ mot de passe + toggle */
.password-field{ position:relative; }
.password-field input{ padding-right:42px; }
.password-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:1px solid var(--border);
  background:#0d0d12; color:var(--ink);
  height:28px; padding:0 8px; border-radius:8px; font-size:12px; cursor:pointer;
}
.password-toggle:hover{ border-color:#3a3a42 }

/* Bouton principal */
.auth-actions{ margin-top:12px; display:flex; flex-direction:column; gap:8px }
.auth-actions .btn-submit{
  padding:12px; border-radius:10px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:700;
}
.auth-actions .btn-submit:hover{ background:var(--brand-dark); border-color:var(--brand-dark) }

/* Messages / liens utilitaires */
.alert{ background:#261215; border:1px solid #3a0f13; color:#ffc6c9; padding:10px; border-radius:10px; margin:12px 0 }
.auth-meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px }
.auth-meta a{ color:var(--muted) }
.auth-meta a:hover{ color:#fff }

/* Pied */
.auth-footer{ margin-top:14px; text-align:center }
.auth-footer .muted{ color:var(--muted) }

/* Accessibilité & confort */
@media (prefers-reduced-motion: reduce){
  .auth-card{ animation:none }
}