/* Auteur du developpement sur-mesure pour Quentin Sauner-Leroy : 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:'cormorant';font-style: normal;font-weight: 400;
  src: url('../Fontes/cormorant-garamond-400.eot'); 
  src: local(''),
       url('../Fontes/cormorant-garamond-400.eot?#iefix') format('embedded-opentype'),
	   url('../Fontes/cormorant-garamond-400.woff2') format('woff2'), 
       url('../Fontes/cormorant-garamond-400.woff') format('woff'), 
       url('../Fontes/cormorant-garamond-400.ttf') format('truetype'); }
@font-face {font-family:'cormorant';font-style:italic;font-weight: 400;
  src: url('../Fontes/cormorant-garamond-400-italic.eot'); 
  src: local(''),
       url('../Fontes/cormorant-garamond-400-italic.eot?#iefix') format('embedded-opentype'),
	   url('../Fontes/cormorant-garamond-400-italic.woff2') format('woff2'), 
       url('../Fontes/cormorant-garamond-400-italic.woff') format('woff'), 
       url('../Fontes/cormorant-garamond-400-italic.ttf') format('truetype'); }


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

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

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


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

body {font-size: 1.3em;} 
#btmenu .rond { width:30px; height:30px; margin-top: -15px;}
@media screen and (max-width: 2300px) {  
	body {font-size: 1.2em}
	#btmenu .rond { width:28px; height:28px; margin-top: -14px;}
}
@media screen and (max-width: 2100px) {  
	body {font-size: 1.1em}  
	#btmenu .rond { width:26px; height:26px; margin-top: -13px;}
}
@media screen and (max-width: 1950px) {  
	body {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:0.8em; 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}
.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}

.tirait {font-size: 0.8em; font-weight: 100;font-family:'lexend', sans-serif;}

#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}

.curseur{ width: 20px; height: 20px; z-index: 99999; background:#dfcd99; 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;}



.Haut {padding-top: 1.8em}
.H .Haut {visibility: hidden}
	#logo {width:22.6em; margin-left: auto; margin-right: auto; display: block}
	#logo img {display: block; width:100%; height: auto}
	
#btmenu { position: fixed; top:0.5em; right:1.4em; padding: 1em; z-index: 9999; cursor: pointer;  }
	#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; color:#000;}
		/*#BtmTs2 {position: relative; top:0; left: 0}*/
		#BtmTs2 {position: absolute; top:1.5em; left: 0; color:#ba9230}
		#btmenu #btmT span b {display: inline-block; position: relative; font-weight:300}
		#btmenu #btmT #BtmTs2 b {visibility: hidden}

		#btmenu .rond { display:block; background-color: #ba9230; 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: #f1f2f2; 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:25%; 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: 10%; left: 50%}

#liste1 {font-size:4em; font-family:'cormorant', sans-serif;}
#liste1 li {display: block; margin-top: 0; margin: 0;}
#liste1 li a {color:#000; line-height: 1.2em; display: inline-block; position: relative; padding:0.05em 0 0.05em 0;}
#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:#ba9230; height: 1px; z-index: 10}

.navnom {font-size: 1.1em; font-weight:300; padding-top:6em; padding-bottom: 1em; display: block}

#liste2 {font-size: 1.9em; font-family:'cormorant', sans-serif;}
#liste2 li {display: block}
#liste2 li a {color:#000; font-weight: 400; line-height: 1.2em; padding-bottom: 0.05em; display: inline-block; position: relative}
#liste2 li a span {display: inline-block; position: relative; z-index: 11} 
#liste2 li a b {color:#ba9230; display: inline-block; padding-right:0.5em; position: relative; z-index: 11}
#liste2 li a i {position: absolute; bottom: 0.1em; left: 0; width:0; background-color:#ba9230; height: 1px; z-index: 10}


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




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


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

.coul01 {color:#ba9230; font-style: italic}
.coulico01 {fill:#ba9230;}


/* Accueil */
.intro01 {display: inline-block; margin-top: 5.5em; margin-left: 6%; font-family:'cormorant', sans-serif; color:#000}
	.intro01 h1 {font-size: 3em; font-weight: 400;}

.intro01 .btsuite {margin-top:1.5em}

.btsuite {color:#ba9230; position: relative; padding-left:2.4em; display: inline-block; font-family:'cormorant', sans-serif; font-size:1em; 
	cursor: pointer; padding-top: 1.5em; padding-bottom: 1.5em}
.btsuite span {display:inline-block; font-size: 1.6em; font-style: italic}
.btsuite i {display:inline-block; position: absolute; left: 0; width:1.4em; top:1.8em; transform-origin: 50% 50%}


.rea {margin-bottom: 8em}
.rea01 {width: 40%; margin-left: auto; margin-right: auto; position: relative}
.reaext {width: 100%; display: block; overflow: hidden}
.reaext img {width: 100%; display: block}

.reatitre {display: inline-block; position: relative; padding-bottom:2.6em}
.reatitre01 {display: inline-block; font-size: 3.2em; font-family:'cormorant', sans-serif; color:#000; padding-top: 0.3em}
.reatitre02 {display: inline-block; font-size: 1em; font-weight: 300; padding-top: 0.8em}
.realigne {width: 100%; height: 1px; background-color: #ba9230; position: absolute; bottom: 0; left: 0}
.readetail{margin-top:0em}
.rea .btsuite {font-size:0.85em; margin-top:0em; position: relative; z-index: 11}

.readetailsuite {padding-top:1em; width: 100%; font-size: 1.15em; font-weight: 300; line-height: 1.6em; position: relative; z-index: 10; 
overflow: hidden; color:#303030}
.readetailsuite p {padding: 0 0 1em 0; margin: 0}
.readetailsuite p i {color:#ba9230; font-style: normal}

.rea02bis {width:34%; position: relative; float: right}
.rea02 {width:55%; float: left; position: relative; margin-top:10em}
.rea02.sansM {margin-top:3em}
.rea02 .reatitre, .rea02 .readetail {margin-left: 3em}
.rea02 .readetail, .rea03 .readetail {width: 70%}

.rea03bis {width:34%; position: relative; float:left}
.rea03 {width:55%; float:right; position: relative; margin-top:10em}

.intro02 {display:block; margin-top:3em; text-align: center; width: 100%;  font-family:'cormorant', sans-serif; color:#000; padding-bottom:3.5em; margin-bottom: 7em; position: relative}
	.intro02 h2 {font-size: 3em; font-weight: 400;}
	.intro02 .trait {width:8em; height: 1px;background-color: #ba9230; position: absolute; bottom: 0; left:50%; margin-left:-4em; transform-origin: 50% 50%}

#apropos {background-color:#f1f2f2; margin-top: 6em; padding-top: 6em}
.portrait {width: 40%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 5em}
.aproposext {width: 100%; display: block; overflow: hidden}
.aproposext img {width: 100%; display: block}
#apropos h2 {font-size:9em; font-size:7vw; text-align: center; color:#dfcd99; font-family:'cormorant', sans-serif;}



.presentation {margin-left: 18%; display: block}
.presentation h3 {font-size: 1em; text-transform: uppercase; margin-top:8em; margin-bottom:2.5em; font-weight:300}
.presentation p { font-size: 3.1em; font-family:'cormorant', sans-serif; color:#000; margin: 0; padding: 0}

#aproposVisuels {position: relative; width: 100%; height: auto}
#aprov01 {width: 20%; margin-left: 65.8%; position: relative; z-index: 10}
#aprov02 {position: absolute; bottom:0; left: 0; width: 16%; z-index: 10}
#aprov03 {position: absolute; bottom:0; left: 18%; width: 16%; z-index: 10}
#aprov04 {position: absolute; bottom:0; left: 36%; width: 16%; z-index: 10}
#aprofond {background-color:#f1f2f2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1}

#contact { background-color: #FFFFFF; padding-bottom:3em}
.contactint {width:64%; margin-left: auto; margin-right: auto}
#contact h3 {font-size: 1em; margin-top:8em; margin-bottom:2.5em; font-weight:300}
#contactliste {font-size: 3em; font-family:'cormorant', sans-serif;}
#contactliste li {display: block}
#contactliste li a {color:#000; font-weight: 400; 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:#ba9230; 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:#ba9230; height: 1px; z-index: 10}
#contact p {font-size: 1.6em; font-family:'cormorant', sans-serif; padding-top: 2em; margin: 0; line-height: 1.8em; padding-bottom: 2em}
.contactfilet {width: 100%; display: block; background-color:#eadec0; 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 {display: inline-block; color:#000; position: relative; font-size:1em; font-weight: 300; padding:1em 0}
.contactreseaux li a:hover {color:#ba9230}
.contactreseaux li a i {display:block; width: 100%; height: 1px; background-color: #ba9230; position: absolute; bottom: 0.7em; left: 0}

.contactmentions {float: right; display: inline-block; margin-bottom: 2em}
.contactmentions a {display: inline-block; color:#000; position: relative; font-size:1em; font-weight: 300; padding: 1em 0}
.contactmentions a:hover {color:#ba9230}

.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:400; letter-spacing: 0.03em; color:#000; 
			line-height: 1.6em; font-family:'cormorant', sans-serif; }
		.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}
		.contgeneral-contenu h2 i {position:absolute; top:0; left:0; width:1.5em; height:2px; background-color:#ba9230; 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:3em; 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: underline; display: inline-block; padding-top:0.5em}
.contgeneral-contenu p a.liengeneral:hover {color: #646464; text-decoration: none}



@media screen and (min-width:2300px) and (max-width:5000px) and (min-height:750px) and (max-height:880px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:2300px) and (max-width:5000px) 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:5000px) 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:650px) and (max-height:800px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:1750px) and (max-width:2300px) and (min-height:550px) and (max-height:650px) {   .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:550px) {   .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:490px) and (max-height:560px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:1500px) and (max-width:1750px) and (min-height:430px) and (max-height:490px) {   .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:460px) and (max-height:530px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:1340px) and (max-width:1500px) and (min-height:430px) and (max-height:460px) {   .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:420px) and (max-height:480px) {   .navnom {padding-top:2em}       }
@media screen and (min-width:990px) and (max-width:1340px) and (min-height:360px) and (max-height:420px) {   .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) {	
body {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) {	
body {font-size:0.8em}	

}



	
@media screen and (max-width:1340px) {
body {font-size: 0.72em}
#btmenu .rond { width:17px; height:17px; margin-top: -9px;}
	
}






@media screen and (max-width:1200px) {
#MOB2 {display: block}		
	
}

@media screen and (max-width:1100px) {
	.presentation p {font-size:2.5em; }
	#contactliste {font-size:2.5em;}
	#navvisu {height: 80%;left:20%;}
	#navcontenu {width:50%;left: 45%}
	
}







@media screen and (max-width:990px) {
#MOB2 {display:none}
#MOB {display: block}
.brmobo {display:none}
body {font-size:0.8em}
.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}	
	
.intro01 {margin-top: 5.5em; margin-left:15%; width:75%}
#projets {margin-top:4em} 	
.rea {margin-bottom:8em}
.rea02, .rea03 {margin-top:10em}  .rea01 {width:70%; }
.rea02bis {margin-left:50%; width:50%; float: none}
.rea02 {width:85%; float: none; margin-top:5em}
.rea02.sansM {margin-top:3em}
.rea02 .reatitre, .rea02 .readetail  {margin-left: 3em}
.rea02 .readetail, .rea03 .readetail {width: 90%}
.rea03bis {width:50%;  float:none}
.rea03 {margin-left: 15%;  width:85%; float:none; margin-top:5em}
	
.intro02 {width:90%; margin-left: auto; margin-right: auto}
.presentation {margin-left:10%; display: block; width: 80%; padding-bottom: 3em}
.contactint {width:80%; margin-left: auto; margin-right: auto}	
.contgeneralInt {width:75%} 
	
	
		
	
}




@media screen and (max-width:710px) {
#MOB3 {display: block}
	#btmenu {right:0.4em}
.intro01 {margin-left:10%; width:80%}
		.intro01 h1, .intro02 h2 {font-size:2.6em}
		.reatitre01 {font-size:2.8em}
.rea01 {width:80%; }
.rea02 {width:90%}
.rea02 .readetail, .rea03 .readetail {width: 90%}
.rea03bis {width:50%;}
.rea03 {margin-left: 10%;  width:90%}
	
.intro02 {width:90%; margin-left: auto; margin-right: auto}
.portrait {width:60%; margin-bottom: 5em}
.presentation {margin-left:10%; display: block; width: 80%; padding-bottom: 3em}
	.presentation p {font-size:2em; }
	#contactliste {font-size:2em;}
	
.contactreseaux {float:none; display:block; margin-bottom: 2em}
.contactmentions {float: none; display:block; margin-bottom: 2em}

.contactint {width:80%; margin-left: auto; margin-right: auto}	
.contgeneralInt {width:75%} 

	
}


	
@media screen and (max-width:530px) {
	/*body {font-size:0.9em}*/
	#btmenu #btmT span {padding: 0 1.2em 0 0; }
	
#liste1 {font-size:3.2em; }
.navnom {font-size: 1em; padding-top:6em}
#liste2 {font-size: 1.2em}

.Haut {padding-top:4em}
#logo {width:16em}
	
.intro01 {margin-top: 5.5em; margin-left: 6%; width:90%}
	.intro01 h1 {font-size:2.4em; font-weight: 400;}
	
	
.intro02 {width:90%; margin-left: auto; margin-right: auto} 
.rea01 {width:90%; }
.rea02 {width:95%}
.rea02bis {margin-left:35%; width:65%}
.rea02 .reatitre, .rea02 .readetail  {margin-left:5.2%}	
.rea02 .readetail, .rea03 .readetail {width: 90%}
.rea03bis {width:65%;}
.rea03 {margin-left: 5%;  width:95%}
	
.intro02 {width:90%; margin-left: auto; margin-right: auto}
.portrait {width:70%; margin-bottom: 5em}
.presentation {margin-left:5%; display: block; width: 90%; padding-bottom: 3em}
	.presentation p {font-size:1.8em; padding-bottom:1.5em}
	#contactliste {font-size:1.6em;}
	
#apropos h2 {font-size:4em; text-align: center; color:#dfcd99; font-family:'cormorant', sans-serif;}
#aproposVisuels {padding-bottom: 15em}
#aprov01 {width:50%; margin-left:45%; position: relative; }
#aprov02 {left: 0; width: 25%; }
#aprov03 {left: 35%; width: 25%; }
#aprov04 {left: 70%; width: 25%; }
	
.contactint {width:90%; margin-left: auto; margin-right: auto}	
	#contact p {font-size: 1.2em}
	
.contgeneralInt {width:75%} 
.contgeneralInt {width:90%; font-size: 0.9em} 	
}

@media screen and (max-width: 380px) {
	#logo {width:15em}
	#navvisu {width:25%; }
	#navcontenu {width:70%; margin-left:30%; }	
	.navnom {padding-top:4em}
	.navcontmentions {margin-left: 30%}
	#liste1 {font-size:3em; }
	.navnom {font-size: 0.9em; padding-top:6em}
	#liste2 {font-size: 1em}
	
	.intro01 h1, .intro02 h2 {font-size:2.2em}
	.reatitre01 {font-size:2.4em}
	#contactliste {font-size:1.6em;}
	
}
@media screen and (max-width: 360px) {
	
}