/* Auteur du developpement sur-mesure : 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;}

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




body {font-size: 1em; color:#1d1c1b; font-family: 'nun', sans-serif; margin:0; font-weight:400; height:100%; width:100%; position:relative; 
		background-color:#0F0F12; -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.25em}
@media screen and (max-width: 2200px) {
body {font-size: 1em}
}


* { 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 {padding:0; margin:0; font-size:1em; font-weight:normal; line-height:1.1em}
sup {font-size: 0.55em; line-height: 1em}
/*::-moz-selection, ::selection { background:#00949a}*/
#testeur {position:fixed; z-index:9999; bottom:0; right:0; padding:10px; font-size:0.75em; letter-spacing:0.1em; display:none; font-family: sans-serif; color:#FFF; opacity:0.5; background-color: #000000; }

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

.H .ano0 {visibility: hidden}
.H .anSX0 {visibility: hidden; transform-origin:0 0 }
.H .anSX1 {transform-origin:0 0 }
.H .anScale img {transform-origin:50% 50% }
.H .ans1 {visibility: hidden; transform-origin:50% 50% }
.H .any1, .H .any2, .H .any3 {visibility: hidden; transform-origin: 50% 50% }
.H .anys1 {visibility: hidden; transform-origin: 50% 50% }

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

#remonte {width:46px; height:46px; background-color:#fff; position:fixed; bottom:0px; left:0; z-index:150; 
		visibility:hidden; overflow:hidden; cursor:pointer}
		#remonte img {width:22px; position:absolute; top:50%; left:50%; margin-left:-11px; margin-top:-11px; display:block;transform-origin: 50% 50%;}
.H #remonte {visibility: hidden}




#btmenu {display:block; position: fixed; top:3em; right:8%; width:64px; z-index:950; cursor: pointer; background-color: rgba(255, 255, 255, 1); overflow: hidden}
	#btmenu #lignes {width: 64px}
	#b1, #b2, #b3 {width:20px; height: 2px; background-color: #003ce7; position: relative; margin-left:22px; display: block; transform-origin:0 0;}
	#b1 {margin-top:24px; z-index:950} #b2 {margin-top:4px; z-index:951} #b3 {margin-top: 4px; margin-bottom: 24px; z-index:950}
#btmenu #fermer {display:block; visibility: hidden; width:64px; height:64px;background-color:#FFFFFF; position: absolute; top: 0; left: 0; z-index: 960}
	#btmenu #fermer b {width:27px;height:2px;background-color:#003ce7;transform-origin:50% 50%; position: absolute; top:31px; left:18px;display: block}

.H #btmenu, .H #btmenu i {visibility: hidden}
		




.navigation {width:100%; height:auto; position:relative; left:0;}
	.H .navigation {width:100%; height: 100%; position: fixed; left:102%; bottom: 0; z-index:900; overflow:hidden; transform-origin:0 100%}
	/*.H .navigation {left:0%}*/
	.navigation .fondnav {display: none}
	.H .navigation .fondnav {display:block; position:absolute; z-index:900; top:50%; left:50%; width: auto; height: auto}

	.navigationInt {width:100%; height:600px; position: relative; z-index:902; /*background-color:#BF4446 */}
	.H .navigationInt {height:100%;}

	#navnoir {width:74%;height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.78); bottom: 0; right: 0; transform-origin: 100% 100%; z-index: 901}

		.logonav {width:100px; height: auto; display: block; position:absolute; left:8%; top:3em; z-index:904}
			.logonav img {width: 100%; display: block}
		
#navdecale {/*margin-left: 26%;*/ margin-left: 33.3%; height: 100%; position: relative}	
	
#liste1 { display: inline-block; float: left; position: relative; width: 409px; padding-top:2.4em; margin-top:3em}
#liste1 ul { font-size:2.35em; letter-spacing: 0.04em; }
	#liste1 li { display: block; margin-bottom: 1px;line-height: 1em}
	#liste1 li a { color:#fff; font-weight: 400; line-height: 1.45em; padding: 0.2em 0 0.2em 0; position: relative; display: inline-block; 
		overflow: hidden; }
	#liste1 li a img {position: absolute; top:0.8em; width: 0.25em; display: block; left:-27px}
#liste1 li .mactifnav {padding-left: 18px; color:#979797}
#liste1 li .mactifnav img {left:0}

#liste2 { display: inline-block; float: left; position: relative; padding-top:3.6em; margin-top:3em}	
#liste2 ul { font-size:1.4em; letter-spacing: 0.04em}
	#liste2 li { display: block; margin-bottom:0.5em; line-height: 1em}
	#liste2 li a { color:#fff; font-weight: 400; line-height: 1.35em; padding: 0.2em 0 0.2em 0; position: relative; display: inline-block; overflow: hidden}
	#liste2 li a img {position: absolute; top:0.7em; width:0.3em; display: block; left:-20px}
#liste2 li .mactifnav {padding-left: 12px; color:#979797}
#liste2 li .mactifnav img {left:0}

.navtrait {width: 58px; height: 2px; background-color: #003ce7; position: absolute; top: 0; left: 0; transform-origin: 0 0}

.reseaux {position:absolute; left:0%; bottom:4em}
	.reseaux li {margin-right: 1.3em; display:inline-block; float: left}
	.reseaux a {width:2.9em; height: auto; border-radius: 50%; display: block; border: 1px solid #3c3c3c; transform-origin: 50% 50%}
		.reseaux a img {width: 100%; display: block; transform-origin: 50% 50%;}
	.reseaux .ret {clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float:none}

#liste3 { position: absolute; bottom:3.2em; left:409px; z-index: 903; font-size:0.95em; letter-spacing: 0.025em; display: block}
	#liste3 li { display: inline-block; float: left; padding-right:1.3em}
	#liste3 li span, #liste3 li a { color:#bfbfbf; font-weight: 400; line-height: 1.8em; padding: 0.4em 0 0.4em 0; position: relative; display: inline-block;}	
	#liste3 .ret, #liste3 .retMob {clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float:none; display: block}








#page {position:relative; width:100%; height:auto}
.H #page {visibility: hidden}

#haut {width:84%; max-width: 2500px; position:relative; margin:0 auto; z-index:5; padding-top: 3em}
	#logo {width:100px; overflow:visible; display:block; position: relative}
	#logo img {width:100%; display: block}
	
	/*.H #logo { visibility: hidden}*/
	#logo #SVGanime01 {position: absolute; top:-20px; width:147px; height:102px; left:-23px; display: none}
	/* 535 - 370  x0.69158 background-color: rgba(100, 100, 255, 0.3); */ 
	.H #logo img.avecanim { visibility: hidden}
	.H #logo #SVGanime01 {display: block}


.pageint {width:84%; max-width: 2500px; position:relative; margin:0 auto; z-index:5}
.accueil {padding-top: 5em}
.Pageprojets, .Pageprojet, .Pageblog {padding-top: 3.5em}

h1.titre01 {color:#fff; font-weight: 400; font-size: 1.9em; line-height: 1.5em; letter-spacing: 0.03em}
h1.titre01 span {display: inline-block; position: relative}
h2.soustitre01 {color:#87898a; font-weight: 400; font-size: 1.15em; padding-top: 0.8em; line-height: 1.6em; letter-spacing: 0.016em}

h1.titre02 {color:#fff; font-weight: 500; font-size: 1.2em; padding-top:0em; line-height: 1.6em; letter-spacing: 0.025em}
h2.soustitre02 {color:#87898a; font-weight: 400; font-size: 1.1em; padding-top: 0.4em; line-height: 1.6em; letter-spacing: 0.016em}

h3.soustitre02b {padding-top: 5em; font-size: 1.9em; color:#fff; font-weight: 400; line-height: 1.5em; letter-spacing: 0.03em}

h3.titre03 {color:#87898a; font-weight: 400; font-size: 1.15em; line-height: 1.5em; letter-spacing: 0.03em}

.accueil .Projets { padding-top: 5em}
.Pageprojets .Projets { padding-top: 3.5em}


.Projets li.proj {width: 30%; margin-right: 5%; float: left; display: block; padding-bottom: 3em}
.Projets li.sansM {margin-right:0;}
.Projets li.ret {width: 0; margin: 0; padding: 0; float: none; display: block; clear: both}
.Projets li a {display: block; width: 100%; position: relative}
.Projets li a b {display: block; width: 100%; position:relative; overflow: hidden}
/*.H .Projets li a{visibility: hidden}*/
.Projets li a img {width: 100%; display: block; transform-origin: 50% 50%; position: relative; z-index: 1; opacity: 0.3}
.H .Projets li a img {opacity:1}
.Projets li a strong {position: absolute; top: 10%; left:10%; color:#fff;  z-index: 2; font-weight: 400; width: 83%; display: block}
.H .Projets li a strong {visibility: hidden}
.Projets li a .titre { font-size: 1.4em; line-height: 1.5em; padding-bottom: 0.7em; padding-top: 1em; display: block; font-weight: 500}
.Projets li a .infos {font-size: 1.15em; line-height: 1.8em; display: block; letter-spacing: 0.025em}
.Projets li a i {display: block; width:3em; height: 2px; background-color: #003ce7; z-index: 3; transform-origin: 0 0}

.lientous {font-size: 2.1em; color:#fff; font-weight: 400; display: inline-block; position: relative; float: right; margin-top:2em;
		letter-spacing: 0.03em; line-height: 1.8em; padding-top: 0.8em}
.lientous i {position: absolute; top:0em; left:0; width: 2em; height: 2px; background-color: #003ce7}


.archive00 { margin-top: 2em; width: 100%; margin-right: 0; display: block}
.archive01 { margin-top: 2em; width: 30%; margin-right: 5%; float: left; display: block}
.archive02 { margin-top: 2em; width: 30%; margin-right: 5%; float: left; display: block}
.archive li{display: block; width:100%}
.archive a {font-size: 1.3em; color:#fff; font-weight: 400; display: inline-block; position: relative; margin-top:0em;
		letter-spacing: 0.03em; line-height: 1.8em; padding:0.5em 0 0.5em 3em}
.archive a i {position: absolute; top:1.25em; left:0; width: 1.5em; height: 2px; background-color: #003ce7}

#part2 {margin-top:12em; padding-top:15em; padding-bottom:8em; color:#000; position:relative; background-color: #FFFFFF}
	#part2 h3, #part3 h3 {font-size:3.8em; font-weight:400; padding-top:0.8em; position:relative; margin-left:15%; display:inline-block; z-index:20}
	#part3 h3 {margin-top: 2em}
	#part2 h3 i, #part3 h3 i {width:1.3em; height:2px; display:block; position:absolute; top:0; left:0; background-color:#003ce7}
	#part2 .desc, #part3 .desc {margin-top:5em; line-height:1.7em; font-size:1.5em; margin-left:37%; position:relative; z-index:20;
			font-weight:400}
	#part2 .desc {margin-bottom: 10em}
		#part2 .desc strong, #part3 .desc strong {font-weight:400; position:relative; display:inline-block}
		#part2 .desc strong i, #part3 .desc strong i { display:block; width:100%; height:1px; position:absolute; bottom:0.1em; left:0}
		#part2 .desc strong i {background-color: #000000}
		#part3 .desc strong i {background-color: #fff}

	.im1 {width:57%; float: left; display:block; z-index:10}
	.im2 {width:14.5%; float: right; margin-right:8%; display:block; z-index:10}

#part3 {color:#fff; padding-bottom:0px; position:relative; background-color: #0F0F12}

#part4 {color:#fff; padding-bottom:0px; position:relative; padding-top: 10em}	
#References {width: 100%; }
#References li {width:14.5%; float: left; margin-right: 14%; margin-top:4em}
#References li img {width: 100%; display: block}
#References li.refsansM {margin-right: 0}
#References li.ret {width: 0; margin: 0; padding: 0; float: none; display: block; clear: both}
#References li.refretMob {display: none}

.servicesPlusInt {margin-left:37%; margin-top:5em; width:40em}
.depliA {font-weight:300; color:#fff; font-size: 1.3em; padding:1.3em 0; border-top:1px solid #3E4046; position: relative; display: block; width:100%; line-height: 1.4em; cursor: pointer; z-index: 30}
.depliAder {border-bottom:1px solid #3E4046}
	.depliA h2 {display:block; margin-right: 3em; margin-left: 2.4em; letter-spacing: 0.025em}
	.depliA .btPlus {width:0.9em;position: absolute; display: block; top:1.4em; right: 0;}
	.depliA .btPlus img {display: block; width: 100%; transform-origin: 50% 50%}

.depliB {padding-top:1em; padding-bottom: 3em; position: relative; z-index: 20; width:100%; font-size: 1.2em; line-height:1.8em; color:#B0B0B0}
.H .depliB {display: none}
	.depliB p {margin: 0; padding: 0; display: block; font-size: 1.2em; font-weight: 300; line-height: 1.8em}
	.depliB p strong, .depliB li strong {color:#000; font-weight: 500}
	



#bas {background-color:#000; padding:8em 0; margin-top: 12em; color:#fff; position:relative; z-index:90; font-size: 1.1em}
		#col1 {margin-left:0; margin-right:11%; display:inline-block; float:left}
			#col1 strong {padding-top:1.2em; padding-bottom:0.8em; font-size:1.5em; display:inline-block; position:relative; font-weight:400}
			#col1 strong i {width:2em; height:2px; background-color:#003ce7; position:absolute; top:0; left:0}
			#col1 p {color:#9f9f9f; font-size:1em; line-height:1.6em; letter-spacing:0.02em}
		#col2, #col3, #col4 {margin-right:8%; display:inline-block; float:left}
		#col4 {margin-right:0; -webkit-user-select:text; -moz-user-select:text;  -khtml-user-select:text; -ms-user-select:text}
			#col2 strong, #col3 strong, #col4 strong {padding-top:2.3em; padding-bottom:2.4em; font-size:1em; display:inline-block; position:relative; font-weight:400; letter-spacing:0.035em}
			#col2 ul, #col3 ul, #col4 ul {}
			#col2 li, #col3 li, #col4 li {color:#9f9f9f; display: block}
			#col2 li a, #col3 li a, #col4 li a, #col4 li span {padding-bottom:0.7em; color:#9f9f9f; font-size:1em; line-height:1.5em; letter-spacing:0.02em; display:inline-block; position:relative; z-index: 9}
				
				#col2 li a i, #col3 li a i, #col4 li a i {position:absolute; left:0; bottom:0.5em; height:1px; width:100%; background-color:#003ce7; display:block; transform-origin:0 0; z-index:8; visibility: hidden}


#visu {margin-top: 3.5em; width:100%; max-width: 1600px}
.videotaille01 {margin-top: 3.5em; width: 100%; max-width: 1600px}
@media screen and (max-width: 2450px) { 
	#visu {margin-top: 3.5em; width:100%; max-width: 1400px}
	.videotaille01 {margin-top: 3.5em; width: 100%; max-width: 1400px}
}
@media screen and (max-width: 2200px) {  
	#visu {margin-top: 3.5em; width:100%; max-width: 1250px}  
	.videotaille01 {max-width: 1250px}
}
@media screen and (max-width: 2000px) {  
	#visu {margin-top: 3.5em; width:100%; max-width: 1100px}  
	.videotaille01 {max-width: 1100px}
}

#visu.taille2 {margin-top: 3.5em; width:100%; max-width: 1903px}
.videotaille02 {margin-top: 3.5em; width: 100%; max-width: 19030px}
@media screen and (max-width: 2450px) {  
#visu.taille2 {margin-top: 3.5em; width:100%; max-width: 1600px}
.videotaille02 {margin-top: 3.5em; width: 100%; max-width: 1600px}
}
@media screen and (max-width: 2200px) {  
	#visu.taille2 {max-width: 1500px}  
	.videotaille02 {max-width: 1500px}
}
@media screen and (max-width: 2000px) {  
	#visu.taille2 {max-width: 1400px}  
	.videotaille02 {max-width: 1400px}
}

#visu img{width: 100%; display: block; margin-bottom: 4em}
#visu .imageT01 {max-width:800px}


.videointA {position:relative; cursor: default}
		.playvideo {width:6em; height:auto; display:block; position:absolute; top:50%; left:50%; margin-top:-3em; margin-left:-3em; z-index:9001; 
			transform-origin: 50% 50%}
		.videointA video {width: 100%; height: auto; position:relative; z-index:9000; cursor: default}

.video {position:relative}

#cont {color:#fff; width: 100%; max-width: 1100px} 
@media screen and (max-width: 2450px) { 
	#cont {max-width: 1100px} 
}
@media screen and (max-width: 2200px) {  
	#cont {max-width:1050px} 
}
@media screen and (max-width: 2000px) {  
	#cont {max-width:950px} 
}
@media screen and (max-width: 1700px) {  
	#cont {max-width: 880px} 
}
 
#cont h2 {font-size: 1.5em; line-height: 1.8em; color: #909090; display: block; padding: 4em 0 1.5em 0}
#cont p {font-size: 1.5em; line-height: 1.8em}
#cont p a {color:#B0B0B0; text-decoration: none}
#cont p a:hover {color:#fff; text-decoration: underline}

#cont h2.margemini {padding:1em 0 0.2em 0}

#cont ul {font-size: 1.3em; line-height: 1.8em; padding:0em 0 1.5em 0; -webkit-user-select:text; -moz-user-select:text;  -khtml-user-select:text; -ms-user-select:text}
#cont li {display: block; padding-bottom: 0.8em; line-height: 1.5em; color: #fff;}
#cont li a {color:#fff; text-decoration: none}
#cont li a:hover {color:#B0B0B0; text-decoration:none}
#cont li.mini {font-size: 0.8em; padding-top: 1.7em; display: block; line-height:2.1em;}
#cont li b {color:#909090; font-weight:400; display: inline-block}

#cont li.coul01{color: #909090}

#cont.contact {width: 100%; max-width: 100%}
#contact01 {float: left; width:70%; padding-bottom:8em}
#contact02 {float: right; width:23%; margin-top:4em; font-size: 1.5em; line-height: 1.8em;}
#contact02 video {width: 100%; display: block}

.liensite {font-size:1.5em; color:#fff; font-weight: 400; display: inline-block; position: relative; margin-top:2em;
		letter-spacing: 0.03em; line-height: 1.8em; padding-top: 0.8em}
.liensite i {position: absolute; top:0em; left:0; width: 2em; height: 2px; background-color: #003ce7}

#sup {width: 100%; max-width: 1500px; margin-top: 4em}
@media screen and (max-width: 2450px) { 
	#sup {max-width: 1500px} 
}
@media screen and (max-width: 2200px) {  
	#sup {max-width:1400px} 
}
@media screen and (max-width: 2000px) {  
	#sup {max-width:1300px} 
}
@media screen and (max-width: 1700px) {  
	#sup {max-width:1200px} 
}



#sup .col {width: 42%; float: left; margin-right: 8%}
#sup .col p {color: #CCCCCC; font-size: 1.3em; line-height: 1.8em}
#sup .col p a {color:#B0B0B0; text-decoration:underline}
#sup .col p a:hover {color:#fff; text-decoration:none}

#sup .col p a.lienPlus {font-size:1em; color:#fff; font-weight: 400; display: inline-block; position: relative; margin-top:2em;
		letter-spacing: 0.03em; line-height: 1.8em; padding-top: 0.8em; text-decoration: none}
.lienPlus i {position: absolute; top:0em; left:0; width: 2em; height: 2px; background-color: #003ce7}
#sup .col p a:hover {text-decoration:none}

iframe { width: 100%; height: auto;}
.video-emb, .video-youtube {position: relative;padding-bottom: 56.25%; padding-top: 0px; height: 0;overflow: hidden; margin-bottom: 4em}
.video-emb iframe, .video-emb object, .video-emb embed {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.video-youtube iframe, .video-youtube object, .video-youtube embed {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

.video-embCarre {position: relative; padding-bottom: 100%; width: 100%; height:0; overflow: hidden; margin-bottom: 4em}
.video-embCarre iframe {width: 100%;height: 100%;position: absolute; top: 0;left: 0;}

#blog {padding-top: 3.5em}
#blog .arti {float: left; width: 46%; margin-right: 8%; padding-bottom: 6em}
#blog .arti.sansM {margin-right: 0}
#blog .arti.ret {width: 0; margin: 0; padding: 0; float: none; display: block; clear: both}

#blog .arti a {width: 100%; display: block; position: relative; overflow: hidden}
#blog .arti a i {width: 100%; display: block; position: relative; overflow: hidden; z-index: 8}
#blog .arti a i img {width: 100%; display: block; position: relative; z-index: 8; transform-origin: 50% 50% }
#blog .arti a i .degrade{width:100%; height:100%; position: absolute; display: block; bottom: 0; left: 0; z-index:11;
background: -moz-linear-gradient(bottom, rgba(15,15,18,0.9) 0%, rgba(15,15,18,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, rgba(15,15,18,0.9) 0%,rgba(15,15,18,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, rgba(15,15,18,0.9) 0%,rgba(15,15,18,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0f12', endColorstr='#0f0f12',GradientType=0 ); /* IE6-9 */
}
#blog .arti a .b1 {display: block; position: absolute; bottom:3em; left: 2em; z-index: 9; color:#fff;letter-spacing: 0.025em }
#blog .arti a .b1 b {display: block; width:2em; height: 2px; background-color: #fff; z-index: 3; transform-origin: 0 0}
#blog .arti a .b1 strong {font-weight: 200; position: relative; padding:0.8em 0 0em 0; display: block;font-size:2.2em; padding-right:1em; line-height: 1.3em}
#blog .arti a .b1 span {color:#fff; padding-top:0.5em; display:block; font-size:1.05em; font-weight: 500}

#article {color: #FFFFFF; width: 80%; max-width: 1000px; margin-top: 6em}
#article h1 {color:#676767; font-weight: 200; font-size:1.6em; padding-top:0em; line-height: 1.3em; letter-spacing: 0.045em; text-transform: uppercase}
#article h1 span { display: block; color:#fff; font-weight: 200; font-size:2.1em; padding-top:0.2em; line-height: 1.3em; letter-spacing: 0.016em;
		position: relative; padding-bottom: 1em; margin-bottom: 0.5em; text-transform: none}
#article h1 span i {position: absolute; bottom: 0; left:0; width:1em; height: 2px; background-color: #003ce7; transform-origin: 0 0}
#article h2 {color:#fff; font-weight:300; font-size: 2em; padding-top:2em; line-height: 1.9em; letter-spacing: 0.025em; display: block}
#article h3 {color:#fff; font-weight: 600; font-size: 1.5em; padding-top:1.9em; padding-bottom: 1em; line-height: 1.6em; letter-spacing: 0.025em; display: block}
#article p {color:#CCCCCC; font-size: 1.5em; line-height: 2em; margin-bottom: 2em; font-weight: 400}
#article p strong {color: #fff; font-weight: 500}
#article p a, #article a {color:#B0B0B0; text-decoration:underline}
#article p a:hover, #article a:hover {color:#fff; text-decoration:none}
#article .fd {margin:3em 0; display: block; padding:5em 0 5em}
#article img {width: 100%; max-width: 780px; display: block; margin: 4em 0 4em 0; border-radius: 0.5em}
#article img.imggde {max-width: 100%}

#article .fd img {width: 100%; max-width: 780px; display: block; margin: 0 auto}





@media screen and (max-width: 1650px) {

.H #load {width:40px; /*height:10px*/margin-top:-5px; margin-left:-20px;}
body {font-size: 0.8em}
#logo {width:80px}
	#logo #SVGanime01 {top:-16px; width:117px; height:81px; left:-18px /*x0.69158*/}
	
.logonav {width:80px}
#liste1 {width:327px}
.navtrait {width:46px}
#liste3 {left:327px}

#remonte {width:37px; height:37px}
	#remonte img {width:16px; margin-left:-8px; margin-top:-8px}
	
#cont {max-width: 800px} 
#sup {max-width: 1000px}
	#cont.contact {width: 100%; max-width: 100%}
	
}




@media screen and (max-width:1320px) {
body {font-size: 0.72em}
/*#logo {width:72px}	
.logonav {width:72px}*/
	
#liste1 {width:294px}
.navtrait {width:41px}
#liste3 {left:294px}
	
#cont {max-width: 650px} 
#sup {max-width: 880px}
	#cont.contact {width: 100%; max-width: 100%}
	
}



@media screen and (max-width:1140px) {
#navnoir {width:72%;}
	#navdecale {margin-left: 32%}
#liste1 {width:270px; font-size: 0.9em}
#liste2 {font-size: 0.9em}	
.reseaux {bottom:2em}
#liste3 {bottom:1.2em; left:270px;letter-spacing:normal}
	#liste3 li {padding-right:0.8em}
	#liste3 li span, #liste3 li a {line-height: 1.7em; padding: 0.2em 0 0.2em 0}	
	
	
.Projets li a .infos {font-size: 1.05em; line-height: 1.7em;}

#part2 h3, #part3 h3 {margin-left:0% }
#part2 .desc, #part3 .desc {margin-left:25%}
.servicesPlusInt {margin-left:25%}		
	
#col1 {margin-right:8%}
#col2, #col3{margin-right:6%}	
	
#contact01 {width:68%; }
#contact02 {width:30%; }
	
}



@media screen and (max-width:980px) {
	
#MOB {display: block}
.retMob {display:block; clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float:none}

.navigation {width:100%; height:auto; position:relative; left:0;background-color:#000}
	.H .navigation {width:100%; height: 100%; position: fixed; left:102%; bottom:auto; top:0; z-index:900; overflow:hidden; transform-origin:0 100%}
	.navigation .fondnav {display: none}
	.H .navigation .fondnav {display:none; position:absolute; z-index:900; top:50%; left:50%; width: auto; height: auto}
	.navigationInt {width:100%; height:100%; overflow: scroll; overflow-y: scroll; overflow-x: hidden;}
	.H .navigationInt {height:100%}	
	
#navnoir { display: none}		
#navdecale {margin-left:0; padding-left: 8%; width:auto; height:auto}
#liste1 {float:none; width:100%; margin-top:110px; margin-bottom:0;}
#liste1 ul { font-size:3.1em; letter-spacing: 0.04em}
#liste2 { float:none; padding-top:2em; margin-top: 3em}	
#liste2 ul { font-size:2.5em; letter-spacing: 0.04em}	
	#liste1 li a {line-height: 1.4em; padding: 0}
	#liste2 li {margin-bottom: 0.1em}
	#liste2 li a {line-height: 1.3em; padding: 0.1em 0; }	
	#liste1 li a img {top:0.55em}
	#liste2 li a img {top:0.55em}
	#liste1 li a img, #liste2 li a img { visibility: hidden}
	#liste1 li .mactifnav img, #liste2 li .mactifnav img {visibility: visible}
	
.navtrait {width:40px; height: 2px;}
	#liste1 .navtrait {display: none}
.reseaux {position:relative; left:0; bottom:0; padding-top:2.4em;}
	.reseaux li {margin-right: 1.3em}	
#liste3 {position: relative; bottom:0; left:0; letter-spacing: 0.025em; padding-top:4em; padding-bottom: 10em; font-size:1.05em;}
	#liste3 li {padding-right:1.3em}
	#liste3 li span, #liste3 li a {line-height: 1.8em; padding: 0.4em 0 0.4em 0;}
	#liste3 .ret, #liste3 .retMob {clear:both; width:0; height:0; line-height:0; margin:0; padding:0; float:none; display: block}
	
	
.Projets li.proj {width: 100%; margin-right: 0%; float: none; display: block; padding-bottom: 7em}
.Projets li.sansM {margin-right:0;}
.Projets li.ret {width: 0; margin: 0; padding: 0; float: none; display: block; clear: both}	
.Projets li a {overflow:visible}
.Projets li a strong {position: relative; top:0; left:0; color:#fff; width:100%; display: block}
.Projets li a .titre { font-size: 1.4em; line-height: 1.5em; padding-bottom: 0.7em; padding-top: 1em; display: block; font-weight: 500}
.Projets li a .infos {font-size: 1.15em; line-height: 1.8em; display: block; letter-spacing: 0.025em; max-width: 550px}
.Projets li a i {display: block; width:3em; height: 2px; background-color: #003ce7; z-index: 3; transform-origin: 0 0; margin-top: 3em}

#blog {padding-top: 3.5em}
#blog .arti {float: none; width: 100%; margin-right: 0; padding-bottom: 7em}
#blog .arti.sansM {margin-right: 0}
#blog .arti.ret {width: 0; margin: 0; padding: 0; float: none; display: block; clear: both}	
	
.lientous {font-size: 2.2em}

.archive01 { margin-top: 2em; width: 100%; margin-right: 0; float:none; display: block}
.archive02 { margin-top: 0; width: 100%; margin-right: 0; float:none; display: block}	
	
#part2 h3, #part3 h3 {margin-left:0%; font-size: 3em }
#part2 .desc, #part3 .desc {margin-left:15%; max-width: 450px}		
	.brS {display: none}
#part2 .desc {margin-bottom: 5em}	
	
.im1 {width:65%}
.im2 {width:22%; margin-right:0; }	
	
.servicesPlusInt {margin-left:15%; margin-top:5em; width:85%; max-width: 450px}

#bas {padding:6em 0 10em 0; margin-top: 10em; }
		#col1 {margin-left:0; margin-right:0; display:block; float:none}
			#col1 strong {padding-top:1.2em; padding-bottom:0.8em; font-size:1.5em;}
			#col1 p {font-size:1.2em}
		#col2, #col3, #col4 {margin-right:0; display:block; float:none}
			#col2 strong, #col3 strong, #col4 strong {padding-top:2.3em; padding-bottom:1.2em; font-size:1.3em}
			#col2 li a, #col3 li a, #col4 li a, #col4 li span {padding-bottom:0.5em; font-size:1.3em; }
				#col2 li a i, #col3 li a i, #col4 li a i {bottom:0.2em}


#cont {width: 100%; max-width: 550px} 
#sup {width: 100%; max-width: 550px; margin-top: 4em}
#sup .col {width: 100%; float:none; margin-right:0; padding-bottom:0.5em}
#sup .col p {font-size: 1.3em; line-height: 1.8em}			
#visu img{width: 100%; display: block; margin-bottom:2em}
	
#article {width:90%;}	
	
#cont.contact {width: 100%; max-width: 100%}	
#contact01 {width:63%; padding-bottom:8em}
#contact02 {width:35%; margin-top:4em;}	
	
}	


@media screen and (max-width:710px) {
.H #load {width:32px; /*height:8px*/margin-top:-4px; margin-left:-16px;}

#MOB2 {display: block}
	
#blog .arti a .b1 {bottom:2em}
#blog .arti a .b1 strong {font-size:2em; line-height: 1.2em}
#article {width:100%;}	

#part2 .desc, #part3 .desc {margin-left:10%; max-width: 450px}	
.servicesPlusInt {margin-left:10%; margin-top:5em; width:90%; max-width: 450px}
	
#contact01 {float:none; width:100%; margin-right:0; padding-bottom:4em}
#contact02 {float:none; width:100%; margin-top: 0 }	
	
	
#part4 {color:#fff; padding-bottom:0px; position:relative; padding-top: 10em}	
#References {width: 100%; }
#References li {width:40%; float: left; margin-right:20%; margin-top:4em}
#References li img {width: 100%; display: block}
#References li.refsansM {margin-right: 0}
	#References li.refsansMmob {margin-right: 0}
#References li.ret {display: none}
#References li.refretMob {width: 0; margin: 0; padding: 0; float: none; display: block; clear: both}	
	
}