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

html 							{ scroll-behavior: smooth }
body							{ margin: 0; padding: 0; font-size: 16px; font-family: Police,'Century Gothic', Verdana; color: #333; transition: margin-left .5s;	}
header							{ display: block; width: 1200px; margin: auto; width: 100%; background-color: #E3D5C8 }

header a 						{ color: #FFF; letter-spacing: 2px  }
header a:hover					{ color: #D7C6B6 }
header .curseur:hover			{ color: #D7C6B6 }
header .choix					{ color: #D7C6B6 }
header .entete 					{ width: 1200px; margin: auto }

header .nav-top 				{ display: flex; justify-content: space-between; -webkit-box-align: end; align-items: center; background-color: #6D705F; padding: 5px; font-family: 'barlow condensed'; font-weight: 400; text-transform: uppercase }
.nav-top .nav-top-left 			{ display: inline-block; width: 48%; vertical-align: middle; color: #D7C6B6 }
.nav-top .nav-top-right 		{ display: inline-block; width: 48%; vertical-align: middle; text-align: right }
.nav-top .nav-top-right i		{ font-size: 20px; margin: 0 8px 0 20px; color: #D7C6B6; vertical-align: middle }

@media (max-width: 600px){ 
.nav-top .nav-top-left 			{ width: 28% }
.nav-top .nav-top-right 		{ width: 68% }
.nav-top .nav-top-right a		{ display: block; margin: 2% }
}

nav .nav-logo					{ display: inline-block; vertical-align: bottom; width: 30%; text-align: center }	
nav .nav-logo a					{ display: block; margin: 0 auto 1%; font-size: 54px; color: #6D705F }	
nav .nav-logo a span			{ display: block; font-family: 'barlow condensed'; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: #000 }	

nav	.rubriques					{ display: inline-block; vertical-align: bottom; width: 69%; text-align: right }
nav .rubriques ul li			{ display: inline-block; vertical-align: middle; font-size: 12px; color: #205064; text-transform: uppercase; letter-spacing: 1px; font-weight:600	}
nav .rubriques li a				{ color: #6D705F; margin: 0 15px; padding-bottom: 8px	}
nav .rubriques li a:hover		{ color: #000; border-bottom: 4px solid #3E4036	}
nav .rubriques li a.choix		{ color: #000; border-bottom: 4px solid #3E4036; font-weight:600	}
nav .nav-logo .menu, header .sidenav	{ display: none; visibility:hidden }

@media (max-width: 1200px){ 
nav, header						{ width: 100% }			
nav .rubriques 					{ display: none; visibility: hidden }
nav .nav-logo 					{ display: flex; width: 100%; align-items: center; flex: none }	
nav .nav-logo .menu				{ display: block; visibility: visible; margin: 1% 0 0 2%; cursor: pointer; text-align: center }
nav .nav-logo .menu i			{ font-weight: 600; color: #6D705F; font-size: 40px }
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					{ margin: 2% auto 4% }	
	
header .sidenav 				{ display: block; visibility:visible; height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #6D705F; overflow-x: hidden; transition: 0.5s }
header .sidenav .closebtn 		{ display: block; text-align: right; margin-right: 30px; font-size: 50px; color: #FFF  }
header .sidenav .logo			{ text-align: center; margin-bottom: 10px }
header .sidenav .logo img		{  }
header .sidenav ul 				{ list-style: none; padding: 0; margin: 0; border-top: 1px solid #8A9FA1 }
header .sidenav li 				{ padding: 0; margin: 0 }
header .sidenav li a 			{ display: block;  border-bottom: 1px solid #8A9FA1;  padding: 1em; font-size: 16px; letter-spacing: 2px; color: #FFF; transition: 0.3s; text-transform:uppercase }
header .sidenav li a:hover 		{  background: #8A9FA1}
}

@media (max-width: 460px) {
header #logo					{ padding-left: 0 }
header #openbtn					{ position: relative; margin-top: 2% }
.sidenav 						{ padding-top: 15px;}
.sidenav a 						{ font-size: 18px;}
}

#jssor_1 						{ position:relative;margin:0 auto;top:0px;left:0px;width:2400px;height:1000px;overflow:hidden;visibility:hidden }
#jssor_1 .jssorl-009-spin 		{ position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.5) }
#jssor_1 .jssorl-009-spin img	{ margin-top:-19px;position:relative;top:50%;width:38px;height:38px }
#jssor_1 .slides				{ cursor:default;position:relative;top:0px;left:0px;width:2400px;height:1000px;overflow:hidden }
#jssor_1 .slides .slide-txt		{ left:0px;top:0px;width:2400px;height:1000px;position:absolute }
#jssor_1 .slides .slide-txt	.slide-box	{ left:955px;top:75px;display:block;position:absolute;overflow:visible }
#jssor_1 .slides .slide-txt	.titre1	{ display:block;position:absolute;font-family:barlow,sans-serif;font-size:70px;font-weight:900;overflow:visible;left:-800px;top:180px }
#jssor_1 .slides .slide-txt	.titre11{ display:block;position:absolute;font-family:barlow,sans-serif;font-size:70px;font-weight:900;overflow:visible;left:-805px;top:185px }
#jssor_1 .slides .slide-txt	.titre2	{ display:block;position:absolute;font-family:barlow,sans-serif;font-size:110px;font-weight:900;overflow:visible;left:1600px;top:275px }
#jssor_1 .slides .slide-txt	.titre22{ display:block;position:absolute;font-family:barlow,sans-serif;font-size:110px;font-weight:900;overflow:visible;left:1595px;top:280px }

.jssorl-009-spin img { animation-name: jssorl-009-spin; animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear }
@keyframes jssorl-009-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
.jssorb132 			{ position:absolute;bottom:24px;right:16px}
.jssorb132 .i 		{ position:absolute;cursor:pointer;}
.jssorb132 .i .b 	{ fill:#C2AA72;fill-opacity:0.8;stroke:#084A87;stroke-width:1600;stroke-miterlimit:10;stroke-opacity:0.7;}
.jssorb132 .i:hover .b { fill:#084A87;fill-opacity:.7;stroke:#CC0000;stroke-width:2000;stroke-opacity:0.8;}
.jssorb132 .iav .b 	{ fill:#084A87;stroke:#C2AA72;stroke-width:2400;fill-opacity:0.8;stroke-opacity:1;}
.jssorb132 .i.idn 	{ opacity:0.3;}
.jssora051 			{ display:block;position:absolute;cursor:pointer;width:55px;height:55px;top:0px }
.jssora051-left		{ left:25px }
.jssora051-right	{ right:25px }
.jssora051 .a 		{ fill:none;stroke:#C2AA72;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover 	{ opacity:.8;}
.jssora051.jssora051dn { opacity:.5;}
.jssora051.jssora051ds { opacity:.3;pointer-events:none;}

@media (max-width: 1200px){ 	
#jssor_1 .slides .slide-txt	.titre1	{ font-size:110px;left:-800px;top:180px }
#jssor_1 .slides .slide-txt	.titre11{ font-size:110px;left:-805px;top:185px }
#jssor_1 .slides .slide-txt	.titre2	{ font-size:170px;left:1600px;top:330px }
#jssor_1 .slides .slide-txt	.titre22{ font-size:170px;left:1595px;top:335px }
}

@media (max-width: 860px){ 	
#jssor_1 							{ height:1500px }
#jssor_1 .slides					{ height:1500px }
#jssor_1 .slides .slide-txt			{ height:1500px }
#jssor_1 .slides .slide-txt	.titre1	{ font-size:200px;left:-800px;top:250px }
#jssor_1 .slides .slide-txt	.titre11{ font-size:200px;left:-805px;top:255px }
#jssor_1 .slides .slide-txt	.titre2	{ font-size:300px;left:1600px;top:520px }
#jssor_1 .slides .slide-txt	.titre22{ font-size:300px;left:1595px;top:525px }
}

#jssor_fade						{ position:relative;margin:0 auto;top:0px;left:0px;width:2400px;height:650px;overflow:hidden;visibility:hidden }
#jssor_fade .jssor_slides		{ cursor:default;position:relative;top:0px;left:0px;width:2400px;height:650px;overflow:hidden }

#jssor_slides					{ position:relative;margin:0 auto;top:0px;left:0px;width:1100px;height:500px;overflow:hidden;visibility:hidden }
.jssor_slides					{ cursor:default;position:relative;top:0px;left:0px;width:1100px;height:500px;overflow:hidden }

.jssor_load						{ position:absolute;top:0px;left:0px;background-color:#CCC }

.jssora22l, .jssora22r 			{ display: block; position: absolute; width: 40px; height: 58px; cursor: pointer; background: url('/scripts/images/jssor-fleches.png') center center no-repeat; overflow: hidden}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }

.jssor-dots { position: absolute }
.jssor-dots div, .jssor-dots div:hover, .jssor-dots .av { position: absolute;  width: 15px; height: 15px; filter: alpha(opacity=70); opacity: .7; overflow: hidden; cursor: pointer; border: #fff 1px solid;  }
.jssor-dots div { background-color: #d3d3d3; }
.jssor-dots div:hover, .jssor-dots .av:hover { background-color: gray; }
.jssor-dots .av { background-color: #000; }
.jssor-dots .dn, .jssor-dots .dn:hover { background-color: #a9a9a9; }


#page 							{ width: 100% }
.contenu						{ width: 1200px; margin: auto }
h1								{ font-size: 30px; margin-bottom: 0; font-weight: 300; text-align: center; color: #6D705F }
h2								{ font-size: 12px; margin: 0; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; text-align: center; color: #0E2985 }
h3								{ font-size: 18px; margin: 6px 0; line-height: 24px; font-weight:600; letter-spacing: 2px; text-transform:none }
.accroche						{ font-size: 17px; line-height: 1.5em; margin: 2% 10% }
.photos	img						{ width: 100%; height: auto }

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


.bloc-clair						{ width: 100%; background-color: #F7F7F6; border: 1px solid #D7E0E9 }
.bloc-moyen						{ width: 100%; background-color: #E3D5C8; border: 1px solid #E3D5C8 }

.competences					{ text-align: center }
.competence						{ display:inline-block; width: 35%; padding: 3%; margin-top: 1%; vertical-align:top; animation-duration: 1000ms; animation-delay: 600ms; animation-name: fadeInDown; font-size: 15px; line-height: 1.4em }
.competence	.icone				{ width: 250px; margin: auto }
.competence	.icone:hover 		{ -webkit-transition: 500ms;    -moz-transition: 500ms;    -o-transition: 500ms;    transition: 500ms; -webkit-transform:rotate(5deg) scale(1)   }
.competence	.icone img			{ width: 100px; height: auto }
.competence	.icone i 			{ font-size: 100px; color: #6D705F }
.competence	.iconetxt			{ min-height: 160px }
.competence	.iconetxt h4		{ font-size: 18px; font-weight: 600; letter-spacing: 1px;  margin: 3%}
.competence	.iconetxt .desc		{ font-size: 12px; text-transform: uppercase; letter-spacing: 2px}
.competence .plus		 		{ border-top: 1px solid #6D705F; color: #6D705F; margin: 3% 0; padding: 5px 10px;font-size: 11px; text-align: center; text-transform:uppercase; letter-spacing: 2px }
.competence .plus:hover	 		{ background-color: #6D705F; color: #D0D0CA; cursor: pointer }
.competence .plus:hover a 		{ color: #FFF }

@media (max-width: 900px){
.competence						{ width: 49%; padding: 1% }
.competence	span 				{ height: 50px; width: 50px; }
.competence	.icone img			{ width: 55px; height: 55px }
.competence	.icone i 			{ font-size: 60px }
}
@media (max-width: 700px){
.competence						{ display: block; width: 90%; margin: auto  }
.competence	.iconetxt			{ min-height: inherit }
}

.gallery  						{ width: 95%; max-width: 1500px; margin: auto; padding: 3% 0; text-align: center } 
.gallery p 						{ display: block; width: 90%; margin: 3% auto 1%; max-width: 700px; font-size: 17px; line-height: 1.4em; text-align: justify } 
.gallery a img					{ width: auto; height: 300px; border-radius: 5px; margin: 0.4% 0.6% }

@media (max-width: 600px){
.gallery  						{ width: 100% }
.gallery a img					{ width: 90%; height: auto }
}

.bloc-txt-slides				{ display: flex; justify-content: space-between; -webkit-box-align: end; align-items: flex-start; padding: 5px }
.bloc-txt-slides .bloc-txt		{ flex-grow: 1; width: 48%; padding: 3%; line-height: 1.5em }
.bloc-txt-slides .bloc-slides 	{ flex-grow: 1; width: 48%; padding-top: 2% }

@media (max-width: 768px){
.bloc-txt-slides				{ display: block }
.bloc-txt-slides .bloc-txt		{ display: block; width: 90%; margin: auto }
.bloc-txt-slides .bloc-slides 	{ display: block; width: 90%; margin: auto }
}

.box-infos						{ display: table; width: 100%; margin: 2% auto; border: 1px solid #ccc; background-color: #F6F5F5 }
.box-infos .photo				{ display: table-cell; width: 308px; vertical-align: top  }
.box-infos .photo img			{ display: block; margin: auto; width: 308px; height: auto; cursor: pointer  }
.box-infos .txt					{ display: table-cell; width:inherit; vertical-align: middle; text-align: justify; line-height: 1.3em; font-size: 14px; color: #555; padding: 2%  }
.box-infos .txt h4				{ margin: 0; text-align: left; font-size: 22px; text-transform: none; letter-spacing: 1px; color: #6D705F }
.box-infos .txt .titre			{ margin-top: 7px; color: #6D705F; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px }
.box-infos .txt ul				{ list-style-image: url(images/puce_carre_ciel.png) }
.box-infos .txt ul.col			{ display: table-cell; padding-bottom: 2% }
.box-infos .txt .float-d		{ margin-left: 5%; text-align: center }
.box-infos .map					{ display: table-cell; width: inherit; vertical-align: middle; background-color: #F6F5F5; padding: 0 }
.box-infoslegal					{ display: table; width: 80%; margin: 2% auto; font-size: 10px; text-transform:uppercase; letter-spacing: 2px }

.google-maps 					{ position: relative; padding: 0 0 410px 0; height: 0; overflow: hidden } 
.google-maps iframe 			{ position: absolute; top: 0; left: 0; width: 100% !important; height: 410px!important; padding: 0 }
.map i, .map h2, .map h3 		{ display: none; visibility: hidden }

@media (max-width: 992px){
.box-infos						{ width: 90% }
.box-infos .photo				{ display: none; visibility: hidden }
.box-infos .txt					{ display: block; width: 100%; padding: 0 5%; font-size: 15px   }
.box-infos .map					{ display: block; width: 100% }
.map i, .map h2, .map h3 		{ display: block; visibility: visible }
}

.contact 						{ text-align: center }
.contact h2 					{ padding-top: 2% }
.contact .contact-wrap 			{ margin-top: 3%; display: flex; flex-wrap: wrap;  -webkit-box-pack: justify !important; justify-content: space-between  }/*; align-items: stretch*/
.contact .contactbloc			{ flex: 0 0 33.3333%; max-width: 33.3333%; padding: 2% }
.contact .contactbloc h5		{ font-size: 1.1em; margin: 1.2em }
.contact .contactbloc a			{ display: block; font-size: 18px }
.contact .contactbloc-color1	{ background-color: #6D705F; color: #FFF; align-content: center }
.contact .contactbloc-color1 h1	{ color: #FFF }
.contact .contactbloc-color1 a	{ color: #FFF }
.contact .contactbloc-color2	{ background-color: #F7F7F6; align-content: center }
.contact .contactbloc-color3	{ background-color: #E3D5C8; align-content: center }
.cartes .carte img.iconeverysmall { margin: -14px auto 30px }

@media (max-width: 600px){
.contact .contact-wrap 			{ display: block; margin: 3% auto }
.contact .contactbloc			{ display: block; width: 90%; max-width: inherit; margin: auto }
}

.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: 850px){
.legal .infos .infosdetail		{ width: 35%  }
.legal .infos .infostexte		{ width: 58% }
.legal .infos .photo			{ display: none; visibility: hidden }
}

@media (max-width: 600px){
.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%; padding: 5%  }
}

.legal-reglement 				{ text-align: justify; font-size: 12px; 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 }


#pied-fd			{ display: block; width: 100%; background-color: #6D705F}
#pied 				{ width: 1140px; margin: auto; padding: 20px 0; font-size: 14px; line-height: 1.5em; color: #E8E8E6 }
#pied a 			{ color:#CCC }
#pied a:hover 		{ color:#FFF }
#pied .info 		{ display: inline-block; vertical-align:top;  width: 25%; margin-left:7%}
#pied .info h5 		{ color: #D8E1E6; margin-bottom: 10px; font-weight: normal;	text-transform:uppercase; letter-spacing: 2px;	font-size: 16px; line-height: 2em; margin: 15px 0 5px 0 }
#pied h4 			{ color: #FFF; font-weight:normal;	text-transform:uppercase; font-size: 11px; letter-spacing: 2px; line-height: 1.8em; margin: 5px 0 }
#pied .ref			{ text-align: center}
#pied img			{ width: 64px; height: auto }

@media (max-width: 1200px){
#pied 						{ width: 940px}
}

@media (max-width: 992px){
#pied 						{ width: 100%}
}
@media (max-width: 768px){
#pied .info 				{ width: 40%;	margin-left:7%}
#pied h4 					{ font-size: 12px; }
#pied .ref					{ width: 85%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F2F2F2}
#pied .ref	img				{ float: right}
}

@media (max-width: 600px){
#pied .info 				{	width: 85%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F2F2F2}
}