/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/carousel/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* =========================
   Base (toutes variantes)
   ========================= */
.carousel-container {
  position: relative;
  isolation: isolate; /* évite les z-index surprises */
  width: 100%;
  height: 500px;
  overflow: hidden; /* clip global si pas de vignettes */
}
.carousel-container .carousel-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  will-change: transform;
  overflow: hidden; /* IMPORTANT: la piste clippe ses enfants */
  z-index: 1;
}
.carousel-container .carousel-slide {
  flex: 0 0 100%; /* chaque slide = largeur de la piste */
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}
.carousel-container .carousel-media {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.carousel-container .carousel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(52, 87, 95, 0.8) 30%, rgba(52, 87, 95, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.carousel-container .carousel-caption {
  background: rgba(0, 0, 0, 0.747) !important;
  color: #fff;
  padding: 1.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border-top 0.2s ease-in-out;
  transform-origin: center;
  transform: scale(1);
  border-top: 2px solid transparent;
}
.carousel-container .carousel-caption h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: #fff;
}
.carousel-container .carousel-caption p {
  margin: 0;
  font-size: 1rem;
  padding-right: 10rem;
}
.carousel-container .carousel-caption a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.9rem;
}
.carousel-container .carousel-slide:hover .carousel-caption {
  transform: scale(1.03);
  background-color: rgba(0, 0, 0, 0.85);
  border-top: 2px solid #00aae7;
}
.carousel-container .carousel-navigation {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}
.carousel-container .carousel-navigation button {
  pointer-events: all;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.215);
  color: #00aae7;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  cursor: pointer;
}
.carousel-container .carousel-navigation button:hover {
  background: #e5f5fb;
  color: #000;
  font-weight: 700;
}
.carousel-container .carousel-fullscreen {
  display: none;
}

/* =========================
   Classic + vignettes
   ========================= */
.carousel-container.style-classic.has-thumbs {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: start;
  overflow: visible;
}
.carousel-container.style-classic.has-thumbs .carousel-thumbs-wrap {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* IMPORTANT: pas de height/max-height ici */
}
.carousel-container.style-classic.has-thumbs .carousel-slides {
  z-index: 1;
}
.carousel-container.style-classic.has-thumbs.thumbs-right {
  grid-template-columns: 1fr 110px;
}
.carousel-container.style-classic.has-thumbs.thumbs-right .carousel-thumbs-wrap {
  grid-column: 2;
}
.carousel-container.style-classic.has-thumbs.thumbs-right .carousel-slides {
  grid-column: 1;
}
.carousel-container.style-classic.has-thumbs .thumbs-prev, .carousel-container.style-classic.has-thumbs .thumbs-next {
  height: 28px;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  margin: 2px 0;
  padding: 4px 0;
}
.carousel-container.style-classic.has-thumbs p {
  margin: 0;
  font-size: 1rem;
  padding-right: 0rem;
}

/* ===== Limiter la vue à 4 vignettes =====
   (Ce bloc DOIT être en dehors et après le bloc ci-dessus) */
.carousel-container.style-classic.has-thumbs {
  --thumb-size: 84px !important;
  --thumb-gap: 6px !important;
  --thumb-visible: 4 !important;
}

.carousel-container.style-classic.has-thumbs .carousel-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  background-size: cover;
  background-position: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.75;
}

.carousel-container.style-classic.has-thumbs .carousel-thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.carousel-container.style-classic.has-thumbs .carousel-thumbs {
  display: flex;
  flex-direction: column;
  row-gap: var(--thumb-gap);
  flex: 0 0 auto; /* ne pas grandir */
  height: calc(var(--thumb-visible) * var(--thumb-size) + (var(--thumb-visible) - 1) * var(--thumb-gap)) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  box-sizing: content-box;
  /* cacher scrollbar mais garder le scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-container.style-classic.has-thumbs .carousel-thumbs::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* =========================
   BOOK (onglets fermés + carte ouverte full-texte)
   ========================= */
.carousel-container.style-book {
  perspective: 1200px;
  overflow: visible;
  height: auto;
  /* piste */
  /* ---------- Onglets (fermés) ---------- */
  /* voisins (effet 3D léger) */
  /* ---------- Carte (ouverte) ---------- */
  /* pas de flèches en mode book (nav au clic) */
  /* responsive */
}
.carousel-container.style-book .carousel-slides {
  display: flex;
  gap: 12px;
  transform-style: preserve-3d;
  width: 100%;
}
.carousel-container.style-book .carousel-slide {
  display: block; /* <<< neutralise le flex hérité */
  flex: 0 0 50px; /* largeur onglet fermé */
  height: 360px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  /* image d’onglet (via --slide-bg dans save.js enfant) */
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transform: rotateY(-16deg);
  transform-origin: left center;
  transition: transform 0.45s ease, flex-basis 0.45s ease, max-width 0.45s ease;
  /* voile sombre pour lisibilité du titre */
  /* Titre vertical (rotation fiable même avec 3D) */
  /* pas de carte en onglet fermé */
}
.carousel-container.style-book .carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.116), rgba(0, 0, 0, 0.55));
  z-index: 1;
}
.carousel-container.style-book .carousel-slide .carousel-tab {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  place-items: end;
  padding: 0rem 1.4rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.carousel-container.style-book .carousel-slide .carousel-tab__label,
.carousel-container.style-book .carousel-slide .carousel-tab > * {
  transform: rotate(-90deg);
  transform-origin: left;
  white-space: nowrap;
  line-height: 2;
}
.carousel-container.style-book .carousel-slide .carousel-card {
  display: none;
}
.carousel-container.style-book .carousel-slide.slide-before {
  transform: rotateY(-26deg);
}
.carousel-container.style-book .carousel-slide.slide-after {
  transform: rotateY(12deg);
}
.carousel-container.style-book .carousel-slide.slide-current {
  flex: 0 0 380px; /* largeur de la carte */
  max-width: 420px;
  transform: rotateY(0deg);
  z-index: 3;
  /* l’onglet disparaît */
  /* retire le voile */
  background-image: none; /* plus d’image d’onglet */
  /* pas d’image en haut → le texte prend toute la largeur */
  /* annule la caption “overlay” du style de base */
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-tab {
  display: none;
}
.carousel-container.style-book .carousel-slide.slide-current::before {
  display: none;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  background: rgba(0, 0, 0, 0.687); /* texte plein cadre */
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-media {
  display: none !important;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption {
  position: static !important;
  margin: 0 0 !important;
  background: transparent !important;
  padding: 20px !important;
  padding-right: 20px !important; /* supprime le 10rem hérité */
  border-radius: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 0.5rem;
  overflow: auto;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption h3 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption p {
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  text-justify: distribute;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption .carousel-link {
  margin-top: 0.6rem;
  color: #fff;
  text-decoration: underline;
}
.carousel-container.style-book .carousel-navigation {
  display: none;
}
@media (max-width: 860px) {
  .carousel-container.style-book .carousel-slide {
    height: 400px;
  }
  .carousel-container.style-book .carousel-slide.slide-current {
    flex-basis: 400px;
  }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
  .carousel-container {
    height: 400px !important;
  }
  .carousel-container .carousel-slide {
    height: 400px !important;
    background: rgba(0, 0, 0, 0.747) !important;
  }
  .carousel-container .carousel-caption {
    position: relative;
    padding: 1rem;
  }
  .carousel-container .carousel-navigation {
    display: none !important;
    position: static;
    justify-content: center;
    margin-top: 1rem;
  }
  .carousel-container .carousel-caption p {
    padding-right: 4rem;
  }
}
/* 1) Masquer le slide derrière la colonne de vignettes */
.carousel-container.style-classic.has-thumbs .carousel-thumbs-wrap {
  background: rgba(10, 10, 10, 0.85); /* opacifie la colonne */
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  border-radius: 8px;
  padding: 4px 0;
}

/* Option: petits pads pour séparer visuellement */
.carousel-container.style-classic.has-thumbs .carousel-thumbs {
  padding: 6px 0;
}

/* 2) Sécurité clipping et largeur des slides */
.carousel-container .carousel-slides {
  overflow: hidden; /* clippe fermement */
}

.carousel-container .carousel-slide {
  flex: 0 0 100%;
  min-width: 0; /* évite tout débordement/layout shift */
  box-sizing: border-box;
}

/* 3) Évite que des marges internes créent un décalage perçu */
.carousel-container .carousel-caption {
  pointer-events: auto;
}

/* 4) Quand thumbs à droite, même rendu opaque */
/* BOOK — slide ouvert : image visible + bande sombre sous le texte */
.carousel-container.style-book .carousel-slide.slide-current .carousel-card {
  background: transparent !important; /* plus de fond noir plein cadre */
  position: relative; /* pour positionner la caption */
}

.carousel-container.style-book .carousel-slide.slide-current .carousel-media {
  display: block !important; /* re-montre l’image */
  height: 100%; /* l'image occupe toute la carte */
  background-size: cover;
  background-position: center;
}

/* ne pas assombrir toute l’image (on garde juste la bande sous le texte) */
.carousel-container.style-book .carousel-slide.slide-current .carousel-media::after {
  display: none !important;
}

.carousel-container.style-book .carousel-slide.slide-current .carousel-caption {
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0 !important;
  padding: 18px 20px !important;
  border-radius: 0 0 16px 16px;
  z-index: 2;
  /* choisis 16, 20, 24… */
  /* au lieu de 1rem */
  /* ajuste la valeur */
  /* bande sombre uniquement sous le texte */
  background: rgba(0, 0, 0, 0.747) !important;
  /* neutralise le padding des flèches du classic */
  padding-right: 20px !important;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption .carousel-container.style-book {
  --book-gap: 20px !important;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption .carousel-container.style-book .carousel-slides {
  gap: var(--book-gap);
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption .carousel-container.style-classic.has-thumbs {
  gap: 1.5rem;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption .carousel-container {
  --classic-gap: 12px;
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption .carousel-container.style-classic .carousel-track {
  -moz-column-gap: var(--classic-gap);
       column-gap: var(--classic-gap);
}
.carousel-container.style-book .carousel-slide.slide-current .carousel-caption .carousel-container.style-classic .carousel-slide {
  flex: 0 0 calc(100% - var(--classic-gap));
}

.carousel-slide .carousel-link {
  position: absolute;
  inset: 0;
  /* pas de background, juste couche cliquable */
  text-indent: -9999px; /* ou remplace par un vrai bouton visible */
}

.carousel-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  overflow: hidden;
}

.carousel-slides > * {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative; /* pour les captions, etc. */
}

.carousel-container.style-classic.has-thumbs .carousel-thumbs-wrap {
  background: rgba(0, 0, 0, 0.687);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.carousel-slides {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.carousel-container * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-container *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/*# sourceMappingURL=style-index.css.map*/