/* ════════════════════════════════════════════════════════════════
   HoverCard — preview riche au survol (Radix UI HoverCard).
   Plus large que Tooltip, contenu structuré, animation douce.
════════════════════════════════════════════════════════════════ */

.mmg-hover-card {
  z-index: var(--mmg-z-tooltip);
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: var(--mmg-space-4);
  background: var(--mmg-color-bg-surface);
  border: 1px solid var(--mmg-color-border);
  border-radius: 14px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 12px 32px -6px rgba(15, 15, 30, 0.16),
    0 4px 8px -2px rgba(15, 15, 30, 0.08);
  font-size: var(--mmg-font-size-sm);
  color: var(--mmg-color-text-primary);
  animation: mmg-hover-card-in 220ms var(--mmg-ease-emphasis);
}
.mmg-hover-card[data-state="closed"] {
  animation: mmg-hover-card-out 160ms var(--mmg-ease-default);
}
[data-mmg-theme="dark"] .mmg-hover-card {
  background: color-mix(in srgb, var(--mmg-color-bg-raised) 92%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 32px -6px rgba(0, 0, 0, 0.55),
    0 4px 8px -2px rgba(0, 0, 0, 0.40);
}

.mmg-hover-card__arrow {
  fill: var(--mmg-color-bg-surface);
  filter: drop-shadow(0 -1px 0 var(--mmg-color-border));
}
[data-mmg-theme="dark"] .mmg-hover-card__arrow {
  fill: var(--mmg-color-bg-raised);
}

@keyframes mmg-hover-card-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
@keyframes mmg-hover-card-out {
  to { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .mmg-hover-card { animation: none !important; }
}