/* ============================================================
   Ebokoli — Design unifié des pages d'authentification
   Connexion · Inscription · Mot de passe oublié · Activation · Onboarding
   ------------------------------------------------------------
   Remplace les <style> dupliqués qui existaient séparément dans
   _sign_form.tpl et reset.tpl (même règles copiées-collées deux
   fois, avec des trous différents en mode sombre selon le fichier).
   Un seul fichier, chargé une fois, pour que toutes les pages
   d'authentification soient visuellement identiques en clair
   comme en sombre.
   ============================================================ */

.card-register-modern {
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.07);
  position: relative;
}

body.night-mode .card-register-modern {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* ---------- onglets Connexion / Inscription ---------- */
.card-register-modern .auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--body-bg-color);
  padding: 6px;
  border-radius: 14px;
  margin-bottom: 20px;
}

body.night-mode .card-register-modern .auth-tabs {
  /* était : var(--body-bg-color) même en mode nuit -> fond clair visible
     dans une carte sombre. Corrigé avec la variable d'input sombre. */
  background: var(--card-dark-input);
}

.card-register-modern .auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #8898aa;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-register-modern .auth-tab:hover {
  color: var(--link-color);
}

.card-register-modern .auth-tab.active {
  background: #fff;
  color: var(--link-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.night-mode .card-register-modern .auth-tab.active {
  background: var(--card-dark-hover);
  color: #fff;
}

/* ---------- en-tête de carte ---------- */
.card-register-modern .card-header {
  padding: 0 0 12px;
  text-align: center;
}

.card-register-modern .card-header .card-title {
  font-size: 1.5em;
  font-weight: 800;
  margin-bottom: 8px;
}

.card-register-modern .card-header .card-subtitle {
  font-size: 14px;
  margin: 0;
  color: #8898aa;
}

body.night-mode .card-register-modern .card-header .card-subtitle {
  color: #8f9ba5;
}

/* ---------- lien retour (mot de passe oublié) ---------- */
.card-register-modern .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #8898aa;
  text-decoration: none;
  margin-bottom: 8px;
}

.card-register-modern .back-link:hover {
  color: var(--link-color);
}

/* ---------- champs de saisie ---------- */
.card-register-modern .form-control,
.card-register-modern .form-select {
  border-radius: 14px;
  height: 54px;
  border-color: #e9ecef;
}

body.night-mode .card-register-modern .form-control,
body.night-mode .card-register-modern .form-select {
  /* était : pas de règle -> bordure claire #e9ecef quasi invisible sur fond sombre */
  background: var(--card-dark-input);
  color: var(--card-dark-input-color);
  border-color: var(--card-dark-divider);
}

.card-register-modern .input-group > .input-group-text {
  border-radius: 14px 0 0 14px;
  border-color: #e9ecef;
}

body.night-mode .card-register-modern .input-group > .input-group-text {
  background: var(--card-dark-input);
  border-color: var(--card-dark-divider);
  color: var(--card-dark-input-color);
}

.card-register-modern .input-group .js_toggle-password {
  border-radius: 0 14px 14px 0;
  border-color: #e9ecef;
  cursor: pointer;
}

body.night-mode .card-register-modern .input-group .js_toggle-password {
  background: var(--card-dark-input);
  border-color: var(--card-dark-divider);
  color: var(--card-dark-input-color);
}

.card-register-modern .form-control:focus {
  border-color: var(--link-color);
  box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.12);
}

.card-register-modern .btn-lg {
  border-radius: 14px;
  padding: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.card-register-modern .row-names {
  --bs-gutter-x: 10px;
}

.card-register-modern .extra-fields {
  border-top: 1px dashed #e9ecef;
  margin-top: 4px;
  padding-top: 16px;
}

body.night-mode .card-register-modern .extra-fields {
  border-top-color: var(--card-dark-divider);
}

.card-register-modern .extra-fields-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8898aa;
  font-weight: 700;
  margin-bottom: 12px;
}

@media (max-width: 420px) {
  .card-register-modern .row-names {
    display: block;
  }
  .card-register-modern .row-names .col-6 {
    width: 100%;
  }
}

/* ============================================================
   Étend le même langage visuel aux pages sans carte "connexion"
   classique : activation de compte et onboarding (started.tpl).
   Remplace l'ancien bandeau "page-header" (image flottante + cercles
   décoratifs, non harmonisé et non testé en mode sombre) par un
   en-tête simple, cohérent avec le reste du parcours d'authentification.
   ============================================================ */
.auth-page-header {
  text-align: center;
  padding: 36px 16px 4px;
}

.auth-page-header h2 {
  font-weight: 800;
  margin-bottom: 6px;
}

.auth-page-header .text-xlg {
  color: #8898aa;
}

body.night-mode .auth-page-header .text-xlg {
  color: #8f9ba5;
}

/* boutons ronds harmonisés (activation, onboarding) */
.card-register-modern .btn.rounded-pill {
  padding: 10px 22px;
  font-weight: 600;
}