/* ===================================================
   KURO ARCANA — Barre de filtres de la Collection (classes .cf-*, collection-filtres.js)
   Barre collée en haut (recherche, tri, compteur, filtres actifs) ; pastilles dans .collection-filters
   (sur mobile : panneau qui monte du bas, mobile.css).
   =================================================== */
.cf-barre, .cf-barre * { box-sizing: border-box; }
/* Collée tout en haut de la zone qui défile (top négatif = marge intérieure de .contenu-page) */
.cf-barre { position: sticky; top: -40px; z-index: 30; margin: 0 0 12px; padding: 10px 14px; border-radius: 16px; color: #f3e9ff; border: 1px solid rgba(255, 215, 0, 0.35); background: rgba(20, 5, 26, 0.94); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.cf-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cf-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cf-recherche { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 215, 0, 0.4); background: rgba(0, 0, 0, 0.4); }
.cf-recherche:focus-within { border-color: #fff3a0; box-shadow: 0 0 0 2px rgba(255, 243, 160, 0.25); }
.cf-recherche input { flex: 1; width: auto; min-width: 0; margin: 0; padding: 0; min-height: 46px; border: 0; outline: 0; font: inherit; font-size: 16px; color: #fff; background: transparent; }
.cf-recherche input::placeholder { color: #9d8bb0; }

.cf-tri { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #d9c8ea; }
.cf-tri select { min-height: 44px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 16px; color: #fff; border: 1px solid rgba(255, 215, 0, 0.4); background: #1a0820; }
.cf-compteur { margin-left: auto; font-size: 16px; color: #d9c8ea; white-space: nowrap; }
.cf-compteur b { font-size: 18px; color: var(--or-dore, #ffd700); font-variant-numeric: tabular-nums; }
.cf-possedees { color: #3ddc6a; }

/* Filtres actifs */
.cf-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cf-actifs[hidden] { display: none; }
.cf-puce { display: inline-flex; align-items: center; gap: 2px; padding-left: 12px; border-radius: 999px; font-size: 16px; border: 1px solid rgba(255, 215, 0, 0.5); background: rgba(255, 215, 0, 0.12); }
.cf-retirer { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px 0; border: 0; border-radius: 50%; font: inherit; font-size: 22px; line-height: 1; color: #fff3a0; cursor: pointer; background: transparent; }
.cf-retirer:hover, .cf-retirer:focus-visible { color: #ff6b81; }
.cf-reinitialiser { min-height: 44px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 800; color: #ff9db0; cursor: pointer; border: 1px solid rgba(220, 20, 60, 0.6); background: transparent; }

/* Pastilles (panneau) */
#page-collection .collection-filters.cf-panneau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cf-groupe-titre { margin: 0 0 8px; font-size: 16px; color: var(--or-dore, #ffd700); }
.cf-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-pastille { --cf-couleur: #b56cff; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; color: #e8dcf4; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.35); transition: background 0.15s, border-color 0.15s; }
.cf-pastille:hover, .cf-pastille:focus-visible { border-color: var(--cf-couleur); }
.cf-pastille.cf-actif { color: #fff; border-color: var(--cf-couleur); background: color-mix(in srgb, var(--cf-couleur) 32%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--cf-couleur) 45%, transparent); }
.cf-pastilles[aria-labelledby="cf-t-univers"] .cf-pastille, .cf-segments .cf-pastille { --cf-couleur: #ffd700; }
.cf-point { width: 14px; height: 14px; border-radius: 50%; background: var(--cf-couleur); box-shadow: 0 0 6px var(--cf-couleur); }
.cf-segments { gap: 0; }
.cf-segments .cf-pastille { border-radius: 0; }
.cf-segments .cf-pastille:first-child { border-radius: 999px 0 0 999px; }
.cf-segments .cf-pastille:last-child { border-radius: 0 999px 999px 0; }
.cf-actions { display: flex; gap: 10px; margin: 0; }
#page-collection .cf-actions button { flex: none; min-height: 44px; height: auto; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer; border: 1px solid rgba(255, 215, 0, 0.5); background: linear-gradient(180deg, #3a0f4a, #1a0820); }
#page-collection .cf-actions button:hover, #page-collection .cf-actions button:focus-visible { border-color: #fff3a0; }

@media (max-width: 768px) {
  .cf-barre { top: -16px; margin: 0 0 12px; padding: 10px; border-radius: 14px; }
  .cf-ligne { gap: 8px; }
  .cf-recherche { flex: 1 1 100%; order: 1; }
  .cf-ligne .mb-collection-barre { flex: 1 1 40%; margin: 0; order: 2; }
  .cf-ligne .mb-filtres-bouton { min-height: 44px; }
  .cf-tri { flex: 1 1 40%; order: 3; }
  .cf-tri > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cf-tri select { flex: 1; min-width: 0; }
  .cf-compteur { order: 4; margin-left: 0; }
  #page-collection .cf-panneau .cf-pastille { flex: 1 1 auto; justify-content: center; }
  .cf-segments { flex-wrap: nowrap; }
  .cf-segments .cf-pastille { flex: 1; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-pastille { transition: none; }
}