@charset "UTF-8";

* {
	/*---toutes les marges sont à 0---*/
	margin:0;
	padding:0;
}

body {
	border:0;
	margin:0;
	padding:0;
	color:#6B6B6B;
	font:12px Arial,Verdana,sans;
	background:#6498AD url(../images/charte/fond.jpg) repeat-x left top;
}

img  {
	border:0;
}

a:link, a:visited, a:active {
	color:#6B6B6B;
	text-decoration:none;
}
a:hover {
	color:#000;
	text-decoration:none;
}

input[type="text"], input[type="password"] {
	width:148px;
	height:16px;
	border:0;
	margin-bottom:3px;
	padding:1px 2px 0;
	color:#6B6B6B;
	font:11px Arial,Verdana,sans;
	background:url(../images/charte/bg-input.jpg) no-repeat left top;
}

input[type="submit"] {
	cursor:pointer;
}



#container {
	position:relative;
	width:974px;
	margin:20px auto;
}

#container-top {
	height:24px;
	background:url(../images/charte/container-top.png) no-repeat left top;
}

#container-body {
	background:url(../images/charte/container-body.png) repeat-y top center;
}

#container-bottom {
	height:14px;
	padding-top:10px;
	color:#FFF;
	text-align:center;
	background:url(../images/charte/container-bottom.png) no-repeat left top;
}
	#_3wmedia {
		float:left;
		margin:5px 0 0 40px;
	}
	
	#container-bottom a:link, #container-bottom a:visited, #container-bottom a:active {
		color:#FFF;
		text-decoration:none;
	}
	#container-bottom a:hover {
		text-decoration:underline;
	}

#menu-top, #header, #contenu, #contenu_index {
	position:relative;
	width:910px;
	margin:auto;
	background-color:#FFF;
}

#menu-top {
	height:52px;
	background-image:url(../images/charte/bg-menu-top.png) no-repeat left top;
	border-bottom:1px solid #E3E3E3;
}	
	a.lien-top {
		float:right;
		margin:10px 30px 0 0;
		padding-right:10px;
		border-right:1px solid #AFAFAF;
	}
	a.lien-top:hover {
		border-right-color:#000;
	}
	
	#form-connexion {
		float:right;
		margin:10px 10px 0 0;
	}

#header {
	height:100px;
	border-bottom:1px solid #E3E3E3;
}
	#logo {
		position:absolute;
	}
	#banniere {
		position:absolute;
		left:180px;
	}

#contenu_index {
	height:670px;
}
#contenu {
	height:790px;
}
/* ---------------------- MENU GAUCHE ---------------------- */
#menu-gauche {
	float:left;
	width:160px;
	height:100%;
	padding:0px 10px;
	background-color:#E7E7E7;
}

#menu-gauche h3 {
	margin:10px 0 10px 5px;
	padding-top:40px;
	color:#3E718F;
	text-transform:uppercase;
}

#menu-gauche a {
	margin-left:5px;
	font-size:12px;
}

#menu-gauche span.separateur {
	display:block;
	width:164px;
	height:1px;
	margin:3px 0;
	background:url(../images/charte/separateur.png) no-repeat left top;
}

#menu-gauche #evenements {
	text-align:center;
	margin-top:40px;
}

#menu-gauche #evenements a {
	display:block;
	margin:0 0 20px 0;
}

/* ---------------------- ZONE CONTENU ---------------------- */
.zone-contenu {
	float:left;
	width:690px;
	padding:20px;
}
	.zone-contenu h3 {
		margin:0 0 5px 5px;
		text-transform:uppercase;
	}
	.zone-contenu h3 span {
		color:#1F75A5;
	}
	
.zone-contenu .bloc-gauche {
	float:left;
	width:460px;
	margin-left:-10px;
}

.zone-contenu #bloc-contact {
	margin-top:15px;
}

.zone-contenu .bloc-droite {
	float:left;
	width:216px;
	margin-top:10px;
	margin-left:22px;
}

.zone-contenu .bloc-large {
	float:left;
	width:100%;
	margin-top:10px;
}

.zone-contenu .dotted-line {
	float:left;
	clear:both;
	margin:10px auto;
	width:100%;
	height:1px;
	background:url(../images/charte/dotted-line.png) no-repeat left top;
}

/* ---------------------- BLOC GAUCHE ---------------------- */
.bloc-gauche .bloc-contenu {
	position:relative;
	margin-bottom:15px;
}
	
	.bloc-gauche .bloc-contenu .produit-photo {
		position:absolute;
		top:14px;
		left:14px;
	}
	
	.bloc-gauche .bloc-contenu .masque {
		position:absolute;
		background-position:left top;
		background-repeat:no-repeat;
	}
	
	.bloc-gauche .bloc-contenu .produit-fiche {
		position:absolute;
		top:130px;
		width:142px;
		padding:0 12px;
	}
		
		.bloc-gauche .bloc-contenu .produit-fiche p {
			text-align:justify;
		}
		
		.bloc-gauche .bloc-contenu .produit-fiche .voir-plus {
			padding-right:12px;
			text-transform:uppercase;
			background:url(../images/pictos/fleche-droite.png) no-repeat right center;
		}
		.bloc-gauche .bloc-contenu .produit-fiche .voir-plus:hover {
			text-decoration:underline;
		}
		
/* ---------------------- BLOC CENTRE ---------------------- */
.bloc-centre .bordure-gauche {
	float:left;
	width:17px;
	background:url(../images/charte/bordure-bloc-centre-gauche.png) no-repeat right center;
}

.bloc-centre .bloc-contenu {
	float:left;
	width:355px;
	margin:0 5px;
}

.bloc-centre .bordure-droite {
	float:right;
	width:17px;
	background:url(../images/charte/bordure-bloc-centre-droite.png) no-repeat left center;
}

/* ---------------------- BLOC DROITE ---------------------- */
.bloc-droite .bloc-contenu {
	position:relative;
	margin-bottom:15px;
}

/* ---------------------- BLOC LARGE ---------------------- */
.bloc-large h3 {
	margin-left:0;
}

.bloc-large p {
	margin-bottom:12px;
	text-align:justify;
}

.bloc-large p.accroche {
	font-weight:bold;
}

/* ---------------------- COUP DE COEUR ---------------------- */
#bloc-cdc {
	width:166px;
	height:166px;
}
	#bloc-cdc .masque {
		width:166px;
		height:166px;
		background-image:url(../images/charte/masque-cdc.png);
	}
	
	#bloc-cdc .produit-fiche h4 {
		color:#CFDDE4;
	}
	
	#bloc-cdc .produit-fiche .voir-plus {
		color:#464646;
	}
	
#bloc-design {
	width:166px;
	height:206px;
}
	#bloc-design .masque {
		width:166px;
		height:206px;
		background-image:url(../images/charte/masque-design.png);
	}
	
	#bloc-design .produit-fiche h4 {
		color:#464646;
	}
	
	#bloc-design .produit-fiche .voir-plus {
		color:#1F75A5;
	}
	
/* ---------------------- AVANT / APRÈS ---------------------- */
#avant-apres .bordure-gauche, #avant-apres .bordure-droite {
	height:403px;
}

#avant-apres .bloc-contenu {
	position:relative;
}
	#avant-apres .bloc-contenu #photo-avant {
		position:absolute;
		top:10px;
		left:10px;
		width:355px;
		height:186px;
	}
	
	#avant-apres .bloc-contenu #photo-apres {
		position:absolute;
		top:207px;
		left:10px;
		width:355px;
		height:186px;
	}
	
	#avant-apres .bloc-contenu .masque {
		position:absolute;
		width:355px;
		height:403px;
		background:url(../images/charte/masque-avant-apres.png) no-repeat left top;
	}
	
	#avant-apres .bloc-contenu .etiquette {
		position:absolute;
		left:10px;
		width:355px;
		height:30px;
		background:url(../images/charte/etiquette.png) no-repeat left top;
	}
	#avant-apres .bloc-contenu #etiquette-avant { top:156px; }
	#avant-apres .bloc-contenu #etiquette-apres { top:353px; }
	
	#avant-apres .bloc-contenu .etiquette h4 {
		position:relative;
		margin-left:10px;
		color:#FFF;
		font-weight:bold;
		text-transform:uppercase;
	}
	#avant-apres .bloc-contenu .etiquette label {
		position:relative;
		margin-left:10px;
		color:#FFF;
	}

/* ---------------------- AVANT / APRÈS ---------------------- */
#bloc-pub {
	position:relative;
	width:120px;
	height:240px;
	padding:2px;
	background:url(../images/charte/bg-pub.png) no-repeat left top;
}

#contenu_index ul, #contenu ul, #colRight ul{
list-style-type: none; 
margin-left:10px;
}
#contenu_index ul li, #contenu ul li, #colRight ul li{
background: url(../images/charte/puce.jpg) center left no-repeat; 
padding: 3px 0 3px 20px; 
font:bold 12px Arial, Helvetica, sans-serif;
}

.bleuCS{
font-weight:bold;
color:#1F7AA6;
}


.colonnePaire{
width:325px;
margin-right:15px;
float:left;
}

.colonneImpaire{
width:325px;
margin-left:15px;
float:left;
}

.colonneImpaireG{
width:325px;
margin-left:15px;
float:left;
background-color:#F1F2F2;
}

.colonneImpaireG form{
margin:10px;
}

/************* Images ********************************/
.imageright {
	float: right;
	margin:12px 0px 12px 12px;
	border:none;

}
.imageleft {
	float:left;
	margin:12px 12px 12px 0em;
	border:none;
	/*padding-top: 20px;*/
}
.imagecolpaire{
margin-left:-12px;
}
.separateur{
clear:both;
border-top:1px solid #E7E7E7;
}

.clearer{
clear:both;
}

.clearer2{
clear:left;
}
.num_vert{
float:right;
margin-right:25px;
margin-top:9px;
}

.info_tel{
float:left;
padding-top:15px;
font-weight:bold;
color:#6E6E6E;
margin-left:503px;
}


/* FORMULAIRE  GENERALISTE */
#formulaire{
border-top:9px solid #BBBCB8;
padding-top:5px;
width:530px;
height:360px;
padding-left:80px;
padding-right:70px;
padding-top:20px;
}
.form_line_sep{
clear:left;
height:1px;
}
.form_line label, .form_line_long label {	
display:block;
float:left;
width:90px;
font-family:"Arial",Verdana,Helvetica;
font-weight:normal;
font-size:13px;
line-height:18px;
color:#3F3F3F;
}

.form_line_long label {	
width:130px;
}

.form_line_long2{	
clear:left;
float:left;
font-family:"Arial",Verdana,Helvetica;
font-weight:normal;
font-size:13px;
line-height:18px;
margin-top:5px;
color:#3F3F3F;
}
.form_line_long2 .moyen0{	
margin-bottom:3px;
margin-left:2px;
width:110px;
height:18px;
background:#FFF;
font:normal "Arial",Verdana,Helvetica;
font-size: 13px;
line-height:18px;
border:1px solid #CFCFCF;
color:#65768A;
}
.form_line input{
margin-bottom:3px;
margin-left:2px;
width:144px;
height:18px;
background:#FFF;
font:normal "Arial",Verdana,Helvetica;
font-size: 13px;
line-height:18px;
border:1px solid #CFCFCF;
color:#65768A;
}

.form_line, .form_line_long{	
margin:4px 0px 4px 0px;
float:left;
font-size: 13px;
vertical-align: middle;
}

.form_line textarea {	
background:#FFF;
width:380px;
height:83px;
font:normal "Arial",Verdana,Helvetica;
font-size: 13px;
border:1px solid #CFCFCF;
color:#65768A;
}

.ok {
float:right;
background:#FFF url(../images/charte/input-bt.png) no-repeat scroll center top;
width:79px;
height:24px;
margin-top:6px;
margin-right:10px;
}

#alerte{
position:fixed;
left: 35%;
top:40%;
z-index:9999999;
padding:15px;
background-color:#FFF;
border:1px solid #6D6D6D;
font:bold 1.1em/1.2em Arial, Helvetica, sans-serif;
color:#DA0000;
}
.vignette_metier{
margin:9px 14px 7px 19px;
float:left;
width:194px;
text-align:center;
line-height:25px;
}