/* ==========================================================================
   carousel.css — structure du carrousel (js/carousel.js) et des vidéos
   YouTube légères (js/youtube-lite.js). L'habillage est propre à chaque page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Carrousel
   Grille : flèche précédente | diapositives | flèche suivante,
   pastilles en dessous. Sur écran étroit, les flèches passent sous les
   diapositives, de part et d'autre des pastilles.
   -------------------------------------------------------------------------- */

.carousel {
  --carousel-arrow-size: 2.75rem;
  --carousel-gap: 1rem;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--carousel-gap);
}

.carousel__viewport {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  touch-action: pan-y; /* le glissement horizontal est géré par le script */
}

.carousel__prev,
.carousel__next {
  grid-row: 1;
  width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
}

.carousel__prev { grid-column: 1; }
.carousel__next { grid-column: 3; }

/* Flèches centrées sur l'élément d'ancrage (voir carousel.js) */
.carousel[data-carousel-anchor] .carousel__prev,
.carousel[data-carousel-anchor] .carousel__next {
  align-self: start;
  margin-top: calc(var(--carousel-arrow-y, 0px) - var(--carousel-arrow-size) / 2);
}

.carousel--ready[data-carousel-anchor] .carousel__prev,
.carousel--ready[data-carousel-anchor] .carousel__next {
  transition: margin-top 0.4s ease;
}

.carousel__track {
  --index: 0;

  display: flex;
  transform: translateX(calc(var(--index) * -100%));
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel__dots {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

@media (max-width: 600px) {
  .carousel__viewport {
    grid-column: 1 / -1;
  }

  .carousel[data-carousel-anchor] .carousel__prev,
  .carousel[data-carousel-anchor] .carousel__next,
  .carousel__prev,
  .carousel__next {
    grid-row: 2;
    align-self: center;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track,
  .carousel--ready[data-carousel-anchor] .carousel__prev,
  .carousel--ready[data-carousel-anchor] .carousel__next {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Vidéo YouTube légère
   -------------------------------------------------------------------------- */

.youtube-lite {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.youtube-lite__play,
.youtube-lite iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.youtube-lite__play {
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  cursor: pointer;
}

.youtube-lite__play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* recadre aussi les bandes noires des miniatures 4:3 */
}

.youtube-lite__icon {
  position: relative;
  display: grid;
  place-items: center;
}