/* Mes cartes — styles isolés au préfixe "mc-" (voir module.json).
   Sélecteur de collection : popover recherchable, remplace l'ancienne ligne
   de .filter-pill (illisible/non scalable à ~40 collections). Le champ de
   recherche réutilise .form-input (assets/css/style.css, site entier) plutôt
   que de dupliquer un style d'input. */

.mc-picker { position:relative; width:100%; max-width:320px; margin-bottom:20px; }

.mc-picker-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:9px 14px;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  color:white; text-align:left; cursor:pointer;
  transition:border-color var(--tcg-duration-fast) ease, background var(--tcg-duration-fast) ease;
}
.mc-picker-trigger:hover,
.mc-picker-trigger[aria-expanded="true"] { border-color:rgba(212,165,212,.5); background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); }

.mc-picker-trigger-label { display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:600; min-width:0; }
.mc-picker-trigger-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mc-picker-chevron { flex-shrink:0; color:rgba(255,255,255,.5); transition:transform var(--tcg-duration-fast) ease; }
.mc-picker-trigger[aria-expanded="true"] .mc-picker-chevron { transform:rotate(180deg); }

/* display volontairement absent d'ici : posé uniquement via
   .mc-picker-panel:not(.hidden) ci-dessous. Déclarer "display:flex"
   directement sur .mc-picker-panel entrait en conflit de spécificité avec
   l'utilitaire Tailwind .hidden (même spécificité, une seule classe chacune)
   — et comme le CSS de ce module est chargé après le <style> injecté par
   Tailwind (mes-cartes/style.css est lié dans le <body>, via
   tcgRenderModuleStyles() dans dashboard.php, alors que le script Tailwind
   tourne dans le <head> — voir includes/header.php), c'est TOUJOURS
   .mc-picker-panel qui gagnait la égalité de spécificité : le panneau ne
   passait donc jamais réellement en display:none, quel que soit l'état de
   la classe hidden. :not(.hidden) évite ce conflit à la racine, sans
   !important et sans dépendre de l'ordre de chargement des feuilles. */
.mc-picker-panel {
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  padding:10px;
  background:linear-gradient(160deg,rgba(20,14,30,.97),rgba(14,10,22,.97));
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  animation:mcPanelIn .18s var(--tcg-ease-out) both;
}
.mc-picker-panel:not(.hidden) { display:flex; flex-direction:column; gap:8px; }
@keyframes mcPanelIn { 0%{opacity:0;transform:translateY(-6px)} 100%{opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion: reduce) { .mc-picker-panel { animation:none; } }

.mc-picker-search.form-input { padding:8px 12px; font-size:.85rem; }

.mc-picker-list { display:flex; flex-direction:column; gap:2px; max-height:280px; overflow-y:auto; }

.mc-picker-option {
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px;
  border-radius:10px; border:1px solid transparent; background:transparent;
  color:rgba(255,255,255,.65); font-size:.88rem; text-align:left;
  transition:background var(--tcg-duration-fast) ease, color var(--tcg-duration-fast) ease;
}
.mc-picker-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-picker-option:hover { background:rgba(255,255,255,.08); color:white; }
.mc-picker-option.active { background:rgba(212,165,212,.16); border-color:rgba(212,165,212,.35); color:white; }

.mc-picker-empty { padding:10px; text-align:center; font-size:.82rem; color:rgba(255,255,255,.35); }

@media (max-width:640px) {
  .mc-picker { max-width:none; }
}