@salifbiaye/create-boutique 0.3.6 → 0.4.1

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

@@ -0,0 +1,441 @@
+/* Accueil « Tech » (thèmes Cyber Monday) — modules/ub/tech.tsx. Lancement produit : grille lumineuse, bandeau défilant,
+   flash deals, bento, fiche technique. Cyber Monday 1 : nuit violette, visuel sur le côté.
+   Cyber Monday 2 : blanc studio, le visuel couvre le hero, mot en lettres « tuiles ».
+   Les jetons ci-dessous s'appliquent à tout le site (produit, panier, checkout, compte). */
+
+[data-theme="cyber-monday"]:not([data-variant]) {
+  --bg: #0b0716; --surface: #140d27; --tint-1: #1d1338; --tint-2: #181032; --tint-3: #16122c; --tint-4: #221440;
+  --ink: #f4f0ff; --ink-muted: #a69dc9; --border: #2a1f4a;
+  --primary: #8b5cf6; --on-primary: #ffffff; --accent: #c4b5fd; --on-accent: #1a0f33;
+  --sale: #f0abfc; --star: #facc15; --success: #4ade80;
+  --hero-bg: #05030b; --hero-ink: #ffffff; --hero-muted: #b9b0dc;
+  --band-bg: #8b5cf6; --band-ink: #ffffff; --bubble-bg: #8b5cf6; --bubble-ink: #ffffff;
+  --topbar-bg: #6d28d9; --topbar-ink: #ffffff; --focus: #c4b5fd;
+  --shadow-card: 0 18px 40px -24px rgb(0 0 0 / 0.8);
+  --ub-font-head: var(--font-space-grotesk); --ub-font-body: var(--font-inter);
+  --ub-head-weight: 700; --ub-head-case: none; --ub-head-track: -0.03em;
+  --ub-r-card: 18px; --ub-r-btn: 12px; --ub-r-tile: 18px; --ub-r-media: 14px;
+  --tc-glow: 0 0 0 1px rgb(139 92 246 / 0.35), 0 18px 60px -18px rgb(139 92 246 / 0.65);
+  --tc-card: linear-gradient(180deg, #171030 0%, #110b22 100%);
+  color-scheme: dark;
+}
+[data-variant="cyber-monday-2"] {
+  --bg: #ffffff; --surface: #f4f4f6; --tint-1: #efeff2; --tint-2: #f1f0fb; --tint-3: #eef3f2; --tint-4: #f6f1ee;
+  --ink: #0b0b0f; --ink-muted: #5f616c; --border: #e4e4ea;
+  --primary: #0b0b0f; --on-primary: #ffffff; --accent: #5b3df5; --on-accent: #ffffff;
+  --sale: #e11d48; --star: #f59e0b; --success: #15803d;
+  --hero-bg: #ececec; --hero-ink: #0b0b0f; --hero-muted: #4d4f59;
+  --band-bg: #0b0b0f; --band-ink: #ffffff; --bubble-bg: #0b0b0f; --bubble-ink: #ffffff;
+  --topbar-bg: #0b0b0f; --topbar-ink: #ffffff; --focus: #5b3df5;
+  --shadow-card: 0 14px 34px -22px rgb(11 11 15 / 0.35);
+  --ub-font-head: var(--font-sora); --ub-font-body: var(--font-inter);
+  --ub-head-weight: 700; --ub-head-case: none; --ub-head-track: -0.035em;
+  --ub-r-card: 14px; --ub-r-btn: 999px; --ub-r-tile: 14px; --ub-r-hero: 0px; --ub-r-media: 10px;
+  --tc-glow: 0 18px 40px -26px rgb(11 11 15 / 0.45);
+  --tc-card: #ffffff;
+  color-scheme: light;
+}
+
+/* ---------- En-tête et pied de page ---------- */
+[data-theme="cyber-monday"]:not([data-variant]) .ub-nav { background: rgb(11 7 22 / 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-search { background: var(--surface); border-color: var(--border); color: var(--ink); }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-nav__cta { background: var(--primary); color: #fff; box-shadow: var(--tc-glow); }
+[data-variant="cyber-monday-2"] .ub-nav { background: rgb(255 255 255 / 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
+[data-variant="cyber-monday-2"] .ub-nav__cta { background: var(--ink); color: #fff; }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-footwrap { --foot-bg: #120b24; --foot-ink: var(--ink); --cta-bg: var(--primary); --cta-ink: #ffffff; }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-footwrap .ub-footer { border: 1px solid var(--border); }
+[data-variant="cyber-monday-2"] .ub-footwrap { --foot-bg: #0b0b0f; --foot-ink: #f4f4f6; --cta-bg: #ececec; --cta-ink: #0b0b0f; }
+
+/* Cartes produits du reste du site (boutique, recherche, produits liés) */
+[data-theme="cyber-monday"]:not([data-variant]) .ub-card { background: var(--tc-card); border: 1px solid var(--border); }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-card__media { background: #1a1233; }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-card__cart { background: var(--surface); color: var(--ink); border-color: var(--border); }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-badge { background: var(--primary); color: #fff; }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-tile { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-tile__ic { color: var(--accent); }
+[data-theme="cyber-monday"]:not([data-variant]) .ub-eyebrow { background: rgb(139 92 246 / 0.18); color: var(--accent); }
+[data-variant="cyber-monday-2"] .ub-card { border: 1px solid var(--border); box-shadow: none; }
+[data-variant="cyber-monday-2"] .ub-card:hover { box-shadow: var(--shadow-card); }
+[data-variant="cyber-monday-2"] .ub-badge { background: var(--sale); color: #fff; }
+[data-variant="cyber-monday-2"] .ub-eyebrow { background: var(--ink); color: #fff; }
+[data-variant="cyber-monday-2"] .ub-tile__ic { color: var(--accent); }
+
+/* ---------- Hero ---------- */
+.ub-tc-hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background: radial-gradient(55% 75% at 78% 45%, #170a33 0%, var(--hero-bg) 70%);
+  color: var(--hero-ink);
+}
+.ub-tc-hero__grid {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-image:
+    linear-gradient(rgb(139 92 246 / 0.12) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(139 92 246 / 0.12) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: radial-gradient(70% 70% at 30% 60%, #000 20%, transparent 75%);
+}
+.ub-tc-hero__beam {
+  position: absolute;
+  top: -30%;
+  left: 38%;
+  z-index: -1;
+  width: 38%;
+  height: 160%;
+  background: linear-gradient(180deg, rgb(167 139 250 / 0.35), transparent 70%);
+  filter: blur(40px);
+  transform: rotate(-24deg);
+  pointer-events: none;
+}
+/* Cyber Monday 1 : le visuel fait partie du fond (comme Black Friday) : posé à droite sur toute la hauteur,
+   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; }
+.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::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, var(--hero-bg) 0%, rgb(5 3 11 / 0.55) 20%, transparent 45%),
+    linear-gradient(0deg, var(--hero-bg) 0%, transparent 18%),
+    linear-gradient(180deg, var(--hero-bg) 0%, transparent 12%);
+}
+.ub-tc-hero[data-has-image] .ub-tc-hero__side > img { display: none; }
+.ub-tc-hero[data-has-image] .ub-tc-hero__side { aspect-ratio: auto; align-self: end; }
+.ub-tc-hero[data-has-image] .ub-tc-badge { position: relative; left: auto; bottom: auto; justify-self: start; width: max-content; }
+.ub-tc-hero__in {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: var(--space-12);
+  align-items: center;
+  min-height: clamp(560px, 46vw, 720px);
+  padding-top: var(--space-12);
+  padding-bottom: var(--space-12);
+}
+.ub-tc-hero__text { display: grid; gap: var(--space-6); justify-items: start; animation: ub-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+.ub-tc-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px 6px 10px;
+  border: 1px solid rgb(196 181 253 / 0.35);
+  border-radius: 999px;
+  background: rgb(139 92 246 / 0.14);
+  color: var(--accent);
+  font: 600 13px/18px var(--ub-font-body);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.ub-tc-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgb(74 222 128 / 0.2); animation: ub-tc-pulse 1.6s ease-in-out infinite; }
+@keyframes ub-tc-pulse { 50% { box-shadow: 0 0 0 8px rgb(74 222 128 / 0); } }
+.ub-tc-title {
+  margin: 0;
+  font: 700 clamp(44px, 6vw, 88px) / 0.98 var(--ub-font-head);
+  letter-spacing: -0.04em;
+  text-wrap: balance;
+}
+.ub-tc-title__hl {
+  background: linear-gradient(92deg, #c4b5fd 0%, #8b5cf6 45%, #f0abfc 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 0 22px rgb(139 92 246 / 0.55));
+}
+.ub-tc-tile { display: inline; }
+.ub-tc-sub { max-width: 34em; margin: 0; color: var(--hero-muted); font-size: 18px; line-height: 28px; }
+.ub-tc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
+.ub-tc-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 52px;
+  padding: 0 26px;
+  border-radius: var(--ub-r-btn);
+  font: 600 16px/20px var(--ub-font-body);
+  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
+}
+.ub-tc-btn svg { width: 18px; height: 18px; }
+.ub-tc-btn--solid { background: var(--primary); color: var(--on-primary); box-shadow: var(--tc-glow); }
+.ub-tc-btn--solid:hover { transform: translateY(-2px); }
+.ub-tc-btn--ghost { border: 1px solid rgb(255 255 255 / 0.22); color: var(--hero-ink); }
+.ub-tc-btn--ghost:hover { background: rgb(255 255 255 / 0.06); }
+.ub-tc-hero__cd .ub-countdown__c,
+.ub-tc-flash__cd .ub-countdown__c {
+  min-width: 70px;
+  height: 70px;
+  border: 1px solid var(--border);
+  background: rgb(20 13 39 / 0.8);
+  color: var(--ink);
+  box-shadow: inset 0 0 22px rgb(139 92 246 / 0.18);
+}
+.ub-tc-hero__cd .ub-countdown__c b,
+.ub-tc-flash__cd .ub-countdown__c b { font: 700 26px/30px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent); }
+
+/* Visuel sur le côté (Cyber Monday 1) */
+/* Pas de cadre : le visuel se fond dans la nuit du hero (bords en fondu) */
+.ub-tc-hero__side { position: relative; justify-self: end; width: min(115%, 640px); margin-right: -6%; aspect-ratio: 4 / 5; }
+.ub-tc-hero__side > img,
+.ub-tc-hero__side > .ub-ph {
+  width: 100%;
+  height: 100%;
+  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;
+  bottom: 48px;
+  z-index: 2;
+  display: grid;
+  justify-items: center;
+  margin: 0;
+  padding: 16px 22px;
+  border: 1px solid rgb(196 181 253 / 0.4);
+  border-radius: 20px;
+  background: rgb(20 13 39 / 0.72);
+  backdrop-filter: blur(14px);
+  color: #fff;
+  box-shadow: var(--tc-glow);
+}
+.ub-tc-badge small { color: var(--hero-muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
+.ub-tc-badge b { font: 700 44px/1 var(--ub-font-head); color: var(--accent); }
+
+/* ---------- Bandeau défilant ---------- */
+.ub-tc-ticker { overflow: hidden; border-block: 1px solid var(--border); background: var(--band-bg); color: var(--band-ink); }
+.ub-tc-ticker__track { display: flex; width: max-content; animation: ub-tc-marquee 32s linear infinite; }
+.ub-tc-ticker__row { display: flex; gap: 48px; margin: 0; padding: 14px 24px; list-style: none; }
+.ub-tc-ticker__row li { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font: 600 15px/20px var(--ub-font-head); letter-spacing: 0.04em; text-transform: uppercase; }
+.ub-tc-ticker__row svg { width: 16px; height: 16px; opacity: 0.8; }
+@keyframes ub-tc-marquee { to { transform: translateX(-50%); } }
+@media (prefers-reduced-motion: reduce) { .ub-tc-ticker__track { animation: none; } }
+
+/* ---------- Fiche technique (avantages) ---------- */
+.ub-tc-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: var(--space-12); }
+.ub-tc-spec { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: var(--ub-r-card); background: var(--surface); }
+.ub-tc-spec svg { flex: none; width: 26px; height: 26px; color: var(--accent); }
+.ub-tc-spec span { display: grid; }
+.ub-tc-spec b { font-size: 15px; line-height: 20px; }
+.ub-tc-spec small { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
+
+/* ---------- Sections ---------- */
+.ub-tc-section { padding-top: var(--space-16); }
+.ub-tech > :last-child { padding-bottom: var(--space-16); }
+.ub-tc-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--accent); font: 600 13px/18px var(--ub-font-body); letter-spacing: 0.12em; text-transform: uppercase; }
+.ub-tc-kicker svg { width: 15px; height: 15px; }
+.ub-tc-h2 { margin: 8px 0 0; font: 700 clamp(28px, 3.4vw, 44px) / 1.05 var(--ub-font-head); letter-spacing: -0.03em; }
+.ub-tc-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
+.ub-tc-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; white-space: nowrap; }
+.ub-tc-link svg { width: 16px; height: 16px; }
+
+/* Flash deals */
+.ub-tc-flash__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
+.ub-tc-flash__row {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(240px, 1fr);
+  gap: 16px;
+  margin: 0;
+  padding: 0 0 12px;
+  list-style: none;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: thin;
+}
+.ub-tc-flash__row > li { scroll-snap-align: start; }
+@media (min-width: 1100px) { .ub-tc-flash__row { grid-auto-columns: calc((100% - 48px) / 4); } }
+
+/* Carte produit */
+.ub-tc-card {
+  position: relative;
+  display: grid;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+  background: var(--tc-card);
+  color: var(--ink);
+  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
+}
+.ub-tc-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--tc-glow); }
+.ub-tc-card__media { position: relative; display: block; aspect-ratio: 1; margin: 10px 10px 0; overflow: hidden; border-radius: var(--ub-r-media); background: var(--surface); }
+.ub-tc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
+.ub-tc-card:hover .ub-tc-card__media img { transform: scale(1.05); }
+.ub-tc-off {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--primary);
+  color: var(--on-primary);
+  font: 700 13px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.ub-tc-card__rank { position: absolute; right: 10px; top: 10px; padding: 3px 8px; border-radius: 8px; background: rgb(0 0 0 / 0.55); color: #fff; font: 600 12px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.ub-tc-card__body { display: grid; gap: 6px; padding: 14px 16px 18px; }
+.ub-tc-card__name { padding-right: 34px; font-weight: 600; font-size: 15px; line-height: 20px; }
+.ub-tc-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
+.ub-tc-card__price b { font: 700 18px/22px var(--ub-font-head); color: var(--accent); }
+.ub-tc-card__price s { color: var(--ink-muted); font-size: 14px; }
+.ub-tc-card__price--lg b { font-size: 34px; line-height: 38px; }
+.ub-tc-card__price--lg .ub-tc-off { position: static; }
+.ub-tc-card__go {
+  position: absolute;
+  right: 14px;
+  bottom: 16px;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--ink);
+  transition: background 0.2s, color 0.2s;
+}
+.ub-tc-card__go svg { width: 16px; height: 16px; }
+.ub-tc-card:hover .ub-tc-card__go { background: var(--primary); color: var(--on-primary); }
+
+/* Bento */
+.ub-tc-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 16px; }
+.ub-tc-bento__main {
+  grid-column: span 2;
+  grid-row: span 2;
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+  background: radial-gradient(80% 70% at 50% 20%, #2a1263 0%, #120b24 70%);
+  color: #fff;
+}
+.ub-tc-bento__img { display: block; min-height: 300px; padding: 24px 24px 0; }
+.ub-tc-bento__img img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 16px; }
+.ub-tc-bento__txt { display: grid; justify-items: start; gap: 10px; padding: 24px; }
+.ub-tc-bento__name { font: 700 clamp(24px, 2.4vw, 32px) / 1.1 var(--ub-font-head); letter-spacing: -0.03em; }
+
+/* Grille */
+.ub-tc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
+
+/* Bannière finale */
+.ub-tc-final {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  justify-items: center;
+  gap: 14px;
+  overflow: hidden;
+  padding: clamp(48px, 7vw, 96px) 24px;
+  border: 1px solid var(--border);
+  border-radius: 28px;
+  background: #0e0820;
+  color: #fff;
+  text-align: center;
+}
+.ub-tc-final__glow { position: absolute; inset: auto 10% -60% 10%; z-index: -1; height: 120%; background: radial-gradient(closest-side, rgb(139 92 246 / 0.7), transparent); filter: blur(30px); }
+.ub-tc-final__title { max-width: 18em; margin: 0; font: 700 clamp(30px, 4.4vw, 58px) / 1.02 var(--ub-font-head); letter-spacing: -0.04em; text-wrap: balance; }
+.ub-tc-final__text { max-width: 36em; margin: 0; color: #cfc8ea; font-size: 17px; line-height: 26px; }
+
+/* ================= Cyber Monday 2 : blanc studio ================= */
+[data-variant="cyber-monday-2"] .ub-tc-hero { background: var(--hero-bg); }
+[data-variant="cyber-monday-2"] .ub-tc-hero__grid,
+[data-variant="cyber-monday-2"] .ub-tc-hero__beam,
+[data-variant="cyber-monday-2"] .ub-tc-hero__side { display: none; }
+/* 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% 78%; 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::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, var(--hero-bg) 0%, rgb(236 236 236 / 0.7) 18%, transparent 42%);
+}
+@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); }
+/* Mot en lettres « tuiles », comme les lettres posées sur le visuel */
+[data-variant="cyber-monday-2"] .ub-tc-title__hl { display: inline-flex; flex-wrap: wrap; gap: 0.08em; background: none; color: var(--ink); filter: none; vertical-align: 0.06em; }
+[data-variant="cyber-monday-2"] .ub-tc-tile {
+  display: inline-grid;
+  place-items: center;
+  min-width: 0.78em;
+  height: 1.06em;
+  padding: 0 0.06em;
+  border: 1px solid rgb(11 11 15 / 0.12);
+  border-radius: 0.08em;
+  background: rgb(255 255 255 / 0.72);
+  box-shadow: 0 0.06em 0.14em rgb(11 11 15 / 0.14);
+  font-size: 0.9em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+[data-variant="cyber-monday-2"] .ub-tc-tile:nth-child(odd) { transform: rotate(-2deg); }
+[data-variant="cyber-monday-2"] .ub-tc-tile:nth-child(3n) { transform: rotate(2.5deg) translateY(0.03em); }
+[data-variant="cyber-monday-2"] .ub-tc-tile--sp { min-width: 0.3em; border: 0; background: none; box-shadow: none; }
+[data-variant="cyber-monday-2"] .ub-tc-sub { color: var(--hero-muted); }
+[data-variant="cyber-monday-2"] .ub-tc-btn--solid { background: var(--ink); color: #fff; }
+[data-variant="cyber-monday-2"] .ub-tc-btn--ghost { border-color: var(--ink); color: var(--ink); background: rgb(255 255 255 / 0.6); }
+[data-variant="cyber-monday-2"] .ub-tc-btn--ghost:hover { background: #fff; }
+[data-variant="cyber-monday-2"] .ub-tc-hero__cd .ub-countdown__c,
+[data-variant="cyber-monday-2"] .ub-tc-flash__cd .ub-countdown__c { border-color: var(--border); background: #fff; box-shadow: var(--shadow-card); }
+[data-variant="cyber-monday-2"] .ub-tc-hero__cd .ub-countdown__c b,
+[data-variant="cyber-monday-2"] .ub-tc-flash__cd .ub-countdown__c b { color: var(--ink); }
+[data-variant="cyber-monday-2"] .ub-tc-ticker { border-color: var(--ink); }
+[data-variant="cyber-monday-2"] .ub-tc-spec { background: #fff; }
+[data-variant="cyber-monday-2"] .ub-tc-kicker,
+[data-variant="cyber-monday-2"] .ub-tc-link { color: var(--accent); }
+[data-variant="cyber-monday-2"] .ub-tc-card { border-color: var(--border); }
+[data-variant="cyber-monday-2"] .ub-tc-card:hover { border-color: var(--ink); }
+[data-variant="cyber-monday-2"] .ub-tc-card__price b { color: var(--ink); }
+[data-variant="cyber-monday-2"] .ub-tc-off { background: var(--sale); color: #fff; }
+[data-variant="cyber-monday-2"] .ub-tc-card:hover .ub-tc-card__go { background: var(--ink); color: #fff; }
+[data-variant="cyber-monday-2"] .ub-tc-bento__main { background: var(--surface); color: var(--ink); }
+[data-variant="cyber-monday-2"] .ub-tc-bento__main .ub-tc-btn--solid { background: var(--ink); color: #fff; }
+[data-variant="cyber-monday-2"] .ub-tc-final { background: #0b0b0f; border-color: #0b0b0f; }
+[data-variant="cyber-monday-2"] .ub-tc-final__glow { background: radial-gradient(closest-side, rgb(91 61 245 / 0.55), transparent); }
+[data-variant="cyber-monday-2"] .ub-tc-final .ub-tc-kicker { color: #b9adff; }
+[data-variant="cyber-monday-2"] .ub-tc-final .ub-tc-btn--solid { background: #fff; color: var(--ink); }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 1024px) {
+  .ub-tc-specs, .ub-tc-grid { grid-template-columns: repeat(2, 1fr); }
+  .ub-tc-bento { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 900px) {
+  .ub-tc-hero__in { grid-template-columns: 1fr; gap: var(--space-8); min-height: 0; padding-top: var(--space-8); }
+  .ub-tc-hero__side { justify-self: center; width: min(100%, 440px); margin-right: 0; }
+  .ub-tc-hero__cover { inset: 38% 0 0 0; }
+  .ub-tc-hero__cover img { object-position: 60% 60%; }
+  .ub-tc-hero__cover::after { background: linear-gradient(180deg, var(--hero-bg) 0%, rgb(5 3 11 / 0.4) 35%, transparent 60%), linear-gradient(0deg, var(--hero-bg) 0%, transparent 20%); }
+  .ub-tc-hero[data-has-image] .ub-tc-hero__side { min-height: 300px; justify-self: stretch; width: 100%; }
+  .ub-tc-badge { left: 12px; bottom: 16px; padding: 10px 16px; }
+  .ub-tc-badge b { font-size: 32px; }
+  /* Cyber Monday 2 mobile : visuel en haut, texte dessous sur fond blanc */
+  [data-variant="cyber-monday-2"] .ub-tc-hero { display: grid; background: #fff; }
+  [data-variant="cyber-monday-2"] .ub-tc-hero__cover { position: relative; inset: auto; z-index: 0; aspect-ratio: 1; max-height: 460px; }
+  [data-variant="cyber-monday-2"] .ub-tc-hero__cover::after { background: linear-gradient(0deg, #fff 0%, transparent 30%); }
+  [data-variant="cyber-monday-2"] .ub-tc-hero__cover img { object-position: center; }
+  [data-variant="cyber-monday-2"] .ub-tc-hero__in { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
+}
+@media (max-width: 600px) {
+  .ub-tc-title { font-size: 40px; }
+  [data-variant="cyber-monday-2"] .ub-tc-title { font-size: 36px; }
+  .ub-tc-specs { grid-template-columns: 1fr; }
+  .ub-tc-grid, .ub-tc-bento { grid-template-columns: repeat(2, 1fr); gap: 10px; }
+  .ub-tc-bento__main { grid-column: span 2; grid-row: auto; }
+  .ub-tc-bento__img { min-height: 0; padding: 12px 12px 0; }
+  .ub-tc-head { flex-direction: column; align-items: start; }
+  .ub-tc-hero__cd .ub-countdown__c, .ub-tc-flash__cd .ub-countdown__c { min-width: 58px; height: 58px; }
+  .ub-tc-hero__cd .ub-countdown__c b, .ub-tc-flash__cd .ub-countdown__c b { font-size: 20px; }
+  .ub-tc-card__body { padding: 10px 12px 14px; }
+  .ub-tc-card__name { font-size: 14px; }
+}

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

@@ -16,11 +16,7 @@
   --ub-head-weight:700;--ub-head-case:uppercase;--ub-head-track:0.005em;
   --ub-r-card:var(--radius-lg);--ub-r-btn:var(--radius-pill);--ub-r-tile:var(--radius-lg);--ub-r-hero:0px;--ub-r-media:var(--radius-lg);
 }
-[data-variant="cyber-monday-2"]{--bg:#070b18;--surface:#0e1426;--tint-1:#10213a;--tint-2:#1a1238;--tint-3:#0d2a2a;--tint-4:#2a1030;--ink:#e6f1ff;--ink-muted:#8ea0bf;--border:#1b2540;--primary:#22d3ee;--on-primary:#04111a;--accent:#e879f9;--on-accent:#0a0a14;--sale:#f472b6;--star:#facc15;--success:#34d399;--hero-bg:#0a1022;--hero-ink:#e6f1ff;--hero-muted:#9fb2d3;--band-bg:#111a36;--band-ink:#e6f1ff;--bubble-bg:#22d3ee;--bubble-ink:#04111a;--topbar-bg:#22d3ee;--topbar-ink:#04111a;--focus:#e879f9;
-  --ub-font-head:var(--font-sora);--ub-font-body:var(--font-inter);
-  --ub-head-weight:600;--ub-head-case:uppercase;--ub-head-track:0.02em;
-  --ub-r-card:var(--radius-lg);--ub-r-btn:var(--radius-md);--ub-r-tile:var(--radius-lg);--ub-r-hero:0px;--ub-r-media:var(--radius-lg);
-}
+/* cyber-monday-2 : jetons dans styles/ub/tech.css (variante blanche) */
 [data-variant="noel-2"]{--bg:#0f1d17;--surface:#16271f;--tint-1:#1d3328;--tint-2:#2a1d1d;--tint-3:#2b2715;--tint-4:#1a2633;--ink:#f7f3e8;--ink-muted:#b5b39f;--border:#243a2f;--primary:#d4af37;--on-primary:#0f1d17;--accent:#c0392b;--on-accent:#ffffff;--sale:#e25c4b;--star:#d4af37;--success:#6fcf97;--hero-bg:#132a20;--hero-ink:#f7f3e8;--hero-muted:#c2c0ab;--band-bg:#7f1d1d;--band-ink:#f7f3e8;--bubble-bg:#d4af37;--bubble-ink:#0f1d17;--topbar-bg:#7f1d1d;--topbar-ink:#f7f3e8;--focus:#d4af37;
   --ub-font-head:var(--font-jakarta);--ub-font-body:var(--font-inter);
   --ub-head-weight:800;--ub-head-case:none;--ub-head-track:-0.02em;

package/templates/storefront/themes/cyber-monday/theme.json

@@ -3,7 +3,8 @@
   "name": "Cyber Monday",
   "reference": "NovaTech",
   "fonts": {
-    "head": "outfit",
-    "body": "outfit"
-  }
+    "head": "space-grotesk",
+    "body": "inter"
+  },
+  "home": "tech"
 }

package/templates/storefront/themes/cyber-monday-2/campaign.en.json

@@ -5,7 +5,7 @@
     "2-year warranty on tech"
   ],
   "hero": {
-    "eyebrow": "Cyber Monday · Neon",
+    "eyebrow": "Cyber Monday · 24 h",
     "title": "24 hours to upgrade your setup",
     "highlight": "upgrade",
     "sub": "Audio, gaming, accessories and gadgets up to {discount} off. Web-only deals, until {endDate}.",

package/templates/storefront/themes/cyber-monday-2/campaign.fr.json

@@ -5,7 +5,7 @@
     "Garantie 2 ans sur la tech"
   ],
   "hero": {
-    "eyebrow": "Cyber Monday · Neon",
+    "eyebrow": "Cyber Monday · 24 h",
     "title": "24 heures pour upgrader votre setup",
     "highlight": "upgrader",
     "sub": "Audio, gaming, accessoires et gadgets jusqu'à -{discount}. Offres réservées au site, jusqu'au {endDate}.",

package/templates/storefront/themes/cyber-monday-2/theme.json

@@ -1,10 +1,11 @@
 {
   "id": "cyber-monday-2",
-  "name": "Cyber Monday · Neon",
-  "reference": "variante, mise en page halloween",
-  "layout": "halloween",
+  "name": "Cyber Monday · Studio",
+  "reference": "variante blanche, mise en page cyber-monday",
+  "layout": "cyber-monday",
   "fonts": {
     "head": "sora",
     "body": "inter"
-  }
+  },
+  "home": "tech"
 }

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

@@ -3,7 +3,8 @@
   "name": "Halloween",
   "reference": "Nexora (sombre)",
   "fonts": {
-    "head": "space-grotesk",
+    "head": "oswald",
     "body": "inter"
-  }
+  },
+  "home": "cinema"
 }

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

@@ -6,5 +6,6 @@
   "fonts": {
     "head": "oswald",
     "body": "inter"
-  }
+  },
+  "home": "cinema"
 }

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

@@ -4,6 +4,7 @@
   "reference": "Crescendo",
   "fonts": {
     "head": "poppins",
-    "body": "poppins"
-  }
+    "body": "inter"
+  },
+  "home": "album"
 }

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

@@ -4,7 +4,8 @@
   "reference": "variante, mise en page nouvel-an",
   "layout": "nouvel-an",
   "fonts": {
-    "head": "jakarta",
+    "head": "poppins",
     "body": "inter"
-  }
+  },
+  "home": "album"
 }

package/templates/storefront/themes/nouvel-an/campaign.en.json

@@ -6,10 +6,10 @@
   ],
   "hero": {
     "eyebrow": "New Year Sale",
-    "title": "New year new you",
-    "highlight": "new",
+    "title": "Happy New Year",
+    "highlight": "New Year",
     "sub": "Start the year with up to {discount} off our best sellers. Ends {endDate}.",
-    "cta": "Explore the sale",
+    "cta": "Shop the sale",
     "cta2": "New arrivals",
     "bubble": [
       "Up to",

package/templates/storefront/themes/nouvel-an/campaign.fr.json

@@ -6,8 +6,8 @@
   ],
   "hero": {
     "eyebrow": "Soldes du Nouvel An",
-    "title": "Nouvelle année, nouveau vous",
-    "highlight": "nouveau",
+    "title": "Bonne Année",
+    "highlight": "Année",
     "sub": "Commencez l'année avec jusqu'à -{discount} sur nos meilleures ventes. Jusqu'au {endDate}.",
     "cta": "Voir les soldes",
     "cta2": "Nouveautés",

package/templates/storefront/themes/nouvel-an/theme.json

@@ -5,5 +5,6 @@
   "fonts": {
     "head": "sora",
     "body": "inter"
-  }
+  },
+  "home": "gala"
 }

package/templates/storefront/themes/nouvel-an-2/campaign.en.json

@@ -5,12 +5,12 @@
     "Free 30-day returns"
   ],
   "hero": {
-    "eyebrow": "New Year · Midnight",
-    "title": "New year, new you",
-    "highlight": "new you",
+    "eyebrow": "Happy",
+    "title": "New Year",
+    "highlight": "Year",
     "sub": "Fashion, party and wellness up to {discount} off. Start the year right, before {endDate}.",
-    "cta": "Start the year",
-    "cta2": "Party outfits",
+    "cta": "Shop now",
+    "cta2": "Read more",
     "bubble": [
       "Up to",
       "{discount}",

package/templates/storefront/themes/nouvel-an-2/campaign.fr.json

@@ -5,12 +5,12 @@
     "Retours gratuits 30 jours"
   ],
   "hero": {
-    "eyebrow": "Nouvel An · Minuit",
-    "title": "Nouvelle année, nouveau vous",
-    "highlight": "nouveau vous",
+    "eyebrow": "Bonne année",
+    "title": "Nouvel An",
+    "highlight": "An",
     "sub": "Mode, soirée et bien-être jusqu'à -{discount}. Commencez l'année du bon pied, avant le {endDate}.",
-    "cta": "Commencer l'année",
-    "cta2": "Tenues de soirée",
+    "cta": "Voir les offres",
+    "cta2": "En savoir plus",
     "bubble": [
       "Jusqu'à",
       "{discount}",

package/templates/storefront/themes/nouvel-an-2/theme.json

@@ -4,7 +4,8 @@
   "reference": "variante, mise en page thanksgiving",
   "layout": "thanksgiving",
   "fonts": {
-    "head": "space-grotesk",
-    "body": "outfit"
-  }
+    "head": "outfit",
+    "body": "inter"
+  },
+  "home": "gala"
 }