@salifbiaye/create-boutique 0.4.1 → 0.6.0

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/proxy.ts

@@ -45,7 +45,8 @@ export function proxy(request: NextRequest) {
   request.headers.set("content-security-policy", csp)
   request.headers.set("x-nonce", nonce)
 
-  const cacheCookie = `_medusa_cache_id_${process.env.BOUTIQUE}`
+  // Même nom que lib/data/cookies.ts (mode single : « site », commun à toutes les boutiques)
+  const cacheCookie = `_medusa_cache_id_${process.env.BOUTIQUE === "auto" ? "site" : process.env.BOUTIQUE}`
   const newCacheId = request.cookies.has(cacheCookie) ? null : crypto.randomUUID()
   if (newCacheId) {
     // Visible dès cette requête par les server components…

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,105 @@
+/* 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 */
+  /* Seulement les fonds qui couvrent tout le hero (un visuel posé sur une partie, fondu par un dégradé, laisserait voir son bord) */
+  :is(.ub-hv-hero__bg, .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);
@@ -37,14 +37,14 @@
 }
 
 /* ---------- En-tête et pied de page ---------- */
-[data-theme="cyber-monday"]:not([data-variant]) .ub-nav { background: rgb(11 7 22 / 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-nav { background: #0b0716; border-bottom: 1px solid var(--border); }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-search { background: var(--surface); border-color: var(--border); color: var(--ink); }
 [data-theme="cyber-monday"]:not([data-variant]) .ub-nav__cta { background: var(--primary); color: #fff; box-shadow: var(--tc-glow); }
-[data-variant="cyber-monday-2"] .ub-nav { background: rgb(255 255 255 / 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
+[data-variant="cyber-monday-2"] .ub-nav { background: #ffffff; border-bottom: 1px solid var(--border); }
 [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); }
@@ -93,7 +93,7 @@
 /* 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 { position: absolute; inset: 0 0 0 34%; z-index: -1; overflow: hidden; }
 .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: "";
@@ -351,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); }

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"
 }