/* ─────────────────────────────────────────────────────────────────────────────
   auth.css — styles structurels partagés par toutes les pages d'authentification
   Les couleurs de marque sont définies via CSS custom properties.
   Chaque thème (static/themes/<theme>/theme.css) les surcharge au besoin.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Variables par défaut (thème public) ──────────────────────────────────── */
:root {
  --auth-bg:           #F5F7FB;
  --auth-accent:       #2563FF;
  --auth-btn:          #2563FF;
  --auth-btn-hover:    #1E50CC;
  --auth-focus-ring:   rgba(37, 99, 255, 0.12);
  --auth-btn-shadow:   rgba(37, 99, 255, 0.28);
  --auth-link:         #2563FF;
}

/* ── Reset + base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  background: var(--auth-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ── Carte centrale ───────────────────────────────────────────────────────── */
/* .login-card (login/signup) et .card (pages password) sont identiques */
.login-card,
.card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 48px rgba(16, 24, 43, 0.10);
  padding: 48px 44px 40px;
  width: 100%;
  max-width: 430px;
}
.card-center { text-align: center; }

/* ── Logo / icône app ─────────────────────────────────────────────────────── */
.app-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.app-icon img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

/* ── Typographie ──────────────────────────────────────────────────────────── */
.login-title,
.title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #10182B;
  text-align: center;
  margin-bottom: 7px;
  letter-spacing: -0.5px;
}
.title { font-size: 1.5rem; margin-bottom: 8px; }

.login-subtitle,
.subtitle {
  font-size: .9rem;
  color: #6B7280;
  text-align: center;
  margin-bottom: 36px;
  line-height: 1.5;
}
.subtitle { font-size: .88rem; }

/* ── Champs de formulaire ─────────────────────────────────────────────────── */
.field-group { margin-bottom: 20px; }
.field-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: #10182B;
  margin-bottom: 8px;
}
.field-input {
  width: 100%;
  background: #F5F7FB;
  border: 1.5px solid #E5E7EE;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: .95rem;
  font-family: inherit;
  color: #10182B;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-input:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px var(--auth-focus-ring);
  background: #fff;
}
.field-input::placeholder { color: #94A3B8; }
.field-error {
  color: #FF4D3D;
  font-size: .78rem;
  margin-top: 6px;
}
.form-errors {
  background: #FFF1F0;
  border: 1px solid #FFCBC6;
  border-radius: 10px;
  padding: 10px 14px;
  color: #B83626;
  font-size: .85rem;
  margin-bottom: 20px;
}

/* ── Ligne remember / mot de passe oublié (login) ────────────────────────── */
.form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: #6B7280;
  cursor: pointer;
  user-select: none;
}
.remember-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--auth-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.forgot-link {
  font-size: .85rem;
  color: var(--auth-link);
  font-weight: 600;
  text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; }

/* ── Boutons principaux ───────────────────────────────────────────────────── */
/* .btn-login (login/signup), .btn-submit, .btn-back, .btn-link partagent le même style */
.btn-login,
.btn-submit,
.btn-back,
.btn-link {
  background: var(--auth-btn);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: .97rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition: background .18s, transform .15s, box-shadow .18s;
  letter-spacing: .2px;
}
.btn-login,
.btn-submit { width: 100%; }

.btn-login:hover,
.btn-submit:hover,
.btn-back:hover,
.btn-link:hover {
  background: var(--auth-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--auth-btn-shadow);
  color: #fff;
}

/* ── Icône emoji (pages confirmation) ────────────────────────────────────── */
.icon {
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 24px;
}

/* ── Boîte info (password_reset_done) ────────────────────────────────────── */
.info-box {
  background: #F4FBDA;
  border: 1px solid #D7F08A;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: .85rem;
  color: #5C8C00;
  margin-bottom: 32px;
  text-align: left;
  line-height: 1.5;
}

/* ── Boîte erreur (token expiré) ──────────────────────────────────────────── */
.error-box {
  background: #FFF1F0;
  border: 1px solid #FFCBC6;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  color: #B83626;
}
.error-box .icon { font-size: 2.5rem; margin-bottom: 12px; }
.error-box p { font-size: .9rem; margin-bottom: 20px; line-height: 1.5; }

/* ── Lien bas de page (vers signup / login) ───────────────────────────────── */
.bottom-link {
  text-align: center;
  margin-top: 24px;
  font-size: .85rem;
  color: #6B7280;
}
.bottom-link a {
  color: var(--auth-link);
  font-weight: 600;
  text-decoration: none;
}
.bottom-link a:hover { text-decoration: underline; }
.back-link {
  text-align: center;
  margin-top: 24px;
  font-size: .85rem;
  color: #6B7280;
}
.back-link a {
  color: var(--auth-link);
  font-weight: 600;
  text-decoration: none;
}
.back-link a:hover { text-decoration: underline; }