.folio-grid {
    display: grid; /* Utilise un layout en grille pour organiser les éléments */
    grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes de taille égale */
    gap: 20px; /* Espace de 20 pixels entre les éléments de la grille */
}

.folio-item {
    position: relative; /* Permet de positionner des éléments enfants de manière absolue par rapport à cet élément */
    overflow: hidden; /* Cache les éléments qui débordent (comme les images qui s'agrandissent au survol) */
    border-radius: 15px; /* Arrondit les coins de l'élément */
    cursor: pointer; /* Change le curseur en pointeur pour indiquer que l'élément est cliquable */
    text-align: center; /* Centre le texte à l'intérieur de l'élément */
    transition: transform 0.3s ease; /* Applique une transition douce lors du changement de transformation */
}

.folio-item img {
    width: 100%; /* L'image occupe 100% de la largeur de l'élément parent */
    border-radius: 15px; /* Arrondit les coins de l'image */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transition douce pour les changements de transformation et d'opacité */
}

.folio-item:hover img {
    transform: scale(1.1); /* Agrandit l'image de 10% au survol */
    opacity: 0.8; /* Réduit l'opacité de l'image à 80% au survol */
}

.folio-item h4, .folio-item p {
    margin: 10px 0 5px; /* Marge autour des éléments de texte : 10px en haut, 5px en bas */
    font-weight: 600; /* Applique une graisse de police pour rendre le texte plus visible */
}

/* Popup styling */
.popup {
    display: none; /* Masque le popup par défaut */
    position: fixed; /* Positionne le popup par rapport à la fenêtre du navigateur */
    top: 50%; /* Centre le popup verticalement */
    left: 50%; /* Centre le popup horizontalement */
    transform: translate(-50%, -50%); /* Ajuste la position pour que le centre du popup soit au centre de l'écran */
    background-color: #000; /* Fond noir pour le popup */
    color: #fff; /* Couleur du texte blanche */
    padding: 30px; /* Espace intérieur de 30 pixels */
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5); /* Ombre autour du popup pour un effet de profondeur */
    border-radius: 10px; /* Arrondit les coins du popup */
    max-width: 90%; /* Limite la largeur à 90% de la fenêtre */
    z-index: 1000; /* Assure que le popup soit au-dessus des autres éléments */
}

.popup-content {
    position: relative; /* Permet de positionner des éléments enfants par rapport à ce conteneur */
}

.close-btn {
    position: absolute; /* Permet de positionner le bouton de fermeture à un endroit spécifique */
    top: 5px; /* Positionne à 5 pixels du haut */
    right: 10px; /* Positionne à 10 pixels de la droite */
    font-size: 20px; /* Définit la taille de la police pour le bouton */
    cursor: pointer; /* Change le curseur en pointeur pour indiquer que c'est cliquable */
}

.popup-content h4 {
    color: gold; /* Titre du popup en couleur or */
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .folio-grid {
        grid-template-columns: 1fr; /* Pour les écrans de moins de 768 pixels, affiche une seule colonne */
    }
}