body {
	  margin : 0 0;
	  padding: 0 0;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  background-color: black;
	 }

.conteneur {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			font-family: 'Open Sans', sans-serif;
			font-size: 12pt;
		   }

header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0 4px 0;
		background-color: white;
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 5000;
		width: 100%;
		max-width: 2000px;
		border-bottom: 1px solid #999999;
	   }

.logoEZ {
		 width: 125px;
		 height: 54px;
		 margin-left: 50px;
		}

.logoEZ img {
			 min-width: 10%;
			 min-height: 10%;
			 max-width: 100%;
			 max-height: 100%;
			}

.btnConnexion {
			   position: absolute;
			   right: 160px;
			   top: 48.5%;
			   transform: translate(0, -51.5%);
			   cursor: pointer;
			  }

.btnConnexion a {
				 display: flex;
			     flex-direction: row;
			     align-items: center;
				 text-decoration: none;
				 color: #545454;
				}

.btnConnexion img {
				   width: 16px;
				   height: 16px;
				   margin-right: 7px;
				  }

.btnConnexion p {
				 font-family: Lucida Sans Unicode, sans-serif;
				 font-size: 10pt;
				 margin: 0 0;
				}

.btnConnexion a:hover {
					   color: #e2211c;
					  }

.overlayConnexion {
				   display: none; /* Par défaut, on cache l'overlay */
				   position: fixed;
				   z-index: 9000;
				   top: 0;
				   left: 0;
				   width: 100%;
				   height: 100%;
				   overflow: auto;
				   background-color: rgba(0, 0, 0, .5);
				  }

.boxConnexion {
			   display: flex;
			   flex-direction: column;
			   align-items: center;
			   width: 570px;
			   max-width: 92%;
			   border-radius: 30px;
			   background-color: white;
			   margin: 15% auto;
			   position: relative;
			  }

.fermerConnexion {
				  position: absolute;
				  right: 20px;
				  top: 16px;
				  z-index: 1000;
				  display: flex;
				  flex-direction: row;
				  justify-content: center;
				  align-items: center;
				  width: 18px;
				  height: 25px;
				  color: #545454;
				  font-family: Lucida Sans Unicode, sans-serif;
				  font-size: 22px;
				  font-weight: bold;
				  cursor: pointer;
				 }

.fermerConnexion:hover {
					    color: black;
					    font-weight: bold;
					   }

.contenuConnexion {
				   display: flex;
				   flex-direction: column;
				   align-items: center;
				   width: 100%;
				   position: relative;
				  }

.contenuConnexion .h2Connexion
			{
			 width: 100%;
			 margin: 0 0;
			 border-bottom: 1px solid #545454;
			}

.contenuConnexion .h2Connexion h2
				{
		 		 font-family: Lucida Sans Unicode, sans-serif;
		 		 font-size: 13pt;
				 margin: 18px 0 11px 0;
				 padding: 0 25px;
				 color: #545454;
				 text-align: left;
				}

.formulaireConnexion {
					  display: flex;
					  flex-direction: column;
					  align-items: flex-start;
					  width: calc(100% - 50px);
					  padding: 8px 25px 0 25px;
					 }

.username, .mdp {
				 display: flex;
				 flex-direction: row;
				 margin-top: 15px;
				 max-width: 100%;
				}

.username .label, .mdp .label
				{
				 display: flex;
				 flex-direction: row;
				 align-items: center;
				 width: 180px;
				 height: 22px;
				 margin-right: 20px;
				}

.username label, .mdp label
				{
				 font-family: Lucida Sans Unicode, sans-serif;
				 color: #545454;
				}

.username .input, .mdp .input
				{
				 width: 250px;
				}

.username .input input, .mdp .input input
				{
				 border: 1px solid #808080;
				 font-size: 10pt;
				 width: 98%;
				 height: 24px;
				}

#passwordConnexion {
					font-size: 10pt;
				   }

.submitConnexion {
				  display: flex;
				  flex-direction: column;
				  margin: 25px 0 15px 200px;
				  width: 250px;
				  max-width: 100%;
				 }

.submitConnexion button {
					     font-family: Lucida Sans Unicode, sans-serif;
					     font-size: 10pt;
					     font-weight: normal;
					     width: 170px;
					     text-decoration: none;
					     padding: 4px 8px;
					     cursor: pointer;
					     background-color: white;
					     color: #e2211c;
						 border: 1px solid #e2211c;
						 border-radius: 10px;
						 transition: 0.5s;
					    }

.submitConnexion button:hover
				{
				 background-color: #e2211c;
				 color: white;
				}

.lesp {
	   display: flex;
	   flex-direction: column;
	   margin-left: 202px;
	   margin-bottom: 20px;
	  }

.lesp p {
		 margin: 10px 0 0 0;
		 font-size: 8pt;
		 color: #777777;
		}

.lesp a {
		 text-decoration: none;
		 color: #1EB2BC;
		}

.lesp a:hover {
			   color: black;
			  }

.langueFr {
	  	   position: absolute;
	  	   top: 50%;
	  	   right: 115px;
	  	   transform: translate(0, -50%);
	 	  }

.langueEn {
	  	   position: absolute;
	  	   top: 50%;
	  	   right: 115px;
	  	   transform: translate(0, -50%);
	 	  }

.langueFr a, .langueEn a
			{
		     text-decoration: none;
		     color: #545454;		     
			 font-family: Lucida Sans Unicode, sans-serif;
			 font-size: 10pt;
		    }

.langueFr a span, .langueEn a span
			{
			 position: absolute;
			 top: -999em;
			 left: -999em;
			}

.langueFr a:hover, .langueEn a:hover
				{
			  	 color: #e2211c;
			 	}

nav {
	 width: 30px;
	 height: 30px;
	 margin-right: 50px;
	}

.menu-mobile {
			  padding: 0; 
			  margin:  0;
			  list-style: none;
			 }

.menu-mobile .imgmenu
			{
			 border-radius: 4px;
			 cursor: pointer;
			 width: 30px;
			 height: 30px;
			}

.menu-mobile img {
		 		  width: 30px;
		 		  height: 30px;
		 		 }

.menu-mobile ul {
		         position: absolute;
		         background-color: white;
		         z-index: 5000;
		         top: 63px;
		         right: 0px;
		         list-style: none;
		         padding: 0 0;
		         max-height: 0;
		         overflow: hidden;
				 transition-duration: 0.4s;
				 cursor: default;
		        }

.menu-mobile li ul li {
		           	   border-radius: 0;
					   margin: 0 0;
					   text-align: center;
		              }

.menu-mobile ul li a {
		              /* inline-block ou block essentiel pour appliquer un
		              width à l'élément <a> */
					  display: inline-block;
					  font-family: Lucida Sans Unicode, sans-serif;
					  color: #545454;
					  text-decoration: none;
					  padding: 10px 0;
					  width: 100%;
		             }

.menu-mobile ul li a strong
				{
		         font-weight: normal;
		        }

.menu-mobile li:hover ul 
			{
		     max-height: 0;
		    }

.menu-mobile li:hover ul li:hover a
				{
		 		 color: #e2211c;
		 		}

.linkConnexion {
				display: none;
			   }

.corps {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 63px;
	   }

@font-face {
			font-family: 'Lulo Clean One Bold';
			src: url('../fonts/LuloCleanOneBold.otf') format('truetype');
			font-weight: normal;
			font-style: normal;
			}

footer {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		width: calc(100% - 60px);
 		max-width: calc(2000px - 60px);
 		padding: 25px 30px 10px 30px;
 		background-color: #545454;
 		position: relative;
 		z-index: 100;
	   }

.navBottom {
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			padding: 15px 0;
		   }

.lienNavBottom {
				width: 150px;
				margin: 0 7px 20px 7px;
				text-align: center;
			   }

.ligneBlanche {
			   border-top: 2px solid white;
			  }

.ligneRouge {
			 border-top: 2px solid #e2211c;
			}

.lienNavBottom a {
				  font-family: Lucida Sans Unicode, sans-serif;
				  font-weight: bold;
				  font-size: 12pt;
				  text-decoration: none;
				  color: #DDDDDD;
				 }

.ligneBlanche:hover, .ligneRouge:hover
				{
				 border-top: 2px solid #e2211c;
				}

#footerConnexion {
				  cursor: pointer;
				 }

.icones {
		 display: flex;
		 flex-direction: row;
		 justify-content: space-between;
		 align-items: center;
		 margin-bottom: 25px;
		}

.icones a {
		   text-decoration: none;
		  }

.facebook {
		   width: 45px; 
		   height: 45px;
		  }

.instagram {
			width: 45px;
			height: 45px;
			margin: 0 10px 0 5px;
		   }

.email {
		width: 45px;
		height: 45px;
	   }

.icones a img {
			   width: 100%;
			   height: 100%;
			  }

.normesdroits {
			   display: flex;
			   flex-direction: column;
			   align-items: center;
			   width: 100%;
			   margin-top: 20px;
			  }

.normesdroits p {
				 margin: 0 0 6px 0;
				 color: #BBBBBB;
				 max-width: 90%;
				 text-align: center;
				 font-size: 8pt;
				}




@media screen and (max-width: 740px)
		{
		 .logoEZ {
				  margin-left: 20px;
				 }

		 .btnConnexion {
					    right: 130px;
					   }

		 .langueFr, .langueEn
		 		 {
		 		  right: 85px;
		 		 }

		 nav {
		 	  margin-right: 20px;
		 	 }
		}

@media screen and (max-width: 730px)
		{
		 .navBottom {
		 			 display: none;
		 			}
		}

@media screen and (max-width: 650px)
		{
		 .logoEZ {
				  width: 100px;
				  height: 43.2px;
				 }

		 .menu-mobile ul {
				          top: 52.2px;
				         }

		 .corps {
				 margin-top: 52.2px;
			    }
		}

@media screen and (max-width: 570px)
		{
		 .boxConnexion {
					    border-radius: 15px;
					   }

		 .fermer {
				  top: 16px;
				 }

		 .contenuConnexion .h2Connexion h2
						{
						 margin-top: 18px;
						}

		 .formulaireConnexion {
							   display: flex;
							   flex-direction: column;
							   align-items: center;
							   width: calc(100% - 50px);
							   padding: 10px 25px 0 25px;
							  }

		 .instructionConnexion {
		 						width: 100%;
		 						text-align: center;
							    left: 50%;
							    bottom: 129px;
							    transform: translate(-50%, 0);
							   }

		 .username, .mdp {
						  display: flex;
						  flex-direction: column;
						  align-items: center;
						  margin-top: 10px;
						  width: 100%;
						 }

		 .username .label {
						   justify-content: center;
						   width: 150px;
						   margin-right: 0;
						   margin-bottom: 8px;
						  }

		 .mdp .label {
					  justify-content: center;
					  width: 150px;
					  margin-top: 15px;
					  margin-right: 0;
					  margin-bottom: 8px;
					 }

		 .username label, .mdp label
		 				{
		 				 text-align: center;
		 				}

		 .username .input, .mdp .input
						 {
						  max-width: 100%;
						  text-align: center;
						 }

		  .username .input input, .mdp .input input
						 {
						  width: 95%;
						 }

		 .submitConnexion {
						   align-items: center;
						   margin: 30px 0 5px 0;
						  }

		 .lesp {
			    margin-left: 0;
			    margin-bottom: 22px;
			    text-align: center;
			   }

		 .lesp p {
				  margin: 10px 0 0 0;
				 }

		 .erreurGenerale {
		 				  text-align: center;
		 				 }
		}

@media screen and (max-width: 545px)
		{
		 .logoEZ {
				  margin-left: 14px;
				 }

		 .btnConnexion {
					    right: 124px;
					   }

		 .langueFr, .langueEn
		 		 {
		 		  right: 79px;
		 		 }

		 nav {
		 	  margin-right: 14px;
		 	 }
		}

@media screen and (max-width: 425px)
		{
		 .linkConnexion {
						 display: inline;
						 cursor: pointer;
					    }

		 .btnConnexion {
		 				display: none;
					   }
		}