/**
 * password-reset.css — page « Mot de passe oublié » (mot-de-passe-oublie.html)
 * ------------------------------------------------------------
 * S'appuie uniquement sur styles.css (--blue*, --text*, --font-*,
 * .btn-primary). Page autonome, volontairement légère : une seule
 * carte centrale compacte, deux états (formulaire / succès) basculés
 * via [hidden]. Même logique de layout que merci-don.html (don.css)
 * mais fichier dédié — cette page n'a rien à voir avec les dons.
 * ------------------------------------------------------------ */

[hidden] { display: none !important; }

.pwr-page { background: var(--off-white); min-height: 100vh; display: flex; flex-direction: column; }

.pwr-topbar { padding: 18px 20px; border-bottom: 1px solid #e3ecf9; background: #fff; }
.pwr-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
}
.pwr-logo img { height: 30px; width: auto; }

.pwr-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.pwr-card {
  background: #fff;
  border: 1px solid #e3ecf9;
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
}

.pwr-state h1 {
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 8px;
}
.pwr-sub { font-size: 0.88rem; color: var(--text-soft); line-height: 1.5; margin-bottom: 22px; }

.pwr-form { display: flex; flex-direction: column; gap: 14px; }

.pwr-field { display: flex; flex-direction: column; gap: 6px; }
.pwr-field label { font-size: 0.78rem; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
.pwr-field input {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 11px 13px;
  border: 1.5px solid #d4e0f4;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.pwr-field input:focus { border-color: var(--blue); }

.pwr-password-row { display: flex; align-items: center; border: 1.5px solid #d4e0f4; border-radius: 9px; transition: border-color 0.15s; }
.pwr-password-row:focus-within { border-color: var(--blue); }
.pwr-password-row input { flex: 1; border: none; padding: 11px 13px; font-size: 0.92rem; font-family: var(--font-body); outline: none; background: transparent; color: var(--text); min-width: 0; }
.pwr-password-toggle { background: none; border: none; padding: 0 12px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; }
.pwr-password-toggle svg { width: 18px; height: 18px; }

.pwr-password-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: -4px 0 0;
}
.pwr-password-checklist li { display: flex; align-items: center; gap: 6px; }
.pwr-password-checklist li::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(26,86,219,0.25);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.pwr-password-checklist li.pwr-rule-ok { color: #16a34a; font-weight: 600; }
.pwr-password-checklist li.pwr-rule-ok::before {
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
  border-color: #16a34a;
}
@media (max-width: 420px) {
  .pwr-password-checklist { grid-template-columns: 1fr; }
}

.pwr-error { font-size: 0.84rem; color: #dc2626; font-weight: 600; min-height: 0; }
.pwr-error:empty { display: none; }

.pwr-btn { width: 100%; text-align: center; margin-top: 2px; }
.pwr-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pwr-btn:disabled:hover { transform: none; box-shadow: none; }

.pwr-link {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  margin-top: 18px;
}
.pwr-link:hover { color: var(--blue-dark); }

/* ── Carte du nouveau recovery code (état succès) ─────────── */
.pwr-code-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.pwr-code-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 8px;
}
.pwr-code-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.pwr-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pwr-code-value {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: #92400e;
  letter-spacing: 0.01em;
  word-break: break-all;
}
.pwr-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #92400e;
  border: 1px solid #92400e;
  color: white;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.pwr-code-copy:hover { background: #78350f; }
.pwr-code-copy svg { width: 13px; height: 13px; }
.pwr-code-hint { font-size: 0.74rem; color: #92400e; line-height: 1.45; margin: 10px 0 0; }

@media (max-width: 480px) {
  .pwr-card { padding: 28px 22px; }
}