/* Bouton oeil (afficher/masquer le mot de passe) */

/* Parent direct de l'input : repere d'ancrage (l'oeil est positionne en absolu
   par le JS d'apres la geometrie reelle de l'input). L'input n'est pas modifie. */
.togglePasswdHost {
    position: relative;
}

/* Position (left/top/height) et classe "shown" posees par le JS. Masque par
   opacity (pas display, pour eviter le reflow) et non cliquable tant que cache. */
.togglePasswd {
    position: absolute;
    width: 32px;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #555;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
}

.togglePasswd.shown {
    opacity: 1;
    pointer-events: auto;
}

.togglePasswd::before {
    content: "\f070";
    font-family: "FontAwesome";
}

.togglePasswd.visible::before {
    content: "\f06e";
}

/* Edge (Windows) ajoute un bouton reveal natif sur les champs password : on le
   masque pour ne pas doubler l'oeil du composant. Sans effet sur macOS, ou ce
   bouton n'est pas rendu. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* Reserve une zone a droite des champs pour que l'oeil et les icones natives
   (Trousseau, gestionnaires) cohabitent. Applique aux DEUX champs .champ
   (email + mot de passe) via border-box, pour qu'ils gardent la meme largeur
   exterieure et restent alignes. !important pour passer devant la charte.
   Ce CSS n'est charge que sur les pages portant l'oeil : portee limitee. */
input.champ {
    box-sizing: border-box !important;
    padding-right: 30px !important;
}