/* Champ de mot de passe partagé — bouton de révélation et jauge de robustesse.

   Mutualisé depuis `resilio-application-front/assets/styles/components/password.css`
   le 2026-09-21 (correctif post-merge de l'intention 069), pour que l'interface
   d'administration dispose des mêmes aides que l'écran de renouvellement sans
   qu'aucune règle soit recopiée d'un dépôt à l'autre (principe n° 6).

   Ce qui n'est PAS ici, et reste local au front : la notice de renouvellement
   forcé (CA-70, sans objet en administration) et la cible tactile du bouton de
   soumission (CA-75, propre à ce formulaire-là).

   ⚠️ L'indicateur de concordance (CA-54) A REJOINT cette feuille le 2026-09-21 :
   il était resté local au front, et l'admin avait un retour uniquement négatif.
   Les trois implémentations sont réduites à une.

   Toutes les valeurs passent par un token — aucune couleur littérale (CA-71). */

/* ─── Champ de mot de passe + bouton « afficher » ────────────────────────── */

.resilio-password-field {
    position: relative;
}

.resilio-password-field .form-control {
    /* place pour le bouton, sans jamais passer dessous */
    padding-right: calc(var(--spacing-unit) * 6);    /* 48px */
    min-height: 3rem;                                /* 48px — cible tactile, § 5.2 */
}

.resilio-password-field-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: calc(var(--spacing-unit) * 6);            /* 48px — cible >= 44px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-secondary-color);              /* 5,44:1 */
    border-radius: var(--border-radius-md);
}

.resilio-password-field-toggle:focus-visible {
    outline: 2px solid var(--primary-color);         /* 11,26:1 — WCAG 2.4.13 */
    outline-offset: 2px;
}

/* ─── Jauge de robustesse (CA-52, CA-53, CA-73) ──────────────────────────── */

.resilio-password-strength {
    margin-top: var(--spacing-xs);
}

.resilio-password-strength-track {
    display: flex;

    /* La gouttière est ce qui rend valides les mesures de contraste du § 11.1 :
       chaque segment allumé est adjacent à la SURFACE de la carte, jamais à la piste. */
    gap: calc(var(--spacing-unit) / 2);          /* 4px */
    height: calc(var(--spacing-unit) / 2);       /* 4px */
}

.resilio-password-strength-segment {
    flex: 1 1 0;
    border-radius: var(--border-radius-full);
    background-color: var(--border-color);       /* éteint — non porteur de sens */
    transition: background-color var(--transition-duration) var(--transition-timing);
}

.resilio-password-strength-label {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);

    /* Hauteur réservée en permanence : sans elle, l'apparition du libellé
       déplace le champ de confirmation sous le doigt de l'utilisateur. */
    min-height: 1.25rem;
}

/* Paliers 1 à 4 — tous acceptés */
.resilio-password-strength-level-4 .resilio-password-strength-segment,
.resilio-password-strength-level-3 .resilio-password-strength-segment:nth-child(-n+4),
.resilio-password-strength-level-2 .resilio-password-strength-segment:nth-child(-n+3),
.resilio-password-strength-level-1 .resilio-password-strength-segment:nth-child(-n+2) {
    background-color: var(--resilio-high-color); /* 3,35:1 sur --surface-color */
}

.resilio-password-strength-level-1 .resilio-password-strength-label,
.resilio-password-strength-level-2 .resilio-password-strength-label,
.resilio-password-strength-level-3 .resilio-password-strength-label,
.resilio-password-strength-level-4 .resilio-password-strength-label {
    color: var(--text-on-success-bg);            /* 5,02:1 */
}

/* Palier 0 — le seul que le serveur refuse */
.resilio-password-strength-level-0 .resilio-password-strength-segment:nth-child(-n+1) {
    background-color: var(--resilio-low-color);  /* 3,78:1 sur --surface-color */
}

.resilio-password-strength-level-0 .resilio-password-strength-label {
    color: var(--text-on-danger-bg);             /* 6,47:1 */
}

.resilio-password-strength-hint {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);          /* 5,44:1 */
}

/* ─── Indicateur de concordance (CA-54) ──────────────────────────────────── */

.resilio-password-match {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-small);

    /* Hauteur réservée : l'apparition de l'indicateur ne doit jamais
       déplacer le bouton de soumission au moment où on va le viser. */
    min-height: 1.25rem;
}

.resilio-password-match-ok   { color: var(--text-on-success-bg); }  /* 5,02:1 */
.resilio-password-match-ko   { color: var(--text-on-danger-bg);  }  /* 6,47:1 */
.resilio-password-match-icon { flex-shrink: 0; }

/* ─── Mouvement réduit ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .resilio-password-strength-segment {
        transition: none;
    }
}