@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/proxy.ts

@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from "next/server"
+
+/**
+ * Deux rôles, sans aucune logique de pays, de langue ni de redirection
+ * (la région, la langue et la devise sont fixées par l'instance) :
+ * 1. en-têtes de sécurité, dont une CSP avec nonce (Next l'applique à ses scripts) ;
+ * 2. identifiant de cache du visiteur (`_medusa_cache_id_<slug>`), qui nomme les
+ *    tags de cache (panier, client…) que les server actions expirent.
+ */
+
+const isDev = process.env.NODE_ENV === "development"
+
+function origin(url?: string) {
+  try {
+    return url ? new URL(url).origin : ""
+  } catch {
+    return ""
+  }
+}
+
+function contentSecurityPolicy(nonce: string) {
+  // Images produits : stockage du projet (S3_FILE_URL) ; à défaut, toute source http(s).
+  const files = origin(process.env.S3_FILE_URL) || "http: https:"
+
+  return [
+    "default-src 'self'",
+    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https://js.stripe.com${isDev ? " 'unsafe-eval'" : ""}`,
+    "style-src 'self' 'unsafe-inline'",
+    `img-src 'self' data: blob: ${files} https://*.stripe.com`,
+    "font-src 'self'",
+    `connect-src 'self' https://api.stripe.com https://m.stripe.network https://*.stripe.com${isDev ? " ws:" : ""}`,
+    "frame-src https://js.stripe.com https://hooks.stripe.com",
+    "frame-ancestors 'none'",
+    "form-action 'self'",
+    "base-uri 'self'",
+    "object-src 'none'",
+  ].join("; ")
+}
+
+export function proxy(request: NextRequest) {
+  const nonce = Buffer.from(crypto.randomUUID()).toString("base64")
+  const csp = contentSecurityPolicy(nonce)
+
+  // 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)
+
+  const cacheCookie = `_medusa_cache_id_${process.env.BOUTIQUE}`
+  const newCacheId = request.cookies.has(cacheCookie) ? null : crypto.randomUUID()
+  if (newCacheId) {
+    // Visible dès cette requête par les server components…
+    request.cookies.set(cacheCookie, newCacheId)
+  }
+
+  const response = NextResponse.next({ request: { headers: request.headers } })
+
+  if (newCacheId) {
+    // …et gardé par le navigateur pour les suivantes.
+    response.cookies.set(cacheCookie, newCacheId, {
+      maxAge: 60 * 60 * 24,
+      httpOnly: true,
+      sameSite: "strict",
+      secure: process.env.NODE_ENV === "production",
+    })
+  }
+
+  response.headers.set("Content-Security-Policy", csp)
+  response.headers.set("X-Frame-Options", "DENY")
+  response.headers.set("X-Content-Type-Options", "nosniff")
+  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin")
+  response.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=(), payment=(self \"https://js.stripe.com\")")
+  if (request.headers.get("x-forwarded-proto") === "https" || request.nextUrl.protocol === "https:") {
+    response.headers.set("Strict-Transport-Security", "max-age=63072000; includeSubDomains")
+  }
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    {
+      source: "/((?!api|_next/static|_next/image|favicon.ico|.*\\..*).*)",
+      missing: [
+        { type: "header", key: "next-router-prefetch" },
+        { type: "header", key: "purpose", value: "prefetch" },
+      ],
+    },
+  ],
+}

package/templates/storefront/src/styles/globals.css

@@ -0,0 +1,98 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  input:focus ~ label,
+  input:not(:placeholder-shown) ~ label {
+    @apply -translate-y-2 text-xsmall-regular;
+  }
+
+  input:focus ~ label {
+    @apply left-0;
+  }
+
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+@layer components {
+  .content-container {
+    @apply max-w-[1440px] w-full mx-auto px-6;
+  }
+
+  .contrast-btn {
+    @apply px-4 py-2 border border-black rounded-full hover:bg-black hover:text-white transition-colors duration-200 ease-in;
+  }
+
+  .text-xsmall-regular {
+    @apply text-[10px] leading-4 font-normal;
+  }
+
+  .text-small-regular {
+    @apply text-xs leading-5 font-normal;
+  }
+
+  .text-small-semi {
+    @apply text-xs leading-5 font-semibold;
+  }
+
+  .text-base-regular {
+    @apply text-sm leading-6 font-normal;
+  }
+
+  .text-base-semi {
+    @apply text-sm leading-6 font-semibold;
+  }
+
+  .text-large-regular {
+    @apply text-base leading-6 font-normal;
+  }
+
+  .text-large-semi {
+    @apply text-base leading-6 font-semibold;
+  }
+
+  .text-xl-regular {
+    @apply text-2xl leading-[36px] font-normal;
+  }
+
+  .text-xl-semi {
+    @apply text-2xl leading-[36px] font-semibold;
+  }
+
+  .text-2xl-regular {
+    @apply text-[30px] leading-[48px] font-normal;
+  }
+
+  .text-2xl-semi {
+    @apply text-[30px] leading-[48px] font-semibold;
+  }
+
+  .text-3xl-regular {
+    @apply text-[32px] leading-[44px] font-normal;
+  }
+
+  .text-3xl-semi {
+    @apply text-[32px] leading-[44px] font-semibold;
+  }
+}

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

@@ -0,0 +1,372 @@
+/* COPIE de design/ par scripts/sync-design.mjs — ne pas modifier ici. */
+
+/* =====================================================================
+   Usine à Boutiques — composants
+   1. PRESETS DE THÈME : chaque campagne reprend une référence (police,
+      arrondis, forme des boutons, casse des titres, mise en page du hero).
+   2. COMPOSANTS : un seul markup, stylé par les tokens + le preset.
+   ===================================================================== */
+
+/* ---------- 1. Presets ---------- */
+:root,[data-theme="halloween"]{ /* Nexora, version sombre */
+  --ub-font-head:var(--font-space-grotesk);--ub-font-body:var(--font-inter);
+  --ub-head-weight:700;--ub-head-case:uppercase;--ub-head-track:-0.01em;
+  --ub-r-card:var(--radius-xl);--ub-r-btn:var(--radius-pill);--ub-r-tile:var(--radius-xl);--ub-r-hero:0px;--ub-r-media:var(--radius-xl);
+}
+[data-theme="thanksgiving"]{ /* NovaTrend */
+  --ub-font-head:var(--font-jakarta);--ub-font-body:var(--font-jakarta);
+  --ub-head-weight:800;--ub-head-case:none;--ub-head-track:-0.02em;
+  --ub-r-card:var(--radius-lg);--ub-r-btn:var(--radius-sm);--ub-r-tile:var(--radius-lg);--ub-r-hero:0px;--ub-r-media:var(--radius-lg);
+}
+[data-theme="black-friday"]{ /* Aeroflow + bloc Flash Sale NovaTrend */
+  --ub-font-head:var(--font-oswald);--ub-font-body:var(--font-inter);
+  --ub-head-weight:700;--ub-head-case:uppercase;--ub-head-track:0;
+  --ub-r-card:var(--radius-md);--ub-r-btn:var(--radius-pill);--ub-r-tile:var(--radius-md);--ub-r-hero:0px;--ub-r-media:var(--radius-md);
+}
+[data-theme="cyber-monday"]{ /* NovaTech */
+  --ub-font-head:var(--font-outfit);--ub-font-body:var(--font-outfit);
+  --ub-head-weight:600;--ub-head-case:none;--ub-head-track:-0.01em;
+  --ub-r-card:var(--radius-lg);--ub-r-btn:var(--radius-md);--ub-r-tile:var(--radius-lg);--ub-r-hero:0px;--ub-r-media:var(--radius-lg);
+}
+[data-theme="noel"]{ /* Crescendo */
+  --ub-font-head:var(--font-poppins);--ub-font-body:var(--font-poppins);
+  --ub-head-weight:700;--ub-head-case:none;--ub-head-track:-0.02em;
+  --ub-r-card:var(--radius-xl);--ub-r-btn:var(--radius-md);--ub-r-tile:var(--radius-xl);--ub-r-hero:var(--radius-2xl);--ub-r-media:var(--radius-xl);
+}
+[data-theme="nouvel-an"]{ /* Nexora, version claire */
+  --ub-font-head:var(--font-sora);--ub-font-body:var(--font-inter);
+  --ub-head-weight:600;--ub-head-case:uppercase;--ub-head-track:-0.01em;
+  --ub-r-card:var(--radius-xl);--ub-r-btn:var(--radius-pill);--ub-r-tile:var(--radius-xl);--ub-r-hero:0px;--ub-r-media:var(--radius-xl);
+}
+
+/* ---------- 2. Base ---------- */
+.ub{font-family:var(--ub-font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;line-height:24px}
+.ub *{box-sizing:border-box}
+:where(.ub) a{color:inherit;text-decoration:none}
+:where(.ub) h1,:where(.ub) h2,:where(.ub) h3,:where(.ub) p{margin:0}
+.ub :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
+.ub svg{flex:none}
+.ub-wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-6)}
+.ub-section{padding:var(--space-12) 0}
+.ub-head{font-family:var(--ub-font-head);font-weight:var(--ub-head-weight);text-transform:var(--ub-head-case);letter-spacing:var(--ub-head-track)}
+.ub-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
+.ub-sec-head h2{font-size:28px;line-height:34px}
+.ub-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
+.ub-more svg{width:16px;height:16px}
+
+/* Eyebrow : « NEXT-GEN GADGETS » (Nexora), puce « Special Offer » (NovaTech), « TRENDING NOW » (NovaTrend) */
+.ub-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
+.ub-eyebrow__dot{width:8px;height:8px;border-radius:var(--radius-pill);background:currentColor}
+[data-theme="cyber-monday"] .ub-eyebrow{letter-spacing:0;text-transform:none;font-size:13px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent)}
+[data-theme="noel"] .ub-eyebrow{letter-spacing:0;text-transform:none;font-size:13px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--tint-2);color:var(--accent)}
+[data-theme="halloween"] .ub-eyebrow,[data-theme="nouvel-an"] .ub-eyebrow{color:var(--accent)}
+[data-theme="black-friday"] .ub-eyebrow{color:var(--primary)}
+
+/* Placeholder photo (remplacé par les images produit Medusa) */
+.ub-ph{position:relative;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-muted)}
+.ub-ph::before{content:"";width:28px;height:28px;opacity:.5;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat}
+
+/* ---------- Button ---------- */
+.ub-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--ub-r-btn);font:600 15px/20px var(--ub-font-body);cursor:pointer;white-space:nowrap;text-decoration:none}
+.ub-btn svg{width:16px;height:16px}
+.ub-btn--primary{background:var(--primary);color:var(--on-primary)}
+.ub-btn--dark{background:var(--accent);color:var(--on-accent)}
+[data-theme="halloween"] .ub-btn--dark,[data-theme="nouvel-an"] .ub-btn--dark,[data-theme="cyber-monday"] .ub-btn--dark,[data-theme="noel"] .ub-btn--dark{background:var(--ink);color:var(--bg)}
+.ub-btn--ghost{background:transparent;color:var(--ink);border-color:var(--border)}
+.ub-btn--full{width:100%}
+.ub-btn--sm{height:40px;padding:0 16px;font-size:14px}
+/* Nexora : pastille ronde foncée avec flèche au bout du bouton */
+.ub-btn__arrow{display:none}
+[data-theme="halloween"] .ub-btn--primary,[data-theme="nouvel-an"] .ub-btn--primary{padding:0 6px 0 24px;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
+[data-theme="halloween"] .ub-btn--primary .ub-btn__arrow,[data-theme="nouvel-an"] .ub-btn--primary .ub-btn__arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-pill);background:var(--on-primary);color:var(--primary)}
+[data-theme="halloween"] .ub-btn--primary .ub-btn__icon,[data-theme="nouvel-an"] .ub-btn--primary .ub-btn__icon{display:none}
+/* Aeroflow : boutons en capitales */
+[data-theme="black-friday"] .ub-btn{text-transform:uppercase;letter-spacing:.04em}
+
+/* ---------- TopBar ---------- */
+.ub-topbar{background:var(--topbar-bg);color:var(--topbar-ink);font-size:13px;line-height:20px;font-weight:500}
+.ub-topbar .ub-wrap{display:flex;justify-content:center;gap:var(--space-8);padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
+.ub-topbar span{display:inline-flex;align-items:center;gap:8px}
+.ub-topbar svg{width:15px;height:15px}
+
+/* ---------- Nav ---------- */
+.ub-nav{background:var(--bg);border-bottom:1px solid var(--border)}
+.ub-nav .ub-wrap{display:flex;align-items:center;gap:var(--space-8);height:76px}
+.ub-logo{display:inline-flex;align-items:center;gap:10px;font:700 20px/24px var(--ub-font-head);letter-spacing:var(--ub-head-track);text-transform:var(--ub-head-case)}
+.ub-logo__mark{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--primary)}
+[data-theme="halloween"] .ub-logo__mark,[data-theme="nouvel-an"] .ub-logo__mark{background:var(--accent);border-radius:var(--radius-pill)}
+.ub-nav__links{display:flex;gap:var(--space-6);font-size:14px;font-weight:500;color:var(--ink);margin:0 auto}
+.ub-nav__links a[aria-current]{color:var(--primary);box-shadow:0 2px 0 var(--primary)}
+[data-theme="halloween"] .ub-nav__links a[aria-current],[data-theme="nouvel-an"] .ub-nav__links a[aria-current]{color:var(--ink);box-shadow:none;font-weight:700}
+[data-theme="nouvel-an"] .ub-nav__links a[aria-current]{color:var(--ink)}
+[data-theme="black-friday"] .ub-nav__links{text-transform:uppercase;letter-spacing:.04em;font-weight:600}
+[data-theme="black-friday"] .ub-nav__links a[aria-current]{color:var(--ink);box-shadow:0 2px 0 var(--primary)}
+.ub-search{display:none;align-items:center;justify-content:space-between;width:220px;height:40px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--ink-muted);font-size:13px}
+.ub-search svg{width:17px;height:17px;color:var(--ink)}
+[data-theme="cyber-monday"] .ub-search{display:flex}
+[data-theme="cyber-monday"] .ub-icon--search{display:none}
+.ub-nav__icons{display:flex;align-items:center;gap:6px}
+.ub-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);color:var(--ink);background:transparent;border:0}
+.ub-icon svg{width:21px;height:21px}
+.ub-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);font:700 11px/18px var(--ub-font-body);text-align:center}
+.ub-nav__cta{display:none}
+[data-theme="halloween"] .ub-nav__cta,[data-theme="nouvel-an"] .ub-nav__cta,[data-theme="noel"] .ub-nav__cta{display:inline-flex}
+[data-theme="noel"] .ub-nav__cta{height:40px;padding:0 18px;font-size:14px}
+[data-theme="halloween"] .ub-icon--fav,[data-theme="nouvel-an"] .ub-icon--fav,[data-theme="noel"] .ub-icon--fav,[data-theme="noel"] .ub-icon--user{display:none}
+
+/* ---------- Hero ---------- */
+.ub-hero{background:var(--hero-bg);color:var(--hero-ink);overflow:hidden}
+.ub-hero__in{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:var(--space-12);padding-top:var(--space-16);padding-bottom:var(--space-16)}
+.ub-hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
+.ub-hero__title{font-size:56px;line-height:60px}
+.ub-hero__title em{font-style:normal;color:var(--primary)}
+[data-theme="halloween"] .ub-hero__title em,[data-theme="nouvel-an"] .ub-hero__title em,[data-theme="noel"] .ub-hero__title em{color:var(--accent)}
+[data-theme="halloween"] .ub-hero__title,[data-theme="nouvel-an"] .ub-hero__title{font-size:68px;line-height:70px}
+.ub-hero__sub{max-width:420px;color:var(--hero-muted);font-size:16px;line-height:26px}
+.ub-hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}
+.ub-hero .ub-btn--ghost{color:var(--hero-ink);border-color:var(--border);background:var(--bg)}
+[data-theme="halloween"] .ub-hero .ub-btn--ghost,[data-theme="nouvel-an"] .ub-hero .ub-btn--ghost{display:none}
+.ub-hero__trust{display:none;gap:var(--space-4);list-style:none;margin:var(--space-4) 0 0;padding:10px 14px;border-radius:var(--radius-lg);background:rgba(255,255,255,.7)}
+.ub-hero__trust li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:18px;font-weight:500}
+.ub-hero__trust svg{width:22px;height:22px;color:var(--primary)}
+.ub-hero__trust small{display:block;color:var(--hero-muted);font-size:11px;font-weight:400}
+[data-theme="noel"] .ub-hero__trust{display:flex}
+.ub-hero__media{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center}
+.ub-hero__blob{position:absolute;width:380px;height:380px;border-radius:var(--radius-pill);background:var(--accent);opacity:.35}
+[data-theme="thanksgiving"] .ub-hero__blob{background:var(--primary);opacity:.9;border-radius:48% 52% 38% 62% / 55% 40% 60% 45%;width:340px;height:300px}
+[data-theme="cyber-monday"] .ub-hero__blob{background:var(--primary);opacity:.1}
+[data-theme="noel"] .ub-hero__blob{background:var(--bg);opacity:.9;width:420px;height:420px}
+[data-theme="nouvel-an"] .ub-hero__blob{opacity:.22;width:420px;height:420px}
+.ub-hero__photo{position:relative;width:74%;aspect-ratio:1/1;border-radius:var(--ub-r-media)}
+.ub-hero__photo.ub-ph{background:transparent;color:var(--hero-muted)}
+.ub-bubble{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:112px;border-radius:var(--radius-pill);background:var(--bubble-bg);color:var(--bubble-ink);box-shadow:var(--shadow-pop);font:500 13px/16px var(--ub-font-body);text-align:center;left:4%;bottom:10%}
+.ub-bubble b{font:700 30px/34px var(--ub-font-head)}
+[data-theme="cyber-monday"] .ub-bubble{left:auto;right:14%;top:6%;bottom:auto;width:96px;height:96px}
+[data-theme="cyber-monday"] .ub-bubble b{font-size:18px;line-height:22px}
+[data-theme="halloween"] .ub-bubble,[data-theme="nouvel-an"] .ub-bubble{display:none}
+/* Crescendo : hero dans un grand conteneur arrondi */
+[data-theme="noel"] .ub-hero{background:var(--bg);padding:var(--space-6) var(--space-6) 0}
+[data-theme="noel"] .ub-hero__in{background:var(--hero-bg);border-radius:var(--ub-r-hero);padding:var(--space-12)}
+/* Black Friday : hero noir centré, titre géant */
+[data-theme="black-friday"] .ub-hero__in{grid-template-columns:1fr;text-align:center;padding-top:88px;padding-bottom:88px}
+[data-theme="black-friday"] .ub-hero__text{align-items:center}
+[data-theme="black-friday"] .ub-hero__title{font-size:120px;line-height:112px}
+[data-theme="black-friday"] .ub-hero__title em{display:block;font-size:56px;line-height:64px}
+[data-theme="black-friday"] .ub-hero__sub{max-width:520px}
+[data-theme="black-friday"] .ub-hero__media{display:none}
+[data-theme="black-friday"] .ub-hero .ub-btn--ghost{background:transparent;color:var(--hero-ink);border-color:var(--hero-muted)}
+
+/* ---------- Countdown : cases (NovaTech « 16 Days », NovaTrend Flash Sale) ---------- */
+.ub-countdown{display:flex;gap:10px}
+.ub-countdown__c{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;height:62px;padding:0 6px;border-radius:var(--radius-md);background:var(--bg);color:var(--ink);box-shadow:var(--shadow-card)}
+.ub-countdown__c b{font:700 22px/26px var(--ub-font-head);font-variant-numeric:tabular-nums}
+.ub-countdown__c small{font-size:11px;line-height:14px;color:var(--ink-muted)}
+[data-theme="black-friday"] .ub-countdown__c{background:transparent;color:var(--hero-ink);border:1px solid var(--hero-muted);box-shadow:none}
+[data-theme="black-friday"] .ub-countdown__c small{color:var(--hero-muted)}
+[data-theme="halloween"] .ub-countdown__c{background:var(--surface);color:var(--ink);box-shadow:none;border:1px solid var(--border)}
+.ub-hero__cd{display:none}
+[data-theme="black-friday"] .ub-hero__cd,[data-theme="cyber-monday"] .ub-hero__cd,[data-theme="halloween"] .ub-hero__cd{display:flex}
+
+/* ---------- TrustBar ---------- */
+.ub-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);padding:var(--space-6) var(--space-8);border-radius:var(--ub-r-card);background:var(--surface);list-style:none;margin:0}
+.ub-trust li{display:flex;align-items:center;gap:14px}
+.ub-trust__ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--bg);color:var(--primary)}
+.ub-trust__ic svg{width:22px;height:22px}
+.ub-trust b{display:block;font-size:14px;line-height:20px}
+.ub-trust small{display:block;font-size:12px;line-height:18px;color:var(--ink-muted)}
+[data-theme="halloween"] .ub-trust,[data-theme="nouvel-an"] .ub-trust{background:var(--band-bg);color:var(--band-ink)}
+[data-theme="halloween"] .ub-trust small,[data-theme="nouvel-an"] .ub-trust small{color:var(--band-ink);opacity:.8}
+[data-theme="halloween"] .ub-trust__ic,[data-theme="nouvel-an"] .ub-trust__ic{background:transparent;color:var(--primary);border:1px solid rgba(255,255,255,.18)}
+[data-theme="black-friday"] .ub-trust b{text-transform:uppercase;letter-spacing:.04em}
+[data-theme="black-friday"] .ub-trust__ic{color:var(--ink)}
+
+/* ---------- Category tiles ---------- */
+.ub-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3)}
+.ub-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--ub-r-tile);background:var(--surface);border:1px solid var(--border);min-height:190px}
+.ub-tile__img{flex:1;min-height:130px}
+.ub-tile__txt{display:flex;flex-direction:column;padding:12px 14px}
+.ub-tile__name{font-weight:600;font-size:14px;line-height:20px}
+.ub-tile__meta{font-size:12px;line-height:16px;color:var(--ink-muted)}
+.ub-tile__ic{display:none}
+.ub-tile__cta{display:none;font-size:12px;font-weight:600;color:var(--primary)}
+/* NovaTech : petites tuiles blanches avec icône + « 24 items » */
+[data-theme="cyber-monday"] .ub-tile{background:var(--bg);box-shadow:var(--shadow-card);align-items:center;text-align:center;min-height:0;padding:22px 8px 14px}
+[data-theme="cyber-monday"] .ub-tile__img{display:none}
+[data-theme="cyber-monday"] .ub-tile__ic{display:flex;width:48px;height:48px;align-items:center;justify-content:center;color:var(--primary)}
+[data-theme="cyber-monday"] .ub-tile__ic svg{width:36px;height:36px}
+[data-theme="cyber-monday"] .ub-tile__txt{padding:8px 0 0;align-items:center}
+/* Crescendo : grandes tuiles pastel, icône en pastille, « Shop Now → », visuel en bas à droite */
+[data-theme="noel"] .ub-tiles{grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
+[data-theme="noel"] .ub-tile:nth-child(n+5){display:none}
+[data-theme="noel"] .ub-tile{border:0;background:var(--tile);min-height:230px;padding:20px}
+[data-theme="noel"] .ub-tile__txt{padding:0}
+[data-theme="noel"] .ub-tile__ic{display:flex;order:-1;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--bg);align-items:center;justify-content:center;color:var(--primary);margin-bottom:12px}
+[data-theme="noel"] .ub-tile__ic svg{width:22px;height:22px}
+[data-theme="noel"] .ub-tile__name{font-size:17px;line-height:24px}
+[data-theme="noel"] .ub-tile__cta{display:block;margin-top:8px}
+[data-theme="noel"] .ub-tile__img{position:absolute;right:14px;bottom:14px;width:44%;min-height:0;aspect-ratio:1;border-radius:var(--radius-pill);background:rgba(255,255,255,.65)}
+/* NovaTrend : tuiles photo, libellé + « Shop Now → » sur bandeau blanc */
+[data-theme="thanksgiving"] .ub-tile{border:0;min-height:210px}
+[data-theme="thanksgiving"] .ub-tile__txt{position:absolute;left:8px;right:8px;bottom:8px;background:var(--bg);border-radius:var(--radius-sm);padding:8px 10px}
+[data-theme="thanksgiving"] .ub-tile__meta{display:none}
+[data-theme="thanksgiving"] .ub-tile__cta{display:block;color:var(--ink-muted);font-weight:500}
+/* Black Friday : tuiles noires, libellé en capitales */
+[data-theme="black-friday"] .ub-tile{background:var(--ink);color:var(--bg);border:0}
+[data-theme="black-friday"] .ub-tile__img{background:rgba(255,255,255,.08);color:var(--hero-muted)}
+[data-theme="black-friday"] .ub-tile__name{text-transform:uppercase;letter-spacing:.04em;font-family:var(--ub-font-head);font-size:17px}
+[data-theme="black-friday"] .ub-tile__meta{color:var(--hero-muted)}
+
+/* ---------- Product card ---------- */
+.ub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
+.ub-card{position:relative;display:flex;flex-direction:column;border-radius:var(--ub-r-card);background:var(--surface);overflow:hidden}
+[data-theme="noel"] .ub-card,[data-theme="cyber-monday"] .ub-card{background:var(--bg);box-shadow:var(--shadow-card)}
+.ub-card__media{aspect-ratio:1/1}
+[data-theme="noel"] .ub-card__media,[data-theme="cyber-monday"] .ub-card__media{margin:12px 12px 0;border-radius:calc(var(--ub-r-card) - 8px)}
+.ub-badge{position:absolute;top:12px;left:12px;z-index:1;padding:3px 9px;border-radius:var(--radius-sm);font:700 11px/16px var(--ub-font-body);background:var(--ink);color:var(--bg)}
+.ub-badge--sale{background:var(--sale);color:var(--bg)}
+[data-theme="cyber-monday"] .ub-badge{left:auto;right:20px;top:20px;background:var(--primary);color:var(--on-primary)}
+[data-theme="noel"] .ub-badge{border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);top:22px;left:22px}
+[data-theme="noel"] .ub-badge--sale{background:var(--sale);color:var(--bg)}
+.ub-card__fav{position:absolute;top:10px;right:10px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--bg);border:0;color:var(--ink)}
+.ub-card__fav svg{width:16px;height:16px}
+[data-theme="cyber-monday"] .ub-card__fav,[data-theme="noel"] .ub-card__fav,[data-theme="halloween"] .ub-card__fav,[data-theme="nouvel-an"] .ub-card__fav{display:none}
+.ub-card__body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
+.ub-card__cat{display:none;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
+[data-theme="noel"] .ub-card__cat,[data-theme="black-friday"] .ub-card__cat{display:block}
+.ub-card__name{font:600 15px/22px var(--ub-font-body)}
+[data-theme="noel"] .ub-card__name{font-size:17px;line-height:24px}
+[data-theme="black-friday"] .ub-card__name{text-transform:uppercase;font-family:var(--ub-font-head);font-size:18px;letter-spacing:.02em}
+[data-theme="halloween"] .ub-card__name,[data-theme="nouvel-an"] .ub-card__name{font-weight:500;font-size:14px}
+.ub-rating{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--ink-muted)}
+.ub-rating__stars{color:var(--star);letter-spacing:1px;font-size:13px}
+[data-theme="halloween"] .ub-card .ub-rating,[data-theme="nouvel-an"] .ub-card .ub-rating{display:none}
+.ub-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
+.ub-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
+.ub-price__now{font:700 16px/22px var(--ub-font-body);color:var(--ink)}
+.ub-price__was{font-size:13px;color:var(--ink-muted);text-decoration:line-through}
+.ub-price--sale .ub-price__now{color:var(--sale)}
+.ub-card__cart{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-pill);border:0;background:var(--ink);color:var(--bg)}
+.ub-card__cart svg{width:17px;height:17px}
+.ub-card__cart .ub-arrow{display:none}
+[data-theme="noel"] .ub-card__cart{background:var(--tint-1);color:var(--primary);width:42px;height:42px}
+[data-theme="cyber-monday"] .ub-card__cart{background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-md)}
+[data-theme="halloween"] .ub-card__cart,[data-theme="nouvel-an"] .ub-card__cart{width:28px;height:28px;background:var(--primary);color:var(--on-primary)}
+[data-theme="halloween"] .ub-card__cart .ub-cart-ic,[data-theme="nouvel-an"] .ub-card__cart .ub-cart-ic{display:none}
+[data-theme="halloween"] .ub-card__cart .ub-arrow,[data-theme="nouvel-an"] .ub-card__cart .ub-arrow{display:block;width:14px;height:14px}
+[data-theme="black-friday"] .ub-card__cart{background:var(--primary);color:var(--on-primary)}
+
+/* ---------- Promo banner ---------- */
+.ub-promo{position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-12);border-radius:var(--ub-r-card);background:var(--band-bg);color:var(--band-ink);overflow:hidden;min-height:260px}
+.ub-promo__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
+.ub-promo h2{font-size:36px;line-height:42px}
+.ub-promo .ub-eyebrow{color:inherit;background:transparent;padding:0}
+[data-theme="cyber-monday"] .ub-promo .ub-eyebrow{background:var(--bg);color:var(--primary);padding:4px 10px}
+.ub-promo__media{height:220px;border-radius:var(--ub-r-media);background:rgba(255,255,255,.14);color:inherit}
+[data-theme="cyber-monday"] .ub-promo__media{background:rgba(74,43,214,.08)}
+.ub-promo .ub-btn--primary{background:var(--band-ink);color:var(--band-bg)}
+[data-theme="cyber-monday"] .ub-promo .ub-btn--primary{background:var(--primary);color:var(--on-primary)}
+[data-theme="halloween"] .ub-promo .ub-btn--primary,[data-theme="nouvel-an"] .ub-promo .ub-btn--primary{background:var(--primary);color:var(--on-primary)}
+[data-theme="black-friday"] .ub-promo .ub-countdown__c{border-color:var(--band-ink);color:var(--band-ink)}
+[data-theme="black-friday"] .ub-promo .ub-countdown__c small{color:var(--band-ink)}
+.ub-promo__seal{display:none;width:108px;height:108px;padding:12px;border-radius:var(--radius-pill);background:var(--bg);color:var(--primary);align-items:center;justify-content:center;text-align:center;font:600 15px/19px var(--ub-font-head)}
+[data-theme="noel"] .ub-promo{grid-template-columns:auto 1fr;padding:var(--space-6) var(--space-8);min-height:0}
+[data-theme="noel"] .ub-promo__media,[data-theme="noel"] .ub-promo .ub-countdown{display:none}
+[data-theme="noel"] .ub-promo__seal{display:flex}
+[data-theme="noel"] .ub-promo__text{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%}
+[data-theme="noel"] .ub-promo .ub-eyebrow{display:none}
+
+/* ---------- Product detail (Aeroflow) ---------- */
+.ub-pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start}
+.ub-gallery__main{aspect-ratio:1/1;border-radius:var(--ub-r-media)}
+.ub-gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-3)}
+.ub-gallery__thumbs .ub-ph{aspect-ratio:1/1;border-radius:var(--radius-md);border:2px solid transparent}
+.ub-gallery__thumbs .ub-ph[aria-current]{border-color:var(--ink)}
+.ub-pdp__info{display:flex;flex-direction:column;gap:var(--space-3)}
+.ub-pdp__title{font-size:40px;line-height:44px}
+.ub-pdp__subtitle{font-size:16px;color:var(--ink-muted)}
+.ub-pdp .ub-rating{display:flex;font-size:13px;color:var(--ink)}
+.ub-pdp__was{font-size:16px;color:var(--ink-muted);text-decoration:line-through;margin-top:var(--space-2)}
+.ub-pdp__price{display:flex;align-items:center;gap:12px}
+.ub-pdp__price b{font:700 36px/40px var(--ub-font-head);color:var(--sale)}
+.ub-save{padding:3px 10px;border-radius:var(--radius-sm);border:1px solid var(--success);color:var(--success);font-size:13px;font-weight:600}
+.ub-pdp__desc{color:var(--ink-muted);max-width:480px}
+.ub-pdp__buy{display:flex;flex-direction:column;gap:10px;margin-top:var(--space-2)}
+.ub-pdp__ship{text-align:center;font-size:13px;color:var(--ink-muted)}
+.ub-pdp__ship svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
+.ub-pdp__trust{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;border-radius:var(--radius-lg);background:var(--surface);font-size:13px;list-style:none;margin:var(--space-2) 0 0}
+.ub-pdp__trust li{display:flex;align-items:center;gap:8px}
+.ub-pdp__trust svg{width:18px;height:18px}
+.ub-options{display:flex;gap:8px;flex-wrap:wrap}
+.ub-opt{min-width:52px;height:40px;padding:0 14px;border-radius:var(--ub-r-btn);border:1px solid var(--border);background:var(--bg);color:var(--ink);font:500 14px/20px var(--ub-font-body)}
+.ub-opt[aria-pressed="true"]{border:2px solid var(--ink)}
+.ub-faq{border-top:1px solid var(--border)}
+.ub-faq details{border-bottom:1px solid var(--border)}
+.ub-faq summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;list-style:none;font-weight:500}
+.ub-faq summary::-webkit-details-marker{display:none}
+.ub-faq summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:6px}
+.ub-faq details[open] summary::after{transform:rotate(-135deg)}
+.ub-faq p{padding:0 0 14px;color:var(--ink-muted)}
+
+/* ---------- Checkout : paiement international (Stripe + PayPal) ---------- */
+.ub-pay{max-width:540px;display:flex;flex-direction:column;gap:var(--space-4)}
+.ub-pay h2{font-size:22px;line-height:28px}
+.ub-express{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
+.ub-express button{height:48px;border-radius:var(--radius-md);border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:600 15px/20px var(--ub-font-body);cursor:pointer}
+.ub-express button.ub-express--light{background:var(--bg);color:var(--ink)}
+.ub-divider{display:flex;align-items:center;gap:12px;color:var(--ink-muted);font-size:13px}
+.ub-divider::before,.ub-divider::after{content:"";flex:1;height:1px;background:var(--border)}
+.ub-methods{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
+.ub-method{border-bottom:1px solid var(--border)}
+.ub-method:last-child{border-bottom:0}
+.ub-method__row{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer}
+.ub-method__radio{width:18px;height:18px;border-radius:var(--radius-pill);border:1.5px solid var(--ink-muted)}
+.ub-method[aria-checked="true"] .ub-method__radio{border:6px solid var(--ink)}
+.ub-method[aria-checked="true"]{background:var(--surface)}
+.ub-method__name{font-weight:600;flex:1}
+.ub-method__tags{display:flex;gap:6px}
+.ub-tag{padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);font-size:11px;font-weight:700;color:var(--ink)}
+.ub-method__body{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px 46px}
+.ub-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
+.ub-field--full{grid-column:1/-1}
+.ub-input{height:44px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink-muted);font-weight:400}
+.ub-method__note{grid-column:1/-1;font-size:12px;color:var(--ink-muted)}
+
+/* ---------- Cart drawer ---------- */
+.ub-cart{width:400px;border-radius:var(--ub-r-card);background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow-pop);overflow:hidden}
+.ub-cart__head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
+.ub-cart__head h2{font-size:20px;line-height:28px}
+.ub-cart__ship{padding:14px 20px;font-size:13px;color:var(--ink-muted);border-bottom:1px solid var(--border)}
+.ub-bar{height:6px;border-radius:var(--radius-pill);background:var(--surface);margin-top:8px;overflow:hidden}
+.ub-bar i{display:block;height:100%;background:var(--primary)}
+.ub-line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border)}
+.ub-line .ub-ph{width:72px;height:72px;border-radius:var(--radius-md)}
+.ub-line__name{font-weight:600;font-size:14px;line-height:20px}
+.ub-line__meta{font-size:12px;color:var(--ink-muted)}
+.ub-qty{display:inline-flex;align-items:center;margin-top:8px;border:1px solid var(--border);border-radius:var(--ub-r-btn);height:32px}
+.ub-qty button{width:30px;height:30px;border:0;background:transparent;color:var(--ink)}
+.ub-qty span{min-width:22px;text-align:center;font-size:13px;font-weight:600}
+.ub-cart__foot{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
+.ub-cart__row{display:flex;justify-content:space-between;font-size:14px}
+.ub-cart__row b{font-size:18px}
+
+/* ---------- Footer ---------- */
+.ub-footer{margin-top:var(--space-12);background:var(--surface);border-top:1px solid var(--border)}
+[data-theme="halloween"] .ub-footer,[data-theme="nouvel-an"] .ub-footer{background:var(--band-bg);color:var(--band-ink);border:0}
+[data-theme="black-friday"] .ub-footer{background:var(--ink);color:var(--bg);border:0}
+.ub-footer__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--space-8);padding:var(--space-12) 0 var(--space-8)}
+.ub-footer p{opacity:.85;font-size:14px;margin-top:10px;max-width:280px}
+.ub-footer h4{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
+.ub-footer ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:30px;opacity:.85}
+.ub-footer__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0 28px;border-top:1px solid rgba(127,127,127,.25);font-size:13px;flex-wrap:wrap}
+.ub-pays{display:flex;gap:6px;flex-wrap:wrap}
+.ub-pays span{padding:4px 9px;border-radius:var(--radius-sm);background:#ffffff;color:#111827;border:1px solid rgba(127,127,127,.3);font-size:11px;font-weight:700}
+
+@media (max-width:900px){
+ .ub-hero__in,.ub-pdp,.ub-promo{grid-template-columns:1fr}
+ .ub-hero__title,[data-theme="halloween"] .ub-hero__title,[data-theme="nouvel-an"] .ub-hero__title{font-size:40px;line-height:44px}
+ [data-theme="black-friday"] .ub-hero__title{font-size:64px;line-height:64px}
+ .ub-grid,.ub-tiles,[data-theme="noel"] .ub-tiles,[data-theme="cyber-monday"] .ub-tiles,.ub-trust{grid-template-columns:repeat(2,1fr)}
+ .ub-nav__links,.ub-search{display:none!important}
+ .ub-footer__top{grid-template-columns:1fr 1fr}
+ .ub-cart{width:100%}
+}

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

@@ -0,0 +1,17 @@
+/* Relie les polices next/font (--nf-*) aux variables du design (--font-*, définies dans tokens.css).
+   :root:root l'emporte sur le :root de tokens.css sans modifier ce fichier. */
+:root:root {
+  --font-inter: var(--nf-inter, Inter), system-ui, sans-serif;
+  --font-jakarta: var(--nf-jakarta, "Plus Jakarta Sans"), var(--nf-inter, Inter), sans-serif;
+  --font-oswald: var(--nf-oswald, Oswald), "Arial Narrow", sans-serif;
+  --font-outfit: var(--nf-outfit, Outfit), var(--nf-inter, Inter), sans-serif;
+  --font-poppins: var(--nf-poppins, Poppins), var(--nf-inter, Inter), sans-serif;
+  --font-sora: var(--nf-sora, Sora), var(--nf-inter, Inter), sans-serif;
+  --font-space-grotesk: var(--nf-space-grotesk, "Space Grotesk"), var(--nf-inter, Inter), sans-serif;
+}
+
+/* Le corps de page prend le fond du thème (le starter force du blanc). */
+html,
+body {
+  background: var(--bg);
+}