html, body { font-size: 25px; background: #FFF; margin: 0; padding: 0; font-family: "Maison Neue", Arial, Helvetica, sans-serif;  -webkit-text-size-adjust: 100%; word-break: break-word;   scroll-behavior: smooth; }

a { cursor: pointer;}

.center { margin:2rem auto; max-width: 2200px; padding: 0 2rem; position: relative;}

.apex {font-family: "Apex", Arial, Helvetica, sans-serif;}
.tags {font-family: "Apex", Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; display: block;color: #37B4B4; margin: 0.4rem 0; line-height: 110%;}
.tags + .tags { margin-top: -0.2rem;}


.w_300 { font-weight: 300;}
.w_400 { font-weight: 400;}
.w_500 { font-weight: 500;}
.w_600 { font-weight: 600;}
.w_700 { font-weight: 700;}


.colored { color: #37B4B4;}

.texte { font-weight: 300; }
.texte h2 { font-size: 180%; margin: 1.2em 0 1.2rem 0; max-width: 19em;}
.texte h3 { font-size: 150%; margin: 1.2em 0 1.2rem 0; max-width: 30em;}
.texte h4 { font-size: 120%; margin: 1.2em 0 1.2rem 0; max-width: 32em; font-weight: 500;}
.texte h5 { font-size: 100%; margin: 1.2em 0 1.2rem 0; max-width: 34em; font-weight: 500;}
.texte a { color: #37B4B4; font-weight: bolder; text-decoration: none;}
.texte a:hover { text-decoration: underline;}



.texte p.file { margin: 0.6rem 0;}
p.file a { color: #000; line-height: 1.2em; background: #FFF no-repeat 1em 1em url(../images/pdf.svg); background-size: 2.3em; font-weight: 400; display: block; padding: 1em 1em 1em 3.6em; border: 1px solid #E2E2E2; border-radius: 0.89em; text-decoration: none; }
p.file a:hover { border-color: #A2A2A2; text-decoration: none; }

.listing-files { margin: 1rem 0 2.5rem 0;}

p.file a em { display: block; font-size: 80%; font-style: normal; line-height: 110%; margin-top: 0.5em; color: #888;}
.texte p.file { max-width: 100%;}
.texte p , .texte ul { max-width: 48em; margin: 0.8em 0; line-height: 130%; font-weight: 300;}
.texte ul { list-style: none; padding: 0; }
.texte ul li { padding-left: 1.3em;}
.texte ul li:before { content: "–"; position: absolute; margin-left: -1.2em; color: #37B4B4;}
.texte strong { font-weight: 700;}

.texte figure { margin: 1.5rem 0;}
.texte table { font-size: 75%;}
.texte table th { background: #F8F8F8; font-size: 85%; word-wrap: normal; word-break: keep-all;}
.texte table th , .texte table td { border-bottom: 1px solid #000; padding: 0.2em;}
.texte table td { width: 8%;}

section { padding: 1px 0; }

.wrap { margin: 4rem;}
header { font-size: 80%; position: relative; z-index: 10;}
header .wrap { margin-top:2.5rem; margin-right: 0; margin-bottom: -2rem;}
header a { color: #000; text-decoration: none;}
header .flex { display: flex;  align-items: center;}
header .logo img { height: 2em;}
header menu { margin: 0; padding: 0; margin-left: auto; display: flex; column-gap: 1em;}

.texte ul.submenu { font-size: 80%; line-height: 110%; background: #F8F8F8; margin:-1rem 0 0 0; padding: 1.5rem; border-radius: 1.89rem; list-style: none;}
.texte ul.submenu li { margin: 0.4em 0; padding: 0;}
.texte ul.submenu li:before { content: ""; display: none;}
.texte ul.submenu li a { color: #222;  font-weight: 300;}
.texte ul.submenu li a.actif {  color: #000; font-weight: 600; pointer-events: none;}

.listing-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem -0.5rem -2rem -0.5rem; }
.listing-categories a { display: block; transition: background-color 0.25s, color 0.25s; font-size: 115%; padding: 2rem 1rem 10rem 2rem; min-height: 14em; white-space: nowrap; overflow: hidden; box-sizing: border-box; position: relative; font-weight: 700; color: #000; text-decoration: none; border-radius: 1.89rem; background: #F8F8F8; width: 20%; width: calc(25% - 0.5rem); }

.listing-categories a:hover { text-decoration: none; background: #E8E8E8;}


.listing-categories a svg { height: 2.8em; position: absolute; bottom: 5.5rem; left: 2rem;}

.listing-categories a span { position: absolute; bottom: 2rem; left: 2rem; display: flex; color: #FFF; background: #37B4B4; border-radius: 1.66em; padding: 0.7em 1.7em; line-height: 1.4em; font-size: 80%;}
.listing-categories a span em { width: 2.2em; background: #FFF; mask: url(../images/arrow.svg) no-repeat 0 center; mask-size: 1.2em; margin-left: -0.4em; transition: all 0.2s;}
.listing-categories a:hover span em { mask-position: 0.3em center;}


.banner { background: #000; padding: 1px; border-radius: 1.89rem; color: #FFF; position: relative; overflow: hidden;}
.banner .wrap { display: flex; min-height: 16em; position: relative; z-index: 10; }

.banner.small .wrap {  min-height: 0; display: flex;  align-content: baseline; align-items: end; min-height: 2em; margin-right: 1rem;  }
.banner.small .wrap h1 { margin-bottom: 0;}
.banner h1 .tags { color: #FFF; color: #FFFD; display: block; text-transform: none;}
.banner h1 {  /* max-width: 60em; */ margin:auto 0; font-size: 250%; /*  font-size: 4vw; */}

.particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.banner .particles-js {   border-radius: 1.89rem;}
#footer .particles-js {  border-radius: 1.89rem 1.89rem 0 0; }



h1 , .h1  { font-size: 380%;max-width: 16em; margin: 1em 0; line-height: 100%;}
h2 , .h2  { font-size: 350%; max-width: 16em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}
h3 , .h3  { font-size: 200%; max-width: 20em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}
h4, .h4  { font-size: 180%; max-width: 22em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}
h5, .h5  { font-size: 180%; max-width: 24em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}

#key-figures { color: #37B4B4; position: absolute; top: 0; right: 0; padding: 2.5rem 2rem 0 2rem; width: 25rem; height: 100%; box-sizing: border-box; z-index: 3; }
#key-figures .sticky { position: sticky; top: 3rem;}
#key-figures p {font-weight: 700; line-height: 100%; margin: 2rem 0; }
#key-figures p:nth-child(3) { margin-bottom: 0;}
#key-figures p strong { display: block; line-height: 90%; font-size: 320%; font-weight: 500; white-space: nowrap; margin: 0rem;}
#key-figures p.legende { font-size: 50%; margin-top: 0.8rem; margin-right: 3rem; line-height: 130%;}

.has-col-right .wrap { padding-right: 29rem;}
.wrap.has-col-right { padding-right: 33%; position: relative;}
.wrap.has-col-right .col-right { position: absolute; box-sizing: border-box; width: 33%; padding-left: 1rem; right: 0; top: 0; height: 100%; }





.wrap.has-col-right .col-right .sticky {  position: sticky; top: 4rem; margin-top: 2rem; margin-bottom: -3rem;}
.wrap.has-col-right .col-right .picture { padding: 32% 0; background: #37B4B444 no-repeat center center url(../images/square-1.jpg); background-size: cover; height: 0; margin: 2rem 0; border-radius: 1.89rem;}
.wrap.has-col-right .col-right .picture.square { padding: 0;}
.wrap.has-col-right .col-right .picture + .picture { margin-top: 3rem; background-image: url(../images/square-2.jpg);}
.wrap.has-col-right .col-right .picture.square { padding: 0 0; height: 25vw; height: calc(33vw - 5rem);  min-height: 9rem; max-height: calc(50vh - 6rem);}










@media screen and (min-width:1200px) { 
.wrap.has-col-right { padding-right: 18rem; }
.wrap.has-col-right .col-right {  width: 18rem;  padding-left: 3rem;  }
.wrap.has-col-right .col-right .picture.square { min-height: 9rem; max-height: 15rem;}
}


@media screen and (min-width:1600px) { 
.wrap.has-col-right { padding-right: 21rem; }
.wrap.has-col-right .col-right {  width: 21rem;   }
.wrap.has-col-right .col-right .picture.square {  max-height: 18rem;}
}






.error_form { font-weight: bold;}

.error_form span { color: #FFF; display: inline-block; background: #F83131; padding: 0.5em 0.6em; border-radius: 0.3em; }

p.intro { font-weight: 700; font-size: 120%; line-height: 120%; max-width: 40em;}
p { position: relative; z-index: 5;}

#stripes { position: fixed; pointer-events: none; width: 11rem; height: 100%; top: 0; right: 13.5rem; z-index: 2; transition: all 0.6s; }

#stripes div { background: #37B4B4; position: absolute; top: 0; left: 0; height: 100%; width: 20%; opacity: 0;  transition: all 0.6s;}

#stripes div:nth-child(1) { opacity: 0.1; width: 24%;}
#stripes div:nth-child(2) { left: 14%; width: 24%; opacity: 0.1;}
#stripes div:nth-child(3) { left: 30%; width: 40%; opacity: 0.1;}
#stripes div:nth-child(4) { left: 55%; width: 40%; opacity: 0.1;}
#stripes div:nth-child(5) { left: 85%; width: 22%; opacity: 0.1;}

.strip-center #stripes { right:50%; width: 3.4rem; margin-right: -1.2rem;}
.strip-center #stripes div { padding: 0 0.4rem; }

article { padding: 1px; background: #F8F8F8; border-radius: 1.89rem; margin: 3rem 0;}
article .flex { display: flex;}

article .flex .column  { width: 40%; box-sizing: border-box; padding-right: 2rem; max-width: 30em;}
article .flex .column +  .column  { padding-right: 0;  padding-left: 2rem; margin-left: auto;}


article .flex .column p.legende { font-weight: 300; margin-bottom: 3rem;}
article .flex .column p.legende strong { font-weight: 700; display: block;}
article .flex .column p img { max-width: 100%;}

#implantations {  padding: 0; position: relative;}

#implantations a { position: absolute; height: 6%; width: 9.5%;}


section#contact { z-index: 5; position: relative; }
#contact form { padding: 1px; background: #37B4B4; color: #FFF;  border-radius: 1.89rem 1.89rem 0 0; padding-bottom: 1px;}

#contact + #footer { margin-top: -4.1rem;}
#footer { position: relative; z-index: 15; padding: 0; margin:-1px 0;}

#footer .content { background: #000; color: #FFF; padding: 1px; border-radius: 1.89rem 1.89rem 0 0; margin: 0; overflow: hidden; position: relative;}
#footer .center { margin-top: 0; margin-bottom: 0;}


#footer { font-size: 80%; position: relative; z-index: 10;}
#footer .wrap { margin:4rem 4rem 3rem 4rem; position: relative; z-index:5; }

#footer .flex { display: flex;  align-items: center; column-gap: 2rem;}
#footer .logo img { height: 2em; filter: grayscale(1) brightness(1.5);}

#footer menu { margin: 0; padding: 0; margin-left: auto; display: flex; column-gap: 1em; line-height: 1.4em;}
#footer menu a.linkedin { background: #FFF;   width: 1.4em; height:1.4em; position: relative; border-radius: 0.2em; mask: url(../images/linkedin.svg) no-repeat center center; mask-size: contain;}
#footer menu a.linkedin:before { content: ""; position: absolute;  height: 28px; width: 28px; top: 50%; left: 50%; margin: -14px;}

#footer a { color: #FFF; text-decoration: none;}

p.checkbox { line-height: 1.2em; font-weight: 700;}
p.checkbox input { display: none;}
p.checkbox label { float: left; width: 1em; height: 1em; position: relative; margin: 0.05em 0.5em 0 0.1em; font-family:'system-ui',Segoe UI, Arial, Gotham, 'Helvetica Neue', Helvetica,  'sans-serif'; }
p.checkbox label:before { content: ""; position: absolute; top: 0; left: 0; box-sizing: border-box; height: 1em; width: 1em; border: 1px solid #FFF; border-color: #FFFA; border-radius: 0.33em;}
p.checkbox label:hover:before { border-color: #FFF;}

p.checkbox label:after { content: "✔"; opacity: 0; color: #078484; transition: all 0.1s; transform: scale(0.4,0.4); font-weight: 800; position: absolute; top: 0; left: 0; box-sizing: border-box; height: 1em; width: 1em; line-height: 0.9em; text-align: center; font-size: 100%; }

p.checkbox input:checked + label:after { opacity: 1; transform: scale(1,1);}
p.checkbox input:checked + label:before { background: #FFF; border-color: #FFF;}


.form-input , input , .champ { font-family: "Maison Neue", Arial, Helvetica, sans-serif; font-weight: 700; font-size:100%; color: #FFF;  border-radius: 1.85rem; background: transparent; }

.form-group.error .form-input , .wrapper.error .form-group.file, .wrapper.error .form-input , p.checkBox.error , .form-group.file.error , .champ.error , .champ.error:hover  , .champ.error:focus { border-color:#F83131; background-color:rgba(255,0,0,0.01); }
.champ.error , .champ.error:hover  , .champ.error:focus { color:#ff2b37;  }

.form-group.file {  padding:0.8em; background:transparent; border-radius: 1.5rem;  border:1px solid #FFFA;
	border-color:rgba(0,0,0,0.2);}
.form-group.file p { margin:0;  pointer-events: none;}
.form-group.file hr { margin:0.8em 0 0.9em 0;}

.form-group.file input { border-radius: 0;}
.form-group {
 position: relative;
 margin:0 0;
}


form .columns .form-group {
	margin:0 0 0 0;	
}

.form-label {
 position: absolute;
 left: 1.4rem;
 top: 1.15em;
 line-height:90%;
 color: #FFF9;
 z-index: 10;
 font-weight:700;
 transition:top 0.1s, font-size 0.1s, color 0.1s, left 0.1s; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 cursor:text;
 pointer-events: none;
}



.focused .form-label , .readonly .form-label {
 font-size: 66%;
 top:1em;
 left: 1.4rem;
 font-weight:700;
 pointer-events: none;
}

.form-input , .champ {
 position: relative;
 padding: 1.3em .9em 0.6em 1.4em;
 width: 100%;
 outline: 0;
 border: 0;
 border:1px solid #FFF;
 border-color: #FFFA;
 transition: ball .2s ease-out; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 font-size:100%; line-height:100%;
 box-sizing:border-box;
 pointer-events: fill;
}



p.checkBox {
	border-color:rgba(0,0,0,0.2);
	background: #FFF;
	padding: 1em .9em 0.9em .9em;
	border-radius: 1.5rem;
	font-size: 90%;
	padding-left: 2.4rem;
	line-height: 150%;
  margin:0.4rem 0;
}
p.checkBox input { position: absolute; margin-left: -1.4rem;}


.champ {

 padding: 1em .9em 0.9em .9em;
}



textarea.form-input { height:8em; resize:none; padding-top: 1.3em;}

.form-input:focus , .form-input:hover {
	border-color:#FFF;
}

.readonly .form-input:focus , .readonly .form-input:hover , .readonly .form-input {
	border-color:#FFFA;
}


.wrapper { margin: 1rem 0;}

p.buttons { display: flex; column-gap: 1em;}
p.buttons a { display: block; font-size: 80%; padding: 0.7em 1.7em; text-decoration: none; color: #FFF; line-height: 1.4em; font-weight: 700; background: #000; border-radius: 1.66em;}
p.buttons a span { display: flex;}
p.buttons a span em { width: 2.2em; background: #FFF; mask: url(../images/arrow.svg) no-repeat 0 center; mask-size: 1.2em; margin-left: -0.4em; transition: all 0.2s;}
p.buttons a:hover span em { mask-position: 0.3em center;}



@media screen and (min-width:800px) {
.flex-form .wrapper { margin: 0 0;}
.flex-form { display: flex; column-gap: 1rem; margin: 1rem 0;}
.flex-form .wrapper { width: 50%;}
}


@media screen and (min-width:2280px) {
#stripes {  margin-right: calc(-1140px + 13.5rem); right: 50%; }
}       


@media screen and (max-width:1700px) {
        html, body { font-size: 22px; }
}

@media screen and (max-width:1600px) {
        html, body { font-size: 20px; }
}

@media screen and (max-width:1500px) {
        html, body { font-size: 18px; }
}

@media screen and (max-width:1400px) {
        html, body { font-size: 17px; }
}

@media screen and (max-width:1300px) {
        html, body { font-size: 16px; }
}

@media screen and (max-width:1100px) {
        html, body { font-size: 15px; }
          .wrap { margin: 3rem;}
          #contact + #footer { margin-top: -3.1rem;}
          .banner .wrap { min-height: 18em; }
}

@media screen and (max-width:1000px) {
         html, body { font-size: 14px; }
            header , #footer { font-size: 1rem;}
        .has-col-right .wrap { padding-right: 21rem;}
        #key-figures {  width: 21rem; }
        #stripes { right: 9rem; }

 h1 , .h1  { font-size: 360%;max-width: 16em; margin: 1em 0; line-height: 100%;}
h2 , .h2  { font-size: 320%; max-width: 16em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}
h3 , .h3  { font-size: 180%; max-width: 16em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}

 #footer .flex { display: block; }     
}

@media screen and (max-width:800px) {
        header , #footer { font-size: 1rem;}
        .listing-categories a { width: 44%; width: calc(50% - 0.5rem); min-height: 13em; }

}

@media screen and (max-width:700px) {
header {  z-index:50;}
#footer menu { display: block;}
#footer menu a { display: block; margin: 0.5rem 0;}
#footer menu a.linkedin { margin-top: 1rem; font-size: 130%;}

.menu-open header menu { opacity: 1; pointer-events: fill;}
header menu { position: fixed; opacity: 0; pointer-events: none; transition: opacity 0.2s;  z-index:50; display: flex; flex-direction: column; top: 0; left: 0; background: #FFF url(../images/logo.svg) no-repeat 3.5rem 2.5rem; background-size: auto 2rem; box-sizing: border-box; top: 0; left: 0; width: 100%; height:100%; text-align: center; padding: 6rem 1rem 0 1rem;}
header menu a { display: block; font-size: 1.6rem; font-weight: 700; padding: 0.5em 0; line-height: 1em; background: #F8F8F8; border-radius: 1.8em; margin: 0.3rem auto; max-width: 14em; width: 100%;}
header menu a:first-child { margin-top: auto; }
header menu a:last-child { margin-bottom: auto; }
header , #footer  {    font-size:1rem;    }
.center { padding-left: 2rem; padding-right: 2rem;}
#key-figures {  width: auto; position: static; margin: 2rem 0 2rem 0; background: #F8F8F8; border-radius: 1.88rem; padding: 1px 0; }
#key-figures .sticky { position: static;}
#key-figures p { margin: 2rem;}
.wrap { margin: 2rem;}
#stripes { display:none; }
.has-col-right .wrap { padding-right: 0;}

 h1 , .h1  { font-size: 320%;max-width: 16em; margin: 1em 0; line-height: 100%;}
h2 , .h2  { font-size: 280%; max-width: 16em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}
h3 , .h3  { font-size: 180%; max-width: 16em; line-height: 100%; margin: 1em 0; position: relative; z-index: 5;}

article .flex { display: block;}
article .flex .column , article .flex .column + .column { width: auto; display: block; margin:2rem 0; padding: 0;}

article .flex .column img { max-height: 24rem;}

p.intro {
  font-size: 180%;
}





.wrap.has-col-right { padding-right: 0; position: static;}

.wrap.has-col-right .col-right { position: sticky; z-index: 10; margin:2rem 0; top: 1rem; width: auto; padding:0; height:auto; }

.wrap.has-col-right .col-right .sticky {  position: relative;  z-index: 5;  margin:0 -1.5rem; top: auto; display: block; width: auto; column-gap: 0; }
.wrap.has-col-right .col-right .sticky ul { display: flex; gap: 0.2rem; margin: 0 -0.2rem; flex-wrap: wrap; padding: 1rem;  box-shadow: 0 -1rem 0 1rem #FFF;}
.wrap.has-col-right .col-right .sticky ul li { width: 20%; width: calc(25% - 0.2rem); overflow: hidden; text-overflow: ellipsis; display: flex; gap: 0; row-gap: 0; margin: 0; }
.wrap.has-col-right .col-right .sticky ul li a { background: #FFF; font-size: 11px; border: 0.4em solid #FFF; display: block; width: 100%;  display: flex; padding:0; margin: 0; border-radius: 0.6rem; overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.wrap.has-col-right .col-right .picture { padding:6% 0;  width: 50%; margin: 0; padding: 0; height: 5rem;}
.wrap.has-col-right .col-right .picture.square { padding: 6% 0;}
.wrap.has-col-right .col-right .picture + .picture { margin-top: 0; background-image: url(../images/square-2.jpg);}


figure.table { overflow: auto;}
figure.table table { min-width: 680px;}



#toggleMenu { position: fixed; cursor: pointer; right: 1.1rem; top: -0.5rem; top: 2rem; box-sizing: border-box;  box-sizing: border-box;  border-right: none;  height: 2.8rem; width: 2.8rem; border-radius: 6px; z-index: 210; mix-blend-mode: difference; }

#toggleMenu span { position: absolute; width: 20px; height: 2px; background: #EEE; left: 50%; margin: -5px -10px; top: 50%; transition: all 0.2s;}
#toggleMenu span + span { top: auto; bottom:50%;  }

/* body.menu-open #toggleMenu span , .minimize #toggleMenu span  , .small_header #toggleMenu span  { background: #111 } */

body.menu-open #toggleMenu { position: fixed; top: 2rem;   }

body.menu-open { overflow: hidden;}


body.menu-open #toggleMenu span:nth-child(1) { transform: rotate(45deg); top: 50%;  margin: -1px -10px; }
body.menu-open #toggleMenu span:nth-child(2) { transform: rotate(-45deg); bottom: 50%;  margin: -1px -10px; }

#footer .wrap { margin:3rem; }

.center { padding: 0 1.5rem; }
#contact + #footer { margin-top: -2.1rem;}
}


@media screen and (max-width:500px) {
.listing-categories { display: block; margin:3rem 0 -1rem 0; }
        .listing-categories a { width: auto; min-height: 12em; margin: 0.5rem 0; }

        header menu { background-position: 3.5rem 2.5rem; }

        .wrap { margin: 2rem;}

        .wrap.has-col-right .col-right .sticky ul li { width: 20%; width: calc(50% - 0.2rem); white-space: nowrap; }
        .wrap.has-col-right .col-right .sticky ul li a { display: block; padding:0.4em 0.2em; }
.center { padding: 0 1rem; }

}


@media screen and (max-width:400px) {
.banner h1 { font-size: 230%; }        
header menu { padding-top: calc(8vh + 2rem);}        
header menu a {  font-size: 5.2vw; }
#footer .wrap { margin:2.5rem; }
}