body
{width: 100%;margin: 0;padding: 0;font-size: 95%;font-family:Verdana, serif;}


h1, h2, h3{margin: 0 0 8px 0;}
h2{background: #89c775;padding: 4px;}
a img{border: none;text-decoration: none;}

hr{border: none;border-top: dashed black 1px;margin: 0;margin-top: 20px;margin-bottom: 20px;}
img{font-style:italic;color:grey;font-size:90%;}

/* pour ajuster les largeurs max et min IE  */
#page{background: white;margin: auto;padding: 20px 0 0 0;}

#haut{width: 100%;padding: 14px 0 0 0; text-align:center;background:#009933;}

/*#blanc_haut{height: 5px;}*/

/*
#menu_haut {width: 100%;font-family: Arial, serif;font-size: 100%;font-weight: bold;text-align: center;margin: 0;background:#ff9c00; padding: 7px 0 4px 0;}
#menu_haut span{padding:7px 30px;}
#menu_haut a{text-decoration: none;color: black;}
#menu_haut a:hover{color: black;background: #fbc38f;}
#menu_haut a.en_cours{color: white;}*/

#menu_bas{clear:both;width:100%;}
#menu_haut{border-top:solid white 5px;}
#menu_haut,#menu_bas
{
width: 100%;
font-family: Arial, serif;
font-size: 1em;
font-weight: bold;
text-align: center;
margin: 0;
background:#ff9c00; 
padding: 7px 0 4px 0;
}
#menu_haut ul,#menu_bas ul{
margin:0;
padding:0;
list-style-type: none;
}
#menu_haut li, #menu_bas li
{
display: inline;
padding: 0;
}
#menu_haut li a, #menu_bas li a
{
padding: 7px 30px 4px 30px;
text-decoration: none;
color: black;
}
#menu_haut li a:hover, #menu_bas li a:hover
{
color: black;
background: #fbc38f;
}
#menu_haut li a.en_cours, #menu_bas li a.en_cours
{
color: white;
}

.souligne {text-decoration:underline;}
.ligne_b{padding-top:26px;}
.clear{height:1px;display:none;clear:left;} /*peut-être à supprimer ?*/

/*#col_gauche{float:left;width:160px;margin:0 12px 0 6px;}/*il y avait un oubli à ce niveau ?*/
/*#col_droite{float:right;width:170px;margin:0;min-height:480px;}*/

.encadre{font-size: 80%;color: black;padding: 5px 5px 10px 5px;margin: 0 0 20px 0;border: solid #89c775 1px;}
.liens{margin:20px 0 20px 0;text-align:center;background:url("images/liens.jpg")no-repeat;height:64px;}

#corps{background: white;margin:0 auto 5px auto;padding: 0 10px 10px 10px;min-height: 430px;}
.fiche{width: 100%;margin:0 ;padding: 0;overflow: hidden;}
.texte_de_fiche{margin:0;margin-left: 42%;padding:0;}
.img_fiche{float:left;border:none;width:40%;}
#pied_de_page{clear:both;width:100%;padding: 0 0 4px 0;font-family: Arial, serif;font-size: 80%;color: black;text-align: right;margin: 0;}
.piedp{padding-right:10px;}
/*#miseajour{clear:both;width: 100%;font-size: 70%;text-align: right;padding-bottom:4px;}
#miseajour a{color: #2ea02e;}*/

.team{overflow:hidden;margin-bottom:20px;}
.team h3{margin-top:5px;}

#miseajour{
height:30px;
clear:both;
width:100%;
font-family: Verdana, Arial, Serif;
font-size: 0.8em;
text-align: right;
padding-top:40px;
}

/*=======================spécial selon taille écrans =========================================*/
/*les écrans grands seulement*/
@media only screen and (min-width:800px) {
/*#gauche{max-width:350px;}*/
body {background-image: url("images/c_vert.jpg"), url("images/c_orange.jpg"); background-position:0 272px, 0 493px; background-repeat: repeat-x, repeat-x;}
#haut{background: #e37c1f url("images/bandeau_fondu_02.jpg") no-repeat top left;height:134px;text-align:left; padding: 50px 0 0 300px;}
#menu_bas{display:none;}
#page{background:url("images/doggel_03.gif") no-repeat 20px 97%;width: 95%;min-width: 800px;max-width: 1020px;}
#col_droite{float:right;width:170px;margin:0;min-height:480px;}
#col_gauche{float:left;width:160px;margin:0 12px 0 6px;}
#corps{width:53%;font-size:80%;}
#corps .encadre{border:none;font-size:1em;}
.seul_i{display:none;}
#pied_de_page{border-top:solid #ff9c00 2px;}
}
/*il y a un no-man's land là-dessous...*/
@media screen and (orientation:portrait){
}
/*les téléphones*/
@media only screen and (max-width:600px) {
body{text-align:center;} 
.ligne,.ligne_b{display:none;}
#haut{height:100px;}
#menu_haut,#menu_bas
{height:40px;width:100%;margin:0 auto 6px auto;padding:0;background:none;text-align:center;font-family:Arial, Helvetica, Verdana, Serif;}
/*pour les liens des menu haut et bas*/
#menu_haut li a,#menu_bas li a
{float:left;width:24%;margin:0.4%;background:#ff9c00;padding:10px 0;display:block;}
.menu li a{line-height:3em;}
#menu_haut li a.en_cours,#menu_bas li a.en_cours{background:#d48202;} 
#menu h2{display:none;}
#page{width:100%;padding:0;margin:0;} 
#col_gauche{width:100%;border:none;padding:0;margin:0;border-bottom:solid black 1px;}
.encadre{border:none;font-size:1em;}
.inv{display:none;}
#col_droite{display:none;}
#corps{font-size:80%;margin:10px 0;text-align:left;}
.texte_de_fiche{margin:0;padding:0;}
.img_fiche{float:none;width:90%;margin:auto;}
#texte_pied_de_page{width:100%;}
.piedp{padding-top:5px;}
#pied_de_page span{display:none;}

/* gestion des tables */
	table, thead, tbody, th, td, tr {display: block;}
	table{width:100%;}
	
	/* cacher les headers (pas nécessaire ici, en fait) 
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}*/
	
	th{display:none;}
	tr {border-top: 1px solid black;margin:0;padding:0;}
	td{position: relative;margin:0;border-bottom:dashed black 1px;padding:1% 0 0 1%;}
	.app td{padding-left:30%;margin-left:30%;}
	
	 


td:before { 
		/* le header */
		position: absolute;
		/* Top/left valeurs mimic padding */
		top: 2px;left: -42%;width: 45%; padding-right: 10px;white-space: nowrap;font-size:0.8em;}
		/*étiquettes*/
	.app td:nth-of-type(1):before { content: "type"; }
	.app td:nth-of-type(2):before { content: "modèle"; }
	.app td:nth-of-type(3):before { content: "prix catalogue"; }
	.app td:nth-of-type(4):before { content: "prix sacrifié NET TTC"; }
	
}

/*les tablettes et mini-pc */
@media only screen and (max-width:800px) and (min-width:600px){
#haut{background: url("images/bandeau_fondu_02.jpg") no-repeat top left;height: 105px;}
#menu_haut,#menu_bas{height:auto;}
#menu_haut li a,#menu_bas li a{width:19%;margin:0;padding:7px 7px 4px 7px;}
#menu_haut li a:hover,#menu_bas li a:hover{padding:7px 7px 4px 7px;}
#page{background:url("images/doggel_03.gif") no-repeat 20px 97%;width: 95%;}
#col_gauche{float:left;width:160px;margin:0 12px 0 6px;}
#corps{font-size:80%;margin:0 0 10px 170px;}
#corps .encadre{border:none;font-size:1em;}
.seul_i{display:none;}
#col_droite{display:none;}
#texte_pied_de_page{width:95%;}
.piedp{padding-top:5px;}

} 
.horaire table,.horaire td{border:outset grey 2px;}
.ferie{background:#e16767;color:red;font-weight:bolder;}

/*==================================fin du spécial format=============================*/


#menu{font-size: 80%;margin-bottom:20px;}
#menu h3{font-size: 135%;font-weight: bold;text-indent: 6px;color: black;line-height: 33px;margin: 0;}

#menu h3.actif{
font-size: 135%;
font-weight: bold;
text-indent: 25px;
color: #2ea02e;
background: url("images/angle.gif") no-repeat left 0;
line-height: 33px;
margin: 0;
}
/*depuis là, les paramètres pour le menu dynamique*/
.menu li a{display:block;color:black;font-weight:bolder;padding-left:10px;border-bottom:solid black 1px;}
.menu li a.actif{font-weight:bolder;background: #aeda92;}
.menu li a.inactif{}

ul.sous_menu_visible{border-bottom:solid black 1px;}

.sous_menu_invisible {display:none;}
.sous_menu_visible li a{display:block;font-weight:200;background:#d9fac4;padding-left:30px;border-bottom:dashed grey 1px;}
.sous_menu_visible li a:hover{background: #aeda92;}
.sous_menu_visible li a.actif{color:#2b6505;font-weight:bold;background:#d9fac4 url("images/Angle3.gif") no-repeat top right;}

.ss_menu_invisible {display:none;}
.ss_menu_visible li a{display:block;background:white;padding-left:45px;border:none;}
.ss_menu_visible li a.inactif{font-weight: 200;}
.ss_menu_visible li a:hover{background: #d1d1d1;}
.ss_menu_visible li a.actif{color:black;font-weight:bolder;background:none;}

.invisible {display:none;}
.visible a {display:block;}
/*jusqu'ici, puis rajouts du 4 mars 09*/

#menu li {
text-align: left;
line-height: 170%;}

/*fin des rajouts du 4 mars 09*/

#menu .menu li a{
border-bottom: solid black 1px;
}
#menu .sous_menu_visible li a{border-bottom: dashed black 1px;}
#menu .ss_menu_visible li a{border:none; font-style:italic;}

#menu ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}


#menu li a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}/*agit, à modifier, voir...*/



.po{background:url("images/clefs.jpg")no-repeat;}
.encadre p{
margin: 7px 0 7px 0;
}
#col_droite a{
display: block;
text-decoration: none;
color: #2ea02e;
}
#col_droite a:hover{
background: #ddedd3;
}
#col_gauche a{
display: block;
text-decoration: none;
color: #2ea02e;
}
#col_gauche a:hover{
background: #ddedd3;
}




#corps li{
list-style-type: disc;
}

#corps a, .box a
{
color: #2ea02e;
text-decoration:none;
}
#corps a:hover
{
color: #526b52;
}
p
{
margin: 0;
margin-bottom: 25px;
}
.sans_vide
{
padding: 0px;
vertical-align: middle;
}
.fond_vert
{
background: #d9fac4;
text-align: center;
vertical-align: middle;
padding: 5px;
}
#corps li
{
margin-bottom: 5px;
margin-left: 30px;
}
.mise_en_garde
{
text-align: left;
padding: 10px;
background: #ffe0c2;
}
.centre
{
text-align: center;
vertical-align: middle;
}
td
{
vertical-align: top;
padding-bottom: 30px;
}
.image_flottante
{
float: right;
padding: 6px;
border: none;
}
.image_flottante_gauche
{
float: left;
overflow: hidden;
padding: 6px 6px 6px 0;
}

.borde td
{
margin: 0;
border: solid black 1px;
padding: 6px;
}
.borde
{
margin-bottom: 30px;
border-collapse: collapse;
}
#liens
{
margin: 0;
font-size: 80%;
margin-top: 40px;
background-color: #fbc38f;
border: solid #f7973d 1px;
padding: 5px;
}
#liens a
{
color:#9e2927;
}
#liens a:hover
{
color: #5d3b17 ;
}
.tableau_normal td
{
padding: 0;
padding-bottom: 4px;
max-width:100%;
}
.bord td, .bord table{
border: solid black 1px;
}
.listage{
border: solid black 1px;
padding: 5px;
margin: 0 0 5px 0;
min-height: 120px;
overflow: hidden;
}
.nouveau{
background:url("images/action.gif")no-repeat bottom right;
}
.ecoB{
background:url("images/ecoBG.jpg")no-repeat bottom right;
}
.prom,.proS{
background:url("images/promo.gif")no-repeat bottom right;
}
.cadeau{
background:url("images/cadeau_lessive.jpg")no-repeat bottom right;
}
.listage p{
margin-bottom: 0;
}




.detail{
margin: 20px 0 0 0;
padding: 0px 5px 5px 20px;
border: solid black 1px;
}
.detail h4{
margin: 5px 20px 5px -15px;
padding: 10px 0 5px 0;
border-bottom: dashed 1px black;
}

.box{
display:none;
width: auto;
height: auto;
position: absolute;
top: 150px;
right: 200px;
text-align: center;
padding: 0;
border: none;
background: none;
z-index: 11;
overflow: auto;
}
.box h4{
margin: 0 6px;
}

.boxH{
margin-right: 8px;
border: solid black 1px;
border-bottom: none;
background: white;
height: 8px;
}
.boxM{
border-right: solid #949494 8px;
border-bottom: solid black 1px;
border-left: solid black 1px;
border-top: none;
background: white url(images/coin_noir.gif) right repeat-y;
margin: 0;
padding: 5px ;
}
.boxB{
border: none;
height: 8px;
background: #949494;
margin-left: 8px;
}

#corps .promo a{
display:block;
text-decoration:none;
color: black;
height: auto;
overflow: hidden;
border:solid black 1px;
margin: 0 10px 10px 0;
padding: 5px;
}

.promo a:hover{
background: #ddedd3;
overflow: auto;
}

.promo a h3{
font-size: 1,5em;
margin: 0 10px 0 0;
}
.frigo{
display:block;
width: 88%;
border:solid black 1px;
padding: 5px;
margin: 0 5px 5px 0;
}
.frigo img{
padding: 15px 0 20px 0;}
.frigo h4{
margin: 0 0 4px 0;
}
.frigo input{
margin-top:5px;
}
.cont_frigo{
overflow:hidden;
margin-bottom: 20px;
}
/*  ce qui suit pour les mots difficiles */
a.info {
  position:relative;
}
a.info:hover {
   background: none; 
   z-index: 500; 
}
a.info span {display: none;}
a.info span img {margin:10px;}
a.info span li{list-style-type:disc;}
a.info:hover span {
   display: block; 
   position: absolute;
   width:250px;
   height: auto;
   top: 30px; 
   right: 20px;
background: #ddedd3;
   padding: 5px;
   color:black;
   border: 1px solid #89c775;    
}
.accessoires{
float:right;padding:7px;border:black solid 1px;width:200px;margin-top:10px;}
.to1 {background: #ad8eba;}
h3.to1 {color: #682e83; font-weight:bolder;background:none;}