/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   ANONYMISEUR DE FEC DANS STREAMO — le SHIM de jetons, et rien d'autre.
   anonymiser.css est la feuille de Streamiku, copiée telle quelle (resynchronisée au build par
   Streamo.csproj, cible SyncAnonymiser). Elle parle en jetons Streamiku (--o4, --tx1, --brand-strong…)
   que Streamo ne définit pas : cette feuille les TRADUIT dans la palette de Streamo (--ink, --card,
   --brand-d…), en clair puis en sombre. Chargée APRÈS anonymiser.css, elle gagne à spécificité égale.
   ⚠️ Deux pièges qu'elle règle :
   1. index.html de Streamo porte `data-theme="light"` EN DUR ; le sombre est la classe `html.stmo-dark`.
      Les surcharges `html[data-theme="light"] .anon` d'anonymiser.css s'appliquent donc TOUJOURS ici,
      thème sombre compris : on remet les encres sombres sous `html.stmo-dark .anon`.
   2. `.iku-spin` (le Spinner lié depuis Streamiku) n'existe pas dans app.css : défini ici.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.anon, .anonm-back {
    --o4:  color-mix(in srgb, var(--ink) 4%, transparent);
    --o12: color-mix(in srgb, var(--ink) 12%, transparent);
    --o14: color-mix(in srgb, var(--ink) 16%, transparent);
    --brand-strong: var(--brand-d);
    --brand-contrast: var(--on-brand);
    --tx1: var(--ink);
    --tx8: var(--ink-2);
    --color-text-muted: var(--muted);
    --color-text-secondary: var(--ink-2);
    --color-teal-bg: var(--brand-wash);
    --color-teal-border: color-mix(in srgb, var(--brand) 45%, transparent);
    --color-teal-border-soft: color-mix(in srgb, var(--brand) 30%, transparent);
    --color-bg-input: var(--field);
    --color-bg-surface: var(--card);
    --bg1: var(--card);
    font-family: inherit;
}

/*  Le composant pose ses trois encres sémantiques en sombre par défaut, puis les passe en clair sous
    `html[data-theme="light"]` — ce qui, dans Streamo, est TOUJOURS vrai. Ici la vérité du thème est la
    classe, on la suit. */
html.stmo-dark .anon {
    --anon-warn: #F0C26B;
    --anon-warn-bg: color-mix(in srgb, #E9B872 14%, transparent);
    --anon-warn-bd: color-mix(in srgb, #E9B872 40%, transparent);
    --anon-ok: #5DCAA5;
    --anon-ko: #F09595;
    --anon-ko-bd: color-mix(in srgb, #F09595 38%, transparent);
}
html.stmo-dark .anonm-back { background: rgba(4, 12, 18, .62); }
html:not(.stmo-dark) .anonm-back { background: rgba(28, 42, 52, .42); }

/*  La carte de la modale et les fonds de carte : dans Streamo le fond de page est clair, la carte
    blanche ; en sombre, app.css bascule --card. Une bordure par --line plutôt que par une opacité
    d'encre, pour rester dans la grammaire des cartes Streamo. */
.anonm-box { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.anon-card, .anon-quoi-c { border-color: var(--line); }
.anonm-hd { border-bottom-color: var(--line); }

/*  L'anneau d'attente du Spinner (copie de la règle Streamiku). */
.iku-spin {
    display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand);
    animation: iku-spin .8s linear infinite; vertical-align: middle;
}
@keyframes iku-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .iku-spin { animation-duration: 2.4s; } }

/*  La ligne d'appel sous la zone de dépôt, dans la grammaire des lignes « démo » de Streamo. */
.stmo-anon-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.stmo-anon-line .iku-ico { color: var(--brand-d); flex: 0 0 auto; }
.stmo-anon-btn {
    border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--brand-d); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.stmo-anon-btn:hover { text-decoration-color: var(--brand-d); }