/* 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;}


/* Fonts 

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

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

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

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




body {font-size: 1em; font-family: 'NEW', sans-serif; margin:0; font-weight:400; height:100%; width:100%; position:relative; 
		 -webkit-user-select: none; -moz-user-select: none;  -khtml-user-select: none; -ms-user-select: none; font-variant-ligatures: no-common-ligatures;}

body.fondclair {background-color:#F9F9F9; color:#151618}
body.fondblanc {background-color:#fff;color:#151618}
body.fondnoir {background-color:#060606; color:#fff}
	
	
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; }

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

#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 .anSX2 {visibility: hidden; 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% }

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

.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:4%; width:64px; z-index:950; cursor: pointer; background-color: rgba(255, 255, 255, 1); overflow: hidden; border-radius: 8px; box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.06);}
	#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; display: none}
			.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 i {position: absolute; bottom:0.55em; width: 0.25em; height:1px; display: block; left:-27px; background-color:#003ce7}
#liste1 li .mactifnav {padding-left: 18px; color:#979797}
#liste1 li .mactifnav i {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 i {position: absolute; bottom:0.5em; width: 0.25em; height:1px; display: block; left:-20px; background-color:#003ce7}
#liste2 li .mactifnav {padding-left: 12px; color:#979797}
#liste2 li .mactifnav i {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:92%; 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}
.H body.fondblanc #SVGanime01 .traith path, .H body.fondclair #SVGanime01 .traith path {stroke:#161b22;}

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


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

.intro-titre01 {font-size:2.7em; font-weight:400; line-height: 1.3em; color:#151618; display: block; letter-spacing: -0.014em}
.intro-titre01 span, .intro-titre01 strong {color:#8B8B8B}
.intro-titre01 b {font-weight: 400}

.intro-titre02 {color:#737373; font-weight:400; font-size:1.1em; line-height: 1.5em; padding-top:2em; display: block;}
.intro-titre02 span {color:#737373}
.intro-titre02 b {font-weight: 400}

.intro-titre03 span{font-size:2.7em; font-weight:400; line-height: 1.3em; color:#151618; display: block; letter-spacing: -0.014em}
.intro-titre03 strong, .intro-titre03.texteanim strong {color:#8B8B8B; font-size: 1.1em; line-height:1.6em}
.intro-titre03.texteanim strong b {line-height:1.6em}
.intro-titre03 b {font-weight: 400}


.initule {width: 100%; padding-bottom: 3em; padding-top: 1.3em; color:#737373; font-size: 1em; font-weight: 400; position: relative; margin-top:6em}
.initule i {width: 100%; display: block; position: absolute; top: 0; left: 0; height: 1px; background-color:#E3E3E3}

.Competences {margin-top:5em; margin-bottom:10em}
.Competences li {display: inline-block}
	.Competences strong {color:#fff; background-color:#003ce7; border-radius:5em; padding: 0.6em 1.4em; margin-right: 1em; font-size: 0.9em; font-weight:400; display: inline-block; position: relative; margin-bottom:1em} 

.ser-par1 {width: 100%; margin-top: 12em}
.ser-par3quart {width:75%; }
.ser-par2 {width: 100%;}
.ser-par2.avecmarge {margin-top:7em}
.serG {float: left; width: 48%; margin-right: 4%}
.serD {float: right; width: 48%}
.serDmarge {margin-top:15em}

.reaext {width:100%; margin-bottom:5em; overflow: hidden; z-index: 10; transform-origin: 0 0; position: relative; border-radius:5px}
.reaext img {width: 100%; display: block}

.reaext2 {width:100%; margin-bottom: 8em;  overflow: hidden; z-index: 10; transform-origin: 0 0; position: relative; border-radius:5px}
.reaext2 img {width: 100%; display: block}


.ser-par2 h2, .ser-par2 h3 {font-size:2.1em; font-weight:400; color:#151618; padding-top: 0.2em; margin-bottom:3em; line-height: 1.3em}
.ser-par2 p {font-size:1.7em; font-weight:400; line-height: 1.5em; color:#151618; padding-top: 0.2em; padding-bottom: 2em}

.serv-legende strong {font-size:1.6em; font-weight:400; color:#151618; line-height: 1.5em; display: block}
.serv-legende span { font-size: 1em;  color:#737373; font-weight:400; line-height: 1.7em; display:block; padding-top: 0.5em}
.serv-legende a { font-size:1em; color:#003ce7; font-weight:500; line-height: 1.5em; display:inline-block;padding-top:0.9em; padding-bottom: 0.1em; 
position: relative}
.serv-legende a i {position: absolute; bottom:0; left: 0; height: 1px; background-color: #003ce7; width: 100%; z-index: 8; display: block}

.ser-video {width: 100%; display: block; overflow: hidden; z-index: 10; transform-origin: 0 0; position: relative; border-radius:5px}
.ser-ligne {width: 100%; height: 1px; background-color:#151618; margin-bottom:3em; margin-top:5em}

.ser-par2 .servisu3 {width:100%; margin-bottom:5em; overflow: hidden; z-index: 10; transform-origin: 0 0; position: relative}
.ser-par2 .servisu3 img {width: 100%; display: block}

#contact01 {float: left; width:70%; padding-bottom:8em}
#contact01 h1 {font-size:1.4em; font-weight:400; color:#151618; padding-top:2.8em; margin-bottom:0.4em; line-height: 1.6em}
#contact01 ul {font-size:1.05em; font-weight:400; color:#8B8B8B; padding-top:2.8em; line-height: 1.6em}
#contact01 ul li {padding-bottom: 0.8em; display: block}
#contact01 .serv-legende a {font-size: 1.4em; font-weight: 400}
	

#contact02 {float: right; width:26%; margin-top:0.4em; font-size: 1.5em; line-height: 1.8em; overflow: hidden; border-radius: 5px}
#contact02 video {width: 100%; display: block}

.titre02 {color:#fff; font-weight:400; font-size: 1.5em; padding-top:0em; line-height: 1.6em; letter-spacing: 0.025em}
.soustitre02 {color:#87898a; font-weight: 400; font-size: 1.1em; padding-top: 0.4em; line-height: 1.6em; letter-spacing: 0.016em; display: block}
.fondblanc .titre02, .fondclair .titre02 {color:#151618; font-size:1.5em}
.fondblanc .soustitre02, .fondclair .soustitre02 {color:#8B8B8B; font-size: 1.1em; font-weight:400}

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

h3.titre03 {color:#151618; font-weight:400; font-size: 1.1em; padding-top:0em; line-height: 1.6em; letter-spacing: 0.025em}

.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; border-radius: 5px; }
/*.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.6em; line-height: 1.5em; padding-bottom: 0.7em; padding-top: 1em; display: block; font-weight:400; letter-spacing: -0.006em}
.Projets li a .infos {font-size: 1em; line-height: 1.7em; 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:#151618; 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}
.archive a.fdblanc {color:#151618}

#part2 {padding-top:15em; padding-bottom:8em; color:#000; position:relative; background-color:#F9F9F9}
	/*#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}*/
	#part2 h3, #part3 h3 {font-size:3.4em; font-weight:400; padding-top:0.8em; position:relative; margin-left:15%; display:inline-block; z-index:20; letter-spacing: -0.01em}
	#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; overflow: hidden; border-radius:5px}
	.im2 {width:14.5%; float: right; margin-right:8%; display:block; z-index:10; overflow: hidden; border-radius: 5px }	
	.im1 img, .im2 img {width: 100%; display: block}

#part3 {color:#151618; color:#fff; padding-bottom:0px; position:relative; background-color:#fff; background-color:#060606}
#part3.avecmargeB {padding-bottom: 10em}

#part4 {color:#151618; padding-bottom:0px; position:relative; padding-top: 10em; padding-bottom: 12em; background-color:#fff; background-color:#060606}	
#References {width: 92%; margin-left: auto; margin-right: auto}
#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}

#part5 {padding-bottom:12em; padding-top:10em; position:relative; background-color:#fff}
#part5.fondnoir {background-color:#060606; color:#fff; }

.servicesPlusInt {margin-left:37%; margin-top:5em; width:40em}
.depliA {font-weight:400; color:#fff; font-size: 1.2em; padding:1.3em 0; border-top:1px solid #494949; position: relative; display: block; width:100%; line-height: 1.4em; cursor: pointer; z-index: 30}
.depliAder {border-bottom:1px solid #494949}
	.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:#C8C8C8}
.H .depliB {display: none}
	.depliB p {margin: 0; padding: 0; display: block; font-size: 1.05em; font-weight:400; line-height: 1.8em}
	.depliB p strong, .depliB li strong {color:#fff; font-weight: 500}
	



#bas {background-color:#F9F9F9; background-color: #000000;  padding:8em 0; margin-top:0em; color:#151618; 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}

.reafull {width: 100%; border-radius: 5px; margin-top:5em; padding-top:8em; padding-bottom: 8em;}
.reafull .reaint {width:80%; margin-left: auto; margin-right: auto;  border-radius: 5px; overflow: hidden;  position: relative; z-index: 1}
.fd01 {background-color: #e9e9e7} .fd02 {background-color: #f8f7f3} .fd03 {background-color: #eaeaec}
.fd04 {background-color: #e9eae5} .fd05 {background-color: #fff}  .fd06 {background-color:#fcfcfc}
.fd07 {background-color:#000000}

.rea00 {width:100%; border-radius: 5px; margin-top: 5em; overflow:hidden}

.rea01 {width:38%; margin-right: 2%; border-radius: 5px; float: left; margin-top: 5em; overflow:hidden}
.rea02 {width:60%; border-radius: 5px; margin-top:5em;  float: right;  overflow:hidden}

.rea03 {width:38%; margin-right:2%; border-radius: 5px; margin-top:5em; padding-top:4em; padding-bottom:4em; float: left}
.rea04 {width:60%; border-radius: 5px; margin-top:5em; padding-top:4em; padding-bottom:4em; float: right}
.rea03 .reaint, .rea04 .reaint {width:80%; margin-left: auto; margin-right: auto;  border-radius: 5px; overflow: hidden;  position: relative; z-index: 1}

.reafull .reaint img, .rea00 img, .rea01 img, .rea02 img, .rea03 .reaint img, .rea04 .reaint img, 
.reafull .reaint video, .rea00 video, .rea01 video, .rea02 video, .rea03 .reaint video, .rea04 .reaint video
{width: 100%; display: block; position: relative; z-index: 1}

.reanime {transform-origin: 0 0}


#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} 
/*.fondblanc #cont, .fondclair #cont {color:#151618}*/
@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: 1em 0 1.5em 0}
/*.fondblanc #cont h2, .fondclair #cont h2 {color:#8B8B8B}*/
#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}


.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 {width:70%; position: relative; padding-top: 3em}
#sup .col p {color: #CCCCCC; font-size: 1.3em; line-height: 1.8em; padding-bottom: 3em}
#sup .col p a {color:#B0B0B0; text-decoration:underline}
#sup .col p a:hover {color:#fff; text-decoration:none}
#sup .col .coltrait {width: 100%; height: 1px; background-color: #535353; position:absolute; top: 0; left: 0; z-index:1}

/*.fondblanc #sup .col p, .fondclair #sup .col p {color: #151618}*/

#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: 48%; margin-right: 4%; 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; border-radius:5px}
#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:400; position: relative; padding:0.8em 0 0em 0; display: block;font-size: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:400}

#article {color: #151618; width: 80%; max-width: 1250px; margin-top: 6em; margin-left: auto; margin-right: auto}
@media screen and (max-width: 2200px) {
#article {max-width: 1000px;}
}

#article h1 {color:#151618; font-weight:500; font-size:2.5em; padding-top:0em; line-height: 1.3em; }
#article h1 span { display: block; color:#8B8B8B; font-weight:500; font-size: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:#151618; font-weight:400; font-size: 1.3em; padding-top:2em; line-height: 1.9em; display: block}
#article h3 {color:#151618; font-weight:500; font-size: 2.4em; padding-top:1.9em; padding-bottom: 1em; line-height: 1.6em; display: block}
#article p {color:#151618; font-size: 1.3em; line-height: 2em; margin-bottom: 2em; font-weight: 400}
#article p strong {color: #151618; font-weight: 500}
#article p a, #article a {color:#8B8B8B; text-decoration:underline}
#article p a:hover, #article a:hover {color:#000000; text-decoration:none}
#article .fd {margin:3em 0; display: block; padding:5em 0 5em; border-radius:5px}
#article img {width: 100%; /*max-width: 780px;*/ display: block; margin: 4em 0 4em 0; border-radius:5px}
#article img.imggde {max-width: 100%}

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





@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%}	
	
.logonav {display:block}	
	
#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}
	
	
	
	.intro-titre01 br {display: none}
	.ser-par3quart {width:100%; }
.ser-par2 {width: 100%;}
.ser-par2.avecmarge {margin-top:3em}
.serG {float: none; width:100%; margin-right:0}
.serD {float: none; width:100%}
	
.reafull {margin-top:5em; padding-top:2em; padding-bottom:2em;}
.reafull .reaint {width:90%; }

.rea00 {width:100%; border-radius: 5px; margin-top:3em; }
.rea01 {width:100%; margin-right:0; float:none; margin-top:3em; }
.rea02 {width:100%; margin-top:3em;  float:none;}

.rea03 {width:100%; margin-right:0; margin-top:3em; padding-top:2em; padding-bottom:2em; float:none}
.rea04 {width:100%; margin-top:3em; padding-top:2em; padding-bottom:2em; float:none}
.rea03 .reaint, .rea04 .reaint {width:90%; }

	
	
.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:#151618; width:100%; display: block}
	.fondnoir .Projets li a strong {color:#fff}
.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; }
		#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%;}	
	
#contact01 {float:none; width:100%; margin-right:0; padding-bottom:4em}
#contact02 {float:none; width:100%; margin-top: 0 }	
	
}	


@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; padding-bottom: 12em}	
#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}	
	
}