/*————————————————————————————————————————
		Complément de style pour Eloc'ances
	—————————————————————————————————————————*/	


a img
{
	border: 0;
	text-decoration: none;
	position: relative;
}

hr
{
	clear: both;
	background-color: white;
}

/*+ Les liens +*/
/* Dans le CSS principal.




/************************************************************************************************/
/*+++++++++++++++++++++++++++++++++ Petites classes diverses. ++++++++++++++++++++++++++++++++++*/
/************************************************************************************************/


.cache
{
	display: none;
}
.adroite
{
	text-align: right;
}
.petitFlottant, .flotte
{
	float: right;
}
.centre
{
	text-align: center;
	clear: both;
}

button
{
	cursor: pointer;
}


/* Les liens de retour sur les pages qui necessitent. */
.retour
{
	float: right;
	margin-top: -1em;
}


/*++++++++++++++++++ Les formulaires ++++++++++++++++++++*/

.formulaire
{
	width: 85%;
	margin: auto;
	padding: 0 1ex 1ex;
	-moz-border-radius: 20px;
}
.formulaire table
{
	width: 100%;
}

.fondForm
{

}

/* Les formulaires dans des tableaux. */
table.tableForm
{
	margin: auto;
}

.tableForm td
{
	text-align: right;
	padding: 5px;
}

.tableForm td.i, .variable td.d
{
	text-align: left;
}
.tableForm td.i textarea
{
	width: 100%;
}


/* Les trucs importants. */
.important
{
	color: red;
}

.valide
{
	color: green;
}


/* D'autres tableaux. */
table.variable
{
	margin: auto;
	width: 100%;
	text-align: center;
}




/************************************************************************************************/
/*+RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR Rayon RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR+*/
/************************************************************************************************/

.sousRayons
{
	margin: 1%;
	padding: 1% 1% 4%;
	-moz-border-radius: 20px;
}
.sousRayons h2
{
}
.sousRayons h2 img
{
}
.sousRayons h2 a
{
}

img.imageRayon
{
}
img[class="imageRayon"]
{
}

p.hr
{
	clear: both;
}



/* Entêtes des tableaux, par ex page rayons. */
th
{
	border-collapse: separate;
	color: white;
}

th a
{
	color: #FFFFFF;
	text-decoration: none;
}

/* La liste des produits du rayons. */
.produits
{
	margin-top: 2em;
	width: 100%;
}
.produits tr td
{
	height: 75px;
	border-bottom: 1px solid #6391B1;
}
.produits td.prix, .produits td.dispo, .produits td.marque
{
	text-align: center;
}
.produits td.prix small
{
	font-size: 8pt;
}




.produits h4
{
	/* Pour équilibrer les navigateurs. */
	padding: 0;
	margin: 0;
	margin-left: -10px;
	/* Pour mettre le texte au milieu de l'image. */
	padding-top: 22px;
}

/* L'image est en float pour éviter le soulignement du lien. */
.produits h4 a img
{
	float: left;
	margin: -27px 5px 1px 13px;
	padding: 5px;
}

/* Les séparations entre 2 marques différentes. */
tr.sep th, table.ventesNouv th
{
	text-align: center;
	color: #286794;
}
table.produits tr.sep
{
	background-color: #f9edb9;
}

/* Les liens page préc, suivante. */
a.préc, a.préc:hover
{
	padding: 6px 10px 6px 24px;
	background: url('images-site/f-precedent.png') no-repeat left;
}
a.suiv, a.suiv:hover
{
	padding: 6px 24px 6px 10px;
	background: url('images-site/f-suivant.png') no-repeat right;
}


button.boutonPanierRayon
{
	background: transparent;
	cursor: pointer;
	border: none;
	margin-left: 3px;
	margin-top: 25px;
	/* IE ne le met pas au milieu de la case. */
}
button[class="boutonPanierRayon"]
{
	margin-top: inherit;
}

/* Pour IE. */
.légende
{
	width: 100%;
}

.légende span
{
	white-space: nowrap;
	display: block;
	float: left;
	width: 15ex;
	padding-left: 9ex;
	height: 2em;
}


/************************************************************************************************/
/*+RPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRP Rayon et Produit RPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRPRP+*/
/************************************************************************************************/

.arborescence
{
	font-size: 8pt;
	margin-top: -1em;
	margin-bottom: 1em;
}
.arborescence a, .arborescence a:hover
{
	font-size: 8pt;
}

.prix
{
	color: #feb;
	font-size: 11pt;
	font-weight: bold;
	clear: left;
	margin-left: 1ex;
}

.detail .prixht
{
	font-size: 10pt;
	color: #ccc;
	font-weight: normal;
}

/* Quand il y a une promo. */
.barré
{
	color: #ccc;
	text-decoration: line-through;
}




/************************************************************************************************/
/*+PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP Produit PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP+*/
/************************************************************************************************/


.detail
{
	position: relative;
	/* Correction bug IE6. */
	margin: 1em 0 3em;
	padding: 0.5em 1em 0.5em 0.5em;
	border: 1px dotted white;
}

.detail p.référence
{
	text-align: right;
	margin-top: -3em;
	margin-bottom: 3px;
}
.detail h1
{
	background: none;
}

.référence small
{
	font-size: 8pt;
	color: #ccc;
}

.descriptionProduit, .avisProduit
{
	clear: both;
	padding: 10px;
}

/* Le tableau contenant les images. */
table.imageProduit
{
	position: relative;
}

.imageProduit td
{

}

.imageProduit img
{
	width: 100px;
	height: 100px;
	padding: 5px;
	background-image: url('images-site/cadre-produit.png');
	cursor: pointer;
}
.imageProduit span.fermer
{
	display: none;
}

/* L'image après qu'on ai zoomé. */
.imageZoom
{
	/* display: none; déjà dans le fichier. */
	position: absolute;
	left: -1em;
	top: -1em;
	/* Dans le coin de la fiche produit puisqu'on doit la mettre en relative. */
	cursor: pointer;
	border: 3px outset #6391B1;
	background-color: #6391B1;
	padding: 5px;
	z-index: 4;
	text-align: center;
	width: 405px;
}

.imageZoom span.fermer
{
	display: block;
	color: white;
}

/* Correction bug IE7. */
.imageZoom img
{
/*	width: 400px;
	height: 400px;
	/* Laissez la bordure ET les dimensions sinon ça ne marche plus dans IE7! (ben si, ça remarche... :o))
	 sauf si on met .detail en position: static, mais alors ça bug dans IE6. */
	border: 1px dotted white;
}


/* Le texte "zoom" sur les images des produits. */
.imageProduit span
{
	visibility: hidden;
	display: block;
	color: white;
	text-decoration: none;
	text-align: center;
}
.imageProduit:hover span
{
	visibility: visible;
}

.textePromo
{
	color: white;
}


/* La marque, le prix, ajouter au panier... */
.infosProduit
{
	color: white;
}
.infosProduit p
{
	text-align: right;
}
.infosProduit p.prix
{
	font-size: 17pt;
}


/* Dans les rayons, et les autres produits présentés dans la fiche d'un produit. */
.miniature
{
	width: 80px;
	height: 80px;
	text-decoration: none;
}

/* Le button.boutonPanierProduit est déplacé dans le CSS principal car il est présent ailleurs. */



h5
{
	margin: 2px;
}