/* ==========================================================================
   SMOKED — habillage Halloween spliff.fr (version allégée)
   Le site garde ses couleurs : on ajoute la barre, le hero, les CTA rouges,
   les badges et le bandeau Preroll Panic.
   Tout est scopé sous html.smk-on ou html.smk-live, posées ensemble depuis
   la v3.5.0 (plus de teaser, où smk-on seule ne montrait que la barre).
   v3.0.0 — plus d'@import Google Fonts : il transmettait l'IP du visiteur à
   Google sans consentement et bloquait le rendu. Syne est celle du thème
   (astra-child, auto-hébergée, 400 → 800) ; Gabriella est le fichier déjà
   servi par spliff-anniv. La barre (structure, hauteur) est en CSS critique
   dans le HTML (Spliff_Smoked::css_barre), ici seulement ses finitions.
   ========================================================================== */
@font-face{
  font-family:"Gabriella";
  src:url("assets/fonts/gabriella-heavy.woff2") format("woff2");
  font-weight:400 900;
  font-display:swap;
}

html.smk-on{
  --smk-red:#e8202f;
  --smk-red-dark:#b8101d;
  --smk-ink:#1b1b1b;          /* noir du site */
  --smk-navy:#0a1330;
  --smk-paper:#f9f9f9;        /* blanc du site */
  --smk-title:"Gabriella",Georgia,serif;
  --smk-ui:"Syne",system-ui,sans-serif;
}

/* ---------- Barre rouge : finitions (structure et hauteur : CSS critique dans le HTML) ---------- */
@media (hover:hover){html.smk-on .smk-bar__main:hover{opacity:.88}}
html.smk-on .smk-bar__main:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* v3.12.2 — « HALLOWEEN » en capitales dans la barre (Julien, 29/10), comme l'était « SMOKED » */
html.smk-on .smk-bar__brand{font:400 19px/1 var(--smk-title);letter-spacing:.02em;text-transform:uppercase}
html.smk-on .smk-bar__dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
html.smk-on .smk-bar__clock b{font-weight:800}
html.smk-on .smk-bar__clock i{font-style:normal;font-weight:600;opacity:.8;margin-right:5px}
@media (max-width:600px){
  html.smk-on .smk-bar__brand{font-size:14px}
  html.smk-on .smk-bar__clock i{margin-right:3px}
  html.smk-on .smk-bar__lbl,html.smk-on .smk-bar__dot{display:none}
}
/* v3.10.0 — jusqu'à 900 px la barre alterne message et compte à rebours (CSS critique du PHP) : chaque moitié arrive en fondu */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  html.smk-on .smk-bar__main > *{animation:smk-bar-in .35s ease both}
}
@keyframes smk-bar-in{from{opacity:0}}
/* le message a toute la ligne pour lui : « SUR TOUT » grossit avec « -20% » (demande de Julien du 29/10, « -20% sur TOUT ») */
@media (max-width:600px){html.smk-on .smk-bar__msg--court{font-size:12.5px}}
@media (max-width:340px){html.smk-on .smk-bar__msg--court{font-size:11.5px}}
/* v3.8.0 — « -20% » agrandi (CSS critique du PHP) : sur 320 px, la barre se resserre pour tenir sans être coupée */
@media (max-width:340px){
  html.smk-on .smk-bar__brand{font-size:12.5px}
  html.smk-on .smk-bar__clock i{margin-right:2px}
}

/* ---------- Hero : même format que les bannières du site ----------
   desktop 1920×550, tablette/mobile 721×625 (mêmes points de rupture qu'Elementor) */
html.smk-live .smk-hero-host > :not(.smk-hero){display:none !important}
/* v3.9.0 — plus de carrousel masqué en attendant le JS : le hero de l'opé est inséré en tête du carrousel
   par Campaign OS, l'habillage ne le remplace plus (`hero` à false dans la configuration du PHP) */
html.smk-on .smk-hero{
  position:relative;overflow:hidden;width:100%;aspect-ratio:1920/550;max-width:100%;
  container-type:inline-size;background:#0b0f1d;color:#fff;isolation:isolate;
}
/* le visuel SMOKED (texte, promo et bouton « J'ose entrer » sont dans l'image) ; toute la bannière mène à la boutique */
html.smk-on .smk-hero__pic,html.smk-on .smk-hero__img{display:block;width:100%;height:100%}
html.smk-on .smk-hero__img{object-fit:cover;opacity:0;transition:opacity .8s ease-out}
html.smk-on .smk-hero.is-in .smk-hero__img{opacity:1}
html.smk-on .smk-hero__link{position:absolute;inset:0;z-index:3;border-radius:inherit}
html.smk-on .smk-hero__link:focus-visible{outline:3px solid #fff;outline-offset:-6px}
/* le bouton dessiné dans le visuel s'allume en néon rouge au survol / focus */
html.smk-on .smk-hero__hot{position:absolute;z-index:2;left:42.3%;top:80%;width:15.5%;height:10%;border-radius:999px;pointer-events:none;transition:box-shadow .25s}
html.smk-on .smk-hero:hover .smk-hero__hot,html.smk-on .smk-hero__link:focus-visible ~ .smk-hero__hot{box-shadow:var(--smk-neon-hover)}
/* éclair : le visuel s'illumine un instant */
html.smk-on .smk-hero.is-flash .smk-hero__img{animation:smk-hero-flash 1.1s ease-out 1}
@keyframes smk-hero-flash{0%,100%{filter:none}6%{filter:brightness(1.45) saturate(.75)}35%{filter:none}}

@media (max-width:1024px){
  html.smk-on .smk-hero{aspect-ratio:721/625}
  html.smk-on .smk-hero__hot{left:34.4%;top:87.2%;width:31.1%;height:5.4%}
}
@media (prefers-reduced-motion:reduce){html.smk-on .smk-hero__img{transition:none}html.smk-on .smk-hero.is-flash .smk-hero__img{animation:none}}

/* ---------- CTA rouges (même forme que les boutons du site) ---------- */
html.smk-on .spliff-qa-btn,
html.smk-on .spliff-products-List__button-show-all,
html.smk-on .single_add_to_cart_button,
html.smk-on .checkout-button,
html.smk-on #place_order,
html.smk-on .sqa-cta,
html.smk-on .scw-cta,
html.smk-on .smk-red{background-color:var(--smk-red) !important;border-color:var(--smk-red) !important;color:#fff !important;transition:background-color .2s}
/* v3.8.0 — survols réservés aux appareils qui survolent : sur un téléphone, le :hover reste collé après le toucher, et le bouton
   touché restait rouge foncé (#b8101d) à côté des autres (« parfois pas le même rouge », Julien, 28/10). Même règle plus bas */
@media (hover:hover){
html.smk-on .spliff-qa-btn:hover,
html.smk-on .spliff-products-List__button-show-all:hover,
html.smk-on .single_add_to_cart_button:hover,
html.smk-on .checkout-button:hover,
html.smk-on #place_order:hover,
html.smk-on .sqa-cta:hover,
html.smk-on .scw-cta:hover,
html.smk-on .smk-red:hover{background-color:var(--smk-red-dark) !important;border-color:var(--smk-red-dark) !important}
}

/* ---------- Badges -20% ---------- */
html.smk-on .smk-tag-off{display:inline-block;padding:5px 8px;border-radius:4px;background:var(--smk-red);color:#fff;font:700 11px/1 var(--smk-ui);letter-spacing:.04em}

/* ---------- Glitch sur les visuels produits (0,9 s) : datamosh rouge ----------
   le produit en rouge sur noir, découpé en bandes qui sautent, coulures de pixels, éclats de neige
   (calques posés sur la photo le temps de l'effet, puis retirés) */
html.smk-on .smk-gx{position:absolute;z-index:4;pointer-events:none;overflow:hidden}
html.smk-on .smk-gx > i{position:absolute;inset:0;display:block}
html.smk-on .smk-gx__mosh{background:var(--gx-img) center/var(--gx-size) no-repeat #000;filter:grayscale(1) invert(1) contrast(2.8);opacity:0;animation:smk-gx-mosh .9s steps(1) forwards}
@keyframes smk-gx-mosh{0%{opacity:1}92%{opacity:1}93%,100%{opacity:0}}
/* le rouge exact : un calque rouge en « produit » (le blanc devient rouge, le noir reste noir) */
html.smk-on .smk-gx__tint{background:#e8202f;mix-blend-mode:multiply;opacity:0;animation:smk-gx-mosh .9s steps(1) forwards}
html.smk-on .smk-gx__slice{animation:smk-gx-slice .9s steps(1) forwards}
@keyframes smk-gx-slice{0%{opacity:1;transform:translateX(var(--dx))}14%{transform:translateX(calc(var(--dx) * -.7))}28%{transform:translateX(calc(var(--dx) * .4))}42%{transform:translateX(calc(var(--dx) * -1.2))}56%{transform:translateX(calc(var(--dx) * .25))}70%{transform:none}92%{opacity:1}93%,100%{opacity:0;transform:none}}
html.smk-on .smk-gx > .smk-gx__drip{inset:auto;background:linear-gradient(180deg,#ff2a3d,rgba(200,16,29,.6) 70%,transparent);transform-origin:50% 0;transform:scaleY(0);opacity:0;animation:smk-gx-drip .9s ease-in forwards}
@keyframes smk-gx-drip{0%,6%{opacity:0;transform:scaleY(0)}8%{opacity:1}80%{opacity:1;transform:scaleY(1)}92%,100%{opacity:0;transform:scaleY(1)}}
html.smk-on .smk-gx > .smk-gx__block{inset:auto;background:#fff;mix-blend-mode:screen;opacity:0;animation:smk-gx-block .9s steps(1) forwards}
@keyframes smk-gx-block{0%,12%{opacity:0}13%{opacity:.95}20%{opacity:0}38%{opacity:.8;transform:translateX(12px)}44%,100%{opacity:0}}

/* ---------- Bandeau Preroll Panic ---------- */
html.smk-on .smk-game{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;
  margin:28px auto;max-width:1200px;box-sizing:border-box;padding:22px 28px;border-radius:16px;background:var(--smk-navy);color:#fff}
html.smk-on .smk-game__bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center 62%;opacity:.35}
html.smk-on .smk-game__art{position:relative;width:170px;height:90px;flex:none}
html.smk-on .smk-game__art img{position:absolute}
html.smk-on .smk-game__art .g{right:0;bottom:-22px;height:118px}
html.smk-on .smk-game__art .t{left:0;bottom:12px;width:86px;animation:smk-flee 2.6s ease-in-out infinite}
html.smk-on .smk-game h3{margin:0 0 6px;font:800 24px/1.05 var(--smk-ui);text-transform:uppercase;color:#fff}
html.smk-on .smk-game p{margin:0;font:500 15px/1.45 var(--smk-ui);color:rgba(255,255,255,.85);max-width:56ch}
html.smk-on .smk-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--smk-red);color:#fff !important;text-decoration:none;
  font:600 14px/1 var(--smk-ui);text-transform:uppercase;white-space:nowrap;transition:background .2s}
@media (hover:hover){html.smk-on .smk-pill:hover{background:var(--smk-red-dark)}}
html.smk-on .smk-pill svg{width:26px;height:auto}
@media (max-width:1024px){
  html.smk-on .smk-game{grid-template-columns:1fr;gap:12px;padding:20px 18px;margin:20px 16px}
  html.smk-on .smk-game__art{width:150px;height:72px}
  html.smk-on .smk-game__art .g{height:96px}
  html.smk-on .smk-game h3{font-size:20px}
  html.smk-on .smk-pill{justify-self:start}
}


html.smk-on .smk-pill:focus-visible,html.smk-on .smk-hero__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- Bouton son ---------- */
  display:grid;place-items:center;background:var(--smk-ink);color:#fff;opacity:.9}

[data-smk-node][hidden],[data-smk-node] [hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  html.smk-on .smk-game__art .t{animation:none}
  html.smk-on .spliff-products-List__item:hover .spliff-products-List__thumbnail img{animation:none}
}

/* ==========================================================================
   v1.2 — néon sur les CTA, éclairs, clic « Ajouter », enseigne néon du jeu
   ========================================================================== */
/* v3.8.0 — le filet du néon est du rouge de la charte, et non plus un rose clair (rgba(255,70,85,.35)) : sur fond blanc, ce filet
   rose pâle bordait chaque CTA, pastille et étiquette, et leur rouge paraissait plus fade que celui de la barre, qui n'en a pas */
html.smk-on{--smk-neon:0 0 0 1px var(--smk-red),0 0 10px rgba(232,32,47,.45),0 0 22px rgba(232,32,47,.22)}
html.smk-on{--smk-neon-hover:0 0 0 1px var(--smk-red),0 0 14px rgba(255,43,63,.7),0 0 34px rgba(232,32,47,.4)}

/* néon léger sur tous les CTA rouges (pas d'ombre portée) */
html.smk-on .spliff-qa-btn,
html.smk-on .spliff-products-List__button-show-all,
html.smk-on .single_add_to_cart_button,
html.smk-on .checkout-button,
html.smk-on #place_order,
html.smk-on .sqa-cta,
html.smk-on .scw-cta,
html.smk-on .smk-red,
html.smk-on .smk-pill,
html.smk-on .smk-hero__cta{box-shadow:var(--smk-neon) !important;transition:background-color .2s,box-shadow .25s}
@media (hover:hover){
html.smk-on .spliff-qa-btn:hover,
html.smk-on .spliff-products-List__button-show-all:hover,
html.smk-on .single_add_to_cart_button:hover,
html.smk-on .checkout-button:hover,
html.smk-on #place_order:hover,
html.smk-on .sqa-cta:hover,
html.smk-on .scw-cta:hover,
html.smk-on .smk-red:hover,
html.smk-on .smk-pill:hover,
html.smk-on .smk-hero__cta:hover{box-shadow:var(--smk-neon-hover) !important;animation:smk-neon-buzz .5s steps(1) 1}
}
@keyframes smk-neon-buzz{0%{filter:brightness(1)}20%{filter:brightness(.75)}35%{filter:brightness(1.15)}55%{filter:brightness(.85)}70%,100%{filter:brightness(1)}}

/* ---------- Ajout au panier : le bouton part en fumée, le produit file au panier et y explose ---------- */
/* au clic : la transition Scream. Le sang monte comme dans le bouton (flaque qui roule, gouttes qui tombent du haut), puis le masque surgit au premier plan */
/* le sang est dessiné en basse résolution puis agrandi (transform en ligne) */
/* le masque : net, devant le sang, avec une ombre portée ; il bondit depuis sa bouche */
/* le sang sur le masque, découpé à sa forme : une nappe liquide sur le crâne et des coulures brillantes qui descendent */
/* avant le clic : le sang coule du haut vers le bas du bouton (révélé de haut en bas, il tient, s'efface, puis recoule) */
html.smk-on .smk-cta-drip{position:relative;isolation:isolate}
/* le texte reste blanc et lisible par-dessus le sang (léger ombrage) */
html.smk-on .smk-cta-drip{color:#fff !important;text-shadow:0 1px 2px rgba(40,0,4,.55)}
/* le mot « Ajouter » en gras (Syne ExtraBold) */
html.smk-on .smk-cta-drip.smk-cta-drip{font-weight:800 !important;letter-spacing:.02em}
/* tiroir panier : la barre de progression des paliers passe en rouge (au lieu du dégradé vert-bleu).
   v3.8.0 — un seul rouge, celui de la charte : le dégradé partait du rouge foncé (#b8101d), terne à gauche */
html.smk-on #scwDrawer #scwProgressFill,html.smk-on .scw-drawer .scw-progress-fill{background:var(--smk-red) !important}
/* cercles des paliers (les emojis ne changent pas), tous en rose pâle cerclé de rouge : atteint (ou cadeau choisi) = filet rouge plein + coche rouge,
   suivant = filet rouge qui pulse en rouge, à venir = filet rouge clair */
html.smk-on .scw-drawer :is(.scw-progress-badge.reached,.scw-progress-badge.chosen){background-color:#fdecee !important;border-color:var(--smk-red) !important;box-shadow:0 2px 8px rgba(232,32,47,.25) !important}
html.smk-on .scw-drawer :is(.scw-progress-badge.reached,.scw-progress-badge.chosen)::after{background-color:var(--smk-red) !important}
/* palier atteint : son étiquette (« Premier Cadeau ») passe du vert au rouge */
html.smk-on .scw-drawer :is(.scw-milestone.reached,.scw-milestone.chosen) .scw-milestone-label{color:var(--smk-red) !important;border-color:var(--smk-red) !important}
html.smk-on .scw-drawer .scw-progress-badge.pending{background-color:#fdecee !important;border-color:rgba(232,32,47,.35) !important}
html.smk-on .scw-drawer .scw-progress-badge.next{background-color:#fdecee !important;border-color:var(--smk-red) !important;animation:smk-badge-pulse 1.8s ease-in-out infinite !important}
@keyframes smk-badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,32,47,.45)}50%{box-shadow:0 0 0 7px rgba(232,32,47,0)}}
@media (prefers-reduced-motion:reduce){html.smk-on .scw-drawer .scw-progress-badge.next{animation:none !important}}
/* bouton noir sans contour rouge : ni halo néon, ni bordure, ni fond rouge qui dépasse aux coins (au survol non plus) */
html.smk-on .smk-cta-drip.smk-cta-drip,
html.smk-on .smk-cta-drip.smk-cta-drip:hover,
html.smk-on .smk-cta-drip.smk-cta-drip:focus{box-shadow:none !important;border-color:#0b0b0d !important;background-color:#0b0b0d !important;background-image:none !important}
/* calques derrière le texte, rognés aux coins du bouton */
html.smk-on .smk-cta-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit}
html.smk-on .smk-cta-fx__surf{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#0b0b0d}
/* la vague de sang liquide : elle roule de droite à gauche dans le bas du bouton (la vague du fond, plus sombre, plus lentement) */
html.smk-on .smk-cta-rib{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
html.smk-on .smk-cta-rib__flow{animation:smk-rib-flow 3.4s linear infinite;animation-delay:var(--smk-cd,0s)}
html.smk-on .smk-cta-rib__back{animation:smk-rib-flow 5.6s linear infinite;animation-delay:var(--smk-cd,0s)}
@keyframes smk-rib-flow{to{transform:translateX(-120px)}}
/* le niveau du sang monte et descend doucement, comme un liquide qui tangue */
html.smk-on .smk-cta-rib__breath{transform-box:view-box;transform-origin:50% 100%;animation:smk-rib-breath 3.8s ease-in-out infinite alternate;animation-delay:var(--smk-cd,0s)}
@keyframes smk-rib-breath{0%{transform:translateY(2px) scaleY(.94)}100%{transform:translateY(-3px) scaleY(1.06)}}
/* une goutte se forme sous le film du haut, s'étire, se détache et tombe dans la flaque (le filtre gluant les fait fusionner) */
html.smk-on .smk-cta-drop{transform-box:fill-box;transform-origin:50% 0;animation:smk-cta-drop 4.2s cubic-bezier(.55,0,.9,.5) infinite}
@keyframes smk-cta-drop{0%{transform:translateY(-2px) scale(.4,.3)}45%{transform:translateY(0) scale(.85,1.5)}62%{transform:translateY(3px) scale(.75,1.9)}66%{transform:translateY(6px) scale(.8,1.2)}84%{transform:translateY(30px) scale(.7,1.3)}86%,100%{transform:translateY(40px) scale(0)}}
/* seuls les boutons visibles s'animent */
html.smk-on .smk-cta-drip:not(.is-live) .smk-cta-rib *{animation-play-state:paused}
/* au survol (desktop) : le sang monte et s'agite */
@media (hover:hover){
  html.smk-on .smk-cta-drip:hover .smk-cta-rib__flow{animation-duration:1.6s}
  html.smk-on .smk-cta-drip:hover .smk-cta-rib__back{animation-duration:2.6s}
  html.smk-on .smk-cta-rib{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
  html.smk-on .smk-cta-drip:hover .smk-cta-rib{transform:translateY(-12%)}
}
/* « Choisissez votre goût / votre pack / un format » (bouton pas encore actif) : le même sang liquide, mais il remplit
   presque tout le bouton (seule la crête de la vague reste en haut) ; texte blanc à l'ombre renforcée, parfaitement lisible */
/* v3.1.0 — remonté de 50 % (et non plus 40 %) : la crête passe AU-DESSUS du texte au lieu de le barrer d'un reflet blanc,
   et la flaque, prolongée jusqu'en bas (smoked.js, wavePath), ne laisse plus de bande noire sous le sang (fiche produit,
   ajout rapide : boutons de deux lignes, retour de Julien du 23/10) */
/* v3.2.0 — moins haut (retour de Julien du 23/10 : « réduire la hauteur du sang », mobile comme desktop) : la flaque tient la
   moitié basse du bouton, au niveau des boutons « Ajouter » des listes (validés) ; toujours prolongée jusqu'en bas, donc sans bande noire */
html.smk-on :is(.smk-cta-drip:disabled,.smk-cta-drip.spc-btn--idle) .smk-cta-rib,
html.smk-on :is(.smk-cta-drip:disabled,.smk-cta-drip.spc-btn--idle):hover .smk-cta-rib{transform:translateY(-10%)}
html.smk-on .smk-cta-drip.smk-cta-drip:is(:disabled,.spc-btn--idle){opacity:1 !important;color:#fff !important;text-shadow:0 1px 2px rgba(15,0,2,.95),0 0 12px rgba(15,0,2,.6)}
html.smk-on .smk-cta-drip.spc-btn--idle *{color:#fff !important}
/* fiche produit et panneau d'ajout rapide : bouton « Ajouter » (après le choix du goût / du format) : le sang remplit le bouton,
   la vague court le long du bord haut ; texte blanc avec une ombre renforcée pour rester lisible sur le rouge */
/* v3.7.0 — fiche produit et panneau d'ajout rapide, « Choisissez… » comme « Ajouter » : le sang remonte à ~80 % du bouton, le
   niveau des maquettes (-40 %, -46 % au survol de « Ajouter »), avec la flaque de la v3.1.0 prolongée jusqu'en bas, donc sans
   bande noire (retour de Julien du 27/10 : « ta version 1 était la bonne »). Les boutons « Ajouter » des sliders et des pages
   catégories gardent leur niveau (règles plus haut) */
html.smk-on .smk-cta-drip.smk-cta-drip:is(.spc-btn,.single_add_to_cart_button,.sqa-cta) .smk-cta-rib,
html.smk-on .smk-cta-drip.smk-cta-drip:is(.spc-btn,.single_add_to_cart_button,.sqa-cta):is(:disabled,.spc-btn--idle):hover .smk-cta-rib{transform:translateY(-40%)}
html.smk-on .smk-cta-drip.smk-cta-drip:is(.spc-btn,.single_add_to_cart_button,.sqa-cta):not(:disabled):not(.spc-btn--idle):hover .smk-cta-rib{transform:translateY(-46%)}
html.smk-on .smk-cta-drip.smk-cta-drip:is(.spc-btn,.single_add_to_cart_button,.sqa-cta):not(:disabled):not(.spc-btn--idle){text-shadow:0 1px 2px rgba(15,0,2,.95),0 0 12px rgba(15,0,2,.6)}
html.smk-on .smk-cta-drip:is(.spc-btn,.single_add_to_cart_button,.sqa-cta) :is(.cashback-line,.cashback-amount,.atc-label,.final-price,.separator){color:#fff !important}
/* fiche produit sur mobile : le bouton est une barre fixée en bas d'écran (Kit Elementor, hors dépôt), dont le « bouton » visible
   est un ::before (pastille arrondie, filet blanc, reflet). v3.2.0 — plus de pastille encadrée dans la barre (« le bouton dans
   l'encart noir », retour du 23/10) : la barre entière est le bouton, le sang monte de son bord bas, et elle prend le noir PUR du
   bandeau « Tu économises » posé juste au-dessus (spliff-elementor-modules, #000) : un seul bloc noir, un seul noir */
@media (max-width:768px){
  html.smk-on button.single_add_to_cart_button.smk-cta-drip::before{display:none !important}
  html.smk-on button.single_add_to_cart_button.smk-cta-drip.smk-cta-drip{background-color:#000 !important;border-color:#000 !important;border-radius:0 !important}
  html.smk-on button.single_add_to_cart_button.smk-cta-drip .smk-cta-fx{inset:0;border-radius:0}
  html.smk-on button.single_add_to_cart_button.smk-cta-drip .smk-cta-fx__surf{background:#000}
}
@media (prefers-reduced-motion:reduce){html.smk-on .smk-cta-rib *{animation:none !important}}
/* le produit qui file au panier, la traînée de gouttes, l'impact */
html.smk-on .smk-flyprod{position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;border-radius:10px;background:#fff center/cover no-repeat;
  box-shadow:0 0 0 2px var(--smk-red),0 10px 30px rgba(0,0,0,.45);will-change:transform}
html.smk-on .smk-trail{position:fixed;z-index:2147483647;pointer-events:none;border-radius:0 50% 50% 50%;
  background:radial-gradient(circle at 62% 62%,#ff4a57,#d4141f 45%,#6d0710)}
/* v3.4.0 — l'impact dans le panier : une vraie éclaboussure (masse irrégulière, doigts projetés, gouttes satellites,
   reflet) au lieu d'une pile de ronds en radial-gradient (« juste des ronds rouges », Julien, 23/10) ; tournée au hasard
   à chaque ajout. Les gouttes qui en partent sont des gouttes en vol, orientées dans leur direction */
html.smk-on .smk-impact{position:fixed;z-index:2147483647;pointer-events:none;width:150px;height:150px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.44' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23d5131f'/%3E%3Cstop offset='.6' stop-color='%23a0000d'/%3E%3Cstop offset='1' stop-color='%235c0006'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23s)'%3E%3Cpath d='M140.9 100.0C141.5 101.1 138.6 102.1 139.4 103.4C140.2 104.8 144.9 106.7 145.8 108.1C146.6 109.5 145.4 110.8 144.3 111.9C143.2 112.9 140.9 113.6 139.3 114.3C137.6 115.0 136.5 115.8 134.5 116.1C132.5 116.3 129.3 115.8 127.3 115.8C125.3 115.7 123.4 115.3 122.5 115.8C121.7 116.2 122.8 118.1 122.0 118.5C121.3 118.9 118.8 117.7 118.1 118.1C117.3 118.5 117.8 119.9 117.5 120.9C117.3 121.8 117.1 123.0 116.6 123.7C116.1 124.4 115.0 124.2 114.4 125.0C113.9 125.8 114.1 128.1 113.4 128.8C112.8 129.5 111.4 128.7 110.6 129.0C109.7 129.4 109.2 130.9 108.2 130.8C107.3 130.6 105.9 128.4 104.9 128.0C104.0 127.6 103.3 128.3 102.5 128.4C101.7 128.5 100.9 127.9 100.0 128.4C99.1 128.9 98.2 130.7 97.2 131.5C96.3 132.4 95.2 132.7 94.1 133.4C93.0 134.0 92.4 133.2 90.5 135.4C88.7 137.6 87.2 140.2 83.0 146.7C78.8 153.2 69.3 170.3 65.3 174.5C61.2 178.7 57.3 177.8 58.4 172.0C59.5 166.3 69.2 147.1 72.0 140.0C74.9 132.8 75.0 131.7 75.6 129.1C76.1 126.6 75.6 125.9 75.4 124.6C75.3 123.3 74.8 122.4 74.7 121.3C74.5 120.1 75.6 118.3 74.7 117.7C73.9 117.1 70.4 118.2 69.5 117.6C68.6 117.0 70.1 115.1 69.4 114.3C68.6 113.5 65.5 113.6 65.1 112.7C64.7 111.8 67.1 109.9 66.9 108.9C66.8 107.8 64.3 107.3 64.2 106.3C64.2 105.3 65.2 103.9 66.9 102.9C68.7 101.8 74.2 100.9 74.8 100.0C75.4 99.1 75.9 99.1 70.5 97.4C65.1 95.7 42.6 90.8 42.6 89.9C42.6 89.0 65.8 92.2 70.6 92.1C75.5 92.1 71.4 90.5 71.8 89.7C72.1 88.9 72.7 88.3 72.8 87.3C72.9 86.4 73.1 85.6 72.4 84.1C71.7 82.5 69.2 79.8 68.6 78.0C67.9 76.3 67.8 74.4 68.5 73.6C69.2 72.7 71.5 73.1 72.8 72.8C74.2 72.6 75.5 72.6 76.6 72.1C77.6 71.6 78.4 71.1 79.1 70.1C79.7 69.1 79.6 66.8 80.4 66.1C81.3 65.4 82.8 65.7 84.1 66.0C85.4 66.2 87.2 67.9 88.2 67.6C89.3 67.4 89.6 65.3 90.5 64.6C91.4 63.9 92.5 63.7 93.5 63.3C94.6 63.0 95.6 63.2 96.7 62.5C97.8 61.7 98.9 58.2 100.0 58.6C101.1 59.0 101.8 64.9 103.1 64.7C104.3 64.6 104.6 64.4 107.5 57.7C110.3 50.9 119.2 23.5 120.3 24.2C121.4 24.9 112.7 59.0 113.9 61.8C115.1 64.6 127.4 38.9 127.5 41.0C127.6 43.1 116.8 68.3 114.8 74.4C112.8 80.5 115.2 76.9 115.6 77.7C116.0 78.6 116.0 79.6 117.1 79.6C118.2 79.7 119.9 78.8 122.0 78.0C124.1 77.2 123.7 78.2 129.9 74.9C136.1 71.6 158.1 57.9 159.5 58.3C160.9 58.8 141.7 74.0 138.4 77.8C135.1 81.7 133.8 82.2 139.8 81.4C145.8 80.6 174.0 71.7 174.4 72.9C174.8 74.1 149.5 85.1 142.4 88.6C135.4 92.2 133.3 93.0 132.2 94.3C131.2 95.7 134.6 95.9 136.1 96.8C137.6 97.8 140.4 98.9 140.9 100.0Z'/%3E%3C/g%3E%3Cg fill='%239a000c'%3E%3Cellipse cx='125.3' cy='5.7' rx='3.4' ry='1.7' transform='rotate(285 125.3 5.7)'/%3E%3Cellipse cx='137.5' cy='19.6' rx='2.6' ry='1.9' transform='rotate(295 137.5 19.6)'/%3E%3Cellipse cx='59.7' cy='169.8' rx='2.8' ry='2.0' transform='rotate(120 59.7 169.8)'/%3E%3Cellipse cx='167.2' cy='53.0' rx='2.4' ry='2.3' transform='rotate(325 167.2 53.0)'/%3E%3Cellipse cx='68.6' cy='167.3' rx='3.3' ry='2.0' transform='rotate(115 68.6 167.3)'/%3E%3Cellipse cx='24.1' cy='86.6' rx='3.9' ry='2.2' transform='rotate(190 24.1 86.6)'/%3E%3Cellipse cx='188.4' cy='67.8' rx='3.8' ry='1.8' transform='rotate(340 188.4 67.8)'/%3E%3Ccircle cx='144.7' cy='165.0' r='2.1'/%3E%3Ccircle cx='100.2' cy='154.5' r='2.0'/%3E%3Ccircle cx='150.9' cy='80.0' r='2.3'/%3E%3Ccircle cx='150.6' cy='53.8' r='1.5'/%3E%3Ccircle cx='139.2' cy='129.9' r='2.3'/%3E%3Ccircle cx='105.2' cy='171.8' r='1.2'/%3E%3Ccircle cx='130.5' cy='38.9' r='1.3'/%3E%3Ccircle cx='132.7' cy='164.7' r='0.9'/%3E%3Ccircle cx='109.1' cy='166.4' r='2.2'/%3E%3C/g%3E%3Cpath d='M80 78q10-10 24-8' stroke='%23ff8a92' stroke-opacity='.45' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='76' cy='86' r='2.4' fill='%23ffb0b6' fill-opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(60,0,4,.35))}
html.smk-on .smk-drop{position:fixed;z-index:2147483647;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='10' viewBox='0 0 30 10'%3E%3Cpath d='M0 5L21.5 .4A5 5 0 1 1 21.5 9.6Z' fill='%23a3000e'/%3E%3Ccircle cx='24' cy='3.6' r='1.1' fill='%23ff8a92' fill-opacity='.5'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html.smk-on .smk-stab{animation:smk-stab 1.1s ease-out}
html.smk-on .scw-el-count.smk-stab{background:var(--smk-red) !important;color:#fff !important}
@keyframes smk-stab{0%{transform:none}10%{transform:scale(1.35) rotate(-10deg)}22%{transform:scale(.9) rotate(8deg)}34%{transform:scale(1.12) rotate(-4deg)}50%,100%{transform:none}}
/* orage : la page s'assombrit le temps de l'éclair, qui zèbre le ciel, et le hero s'illumine.
   v3.1.0 — un voile sombre au lieu d'un flash clair : sur le fond blanc du site, l'éclair blanc-bleu se perdait (retour de
   Julien du 23/10). Une seule descente et une seule remontée, lentes (WCAG 2.3.1 : pas plus de 3 éclats par seconde) */
html.smk-on .smk-flash{position:fixed;inset:0;z-index:9590;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(10,14,34,.26),rgba(5,7,18,.34) 70%)}
html.smk-on .smk-flash.is-on{animation:smk-lightning 1.3s ease-in-out 1}
@keyframes smk-lightning{0%{opacity:0}12%{opacity:1}65%{opacity:1}100%{opacity:0}}
html.smk-on .smk-bolt{position:fixed;inset:0;z-index:9591;pointer-events:none}
html.smk-on .smk-bolt svg{display:block;width:100%;height:100%;overflow:visible}
html.smk-on .smk-bolt path{fill:none;stroke-linecap:round;stroke-linejoin:round}
html.smk-on .smk-bolt__glow{stroke:rgba(170,192,255,.7);stroke-width:12;filter:blur(6px)}
html.smk-on .smk-bolt__core{stroke:#f6f8ff;stroke-width:3;filter:drop-shadow(0 0 5px #d3ddff) drop-shadow(0 0 16px #7f98ff)}
html.smk-on .smk-bolt__core--thin{stroke-width:1.5;opacity:.85}

/* enseigne néon « Horror » du vidéoclub de Preroll Panic, dans le bandeau du jeu */
html.smk-on .smk-game{grid-template-columns:auto minmax(0,1fr) auto auto}
html.smk-on .smk-neon{font:400 60px/1 "Neonderthaw",cursive;color:#fff0f1;white-space:nowrap;padding:0 8px;
  text-shadow:0 0 2px #fff,0 0 6px #ff3448,0 0 14px #ff2b3f,0 0 28px #e8202f,0 0 48px rgba(232,32,47,.6);
  animation:smk-neon-flicker 7s infinite;transform:rotate(-4deg)}
@keyframes smk-neon-flicker{
  0%,17%,19%,21%,58%,60%,100%{opacity:1;text-shadow:0 0 2px #fff,0 0 6px #ff3448,0 0 14px #ff2b3f,0 0 28px #e8202f,0 0 48px rgba(232,32,47,.6)}
  18%,20%,59%{opacity:.35;text-shadow:none}}
@media (max-width:1024px){
  html.smk-on .smk-game{grid-template-columns:1fr}
  html.smk-on .smk-neon{position:absolute;top:10px;right:14px;font-size:40px}
}
@media (prefers-reduced-motion:reduce){html.smk-on .smk-neon{animation:none}}

/* v3.11.0 — « Jeu sur mobile » et un téléphone qui montre une partie (aperçu filmé de spliff-preroll) à la place du dessin :
   on comprend que c'est un jeu sur téléphone (retour de Julien, 29/10). Sans vidéo livrée, le bandeau garde son dessin. */
/* v3.12.1 — dans la charte : badge de l'habillage (Syne 600 11 px, 3 × 8 px, coins 4 px), rouge charte et blanc du site */
html.smk-on .smk-game__kicker{display:inline-block;margin:0 0 8px;padding:3px 8px;border-radius:4px;background:var(--smk-red);color:var(--smk-paper);font:600 11px/1.2 var(--smk-ui);letter-spacing:.08em;text-transform:uppercase}
html.smk-on .smk-tel{position:relative;display:block;width:118px;aspect-ratio:360/644;padding:5px;border-radius:22px;background:#050507;
  box-shadow:0 0 0 1.5px #3b3b42,0 0 0 3px #111,0 14px 30px rgba(0,0,0,.55),0 0 26px rgba(232,32,47,.28);transform:rotate(-4deg)}
html.smk-on .smk-tel video{display:block;width:100%;height:100%;object-fit:cover;border-radius:17px;background:#0b0910}
html.smk-on .smk-tel::before{content:"";position:absolute;z-index:1;top:10px;left:50%;width:32%;height:8px;transform:translateX(-50%);border-radius:99px;background:#000}
/* mobile et tablette : le téléphone à droite du texte et du bouton ; le néon « Horror » s'efface (il est dans le jeu) */
@media (max-width:1024px){
  html.smk-on .smk-game--tel{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt tel" "cta tel";align-items:center;column-gap:16px;row-gap:14px}
  html.smk-on .smk-game--tel > div:not(.smk-game__bg){grid-area:txt}
  html.smk-on .smk-game--tel .smk-pill{grid-area:cta}
  html.smk-on .smk-game--tel .smk-tel{grid-area:tel;width:100px;transform:rotate(3deg)}
  html.smk-on .smk-game--tel .smk-neon{display:none}
  html.smk-on .smk-game--tel p{font-size:14px}
}

/* ==========================================================================
   v1.3 — habillage du reste du site
   ========================================================================== */

/* accents bleus Spliff -> rouge SMOKED (pastilles, barres de progression, prix mis en avant) */
html.smk-on .smk-accent-bg{background-color:var(--smk-red) !important}
html.smk-on .smk-accent-fg{color:var(--smk-red) !important}
/* v3.12.3 — header et pied de page : le recoloriage JS (recolor) laisse le header tranquille, exprès (logo animé, menu),
   si bien que trois accents bleus y restaient (Julien, 29/10) : le badge « Best-seller » du menu (couleur en ligne, réglée
   dans Outils → Hot catégories), la pastille du nombre d'articles du panier (réglage Elementor du widget minicart, #5A8BFF)
   et le reflet qui passe sur « THCX » (variable --hot-shine-hi posée sur :root par le thème ; html.smk-on l'emporte sur
   :root). Les trois passent en rouge charte, header, menu mobile et pied de page confondus ; le badge « New » n'est pas touché. */
html.smk-on{--hot-shine-hi:var(--smk-red)}
html.smk-on .hot-badge--best-seller{background-color:var(--smk-red) !important;color:var(--smk-paper) !important}
html.smk-on .scw-el-count{background-color:var(--smk-red) !important;color:#fff !important}
/* le pied de page écrit son bleu en dur dans le dégradé du reflet (pied-de-page.css), il ne lit pas --hot-shine-hi */
html.smk-on .spliff-pied-produits .hot-shine-text{background-image:linear-gradient(90deg,#fff 18%,var(--smk-red) 25%,#fff 32%,#fff 68%,var(--smk-red) 75%,#fff 82%) !important}
/* étiquette noire des titres de collection (« Fleurs CBD ») -> rouge */
html.smk-on h1 span[style*="#1B1B1B"],
html.smk-on h1 span[style*="#1b1b1b"]{background-color:var(--smk-red) !important;box-shadow:var(--smk-neon)}

/* badges -20% sur les cartes WooCommerce et sur le visuel de la fiche produit */
/* badge -20 % des cartes produit : en haut à droite, même style que le badge « -40 % » du site (Syne 600 11 px, 3 × 8 px, coins 4 px) ;
   s'il y a déjà un « -40 % », il se range juste en dessous */
html.smk-on .smk-tag-off--loop{position:absolute;top:8px;right:8px;left:auto;z-index:998;padding:3px 8px;border-radius:4px;background:var(--smk-red);color:#f9f9f9;
  font:600 11px/1 Syne,sans-serif;letter-spacing:normal;white-space:nowrap;pointer-events:none}
html.smk-on .smk-tag-off--stack{top:29px}
html.smk-on .smk-tag-off--hero{position:absolute;top:14px;left:14px;z-index:5;padding:9px 13px;font-size:15px;box-shadow:var(--smk-neon)}

/* bandeau SMOKED fin (collections, blog, articles, pages, recherche) */
html.smk-on .smk-strip{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;
  max-width:1200px;margin:24px auto;box-sizing:border-box;padding:20px 30px;border-radius:16px;background:#0b0f1d;color:#fff}
html.smk-on .smk-strip__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 40%;filter:brightness(.55)}
html.smk-on .smk-strip::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,10,20,.85),rgba(8,10,20,.5) 55%,rgba(8,10,20,.2))}
html.smk-on .smk-strip__giant{position:absolute;z-index:-1;right:-30px;bottom:-40%;height:170%;width:auto;pointer-events:none;opacity:.9}
html.smk-on .smk-strip__brand{display:flex;flex-direction:column;align-items:center;gap:4px}
html.smk-on .smk-strip__kicker{font:500 11px/1 var(--smk-ui);letter-spacing:.08em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid #fff}
html.smk-on .smk-strip__title{font:400 40px/1.05 var(--smk-title);color:var(--smk-red)}
html.smk-on .smk-strip__box{justify-self:start;display:flex;flex-direction:column;gap:5px;padding:10px 18px;border:1px solid #fff;font:500 17px/1.15 var(--smk-ui);text-transform:uppercase}
html.smk-on .smk-strip__box b{font-weight:800}
html.smk-on .smk-strip .smk-clock{font-size:13px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
html.smk-on .smk-strip .smk-clock strong{font-weight:800}
html.smk-on .smk-strip .smk-pill{margin-right:150px}
@media (max-width:900px){
  html.smk-on .smk-strip{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:20px 16px;margin:18px 16px}
  html.smk-on .smk-strip__box{justify-self:center;align-items:center;font-size:15px}
  html.smk-on .smk-strip__title{font-size:min(34px,8.5vw)}  /* v3.10.0 : « Halloween » est plus long que « SMOKED » */
  html.smk-on .smk-strip .smk-pill{margin-right:0}
  html.smk-on .smk-strip__giant{right:-60px;bottom:-30%;height:110%;opacity:.55}
}

/* tiroir panier + checkout : rappel discret */
html.smk-on .smk-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:0 0 10px;padding:8px 12px;border-radius:8px;
  background:var(--smk-ink);color:#fff;font:500 12px/1.3 var(--smk-ui);text-align:center}
html.smk-on .smk-note__brand{font:400 15px/1 var(--smk-title);color:var(--smk-red)}
html.smk-on .smk-note b{font-weight:800;letter-spacing:.06em}
html.smk-on .smk-note .smk-clock{opacity:.8;font-variant-numeric:tabular-nums}
html.smk-on .smk-note--wide{max-width:1200px;margin:16px auto;font-size:14px;padding:12px 16px}

/* v3.12.0 — le checkout du mini-panier (« sheet » de spliff-minicart, #scwCheckoutSheet), devenu LE checkout du site :
   tunnel sobre comme la page de commande (décision de Julien du 23/10). Son bleu passe par une seule variable : en rouge
   charte, icônes, états choisis et bouton de paiement compris ; les trois bleus écrits en dur aussi. Rappel « Halloween ·
   -20% appliqué » sous sa barre de navigation, retiré quand le clavier est ouvert. Rien d'animé. Apple Pay, Google Pay et
   Bancontact gardent leurs couleurs. */
html.smk-on .scw-cs{--scw-cs-tint:var(--smk-red);--scw-cs-tint-press:var(--smk-red-dark)}
html.smk-on .scw-cs .scw-cs-tag,html.smk-on .scw-cs .scw-cs-rchip.is-gift{background:#fdecee}  /* rouge clair des fonds d'info (charte) */
html.smk-on .scw-cs .scw-cs-kr .kr-payment-button{box-shadow:0 6px 18px rgba(232,32,47,.3) !important}
html.smk-on .scw-cs .smk-note--cs{flex:none;margin:0 16px 8px}
html.smk-on .scw-cs.is-kb .smk-note--cs{display:none}

/* page Code promo : carte de l'offre */
html.smk-on .smk-promo{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:22px 0;padding:22px 24px;border-radius:14px;
  background:#0b0f1d url("assets/bg-final.webp") center 40%/cover;color:#fff;box-shadow:0 0 0 1px var(--smk-red),0 0 18px rgba(232,32,47,.3)}
html.smk-on .smk-promo::before{content:"";position:absolute;inset:0;background:rgba(8,10,20,.72)}
html.smk-on .smk-promo > *{position:relative}
html.smk-on .smk-promo__eyebrow{font:600 11px/1 var(--smk-ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
html.smk-on .smk-promo__title{font:400 min(38px,8.5vw)/1.05 var(--smk-title);color:var(--smk-red)}
html.smk-on .smk-promo__txt{margin:0;font:500 15px/1.5 var(--smk-ui);color:#fff}
html.smk-on .smk-promo__code{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border:1px dashed rgba(255,255,255,.8);border-radius:8px}
html.smk-on .smk-promo__code code{background:none;color:#fff;font:800 20px/1 var(--smk-ui);letter-spacing:.14em;padding:0}
html.smk-on .smk-promo__copy{appearance:none;border:0;border-radius:999px;padding:9px 16px;background:var(--smk-red);color:#fff;font:600 12px/1 var(--smk-ui);text-transform:uppercase;cursor:pointer;box-shadow:var(--smk-neon)}
html.smk-on .smk-promo .smk-clock{font:500 12px/1 var(--smk-ui);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
html.smk-on .smk-promo .smk-clock strong{font-weight:800;color:#fff}

/* 404 : « Cette page est partie en fumée » façon SMOKED */
html.smk-on .smk-404{position:relative;overflow:hidden}
html.smk-on .smk-404 .sp404-code{color:var(--smk-red) !important;text-shadow:0 0 6px rgba(255,52,72,.8),0 0 22px rgba(232,32,47,.55),0 0 48px rgba(232,32,47,.3);animation:smk-neon-flicker 6s infinite}
html.smk-on .smk-404 .sp404-btn.is-solid{background:var(--smk-red) !important;border-color:var(--smk-red) !important;color:#fff !important;box-shadow:var(--smk-neon)}
html.smk-on .smk-404__giant{position:absolute;right:-40px;bottom:-30px;height:78%;max-height:520px;width:auto;pointer-events:none;opacity:.9}
html.smk-on .smk-404__note{position:relative;z-index:1;font-weight:500}
html.smk-on .smk-404__note b{color:var(--smk-red)}
html.smk-on .smk-404__note .smk-clock{display:block;margin-top:6px;font-size:13px;opacity:.85}
@media (max-width:700px){html.smk-on .smk-404__giant{height:40%;right:-60px;opacity:.5}}

/* fiche produit : blocs bleus des packs Spliff -> rouge (filet de sécurité CSS, en plus du recoloriage JS) */
html.smk-on .spc-rib,
html.smk-on .spliff-ptitle__badge,
html.smk-on .spliff-badge,
html.smk-on .spliff-pvar__save,
html.smk-on .spc-bar{background-color:var(--smk-red) !important}
html.smk-on .spc-pack--best{border-color:var(--smk-red) !important;box-shadow:0 0 0 1px var(--smk-red),0 0 14px rgba(232,32,47,.25) !important}
html.smk-on .spc-nudge{background-color:#fdecee !important;border-color:rgba(232,32,47,.35) !important;color:var(--smk-ink) !important}
html.smk-on .spc-nudge svg *{stroke:var(--smk-red) !important}
html.smk-on .woo-variation-swatches .variable-items-wrapper .variable-item.selected,
html.smk-on .woo-variation-swatches .variable-items-wrapper .variable-item:hover{box-shadow:0 0 0 2px var(--smk-red) !important}


/* « Tout afficher » : version contour (fond transparent, contour et texte rouges) */
html.smk-on .spliff-products-List__button-show-all{
  background-color:transparent !important;
  color:var(--smk-red) !important;
  border:2px solid var(--smk-red) !important;
  box-shadow:0 0 10px rgba(232,32,47,.18) !important;
  background-image:none !important;
}
/* v3.1.0 — au survol, le contour se remplit : fond rouge, texte blanc (avant : un rose pâle et un rouge sombre peu lisibles,
   retour de Julien du 23/10). Le texte est parfois dans un enfant qui porte sa propre couleur : on la force aussi */
html.smk-on .spliff-products-List__button-show-all:hover,
html.smk-on .spliff-products-List__button-show-all:focus-visible{
  background-color:var(--smk-red) !important;
  color:#fff !important;
  border-color:var(--smk-red) !important;
  box-shadow:var(--smk-neon-hover) !important;
  animation:none !important;
}
html.smk-on .spliff-products-List__button-show-all:is(:hover,:focus-visible) *{color:#fff !important}

/* nom du produit (fiche produit) : en sang liquide qui bouillonne et brille,
   comme la face de sang du logo, à plat (SVG posé sur le titre, qui reste dans la page mais transparent) */
html.smk-on .smk-blood-title,
html.smk-on .smk-blood-title *{color:transparent !important;-webkit-text-fill-color:transparent !important;text-shadow:none !important}
html.smk-on .smk-blood-title{letter-spacing:.02em;font-size:max(1em,26px) !important;line-height:1.25 !important}
html.smk-on .smk-bt-svg{position:absolute;pointer-events:none;z-index:1}
html.smk-on .smk-bt-svg svg{position:absolute;left:0;top:0;overflow:visible}

/* ==========================================================================
   LOGO SMOKED : le logo s'efface dans le noir, un grand œil s'ouvre à sa place et regarde le visiteur ; puis le logo
   revient en volume (face blanche, tranche rouge sombre) et se retourne sur sa face de sang liquide qui bouillonne.
   (calé sur les lettres du GIF d'origine, qui est masqué)
   ========================================================================== */
html.smk-on .smk-logo{position:absolute;pointer-events:none;z-index:2}
html.smk-on .smk-lg-spin{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
html.smk-on .smk-lg-spin > svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
html.smk-on .smk-lg-front{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
html.smk-on .smk-lg-layer{transform:translateZ(calc(var(--z) * var(--d, 6px) / -9));backface-visibility:hidden;-webkit-backface-visibility:hidden}
html.smk-on .smk-lg-layer--b{transform:translateZ(calc(var(--z) * var(--d, 6px) / -9)) rotateY(180deg)}
html.smk-on .smk-lg-back{transform:translateZ(calc(var(--d, 6px) * -1.08)) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
html.smk-on .smk-lg-reg{font:400 300px/1 Arial,sans-serif}
/* le grand œil qui remplace le logo, caché au repos */
html.smk-on .smk-lg-eyebig{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none}
html.smk-on .smk-lg-eye__lid{transform-box:fill-box;transform-origin:center;transform:scaleY(0)}
html.smk-on .smk-lg-eye__iris{transition:transform .2s ease-out}

/* ---------- Mobile : zones de tap confortables (≥ 44 px) sans changer le dessin ---------- */
@media (max-width:767px){
  html.smk-on .smk-bar__main{position:relative;-webkit-tap-highlight-color:transparent}
  html.smk-on .smk-bar__main::after{content:"";position:absolute;inset:-12px 0}
}


/* ---------- Catégories : bannières images à la DA Halloween ----------
   la photo d'origine reste ; étalonnage rouge sang, ombres bleu nuit et vignettage, grain de film,
   filet rouge et étiquette « SMOKED -20 % » ; au survol (desktop) la photo s'approche et s'éclaire */
html.smk-on .smk-banner{position:relative;display:inline-block;max-width:100%;vertical-align:top;overflow:hidden;border-radius:12px;isolation:isolate;line-height:0;
  box-shadow:0 0 0 1px rgba(232,32,47,.45),0 14px 40px rgba(10,19,48,.35)}
html.smk-on .smk-banner > img{display:block;max-width:100%;height:auto;filter:saturate(.9) contrast(1.22) brightness(.8);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
html.smk-on .smk-banner__tint,html.smk-on .smk-banner__shade,html.smk-on .smk-banner__grain{position:absolute;inset:0;pointer-events:none}
html.smk-on .smk-banner__tint{background:var(--smk-red);mix-blend-mode:color;opacity:.22}
html.smk-on .smk-banner__shade{mix-blend-mode:multiply;background:
  radial-gradient(130% 115% at 50% 38%,rgba(150,0,12,0) 32%,rgba(130,0,10,.5) 72%,rgba(60,0,4,.85) 100%),
  linear-gradient(180deg,rgba(40,0,4,.55) 0%,rgba(40,0,4,0) 32%)}
html.smk-on .smk-banner__grain{opacity:.55;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
html.smk-on .smk-banner__tag{position:absolute;left:clamp(12px,3%,28px);bottom:clamp(10px,8%,26px);display:inline-flex;align-items:baseline;gap:8px;padding:6px 10px 7px;border-radius:6px;
  background:rgba(5,6,12,.62);box-shadow:0 0 0 1px rgba(232,32,47,.5);font:400 clamp(14px,1.6vw,20px)/1 var(--smk-title);color:var(--smk-red);letter-spacing:.02em;white-space:nowrap}
html.smk-on .smk-banner__tag b{font:800 clamp(11px,1.1vw,14px)/1 var(--smk-ui);color:#fff;letter-spacing:.04em}
@media (hover:hover){
  html.smk-on .smk-banner:hover > img{transform:scale(1.035);filter:saturate(1) contrast(1.22) brightness(.92)}
}
@media (prefers-reduced-motion:reduce){html.smk-on .smk-banner > img{transition:none}}
/* v3.8.0 — plus de sang sur les bannières (Julien, 28/10 : « on enlève les taches de sang, on garde que le filtre rougeâtre ») :
   les coulures du bord haut et l'éclaboussure de la v3.2.0 sont retirées ; étalonnage, vignettage rouge, grain et étiquette restent */

/* ---------- Module « Vape Spliff » de la home (spliff-loyalty, bloc .svk) ----------
   v3.2.0 — une éclaboussure au-dessus de « Tout voir », dans la marge haute (56 px vides) : rien ne passe sur un texte ni sur
   une tuile. z-index -1 dans le contexte isolé du bloc : sous le contenu.
   v3.7.0 — le bord haut : le sang des boutons « Ajouter » des sliders (retour de Julien du 27/10) au lieu des coulures figées.
   Le même film gluant, sous lequel des gouttes se forment, s'étirent, se détachent et tombent, pour s'éteindre dans la marge
   haute, avant le titre (smoked.js, svkDrip). Seulement à l'écran ; immobile si l'appareil réduit les animations */
html.smk-live .smk-svk-drip{position:absolute;left:0;right:0;top:0;height:56px;z-index:-1;pointer-events:none;overflow:hidden}
html.smk-live .smk-svk-drip > svg{display:block;width:100%;height:100%}
html.smk-live .smk-svk-drop{fill:#8a000c;transform-box:fill-box;transform-origin:50% 0;animation:smk-svk-drop 4.2s cubic-bezier(.55,0,.9,.5) infinite}
html.smk-live .smk-svk-drip:not(.is-live) .smk-svk-drop{animation-play-state:paused}
/* la goutte des boutons (smk-cta-drop), qui tombe ici dans le vide : elle s'éteint au lieu de plonger dans la flaque */
@keyframes smk-svk-drop{0%{transform:translateY(-2px) scale(.4,.3)}45%{transform:translateY(0) scale(.85,1.5)}62%{transform:translateY(3px) scale(.75,1.9)}66%{transform:translateY(6px) scale(.8,1.2)}84%{transform:translateY(30px) scale(.7,1.3);opacity:1}92%,100%{transform:translateY(40px) scale(.7,1.3);opacity:0}}
@media (prefers-reduced-motion:reduce){html.smk-live .smk-svk-drop{animation:none}}
html.smk-live .svk::after{content:"";position:absolute;top:0;right:9%;width:56px;height:56px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%239e000d'%3E%3Cpath d='M78 52c9-3 12 8 21 6s15 4 12 13-12 9-9 18-6 15-15 11-12 6-20 1-4-13-12-17-9-14 1-19 12-10 22-13z'/%3E%3Ccircle cx='121' cy='44' r='5'/%3E%3Ccircle cx='133' cy='70' r='3'/%3E%3Ccircle cx='40' cy='98' r='4.2'/%3E%3Ccircle cx='58' cy='124' r='2.6'/%3E%3Ccircle cx='112' cy='112' r='3.4'/%3E%3Ccircle cx='98' cy='134' r='2'/%3E%3Ccircle cx='30' cy='62' r='2.2'/%3E%3Ccircle cx='144' cy='96' r='1.8'/%3E%3Cpath d='M112 83l20 10-2 3-19-8zM50 80l-22 6 1 3 22-5z'/%3E%3C/g%3E%3Cpath d='M80 60c6-1 9 3 13 3' stroke='%23ff7a83' stroke-opacity='.35' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9;transform:rotate(20deg)}
/* v3.3.0 — taches du module : UN geste, pas une tache par tuile (Julien, 23/10 : « réfléchis à quelque chose d'harmonieux »,
   rien sur « Les recharges » ni sur « 10 goûts »). Une projection part de l'éclaboussure en haut à droite (.svk::after) : traînée
   de gouttes en vol (corps rond, traîne vers l'origine), courbée, de plus en plus fines, qui traverse la tuile 1000 mg en diagonale
   et finit en gouttelettes sur la Magic Vape ; un écho discret, même angle, sur le Live Rosin. Sous le contenu de la tuile
   (z-index -1 dans la tuile isolée), sauf sur la Magic Vape, dont la photo couvre la tuile */
html.smk-live .svk__tuile--mg::after,html.smk-live .svk__tuile--orc::before,html.smk-live .svk__tuile--vape::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;background:center/contain no-repeat}
html.smk-live .svk__tuile--mg::after{top:30%;right:4%;width:58%;aspect-ratio:120/96;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96' viewBox='0 0 120 96'%3E%3Cpath transform='translate(96.1 12.2) rotate(161)' d='M-14.94 0L-2.24 -6.02A6.40 6.40 0 1 1 -2.24 6.02Z' fill='%238f000c'/%3E%3Ccircle cx='92.1' cy='7.5' r='1.0' fill='%239e000d'/%3E%3Ccircle cx='88.4' cy='-4.0' r='0.9' fill='%239e000d'/%3E%3Cpath transform='translate(91.9 14.7) rotate(143)' d='M-15.35 0L-1.61 -4.32A4.60 4.60 0 1 1 -1.61 4.32Z' fill='%23a3000e'/%3E%3Ccircle cx='94.9' cy='13.1' r='1.0' fill='%239e000d'/%3E%3Ccircle cx='84.8' cy='3.6' r='0.8' fill='%239e000d'/%3E%3Ccircle cx='84.0' cy='7.9' r='1.0' fill='%239e000d'/%3E%3Cpath transform='translate(87.4 21.2) rotate(157)' d='M-13.78 0L-1.82 -4.89A5.20 5.20 0 1 1 -1.82 4.89Z' fill='%238f000c'/%3E%3Cpath transform='translate(80.1 25.9) rotate(139)' d='M-10.11 0L-1.19 -3.20A3.40 3.40 0 1 1 -1.19 3.20Z' fill='%239a000d'/%3E%3Ccircle cx='82.6' cy='20.3' r='0.6' fill='%239e000d'/%3E%3Ccircle cx='77.0' cy='31.5' r='0.6' fill='%239e000d'/%3E%3Ccircle cx='73.3' cy='18.8' r='0.5' fill='%239e000d'/%3E%3Cpath transform='translate(73.5 34.4) rotate(149)' d='M-10.37 0L-1.33 -3.57A3.80 3.80 0 1 1 -1.33 3.57Z' fill='%238f000c'/%3E%3Ccircle cx='74.3' cy='42.2' r='0.8' fill='%239e000d'/%3E%3Ccircle cx='67.9' cy='27.5' r='0.9' fill='%239e000d'/%3E%3Cpath transform='translate(65.1 43.0) rotate(135)' d='M-7.37 0L-0.84 -2.26A2.40 2.40 0 1 1 -0.84 2.26Z' fill='%239a000d'/%3E%3Cpath transform='translate(49.4 45.9) rotate(147)' d='M-4.94 0L-0.70 -1.88A2.00 2.00 0 1 1 -0.70 1.88Z' fill='%23a3000e'/%3E%3Cpath transform='translate(37.3 56.2) rotate(139)' d='M-3.68 0L-0.45 -1.22A1.30 1.30 0 1 1 -0.45 1.22Z' fill='%23a3000e'/%3E%3Cpath transform='translate(30.2 74.3) rotate(139)' d='M-6.01 0L-0.56 -1.50A1.60 1.60 0 1 1 -0.56 1.50Z' fill='%23b0000f'/%3E%3Cpath transform='translate(11.8 83.9) rotate(135)' d='M-3.40 0L-0.32 -0.85A0.90 0.90 0 1 1 -0.32 0.85Z' fill='%23a3000e'/%3E%3C/svg%3E")}
html.smk-live .svk__tuile--vape::before{z-index:2;top:26%;right:4%;width:34%;max-width:110px;aspect-ratio:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath transform='translate(58.6 8.0) rotate(135)' d='M-9.69 0L-0.98 -2.63A2.80 2.80 0 1 1 -0.98 2.63Z' fill='%238f000c'/%3E%3Cpath transform='translate(54.5 14.3) rotate(132)' d='M-5.89 0L-0.70 -1.88A2.00 2.00 0 1 1 -0.70 1.88Z' fill='%23a3000e'/%3E%3Cpath transform='translate(48.4 23.7) rotate(145)' d='M-6.11 0L-0.84 -2.26A2.40 2.40 0 1 1 -0.84 2.26Z' fill='%239a000d'/%3E%3Cpath transform='translate(39.0 34.7) rotate(136)' d='M-4.64 0L-0.52 -1.41A1.50 1.50 0 1 1 -0.52 1.41Z' fill='%23b0000f'/%3E%3Cpath transform='translate(26.0 47.7) rotate(128)' d='M-4.37 0L-0.42 -1.13A1.20 1.20 0 1 1 -0.42 1.13Z' fill='%23a3000e'/%3E%3Cpath transform='translate(10.4 64.3) rotate(130)' d='M-2.58 0L-0.32 -0.85A0.90 0.90 0 1 1 -0.32 0.85Z' fill='%238f000c'/%3E%3C/svg%3E");opacity:.9}
html.smk-live .svk__tuile--orc::before{top:8px;right:10px;width:64px;height:64px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath transform='translate(55.6 12.9) rotate(142)' d='M-14.20 0L-1.33 -3.57A3.80 3.80 0 1 1 -1.33 3.57Z' fill='%239a000d'/%3E%3Cpath transform='translate(45.9 12.5) rotate(140)' d='M-6.96 0L-0.91 -2.44A2.60 2.60 0 1 1 -0.91 2.44Z' fill='%238f000c'/%3E%3Cpath transform='translate(35.2 20.9) rotate(140)' d='M-7.12 0L-1.05 -2.82A3.00 3.00 0 1 1 -1.05 2.82Z' fill='%23a3000e'/%3E%3Ccircle cx='42.4' cy='24.5' r='0.8' fill='%239e000d'/%3E%3Ccircle cx='30.0' cy='23.4' r='0.7' fill='%239e000d'/%3E%3Cpath transform='translate(24.4 36.5) rotate(122)' d='M-5.58 0L-0.63 -1.69A1.80 1.80 0 1 1 -0.63 1.69Z' fill='%23a3000e'/%3E%3Cpath transform='translate(12.2 58.2) rotate(132)' d='M-3.43 0L-0.45 -1.22A1.30 1.30 0 1 1 -0.45 1.22Z' fill='%239a000d'/%3E%3C/svg%3E");opacity:.8}

/* ---------- À l'ouverture du site : la vidéo SMOKED (fournie, muette), au format de l'écran ---------- */
html.smk-on .smk-vintro{position:fixed;inset:0;z-index:2147483647;background:#000;opacity:0;cursor:pointer}
html.smk-on .smk-vintro__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
html.smk-on .smk-vintro__skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));padding:9px 16px;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font:600 12px/1 var(--smk-ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
html.smk-on .smk-vintro__skip:hover,html.smk-on .smk-vintro__skip:focus-visible{background:var(--smk-red);border-color:transparent;outline:none}