*{
 margin:0
 padding:0; 
}

html {
 scroll-behavior: smooth; /*remonte lentement*/
 width: 100%;
}

body{
  border-radius: 18px;
  width:100%;
  color: orange;
  border:solid;
  border-width:6px;
  padding:0;
 background-repeat: no-repeat;
 background-size:100%;
}

h1 {

 margin-top:10px;  
font-size:20px;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
}


/* ici c'est mon effecttttttt copyright (to right, #e72a3a 10%, 
orange 50%, #5bdaff 60%); */


 

 .wrapper h1 {
   font-size: 33px;
   text-transform: capitalize;
   font-weight: 700;
   background-size: 200% auto;
   text-fill-color: transparent;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: deffilement 3.8s linear infinite;
   display: inline-block;
   margin-top:10px;
   margin-bottom:10px;
}
 @keyframes deffilement {
   to {
     background-position: center;
  }
}

/*tout les h2 border + text-shadow + color + titre*/

h2 {

  font-family: Calibri;
  font-size: 14vmin;
  text-align: center;
  padding: 30px;
  color: #1d9099;
  /* decale l'axe et les couleurs*/
  text-shadow: 0.5vmin 0.5vmin 0 #E79C10, -0.5vmin -0.5vmin 0 #D53A33;
  border:solid 6px;
  margin-top:215px;
  margin-left:10px;
  margin-right: 10px;
  margin-bottom:5px;
  border-radius: 15px;
}


h3 {
  transform: skew(#{$rotationAmt}deg) rotate(#{$rotationAmt}deg);
  grid-area: text;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size:3.3vmin;
 
  padding: 18px;
  color: #1d9099;
  text-shadow: 0.18vmin 0.18vmin 0 #E79C10, -0.18vmin -0.18vmin 0 #D53A33;
  border:solid 6px;
 
 
  margin-bottom:5px;
  border-radius: 11px;

}


/*#0a989a*/

h4 {
  transform: skew(#{$rotationAmt}deg) rotate(#{$rotationAmt}deg);
  grid-area: text;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size:110%;
  text-align: center;
  padding: 10.5px;
  color: #1d9099;
  text-shadow: 0.18vmin 0.18vmin 0 #E79C10, -0.18vmin -0.18vmin 0 #D53A33;
  width: 90%;
  margin-left:-11px;
  margin-right: 10px;
  margin-bottom: -30px;

}





/*desktop + titre */


h6 {
  transform: skew(#{$rotationAmt}deg) rotate(#{$rotationAmt}deg);
  grid-area: text;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size:120%;
  text-align: center;
  color: #1d9099;
  text-shadow: 0.18vmin 0.18vmin 0 #E79C10, -0.18vmin -0.18vmin 0 #D53A33!important;

  width: 90%;




}


/*h6 {
  transform: skew(#{$rotationAmt}deg) rotate(#{$rotationAmt}deg);
  grid-area: text;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 20vmin;
  margin: 0;
 

  text-shadow: -8px 2.5px 0 #E79C10, -2px -5px 0 #D53A33;



  color:white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 25px;
  text-align: center;





 


}*/


h6:hover{
  transition: 1s;
  color: black;
}
/*house parralax*/
#para_top{

  width: 94%;
  height: 150px;
  margin-right: 3%;
  margin-left: 3%;
  background-attachment: fixed;
  margin-top: 50px;
  background-repeat:repeat;"
}



#super_contener{

 width:100%;
  

  //*padding: 15px;*//
  margin-bottom: 0;
  margin-left:auto;
  margin-right:auto;
    /*background: linear-gradient(black, #3F3F52  );*/
     background: linear-gradient(black,#1A2A2F, black,#1A2A2F);
       /* background: linear-gradient(black,grey, black,white );*/
 /*taille max destop*/
  max-width: 599px;
   border-radius:18px !important;
   border:solid;
}
/*-------------submit-----*/
input[type=submit]{background-color:orange;
border-radius:15px;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
color:black;
width: 70px;
height: 25px;
margin-bottom: 20px;}


input[type=submit]:hover, input[type=reset]:hover {
 background-color:#FCDEDE;
 }
input[type=submit]:active, input[type=reset]:active {
 background-color:#FCDEDE;
 box-shadow:1px 1px 1px #D83F3D inset;
}

/*--border bloc suppression -*/
#supprimer_titre {
  



  /*height: 18px;*/

  
}

 

#hover_supprime:hover{
 transition-duration: 1.1s;
 margin-left: 22%;
 color:#0a989a;
}




#menux{
opacity: 0.95;
border-radius: 12px;
/*position: fixed;*/
height: 120px;
background: linear-gradient(black, #1A2A2F);
border:solid 4px;
color:#0a989a;
width: 100%;
}

#menux ul{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
list-style-type: none;
width:99%;
border-radius: 10px;
}



/*#menux ul li.nav-menu{
  width: 100%;
  text-align: center;
  position:relative;
  border-radius: 10px;
}*/

#menux ul li.nav-menu{
  width: 25%;
  text-align: center;
  position:relative;
  border-radius: 10px;
}

#menux li a{
  display:block;
  padding: 10px;
}

#menux ul li.nav-menu a{
  color:white;
  border-radius: 10px;
  font-size: 18px;
}

#menux ul li.nav-menu a:hover{
  color:black;
  background-color: white;
  margin-top:20px;
}

/*--------------------------sous menu----------------*/
#menux ul .submenu{
  display:none;
}

/*#menux ul .nav-menu:hover .submenu{
  display:block;
  position: absolute;
  background-color: #7D5858;
  width:100%;
  padding: :10px;
}*/

#menux ul .nav-menu:hover .submenu{
  margin-top:-0.01px;
  display:block;
  position: absolute;
  background-color: tomato;
  background: linear-gradient(#1A2A2F,#0a989a  );
  border:solid 5px;
  border-radius:12px;
  color:#0a989a;
  transition-property: margin;
  transition-duration:3s;
  width:100%;
  text-align:center;
}


/*---------------------sous menu hover-----------------*/
#menux ul .nav-menu:hover .submenu div{
  height: 34.33%;
  margin-top:-19px;
  width: 67%;
}



#sous li a{
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top:8px; 
  height: 60px;
}

#sous li a{
  display:flex;
  flex-wrap: wrap;
  width: 150%;
}
/*-------------------------------------media/menu-----s@ch@---*/



/*menus smartphone*/
@media screen and (min-width: 650px){
    #double_menu_box{
display: none;
    }
}
/*menu desktop*/
@media screen and (max-width: 650px){
     #menux{
display: none;
    }
}
/*body background*/
@media screen and (min-width : 650px){
     body{
background-image: url("../images/ground2.jpg");
background-attachment: fixed;
background-repeat: repeat;  
    }
}








#separateur{
margin-bottom: -15px;
margin-top:5px;
width: 96%;
  margin-right:2%;
  margin-left:2%;
  border:solid 8px;
  color:#0a989a;
  border-radius:333px;
  opacity: 0.5;
 height:5px;}

/*#separateur2{
margin-bottom: -15px;
margin-top:5px;
  width: 96%;
  margin-right:2%;
  margin-left:2%;
  border:solid 8px;
  color:#0a989a;
  border-radius:333px;
  opacity: 0.5;
  height:5px;
}*/


#separateur3{
margin-bottom:-30px;
margin-top:10px;
  width: 96%;
  margin-right:2%;
  margin-left:2%;
  border:solid 8px;
  color:#0a989a;
  border-radius:333px;
  opacity:1;
  height:5px;
}


#retract_admin{

  margin-left:-90px;
 margin-top:10px;
  background-color:transparent;
  background-attachment: fixed;
  transition: 2s;
  position: 90deg;
  transform: rotate(90deg);
  z-index:200;
  margin-bottom: 15px;
}




#retract_admin:hover{
transform: rotate(-0deg);
  margin-left:10px;
  transition:4s;
  z-index: 20;
}

/*off titre admin*/
#admin{

  margin-left:5px;
  background-color:red;
}


/*div mise en forme texte suppression */

#div{
  color:orange;
  margin-bottom:0;
  font-size: 18px;
  margin-left: 3px;
  white-space: nowrap;
}

#div_accueil{
  color:orange;
  margin-bottom:0;
  font-size: 18px;
  margin-left: 3px;
  white-space: wrap;
}
/*titre lien wp*/
#wp_titre{
 
display:flex; flex direction:row;
flex-wrap: nowrap;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
 font-size: 12px;
background-color: #0a989a;
color:black;
text-align: center;
border-radius:44px;
border:solid #0a989a;
height: 22px;
width: 95%;
margin-right:2.5%;
margin-left: 2.5%;
margin-bottom: -10px; 

}

#wp_titre:hover{
width: 50%;
margin-right:25%;
margin-left: 25%;
}

#delete{


 font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 13px;
  height: 50px;
  border: 9px solid; 
  color:orange!important;
  display: flex;
  flex-direction: row;

}
/*unique champ qui va à la ligne si titre long*/
#delete_accueil{
 

 font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 13px;
  height:100%;
  border: 9px solid; 
  color:orange!important;
  display: flex;
  flex-direction: row;
 

}

 



.number_doc{

color:black;border:solid;width: 20%;margin-left: 40%;margin-right: 25%;border-radius: 40px;background-color:white;font-size: 12px;text-align: center; 

}
#admin_tuto{

  text-align: justify; 
  margin-right:2%;
  margin-left: 2%;
  margin-bottom: 5px;
}


/*

#sommaire_cours h1{
  margin-top:20px;
  color:white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 25px;
  text-align: center;
  border:solid;
   margin-left: 5px;
  margin-right:5px;



 
}
/*
#sommairev h1{
  margin-top:30px;
  color:white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 24.5px;
  text-align: center;
  border:solid;
   margin-left: 5px;
  margin-right:5px;

}

*/

#scroll_to_top { 
position: fixed; 
width: 25px; 
height: 25px; 
bottom: 50px; 
margin-right: -80%;

} 
#scroll_to_top img { 
width: 70px; 
scroll-behavior: smooth;
}





/*#sommairet p{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
 text-align:justify;
  
  color:white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 20px;
}*/





#video{

  margin-left: 25px;
  
 
}


#video a{
 font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 20px;
  color:white;
}

#video2{

  margin-left:25px;
  
 
}


#video2 a{
 font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 20px;
  color:white;
}



#menu a li{
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 20px;
}


#gif img{
  width: 33%;
  margin-left: 55%;
  border-radius: 25px;
  border:solid;
  color: white;
}




#double_menu_box{
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: space-between;
margin-bottom:20px;
}




@media screen and (min-width: 650px){
    #double_menu_box{
        display: none;
    }
}

/*burger*/

#menuToggle
{
  display: block;
  position: relative;
  top: 16px;
  left: 4px;
  
  z-index: 3;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;

  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color:tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* caché */
  z-index: 2; /* placé au dessus */
  
  -webkit-touch-callout: none;
}

/*formulaire accueil*/
#hover_titre{

  margin-left:2px;
}




/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;

  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * transform en croix.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: white;

}

/*
 * on cache le milieu.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * idem 
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * position absolute
 */
#menu
{
  position: absolute;
  width: 5%;
  margin: -100px 0 0 -60px;
  padding: 70px;
  padding-top: 125px;
  
  background: none;
  border-radius: 20px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0%);/*transition diagonale maintenant horizontale*/
  
  transition: transform 1.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
    padding: 8px 0;
  font-size: 21px!important;
 
  color: white;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

/*burgur fin*/


/*burger droit*/

#menu2 a li{
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 20px;
}


#menuToggle2
{
  display: block;
  position: relative;
  top: 16px;
  right: 4px;
  
  z-index: 3;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle2 a
{
  text-decoration: none;
  color: #232323;

  
  transition: color 0.3s ease;
}

#menuToggle2 a:hover
{
  color:tomato;
}


#menuToggle2 input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle2 span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;

  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle2 span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle2 span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle2 input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: white;

}

/*
 * But let's hide the middle one.
 */
#menuToggle2 input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle2 input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu2
{
  position: absolute;
  width: 5%;
  margin: -100px 0 0 -165px;
  padding: 80px;
  padding-top: 120px;
  
  background: none;
  border-radius: 20px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(0, -100%);/*transition diagonale*/
  
  transition: transform 1.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
/*deplacement menu a droite*/
#menu2 li
{
  padding: 9px 0;
  font-size: 21px!important;
  color: white;
}


#menu2 li:hover
{

  transition: 0.75s;
font-size:180%!important;
}

#menu li:hover
{
   margin-right:25px;
  transition: 0.75s;
  font-size:180%!important;
}

/*
 * And let's slide it in from the left
 */
#menuToggle2 input:checked ~ ul
{
  transform: none;
}

/*burgur fin*/


#titre{
  color:white;
  text-align: center;
  margin-right: 5px;
  margin-left:5px;
  
 }

#titre p{ 
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 34px;

border:solid;
}


#titre_index{
  color:white;
  text-align: center;
  margin-right: 5px;
  margin-left:5px;

 
 }

#titre_index p{ 
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 34px;
margin-top: 272px;
border:solid;
}

p{

font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 18px;


}


/*boutons*/
#bouton{
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;

  border:solid;
  color:orange;
height: 33px;
   margin-left: 5px;
  margin-right:5px;


}





.bouton_wp{

text-align:center;
height: 50px;
color: black;
font-family: Calibri,sans-serif; 

}









#haut div{ 

 border-radius: 10px;
 border:5px solid white;
 width:92%;
margin-right: 4%;
margin-left:4%;

}


/*----------------------scale*--------
--------------------------------------*/



#haut div:hover{
  -webkit-transform: scale(2);
  transform: scale(1.15);

}
#haut div iframe{
  width:98%;
  height: 98%;
  border-radius: 10px;
}


#haut div p:hover{
background-color: white;
}

#haut div p h1{
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 30px;
}



#bouton1h p a{

font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 

background-color:orange;
height: 200px;

}




#bas div p
{font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
font-size: 30px;
color: black;
}

#footer{
margin-top: 40px;
text-align:center;
margin-bottom:50px;
margin-right: 5px;
  margin-left:5px;

}

#footpic{
height:350px;
               width: 97%;
               margin-bottom: 40px;
               border:8px solid;
               color:#1d9099;
               border-radius:12px;
               

}








#border{
margin-top: 10px;
  border:solid;
  color: white;
  margin-right: 5px;
  margin-left:5px;
}

#bas div p a{
color: black;
font-weight:bolder;
}

#haut div p a{
color: black;
font-weight:bolder;
}

#bas_wp div p a{
  color: black;
  font-weight:bolder;
}

#haut_wp div p a{
  color: black;
  font-weight:bolder;
}

#foot{
  color:white;
  text-align: center;
  background-color:#1d9099;
  margin-left: 5px;
  margin-right:5px;
  border-radius:10px;


    
  }








#foot p{ 
 font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
 font-size: 14px;
 margin-top: 10px;
 border:solid;
 border-radius:10px;
 color: black;
}


#pdf{
 text-align: center;
 margin-top: 300px;
}


#site p{

font-size: 14px;
margin-top: 10px;
text-align: center;
color: white;
border: solid;
border-radius:10px;
margin-left: 5px;
margin-right:5px;
}



#site :hover{
box-shadow: 0px -1px 15px 7px rgba(255,255,255,0.82);
-webkit-box-shadow: 0px -1px 15px 7px rgba(255,255,255,0.82);
-moz-box-shadow: 0px -1px 15px 7px rgba(255,255,255,0.82);
}



#text_footer{

text-align: justify!important;
padding:2%!important; 

}



@keyframes display {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  10% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(-60px);
    opacity: 0;
  }
}

.pic-ctn {
 width: 75%;
max-width: 90%;
position: relative;


}



.pic-ctn img {
  position: absolute;
  top: 0;
 margin-left:16%;

  opacity: 0;
  animation: display 8s infinite;/*temps boucle*/
  border: solid white;
  border-radius: 10px;
   width: 100%;
max-width: 100%;

  height: 111px;
  margin-top: 225px;


  
}

img:nth-child(2) {/*temps a chaque apparition*/
  animation-delay: 2s;
}
img:nth-child(3) {
  animation-delay: 4s;
}
img:nth-child(4) {
  animation-delay: 6s;
}
img:nth-child(5) {
  animation-delay: 8s;
}

/*videoooooooooooooooooooooooooooooos*/



#zic4 iframe{
  width:80%;
 
  border-radius: 10px;
}


#bloc_video:hover{
  -webkit-transform: scale(6);
  transform: scale(1.09);
}



#bloc_video iframe{ 
  width:80%;

  
 
  border-radius: 10px;
}

#bloc_video{


border-radius:15px;
  height: 100%; 
  background: linear-gradient(black, #1A2A2F,tomato,white);
  margin-bottom:3px;
  margin-right: 2%;
  margin-left: 2%;
  border:solid;
  color:white;

}



.double{


display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  height: 50%;

}



/*----------*/


@font-face {
   font-family: "ubuntu";
   font-style: italic;
   font-weight: 300;
   src: local("Lato Light Italic"), local("Lato-LightItalic"), url(https://fonts.gstatic.com/s/ubuntucondensed/v8/u-4k0rCzjgs5J7oXnJcM_0kACGMtT-Dfqw.woff2) format("woff2");
}

 a {
   text-decoration: none;
   color: #9ca0b1;
}
 .wrapper {
   text-align: center;
    border:solid 5px;
    border-radius:15px;
    margin-right:10px;
    margin-left:10px;
    margin-bottom:1%;
    margin-top:4%;
background-attachment:fixed;
  background-image:url('../images/black2.png');
 
}


#meteo{

 
  opacity: 0.5;

 
width: 100%;
border-radius: 100px;
-webkit-box-shadow: 0px -10px 13px 1px rgba(255,255,255,1);
-moz-box-shadow: 0px -10px 13px 1px rgba(255,255,255,1);
box-shadow: 0px -10px 13px 1px rgba(255,255,255,1);


}

#vid{
  height: 150px;
}

#compteur{

  margin-bottom:100px;
  width: 2px;
}

#general{
border-radius: 15px;
  border:solid;
  color: black;
  background: linear-gradient(black,white, black );
  margin-right:5px;
  margin-left:5px;
  padding-bottom: 21px;
  -webkit-box-shadow: -1px -9px 16px -9px rgba(135,22,22,1);
-moz-box-shadow: -1px -9px 16px -9px rgba(135,22,22,1);
box-shadow: -1px -9px 16px -9px rgba(135,22,22,1);
}

#general div{

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
height: 60px;

}

#hauts a{

width:17%;
margin-bottom:15px;
margin-top:15px;


}
#bass a{

width:17%;
margin-bottom:15px;
margin-top:25px;


}


#hauts div{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border:solid;
  border-radius: 500px;
  color: black;
 background: linear-gradient(white, red  );
 -webkit-box-shadow: -1px -9px 16px -9px rgba(135,22,22,1);
-moz-box-shadow: -1px -9px 16px -9px rgba(135,22,22,1);
box-shadow: -1px -9px 16px -9px rgba(135,22,22,1);
justify-content: space-between;
}





#hauts div:hover{
 
 background: linear-gradient(white, green );
}

#bass div{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border:solid;
  border-radius: 500px;
  color: black;
 background: linear-gradient(white, red  );
}

#bass div:hover{
 
 background: linear-gradient(white, green );
}


#hauts div p{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

margin-left:auto;
margin-right: auto;
  color: black;


}


#bass div p{
 display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

margin-left:auto;
margin-right: auto;
  color: black;
}



#syntheses h1{
  margin-top:15px;
  color:white;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: 25px;
  text-align: center;
  border:solid;
   margin-left: 5px;
  margin-right:5px;
  background-color: black;

}


/*-----rgpd-----*/
#body_mentions{

max-width:95%;
 background-image: url('images/black2.png');
 margin-left:2.5%;
 margin-right:2.5%;
 background-color: black;
}

#contener_mentions{
  text-align: justify;
  margin-left: 8px;
  margin-right: 8px;
}