/**
 * Carousel Valeurs AB - Divi 5 custom module (parent + child)
 * Layout: Swiper slidesPerView décimal + centeredSlides pour peek des voisines.
 * Desktop 3.2 : 2 centrées + 2 coupées, Tablet 1.4 : 1 + 2 coupées, Mobile 1.
 * Nav arrows en overlay bottom-left, dots hors overflow.
 */

.ab-values-carousel {
  --ab-values-dot-color:            #DAD6C8;
  --ab-values-dot-active-color:     #F62E02;
  --ab-values-dot-size:             4px;
  --ab-values-dot-gap:              12px;
  --ab-values-dot-inactive-width:   18px;
  --ab-values-dot-active-width:     70px;

  --ab-values-arrow-color:          #FCFBF7;
  --ab-values-arrow-size:           24px;
  --ab-values-arrow-gap:            24px;

  --ab-values-slide-height:         auto;
  --ab-values-slide-padding:        48px 56px;
  --ab-values-slide-gap:            0px;

  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.ab-values-carousel__inner {
  position: relative;
  display: block;
  width: 100%;
}

/* Viewport (container Swiper). Overflow visible pour les slides prev/next. */
.ab-values-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 0;
}

/* ---- SLIDE ----
   La largeur est calculée par Swiper via slidesPerView.
   Height auto par défaut : la slide épouse son contenu. Swiper équilibre
   naturellement toutes les slides à la hauteur de la plus haute via son
   `.swiper-wrapper { align-items: stretch }` interne, donc uniformité conservée
   sans espace vide vertical superflu. Si le user set `slideHeight` dans les
   settings, ça devient une hauteur minimum forcée. */
.ab-values-item {
  min-height: var(--ab-values-slide-height);
  height: auto;
  flex-shrink: 0;
  box-sizing: border-box;
}

.ab-values-item__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--ab-values-slide-padding);
  background-color: #FCFBF7;
  box-sizing: border-box;
  color: #222222;
}

.ab-values-item__title {
  font-family: 'PP Fragment Sans', 'PP Fragment', sans-serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  color: inherit;
  margin: 0;
}

.ab-values-item__description {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
  max-width: 90%;
}

/* Preview builder: flex row justify-center pour un aperçu statique */
.ab-values-carousel__viewport:not(.swiper-initialized) .ab-values-carousel__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--ab-values-slide-gap);
  transform: none !important;
  padding: 0 var(--ab-values-slide-gap);
  align-items: stretch;
}

/* ---- Arrows ---- */
.ab-values-carousel__arrows {
  position: absolute;
  left: 0;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: var(--ab-values-arrow-gap);
  z-index: 5;
  padding-left: 56px;
  pointer-events: none;
}

.ab-values-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ab-values-arrow-size);
  height: var(--ab-values-arrow-size);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ab-values-arrow-color);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 200ms ease, transform 200ms ease;
}

.ab-values-carousel__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ab-values-carousel__arrow:hover {
  transform: scale(1.1);
}

.ab-values-carousel__arrow:focus-visible {
  outline: 2px solid var(--ab-values-arrow-color);
  outline-offset: 4px;
}

.ab-values-carousel__arrow.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- Dots ---- */
.ab-values-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-values-dot-gap);
  margin-top: 32px;
  padding: 0;
  position: static !important;
  width: auto !important;
}

.ab-values-carousel__dot,
.ab-values-carousel__dots .swiper-pagination-bullet {
  height: var(--ab-values-dot-size);
  width: var(--ab-values-dot-inactive-width);
  background-color: var(--ab-values-dot-color);
  opacity: 1;
  margin: 0 !important;
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    width 250ms ease;
  display: inline-block;
}

.ab-values-carousel__dot.is-active,
.ab-values-carousel__dots .swiper-pagination-bullet-active {
  background-color: var(--ab-values-dot-active-color);
  width: var(--ab-values-dot-active-width);
}

.ab-values-carousel__viewport.swiper-initialized {
  cursor: grab;
}

.ab-values-carousel__viewport.swiper-initialized:active {
  cursor: grabbing;
}

.ab-values-carousel__dots .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--ab-values-dot-active-color);
  outline-offset: 3px;
}

/* ==============================================================
   Swiper core styles (extraits)
   ============================================================== */
.ab-values-carousel .swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.ab-values-carousel .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: stretch;
  transition-property: transform;
  box-sizing: content-box;
}

.ab-values-carousel .swiper-slide {
  flex-shrink: 0;
  position: relative;
  transition-property: transform;
  display: block;
}

.ab-values-carousel .swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.ab-values-carousel .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

/* Mobile: réduit paddings, taille arrows */
@media (max-width: 767px) {
  .ab-values-carousel {
    --ab-values-slide-padding: 32px 32px;
    --ab-values-slide-height:  320px;
  }
  .ab-values-carousel__arrows {
    padding-left: 32px;
    bottom: 16px;
  }
  .ab-values-item__title {
    font-size: 32px;
  }
}