/* ==========================================
   FIX RESPONSIVE - LOGIN & REGISTER
   ========================================== */

/* Assurer que les styles s'appliquent correctement sur mobile */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Forcer le viewport sur mobile */
@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Correction pour les anciens navigateurs mobiles */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Assurer que le body prend toute la hauteur */
body {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* Correction spécifique pour mobile */
@media screen and (max-width: 768px) {
  /* Forcer les polices Google sur mobile */
  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');
  
  /* Assurer que les conteneurs ne débordent pas */
  .login-wrapper,
  .register-wrapper {
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
  }
  
  /* Correction du layout split-screen sur mobile */
  .login-wrapper,
  .register-wrapper {
    display: flex;
    flex-direction: column;
  }
  
  .login-left,
  .register-left {
    width: 100%;
    min-height: 100vh;
    padding: 1rem;
  }
  
  .login-right,
  .register-right {
    display: none;
  }
  
  /* Ajustement du formulaire sur mobile */
  .login-form,
  .register-form {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
  }
  
  /* Correction des inputs sur mobile */
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    max-width: 100%;
    font-size: 16px; /* Éviter le zoom sur iOS */
    padding: 1rem;
  }
  
  /* Correction des boutons sur mobile */
  .btn {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    padding: 1rem;
    margin-bottom: 0.5rem;
  }
  
  /* Correction du logo sur mobile */
  .logo-image {
    width: 60px;
    height: 60px;
  }
  
  .logo-container {
    margin-bottom: 1rem;
  }
  
  /* Correction des titres sur mobile */
  .login-title,
  .register-title {
    font-size: 1.5rem;
    text-align: center;
  }
  
  .login-subtitle,
  .register-subtitle {
    font-size: 0.875rem;
    text-align: center;
  }
}

/* Correction spécifique pour très petits écrans */
@media screen and (max-width: 480px) {
  .login-left,
  .register-left {
    padding: 0.5rem;
  }
  
  .login-form,
  .register-form {
    padding: 0.75rem;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    padding: 0.875rem;
    font-size: 14px;
  }
  
  .btn {
    padding: 0.875rem;
    font-size: 14px;
  }
  
  .logo-image {
    width: 50px;
    height: 50px;
  }
  
  .login-title,
  .register-title {
    font-size: 1.25rem;
  }
}

/* Correction pour iPad et tablettes */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .login-wrapper,
  .register-wrapper {
    min-height: 100vh;
  }
  
  .login-left,
  .register-left {
    width: 50%;
    padding: 2rem;
  }
  
  .login-right,
  .register-right {
    width: 50%;
  }
}

/* Forcer le chargement des polices */
@font-face {
  font-family: 'Inter';
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('https://fonts.gstatic.com/s/cinzel/v23/8vIJ7ww63mVu7gt7kAT8JE3BdkE.woff2') format('woff2');
  font-display: swap;
}

/* Correction pour les navigateurs mobiles spécifiques */
/* Safari iOS */
@supports (-webkit-touch-callout: none) {
  .login-wrapper,
  .register-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
  }
}

/* Chrome Android */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .form-input,
  .form-select,
  .form-textarea {
    -webkit-user-select: text;
    user-select: text;
  }
}