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

body							{ margin: 0; padding: 0; font-family: EloquentJFRegularPro  }/*F9F7F4*/

header 							{ font-family: 'barlow condensed'; font-weight: 400; text-transform: uppercase; color: #333; font-size: 13px }
header i.fab					{ font-size: 30px }
header .entete 					{ width: 1200px; margin: auto }
header .entete nav 				{ display: flex; justify-content: space-between; -webkit-box-align: end; align-items: center; padding: 2% }
/*nav .nav-home 					{ margin: 5% 0; text-align: center }
nav .nav-home a 				{  }
nav .nav-home a:hover			{ border-bottom: 1px solid #BDC3C1 }*/
nav .choix						{ color: #283A48; font-weight: 600 }
nav .nav-logo 					{ text-align: center }
nav .nav-logo a					{ margin: -35px 0 5px }
nav .nav-logo img				{ width: auto; height: 180px }
nav .nav-rub					{ display: flex; align-items: center; justify-content: space-between }
nav .nav-rub span  				{ text-align: center; margin: 0 15px; letter-spacing: 2px }
nav .nav-rub span a 			{ color: #57696D }
nav .nav-rub span a:after 		{ content: ""; background: #BDC3C1; display: block; margin-top: 8px; width: 0; height: 1px; transition: width .3s ease-in }
nav .nav-rub span:hover a:after { width: 100% }
nav .nav-rub span:hover a 		{ color: #24352F }/*8A333B B3250B BD0000 */

nav .nav-titre 					{ text-align: right }
nav .nav-titre h3				{ font-family: EloquentJFRegularPro; font-size: 50px; font-weight: 300; color: #57696D; margin: 0; text-transform: none; margin-bottom: 15px }
nav .nav-titre img				{ position: absolute; width: 80px; height: auto; margin-top: -30px; margin-left: -40px }
nav .nav-logo .menu				{ display: none; visibility: hidden }
#nav_mobi 						{ display: none; visibility: hidden }

@media (max-width: 1200px){ 
header .entete 					{ width: 100% }
nav .nav-rub, nav .nav-titre 	{ display: none; visibility: hidden }
header .entete nav 				{ display: block }
nav .nav-logo 					{ display: flex; align-items: center; flex: none }
nav .nav-logo .menu				{ display: block; visibility: visible; margin: 2% 0 0 2%; cursor: pointer }
nav .nav-logo .menu i			{ font-weight: 600; color: #333; 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: 1; top: 0; left: 0; overflow-x: hidden; transition: 0.5s; padding-bottom: 20px; background-color: #FFF }
#nav_mobi ul 					{ list-style: none; margin: 0; padding: 0; text-align: center }
.sidenav .close	a				{ display: block; text-align: right; font-size: 60px; color: #666; padding-right: 15px; font-weight: 700  }
.sidenav .close	a:hover			{ color: #000 }
.sidenav i						{ color: #A07900 }
.sidenav:hover i				{ color: #A07900 }
.sidenav .logo					{ 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: 15px; letter-spacing: 2px; color: #000; text-transform:uppercase; -webkit-transition: all .25s ease-in; transition: all .25s ease-in }
.sidenav label 					{ padding: .85rem }
.sidenav label 					{ box-shadow: inset 0 -1px #282828 }
.sidenav a:focus, .sidenav a:hover, .sidenav label:focus, .sidenav label:hover, .sidenav label:hover a { color: #333; margin-left: 10px; transition: 0.5s }
.sidenav label 					{ cursor: pointer }

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


#page 							{ width: 100% }
.font							{ font-family: Police }
.font-barlow					{ font-family: 'barlow condensed' }
.font-pro						{ font-family: EloquentJFRegularPro }
.fond 							{ background-color: #BDC3C1 }
.contenu 						{ width: 1200px; margin: auto }
.contenu-min					{ min-height: 300px }
.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% }
.accroche 						{ display: block; margin: auto; width: 90%; max-width: 600px }

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

.hp-txt 						{  }
.hp-txt h1						{ font-family: EloquentJFRegularPro; font-size: 80px; color: #666; margin-top: 0; margin-bottom: 0; line-height: 1.2em; font-weight: 400 }
.hp-txt h3						{ font-family: 'barlow condensed'; text-transform: uppercase; font-size: 16px; letter-spacing: 10px; color: #444 }

.hp-pictures 					{ display: flex; flex-wrap: wrap; align-items: center }
.hp-pictures .hp-logo 			{ flex: 0 0 45%; text-align: right }
.hp-pictures .hp-logo img		{ width: 100%; max-width: 265px; margin: 0 15% }
.hp-pictures .hp-photo 			{ flex: 0 0 55%; text-align: left }
.hp-pictures .hp-photo img		{ width: 100%; max-width: 750px }

.hp-picture 					{ display: block; padding-top: 2% }
.hp-picture .hp-photo img		{ width: 90%; max-width: 750px }

@media (max-width: 1200px){
.hp-logo 						{ text-align: center }
.hp-photo 						{ text-align: center }
}
@media (max-width: 800px){
.hp-txt h1						{ font-size: 50px } 
.hp-txt h3						{ letter-spacing: 4px }
.hp-pictures 					{ display: block }
.hp-logo, .hp-photo 			{ flex: none; display: block; margin: auto }
.hp-logo 						{ margin-top: 5% }
.hp-photo img					{ width: 90%; max-width: none; height: auto }
}


.accroche 						{  }
.accroche h1					{ font-family: EloquentJFRegularPro; font-size: 40px; letter-spacing: 2px; font-weight: 400; color: #57696D; line-height: 1.2em }
.accroche h2					{ font-family: EloquentJFRegularPro; font-size: 28px; letter-spacing: 2px; font-weight: 400; color: #57696D; line-height: 1.2em }
.accroche h3					{ font-size: 1.1em; font-weight: 400; color: #AAA; letter-spacing: 1px; line-height: 1.4em }
.accroche img					{ width: 400px; height: auto }
@media (max-width: 600px){
.accroche img					{ width: 100% }
}

.categorie section				{ background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; background-size: cover }
.categorie section.hebergement	{ background-image : url("/photos/20211114_191547.jpg") }
.categorie section .overlay		{ padding-top: 130px; padding-bottom: 130px; background: rgba(0, 5, 8, 0.2) }
.categorie section .container	{ width: 1200px; margin: auto; padding: 0 10% }
section .container .cadreinfo	{ margin: 0 10% }
.cadreinfo						{ width: auto; top: 50%; padding: 1% 2%; background: rgba(0, 0, 0, 0.3); text-align: center }
.cadreinfo h1					{ font-size: 50px; font-family: 'barlow condensed'; text-transform: uppercase; color: #b5b5b5; font-weight: 400; margin: 0; padding: 0 }
.cadreinfo h2					{ font-size: 20px; letter-spacing: 2px; font-weight: 300; color: #FFF  }


@media (max-width: 1200px){
.categorie section .container	{ width: 100%; padding: 0 }
}
@media (max-width: 480px){
.categorie section .container .cadreinfo	{ margin: 0 5% }
.cadreinfo h2					{ font-size: 20px }
}

.categs 							{ margin-bottom: 3% }
.categ 								{ margin-top: 3% }
.categ .categ-ligne 		{ display: flex; flex-wrap: wrap }
.categ-ligne .categ-photo 	{ flex: 0 0 40% }
.categ-ligne .categ-photo img	{ display: block; width: 100%; height: auto }
.categ-ligne .categ-txt 	{ flex: 0 0 60%; padding: 3% 5%; background-color: #EEE; color: #283A48 }
.categ-ligne .categ-txt h2	{ font-family: EloquentJFRegularPro; font-size: 36px; font-weight: 400; text-align: left; color: #283A48; margin: 0 0 0.6em 0 }
.categ-ligne .categ-txt h3	{ font-family: 'barlow condensed', Police; font-size: 24px; text-align: left; color: #283A48; margin: 0 }
.categ-ligne .categ-txt h4	{ font-family: 'barlow condensed', Police; font-size: 18px; text-align: left; color: #FFF; letter-spacing: 2px; line-height: 0.5em; margin: 0.5em 0  }
.categ-ligne .categ-txt p	{ margin: 0.4em 0  }
.categ-ligne .categ-txt strong	{ color: #819393 }
.categ-ligne .categ-txt img	{ position: absolute; width: auto; height: 300px }
.categ-photos img					{ margin: 3% 0 0; width: 50%; height: auto }
.categ .categ-more 			{ width: 80%; margin: 5% auto; border: 1px solid #819393; font-family: 'barlow condensed', Police; text-transform: uppercase; letter-spacing: 2px; text-align: center; transition: all 1s ease-out }
.categ .categ-more a		{ display: block; color: #283A48; padding: 15px }
.categ .categ-more:hover 	{ background-color: #819393 }
.categ .categ-more:hover a	{ color: #FFF }

@media (max-width: 1200px){
.categ-ligne .categ-txt 	{ padding: 1% 3% }
.categ-ligne .categ-txt h2	{ font-size: 40px }
.categ-ligne .categ-txt img	{ height: 200px }
}
@media (max-width: 900px){
.categ-ligne .categ-txt h2	{ font-size: 24px }
.categ-ligne .categ-txt img	{ position: relative  }
}
@media (max-width: 650px){
.categ 								{ margin-top: 5% }
.categ-ligne .categ-photo, .categ-ligne .categ-txt 		{ flex: auto}
.categ-photos img					{ width: 100% }
}

.produits 						{ display: flex; flex-wrap: wrap; text-align: center; margin: 4% 10%  }
.produits .produits-wrap 		{ display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-around; width: 100% }
.produits .produit				{ width: 22%; min-width: 300px; margin: 2%; padding-bottom: 2%; background-color: #FFF; box-shadow: 2px 4px 12px 5px rgba(0,0,0,.2) }
.produits .produit h1			{ font-size: 30px; font-weight: 400; letter-spacing: 2px; color: #5C5A57 }
.produits .produit h2			{ font-size: 24px; font-weight: 400; letter-spacing: 2px; color: #5C5A57 }
.produit img.losange			{ width: 70px; height: auto; margin: -45px auto 0 }
.produit .produit-txt 			{ font-family: 'barlow condensed'; padding: 0 5%; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: #333; line-height: 1.7em; font-weight: 300 }
.produit video 					{ width: 100% }
.produit video[poster] 			{ width: 100% }


@media (max-width: 1200px){ 	
.produits 						{ margin: 2% 5%  }
.produits .produit				{ width: 28% }
}
@media (max-width: 900px){ 	
.produits 						{ margin: 2% 3%  }
.produits .produit				{ width: 45% }
}
@media (max-width: 600px){ 				
.produits .produit				{ width: 90%; margin: 10% auto; min-width: inherit  }
.produit .produit-img			{ margin-top: -5% }
.produit .produit-txt 			{ min-height: inherit }
}

.produit-detail 				{ font-family: 'barlow condensed'; padding: 20px 0; text-align: center; max-width: 800px }
.produit-detail img				{ width: 48px; height: auto }
.produit-detail h3				{ font-family: EloquentJFRegularPro; font-size: 24px; margin-top: 0; margin-bottom: 0.5em; color: #57696D; letter-spacing: 2px }
.produit-detail i				{ margin-left: 5%; margin-right: 1% }
.produit-detail a				{ color: #57696D }
.produit-detail a:hover			{ color: #24352F }
.produit-detail iframe			{ display: block; margin: 10px auto; width: 50%; height: 180px }

@media (max-width: 600px){ 				
.produit-detail iframe			{ width: 90% }
}

.galerie 						{ text-align: center }
.galerie-livret 				{  }
.galerie-livret a				{ display: inline-block; width: 23%; margin: 1%; border: 1px solid #CCC }
.galerie-livret img				{ width: 100%; height: auto }
@media (max-width: 1200px){ 				
.galerie-livret a 				{ width: 31% }
}
@media (max-width: 992px){ 				
.galerie-livret a 				{ width: 48% }
}
@media (max-width: 600px){ 				
.galerie-livret a 				{ display: block; width: 90%; margin: 2% auto }
}

.reponse 						{  }
.reponse form 					{ width: 80%; max-width: 800px;  margin: 0 auto 5% }
.reponse form h3 				{ font-family: EloquentJFRegularPro; font-size: 1em; font-weight: 400; color: #AAA; letter-spacing: 1px; font-style: italic; text-align: center }
.reponse form .question			{ margin: 2% 0 }
.reponse label 					{ display: block; float: none; width: 100%; font-family: EloquentJFRegularPro; font-size: 1.1em; text-transform: none; color:#000; padding: 40px 0 10px }
.reponse input[type="text"], .reponse input[type="number"] 	{ font-family: inherit; color: #666; padding: 8px 16px; border: none; border-bottom: 1px solid #CCC; outline: none; border-radius: 0px;   appearance: none; background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transform: translateZ(0px); font-size: 1em; -webkit-font-smoothing: antialiased; line-height: unset; -webkit-text-fill-color: #666; animation: 1ms ease 0s 1 normal none running native-autofill-in; transition: background-color 1e+08s ease 0s, box-shadow 0.1s ease-out 0s; box-shadow: rgb(4 69 175 / 30%) 0px 1px; background-color: transparent !important }
.reponse textarea 				{ width: 100%; font-size: 1em }
.reponse input[type="submit"] 	{ font-family: EloquentJFRegularPro!important; font-weight: 400; background-color: #AAA; width: 100%; text-transform: none }
.reponse input[type="submit"].valider 	{ width: 85% }
@media (max-width: 600px){ 				
.reponse form 					{ width: 90% }
}

.listes							{ width: 100%; max-width: 800px; margin: 3% auto; font-size: 13px }
.listes a						{ color: #627788 }
.listes .liste					{ margin: 2% 0; background-color: #FCFCFC; box-shadow: 2px 4px 10px 5px rgba(0,0,0,.1) }
.listes .liste-libre			{ background-color: #DCDCDC }
.listes .liste-hover:hover		{ background-color: #ECECEC }
.listes .liste-categ			{ background-color: #CCC; padding: 3px }
.liste .header					{ border-bottom: 1px solid #AAA; margin-bottom: 3px; padding-bottom: 3px	}
.liste .header-titre			{ font-size: 15px; font-weight: 600; margin-bottom: 1% 	}
.liste .liste-icone				{ display: inline-block; width: 25%; vertical-align:top; text-align:center	}
.liste .liste-icone img			{ max-width: 100%; max-height: 185px }
.liste .liste-infos				{ display: inline-block; width: 65%; vertical-align:top; padding: 1% 3%	}
.liste .liste-infos-large		{ width: 74% }
.liste .liste-infos	i			{ margin-left: 5%; vertical-align: middle }
.liste .liste-infos	.liste-txt	{ font-family: Police }
.liste .liste-infos	img.photo	{ width: auto; height: 80px; margin: 1% 2%; vertical-align: middle }
.liste .liste-infos .message a	{ color: #FFF }
.liste .liste-infos .message a:hover	{ font-weight: bold }

.liste input.paiement 			{ font-size: 0.8em } 

@media (max-width: 550px){ 
.listes .liste					{ margin: 6% 0 }
.liste .liste-icone, .liste .liste-infos { display: block; width: 95%; margin: auto }
.listes i.fs30 					{ font-size: 24px }
.listes .minus 					{ letter-spacing: 1px }
.liste input.paiement 			{ 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 }
}

.presentation 			 				{ display: flex!important; flex-wrap: wrap; background-color: #C0BEBC; color: #FFF; margin: 3% 0; padding: 3% }
.presentation .presentation-img 		{ flex: 0 0 50%; max-width: 60%; position: relative; text-align: center }
.presentation .presentation-img img		{ width: 100%; height: auto }
.presentation .presentation-txt 		{ flex: 0 0 50%; max-width: 40%; position: relative; padding: 2% 4% }
.presentation-txt .presentation-titre	{ font-family: 'barlow condensed'; font-weight: 400; font-size: 2em  }
.presentation-txt .presentation-sstitre { font-family: 'barlow condensed'; font-size: 1.2em; text-transform: uppercase; letter-spacing: 1px }
@media (max-width: 600px){ 				
.presentation 			 				{ display: none }
.presentation .presentation-img, .presentation .presentation-txt 		{ flex: none; max-width: none; width: 100% }
}

.homelie .accroche 				{ max-width: 800px; font-size: 1.1em; line-height: 1.5em }

.albums							{ width: 95%; margin: 2% auto; text-align: center; min-height: 600px; font-size: 14px }
.albums .cadrealbum				{ display: inline-block; width: 18%; margin: 1%; vertical-align: top; text-align: center; cursor: pointer  }
.cadrealbum .cadrealbum-date	{ text-align: center; font-size: 11px; letter-spacing: 2px; margin: 2px 8px }
.cadrealbum-photo .cadrephoto	{ position: relative; width: 100% }
.cadrealbum-photo .cadrephoto::after	{   content: '';  display: block;  padding-bottom: 100%; }
.cadrealbum-photo .cadrephoto img { position: absolute; top: 0; left: 0;    width: 100%;    height: 100%;    object-fit: cover }
.cadrealbum-photo .minus		{ font-size: 9px }

@media (max-width: 992px){
.albums .cadrealbum				{ width: 23% }
}
@media (max-width: 768px){
.albums .cadrealbum				{ width: 30% }
}
@media (max-width: 550px){
.albums .cadrealbum				{ width: 46% }
}
@media (max-width: 480px){
.albums .cadrealbum				{ display: block; width: 90% }
}
.description					{ width: 65%; margin: 0 auto 1% auto; background-color:#DDD; padding: 2% }
.description .actions 			{ float: right; white-space: nowrap }
.description .actions .fas, .description .actions .far { font-size: 20px; margin: 0 10px }
.description .nomalbum			{ margin-bottom: 1%; color:#23394E; letter-spacing: 2px }
.description .datealbum			{ text-align: left }
.description .infoalbum			{ border-top: 1px dashed #999; padding: 1% 0; font-size: 13px; line-height: 1.3em }

.album-visu						{ width: 95%; margin: 2% auto; background-color: #FFF; min-height: 600px }
.album-visu .docs				{ }
.album-visu .docs a				{ display: block; margin: 1%; }
.album-visu .docs a img			{ width: 40px; height: auto }
.album-visu form				{ width: 80%; margin: 2% auto }
.album-visu .legende 			{ font-size: 9px; border-bottom: 1px dashed #999; padding-bottom: 3px; margin-bottom: 1%}
.album-visu .legende img		{ height: 15px; width: auto; vertical-align: middle; margin-left: 2% }
.album-visu .blocphoto			{ display: inline-block; margin: 2px }
.album-visu .blocphoto img.photo{ width: auto; height: 300px }
.album-visu video				{ width: 100%; max-width: 400px; max-height: 300px }
.album-visu .chapitre span		{ text-align: center }
.album-visu .chapitre span		{ display: block; width: 100%; background-color: #EEE; margin: 1% auto; padding: 1%; font-size: 13px; cursor: move }

.cols2 							{ display: table; width: 100%; padding: 10px }
.col2 							{ display: table-cell; width: 50% }
.navbtn		 					{ text-align: center; margin: 10px; font-family: 'barlow condensed'; color: #FFF; letter-spacing: 2px; border: 0; text-transform: uppercase; cursor: pointer }
.navbtn 						{ background-color: #A07900 }
.navbtn:hover 					{ background-color: #AE3B2C }
.navbtn:hover .navbtn			{ background-color: #AE3B2C }

.navbtn-gris					{ background-color: #767171 }
.navbtn-gris:hover				{ background-color: #AE3B2C }
.navbtn-gris:hover .navbtn-gris { background-color: #AE3B2C }

.cols2img img 					{ width: 100%; height: auto }
.cols2img .navbtnpayer input	{ text-align: center; margin: 10px; color: #FFF; letter-spacing: 2px; border: 0; text-transform: uppercase; cursor: pointer }
.cols2img .navbtnpayer input:hover 	{ background-color: #AE3B2C }

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


.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: #767171; 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: #A07900	}	
.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: 300 }
.contact .contactinfo			{ padding: 10px; border: solid 1px #AAA }
.contact .contactinfo h1		{ font-size: 1.5em }
.contact .contactinfo h3		{ margin: 0; color: #DA5158; letter-spacing: 2px }
.contact .contactinfo h5		{ text-transform: uppercase; letter-spacing: 7px; font-weight: normal; 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: 350px!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%; margin-top: 2%; line-height: 1.5em }
.legal .infos .infosdetail		{ display: inline-block; width: 20%; vertical-align: top; border: 1px solid #000; margin-left: 6%; padding: 0 2% 2%; font-size: 14px; text-align: right  }
.legal .infos .infosdetail h5	{ border-bottom: 1px solid #CCC; padding-bottom: 5px; margin: 20px 0 0; font-size: 16px  }
.legal .infos .infosdetail i	{ text-transform: uppercase; font-size: 11px; letter-spacing: 2px  }
.legal .infos .infostexte		{ display: inline-block; width: 48%; vertical-align: top; padding: 0 3% 2% 3%; font-size: 14px; text-align: justify }
.legal .infos .infostexte h3	{ text-align: left; font-size: 16px }
.legal .infos .photo			{ display: inline-block; width: 25%; 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: 768px){
.legal section .container		{ width: 100% }
.legal .infos .infosdetail		{ display: block; width: 90%; margin: 5% auto; font-size: 16px  }
.legal .infos .infostexte		{ display: block; width: 100%  }
.legal .infos .photo			{ display: block; width: 100%  }
.legal .infos .photo img		{ width: 100% }
}

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

.grpd							{ padding: 2% 5% }
.grpd .blocsubdiv 				{ background-color: #627788; padding: 1%; color: #FFF; text-transform: uppercase; letter-spacing: 4px; text-align: center; font-size: 15px }
.grpd .blocsubdiv p				{ text-transform: none; font-size: 13px; letter-spacing: normal; color: #FFF!important }
.grpd .grpd-intro				{ padding: 0 10%; text-align: justify; font-size: 15px }
.grpd .grpd-logo 	 			{ text-align: center }
.grpd .grpd-logo img 			{ width: 100px; height: auto }
.grpd .grpd-txt 				{ width: 80%; margin: 1% auto }
.grpd .grpd-blocs				{ font-size: 15px; text-align: center; margin-top: 2% }
.grpd .grpd-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 }
.grpd h2 						{ font-size: 1.3em; color: #22384D; text-align: center; line-height: 1.3em; font-weight: 500; text-transform: none; letter-spacing: 1px }
.grpd .grpd-icone 	 			{ text-align: center }
.grpd .grpd-icone img 			{ width: 48px; height: auto }

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

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

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

.pied-infos 					{ background-color: #A09D9A; padding: 3%; display: flex; flex-wrap: wrap; justify-content: center; color: #444; font-size: 16px }
.pied-infos .pied-info			{ flex: 0 0 33%; max-width: 33%; position: relative; text-align: center; line-height: 1.3em }
.pied-info .minus				{ font-size: 13px; color: #222 }
.pied-info i					{ color: #DDD; font-size: 60px; display: block }
.pied-info a					{ color: #444 }
.pied-info img.icone			{ width: 80px; height: auto; display: block; margin: auto }
.pied-info .detail				{ font-size: 13px }
.pied-info .tel					{ font-size: 24px; color: #EEE }

@media (max-width: 992px){
.pied-infos 					{ padding: 3% 1% }
}

@media (max-width: 768px){
.pied-infos						{ display: block }
.pied-infos .pied-info			{ display: block; width: 100%; flex: none; max-width: none; border-bottom: 1px solid #BBB; padding: 10px }
.pied-infos .pied-info:last-child{ border-bottom: none }
}

footer 							{ font-family: 'barlow condensed'; font-size: 16px; color: #DDD; padding-top: 1%; border-top: 1px solid #666 }/*background-color: #57696D; 8C8985*/
footer .pied-cols				{ display: flex; flex-wrap: wrap }
footer .pied-cols .icone img	{ width: 100px; height: auto }
footer .pied-col				{ -webkit-box-flex: 0; flex: 0 0 25%; max-width: 25%; position: relative; padding: 0 2% }
footer .pied-col ul				{ list-style: none; padding-left: 15px }
footer .pied-col ul:first-child	{ font-size: 18px; margin-top: 0.5em }
footer .pied-col h6				{ font-size: 20px; margin: 10px 0; color: #24352F; letter-spacing: 1px; font-weight: 300 }
footer .pied-col ul li			{ margin-top: 8px }
footer .pied-col ul li a		{ color: #57696D }
footer .pied-col ul li:hover a	{ color: #000; margin-left: 10px; transition: 0.5s }

@media (max-width: 768px){
footer .pied-cols				{ display: block }
footer .pied-cols .icone img	{ width: 80px; height: auto }
footer .pied-col				{ flex: none; max-width: none; width: 80%; margin: auto; padding: 2% }
}

@media (max-width: 1200px){ }
@media (max-width: 992px){ }
@media (max-width: 768px){ }
@media (max-width: 480px){ }