@charset "UTF-8";



/*================ structure design ===============*/
body {
	background-image: url(../images/body.jpg);
	background-repeat: repeat-x;
}

#conteneur {
	overflow:hidden;
	width: 1018px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/fond_blanc_ombre.png);
	background-repeat: repeat-y;
	margin-top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	position:relative;
}

#bando {
	height: 184px;
	width: 980px;
	margin-left: 21px;
}
#encart {
	position: relative;
	float: left;
	z-index: 2;
}
#encart img {
	position: relative;
	float: left;
	z-index: 2;
}


#logo img {
	height: 109px;
	width: 166px;
	position: absolute;
	z-index: 4;
	left: 65px;
	top: 17px;
}


#animation_bando {
	z-index:1;
	position: absolute;
	height: 107px;
	width: 701px;
	top: 16px;
	left:266px;
}

#col_gauche {
	float: left;
	width: 262px;
	height: 713px;
	margin-left: 20px;
	position: relative;
}
#contenu {
	float: left;
	width: 503px;
	position: relative;
	margin-bottom:25px;
	
}
#col_droite {
	float: left;
	width: 215px;
	height:780px;
}
#pied {
	width: 1018px;
	clear: both;
	height: 48px;
	background-image: url(../images/bando_pied.png);
	background-repeat: no-repeat;
	margin-right: auto;
	margin-left: auto;

}

/*================ menu ===============*/
#menu ul {
	height: 22px;
	/*width: 629px;*/
	position: absolute;
	top: 124px;
	left: 260px;
}

#menu ul li {
	float: left;
	font-size: 12px;
	margin-left: 15px;
	background-image: url(../images/separateur_menu.jpg);
	background-repeat: no-repeat;
	background-position: right;
	padding-right: 21px;
}

#menu ul li:last-child {
	background: none !important;
}


#menu ul li a {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: block;
	font-weight: bold;
	color: #245ca3;
	padding: 5px 10px;
}

#menu ul li a:hover{
	background-color: #e9eef6;
	padding: 5px 10px;	
}

/*================ menu du pied ===============*/


#pied p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ffffff;
	padding-left:35px;
	padding-top:4px;
	float:left;
}

#pied ul {
	height: 28px;
	float:right;
	padding-top:4px;
	padding-right:25px;
}
#pied ul li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	display:inline;
	text-decoration:none;
	padding-right:10px;
}

#pied ul li a {
	color: #ffffff;
	text-decoration:none;
}

#pied ul li a:hover {
	text-decoration: underline;	
}
/*================ colonne droite ( service) ===============*/

#votre_service {
	height: 307px;
	width: 215px;
}
#votre_service h2 {
	background-color: #cfdbeb;
	height: 20px;
	width: 203px;
}
.ongletdroite {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #245ca3;
	padding-top: 3px;
	padding-left: 12px;
}
.contenuservice {
	/*height: 350px;  taille avec insertion du paragraphe fermeture conges    */
	height: 296px;
	width: 214px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #e4e4e4;
	border-left-color: #e4e4e4;
}
.contenuservice img {
	padding-top: 14px;
	padding-left: 11px;
	position: relative;
	float: left;
}
.tel span  {
	padding: 0 5px;
	line-height: 31px;
	background-color:#e9eef6;
	color: #245ca3;
	font-weight: bold;
	font-size: 19px;
}
.tel  {
	float: left;
	height: 99px;
	width: 190px;
	position: relative;
	padding-top: 14px;
	padding-left: 12px;
}

#coordonnees span {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #245ca3;
}
#coordonnees {
	height: 168px;
	width: 200px;
	padding-left: 10px;
	float: left;
	position: relative;
	padding: 0px 0 0 12px;
}
#coordonnees p {
	padding-top: 7px;	

}


/*================ colonne droite (bloc livraison) ===============*/

.contenulivraison {
	height: 66px;
	width: 214px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #e4e4e4;
	border-left-color: #e4e4e4;
}
.contenulivraison p {
	height: 68px;
	width: 203px;
	padding: 10px 0 0 12px;
}

.contenulivraison span {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #245ca3;
	
}
#votre_livraison {
	width: 215px; 
	/*top: 82px; taille avec insertion paragraphe fermeture conges */
	top:28px;
	position: relative;
}

#votre_livraison h2 {
	background-color: #cfdbeb;
	height: 20px;
	width: 203px;
}


/*================  colonne droite (bloc engagements) ===============*/


#nos_engagements {
	width: 215px;
	/*top: 97px; taille avec insertion paragraphe fermeture conges */
	top: 43px;
	position: relative;
}
#nos_engagements h2 {
	background-color: #cfdbeb;
	height: 20px;
	width: 203px;
}
.contenuengagements {
	height: 235px;
	width: 214px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #e4e4e4;
	border-left-color: #e4e4e4;
	
}
.contenuengagements ul {
	height: 209px;
	width:204px;
	padding-left: 10px;
}
.contenuengagements ul li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	padding-top: 3px;
}

.contenuengagements img {
	float:left;
	margin:0 10px 0 0 ;
	padding-top: 10px;
}

.contenuengagements li p {
	padding-left:29px;
	padding-top: 10px;
	width:130px;
}

/*================  colonne de gauche  (recherher)  ===============*/

#rechercher h2 {
	height:27px;
	/*width: 200px;*/
	background-image: url(../images/onglet_rubrique.gif);
	background-repeat: no-repeat;
	padding:3px 0 0 10px;
	z-index: 1;
}
#rechercher h2 img {
	padding-left: 2px;
}

#rechercher h2 input {
	padding: 0 0 0 10px;
	/*width: 130px;*/
}

#rechercher input {
	padding: 3px 0 0 10px;
}
/*================  colonne de gauche  (produits) ===============*/
.ongletgauche {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 5px;
	padding-left: 15px;
	z-index: 3;
	height: 27px;
	width: 215px;
}
.contenuproduits {
	height: 350px;
	width: 205px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e4e4e4;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e4e4e4;
}
#produits h2 {
	height: 22px;
	width: 200px;
	background-image: url(../images/onglet_rubrique.gif);
	background-repeat: no-repeat;
}

#produits {
	width: 215px;
	top: 17px;
	position: relative;
}

.contenuproduits ul {
	/*height: 326px;
	width: 180px;*/
	padding-left:15px;
	/* padding-top: 15px; */
}

.contenuproduits li {
	/* padding: 0 0 15px 0px; */
	line-height: 30px;
	background-image: url(../images/cube_produit_15.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left:15px;
	border-top: 1px dotted #e4e4e4;
}

.contenuproduits li:first-child {
	border-top: none !important;
}

.contenuproduits li a  {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 11px;
}
.contenuproduits li a:hover{
	color: #245ca3;
}
.contenuproduits ul.cube {
	height: 326px;
	width: 22px;
	padding-left: 15px;
	padding-top: 18px;
	float: left;
}

.contenuproduits li.cube {
	padding-top: 0 0 20px 0;
}
/*================  colonne de gauche  (newsletter)  ===============*/

#newsletter {
	width: 215px;
	top: 37px;
	position: relative;
}
#newsletter h2 {
	height: 22px;
	width: 200px;
	background-image: url(../images/onglet_rubrique.gif);
	background-repeat: no-repeat;
}
.contenunewsletter {
	height: 94px;
	width: 205px;
	float:left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e4e4e4;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e4e4e4;
}

.contenunewsletter span {
	text-decoration: underline;	
}

.contenunewsletter p {
	width: 192px;
	/*height: 81px;*/
	padding-top: 12px;
	padding-left: 15px;
}

.contenunewsletter h2 {
	height: 22px;
	width: 200px;
	padding: 3px 0 0 15px;
}
.contenunewsletter input {
	/*width: 130px;*/
	margin-top: 5px;
	float: left;
	/*padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;*/
	padding-left: 5px;
}
#inscription img {
	float: left;
	height: 18px;
	width: 23px;
	padding: 5px 0 0 5px;
}

#form_newsletter {
	padding-left:10px;	
}

/*================  colonne de gauche  (top des ventes)  ===============*/

#diapo_ventes {
	width: 215px;
	top: 37px;
	position: relative;
}
#diapo_ventes h2 {
	height: 22px;
	width: 200px;
	background-image: url(../images/onglet_rubrique.gif);
	background-repeat: no-repeat;
}
.contenu_diapo {
	height: 174px;
	width: 205px;
	float:left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e4e4e4;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e4e4e4;
	margin:0 0 0 1px;
}


/*=================     les styles  et classes     ==================*/

.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #245ca3;
	
}

.style2  {
	text-decoration: underline;
	padding-left: 5px;
	padding-top: 10px;
}

.style3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #245ca3;
}
.style4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #245ca3;
	font-weight: bold;
	padding-top: 17px;
}
.style5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #245ca3;
	font-weight: bold;
}

.style6{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #245ca3;
	font-weight: bold;
	padding-top: 17px;
}

.style7{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #245ca3;
	font-weight: bold;
	
}
.style8{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;

}
.style9{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight: normal;
	color: #245ca3;
}

.style10{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold;
	color: #245ca3;
}

.style11{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight: normal;
	color: #245CA3;
}
.style12{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:15px;
	color: #245CA3;
	font-weight: bold;
}

.style13{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #245CA3;
	font-weight:normal;
}

.style14{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #FFA133;
	font-weight:bold;
}
.style15{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #FFA133;
	font-weight:normal;
}
.style16{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #FFA133;
	font-weight:lighter;
}
.style17{
	padding-top: 15px;
}
.style18{
	padding-top: 5px;
	
}

.mail1 {
	color: #000000;
	font-weight: lighter;
	text-decoration: underline;
}

.mail2 {
	color: #ffa133;
	font-weight: lighter;
	text-decoration: underline;
	font-size:10px;
}
.mail3 {
	color: #OOOOOO;
	font-weight: lighter;
	text-decoration: underline;
}
/*=================       formulaire devis        ==================*/

#contenu_form_devis {
	width:457px;
}
#contenu_form_devis_ok p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;

}
#contenu_form_devis_ok img{
	float:right;
	width:69px;
	height:20px;
	margin-top:20px;
}
.error{
color:#FFA133;
}

.largeur{
	width:345px;
}
/*===========  reponse formulaire dde de devis envoyé      ============*/
#contenu_form_devis_ok {
	width:457px;
}

#contenu_form_devis_ok p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #000000;
	width:457px;
}

/*=================    formulaire contact  ==================*/

#contenu_form_contact {
	width:457px;
}
.largeur2 {
	width:350px;
}

/*===========  reponse formulaire contact  dde de renseignement envoyé   ============*/
#contenu_form_contact_ok {
	width:457px;
}

#contenu_form_contact_ok p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #000000;
	width:457px;
}
#contenu_form_contact_ok img {
	float:right;
	width:69px;
	height:20px;
	margin-top:20px;
}

/*=================      page nous contacter      ==================*/

.nous_contacter p {
	padding-top: 19px;	
}

/*=================      page coordonnées      ==================*/

.plan p {
	padding-top: 19px;	

}

.situation p {
	padding-top: 19px;	
}

.google_maps {
	padding-top: 15px;
}

a {
	color: #000000;
}
/*=================      page liste des produits     ==================*/

#liste_produit h1 {
	margin-bottom: 26px;
}
.bande_liste {
	width:457px;
	height: 110px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #F7F7F7;
	border-right-color: #F7F7F7;
	border-bottom-color: #F7F7F7;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #F7F7F7;
	margin-bottom: 18px;
}

#vignette_liste {
	position: relative;
	float:left;
}

#descriptif_liste {
	width:270px;
	height: 110px;
	background:#f7f7F7;
	position: relative;
	float:left;
}

#descriptif_liste img {
	padding-top:7px;
	
}

#descriptif_liste h2 {
	position: relative;
	float:left;	
	width:262px;
	padding-top:8px;
	padding-left:8px;
	padding-bottom:10px;
}
#descriptif_liste p {
	position: relative;
	float:left;	
	width:262px;
	padding-left:8px;
}

#prix_liste {
	width: 94px;
	height: 110px;
	background-color: #e4ebf4;
	float:left;
	position: relative;
}
#prix_liste p {
	line-height:24px;
	float:left;
	text-align: center;
	vertical-align: middle;	
	padding-top: 10px;
	padding-left: 7px;
}


/*=================      page fiche produits     ==================*/
#fiche_produit h1{
	width: 457px;
}
.fiche {
	width: 457px;
	float:left;
	position:relative;
}
.photo {
	position: relative;
	width:166px;
	border: 2px solid #f7f7f7;
	height:194px;
	float:left;
	margin-top: 28px;
	margin-bottom: 28px;
}
.fond {
	background-color:#e4ebf4;	
}
.reference table {
	border-collapse:collapse;	
	border:1px solid #dbdbdb;
	text-align: center;
}
.photo_zoomer {
	width: 302px;
	height:355px;
	position:absolute;
	left: 0px;
	top:28px;
	border:1px solid #dbdbdb;
	display:none; /*====== masque la photo zoomer */
}

.photo img {
	float:left;
}

.fermer {
	position:absolute;
	right:0px;
	padding:5px 5px 0 0;
	text-decoration:none;
}


.zoom {
	position:absolute;
	right:0px;
	bottom:0px;
}
.reference {
	width: 257px;
	height:194px;
	float:left;
	margin-top: 28px;
	padding-left:28px;
}
.reference p {
	margin-bottom: 18px;
}
.descriptif {
	width: 457px;
	float:left;
}
.descriptif p {
	float:left;
	padding-top: 8px;
}
.bouton {
	float:left;
	width:445px;
}
.bouton img {
	margin-top:15px;
	padding-left:5px;
	float:right;
}
/*===============  page accueil ======================*/


#un {
	position:relative;
	float:left;
	width: 620px;
	height:164px;
	/*background-color: #f7f7f7;*/
	margin-bottom: 21px;
}
		/*================ Amination congé infos temporaire (a rajouter) ===============
		.anim_conges {
			width:294px;
			height:100px;
			padding-top:10px;
			padding-bottom:10px;
		}
		*/
#deux {
  float:left;
  margin-bottom:21px;
  margin-top:65px;/*================ a remettre à 110px apres avoir insere  animimation conges ===============*/
 
}
/*
#deux {
	float:left;
	margin-bottom:21px;
	margin-top:65px;
}
*/
#trois {
	float:left;
	width: 584px;
	height:164px;
	/*background-color: #f7f7f7;*/
}

.accueil {
	float:left;
	width: 294px;
}
#un img {
	padding-top: 0px;
	padding-right: 0px;	
	height:210px;
	width: 1px;
	padding: 3px 0 0 10px;
	float:left;
	position:relative;
}
.accueil h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold;
	color: #245ca3;
	padding-bottom:5px;
	
}
.accueil p {
	width: 270px;
}

#partenaire {
	float:left;
	position:relative;
	float:left;
	width:285px;
	padding: 0 0 0 28px;
	height: 160px;
}
#partenaire h2 {
	float:left;
	/*position:relative;
	float:left;*/
	width:132px;
	padding-bottom:2px;
}
#partenaire h3 {
	float:left;
	/*position:relative;
	float:left;*/
	width:132px;
	clear:left;
	padding-top:5px;
	
}
#partenaire h3 a {
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #FFA133;
	text-decoration:none;
	font-weight:bolder;
	font-weight:normal;
	width:215px;
	clear:left;
}
#partenaire img {
	width:115px;
	height:70px;
	float:left;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 8px;
	padding-left: 13px;
}
#partenaire .detail {
	width:120px;
	float:left;
	
}
#partenaire p {
	float:left;
	width: 222px;
	padding-top:2px;
	clear:left;
}
#partenaire img {
	position:relative;
	float:left;
}

.espace_top {
	margin-top: 16px;
}
.a_votre_service p {
	float:left;
	/*height:99px;*/
	width: 180px;
	padding: 0 0 0 0px;
	/*padding-top:10px;*/
}

.a_votre_service img {
	padding-bottom:10px;
	padding-left:23px;
	float:left;
}
.adresse {
	float:left;
	position: relative;
	width:167px;
	padding: 10px 0 0 43px;
}
.icone_paiement img {
	float:left;
	position: relative;
	top:11px;
	display: block;
	padding-top: 2px;
	padding-bottom:5px;
	padding-left: 20px;
}
.service h2 {
	width:275px;
	padding: 10px 0 0 0;
}

.contact {
	float:left;
	width:237px;
	padding:5px 0 0 42px;
}
.contact p {
	padding:4px 0 0 0px;;
		

}
.contact img {
	top:0px;	
	float:left;
	
}

/*===============  page résultat recherche  ======================*/
.resultat_recherche h2 {
	margin:0 0 20px 0px;

}
.resultat_recherche p {
	padding: 5px 0 0 10px;

}

.fond_blanc {
	background-color:#FFFFFF;
	width:440px;
	height:25px;
}
.fond_bleu {
	width:440px;
	height:25px;
	background-color:#CFDBEB;
}
/*===============  page plan du site ======================*/

#plan{
}

#plan h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #245ca3;
	font-weight: bold;
	margin-bottom:10px;
	margin-top:10px;
}

#plan li{
	padding:10px 0 5px 30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration:none;	
}

#plan li a {
	text-decoration:none;	
}
#plan li a:hover {
	color: #245ca3;
	text-decoration: underline;	
}
/*===============  page mentions légales ======================*/

.mention h1 {
	color: #245ca3;
	font-size:18px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:15px;
	
}
.mention p {
	margin:0 0 10px;
}

.mention p span  {
	padding-bottom:15px;
	
}
/*===============  page conditions de vente ======================*/

.conditions h1 {
	color: #245ca3;
	font-size:18px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:15px;
	
}
.conditions p {
	margin:0 0 10px;
}

.conditions a {
	text-decoration: none;	
}
.conditions a span{
	text-decoration: underline;		
}

/*===============  page confirmation =========*/
.confirmation {
	width:500px;
	float:left;

}
.confirmation p {
	margin:0 0 10px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
}

/*===============  page confirmation =========*/
.desinscription {
	width:500px;
	float:left;

}
.desinscription p {
	margin:0 0 10px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
}

/*===============  page newsletter ok =========*/
.reponse_inscription {
	width:500px;
	float:left;

}
.reponse_inscription p {
	margin:0 0 10px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
}