.conteneur-promotion{
  margin: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.promotion{
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    overflow-x: auto;
}

.promotion-scrollable{
  justify-content: flex-start;
}

.promo:hover,.more a:hover{
    transform: scale(1.1);
}

.promo{
  display: inline-block;
    box-shadow: 0rem 0rem 0.5rem black;
    padding: 2rem;
    color: var(--light-blue);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 500ms ease-in-out;
    flex: 0 0 auto;
    margin-right: 0.5rem
}

.choix{
    color: white;
    background-color: var(--light-blue);
}

.galerie img{
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
  }

.galerie {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: 300px 300px 300px; */
    grid-auto-rows: 300px;
    gap: 15px;
    background-color: transparent; /* ou background-color: #f5f5f5; (choisissez une couleur similaire à votre arrière-plan) */
}

.galerie a {
  background-color: rgb(50, 50, 50,0.4);
}

.galerie a img{
  width: 100%; /* Assure que les images occupent toute la largeur du conteneur */
  height: 100%; /* Assure que les images occupent toute la hauteur du conteneur */
  object-fit: contain; /* Ajuste les images pour qu'elles s'insèrent complètement dans leur conteneur sans déformer leur forme */
  object-position: center; 
}
  
.lien-conteneur-image {
    position: relative;
    /* background-color: blueviolet; */
  }
  
  .photo-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
  }
  
  .lien-conteneur-image:hover .photo-hover {
    display: flex;
  }

  @media screen and (max-width: 768px){
    .galerie{
        grid-template-columns: 1fr 1fr;
        gap :15px
    }
    .promo{
        padding: 1rem;
  }
  }

  @media screen and (max-width: 420px){
    .galerie{
        grid-template-columns: 1fr;
        gap :15px
    }
  }

  .more{
    margin-top: 2rem;
    text-align: end;
  }

  .more a{
    display: inline-block;
    box-shadow: 0rem 0rem 0.5rem black;
    padding: 0.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 500ms ease-in-out;
    text-decoration: none;
  }

/* .slider-container {
    width: 50%;
    height: 100vh;
    overflow: hidden;
  }
  
  .slider-content {
    display: flex;
    width: 20%; /* Ajustez la largeur en fonction du nombre de slides */
    /* transition: transform 0.5s ease;
  }
  
  .slide {
    flex: 1;
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #ccc;
  } */ 

 
  






  /* Styles pour la fenêtre modale */
.modal {
  display: none; /* Masquer la fenêtre modale par défaut */
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: rgba(0,0,0,0.7); /* Couleur de fond semi-transparente */
}

.modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 10%;
  margin: auto;

  width: 90%; /* Largeur de 80% de la page */
    height: 80vh; /* 80% de la hauteur de la vue */
    max-width: 900px; /* Largeur maximale de la fenêtre modale */
    max-height: 80vh; /* Hauteur maximale de la fenêtre modale */
    background-color:rgba(0,0,0,0.7); /* Fond blanc */
}

.close__modal {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 50px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}

.close__modal:hover,
.close__modal:focus {
  color: aquamarine;
  text-decoration: none;
  cursor: pointer;
}

.modal-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ajuste les images pour qu'elles s'insèrent complètement dans leur conteneur sans déformer leur forme */
  object-position: center; 
  
  max-width: 100%; /* La largeur maximale de l'image est de 100% de la largeur du conteneur */
    max-height: 100%; /* La hauteur maximale de l'image est de 100% de la hauteur du conteneur */
}
.modal-image {
  transition: width 4s ease-in-out;
}





.loading-icon {
  position: absolute;
  font-size: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black; /* Couleur de l'icône de chargement */
}

.promo:active{
  .gallery-loading{
    animation: animation-chargement 1s ease-in-out 500ms 5 alternate-reverse ;
  }
}

@keyframes animation-chargement {
  to{
    opacity: 0;
  }
  from{ 
    opacity: 1;
  }
  
}


/* loader */
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;



}


.load {
  width: 30vh;
  height: 22.5vh;
  
  display: flex;
  justify-content: space-evenly;
}
.load__bar {
  background-color: #15DEA5;
  height: 100%;
  width: 3vh;
  animation: bars 1000ms backwards infinite ease-in-out alternate;
}
.load__bar--1 {
  animation-delay: 200ms;
}
.load__bar--1-inv {
  animation-delay: 200ms;
  animation-direction: alternate-reverse;
  background-color: #0E397F;
}
.load__bar--2 {
  animation-delay: 400ms;
}
.load__bar--2-inv {
  animation-delay: 400ms;
  animation-direction: alternate-reverse;
  background-color: #0E397F;
}
.load__bar--3 {
  animation-delay: 600ms;
}
.load__bar--3-inv {
  animation-delay: 600ms;
  animation-direction: alternate-reverse;
  background-color: #0E397F;
}
.load__bar--4 {
  animation-delay: 800ms;
}
.load__bar--4-inv {
  animation-delay: 800ms;
  animation-direction: alternate-reverse;
  background-color: #0E397F;
}
.load__bar--5 {
  animation-delay: 1000ms;
}
.load__bar--5-inv {
  animation-delay: 1000ms;
  animation-direction: alternate-reverse;
  background-color: #0E397F;
}
.load__bar:hover {
  animation-play-state: paused;
}

@keyframes bars {
  0% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes disparait {
  0% {

    opacity: 1;
    
  }
  50%{
    opacity: 0.5;
  }
  80%{
    opacity: 0.8;
  }
  90%{
    opacity: 0.9;
  }
  95%{
    opacity: 0;
  }
  100% {
    opacity: 0;
    position:fixed ;
    left: 50%;
    right: 50%;
   
  
   
    /* display: none; */
 
    
    /* display: none; */
  
  }
}

@keyframes apparait{
  0% {
    display: none;
    opacity: 0;
    
  }
  100% {
    display: grid;
    opacity: 1;
   
  }

}
.container-visible{
 
  animation: disparait 1s ease-in-out 2.5s both;


}
.galerie-apparait{
  animation: apparait 1s ease-in-out 3s both;
}
.galerie-visible{
  display: none;
 
} 

/*# sourceMappingURL=loader.css.map */