/* === FORMULAIRES COMMUNS : login, mdp oublié, etc. === */

/* ----- Fond de page login (image, centrage vertical/horizontal, animation fade-in) ----- */
.login-page-bg {
  background: url('../images/xperium_bg-fallback.jpg') center center / cover no-repeat fixed;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
  box-sizing: border-box;
  overflow: hidden;
  animation: bgFadeIn 1s ease-out both;
}

/* ----- Conteneur du formulaire ----- */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: clamp(1.2rem, 1.8vw, 2rem) clamp(1rem, 1.4vw, 1.5rem);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: loginFadeInUp 1s ease-out both;
  width: 100%;
  max-width: 390px;
  backdrop-filter: blur(6px);
}

/* ----- Texte descriptif dans le formulaire ----- */
.login-container p {
  color: #ccc;
  font-size: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  text-align: center;
}

/* ----- Logo Xperium centré ----- */
.login-logo {
  width: clamp(36px, 12vw, 120px);
  height: auto;
  margin: 0 auto;
}

/* ----- Lien autour du logo (effet au survol) ----- */
.login-logo-link {
  display: inline-block;
  transition: transform 0.2s ease;
  text-align: center;
}
.login-logo-link:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* ----- Formulaire principal (login/mdp) ----- */
.login-container form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.login-container form label {
  color: #fff;
  font-weight: 500;
  font-size: clamp(0.84rem, 0.82rem + 0.08vw, 0.92rem);
}

/* ----- Champs texte, email, password ----- */
.login-container input[type="text"],
.login-container input[type="email"],
.login-container input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  color: #000;
  font-size: 0.95rem;
}

/* ----- Checkbox "se souvenir de moi" ----- */
.login-container .remember-me {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #ddd;
  font-size: clamp(0.8rem, 0.78rem + 0.08vw, 0.88rem);
}

/* ----- Bouton submit principal ----- */
/* ----- Bouton submit principal ----- */
.login-container button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0070f3;
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.2rem;
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 174, 239, 0.3);
  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              background 0.2s ease;
  width: 100%;
}

.login-container button[type="submit"]:hover {
  background: var(--color-primary, #00AEEF);       /* même hover que .btn-nouveau-projet */
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 174, 239, 0.4);
}


/* ----- Message de réponse (succès/erreur) ----- */
.login-response {
  text-align: center;
  font-size: clamp(0.82rem, 0.8rem + 0.08vw, 0.9rem);
  font-weight: 500;
  color: var(--color-danger);
}

/* ----- Animation shake en cas d'erreur formulaire ----- */
form.error {
  animation: shake 0.3s ease-in-out;
}

/* ----- Message d'erreur login (gros bloc rouge) ----- */
.login-error {
  color: var(--color-danger-text-on-bg) !important;
  background: var(--color-danger);
  padding: 0.7rem;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
  font-weight: 500;
  font-size: clamp(0.82rem, 0.8rem + 0.08vw, 0.9rem);
}

/* ----- Champ password avec icône visibilité ----- */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
/* Input password avec espace pour l'icône */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
  width: 100%;
  padding-right: 2.5em; /* espace pour l'icône */
  box-sizing: border-box;
}
/* Icône toggle visibility */
.password-wrapper .toggle-password {
  position: absolute;
  right: 0.5em;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05em;
  color: #999;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

/* === Animations === */
/* Animation fond qui fade in */
@keyframes bgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Animation conteneur qui monte et fade in */
@keyframes loginFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Animation shake pour erreurs */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* === Responsive mobile === */
@media (max-width: 480px) {
  .login-container {
    padding: 1.4rem 1rem;
    gap: 1rem;
  }

  .login-container form label {
    font-size: 0.88rem;
  }

  .login-container button[type="submit"] {
    padding: 0.72rem 1rem;
    font-size: 0.92rem;
  }
}


/* --- Correction visuelle du choix d'organisation --- */

.org-selection-area {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

/* Le SELECT : Fond blanc forcé, Texte noir forcé */
.login-select {
  width: 100% !important;
  height: 44px !important;
  padding: 0 0.9rem !important;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: #ffffff !important;
  color: #000000 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  box-sizing: border-box !important;
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
}

/* Le bouton CONTINUER : Copie conforme du bouton CONNEXION bleu */
.btn-submit-style {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #0070f3 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.75rem 1.2rem !important;
  border-radius: 0.5rem !important;
  font-weight: bold !important;
  font-size: 0.95rem !important;
  cursor: pointer;
  width: 100% !important;
  box-shadow: 0 4px 10px rgba(0, 112, 243, 0.3) !important;
  transition: all 0.2s ease !important;
  margin-top: 0.8rem;
}

.btn-submit-style:hover {
    background: #00AEEF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 174, 239, 0.4) !important;
}

/* Style du lien "Mot de passe oublié" en bas */
.forgot-password-link {
  margin-top: 1.2rem;
  text-align: center;
}

.forgot-password-link a {
  color: #00AEEF;
  text-decoration: none;
  font-size: clamp(0.82rem, 0.8rem + 0.08vw, 0.9rem);
}

.forgot-password-link a:hover {
    text-decoration: underline;
}



.turnstile-layout-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 14px 0 !important;
  min-height: 60px;
}

/* Version mini-rectangle pour que ce soit moins "moche" */
.turnstile-layout-container .cf-turnstile {
  transform: scale(0.68);
  transform-origin: center center;
}


@media (max-width: 1600px) and (min-width: 993px) {
  .login-page-bg {
    padding: 2rem 1rem;
  }

  .login-container {
    max-width: 360px;
    padding: 1.2rem 1rem;
    gap: 0.9rem;
  }

  .login-logo {
    width: 96px;
  }

  .login-container p {
    font-size: 0.82rem;
  }

  .login-container form {
    gap: 0.75rem;
  }

  .login-container form label {
    font-size: 0.84rem;
  }

  .login-container input[type="text"],
  .login-container input[type="email"],
  .login-container input[type="password"] {
    padding: 0.68rem 0.85rem;
    font-size: 0.9rem;
  }

  .login-container .remember-me {
    font-size: 0.8rem;
  }

  .login-container button[type="submit"],
  .btn-submit-style {
    font-size: 0.9rem !important;
    padding: 0.72rem 1rem !important;
  }

  .login-select {
    height: 42px !important;
    font-size: 0.9rem !important;
  }

  .forgot-password-link a {
    font-size: 0.82rem;
  }

  .turnstile-layout-container .cf-turnstile {
    transform: scale(0.64);
  }
}