/* =========================
   WRAPPER NAVIGATION
   Positionné autour du slider pour que les flèches
   ne soient plus rognées par le overflow:hidden de Swiper.
========================= */
.swiper-nav-wrapper {
  position: relative;
}

.swiper-nav-wrapper .swiper-button-next,
.swiper-nav-wrapper .swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #ed7d31 !important;
  cursor: pointer;
}

.swiper-nav-wrapper .swiper-button-prev {
  left: 10px;
}

.swiper-nav-wrapper .swiper-button-next {
  right: 10px;
}

/* =========================
   SWIPER - MOBILE FIRST
========================= */

.mySwiper {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 260px;
  max-height: 680px;
  overflow: hidden;
  position: relative;
  border-radius: 0;
}

.mySwiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.mySwiper .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.mySwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Overlay léger pour lisibilité */
.mySwiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
}

/* Variante : Fond blanc plein + texte noir (#000000)
.mySwiper .swiper-slide::after {
  background: rgba(255, 255, 255, 1);
}
.mySwiper .caption,
.mySwiper .caption h2,
.mySwiper .caption p {
  color: #000000;
  text-shadow: none;
}
*/

/* Texte */
.mySwiper .caption {
  position: absolute;
  z-index: 5;
  left: 6%;
  right: 6%;
  bottom: 12%;
  max-width: 90%;
  color: #000000;
  background: transparent !important;
  padding: 0;
  text-shadow: 0 3px 12px rgba(255, 255, 255, 0.85);
}

.mySwiper .caption h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  line-height: 1.05;
  font-weight: 800;
  color: #000000;
}

.mySwiper .caption p {
  margin: 0;
  font-size: clamp(0.95rem, 4vw, 1.2rem);
  line-height: 1.45;
  color: #000000;
}

/* Navigation */
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
  width: 36px;
  height: 36px;
  z-index: 10;
  color: #ed7d31 !important;
}

.mySwiper .swiper-button-next::after,
.mySwiper .swiper-button-prev::after {
  font-size: 1.4rem !important;
  font-weight: 700;
}

/* Pagination */
.mySwiper .swiper-pagination {
  z-index: 10;
  bottom: 12px !important;
}

.mySwiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #ffffff;
  opacity: 0.5;
}

.mySwiper .swiper-pagination-bullet-active {
  background: #ed7d31;
  opacity: 1;
}

/* =========================
   PETITES TABLETTES
========================= */

@media (min-width: 576px) {
  .mySwiper {
    aspect-ratio: 16 / 8;
    min-height: 300px;
  }

  .mySwiper .caption {
    left: 7%;
    right: auto;
    max-width: 70%;
  }
}

/* =========================
   TABLETTES
========================= */

@media (min-width: 768px) {
  .mySwiper {
    aspect-ratio: 16 / 7;
    min-height: 360px;
  }

  .mySwiper .caption {
    left: 8%;
    bottom: 14%;
    max-width: 600px;
  }

  .mySwiper .caption h2 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
  }

  .mySwiper .caption p {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
  }

  .mySwiper .swiper-button-next,
  .mySwiper .swiper-button-prev {
    width: 44px;
    height: 44px;
  }

  .mySwiper .swiper-button-next::after,
  .mySwiper .swiper-button-prev::after {
    font-size: 1.8rem !important;
  }
}

/* =========================
   DESKTOP
========================= */

@media (min-width: 1024px) {
  .mySwiper {
    aspect-ratio: 16 / 6.5;
    min-height: 430px;
  }

  .mySwiper .caption {
    left: 9%;
    bottom: 16%;
    max-width: 680px;
  }
}

/* =========================
   GRAND ÉCRAN
========================= */

@media (min-width: 1440px) {
  .mySwiper {
    aspect-ratio: 16 / 5.5;
    max-height: 720px;
  }

  .mySwiper .caption {
    left: 10%;
    max-width: 760px;
  }
}