/**
 * CEMôme Auth Styles
 * Styles unifiés pour Login et Register
 * Remplace loginform/style.css et registerform/style.css
 */

/**
 * AUTH PAGE LAYOUT
 * Layout spécifique aux pages d'authentification
 */

.auth-page {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
}

/**
 * LOGIN PAGE BACKGROUND
 * Background image spécifique à la page de connexion
 */

.auth-page.login-page {
  background:
    linear-gradient(rgba(248, 249, 250, 0.6), rgba(233, 236, 239, 0.6)),
    url("../loginform/images/login-I0IC-Yv.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/**
 * REGISTER PAGE BACKGROUND
 * Background image spécifique à la page d'inscription
 */

.auth-page.register-page {
  background:
    linear-gradient(rgba(248, 249, 250, 0.6), rgba(233, 236, 239, 0.6)),
    url("../registerform/images/register-Lnk_9gh.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.auth-page .cemome-page-content {
  background: transparent;
  display: flex;
  align-items: center;
  min-height: 70vh;
}

/**
 * AUTH CARD
 * Carte de connexion/inscription
 */

.auth-page .cemome-card {
  box-shadow: var(--cemome-shadow-xl);
  border-radius: var(--cemome-radius-2xl);
  overflow: hidden;
}

/**
 * LOGIN & REGISTER CARD ENHANCEMENTS
 * Améliorations de la carte pour les pages avec background
 */

.auth-page.login-page .cemome-card,
.auth-page.register-page .cemome-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--cemome-shadow-2xl);
}

.auth-page .cemome-card-content {
  padding: var(--cemome-space-12) var(--cemome-space-8);
}

.auth-page .cemome-card-title {
  font-size: var(--cemome-fs-2xl);
  margin-bottom: var(--cemome-space-6);
}

/**
 * AUTH FORMS
 * Styles formulaires de connexion/inscription
 */

.auth-form {
  text-align: left;
}

.auth-form .form-group {
  margin-bottom: var(--cemome-space-5);
}

.auth-form label {
  font-weight: var(--cemome-fw-medium);
  color: var(--cemome-text-primary);
  margin-bottom: var(--cemome-space-2);
  display: block;
}

.auth-form .form-control {
  padding: var(--cemome-space-4);
  font-size: var(--cemome-fs-base);
  border: 2px solid var(--cemome-border-light);
  border-radius: var(--cemome-radius-lg);
  transition: var(--cemome-transition-base);
}

.auth-form .form-control:focus {
  border-color: var(--cemome-primary);
  box-shadow: var(--cemome-form-focus-shadow);
  transform: translateY(-1px);
}

.auth-form .btn-primary {
  width: 100%;
  padding: var(--cemome-space-4);
  font-size: var(--cemome-fs-base);
  font-weight: var(--cemome-fw-semibold);
  margin-top: var(--cemome-space-4);
}

/**
 * AUTH STATES & FEEDBACK
 * États de validation et feedback utilisateur
 */

.auth-form .form-control.is-invalid {
  border-color: var(--cemome-error);
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.auth-form .form-control.is-valid {
  border-color: var(--cemome-success);
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.auth-form .invalid-feedback,
.auth-form .valid-feedback {
  font-size: var(--cemome-fs-sm);
  margin-top: var(--cemome-space-2);
}

/**
 * AUTH LINKS & ACTIONS
 * Liens secondaires et actions
 */

.auth-links {
  margin-top: var(--cemome-space-6);
  text-align: center;
}

.auth-links a {
  color: var(--cemome-primary);
  font-size: var(--cemome-fs-sm);
  text-decoration: none;
}

.auth-links a:hover {
  color: var(--cemome-primary-dark);
  text-decoration: underline;
}

.auth-divider {
  margin: var(--cemome-space-6) 0;
  text-align: center;
  position: relative;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cemome-border-light);
}

.auth-divider span {
  background: var(--cemome-bg-primary);
  padding: 0 var(--cemome-space-4);
  color: var(--cemome-text-secondary);
  font-size: var(--cemome-fs-sm);
}

/**
 * 2FA SPECIFIC STYLES
 * Styles pour authentification à deux facteurs
 */

.auth-2fa .verification-code {
  font-family: var(--cemome-font-mono);
  font-size: var(--cemome-fs-xl);
  text-align: center;
  letter-spacing: 0.5em;
}

/**
 * PASSWORD RESET STYLES
 * Styles pour réinitialisation mot de passe
 */

.auth-reset .info-box {
  background: var(--cemome-bg-light);
  border-radius: var(--cemome-radius-lg);
  padding: var(--cemome-space-5);
  margin: var(--cemome-space-4) 0;
}

.auth-reset .info-box i {
  color: var(--cemome-info);
  font-size: var(--cemome-fs-xl);
  margin-bottom: var(--cemome-space-3);
}


/**
 * RESPONSIVE AUTH
 * Adaptations mobile pour authentification
 */

@media (max-width: 767px) {
  .auth-page .cemome-card-content {
    padding: var(--cemome-space-8) var(--cemome-space-5);
  }

  .auth-page .cemome-card-title {
    font-size: var(--cemome-fs-xl);
  }

  .auth-form .form-control {
    padding: var(--cemome-space-3);
  }
}

@media (max-width: 576px) {
  .auth-page .cemome-card {
    margin: var(--cemome-space-4);
  }

  .auth-page .cemome-card-content {
    padding: var(--cemome-space-6) var(--cemome-space-4);
  }
}