/* ==========================================================================
   forms.css — Styles supplémentaires pour les champs avec bouton œil.
   Importé uniquement par les templates concernés (register, login, profile,
   reset_password) via {% block stylesheets %} ; NE PAS importer depuis app.css.
   ========================================================================== */

/* Conteneur wrapper autour de l'input + bouton œil */
.input-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* L'input prend toute la largeur, padding-right pour laisser la place au bouton.
   Augmenté à 3rem pour correspondre à la zone tactile élargie (2.75rem + marge). */
.input-password-wrapper input[type="password"],
.input-password-wrapper input[type="text"] {
    width: 100%;
    padding-right: 3rem; /* espace pour le bouton œil (zone tactile 44px) */
}

/* Bouton œil positionné à l'intérieur du champ, à droite.
   La taille visuelle est réduite, mais on agrandit la zone tactile via
   min-width/min-height à 44px (recommandation WCAG 2.5.5 / Apple HIG)
   sans modifier l'apparence : l'icône reste centrée. */
.btn-eye {
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);

    /* Apparence discrète */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;   /* zone tactile ≥ 44px */
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);

    /* Ne pas déclencher la soumission du formulaire */
    line-height: 1;
}

.btn-eye:hover {
    color: var(--text);
    background: var(--surface);
}

/* Focus visible accessible */
.btn-eye:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Icône SVG : hérite de la couleur du bouton */
.btn-eye svg {
    display: block;
    flex-shrink: 0;
    pointer-events: none; /* Évite que le SVG capture le clic à la place du bouton */
}

/* L'attribut hidden doit l'emporter sur le display:block ci-dessus, sinon les
   deux icônes (œil + œil barré) s'affichent côte à côte. Une seule visible à la fois. */
.btn-eye svg[hidden] {
    display: none;
}

/* Mode sombre : légère correction de contraste déjà couverte par les variables CSS */