@salifbiaye/create-boutique 0.3.6 → 0.4.1

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

@@ -0,0 +1,178 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Gala » (thèmes Nouvel An, theme.json → "home": "gala") : noir, or et argent.
+ * Variante 1 : texte à gauche. Variante 2 (data-variant) : tout centré, l'année en grand chiffre argenté.
+ * Sections : hero plein cadre, bande « minuit » (compte à rebours), sélection encadrée d'or,
+ * « les 12 coups de minuit » (chiffres romains), bannière feuille d'or. CSS : styles/ub/gala.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+const ROMAN = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"]
+
+export function GalaHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
+  const before = hl ? hero.title.slice(0, hero.title.indexOf(hl)).trim() : hero.title
+  const after = hl ? hero.title.slice(hero.title.indexOf(hl) + hl.length).trim() : ""
+  const year = new Date(campaign.endsAt).getFullYear()
+
+  return (
+    <section className="ub-gl-hero" style={image ? { ["--gl-img" as string]: `url("${image}")` } : undefined} data-has-image={image ? "" : undefined}>
+      <div className="ub-gl-hero__sparkle" aria-hidden />
+      <div className="ub-wrap ub-gl-hero__in">
+        <div className="ub-gl-hero__text">
+          {hero.eyebrow && <p className="ub-gl-eyebrow">{hero.eyebrow}</p>}
+          {/* Variante 2 : l'année en très grand (masquée en variante 1 par le CSS) */}
+          <p className="ub-gl-year" aria-hidden>
+            {year}
+          </p>
+          <h1 className="ub-gl-title">
+            <span className="ub-gl-title__a">{before}</span>
+            {hl && before && " "}
+            {hl &&<span className="ub-gl-title__b">{hl}</span>}
+            {after && <span className="ub-gl-title__a"> {after}</span>}
+          </h1>
+          {hero.sub && <p className="ub-gl-sub">{hero.sub}</p>}
+          <div className="ub-gl-actions">
+            <Link href="/store" className="ub-gl-btn ub-gl-btn--solid">
+              {hero.cta}
+            </Link>
+            {hero.cta2 && (
+              <Link href="/store" className="ub-gl-btn ub-gl-btn--ghost">
+                {hero.cta2}
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Bande « minuit » : grand compte à rebours doré + texte promo + bouton. */
+export function GalaMidnight({ campaign }: { campaign: Campaign }) {
+  if (campaign.showCountdown === false) return null
+  return (
+    <section className="ub-gl-midnight">
+      <div className="ub-wrap ub-gl-midnight__in">
+        <div>
+          <p className="ub-gl-eyebrow">{t("gala.midnight")}</p>
+          <div className="ub-gl-midnight__cd">
+            <CampaignCountdown endsAt={campaign.endsAt} />
+          </div>
+        </div>
+        <div className="ub-gl-midnight__text">
+          {campaign.promo?.title && <h2 className="ub-gl-h2">{campaign.promo.title}</h2>}
+          {campaign.promo?.text && <p>{campaign.promo.text}</p>}
+          <Link href="/store" className="ub-gl-link">
+            {campaign.promo?.cta ?? t("nav.cta")} <Icon name="arrowRight" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function price(p: P) {
+  const { cheapestPrice } = getProductPrice({ product: p })
+  return { price: cheapestPrice, onSale: cheapestPrice?.price_type === "sale" }
+}
+
+/** Sélection : cartes sombres avec cadre intérieur doré, prix en or. */
+export function GalaSelection({ products, title }: { products: P[]; title: string }) {
+  const items = products.slice(0, 6)
+  if (!items.length) return null
+  return (
+    <section className="ub-wrap ub-gl-section">
+      <div className="ub-gl-head">
+        <span className="ub-gl-rule" aria-hidden />
+        <h2 className="ub-gl-h2">{title}</h2>
+        <span className="ub-gl-rule" aria-hidden />
+      </div>
+      <ul className="ub-gl-grid">
+        {items.map((p) => {
+          const { price: pr, onSale } = price(p)
+          const image = imageOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-gl-card">
+                <span className="ub-gl-card__media">
+                  {image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}
+                  {onSale && pr?.percentage_diff && <span className="ub-gl-card__off">-{pr.percentage_diff}%</span>}
+                </span>
+                <span className="ub-gl-card__name">{p.title}</span>
+                {pr && (
+                  <span className="ub-gl-card__price">
+                    <b>{pr.calculated_price}</b>
+                    {onSale && <s>{pr.original_price}</s>}
+                  </span>
+                )}
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </section>
+  )
+}
+
+/** « Les 12 coups de minuit » : jusqu'à 12 offres numérotées en chiffres romains, défilement horizontal. */
+export function GalaStrokes({ products }: { products: P[] }) {
+  const items = products.slice(0, 12)
+  if (items.length < 4) return null
+  return (
+    <section className="ub-gl-section ub-gl-strokes">
+      <div className="ub-wrap ub-gl-head ub-gl-head--left">
+        <h2 className="ub-gl-h2">{t("gala.strokes")}</h2>
+        <p>{t("gala.strokesSub")}</p>
+      </div>
+      <ol className="ub-gl-strokes__row">
+        {items.map((p, i) => {
+          const { price: pr } = price(p)
+          const image = imageOf(p)
+          return (
+            <li key={p.id}>
+              <Link href={`/products/${p.handle}`} className="ub-gl-stroke">
+                <span className="ub-gl-stroke__num" aria-hidden>
+                  {ROMAN[i]}
+                </span>
+                <span className="ub-gl-stroke__img">{image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}</span>
+                <span className="ub-gl-stroke__name">{p.title}</span>
+                {pr && <b className="ub-gl-stroke__price">{pr.calculated_price}</b>}
+              </Link>
+            </li>
+          )
+        })}
+      </ol>
+    </section>
+  )
+}
+
+/** Bannière feuille d'or : titre du hero, bouton noir. */
+export function GalaFoil({ campaign }: { campaign: Campaign }) {
+  return (
+    <section className="ub-wrap ub-gl-section">
+      <div className="ub-gl-foil">
+        <span className="ub-gl-foil__confetti" aria-hidden />
+        {campaign.hero.eyebrow && <p className="ub-gl-eyebrow">{campaign.hero.eyebrow}</p>}
+        <h2 className="ub-gl-h2">{campaign.hero.title}</h2>
+        {campaign.hero.sub && <p>{campaign.hero.sub}</p>}
+        <Link href="/store" className="ub-gl-btn ub-gl-btn--dark">
+          {campaign.hero.cta}
+        </Link>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,279 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { getProductPrice } from "@lib/util/get-product-price"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { Icon, type IconName } from "./icons"
+
+/**
+ * Accueil « Tech » (thèmes Cyber Monday, theme.json → "home": "tech") : la boutique comme un lancement produit.
+ * Cyber Monday 1 : nuit violette, texte à gauche, visuel néon sur le côté.
+ * Cyber Monday 2 (data-variant) : blanc, le visuel couvre tout le hero, mot en lettres « tuiles ».
+ * Sections : hero, bandeau défilant, « Flash deals » (compte à rebours + cartes), bento de l'offre phare,
+ * grille « Deals du moment », bannière finale. CSS : styles/ub/tech.css.
+ */
+
+type P = HttpTypes.StoreProduct
+const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
+const priceOf = (p: P) => {
+  const { cheapestPrice } = getProductPrice({ product: p })
+  return { price: cheapestPrice, onSale: cheapestPrice?.price_type === "sale" }
+}
+
+export function TechHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
+  const before = hl ? hero.title.slice(0, hero.title.indexOf(hl)).trim() : hero.title
+  const after = hl ? hero.title.slice(hero.title.indexOf(hl) + hl.length).trim() : ""
+  const [b1, b2, b3] = hero.bubble ?? []
+
+  return (
+    <section className="ub-tc-hero" data-has-image={image ? "" : undefined}>
+      <div className="ub-tc-hero__grid" aria-hidden />
+      <div className="ub-tc-hero__beam" aria-hidden />
+      {/* 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" />
+        </div>
+      )}
+      <div className="ub-wrap ub-tc-hero__in">
+        <div className="ub-tc-hero__text">
+          {hero.eyebrow && (
+            <p className="ub-tc-chip">
+              <span className="ub-tc-chip__dot" aria-hidden />
+              {hero.eyebrow}
+            </p>
+          )}
+          <h1 className="ub-tc-title">
+            {before && <span className="ub-tc-title__a">{before} </span>}
+            {hl && (
+              <span className="ub-tc-title__hl">
+                {/* Variante 2 : une tuile par lettre (comme les lettres du visuel) */}
+                {[...hl].map((c, i) => (
+                  <span key={i} className={c === " " ? "ub-tc-tile ub-tc-tile--sp" : "ub-tc-tile"}>
+                    {c}
+                  </span>
+                ))}
+              </span>
+            )}
+            {after && <span className="ub-tc-title__a"> {after}</span>}
+          </h1>
+          {hero.sub && <p className="ub-tc-sub">{hero.sub}</p>}
+          <div className="ub-tc-actions">
+            <Link href="/store" className="ub-tc-btn ub-tc-btn--solid">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <Link href="/store" className="ub-tc-btn ub-tc-btn--ghost">
+                {hero.cta2}
+              </Link>
+            )}
+          </div>
+          {campaign.showCountdown !== false && (
+            <div className="ub-tc-hero__cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </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" />}
+          {b2 && (
+            <p className="ub-tc-badge">
+              <small>{b1}</small>
+              <b>{b2}</b>
+              <small>{b3}</small>
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Bandeau défilant (textes de la barre du haut + remise), dupliqué pour une boucle continue. */
+export function TechTicker({ campaign }: { campaign: Campaign }) {
+  const items = [campaign.hero.eyebrow, ...(campaign.topbar ?? [])].filter(Boolean) as string[]
+  if (!items.length) return null
+  const row = (hidden?: boolean) => (
+    <ul className="ub-tc-ticker__row" aria-hidden={hidden || undefined}>
+      {items.map((s, i) => (
+        <li key={i}>
+          <Icon name="sparkle" /> {s}
+        </li>
+      ))}
+    </ul>
+  )
+  return (
+    <div className="ub-tc-ticker">
+      <div className="ub-tc-ticker__track">
+        {row()}
+        {row(true)}
+      </div>
+    </div>
+  )
+}
+
+function Card({ p, rank }: { p: P; rank?: number }) {
+  const { price, onSale } = priceOf(p)
+  const image = imageOf(p)
+  return (
+    <Link href={`/products/${p.handle}`} className="ub-tc-card">
+      <span className="ub-tc-card__media">
+        {image ? <FadeImg src={image} alt="" /> : <span className="ub-ph" />}
+        {onSale && price?.percentage_diff && <span className="ub-tc-off">-{price.percentage_diff}%</span>}
+        {rank != null && <span className="ub-tc-card__rank">#{String(rank).padStart(2, "0")}</span>}
+      </span>
+      <span className="ub-tc-card__body">
+        <span className="ub-tc-card__name">{p.title}</span>
+        {price && (
+          <span className="ub-tc-card__price">
+            <b>{price.calculated_price}</b>
+            {onSale && <s>{price.original_price}</s>}
+          </span>
+        )}
+      </span>
+      <span className="ub-tc-card__go" aria-hidden>
+        <Icon name="arrowUpRight" />
+      </span>
+    </Link>
+  )
+}
+
+/** « Flash deals » : compte à rebours façon écran + les offres les plus remisées en défilement horizontal. */
+export function TechFlash({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const items = products.slice(0, 8)
+  if (!items.length) return null
+  return (
+    <section className="ub-tc-section ub-tc-flash">
+      <div className="ub-wrap">
+        <div className="ub-tc-flash__head">
+          <div>
+            <p className="ub-tc-kicker">
+              <Icon name="sparkle" /> {t("tech.flash")}
+            </p>
+            <h2 className="ub-tc-h2">{campaign.promo?.title ?? t("tech.flashTitle")}</h2>
+          </div>
+          {campaign.showCountdown !== false && (
+            <div className="ub-tc-flash__cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+        </div>
+        <ol className="ub-tc-flash__row">
+          {items.map((p, i) => (
+            <li key={p.id}>
+              <Card p={p} rank={i + 1} />
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+/** Bento : l'offre phare en grande carte + 4 cartes. */
+export function TechBento({ campaign, products }: { campaign: Campaign; products: P[] }) {
+  const [hero, ...rest] = products.filter((p) => imageOf(p))
+  if (!hero) return null
+  const { price, onSale } = priceOf(hero)
+  const image = imageOf(hero)
+  return (
+    <section className="ub-tc-section">
+      <div className="ub-wrap ub-tc-bento">
+        <Link href={`/products/${hero.handle}`} className="ub-tc-bento__main">
+          <span className="ub-tc-bento__img">{image && <FadeImg src={image} alt="" />}</span>
+          <span className="ub-tc-bento__txt">
+            <span className="ub-tc-kicker">{campaign.promo?.eyebrow ?? t("tech.deal")}</span>
+            <span className="ub-tc-bento__name">{hero.title}</span>
+            {price && (
+              <span className="ub-tc-card__price ub-tc-card__price--lg">
+                <b>{price.calculated_price}</b>
+                {onSale && <s>{price.original_price}</s>}
+                {onSale && price.percentage_diff && <span className="ub-tc-off">-{price.percentage_diff}%</span>}
+              </span>
+            )}
+            <span className="ub-tc-btn ub-tc-btn--solid">
+              {campaign.promo?.cta ?? t("nav.cta")} <Icon name="arrowRight" />
+            </span>
+          </span>
+        </Link>
+        {rest.slice(0, 4).map((p) => (
+          <Card key={p.id} p={p} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+/** Grille de tous les produits. */
+export function TechGrid({ products, title }: { products: P[]; title: string }) {
+  if (!products.length) return null
+  return (
+    <section className="ub-tc-section">
+      <div className="ub-wrap">
+        <div className="ub-tc-head">
+          <h2 className="ub-tc-h2">{title}</h2>
+          <Link href="/store" className="ub-tc-link">
+            {t("tech.all")} <Icon name="arrowRight" />
+          </Link>
+        </div>
+        <ul className="ub-tc-grid">
+          {products.map((p) => (
+            <li key={p.id}>
+              <Card p={p} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Avantages (livraison, paiement, retours) en ligne, style fiche technique. */
+export function TechSpecs({ freeShipping }: { freeShipping?: string }) {
+  const specs: [IconName, string, string][] = [
+    ["truck", t("trust.shipping"), freeShipping ? t("trust.shippingSub", { freeShipping }) : t("trust.shippingSubAll")],
+    ["lock", t("trust.secure"), t("trust.secureSub")],
+    ["returns", t("trust.returns"), t("trust.returnsSub")],
+    ["shield", t("tech.warranty"), t("tech.warrantySub")],
+  ]
+  return (
+    <section className="ub-wrap ub-tc-specs">
+      {specs.map(([ic, a, b]) => (
+        <div key={a} className="ub-tc-spec">
+          <Icon name={ic} />
+          <span>
+            <b>{a}</b>
+            <small>{b}</small>
+          </span>
+        </div>
+      ))}
+    </section>
+  )
+}
+
+/** Bannière finale : texte promo + bouton, sur fond lumineux (variante 1) ou noir (variante 2). */
+export function TechFinal({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  if (!promo?.title) return null
+  return (
+    <section className="ub-wrap ub-tc-section">
+      <div className="ub-tc-final">
+        <div className="ub-tc-final__glow" aria-hidden />
+        {promo.eyebrow && <p className="ub-tc-kicker">{promo.eyebrow}</p>}
+        <h2 className="ub-tc-final__title">{promo.title}</h2>
+        {promo.text && <p className="ub-tc-final__text">{promo.text}</p>}
+        <Link href="/store" className="ub-tc-btn ub-tc-btn--solid">
+          {promo.cta ?? t("nav.cta")} <Icon name="arrowRight" />
+        </Link>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,205 @@
+/* Accueil « Album » (thèmes Noël) — modules/ub/album.tsx. Velours, guirlande, bois, polaroïds, papier déchiré, ticket.
+   Noël 1 : rouge dominant. Noël 2 : vert sapin dominant, or et bordeaux. */
+
+[data-theme="noel"]:not([data-variant]),
+[data-variant="noel-2"] {
+  --al-red: #a8111b; --al-red-dark: #6e0a12; --al-green: #1d4d33; --al-green-dark: #123522;
+  --al-cream: #f4eadb; --al-gold: #dcb866; --al-wood: #6b4226;
+  --bg: #f4eadb; --surface: #ede0cc; --tint-1: #e8d7bd; --tint-2: #e2cfb2; --tint-3: #f0e2cc; --tint-4: #e9dcc6;
+  --ink: #2b1b14; --ink-muted: #6d5646; --border: #dcc8ab;
+  --primary: #a8111b; --on-primary: #fff6e8; --accent: #1d4d33; --on-accent: #fff6e8;
+  --sale: #a8111b; --hero-bg: #6e0a12; --hero-ink: #fff6e8; --hero-muted: #f0d9c0;
+  --band-bg: #1d4d33; --band-ink: #fff6e8; --bubble-bg: #dcb866; --bubble-ink: #2b1b14;
+  --topbar-bg: #6e0a12; --topbar-ink: #f7dfa6; --focus: #dcb866;
+  --ub-font-head: var(--font-poppins); --ub-r-card: 6px; --ub-r-btn: 6px;
+  --al-script: "Segoe Script", "Brush Script MT", "Snell Roundhand", "Apple Chancery", cursive;
+  --al-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
+}
+[data-variant="noel-2"] {
+  --al-red: #1d4d33; --al-red-dark: #0f2f1f; --al-green: #6e0a12; --al-green-dark: #4a060c;
+  --primary: #1d4d33; --accent: #6e0a12; --hero-bg: #0f2f1f; --topbar-bg: #0f2f1f; --band-bg: #6e0a12;
+}
+
+/* ---------- Hero velours ---------- */
+.ub-al-hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  min-height: clamp(520px, 46vw, 720px);
+  text-align: center;
+  color: var(--hero-ink);
+  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]::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 {
+  position: absolute;
+  inset: 0 auto 0 0;
+  z-index: -1;
+  width: 18%;
+  background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.28) 0 14px, rgb(255 255 255 / 0.06) 14px 26px, rgb(0 0 0 / 0.18) 26px 40px);
+  mask-image: linear-gradient(90deg, #000 60%, transparent);
+}
+.ub-al-hero[data-has-image] .ub-al-hero__curtain { display: none; }
+.ub-al-hero__in { display: grid; justify-items: center; gap: var(--space-4); padding-top: var(--space-16); padding-bottom: var(--space-16); }
+.ub-al-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hero-muted); }
+.ub-al-title {
+  max-width: 16ch;
+  font-family: var(--al-script);
+  font-weight: 400;
+  font-size: clamp(48px, 6.6vw, 100px);
+  line-height: 1.1;
+  background: linear-gradient(180deg, #fff3cf 0%, var(--al-gold) 55%, #b88a36 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 4px 18px rgb(0 0 0 / 0.35));
+  animation: ub-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-al-sub { max-width: 48ch; font-size: 16px; line-height: 25px; color: var(--hero-muted); }
+.ub-al-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  padding: 0 28px;
+  border: 1.5px solid var(--al-gold);
+  border-radius: var(--ub-r-btn);
+  color: #fff3cf;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  transition: background 0.2s, color 0.2s;
+}
+.ub-al-btn:hover { background: var(--al-gold); color: var(--ink); }
+.ub-al-btn--dark { border-color: var(--al-red); color: var(--al-red); }
+.ub-al-btn--dark:hover { background: var(--al-red); color: #fff6e8; }
+
+/* ---------- Guirlande ---------- */
+.ub-al-garland {
+  position: relative;
+  z-index: 2;
+  height: 46px;
+  margin: -23px 0;
+  background:
+    radial-gradient(circle at 10px 30px, #e8c060 5px, transparent 6px) 0 0 / 86px 46px repeat-x,
+    radial-gradient(circle at 50px 34px, #d1202a 5px, transparent 6px) 0 0 / 86px 46px repeat-x,
+    radial-gradient(ellipse 22px 14px at 50% 50%, #2e6b45 60%, transparent 62%) 0 6px / 30px 34px repeat-x,
+    radial-gradient(ellipse 22px 14px at 50% 50%, #1e4f33 60%, transparent 62%) 15px 12px / 30px 30px repeat-x,
+    linear-gradient(180deg, transparent 12px, #173d28 12px, #173d28 34px, transparent 34px);
+  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.25));
+}
+
+/* ---------- Section verte : bois + photos suspendues ---------- */
+.ub-al-story { padding: var(--space-16) 0; background: var(--al-green); background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px); background-size: 18px 18px; color: #fff6e8; }
+.ub-al-story__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-12); align-items: center; }
+.ub-al-hang { display: flex; justify-content: center; gap: var(--space-8); }
+.ub-al-hang__item { position: relative; display: grid; justify-items: center; padding-top: 70px; transform: rotate(calc((var(--i) * 2 - 1) * 4deg)); transition: transform 0.3s; }
+.ub-al-hang__item:hover { transform: rotate(0deg) translateY(-4px); }
+.ub-al-hang__ribbon { position: absolute; top: 0; left: 50%; width: 4px; height: 80px; margin-left: -2px; background: var(--al-red); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1); }
+.ub-al-hang__ribbon::after { content: ""; position: absolute; top: -8px; left: -9px; width: 22px; height: 12px; border-radius: 50%; background: var(--al-red); }
+.ub-al-frame { display: block; width: clamp(120px, 12vw, 170px); aspect-ratio: 4 / 5; padding: 8px 8px 28px; background: #fbf6ec; border-radius: 3px; box-shadow: 0 16px 30px rgb(0 0 0 / 0.35); }
+.ub-al-frame img { width: 100%; height: 100%; object-fit: cover; }
+.ub-al-sign {
+  position: relative;
+  display: grid;
+  gap: var(--space-3);
+  padding: clamp(28px, 4vw, 48px);
+  border-radius: 10px;
+  color: #fff6e8;
+  background:
+    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.08) 0 2px, transparent 2px 22px),
+    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 7px),
+    linear-gradient(180deg, #7c4b2a, var(--al-wood) 55%, #54321b);
+  box-shadow: inset 0 0 0 6px rgb(0 0 0 / 0.12), 0 20px 40px rgb(0 0 0 / 0.35);
+}
+.ub-al-sign__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--al-gold); }
+.ub-al-sign p { color: rgb(255 246 232 / 0.85); line-height: 25px; }
+/* Neige posée sur le haut du panneau */
+.ub-al-sign__snow { position: absolute; left: -6px; right: -6px; top: -10px; height: 22px; border-radius: 12px 12px 30px 30px / 12px 12px 20px 20px; background: #ffffff; box-shadow: 0 3px 6px rgb(0 0 0 / 0.15); }
+.ub-al-h2 { font-family: var(--al-serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; }
+.ub-al-h2--script { font-family: var(--al-script); text-align: center; color: var(--al-red); margin-bottom: var(--space-12) !important; }
+.ub-al-h2--light { color: #fff3cf; }
+
+/* ---------- Section crème : polaroïds + étiquettes ---------- */
+.ub-al-cream { padding: var(--space-16) 0; background: var(--al-cream); background-image: radial-gradient(rgb(0 0 0 / 0.035) 1px, transparent 1px); background-size: 14px 14px; }
+.ub-al-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
+.ub-al-item { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: var(--space-4); }
+.ub-al-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) 170px; }
+.ub-al-item:nth-child(even) .ub-al-polaroid { order: 2; }
+.ub-al-polaroid { position: relative; display: block; padding: 10px 10px 34px; background: #ffffff; box-shadow: 0 12px 26px rgb(43 27 20 / 0.22); transform: rotate(calc((var(--i) % 3 - 1) * 4deg)); transition: transform 0.3s; }
+.ub-al-polaroid:hover { transform: rotate(0) scale(1.04); }
+.ub-al-polaroid__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
+.ub-al-polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-al-polaroid__img .ub-ph { position: absolute; inset: 0; }
+.ub-al-tape { position: absolute; top: -12px; left: 50%; z-index: 1; width: 70px; height: 24px; margin-left: -35px; background: rgb(236 214 170 / 0.8); transform: rotate(-4deg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.1); }
+.ub-al-label {
+  position: relative;
+  display: grid;
+  gap: 4px;
+  padding: 16px 20px;
+  color: #fff6e8;
+  background: var(--al-red);
+  /* Bords en papier déchiré */
+  clip-path: polygon(0% 8%, 4% 0%, 9% 6%, 15% 1%, 22% 7%, 30% 0%, 38% 6%, 46% 1%, 54% 7%, 62% 0%, 70% 6%, 78% 1%, 86% 7%, 93% 0%, 100% 6%, 99% 50%, 100% 94%, 94% 100%, 87% 94%, 80% 100%, 72% 93%, 64% 100%, 56% 94%, 48% 100%, 40% 93%, 32% 100%, 24% 94%, 16% 100%, 8% 93%, 0% 100%, 1% 50%);
+  transform: rotate(calc((var(--i) % 2) * 2deg - 1deg));
+}
+.ub-al-item:nth-child(4n + 2) .ub-al-label,
+.ub-al-item:nth-child(4n + 3) .ub-al-label { background: var(--al-green); }
+.ub-al-label b { font-size: 16px; line-height: 21px; }
+.ub-al-label span { display: flex; align-items: baseline; gap: 8px; font-weight: 700; color: #f7dfa6; }
+.ub-al-label s { font-size: 12px; font-weight: 500; color: rgb(255 246 232 / 0.6); }
+.ub-al-label em { position: absolute; top: 10px; right: 14px; font-style: normal; font-size: 12px; font-weight: 800; color: #f7dfa6; }
+.ub-al-more { display: flex; justify-content: center; margin-top: var(--space-12); }
+
+/* ---------- Section rouge : ticket perforé ---------- */
+.ub-al-red { padding: var(--space-16) 0; background: var(--al-red); background-image: radial-gradient(rgb(255 255 255 / 0.06) 1.5px, transparent 1.5px); background-size: 22px 22px; }
+.ub-al-ticket {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  max-width: 860px;
+  margin: 0 auto;
+  border-radius: 14px;
+  background: #fbf2df;
+  color: var(--ink);
+  box-shadow: 0 24px 50px rgb(0 0 0 / 0.3);
+  /* Encoches rondes de chaque côté de la perforation */
+  mask: radial-gradient(circle 14px at calc(58.3%) 0, transparent 98%, #000) top / 100% 51% no-repeat,
+    radial-gradient(circle 14px at calc(58.3%) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
+}
+.ub-al-ticket__main { display: grid; gap: 6px; padding: clamp(24px, 4vw, 40px); border-right: 2px dashed rgb(43 27 20 / 0.25); }
+.ub-al-ticket__main .ub-al-sign__eyebrow { color: var(--al-red); }
+.ub-al-ticket__big { font-family: var(--al-serif); font-size: clamp(56px, 7vw, 92px); line-height: 1; color: var(--al-red); }
+.ub-al-ticket__main p:last-child { color: var(--ink-muted); }
+.ub-al-ticket__stub { display: grid; align-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-6); }
+.ub-al-ticket__stub .ub-countdown__c { background: var(--al-cream); border: 1px solid var(--border); color: var(--ink); box-shadow: none; }
+.ub-al-ticket__stub .ub-al-btn { border-color: var(--al-red); background: var(--al-red); color: #fff6e8; }
+
+body:has(.ub-album) .ub-footcta { display: none; }
+
+@media (max-width: 900px) {
+  .ub-al-hero { min-height: 0; }
+  .ub-al-story__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
+  .ub-al-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
+  .ub-al-item, .ub-al-item:nth-child(even) { grid-template-columns: 130px minmax(0, 1fr); }
+  .ub-al-item:nth-child(even) .ub-al-polaroid { order: 0; }
+  .ub-al-ticket { grid-template-columns: minmax(0, 1fr); mask: none; }
+  .ub-al-ticket__main { border-right: 0; border-bottom: 2px dashed rgb(43 27 20 / 0.25); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-al-title { animation: none; }
+}
+
+/* Pied de page des thèmes Noël : fond foncé du thème, texte crème (l'ancienne règle « plus sombre que la page »
+   donnait un gris illisible sur le fond crème). */
+[data-theme="noel"]:not([data-variant]) .ub-footwrap,
+[data-variant="noel-2"] .ub-footwrap { --foot-bg: var(--al-red-dark); --foot-ink: #fff6e8; --cta-bg: var(--al-red); --cta-ink: #fff6e8; }
+[data-theme="noel"]:not([data-variant]) .ub-footwrap .ub-footer,
+[data-variant="noel-2"] .ub-footwrap .ub-footer { border: 0; }
+[data-theme="noel"]:not([data-variant]) .ub-footwrap .ub-footer .ub-logo__mark,
+[data-variant="noel-2"] .ub-footwrap .ub-footer .ub-logo__mark { background: var(--al-gold); }