/* Auteur : Herve Augoyat - https://www.ah-book.com, copie ou modification interdite sans accord de l'auteur  */


#testeur {position:fixed; z-index:9999; bottom:0; left:0; padding:15px; font-size:0.9em; letter-spacing:0.1em; display:inline-block; font-family:Arial, Helvetica, sans-serif; color:#FFF; display:block; opacity:0.5; display:none}

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

html {font-size: 100%; -webkit-font-smoothing: antialiased; height:100%; width:100%}

@font-face { font-family:'go'; src: url('../Fontes/go0.eot'); src: url('../Fontes/go0.eot?#iefix') format('embedded-opentype'), url('../Fontes/go0.ttf') format('truetype'); font-weight:300;font-style:normal;}
@font-face { font-family:'go'; src: url('../Fontes/go1.eot'); src: url('../Fontes/go1.eot?#iefix') format('embedded-opentype'), url('../Fontes/go1.ttf') format('truetype'); font-weight:400;font-style:normal;}
@font-face { font-family:'go'; src: url('../Fontes/go2.eot'); src: url('../Fontes/go2.eot?#iefix') format('embedded-opentype'), url('../Fontes/go2.ttf') format('truetype'); font-weight:500;font-style:normal;}
@font-face { font-family:'go'; src: url('../Fontes/go3.eot'); src: url('../Fontes/go3.eot?#iefix') format('embedded-opentype'), url('../Fontes/go3.ttf') format('truetype'); font-weight:600;font-style:normal;}

body {font-size: 1em; color:#000; font-family: 'go', 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;}

* { 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 {margin:0; padding:0; list-style:none}
ul li {margin:0; padding:0}
h1, h2, h3, h4 {padding:0; margin:0; font-size:1em; font-weight:normal; line-height:1.1em}
sup {line-height: 0.8em}

#menuMob {display:none}

			
#temps {width:0; position:fixed; top:0; left:0; height:5px; background-color:#f07e63; z-index:600}

#studio{ padding-top:0px; position: relative; z-index: 80; overflow: hidden}

#longue {width: 100%; position: relative; overflow: hidden}
	#logo { width: 170px; height: auto; position:relative; margin-top: 30px; margin-left:auto; margin-right: auto;display: block; z-index: 80}
		#logo img {width:100%; display:block}
	.H #logo { visibility: hidden}	
	#longue #imageint {display: block; width: 100%; position: absolute; top:50%; left:50%; width:2500px; height: 1400px; display: block; 
		margin-left: -1250px; margin-top: -700px; z-index: 20}
	#cover {background-color: rgba(18, 30, 36, 0.6);; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 21; 
transform-origin: 0 0}

#accroche {position:relative;  width: 100%; color:#fff; font-size:1em; 
/*background-color: rgba(56, 68, 74, 0.8); */padding-top:130px; padding-bottom: 80px; text-align: center; z-index: 78}
#accroche h1 {font-size: 2.3em; display: inline-block; line-height: 1.6em}
#accroche h2 {font-size: 0.8em; letter-spacing: 0.1em; font-weight: 500; color:#d6d6d6;
	text-transform: uppercase; padding: 2em 0 3.5em 0; display: inline-block}
#accroche strong {font-size: 2.8em; font-weight: 400; display: inline-block; background-color:#ed7f68; padding: 0.2em 0.5em}

.H #longue #imageint, .H #accroche h1, .H #accroche h2, .H #accroche strong, .H #cover {visibility: hidden}

#listepartenaires {width:1300px; margin-left: auto; margin-right: auto;}
#listepartenaires img {display: block; float: left; width: 23%; margin-left: 1%; margin-right: 1%}


.blocG2 {width: 60%; float: left; }
.blocD2 {width: 40%; float: right; }

#formulaire {display:block; text-align:left; margin:2.5em 0 0 0; width:650px; font-family: 'go', Arial, Helvetica, sans-serif; color:#5b7c77; 
font-weight:400; letter-spacing:0.025em}		

::placeholder {color:#656a73;opacity: 1}
:-ms-input-placeholder {color:#656a73;}
::-ms-input-placeholder {color:#656a73;}

	#formulaire .formgauche {width:300px; float:left; margin:9px 0 0 0;}
	#formulaire .formdroite {width:300px; float:left; margin:9px 0 0 9px}
	#formulaire input {background-color: rgba(174, 174, 174, 0.25); color:#656a73; font-size:1em; border:none; padding:15px 0 15px 15px; border-radius:8px; font-family: 'go', Arial, Helvetica, sans-serif;}
	#formulaire input:hover {color:#000; background-color: rgba(174, 174, 174, 0.35); }
	
	#formulaire #envoyer {color:#000; text-transform:uppercase; background-color:#fff; border-radius:20px; border-width:2px; border-style:solid; border-color:#646464; display:inline-block; padding:13px 120px 12px 50px;  font-size:0.9em; background-image:url(../Images/fl1.png); background-repeat:no-repeat; background-position:25px 50%; background-size:10px; letter-spacing:0.15em; margin:20px 0 0 0; cursor:pointer; display:inline-block; text-align:left; font-weight:600; font-family: 'go', Arial, Helvetica, sans-serif; }

	#formulaire span {padding:0px 0 15px 0; margin-top:50px; color:#333; font-weight:500; display:inline-block; font-size:1em; position:relative}
	#formulaire .legende {font-size:0.9em}
	
	#formulaire #captcha {padding:23px 0 9px 0; display:block}
	#formulaire #captcha strong {display: inline-block; font-size: 1em}
	
[type="checkbox"]:not(:checked),[type="checkbox"]:checked {position: absolute;left: -9999px;}
[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { position:relative; padding-left:25px; cursor: pointer;display:inline-block; padding:0 30px 0 25px; font-size:1em}
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {content: '';position: absolute;left:0; top: 2px; width:11px; height:11px; background:#ffffff; border-radius:3px; border:2px solid #38b2c2}
[type="checkbox"]:not(:checked) + label:after,[type="checkbox"]:checked + label:after {content: '✔';position: absolute;top: 1px; left: 3px;font-size: 11px;color:#00606d; transition: all .2s;}
[type="checkbox"]:not(:checked) + label:after {opacity: 0; transform: scale(0);}
[type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); }	

label a {color:#333; text-decoration:underline}
label a:hover {color:#666; text-decoration:none}

#message-requete {margin:0; letter-spacing:0.02em; font-size:1.5em; position:fixed; top:50%; margin-top:-150px; font-family: 'go', Arial, Helvetica, sans-serif; 
			left:50%; margin-left:-250px; width:500px; z-index:9999; background-color:#fff; padding:50px; border-radius:12px; display:none; position:fixed; color:#6F6F6F; 
			cursor:pointer; background-image:url(../Images/croix.png); background-size:30px; background-position:96% 20px; background-repeat:no-repeat}
#message-requete ul {margin:10px 0 10px 0; padding:0; list-style:none}
#message-requete ul li {list-style:none; padding:7px 4px 7px 40px; font-size:0.8em; margin:1px 0 0 0; display:block; width:auto}
#message-requete .message-ok { background-image:url(../Images/valide.png); background-repeat:no-repeat; background-position:5px 50%; background-size:20px}
#message-requete .message-erreur { background-image:url(../Images/erreur.png); background-repeat:no-repeat; background-position:5px 50%; background-size:20px}
	
#fondmessage {background-color:#262727; z-index:9998; position:fixed; width:100%; height:100%; top:0; left:0; display:none}
	
.H #pagecontactA, .H #pagecontactB {visibility: hidden}







#menuM { display:block; width:68px; height:68px; position:fixed; top:40px; /*right:130px;*/ right:9%; z-index:9800; cursor:pointer; overflow:hidden; 
		background-color:#fff; transform-origin: 50% 50%}
	#menuM i {width:36px; height:2px; top:50%; left:16px; z-index:920; display:block; position:absolute; background-color:#000;  transform-origin: 0 0} 
	#menuM #t1 { margin-top:-10px} #menuM #t2{margin-top:-1px} #menuM #t3{margin-top:10px; width:24px}
	#menuM div {width:100%; height:100%; position:absolute; top:0; left:0;background-color:#E0E0E0; z-index:918; transform-origin: 100% 100%;}
	#menuM #fermer {width:68px; height:68px; display:block; position:absolute; top:0; left:101%; z-index:930; background-color:#fff}
		#menuM #fermer img {width:16px; height:16px; margin-top:26px; margin-left:26px}
.H #menuM {visibility:hidden}

#navH {position:relative; height:auto; display:block; background-color: #fff}
.H #navH {position:fixed; top:0; left:0; z-index:9501; width:100%; height:100%; display:none}
#navHint {width:600px; margin: 0 auto; padding-top: 30px}
	#logonav { margin: 0 auto; width: 170px; height: auto; position: relative; display: block}
		#logonav img {width:100%; display:block}
	#traitnav1 {width: 300px; margin:75px auto; height: 2px; background-color: #e3e3e3; transform-origin: 50% 50%} 
	#traitnav2 {width: 300px; margin:75px auto 0 auto; height: 2px; background-color: #e3e3e3; transform-origin: 50% 50%} 
	#menuH {width:100%; display:block; font-size: 0.85em}
		#menuH li {float:none; display:block; text-align:center}
			#menuH li a {font-size:1.9em; display:inline-block; color:#000; padding:0.5em 0; font-weight: 600; letter-spacing: 0.02em;position: relative}
					#menuH li a i {width: 100%; position: absolute; bottom: 0.1em; left:0; height: 2px; background-color: #000; 
						transform-origin:0}
			.H #menuH li a {visibility:hidden}
	#reseauxnav {width: 100%; text-align: center; padding-top: 40px}
		#reseauxnav li {display: inline-block; width: 51px; margin: 0 16px}
		#reseauxnav li a {display:block; width: 51px; border-width: 1px; border-style: solid; border-color: #d0d0d0; border-radius: 50%}
			#reseauxnav li a img {display:block; width:100%}	


	



.H .ant0, .H .ant1, .H .ant2, .H .ant3, .H .ani1, .H .ani2, .H .ani3 {visibility: hidden; transform-origin: 0 0}
.H .ani1 {transform-origin: 50% 50% }
.H .ani2 {transform-origin: 50% 50% }

.gris {background-color:#f9f9f9}
.margeH1 {margin-top:265px}
.margeH2 {margin-top:250px}
.margeH3 {margin-top:135px}
.paddH1 {padding-top: 210px}
.paddH2 {margin-top:290px}
.paddH3 {padding-top: 80px}
.paddH4 {padding-top: 100px}
.paddB1 {padding-bottom: 230px}
.paddB2 {padding-bottom: 170px}
.paddB3 {padding-bottom: 80px}
.paddB4 {padding-bottom: 100px}

.int {width: 1274px; margin-left: auto; margin-right: auto}
.blocG {width: 50%; float: left}
.blocD {width: 50%; float: right}
.reduit {width: 45%}
.filet {width: 100%; height:1px; background-color:#c2c2c2}
.filet2 {width: 100%; height:1px; background-color:#000}




#archi {}
	#archi .blocD img {width: 100%}
	#archi h1 { margin-left: 9%; margin-top: 2em; font-size: 2em; font-weight: 600; color:#121e24; line-height: 1.5em; display: block}
	#archi p { margin-left: 24%; margin-top: 3em; width: 55%; font-size: 0.9em; color:#2D2D2D; font-weight: 400; line-height: 1.8em;}
		.lien {position: relative; display: inline-block; line-height: 1.7em; color:#000}
			.lien i {position:absolute; display:block; bottom: 0; left:0; width: 100%; background-color: #000; height: 1px; transform-origin: 0}

	.titreTrait { padding-left: 80px; font-size: 1.95em; font-weight: 600; color:#121e24; line-height: 1.4em; display: block;
		position: relative}
		.titreTrait i {width:69px; height: 2px; background-color: #ea7d67; position: absolute; bottom:0.3em; left:0; transform-origin: 0 0}
	
#Pluscontact {-webkit-user-select:text; -moz-user-select:text;  -khtml-user-select:text; -ms-user-select:text}
		#Pluscontact p {margin-top: 3em; width: 85%; font-size: 0.85em; color:#2D2D2D; font-weight: 400; line-height: 1.8em}
		#Pluscontact strong {margin-top: 1.2em; font-size: 0.95em; color:#000; font-weight: 500; line-height: 1.8em; display:block}
			#Pluscontact b {text-transform: uppercase; font-weight: 500}
		#Pluscontact ul {margin-top: 0.8em}
			#Pluscontact ul li { display: block; font-size: 0.95em; padding:0 0 0.5em 0}
				#Pluscontact ul li a {color:#000; padding: 0.4em 0 0 0; display: inline-block}
				#Pluscontact ul li a:hover {color:#6B6B6B}

#bas {padding-bottom: 45px}
	.infos {margin-top: 26px; font-size:0.8em}
	#infos1 { float: left; display: inline-block; margin-right: 100px;
		-webkit-user-select:text; -moz-user-select:text;  -khtml-user-select:text; -ms-user-select:text}
	#infos2 { float: left; display: inline-block; margin-right: 65px}
	#infos3 { float: left; display: inline-block; margin-right: 65px}
	.infos li {display:block; margin: 0; padding: 0}
	.infos li strong { font-weight: 400; line-height:1.5em; padding-bottom: 0.8em; display: inline-block}
	#bas a {line-height:2em; color:#000000}
	#bas a:hover {color:#ea7d67}
	#bas b {text-transform: uppercase; font-weight:400}

	#reseauxbas {float:right; margin-top:26px}
		#reseauxbas ul {width: 100%; text-align: center;}
		#reseauxbas li {display: inline-block; width: 40px; margin: 0 0 0 26px}
		#reseauxbas li a {display:block; width: 40px; border-width: 1px; border-style: solid; border-color: #d0d0d0; border-radius: 50%}
			#reseauxbas li a img {display:block; width:100%}	
	#mentionbas { font-size:0.8em; margin-top:32px; display: inline-block}


	#presentation .blocD img {width: 100%}
	#presentation h2 { margin-left: 9%; margin-top: 2em; font-size: 2em; font-weight: 600; color:#ea7d67; line-height: 1.5em; display: block}
	#presentation h1 { margin-left: 9%; margin-top: 0.6em; font-size: 1.2em; font-weight: 500; color:#ea7d67; line-height: 1.5em; display: block}
	#presentation p { margin-left: 24%; margin-top: 3em; width: 55%; font-size: 0.9em; color:#2D2D2D; font-weight: 400; line-height: 1.8em;}
.H #presentation h1, .H #presentation h2, .H #presentation p, .H #presentation img {visibility: hidden}


.titreTrait2 { padding-left: 80px; font-size: 1.5em; font-weight: 600; color:#121e24; line-height: 1.4em; display: block;position: relative}
		.titreTrait2 i {width:69px; height: 2px; background-color: #ea7d67; position: absolute; bottom:0.3em; left:0; transform-origin: 0 0}
		#prestations p {margin-top: 3em; width: 85%; font-size: 0.95em; color:#2D2D2D; font-weight: 400; line-height: 1.8em;}
		#prestations img {display: block; width: 100%; margin-top: 13px}

.H #prestations h2, .H #prestations p, .H #prestations img, .H #prestations h2 i { visibility: hidden}
	











@media screen and (max-height: 735px) {
	#traitnav1 {margin:75px auto 30px auto; } 
	#traitnav2 {margin:30px auto 0 auto;} 
			#menuH li a {font-size:1.5em; padding:0.5em 0; }
					#menuH li a i {bottom: 0.1em}
	#reseauxnav {padding-top: 32px}
		#reseauxnav li {width: 41px; margin: 0 13px}
		#reseauxnav li a {width: 41px}
}
	
				
@media screen and (max-width: 1600px) {
	#logo { width: 150px}
	#studio{font-size: 0.8em}	

	#accroche {font-size:1em; padding-top:110px; padding-bottom: 65px; }
	
	#listepartenaires {width:1040px}
	
#menuM { width:54px; height:54px; top:32px; right:9%}
	#menuM i {width:28px; left:13px} 
	#menuM #t1 { margin-top:-8px} #menuM #t2{margin-top:-1px} #menuM #t3{margin-top:8px; width:19px}
	#menuM #fermer {width:54px; height:54px}
		#menuM #fermer img {width:14px; height:14px; margin-top:20px; margin-left:20px}

#navHint {width:600px; padding-top: 32px}
	#logonav { width: 150px}
	#traitnav1 {width: 240px; margin:60px auto; } 
	#traitnav2 {width: 240px; margin:60px auto 0 auto;} 
			#menuH li a {font-size:1.5em; padding:0.5em 0; }
					#menuH li a i {bottom: 0.1em}
	#reseauxnav {padding-top: 32px}
		#reseauxnav li {width: 41px; margin: 0 13px}
		#reseauxnav li a {width: 41px}	


.margeH1 {margin-top:212px} .margeH2 {margin-top:200px} .margeH3 {margin-top:108px}
.paddH1 {padding-top: 168px} .paddH2 {margin-top:232px} .paddH3 {padding-top: 64px} 
.paddB1 {padding-bottom: 184px} .paddB2 {padding-bottom: 136px} .paddB3 {padding-bottom: 64px} .paddH4 {padding-top: 80px}
.paddB4 {padding-bottom: 80px}

.int {width: 1020px}

	#archi h1 { margin-left: 9%; margin-top: 2em;}
	#archi p { margin-left: 24%; margin-top: 2.6em; width: 55%;}
	.titreTrait { padding-left: 64px}
		.titreTrait i {width:55px}
	
	#Pluscontact p {margin-top: 3em; width: 85%; }
		
#bas {padding-bottom: 36px}
	.infos {margin-top: 21px}
	#infos1 {margin-right: 80px} #infos2 {margin-right: 52px} #infos3 {margin-right: 52px}
	
	#reseauxbas {margin-top:21px}
		#reseauxbas li {width: 32px; margin: 0 0 0 21px} #reseauxbas li a {width: 32px; }	
	#mentionbas {margin-top:26px}



	#presentation h2 { margin-left: 9%; margin-top: 2em}
	#presentation h1 { margin-left: 9%; margin-top: 0.6em}
	#presentation p { margin-left: 24%; margin-top: 2.6em; width: 55%}

.titreTrait2 { padding-left: 64px}
		.titreTrait2 i {width:55px}
	#prestations p {width: 100%; font-size: 0.95em;}
	
	
#formulaire {margin:2.5em 0 0 0; width:500px}	
	#formulaire .formgauche {width:225px}
	#formulaire .formdroite {width:225px}
	#formulaire #envoyer {padding:11px 100px 10px 50px; margin:20px 0 0 0; }
	#formulaire span {margin-top:40px;}
	
#message-requete {margin-top:-150px; margin-left:-230px; width:460px; padding:40px; background-size:24px; background-position:96% 20px; font-size: 0.9em}
#message-requete ul {margin:8px 0 8px 0}
#message-requete ul li {padding:7px 4px 7px 35px}
#message-requete .message-ok {background-size:16px}
#message-requete .message-erreur {background-size:16px}	
	
}


@media screen and (max-height: 585px) {
	#traitnav1 {margin:60px auto 20px auto; } 
	#traitnav2 {margin:20px auto 0 auto;} 
			#menuH li a {font-size:1.5em; padding:0.5em 0; }
					#menuH li a i {bottom: 0.1em}
	#reseauxnav {padding-top: 20px}
		#reseauxnav li {width: 41px; margin: 0 13px}
		#reseauxnav li a {width: 41px}
}

@media screen and (max-height: 510px) {
	#traitnav1 {margin:30px auto 8px auto; } 
	#traitnav2 {margin:8px auto 0 auto;} 
			#menuH li a {font-size:1.2em; padding:0.4em 0; }
					#menuH li a i {bottom: 0.1em}
	#reseauxnav {padding-top: 8px}
		#reseauxnav li {width: 26px; margin: 0 8px}
		#reseauxnav li a {width: 26px}
}

					
@media screen and (max-width: 1250px) {
#accroche {font-size:1em; padding-top:80px; padding-bottom: 60px; }
#listepartenaires {width:930px}
	
.margeH1 {margin-top:170px} .margeH2 {margin-top:160px} .margeH3 {margin-top:86px}
.paddH1 {padding-top: 134px} .paddH2 {margin-top:185px} .paddH3 {padding-top:51px} 
.paddB1 {padding-bottom:147px} .paddB2 {padding-bottom: 108px} .paddB3 {padding-bottom: 51px} .paddH4 {padding-top: 70px}
.paddB4 {padding-bottom: 70px}
	
.int {width: 900px}

	#archi h1 { margin-left:0}
	#archi p { margin-left:18%; width:63%}
	.titreTrait { padding-left: 51px}
		.titreTrait i {width:44px}
	
	#Pluscontact p {width:90%}

	#infos1 {margin-right: 70px} #infos2 {margin-right: 45px} #infos3 {margin-right: 45px}

#menuM {right:6%}	
	
	
#studio{}	
	#presentation h2 { margin-left: 0; }
	#presentation h1 { margin-left: 0; }
	#presentation p { margin-left: 18%; width: 63%}	

.titreTrait2 { padding-left: 51px}
	.titreTrait2 i {width:44px}

	
#formulaire {margin:2.5em 0 0 0; width:445px}	
	#formulaire .formgauche {width:200px}
	#formulaire .formdroite {width:200px}
	#formulaire span {margin-top:32px;}	
#message-requete {margin-top:-150px; margin-left:-170px; width:340px; padding:35px; background-size:20px; font-size: 0.8em}	
	
	
}


@media screen and (max-width: 1080px) {
#accroche {font-size:0.9em; padding-top:60px; padding-bottom: 40px; }
#listepartenaires {width:820px}
.margeH1 {margin-top:170px} .margeH2 {margin-top:160px} .margeH3 {margin-top:86px}
.paddH1 {padding-top: 134px} .paddH2 {margin-top:185px} .paddH3 {padding-top:51px} 
.paddB1 {padding-bottom:147px} .paddB2 {padding-bottom: 108px} .paddB3 {padding-bottom:51px} .paddH4 {padding-top: 65px}
.paddB4 {padding-bottom: 65px}
	
.int {width: 800px}

	#archi h1 { margin-left:0; font-size: 1.8em}
	#archi p { margin-left:15%; width:72%}
	.titreTrait {font-size: 1.7em}
	
	#Pluscontact p {width:100%}
	#infos1 {margin-right: 60px} #infos2 {margin-right: 40px} #infos3 {margin-right: 40px}

#menuM {right:4%}
	
#listeprojets {width:92%}
	#listeprojets li {width: 30%; margin-right:5%}
		.H #listeprojets a div p {font-size: 0.65em; width:60%;}
		#listeprojets a strong {font-size: 1em}
		#listeprojets a span {font-size: 0.8em;}
		
#rubriques {width:92%} 
		#rubriques a {font-size: 0.8em}
	
#projet{}	
#intprojet {width:92%; padding-top: 80px}
	
#studio{}	
	#presentation h2 { font-size: 1.8em; margin-top: 1em}
	#presentation h1 { font-size: 1.2em}
	#presentation p { margin-left: 15%; width: 72%}		

.titreTrait2 { font-size: 1.3em}
	
	
#formulaire {margin:2.5em 0 0 0; width:360px}	
	#formulaire .formgauche {width:344px; float: none; margin-right: 0}
	#formulaire .formdroite {width:344px; float: none; margin-left: 0}
	#formulaire textarea{height:90px; width:344px}
	#formulaire span {margin-top:32px;}	
#message-requete {margin-top:-150px; margin-left:-170px; width:340px; padding:35px; background-size:20px}	
		
	
}





@media screen and (max-width: 900px) {
#longue {width: 100%; position: relative; overflow: hidden}
	#logo { width: 150px; margin-top: 15px; margin-left: 10%; margin-right: 0}	

#accroche {position:relative;  width: 80%; margin-left: 10%; margin-right: 5%; color:#fff; font-size:1em; padding-top:70px; padding-bottom: 50px; text-align:left; z-index: 78}
#accroche h1 {font-size: 2.1em; display: inline-block; line-height: 1.6em}
#accroche h2 {font-size: 0.8em; letter-spacing: 0.1em; font-weight: 500; color:#d6d6d6;
	text-transform: uppercase; padding: 2em 0 3.5em 0; display: inline-block}
#accroche strong {font-size: 2.4em; font-weight: 400; display: inline-block; background-color:#ed7f68; padding: 0.2em 0.5em}	
	
.blocG2 {width: 100%; float:none; }
.blocD2 {width: 100%; float:none; margin-top: 80px }
	
#listepartenaires {width:80%}
	#listepartenaires img {width: 45%; margin-left: 0; margin-right: 5%; margin-top: 20px}
	
#menuMob {display:block}
.retMob {clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float:none; display:block}
	
	.H #introInt {width: 300px; left:50%; margin-left: -150px;}
		#logoIntro {width:250px}
		#traitIntro {width:42px; height:2px; margin: 35px auto}
		#titreIntro {font-size: 0.9em}

#menuM { width:54px; height:54px; top:15px; right:10px}
	#menuM i {width:28px; left:13px} 
	#menuM #t1 { margin-top:-8px} #menuM #t2{margin-top:-1px} #menuM #t3{margin-top:8px; width:19px}
	#menuM #fermer {width:54px; height:54px}
		#menuM #fermer img {width:14px; height:14px; margin-top:20px; margin-left:20px}	

#navH {position:relative; height:auto; display:block; background-color: #fff}
.H #navH {position:fixed; top:0; left:0; z-index:9501; width:100%; height:100%; overflow: scroll; display:none}
#navHint {min-height: 100%;  width:100%; margin: 0; padding: 0}
	#logonav { margin: 0 0 0 10%; width: 200px;padding-top:20px; }
	#traitnav1 {width: 80%; margin:40px auto;  transform-origin: 0} 
	#traitnav2 {width: 80%; margin:40px auto 0 auto; transform-origin: 0} 
	#menuH {width:80%; display:block; margin-left: 10%}
		#menuH li {float:none; display:block; text-align:left}
			#menuH li a {font-size:1.5em; padding:0.5em 0}
					#menuH li a i { display:none}
	#reseauxnav {width: 80%; margin:0 auto; text-align: left; padding-top:30px}
		#reseauxnav li {width: 40px; margin: 0 20px 0 0}
		#reseauxnav li a {width: 40px}	



.gris {background-color:#f9f9f9}
.margeH1 {margin-top:80px} .margeH2 {margin-top:80px} .margeH3 {margin-top:40px} 
.paddH1 {padding-top: 60px} .paddH2 {margin-top:100px} .paddH3 {padding-top: 30px} 
.paddB1 {padding-bottom: 80px} .paddB2 {padding-bottom: 60px} .paddB3 {padding-bottom:30px} .paddH4 {padding-top: 70px}
.paddB4 {padding-bottom: 70px}
	
.int {width: 80%; margin-left:auto; margin-right: auto}
.blocG {width: 100%; float: none}
.blocD {width: 100%; float: none; margin-top: 60px}
.reduit {width: 100%}

#archi {}
	#archi .blocD img {width: 100%}
	#archi h1 { margin-left:0; margin-top: 0em; font-size: 1.7em}
	#archi p { margin-left: 0; margin-top: 2em; width:100%; font-size: 0.9em; max-width: 500px}
	.titreTrait { padding-left: 60px; font-size: 1.6em;}
		.titreTrait i {width:50px; height: 2px}
		#apercu p {margin-top: 3em; width: 100%; font-size: 0.85em; max-width: 500px}
		
#Pluscontact {}
		#Pluscontact p {margin-top: 3em; width: 100%; font-size: 0.85em; max-width: 500px}
		#Pluscontact strong {margin-top: 1.2em; font-size: 0.95em}
			#Pluscontact b {display: block}		
#bas {padding-bottom: 45px}
	.infos {margin-top: 26px; float: none}
	#infos1 { margin-right: 100px; float: none; display: block}
	#infos2 { margin-right: 65px; float: none; display: block}
	#infos3 { margin-right: 65px; float: none; display: block}
	
	#reseauxbas {float:none; margin-top:26px; width: 100%}
		#reseauxbas ul {width: 100%; text-align:left;}
		#reseauxbas li {display: inline-block; width: 40px; margin: 0 20px 0 0}
		#reseauxbas li a {width: 40px; }	
	#mentionbas { margin-top:32px; padding-bottom: 50px }


	

#studio{padding-top:0px; position: relative; z-index: 80; overflow: hidden}	
	#presentation h2 { margin-left:0; margin-top: 0em; font-size: 1.7em}
	#presentation h1 { margin-left:0; margin-top: 0em; font-size: 1.2em}
	#presentation p { margin-left: 0; margin-top: 2em; width:100%; font-size: 0.9em; max-width: 500px}	

.titreTrait2 { padding-left: 60px; font-size: 1.5em}
		.titreTrait2 i {width:50px; height: 2px}
		#prestations p {margin-top: 2.5em; width: 100%; font-size: 0.95em;}


	
#formulaire {width:100%}		
	#formulaire .formgauche {width:91%; float:none; margin:9px 0 0 0;}
	#formulaire .formdroite {width:91%; float:none; margin:9px 0 0 0}
	#formulaire textarea{margin:9px 0 0 0; width:91%; }
	#formulaire span {padding:0px 0 7px 0}
	[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { margin-top:7px}				
	#message-requete {font-size:1.1em;top:130px; margin-top:0px; left:5%; margin-left:0; width:80%; padding:20px 5%; background-position:96% 10px;}
			
}