/* Container card (reutilise le style du form d'inscription) */
.apps86-card {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
  font-family: system-ui, sans-serif;
}
.apps86-logo img {
  max-width: 180px !important;
  margin-bottom: 1rem;
}
.apps86-title {
  font-size: 1.25rem;
  /* margin-bottom: 1.5rem; */
  color: #004459;
  font-weight: 600;
}

/* Fields */
#apps86-form-setpwd .apps86-field {
  margin-bottom: 1rem;
  text-align: left;
}
#apps86-form-setpwd label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #374151;
}
#apps86-form-setpwd input[type="password"] {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d1d5db;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-top: 0 !important;
}

#apps86-form-setpwd .set-password-input {
  border-radius: 9999px !important;
  font-size: 0.95rem !important;
  padding: 0.65rem 0.8rem;
  margin-top: 0 !important;
}

#apps86-form-setpwd input[type="password"]:focus {
  outline: none;
  border-color: #004459;
  box-shadow: 0 0 0 2px rgba(0, 68, 89, 0.25);
}

/* Bouton principal */
.apps86-btn-wrapper {
  margin-top: 1.2rem;
}
.apps86-btn {
  background: #004459 !important;
  color: #fff;
  padding: 0.7rem 1.6rem !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, transform 0.1s;
}
.apps86-btn:hover,
.apps86-btn:focus {
  background: #004459 !important;
  color: #fff !important;
}
.apps86-btn:focus {
  box-shadow: 0 0 0 3px rgba(0, 68, 89, 0.3);
}
.apps86-btn:active {
  transform: scale(0.97);
}
.apps86-feedback {
  margin-top: 1rem;
  min-height: 1.2em;
}

/* SweetAlert2 buttons (tes couleurs fixes) */
.swal2-cancel-custom {
  background-color: #6e7881 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}
.swal2-cancel-custom:hover,
.swal2-cancel-custom:focus,
.swal2-cancel-custom:active {
  background-color: #6e7881 !important;
  color: #fff !important;
  outline: none !important;
}

.swal2-confirm-custom {
  background-color: #004459 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}
.swal2-confirm-custom:hover,
.swal2-confirm-custom:focus,
.swal2-confirm-custom:active {
  background-color: #004459 !important;
  color: #fff !important;
  outline: none !important;
}

/* Wrapper = le "vrai" champ (bordure + arrondis ici) */
.apps86-input-wrapper {
  display: flex;
  align-items: stretch;           /* le bouton prendra toute la hauteur */
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  overflow: hidden;               /* évite les débordements sur les arrondis */
}

/* L'input devient "plat" (pas de bordure ni radius) et prend toute la place */
.apps86-input-wrapper input {
  flex: 1;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem !important;
  min-height: 44px;               /* hit-area accessible */
  outline: none;
}

/* Focus global sur le wrapper quand on est dans l'input ou sur le bouton */
.apps86-input-wrapper:focus-within {
  border-color: #004459;
  box-shadow: 0 0 0 2px rgba(0, 68, 89, 0.25);
}

/* Bouton œil : dans le flux, même hauteur que le wrapper */
.apps86-toggle-eye {
  width: 2.75rem;                 /* ~44px */
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* pas de border-radius : c’est le wrapper qui gère */
}

/* Pas de styles de focus agressifs : on s’appuie sur :focus-within du wrapper */
.apps86-toggle-eye:focus,
.apps86-toggle-eye:hover {
  background: transparent;
  outline: none;
}

/* IMPORTANT : neutraliser l’ancien radius/padding de l’input "pill" */
#apps86-form-setpwd .set-password-input{
  border-radius: 0 !important;
  padding: 0.65rem 0.9rem;        /* cohérent avec ci-dessus */
}
#apps86-form-setpwd input[type="password"]{
  border: 0;                      /* la bordure est sur le wrapper */
  box-shadow: none;               /* évite double focus */
}


.apps86-toggle-eye:focus {
  outline: 0px solid currentColor;
  outline-offset: 0px;
  background-color: transparent;
}

.apps86-toggle-eye:hover {
  background-color: transparent;
}