.img{
    width: 45vw;
    cursor: zoom-in;
}


.lb-image {
    width : 70vw;
    object-fit: contain; /* Conserver les proportions */
}
.images{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.image_div.active{
    background: #00000063;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

li{
    text-decoration: none;
    list-style: none;
}

h1{
    margin-top: 3vw;
    text-align: center;
    font-size: 3vw;
}


h3{
    color: black;
    font-size: 1.5vw;
    margin-bottom: 2vw;
    width: 17vw;
    text-align: center;
}


.images_ligne{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 45vw;
}

.images_ligne img{
    width: 17vw;
    height: 17vw;
    object-fit: cover;
    
}

.images_globales{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img_text{
    text-align: center;
}


.image-wrapper {
  position: relative;
  display: inline-block;
}

.popup-tooltip {
  position: absolute;
  bottom: 100%; /* place la bulle au-dessus de l'image */
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 1vw;
  white-space: nowrap;
  z-index: 10;
  animation: fadeOut 10s forwards;
}


/* flèche */
.popup-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 1200px) {
    
    h1{
        font-size: 4vw;
    }
    
    .img{
        width: 50vw;
    }
    
    h3{
        font-size: 3vw;
        width: 23vw;
        text-align: center;
    }
    .popup-tooltip {
      font-size: 3vw;

    }
    .images_ligne{
        width: 50vw;
    }
    
    .images_ligne img{
        width: 23vw;
        height: 23vw;
    }
    
}

@media (max-width: 750px) {
        
    h1{
        margin-top: 5vw;
        font-size: 7vw;
    }
    
    .img{
        width: 70vw;
        object-fit: cover;
        height: 70vw;
    }
    .images_ligne{
        width: 70vw;
        display: block;
    }
    h3{
        font-size: 6vw;
        width: 50vw;
        text-align: center;
    }
    .popup-tooltip {
      font-size: 6vw;
            left: 50%;

    
    }
    
    .images_ligne img{
        width: 70vw;
        height: 70vw;
    }
    
    .img_text{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
    }
}