/* ════════════════════════════════════════════════════════════════════════
 * MyESEF — Styles SPÉCIFIQUES au flow auth
 * Composants génériques → components.css
 * Layout centré → layout.css
 * Ici on garde uniquement ce qui n'a de sens que pour ces pages.
 * ════════════════════════════════════════════════════════════════════════ */

/* Étapes numérotées de l'enrôlement TOTP */
.enroll-steps {
    margin: 0; padding-left: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.enroll-steps li { margin-bottom: var(--sp-1); }

/* Encadré centré contenant le QR code */
.enroll-qr {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-3);
}
.enroll-qr__image {
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 6px;
    border: 1px solid var(--c-border);
}

/* Liste des codes de secours — grille 2 colonnes */
.backup-codes {
    list-style: none; margin: 0; padding: var(--sp-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-5);
}
.backup-codes code {
    font-size: var(--fs-md);
}