/* Importer la police Poppins depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
    background-color: #181a1b;
    color: white; /* Pour que le texte soit lisible sur fond sombre */
    font-family: 'Poppins', sans-serif; /* Utiliser la police Poppins */
}

.container {
    max-width: 1500px; /* Limiter la largeur totale */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 0 20px; /* Ajouter un padding pour éviter que le contenu soit collé au bord */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    height: 60px; /* Définir une hauteur pour la barre de navigation */
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin: 0;
}

nav ul.left {
    justify-content: flex-start;
    align-items: center; /* Aligner les éléments verticalement */
}

nav ul.right {
    justify-content: flex-end;
    align-items: center; /* Aligner les éléments verticalement */
}

nav ul li {
    margin: 0 15px;
    font-size: 1.2em; /* Agrandir le texte */
}

nav ul li a {
    color: white; /* Liens en blanc */
    text-decoration: none; /* Supprimer la décoration par défaut des liens */
    padding: 10px 0; /* Ajouter un padding pour aligner les liens verticalement */
    transition: color 0.3s; /* Transition pour l'effet de survol */
}

nav ul li a:hover {
    color: #b0b0b0; /* Couleur du texte au survol */
}

nav ul li strong {
    color: white; /* Titre en blanc */
    font-size: 2em; /* Agrandir le texte du nom */
}

nav ul li .subtitle {
    color: #b0b0b0; /* Couleur gris clair */
    font-size: 0.8em; /* Taille plus petite pour le sous-titre */
    display: block; /* Afficher le sous-titre en dessous du nom */
}

hr.separator {
    border: none;
    border-top: 0.1px solid white; /* Barre blanche plus fine */
    margin: 0 10px; /* Ajuster les marges pour aligner la ligne */
}

.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto; /* Centrer la galerie */
}

.gallery-item {
    position: relative;
    width: calc(33.33% - 20px); /* Largeur ajustée pour un maximum de trois images par ligne */
    margin: 10px; /* Ajouter une marge pour espacer les images */
    overflow: hidden; /* Masquer les débordements */
}

.gallery img {
    width: 100%;
    height: 300px; /* Hauteur fixe pour toutes les images */
    object-fit: cover;
    transition: transform 0.3s; /* Transition pour l'effet de flou */
}

.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-item:hover::before {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.05); /* Agrandir légèrement l'image pour créer un effet de flou */
    filter: blur(2px); /* Appliquer un léger flou */
}

.gallery .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    display: none;
}

.gallery-item:hover .overlay {
    display: block; /* Afficher le texte "View" au survol */
}

.about-info img {
    filter: invert(100%); /* Changer la couleur du SVG en blanc */
    width: 50px; /* Définir une largeur uniforme pour les icônes SVG */
    height: 50px; /* Définir une hauteur uniforme pour les icônes SVG */
    margin-right: 10px; /* Ajouter un espace entre les icônes */
}

/* Media queries pour rendre les images réactives */
@media (max-width: 768px) {
    .gallery-item {
        width: calc(50% - 20px); /* Deux images par ligne sur les écrans moyens */
    }
}

@media (max-width: 480px) {
    .gallery-item {
        width: calc(100% - 20px); /* Une image par ligne sur les petits écrans */
    }
}

.about-container {
    display: flex;
    justify-content: flex-start; /* Justifier le contenu à gauche */
    align-items: center;
    padding: 20px; /* Ajouter un padding pour éviter que le contenu soit collé au bord */
}

.about-info {
    max-width: 50%;
    font-size: 1.2em; /* Agrandir le texte */
    margin-left: 40px; /* Ajouter une marge à gauche pour augmenter l'écart avec l'image */
    text-align: left; /* Aligner le texte à gauche */
}

.about-image {
    max-width: 45%;
}

.about-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Media queries pour rendre la barre de navigation réactive */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }

    nav ul.left {
        justify-content: center;
        width: 100%;
    }

    nav ul.right {
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }

    nav ul li .subtitle {
        display: none; /* Masquer le sous-titre */
    }
}

/* Media queries pour enlever l'image à gauche en mode responsive */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-image {
        display: none; /* Masquer l'image */
    }

    .about-info {
        margin-left: 0; /* Supprimer la marge à gauche */
        max-width: 100%; /* Utiliser toute la largeur */
    }
}