/*
 * Sissou Immersive Studio — 2026
 * Full-screen product stage, liquid-glass controls and tap-to-focus mode.
 * Loaded after every historical configurator stylesheet.
 */

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  overflow:hidden;
  background:#d8d2c8 !important;
}

body.sissou-configurator-standalone{
  color:#f8f5f0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior:none;
}

#configurateur-tresse-root{
  --im26-ink:#24211e;
  --im26-paper:#fffdf9;
  --im26-muted:rgba(255,255,255,.64);
  --im26-line:rgba(255,255,255,.15);
  --im26-line-dark:rgba(39,34,30,.12);
  --im26-glass:rgba(31,29,27,.72);
  --im26-glass-strong:rgba(26,24,22,.88);
  --im26-glass-light:rgba(255,255,255,.72);
  --im26-accent:#efb68f;
  --im26-accent-deep:#b96f45;
  --im26-shadow:0 30px 80px rgba(25,20,16,.28);
  --im26-radius:32px;
  position:relative;
  width:100%;
  height:100dvh;
  min-height:620px;
  padding:0 !important;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(900px 600px at 16% 8%, rgba(255,255,255,.30), transparent 72%),
    radial-gradient(820px 700px at 85% 100%, rgba(185,111,69,.20), transparent 74%),
    #d8d2c8 !important;
  isolation:isolate;
  view-transition-name:sissou-immersive-studio;
}

#configurateur-tresse-root *,
#configurateur-tresse-root *::before,
#configurateur-tresse-root *::after{
  box-sizing:border-box;
}

#configurateur-tresse-root button,
#configurateur-tresse-root input,
#configurateur-tresse-root select{
  font:inherit;
}

#configurateur-tresse-root button{
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

#configurateur-tresse-root button:focus-visible,
#configurateur-tresse-root input:focus-visible,
#configurateur-tresse-root [role="button"]:focus-visible{
  outline:3px solid rgba(239,182,143,.88) !important;
  outline-offset:3px !important;
}

#configurateur-tresse-root::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  background:
    conic-gradient(from 180deg at 50% 50%,
      transparent 0deg,
      rgba(255,255,255,.18) 62deg,
      transparent 126deg,
      rgba(190,125,83,.14) 220deg,
      transparent 310deg);
  filter:blur(90px);
  animation:im26Ambient 18s ease-in-out infinite alternate;
}

#configurateur-tresse-root::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

@keyframes im26Ambient{
  from{ transform:translate3d(-2%, -1%, 0) rotate(-3deg) scale(1); }
  to{ transform:translate3d(3%, 2%, 0) rotate(4deg) scale(1.08); }
}

/* Full-screen shell */
#configurateur-tresse-root #mainConfiguratorCard{
  position:relative !important;
  z-index:2;
  width:100% !important;
  max-width:none !important;
  height:100dvh !important;
  min-height:620px !important;
  margin:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .mainStageBd{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}

#configurateur-tresse-root #needHelpTresseMsg,
#configurateur-tresse-root #legacyLayout{
  display:none !important;
}

/* Floating product dock */
#configurateur-tresse-root #mainConfiguratorCard > .mainTabsHd{
  position:absolute !important;
  inset:18px auto auto 50% !important;
  z-index:90 !important;
  display:block !important;
  width:min(720px, calc(100% - 48px)) !important;
  height:62px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:7px !important;
  transform:translateX(-50%) !important;
  overflow:visible !important;
  border:1px solid rgba(255,255,255,.26) !important;
  border-radius:23px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.07)),
    rgba(29,27,25,.58) !important;
  box-shadow:
    0 22px 60px rgba(26,22,18,.22),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  transition:
    opacity .4s cubic-bezier(.2,.8,.2,1),
    transform .5s cubic-bezier(.2,.8,.2,1),
    filter .4s ease,
    visibility 0s linear 0s;
}

#configurateur-tresse-root .mainTabsHd-left,
#configurateur-tresse-root .mainTabs{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}

#configurateur-tresse-root .mainTabs{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:5px !important;
  max-width:none !important;
}

#configurateur-tresse-root .mainTabs .tabBtn{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:0 !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 14px !important;
  overflow:hidden;
  border:1px solid transparent !important;
  border-radius:17px !important;
  background:transparent !important;
  color:rgba(255,255,255,.68) !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:750 !important;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:
    color .24s ease,
    background .28s ease,
    border-color .28s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease !important;
}

#configurateur-tresse-root .mainTabs .tabBtn::before{
  content:"";
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:999px;
  background:currentColor;
  opacity:.42;
  transform:scale(.72);
  transition:transform .28s ease, opacity .28s ease;
}

#configurateur-tresse-root .mainTabs .tabBtn:hover{
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
}

#configurateur-tresse-root .mainTabs .tabBtn.active{
  border-color:rgba(255,255,255,.56) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,240,233,.85)) !important;
  color:var(--im26-ink) !important;
  box-shadow:
    0 8px 22px rgba(22,19,16,.20),
    inset 0 1px 0 #fff !important;
  transform:translateY(-1px);
}

#configurateur-tresse-root .mainTabs .tabBtn.active::before{
  background:var(--im26-accent-deep);
  opacity:1;
  transform:scale(1);
  box-shadow:0 0 0 5px rgba(185,111,69,.12);
}

/* Immersive visual */
#configurateur-tresse-root #mainStage{
  position:absolute !important;
  inset:0 !important;
  z-index:2;
  display:grid !important;
  place-items:center;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    radial-gradient(ellipse at 48% 42%, rgba(255,255,255,.34), transparent 58%),
    linear-gradient(135deg, rgba(251,248,244,.18), rgba(110,98,87,.08)) !important;
  box-shadow:none !important;
  cursor:zoom-in;
  outline-offset:-6px !important;
  transition:background .55s ease, filter .55s ease;
}

#configurateur-tresse-root #mainStage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(25,22,19,.14), transparent 18%, transparent 72%, rgba(25,22,19,.12)),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 20%, transparent 75%, rgba(32,28,24,.12));
}

#configurateur-tresse-root .view-braid,
#configurateur-tresse-root .view-canopy,
#configurateur-tresse-root .view-rug,
#configurateur-tresse-root .view-room{
  position:absolute !important;
  inset:0 !important;
  z-index:1;
  display:grid !important;
  place-items:center;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .view-braid[hidden],
#configurateur-tresse-root .view-canopy[hidden],
#configurateur-tresse-root .view-rug[hidden],
#configurateur-tresse-root .view-room[hidden]{
  display:none !important;
}

#configurateur-tresse-root .view-braid > .hd,
#configurateur-tresse-root .view-canopy > .hd,
#configurateur-tresse-root .view-rug > .hd,
#configurateur-tresse-root .view-room > .hd{
  position:absolute !important;
  inset:98px auto auto 24px !important;
  z-index:12 !important;
  display:flex !important;
  align-items:center;
  width:auto !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 15px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
  background:rgba(28,26,24,.54) !important;
  color:#fff !important;
  box-shadow:
    0 12px 30px rgba(24,20,17,.16),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

#configurateur-tresse-root .view-braid > .hd h2,
#configurateur-tresse-root .view-canopy > .hd h2,
#configurateur-tresse-root .view-rug > .hd h2,
#configurateur-tresse-root .view-room > .hd h2{
  margin:0 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:760 !important;
  letter-spacing:.01em;
}

#configurateur-tresse-root .canvasWrap,
#configurateur-tresse-root .view-canopy .canvasWrap,
#configurateur-tresse-root .view-rug .canvasWrap,
#configurateur-tresse-root .view-room .canvasWrap{
  position:absolute !important;
  inset:0 !important;
  z-index:1;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .canvasWrap::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  display:block !important;
  pointer-events:none;
  background:
    radial-gradient(80% 78% at 48% 44%, transparent 62%, rgba(31,27,24,.11) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%) !important;
}

#configurateur-tresse-root .canvasWrap::after{
  display:none !important;
}

#configurateur-tresse-root .canvasWrap canvas,
#configurateur-tresse-root .braidCanvas,
#configurateur-tresse-root .canopyCanvas,
#configurateur-tresse-root .rugCanvas,
#configurateur-tresse-root .roomCanvas{
  position:relative !important;
  z-index:1;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 24px 45px rgba(26,22,18,.20));
  transition:
    filter .6s ease,
    transform .7s cubic-bezier(.2,.8,.2,1);
}

#configurateur-tresse-root .view-braid .braidCanvas{
  object-fit:cover !important;
}

#configurateur-tresse-root[data-active-product="tresse"] .canvasWrap{
  padding:0 !important;
}

#configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
#configurateur-tresse-root[data-active-product="tresse"] .braidCanvas{
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
}

/* Focus cue */
#configurateur-tresse-root .preview-focus-cue{
  position:absolute;
  inset:auto auto 24px 50%;
  z-index:28;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:8px 14px 8px 9px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(25,23,21,.53);
  color:rgba(255,255,255,.88);
  box-shadow:0 14px 38px rgba(23,19,16,.18);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  pointer-events:none;
  white-space:nowrap;
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

#configurateur-tresse-root .preview-focus-cue-icon{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
}

#configurateur-tresse-root .preview-focus-cue-icon svg{
  width:15px;
  height:15px;
}

#configurateur-tresse-root .preview-focus-cue-text{
  font-size:11px;
  font-weight:720;
  letter-spacing:.005em;
}

#configurateur-tresse-root .preview-focus-cue.is-quiet{
  opacity:0;
  transform:translateX(-50%) translateY(10px);
}

/* Liquid-glass editor */
#configurateur-tresse-root #mainPanel,
#configurateur-tresse-root.is-canopy-active #mainPanel,
#configurateur-tresse-root.is-rug-active #mainPanel,
#configurateur-tresse-root.is-room-active #mainPanel,
#configurateur-tresse-root[data-active-product="tresse"] #mainPanel{
  position:absolute !important;
  inset:96px 18px 92px auto !important;
  z-index:50 !important;
  display:flex !important;
  flex-direction:column !important;
  width:clamp(380px, 32vw, 470px) !important;
  height:auto !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--im26-radius) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
    var(--im26-glass) !important;
  color:#fff !important;
  box-shadow:
    var(--im26-shadow),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter:blur(32px) saturate(145%);
  -webkit-backdrop-filter:blur(32px) saturate(145%);
  transition:
    opacity .38s ease,
    transform .55s cubic-bezier(.2,.8,.2,1),
    width .45s cubic-bezier(.2,.8,.2,1),
    height .45s cubic-bezier(.2,.8,.2,1),
    inset .45s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}

#configurateur-tresse-root .panelHd{
  position:relative !important;
  flex:0 0 62px !important;
  display:flex !important;
  align-items:center !important;
  min-height:62px !important;
  padding:0 14px 0 18px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.11) !important;
  background:transparent !important;
}

#configurateur-tresse-root .panelHd::before{
  content:"" !important;
  display:block !important;
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-right:11px;
  border-radius:999px;
  background:var(--im26-accent);
  box-shadow:
    0 0 0 5px rgba(239,182,143,.10),
    0 0 18px rgba(239,182,143,.38);
}

#configurateur-tresse-root .panelTitle{
  display:block !important;
  flex:1;
  color:#fff !important;
  font-size:15px !important;
  font-weight:760 !important;
  letter-spacing:-.01em;
}

#configurateur-tresse-root .panelToggleBtn{
  display:grid !important;
  place-items:center;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
  box-shadow:none !important;
  transition:background .22s ease, transform .3s ease !important;
}

#configurateur-tresse-root .panelToggleBtn:hover{
  background:rgba(255,255,255,.14) !important;
}

#configurateur-tresse-root .panelToggleIcon{
  display:grid;
  place-items:center;
}

#configurateur-tresse-root .panelToggleIcon svg{
  width:18px;
  height:18px;
}

#configurateur-tresse-root #mainPanel.is-closed,
#configurateur-tresse-root.is-canopy-active #mainPanel.is-closed,
#configurateur-tresse-root.is-rug-active #mainPanel.is-closed,
#configurateur-tresse-root.is-room-active #mainPanel.is-closed,
#configurateur-tresse-root[data-active-product="tresse"] #mainPanel.is-closed{
  inset:auto 18px 92px auto !important;
  width:230px !important;
  height:62px !important;
  min-height:62px !important;
  border-radius:22px !important;
}

#configurateur-tresse-root #mainPanel.is-closed .panelHd{
  border-bottom:0 !important;
}

#configurateur-tresse-root #mainPanel.is-closed .panelToggleIcon{
  transform:rotate(180deg);
}

#configurateur-tresse-root #mainPanel.is-closed .mobile-step-nav,
#configurateur-tresse-root #mainPanel.is-closed .panelBody{
  display:none !important;
}

/* Step dock */
#configurateur-tresse-root .mobile-step-nav{
  position:relative !important;
  flex:0 0 58px !important;
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:5px !important;
  width:auto !important;
  min-height:58px !important;
  margin:0 10px !important;
  padding:7px 0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  background:transparent !important;
  scrollbar-width:none;
}

#configurateur-tresse-root .mobile-step-nav::-webkit-scrollbar{
  display:none;
}

#configurateur-tresse-root .mobile-step-btn{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px !important;
  min-width:0 !important;
  min-height:42px !important;
  padding:0 10px !important;
  border:1px solid transparent !important;
  border-radius:15px !important;
  background:transparent !important;
  color:rgba(255,255,255,.48) !important;
  box-shadow:none !important;
  transition:
    color .24s ease,
    background .24s ease,
    border-color .24s ease,
    transform .28s ease !important;
}

#configurateur-tresse-root .mobile-step-btn span{
  display:grid !important;
  place-items:center;
  width:24px !important;
  min-width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.09) !important;
  color:inherit !important;
  font-size:10px !important;
  font-weight:800 !important;
}

#configurateur-tresse-root .mobile-step-btn strong{
  color:inherit !important;
  font-size:10px !important;
  font-weight:760 !important;
  white-space:nowrap;
}

#configurateur-tresse-root .mobile-step-btn.is-active{
  border-color:rgba(255,255,255,.20) !important;
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#configurateur-tresse-root .mobile-step-btn.is-active span{
  background:var(--im26-paper) !important;
  color:var(--im26-ink) !important;
}

#configurateur-tresse-root .mobile-step-hidden{
  display:none !important;
}

/* Scrollable editor content */
#configurateur-tresse-root .panelBody{
  position:relative !important;
  flex:1 1 auto !important;
  display:block !important;
  min-height:0 !important;
  padding:18px 16px 22px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  color:#fff !important;
  background:transparent !important;
  scrollbar-color:rgba(255,255,255,.22) transparent;
  scrollbar-width:thin;
}

#configurateur-tresse-root.is-canopy-active .panelBody,
#configurateur-tresse-root.is-rug-active .panelBody,
#configurateur-tresse-root.is-room-active .panelBody{
  height:auto !important;
  max-height:none !important;
}

#configurateur-tresse-root .panelBody::-webkit-scrollbar{
  width:5px;
}

#configurateur-tresse-root .panelBody::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(255,255,255,.22);
}

#configurateur-tresse-root .panelBody > .opt:not([hidden]){
  display:block !important;
  width:100% !important;
  min-width:0 !important;
}

#configurateur-tresse-root .optSection,
#configurateur-tresse-root .optSection > .bd,
#configurateur-tresse-root .optSection > .bd > .col,
#configurateur-tresse-root .panelBody .col{
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .optStepHeader,
#configurateur-tresse-root .optSection > .hd,
#configurateur-tresse-root .canopy-type-pill,
#configurateur-tresse-root .calc:empty{
  display:none !important;
}

#configurateur-tresse-root .panelBody .col{
  gap:10px !important;
}

#configurateur-tresse-root .panelBody .col + .col{
  margin-top:18px !important;
}

#configurateur-tresse-root .panelBody label,
#configurateur-tresse-root .panelBody .rug-layer-section-title{
  margin:0 0 8px !important;
  color:rgba(255,255,255,.64) !important;
  font-size:10px !important;
  font-weight:780 !important;
  letter-spacing:.09em !important;
  line-height:1.25 !important;
  text-transform:uppercase;
}

#configurateur-tresse-root .panelBody .muted,
#configurateur-tresse-root .tresse-entry-help,
#configurateur-tresse-root .canopy-cart-note,
#configurateur-tresse-root .rug-layer-help{
  color:rgba(255,255,255,.50) !important;
}

#configurateur-tresse-root .panelBody .chips{
  gap:7px !important;
}

#configurateur-tresse-root #braidTypeChips,
#configurateur-tresse-root .canopy-type-grid,
#configurateur-tresse-root .canopy-model-grid,
#configurateur-tresse-root .canopy-variant-grid,
#configurateur-tresse-root .canopy-option-toggle-grid,
#configurateur-tresse-root .canopy-stitch-toggle-grid,
#configurateur-tresse-root .canopy-pocket-toggle-grid,
#configurateur-tresse-root .rug-type-grid,
#configurateur-tresse-root .room-product-grid,
#configurateur-tresse-root .room-type-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

#configurateur-tresse-root .panelBody .btn,
#configurateur-tresse-root .panelBody .chip{
  min-width:0 !important;
  min-height:44px !important;
  margin:0 !important;
  padding:8px 12px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.055) !important;
  color:rgba(255,255,255,.80) !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:700 !important;
  transition:
    color .22s ease,
    background .24s ease,
    border-color .24s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s ease !important;
}

#configurateur-tresse-root .panelBody .btn:hover,
#configurateur-tresse-root .panelBody .chip:hover{
  border-color:rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.11) !important;
  color:#fff !important;
  transform:translateY(-1px);
}

#configurateur-tresse-root .panelBody .btn.active,
#configurateur-tresse-root .panelBody .chip.active,
#configurateur-tresse-root .panelBody .btn[aria-pressed="true"],
#configurateur-tresse-root .panelBody .chip[aria-pressed="true"]{
  border-color:rgba(255,255,255,.70) !important;
  background:linear-gradient(145deg, #fff, #eee7df) !important;
  color:var(--im26-ink) !important;
  box-shadow:
    0 8px 22px rgba(17,14,12,.22),
    inset 0 1px 0 #fff !important;
}

/* Length input */
#configurateur-tresse-root .tresse-length-block{
  padding:14px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.045) !important;
}

#configurateur-tresse-root .tresse-length-input-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:8px !important;
}

#configurateur-tresse-root #knownTresseSize{
  width:100% !important;
  min-width:0 !important;
  min-height:50px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:17px !important;
  font-weight:750 !important;
}

#configurateur-tresse-root #knownTresseSize::placeholder{
  color:rgba(255,255,255,.42);
}

#configurateur-tresse-root .tresse-help-inline-btn{
  min-height:50px !important;
  white-space:nowrap;
}

#configurateur-tresse-root .tresse-entry-help{
  margin-top:9px !important;
  font-size:10px !important;
  line-height:1.45 !important;
}

#configurateur-tresse-root .tresse-entry-error{
  margin-top:6px !important;
  color:#ffb29d !important;
  font-size:11px !important;
  font-weight:700 !important;
}

#configurateur-tresse-root .calc{
  margin:12px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Braid accordions */
#configurateur-tresse-root #strandRows{
  display:grid !important;
  gap:8px !important;
}

#configurateur-tresse-root .strand-accordion{
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:19px !important;
  background:rgba(255,255,255,.045) !important;
  box-shadow:none !important;
  transition:border-color .25s ease, background .25s ease !important;
}

#configurateur-tresse-root .strand-accordion.is-open{
  border-color:rgba(239,182,143,.46) !important;
  background:rgba(255,255,255,.075) !important;
}

#configurateur-tresse-root .strand-accordion-trigger{
  min-height:58px !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
}

#configurateur-tresse-root .strand-accordion-preview{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07) !important;
}

#configurateur-tresse-root .strand-accordion-title{
  color:#fff !important;
  font-size:11px !important;
  font-weight:780 !important;
}

#configurateur-tresse-root .strand-accordion-summary{
  color:rgba(255,255,255,.48) !important;
  font-size:10px !important;
}

#configurateur-tresse-root .strand-accordion-icon{
  color:rgba(255,255,255,.72) !important;
}

#configurateur-tresse-root .strand-accordion-panel{
  gap:12px !important;
  padding:4px 10px 12px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  background:transparent !important;
}

#configurateur-tresse-root .strand-fabric-tabs{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:6px !important;
}

/* Color and motif grids */
#configurateur-tresse-root .palette,
#configurateur-tresse-root .rug-color-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(37px, 1fr)) !important;
  gap:7px !important;
}

#configurateur-tresse-root .swatch,
#configurateur-tresse-root .rug-color-grid .chip{
  position:relative !important;
  width:auto !important;
  min-width:37px !important;
  height:37px !important;
  min-height:37px !important;
  padding:0 !important;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.20) !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07) !important;
  font-size:0 !important;
}

#configurateur-tresse-root .swatch.active,
#configurateur-tresse-root .rug-color-grid .chip.active,
#configurateur-tresse-root .rug-color-grid .chip[aria-pressed="true"]{
  border-color:#fff !important;
  box-shadow:
    0 0 0 3px rgba(239,182,143,.48),
    0 7px 18px rgba(10,8,7,.22) !important;
  transform:translateY(-1px);
}

#configurateur-tresse-root .motif-grid,
#configurateur-tresse-root .rug-motif-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:7px !important;
}

#configurateur-tresse-root .motif-grid .chip,
#configurateur-tresse-root .rug-motif-grid .chip{
  min-height:42px !important;
  text-align:left !important;
}

/* Canopy material gallery */
#configurateur-tresse-root .canopy-chip-grid,
#configurateur-tresse-root .canopy-pocket-chip-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:8px !important;
}

#configurateur-tresse-root .canopy-fabric-choice{
  display:grid !important;
  grid-template-columns:44px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:9px !important;
  min-height:58px !important;
  padding:6px 9px 6px 6px !important;
  text-align:left !important;
}

/*
 * Les choix de tissu de la pochette partagent les règles compactes génériques
 * de .panelBody .chip. Leur bouton retombait à 44px alors que l'aperçu mesure
 * lui-même 44px, puis overflow:hidden rognait le bas de la vignette.
 */
#configurateur-tresse-root .panelBody .canopy-fabric-choice{
  min-height:60px !important;
  padding:7px 9px 7px 6px !important;
}

#configurateur-tresse-root .canopy-fabric-preview{
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:13px !important;
  background-size:cover !important;
  background-position:center !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05) !important;
}

#configurateur-tresse-root .canopy-fabric-label{
  min-width:0;
  overflow:hidden;
  color:inherit !important;
  font-size:9px !important;
  font-weight:720 !important;
  line-height:1.28 !important;
  text-overflow:ellipsis;
}

/* Rug layers */
#configurateur-tresse-root .rug-options{
  gap:16px !important;
}

#configurateur-tresse-root .rug-layer-stack{
  display:grid !important;
  gap:8px !important;
}

#configurateur-tresse-root .rug-layer-picker{
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:19px !important;
  background:rgba(255,255,255,.045) !important;
  box-shadow:none !important;
  transition:border-color .25s ease, background .25s ease !important;
}

#configurateur-tresse-root .rug-layer-picker.is-open{
  border-color:rgba(239,182,143,.46) !important;
  background:rgba(255,255,255,.075) !important;
}

#configurateur-tresse-root .rug-layer-header{
  display:flex !important;
  width:100% !important;
  min-height:58px !important;
  padding:8px 12px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
}

#configurateur-tresse-root .rug-layer-heading{
  gap:10px !important;
}

#configurateur-tresse-root .rug-layer-index{
  background:rgba(255,255,255,.11) !important;
  color:#fff !important;
}

#configurateur-tresse-root .rug-layer-header strong{
  color:rgba(255,255,255,.64) !important;
  font-size:10px !important;
}

#configurateur-tresse-root .rug-layer-chevron{
  color:rgba(255,255,255,.72) !important;
}

#configurateur-tresse-root .rug-layer-body{
  gap:12px !important;
  padding:12px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  background:transparent !important;
}

#configurateur-tresse-root .rug-layer-body[hidden]{
  display:none !important;
}

#configurateur-tresse-root #mainPanel .rug-fabric-type-grid .rug-fabric-type-chip{
  min-height:38px !important;
  padding:5px 4px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.055) !important;
  color:rgba(255,255,255,.80) !important;
  box-shadow:none !important;
}

#configurateur-tresse-root #mainPanel .rug-fabric-type-grid .rug-fabric-type-chip.active,
#configurateur-tresse-root #mainPanel .rug-fabric-type-grid .rug-fabric-type-chip[aria-pressed="true"]{
  border-color:rgba(255,255,255,.72) !important;
  background:linear-gradient(145deg, #fff, #eee7df) !important;
  color:var(--im26-ink) !important;
  box-shadow:0 8px 20px rgba(17,14,12,.20) !important;
}

/* Floating price and purchase bar */
#configurateur-tresse-root .main-config-actions{
  position:absolute !important;
  inset:auto 18px 18px auto !important;
  z-index:52 !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1.15fr) minmax(100px, .75fr) minmax(160px, 1.35fr) !important;
  align-items:stretch !important;
  gap:7px !important;
  width:clamp(380px, 32vw, 470px) !important;
  min-height:64px !important;
  margin:0 !important;
  padding:7px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:22px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
    var(--im26-glass) !important;
  box-shadow:
    0 22px 58px rgba(24,20,17,.24),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  transition:
    opacity .38s ease,
    transform .55s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0s;
}

#configurateur-tresse-root .mini-braid-option,
#configurateur-tresse-root .main-price-inline,
#configurateur-tresse-root .main-add-btn{
  min-width:0 !important;
  min-height:50px !important;
  margin:0 !important;
  border-radius:15px !important;
}

#configurateur-tresse-root .mini-braid-option{
  grid-column:auto !important;
  display:flex !important;
  align-items:center;
  gap:8px !important;
  padding:7px 10px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}

#configurateur-tresse-root .mini-braid-check{
  width:24px !important;
  min-width:24px !important;
  height:24px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.07) !important;
}

#configurateur-tresse-root .mini-braid-option input:checked + .mini-braid-check{
  border-color:#fff !important;
  background:var(--im26-paper) !important;
}

#configurateur-tresse-root .mini-braid-option input:checked + .mini-braid-check::after{
  border-color:var(--im26-ink) !important;
}

#configurateur-tresse-root .mini-braid-title{
  color:#fff !important;
  font-size:9px !important;
  font-weight:760 !important;
  line-height:1.15 !important;
}

#configurateur-tresse-root .mini-braid-price{
  color:rgba(255,255,255,.52) !important;
  font-size:9px !important;
}

#configurateur-tresse-root .main-price-inline{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:0 11px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}

#configurateur-tresse-root .main-price-inline-label{
  color:rgba(255,255,255,.52) !important;
  font-size:9px !important;
  font-weight:700 !important;
}

#configurateur-tresse-root .main-price-inline strong{
  color:#fff !important;
  font-size:14px !important;
  font-weight:780 !important;
}

#configurateur-tresse-root .main-add-btn{
  padding:0 15px !important;
  border:1px solid rgba(255,255,255,.48) !important;
  background:linear-gradient(145deg, #fff, #eee6dd) !important;
  color:var(--im26-ink) !important;
  box-shadow:0 10px 24px rgba(12,10,8,.22) !important;
  font-size:10px !important;
  font-weight:790 !important;
}

#configurateur-tresse-root .main-add-btn:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(12,10,8,.28) !important;
}

#configurateur-tresse-root .main-add-btn:disabled{
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.07) !important;
  color:rgba(255,255,255,.27) !important;
  box-shadow:none !important;
}

#configurateur-tresse-root:not([data-active-product="tresse"]) .mini-braid-option{
  display:none !important;
}

#configurateur-tresse-root:not([data-active-product="tresse"]) .main-config-actions{
  grid-template-columns:minmax(105px, .72fr) minmax(190px, 1.28fr) !important;
}

/* Focus mode: the product becomes the whole interface */
#configurateur-tresse-root.is-preview-focus #mainStage{
  cursor:zoom-out;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.42), transparent 64%),
    linear-gradient(135deg, rgba(251,248,244,.18), rgba(110,98,87,.08)) !important;
}

#configurateur-tresse-root.is-preview-focus #mainConfiguratorCard > .mainTabsHd,
#configurateur-tresse-root.is-preview-focus #mainPanel,
#configurateur-tresse-root.is-preview-focus .main-config-actions,
#configurateur-tresse-root.is-preview-focus .view-braid > .hd,
#configurateur-tresse-root.is-preview-focus .view-canopy > .hd,
#configurateur-tresse-root.is-preview-focus .view-rug > .hd,
#configurateur-tresse-root.is-preview-focus .view-room > .hd{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#configurateur-tresse-root.is-preview-focus #mainConfiguratorCard > .mainTabsHd{
  transform:translateX(-50%) translateY(-26px) scale(.96) !important;
}

#configurateur-tresse-root.is-preview-focus #mainPanel,
#configurateur-tresse-root.is-preview-focus .main-config-actions{
  transform:translateX(42px) scale(.97) !important;
}

#configurateur-tresse-root.is-preview-focus .view-braid > .hd,
#configurateur-tresse-root.is-preview-focus .view-canopy > .hd,
#configurateur-tresse-root.is-preview-focus .view-rug > .hd,
#configurateur-tresse-root.is-preview-focus .view-room > .hd{
  transform:translateX(-24px) !important;
}

#configurateur-tresse-root.is-preview-focus .canvasWrap canvas{
  transform:scale(1.015);
  filter:drop-shadow(0 30px 56px rgba(26,22,18,.24));
}

/* Browser-native state transition */
::view-transition-old(sissou-immersive-studio),
::view-transition-new(sissou-immersive-studio){
  animation-duration:.46s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

/* Tablet */
@media (max-width:1100px) and (min-width:981px){
  #configurateur-tresse-root #mainPanel,
  #configurateur-tresse-root .main-config-actions{
    width:390px !important;
  }

  #configurateur-tresse-root #mainConfiguratorCard > .mainTabsHd{
    width:min(650px, calc(100% - 430px)) !important;
    left:20px !important;
    transform:none !important;
  }

  #configurateur-tresse-root.is-preview-focus #mainConfiguratorCard > .mainTabsHd{
    transform:translateY(-26px) scale(.96) !important;
  }
}

/* Mobile: full visual with a tactile bottom sheet */
@media (max-width:980px){
  html,
  body{
    overflow:hidden !important;
  }

  #configurateur-tresse-root{
    min-height:540px;
    height:100dvh;
  }

  #configurateur-tresse-root #mainConfiguratorCard{
    min-height:540px !important;
    height:100dvh !important;
  }

  #configurateur-tresse-root #mainConfiguratorCard > .mainTabsHd{
    inset:max(8px, env(safe-area-inset-top)) 8px auto 8px !important;
    width:auto !important;
    height:52px !important;
    padding:5px !important;
    transform:none !important;
    border-radius:18px !important;
  }

  #configurateur-tresse-root .mainTabs{
    gap:3px !important;
  }

  #configurateur-tresse-root .mainTabs .tabBtn{
    min-height:40px !important;
    padding:0 4px !important;
    border-radius:13px !important;
    font-size:9px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  #configurateur-tresse-root .mainTabs .tabBtn::before{
    display:none;
  }

  #configurateur-tresse-root #mainStage{
    align-items:start !important;
  }

  #configurateur-tresse-root .view-braid > .hd,
  #configurateur-tresse-root .view-canopy > .hd,
  #configurateur-tresse-root .view-rug > .hd,
  #configurateur-tresse-root .view-room > .hd{
    inset:68px auto auto 10px !important;
    min-height:36px !important;
    padding:0 12px !important;
  }

  #configurateur-tresse-root .view-braid > .hd h2,
  #configurateur-tresse-root .view-canopy > .hd h2,
  #configurateur-tresse-root .view-rug > .hd h2,
  #configurateur-tresse-root .view-room > .hd h2{
    font-size:10px !important;
  }

  #configurateur-tresse-root .canvasWrap,
  #configurateur-tresse-root .view-canopy .canvasWrap,
  #configurateur-tresse-root .view-rug .canvasWrap,
  #configurateur-tresse-root .view-room .canvasWrap{
    align-items:flex-start !important;
    padding-top:58px !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] .canvasWrap{
    padding:58px 0 0 !important;
  }

  #configurateur-tresse-root .canvasWrap canvas,
  #configurateur-tresse-root .braidCanvas,
  #configurateur-tresse-root .canopyCanvas,
  #configurateur-tresse-root .rugCanvas,
  #configurateur-tresse-root .roomCanvas,
  #configurateur-tresse-root .view-braid .braidCanvas{
    width:100% !important;
    height:48dvh !important;
    max-height:48dvh !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  #configurateur-tresse-root[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root[data-active-product="tresse"] .braidCanvas{
    width:100% !important;
    max-width:100% !important;
    height:48dvh !important;
    max-height:48dvh !important;
    object-fit:contain !important;
  }

  #configurateur-tresse-root .preview-focus-cue{
    inset:calc(50dvh - 52px) auto auto 50%;
    min-height:36px;
    padding:5px 10px 5px 6px;
  }

  #configurateur-tresse-root .preview-focus-cue-icon{
    width:25px;
    height:25px;
  }

  #configurateur-tresse-root .preview-focus-cue-text{
    font-size:9px;
  }

  #configurateur-tresse-root #mainPanel,
  #configurateur-tresse-root.is-canopy-active #mainPanel,
  #configurateur-tresse-root.is-rug-active #mainPanel,
  #configurateur-tresse-root.is-room-active #mainPanel,
  #configurateur-tresse-root[data-active-product="tresse"] #mainPanel{
    inset:50dvh 6px 80px 6px !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:28px 28px 20px 20px !important;
    transform:none !important;
    box-shadow:
      0 -18px 55px rgba(24,20,17,.22),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  #configurateur-tresse-root .panelHd{
    flex-basis:52px !important;
    min-height:52px !important;
    padding:0 10px 0 14px !important;
  }

  #configurateur-tresse-root .panelHd::before{
    width:7px;
    height:7px;
    margin-right:9px;
  }

  #configurateur-tresse-root .panelTitle{
    font-size:12px !important;
  }

  #configurateur-tresse-root .panelToggleBtn{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    border-radius:13px !important;
  }

  #configurateur-tresse-root .mobile-step-nav{
    flex-basis:53px !important;
    min-height:53px !important;
    margin:0 7px !important;
    padding:6px 0 !important;
  }

  #configurateur-tresse-root .mobile-step-btn{
    min-height:40px !important;
    padding:0 7px !important;
    border-radius:14px !important;
  }

  #configurateur-tresse-root .mobile-step-btn span{
    width:23px !important;
    min-width:23px !important;
    height:23px !important;
  }

  #configurateur-tresse-root .mobile-step-btn strong{
    font-size:9px !important;
  }

  #configurateur-tresse-root .panelBody{
    padding:14px 10px 20px !important;
  }

  #configurateur-tresse-root #mainPanel.is-closed,
  #configurateur-tresse-root.is-canopy-active #mainPanel.is-closed,
  #configurateur-tresse-root.is-rug-active #mainPanel.is-closed,
  #configurateur-tresse-root.is-room-active #mainPanel.is-closed,
  #configurateur-tresse-root[data-active-product="tresse"] #mainPanel.is-closed{
    inset:auto 6px 80px 6px !important;
    width:auto !important;
    height:52px !important;
    min-height:52px !important;
    border-radius:20px !important;
  }

  #configurateur-tresse-root .main-config-actions,
  #configurateur-tresse-root[data-active-product="tresse"] .main-config-actions{
    inset:auto 6px max(6px, env(safe-area-inset-bottom)) 6px !important;
    grid-template-columns:minmax(0, 1.12fr) minmax(78px, .72fr) minmax(126px, 1.16fr) !important;
    width:auto !important;
    min-height:68px !important;
    padding:6px !important;
    border-radius:20px !important;
  }

  #configurateur-tresse-root:not([data-active-product="tresse"]) .main-config-actions{
    grid-template-columns:minmax(92px, .72fr) minmax(154px, 1.28fr) !important;
  }

  #configurateur-tresse-root .mini-braid-option,
  #configurateur-tresse-root .main-price-inline,
  #configurateur-tresse-root .main-add-btn{
    min-height:54px !important;
    border-radius:14px !important;
  }

  #configurateur-tresse-root .mini-braid-option{
    padding:5px 7px !important;
  }

  #configurateur-tresse-root .mini-braid-check{
    width:22px !important;
    min-width:22px !important;
    height:22px !important;
  }

  #configurateur-tresse-root .mini-braid-title,
  #configurateur-tresse-root .mini-braid-price,
  #configurateur-tresse-root .main-price-inline-label{
    font-size:8px !important;
  }

  #configurateur-tresse-root .main-price-inline{
    padding:0 8px !important;
  }

  #configurateur-tresse-root .main-price-inline strong{
    font-size:12px !important;
  }

  #configurateur-tresse-root .main-add-btn{
    padding:0 8px !important;
    font-size:9px !important;
  }

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

  #configurateur-tresse-root .canopy-fabric-choice{
    grid-template-columns:40px minmax(0, 1fr) !important;
    min-height:54px !important;
  }

  #configurateur-tresse-root .canopy-fabric-preview{
    width:40px !important;
    height:40px !important;
  }

  #configurateur-tresse-root.is-preview-focus #mainConfiguratorCard > .mainTabsHd{
    transform:translateY(-20px) scale(.96) !important;
  }

  #configurateur-tresse-root.is-preview-focus #mainPanel,
  #configurateur-tresse-root.is-preview-focus .main-config-actions{
    transform:translateY(34px) scale(.98) !important;
  }

  #configurateur-tresse-root.is-preview-focus .canvasWrap{
    padding-top:0 !important;
    align-items:center !important;
  }

  #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .canvasWrap{
    padding:0 !important;
  }

  #configurateur-tresse-root.is-preview-focus .canvasWrap canvas,
  #configurateur-tresse-root.is-preview-focus .braidCanvas,
  #configurateur-tresse-root.is-preview-focus .canopyCanvas,
  #configurateur-tresse-root.is-preview-focus .rugCanvas,
  #configurateur-tresse-root.is-preview-focus .roomCanvas,
  #configurateur-tresse-root.is-preview-focus .view-braid .braidCanvas{
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    object-fit:contain !important;
    transform:scale(1.01);
  }

  #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] #canvas-braid,
  #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .braidCanvas{
    width:150vw !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"]:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open.is-canopy-active:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open.is-rug-active:not(.is-preview-focus) #mainPanel,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open.is-room-active:not(.is-preview-focus) #mainPanel{
    position:fixed !important;
    inset:50dvh 6px 80px 6px !important;
    z-index:999 !important;
    display:flex !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    transform:none !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root .mainStageBd,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open .mainStageBd,
  body.sissou-configurator-standalone #configurateur-tresse-root.mobile-panel-open[data-active-product="tresse"] .mainStageBd{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root #mainStage{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .canvasWrap,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .view-canopy .canvasWrap,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .view-rug .canvasWrap,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .view-room .canvasWrap,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus)[data-active-product="tresse"] .canvasWrap{
    align-items:flex-start !important;
    justify-content:center !important;
    padding:58px 0 0 !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .canvasWrap canvas,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .braidCanvas,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .canopyCanvas,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .rugCanvas,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .roomCanvas,
  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus)[data-active-product="tresse"] #canvas-braid{
    width:100% !important;
    max-width:100% !important;
    height:calc(50dvh - 58px) !important;
    max-height:calc(50dvh - 58px) !important;
    object-fit:contain !important;
    object-position:center top !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root.is-preview-focus .canvasWrap,
  body.sissou-configurator-standalone #configurateur-tresse-root.is-preview-focus[data-active-product="tresse"] .canvasWrap{
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
  }

  body.sissou-configurator-standalone #configurateur-tresse-root:not(.is-preview-focus) .main-config-actions{
    position:fixed !important;
    inset:auto 6px max(6px, env(safe-area-inset-bottom)) 6px !important;
    z-index:1000 !important;
    display:grid !important;
    width:auto !important;
    margin:0 !important;
    transform:none !important;
  }

  #configurateur-tresse-root.is-preview-focus .preview-focus-cue{
    inset:auto auto max(18px, env(safe-area-inset-bottom)) 50%;
  }
}

@media (max-width:420px){
  #configurateur-tresse-root .mainTabs .tabBtn{
    font-size:8px !important;
  }

  #configurateur-tresse-root .preview-focus-cue-text{
    max-width:210px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #configurateur-tresse-root .panelBody .btn,
  #configurateur-tresse-root .panelBody .chip{
    font-size:10px !important;
  }

  #configurateur-tresse-root .canopy-chip-grid,
  #configurateur-tresse-root .canopy-pocket-chip-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-height:680px) and (min-width:981px){
  #configurateur-tresse-root #mainPanel{
    inset:88px 14px 82px auto !important;
  }

  #configurateur-tresse-root .main-config-actions{
    inset:auto 14px 12px auto !important;
  }

  #configurateur-tresse-root #mainConfiguratorCard > .mainTabsHd{
    top:12px !important;
  }

  #configurateur-tresse-root .view-braid > .hd,
  #configurateur-tresse-root .view-canopy > .hd,
  #configurateur-tresse-root .view-rug > .hd,
  #configurateur-tresse-root .view-room > .hd{
    top:88px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #configurateur-tresse-root *,
  #configurateur-tresse-root *::before,
  #configurateur-tresse-root *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}