#header {
height: 170px;
width: 101.3%;
background-image : url("entete.png");
margin-top:-21px;
 background-size: cover;
margin-bottom:10px;
margin-left:-10px;
 box-shadow: -6px 2px 6px 0 #000000;
}
body{
  background: url("fond d'ecran.jpg") no-repeat center fixed;
   background-size: cover;

}
h1{
 text-align:center ;
 margin-bottom:10px;
 text-shadow: 2px 2px 5px #000000;
 padding: 40px 0 0px 0;
}

 .menu ul{
      list-style: none;
      margin-top:-10px;
      margin-left:-10px;
      padding:0;

 }

 .menu ul li{
       padding:15px;
       position:relative;
       width:150px;
       background-color: #34495e ;
       border-right: 5px solid #192a56;
       border-top: 1px solid #f1f2f6 ;
       cursor:pointer;
       -webkit-transition: all 0.3s;
       -o-transition: all 0.3s;
       transition: all 0.3s;
       box-shadow: -6px 2px 6px 0 #000000;
 }
 .menu ul li:hover{
       background-color:#26de81;

 }
 .menu ul li a{
       color :#fff;
       text-decoration: none;

 }
 .cadre{
     padding:5px;
     background-color:rgba(255,255,255,0.9);
     border:2px solid #2f3542;
     -moz-border-radius:9px;
     -khtml-border-radius:9px;
     -webkit-border-radius:9px;
     border-radius:9px;
     width:82%;
     height:1200px;
     margin-top:-140px;
     margin-left:200px;

     box-shadow: -6px 2px 6px 0 #000000;
 }
 #image1{
    text-align:center;
   padding:80px;

 }
 .cadre2{
     padding:5px;
      background-color:rgba(255,255,255,0.9);
     border:2px solid #2f3542;
     -moz-border-radius:9px;
     -khtml-border-radius:9px;
     -webkit-border-radius:9px;
     border-radius:9px;
     width:82%;
     height:600px;
     margin-top:40px;
     margin-left:200px;

      box-shadow: -6px 2px 6px 0 #000000;
 }
 .cadre3{
     padding:5px;
      background-color:rgba(255,255,255,0.9);
     border:2px solid #2f3542;
     -moz-border-radius:9px;
     -khtml-border-radius:9px;
     -webkit-border-radius:9px;
     border-radius:9px;
     width:82%;
     height:700px;
     margin-top:40px;
     margin-left:200px;

     box-shadow: -6px 2px 6px 0 #000000;
 }
 #image2{
     text-align:center;

 }
 .cadre4{
     padding:5px;
      background-color:rgba(255,255,255,0.9);
     border:2px solid #2f3542;
     -moz-border-radius:9px;
     -khtml-border-radius:9px;
     -webkit-border-radius:9px;
     border-radius:9px;
     width:82%;
     height:250px;
     margin-top:40px;
     margin-left:200px;

     box-shadow: -6px 2px 6px 0 #000000;
 }
 #image3{

    margin-left:400px;

 }
 #video{

     margin-left:50px;
 }
 #top{
  margin-left:1150px;
  margin-top:50px;


}
#modal{
position:fixed;
top:0;
margin-left:-10px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
display:none;

}




.modal{

 background-color: #ffffff;
 margin-left:260px;
 width:800px;
 height:600px;
 opacity:none;

}
#titre{
  margin-bottom:-20px;
  margin-left:155px;
text-shadow: 2px 2px 5px #000000;
 padding: 40px 0 0px 0;
}
#zone{

   display:none;
}
#zone1{
 background-color:#ffffff;
 box-shadow: -6px 2px 6px 0 #000000;
 display:none;

}
#zone2{

   display:none;
}
#zone3{
 background-color:#ffffff;
 box-shadow: -6px 2px 6px 0 #000000;
 display:none;

}
#zone4{

   display:none;
}
#zone5{
 display:none;

}
#zone6{

   display:none;
}
#zone7{
 display:none;

}
#zone8{
   background-color:#ffffff;
   box-shadow: -6px 2px 6px 0 #000000;
   display:none;
}
#zone9{
 background-color:#ffffff;
 box-shadow: -6px 2px 6px 0 #000000;
 display:none;

}
#zone10{

   display:none;
}
#zone11{
 display:none;

}
#zone12{

   display:none;
}
#zone13{
 display:none;

}
#zone14{
   background-color:#ffffff;
   box-shadow: -6px 2px 6px 0 #000000;
   display:none;
}
#QCM{
   width:70px;
   height:35px;
}
.quest1{
    margin-top:40px;
    margin-left:20px;
}
.quest2{
   margin-top:85px;
   margin-left:20px;
}
.quest3{
   margin-top:85px;
   margin-left:20px;
}
.quest4{
   margin-top:85px;
   margin-left:20px;
}
.quest5{
   margin-top:85px;
   margin-left:20px;
}
.rep1{
  margin-top:20px;
  margin-left:20px;
 position:fixed;
}
.rep2{
  margin-top:20px;
  margin-left:300px;
 position:fixed;
}
.rep3{
  margin-top:20px;
  margin-left:490px;
  position:fixed;
}
.rep4{
  margin-top:20px;
  margin-left:20px;
 position:fixed;
}
.rep5{
  margin-top:20px;
  margin-left:300px;
 position:fixed;
}
.rep6{
  margin-top:20px;
  margin-left:490px;
  position:fixed;
}
.rep7{
  margin-top:20px;
  margin-left:20px;
 position:fixed;
}
.rep8{
  margin-top:20px;
  margin-left:300px;
 position:fixed;
}
.rep9{
  margin-top:20px;
  margin-left:490px;
  position:fixed;
}
.rep10{
  margin-top:20px;
  margin-left:20px;
 position:fixed;
}
.rep11{
  margin-top:20px;
  margin-left:300px;
 position:fixed;
}
.rep12{
  margin-top:20px;
  margin-left:490px;
  position:fixed;
}
.rep13{
  margin-top:20px;
  margin-left:20px;
 position:fixed;
}
.rep14{
  margin-top:20px;
  margin-left:300px;
 position:fixed;
}
.rep15{
  margin-top:20px;
  margin-left:490px;
  position:fixed;
}
#cacher{
      background-color:#000000;
   width:500px;
   height:50px;
 margin-left:150px;
 margin-top:-50px;

}