@import url('../css/dessign.css');
@import url('../css/miniReset.css');

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: var(--blan-pur) !important; 
}
/* Style pour le div avec image de fond */
.sectionGalerie {
    width: 100%;
    height: auto;
    min-height: 240px; /* Hauteur minimale */
    /*background-image: url('../Source/IMG/GalerieHOme.jpg'); */
    background: 
                linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), /* Filtre noir semi-transparent */
                url('../Source/IMG/GalerieHOme.jpg'); /* Image de fond */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    color: white;
    text-align: center;
}
/* Style du h1 et du p */
.sectionGalerie h1 {
    font-size: 35px;
    position: relative;
    right: 470px;
    font-family: 'Oswald';
}
.sectionGalerie h1:hover{
    font-size: 37px;
    transition: 0.5s ease;
}
.sectionGalerie p {
    font-size: 16px;
    position: relative;
    right: 220px;
    color: white;
    width: 600px;
    text-align: left;
}
/* Ajustements pour mobile */
@media (max-width: 768px) {
    .sectionGalerie h1 {
        font-size: 2rem;
        position: relative;
        left: -10px;
    }
    .sectionGalerie p {
        font-size: 1.2rem;
        position: relative;
        left: 0px;
    }
}
@media (max-width: 920px) and (min-width: 768px){
    .sectionGalerie h1 {
        font-size: 2rem;
        position: relative;
        left: -10px;
    }
    .sectionGalerie p {
        font-size: 1.2rem;
        position: relative;
        left: 0px;
    }
}
/* Section Photo */
.galerie_pic {
    background-color: var(--blan-pur);
    width: 100%;
    height: auto;
    padding: 10px 10px;
    /*padding-bottom: 0px;*/
}
.pic_ligne1 {
    background-color: white;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*margin-bottom: 10px;*/
}
.bataux1, .bataux2, .bataux3, .bataux4, .bataux5, .bataux6, .bataux7, .bataux8, .bataux9 {
    height: 210px;
    object-fit: cover;
    margin-bottom: 10px;
}
.bataux1 {
    width: 400px;
}
.bataux2 {
    width: 200px;
}
.bataux3 {
    width: 400px;
}
.bataux4 {
    width: 350px;
}
.bataux5 {
    width: 300px;
}
.bataux6 {
    width: 350px;
}
.bataux7 {
    width: 410px;
}
.bataux8 {
    width: 300px;
}
.bataux9 {
    width: 290px;
}

/* Section Photo  */
/* Responsive pour Tablette Section Photo */
@media only screen and (max-width: 1024px) {
    .pic_ligne1 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: wrap; /* Les images vont se répartir sur plusieurs lignes */
        justify-content: space-between; /* Espace uniforme entre les colonnes */
    }
    /* Les images occuperont environ 32% pour créer trois colonnes */
    .bataux1, .bataux2, .bataux3, .bataux4, .bataux5, .bataux6, .bataux7, .bataux8, .bataux9 {
        width: 32%;
        margin-bottom: 10px; /* Ajout d'espace vertical entre les lignes */
    }
}
/* Responsive pour Mobile Section Photo */
@media only screen and (max-width: 768px) {
    /*.sectionGalerie{
        background-color: red !important;
    }*/
    .pic_ligne1 {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .bataux1, .bataux2, .bataux3, .bataux4, .bataux5, .bataux6, .bataux7, .bataux8, .bataux9 {
        width: 100%; /* Les images prennent 100% de la largeur sur mobile */
        margin-left: 0;
        margin-right: 0;
    }
}