/* Compte : étape « code » de la connexion des administrateurs (double authentification), codes de secours, mon profil.
   Uniquement des variables (var(--…)) : aucune couleur, taille, rayon ni ombre en dur. */
#login { --cp-qr: 15rem; --cp-code: 1.25rem; }
#login #etape-form .logo { margin-bottom: var(--s-1); }
#login #etape-form .subtitle { padding-bottom: var(--s-4); }
.cp-qr { display: block; width: var(--cp-qr); max-width: 100%; margin: 0 auto var(--s-3); border-radius: var(--r-md); overflow: hidden; }
.cp-qr svg { display: block; width: 100%; height: auto; }
.cp-cle { display: block; text-align: center; font-family: var(--font-mono); letter-spacing: .08em; word-break: break-all; margin: 0 0 var(--s-4); color: var(--muted); user-select: all; }
#login #etape-form input.cp-code { font-family: var(--font-mono); font-size: var(--cp-code); text-align: center; letter-spacing: .12em; }
#login #etape-form .cp-retour { margin-top: var(--s-2); background: transparent; color: var(--muted); border: 1px solid var(--border); }
.cp-codes { list-style: none; margin: 0 0 var(--s-4); padding: var(--s-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); font-family: var(--font-mono); text-align: center; user-select: all; }
.cp-titre { text-align: center; margin: 0 0 var(--s-3); font-family: var(--font-display); color: var(--fg); }
.cp-ligne { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cp-ligne .btn { margin-left: auto; }
.cp-formulaire-code { display: flex; flex-direction: column; gap: var(--s-2); }
#login #etape-form .cp-confiance { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); cursor: pointer; text-transform: none; letter-spacing: normal; font-family: inherit; font-size: inherit; color: var(--fg); }
#login #etape-form .cp-confiance input { width: var(--s-4); height: var(--s-4); flex: none; margin: 0; padding: 0; }
.cp-appareils { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.cp-appareils li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s-2); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
.cp-app-nom { font-weight: 600; }
.cp-app-dates { grid-column: 1 / -1; font-size: 11.5px; }
.cp-2fa { display: inline-flex; vertical-align: middle; color: var(--success, var(--muted)); }