/* FONT_END */
  :root {
    --swiper-theme-color: #ccc;
    /*
    --swiper-preloader-color: var(--swiper-theme-color);
    --swiper-wrapper-transition-timing-function: initial;
    */
}
.swiper {

}
.mySwiper-chaussure {
  width: 100%;
  height: 100%; /* Prend toute la hauteur du parent */
}
.swiper-pagination-actu {
  position: relative;
  margin-top: 40px; /* ou plus, selon la hauteur de tes cartes */
  text-align: center;
  z-index: 10;
}
/* Les bulles */
.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 1;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 10px;
  line-height: 20px;
  color: #282D57;
}

/* Bulle active */
.swiper-pagination-bullet-active {
  background-color: #282D57; /* Couleur de la bulle active */
  transform: scale(1.2); /* Option : grossir la bulle active */
  color: #fff;
}

/* Si tu veux des bulles carrées */
.swiper-pagination-bullet.square {
  border-radius: 0;
}

/* Exemple pour centrer dans une colonne */
.swiper-pagination {
  text-align: center;
  width: 100%;
}

.swiper-slide-chaussure {
  width: 100%;
  height: 100%; /* Chaque slide occupe toute la hauteur */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #fff;
  position: relative;
}

/* L'image ne se fait jamais cropper et reste centrée */
.swiper-slide-chaussure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain!important;
  object-position: center;
  display: block;
}
.swiper-pagination-chaussure {
  bottom: 40px;
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  width: 50px;
  height: 20px;
  position: absolute;
  left: 40px;
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 30px;
}
.swiper {
	width: 100%;
}
.swiper-content {
  height: 100%;
  padding-left: 40px;
  padding-right: 40px;
  max-width: 1800px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.swiper-slide-thumb {
  display: block;
  width: 100%;
  height: calc(20vw);
  overflow: hidden;
  position: relative;
}

/* L'image remplace le background */
/* Image avec effet cover */
.swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplace background-size: cover */
  object-position: center; /* Remplace background-position: center */
  display: block;
  transition: transform 0.5s ease; /* Animation fluide */
}

/* Effet zoom au survol */
.swiper-slide-thumb:hover .swiper-slide-image {
  transform: scale(1.05); /* Grossit légèrement */
}
.swiper-slide {
	display: flex;
	min-height: 400px;
}
.swiper-slide-content {
  border: 1px solid #282D57;
  min-height: 400px;
  transition: all .5s cubic-bezier(.19,1,.22,1);
  width: 100%;
  background-color: #fff;
}
.swiper-slide-titre {
  padding: 20px 20px 40px 20px;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f4f4f4;
}
.swiper-button-next, .swiper-button-prev {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  mix-blend-mode: difference;
}
  .swiper-button-prev {
    left: 10px;
    }
.swiper-button-next {
	cursor: pointer;
}