/*
 * Badge
 *   <span class="badge badge-outline">Vendue</span>
 *   variants : badge-default · badge-secondary · badge-outline · badge-live · badge-muted
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 0.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-default   { background: var(--color-primary-dark); color: var(--color-surface); }
.badge-secondary { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }
.badge-outline {
  border-color: rgba(var(--color-accent-rgb), 0.4);
  background: rgba(var(--color-accent-rgb), 0.12);
  color: var(--color-accent-text);
}
.badge-muted { background: rgba(var(--color-surface-rgb), 0.75); color: var(--color-on-surface-muted); }

/* Point vert animé — "en cours" */
.badge-live { background: rgba(var(--color-surface-rgb), 0.9); color: var(--color-primary-dark); }
.badge-live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-status-live);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-live::before { animation: none; }
}