@charset "utf-8";
body {background-color:hsla(238,100%,11%,1.00);margin:0;}
section{background-image:url("vtc_2.jpg"); background-size:100%;background-size:cover; background-repeat: no-repeat;background-attachment: fixed;}
h2 {font-size:2rem;}
h1, h2 {color:goldenrod;margin:0;}
p {color:white;}
#logo {width:10rem; padding: 0 15%;}
#route{width:350px;}
#vp{text-align: center; font-size:1.5rem; padding:2rem 0 0; background-color: hsla(0,0,0,0.5);}
header {background-color:black;}
#menu {display: flex; list-style-type: none; margin: -6% 5% 1% 30%; animation: apparition 2s linear;}
#boutonend {display:flex; list-style-type: none; }
#boutonend li {flex:1 1 auto; border: 2px groove white; border-radius:5px;margin:auto 10%;}

#menu li {flex: 1 1 auto;}
#menu li a, #menu li a:visited {
	display:block; text-align:center; 
	padding:10px 0; 
	font-family: Arial, sans-serif;
	font-size:1.1rem; font-weight:bold; 
	color:goldenrod;
	text-decoration: none }

#menu li a:hover {
	color: white; text-shadow: none;}
#menu li a:active {color:white; text-shadow: none;}

	.c1 {grid-area:c1; padding: 5% 15% 3% 35%;}
	.c2 {grid-area:c2; padding: 10% 25% 3% 5%;}
	.c3 {grid-area:c3; padding:0% 0% 0% 35%;}
	.c4 {grid-area:c4; padding:20% 30% 0% 30%;}
	.mobile {display:none;}
.vp img{width:70%;}
.head{background-color:black;}
.booknow{border:solid 2px goldenrod;}
.booknow:hover {background-color:goldenrod;}
article {background-color: hsla(0,0%,0%,0.5);}

article h1{font-size:3rem;} 
article h2{font-size: 2.2rem;}
article p{font-size:1.4rem; }
.cadre {display: flex; flex-direction: column;
		justify-content: space-between;}

footer{padding:1rem 2rem; text-align: center;color:white; background-color:hsla(0,0%,0%,0.50)}

/*Cookies*/
.rgpd{margin:0 10%; padding:2% 10% ;position:absolute;position:fixed ;background-color:darkgoldenrod;border:solid 5px black; border-radius:10px;text-align: center; animation:none;}
.rgpd button{margin:0 10%; width:150px; height:30px;animation:none; border-color:black; background-color:darkgoldenrod; border-radius:5px;}
.rgpd h2{color:black;}
.rgpd a{text-decoration:none; color:black; font-size:1rem;}
.rgpd a:hover{color:white;animation:none;}
.rgpd p, a {font-size:1.1rem;color:black;}

/*Book Now*/
form {width:100%;}
form > * { border-radius:5px;}
fieldset{border:none;}
input {display: flex; width:100%;height: 30px;border: solid 1px; border-radius:5px;border-color:black;}
#submit{width:60px;text-align: center;background-color: hsla(41,53%,37%,0.26);color:white;}
textarea{width:100%; height:150px;border: solid 1px; border-radius:5px;border-color:black;}
.contact{border: solid 5px black; border-radius:10px;position:absolute;width:70%;margin:0 15%;padding:2%;background-color:darkgoldenrod;}
.contact p{font-size:1.2rem;}
.legend {display:grid;width:90%;margin:0 5% ;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-areas: "l0 l0 l0"
								"l1 l2 ."
								"l3 l4 l5"
								"l6 . ."
								"l7 l7 l7";}
.l0{grid-area:l0;}
.l0 h1{color:black; font-size:2rem; margin:2% 0;}
.l1 {grid-area:l1;}
.l2 {grid-area:l2;}
.l3 {grid-area:l3;}
.l4 {grid-area:l4;}
.l5 {grid-area:l5;}
.l6 {grid-area:l6;}
.l7{grid-area:l7;}
.fermer { width:100%;text-align: right; }
.fermer a{text-decoration: none;border:solid 2px;padding:2px 5px;border-radius:3px;text-align: center;}
legend div{margin:5px 10px;}
#now.cacher{display:none;}

/*Responsive*/
@media only screen and (max-width:1100px) {
	#menu{margin: -6% 5% 1% 30%;}
	.book{padding:1% 8%;}}

@media only screen and (max-width:899px) {
	body { background-image: none; }
	#logo{width:8rem;padding:0 10%;}
	#menu li a, #menu li a:visited { font-size: 0.7rem}
	#menu{margin: -6% 5% 0% 30%;}
	.rgpd button{width:100px;}
	.contact{width:90%;margin:3% 3%;}
	.legend{width:100%;margin:0;}
	#submit{margin-left:1%; margin-top:2% ;}
}

@media only screen and (max-width:599px) {
	.mobile {display: block; }
	#menu { display: block; height: 0; }
	#menu.afficher { height:210px; }
	
	#menu { transition: height 1s; overflow: hidden;
		border-bottom: none; background: none;margin:0;padding:0;}
	#menu li {background:linear-gradient(black, darkgoldenrod);
		border-bottom: solid 1px black;}
	#menu li a, #menu li a:visited {
		font-size:1.1rem; line-height:30px; 
		text-align: center;}
	#boutonmenu { display: block; border:solid 2px goldenrod;border-radius: 10px;
	 text-align:center; width:35px;height:40px; margin-left: 5%;
	font: bold 1.5rem/2.5rem Arial, sans-serif; 
	color: white; text-decoration:none; }
	section{background-image:none;}
	.head{text-align: center;}
	.vp h1{font-size:2rem;}
	.vp p{font-size:1.1rem;}
	.rgpd p{font-size:0.9rem;}
	.rgpd h2{font-size: 1.3rem;}
	.rgpd a{font-size:0.9rem;}
	.rgpd button{margin: 2% 0; padding:0; width:80px;}
	
	/*Book now*/
	.contact{display:block;width:80%;margin:0 10%;}
	fieldset{width:90%;margin:0;padding:0 0;}
	form{width:100%;}
	.legend {display:block; width:100%;}
	input{width:100%;}
	.l0 h1{font-size:1.5rem;}
	textarea{width:100%; height:100px;}
}
/* CSS Document */