/* ===== Slider (compatible avec ton HTML existant) ===== */
.ct.ct--master-slider .master-slider-container{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* La piste horizontale */
.ct.ct--master-slider .slider{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;      /* la piste occupe la largeur dispo */
  will-change: transform;
  transition: transform .5s ease;
  overflow: hidden;
}

/* Chaque slide = exactement la largeur visible du slider */
.ct.ct--master-slider .slide{
  position: relative !important;
  flex: 0 0 auto !important;   /* largeur fixée en JS */
  width: 100% !important;      /* sécurité */
  max-width: 100% !important;
  transform: none !important;
}

/* Cadre de l'image : on laisse la hauteur à l'image (pas d'aspect-ratio forcé) */
.ct.ct--master-slider .container-image{
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: darkgrey;
}

/* Image : laissons-la faire sa mise à l'échelle naturelle */
.ct.ct--master-slider .slide-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Barre de progression (préloader) en haut de l'image active */
.ct.ct--master-slider .js-progress{
  position: absolute;
  left: 0; top: 0;
  height: 5px;
  width: 0;
  background: #FEFC8D;         /* demandé */
  z-index: 5;
  transition: width .1s linear;
}

/* Numéros */
.ct.ct--master-slider .number-list{
  display: flex; gap: .5rem;
  list-style: none; margin: 0 0 .5rem; padding: 0;
}
.ct.ct--master-slider .number-item{ cursor: pointer; opacity: .6; user-select: none; }
.ct.ct--master-slider .number-item.active{ opacity: 1; font-weight: 700; }

/* Neutralise les wrappers d’animation qui peuvent masquer au départ */
.ct.ct--master-slider .js-element-animate,
.ct.ct--master-slider [data-animation]{
  opacity: 1 !important;
  transform: none !important;
}

/* === Forcer le layout horizontal et neutraliser le thème === */
.ct.ct--master-slider .master-slider-container,
.ct.ct--master-slider .slider{
  position: relative;
  overflow: hidden;
}

.ct.ct--master-slider .slider{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  /* Ne pas laisser un style externe poser un transform concurrent */
  will-change: transform;
}

/* Une diapo = exactement la largeur visible du slider */
.ct.ct--master-slider .slide{
  position: relative !important;
  z-index: 0 !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;

  /* annule les styles “hostiles” fréquents */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cadre image */
.ct.ct--master-slider .container-image{
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* L’image remplit le cadre, aucune position absolue ni transform parasite */
.ct.ct--master-slider .slide-img{
  position: static !important;  /* <— clé si un CSS la met en absolute */
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
  object-position: center;

  transform: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* La barre de progression reste au-dessus, fine et visible */
.ct.ct--master-slider .js-progress{
  position: absolute !important;
  left: 0; top: 0;
  height: 5px; width: 0;
  background: #FEFC8D;
  z-index: 5 !important;
}

/* Neutralise l’anim wrapper qui cache parfois le bloc au départ */
.ct.ct--master-slider .js-element-animate,
.ct.ct--master-slider [data-animation]{
  opacity: 1 !important;
  transform: none !important;
}

/* Le rail en ligne */
.ct.ct--master-slider .slider{
  display: flex !important;
  flex-direction: row !important;           /* ← en LIGNE */
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow: hidden !important;
  will-change: transform;
  transition: transform .5s ease;
}

/* Une diapo = exactement la largeur visible (fixée en px par ton JS) */
.ct.ct--master-slider .slide{
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  /* neutralise styles “hostiles” fréquents */
  display: block !important;
  float: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  left: auto !important; right: auto !important; top: auto !important;
}

/* Le cadre existe réellement (tu verras bien le fond gris) */
.ct.ct--master-slider .container-image{
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Image simple, sans position absolue */
.ct.ct--master-slider .slide-img{
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;                         /* ajuste selon goût */
  object-position: center;                   /* idem */
  transform: none !important;
}


.swiper-container-horizontal .swiper-pagination-bullet {
  display: inline-block;
  margin-right: 20px;
  font-family: "Muli";
  font-size: 1rem;
  color: #d8d8d8;
  background-color: none;
  cursor: pointer;
  -webkit-transition: color 350ms
  cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: color 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: color 350ms
  cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transform: scale(1));
  -ms-transform: scale(1);
  transform: scale(1) !important;
  opacity: initial;
}
.swiper-container-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: #000;
}
.swiper-container-horizontal .swiper-pagination-bullet:hover {
  color: #000;
  opacity: initial;
}