/* ============================================================
   LOL & LALALA — Filtres Programmation
============================================================ */

.filter-group {
  /* évite que les pills débordent si écran étroit */
  flex-wrap: wrap;
  gap: 0.25rem;
}

.pill {
  height: 2.5rem;                 /* h-10 */
  border-radius: 9999px;
  padding: 0 0.5rem;              /* px-6 */
  font-size: 0.75rem;             /* text-xs */
  line-height: 1rem;
  font-weight: 800;               /* font-extrabold */
  text-transform: uppercase;
  letter-spacing: 0.06em;         /* tracking-wide */
  color: #000;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease,
              color 150ms ease,
              transform 120ms ease;
}

/* Hover */
.pill:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Focus accessibilité */
.pill:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* État actif */
.pill.is-active {
  background: #000;
  color: #fff;
}

/* Petit effet subtil au clic */
.pill:active {
  transform: scale(0.97);
}