/* =========================================================
   BGJE — right.css (COMPLET / OPTIMISÉ / FIX PORTRAITS + HOVER)
   - Boutons ronds rose / icônes blanches (slider + lightbox)
   - Hover: léger éclaircissement + micro "enfoncement" (active)
   - Portraits centrés (image centrée même si plus petite)
   ========================================================= */

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

  --bgje-pink: #e85a7d;
  --bgje-black: #000000;
  --bgje-shadow: 0 10px 26px rgba(232,90,125,.45);

  --bgje-btn: 56px;
  --bgje-btn-m: 48px;

  --bgje-lb-maxw: 80vw;
  --bgje-lb-maxh: 80vh;
  
  --bgje-close-btn: 36px;
  --bgje-close-btn-m: 32px;

  /* Hover/active tuning */
  --bgje-hover-bright: 1.08;
  --bgje-press-scale: .96;
}

/* ---------- WRAPPER ---------- */
.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%;
}

/* ---------- IMAGE DISPLAY ---------- */
.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 fallback */
.bgje-right .display-img.is-css-blurred{
  filter:blur(18px);
  transform:scale(1.02);
}

/* ---------- OVERLAY ---------- */
.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;
}

/* =========================================================
   BUTTON FX (commun)
   - hover: brightness + petit lift via shadow (pas de translate)
   - active: "enfoncement" via scale
   ========================================================= */
.bgje-btnfx{
  transition: filter .14s ease, box-shadow .14s ease, transform .08s ease;
  will-change: filter, transform;
}
.bgje-btnfx:hover{
  filter: brightness(var(--bgje-hover-bright));
  box-shadow: 0 14px 34px rgba(232,90,125,.42);
}
.bgje-btnfx:active{
  transform: scale(var(--bgje-press-scale));
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  .bgje-btnfx{ transition:none; }
  .bgje-btnfx:active{ transform:none; }
}

/* =========================================================
   CONTROLS (slider)
   ========================================================= */
.bgje-right.image-slider .slider-control--button{
  position:absolute;
  top:50%;
  transform:translateY(-50%) !important; /* verrouille */
  width:var(--bgje-btn);
  height:var(--bgje-btn);
  border-radius:0px !important;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  background:var(--bgje-pink) !important;
  color:#fff !important;                 /* currentColor => blanc */
  box-shadow:var(--bgje-shadow);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30;
  -webkit-tap-highlight-color:transparent;
}

/* Empêche le thème de casser au hover */
.bgje-right.image-slider .slider-control--button:hover,
.bgje-right.image-slider .slider-control--button:focus,
.bgje-right.image-slider .slider-control--button:focus-visible,
.bgje-right.image-slider .slider-control--button:active{
  border-radius:0px !important;
  background:var(--bgje-black) !important;
  color:#fff !important;
  transform:translateY(-50%) !important; /* ne bouge pas verticalement */
}

/* Ajout effets */
.bgje-right.image-slider .slider-control--button{
  /* on applique le "mixin" */
  transition: filter .14s ease, box-shadow .14s ease, transform .08s ease;
  will-change: filter, transform;
}
.bgje-right.image-slider .slider-control--button:hover{
  filter: brightness(var(--bgje-hover-bright));
  box-shadow: 0 14px 34px rgba(232,90,125,.42);
}
/* ⚠️ active sans casser translateY(-50%) -> scale via CSS variable */
.bgje-right.image-slider .slider-control--button:active{
  transform: translateY(-50%) scale(var(--bgje-press-scale)) !important;
}

/* Positions */
.bgje-right.image-slider .prev-button{ left:12px; }
.bgje-right.image-slider .next-button{ right:12px; }

/* SVG flèches slider */
.bgje-right.image-slider .bgje-arrow{
  width:28px;
  height:28px;
  display:block;
}
.bgje-right.image-slider .bgje-arrow path{
  stroke:#fff !important;
}

/* =========================================================
   THUMBNAILS
   ========================================================= */
.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 (centrée, portraits centrés)
   ========================================================= */
.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; }

/* Conteneur de centrage */
.bgje-lightbox__frame{
  position:relative;
  width:min(var(--bgje-lb-maxw), 1200px);
  height:min(var(--bgje-lb-maxh), 900px);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;              /* ✅ force centre même si un style externe casse */
  text-align:center;        /* ✅ évite effet "collé à gauche" */
}

/* Image: centrée même si portrait */
.bgje-lightbox__img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:block;            /* ✅ élimine inline gap */
  margin:auto;              /* ✅ centre si plus petit que le frame */
}

/* Boutons lightbox */
.bgje-lightbox__close,
.bgje-lightbox__prev,
.bgje-lightbox__next{
  position:absolute;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  width:var(--bgje-btn);
  height:var(--bgje-btn);
  border-radius:999px !important;
  background:var(--bgje-pink) !important;
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--bgje-shadow);
  -webkit-tap-highlight-color:transparent;
  z-index:10000;
  transition: filter .14s ease, box-shadow .14s ease, transform .08s ease;
  will-change: filter, transform;
}

/* Close plus petit */
.bgje-lightbox__close{
  width: var(--bgje-close-btn);
  height: var(--bgje-close-btn);
  font-size: 14px; /* icône/croix plus fine */
}

/* Prev/next: centre vertical */
.bgje-lightbox__prev{ left:-18px; top:50%; transform:translateY(-50%); }
.bgje-lightbox__next{ right:-18px; top:50%; transform:translateY(-50%); }

/* Close: coin haut droite du cadre */
.bgje-lightbox__close{
  right:-18px;
  top:-18px;
  font-size:15px;
  line-height:1;
}

/* Hover */
.bgje-lightbox__close:hover,
.bgje-lightbox__prev:hover,
.bgje-lightbox__next:hover{
  filter: brightness(var(--bgje-hover-bright));
  box-shadow: 0 14px 34px rgba(232,90,125,.42);
}

/* Active (enfoncement) : sans casser translateY du prev/next */
.bgje-lightbox__close:active{
  transform: scale(var(--bgje-press-scale));
}
.bgje-lightbox__prev:active{
  transform: translateY(-50%) scale(var(--bgje-press-scale));
}
.bgje-lightbox__next:active{
  transform: translateY(-50%) scale(var(--bgje-press-scale));
}

/* Focus clavier */
.bgje-lightbox__close:focus-visible,
.bgje-lightbox__prev:focus-visible,
.bgje-lightbox__next:focus-visible{
  outline:3px solid rgba(232,90,125,.35) !important;
  outline-offset:3px;
}

/* SVG flèches lightbox */
.bgje-lightbox .bgje-arrow{
  width:28px;
  height:28px;
  display:block;
}
.bgje-lightbox .bgje-arrow path{ stroke:#fff !important; }

/* Mobile boutons */
@media (max-width:520px){
  .bgje-right.image-slider .slider-control--button{
    width:var(--bgje-btn-m);
    height:var(--bgje-btn-m);
  }
  .bgje-right.image-slider .bgje-arrow{ width:24px; height:24px; }

  .bgje-lightbox__close,
  .bgje-lightbox__prev,
  .bgje-lightbox__next{
    width:var(--bgje-btn-m);
    height:var(--bgje-btn-m);
  }
  .bgje-lightbox .bgje-arrow{ width:24px; height:24px; }

  .bgje-lightbox__prev{ left:8px; }
  .bgje-lightbox__next{ right:8px; }
  .bgje-lightbox__close{ right:8px; top:8px; }
}

/* Empêche l'affichage de l'icône cassée quand src est vide */

.bgje-right .display-img{opacity:0;}
.bgje-right .display-img.is-loaded{opacity:1;}