/* cles-acces.css — clés d'accès (lot r2210-passkey, X224) : la connexion par clé sur la page de connexion, et l'écran
   Plus › Connexion et clés d'accès. Variables de app.css seulement. */

/* Page de connexion */
.cle-connexion { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cle-connexion[hidden] { display: none; }
.cle-ou { display: flex; align-items: center; gap: 12px; color: var(--txt3); font-size: 13px; margin: 4px 0; }
.cle-ou::before, .cle-ou::after { content: ""; flex: 1; border-top: 1px solid var(--trait); }
.cle-bouton { width: 100%; min-height: var(--cible, 44px); justify-content: center; }
.cle-connexion .aide { color: var(--txt3); font-size: 13px; }

/* Écran Plus › Connexion et clés d'accès */
.cles-ecran .cles-liste { list-style: none; margin: 0; padding: 0; }
.cles-ecran .cle-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--trait); }
.cles-ecran .cle-ligne:first-child { border-top: 0; }
.cles-ecran .cle-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cles-ecran .cle-nom { font-weight: 600; overflow-wrap: anywhere; }
.cles-ecran .cle-meta { color: var(--txt3); font-size: 13px; }
.cles-ecran .cle-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cles-ecran .cles-vide { padding: 16px; color: var(--txt3); }
.cles-ecran .cles-ajout { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.cles-ecran .cles-ajout .err { color: var(--err); min-height: 1.4em; font-size: 14px; }
.cles-ecran h2 { font-size: 16px; margin: 20px 0 8px; }
@media (max-width: 600px) {
  .cles-ecran .cle-ligne { flex-wrap: wrap; }
  .cles-ecran .cle-actions { width: 100%; }
  .cles-ecran .cle-actions .btn { flex: 1; min-height: var(--cible, 44px); }
}