/* ───────────────────────────────────────────────────────────────────────────
 * Arssans Slider Fresques — front (CDC §10).
 * Image 3:2 pleine largeur, sans cadre, coins arrondis (clip). Boutons au survol,
 * puces sous l'image. Tokens charte : or #9a8410 / #d4af37, ligne #e2dccd.
 *
 * ⚠ RÈGLE ANTI-BUG : le thème PrestaShop "classic" (chargé sur la fiche) impose des
 * règles img{ margin:auto; max-width:100%; height:100% } qui, sous Firefox, rétré-
 * cissaient/centraient l'image. On neutralise par : <img> en position:absolute;
 * inset:0; width/height:100% !important; object-fit:cover → remplit la boîte 3:2
 * quoi qu'il arrive. NE PAS retirer les !important sur .slf__img.
 * ─────────────────────────────────────────────────────────────────────────── */

.slf {
  width: 100%;
  outline: none;
}

.slf__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;          /* = rayon du placeholder (charte) */
}

.slf__track {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .45s ease;
  will-change: transform;
}

.slf__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Boîte 3:2 : la hauteur = largeur × 2/3. Coins arrondis = clip, pas de cadre. */
.slf__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  background: #f7f5ef;          /* fond charte le temps du chargement */
}
/* Repli si aspect-ratio non supporté (navigateurs anciens) */
@supports not (aspect-ratio: 3 / 2) {
  .slf__frame { height: 0; padding-top: 66.6667%; }
}

/* L'image REMPLIT la boîte, immunisée contre les règles img{} du thème. */
.slf .slf__img,
.slf__frame > picture > img.slf__img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  display: block;
}

.slf__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 14px;
  font-size: .85rem;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

/* ── Boutons de navigation : invisibles par défaut, au survol/focus ─────────── */
.slf__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #1c1b18;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
  z-index: 2;
}
.slf__viewport:hover .slf__nav,
.slf:focus-within .slf__nav { opacity: 1; }
.slf__nav:hover { background: #fff; color: #9a8410; }
.slf__nav:focus-visible { opacity: 1; outline: 2px solid #d4af37; outline-offset: 2px; }
.slf__nav--prev { left: 12px; }
.slf__nav--next { right: 12px; }

/* ── Puces sous l'image ─────────────────────────────────────────────────────── */
.slf__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 12px 0 0;
}
.slf__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e2dccd;          /* ligne/charte (inactif) */
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.slf__dot.is-active { background: #9a8410; transform: scale(1.25); }  /* or charte */
.slf__dot:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; }

/* ── Lightbox plein écran : flèches + miniatures ────────────────────────────── */
.slf__frame { cursor: zoom-in; }

.slf-lb {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(14, 14, 13, .94);   /* --afq-noir */
  padding: 24px 64px 16px;
}
.slf-lb.is-open { display: flex; }

.slf-lb__stage {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  position: relative;
  width: 100%;
}
.slf-lb__img {
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.slf-lb__count {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  color: #ece7db;
  font-size: .85rem;
  letter-spacing: .04em;
}

.slf-lb__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #1c1b18;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.slf-lb__nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #1c1b18;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
  z-index: 2;
}
.slf-lb__nav:hover { background: #fff; color: #9a8410; }
.slf-lb__nav--prev { left: 16px; }
.slf-lb__nav--next { right: 16px; }

/* Bande de miniatures (montre le nombre de visuels) */
.slf-lb__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 40px;
  padding: 6px;
  max-width: 92vw;
  overflow-x: auto;
}
.slf-lb__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;          /* 3:2 */
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}
.slf-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slf-lb__thumb:hover { opacity: 1; }
.slf-lb__thumb.is-active { opacity: 1; border-color: #d4af37; }   /* or charte */

@media (max-width: 575px) {
  .slf-lb { padding: 16px 8px 12px; }
  .slf-lb__nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .slf-lb__nav--prev { left: 6px; }
  .slf-lb__nav--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .slf__track { transition: none; }
}