.audience-choix, .audience-preference {
  color: var(--encre, #172033); background: var(--carte, #fff);
  border: 1px solid var(--trait, #d1d5db); border-radius: 12px;
  font: 14px/1.5 system-ui, sans-serif; box-shadow: 0 6px 28px #0002;
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 120;
}
.audience-choix[hidden], .audience-preference[hidden] { display: none; }
.audience-choix { padding: 18px; width: min(420px, calc(100vw - 24px)); box-sizing: border-box; max-height: 70vh; overflow: auto; }
.audience-choix h2 { margin: 0 0 8px; font: 700 17px/1.3 system-ui, sans-serif; color: inherit; }
.audience-choix p { margin: 8px 0; color: inherit; }
.audience-choix summary { cursor: pointer; text-decoration: underline; }
.audience-choix > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.audience-choix button, .audience-preference { padding: 8px 12px; cursor: pointer; }
.audience-choix button { border: 1px solid var(--trait, #c3c7ce); border-radius: 8px; font: inherit; color: inherit; background: var(--carte-2, #f3f4f6); }
.audience-choix button:focus-visible, .audience-preference:focus-visible, .audience-choix summary:focus-visible { outline: 3px solid var(--a, #635bff); outline-offset: 3px; }
.audience-preference { font-size: 11px; padding: 4px 8px; }
[data-theme="dark"] .audience-choix, [data-theme="dark"] .audience-preference { color: var(--encre, #eef2f7); background: var(--carte, #131e30); border-color: var(--trait, #344155); }
[data-theme="dark"] .audience-choix button { background: var(--carte-2, #20304a); border-color: var(--trait, #536078); }

.frequentation { padding: 1.1rem; margin: 1.4rem 0; border: 1px solid var(--trait); border-radius: var(--r); background: var(--carte); }
.frequentation h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.frequentation p { line-height: 1.5; }
.frequentation .freq-note { color: var(--encre-2); font-size: .8rem; margin: .5rem 0; }
.freq-filtres { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; margin: 1rem 0 .7rem; }
.freq-filtres label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; min-width: 0; }
.freq-filtres input { font: inherit; min-width: 0; max-width: 100%; box-sizing: border-box; padding: .5rem; border: 1px solid var(--trait); border-radius: var(--r-sm); color: var(--encre); background: var(--fond); }
.freq-raccourcis { display: flex; flex-wrap: wrap; gap: .4rem; }
.freq-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.freq-chiffres > div { padding: 1rem; border: 1px solid var(--trait); border-radius: var(--r-sm); background: var(--carte-2); }
.freq-chiffres strong { display: block; font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.freq-chiffres span { font-size: .85rem; display: block; margin-top: .3rem; }
.freq-chiffres small { color: var(--encre-2); display: block; margin-top: .3rem; font-size: .75rem; }
.freq-comptes h3 { margin: 1rem 0 .5rem; font-size: .95rem; }
.freq-defile { max-height: 22rem; overflow: auto; border: 1px solid var(--trait); border-radius: var(--r-sm); }
.freq-comptes table { margin: 0; }
.freq-comptes th { position: sticky; top: 0; background: var(--carte); }
.freq-comptes td { overflow-wrap: anywhere; }
.freq-comptes td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.freq-comptes .freq-id { font-family: ui-monospace, monospace; font-size: .75rem; }
.frequentation [role="status"] { min-height: 1.5em; font-size: .85rem; overflow-wrap: anywhere; }
.frequentation summary { cursor: pointer; text-decoration: underline; }
@media (max-width: 480px) {
  .freq-chiffres { grid-template-columns: 1fr; }
  .freq-filtres label { width: 100%; }
  .freq-filtres input { width: 100%; }
  .freq-comptes td:first-child { white-space: normal; }
  .freq-comptes .freq-id { display: inline-block; max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}