.banner-carousel-item {
  max-height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Fallback : JPG par défaut */
.banner-item-1 {
  background-image: url("../images/slider-main/bg_1_1200.jpg"), url("../images/slider-main/bg_1.jpg");
}
.banner-item-2 {
  background-image: url("../images/slider-main/bg_2_1200.jpg"), url("../images/slider-main/bg_2.jpg");
}
.banner-item-3 {
  background-image: url("../images/slider-main/bg_3_1200.jpg"), url("../images/slider-main/bg_3.jpg");
}
.banner-item-4 {
  background-image: url("../images/slider-main/bg_4_1200.jpg"), url("../images/slider-main/bg_4.jpg");
}

/* Si le navigateur supporte WebP, on remplace l'image */
@supports (background-image: url('../Iimages/slider-main/bg_1_1200.webp')) {
  .banner-item-1 {
    background-image: url('../images/slider-main/bg_1_1200.webp');
  }
  .banner-item-2 {
    background-image: url('../images/slider-main/bg_2_1200.webp');
  }
  .banner-item-3 {
    background-image: url('../images/slider-main/bg_3_1200.webp');
  }
  .banner-item-4 {
    background-image: url('../images/slider-main/bg_4_1200.webp');
  }
}

/* Version mobile : 450px */
@media screen and (max-width: 768px) {
  .banner-item-1 {
    background-image: url('../../images/slider-main/bg_1_450.jpg');
  }
  .banner-item-2 {
    background-image: url('../images/slider-main/bg_2_450.jpg');
  }
  .banner-item-3 {
    background-image: url('../images/slider-main/bg_3_450.jpg');
  }
  .banner-item-4 {
    background-image: url('../images/slider-main/bg_4_450.jpg');
  }
	
  @supports (background-image: url('../images/slider-main/bg_1-450.webp')) {
    .banner-item-1 {
      background-image: url('../images/slider-main/bg_1_450.webp');
    }
    .banner-item-2 {
      background-image: url('../images/slider-main/bg_2_450.webp');
    }
    .banner-item-3 {
      background-image: url('../images/slider-main/bg_3_450.webp');
    }
    .banner-item-4 {
      background-image: url('../images/slider-main/bg_4_450.webp');
    }
  }
}

.flyer {
  background-image: 
    url("../images/index/bg_flyer.webp"), /* WebP image */
    url("../images/index/bg_flyer.png");  /* Fallback PNG */
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFF;
  padding: 10% 10px 25% 10px;
  position: relative;
}
.flyer img {
    position: absolute;
    top: -50px; /* Ajustez cette valeur pour chevaucher plus ou moins */
    left: 50%;
    transform: translateX(-50%); /* Centre l'image horizontalement */
    width: 50%; /* Maintient la taille définie par la classe `w-50` */
		border-radius: 50%;
}
.flyer div {
    margin-top: 80px; /* Ajuste l'espace sous l'image si nécessaire */
}
.flyer p {
	margin: 0;
	text-align: left; /* Aligne le texte à gauche */
}

/* Slider footer*/
#bottomslider {
    align-items: center;
    background: #E3E3E3;
    display: flex;
    justify-content: center;
		margin: 20px 0;
}

/* Conversion du mixin */
.white-gradient {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

/* Conversion de la variable */
/* Remplacement de $animationSpeed par sa valeur */

/* Animation */
/*
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7)); }
}
*/
.sliderfooter {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slide-track {
  display: flex;
  width: calc(250px * 24); /* ← 5 images x2 (dupliquées pour l'infini) */
  animation: scroll 40s linear infinite;
}

.slide {
  flex: 0 0 auto;
  width: 250px;
}

.slide img {
  width: 250px;
  height: 150px;
  object-fit: cover;
  display: block;
}

/* Animation fluide en boucle */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.sliderfooter.paused .slide-track {
    animation-play-state: paused;
}