/* ==========================================================================
   008 — Fly to Cart · boutons
   Mini card produit + panier en haut à droite de la zone. Au clic sur
   « Ajouter », anim.js fait décoller un disque qui vole vers le panier
   le long d'une courbe de Bézier quadratique (arc haut, échantillonnée
   en keyframes WAAPI). Le panier encaisse en squash & stretch et son
   badge compte avec un pop. Clics en rafale = plusieurs projectiles.
   Préfixe de classes : .fly-cart (abréviation du slug fly-to-cart).
   ========================================================================== */

.fly-cart {
  --fly-cart-accent: var(--ml-accent, #7c8cff);
  --fly-cart-accent-2: var(--ml-accent-2, #2dd4bf);

  position: relative; /* repère des projectiles — obligatoire */
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 288px;
  padding: 1.1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ml-surface, #151a24) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ml-fg, #e8eaf2) 7%, transparent);
  color: var(--ml-fg, #e8eaf2);
  font-family: inherit;
}

/* --- En-tête : titre + panier --------------------------------------------------- */

.fly-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fly-cart__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ml-muted, #8b91a3);
}

.fly-cart__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--ml-fg, #e8eaf2) 12%, transparent);
  border-radius: 12px;
  background: var(--ml-surface, #151a24);
  color: var(--ml-fg, #e8eaf2);
  cursor: default;
  transform-origin: 50% 100%; /* squash ancré au sol */
}

.fly-cart__cart-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Réception : squash & stretch relancé par le JS à chaque impact. */
.fly-cart__cart--hit {
  animation: fly-cart-hit 0.5s cubic-bezier(0.34, 1.3, 0.5, 1);
}

@keyframes fly-cart-hit {
  0% { transform: scale(1); }
  28% { transform: scale(1.22, 0.76) translateY(2px); }
  55% { transform: scale(0.92, 1.1) translateY(-1px); }
  76% { transform: scale(1.05, 0.96); }
  100% { transform: scale(1); }
}

/* --- Badge compteur ---------------------------------------------------------------- */

.fly-cart__badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--fly-cart-accent);
  color: var(--ml-bg, #0d1017);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform: scale(0);
}

.fly-cart__badge--show {
  transform: scale(1);
}

.fly-cart__badge--pop {
  animation: fly-cart-badge-pop 0.38s cubic-bezier(0.34, 1.86, 0.44, 1);
}

@keyframes fly-cart-badge-pop {
  0% { transform: scale(0.4); }
  62% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --- Card produit --------------------------------------------------------------------- */

.fly-cart__card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--ml-surface, #151a24);
  border: 1px solid color-mix(in srgb, var(--ml-fg, #e8eaf2) 8%, transparent);
}

.fly-cart__thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ml-fg, #e8eaf2) 30%, transparent), transparent 55%),
    linear-gradient(150deg, var(--fly-cart-accent), var(--fly-cart-accent-2));
}

.fly-cart__info {
  flex: 1;
  min-width: 0;
}

.fly-cart__name {
  margin: 0 0 0.2rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.fly-cart__price {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ml-muted, #8b91a3);
}

/* --- Bouton Ajouter ------------------------------------------------------------------------ */

.fly-cart__add {
  flex: none;
  padding: 0.55rem 0.95rem;
  border: 0;
  border-radius: 10px;
  background: var(--fly-cart-accent);
  color: var(--ml-bg, #0d1017);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fly-cart__add:hover,
.fly-cart__add:focus-visible {
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--fly-cart-accent) 75%, transparent);
}

.fly-cart__add:focus-visible {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 2px;
}

.fly-cart__add:active {
  transform: scale(0.92);
}

/* --- Projectile (créé par anim.js) ----------------------------------------------------------- */

.fly-cart__puck {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px; /* centré sur le point de trajectoire */
  border-radius: 50%;
  background: linear-gradient(150deg, var(--fly-cart-accent), var(--fly-cart-accent-2));
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--fly-cart-accent) 80%, transparent);
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}

/* --- Légende de démo (galerie) ------------------------------------------------------------------ */

.fly-cart-hint {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ml-muted, #8b91a3);
}

/* --- Accessibilité ------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Pas de vol (anim.js n'émet pas de projectile) ni de squash :
     le badge se met à jour avec un pop réduit à un simple fondu. */
  .fly-cart__cart--hit {
    animation: none;
  }

  .fly-cart__badge--pop {
    animation: fly-cart-badge-fade 0.25s ease;
  }

  @keyframes fly-cart-badge-fade {
    from { opacity: 0.3; }
    to { opacity: 1; }
  }

  .fly-cart__add:active {
    transform: none;
  }
}