/* ==========================================================================
   RESTRICTIONS ET CORRECTIONS STRICTES CONTRE LES SURCHARGES BOOTSTRAP
   ========================================================================== */

/* Gestion stricte des arrondis de la marque et des composants */
.login-brand-mark {
  border-radius: var(--r-md, 8px) !important;
}

/* Redéfinition du champ Email d'origine (Taille fine et focus précis) */
.custom-input {
  height: 46px !important;
  border: 1.5px solid var(--c-border, #dee2e6) !important;
  border-radius: var(--r-md, 8px) !important;
  padding: 0 var(--sp-4, 1rem) !important;
  box-shadow: none !important;
  transition: border-color var(--dur, 0.2s), box-shadow var(--dur, 0.2s) !important;
}

.custom-input:focus {
  border-color: var(--app-tertiary, #ffa800) !important;
  background-color: var(--c-surface, #fff) !important;
  box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.15) !important;
}

/* Redéfinition des boutons pour correspondre au pixel près */
.custom-btn {
  height: 50px !important;
  background-color: var(--app-tertiary, #ffa800) !important;
  border: none !important;
  border-radius: var(--r-md, 8px) !important;
  color: #ffffff !important;
  transition: background var(--dur, 0.2s), transform var(--dur, 0.2s) !important;
}

.custom-btn:hover {
  background-color: var(--c-accent-dk, #e09300) !important;
}

.custom-btn:active {
  transform: scale(0.98) !important;
}

/* Encadré d'avertissement OTP */
.custom-notice {
  border-radius: var(--r-md, 8px) !important;
}
.custom-notice .notice-icon {
  border-radius: var(--r-sm, 6px) !important;
  background-color: var(--app-tertiary, #ffa800) !important;
}

/* Fix et alignement strict pour les inputs OTP */
.otp-row .otp-input {
  width: 52px !important;
  height: 56px !important;
  flex: 0 0 52px !important;
  max-width: 52px !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--c-border, #dee2e6) !important;
  border-radius: var(--r-md, 8px) !important;
  box-shadow: none !important;
}

.otp-row .otp-input:focus,
.otp-row .otp-input.filled {
  border-color: var(--app-tertiary, #ffa800) !important;
  background-color: rgba(255, 168, 0, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.15) !important;
}

.otp-sep {
  background-color: var(--c-border-dk, #ced4da) !important;
}

/* Ajustements responsives sur petits écrans */
@media (max-width: 520px) {
  .otp-row .otp-input {
    width: 44px !important;
    height: 50px !important;
    flex: 0 0 44px !important;
    max-width: 44px !important;
    font-size: 1.2rem !important;
  }
}

/* ---- PANNEAU GAUCHE COMPLÉMENTS ---- */
.login-left {
  /* Fond marron très foncé exclusif pour donner du contraste au branding */
  background-color: #3b2600; 
  position: relative;
  overflow: hidden;
}

/* Cercles décoratifs d'ambiance lumineuse */
.login-left::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255, 168, 0, 0.06);
}

.login-left::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255, 168, 0, 0.04);
}

.login-brand-mark {
  width: 42px;
  height: 42px;
  background-color: var(--app-tertiary);
}

.feat-dot {
  width: 6px;
  height: 6px;
  background-color: var(--app-tertiary);
  flex-shrink: 0;
}