/*
*{
    border:1px solid wheat;
}
*/
/*Gestion de la Présentation et des vidéos*/
section{
    font-size: 25px;
    margin: 25px 10%;
 
}
.titreProjet {
    font-family: "Poppins-ExtraLight";
    font-size: 36px;
    text-transform:uppercase;
    color:black;
}

.conteneurVideos , .blocVideo>div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width:100%;
    
}

.projetsPresentation{
    max-width: 100%;
    margin:0px 2%;
    border-radius: 10px;
    font-size: 23px;
   
}
.projetsPresentation h2 {
    margin:0;
}
iframe , video{
    max-width: 100%;
    
}
#video0 {
    float:right;
    width:max-content;
    max-width: 100%;
    margin: 0px 0 50px 0;
}
.blocVideo{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    cursor:pointer;


}
.blocVideo p{
    font-family: 'Poppins';
    margin:0;
}
.blocVideo video{
    max-width:560px;
    max-height: 500px;
    max-width: 100%;
    margin:5px;
    display: inline-block;
  
}

/*Gestion des Photos*/
h2{
    margin:0 0 10px 20px;
}
.mosaique{
    width:95%;
    margin: auto;
    text-align: center;
    cursor:pointer;
}

.divMosaique{
    display:inline-block;
    background-position: center;
    background-size: cover;
    margin:-4px;
    display: inline-block;
    text-align:left;


}

#divCentral {
    display:none;
    position:absolute;
    max-width: 100%;
    width:450px;
    border:2px solid whitesmoke;
}
/*
.mosaique:hover #divCentral{    
    display:block;
    border:2px solid whitesmoke;
}
*/

#divCentral img{
    width: 450px;
    max-width: 100%;
}
@media screen and (max-width: 1300px) {
    section{
        margin: 25px 4%;
    }
}
@media screen and (max-width: 1000px) {
    section{
        margin: 25px 2%;
    }
}

@media screen and (max-width: 700px) {
    #video0 {
        float:none;
    }
}
@media screen and (max-width: 500px) {
    .mosaique{
         width:100%;
         margin: auto;
         text-align: center;
         cursor:pointer;
    }

    #divCentral {
        width:300px;
        /*height: 300px; */
    }
    #divCentral img{
        width: 300px;
    }
}