/** * E-VEN LABS — ev-themes.css v4.3 * * ARCHITECTURE : * .ev-theme-layer — canvas d'effets de fond (div enfant dans .ev-shop) * .sh-card::before — effets card (libre dans shop.css) * .sh-bdg-promo — badge promo : ::before = icône, couleurs !important * .sh-bdg-stock — badge stock : couleurs + dot * .sh-promo-ico — masqué par preset (remplacé par ::before sur parent) * .sh-oc-accent-bar— barre accent topbar * * PAS DE CONFLITS shop.css : * ✗ .ev-shop::before (fond dégradé global) * ✗ .sh-card::after (glow hover) * ✗ .sh-bdg-promo::after (shimmer) * * TECHNIQUE ICÔNE BADGE : * 1. Masquer le bolt original : * .ev-shop[data-preset="X"] .sh-bdg-promo .sh-promo-ico { display:none } * 2. Injecter emoji via ::before du badge (::after est pris par shimmer) : * .ev-shop[data-preset="X"] .sh-bdg-promo::before { content:'🌸'; } */ /* ══ BASE LAYER ══════════════════════════════════════════ */ .ev-theme-layer { position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; } /* ══ KEYFRAMES FOND & LAYOUT ═════════════════════════════ */ @keyframes evBreath { 0%,100%{opacity:.3} 50%{opacity:.85} } @keyframes evShimBar { 0%{background-position:0%} 100%{background-position:200%} } @keyframes evSunSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } @keyframes evSnowSpin { 0%{transform:rotate(0)scale(1)} 50%{transform:rotate(180deg)scale(1.15)} 100%{transform:rotate(360deg)scale(1)} } @keyframes evRgb { 0%{background-position:0%} 100%{background-position:200%} } @keyframes evKintsugi { 0%,100%{opacity:.4;filter:blur(.5px)} 50%{opacity:1;filter:blur(0)} } @keyframes evForge { 0%,100%{opacity:.5;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.08)} } @keyframes evNebula { 0%,100%{transform:scale(1)rotate(0);opacity:.6} 50%{transform:scale(1.07)rotate(3deg);opacity:1} } @keyframes evMercury { 0%,100%{transform:scaleX(.75);opacity:.3} 50%{transform:scaleX(1);opacity:.8} } @keyframes evGlitch { 0%,84%,100%{transform:none;opacity:.8} 86%{transform:translate(2px,0)} 88%{transform:translate(-2px,1px)} 90%{transform:none;opacity:1} } @keyframes evGoldPulse { 0%,100%{text-shadow:0 0 8px rgba(234,179,8,.3)} 50%{text-shadow:0 0 22px rgba(234,179,8,.75)} } @keyframes evCardScanV { 0%{top:-4px} 100%{top:110%} } @keyframes evCrtScan { 0%{background-position:0 0} 100%{background-position:0 4px} } @keyframes evWaveX { 0%,100%{transform:translateX(-4%)} 50%{transform:translateX(4%)} } /* ══ KEYFRAMES BADGES ════════════════════════════════════ */ @keyframes sakuraBounce { 0%,100%{transform:translateY(0)rotate(-10deg)} 50%{transform:translateY(-3px)rotate(10deg)} } @keyframes leafRock { 0%,100%{transform:translateY(-1px)rotate(-12deg)} 50%{transform:translateY(2px)rotate(10deg)} } @keyframes snowSpin { 0%{transform:rotate(0)scale(1)} 50%{transform:rotate(180deg)scale(1.15)} 100%{transform:rotate(360deg)scale(1)} } @keyframes heartBeat { 0%,100%{transform:scale(1)} 25%{transform:scale(1.25)} 50%{transform:scale(1)} 75%{transform:scale(1.18)} } @keyframes matrixBlink { 0%{color:#39ff88;opacity:1} 33%{color:#7dffb3;opacity:.6} 66%{color:#00ff00;opacity:.9} } @keyframes xmasDot { 0%,100%{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.8)} 33%{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.8)} 66%{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.8)} } @keyframes halloweenPulse { 0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.7);transform:scale(1)} 50%{box-shadow:0 0 0 6px rgba(249,115,22,0);transform:scale(1.2)} } @keyframes glowBadge { 0%,100%{box-shadow:0 0 0 0 currentColor} 50%{box-shadow:0 0 10px 3px currentColor} } @keyframes forgeBadge { 0%,100%{box-shadow:0 0 0 0 rgba(255,85,0,.5)} 50%{box-shadow:0 0 10px 3px rgba(255,85,0,.2)} } @keyframes kintsugiGlow { 0%,100%{border-color:rgba(212,160,64,.35)} 50%{border-color:rgba(240,190,70,.75);box-shadow:0 0 8px 2px rgba(212,160,64,.2)} } @keyframes voidBadge { 0%,85%,100%{transform:none} 87%{transform:translate(2px,0)} 89%{transform:translate(-1px,0)} } @keyframes cyberScan { 0%{left:-50%} 100%{left:130%} } @keyframes sunBadge { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.5)} 50%{box-shadow:0 0 0 5px rgba(251,191,36,0)} } /* ══════════════════════════════════════════════════════════ BADGES PROMO — par preset MÉTHODE : 1. .sh-promo-ico { display:none } → cache le bolt 2. .sh-bdg-promo::before { content:'🌸' } → icône à la place 3. .sh-bdg-promo { couleurs !important } Le shimmer reste intact via .sh-bdg-promo::after (shop.css) ══════════════════════════════════════════════════════════ */ /* ── PRINTEMPS / PÂQUES – sakura 🌸 ── */ .ev-shop[data-preset="saison-printemps"] .sh-bdg-promo .sh-promo-ico, .ev-shop[data-preset="easter-spring"] .sh-bdg-promo .sh-promo-ico { display:none; } .ev-shop[data-preset="saison-printemps"] .sh-bdg-promo::before, .ev-shop[data-preset="easter-spring"] .sh-bdg-promo::before { content:'🌸'; font-size:11px; margin-right:2px; display:inline-block; animation:sakuraBounce 2.5s ease-in-out infinite; } .ev-shop[data-preset="saison-printemps"] .sh-bdg-promo, .ev-shop[data-preset="easter-spring"] .sh-bdg-promo { background:rgba(244,114,182,.14)!important; color:#f472b6!important; border-color:rgba(244,114,182,.3)!important; } /* ── AUTOMNE – feuille 🍂 ── */ .ev-shop[data-preset="saison-automne"] .sh-bdg-promo .sh-promo-ico { display:none; } .ev-shop[data-preset="saison-automne"] .sh-bdg-promo::before { content:'🍂'; font-size:11px; margin-right:2px; display:inline-block; animation:leafRock 2s ease-in-out infinite; } .ev-shop[data-preset="saison-automne"] .sh-bdg-promo { background:rgba(249,115,22,.14)!important; color:#fb923c!important; border-color:rgba(249,115,22,.3)!important; } /* ── HIVER – cristal ❄ ── */ .ev-shop[data-preset="saison-hiver"] .sh-bdg-promo .sh-promo-ico { display:none; } .ev-shop[data-preset="saison-hiver"] .sh-bdg-promo::before { content:'❄'; font-size:11px; margin-right:3px; display:inline-block; animation:snowSpin 4s linear infinite; } .ev-shop[data-preset="saison-hiver"] .sh-bdg-promo { background:rgba(125,211,252,.14)!important; color:#7dd3fc!important; border-color:rgba(125,211,252,.3)!important; } /* Dot hiver — bleu */ .ev-shop[data-preset="saison-hiver"] .sh-bdg-stock .sh-bdot--green { background:#7dd3fc!important; box-shadow:0 0 6px rgba(125,211,252,.6)!important; color:#7dd3fc!important; } .ev-shop[data-preset="saison-hiver"] .sh-bdg-stock { background:rgba(125,211,252,.1)!important; color:#bae6fd!important; border-color:rgba(125,211,252,.22)!important; } /* ── NOËL – 🎄 ── */ .ev-shop[data-preset="christmas-frost"] .sh-bdg-promo .sh-promo-ico { display:none; } .ev-shop[data-preset="christmas-frost"] .sh-bdg-promo::before { content:'🎄'; font-size:11px; margin-right:2px; display:inline-block; } .ev-shop[data-preset="christmas-frost"] .sh-bdg-promo { background:rgba(220,38,38,.16)!important; color:#fca5a5!important; border-color:rgba(220,38,38,.32)!important; } .ev-shop[data-preset="christmas-frost"] .sh-bdg-stock { background:rgba(20,83,45,.85)!important; color:#bbf7d0!important; border-color:rgba(34,197,94,.25)!important; } /* Dot Noël : alterne vert/rouge/or */ .ev-shop[data-preset="christmas-frost"] .sh-bdot--green { animation:xmasDot 1.4s step-end infinite!important; color:#22c55e; } /* ── HALLOWEEN – dot orange pulsant ── */ .ev-shop[data-preset="halloween-night"] .sh-bdg-promo { background:rgba(249,115,22,.16)!important; color:#fb923c!important; border-color:rgba(249,115,22,.3)!important; } .ev-shop[data-preset="halloween-night"] .sh-bdg-promo .sh-promo-ico { background:#f97316!important; } .ev-shop[data-preset="halloween-night"] .sh-bdg-stock .sh-bdot--green { background:#f97316!important; box-shadow:none!important; color:#f97316!important; animation:halloweenPulse 1.5s ease-in-out infinite!important; } /* ── VALENTIN – cœur ♥ sur stock ── */ .ev-shop[data-preset="valentine-love"] .sh-bdg-promo { background:rgba(236,72,153,.16)!important; color:#f472b6!important; border-color:rgba(236,72,153,.32)!important; } .ev-shop[data-preset="valentine-love"] .sh-bdg-promo .sh-promo-ico { background:#ec4899!important; } .ev-shop[data-preset="valentine-love"] .sh-bdg-stock { position:relative; } .ev-shop[data-preset="valentine-love"] .sh-bdg-stock::before { content:'♥'; font-size:10px; margin-right:2px; display:inline-block; animation:heartBeat 1.2s ease-in-out infinite; color:#f472b6; } /* ── BLACK FRIDAY – jaune or pulsant ── */ .ev-shop[data-preset="black-friday"] .sh-bdg-promo { background:rgba(42,42,10,.9)!important; color:#fef08a!important; border-color:rgba(250,204,21,.38)!important; animation:glowBadge 2s ease-in-out infinite; } .ev-shop[data-preset="black-friday"] .sh-bdg-promo .sh-promo-ico { background:#facc15!important; } .ev-shop[data-preset="black-friday"] .sh-bdg-stock { background:rgba(31,41,55,.9)!important; color:#e5f3ff!important; border-color:rgba(59,130,246,.25)!important; } .ev-shop[data-preset="black-friday"] .sh-price { color:#facc15!important; animation:evGoldPulse 1.8s ease-in-out infinite; } /* ── NOUVEL AN ── */ .ev-shop[data-preset="new-year-spark"] .sh-bdg-promo { background:rgba(75,85,99,.9)!important; color:#fbbf24!important; border-color:rgba(251,191,36,.32)!important; animation:glowBadge 2s ease-in-out infinite; } .ev-shop[data-preset="new-year-spark"] .sh-bdg-promo .sh-promo-ico { background:#f59e0b!important; } .ev-shop[data-preset="new-year-spark"] .sh-price { animation:evGoldPulse 2s ease-in-out infinite; } /* ── ÉTÉ / SUMMER ── */ .ev-shop[data-preset="saison-ete"] .sh-bdg-promo, .ev-shop[data-preset="summer-vibes"] .sh-bdg-promo { background:rgba(120,53,15,.9)!important; color:#fef3c7!important; border-color:rgba(245,158,11,.35)!important; animation:sunBadge 2s ease-in-out infinite; } .ev-shop[data-preset="saison-ete"] .sh-bdg-promo .sh-promo-ico, .ev-shop[data-preset="summer-vibes"] .sh-bdg-promo .sh-promo-ico { background:#fbbf24!important; } /* ── CYBER GLITCH – scan dans badge ── */ .ev-shop[data-preset="cyber-glitch"] .sh-bdg-promo { background:rgba(17,34,68,.9)!important; color:#00c2ff!important; border-color:rgba(0,245,255,.3)!important; overflow:hidden; } .ev-shop[data-preset="cyber-glitch"] .sh-bdg-promo .sh-promo-ico { background:#00c2ff!important; } .ev-shop[data-preset="cyber-glitch"] .sh-bdg-promo::before { content:''; position:absolute; top:0; bottom:0; left:-50%; width:40%; background:linear-gradient(90deg,transparent,rgba(0,245,255,.4),transparent); animation:cyberScan 1.8s ease-in-out infinite; pointer-events:none; } .ev-shop[data-preset="cyber-glitch"] .sh-bdg-stock { background:rgba(13,62,57,.9)!important; color:#d9fff8!important; border-color:rgba(0,245,255,.2)!important; } /* ── MATRIX – chars 01 qui clignotent ── */ .ev-shop[data-preset="matrix-core"] .sh-bdg-promo .sh-promo-ico { display:none; } .ev-shop[data-preset="matrix-core"] .sh-bdg-promo::before { content:'01'; font-family:'Courier New',monospace; font-size:9px; margin-right:4px; display:inline-block; letter-spacing:.05em; animation:matrixBlink .8s steps(3) infinite; color:#39ff88; } .ev-shop[data-preset="matrix-core"] .sh-bdg-promo { background:rgba(16,51,34,.9)!important; color:#39ff88!important; border-color:rgba(57,255,136,.3)!important; font-family:'Courier New',monospace!important; letter-spacing:.04em; } .ev-shop[data-preset="matrix-core"] .sh-bdg-stock { background:rgba(10,38,25,.9)!important; color:#c8ffdc!important; border-color:rgba(57,255,136,.22)!important; } .ev-shop[data-preset="matrix-core"] .sh-price { color:#7dffb3!important; text-shadow:0 0 14px rgba(57,255,136,.5); } /* ── MIDNIGHT RGB – prix arc-en-ciel ── */ .ev-shop[data-preset="midnight-rgb"] .sh-bdg-promo { background:rgba(36,29,74,.9)!important; color:#e5ddff!important; border-color:rgba(139,92,246,.3)!important; } .ev-shop[data-preset="midnight-rgb"] .sh-bdg-promo .sh-promo-ico { background:#8b5cf6!important; } .ev-shop[data-preset="midnight-rgb"] .sh-price { background:linear-gradient(90deg,#8b5cf6,#22d3ee,#f472b6,#8b5cf6); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:evRgb 4s linear infinite; } /* ── AURORA GRID – scan dans badge ── */ .ev-shop[data-preset="aurora-grid"] .sh-bdg-promo { background:rgba(21,56,79,.9)!important; color:#d8f4ff!important; border-color:rgba(56,189,248,.3)!important; overflow:hidden; } .ev-shop[data-preset="aurora-grid"] .sh-bdg-promo .sh-promo-ico { background:#38bdf8!important; } .ev-shop[data-preset="aurora-grid"] .sh-bdg-promo::before { content:''; position:absolute; top:0; bottom:0; left:-60%; width:50%; background:linear-gradient(90deg,transparent,rgba(94,234,212,.35),transparent); animation:cyberScan 2.5s ease-in-out infinite; pointer-events:none; } /* ── RETRO ARCADE – CRT dans badge ── */ .ev-shop[data-preset="retro-arcade"] .sh-bdg-promo { background:rgba(77,19,65,.9)!important; color:#ffe0fb!important; border-color:rgba(255,79,216,.3)!important; overflow:hidden; } .ev-shop[data-preset="retro-arcade"] .sh-bdg-promo .sh-promo-ico { background:#ff4fd8!important; } .ev-shop[data-preset="retro-arcade"] .sh-bdg-promo::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,79,216,.07) 0px,rgba(255,79,216,.07) 1px,transparent 1px,transparent 3px); animation:evCrtScan .5s linear infinite; pointer-events:none; } /* ── LAVA CORE ── */ .ev-shop[data-preset="lava-core"] .sh-bdg-promo { background:rgba(90,28,11,.9)!important; color:#ffe0cb!important; border-color:rgba(255,107,0,.32)!important; animation:forgeBadge 2s ease-in-out infinite; } .ev-shop[data-preset="lava-core"] .sh-bdg-promo .sh-promo-ico { background:#ff6b00!important; } /* ── ROYAL GOLD ── */ .ev-shop[data-preset="royal-gold"] .sh-bdg-promo { background:rgba(67,49,17,.9)!important; color:#fff2bf!important; border-color:rgba(234,179,8,.35)!important; animation:glowBadge 2.5s ease-in-out infinite; } .ev-shop[data-preset="royal-gold"] .sh-bdg-promo .sh-promo-ico { background:#eab308!important; } .ev-shop[data-preset="royal-gold"] .sh-price { animation:evGoldPulse 2.5s ease-in-out infinite; } /* ── PROMO BURST ── */ .ev-shop[data-preset="promo-burst"] .sh-bdg-promo { background:rgba(90,24,7,.9)!important; color:#ffd7b3!important; border-color:rgba(255,77,0,.35)!important; animation:forgeBadge 2s ease-in-out infinite; } .ev-shop[data-preset="promo-burst"] .sh-bdg-promo .sh-promo-ico { background:#ff4d00!important; } /* ── BIOLUME ── */ .ev-shop[data-preset="biolume"] .sh-bdg-promo { background:rgba(0,61,38,.9)!important; color:#9dffd6!important; border-color:rgba(0,255,160,.28)!important; } .ev-shop[data-preset="biolume"] .sh-bdg-promo .sh-promo-ico { background:#00ff9f!important; } .ev-shop[data-preset="biolume"] .sh-bdg-stock { background:rgba(0,51,68,.9)!important; color:#9deeff!important; border-color:rgba(0,212,255,.22)!important; } .ev-shop[data-preset="biolume"] .sh-bdot--green { background:#00ff9f!important; box-shadow:0 0 8px rgba(0,255,160,.7)!important; color:#00ff9f!important; } /* ── AURORA BOREALIS ── */ .ev-shop[data-preset="aurora-borealis"] .sh-bdg-promo { background:rgba(0,61,42,.9)!important; color:#9dffd6!important; border-color:rgba(0,224,144,.28)!important; } .ev-shop[data-preset="aurora-borealis"] .sh-bdg-promo .sh-promo-ico { background:#00e090!important; } /* ── EMBER FORGE ── */ .ev-shop[data-preset="ember-forge"] .sh-bdg-promo { background:rgba(90,24,0,.9)!important; color:#ffd4a8!important; border-color:rgba(255,85,0,.32)!important; animation:forgeBadge 2s ease-in-out infinite; } .ev-shop[data-preset="ember-forge"] .sh-bdg-promo .sh-promo-ico { background:#ff5500!important; } /* ── INK STORM ── */ .ev-shop[data-preset="ink-storm"] .sh-bdg-promo { background:rgba(46,30,10,.9)!important; color:#f0d890!important; border-color:rgba(212,160,64,.3)!important; } .ev-shop[data-preset="ink-storm"] .sh-bdg-promo .sh-promo-ico { background:#d4a040!important; } /* ── PRISM BREAK ── */ .ev-shop[data-preset="prism-break"] .sh-bdg-promo { background:rgba(45,26,92,.9)!important; color:#e9d5ff!important; border-color:rgba(168,85,247,.3)!important; } .ev-shop[data-preset="prism-break"] .sh-bdg-promo .sh-promo-ico { background:#a855f7!important; } .ev-shop[data-preset="prism-break"] .sh-price { background:linear-gradient(90deg,#ff4444,#ff8800,#ffee00,#44ff44,#4488ff,#8844ff); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:evRgb 3s linear infinite; } /* ── STELLAR NURSERY ── */ .ev-shop[data-preset="stellar-nursery"] .sh-bdg-promo { background:rgba(45,0,102,.9)!important; color:#e9d5ff!important; border-color:rgba(192,80,255,.3)!important; } .ev-shop[data-preset="stellar-nursery"] .sh-bdg-promo .sh-promo-ico { background:#c050ff!important; } /* ── MERCURY LIQUID ── */ .ev-shop[data-preset="mercury-liquid"] .sh-bdg-promo { background:rgba(30,34,48,.9)!important; color:#c8d8f0!important; border-color:rgba(128,144,176,.3)!important; } .ev-shop[data-preset="mercury-liquid"] .sh-bdg-promo .sh-promo-ico { background:#b0c0d8!important; } /* ── VOID PROTOCOL ── */ .ev-shop[data-preset="void-protocol"] .sh-bdg-promo { background:rgba(0,51,34,.9)!important; color:#9dffd6!important; border-color:rgba(0,255,200,.28)!important; animation:voidBadge 4s ease-in-out infinite; } .ev-shop[data-preset="void-protocol"] .sh-bdg-promo .sh-promo-ico { background:#00ffc8!important; } .ev-shop[data-preset="void-protocol"] .sh-bdg-stock { background:rgba(51,0,21,.9)!important; color:#ff88b0!important; border-color:rgba(255,0,102,.22)!important; } /* ── WABI-SABI ── */ .ev-shop[data-preset="wabi-sabi"] .sh-bdg-promo { background:rgba(61,42,14,.9)!important; color:#f0d890!important; border-color:rgba(212,160,64,.38)!important; animation:kintsugiGlow 5s ease-in-out infinite; } .ev-shop[data-preset="wabi-sabi"] .sh-bdg-promo .sh-promo-ico { background:#d4a040!important; } /* ── VANTA ── */ .ev-shop[data-preset="vanta"] .sh-bdg-promo { background:rgba(17,17,17,.95)!important; color:#cbd5e1!important; border-color:rgba(255,255,255,.12)!important; } /* ══════════════════════════════════════════════════════════ ACCENT BARS ══════════════════════════════════════════════════════════ */ .ev-shop[data-preset="gaming-dark"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff8c00,#ffaa40,#ff8c00);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="clean-light"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff7a18,#ffaa40,#ff7a18);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="electric-blue"] .sh-oc-accent-bar { background:linear-gradient(90deg,#2f86ff,#60a5fa,#93c5fd,#60a5fa,#2f86ff);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="promo-burst"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff4d00,#ff8c00,#ffcc00,#ff8c00,#ff4d00);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="neon-violet"] .sh-oc-accent-bar { background:linear-gradient(90deg,#9b5cff,#c084fc,#e879f9,#c084fc,#9b5cff);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="emerald-raid"] .sh-oc-accent-bar { background:linear-gradient(90deg,#16c47f,#34d399,#6ee7b7,#34d399,#16c47f);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="carbon-white"] .sh-oc-accent-bar { background:linear-gradient(90deg,#334155,#64748b,#94a3b8,#64748b,#334155);background-size:300%;animation:evShimBar 6s linear infinite; } .ev-shop[data-preset="sunset-orange"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff7a18,#ff9a43,#ffcc88,#ff9a43,#ff7a18);background-size:300%;animation:evShimBar 3s linear infinite; } .ev-shop[data-preset="arctic-frost"] .sh-oc-accent-bar { background:linear-gradient(90deg,#60a5fa,#93c5fd,#bfdbfe,#93c5fd,#60a5fa);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="cyber-glitch"] .sh-oc-accent-bar { background:linear-gradient(90deg,#00f5ff,#7c3aed,#00c2ff,#00f5ff);background-size:300%;animation:evShimBar 3s linear infinite; } .ev-shop[data-preset="matrix-core"] .sh-oc-accent-bar { background:linear-gradient(90deg,#39ff88,#7dffb3,#00ff00,#39ff88);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="midnight-rgb"] .sh-oc-accent-bar { background:linear-gradient(90deg,#8b5cf6,#22d3ee,#f472b6,#fbbf24,#8b5cf6);background-size:300%;animation:evRgb 3s linear infinite; } .ev-shop[data-preset="aurora-grid"] .sh-oc-accent-bar { background:linear-gradient(90deg,#38bdf8,#5eead4,#38bdf8);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="retro-arcade"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff4fd8,#ffe14f,#ff4fd8);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="lava-core"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff6b00,#ffaa00,#ff6b00);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="ice-reactor"] .sh-oc-accent-bar { background:linear-gradient(90deg,#7dd3fc,#bae6fd,#38bdf8,#7dd3fc);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="royal-gold"] .sh-oc-accent-bar { background:linear-gradient(90deg,#eab308,#facc15,#fde68a,#facc15,#eab308);background-size:300%;animation:evShimBar 3s linear infinite; } .ev-shop[data-preset="saison-printemps"].sh-oc-accent-bar { background:linear-gradient(90deg,#34d399,#86efac,#6ee7b7,#34d399);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="saison-ete"] .sh-oc-accent-bar { background:linear-gradient(90deg,#f59e0b,#fbbf24,#fde68a,#f59e0b);background-size:300%;animation:evShimBar 3s linear infinite; } .ev-shop[data-preset="saison-automne"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ea580c,#fb923c,#fdba74,#ea580c);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="saison-hiver"] .sh-oc-accent-bar { background:linear-gradient(90deg,#7dd3fc,#bae6fd,#38bdf8,#7dd3fc);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="christmas-frost"] .sh-oc-accent-bar { background:linear-gradient(90deg,#dc2626,#f59e0b,#22c55e,#dc2626);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="black-friday"] .sh-oc-accent-bar { background:linear-gradient(90deg,#facc15,#fef08a,#facc15,#ca8a04,#facc15);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="halloween-night"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ea580c,#f97316,#fb923c,#ea580c);background-size:300%;animation:evShimBar 2.5s linear infinite; } .ev-shop[data-preset="valentine-love"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ec4899,#f472b6,#fce7f3,#f472b6,#ec4899);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="easter-spring"] .sh-oc-accent-bar { background:linear-gradient(90deg,#a855f7,#c084fc,#f472b6,#c084fc,#a855f7);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="summer-vibes"] .sh-oc-accent-bar { background:linear-gradient(90deg,#06b6d4,#22d3ee,#67e8f9,#22d3ee,#06b6d4);background-size:300%;animation:evShimBar 3s linear infinite; } .ev-shop[data-preset="new-year-spark"] .sh-oc-accent-bar { background:linear-gradient(90deg,#f59e0b,#fbbf24,#fef08a,#fbbf24,#f59e0b);background-size:300%;animation:evShimBar 2.5s linear infinite; } .ev-shop[data-preset="back-to-school"] .sh-oc-accent-bar { background:linear-gradient(90deg,#2563eb,#60a5fa,#93c5fd,#60a5fa,#2563eb);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="vanta"] .sh-oc-accent-bar { background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.6),rgba(255,255,255,.3));background-size:300%;animation:evShimBar 6s linear infinite; } .ev-shop[data-preset="biolume"] .sh-oc-accent-bar { background:linear-gradient(90deg,#00ff9f,#00d4ff,#80ffe8,#00ff9f);background-size:300%;animation:evShimBar 3s linear infinite; } .ev-shop[data-preset="aurora-borealis"] .sh-oc-accent-bar { background:linear-gradient(90deg,#00e090,#6450ff,#00c8ff,#00e090);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="ember-forge"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff5500,#ffaa00,#ff8800,#ff5500);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="ink-storm"] .sh-oc-accent-bar { background:linear-gradient(90deg,#5a4020,#d4a040,#f0d890,#d4a040,#5a4020);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="prism-break"] .sh-oc-accent-bar { background:linear-gradient(90deg,#ff4444,#ffee00,#44ff44,#4488ff,#8844ff,#ff4444);background-size:300%;animation:evShimBar 3s linear infinite; } .ev-shop[data-preset="stellar-nursery"] .sh-oc-accent-bar { background:linear-gradient(90deg,#c050ff,#ff6080,#ffa844,#c050ff);background-size:300%;animation:evShimBar 4s linear infinite; } .ev-shop[data-preset="mercury-liquid"] .sh-oc-accent-bar { background:linear-gradient(90deg,#8090b0,#b0c0d8,#e0e8f4,#b0c0d8,#8090b0);background-size:300%;animation:evShimBar 5s linear infinite; } .ev-shop[data-preset="void-protocol"] .sh-oc-accent-bar { background:linear-gradient(90deg,#00ffc8,#ff0066,#00aaff,#00ffc8);background-size:300%;animation:evShimBar 2s linear infinite; } .ev-shop[data-preset="wabi-sabi"] .sh-oc-accent-bar { background:linear-gradient(90deg,#d4a040,#f0d890,#d4a040,#c8a030,#d4a040);background-size:300%;animation:evShimBar 5s linear infinite; } /* ══════════════════════════════════════════════════════════ THEME LAYER — effets de fond ══════════════════════════════════════════════════════════ */ .ev-shop[data-preset="sunset-orange"] .ev-theme-layer { background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(255,122,24,.07),transparent 65%),radial-gradient(ellipse 50% 35% at 20% 30%,rgba(255,154,67,.05),transparent 55%);animation:evBreath 5s ease-in-out infinite; } .ev-shop[data-preset="neon-violet"] .ev-theme-layer { background:radial-gradient(ellipse 60% 40% at 60% 30%,rgba(155,92,255,.07),transparent 65%);animation:evBreath 5s ease-in-out infinite; } .ev-shop[data-preset="electric-blue"] .ev-theme-layer { background:radial-gradient(ellipse 55% 35% at 70% 20%,rgba(47,134,255,.06),transparent 60%);animation:evBreath 6s ease-in-out infinite; } .ev-shop[data-preset="promo-burst"] .ev-theme-layer { background:radial-gradient(ellipse 80% 55% at 50% 100%,rgba(255,77,0,.1),transparent 65%);animation:evForge 2.5s ease-in-out infinite; } .ev-shop[data-preset="new-year-spark"] .ev-theme-layer { background:radial-gradient(ellipse 60% 35% at 50% 0%,rgba(251,191,36,.06),transparent 60%);animation:evBreath 4s ease-in-out infinite; } .ev-shop[data-preset="cyber-glitch"] .ev-theme-layer { background:repeating-linear-gradient(0deg,rgba(0,245,255,.025) 0px,rgba(0,245,255,.025) 1px,transparent 1px,transparent 28px),repeating-linear-gradient(90deg,rgba(0,245,255,.02) 0px,rgba(0,245,255,.02) 1px,transparent 1px,transparent 28px); } .ev-shop[data-preset="matrix-core"] .ev-theme-layer { background:repeating-linear-gradient(0deg,rgba(57,255,136,.04) 0px,rgba(57,255,136,.04) 1px,transparent 1px,transparent 16px);animation:evBreath 3s ease-in-out infinite; } .ev-shop[data-preset="midnight-rgb"] .ev-theme-layer { background:radial-gradient(ellipse 60% 35% at 20% 50%,rgba(139,92,246,.06),transparent 60%),radial-gradient(ellipse 50% 35% at 80% 50%,rgba(34,211,238,.05),transparent 60%);animation:evBreath 5s ease-in-out infinite; } .ev-shop[data-preset="aurora-grid"] .ev-theme-layer { background:radial-gradient(ellipse 60% 32% at 50% 0%,rgba(56,189,248,.06),transparent 65%);animation:evWaveX 8s ease-in-out infinite; } .ev-shop[data-preset="retro-arcade"] .ev-theme-layer { background:repeating-linear-gradient(0deg,rgba(255,79,216,.05) 0px,rgba(255,79,216,.05) 1px,transparent 1px,transparent 4px);animation:evCrtScan .4s linear infinite; } .ev-shop[data-preset="lava-core"] .ev-theme-layer { background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(255,107,0,.09),transparent 65%);animation:evForge 2.8s ease-in-out infinite; } .ev-shop[data-preset="ice-reactor"] .ev-theme-layer { background:repeating-linear-gradient(-55deg,rgba(125,211,252,.025) 0px,rgba(125,211,252,.025) 1px,transparent 1px,transparent 24px),radial-gradient(ellipse 70% 30% at 50% 0%,rgba(125,211,252,.04),transparent 60%);animation:evBreath 7s ease-in-out infinite; } .ev-shop[data-preset="arctic-frost"] .ev-theme-layer { background:repeating-linear-gradient(-55deg,rgba(125,211,252,.025) 0px,rgba(125,211,252,.025) 1px,transparent 1px,transparent 24px);animation:evBreath 7s ease-in-out infinite; } .ev-shop[data-preset="royal-gold"] .ev-theme-layer { background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(234,179,8,.05),transparent 60%);animation:evBreath 5s ease-in-out infinite; } .ev-shop[data-preset="saison-printemps"].ev-theme-layer { background:radial-gradient(ellipse 65% 40% at 25% 20%,rgba(52,211,153,.07),transparent 60%),radial-gradient(ellipse 55% 38% at 78% 70%,rgba(134,239,172,.06),transparent 55%);animation:evBreath 6s ease-in-out infinite; } .ev-shop[data-preset="saison-ete"] .ev-theme-layer { top:-60%;left:20%;right:-20%;height:140%;width:auto;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(251,191,36,.04),transparent 22deg,rgba(245,158,11,.03),transparent 44deg,rgba(251,191,36,.04),transparent 66deg,rgba(245,158,11,.03),transparent 88deg,rgba(251,191,36,.04),transparent);animation:evSunSpin 28s linear infinite; } .ev-shop[data-preset="summer-vibes"] .ev-theme-layer { top:-60%;left:20%;right:-20%;height:140%;width:auto;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(6,182,212,.04),transparent 22deg,rgba(34,211,238,.03),transparent 44deg,rgba(6,182,212,.04),transparent);animation:evSunSpin 28s linear infinite; } .ev-shop[data-preset="saison-automne"] .ev-theme-layer { background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(249,115,22,.08),transparent 65%),radial-gradient(ellipse 60% 40% at 18% 30%,rgba(234,88,12,.06),transparent 55%);animation:evBreath 5s ease-in-out infinite; } .ev-shop[data-preset="saison-hiver"] .ev-theme-layer { background:radial-gradient(ellipse 80% 32% at 50% 0%,rgba(125,211,252,.06),transparent 62%),radial-gradient(ellipse 50% 25% at 20% 60%,rgba(186,230,253,.04),transparent 55%);animation:evBreath 6s ease-in-out infinite; } .ev-shop[data-preset="christmas-frost"] .ev-theme-layer { background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(225,29,72,.05),transparent 60%),radial-gradient(ellipse 50% 30% at 50% 100%,rgba(20,83,45,.07),transparent 60%);animation:evBreath 4s ease-in-out infinite; } .ev-shop[data-preset="halloween-night"] .ev-theme-layer { background:radial-gradient(ellipse 70% 45% at 50% 100%,rgba(249,115,22,.09),transparent 65%);animation:evForge 3s ease-in-out infinite; } .ev-shop[data-preset="valentine-love"] .ev-theme-layer { background:radial-gradient(ellipse 60% 45% at 50% 50%,rgba(236,72,153,.06),transparent 65%);animation:evBreath 5s ease-in-out infinite; } .ev-shop[data-preset="easter-spring"] .ev-theme-layer { background:radial-gradient(ellipse 60% 35% at 30% 25%,rgba(168,85,247,.05),transparent 60%),radial-gradient(ellipse 50% 30% at 75% 65%,rgba(244,114,182,.04),transparent 55%);animation:evBreath 6s ease-in-out infinite; } .ev-shop[data-preset="black-friday"] .ev-theme-layer { background:radial-gradient(ellipse 60% 35% at 50% 0%,rgba(250,204,21,.05),transparent 60%);animation:evBreath 4s ease-in-out infinite; } .ev-shop[data-preset="biolume"] .ev-theme-layer { background:radial-gradient(circle 4px at 18% 64%,rgba(0,255,160,.65),transparent 12px),radial-gradient(circle 3px at 53% 77%,rgba(0,200,255,.55),transparent 9px),radial-gradient(circle 4px at 76% 54%,rgba(80,255,180,.5),transparent 12px),radial-gradient(circle 3px at 38% 41%,rgba(0,240,140,.5),transparent 9px),radial-gradient(circle 3px at 66% 29%,rgba(120,255,220,.4),transparent 9px),radial-gradient(ellipse 65% 48% at 50% 100%,rgba(0,255,160,.04),transparent 65%);animation:evBreath 3.5s ease-in-out infinite; } .ev-shop[data-preset="aurora-borealis"] .ev-theme-layer { top:-35%;left:-25%;right:-25%;height:80%;width:auto;border-radius:50%;background:linear-gradient(180deg,rgba(0,224,144,.1) 0%,rgba(100,80,255,.08) 40%,transparent 100%);filter:blur(28px);animation:evBreath 9s ease-in-out infinite; } .ev-shop[data-preset="ember-forge"] .ev-theme-layer { background:radial-gradient(ellipse 85% 55% at 50% 100%,rgba(255,85,0,.11),transparent 65%);animation:evForge 2.5s ease-in-out infinite; } .ev-shop[data-preset="ink-storm"] .ev-theme-layer { display:flex;align-items:flex-end;justify-content:flex-end;font-size:110px;font-family:serif;color:rgba(15,10,5,.05);line-height:1;user-select:none;animation:evBreath 10s ease-in-out infinite; } .ev-shop[data-preset="ink-storm"] .ev-theme-layer::before { content:'書'; } .ev-shop[data-preset="prism-break"] .ev-theme-layer { background:linear-gradient(155deg,rgba(255,0,0,.025) 0%,rgba(255,100,0,.025) 15%,rgba(255,220,0,.025) 30%,rgba(0,200,0,.025) 45%,rgba(0,100,255,.025) 60%,rgba(150,0,220,.025) 75%,transparent 90%);animation:evBreath 6s ease-in-out infinite; } .ev-shop[data-preset="stellar-nursery"] .ev-theme-layer { background:radial-gradient(ellipse 30% 25% at 15% 20%,rgba(192,80,255,.12),transparent 70%),radial-gradient(ellipse 25% 22% at 80% 60%,rgba(255,96,128,.1),transparent 70%),radial-gradient(ellipse 20% 18% at 55% 80%,rgba(80,140,255,.08),transparent 70%);animation:evNebula 14s ease-in-out infinite; } .ev-shop[data-preset="mercury-liquid"] .ev-theme-layer { top:38%;left:5%;right:5%;bottom:auto;height:3px;background:linear-gradient(90deg,transparent,rgba(200,216,240,.3),transparent);filter:blur(1px);animation:evMercury 5s ease-in-out infinite; } .ev-shop[data-preset="void-protocol"] .ev-theme-layer { background:rgba(255,0,80,.02);animation:evGlitch 5s ease-in-out infinite; } /* ══════════════════════════════════════════════════════════ CARD EFFECTS — sh-card::before ══════════════════════════════════════════════════════════ */ .ev-shop[data-preset="cyber-glitch"] .sh-card::before, .ev-shop[data-preset="void-protocol"] .sh-card::before { content:'';position:absolute;left:0;right:0;height:2px;top:0; background:rgba(0,245,255,.25);pointer-events:none;z-index:2; animation:evCardScanV 3.5s linear infinite; } .ev-shop[data-preset="void-protocol"] .sh-card::before { background:rgba(0,255,200,.22);animation-duration:6s; } .ev-shop[data-preset="matrix-core"] .sh-card::before { content:'';position:absolute;left:0;right:0;height:1.5px;top:0; background:rgba(57,255,136,.2);pointer-events:none;z-index:2; animation:evCardScanV 5s linear infinite; } .ev-shop[data-preset="saison-hiver"] .sh-card::before { content:'❄';position:absolute;top:9px;right:11px; font-size:14px;color:rgba(125,211,252,.28);pointer-events:none;z-index:2; animation:evSnowSpin 8s linear infinite; } .ev-shop[data-preset="ember-forge"] .sh-card::before { content:'';position:absolute;bottom:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(255,170,0,.55),rgba(255,85,0,.75),rgba(255,170,0,.55),transparent); pointer-events:none;z-index:2;animation:evBreath 2s ease-in-out infinite; } .ev-shop[data-preset="royal-gold"] .sh-card::before { content:'';position:absolute;top:0;left:0;right:0;height:1.5px; background:linear-gradient(90deg,transparent,rgba(234,179,8,.5),transparent); pointer-events:none;z-index:2; } .ev-shop[data-preset="wabi-sabi"] .sh-card::before { content:'';position:absolute;top:32%;left:5%;right:5%;height:1px; background:linear-gradient(90deg,transparent,rgba(212,160,64,.55),rgba(240,190,70,.8),rgba(212,160,64,.55),transparent); transform:rotate(-5deg);pointer-events:none;z-index:2; animation:evKintsugi 6s ease-in-out infinite; } .ev-shop[data-preset="ink-storm"] .sh-card::before { content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background:repeating-linear-gradient(-12deg,rgba(15,10,5,.016) 0px,rgba(15,10,5,.016) 1px,transparent 1px,transparent 18px); } /* ══════════════════════════════════════════════════════════ BORDERS CARDS ══════════════════════════════════════════════════════════ */ .ev-shop[data-preset="saison-printemps"] .sh-card, .ev-shop[data-preset="easter-spring"] .sh-card { border-color:rgba(52,211,153,.22)!important; } .ev-shop[data-preset="saison-automne"] .sh-card { border-color:rgba(249,115,22,.2)!important; } .ev-shop[data-preset="saison-hiver"] .sh-card { border-color:rgba(125,211,252,.22)!important; } .ev-shop[data-preset="halloween-night"] .sh-card{ border-color:rgba(249,115,22,.18)!important; } .ev-shop[data-preset="valentine-love"] .sh-card { border-color:rgba(236,72,153,.2)!important; } .ev-shop[data-preset="biolume"] .sh-card { border-color:rgba(0,255,160,.16)!important; } .ev-shop[data-preset="stellar-nursery"] .sh-card{ border-color:rgba(192,80,255,.16)!important; } .ev-shop[data-preset="mercury-liquid"] .sh-card { border-color:rgba(180,195,220,.16)!important; } .ev-shop[data-preset="void-protocol"] .sh-card { border-color:rgba(0,255,200,.14)!important; } .ev-shop[data-preset="wabi-sabi"] .sh-card { border-color:rgba(212,160,64,.2)!important; } .ev-shop[data-preset="wabi-sabi"] .sh-card:hover{ border-color:rgba(212,160,64,.48)!important;box-shadow:0 0 24px rgba(212,160,64,.14)!important; } .ev-shop[data-preset="vanta"] .sh-card { border-color:rgba(255,255,255,.04)!important; } .ev-shop[data-preset="vanta"] .sh-card:hover { border-color:rgba(255,255,255,.18)!important; } .ev-shop[data-preset="ink-storm"] .sh-card { border-color:rgba(15,10,5,.16)!important; } /* ══════════════════════════════════════════════════════════ CAROUSEL ══════════════════════════════════════════════════════════ */ .mx-bestseller-dyn[data-preset="saison-printemps"] .mx-pulseDot { background:#34d399!important; } .mx-bestseller-dyn[data-preset="saison-ete"] .mx-pulseDot { background:#f59e0b!important; } .mx-bestseller-dyn[data-preset="saison-automne"] .mx-pulseDot { background:#f97316!important; } .mx-bestseller-dyn[data-preset="saison-hiver"] .mx-pulseDot { background:#7dd3fc!important; } .mx-bestseller-dyn[data-preset="biolume"] .mx-pulseDot { background:#00ff9f!important; } .mx-bestseller-dyn[data-preset="aurora-borealis"] .mx-pulseDot { background:#00e090!important; } .mx-bestseller-dyn[data-preset="wabi-sabi"] .mx-pulseDot { background:#d4a040!important; } .mx-bestseller-dyn[data-preset="vanta"] .mx-pulseDot { background:#94a3b8!important; } .mx-bestseller-dyn[data-preset="void-protocol"] .mx-pulseDot { background:#00ffc8!important; } .mx-bestseller-dyn[data-preset="stellar-nursery"] .mx-pulseDot { background:#c050ff!important; } .mx-bestseller-dyn[data-preset="ember-forge"] .mx-pulseDot { background:#ff5500!important; } .mx-bestseller-dyn[data-preset="prism-break"] .mx-pulseDot { background:#a855f7!important; } .mx-bestseller-dyn[data-preset="christmas-frost"] .mx-pulseDot { animation:xmasDot 1.4s step-end infinite!important; } /* ══════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce) { .ev-theme-layer,.ev-shop .sh-card::before, .ev-shop .sh-oc-accent-bar,.ev-shop .sh-price, .ev-shop .sh-bdg-promo,.ev-shop .sh-bdg-stock, .ev-shop .sh-bdot--green,.mx-bestseller-dyn .mx-pulseDot, .ev-shop .sh-bdg-promo::before { animation:none!important;-webkit-text-fill-color:unset!important; } } /* ══════════════════════════════════════════════════════════ EV-THEMES — HOVER A (CSS) par preset Scope : [data-hover-fx="A"][data-preset="X"] .sh-card [data-hover-fx="A"][data-preset="X"] .mx-card (carousel) ══════════════════════════════════════════════════════════ */ /* ── Shared ── */ [data-hover-fx="A"] .sh-card, [data-hover-fx="A"] .mx-card { transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .28s ease; } [data-hover-fx="A"] .sh-card:hover, [data-hover-fx="A"] .mx-card:hover { transform: translateY(-6px) scale(1.013); } /* ───────────────────────────────────────────────────────── GAMING DARK — Shimmer scan diagonal orange ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="gaming-dark"] .sh-card::before, [data-hover-fx="A"][data-preset="gaming-dark"] .mx-card::before { content:'';position:absolute;top:0;left:-100%;width:60%;height:100%; background:linear-gradient(105deg,transparent,rgba(255,140,0,.1),transparent); transition:left .5s ease;pointer-events:none;z-index:2; } [data-hover-fx="A"][data-preset="gaming-dark"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="gaming-dark"] .mx-card:hover::before { left:150%; } [data-hover-fx="A"][data-preset="gaming-dark"] .sh-card:hover, [data-hover-fx="A"][data-preset="gaming-dark"] .mx-card:hover { border-color:rgba(255,140,0,.45)!important; box-shadow:0 12px 40px rgba(255,140,0,.14),0 0 0 1px rgba(255,140,0,.22)!important; } /* ───────────────────────────────────────────────────────── ELECTRIC BLUE — Décharge en bordure haute ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="electric-blue"] .sh-card::before, [data-hover-fx="A"][data-preset="back-to-school"] .sh-card::before, [data-hover-fx="A"][data-preset="electric-blue"] .mx-card::before, [data-hover-fx="A"][data-preset="back-to-school"] .mx-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(47,134,255,.85),rgba(147,197,253,.95),rgba(47,134,255,.85),transparent); transform:scaleX(0);transition:.32s cubic-bezier(.34,1.5,.64,1);pointer-events:none;z-index:3; } [data-hover-fx="A"][data-preset="electric-blue"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="back-to-school"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="electric-blue"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="back-to-school"] .mx-card:hover::before { transform:scaleX(1); } [data-hover-fx="A"][data-preset="electric-blue"] .sh-card:hover, [data-hover-fx="A"][data-preset="back-to-school"] .sh-card:hover, [data-hover-fx="A"][data-preset="electric-blue"] .mx-card:hover, [data-hover-fx="A"][data-preset="back-to-school"] .mx-card:hover { border-color:rgba(47,134,255,.48)!important; box-shadow:0 0 44px rgba(47,134,255,.16),0 0 0 1px rgba(96,165,250,.22)!important; } /* ───────────────────────────────────────────────────────── MATRIX CORE — Scan line + chars 01 ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="matrix-core"] .sh-card::after, [data-hover-fx="A"][data-preset="matrix-core"] .mx-card::after { content:'';position:absolute;left:0;right:0;height:2px;top:0; background:rgba(57,255,136,.5);pointer-events:none;z-index:3;opacity:0; } [data-hover-fx="A"][data-preset="matrix-core"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="matrix-core"] .mx-card:hover::after { opacity:1;animation:evMatrixScan 1.8s linear infinite; } @keyframes evMatrixScan { 0%{top:-4px} 100%{top:110%} } [data-hover-fx="A"][data-preset="matrix-core"] .sh-card:hover, [data-hover-fx="A"][data-preset="matrix-core"] .mx-card:hover { border-color:rgba(57,255,136,.4)!important; box-shadow:0 0 36px rgba(57,255,136,.16)!important; } /* chars overlay injecté par JS */ [data-hover-fx="A"][data-preset="matrix-core"] .ev-char-overlay { position:absolute;top:8px;right:10px;font-family:'Space Mono',monospace; font-size:10px;color:rgba(57,255,136,.55);opacity:0;pointer-events:none;z-index:4; transition:opacity .2s; } [data-hover-fx="A"][data-preset="matrix-core"] .sh-card:hover .ev-char-overlay, [data-hover-fx="A"][data-preset="matrix-core"] .mx-card:hover .ev-char-overlay { opacity:1; } /* ───────────────────────────────────────────────────────── CYBER GLITCH — Aberration chromatique RGB ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="cyber-glitch"] .sh-card::before, [data-hover-fx="A"][data-preset="cyber-glitch"] .sh-card::after, [data-hover-fx="A"][data-preset="cyber-glitch"] .mx-card::before, [data-hover-fx="A"][data-preset="cyber-glitch"] .mx-card::after { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .15s;z-index:2; } [data-hover-fx="A"][data-preset="cyber-glitch"] .sh-card::before, [data-hover-fx="A"][data-preset="cyber-glitch"] .mx-card::before { background:rgba(255,0,80,.04); } [data-hover-fx="A"][data-preset="cyber-glitch"] .sh-card::after, [data-hover-fx="A"][data-preset="cyber-glitch"] .mx-card::after { background:rgba(0,200,255,.04); } [data-hover-fx="A"][data-preset="cyber-glitch"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="cyber-glitch"] .mx-card:hover::before { opacity:1;animation:evRgbR .12s ease-in-out infinite alternate; } [data-hover-fx="A"][data-preset="cyber-glitch"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="cyber-glitch"] .mx-card:hover::after { opacity:1;animation:evRgbB .12s ease-in-out infinite alternate; } @keyframes evRgbR { to{transform:translate(2px,0)} } @keyframes evRgbB { to{transform:translate(-2px,0)} } [data-hover-fx="A"][data-preset="cyber-glitch"] .sh-card:hover, [data-hover-fx="A"][data-preset="cyber-glitch"] .mx-card:hover { border-color:rgba(0,245,255,.45)!important; box-shadow:0 0 44px rgba(0,245,255,.14)!important; } /* ───────────────────────────────────────────────────────── HIVER / ICE-REACTOR / ARCTIC — Frost border + ❄ tournant ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="saison-hiver"] .sh-card::after, [data-hover-fx="A"][data-preset="ice-reactor"] .sh-card::after, [data-hover-fx="A"][data-preset="arctic-frost"] .sh-card::after, [data-hover-fx="A"][data-preset="saison-hiver"] .mx-card::after, [data-hover-fx="A"][data-preset="ice-reactor"] .mx-card::after, [data-hover-fx="A"][data-preset="arctic-frost"] .mx-card::after { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(125,211,252,.07),transparent 70%); opacity:0;transition:opacity .3s;z-index:2; } [data-hover-fx="A"][data-preset="saison-hiver"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="ice-reactor"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="arctic-frost"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="saison-hiver"] .mx-card:hover::after, [data-hover-fx="A"][data-preset="ice-reactor"] .mx-card:hover::after, [data-hover-fx="A"][data-preset="arctic-frost"] .mx-card:hover::after { opacity:1; } [data-hover-fx="A"][data-preset="saison-hiver"] .sh-card:hover, [data-hover-fx="A"][data-preset="ice-reactor"] .sh-card:hover, [data-hover-fx="A"][data-preset="arctic-frost"] .sh-card:hover, [data-hover-fx="A"][data-preset="saison-hiver"] .mx-card:hover, [data-hover-fx="A"][data-preset="ice-reactor"] .mx-card:hover, [data-hover-fx="A"][data-preset="arctic-frost"] .mx-card:hover { border-color:rgba(125,211,252,.5)!important; box-shadow:0 0 32px rgba(125,211,252,.14),inset 0 1px 0 rgba(186,230,253,.18)!important; } /* ❄ injecté par JS */ [data-hover-fx="A"] .ev-frost-ico { position:absolute;top:8px;right:10px;font-size:14px;color:rgba(125,211,252,.3); transition:.4s;transform:rotate(0) scale(.8);pointer-events:none;z-index:4; } [data-hover-fx="A"] .sh-card:hover .ev-frost-ico, [data-hover-fx="A"] .mx-card:hover .ev-frost-ico { color:rgba(125,211,252,.85);animation:evFrostSpin 3s linear infinite;transform:scale(1.1); } @keyframes evFrostSpin { to{transform:rotate(360deg) scale(1.1)} } /* ───────────────────────────────────────────────────────── PRINTEMPS / PÂQUES — Pétales sakura ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="saison-printemps"] .sh-card:hover, [data-hover-fx="A"][data-preset="easter-spring"] .sh-card:hover, [data-hover-fx="A"][data-preset="saison-printemps"] .mx-card:hover, [data-hover-fx="A"][data-preset="easter-spring"] .mx-card:hover { border-color:rgba(244,114,182,.42)!important; box-shadow:0 0 30px rgba(244,114,182,.14)!important; } /* pétales injectés par JS */ [data-hover-fx="A"] .ev-petal-shower { position:absolute;top:-10px;left:0;right:0; font-size:13px;opacity:0;pointer-events:none;z-index:4; display:flex;justify-content:space-around; } [data-hover-fx="A"] .sh-card:hover .ev-petal-shower, [data-hover-fx="A"] .mx-card:hover .ev-petal-shower { opacity:1;animation:evPetalRain 1.5s ease-in-out infinite; } @keyframes evPetalRain { 0%{transform:translateY(0)rotate(-5deg);opacity:0} 20%{opacity:1} 100%{transform:translateY(65px)rotate(15deg);opacity:0} } /* ───────────────────────────────────────────────────────── AUTOMNE — Feuille virevoltante ───────────────────────────────────────────────────────── */ [data-hover-fx="A"] .ev-leaf-ico { position:absolute;top:8px;right:10px;font-size:14px;opacity:.3; transition:.3s;transform:rotate(-10deg);pointer-events:none;z-index:4; } [data-hover-fx="A"] .sh-card:hover .ev-leaf-ico, [data-hover-fx="A"] .mx-card:hover .ev-leaf-ico { opacity:.9;animation:evLeafDrift 1s ease-in-out infinite alternate; } @keyframes evLeafDrift { to{transform:translateY(-4px)rotate(10deg)} } [data-hover-fx="A"][data-preset="saison-automne"] .sh-card:hover, [data-hover-fx="A"][data-preset="saison-automne"] .mx-card:hover { border-color:rgba(249,115,22,.38)!important; box-shadow:0 0 30px rgba(249,115,22,.14),0 8px 32px rgba(249,115,22,.08)!important; } /* ───────────────────────────────────────────────────────── MIDNIGHT RGB — Bordure arc-en-ciel animée ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="midnight-rgb"] .sh-card::before, [data-hover-fx="A"][data-preset="midnight-rgb"] .mx-card::before { content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0; background:linear-gradient(90deg,#8b5cf6,#22d3ee,#f472b6,#fbbf24,#8b5cf6); background-size:300%;opacity:0;transition:opacity .3s; } [data-hover-fx="A"][data-preset="midnight-rgb"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="midnight-rgb"] .mx-card:hover::before { opacity:1;animation:evRgbBorder 3s linear infinite; } @keyframes evRgbBorder { 0%{background-position:0%}100%{background-position:200%} } [data-hover-fx="A"][data-preset="midnight-rgb"] .sh-card:hover, [data-hover-fx="A"][data-preset="midnight-rgb"] .mx-card:hover { box-shadow:0 12px 48px rgba(139,92,246,.22)!important; } /* ───────────────────────────────────────────────────────── AURORA (aurora-grid, aurora-borealis) — Halo polaire ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="aurora-grid"] .sh-card::before, [data-hover-fx="A"][data-preset="aurora-borealis"] .sh-card::before, [data-hover-fx="A"][data-preset="aurora-grid"] .mx-card::before, [data-hover-fx="A"][data-preset="aurora-borealis"] .mx-card::before { content:'';position:absolute;top:0;left:-30%;width:60%;height:60%; background:radial-gradient(ellipse,rgba(0,224,144,.09),transparent 70%); border-radius:50%;filter:blur(12px);transform:translateY(-30%); transition:.4s ease;pointer-events:none;z-index:2; } [data-hover-fx="A"][data-preset="aurora-grid"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="aurora-borealis"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="aurora-grid"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="aurora-borealis"] .mx-card:hover::before { transform:translateY(-10%) scale(1.35); } [data-hover-fx="A"][data-preset="aurora-grid"] .sh-card:hover, [data-hover-fx="A"][data-preset="aurora-borealis"] .sh-card:hover, [data-hover-fx="A"][data-preset="aurora-grid"] .mx-card:hover, [data-hover-fx="A"][data-preset="aurora-borealis"] .mx-card:hover { border-color:rgba(0,224,144,.4)!important; box-shadow:0 0 52px rgba(0,224,144,.15),0 0 80px rgba(100,80,255,.08)!important; } /* ───────────────────────────────────────────────────────── RETRO ARCADE — Scanlines CRT + flicker ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="retro-arcade"] .sh-card::after, [data-hover-fx="A"][data-preset="retro-arcade"] .mx-card::after { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:repeating-linear-gradient(0deg,rgba(255,79,216,.04) 0px,rgba(255,79,216,.04) 1px,transparent 1px,transparent 3px); opacity:0;transition:opacity .2s; } [data-hover-fx="A"][data-preset="retro-arcade"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="retro-arcade"] .mx-card:hover::after { opacity:1; } [data-hover-fx="A"][data-preset="retro-arcade"] .sh-card:hover, [data-hover-fx="A"][data-preset="retro-arcade"] .mx-card:hover { border-color:rgba(255,79,216,.4)!important; box-shadow:0 0 36px rgba(255,79,216,.14)!important; animation:evArcadeFlicker .08s linear infinite; } @keyframes evArcadeFlicker {0%,100%{filter:brightness(1)}50%{filter:brightness(1.025)}} /* ───────────────────────────────────────────────────────── LAVA / PROMO-BURST / SUNSET — Lave remontante ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="lava-core"] .sh-card::after, [data-hover-fx="A"][data-preset="promo-burst"] .sh-card::after, [data-hover-fx="A"][data-preset="sunset-orange"] .sh-card::after, [data-hover-fx="A"][data-preset="lava-core"] .mx-card::after, [data-hover-fx="A"][data-preset="promo-burst"] .mx-card::after, [data-hover-fx="A"][data-preset="sunset-orange"] .mx-card::after { content:'';position:absolute;bottom:-100%;left:0;right:0;height:100%; pointer-events:none;z-index:2; background:radial-gradient(ellipse 80% 40% at 50% 100%,rgba(255,107,0,.14),transparent 60%); transition:bottom .4s cubic-bezier(.34,1.2,.64,1); } [data-hover-fx="A"][data-preset="lava-core"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="promo-burst"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="sunset-orange"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="lava-core"] .mx-card:hover::after, [data-hover-fx="A"][data-preset="promo-burst"] .mx-card:hover::after, [data-hover-fx="A"][data-preset="sunset-orange"] .mx-card:hover::after { bottom:0; } [data-hover-fx="A"][data-preset="lava-core"] .sh-card:hover, [data-hover-fx="A"][data-preset="promo-burst"] .sh-card:hover, [data-hover-fx="A"][data-preset="sunset-orange"] .sh-card:hover, [data-hover-fx="A"][data-preset="lava-core"] .mx-card:hover, [data-hover-fx="A"][data-preset="promo-burst"] .mx-card:hover, [data-hover-fx="A"][data-preset="sunset-orange"] .mx-card:hover { border-color:rgba(255,107,0,.38)!important; box-shadow:0 8px 52px rgba(255,107,0,.16)!important; } /* ───────────────────────────────────────────────────────── STELLAR / NEON-VIOLET — Étoile ✦ cosmique ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="stellar-nursery"] .sh-card::before, [data-hover-fx="A"][data-preset="neon-violet"] .sh-card::before, [data-hover-fx="A"][data-preset="stellar-nursery"] .mx-card::before, [data-hover-fx="A"][data-preset="neon-violet"] .mx-card::before { content:'✦';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%) scale(0);font-size:52px;opacity:0; color:rgba(192,80,255,.4);transition:.4s cubic-bezier(.34,1.5,.64,1);pointer-events:none;z-index:3; } [data-hover-fx="A"][data-preset="stellar-nursery"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="neon-violet"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="stellar-nursery"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="neon-violet"] .mx-card:hover::before { transform:translate(-50%,-50%) scale(1.25);opacity:1; } [data-hover-fx="A"][data-preset="stellar-nursery"] .sh-card:hover, [data-hover-fx="A"][data-preset="neon-violet"] .sh-card:hover, [data-hover-fx="A"][data-preset="stellar-nursery"] .mx-card:hover, [data-hover-fx="A"][data-preset="neon-violet"] .mx-card:hover { border-color:rgba(192,80,255,.4)!important; box-shadow:0 0 52px rgba(192,80,255,.18),0 0 80px rgba(255,96,128,.08)!important; } /* ───────────────────────────────────────────────────────── VOID PROTOCOL — Glitch brutal + scanlines ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="void-protocol"] .sh-card:hover, [data-hover-fx="A"][data-preset="void-protocol"] .mx-card:hover { animation:evVoidHover .16s ease-in-out; } @keyframes evVoidHover { 0%{transform:translateY(-6px) scale(1.013)} 25%{transform:translateY(-6px) translate(2px,0) scale(1.013)} 50%{transform:translateY(-6px) translate(-1px,0) scale(1.013)} 75%{transform:translateY(-6px) translate(1px,-1px) scale(1.013)} 100%{transform:translateY(-6px) scale(1.013)} } [data-hover-fx="A"][data-preset="void-protocol"] .sh-card::after, [data-hover-fx="A"][data-preset="void-protocol"] .mx-card::after { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0; background:repeating-linear-gradient(0deg,rgba(0,255,200,.03) 0px,rgba(0,255,200,.03) 1px,transparent 1px,transparent 4px); } [data-hover-fx="A"][data-preset="void-protocol"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="void-protocol"] .mx-card:hover::after { opacity:1;animation:evVoidLines .3s linear infinite; } @keyframes evVoidLines {0%{background-position:0 0}100%{background-position:0 4px}} [data-hover-fx="A"][data-preset="void-protocol"] .sh-card:hover, [data-hover-fx="A"][data-preset="void-protocol"] .mx-card:hover { border-color:rgba(0,255,200,.38)!important; box-shadow:0 0 36px rgba(0,255,200,.14)!important; } /* ───────────────────────────────────────────────────────── BIOLUME — Particule cursor (CSS fallback + JS glow) ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="biolume"] .sh-card:hover, [data-hover-fx="A"][data-preset="biolume"] .mx-card:hover { border-color:rgba(0,255,160,.32)!important; box-shadow:0 0 44px rgba(0,255,160,.14),0 0 80px rgba(0,200,255,.07)!important; } [data-hover-fx="A"][data-preset="biolume"] .sh-card::after, [data-hover-fx="A"][data-preset="biolume"] .mx-card::after { content:'';position:absolute;width:10px;height:10px;border-radius:50%; background:rgba(0,255,160,.85);box-shadow:0 0 18px 5px rgba(0,255,160,.45); pointer-events:none;opacity:0;transition:opacity .2s; left:var(--ev-mx,50%);top:var(--ev-my,50%);transform:translate(-50%,-50%);z-index:5; } [data-hover-fx="A"][data-preset="biolume"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="biolume"] .mx-card:hover::after { opacity:1; } /* ───────────────────────────────────────────────────────── WABI-SABI — Veine kintsugi CSS ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="wabi-sabi"] .sh-card::before, [data-hover-fx="A"][data-preset="wabi-sabi"] .mx-card::before { content:'';position:absolute;top:30%;left:5%;right:5%;height:1px; background:linear-gradient(90deg,transparent,rgba(212,160,64,.65),rgba(240,190,70,.95),rgba(212,160,64,.65),transparent); transform:scaleX(0) rotate(-5deg);transform-origin:left; transition:.42s cubic-bezier(.34,1.2,.64,1);pointer-events:none;z-index:3; } [data-hover-fx="A"][data-preset="wabi-sabi"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="wabi-sabi"] .mx-card:hover::before { transform:scaleX(1) rotate(-5deg); } [data-hover-fx="A"][data-preset="wabi-sabi"] .sh-card:hover, [data-hover-fx="A"][data-preset="wabi-sabi"] .mx-card:hover { border-color:rgba(212,160,64,.52)!important; box-shadow:0 0 36px rgba(212,160,64,.16),0 0 0 1px rgba(240,190,70,.32)!important; } /* ───────────────────────────────────────────────────────── EMBER FORGE — Braise en bas + glow thermique ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="ember-forge"] .sh-card::after, [data-hover-fx="A"][data-preset="ember-forge"] .mx-card::after { content:'';position:absolute;bottom:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,rgba(255,170,0,.65),rgba(255,85,0,.95),rgba(255,170,0,.65),transparent); transform:scaleX(0);transform-origin:center;transition:.36s cubic-bezier(.34,1.38,.64,1);pointer-events:none;z-index:3; } [data-hover-fx="A"][data-preset="ember-forge"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="ember-forge"] .mx-card:hover::after { transform:scaleX(1); } [data-hover-fx="A"][data-preset="ember-forge"] .sh-card:hover, [data-hover-fx="A"][data-preset="ember-forge"] .mx-card:hover { border-color:rgba(255,85,0,.42)!important; box-shadow:0 0 52px rgba(255,85,0,.2),0 0 18px rgba(255,170,0,.1),inset 0 0 20px rgba(255,85,0,.04)!important; } /* ───────────────────────────────────────────────────────── ROYAL GOLD / ÉTÉ / SUMMER — Shimmer doré ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="royal-gold"] .sh-card::before, [data-hover-fx="A"][data-preset="saison-ete"] .sh-card::before, [data-hover-fx="A"][data-preset="summer-vibes"] .sh-card::before, [data-hover-fx="A"][data-preset="new-year-spark"] .sh-card::before, [data-hover-fx="A"][data-preset="royal-gold"] .mx-card::before, [data-hover-fx="A"][data-preset="saison-ete"] .mx-card::before, [data-hover-fx="A"][data-preset="summer-vibes"] .mx-card::before, [data-hover-fx="A"][data-preset="new-year-spark"] .mx-card::before { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:linear-gradient(135deg,transparent 30%,rgba(234,179,8,.07) 50%,transparent 70%); transform:translateX(-100%);transition:none; } [data-hover-fx="A"][data-preset="royal-gold"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="saison-ete"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="summer-vibes"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="new-year-spark"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="royal-gold"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="saison-ete"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="summer-vibes"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="new-year-spark"] .mx-card:hover::before { transform:translateX(100%);transition:transform .6s ease; } [data-hover-fx="A"][data-preset="royal-gold"] .sh-card:hover, [data-hover-fx="A"][data-preset="saison-ete"] .sh-card:hover, [data-hover-fx="A"][data-preset="summer-vibes"] .sh-card:hover, [data-hover-fx="A"][data-preset="new-year-spark"] .sh-card:hover, [data-hover-fx="A"][data-preset="royal-gold"] .mx-card:hover, [data-hover-fx="A"][data-preset="saison-ete"] .mx-card:hover, [data-hover-fx="A"][data-preset="summer-vibes"] .mx-card:hover, [data-hover-fx="A"][data-preset="new-year-spark"] .mx-card:hover { border-color:rgba(234,179,8,.48)!important; box-shadow:0 0 44px rgba(234,179,8,.16),inset 0 0 22px rgba(234,179,8,.05)!important; } /* ───────────────────────────────────────────────────────── BLACK FRIDAY — Éclat intense ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="black-friday"] .sh-card:hover, [data-hover-fx="A"][data-preset="black-friday"] .mx-card:hover { border-color:rgba(250,204,21,.55)!important; box-shadow:0 0 52px rgba(250,204,21,.18),0 0 80px rgba(250,204,21,.07)!important; animation:evBfFlash .32s ease forwards; } @keyframes evBfFlash{0%{filter:brightness(1)}50%{filter:brightness(1.06)}100%{filter:brightness(1)}} /* ───────────────────────────────────────────────────────── VANTA / CARBON-WHITE — Radiance spectrale curseur ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="vanta"] .sh-card::before, [data-hover-fx="A"][data-preset="carbon-white"] .sh-card::before, [data-hover-fx="A"][data-preset="vanta"] .mx-card::before, [data-hover-fx="A"][data-preset="carbon-white"] .mx-card::before { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:radial-gradient(circle at var(--ev-mx,50%) var(--ev-my,50%),rgba(255,255,255,.05),transparent 50%); opacity:0;transition:opacity .3s; } [data-hover-fx="A"][data-preset="vanta"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="carbon-white"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="vanta"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="carbon-white"] .mx-card:hover::before { opacity:1; } [data-hover-fx="A"][data-preset="vanta"] .sh-card:hover, [data-hover-fx="A"][data-preset="carbon-white"] .sh-card:hover, [data-hover-fx="A"][data-preset="vanta"] .mx-card:hover, [data-hover-fx="A"][data-preset="carbon-white"] .mx-card:hover { border-color:rgba(255,255,255,.2)!important; box-shadow:0 0 36px rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.1)!important; } /* ───────────────────────────────────────────────────────── MERCURY — Onde liquide ondulante ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="mercury-liquid"] .sh-card::after, [data-hover-fx="A"][data-preset="mercury-liquid"] .mx-card::after { content:'';position:absolute;top:40%;left:5%;right:5%;height:1px; background:linear-gradient(90deg,transparent,rgba(200,216,240,.55),transparent); filter:blur(1px);transform:scaleX(0);transition:.5s ease;pointer-events:none;z-index:3; } [data-hover-fx="A"][data-preset="mercury-liquid"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="mercury-liquid"] .mx-card:hover::after { transform:scaleX(1);animation:evMercuryWave 2s ease-in-out infinite; } @keyframes evMercuryWave {0%,100%{transform:scaleX(.8)}50%{transform:scaleX(1)}} [data-hover-fx="A"][data-preset="mercury-liquid"] .sh-card:hover, [data-hover-fx="A"][data-preset="mercury-liquid"] .mx-card:hover { border-color:rgba(180,195,220,.38)!important; box-shadow:0 0 32px rgba(180,195,220,.12)!important; } /* ───────────────────────────────────────────────────────── INK STORM — Kanji 書 émergent ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="ink-storm"] .sh-card::after, [data-hover-fx="A"][data-preset="ink-storm"] .mx-card::after { content:'書';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%) scale(0);font-size:60px;font-family:serif; color:rgba(15,10,5,.09);transition:.36s cubic-bezier(.34,1.5,.64,1);pointer-events:none;z-index:3; } [data-hover-fx="A"][data-preset="ink-storm"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="ink-storm"] .mx-card:hover::after { transform:translate(-50%,-50%) scale(1); } [data-hover-fx="A"][data-preset="ink-storm"] .sh-card:hover, [data-hover-fx="A"][data-preset="ink-storm"] .mx-card:hover { border-color:rgba(212,160,64,.38)!important; box-shadow:2px 8px 28px rgba(15,10,5,.16)!important; } /* ───────────────────────────────────────────────────────── PRISM BREAK / EMERALD — Rayon prisme ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="prism-break"] .sh-card::before, [data-hover-fx="A"][data-preset="emerald-raid"] .sh-card::before, [data-hover-fx="A"][data-preset="prism-break"] .mx-card::before, [data-hover-fx="A"][data-preset="emerald-raid"] .mx-card::before { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:linear-gradient(135deg,rgba(255,0,0,.03),rgba(255,100,0,.03),rgba(255,220,0,.03),rgba(0,200,0,.03),rgba(0,100,255,.03),rgba(150,0,220,.03)); opacity:0;transition:opacity .3s; } [data-hover-fx="A"][data-preset="prism-break"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="emerald-raid"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="prism-break"] .mx-card:hover::before, [data-hover-fx="A"][data-preset="emerald-raid"] .mx-card:hover::before { opacity:1; } [data-hover-fx="A"][data-preset="prism-break"] .sh-card:hover, [data-hover-fx="A"][data-preset="emerald-raid"] .sh-card:hover, [data-hover-fx="A"][data-preset="prism-break"] .mx-card:hover, [data-hover-fx="A"][data-preset="emerald-raid"] .mx-card:hover { box-shadow:0 0 44px rgba(168,85,247,.14)!important; } /* ───────────────────────────────────────────────────────── NOËL FROST — Glow vert/rouge/or cyclique ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="christmas-frost"] .sh-card:hover, [data-hover-fx="A"][data-preset="christmas-frost"] .mx-card:hover { border-color:rgba(220,38,38,.38)!important; animation:evXmasGlow 1.5s ease-in-out infinite; } @keyframes evXmasGlow { 0%,100%{box-shadow:0 0 32px rgba(220,38,38,.12)} 33%{box-shadow:0 0 32px rgba(239,68,68,.18)} 66%{box-shadow:0 0 32px rgba(34,197,94,.14)} } /* ───────────────────────────────────────────────────────── HALLOWEEN — 👻 apparition au centre ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="halloween-night"] .sh-card::before, [data-hover-fx="A"][data-preset="halloween-night"] .mx-card::before { content:'👻';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%) scale(0);font-size:40px;opacity:0; transition:.3s cubic-bezier(.34,1.6,.64,1);pointer-events:none;z-index:4; } [data-hover-fx="A"][data-preset="halloween-night"] .sh-card:hover::before, [data-hover-fx="A"][data-preset="halloween-night"] .mx-card:hover::before { transform:translate(-50%,-50%) scale(1.2);opacity:1; } [data-hover-fx="A"][data-preset="halloween-night"] .sh-card:hover, [data-hover-fx="A"][data-preset="halloween-night"] .mx-card:hover { border-color:rgba(249,115,22,.4)!important; box-shadow:0 0 44px rgba(249,115,22,.16)!important; } /* ───────────────────────────────────────────────────────── VALENTIN — ♥ expansif flottant ───────────────────────────────────────────────────────── */ [data-hover-fx="A"][data-preset="valentine-love"] .sh-card::after, [data-hover-fx="A"][data-preset="valentine-love"] .mx-card::after { content:'♥';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%) scale(0);font-size:52px;color:rgba(236,72,153,.25); transition:.36s cubic-bezier(.34,1.5,.64,1);pointer-events:none;z-index:3; } [data-hover-fx="A"][data-preset="valentine-love"] .sh-card:hover::after, [data-hover-fx="A"][data-preset="valentine-love"] .mx-card:hover::after { transform:translate(-50%,-50%) scale(1.5); animation:evHeartFloat .85s ease-in-out infinite alternate; } @keyframes evHeartFloat {to{transform:translate(-50%,-62%) scale(1.65)}} [data-hover-fx="A"][data-preset="valentine-love"] .sh-card:hover, [data-hover-fx="A"][data-preset="valentine-love"] .mx-card:hover { border-color:rgba(236,72,153,.42)!important; box-shadow:0 0 40px rgba(236,72,153,.14)!important; } /* ───────────────────────────────────────────────────────── CURSEURS CUSTOM ───────────────────────────────────────────────────────── */ .ev-custom-cursor { position:fixed;pointer-events:none;z-index:99999; transform:translate(-50%,-50%);font-size:22px;line-height:1; display:none;mix-blend-mode:normal;user-select:none; } /* ── Curseur custom : masque le curseur natif sur la card ET tous ses enfants ── */ .ev-cursor-active, .ev-cursor-active *, .ev-cursor-active a, .ev-cursor-active button, .ev-cursor-active img, .ev-cursor-active [role="button"] { cursor: none !important; } /* ══ PREVIEW BACKEND — ring flash quand FX change ══ */ @keyframes evFxSwitch { 0% { box-shadow: 0 0 0 0 rgba(255,140,0,.6), inset 0 0 0 0 rgba(255,140,0,0); } 30% { box-shadow: 0 0 0 12px rgba(255,140,0,.3), inset 0 0 30px rgba(255,140,0,.06); } 100% { box-shadow: 0 0 0 0 rgba(255,140,0,0), inset 0 0 0 0 rgba(255,140,0,0); } } .ev-shop.ev-fx-switch-anim { animation: evFxSwitch .55s ease-out forwards; }