@charset "UTF-8";
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background: url(images/fondsite.jpg);
	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	padding: 0;
	color: #3f0600;
	}

#container {
	width: 1020px;
	background: #FFFFFF;
	margin: 0 auto;
	position: relative;
	}
	
#container.accueil {
	background:url(images/fond1.jpg) top left no-repeat;
	}	
#container.fond1 {
	background:url(images/fond2.jpg) top left no-repeat;
	}	
#container.fond2 {
	background:url(images/fond3.jpg) top left no-repeat;
	}
#container.fond3 {
	background:url(images/fond4.jpg) top left no-repeat;
	}
			
	
/*haut*/	

#header {
	height: 152px;
	padding: 0;
	margin: 0;
	}
	
#logo, #acheter, #fan, #pro {
	float: left;
	}
	
#logo {
	width: 292px;
	height: 125px;
	margin: 0;
	text-align: left;
	}	
	
#acheter {
	width: 185px;
	height: 146px;
	background: url(images/menu-acheter.png) top left no-repeat;
	margin: 0 16px 0 0;
	padding: 0;
	color: white;
	font-size: 14px;
	text-align: left;
	}
	
#fan {
	width: 216px;
	height: 146px;
	background: url(images/menu-fan.png) top left no-repeat;
	margin: 0 98px 0 0;
	color: white;
	font-size: 12px;
	text-align: left;
	padding: 0;
	}	
	
#menu-acheter, #menu-fan {
	list-style-type:none;
	}	
	
#menu-acheter {
	padding: 74px 0 0 19px;
	line-height:1.7em;
	margin: 0;
	}
	
#menu-fan {
	padding: 40px 10px 0 10px;
	margin: 0;
	line-height:2em;
	}		
	
#acheter a, #fan a {
	color: white;
	text-decoration:none;
	}
#acheter a:hover, #fan a:hover {
	text-decoration:underline;
	}		
	
#pro {
	width: 213px;
	height: 146px;
	background: url(images/menu-pro.png) top right no-repeat;
	margin: 0;
	padding : 0;
	}	
	
#lienpro {
	display: block;
	text-decoration: none;
	width:188px;
	height:52px;
	margin: 0 0 0 24px;
	}
	
#menupro {
	padding: 0;
	list-style-type:none;
	font-size: 12px;
	color: #92777c;
	margin: 0 0 0 23px;
	}			
#menupro li {
	float: left;
	}
	
#menupro a {
	color: #92777c;
	text-decoration:none;
	}
#menupro a:hover {
	text-decoration:underline;
	}		
		
.clearfloat {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	clear:both;
	}	

/*fin haut*/

/*newsletter*/
#newsletter {
	margin: 0;
	padding: 0;
	font-size:10px;
	width: 196px;
	}
#newsletter input[type="text"] {
	width: 190px;
	}
#newsletter input[type="submit"] {	
	background-color:#ffffff;
	color: #3f0600;
	border: thin solid #ffffff;
	width: 30px;
	cursor:pointer;
	font-size:10px;
	font-weight:bold;
	}	
#newsletter input[type="submit"]:hover {
	background-color:#3f0600;
	color: #ffffff;
	border: thin solid #3f0600;
	}
		
/*fin newsletter*/

/*centre*/

#mainContent {
	padding: 0;
	margin: 0; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
	}
	
#menuprincipal {
	position: absolute;
	left:202px;
	top:183px;
	color: #3f0600;
	list-style-type:none;
	font-size:16px;
	width: 606px;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin: 0;
	padding: 0;
	}
#menuprincipal li {
	float:left;
	}
#menuprincipal li a {
	color: #4c8476;
	text-decoration:none;
	}	
#menuprincipal li a:hover {
	text-decoration:underline;
	}		
		
#gauche {
	float: left;
	width: 202px;
	height: 422px;
	margin: 0;
	padding: 0;
	}
	
#presentation {
	display: block;
	width: 202px;
	height: 422px;
	background:url(images/gauche1-off.png) top left no-repeat;
	text-decoration: none;
	}
#presentation:hover {
	background:url(images/gauche1-on.png) top left no-repeat;
	}		
	
#centre {
	float: left;
	width: 770px;
	}
	
#centre.accueil {
	float: left;
	width: 620px;
	margin: 62px 0 0 0;
	}	
.interieur {
	padding: 90px 0 20px 20px;
	}	
	
#mainContent #centre img, .fltright, #videochoco {
	float:right;
	margin: 3px 0 3px 10px;
	padding: 0;
	}
#centre img.fltleft {
	float:left;
	margin: 3px 3px 3px 0;
	padding: 0;
}	
#mainContent #centre p {
	text-align:justify;
	font-size:11px;
	color: #3f0600;
	margin: 0 0 7px 0;
	padding: 0;
	}
#mainContent #centre a {
	color: #3f0600;
	font-style:italic;
	}	
	
#mainContent #centre ul {
	text-align:justify;
	margin: 0;
	padding: 0;
	list-style-type:none;
	font-size: 11px;
	color: #3f0600;
	}
#mainContent #centre li {
	border-bottom:thin dotted #4c8476;
	padding: 10px 0;
	margin: 0;
	}
	
#mainContent #centre ul.pros li {
	border-bottom: thin dotted #92777c;	
	padding: 10px 0;
	margin: 0;
	}	
		
		
#mainContent #centre #videochoco {
	width:320px;
	color:#92777c;
	}	
#mainContent #centre #videochoco a {
	color:#92777c;
	}
	
h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:18px;
	color: #3f0600;
	margin: 0;
	text-align: center;
	}				
	
#actu {
	float: right;
	width: 189px;
	margin: 20px 0 0 0;
	padding:0;
	height:400px;
	background:url(images/bas-actu.png) bottom left no-repeat;
	text-align:right;
	}	
#actu p {
	padding: 0 12px 5px 12px;
	width: 162px;
	margin: 0;
	text-align:right;
	font-size:10px;
	color: white;
	}
	
	
/*sur-mesure*/
#mainContent #centre p.surmesure {
	border-bottom: thin dotted #c16061;
	}	
	
#mainContent #centre p.surmesure img {
	float:none;
	margin: 0;
	}
	
#mainContent #centre p#reincarner {
	background:url(images/reincarner.png) top left no-repeat;
	width: 534px;
	height: 70px;
	padding-left: 196px;
	padding-right: 20px;
	padding-top: 30px;
	}					

/*pied de page*/
#footer {
	padding: 0 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:10px;
	background-color:#FFFFFF;
	text-align:center;
	color: #92777c;
	}

#footer p {
	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
	}
#footer a {
	color: #92777c;
}
		

#mainContent #centre p.pros {
	border-bottom: thin dotted #3f0600;
	}