/**
 * Styles personnalisés pour Swiper - Slider de témoignages
 * Compatible avec le front-end et l'éditeur FSE
 */

/* ========================================
   CONTENEUR SWIPER
   ======================================== */

/* Styles pour le front-end et l'éditeur */
.uich-879094f4.swiper,
.wp-block.uich-879094f4.swiper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 80px !important; /* Plus d'espace pour les boutons en bas */
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  overflow: hidden !important;
  min-height: auto !important;
}

.uich-879094f4 .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
  gap: 20px !important;
  padding: 10px 20px !important;
}

/* Desktop : gap CSS gère l'espacement */
@media (min-width: 1024px) {
  .uich-879094f4 .swiper-wrapper {
    gap: 20px !important;
  }
}

.uich-879094f4 .swiper-slide {
  height: auto !important;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Les slides sont des .wp-block-columns directement */
.uich-879094f4 .swiper-slide.wp-block-columns {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: var(--wp--preset--color--base) !important;
  min-height: auto !important;
}

/* ========================================
   BOUTONS DE NAVIGATION
   ======================================== */

.uich-879094f4 .swiper-button-prev,
.uich-879094f4 .swiper-button-next {
  width: 50px;
  height: 50px;
  background: #FFED00;
  border-radius: 50%;
  color: #000;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.uich-879094f4 .swiper-button-prev:after,
.uich-879094f4 .swiper-button-next:after {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.uich-879094f4 .swiper-button-prev.swiper-button-disabled,
.uich-879094f4 .swiper-button-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Position des boutons - En bas à gauche collés */
.uich-879094f4 .swiper-button-prev,
.uich-879094f4 .swiper-button-next {
  top: auto !important;
  bottom: 15px !important;
  margin: 0 !important;
}

.uich-879094f4 .swiper-button-prev {
  left: 20px !important;
  border-radius: 10px;
  background: #eff1e3;
}

.uich-879094f4 .swiper-button-next {
  left: 80px !important; /* 50px (largeur) + 10px (espacement) */
  right: auto !important;
  border-radius: 10px;
}

/* ========================================
   PAGINATION
   ======================================== */

.uich-879094f4 .swiper-pagination {
  display: none !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1023px) {
  /* Force le slider à prendre toute la largeur sur mobile */
  .uich-879094f4.swiper {
    width: 100% !important;
    max-width: 100vw !important;
    padding-bottom: 60px !important;
    overflow: visible !important;
  }
  
  .uich-879094f4 .swiper-wrapper {
    gap: 20px !important; /* Pas de gap sur mobile, utiliser margin-right */
    padding: 10px 10px !important;
  }
  
  .uich-879094f4 .swiper-slide.wp-block-columns {
    flex-shrink: 0 !important;
  }
  
  .uich-879094f4 .swiper-button-prev,
  .uich-879094f4 .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    bottom: 10px !important;
  }

  .uich-879094f4 .swiper-button-prev:after,
  .uich-879094f4 .swiper-button-next:after {
    font-size: 16px;
  }
  
  .uich-879094f4 .swiper-button-prev {
    left: 10px !important;
  }

  .uich-879094f4 .swiper-button-next {
    left: 60px !important; /* 40px (largeur) + 10px (espacement) */
  }
  
  .uich-879094f4 .swiper-pagination {
    left: 50% !important; /* Après les 2 boutons plus petits */
    bottom: 20px !important; /* Aligné avec les boutons plus petits */
  }
  
  /* Espace sous les images dans les slides */
  .uich-879094f4 .swiper-slide img,
  .uich-879094f4 .swiper-slide .wp-block-image,
  .uich-879094f4 .swiper-slide figure {
    margin-bottom: 20px !important;
  }

  .left-mobile-0{
    padding-left: 0px !important;
  }
}

/* Cacher les boutons si 1 seule slide */
.uich-879094f4 .swiper-button-prev.swiper-button-lock,
.uich-879094f4 .swiper-button-next.swiper-button-lock {
  display: none;
}

/* ========================================
   ANIMATION AU SURVOL DES SLIDES
   ======================================== */

.uich-879094f4 .swiper-slide {
  transition: transform 0.3s ease;
}

.uich-879094f4 .swiper-slide-active {
  z-index: 2;
}

/* ========================================
   SLIDER ARTICLES - .article-slide
   ======================================== */

/* Conteneur wrapper pour accessibilité (boutons en dehors du ul) */
.swiper-container-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 80px !important;
}

/* Conteneur Swiper pour les articles */
.article-slide.swiper,
.wp-block.article-slide.swiper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 0 !important; /* Padding géré par le wrapper */
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  overflow: hidden !important;
  min-height: auto !important;
  list-style: none !important;
  padding-left: 0 !important;
}

.swiper-container-wrapper .swiper-wrapper,
.article-slide.swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
  gap: 20px !important;
  padding: 10px 20px !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Desktop : gap CSS gère l'espacement */
@media (min-width: 1024px) {
  .swiper-container-wrapper .swiper-wrapper,
  .article-slide.swiper-wrapper {
    gap: 20px !important;
  }
}

.swiper-container-wrapper .swiper-slide,
.article-slide.swiper-wrapper > .swiper-slide {
  height: auto !important;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* S'assurer que le contenu des slides occupe toute la hauteur */
.swiper-container-wrapper .swiper-slide > .articles,
.article-slide.swiper-wrapper > .swiper-slide > .articles {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}

/* Laisser Swiper gérer la largeur automatiquement avec slidesPerView */

/* ========================================
   BOUTONS DE NAVIGATION ARTICLES
   ======================================== */

.swiper-container-wrapper .swiper-button-prev,
.swiper-container-wrapper .swiper-button-next {
  width: 50px;
  height: 50px;
  background: #FFED00;
  border-radius: 10px;
  color: #000;
  transition: all 0.3s ease;
  border:0px solid transparent!important;
}

.swiper-container-wrapper .swiper-button-prev:after,
.swiper-container-wrapper .swiper-button-next:after {
  content: '' !important;
}

.swiper-container-wrapper .swiper-button-prev,
.swiper-container-wrapper .swiper-button-next {
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: 23px 23px!important;
}

.swiper-container-wrapper .swiper-button-prev {
  background-image: url('../imgs/prev-icon.svg')!important;
}

.swiper-container-wrapper .swiper-button-next {
  background-image: url('../imgs/next-icon.svg');
}

.swiper-container-wrapper .swiper-button-prev.swiper-button-disabled,
.swiper-container-wrapper .swiper-button-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Position des boutons - En bas à gauche */
.swiper-container-wrapper .swiper-button-prev,
.swiper-container-wrapper .swiper-button-next {
  top: auto !important;
  bottom: 15px !important;
  margin: 0 !important;
}

.swiper-container-wrapper .swiper-button-prev {
  left: 20px !important;
  background: #eff1e3;
}

.swiper-container-wrapper .swiper-button-next {
  left: 80px !important;
  right: auto !important;
}

/* ========================================
   PAGINATION ARTICLES
   ======================================== */

.swiper-container-wrapper .swiper-pagination {
  display: none !important;
}

/* ========================================
   RESPONSIVE ARTICLES
   ======================================== */

@media (max-width: 1023px) {
  .swiper-container-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    padding-bottom: 60px !important;
    overflow: visible !important;
  }
  
  .swiper-container-wrapper .swiper-wrapper,
  .article-slide.swiper-wrapper {
    gap: 20px !important;
    padding: 10px 10px !important;
  }
  
  .swiper-container-wrapper .swiper-slide {
    flex-shrink: 0 !important;
  }
  
  /* Sur mobile, s'assurer que chaque slide garde sa structure */
  .swiper-container-wrapper .swiper-slide > .articles {
    width: 100% !important;
  }
  
  .swiper-container-wrapper .swiper-button-prev,
  .swiper-container-wrapper .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    bottom: 10px !important;
  }

  .swiper-container-wrapper .swiper-button-prev:after,
  .swiper-container-wrapper .swiper-button-next:after {
    font-size: 16px;
  }
  
  .swiper-container-wrapper .swiper-button-prev {
    left: 10px !important;
  }

  .swiper-container-wrapper .swiper-button-next {
    left: 60px !important;
  }
  
  .swiper-container-wrapper .swiper-pagination {
    left: 50% !important;
    bottom: 20px !important;
  }
}

/* Cacher les boutons si 1 seule slide */
.swiper-container-wrapper .swiper-button-prev.swiper-button-lock,
.swiper-container-wrapper .swiper-button-next.swiper-button-lock {
  display: none;
}

/* ========================================
   ANIMATION AU SURVOL DES SLIDES ARTICLES
   ======================================== */

.swiper-container-wrapper .swiper-slide {
  transition: transform 0.3s ease;
}

.swiper-container-wrapper .swiper-slide-active {
  z-index: 2;
}