.liste{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
}

.liste-pic{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.liste-pic img{
    width: 250px;
    object-fit:cover;
    object-position: center;
    height: 440px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.315);
    border-radius: 3px;
}

.categorie{
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    transition: all 0.15s ease-in;
    font-weight: bolder;
    text-transform: uppercase;
    border: 2px double #f8b63b;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.212);
}

.categorie p {
    position: absolute;
    bottom: -40px;
}

.categorie:hover{
    color: #f8b63b;
    transition: all 0.15s ease-in;
}




.categorie::after{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 3px;
    transition: all 0.15s ease-in;
    background-size: cover;
}



.categorie::before{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -2;
    border-radius: 3px;
    transition: all 0.15s ease-in;
    background-size: cover;

}

.categorie:hover::after{
    content: '';
    position: absolute;
    bottom: 12px;
    left: -16px;
    transform: rotate(-10deg);
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 3px;
    transition: all 0.15s ease-in;

}

.categorie:hover::before{
    content: '';
    position: absolute;
    bottom: 22px;
    left: -30px;
    transform: rotate(-20deg);
    width: 100%;
    height: 100%;
    z-index: -2;
    border-radius: 3px;
    transition: all 0.15s ease-in;
}

.animaux{
    background-image: url('galerie/animaux/1.jpg');
}
.animaux::before{
    background-image: url('galerie/animaux/2.jpg');
}
.animaux::after{
    background-image: url('galerie/animaux/3.jpg');
}

.monument{
    background-image: url('galerie/monument/1.jpg');
}
.monument::before{
    background-image: url('galerie/monument/2.jpg');
}
.monument::after{
    background-image: url('galerie/monument/3.jpg');
}

.portrait{
    background-image: url('galerie/portrait/1.jpg');
}
.portrait::before{
    background-image: url('galerie/portrait/2.jpg');
}
.portrait::after{
    background-image: url('galerie/portrait/3.jpg');
}

.nature{
    background-image: url('galerie/nature/1.JPG');
}
.nature::before{
    background-image: url('galerie/nature/2.jpg');
}
.nature::after{
    background-image: url('galerie/nature/3.jpg');
}

.divers{
    background-image: url('galerie/divers/1.jpg');
}
.divers::before{
    background-image: url('galerie/divers/2.jpg');
}
.divers::after{
    background-image: url('galerie/divers/3.jpg');
}


.home{
    display: none;
}


.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal img {
    max-width: 90%;
    max-height: 90%;
}

@media (max-width: 430px) {
    .liste{
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }
    .home{
        position: fixed;
        bottom: 25px;
        right: 25px;
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        rotate: 90deg;
        background-color: rgba(128, 128, 128, 0.13);
        z-index: 10;
    }
    
    .home:hover{
        background-color: #f8b63b;
    }
}


.page-transition {
    transition: background-color 0.5s ease-in-out;
}

.page-transition.yellow-bg {
    background-color: yellow;
}


#loadMoreButton{
    width: 60%;
    height: 50px;
    background-color: #f8b63b;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}


@media (max-width: 430px) {
    .classe:hover {
        /* Désactiver les styles de survol */
        pointer-events: none;
    }
}