@salifbiaye/create-boutique 0.5.0 → 0.7.0

package/templates/storefront/src/modules/ub/sunset-checklist.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { addToCart } from "@lib/data/cart"
+import { useLocale } from "@lib/boutique/i18n-client"
+import { useRouter } from "next/navigation"
+import { useMemo, useState, useTransition } from "react"
+import FadeImg from "./fade-img"
+
+export type ChecklistItem = {
+  id: string
+  handle: string
+  title: string
+  image?: string
+  /** Variante unique : ajout direct au panier ; sinon lien vers la fiche (taille, couleur à choisir) */
+  variantId?: string
+  price: number
+  currency: string
+  priceLabel: string
+}
+
+/**
+ * Checklist de vacances : le client coche ce qu'il emporte, le total se met à jour, puis « Tout ajouter au panier ».
+ * Les articles à options (taille, couleur) renvoient vers leur fiche. Les prix viennent de Medusa (aucun prix envoyé).
+ */
+export default function SunsetChecklist({ items, labels }: { items: ChecklistItem[]; labels: Record<"total" | "add" | "added" | "choose" | "empty", string> }) {
+  const locale = useLocale()
+  const router = useRouter()
+  const [checked, setChecked] = useState<Set<string>>(() => new Set(items.filter((i) => i.variantId).slice(0, 3).map((i) => i.id)))
+  const [done, setDone] = useState(false)
+  const [pending, start] = useTransition()
+
+  const total = useMemo(() => items.filter((i) => checked.has(i.id)).reduce((s, i) => s + i.price, 0), [checked, items])
+  const currency = items[0]?.currency ?? "eur"
+  const fmt = new Intl.NumberFormat(locale, { style: "currency", currency: currency.toUpperCase() })
+  const toggle = (id: string) => {
+    setDone(false)
+    setChecked((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+  const addAll = () =>
+    start(async () => {
+      for (const i of items) if (checked.has(i.id) && i.variantId) await addToCart({ variantId: i.variantId, quantity: 1 })
+      setDone(true)
+      router.refresh()
+    })
+
+  return (
+    <div className="ub-ss-list">
+      <ul>
+        {items.map((i) => (
+          <li key={i.id} className={checked.has(i.id) ? "is-on" : undefined}>
+            {i.variantId ? (
+              <label className="ub-ss-item">
+                <input type="checkbox" checked={checked.has(i.id)} onChange={() => toggle(i.id)} />
+                <span className="ub-ss-item__box" aria-hidden />
+                <span className="ub-ss-item__img">{i.image && <FadeImg src={i.image} alt="" />}</span>
+                <span className="ub-ss-item__name">{i.title}</span>
+                <span className="ub-ss-item__price">{i.priceLabel}</span>
+              </label>
+            ) : (
+              <a className="ub-ss-item" href={`/products/${i.handle}`}>
+                <span className="ub-ss-item__box ub-ss-item__box--link" aria-hidden>
+                  →
+                </span>
+                <span className="ub-ss-item__img">{i.image && <FadeImg src={i.image} alt="" />}</span>
+                <span className="ub-ss-item__name">
+                  {i.title} <small>{labels.choose}</small>
+                </span>
+                <span className="ub-ss-item__price">{i.priceLabel}</span>
+              </a>
+            )}
+          </li>
+        ))}
+      </ul>
+      <div className="ub-ss-list__foot">
+        <span>
+          {labels.total} <b>{fmt.format(total)}</b>
+        </span>
+        {done ? (
+          <a className="ub-ss-btn" href="/cart">
+            {labels.added}
+          </a>
+        ) : (
+          <button type="button" className="ub-ss-btn" onClick={addAll} disabled={pending || checked.size === 0}>
+            {checked.size === 0 ? labels.empty : labels.add}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,164 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { type P, discountLabel, heroImageOf, imageOf, priceOf, splitTitle } from "./home-kit"
+import { Icon } from "./icons"
+import SunsetChecklist, { type ChecklistItem } from "./sunset-checklist"
+
+/**
+ * Accueil « Sunset » (Summer 2, theme.json → "home": "sunset") : affiche de plage au coucher du soleil.
+ * Hero affiche (soleil, palmiers, vague), cartes postales (timbre = remise, cachet = date), checklist de vacances
+ * interactive (cocher → total → tout ajouter au panier), bande « coucher de soleil » avec compte à rebours. CSS : styles/ub/sunset.css.
+ */
+
+const Wave = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 1440 90" preserveAspectRatio="none" aria-hidden>
+    <path d="M0 40c120-30 240-30 360 0s240 30 360 0 240-30 360 0 240 30 360 0v50H0z" />
+  </svg>
+)
+
+export function SunsetHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-ss-hero">
+      <div className="ub-wrap ub-ss-hero__in">
+        <div className="ub-ss-hero__text">
+          {hero.eyebrow && <p className="ub-ss-kicker">{hero.eyebrow}</p>}
+          <h1 className="ub-ss-title">
+            {before && <span>{before}</span>}
+            {hl && <span className="ub-ss-title__hl">{hl}</span>}
+            {after && <span>{after}</span>}
+          </h1>
+          {hero.sub && <p className="ub-ss-sub">{hero.sub}</p>}
+          <div className="ub-ss-actions">
+            <Link href="/store" className="ub-ss-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <a href="#checklist" className="ub-ss-btn ub-ss-btn--ghost">
+                {hero.cta2}
+              </a>
+            )}
+          </div>
+        </div>
+        {/* Grande carte postale : le visuel entier (jamais recadré ni agrandi), la remise en autocollant */}
+        <figure className="ub-ss-poster">
+          <span className="ub-ss-poster__img">{image ? <FadeImg src={image} alt="" priority /> : <span className="ub-ph" />}</span>
+          {off && (
+            <p className="ub-ss-sticker" aria-hidden>
+              <small>{hero.bubble?.[0]}</small>
+              <b>{off}</b>
+            </p>
+          )}
+        </figure>
+      </div>
+      <Wave className="ub-ss-wave" />
+    </section>
+  )
+}
+
+/** Cartes postales : photo, timbre (remise), cachet (date de fin), nom et prix au dos. */
+export function SunsetPostcards({ products, title, campaign }: { products: P[]; title: string; campaign: Campaign }) {
+  const items = products.filter(imageOf).slice(0, 8)
+  if (!items.length) return null
+  const until = campaign.promo?.seal
+  return (
+    <section className="ub-ss-section">
+      <div className="ub-wrap">
+        <header className="ub-ss-head">
+          <p className="ub-ss-kicker">{t("sunset.postcardsKicker")}</p>
+          <h2 className="ub-ss-h2">{title}</h2>
+        </header>
+        <ul className="ub-ss-cards">
+          {items.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            return (
+              <li key={p.id} style={{ ["--tilt" as string]: `${[-2, 1.5, -1, 2][i % 4]}deg` }}>
+                <Link href={`/products/${p.handle}`} className="ub-ss-card">
+                  <span className="ub-ss-card__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  {onSale && price?.percentage_diff && (
+                    <span className="ub-ss-stamp">
+                      <b>-{price.percentage_diff}%</b>
+                    </span>
+                  )}
+                  {until && <span className="ub-ss-postmark">{until}</span>}
+                  <span className="ub-ss-card__back">
+                    <span className="ub-ss-card__name">{p.title}</span>
+                    {price && (
+                      <span className="ub-ss-card__price">
+                        <b>{price.calculated_price}</b>
+                        {onSale && <s>{price.original_price}</s>}
+                      </span>
+                    )}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Checklist de vacances (interactive, cf. sunset-checklist.tsx). */
+export function SunsetChecklistSection({ products }: { products: P[] }) {
+  const items: ChecklistItem[] = products
+    .filter(imageOf)
+    .slice(0, 7)
+    .flatMap((p) => {
+      const { price } = priceOf(p)
+      if (!price) return []
+      const single = (p.variants ?? []).length === 1 ? p.variants![0].id : undefined
+      return [{ id: p.id, handle: p.handle!, title: p.title, image: imageOf(p), variantId: single, price: price.calculated_price_number, currency: price.currency_code, priceLabel: price.calculated_price }]
+    })
+  if (items.length < 3) return null
+  return (
+    <section className="ub-ss-section ub-ss-check" id="checklist">
+      <div className="ub-wrap ub-ss-check__in">
+        <div className="ub-ss-check__text">
+          <p className="ub-ss-kicker">{t("sunset.checklistKicker")}</p>
+          <h2 className="ub-ss-h2">{t("sunset.checklist")}</h2>
+          <p className="ub-ss-lead">{t("sunset.checklistSub")}</p>
+        </div>
+        <SunsetChecklist
+          items={items}
+          labels={{ total: t("sunset.total"), add: t("sunset.addAll"), added: t("sunset.added"), choose: t("sunset.choose"), empty: t("sunset.empty") }}
+        />
+      </div>
+    </section>
+  )
+}
+
+/** Bande « coucher de soleil » : dégradé, soleil qui se couche, texte promo et compte à rebours. */
+export function SunsetBand({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  return (
+    <section className="ub-ss-band">
+      <span className="ub-ss-band__sun" aria-hidden />
+      <div className="ub-wrap ub-ss-band__in">
+        {promo?.eyebrow && <p className="ub-ss-kicker">{promo.eyebrow}</p>}
+        <h2 className="ub-ss-h2">{promo?.title ?? campaign.hero.title}</h2>
+        {promo?.text && <p className="ub-ss-lead">{promo.text}</p>}
+        {campaign.showCountdown !== false && (
+          <div className="ub-ss-cd">
+            <CampaignCountdown endsAt={campaign.endsAt} />
+          </div>
+        )}
+        <Link href="/store" className="ub-ss-btn">
+          {promo?.cta ?? campaign.hero.cta} <Icon name="arrowRight" />
+        </Link>
+      </div>
+      <Wave className="ub-ss-wave ub-ss-wave--sea" />
+    </section>
+  )
+}

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

@@ -39,7 +39,7 @@ export function TechHero({ campaign }: { campaign: Campaign }) {
       {/* Cyber Monday 2 : le visuel couvre tout le hero (masqué par le CSS en variante 1) */}
       {image && (
         <div className="ub-tc-hero__cover" aria-hidden>
-          <img src={image} alt="" fetchPriority="high" decoding="async" />
+          <FadeImg src={image} alt="" priority />
         </div>
       )}
       <div className="ub-wrap ub-tc-hero__in">
@@ -83,7 +83,7 @@ export function TechHero({ campaign }: { campaign: Campaign }) {
         </div>
         {/* Cyber Monday 1 : visuel sur le côté, cadre lumineux + pastille de remise */}
         <div className="ub-tc-hero__side">
-          {image ? <img src={image} alt={t("hero.photo")} fetchPriority="high" decoding="async" /> : <span className="ub-ph" />}
+          {image ? <FadeImg src={image} alt={t("hero.photo")} priority /> : <span className="ub-ph" />}
           {b2 && (
             <p className="ub-tc-badge">
               <small>{b1}</small>

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

@@ -0,0 +1,196 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
+import { type P, discountLabel, heroImageOf, imageOf, priceOf, splitTitle, spaced } from "./home-kit"
+import { Icon, type IconName } from "./icons"
+
+/**
+ * Accueil « Training » (Sport 2, theme.json → "home": "training") : salle de sport, sombre, accent citron vert.
+ * Hero (visuel à droite fondu dans le noir, mots de la campagne en lettres de tableau), les plus choisis juste sous le hero (classement),
+ * programme de la semaine (lundi → dimanche, un produit par jour), pack de départ (3 produits, total et économie),
+ * engagements. CSS : styles/ub/training.css.
+ */
+
+export function TrainingHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const words = (hero.eyebrow ?? "").split(/[·•|]/).map((w) => w.trim()).filter(Boolean)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-tr-hero">
+      {image && <HeroImage src={image} position="center 40%" className="ub-tr-hero__img" />}
+      <div className="ub-wrap ub-tr-hero__in">
+        <div className="ub-tr-hero__text">
+          {/* Les mots de la campagne, en lettres de tableau (comme le tableau du visuel) + la remise */}
+          <p className="ub-tr-words">
+            {words.map((w) => (
+              <span key={w}>{w}</span>
+            ))}
+            {off && <b>{off}</b>}
+          </p>
+          <h1 className="ub-tr-title">
+            {before} {hl && <span className="ub-tr-title__hl">{hl}</span>}{spaced(after)}
+          </h1>
+          {hero.sub && <p className="ub-tr-sub">{hero.sub}</p>}
+          <div className="ub-tr-actions">
+            <Link href="/store" className="ub-tr-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <a href="#programme" className="ub-tr-btn ub-tr-btn--ghost">
+                {hero.cta2}
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Les plus choisis : classement compact juste sous le hero (repère rapide pour décider). */
+export function TrainingTop({ products, title }: { products: P[]; title: string }) {
+  const items = products.filter(imageOf).slice(0, 4)
+  if (!items.length) return null
+  return (
+    <section className="ub-wrap ub-tr-top">
+      <h2 className="ub-tr-h3">{title}</h2>
+      <ol className="ub-tr-top__list">
+        {items.map((p, i) => {
+          const { price, onSale } = priceOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-tr-rank">
+                <span className="ub-tr-rank__n">#{i + 1}</span>
+                <span className="ub-tr-rank__img">
+                  <FadeImg src={imageOf(p)} alt="" />
+                </span>
+                <span className="ub-tr-rank__body">
+                  <b>{p.title}</b>
+                  {price && (
+                    <span className="ub-tr-price">
+                      {price.calculated_price}
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                </span>
+              </Link>
+            </li>
+          )
+        })}
+      </ol>
+    </section>
+  )
+}
+
+/** Programme de la semaine : 7 jours, un objectif et un produit par jour. */
+export function TrainingProgram({ products }: { products: P[] }) {
+  const items = products.filter(imageOf)
+  if (items.length < 4) return null
+  const days = Array.from({ length: 7 }, (_, i) => ({ day: t(`training.day${i + 1}`), focus: t(`training.focus${i + 1}`), p: items[i % items.length] }))
+  return (
+    <section className="ub-tr-section" id="programme">
+      <div className="ub-wrap">
+        <header className="ub-tr-head">
+          <p className="ub-tr-kicker">{t("training.programKicker")}</p>
+          <h2 className="ub-tr-h2">{t("training.program")}</h2>
+        </header>
+        <ol className="ub-tr-week">
+          {days.map(({ day, focus, p }, i) => (
+            <li key={day} className={i === 6 ? "is-rest" : undefined}>
+              <Link href={`/products/${p.handle}`} className="ub-tr-day">
+                <span className="ub-tr-day__d">{day}</span>
+                <span className="ub-tr-day__f">{focus}</span>
+                <span className="ub-tr-day__img">
+                  <FadeImg src={imageOf(p)} alt="" />
+                </span>
+                <span className="ub-tr-day__name">{p.title}</span>
+              </Link>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+/** Pack de départ : 3 produits additionnés, total et économie réelle (prix calculés par Medusa). */
+export function TrainingPack({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const pack = products.filter(imageOf).slice(0, 3)
+  if (pack.length < 3) return null
+  const prices = pack.map((p) => priceOf(p).price).filter((x): x is NonNullable<typeof x> => !!x)
+  const total = prices.reduce((s, x) => s + x.calculated_price_number, 0)
+  const before = prices.reduce((s, x) => s + (x.original_price_number ?? x.calculated_price_number), 0)
+  const { locale } = getBoutique()
+  const fmt = new Intl.NumberFormat(locale, { style: "currency", currency: (prices[0]?.currency_code ?? "eur").toUpperCase() })
+  const promo = campaign.promo
+  return (
+    <section className="ub-tr-section">
+      <div className="ub-wrap ub-tr-pack">
+        <div className="ub-tr-pack__text">
+          {promo?.eyebrow && <p className="ub-tr-kicker">{promo.eyebrow}</p>}
+          <h2 className="ub-tr-h2">{promo?.title ?? t("training.pack")}</h2>
+          {promo?.text && <p className="ub-tr-lead">{promo.text}</p>}
+          <p className="ub-tr-pack__total">
+            <span>{t("training.total")}</span>
+            <b>{fmt.format(total)}</b>
+            {before > total && <em>{t("training.saving", { amount: fmt.format(before - total) })}</em>}
+          </p>
+          {campaign.showCountdown !== false && (
+            <div className="ub-tr-cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </div>
+        <ul className="ub-tr-pack__items">
+          {pack.map((p) => {
+            const { price } = priceOf(p)
+            return (
+              <li key={p.id}>
+                <Link href={`/products/${p.handle}`} className="ub-tr-pack__item">
+                  <span className="ub-tr-pack__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  <span className="ub-tr-pack__name">{p.title}</span>
+                  {price && <span className="ub-tr-price">{price.calculated_price}</span>}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Engagements (confiance) : retours, livraison, paiement, qualité. */
+export function TrainingPromise({ freeShipping }: { freeShipping?: string }) {
+  const items: [IconName, string, string][] = [
+    ["returns", t("training.promise1"), t("training.promise1Sub")],
+    ["truck", t("trust.shipping"), freeShipping ? t("trust.shippingSub", { freeShipping }) : t("trust.shippingSubAll")],
+    ["lock", t("trust.secure"), t("trust.secureSub")],
+    ["shield", t("training.promise4"), t("training.promise4Sub")],
+  ]
+  return (
+    <section className="ub-wrap ub-tr-section">
+      <ul className="ub-tr-promise">
+        {items.map(([ic, a, b]) => (
+          <li key={a}>
+            <Icon name={ic} />
+            <span>
+              <b>{a}</b>
+              <small>{b}</small>
+            </span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

package/templates/storefront/src/proxy.ts

@@ -44,8 +44,11 @@ export function proxy(request: NextRequest) {
   // Next lit la CSP de la requête pour poser le nonce sur ses propres scripts.
   request.headers.set("content-security-policy", csp)
   request.headers.set("x-nonce", nonce)
+  // Chemin demandé : le layout laisse passer compte, suivi de commande et panier quand le site est fermé
+  request.headers.set("x-ub-path", request.nextUrl.pathname)
 
-  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/custom.css

@@ -0,0 +1,26 @@
+/*
+ * RETOUCHES DE CE PROJET : couleurs, polices, espacements, éléments masqués…
+ *
+ * MODE D'EMPLOI COMPLET : storefront/PERSONNALISER.md (plan du site page par page, classes, variables, exemples,
+ * ce que ce fichier permet ou non). Tenu à jour par create-boutique update.
+ *
+ * - Chargé en dernier : il l'emporte sur les thèmes.
+ * - Jamais remplacé par `create-boutique update` (le reste du code, si).
+ * - Images ou polices utilisées ici : dans public/custom/ (conservé aussi), puis url("/custom/mon-image.png").
+ * - Après modification : docker compose up -d --build
+ *
+ * CIBLER :
+ *   tout le projet ...................... directement (ex. .ub-tc-ticker { display: none; })
+ *   une boutique ........................ [data-boutique="<slug>"] … (sections plus bas, une par boutique)
+ *   toutes les boutiques d'un thème ..... [data-theme="halloween"] … (variante 2 : [data-variant="halloween-2"])
+ *   une page ............................ [data-page="product"] … (home, store, search, product, cart, checkout, account,
+ *                                         contact, privacy, terms…) ; en-tête d'une page : :root:has([data-page="home"]) .ub-nav
+ *   mobile seulement .................... @media (max-width: 600px) { … }
+ *   ordinateur seulement ................ @media (min-width: 1024px) { … }
+ *
+ * Couleurs du thème (variables) : --primary, --accent, --bg, --surface, --ink, --ink-muted, --border, --sale,
+ * --hero-bg, --hero-ink, --topbar-bg, --topbar-ink. Ex. : [data-boutique="yout-noel"] { --primary: #b91c1c; }
+ */
+
+/* ─────────── Tout le projet ─────────── */
+

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

@@ -33,7 +33,7 @@
   background:
     radial-gradient(60% 70% at 50% 40%, color-mix(in srgb, var(--al-red) 90%, #ff3b3b) 0%, var(--al-red) 45%, var(--al-red-dark) 100%);
 }
-.ub-al-hero[data-has-image] { background: var(--al-red-dark) var(--al-img) center / cover no-repeat; }
+.ub-al-hero[data-has-image] { background: var(--al-red-dark); } /* image : modules/ub/hero-image.tsx */
 .ub-al-hero[data-has-image]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 45%, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.55)); }
 /* Rideau (plis) à gauche quand il n'y a pas d'image */
 .ub-al-hero__curtain {

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

@@ -0,0 +1,120 @@
+/* Accueil « Arène » (Jeux 1) — modules/ub/arena.tsx. Clair, bleu roi + flamme (or → orange → rouge), coupes en biais
+   comme les éclats de l'image du hero. Le texte du hero se place dans la zone blanche à droite de l'image. */
+
+[data-variant="jeux"] {
+  --bg: #f5f7fc; --surface: #ffffff; --tint-1: #e7eeff; --tint-2: #fff1d6; --tint-3: #e3f4ff; --tint-4: #ffe6da;
+  --ink: #0b1a4a; --ink-muted: #56607f; --border: #dde3f0;
+  --primary: #1646d8; --on-primary: #ffffff; --accent: #ff7a1a; --on-accent: #1a0800;
+  --sale: #e8412b; --star: #ffb020; --success: #149e5f;
+  --hero-bg: #f7f7f7; --hero-ink: #0b1a4a; --hero-muted: #56607f;
+  --band-bg: #1646d8; --band-ink: #ffffff; --bubble-bg: #ffb020; --bubble-ink: #1a0800;
+  --topbar-bg: #0b1a4a; --topbar-ink: #ffffff; --focus: #1646d8;
+  --shadow-card: 0 18px 40px -26px rgb(11 26 74 / 0.45);
+  --ub-font-head: var(--font-sora); --ub-font-body: var(--font-inter);
+  --ub-head-weight: 800; --ub-head-case: none; --ub-head-track: -0.02em;
+  --ub-r-card: 14px; --ub-r-btn: 10px; --ub-r-tile: 14px; --ub-r-hero: 0px; --ub-r-media: 12px;
+  --ar-blue: #1646d8; --ar-navy: #0b1a4a; --ar-sky: #19a8f0;
+  --ar-flame: linear-gradient(100deg, #ffc93a 0%, #ff9a1f 45%, #f0512b 100%);
+  --ar-gold: #f2c14e; --ar-silver: #c3ccd8; --ar-bronze: #d08a4f;
+  --ar-cut: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
+  color-scheme: light;
+}
+[data-variant="jeux"] .ub-nav { background: rgb(255 255 255 / 0.94); border-bottom: 1px solid var(--border); }
+[data-variant="jeux"] .ub-nav__cta { background: var(--ar-blue); color: #fff; }
+[data-variant="jeux"] .ub-footwrap { --foot-bg: #0b1a4a; --foot-ink: #ffffff; --cta-bg: #ffb020; --cta-ink: #1a0800; }
+
+.ub-ar-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--ar-blue); font: 700 12px/16px var(--font-inter); letter-spacing: 0.24em; text-transform: uppercase; }
+.ub-ar-flame { width: 12px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--ar-flame); }
+.ub-ar-h2 { margin: 8px 0 0; font: 800 clamp(30px, 3.6vw, 50px) / 1.05 var(--font-sora); letter-spacing: -0.025em; color: var(--ar-navy); }
+.ub-ar-lead { max-width: 36em; margin: 10px 0 0; color: var(--ink-muted); font-size: 16px; line-height: 25px; }
+.ub-ar-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; background: var(--ar-blue); color: #fff; font: 700 15px/18px var(--font-sora); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); transition: background-color 0.2s, transform 0.2s; }
+.ub-ar-btn:hover { background: var(--ar-navy); transform: translateY(-2px); }
+.ub-ar-btn svg { width: 18px; height: 18px; }
+.ub-ar-btn--ghost { background: transparent; color: var(--ar-navy); box-shadow: inset 0 0 0 2px var(--ar-navy); clip-path: none; border-radius: 0; }
+.ub-ar-btn--ghost:hover { background: var(--ar-navy); color: #fff; }
+.ub-ar-price { display: inline-flex; align-items: baseline; gap: 8px; }
+.ub-ar-price b { font: 800 17px/1 var(--font-sora); color: var(--ar-navy); }
+.ub-ar-price s { color: var(--ink-muted); font-size: 13px; }
+.ub-ar-price em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--sale); }
+
+/* ---------- Hero : image à gauche (flamme), texte dans le blanc à droite ---------- */
+.ub-ar-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--ar-navy); }
+/* Éclats en biais dans le fond, comme ceux du visuel */
+.ub-ar-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
+  linear-gradient(115deg, transparent 58%, rgb(25 168 240 / 0.12) 58% 66%, transparent 66%),
+  linear-gradient(115deg, transparent 70%, rgb(22 70 216 / 0.10) 70% 80%, transparent 80%),
+  linear-gradient(115deg, transparent 84%, rgb(255 154 31 / 0.14) 84% 90%, transparent 90%); }
+.ub-ar-hero__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--space-12); min-height: clamp(600px, 48vw, 760px); padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.ub-ar-hero__text { display: grid; justify-items: start; gap: 20px; }
+/* Panneau : le visuel garde ses proportions (1280 × 918), coin coupé et liseré flamme */
+.ub-ar-poster { position: relative; margin: 0; padding: 10px; background: var(--ar-flame); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); box-shadow: 0 30px 60px -30px rgb(11 26 74 / 0.5); }
+.ub-ar-poster__img { display: block; aspect-ratio: 1280 / 918; overflow: hidden; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%); }
+.ub-ar-poster__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.ub-ar-title { margin: 0; font: 800 clamp(44px, 5.2vw, 86px) / 1 var(--font-sora); letter-spacing: -0.04em; text-wrap: balance; }
+.ub-ar-title__hl { background: var(--ar-flame); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.ub-ar-sub { max-width: 30em; margin: 0; color: var(--hero-muted); font-size: 17px; line-height: 27px; }
+.ub-ar-actions { display: flex; flex-wrap: wrap; gap: 12px; }
+.ub-ar-chrono { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 8px; background: var(--ar-navy); color: #fff; clip-path: var(--ar-cut); }
+.ub-ar-chrono > * { margin: 0; padding: 14px 22px; }
+.ub-ar-chrono > * + * { border-left: 1px solid rgb(255 255 255 / 0.16); }
+.ub-ar-chrono small { display: block; color: #b9c3e6; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
+.ub-ar-chrono__off b { font: 800 40px/1 var(--font-sora); background: var(--ar-flame); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.ub-ar-chrono__time .ub-countdown { margin-top: 6px; }
+.ub-ar-chrono__time .ub-countdown__c { background: rgb(255 255 255 / 0.08); box-shadow: none; color: #fff; font-variant-numeric: tabular-nums; }
+
+/* ---------- Sections ---------- */
+.ub-ar-section { padding-top: var(--space-16); }
+.ub-arena > :last-child { padding-bottom: var(--space-16); }
+.ub-ar-head { display: grid; justify-items: center; gap: 4px; margin-bottom: var(--space-8); text-align: center; }
+.ub-ar-head--row { display: flex; justify-content: space-between; align-items: end; text-align: left; }
+.ub-ar-more { display: inline-flex; align-items: center; gap: 8px; color: var(--ar-blue); font-weight: 700; }
+.ub-ar-more svg { width: 16px; height: 16px; }
+
+/* Podium */
+.ub-ar-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
+.ub-ar-step { display: grid; justify-items: center; gap: 10px; color: var(--ink); text-align: center; }
+.ub-ar-step__img { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); clip-path: var(--ar-cut); transition: transform 0.25s; }
+.ub-ar-step:hover .ub-ar-step__img { transform: translateY(-6px); }
+.ub-ar-step__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-ar-step__name { max-width: 22ch; font-weight: 600; font-size: 15px; line-height: 20px; }
+.ub-ar-step__block { display: grid; justify-items: center; align-content: start; gap: 6px; width: 100%; padding-top: 18px; background: linear-gradient(180deg, var(--ar-blue), var(--ar-navy)); color: #fff; border-top: 5px solid var(--m); }
+.ub-ar-step__block small { color: #c9d3f5; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
+.ub-ar-medal { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9 0 12%, transparent 40%), var(--m); color: #1a1000; font: 800 20px/1 var(--font-sora); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.15); }
+.is-gold { --m: var(--ar-gold); } .is-gold .ub-ar-step__block { height: 150px; }
+.is-silver { --m: var(--ar-silver); } .is-silver .ub-ar-step__block { height: 110px; }
+.is-bronze { --m: var(--ar-bronze); } .is-bronze .ub-ar-step__block { height: 80px; }
+
+/* Couloirs de course (piste bleue, lignes blanches) */
+.ub-ar-lanes { display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--ar-blue); clip-path: var(--ar-cut); }
+.ub-ar-lanes li + li { border-top: 2px solid rgb(255 255 255 / 0.75); }
+.ub-ar-lane { display: grid; grid-template-columns: 44px 64px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 20px; color: #fff; transition: background-color 0.2s; }
+.ub-ar-lane:hover { background-color: rgb(255 255 255 / 0.08); }
+.ub-ar-lane__n { display: grid; place-items: center; width: 36px; height: 36px; background: #fff; color: var(--ar-blue); font: 800 17px/1 var(--font-sora); }
+.ub-ar-lane__img { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; background: rgb(255 255 255 / 0.15); }
+.ub-ar-lane__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-ar-lane__name { font-weight: 600; font-size: 15px; line-height: 20px; }
+.ub-ar-lane__track { position: relative; height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.18); }
+.ub-ar-lane__track i { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: inherit; background: var(--ar-flame); }
+.ub-ar-lane .ub-ar-price b { color: #fff; }
+.ub-ar-lane .ub-ar-price em { color: #ffc93a; }
+
+/* Record */
+.ub-ar-record { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); overflow: hidden; padding: clamp(28px, 4vw, 56px); padding-left: calc(clamp(28px, 4vw, 56px) + 34px); background: linear-gradient(120deg, #fff 55%, #fff4e0); border: 1px solid var(--border); clip-path: var(--ar-cut); }
+.ub-ar-record__finish { position: absolute; inset: 0 auto 0 0; width: 22px; background: repeating-conic-gradient(var(--ar-navy) 0 25%, #fff 0 50%) 0 0 / 11px 11px; }
+
+@media (max-width: 900px) {
+  .ub-ar-hero .ub-ar-hero__in { grid-template-columns: 1fr; gap: var(--space-8); min-height: 0; padding-top: 40px; padding-bottom: 40px; }
+  .ub-ar-lane { grid-template-columns: 36px 56px minmax(0, 1fr) auto; }
+  .ub-ar-lane__track { display: none; }
+}
+@media (max-width: 600px) {
+  .ub-ar-title { font-size: 42px; }
+  .ub-ar-podium { gap: 8px; }
+  .ub-ar-step__name { font-size: 13px; line-height: 17px; }
+  .ub-ar-price { flex-direction: column; gap: 2px; align-items: center; }
+  .is-gold .ub-ar-step__block { height: 110px; } .is-silver .ub-ar-step__block { height: 84px; } .is-bronze .ub-ar-step__block { height: 64px; }
+  .ub-ar-medal { width: 36px; height: 36px; font-size: 16px; }
+  .ub-ar-lane { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; }
+  .ub-ar-lane__n { display: none; }
+  .ub-ar-head--row { flex-direction: column; align-items: start; }
+}