/**
 * ABIMEDIA — compteur de vues produit.
 *
 * Volontairement discret : une preuve sociale crédible se remarque sans
 * s'imposer. Aucune couleur criarde, aucune animation permanente en dehors
 * du point « en direct », qui reste très sobre.
 */

.abilive-views {
  --abv-fg: #5b6472;
  --abv-accent: #0b69f6;
  --abv-live: #16a34a;
  --abv-surface: rgba(11, 105, 246, .05);

  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--abv-fg);
}

.abilive-views__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--abv-surface);
  width: fit-content;
  max-width: 100%;
  opacity: 0;
  transform: translateY(3px);
  animation: abilive-fade .45s ease forwards;
}

/* Masqué tant que le seuil n'est pas atteint : jamais « 2 personnes ». */
.abilive-views__row--empty {
  display: none;
}

.abilive-views__icon {
  display: inline-flex;
  color: var(--abv-accent);
  flex: 0 0 auto;
}

.abilive-views__label {
  min-width: 0;
}

.abilive-views__row--live {
  background: rgba(22, 163, 74, .07);
  color: #15803d;
  font-weight: 600;
}

.abilive-views__pulse {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--abv-live);
}

.abilive-views__pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--abv-live);
  opacity: .55;
  animation: abilive-pulse 2s ease-out infinite;
}

@keyframes abilive-fade {
  to { opacity: 1; transform: none; }
}

@keyframes abilive-pulse {
  0%   { transform: scale(.6); opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Pastille dans les listes de produits. */
.abilive-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11, 105, 246, .07);
  color: #3d4756;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: middle;
}

.abilive-badge svg {
  color: #0b69f6;
}

/* Thème sombre. */
@media (prefers-color-scheme: dark) {
  .abilive-views {
    --abv-fg: #c2cad6;
    --abv-surface: rgba(96, 165, 250, .12);
    --abv-accent: #60a5fa;
  }
  .abilive-views__row--live {
    background: rgba(34, 197, 94, .14);
    color: #86efac;
  }
  .abilive-badge {
    background: rgba(96, 165, 250, .14);
    color: #d6dde8;
  }
}

/* Respect des préférences d'accessibilité. */
@media (prefers-reduced-motion: reduce) {
  .abilive-views__row { animation: none; opacity: 1; transform: none; }
  .abilive-views__pulse::after { animation: none; opacity: .35; }
}