/* Carte centrée des pages de réinitialisation (demande + nouveau mot de passe) */
.auth-card {
  position: relative;
  z-index: 1;
  width: 448px; /* 24px de padding de chaque côté => inputs de 400px (comme l'écran d'auth) */
  max-width: 100%;
  padding: 48px 24px; /* contenu centré, sans encadré (ni bordure, ni ombre) */
  text-align: center;
}

/* Neutralise le form pleine hauteur hérité de auth.css : ici il vit dans une carte */
.auth-card form {
  height: auto;
  padding: 0;
}

/* Titres réutilisés hors du form (pages sans formulaire) */
.auth-card h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--white-color);
  margin-bottom: 8px;
}

/* Texte d'information (page « vérifie tes e-mails ») */
.auth-note {
  font-size: 13px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--white-color) 80%, transparent);
}

/* Lien de retour vers la connexion */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--grey-color);
  text-decoration: none;
}

.auth-back:hover {
  color: var(--main-color);
}

/* Responsive (breakpoints en fin de fichier) */
@media (max-width: 480px) {
  .auth-card {
    padding: 40px 24px;
  }
}