.containerFenetre, .containerFenetre2, .containerFenetre3, .containerFenetre4{
    display: grid;
    place-items: center; 
    z-index: 1;
}


.fenetreBox1, .fenetreBox2, .fenetreBox3, .fenetreBox4{
    position: fixed;
    z-index: 2;
    display: none;
    height: 600px;
    width: 600px;
    background: #fffffff3;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    margin-top: 40rem;
    border-radius: 0.25rem;
    animation: apparition 0.3s ease-in forwards;
    overflow: hidden;
}
.tete, .tete2, .tete3, .tete4{
    height: 15%;
}

.titreFenetre{
    text-align: center;
    font-weight: 200;
    margin-top: -2.5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #00bfe5ab;
}
.titreCorps{
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 2rem;
    margin-top: -20px;
    font-size: 1.5rem;
}
.paragraphe{
    font-size: medium;
    font-weight: 350;
    margin: 10px;
    margin-top: -12.5px;
}

.corps, .corps2, .corps3, .corps4{
    height: 65%;
}
.pied, .pied2, .pied3, .pied4{
    height: auto;
    display: flex;
}
.visite, .fermer{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.3rem;
    height: 2.5rem;
    width: 15rem;
    margin-top: 80px;
    margin-left: 7%;
    color: #fff;
    background: #000;
    border: none;
    border-radius: 0.3rem;
    transition: background 0.3s ease-in-out;
}
.visite{
    display: flex;
}
.fermer{
    font-size: 1.3rem;
    background: #c50000;
}
.nom, .redirect{
    margin-left: 17.5%;
}
.nom{
    margin-top: 2%;
}
.redirect{
    margin-top: 5px;
    margin-left: 7.5px;
    height: 27.5px;
    width: 27.5px;
}






@media only screen and (max-width: 768px){
    body{
            background-image: url(mosqueeBG.jpg);
    }
    
    
    .entete{
        border-radius: 5px;
        background: #41d9ffc8;
        padding-bottom: 3.5rem;
    }
    
    .Logo{
        height: 55px;
        width: 110px;
        margin-left: 1.5rem;
        margin-top: -14.5px;
        color: #fff;
    }
    .buttons{
        padding-top: 0.25rem;
        padding-right: 25%;
    }
    .button2, .button1{
        color: #fff;
        height: 1.75rem;
        width: 50%;
        border: none;
        transition: transform 0.3s ease-in-out;
    }
    
    .boxContainer1, .boxContainer2{
        overflow-y: hidden;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .boxContainer2{
        margin-top: 10rem;
    }
    
    .box1, .box2, .box3, .box4{
        background: #ffffff97;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .box2, .box4{
        margin-left: 3%;
    }
    
    .voir1, .voir2, .voir3, .voir4{
        height: 2rem;
        width: 6.5rem;
        margin-left: 47.5%;
        color: #fff;
        background: #000;
        border: none;
        border-radius: 0.3rem;
        transition: background 0.3s ease-in-out;
    }
    
    .fenetreBox1, .fenetreBox2, .fenetreBox3, .fenetreBox4{
        display: none;
        height: 65%;
        width: 95%;
        background: #fffffff3;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        margin-top: 35rem;
        margin-left: 0.1%;
        border: 2px solid #000;
        border-radius: 0.25rem;
        animation: apparition 0.3s ease-in forwards;
        overflow-y: scroll;
    }

    .pied, .pied2, .pied3, .pied4{
        position: fixed;
        height: 1%;
    }
    
    .visite, .fermer{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.3rem;
        height: 2.5rem;
        width: 10rem;
        margin-top: 2.5rem;
        margin-left: 12.5%;
        border: none;
        border-radius: 0.3rem;
        transition: background 0.3s ease-in-out;
    }
    
}