/**
 * Grimages UI – home page: H1 and Hero (animated banners built in layers).
 * Markup: tmpl/hero.php. Behaviour: initHero() in grimages-ui.js. Data: banners/*.json.
 * Layers, back to front: .gri-hero__bg (theme decor) · .gri-hero__portrait · .gri-hero__stage (products) · .gri-hero__copy · .gri-hero__sticker
 */

/* ---------- H1 ---------- */
.gri-v2 .gri-mod-hero,
.gri-v2 .moduletable:has(> .mod-custom > .gri-home-top) { margin-bottom: var(--space-6) !important; }
.gri-v2 .gri-home-top { position: relative; }
.gri-v2 .gri-home__title:not(#gri-none) {
  margin: 0 0 var(--space-4);
  font: 800 clamp(24px, 2.4vw, 32px)/1.15 var(--font-display) !important;
  letter-spacing: -.01em;
  text-transform: none !important;
  color: var(--violet-900) !important;
}

/* ---------- Hero frame ---------- */
.gri-v2 .gri-hero { --hero-dur: 7s; position: relative; }

.gri-v2 .gri-hero__viewport {
  position: relative;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  touch-action: pan-y;
}

.gri-v2 .gri-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: center;
  min-height: 440px;
  padding: var(--space-7);
  overflow: hidden;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity .6s var(--ease-out), visibility 0s linear .6s;
}

.gri-v2 .gri-hero__slide.is-active { z-index: 1; visibility: visible; opacity: 1; transition: opacity .6s var(--ease-out); }

/* Themes */
.gri-v2 .gri-hero--halloween { background: radial-gradient(120% 95% at 72% 18%, #3b1257 0%, #1a0b2b 46%, #0b0612 100%); }
.gri-v2 .gri-hero--splash { background: linear-gradient(118deg, var(--magenta-500) 0%, var(--violet-700) 62%, var(--violet-900) 100%); }
.gri-v2 .gri-hero--promo { background: linear-gradient(112deg, var(--violet-900) 0%, var(--violet-700) 46%, var(--magenta-500) 100%); }

/* ---------- Copy (real text, translated) ---------- */
.gri-v2 .gri-hero__copy { position: relative; z-index: 3; grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

.gri-v2 .gri-hero__eyebrow {
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font: 700 13px/18px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gri-v2 .gri-hero__title:not(#gri-none) {
  margin: 0;
  font: 800 clamp(32px, 3.6vw, 52px)/1.02 var(--font-display) !important;
  letter-spacing: -.015em;
  text-transform: none !important;
  color: #fff !important;
  text-wrap: balance;
}

.gri-v2 .gri-hero--halloween .gri-hero__title:not(#gri-none) { color: #dcffcf !important; text-shadow: 0 0 18px rgba(140, 255, 120, .45), 0 0 2px rgba(220, 255, 207, .8); }

.gri-v2 .gri-hero__text { max-width: 30em; margin: 0; font: 400 17px/26px var(--font-body); color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.gri-v2 .gri-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

.gri-v2 .gri-hero a.gri-hero__cta:not(#gri-none) {
  --btn-bg: #fff;
  --btn-fg: var(--violet-900);
  --btn-edge: rgba(20, 0, 40, .35);
  color: var(--violet-900) !important;
  text-decoration: none;
}

.gri-v2 .gri-hero__pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-pill);
  font: 700 15px/1 var(--font-body);
  color: #fff;
}

/* ---------- Products: stickers on a stage ---------- */
.gri-v2 .gri-hero__stage {
  position: absolute;
  z-index: 2;
  top: 7%;
  bottom: 7%;
  left: 43%;
  right: 17%;
  translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -10px);
  transition: translate .4s var(--ease-out);
}

.gri-v2 .gri-hero__item {
  --w: calc(var(--s, 1) * clamp(104px, 10.4vw, 150px));
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  margin: 0;
  rotate: var(--r);
}

.gri-v2 .gri-hero__float { display: block; }

.gri-v2 .gri-hero__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 22px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 18px 40px rgba(20, 0, 40, .35), 0 2px 0 rgba(255, 255, 255, .6) inset;
}

/* Fan: the cards open around a point below the stage */
.gri-v2 .gri-hero__stage--fan .gri-hero__item {
  --w: clamp(118px, 11.5vw, 168px);
  top: auto;
  bottom: 14%;
  left: 50%;
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% 250%;
}

/* ---------- Portrait: a crop of an existing picture, faded into the scene ---------- */
.gri-v2 .gri-hero__portrait {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: var(--ratio);
  background: var(--img) var(--bgpos) / var(--bgsize) no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%);
  mask-image: linear-gradient(to right, transparent 0, #000 38%);
  translate: calc(var(--mx, 0) * -6px) 0;
  transition: translate .4s var(--ease-out);
}

.gri-v2 .gri-hero--splash .gri-hero__portrait,
.gri-v2 .gri-hero--promo .gri-hero__portrait { -webkit-mask-image: radial-gradient(85% 140% at 82% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(85% 140% at 82% 50%, #000 52%, transparent 100%); }

/* ---------- Discount sticker ---------- */
.gri-v2 .gri-hero__sticker {
  position: absolute;
  z-index: 4;
  top: 5%;
  left: 45%;
  display: grid;
  place-items: center;
  width: 128px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow-400);
  box-shadow: 0 12px 30px rgba(20, 0, 40, .35), 0 0 0 6px rgba(255, 255, 255, .25);
  font: 800 38px/1 var(--font-display);
  color: var(--violet-900);
  rotate: -12deg;
}

/* ---------- Navigation: titled tabs with a progress bar, pause ---------- */
.gri-v2 .gri-hero__nav { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.gri-v2 .gri-hero__tabs { position: relative; display: flex; flex: 1; gap: var(--space-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gri-v2 .gri-hero__tabs::-webkit-scrollbar { display: none; }

.gri-v2 .gri-hero__tab {
  position: relative;
  flex: none;
  padding: 10px 14px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: 700 14px/18px var(--font-body);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}

.gri-v2 .gri-hero__tab:hover { background: var(--violet-050); color: var(--violet-900); }
.gri-v2 .gri-hero__tab.is-active { color: var(--violet-900); }
.gri-v2 .gri-hero__tab:focus-visible,
.gri-v2 .gri-hero__pause:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.gri-v2 .gri-hero__progress { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.gri-v2 .gri-hero__progress::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--magenta-500); transform: scaleX(0); transform-origin: left; }
.gri-v2 .gri-hero__tab.is-active .gri-hero__progress::after { animation: gri-hero-progress var(--hero-dur) linear forwards; }
.gri-v2 .gri-hero.is-paused .gri-hero__tab.is-active .gri-hero__progress::after { animation-play-state: paused; }
.gri-v2 .gri-hero.is-stopped .gri-hero__tab.is-active .gri-hero__progress::after { animation: none; transform: scaleX(1); }

.gri-v2 .gri-hero__pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--violet-900);
  cursor: pointer;
}

.gri-v2 .gri-hero__pause svg { width: 16px; height: 16px; fill: currentColor; }
.gri-v2 .gri-hero__icon-play,
.gri-v2 .gri-hero.is-stopped .gri-hero__icon-pause { display: none; }
.gri-v2 .gri-hero.is-stopped .gri-hero__icon-play { display: block; }

/* ---------- Entrances (each time a slide becomes active) ---------- */
.gri-v2 .gri-hero__slide.is-active .gri-hero__copy > * { animation: gri-hero-up .7s var(--ease-out) both; animation-delay: calc(.12s + var(--i, 0) * .09s); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__item { animation: gri-hero-pop .8s var(--ease-bounce) both; animation-delay: calc(.3s + var(--i) * .1s); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__stage--fan .gri-hero__item { animation-name: gri-hero-fan; animation-duration: 1s; animation-timing-function: var(--ease-out); animation-delay: calc(.35s + var(--i) * .05s); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__stage--cascade .gri-hero__item { animation-name: gri-hero-drop; animation-duration: .9s; animation-timing-function: var(--ease-out); animation-delay: calc(.25s + var(--i) * .12s); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__float { animation: gri-hero-float 5.5s ease-in-out infinite alternate; animation-delay: calc(1.4s + var(--i) * .45s); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__portrait { animation: gri-hero-portrait 1.1s var(--ease-out) both .1s; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__sticker { animation: gri-hero-sticker .7s var(--ease-bounce) both 1s, gri-hero-pulse 2.4s ease-in-out 2s infinite; }

@keyframes gri-hero-up { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes gri-hero-pop { from { opacity: 0; scale: .4; rotate: calc(var(--r) - 24deg); } to { opacity: 1; scale: 1; rotate: var(--r); } }
@keyframes gri-hero-fan { from { opacity: 0; rotate: 0deg; } 30% { opacity: 1; } to { opacity: 1; rotate: var(--r); } }
@keyframes gri-hero-drop { 0% { opacity: 0; translate: 0 -160%; } 60% { opacity: 1; translate: 0 6%; } 80% { translate: 0 -3%; } 100% { opacity: 1; translate: 0 0; } }
@keyframes gri-hero-float { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -10px; rotate: 2deg; } }
@keyframes gri-hero-portrait { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes gri-hero-sticker { from { opacity: 0; scale: .2; rotate: -60deg; } to { opacity: 1; scale: 1; rotate: -12deg; } }
@keyframes gri-hero-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes gri-hero-progress { to { transform: scaleX(1); } }

/* ---------- Decor: shared ---------- */
.gri-v2 .gri-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 6px); transition: translate .5s var(--ease-out); }
.gri-v2 .gri-hero__bg > * { position: absolute; }

/* Halloween: moon, fog, bats, pumpkins */
.gri-v2 .gri-hero__moon { top: -48px; right: 31%; width: 170px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffbe6, #f4e3a1 58%, #d9b95e); box-shadow: 0 0 70px 24px rgba(244, 227, 161, .22); opacity: .9; }
.gri-v2 .gri-hero__fog { bottom: -32%; width: 75%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(205, 185, 255, .24), transparent); filter: blur(8px); }
.gri-v2 .gri-hero__fog--1 { left: -20%; }
.gri-v2 .gri-hero__fog--2 { left: 30%; bottom: -40%; }
.gri-v2 .gri-hero__fog--3 { left: 60%; bottom: -28%; width: 60%; }
.gri-v2 .gri-hero__bats { top: 16%; left: -60px; width: 46px; fill: #0b0612; filter: drop-shadow(0 0 6px rgba(205, 185, 255, .25)); }
.gri-v2 .gri-hero__bats--2 { top: 8%; width: 30px; }
.gri-v2 .gri-hero__bats--3 { top: 28%; width: 22px; }
.gri-v2 .gri-hero__pumpkin { bottom: 3%; left: 41%; width: 62px; }
.gri-v2 .gri-hero__pumpkin--2 { left: auto; right: 27%; bottom: 1%; width: 42px; }

.gri-v2 .gri-hero__slide.is-active .gri-hero__fog { animation: gri-hero-drift 16s ease-in-out infinite alternate; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__fog--2 { animation-duration: 22s; animation-direction: alternate-reverse; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__moon { animation: gri-hero-glow 5s ease-in-out infinite alternate; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__bats { animation: gri-hero-bat 13s linear infinite, gri-hero-flap .28s ease-in-out infinite alternate; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__bats--2 { animation-duration: 17s, .22s; animation-delay: -6s, 0s; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__bats--3 { animation-duration: 21s, .2s; animation-delay: -12s, 0s; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__pumpkin { animation: gri-hero-float 3.2s ease-in-out infinite alternate; }

@keyframes gri-hero-drift { from { translate: -6% 0; } to { translate: 8% -4%; } }
@keyframes gri-hero-glow { from { opacity: .75; } to { opacity: 1; } }
@keyframes gri-hero-bat { 0% { translate: 0 0; } 25% { translate: 30vw 30px; } 50% { translate: 60vw -10px; } 75% { translate: 90vw 25px; } 100% { translate: 120vw 0; } }
@keyframes gri-hero-flap { from { scale: 1 1; } to { scale: 1 .45; } }

/* Splash: paint blobs and sparkles */
.gri-v2 .gri-hero__blob { width: 420px; mix-blend-mode: screen; }
.gri-v2 .gri-hero__blob--1 { top: -38%; right: 14%; fill: #fff; opacity: .13; }
.gri-v2 .gri-hero__blob--2 { bottom: -45%; left: 28%; width: 380px; fill: #fff; opacity: .14; }
.gri-v2 .gri-hero__blob--3 { bottom: -30%; right: -8%; width: 320px; fill: var(--orange-500); opacity: .3; }
.gri-v2 .gri-hero__spark { left: var(--x); top: var(--y); width: 14px; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__blob { animation: gri-hero-spin 38s linear infinite; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__blob--2 { animation-duration: 52s; animation-direction: reverse; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__spark { animation: gri-hero-twinkle 2.6s ease-in-out infinite; animation-delay: var(--d); }

@keyframes gri-hero-spin { to { rotate: 360deg; } }
@keyframes gri-hero-twinkle { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: .9; scale: 1; } }

/* Promo: rays and confetti */
.gri-v2 .gri-hero__rays { top: 50%; left: 62%; width: 1100px; aspect-ratio: 1; margin: -550px 0 0 -550px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .08) 0 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.gri-v2 .gri-hero__confetti { top: -24px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); rotate: var(--r); opacity: .85; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__rays { animation: gri-hero-spin 60s linear infinite; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__confetti { animation: gri-hero-confetti var(--t) linear var(--d) infinite; }

@keyframes gri-hero-confetti { to { translate: 30px 520px; rotate: calc(var(--r) + 540deg); } }

/* ---------- Tablet and phone ---------- */
@media (max-width: 991.98px) {
  .gri-v2 .gri-hero__slide { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: var(--space-6) var(--space-5) 0; align-content: start; }
  .gri-v2 .gri-hero__copy { grid-row: 1; }
  .gri-v2 .gri-hero__stage { position: relative; inset: auto; grid-row: 2; height: 250px; margin: var(--space-4) calc(-1 * var(--space-5)) 0; translate: none; }
  .gri-v2 .gri-hero__portrait,
  .gri-v2 .gri-hero--splash .gri-hero__portrait,
  .gri-v2 .gri-hero--promo .gri-hero__portrait { top: auto; height: 60%; opacity: .6; -webkit-mask-image: radial-gradient(70% 70% at 70% 65%, #000 35%, transparent 100%); mask-image: radial-gradient(70% 70% at 70% 65%, #000 35%, transparent 100%); }
  .gri-v2 .gri-hero__sticker { top: auto; bottom: 200px; left: auto; right: var(--space-5); width: 96px; font-size: 28px; }
  .gri-v2 .gri-hero__item { --w: calc(var(--s, 1) * clamp(88px, 22vw, 130px)); }
  .gri-v2 .gri-hero__stage--fan .gri-hero__item { --w: clamp(96px, 24vw, 140px); bottom: 10%; }
  .gri-v2 .gri-hero__moon { right: 6%; width: 110px; }
  .gri-v2 .gri-hero__pumpkin { left: 6%; }
}

@media (max-width: 575.98px) {
  .gri-v2 .gri-hero__title:not(#gri-none) { font-size: 30px !important; }
  .gri-v2 .gri-hero__text { font-size: 15px; line-height: 22px; }
  .gri-v2 .gri-hero__stage { height: 210px; }
  .gri-v2 .gri-hero__item:nth-child(n + 6) { display: none; }
  .gri-v2 .gri-hero__stage--scatter .gri-hero__item:nth-child(5) { display: none; }
  .gri-v2 .gri-hero a.gri-hero__cta:not(#gri-none) { min-height: 48px; padding: 0 var(--space-5); font-size: 16px; }
}

/* ---------- Less motion: no idle loops, no parallax, no autoplay (JS) ---------- */
@media (prefers-reduced-motion: reduce) {
  .gri-v2 .gri-hero__slide.is-active .gri-hero__float,
  .gri-v2 .gri-hero__slide.is-active .gri-hero__bg *,
  .gri-v2 .gri-hero__slide.is-active .gri-hero__sticker { animation: none !important; }
  .gri-v2 .gri-hero__slide.is-active .gri-hero__copy > *,
  .gri-v2 .gri-hero__slide.is-active .gri-hero__item { animation-duration: .01s !important; animation-delay: 0s !important; }
  .gri-v2 .gri-hero__confetti { display: none; }
}

/* =====================================================================
   Home sections (GrimagesUi::onAfterModuleList, tmpl/home.php)
   ===================================================================== */
/* The top band is empty once its tiles moved under the Hero (only the old "Clique pour voir les catégories" module, hidden, is left). */
.gri-v2.gri-home .gri-section--tiles:not(:has(.moduletable:not(.gri-mod-tiles))) { display: none !important; }
.gri-v2.gri-home .content-bottom-position.moduletable,
.gri-v2.gri-home .grid-bottom-position.moduletable { margin-bottom: var(--space-8) !important; }

/* Section heads: one style for every block of the page */
.gri-v2 .gri-home-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.gri-v2 .gri-home-section__title:not(#gri-none),
.gri-v2.gri-home .gri-mod-best > .module-title:not(#gri-none) {
  margin: 0;
  font: 800 clamp(26px, 2.4vw, 32px)/1.15 var(--font-display) !important;
  letter-spacing: -.01em;
  text-transform: none !important;
  color: var(--violet-900) !important;
}
.gri-v2.gri-home .gri-mod-best > .module-title:not(#gri-none) { margin-bottom: var(--space-5); }
.gri-v2 .gri-home-section__lead { flex-basis: 100%; margin: 0; font: 400 16px/24px var(--font-body); color: var(--ink-muted); }
.gri-v2 a.gri-home-section__more:not(#gri-none) { display: inline-flex; align-items: center; gap: 4px; font: 700 15px/20px var(--font-body); color: var(--violet-700) !important; text-decoration: none; }
.gri-v2 a.gri-home-section__more:not(#gri-none):hover { text-decoration: underline; text-underline-offset: 3px; }
.gri-v2 .gri-home-section__more .gri-icon,
.gri-v2 .gri-home-section__more .gri-icon svg { width: 18px; height: 18px; }

/* ---------- Moments band (SeasonStrip): the category tiles, under the Hero ---------- */
/* The tiles keep the look they had in the top band (legacy grimages.css on Astroid's .breadcrumbs-content):
   white glass on the brand gradient; seasonal themes (plg_system_grimagesseasonal) dress them. */
.gri-v2.gri-home .moduletable.gri-mod-moments { margin-bottom: var(--space-6) !important; padding: var(--space-3); border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--grad-start), var(--grad-mid) 55%, var(--grad-end)); }
.gri-v2.gri-home .gri-mod-moments .hikashop_subcategories .hk-row-fluid {
  display: flex !important;
  flex-wrap: nowrap;
  gap: var(--space-3);
  /* Room for the hover lift and the seasonal glows: a scrolling row clips what overflows it. */
  margin: calc(-1 * var(--space-3)) !important;
  padding: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gri-v2.gri-home .gri-mod-moments .hikashop_subcategories .hk-row-fluid::-webkit-scrollbar { display: none; }
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment { flex: 1 1 0; min-width: 0; width: auto !important; max-width: none; padding: 0 !important; float: none !important; scroll-snap-align: start; }
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_container { height: 100%; margin: 0 !important; }
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_subcontainer {
  display: grid;
  overflow: hidden;
  place-items: center;
  height: 100% !important;
  min-height: 76px;
  padding: 0 !important;
  border-radius: var(--radius-md) !important; /* concentric: band radius-lg (28) - padding space-3 (12) */
  background-color: rgba(255, 255, 255, .12);
  transition: background-color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_subcontainer:not(.gri-season) { background: rgba(255, 255, 255, .12) !important; }
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_subcontainer:not(.gri-season):hover { background: rgba(255, 255, 255, .22) !important; }
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_subcontainer:hover { transform: translateY(-3px); }
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_category_name { position: relative; z-index: 2; display: block; width: 100%; }
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_category_name a {
  display: block;
  padding: 1.2em var(--space-3);
  font: 700 19px/1.2 var(--font-display) !important;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
}
.gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_subcontainer:not(.gri-season) .hikashop_category_name a { color: #fff !important; }

/* ---------- Reassurance ---------- */
.gri-v2 .gri-home-reassure .gri-reassure { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }

/* ---------- Best sellers: HikaShop listing as a rail, 4 cards visible ---------- */
.gri-v2.gri-home .gri-mod-best .gri-rail__track > .hikashop_product { flex-basis: calc((100% - 3 * var(--space-4)) / 4) !important; }
.gri-v2.gri-home .gri-mod-best .hikashop_products_pagination,
.gri-v2.gri-home .gri-mod-best .hikashop_products_listing > .hikashop_products_listing_title { display: none; }

/* ---------- "Bien démarrer": one kit per profile ---------- */
.gri-v2 .gri-kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }

.gri-v2 a.gri-kit:not(#gri-none) {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink) !important;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}

.gri-v2 a.gri-kit:not(#gri-none):hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); border-color: var(--violet-700); }
.gri-v2 .gri-kit__level { position: absolute; z-index: 1; top: var(--space-4); left: var(--space-4); padding: 6px 12px; border-radius: var(--radius-pill); font: 700 13px/18px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.gri-v2 .gri-kit--1 .gri-kit__level { background: var(--magenta-500); }
.gri-v2 .gri-kit--2 .gri-kit__level { background: var(--violet-700); }
.gri-v2 .gri-kit--3 .gri-kit__level { background: var(--violet-900); }
.gri-v2 .gri-kit__media { display: block; aspect-ratio: 4 / 3; padding: var(--space-6) var(--space-5) var(--space-3); background: radial-gradient(circle at 50% 60%, var(--violet-050), var(--surface) 70%); }
.gri-v2 .gri-kit__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
.gri-v2 a.gri-kit:hover .gri-kit__media img { transform: scale(1.05) rotate(-1.5deg); }
.gri-v2 .gri-kit__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.gri-v2 .gri-kit__name { font: 800 22px/1.2 var(--font-display); color: var(--violet-900); }
.gri-v2 .gri-kit__text { flex: 1; font: 400 15px/22px var(--font-body); color: var(--ink-muted); }
.gri-v2 .gri-kit__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.gri-v2 .gri-kit__foot .gri-price__now { font: 800 22px/1 var(--font-body); color: var(--magenta-500); }
.gri-v2 .gri-kit__cta { display: inline-flex; align-items: center; gap: 2px; font: 700 15px/20px var(--font-body); color: var(--violet-700); }
.gri-v2 .gri-kit__cta .gri-icon,
.gri-v2 .gri-kit__cta .gri-icon svg { width: 18px; height: 18px; transition: transform var(--dur-fast); }
.gri-v2 a.gri-kit:hover .gri-kit__cta .gri-icon { transform: translateX(3px); }

/* ---------- Brands: logo tiles ---------- */
.gri-v2 .gri-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.gri-v2 .gri-brands li { margin: 0; padding: 0; }
.gri-v2 .gri-brands li::before { content: none !important; }
.gri-v2 a.gri-brand:not(#gri-none) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  height: 96px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.gri-v2 a.gri-brand:not(#gri-none):hover { border-color: var(--violet-700); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.gri-v2 .gri-brand img { max-width: 100%; max-height: min(64px, 100%); width: auto; height: auto; object-fit: contain; transition: filter var(--dur-base), opacity var(--dur-base); }

/* Grey logos that light up on hover, where there is a hover (touch screens keep the colours). */
@media (hover: hover) {
  .gri-v2 .gri-brand img { filter: grayscale(1); opacity: .75; }
  .gri-v2 a.gri-brand:hover img,
  .gri-v2 a.gri-brand:focus-visible img { filter: none; opacity: 1; }
}

@media (max-width: 991.98px) {
  .gri-v2 .gri-kits { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(260px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-2); }
  .gri-v2 .gri-kits > * { scroll-snap-align: start; }
  .gri-v2 .gri-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gri-v2.gri-home .gri-mod-best .gri-rail__track > .hikashop_product { flex-basis: 46% !important; }
  .gri-v2.gri-home .gri-mod-moments .gri-tile--moment { flex: 0 0 min(72%, 260px); }
  .gri-v2.gri-home .content-bottom-position.moduletable,
  .gri-v2.gri-home .grid-bottom-position.moduletable { margin-bottom: var(--space-7) !important; }
  .gri-v2 .gri-home-reassure .gri-reassure { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-4); }
}

@media (max-width: 575.98px) {
  /* phones: the moments stacked full width (2 or 3 of them), none cut off at the edge */
  .gri-v2.gri-home .gri-mod-moments .hikashop_subcategories .hk-row-fluid { flex-direction: column; gap: var(--space-2); overflow: visible; scroll-snap-type: none; }
  .gri-v2.gri-home .gri-mod-moments .gri-tile--moment { flex: 0 0 auto; width: 100% !important; }
  .gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_subcontainer { min-height: 60px; }
  .gri-v2.gri-home .gri-mod-moments .gri-tile--moment .hikashop_category_name a { padding: .9em var(--space-3); font-size: 17px !important; }
}

@media (max-width: 575.98px) {
  .gri-v2 .gri-home-reassure .gri-reassure { grid-template-columns: minmax(0, 1fr); }
  .gri-v2 .gri-brands a.gri-brand:not(#gri-none) { height: 76px; }
}
.gri-v2.gri-home .gri-mod-moments .hikashop_category_information,
.gri-v2.gri-home .gri-mod-moments .hikashop_subcategories_listing,
.gri-v2.gri-home .gri-mod-moments .hikashop_subcategories { margin: 0 !important; padding: 0 !important; max-height: none !important; }

/* =====================================================================
   Hero: more themes and layouts
   ===================================================================== */
/* Light backgrounds: dark text, violet button */
.gri-v2 .gri-hero--light { color: var(--violet-900); }
.gri-v2 .gri-hero--light .gri-hero__title:not(#gri-none) { color: var(--violet-900) !important; }
.gri-v2 .gri-hero--light .gri-hero__text { color: var(--ink-muted); }
.gri-v2 .gri-hero--light .gri-hero__eyebrow { background: rgba(55, 0, 107, .08); color: var(--violet-900); }
.gri-v2 .gri-hero--light a.gri-hero__cta:not(#gri-none) { --btn-bg: var(--violet-700); --btn-fg: #fff; --btn-edge: var(--violet-900); color: #fff !important; }
.gri-v2 .gri-hero--light .gri-hero__pill { border-color: rgba(55, 0, 107, .25); color: var(--violet-900); }
.gri-v2 .gri-hero--light .gri-hero__item img { box-shadow: 0 16px 34px rgba(55, 0, 107, .18), 0 0 0 1px rgba(55, 0, 107, .06); }

.gri-v2 .gri-hero--candy { background: linear-gradient(120deg, #ffe3f1 0%, #f3e6ff 55%, #e1f5ff 100%); }
.gri-v2 .gri-hero--rainbow { background: linear-gradient(180deg, #fff 0%, #f7f0ff 100%); }
.gri-v2 .gri-hero--leaves { background: linear-gradient(120deg, #fbf7ef 0%, #f2f8ea 100%); }
.gri-v2 .gri-hero--paper { background: #fff; }
.gri-v2 .gri-hero--neon { background: radial-gradient(110% 100% at 70% 30%, #3a0d5c 0%, #1d0833 55%, #10041e 100%); }

/* Product price pill (badge "price") */
.gri-v2 .gri-hero--light .gri-hero__pill { font-size: 17px; }

/* Layout: spotlight (one star product, one small) */
.gri-v2 .gri-hero__stage--spotlight .gri-hero__item:first-child img { padding: 16px; border-radius: 30px; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__stage--spotlight .gri-hero__item { animation-name: gri-hero-zoom; animation-duration: 1s; animation-timing-function: var(--ease-bounce); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__stage--spotlight .gri-hero__item:nth-child(2) { animation-delay: .9s; }
@keyframes gri-hero-zoom { from { opacity: 0; scale: .5; rotate: calc(var(--r) + 14deg); } to { opacity: 1; scale: 1; rotate: var(--r); } }

/* Layout: row (a parade coming in from the right) */
.gri-v2 .gri-hero__slide.is-active .gri-hero__stage--row .gri-hero__item { animation-name: gri-hero-parade; animation-duration: .9s; animation-timing-function: var(--ease-out); animation-delay: calc(.2s + var(--i) * .12s); }
@keyframes gri-hero-parade { from { opacity: 0; translate: 220% 0; rotate: 20deg; } to { opacity: 1; translate: 0 0; rotate: var(--r); } }

/* Decor: candy */
.gri-v2 .gri-hero__candy { width: 64px; }
.gri-v2 .gri-hero__candy:nth-of-type(1) { top: 8%; left: 40%; }
.gri-v2 .gri-hero__candy:nth-of-type(2) { top: 70%; left: 44%; width: 90px; }
.gri-v2 .gri-hero__candy:nth-of-type(3) { top: 6%; right: 6%; width: 54px; }
.gri-v2 .gri-hero__candy:nth-of-type(4) { bottom: 10%; right: 4%; width: 80px; }
.gri-v2 .gri-hero__candy:nth-of-type(5) { bottom: -6%; left: 4%; width: 70px; opacity: .7; }
.gri-v2 .gri-hero__dot { left: var(--x); top: var(--y); width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--c); opacity: .7; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__candy { animation: gri-hero-bob 4.5s ease-in-out infinite alternate; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__candy:nth-of-type(2n) { animation-duration: 6s; animation-direction: alternate-reverse; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__dot { animation: gri-hero-twinkle 3s ease-in-out infinite; }
@keyframes gri-hero-bob { from { translate: 0 0; rotate: -8deg; } to { translate: 0 -14px; rotate: 10deg; } }

/* Decor: rainbow arcs drawn one after the other */
.gri-v2 .gri-hero__rainbow { right: 2%; bottom: -2%; width: 62%; fill: none; stroke-width: 20; stroke-linecap: round; opacity: .9; }
.gri-v2 .gri-hero__rainbow path { stroke-dasharray: 700; stroke-dashoffset: 700; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__rainbow path { animation: gri-hero-draw 1.2s var(--ease-out) forwards; animation-delay: calc(.2s + var(--k) * .12s); }
@keyframes gri-hero-draw { to { stroke-dashoffset: 0; } }
.gri-v2 .gri-hero__spark--dark { background: var(--violet-700); }

/* Decor: neon "NEW!" and hanging stars */
.gri-v2 .gri-hero__neon { top: 8%; left: 40%; display: flex; flex-direction: column; gap: 2px; font: 800 40px/1 var(--font-display); letter-spacing: .06em; opacity: .85; }
.gri-v2 .gri-hero__neon b { color: transparent; -webkit-text-stroke: 2px var(--c); text-shadow: 0 0 12px var(--c), 0 0 28px var(--c); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__neon b { animation: gri-hero-flicker 3.2s steps(1) infinite; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__neon b:nth-child(2) { animation-delay: .7s; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__neon b:nth-child(3) { animation-delay: 1.5s; }
@keyframes gri-hero-flicker { 0%, 100% { opacity: 1; } 4% { opacity: .2; } 6% { opacity: 1; } 9% { opacity: .35; } 11% { opacity: 1; } }
.gri-v2 .gri-hero__hang { top: 0; left: var(--x); width: 26px; height: calc(var(--len) + 30px); transform-origin: 50% 0; border-left: 0; }
.gri-v2 .gri-hero__hang::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--len); background: rgba(255, 220, 150, .6); }
.gri-v2 .gri-hero__hang svg { position: absolute; left: 0; top: var(--len); width: 26px; fill: #ffd98a; filter: drop-shadow(0 0 8px rgba(255, 217, 138, .8)); }
.gri-v2 .gri-hero__slide.is-active .gri-hero__hang { animation: gri-hero-swing 3s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes gri-hero-swing { from { rotate: -8deg; } to { rotate: 8deg; } }

/* Decor: one-stroke leaves growing from their stem, a brush stroke */
.gri-v2 .gri-hero__leaf { width: 120px; transform-origin: 50% 96%; }
.gri-v2 .gri-hero__leaf:nth-of-type(1) { bottom: -10px; right: 4%; rotate: 18deg; }
.gri-v2 .gri-hero__leaf--2 { bottom: -10px; right: 13%; width: 84px; rotate: -22deg; }
.gri-v2 .gri-hero__leaf--3 { top: -14px; left: 38%; width: 70px; rotate: 160deg; }
.gri-v2 .gri-hero__stroke { bottom: 8%; left: 2%; width: 40%; fill: none; stroke: #5fa83b; stroke-width: 10; stroke-linecap: round; opacity: .25; stroke-dasharray: 520; stroke-dashoffset: 520; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__leaf { animation: gri-hero-grow 1.1s var(--ease-bounce) both; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__leaf--2 { animation-delay: .25s; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__leaf--3 { animation-delay: .5s; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__stroke { animation: gri-hero-draw 1.6s var(--ease-out) .3s forwards; }
@keyframes gri-hero-grow { from { scale: 0; } to { scale: 1; } }

/* Decor: paper (soft brand colour clouds) */
.gri-v2 .gri-hero__soft { width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(40px); opacity: .22; }
.gri-v2 .gri-hero__soft--1 { top: -30%; left: -10%; background: var(--magenta-500); opacity: .1; }
.gri-v2 .gri-hero__soft--2 { bottom: -40%; left: 35%; background: var(--yellow-400); opacity: .22; }
.gri-v2 .gri-hero__soft--3 { top: -20%; right: -12%; background: var(--violet-700); opacity: .1; }
.gri-v2 .gri-hero__slide.is-active .gri-hero__soft { animation: gri-hero-drift 14s ease-in-out infinite alternate; }

@media (max-width: 991.98px) {
  .gri-v2 .gri-hero__neon { top: auto; bottom: 240px; left: auto; right: 6%; font-size: 26px; }
  .gri-v2 .gri-hero__rainbow { width: 100%; right: -10%; }
  .gri-v2 .gri-hero__candy:nth-of-type(1),
  .gri-v2 .gri-hero__candy:nth-of-type(2) { display: none; }
  .gri-v2 .gri-hero__stage--spotlight .gri-hero__item:first-child { --s: 1.6; }
  .gri-v2 .gri-hero__stage--row .gri-hero__item { --w: clamp(70px, 20vw, 110px); }
  .gri-v2 .gri-hero__leaf--3 { display: none; }
}

/* ---------- Reviews (Trustindex widget, tmpl/home.php « reviews », initHomeReviews) ---------- */
/* The widget keeps its carousel; its cards, fonts and arrows follow the design system. */
.gri-v2 .gri-reviews { min-height: 260px; }
.gri-v2 .gri-reviews .ti-widget:not(#gri-none),
.gri-v2 .gri-reviews .ti-widget * { font-family: var(--font-body) !important; }
.gri-v2 .gri-reviews .ti-widget .ti-review-item > .ti-inner:not(#gri-none) {
  padding: var(--space-5) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.gri-v2 .gri-reviews .ti-widget .ti-ai-summary-item > .ti-inner:not(#gri-none) { border-color: transparent !important; background: var(--violet-050) !important; }
.gri-v2 .gri-reviews .ti-widget .ti-name:not(#gri-none) { font: 800 16px/1.25 var(--font-display) !important; color: var(--violet-900) !important; }
.gri-v2 .gri-reviews .ti-widget .ti-date:not(#gri-none) { font-size: 13px !important; color: var(--ink-muted) !important; }
.gri-v2 .gri-reviews .ti-widget .ti-review-content:not(#gri-none) { font-size: 15px !important; line-height: 22px !important; color: var(--ink) !important; }
.gri-v2 .gri-reviews .ti-widget .ti-read-more:not(#gri-none),
.gri-v2 .gri-reviews .ti-widget .ti-read-more span:not(#gri-none) { font-size: 14px !important; font-weight: 700 !important; color: var(--violet-700) !important; text-decoration: underline; text-underline-offset: 3px; }
.gri-v2 .gri-reviews .ti-widget .ti-controls .ti-next:not(#gri-none),
.gri-v2 .gri-reviews .ti-widget .ti-controls .ti-prev:not(#gri-none) {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  background-color: var(--surface) !important;
  box-shadow: var(--shadow-raised) !important;
  opacity: 1 !important;
}
.gri-v2 .gri-reviews .ti-widget .ti-controls .ti-next:not(#gri-none):hover,
.gri-v2 .gri-reviews .ti-widget .ti-controls .ti-prev:not(#gri-none):hover { box-shadow: var(--shadow-pop) !important; }
.gri-v2 .gri-reviews .ti-widget .ti-read-more:not(#gri-none),
.gri-v2 .gri-reviews .ti-widget .ti-read-more:not(#gri-none) * { opacity: 1 !important; color: var(--violet-700) !important; }

/* « Nos meilleures ventes »: every card is a best-seller there, the badge would only repeat the title */
.gri-v2 .gri-mod-best .gri-badge--best { display: none; }