@salifbiaye/create-boutique 0.6.0 → 0.7.0

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

@@ -99,6 +99,74 @@
   border-color: var(--ink);
   color: var(--bg);
 }
+/* Recherche de la page Boutique (modules/store/components/shop-search.tsx) */
+.ub-shopsearch {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 260px;
+  max-width: 420px;
+  min-height: 44px;
+  margin-left: auto;
+  padding: 0 12px 0 42px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  background: var(--surface);
+  color: var(--ink);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.ub-shopsearch:focus-within {
+  border-color: var(--ink);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+.ub-shopsearch > svg {
+  position: absolute;
+  left: 15px;
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: var(--ink-muted);
+  stroke-width: 1.8;
+}
+.ub-shopsearch input {
+  flex: 1;
+  min-width: 0;
+  height: 42px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 15px;
+}
+.ub-shopsearch input::placeholder {
+  color: var(--ink-muted);
+}
+.ub-shopsearch input::-webkit-search-cancel-button {
+  display: none;
+}
+.ub-shopsearch[aria-busy="true"] > svg {
+  stroke: var(--primary);
+}
+.ub-shopsearch__clear {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--tint-1);
+  color: var(--ink);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ub-shop__empty {
+  padding: var(--space-16) 0;
+  color: var(--ink-muted);
+  font-size: 17px;
+  text-align: center;
+}
 .ub-sort {
   display: inline-flex;
   padding: 4px;
@@ -283,6 +351,7 @@
   .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-shopsearch { max-width: none; margin-left: 0; flex-basis: auto; }
   .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); }
 }
@@ -380,3 +449,110 @@
   .ub-footwrap { padding: 0 var(--space-2); }
   .ub-footcta, .ub-footwrap .ub-footer { border-radius: var(--radius-xl); }
 }
+
+/* ---------- Boutique fermée (admin → Campagnes → Hors ligne) : couleurs de la page, pas du hero ---------- */
+.ub-closed { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--border); }
+.ub-closed__in { display: grid; justify-items: center; gap: 18px; min-height: 58vh; align-content: center; padding-top: 72px; padding-bottom: 72px; text-align: center; }
+.ub-closed__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg); color: var(--primary); box-shadow: var(--shadow-card, 0 10px 30px -18px rgb(0 0 0 / 0.4)); }
+.ub-closed__title { margin: 0; color: var(--ink); font-size: clamp(30px, 4vw, 48px); line-height: 1.1; }
+.ub-closed__text { max-width: 34em; margin: 0; color: var(--ink-muted); font-size: 17px; line-height: 26px; }
+.ub-closed__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
+/* Site fermé : plus d'appel à acheter (bouton du menu, bannière du pied de page) */
+body:has(.ub-closed) .ub-nav__cta,
+body:has(.ub-closed) .ub-footcta { display: none; }
+
+/* Le champ est dans un conteneur qui porte déjà l'anneau de focus : pas de second cadre sur le texte */
+.ub-shopsearch input:focus,
+.ub-shopsearch input:focus-visible,
+.ub-search input:focus,
+.ub-search input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.ub-search:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+
+/* ---------- Bandeau cookies (modules/ub/cookie-banner.tsx) : variables du thème, discret, n'empêche pas de naviguer ---------- */
+.ub-cookies {
+  position: fixed;
+  z-index: 60;
+  left: 20px;
+  bottom: 20px;
+  display: grid;
+  gap: 14px;
+  width: min(420px, calc(100vw - 40px));
+  padding: 18px 20px;
+  border: 1px solid var(--border);
+  border-top: 3px solid var(--primary);
+  border-radius: var(--ub-r-card, 14px);
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45);
+  font-family: var(--ub-font-body, inherit);
+  animation: ub-cookies-in 0.35s ease-out both;
+}
+.ub-cookies__title {
+  display: block;
+  margin-bottom: 4px;
+  font-family: var(--ub-font-head, inherit);
+  font-size: 16px;
+}
+.ub-cookies p {
+  margin: 0;
+  color: var(--ink-muted);
+  font-size: 14px;
+  line-height: 21px;
+}
+.ub-cookies p a {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.ub-cookies__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.ub-cookies__btn {
+  min-height: 42px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: var(--ub-r-btn, 999px);
+  background: var(--primary);
+  color: var(--on-primary);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+}
+.ub-cookies__btn--ghost {
+  background: transparent;
+  color: var(--ink);
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+.ub-cookies__btn:focus-visible {
+  outline: 2px solid var(--focus, var(--primary));
+  outline-offset: 2px;
+}
+@keyframes ub-cookies-in {
+  from { opacity: 0; transform: translateY(12px); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-cookies { animation: none; }
+}
+@media (max-width: 600px) {
+  .ub-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; }
+  .ub-cookies__btn { flex: 1; }
+}
+
+/* ---------- Pages légales (app/(main)/legal/[page]) : lisibles, sommaire, sections ---------- */
+.ub-legal .ub-wrap { max-width: 780px; }
+.ub-legal__title { margin: 0 0 6px; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; }
+.ub-legal__updated { margin: 0 0 var(--space-8); color: var(--ink-muted); font-size: 14px; }
+.ub-legal__toc { margin-bottom: var(--space-8); padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--ub-r-card, 12px); background: var(--surface); }
+.ub-legal__toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 24px; margin: 0; padding-left: 20px; }
+.ub-legal__toc a { color: var(--ink); font-size: 15px; text-decoration: none; }
+.ub-legal__toc a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
+.ub-legal__sec { padding: 22px 0; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
+.ub-legal__sec h2 { margin: 0 0 8px; font-family: var(--ub-font-head, inherit); font-size: 20px; line-height: 1.3; }
+.ub-legal__sec p { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.7; }

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

@@ -0,0 +1,85 @@
+/* Avis clients (modules/ub/reviews.tsx, review-form.tsx, app/(main)/review) : variables du thème, s'accorde à chaque boutique. */
+
+.ub-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* Étoiles : la dernière peut être remplie en partie (moyenne) */
+.ub-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
+.ub-stars__one { position: relative; display: inline-block; width: var(--s, 16px); height: var(--s, 16px); background: color-mix(in srgb, var(--ink-muted) 35%, transparent); -webkit-mask: var(--ub-star-shape) center / contain no-repeat; mask: var(--ub-star-shape) center / contain no-repeat; }
+.ub-stars__one > span { position: absolute; inset: 0 auto 0 0; background: var(--star, #f5b400); }
+:root { --ub-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E"); }
+
+/* ---------- Fiche produit ---------- */
+.ub-reviews { scroll-margin-top: 90px; }
+.ub-reviews__title { margin: 0 0 var(--space-8); font-size: clamp(26px, 3vw, 36px); }
+.ub-reviews__empty { max-width: 40em; margin: 0; padding: 24px; border: 1px dashed var(--border); border-radius: var(--ub-r-card, 12px); color: var(--ink-muted); }
+.ub-reviews__grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
+.ub-reviews__summary { position: sticky; top: 100px; display: grid; gap: 10px; padding: 24px; border: 1px solid var(--border); border-radius: var(--ub-r-card, 12px); background: var(--surface); }
+.ub-reviews__avg { margin: 0; line-height: 1; }
+.ub-reviews__avg b { font: 700 48px/1 var(--ub-font-head, inherit); color: var(--ink); }
+.ub-reviews__avg span { color: var(--ink-muted); font-size: 18px; }
+.ub-reviews__count { margin: 0; color: var(--ink-muted); font-size: 14px; }
+.ub-reviews__bars { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-muted); }
+.ub-reviews__bars li { display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 8px; }
+.ub-reviews__bar { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink-muted) 18%, transparent); }
+.ub-reviews__bar i { display: block; height: 100%; border-radius: inherit; background: var(--star, #f5b400); }
+.ub-reviews__how { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
+.ub-reviews__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
+.ub-review { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--ub-r-card, 12px); background: var(--surface); }
+.ub-review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
+.ub-review__verified { display: inline-flex; align-items: center; gap: 6px; color: var(--success, #149e5f); font-size: 12px; font-weight: 600; }
+.ub-review__verified::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--success, #149e5f); color: #fff; font-size: 10px; }
+.ub-review__title { margin: 10px 0 0; font-weight: 700; color: var(--ink); }
+.ub-review__text { margin: 6px 0 0; color: var(--ink); line-height: 1.6; white-space: pre-line; }
+.ub-review__by { margin: 10px 0 0; color: var(--ink-muted); font-size: 13px; }
+
+/* ---------- Accueil : derniers avis ---------- */
+.ub-homereviews__head { display: grid; justify-items: center; gap: 6px; margin-bottom: var(--space-8); text-align: center; }
+.ub-homereviews__head .ub-head { margin: 0; font-size: clamp(26px, 3.2vw, 40px); }
+.ub-homereviews__kicker { margin: 0; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
+.ub-homereviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
+.ub-quote { display: flex; flex-direction: column; gap: 12px; height: 100%; margin: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--ub-r-card, 14px); background: var(--surface); }
+.ub-quote blockquote { flex: 1; margin: 0; }
+.ub-quote blockquote b { display: block; margin-bottom: 6px; color: var(--ink); }
+.ub-quote blockquote p { margin: 0; color: var(--ink); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
+.ub-quote blockquote::before { content: "“"; display: block; height: 28px; color: var(--primary); font: 700 48px/1 Georgia, serif; }
+.ub-quote__product { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--ink); }
+.ub-quote__img { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: var(--ub-r-media, 8px); background: var(--tint-1); }
+.ub-quote__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-quote__product span:last-child { display: grid; min-width: 0; }
+.ub-quote__product b { font-size: 14px; }
+.ub-quote__product small { overflow: hidden; color: var(--ink-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---------- Page « Laisser un avis » ---------- */
+.ub-reviewpage .ub-wrap { max-width: 760px; }
+.ub-reviewpage__title { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); }
+.ub-reviewpage__lead { margin: 0 0 var(--space-8); color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
+.ub-reviewpage__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
+.ub-reviewpage__item { padding: 22px; border: 1px solid var(--border); border-radius: var(--ub-r-card, 14px); background: var(--surface); }
+.ub-reviewpage__product { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; color: var(--ink); }
+.ub-reviewpage__img { flex: none; width: 60px; height: 60px; overflow: hidden; border-radius: var(--ub-r-media, 10px); background: var(--tint-1); }
+.ub-reviewpage__img img { width: 100%; height: 100%; object-fit: cover; }
+
+.ub-rform { display: grid; gap: 14px; }
+.ub-rform__stars { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; }
+.ub-rform__stars legend { margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
+.ub-rform__stars label { position: relative; cursor: pointer; color: color-mix(in srgb, var(--ink-muted) 45%, transparent); font-size: 34px; line-height: 1; transition: transform 0.12s, color 0.12s; }
+.ub-rform__stars label.is-on { color: var(--star, #f5b400); }
+.ub-rform__stars label:hover { transform: scale(1.12); }
+.ub-rform__stars input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
+.ub-rform__stars label:focus-within { outline: 2px solid var(--focus, var(--primary)); outline-offset: 2px; border-radius: 6px; }
+.ub-rform__hint { margin-left: 10px; color: var(--ink-muted); font-size: 14px; }
+.ub-rform__field { display: grid; gap: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
+.ub-rform__field small { color: var(--ink-muted); font-weight: 400; }
+.ub-rform__field input, .ub-rform__field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--ub-r-btn-input, 10px); background: var(--bg); color: var(--ink); font: inherit; font-weight: 400; }
+.ub-rform__field input:focus, .ub-rform__field textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 0; border-color: var(--primary); }
+.ub-rform__btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--ub-r-btn, 999px); background: var(--primary); color: var(--on-primary); font-weight: 700; cursor: pointer; }
+.ub-rform__btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ub-rform__error { margin: 0; color: var(--sale, #dc2626); font-size: 14px; }
+.ub-rform__done { margin: 0; padding: 14px 16px; border-radius: var(--ub-r-card, 10px); background: color-mix(in srgb, var(--success, #149e5f) 12%, transparent); color: var(--ink); }
+
+@media (max-width: 900px) {
+  .ub-reviews__grid { grid-template-columns: 1fr; gap: var(--space-8); }
+  .ub-reviews__summary { position: static; }
+  .ub-homereviews__list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(82%, 320px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
+  .ub-homereviews__list > li { scroll-snap-align: start; }
+}

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

@@ -0,0 +1,103 @@
+/* Accueil « Riviera » (Summer) — modules/ub/riviera.tsx. Élégance d'été : gris perle, vert bouteille, laiton ; typo à empattements.
+   Jetons valables sur tout le site (fiche produit, panier, checkout, compte). */
+
+[data-variant="summer"] {
+  --bg: #f1efeb; --surface: #e8e5df; --tint-1: #e4e0d8; --tint-2: #e9ece6; --tint-3: #ece6dc; --tint-4: #e3e7e4;
+  --ink: #16181a; --ink-muted: #5d6360; --border: #d9d5cd;
+  --primary: #1f3a30; --on-primary: #f4f1ea; --accent: #a8864a; --on-accent: #16181a;
+  --sale: #9a3b2e; --star: #a8864a; --success: #2f6b4f;
+  --hero-bg: #efeeeb; --hero-ink: #16181a; --hero-muted: #55595a;
+  --band-bg: #1f3a30; --band-ink: #f4f1ea; --bubble-bg: #1f3a30; --bubble-ink: #f4f1ea;
+  --topbar-bg: #1f3a30; --topbar-ink: #efe7d6; --focus: #a8864a;
+  --shadow-card: 0 18px 40px -28px rgb(22 24 26 / 0.45);
+  --ub-font-head: var(--font-serif); --ub-font-body: var(--font-jakarta);
+  --ub-head-weight: 500; --ub-head-case: none; --ub-head-track: -0.01em;
+  --ub-r-card: 2px; --ub-r-btn: 999px; --ub-r-tile: 2px; --ub-r-hero: 0px; --ub-r-media: 2px;
+  --rv-green: #1f3a30; --rv-brass: #a8864a;
+  color-scheme: light;
+}
+[data-variant="summer"] .ub-nav { background: var(--bg); border-bottom: 1px solid var(--border); }
+[data-variant="summer"] .ub-nav__cta { background: var(--rv-green); color: #f4f1ea; }
+[data-variant="summer"] .ub-footwrap { --foot-bg: var(--rv-green); --foot-ink: #efe7d6; --cta-bg: #e8e5df; --cta-ink: #16181a; }
+[data-variant="summer"] .ub-card { background: transparent; box-shadow: none; }
+[data-variant="summer"] .ub-badge { background: var(--rv-green); color: #f4f1ea; }
+
+.ub-rv-kicker { margin: 0; color: var(--rv-brass); font: 600 12px/16px var(--ub-font-body); letter-spacing: 0.32em; text-transform: uppercase; }
+.ub-rv-h2 { margin: 8px 0 0; font: 500 clamp(30px, 3.6vw, 50px) / 1.08 var(--font-serif); letter-spacing: -0.01em; }
+.ub-rv-sub { max-width: 32em; margin: 0; color: var(--hero-muted); font-size: 17px; line-height: 28px; }
+.ub-rv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 999px; font: 600 14px/18px var(--ub-font-body); letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.2s, transform 0.2s; }
+.ub-rv-btn--solid { background: var(--rv-green); color: #f4f1ea; }
+.ub-rv-btn--solid:hover { transform: translateY(-2px); }
+.ub-rv-btn--light { background: #f4f1ea; color: var(--rv-green); }
+.ub-rv-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
+.ub-rv-link svg { width: 16px; height: 16px; }
+.ub-rv-price { display: inline-flex; gap: 8px; align-items: baseline; font-weight: 600; }
+.ub-rv-price s { color: var(--ink-muted); font-weight: 400; font-size: 0.9em; }
+
+/* ---------- Hero éditorial ---------- */
+.ub-rv-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); }
+.ub-rv-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: clamp(600px, 50vw, 780px); padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.ub-rv-hero__text { display: grid; justify-items: start; gap: 22px; align-self: center; padding-bottom: 40px; }
+.ub-rv-title { margin: 0; font: 500 clamp(46px, 5.6vw, 86px) / 1.02 var(--font-serif); letter-spacing: -0.02em; text-wrap: balance; }
+.ub-rv-title em { font-style: italic; color: var(--rv-green); }
+.ub-rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
+.ub-rv-note { margin: 0; padding-left: 14px; border-left: 2px solid var(--rv-brass); color: var(--hero-muted); font-size: 14px; }
+.ub-rv-note b { color: var(--ink); font: 500 22px/1 var(--font-serif); }
+/* Visuel en fond : moitié droite, fondu vers la gauche et fusionné avec le fond (multiply : le gris du studio disparaît) */
+.ub-rv-hero .ub-rv-hero__bg { left: 38%; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
+.ub-rv-hero .ub-rv-hero__bg:has(.ub-fade.is-loaded) { background: none; }
+@media (max-width: 900px) {
+  .ub-rv-hero .ub-rv-hero__in { grid-template-columns: 1fr; min-height: 0; padding-top: 360px; padding-bottom: 40px; }
+  .ub-rv-hero .ub-rv-hero__bg { left: 0; bottom: auto; height: 420px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
+}
+
+/* ---------- Sections ---------- */
+.ub-rv-section { padding-top: var(--space-16); }
+.ub-riviera > :last-child { padding-bottom: var(--space-16); }
+.ub-rv-head { display: grid; gap: 4px; margin-bottom: var(--space-8); }
+.ub-rv-head--row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); }
+
+/* Lookbook : une grande image, deux petites empilées */
+.ub-rv-looks { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; }
+.ub-rv-look { position: relative; display: grid; overflow: hidden; color: var(--ink); }
+.ub-rv-look--1 { grid-row: span 2; }
+.ub-rv-look__img { display: block; overflow: hidden; background: var(--surface); aspect-ratio: 4 / 5; }
+.ub-rv-look--2 .ub-rv-look__img, .ub-rv-look--3 .ub-rv-look__img { aspect-ratio: 16 / 9; }
+.ub-rv-look__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
+.ub-rv-look:hover .ub-rv-look__img img { transform: scale(1.03); }
+.ub-rv-look__cap { display: grid; gap: 2px; padding: 12px 0 0; }
+.ub-rv-look__cap small { color: var(--rv-brass); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }
+.ub-rv-look__cap b { font: 500 20px/1.25 var(--font-serif); }
+
+/* Couleurs de la saison : rail horizontal, pastille de couleur sous chaque pièce */
+.ub-rv-colours { margin-top: var(--space-16); padding: var(--space-16) 0; background: var(--surface); }
+.ub-rv-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 20px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
+.ub-rv-rail > li { scroll-snap-align: start; }
+@media (min-width: 1100px) { .ub-rv-rail { grid-auto-columns: calc((100% - 60px) / 4); } }
+.ub-rv-piece { display: grid; gap: 8px; color: var(--ink); }
+.ub-rv-piece__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg); }
+.ub-rv-piece__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-rv-piece__swatch { width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border), inset 0 0 0 3px var(--surface); }
+.ub-rv-piece__name { font-weight: 600; font-size: 15px; }
+
+/* Sur-mesure : bloc vert, étapes numérotées */
+.ub-rv-tailor { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: clamp(32px, 5vw, 64px); background: var(--rv-green); color: #f4f1ea; }
+.ub-rv-tailor .ub-rv-h2 { color: #f4f1ea; }
+.ub-rv-tailor .ub-rv-sub { color: #cfd8d2; }
+.ub-rv-tailor__text { display: grid; justify-items: start; gap: 18px; }
+.ub-rv-cd .ub-countdown__c { background: rgb(255 255 255 / 0.08); color: #f4f1ea; box-shadow: none; border: 1px solid rgb(255 255 255 / 0.2); }
+.ub-rv-cd .ub-countdown__c small { color: #cfd8d2; }
+.ub-rv-steps { display: grid; align-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
+.ub-rv-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgb(255 255 255 / 0.18); }
+.ub-rv-steps__n { font: 500 38px/1 var(--font-serif); color: var(--rv-brass); }
+.ub-rv-steps b { display: block; font-size: 17px; }
+.ub-rv-steps small { color: #cfd8d2; font-size: 14px; }
+
+@media (max-width: 900px) {
+  .ub-rv-hero__in { grid-template-columns: 1fr; gap: 0; padding-top: var(--space-8); }
+  .ub-rv-hero__text { padding-bottom: var(--space-6); }
+  .ub-rv-looks { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
+  .ub-rv-look--1 { grid-column: span 2; grid-row: auto; }
+  .ub-rv-tailor { grid-template-columns: 1fr; }
+  .ub-rv-head--row { flex-direction: column; align-items: start; }
+}

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

@@ -0,0 +1,144 @@
+/* Accueil « Souk » (Mubarak · Sable) — modules/ub/souk.tsx. Crème, sable, terre cuite, safran, indigo ; treillis, auvents, cachet de cire. */
+
+[data-variant="mubarak-2"] {
+  --bg: #fbf6ee; --surface: #ffffff; --tint-1: #f6ead9; --tint-2: #f3e3cf; --tint-3: #efe1d0; --tint-4: #f7eee2;
+  --ink: #2a1a10; --ink-muted: #7a6554; --border: #eadccb;
+  --primary: #8a3b1e; --on-primary: #fff8ef; --accent: #c8841f; --on-accent: #2a1a10;
+  --sale: #a8431f; --star: #c8841f; --success: #3f7a57;
+  --hero-bg: #fbf6ee; --hero-ink: #2a1a10; --hero-muted: #6b5645;
+  --band-bg: #8a3b1e; --band-ink: #fff8ef; --bubble-bg: #8a3b1e; --bubble-ink: #fff8ef;
+  --topbar-bg: #5a2a17; --topbar-ink: #f6e3c4; --focus: #c8841f;
+  --shadow-card: 0 20px 40px -26px rgb(90 42 23 / 0.45);
+  --ub-font-head: var(--font-poppins); --ub-font-body: var(--font-inter);
+  --ub-head-weight: 600; --ub-head-case: none; --ub-head-track: -0.01em;
+  --ub-r-card: 16px; --ub-r-btn: 999px; --ub-r-tile: 16px; --ub-r-hero: 0px; --ub-r-media: 12px;
+  --sk-terra: #a8431f; --sk-brown: #5a2a17; --sk-saffron: #d99a22; --sk-indigo: #2c3e74; --sk-teal: #1f6b66; --sk-sand: #e9d4b4;
+  color-scheme: light;
+}
+[data-variant="mubarak-2"] .ub-nav { background: rgb(251 246 238 / 0.95); border-bottom: 1px solid var(--border); }
+[data-variant="mubarak-2"] .ub-nav__cta { background: var(--sk-terra); color: #fff8ef; }
+[data-variant="mubarak-2"] .ub-footwrap { --foot-bg: #5a2a17; --foot-ink: #f6e3c4; --cta-bg: var(--sk-saffron); --cta-ink: #2a1a10; }
+
+/* ---------- Éléments communs ---------- */
+.ub-sk-lattice { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: rgb(168 67 31 / 0.07); pointer-events: none; }
+.ub-sk-kicker { margin: 0; color: var(--sk-terra); font: 600 12px/16px var(--font-inter); letter-spacing: 0.28em; text-transform: uppercase; }
+.ub-sk-h2 { margin: 8px 0 0; font: 600 clamp(30px, 3.6vw, 50px) / 1.1 var(--font-poppins); letter-spacing: -0.02em; color: var(--ink); }
+.ub-sk-sub { max-width: 34em; margin: 0; color: var(--hero-muted); font-size: 17px; line-height: 28px; }
+.ub-sk-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--sk-terra); color: #fff8ef; font: 600 15px/18px var(--font-poppins); box-shadow: 0 12px 26px -14px rgb(168 67 31 / 0.8); transition: transform 0.2s, background-color 0.2s; }
+.ub-sk-btn:hover { transform: translateY(-2px); background: var(--sk-brown); }
+.ub-sk-btn svg { width: 18px; height: 18px; }
+.ub-sk-btn--ghost { background: transparent; color: var(--sk-brown); box-shadow: inset 0 0 0 1.5px var(--sk-brown); }
+.ub-sk-btn--ghost:hover { background: var(--sk-brown); color: #fff8ef; }
+.ub-sk-price { display: inline-flex; align-items: baseline; gap: 8px; }
+.ub-sk-price b { font: 600 17px/1 var(--font-poppins); color: var(--sk-terra); }
+.ub-sk-price s { color: var(--ink-muted); font-size: 13px; }
+
+/* ---------- Hero ---------- */
+.ub-sk-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); }
+.ub-sk-hero__in { display: grid; align-items: center; min-height: clamp(660px, 52vw, 840px); padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.ub-sk-hero__text { display: grid; justify-items: start; gap: 22px; max-width: min(640px, 56%); }
+.ub-sk-title { margin: 0; font: 600 clamp(46px, 5.2vw, 84px) / 1.04 var(--font-poppins); letter-spacing: -0.035em; text-wrap: balance; }
+.ub-sk-title__hl { position: relative; z-index: 0; color: var(--sk-terra); white-space: nowrap; }
+/* Trait de pinceau safran sous le mot mis en avant */
+.ub-sk-title__hl::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; bottom: 0.08em; height: 0.26em; border-radius: 0.2em 0.5em 0.3em 0.6em; background: var(--sk-saffron); opacity: 0.45; transform: rotate(-1.5deg); }
+.ub-sk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
+.ub-sk-perks { display: flex; flex-wrap: wrap; gap: 22px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--hero-muted); font-size: 14px; }
+.ub-sk-perks li { display: inline-flex; align-items: center; gap: 8px; }
+.ub-sk-perks svg { width: 20px; height: 20px; color: var(--sk-terra); }
+/* Visuel (843 × 1264) : bord droit et bas du hero, toute la hauteur ; côté gauche et haut fondus (masque sur l'image seule) */
+.ub-sk-visual { position: absolute; top: 0; right: 0; bottom: 0; height: 100%; aspect-ratio: 843 / 1264; max-width: 50%; margin: 0; }
+.ub-sk-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; mix-blend-mode: multiply;
+  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, transparent 0%, #000 12%); -webkit-mask-composite: source-in;
+  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, transparent 0%, #000 12%); mask-composite: intersect; }
+.ub-sk-hero .ub-wrap { position: relative; z-index: 1; }
+/* Cachet de cire (remise) */
+.ub-sk-seal { position: absolute; top: 30%; left: 4%; z-index: 2; display: grid; place-items: center; align-content: center; width: 124px; height: 124px; margin: 0; color: #fbe9cf; text-align: center;
+  background: radial-gradient(circle at 35% 30%, #c65a32 0%, #9c3a1b 55%, #6e2410 100%);
+  clip-path: polygon(50% 0, 60% 4%, 70% 2%, 77% 9%, 87% 11%, 90% 21%, 98% 28%, 96% 38%, 100% 48%, 96% 58%, 98% 68%, 91% 75%, 88% 86%, 78% 89%, 70% 97%, 60% 95%, 50% 100%, 40% 96%, 30% 98%, 23% 91%, 13% 88%, 10% 78%, 2% 71%, 4% 61%, 0 51%, 4% 41%, 2% 31%, 9% 24%, 12% 13%, 22% 10%, 30% 3%, 40% 5%);
+  filter: drop-shadow(0 12px 18px rgb(90 42 23 / 0.45)); transform: rotate(-8deg); }
+.ub-sk-seal::before { content: ""; position: absolute; inset: 14px; border: 1.5px solid rgb(251 233 207 / 0.45); border-radius: 50%; }
+.ub-sk-seal small { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
+.ub-sk-seal b { font: 700 32px/1 var(--font-poppins); }
+
+/* ---------- Sections ---------- */
+.ub-sk-section { padding-top: var(--space-24); }
+.ub-souk > :last-child { padding-bottom: var(--space-24); }
+.ub-sk-head { display: grid; justify-items: center; gap: 6px; margin-bottom: var(--space-12); text-align: center; }
+
+/* Vitrine : bande sable à treillis, grand produit + quatre pièces, arcs outrepassés liserés de terre cuite */
+.ub-sk-vitrine { position: relative; isolation: isolate; margin-top: 0; padding-bottom: var(--space-16); background: linear-gradient(180deg, #fbf6ee 0%, #f4e7d4 45%, #f8efe2 100%); }
+.ub-sk-vitrine .ub-sk-lattice { color: rgb(168 67 31 / 0.06); }
+.ub-sk-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; text-align: left; }
+.ub-sk-more { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1.5px solid currentColor; color: var(--sk-terra); font: 600 15px/1 var(--font-poppins); }
+.ub-sk-more svg { width: 16px; height: 16px; }
+/* Le comptoir : fenêtre en arc outrepassé (produit choisi) + liste */
+.ub-sk-counter { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
+.ub-sk-counter__stage { position: relative; width: min(100%, 440px); justify-self: center; aspect-ratio: 4 / 5; }
+.ub-sk-view { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; color: var(--ink); transition: opacity 0.4s, visibility 0.4s; }
+.ub-sk-counter:has(#ub-sk-pick-0:checked) .ub-sk-view[data-i="0"],
+.ub-sk-counter:has(#ub-sk-pick-1:checked) .ub-sk-view[data-i="1"],
+.ub-sk-counter:has(#ub-sk-pick-2:checked) .ub-sk-view[data-i="2"],
+.ub-sk-counter:has(#ub-sk-pick-3:checked) .ub-sk-view[data-i="3"],
+.ub-sk-counter:has(#ub-sk-pick-4:checked) .ub-sk-view[data-i="4"],
+.ub-sk-counter:has(#ub-sk-pick-5:checked) .ub-sk-view[data-i="5"] { opacity: 1; visibility: visible; }
+.ub-sk-view__img { position: absolute; inset: 0; overflow: hidden; border-radius: 50% 50% 14px 14px / 36% 36% 14px 14px; background: var(--tint-1);
+  box-shadow: 0 0 0 1px rgb(168 67 31 / 0.4), 0 0 0 9px #f8efe2, 0 0 0 10px rgb(168 67 31 / 0.25), 0 40px 70px -40px rgb(90 42 23 / 0.6); }
+.ub-sk-view__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-sk-view__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; justify-items: start; gap: 6px; padding: 16px 18px; border-radius: 12px; background: rgb(255 250 242 / 0.94); box-shadow: 0 12px 24px -16px rgb(42 26 16 / 0.5); }
+.ub-sk-view__off { padding: 4px 10px; border-radius: 999px; background: var(--sk-terra); color: #fff8ef; font: 600 12px/1 var(--font-poppins); }
+.ub-sk-view__name { font: 600 20px/1.2 var(--font-poppins); letter-spacing: -0.01em; }
+.ub-sk-view__go { display: inline-flex; align-items: center; gap: 6px; color: var(--sk-terra); font: 600 14px/1 var(--font-poppins); }
+.ub-sk-view__go svg { width: 15px; height: 15px; }
+.ub-sk-counter__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(168 67 31 / 0.18); }
+.ub-sk-counter__list li { border-bottom: 1px solid rgb(168 67 31 / 0.18); }
+.ub-sk-pick { position: absolute; opacity: 0; pointer-events: none; }
+.ub-sk-row { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 12px; cursor: pointer; transition: background-color 0.2s; }
+.ub-sk-row:hover { background: rgb(255 255 255 / 0.6); }
+.ub-sk-pick:checked + .ub-sk-row { background: #fff; box-shadow: 0 10px 24px -18px rgb(90 42 23 / 0.6); }
+.ub-sk-pick:checked + .ub-sk-row::before { content: ""; position: absolute; left: -2px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--sk-terra); }
+.ub-sk-pick:focus-visible + .ub-sk-row { outline: 2px solid var(--focus); outline-offset: 2px; }
+.ub-sk-row__img { display: block; width: 58px; height: 58px; overflow: hidden; border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px; background: var(--tint-1); }
+.ub-sk-row__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-sk-row__name { font: 500 16px/1.3 var(--font-poppins); }
+.ub-sk-row__off { padding: 3px 9px; border-radius: 999px; background: rgb(168 67 31 / 0.1); color: var(--sk-terra); font: 600 12px/1 var(--font-poppins); }
+.ub-sk-row__price { color: var(--ink); font: 600 16px/1 var(--font-poppins); white-space: nowrap; }
+
+/* Pour qui ? : portes en arc */
+.ub-sk-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
+.ub-sk-door { display: grid; place-items: center; align-content: end; gap: 8px; min-height: 180px; padding: 22px; border-radius: 999px 999px 16px 16px / 70% 70% 16px 16px; background: var(--a1); color: #fff8ef; font: 600 18px/1.2 var(--font-poppins); text-align: center; transition: transform 0.2s; }
+.ub-sk-door:hover { transform: translateY(-4px); }
+.ub-sk-door svg { width: 18px; height: 18px; }
+
+/* Carte de vœux en enveloppe */
+.ub-sk-letter { position: relative; max-width: 920px; margin: 0 auto; padding: 100px 26px 26px; border-radius: 18px; background: linear-gradient(180deg, #c98e5b, #a8431f); box-shadow: 0 40px 80px -40px rgb(90 42 23 / 0.6); }
+.ub-sk-letter__flap { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 140px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #b86a3a, #9c3a1b); clip-path: polygon(0 0, 100% 0, 50% 100%); }
+.ub-sk-letter__card { position: relative; isolation: isolate; z-index: 1; display: grid; justify-items: center; gap: 16px; overflow: hidden; padding: 90px 24px clamp(40px, 6vw, 70px); border-radius: 12px; background: #fffaf2; text-align: center; box-shadow: 0 -10px 30px -20px rgb(0 0 0 / 0.5); }
+.ub-sk-letter__card .ub-sk-lattice { color: rgb(168 67 31 / 0.06); }
+.ub-sk-cd .ub-countdown__c { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
+.ub-sk-cd .ub-countdown__c b { color: var(--sk-terra); }
+.ub-sk-sign { margin: 6px 0 0; font: italic 500 18px/1.3 var(--font-poppins); color: var(--sk-brown); }
+.ub-sk-letter__seal { position: absolute; z-index: 3; top: 104px; left: 50%; display: grid; place-items: center; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #d06a3e, #8a2e14 70%); box-shadow: 0 10px 18px rgb(90 42 23 / 0.45); }
+.ub-sk-letter__seal svg { width: 30px; height: 32px; fill: #f6d9b0; }
+
+@media (max-width: 1024px) {
+  .ub-sk-counter { grid-template-columns: 1fr; }
+  .ub-sk-counter__stage { width: min(100%, 380px); }
+}
+@media (max-width: 900px) {
+  .ub-sk-visual { position: relative; top: auto; height: 380px; max-width: none; width: 100%; aspect-ratio: auto; }
+  .ub-sk-visual img { object-position: right top; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
+  .ub-sk-hero .ub-sk-hero__in { min-height: 0; margin-top: -60px; padding-top: 0; padding-bottom: 48px; }
+  .ub-sk-hero__text { max-width: none; }
+  .ub-sk-seal { top: 24%; left: 8%; width: 100px; height: 100px; }
+  .ub-sk-seal b { font-size: 26px; }
+}
+@media (max-width: 600px) {
+  .ub-sk-title { font-size: 42px; }
+  .ub-sk-row { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; }
+  .ub-sk-row__img { width: 50px; height: 50px; }
+  .ub-sk-row__off { display: none; }
+  .ub-sk-section { padding-top: var(--space-16); }
+  .ub-souk > :last-child { padding-bottom: var(--space-16); }
+  .ub-sk-letter { padding: 100px 12px 12px; }
+}