/* ========================= 
   LTH Smart Slider – FRONT (stable + mobile hardened)
   ========================= */

.lth-ss{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
  touch-action: pan-y; /* on garde le scroll vertical */
}

/* Track = flex obligatoire */
.lth-ss .lth-ss__track{
  position: relative;
  display: flex !important;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform .45s ease;
  will-change: transform;
}

.lth-ss .lth-ss__track.no-anim{
  transition: none !important;
}

.lth-ss .lth-ss__slide{
  position: relative !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100%;
}

/* Media */
.lth-ss .lth-ss__media,
.lth-ss .lth-ss__media img{
  display: block;
  width: 100%;
  height: 100%;
}

.lth-ss .lth-ss__media img{
  object-fit: cover;
}

/* Lien plein écran : sous les contrôles */
.lth-ss .lth-ss__link{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

/* Overlay (CTA) au-dessus du lien */
.lth-ss .lth-ss__overlay{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: auto;
}

/* -------------------------
   CONTROLS (HARDENED)
   Certains thèmes mobile cassent les <button> (position/font-size/…)
   => on force avec !important.
   ------------------------- */

.lth-ss .lth-ss__btn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  pointer-events: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(0,0,0,.35) !important;

  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;

  cursor: pointer !important;
  opacity: 1 !important;
  padding: 0 !important;
}

.lth-ss .lth-ss__btn--prev{ left: 14px !important; right: auto !important; }
.lth-ss .lth-ss__btn--next{ right: 14px !important; left: auto !important; }

.lth-ss .lth-ss__dots{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 12px !important;
  z-index: 10 !important;
  pointer-events: auto !important;

  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;

  opacity: 1 !important;
}

.lth-ss .lth-ss__dot{
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  background: rgba(255,255,255,.25) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.lth-ss .lth-ss__dot.is-active{
  background: rgba(255,255,255,.95) !important;
}

/* Focus a11y */
.lth-ss .lth-ss__btn:focus,
.lth-ss .lth-ss__dot:focus{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

/* Mobile : slider en full-bleed (prend tout le viewport) */
@media (max-width: 768px){
  .lth-ss{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* =========================================
   ✅ FIX FLASH / REPAINT : ratio dès le 1er paint
   On pilote via variables CSS (posées en inline par le PHP)
   --lth-ratio-d: 16/6
   --lth-ratio-m: 4/5
   ========================================= */

.lth-ss{
  aspect-ratio: var(--lth-ratio-d, 16/6);
  background: #0b0b0b; /* évite flash blanc pendant decode */
}

@media (max-width: 768px){
  .lth-ss{
    aspect-ratio: var(--lth-ratio-m, 4/5);
  }
}