/*@charset "utf-8";*/
/* CSS Document */
html, body {
	margin:0;
	padding:0;
	background: url(../img/bg_tarifs.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
	font-family: 'Open Sans', 'Lato', sans-serif;
	font-size: 20px;
}

.tarifs, .footer_contact, .footer_sitemap, .conception {
	padding: 20px;
}
/********************************* Mise en page grid *********************************/
.container {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 140px repeat(4, auto);
	grid-template-areas: 	"head1 head1 head1 head2 head2 head2"
							"tarifs tarifs tarifs tarifs tarifs tarifs"
							"footer1 footer1 footer2 footer2 footer3 footer3"
							"conception conception conception conception conception conception";
}

/********************************* Header | Logo & Menu *********************************/
.entete {
	grid-area: head1;
	background-color: #f2f1ec;
	text-align: center;/*
	height: 150px;*/
}

.entete a,.entete a:active, .entete a:hover, .entete a:focus {
	text-decoration: none;
	color: black;
}

.entete h1 a, .entete h1 a:active, .entete h1 a:focus, .entete h1 a:visited {
	color: #a68949;
	/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	/*text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);/* ombre portée */
	/*text-shadow: 1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);/* estampage 
	text-shadow: 1px 2px 3px rgba(0,0,0, 0.5),1px 2px 0 rgba(0,0,0,0.4),-1px -2px 0 rgba(255,255,255,1);*/
}

.entete h1 a:hover {
	color: #967C42; 
	transition:background-color .2s ease;
}

.entete h2 {
	color: #a68949;
	font-size: 0.8em;
	font-style: italic;
	margin-top: -30px;
}

.menu {
	grid-area: head2;
	background-color: #f2f1ec;
	display: flex;/*
	height: 150px;*/
	color: black;
}

.menu ul {
	position:relative;
	height: 2em;
	margin: 30px 100px;
	padding: 0;
	white-space: nowrap;
}
.menu ul li {
	display:inline;
	text-align:center;
	padding: 50px 0 20px 0;
}

.menu ul li:nth-child(1) a{width:4em;}
.menu ul li:nth-child(2) a{width:4em;}
.menu ul li:nth-child(3) a{width:4em;}
.menu ul li:nth-child(4) a{width:4em;}
.menu ul li:nth-child(5) a{width:4em;}

.menu ul li a {
	display:inline-block;
	box-sizing:border-box;
	padding:.4em .2em;
	color:black;
	text-decoration:none;/*
	text-shadow:0 1px 0 white;
	background-color:transparent;*/
	transition:background-color .3s ease;
}
.menu ul li a:hover,ul li a:focus {
     color:#2a2929;/*
     background-color:rgba(255,255,255,.4);*/
     transition:background-color .3s ease .4s;
}
.menu ul li a:focus{
     border-bottom:3px solid #2a2929;
}
.menu ul li:last-child::after{
     content:"";
     position:absolute;
     left:0px;
     bottom:-3px;
     display:block;
     width:2em;
     height:3px;
     background:#ccc;
     border-bottom:1px solid rgba(255,255,255,.8);
     transition: all .5s ease;
}
.menu ul li:hover ~ li:last-child::after,
.menu ul li:last-child:hover::after{background:#a68949;}/*#2a2929*/

.menu ul li:nth-child(1):hover ~ li:last-child::after{left:0;width:4em;}
.menu ul li:nth-child(2):hover ~ li:last-child::after{left:4em;width:4em;}
.menu ul li:nth-child(3):hover ~ li:last-child::after{left:8em;width:4em;}
.menu ul li:nth-child(4):hover ~ li:last-child::after{left:12em;width:4em;}
.menu ul li:last-child:hover::after{left:16em;width:4em;}

/********************************* Tarifs *********************************/
.tarifs {
	grid-area: tarifs;/*
	color: #fff;
	margin:0;
	padding:0;
	font-family: 'Open Sans', 'Lato', sans-serif;
	font-size: 20px;*/
}

.tableau_tarifs {
	background-color: rgba(52,62,64,0.7);/*#343e40;*//*#2a2929*/
	/*margin: 20px 40px 20px 40px;*/
	border-radius: 5px;
	padding: 10px 50px 10px 50px;
	margin: 0 20% 0 20%;
	min-height: 600px;
}

p, ul, li, ol {
	color:#F6F2EA;
}

ul, li, ol {
	text-decoration: none;
	list-style: none;
}

ol {
	float: right;
}
a.reservation {
	color: #fff;
	text-decoration: none;
	font-style: italic;/*
	margin: 30px 0px 30px 0px;*/
	padding: 15px 30px 15px 30px;/*3px 10px 3px 10px*/
	margin-top: 50px;
	margin-right: 50px;
	margin-bottom: 30px;
	background-color: #a68949;/*
	outline-style: solid;
	outline-color: #2a2929;
	outline-width: 1px;*/
	border: double #f7f7f5; /*#2a2929*/
	border-radius: 0;
	float: right;
	transition:background-color .3s ease;
}

a.reservation:hover {
	color: #a68949;
	background-color: #f7f7f5;
	border: double #a68949; /*#2a2929*/
	transition:background-color .2s ease;
}