/* Général */ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --gris: #D2D2D2;
    --blanc: #FFFFFF;
    --noir: #000000;      
}

html h1 {
    font-family: 'Sedan', sans-serif;
    color: var(--gris);
    text-align: center;
    padding-top: 20px;
    font-size: 2.5rem; /* Ajustement pour les titres sur les grands écrans */
}

html body {
    background-color: var(--noir);
    margin: 0;
    padding: 0;
} 

/* --- Règles Générales pour les Images --- */
img {
    max-width: 100%; /* S'assure que les images ne débordent jamais de leur conteneur */
    height: auto;    /* Maintient les proportions de l'image pour éviter la déformation */
    display: block;  /* Élimine l'espace blanc sous les images qui sont des éléments inline par défaut */
}

/* Vous pouvez ajouter cette classe à des images spécifiques dans votre contenu HTML */
.content-image {
    max-width: 800px; /* Exemple : Limite la largeur max à 800px */
    margin: 20px auto; /* Centre l'image s'il y a de l'espace autour */
    border-radius: 5px; /* Un petit arrondi pour un look plus doux (optionnel) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Une légère ombre pour les faire ressortir (optionnel) */
}


/* --- Styles des Lignes de Séparation (hr) --- */
.hr_left, .hr_right {
    border: none;
    height: 2px;
    background-color: var(--blanc);
    max-width: 50%; /* Garde une largeur relative */
    margin: 20px auto; /* Centre les hr par défaut */
}

.hr_left {
    margin-right: auto;
    margin-left: unset; /* Annule l'auto pour le centrage */
}

.hr_right {
    margin-left: auto;
    margin-right: unset; /* Annule l'auto pour le centrage */
}

/* --- Styles de la Galerie --- */
.galerie {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Centre les éléments dans le conteneur flex */
    gap: 20px; /* Augmenté pour un meilleur espacement visuel */
    padding: 20px; /* Padding autour de la galerie */
}
 
.Projets {
    /* Par défaut, sur les petits écrans, prend presque toute la largeur (un projet par ligne) */
    flex: 0 0 90%; 
    box-sizing: border-box;
    position: relative; 
    overflow: hidden; 
    border: 1px solid rgba(255, 255, 255, 0.1); /* Bordure subtile pour les projets */
}
 
.Projets img {
    width: 100%; /* L'image remplit toujours la largeur de son conteneur parent (.Projets) */
    height: auto; /* C'est LA PROPRIÉTÉ CLÉ : elle garantit que la hauteur s'ajuste automatiquement pour conserver les proportions. */
    max-width: 500px; /* Limite la largeur maximale que l'image peut atteindre, même si son conteneur est plus grand. */
    object-fit: contain; /* Utile si le conteneur .Projets avait une hauteur fixe, mais moins impactant avec height: auto. */
    display: block;
    margin: 0 auto; 
    transition: transform 0.3s ease-in-out; 
}


/* Effet au survol sur l'image de projet */
.Projets:hover img {
    transform: scale(1.05); /* Zoom léger au survol */
}

.Projets .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background: rgba(0, 0, 0, 0.7); /* Opacité légèrement augmentée pour le texte */
    color: var(--blanc);
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    padding: 15px; /* Augmenté pour un meilleur confort visuel */
    box-sizing: border-box;
}
 
.Projets:hover .overlay {
    opacity: 1;
}
 
/* Dans la section .overlay */
.overlay h2 {
    margin: 0;
    /* Utilisation de clamp() pour une taille de police fluide, adaptée à la largeur de l'image */
    font-size: clamp(1rem, 2vw, 1.8rem); 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    /* Optionnel: Limiter les lignes si le titre est très long et déborde */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limite le titre à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute des points de suspension */
}
.overlay p {
    margin: 0;
    /* Utilisation de clamp() pour une taille de police fluide, adaptée à la largeur de l'image */
    font-size: clamp(0.8rem, 1.2vw, 1.2rem); 
    padding: 0 10px;
    /* Propriétés pour la troncature de texte, si le texte est trop long */
    display: -webkit-box; 
    -webkit-line-clamp: 3; /* Limite le texte à 3 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: normal; 
}

/* Dans la media query pour les petits écrans (max-width: 575.98px) */
@media (max-width: 575.98px) {
    html h1 {
        font-size: 2rem;
    }
    .Projets {
        flex: 0 0 95%; 
    }
    /* Les règles ci-dessous sont devenues moins critiques grâce à clamp(),
       mais peuvent être gardées pour un ajustement fin si désiré.
       Elles ne sont plus strictement nécessaires pour la taille du texte. */
    /* .overlay h2 {
        font-size: 1.4rem; 
    }
    .overlay p {
        font-size: 1.1rem;
    } */
    .galerie {
        gap: 15px;
        padding: 10px;
    }
    .content-image { /* S'assure que les images de contenu sont bien responsives sur mobile */
        max-width: 100%;
        padding: 0 10px; /* Petites marges pour ne pas coller aux bords */
    }
}

/* Tablettes et petits ordinateurs (sm, md) */
@media (min-width: 576px) and (max-width: 991.98px) { /* Small (sm) and Medium (md) Bootstrap breakpoints */
    .Projets {
        flex: 0 0 calc(48% - 10px); /* Deux colonnes, ajusté pour le gap de 20px */
    }
}

/* Ordinateurs de bureau et plus (lg, xl, xxl) */
@media (min-width: 992px) { /* Large (lg) Bootstrap breakpoint */
    .Projets {
        flex: 0 0 calc(50% - 10px); /* Deux colonnes, ajusté pour un gap de 20px (20px / 2 = 10px) */
    }
    .galerie {
        max-width: 1000px; /* Limite la largeur max de la galerie pour ne pas qu'elle soit trop étendue (ajusté pour 2 colonnes) */
        margin: 0 auto; /* Centre la galerie */
    }
}