/*
Fichier : sc_oeil_mdp.css
Chemin  : D:\speedclicV2\www\assets\css\sc_oeil_mdp.css
Rôle    : L'ŒIL QUI MONTRE LE MOT DE PASSE. Ramon, 22/09/2026 : « c'est pratique pour le
          mot de passe le petit oeil pour voir si on a bien orthographié son Mdp, au début
          oeil fermé, mais en cas de besoin cliquer dessus est pratique ».
          Le bouton se pose DANS le champ, à droite, sans bousculer la mise en page : le
          champ garde sa largeur, on lui réserve seulement la place du bouton à l'intérieur.
Créé    : 22/09/2026
*/

/* L'enveloppe ne change rien au flux : elle prend la place du champ, ni plus ni moins. */
.sc-mdp-enveloppe {
    position: relative;
    display: block;
    width: 100%;
}

/* La place du bouton est prise SUR le champ, pas à côté : aucun formulaire n'a besoin
   d'être redessiné, et un champ pleine largeur le reste. */
.sc-mdp-enveloppe > input {
    width: 100%;
    padding-right: 2.5rem;
}

.sc-mdp-oeil {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #5a6470;
    cursor: pointer;
    line-height: 0;
}

.sc-mdp-oeil:hover,
.sc-mdp-oeil:focus-visible { color: #1b4f8a; background: rgba(27, 79, 138, .08); }

/* LE CONTOUR DU CLAVIER RESTE VISIBLE : ce bouton se prend aussi à la tabulation, et
   quelqu'un qui n'utilise pas la souris doit savoir où il est. */
.sc-mdp-oeil:focus-visible { outline: 2px solid #1b4f8a; outline-offset: 1px; }

.sc-mdp-oeil svg { width: 1.15rem; height: 1.15rem; display: block; }

/* La barre oblique ne s'affiche que lorsque le mot de passe est CACHÉ — état de départ.
   Un œil barré dit « c'est masqué », un œil ouvert dit « c'est lisible ». */
.sc-mdp-oeil .sc-mdp-barre { display: inline; }
.sc-mdp-oeil[aria-pressed="true"] .sc-mdp-barre { display: none; }

/* === FIN DU FICHIER : D:\speedclicV2\www\assets\css\sc_oeil_mdp.css === */