/* Popover — nouveau (remplace les <details> des filtres et du compte). */
.popover { position: relative; display: inline-block; }
.popover-trigger .chevron, .menu-trigger .chevron {
  flex: 0 0 auto; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--fast);
}
.popover-trigger[aria-expanded="true"] .chevron, .menu-trigger[aria-expanded="true"] .chevron { transform: translateY(2px) rotate(-135deg); }
.popover-trigger[aria-expanded="true"] { border-color: var(--control-border); background: var(--surface-2); }
.popover-trigger .count, .menu-trigger .count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--selection); color: var(--accent); font-size: 12px;
}

.popover-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  display: grid; gap: var(--space-4); min-width: 280px; max-width: min(400px, calc(100vw - 32px));
  padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  animation: overlay-enter var(--enter) ease-out;
}
.popover-panel[data-align="end"] { left: auto; right: 0; }
@keyframes overlay-enter { from { opacity: 0; transform: translateY(-4px); } }

/* Petit écran : le panneau suit le flux sous son déclencheur, pleine largeur. */
@media (max-width: 600px) {
  .popover { display: block; }
  .popover-panel { position: static; margin-top: var(--space-2); max-width: none; box-shadow: none; }
}