/* ========================================
   PASSWORD TOGGLE COMPONENT
   Composant réutilisable pour afficher/masquer les mots de passe
   ======================================== */

/* Container du champ password avec icône */
.password-field-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Input password avec padding pour l'icône */
.password-field-container input {
    padding-right: 45px !important;
    width: 100%;
}

/* Bouton toggle password */
.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.password-toggle-btn:hover {
    opacity: 0.8;
}

.password-toggle-btn:focus {
    outline: none;
    opacity: 1;
}

/* Icône SVG pour œil ouvert */
.eye-icon-open {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Icône SVG pour œil fermé */
.eye-icon-closed {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Animation de transition */
.password-toggle-btn svg {
    transition: transform 0.2s ease;
}

.password-toggle-btn:active svg {
    transform: scale(0.95);
}