/* Bouton « œil » afficher/masquer le mot de passe. */

.password-field {
    position: relative;
}

.password-field .password-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    /* Reset du <button> par le brick lui-meme (auto-suffisant, sans dependre des classes
       Bootstrap btn/p-0/border-0/bg-transparent) : marche aussi sur les sites sans Bootstrap. */
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    /* Taille d'icone uniforme sur tous les sites, quel que soit le font-size herite.
       Pilote l'icone webfont (<i>) ET le SVG (mode SVG-JS via height:1em de FA).
       NE PAS ajouter width:1em sur le svg en plus : le combo casse le rendu SVG-JS. */
    font-size: 1.125rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

/* Le texte du mot de passe ne passe pas sous le bouton. */
.password-field input[type="password"],
.password-field input[type="text"] {
    padding-right: 2.5rem;
}

/* Compat FontAwesome mode SVG-JS (AkeoTelecom charge all.js) : quand FA transforme
   le <i> de l'oeil en <svg.svg-inline--fa>, il lui applique position:absolute + inset:0,
   ce qui deplace/masque l'icone dans le bouton. On le remet dans le flux ; on ne touche
   NI a la largeur NI a la hauteur (FA gere height:1em + largeur au ratio de l'icone),
   sinon l'oeil se deforme ou disparait. Sans effet en mode webfont (pas de svg). */
.password-field .password-toggle svg.svg-inline--fa {
    position: static;
    margin: 0;
    vertical-align: middle;
}

/* Focus clavier visible (RGAA) — jamais supprimé. */
.password-field .password-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Masquage de l'icone inactive (le brick bascule .d-none via JS). Garanti par le brick
   pour les sites sans Bootstrap (ou .d-none n'existe pas). */
.password-field .password-toggle .d-none {
    display: none;
}