/*
 * Carrousel (D148) — feuille front du module, chargée sur toutes les pages.
 *
 * Avant initialisation (ou sans JS) : slides en ligne plutôt qu'empilées, pour limiter
 * le décalage de mise en page. Après initialisation, Swiper (thème ou module, D149)
 * prend la main. Les valeurs reprennent les réglages par défaut du bloc.
 */
.kwk-carrousel {
  position: relative;
}

.kwk-carrousel:not(.swiper-initialized) {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.kwk-carrousel:not(.swiper-initialized) > .kwk-carrousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

@media (min-width: 577px) {
  .kwk-carrousel:not(.swiper-initialized) > .kwk-carrousel-slide {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (min-width: 769px) {
  .kwk-carrousel:not(.swiper-initialized) {
    gap: 24px;
  }

  .kwk-carrousel:not(.swiper-initialized) > .kwk-carrousel-slide {
    flex-basis: calc((100% - 48px) / 3);
  }
}

/* Slide avec lien : `<a>` entièrement cliquable, sans habillage de lien. */
a.kwk-carrousel-slide {
  display: flex;
  color: inherit;
  text-decoration: none;
}

/* Slides de hauteur égale une fois Swiper actif. */
.kwk-carrousel .swiper-slide {
  height: auto;
}

/* Pagination sous les slides plutôt que par-dessus. */
.kwk-carrousel.swiper:has(> .swiper-pagination) {
  padding-bottom: 32px;
}

.kwk-carrousel > .swiper-pagination {
  bottom: 0;
}

/* Flèches : pictogramme SVG du thème Origin (icônes natives Swiper désactivées). */
.kwk-carrousel > .swiper-button {
  cursor: pointer;
}

.kwk-carrousel > .swiper-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/*
 * Vues sans slider (grille, réglage par vue du panneau carrousel).
 * Généré par `cssGrilleCarrousel('.kwk-carrousel')` (_dev/src/blocks/media/carrouselModele.ts) :
 * ne pas modifier à la main, le test `carrousel.test.ts` vérifie la copie.
 */
@media (max-width: 576px) {
  .kwk-carrousel[data-kwk-grille~="mobile"]:not(.swiper),
  .kwk-carrousel[data-kwk-grille~="mobile"] > .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--kwk-grille-gap, 0px) !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .kwk-carrousel[data-kwk-grille~="mobile"].swiper {
    padding-bottom: 0;
  }

  .kwk-carrousel[data-kwk-grille~="mobile"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-grille~="mobile"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 0 calc((100% - (var(--kwk-grille-n, 1) - 1) * var(--kwk-grille-gap, 0px)) / var(--kwk-grille-n, 1)) !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-auto"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-grille~="mobile-auto"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 1 auto !important;
  }

  .kwk-carrousel[data-kwk-grille~="mobile"] > .swiper-pagination,
  .kwk-carrousel[data-kwk-grille~="mobile"] > .swiper-button {
    display: none !important;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-1"] {
    --kwk-grille-n: 1;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-2"] {
    --kwk-grille-n: 2;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-3"] {
    --kwk-grille-n: 3;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-4"] {
    --kwk-grille-n: 4;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-5"] {
    --kwk-grille-n: 5;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-6"] {
    --kwk-grille-n: 6;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-gap-0"] {
    --kwk-grille-gap: 0px;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-gap-8"] {
    --kwk-grille-gap: 8px;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-gap-16"] {
    --kwk-grille-gap: 16px;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-gap-24"] {
    --kwk-grille-gap: 24px;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-gap-32"] {
    --kwk-grille-gap: 32px;
  }

  .kwk-carrousel[data-kwk-grille~="mobile-gap-48"] {
    --kwk-grille-gap: 48px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .kwk-carrousel[data-kwk-grille~="tablette"]:not(.swiper),
  .kwk-carrousel[data-kwk-grille~="tablette"] > .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--kwk-grille-gap, 0px) !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .kwk-carrousel[data-kwk-grille~="tablette"].swiper {
    padding-bottom: 0;
  }

  .kwk-carrousel[data-kwk-grille~="tablette"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-grille~="tablette"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 0 calc((100% - (var(--kwk-grille-n, 1) - 1) * var(--kwk-grille-gap, 0px)) / var(--kwk-grille-n, 1)) !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-auto"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-grille~="tablette-auto"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 1 auto !important;
  }

  .kwk-carrousel[data-kwk-grille~="tablette"] > .swiper-pagination,
  .kwk-carrousel[data-kwk-grille~="tablette"] > .swiper-button {
    display: none !important;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-1"] {
    --kwk-grille-n: 1;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-2"] {
    --kwk-grille-n: 2;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-3"] {
    --kwk-grille-n: 3;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-4"] {
    --kwk-grille-n: 4;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-5"] {
    --kwk-grille-n: 5;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-6"] {
    --kwk-grille-n: 6;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-gap-0"] {
    --kwk-grille-gap: 0px;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-gap-8"] {
    --kwk-grille-gap: 8px;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-gap-16"] {
    --kwk-grille-gap: 16px;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-gap-24"] {
    --kwk-grille-gap: 24px;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-gap-32"] {
    --kwk-grille-gap: 32px;
  }

  .kwk-carrousel[data-kwk-grille~="tablette-gap-48"] {
    --kwk-grille-gap: 48px;
  }
}

@media (min-width: 769px) {
  .kwk-carrousel[data-kwk-grille~="desktop"]:not(.swiper),
  .kwk-carrousel[data-kwk-grille~="desktop"] > .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--kwk-grille-gap, 0px) !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .kwk-carrousel[data-kwk-grille~="desktop"].swiper {
    padding-bottom: 0;
  }

  .kwk-carrousel[data-kwk-grille~="desktop"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-grille~="desktop"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 0 calc((100% - (var(--kwk-grille-n, 1) - 1) * var(--kwk-grille-gap, 0px)) / var(--kwk-grille-n, 1)) !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-auto"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-grille~="desktop-auto"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 1 auto !important;
  }

  .kwk-carrousel[data-kwk-grille~="desktop"] > .swiper-pagination,
  .kwk-carrousel[data-kwk-grille~="desktop"] > .swiper-button {
    display: none !important;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-1"] {
    --kwk-grille-n: 1;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-2"] {
    --kwk-grille-n: 2;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-3"] {
    --kwk-grille-n: 3;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-4"] {
    --kwk-grille-n: 4;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-5"] {
    --kwk-grille-n: 5;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-6"] {
    --kwk-grille-n: 6;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-gap-0"] {
    --kwk-grille-gap: 0px;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-gap-8"] {
    --kwk-grille-gap: 8px;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-gap-16"] {
    --kwk-grille-gap: 16px;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-gap-24"] {
    --kwk-grille-gap: 24px;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-gap-32"] {
    --kwk-grille-gap: 32px;
  }

  .kwk-carrousel[data-kwk-grille~="desktop-gap-48"] {
    --kwk-grille-gap: 48px;
  }
}

/*
 * Slides visibles « Auto » (réglage par vue du panneau carrousel) : chaque slide garde sa largeur.
 * Généré par `cssSlidesAutoCarrousel('.kwk-carrousel')` (_dev/src/blocks/media/carrouselModele.ts) :
 * ne pas modifier à la main, le test `carrousel.test.ts` vérifie la copie.
 */
@media (max-width: 576px) {
  .kwk-carrousel[data-kwk-slides-auto~="mobile"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-slides-auto~="mobile"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 0 auto !important;
    width: auto;
    max-width: 100%;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .kwk-carrousel[data-kwk-slides-auto~="tablette"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-slides-auto~="tablette"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 0 auto !important;
    width: auto;
    max-width: 100%;
  }
}

@media (min-width: 769px) {
  .kwk-carrousel[data-kwk-slides-auto~="desktop"] > .kwk-carrousel-slide,
  .kwk-carrousel[data-kwk-slides-auto~="desktop"] > .swiper-wrapper > .kwk-carrousel-slide {
    flex: 0 0 auto !important;
    width: auto;
    max-width: 100%;
  }
}