@charset "UTF-8";
/* ====== Général ========== */
.menu-toggle {display: none;}

	@media only screen and (min-width: 48em){
		/* ====== effet menu ======== */	
		.underlined-wrapper {padding: 21px 20px 19px;display: inline-block;background-color: rgba(0,0,0,0.5);}
		.underlined {position: relative;text-decoration: none;display:inline-block;}
		.underlined:hover {}
		.underlined:before {content: "";position: absolute;width: 100%;height: 2px;bottom: 0;left: 0;background-color: #fff;visibility: hidden;
			-webkit-transition: all 0.3s ease-in-out 0s;
			-moz-transition: all 0.3s ease-in-out 0s;
			-o-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;
			-webkit-transform: scaleX(0);
			-moz-transform: scaleX(0);
			-o-transform: scaleX(0);
			transform: scaleX(0);}
		.underlined:hover:before {visibility: visible;
			-webkit-transform: scaleX(1);
			-moz-transform: scaleX(1);
			-o-transform: scaleX(1);
			transform: scaleX(1);}
	  
		/* ===== MENU ======*/
		.top-bar label {display:none;}
		.menu{width:100%;margin: 0 auto 0 auto;max-width:82.5em;}
		nav {box-shadow: 0 5px 10px rgba(0,0,0,0.3);
			display: block;  
			width: 100%;
			position: absolute;
			z-index: 5;
			background: #422505;
		}
		
		.menu a{font-size:1.8rem;font-weight:400;}
		.menu a:focus{  outline: 1px dotted #fff;}/*	navigation clavier	*/
		
		nav ul ul {display: none;}
		nav ul li:hover > ul {display: block;}
		nav ul {
			list-style: none;
			position: relative;
			display: inline-table;
			padding: 0;
			/*border-bottom: solid 1px #899097;*/
		}
		nav ul:after {content: ""; clear: both; display: block;}
		nav ul li {float: left;}
		nav ul li:hover {texte-decoration:none;/*background: rgba(106, 106, 106, 0.3);*/
			-webkit-transition: all 0.3s ease-in-out 0s;
			-moz-transition: all 0.3s ease-in-out 0s;
			-o-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;}
		nav ul li:hover a {color: #fff;texte-decoration:none;}
		nav ul li a {
			display: block; padding: 25px 25px;
			color: #fff; text-decoration: none;
		}
		nav ul ul {
			background: #422505; padding: 0;
			position: absolute; top: 100%;
			z-index: 100;
		}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #6A6A6A;
		}
		nav ul ul li :hover{
			background: #6a3c0a;
		}
		nav ul ul li a {
			padding: 15px 25px;
			color: #899097;
		}	
		nav ul ul li a:hover {
			background: #rgba(60, 68, 81, 0.3);
			color: #fff;texte-decoration:none;
		}	
		nav ul ul ul {position: absolute; left: 100%; top:0;}
	}

	@media only screen and (max-width: 960px){
			nav ul li a {padding: 25px 20px;}
	}

/*================================
	MEDIA-QUERIES
=================================*/
	@media only screen and (max-width: 48em){
		label {margin-top:0rem;}/* empeche la marge blanche au dessous du menu due à knacss*/
		label {margin-bottom:0rem;}/
		.menu a{font-size:1.0rem;}
		nav ul li a {padding: 10px 20px;font-size:1.1rem;}
		nav {
		  position: fixed;
		  top: 0;
		  left: 0;
		  height: 100%;
		  background: #252525;
		  z-index: 0;
		  width: 250px;
		}
		nav ul {
		  list-style: none;
		  margin: 0;
		  padding: 0;
		}
		#content {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  -webkit-transition: -webkit-transform 0.4s linear;
		  -moz-transition: -moz-transform 0.4s linear;
		  -o-transition: -o-transform 0.4s linear;
		  -ms-transition: -ms-transform 0.4s linear;
		  transition: transform 0.4s linear;
		}
		.top-bar {
		  position: top;/*absolute*/
		  width: 100%;
		  z-index: 5;
		}
		.top-bar label {
		  display: block;
		  width: 100%;
		  position: inherit;
		  padding: 10px 20px;
		  color: #fff;
		  background: #6a3c0a;
		  font-size: 1.6em;
		  text-align: left;
		}
		.top-bar label span{
			font-size: 0.9em;
			display: block;
			position:absolute;
			top: 10px; left: 50px;
		}
		#menu-toggle:checked ~ #content {
		  -webkit-backface-visibility: hidden;
		  -webkit-perspective: 1000;
		  -webkit-transform: translate3d(250px,0,0);
		  -moz-transform: translate3d(250px,0,0);
		  -ms-transform: translate3d(250px,0,0);
		  -o-transform: translate3d(250px,0,0);
		  transform: translate3d(250px,0,0);
		}
		#menu-toggle ~ #content {
		  -webkit-transform: translate3d(0,0,0);
		  -moz-transform: translate3d(0,0,0);
		  -ms-transform: translate3d(0,0,0);
		  -o-transform: translate3d(0,0,0);
		  transform: translate3d(0,0,0);
		}
				
		nav li a {
		  color: #fff;
		  display: block;
		  padding: 0 5px 0 25px;
		  text-decoration: none;
		  line-height: 2.6em;
		  overflow: hidden;
		  border-bottom: 1px solid #2d333d;
		}
		nav ul li {
		  border-top: 1px solid #3c4451;
		}
		
		nav ul li a {
			display: block; padding: 5px 15px;
			color: #fff; text-decoration: none;
		}
		
		nav ul li:hover a, nav ul li:visited a{
		  color:#CCCCCC;
		}

		/* sous-menu */
		nav ul ul {display: none;}
		nav ul li:hover > ul {display: block;}
		
		nav ul ul li {word-wrap:break-word
			float: none; 
			border-top: 1px dotted #6A6A6A;
		}
		nav ul ul li a {
			/* text-align:center; */
			padding: 6px 35px;line-height:1.5;font-size:1.1rem;
			color: #fff;
		}
		
		nav ul ul li a:hover {		
			color: #fff;background:#;;
		}
	}