/*
 * V41 — Présentation produit sans décor.
 * Le ciel conserve sa scène photo, mais recadrée en paysage.
 * Les tresses et tapis sont rendus seuls sur un canvas transparent.
 */

#configurateur-tresse-root .view-braid,
#configurateur-tresse-root .view-canopy,
#configurateur-tresse-root .view-rug {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#configurateur-tresse-root .view-braid::before,
#configurateur-tresse-root .view-braid::after {
  display: none !important;
}

#configurateur-tresse-root .view-braid .canvasWrap,
#configurateur-tresse-root .view-canopy .canvasWrap,
#configurateur-tresse-root .view-rug .canvasWrap {
  inset: auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas,
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] #canvas-rug,
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] .rugCanvas {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 18px 20px rgba(54, 38, 26, 0.12))
    drop-shadow(0 4px 6px rgba(54, 38, 26, 0.08)) !important;
}

body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="canopy"] #canvas-canopy,
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="canopy"] .canopyCanvas {
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: clamp(20px, 2vw, 30px) !important;
  background: transparent !important;
  box-shadow: 0 18px 54px rgba(55, 39, 28, 0.12) !important;
}

/*
 * Les cartes internes restent volontairement sans frame : le panneau et les
 * onglets structurent deja l'interface, un second fond brouillait la lecture.
 */
#configurateur-tresse-root .optSection {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#configurateur-tresse-root .optSection::before {
  display: none !important;
}

/*
 * Voile textile de transition : il couvre l'ancien ciel, reste en place
 * pendant le chargement, puis glisse pour reveler le nouveau rendu.
 */
#configurateur-tresse-root .canopy-fabric-transition {
  --canopy-transition-texture: none;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(68vw, 1180px);
  max-width: calc(100vw - 548px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  border-radius: clamp(20px, 2vw, 30px);
  transform: translate(-155%, -50%) skewX(-7deg);
  transform-origin: center;
  background-image:
    linear-gradient(105deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.08) 24%, rgba(104,72,50,.10) 51%, rgba(255,255,255,.35) 76%, rgba(255,255,255,.62) 100%),
    var(--canopy-transition-texture);
  background-color: #f5ede3;
  background-size: 100% 100%, 180px 180px;
  box-shadow:
    inset 0 0 55px rgba(255,255,255,.38),
    0 24px 55px rgba(67,48,34,.18);
  will-change: transform, opacity;
}

#configurateur-tresse-root .canopy-fabric-transition::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    repeating-linear-gradient(
      96deg,
      rgba(255,255,255,.28) 0 8%,
      rgba(83,57,40,.055) 13%,
      rgba(255,255,255,.08) 20%
    );
  filter: blur(8px);
  mix-blend-mode: soft-light;
}

#configurateur-tresse-root.is-canopy-transitioning .canopy-fabric-transition {
  opacity: 1;
  animation: canopy-fabric-cover 430ms cubic-bezier(.22,.76,.24,1) forwards;
}

#configurateur-tresse-root.is-canopy-transitioning.is-canopy-revealing .canopy-fabric-transition {
  animation: canopy-fabric-reveal 460ms cubic-bezier(.62,.02,.26,1) forwards;
}

@keyframes canopy-fabric-cover {
  from {
    opacity: .2;
    transform: translate(-155%, -50%) skewX(-7deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) skewX(0);
  }
}

@keyframes canopy-fabric-reveal {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) skewX(0);
  }
  to {
    opacity: .12;
    transform: translate(62%, -50%) skewX(7deg);
  }
}

#configurateur-tresse-root #rugSizeSection,
#configurateur-tresse-root #rugSizeChips {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

#configurateur-tresse-root #rugSizeChips.rug-size-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#configurateur-tresse-root #rugSizeChips .rug-size-chip {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 8px 7px !important;
  white-space: normal !important;
}

body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 3%,
    rgba(0, 0, 0, 0.12) 6%,
    rgba(0, 0, 0, 0.28) 10%,
    rgba(0, 0, 0, 0.52) 14%,
    rgba(0, 0, 0, 0.78) 17%,
    #000 21%,
    #000 79%,
    rgba(0, 0, 0, 0.78) 83%,
    rgba(0, 0, 0, 0.52) 86%,
    rgba(0, 0, 0, 0.28) 90%,
    rgba(0, 0, 0, 0.12) 94%,
    rgba(0, 0, 0, 0.04) 97%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 3%,
    rgba(0, 0, 0, 0.12) 6%,
    rgba(0, 0, 0, 0.28) 10%,
    rgba(0, 0, 0, 0.52) 14%,
    rgba(0, 0, 0, 0.78) 17%,
    #000 21%,
    #000 79%,
    rgba(0, 0, 0, 0.78) 83%,
    rgba(0, 0, 0, 0.52) 86%,
    rgba(0, 0, 0, 0.28) 90%,
    rgba(0, 0, 0, 0.12) 94%,
    rgba(0, 0, 0, 0.04) 97%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (min-width: 981px) {
  #configurateur-tresse-root.is-rug-active #mainPanel:not(.is-closed) {
    inset: 82px 18px 84px auto !important;
    width: clamp(430px, 35vw, 540px) !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] .canvasWrap,
  #configurateur-tresse-root[data-active-product="canopy"] .view-canopy .canvasWrap,
  #configurateur-tresse-root[data-active-product="rug"] .view-rug .canvasWrap {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 92px 48px 72px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas {
    width: min(64vw, 1080px) !important;
    max-width: calc(100vw - 548px) !important;
    height: auto !important;
    max-height: 72vh !important;
    aspect-ratio: 2.7 / 1 !important;
    object-fit: contain !important;
  }

  #configurateur-tresse-root[data-active-product="canopy"] #canvas-canopy,
  #configurateur-tresse-root[data-active-product="canopy"] .canopyCanvas {
    width: min(68vw, 1180px) !important;
    max-width: calc(100vw - 548px) !important;
    height: auto !important;
    max-height: 74vh !important;
  }

  #configurateur-tresse-root[data-active-product="rug"] #canvas-rug,
  #configurateur-tresse-root[data-active-product="rug"] .rugCanvas {
    width: min(66vw, 1120px) !important;
    max-width: calc(100vw - 548px) !important;
    height: auto !important;
    max-height: 72vh !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
  }
}

@media (max-width: 980px) {
  #configurateur-tresse-root .view-braid,
  #configurateur-tresse-root .view-canopy,
  #configurateur-tresse-root .view-rug {
    overflow: hidden !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] .canvasWrap,
  #configurateur-tresse-root[data-active-product="canopy"] .view-canopy .canvasWrap,
  #configurateur-tresse-root[data-active-product="rug"] .view-rug .canvasWrap {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 68px 10px 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas {
    width: min(96vw, 760px) !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 100% !important;
    aspect-ratio: 2.7 / 1 !important;
    object-fit: contain !important;
  }

  #configurateur-tresse-root[data-active-product="canopy"] #canvas-canopy,
  #configurateur-tresse-root[data-active-product="canopy"] .canopyCanvas {
    width: min(96vw, 760px) !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 100% !important;
    border-radius: 18px !important;
  }

  #configurateur-tresse-root[data-active-product="rug"] #canvas-rug,
  #configurateur-tresse-root[data-active-product="rug"] .rugCanvas {
    width: min(96vw, 760px) !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
  }

  #configurateur-tresse-root .canopy-fabric-transition {
    width: min(96vw, 760px);
    max-width: 96vw;
    border-radius: 18px;
  }

  #configurateur-tresse-root #rugSizeChips.rug-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #configurateur-tresse-root #canvas-braid,
  #configurateur-tresse-root #canvas-rug,
  #configurateur-tresse-root #canvas-canopy {
    transition: none !important;
  }

  #configurateur-tresse-root .canopy-fabric-transition {
    animation-duration: 1ms !important;
  }
}

body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] #canvas-rug[data-rug-model="knot"],
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] .rugCanvas[data-rug-model="knot"] {
  filter: drop-shadow(0 10px 16px rgba(54, 38, 26, 0.055)) !important;
}

/*
 * Les tapis Tresse et Noeud conservent leur axe vertical natif.
 * Le demi-lune conserve egalement son orientation native.
 */
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] #canvas-rug[data-rug-model="braided"],
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] .rugCanvas[data-rug-model="braided"],
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] #canvas-rug[data-rug-model="knot"],
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] .rugCanvas[data-rug-model="knot"] {
  transform: scale(0.88) !important;
  transform-origin: 50% 50% !important;
  transition: transform 380ms cubic-bezier(.22, .72, .24, 1) !important;
  will-change: transform;
}

body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] #canvas-rug[data-rug-model="halfmoon"],
body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] .rugCanvas[data-rug-model="halfmoon"] {
  transform: none !important;
}

@media (max-width: 980px) {
  body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] #canvas-rug[data-rug-model="braided"],
  body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] .rugCanvas[data-rug-model="braided"],
  body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] #canvas-rug[data-rug-model="knot"],
  body.sissou-configurator-standalone #configurateur-tresse-root[data-active-product="rug"] .rugCanvas[data-rug-model="knot"] {
    transform: scale(0.82) !important;
  }
}