/* Bandeau de catégories du header — shortcode [spc_header_categories].
   Reste à opacity:0 (posé en inline par render_header_categories()) jusqu'à
   ce que header-reveal-1.0.1.js confirme que la mise en forme est
   stabilisée, pour éviter l'effet de "saut" au chargement — même mécanisme
   que header-search-1.0.3.css (voir ce fichier pour le détail du filet
   de sécurité JS/noscript).

   Défile horizontalement (overflow-x: auto) plutôt que de passer à la
   ligne : une seule mécanique, valable sur mobile, tablette et ordinateur,
   sans media query dédiée pour la mise en page elle-même — sur un grand
   écran où toutes les pastilles tiennent, il n'y a simplement rien à
   faire défiler. */
.spc-header-categories {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: opacity .2s ease;
}

.spc-header-categories::-webkit-scrollbar {
  display: none;
}

/* Mêmes proportions et même rouge de marque que les anciennes pastilles de
   la boutique (.spc-shop-page__category, retirées depuis que ce bandeau de
   header les remplace — voir templates/shop/boutique.php), pour que le
   bandeau du header reste visuellement le même composant qu'avant, juste
   déplacé. flex-shrink: 0 empêche les pastilles de se compresser au lieu
   de faire défiler la rangée. */
.spc-header-categories__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 14px;
  border: 1px solid #dce5ef;
  border-radius: 20px;
  background: #fff;
  color: #20242a !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.spc-header-categories__item:hover {
  border-color: #c8102e;
  color: #c8102e !important;
}

.spc-header-categories__item--active.spc-header-categories__item--active {
  border-color: #c8102e;
  background: #c8102e;
  color: #fff !important;
}