/* ==========================================================================
   Carrousel 3D "Best sellers" (accueil)
   Même principe que le carrousel des "pièces phares" : une pièce au centre,
   les autres de chaque côté (plus petites, floutées, inclinées en 3D),
   et la couleur de fond qui change avec le produit.
   ========================================================================== */

.bs3d {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: clamp(540px, 82vh, 720px);
  margin: 8px 0 12px;
  overflow: hidden;
  isolation: isolate;
  direction: ltr; /* la mise en scène 3D reste identique en arabe (RTL) */
  background-color: #EDE5F5;
  transition: background-color 650ms cubic-bezier(.4, 0, .2, 1);
}
.bs3d [hidden] { display: none !important; }

/* Titre géant en fond — même police / dégradé animé que le titre du hero */
.bs3d-ghost {
  position: absolute;
  inset-inline: 0;
  top: 3%;
  z-index: 1;
  margin: 0;
  padding: 0 .1em .14em;          /* évite les jambages rognés par le background-clip */
  text-align: center;
  white-space: nowrap;
  line-height: 1.05;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  font-size: clamp(56px, 13vw, 210px);
  background: linear-gradient(110deg, var(--primary-deep), var(--primary), var(--gold), var(--primary-deep));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(111, 79, 140, .22));
  animation: bs3d-grad-flow 8s linear infinite;
  pointer-events: none;
  user-select: none;
}
@keyframes bs3d-grad-flow { to { background-position: 250% 0; } }
@media (prefers-reduced-motion: reduce) {
  .bs3d-ghost { animation: none; }
}

/* ---------- Scène 3D ---------- */
.bs3d-stage {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  touch-action: pan-y;
  cursor: grab;
}
.bs3d-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.bs3d-item {
  position: absolute;
  left: 50%;
  bottom: var(--b, 0%);
  height: var(--h, 60%);
  aspect-ratio: 4 / 5;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateZ(var(--z, 0px)) rotateY(var(--ry, 0deg));
  opacity: var(--o, 1);
  filter: blur(var(--bl, 0px));
  will-change: transform, filter, opacity, left, height, bottom;
  transition:
    transform 650ms cubic-bezier(.4, 0, .2, 1),
    filter 650ms cubic-bezier(.4, 0, .2, 1),
    opacity 650ms cubic-bezier(.4, 0, .2, 1),
    left 650ms cubic-bezier(.4, 0, .2, 1),
    height 650ms cubic-bezier(.4, 0, .2, 1),
    bottom 650ms cubic-bezier(.4, 0, .2, 1),
    z-index 0s 325ms;
}
.bs3d-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 22px 28px rgba(60, 40, 90, .22));
}
/* Ombre au sol */
.bs3d-item::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -2%;
  height: 6%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(60, 40, 90, .30), transparent 70%);
  filter: blur(4px);
}

/* Rôles : c = centre, l/r = côtés, fl/fr = plus loin, hide = caché derrière */
.bs3d-item[data-role="c"]    { left: 50%; --h: 80%; --b: 2%;  --z: 0px;    --ry: 0deg;   --o: 1;   --bl: 0px;   z-index: 30; }
.bs3d-item[data-role="l"]    { left: 28%; --h: 56%; --b: 10%; --z: -140px; --ry: 30deg;  --o: .92; --bl: 1.5px; z-index: 20; }
.bs3d-item[data-role="r"]    { left: 72%; --h: 56%; --b: 10%; --z: -140px; --ry: -30deg; --o: .92; --bl: 1.5px; z-index: 20; }
.bs3d-item[data-role="fl"]   { left: 9%;  --h: 40%; --b: 14%; --z: -300px; --ry: 38deg;  --o: .55; --bl: 3px;   z-index: 10; }
.bs3d-item[data-role="fr"]   { left: 91%; --h: 40%; --b: 14%; --z: -300px; --ry: -38deg; --o: .55; --bl: 3px;   z-index: 10; }
.bs3d-item[data-role="hide"] { left: 50%; --h: 30%; --b: 14%; --z: -420px; --ry: 0deg;   --o: 0;   --bl: 6px;   z-index: 1; pointer-events: none; }
.bs3d-item[data-role="l"],
.bs3d-item[data-role="r"] { cursor: pointer; }

/* ---------- Barre du bas : flèches | infos | lien ---------- */
.bs3d-bar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 6px clamp(18px, 6vw, 96px) 30px;
}
.bs3d-nav { display: flex; gap: 12px; }
.bs3d-arrow {
  width: 54px;
  height: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease;
}
.bs3d-arrow:hover { transform: scale(1.08); background-color: rgba(46, 42, 42, .08); }
.bs3d-arrow:focus-visible, .bs3d-discover:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bs3d-arrow svg { width: 22px; height: 22px; }

.bs3d-info { text-align: center; min-width: 0; }
.bs3d-cat {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .7;
  min-height: 1em;
}
.bs3d-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.7rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs3d-price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  font-family: var(--font-body);
  font-size: 1rem;
}
.bs3d-old { text-decoration: line-through; color: var(--ink); opacity: .5; }
.bs3d-new { font-weight: 600; color: var(--primary-deep); font-size: 1.1rem; }
.bs3d-badge {
  padding: 2px 10px;
  border-radius: 50px;
  background: var(--primary-deep);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
}
.bs3d-out {
  padding: 2px 10px;
  border-radius: 50px;
  background: #B02323;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
}

.bs3d-discover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1.8vw, 22px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 200ms ease;
}
.bs3d-discover:hover { gap: 14px; }
.bs3d-discover svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .bs3d { height: 600px; }
  .bs3d-ghost { font-size: clamp(48px, 17vw, 96px); top: 2.5%; }
  .bs3d-stage { perspective: 900px; }
  .bs3d-item[data-role="c"]  { --h: 88%; --b: 2%; }
  .bs3d-item[data-role="l"]  { left: 14%; --h: 52%; --b: 14%; --z: -110px; --ry: 32deg; }
  .bs3d-item[data-role="r"]  { left: 86%; --h: 52%; --b: 14%; --z: -110px; --ry: -32deg; }
  .bs3d-item[data-role="fl"] { left: 0%;  --o: 0; }
  .bs3d-item[data-role="fr"] { left: 100%; --o: 0; }

  .bs3d-bar {
    grid-template-columns: auto auto;
    grid-template-areas: "info info" "nav discover";
    justify-content: space-between;
    gap: 12px 16px;
    padding: 4px 18px 22px;
  }
  .bs3d-info { grid-area: info; }
  .bs3d-nav { grid-area: nav; }
  .bs3d-discover { grid-area: discover; }
  .bs3d-arrow { width: 46px; height: 46px; }
  .bs3d-arrow svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bs3d, .bs3d-item, .bs3d-arrow, .bs3d-discover { transition: none !important; }
}