/* Auteur du developpement sur-mesure pour Le Mas des Restanques : Herve Augoyat - https://www.ah-book.com 
Copie ou modification interdite sans accord ecrit de l'auteur */

#load {display: none}
.H #load {display:block; width:50px; height:auto; /*height:12.5px*/ position:fixed; z-index:1001; top:50%; margin-top:-6px; left:50%; margin-left:-25px;}

html {font-size: 100%; height:100%; width:100%; -webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;overscroll-behavior: none;
position: relative}



@font-face {font-family:'JO';font-style:normal;font-weight: 300;
  src: url('../Fontes/JO-300.eot'); 
  src: local(''),
       url('../Fontes/JO-300.eot?#iefix') format('embedded-opentype'),
	   url('../Fontes/JO-300.woff2') format('woff2'), 
       url('../Fontes/JO-300.woff') format('woff'), 
       url('../Fontes/JO-300.ttf') format('truetype'); }

@font-face {font-family:'JO';font-style:normal;font-weight: 400;
  src: url('../Fontes/JO-400.eot'); 
  src: local(''),
       url('../Fontes/JO-400.eot?#iefix') format('embedded-opentype'),
	   url('../Fontes/JO-400.woff2') format('woff2'), 
       url('../Fontes/JO-400.woff') format('woff'), 
       url('../Fontes/JO-400.ttf') format('truetype'); }

@font-face {font-family:'MO';font-style:normal;font-weight: 400;
  src: url('../Fontes/MO-400.eot'); 
  src: local(''),
       url('../Fontes/MO-400.eot?#iefix') format('embedded-opentype'),
	   url('../Fontes/MO-400.woff2') format('woff2'), 
       url('../Fontes/MO-400.woff') format('woff'), 
       url('../Fontes/MO-400.ttf') format('truetype'); }


body {font-size: 1em; color:#000; font-family:'JO', sans-serif; margin:0; font-weight:300; height:100%; width:100%; position:relative; background-color:#fff; 
-webkit-user-select: none; -moz-user-select: none;  -khtml-user-select: none; -ms-user-select: none; font-variant-ligatures: no-common-ligatures;}

#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size: 1.5em;} 
#btmenu .rond { width:36px; height:36px; margin-top: -19px;}
@media screen and (max-width: 3000px) {
	#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size: 1.3em;} 
	#btmenu .rond { width:30px; height:30px; margin-top: -15px;}
}
@media screen and (max-width: 2300px) {  
	#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size: 1.2em}
	#btmenu .rond { width:28px; height:28px; margin-top: -14px;}
	.hero {min-height:700px}
}
@media screen and (max-width: 2100px) {  
	#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size: 1.1em}  
	#btmenu .rond { width:26px; height:26px; margin-top: -13px;}
	.hero {min-height:650px}
}
@media screen and (max-width: 1950px) {  
	#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size: 1em}  
	#btmenu .rond { width:24px; height:24px; margin-top: -13px;}
	.hero {min-height:600px}
}

* { outline: none;}
.ret {clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float:none}
.retMOB {display: none}

img {display:block}
a img {border:none}
a {outline:none; border:none; text-decoration:none}
ul, li {margin:0; padding:0; list-style:none}
h1, h2, h3, h4, h5 {padding:0; margin:0; font-size:1em; font-weight:normal; line-height:1.1em}
sup {font-size: 0.55em; line-height: 1em}
svg {width: 100%; height: 100%; display: block}
/*::-moz-selection, ::selection { background:#ffde59}*/
#testeur {position:fixed; z-index:9999; bottom:0; left:0; padding:0.5em; font-size:0.6em; letter-spacing:0.1em; display:inline-block; font-family: sans-serif; color:#FFF; opacity:0.4; background-color: #000000; display:none}

#MOB {display:none}
#MOB2 {display:none} 
#MOB3 {display:none}

.calExt{} .cal {position: absolute; top:0; left:0; width: 100%}
.H .cal {width: auto; height: auto}
.calExt2{} .cal2 {position: absolute; top:0; left:0; width: 100%}
.H .cal2 {width: auto; height: auto}

.brmobo {display:block}
.Texteselect {-webkit-user-select:text; -moz-user-select:text;  -khtml-user-select:text; -ms-user-select:text}

.H .ano0 {visibility: hidden}
.H .anSY0, .H .anSY0 b {transform-origin: 0 0}
.H .anSX1 {transform-origin:0 0 }
.H .anSX2 {transform-origin:0 0 }
.H .anS1 {transform-origin:50% 50% }
.H .anS2 {visibility: hidden; transform-origin:50% 50% }
.H .anS3 {visibility: hidden; transform-origin:50% 50% }
.H .anyMini {visibility: hidden; transform-origin: 0 0}
.H .any1, .H .any2, .H .ani {visibility: hidden; transform-origin: 50% 50% }
.H .anyA, .H .anyB, .H .anyC, .H .anyD, .H .anyE, .H .anyF {visibility: hidden; transform-origin: 50% 50% }
.H .anCL0 {overflow: hidden; position: relative; transform-origin: 0 0}



.margH1 {margin-top:1em} .paddH1 {padding-top:1em} .margB1 {margin-bottom:1em} .paddB1 {padding-bottom:1em}
.margH1-5 {margin-top:1.5em} .paddH1-5 {padding-top:1.5em} .margB1-5 {margin-bottom:1.5em} .paddB1-5 {padding-bottom:1.5em}
.margH2 {margin-top:2em} .paddH2 {padding-top:2em} .margB2 {margin-bottom:2em} .paddB2 {padding-bottom:2em}
.margH3 {margin-top:3em} .paddH3 {padding-top:3em} .margB3 {margin-bottom:3em} .paddB3 {padding-bottom:3em}
.margH4 {margin-top:4em} .paddH4 {padding-top:4em} .margB4 {margin-bottom:4em} .paddB4 {padding-bottom:4em}
.margH5 {margin-top:5em} .paddH5 {padding-top:5em} .margB5 {margin-bottom:5em} .paddB5 {padding-bottom:5em}
.margH6 {margin-top:6em} .paddH6 {padding-top:6em} .margB6 {margin-bottom:6em} .paddB6 {padding-bottom:6em}
.margH7 {margin-top:7em} .paddH7 {padding-top:7em} .margB7 {margin-bottom:7em} .paddB7 {padding-bottom:7em}
.margH8 {margin-top:8em} .paddH8 {padding-top:8em} .margB8 {margin-bottom:8em} .paddB8 {padding-bottom:8em}
.margH9 {margin-top:9em} .paddH9 {padding-top:9em} .margB9 {margin-bottom:9em} .paddB9 {padding-bottom:9em}
.margH10 {margin-top:10em} .paddH10 {padding-top:10em} .margB10 {margin-bottom:10em} .paddB10 {padding-bottom:10em}
.margH11 {margin-top:11em} .paddH11 {padding-top:11em} .margB11 {margin-bottom:11em} .paddB11 {padding-bottom:11em}
.margH12 {margin-top:12em} .paddH12 {padding-top:12em} .margB12 {margin-bottom:12em} .paddB12 {padding-bottom:12em}
.margH13 {margin-top:13em} .paddH13 {padding-top:13em} .margB13 {margin-bottom:13em} .paddB13 {padding-bottom:13em}
.margH14 {margin-top:14em} .paddH14 {padding-top:14em} .margB14 {margin-bottom:14em} .paddB14 {padding-bottom:14em}
.margH15 {margin-top:15em} .paddH15 {padding-top:15em} .margB15 {margin-bottom:15em} .paddB15 {padding-bottom:15em}


#remonte {width:50px; height:50px; background-color:#fff; position:fixed; bottom:0px; right:0; z-index:900;   
		visibility:hidden; overflow:hidden; cursor:pointer; /*border-top-left-radius:12px; border-top-right-radius:12px;*/
		box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05); display: none}
		#remonte b {width:100%; display: block; position:absolute; top:0%; left:0%; display:block;transform-origin: 50% 50%;}
.H #remonte {visibility: hidden}



.curseur{ width: 20px; height: 20px; z-index: 99999; background:#cfcfcf; opacity:0.9; visibility: hidden; transform-origin: 50% 50%;
	border-radius: 50%; position: fixed; top:100%;  left:50%; margin-left: -12px; margin-top:-12px; /*transform: translate(-50%, -50%);*/ 
	pointer-events: none;
	-webkit-mix-blend-mode: multiply; -moz-mix-blend-mode: multiply; -o-mix-blend-mode: multiply; -ms-mix-blend-mode: multiply; mix-blend-mode:multiply;
display: none}


.texteanim {overflow: visible}
	.texteanim b {display: inline-block; line-height: 1.15em; position: relative; font-weight:200}
.H .texteanim b {visibility: hidden}

.coulico01 {fill:#000}
.coulico02 {fill:#b8562b}
.coulico03 {fill:#fff}

.reaext {width: 100%; display: block; overflow: hidden; position: relative; }
.reaext img {width: 100%; display: block; position: relative; z-index: 9; transform-origin: 50% 50%}
.reaext .cache {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color:rgba(255, 255, 255, 0); display: block; z-index: 10}


#btmenu { position: fixed; top:0.5em; right:1.4em; padding: 1em; z-index: 990; cursor: pointer; color:#fff;}
	#btmenu #btmT { font-weight: 300; font-size:0.95em; letter-spacing: 0.03em; text-transform: uppercase; display: inline-block; 
		position: relative; padding-right: 24px; line-height:1em; padding-top:1.5em; padding-bottom:1.5em}
		#btmenu #btmT span { display:inline-block; overflow: hidden; padding: 0 2em 0 0}
#btmenu  #btmT span#BtmTs1 {position: relative; z-index: 990}
		/*#BtmTs2 {position: relative; top:0; left: 0}*/
		#BtmTs2 {position: absolute; top:1.5em; left: 0}
		#btmenu #btmT span b {display: inline-block; position: relative; font-weight:300}
		#btmenu #btmT #BtmTs2 b {visibility: hidden}

		#btmenu .rond { display:block; background-color: #fff; border-radius: 50%; position: absolute; top: 50%;  right:0.5em; transform-origin: 50% 50%; /*width:24px; height:24px; margin-top: -13px;*/}

.H #BtmTs1 b, .H #btmenu .rond{ visibility: hidden}


.navigation {width:100%; height:auto; position:relative; left:0; background-color: #b4542c; z-index: 980}
	.H .navigation {width:100%; height: 100%; position: fixed; left:102%; bottom: 0; z-index:980; overflow:hidden; transform-origin:0 0;}
	.navigationInt {width:100%; height:600px; padding-top: 150px; position: relative; z-index:902;}
	.H .navigationInt {height:100%; padding-top: 0}	

#navvisu {width:16%; height: 80%; position: absolute; top:10%; left:30%; transform-origin:0 0}
	#navvisuINT {position: relative; width: 100%; height: 100%; overflow: hidden}
	#navvisu img {position: absolute; top: 50%; left: 50%; width: auto}

#navcontenu {width:50%; position: absolute; bottom: 15%; left:50%}

#liste1 {font-size:3em; }
#liste1 li {display: block; margin-top: 0; margin: 0;}
#liste1 li a {color:#fff; line-height: 1.2em; display: inline-block; position: relative; padding:0.05em 0 0.05em 0;letter-spacing: 0.02em}
#liste1 li a span {display: inline-block; position: relative; z-index:11}
/*#liste1 li a i {position: absolute; bottom: 0.1em; left: 0; width:0; background-color:#fff; height: 1px; z-index: 10}*/

.navnom {font-size: 1.1em; font-weight:300; padding-top:6em; padding-bottom: 1em; display: block; color:#fff; text-transform: uppercase; letter-spacing: 0.09em}

#liste2 {font-size: 1.3em; }
#liste2 li {display: block}
#liste2 li a {color:#fff; font-weight:200; line-height: 1.3em; padding-bottom: 0.05em; display: inline-block; position: relative; letter-spacing: 0.02em}
#liste2 li a span {display: inline-block; position: relative; z-index: 11} 
#liste2 li a b {color:#fff; display: inline-block; padding-right:0.5em; position: relative; z-index: 11; font-weight: 200}
#liste2 li a i {position: absolute; bottom:0em; left: 0; width:0; background-color:#fff; height: 1px; z-index: 10}


.navcontmentions {position:absolute; bottom:2em; right:2.5em; color:#fff; font-size:0.85em; letter-spacing:0.02em; font-weight:300; 
	text-align:right; display:block; line-height: 1.8em;}
	.navcontmentions a {color:#fff; text-decoration:none; opacity:0.8}
		.navcontmentions a:hover {color:#fff; text-decoration:none; opacity:0.7}

@media screen and (min-width:3000px) and (max-width:6000px) and (min-height:900px) and (max-height:1050px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:3000px) and (max-width:6000px) and (min-height:800px) and (max-height:900px) {   .navnom {padding-top:2em} #liste1 {font-size:3em}       }		
@media screen and (min-width:3000px) and (max-width:6000px) and (min-height:0px) and (max-height:800px) {   .navnom {padding-top:2em} #liste1 {font-size:3em} #navcontenu {font-size: 0.85em}      }

@media screen and (min-width:2300px) and (max-width:3000px) and (min-height:750px) and (max-height:880px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:2300px) and (max-width:3000px) and (min-height:630px) and (max-height:750px) {   .navnom {padding-top:2em} #liste1 {font-size:3em}       }		
@media screen and (min-width:2300px) and (max-width:3000px) and (min-height:0px) and (max-height:630px) {   .navnom {padding-top:2em} #liste1 {font-size:3em} #navcontenu {font-size: 0.85em}      }	


@media screen and (min-width:1750px) and (max-width:2300px) and (min-height:720px) and (max-height:840px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:1750px) and (max-width:2300px) and (min-height:620px) and (max-height:720px) {   .navnom {padding-top:2em} #liste1 {font-size:3em}       }	
@media screen and (min-width:1750px) and (max-width:2300px) and (min-height:0px) and (max-height:620px) {   .navnom {padding-top:2em} #liste1 {font-size:3em} #navcontenu {font-size: 0.85em}      }	

@media screen and (min-width:1500px) and (max-width:1750px) and (min-height:510px) and (max-height:600px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:1500px) and (max-width:1750px) and (min-height:430px) and (max-height:510px) {   .navnom {padding-top:2em} #liste1 {font-size:3em}       }	
@media screen and (min-width:1500px) and (max-width:1750px) and (min-height:0px) and (max-height:430px) {   .navnom {padding-top:2em} #liste1 {font-size:3em} #navcontenu {font-size: 0.85em}      }	

@media screen and (min-width:1340px) and (max-width:1500px) and (min-height:470px) and (max-height:560px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:1340px) and (max-width:1500px) and (min-height:430px) and (max-height:470px) {   .navnom {padding-top:2em} #liste1 {font-size:3em}       }	
@media screen and (min-width:1340px) and (max-width:1500px) and (min-height:0px) and (max-height:430px) {   .navnom {padding-top:2em} #liste1 {font-size:3em} #navcontenu {font-size: 0.85em}      }	


@media screen and (min-width:990px) and (max-width:1340px) and (min-height:440px) and (max-height:500px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:990px) and (max-width:1340px) and (min-height:360px) and (max-height:440px) {   .navnom {padding-top:2em} #liste1 {font-size:3em}       }	
@media screen and (min-width:990px) and (max-width:1340px) and (min-height:0px) and (max-height:360px) {   .navnom {padding-top:2em} #liste1 {font-size:3em} #navcontenu {font-size: 0.85em}      }	


#intro {top:0; left:0; width: 100%; height: 100%; overflow: hidden; position: relative; z-index:500; background-color: #fff}
.H #intro {position: fixed; top:0; left: 0; transform-origin: 0 0}
	#introInt {width: 100%; height: 100%; position: relative}
	#introFond {width: 100%; height: 100%; position: relative; overflow: hidden; z-index:501; background-color: #b4542c; transform-origin: 100% 100%}
	#introLogo {width:14em; top:70%; left:50%; margin-left:-7em; margin-top:0; position: absolute; z-index:504}
		#introLogo img {width: 100%; display: block}
	#introVisu {width:44%; height:auto; position: absolute; top: 0; left:28%; z-index: 503; transform-origin: 50% 50%}
		#introVisu img {width: 100%; display: block}

.H #introFond, .H #introVisu {visibility: hidden}

#pageComplete {position: relative; z-index:1; width:100%;  height: auto; overflow: hidden}
	.H #pageComplete {visibility:hidden; }
#pageAccueil {position: relative; z-index:1; width:100%;  /*height:100%;*/ height: auto}
	.H #pageAccueil {visibility:hidden; }

/* Accueil */
.hero {width:100%; height: 100%; position: relative; z-index: 1; overflow: hidden}
#heroLogo {width:14em; top:50%; left:50%; margin-left:-7em; margin-top:-5.089em;/*0.727*/ position: absolute; z-index:10}
	#heroLogo img {width: 100%; display: block}
.heroVisu {position: absolute; z-index:1; transform-origin: 50% 50%}
.heroVoile {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 2; opacity:0.7}
#accrocheAcc {position: absolute; bottom: 0; left:3.7%; z-index:7}
	#accrocheAccInt {padding-bottom:2em;/*js*/ position: relative}
		#accrocheAcc h1, #accrocheAcc h2 { font-weight: 300; color: #fff; font-size:1.8em; display: block; line-height:0.8em}
		#accrocheAcc h2 { padding-top: 0.3em}
			#accrocheAcc h1 b, #accrocheAcc h2 b {display: inline-block; position: relative; overflow: hidden;font-weight: 300; line-height: 1.4em; padding: 0.02em 0}
			#accrocheAcc h1 span, #accrocheAcc h2 span {display: inline-block; position: relative; line-height: 1.4em}
.H .hero {visibility: hidden}

.full {width: 100%}
.bg01 {background-color:#f4f3f0}
.ext1 {width: 92.6%; margin-left: auto; margin-right: auto; position: relative; z-index: 10}
.titre01 {padding-top: 13em; padding-bottom:7em}
.titre01 h2 {font-size: 1.4em; color:#b8562b; position: relative; line-height: 1.6em; display: inline-block; font-weight: 300;}
		.titre01 h2 i {position: absolute; bottom:0em; left: 0; width:100%; background-color:#b8562b; height: 1px; z-index: 10}
.titre01 h3 {font-size:3em; color:#000000; position: relative; line-height: 1.4em; display: inline-block; font-weight: 300; display: block; 
	padding-top: 0.4em}
.titre01 h3 strong {color:#b8562b; font-weight: 300}


.infos01 {}
.filet {width: 100%; height: 1px; background-color:#b8562b; margin-bottom:1.6em}
.filet02 {width: 100%; height: 1px; background-color:#dbdbdb; margin-bottom:1.6em; margin-top: 1em}

.col25 {float: left; width: 25%}
.col50 {float: left; width: 50%} .col50G {float: left; width: 50%} .col50D {float: right; width: 50%}
.col35 {float: left; width: 35%; padding-top: 3em}
.colint {padding-left:0.7em; padding-right:0.7em; position: relative; overflow: visible}
.colint02 {padding-left:0.7em; padding-right:1.5em}
.colint03 {padding-left:0; padding-right:1.5em}
.texteflottant01 {font-family:'MO', sans-serif; font-weight: 400; font-size:7em; color:#b8562b; line-height:1.1em; display: block; position: absolute; bottom: 0; margin-bottom:-0.6em; line-height: 1.1em; right:0.25em}

.num01 {font-family:'MO', sans-serif; font-weight: 400; font-size:4.5em; color:#b8562b; line-height:1.1em; display: block}
.num02 {font-family:'MO', sans-serif; font-weight: 400; font-size:6em; color:#b8562b; line-height:1.1em; display: block}

.p01 {font-size: 1.3em; margin: 0; padding: 0; line-height: 1.4em}
.plargeurReduit {width: 80%}
.soustitre01 {font-size: 1.3em; margin: 0; padding: 0; line-height: 1.4em; font-weight: 400}
.soustitre02 {font-size: 1.8em; margin: 0; padding: 0; line-height: 1.5em; font-weight:300}

.ul01 {padding: 0; margin: 0}
.ul01 li {font-size: 1.15em; margin: 0; padding: 0; line-height: 1.4em; font-weight: 300; display: block; padding-left: 2em; position: relative; 
padding-top: 0.2em; padding-bottom: 0.2em}
.ul01 li b {position:absolute; top:0.3em; left: 0; width: 1.3em; display: block}
.ul01.ulicomini li {padding-left:1.2em;}
.ul01.ulicomini li b {width: 0.7em; top: 0.55em}

.BTlien {position: relative; display: inline-block; font-size: 1.15em; padding-right:3em; padding-left:1em; padding-top: 0.5em; padding-bottom: 0.5em; 
	background-color:#b4542c; color:#fff; border-radius: 0.7em}
.BTlien span {display: inline-block}
.BTlien b {position:absolute; top:0.7em; right:1.2em; width: 1.1em; display: block; transform-origin: 50% 50%}

.ext1 img {width: 100%; display: block}
.ext1 .imgmini {width:70%}

.BTgalerie {position:absolute; top: 0.8em; right: 0.8em; width: 1.2em; padding:0.7em; z-index:10; background-color: #FFFFFF; border-radius: 0.7em; 
	transform-origin: 50% 50%; cursor: pointer; letter-spacing: 0.025em}
.BTgalerie b {width: 100%; display: block; transform-origin: 50% 50%}

.BT {position: relative; display: inline-block; font-size: 1.3em; padding-left:1.8em; padding-top: 0.5em; padding-bottom: 0.2em; cursor: pointer}
.BT b {position:absolute; top:0.65em; left: 0; width: 1.1em; display: block}

.infos02 {position: relative}
.infos02 .num02 {position: absolute; top:0; margin-top: 0.2em; left: 40%; width:20%; text-align: center; overflow: visible; pointer-events:none; 
		z-index: 12}

.titre02 { position: relative; overflow: visible}
.titre02 .soustitre02 { float:left; display: inline-block; position: relative; z-index: 10; padding-right: 2em}
.titre02 .BT { float: right; position: relative; z-index: 11}

.margeGrille {padding-top: 15em; padding-bottom: 12em}
.grille {position: relative;}
.titregrille {position: absolute; top:-0.8em; left: 0%; width:100%; text-align: center; overflow: visible; pointer-events:none; 
	z-index: 12; font-family:'MO', sans-serif; font-weight: 400; font-size:6em; color:#b8562b; line-height:1.1em; display: block}
.grillebloc {width: 25%; position: relative; z-index: 10}
.grille1, .grille2, .grille3, .grille4, .grille5, .grille6, .grille7, .grille8 {float: left}
.grille .blocblanc {background-color: #FFFFFF; position: relative; height:200px; width: 100%; display: block; margin-bottom: 1.4em}
	.blocblanc span {position: absolute; top: 50%; margin-top: -0.6em; left: 0; width:100%; text-align: center; font-size:1.15em; color:#000}

.footer {position: relative; z-index: 1; overflow: hidden; padding-top: 9em}
#footerLogo {width:14em; margin-bottom: 6.5em; margin-left: auto; margin-right: auto; position: relative; z-index:10}
	#footerLogo img {width: 100%; display: block}

.footerInt {width: 90%; margin-left: auto; margin-right: auto; text-align: center; display: block}

.footer p {font-size: 1.3em; margin: 0; padding: 0; line-height: 1.4em; font-weight: 300; display: block; position: relative;  z-index: 10; 
		color:#fff; text-align: center; letter-spacing: 0.05em}
.footerBT {position: relative; z-index: 10; overflow: visible; margin-top:0.1em; display: inline-block; color: #fff; font-size: 1.6em; padding: 0.5em 0;  }
	.footerBT span { display: inline-block; position: relative; color: #fff; letter-spacing: 0.05em}
		.footerBT span i {position: absolute; bottom: 0em; width: 100%; height: 1px; background-color: #FFFFFF; opacity: 0.4; display: block; transform-origin: 50% 50%}
	.footerBT b {position: absolute; top:0.8em; left: -1.5em; width: 1em; display: block; transform-origin: 50% 50%}

.reseaux {padding-top:6.5em; padding-bottom: 12em}
	.reseaux li { display: inline-block; margin-left: 0.2em; margin-right: 0.2em}
	.reseaux li a {width:3.6em; display: block; position: relative; transform-origin: 50% 50%}
	.reseaux li a b {width: 100%; height: 100%; position: absolute; top: -1px; left: -1px; border: 1px solid #fff; opacity: 0.4; z-index: 10; 
		border-radius: 50%; transform-origin: 50% 50%}
	.reseaux li a img {width: 100%; display: block; position: relative; z-index: 11; transform-origin: 50% 50%}

.mentions {margin-bottom:3em; display: inline-block; color: #fff; font-size: 1.15em; letter-spacing: 0.04em; position: relative; z-index: 10}

.footerVisu {position: absolute; z-index: 1}
.footerVoile {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 2; opacity: 0.61}

.Zoomphoto {cursor: pointer}


#galerie {overflow: hidden}
.H #galerie {width: 100%; height: 100%; position: fixed; top: 0; left:0; z-index:10; display: none}
	.H #galerie img {visibility:hidden; display:block; width:auto; position:fixed; top:50%; left:50%; z-index: 10; cursor: pointer}

#fondGalerie {width: 100%; height: 100%; position: fixed; top: 0; left:0; background-color:#f4f3f0; z-index:1000; display: none}
#croixGalerie {width:80px; position: fixed; top:10px; right:10px; z-index:1000; cursor: pointer;display: none}
	#croixGalerie b {width:100%; display: block}
	#suivant { padding:0; position: fixed; width:90px; top: 50%; right:0; margin-top:-45px; z-index:1000;
		cursor: pointer; display: none}
	#suivant b {width:100%; display: block}
	#precedent { padding:0; width:90px; position: fixed; top: 50%; left:0; margin-top:-45px; z-index:1000;
		cursor: pointer; display: none}
	#precedent b {width:100%; display: block}


#galerie-complete-noscript { max-width: 90%; margin: 2em auto; font-size: 0.85em; color: #636363; }
#galerie-complete-noscript summary { cursor: pointer; font-weight: 400; padding: 0.5em 0; }
#galerie-complete-noscript ul { display: flex; flex-wrap: wrap; gap: 0.3em 1em; padding-top: 1em;}
#galerie-complete-noscript li { list-style: none;}
#galerie-complete-noscript a { color: #636363; text-decoration: none;}
#galerie-complete-noscript a:hover { text-decoration: underline;}


/**/
.contgeneralInt {width:64%; margin-left:auto; margin-right:auto; position:relative}
	.contgeneral-titre {background-color: #fff; padding:2em 0 3em 0}
		#logobloc { display: block; width:14em; border-radius: 0.7em; margin-bottom: 4em; margin-left: auto; margin-right: auto}
		#logobloc img {width: 100%; display: block}
		.contgeneral-titre h1 {font-size:2.8em; position: relative; padding-top:0.7em; font-weight:300; letter-spacing: 0.03em; color:#000; 
			line-height: 1.6em; }
		.contgeneral-titre h1 i {position:absolute; top:0; left:0; width:1.5em; height:2px; background-color:#000; transform-origin: 0 0; display: none}
		.contgeneral-titre h2 {font-size:1.3em; position: relative; padding-top:0.5em; font-weight:300; letter-spacing: 0.03em; color: #636363; 
			line-height: 1.6em}

	.contgeneral-contenu {padding: 3em 0 10em 0;background-color:#f4f3f0}
		.contgeneral-contenu h2 {font-size:1.8em; position: relative; padding-top:1.1em; font-weight:300; letter-spacing: 0.03em; color:#000; 
			line-height: 1.6em; margin-top: 1em}
		.contgeneral-contenu h2 i {position:absolute; top:0; left:0; width:1.5em; height:2px; background-color:#b8562b; transform-origin: 0 0}
		.contgeneral-contenu h3 {font-size:1.3em; position: relative; padding-top:0.7em; font-weight:300; letter-spacing: 0.03em; color:#292929; 
			line-height: 1.8em}
		.contgeneral-contenu p {font-size:1.1em; position: relative; padding-top:0.7em; font-weight:300; letter-spacing: 0.03em; color: #636363; 
			line-height:1.9em; padding-bottom:2em; padding-top:0.5em; margin-top: 0}
.contgeneral-contenu p strong {font-weight: 500; color:#3D3D3D}

.contgeneral-contenu p a {color: #636363; text-decoration: none}
.contgeneral-contenu p a.liengeneral {color: #1D1D1D; font-size: 1.2em; text-decoration:none; display: inline-block; padding-top:0.5em}
.contgeneral-contenu p a.liengeneral:hover {color: #646464; text-decoration: none}





	
	
	
@media screen and (max-width: 1750px) {	
#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size:0.85em}	
.H #load {width:40px; /*height:10px*/margin-top:-5px; margin-left:-20px;}
#remonte {width:40px; height:40px;}
#btmenu .rond { width:20px; height:20px; margin-top: -11px;}	
.hero {min-height:480px}
#croixGalerie {width:64px; top:8px; right:8px}
#suivant, #precedent  {width:70px; margin-top:-35px}
}
	
	
@media screen and (max-width:1500px) {	
#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size:0.8em}	
.hero {min-height:450px}
	.contgeneral-titre {padding:2em 0 3em 0;}
}

	
@media screen and (max-width:1340px) {
#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size: 0.72em}
#btmenu .rond { width:17px; height:17px; margin-top: -9px;}
.presentation p { font-size:2.5em}
.presentation-Suite p { font-size:1.7em}
	.contgeneral-titre {padding:2em 0 3em 0;}
}


@media screen and (max-width:1200px) {
#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu, .droits, .Haut {font-size: 0.65em}
#MOB2 {display: block}	
.col35 {float:left; width:35%; padding-top: 2em}
.texteflottant01 {font-size:7em}
.titre01 h3 {font-size:2.5em}
	.contgeneral-titre {padding:2em 0 3em 0;}
}


@media screen and (max-width:1100px) {
.col35 {float:left; width:40%; padding-top: 2em}
.plargeurReduit {width:90%}	
.texteflottant01 {font-size:6em}
.titre01 h3 {font-size:2.1em}
	.contgeneral-titre {padding:2em 0 3em 0;}
}







@media screen and (max-width:990px) {
#MOB2 {display:none}
#MOB {display: block}
.brmobo {display:none}
	.retMOB {clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float:none; display: block}	
#pageAccueil, #pageComplete, #intro, .hero, .navigation, #btmenu {font-size:0.8em}
.hero {min-height:480px}
.H #load {width:32px; /*height:8px*/margin-top:-4px; margin-left:-16px;}

#btmenu .rond { width:20px; height:20px; margin-top: -12px;}			
.navigation {width:100%; height:auto; position:relative; left:0; z-index: 980}
	.H .navigation {width:100%; height: 100%; position: fixed; left:102%; bottom:auto; top:0; z-index:980; overflow:hidden; transform-origin:0 0}
	.navigationInt {width:100%; height:100%; overflow: scroll; overflow-y: scroll; overflow-x: hidden;}
	.H .navigationInt {height:100%}		
#navvisu {width:30%; height:100%; position:absolute; top:0%; left:0%; transform-origin:0 0}
	#navvisuINT {position: relative; width: 100%; height: 100%; overflow: hidden}
	#navvisu img {position: absolute; top: 50%; left: 50%; width: auto}
#navcontenu {width:65%; position:relative; bottom:unset; right: unset; left:unset; margin-left:35%; padding-top: 2em}	
.navnom {padding-top: 2.5em}
.navcontmentions {position:relative; bottom:unset; right:unset; margin-left: 35%; padding-top: 2.5em; padding-bottom: 5em; display: block; text-align: left}	

/* Accueil */
#accrocheAcc {font-size: 0.85em; left:10%}	
.ext1 {width: 80%}
.ext1 .imgmini {width:100%}	
.col25 {float:none; width: 100%}
.col50 {float:none; width: 100%}
.col50G {float:none; width: 100%} .col50D {float:none; width:100%}	
.col35 {float:left; width:35%; padding-top: 2em}	

.MOBpar2 {float: left; width: 50%}
.MOBmasque {display: none}

.infos02 {position: relative; padding-top:7em}
.infos02 .num02 {top:0; margin-top: 0.2em; left:10%; width:auto; text-align:left; }	
.num02 {font-size:4.5em}
.soustitre01 {padding-bottom:1.5em; padding-top: 1.5em}
.reaext {margin-bottom:1.4em}
.titre01 h3 br { display: none}
.texteflottant01 {font-size:3.8em}
.plargeurReduit {width:100%; margin-top: 2em}

.grillebloc {width:50%}
	.grille1, .grille4, .grille6, .grille7 {float: left}
	.grille2, .grille3, .grille5, .grille8 {float: right}
.titregrille {font-size: 5.2em}	

#croixGalerie {width:60px; top: 20px; right:50%; margin-right: -30px}
	#suivant, #precedent {width:60px; margin-top: -30px}
	#croixGalerie, #suivant, #precedent  { background-color: #ffffff; border-radius: 0.7em}
	
.contgeneralInt {width:75%} 
	
}




@media screen and (max-width:710px) {
#MOB3 {display: block}
	#btmenu {right:0.4em; } 
#navcontenu {width:65%; margin-left:35%; padding-top: 4em}	
#liste1 {font-size:3em; }
.navnom {padding-top:4em; padding-bottom: 1em}
#liste2 {font-size: 1.2em; }
#accrocheAcc {font-size: 0.8em; left: 5%}

/* Accueil */
.ext1 {width: 90%}
.col35 {float:left; width:40%; padding-top: 2em}	
.texteflottant01 {font-size:3.5em}
	.infos02 .num02 {left:5%}
.p01 {font-size: 1.1em}
.soustitre01 {font-size: 1.1em}
	.plargeurReduit {width:100%; margin-top:1em}
.titregrille {font-size: 4.5em}		
	.blocblanc span {font-size:1em}
	
.contgeneralInt {width:86%} 
}


	
@media screen and (max-width:530px) {
.H #load {width:24px; /*height:6px*/margin-top:-3px; margin-left:-12px;}	
	/*body {font-size:0.9em}*/
	#btmenu {top:0.5em; right:0em}
	#btmenu #btmT span {padding: 0 1.2em 0 0; }
#navvisu {width:25%; }
	#navcontenu {width:70%; margin-left:30%; }
	.navcontmentions {margin-left:30%}
#liste1 {font-size:2.9em; }
.navnom {padding-top:4em; padding-bottom: 1em; font-size:1em;}
#liste2 {font-size: 1.1em; }

	
#introLogo {width:12em; margin-left:-6em; }	
#heroLogo {width:12em; margin-left:-6em; margin-top:-4.362em;/*0.727*/}	
#logobloc { width:12em}
	#accrocheAcc {font-size: 0.6em}
#footerLogo {width: 12em}	
/* Accueil */
.col35 {float:left; width:50%; padding-top:0.5em}	
.MOBpar2 {float: none; width: 100%}
.MOB3par2 {float: left; width: 50%}
.MOBmasque {display: none}
.p01 {padding-bottom: 1.5em; font-size: 1.4em}
.soustitre01 {font-size: 1.4em}
	
.infos02 {position: relative; padding-top:7em}
.infos02 .num02 {position: absolute; top:0; margin-top: 0.2em; left:5%; width:auto; text-align:left; overflow: visible; pointer-events:none; z-index: 12}	
.num02 {font-size:4.5em}
.soustitre01 {padding-bottom:1.5em; padding-top: 1.5em}
.reaext {margin-bottom:1.4em}
.titre01 h3 br { display: none}
.texteflottant01 {font-size:4em}
.plargeurReduit {width:100%; margin-top: 2em}
.margeGrille {padding-top: 9em; padding-bottom: 7em}	
.titregrille {font-size: 4em}
.blocblanc span {font-size:0.85em}

.footer p {font-size: 1.2em}
.footerBT {font-size: 1.5em}
	.reseaux li a {width:3.4em}
.mentions {font-size: 1.05em}

	
.contgeneralInt {width:86%; font-size: 0.9em} 
	.contgeneral-titre {padding:2em 0 3em 0;}
}



@media screen and (max-width: 380px) {
#navvisu {width:20%; }
	#navcontenu {width:75%; margin-left:25%; }
	.navcontmentions {margin-left:25%}
#liste1 {font-size:2.7em; }
.navnom {font-size:0.95em;}
#liste2 {font-size: 1em; }
#introLogo {width:10em; margin-left:-5em; }	
#heroLogo {width:10em; margin-left:-5em; margin-top:-3.635em;/*0.727*/}	
#logobloc { width:10em}
	#accrocheAcc {font-size: 0.6em}
#footerLogo {width: 10em}
.p01 {padding-bottom: 1.5em; font-size: 1.3em}
.soustitre01 {font-size: 1.3em}	
.texteflottant01 {font-size:4em}
	.titregrille {font-size: 3.5em}
	.blocblanc span {font-size:0.8em}
.footer p {font-size: 1.05em}
.footerBT {font-size: 1.3em}
	.reseaux li a {width:3.2em}
.mentions {font-size: 0.95em}
.contgeneralInt {width:86%; font-size: 0.8em} 
	
}
@media screen and (max-width: 350px) {
	#accrocheAcc {font-size: 0.6em}
	.titre01 h3 {font-size:1.9em}
.p01 {padding-bottom: 1.5em; font-size: 1.2em}
.soustitre01 {font-size: 1.2em}	
.texteflottant01 {font-size:3.7em}	
}