/* ==========================================
   NOS DERNIERS BIENS SLIDESHOW – CONTENT WIDTH
   Constrains the slider to the same width as
   the page content (not full page width).
   ========================================== */


/* Create an isolated stacking context so this slider can't overlay/obscure following content */
.at-hero-2025 { isolation: isolate; }

/* Ensure the slider establishes its own block formatting context (prevents layout bleed) */
.at-hero-2025-wrap { contain: layout paint; }

   


/* 👉 Adjust this to match your site’s content width */
:root {
  --content-max: 1200px; /* Try 760–820px if needed */
  --content-padding-x: 0px; /* set to your container’s side padding if any */
}

/* Wrapper – centered, limited to content width */
.at-hero-2025-wrap {
  width: 100%;
  max-width: calc(var(--content-max) + (var(--content-padding-x) * 2));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
  box-sizing: border-box;
}

/* Slideshow box – fills wrapper, no fake “padding” effects */
.at-hero-2025 {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;   /* perfect for 640×360 images */
  border-radius: 0;       /* keep edges flush with content */
  background: #000;
  box-shadow: none;       /* avoid inset look */
}

/* Track (slides container) */
.at-hero-2025-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
  width: 100%;
  height: 100%;
}

/* Each slide */
.at-hero-2025-slide {
  flex: 0 0 100%;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Images fill the slideshow area */
.at-hero-2025-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* switch to 'contain' for no cropping */
  display: block;
  border-radius: 0;
}

/* Navigation arrows – kept near edges */
.at-hero-2025-prev,
.at-hero-2025-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  font-size: 1.9rem;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.25s ease;
}

.at-hero-2025-prev:hover,
.at-hero-2025-next:hover {
  background: rgba(0, 0, 0, 0.75);
}

.at-hero-2025-prev { left: 6px; }
.at-hero-2025-next { right: 6px; }

/* Dots */
.at-hero-2025-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.at-hero-2025-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.at-hero-2025-dots button.active {
  background-color: #fff;
  transform: scale(1.15);
}

/* Responsive: content columns usually expand on large screens and
   collapse on small ones; we keep the slider centered and fluid. */
@media (max-width: 860px) {
  :root { --content-max: 92vw; }  /* keep nice margins on smaller screens */
}

@media (max-width: 600px) {
  .at-hero-2025-prev,
  .at-hero-2025-next {
    font-size: 1.6rem;
    padding: 5px 8px;
  }
  .at-hero-2025-dots button {
    width: 8px;
    height: 8px;
  }
}

/* Hide the navigation dots */
.at-hero-2025-dots {
  display: none !important;
}