/**
 * Vitrine défilante — habillage des puces produites par `vitrine.js`.
 *
 * Pourquoi cette feuille existe alors que la §5 veut les styles dans les
 * panneaux : les puces n'existent pas dans le builder. Elles sont créées à
 * l'exécution, une par carte, et ne portent donc aucune classe `brxe-…`. Or
 * Bricks chaîne le CSS d'une classe globale au type d'élément — il émet
 * `.c-puces__puce.brxe-button`, qui ne rencontre jamais un bouton fabriqué par
 * un script. Réglées dans le builder, les puces sortaient à 0 × 44 px.
 *
 * C'est la même raison que pour `form.css` et `filters.css`, et la même
 * limite : ce qui EST dans le builder — le conteneur `c-puces`, la rangée
 * `c-vitrine` — se règle dans les panneaux, pas ici.
 */

.c-puces__puce {
  position: relative;
  inline-size: 6px;
  block-size: 6px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-neutral-200);
  cursor: pointer;
  appearance: none;
  /* base.css garantit 44 px à tout bouton ; ::after le rend ici sans pousser. */
  min-block-size: 0;
  transition: background var(--motion-duration-fast, .15s) ease;
}

/*
 * Cible tactile de 24 × 24 px (WCAG 2.5.8) sur un point de 6 px.
 * Les deux règles vont ensemble : retirer ce ::after laisse une commande
 * inatteignable au doigt.
 */
.c-puces__puce::after {
  content: "";
  position: absolute;
  inset: -9px;
}

.c-puces__puce.is-active {
  background: var(--color-neutral-900);
}

.c-puces__puce:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 5px;
}

/*
 * La rangée qui déborde masque sa barre de défilement : la position est déjà
 * dite par les puces, et une barre sous les cartes ajoute une ligne grise que
 * la maquette n'a pas. Le défilement lui-même reste entier.
 */
[data-carousel-actif="oui"] [data-carousel-track] {
  scrollbar-width: none;
}

[data-carousel-actif="oui"] [data-carousel-track]::-webkit-scrollbar {
  display: none;
}