*{
    margin: 0;
    padding: 0;
}
.texte-bleu {
 color:#001A80;
}
.texte-bleu2 {
 color:#5f8dff;
}
a.texte-bleu:hover{
  text-decoration: underline;
}
.texte-blanc{
 color: #DFE5FF;
}
.texte-rouge{
 color:#F10000;
}
.texte-vert{
 color:#00a933;
}
.fond-blanc{background-color: white}
.texte-orange{color: #FF4D00}
.lien-rouge{color:#ffb3b3 }
.image-droite{
   float: right ;
   width: 30%;
   padding: 20px;
   border-radius:  1em;
   }
.image-gauche1{
   float: left ;
   width: 65%;
   padding: 10px;
   margin-right: 3%;
   border-radius:  1em;
   }
.image-gauche2{
   float: left ;
   width: 45%;
   padding: 10px;
   margin-right: 3%;
   border-radius:  1em;
   }
.image-centre{
   position: relative;
   width: 96%;
   margin-top: 2%;
   margin-bottom: 3%;
   margin-left: 2%;
   border-radius:0.4rem;
   }
.image-finale{
   position: relative;
   left: 1%;
   width: 98%;
   padding: 20px;
   border-radius:1.8em;
 }
.arrondi{
 border-radius:  0.4em 0.4em 0.4em 0.4em/0.4em 0.4em 0.4em 0.4em;
 }
 .nom1{
 width:40%;
 object-position: center;
 padding: 10px;
 border-radius: 1.1rem;
 }
.nom2{
 width:40%;
 object-position: center;
 padding: 10px;
 border-radius: 1.1rem;
}
.cta{
 text-align:right;
 color:#001A80;
 float: right;
}
a.cta:hover{
  text-decoration: underline;
}
.question{
 color:#ba0000;
 text-align: center;
 line-height: 30px;
 font-size: 1.1em;
}
.reponse{
 font-style: italic;
 clear: both;
}
.menu-dessins{
 color:#001A80;
 font-size: 1em;
 text-align: center;
}
.legende{
 color :#484853;
 font-size: 1.3em;
 font-family: "Geneva","Verdana","Helvetica", sans-serif;
 line-height: 30px;
 font-weight: lighter;
 text-align: center;
 font-style: oblique 23deg;
}
.dessin-legende{
  clear: both;
  padding-top: 1em;
  background-color: white;
  box-shadow: 4px 4px 6px #DFDCFF;
  border-radius: 0.5em;
  margin-bottom: 2%;
  width: 90%;
  margin-left: 4%;
  padding-bottom: 1em;
}
.dessin{
   float: left ;
   width: 70%;
   padding: 2px;
   margin-right: 1%;
   border-radius:  1em;
}
 .dessin-centre-petit{
  width: 40%;
  margin-left: 30%;
 }
 .dessin-centre-grand{
  width: 96%;
  margin-left: 2%;
 }
 .bouton{
  margin-left: 43%;
  color: white;
  background-color: rgba(255,77,0, 0.8);
  padding:0.5rem;
  border-style: ridge;
  border-width: medium;
  border-color: #c9211e;
  border-radius: 1em;
  box-shadow: 1px 1px 1px grey;
  font-size: 22px;
  /*font-weight: bold;*/
}
.menu-videos{
  display: flex;
  flex-direction: row;
}
.video{
  margin: 1%;
  text-align: center;
  width: 98%;
}
.etiquette-video{
  width: 95%;
  border-radius:  0.4em 0.4em 0.4em 0.4em/0.4em 0.4em 0.4em 0.4em;  
}
.page-video{
 display:flex;
 justify-content: center;
 margin-top: 2%;
}
a{
 text-decoration: none;
 font-family: "Verdana","Helvetica","Geneva", sans-serif;
 color: #DFE5FF;
 padding: 0.9rem;
}
a:hover {
 text-decoration: underline;
}
a.souligne{
 color:  #001A80;
}
a.souligne:hover {
 text-decoration: underline;
}
body{
 background-color:#EFF3FD;
	/*background-size: cover;*/
}
	/*h1{color: #DF002E;
	font-family: "juana","Georgia","Lucida Bright","Calisto MT","Bookman", serif;
	font-size:54px;
	}*/
h2{color :#484853;
	font-size: 1.5em;
 font-family: "Verdana", "Helvetica",sans-serif;
 text-align: center;
 }
h3{color :#484853;
	font-size: 1.2em;
 font-family: "Verdana","Helvetica", sans-serif;
 line-height: 26px;
 
 }
h4{color :#484853;
 font-size:1.1em;
 font-family: "Verdana","Helvetica", sans-serif;
 line-height: 24px;
 font-weight: lighter;
 }
h5{color :#484853;
 font-size: 0.9em;
 font-family: "Verdana","Helvetica", sans-serif;
 line-height: 24px;
 font-weight: lighter;
 }
h6{color :#484853;
 font-size: 0.3em;
 font-family: "Verdana","Helvetica", sans-serif;
 font-weight: lighter;
 }
nav{
 background-color:rgba(0, 6, 32, 0.5);
	text-align: center;
	font-size: 1.2rem;
 padding: 16px;
	padding-right: 25px;
}
main{
   background-color:#EFF3FD;
   width: 74%;
   margin-left: 13%;
   padding-bottom: 20px;
  }
ul{
 list-style: none;
 margin: 2.5rem;
 }
 li{
 display: inline;
 background-color: white;
 text-align: center;
 margin-left: 2.5rem;
 padding: 1%;
 border-radius: 0.5em;
 box-shadow: 1px 1px 1px grey; 
}
footer{
 background-color:rgba(0, 6, 32, 0.5);
	text-align: center;
	font-size: 1.2rem;
	padding:10px;
}
#nav-accueil{
 background-color:rgba(0, 6, 32, 0.4);
	text-align: center;
	font-size: 1.2rem;
 padding-top: 10px;
	padding-bottom: 10px;
}
#bandeau-titre{
   display: flex;
   justify-content: center;
   padding-top: 8px;
   /*padding-bottom: 20px;*/
}
#bouton-rejoindre{
 margin-top: 25%;
 /*margin-bottom: 2%;*/
}
#nav-projet{
 margin-top: 10px;
 margin-bottom: 10px;
 border-radius: 0.5em;
 background-color: rgba(255,255,255,0.1);
	text-align: center;
 padding: 10px;
	/*padding-right: 0em;*/
}
#main-dessins{
   background-color:#EFF3FD;
   width: 90%;
   margin-left: 5%;
   padding-bottom: 20px;
  }
#texte-principal{
  color :#484853;
  font-size:1.1em;
  font-family: "Geneva","Verdana","Helvetica", sans-serif;
  line-height: 24px;
  font-weight: lighter;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 4em;
  padding-right: 4em;
  background-color: white;
  box-shadow: 4px 4px 6px #DFDCFF;
  border-radius: 0.5em;
 }
 #texte-principal-faq{
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 4em;
  padding-right: 4em;
  background-color: white;
  box-shadow: 4px 4px 6px #DFDCFF;
  border-radius: 0.5em;
}
 #fond-titre{
   background-image: url("fond1.jpg");
   background-size: 100%;
   padding-bottom: 10%;
}
#titre-faq{
  margin-bottom: 2%;
}
#cap{
 clear: both;
}
#mentions{
 background-color:rgba(0, 6, 32, 0.4);
	text-align: right;
	font-size: 1.2rem;
	padding:8px;
 padding-right: 50px;
}
#contact{
  margin-top: 3%;
  margin-left: 30%;
  /* margin-bottom: 5%;*/
  padding-top:25px;
  padding-left: 30px;
  padding-right: 30px;
  width: 40%;
  background-color: white;
  text-align: center;
}
#faq{
 padding-left: 30px;
 padding-right: 30px;
}
/*#texte-principal-scroll{
  padding: 3.5rem;
  padding-top: 1rem;
  background-color: white;
  box-shadow: 4px 4px 6px #DFDCFF;
  border-radius: 0.5em;
  margin-bottom: 5%;
  overflow:scroll;
  scroll-behavior: auto;*/
 /*#page-dessins{
  padding: 3.5rem;
  padding-top: 1rem;
  background-color: white;
  box-shadow: 4px 4px 6px #DFDCFF;
  border-radius: 0.5em;
  margin-bottom: 5%;
  } */











@media screen and (max-width: 500px) {
nav{
 background-color:rgba(0, 6, 32, 0.7);
	/*text-align: center;*/
	font-size: 1.1rem;
	padding:1px;
}
/*#fond-titre{
   background-image: url("fond1.jpg");
   width:100%;
   background-size: cover;
} */
a{
 text-decoration: none;
 font-family: "Geneva","Verdana","Helvetica", sans-serif;
 color: #DFE5FF;
 padding-left: 0%;
 font-size: 12px;
}
h2{color: #001A80;
	font-size: 1em;
 font-family: "Geneva","Verdana", "Helvetica",sans-serif;
	}
h3{color :#5C5A70;
	font-size: 1rem;
 font-family: "Geneva","Verdana","Helvetica", sans-serif;
 /*line-height: 26px;*/
 }
h4{color :#5C5A70;
 font-size:0.9rem;
 font-family: "Geneva","Verdana","Helvetica", sans-serif;
 font-weight: normal;
 /*line-height: 24px;*/
 }
h5{color :#5C5A70;
 font-size: 0.9rem;
 font-family: "Geneva","Verdana","Helvetica", sans-serif;
 font-weight: normal;
 /*line-height: 24px;*/
 }
h6{color :#5C5A70;
 font-size: 0.2em;
 font-family: "Geneva","Verdana","Helvetica", sans-serif;
 font-style: italic;
 text-align: center;
  }
main{
   background-color:#EFF3FD;
   width: 98%;
   margin-left: 1%;
 }
  /* main{
   background-color:#EFF3FD;
   width: 74%;
   margin-left: 13%;
   padding-bottom: 20px;
  }*/
  
/*ul{
 list-style: none;
 }
li{
 background-color: white;
 display: list-item;
 margin: 0.3rem;
 padding: 0.2rem;
 border-radius: 0.5em;
 box-shadow: 1px 1px 1px grey; 
}*/
.image-droite{
   position: relative;
   width: 30%;
   padding: 0px;
   border-radius:  1em;
   }
.image-gauche{
   position: relative;
   width: 90%;
   padding: 5px;
   /*margin-right: 3%;*/
   border-radius:  1em;
   }
.image-gauche1{
  position: relative;
   width: 90%;
   padding: 5px;
   /*margin-right: 3%;*/
   border-radius:  1em;
   }
.image-gauche2{
   position: relative;
   width: 100%;
   padding: 10px;
   /*margin-right: 3%;*/
   border-radius:  1em;
   }
 .image-centre{
   position: relative;
   width: 98%;
   margin-top: 3%;
   margin-bottom: 3%;
   border-radius:0.7rem;
   }
 .image-finale{
   position: relative;
   /*left: 8%;*/
   width: 80%;
   /*padding: 20px;*/
   border-radius:1.8em;
 }
.texte-bleu {
 color:#001A80;
 font-size: 0.9em;
}
.renvoi{
  color:  #001A80;
  font-size:0.9rem;
  float: right;
}
 .dessin{
   width: 100%;
   padding: 2px;
   margin-right: 1%;
   border-radius:  1em;
   }
 .dessin-centre-petit{
  width: 80%;
  margin-left: 10%;
 }
 .nom1{
 width:60%;
 object-position: center;
 }
 .nom2{
 width:90%;
 object-position: center;
 padding: 10px;
 border-radius: 1.1rem;
}
/*.nom2{
 width:50%;
 object-position: center;
}
.page-video{
 display:flex;
 justify-content: center;
 overflow:visible;
 }*/
 .bouton{
  margin-left: 35%;
  color: white;
  background-color: rgba(255,77,0, 0.8);
  padding:1px;
  border-style: ridge;
  border-width: thin;
  border-color: #c9211e;
  border-radius: 1em;
  box-shadow: 1px 1px 1px grey;
  font-size: 12px;
  font-weight: bold;
}
#nav-projet{
 margin-top: 3px;
 border-radius: 0.5em;
 background-color: rgba(255,255,255,0.1);
	text-align: center;
	padding: 6px;
	/*padding-right: 22px;*/
}
#bouton-rejoindre{
 margin-top: 22%;
 margin-bottom: 2%;
}
#nav-accueil{
 background-color:rgba(0, 6, 32, 0.4);
	text-align: center;
	font-size: 0.9em;
 margin: 0%;

/*#bandeau-titre{
   display: flex;
   justify-content: center;
   padding-top: 10%;
   margin: 0%;
   background-color: rgba(223,229,255,0.4);
   padding-bottom: 0%;
}*/
#bouton-rejoindre{
 margin-top: 18%;
 padding-bottom: 4%;
}
#texte-principal{
  padding-top: 0em;
  padding-bottom: 0em;
  padding-left: 1em;
  padding-right: 1em;
  background-color: white;
  box-shadow: 4px 4px 6px #DFDCFF;
  border-radius: 0.5em;
}
#texte-principal-faq{
  padding-top: 0em;
  padding-bottom: 0em;
  padding-left: 1em;
  padding-right: 1em;
  background-color: white;
  box-shadow: 4px 4px 6px #DFDCFF;
  border-radius: 0.5em;
}
 #fond-titre{
   background-image: url("fond1.jpg");
   background-size: 100%;
   padding-bottom: 0%;
 }
 #faq{
 padding-left: 10px;
 padding-right: 10px;
}
}