/* ============================================
   📱 LOGIN PAGE RESPONSIVE
   Optimisation mobile de la page de connexion
   ============================================ */

/* ============================================
   📱 BREAKPOINT : MAX-WIDTH 991px
   Tablette et mobile
   ============================================ */

@media screen and (max-width: 991px) {

  .main_login {
    flex-direction: column;
    min-height: 100vh;
  }

  /* Masquer la partie gauche sur mobile */
  .login_left {
    display: none;
  }

  .login_right {
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 40px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .connecter_box {
    padding-top: 0;
    max-width: 500px;
    width: 100%;
  }

  .connecter_title,
  .register_title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 10px;
  }

  /* Ajout du logo sur mobile */
  .connecter_box::before {
    content: '';
    display: block;
    width: 120px;
    height: 40px;
    margin: 0 auto 30px;
    background-image: url("../images/hero_logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  #login_email,
  #password {
    height: 55px;
    font-size: 16px;
    padding: 15px;
  }

  .nextLogin {
    height: 55px;
    font-size: 16px;
    margin-top: 25px;
  }

  .new_compte_login {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    margin-top: 25px;
  }

  .new_compte_text {
    font-size: 16px;
  }

  .newRegister,
  .newLogin {
    font-size: 16px;
    margin-left: 0;
    margin-top: 10px;
  }

  .conditions {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    margin-top: 25px;
  }

  .email_input {
    width: 100%;
  }

  #toggler {
    right: 15px;
    font-size: 18px;
  }
}

/* ============================================
   📱 BREAKPOINT : MAX-WIDTH 650px
   Mobile standard
   ============================================ */

@media screen and (max-width: 650px) {

  .login_right {
    padding: 30px 15px;
  }

  .connecter_box::before {
    width: 100px;
    height: 35px;
    margin-bottom: 25px;
  }

  .connecter_title,
  .register_title {
    font-size: 24px;
  }

  #login_email,
  #password {
    height: 50px;
    font-size: 15px;
    padding: 12px;
  }

  .nextLogin {
    height: 50px;
    font-size: 15px;
    padding: 15px 20px;
  }

  .new_compte_text {
    font-size: 15px;
  }

  .newRegister,
  .newLogin {
    font-size: 15px;
  }

  .conditions {
    font-size: 13px;
    line-height: 22px;
    margin-top: 20px;
  }

  .text-danger {
    font-size: 14px;
    margin-top: 8px;
  }
}

/* ============================================
   📱 BREAKPOINT : MAX-WIDTH 480px
   Petits mobiles
   ============================================ */

@media screen and (max-width: 480px) {

  .login_right {
    padding: 20px 12px;
  }

  .connecter_box {
    max-width: 100%;
  }

  .connecter_box::before {
    width: 90px;
    height: 30px;
    margin-bottom: 20px;
  }

  .connecter_title,
  .register_title {
    font-size: 22px;
  }

  #login_email,
  #password {
    height: 48px;
    font-size: 14px;
    padding: 12px;
  }

  .nextLogin {
    height: 48px;
    font-size: 14px;
    padding: 14px 18px;
    margin-top: 20px;
  }

  .new_compte_login {
    gap: 12px;
    margin-top: 20px;
  }

  .new_compte_text {
    font-size: 14px;
  }

  .newRegister,
  .newLogin {
    font-size: 14px;
  }

  .conditions {
    font-size: 12px;
    line-height: 20px;
    margin-top: 15px;
  }

  .text-danger {
    font-size: 13px;
    margin-top: 6px;
  }

  #toggler {
    right: 12px;
    font-size: 16px;
  }
}

/* ============================================
   📱 BREAKPOINT : MAX-WIDTH 360px
   Très petits mobiles (iPhone SE)
   ============================================ */

@media screen and (max-width: 360px) {

  .login_right {
    padding: 15px 10px;
  }

  .connecter_box::before {
    width: 80px;
    height: 28px;
    margin-bottom: 15px;
  }

  .connecter_title,
  .register_title {
    font-size: 20px;
  }

  #login_email,
  #password {
    height: 45px;
    font-size: 13px;
    padding: 10px;
  }

  .nextLogin {
    height: 45px;
    font-size: 13px;
    padding: 12px 16px;
    margin-top: 15px;
  }

  .new_compte_login {
    gap: 10px;
    margin-top: 15px;
  }

  .new_compte_text {
    font-size: 13px;
  }

  .newRegister,
  .newLogin {
    font-size: 13px;
  }

  .conditions {
    font-size: 11px;
    line-height: 18px;
    margin-top: 12px;
  }

  .text-danger {
    font-size: 12px;
  }

  #toggler {
    right: 10px;
    font-size: 14px;
  }
}

/* ============================================
   🎨 AMÉLIORATIONS TACTILES
   ============================================ */

@media (max-width: 991px) {

  /* Amélioration du touch feedback */
  .nextLogin:active {
    transform: scale(0.98);
  }

  .newRegister:active,
  .newLogin:active {
    opacity: 0.7;
  }

  /* Focus accessibility sur mobile */
  #login_email:focus,
  #password:focus {
    border: 2px solid #50358C;
    outline: none;
  }

  /* Meilleure zone de touch pour l'icône de l'œil */
  #toggler {
    padding: 10px;
    z-index: 10;
  }
}

/* ============================================
   🌐 ORIENTATION PAYSAGE MOBILE
   ============================================ */

@media screen and (max-width: 991px) and (orientation: landscape) {

  .login_right {
    min-height: auto;
    padding: 20px 15px;
  }

  .connecter_box {
    padding-top: 0;
  }

  .connecter_box::before {
    margin-bottom: 15px;
  }

  .connecter_title,
  .register_title {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .nextLogin {
    margin-top: 15px;
  }

  .new_compte_login {
    margin-top: 15px;
  }

  .conditions {
    margin-top: 15px;
  }
}

/* ============================================
   🍎 CORRECTIONS iOS SAFARI
   Force les couleurs correctes sur iPhone
   ============================================ */

@supports (-webkit-touch-callout: none) {
  /* Reset général */
  a, button {
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
  }

  /* Bouton de connexion - texte blanc sur fond violet */
  .nextLogin {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    background-color: #5c3aa7 !important;
  }

  .nextLogin:hover {
    background-color: #321374 !important;
  }

  /* Liens de navigation - texte violet */
  .newRegister,
  .newLogin,
  .blue {
    -webkit-text-fill-color: #514ee9 !important;
    color: #514ee9 !important;
  }

  .newRegister:hover,
  .newLogin:hover {
    -webkit-text-fill-color: #2f2dd6 !important;
    color: #2f2dd6 !important;
  }

  /* Liens normaux */
  a:link,
  a:visited,
  a:hover,
  a:active {
    -webkit-text-fill-color: inherit !important;
  }
}