/* ============================================ */
/* Tadam - EFFETS WOW PREMIUM                  */
/* Animations, micro-interactions, scroll FX   */
/* ============================================ */

/* === Variables Animations === */
:root {
  --wow-duration-fast: 0.2s;
  --wow-duration-normal: 0.35s;
  --wow-duration-slow: 0.5s;
  --wow-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --wow-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --wow-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --wow-gold: #D4AF37;
  --wow-gold-light: rgba(212, 175, 55, 0.15);
  --wow-gold-glow: rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* 1. HOVER EFFECTS PREMIUM                    */
/* ============================================ */

/* === Cartes Produit Premium Hover === */
.ecom-product-card {
  position: relative;
  transition: transform var(--wow-duration-normal) var(--wow-easing),
              box-shadow var(--wow-duration-normal) var(--wow-easing),
              border-color var(--wow-duration-normal) var(--wow-easing);
}

.ecom-product-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--wow-gold), #FF8C42, var(--wow-gold));
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--wow-duration-normal) var(--wow-easing);
  pointer-events: none;
  z-index: 1;
}

.ecom-product-card:hover::before {
  opacity: 1;
  animation: gradientBorderFlow 3s ease infinite;
}

.ecom-product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 30px var(--wow-gold-light);
}

/* Image zoom + shine effect */
.ecom-product-card .ecom-product-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  transition: left 0.6s var(--wow-easing);
}

.ecom-product-card:hover .ecom-product-image::after {
  left: 150%;
}

.ecom-product-card:hover .ecom-product-image img {
  transform: scale(1.1);
}

/* Badge bounce on hover */
.ecom-product-card:hover .ecom-product-badge {
  animation: badgeBounce 0.5s var(--wow-easing-bounce);
}

/* Price glow on hover */
.ecom-product-card:hover .ecom-product-price-value {
  text-shadow: 0 0 20px var(--wow-gold-glow);
}

/* Button transform */
.ecom-product-card .ecom-product-btn {
  transition: all var(--wow-duration-normal) var(--wow-easing-spring);
}

.ecom-product-card:hover .ecom-product-btn {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 4px 15px var(--wow-gold-glow);
}

/* === Fleet Cards Premium Hover === */
.fleet-card,
.fleet-card-premium {
  transition: transform var(--wow-duration-normal) var(--wow-easing),
              box-shadow var(--wow-duration-normal) var(--wow-easing);
}

.fleet-card:hover,
.fleet-card-premium:hover {
  transform: translateY(-6px);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 0 25px var(--wow-gold-light);
}

/* === Purchase Cards Premium === */
.purchase-card-premium {
  transition: transform var(--wow-duration-normal) var(--wow-easing),
              box-shadow var(--wow-duration-normal) var(--wow-easing);
}

.purchase-card-premium:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 0 40px var(--wow-gold-light);
}

.purchase-card-premium:hover .purchase-icon-wrapper {
  transform: scale(1.15) rotate(-10deg);
  box-shadow: 0 12px 30px var(--wow-gold-glow);
}

/* === Section Cards === */
.section-card-premium {
  transition: box-shadow var(--wow-duration-normal) var(--wow-easing);
}

.section-card-premium:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.1),
    0 0 30px var(--wow-gold-light);
}


/* ============================================ */
/* 2. ANIMATIONS DE FEEDBACK                   */
/* ============================================ */

/* === Ripple Effect pour Boutons === */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.5s, opacity 0.3s;
}

.btn-ripple:active::after {
  transform: translate(-50%, -50%) scale(2.5);
  opacity: 1;
  transition: 0s;
}

/* === Button Press Effect === */
.btn-press:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
}

/* === Icon Bounce on Click === */
.icon-bounce {
  transition: transform var(--wow-duration-fast) var(--wow-easing-spring);
}

.icon-bounce:hover {
  transform: scale(1.1);
}

.icon-bounce:active {
  animation: iconBounceAnim 0.4s var(--wow-easing-bounce);
}

/* === Success Checkmark Animation === */
.success-checkmark {
  animation: checkmarkPop 0.5s var(--wow-easing-bounce) forwards;
}

/* === Error Shake === */
.error-shake {
  animation: shakeAnim 0.5s ease-in-out;
}

/* === Pulse Effect === */
.pulse-effect {
  animation: pulseAnim 2s ease-in-out infinite;
}

/* === Attention Pulse (pour boutons CTA) === */
.attention-pulse {
  animation: attentionPulse 2s ease-in-out infinite;
}

/* === Counter Animation Class === */
.counter-animated {
  transition: all 0.3s var(--wow-easing);
}

.counter-animated.counting {
  transform: scale(1.1);
  color: var(--wow-gold);
}


/* ============================================ */
/* 3. LOADING STATES ANIMES                    */
/* ============================================ */

/* === Spinner Premium === */
.loading-spinner-premium {
  width: 50px;
  height: 50px;
  position: relative;
}

.loading-spinner-premium::before,
.loading-spinner-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.loading-spinner-premium::before {
  border-top-color: var(--wow-gold);
  animation: spinnerRotate 1s linear infinite;
}

.loading-spinner-premium::after {
  border-right-color: #FF8C42;
  animation: spinnerRotate 1.5s linear infinite reverse;
}

/* === Logo Pulse Loader === */
.loader-logo-pulse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loader-logo-pulse .loader-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--wow-gold), #FF8C42);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 30px var(--wow-gold-glow);
}

.loader-logo-pulse .loader-icon i {
  font-size: 28px;
  color: white;
}

.loader-logo-pulse .loader-text {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* === Dots Loading === */
.loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--wow-gold);
  border-radius: 50%;
  animation: dotsJump 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* === Skeleton Premium === */
.skeleton-premium {
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.08) 25%,
    rgba(212, 175, 55, 0.15) 50%,
    rgba(212, 175, 55, 0.08) 75%
  );
  background-size: 400% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 8px;
}

/* === Page Loading Overlay === */
.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.5s var(--wow-easing);
}

.page-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* === Button Loading State === */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}


/* ============================================ */
/* 4. TRANSITIONS FLUIDES                      */
/* ============================================ */

/* === Step Transitions (Commander) === */
.ecom-step-block {
  transition: opacity var(--wow-duration-slow) var(--wow-easing),
              transform var(--wow-duration-slow) var(--wow-easing);
}

.ecom-step-block:not(.active) {
  opacity: 0.6;
}

.ecom-step-block.active {
  opacity: 1;
}

/* === Step Indicator Animation === */
.ecom-step-number {
  transition: all var(--wow-duration-normal) var(--wow-easing-spring);
}

.ecom-step-block.active .ecom-step-number {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--wow-gold-glow);
}

.ecom-step-block.completed .ecom-step-number {
  animation: stepComplete 0.5s var(--wow-easing-bounce);
}

/* === Modal Transitions === */
.modal {
  transition: opacity var(--wow-duration-normal) var(--wow-easing),
              visibility var(--wow-duration-normal) var(--wow-easing);
}

.modal .modal-content {
  transition: transform var(--wow-duration-normal) var(--wow-easing-spring),
              opacity var(--wow-duration-normal) var(--wow-easing);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.modal.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* === Tab Transitions === */
.tab-content {
  transition: opacity var(--wow-duration-normal) var(--wow-easing),
              transform var(--wow-duration-normal) var(--wow-easing);
}

.tab-content:not(.active) {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  position: absolute;
}

.tab-content.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

/* === Card Flip Effect === */
.card-flip {
  perspective: 1000px;
}

.card-flip-inner {
  transition: transform 0.6s var(--wow-easing);
  transform-style: preserve-3d;
}

.card-flip:hover .card-flip-inner {
  transform: rotateY(10deg);
}

/* === Smooth Height Transition === */
.height-transition {
  transition: max-height var(--wow-duration-slow) var(--wow-easing),
              opacity var(--wow-duration-normal) var(--wow-easing);
  overflow: hidden;
}

.height-transition.collapsed {
  max-height: 0 !important;
  opacity: 0;
}


/* ============================================ */
/* 5. SCROLL ANIMATIONS                        */
/* ============================================ */

/* === Fade In Up (Scroll Reveal) === */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--wow-easing),
              transform 0.8s var(--wow-easing);
}

.reveal-fade-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* === Fade In Left === */
.reveal-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--wow-easing),
              transform 0.8s var(--wow-easing);
}

.reveal-fade-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* === Fade In Right === */
.reveal-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--wow-easing),
              transform 0.8s var(--wow-easing);
}

.reveal-fade-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* === Scale In === */
.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s var(--wow-easing),
              transform 0.8s var(--wow-easing-spring);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* === Stagger Children Animation === */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s var(--wow-easing),
              transform 0.5s var(--wow-easing);
}

.stagger-children.revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(7) { transition-delay: 600ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(8) { transition-delay: 700ms; opacity: 1; transform: translateY(0); }

/* === Counter Animation === */
.counter-value {
  display: inline-block;
  transition: transform 0.3s var(--wow-easing-bounce);
}

.counter-value.animating {
  transform: scale(1.2);
}


/* ============================================ */
/* 6. EFFETS VISUELS PREMIUM                   */
/* ============================================ */

/* === Glassmorphism Enhanced === */
.glass-premium {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* === Gradient Text Animated === */
.gradient-text-animated {
  background: linear-gradient(
    135deg,
    var(--wow-gold) 0%,
    #FF8C42 25%,
    var(--wow-gold) 50%,
    #FF8C42 75%,
    var(--wow-gold) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientTextFlow 4s ease infinite;
}

/* === Gold Glow Effect === */
.glow-gold {
  box-shadow:
    0 0 20px var(--wow-gold-light),
    0 0 40px var(--wow-gold-light),
    0 0 60px rgba(212, 175, 55, 0.1);
}

.glow-gold-soft {
  box-shadow: 0 0 30px var(--wow-gold-light);
}

/* === Border Glow Animation === */
.border-glow {
  position: relative;
}

.border-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--wow-gold), #FF8C42, var(--wow-gold));
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gradientBorderFlow 3s ease infinite;
}

/* === Confetti Animation === */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confettiFall 3s linear forwards;
}

.confetti:nth-child(odd) {
  background: var(--wow-gold);
}

.confetti:nth-child(even) {
  background: #FF8C42;
}

/* === Floating Elements === */
.float-animation {
  animation: floatUpDown 3s ease-in-out infinite;
}

.float-animation-slow {
  animation: floatUpDown 5s ease-in-out infinite;
}

/* === Shine Effect (sur images/boutons) === */
.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
}

.shine-effect:hover::after {
  animation: shinePass 0.8s ease;
}


/* ============================================ */
/* 7. STICKY ADD-TO-CART MOBILE                */
/* ============================================ */

.sticky-cart-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding: 12px 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(100%);
  transition: transform var(--wow-duration-normal) var(--wow-easing);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.sticky-cart-mobile.visible {
  transform: translateY(0);
}

.sticky-cart-mobile .sticky-cart-info {
  flex: 1;
  min-width: 0;
}

.sticky-cart-mobile .sticky-cart-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cart-mobile .sticky-cart-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--wow-gold);
}

.sticky-cart-mobile .sticky-cart-btn {
  background: linear-gradient(135deg, var(--wow-gold), #FF8C42);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--wow-duration-fast) var(--wow-easing),
              box-shadow var(--wow-duration-fast) var(--wow-easing);
}

.sticky-cart-mobile .sticky-cart-btn:active {
  transform: scale(0.95);
}

/* Hide on desktop */
@media (min-width: 769px) {
  .sticky-cart-mobile {
    display: none;
  }
}


/* ============================================ */
/* 8. TOAST NOTIFICATIONS PREMIUM              */
/* ============================================ */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast-premium {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.15),
    0 0 20px var(--wow-gold-light);
  max-width: 400px;
  animation: toastSlideIn 0.4s var(--wow-easing-spring);
}

.toast-premium.toast-exit {
  animation: toastSlideOut 0.3s var(--wow-easing) forwards;
}

.toast-premium .toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-premium.toast-success .toast-icon {
  background: linear-gradient(135deg, #10B981, #059669);
  color: white;
}

.toast-premium.toast-error .toast-icon {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: white;
}

.toast-premium.toast-info .toast-icon {
  background: linear-gradient(135deg, var(--wow-gold), #FF8C42);
  color: white;
}

.toast-premium .toast-content {
  flex: 1;
}

.toast-premium .toast-title {
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 2px;
}

.toast-premium .toast-message {
  font-size: 14px;
  color: var(--text-secondary);
}

.toast-premium .toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  transition: color var(--wow-duration-fast);
}

.toast-premium .toast-close:hover {
  color: var(--text-primary);
}

@media (max-width: 480px) {
  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .toast-premium {
    max-width: 100%;
  }
}


/* ============================================ */
/* KEYFRAMES                                   */
/* ============================================ */

@keyframes gradientBorderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes iconBounceAnim {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(0.9); }
  50% { transform: scale(1.15); }
  75% { transform: scale(1.05); }
}

@keyframes checkmarkPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes pulseAnim {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes attentionPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--wow-gold-glow); }
  50% { box-shadow: 0 0 0 15px transparent; }
}

@keyframes spinnerRotate {
  100% { transform: rotate(360deg); }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px var(--wow-gold-glow); }
  50% { transform: scale(1.1); box-shadow: 0 0 50px var(--wow-gold-glow); }
}

@keyframes dotsJump {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
}

@keyframes skeletonShimmer {
  0% { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}

@keyframes stepComplete {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes gradientTextFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shinePass {
  0% { left: -100%; }
  100% { left: 150%; }
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}


/* ============================================ */
/* REDUCED MOTION (Accessibilite)              */
/* ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================ */
/* DARK MODE SUPPORT                           */
/* ============================================ */

.dark-mode .glass-premium,
[data-theme="dark"] .glass-premium {
  background: rgba(30, 30, 46, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .sticky-cart-mobile,
[data-theme="dark"] .sticky-cart-mobile {
  background: rgba(26, 26, 46, 0.98);
  border-top-color: rgba(228, 192, 74, 0.2);
}

.dark-mode .sticky-cart-mobile .sticky-cart-name,
[data-theme="dark"] .sticky-cart-mobile .sticky-cart-name {
  color: #f5f5f5;
}

.dark-mode .toast-premium,
[data-theme="dark"] .toast-premium {
  background: rgba(26, 26, 46, 0.98);
  border-color: rgba(228, 192, 74, 0.2);
}

.dark-mode .toast-premium .toast-title,
[data-theme="dark"] .toast-premium .toast-title {
  color: #f5f5f5;
}

.dark-mode .toast-premium .toast-message,
[data-theme="dark"] .toast-premium .toast-message {
  color: #b0b0b0;
}