/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* typo */

  .ft-reg {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .ft-it, i {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .ft-it-400 {
    font-weight: 400;
  }
  
  .ft-it-500 {
    font-weight: 500;
  }
  
  .ft-it-600 {
    font-weight: 600;
  }
  
  .ft-bold, b, strong {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  .ft-boldIt{
    font-family: brandon-grotesque, sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  .ft-thin {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  .ft-thinIt {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  .ft-light {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  .ft-lightIt {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  .ft-med {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  .ft-medIt,em {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  .ft-black {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  .ft-blackIt {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 900;
    font-style: italic;
  }

  .txt-left   { text-align: left; }
  .txt-center { text-align: center; }
  .txt-right  { text-align: right; }

/* Base */

  html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: .625em;
  }
  *,
  *::before,
  *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
  }

  body {
    font-family: brandon-grotesque, sans-serif;
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    background: rgb(255,213,186);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,213,186,1)), color-stop(10%, rgba(145,171,195,1)), color-stop(20%, rgba(62,110,146,1)), color-stop(75%, rgba(1,117,149,1)), to(rgba(0,42,60,1)));
    background: -webkit-linear-gradient(bottom, rgba(255,213,186,1) 0%, rgba(145,171,195,1) 10%, rgba(62,110,146,1) 20%, rgba(1,117,149,1) 75%, rgba(0,42,60,1) 100%);
    background: -o-linear-gradient(bottom, rgba(255,213,186,1) 0%, rgba(145,171,195,1) 10%, rgba(62,110,146,1) 20%, rgba(1,117,149,1) 75%, rgba(0,42,60,1) 100%);
    background: linear-gradient(0deg, rgba(255,213,186,1) 0%, rgba(145,171,195,1) 10%, rgba(62,110,146,1) 20%, rgba(1,117,149,1) 75%, rgba(0,42,60,1) 100%);
    color: white;
  }
  

    /* elements which are positioned absolutely. */
    /* Their ultimate offset parent is the viewport */
    /* prevents those elements from breaking out of the body box. */
    body {
        position: relative;
    }
    
    
  body.p-index {
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(1,91,108,1)), to(rgba(0,42,60,1)));
    background: -webkit-linear-gradient(bottom, rgba(1,91,108,1) 0%, rgba(0,42,60,1) 100%);
    background: -o-linear-gradient(bottom, rgba(1,91,108,1) 0%, rgba(0,42,60,1) 100%);
    background: linear-gradient(0deg, rgba(1,91,108,1) 0%, rgba(0,42,60,1) 100%);
  }
  
  body.blog-area {
    background: none;
    color: #000;
    background-color: #fff;
  }
 
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ol    { padding-left: 1em; }
  .legende ol { padding-left: 0; }
  ol li { padding: .25em 0; }

  figure { margin: 0; }

  p {
    margin-top: 0;
    margin-bottom: 1.5em;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .rounded {
    border-radius: 50%;
  }

/* Layout */

  .wrapper {
    max-width: 1366px;
    margin: 0 auto;
  }
  
  


@media only screen and (min-width: 64em) {

  .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0 0 4vw 0;
  }
  
  .modal .row {
	  padding:0;
  }
  
  
  
  .modal .row .col p {
	 /* margin-top:1vw;*/
  }

  .col { padding: 0 2vw; }
  
  .col.no-padding { padding:0; }
  .row.marge {margin-bottom:1em;}
  

  .lg-w30 { width: 30%; }
  .lg-w40 { width: 40%; }
  .lg-w50 { width: 50%; }
  .lg-w60 { width: 60%; }
  .lg-w70 { width: 70%; }
  .lg-w80 { width: 80%;max-width: 700px }
  .lg-w90 { width: 90%; }

}


.modal .row .col:first-child,.modal .row.mobile .col:first-child {
	  margin-right:2vw;
  }
  
.col.no-marge { padding: 0 !important;padding-bottom:1em; }
  .col.alone {margin-right:0 !important;margin-bottom:1em}
  
  .row.no-marge { padding-bottom: 0}

.zone-swiper {
	position: relative;
}

/* menu */

  .menu {
  	position: fixed;
  	top: 0;
  	right: 0;
  	bottom: auto;
  	left: 0;
  }

	.menu__list {
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	    -ms-flex-direction: column;
  	        flex-direction: column;
  	height: 100%;
	}
	.menu__item {
  	-webkit-box-flex: 1;
  	    -ms-flex: auto;
  	        flex: auto;
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-align: center;
  	    -ms-flex-align: center;
  	        align-items: center;
  	-webkit-box-pack: center;
  	    -ms-flex-pack: center;
  	        justify-content: center;
	}
	.menu__link {
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	}
	.menu__bullet:before {
  	content: '';
  	display: inline-block;
  	width: 9px;
  	height: 9px;
    margin-left: .5em;
    background-image: url(../img/bullet.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
	}
	.is-active .menu__bullet:before {
    background-image: url(../img/bullet-active.png);
	}
	
	
	  .logo {
    width: 215px;
    position: fixed; top: 2em; left: -17px;z-index: 999;
  }
  
  

@media only screen and (min-width: 1366px) {

  .logo { left: calc(50vw - 712px); }
}

@media only screen and (min-width: 64em) {

	.menu {
  	bottom: 0;
  	left: auto;
	}
	.menu__item {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-right: 4vw;
	}
	.menu__bullet {
  	-webkit-box-ordinal-group: 2;
  	    -ms-flex-order: 1;
  	        order: 1;
	}
	
	.ham-mobile {
		  display:none;
	  }
	  
	.hide-mobile {
	  display:block;
  }
  
  .lang-mobile {
	  display:none;
  }
}


/* composants */

  .section {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /*min-height:0vh;*/
    padding: 0 4vw;
  }
  
  .section.margin-plus {
	  margin-bottom:2em;
  }
  
  footer {
	  padding: 0 4vw;
	  margin-top:30px;
	  
  }
  
  .section__header {
    position: absolute;
    top: 0; right: 4vw; left: 4vw;
    padding-left: calc(215px - 5vw);
  }
  .section__title, .sub__section__title {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  
   .sub__section__title {
	  padding-left:60px;
  }
  
  .sub__section__title.first-marge {
	  padding-top:100px
  }
  
  .section__body.no-marge .row {
	  padding:0;
  }
  
  .section__title:before {
    content: '';
    display: inline-block;
    position: relative;
    top: 1px;
    width: 30px;
    height: 30px;
    margin-right: .5em;
    background-image: url(../img/slash.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
  }
  
  .section__title.contact {
	  display:inline-block;
	  width:50%;
	  margin:.2em 0;
  }
  
  .rs-mobile,.dp-mobile {
	  display:none;
  }
  
  .rs {
		display:-webkit-inline-box;
		display:-ms-inline-flexbox;
		display:inline-flex;
	    width: calc(50% - 2em);
	    margin-left:auto;
	    margin-right:auto;
	    text-align: center;
	    padding-left: 5vw;
	}
	.rs li {
		float:left;
		padding-right:20px;
		
	}
	
	.rs li:last-child {
		padding-right:0px;
	}
	
	.dp {
		width: calc(100% - 2em);
		text-align: right;
		margin-right:45px;
		
	}

  .section__body {
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .section__img svg {
    width: 100%;
    height: 500px;
    max-width: 500px;
    max-height: 500px;
}
  
  


@media only screen and (min-width: 64em) {

	.section__body.first { padding-right: 220px; }
	.section__body { padding-right: 45px; }

	.section--1 .section__img { -ms-flex-item-align: end; align-self: flex-end; }

	.section--1 .section__content,
	.section--4 .section__content {
  	position: absolute;
  	bottom: 3vw;
  	left: 4vw;
	}
	
	h1 {
    font-size: 20px;
	font-weight: 500;
	text-transform: uppercase !important;
	letter-spacing: 2px;
    margin: 1.8em 0;
   }
}

@media only screen and (max-height: 860px) {

	.section__body { margin-top: 12vw; }
	.section__body.no-marge { margin-top: 0; }
	.section__body.marge-bottom { margin-bottom: 2em; }
}

@media only screen and (max-height: 1400px) {

	.section__body { margin-top: 8vw; }

}

  .card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    text-align: center;
  }
  .card__block {
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
  }
  .card__title {
    
  }

  .section--5 .card__title { font-size: .8em; }

  
  .section--5 .card__img img { height: 100px; }
  
   .section--3 .card__img video,
  .section--5 .card__img video { height: 150px; }
  
  .section--3 .card__img img { height: 200px; }

  .modal {
/*     display: none; */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height:100%;
    padding: 4vw;
    background-color: #FFF;
    color: #002B3D;
    padding-top:13px;
  }
  
  .modal.mobile {
	   background-color: #f8d2bc;
  }

  .modal__title {
    font-style: normal;
    line-height: 1.2em;
    font-weight: 400;
	font-size: 20px;
	letter-spacing: 1px;
	padding-bottom:0.8em;
	text-transform: uppercase;
  }

  .modal .uppercase, p.uppercase, span.uppercase {
	  font-weight: 500;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
  }

  .modal__footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 2vw 4vw;
    font-weight: 500;
    font-style: normal;
    background-color: #FFF;
    margin-bottom:0 !important;
  }
  
  footer {
	  padding:0 4vw;
	  margin-bottom:4vw;
  }
  
  .float-text {
	  float:left;
  }
  
  .float-text-img {
	  float:left;
	  padding-right:20px;
  }
  
  .modal .col.col-float {width:100%;}

@media only screen and (min-width: 64em) {

	.modal {
  	width: 700px;
	}
}

.marge-top {
		margin-top:3em;
	}
	
	.marge-bottom {
		margin-bottom:1.8em;
	}
	


@media only screen and (max-width: 64em) {
	
	body {
		overflow-x: hidden !important;
	}
	.logo {
		z-index:99;
	}
	
	
	
	.menu {
		display:none;
	}
	
	.ham-mobile {
		  display:block;
		  position: fixed; top: 2.2em; right: 1em;
		  z-index:99;
		  cursor: pointer;
		  
	  }
	  
	  .hide-mobile {
	  display:none;
  }
  
 .modal  .zone-filtre  .col {
	  display: inline-flex;
	  width:48%;
  }
  
  .lang-mobile {
	  position: absolute;
	  z-index:999;
	  /*display:block;*/
	     top: 2.2em;
    right: 2.5em;
  }
  
  .lang-mobile a {
	padding-left:10px;
}
	  
	  .lg-w70.bloc-swiper {
		  width:100% !important;
	  }
	  
	  .lang {
		  position:absolute;
	    top: 40px !important;
	    right: 35px !important;
	  }
	  
	  .menu-mobile {
		  position: fixed;
		  left:0;
		  top:0;
		  width:100%;
		  height:100%;
		  background-color: #fff;
		  z-index:10;
		  color:#000;
	  }
	  
	  .menu-mobile .closeMenu {
		   position: fixed;
		  right:1em;
		  top:0.5em;
		  cursor: pointer;
		  
		  
	  }
	  
	  .menu__list {
		  display:block;
		  padding: 40px;
		  margin-top:7em;
	  }
	  
	  .menu__item {
		  display:block;
		  /*margin-bottom:1em;*/
		  margin-bottom:30px;
		  font-size: 24px;
		  font-weight: 400;
	  }
	  
	  .menu__item .menu__bullet {
		  mix-blend-mode: difference;
		  padding-right:50px;
	  }
	  
	.ham-mobile img {
		  width:5px;
	  }
	  

	  
	  
	.section {
	    min-height:inherit;
	    padding: 0 5vw;
	}

	h1 {
		/*font-size:1.3em;*/
		margin: 1.8em 0;
	}
	
	
	
	.section__header {
	    padding-left: calc(215px - 5.5vw);
	}
	
	.section__body {
    	margin-top: 17vw; 
	}

	.card {
		margin-bottom:2em;
		margin-right: 1em;
	}
	
	.section--5 .card__block {
		-webkit-box-flex:0;
		    -ms-flex:none;
		        flex:none;
	}
	
	
	
	.row.mobile {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: center;
	        -ms-flex-pack: center;
	            justify-content: center;
	  }
	  
	 .section__title.contact {
		  display:block;
		  width:auto;
		  margin: 1.5em 0;
	  }
	  
	  .rs.rs-desktop, .dp-desktop {
		  display:none;
	  }
	  
	  .rs-mobile {
		  display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
	    -webkit-box-align : center;
	        -ms-flex-align : center;
	            align-items : center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		        margin-bottom: 20px;
	  }
	  
	  .rs {
		  display:block;
		  width:auto;
		  padding-left: 0;
		}
		
		 .dp.dp-mobile {
			 width:100%;
			 text-align: center;
			 margin-bottom: 20px;
			 display: block;
			 margin-top:-10px;
		 }
		
		.row.mobile .lg-w30 { width: 30%; }
		.row.mobile .lg-w40 { width: 40%; }
		.row.mobile .lg-w50 { width: 50%; }
		.row.mobile .lg-w60 { width: 60%; }
		.row.mobile .lg-w70 { width: 70%; }
		.row.mobile .lg-w80 { width: 80%; }
		.row.mobile .lg-w90 { width: 90%; }
		
		.row.mobile .col.marge { margin-right:1em }
		
		.section__content.legende {
			width:100%;
		}
		
		.col {width:80%}
		
		.modal .col {width:60%}
		
		.modal .col.col-float {margin-bottom:20px;}
		.blog-area .col {width:100%}
		.col-image {width:100%}
		
		.blog-area .col-2 div {
			display: block !important;
			width:100% !important;
			
		}
		
		.blog-area .col-2 div:first-child {
			margin-right:0px !important;
		}
		
		
		.legende-schema {
			width:50%;
		}

}


@media only screen and (max-width: 540px) {
	body {
	}
	.row.mobile {
	    display: block;
	  }
	  
	  .section--5 .card__block {
		height:auto;
	}
	
	.row.mobile .lg-w30 { width: 100%; }
		.row.mobile .lg-w40 { width: 100%; }
		.row.mobile .lg-w50 { width: 100%; }
		.row.mobile .lg-w60 { width: 100%; }
		.row.mobile .lg-w70 { width: 100%; }
		.row.mobile .lg-w80 { width: 100%;max-width:100% ; }
		.row.mobile .lg-w90 { width: 100%; }
		
	.row.mobile .col {
		margin-bottom: 1em;
	}
	
	.section__body {
    margin-top: 27vw;
	}
	
	.section.margin-plus {
	  margin-bottom:2em;
  }
  
  .col {width:80%}
  
  .col.top-equipe {
	  width:48%;
	  display: inline-block;
  }
  
  reference-projet .lg-w30 { width: 30%; }
}

.logo.off {
		mix-blend-mode: difference;
	}

@media only screen and (max-width: 540px) {
	.row.mobile {
	    display: block;
	  }
	  
	  .section--5 .card__block {
		height:auto;
	}
	
	h1 {
		font-size:18px;
		margin: 1.7em 0;
	}
	
	.section__body.marge-bottom { margin-bottom: 2em; }
	
	h2 {
	    font-size: 18px;
	}
	
	.contact-us
	{
		font-size: 18px;
	}
	
	.info-legende {
		font-size: 16px;
	}
	
	.logo {
	    width: 190px;
	    position: fixed;
	    top: 2em;
	    left: -17px;
	    z-index:999;
	}
	
	.section__header {
	    padding-left: calc(190px - 4vw);
	}

	.col {width:100%}
	
	.img-mobile img {
		width:40%
	}
}

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


	.legende-schema {
			width:100%;
		}
		
		.inactive {
			overflow: hidden !important;
	}	
	
	
	.inactive-back {
			display:none;
	}	
	
	.modal .col {width:80%}
	
	.float-text {
		  float:none;
		  display:block;
	  }
	  
	  .float-text-img {
		  float:none;
		  display:block;
		  padding-right:0px;
	  }
	  
	  .modal  .zone-filtre  .col {
	  display: block;
	  width:100%;
  }
}

@media only screen and (max-width: 480px) {
	body {
		font-size:16px;
	}
	.logo {
	    width: 115px;
	}
	
	.modal .close {
		font-size:20px;
	}
	
	.modal__title {
		width:90%;
	}
	
	.section__header {
	    padding-left: calc(115px - 8vw);
	}
	
	h1 {
		font-size:16px;
		margin: 0.3em 0;
	}
	
	.sub__section__title {
		font-size:16px;
	}
	
	 .sub__section__title.first-marge {
	  padding-top:50px
  	}
	
	.section__header h1 {
		margin:-0.1em;
		margin-top:-2em;
	}
	
	h2 {
	    font-size: 20px;
	}
	
	.modal .uppercase, p.uppercase, span.uppercase {
		font-size: 16px;
	}
		
	.section__title:before {
	    width: 30px;
	    height: 30px;
	    top:8px;
	    margin-right:.25em;
	 }
	 
	 .ham-mobile {
		  top: 1.8em;	  
	  }
	  
	  .lang {
	 top: 28px !important;
	    right: 35px !important;
	 
	}
	.enter {
		bottom:20px !important;
	}
	
	.rs li {
	    padding-right: 10px;
	}
	
	.section {
		margin-top:50px;
	}
	
	.card__block.equipe {
		text-align: center !important;
	}
	
	.typeform-widget {
		margin-top:40px;
		padding-left:2em;
		padding-right:2em;
	}
	
	.modal .uppercase, p.uppercase, span.uppercase {
	    font-size: 16px;

	}
	
	
	
	.swiper-container.soutien img {
		width:200px !important;
	}
	
	
	
	.swiper-container.blog img,.swiper-container.presse img,.swiper-container.linkedin img {
		width:200px !important;
	}
	
	
	
	.zone-swiper {
		position: relative;
		/*padding-left:3em;padding-right:3em;*/
	}
	
	.modal__footer {
		 line-height: 18px;

	}
	
	.swiper-container.soutien .swiper-button-next,.swiper-container.blog .swiper-button-next,.swiper-container.presse .swiper-button-next,.swiper-container.linkedin .swiper-button-next,.swiper-container.equipe .swiper-button-next {
		display: none;
	}
	
	.swiper-container.soutien .swiper-button-prev,.swiper-container.blog .swiper-button-prev,.swiper-container.presse .swiper-button-prev,.swiper-container.linkedin .swiper-button-prev,.swiper-container.equipe .swiper-button-prev {
		display: none;
	}


	
	
	
}

@media only screen and (max-width: 320px) {
	h1 {
		font-size:0.8em;
		margin: 0.12em 0;
	}
	
	h2 {
	    font-size: 0.75em;
	}
	.section__header {
	    padding-left: calc(115px - 10vw);
	}
	

	
	.section__header h1 {
		margin:-0.2em;
		    margin-top: -2.5em;
	}
	
	.sub__section__title {
	    font-size:0.8em;
	}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

.hide {
	display: none;
}

.section__img img {
}

ol {
	list-style-type: none;
}

.legende {
	width:30%;
}

.menu {
	z-index:9999999;
}

.modal {
	z-index:99999999;
}

.modal .close {
	position: absolute;
	right:1em;
		  top:0.5em;
	cursor: pointer;
}
.menu .active {
	color:red;
}


.modal__body {
	overflow-y:scroll;
	height: auto;
	padding-bottom:50px;
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	
}

.modal__body::-webkit-scrollbar {
	    display: none;
	    scrollbar-color: transparent transparent;
	  }
    	
.modal__body::-webkit-scrollbar {
    display: none;
  }

.loader {
	width:150px;
}

table {
	font-size: 0.8em;
	border-spacing : 0;
border-collapse : collapse;
}

table td {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-rigjht: 4px;
	border-bottom:1px solid #000;
}




.section__home {
	width:70%;
	margin-left: auto;
	margin-right:auto;
}
.p-index .logo {
	text-align: center;
}

.p-index .logo img {
	width:40%;
}

.home {
	height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom:40px;
}

.home h1 {
	margin-top:0;
	margin-bottom:0;
}

.home h2 {
	font-weight: 300;
	padding-top:0;
	margin-top:0;
}

.lang {
	position: absolute;
	top:30px;
	right:30px;
	z-index:999;
	 font-size: 16px;
	 font-weight: 500;
	 font-style: italic;
}
.lang a {
	padding-left:10px;
}

.enter {
	position: absolute;
	bottom:40px;
	width:100%;
	text-align: center;
	z-index:10;
}

.all-height {
	height:100%;
}



.logo img {
	width:22em;
}


.overflow {
	overflow: hidden !important;
}

.type__bullet {
	padding-right: 8px;
	margin-top: -2px;
}

.type__bullet img {
	width:10px;
}

.pos-usecase {
	position: absolute;
	z-index:1000;
	cursor: pointer;
}

.swiper-container {
  width: 100%;
  height: 100%;

}

.swiper-container.blog,.swiper-container.presse,.swiper-container.linkedin  {
	padding-left:60px;
	padding-right:60px;
}

.swiper-container.equipe .swiper-slide {
		width:100px;
		height:inherit;
	}
	
	.swiper-container.equipe .col {
		padding:0 !important;
	}
	


.swiper-container {
		
	}

.swiper-container.soutien img {
  width:100px;
}

.swiper-container.blog .swiper-slide .back-preview,.swiper-container.presse .swiper-slide .back-preview,.swiper-container.linkedin .swiper-slide .back-preview {
  /*width: 150px !important;*/
  height: auto;
}

.swiper-container.blog .swiper-slide,.swiper-container.presse .swiper-slide,.swiper-container.linkedin .swiper-slide {
 align-items: normal;
 
}


    ;


.titre-list-blog {
  width: 150px !important;
}

.swiper-container.blog table td,.swiper-container.presse table td,.swiper-container.linkedin table td{
 border-bottom:0px solid #000 !important;
 padding:0;
 }
 

 .swiper-container.blog p, .swiper-container.presse p, .swiper-container.linkedin p{
	 padding-top:8px;
	 font-size: 0.8em;
 }


.swiper-slide {
  display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
     
      height:auto;
}

 .swiper-container.blog .swiper-slide, .swiper-container.presse .swiper-slide, .swiper-container.linkedin .swiper-slide {
	  /*width:100% !important;*/
 }

.legende-schema {
	padding-left:40px;
	padding-right:5px;
	display:none;
	font-size: 18px;
	font-weight: 400;
	font-family: brandon-grotesque, sans-serif;
    font-style: italic;
	line-height: 21px;
	
}

.chiffre {
	padding-right:4px;
	font-weight: 300;
	width:20px;
	display: inline-block;
	vertical-align: top;
	
}

.after-chiffre {
	width:calc(100% - 30px);
	display: inline-block;
	
}

.lien-popup
{
	font-style: italic;
	font-size: 20px;
	font-weight: 500 !important;
}

.arrow
{
	font-weight: 300;
	font-size: 18px;
	padding-right: 10px;
}

.arrow-left
{
	paddinf-right:0;
	padding-left: 10px;
}

.contact-us
{
	font-size: 20px;
}

.info-legende {
	font-size: 18px;
}

.card__block.equipe {
	/*text-align: left;*/
}

.inter {
	line-height:20px;
	margin-bottom:10px;
}

.typeform-widget {
		padding-left:2em;
		padding-right:2em;
	}
.inter-modal {
	line-height: 23px;
}

.reference-projet
{
	justify-content:left !important;
}

.inter-modal {
	margin-top: 10px;
}

.reference-projet-titre {
	margin-bottom: 10px;
	margin-top:20px;
}

.reference-projet p
{
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

.section__content.legende li {
	cursor: pointer;
}

.inactive {
	overflow:hidden !important;
}

.card__block.equipe {
	line-height: 1.2;
}

.card__block.equipe .statut {
	padding-top: 7px;
    display: block;
}

.zone-preview {
	position: relative;
	overflow: hidden;
}

.preview {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:none;
	background-color: transparent;
	z-index:1;
}
.preview-legende {
	position: absolute;
	left:0;
	bottom:20px;
	width:100%;
	text-align: center;
	z-index:2;
	color:#fff;
}

.sous-titre {
	padding-top:30px;
}

.sous-titre .section__title:before {
	background-image: none !important;
}

.zone-blog {
	margin-top:60px;
	
}

.zone-blog .titre-home-blog {
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
	
}

.zone-blog .titre-list-blog {
    font-family: brandon-grotesque, sans-serif;
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
}

.blog-area .section__title:before, .blog-area .logo img, .blog-area .menu__bullet, .blog-area .ham-mobile img {
	filter: invert(1);
}

.blog-area h1 {
	/*float: left;*/
}

.blog-area .blog-nav {
	/*float:right;
	width:auto;
	padding-top: 48px;
    text-align: right;
    padding-right:7vw;*/
    margin-bottom: 20px;
}

.blog-area .blog-nav ul li {
	display: inline-block;
	margin-right:20px;
}

.blog-area .blog-nav ul li:last-child {
	margin-right:0px;
}

.blog-area article {
	margin-bottom:40px;
}

.blog-area article h2 {
	font-style: normal;
    line-height: 1.2em;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1px;
    padding-bottom: 0.8em;
    text-transform: uppercase;
}

.blog-area .titre-article-blog
{
	font-weight: 700;
	font-size: 25px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding-bottom:20px;
}

.blog-area .sous-titre-article-blog {
	font-weight: 500;
	font-size: 22px;
	line-height: 34px;
	font-style: italic;
}

.blog-area .texte-article-blog
{
	font-weight: 300;
	font-size: 20px;
	line-height: 30px;
}

.blog-area  .siignature-article-blog
{
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	font-style: italic;
	margin-top:40px;
}

.blog-area a {
	text-decoration: underline;
}

.blog-area .col-2 div {
	margin-bottom: 1.5em;
}

.blog-area .col-2 div {
	display: inline-block;
	width:calc(50% - 10px);
	vertical-align: top;
}

.blog-area .col-2 div:first-child {
	margin-right:20px;
}

.blog-detail {
	position: relative;
}

.blog-detail .embed-blog {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.blog-detail iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.blog-area .swiper-container.blogDetail {
	margin-bottom:45px;
	width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

#videoHome {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  height: 100vh;max-width:100%;
	object-fit: inherit;
	z-index:6;
}

#imgHome {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;
	z-index:6;
}

.bg-cover {
  background-size: cover;
    background-repeat: no-repeat;
        height: calc(100vh);
    position: relative;
    background-position: 50%;
}

.bg-cover:before {
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
}

.o-embed {
	position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%;
  -webkit-transition: 2s opacity ease;
  transition: 2s opacity ease;
  opacity: 1;
  z-index:5;
  overflow: hidden;
}


.o-embed-content, .o-embed iframe {
	position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 1427.56px;
    height: 803px;
    overflow: hidden;
}
.o-embed.bg-cover {
    z-index: 1;
}

@media (max-width: 767px) {
	.bg-cover {
	    /*height: 560px;*/
	    /*height: calc(100vh - 60px);*/
	}
	
	#videoHome,#imgHome {
		width: 100%;
		height:auto;
	}
	
}

@media (min-width: 767px) {
	.bg-cover {
	    background-image: none!important;
	}
	
}

.typeform-contact-bg {
	background-color: #f8d2bc;
}

.o-embed iframe {
}

@media only screen and (max-width: 640px) {
	
	.o-embed-content, .o-embed iframe {
		position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    width: 100%;
	    height: auto;
	    overflow: hidden;
	}
	
	
	.section__img svg {
	    width: 100%;
	    height: 300px;
	    max-width: 500px;
	    max-height: 300px;
	}
	
	.typeform-widget {
		height:300px;
	}
}

.blog-list a, .blog-nav a {
	text-decoration: none;
}

.selectPoint {
	width:20px !important;
}

.hideSwipe {
	opacity:0;
}

.home-ev {
	position: absolute;
	text-align: left;
	width:auto;
	top:20px;
	left:20px;
	display: inline-block;
	z-index:99999999;
	mix-blend-mode:difference;
}

.home-ev img {
	width:200px;
}

@media only screen and (max-width: 640px) {
	.bg-cover {
		height:auto;
		padding-bottom:40px;
	}
	
	
	#imgHome {
	    position: relative;
	    left:auto;
	    top:auto;
	    transform:none;
	    width: 100%;
	    z-index: 6;
	    display: block;
	    padding-top:70px;
	}
	
	.o-embed {
		display: block;
	    position: relative;
	    top:auto;
	   width:100%;
	 position: relative;
	height: 0;
	padding-bottom: 56.25%;
	 }
	 
	 .o-embed iframe {
		 position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform:none;
	 }
	 
	 .home-ev {
		 padding-top:30px;
		 padding-bottom:10px;
	     position: relative;
	    text-align: center;
	    width: 100%;
	    bottom:auto;
	    left: auto;
	    mix-blend-mode:unset;
	}
	
	.home-ev img {
		width:50%;
	}
}
.filter-reference {
	padding-bottom:20px;
}

.filter-reference li {
	cursor: pointer;
	display: inline-block;
	padding-right:15px;
	    font-size: 18px;
}

.filter-reference li:last-child {
	padding-right:0;
}

.filter-reference li.actif-filtre {
	font-weight: 500;
}

.zone-filtre .row {
	-webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
}