html { overflow-x: hidden; }
body {
	width: 100%;
	height: auto;
	min-width: 600px;
	overflow-x: hidden;
	background-color: #F6F6F6; 
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,0);
}

.cls-1 { fill: #f6f6f6; transition-duration: 0.4s;}
.cls-2 { fill: #333; transition-duration: 0.4s;}

.mobilSupr { display: inline-block !important; }
.justMobil { display: none !important; }

/* MARGES */
.padding-top { padding-top: 100px; }
.padding-bottom { padding-bottom: 100px; }
.margin-top { margin-top: 30px; }
.margin-bottom { margin-bottom: 30px; }
.marginLeft {margin-left: -70px;}

/* WIDTH */
.width-full { display: table; position: relative; width: 100%; float: top; table-layout: fixed; word-spacing: -4em; }
.width-max { display: table; position: relative; width: 100%; margin: 0 auto; float: top; table-layout: fixed; word-spacing: -4em; }

/* CONTENU */
.contenu { display: inline-block; position: relative; background-size: cover; background-position: center; vertical-align: middle; word-spacing: 0em; }

/* COLONNES */
.deuxColones { column-count: 2; column-gap: 60px; }

/* COLOR // BACKGROUND */
.color-background-white { background-color: rgba(255,255,255,1); }
.color-background-black { background-color: #333; }
.color-background-vert { background-color: #00FF99; }
.color-background-orange {background-color: #E8A868; }
.color-background-application { background-color: rgba(144,141,196,1); }
/* COLOR // TYPO */
.color-typo-white { color: rgba(255,255,255,1); }
.color-typo-black { color: #40444E; }
.color-typo-application { color: rgba(144,141,196,1); }

/* BOX // WIDTH */
.entier {width: calc((100% / 1) - 60px); padding: 10px 30px; }
.demi {width: calc((100% / 2.01) - 60px ); padding: 10px 30px; }
.tier {width: calc((100% / 3.01) - 60px); padding: 10px 30px; }
.deuxtier {width: calc(2*(100% / 3.01) - 60px); padding: 10px 30px; }
.quart {width: calc((100% / 4.01) - 60px); padding: 10px 30px; }
.quart-moins {width: calc((100% / 4.01) - 20px); padding: 10px 10px; }
.troisquart {width: calc(3*(100% / 4.01) - 60px); padding: 10px 30px; }
.troisquart-moins {width: calc(3*(100% / 4.01) - 20px); padding: 10px 10px; }
.cinquieme {width: calc((100% / 5.01) - 60px); padding: 10px 30px; }
.sixieme {width: calc((100% / 6.01) - 60px); padding: 10px 30px; }
.huitieme {width: calc((100% / 8.01) - 60px); padding: 10px 30px; }
.huitieme-moins {width: calc((100% / 8.01) - 20px); padding: 10px 10px; }

.contenu .contenu.demi { padding: 0 0 0 0; width:calc(100% / 2.03); }
.avec-fleche { background-image: url(../svg/pictogramme-fleche.svg); background-size: 10px; background-repeat: no-repeat; padding-left: 20px; }
/* FONT // FAMILY */
.font-paragraphelight { font-family: 'light', sans-serif; }
.font-paragrapheregular { font-family: 'regular', sans-serif; }
.font-paragraphemedium { font-family: 'medium', sans-serif; }
.font-paragraphebold, b { font-family: 'bold', sans-serif; }

.font-cap { text-transform: uppercase; }
.font-underline { text-decoration: underline; }
.font-italique { font-style: italic; }

.para-justify { text-align: justify; }
.para-center { text-align: center; }
.para-right { text-align: right; }

.letter-spacing-4 { letter-spacing: 4px; }
.letter-spacing-2 { letter-spacing: 2px; }
.letter-spacing-1 { letter-spacing: 1px; }

.size-petit { font-size: 13px; line-height: 20px; }
.size-normal { font-size: 15px; line-height: 24px; }
.size-grand { font-size: 17px; line-height: 28px; }
.size-big { font-size: 26px; line-height: 34px; }
.size-ultra { font-size: 44px; line-height: 48px; }

.vertical-align-top { vertical-align: top; }
.vertical-align-middle { vertical-align: middle; }
.vertical-align-bottom { vertical-align: bottom; }

sup {
	display: inline-block;
	vertical-align: super;
	font-size: 47%;
	line-height: 0%;
}

.noPaddingHeight {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.fleche-application-up { background-image: url(../svg/fleche-application-up.svg); }
.fleche-corpo-up { background-image: url(../svg/fleche-corpo-up.svg); }

/* ESPACE VIDE */

.espace-vide-10 { height: 10px; width: 100%; }
.espace-vide-20 { height: 20px; width: 100%; }
.espace-vide-30 { height: 30px; width: 100%; }
.espace-vide-50 { height: 50px; width: 100%; }
.espace-vide-60 { height: 60px; width: 100%; }
.espace-vide-100 { height: 100px; width: 100%; }

/* PARAGRAPHE */

img.portrait {
	position: relative;
	display: block;
	border-radius: 50%;
	width: 70%;
	margin: 0 auto 30px auto;
}

a { text-decoration: none; color: #333333; transition-duration: 0.4s; }
a:hover { text-decoration: none; color: #999; }

a.bouton {
	display: inline-block;
	padding: 12px;
	box-shadow: inset 0 0 0 1px #413E4B;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 10px;
	font-family: 'regular', sans-serif;
	cursor: pointer;
}

p {
	position: relative;
	color: #413E4B;
	padding: 0px;
	font-family: 'light', sans-serif;
	font-size: 14px;
	line-height: 24px;
	text-align: justify;
	margin: 10px 0px;
}

sup {	line-height: 0px; }

h1 {
	text-align: center;
	font-family: 'regular', sans-serif;
	font-size: 26px;
	line-height: 34px;
	margin: 10px 0px;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: #413E4B;
}

h2 {
	text-align: left;
	font-family: 'light', sans-serif;
	font-size: 26px;
	line-height: 34px;
	margin: 10px 0px;
	text-transform: uppercase;
	color: #413E4B;
}

h3 {
	display: inline-block;
	font-family: 'bold', sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.03em;
	color: #413E4B;
	margin: 10px 0px;
}

h4 {
	display: inline-block;
	font-family: 'light', sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 22px;
	margin: 10px 0px;
	letter-spacing: 2px;
}

h5 {
	display: inline-block;
	font-family: 'light', sans-serif;
	/*text-transform: uppercase;*/
	font-size: 16px;
	line-height: 28px;
	color: #413E4B;
	margin: 10px 0px;
}

ul.liste-simple {
		display: block;
}

ul.liste-simple li {
		display: block;
		font-family: 'light', sans-serif;
		font-size: 14px;
		line-height: 25px;
		padding: 6px 0 6px 20px;
		background-image: url('../svg/pictogramme-fleche.svg');
		background-size: 10px;
		background-position: left 9px;
}

/* GAUCHE */

.dev {
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,0);
}

#partieGauche {
	position: absolute;
	width: 100px;
	height: calc(100% - 120px);
	min-height: 250px;
	margin: 60px;
	z-index: 1000;
}

#logoPrincipal {
	position: relative;
	left: 0px;
	transition-duration: 0.4s;
} #logoPrincipal.withfooter {
	left: -400px;
}

#partieGaucheMenu {
	position: absolute;
	top: 200px;
	left: 0px;
	width: 100%;
	transition-duration: 0.4s;
	transition-delay: 0.2s;
}

#partieGaucheMenu.hide {
	left: -400px;
}

#partieGaucheMenu ul {
	margin-top: 40px;
}

#partieGaucheMenu ul li {
	display: inline-block;
	position: relative;
	width: 100%;
}

#partieGaucheMenu ul li a {
	display: inline-block;
	width: 100%;
	text-align: right;
	cursor: pointer;
}

#partieGaucheMenu ul li a.application:hover { color: #6F81A3; }
#partieGaucheMenu ul li a.communication:hover { color: #E8635D; }
#partieGaucheMenu ul li a.modelisation:hover { color: #8CBE9D; }
#partieGaucheMenu ul li a.production:hover { color: #E8A868; }

/* DROITE */

#partieDroiteAbsolute {
	position: fixed;
	right: 0px;
	width: 180px;
	height: 60px;
	margin: 60px;
	z-index: 1000;
}

#partieDroiteFixe {
	position: fixed;
	right: 0px;
	width: 180px;
	height: calc(100% - 240px);
	margin: 220px 60px 60px 60px;
	z-index: 1000;
}

ul#menuPage li a {
	font-size: 12px;
	line-height: 16px;
	display: inline-block;
	width: 100%;
	text-align: right;
	cursor: pointer;
	text-transform: uppercase;
	font-family: 'light', sans-serif;
}

#interfasse-scroll {
	position: relative;
	overflow: visible;
}

#interfasse-scroll img {
	padding: 30px 0;
}

#interfasse-scroll img.deco {
	width: 300px;
	position: absolute;
	left: 65%;
	padding: 0;
}

#ligneBasCentre {
	position: relative;
	height: 100px;
	width: calc(100% - 300px);
	background-color: #40444E;
	transform: skew(27deg);
	box-shadow: -100px 0 0 0 #40444E;
}

#ligneBasCentre-lettres {
	position: absolute;
	left: 60px;
	top: -60px;
	height: 100px;
	transform: skew(-27deg);
}

#ligneBasCentre-lettres p img {
	margin: 0 4vw;
	display: inline-block;
	height: 110px;
}

/* CENTRE */

#partieCentre {
	position: absolute;
	left: 240px;
	width: calc(100% - 400px - 200px);
	height: 60px;
	margin: 60px;
	z-index: 1000;
}

#interfasse-filArianne {
	position: absolute;
	top: -200px;
	height: auto;
	width: auto;
	padding: 0 0 0 15px;
	transition-duration: 0.4s;
} #interfasse-filArianne.open { top: 0px; }

#interfasse-reseauxSociaux {
	position: absolute;
	top: 0px;
	right: 0px;
	height: auto;
	width: auto;
	padding: 0 15px 0 0;
}

#interfasse-reseauxSociaux a {
	padding: 0 8px;
	vertical-align: sub;
}

#footer-interfasse-reseauxSociaux {
	position: absolute;
	bottom: 70px;
	right: -160px;
	height: auto;
	width: 110px;
	transform: skew(-27deg);
}

#footer-interfasse-reseauxSociaux a {
	padding: 0 8px;
	vertical-align: sub;
}

#interfasse-menuPortflio {
	position: absolute;
	top: -200px;
	height: auto;
	width: calc(100% - 60px);
	margin: 15px;
	transition-duration: 0.4s;
} #interfasse-menuPortflio.open { top: 0px; }

#interfasse-menuPortflio ul.entrerMenu {
	position: relative;
	display: table-cell;
	padding-right: 20px;
}

#interfasse-menuPortflio ul.entrerMenu a {
	font-size: 12px;
	line-height: 16px;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.ouvertureMenu, .fermetureMenu { display: inline-block; vertical-align: middle; padding-right: 10px; cursor: pointer; }

.niveau1 a { font-family: 'regular', sans-serif; }
.niveau2 a { font-family: 'light', sans-serif; }

#interfasse-menuPortflio ul.entrerMenu ul.sousMenu { display: none; }
#interfasse-menuPortflio ul.entrerMenu.open ul.sousMenu { display: block; }

/* MENU PRINCIPAL */

#menuPrincipal {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 500px;
	margin: -100px 0;
	z-index: 10000;
}

#menuCommunication,
#menuApplication,
#menuModelisation,
#menuProduction {
	position: absolute;
	width: 500px;
	height: 100px;
}

.menuPrincipalLien {

	transition-duration: 0.4s;
}

#menuApplication { transition-delay: 1.6s; }
#menuProduction { transition-delay: 1.8s; }
#menuCommunication { transition-delay: 2s; }
#menuModelisation { transition-delay: 2.2s; }

#menuCommunication .menuTitrePrincipal, #menuModelisation .menuTitrePrincipal { position: absolute; right: 0px; }
#menuCommunication .menuTitrePrincipal p, #menuModelisation .menuTitrePrincipal p  { text-align: left; }
#menuCommunication .menuListeProjet, #menuModelisation .menuListeProjet { position: absolute; right: 0px; text-align: left; top: 16px; }
#menuCommunication .menuListeProjet p, #menuModelisation .menuListeProjet p { text-align: left; }
#menuCommunication .descripionCategorie, #menuModelisation .descripionCategorie { position: absolute; right: 190px; }

#menuApplication .menuTitrePrincipal, #menuProduction .menuTitrePrincipal { position: absolute; left: 0px; }
#menuApplication .menuTitrePrincipal p, #menuProduction .menuTitrePrincipal p  { text-align: right; }
#menuApplication .menuListeProjet, #menuProduction .menuListeProjet { position: absolute; left: 0px; text-align: right; top: 16px; }
#menuApplication .menuListeProjet p, #menuProduction .menuListeProjet p { text-align: right; }
#menuApplication .descripionCategorie, #menuProduction .descripionCategorie { position: absolute; left: 200px; }


.menuTitrePrincipal {
	width: 160px;
}

.menuTitrePrincipal p {
	font-family: 'bold', sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 2px 0px 2px 0px;
	cursor: pointer;
}


#menuCommunication { top: calc(50% + 200px); left: calc(50% - 250px - 90px); }
#menuApplication { top: calc(50% - 350px); left: calc(50% - 250px - 110px); }
#menuModelisation { top: calc(50% + 350px); left: calc(50% - 250px + 120px); }
#menuProduction { top: calc(50% - 220px); left: calc(50% - 250px + 80px); }

#menuLigneCommuication.hide { width: 0px; }
#menuLigneModelisation.hide { width: 0px; }
#menuLigneApplication.hide { width: 0px; }
#menuLigneProduction.hide { width: 0px; }

#menuLigneCommunication {
	position: absolute;
	width: 100px;
	height: 1px;
	background-color: black;
	top: -20px;
	left: 400px;
	transform-origin: top left;
	transform: rotate(-118deg);
	transition-duration: 4s;
}

#menuLigneModelisation {
	position: absolute;
	width: 310px;
	height: 1px;
	background-color: black;
	top: -20px;
	left: 400px;
	transform-origin: top left;
	transform: rotate(-118deg);
	transition-duration: 4s;
}

#menuLigneApplication {
	position: absolute;
	width: 200px;
	height: 1px;
	background-color: black;
	top: 100px;
	left: 160px;
	transform-origin: top left;
	transform: rotate(60deg);
	transition-duration: 4s;
}

#menuLigneProduction {
	position: absolute;
	width: 50px;
	height: 1px;
	background-color: black;
	top: 100px;
	left: 160px;
	transform-origin: top left;
	transform: rotate(60deg);
	transition-duration: 4s;
}



.menuListeProjet {
	width: 160px; transition-duration: 0.4s; transition-delay: 0.2s;
}

.menuListeProjet p {
	font-family: 'light', sans-serif;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	padding: 2px 0px 2px 0px;
}

.menuListeProjet p {
	font-family: 'light', sans-serif;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	padding: 2px 0px 2px 0px;
}

.hide { opacity: 0; transition-duration: 0.4s; transition-delay: 0.2s; }

.descripionCategorie {
	position: absolute;
	top: 0px;
	width: 300px;
	word-spacing: 0em;
	font-family: 'regular', sans-serif;
	font-size: 10px;
	line-height: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	text-align: justify;
	transition-duration: 0.4s; transition-delay: 0.6s;
}


li.menuListeProjetLien {
	display: block;
	width: 100%;
	word-spacing: 0em;
}

.menuTitrePrincipal p img, li.menuListeProjetLien img { opacity: 0; transition-duration: 1s; }
.menuTitrePrincipal p:hover img, li.menuListeProjetLien:hover img { opacity: 1; }

/* CONTENU */

#partieContenu {
	position: relative;
	left: 240px;
	width: calc(100% - 400px - 200px);
	height: auto;
	margin: 180px 60px 0 60px;
}

.decalage {
	margin-bottom: 90px;
	margin-left: -100px;
}

.ligne {
	display: inline-block;
	position: absolute;
	margin-top: 60px;
	height: 1px;
	background-color: black;
	transform: rotate(60deg);
	transform-origin: top left;
}

.ligneBas {
	display: inline-block;
	position: relative;
	margin-top: 0px;
	left: 50%;
	height: 1px;
	background-color: black;
	transform: rotate(60deg);
	transform-origin: top left;
}

p.surLigne {
	margin: 100px 0;
	padding: 20px 0;
	z-index: 1000;
	background-color: #F6F6F6;
}

.ligneHidden { overflow: hidden; }

.ligneTravers {
	position: absolute;
	top: 50%;
	height: 1px;
	width: 100%;
	background-color: black;
	transform-origin: center;
	transform: rotate(60deg);
	z-index: -100;
	transition-duration: 1s;
}

@media screen and (max-width: 1000px) {
	.decalage { margin-bottom: 90px; margin-left: 0px; }
	.ligne { margin-top: 60px; transform: rotate(90deg); margin-left: -25px; }
	.ligneBas { transform: rotate(90deg); }
	.ligneTravers { transform: rotate(90deg); }
}


/* LISTES SELECTION */

.categorie { font-family: 'regular', sans-serif; cursor: pointer; }
.categorie.active { font-family: 'bold', sans-serif; }
.selection { display: none; }
.selection p { display: none; }
.selection.active { display: inline-block; }
.selection.active p { display: block; }

/* FOOTER */

#footer-principal {
	padding: 200px 0 60px 0;
}

#footer-principal p {
	padding-top: 0px;
	padding-bottom: 0px;
}

#logoFooter {
	position: absolute;
	left: -240px;
	transition-duration: 0.4s;
} #logoFooter.hide {
	left: -840px;
}

/* GALERIE POP */

#galerie-pop {
	display: block;
	position: absolute;
	top: 0px;
	width: 0%;
	min-width: 0px;
	height: 100%;
	right: 0px;
	transition-duration: 1s;
	z-index: 10000001;
	background-color: #333;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	cursor: pointer;
}

#galerie-pop.close {
	position: fixed;
	width: 0%;
	height: 100%;
}

#galerie-pop.open {
	position: fixed;
	width: 100%;
	height: 100%;
}

#galerie-pop #signature {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 100%;
	height: 200px;
	background-image: url('../svg/logoPrincipalBlanc.svg');
	background-size: 120px;
	transition-duration: 0.6s;
	background-position: center;
	background-color: #40444E;
} @media screen and (max-width: 1000px) { #galerie-pop #signature { right: -100%; } }

#galerie-pop #close {
	position: absolute;
	top: 0px;
	width: 100px;
	height: 100px;
	right: 0px;
	background-image: url('../svg/pictogramme-croixBlanche.svg');
	background-position: center center;
	background-size: 40px;
	transform: rotate(45deg);
	z-index: 1000;
}

.pop-video { cursor: pointer; }

.pop-video.accueil::before {
	content: "";
	position: absolute;
	top: 0px;
	width: calc(100% - 60px);
	height: calc(100% - 20px);
	background-image: url('../svg/pictogramme-lancementVideo-blanc.svg');
	background-position: 95% 65%;
	background-size: 25%;
	background-repeat: no-repeat;
	transition-duration: 0.4s;
}

.pop-video.accueil:hover::before {
	background-position: 100% 65%;
}

.pop-video.accueil.formation::after,
.pop-video.accueil.bornes::after,
.pop-video.accueil.studio::after {
	content: "";
	position: absolute;
	top: 0px;
	width: calc(100% - 60px);
	height: calc(100% - 20px);
	background-position: left 60%;
	background-size: 25%;
	background-repeat: no-repeat;
	transition-duration: 0.4s;
}

.pop-video.accueil.formation::after { background-image: url('../svg/pictogramme-titreVideo.svg'); }
.pop-video.accueil.bornes::after { background-image: url('../svg/pictogramme-titreBornes.svg'); }
.pop-video.accueil.studio::after { background-image: url('../svg/pictogramme-titreStudio.svg'); }

.pop-video.fleche::before {
	content: "";
	position: absolute;
	top: 0px;
	width: calc(100% - 60px);
	height: calc(100% - 20px);
	background-image: url('../svg/pictogramme-flecheBlanche.svg');
	background-position: 50% 55%;
	background-size: 20%;
	background-repeat: no-repeat;
	transition-duration: 0.4s;
}

.pop-video.fleche:hover::before {
	background-position: 100% 55%;
}


#galerie-pop video {
	width: 100%;
	height: 100%;
}

/*  ILLUSTRATION */

.illustration {
	/*background: linear-gradient(80deg, rgba(64,68,78,0.7) 0%, rgba(64,68,78,1) 70%);*/
	height: 380px;
	width: 100%;
	box-shadow: inset 0 70px 0 0 #F6F6F6;
	background-size: cover;
	background-position: center right;
	margin-top: 30px;
	background-color: #413E4B;
}

ul.illustration-liste {
	display: table;
	width: 100%;
	height: 100%;
}

ul.illustration-liste li {
	position: relative;
	display: table-cell;
	height: 100%;
	width: 50%;
	z-index: 100;
	transition-duration: 0.4s;
}
ul.illustration-liste li:nth-child(1) {
	background-image: url('../svg/illustration-lettreA.svg');
	background-size: contain;
	background-position: right;
}

.illustration.application ul.illustration-liste li:nth-child(1) {
	background-image: url('../svg/illustration-lettreA-application.svg');
}

ul.illustration-liste li:nth-child(1) p.titre1,
ul.illustration-liste li:nth-child(1) p.titre2 {
	display: block;
	text-transform: uppercase;
	text-align: left;
}

ul.illustration-liste li:nth-child(1) p.titre1 {
	margin-top: 150px;
	width: 60%;
	font-family: 'medium', sans-serif;
	font-size: 40px;
	line-height: 50px;
}

ul.illustration-liste li:nth-child(1) p.titre2 {
	width: 70%;
	font-family: 'light', sans-serif;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 1px;
}

.illustration.application ul.illustration-liste li:nth-child(1) p.titre2 { color: rgba(144,141,196,1); }

ul.illustration-liste li:nth-child(2) {
	background-size: contain;
	background-position: left center;
}

ul.illustration-liste li:nth-child(2)::before {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	height: 0px;
	width: 100%;
	height: 100%;
	background-image: url('../svg/pictogramme-lancementVideo-blanc.svg');
	background-size: 50%;
	background-position: right calc(50% + 35px) ;
	background-repeat: no-repeat;
	transition-duration: 0.4s;
}

ul.illustration-liste::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 50%;
	height: 100%;
	background-color: #F6F6F6;
	transform: skewX(26.5deg);
	transform-origin: bottom right;
	transition-duration: 0.4s;
}

.illustration:hover { cursor: pointer; }
.illustration:hover ul.illustration-liste li:nth-child(1) { width: 55%; }
.illustration:hover ul.illustration-liste li:nth-child(2) { width: 45%; }
.illustration:hover ul.illustration-liste li:nth-child(2)::before { background-size: 55%;
background-position: 90% calc(50% + 35px) }
.illustration:hover ul.illustration-liste::after { width: 55%; }