/** Shopify CDN: Minification failed

Line 16:0 Unexpected "@keyframes"

**/
/* ============================================================
   SPIDER VISOR — Animations
   Toutes les animations respectent prefers-reduced-motion.
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes fade-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes zoom-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}R
@keyframes slide-in-right{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes blur-in{from{opacity:0;filter:blur(12px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes gradient-slide{from{background-position:0% 50%}to{background-position:300% 50%}}
@keyframes btn-shine{from{left:-120%}to{left:130%}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes tick{from{transform:translateY(-40%);opacity:.2}to{transform:none;opacity:1}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes float-slow{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(10px,-22px,0) rotate(2deg)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--btn-bg,var(--color-accent)) 55%,transparent)}
  55%{box-shadow:0 0 0 16px transparent}
}
@keyframes eye-flicker{
  0%,100%{opacity:.85;filter:drop-shadow(0 0 12px var(--color-accent))}
  8%{opacity:.25;filter:drop-shadow(0 0 3px var(--color-accent))}
  12%{opacity:1;filter:drop-shadow(0 0 26px var(--color-accent))}
  40%{opacity:.9}
  44%{opacity:.4}
  48%{opacity:1;filter:drop-shadow(0 0 30px var(--color-accent))}
}
@keyframes scan-line{from{transform:translateY(-100%)}to{transform:translateY(1100%)}}
@keyframes web-draw{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
@keyframes drop-in{from{opacity:0;transform:translateY(-120%) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes shake-x{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes count-up-mask{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- Reveal au scroll ---------- */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal].is-revealed{
  animation:fade-up calc(.7s / var(--anim-speed,1)) cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--reveal-delay,0ms);
}
[data-reveal="fade"].is-revealed{animation-name:fade-in}
[data-reveal="zoom"].is-revealed{animation-name:zoom-in}
[data-reveal="left"].is-revealed{animation-name:slide-in-left}
[data-reveal="right"].is-revealed{animation-name:slide-in-right}
[data-reveal="blur"].is-revealed{animation-name:blur-in}
[data-reveal="drop"].is-revealed{animation-name:drop-in}

/* Enfants decales automatiquement */
[data-reveal-stagger] > *{opacity:0}
[data-reveal-stagger].is-revealed > *{
  animation:fade-up calc(.65s / var(--anim-speed,1)) cubic-bezier(.16,1,.3,1) forwards;
}
[data-reveal-stagger].is-revealed > *:nth-child(1){animation-delay:0ms}
[data-reveal-stagger].is-revealed > *:nth-child(2){animation-delay:80ms}
[data-reveal-stagger].is-revealed > *:nth-child(3){animation-delay:160ms}
[data-reveal-stagger].is-revealed > *:nth-child(4){animation-delay:240ms}
[data-reveal-stagger].is-revealed > *:nth-child(5){animation-delay:320ms}
[data-reveal-stagger].is-revealed > *:nth-child(6){animation-delay:400ms}
[data-reveal-stagger].is-revealed > *:nth-child(7){animation-delay:480ms}
[data-reveal-stagger].is-revealed > *:nth-child(8){animation-delay:560ms}
[data-reveal-stagger].is-revealed > *:nth-child(n+9){animation-delay:640ms}

/* ---------- Effet yeux LED ---------- */
.led-eyes{position:relative;isolation:isolate}
.led-eyes::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 22% 12% at 36% 42%,color-mix(in srgb,var(--color-accent) 75%,transparent),transparent 70%),
             radial-gradient(ellipse 22% 12% at 64% 42%,color-mix(in srgb,var(--color-accent) 75%,transparent),transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .45s ease;
}
.led-eyes:hover::before,.led-eyes.is-lit::before{opacity:1;animation:eye-flicker 3.4s ease-in-out infinite}

/* ---------- Balayage scan (hero / media) ---------- */
.scan{position:relative;overflow:hidden}
.scan::after{
  content:"";position:absolute;left:0;right:0;top:0;height:9%;z-index:3;pointer-events:none;
  background:linear-gradient(transparent,color-mix(in srgb,var(--color-accent-2) 30%,transparent),transparent);
  animation:scan-line 5.5s linear infinite;
}

/* ---------- Effet flottant ---------- */
.float{animation:float-y 6s ease-in-out infinite}
.float-slow{animation:float-slow 14s ease-in-out infinite}
.glow-orb{animation:float-slow 22s ease-in-out infinite}
.glow-orb--blue{animation-duration:18s;animation-direction:reverse}
.glow-orb--purple{animation-duration:26s}

/* ---------- Tilt 3D sur carte produit ---------- */
.tilt{transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.tilt.is-tilting{transition:transform .08s linear}

/* ---------- Toile SVG animee ---------- */
.web-svg path,.web-svg line,.web-svg circle{
  stroke:var(--color-text);fill:none;stroke-width:.6;
  stroke-dasharray:1200;stroke-dashoffset:1200;opacity:.25;
}
.web-svg.is-revealed path,.web-svg.is-revealed line,.web-svg.is-revealed circle{
  animation:web-draw 2.4s cubic-bezier(.16,1,.3,1) forwards;
}

/* ---------- Erreurs / feedback ---------- */
.shake{animation:shake-x .55s cubic-bezier(.36,.07,.19,.97)}

/* ---------- Chargement bouton ---------- */
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::before{
  content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin-slow .7s linear infinite;
}

/* ---------- Skeleton ---------- */
.skeleton{
  background:linear-gradient(90deg,var(--color-surface) 0%,var(--color-bg-alt) 50%,var(--color-surface) 100%);
  background-size:300% 100%;animation:gradient-slide 1.6s linear infinite;border-radius:8px;
}

/* ---------- Soulignement anime ---------- */
.link-underline{position:relative;display:inline-block}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.9,.3,1);
}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Parallaxe legere ---------- */
[data-parallax]{will-change:transform}

/* ---------- Accessibilite ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important}
  .glow-orb,.float,.float-slow{animation:none!important}
  .scan::after,.led-eyes::before{display:none}
}