/*
 * Indicateur de force du mot de passe + exigences + correspondance — Inkwelya
 */

.force-mot-de-passe {
    margin-top: 10px;
    animation: force-apparition 0.25s ease;
}

.force-mot-de-passe--cache {
    display: none;
}

@keyframes force-apparition {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.force-mot-de-passe__barre {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.force-mot-de-passe__barre span {
    height: 4px;
    flex: 1;
    border-radius: 999px;
    background-color: rgba(38, 53, 60, 0.1);
    transition: background-color 0.25s ease;
}

.force-mot-de-passe--faible .force-mot-de-passe__barre span:nth-child(1) {
    background-color: var(--couleur-rouge-vif);
}

.force-mot-de-passe--moyen .force-mot-de-passe__barre span:nth-child(-n+2) {
    background-color: var(--couleur-ocre);
}

.force-mot-de-passe--fort .force-mot-de-passe__barre span:nth-child(-n+3) {
    background-color: var(--couleur-bleu-vif);
}

.force-mot-de-passe--tres-fort .force-mot-de-passe__barre span {
    background-color: var(--couleur-vert-emeraude);
}

.force-mot-de-passe__label {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.force-mot-de-passe--faible .force-mot-de-passe__label { color: var(--couleur-rouge-vif); }
.force-mot-de-passe--moyen .force-mot-de-passe__label { color: var(--couleur-ocre); }
.force-mot-de-passe--fort .force-mot-de-passe__label { color: var(--couleur-bleu-vif); }
.force-mot-de-passe--tres-fort .force-mot-de-passe__label { color: var(--couleur-vert-emeraude); }

/* ==========================================================================
   EXIGENCES — liste de critères qui se cochent en temps réel
   ========================================================================== */

.exigences-mdp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 14px 16px;
    background-color: var(--couleur-beige);
    border-radius: var(--rayon-bouton);
}

.exigence-mdp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(38, 53, 60, 0.55);
    transition: color 0.2s ease;
}

.exigence-mdp__icone {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgba(38, 53, 60, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exigence-mdp--validee {
    color: var(--couleur-anthracite);
    font-weight: 500;
}

.exigence-mdp--validee .exigence-mdp__icone {
    background-color: var(--couleur-vert-emeraude);
    color: #ffffff;
    transform: scale(1.1);
}

/* ==========================================================================
   ENCART "À ÉVITER" — bonnes pratiques, discret, affiché au focus uniquement
   ========================================================================== */

.conseils-mdp {
    display: none;
    margin-top: 10px;
    padding: 12px 14px;
    background-color: rgba(43, 119, 255, 0.06);
    border: 1px solid rgba(43, 119, 255, 0.15);
    border-radius: var(--rayon-bouton);
    animation: force-apparition 0.25s ease;
}

.conseils-mdp--visible {
    display: block;
}

.conseils-mdp__titre {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--couleur-bleu-vif);
    margin-bottom: 8px;
}

.conseils-mdp__liste {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.conseils-mdp__liste li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(38, 53, 60, 0.65);
    line-height: 1.4;
}

.conseils-mdp__liste li i {
    color: var(--couleur-rouge-vif);
    font-size: 0.65rem;
    margin-top: 4px;
    flex-shrink: 0;
}

/* --- Correspondance --- */

.correspondance-mot-de-passe {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    animation: force-apparition 0.25s ease;
}

.correspondance-mot-de-passe--cache {
    display: none;
}

.correspondance-mot-de-passe--ok {
    color: var(--couleur-vert-emeraude);
}

.correspondance-mot-de-passe--erreur {
    color: var(--couleur-rouge-vif);
}

@media (max-width: 480px) {
    .exigences-mdp {
        grid-template-columns: 1fr;
    }
}