/* ======================================================
   AUTHENTIFICATION — connexion / création de compte
====================================================== */
.auth-shell { min-height: calc(100vh - 73px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-visual {
  background: linear-gradient(155deg, #8a6d57 0%, #5a4534 45%, #2B1B12 100%);
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.auth-visual::before {
  content: ""; position: absolute; inset: 0; opacity: 0.14; pointer-events: none;
  background-image: radial-gradient(circle at 20% 25%, rgba(255,255,255,0.5) 0, transparent 3%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0, transparent 3%);
}
.auth-visual-top { position: relative; }
.auth-visual h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); margin: 18px 0 10px; position: relative; color: #fff; }
.auth-visual h2 span { color: var(--nadia-orange-400); }
.auth-visual p.lead { opacity: 0.85; font-size: var(--text-md); max-width: 400px; position: relative; }
.auth-visual-stats { display: flex; gap: 32px; position: relative; }
.auth-visual-quote { position: relative; font-style: italic; opacity: 0.85; font-size: var(--text-sm); border-left: 2px solid var(--nadia-orange-400); padding-left: 14px; max-width: 380px; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 32px; background: var(--nadia-cream-100); }
.auth-card { width: 100%; max-width: 400px; }
.auth-tabs { display: flex; background: #fff; border-radius: var(--radius-pill); padding: 4px; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.auth-tab { flex: 1; text-align: center; padding: 10px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); cursor: pointer; background: none; border: none; font-family: var(--font-body); }
.auth-tab.active { background: var(--color-primary); color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form h1 { font-size: var(--text-xl); margin-bottom: 2px; }
.auth-form .auth-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 6px; }
.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-options-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); }
.auth-checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-body); cursor: pointer; }
.auth-checkbox input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.auth-link { color: var(--color-primary-active); font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
.auth-switch { text-align: center; font-size: var(--text-sm); color: var(--color-text-body); margin-top: 6px; }
.pane { display: none; }
.pane.active { display: flex; flex-direction: column; gap: 16px; }
.password-field { position: relative; }
.password-field .toggle-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-text-muted); cursor: pointer; display: flex; }
.password-field .toggle-eye .bi { font-size: 17px; }
.password-field input { padding-right: 40px; }

/* Écran d'activation de compte */
.auth-message { max-width: 520px; margin: 70px auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 44px 40px; text-align: center; color: var(--color-text-muted); }
.auth-message .bi { font-size: 40px; display: block; margin: 0 auto 16px; }
.auth-message .bi-check-circle-fill { color: var(--nadia-service-green); }
.auth-message .bi-exclamation-circle-fill { color: var(--color-primary); }
.auth-message h1 { font-size: var(--text-2xl); margin-bottom: 10px; }
.auth-message p { font-size: var(--text-sm); margin: 0 0 22px; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { padding: 32px 20px; }
}

/* Lien « Mot de passe oublié ? » : aligné à droite, sous le champ */
.auth-oubli { text-align: right; margin-top: -6px; font-size: var(--text-sm); }