:root{
  --thumbs-col: 130px;
  --gap: 12px;
  --radius: 10px;
  --thumb-gap: 10px;
  --bgje-h: 100vh;
}

.bgje-right.image-slider{
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100% !important;
  flex: 1 1 auto;
  align-self: stretch;
  height: min(var(--bgje-h), var(--bgje-max-h, 100vh));
  max-height: var(--bgje-max-h, 100vh);
  min-height: 320px;
  overflow: hidden;
}

.bgje-right .slider__content,
.bgje-right .image-display,
.bgje-right .slider-navigation{ min-width: 0; }

.bgje-right .slider__content{
  display: grid;
  grid-template-columns: 1fr var(--thumbs-col);
  gap: var(--gap);
  align-items: stretch;
  height: 100%;
}

.bgje-right .image-display{
  position: relative;
  width: 100%; height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.bgje-right .display-img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* Flou CSS ultra-léger côté client (fallback rapide) */
.bgje-right .display-img.is-css-blurred{
  filter: blur(18px);
  transform: scale(1.02);
}

/* Overlay text */
.bgje-right .bgje-overlay{
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: 10px;
}
.bgje-right .bgje-overlay::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
  border-radius: var(--radius);
}
.bgje-right .bgje-overlay-text{
  position:relative; z-index:2; color:#fff; font-weight:700; text-align:center;
  font-size: clamp(14px, 2.6vw, 22px);
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  line-height: 1.2;
  padding-inline: 48px;
  z-index: 0;
}

/* Controls */
.bgje-right .slider-control--button{
  position:absolute; top:50%; transform: translateY(-50%);
  border:0; background:#111; color:#fff; opacity:.9;
  width: 38px; height:38px; border-radius: 999px;
  display:grid; place-items:center;
  padding: 0;
  cursor:pointer;
}
.bgje-right .slider-control--button .icon{
  font-style: normal; line-height: 1; display: inline-block;
}
.bgje-right .prev-button{ left: 8px; }
.bgje-right .next-button{ right: 8px; }

/* Thumbnails right / below */
.bgje-right .slider-navigation{
  display:flex; flex-direction: column;
  gap: var(--thumb-gap);
  overflow-y: auto; overflow-x:hidden;
  padding: 4px;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: #E9406F transparent;
}
.bgje-right .slider-navigation::-webkit-scrollbar{ width: 8px; height: 8px; }
.bgje-right .slider-navigation::-webkit-scrollbar-track{ background: transparent; }
.bgje-right .slider-navigation::-webkit-scrollbar-thumb{ background: #E9406F; border-radius: 999px; }

.bgje-right .nav-button{
  display:block; padding:0; border:2px solid transparent;
  border-radius: 8px; background: transparent; cursor: pointer;
}
.bgje-right .nav-button[aria-selected="true"]{ border-color: #111; }
.bgje-right .thumbnail{
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  border-radius: 6px;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 768px){
  :root{ --thumbs-col: 110px; }
  .bgje-right .slider__content{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .bgje-right .slider-navigation{
    flex-direction: row; gap: 12px; padding: 8px 0;
    overflow-x:auto; overflow-y:hidden;
    height: auto;
  }
  .bgje-right .nav-button{
    width: clamp(96px, 30vw, 160px);
  }
  .bgje-right .thumbnail{
    aspect-ratio: 4/3;
  }
}

/* Lightbox */
.bgje-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2vw;
}
.bgje-lightbox.open{ display: flex; }
.bgje-lightbox__img{
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.bgje-lightbox__close,
.bgje-lightbox__prev,
.bgje-lightbox__next{
  position: absolute;
  border: 0;
  background: rgba(17,17,17,.85);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.bgje-lightbox__close{ top: 10%; right: 10%; }
.bgje-lightbox__prev{ left: 16px; top: 50%; transform: translateY(-50%); }
.bgje-lightbox__next{ right: 16px; top: 50%; transform: translateY(-50%); }

.bgje-lightbox__prev .icon,
.bgje-lightbox__next .icon{
  font-style: normal; line-height: 1; display: inline-block;
}

.bgje-lightbox.open span.no-save-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

}

button.bgje-lightbox__close, button.bgje-lightbox__next, button.bgje-lightbox__prev {
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}