/* ─────────────────────────────────────────────────────────────────────
   QU-PREMIUM.CSS — Effets premium "10 000 €" par-dessus le design existant
   • Liquid Glass (Apple-style backdrop-blur)
   • Tilt 3D sur cards
   • Parallax scroll
   • Micro-animations easing premium
   ───────────────────────────────────────────────────────────────────── */

/* ═══ NOUVELLES VARIABLES PREMIUM ═══ */
:root {
  /* Palette étendue : 5 nuances de gris chaud (carbone -> argent) */
  --carbone-1: #0a0a0c;
  --carbone-2: #18181a;
  --carbone-3: #2a2a2d;
  --carbone-4: #3d3d42;
  --carbone-5: #5e5e66;

  /* Glass — opacités optimisées pour fond sombre */
  --glass-bg-soft: rgba(255, 255, 255, 0.04);
  --glass-bg-medium: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.18);

  /* Easings premium (Apple-inspired) */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durées (premium = plus lent) */
  --dur-quick: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --dur-cinematic: 1200ms;
}

/* ═══ LIQUID GLASS UTILITY CLASSES ═══ */
.qu-glass {
  background: var(--glass-bg-medium);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.qu-glass-soft {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.qu-glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid var(--glass-border-strong);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

/* Reflet sur le bord supérieur (Apple-style highlight) */
.qu-glass::before,
.qu-glass-strong::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

/* Lueur subtile en hover */
.qu-glass:hover,
.qu-glass-strong:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 32px 64px -16px rgba(255, 92, 0, 0.2),
    0 8px 32px -4px rgba(0, 0, 0, 0.4);
  transition: all var(--dur-base) var(--ease-premium);
}

/* ═══ TILT 3D PRODUIT CARDS ═══ */
.qu-tilt {
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-premium);
  will-change: transform;
}
.qu-tilt-inner {
  transform: translateZ(40px);
  transition: transform var(--dur-base) var(--ease-premium);
}

/* Cards produit : on cible automatiquement */
.pc, .kit-card, .qe-card, .cat-card {
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-premium),
              box-shadow var(--dur-base) var(--ease-premium),
              border-color var(--dur-base) var(--ease-premium);
  will-change: transform;
}
.pc:hover, .kit-card:hover, .qe-card:hover, .cat-card:hover {
  border-color: rgba(255, 92, 0, 0.4) !important;
  box-shadow:
    0 32px 64px -16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 92, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ═══ PARALLAX HERO LAYER ═══ */
.qu-parallax-layer {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
}

/* ═══ MAGNETIC BUTTON ═══ */
.btn-p,
.btn-add,
.kit-add,
.hv-add,
.snipcart-add-item {
  transition: transform var(--dur-base) var(--ease-premium),
              box-shadow var(--dur-base) var(--ease-premium),
              background var(--dur-quick) var(--ease-smooth);
  will-change: transform;
}
.btn-p:hover {
  box-shadow:
    0 16px 32px -8px rgba(255, 92, 0, 0.35),
    0 4px 12px -2px rgba(255, 92, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ═══ MICRO-ANIMATIONS ═══ */
@keyframes qu-float-y {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes qu-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes qu-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px -8px rgba(255, 92, 0, 0.4); }
  50% { box-shadow: 0 0 40px -4px rgba(255, 92, 0, 0.7); }
}

.qu-float { animation: qu-float-y 4s var(--ease-premium) infinite; }
.qu-shimmer-text {
  background: linear-gradient(
    90deg,
    var(--t1) 0%,
    var(--o) 25%,
    var(--gold) 50%,
    var(--o) 75%,
    var(--t1) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: qu-shimmer 6s linear infinite;
}
.qu-glow-pulse { animation: qu-glow-pulse 3s var(--ease-smooth) infinite; }

/* ═══ SCROLL REVEAL CINÉMATIQUE ═══ */
[data-qu-reveal] {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity var(--dur-cinematic) var(--ease-premium),
              transform var(--dur-cinematic) var(--ease-premium);
  will-change: opacity, transform;
}
[data-qu-reveal].in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-qu-reveal-delay="1"] { transition-delay: 100ms; }
[data-qu-reveal-delay="2"] { transition-delay: 200ms; }
[data-qu-reveal-delay="3"] { transition-delay: 300ms; }

/* ═══ APPLE-LIKE SECTION TRANSITION ═══ */
.qu-section-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--glass-border) 30%,
    var(--o) 50%,
    var(--glass-border) 70%,
    transparent 100%);
  margin: 0;
  position: relative;
}
.qu-section-divider::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--o);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--o), 0 0 40px var(--o);
}

/* ═══ ENHANCED CARDS PRODUIT (override léger) ═══ */
.pc {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ═══ HERO TEXT TREATMENT ═══ */
.h-h1 {
  background: linear-gradient(180deg, #fff 0%, #b0b0b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

/* ═══ ACCESSIBILITY : reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-qu-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .qu-tilt, .pc, .kit-card, .qe-card, .cat-card {
    transform: none !important;
  }
}

/* ═══ MOBILE OPTIMIZATIONS ═══ */
@media (max-width: 768px) {
  .qu-glass {
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
  }
  /* Disable tilt 3D on mobile for performance */
  .pc, .kit-card, .qe-card, .cat-card {
    transform: none !important;
  }
}