<html lang="fr">
<head>
<meta charset="utf-8">
   
<style type="text/css">
    
@font-face {
font-family: 'Montserrat';
}

body{
font-family: 'Montserrat';
margin:0px;
padding:0px;

}

::-webkit-scrollbar {
display: none; 
}

.hide-scrollbar
{
overflow: auto;
-ms-overflow-style: none;   
}



.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

a:link {
text-decoration: none;
color:black;
}

a:visited {
text-decoration: none;
color:black;
}

a:hover {
text-decoration: none;
color: gainsboro;
}

a:active {
text-decoration: none;
}
            
#page{
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
overflow-y: hidden;
}
       
#menudescriptif {
width:400px;
height: 100%;
display: inline;
overflow: scroll;
}
    
.items {
margin-left:40px;
margin-top:30px;
font-size:25px;
text-decoration: none;
font-weight: 500;
}
    
.description {
margin-left:40px;
margin-top:50px;
text-decoration: none;
font-size: 17px;
font-weight: 400;
line-height: 140%;
text-align: left;
margin-bottom: 15px;
}
    
#contenu_page {
width: calc(100vw - 450px);
height:100vh; 
overflow-Y:scroll; 
margin-left: 50px;

}   
      
span.t1
{color:black;
font-weight: 600;
}
    
span.t2
{ color:gainsboro;
font-weight: 500;
}     
    
span.t3
{color:black;
font-size:15px;} 
    
span.credit
{color:black;
font-weight: 200;
font-size: 15px;
line-height: 120%;}  


.images_centres
{
margin-top: 50px;
margin-right: 50px;
align-items: center;
justify-content: center;
display: flex;
flex-flow: row wrap;
}
    
.image_gm
{
margin-bottom: 20%;
width: 100%;
}
    
.image_pm
{
margin-bottom: 5%;
width: 100%;
}
    
.image_vertical
{
margin-bottom: 100px;
width: 100%;
}
    
.image_fin
{
margin-bottom: 20%;
width: 100%;
}
    
.image_petite
{
margin-bottom: 20%;
width: 45%;
}
        
.flexcontainer_images
{
display : flex;
flex-flow : row wrap;
align-items: center;
justify-content: center;
margin-bottom: 125px;
}

.fleximage
{
margin-top : 25;
margin-right : 25;
width: 630px;
}
    
.logo
 {
width: 20px;
    }
    
span.logo
{
font-size: 30px;
    }

/*memoire*/ 
    
.gif_memoire
{
height: 500px;
margin-bottom: 100px;
}
    

/*stage*/ 
    
.fleche
{
margin-right: 40%;
margin-left: 40%;
margin-bottom: 30%;
width: 25px;
}
    
.textelien
{
margin-top: 35%;
margin-bottom: 10%;
font-size: 3em;
}
    
/*biomimetisme*/ 
    
.wrapper_long
{
position: relative;
overflow: auto;
}

.image_longue
{
overflow: auto;

}
    

/*huawei*/ 
    
    
.liste_videos
{
margin-top: 50px; 
margin-right : 40px;
    }
    
 
video
{
width: 100%;
margin-bottom: 50px;
}

.image_cv
{
margin-left:40px;
margin-top: 0px;
overflow: scroll;
width: 65%;

}


/*cv*/ 

.informations
{
width: 50%;
margin-left: 40px;
margin-top: 40px;
margin-bottom: 50px;
font-size: 25px;

}


/*mediaquery*/    

@media screen and (max-width: 1250px) {

    
#page{
overflow-y: scroll;
}
    
#contenu_page 
{
width: 100%;
position: relative;
overflow-Y: visible; 
}
#menudescriptif
{
width: 95%;
text-align: justify;
padding-right: 0px;
border-right: 0px;
}
.image_gm
{
margin-bottom: 15%;
} 
.image_pm
{
margin-bottom: 5%;
}
    
.image_petite
{
margin-bottom: 20%;
width: 50%;
}

    
span.logo
{
font-size: 60px;
    }
.logo
 {
width: 40px;
    } 
.nom
{ display: none; } 
    
.image_cv
{
width: 100%;

}
    
.informations
{
width: 90%;
}
}



@media screen and (max-width: 1000px) {

   
span.logo
{
font-size: 100px;
    }
.logo
 {
width: 80px;
    } 
    
.image_cv
{
width: 100%;

}

span.t1
{font-size:40px;
line-height: normal;} 
    
span.t2
{font-size:40px;
line-height: normal;
}   
    
span.t3
{font-size:40px;
line-height: normal;} 
    
.informations
{
font-size: 30px;
}
    
span.credit
{
font-size: 30px;
}  

}

