body
{
background-color: #F1F1F1; /* Le fond de la page */
margin: 0;
padding: 0;
}

.container
{
height: 50px;
background-color: #4393D0;
 border:0px solid #fff;
 background:#4393D0;
}
.container1
{
  position:absolute;
  left : 50px;
  width: 300px;
  height: 50px;
  background-color: #4393D0;
  border-radius: 3px;
  display: table-cell; 
  vertical-align: middle;
 
}

.container2
{
  position:absolute;
  right : 80px;
  width: 100px;
  height: 50px;
  background-color: #4393D0;
  border-radius: 3px;
  display: table-cell; 
  vertical-align: middle;
 
}

.texte1
{ 
	position:absolute;
	 font-family: Arial,Ubuntu,sans-serif;
 font-weight: bold;
 font-size: 30px;
 /* centrage vertical */
 transform: translateY(-50%);
	top: 50%; 
 /*-------------------*/ 	
	color:#FFFFFF
}

.texte2
{ 
	position:absolute;
	/* centrage vertical et horizontal */
	transform: translateY(-50%);
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%); 
	/*-------------------------------- */
	 font-family: Arial,Ubuntu,sans-serif;
	
	font-size: 15px;
	color:#FFFFFF;
}

.texte2:Hover {
 color:#00AADC; 
}

.texte2A { 
text-decoration:none; 
}

.LA1 {
 position:relative;
 top:50px;
 font-family: Arial,Ubuntu,sans-serif;
 font-size: 22px;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 text-align:center; /* centrage horizontal */
 width:400px;
 height:25px;
 border:0px solid #fff;
 vertical-align:middle;
 color:#3D515F;
}

.Message1 {
 position:relative;
 font-family: Ubuntu,Arial,sans-serif;
 font-size: 12px;
 margin-left:10px;
 text-align:left; /* a gauche */
 color:#FF0000;
}

.LA7 {
 position:relative;
 font-family: Ubuntu,Arial,sans-serif;
 font-size: 12px;
 margin-left:10px;
 text-align:left; /* a gauche */
 color:#3A8415;
}

.Cadre1 {
 position:relative;
 top:0px;
 margin-left:auto;
 margin-right:auto;
 width: 400px;
 padding: 0px;
 height:550px;
 z-index: 1;
  border-width:0px;
 border-style:solid;
 border-color:#c3c3c3;
    }

.Cadre3 {
 position:relative;
 top:70px;
 margin-left:auto;
 margin-right:auto;
 width: 400px;
 padding: 0px;
 border-width:1px;
 border-style:solid;
 border-color:#c3c3c3;
 background-color: #FFFFFF;
 height:270px;
 border-radius: 10px;
 z-index: 1;
    }
    
.Cadre4 {
 position:relative;
 top:70px;
 margin-left:auto;
 margin-right:auto;
 width: 400px;
 padding: 0px;
 height:100px;
 z-index: 1;
    }
	
.Cadre2A {
 position:relative;
 top:60px;
 width: 400px;
 padding: 0px;
 border-width:1px;
 border-style:solid;
 border-color:#FF0000;
 background-color: #FFEBE8;
 height:50px;
 border-radius: 6px;
 display: table-cell; 
 vertical-align: middle;
    }

.Cadre2B {
	position:relative;
	top:60px;
    width: 360px;
    background-color: #E5F0CB;
    border-width:1px;
    border-style:solid;
    border-color:#3A8415;
    padding: 20px;
	border-radius: 6px;
}	
	
.Mail{
 position:relative;
 top:50px;
 margin-left:30px;
 z-index: 2;
 width:320px;
 height: 44px;
 padding: 0 10px;
 border: 1px solid #c3c3c3;
 border-radius: 4px;
    }	
	
.Passe{
 position:relative;
 top:60px;
 margin-left:30px;
 z-index: 2;
 width:320px;
 height: 44px;
 padding: 0 10px;
 border: 1px solid #c3c3c3;
 border-radius: 4px;
    }		

.Mail:focus {
 border-color: #0087be;
  outline: 0;
}

.Passe:focus {
 border-radius: 4px;
   border-color: #0087be;
    outline: 0;

}

.Bouton {
 position:relative;
 top:90px;
 margin-left:30px;
 z-index: 2;
 border-radius: 5px;
  border-width:1px;
 border-style:solid;
 width:344px;
 height:40px;
 background:#00AADC;
  font-weight: bold;
 color:#FFFFFF;
}

.Bouton:hover {
 border-width:1px;
 border-style:solid;
 border-color:#00AADC; 
 background:#FFFFFF;

 color:#00AADC;

}

.LA4B {
 position:relative;
font-family: Ubuntu,sans-serif;
 font-weight: bold;
 font-size: 13px;
left: 30px;
top:0px;
display: table-cell; /* comportement visuel de cellule */
 padding:10px;
 height:30px;
   color:#4F748E;

vertical-align: middle;
}

.LA4B:Hover {
 border-color:#F1F1F1;
 color:#0087be; 
}

.LA4A { 
text-decoration:none; 
}


.LA5B {
 position:relative;
 font-family: Ubuntu,sans-serif;
 text-decoration:none; 
 font-weight: bold;
 font-size: 13px;
 display: table-cell; /* comportement visuel de cellule */
 vertical-align: middle;
 border-width:1px;
 border-style:solid;
 border-color:#4F748E;
 height:25px;
 width:250px;
 padding:10px;
 top:0px;
 left: 30px;
 color:#4F748E;
 text-decoration:none; 
}

.LA5B:Hover {
 border-color:#F1F1F1;
 color:#0087be; 
}

.LA5A { 
text-decoration:none; 
}


  
  
.box {
     display: table;
}
 
.img {
    float: left;
    display: table-cell;
    vertical-align: middle;
	width:20px;
	height:20px;
	padding-right:10px;
	
}
  
.Message2 {
	margin-left: 50px;
	display: table-cell;
    vertical-align: middle;
	 font-family: Ubuntu,Arial,sans-serif;
 font-size: 12px;


 color:#3A8415;
}