@salifbiaye/create-boutique 0.3.6 → 0.4.0

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

@@ -0,0 +1,169 @@
+/* Accueil « Cinéma » (thèmes Halloween) — modules/ub/cinema.tsx. Affiche de film, rangées façon streaming.
+   Halloween 1 : orange, mot au pinceau. Halloween 2 : jaune acide, mot fin et espacé. */
+
+[data-theme="halloween"]:not([data-variant]),
+[data-variant="halloween-2"] {
+  --bg: #0b0a0c; --surface: #151317; --tint-1: #1f1c22; --tint-2: #26221f; --tint-3: #1a1612; --tint-4: #181519;
+  --ink: #f4efe8; --ink-muted: #a39b91; --border: #2a2629;
+  --primary: #ff7a1a; --on-primary: #0b0a0c; --accent: #ffb15c; --on-accent: #0b0a0c;
+  --sale: #ff8a3d; --hero-bg: #070608; --hero-ink: #ffffff; --hero-muted: #c9c1b6;
+  --band-bg: #ff7a1a; --band-ink: #0b0a0c; --bubble-bg: #ff7a1a; --bubble-ink: #0b0a0c;
+  --topbar-bg: #000000; --topbar-ink: #ff9a45; --focus: #ffb15c;
+  --ub-font-head: var(--font-oswald); --ub-head-weight: 700; --ub-head-case: uppercase; --ub-head-track: 0;
+  --ub-r-card: 10px; --ub-r-btn: 4px; --ub-r-tile: 10px; --ub-r-media: 10px;
+  --cn-hl: var(--primary);
+}
+[data-variant="halloween-2"] {
+  --primary: #f2e14c; --on-primary: #0b0a0c; --accent: #f7ec8a; --sale: #f2e14c;
+  --band-bg: #f2e14c; --bubble-bg: #f2e14c; --topbar-ink: #f2e14c; --focus: #f2e14c;
+}
+
+/* ---------- Hero affiche ---------- */
+.ub-cn-hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  min-height: clamp(600px, 54vw, 820px);
+  display: flex;
+  align-items: stretch;
+  background: radial-gradient(70% 90% at 65% 40%, #2b1d14 0%, var(--hero-bg) 70%);
+  color: var(--hero-ink);
+}
+.ub-cn-hero[data-has-image] { background: var(--hero-bg) var(--cn-img) center / cover no-repeat; }
+/* Vignettage : texte lisible à gauche, fiche lisible à droite */
+.ub-cn-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(90deg, rgb(7 6 8 / 0.9) 0%, rgb(7 6 8 / 0.35) 34%, rgb(7 6 8 / 0.2) 58%, rgb(7 6 8 / 0.85) 100%),
+    linear-gradient(0deg, var(--bg) 0%, transparent 28%);
+}
+.ub-cn-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 380px); gap: var(--space-8); align-items: center; width: 100%; padding-top: var(--space-16); padding-bottom: var(--space-12); }
+.ub-cn-tag {
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 3px;
+  background: var(--primary);
+  color: var(--on-primary);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.ub-cn-title { margin-top: var(--space-4) !important; display: grid; font-family: var(--font-oswald); font-weight: 700; text-transform: uppercase; line-height: 0.86; }
+.ub-cn-title__main { font-size: clamp(64px, 9.2vw, 150px); color: #ffffff; text-shadow: 0 6px 30px rgb(0 0 0 / 0.5); animation: ub-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+/* Halloween 1 : mot au pinceau orange (réf. « Skin Maker 2 ») */
+.ub-cn-title__hl {
+  margin: -0.05em 0 0 0.1em;
+  font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
+  font-weight: 700;
+  font-size: clamp(56px, 8vw, 128px);
+  line-height: 1;
+  text-transform: none;
+  color: var(--cn-hl);
+  transform: rotate(-6deg);
+  transform-origin: left center;
+  text-shadow: 0 0 40px color-mix(in srgb, var(--primary) 45%, transparent);
+  animation: ub-rise 0.7s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+/* Halloween 2 : mot fin, jaune, espacé (réf. « Skin Walker: Hunting ») */
+[data-variant="halloween-2"] .ub-cn-title__hl {
+  margin: 0.04em 0 0;
+  font-family: var(--font-oswald);
+  font-weight: 300;
+  font-size: clamp(54px, 7.8vw, 124px);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transform: none;
+  text-shadow: none;
+}
+.ub-cn-fav { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-8); padding: 8px 14px; border-radius: 4px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.18); font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
+.ub-cn-fav svg { width: 15px; height: 15px; color: var(--primary); }
+
+/* Fiche séance */
+.ub-cn-panel { display: grid; gap: var(--space-4); align-self: center; animation: ub-rise 0.7s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+.ub-cn-panel__title { font-family: var(--font-oswald); font-size: 26px; line-height: 1.1; text-transform: uppercase; }
+.ub-cn-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.ub-cn-badges li { padding: 3px 8px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 3px; font-size: 12px; font-weight: 600; color: var(--hero-muted); }
+.ub-cn-badges li:first-child { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
+.ub-cn-panel__text { font-size: 15px; line-height: 23px; color: var(--hero-muted); }
+.ub-cn-panel__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
+.ub-cn-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: var(--ub-r-btn); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 0.2s, background 0.2s, color 0.2s; }
+.ub-cn-btn:hover { transform: translateY(-2px); }
+.ub-cn-btn--play { background: var(--primary); color: var(--on-primary); }
+.ub-cn-btn--ghost { border: 1.5px solid rgb(255 255 255 / 0.8); color: #ffffff; }
+.ub-cn-btn--ghost:hover { background: #ffffff; color: #0b0a0c; }
+.ub-cn-next { margin-top: var(--space-4); }
+.ub-cn-next p { margin-bottom: var(--space-2) !important; font-family: var(--font-oswald); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
+.ub-cn-next ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
+.ub-cn-next a { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.2); background: var(--surface); }
+.ub-cn-next img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
+.ub-cn-next a:hover img { transform: scale(1.06); }
+.ub-cn-next__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.25); font-size: 18px; color: #ffffff; }
+
+/* ---------- Rangées ---------- */
+.ub-cn-section { padding-top: var(--space-12); padding-bottom: var(--space-4); }
+.ub-cn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
+.ub-cn-h2 { font-family: var(--font-oswald); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; text-transform: uppercase; }
+.ub-cn-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
+.ub-cn-more svg { width: 15px; height: 15px; }
+.ub-cn-row { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: var(--space-2) max(var(--space-6), calc((100vw - var(--content-max)) / 2 + var(--space-6))) var(--space-4); list-style: none; }
+.ub-cn-row::-webkit-scrollbar { display: none; }
+.ub-cn-row > li { flex: 0 0 clamp(170px, 18vw, 230px); scroll-snap-align: start; }
+.ub-cn-poster { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--ub-r-card); background: var(--surface); box-shadow: 0 16px 40px -18px rgb(0 0 0 / 0.8); transition: transform 0.3s, box-shadow 0.3s; }
+.ub-cn-poster:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--primary) 45%, transparent); }
+.ub-cn-poster img { width: 100%; height: 100%; object-fit: cover; }
+.ub-cn-poster .ub-ph { position: absolute; inset: 0; }
+.ub-cn-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.88) 100%); pointer-events: none; }
+.ub-cn-poster__off { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 8px; border-radius: 3px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 800; }
+.ub-cn-poster__info { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: grid; gap: 4px; }
+.ub-cn-poster__info b { font-family: var(--font-oswald); font-size: 17px; line-height: 1.15; text-transform: uppercase; }
+.ub-cn-poster__info span { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; color: var(--primary); }
+.ub-cn-poster__info s { font-size: 12px; font-weight: 500; color: rgb(255 255 255 / 0.6); }
+
+/* Top 10 : grand chiffre détouré derrière l'affiche */
+.ub-cn-top > li { flex-basis: clamp(210px, 21vw, 270px); }
+.ub-cn-top__item { position: relative; display: flex; align-items: flex-end; height: 100%; }
+.ub-cn-top__num { flex: none; width: 46%; margin-right: -14%; font-family: var(--font-oswald); font-weight: 700; font-size: clamp(120px, 12vw, 180px); line-height: 0.8; text-align: right; color: var(--bg); -webkit-text-stroke: 3px color-mix(in srgb, var(--primary) 75%, #ffffff); letter-spacing: -0.06em; }
+.ub-cn-poster--small { flex: 1; }
+.ub-cn-poster--small::after { display: none; }
+
+/* Séance de minuit : bandes noires façon écran de cinéma */
+.ub-cn-screen {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  min-height: clamp(340px, 34vw, 480px);
+  padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 64px);
+  border-top: 18px solid #000;
+  border-bottom: 18px solid #000;
+  border-radius: 4px;
+  background: #1a1410 var(--cn-screen, none) center / cover no-repeat;
+}
+.ub-cn-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.92) 0%, rgb(0 0 0 / 0.55) 55%, rgb(0 0 0 / 0.25) 100%); }
+.ub-cn-screen__text { position: relative; display: grid; gap: var(--space-4); max-width: 560px; justify-items: start; }
+.ub-cn-screen__text p { color: var(--ink-muted); }
+.ub-cn-screen__cd .ub-countdown__c { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.2); color: #ffffff; box-shadow: none; }
+.ub-cn-screen__cd .ub-countdown__c b { color: var(--primary); }
+
+body:has(.ub-cinema) .ub-footcta { display: none; }
+
+@media (max-width: 900px) {
+  .ub-cn-hero { min-height: 0; }
+  .ub-cn-hero[data-has-image] { background-size: cover; background-position: 60% top; }
+  .ub-cn-hero::before { background: linear-gradient(180deg, rgb(7 6 8 / 0.2) 0%, rgb(7 6 8 / 0.55) 40%, var(--bg) 100%); }
+  .ub-cn-hero__in { grid-template-columns: minmax(0, 1fr); padding-top: 180px; gap: var(--space-6); }
+  .ub-cn-title__main { font-size: clamp(56px, 16vw, 88px); }
+  .ub-cn-title__hl { font-size: clamp(48px, 13vw, 76px); }
+  .ub-cn-row { padding: var(--space-2) var(--space-4) var(--space-4); gap: var(--space-3); }
+  .ub-cn-row > li { flex-basis: 150px; }
+  .ub-cn-top > li { flex-basis: 190px; }
+  .ub-cn-top__num { font-size: 110px; }
+  .ub-cn-screen { border-top-width: 10px; border-bottom-width: 10px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-cn-title__main, .ub-cn-title__hl, .ub-cn-panel { animation: none; }
+}

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

@@ -0,0 +1,242 @@
+/* Accueil « Gala » (thèmes Nouvel An) — modules/ub/gala.tsx. Noir profond, or, argent.
+   Nouvel An 1 : or dominant, texte à gauche. Nouvel An 2 : argent dominant, tout centré, année géante. */
+
+[data-theme="nouvel-an"]:not([data-variant]),
+[data-variant="nouvel-an-2"] {
+  --bg: #0a0a0c; --surface: #141417; --tint-1: #1c1b20; --tint-2: #232228; --tint-3: #1a1813; --tint-4: #16161a;
+  --ink: #f6f3ea; --ink-muted: #a9a59b; --border: #2a292f;
+  --primary: #d8b04a; --on-primary: #0a0a0c; --accent: #cfd1d8; --on-accent: #0a0a0c;
+  --sale: #e8c766; --star: #e8c766; --success: #7bd88f;
+  --hero-bg: #0a0a0c; --hero-ink: #ffffff; --hero-muted: #b8b4aa;
+  --band-bg: #d8b04a; --band-ink: #0a0a0c; --bubble-bg: #d8b04a; --bubble-ink: #0a0a0c;
+  --topbar-bg: #000000; --topbar-ink: #e8c766; --focus: #e8c766;
+  --gl-gold: linear-gradient(135deg, #f7e08e 0%, #d8b04a 35%, #a8812a 60%, #f3d980 100%);
+  --gl-silver: linear-gradient(180deg, #ffffff 0%, #d9dbe1 40%, #9a9ca6 62%, #eceef2 100%);
+  --ub-font-head: var(--font-sora); --ub-head-weight: 700; --ub-head-case: none; --ub-head-track: -0.02em;
+  --ub-r-card: 14px; --ub-r-btn: var(--radius-pill); --ub-r-tile: 14px; --ub-r-media: 10px;
+}
+[data-variant="nouvel-an-2"] {
+  --primary: #d9dbe1; --on-primary: #0a0a0c; --accent: #d8b04a; --on-accent: #0a0a0c;
+  --topbar-ink: #d9dbe1; --band-bg: #d9dbe1; --focus: #d9dbe1;
+  --ub-font-head: var(--font-outfit); --ub-r-btn: 4px;
+}
+
+/* ---------- Hero ---------- */
+.ub-gl-hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: clamp(560px, 50vw, 780px);
+  overflow: hidden;
+  isolation: isolate;
+  background: radial-gradient(90% 90% at 70% 40%, #2a2630 0%, var(--hero-bg) 60%);
+  color: var(--hero-ink);
+}
+.ub-gl-hero[data-has-image] { background: var(--hero-bg) var(--gl-img) right center / cover no-repeat; }
+.ub-gl-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: linear-gradient(90deg, rgb(10 10 12 / 0.92) 0%, rgb(10 10 12 / 0.55) 38%, transparent 62%);
+}
+.ub-gl-hero__sparkle {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background-image:
+    radial-gradient(2px 2px at 12% 22%, #f7e08e 50%, transparent 51%),
+    radial-gradient(1.5px 1.5px at 28% 70%, #ffffff 50%, transparent 51%),
+    radial-gradient(2px 2px at 44% 30%, #d8b04a 50%, transparent 51%),
+    radial-gradient(1.5px 1.5px at 8% 84%, #f7e08e 50%, transparent 51%),
+    radial-gradient(1.5px 1.5px at 36% 12%, #ffffff 50%, transparent 51%);
+  opacity: 0.7;
+  animation: ub-gl-twinkle 3.5s ease-in-out infinite alternate;
+}
+@keyframes ub-gl-twinkle { from { opacity: 0.35; } to { opacity: 0.85; } }
+.ub-gl-hero__in { position: relative; z-index: 1; width: 100%; padding-top: var(--space-16); padding-bottom: var(--space-16); }
+.ub-gl-hero__text { max-width: 600px; }
+.ub-gl-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--hero-muted); }
+.ub-gl-year { display: none; }
+.ub-gl-title { margin-top: var(--space-3) !important; font-family: var(--ub-font-head); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; }
+.ub-gl-title__a { display: block; font-size: clamp(52px, 7vw, 104px); color: #ffffff; animation: ub-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+.ub-gl-title__b {
+  display: block;
+  font-size: clamp(56px, 7.6vw, 112px);
+  background: var(--gl-gold);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: ub-rise 0.7s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+.ub-gl-sub { max-width: 46ch; margin-top: var(--space-6) !important; font-size: 17px; line-height: 27px; color: var(--hero-muted); }
+.ub-gl-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
+.ub-gl-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  padding: 0 30px;
+  border-radius: var(--ub-r-btn);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  transition: transform 0.2s, background 0.2s, color 0.2s;
+}
+.ub-gl-btn:hover { transform: translateY(-2px); }
+.ub-gl-btn--solid { background: var(--gl-gold); color: #0a0a0c; }
+.ub-gl-btn--ghost { border: 1.5px solid rgb(255 255 255 / 0.7); color: #ffffff; }
+.ub-gl-btn--ghost:hover { background: #ffffff; color: #0a0a0c; }
+.ub-gl-btn--dark { background: #0a0a0c; color: #f7e08e; }
+
+/* Nouvel An 2 : centré, année géante argentée (réf. « Happy 2022 New Year ») */
+[data-variant="nouvel-an-2"] .ub-gl-hero[data-has-image] { background-position: center; }
+[data-variant="nouvel-an-2"] .ub-gl-hero::before { background: radial-gradient(60% 70% at 50% 50%, rgb(10 10 12 / 0.78) 0%, rgb(10 10 12 / 0.35) 60%, transparent 100%); }
+[data-variant="nouvel-an-2"] .ub-gl-hero__text { max-width: 760px; margin: 0 auto; text-align: center; }
+[data-variant="nouvel-an-2"] .ub-gl-year {
+  display: block;
+  margin-top: var(--space-2);
+  font-family: var(--ub-font-head);
+  font-weight: 800;
+  font-size: clamp(96px, 15vw, 220px);
+  line-height: 0.9;
+  letter-spacing: -0.03em;
+  background: var(--gl-silver);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 10px 30px rgb(0 0 0 / 0.6));
+  animation: ub-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+[data-variant="nouvel-an-2"] .ub-gl-title { margin-top: var(--space-2) !important; }
+[data-variant="nouvel-an-2"] .ub-gl-title__a,
+[data-variant="nouvel-an-2"] .ub-gl-title__b {
+  display: inline;
+  font-size: clamp(18px, 2vw, 26px);
+  font-weight: 500;
+  letter-spacing: 0.34em;
+  text-transform: uppercase;
+  color: #e7e8ec;
+  background: none;
+  -webkit-background-clip: border-box;
+  background-clip: border-box;
+}
+[data-variant="nouvel-an-2"] .ub-gl-title__b { color: var(--accent); }
+[data-variant="nouvel-an-2"] .ub-gl-sub { margin-left: auto !important; margin-right: auto !important; }
+[data-variant="nouvel-an-2"] .ub-gl-actions { justify-content: center; }
+[data-variant="nouvel-an-2"] .ub-gl-btn--solid { background: #4a4a50; color: #ffffff; }
+[data-variant="nouvel-an-2"] .ub-gl-btn--ghost { background: #ffffff; color: #0a0a0c; border-color: #ffffff; }
+
+/* ---------- Bande minuit ---------- */
+.ub-gl-midnight { border-top: 1px solid rgb(216 176 74 / 0.35); border-bottom: 1px solid rgb(216 176 74 / 0.35); background: #000; }
+.ub-gl-midnight__in { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; padding-top: var(--space-8); padding-bottom: var(--space-8); }
+.ub-gl-midnight .ub-gl-eyebrow { color: var(--primary); margin-bottom: var(--space-3) !important; }
+.ub-gl-midnight__cd .ub-countdown { gap: 14px; }
+.ub-gl-midnight__cd .ub-countdown__c { min-width: 84px; height: 88px; border: 1px solid rgb(216 176 74 / 0.45); background: rgb(216 176 74 / 0.06); color: #ffffff; box-shadow: none; }
+.ub-gl-midnight__cd .ub-countdown__c b { font-size: 36px; line-height: 40px; background: var(--gl-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.ub-gl-midnight__cd .ub-countdown__c small { color: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; }
+.ub-gl-midnight__text { display: grid; gap: 8px; justify-items: start; }
+.ub-gl-midnight__text p { color: var(--ink-muted); }
+.ub-gl-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
+.ub-gl-link svg { width: 16px; height: 16px; }
+
+/* ---------- Sections ---------- */
+.ub-gl-section { padding-top: var(--space-16); padding-bottom: var(--space-12); }
+.ub-gl-h2 { font-family: var(--ub-font-head); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
+.ub-gl-head { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-bottom: var(--space-12); text-align: center; }
+.ub-gl-head--left { display: grid; justify-content: start; text-align: left; gap: 8px; margin-bottom: var(--space-8); }
+.ub-gl-head--left p { color: var(--ink-muted); }
+.ub-gl-rule { flex: 1; max-width: 180px; height: 1px; background: linear-gradient(90deg, transparent, var(--primary)); }
+.ub-gl-rule:last-child { background: linear-gradient(90deg, var(--primary), transparent); }
+
+/* Sélection : cadre intérieur doré */
+.ub-gl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); margin: 0; padding: 0; list-style: none; }
+.ub-gl-card { display: grid; gap: 6px; text-align: center; }
+.ub-gl-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: var(--space-3); border-radius: var(--ub-r-card); background: var(--surface); }
+.ub-gl-card__media::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(216 176 74 / 0.55); border-radius: calc(var(--ub-r-card) - 6px); pointer-events: none; transition: inset 0.3s, border-color 0.3s; }
+.ub-gl-card:hover .ub-gl-card__media::after { inset: 16px; border-color: #f7e08e; }
+.ub-gl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
+.ub-gl-card:hover .ub-gl-card__media img { transform: scale(1.05); }
+.ub-gl-card__media .ub-ph { position: absolute; inset: 0; }
+.ub-gl-card__off { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--gl-gold); color: #0a0a0c; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
+.ub-gl-card__name { font-size: 16px; font-weight: 600; }
+.ub-gl-card__price { display: flex; justify-content: center; align-items: baseline; gap: 10px; }
+.ub-gl-card__price b { font-size: 18px; background: var(--gl-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.ub-gl-card__price s { font-size: 13px; color: var(--ink-muted); }
+
+/* 12 coups de minuit */
+.ub-gl-strokes__row { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0 max(var(--space-6), calc((100vw - var(--content-max)) / 2 + var(--space-6))) var(--space-4); list-style: none; }
+.ub-gl-strokes__row li { flex: 0 0 220px; scroll-snap-align: start; }
+.ub-gl-stroke { position: relative; display: grid; justify-items: center; gap: 8px; padding: var(--space-8) var(--space-4) var(--space-6); border: 1px solid var(--border); border-radius: var(--ub-r-card); background: linear-gradient(180deg, var(--surface), var(--bg)); text-align: center; transition: border-color 0.2s, transform 0.2s; }
+.ub-gl-stroke:hover { border-color: var(--primary); transform: translateY(-4px); }
+.ub-gl-stroke__num { position: absolute; top: 6px; left: 14px; font-family: Georgia, "Times New Roman", serif; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgb(216 176 74 / 0.6); }
+.ub-gl-stroke__img { width: 120px; height: 120px; overflow: hidden; border-radius: 50%; border: 2px solid rgb(216 176 74 / 0.5); background: var(--surface); }
+.ub-gl-stroke__img img { width: 100%; height: 100%; object-fit: cover; }
+.ub-gl-stroke__name { font-size: 14px; font-weight: 600; line-height: 19px; min-height: 38px; }
+.ub-gl-stroke__price { color: var(--primary); }
+
+/* Bannière feuille d'or */
+.ub-gl-foil { position: relative; overflow: hidden; display: grid; justify-items: center; gap: var(--space-4); padding: clamp(48px, 7vw, 96px) var(--space-6); border-radius: var(--ub-r-card); background: var(--gl-gold); color: #0a0a0c; text-align: center; }
+.ub-gl-foil .ub-gl-eyebrow { color: rgb(10 10 12 / 0.7); }
+.ub-gl-foil p { max-width: 50ch; color: rgb(10 10 12 / 0.75); }
+.ub-gl-foil__confetti {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    radial-gradient(3px 6px at 10% 20%, #0a0a0c 50%, transparent 52%),
+    radial-gradient(3px 6px at 85% 30%, #ffffff 50%, transparent 52%),
+    radial-gradient(3px 6px at 70% 80%, #0a0a0c 50%, transparent 52%),
+    radial-gradient(3px 6px at 20% 75%, #ffffff 50%, transparent 52%),
+    radial-gradient(3px 6px at 50% 12%, #0a0a0c 50%, transparent 52%);
+  opacity: 0.35;
+}
+
+/* Page : pas de 2e bandeau CTA en bas de l'accueil Gala */
+body:has(.ub-gala) .ub-footcta { display: none; }
+
+@media (max-width: 900px) {
+  .ub-gl-hero { min-height: 0; align-items: flex-end; }
+  .ub-gl-hero[data-has-image] { background-position: 70% top; background-size: auto 62%; }
+  .ub-gl-hero::before, [data-variant="nouvel-an-2"] .ub-gl-hero::before { background: linear-gradient(180deg, transparent 0%, rgb(10 10 12 / 0.6) 36%, var(--hero-bg) 58%); }
+  .ub-gl-hero__in { padding-top: 300px; padding-bottom: var(--space-12); }
+  .ub-gl-midnight__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
+  .ub-gl-midnight__cd .ub-countdown__c { min-width: 0; flex: 1 1 0; height: 72px; }
+  .ub-gl-midnight__cd .ub-countdown__c b { font-size: 26px; line-height: 30px; }
+  .ub-gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); }
+  .ub-gl-rule { display: none; }
+  .ub-gl-strokes__row { padding: 0 var(--space-4) var(--space-4); }
+  .ub-gl-strokes__row li { flex-basis: 180px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-gl-hero__sparkle, .ub-gl-title__a, .ub-gl-title__b, [data-variant="nouvel-an-2"] .ub-gl-year { animation: none; }
+}
+
+/* ---------- Nouvel An 2 : hero sombre, tout le reste en clair (ivoire, or, argent) ---------- */
+[data-variant="nouvel-an-2"] {
+  --bg: #faf8f3; --surface: #f2eee5; --tint-1: #ece6da; --tint-2: #e6dfd0; --tint-3: #f5f1e8; --tint-4: #efe9de;
+  --ink: #16151a; --ink-muted: #6b675f; --border: #e4ddcf;
+  --primary: #16151a; --on-primary: #ffffff; --accent: #b08a2e; --on-accent: #ffffff; --sale: #a07b22;
+  --hero-bg: #0a0a0c; --hero-ink: #ffffff; --hero-muted: #c9c5bb;
+  --topbar-bg: #0a0a0c; --topbar-ink: #e8c766;
+  /* Or plus soutenu pour rester lisible sur fond clair */
+  --gl-gold-ink: linear-gradient(135deg, #b8912f 0%, #8a6a1c 55%, #c9a13f 100%);
+}
+[data-variant="nouvel-an-2"] .ub-gl-midnight { background: var(--bg); border-color: #e0d3ae; }
+[data-variant="nouvel-an-2"] .ub-gl-midnight .ub-gl-eyebrow { color: var(--accent); }
+[data-variant="nouvel-an-2"] .ub-gl-midnight__cd .ub-countdown__c { background: #ffffff; border-color: #e0d3ae; color: var(--ink); box-shadow: 0 10px 24px -14px rgb(22 21 26 / 0.25); }
+[data-variant="nouvel-an-2"] .ub-gl-midnight__cd .ub-countdown__c b { background: var(--gl-gold-ink); -webkit-background-clip: text; background-clip: text; }
+[data-variant="nouvel-an-2"] .ub-gl-link { color: var(--accent); }
+[data-variant="nouvel-an-2"] .ub-gl-rule { background: linear-gradient(90deg, transparent, var(--accent)); }
+[data-variant="nouvel-an-2"] .ub-gl-rule:last-child { background: linear-gradient(90deg, var(--accent), transparent); }
+[data-variant="nouvel-an-2"] .ub-gl-card__media { background: #ffffff; box-shadow: 0 18px 40px -24px rgb(22 21 26 / 0.35); }
+[data-variant="nouvel-an-2"] .ub-gl-card__media::after { border-color: rgb(176 138 46 / 0.55); }
+[data-variant="nouvel-an-2"] .ub-gl-card__price b,
+[data-variant="nouvel-an-2"] .ub-gl-stroke__price { background: var(--gl-gold-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
+[data-variant="nouvel-an-2"] .ub-gl-stroke { background: #ffffff; border-color: var(--border); box-shadow: 0 14px 30px -22px rgb(22 21 26 / 0.3); }
+[data-variant="nouvel-an-2"] .ub-gl-stroke:hover { border-color: var(--accent); }
+[data-variant="nouvel-an-2"] .ub-gl-stroke__num { -webkit-text-stroke-color: rgb(176 138 46 / 0.55); }
+[data-variant="nouvel-an-2"] .ub-gl-stroke__img { border-color: rgb(176 138 46 / 0.45); }
+[data-variant="nouvel-an-2"] .ub-footwrap { --foot-bg: var(--surface); --foot-ink: var(--ink); --cta-bg: #0a0a0c; --cta-ink: #ffffff; }
+[data-variant="nouvel-an-2"] .ub-footwrap .ub-footer { border: 1px solid var(--border); }