.button2:hover, .button1:hover{
    animation: bg 0.3s ease-in-out forwards;
}
.voir1:hover,.voir2:hover, .voir3:hover, .voir4:hover, .visite:hover{
    background: #000000d4;
    box-shadow: 0px 0px 5px #0000006d;
}
.fermer:hover{
    background: #a30000d9;
    box-shadow: 0px 0px 5px #ff03035d;
}

.box1:hover img{ animation: rotation 0.3s 2 ease-in-out; }
.box2:hover img{ animation: rotation 0.75s ease-in-out; }
.box3:hover img{ animation: size 0.5s ease-in-out; }
.box4:hover img{ animation: rotate 1.5s ease-in-out; }

.box1, .box2{
    opacity: 0;
    transform: translateY(-20px);
    animation: apparitionBox1 0.65s ease-in-out forwards;
    visibility: hidden;
}
.box3, .box4{
    opacity: 0;
    transform: translateY(20px);
    animation: apparitionBox1 0.65s ease-in-out forwards;
    animation-delay: 0.5s;
    visibility: hidden;
}



@keyframes apparition{
    to{
        opacity: 1;
    }
}

@keyframes apparitionBox1{
    to{
        transform: translateY(0px);
        visibility: visible;
        opacity: 1;
    }
}

@keyframes bg{
    to{
        background: #00000025;
    }
}

@keyframes rotation {
    0%{ transform: rotate(0deg); }
    50%{ transform: rotate(5deg); }
    75%{ transform: rotate(-5deg); }
    100%{ transform: rotate(0deg); }
}

@keyframes size {
    0%{ transform: scale(1); }
    50%{ transform: scale(1.04); }
    100%{ transform: scale(1); }
}

@keyframes rotate {
    to{ transform: rotate(360deg); }
}