/**{margin: 0; padding: 0;}*/

body{
	/*background-color: #888;*/
	background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover;
	color: #fff; position: absolute; width: 99%; height: 960px; padding-top: 1px;
}
#fond23{
	background-image: url('img/fond23.jpg');
}

input[type=submit], button{cursor: pointer;}

textarea{font-family: calibri;}

.displayNone{display: none;}
.height64px{height: 64px;}
.width140px{width: 140px;}

.boutons220px{width: 220px;}
.boutons142px{width: 142px;}
.boutons102px{width: 102px;}
.boutons80px{width: 80px;}
.boutons69px{width: 69px;}
.boutons62px{width: 62px;}
.boutons42px{width: 42px;}

.champ272px{width: 272px;}

.boutonsGris{background-color: grey;}

.fenetreH300px{height: 300px; overflow: auto;}
.fenetreH420px{height: 420px; overflow: auto;}

.espaceHorizontal20px{display: inline-block; width: 20px;}

.colorRed{color: red;}

/* Pour les pages éditées : */
/* Ne pas mettre de style dans le fichier txt*/
.centrer{text-align: center;}
.justifier{text-align: justify;}
/* Page accueil */
#styloAccueil{display: block; width: 780px; height: 64px; padding-top: 10px; margin-right: auto; margin-left: auto;}
/* Page aide */
.aa{font-family: Blacksword, geneva;}
.bb{font-size: xx-large;}
.cc{font-family: "trebuchet ms", geneva;}
.dd{font-family: calibri; font-size: x-large;}
.ee{font-family: "trebuchet ms", geneva; font-size: x-large;}
.ff{font-family: "trebuchet ms", geneva; font-weight: normal;}
.gg{font-family: Blacksword, "avant garde"; font-size: 2em;}
.hh{font-family: "arial black", "avant garde"; font-size: xx-large;}
.ii{font-family: "comic sans ms", sans-serif; font-size: xx-large;}
.jj{font-family: impact, chicago; font-size: xx-large;}
.kk{text-decoration: line-through;}


a{
	color: white;
	outline: none;
	text-decoration: none;
}
a:visited{
  color: white;
}

#session{
	background-color: #000;
	position: absolute;
	width: 280px; /*height: 120px;*/ top: 20px; left: 20px;
	word-wrap: break-word;
	display: inline-block;
	z-index: 40;
}

#styloEnBiais img{
	position: absolute;
	width: 140px; left: 280px;
}

/*********************************************************/
/************ Page Articles (provisoire) *****************/
/*********************************************************/
.affiche{
	display: none;
	position: absolute;
	top: 120px; left: 420px;
	background-color: #000;
	padding: 10px;
}
.essences:hover .affiche{display: block;}
.essences{color: #cff; cursor: pointer;}

#stylos{
	width: 1200px; height: 480px;
}
#locales{
	width: 840px; height: 380px;
	column-count: 4;
}
#exotiques{
	width: 880px; height: 380px;
	column-count: 3;
}
#prixStylos{
	width: 1400px; height: 600px;
	top: 20px; left: 220px;
}
.plumes{padding: 10px;}

/*********************************************************/
/********************  Haut  *****************************/
/*********************************************************/
#banniere{
	position: absolute;
	top: 20px; left: 120px;
	width: 1420px; height: 120px;
}

#logo{
	/*background-image: url('img/logo4.png'); background-size: cover;*/
	display: inline-block;
	margin-top: -20px;
}
#logo img{
	position: relative;
	top: -6px;
	width: 168px;
	/*background-color: rgba(20,20,20,0.68);*/
	/*background-color: #fff;*/
	/*border-radius: 100px;*/
}
#slogan2{
	position: absolute;
	color: black;
	font-size: 32px;
	margin-left: 20px;
	width: 240px;
}
#slogan2 img{
	width: 400px;
}

#menu{
	/*background-color: rgba(0,10,10,0.68);*/
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	text-align: center;
	position: absolute;
	top: 10px; left: 480px; width: 1160px;
}
#fondMenu{
	/*background-color: rgba(0,10,10,0.4);*/
	width: 100%;
	padding-top: 1px; padding-bottom: 1px;
}
.boutonMenu{
	background-color : rgba(0,60,60,0.6);
	font-family: 'Allura-Regular'; font-size: 24px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display: inline;
	margin-left : 10px; margin-right : 10px; margin-bottom : 4px; padding-left: 20px; padding-right: 28px;
}
#boutonHotte{
	background-color : rgba(0,60,60,0.6);
	font-family: 'Allura-Regular'; font-size: 24px;
	color: #fff;
	border : 2px solid #666; border-radius: 30px;
	width: 58px; height: 58px;
	margin: 0; margin-left: 10px; padding-left: 4px;
}
#nArtDansHotte{
	background-color: red;
	color: black;
	font-weight: bold; font-size: 12px;
	border-radius: 8px;
	display: inline-block;
	vertical-align: top;
	width: 16px; height: 16px;
	margin: 0; margin-left: -18px;
}
#affCpt{
	color: #ddd; position: relative;
	top: 24px; right:30px;
}

#admin{
	position: absolute;
	top: -30px; left: 7%;
	z-index: 20;
}
#admin img{
	width: 20px;
}
#admin input[type=image]{
	width: 20px;
}
#popupAdmin{
	background-color: #ddd;
	color: #00f;
	border: 6px #666 ridge;
	border-radius: 203px;
	text-align: center;
	position: absolute;
	top: 60px; left: 200px; width: 400px; height: 400px;
	z-index: 30;
}
#connexion{
	padding-top: 40px;
}

/*********************************************************/
/**************  Fenêtre déplaçable  *********************/
/*********************************************************/
#fenetre_deplacable{
	background-color : #ddd;
	border : 6px #666 ridge;
	text-align: center;
	position: absolute;
	top: 0px; left: 0px; width: 350px; height: 320px;
	margin-top: 26px;
	z-index: 30;
}
#barre_haut{
	background-color : #aaa;
	border : 6px #666 ridge;
	color: #f00;
	text-align: center; text-shadow:1px 1px #000;
	position: absolute;
	top: 0px; left: 0px; width: 350px; height: 20px;
	cursor: move; -webkit-user-select: none; user-select: none;
	z-index: 30;
}
#fondEtatEntBlanc{
	background: white; border: 1px solid black;
}
#fondEtatEntFuchsia{
	background: fuchsia; border: 1px solid black;
}

#modif{
	background-color : #ff0000;
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	color : #000;
	position : absolute;
	top : 10px;
	padding: 10px; margin: 14px;
	z-index: 5;
}

/*********************************************************/
/*******************  TinyMCE  ***************************/
/*********************************************************/
#editeur{
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 150px; left: 220px; width: 1400px;
	padding-left: 40px;
	z-index: 7;
}
#editPhotos{
	background-color: rgba(0,10,10,0.68);
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 10px; left: 820px; width: 400px;
	padding-left: 40px;
	z-index: 7;
}

/*********************************************************/
/*********************  Page  ****************************/
/*********************************************************/
#page{
	/*background: url("img/fond.jpg") center fixed; background-size: contain;*/
	background-color: rgba(0,10,10,0.68);
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	font-size: 22px;
	overflow: auto;
	position : absolute;
	width: 1400px; height: 630px; top: 150px; left: 10%;
	padding: 20px; padding-top: 0px;
}

#pageAccueil{
	/*background: url("img/fond.jpg") center fixed; background-size: contain;*/
	background-color: rgba(0,10,10,0.68);
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	font-size: 22px;
	overflow: auto;
	position : absolute;
	width: 1000px; height: 630px; top: 150px; left: 10%;
	padding: 20px; padding-top: 0px;
}
#pageAccueil img{
	width: 60%; height: 60%;
}

/*********************************************************/
/****************  Barre latérale  ***********************/
/*********************************************************/
#barre_lat{
	background-color: rgba(0,10,10,0.68);
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	text-align: center;
	overflow: auto;
	position : absolute;
	width: 320px; height: 610px; top: 150px; left: 1300px;
	padding: 20px;
}
#barre_lat img{

}
#photoAtelier video{
	margin-top: 10px;
}
/*video {
    width: 400px; height: 300px;
    object-fit: cover;
}*/

.cadre{ width: 400px; height: 300px; margin: auto;}
.diapo-2 {position: relative;}
.diapo-2 img {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  animation: diapo-2 24s linear infinite 0s;
}
.diapo-2 img:nth-child(1) {animation-delay: 0s;}
.diapo-2 img:nth-child(2) {animation-delay: 6s;}
.diapo-2 img:nth-child(3) {animation-delay: 12s;}
.diapo-2 img:nth-child(4) {animation-delay: 18s;}
@keyframes diapo-2 {
  0% {opacity: 0; animation-timing-function: ease-in;}
  8.33% { opacity: 1;  animation-timing-function: ease-out;}
  25% { opacity: 1;}
  33.33% { opacity: 0;}
  100% {opacity: 0;}
}

.blocBarreLat button{
	background-color: rgba(0,62,100,0.6);
	border : 0px;
	color: white;
	font-family: Allura-Regular;
	font-size: 30px;
	width: 198px;
}

/*********************************************************/
/*******************  Contenu  ***************************/
/*********************************************************/
#contenu{
	font-family: DancingScript-VariableFont_wght;
	margin-left: 4%; margin-right: 4%;
}
#contenu p{
	font-size: 26px;
}

#nouvProduit{
	background-color : #000;
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	position: relative;
	top: 160px; left: 780px; width: 320px;
	padding: 14px;
	z-index: 14;
}
#nouvProduit form{
	display: inline;
}

#pageStylos{
	text-align: center;
	position: absolute;
	top: 0px; left: 0px; width: 96%;
	margin: 14px;
	z-index: 6;
}

#autresProduit{
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	text-align: center;
	position: absolute;
	top: 10px; left: 0px; width: 96%;
	margin: 14px;
	z-index: 6;
}
#autresProduit .inline{
	height: 240px;
}
#autresProduit .inline form{
	height: 180px;
}

#intro{
	background-color : #000;
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 160px; left: 800px; width: 600px;
	padding: 14px;
	z-index: 14;
}

.inline{
	/*position: relative; Ne pas renseigner pour avoir div "zoom" en dehors*/
	text-align: center;
	font-family: 'Allura-Regular'; font-size: 30px;
	width: 280px; height: 80px;
	margin: 14px;
	display: inline-block;
	vertical-align: top;
}
.inline form{
	height: 28px;
}
.zoom{
	display: inline-block;
	width: 0px;
	transition: width 0.4s linear;
	position: absolute;
	margin-top: -10%;
}
.inline form:hover .zoom{
	background-color: rgba(10,10,0,0.8);
	border-radius: 8px;
	position: absolute;
	padding: 20px;
	z-index: 10;
}

.modele form:hover .description{
	background-color: rgba(10,10,0,0.8);
	border-radius: 8px;
	display: inline-block;
	position: absolute;
	top: 200px; left: 400px; width: 480px;
	padding: 20px;
	z-index: 10;
}

.description2{ /* Identique à "description" pour différencier le nom pour ":hover:after". */
	font-family: 'DancingScript-VariableFont_wght';
	display: inline-block;
	position: relative;
	height: 100px;
	margin: 10px;
}

.description{
	font-family: 'DancingScript-VariableFont_wght';
	display: inline-block;
	position: relative;
	height: 100px;
	margin: 10px;
}
.modele .description:hover:after{
	background: #333;
	background: rgba(0,0,0,.8);
	border-radius: 4px;
	color: #fff;
	content: attr(alt);
	left: 0px; bottom: 60px; width: 500px;
	padding: 5px 15px;
	position: absolute;
	z-index: 98;
}
.modele .description:hover:before{
	border: solid; border-color: #333 transparent; border-width: 10px 10px 0 10px;
	content: "";
	left: 100px; bottom: 48px;
	position: absolute;
	z-index: 98;
}
/*Astuce pour afficher un petit triangle en dessous ou à coté d'une info bulle.*/
/*div {border: 10px solid; border-color: transparent transparent transparent #ddd; width: 0; height: 0;}*/

.popup{
	background-color: #000;
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	text-align: center;
	position: relative;
	top: 10px;
	padding: 10px;
	z-index: 12;
}
.popup img{
	width: 100%;
}

.modele{
	background-color: #1f2a2d;
	text-align: center;
	overflow: auto;
	height: 580px;
}
.modele input{
	width: 500px;
	margin: auto; padding: 10px;
}

#popupDoubleAchat{
	background-color: black;
	border: 1px solid;
	position: absolute;
	width: 600px;
	top: 180px; left: 420px;
	padding: 40px;
	z-index: 40;
}
#popupDoubleAchat input{
	width: 42px; padding: 0; margin-top: 20px;
}

.nonDispo{
	background-color: #222;
	font-family: calibri;
	border-radius: 4px;
	padding: 6px; margin: auto; width: max-content;
}
.dispo{
	background-color: #444;
	font-family: calibri;
	border-radius: 4px;
	padding: 6px; margin: auto; width: max-content;
}

.modeleAutreProd{
	background-color: #1f2a2d;
	text-align: center;
	overflow: auto;
	height: 580px;
}
.modeleAutreProd input{
	margin: auto; padding: 10px;
}
.modeleAutreProd .description:hover:after{
	background: #333;
	background: rgba(0,0,0,.8);
	border-radius: 4px;
	color: #fff;
	content: attr(alt);
	left: 0px; bottom: 20px; width: 260px;
	padding: 5px 15px;
	position: absolute;
	z-index: 98;
}
.modeleAutreProd .description:hover:before{
	border: solid;
	border-color: #333 transparent;
	border-width: 10px 10px 0 10px;
	content: "";
	left: 100px; bottom: 8px;
	position: absolute;
	z-index: 98;
}

/*********************************************************/
/******************  Commandes  **************************/
/*********************************************************/
#cde{
	background-color: #000;
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	font-family: calibri;
	overflow: auto;
	position: relative;
	top: 10px; height: 620px;
	padding-left: 40px; margin-left: auto; margin-right: auto;
	z-index: 14;
}
#cde p{
	font-size: 20px;
}
#cde input{
	width: 200px;
	padding: 4px;
}
#contenuCdeAdr .boutons10px{
	width: 10px;
}

#cde input::placeholder{
	color: red;
	font-weight : bold;
}
#cde label{
	text-align: right;
	display: inline-block;
	width: 240px;
	margin-right: 20px;
	vertical-align: top;
}
#contenuCde{
	overflow: auto;
	height: 500px;
	padding-left: 40px;
}
#contenuCdeAdr{
	height: 560px;
	overflow: auto;
}
.accèsRib{
	background-color: #000;
	border: 1px solid #fff;
	padding-left: 10px; padding-right: 10px;
}
#conges{
	color: yellow;
}
#confirmAnnulCom{
	background-color: black;
	border: 1px solid;
	position: absolute;
	padding: 40px;
	left: calc(50% - 120px);
	z-index: 40;
}
#boutonsCde{
	background-color: #011;
	border-top: 1px solid #fff;
	text-align: center;
	height: 119px;
	margin-left: -40px;
	margin-right: auto;
}
#boutonBonDeCde{
	background-color: #000;
	border: 1px solid #fff;
	padding-left: 10px; padding-right: 10px;
}
#boutonsCdeAdr{
	background-color: #011;
	border-top: 1px solid #fff;
	height: 39px;
	margin-left: -40px;
	margin-right: auto;
	padding: 10px;
}
#compteClient{
	background-color: black;
	border: 1px solid;
	font-family: calibri;
	position: relative;
	/*width: 600px; height: 400px;*/
	padding: 40px;
	margin: auto;
	margin-top: 40px;
}
#compteClient label{
	text-align: right;
	display: inline-block;
	width: 240px;
	margin-right: 20px;
	vertical-align: top;
}
#confirmAnnulCde{
	background-color: #022;
	border: 1px solid;
	text-align: center;
	position: relative;
	width: 460px;
	margin-left: auto; margin-right: auto; margin-top: -100px;
	padding: 20px;
}
#bandeauAcceptCgvValidCde{
	float: left;
	position: relative;
	width: 100%;
	top: 20px;
}

#fenetreCgv{

}
#fenetreCgv label{
	text-align: left;
	width: 540px;
	margin: 0;
}
#fenetreCgv input{
	width: 20px;
}
#fenetreCgv button{
	background-color: #000;
	border: 1px solid #fff;
	color: white;
	font-family: calibri;
	font-size: 18px;
}

#popupCgv{
	background-color: #022;
	border: 1px solid #fff;
	text-align: center;
	position: relative;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -110px;
	padding: 40px;
}

#retourValCom{
	background-color: black;
	border: 1px solid;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	text-align: center;
	top: 602px;
	width: 109%;
	padding: 10px;
	margin-left: -5%;
}
#retourValCom input{
	width: 260px;
}

#adrDif input{
	width: 10px;
	vertical-align: 0;
}
#adrDif label{
	display: inline;
	margin: 0;
}

#bonCom{
	background-color: #fff;
	color: #000;
	position: relative;
	width: 800px; height: 1140px; top: 40px;
	margin: auto; padding: 60px;
}
#bonCom input{
	position: absolute;
	bottom: 40px;
	margin: auto;	
}

.emailCommande{
	float: right; padding-right: 40px;
}
#emailCommandeLigne{
	position: relative; right: 40px; margin-left: 40px;
}
#emailCommandeAdr1{
	float: left; position: relative;
}
#emailCommandeAdr2{
	float: right; position: relative; right: 200px;
}

/*********************************************************/
/********************  Hotte  ****************************/
/*********************************************************/
#hotte{
	background-color: #000;
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	text-align: center;
	position: relative;
	top: 10px; height: 540px;
	padding: 40px; margin-left: auto; margin-right: auto;
	z-index: 20;
}
#contenuHotte{
	overflow: auto;
	height: 530px;
}
#boutonsHotte{
	background-color: #011;
	border-top: 1px solid #fff;
	height: 30px;
	margin-left: -40px;
	margin-right: -40px;
	padding: 10px;
}
.imgObjHotte{
	height:14px; padding-left: 40px; transform: rotate(180deg);
}
.infoTempsHotte{
	background-color: black;
	border: 1px solid;
	position: absolute;
	top: 60px;
	width: calc(50% + 80px); left: calc(24% - 78px);
	padding: 40px;
}
.compte_a_rebours{
	float: right; position: relative;
	padding-right: 40px; width: 680px;
}
#compte_a_rebours1{
	display: inline-block; width: 60px;
}
#compte_a_rebours2{
	color: red; display: inline-block; width: 60px;
}
#compte_a_rebours3{
	color: red; display: inline-block;
}

.supArticle{
	display: inline-block;
	position: relative;
}
.supArticle:hover:after{
	background: #012;
	border-radius: 4px;
	color: #fff;
	content: "Suppression de cet article";
	position: absolute;
	left: -220px; bottom: 0px; width: 200px;
	padding: 5px 15px;
	z-index: 98;
}
.supArticle:hover:before{
	border: 10px solid;
	border-color: transparent transparent transparent #ddd;
	content: "";
	position: absolute;
	width: 0; height: 0; left: 10px; bottom: 8px;
	z-index: 98;
}
.supArticle input{
	background-color: rgba(100,100,100,0.40);
	color: #fff;
	border: 1px solid #fff; border-radius: 14px;
	width: 28px; height: 28px;
	margin-left: 20px;
	vertical-align: top;
}
.button{
	text-align: center;
}

/*********************************************************/
/**************  Fenêtre de Gestion  *********************/
/*********************************************************/
#fenetreGestion{
	overflow: auto;
	font-family: calibri;
	height: 540px;
}
#boutonsGestion{
	background-color: #011;
	font-family: calibri;
	border-top: 1px solid #fff; border-right: 1px solid #fff;
	text-align: center;
	height: 109px;
	margin-left: -90px; margin-right: auto; margin-bottom: -40px;
	padding-left: 90px;
}
#boutonsGestion form{
	position: absolute; text-align: left; bottom: 30px;
}
#boutGestCase1{
	position: relative;
	display: inline-block;
	vertical-align: top;
	top: 44px; margin-right: 40px;
}
#boutGestCase2{
	position: relative;
	display: inline-block;
	font-size: 18px;
	text-align: center;
	vertical-align: top;
	top: 44px; padding: 2px; margin-right: 40px; margin-left: 40px;
}
.boutGestCase345{
	position: relative;
	display: inline-block;
	vertical-align: top;
	top: 44px; margin-right: 40px; margin-left: 40px;
}
.boutGestCaseSep{
	border-left: 1px solid #fff;
	display: inline-block;
	position: relative;
	top: 36px; height: 109px;
}
#boutGestCase2a1{
	background-color: #000;
	border: 1px solid #fff;
	position: relative;
	display: inline-block;
	top: 4px; padding-left: 10px; padding-right: 10px; width: 80px;
}
#boutGestCase2a2{
	background-color: #000;
	border: 1px solid #fff;
	position: relative;
	display: inline-block;
	top: 8px; padding-left: 10px; padding-right: 10px; width: 80px;
}
#coulBoutEtatEntOuv{background-color: chartreuse;}
#coulBoutEtatEntFer{background-color: fuchsia;}
#fenetreGestion h2{
	font-size: 28px;
}
#coulBenefPositif{
	color: chartreuse;
}
#coulBenefNegatif{
	color: red;
}
#boutonVoirCdes{
	color: white; font-family: calibri; font-size: 22px;
	background-color: rgba(0,0,0,0); border : 0px;
}
#identite{
	float: right; margin-right: 36%;
}
#ligneCde{
	position: relative;
}
#boutonLigneCde{
	font-size: 18px; color: white;
	background-color: rgba(0,0,0,0); border : 0px;
}
#ligneCdeEtat{
	position: absolute; left: 300px; font-size: 22px;
}
.yellowEtat{color: yellow;}
.aquaEtat{color: aqua;}
.greenEtat{color: green;}
.chartreuseEtat{color: chartreuse;}
.orangeEtat{color: orange;}
.redEtat{color: red;}
#affichEtatComValid{background-color: aqua; padding-left: 10px; padding-right: 10px;}
#affichEtatComReçue{background-color: green; padding-left: 10px; padding-right: 10px;}
#affichEtatComSold{background-color: chartreuse; padding-left: 10px; padding-right: 10px;}
#affichEtatComAnnul{background-color: orange; padding-left: 10px; padding-right: 10px;}
#affichEtatComRetract{background-color: red; padding-left: 10px; padding-right: 10px;}
#formDepense{
	position: absolute; top: 100px;
}
#fenetreArticle{
	background-color: black;
	overflow: auto;
	position: absolute;
	width: 1600px; height: 500px;
	top: 20px; left: 40px;
	padding: 20px;
	z-index: 22;
}
#fenetreArticle img{margin: 10px;}
#fenetreArticleBoutons{
	background-color: black;
	border-top: 1px solid;
	position: absolute;
	width: 1620px; height: 40px;
	top: 560px; left: 40px;
	padding-left: 20px; padding-top: 4px;
	z-index: 22;
}
#listePrix{
	position: relative;
	width: 1220px;
	height: 450px;
	overflow: auto;
}
#listePrix h3{
	background-color: blue;
	margin-top: 10px;
	margin-bottom: 4px;
	margin-right: 40px;
}
.lignePrixEssence{
	background-color: blue;
	display: inline-block;
	width: 280px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 2px;
	border-bottom: 1px dashed;
}
.prixEssence{
	color: aqua;
	float: right;
}
.prixEssenceSup{
	color: red;
	float: right;
}

/*********************************************************/
/****************  Ajout Modèle  *************************/
/*********************************************************/
#resultVerifNum{
	background-color: black;
	position: absolute;
	width: 600px; top: 20px; left: 600px;
	z-index: 22;
}
#resultVerifNum img{margin: 10px;}
.champsSaisie{position: absolute; left: 100px;}

/*********************************************************/
/*****************  Historique  **************************/
/*********************************************************/
.boutonsMonCompte{
	border: 1px solid;
	color: white;
	font-family: calibri; font-size: 20px;
	background-color: rgba(0,0,0,0);
}

#hist{
	background-color: #000;
	border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	font-family: calibri;
	position: relative;
	top: 10px; height: 540px;
	padding: 40px; margin-left: auto; margin-right: auto;
	z-index: 14;
}
#hist p{
}
#hist input{
	width: 200px;
	padding: 4px;
}
#hist input::placeholder{
	color: red;
	font-weight : bold;
}
#contenuHist{
	overflow: auto;
	height: 510px;
	padding-left: 40px;
}
#messageRetract{
	text-align: center;
	font-size: 32px;
	color: red;
	position: relative;
	top: 120px;
}
#boutonDetailCom{
	color: white;
	font-family: calibri; font-size: 22px;
	background-color: rgba(0,0,0,0); border : 0px;
}
#boutonFacture{
	color: white; font-family: calibri; font-size: 22px; background-color: rgba(0,0,0,0); border : 0px;
}
#popupFactIndispo{
	background-color: #022;
	border: 1px solid #fff;
	text-align: center;
	position: relative;
	width: 880px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -200px;
	padding: 40px;
}
#popupBonDeCom{
	cursor: pointer;
}
#popupBonDeComHref{
	display: none;
}
#boutonsHist{
	background-color: #011;
	border-top: 1px solid #fff;
	text-align: center;
	height: 69px;
	margin-left: -40px;
	margin-right: -40px;
}
#contenuBoutonsHist{
	float: left; width: 100%; position: relative; top: 20px;
}
.contenuBoutonsHistZones{float: left; padding-left: 80px;}
#boutHist{
	position: relative;
	float: left;
	width: 100%; top: 20px;
}
.histoListArt{
	float: right; padding-right: 40px;
}
#barreSep{
	position: relative; right: 40px; margin-left: 40px;
}
.adrLivr{
	float: left; position: relative;
}

/*********************************************************/
/*********  Fenêtre envoi Mail réponse  ******************/
/*********************************************************/
#mailReponse{
	background-color: black;
	border: 1px solid;
	position: relative;
	top: 140px; left: 400px;
	width: 730px; padding: 20px;
	z-index: 40;
}
#yaki{
	background-color: black;
	border: 2px solid gray;
	overflow: auto;
	position: absolute;
	padding:20px;
	width:420px; height: 400px;
}
.ligneCarnetAdresses{
	color: white;
	font-family: calibri; font-size: 22px;
	background-color: rgba(0,0,0,0); border : 0px;
}
#mailRepPJ{
	background-color: #012;
	border: 1px solid; border-radius: 4px;
	padding-bottom: 2px; padding-left: 2px; padding-right: 6px;
	margin-right: 6px;
}

/*********************************************************/
/****  Fenêtre avertissement modif en cours  *************/
/*********************************************************/
#modifEnCours{
	background-color : #ddd;
	border : 6px #666 ridge; border-radius: 103px;
	color: #00f;
	font-size: 20px;
	text-align: center;
	position: absolute;
	top: 260px; left: 600px;
	width: 200px; height: 200px;
	z-index: 30;
}

/*********************************************************/
/***********  Fichiers textes générés  *******************/
/*********************************************************/
/* Fichiers popupInfoDelai.txt et tempsEcoule.txt écrit en dur */
.popupInfo{
	background-color: black;
	border: 1px solid;
	position: relative;
	top: 60px; width: 800px;
	margin: auto; padding: 40px;
}
/* Page d'accueil issue de Modifier page et reprise en dur. */
#accueil h1{text-align: center;}
#accueil p{text-align: justify;}
#accueil img{
	display: block;
	width: 780px;
	padding-top: 10px; margin-right: auto; margin-left: auto;
}
/* Page Mentions Légales issue de Modifier page et reprise en dur. */
#mentionsLegales h2{
	font-family: calibri;
	margin-right: 400px;
	margin-left: 100px;
	text-align: center;
}
#mentionsLegales p{
	font-family: calibri;
	text-align: justify;
	margin-right: 5%; margin-left: 2%;
}
/* Page Idées issue de Modifier page et reprise en dur. */
#idees{font-family: calibri; margin-right: 240px;}
#idees h2{text-align: center;}
#idees .vert{color: #0f0}
#idees .orange{color: #f90}
#idees .bleu{color: #0ff}
#idees .jaune{color: #ff0}
#idees .rouge{color: #f00}
/* Page CGV issue de Modifier page et reprise en dur. */
#cgv{
	font-family: calibri;
	margin-right: 5%; margin-left: 2%;
	text-align: justify;
}
#cgv h2{text-align: center;}
/* Page Editions limitées issue de Modifier page et reprise en dur. */
#editLimit h2{text-align: center;}
#editLimit img{height: 64px; display: block; margin-left: auto; margin-right: auto;}
/* Page Au goût du jour issue de Modifier page et reprise en dur. */
#actu{
	margin-right: 400px; margin-left: 150px;
}
#actu h2{text-align: center;}
#actu h3{font-size: 30px;}
/* Page Pour les plus curieux issue de Modifier page et reprise en dur. */
#plus h2{text-align: center;}
#plus p{text-align: center;}
#plus img{height: 220px;}

/*********************************************************/
/*********************  Bas  *****************************/
/*********************************************************/
#footer{
	/*background: url("img/fond.jpg") center fixed; background-size: contain;*/
	background-color: rgba(10,10,0,0.68);
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	position: absolute;
	top: 830px; left: 10%; width: 1400px;
}
#footer a{
	text-decoration: none;
	font: 18px calibri;
	text-shadow:2px 2px #000;
}
.blocFooter{
	font-family: calibri;
	position: relative;
	display: inline-block;
	margin: 20px; margin-top: 8px; margin-bottom: 10px;
	vertical-align: top;
}
.blocFooter form{
	margin-left: -10px;
}
.blocFooter button{
	color: white; font-family: calibri; font-size: 16px; background-color: rgba(0,0,0,0); border : 0px;
}

#w3c{
	border:0; width:20px;
}
#w3cCss{
	border:0; width:40px;
}

#oeufDePaques{
	display: inline-block; border: 0.1px solid black; border-radius: 2px;
	position: absolute; width: 2px; height: 2px; cursor: pointer;
}
#silTePlait{
	display: none; border: 0.1px solid red; border-radius: 2px;
	position: absolute; width: 2px; height: 2px;
}
#dessineMoi{
	display: none; border: 0.1px solid green; border-radius: 2px;
	position: absolute; width: 2px; height: 2px;
}
#mouton{
	display: none; border: 0.1px solid white; border-radius: 2px;
	position: absolute; width: 2px; height: 2px;
}
#stEx{
	display: none; background: radial-gradient(white 50%, transparent 70%);
	border-radius: 100px;
	position: absolute; left: 10px; width: 200px; height: 160px;
	padding-left: 30px; padding-right: 10px;
	z-index: 200;
}

/*********************************************************/
/***************  Medias querries  ***********************/
/*********************************************************/
@media all and (min-width: 1920px) and (max-width: 3840px) {
	/*#banniere{left: 120px;}
	#page{left: 120px; width: 1520px;}
	#barre_lat{left: 1290px; width: 350px;}
	#menu{left: 680px; width: 690px;}
	#fondMenu{width: 690px;}
	#footer{left: 120px; width: 1520px;}*/
	#banniere{left: 4%; width: 92%;}
	#page{left: 4%; width: calc(66% + 420px);}
	#pageAccueil{left: 4%; width: 62%;}
	#barre_lat{left: 70%; width: 420px;}
	#menu{left: 480px; width: calc(72% - 26px);}
	.boutonMenu{
	margin-left: calc(6% - 46px); margin-right: calc(6% - 46px); padding-left: calc(6% - 48px); padding-right: calc(6% - 48px);
	font-size: 24pt;
	}
	#fondMenu{/*width: 1160px;*/}
	#footer{left: 4%; width: calc(64% + 500px);}
	.zoom{left: 10%;}
	.inline form:hover .zoom{width: 70%;}
	#autresProduit .zoom{left: 33%; margin-top: -6%;}
	#autresProduit .inline form:hover .zoom{width: 480px;}
	.popup img{width: 80%;}
}

@media all and (min-width: 1770px) and (max-width: 1920px) {
	#banniere{left: 4%; width: 92%;}
	#page{left: 4%; width: calc(66% + 420px);}
	#pageAccueil{left: 4%; width: 62%;}
	#barre_lat{left: 70%; width: 420px;}
	#menu{left: 480px; width: calc(72% - 26px);}
	.boutonMenu{
	margin-left: calc(6% - 46px); margin-right: calc(6% - 46px); padding-left: calc(6% - 48px); padding-right: calc(6% - 48px);
	font-size: 24pt;
	}
	#fondMenu{/*width: 1160px;*/}
	#footer{left: 4%; width: calc(64% + 500px);}
	.zoom{left: 10%;}
	.inline form:hover .zoom{width: 70%;}
	#autresProduit .zoom{left: 33%; margin-top: -6%;}
	#autresProduit .inline form:hover .zoom{width: 480px;}
	.popup img{width: 80%;}
}

@media all and (min-width: 1400px) and (max-width: 1770px) {
	#banniere{left: 60px; width: 92%;}
	/*#logo{width: 440px; height: 120px;}*/
	#page{left: 4%; width: calc(84% + 60px);}
	#pageAccueil{left: 4%; width: calc(84% - 400px);}
	#pageAccueil img{width: 80%}
	#barre_lat{left: calc(88% - 340px); width: 400px;}
	#menu{left: 440px; width: calc(96% - 406px);}
	.boutonMenu{
		margin-left: calc(6% - 44px); margin-right: calc(6% - 44px); padding-left: calc(6% - 48px); padding-right: calc(6% - 48px);
		font-size: 24pt;
	}
	#fondMenu{width: 100%;}
	#footer{left: 4%; width: calc(84% + 100px);}
	.zoom{left: 10%;}
	.inline form:hover .zoom{width: 70%;}
	#autresProduit .zoom{margin-top: -6%; left: 30%;}
	#autresProduit .inline form:hover .zoom{width: 480px;}
}

@media all and (min-width: 950px) and (max-width: 1400px) {
	#banniere{
		/*background-size: 100% 100%;*/
		width: 98%; height: 120px; left: 10px;
	}
	/*#logo{width: 340px; height: 90px;}*/
	#admin{top : 2px; left: 8%;}
	#slogan2 img{width: 280px;}
	#page{top: 160px; left: 10px; width: calc(96% - 30px);}
	#pageAccueil{left: 10px; width: calc(96% - 390px);}
	#pageAccueil img{width: 80%}
	#contenu{/*margin-left: 40px; margin-right: 40px;*/}
	#barre_lat{left: calc(96% - 320px); width: 300px;}
	video{ width: 320px; height: 240px;}
	#menu{top: 0px; left: 350px; width: calc(98% - 340px);}
	.boutonMenu{font-size: 30px;}
	#fondMenu{}
	#footer{left: 10px; width: calc(96% + 10px);}
	.zoom{left: 6%;}
	.inline form:hover .zoom{width: 80%;}
	#autresProduit .zoom{
		left: 30%;
		margin-top: -6%;
	}
	#autresProduit .inline form:hover .zoom{width: 400px;}
}

@media all and (min-width: 680px) and (max-width: 950px) {
	body{height: 1220px;}
	#banniere{width: 98%; height: 180px; left: 10px;}
	/*#logo{width: 340px; height: 90px;}*/
	#admin{top : 0px; left: 220px;}
	#slogan2{display: none;} #slogan2 img{display: none;}
	#page{top: 180px; left: 12px; width: calc(98% - 52px); height: 840px;}
	#pageAccueil{top: 160px; left: 12px; width: calc(98% - 52px); height: 400px;}
	#pageAccueil img{width: 80%}
	#barre_lat{
		top: 600px; left: 12px; width: calc(96% - 12px); height: 480px;
		padding: 1%;
	}
	.cadre{width: 300px; height: 220px;}
	#barre_lat img{width: 300px;}
	#partager img{width: 28px;}
	#menu{left: 340px; top: 0px; width: calc(100% - 350px);}
	#fondMenu{width: 100%;}
	.boutonMenu {font-size: 24px;}
	#footer{
		left: 12px; top: 1100px; width: calc(96% - 12px);
		padding: 1%;
	}
	.zoom{left: 4%;}
	.inline form:hover .zoom{width: 90%;}
	#autresProduit .zoom{
		left: 30%;
		margin-top: -6%;
	}
	#autresProduit .inline form:hover .zoom{width: 340px;}
	.modele{height: 780px;}
}

@media all and (min-width: 330px) and (max-width: 680px) {
	body{height: 1330px;}
	#banniere{
		text-align: center;
		width: 98%; height: 120px; left: 0;
	}
	/*#logo{width: 280px; height: 80px;}*/
	#admin{top : 0px; left: 220px;}
	#slogan2{display: none;} #slogan2 img{display: none;}
	#page{top: 340px; left: 0; width: calc(96% - 40px); height: 800px;}
	#pageAccueil{top: 270px; left: 0; width: calc(96% - 40px); height: 400px;}
	#pageAccueil img{width: 80%}
	video {width: 280px; height: 210px;}
	#contenu{/*margin-left: 40px; margin-right: 40px;*/}
	#barre_lat{
		top: 700px; left: 0; width: 94%; height: 400px;
		padding: 1%;
	}
	.cadre{width: 200px; height: 180px;}
	#barre_lat img{width: 200px;}
	.blocBarreLat{margin-top: -30px; margin-bottom: 10px;}
	#partager img{width: 28px;}
	#menu{left: 0; top: 120px; width: 98%;}
	#fondMenu{}
	.boutonMenu {font-size: 26px;}
	#footer{
		left: 0; top: 1180px; width: 94%;
		padding: 1%;
	}
	.zoom{left: 0px;}
	.inline form:hover .zoom{width: 90%;}
	#autresProduit .zoom{left: 10%;}
	#autresProduit .inline form:hover .zoom{width: 70%;}
	.modele input{width: 90%;}
	.modele .description:hover:after{width: 90%;}
}

@media all and (min-width: 230px) and (max-width: 330px) {
	body{height: 1330px;}
	#banniere{
		text-align: center;
		width: 98%; height: 120px; left: 0;
	}
	/*#logo{width: 280px; height: 80px;}*/
	#admin{top : 0px; left: 220px;}
	#slogan2{display: none;} #slogan2 img{display: none;}
	#page{top: 340px; left: 0; width: calc(96% - 40px); height: 800px;}
	#pageAccueil{top: 270px; left: 0; width: calc(96% - 40px); height: 400px;}
	#pageAccueil img{width: 80%}
	video {width: 280px; height: 210px;}
	#contenu{/*margin-left: 40px; margin-right: 40px;*/}
	#barre_lat{
		top: 700px; left: 0; width: 94%; height: 400px;
		padding: 1%;
	}
	.cadre{width: 200px; height: 180px;}
	#barre_lat img{width: 200px;}
	.blocBarreLat{margin-top: -30px; margin-bottom: 10px;}
	#partager img{width: 28px;}
	#menu{left: 0; top: 120px; width: 98%;}
	#fondMenu{}
	.boutonMenu {font-size: 26px;}
	#footer{
		left: 0; top: 1180px; width: 94%;
		padding: 1%;
	}
	.zoom{left: 0px;}
	.inline form:hover .zoom{width: 90%;}
	#autresProduit .zoom{left: 10%;}
	#autresProduit .inline form:hover .zoom{width: 70%;}
	.modele input{width: 90%;}
	.modele .description:hover:after{width: 90%;}
}

/*@font-face {src: url('polices/Blacksword.otf'); font-family: 'Blacksword'; font-display: swap;}
@font-face {src: url('polices/DancingScript-VariableFont_wght.woff2'); font-family: 'DancingScript-VariableFont_wght'; font-display: swap;}
@font-face {src: url('polices/Allura-Regular.woff2'); font-family: 'Allura-Regular'; font-display: swap;}*/
@font-face {
  font-family: 'DancingScript-VariableFont_wght';
  src:  url('polices/DancingScript-VariableFont_wght.woff2') format('woff2'),
		url('polices/DancingScript-VariableFont_wght.woff') format('woff'),
		url('polices/DancingScript-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Allura-Regular';
  src:  url('polices/Allura-Regular.woff2') format('woff2'),
		url('polices/Allura-Regular.woff') format('woff'),
		url('polices/Allura-Regular.ttf') format('truetype');
  font-display: swap;
}
/*
@font-face {
  font-family: 'Neon';
  font-style: normal;
  font-weight: 400;
  src: local('Neon'), 
       local('Pacifico-Regular'), 
       url(/assets/fonts/Neon.woff2) format('woff2'),
       url(/assets/fonts/Neon.woff) format('woff');
  font-display: swap;
}
*/