@salifbiaye/create-boutique 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
   "repository": {

package/templates/backend/src/scripts/seed.ts

@@ -27,6 +27,7 @@ import {
   linkSalesChannelsToApiKeyWorkflow,
   linkSalesChannelsToStockLocationWorkflow,
   updateRegionsWorkflow,
+  updateProductsWorkflow,
   updateShippingOptionsWorkflow,
   updateStoresWorkflow,
   uploadFilesWorkflow,
@@ -210,9 +211,14 @@ export default async function seed({ container }: ExecArgs) {
       })
       channel = result[0]
       await linkSalesChannelsToStockLocationWorkflow(container).run({ input: { id: location.id, add: [channel.id] } })
-      // Boutique ajoutée à un projet existant : elle reçoit tout le catalogue déjà en base
-      // (le marchand retire ensuite dans l'admin ce qu'il ne veut pas y vendre).
-      const existingProducts = await productService.listProducts({}, { select: ["id"], take: 10000 })
+      // Boutique ajoutée à un projet existant : elle reçoit le catalogue déjà en base, sauf les produits
+      // du CSV réservés à d'autres boutiques (colonnes boutiques/themes). Le marchand ajuste ensuite dans l'admin.
+      const rows = readCsv()
+      const csvRow = new Map(rows.map((r) => [r.handle, r]))
+      const existingProducts = (await productService.listProducts({}, { select: ["id", "handle"], take: 10000 })).filter((pr) => {
+        const r = csvRow.get(pr.handle)
+        return !r || rowFor(r, b.slug, b.theme)
+      })
       if (existingProducts.length) {
         await linkProductsToSalesChannelWorkflow(container).run({
           input: { id: channel.id, add: existingProducts.map((pr) => pr.id) },
@@ -308,6 +314,20 @@ export async function uploadSeedImage(container: ExecArgs["container"], name: st
 
 type Row = Record<string, string>
 
+function readCsv(): Row[] {
+  const csvFile = path.join(SEED_DIR, "products.csv")
+  if (!fs.existsSync(csvFile)) return []
+  return parse(fs.readFileSync(csvFile, "utf8"), { columns: true, skip_empty_lines: true, trim: true, bom: true })
+}
+
+/** Le produit de cette ligne est-il vendu dans la boutique ? Colonne « boutiques » (slugs), sinon « themes », sinon partout. */
+function rowFor(r: Row, slug: string, theme: string) {
+  const list = (v: string) => v.split("|").map((x) => x.trim()).filter(Boolean)
+  if (r.boutiques) return list(r.boutiques).includes(slug)
+  if (r.themes) return list(r.themes).includes(theme)
+  return true
+}
+
 async function importProducts({
   container,
   logger,
@@ -329,35 +349,50 @@ async function importProducts({
   endsOf: Record<string, string | undefined>
   locationId: string
   profileId: string
-  productService: { listProducts: (f: { handle: string[] }, c: { select: string[] }) => Promise<{ handle: string }[]> }
+  productService: { listProducts: (f: { handle: string[] }, c: { select: string[] }) => Promise<{ id: string; handle: string; thumbnail?: string | null }[]> }
 }) {
-  const csvFile = path.join(SEED_DIR, "products.csv")
-  if (!fs.existsSync(csvFile)) {
+  const rows = readCsv()
+  if (!rows.length) {
     logger.info("[seed] pas de seed/products.csv : aucun produit importé")
     return
   }
-  const rows: Row[] = parse(fs.readFileSync(csvFile, "utf8"), { columns: true, skip_empty_lines: true, trim: true, bom: true })
-  const existing = new Set((await productService.listProducts({ handle: rows.map((r) => r.handle) }, { select: ["handle"] })).map((p) => p.handle))
+  const inDb = await productService.listProducts({ handle: rows.map((r) => r.handle) }, { select: ["id", "handle", "thumbnail"] })
+  const existing = new Set(inDb.map((p) => p.handle))
   const toCreate = rows.filter((r) => r.handle && !existing.has(r.handle))
-  if (!toCreate.length) return
 
   // Images : fichiers de seed/images envoyés au stockage ; URL http(s) gardées telles quelles.
   const uploaded = new Map<string, string>()
-  const imageUrl = async (name: string): Promise<string | undefined> => {
+  const imageUrl = async (name: string, warn = true): Promise<string | undefined> => {
     if (uploaded.has(name)) return uploaded.get(name)
     const url = await uploadSeedImage(container, name)
     if (url) uploaded.set(name, url)
-    else logger.warn(`[seed] image introuvable : ${path.join(SEED_DIR, "images", path.basename(name))}`)
+    else if (warn) logger.warn(`[seed] image introuvable : ${path.join(SEED_DIR, "images", path.basename(name))}`)
     return url
   }
 
+  // Produits déjà en base sans photo : photos ajoutées plus tard dans seed/images → on les complète
+  // (un produit qui a déjà une photo, par exemple choisie dans l'admin, n'est jamais modifié).
+  const csvRow = new Map(rows.map((r) => [r.handle, r]))
+  let filled = 0
+  for (const p of inDb.filter((p) => !p.thumbnail)) {
+    const names = (csvRow.get(p.handle)?.images || "").split("|").filter(Boolean)
+    const images = (await Promise.all(names.map((n) => imageUrl(n, false)))).filter((u): u is string => !!u)
+    if (!images.length) continue
+    await updateProductsWorkflow(container).run({
+      input: { selector: { id: p.id }, update: { thumbnail: images[0], images: images.map((url) => ({ url })) } },
+    })
+    filled++
+  }
+  if (filled) logger.info(`[seed] photos ajoutées à ${filled} produit(s) existant(s)`)
+  if (!toCreate.length) return
+
   const salePrices: { variantKey: string; currency_code: string; amount: number; endsAt?: string }[] = []
   const products: CreateProductWorkflowInputDTO[] = []
   for (const r of toCreate) {
     const missing = currencies.filter((c) => !r[`price_${c}`])
     if (missing.length) logger.warn(`[seed] ${r.handle} : pas de prix en ${missing.join(", ")} (colonne price_<devise>) — invisible dans ces boutiques`)
 
-    const images = (await Promise.all((r.images || "").split("|").filter(Boolean).map(imageUrl))).filter((u): u is string => !!u)
+    const images = (await Promise.all((r.images || "").split("|").filter(Boolean).map((n) => imageUrl(n)))).filter((u): u is string => !!u)
     const optionTitle = r.variant_option || "Default option"
     const values = r.variant_values ? r.variant_values.split("|").map((v) => v.trim()) : ["Default option value"]
     // Boutiques du produit : colonne « boutiques » (slugs), ou « themes » (toutes les boutiques de ces thèmes,

package/templates/storefront/locales/en.json

@@ -323,5 +323,13 @@
   "tech.deal": "Top deal",
   "tech.all": "See all",
   "tech.warranty": "2-year warranty",
-  "tech.warrantySub": "On all tech"
+  "tech.warrantySub": "On all tech",
+  "fx.surprise.halloween": "Reveal the surprise",
+  "fx.surprise.noel": "Open the surprise",
+  "fx.surprise.nouvelAn": "Start the party",
+  "grimoire.drawEyebrow": "Today's reading",
+  "grimoire.draw": "Draw a card",
+  "grimoire.drawSub": "Three cards, three bewitched deals. Hover a card to turn it over.",
+  "grimoire.reveal": "Turn over",
+  "grimoire.shelf": "The apothecary shelf"
 }

package/templates/storefront/locales/fr.json

@@ -323,5 +323,13 @@
   "tech.deal": "Offre phare",
   "tech.all": "Tout voir",
   "tech.warranty": "Garantie 2 ans",
-  "tech.warrantySub": "Sur toute la tech"
+  "tech.warrantySub": "Sur toute la tech",
+  "fx.surprise.halloween": "Découvrir la surprise",
+  "fx.surprise.noel": "Ouvrir la surprise",
+  "fx.surprise.nouvelAn": "Lancer la fête",
+  "grimoire.drawEyebrow": "Le tirage du jour",
+  "grimoire.draw": "Tirez une carte",
+  "grimoire.drawSub": "Trois cartes, trois offres ensorcelées. Survolez une carte pour la retourner.",
+  "grimoire.reveal": "Retourner",
+  "grimoire.shelf": "L'étagère de l'apothicaire"
 }

package/templates/storefront/src/app/(main)/page.tsx

@@ -14,6 +14,7 @@ import { HarvestBanner, HarvestGrid, HarvestHero, HarvestServices, HarvestStrip
 import { GalaFoil, GalaHero, GalaMidnight, GalaSelection, GalaStrokes } from "@modules/ub/gala"
 import { CinemaHero, CinemaRow, CinemaScreening, CinemaTop } from "@modules/ub/cinema"
 import { TechBento, TechFinal, TechFlash, TechGrid, TechHero, TechSpecs, TechTicker } from "@modules/ub/tech"
+import { GrimoireHero, GrimoireShelf, GrimoireSpell, GrimoireTarot } from "@modules/ub/grimoire"
 import { AlbumGarland, AlbumHero, AlbumPolaroids, AlbumStory, AlbumTicket } from "@modules/ub/album"
 import { getBoutique } from "@lib/boutique/config"
 import type { Campaign } from "@lib/boutique/campaign"
@@ -153,6 +154,26 @@ async function TechPage({ campaign }: { campaign: Campaign }) {
   )
 }
 
+/** Accueil « Grimoire » (Halloween 2) : les 3 offres les plus remisées au tirage, le reste sur l'étagère. */
+async function GrimoirePage({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  const off = (p: (typeof products)[number]) =>
+    Math.max(0, ...(p.variants ?? []).map((v) => {
+      const c = v.calculated_price
+      return c?.original_amount && c.calculated_amount != null ? 1 - c.calculated_amount / c.original_amount : 0
+    }))
+  const sorted = [...products].sort((a, b) => off(b) - off(a))
+  return (
+    <>
+      <GrimoireTarot products={sorted} />
+      <GrimoireShelf products={products} title={campaign.sections?.products ?? t("section.products")} sub={campaign.promo?.text} />
+      <GrimoireSpell campaign={campaign} />
+    </>
+  )
+}
+
 /** Accueil « Gala » (thèmes Nouvel An). */
 async function GalaProducts({ campaign }: { campaign: Campaign }) {
   const {
@@ -179,6 +200,17 @@ export default async function Home() {
     return <CampaignEnded nextUrl={campaign.nextCampaignUrl} />
   }
 
+  if (getBoutique().theme.home === "grimoire") {
+    return (
+      <div className="ub-grimoire">
+        <GrimoireHero campaign={campaign} />
+        <Suspense fallback={<GridFallback />}>
+          <GrimoirePage campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
   if (getBoutique().theme.home === "tech") {
     return (
       <div className="ub-tech">

package/templates/storefront/src/app/(main)/template.tsx

@@ -0,0 +1,4 @@
+/** Remonté à chaque navigation : sert de point d'accroche à la transition entre pages (styles/ub/motion.css, desktop). */
+export default function Template({ children }: { children: React.ReactNode }) {
+  return <div className="ub-page">{children}</div>
+}

package/templates/storefront/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { getBoutique } from "@lib/boutique/config"
 import { themeFontClasses } from "@lib/boutique/fonts"
 import { messages } from "@lib/boutique/i18n"
 import { I18nProvider } from "@lib/boutique/i18n-client"
+import Motion from "@modules/ub/motion"
 import { Metadata } from "next"
 import "styles/globals.css"
 import "styles/ub/tokens.css"
@@ -18,6 +19,8 @@ import "styles/ub/gala.css"
 import "styles/ub/cinema.css"
 import "styles/ub/album.css"
 import "styles/ub/tech.css"
+import "styles/ub/grimoire.css"
+import "styles/ub/motion.css"
 import "styles/ub/media.css"
 import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"
@@ -60,10 +63,11 @@ export default function RootLayout(props: { children: React.ReactNode }) {
   const b = getBoutique()
 
   return (
-    <html lang={b.locale} data-theme={b.theme.layout ?? b.theme.id} data-variant={b.theme.layout ? b.theme.id : undefined} data-mode="light" className={themeFontClasses(b.theme)}>
+    <html lang={b.locale} data-theme={b.theme.layout ?? b.theme.id} data-variant={b.theme.layout ? b.theme.id : undefined} data-event={b.theme.id.replace(/-2$/, "")} data-mode="light" className={themeFontClasses(b.theme)}>
       <body className="ub">
         <I18nProvider messages={messages("")} locale={b.locale}>
           <main className="relative">{props.children}</main>
+          <Motion event={b.theme.id.replace(/-2$/, "")} />
         </I18nProvider>
       </body>
     </html>

package/templates/storefront/src/lib/boutique/schema.ts

@@ -71,7 +71,7 @@ export const themeSchema = z.object({
   /** Variante : reprend la mise en page (règles CSS) de ce thème, avec la palette de styles/ub/variants.css. */
   layout: z.string().regex(SLUG).optional(),
   /** Page d'accueil : « default » (sections standard) ou « harvest » (accueil éditorial des thèmes Thanksgiving) */
-  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech"]).optional(),
+  home: z.enum(["default", "harvest", "gala", "cinema", "album", "tech", "grimoire"]).optional(),
   fonts: z.object({
     head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
     body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),

package/templates/storefront/src/modules/ub/album.tsx

@@ -5,6 +5,7 @@ import { t } from "@lib/boutique/i18n"
 import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
+import SurpriseButton from "./surprise-button"
 import FadeImg from "./fade-img"
 
 /**
@@ -27,9 +28,12 @@ export function AlbumHero({ campaign }: { campaign: Campaign }) {
         {hero.eyebrow && <p className="ub-al-eyebrow">{hero.eyebrow}</p>}
         <h1 className="ub-al-title">{hero.title}</h1>
         {hero.sub && <p className="ub-al-sub">{hero.sub}</p>}
-        <Link href="/store" className="ub-al-btn">
-          {hero.cta}
-        </Link>
+        <div className="ub-al-actions">
+          <Link href="/store" className="ub-al-btn">
+            {hero.cta}
+          </Link>
+          <SurpriseButton event="noel" label={t("fx.surprise.noel")} />
+        </div>
       </div>
     </section>
   )

package/templates/storefront/src/modules/ub/cinema.tsx

@@ -7,6 +7,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import FadeImg from "./fade-img"
 import { Icon } from "./icons"
+import SurpriseButton from "./surprise-button"
 
 /**
  * Accueil « Cinéma » (thèmes Halloween, theme.json → "home": "cinema") : la boutique comme une affiche de film.
@@ -63,6 +64,7 @@ export function CinemaHero({ campaign, next }: { campaign: Campaign; next: P[] }
             <Link href="/store" className="ub-cn-btn ub-cn-btn--ghost">
               {t("cinema.catalog")}
             </Link>
+            <SurpriseButton event="halloween" label={t("fx.surprise.halloween")} />
           </div>
           {upNext.length > 0 && (
             <div className="ub-cn-next">

package/templates/storefront/src/modules/ub/fx-runtime.ts

@@ -0,0 +1,272 @@
+/**
+ * Animations desktop (chargé à la demande par motion.tsx, jamais sur mobile ni si « réduire les animations ») :
+ *  - apparition au scroll des sections et des cartes (décalage léger entre les cartes) ;
+ *  - défilement automatique des rangées horizontales (pause au survol, au focus, hors écran, après un geste) ;
+ *  - ambiance de l'événement : chauves-souris occasionnelles (Halloween), neige (Noël), paillettes (Nouvel An) ;
+ *  - burst() : confettis / particules du bouton « surprise » du hero.
+ * Aucun état React : tout passe par des classes CSS, transform et opacity (pas de re-render de la page).
+ */
+
+export type FxEvent = "halloween" | "noel" | "nouvel-an" | string
+
+const SCOPE = ".ub-page"
+let started = false
+
+export function start(event: FxEvent) {
+  if (started) return
+  started = true
+  document.documentElement.classList.add("ub-motion")
+  const scan = setupReveal()
+  const slide = setupAutoSlide()
+  const refresh = () => {
+    scan()
+    slide()
+    ambient(event)
+  }
+  refresh()
+  // Nouvelle page (navigation côté client) : on reprend les nouveaux éléments
+  let queued = false
+  new MutationObserver(() => {
+    if (queued) return
+    queued = true
+    requestAnimationFrame(() => {
+      queued = false
+      refresh()
+    })
+  }).observe(document.body, { childList: true, subtree: true })
+}
+
+/* ---------------- Apparition au scroll ---------------- */
+function setupReveal() {
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) {
+        if (!e.isIntersecting) continue
+        const el = e.target as HTMLElement
+        io.unobserve(el)
+        el.classList.add("is-in")
+        // Fin de l'animation : on retire les classes pour rendre la main aux styles (hover, transitions) du thème
+        const i = Number(el.style.getPropertyValue("--rv-i") || 0)
+        setTimeout(() => el.classList.remove("ub-rv", "is-in"), 700 + i * 60)
+      }
+    },
+    { rootMargin: "0px 0px -8% 0px" }
+  )
+  return () => {
+    const page = document.querySelector(SCOPE)
+    if (!page) return
+    const vh = window.innerHeight
+    const mark = (el: HTMLElement, i = 0) => {
+      if (el.dataset.rv) return
+      el.dataset.rv = "1"
+      // Déjà à l'écran (hero, haut de page) : rien à animer, pas de clignotement
+      if (el.getBoundingClientRect().top < vh * 0.92) return
+      if (i) el.style.setProperty("--rv-i", String(i))
+      el.classList.add("ub-rv")
+      io.observe(el)
+    }
+    page.querySelectorAll<HTMLElement>(":scope section").forEach((s, n) => n > 0 && mark(s))
+    page.querySelectorAll<HTMLElement>(":scope section :is(ul, ol)").forEach((list) => {
+      const items = Array.from(list.children) as HTMLElement[]
+      if (items.length < 2 || items.length > 24) return
+      items.forEach((li, i) => mark(li, i % 8))
+    })
+  }
+}
+
+/* ---------------- Rangées horizontales : défilement automatique ---------------- */
+function setupAutoSlide() {
+  const rows = new WeakSet<HTMLElement>()
+  return () => {
+    const page = document.querySelector(SCOPE)
+    if (!page) return
+    page.querySelectorAll<HTMLElement>(":scope :is(ul, ol)").forEach((row) => {
+      if (rows.has(row)) return
+      const ox = getComputedStyle(row).overflowX
+      if ((ox !== "auto" && ox !== "scroll") || row.scrollWidth <= row.clientWidth + 10) return
+      rows.add(row)
+      let visible = false
+      let pausedUntil = 0
+      let hover = false
+      const pause = (ms: number) => (pausedUntil = Date.now() + ms)
+      row.addEventListener("mouseenter", () => (hover = true))
+      row.addEventListener("mouseleave", () => (hover = false))
+      row.addEventListener("focusin", () => pause(10000))
+      row.addEventListener("wheel", () => pause(8000), { passive: true })
+      row.addEventListener("pointerdown", () => pause(8000), { passive: true })
+      new IntersectionObserver(([e]) => (visible = e.isIntersecting), { threshold: 0.4 }).observe(row)
+      setInterval(() => {
+        if (!visible || hover || document.hidden || Date.now() < pausedUntil || !row.isConnected) return
+        const first = row.children[0] as HTMLElement | undefined
+        if (!first) return
+        const step = first.getBoundingClientRect().width + (parseFloat(getComputedStyle(row).columnGap) || 16)
+        const end = row.scrollLeft + row.clientWidth >= row.scrollWidth - 4
+        if (end) row.scrollTo({ left: 0, behavior: "smooth" })
+        else row.scrollBy({ left: step, behavior: "smooth" })
+      }, 4500)
+    })
+  }
+}
+
+/* ---------------- Ambiance de l'événement ---------------- */
+let ambientHero: Element | null = null
+let batTimer: number | undefined
+
+function ambient(event: FxEvent) {
+  const hero = document.querySelector(`${SCOPE} section`)
+  if (event === "halloween") {
+    if (batTimer === undefined) scheduleBats(4000)
+    return
+  }
+  if (!hero || hero === ambientHero) return
+  ambientHero = hero
+  if (event === "noel") particlesIn(hero as HTMLElement, "snow")
+  if (event === "nouvel-an") particlesIn(hero as HTMLElement, "sparkle")
+}
+
+/* Halloween : 1 à 3 chauves-souris traversent l'écran de temps en temps (toutes les 12 à 28 s). */
+function scheduleBats(delay: number) {
+  batTimer = window.setTimeout(() => {
+    if (!document.hidden) flock(1 + Math.floor(Math.random() * 3))
+    scheduleBats(12000 + Math.random() * 16000)
+  }, delay)
+}
+
+const BAT =
+  '<svg viewBox="0 0 64 32" width="100%" height="100%"><path fill="currentColor" d="M32 10c-2 0-3 2-3 2l-2-4-1 5C20 8 12 6 2 10c6 1 10 5 11 10 3-3 7-3 9 0 2-3 5-3 7-1 1-2 2-3 3-3s2 1 3 3c2-2 5-2 7 1 2-3 6-3 9 0 1-5 5-9 11-10-10-4-18-2-24 3l-1-5-2 4s-1-2-3-2z"/></svg>'
+
+function flock(n: number, fromY?: number) {
+  for (let i = 0; i < n; i++) {
+    const bat = document.createElement("span")
+    bat.className = Math.random() < 0.5 ? "ub-bat ub-bat--rtl" : "ub-bat"
+    bat.setAttribute("aria-hidden", "true")
+    bat.innerHTML = `<span>${BAT}</span>`
+    const size = 22 + Math.random() * 22
+    bat.style.cssText = `--y:${fromY ?? 8 + Math.random() * 45}vh;--dy:${-10 + Math.random() * 20}vh;--s:${size}px;--d:${6 + Math.random() * 3}s;--delay:${i * 0.35}s`
+    bat.addEventListener("animationend", () => bat.remove())
+    document.body.appendChild(bat)
+  }
+}
+
+/* Noël (neige) / Nouvel An (paillettes dorées qui montent) : canvas dans le hero, actif seulement quand il est visible. */
+function particlesIn(host: HTMLElement, kind: "snow" | "sparkle") {
+  const canvas = document.createElement("canvas")
+  canvas.className = "ub-fx-canvas"
+  canvas.setAttribute("aria-hidden", "true")
+  if (getComputedStyle(host).position === "static") host.style.position = "relative"
+  host.appendChild(canvas)
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return
+  const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+  let w = 0
+  let h = 0
+  const resize = () => {
+    w = host.clientWidth
+    h = host.clientHeight
+    canvas.width = w * dpr
+    canvas.height = h * dpr
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  }
+  resize()
+  new ResizeObserver(resize).observe(host)
+  const count = kind === "snow" ? 46 : 34
+  const ps = Array.from({ length: count }, () => ({
+    x: Math.random() * w,
+    y: Math.random() * h,
+    r: kind === "snow" ? 1 + Math.random() * 2.4 : 0.8 + Math.random() * 1.8,
+    v: kind === "snow" ? 0.25 + Math.random() * 0.6 : 0.15 + Math.random() * 0.4,
+    a: Math.random() * Math.PI * 2,
+  }))
+  let visible = true
+  new IntersectionObserver(([e]) => (visible = e.isIntersecting)).observe(host)
+  let last = 0
+  const frame = (t: number) => {
+    requestAnimationFrame(frame)
+    if (!visible || document.hidden || t - last < 33) return // ~30 i/s, rien hors écran
+    last = t
+    ctx.clearRect(0, 0, w, h)
+    for (const p of ps) {
+      p.a += 0.02
+      if (kind === "snow") {
+        p.y += p.v
+        p.x += Math.sin(p.a) * 0.3
+        if (p.y > h + 4) (p.y = -4), (p.x = Math.random() * w)
+        ctx.fillStyle = "rgba(255,255,255,0.75)"
+      } else {
+        p.y -= p.v
+        p.x += Math.sin(p.a) * 0.2
+        if (p.y < -4) (p.y = h + 4), (p.x = Math.random() * w)
+        ctx.fillStyle = `rgba(240,210,130,${0.35 + 0.45 * Math.abs(Math.sin(p.a * 1.5))})`
+      }
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+  requestAnimationFrame(frame)
+}
+
+/* ---------------- Surprise : confettis / particules pendant ~3 s ---------------- */
+const PALETTES: Record<string, string[]> = {
+  halloween: ["#ff7a1a", "#f2e14c", "#8b5cf6", "#1a1a1a", "#ffb15c"],
+  noel: ["#ffffff", "#d4af37", "#c0392b", "#1f5c3a", "#f7e7b4"],
+  "nouvel-an": ["#e8c766", "#d9dbe1", "#ffffff", "#f5b5c8", "#b08a2e"],
+}
+
+export function burst(event: FxEvent, origin: { x: number; y: number }) {
+  if (event === "halloween") flock(6, (origin.y / window.innerHeight) * 100 - 10)
+  const colors = PALETTES[event] ?? PALETTES["nouvel-an"]
+  const canvas = document.createElement("canvas")
+  canvas.className = "ub-fx-burst"
+  canvas.setAttribute("aria-hidden", "true")
+  document.body.appendChild(canvas)
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return canvas.remove()
+  const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+  const w = window.innerWidth
+  const h = window.innerHeight
+  canvas.width = w * dpr
+  canvas.height = h * dpr
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  const ps = Array.from({ length: 140 }, () => {
+    const angle = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 1.1
+    const speed = 6 + Math.random() * 9
+    return {
+      x: origin.x,
+      y: origin.y,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      rot: Math.random() * 6,
+      vr: (Math.random() - 0.5) * 0.3,
+      size: 5 + Math.random() * 6,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      round: event === "noel" ? Math.random() < 0.6 : Math.random() < 0.25,
+    }
+  })
+  const t0 = performance.now()
+  const frame = (t: number) => {
+    const k = (t - t0) / 3000
+    if (k >= 1) return canvas.remove()
+    ctx.clearRect(0, 0, w, h)
+    ctx.globalAlpha = k > 0.7 ? (1 - k) / 0.3 : 1
+    for (const p of ps) {
+      p.vy += 0.22
+      p.vx *= 0.99
+      p.x += p.vx
+      p.y += p.vy
+      p.rot += p.vr
+      ctx.fillStyle = p.color
+      ctx.save()
+      ctx.translate(p.x, p.y)
+      ctx.rotate(p.rot)
+      if (p.round) {
+        ctx.beginPath()
+        ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2)
+        ctx.fill()
+      } else ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2)
+      ctx.restore()
+    }
+    requestAnimationFrame(frame)
+  }
+  requestAnimationFrame(frame)
+}

package/templates/storefront/src/modules/ub/gala.tsx

@@ -7,6 +7,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import FadeImg from "./fade-img"
 import { Icon } from "./icons"
+import SurpriseButton from "./surprise-button"
 
 /**
  * Accueil « Gala » (thèmes Nouvel An, theme.json → "home": "gala") : noir, or et argent.
@@ -54,6 +55,7 @@ export function GalaHero({ campaign }: { campaign: Campaign }) {
                 {hero.cta2}
               </Link>
             )}
+            <SurpriseButton event="nouvel-an" label={t("fx.surprise.nouvelAn")} />
           </div>
         </div>
       </div>

package/templates/storefront/src/modules/ub/grimoire.tsx

@@ -0,0 +1,194 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { Icon } from "./icons"
+import SurpriseButton from "./surprise-button"
+
+/**
+ * Accueil « Grimoire » (Halloween 2, theme.json → "home": "grimoire") : jaune acide sur nuit.
+ * Hero plein cadre (le titre « sort de terre »), tirage de tarot (3 cartes qui se retournent),
+ * étagères d'apothicaire (cadres en arche, étiquettes N°), cercle de sort avec compte à rebours.
+ * CSS : styles/ub/grimoire.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+const priceOf = (p: P) => {
+  const { cheapestPrice } = getProductPrice({ product: p })
+  return { price: cheapestPrice, onSale: cheapestPrice?.price_type === "sale" }
+}
+const ARCANA = ["XIII", "XVIII", "XV"]
+
+export function GrimoireHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
+  const before = hl ? hero.title.slice(0, hero.title.indexOf(hl)).trim() : hero.title
+  const after = hl ? hero.title.slice(hero.title.indexOf(hl) + hl.length).trim() : ""
+
+  return (
+    <section className="ub-gr-hero" style={image ? { ["--gr-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      <div className="ub-gr-hero__bg" aria-hidden />
+      <div className="ub-wrap ub-gr-hero__in">
+        {hero.eyebrow && <p className="ub-gr-eyebrow">{hero.eyebrow}</p>}
+        <h1 className="ub-gr-title">
+          {before && <span className="ub-gr-title__line">{before}</span>}
+          {hl && <span className="ub-gr-title__line ub-gr-title__hl">{hl}</span>}
+          {after && <span className="ub-gr-title__line">{after}</span>}
+        </h1>
+        <div className="ub-gr-hero__foot">
+          {hero.sub && <p className="ub-gr-sub">{hero.sub}</p>}
+          <div className="ub-gr-actions">
+            <Link href="/store" className="ub-gr-btn ub-gr-btn--solid">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <Link href="/store" className="ub-gr-btn ub-gr-btn--ghost">
+                {hero.cta2}
+              </Link>
+            )}
+            <SurpriseButton event="halloween" label={t("fx.surprise.halloween")} />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Tirage : 3 cartes de tarot face cachée ; survol / focus / toucher = la carte se retourne sur une offre. */
+export function GrimoireTarot({ products }: { products: P[] }) {
+  const cards = products.filter(imageOf).slice(0, 3)
+  if (cards.length < 3) return null
+  return (
+    <section className="ub-gr-section ub-gr-tarot">
+      <div className="ub-wrap">
+        <div className="ub-gr-head ub-gr-head--center">
+          <p className="ub-gr-eyebrow">{t("grimoire.drawEyebrow")}</p>
+          <h2 className="ub-gr-h2">{t("grimoire.draw")}</h2>
+          <p className="ub-gr-lead">{t("grimoire.drawSub")}</p>
+        </div>
+        <ul className="ub-gr-deck">
+          {cards.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            return (
+              <li key={p.id}>
+                <Link href={`/products/${p.handle}`} className="ub-gr-card" aria-label={p.title}>
+                  <span className="ub-gr-card__inner">
+                    <span className="ub-gr-card__back" aria-hidden>
+                      <span className="ub-gr-card__num">{ARCANA[i]}</span>
+                      <svg viewBox="0 0 100 100" className="ub-gr-sigil">
+                        <circle cx="50" cy="50" r="40" />
+                        <circle cx="50" cy="50" r="28" />
+                        <path d="M50 10 L61 38 L90 38 L66 56 L75 86 L50 68 L25 86 L34 56 L10 38 L39 38 Z" />
+                      </svg>
+                      <span className="ub-gr-card__hint">{t("grimoire.reveal")}</span>
+                    </span>
+                    <span className="ub-gr-card__front">
+                      <span className="ub-gr-card__img">
+                        <FadeImg src={imageOf(p)} alt="" />
+                        {onSale && price?.percentage_diff && <b className="ub-gr-off">-{price.percentage_diff}%</b>}
+                      </span>
+                      <span className="ub-gr-card__name">{p.title}</span>
+                      {price && (
+                        <span className="ub-gr-price">
+                          <b>{price.calculated_price}</b>
+                          {onSale && <s>{price.original_price}</s>}
+                        </span>
+                      )}
+                    </span>
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Étagères d'apothicaire : cadres en arche posés sur des planches, étiquette « N° ». */
+export function GrimoireShelf({ products, title, sub }: { products: P[]; title: string; sub?: string }) {
+  if (!products.length) return null
+  return (
+    <section className="ub-gr-section">
+      <div className="ub-wrap">
+        <div className="ub-gr-head">
+          <div>
+            <p className="ub-gr-eyebrow">{t("grimoire.shelf")}</p>
+            <h2 className="ub-gr-h2">{title}</h2>
+          </div>
+          {sub && <p className="ub-gr-lead">{sub}</p>}
+        </div>
+        <ul className="ub-gr-shelf">
+          {products.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            const image = imageOf(p)
+            return (
+              <li key={p.id}>
+                <Link href={`/products/${p.handle}`} className="ub-gr-jar">
+                  <span className="ub-gr-jar__arch">
+                    {image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}
+                    {onSale && price?.percentage_diff && <b className="ub-gr-off">-{price.percentage_diff}%</b>}
+                  </span>
+                  <span className="ub-gr-jar__label">
+                    <small>N°{String(i + 1).padStart(2, "0")}</small>
+                    <span className="ub-gr-jar__name">{p.title}</span>
+                    {price && (
+                      <span className="ub-gr-price">
+                        <b>{price.calculated_price}</b>
+                        {onSale && <s>{price.original_price}</s>}
+                      </span>
+                    )}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Cercle de sort : runes qui tournent lentement, texte promo et compte à rebours au centre. */
+export function GrimoireSpell({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  return (
+    <section className="ub-gr-section">
+      <div className="ub-wrap">
+        <div className="ub-gr-spell">
+          <svg className="ub-gr-spell__ring" viewBox="0 0 400 400" aria-hidden>
+            <defs>
+              <path id="ub-gr-ring" d="M200 200 m-170 0 a170 170 0 1 1 340 0 a170 170 0 1 1 -340 0" />
+            </defs>
+            <circle cx="200" cy="200" r="190" />
+            <circle cx="200" cy="200" r="150" />
+            <text>
+              <textPath href="#ub-gr-ring">ᚠ ᚢ ᚦ ᚨ ᚱ ᚲ ᚷ ᚹ ᚺ ᚾ ᛁ ᛃ ᛇ ᛈ ᛉ ᛊ ᛏ ᛒ ᛖ ᛗ ᛚ ᛜ ᛞ ᛟ ᚠ ᚢ ᚦ ᚨ ᚱ ᚲ ᚷ ᚹ ᚺ ᚾ ᛁ ᛃ</textPath>
+            </text>
+          </svg>
+          <div className="ub-gr-spell__text">
+            {promo?.eyebrow && <p className="ub-gr-eyebrow">{promo.eyebrow}</p>}
+            <h2 className="ub-gr-h2">{promo?.title ?? campaign.hero.title}</h2>
+            {promo?.text && <p className="ub-gr-lead">{promo.text}</p>}
+            {campaign.showCountdown !== false && (
+              <div className="ub-gr-spell__cd">
+                <CampaignCountdown endsAt={campaign.endsAt} />
+              </div>
+            )}
+            <Link href="/store" className="ub-gr-btn ub-gr-btn--solid">
+              {promo?.cta ?? campaign.hero.cta} <Icon name="arrowRight" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/motion.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { useEffect } from "react"
+
+/** Écran large + souris + animations autorisées : seul cas où les animations desktop sont chargées. */
+export const DESKTOP_FX = "(min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)"
+
+/**
+ * Active les animations desktop (styles/ub/motion.css + fx-runtime) après le chargement de la page.
+ * Rien n'est téléchargé sur mobile : le code est importé à la demande, seulement si DESKTOP_FX est vrai.
+ */
+export default function Motion({ event }: { event: string }) {
+  useEffect(() => {
+    if (!window.matchMedia(DESKTOP_FX).matches) return
+    const go = () => import("./fx-runtime").then((m) => m.start(event))
+    if ("requestIdleCallback" in window) window.requestIdleCallback(go, { timeout: 1500 })
+    else setTimeout(go, 300)
+  }, [event])
+  return null
+}

package/templates/storefront/src/modules/ub/surprise-button.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+/**
+ * Bouton « surprise » du hero (desktop uniquement, masqué par le CSS sur mobile) :
+ * lance quelques secondes de confettis / particules aux couleurs de l'événement, sans bloquer la page.
+ */
+export default function SurpriseButton({ event, label }: { event: string; label: string }) {
+  return (
+    <button
+      type="button"
+      className="ub-surprise"
+      onClick={(e) => {
+        const r = e.currentTarget.getBoundingClientRect()
+        import("./fx-runtime").then((m) => m.burst(event, { x: r.left + r.width / 2, y: r.top + r.height / 2 }))
+      }}
+    >
+      <span aria-hidden>✦</span> {label}
+    </button>
+  )
+}

package/templates/storefront/src/styles/ub/grimoire.css

@@ -0,0 +1,178 @@
+/* Accueil « Grimoire » (Halloween 2) — modules/ub/grimoire.tsx. Jaune acide sur nuit, sorcellerie d'apothicaire.
+   Jetons de couleur : styles/ub/cinema.css ([data-variant="halloween-2"]). */
+
+.ub-al-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
+
+[data-variant="halloween-2"] { --gr-acid: #f2e14c; --gr-night: #0b0a0c; --gr-wood: #2a1d14; }
+
+/* ---------- Hero : image plein cadre, titre qui « sort de terre » ---------- */
+.ub-gr-hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  min-height: clamp(600px, 52vw, 780px);
+  background: var(--gr-night);
+  color: #fff;
+}
+.ub-gr-hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--gr-img, radial-gradient(60% 60% at 40% 30%, #3a2a14, var(--gr-night))) center 35% / cover no-repeat; }
+.ub-gr-hero::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(0deg, var(--gr-night) 2%, rgb(11 10 12 / 0.75) 26%, transparent 60%),
+    linear-gradient(90deg, rgb(11 10 12 / 0.55), transparent 55%);
+}
+.ub-gr-hero__in { width: 100%; padding-top: var(--space-16); padding-bottom: var(--space-12); }
+.ub-gr-eyebrow { margin: 0; color: var(--gr-acid); font: 700 13px/18px var(--ub-font-body); letter-spacing: 0.3em; text-transform: uppercase; }
+.ub-gr-title { display: grid; margin: 14px 0 0 !important; font-family: var(--font-oswald); font-weight: 700; text-transform: uppercase; line-height: 0.92; padding-bottom: 0.06em; letter-spacing: -0.01em; }
+.ub-gr-title__line { font-size: clamp(52px, 6.4vw, 104px); }
+/* Mot mis en avant : lettres creuses jaunes */
+.ub-gr-title__hl { color: transparent; -webkit-text-stroke: 2px var(--gr-acid); }
+.ub-gr-hero__foot { display: grid; grid-template-columns: minmax(0, 520px) auto; align-items: end; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-8); }
+.ub-gr-sub { margin: 0; color: #d8d2c6; font-size: 17px; line-height: 27px; }
+.ub-gr-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
+.ub-gr-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 4px; font: 700 14px/18px var(--ub-font-body); letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.2s, background 0.2s; }
+.ub-gr-btn svg { width: 18px; height: 18px; }
+.ub-gr-btn--solid { background: var(--gr-acid); color: var(--gr-night); }
+.ub-gr-btn--solid:hover { transform: translateY(-2px); }
+.ub-gr-btn--ghost { border: 1px solid rgb(255 255 255 / 0.4); color: #fff; }
+.ub-gr-btn--ghost:hover { background: rgb(255 255 255 / 0.08); }
+.ub-gr-hero .ub-surprise { color: var(--gr-acid); }
+
+/* Desktop : le titre monte depuis le sol, ligne par ligne */
+@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
+  .ub-gr-title { overflow: hidden; }
+  .ub-gr-title__line { animation: ub-gr-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
+  .ub-gr-title__line:nth-child(2) { animation-delay: 0.12s; }
+  .ub-gr-title__line:nth-child(3) { animation-delay: 0.24s; }
+  @keyframes ub-gr-rise { from { transform: translate3d(0, 105%, 0); } }
+}
+
+/* ---------- Sections ---------- */
+.ub-gr-section { padding-top: var(--space-16); }
+.ub-grimoire > :last-child { padding-bottom: var(--space-16); }
+.ub-gr-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); }
+.ub-gr-head--center { display: grid; justify-items: center; text-align: center; }
+.ub-gr-h2 { margin: 8px 0 0; font: 700 clamp(34px, 4.2vw, 60px) / 0.95 var(--font-oswald); text-transform: uppercase; }
+.ub-gr-lead { max-width: 36em; margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 25px; }
+.ub-gr-off { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 3px; background: var(--gr-acid); color: var(--gr-night); font: 800 13px/16px var(--ub-font-body); }
+.ub-gr-price { display: flex; align-items: baseline; gap: 8px; }
+.ub-gr-price b { color: var(--gr-acid); font: 700 18px/22px var(--font-oswald); }
+.ub-gr-price s { color: var(--ink-muted); font-size: 13px; }
+
+/* ---------- Tirage de tarot : cartes qui se retournent ---------- */
+.ub-gr-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
+.ub-gr-deck > li:nth-child(1) { transform: rotate(-4deg) translateY(14px); }
+.ub-gr-deck > li:nth-child(3) { transform: rotate(4deg) translateY(14px); }
+.ub-gr-card { display: block; aspect-ratio: 2 / 3.3; perspective: 1200px; color: var(--ink); }
+.ub-gr-card__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
+.ub-gr-card:is(:hover, :focus-visible, :active) .ub-gr-card__inner { transform: rotateY(180deg); }
+.ub-gr-card__back,
+.ub-gr-card__front { position: absolute; inset: 0; display: grid; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
+.ub-gr-card__back {
+  place-items: center;
+  grid-template-rows: auto 1fr auto;
+  padding: 22px;
+  border: 1px solid rgb(242 225 76 / 0.5);
+  background:
+    repeating-linear-gradient(45deg, rgb(242 225 76 / 0.05) 0 2px, transparent 2px 14px),
+    radial-gradient(circle at 50% 45%, #2a2410, var(--gr-night) 75%);
+  box-shadow: inset 0 0 0 8px var(--gr-night), inset 0 0 0 9px rgb(242 225 76 / 0.35), 0 24px 50px -24px rgb(0 0 0 / 0.9);
+}
+.ub-gr-card__num { color: var(--gr-acid); font: 700 22px/1 var(--font-oswald); letter-spacing: 0.2em; }
+.ub-gr-sigil { width: 70%; fill: none; stroke: var(--gr-acid); stroke-width: 1.2; opacity: 0.85; }
+.ub-gr-card__hint { color: #cfc6a8; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; }
+.ub-gr-card__front { grid-template-rows: 1fr auto auto; gap: 8px; padding: 12px 12px 18px; border: 1px solid var(--gr-acid); background: var(--surface); transform: rotateY(180deg); }
+.ub-gr-card__img { position: relative; overflow: hidden; border-radius: 10px; }
+.ub-gr-card__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-gr-card__name { padding: 0 6px; font: 700 18px/22px var(--font-oswald); text-transform: uppercase; }
+.ub-gr-card__front .ub-gr-price { padding: 0 6px; }
+
+/* ---------- Étagères d'apothicaire ---------- */
+.ub-gr-shelf {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: 24px;
+  row-gap: 56px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ub-gr-shelf > li { position: relative; }
+/* Planche sous chaque rangée */
+.ub-gr-shelf > li::after {
+  content: "";
+  position: absolute;
+  left: -12px;
+  right: -12px;
+  bottom: -22px;
+  height: 10px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #4a3422, var(--gr-wood));
+  box-shadow: 0 12px 20px -8px rgb(0 0 0 / 0.8);
+}
+.ub-gr-jar { display: grid; gap: 12px; color: var(--ink); }
+.ub-gr-jar__arch {
+  position: relative;
+  display: block;
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  border: 1px solid rgb(242 225 76 / 0.35);
+  border-radius: 999px 999px 10px 10px;
+  background: var(--surface);
+}
+.ub-gr-jar__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
+.ub-gr-jar:hover .ub-gr-jar__arch img { transform: scale(1.05); }
+.ub-gr-jar__arch .ub-gr-off { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); }
+.ub-gr-jar__label { display: grid; justify-items: center; gap: 4px; text-align: center; }
+.ub-gr-jar__label small { color: var(--gr-acid); font: 700 11px/14px var(--ub-font-body); letter-spacing: 0.25em; }
+.ub-gr-jar__name { font: 600 16px/21px var(--ub-font-body); }
+
+/* ---------- Cercle de sort ---------- */
+.ub-gr-spell {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  place-items: center;
+  min-height: 560px;
+  overflow: hidden;
+  padding: var(--space-12) var(--space-6);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: radial-gradient(50% 60% at 50% 50%, #221d0c, var(--gr-night) 80%);
+  text-align: center;
+}
+.ub-gr-spell__ring { position: absolute; z-index: -1; width: min(640px, 110%); aspect-ratio: 1; fill: none; stroke: rgb(242 225 76 / 0.2); stroke-width: 1; }
+.ub-gr-spell__ring text { fill: rgb(242 225 76 / 0.45); stroke: none; font-size: 18px; letter-spacing: 6px; }
+@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
+  .ub-gr-spell__ring { animation: ub-gr-turn 90s linear infinite; }
+  @keyframes ub-gr-turn { to { transform: rotate(360deg); } }
+}
+.ub-gr-spell__text { display: grid; justify-items: center; gap: 14px; max-width: 560px; }
+.ub-gr-spell__cd .ub-countdown__c { border: 1px solid rgb(242 225 76 / 0.4); background: rgb(11 10 12 / 0.7); color: var(--gr-acid); box-shadow: none; }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 1024px) {
+  .ub-gr-shelf { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 900px) {
+  .ub-gr-hero { min-height: 560px; }
+  .ub-gr-hero__foot { grid-template-columns: 1fr; }
+  .ub-gr-actions { justify-content: flex-start; }
+  .ub-gr-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+  .ub-gr-deck > li:nth-child(1), .ub-gr-deck > li:nth-child(3) { transform: none; }
+  .ub-gr-card__name { font-size: 14px; line-height: 18px; }
+  .ub-gr-card__hint { display: none; }
+}
+@media (max-width: 600px) {
+  .ub-gr-title__line { font-size: 48px; }
+  .ub-gr-shelf { grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 44px; }
+  .ub-gr-spell { min-height: 460px; }
+  /* Tirage sur mobile : les cartes défilent, touchées = retournées */
+  .ub-gr-deck { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; justify-content: flex-start; }
+  .ub-gr-deck > li { flex: 0 0 70%; scroll-snap-align: center; }
+}

package/templates/storefront/src/styles/ub/motion.css

@@ -0,0 +1,104 @@
+/* Animations desktop uniquement (écran ≥ 1024 px, souris, animations autorisées). Le mobile n'est pas concerné :
+   toutes les règles sont dans ce media query, ou dépendent de html.ub-motion (ajouté par fx-runtime, jamais sur mobile).
+   Uniquement transform / opacity : pas de recalcul de mise en page. */
+
+/* Bouton « surprise » du hero : desktop seulement */
+.ub-surprise { display: none; }
+
+@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  /* ---------- Transition entre les pages (le contenu de chaque page est remonté par app/(main)/template.tsx) ---------- */
+  .ub-page { animation: ub-page-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
+  @keyframes ub-page-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
+  /* Voile court aux couleurs de l'événement, au-dessus du contenu qui arrive */
+  .ub-page::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: 70;
+    pointer-events: none;
+    opacity: 0;
+    animation: ub-veil 0.45s ease-out;
+  }
+  @keyframes ub-veil { from { opacity: 1; } }
+  html:not([data-event]) .ub-page::before,
+  html[data-event="black-friday"] .ub-page::before,
+  html[data-event="thanksgiving"] .ub-page::before,
+  html[data-event="cyber-monday"] .ub-page::before { display: none; }
+  html[data-event="halloween"] .ub-page::before { background: radial-gradient(circle at 50% 40%, transparent 0%, rgb(0 0 0 / 0.85) 70%); }
+  html[data-event="noel"] .ub-page::before { background: rgb(255 250 240 / 0.55); animation-duration: 0.5s; }
+  html[data-event="nouvel-an"] .ub-page::before { background: linear-gradient(100deg, transparent 30%, rgb(232 199 102 / 0.35) 50%, transparent 70%); background-size: 250% 100%; animation: ub-veil-shine 0.55s ease-out; }
+  @keyframes ub-veil-shine { from { opacity: 1; background-position: 100% 0; } to { opacity: 0; background-position: 0 0; } }
+
+  /* ---------- Apparition au scroll (classes posées par fx-runtime, retirées à la fin) ---------- */
+  html.ub-motion .ub-rv {
+    opacity: 0;
+    transform: translate3d(0, 26px, 0);
+    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
+    transition-delay: calc(var(--rv-i, 0) * 60ms);
+  }
+  html.ub-motion .ub-rv.is-in { opacity: 1; transform: none; }
+
+  /* ---------- Hero : entrée du titre, du texte puis des boutons ---------- */
+  :is(.ub-hero, .ub-hv-hero, .ub-gl-hero, .ub-cn-hero, .ub-al-hero, .ub-tc-hero, .ub-gr-hero) :is(h1, .ub-hero__sub, .ub-hv-sub, .ub-gl-sub, .ub-al-sub, .ub-tc-sub, .ub-gr-sub, .ub-cn-panel__text) {
+    animation: ub-hero-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+  :is(.ub-hero, .ub-hv-hero, .ub-gl-hero, .ub-cn-hero, .ub-al-hero, .ub-tc-hero, .ub-gr-hero) :is(p, .ub-countdown) { animation: ub-hero-in 0.8s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+  :is(.ub-hero, .ub-hv-hero, .ub-gl-hero, .ub-cn-hero, .ub-al-hero, .ub-tc-hero, .ub-gr-hero) :is(a, button) { animation: ub-hero-in 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+  @keyframes ub-hero-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
+  /* Fond du hero : très lente respiration */
+  :is(.ub-hv-hero__bg, .ub-tc-hero__cover img, .ub-gr-hero__bg) { animation: ub-drift 22s ease-in-out infinite alternate; }
+  @keyframes ub-drift { to { transform: scale(1.05) translate3d(-1%, -1%, 0); } }
+
+  /* ---------- Cartes produits : survol ---------- */
+  .ub-card { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, border-color 0.3s; }
+  .ub-card:hover { transform: translateY(-4px); }
+  .ub-card__media { overflow: hidden; }
+  .ub-card__media img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
+  .ub-card:hover .ub-card__media img { transform: scale(1.05); }
+
+  /* Rangées horizontales : défilement doux (auto-slide) */
+  .ub-page :is(ul, ol) { scroll-behavior: smooth; }
+
+  /* ---------- Bouton surprise ---------- */
+  .ub-surprise {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 48px;
+    padding: 0 20px;
+    border: 1px dashed currentColor;
+    border-radius: 999px;
+    background: transparent;
+    color: inherit;
+    font: 600 14px/18px var(--ub-font-body);
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    transition: transform 0.2s, background 0.2s;
+  }
+  .ub-surprise:hover { transform: translateY(-2px) rotate(-1deg); background: rgb(255 255 255 / 0.08); }
+  .ub-surprise span { display: inline-block; animation: ub-twinkle 1.6s ease-in-out infinite; }
+  @keyframes ub-twinkle { 50% { transform: scale(1.35) rotate(20deg); opacity: 0.7; } }
+
+  /* ---------- Particules ---------- */
+  .ub-fx-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
+  .ub-fx-burst { position: fixed; inset: 0; z-index: 80; width: 100vw; height: 100vh; pointer-events: none; }
+
+  /* Chauve-souris (Halloween) : traverse l'écran en ondulant, ailes qui battent */
+  .ub-bat {
+    position: fixed;
+    top: var(--y);
+    left: 0;
+    z-index: 75;
+    width: var(--s);
+    height: calc(var(--s) / 2);
+    color: #0b0a0c;
+    filter: drop-shadow(0 0 6px rgb(255 122 26 / 0.35));
+    pointer-events: none;
+    animation: ub-bat-fly var(--d) linear var(--delay) both;
+  }
+  .ub-bat > span { display: block; width: 100%; height: 100%; animation: ub-bat-flap 0.22s ease-in-out infinite alternate; }
+  .ub-bat--rtl { animation-name: ub-bat-fly-rtl; }
+  @keyframes ub-bat-fly { from { transform: translate3d(-10vw, 0, 0); } 50% { transform: translate3d(50vw, var(--dy), 0); } to { transform: translate3d(110vw, calc(var(--dy) * -0.5), 0); } }
+  @keyframes ub-bat-fly-rtl { from { transform: translate3d(110vw, 0, 0); } 50% { transform: translate3d(50vw, var(--dy), 0); } to { transform: translate3d(-10vw, calc(var(--dy) * -0.5), 0); } }
+  @keyframes ub-bat-flap { to { transform: scaleY(0.45); } }
+}

package/templates/storefront/src/styles/ub/tech.css

@@ -24,7 +24,7 @@
   --ink: #0b0b0f; --ink-muted: #5f616c; --border: #e4e4ea;
   --primary: #0b0b0f; --on-primary: #ffffff; --accent: #5b3df5; --on-accent: #ffffff;
   --sale: #e11d48; --star: #f59e0b; --success: #15803d;
-  --hero-bg: #ececec; --hero-ink: #0b0b0f; --hero-muted: #4d4f59;
+  --hero-bg: #ffffff; --hero-ink: #0b0b0f; --hero-muted: #4d4f59;
   --band-bg: #0b0b0f; --band-ink: #ffffff; --bubble-bg: #0b0b0f; --bubble-ink: #ffffff;
   --topbar-bg: #0b0b0f; --topbar-ink: #ffffff; --focus: #5b3df5;
   --shadow-card: 0 14px 34px -22px rgb(11 11 15 / 0.35);
@@ -44,7 +44,7 @@
 [data-variant="cyber-monday-2"] .ub-nav__cta { background: var(--ink); color: #fff; }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-footwrap { --foot-bg: #120b24; --foot-ink: var(--ink); --cta-bg: var(--primary); --cta-ink: #ffffff; }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-footwrap .ub-footer { border: 1px solid var(--border); }
-[data-variant="cyber-monday-2"] .ub-footwrap { --foot-bg: #0b0b0f; --foot-ink: #f4f4f6; --cta-bg: #ececec; --cta-ink: #0b0b0f; }
+[data-variant="cyber-monday-2"] .ub-footwrap { --foot-bg: #0b0b0f; --foot-ink: #f4f4f6; --cta-bg: #f1f1f3; --cta-ink: #0b0b0f; }
 
 /* Cartes produits du reste du site (boutique, recherche, produits liés) */
 [data-theme="cyber-monday"]:not([data-variant]) .ub-card { background: var(--tc-card); border: 1px solid var(--border); }
@@ -90,7 +90,23 @@
   transform: rotate(-24deg);
   pointer-events: none;
 }
-.ub-tc-hero__cover { display: none; }
+/* Cyber Monday 1 : le visuel fait partie du fond (comme Black Friday) : posé à droite sur toute la hauteur,
+   fondu dans le noir à gauche, en haut et en bas. Pas de cadre, pas d'ombre. */
+.ub-tc-hero[data-has-image] .ub-tc-hero__beam { display: none; }
+.ub-tc-hero__cover { position: absolute; inset: 0 0 0 34%; z-index: -1; }
+.ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: ub-tc-fadein 1.2s ease both; }
+.ub-tc-hero__cover::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, var(--hero-bg) 0%, rgb(5 3 11 / 0.55) 20%, transparent 45%),
+    linear-gradient(0deg, var(--hero-bg) 0%, transparent 18%),
+    linear-gradient(180deg, var(--hero-bg) 0%, transparent 12%);
+}
+.ub-tc-hero[data-has-image] .ub-tc-hero__side > img { display: none; }
+.ub-tc-hero[data-has-image] .ub-tc-hero__side { aspect-ratio: auto; align-self: end; }
+.ub-tc-hero[data-has-image] .ub-tc-badge { position: relative; left: auto; bottom: auto; justify-self: start; width: max-content; }
 .ub-tc-hero__in {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
@@ -335,12 +351,12 @@
 /* Le visuel couvre tout le hero ; un voile blanc à gauche garde le texte lisible */
 /* Fond du hero = gris béton clair du visuel : l'image posée à droite se fond dans toute la largeur */
 [data-variant="cyber-monday-2"] .ub-tc-hero__cover { display: block; position: absolute; inset: 0 0 0 30%; z-index: -1; }
-[data-variant="cyber-monday-2"] .ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; animation: ub-tc-zoom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+[data-variant="cyber-monday-2"] .ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: ub-tc-zoom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
 [data-variant="cyber-monday-2"] .ub-tc-hero__cover::after {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, var(--hero-bg) 0%, rgb(236 236 236 / 0.7) 18%, transparent 42%);
+  background: linear-gradient(90deg, var(--hero-bg) 0%, rgb(255 255 255 / 0.7) 16%, transparent 38%);
 }
 @keyframes ub-tc-zoom { from { transform: scale(1.06); opacity: 0; } }
 [data-variant="cyber-monday-2"] .ub-tc-hero__in { grid-template-columns: minmax(0, 620px); min-height: clamp(580px, 48vw, 760px); }
@@ -397,6 +413,10 @@
 @media (max-width: 900px) {
   .ub-tc-hero__in { grid-template-columns: 1fr; gap: var(--space-8); min-height: 0; padding-top: var(--space-8); }
   .ub-tc-hero__side { justify-self: center; width: min(100%, 440px); margin-right: 0; }
+  .ub-tc-hero__cover { inset: 38% 0 0 0; }
+  .ub-tc-hero__cover img { object-position: 60% 60%; }
+  .ub-tc-hero__cover::after { background: linear-gradient(180deg, var(--hero-bg) 0%, rgb(5 3 11 / 0.4) 35%, transparent 60%), linear-gradient(0deg, var(--hero-bg) 0%, transparent 20%); }
+  .ub-tc-hero[data-has-image] .ub-tc-hero__side { min-height: 300px; justify-self: stretch; width: 100%; }
   .ub-tc-badge { left: 12px; bottom: 16px; padding: 10px 16px; }
   .ub-tc-badge b { font-size: 32px; }
   /* Cyber Monday 2 mobile : visuel en haut, texte dessous sur fond blanc */

package/templates/storefront/themes/halloween-2/campaign.en.json

@@ -19,8 +19,8 @@
   },
   "promo": {
     "eyebrow": "Spell of the day",
-    "title": "Buy 2, get the 3rd half off",
-    "text": "Last-minute costume? Fast delivery before the 31st.",
+    "title": "Up to {discount} off before the cauldron runs dry",
+    "text": "Marked-down prices storewide until {endDate}, while stocks last.",
     "cta": "Cast the spell",
     "seal": "Until {endDate}"
   },

package/templates/storefront/themes/halloween-2/campaign.fr.json

@@ -19,8 +19,8 @@
   },
   "promo": {
     "eyebrow": "Sort du jour",
-    "title": "Achetez-en 2, le 3e à -50 %",
-    "text": "Déguisement de dernière minute ? Livraison rapide avant le 31.",
+    "title": "Jusqu'à -{discount} avant que le chaudron soit vide",
+    "text": "Prix barrés sur toute la boutique jusqu'au {endDate}, dans la limite des stocks.",
     "cta": "Lancer le sort",
     "seal": "Avant le {endDate}"
   },

package/templates/storefront/themes/halloween-2/theme.json

@@ -1,11 +1,11 @@
 {
   "id": "halloween-2",
-  "name": "Halloween · Potion",
-  "reference": "variante, mise en page black-friday",
+  "name": "Halloween · Grimoire",
+  "reference": "variante, accueil grimoire",
   "layout": "black-friday",
   "fonts": {
     "head": "oswald",
     "body": "inter"
   },
-  "home": "cinema"
+  "home": "grimoire"
 }