/* Champ mot de passe : composant Arc « password-field » (29/10). La coque porte la bordure du champ (36 px, rayon
   contrôle) ; le bouton œil y est inséré avec un retrait égal en haut, en bas et à droite. Focus = bordure foncée. */
.cn-password { box-sizing: border-box; display: flex; min-height: var(--arc-control-sm, 36px); align-items: center; padding: 0 2px 0 14px; border: 1px solid var(--arc-border-strong, var(--line)); border-radius: var(--arc-radius-control, 18px); background: var(--arc-surface, var(--surface)); transition: border-color var(--arc-fast, 160ms) var(--arc-ease-standard, ease); }
@media (hover: hover) and (pointer: fine) { .cn-password:hover:not(:focus-within) { border-color: var(--arc-foreground, var(--ink)); } }
.cn-password:focus-within { border-color: var(--arc-foreground, var(--ink)); }
.cn-password:has([aria-invalid="true"]) { border-color: var(--danger); }
:root .cn-password .cn-password__input, :root[data-skin="arc"] .cn-password .cn-password__input { width: 100%; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--arc-foreground, var(--ink)); font: inherit; font-size: 14px; outline: 0; }
/* Passer des points aux caractères se résout sur place ; changer de nom d'animation la relance. */
.cn-password__input[data-reveal="shown"] { animation: cn-password-shown var(--arc-standard, 240ms) var(--arc-ease-enter, ease-out); }
.cn-password__input[data-reveal="hidden"] { animation: cn-password-hidden var(--arc-standard, 240ms) var(--arc-ease-enter, ease-out); }
@keyframes cn-password-shown { from { opacity: .35; filter: blur(2px); } }
@keyframes cn-password-hidden { from { opacity: .35; filter: blur(2px); } }
.cn-password__toggle { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: var(--arc-radius-control, 18px); background: transparent; color: var(--arc-text-muted, var(--ink-3)); cursor: pointer; transition: background-color var(--arc-fast, 160ms) var(--arc-ease-standard, ease), color var(--arc-fast, 160ms) var(--arc-ease-standard, ease), transform var(--arc-spring, 580ms) var(--arc-ease-spring, ease); }
@media (hover: hover) and (pointer: fine) { .cn-password__toggle:hover { background: var(--arc-surface-muted, var(--surface-sunken)); color: var(--arc-foreground, var(--ink)); } }
.cn-password__toggle:active { transform: scale(.96); transition: background-color var(--arc-fast, 160ms) var(--arc-ease-standard, ease), color var(--arc-fast, 160ms) var(--arc-ease-standard, ease), transform 100ms var(--arc-ease-standard, ease); }
.cn-password__toggle[aria-pressed="true"] { color: var(--arc-foreground, var(--ink)); }
/* Le trait se dessine en travers de l'œil et efface le contour dessous (masque), au lieu d'échanger deux icônes. */
.cn-password__slash { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset var(--arc-standard, 240ms) var(--arc-ease-standard, ease), opacity var(--arc-instant, 120ms) linear; }
.cn-password__toggle.is-shown .cn-password__slash { stroke-dashoffset: 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .cn-password, .cn-password__toggle, .cn-password__slash { transition: none; }
    .cn-password__toggle:active { transform: none; }
    .cn-password__input[data-reveal] { animation: none; }
}