/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,
mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;text-align: left;}
body{line-height:1; font-family: Arial, Helvetica;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{ text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
ul {list-style: none;}
* {box-sizing: border-box; -moz-box-sizing: border-box;}



/* Fonts
---------------------------------------------------------------------- */
@font-face {font-family: 'dosis-extralight';
			src: local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url('../fonts/dosis/dosis-extralight.woff');}
@font-face {font-family: 'dosis-semibold';
			src: local('Dosis SemiBold'), local('Dosis-SemiBold'), url('../fonts/dosis/Dosis-SemiBold.otf') format('truetype');}
@font-face {font-family: 'dosis-bold';
			src: local('Dosis Bold'), local('Dosis-Bold'), url('../fonts/dosis/Dosis-Bold.otf') format('truetype');}
@font-face {font-family: 'dosis-regular';
			src: local('Dosis Regular'), local('Dosis-Regular'), url('../fonts/dosis/Dosis-Regular.otf') format('truetype');}
@font-face {font-family: 'dosis-medium';
			src: local('Dosis Medium'), local('Dosis-Medium'), url('../fonts/dosis/Dosis-Medium.otf') format('truetype');}



/* Structure
---------------------------------------------------------------------- */
html {font-size:62.5%;}
body {background: #fff; font-size:12px; overflow-x:hidden;}
body > header {display:flex; justify-content:space-between; position:fixed; top:0; left:0; background: #fff; padding:2vh 5vw; width:100%; z-index:40000;}
body > main {background: #fff; width:100%; padding-top:calc(86px + 4vh);}
body > main > section {width:100%;}
body > footer {background: #232220; width:100%; padding:2vh 0 6vh 2vw;}






/* Charte graphique élémentaire
---------------------------------------------------------------------- */
h1 {
	font-family: "dosis-bold";
	text-align: center;
	font-size:5rem;
	color:#21211f;
	font-weight: 100;
	margin:3vh 0 3vh 0;
	letter-spacing: 2px;
	padding:0 0 8px 0;
}
h2 {
	font-family: "dosis-bold";
	text-align: center;
	font-size:4rem;
	line-height: 5rem;
	/*line-height: 38px; MODIF CHARLES */
	color:#21211f;
	font-weight: 100;
	letter-spacing: 2px;
	margin:0vh 0px 0px 0px;
	padding:0 0 4px 0;
}
.content h2 {text-align: left; margin-top: 40px; font-variant: small-caps;}
h3 {
	font-family: "dosis-bold";
	font-size:18px;
	font-weight: normal;
	color:#21211f;
	margin:0px 0px 6px 0px;
	padding:0 0 3px 0;
}
h4 {}
h5 {}
h6 {}
p { margin:6px 0px; font-size:13px; text-align: justify; line-height: 1.5;}
a {}
a:hover {}
i {}
b {}
strong {}
figure { text-align: center;}
figcaption { font-size:10px; font-style: italic; text-align: center; padding-top:10px;}
figure img {min-width: 50px; max-width: 100%;}
img {}
section {}
article {}
code {}
input[type='text'],input[type='password'],input[type='email'],select, textarea {
	height: 40px;
	color:#222;
	background: #f0f0f0;
	border:1px solid #ddd;
	width:100%;
	padding:5px;
	font-size:16px;
}
textarea {height: auto; min-height: 100px;}
button, input[type='button'], input[type='submit'], a.btn {
	background: #151515;
	cursor: pointer;
	padding:8px 15px;
	color:#fff;
	font-size:16px;
	border-radius: 2px;
	border:none;
}
button:hover,
input[type='button']:hover,
input[type='submit']:hover,
a.btn:hover {
	background: #777;
}
.btn.big {padding:14px 20px; font-size:18px; min-width: 200px;}




/* Header & nav
---------------------------------------------------------------------- */
body > header {top:calc(0px - 86px - 4vh); transition:top 0.5s ease;}
body > header.on {top:0;}
body > header > * {align-self:center;}
body > header > .burger {font-size:6rem; margin-right: 3vw; color:#b0aeaa; cursor: pointer;}
body > header > .burger svg {vertical-align: middle;}

body > header > figure {max-width:350px;}
body > header > figure img {width: 100%;}

body > header > ul {flex:1; text-align: right;}
body > header > ul li {display: inline-block;}
header a.btn {display: inline-block;  margin:0 1vw 6px 1vw; padding:0.6vw 1.5vw; font-size:2.1rem; font-family: "dosis-semibold"; transition:all 0.4s ease; text-decoration: none;}
.btn.main {color:#fff; background: #773a8b; border:2px solid transparent;}
.btn.main:hover {color:#000; background: #fff; border:2px solid #773a8b;}
.btn.sec {color:#000; border:2px solid #eeedec; background: #fff; }
.btn.sec:hover {color:#fff; border:2px solid #773a8b; background: #773a8b; }

body > header > .flags {white-space: nowrap; padding-left:4vw;}
body > header > .flags a {display:inline-block; opacity:0.5; transition:all 0.3s ease; margin-left:0.4vw;}
body > header > .flags a:hover,
body > header > .flags a.on {opacity:1;}



/* NAvigation
---------------------------------------------------------------------- */
body > nav {z-index:50000; position:fixed; width:600px; max-width: 100vw; background:#412a6e; color:#fff; left:-100%; top:0; height:100vh; transition:all 0.5s ease;}
body > nav.on {left:0;}
body > .navCover {width:0%;opacity:0;height:100vh; background:#000;position:fixed;top:0;left:0; z-index:45000; transition:all 0.5s ease;}
body > .navCover.on {width:100%; opacity:0.5;}
body > nav header {display:flex; justify-content:space-between; padding:2vh 5vw; width:100%; }
body > nav > header > .burger {font-size:6rem; margin-right: 3vw; color:#fff; cursor: pointer; align-self:center;}
body > nav > ul {width:400px; margin:5vh auto 0vh auto;}
body > nav > ul.mobile {display:none;}
body > nav > ul li {position:relative;}
body > nav > ul > li {padding:0 0 2vh 0; }
body > nav > ul > li > span,
body > nav > ul > li > a {font-size:2.5rem; text-decoration: none; color:#eee; font-family: dosis-medium; letter-spacing: 0.7pt; cursor: pointer;}
body > nav > ul > li ul {display: none;}
body > nav > ul > li.open > span {cursor: auto;}
body > nav > ul > li.open ul {padding-bottom: 2vh; display: block;}
body > nav > ul > li li { margin:1vh 0 0 20px;}
body > nav > ul > li li a {font-size:2rem; text-decoration: none; color:#ddd; font-family: dosis-regular; transition:color 0.3s ease;}
body > nav > ul > li li a:hover {color:#fff;}
body > nav > ul > li.space {padding-top:3vh;}
body > nav > ul li.on::before {position:absolute;content:""; left:-17px; top:7px; height:0; width:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:10px solid #fff; }
body > nav > ul > li a.btn { display: inline-block; font-size:2.1rem; }
body > nav > ul.buts > li {text-align:center;}
body > nav > ul.buts > li a.btn {width:250px; max-width:100%; }
body > nav > ul > li.flags > a {opacity:0.5;}
body > nav > ul > li.flags > a.on {opacity:1;}
body > nav > ul > li.flags > a > img {margin-right:5px;}

/* Wrap
---------------------------------------------------------------------- */
section.wrap-page { max-width:1200px; margin-left:auto; margin-right:auto;}



/* Footer
---------------------------------------------------------------------- */
body > footer {display:flex; color:#fff;}
body > footer > section {width:65%; border-right:1px solid #555; }
body > footer > aside {width:35%; align-self:center; display:flex; flex-direction:column; justify-content:center;}
body > footer > aside > address {font-family: dosis-extralight; text-align: center; font-size:2.5rem; font-style: normal; line-height: 3rem; padding:2vh 0;}
body > footer > aside > a {display:block; padding:1vh 0; text-align: center; font-family: dosis-regular; font-size:2.5rem;  text-decoration: none; color:#fff;}
body > footer  h1 {font-size:3rem; color:#fff; margin:1vh 0;}
body > footer .nl h1 {text-align: left; }
body > footer .nl fieldset { display: table; padding-bottom:5vh;}
body > footer .nl fieldset input { display: table-cell; width:80%; height:40px; vertical-align:middle; max-width:470px;}
body > footer .nl fieldset button { display: table-cell; vertical-align:middle; width:40px; background: #773a8b; color:#fff; padding:8px; border-radius:0 2px 2px 0; height:40px; margin-left:-3px;}

body > footer .map { padding-right: 5vw;}
body > footer .map > ul {display:flex; justify-content:space-between; border-top:1px solid #555; padding-top:5vh;}
body > footer .map > ul > li > a {font-size:2rem; font-family: dosis-bold; display: block; padding-bottom: 3vh; color:#fff; text-decoration: none;}
body > footer .map > ul > li li a {font-size:1.8rem; font-family: dosis-regular; color:#fff; text-decoration: none; display:block; padding:4px 0;}
body > footer .map.company-info-links > ul {justify-content: center; align-items: center;}
body > footer .map.campany-info-links > ul li {max-width: 200px;}






/* intro
---------------------------------------------------------------------- */
section.intro {position:relative;  }
section.intro .facettes {position:relative; height:calc(100vh - 86px - 4vh); min-height: 450px;}
.facettes > svg {position:relative; z-index:10; width:100%; height: 100%; min-height: 450px; top:0; left:0;}
.facettes > hgroup {position:absolute; z-index:20; width:100%; height: 100%; top:0; left:0; padding:8px 15px; display:flex; flex-direction:column; justify-content:center; text-align: center;}
section > hgroup > *,
.facettes hgroup > * {margin:10px 0; text-align: center;}
.facettes.purple h1 {font-size:6rem; color:#fff; }
.facettes.purple h2 {color:#fff; font-family: "dosis-regular";}

section.intro .sides {position:relative; top:-70px; height:80vh;}

.sides ul {display:flex; }
.sides > ul > li {flex:1; display:inline-block; position:relative;}
.sides > ul > li figure {width:100%; height:90vh; position:relative; z-index:0; transition:opacity 0.6s ease; }
.sides > ul > li figure::after {content:""; z-index:1; top:0; left:0; height:100%; width:100%; background: rgba(0,0,0,0.1); position:absolute;}
.sides > ul > li figure img {width:100%; height:100%; object-fit: cover; z-index:0;position:relative;}
.sides > ul > li figure h1 {position:absolute; color:#fff; padding-top:30vh; z-index:2; font-size:8vw; line-height: 16rem; text-align: center; width:100%;}
.sides > ul > li > a {display:block;}
.sides > ul > li > a > div {display:flex; flex-direction:column; justify-content:start; text-align: center; height: 100%; padding-top:10vh; position:absolute; top:0; left:0; width:100%; z-index:1; opacity:0; transition:opacity 0.5s ease; }
.sides > ul > li > a > div h2 {color:#6a2883; padding:2vh; font-size:3.5rem; line-height: 4rem; }
.sides > ul > li > a > div > div {display: inline-block; margin:5vh auto 2vh auto; text-align: center;}
.sides > ul > li > a > div > svg {display: inline-block; }

.sides > ul > li.on figure {opacity: 0; }
.sides > ul > li.on > a > div {opacity:1;}

/* ANIMATIONS */
/*.sides li.on h1 {
	animation-webkit-animation: slide-top 1s ease-in-out both;
	-moz-animation: slide-top 1s ease-in-out both;
	animation: slide-top 1s ease-in-out both;
}

@keyframes slide-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		color: #000;
	}
}*/


section.facettes.grey {position:relative; }
section.facettes.grey > svg {position:absolute; height:calc(100% + 14vh); max-height: 200vh;}
section.facettes.grey > article {position:relative; z-index:20; width:100%; min-height: 50vh; top:8vh; left:0; padding:8px 15px; }
section.facettes.grey > article.content {max-width: 50vw; margin: 0 auto;}
section.facettes.grey > article > div {display:flex; flex-direction:column; justify-content:center; text-align: center; width:100%; }
.facettes.grey article > div > hgroup {padding-bottom: 30px;}
.facettes.grey hgroup h1,
.facettes.content hgroup h1 {font-size:6rem; color:#21211f; }
.facettes.grey hgroup h2,
.facettes.content hgroup h2 {color:#b7b4b0; font-family: "dosis-regular"; text-align: center;}

.over-prev {position:relative; z-index:1; top:-8vh; margin-bottom:8vh;}
.intro + .over-prev { top:-11vh;}
.over-next {position:relative; z-index:1;}
.under-prev {position:relative; top:6vh; width:100%; z-index:0; margin-bottom: 6vh;}
.under-prev > figure img {width:100%;}
.after-facette {position:relative; margin-top:-17vh; margin-bottom: 12vh;}

.icons > div > ul { width:100%; padding:0 3vw; display:flex; flex-wrap:wrap; justify-content:center;}
.icons > div > ul:not(.matrix) > li {display: inline-block; min-width:280px; text-align: center; padding:20px; flex: 1 0 21%;}
.icons > div > ul.matrix > li {display: inline-flex; width:280px; text-align: center; padding:20px; align-items: center;}
.icons > div > ul > li img {width:50%;}
.icons > div > ul:not(.matrix) > li > a {text-decoration: none; display: inline-block; text-align: center; max-width: 250px;}
.icons > div > ul.matrix > li > a {text-decoration: none; }
.icons > div > ul > li h3 {font-size:2rem; text-align: center; margin: 5px 0 10px 0; padding-top:10px;  letter-spacing: 0.7pt; transition: border-color 300ms ease; border-top:1px transparent solid;}
.icons > div > ul > li .chapo {font-size:1.5rem; text-align: center; color:#787671; font-family: "dosis-regular"; }
.icons > div > ul > li:hover a h3 {border-color:#ddd; }


/* Contenus
---------------------------------------------------------------------- */

section.features { padding:4vh 4vw; min-height: 250px;}
section.features > hgroup {margin-bottom: 4vh;}

div.content {font-family: dosis-regular; font-size:2rem; line-height: 2.6rem; color:#666;}
div.content p {font-size:2rem; line-height: 2.5rem;}
div.content ul {margin:8px 0 8px 8px; list-style:disc;}
div.content li {margin-left:12px;}
div.content li li {list-style:circle;}
div.content li li li {list-style:diamond;}




/* Facettes
---------------------------------------------------------------------- */
.grey .ft-a { fill:#fafafa; z-index:2;}
.grey .ft-b { fill:#f5f5f5; z-index:2;}
.grey .ft-c { fill:#fbfbfc; z-index:2;}

.grey .ft-d { fill:#472e78;}
.grey .ft { fill:#fafafa; z-index:1;}

.purple .ft-a { fill:#472e78; z-index:2;}
.purple .ft-b { fill:#412a6e; z-index:2;}
.purple .ft-c { fill:#54378a; z-index:2;}

.purple .ft-d { fill:#472e78;}
.purple .ft { fill:#412a6e; z-index:1;}


/* bt plus
---------------------------------------------------------------------- */
.btplus {width:15%;}
.btplus .a {stroke:#eeeeee;stroke-width:2px; fill:#ffffff;}
.btplus .b {fill:#6b2984}
.btplus text {font-family:"Arial, Helvetica, sans-serif"; font-size:80px; fill:#ffffff; z-index:2;}


/* hexa
---------------------------------------------------------------------- */
.hexa {width:140px; position:relative;}
.hexa .a {stroke:#eeeeee;stroke-width:2px; fill:#ffffff; transition:all 200ms ease;}

/* features
---------------------------------------------------------------------- */
.features { width:100%; padding:3vh 3vw; display:flex; flex-wrap:wrap; justify-content:center;}
.features > li {width:280px; position:relative; text-align: center; list-style: none; display: inline-block; padding:20px;}
.features > li > img.ico {position:absolute; top:45px; left:85px; width:40%;}
.features > li h3 {font-size:2rem; text-align: center; margin: 10px 0 10px 0; letter-spacing: 0.7pt;}
.features > li h3.all {color:#aaa; letter-spacing: 1pt;}
.features > li .chapo {font-size:1.5rem; text-align: center; color:#787671; font-family: "dosis-regular";}
.features > li:hover .hexa .a {stroke-width:4px;}


/* Banner Action
---------------------------------------------------------------------- */
.banner-action {background: #f8f8f8; padding-left:18%; position:relative;}
.banner-action .banner {width:100%;}
.banner-action > div {position:absolute; height:100%; width:36%; top:0; left:0; text-align: center; display:flex; justify-content:center; flex-direction:column; z-index:1;}
.banner-action > div > div {position:relative; z-index:0; width:300px; height:190px; background:rgba(255,255,255, 0.5); align-self:center; }
.banner-action > div > a {position:relative; width:250px; height:150px; background: #692078; color:#fff; align-self:center; font-size:2.6rem; font-family: "dosis-regular"; display:flex; justify-content:center; flex-direction:column; text-decoration: none; z-index:1; }
.banner-action > div > a * {align-self:center;}
.banner-action > div > a b {font-family: "dosis-medium";padding-top:60px;}
.banner-action > div > a s {font-size:5rem; text-decoration: none;}
.banner-action > div > a span {padding:5px 0 10px 0;}
.banner-action > div > div::before,
.banner-action > div > a::before {
	position:absolute;
	content:"";
	z-index:-1;
	top:-70px;
	left:0;
	width:0;
	border-bottom:71px solid #692078;
	border-left:125px solid transparent;
	border-right:125px solid transparent;
}
.banner-action > div > div::after,
.banner-action > div > a::after {
	position:absolute;
	content:"";
	bottom:-70px;
	left:0;
	z-index:-1;
	width:0;
	border-top:71px solid #692078;
	border-left:125px solid transparent;
	border-right:125px solid transparent;
}
.banner-action > div > a:hover {color : rgb(220, 220, 220)}
.banner-action > div > div::before {
	border-width: 0 150px 85px 150px;
	border-bottom:85px solid rgba(255,255,255,0.5);
	top:-85px;
}
.banner-action > div > div::after {
	border-width: 85px 150px 0 150px;
	border-top:85px solid rgba(255,255,255,0.5);
	bottom:-85px;
}

.banner-action.reverse {padding-left:0%; padding-right:18%;  }
.banner-action.reverse > div {left:auto; right:0; }



/* Bloc preview
---------------------------------------------------------------------- */

section.preview {display:flex; padding:0 5vw;}
section.preview > article {width:60%; display:flex; flex-direction:column; justify-content:space-around; padding-right: 3vw;}
section.preview hgroup h1 {font-size:4rem; text-align: left; margin:5vh 0 2vh 0;}
section.preview hgroup h2 {font-size:3rem; text-align: left; font-family: dosis-regular;}
section.preview .gallery-steps {border-top:1px solid #ddd; text-align: center; padding:5vh 0;}
section.preview .gallery-steps li {display: inline-block; cursor: pointer;}
section.preview .gallery-steps li div {font-size:1.6rem; color:#bbb; position:relative; padding: 3px 10px 25px 10px;}
section.preview .gallery-steps li div.on {color:#888;}
section.preview .gallery-steps li div::before {position:absolute; content:""; width:16px; height:16px; border:1px solid #ccc; bottom:0; left:calc(50% - 9px); border-radius:16px; background: #fff; z-index:0;}
section.preview .gallery-steps li div.on::after {position:absolute; content:""; width:10px; height:10px; bottom:4px; left:calc(50% - 5px); border-radius:10px; background: #000; z-index:1;}
section.preview > aside {width:40%; }
section.preview > aside img {width:100%;}



/* Logos référence
---------------------------------------------------------------------- */

.matrix {display:flex; flex-wrap:wrap; justify-content:center;}
.icons .matrix li {width:200px; border-bottom:1px solid #ddd; display:flex; flex-direction:column; justify-content:center; padding:30px 0;}
.icons .matrix li.noborder {border-bottom:0;}
.icons .matrix li img {align-self:center; width: 70%;}

/* Bloc preview
---------------------------------------------------------------------- */
.icons-line {display:flex; justify-content:space-around; padding:6vh 5vw;}
.icons-line li {padding:1vh 2vw 0 2vw; }
.icons-line li img {width:100%;}



/* Section couverte
---------------------------------------------------------------------- */
.covered-section {position:relative;}
.covered-section > img {width:100%; height:calc(100vh - 86px - 4vh); object-fit: cover; z-index:0;}
.covered-section > article {position:absolute; height: 100%; width: 100%; background:rgba(133, 24, 127, 0.7); display:flex; flex-direction:column; justify-content:center; text-align: center; top:0; left:0; z-index:1; padding:0 35px;}
.covered-section > article h1 {color:#fff; font-size: 7rem; letter-spacing: 6px;}
.covered-section > article h2 {color:#fff; font-family: dosis-regular; line-height: 4rem; font-size: 3rem;}



/* bloc-row
---------------------------------------------------------------------- */

.blocs {display:flex; justify-content:space-between;}
.blocs > * {flex:1;}


/* Map
---------------------------------------------------------------------- */
.jGmap {display: none;}
.j-Gmap, .j-Map {width: 100%; height: 90vh;}
.gmTitle {margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: 2px solid #e6e6e6;}
.gmImage {display: inline-block; max-width: 250px; max-height: 150px; margin: 15px 0 0 0; border-radius: 15px; vertical-align: top; object-fit: cover;}
.gmAddr {font-style: italic; color: #999;}
.gmContent {display: inline-block; max-width: 250px; max-height: 250px; padding: 15px; vertical-align: top; text-align: justify; overflow-y: hidden;}


/* Info contact
---------------------------------------------------------------------- */
.contact-info {padding:3vh 3vw; background: #f8f8f8;}
.contact-info h2 {padding-bottom: 3vh;}
.contact-info > ul {display: flex; flex-wrap:wrap;}
.contact-info > ul li {width:50%; text-align: center; display:flex; flex-direction:column; justify-content:space-around; min-height: 18vh; padding:4vh 0;}
.contact-info > ul li > * {align-self:center; text-align: center;}
.contact-info > ul li a, .contact-info > ul li address {font-size:1.7rem; text-decoration: none; color:#222; font-style:normal; line-height: 2rem;}
.contact-info > ul li span.hexa {
	background: #fff;
	padding:6px;
	position:relative;
	color:#773a8b;
	font-size:20px;
	display: inline-block;
	width:40px;
	height:32px;
	text-align: center;
	margin-bottom: 16px;;
}
.contact-info > ul li span.hexa::before {
	position:absolute;
	content:"";
	top:-8px;
	left:0;
	z-index:1;
	width:0;
	border-bottom:8px solid #fff;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
}
.contact-info > ul li span.hexa::after {
	position:absolute;
	content:"";
	bottom:-8px;
	left:0;
	z-index:1;
	width:0;
	border-top:8px solid #fff;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
}



/* Fonctionnalités
---------------------------------------------------------------------- */

section.content {display: flex; padding:3vh 5vw 5vh 5vw; flex-direction:row-reverse; position:relative;}
section.content.right {flex-direction:row; border-bottom: 1px solid #efefde;}
section.content.bottom {flex-direction:column-reverse; align-self: flex-start;}
section.content.top {flex-direction:column;}
section.content > aside { width:50%; text-align: center; padding:3vh; display: flex; flex-direction: column; justify-content: center;}
section.content > aside img { max-width:80%; max-height: 60vh; }

.content.bottom > aside,
.content.top > aside,
.content.bottom > article,
.content.top > article {width:100%; padding-bottom:8vh;}
.content.bottom > article > *,
.content.top > article > * {}

.content > article {width:50%; display:flex; flex-direction:column; justify-content:center;}
.content > article hgroup {text-align: left; margin-bottom: 3vh;}
.content hgroup h2 {text-align: left;}
.content hgroup h3 {text-align: left; font-size:2.4rem; line-height: 2.8rem; font-family: dosis-extralight;}
section.covered-section div.chapo,
section.content div.chapo {font-family: dosis-extralight; font-size:2.8rem; line-height: 3.2rem; margin:2vh 10% 4vh 10%; text-align: center;}
section.covered-section div.chapo {color:#fff; font-size:3rem; line-height: 3.7rem;}

.content.left > article hgroup > h1 {text-align: left;}
.content.left > article .chapo {text-align: left; font-style:italic;}
.content.no-margin {margin-bottom: 0;}


section.content.big-picture {padding:3vh 0 5vh 0;}
section.content.big-picture > aside { width:64%; text-align: center; padding:0vh;}
section.content.big-picture > article {width:36%; padding:0 4%;}
section.content.big-picture > aside img {max-height: none; max-width: 100%;}
section.content.big-picture > article hgroup {padding:10px 20px;}
section.content.big-picture > article h1 {text-align: left; font-family: dosis-regular; font-size:6.5rem; line-height: 7.6rem; }
section.content.big-picture > article .content {font-size:2rem; line-height: 2.6rem; color:#888; background:rgba(255,255,255,0.25); border-radius:10px; padding:10px 20px; }
section.content.big-picture > article .content > p {text-align: left; margin:10px 0; font-size:2rem; line-height: 2.6rem; }
section.content.big-picture.wo {width:49%; display:inline-flex;}
section.content.big-picture.wo > article {width:100%;}

section.content.under > aside { width:100%; height:100%;}
section.content.under > aside img {max-width: 100%; max-height: auto;}
section.content.under > article {position:absolute; width:50%; left: 50%; height:100%; }

/* Jobs
---------------------------------------------------------------------- */

.tpl-job-home div.job-none{
	font-size:18px;
	font-family: dosis-extralight;
	text-align:center;
	margin:35vh;
}
.tpl-job-home div.job-none span{
	padding:20px;
	border:1px solid #773a8b;
}
.tpl-job-home section.content div.chapo{text-align: left;}
.job-list div.quote-job .chapo{font-size:15px; min-height: 70px; font-family: dosis-extralight; text-align: justify;}
.job-list h2{color:#999}
.job-list{margin-bottom: 50px; padding-top: 50px;}
.job-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 20px;
    margin: 40px 0 0 0;
    border-bottom: 1px solid #efefde;
    justify-content:center;
}
.job-list ul.new-jobs {
    margin: 40px 0 10vh 0;
}
.job-list ul.old-jobs {
    margin: 40px 0 0 0;
   	align-items: center;
}
.job-list ul li {
    position: relative;
    width: calc(100% / 3 - 60px);
    margin: 30px;
    padding-bottom: 3vw;
    min-height:30vh;
    font-size:0;
    cursor: pointer;
}
.job-list ul li.job-exergue {}
.job-list ul li.job-normal {
    justify-content:center;
    max-width:32%;
}
.job-list ul li h2 {padding-bottom:15px; text-align:left; font-size:3rem; line-height: 4rem; color:#222;}
.job-list ul li div.quote-job {display: inline-block; width: 65%;}
.job-list ul li div.date-job {padding-top:10px;}
.job-list ul li div.infos-job {display:inline-block; width:35%; vertical-align:top; padding-left: 20px; color:#999; font-size:11px;}
.job-list ul li .fa {font-size:20px; padding-right: 5px;}
.job-list a.btn.sec:hover {color: #fff; border: 2px solid #773a8b; background: #773a8b;}
.job-list a.btn.sec {color: #ffffff; border: 2px solid #eeedec; background: #773a8b;}
.job-list a.btn {
    display: inline-block;
    margin: 0 1vw 6px 1vw;
    font-size: 2.1rem;
    padding:8px 14px;
    font-family: "dosis-semibold";
    transition: all 0.4s ease;
    text-decoration: none;
}
.job-list ul li .btn-job {width: 70%; text-align: center; vertical-align:top; margin:15px auto;}
.job-list ul li a {text-align: center;}



.job h3 { font-size:2.5rem;}
.job p {font-size:16px;}
.job section {margin-bottom: 50px;}
.job section article {}
.job section article.job-des { margin:0 auto; line-height: 1.5;}
.job article div ul li {position:relative; margin-bottom:6px; line-height: 18px;}
.job article div ul li:before {position:absolute; top:8px; left:-8px; content: ""; border-left: 3px solid #773a8b; height: 7px; display: inline-block; }
.job section article div.job-we {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px 40px;
    font-size:16px;
}
.job ul{margin-left: 30px;}
.job section article .job-we article {width:48%; font-family: 'dosis-extralight', Arial;}
.job section article .job-we article .chapo {margin-bottom: 15px; font-family: "dosis-regular";color:#5A5E6B;}
.job section article.job-des .job-you {display:block; }
.job section article.job-des .job-you article {
	width:100%;
	margin:40px auto;
	max-width: 1000px;
	padding-bottom: 3vw;
	font-size:16px;
	min-height: auto;
	top:auto;
	left:auto;
	font-family: 'dosis-extralight', Arial;
}
.job section article.job-des .job-you article > div {
	display: block;
	text-align: left;
}
.job a.btn.sec:hover {color: #fff;border: 2px solid #773a8b;background: #773a8b;}
.job a.btn.sec {color: #000;border: 2px solid #eeedec;background: #fff;}
.job a.btn {
    display: inline-block;
    margin: 0 1vw 6px 1vw;
    font-size: 2.1rem;
    padding: 15px 66px;
    font-family: "dosis-semibold";
    transition: all 0.4s ease;
    text-decoration: none;
}
.job .btn-job{text-align: center;}


/* Formulaire
---------------------------------------------------------------------- */
.digiForm {width: 100%;margin: 0 auto;}
.digiForm div {display: inline-block;}

.digiForm ul li label{cursor: pointer;}

.digiForm article {font-size: 0; margin:15px auto; max-width:700px; width:100%;line-height:1.5;}
.digiForm article.docUpload #ffdoc{font-size:15px;}
.digiForm article>label {width:100%; font-size: 16px; font-family: dosis-medium; text-align: left; display: inline-block; padding:0 0 4px 0px; color:#555; letter-spacing: 1pt; vertical-align: top;}
.digiForm article>div {width:100%; font-size: 14px; text-align: left; display: inline-block;}
.digiForm article.formTxt {font-size:12px; margin-left: 0%;}
.digiForm article.formTxt.inline {padding-left: 30%; }

.digiForm article.trombiPicture {text-align: center;}
.digiForm article.trombiPicture figure img {width:30%;}
.digiForm article.trombiPicture span {font-size:12px; }
.formOk {fontmax-width: 1200px;margin: 20px auto; padding:20px; border:2px solid #0a0; background:#efe; font-size:16px;}
ul.error{
	max-width: 1200px;margin: 20px auto; padding:20px; border:2px solid #d00; background:#A94442; color:white; font-size:16px;
}

form article s{text-decoration: none;}
form article s::before {content:" *"; font-size:14px; color:#d00; }

.digiForm .form-title {
	max-width:700px; width:100%;
	font-size:20px;
	text-align: center;
	font-family: dosis-bold;
	font-weight: normal;
	display: block;
	color:#222;
	margin:0px auto 0px auto;
	padding:27px 0 0px 0;
}
.digiForm .newDoc:hover{color: #fff;border: 2px solid #773a8b;background: #773a8b;}
.digiForm .newDoc{
	display: block;
	font-size: 15px;
	color: #000;
	border: 2px solid #eeedec;
	background: #fff;
    margin: 10px;
    padding: 4px 8px;
    font-family: "dosis-semibold";
    transition: all 0.4s ease;
    text-decoration: none;
    width: 20%;
}

.digiForm section {margin:10px 0;}
.digiForm section > section {margin:0;}
.digiForm .invisible div {border: none; padding: 0; margin: 0;}
form .central {
	text-align: center;
	display: block;
	margin-top: 20px;
	margin-bottom: 40px;
}
form .central input[type="submit"],
form .central button {
	color: #000;
	border: 2px solid #eeedec;
	background: #fff;
	display: inline-block;
    margin: 0 1vw 6px 1vw;
    font-size: 2.1rem;
    padding:8px 16px;
    font-family: "dosis-semibold";
    transition: all 0.4s ease;
    text-decoration: none;
}
form .central input[type="submit"]:hover,
form .central button:hover{
	color: #fff;border: 2px solid #773a8b;background: #773a8b;
}

.digiForm .infoMention {font-size: 12px; padding: 40px 0 0 0;}
.digiForm .conference {padding-top: 10px; font-size: 13px; font-weight: bold;}
.digiForm .separ_txt {margin-top: 60px; border-top: 3px double #e4e4e4; padding-top: 25px;}


form article.error label { color:#d00;}
form article.error input { border-color:#d00; color:#d00; box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2) inset, 0 0 2px 1px rgba(240, 61, 31, 0.3);}
.digiForm .formCheckbox label {vertical-align: top;}
.digiForm .formCheckbox input {vertical-align: top;}
.digiForm .formRadio ul {text-align: left;}
.digiForm .formRadio ul li {display: inline-block;padding-right: 20px;}
.list.formCheckbox div {text-align: left;}
.list.formCheckbox div > input {width: 5%; text-align: left; display: inline-block;}
.list.formCheckbox div > label {width: 90%; text-align: left; display: inline-block;}

.digiForm .oneline {padding-top:8px;padding-bottom: 10px;}
.digiForm .oneline>label {width:80%;text-align: left;font-size:16px;margin-left:15%;padding-bottom: 10px;}
.digiForm .oneline>div {margin-left:20%; width: 60%;}
.digiForm .oneline>div label {width:94%;display: inline-block;}
.digiForm .oneline>div>ul label {width: auto; vertical-align: middle;}
.digiForm .oneline>div>ul input { vertical-align: middle;}
.digiForm .oneline textarea { width: 80%;}
.digiForm .oneline .form-title {font-size:16px;margin-left: 15%; border:none;}
.digiForm section.oneline>article {margin-left:7%;}

.digiForm  .digi_soft li {padding-bottom: 5px; display: inline-block; min-width: 200px;}
.digiForm  .digi_soft li input { margin-top:5px;}
.digiForm  .digi_soft li label {font-size:16px;}

.form .msgok {
	max-width: 1200px;
	margin: 50px auto;
	font-size: 18px;
	line-height: 1.4;
}


/* All in one Event
---------------------------------------------------------------------- */
.event-all {display: flex; flex-direction: column;}

.event-all > header {display: flex; background-color: #664f73; flex-direction: row;}
.event-all > header figure {width: 60%; overflow: hidden;}
.event-all > header figure img {display: block; width: auto; height: 100%; border-radius: 0; object-fit: cover;}

.event-all > header > .date {width: 40%; overflow: hidden;}

.event-all > div {display: flex; flex-grow: 1; flex-direction: row;}
.event-all > div > section {width: 60%; padding: 30px;}
.event-all > div > section .wrap > section {padding: 0;}
.event-all > div > aside {width: 40%; padding: 30px;}
.event-all > div > aside h3 {color: #664f73;}

.event-all .address {margin: 15px 0 0 0;}
.event-all .address i.fa {display: inline-block; margin: 0 5px 0 0; vertical-align: middle; font-size: 42px; color: #e6e6e6;}
.event-all .address address {display: inline-block; vertical-align: top; font-size: 17px;}
.event-all .contact {margin: 15px 0 0 0;}
.event-all .contact span {display: block;}

.event-all .j-Map {margin: 15px 0 0 0;}



/* Event ****************************/

.event .date {display: flex; flex-direction: column; justify-content: center;}
.event .date > div {display: flex; justify-content: center; flex-direction: row; color: #fff;}
.event .date > div > b {display: flex; flex-direction: column; justify-self: start; justify-content: space-between;}

.event .date span {margin: 0 5px 0 0; line-height: 85%; font-weight: bold; font-size: 150px;}
.event .date u {text-decoration: none; font-size: 50px;}
.event .date i {font-style: normal; font-weight: normal; font-size: 50px;}
.event .date i s {font-size: 50px; text-decoration: none;}


.event-trw {
	background:#070;
	color:#fff;
	padding:2vh 3vw;

}
.event-trw > h2 { color:#fff; font-size:56px; margin-bottom: 40px; }
.event-trw > section {
	display:flex;
	flex-direction:row;
}
.event-trw > section > div {
	padding:0 2vw;
	flex:1;
}

.event-trw .address i.fa {font-size:50px; width:10%; display:inline-block; vertical-align:middle;}
.event-trw .address address {display:inline-block; width:85%; font-size:14px; font-style: normal; vertical-align: middle; line-height: 18px;}
.event-trw .address article > div {height:50vh; margin-bottom: 30px;}
.event-trw .qrCode {text-align: center; }
.event-trw .qrCode img {width:50vh; height:50vh; vertical-align: bottom; }




/* Global & prioritaire
---------------------------------------------------------------------- */
.hide {display:none;}