/* Pilules de filtre — extraites de briques.css en phase 13.
 *
 * briques.css passait les 400 lignes du §14. Ce bloc s'en détache sans rien
 * perdre : la rangée de filtres est un composant à part entière, employée par
 * six écrans, et sa règle de cible tactile mérite d'être lisible d'un coup.
 */
.pilules {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  overflow-x: auto;
  /* ⚠️ Le rembourrage vertical n'est pas décoratif.
     « overflow-x: auto » impose « overflow-y: auto », qui rogne tout ce qui
     dépasse en hauteur — y compris la zone tactile transparente de 44 px que
     .pilule::after déploie autour d'un dessin de 34 px. Avec 2 px de haut, la
     rangée mesurait 38 px et la cible du §6 était coupée sans que rien ne le
     montre. Les 5 px la rendent entière. */
  padding: 5px calc(var(--pas) * 4);
  scrollbar-width: none;
}
.pilules::-webkit-scrollbar { display: none; }

/* ⚠️ Les marges négatives ne s'appliquent qu'à l'intérieur d'une zone de
   défilement, qui porte déjà son propre rembourrage. Employée ailleurs — en
   en-tête par exemple — la rangée ne doit pas en avoir. Ne pas simplifier. */
.vue__defilement .pilules { margin: 0 calc(var(--pas) * -4); }

/* Peinte à 34 px : à 44, six pilules de classe ne tiennent plus dans la rangée
   d'un téléphone et le filtre le plus employé de l'application devient un
   ruban. Le §6 exige pourtant une cible de 44 px — la zone transparente
   ci-dessous la rétablit sans changer le dessin, comme pour les boutons
   d'en-tête (coquille.css). */
.pilule {
  position: relative;
  flex: 0 0 auto;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--carte);
  box-shadow: var(--ombre-1);
  font-size: 0.81rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--encre-70);
  border: 0;
  cursor: pointer;
  transition: transform 0.16s var(--ressort), background var(--duree-anim) ease, color var(--duree-anim) ease;
}
.pilule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: var(--cible-tactile);
}
.pilule:hover { text-decoration: none; }
.pilule:active { transform: scale(0.94); }
.pilule.actif { background: var(--encre); color: var(--sur-encre); box-shadow: var(--ombre-2); }
.pilule--eteinte { opacity: 0.45; }
.pilule svg { width: 0.9rem; height: 0.9rem; }