/* Champ mot de passe avec bouton de révélation (« œil »).

   Composant propre aux écrans d'authentification : il s'appuie sur les
   variables `--auth-*` déclarées par pages/P_AuthLayout.css, toujours chargé
   avant lui (cf. la pile `page-styles` de P_AuthLayout.blade.php). */

.c-password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.c-password-field__input {
    width: 100%;
    /* Réserve la place du bouton, qui se superpose au champ : sans elle, une
       saisie longue passe sous l'icône. */
    padding-right: 3rem;
}

.c-password-field__toggle {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cible d'au moins 44 px malgré une icône de 20 px (WCAG 2.5.5). */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    color: var(--auth-muted-text-color);
    cursor: pointer;
}

.c-password-field__toggle:hover,
.c-password-field__toggle[aria-pressed='true'] {
    color: var(--misaju-color-accent);
}

.c-password-field__toggle:focus-visible {
    outline: var(--auth-focus-outline-width) solid var(--misaju-color-accent);
    outline-offset: 2px;
}

/* La règle `[hidden] { display: none }` de la feuille de style utilisateur ne
   couvre pas les éléments SVG : sans cette ligne, les deux icônes se
   superposeraient. */
.c-password-field__icon[hidden] {
    display: none;
}