.galerie {
    display:grid; /* Affichage en grille */
    grid-template-columns: auto auto auto auto; /* Affiche la grille sur 4 colonnes de largeur dépendant du contenu */
    gap: 10px; /* Espacement entre les images */
    justify-content: center; /* Centre la galerie sur la page */
    padding:150px;
  }
  
  .galerie img {
    border-radius: 10px; /* Ajoute des coins arrondis, parce que j'aime bien... */
    max-width:100%; /* Assure que les images ne sont jamais agrandies */
  }
  
  .galerie img.grande {
    grid-row: span 2; /* Place les grandes images sur deux lignes */
  }

  /* Style de la modale */
.modal {
    display: none; /* Cacher la modale par défaut */
    position: fixed;
    z-index: 1; /* Assure que la modale est par-dessus le contenu */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); /* Fond sombre transparent */
}

.modal-content {
    display: block;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #f1f1f1;
    text-decoration: none;
    cursor: pointer;
}
/* Modale : pour agrandir l'image */
#imgModal {
    display: none; /* Cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond sombre semi-transparent */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* Image dans le modal */
#imgFull {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain; /* Garde l'image dans ses proportions */
    border-radius: 10px;
    display: block; /* Assure un affichage cohérent */
    margin: auto;
}

/* Texte sur l'image dans le modal */
#modalCaption {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.2rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
    padding: 10px 20px;
    border-radius: 5px;
}

/* Close button */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover, .close:focus {
    color: #f1f1f1;
}

/* Pour les écrans très larges (plus de 2000px) */
@media (min-width: 2000px) {
    .galerie {
        grid-template-columns: repeat(5, 1fr); /* 5 colonnes pour les écrans très larges */
        padding: 200px; /* Augmente l'espace intérieur */
    }
}

/* Pour les écrans larges (entre 1600px et 2000px) */
@media (max-width: 2000px) and (min-width: 1600px) {
    .galerie {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes pour les écrans larges */
        padding: 150px; /* Garde un padding large */
    }
}

/* Pour les écrans intermédiaires (entre 1400px et 1600px) */
@media (max-width: 1600px) and (min-width: 1400px) {
    .galerie {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes pour un écran plus petit que 1600px */
        padding: 120px; /* Réduit le padding */
    }
}

/* Pour les écrans moyens (entre 1200px et 1400px) */
@media (max-width: 1400px) and (min-width: 1200px) {
    .galerie {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
        padding: 100px; /* Réduit le padding */
    }
}

/* Pour les écrans intermédiaires (entre 1025px et 1200px) */
@media (max-width: 1200px) and (min-width: 1025px) {
    .galerie {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
        padding: 80px; /* Réduit le padding */
    }
}

/* Pour les écrans moyens (tablettes) */
@media (max-width: 1024px) {
    .galerie {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
        padding: 50px; /* Réduit l'espace intérieur */
    }
}

/* Pour les petits écrans (smartphones) */
@media (max-width: 768px) {
    .galerie {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
        padding: 20px; /* Réduit l'espace intérieur */
    }
}

/* Pour les très petits écrans (smartphones en portrait) */
@media (max-width: 480px) {
    .galerie {
        grid-template-columns: 1fr; /* 1 seule colonne */
        padding: 10px; /* Réduit l'espace intérieur */
    }
}