@charset "utf-8";
/* CSS Document */
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; margin:0; padding:0;color:#999999; border-color:#666666;  background-color:#edf5f8; font-size:12px; }
p{margin:5px 0 5px 0; padding:0}
#fond{position:absolute; width:100%; height:100%; min-height:600px;  max-height:950px;}
h1{ font-size:1.7em;color:#000000; font-weight:600; margin:4px 0 0 0;line-height:1em}
h2{ font-size:1.6em;color:#666666; margin:2px 0 0 0; line-height:1em}
h3{ font-size:1em;color:#ccc; margin:0; padding:0; line-height:1em}
h4{ font-size:1.5em;color:#666; margin:0; padding:0; line-height:2em}
h5{ font-size:1.3em;color:#666; margin:10px 0 0 0; padding:0; line-height:1em; border-bottom:1px solid #666}
h6{position:relative; margin:0;  width:425px; min-height:11%;   overflow:hidden; background-image:url(../objets/ico_titre.jpg); background-repeat: no-repeat; padding:3px 0 0 30px; font-size:1.2em; font-weight: bold; color:#000000; float:left;}

#bandeau{position: relative;width:900px; display:block; margin:auto; min-height:15px; height:2%;text-align:center; position:relative; border:1px solid black; text-align:left; border-bottom:1px solid white; background-color:#000000; color:#ccc  }
#bandeau h1{font-size:1em;color:#ccc; margin:0; padding:0; line-height:1em}

/*******************************  ENTETE **************************************/
#entete{position: relative; width:900px; display:block; margin:auto; height:340px; text-align:center; position:relative; border:1px solid black; border-bottom:0; border-top:0;}
/* entete gauche*/
#entete_logo{ position: relative;width: 297px; border-right:3px solid white;  height:100%; float:left; background-image:url(../objets/logo_fond.jpg); background-repeat:no-repeat}
#logo_menu{ position: absolute; width: 100%; height:9%; background-color:black; bottom:8%; left:0}
#logo_identification{ position: absolute; width: 100%; height:8%; background-color:white; bottom:0; left:0; line-height:2.5em; color:#000000; text-align:right}
a.menu_entete{background-image:url(../objets/flechefondnoir.jpg);margin:0 0 0 28px; padding:0 0 0 30px; background-repeat:no-repeat; width:auto; background-position:center left;  height:30px; color:white; text-decoration:none; text-align:right; float:left; font-size:1.2em; vertical-align:middle; line-height:2.2em;  }
a.menu_entete:hover{ font-weight:bold}
.date{ text-transform:lowercase; color:#999999; font-size:0.9em; margin-left:20px}
/* entete droite */
#entete_menu{  position: relative;width: 300px; height:100%; float:left;}
#menu_entete{ position: absolute; left:0; top:0; width: 300px;   height:255px; float:left; background-color:#edf5f8; padding-top:15px;}
#menu_entete:hover{z-index:3;}
a.menu_droite{background-image:url(../objets/flechenoire.jpg); display:block; margin:0; padding:0; background-repeat:no-repeat; width:65%; background-position:center left;  height:30px; color:#999999; text-decoration:none; text-align:left; padding-left:50px; float:right; border-bottom:1px solid white; font-size:1.2em; vertical-align:middle; line-height:2.2em;  }
.menu_espaceur{ display:block; margin:0; padding:0 0 0 50px; width:65%;height:25px; float:right; border-bottom:1px solid white; }
a.menu_droite:hover{color:black; font-weight:bold; background-image:url(../objets/flecheblanche.jpg);}
a.menu_droite_valid{margin:0; padding:0; background-repeat:no-repeat; width:65%; background-position:center left;height:30px; text-decoration:none; text-align:left; padding-left:50px; float:right; border-bottom:1px solid white; font-size:1.2em; vertical-align:middle; line-height:2.2em; color:black; font-weight:bold; background-image:url(../objets/flecheblanche.jpg);}
a.lien_simple{margin-left:15px}
#langue{position: absolute; bottom:3px; right:10px;}
#espace_pro{position: relative;width:100%; height:30px; float:right; text-align:left}
#etirable1{position: absolute;top:0; display:block; left:0; width:100%; height:33px;z-index:3; overflow:hidden  }
#etirable1:hover{height:auto;  z-index:4; overflow:inherit; background-color:#e2e2e2}
#entete_titre{ position: absolute; width: 100%; min-height:17%; background-color:white; bottom:0; left:0; opacity:0.8;filter:alpha(opacity=80); z-index:2}
a.menu_coll{display:inline-block; margin:3px 20px 0 0; color:black; text-decoration:none; font-size:1.2em; font-weight:bold}
a.menu_coll_valid{display:inline-block;  margin:3px 20px 0 0; color:#03b1fe; text-decoration:none; font-size:1.2em; font-weight:bold}
a.menu_coll:hover { color:#03b1fe}

#coordonnees{margin:15px 0 0 0;  }

.soustitre{font-size:0.9em; font-weight:100; color:#333333}

.titre_popup{color:#03b1fe; font-size:1.3em; margin-top:20px; text-transform:uppercase; }

/*************************************   CORPS DE PAGE *************************/
#corps{ width:900px; overflow:hidden; min-height:350px; height:52%;  margin:auto; margin-top:0; margin-bottom:0; text-align:left;  border:1px solid black; border-bottom:0; border-top:0; background-color:#FFFFFF; position:relative }
#menu_catalogue{width:300px; position:relative; overflow:inherit}
#menu_sousrub{ background-color:white; position:relative; width:220px; left:50px; top:0; padding:0 0 7px 0; }
#affich_produits{ width:600px;  display:block; height: 100%; overflow:auto; float:right; position:absolute; top:0; left:300px; overflow:auto;}

#affich_textes{ width:550px;  display:block; text-align:justify; height: 90%; overflow:auto; float:right; position:absolute; top:20px; left:300px; overflow:auto; font-size:1.1em}
#affich_textes h1{font-size:1.4em;color:#000000; font-weight:600; margin:4px 0 20px 0;line-height:1.2em}
#affich_textes a.texte{text-decoration:none; font-size:1em; color:#666666}

a.rubrique{ display: block; width:260px; padding:0 0 0 40px; color:#03b1fe; font-size:1.2em; text-transform:uppercase; line-height:1.3em; text-decoration:none; font-weight:600}
a.rubrique:hover{color:red;}
a.rubrique_valid{ display: block; width:260px; padding:0 0 0 40px; color:black; font-size:1.2em; text-transform:uppercase; line-height:1.5em; text-decoration:none; font-weight:600}

a.sousrub{ display: block; width:100%;color:#ccc; text-transform:capitalize; text-decoration:none;  font-weight:bold;line-height:1.3em; }
a.sousrub:hover{color:#03b1fe}
a.sousrub_valid{ display: block; width:100%; color:black; font-size:1.1em; text-transform:capitalize;  text-decoration:none; font-weight:bold}

.center{text-align:center}

#navigation{position:relative;  width:98%; height:6%; overflow:hidden; text-align:right;}
#catalogue{position: relative; width:100%; height:93%; overflow:auto; }
.vignette_produit{ position:relative; float: left; width:130px; margin:0 15px 10px 0; padding:0; background-color:white; height:180px; background-repeat:no-repeat; background-position:center; color:#FF0000 }
.promo{ background-color:#000000; overflow:inherit; color:#03b1fe; font-size:0.9em; text-align:center }
.cartouche{width:100%; position:absolute; background-color:#000000;bottom:0; overflow:inherit;   color:#fff; font-size:0.9em; text-align:center }
.prix{width:98%; text-align:right; margin:0; padding:0; color:#FFFFFF; font-size:1.1em; font-weight:bold }
.promo{color:#ccc; margin-right:5px; }
.promo_bl{color:#666; font-size:0.8em; text-decoration:line-through  }
.text_prix{font-size:1em; color:black}
.traitpromo{color:red; font-weight:100}
a.vignette{border:0; text-decoration: none; margin:0; padding:0; display: block; cursor:pointer}
.inactif{color:#cccccc; font-size:0.9em; font-weight:100; display:block}
.promotion{position:absolute; top:0; left:0; background-color:#000000; /*color:#03b1fe;*/ color:yellow; font-weight:bold; line-height:1.1em; padding:0 2px 0 2px}
#tab_commande{position: relative; width:100%; height:98%; overflow:auto;}
.paiement{color:black; text-align:center; display:block; margin-top:30px}
.commande_vide{ text-align:center; font-size:1em; color:black;  margin-top:100px }
/******************************  PANIER ET COMMANDE ******************************************************************/
#panier{position: relative; width:100%; height:89%; overflow:auto; top:3%}
.panier_vide{ text-align:center; font-size:1.2em; color:black; font-weight:600; margin-top:100px }
.col_titre{background-color:#CCCCCC; color:black; font-weight:bold}
.nom_prod{color:black; font-weight: bold; padding-left:10px}
.nom_article{color:#333333; padding-left:10px}
.gris_fonce{color:#333333}
.soustotal{ background-color:#CCCCCC; color:#000000}
.total{color:white;}
.prixtotal{font-weight:bold; font-size:1.1em; color:#03b1fe}
.tva{ color:#cccccc; margin:0 15px 0 15px}
.reduc{color:#03b1fe; font-size:0.9em; font-weight:bold;}
/************************************Fiche Produit ********************/
/* entete centre */
#entete_photo{ position: relative; width: 297px; border-right:3px solid white; height:100%; float:left; background-color:black; background-repeat:no-repeat; background-position:center; }
#entete_fiche{ position: absolute; width: 100%; height:8%; background-color:black; bottom:0; left:0; color: white; font-weight:bold; line-height:2em; font-size:1.1em}

a.retour{float:left;margin-top:3px; background-image:url(../objets/retour_catalogue.jpg); background-repeat:no-repeat; padding-left:30px; text-decoration:none; color:black; font-weight:bold; font-size:0.8em}
a.retour:hover{color:#03b1fe}

.soustotal2{  color:#000000}
a.commande{margin:2px 0 0 10px; background-image:url(../objets/ico_titre.jpg); background-position:left center; background-repeat:no-repeat; padding-left:30px; text-decoration:none; color:#03b1fe; font-weight:bold; font-size:1em}
a.commande:hover{color:red}
a.annul{margin:2px 0 0 10px; background-image:url(../objets/ico_titre.jpg); background-position:left center; background-repeat:no-repeat; padding-left:30px; text-decoration:none; color:#666666; font-weight:bold; font-size:1em}
a.annul:hover{color:red}

.info{ background-image:url(../objets/retour_catalogue.jpg); background-position:left center; background-repeat:no-repeat; padding-left:20px; color:#03b1fe; font-weight:bold; font-size:0.9em; width:130px; cursor:pointer;height:auto; float:right; display:block }
.text_info{ position:absolute; color:#666666; top:0; right:20px; width:150px;  z-index:6 ; height:18px; overflow:hidden; display:block; padding:3px 10px 0 10px}
.text_info:hover{ width:92%; border:1px solid #cccccc; height:auto; max-height:330px; overflow:auto; background-color:#edf5f8  }
.text_port{ position:absolute; color:#666666; top:0; right:150px; width:150px;  z-index:6 ; height:18px; overflow:hidden; display:block; padding:3px 10px 0 10px}
.text_port:hover{ width:55%; border:1px solid #cccccc; height:auto; max-height:330px; overflow:auto; background-color:#edf5f8  }

#commander{position:relative; margin:0;  width:135px;   overflow:hidden; padding:3px 5px 0 0; font-weight: bold; float:left; text-align:right;  background-image:url(../objets/ico_command.jpg);background-repeat:no-repeat; background-position:left bottom; color:#03b1fe; font-size:1.1em ;  }
#produit{  float:left;  width:600px; height:50%; z-index:1;}
#collection{ position:relative; float:left; position:relative; width:600px; height:31%; overflow:auto;z-index:2}
#titre_collection{float:left; margin-top:-10px;  font-size:0.9em; line-height:1em; color:#000000; z-index:5}

a.panier{float:right;margin-top:3px; padding-left:35px; text-decoration:none; color:black; font-weight:bold;}
a.panier:hover{color:red}

#descriptif { position:relative; float:right; width:54%;height:77%; font-size:1em;   overflow:auto; margin:0; padding:0; overflow:auto}
#articles { position:relative; float:right; width:54%;  height:21%;   overflow:hidden; margin:0; padding:0; }
.detail{width:22%;float:left;  padding:0; margin:0 4px 0 0; height:90%; overflow:hidden;}
.img_detail{max-width:100%; max-height:100%; cursor:pointer}
.vignette_collect{ position:relative; float: left; width:92px; margin:0 5px 5px 0; padding:0; background-color:white;min-height:100px; height:99%; background-repeat:no-repeat; background-position:center; color:#FF0000;}
#stock{width:11%; position: absolute;top:0px; right:0; z-index:10; margin:0 2px 0 0; padding:0; border:1px solid #cccccc; color: black;line-height:1.2em; height:28px;}
.jauge{position:relative;height:100%; background-color:#03b1fe; }
.nombre{position:absolute; width:100%; height:100%;top:0; left:0 ; text-align:center }

/*******************************************  PIED DE PAGE ************************************/
#pied{ width:900px; display:block; min-height:15px; height:3%; margin:auto;  margin-top:0; border-top:1px solid #666666; border-bottom:1px solid; line-height:2em; text-align:center; background-color:black; border:1px solid black; border-top:0; color:#FFFFFF; position: relative}
#patch{width:900px; margin:2px auto;  text-align:center; text-decoration:none; font-size:11px; }
.patch {color:#333333; text-decoration:none; }
.patch:hover {color:red;}


/* ______________champs formulaires, boutons de navigation_______________________*/
.panier{float:right;}
.form_panier{width:95%; border:1px solid #666666; padding:0}
.options{float:left; width:85%; display:inline-block}
.login{ width:70%; margin:auto; margin-top:70px; border:2px solid #cccccc }
.contact{ width:100%; margin:2% auto; }
.confirm{padding-top:30px; padding-bottom:30px; margin:40px auto; width:60%; border:1px solid #666;}
img.contactimg{margin: 0 20px 0px 0;}

input.champs {color:#333333; background-color:#ffffff;border:1px solid #cccccc; font-size:10px; height:13px;padding:0; margin:0;}

input.bouton{ color:red; background-color:#e2e2e2;border:0; font-size:1em; text-decoration:underline; cursor:pointer}
input.bouton:hover{ color:blue;}

input.bouton2{  color:#000000; float:right; position:relative;  text-decoration:none ; text-align:right; border:0; font-size:1em; cursor:pointer; padding:0; margin:0; background:none }
input.bouton2:hover{ color:red;  }

select { color: black; font-size:10px; font-family:arial;padding-bottom:0px;}
textarea {color: black; background-color:#ffffff;}
input.fichier {color:black; background-color:#66CCFF; font-size:10px; font-family:arial;}

#infolegales{ position: absolute; margin:auto; left:32%; top:20%; width: 500px;   height:400px; padding:10px;   border:5px solid black; z-index:6; display:none; background-color:#FFFFFF; overflow:auto; text-align:left}