/* ═══════════════════════════════════════════════════════
   mdp-oublie-style.css — Mot de passe oublié NIOUP-NIEUT
   Charte : Cormorant Garamond + DM Sans · bleu #3a5a72 · coral #c47e6b
   ═══════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bleu:      #3a5a72;
  --bleu-pale: #d8e5ed;
  --bleu-mid:  #4e728f;
  --coral:     #c47e6b;
  --coral-dk:  #a86655;
  --creme:     #faf7f4;
  --dark:      #1e2d38;
  --gris:      #f4f6f8;
  --border:    #d0dde8;
  --shadow:    0 4px 30px rgba(58, 90, 114, .10);
  --radius:    14px;
}

/* ── Reset léger ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--creme);
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Barre de navigation (identique à auth.php) ───────── */

    /* TOPBAR */
    .topbar { background: var(--bleu); color: white; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
    .topbar-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: white; text-decoration: none; }
    .topbar-logo em { color: #d9a090; font-style: normal; }
    .topbar-back { font-size: 0.82rem; color: rgba(255,255,255,0.7); text-decoration: none; }
    .topbar-back:hover { color: white; }

/* ── Wrapper centré ────────────────────────────────────── */
.auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

/* ── Carte principale ──────────────────────────────────── */
.auth-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 420px;
}

/* ── Icône ronde en haut de carte ──────────────────────── */
.card-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--bleu-pale);
  color: var(--bleu);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.card-icon.confirm-icon {
  background: #e6f4ea;
  color: #2e7d47;
}

/* ── Titre & sous-titre ────────────────────────────────── */
.auth-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--bleu);
  text-align: center;
  margin-bottom: .35rem;
  line-height: 1.2;
}

.auth-sub {
  font-size: .85rem;
  color: #7a8d9b;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.auth-sub strong { color: var(--dark); }

/* ── Messages erreur / succès ──────────────────────────── */
.msg-erreur {
  background: #fde8e8;
  color: #8b1c1c;
  border-radius: 8px;
  padding: .65rem .9rem;
  font-size: .83rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.msg-succes {
  background: #e6f4ea;
  color: #1e5c2e;
  border-radius: 8px;
  padding: .65rem .9rem;
  font-size: .83rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* ── Champ de formulaire ───────────────────────────────── */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: .3rem;
}

.req { color: var(--coral); }

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
  width: 100%;
  padding: .6rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--dark);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(58, 90, 114, .10);
}

/* ── Input avec œil ────────────────────────────────────── */
.input-eye-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-eye-wrap input {
  padding-right: 2.75rem;
}
.btn-eye {
  position: absolute; right: .6rem;
  background: none; border: none; cursor: pointer;
  color: #a0aab4; padding: .2rem;
  display: flex; align-items: center;
  transition: color .2s;
}
.btn-eye:hover { color: var(--bleu); }

/* ── Jauge de solidité ─────────────────────────────────── */
.strength-bar {
  height: 4px;
  background: var(--gris);
  border-radius: 2px;
  margin-top: .45rem;
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width .35s ease, background .35s ease;
}
.strength-label {
  font-size: .7rem;
  font-weight: 600;
  display: block;
  margin-top: .2rem;
  min-height: 1em;
  transition: color .3s;
}

/* ── Indication concordance ────────────────────────────── */
.match-hint {
  font-size: .72rem;
  font-weight: 500;
  display: block;
  margin-top: .25rem;
  min-height: 1em;
}
.match-ok  { color: #2e7d47; }
.match-err { color: #9b2335; }

/* ── Bouton principal ──────────────────────────────────── */
.btn-submit {
  display: block;
  width: 100%;
  background: var(--bleu);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: .72rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .2s;
  margin-top: .25rem;
}
.btn-submit:hover { background: var(--bleu-mid); }

/* Variante "ghost bleu" (lien habillé en bouton) */
.btn-ghost-bleu {
  background: transparent;
  border: 1.5px solid var(--bleu);
  color: var(--bleu);
}
.btn-ghost-bleu:hover {
  background: var(--bleu-pale);
}

/* ── Séparateur ────────────────────────────────────────── */
.sep {
  text-align: center;
  font-size: .78rem;
  color: #c0c8d0;
  margin: 1.1rem 0;
  position: relative;
}
.sep::before, .sep::after {
  content: '';
  position: absolute; top: 50%;
  width: 30%; height: 1px;
  background: var(--border);
}
.sep::before { left: 0; }
.sep::after  { right: 0; }

/* ── Lien centré ───────────────────────────────────────── */
.auth-link-center {
  text-align: center;
  font-size: .83rem;
}
.auth-link-center a {
  color: var(--coral);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}
.auth-link-center a:hover { color: var(--coral-dk); }

/* ── Bloc notice (email envoyé) ────────────────────────── */
.notice-bloc {
  background: var(--bleu-pale);
  border-radius: 10px;
  padding: .9rem 1rem;
  font-size: .82rem;
  color: #4a6578;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.notice-bloc p + p { margin-top: .4rem; }
.notice-bloc strong { color: var(--bleu); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  .topbar { padding: .85rem 1rem; }
  .auth-card { padding: 1.75rem 1.25rem; }
  .auth-title { font-size: 1.45rem; }
}