/*
 * Neutralise la règle globale `input[type="text"].form-control { padding-right: 5.5rem }`
 * (prévue pour le bouton "afficher le mot de passe") qui poussait le chiffre hors
 * de la case et le rendait invisible. Sélecteur assez spécifique pour la remporter.
 */
.two-factor-code-input input.two-factor-code-input__digit {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    background-image: none; /* pas d'icône de validation Bootstrap dans une case étroite */
}

.two-factor-code-input input.two-factor-code-input__backup-input {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-image: none;
}

/* Wrappe (plutôt que déborder) si la carte est vraiment trop étroite */
.two-factor-code-input__digits {
    flex-wrap: wrap;
}

.two-factor-code-input__digit {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 3.25rem;
    font-size: 1.35rem;
    font-weight: 600;
    text-align: center;
    caret-color: var(--primary-blue-light);
}

.two-factor-code-input__digit:focus {
    border-color: var(--primary-blue-light);
    box-shadow: 0 0 0 0.2rem rgba(8, 101, 114, 0.2);
}

/* La carte 2FA s'élargit si besoin pour accueillir toutes les cases sur une ligne */
.login-card-2fa {
    max-width: 30rem;
}

/* Écrans étroits : cases plus compactes */
@media (max-width: 400px) {
    .two-factor-code-input__digits {
        gap: 0.375rem !important;
    }

    .two-factor-code-input__digit {
        width: 2.25rem;
        height: 3rem;
        font-size: 1.2rem;
    }
}