@salifbiaye/create-boutique 0.2.2 → 0.3.0

package/package.json

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

package/templates/storefront/locales/en.json

@@ -303,5 +303,10 @@
   "account.profileDone": "Profile completed",
   "account.completeProfile": "Complete your profile (phone, billing address) to check out faster.",
   "nav.menu": "Menu",
-  "cart.variant": "Variant:"
+  "cart.variant": "Variant:",
+  "checkout.testMode.title": "Demo store: no real payment",
+  "checkout.testMode.text": "Card payments are in test mode: you will not be charged. Use the test card below with any future expiry date (e.g. 12/34) and any CVC (e.g. 123).",
+  "harvest.gift": "Gift wrapping",
+  "harvest.giftSub": "Free on request",
+  "harvest.strip": "The season in pictures"
 }

package/templates/storefront/locales/fr.json

@@ -303,5 +303,10 @@
   "account.profileDone": "Profil complété",
   "account.completeProfile": "Complétez votre profil (téléphone, adresse de facturation) pour commander plus vite.",
   "nav.menu": "Menu",
-  "cart.variant": "Variante :"
+  "cart.variant": "Variante :",
+  "checkout.testMode.title": "Boutique de démonstration : aucun paiement réel",
+  "checkout.testMode.text": "Le paiement par carte est en mode test : aucune somme ne sera débitée. Utilisez la carte de test ci-dessous, avec une date d'expiration future (ex. 12/34) et n'importe quel code (ex. 123).",
+  "harvest.gift": "Emballage cadeau",
+  "harvest.giftSub": "Offert sur demande",
+  "harvest.strip": "La saison en images"
 }

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

@@ -10,6 +10,9 @@ import CampaignEnded from "@modules/ub/campaign-ended"
 import CategoryTiles from "@modules/ub/category-tiles"
 import { ProductGrid } from "@modules/ub/product-card"
 import { DealsFold, DealsSpotlight } from "@modules/ub/showcase"
+import { HarvestBanner, HarvestGrid, HarvestHero, HarvestServices, HarvestStrip } from "@modules/ub/harvest"
+import { getBoutique } from "@lib/boutique/config"
+import type { Campaign } from "@lib/boutique/campaign"
 
 async function Categories({ title }: { title: string }) {
   const categories = await listCategories().catch(() => [])
@@ -59,6 +62,21 @@ async function Showcase({ part, eyebrow }: { part: "fold" | "spotlight"; eyebrow
   )
 }
 
+/** Accueil « Harvest » (thèmes Thanksgiving) : autre structure que l'accueil standard. */
+async function HarvestProducts({ campaign }: { campaign: Campaign }) {
+  const {
+    response: { products },
+  } = await listProducts({ queryParams: { limit: 12, fields: "*categories,*collection" } })
+  const withImg = products.find((p) => p.thumbnail)
+  return (
+    <>
+      <HarvestGrid products={products} title={campaign.sections?.products ?? t("section.products")} sub={campaign.promo?.text} />
+      <HarvestBanner campaign={campaign} image={withImg?.thumbnail ?? undefined} />
+      <HarvestStrip products={[...products].reverse()} />
+    </>
+  )
+}
+
 function GridFallback() {
   return <div className="ub-section" aria-busy="true" style={{ minHeight: 320 }} />
 }
@@ -71,6 +89,18 @@ export default async function Home() {
     return <CampaignEnded nextUrl={campaign.nextCampaignUrl} />
   }
 
+  if (getBoutique().theme.home === "harvest") {
+    return (
+      <div className="ub-harvest">
+        <HarvestHero campaign={campaign} />
+        <HarvestServices freeShipping={campaign.freeShipping} />
+        <Suspense fallback={<GridFallback />}>
+          <HarvestProducts campaign={campaign} />
+        </Suspense>
+      </div>
+    )
+  }
+
   return (
     <>
       <Hero campaign={campaign} />

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

@@ -13,6 +13,7 @@ import "styles/ub/showcase.css"
 import "styles/ub/forms.css"
 import "styles/ub/account.css"
 import "styles/ub/black-friday.css"
+import "styles/ub/harvest.css"
 import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"
 import "styles/ub/medusa-ui.css"

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

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

package/templates/storefront/src/modules/checkout/components/payment/index.tsx

@@ -19,9 +19,12 @@ import { useCallback, useEffect, useState } from "react"
 const Payment = ({
   cart,
   availablePaymentMethods,
+  testMode = false,
 }: {
   cart: any
   availablePaymentMethods: any[]
+  /** Clé Stripe de test : affiche la carte de test à utiliser (aucun paiement réel) */
+  testMode?: boolean
 }) => {
   const activeSession = cart.payment_collection?.payment_sessions?.find(
     (paymentSession: any) => paymentSession.status === "pending"
@@ -137,6 +140,17 @@ const Payment = ({
       </div>
       <div>
         <div className={isOpen ? "block" : "hidden"}>
+          {testMode && (
+            <div className="ub-testpay" role="note" data-testid="stripe-test-mode">
+              <b>
+                <T k="checkout.testMode.title" />
+              </b>
+              <span>
+                <T k="checkout.testMode.text" />
+              </span>
+              <code>4242 4242 4242 4242</code>
+            </div>
+          )}
           {!paidByGiftcard && availablePaymentMethods?.length && (
             <>
               <RadioGroup

package/templates/storefront/src/modules/checkout/templates/checkout-form/index.tsx

@@ -30,7 +30,12 @@ export default async function CheckoutForm({
 
       <Shipping cart={cart} availableShippingMethods={shippingMethods} />
 
-      <Payment cart={cart} availablePaymentMethods={paymentMethods} />
+      {/* Clé Stripe de test : bandeau « aucun paiement réel » + carte de test (disparaît avec une clé pk_live_) */}
+      <Payment
+        cart={cart}
+        availablePaymentMethods={paymentMethods}
+        testMode={!!process.env.STRIPE_PUBLISHABLE_KEY?.startsWith("pk_test_")}
+      />
 
       <Review cart={cart} />
     </div>

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

@@ -0,0 +1,196 @@
+import Link from "next/link"
+import type { Campaign } from "@lib/boutique/campaign"
+import { getBoutique } from "@lib/boutique/config"
+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 { Icon, type IconName } from "./icons"
+
+/**
+ * Accueil « Harvest » (thèmes Thanksgiving, theme.json → "home": "harvest") : structure différente de l'accueil
+ * standard. Hero plein cadre avec titre condensé géant + mot manuscrit et bas en vague (« tache »), services en ligne,
+ * grille produits épurée, grande bannière photo, bande photo de fin. Composants serveur, CSS dans styles/ub/harvest.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+
+/** Bas du hero en forme de coulure / tache : raccord organique avec la section suivante (couleur de la page). */
+function Drip() {
+  return (
+    <svg className="ub-hv-drip" viewBox="0 0 1440 140" preserveAspectRatio="none" aria-hidden>
+      <path d="M0 70 C 90 20 170 110 260 78 C 330 52 350 118 430 104 C 520 88 540 30 640 46 C 720 60 700 128 800 120 C 900 112 920 50 1010 58 C 1090 66 1100 122 1190 110 C 1270 100 1300 40 1370 52 C 1410 60 1430 80 1440 76 L1440 140 L0 140 Z" />
+    </svg>
+  )
+}
+
+export function HarvestHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  // Mot manuscrit : en fin de titre, il passe sur sa propre ligne sous le titre condensé ; au milieu de la phrase,
+  // il reste à sa place (sinon la phrase devient incompréhensible).
+  const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
+  const i = hl ? hero.title.indexOf(hl) : -1
+  const before = hl ? hero.title.slice(0, i) : hero.title
+  const after = hl ? hero.title.slice(i + hl.length) : ""
+  const atEnd = !after.replace(/[\s.,;:!?…–-]/g, "")
+
+  return (
+    <section className="ub-hv-hero" style={image ? { ["--hv-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      {image && <div className="ub-hv-hero__bg" aria-hidden />}
+      <div className="ub-wrap ub-hv-hero__in">
+        <div className="ub-hv-hero__text">
+          {hero.eyebrow && <p className="ub-hv-eyebrow">{hero.eyebrow}</p>}
+          <h1 className="ub-hv-title">
+            {hl && !atEnd ? (
+              <span className="ub-hv-title__main">
+                {before}
+                <em className="ub-hv-title__inline">{hl}</em>
+                {after}
+              </span>
+            ) : (
+              <>
+                <span className="ub-hv-title__main">{before.replace(/[\s,;:–-]+$/, "")}</span>
+                {hl && <em className="ub-hv-title__script">{hl}</em>}
+              </>
+            )}
+          </h1>
+          {hero.sub && <p className="ub-hv-sub">{hero.sub}</p>}
+          <div className="ub-hv-actions">
+            <Link href="/store" className="ub-hv-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {campaign.showCountdown !== false && (
+              <div className="ub-hv-cd">
+                <CampaignCountdown endsAt={campaign.endsAt} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <Drip />
+    </section>
+  )
+}
+
+/** Services sur une ligne, icônes fines centrées (référence : boutique de sacs). */
+export function HarvestServices({ freeShipping }: { freeShipping?: string }) {
+  const items: [IconName, string, string][] = [
+    ["truck", t("trust.shipping"), freeShipping ? t("trust.shippingSub", { freeShipping }) : t("trust.shippingSubAll")],
+    ["returns", t("trust.returns"), t("trust.returnsSub")],
+    ["gift", t("harvest.gift"), t("harvest.giftSub")],
+    ["shield", t("trust.secure"), t("trust.secureSub")],
+  ]
+  return (
+    <section className="ub-wrap ub-hv-services">
+      {items.map(([icon, title, sub]) => (
+        <div key={icon}>
+          <Icon name={icon} />
+          <b>{title}</b>
+          <small>{sub}</small>
+        </div>
+      ))}
+    </section>
+  )
+}
+
+/** Grille épurée : grande image, nom, catégorie, prix barré ; en-tête avec lien « Tout voir ». */
+export function HarvestGrid({ products, title, sub }: { products: P[]; title: string; sub?: string }) {
+  if (!products.length) return null
+  return (
+    <section className="ub-wrap ub-hv-section">
+      <div className="ub-hv-head">
+        <div>
+          <h2 className="ub-hv-h2">{title}</h2>
+          {sub && <p>{sub}</p>}
+        </div>
+        <Link href="/store" className="ub-hv-more">
+          {t("section.viewAll")} <Icon name="arrowRight" />
+        </Link>
+      </div>
+      <ul className="ub-hv-grid">
+        {products.slice(0, 8).map((p) => {
+          const { cheapestPrice: price } = getProductPrice({ product: p })
+          const onSale = price?.price_type === "sale"
+          const image = imageOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-hv-card">
+                <span className="ub-hv-card__media">
+                  {image ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={image} alt="" loading="lazy" />
+                  ) : (
+                    <span className="ub-ph" />
+                  )}
+                  {onSale && price?.percentage_diff && <span className="ub-hv-card__off">-{price.percentage_diff}%</span>}
+                  <span className="ub-hv-card__add" aria-hidden>
+                    <Icon name="cart" />
+                  </span>
+                </span>
+                <span className="ub-hv-card__name">{p.title}</span>
+                {(p.categories?.[0]?.name ?? p.collection?.title) && (
+                  <span className="ub-hv-card__cat">{p.categories?.[0]?.name ?? p.collection?.title}</span>
+                )}
+                {price && (
+                  <span className="ub-hv-card__price">
+                    {onSale && <s>{price.original_price}</s>}
+                    <b>{price.calculated_price}</b>
+                  </span>
+                )}
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}
+
+/** Grande bannière photo arrondie avec texte et bouton (textes du bandeau promo de la campagne). */
+export function HarvestBanner({ campaign, image }: { campaign: Campaign; image?: string }) {
+  const promo = campaign.promo
+  if (!promo) return null
+  const bg = (promo.image && /^https?:\/\//.test(promo.image) ? promo.image : undefined) ?? image
+  return (
+    <section className="ub-wrap ub-hv-section">
+      <div className="ub-hv-banner" style={bg ? { ["--hv-banner" as string]: `url("${bg}")` } : undefined}>
+        <div className="ub-hv-banner__text">
+          {promo.eyebrow && <p className="ub-hv-eyebrow">{promo.eyebrow}</p>}
+          <h2 className="ub-hv-h2">{promo.title}</h2>
+          {promo.text && <p>{promo.text}</p>}
+          <Link href="/store" className="ub-hv-btn ub-hv-btn--light">
+            {promo.cta ?? t("nav.cta")} <Icon name="arrowRight" />
+          </Link>
+        </div>
+        {promo.seal && <span className="ub-hv-banner__seal">{promo.seal}</span>}
+      </div>
+    </section>
+  )
+}
+
+/** Bande photo de fin : 5 visuels produits cliquables, titre avec le nom de la boutique. */
+export function HarvestStrip({ products }: { products: P[] }) {
+  const withImg = products.filter(imageOf).slice(0, 5)
+  if (withImg.length < 3) return null
+  const { storeName } = getBoutique()
+  return (
+    <section className="ub-hv-section ub-hv-strip">
+      <div className="ub-wrap ub-hv-strip__head">
+        <p className="ub-hv-eyebrow">{t("harvest.strip")}</p>
+        <h2 className="ub-hv-h2">@{storeName.toLowerCase().replace(/[^a-z0-9]+/g, "")}</h2>
+      </div>
+      <ul className="ub-hv-strip__row">
+        {withImg.map((p) => (
+          <li key={p.id}>
+            <Link href={`/products/${p.handle}`} aria-label={p.title ?? ""}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={imageOf(p)} alt="" loading="lazy" />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

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

@@ -59,3 +59,29 @@
   pointer-events: none;
 }
 .ub-phone[data-invalid] .ub-phone__field input { border-color: var(--sale); }
+
+/* Paiement en mode test (clé Stripe pk_test_) : carte de test à utiliser, aucun débit réel */
+.ub-testpay {
+  display: grid;
+  gap: 6px;
+  margin-bottom: var(--space-4);
+  padding: var(--space-4);
+  border: 1px dashed var(--primary);
+  border-radius: var(--ub-r-card);
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  font-size: 14px;
+  line-height: 21px;
+}
+.ub-testpay b { font-size: 15px; }
+.ub-testpay span { color: var(--ink-muted); }
+.ub-testpay code {
+  justify-self: start;
+  margin-top: 4px;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--ink);
+  color: var(--bg);
+  font: 700 15px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  letter-spacing: 0.06em;
+  user-select: all;
+}

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

@@ -0,0 +1,245 @@
+/* Accueil « Harvest » (thèmes Thanksgiving) — modules/ub/harvest.tsx.
+   Thanksgiving 1 : palette de l'image du hero (crème, citrouille, rouille, chocolat, moutarde), cadre moutarde.
+   Thanksgiving 2 : même structure en miroir, vert forêt, titres serif. */
+
+/* ---------- Palette Thanksgiving 1 (d'après l'image du hero) ---------- */
+[data-theme="thanksgiving"]:not([data-variant]) {
+  --bg: #fbf4e8; --surface: #f6ead7; --tint-1: #f3e2c7; --tint-2: #efd9b8; --tint-3: #f5dccb; --tint-4: #efe3cf;
+  --ink: #3b2412; --ink-muted: #7a5a3e; --border: #ead9bf;
+  --primary: #d4661b; --on-primary: #ffffff; --accent: #b3401f; --on-accent: #ffffff;
+  --sale: #b3401f; --star: #e3a33a; --success: #4d7c2a;
+  --hero-bg: #f6ead7; --hero-ink: #3b2412; --hero-muted: #7a5a3e;
+  --band-bg: #b3401f; --band-ink: #fff8ec; --bubble-bg: #e3a33a; --bubble-ink: #3b2412;
+  --topbar-bg: #4a2a14; --topbar-ink: #f6ead7; --focus: #d4661b;
+  --ub-font-head: var(--font-oswald);
+  --ub-head-weight: 700; --ub-head-case: uppercase; --ub-head-track: 0;
+  --ub-r-card: 18px; --ub-r-btn: var(--radius-pill); --ub-r-tile: 18px; --ub-r-media: 18px;
+}
+/* Cadre moutarde autour de toute la page (référence : emballage « Begg ») */
+[data-theme="thanksgiving"]:not([data-variant]) body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  border: 10px solid var(--bubble-bg);
+  pointer-events: none;
+}
+
+.ub-harvest {
+  --hv-script: "Segoe Script", "Brush Script MT", "Snell Roundhand", "Apple Chancery", cursive;
+  --hv-title: var(--font-oswald);
+}
+
+/* ---------- Hero ---------- */
+.ub-hv-hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: clamp(560px, 52vw, 780px);
+  overflow: hidden;
+  background: var(--hero-bg) var(--hv-img, none) right center / cover no-repeat;
+  color: var(--hero-ink);
+}
+/* Voile pour garder le texte lisible sur l'image, côté texte */
+.ub-hv-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, var(--hero-bg) 0%, color-mix(in srgb, var(--hero-bg) 70%, transparent) 38%, transparent 62%);
+  pointer-events: none;
+}
+.ub-hv-hero:not([data-has-image])::after {
+  content: "";
+  position: absolute;
+  right: -8%;
+  top: 10%;
+  width: 46%;
+  aspect-ratio: 1;
+  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
+  background: radial-gradient(circle at 35% 35%, var(--bubble-bg), var(--primary) 60%, var(--accent));
+  opacity: 0.9;
+}
+.ub-hv-hero__in { position: relative; z-index: 1; width: 100%; padding-top: var(--space-16); padding-bottom: 150px; }
+.ub-hv-hero__text { max-width: 620px; }
+.ub-hv-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); }
+.ub-hv-title { margin-top: var(--space-3) !important; line-height: 0.9; }
+.ub-hv-title__main {
+  display: block;
+  font-family: var(--hv-title);
+  font-weight: 700;
+  font-size: clamp(54px, 7.6vw, 118px);
+  text-transform: uppercase;
+  letter-spacing: -0.005em;
+  color: var(--hero-ink);
+  animation: ub-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-hv-title__script {
+  display: block;
+  margin: -0.1em 0 0 0.4em;
+  font-family: var(--hv-script);
+  font-style: normal;
+  font-weight: 400;
+  font-size: clamp(42px, 5.6vw, 88px);
+  line-height: 1.1;
+  color: var(--primary);
+  transform: rotate(-5deg);
+  transform-origin: left center;
+  animation: ub-rise 0.7s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-hv-sub { max-width: 46ch; margin-top: var(--space-6) !important; font-size: 17px; line-height: 27px; color: var(--hero-muted); }
+.ub-hv-actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-8); }
+.ub-hv-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 52px;
+  padding: 0 28px;
+  border-radius: var(--radius-pill);
+  background: var(--primary);
+  color: var(--on-primary);
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: 0.02em;
+  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--primary) 70%, transparent);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.ub-hv-btn:hover { transform: translateY(-2px); }
+.ub-hv-btn svg { width: 18px; height: 18px; }
+.ub-hv-btn--light { background: #ffffff; color: var(--ink); box-shadow: none; }
+.ub-hv-cd .ub-countdown__c { background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink); border: 1px solid var(--border); backdrop-filter: blur(6px); }
+.ub-hv-cd .ub-countdown__c small { color: var(--ink-muted); }
+/* Bas en coulure (« tache ») vers la section suivante */
+.ub-hv-drip { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 9vw, 130px); fill: var(--bg); z-index: 1; }
+
+/* ---------- Services ---------- */
+.ub-hv-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-8); text-align: center; }
+.ub-hv-services > div { display: grid; justify-items: center; gap: 6px; }
+.ub-hv-services svg { width: 28px; height: 28px; color: var(--primary); margin-bottom: 4px; }
+.ub-hv-services b { font-size: 14px; }
+.ub-hv-services small { font-size: 12px; color: var(--ink-muted); }
+
+/* ---------- Sections ---------- */
+.ub-hv-section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.ub-hv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
+.ub-hv-head p { margin-top: 6px !important; color: var(--ink-muted); max-width: 52ch; }
+.ub-hv-h2 { font-family: var(--ub-font-head); font-weight: 700; text-transform: var(--ub-head-case); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; }
+.ub-hv-more { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 700; font-size: 14px; }
+.ub-hv-more svg { width: 16px; height: 16px; transition: transform 0.15s; }
+.ub-hv-more:hover svg { transform: translateX(3px); }
+
+/* ---------- Grille épurée ---------- */
+.ub-hv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); margin: 0; padding: 0; list-style: none; }
+.ub-hv-card { display: grid; gap: 4px; }
+.ub-hv-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: var(--space-3); border-radius: var(--ub-r-card); background: var(--surface); }
+.ub-hv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
+.ub-hv-card:hover .ub-hv-card__media img { transform: scale(1.05); }
+.ub-hv-card__media .ub-ph { position: absolute; inset: 0; }
+.ub-hv-card__off { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; }
+.ub-hv-card__add { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-card); opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; }
+.ub-hv-card__add svg { width: 18px; height: 18px; }
+.ub-hv-card:hover .ub-hv-card__add, .ub-hv-card:focus-visible .ub-hv-card__add { opacity: 1; transform: none; }
+.ub-hv-card__name { font-weight: 600; font-size: 15px; line-height: 21px; }
+.ub-hv-card__cat { font-size: 13px; color: var(--ink-muted); }
+.ub-hv-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
+.ub-hv-card__price s { font-size: 13px; color: var(--ink-muted); }
+.ub-hv-card__price b { color: var(--sale); font-size: 16px; }
+
+/* ---------- Grande bannière photo ---------- */
+.ub-hv-banner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: clamp(320px, 34vw, 460px);
+  overflow: hidden;
+  padding: clamp(28px, 5vw, 64px);
+  border-radius: calc(var(--ub-r-card) * 1.4);
+  background: var(--band-bg) var(--hv-banner, none) center / cover no-repeat;
+  color: #ffffff;
+}
+.ub-hv-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--band-bg) 92%, #000) 0%, color-mix(in srgb, var(--band-bg) 55%, transparent) 55%, transparent 100%); }
+.ub-hv-banner__text { position: relative; display: grid; gap: var(--space-4); max-width: 520px; justify-items: start; }
+.ub-hv-banner .ub-hv-eyebrow { color: var(--bubble-bg); }
+.ub-hv-banner .ub-hv-h2 { color: #ffffff; }
+.ub-hv-banner p { color: rgb(255 255 255 / 0.85); font-size: 16px; line-height: 25px; }
+.ub-hv-banner__seal { position: absolute; right: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%) rotate(8deg); display: grid; place-items: center; width: 132px; height: 132px; padding: 16px; border-radius: 50%; background: var(--bubble-bg); color: var(--bubble-ink); font-family: var(--hv-script); font-size: 20px; line-height: 1.1; text-align: center; }
+
+/* ---------- Bande photo ---------- */
+.ub-hv-strip__head { display: grid; justify-items: center; gap: 6px; margin-bottom: var(--space-8); text-align: center; }
+.ub-hv-strip__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0 var(--space-3); list-style: none; }
+.ub-hv-strip__row a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--ub-r-card); }
+.ub-hv-strip__row img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
+.ub-hv-strip__row a:hover img { transform: scale(1.06); }
+
+/* ---------- Thanksgiving 2 « Harvest » : miroir, vert, serif ---------- */
+[data-variant="thanksgiving-2"] .ub-harvest { --hv-title: "DM Serif Display", Georgia, "Times New Roman", serif; }
+[data-variant="thanksgiving-2"] .ub-hv-hero { background-position: left center; }
+[data-variant="thanksgiving-2"] .ub-hv-hero::before { background: linear-gradient(270deg, var(--hero-bg) 0%, color-mix(in srgb, var(--hero-bg) 72%, transparent) 40%, transparent 64%); }
+[data-variant="thanksgiving-2"] .ub-hv-hero:not([data-has-image])::after { right: auto; left: -8%; }
+[data-variant="thanksgiving-2"] .ub-hv-hero__in { display: flex; justify-content: flex-end; }
+[data-variant="thanksgiving-2"] .ub-hv-title__main { text-transform: none; font-weight: 400; font-style: italic; letter-spacing: -0.01em; font-size: clamp(50px, 6.6vw, 104px); line-height: 0.98; }
+[data-variant="thanksgiving-2"] .ub-hv-title__script { color: var(--accent); }
+[data-variant="thanksgiving-2"] .ub-hv-drip { transform: scaleX(-1); }
+[data-variant="thanksgiving-2"] .ub-hv-h2 { font-family: var(--hv-title); font-weight: 400; font-style: italic; text-transform: none; }
+[data-variant="thanksgiving-2"] .ub-hv-card__media { border-radius: 999px 999px var(--ub-r-card) var(--ub-r-card); }
+[data-variant="thanksgiving-2"] .ub-hv-strip__row a { border-radius: 999px; }
+
+/* ---------- Mobile ---------- */
+@media (max-width: 900px) {
+  .ub-hv-hero { align-items: flex-start; min-height: 0; background-position: 70% bottom; background-size: 180% auto; }
+  .ub-hv-hero::before,
+  [data-variant="thanksgiving-2"] .ub-hv-hero::before { background: linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg) 48%, color-mix(in srgb, var(--hero-bg) 40%, transparent) 70%, transparent 100%); }
+  .ub-hv-hero__in { padding-top: var(--space-12); padding-bottom: 340px; }
+  [data-variant="thanksgiving-2"] .ub-hv-hero__in { justify-content: flex-start; }
+  .ub-hv-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
+  .ub-hv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); }
+  .ub-hv-banner__seal { display: none; }
+  .ub-hv-strip__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
+  .ub-hv-strip__row li { flex: 0 0 62%; scroll-snap-align: center; }
+  .ub-hv-head { flex-direction: column; align-items: flex-start; }
+  [data-theme="thanksgiving"]:not([data-variant]) body::after { border-width: 6px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-hv-title__main, .ub-hv-title__script { animation: none; }
+}
+
+/* Mot manuscrit au milieu du titre : reste dans la phrase */
+.ub-hv-title__inline {
+  display: inline-block;
+  padding: 0 0.12em;
+  font-family: var(--hv-script);
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.82em;
+  text-transform: none;
+  color: var(--primary);
+  transform: rotate(-4deg) translateY(0.06em);
+}
+[data-variant="thanksgiving-2"] .ub-hv-title__inline { color: var(--accent); }
+
+/* Photos en arche (Thanksgiving 2) : pastille de remise en bas de l'image (sinon coupée par l'arrondi) */
+[data-variant="thanksgiving-2"] .ub-hv-card__off { top: auto; bottom: 12px; }
+
+/* Accueil Harvest : pas de 2e bandeau d'appel à l'action juste après la grande bannière */
+body:has(.ub-harvest) .ub-footcta { display: none; }
+
+/* ---------- Image du hero sur son propre calque (miroir possible, empilée sur mobile) ---------- */
+.ub-hv-hero { isolation: isolate; background-image: none; }
+.ub-hv-hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--hv-img) right center / cover no-repeat; }
+.ub-hv-hero::before { z-index: 1; }
+.ub-hv-hero__in { z-index: 2; }
+.ub-hv-drip { z-index: 3; }
+/* Thanksgiving 2 (texte à droite) : l'image doit avoir son sujet à gauche et un espace libre à droite (pas de miroir automatique). */
+[data-variant="thanksgiving-2"] .ub-hv-hero__bg { background-position: left center; }
+
+@media (max-width: 900px) {
+  .ub-hv-hero { flex-direction: column; align-items: stretch; background-size: auto; }
+  .ub-hv-hero::before { display: none; }
+  .ub-hv-hero__in { order: 1; padding-top: var(--space-8); padding-bottom: var(--space-6); }
+  .ub-hv-hero__bg { position: relative; order: 2; inset: auto; height: clamp(260px, 72vw, 380px); background-position: 82% center; }
+  [data-variant="thanksgiving-2"] .ub-hv-hero__bg { background-position: 18% center; }
+  .ub-hv-hero__bg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 36%; background: linear-gradient(180deg, var(--hero-bg), transparent); }
+  .ub-hv-drip { height: 56px; }
+  .ub-hv-title__main { font-size: clamp(44px, 12vw, 64px); }
+  .ub-hv-title__script { font-size: clamp(36px, 10vw, 52px); }
+  .ub-hv-actions { gap: var(--space-4); }
+}

package/templates/storefront/themes/thanksgiving/theme.json

@@ -3,7 +3,8 @@
   "name": "Thanksgiving",
   "reference": "NovaTrend",
   "fonts": {
-    "head": "jakarta",
+    "head": "oswald",
     "body": "jakarta"
-  }
+  },
+  "home": "harvest"
 }

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

@@ -6,5 +6,6 @@
   "fonts": {
     "head": "sora",
     "body": "jakarta"
-  }
+  },
+  "home": "harvest"
 }