:root{--nuit:#09060f;--sang:#c1121f;--brume:#cfc4e6;--os:#efe6d2;--citrouille:#ff7a1a}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#2a0d33 0,var(--nuit) 60%) fixed;color:var(--os);font:500 1.15rem/1.6 'Cormorant Garamond',serif;min-height:100vh;overflow-x:hidden}
a{color:inherit}img{max-width:100%;height:auto;display:block;margin-bottom:12px}
h1,h2,h3,.logo,.btn{font-family:'Creepster',cursive;font-weight:400;letter-spacing:.06em;margin:0}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px;position:relative;z-index:2}
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 0}
.logo{font-size:2rem;color:var(--citrouille);text-decoration:none;animation:flick 6s infinite}
nav a{margin-left:18px;text-decoration:none}
nav a:hover{color:var(--sang);text-shadow:0 0 12px var(--sang)}
.drip{height:28px;position:relative;z-index:2;background:radial-gradient(circle at 12px 0,var(--sang) 13px,transparent 14px) 0 0/44px 28px repeat-x,radial-gradient(circle at 34px 0,#7d0c14 9px,transparent 10px) 0 0/44px 20px repeat-x;animation:dripdown 5s ease-in-out infinite alternate}
@keyframes dripdown{from{height:12px}to{height:30px}}
.fog{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.fog::before,.fog::after{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 30% at 30% 70%,rgba(207,196,230,.12),transparent),radial-gradient(35% 25% at 72% 45%,rgba(207,196,230,.09),transparent);animation:drift 32s linear infinite alternate}
.fog::after{animation-duration:48s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:50}
.flash.on{animation:zap .6s}
@keyframes zap{0%{opacity:0}10%{opacity:.35}20%{opacity:0}35%{opacity:.2}100%{opacity:0}}
.bat{position:fixed;top:var(--y);left:-60px;font-size:28px;z-index:3;pointer-events:none;animation:fly var(--d) linear forwards}
@keyframes fly{to{transform:translate(calc(100vw + 120px),var(--dy))}}
.eyes{position:fixed;width:34px;height:8px;z-index:3;pointer-events:none;opacity:0;animation:blink 9s infinite}
.eyes::before,.eyes::after{content:"";position:absolute;top:0;width:10px;height:6px;border-radius:50%;background:var(--sang);box-shadow:0 0 8px 2px var(--sang)}
.eyes::before{left:0}.eyes::after{right:0}
@keyframes blink{0%,60%,100%{opacity:0}65%,80%{opacity:1}72%{opacity:.1}}
@keyframes flick{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.35}21%{opacity:.8}}
.hero{text-align:center;padding:90px 20px 60px}
.hero h1{font-size:clamp(3rem,11vw,7rem);color:var(--citrouille);text-shadow:0 0 20px #ff5a00,0 0 60px #7a1a00;animation:flick 5s infinite}
.hero p{color:var(--brume);font-style:italic;max-width:34ch;margin:16px auto 28px;font-size:1.3rem}
.btn{display:inline-block;background:var(--sang);color:#fff;border:0;padding:14px 30px;font-size:1.4rem;text-decoration:none;cursor:pointer}
.btn:hover{animation:pulse .8s infinite}.btn[disabled]{opacity:.5;cursor:not-allowed}
@keyframes pulse{50%{box-shadow:0 0 28px 6px rgba(193,18,31,.7)}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin:30px 0 70px}
.card{display:block;text-decoration:none;text-align:center;border:1px solid #3a2148;background:rgba(20,10,28,.75);padding:26px;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{border-color:var(--sang);transform:translateY(-6px) rotate(-1deg);box-shadow:0 10px 40px rgba(193,18,31,.35)}
.glyph{display:block;font-size:3.2rem;animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.card h3{font-size:1.7rem;margin-top:8px}.card p{color:var(--brume);margin:6px 0 0}
.price{color:var(--citrouille)}.price.big{font-size:1.8rem}
.page-title{font-size:clamp(2.4rem,7vw,4rem);color:var(--citrouille);text-align:center;margin:44px 0 12px;text-shadow:0 0 18px #7a1a00}
.left{text-align:left}.center{text-align:center}
.lead{text-align:center;color:var(--brume);font-style:italic;max-width:62ch;margin:0 auto 20px}.lead.left{margin:0 0 20px}
.empty{text-align:center;color:var(--brume);font-style:italic;padding:50px 0}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:20px}
@media(max-width:760px){.pdp{grid-template-columns:1fr}nav a{margin:0 14px 0 0}}
select,input{background:#150b1e;color:var(--os);border:1px solid #3a2148;padding:10px;font:inherit;margin:0 8px 12px 0}
.qty{width:80px}
.cart-row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid #2a1734;padding:14px 0}
.total{font-size:1.4rem;margin:20px 0}
footer{position:relative;z-index:2;border-top:1px solid #2a1734;padding:30px 0;text-align:center;color:var(--brume);font-size:1rem}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--citrouille);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.eyes{opacity:.8}}

.announce{position:relative;z-index:2;background:var(--sang);color:#fff;text-align:center;padding:6px 12px;font-size:1rem}
.cart-btn{position:relative;text-decoration:none;font-size:1.6rem;margin-left:18px;line-height:1}
.cart-count{position:absolute;top:-8px;right:-12px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--sang);color:#fff;font:700 .8rem/20px 'Cormorant Garamond',serif;text-align:center}
.cart-btn.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.3) rotate(-8deg)}}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);opacity:0;pointer-events:none;transition:opacity .3s;z-index:60}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:#0d0815;border-left:1px solid var(--sang);box-shadow:-10px 0 50px rgba(193,18,31,.35);transform:translateX(100%);transition:transform .35s;z-index:61;display:flex;flex-direction:column}
body.cart-open .overlay{opacity:1;pointer-events:auto}
body.cart-open .drawer{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #2a1734}
.drawer-head h2{font-size:1.8rem;color:var(--citrouille)}
.drawer-close{background:none;border:0;color:var(--os);font-size:1.4rem;cursor:pointer}
.ship{padding:14px 20px;border-bottom:1px solid #2a1734}.ship p{margin:0 0 8px;font-size:1rem}
.track{height:10px;background:#221030;border-radius:6px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--sang),var(--citrouille));transition:width .6s}
.fill.done{animation:pulse 1.2s infinite}
.drawer-items{flex:1;overflow-y:auto;padding:6px 20px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #2a1734}
.line.noimg{grid-template-columns:1fr auto}
.line img{width:64px;height:64px;object-fit:cover;margin:0;border:1px solid #3a2148}
.line .t{line-height:1.2}.line small{color:var(--brume)}
.qtybox{display:flex;align-items:center;gap:8px;margin-top:6px}
.qtybox button,.rm{background:#150b1e;border:1px solid #3a2148;color:var(--os);width:28px;height:28px;cursor:pointer}
.rm{border:0;background:none;color:var(--brume);width:auto;text-decoration:underline}
.drawer-foot{padding:16px 20px;border-top:1px solid #2a1734}
#promo-form{display:flex;gap:8px}#promo-form input{flex:1;margin:0}
.btn.small{font-size:1.1rem;padding:8px 16px}.btn.full{display:block;text-align:center;width:100%}
.promo-msg{min-height:1.4em;margin:6px 0;font-size:.95rem;color:var(--citrouille)}
.sub{display:flex;justify-content:space-between;font-size:1.3rem;margin:8px 0 14px}
.drawer.empty #cart-checkout{display:none}