/* ================================================================
   ESCOMPTE BANQUE — CSS AUTH (Login / Register)
   ================================================================ */

:root { --navy:#0A1F44; --gold:#C9A227; }

* { box-sizing:border-box; }
body.auth-page { margin:0; font-family:'DM Sans',Arial,sans-serif; background:#0A1F44; min-height:100vh; }

.auth-container { display:flex; min-height:100vh; }
.auth-container-lg .auth-right { max-width:560px; }

/* ── LEFT PANEL ──────────────────────────────────────────── */
.auth-left {
  flex:1; background:linear-gradient(160deg,#0A1F44 0%,#0d2855 50%,#091629 100%);
  padding:3rem; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; min-width:360px;
}
.auth-left::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.12),transparent 70%);
  pointer-events:none;
}
.auth-brand { display:flex; align-items:center; gap:.75rem; margin-bottom:3rem; }
.auth-brand-icon { width:48px; height:48px; background:rgba(201,162,39,.2); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.3rem; }
.auth-brand-name { font-size:1.1rem; font-weight:800; color:#fff; }
.auth-brand-sub  { font-size:.72rem; color:rgba(255,255,255,.5); }

.auth-stats { display:flex; flex-direction:column; gap:1.25rem; margin:2rem 0; }
.auth-stat { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.stat-n { font-size:1.4rem; font-weight:800; color:var(--gold); min-width:70px; }
.stat-l { font-size:.8rem; color:rgba(255,255,255,.6); }

.auth-features { display:flex; flex-direction:column; gap:.6rem; margin-top:2rem; }
.auth-feature { display:flex; align-items:center; gap:.6rem; font-size:.84rem; color:rgba(255,255,255,.7); }
.auth-feature i { color:var(--gold); width:16px; text-align:center; }

.auth-steps { display:flex; flex-direction:column; gap:.75rem; }
.auth-step  { display:flex; align-items:flex-start; gap:.75rem; }
.step-num   { width:28px; height:28px; background:rgba(201,162,39,.2); border:1px solid rgba(201,162,39,.4); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:var(--gold); flex-shrink:0; }
.auth-step strong { font-size:.83rem; font-weight:700; color:#fff; display:block; }
.auth-step p { font-size:.75rem; color:rgba(255,255,255,.5); margin:0; }

.auth-bonus-badge { background:rgba(201,162,39,.15); border:1px solid rgba(201,162,39,.3); border-radius:10px; padding:.75rem 1rem; color:var(--gold); font-size:.85rem; margin-top:1.5rem; display:flex; align-items:center; gap:.5rem; }

/* ── RIGHT PANEL ─────────────────────────────────────────── */
.auth-right { width:480px; background:#fff; display:flex; flex-direction:column; justify-content:center; padding:2.5rem; overflow-y:auto; }

.auth-back { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:#64748b; text-decoration:none; margin-bottom:2rem; transition:color .2s; }
.auth-back:hover { color:#0A1F44; }

.auth-form-wrap { max-width:400px; width:100%; margin:0 auto; }
.auth-title { font-size:1.5rem; font-weight:800; color:#0A1F44; margin-bottom:.25rem; }
.auth-sub   { font-size:.85rem; color:#64748b; margin-bottom:1.5rem; }

/* ── FORM CONTROLS ───────────────────────────────────────── */
.form-group { margin-bottom:0; }
.form-label { font-weight:600; font-size:.83rem; color:#374151; display:block; margin-bottom:.35rem; }
.form-control-auth { border:1.5px solid #e2e8f0; border-radius:10px; font-size:.875rem; padding:.65rem .9rem; width:100%; transition:border-color .2s, box-shadow .2s; }
.form-control-auth:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.12); outline:none; }
.input-icon-wrap { position:relative; }
.input-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.9rem; pointer-events:none; }
.input-icon-wrap .form-control-auth { padding-left:2.6rem; }
.toggle-pwd { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); border:none; background:none; color:#94a3b8; cursor:pointer; font-size:.9rem; padding:.25rem; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-auth-primary { display:block; width:100%; padding:.75rem; background:linear-gradient(135deg,#C9A227,#e8c547); color:#0A1F44; font-weight:700; font-size:.9rem; border:none; border-radius:10px; cursor:pointer; text-align:center; text-decoration:none; transition:all .2s; }
.btn-auth-primary:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(201,162,39,.35); }
.btn-auth-outline { display:block; width:100%; padding:.7rem; background:#fff; color:#0A1F44; font-weight:600; font-size:.875rem; border:1.5px solid #e2e8f0; border-radius:10px; cursor:pointer; text-align:center; text-decoration:none; transition:all .2s; }
.btn-auth-outline:hover { border-color:#0A1F44; }

.auth-link { color:var(--gold); font-size:.8rem; font-weight:600; text-decoration:none; }
.auth-link:hover { text-decoration:underline; }

.auth-divider { display:flex; align-items:center; gap:.75rem; margin:1.25rem 0; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:#e2e8f0; }
.auth-divider span { font-size:.75rem; color:#94a3b8; white-space:nowrap; }

.auth-notice { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:#94a3b8; margin-top:1.25rem; text-align:center; justify-content:center; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-left { display:none; }
  .auth-right { width:100%; padding:1.5rem; }
  .auth-container-lg .auth-right { max-width:100%; }
}

/* ── CORRECTIONS AUTH v2.0 ───────────────────────────────── */

/* Fix: Form validation feedback */
.form-control.is-invalid,
.form-control-auth.is-invalid {
  border-color: #E84545 !important;
  background-image: none;
}
.form-control.is-valid,
.form-control-auth.is-valid {
  border-color: #1CB87E !important;
  background-image: none;
}
.invalid-feedback { display: none; font-size: .78rem; color: #E84545; margin-top: .3rem; }
.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback { display: block; }

/* Fix: Responsive auth form sur mobile */
@media (max-width: 576px) {
  .auth-right { padding: 1.5rem 1rem; }
  .auth-form-wrap { max-width: 100%; }
  .auth-title { font-size: 1.3rem; }
  .row.g-3 .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* Fix: Bouton submit chargement */
.btn-auth-primary:disabled {
  opacity: .75;
  cursor: not-allowed;
  transform: none;
}