@salifbiaye/create-boutique 0.1.5 → 0.2.0

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

@@ -0,0 +1,382 @@
+/* Pages Boutique (/store) et Contact. Même markup pour tous les thèmes : tout passe par les tokens
+   (--hero-*, --primary, --surface…) et les presets (--ub-font-head, --ub-r-*). */
+
+/* ---------- Bandeau de page (boutique, contact) ---------- */
+.ub-shophero {
+  position: relative;
+  overflow: hidden;
+  background: var(--hero-bg);
+  color: var(--hero-ink);
+  border-radius: var(--ub-r-hero);
+}
+.ub-shophero::before {
+  content: "";
+  position: absolute;
+  inset: -40% -10% auto auto;
+  width: 60vw;
+  max-width: 820px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 65%);
+  pointer-events: none;
+}
+.ub-shophero__in {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-8);
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-12);
+}
+.ub-shophero__title {
+  margin-top: var(--space-3) !important;
+  font-size: clamp(36px, 5.2vw, 68px);
+  line-height: 1.02;
+  max-width: 14ch;
+  animation: ub-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-shophero__sub {
+  margin-top: var(--space-4) !important;
+  max-width: 52ch;
+  color: var(--hero-muted);
+  font-size: 17px;
+  line-height: 26px;
+  animation: ub-rise 0.6s 0.08s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-shophero__cd {
+  display: grid;
+  gap: var(--space-2);
+  flex: none;
+  animation: ub-rise 0.6s 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-shophero__cd small {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--primary);
+}
+
+/* ---------- Barre filtres : catégories + tri ---------- */
+.ub-shop {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-16);
+}
+.ub-shop__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  padding-bottom: var(--space-6);
+  margin-bottom: var(--space-6);
+  border-bottom: 1px solid var(--border);
+}
+.ub-chips {
+  display: flex;
+  gap: var(--space-2);
+  overflow-x: auto;
+  scrollbar-width: none;
+  max-width: 100%;
+}
+.ub-chip {
+  flex: none;
+  padding: 9px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+  background: var(--bg);
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.ub-chip:hover {
+  border-color: var(--ink);
+}
+.ub-chip[aria-current="page"] {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--bg);
+}
+.ub-sort {
+  display: inline-flex;
+  padding: 4px;
+  gap: 2px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-btn);
+}
+.ub-sort__opt {
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ink-muted);
+  border-radius: var(--ub-r-btn);
+  transition: background 0.15s, color 0.15s;
+}
+.ub-sort__opt:hover {
+  color: var(--ink);
+}
+.ub-sort__opt[aria-current="true"] {
+  background: var(--primary);
+  color: var(--on-primary);
+}
+.ub-shop__count {
+  margin-bottom: var(--space-4) !important;
+  font-size: 14px;
+  color: var(--ink-muted);
+}
+
+/* ---------- Contact ---------- */
+.ub-contacthero__badge {
+  display: grid;
+  justify-items: end;
+  flex: none;
+  text-align: right;
+  animation: ub-rise 0.6s 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-contacthero__badge b {
+  font-family: var(--ub-font-head);
+  font-size: clamp(48px, 7vw, 96px);
+  line-height: 1;
+  color: var(--primary);
+}
+.ub-contacthero__badge small {
+  margin-top: var(--space-2);
+  font-size: 13px;
+  color: var(--hero-muted);
+}
+.ub-contact__cards {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ub-contact__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-6);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--ub-r-card);
+  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
+  animation: ub-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-contact__card:nth-child(2) { animation-delay: 0.06s; }
+.ub-contact__card:nth-child(3) { animation-delay: 0.12s; }
+.ub-contact__card:nth-child(4) { animation-delay: 0.18s; }
+.ub-contact__card:hover {
+  transform: translateY(-3px);
+  border-color: var(--primary);
+  box-shadow: var(--shadow-pop);
+}
+.ub-contact__ic {
+  display: inline-grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--ub-r-btn);
+  background: var(--primary);
+  color: var(--on-primary);
+}
+.ub-contact__ic svg {
+  width: 22px;
+  height: 22px;
+}
+.ub-contact__card h2 {
+  font-size: 18px;
+  line-height: 24px;
+}
+.ub-contact__card p {
+  flex: 1;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--ink-muted);
+}
+.ub-contact__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ink);
+  word-break: break-all;
+}
+.ub-contact__cta svg {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.15s;
+}
+.ub-contact__card:hover .ub-contact__cta svg {
+  transform: translateX(3px);
+}
+.ub-contact__faq {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  gap: var(--space-8);
+  margin-top: var(--space-16);
+}
+.ub-contact__faq > h2 {
+  font-size: clamp(28px, 3vw, 40px);
+  line-height: 1.1;
+}
+.ub-faq {
+  border-bottom: 1px solid var(--border);
+}
+.ub-faq summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) 0;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+}
+.ub-faq summary::-webkit-details-marker {
+  display: none;
+}
+.ub-faq summary::after {
+  content: "";
+  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor) !important;
+  background-size: 12px 2px, 2px 12px !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--primary);
+  font-size: 18px;
+  transition: transform 0.2s;
+}
+.ub-faq[open] summary::after {
+  transform: rotate(45deg);
+}
+.ub-faq p {
+  padding-bottom: var(--space-4);
+  color: var(--ink-muted);
+  line-height: 24px;
+}
+
+@keyframes ub-rise {
+  from { opacity: 0; transform: translateY(14px); }
+  to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-shophero__title, .ub-shophero__sub, .ub-shophero__cd, .ub-contacthero__badge, .ub-contact__card { animation: none; }
+}
+
+@media (max-width: 1024px) {
+  .ub-contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 768px) {
+  .ub-shophero__in { flex-direction: column; align-items: flex-start; padding-top: var(--space-12); padding-bottom: var(--space-8); }
+  .ub-contacthero__badge { justify-items: start; text-align: left; }
+  .ub-shop__bar { flex-direction: column; align-items: stretch; }
+  .ub-sort { align-self: flex-start; }
+  .ub-contact__cards { grid-template-columns: minmax(0, 1fr); }
+  .ub-contact__faq { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-12); }
+}
+
+/* ---------- Pied de page : bandeau CTA + bloc sombre arrondi ---------- */
+.ub-footwrap {
+  --cta-bg: var(--primary);
+  --cta-ink: var(--on-primary);
+  --foot-bg: color-mix(in srgb, var(--ink) 94%, var(--bg));
+  --foot-ink: var(--bg);
+  display: grid;
+  gap: var(--space-4);
+  max-width: calc(var(--content-max) + 2 * var(--space-6));
+  margin: var(--space-16) auto var(--space-4);
+  padding: 0 var(--space-4);
+}
+.ub-footcta {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  justify-items: center;
+  gap: var(--space-4);
+  padding: clamp(48px, 7vw, 88px) var(--space-6);
+  text-align: center;
+  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--cta-bg) 82%, #ffffff) 0%, var(--cta-bg) 60%);
+  color: var(--cta-ink);
+  border-radius: var(--radius-2xl);
+}
+.ub-footcta__shape {
+  position: absolute;
+  width: 220px;
+  height: 220px;
+  border: 38px solid currentColor;
+  border-radius: 56px;
+  opacity: 0.09;
+  pointer-events: none;
+}
+.ub-footcta__shape--a { top: -90px; left: -60px; transform: rotate(-18deg); }
+.ub-footcta__shape--b { bottom: -110px; right: -40px; transform: rotate(24deg); }
+.ub-footcta__eyebrow {
+  position: relative;
+  padding: 5px 12px;
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--cta-ink) 14%, transparent);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.ub-footcta__title {
+  position: relative;
+  max-width: 20ch;
+  font-size: clamp(30px, 4.4vw, 56px);
+  line-height: 1.05;
+}
+.ub-footcta__title em {
+  font-style: normal;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.12em;
+}
+.ub-footcta__sub {
+  position: relative;
+  max-width: 50ch;
+  font-size: 17px;
+  line-height: 26px;
+  opacity: 0.85;
+}
+.ub-footcta .ub-footcta__btn {
+  position: relative;
+  margin-top: var(--space-2);
+  background: var(--cta-ink);
+  color: var(--cta-bg);
+  border-color: var(--cta-ink);
+}
+.ub-footwrap .ub-footer {
+  margin: 0;
+  padding: var(--space-8) clamp(24px, 5vw, 64px) 0;
+  background: var(--foot-bg);
+  color: var(--foot-ink);
+  border: 0;
+  border-radius: var(--radius-2xl);
+}
+.ub-footwrap .ub-footer .ub-logo__mark { background: var(--cta-bg); }
+.ub-footwrap .ub-footer h4 { opacity: 0.55; font-weight: 600; }
+.ub-footwrap .ub-footer a { transition: opacity 0.15s; }
+.ub-footwrap .ub-footer a:hover { opacity: 0.6; }
+.ub-footwrap .ub-footer__top { padding-bottom: var(--space-16); }
+.ub-footwrap .ub-pays span {
+  background: color-mix(in srgb, var(--foot-ink) 10%, transparent);
+  color: var(--foot-ink);
+  border-color: color-mix(in srgb, var(--foot-ink) 18%, transparent);
+}
+@media (max-width: 768px) {
+  .ub-footwrap { padding: 0 var(--space-2); }
+  .ub-footcta, .ub-footwrap .ub-footer { border-radius: var(--radius-xl); }
+}

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

@@ -0,0 +1,57 @@
+/* Mobile et tablette : menu burger, bandeau plus compact, pas de débordement horizontal. */
+.ub-burger { display: none; }
+
+@media (max-width: 900px) {
+  html, body { overflow-x: clip; }
+  .ub-nav { position: relative; }
+  .ub-nav .ub-wrap { gap: var(--space-3); height: 64px; }
+  .ub-nav__icons { margin-left: auto; gap: 2px; }
+  .ub-nav__cta { display: none !important; }
+
+  .ub-burger { display: block; }
+  .ub-burger summary { list-style: none; cursor: pointer; }
+  .ub-burger summary::-webkit-details-marker { display: none; }
+  .ub-burger__bars { display: grid; gap: 4px; width: 20px; }
+  .ub-burger__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
+  .ub-burger[open] .ub-burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+  .ub-burger[open] .ub-burger__bars i:nth-child(2) { opacity: 0; }
+  .ub-burger[open] .ub-burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+  .ub-burger__panel {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    z-index: 60;
+    display: grid;
+    padding: var(--space-2) var(--space-6) var(--space-6);
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow-pop);
+    animation: ub-rise 0.25s both;
+  }
+  .ub-burger__panel a { padding: 14px 0; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--border); }
+  .ub-burger__panel a[aria-current="page"] { color: var(--primary); }
+  .ub-burger__panel .ub-burger__cta { margin-top: var(--space-4); padding: 0 24px; border-bottom: 0; justify-content: center; }
+
+  .ub-section { padding: var(--space-8) 0; }
+  .ub-wrap { padding: 0 var(--space-4); }
+}
+
+@media (max-width: 600px) {
+  /* Barre du haut : un seul message (les 3 empilés prenaient jusqu'à 140 px au-dessus du hero) */
+  .ub-topbar .ub-wrap { flex-wrap: nowrap; padding-top: 8px; padding-bottom: 8px; }
+  .ub-topbar .ub-wrap > span:not(:first-child) { display: none; }
+  .ub-topbar .ub-wrap > span { font-size: 12px; text-align: center; }
+  .ub-logo { font-size: 17px; }
+  .ub-grid { gap: var(--space-3) !important; }
+  .ub-card__body { padding: 10px 12px 12px !important; }
+  .ub-card__name { font-size: 14px !important; line-height: 19px !important; }
+  .ub-card__cat { font-size: 11px !important; }
+  .ub-price { flex-wrap: wrap; row-gap: 0; }
+  .ub-price__now { font-size: 15px !important; }
+  .ub-price__was { font-size: 12px !important; }
+  .ub-card__cart { width: 34px !important; height: 34px !important; flex: none; }
+  .ub-badge { font-size: 11px !important; padding: 3px 7px !important; }
+  .ub-trust { gap: var(--space-3) !important; }
+  .ub-sec-head h2 { font-size: 22px; line-height: 28px; }
+}

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

@@ -0,0 +1,85 @@
+/* Vitrines de l'accueil : accordéon « offres phares » et grande carte sombre. CSS seul (aucun JavaScript). */
+
+/* ---------- Offres phares : accordéon horizontal ---------- */
+.ub-fold__title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; margin-bottom: var(--space-6) !important; }
+.ub-fold { display: flex; gap: var(--space-3); height: clamp(360px, 42vw, 520px); margin: 0; padding: 0; list-style: none; }
+.ub-fold__item { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow 0.55s cubic-bezier(0.3, 0.8, 0.2, 1); }
+.ub-fold__link { position: absolute; inset: 0; overflow: hidden; display: block; border-radius: var(--ub-r-card); background: var(--surface); border: 1px solid var(--border); }
+.ub-fold__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.45s, transform 0.8s; }
+.ub-fold__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.78) 100%); opacity: 0; transition: opacity 0.45s; }
+.ub-fold__label { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 10px; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); transition: opacity 0.25s; }
+.ub-fold__num { color: var(--primary); }
+.ub-fold__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 6px; padding: var(--space-6); padding-right: 88px; color: #fff; opacity: 0; transform: translateY(12px); transition: opacity 0.35s 0.15s, transform 0.45s 0.15s; }
+.ub-fold__off { justify-self: start; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: 13px; }
+.ub-fold__name { font-family: var(--ub-font-head); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; text-transform: var(--ub-head-case); }
+.ub-fold__price { display: flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 700; }
+.ub-fold__price s { font-size: 14px; font-weight: 500; opacity: 0.7; }
+.ub-fold__go { position: absolute; right: var(--space-6); bottom: var(--space-6); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / 0.18); backdrop-filter: blur(6px); }
+.ub-fold__go svg { width: 20px; height: 20px; }
+
+/* Carte ouverte : la 1re par défaut, sinon celle survolée ou ayant le focus */
+.ub-fold:not(:hover):not(:focus-within) .ub-fold__item:first-child,
+.ub-fold__item:hover,
+.ub-fold__item:focus-within { flex-grow: 6; }
+.ub-fold:not(:hover):not(:focus-within) .ub-fold__item:first-child .ub-fold__img,
+.ub-fold__item:hover .ub-fold__img,
+.ub-fold__item:focus-within .ub-fold__img { opacity: 1; transform: none; }
+.ub-fold:not(:hover):not(:focus-within) .ub-fold__item:first-child .ub-fold__link::after,
+.ub-fold__item:hover .ub-fold__link::after,
+.ub-fold__item:focus-within .ub-fold__link::after { opacity: 1; }
+.ub-fold:not(:hover):not(:focus-within) .ub-fold__item:first-child .ub-fold__body,
+.ub-fold__item:hover .ub-fold__body,
+.ub-fold__item:focus-within .ub-fold__body { opacity: 1; transform: none; }
+.ub-fold:not(:hover):not(:focus-within) .ub-fold__item:first-child .ub-fold__label,
+.ub-fold__item:hover .ub-fold__label,
+.ub-fold__item:focus-within .ub-fold__label { opacity: 0; }
+/* Pas d'image : l'icône « photo » ne s'affiche que sur la carte ouverte (sinon elle chevauche le nom vertical) */
+.ub-fold__img.ub-ph { transform: none; }
+
+/* ---------- Grande carte sombre (onglets radio + :has) ---------- */
+.ub-spot { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 72px); background: #0f0d0b; color: #f7f5f2; border-radius: var(--radius-2xl); }
+.ub-spot::before { content: ""; position: absolute; left: -10%; bottom: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 25%, transparent), transparent 65%); pointer-events: none; }
+.ub-spot__head { position: relative; display: grid; justify-items: center; gap: var(--space-3); text-align: center; margin-bottom: var(--space-12); }
+.ub-spot__title { max-width: 18ch; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; }
+.ub-spot__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
+.ub-spot__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ub-r-card); background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--primary) 85%, #fff) 0%, var(--primary) 45%, color-mix(in srgb, var(--accent) 70%, var(--primary)) 100%); box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--primary) 55%, transparent); }
+.ub-spot__media { position: absolute; inset: 8%; display: grid; place-items: center; opacity: 0; transform: scale(0.94) rotate(-2deg); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
+.ub-spot__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ub-r-media); box-shadow: 0 20px 50px rgb(0 0 0 / 0.35); }
+.ub-spot__media .ub-ph { width: 100%; height: 100%; border-radius: var(--ub-r-media); background: rgb(255 255 255 / 0.15); color: #fff; }
+.ub-spot:has(#ub-spot-0:checked) .ub-spot__media[data-i="0"],
+.ub-spot:has(#ub-spot-1:checked) .ub-spot__media[data-i="1"],
+.ub-spot:has(#ub-spot-2:checked) .ub-spot__media[data-i="2"],
+.ub-spot:has(#ub-spot-3:checked) .ub-spot__media[data-i="3"] { opacity: 1; transform: none; }
+.ub-spot__list { display: grid; }
+.ub-spot__item { position: relative; border-bottom: 1px solid rgb(255 255 255 / 0.1); transition: background 0.3s; }
+.ub-spot__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); transform: scaleY(0); transform-origin: top; transition: transform 0.35s; }
+.ub-spot__item:has(.ub-spot__radio:checked) { background: rgb(255 255 255 / 0.05); }
+.ub-spot__item:has(.ub-spot__radio:checked)::before { transform: none; }
+.ub-spot__radio { position: absolute; opacity: 0; pointer-events: none; }
+.ub-spot__label { position: static !important; transform: none !important; margin: 0 !important; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); cursor: pointer; font-size: 17px !important; line-height: 24px !important; font-weight: 600; }
+.ub-spot__radio:focus-visible + .ub-spot__label { outline: 2px solid var(--primary); outline-offset: -2px; }
+.ub-spot__num { font-size: 13px; color: var(--primary); font-weight: 700; }
+.ub-spot__name { flex: 1; }
+.ub-spot__off { padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary); font-size: 12px; }
+.ub-spot__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s; }
+.ub-spot__more > div { overflow: hidden; min-height: 0; }
+.ub-spot__item:has(.ub-spot__radio:checked) .ub-spot__more { grid-template-rows: 1fr; }
+.ub-spot__more p { padding: 0 var(--space-6) var(--space-3) calc(var(--space-6) + 32px); color: rgb(247 245 242 / 0.7); font-size: 14px; line-height: 22px; }
+.ub-spot__buy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-6) var(--space-4) calc(var(--space-6) + 32px); }
+.ub-spot__price { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 700; }
+.ub-spot__price s { font-size: 14px; font-weight: 500; opacity: 0.55; }
+.ub-spot__cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--ub-r-btn); background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 700; }
+.ub-spot__cta svg { width: 16px; height: 16px; }
+
+@media (max-width: 900px) {
+  .ub-fold { height: auto; flex-direction: column; }
+  .ub-fold__item { flex: none; height: 76px; transition: height 0.5s; }
+  .ub-fold:not(:hover):not(:focus-within) .ub-fold__item:first-child,
+  .ub-fold__item:hover,
+  .ub-fold__item:focus-within { height: 340px; }
+  .ub-fold__label { left: var(--space-6); transform: translateY(-50%); }
+  .ub-spot__grid { grid-template-columns: minmax(0, 1fr); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-fold__item, .ub-fold__img, .ub-fold__body, .ub-spot__media, .ub-spot__more { transition: none; }
+}

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

@@ -0,0 +1,64 @@
+/* Variantes de thème (2e site par événement) : data-theme = mise en page empruntée à un autre thème,
+   data-variant = palette, polices et arrondis propres. Chargé après tokens.css et bundle.css : à spécificité égale,
+   ces règles l'emportent. Déclarées dans themes/<id>/theme.json (champ "layout"). */
+[data-variant="halloween-2"]{--bg:#0b0a10;--surface:#15131d;--tint-1:#1c1830;--tint-2:#1a2415;--tint-3:#241630;--tint-4:#2a1b12;--ink:#f5f3ff;--ink-muted:#a7a3b8;--border:#26222f;--primary:#a3e635;--on-primary:#0b0a10;--accent:#7c3aed;--on-accent:#ffffff;--sale:#fb923c;--star:#facc15;--success:#4ade80;--hero-bg:#120d1f;--hero-ink:#f5f3ff;--hero-muted:#b7aecf;--band-bg:#7c3aed;--band-ink:#ffffff;--bubble-bg:#a3e635;--bubble-ink:#0b0a10;--topbar-bg:#7c3aed;--topbar-ink:#ffffff;--focus:#a3e635;
+  --ub-font-head:var(--font-oswald);--ub-font-body:var(--font-inter);
+  --ub-head-weight:700;--ub-head-case:uppercase;--ub-head-track:0.01em;
+  --ub-r-card:var(--radius-md);--ub-r-btn:var(--radius-sm);--ub-r-tile:var(--radius-md);--ub-r-hero:0px;--ub-r-media:var(--radius-md);
+}
+[data-variant="thanksgiving-2"]{--bg:#fffaf3;--surface:#f7efe3;--tint-1:#f3e3cc;--tint-2:#e6ecd9;--tint-3:#f6ddc9;--tint-4:#efe6d3;--ink:#2b1d12;--ink-muted:#6f5b49;--border:#eadcc8;--primary:#2f5d3a;--on-primary:#ffffff;--accent:#d4912a;--on-accent:#2b1d12;--sale:#b4441e;--star:#d4912a;--success:#2f5d3a;--hero-bg:#f4e6d0;--hero-ink:#2b1d12;--hero-muted:#6f5b49;--band-bg:#2f5d3a;--band-ink:#fff8ec;--bubble-bg:#d4912a;--bubble-ink:#2b1d12;--topbar-bg:#2f5d3a;--topbar-ink:#fff8ec;--focus:#2563eb;
+  --ub-font-head:var(--font-sora);--ub-font-body:var(--font-jakarta);
+  --ub-head-weight:700;--ub-head-case:none;--ub-head-track:-0.02em;
+  --ub-r-card:var(--radius-2xl);--ub-r-btn:var(--radius-pill);--ub-r-tile:var(--radius-2xl);--ub-r-hero:var(--radius-2xl);--ub-r-media:var(--radius-2xl);
+}
+[data-variant="black-friday-2"]{--bg:#070707;--surface:#121110;--tint-1:#1d140c;--tint-2:#171615;--tint-3:#2a1606;--tint-4:#151414;--ink:#fafaf9;--ink-muted:#a8a29e;--border:#262422;--primary:#ff6a00;--on-primary:#0a0a0a;--accent:#ffa13d;--on-accent:#0a0a0a;--sale:#ff6a00;--star:#fbbf24;--success:#4ade80;--hero-bg:#030303;--hero-ink:#ffffff;--hero-muted:#a8a29e;--band-bg:#ff6a00;--band-ink:#0a0a0a;--bubble-bg:#ff6a00;--bubble-ink:#0a0a0a;--topbar-bg:#ff6a00;--topbar-ink:#0a0a0a;--focus:#ffa13d;
+  --ub-font-head:var(--font-oswald);--ub-font-body:var(--font-inter);
+  --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);
+}
+[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;
+  --ub-r-card:var(--radius-lg);--ub-r-btn:var(--radius-md);--ub-r-tile:var(--radius-lg);--ub-r-hero:0px;--ub-r-media:var(--radius-lg);
+}
+[data-variant="nouvel-an-2"]{--bg:#0c0f24;--surface:#141838;--tint-1:#1c2150;--tint-2:#2a1838;--tint-3:#13263a;--tint-4:#2b2233;--ink:#f4f1ff;--ink-muted:#a6a8c9;--border:#22285a;--primary:#f5b5c8;--on-primary:#0c0f24;--accent:#e9cf7a;--on-accent:#0c0f24;--sale:#f5b5c8;--star:#e9cf7a;--success:#6ee7b7;--hero-bg:#10143a;--hero-ink:#f4f1ff;--hero-muted:#b6b8d9;--band-bg:#e9cf7a;--band-ink:#0c0f24;--bubble-bg:#f5b5c8;--bubble-ink:#0c0f24;--topbar-bg:#e9cf7a;--topbar-ink:#0c0f24;--focus:#f5b5c8;
+  --ub-font-head:var(--font-space-grotesk);--ub-font-body:var(--font-outfit);
+  --ub-head-weight:700;--ub-head-case:uppercase;--ub-head-track:0.02em;
+  --ub-r-card:var(--radius-xl);--ub-r-btn:var(--radius-pill);--ub-r-tile:var(--radius-xl);--ub-r-hero:0px;--ub-r-media:var(--radius-xl);
+}
+
+/* Thèmes sombres : pied de page plus noir que la page (au lieu de l'inversion claire des thèmes clairs). */
+[data-theme="halloween"] .ub-footwrap,
+[data-variant="halloween-2"] .ub-footwrap,
+[data-variant="noel-2"] .ub-footwrap,
+[data-variant="nouvel-an-2"] .ub-footwrap { --foot-bg: color-mix(in srgb, var(--bg) 45%, #000); --foot-ink: var(--ink); }
+[data-theme="halloween"] .ub-footwrap .ub-footer,
+[data-variant="halloween-2"] .ub-footwrap .ub-footer,
+[data-variant="noel-2"] .ub-footwrap .ub-footer,
+[data-variant="nouvel-an-2"] .ub-footwrap .ub-footer { border: 1px solid var(--border); }
+
+/* Blackout (noir et orange) : hero plein noir, titre géant, visuel sans cadre avec halo orange. */
+[data-variant="black-friday-2"] .ub-hero__title { font-size: clamp(56px, 9vw, 128px); line-height: 0.92; letter-spacing: -0.01em; }
+[data-variant="black-friday-2"] .ub-hero__title em { font-style: normal; color: var(--primary); text-shadow: 0 0 40px color-mix(in srgb, var(--primary) 55%, transparent); }
+/* Visuel fondu dans le décor : toute la moitié droite du hero, sans cadre, bords gauche et bas qui disparaissent dans le noir. */
+[data-variant="black-friday-2"] .ub-hero { position: relative; overflow: hidden; }
+[data-variant="black-friday-2"] .ub-hero__in { position: static; min-height: clamp(560px, 48vw, 760px); align-items: center; }
+[data-variant="black-friday-2"] .ub-hero__text { position: relative; z-index: 1; }
+[data-variant="black-friday-2"] .ub-hero__media { position: absolute; inset: 0 0 0 auto; width: 62%; min-height: 0; z-index: 0; display: block; }
+[data-variant="black-friday-2"] .ub-hero__blob,
+[data-variant="black-friday-2"] .ub-bubble { display: none; }
+[data-variant="black-friday-2"] .ub-hero__photo { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
+[data-variant="black-friday-2"] .ub-hero__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(0deg, var(--hero-bg), transparent); pointer-events: none; }
+@media (max-width: 1024px) {
+  [data-variant="black-friday-2"] .ub-hero__in { min-height: 0; }
+  [data-variant="black-friday-2"] .ub-hero__media { position: relative; inset: auto; width: auto; height: 380px; margin: 0 calc(-1 * var(--space-6)); display: block; }
+  [data-variant="black-friday-2"] .ub-hero__photo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
+}
+
+/* Barre de réassurance orange : icônes et contours en noir (sinon orange sur orange) */
+[data-variant="black-friday-2"] .ub-trust__ic { color: var(--band-ink); border-color: color-mix(in srgb, var(--band-ink) 30%, transparent); }

package/templates/storefront/themes/black-friday-2/campaign.en.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "BLACKOUT: prices go dark",
+    "Free shipping over {freeShipping}",
+    "Secure checkout, 30-day returns"
+  ],
+  "hero": {
+    "eyebrow": "Prices go dark",
+    "title": "Black Friday",
+    "highlight": "Friday",
+    "sub": "Up to {discount} off the whole store. No code needed, discount already applied. Ends {endDate}.",
+    "cta": "See the deals",
+    "cta2": "Today's offers",
+    "bubble": [
+      "Up to",
+      "{discount}",
+      "OFF"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Flash deal",
+    "title": "The biggest discounts go first",
+    "text": "Limited stock on flash deals: when it's gone, it's gone.",
+    "cta": "Grab it",
+    "seal": "Until {endDate}"
+  },
+  "sections": {
+    "categories": "Blackout aisles",
+    "products": "Flash deals"
+  }
+}

package/templates/storefront/themes/black-friday-2/campaign.fr.json

@@ -0,0 +1,31 @@
+{
+  "topbar": [
+    "BLACKOUT : les prix s'éteignent",
+    "Livraison offerte dès {freeShipping}",
+    "Paiement sécurisé, retours 30 jours"
+  ],
+  "hero": {
+    "eyebrow": "Les prix s’éteignent",
+    "title": "Black Friday",
+    "highlight": "Friday",
+    "sub": "Jusqu'à -{discount} sur toute la boutique. Pas de code, la remise est déjà appliquée. Fin le {endDate}.",
+    "cta": "Voir les prix barrés",
+    "cta2": "Offres du jour",
+    "bubble": [
+      "Jusqu'à",
+      "{discount}",
+      "OFF"
+    ]
+  },
+  "promo": {
+    "eyebrow": "Offre éclair",
+    "title": "Les plus grosses remises partent en premier",
+    "text": "Stock limité sur les offres éclair : quand c'est parti, c'est parti.",
+    "cta": "Foncer",
+    "seal": "Jusqu'au {endDate}"
+  },
+  "sections": {
+    "categories": "Rayons en blackout",
+    "products": "Offres éclair"
+  }
+}

package/templates/storefront/themes/black-friday-2/theme.json

@@ -0,0 +1,10 @@
+{
+  "id": "black-friday-2",
+  "name": "Black Friday · Blackout",
+  "reference": "variante noir et orange, mise en page halloween",
+  "layout": "halloween",
+  "fonts": {
+    "head": "oswald",
+    "body": "inter"
+  }
+}