/*
 * passkey.css — Connexion par passkey (WebAuthn), pour /login et /mon-compte.
 * Le reste du style vient de static/css/style.css (variables de couleurs, .bouton, .bloc,
 * .champ, .message-ok, .erreur, .table, .formulaire-inline...) — ce fichier ne fait
 * qu'ajouter le nécessaire propre aux passkeys, en réutilisant les mêmes variables CSS.
 */

/* --- Séparateur "ou" (carte de login) ----------------------------------- */

.separateur-ou {
  display: flex;
  align-items: center;
  color: #a89e90;
  font-size: 0.85rem;
  margin: 1.3rem 0;
}
.separateur-ou::before,
.separateur-ou::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--couleur-bordure);
}
.separateur-ou span { padding: 0 0.75rem; }

/* --- Bouton "Se connecter avec une passkey" ------------------------------ */

#bouton-passkey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
#bouton-passkey[hidden] { display: none; }

/* --- Zone de message (erreurs passkey, /login et /mon-compte) ----------- */

.passkey-message {
  min-height: 1.1em;
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  text-align: center;
}
.passkey-message:empty { margin: 0; }

/* --- Section "Connexion par passkey" de /mon-compte ---------------------- */

.passkey-ajout {
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .passkey-ajout { flex-direction: column; align-items: stretch; }
  .passkey-ajout input { width: 100%; }
}