/* =============================================================
   LE BOUTON « AFFICHER LE MOT DE PASSE »
   (posé par public/js/mot-de-passe-visible.js)

   Son `top`/`left` sont calculés par le script d'après le champ ; ici
   on ne décrit que son apparence et son ancrage.
   ============================================================= */
.mdp-oeil {
  position: absolute;
  /* Le script donne le bord DROIT et le CENTRE vertical du champ ; la
     translation ramène le bouton dessus. */
  transform: translate(-100%, -50%);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #8a8580;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}

.mdp-oeil:hover {
  color: #191817;
  background: rgba(25, 24, 23, 0.06);
}

/* Mot de passe affiché : l'œil passe au rouge de la marque. C'est un
   état qui expose quelque chose à l'écran — il doit se voir. */
.mdp-oeil.est-visible {
  color: #ff6363;
}

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

.mdp-oeil .ico {
  /* La ligature a besoin de sa fonte : Material Symbols Rounded est
     chargée par les gabarits, mais aucune feuille ne la POSE — sans
     cette règle, « visibility » s'afficherait en toutes lettres. */
  font-family: "Material Symbols Rounded";
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* Le navigateur pose parfois son propre bouton de révélation (Edge,
   Safari) : deux yeux côte à côte, dont un qui ne suit pas notre
   dessin. */
input[data-mdp-oeil]::-ms-reveal,
input[data-mdp-oeil]::-webkit-credentials-auto-fill-button {
  display: none;
}