/* Champ mot de passe avec bouton « œil » (js/afficher-mot-de-passe.js) */
.mdp-champ {
  position: relative;
  display: block;
}

.mdp-champ input {
  width: 100%;
  padding-right: 48px !important;   /* place pour le bouton, quel que soit le style du formulaire */
  box-sizing: border-box;
}

/* Masque l'œil natif d'Edge pour ne pas en avoir deux */
.mdp-champ input::-ms-reveal,
.mdp-champ input::-ms-clear {
  display: none;
}

.mdp-oeil {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #5b6b7f;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.mdp-oeil:hover {
  color: #003366;
  background: rgba(0, 51, 102, .08);
}

.mdp-oeil:focus-visible {
  outline: 2px solid #003366;
  outline-offset: 1px;
}

.mdp-oeil[aria-pressed="true"] {
  color: #003366;
}

/* Étape « code de double authentification » (login.html) */
.auth-mfa-intro {
  margin: 0 0 16px;
  line-height: 1.5;
  color: #444;
}

.auth-mfa-code {
  font-size: 1.6rem !important;
  letter-spacing: .45em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-mfa-code::placeholder {
  letter-spacing: .45em;
  color: #c3c9d1;
}

.auth-mfa-aide {
  text-align: center;
  margin-top: 4px;
  font-size: .85rem;
  color: #666;
  line-height: 1.45;
}