/* =====================================================
   INTERACTIVE SHOWCASE : SHELL (structure + colonne texte)
===================================================== */

.interactive-showcase{
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;

  margin-top: 0;
  overflow: visible;

  background: linear-gradient(180deg, #1F0C00 0%, #2B1A0E 60%, #3A2515 100%);
  position: relative;
}

.interactive-showcase.reverse{
  flex-direction: row-reverse;
}



/* Colonne droite (miniatures + contenu) */
.showcase-text{
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px;
  overflow: visible;
  box-sizing: border-box;

  background:
    radial-gradient(1200px 520px at 50% -12%, rgba(255,255,255,0.22), transparent 62%),
    radial-gradient(900px 420px at 50% 112%, rgba(230,214,158,0.25), transparent 70%),
    radial-gradient(circle at 18% 32%, rgba(255,218,226,0.16), transparent 60%),
    radial-gradient(circle at 82% 72%, rgba(220,200,185,0.20), transparent 68%),
    linear-gradient(180deg, #3b2415 0%, #361c0d 55%, #3b2415 100%);
}

.showcase-text::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(230,200,150,0.05), rgba(255,230,200,0.05) 30%, transparent 60%, rgba(200,160,120,0.05)),
    radial-gradient(ellipse at 60% 50%, rgba(240,200,190,0.08), transparent 70%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

.showcase-text > *{
  z-index: 1;
  position: relative;
}

/* Wrapper pour centrer le brown-panel */
.showcase-content{
  width: 100%;
  max-width: 580px;
  text-align: center;
  position: relative;
}