css

/* VALIDE PAR https://jigsaw.w3.org/css-validator/ */



body
{

	font-family:"Georgia";
	background-image: url("fond2.jpg");
	background-repeat: 	repeat;
	background-size: 100% 100%;

	margin: 0;


}
html {

	height:100%;
}
#fond
{
		position: fixed;
		top: 0;
		left:0;

		opacity: 0.5;
}




/* LA BANNIERE */
#bn_image{
	text-decoration:inherit;
	display: block;
	margin : 0 auto;
	margin-top: 15px;
	margin-bottom: 15px;
    height: 270px;
	width: 860px;
    border-radius: 10px;
    background: url(banniere.png) no-repeat;
    position: relative;

}
#bn_description{
	text-decoration:inherit;
	font-size: 18px;
	text-align: right;
	padding-top:100px;
	font-style: italic;
	color: #FF0040;
	padding: 230px 30px 0px 0px;
}
/* ************* */












/* ICI TOUT CE QUI CONCERNE LA RECHERCHE */
#Recherche {
    margin-top: 2px;
    vertical-align: middle;
    display: inline-block;
}
#Recherche #motclef {
        height: 23px;
	border: 2px solid grey;
	background-image: url(fond2.jpg);
	font: 15px Arial,Verdana,sans-serif;
	color: white;
	padding-left : 5px;

}
#Recherche #rechb {

	border-radius: 0px 7px 7px 0px;
	font: 15px Arial,Verdana,sans-serif;
	border: 3px solid grey;
	background-color : rgb(250,250,250);


}
#Recherche #rechb:hover {
	background-color : rgb(150,150,150);
}



/* ************************************ */








/* BOUTONS */
.buttonb	 { /* bouton de la barre 1 */
	text-decoration: inherit;
	color: black;
	border-radius: 7px;
	font: 15px Arial,Verdana,sans-serif;
	border: 3px solid grey;
	background-color : rgb(250,250,250);
	padding: 1px 10px 1px 10px;
}

.buttonb:hover, #rechb:hover	 { /* bouton de la barre 1 */
	background-color : rgb(150,150,150);
}


/**********/








/******** BARRE 1 *********/
.barre1 {
        height : 45px;
	background-color: rgba(80,80,80, 0.5);
	padding-top: 5px;
}
.barre1 #menu1 {
	display : inline;

}

.barre1 li {
	display : inline;
	list-style-type: none;
	border-radius: 7px;
	font: 15px Arial,Verdana,sans-serif;
}

#panier{
background-image:url(stack.png);
background-position:left;
background-repeat:no-repeat;
}
/**************************/



.erreurp {
	text-decoration: inherit;
	display: block;
	padding-top: 20px;
	color: black;
}









 .pages > .page:target ~ .page:last-child, .pages > .page {
    display: none;
  }

 .pages > :last-child, .pages > .page:target {
    background-color: rgba(100,100,100, 0.2);
	border: 10px;
	padding : 10px 40px 10px 40px;
	margin : 0px 100px 90px 100px;
	font: 18px Arial,Verdana,sans-serif;
	min-height: 500px;
	display: block;
  }

/* dqs dq*/


.concc {

	border-radius: 3px;
	padding : 15px;
	background-color: #F2F2F2;
	border: 5px solid grey;

	text-decoration:inherit;
	display: none;
	top: 10px;
	margin-left: 34%	;
	margin-top:15%;

	position: fixed;


}
/* dqs dq*/
.concc:target {
	display: block;
}

.concc:target 	#fermersco:active
{
	display: none;
}

.conn, .connb, .connbsi {
	min-width: 100px;


}

.sco {

	padding: 15px 20px 20px 20px;

}


.connb, .connbsi {
	vertical-align: center;
}

.connbsi {
	min-height: 52px;

}


#connect #creer{

display: block;
  position:relative;


  	margin : 5px;

}

.tco {

padding : 15px;

}

.rtrco {

	text-decoration: inherit;
	color: white;
	position: absolute;
	top: 2px;
	left: 4px;
	border: 1px solid black;
	margin-top: 2px;
	padding: 0px 3px 0px 3px;
	background-color: grey;
	font-family: Arial;
}

#commder div, #ajtpan div, #cmtr div{
	margin: 30px;
	text-align: center
}

/******** BARRE 2 *********/
#barre2 { /* la barre2 */
background-color: #424242;
color:white;
margin:10px 100px 0 100px;
text-align:center;
}

#b2n{
	text-decoration: inherit;
	color: rgb(255,0,64);
	display: inline-block;
	padding: 3px 6px 3px 6px;
	margin: 0px;
	font: 18px Arial,Verdana,sans-serif;
}

#barre2 a:not([id="b2n"]){
	text-decoration: inherit;
	color:white;
	display: inline-block;
	padding: 3px 6px 3px 6px;
	margin: 0px;
	font: 18px Arial,Verdana,sans-serif;
}



#barre2 a:not([id="b2n"]):hover {
    background-color:grey;
    color:black;
}

#barre2 #b2n:hover {
    background-color:grey;
}


/*************** *****************/


@media only screen and (max-width: 1000px) {

	/* CSS déjà optimisé pour le responsible design sans @media */

	p {
	color: red;
	}

	.b2, #barre2 a {
	display : inline;
	}


	.promotionac ul{
	display : inline-block;
	}
}

















/**************************/

#aceuil p:first-child, #aceuil2 p:first-child{
	color: #FF0040;

}

#aceuil p, #aceuil2 p, #aceuil a{
	padding: 0px;
	margin: 10px 10px 0px 0px;
	text-align: center;

}

.cclk {text-decoration: inherit;	 }


#aceuil2 {

	height: 730px;

}

/************************/


.promotionac ul, .promotionac li {
color: white;
list-style-type: none;
}

.promotionac  :hover
{
background-color: #424242;
}


.promotionac {
	text-align:center;
	background-color:rgba(100,100,100,0.5);

	margin: 30px 0px 30px 0px;
	padding: 0px 70px 0px 70px;
	background-image:url('Produits/Special_Promotions.png');
	background-repeat: no-repeat;
	background-size: 69px 252px;
	background-position: 25px 50%;
}

.promotionac ul {
display: inline-block;
border: 1px solid black;
margin: 35px 10px 35px 0px;
padding : 0px;
background-color: grey;
background-image: url( );
background-repeat: no-repeat;
width: 200px;
height: 290px;

}

.promotionac ul li {
	padding-top: 5px;

}

.ancprix {
	text-decoration : inherit;
    text-decoration: line-through;
}

.promotionac .cclk {
	/* text-decoration: inherit; */
	color: white;
	font-weight: bold;

}

.nvprix {
	font-style: italic;
	font-weight: bold;
	font-size: 22px;
	color: #FF0040;
    text-shadow: 0px 0px 10px white;
	margin-left: 20px;
}

.imgpr {

background-size: 200px 200px;
min-height:190px;
min-width: 200px;
border-bottom: 1px solid black;
}

.imgpr {

	background-repeat: no-repeat;
}


.narguile-fumo-jar .imgpr {

	background-image: url('Produits/Chichas/narguile-fumo-jar.jpg');
}
.chicha-amy-deluxe-smoky .imgpr {
background-image: url('Produits/Chichas/chicha-amy-deluxe-smoky.jpg');
}

.chicha-oduman-n3 .imgpr {
background-image: url('Produits/Chichas/chicha-oduman-n3.jpg');
}

.tuyau-xl-amy-gold .imgpr {
background-image: url('Produits/Tuyaux/tuyau-xl-amy-gold.jpg');
}

.charbon-naturel-amy-gold-500g .imgpr {
background-image: url('Produits/Charbons/charbon-naturel-amy-gold-500g.jpg');
}

/*******************/

.prod {
	display: block;
	overflow: hidden;
}

.prod  table:hover{
border: 3px solid black;
	padding: 2px;
}


.prod table {
	display: block;
	margin: 40px 20px 40px 20px;
	padding: 5px;
	height: 215px;
	table-layout:fixed;
	background-color: grey;
	border-radius: 8px;
		overflow: hidden;
}

.prod .imgpr {
	border-radius: 8px;
	height:198px;
}

.prod .desct {
	text-align: center;
	width: 70%;
}

.prod .titt {
	font-weight: bold;
}


.prod p {
	text-align: left;
	margin-left: 50px;

}

.prod .prixt {
	text-align: right;
	width: 30%;
	font-size: 30px;
	padding-right: 20px;
	vertical-align: middle;
}



.prixt a {
	margin-left: 10px;
	display: inline-block;
	list-style-type: none;
	margin-top: 80px;
}

.comment {
	background-image: url('comment.png');
	background-repeat: no-repeat;
	min-width: 50px;
	min-height: 50px;
}


.paanier {
	background-image: url('stack.png');
	background-repeat: no-repeat;
	min-width: 50px;
	min-height: 50px;
}


/*********** PANIER *********/

.paniera {

	border: 1px solid black;
	margin: 0 auto;
	margin-top: 20px;
	width: 850px;
	background-color: rgb(230,230,230);
	border-collapse: collapse;

}

.paniera td {
	border-bottom: 1px solid black;
	padding: 3px;
}




.paniera td:last-child {

	text-align: right;
}


.paniera tr:first-child {

	font-weight: bold;
	background-color: rgb(200,200,200);
}

.paniera tr:last-child td:last-child {
	font-weight: bold;

}

#cmdd {
margin: 10px 100px 10px 100px;
float: right;

}

/****************/


/* FORMULAIRE */
.formlr {

	background-color: grey;
	padding : 10px;
	margin: 50px auto;
	width: 600px;
	height: 400px;

}

.formlr p {
text-decoration: inherit;
text-align: center;
font-weight: bold;

}

.formlr .infos{

	margin: 20px;

}

.formlr .cmtt {

	float: right;
	width: 600px;
	height: 50px;
	max-width:560px;
}


.cmt2 {
	margin-top:10px;
	float: right;
	width: 560px;
	height: 180px;
	max-height:180px;
	max-width:560px;

}
.formlr [type=text] {

	float: right;
	width: 300px;
}

/***** FOOT *******/
.b3, .bn3 {
	font-size:15px;
	text-decoration: inherit;
	color: black;
	padding: 0px 5px 0px 5px;
	text-align: center;
}


.bn3:hover  {

	color: white;

}

.barref {
	text-align:center;
	background-color: rgba(80,80,80, 0.5);
	padding-top: 5px;
	padding-bottom: 5px;
}



#connect, #inscrip, #info  {
    display: none;
   visibility: hidden;

}

#connect:target, #inscrip:target, #info:target {
    display: inline-block;
    visibility: visible;
    position: fixed;
    z-index: 1;
}

.block{
	background-color : white;
	padding : 10px;
	font: 15px Verdana,sans-serif;
	border: 3px solid grey;
	border-radius: 7px;
        margin : 15% 25% 10% 25%;
	width : 50%;
}


.block h1 {
	text-align : center;
	margin: 30px 0px 50px 0px;
}
.block .co {	text-align : center;}

.block .logs {
	display : inline-block;
	width : 200px;
	text-align : center;
}

.co {
    margin: 0 auto;
    width: 500px;
}

#ins {
    padding: 3px;
    width: 100%;
    border: 0 solid black;
}
#ins td{    padding: 10px; }
#ins td:first-child {    text-align:left; }
#ins td:last-child {    width: 300px; text-align:right; }

#connectionb {	margin : 25px 0px 10px 0px; }

#connect #ret, #inscrip #ret, #info:target #ret { color: black; text-decoration: inherit; }


.cmde {
    margin: 100px;
    border : 1px solid black;
    border-radius : 5px;
    padding: 15px;
    background-color: white;
    width: 400px;
}

.cmde tr, .cmde td{ margin: 100px;}
.cmde td:last-child{ margin: 10px; text-align: right;}
.cmde .buttonb{ margin-top: 10px; text-align: right; float:right;}



#gbr {
    margin-top: 5px;
    position : absolute;
    top: 0px;
    right: 0px;
    float : right;
}






#menu-bar li {
  margin: 0px 0px 6px 0px;
  padding: 0px 6px 0px 6px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  text-decoration: none;
  display: block;
  padding: 3px 10px;
  margin: 0;
  margin-bottom: 6px;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
  background: #DDDDDD ;
  color: #444444;

}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
    padding: 10px;
}
#menu-bar ul a:hover {
  background: grey !important;
  border-radius: 10px;
}
#menu-bar li:hover > ul {

  display: block;
}
#menu-bar ul {
  background: #DDDDDD;
  display: none;
  margin: 0;
  padding: 0;

  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
}
#menu-bar ul li {

  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a{
  padding:10px 0px 10px 15px;
  color:#FF0040 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}

#menu-bar ul input {
      border: none;
      background: none;
      display : inline-block;
      text-decoration:  inherit;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}