@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; margin:0;}
h1, h2 {color:goldenrod;}
p {color:white;}
#logo {width:10rem; padding: 0 15%;}
#artist{width:100%;}
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%;}
#booknow {text-decoration: none; font-size: 1.5rem; background-color: black; color:white ;padding:0.5rem;}
#parlonsen{background-color:black; text-decoration: none; margin-left:2%;padding:10px; border:solid 2px darkgoldenrod; }
#parlonsen a{color:darkgoldenrod; text-decoration: none; font-size:1.5rem;font-family:"Hoefler Text";}
#parlonsen a:hover {color:white;}
#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;}

	.s1 {grid-area:s1;padding:0 3%; background-color: hsla(0,0%,0%,0.5)}
	.s2 {grid-area:s2;padding:0 10%; background-color: hsla(0,0%,0%,0.5)}
	.s3 {grid-area:s3;padding:0 10%; background-color: hsla(0,0%,0%,0.5)}
	.s4 {grid-area:s4;padding:0 10%; background-color: hsla(0,0%,0%,0.5)}
	.s5 {grid-area:s5;padding:0 10%; background-color: hsla(0,0%,0%,0.5)}
	.s6 {grid-area:s6;padding:0 10%; background-color: hsla(0,0%,0%,0.5)}
	.s7 {grid-area:s7;background-color:goldenrod; padding:0 3% 0.5rem 3%;background-color: hsla(0,0%,0%,0.5);}
	.s8 {grid-area: s8;}
	.head{background-color: black;}
	.mobile {display:none;}
.head{background-color: black;}
.booknow{border:solid 2px goldenrod;}
.booknow:hover {background-color:goldenrod;}

section {display:grid; background-color: hsla(0,0%,0%,0.5);
	grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: 
					"s1 s1 s1" 
					"s2 s3 s4"
					"s5 s5 s6"
					"s7 s7 s7"
					"s8 s8 s8";}
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%;}
	#artist{margin:0;width:100%}
	.book{padding:1% 8%;}}
@media only screen and (max-width : 899px ){
	body { background-image: none;background-color:black;}
	.s1 p{font-size:1.2rem;}
	.s2 p{font-size:1.2rem;}
	.s2 h2{font-size:1.4rem;}
	.s3 p{font-size:1.2rem;}
	.s3 h2{font-size:1.4rem;}
	.s4 p{font-size:1.2rem;}
	.s4 h2{font-size:1.4rem;}
	.s5 p{font-size:1.2rem;}
	.s4 p{font-size:1.2rem;}
	.rgpd button {width:100px;}
	#logo{width:8rem;padding:0 10%;}
	#menu li a, #menu li a:visited { font-size: 0.7rem; }
	#artist{width:100%;}
	
@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;display:block;}
	.head{text-align: center;}
	.base img{width:100%;}
	.base p{font-size:1rem;}
	.c2 p{font-size:1rem;}
	.s1 h1{font-size:2rem;}
	.s5 h2{font-size:1.8rem;}
	p {text-align: center;}
	h2{font-size:1.2rem;}
	#artist {width:80%;}
	.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;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 */