/* Composants MFA partagés — neutres, surchargeables via variables CSS du portail hôte. */
.ima-mfa {
  --mfa-accent: var(--primary, var(--color-primary, #1d4ed8));
  --mfa-text: var(--text, var(--color-text, #0f172a));
  --mfa-muted: var(--muted, var(--color-muted, #475569));
  --mfa-border: var(--border, var(--color-border, #cbd5e1));
  --mfa-surface: var(--surface, var(--color-surface, #ffffff));
  --mfa-danger: #b91c1c;
  --mfa-success: #166534;
  color: var(--mfa-text);
  display: grid;
  gap: 12px;
  text-align: left;
}
.ima-mfa--panel { border: 1px solid var(--mfa-border); border-radius: 12px; padding: 20px; background: var(--mfa-surface); }
.ima-mfa__head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; }
.ima-mfa__title { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.ima-mfa__lead, .ima-mfa__help { color: var(--mfa-muted); font-size: .92rem; line-height: 1.5; margin: 0; }
.ima-mfa__state { font-weight: 600; margin: 0; }
.ima-mfa__badge { background: #f1f5f9; border-radius: 999px; color: var(--mfa-muted); font-size: .78rem; font-weight: 600; padding: 3px 10px; }
.ima-mfa__badge.is-strong { background: #dcfce7; color: var(--mfa-success); }
.ima-mfa__message { border-radius: 8px; font-size: .92rem; margin: 0; padding: 10px 12px; background: #eff6ff; }
.ima-mfa__message[hidden] { display: none; }
.ima-mfa__message[data-kind="error"] { background: #fef2f2; color: var(--mfa-danger); }
.ima-mfa__message[data-kind="success"] { background: #f0fdf4; color: var(--mfa-success); }
.ima-mfa__form, .ima-mfa__body, .ima-mfa__area { display: grid; gap: 12px; }
.ima-mfa__form[hidden] { display: none; }
.ima-mfa__field { display: grid; gap: 6px; }
.ima-mfa__field label { font-weight: 600; }
.ima-mfa__code {
  border: 1px solid var(--mfa-border); border-radius: 8px; font-size: 1.4rem; letter-spacing: .3em;
  max-width: 14rem; padding: 10px 12px; text-align: center; width: 100%; box-sizing: border-box;
}
.ima-mfa__code:focus-visible, .ima-mfa__btn:focus-visible, .ima-mfa summary:focus-visible { outline: 3px solid var(--mfa-accent); outline-offset: 2px; }
.ima-mfa__steps { color: var(--mfa-muted); font-size: .92rem; line-height: 1.5; margin: 0; padding-left: 1.2rem; }
.ima-mfa__qr-wrap { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 16px; }
.ima-mfa__qr { background: #fff; border: 1px solid var(--mfa-border); border-radius: 8px; height: 180px; padding: 8px; width: 180px; }
.ima-mfa__manual { font-size: .88rem; max-width: 100%; }
.ima-mfa__secret { background: #f1f5f9; border-radius: 6px; display: block; margin-top: 6px; overflow-wrap: anywhere; padding: 8px; user-select: all; }
.ima-mfa__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.ima-mfa__btn { border: 1px solid transparent; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px; }
.ima-mfa__btn:disabled { cursor: not-allowed; opacity: .6; }
.ima-mfa__btn--primary { background: var(--mfa-accent); color: #fff; }
.ima-mfa__btn--secondary { background: transparent; border-color: var(--mfa-accent); color: var(--mfa-accent); }
.ima-mfa__btn--danger { background: transparent; border-color: var(--mfa-danger); color: var(--mfa-danger); }
.ima-mfa__btn--link { background: transparent; color: var(--mfa-accent); text-decoration: underline; }
.ima-mfa__factors { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ima-mfa__factors li { align-items: center; border: 1px solid var(--mfa-border); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 8px 12px; }
@media (max-width: 480px) {
  .ima-mfa--panel { padding: 16px; }
  .ima-mfa__code { max-width: none; }
}