/* ======================================================
   RANGES — SHOWCASE (tabbed, themed)
   Scoped to .ranges-showcase so themes don't flip the whole site
   ====================================================== */
.ranges-showcase {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  transition: background 900ms ease, color 700ms ease;
}
.ranges-showcase * { box-sizing: border-box; }

/* ========== THEMES (scoped to wrapper) ========== */
.ranges-showcase[data-range="renaissance"] {
  background: #ede0c5;
  color: #2d1f0f;
  --rs-accent: #a17f3e;
  --rs-muted: #8a7048;
  --rs-tab-border: rgba(45, 31, 15, 0.14);
  --rs-tag-border: rgba(161, 127, 62, 0.4);
  --rs-glow-color: rgba(140, 100, 45, 0.35);
  --rs-img-shadow: drop-shadow(0 12px 16px rgba(50, 35, 15, 0.22));
  --rs-grain-opacity: 0.08;
  --rs-grain-blend: multiply;
}
.ranges-showcase[data-range="epigenelux"] {
  background: #3a2b0f;
  color: #f5ede0;
  --rs-accent: #e8c872;
  --rs-muted: #b8a078;
  --rs-tab-border: rgba(255, 245, 215, 0.12);
  --rs-tag-border: rgba(232, 200, 114, 0.45);
  --rs-glow-color: rgba(255, 240, 200, 0.55);
  --rs-img-shadow: drop-shadow(0 15px 22px rgba(0, 0, 0, 0.55));
  --rs-grain-opacity: 0.06;
  --rs-grain-blend: overlay;
}
.ranges-showcase[data-range="luminescence"] {
  background: #080705;
  color: #f5ede0;
  --rs-accent: #e8c872;
  --rs-muted: #9b8868;
  --rs-tab-border: rgba(255, 255, 255, 0.08);
  --rs-tag-border: rgba(232, 200, 114, 0.4);
  --rs-glow-color: rgba(232, 200, 114, 0.5);
  --rs-img-shadow: drop-shadow(0 15px 22px rgba(0, 0, 0, 0.65));
  --rs-grain-opacity: 0.05;
  --rs-grain-blend: overlay;
}

/* ========== AMBIENT BG LAYERS ========== */
.rs-bg-gradient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transition: background 900ms ease;
}
.ranges-showcase[data-range="renaissance"] .rs-bg-gradient {
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(212, 172, 92, 0.28), transparent 60%),
    radial-gradient(ellipse 80% 60% at 15% 85%, rgba(244, 230, 198, 0.55), transparent 65%);
}
.ranges-showcase[data-range="epigenelux"] .rs-bg-gradient {
  background:
    radial-gradient(ellipse 50% 38% at 22% 20%, rgba(255, 248, 228, 0.20), transparent 62%),
    radial-gradient(ellipse 42% 35% at 82% 78%, rgba(255, 242, 215, 0.12), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(85, 62, 22, 0.45), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(22, 15, 5, 0.5), transparent 65%);
}
.ranges-showcase[data-range="luminescence"] .rs-bg-gradient {
  background:
    radial-gradient(ellipse 65% 45% at 75% 20%, rgba(232, 200, 114, 0.22), transparent 60%),
    radial-gradient(ellipse 80% 55% at 20% 85%, rgba(60, 40, 15, 0.5), transparent 65%);
}

.rs-bg-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--rs-grain-opacity);
  mix-blend-mode: var(--rs-grain-blend);
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ========== PER-RANGE DECORATIVE LAYERS ========== */
.rs-deco {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 900ms ease;
}
.ranges-showcase[data-range="renaissance"]  .rs-deco-renaissance  { opacity: 1; }
.ranges-showcase[data-range="epigenelux"]   .rs-deco-epigenelux   { opacity: 1; }
.ranges-showcase[data-range="luminescence"] .rs-deco-luminescence { opacity: 1; }

/* Ginseng plant */
.rs-ginseng {
  position: absolute;
  right: -60px;
  top: auto;
  bottom: 5%;
  transform: rotate(6deg);
  width: 380px; height: 720px;
  opacity: 0.42;
}

/* Deco label (vertical) */
.rs-ginseng-label {
  position: absolute;
  right: 3rem; bottom: 6rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--rs-muted);
  opacity: 0.6;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Foxing spots (aged paper marks) */
.rs-foxing { position: absolute; inset: 0; }
.rs-foxing-spot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #8a6235 25%, transparent 72%);
  filter: blur(1.5px);
  pointer-events: none;
}

/* Caviar SVG layer */
.rs-caviar { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Gold flakes */
.rs-flakes { position: absolute; inset: 0; }
.rs-flake {
  position: absolute;
  animation: rs-flake-drift linear infinite;
}
@keyframes rs-flake-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(3px, -6px) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* ========== LAYOUT ========== */
.rs-inner {
  position: relative; z-index: 5;
  padding: 14rem 3rem 1.75rem;
  display: flex; flex-direction: column;
}

/* ========== HEADER / TABS ========== */
.rs-header {
  position: relative;
  text-align: center;
  margin-bottom: 0;
}
.rs-signature {
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 0.58rem;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--rs-accent);
  text-align: center;
  margin-bottom: 0.5rem;
  opacity: 0.75;
}
.rs-eyebrow-top {
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--rs-muted);
  margin-bottom: 1.5rem;
}
.rs-tabs {
  display: flex; justify-content: center;
  gap: clamp(2rem, 5cqw, 3.5rem);
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rs-tab-border);
  transition: border-color 700ms ease;
}
.rs-tab {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rs-muted);
  cursor: pointer;
  padding-bottom: 10px;
  position: relative;
  transition: color 500ms ease, letter-spacing 500ms ease;
  background: none; border: none; font-weight: 400;
}
.rs-tab .rs-numeral {
  font-style: italic; text-transform: none; letter-spacing: 0.05em;
  margin-right: 8px; color: var(--rs-muted);
  transition: color 500ms ease;
}
.rs-tab:hover, .rs-tab.active { color: currentColor; }
.rs-tab:hover .rs-numeral, .rs-tab.active .rs-numeral { color: var(--rs-accent); }
.rs-tab.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--rs-accent);
}

/* ========== MAIN / PANEL ========== */
.rs-main {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0 1rem 1rem;
}
.rs-panel {
  width: 100%; max-width: 1600px;
  display: none; flex-direction: column; align-items: center;
  animation: rs-panelIn 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-panel.active { display: flex; }
.rs-panel[hidden] { display: none; }
@keyframes rs-panelIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rs-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 0.95rem; letter-spacing: 0.18em;
  color: var(--rs-muted);
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.rs-title {
  font-family: 'Italiana', 'Cormorant', serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 7cqw, 6rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0 0 0.75rem;
  text-align: center;
  transition: color 700ms ease;
}
.rs-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.2cqw, 1.2rem);
  color: var(--rs-accent);
  letter-spacing: 0.01em;
  margin: 0 0 2rem;
  text-align: center;
}

/* ========== PRODUCTS — SIZED PROPERLY ========== */
.rs-products {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(0.25rem, 0.6cqw, 0.75rem);
  width: 100%;
  margin-bottom: 1.25rem;
}
.rs-product {
  flex: 1; max-width: 280px;
  display: flex; flex-direction: column; align-items: center;
  cursor: default;
  transition: none;
}
.rs-product:hover { transform: none; }
.rs-product:hover .rs-glow { opacity: 0.72; transform: translateX(-50%); }
.rs-product:hover .rs-p-sub { color: var(--rs-accent); }

.rs-media {
  position: relative;
  height: 460px;
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 1.2rem;
}
.rs-glow {
  position: absolute; bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 42px;
  background: radial-gradient(ellipse at center, var(--rs-glow-color), transparent 70%);
  filter: blur(6px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.rs-media img {
  max-height: 460px;
  max-width: 340px;
  width: auto;
  object-fit: contain;
  filter: var(--rs-img-shadow);
  position: relative; z-index: 1;
  pointer-events: none;
  transition: filter 700ms ease;
}
.rs-p-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rs-muted);
  text-align: center; font-weight: 400;
  margin-bottom: 8px; line-height: 1.5;
  transition: color 500ms ease;
}
.rs-p-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  opacity: 0.85;
  text-align: center; font-weight: 300;
  transition: color 500ms ease;
}

/* Renaissance : chaque PNG a son produit positionné différemment — on cale chacun sur le glow */
.ranges-showcase[data-range="renaissance"] .rs-products { gap: 0.25rem; }
.ranges-showcase[data-range="renaissance"] .rs-product { max-width: 280px; }
.ranges-showcase[data-range="renaissance"] .rs-media {
  position: relative;
  height: 500px;
  width: 100%;
  overflow: visible;
}
.ranges-showcase[data-range="renaissance"] .rs-media img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 135%;
  max-width: none;
  max-height: none;
  object-fit: initial;
  transform: translate(-50%, 0);
}
/* Tuning per product : translateY positif = pousse le produit vers le bas */
.ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo.png"]      { transform: translate(-50%, 170px); }
.ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo-men.png"]  { transform: translate(-50%, 160px); }
.ranges-showcase[data-range="renaissance"] .rs-media img[src*="mask.png"]         { transform: translate(-50%, 240px); }
.ranges-showcase[data-range="renaissance"] .rs-media img[src*="serum.png"]        { transform: translate(-50%, 210px); }
.ranges-showcase[data-range="renaissance"] .rs-media img[src*="capsules.png"]     { transform: translate(-50%, 240px); }

.ranges-showcase[data-range="renaissance"] .rs-glow { width: 240px; height: 40px; }

/* Epigenelux : même taille produit que Renaissance */
.ranges-showcase[data-range="epigenelux"] .rs-products { gap: 0.25rem; }
.ranges-showcase[data-range="epigenelux"] .rs-product { max-width: 280px; }
.ranges-showcase[data-range="epigenelux"] .rs-media {
  position: relative;
  height: 500px;
  width: 100%;
  overflow: visible;
}
.ranges-showcase[data-range="epigenelux"] .rs-media img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 135%;
  max-width: none;
  max-height: none;
  object-fit: initial;
  transform: translate(-50%, 0);
}
.ranges-showcase[data-range="epigenelux"] .rs-media img[src*="shampoo.png"]     { transform: translate(-50%, 175px); }
.ranges-showcase[data-range="epigenelux"] .rs-media img[src*="mask.png"]        { transform: translate(-50%, 240px); }
.ranges-showcase[data-range="epigenelux"] .rs-media img[src*="night-serum.png"] { transform: translate(-50%, 225px); }
.ranges-showcase[data-range="epigenelux"] .rs-media img[src*="nutricare.png"]   { transform: translate(-50%, 220px); }
.ranges-showcase[data-range="epigenelux"] .rs-media img[src*="leave-in.png"]    { transform: translate(-50%, 240px); }

.ranges-showcase[data-range="epigenelux"] .rs-glow { width: 240px; height: 40px; }

/* Luminescence : même taille produit que Renaissance / Epigenelux */
.ranges-showcase[data-range="luminescence"] .rs-products { gap: 0.25rem; }
.ranges-showcase[data-range="luminescence"] .rs-product { max-width: 280px; }
.ranges-showcase[data-range="luminescence"] .rs-media {
  position: relative;
  height: 500px;
  width: 100%;
  overflow: visible;
}
.ranges-showcase[data-range="luminescence"] .rs-media img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 135%;
  max-width: none;
  max-height: none;
  object-fit: initial;
  transform: translate(-50%, 0);
}
.ranges-showcase[data-range="luminescence"] .rs-media img[src*="shampoo.png"]  { transform: translate(-50%, 145px); }
.ranges-showcase[data-range="luminescence"] .rs-media img[src*="mask.png"]     { transform: translate(-50%, 227.5px); }
.ranges-showcase[data-range="luminescence"] .rs-media img[src*="capsules.png"] { transform: translate(-50%, 195px); }
.ranges-showcase[data-range="luminescence"] .rs-media img[src*="elixir.png"]   { transform: translate(-50%, 210px); }
.ranges-showcase[data-range="luminescence"] .rs-media img[src*="leave-in.png"] { transform: translate(-50%, 227.5px); }

.ranges-showcase[data-range="luminescence"] .rs-glow { width: 240px; height: 40px; }

/* ========== DESC + TAGS + CTA ========== */
.rs-desc {
  max-width: 620px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.85;
  margin: 0 auto 1.1rem;
  font-weight: 300;
}
.rs-trademark { font-style: italic; color: var(--rs-accent); opacity: 1; }

.rs-tags {
  display: flex; justify-content: center;
  gap: clamp(0.75rem, 1.5cqw, 1.5rem);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.rs-tag {
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rs-muted);
  padding: 8px 18px;
  border: 1px solid var(--rs-tag-border);
  border-radius: 100px;
  transition: color 500ms ease, border-color 500ms ease;
}
.rs-tag:hover { color: currentColor; border-color: var(--rs-accent); }

.rs-cta {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: currentColor;
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rs-tag-border);
  transition: color 500ms ease, border-color 500ms ease, letter-spacing 500ms ease;
  display: inline-flex; align-items: center;
}
.rs-cta:hover {
  color: var(--rs-accent);
  border-color: var(--rs-accent);
  letter-spacing: 0.4em;
}
.rs-arrow { margin-left: 0.8em; transition: transform 500ms ease; }
.rs-cta:hover .rs-arrow { transform: translateX(6px); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  .rs-products { gap: 1.25rem; }
  .rs-media { height: 200px; }
  .rs-media img { max-height: 200px; max-width: 140px; }
  .rs-glow { width: 130px; height: 24px; }
  .rs-ginseng { width: 280px; height: 560px; right: -110px; }
}
@media (max-width: 768px) {
  .rs-inner { padding: 1.5rem 0.9rem 2.5rem; }
  /* Onglets : les 3 noms doivent tenir en entier (chiffres romains masqués) */
  .rs-tabs { gap: 0.8rem; padding-bottom: 0.9rem; flex-wrap: nowrap; }
  .rs-tab { font-size: 0.6rem; letter-spacing: 0.04em; padding-bottom: 8px; white-space: nowrap; }
  .rs-tab .rs-numeral { display: none; }
  .rs-main { padding: 1.5rem 0 1.5rem; }
  .rs-title { font-size: 3rem; }
  .rs-tagline { font-size: 0.95rem; margin-bottom: 2rem; }
  /* Grille 2 colonnes : tous les produits visibles, plus grands (pas de mini-carrousel) */
  .rs-products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1rem;
    margin-bottom: 2.5rem;
    overflow: visible;
    padding: 0;
  }
  .rs-product { min-width: 0; }
  .rs-media { height: 210px; margin-bottom: 0.8rem; }
  .rs-media img { max-height: 210px; max-width: 150px; }
  .rs-glow { width: 130px; height: 24px; }
  .rs-p-name { font-size: 0.72rem; letter-spacing: 0.2em; }
  .rs-p-sub { font-size: 0.9rem; }
  .rs-desc { font-size: 0.95rem; }
  .rs-tags { gap: 0.65rem; }
  .rs-tag { font-size: 0.58rem; padding: 6px 12px; letter-spacing: 0.22em; }
  .rs-ginseng, .rs-ginseng-label { display: none; }
  .rs-foxing, .rs-caviar, .rs-flakes { display: none; }
}
@media (min-width: 1600px) {
  .rs-panel {
    max-width: min(1760px, 86vw);
  }
  .rs-products {
    gap: clamp(0.35rem, 0.8cqw, 1.1rem);
  }
  .rs-media { height: 440px; }
  .rs-media img { max-height: 440px; max-width: 300px; }
  .rs-glow { width: 260px; height: 44px; }
  .rs-ginseng { width: 440px; height: 880px; }
  .ranges-showcase[data-range="renaissance"] .rs-media,
  .ranges-showcase[data-range="epigenelux"] .rs-media,
  .ranges-showcase[data-range="luminescence"] .rs-media { height: 580px; }
  .ranges-showcase[data-range="epigenelux"] .rs-media img,
  .ranges-showcase[data-range="renaissance"] .rs-media img,
  .ranges-showcase[data-range="luminescence"] .rs-media img {
    height: 145%;
    max-height: none;
    max-width: none;
  }
  .ranges-showcase[data-range="renaissance"] .rs-product,
  .ranges-showcase[data-range="epigenelux"] .rs-product,
  .ranges-showcase[data-range="luminescence"] .rs-product { max-width: 320px; }
  .ranges-showcase[data-range="renaissance"] .rs-glow,
  .ranges-showcase[data-range="epigenelux"] .rs-glow,
  .ranges-showcase[data-range="luminescence"] .rs-glow { width: 280px; height: 46px; }

  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo.png"]      { transform: translate(-50%, 197px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo-men.png"]  { transform: translate(-50%, 186px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="mask.png"]         { transform: translate(-50%, 278px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="serum.png"]        { transform: translate(-50%, 244px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="capsules.png"]     { transform: translate(-50%, 278px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="shampoo.png"]       { transform: translate(-50%, 203px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="mask.png"]          { transform: translate(-50%, 278px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="night-serum.png"]   { transform: translate(-50%, 261px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="nutricare.png"]     { transform: translate(-50%, 255px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="leave-in.png"]      { transform: translate(-50%, 278px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="shampoo.png"]     { transform: translate(-50%, 168px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="mask.png"]        { transform: translate(-50%, 264px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="capsules.png"]    { transform: translate(-50%, 226px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="elixir.png"]      { transform: translate(-50%, 244px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="leave-in.png"]    { transform: translate(-50%, 264px); }
}

@media (min-width: 2200px) {
  .rs-panel {
    max-width: min(1900px, 80vw);
  }
  .ranges-showcase[data-range="renaissance"] .rs-product,
  .ranges-showcase[data-range="epigenelux"] .rs-product,
  .ranges-showcase[data-range="luminescence"] .rs-product { max-width: 350px; }
  .ranges-showcase[data-range="renaissance"] .rs-media,
  .ranges-showcase[data-range="epigenelux"] .rs-media,
  .ranges-showcase[data-range="luminescence"] .rs-media { height: 640px; }
  .ranges-showcase[data-range="renaissance"] .rs-media img,
  .ranges-showcase[data-range="epigenelux"] .rs-media img,
  .ranges-showcase[data-range="luminescence"] .rs-media img {
    height: 150%;
    max-height: none;
    max-width: none;
  }
  .ranges-showcase[data-range="renaissance"] .rs-glow,
  .ranges-showcase[data-range="epigenelux"] .rs-glow,
  .ranges-showcase[data-range="luminescence"] .rs-glow { width: 310px; height: 50px; }

  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo.png"]      { transform: translate(-50%, 218px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo-men.png"]  { transform: translate(-50%, 205px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="mask.png"]         { transform: translate(-50%, 307px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="serum.png"]        { transform: translate(-50%, 269px); }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="capsules.png"]     { transform: translate(-50%, 307px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="shampoo.png"]       { transform: translate(-50%, 224px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="mask.png"]          { transform: translate(-50%, 307px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="night-serum.png"]   { transform: translate(-50%, 288px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="nutricare.png"]     { transform: translate(-50%, 282px); }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="leave-in.png"]      { transform: translate(-50%, 307px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="shampoo.png"]     { transform: translate(-50%, 186px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="mask.png"]        { transform: translate(-50%, 291px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="capsules.png"]    { transform: translate(-50%, 250px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="elixir.png"]      { transform: translate(-50%, 269px); }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="leave-in.png"]    { transform: translate(-50%, 291px); }
}

/* ======================================================
   MOBILE / TABLETTE — les 3 gammes reviennent à un affichage simple "contain".
   En desktop, chaque produit est rogné (média 500px, image à 135% positionnée
   en pixels fixes). Ces réglages, plus spécifiques que les media-queries de
   base, restaient actifs sur mobile et coupaient les produits (ex. Epigenelux).
   On les neutralise ici pour que le produit s'affiche entier, mis à l'échelle.
   ====================================================== */
@media (max-width: 1100px) {
  .ranges-showcase[data-range="renaissance"] .rs-media,
  .ranges-showcase[data-range="epigenelux"] .rs-media,
  .ranges-showcase[data-range="luminescence"] .rs-media {
    height: 200px;
    overflow: visible;
  }
  .ranges-showcase[data-range="renaissance"] .rs-media img,
  .ranges-showcase[data-range="epigenelux"] .rs-media img,
  .ranges-showcase[data-range="luminescence"] .rs-media img {
    position: static;
    width: auto;
    height: auto;
    max-height: 200px;
    max-width: 140px;
    object-fit: contain;
    transform: none !important;
  }
}
@media (max-width: 768px) {
  /* Cadrage par produit identique au desktop, mis à l'échelle pour un média de
     235px (facteur 0,47 = 235/500). Chaque produit est cadré précisément →
     produit grand ET entièrement visible (pas coupé). */
  .ranges-showcase[data-range="renaissance"] .rs-media,
  .ranges-showcase[data-range="epigenelux"] .rs-media,
  .ranges-showcase[data-range="luminescence"] .rs-media {
    height: 235px;
    overflow: hidden;
    display: block;
    position: relative;
  }
  .ranges-showcase[data-range="renaissance"] .rs-media img,
  .ranges-showcase[data-range="epigenelux"] .rs-media img,
  .ranges-showcase[data-range="luminescence"] .rs-media img {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: auto;
    height: 135%;
    max-height: none;
    max-width: none;
    object-fit: initial;
  }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo.png"]     { transform: translate(-50%, 80px) !important; }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="shampoo-men.png"] { transform: translate(-50%, 75px) !important; }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="mask.png"]        { transform: translate(-50%, 113px) !important; }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="serum.png"]       { transform: translate(-50%, 99px) !important; }
  .ranges-showcase[data-range="renaissance"] .rs-media img[src*="capsules.png"]    { transform: translate(-50%, 113px) !important; }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="shampoo.png"]      { transform: translate(-50%, 82px) !important; }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="mask.png"]         { transform: translate(-50%, 113px) !important; }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="night-serum.png"] { transform: translate(-50%, 106px) !important; }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="nutricare.png"]    { transform: translate(-50%, 103px) !important; }
  .ranges-showcase[data-range="epigenelux"] .rs-media img[src*="leave-in.png"]     { transform: translate(-50%, 113px) !important; }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="shampoo.png"]    { transform: translate(-50%, 68px) !important; }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="mask.png"]       { transform: translate(-50%, 107px) !important; }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="capsules.png"]   { transform: translate(-50%, 92px) !important; }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="elixir.png"]     { transform: translate(-50%, 99px) !important; }
  .ranges-showcase[data-range="luminescence"] .rs-media img[src*="leave-in.png"]   { transform: translate(-50%, 107px) !important; }
}

/* ======================================================
   FONDS APLATS — suppression de tout le décor des 3 gammes :
   dégradés (.rs-bg-gradient), grain (.rs-bg-grain), dessins +
   animations (.rs-deco : ginseng / caviar / paillettes), et lueurs
   sous les produits. Remplacés par des aplats unis :
   Renaissance = blanc, Epigenelux = or, Luminescence = noir.
   ====================================================== */
.ranges-showcase .rs-bg-gradient,
.ranges-showcase .rs-bg-grain,
.ranges-showcase .rs-deco { display: none !important; }

.ranges-showcase[data-range="renaissance"] {
  background: #ffffff;
  color: #2a1d0d;
  --rs-accent: #8a6a33;
  --rs-muted: #6d5a38;
  --rs-tab-border: rgba(40, 28, 12, 0.16);
  --rs-tag-border: rgba(138, 106, 51, 0.4);
  --rs-glow-color: transparent;
}
.ranges-showcase[data-range="epigenelux"] {
  background: #cf9f4a;
  color: #2c1f08;
  --rs-accent: #5a3f12;
  --rs-muted: #5f4a1c;
  --rs-tab-border: rgba(40, 28, 8, 0.30);
  --rs-tag-border: rgba(60, 44, 14, 0.5);
  --rs-glow-color: transparent;
}
.ranges-showcase[data-range="luminescence"] {
  background: #000000;
  color: #f3ead6;
  --rs-accent: #e4c178;
  --rs-muted: #9b8868;
  --rs-tab-border: rgba(255, 255, 255, 0.10);
  --rs-tag-border: rgba(228, 193, 120, 0.4);
  --rs-glow-color: transparent;
}

/* ======================================================
   VIDÉO EN-TÊTE (Renaissance, Epigenelux) — bannière muette en boucle.
   Vidéo entière sous la nav fixe : aucun recadrage, aucun morceau masqué.
   ====================================================== */
.rs-topvideo {
  box-sizing: border-box;
  --rs-video-nav-offset: 87px;
  padding: calc(var(--rs-video-nav-offset) + env(safe-area-inset-top)) 0 0;
  line-height: 0;
}
.rs-topvideo__media {
  display: block;
  width: 100%;
  height: auto; /* vidéo entière (16:9), non rognée */
}
@media (max-width: 768px) {
  .rs-topvideo {
    --rs-video-nav-offset: 71px;
  }
}
/* Quand la vidéo précède la gamme, on réduit le grand padding du haut */
.rs-topvideo + .ranges-showcase .rs-inner {
  padding-top: clamp(2rem, 4cqw, 4.5rem);
}

@media (max-width: 768px) {
  .ranges-showcase .rs-panel {
    padding: 0 !important;
  }

  .rs-topvideo + .ranges-showcase .rs-inner {
    padding-top: clamp(0.45rem, 2.4vw, 0.75rem) !important;
  }

  .rs-topvideo + .ranges-showcase .rs-main {
    padding-top: 0 !important;
  }

  .rs-topvideo + .ranges-showcase .rs-eyebrow {
    margin-top: 0.2rem;
  }
}