/* ----------dernière mise à jour mardi 17 septembre 2019 15h29-------------- */

	
.exemple {
border-radius: 6px;
/*background: #F5F5F5;*/
margin: 10px 5px 20px 5px;
padding : 2px 5px 2px 5px;
border:1px dotted;
}

	body {
		background-color: #FCF9F9;
		font-size: 14px;
		font-family: 'open sans', arial;
		color:#385370;
		padding:0;
		margin:0;
			}
/*	h1 {
		font-size: 11px;
		background-color: #385370;
		margin:0 ;
		}
*/

	h2 {
		font-size:20px;
		font-weight: normal;
		margin:0;
		color:#385370;
		}
		
	p {
		padding:0;
		margin:0;
		}
	a {
		text-decoration:none;
		color:#6889B8;
		}
	a:hover{
		text-decoration:underline;
		}		


.select {
	margin-top:20px;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    border: 1px solid #385370;
    padding: 4px;
    color: #385370;
    font-size: 16px;
}		
		
#breadcrumb {
display: block;
padding: 0 0 0 0;
list-style: none;
list-style-image: none;
border: 0;
margin:0px;
}

#breadcrumb li {
float:left;
font: italic 11px "Georgia";
clear:both;
}	
/* Supprime les styles appliqués par défaut aux listes. S'applique également à la sous-liste */
/* Début menu déroulant */
#fond {
		background-color: #E6E6FA;
		position:relative; 				semble améliorer le positionnement dans dream mx*/
		text-align: left;
		height:20px;
		border-bottom: 1px solid #CCCCCC;  /* ajout*/
		border-top:2px solid #E6E6FA;   /*ajout*/
		border-right: 1px solid #CCCCCC;  /* ajout*/
		clear: both;		
			}
#fond2 {
/* fond du menu horizontal présent dans la page de résiliation en ligne */
		background-color: #E6E6FA;
		position:relative; 				semble améliorer le positionnement dans dream mx*/
		text-align: left;
		height:20px;
		border-bottom: 1px solid #CCCCCC;  /* ajout*/
		border-top:2px solid #E6E6FA;   /*ajout*/
		border-right: 1px solid #CCCCCC;  /* ajout*/
		clear: both;		
			}
.nav {
	list-style: none none;
	margin: 0;
	padding: 0 0 0 1px;
	line-height: 1;
	height:20px; ajout nécessaire sinon menu disparait sous FF3, hauteur mini
}

.nav a {
	display: block;
	padding: 0px;
	height:20px;
	color: #385370;
	text-decoration: none;
	font-size: 17px;
    height: 20px;
    line-height: 20px;
}
.nav a:focus,
.nav a:hover {
	color: black;
	text-decoration:underline;
}

		
.nav-item {
	float: left; /* Pour que les liens s'affichent horizontalement */
	position: relative; /* Crée un contexte de positionnement pour les sous-listes */
	margin-right:15px;/*ajout*/
	padding-left:5px;/*ajout*/
}


.sub-nav {
	position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
	white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
	left: -2px; /* FIX IE7 : pour que le sous-menu s'aligne avec son conteneur */
	top: 2em; /* FIX IE7 : pour que le sous-menu s'aligne avec son conteneur */
	white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
	/*background: white;  FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
	margin-top: -8px; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l'un à l'autre */
}
/* Réduit cette boîte à un carré d'1px de côté, dont le texte est déporté loin à gauche */


.sub-nav-item a {
	padding-top: 5px; /* ajout */
	padding-bottom: 2px; /* ajout */
	padding-left:5px;
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	float: left; /* Fix WebKit : force la largeur des sous-navigations à s'adapter automatiquement, pour pouvoir l'atteindre à la souris */
	background-color:#E6E6FA;	
	display:block;
	width:200px;
	text-align:left;

}

.sub-nav-item a:hover {
	text-decoration:underline;
}

.sub-nav-item a:focus,
.nav-item a:focus + .sub-nav a,
.nav-item:hover .sub-nav-item a {
	position: static;
	left: auto;
	/*width: auto;*/
	height: auto;
	overflow: visible;
}


nav ul, nav li {
margin-top: 0;
margin-bottom: 0;

}

.navToSelect {
display: none;

}



/* ----------container to center the layout-------------- */
	#container {
		width: 90%;
		max-width:1200px;
		margin-bottom: 10px;
		margin: 0 auto;
		background-color: #F8F8FF;
				}

/* -----------------header--------------------- */
	#header {
		text-align: left;
		padding: 0px;
		margin: 0px;
	}


	#fond-top-header {					/*div créé pour contourner problème fond ul ne s'affiche pas et prend couleur de div header*/
		background-color: #385370;
		position:relative;				/*semble améliorer le positionnement dans dream mx*/
		height:94px;		
						
						}
	#header span {
		color:white;
		font-size:10px;
		}
	#accroche {
		padding:10px 0px;
		font-size:50px;
		font-weight: normal;
		margin:0;
		color:white;
		text-decoration : none;
		font-family: 'open-sans',arial;
				} 
				
	#header h1 {
		text-align: right;
		background-color: #385370 ;
		color: white;

				} 
	div#logo {
	float:left;
	margin-top: 17px;
	text-align:center;
	padding-left:5px;
	}
	
	div#bandeau-google-haut {
	text-align:right;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 2px;
	/*modif*/
	float:right;
	}

				
/* --------------left column------------- */
	#left {
		clear:both;
		float: left;
		width: 185px;
			}
	#div_padding {		
		margin:0;
		padding: 10px 5px  0px 5px;
			}
		
	#left h2 {
		border-bottom:1px solid #CCCCCC;
		margin:0 0 0 0;
		padding: 0;
		color: #385370;
	}
	#left ul {
		display:block; /* block afin de pouvoir utiliser le margin, inline pour éviter le bug sur ie6 de centrage du menu, margin sur div "padding"*/
		margin: 5px 0 10px 0;
		padding:0;
		list-style-image:none;
		list-style-position:outside;
		list-style-type:none;
		width="100%"

				}
	#left ul li {
				/*border-bottom:1px solid lightgrey;*/
		color: #fff ;
		margin-bottom: 0px ;
		height: 20px;
				}
	#left ul li a {
		display: block ;
		color: #385370 ;
		line-height: 1em ;
		padding: 4px 0 ;
		text-align: left ;
		text-decoration: none ;
					}
				
	#left ul li a:hover, #left ul li a:focus, #left ul li a:active {
		background-color: #E6E6FA ;
		color:#385370;
				}
	div#box1 { 
		display:none;
		height:100px;
    	background: lightgrey; 
		border : 1px dotted lightgrey;
		}
		
	div#box2 { 
		display:none;
		height:100px;
	    background: lightyellow; 
		border : 1px dotted lightgrey;
		}
		
		
/* --------------left column resiliation en ligne------------- */
	#left-resiliation-en-ligne, #left-resiliation-en-ligne-accueil {
		clear:both;
		float: left;
		width: 185px;
			}
	#div_padding {		
		margin:0;
		padding: 10px 5px  0px 5px;
			}
				
		
		
/* -----------------content--------------------- */
	#content {
		background-color: #fff;
		padding: 0px;
		margin: 0 ;
		margin-left : 185px;
		margin-right: 200px;
		padding-left:10px;
		padding-top:10px;
		padding-right:10px;
		border-left:1px dotted black;
		/*border-right:1px dotted black;*/
			}
	
	div#content { 
		min-height:1650px;
		/*height:expression(this.scrollHeight > 600 ? "auto":"600px"); */

		}
	#content h1 {
		background-color: white ; 
		padding: 5px 0 5px 0;
		margin: 5px 0 3px 0;
		font-size:30px;
		text-align: center;
				}		

	#content h2 {
		padding: 5px 0 5px 0;
		margin: 5px 0 10px 0;
		color: #385370;
		text-align:center;
		border-bottom:1px solid #CCCCCC;
		border-right:1px solid #CCCCCC;
		background-color: #E6E6FA ;
			}


	#content p {
		margin: 5px 0 10px 0;
		text-align:justify;
			}
	#content	p.lastupdate
	{
	text-align:right;
	font-style : italic;
	}		
	
	#content p.menu-ancres 
	{
	text-align:center;
	margin: 0px 0 10px 0;
	padding:0px;
	font-size: 12px;
	}
	
	#content p.adresse 
	{
	text-align:center;
	}
	
	#content div.lettre
	{
	margin:auto;
	padding : 10px 5px 10px 5px;
	text-align:center;
	width:90%;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px ;
	background-color:#F8F8FF;
	border: 1px dashed;
	}
	

	
/* -----------------content large-------------------- */
	#content_large {
		background-color: #fff;
		padding: 0px;
		margin: 0 ;
		margin-left : 185px;
		margin-right: 0px;
		padding-left:10px;
		padding-top:10px;
		padding-right:10px;
		border-left:1px solid #cccccc;
			}
	
	div#content_large { 
		min-height:1650px;
		/*height:expression(this.scrollHeight > 600 ? "auto":"600px"); */

		}
	#content_large h1 {
		font-family: 'Open Sans', sans-serif, arial;
		background-color: white ; 
		font-size:30px;
		text-align: center;
		color: #385370;
		margin-top:12px;
		margin-bottom:10px;
		font-weight: 600;
				}		

	#content_large h2 {

		font-size: 24px;
		margin: 30px 0 10px 0;
		color: #385370;
		text-align:left;
			}
			
	#content_large h3 {
		margin: 30px 0 10px 0;
		color: #385370;
		text-align:left;
		/*
		border-bottom:1px solid #CCCCCC;
		border-right:1px solid #CCCCCC;
		background-color: #E6E6FA ;
		padding: 5px 0 5px 0;
		*/
			}


	#content_large p {
		margin: 5px 0 10px 0;
		text-align:justify;
		font-size: 16px;
  		line-height: 25px;
  		text-align: justify;
		
		
			}
	#content_large	p.lastupdate
	{
	text-align:right;
	font-style : italic;
	margin-top:50px;
	}		
	
	#content_large p.menu-ancres 
	{
	text-align:center;
	margin: 0px 0 10px 0;
	padding:0px;
	font-size: 12px;
	}
	
	#content_large p.adresse 
	{
	text-align:left;
	}	
	#content_large p.adresse-destinataire 
	{
	text-align:right;
	}	

	#content_large p.intro 
	{
	font-size:1.15em;
	font-weight: bold;
	}	
	#content_large div.lettre
	{
	margin:auto;
	padding : 10px 5px 10px 5px;
	text-align:center;
	width:90%;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px ;
	background-color:#F8F8FF;
	border: 1px dashed;
	}
	
#hp-resenligne {
width:100%;
	}
	
#hp-resenligne td {
padding:5px;
	}
#hp-resenligne p ,#hp-resenligne h3 ,#hp-resenligne div {
text-align: center;
	}
#hp-resenligne a {
color: #385370;
	}	
	
	
#hp-resenligne a:hover {
color: #6889B8;
	}	
	

/* --------------right column------------- */
	#right {
	float: right;
	width: 200px;
	margin: 0;
	padding: 0;
	}
	
	#right h2 {
	color: #385370;
	text-align:center;
	border-bottom:3px solid #CCCCCC;
	background-color: #E6E6FA ;

	}
	
	#right ul {
				width: 100% ;
				list-style: none ;
				padding: 0 ;
				margin:0 0 20px 0;
				background-color: #E6E6FA ;
				color: #fff ;
				}
	#right ul li {
				border-bottom:1px dotted black;
				color: #fff ;
				height: 20px;
				text-align: center;
								}
	#right ul li a {
				display: block ;
				height: 100%;
				line-height:20px;
				text-decoration: none ;
				color: #385370 ;
				}
				
	#right ul li a:hover, #left ul li a:focus, #left ul li a:active {
				text-decoration: underline ;
				background-color: #385370 ;
				color:white;
				}
	


/* -----------footer--------------------------- */
	#footer {
		clear: both;
		margin: 0;
		padding: 0;
		text-align: right; }

	#footer h1{
		clear: both;
		margin: 0;
		padding: 0;
		text-align: right; 
		height: 15px}

	#footer p{
		margin: 0;
		padding: 0;
		text-align: center;
		background-color: #FCF9F9; 
		}
		
	.accroche
	{
		font-size: 9px;
		font-style:italic;
		text-align:center;
	}
	.date-maj
		{
		text-align: right;
	}
	.coin {
	padding:10px;
	background-color:#FDEC31;
	/*arrondir les coins en haut à gauche et en bas à droite*/
	-moz-border-radius:10px 10px;
	-webkit-border-radius:10px 10px;
	border-radius:10px 10px;
	width:30%;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom : 15px;
	margin-top : 20px;
	color:#385370;
	font-size:medium;
	border: 1px groove;
}

	div.coin:hover {
	
	background-color: #fddb2b ;
}

	.coin10 {
	padding:10px;
	background-color:#FDEC31;
	/*arrondir les coins en haut à gauche et en bas à droite*/
	-moz-border-radius:10px 10px;
	-webkit-border-radius:10px 10px;
	border-radius:10px 10px;
	width:60%;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom : 15px;
	margin-top : 20px;
	color:#385370;
	font-size:medium;
	border: 1px groove;
}

	div.coin10:hover {
	
	background-color: #fddb2b ;
}

	.coin-comparateur {
	padding:10px;
	background-color:#FCF9F9;
	/*arrondir les coins en haut à gauche et en bas à droite*/

	border-radius:5px 5px;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom : 15px;
	margin-top : 20px;
	color:#385370;
	font-size:medium;
	border: 1px groove;
}

	div.coin-comparateur:hover {
	/*background-color: #fddb2b ;*/
}

	div.coin a,div.coin a:active{
		display:block;
		height:100%;
		text-decoration:none;
			color:#385370;	

}	

div.liste-adresses h3 {
margin-top:5px;
margin-bottom:5px;
padding:0px;
}	

.coin2 {
border-radius: 6px;
background: #FDEC31;
margin: 0 0 10px 0;
padding : 2px 2px 2px 5px;
}

.coin3 {
border-radius: 6px;
/*background: #F5F5F5;*/
margin: 10px 5px 20px 5px;
padding : 5px;
border:1px dotted;
}

div.coin6:hover {
background-color: #fddb2b ;
}

.coin4 {
border-radius: 6px;
background: #FDEC31;
margin: auto;
padding: 5px 2px 5px 2px;
width: 93%;
margin-bottom: 10px;
margin-top: 5px;
font-weight: bold;
text-align: center;
font-size: 16px;
}

.coin5 {
border-radius: 6px;
background: #FDEC31;
margin: 0 0 10px 0;
padding : 2px 2px 2px 5px;
box-shadow: 0px 0px 0px 1px;
}


.mannequin-hp {
float:left;
margin-right:8px;
}


.tableau-resiliation-en-ligne{
margin-top:10px;
margin-bottom:10px;
width:100%;
text-align:center;
}



a.A { 
	padding: 10px;
	background-color: #F8F8FF ; 
	color: #3c4157;
	display:block;
	text-decoration:none;
	text-align:center;
	border-radius:10px;
	margin:5px;
	border: 1px groove;
}
	
a.A:hover {

	background-color: #FDEC31; 
	}
	
p.B
	{
	line-height: 20px; 
	text-align:center;
	margin:0 0 0 0;
	padding:0 4px 0 4px;
	}

p.C {
  color: rgb(56, 83, 112);
  text-align: left !important;
  margin:20px 0 5px 0 !important;
  padding-left: 5px;
  font-size: 1.2em;
  /* background-color: #E6E6FA; */
  /* background-color: #3c4157; */
}	
	
.bandeau-bleu-footer{
text-align:center;
background-color:#385370;
height:90px;
}

textarea {
	width: 500px;

}

.moteur-ari{
height:40px;
width:80%;
border: 1px solid #385370;
margin:0 20px 0 20px;
font-size:20px;
border-radius: 10px 10px;
padding-left: 10px;
}

/************************************* Styles pour sites mobile************************************/
.menu-mobile {
display:none;
}


@media only screen and (max-device-width:480px) {

*[class=hideMobile] { display:none; }


ul.sommaire
{
line-height: 200%;
}	

body {
font-size: 14px;
}
#content_large p.intro {
font-size: 16px;
}
h2 {
font-size: 20px;
}

td[class=newline] {
float:left; 
clear:both; 
width:100% !important;
}

img[class=responsiveImage] { width:100% !important; height:auto !important; }

div#bandeau-google-haut {
display:none;
/*modif*/
}
div#facebook-button {
display:none;
}


.menu-mobile {
display: inline-block;
text-align:center;
width: 100%;
margin: auto;
padding-top: 2px;
padding-bottom: 3px;
}
.menu-mobile select{
font-size:120%;
}


.coin {
width:60%;
}

div#fond {
background-color: white;
border-bottom:0px;
display:none; /*30012018*/
height:0;
}



div#fond2 {
display:none;
}

div#content_large{
margin-left:10px;
margin-right:10px;
}
div#left,div#left-resiliation-en-ligne-accueil{
display:none;
}



.images-resiliation-en-ligne-menu-gauche{
text-align:center;
}

.mannequin-hp {
float:none;
width:100%;
margin:auto;
text-align:center;
}
div#logo{
float:none;
margin:0;
padding-top: 17px;
padding-bottom: 8px;
padding-left:5px;
}

div#content_large {
margin-left: 5px;
margin-right: 5px;
border-left: 0px;
}

div#container {
width:100%;
}

.tableau-resiliation-en-ligne{
/*display:none;*/
}

.footer-links-optionals{
display:none;
}

.footer-links-essentials{
font-size:17px;
margin-left:3px;
margin-right:3px;
margin-top:2px;
}

.menu-ancres{
display:none;
}
.bandeau-bleu-footer{
display:none;
}

nav ul {
display: none;
}

.navToSelect {
display: block;
margin: 5px auto;
border: 1px solid #385370;
}

.select {
width:100%;
}	

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
	width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.moteur-ari{
max-width:100%;
}

.image-page-accueil{
padding-top: 0px; /*30012018*/
background-color: white;
}


}



/************************************* Fin - styles pour sites mobile************************************/
/************************************* styles pour tablette************************************/
@media only screen and (max