/* ===========================
   reset.css — Styles spécifiques à la page "Réinitialiser le mot de passe"
   Basé sur index.css & register.css fournis par le projet.
   Tout est scoppé au conteneur #container-reset pour éviter tout conflit.
   =========================== */

/* -------- Mise en scène commune -------- */
/* On profite des variables et composants globaux déjà définis dans index.css :
   --bg, --surface, --surface-2, --text, --muted, --accent, --accent-600, --border, --ring, --ok, --err, etc. */

/* Conteneur */
#container-reset{ outline:none }
#container-reset h1{ font-size:22px; margin:8px 4px 18px; letter-spacing:.2px }
#container-reset .muted{ color:var(--muted) }

/* Carte compacte comme sur Login/Register */
#container-reset .card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)), var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}
#container-reset .card--narrow{ max-width:480px; margin:auto }

/* Formulaire : une colonne, espacements cohérents */
#resetForm{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:6px }
#resetForm .field{ display:flex; flex-direction:column }
#resetForm .field label{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px }
#resetForm .field small{ display:block; margin-top:6px }

/* Champs (hérite du style global input de index.css) */
#container-reset input[type="text"],
#container-reset input[type="password"]{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
}
#container-reset input::placeholder{ color:#9aa3ab }
#container-reset input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring) }

/* Gestion propre des erreurs :
   - Pas de bordures rouges "par défaut" tant que l'utilisateur n'a pas validé.
   - On s'appuie sur aria-invalid="true" (déjà géré par reset.js) pour marquer visuellement l'erreur. */
#container-reset input:invalid{ box-shadow:none } /* neutralise le style natif navigateur */
#container-reset [aria-invalid="true"]{
  border-color: var(--err) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .25);
}

/* Bouton Afficher/Masquer (reuse .btn global mais assure le rendu inline) */
#container-reset .toggle-eye.btn{
  white-space:nowrap;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.04));
  color:var(--text);
  cursor:pointer;
}
#container-reset .toggle-eye.btn:hover{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring) }

/* Actions et message d’état */
#container-reset .actions{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:6px }
#container-reset #resetMsg{ min-height:1.2em; font-size:13px }
#container-reset .status.ok{ color:var(--ok) }
#container-reset .status.err{ color:var(--err) }

/* Responsive : garder la compacité sur mobile */
@media (max-width: 560px){
  #container-reset .card{ padding:14px }
}