/* Auteur du developpement sur-mesure pour Virginie Lançon : 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:'MonaSans';font-style: normal;font-weight: 200;
  src: url('../Fontes/mona-sans-200.eot'); 
  src: local(''),
       url('../Fontes/mona-sans-200.eot?#iefix') format('embedded-opentype'),
	   url('../Fontes/mona-sans-200.woff2') format('woff2'), 
       url('../Fontes/mona-sans-200.woff') format('woff'), 
       url('../Fontes/mona-sans-200.ttf') format('truetype'); }

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

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


body {font-size: 1em; color:#000; font-family:'MonaSans', sans-serif; margin:0; font-weight:200; 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;}

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

* { outline: none;}
.ret {clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float: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:1.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}
.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}
.margH12 {margin-top:12em} .paddH12 {padding-top:12em}
.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);}
		#remonte b {width:100%; display: block; position:absolute; top:0%; left:0%; display:block;transform-origin: 50% 50%;}
.H #remonte {visibility: hidden}

.droits {display: inline-block; position: fixed; bottom: 0; left:14%; color:#000; background-color: #FFFFFF; 
	z-index: 80; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05);}
	.droits span {display: inline-block; padding: 1em; font-size: 0.85em}

.popup {position: fixed; z-index:99999; top: 20%; left:50%; margin-left: -300px; width: 600px; height:auto; background-color: #FFFFFF; border-radius:7px; 
display: none}
.popup .popupInt {padding:4em 3em 3em 3em; text-align: center}
.popup .ico {width:2.5em; height:auto; background-color: #E4E4E4; margin:0 auto; border-radius: 50%}
.popup .ico b {width:100%; height:auto}
.popup strong {font-weight:400; font-size: 1.2em; padding-top: 1.5em; display: block}
.popup p {font-weight:300; font-size: 1em; padding: 1em 0 0 0; margin: 0; line-height: 1.5em; display: block}
.popup i {font-weight:300; font-size: 1em; padding-top:0.6em; line-height: 1.5em; font-style: italic; display: block}
.btcompris {border: 1px solid #989898; background-color:#F9F9F9; font-weight: 300; font-size: 1em; padding: 1em 1.5em; border-radius: 2em; 
		display: inline-block; margin-top: 1.5em; cursor: pointer}
.btcompris:hover {background-color: #E1E1E1}
.popupFond {position: fixed; z-index:99998; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5); cursor: pointer;display: none}

.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;}


.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;}

.reaext {width: 100%; display: block; overflow: hidden}
.reaext img {width: 100%; display: block; position: relative; z-index: 9}
.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: 9999; cursor: pointer; color:#000;}
	#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: 90}
		/*#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: #000; 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: #000; z-index: 9998}
	.H .navigation {width:100%; height: 100%; position: fixed; left:102%; bottom: 0; z-index:9998; 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:20%; transform-origin:0 0}
	#navvisuINT {position: relative; width: 100%; height: 100%; overflow: hidden; opacity:0.2}
	#navvisu img {position: absolute; top: 50%; left: 50%; width: auto}

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

#liste1 {font-size:4em; }
#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;; text-transform: uppercase; 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:#626262; 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:#626262; 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:#626262; height: 1px; z-index: 10}


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





/*font-size: 1vw; .Haut {padding-top:6em; float: right; margin-right: 20%}
.H .Haut {visibility: hidden}
	#logo {width:auto; display:inline-block; text-transform: uppercase; color: #000000; font-size:1.35em;  
		margin-bottom:5em; padding-bottom: 1em; position: relative; }
	#logo strong {display:inline-block; height: auto; font-size:5em; line-height:1.4em; float: left;
		font-weight: 200; text-align: left}
	#logo span {display:inline-block; height: auto;  font-size:2em; line-height: 1.4em; margin-top:3.5em;float: left;
		font-weight: 200; text-align: left }
	#logo b {font-weight: 200}
	#logo .ligne {width: 100%; background-color: #000000; height: 1px; position: absolute; bottom: 0; left: 0; display: block}*/
.Haut {margin-left:3%; padding-top:5em; margin-bottom: 2em}
.H .Haut {visibility: hidden}
	#logo {width:auto; display:inline-block; text-transform: uppercase; color: #000000; font-size:1.7em;  
		position: relative; }
	#logo strong {display:block; height: auto; font-size:5em; line-height:1.3em; 
		font-weight: 200; text-align: left}
		#logo strong b {font-weight: 200}
	#logo span {display:block; height: auto;  font-size:1.6em; line-height: 1.2em; 
		font-weight: 200; text-align:left}
	#logo b{font-weight: 200}
	

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

/* Accueil */
.ligne01 {width:83%; background-color: #000000; height: 1px; display: block; margin:0 0 6em 3%}
.ligne02 {width:100%; background-color: #000000; height: 1px; display: block; margin:2em 0 0 0}
.rea00 {width:72%; margin-left: auto; margin-right: auto; position: relative}

.intro01 {display:block; margin-top:4em; color:#000; width:100%; font-size: 1.6em; font-weight:300;  
	line-height: 1.5em}
	.intro01 span {display:inline-block; float:left; margin-left:14%}
	.intro01 p {margin: 0; padding: 0; display:inline-block; float:left; width:40%;/*JS*/ }

#galerie {width: 100%; padding-top: 2em; margin-top: 9em}
.contINT {margin-left: 3%; width: 83%}
.contINT h2, .contenu h2 {font-size:4em; text-transform: uppercase; font-weight: 200}
.contINT h3, .contenu h3 {font-size:2.5em; text-transform: uppercase; font-weight: 200; padding-top: 1.5em}
.contINT h4, .contenu h4 {font-size:2.5em; text-transform: uppercase; font-weight: 200; padding-top:2em}
.contenu {width: 72%; margin-left: auto; margin-right: auto}
.contG {float: left; width: 46%}
.contD {float: right; width: 46%}
.contenu ul {font-size: 1.2em; padding-top: 1.5em;}
.contenu li {padding-bottom: 0.9em; position: relative; padding-left: 1.8em}
	.contenu li i {position: absolute; top:1em; left:0; width: 1.2em; height:1px; background-color:#B5B5B5}
.contenu li strong {font-size: 1em; font-weight:300;line-height: 1.3em}
.contenu li span {font-size: 0.8em; font-weight:300;line-height: 1.3em; color:#515151; display: block}
.contenu .visuel01 {width: 100%; display: block}

.photo {margin-bottom:9em}
.rea01 {width: 48%}
.rea02 {width: 48%}
.rea03 {width: 48%}
.reaG {float: left} .reaD {float: right}

#actualites {width: 100%; padding-top: 2em; margin-top: 9em}

#apropos {background-color:#f5f5f5; padding-top:6em; margin-top:16em}
.portrait {width:20%; display: block; margin-bottom: 5em; float: left}
.aproposext {width: 100%; display: block; overflow: hidden}
.aproposext img {width: 100%; display: block; position: relative; z-index: 2}
.aproposext .cache {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color:rgba(255, 255, 255, 0); display: block; z-index: 10}

.presentation {margin-left:7%; width: 70%; display: block; float: left; margin-bottom: 5em}
.presentation p { font-size:2.8em; color:#000; margin: 0; padding: 0; font-weight:200; padding: 0; margin: 0}

.presentation-Suite {width:70%}
.presentation-Suite p { font-size:1.8em; color:#000; margin: 0; padding: 0; font-weight:200; margin:0; padding: 0 0 1.2em 0}

#aproposVisuels {position: relative; width: 100%; height: auto}
#aprov01 {/*72% total / 14 à gauche*/ width: 20%; margin-left: 66%; position: relative; z-index: 10}
#aprov02 {position: absolute; bottom:0; left: 2%; width: 16%; z-index: 10}
#aprov03 {position: absolute; bottom:0; left: 20%; width: 16%; z-index: 10}
#aprov04 {position: absolute; bottom:0; left: 38%; width: 16%; z-index: 10}
#aprofond {background-color:#f5f5f5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1}

#contact { background-color: #FFFFFF; padding-bottom:5em}
.contactint {width:72%; margin-left: auto; margin-right: auto}
#contact h3 {font-size: 1em; margin-top:8em; margin-bottom:2.5em; font-weight:300;}
#contactliste {font-size:2.3em;}
#contactliste li {display: block}
#contactliste li a {color:#000; font-weight: 300; line-height: 1.2em; padding-bottom: 0.05em; display: inline-block; position: relative}
#contactliste li a span {display: inline-block; position: relative; z-index: 11} 
#contactliste li a b {color:#919191; display: inline-block; padding-right:0.5em; position: relative; z-index: 11}
#contactliste li a i {position: absolute; bottom: 0.1em; left: 0; width:0; background-color:#919191; height: 1px; z-index: 10}
.contactfilet {width: 100%; display: block; background-color:#919191; height: 1px; position: relative; transform-origin: 0 0; margin-bottom: 2em}

.contactreseaux {float:left; display: inline-block; margin-bottom: 2em}
.contactreseaux li {display: inline-block; margin-right:2em} 
.contactreseaux li a, .contactmentions li a {display: inline-block; color:#000; position: relative; font-size:1em; font-weight: 300; padding:1em 0}
.contactreseaux li a:hover, .contactmentions li a:hover {color:#919191}
.contactreseaux li a i, .contactmentions li a i {display:block; width: 100%; height: 1px; background-color:#919191; position: absolute; bottom: 0.7em; left: 0}

.contactmentions {float: right; display: inline-block; margin-bottom: 2em}
.contactmentions li {display: inline-block; margin-left:1.2em} 


.contgeneralInt {width:64%; margin-left:auto; margin-right:auto; position:relative}
	.contgeneral-titre {background-color: #fff; padding: 6em 0 3em 0; margin-top:47px;}
		.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}
		.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:#f7f8f8}
		.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:#A0A0A0; 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 (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}      }	



	
	
	
@media screen and (max-width: 1750px) {	
#pageComplete, .navigation, #btmenu, .droits, .Haut {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;}	
}
	
	
@media screen and (max-width:1500px) {	
#pageComplete, .navigation, #btmenu, .droits, .Haut {font-size:0.8em}	
	.contgeneral-titre {padding:5em 0 3em 0;}
}

	
@media screen and (max-width:1340px) {
#pageComplete, .navigation, #btmenu, .droits, .Haut {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:4em 0 3em 0;}
}


@media screen and (max-width:1200px) {
#MOB2 {display: block}	
.Haut {font-size:0.65em}
.presentation p { font-size:2.4em}
.presentation-Suite p { font-size:1.6em}
	.contgeneral-titre {padding:3em 0 3em 0;}
}


@media screen and (max-width:1100px) {
.Haut {font-size:0.55em}
	.contgeneral-titre {padding:2em 0 3em 0;}
}







@media screen and (max-width:990px) {
#MOB2 {display:none}
#MOB {display: block}
.brmobo {display:none}
#pageComplete, .navigation, #btmenu, .droits, .Haut {font-size:0.8em}
.Haut {font-size:0.4em}
.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: 9998}
	.H .navigation {width:100%; height: 100%; position: fixed; left:102%; bottom:auto; top:0; z-index:9998; 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 */
.ligne01 {width:87%; margin:0 0 6em 3%}
.ligne02 {width:100%; margin:2em 0 0 0}
.rea00 {width:80%}
.intro01 {margin-top:4em; font-size: 1.3em}
	.intro01 span {margin-left:10%}
#galerie {padding-top: 2em; margin-top:8em}
.contINT {margin-left: 3%; width:87%}
.contINT h2, .contenu h2 {font-size:3em}
.contINT h3, .contenu h3 {font-size:2em}
.contINT h4, .contenu h4 {font-size:2em}
.contenu {width:80%}
.contG {float: left; width: 47%}
.contD {float: right; width: 47%}
.contenu ul {font-size: 1.1em}
.contenu li {padding-left: 1.4em}
	.contenu li i {width: 0.8em}
.photo {margin-bottom:7em}
.rea01 {width: 47%}
.rea02 {width: 47%}
.rea03 {width: 47%}
#actualites {margin-top:6em}
#apropos {padding-top:5em; margin-top:14em}
.presentation {margin-left:7%; width: 73%; display: block; float: left; margin-bottom: 5em}
.presentation p { font-size:1.8em}
.presentation-Suite {width:73%}
.presentation-Suite p { font-size:1.3em}
#aprov01 {width: 20%; margin-left: 70%; position: relative; z-index: 10}
	
.contactint {width:80%; margin-left: auto; margin-right: auto}
	#contactliste {font-size:2em;}
.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; }

.droits {left:0%}
.popup {top:10%; left:10%; margin-left:0; width: 80%}
.popup .popupInt {padding:3em 2em 2em 2em}

.Haut {margin-left:7%; padding-top:7em; margin-bottom:3em}
	#logo {font-size:1.8em}	
	#logo strong {font-size:5em; line-height:1em;}
		#logo strong b {display: block}
	#logo span {font-size:1.4em; line-height: 1.4em; padding-top: 0.2em}

.ligne01 {width:86%; margin:0 0 5em 7%}
.ligne02 {width:100%; margin:2em 0 0 0}
.rea00 {width:86%; }
.intro01 {font-size: 1.1em}
	.intro01 span {margin-left:7%}
#galerie {margin-top: 6em}
.contINT {margin-left: 7%; width: 86%}
.contINT h2, .contenu h2 {font-size:3.6em; }
.contINT h3, .contenu h3 {font-size:2.2em; padding-top:2em}
.contINT h4, .contenu h4 {font-size:2.2em; padding-top:2em}
.contenu {width:86%}
.contG {float:none; width:100%}
.contD {float:none; width:100%}
.contenu ul {font-size: 1.1em}
.photo {margin-bottom:4em}
.rea01 {width: 47%}
.rea02 {width: 47%}
.rea03 {width: 47%}
.reaG {float: left} .reaD {float: right}
#actualites {margin-top:6em}
#apropos {padding-top:5em; margin-top:9em}
.portrait {width:50%; margin-bottom:3em; float:none}
.presentation {margin-left:0%; width: 100%; float:none; margin-bottom: 3em}
.presentation p { font-size:2em}
.presentation-Suite {width:100%; padding-bottom: 3em}
.presentation-Suite p {font-size:1.4em; padding: 0 0 1.2em 0}

#aproposVisuels {padding-bottom: 15em}
#aprov01 {width:45%; margin-left:50%; position: relative; }
#aprov02 { left: 5%;      width: 26.67%; }
#aprov03 { left: 36.67%;  width: 26.67%; }
#aprov04 { left: 68.33%;  width: 26.67%; }	

.contactint {width:86%;}
#contact h3 {font-size: 1.3em; margin-top:6em; margin-bottom:2.5em; }
#contactliste {font-size:1.6em;}
.contactfilet {margin-bottom: 2em}

.contactreseaux {float:none; display:block; margin-bottom:0em}
.contactreseaux li {display: inline-block; margin-right:2em} 
.contactmentions {float:none; display:block; margin-bottom: 2em}
.contactmentions li {display: inline-block; margin-left:0em} 

.contgeneralInt {width:86%} 

	
}


	
@media screen and (max-width:530px) {
	/*body {font-size:0.9em}*/
	#btmenu {top:0.5em; right:0em}
	#btmenu #btmT span {padding: 0 1.2em 0 0; }
#navvisu {width:30%; }
	#navcontenu {width:80%; margin-left:20%; }
	.navcontmentions {margin-left:20%}
#liste1 {font-size:2.9em; }
.navnom {padding-top:4em; padding-bottom: 1em; font-size:1em;}
#liste2 {font-size: 1.1em; }
.popup {font-size: 0.8em}
.Haut {margin-left:5%}
	#logo {font-size:1.6em}	
.intro01 {font-size:0.95em}
#galerie {margin-top:5em}
.contINT h2, .contenu h2 {font-size:3.1em; }
.contINT h3, .contenu h3 {font-size:1.8em; padding-top:2em}
.contINT h4, .contenu h4 {font-size:1.8em; padding-top:2em}
.contenu ul {font-size: 1em}
.photo {margin-bottom:4em}
.rea01 {width:100%}
.rea02 {width:100%}
.rea03 {width:100%}
.reaG {float: none} .reaD {float: none}
#actualites {margin-top:6em}
#apropos {padding-top:4em; margin-top:8em}
.portrait {width:50%}
.presentation p { font-size:1.5em}
.presentation-Suite p {font-size:1.2em}
#aproposVisuels {padding-bottom: 11em}
#contact h3 {font-size: 1.1em; margin-bottom:2em}
#contactliste {font-size:1.2em;}
.contgeneralInt {width:86%; font-size: 0.9em} 
	.contgeneral-titre {padding:0em 0 3em 0;}
}

@media screen and (max-width: 380px) {
#navvisu {width:30%; }
	#navcontenu {width:90%; margin-left:10%; }
	.navcontmentions {margin-left:10%}
#liste1 {font-size:2.8em; }
.navnom {font-size:0.95em;}
#liste2 {font-size: 1em; }
	.droits span {font-size: 0.7em}
.popup {font-size: 0.7em}
	.popup .popupInt {padding:2em 1.2em 2em 1.2em}
	.popup strong {padding-top: 1em}
.Haut {margin-left:5%}
	#logo {font-size:1.4em}	
.intro01 {font-size:0.95em}
#galerie {margin-top:5em}
.contINT h2, .contenu h2 {font-size:2.7em; }
.contINT h3, .contenu h3 {font-size:1.7em; padding-top:2em}
.contINT h4, .contenu h4 {font-size:1.7em; padding-top:2em}
.contenu ul {font-size: 1em}
.photo {margin-bottom:3em}
#actualites {margin-top:6em}
#apropos {padding-top:4em; margin-top:8em}
.portrait {width:50%}
.presentation p { font-size:1.3em}
.presentation-Suite p {font-size:1.05em}
#aproposVisuels {padding-bottom: 10em}
#contact h3 {font-size:1em; margin-bottom:2em}
#contactliste {font-size:1em;}
.contgeneralInt {width:86%; font-size: 0.8em} 
}
@media screen and (max-width: 360px) {
	
}