/* ============================================
   ANIMATIONS PREMIUM D'AJOUT AU PANIER
   ============================================ */

/* Badge de compteur sur le FAB - Design amélioré */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff3b3b, #ff6b6b);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 
    0 6px 20px rgba(255, 59, 59, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  padding: 0 5px;
  transition: transform 0.18s ease, opacity 0.18s ease;
  z-index: 10;
  letter-spacing: -0.5px;
}

/* Animation de pulsation du FAB - Plus dynamique */
@keyframes cart-fab-pulse {
  0% {
    transform: scale(1) rotate(0deg);
  }
  15% {
    transform: scale(1.25) rotate(-8deg);
  }
  30% {
    transform: scale(0.9) rotate(5deg);
  }
  45% {
    transform: scale(1.15) rotate(-3deg);
  }
  60% {
    transform: scale(0.95) rotate(2deg);
  }
  75% {
    transform: scale(1.08) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Animation du badge - discrète */
@keyframes badge-pop {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Amélioration de l'élément volant - Plus visible et fluide */
.cart-fly {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.98), rgba(58,186,252,0.95));
  pointer-events: none;
  z-index: 9999;
  box-shadow: 
    0 15px 40px rgba(58, 186, 252, 0.6),
    0 0 0 5px rgba(255, 255, 255, 0.8),
    inset 0 3px 12px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(58, 186, 252, 0.4);
  transition: 
    transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
    opacity 0.95s ease;
  opacity: 1;
  transform: scale(1.1) rotate(0deg);
  animation: item-wiggle 0.3s ease-in-out;
}

@keyframes item-wiggle {
  0%, 100% { transform: scale(1.1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-5deg); }
  75% { transform: scale(1.15) rotate(5deg); }
}

.cart-fly.is-active {
  opacity: 0;
  transform: scale(0.15) rotate(360deg);
}

/* Toast amélioré - Plus visible et engageant */
.cart-toast {
  position: fixed;
  right: 24px;
  top: calc(35% - 90px);
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(230,253,255,0.98));
  color: #0376b8;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(20px) scale(0.85) translateX(20px);
  box-shadow: 
    0 25px 50px rgba(3, 118, 184, 0.35),
    0 0 0 2px rgba(58, 186, 252, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(58, 186, 252, 0.4);
  z-index: 10000;
  pointer-events: none;
  backdrop-filter: blur(12px);
  transition: 
    opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 0.3px;
}

.cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) translateX(0);
  animation: toast-celebration 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animation de célébration pour le toast */
@keyframes toast-celebration {
  0% {
    transform: translateY(20px) scale(0.85) translateX(20px);
  }
  50% {
    transform: translateY(-8px) scale(1.05) translateX(0) rotate(2deg);
  }
  70% {
    transform: translateY(2px) scale(0.98) translateX(0) rotate(-1deg);
  }
  100% {
    transform: translateY(0) scale(1) translateX(0) rotate(0deg);
  }
}

/* Effet hover amélioré sur le FAB - Plus dynamique */
.cart-fab {
  position: relative;
  overflow: visible;
  transition: 
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    background 0.4s ease,
    filter 0.3s ease;
}

.cart-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 28px 55px rgba(3, 118, 184, 0.45),
    0 0 0 4px rgba(255, 255, 255, 0.25),
    0 0 22px rgba(58, 186, 252, 0.45);
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  filter: brightness(1.08) saturate(1.05);
}

.cart-fab:active {
  transform: translateY(-1px) scale(1.01);
  transition: all 0.12s ease;
}

/* Animation du label "Panier" au hover - Plus fluide */
.cart-fab::after {
  transition: 
    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.cart-fab:hover::after {
  opacity: 1;
  transform: translateX(0) scale(1);
  animation: label-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes label-bounce {
  0% {
    transform: translateX(8px) scale(0.9);
  }
  50% {
    transform: translateX(-4px) scale(1.05);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

/* Effet de pulsation subtile continue - Plus marqué */
@keyframes subtle-pulse {
  0%, 100% {
    box-shadow: 
      0 25px 45px rgba(3, 118, 184, 0.35),
      0 0 0 0 rgba(58, 186, 252, 0);
  }
  50% {
    box-shadow: 
      0 25px 45px rgba(3, 118, 184, 0.5),
      0 0 0 8px rgba(58, 186, 252, 0.3);
  }
}

.cart-fab {
  animation: none;
}

.cart-free-mini {
  position: fixed !important;
  right: 24px !important;
  top: calc(35% + 68px) !important;
  width: 220px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 18px 35px rgba(3, 118, 184, 0.16);
  border: 1px solid rgba(58, 186, 252, 0.2);
  z-index: 9999;
  backdrop-filter: blur(6px);
}

.cart-free-mini__text {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.8);
  margin-bottom: 8px;
}

.cart-free-mini__bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(3, 118, 184, 0.12);
  overflow: hidden;
}

.cart-free-mini__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  box-shadow: 0 10px 18px rgba(3, 118, 184, 0.18);
  transition: width 0.3s ease;
}

.cart-free-mini__bar span.is-pulse {
  animation: free-bar-pulse 0.6s ease;
}

@keyframes free-bar-pulse {
  0% { transform: scaleX(0.98); box-shadow: 0 8px 16px rgba(3, 118, 184, 0.10); }
  50% { transform: scaleX(1.02); box-shadow: 0 10px 22px rgba(3, 118, 184, 0.22); }
  100% { transform: scaleX(1); box-shadow: 0 8px 16px rgba(3, 118, 184, 0.18); }
}

.cart-free-mini__text.is-celebrate {
  animation: free-text-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes free-text-pop {
  0% { transform: scale(0.95); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.cart-free-mini {
  left: auto !important;
}

/* Feedback du bouton "Ajouter au panier" - Plus visible */
.btn[type="submit"] {
  position: relative;
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.2s ease;
}

.btn[type="submit"]:active {
  transform: scale(0.94);
  box-shadow: 0 10px 25px rgba(3, 118, 184, 0.3);
}

.btn[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(3, 118, 184, 0.4);
  filter: brightness(1.1);
}

/* Animation de succès pour les boutons - Plus dynamique */
@keyframes button-success {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1) rotate(3deg);
  }
  50% {
    transform: scale(0.95) rotate(-2deg);
  }
  75% {
    transform: scale(1.05) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.btn.is-success {
  animation: button-success 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Responsive amélioré avec animations préservées */
@media (max-width: 640px) {
  .cart-fab {
    top: auto !important;
    bottom: 20px !important;
    right: 16px !important;
  }
  .cart-fly {
    width: 50px;
    height: 50px;
  }

  .cart-toast {
    right: 16px;
    top: auto;
    bottom: 108px;
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
  }

  .cart-badge {
    min-width: 24px;
    height: 24px;
    font-size: 0.75rem;
    top: -5px;
    right: -5px;
  }

  .cart-fab {
    width: 60px;
    height: 60px;
  }
  
  .cart-fab svg {
    width: 26px;
    height: 26px;
  }
}

/* Animation de chargement pour le bouton pendant la requête */
@keyframes button-loading {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.btn.is-loading {
  pointer-events: none;
  animation: button-loading 1.5s ease-in-out infinite;
}

/* Effet de brillance sur le FAB - Plus spectaculaire */
@keyframes fab-shine {
  0% {
    background-position: -250% center;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: 250% center;
    opacity: 0;
  }
}

.cart-fab::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.6) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: fab-shine 3.5s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
}

/* Particules explosives pour un effet wow */
@keyframes particle-float {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

.cart-particle {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #60d5fa, #3abaf8, #0ea5e9);
  pointer-events: none;
  z-index: 9998;
  animation: particle-float 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  box-shadow: 
    0 0 20px rgba(58, 186, 252, 0.8),
    inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

/* Amélioration de la transition d'état du bouton - Effet ripple */
.catalog-card__actions .btn,
.add-to-cart-form .btn {
  position: relative;
  overflow: hidden;
}

.catalog-card__actions .btn::before,
.add-to-cart-form .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  transform: translate(-50%, -50%);
  transition: width 0.8s ease, height 0.8s ease, opacity 0.8s ease;
  opacity: 0;
}

.catalog-card__actions .btn:active::before,
.add-to-cart-form .btn:active::before {
  width: 400px;
  height: 400px;
  opacity: 1;
  transition: width 0s, height 0s, opacity 0s;
}

.catalog-card__actions .btn:active::after,
.add-to-cart-form .btn:active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent 70%);
  animation: ripple-pulse 0.6s ease-out;
}

@keyframes ripple-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.cart-fab {
  position: fixed !important;
  right: 24px !important;
  top: 35% !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 10000 !important;
}