/* fichier css */

body {

  background: bdbdbd;
}

.topnav {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999 !important;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #48AAAD;
  color: white;
}

.topnav .icon {
  display: none;
}

#langue {
  margin-right: 50px;
}


#entete {
  background-color: #d7cfcf;
  margin-top: 40px;

}



#entete {
  background: url(scababe.JPG);
  background-size: cover;
  background-position: center; /* Centrer l'image pour qu'elle reste bien placée */
  background-repeat: no-repeat; /* Empêche la répétition de l'image */
  background-attachment: fixed;
  background-color: #bdbdbd;
  height: 300px;
 }


#entete  p {
    font-family: "Open Sans", sans-serif;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    margin: 50px;
    background-color: rgba(0, 0, 0, 0.7);
    margin-top: 40px;
    font-size: 2vw;

    
  }
  @media (max-width: 480px) {
    #entete p {
        font-size: 4vw; /* Taille de police plus grande pour les smartphones */
        margin: 20px; /* Moins de marge pour les petits écrans */
    }
}

#corps-texte{
  background-color: #bdbdbd;
  margin-top: 50px;
}

.w3-display-container img{

  opacity: 1.0;
  transition: 0.3s;
  border-radius: 8px;
  
}

.w3-display-container img:hover {
    opacity: 0.5;
    transition: 0.3s;

  }



#corps-texte h2{

  margin-top: 20px;
  margin-left: 30px;
  font-size: 20px;
}


#pied-page i{
  width: 30px;
}

#centre svg{
  width: 14px;
  margin-right: 10px;
  background-color: white;
  border-color: teal;
  fill: teal;


}




.w3-quarter img{
  
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  height: 350px; /* Hauteur fixe pour toutes les images */
  object-fit: cover; 
  align-content: center;
  

}

.w3-quarter img:hover{opacity: 0.6; transition: 0.3s}

.w3-left {
  margin-top: 30px;
  margin-bottom: 2px;

}

/* Style du modal */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Modal invisible au début */
  transform: scale(0.8); /* Commence avec une échelle réduite */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Transitions pour l'opacité et l'échelle */
  z-index: 1000;
}

/* Modal visible avec transition */
#modal.modal-visible {
  opacity: 1; /* Modal devient visible */
  transform: scale(1); /* Retourne à l'échelle normale */
}

/* Style de l'image dans le modal */
.modal-img {
  max-width: 90%;
  max-height: 80%;
  transform: scale(0.8); /* Commence avec une échelle réduite */
  transition: transform 0.3s ease; /* Transition de l'image */
}

/* Classe qui active l'agrandissement de l'image */
.modal-img.image-visible {
  transform: scale(1); /* Agrandissement de l'image à sa taille normale */
}

/* Légende du modal */
.modal-caption {
    font-family: 'Open Sans', sans-serif;
    font-size: 2vw;  /* Utilisation de la largeur du viewport pour ajuster la taille */
    text-align: center;
    padding: 10px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%); /* Centrage horizontal */
    width: 90%; /* Largeur de la légende ajustée pour être responsive */
    box-sizing: border-box;
}


/* Ajustement pour les écrans très petits (mobiles en portrait) */
@media (max-width: 480px) {
    .modal-caption {
        font-size: 5vw;  /* Taille encore plus grande pour les très petits écrans */
        width: 95%; /* Largeur également ajustée pour un meilleur rendu sur les petits écrans */
    }
}


/* Légende visible après l'animation */
#modal.modal-visible .modal-caption {
  opacity: 1; /* Légende devient visible */
}

/* Style du bouton de fermeture */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  z-index: 1001; /* Le bouton doit être au-dessus du modal */
}