@salifbiaye/create-boutique 0.6.0 → 0.7.0

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

@@ -0,0 +1,123 @@
+/* Accueil « Sunset » (Summer 2) — modules/ub/sunset.tsx. Affiche de plage : rouge couchant, soleil orangé, mer bleue, sable. */
+
+[data-variant="summer-2"] {
+  --bg: #fff6e6; --surface: #ffecc8; --tint-1: #ffe2ad; --tint-2: #ffd9c7; --tint-3: #dff0ff; --tint-4: #fff0d9;
+  --ink: #1d1208; --ink-muted: #6b4f35; --border: #f2d9ae;
+  --primary: #e8330f; --on-primary: #fff6e6; --accent: #0b4f8a; --on-accent: #fff6e6;
+  --sale: #e8330f; --star: #ffa51a; --success: #1d7a4a;
+  --hero-bg: #ff5a1a; --hero-ink: #fff9ef; --hero-muted: #ffe7cf;
+  --band-bg: #0b4f8a; --band-ink: #fff6e6; --bubble-bg: #ffc21a; --bubble-ink: #1d1208;
+  --topbar-bg: #0b4f8a; --topbar-ink: #ffd66b; --focus: #0b4f8a;
+  --shadow-card: 0 16px 34px -22px rgb(106 40 0 / 0.45);
+  --ub-font-head: var(--font-oswald); --ub-font-body: var(--font-outfit);
+  --ub-head-weight: 700; --ub-head-case: uppercase; --ub-head-track: 0.01em;
+  --ub-r-card: 14px; --ub-r-btn: 999px; --ub-r-tile: 14px; --ub-r-hero: 0px; --ub-r-media: 10px;
+  --ss-red: #e8330f; --ss-sun: #ffa51a; --ss-yellow: #ffc21a; --ss-sea: #0b4f8a; --ss-sand: #fff6e6;
+  color-scheme: light;
+}
+[data-variant="summer-2"] .ub-nav { background: var(--ss-sand); border-bottom: 1px solid var(--border); }
+[data-variant="summer-2"] .ub-nav__cta { background: var(--ss-red); color: #fff6e6; }
+[data-variant="summer-2"] .ub-footwrap { --foot-bg: var(--ss-sea); --foot-ink: #fff6e6; --cta-bg: var(--ss-yellow); --cta-ink: #1d1208; }
+[data-variant="summer-2"] .ub-badge { background: var(--ss-red); color: #fff6e6; }
+
+.ub-ss-kicker { margin: 0; color: var(--ss-red); font: 700 13px/18px var(--ub-font-body); letter-spacing: 0.24em; text-transform: uppercase; }
+.ub-ss-h2 { margin: 6px 0 0; font: 700 clamp(34px, 4.4vw, 60px) / 0.98 var(--font-oswald); text-transform: uppercase; }
+.ub-ss-lead { max-width: 34em; margin: 0; color: var(--ink-muted); font-size: 17px; line-height: 26px; }
+.ub-ss-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ss-yellow); color: #1d1208; font: 700 15px/18px var(--ub-font-body); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: transform 0.2s; }
+.ub-ss-btn:hover { transform: translateY(-2px) rotate(-1deg); }
+.ub-ss-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
+.ub-ss-btn svg { width: 18px; height: 18px; }
+.ub-ss-btn--ghost { background: transparent; color: #fff9ef; box-shadow: inset 0 0 0 2px rgb(255 249 239 / 0.8); }
+
+/* ---------- Hero affiche ---------- */
+.ub-ss-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #ff3d12 0%, #ff7a1a 55%, #ffc21a 100%); color: var(--hero-ink); }
+/* Voile chaud centré : titre lisible au milieu du soleil */
+.ub-ss-hero::before { content: ""; position: absolute; z-index: -1; right: -10%; bottom: -30%; width: 70vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd84a 0 45%, rgb(255 190 40 / 0.5) 60%, transparent 70%); }
+.ub-ss-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: var(--space-12); min-height: clamp(620px, 50vw, 800px); padding-top: var(--space-12); padding-bottom: 110px; }
+.ub-ss-hero__text { display: grid; justify-items: start; gap: 18px; }
+/* Carte postale : cadre blanc, légère inclinaison, ombre ; le visuel garde ses proportions */
+.ub-ss-poster { position: relative; justify-self: center; width: min(100%, 440px); margin: 0; padding: 14px 14px 46px; background: #fffaf0; transform: rotate(3deg); box-shadow: 0 30px 60px -24px rgb(90 20 0 / 0.55); }
+.ub-ss-poster__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #ffb347; }
+.ub-ss-poster__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.ub-ss-hero .ub-ss-kicker { color: #fff3c4; }
+.ub-ss-title { display: grid; margin: 0; font: 700 clamp(56px, 6.6vw, 118px) / 0.88 var(--font-oswald); text-transform: uppercase; letter-spacing: 0.005em; text-shadow: 0 6px 0 rgb(120 30 0 / 0.35); }
+.ub-ss-title__hl { color: #fff3c4; -webkit-text-stroke: 0; font-style: italic; }
+.ub-ss-sub { max-width: 34em; margin: 0; color: #fff4e3; font-size: 18px; line-height: 27px; text-shadow: 0 1px 12px rgb(80 20 0 / 0.5); }
+.ub-ss-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
+/* Pastille « autocollant » de remise */
+.ub-ss-sticker { position: absolute; z-index: 2; top: -34px; right: -34px; display: grid; place-items: center; width: 132px; height: 132px; margin: 0; border-radius: 50%; background: var(--ss-yellow); color: #1d1208; transform: rotate(12deg); box-shadow: 0 10px 0 rgb(120 30 0 / 0.25); }
+.ub-ss-sticker small { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
+.ub-ss-sticker b { margin-bottom: 22px; font: 700 40px/1 var(--font-oswald); }
+.ub-ss-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; fill: var(--ss-sand); }
+
+/* ---------- Sections ---------- */
+.ub-ss-section { padding-top: var(--space-16); }
+.ub-sunset > :last-child { padding-bottom: 0; }
+.ub-ss-head { display: grid; justify-items: center; gap: 4px; margin-bottom: 40px; text-align: center; }
+
+/* Cartes postales */
+.ub-ss-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 22px; margin: 0; padding: 0; list-style: none; }
+.ub-ss-cards > li { transform: rotate(var(--tilt, 0deg)); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
+.ub-ss-cards > li:hover { transform: rotate(0) translateY(-6px); }
+.ub-ss-card { position: relative; display: grid; padding: 10px 10px 14px; background: #fffdf8; color: var(--ink); box-shadow: var(--shadow-card); }
+.ub-ss-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
+.ub-ss-card__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-ss-card__back { display: grid; gap: 4px; padding: 12px 4px 0; border-top: 1px dashed #e6cfa7; margin-top: 10px; }
+.ub-ss-card__name { font: 700 17px/1.2 var(--ub-font-body); }
+.ub-ss-card__price { display: flex; gap: 8px; align-items: baseline; }
+.ub-ss-card__price b { color: var(--ss-red); font: 700 20px/1 var(--font-oswald); }
+.ub-ss-card__price s { color: var(--ink-muted); font-size: 14px; }
+/* Timbre dentelé (remise) et cachet (date) */
+.ub-ss-stamp { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; width: 66px; height: 78px; padding: 5px; transform: rotate(6deg);
+  background: radial-gradient(circle, transparent 3px, var(--ss-yellow) 3.5px) -6px -6px / 12px 12px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.2)); }
+.ub-ss-stamp b { position: relative; z-index: 1; display: grid; place-items: center; background: var(--ss-yellow); outline: 1px dashed rgb(29 18 8 / 0.35); outline-offset: -4px; font: 700 19px/1 var(--font-oswald); color: #1d1208; }
+.ub-ss-postmark { position: absolute; top: 24px; left: 20px; padding: 6px 12px; border: 2px solid rgb(11 79 138 / 0.75); border-radius: 999px; color: rgb(11 79 138 / 0.85); font: 700 11px/1 var(--ub-font-body); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-10deg); background: rgb(255 253 248 / 0.7); }
+
+/* Checklist de vacances */
+.ub-ss-check__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; padding: clamp(28px, 4vw, 52px); border-radius: 22px; background: var(--surface); }
+.ub-ss-check__text { display: grid; gap: 10px; position: sticky; top: 110px; }
+.ub-ss-list { background: #fffdf8; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }
+.ub-ss-list ul { margin: 0; padding: 6px 0; list-style: none; }
+.ub-ss-list li + li { border-top: 1px dashed #efdcb8; }
+.ub-ss-item { display: grid; grid-template-columns: 26px 54px 1fr auto; align-items: center; gap: 14px; padding: 12px 18px; color: var(--ink); cursor: pointer; }
+.ub-ss-item input { position: absolute; opacity: 0; pointer-events: none; }
+.ub-ss-item__box { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ss-sea); border-radius: 8px; color: var(--ss-sea); font-weight: 700; transition: background 0.15s; }
+.ub-ss-item input:focus-visible + .ub-ss-item__box { outline: 3px solid var(--ss-yellow); outline-offset: 2px; }
+li.is-on .ub-ss-item__box { background: var(--ss-sea); }
+li.is-on .ub-ss-item__box::after { content: ""; width: 10px; height: 6px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
+.ub-ss-item__box--link { border-style: dashed; }
+.ub-ss-item__img { display: block; width: 54px; height: 54px; overflow: hidden; border-radius: 10px; background: var(--surface); }
+.ub-ss-item__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-ss-item__name { font-weight: 600; }
+.ub-ss-item__name small { display: block; color: var(--ink-muted); font-weight: 400; font-size: 13px; }
+li.is-on .ub-ss-item__name { text-decoration: line-through; text-decoration-color: rgb(232 51 15 / 0.6); }
+.ub-ss-item__price { font: 700 17px/1 var(--font-oswald); color: var(--ss-red); }
+.ub-ss-list__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--ss-sea); color: #fff6e6; }
+.ub-ss-list__foot b { font: 700 26px/1 var(--font-oswald); color: var(--ss-yellow); margin-left: 6px; }
+
+/* Bande coucher de soleil */
+.ub-ss-band { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--space-16); padding: var(--space-16) 0 140px; background: linear-gradient(180deg, #ffc21a 0%, #ff7a1a 45%, #e8330f 100%); color: #fff9ef; text-align: center; }
+.ub-ss-band__sun { position: absolute; left: 50%; bottom: 40px; z-index: -1; width: min(560px, 80vw); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: radial-gradient(circle at 50% 100%, #ffe07a, #ffb21a 60%, transparent 61%); opacity: 0.9; }
+.ub-ss-band__in { display: grid; justify-items: center; gap: 14px; }
+.ub-ss-band .ub-ss-kicker { color: #fff3c4; }
+.ub-ss-band .ub-ss-lead { color: #fff4e3; }
+.ub-ss-cd .ub-countdown__c { background: rgb(29 18 8 / 0.25); color: #fff9ef; box-shadow: none; }
+.ub-ss-cd .ub-countdown__c small { color: #ffe7cf; }
+.ub-ss-wave--sea { fill: var(--ss-sea); height: 90px; }
+
+@media (max-width: 1024px) { .ub-ss-cards { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 900px) {
+  .ub-ss-check__in { grid-template-columns: 1fr; }
+  .ub-ss-check__text { position: static; }
+  .ub-ss-hero .ub-ss-hero__in { grid-template-columns: 1fr; gap: var(--space-8); padding-top: 40px; padding-bottom: 100px; }
+  .ub-ss-poster { width: min(86%, 360px); }
+  .ub-ss-sticker { top: -20px; right: -16px; width: 96px; height: 96px; }
+  .ub-ss-sticker b { font-size: 28px; margin-bottom: 14px; }
+  .ub-ss-sticker small { margin-top: 12px; font-size: 10px; }
+}
+@media (max-width: 600px) {
+  .ub-ss-title { font-size: 56px; }
+  .ub-ss-cards { gap: 18px 12px; }
+  .ub-ss-item { grid-template-columns: 24px 46px 1fr; }
+  .ub-ss-item__price { grid-column: 3; }
+}

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

@@ -94,7 +94,7 @@
    fondu dans le noir à gauche, en haut et en bas. Pas de cadre, pas d'ombre. */
 .ub-tc-hero[data-has-image] .ub-tc-hero__beam { display: none; }
 .ub-tc-hero__cover { position: absolute; inset: 0 0 0 34%; z-index: -1; overflow: hidden; }
-.ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: ub-tc-fadein 1.2s ease both; }
+.ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
 .ub-tc-hero__cover::after {
   content: "";
   position: absolute;
@@ -186,9 +186,7 @@
   object-fit: cover;
   -webkit-mask-image: radial-gradient(72% 68% at 55% 55%, #000 45%, transparent 100%);
   mask-image: radial-gradient(72% 68% at 55% 55%, #000 45%, transparent 100%);
-  animation: ub-tc-fadein 1.2s 0.1s ease both;
 }
-@keyframes ub-tc-fadein { from { opacity: 0; transform: scale(1.03); } }
 .ub-tc-badge {
   position: absolute;
   left: -34px;
@@ -351,14 +349,13 @@
 /* Le visuel couvre tout le hero ; un voile blanc à gauche garde le texte lisible */
 /* Fond du hero = gris béton clair du visuel : l'image posée à droite se fond dans toute la largeur */
 [data-variant="cyber-monday-2"] .ub-tc-hero__cover { display: block; position: absolute; inset: 0 0 0 30%; z-index: -1; }
-[data-variant="cyber-monday-2"] .ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: ub-tc-zoom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+[data-variant="cyber-monday-2"] .ub-tc-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
 [data-variant="cyber-monday-2"] .ub-tc-hero__cover::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, var(--hero-bg) 0%, rgb(255 255 255 / 0.7) 16%, transparent 38%);
 }
-@keyframes ub-tc-zoom { from { transform: scale(1.06); opacity: 0; } }
 [data-variant="cyber-monday-2"] .ub-tc-hero__in { grid-template-columns: minmax(0, 620px); min-height: clamp(580px, 48vw, 760px); }
 [data-variant="cyber-monday-2"] .ub-tc-chip { border-color: var(--ink); background: #fff; color: var(--ink); }
 [data-variant="cyber-monday-2"] .ub-tc-title { font-size: clamp(42px, 5.6vw, 80px); }

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

@@ -0,0 +1,120 @@
+/* Accueil « Training » (Sport 2) — modules/ub/training.tsx. Salle de sport : noir mat, blanc, accent citron vert (contraste AA). */
+
+[data-variant="sport-2"] {
+  --bg: #0c0d0f; --surface: #15171a; --tint-1: #1b1e22; --tint-2: #171a1d; --tint-3: #1d2016; --tint-4: #1a1a1a;
+  --ink: #f2f3f0; --ink-muted: #a3a8a0; --border: #262a2e;
+  --primary: #c6ff3d; --on-primary: #0c0d0f; --accent: #c6ff3d; --on-accent: #0c0d0f;
+  --sale: #c6ff3d; --star: #c6ff3d; --success: #7ee081;
+  --hero-bg: #0c0d0f; --hero-ink: #ffffff; --hero-muted: #c3c8c0;
+  --band-bg: #c6ff3d; --band-ink: #0c0d0f; --bubble-bg: #c6ff3d; --bubble-ink: #0c0d0f;
+  --topbar-bg: #c6ff3d; --topbar-ink: #0c0d0f; --focus: #c6ff3d;
+  --shadow-card: 0 20px 40px -26px rgb(0 0 0 / 0.9);
+  --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: 10px; --ub-r-btn: 8px; --ub-r-tile: 10px; --ub-r-hero: 0px; --ub-r-media: 8px;
+  --tr-lime: #c6ff3d;
+  color-scheme: dark;
+}
+[data-variant="sport-2"] .ub-nav { background: #0c0d0f; border-bottom: 1px solid var(--border); }
+[data-variant="sport-2"] .ub-nav__cta { background: var(--tr-lime); color: #0c0d0f; }
+[data-variant="sport-2"] .ub-footwrap { --foot-bg: #15171a; --foot-ink: #f2f3f0; --cta-bg: var(--tr-lime); --cta-ink: #0c0d0f; }
+[data-variant="sport-2"] .ub-footwrap .ub-footer { border: 1px solid var(--border); }
+[data-variant="sport-2"] .ub-card { background: var(--surface); border: 1px solid var(--border); }
+[data-variant="sport-2"] .ub-badge { background: var(--tr-lime); color: #0c0d0f; }
+
+.ub-tr-kicker { margin: 0; color: var(--tr-lime); font: 600 12px/16px var(--ub-font-body); letter-spacing: 0.26em; text-transform: uppercase; }
+.ub-tr-h2 { margin: 6px 0 0; font: 700 clamp(30px, 3.8vw, 52px) / 1 var(--font-space-grotesk); letter-spacing: -0.02em; text-transform: uppercase; }
+.ub-tr-h3 { margin: 0 0 16px; font: 700 18px/1.2 var(--font-space-grotesk); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
+.ub-tr-lead { max-width: 34em; margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 25px; }
+.ub-tr-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 8px; background: var(--tr-lime); color: #0c0d0f; font: 700 15px/18px var(--font-space-grotesk); letter-spacing: 0.04em; text-transform: uppercase; transition: transform 0.2s; }
+.ub-tr-btn:hover { transform: translateY(-2px); }
+.ub-tr-btn svg { width: 18px; height: 18px; }
+.ub-tr-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
+.ub-tr-price { display: inline-flex; gap: 8px; align-items: baseline; color: var(--tr-lime); font: 700 16px/1 var(--font-space-grotesk); }
+.ub-tr-price s { color: var(--ink-muted); font-weight: 400; font-size: 13px; }
+
+/* ---------- Hero ---------- */
+.ub-tr-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(600px, 52vw, 800px); background: var(--hero-bg); color: #fff; }
+.ub-tr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 20% 50%, rgb(198 255 61 / 0.07), transparent 70%); }
+/* Visuel (854 px de large) : à droite, à sa taille réelle, fondu dans le noir du hero */
+.ub-tr-hero .ub-tr-hero__img { left: auto; width: min(854px, 55%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
+.ub-tr-hero__in { display: grid; width: 100%; padding-top: var(--space-12); padding-bottom: var(--space-16); }
+.ub-tr-hero__text { display: grid; justify-items: start; gap: 22px; max-width: 620px; }
+.ub-tr-title { margin: 0; font: 700 clamp(52px, 7vw, 110px) / 0.92 var(--font-space-grotesk); letter-spacing: -0.04em; text-transform: uppercase; }
+.ub-tr-title__hl { color: var(--tr-lime); }
+.ub-tr-sub { max-width: 32em; margin: 0; color: var(--hero-muted); font-size: 17px; line-height: 27px; }
+.ub-tr-actions { display: flex; flex-wrap: wrap; gap: 12px; }
+/* Mots de la campagne en lettres de tableau */
+.ub-tr-words { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
+.ub-tr-words span { padding: 6px 10px; border: 1px solid #2c2f33; background: repeating-linear-gradient(0deg, #1b1b1b 0 3px, #151515 3px 6px); font: 600 13px/1 var(--font-space-grotesk); letter-spacing: 0.2em; text-transform: uppercase; color: #f4f4f4; }
+.ub-tr-words b { padding: 5px 12px; background: var(--tr-lime); color: #0c0d0f; font: 700 18px/1 var(--font-space-grotesk); }
+
+/* ---------- Sections ---------- */
+.ub-tr-section { padding-top: var(--space-16); }
+.ub-training > :last-child { padding-bottom: var(--space-16); }
+.ub-tr-head { display: grid; gap: 4px; margin-bottom: var(--space-8); }
+
+/* Les plus choisis : bande juste sous le hero */
+.ub-tr-top { margin-top: -54px; position: relative; z-index: 2; }
+.ub-tr-top .ub-tr-h3 { color: #fff; }
+.ub-tr-top__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
+.ub-tr-rank { display: grid; grid-template-columns: auto 60px 1fr; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); transition: border-color 0.2s, transform 0.2s; }
+.ub-tr-rank:hover { border-color: var(--tr-lime); transform: translateY(-2px); }
+.ub-tr-rank__n { font: 700 22px/1 var(--font-space-grotesk); color: var(--tr-lime); }
+.ub-tr-rank__img { display: block; width: 60px; height: 60px; overflow: hidden; border-radius: 8px; background: #1f2226; }
+.ub-tr-rank__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-tr-rank__body { display: grid; gap: 4px; min-width: 0; }
+.ub-tr-rank__body b { overflow: hidden; font-size: 14px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Programme de la semaine */
+.ub-tr-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: d; }
+.ub-tr-day { display: grid; gap: 8px; height: 100%; padding: 14px 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); transition: border-color 0.2s; }
+.ub-tr-day:hover { border-color: var(--tr-lime); }
+.ub-tr-day__d { font: 700 13px/1 var(--font-space-grotesk); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
+.ub-tr-day__f { font: 700 17px/1.1 var(--font-space-grotesk); color: var(--tr-lime); text-transform: uppercase; }
+.ub-tr-day__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #1f2226; }
+.ub-tr-day__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); }
+.ub-tr-day__name { font-size: 13px; line-height: 17px; }
+.is-rest .ub-tr-day { border-style: dashed; }
+.is-rest .ub-tr-day__f { color: var(--ink); }
+
+/* Pack de départ */
+.ub-tr-pack { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 16px; background: linear-gradient(135deg, #15171a, #101113); border: 1px solid var(--border); }
+.ub-tr-pack__text { display: grid; justify-items: start; gap: 14px; }
+.ub-tr-pack__total { display: grid; gap: 4px; margin: 6px 0 0; }
+.ub-tr-pack__total span { color: var(--ink-muted); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
+.ub-tr-pack__total b { font: 700 44px/1 var(--font-space-grotesk); color: var(--tr-lime); }
+.ub-tr-pack__total em { font-style: normal; color: #fff; font-weight: 600; }
+.ub-tr-cd .ub-countdown__c { background: #0c0d0f; color: var(--tr-lime); box-shadow: none; border: 1px solid var(--border); }
+.ub-tr-pack__items { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin: 0; padding: 0; list-style: none; }
+.ub-tr-pack__items li + li::before { content: "+"; position: absolute; margin: 30% 0 0 -26px; color: var(--tr-lime); font: 700 28px/1 var(--font-space-grotesk); }
+.ub-tr-pack__items li { position: relative; }
+.ub-tr-pack__item { display: grid; gap: 8px; color: var(--ink); }
+.ub-tr-pack__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #1f2226; }
+.ub-tr-pack__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-tr-pack__name { font-size: 14px; line-height: 18px; font-weight: 600; }
+
+/* Engagements */
+.ub-tr-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
+.ub-tr-promise li { display: flex; gap: 12px; align-items: center; padding: 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
+.ub-tr-promise svg { flex: none; width: 26px; height: 26px; color: var(--tr-lime); }
+.ub-tr-promise span { display: grid; }
+.ub-tr-promise b { font-size: 15px; } .ub-tr-promise small { color: var(--ink-muted); font-size: 13px; }
+
+@media (max-width: 1024px) {
+  .ub-tr-top__list, .ub-tr-promise { grid-template-columns: repeat(2, 1fr); }
+  .ub-tr-week { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
+  .ub-tr-week li { scroll-snap-align: start; }
+}
+@media (max-width: 900px) {
+  .ub-tr-hero { display: block; min-height: 0; }
+  .ub-tr-hero .ub-tr-hero__img { width: 100%; bottom: auto; height: 380px; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); }
+  .ub-tr-hero .ub-tr-hero__in { padding-top: 300px; padding-bottom: 40px; }
+  .ub-tr-top { margin-top: var(--space-8); }
+  .ub-tr-pack { grid-template-columns: 1fr; }
+}
+@media (max-width: 600px) {
+  .ub-tr-title { font-size: 50px; }
+  .ub-tr-top__list, .ub-tr-promise { grid-template-columns: 1fr; }
+  .ub-tr-pack__items { gap: 22px; }
+}

package/templates/storefront/themes/jeux/campaign.en.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "The summer Games: up to {discount} off",
+    "Free shipping over {freeShipping}",
+    "48h express delivery"
+  ],
+  "hero": {
+    "eyebrow": "The summer Games",
+    "title": "Let the price flame burn",
+    "highlight": "flame",
+    "sub": "Gear, outfits and everything for a sporty summer, up to {discount} off. Until {endDate}.",
+    "cta": "Enter the arena",
+    "cta2": "See the podium",
+    "bubble": [
+      "Up to",
+      "{discount}",
+      "champions"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Record to beat",
+    "title": "Record-breaking prices",
+    "text": "The best deals of the sporting summer, until {endDate}.",
+    "cta": "Break the record",
+    "seal": "Until {endDate}"
+  },
+  "sections": {
+    "categories": "Disciplines",
+    "products": "Store champions"
+  }
+}

package/templates/storefront/themes/jeux/campaign.fr.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Les Jeux de l'été : jusqu'à -{discount}",
+    "Livraison offerte dès {freeShipping}",
+    "Livraison express 48 h"
+  ],
+  "hero": {
+    "eyebrow": "Les Jeux de l'été",
+    "title": "Que la flamme des prix s'allume",
+    "highlight": "flamme",
+    "sub": "Équipements, tenues et tout pour vivre l'été sportif jusqu'à -{discount}. Jusqu'au {endDate}.",
+    "cta": "Entrer dans l'arène",
+    "cta2": "Voir le podium",
+    "bubble": [
+      "Jusqu'à",
+      "{discount}",
+      "champions"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Record à battre",
+    "title": "Des prix qui battent des records",
+    "text": "Les meilleures offres de l'été sportif, jusqu'au {endDate}.",
+    "cta": "Battre le record",
+    "seal": "Jusqu'au {endDate}"
+  },
+  "sections": {
+    "categories": "Les disciplines",
+    "products": "Les champions de la boutique"
+  }
+}

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

@@ -0,0 +1,11 @@
+{
+  "id": "jeux",
+  "name": "Jeux · Flamme",
+  "reference": "flamme, podium (sans nom ni symbole protégé)",
+  "layout": "cyber-monday",
+  "fonts": {
+    "head": "sora",
+    "body": "inter"
+  },
+  "home": "arena"
+}

package/templates/storefront/themes/jeux-2/campaign.en.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Every discipline up to {discount} off",
+    "Free shipping over {freeShipping}",
+    "Free 30-day returns"
+  ],
+  "hero": {
+    "eyebrow": "The summer of every sport",
+    "title": "Every sport has its champion",
+    "highlight": "champion",
+    "sub": "Running, swimming, cycling, rackets, balls: up to {discount} off every discipline, until {endDate}.",
+    "cta": "Pick my discipline",
+    "cta2": "Medal table",
+    "bubble": [
+      "Up to",
+      "{discount}",
+      "all sports"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Relay",
+    "title": "Pass the baton to great deals",
+    "text": "One deal after another, until {endDate}.",
+    "cta": "Take the baton",
+    "seal": "Until {endDate}"
+  },
+  "sections": {
+    "categories": "Every discipline",
+    "products": "The medal table"
+  }
+}

package/templates/storefront/themes/jeux-2/campaign.fr.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Toutes les disciplines jusqu'à -{discount}",
+    "Livraison offerte dès {freeShipping}",
+    "Retours gratuits 30 jours"
+  ],
+  "hero": {
+    "eyebrow": "L'été de tous les sports",
+    "title": "Chaque sport a son champion",
+    "highlight": "champion",
+    "sub": "Course, natation, vélo, raquettes, ballons : jusqu'à -{discount} sur toutes les disciplines, jusqu'au {endDate}.",
+    "cta": "Choisir ma discipline",
+    "cta2": "Tableau des médailles",
+    "bubble": [
+      "Jusqu'à",
+      "{discount}",
+      "tous sports"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Relais",
+    "title": "Passez le relais aux bonnes affaires",
+    "text": "Une offre après l'autre, jusqu'au {endDate}.",
+    "cta": "Prendre le relais",
+    "seal": "Jusqu'au {endDate}"
+  },
+  "sections": {
+    "categories": "Toutes les disciplines",
+    "products": "Le tableau des médailles"
+  }
+}

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

@@ -0,0 +1,11 @@
+{
+  "id": "jeux-2",
+  "name": "Jeux · Mosaïque",
+  "reference": "toutes les disciplines, multicolore (sans nom ni symbole protégé)",
+  "layout": "cyber-monday",
+  "fonts": {
+    "head": "outfit",
+    "body": "inter"
+  },
+  "home": "mosaic"
+}

package/templates/storefront/themes/mubarak/campaign.en.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Ramadan Mubarak: up to {discount} off",
+    "Free shipping over {freeShipping}",
+    "Gift boxes ready to give"
+  ],
+  "hero": {
+    "eyebrow": "Ramadan Mubarak",
+    "title": "Nights that shine, gifts that matter",
+    "highlight": "shine",
+    "sub": "Lanterns, fragrances, gift boxes and festive outfits up to {discount} off. Until {endDate}, to share with the ones you love.",
+    "cta": "Discover the selection",
+    "cta2": "Gift ideas",
+    "bubble": [
+      "Up to",
+      "{discount}",
+      "off gifts"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Until Eid",
+    "title": "Get ready for the celebration",
+    "text": "Order today, receive it before Eid. Offers valid until {endDate}.",
+    "cta": "Get ready",
+    "seal": "Until {endDate}"
+  },
+  "sections": {
+    "categories": "By occasion",
+    "products": "Tonight's selection"
+  }
+}

package/templates/storefront/themes/mubarak/campaign.fr.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Ramadan Moubarak : jusqu'à -{discount}",
+    "Livraison offerte dès {freeShipping}",
+    "Coffrets cadeaux prêts à offrir"
+  ],
+  "hero": {
+    "eyebrow": "Ramadan Moubarak",
+    "title": "Des nuits qui brillent, des cadeaux qui comptent",
+    "highlight": "brillent",
+    "sub": "Lanternes, parfums, coffrets et tenues de fête jusqu'à -{discount}. Jusqu'au {endDate}, pour partager avec ceux qu'on aime.",
+    "cta": "Découvrir la sélection",
+    "cta2": "Idées cadeaux",
+    "bubble": [
+      "Jusqu'à",
+      "{discount}",
+      "sur la fête"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Jusqu'à l'Aïd",
+    "title": "Préparez la fête en avance",
+    "text": "Commandez aujourd'hui, recevez avant l'Aïd. Offres valables jusqu'au {endDate}.",
+    "cta": "Je prépare la fête",
+    "seal": "Jusqu'au {endDate}"
+  },
+  "sections": {
+    "categories": "Par occasion",
+    "products": "La sélection de la nuit"
+  }
+}

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

@@ -0,0 +1,11 @@
+{
+  "id": "mubarak",
+  "name": "Mubarak · Nuit",
+  "reference": "Ramadan, Aïd, Tabaski : nuit bleue, or, lanternes",
+  "layout": "cyber-monday",
+  "fonts": {
+    "head": "serif",
+    "body": "jakarta"
+  },
+  "home": "lantern"
+}

package/templates/storefront/themes/mubarak-2/campaign.en.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Eid Mubarak: up to {discount} off",
+    "Free shipping over {freeShipping}",
+    "Free gift wrapping"
+  ],
+  "hero": {
+    "eyebrow": "Eid Mubarak",
+    "title": "The festive souk is open",
+    "highlight": "souk",
+    "sub": "Kaftans, tea, incense, sweets and decor up to {discount} off. Until {endDate}, for a family celebration.",
+    "cta": "Enter the souk",
+    "cta2": "Our wishes",
+    "bubble": [
+      "Up to",
+      "{discount}",
+      "at the souk"
+    ]
+  },
+  "promo": {
+    "eyebrow": "The Eid gift box",
+    "title": "Share a little sweetness",
+    "text": "Ideas for everyone, wrapped with care. Until {endDate}.",
+    "cta": "See gift boxes",
+    "seal": "Until {endDate}"
+  },
+  "sections": {
+    "categories": "Who is it for?",
+    "products": "Souk treasures"
+  }
+}

package/templates/storefront/themes/mubarak-2/campaign.fr.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Aïd Moubarak : jusqu'à -{discount}",
+    "Livraison offerte dès {freeShipping}",
+    "Emballage cadeau offert"
+  ],
+  "hero": {
+    "eyebrow": "Aïd Moubarak",
+    "title": "Le souk de la fête est ouvert",
+    "highlight": "souk",
+    "sub": "Caftans, thé, encens, douceurs et décoration jusqu'à -{discount}. Jusqu'au {endDate}, pour une fête en famille.",
+    "cta": "Entrer dans le souk",
+    "cta2": "Nos vœux",
+    "bubble": [
+      "Jusqu'à",
+      "{discount}",
+      "au souk"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Le coffret de l'Aïd",
+    "title": "Offrez un peu de douceur",
+    "text": "Des idées pour chacun, emballées avec soin. Jusqu'au {endDate}.",
+    "cta": "Voir les coffrets",
+    "seal": "Jusqu'au {endDate}"
+  },
+  "sections": {
+    "categories": "Pour qui ?",
+    "products": "Les trésors du souk"
+  }
+}

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

@@ -0,0 +1,11 @@
+{
+  "id": "mubarak-2",
+  "name": "Mubarak · Sable",
+  "reference": "Aïd, Korité, Tabaski : souk, sable, terre cuite",
+  "layout": "cyber-monday",
+  "fonts": {
+    "head": "poppins",
+    "body": "inter"
+  },
+  "home": "souk"
+}

package/templates/storefront/themes/sport/campaign.en.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "Match day: up to {discount} off",
+    "Free shipping over {freeShipping}",
+    "Free size exchange"
+  ],
+  "hero": {
+    "eyebrow": "Match day",
+    "title": "Wear your colours",
+    "highlight": "colours",
+    "sub": "Jerseys, shorts and gear up to {discount} off. Final whistle on {endDate}.",
+    "cta": "Pick my jersey",
+    "cta2": "See the team",
+    "bubble": [
+      "Up to",
+      "{discount}",
+      "off jerseys"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Half time",
+    "title": "Half-time prices",
+    "text": "The best deals of the season, until the final whistle on {endDate}.",
+    "cta": "Step on the pitch",
+    "seal": "Until {endDate}"
+  },
+  "sections": {
+    "categories": "By sport",
+    "products": "Team of the moment"
+  }
+}