/*
  hero-carousel.css — habillage du carrousel Splide de la hero.
  S'appuie sur le thème Splide complet (splide.min.css) : layout + positionnement
  de la pagination sont déjà gérés. Ici on ne fait que : remplir la boîte .hero__media
  (ratio 4/3) et recolorer les points. Pas de media query (règle du thème).
*/
.hero-carousel {
  position: absolute;
  inset: 0;
}
.hero-carousel .splide,
.hero-carousel .splide__track,
.hero-carousel .splide__list {
  height: 100%;
}
.hero-carousel .splide__slide {
  height: 100%;
  position: relative; /* contexte de positionnement des overlays (badge / étiquette) du slide */
}
.hero-carousel .splide__slide > a {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-carousel .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Avant l'init Splide : n'afficher que le 1er slide (évite l'empilement des images). */
.hero-carousel:not(.is-initialized) .splide__slide:not(:first-child) {
  display: none;
}

/* Pagination (points) — le thème Splide la place déjà en bas ; on la recolore. */
.hero-carousel .splide__pagination {
  padding: var(--space-3);
}
.hero-carousel .splide__pagination__page {
  width: 9px;
  height: 9px;
  margin: 0 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.hero-carousel .splide__pagination__page.is-active {
  background: var(--color-white);
  transform: scale(1.4);
}