/* ============================================================
   auth.css — Styles partagés des pages d'authentification
   Login · Register · Reset password
   Palette : forest (#12694A), amber (#C88A04), paper (#F6F4EC)
   ============================================================ */

:root {
  --forest:    #12694A;
  --forest-dk: #0E5239;
  --amber:     #C88A04;
  --paper:     #F6F4EC;
  --chalk:     #EDE9DC;
  --ink:       #23231F;
  --line:      #DAD5C4;
  --muted:     #6B6960;
  --danger:    #C0392B;
  --success:   #1E8449;
}

/* ── Base ─────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  min-height: 100vh;
  background: var(--paper);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  display: flex;
  align-items: center;
}

/* ── Layout carte ─────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-logo {
  width: 54px;
  height: 54px;
  background: var(--forest);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.auth-title {
  color: var(--ink);
  font-size: 1.3rem;
}

.auth-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 2px 16px rgba(18,105,74,.06);
}

/* ── Séparateur OAuth / email ─────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Boutons OAuth ────────────────────────────────────────── */
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  transition: background .15s, border-color .15s;
}
.btn-oauth:hover {
  background: var(--chalk);
  border-color: #bbb;
  color: var(--ink);
}
.btn-oauth-apple {
  background: #000;
  color: #fff;
  border-color: #000;
}
.btn-oauth-apple:hover {
  background: #222;
  color: #fff;
  border-color: #222;
}

/* ── Bouton principal ─────────────────────────────────────── */
.btn-forest {
  background: var(--forest);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  transition: background .15s;
}
.btn-forest:hover,
.btn-forest:focus {
  background: var(--forest-dk);
  color: #fff;
}
.btn-forest:disabled {
  background: #9bbdae;
}

/* ── Champs de formulaire ─────────────────────────────────── */
.form-control {
  border-color: var(--line);
  border-radius: 8px;
  font-size: 14px;
  padding: 10px 12px;
}
.form-control:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 .2rem rgba(18,105,74,.15);
  outline: none;
}
.form-label {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 5px;
}

/* ── Bouton œil (afficher/masquer mot de passe) ──────────── */
.btn-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  color: var(--muted);
  line-height: 1;
}
.btn-eye:hover { color: var(--ink); }

/* ── Indicateur de force du mot de passe ─────────────────── */
.pwd-strength {
  height: 3px;
  background: var(--chalk);
  border-radius: 2px;
  overflow: hidden;
}
.pwd-bar {
  height: 100%;
  width: 0%;
  background: var(--forest);
  border-radius: 2px;
  transition: width .25s, background .25s;
}

/* ── Liens ────────────────────────────────────────────────── */
.auth-link {
  color: var(--forest);
  text-decoration: none;
}
.auth-link:hover {
  color: var(--forest-dk);
  text-decoration: underline;
}

/* ── Alertes ──────────────────────────────────────────────── */
.alert {
  border-radius: 8px;
  font-size: 13px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-panel { padding: 20px 16px; }
  body { align-items: flex-start; }
  .container { padding-top: 1.5rem !important; }
}