/**
 * Carrousel — bande d'images à HAUTEUR ÉGALE : chaque photo garde son ratio
 * réel (portrait/paysage), toutes réduites à la même hauteur, largeur auto.
 * Défilement natif + accroche (scroll-snap). Aucun espaceur → pas de vide en
 * début/fin. Alignement de l'accroche : centre / gauche / droite.
 */

.bejoy-carousel {
  position: relative;
  --bejoy-car-h: 100vh;
  --bejoy-car-gap: 16px;
  --bejoy-car-radius: 8px;
  /* Défauts des flèches posés ICI (hérités par .bejoy-carousel__nav) —
     les réglages du widget les surchargent sur {{WRAPPER}} .bejoy-carousel. */
  --bejoy-car-arrow-size: 48px;
  --bejoy-car-arrow-icon: 18px;
  --bejoy-car-arrow-color: #141414;
  --bejoy-car-arrow-bg: #ffffff;
  --bejoy-car-arrow-color-h: #ffffff;
  --bejoy-car-arrow-bg-h: #141414;
  --bejoy-car-arrow-radius: 50%;
}

.bejoy-carousel__track {
  display: flex;
  gap: var(--bejoy-car-gap);
  height: var(--bejoy-car-h);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.bejoy-carousel__track::-webkit-scrollbar { display: none; }

.bejoy-carousel__slide {
  flex: 0 0 auto;              /* largeur = celle de l'image à hauteur égale */
  height: 100%;
  margin: 0;
  border-radius: var(--bejoy-car-radius);
  overflow: hidden;
}
/* Ratio réel + même hauteur. On donne une hauteur DÉFINIE (pas 100%) sinon la
   largeur auto ne se calcule pas dans un flex item (sizing circulaire → largeur
   ~0). On bat aussi les règles img du thème via la spécificité + !important. */
.bejoy-carousel__slide .bejoy-carousel__img {
  display: block;
  height: var(--bejoy-car-h) !important;
  width: auto !important;
  max-width: none !important;
}

/* Alignement de l'accroche (sans espaceur → aucun vide en début/fin) */
.bejoy-carousel-align--center .bejoy-carousel__slide { scroll-snap-align: center; }
.bejoy-carousel-align--start  .bejoy-carousel__slide { scroll-snap-align: start; }
.bejoy-carousel-align--end    .bejoy-carousel__slide { scroll-snap-align: end; }

/* --- Flèches (intégrées ou déportées via shortcode) --- */
.bejoy-carousel__nav,
.bejoy-carousel-arrows {
  display: inline-flex;
  gap: 12px;
}
/* Défauts pour les flèches DÉPORTÉES (hors widget). */
.bejoy-carousel-arrows {
  --bejoy-car-arrow-size: 48px;
  --bejoy-car-arrow-icon: 18px;
  --bejoy-car-arrow-color: #141414;
  --bejoy-car-arrow-bg: #ffffff;
  --bejoy-car-arrow-color-h: #ffffff;
  --bejoy-car-arrow-bg-h: #141414;
  --bejoy-car-arrow-radius: 50%;
}

/* Position des flèches intégrées — base (bas-droite) ; la position exacte,
   RESPONSIVE, est posée par le réglage « Position » (selectors par appareil). */
.bejoy-carousel__nav {
  position: absolute;
  z-index: 3;
  inset: auto 24px 24px auto;
}
/* En mode « Sur les côtés », le conteneur laisse passer les clics sauf sur les
   boutons (pointer-events géré via le réglage responsive). */
.bejoy-carousel__nav .bejoy-carousel__arrow { pointer-events: auto; }

/* Bouton — couleurs Elementor/thème neutralisées, forme constante */
.bejoy-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bejoy-car-arrow-size);
  height: var(--bejoy-car-arrow-size);
  padding: 0;
  border: none;
  border-radius: var(--bejoy-car-arrow-radius);
  background: var(--bejoy-car-arrow-bg);
  color: var(--bejoy-car-arrow-color);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}
.bejoy-carousel__arrow:hover,
.bejoy-carousel__arrow:focus,
.bejoy-carousel__arrow:active {
  background: var(--bejoy-car-arrow-bg-h);
  color: var(--bejoy-car-arrow-color-h);
  outline: none;
  box-shadow: none;
}
.bejoy-carousel__arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.bejoy-carousel__arrow i { font-size: var(--bejoy-car-arrow-icon); line-height: 1; color: inherit; }
.bejoy-carousel__arrow svg {
  width: var(--bejoy-car-arrow-icon);
  height: var(--bejoy-car-arrow-icon);
  fill: currentColor;
}

/* Désactivé en début / fin (pas de boucle) */
.bejoy-carousel__arrow.is-disabled,
.bejoy-carousel__arrow:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .bejoy-carousel__track { scroll-behavior: auto; }
  .bejoy-carousel__arrow { transition: none; }
}