@charset "utf-8";
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

body							{ margin: 0; padding: 0; font-size: 14px; font-family: Questrial,'Century Gothic', Verdana; line-height: 22px  }

header 							{ background-color: #828887; color: #FFF; font-family: 'barlow condensed'; font-weight: 400; text-transform: uppercase; letter-spacing: 2px }
header a 						{ color: #CCC }
header a:hover					{ color: #FFF }
header .curseur:hover			{ color: #FFF }
header .choix					{ color: #FFF }
header .entete 					{ width: 1200px; margin: auto }
header .entete nav 				{ display: flex; justify-content: space-between; -webkit-box-align: end; align-items: center }
nav .nav-left 					{ display: flex; -webkit-box-align: end; align-items: center; flex: 0 0 33%; text-align: right; text-transform: none; font-size: 18px }
nav .nav-left a 				{ padding: 0 10px }
nav .nav-logo 					{ flex: 0 0 34%; text-align: center }
nav .nav-logo img				{ width: 200px; height: auto; padding: 5px 0 }
nav .nav-logo .menu				{ display: none; visibility: hidden }
nav .nav-right 					{ display: flex; justify-content: center; flex: 0 0 33%; padding-top: 6px }
nav .nav-right a 				{ padding: 0 15px }
#nav_mobi 						{ display: none; visibility: hidden }

@media (max-width: 1200px){ 
header .entete 					{ width: 100% }
}

@media (max-width: 992px){ 
header .entete nav 				{ display: block }
nav .nav-left, nav .nav-right 	{ display: none; visibility: hidden }
nav .nav-logo 					{ display: flex; align-items: center; flex: none }
nav .nav-logo img				{ margin-left: 10% }	
nav .nav-logo .menu				{ display: block; visibility: visible; margin: 2% 3% 0 0; cursor: pointer }
nav .nav-logo .menu i			{ font-weight: 600; color: #DEDEDE; font-size: 30px }
nav .nav-logo .menu i.fas		{ display: block }
nav .nav-logo .menu span		{ display: block; margin-top: -8px; font-size: 11px; letter-spacing: 3px }
nav .nav-logo a					{ display: block; margin: auto }	
	
#nav_mobi 						{ display: block; visibility: visible; height: 100%; width: 0; position: fixed; z-index: 20; top: 0; left: 0; background-color: #6E7473; overflow-x: hidden; transition: 0.5s; padding-bottom: 20px }
#nav_mobi ul 					{ list-style: none; margin: 0; padding: 0; text-align: center }
.sidenav .close	a				{ display: block; text-align: right; font-size: 60px; background-color: #6E7473; color: #FFF; padding: 15px 15px 0 0; font-weight: 700  }
.sidenav .close	a:hover			{ background-color: #6E7473 }
.sidenav i						{ color: #FFF }
.sidenav:hover i				{ color: #FFF }
.sidenav .logo					{ background-color: #6E7473; text-align: center; padding: 5% 0 10% }
.sidenav .logo img				{ width: 150px; height: auto }
/** top level items */
.sidenav a, .sidenav label 		{ display: block; width: 100%; font-size: 16px; letter-spacing: 2px; background: #6E7473; color: #FFF; text-transform:uppercase; -webkit-transition: all .25s ease-in; transition: all .25s ease-in }
.sidenav label 					{ cursor: pointer; box-shadow: inset 0 -1px #464A49 }
.sidenav a 						{ padding: .85rem }
.sidenav a:focus, .sidenav a:hover, .sidenav label:focus, .sidenav label:hover, .sidenav label:hover a { background-color: #464A49; color: #FFF }
}

@media (max-width: 600px){ 
nav .nav-logo a					{ margin: 5px auto }	
nav .nav-logo img				{ width: 180px; display: block }	
}

#page 							{ width: 100%; background-color: #F0F1F2 }
.contenu 						{ width: 1200px; margin: auto; padding-bottom: 1% }
.contenu-min					{ min-height: 400px }
.rub-titre 						{ font-family: 'barlow condensed'; font-size: 1.2em; text-transform: uppercase; letter-spacing: 1px; margin: 1% 5% }
.rub-accroche 					{ font-family: 'barlow condensed'; font-size: 1.2em; letter-spacing: 1px }
.filet 							{ width: 10%; max-width: 100px; height: 1px; margin: 0 4% }
h1.rub-titre					{ font-size: 54px; text-transform: none; letter-spacing: 1px; font-weight: 400; line-height: 54px; margin: 2% 0; color: #525656 }
h1.rub-titre p					{ margin: 0; font-size: 36px; line-height: 1.2em; color: #47A5AD }
h2 								{ letter-spacing: 1px }

@media (max-width: 768px){ 
h2								{ font-size: 1.3em }	
.filet 							{ width: 10%; max-width: 50px; height: 1px; margin: 0 2% }
}
@media (max-width: 550px){ 
h2								{ font-size: 1.2em }
.filet 							{ width: 10%; max-width: 100px; height: 1px; margin: 0 1% }
}

@media (max-width: 1200px){ 
.contenu 						{ width: 100% }
}

.page-cols-2 					{ display: flex; flex-wrap: wrap; box-shadow: 0 4px 8px rgba(0,0,0,.1); margin-top: 20px }
.page-cols-2 .page-col-txt		{ display: flex; width: 50%; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center;  padding: 3% }
.page-cols-2 .page-col-img		{ display: flex; width: 50%; background-position: center center; background-repeat: no-repeat;
 background-size: cover }
.page-cols-2 .page-col-login	{ background-image: url(/photos/login.jpg) }

@media (max-width: 550px){ 				
.page-cols-2 					{ display: block }
.page-cols-2 .page-col-txt		{ display: block; width: 90%; margin: auto }
.page-cols-2 .page-col-img		{ display: block; visibility: hidden }
}

.cols2 							{ display: table; width: 100%; padding: 10px }
.col2 							{ display: table-cell; width: 50% }
.cols2img img 					{ width: 100%; height: auto }

@media (max-width: 600px){ 				
.cols2img .col2 				{ display: block; width: 100% }
}

#jssor_fade						{ position: relative; margin: 0 auto; top: 0px; left: 0px; overflow: hidden; visibility: hidden }
#jssor_fade .jssor_slides		{ cursor: default; position: relative; top: 0px; left: 0px; overflow: hidden }
.home #jssor_fade				{ width: 2400px; height: 1000px }
.home #jssor_fade .jssor_slides	{ width: 2400px; height: 1000px }
.restaurant #jssor_fade, .plage #jssor_fade			{ width: 2400px; height: 750px }
.restaurant #jssor_fade .jssor_slides, .plage #jssor_fade .jssor_slides	{ width: 2400px; height: 750px }
.jssor_load						{ position: absolute; top: 0px; left: 0px; background-color: #838988 }

@media (max-width: 860px){ 	
.home #jssor_fade					{ width: 860px; height: 600px } 	/* on augmente la hauteur */
.home #jssor_fade .jssor_slides		{ width: 1440px; height: 600px } 	/* rapport exact avec la hauteur choisie */
.restaurant #jssor_fade, .plage #jssor_fade				{ width: 860px; height: 500px } 	
.restaurant #jssor_fade .jssor_slides, .plage #jssor_fade .jssor_slides	{ width: 1600px; height: 500px } 
}

.hp-accroche-overlay 			{ position: absolute; top: 0; left: 0; right: 0; height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: 40vh; z-index: 10; pointer-events: none }
.hp-accroche-content 			{ text-align: center; background: rgba(0, 5, 8, 0.4); color: #FFF; max-width: 1000px; padding: 0 20px; transform: translateY(-50%); pointer-events: auto }
.hp-accroche-content h1 		{ margin: 0; line-height: 1.2 }
.hp-accroche-title 				{ font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.0rem, 5vw, 5rem); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.3rem; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7) }
.hp-accroche-subtitle 			{ color: #47A5AD; font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 400; font-style: italic; opacity: 0.95; margin-top: 0.3rem; letter-spacing: 1px; text-shadow: 1px 1px 1px white, 0 0 1em rgb(181, 221, 225) }
		
@media (max-width: 650px) {
.hp-accroche-overlay 			{ display: none }
.home h1 						{ width: 80%; max-width: 700px; margin: 2% auto; font-size: 35px; line-height: 45px; text-align: center }
.home h1 p 						{ font-size: 26px }
}

.restaurant 					{ text-align: center }
.restaurant h1 					{ width: 80%; max-width: 700px; margin: 2% auto }
.restaurant p 					{ font-size: 1.1em }
.restaurant .gallery  			{ width: 95%; max-width: 1500px; margin: auto; padding-bottom: 2% } 
.restaurant .gallery a 			{ display: inline-block; margin: 0.6% 1%; overflow: hidden } 
.restaurant .gallery a img		{ display: block; width: 400px; height: auto; border-radius: 5px }

@media (max-width: 930px){
.restaurant .gallery a 			{ width: 48% }
}
@media (max-width: 735px){
.restaurant h1 					{ width: 90%; font-size: 45px }
.restaurant h1 p 				{ font-size: 30px }
.restaurant .gallery a 			{ width: 90%; max-width: 350px; margin: 0.6% auto; text-align: center }
.restaurant .gallery a img		{ display: inherit; width: 100% }
}

.plage 							{ text-align: center }
.plage h1 						{ width: 80%; max-width: 700px; margin: 2% auto }
.plage p 						{ font-size: 1.2em }

@media (max-width: 600px){
.plage h1 						{ font-size: 45px }
.plage h1 p 					{ font-size: 30px }
}

.privatisation 					{ display: inline-flex }
.privatisation .privat-photo	{ width: 40%; background-color: #D4D7DA }
.privatisation .privat-photo img{ margin: 10% 0 3% 30%; width: 90%; height: auto }
.privatisation .privat-txt		{ width: 58%; padding: 3% 5% 3% 10% }
.privatisation .privat-txt h1	{ font-size: 36px; text-transform: none; letter-spacing: 1px; font-weight: 400; line-height: 40px; margin: 2% 0; color: #47A5AD }
.privatisation .privat-txt h1 p	{ margin: 0; font-family: 'barlow condensed'; font-size: 24px; line-height: 24px; color: #282828 }
.privatisation .privat-txt p	{ font-size: 1.1em; text-transform: none; letter-spacing: 1px; font-weight: normal }
.privatisation .privat-txt h3	{ margin-top: 5% }
.privatisation .privat-more 	{ width: 250px; margin: 5%; border: 1px solid #47A5AD; font-family: 'barlow condensed'; text-transform: uppercase; letter-spacing: 2px; text-align: center }
.privatisation .privat-more i	{ display: inline-block; font-size: 20px; vertical-align: bottom }
.privatisation .privat-more a	{ display: block; color: #47A5AD; padding: 15px }
.privatisation .privat-more:hover { margin: 5% 8%; transition: 0.5s }
.privatisation .privat-more:hover a	{ background-color: #47A5AD; color: #252429 }

@media (max-width: 900px){ 	
.privatisation .privat-txt		{ width: 58%; padding: 3% 2% 3% 10% }
}

@media (max-width: 750px){ 
.privatisation 					{ display: block }
.privatisation .privat-photo img	{ margin: 20% 0 20% 30%; width: 350px; height: auto }
.privatisation .privat-txt		{ clear: left; width: 100%; padding: 3% 5% 3% 10% }
}

.location .infos				{ display: block; width: 100%; padding-top: 2%; line-height: 1.5em }
.location .infos .infosdetail	{ display: inline-block; width: 25%; vertical-align: top; box-shadow: 2px 4px 12px 5px rgba(0,0,0,.2); margin-left: 6%; padding: 0 2% 2%; font-size: 14px; color: #666; text-align: center  }
.location .infos .infosdetail h5{ border-bottom: 1px solid #CCC; padding-bottom: 5px; margin: 20px 0 5px; font-size: 16px; letter-spacing: 1px  }
.location .infos .infosdetail img.icone { margin-top: -20px }
.location .infos .infostexte	{ display: inline-block; width: 35%; vertical-align: top; padding: 0 3% 2% 3%; font-size: 14px; text-align: justify }
.location .infos .infostexte h3	{ text-align: left; font-size: 16px }
.location .infos .photo			{ display: inline-block; width: 33%; height: auto; vertical-align: middle; text-align: center; overflow: hidden }
.location .infos img			{ width: 90%; max-width: 450px; height: auto; border-radius: 10px }

@media (max-width: 850px){
.location .infos				{ width: 90%; margin: auto }
.location .infos .infosdetail	{ display: block; width: 90%; margin: 5% auto; font-size: 16px  }
.location .infos .infostexte	{ display: block; width: 100%  }
.location .infos .photo			{ display: block; width: 100%  }
}

.presentation 			 				{ display: flex!important; flex-wrap: wrap; background-color: #E2E4E6; padding: 3% }
.presentation .presentation-img 		{ width: 40%; position: relative; text-align: center }
.presentation .presentation-img img		{ width: 100%; max-width: 500px; height: auto }
.presentation .presentation-txt 		{ width: 60%; position: relative; padding: 2% 4% }
.presentation .presentation-txt h1		{ font-size: 40px; letter-spacing: 2px; color: #828887 }
.presentation .presentation-txt h1:hover i { margin-left: 10px; transition: 0.5s }
.presentation .presentation-txt .infosdetail	{ display: block; width: 80%  }
.presentation .presentation-txt .cadre	{ background-color: #47A5AD; border: 0; padding: 10px; font-size: 1.1em; font-weight: bold; letter-spacing: 2px }
@media (max-width: 930px){ 		
.presentation .presentation-img 		{ width: 25% }
.presentation .presentation-txt 		{ width: 75% }
.presentation .presentation-txt .infosdetail	{ width: 90%  }
}
@media (max-width: 600px){ 				
.presentation 			 				{ display: none }
.presentation .presentation-img, .presentation .presentation-txt 		{ flex: none; max-width: none; width: 100% }
.presentation .presentation-txt h1		{ font-size: 30px }
}
@media (max-width: 400px){ 
.presentation .presentation-txt h1		{ font-size: 24px }
}

.contact .contactform			{ display: inline-block; vertical-align:top; width: 70%; padding: 3%; font-size: 13px }
.contact .contactform .message	{ margin-top: 10% }
.contact .contactform .col2		{ display: inline-block; width: 49% }
.contactform input, .contactform textarea, .contactform select { position: relative; border: 1px solid #CCC; font-family: Questrial, Century Gothic, Verdana, Arial, sans-serif; color: #333; font-size: 15px; line-height: 20px; letter-spacing: 1px; padding: 8px 16px; margin: 0; resize: none;}
.contactform  input 			{ display: inline; width: 100% }
.contactform  textarea			{ width: 100% }
.contactform  label				{ display: block; text-transform:uppercase;	margin: 13px 0 2px 0; letter-spacing: 2px; font-size: 12px; width: 100% }
.contactform input[type="submit"] {	width: 100%; height: 40px; background-color: #828887; color:#FFF; border: none; cursor: pointer; text-align: center;	vertical-align: middle;	font-size: 15px; letter-spacing: 5px;  text-transform:uppercase	}
.contactform input[type="submit"]:hover		{	background-color: #6E7473	}	
.contactform .g-recaptcha		{ margin: 2% 0; width: 100% }	

.contact .contactinfos			{ display: inline-block; vertical-align:top; width: 28%; text-align: center; line-height: 20px; margin: 3% 0 2%; font-weight: 400 }
.contact .contactinfo			{ padding: 10px; background-color: #E0E1E2 }
.contact .contactinfo .nom		{ font-size: 1.5em }
.contact .contactinfo .ville	{ text-transform: uppercase; letter-spacing: 7px; margin-top: 0 }
.contact .contactinfo a			{ font-weight: 400 }
.contact .contactinfo a:hover	{ font-style: italic }
.contact .contactinfo .tel		{ font-size: 18px; letter-spacing: 3px; margin-top: 5% }
.contact .contactinfo .mail		{ font-size: 14px; letter-spacing: 2px; margin-top: 5%; padding: 2% 0 }

@media (max-width: 900px){
.contact .contactinfos			{ width: 35%;  }
.contact .contactform, .contact .contactinfos			{  display: block; width: 90%; margin: auto }
}
@media (max-width: 1200px){
.contact section .container		{ width: 100%; padding: 0 }
}
@media (max-width: 768px){
.contact .contactform	.col2	{ display: block; width: 100% }
.contactform input[type="submit"] {	margin-top: 15px	}
}

.map		 					{ display: block; width: 100%; text-align: center; padding: 1% 0 }
.map .carte 					{ background-color: #EEE; margin-bottom: 30px }
.map iframe 					{ width: 100% !important; height: 400px!important; padding: 0; margin: 0 }
.map h2	 						{ margin-bottom: 0 }
.map h2	.minus					{ font-size: 13px; font-weight: normal }
.map h3	 						{ margin: 0 0 2%; font-weight: 400 }


.legal .infos					{ display: block; width: 100%; line-height: 1.5em }
.legal .infos h1				{ font-size: 1.7em }
.legal .infos h2				{ font-size: 1.3em  }
.legal .infos .infosdetail		{ display: inline-block; width: 25%; vertical-align: top; border: 1px solid #666; margin-left: 6%; padding: 0 2% 2%; font-size: 14px; color: #666; text-align: right  }
.legal .infos .infosdetail h2	{ margin-bottom: 3px  }
.legal .infos .infosdetail i	{ text-transform: uppercase; font-size: 11px; letter-spacing: 2px  }
.legal .infos .infosdetail img	{ display: block; width: 100%; max-width: 350px; height: auto; margin: 5% auto  }
.legal .infos .infostexte		{ display: inline-block; width: 55%; vertical-align: top; padding: 0 3% 2% 3%; font-size: 14px; text-align: justify }
.legal .infos .infostexte h3	{ text-align: left; font-size: 1.2em }
.legal .infos .photo			{ display: inline-block; width: 13%; height: auto; vertical-align: middle; text-align: center; overflow: hidden }
.legal .infos .photo img		{ width: 90%; max-width: 130px; height: auto; margin-top: 10%  }

@media (max-width: 850px){
.legal .infos .infosdetail		{ width: 35%  }
.legal .infos .infostexte		{ width: 58% }
.legal .infos .photo			{ display: none; visibility: hidden }
}

@media (max-width: 600px){
.legal .infos .infosdetail		{ display: block; width: 90%; margin: 5% auto; font-size: 16px  }
.legal .infos .infostexte		{ display: block; width: 100%; padding: 5%  }
}

.legal-reglement 				{ text-align: justify; font-size: 11px; line-height: 1.1em }

.rgpd							{ padding: 2% 5% }
.rgpd .blocsubdiv 				{ background-color: #627788; padding: 1%; color: #FFF; text-transform: uppercase; letter-spacing: 4px; text-align: center; font-size: 15px }
.rgpd .blocsubdiv p				{ text-transform: none; font-size: 13px; letter-spacing: normal; color: #FFF!important }
.rgpd .rgpd-intro				{ padding: 0 10%; text-align: justify; font-size: 15px }
.rgpd .rgpd-logo 	 			{ text-align: center }
.rgpd .rgpd-logo img 			{ width: 100px; height: auto }
.rgpd .rgpd-txt 				{ width: 80%; margin: 1% auto }
.rgpd .rgpd-blocs				{ font-size: 15px; text-align: center; margin-top: 2% }
.rgpd .rgpd-bloc				{ display: inline-block; width: 31%; min-height: 420px; box-sizing: border-box; border: 1px solid #627788; text-align: justify; padding: 2% 2% 1% 2%; margin: 1%; vertical-align:top; line-height: 1.3em }
.rgpd h2 						{ font-size: 1.3em; color: #22384D; text-align: center; line-height: 1.3em; font-weight: 500; text-transform: none; letter-spacing: 1px }
.rgpd .rgpd-icone 	 			{ text-align: center }
.rgpd .rgpd-icone img 			{ width: 48px; height: auto }

@media (max-width: 992px){
.rgpd form 				{ width: 90% }
}

@media (max-width: 768px){
.rgpd .rgpd-bloc				{ display: inline-block; width: 45% }
.rgpd .rgpd-intro		{ padding: 0 2% }
}
@media (max-width: 580px){
.rgpd form, .rgpd .rgpd-legal { display: block; width: 90%; margin: auto }
.rgpd .rgpd-intro		{ font-size: 14px }
.rgpd form input 		{ font-size: 13px; letter-spacing: 2px }
.rgpd .rgpd-bloc 		{ display: block; width: 90%; margin: auto; min-height: inherit; margin-bottom: 2% }
.rgpd form 				{ width: 100% }
}

.rgpd-legal				{ margin-top: 5%; font-size: 12px; line-height: 1.1em; text-align: justify }

footer 							{ background-color: #6E7473; font-family: 'barlow condensed'; font-size: 17px; color: #DDD }/*8C8985*/
footer .pied-cols				{ display: flex; flex-wrap: wrap }
footer .pied-cols img			{ width: 110px; height: auto; margin: auto }
footer .pied-col				{ -webkit-box-flex: 0; flex: 0 0 33%; max-width: 33%; position: relative; padding: 0 2%; text-align: center }
footer .pied-col ul				{ list-style: none; padding-left: 0 }
footer .pied-col h2				{ font-size: 26px; margin: 10px 0; color: #FFF; letter-spacing: 1px; font-weight: 400 }
footer .pied-col h3				{ font-size: 20px; margin: 20px 0; color: #FFF; letter-spacing: 1px; font-weight: 400; line-height: 30px }
footer .pied-col h3:first-child	{ margin: 10px 0 }
footer .pied-col h3:hover a		{ color: #FFF; margin-left: 10px; transition: 0.5s }
footer .pied-col h4				{ font-size: 16px; margin: 10px 0; color: #FFF; letter-spacing: 1px; font-weight: 400 }
footer .pied-col a				{ color: #DDD }
footer .pied-col ul li			{ margin-top: 8px }
footer .pied-col ul li a		{ color: #DDD }
footer .pied-col ul li:hover a	{ color: #FFF; margin-left: 10px; transition: 0.5s }
footer .pied-rs					{ background-color: #818887; padding: 2% 2% 2%; margin-bottom: 2%; font-size: 24px; text-align: center }
footer .pied-rs	a				{ margin: 0 10px; color: #DDD }
footer .pied-rs	a:hover i 		{ color: #FFF; margin-left: 10px; transition: 0.5s }
footer .pied-rs	i 				{ vertical-align: middle; font-size: 40px }
footer .legal 					{ text-align: center; border-top: 1px solid #FFF; padding: 15px }

@media (max-width: 768px){
footer 							{ font-size: 18px }
footer .pied-cols				{ display: block }
footer .pied-col				{ flex: none; max-width: none; width: 50%; min-width: 300px; margin: auto; padding: 2% }
footer .pied-col h3				{ font-size: 24px }
}