/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#div_carousel {
  user-select: none;         /* empêche la sélection de texte */
  -webkit-user-select: none; /* pour Safari */
  -moz-user-select: none;    /* pour Firefox */
  -ms-user-select: none;     /* pour Edge/IE */
  cursor: pointer;           /* montre que la div est cliquable */
}

#div_carousel * {
  cursor: pointer;           /* même comportement pour les enfants */
}

.zoom-effect {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.zoom-effect img {
  transition: transform 0.8s; /* Durée de l'effet de transition */
}

.zoom-effect:hover img {
  transform: scale(1.1); /* Applique un facteur d'échelle de 1.2 pour zoomer l'image */
}

.close-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index:9;
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
  display: none;
}

.carousel-item.active {
  display: block;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.carousel-indicators {
  text-align: center;
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dot.active {
  background-color: #717171;
}