/* Bascule de visibilité des mots de passe (contrôleur password-visibility).
 *
 * 1. Commun à tous les designs : icône de l'état, bouton caché sans
 *    JavaScript, annonce réservée aux lecteurs d'écran.
 * 2. Nouveau design (.pw-field) : œil dans le champ, à droite. Couleurs
 *    réglables par variables, repli sur les jetons de la vitrine.
 *
 * Chargé par registration_base.html.twig (vitrine, connexion) et par
 * assets/app.js (espaces connectés). L'espacement vertical du bloc .pw-field
 * est réglé par la feuille de chaque design (ex. inscription.css). */

/* 1. Commun */
[data-password-visibility-revealed-value="true"] .pw-icon-show,
[data-password-visibility-revealed-value="false"] .pw-icon-hide {
  display: none;
}

/* l'emporte sur les utilitaires d'affichage (ex. d-flex de Bootstrap) */
[data-password-visibility-target="button"][hidden] {
  display: none !important;
}

.pw-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 2. Nouveau design */
.pw-field {
  position: relative;
}

/* sélecteur renforcé : passe devant les règles de champ des designs
   (ex. .ins-form input[type="password"]) */
.pw-field > .pw-input[type] {
  margin-bottom: 0;
  padding-right: 3.25rem;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: .3rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pw-toggle-color, var(--muted, #5A7A74));
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}

/* survol seulement sur les appareils qui en ont un : au toucher, le fond
   resterait affiché après l'appui */
@media (hover: hover) {
  .pw-toggle:hover {
    color: var(--pw-toggle-hover-color, var(--forest, #11302A));
    background: var(--pw-toggle-hover-bg, rgba(17, 48, 42, .06));
  }
}

.pw-toggle:focus-visible {
  outline: 2px solid var(--pw-focus-color, var(--forest-soft, #2D7265));
  outline-offset: -2px;
}