/* Couleurs et paramètres par défaut */
	:root {

	  --lightColor: #FFFFFF;

	  --headerColor: #002855;
	  --bkgColor: #eeeeee;
	  --greyColor: #7c878e;
	  --yellowColor: #C8B577;
	  --headerFontColor: #FFFFFF;
	  --selectedColor: #002855;
	  --selectedFontColor: var(--lightColor);
	  --unselectedColor: rgba(0,0,0,0.1);
	  --catColor: var(--unselectedColor);
	  --errorColor : #FF0000;

	  --stdPadding: 5px;
	  --bigPadding: 12px;
	  
	  --headerHeight:80px;
	  --headerSpace:10px;
	  --titleHeight:55px;
	  --subcatHeight:30px;
	}

	/* mise en page générale */
	* {box-sizing: border-box;}
	body, html {height:100%; padding:0px; margin:0px; font-family: "Lato", Helvetica, Arial, sans-serif;}
	body {background:var(--bkgColor); font-size:small}
	body.minimize {background:#FFFFFF; }

	.header {height:var(--headerHeight); background:var(--headerColor);  color:var(--headerFontColor);padding:var(--bigPadding); margin-bottom:var(--headerSpace);}
	.header.minimize { background:var(--bkgColor);  color:#000; padding:0px;}
	.header.minimize .login {z-index:5; margin:5px;position:relative;}
	.content {margin:0px var(--bigPadding);  height: calc(100% - var(--headerHeight) - var(--headerSpace));position:relative}
	body.minimize .content {margin:0px;}	
		
	/* mise en page du tableau de produits */	
	.tableFixHead          { overflow-y: auto; height: calc(100% - var(--titleHeight) - var(--subcatHeight) ) }
	.tableFixHead thead th {  background:#FFFFFF;}
	tr.product_entete {box-shadow: 0px 0px 10px black; z-index:10; position: sticky; top: 0;}
	tr.product_entete th{padding:10px;position: sticky; top: 0;}

	.product td {padding:var(--stdPadding);  }
	tr.product { border-bottom: 1px solid var(--catColor);}
	table.product {width:100%; font-size:small}
	

	.mainCat {display:none}
	form .mainCat {display:inline-block; font-weight:bold;}
	.product_component {width:100px;}
	.product_illustration {width:100px;}
	.product_specifications {}
	.product_order {width:100px;}
	.product_price {width:100px;text-align:right;}
	.product_units {width:75px;}
	.product_total {width:100px;text-align:right;}
	.product_restrictions	{}
	 tr.product td {border-top:1px solid #EEEEEE;}
	 tr.product.first td {border-top:2px solid var(--catColor);}
	 td {border-left:2px solid #EEEEEE; vertical-align:top;}
	 td:first-child {border-left:0px solid #EEEEEE;}
	 tr.product:hover {background:rgba(0,0,0,0.03)}
	 .hidden {display:none}
	 form .hidden {display:table-cell}
	
	.download {float:right; padding-top:6px;padding-right:6px;}
	#commande {display:inline;}

	.cat_title {background:var(--catColor)}
	.product input {text-align:right; width:100%}
	input.error {border: 2px solid var(--errorColor)}
	#panel_onglet_total input {pointer-events: none; border:0px; -moz-appearance: textfield;background: inherit;}
	.illustration {transition: transform .2s; transition-delay: 0s; width:100px; height:100px; background:#DDDDDD; border-radius:5px;background-position:center; background-size:cover}
	.illustration:hover {transform: scale(2);transition-delay: 0.5s;}
	#full_total {background:var(--selectedColor); color:var(--lightColor); text-align:right; font-size:140%; padding:6px 10px; height:30px;}
	

	/* Navigation par onglets */
	.groupe_panel {background:#FFFFFF; border:2px solid var(--selectedColor); height:100%;  height: calc(100% - 60px ) ;position:relative}
	.panel {display:none; height:100%; }
	.panel:first-of-type {display:inherit}
	.panel h2 {height: var(--titleHeight); font-family: "Titillium web"; font-weight:normal; background:var(--selectedColor); color:var(--selectedFontColor); margin:0px; padding:var(--bigPadding);}
	.onglet {font-family: "Titillium web";display: inline-block; cursor:pointer; background:var(--greyColor); margin-right:1px; padding:5px 10px; font-size:150%;}
	.onglet:hover {background:var(--yellowColor)}
	.onglet.selected {background:var(--selectedColor);  color:var(--selectedFontColor)}

	/* Sous-navigation par lien */
	.navSubCat {background:var(--selectedColor); height:var(--subcatHeight); overflow:hidden}
	.navSubCat a {color:var(--selectedFontColor); padding:var(--stdPadding) var(--bigPadding); display:inline-block; text-decoration:none; border-bottom:4px solid rgba(0,0,0,0);}
	.navSubCat a:hover {border-bottom:4px solid white;}
	
	#popup {padding:20px;z-index:20;opacity:0;width:100%; max-width:600px; height:100%; position:fixed; background:#FFFFFF; top:0px; bottom:0px; margin-left: 100%;box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.3);}
	#popup_close {position:absolute; top:0px; right:0px;}
	#popup select {width:100%}
	#popup input, #popup select {width:100%; padding:10px; border-radius:5px; border:1px solid var(--greyColor)}
	#popup option {padding:5px;}
	#popup button {margin-top:6px;}
	
	.login {float:right}
	.logo {height:100%}
	button {font-family: "Titillium web"; background:var(--greyColor); border:0px; padding:4px 8px;margin-left:6px; font-size:150%; color:#FFFFFF}
	button:hover {background:var(--yellowColor)}
	button img {height:30px; background:#FFFFFF;border-radius:50%; padding:3px;vertical-align:middle; margin-right:10px;}
	#popup_close button {margin-top:0px; background:#FFAAAA; border-radius:0px 0px 0px 10px;}
	#popup_close button:hover { background:#FF3333; }
	
	.prix {display:none}
	.disclamer { text-align:center; color:rgba(0,0,0,0.5)}
	
	@media screen and (max-width: 1000px)  {
		:root {
		  --headerHeight:45px;
		  --headerSpace:5px;	
		  --bigPadding: 10px;
		  --titleHeight:44px;
		}
		button {font-size:100%}
		button img {height:20px;}
		.onglet{font-size:100%; padding:5px;}
		.groupe_panel{height:calc(100% - 40px)}
		 
	}
	@media screen and (max-width: 800px)  {
		:root {
		  --headerHeight:0px;
		  --headerSpace:0px;	
		  --bigPadding: 10px;
		  --subcatHeight: 0px;
		  --titleHeight:0px;
		}
		.header {display:none}
		.panel h2 {display:none}
		 
	}