/* Feuille de style pour le contenu des pages 
 * C'est cette feuille de style qui doit être liée aux pages du site
 * La feuille de style de la charte est appelée depuis cette feuille.
 */
 
/* Import des style pour la charte */
@import "charte.css";
@import "typographie.css";

/* RUBRIQUE ACCUEIL */
#promo-nouv{
	float:left;
	width:550px;
	background:#2f2f2f url(../images/charte/bg-promo.jpg) top left no-repeat;
	padding:50px 0 10px 0;
	font-size:11px;
}

#promo, #nouv {
	float:left;
	width:235px;
	padding:0 20px 0 20px;
	text-align:center;
}

#photoProm{
	width:200px;
	height:200px;
	border:5px solid #000;
	background-color:#000;
	background-position:center center;
	background-repeat:no-repeat;
	margin:0 auto;

}

#photoNouv{
	width:200px;
	height:200px;
	border:5px solid #000;
	background-color:#000;
	background-position:center center;
	background-repeat:no-repeat;
	margin:0 auto;

}

.titre{
	color:#ff0101;
	font:normal bold 15px Arial, Helvetica, sans-serif;
}

.prixRaye{
	color:#ccc;
	font-size:14px;
	text-decoration:line-through;
}

.prixPromo{
	/*color:#FFF;*/
	color:#FC0500;
	font-size:18px;
}

#promo a.detail, #promo a:visited.detail, #nouv a.detail, #nouv a:visited.detail{
	background-color:#000;
	padding-top:2px;
	padding-bottom:2px;
	display:block;
	width:100%;
	font:small-caps bold 11px Arial, Helvetica, sans-serif;
	color:#FC0500;
	text-decoration:none;
	}

#promo a:hover.detail, #promo a:active.detail, #nouv a:hover.detail, #nouv a:active.detail{color:#e6e6e6;}
	
#promo a,#nouv a{color:#fff; text-decoration:none;}
#promo a:hover,#nouv a:hover{color:#ff0101;}


/* RUBRIQUE ACTUALITE */
#bloc-actualiteaccueil {
	width:500px;
	height:93px;
	font:small-caps normal 14px Arial, Helvetica, sans-serif;
	color:#999999;
	background:#333333;
	margin:5px 0 0 0;
}

#contenuTexte a.image-actualiteaccueil:link, #contenuTexte a.image-actualiteaccueil:visited{
	width:100px;
	height:80px;
	margin:5px 0 5px 5px;
	text-align:center;
	float:left;
	padding:0;
}
#contenuTexte a.image-actualiteaccueil:link img, #contenuTexte a.image-actualiteaccueil:visited img{border:1px solid #000;}


#bloc-actualiteaccueil2{
	float:left;
}

#bloc-actualiteaccueil2 #contenu-actualiteaccueil{
	width:490px;
	margin-left:5px;
	margin-top:5px;
	float:left;
	color:#e6e6e6;
	border:1px solid #000000;
	background:#333333 none repeat scroll 0 0;
}

#bloc-actualiteaccueil2 img{
	float:left;
	margin-right:10px;
	width:100px;
	margin:5px 5px 5px 5px;
}

#bloc-actualiteaccueil2 .description-actualite{
	font:normal normal 11px Arial, Helvetica, sans-serif; 
	color:#e6e6e6;
	margin-right:5px;
}

#bloc-actualiteaccueil2 .titre-actualite{
	color:#e6e6e6;
	font:small-caps normal 15px Arial, Helvetica, sans-serif;
	font-variant:small-caps;
}

#bloc-actualiteaccueil2 .date-actualite{
	color:#5E5E5E;
	font:italic normal normal 12px Arial, Helvetica, sans-serif;
}







/* RUBRIQUE ACTUALITE */
#actualites {
	width:500px;
	margin:10px 0 20px 0;
	}
	
.bloc-actualite {
	width:500px;
	background:#333;
	float:left;
	font:small-caps normal 14px Arial, Helvetica, sans-serif;
	color:#999999;
	margin:10px 0 10px 0;
}

#contenuTexte a.image-actualite:link, #contenuTexte a.image-actualite:visited{
	width:182px;
	height:182px;
	margin:5px 0 5px 5px;
	text-align:center;
	float:left;
	padding:0;
}
#contenuTexte a.image-actualite:link img, #contenuTexte a.image-actualite:visited img{border:1px solid #000;}

.blocvignette-actualite{
	width:290px;
	height:40px;
	margin:3px 0 5px 0;
	text-align:left;
	float:left;
}
#contenuTexte .blocvignette-actualite a:link img, #contenuTexte .blocvignette-actualite a:visited img {
	margin-right:5px; 
	border:1px solid #000;
	float:left;
	}


/** **/
.contenu-actualite{
	width:280px;
	margin:0 0 0 15px;
	float:left;
	padding:5px 0;
	color:#e6e6e6;
}

#contenuTexte .contenu-actualite p.description-actualite{
	width:100%;
	margin:0 0 0 0;
	float:left;
	font:normal normal 11px Arial, Helvetica, sans-serif; 
	color:#e6e6e6;
}

#contenuTexte .contenu-actualite p.titre-actualite{
	margin:0 0 0 0;
	color:#e6e6e6;
	padding:5px 0 0 0 ;
	font:small-caps normal 15px Arial, Helvetica, sans-serif;
}

#contenuTexte .contenu-actualite p.date-actualite{
	margin:0 0 5px 0;
	color:#5E5E5E;
	font:italic normal normal 12px Arial, Helvetica, sans-serif;
}

#contenuTexte h3 a:link, #contenuTexte h3 a:visited{
	display:block;
	color:#FC0500;
	font:small-caps normal 13px Arial, Helvetica, sans-serif;
	background-color:#222;
	margin:5px 0 5px 0;
	padding:1px 0 2px 5px;
}
#contenuTexte h3 a:hover, #contenuTexte h3 a:active{color:#5E5E5E;}






/******************************************* CATALOGUE ****************************************/

/* PAGINATION + FILTRE */
#chemin-liste {
	color:#FC0500;
	width:500px;
	float:left;
	padding:2px 0 0 5px;
	}

#filtre {
	float:right;
	width:140px;
	}
	
select.liste-listing {
	width:130px;
	background-color:#2D2D2D;
	color:#666;
	font-size:11px;
	text-align:center;
	border:1px solid #333;
	margin-right:10px;
	float:left;
	height:16px;
	padding:0;
}

#pagination {
	float:right;
	margin:0 15px 0 0;
	color:#000;
	font-size:11px;
	}

/* CATALOGUE */
#catalogue2 {
	width:500px;
	margin:0;
}
#contenuTexte #catalogue2 p { padding:0 10px 0 5px; line-height:1.3em;}
	
#contenuTexte .vignette2 {
	width:495px;
	height:93px;
	background:#242424;
	font:small-caps normal 14px Arial, Helvetica, sans-serif;
	margin:20px 0 20px 0;
	float:left
}

#contenuTexte a.img-vignette2:link, #contenuTexte a.img-vignette2:visited{
	width:100px;
	height:80px;
	margin:5px 15px 5px 5px;
	text-align:center;
	float:left;
	padding:0;
	position:relative;
	z-index:1;
}
#contenuTexte a.img-vignette2:link img, #contenuTexte a.img-vignette2:visited img{border:1px solid #666;}

.loupe {
	width:20px;
	height:18px;
	background:url(../images/charte/loupe.png) left top no-repeat;
	position:absolute;
	top:0; 
	right:0;
	_background:url();
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/charte/loupe.png', sizingMethod='image');
	}
	
.contenu-vignette{
	width:355px;
	height:80px;
	margin:8px 0 0 0;
	float:left;
	position:relative;
}
#contenuTexte .contenu-vignette p{color:#999;}

#contenuTexte a.marque2:link, #contenuTexte a.marque2:visited {
 	margin:2px 0 0 0;
	display:block;
	font:small-caps normal 14px Arial, Helvetica, sans-serif;
	color:#FFF;
	width:335px;
	padding:1px 0 0 5px;
}
#contenuTexte a.marque2:hover, #contenuTexte a.marque2:active {
	color:#FC0500; 
	text-decoration:none; 
	}
	
#contenuTexte .vignette2 h1 {
	font:small-caps normal 13px Arial, Helvetica, sans-serif;
	color:#FFF;
	background:url(../images/charte/bg-prix.gif) left top no-repeat;
	width:335px;
	height:20px;
	padding:2px 0 0 20px;	
	position:absolute;
	bottom:0;
}

#contenuTexte span.label-prix {float:left;}
#contenuTexte span.label-prixpromo {
	float:left;
	margin:2px 0 0 10px;
	text-decoration:line-through;
	font-size:11px;	
	color:#666;
	}
#contenuTexte a.label-contact:link, #contenuTexte a.label-contact:visited {
	float:right; 
	margin-right:25px; 
	color:#666;
	}
#contenuTexte a.label-contact:hover, #contenuTexte a.label-contact:active {color:#FC0500;}
#contenuTexte a.label-contact2:link, #contenuTexte a.label-contact2:visited {
	float:right; 
	margin-right:25px; 
	color:#FC0500;
	}
#contenuTexte a.label-contact2:hover, #contenuTexte a.label-contact2:active {color:#FC0500;}


.picto-promo, .picto-new, .picto-epuise {
	top:0px;
	left:0px;
	width:46px;
	height:46px;
	z-index:100;
	position:absolute;
	}
.picto-promo {
	background:url(../images/charte/picto-promo.png) left top no-repeat;
	_background:url();
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/charte/picto-promo.png', sizingMethod='image');
}
.picto-new {
	background:url(../images/charte/picto-new.png) left top no-repeat;
	_background:url();
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/charte/picto-new.png', sizingMethod='image');
	}
.picto-epuise {
	background:url(../images/charte/picto-epuise.png) left top no-repeat;
	_background:url();
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/charte/picto-epuise.png', sizingMethod='image');}

.picto-selection {
	top:0px;
	left:0px;
	width:70px;
	height:70px;
	z-index:100;
	position:absolute;
	background:url(../images/charte/picto-selection.png) left top no-repeat;
	_background:url();
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/charte/picto-selection.png', sizingMethod='image');
	}




/* FICHE PRODUIT */
#fiche-produit{
	width:500px;
	float:left;
	margin:20px 0 0 0;
}

#fiche-produit #img-prod{
	float:left;
	width:200px;
	height:200px;
	text-align:center;
	position:relative;
	margin:0 20px 30px 10px;
}

#fiche-produit #img-prod a:link img, #fiche-produit #img-prod a:visited img{border:1px solid #333;}

#fiche-produit .infos-prod-ref{
	float:left;
	width:240px;
	height:200px;
	padding:0  0 0 15px;
	border-left:1px solid #333;
}

#contenuTexte #fiche-produit p.txt-designation{
	font:small-caps bold 13px Arial, Helvetica, sans-serif;
	color:#e6e6e6;
	margin-top:5px;
	padding:0;
	text-align:left;
	width:100%;
}

#contenuTexte #fiche-produit p.txt-marque{
	font:small-caps normal 12px Arial, Helvetica, sans-serif;
	padding-bottom:0;
	color:#333;
	width:100%;
}

#contenuTexte #fiche-produit p.txt-reference{
	font:small-caps normal 12px Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	color:#333;
	width:100%;
}

#fiche-produit .txt-prixTTC{
	font:normal bold 18px Arial, Helvetica, sans-serif;
	/*color:#333;*/
	color:#FC0500;
	margin:10px 5px 0 0;
	padding:0;
	width:100%;
}

#fiche-produit .petit{
	color:#333; 
	width:100%;
	font-size:11px;
	}

#fiche-produit .txt-prixpromo{
	font:normal bold 12px Arial, Helvetica, sans-serif;
	color:#333;
	text-decoration:line-through;
	margin:0 5px 0 0;
}

#fiche-produit .lblinput-liste{
	font:small-caps bold 11px Arial, Helvetica, sans-serif;
	width:55px;  
	margin:5px 0 0 0;
	padding:2px 2px 0 0;
	color:#333;
	float:left;
}

#contenuTexte a:link.btpanier, #contenuTexte a:visited.btpanier {
	background:url(../images/charte/btn-panier.gif) left 2px no-repeat;
	padding:2px 0 0 23px;
	width:105px;
	height:15px;
	margin:20px 0 0 0;
	font-size:11px;
	font-weight:bold;
	color:#e6e6e6;
	float:left;
	font-variant:small-caps;
}

#contenuTexte a:link.btami, #contenuTexte a:visited.btami {
	background:url(../images/charte/btn-amis.gif) 2px 2px no-repeat; 
	padding:2px 0 0 25px;
	width:105px;
	height:15px;
	margin:20px 0 0 0;
	font-size:11px;
	font-weight:bold;
	color:#333;
	display:block;
	font-variant:small-caps;
}

#contenuTexte a:link.btinteret, #contenuTexte a:visited.btinteret {
	background:url(../images/charte/btn-contact.gif) 1px 2px no-repeat; 
	padding:2px 0 0 23px;
	width:200px;
	height:15px;
	margin:3px 0 0 0;
	font-size:11px;
	font-weight:bold;
	color:#333;
	display:block;
	font-variant:small-caps;
}

#contenuTexte a:hover.btpanier, #contenuTexte a:hover.btami, #contenuTexte a:active.btpanier, #contenuTexte a:active.btami,
#contenuTexte a:hover.btinteret, #contenuTexte a:active.btinteret {color:#FC0500; text-decoration:none;}

#fiche-produit .descriptif-prod{
	margin:0 0 5px 10px;
	width:480px;
	/*color:#333;*/
	color:#FFF;
	font:normal normal 12px Arial, Helvetica, sans-serif;
}


/* PRODUITS ASSOCIES */
#bloc-produit-assoc {
	width:500px;
	padding:5px 5px 5px 10px;
	font-size:12px;
	color:#333;
}

.produit-assoc {
	width:110px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	color:#333;
	margin:10px 10px 0 0;
	float:left;
}
#contenu #bloc-produit-assoc a img {border:1px solid #333;}



	
#bloc-ami {
	width:350px;
	float:left;
	margin:25px 0 0 10px;
	padding-left:30px;
	color:#FFF;
	font:small-caps bold 12px "Trebuchet MS"  Arial, Helvetica, sans-serif;
}

#bloc-ami #f_envoyerAmi input, #bloc-ami #f_envoyerAmi textarea, #bloc-ami #f_envoyerAmi .bouton-ami {
	font:normal bold 11px "Trebuchet MS"  Arial, Helvetica, sans-serif;
	color:#FFF;
	}

#bloc-ami #f_envoyerAmi input{
	width:200px;
	height:15px;
	padding-left:2px;
	background:#5E5E5E;
	border:1px solid #FFF;
}

#bloc-ami #f_envoyerAmi textarea{
	width:200px;
	height:80px;
	padding-left:2px;
	background:#5E5E5E;
	border:1px solid #FFF;
}

#bloc-ami #f_envoyerAmi .bouton-ami{
	width:80px;
	height:21px;
	color:#FFF;
	background:#5E5E5E;
	border:1px solid #FFF;
	cursor:pointer;
	text-align:center;
	padding:0;
	margin:0;
	font-variant:small-caps;
	}

#bloc-ami h1{
	margin:0 0 0 0;
	color:#FFF;
	background:url(../images/charte/puce.png) top left no-repeat;
	padding:0;
	height:30px;
	font:small-caps bold 22px "Trebuchet MS"  Arial, Helvetica, sans-serif;
}	
	
	
	
	
/** RUBRIQUE CONTACT **/
#bloc-adrcontact {
	width:200px;
	float:left;
	margin:0 15px 0 0;
}
#bloc-adrcontact p {font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; text-align:left; margin-bottom:10px;}

/** **/
#bloc-contact {
	width:280px;
	float:left;
	margin:40px 0 0 0;
	font:normal 11px Arial, Helvetica, sans-serif;
	color:#FFF;
}
#bloc-contact table {width:100%;}

#formContact input, #formContact textarea, #formContact .bouton {
	font:normal 10px Arial, Helvetica, sans-serif;
	color:#FFF;
	padding:0 10px 0 2px;
	border:1px solid #333;
	background:none;
}

#formContact input, #formContact textarea{
	width:170px;
	margin:0;
}

#contenu #bloc-contact label{
	width:80px;
	text-align:right;
	display:block;
	padding-right:10px;
	color:#333;
	font:normal 11px Arial, Helvetica, sans-serif;
}

#formContact .radio{
	width:9%;
	border:none;
}

#formContact .check{
	width:10%;
	border:none;
	margin:0 3px 3px 0;
	color:#FFF;
}

#formContact select.liste-form{
	width:175px;
	text-align:left;	
	color:#FFF;
	padding-left:2px;
	background:#2D2D2D;
	border:1px solid #e6e6e6;
	font:normal 11px Arial, Helvetica, sans-serif;
}

#formContact .bouton{
	width:80px;
	cursor:pointer;
	color:#FFF;
	text-align:center;
	background:#333;
	border:1px solid #333;
	padding:0;
}
#formContact .bouton:hover {color:#e61132;}

#contenu #formContact .nota {
	font:italic 10px Arial, Helvetica, sans-serif;
	color:#333;
	text-align:right;
	line-height:12px;
	}
.champRequis{color:#E53625; font-size:9px;}


/* RUBRIQUE MENTIONS LEGALES */
#bloc-mentions {
	margin:10px 0 0 0;
	width:500px;
	}



.indisponible{
border:1px solid white;
background:#000000;
font-weight:bold;
text-align:center;
padding:5px;
margin:10px;
}