/* ============================================================
   ENIGMA — /talents : filtre à deux niveaux (catégorie → métier).
   Évolution du seul bloc .coll__filter demandée par le client :
   s'appuie sur .chip / .coll__chips de styles.css sans les modifier.
   ============================================================ */

/* nowrap : en colonne multi-ligne (wrap hérité de .coll__filter), la ligne
   flex prend la largeur min-content des chips en bande → la ligne Category
   débordait de l'écran au lieu de défiler. Une seule ligne = largeur du bloc. */
.coll__filter--tiers { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.coll__tier { display: flex; align-items: center; gap: 20px; min-width: 0; max-width: 100%; }
.coll__tier > .coll__chips, .coll__tier-row > .coll__chips { min-width: 0; max-width: 100%; }
.coll__filter--tiers .coll__filter-k { flex: 0 0 96px; }

/* Ligne 2 : ouverture en hauteur (grid 0fr → 1fr) + opacité, ~200ms */
.coll__tier--sub {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .2s ease, opacity .2s ease;
}
.coll__tier--sub.is-open { grid-template-rows: 1fr; opacity: 1; }
.coll__tier--sub[hidden],
.coll__filter--tiers .coll__chips[hidden],
.coll__grid .pcard[hidden] { display: none; }
.coll__tier-clip { min-height: 0; overflow: hidden; }
.coll__tier-row { display: flex; align-items: center; gap: 20px; padding-top: 14px; min-width: 0; }

/* Compteur discret dans la chip */
.chip__count { margin-left: 8px; letter-spacing: .08em; color: var(--fg-3); transition: color .3s; }
.chip.is-active .chip__count { color: rgba(255,255,255,.6); }
.chip--empty:not(.is-active) { color: var(--fg-3); }

/* Annonce lecteur d'écran (« 12 talents ») */
.coll__live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  .coll__tier, .coll__tier-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .coll__filter--tiers .coll__filter-k { flex: none; }
  .coll__tier-row { padding-top: 18px; }

  /* Bande à défilement horizontal, sans barre, avec fondu à droite tant qu'il reste du contenu */
  .coll__filter--tiers .coll__chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-snap-type: x proximity;
    margin: 0 -22px; padding: 0 22px; scroll-padding: 0 22px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .coll__filter--tiers .coll__chips::-webkit-scrollbar { display: none; }
  .coll__filter--tiers .coll__chips.is-scroll-end { -webkit-mask-image: none; mask-image: none; }
  .coll__filter--tiers .chip {
    flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
    min-height: 40px; display: inline-flex; align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coll__tier--sub, .chip__count { transition: none; }
}