<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;
 }
    
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;
}
 
#menu {
width:130px; height:100vh; position:fixed;overflow:hidden;
}

#accueil{
padding-top: 30px;
}
    
.langue {
position: absolute;
z-index: 30;
top:30px;
right:30px;
font-size:25px;
font-weight: 500;
}

.items {
margin-left:40px;
margin-top:30px;
font-size:25px;
text-decoration: none;
font-weight: 500;

}
    
#contenu {
width:calc(100vw - 130px);position:fixed; height:100vh; overflow-Y:scroll; /*background:red;*/right:0px;

}

#intro{
width:100%;height:100vh; position:relative;
}

    
#texte_intro {
font-size: 30px; font-weight : 400; text-align:center; position:relative; top:50%; transform:translate(0%,-50%); margin:0 70px 0 70px;
}
    
#texte_conclu {
font-size: 30px; font-weight : 400; text-align:center; position:relative; top: 60%; transform:translate(0%,-60%); margin:0 70px 0 70px;
}
    
#vide_de_fin {
width:100px; height:100vh;
}
 

.flex-item img {
width:400px;
}
    
.flexbox {
display: flex;
flex-flow: row wrap;
justify-content: center;
position: relative;
}
    
.flex-item { 
/*border-style: solid;*/
}
    
.flex-content{
font-size:25px;
padding-right:50px;
padding-bottom:30px;
}
    
.leg {
position:absolute; 
top:20; 
left:20; 
opacity:0;   
line-height: 150%;
-webkit-transition: opacity 0.5s 0s ease-in, all 0.5s 0s ease;
-moz-transition: opacity 0.5s 0s ease-in, all 0.5s 0s ease;
-o-transition: opacity 0.5s 0s ease-in, all 0.5s 0s ease;
transition: opacity 0.5s 0s ease-in, all 0.5s 0s ease;
}
    
span.description{
font-weight: bolder;
color:black;
background:white;
display:inline;
word-wrap: break-word;
box-shadow: insent 8px 0 0 white, -8px 0 0 white;
padding-left: 5px;
padding-right: 5px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

    
span.t1
{
font-weight : 400;
color:black;
display:inline;
/*background:white;
box-shadow:8px 0 0 white, -8px 0 0 white*/
}
    
span.t2
{
font-weight : 400;
color:gainsboro;
display:inline;
/*background:white;
box-shadow:8px 0 0 white ;*/
}
    
span.t3
{
font-weight : 400;
color:black;
display:inline;
text-align: right;
/*background:white;
box-shadow:8px 0 0 white, -8px 0 0 white*/
}
    
span.infos
{
font-size: 15px;
}

span.logo
{
font-size: 30px;
    }
.logo
 {
width: 20px;
    }
.fleche
 {
width: 25px;
    }
  
.titre
{
margin-top: 10px;   
}
    
    
.image-wrapper:hover .leg {
opacity:1;
}
    
.image-wrapper{
position:relative;
}

bck {  
display:block; z-index:2; position:fixed; /*background:green;*/
}
    
.fond {
/*object-fit: contain;*/
width: 1825px ;
position : fixed ;
height: auto ;
display:none;   
}
    
.nom
{ display: inline; } 
      
main { position:fixed; z-index:10; }
    
@media screen and (max-width: 1500px) {
.flex-item img
{
width: 300px;
}
    
span.description{
font-size : 20px;
line-height: 135%;
}
}

@media screen and (max-width: 1000px) {
.flex-item img
{
width: 700px;
}
span.logo
{
font-size: 100px;
    }
.logo
 {
width: 80px;
    }
.fleche
 {
width: 80px;
    }

#menu 
{ display: none; } 
    
#contenu {
width: 100vw;
} 

.items {
font-weight: 600;
}
    
#texte_intro{
font-size: 80px;
}  
    
#texte_conclu{
font-size: 80px;
}  
    
span.t1
{
font-size: 40px;
}
    
span.t2
{
font-size: 40px;
}
    
.leg {
position:absolute; 
top:20; 
left:20; 
opacity:100;   
line-height: 150%;
font-size: 40px;

}
    
.flex-content{
padding-right: 0px;
padding-bottom:150px;

}
    
span.description {
font-size : 45px;
padding-left: 10px;
padding-right: 10px;

}
    
.langue {

font-size:70px;

}
    
}

@media screen and (max-width: 900px) {
.langue {

display: none;

}
}