/* ============================================================
   pills.css — Pastilles / chips GÉNÉRIQUES du design system
   ------------------------------------------------------------
   Petites étiquettes réutilisables (statut, catégorie, filtre,
   mot-clé supprimable, sélection). Authored depuis les tokens ;
   l'accent suit var(--accent) selon le data-product.

   Chargé dans les deux mondes (style-guide + production), comme
   cards.css.

   Unifie : vt-status, outcome-pill, keyword-pill, brand-pill,
   preset-chip, day-pill, role-badge, tag-pill, model-pill-*…
   ============================================================ */

/* ---------- PASTILLE DE BASE ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--c-surface-2); color: var(--c-text-muted);
  border: 1px solid transparent; line-height: 1.4;
}

/* ---------- VARIANTES SÉMANTIQUES (fond doux) ---------- */
.pill--success { background: var(--c-success-soft); color: var(--c-success); }
.pill--info    { background: var(--c-info-soft);    color: var(--c-info); }
.pill--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.pill--danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.pill--accent  { background: var(--accent-soft);    color: var(--accent); }
.pill--neutral { background: var(--c-surface-2);    color: var(--c-text-muted); }

/* ---------- MODIFICATEURS ---------- */
/* Style "statut" : majuscules + interlettrage */
.pill--upper { text-transform: uppercase; letter-spacing: 0.03em; }

/* Sélectionnable : cliquable, avec bordure ; état actif via .is-active */
.pill--selectable {
  cursor: pointer; background: var(--c-surface);
  border-color: var(--c-border-strong); color: var(--c-text-muted);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pill--selectable:hover { color: var(--accent); border-color: var(--accent); }
/* .active = alias legacy (JS existants de tri/filtre) — préférer .is-active */
.pill--selectable.is-active,
.pill--selectable.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* Sélection partielle (ex. filtres "partiel") */
.pill--selectable.is-partial { border-style: dashed; }

/* ---------- PASTILLE AUX COULEURS D'UN RÉSEAU SOCIAL ----------
   La teinte vient de la variable --net, posée par une classe .net--* (définies
   dans tokens.css) : le même code sert Instagram, Facebook et tout réseau à
   venir. À combiner avec .pill--selectable pour un filtre.
   Exemple : <button class="pill pill--selectable pill--net net--instagram"> */
.pill--net { --net: var(--accent); }
.pill--net i { color: var(--net); }
.pill--net.pill--selectable:hover { color: var(--net); border-color: var(--net); }
.pill--net.pill--selectable.is-active,
.pill--net.pill--selectable.active {
  background: color-mix(in srgb, var(--net) 14%, var(--c-surface));
  color: var(--net);
  border-color: var(--net);
}

/* Bouton de suppression intégré (mots-clés, tags…) */
.pill__remove {
  cursor: pointer; margin-left: 2px; opacity: 0.6;
  border: none; background: transparent; color: inherit; font-weight: var(--fw-bold);
  transition: opacity var(--t-fast);
}
.pill__remove:hover { opacity: 1; }

/* ---------- INTÉGRATION FILTRES BOOTSTRAP (btn-check + label .pill--selectable) ----------
   Permet d'utiliser une pastille sélectionnable comme filtre piloté par un
   input.btn-check masqué (checkbox/radio), sans JS supplémentaire. */
.btn-check:checked + .pill--selectable { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.btn-check:focus-visible + .pill--selectable { outline: 2px solid var(--accent); outline-offset: 1px; }