/* Définition d'un container pour gérer l'affichage */
.container {
  overflow: hidden;
  /* Cache les éléments qui dépassent du container */
}

/* Définition du carousel */
.carousel {
  position: relative;
  /* Le carousel est positionné relativement à son parent */
  /* height: 100vh; */
  /* width: 120vh */
}

/* Définition de l'élément contenant les diapositives */
.carousel-inner {
  display: flex;
  /* Affiche les éléments en ligne */
  overflow: hidden;
  /* Cache les éléments qui dépassent */
  width: 100%;
  height: auto;

  /* Hauteur égale à 100% de la hauteur de la vue */
  flex-wrap: nowrap;
  /* Empêche les éléments de se placer sur plusieurs lignes */
}

/* Définition des diapositives */
.slide {
  flex: 0 0 100%;
  /* Largeur de chaque diapositive est de 100% */
  height: 100%;
  /* Hauteur de chaque diapositive est de 100% */
  transition: 0.5s ease-in-out;
  /* Ajout d'une animation douce pour la transition entre les diapositives */
}

/* Définition de l'affichage de l'image de chaque diapositive */
.slide img {
  width: 100%;
  /* Largeur de l'image est de 100% */
  /* aspect-ratio: 7 / 5; */

  /* Hauteur de l'image est de 100% */
  object-fit: cover;

  /* Couvre tout l'espace disponible */
}

.mediatheque .portrait {
  max-width: 60vh;
  max-height: 100% !important;
}

.portrait .slide img {
  aspect-ratio: 5 / 7;
}

.paysage .slide img {
  aspect-ratio: 7 / 5;
}

/* Définition des boutons de contrôle du carousel */
.carousel-controls {
  position: absolute;
  /* Les boutons sont absolument positionnés */
  z-index: 5;
  /* Ils sont placés au-dessus des autres éléments */
  left: 25%;
  /* La distance à gauche est de 10% */
  right: 25%;
  /* La distance à droite est de 10% */
  /* bottom: 0%; */
  bottom: -4%;
  /* La distance du haut est de 50% */
  display: flex;
  /* Affiche les boutons en ligne */
  justify-content: center;
  /* Espacement égal entre les boutons */
}

.portrait .carousel-controls {
  left: 13%;
  right: 13%;
}

.A4 .carousel-controls {
  left: 6%;
  right: 6%;
}

#prev,
#next,
#start,
#stop {
  border-radius: 30%;
  background-color: var(--bs-gris-light);
  padding: auto;
}

#start {
  margin-right: 18%;
}

#stop {
  margin-left: 18%;
}

.mediatheque .carousel-controls {
  left: 0;
  right: 0;
  justify-content: space-between;
}

.fragments .carousel-controls {
  left: 15%;
  right: 15%;
  justify-content: space-between;
}

.mediatheque #start {
  margin-right: 8%;
}

.mediatheque #stop {
  margin-left: 8%;
}

/* Définition des points de contrôle */
.carousel-dots {
  position: absolute;
  /* Les points sont absolument positionnés */
  z-index: 5;
  /* Ils sont placés au-dessus des autres éléments */
  left: 45%;
  /* La distance à gauche est de 50% */
  right: 50%;
  /* La distance à droite est de 50% */
  bottom: -4%;
  /*La distance du bas est de 10% */
  display: flex;
  /* Affiche les points en ligne */
  justify-content: center;
  /* Centrage des points */
  width: 10%;
}

/* Style des points de contrôle */
.carousel-dots .dot {
  border-radius: 50%;
  /* Les points sont en forme de cercle */
  margin: 5%;
  /* Ajout d'un margin pour un meilleur contrôle */
  cursor: pointer;
  /* Curseur en forme de main pour un meilleur contrôle */
}

/* Styles pour les points de navigation du carrousel */
.carousel-dots .active {
  /* Border de 10px pour le point actif */
  border: 10px solid #761530 !important;
  /* !important permet de surcharger les autres styles éventuels */
}

.carousel-dots .inactive {
  /* Border de 10px pour les points inactifs */
  /* border: 10px solid #2596be; */
  border: 10px solid rgb(190, 190, 190);
}

@media (max-width: 768px) {
  .carousel-dots {
    left: 40%;
    right: 40%;
    bottom: -4%;
    /*La distance du bas est de 10% */
    width: 20%;
  }
  .carousel-dots .dot {
    margin: 6%;
  }

  /* Styles pour les points de navigation du carrousel */
  .carousel-dots .active {
    border: 7px solid #761530 !important;
  }

  .carousel-dots .inactive {
    border: 7px solid rgb(190, 190, 190);
  }

  .A4 .carousel-controls,
  .portrait .carousel-controls,
  .paysage .carousel-controls,
  .carousel-controls {
    left: 25%;
    right: 25%;
    justify-content: space-between;
    flex-direction: space-between;
  }

  .mediatheque .carousel-controls {
    left: 5%;
    right: 5%;
    justify-content: space-between;
    flex-direction: space-between;
  }

  #stop img,
  #start img {
    width: 50%;
    margin: auto;
    padding: auto;
  }
}

@media (max-width: 576px) {
  .A4 .carousel-controls,
  .portrait .carousel-controls,
  .paysage .carousel-controls,
  .carousel-controls {
    bottom: -4.5%;
  }
}

@media (max-width: 968px) {
  .fragments .carousel-controls {
    left: 0%;
    right: 0%;
    justify-content: space-between;
    flex-direction: space-between;
  }
}