/***************** BODY *****************/
*{
/*---on passe toutes les marges à 0---*/
margin:0;
padding:0;
}
body,html{
height:100%;
}
body{
background:#ff3399 url(../images/charte/bg-container.jpg) center top repeat-y;
font-family:Arial, Helvetica, sans-serif;
}
/***************** CONTAINER *****************/
#container{
position:relative;
min-height:100%;
width:990px;
margin:0 auto;
background:url(../images/charte/bg-container.jpg) top center no-repeat;

}
/***************** HEADER *****************/
#header{
width:990px;
height:125px;
display:block;
background:url(../images/charte/bg-header.jpg) no-repeat top left;
font-size:11px;
}

.decon{
position: absolute;
font-size:11px;
right: 0%;
margin-right: 20px;
padding-top: 127px;
line-height: 12px;


}
 .decon a{

    color:#FF49A6;
    text-decoration: none;
  }

 .decon a:hover{
    color:#000000;
    text-decoration: none;
  }

/***************** MENU TOP *****************/
#menuTop{
width:801px;
border: 0px solid red;
height:30px;
padding:0 0 0 189px;
background:url(../images/charte/bg-menuTop.jpg) left top no-repeat;
list-style:none;
float: left;
}
#menuTop li{
float:left;
}
#menuTop a{
text-decoration:none;
display:block;
height:25px;
padding-top:5px;
margin:0 15px 0 15px;
color:#FF3399;
float: left;
font:bold 15px/20px Verdana, Arial, Helvetica, sans-serif;
}
#menuTop a:hover{
color:#000;
}
#container #menuTop a:hover{
background-position:left bottom;
}

#colLeft{
float:left;
width:160px;
padding:0 0 149px 15px;
}
/***************** CATALOGUE */
#catalogue{
position:relative;
padding:43px 0 0 0;
background:url(../images/charte/bg-catalogue.jpg) left top no-repeat;
list-style:none;
}
#catalogue h1 a{
text-decoration:none;
font:bold 11px/20px Arial, Helvetica, sans-serif;
color:#505050;
display:block;
height:20px;
overflow:hidden;
padding:0 0 0 18px;
border-bottom:1px solid #dddddd;

}
#catalogue h1 a:hover{
color:#000;
}
/***************** SOUS MENU CATALOGUE */
#catalogue ul{
list-style:none;
margin:0px 5px 0 10px;


}
#catalogue li a{
text-decoration:none;
font:11px Arial, Helvetica, sans-serif;
color:#666666;


overflow:hidden;
padding:2px 0 2px 8px;
}
#catalogue li a:hover{
text-decoration:underline;
color:#000;
}
/***************** RECHERCHE */
form#frmRecherche{
position:relative;
height:42px;
padding:35px 0 0 12px;
background:url(../images/charte/bg-recherche.jpg) left top no-repeat;
}
form#frmRecherche input.case{
font:10px Arial, Helvetica, sans-serif;
color:#666;
width:80px;
height:17px;
padding:0 2px 2px 2px;
border:none;
margin:-2px 0 0 30px;
background:none;
}
form#frmRecherche input.btn{
position:absolute;
width:20px;
height:19px;
top:31px;
left:135px;
}
/***************** COL RIGHT *****************/
#colRight{
float:right;
width:180px;
padding:0 15px 0 0;
}
#colRight form input.case{
font:10px Arial, Helvetica, sans-serif;
color:#666;
height:14px;
padding:2px;
border:none;
background:none;
}
/***************** PANIER */
#panier{
position:relative;
height:131px;
padding:43px 0 0;
background:url(../images/charte/bg-panier.jpg) left top no-repeat;
}
#panier p{
font:11px/18px Arial, Helvetica, sans-serif;
color:#4c4e4e;
text-align:center;
}
#panier p span{ /***************** prix */
font-weight:bold;
color:#956e5d;
}
#panier a.commander{
text-decoration:none;
display:block;
width:99px;
height:30px;
margin:10px 0 0px 50px;
background:url(../images/charte/bt-commander.jpg) left top no-repeat;
}
#panier a:hover.commander{
background-position:left bottom;
}
/***************** IDENTIFICATION */
.identification3{
position:relative;
height:90px;
padding:47px 0 0 0;
text-align: center;
background:url(../images/charte/bg-identification2.jpg) left top no-repeat;
font:normal 11px/14px Verdana, Arial, Helvetica, sans-serif;
}

.identification3 img{
margin: 22px 0px 0px 21px;

}



 .identification3 a{

    color:#FF49A6;
    font-weight: bold;
    text-decoration: none;
  }

 .identification3 a:hover{
    font-weight: bold;
    color:#000000;
    text-decoration: none;
  }




form.identification2{
position:relative;
height:111px;
padding:47px 0 0 0;
background:url(../images/charte/bg-identification.jpg) left top no-repeat;
}
form.identification2 input.btn{
position:absolute;
width:99px;
height:30px;
top:95px;
left:50px;
}
form.identification2 a{
position:relative;
margin-left: 35px;

top:30px;
font:11px Arial, Helvetica, sans-serif;
text-decoration:none;
color:#FD4EA9;
}
form.identification2 a:hover{
text-decoration:underline;
color:#666;
}
form.identification2 input.case{
margin:0 0 6px 53px;
width:104px;
}
/***************** AMI */
#colRight a.ami{
text-decoration:none;
display:block;
height:65px;
background:url(../images/charte/bt-ami.jpg) center top no-repeat;
}
/***************** NEWSLETTER */
form.news2{
position:relative;
height:31px;
padding:24px 0 0 12px;
background:url(../images/charte/bg-news.jpg) left top no-repeat;
}
form.news2 input.case{
width:136px;
}
form.news2 input.btn{
position:absolute;
width:20px;
height:19px;
top:26px;
left:155px;
}
/***************** CONTENU *****************/
#contenu{
float:left;
width:600px;
padding:21px 0 0 10px;

}

#contenu-text{
font:normal 12px/18px Verdana, Arial, Helvetica, sans-serif;
color:#8b8b8b;
text-align: justify;
padding-bottom: 15px;
}


#blocFlash{
width:600px;
height:130px;
display:block;
}
#contenu.blocFlash{
min-height:194px;
}
/*---obligatoire pour le footer---*/
/*---mettre <div class="clearer" id="clearFooter"></div>--*/
/*---apres la div contenu---*/
.clearer{
clear:both;
}
#clearFooter{
height:41px;/*--- = à la hauteur du footer ---*/
}
/***************** FOOTER *****************/
#footer{
position:relative;
clear:both;
width:990px;
height:41px;
margin:-41px auto 0;
background:url(../images/charte/bg-footer.jpg) left top no-repeat;
overflow:hidden;

}
#idep{
position:absolute;
left:20px;
top:17px;
width:180px;
height:25px;
}
#idep img{
float:left;
}
#footer #idep a.idep{
text-decoration:none;
display:block;
font:10px/8px Arial, Helvetica, sans-serif;
color:#000;
margin:3px 0 0;
}
#footer #idep a.idep.optea{
margin:0;
}
#footer #idep a:hover.idep{
text-decoration:none;
color:#fff;
}
/***************** STYLE FOOTER *****************/
#footer p{
font:10px Arial, Helvetica, sans-serif;
color:#666;
line-height: 28px;
padding:15px 175px 0 200px;
text-align:center;
}
#footer a:link, #footer a:visited{
font:10px Arial, Helvetica, sans-serif;
text-decoration:none;
color:#fff;
}
#footer a:hover, #footer a:active{
font:10px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#fff;
}





/* retrouver */
.login-box{
  width:305px;
  margin:10px auto 5px;
  }



 .line{
  height:20px;
  background: url(../images/charte/line.jpg) repeat-x left center;
  line-height:0;
  font-size:0px;
  padding:0;
  clear:both;
  }



.line2{
  height:10px;
  width: 270px;
  background: url(../images/charte/line2.jpg) repeat-x left center;
  line-height:0;
  font-size:0px;
  margin:0px 0px 0px 10px;
  clear:both;
  }

  .line3{
  height:10px;
  background: url(../images/charte/line2.jpg) repeat-x left center;
  line-height:0;
  font-size:0px;
  margin:0px 4px 0px 10px;
  clear:both;
  }


 /* accueil product */
  .product-set0{
    background-image: url(../images/charte/news0.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    width: 600px;
    float: left;
    margin-top: 15px;
  }

    .product-set1{
    background-image: url(../images/charte/news4.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    width: 600px;
    float: left;
    margin-top: 15px;
  }

    .product-set2{
    background-image: url(../images/charte/news3.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    width: 600px;
    float: left;
        margin-top: 15px;
  }




.product-list{
width: 290px;
float: left;
padding-left: 4px;
margin-top: 40px;
vertical-align: top;
}

.product-list .top{
width: 290px;
background-image: url(../images/charte/news2.jpg);
background-repeat: no-repeat;
background-position: top left;


}


.product-list .middle{
width: 290px;
background-image: url(../images/charte/news-middle.jpg);
background-repeat: repeat-y;
background-position: top left;
float: left;

}


.product-list .middle2{
width: 290px;
background-image: url(../images/charte/news-middle2.jpg);
background-repeat: repeat-y;
background-position: top left;
float: left;

}



.product-list .middle .text{
width: 270px;
text-align: justify;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
height: 60px;
margin: 0px 0px 0px 10px;


}

.product-list .middle .title{
width: 130px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border: 0px solid #FF3333;
margin: 0px 0px 0px 10px;
text-align: right;
border: 0px solid #FF3333;
height: 35px;
}

.product-list .middle .title a{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #010101;
text-decoration: underline;
}

.product-list .middle .title:hover{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #DFB64D;
text-decoration: underline;
}

.product-list .middle .desig{
width: 140px;
float: left;
margin-left: 10px;
border: 0px solid red;
margin-top: 15px;

}

.product-list .middle .prix{
background-image: url(../images/charte/prix.jpg);
background-repeat: no-repeat;
background-position: top right;


}

.product-list .middle .prix span{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
float:right;
line-height: 32px;
margin-right: 15px;
width: 60px;
border: 0px solid blue;
}

.product-list .middle .prix .prix-promo{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666666;
float:left;
width: 55px;
text-align: left;
line-height: 32px;
border: 0px solid red;
}

.product-list .middle .circle{

border: 0px solid red;
float: left;
width: 275px;
margin: 0px 0px 0px 10px;
}

.product-list .middle .circle img{
float: left;
cursor: pointer;
border: 0px solid #D3D1D1;


}



.product-list .middle .photo{
float: right;
width: 120px;
margin-right: 10px;
}



.liens{
background-image: url(../images/charte/arrows.jpg);
background-repeat: no-repeat;
background-position: left center;
height: 19px;
padding-left: 15px;

}


.liens a{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #010101;
text-decoration: underline;
}

.liens:hover{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #DFB64D;
text-decoration: underline;
}
 /* aceueil end */



 /* start product-list */
.product-list2{
width: 140px;
float: left;
padding-left: 7px;
margin-top: 15px;
vertical-align: top;
}

.product-list2 .top{
width: 140px;
background-image: url(../images/charte/news2_prod.jpg);
background-repeat: no-repeat;
background-position: top left;


}


.product-list2 .middle{
width: 140px;
background-image: url(../images/charte/news-middle_prod.jpg);
background-repeat: repeat-y;
background-position: top left;
float: left;

}

.product-list2 .middle2{
width: 140px;
background-image: url(../images/charte/news-middle2_prod.jpg);
background-repeat: repeat-y;
background-position: top left;
float: left;

}




.product-list2 .middle .text{
width: 140px;
text-align: justify;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
height: 45px;
margin: 0px 0px 0px 10px;


}

.product-list2 .middle .title{
width: 120px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
margin: 0px 0px 0px 10px;
padding-right: 5px;
text-align: right;
border: 0px solid red;
float: right;
height: 35px;
}

.product-list2 .middle .title a{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #010101;
text-decoration: underline;

}

.product-list .middle .title a:hover{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #DFB64D;
text-decoration: underline;
}

.product-list2 .middle .desig{
width: 128px;
float: left;
margin: 0px 0px 0px 10px;
border: 0px solid red;

}

.product-list2 .middle .prix{
background-image: url(../images/charte/prix_prod.jpg);
background-repeat: no-repeat;
background-position: top right;


}

.product-list2 .middle .prix span{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
float:right;
border: 0px solid red;
line-height: 32px;
width: 56px;
margin: 0px 20px 0px 0px;
}



.product-list2 .middle .prix .prix-promo{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666666;
float:left;
text-align: left;
line-height: 32px;
width: 50px;
border: 0px solid blue;
}

.product-list2 .middle .circle{

border: 0px solid red;
float: left;
width: 126px;
height: 45px;
margin: 0px 0px 0px 8px;
}

.product-list2 .middle .circle img{
float: left;
cursor: pointer;
border: 0px solid #D3D1D1;


}



.product-list2 .middle .photo{
float: right;
width: 135px;

}



.liens{
background-image: url(../images/charte/arrows.jpg);
background-repeat: no-repeat;
background-position: left center;
height: 19px;
padding-left: 15px;

}

.fotter2{
width:600px;
float: left;
padding-top: 15px;

}

.pictos{
text-align: center;
height: 21px;
padding-bottom: 5px;

}
/* product end */



/* productdetail */
.detail-left{
  float:left;
  width:280px;

  }
.detail-image{
  padding:0px;
  border:1px solid #B2B2B2;
  float:left;
  margin-bottom:4px;
  width:258px;
  height:279px;
  background-color: #fff;

  }

.detail-thumbs{
  border:1px solid #B2B2B2;
  background-color: #FFFFFF;
  float:left;
  width:213px;
  text-align:center;
  height: 60px;
  padding-left: 45px;


  }
.detail-right{
  float:left;
  width:319px;
  }
.detail-label,
.detail-descriptif{
  font-weight:bold;
  clear:both;
  width:150px;
  float:left;
  padding-bottom:5px;
  }
.detail-descriptif{
  float:none;
  padding:0;
  }
  #contenuTexte .detail-right p{
    margin:0;
    line-height:15px;
    }
.detail-circle {
  border:none;
  }
#contenuTexte .detail-right .prix p{
  float:right;
  padding-top:6px;
  text-decoration: line-through;
  color:#000;
  font:bold 12px Arial;
  border:none;
  margin-top:6px;
  }
.detail-links{
  float:left;
  text-align: left;

  line-height:19px;
  width: 310px;
  border: 0px solid red;
  }


#contenuTexte .detail-right .prix p.label{
  color:#000;
  font-weight:bold;
  text-decoration: none;
  font-size:11px;
  margin-top:6px;
  }
#contenuTexte .detail-right .prix div{
  float:right;
  width:50px;
  background: url(../images/charte/bg-prix.jpg) no-repeat left top;
  height:29px;
  margin-left:5px;
  padding-top:6px;
  color:#fff;
  font:bold 13px Arial;
  text-align:center;
  margin-top:6px;
  }
a#detail-ami{
  background: url(../images/charte/ami.jpg) no-repeat left top;
  padding-left:18px;
    margin-left: 30px;
  }
a#detail-contact{
  background: url(../images/charte/contact.jpg) no-repeat left top;
  padding-left:18px;
  margin-left: 15px;
  }
a#detail-retour{
  background: url(../images/charte/retour.jpg) no-repeat left 1px;
  padding-left:18px;
  float:left;
  margin-top:3px;
  }
.ajouter{
margin-top: -3px;

  }
#ami-popup{
 	background: url(../images/charte/bg-ami.jpg) no-repeat left top;
  margin-left:50px;

   }

   #cgv-popup{
 	background: url(../images/charte/bg-ami2.jpg) no-repeat left top;
  background-color: #F9F9F9;
  margin-left: 0px;

   }
#ami-popup .clear{clear:both;}

.ami-box{
  margin:0 auto;
  width:450px;
  padding-top: 152px;

  }
  .form-ami{
    float:left;
    width:205px;
    text-align: center;
    }
    .form-ami input{
        margin-bottom:7px;
        width:150px;
        }
.buttons-ami{
  clear:both;
  text-align:center;
  margin:0 auto;
  width:300px;
  }
  .buttons-ami div{
    width:150px;
    float:left;
    }
#ami-popup p{
	padding-bottom:5px;
	line-height:1.5em;
  font:normal 10px Arial, Helvetica, sans-serif;
	color:#333;
  text-align:center;
  padding-top:5px;
  }
  #ami-popup p span{
    color:#B80029;
    }
#fermer-ami{
  float:right;
  padding-right:8px;
  }


     .asoc{
    width: 520px;
     background-color: #FFFFFF;
     float: left;
     border-bottom:0px solid #B2B2B2;
    padding: 10px 10px 10px 10px;
    text-align: left;

  }

  .panis{
padding:15px 0px 0px 10px;
 float:left
  }

  .button{
  background: url(../images/charte/button.jpg) no-repeat center top;
	width:94px;
  border: none;
  height:31px;
	color:#ffffff;
	font-family: Arial;
	font-size: 12px !important;
	font-weight:bold;
	cursor:pointer;
	margin-top:0px;
  padding:0px;
  margin: 0px;
  padding-bottom: 14px;
	}
.buttonOver{
 	background: url(../images/charte/button-over.jpg) no-repeat center top;
	width:94px;
  height: 31px;
  border:none;
	color:#ffffff;
	font-family: Arial;
	font-size: 12px !important;
	font-weight:bold;
 	cursor:pointer;
	margin-top:10px;
  padding:0px;
  margin: 0px;
  padding-bottom:14px;
	}

  .art{
    color:#FF49A6;
    text-decoration: none;
  }

    .art:hover{
    color:#000000;
    text-decoration: none;
  }

  #logo{
  width: 140px;
  float: left;
  }

  .boutiques{
  padding-top: 85px;
  }