/* ==========================================================================
   Compteurs en direct des en-têtes (CONTRAT §2 « En-têtes ») : présents + vues.
   Volet ET fenêtre « + ». Chiffres tabulaires, format compact dans un en-tête étroit.
   ========================================================================== */

.aud {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.aud-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.aud-num {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.aud-item--online .aud-num { min-width: 2ch; text-align: right; }
.aud-item--views .aud-num { min-width: 4ch; text-align: right; }
.aud.is-waiting .aud-num { color: var(--muted-2); }
.aud-eye { flex: none; color: var(--muted-2); }

/* Pastille « en ligne » : elle clignote — la même durée pour la pastille et pour son halo, qui
   s’ouvre au moment où elle s’allume : un seul battement, pas deux animations décalées. */
.aud-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--good);
  border-radius: 50%;
  animation: aud-blink 2s ease-in-out infinite;
}
.aud-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--good);
  opacity: 0.55;
  animation: aud-pulse 2s ease-in-out infinite;
}
/* Tant qu’aucun chiffre n’est arrivé, la pastille reste grise et immobile : il n’y a rien à
   annoncer, un clignotement voudrait dire « en direct ». */
.aud.is-waiting .aud-dot { background: var(--muted-2); animation: none; }
.aud.is-waiting .aud-dot::after { animation: none; opacity: 0; }
@keyframes aud-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
@keyframes aud-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  60%, 100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aud-dot { animation: none !important; }
  .aud-dot::after { animation: none !important; opacity: 0; }
}

/* Format complet par défaut ; compact (« 12 », « 3,4 k », sans unité) dans un en-tête étroit */
.aud-short { display: none; }
.bids-head { container: bidshead / inline-size; }
@container bidshead (max-width: 519px) {
  .aud { gap: 10px; }
  .aud-full, .aud-unit { display: none; }
  .aud-short { display: inline; }
  .aud-item--views .aud-num { min-width: 3ch; }
}
.sx-meta-row { container: sxmeta / inline-size; }
@container sxmeta (max-width: 460px) {
  .aud { gap: 10px; }
  .aud-full, .aud-unit { display: none; }
  .aud-short { display: inline; }
  .aud-item--views .aud-num { min-width: 3ch; }
}

/* En-tête du volet très étroit (volet PC à 30 %, mobile) : les deux compteurs s'empilent
   sur deux petites lignes, les onglets gardent leur place quelle que soit la taille des nombres. */
@container bidshead (max-width: 440px) {
  .aud { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; font-size: 11.5px; }
  .aud-item { gap: 4px; }
  .aud-dot { width: 7px; height: 7px; margin: 0 3px; }
  .aud-eye { width: 13px; height: 13px; }
  .aud-item--online .aud-num,
  .aud-item--views .aud-num { min-width: 0; text-align: left; }
}

/* ---------- En-tête du volet : logo seul + compteurs + onglets sur une ligne ---------- */
.bids-head { flex-wrap: nowrap; }
.bids-head .brand { flex: none; }
.bids-head .aud { flex: 1 1 auto; }
.bids-head .seg { flex: none; margin-left: auto; }
@media (max-width: 420px) {
  .bids-head { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .bids-head .seg-btn { padding: 0 10px; font-size: 12.5px; }
}

/* ---------- En-tête de la fenêtre « + » : compteurs sur la ligne du sous-titre ---------- */
/* La zone de titre prend toute la largeur libre : les compteurs savent s'ils ont la place. */
.sx-main .sx-head .sx-titles { flex: 1 1 auto; }
.sx-meta-row { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 4px; }
.sx-meta-row .aud { flex: none; }
.sx-meta-row .sx-sub { flex: 1 1 auto; min-width: 0; margin-top: 0; }
@media (max-width: 599px) {
  .sx-meta-row .sx-sub { display: none; }
}