html{
font-size: 12pt;
scroll-behavior: smooth;	
font-family: "Lato", sans-serif;
font-weight:300;
}
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
text-decoration: none; 
}
img, fieldset {
border: 0;
} img {
max-width: 100%;
height: auto;
width: auto\9; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
display: block;
}
::selection {
background: var(--orange); color:var(--gris-fonce); }
::-moz-selection {
background: var(--orange); color:var(--gris-fonce); }
#gototop{position:relative; visibility:hidden; height:0;}
#human{display:none;}
strong, b{font-weight:700;} .flex{display:flex;}
.wrap{position:relative; width:1650px; margin:0 auto;}
.preload{position:absolute; top:-99999px; left:-99999px;}
.anchor{position:relative; visibility:hidden; top:-150px; display:block;}
:root {
--orange: #F49345;
--blue1: #2C74B8;
--blue2: #0C456D;
--gris-pale: #EEEEEE;
--gris-fonce: #222222;
--light-gradient: linear-gradient(to top, #ccd1d6, #ffffff);
--grayed-bg: rgba(34,34,34,0.65);
}   #sticky-footer{position:fixed; background:var(--orange); display:flex; justify-content:space-between; bottom:0; left:0; right:0; padding:20px; z-index:999; transition: all 0.4s ease;}
#sticky-footer .left{align-self:center; color:var(--gris-fonce); font-size:2em;}
#sticky-footer .right{align-self:center; text-align:right;}
#sticky-footer .right a{display:inline-block; padding:10px 20px; background:var(--gris-fonce); color:var(--orange); border:1px solid var(--gris-fonce); border-radius:12px; font-size:1.4em; font-weight:bold; margin-left:20px;}
#sticky-footer .right a:hover{background:transparent; color:var(--gris-fonce);} #sticky-footer{ transform: translateY(110%); }
#sticky-footer.is-visible{ transform: translateY(0); } #top{position:absolute; top:0; left:0; right:0; height:120px; z-index:999; transition: all 0.4s ease; padding:0 80px;}
#top .flex{justify-content:space-between; height:100%;}
#top .flex .left{position:relative; align-self:center;}
#top .flex .left img{position:relative; transition: all 0.4s ease;}
#top .flex .right{position:relative; align-self:center;}
#top .flex .right a{display:inline-block; padding:10px 20px; font-weight:300; background:transparent; color:var(--gris-fonce); border:1px solid var(--gris-fonce); border-radius:12px; font-size:1.4em;}
#top .flex .right a:hover{background:var(--orange); border:1px solid var(--orange);}
#top.scrolled{position:fixed; background:white; box-shadow: 0px 5px 15px rgba(0,0,0,0.3); height:80px; transition: all 0.4s ease;}
#top.scrolled .flex .left img{max-height:50px; width:auto; transition: all 0.4s ease;} #accueil{position:relative; background:var(--light-gradient); padding:40px 0;}
#accueil .flex{justify-content:space-between;}
#accueil .flex .left{width:40%; align-self:center;}
#accueil .flex .left h1{color:var(--gris-fonce); font-size:3.5em; font-weight:300; margin-bottom:30px; line-height:1em;}
#accueil .flex .left p{color:var(--gris-fonce); font-size:1.6em; margin-bottom:50px;}
#accueil .flex .left a{position:relative; display:inline-block; padding:10px 20px; font-weight:300; background:var(--orange); border-radius:12px; color:var(--gris-fonce); font-size:1.8em;}
#accueil .flex .left a:hover{background:var(--gris-fonce); color:white;}
#accueil .flex .right{width:48%; align-self:center;}
#accueil .flex .right img{position:relative;} #presentation{position:relative; padding:150px 0;}
#presentation .flex{justify-content:space-around;}
#presentation .flex .left{width:44%; align-self:center;}
#presentation .flex .left img{position:relative;}
#presentation .flex .right{width:44%; align-self:center;}
#presentation .flex .right h2{color:var(--gris-fonce); font-size:3.5em; font-weight:300; margin-bottom:40px; line-height:1em;}
#presentation .flex .right p{color:var(--gris-fonce); font-size:1.4em; line-height:1.2em;}
#presentation .flex .right p:not(:last-of-type) {margin-bottom: 30px;} #services{position:relative; background:var(--gris-pale); padding:60px 0;}
#services .center{position:relative; text-align:center;}
#services .center h2{color:var(--gris-fonce); font-size:3.5em; font-weight:300; margin-bottom:30px;}
#services .center p{color:var(--gris-fonce); font-size:1.4em; line-height:1.2em; margin-bottom:100px;}
#services .list{position:relative; display:flex; flex-wrap:wrap;}
#services .list .service{display:flex; width:48%; align-self:flex-start; margin-bottom:100px;}
#services .list .service .icon{width:16%; margin-right:9%;}
#services .list .service .icon .circle{width:100%; padding-bottom:100%; position:relative; border-radius:50%; background:var(--blue1);}
#services .list .service .icon .circle img{position:absolute; top:0; left:0; right:0; margin:0 auto;}
#services .list .service .text{width:70%; margin-right:5%;}
#services .list .service .text h3{color:var(--gris-fonce); font-size:2em; margin-bottom:10px;}
#services .list .service .text p{color:var(--gris-fonce); font-size:1.4em; line-height:1.2em; margin-bottom:20px;}
#services .list .service .text ul{margin:0 0 20px 21px; position:relative;}
#services .list .service .text ul li{list-style:disc; color:var(--gris-fonce); font-size:1.2em; line-height:1.4em;} #pourquoi{position:relative; background:var(--blue1); padding:100px 0;}
#pourquoi .flex{justify-content:space-between;}
#pourquoi .flex .left{width:55%; align-self:center;}
#pourquoi .flex .left h2{color:white; font-weight:300; font-size:3em; margin-bottom:20px;}
#pourquoi .flex .left p{color:white; font-size:1.2em; margin-bottom:50px;}
#pourquoi .flex .left ul{margin:0 0 0 21px;}
#pourquoi .flex .left ul li{list-style:square; color:white; font-size:1.2em; line-height:1.4em; margin-bottom:20px;}
#pourquoi .flex .right{width:40%; align-self:center;}
#pourquoi .flex .right img{position:relative; height:500px;} #clients{position:relative; background:var(--blue2); padding:50px 0;}
#clients h2{color:white; text-align:center; font-size:2em; margin-bottom:10px;}
#clients p{color:white; text-align:center; font-size:1.2em; margin-bottom:40px;}
#clients .logo-slider-container{position:relative;} #clients .logo-slider {
position: relative;
} #clients .logo-slider .swiper {
width: 100%;
overflow: hidden; } #clients .logo-slider .swiper-wrapper {
align-items: center; }
#clients .logo-slider .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;  } #clients .logo-slider .swiper-slide img {
display: block;
max-height: 80px; width: auto;
object-fit: contain;
} #clients .logo-slider-container #logo-slider-left-arrow,
#clients .logo-slider-container #logo-slider-right-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
z-index: 2;
cursor: pointer;
opacity: 0.9;
transition: opacity 0.2s ease;
}
#clients .logo-slider-container #logo-slider-left-arrow { left: -35px; }
#clients .logo-slider-container #logo-slider-right-arrow { right: -35px; }
#clients .logo-slider-container #logo-slider-left-arrow:hover,
#clients .logo-slider-container #logo-slider-right-arrow:hover { opacity: 0.6; } #timeline{position:relative; padding:80px 0; background:white;}
#timeline .wrap{text-align:center;}
#timeline h2{text-align:center; position:relative; font-size:2em; margin-bottom:80px;}
#timeline img{display:block; margin:0 auto 80px;}
#timeline ol{max-width:700px; margin:0 auto; text-align:left;}
#timeline ol li{color:var(--gris-fonce); font-weight:300; font-size:1.2em; margin-bottom:10px;} #faq{position:relative; background:var(--gris-pale); padding:80px 0;}
#faq .flex{justify-content:space-between;}
#faq .flex .left{align-self:flex-start; width:23%;}
#faq .flex .left h2{font-size:2em; color:var(--gris-fonce); margin-bottom:15px;}
#faq .flex .left img{position:relative;}
#faq .flex .right{align-self:flex-start; width:70%;}
#faq .flex .right .question{position:relative; display:flex; justify-content:flex-start;}
#faq .flex .right .question .left{align-self:flex-start; width:30px; margin-right:15px;}
#faq .flex .right .question .left img{position:relative; top:5px;}
#faq .flex .right .question .right{align-self:flex-start; flex-grow:2;}
#faq .flex .right .question .right h3{color:var(--gris-fonce); font-size:1.8em; margin-bottom:30px;}
#faq .flex .right .question .right h3:hover{cursor:pointer; color:var(--orange);}
#faq .flex .right .question .right .reponse{color:var(--gris-fonce); line-height:1.4em; font-size:1.2em; margin-bottom:30px;} #faq .flex .right .question .right .reponse{
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 300ms ease, opacity 220ms ease;
} #faq .flex .right .question .right .reponse.open{
opacity: 1;
max-height: 800px; } #faq .flex .right .question .right .reponse.open{ margin-top: 6px; } #contact{position:relative; display:flex; align-items:stretch;}
#contact .left{width:50%; flex:1; background:white; padding:80px; display:flex; flex-direction:column; justify-content:center;}
#contact .left h2.title{color:var(--gris-fonce); font-size:2em; margin-bottom:10px;}
#contact .left p{color:var(--gris-fonce); font-size:1.2em; line-height:1.4em; margin-bottom:40px;} .gform-footer input[type="submit"]{display:block; padding:10px 30px; background:var(--orange); border:0; border-radius:7px; font-weight:bold; font-size:1.2em;}
.gform-footer input[type="submit"]:hover{background:var(--gris-fonce); color:#fff; cursor:pointer;}
.gform_validation_errors{margin-bottom:50px;}
.gform-body textarea{font-family:inherit;}
#contact .right{width:50%; flex:1; background:var(--orange); padding:80px; display:flex; flex-direction:column; justify-content:center;}
#contact .right .tableau{position:relative; display:flex; flex-wrap:wrap;}
#contact .right .tableau .icon{width:12%; align-self:center;}
#contact .right .tableau .icon img{position:relative; max-height:80px;}
#contact .right .tableau .text{width:88%; align-self:center; margin:35px 0;}
#contact .right .tableau .text h3{font-weight:300; color:var(--gris-fonce); font-size:1.6em; line-height:1.4em;}
#contact .right .tableau .text p{color:var(--gris-fonce); font-size:1em; line-height:1em;} #footer{position:relative; background:var(--gris-fonce); padding:20px 80px;}
#footer .flex{justify-content:space-between;}
#footer .flex .left{position:relative; align-self:center;}
#footer .flex .left img{position:relative; display:block; margin-bottom:5px;}
#footer .flex .left .links{position:relative; display:inline-flex;}
#footer .flex .left .links a{color:white; margin-right:10px; font-size:0.8em;}
#footer .flex .left .links a:hover{color:var(--orange);}
#footer .flex .right{position:relative; text-align:right; align-self:center;}
#footer .flex .right a{display:inline-block; padding:10px 20px; font-weight:300; background:transparent; color:white; border:1px solid white; border-radius:12px; font-size:1.4em;}
#footer .flex .right a:hover{background:white; color:var(--gris-fonce);} #merci-area{position:relative; padding:100px 0 100px; text-align:center;}
#merci-area img{display:inline-block; margin-bottom:30px; max-width:600px;}
#merci-area h1{margin-bottom:30px;}
#merci-area h2{margin-bottom:30px;}
#merci-area h3{margin-bottom:30px;}
#merci-area p{margin-bottom:30px; font-size:1.2em; line-height:1.4em;}
#merci-area ul{margin:0 0 30px 21px;}
#merci-area ul li{list-style:disc; font-size:1.2em; line-height:1.4em;}        @media screen and (max-width: 1750px) {
.wrap{width:1400px;}
#top{padding:0 30px;}
#accueil{padding:100px 0 40px;}
#accueil .flex .left h1{font-size:2.5em;}
#accueil .flex .left p{font-size:1.4em;}
#top.scrolled .flex .right a{font-size:1.2em;}
#presentation .flex .right h2, #services .center h2{font-size:2.5em;}
#presentation .flex .right p{font-size:1.2em;}
#services .list{padding:0 80px;}
#clients .logo-slider-container #logo-slider-left-arrow{left:-25px;}
#clients .logo-slider-container #logo-slider-right-arrow{right:-25px;}
#faq .flex .left h2{font-size:1.6em; margin-bottom:35px;}
#faq .flex .right .question .right h3{font-size:1.4em;}
#faq .flex .right .question .left img{top:0px;}
#contact .left, #contact .right{padding:30px;}
#contact .right .tableau .icon{width:18%;}
#contact .right .tableau .text{width:75%;}
#footer{padding:20px 30px;}
}
@media screen and (max-width: 1460px) {
.wrap{width:1200px;}
#accueil .flex .left h1{font-size:2em;}
#accueil .flex .left p{font-size:1.2em;}
#accueil .flex .left a{font-size:1.2em;}
#presentation .flex .right h2, #services .center h2, #pourquoi .flex .left h2{font-size:2em;}
#services .list .service .text h3{font-size:1.6em;}
#services .list .service .text p{font-size:1.2em;}
#services .list .service .text ul li{font-size:1em;}
#pourquoi .flex .right{width:35%;}
#pourquoi .flex .left{width:60%;}
#pourquoi .flex .right img{height:415px;}
#clients .logo-slider{padding:0; margin:0 80px;}
#timeline img{max-width:800px;}
#faq{padding:80px 0 40px;}
#contact .left h2{font-size:1.6em;}
#contact .right .tableau .icon img{max-height:70px; width:auto;}
#contact .right .tableau .text h3{font-size:1.4em;}
#footer .flex .right a{font-size:1.2em;}
}
@media all and (max-width: 1280px){
.wrap{width:920px;}
#accueil{padding:135px 0 40px;}
#accueil .flex .left{width:45%;}
#accueil .flex .left p{margin-bottom:30px;}
#presentation{padding:70px 0;}
#presentation .flex .left{width:40%;}
#presentation .flex .right{width:50%;}
#presentation .flex .right h2, #services .center h2{font-size:2em; margin-bottom:20px;}
#presentation .flex .right p:not(:last-of-type){margin-bottom:20px;}
#services .list{padding:0 40px;}
#services .list .service{margin-bottom:70px;}
#pourquoi .flex .left{width:50%;}
#pourquoi .flex .right{width:45%;}
#pourquoi .flex .left h2{font-size:2.8em;}
#pourquoi .flex .left ul{margin:0 40px 0 21px;}
#clients p{padding:0 200px;}
#contact .left h2.title{font-size:1.4em;}
#contact .left p{font-size:1em;}
#contact .right .tableau .icon{width:23%;}
#contact .right .tableau .icon img{max-height:60px;}
#contact .right .tableau .text{width:70%;}
#contact .right .tableau .text h3{font-size:1.2em;}
#sticky-footer .left{font-size:1.4em;}
#sticky-footer .right a{font-size:1em; margin-left:10px;}
}
@media all and (max-width: 980px){
.wrap{width:720px;}
#top, #top.scrolled{padding:0 15px; height:70px;}
#top .flex .left img, #top.scrolled .flex .left img{max-height:50px; width:auto;}
#top .flex .right a, #top.scrolled .flex .right a{padding:7px 15px; font-size:1em; border-radius:20px;}
#accueil{padding:95px 0 40px;}
#accueil .flex .left{width:55%;}
#accueil .flex .left h1{font-size:2em; margin-bottom:20px;}
#accueil .flex .left p, #accueil .flex .left a{font-size:1.2em;}
#accueil .flex .right{width:40%;}
#presentation .flex .left{width:40%;}
#presentation .flex .right{width:50%;}
#presentation .flex .right p{font-size:1em;}
#services{padding:60px 0 0;}
#services .list{padding:0;}
#pourquoi .flex{flex-direction:column;}
#pourquoi .flex .left{width:95%;}
#pourquoi .flex .right img{height:auto;}
#clients p{padding:0 100px;}
#clients .logo-slider-container #logo-slider-left-arrow{left:-10px;}
#clients .logo-slider-container #logo-slider-right-arrow{right:-10px;}
#timeline img{width:90%;}
#timeline ol{margin:0 60px;}
#timeline ol li{font-size:1em;}
#faq > .flex{flex-direction:column;}
#faq .flex .left{display:flex; width:100%; margin-bottom:10px;}
#faq > .flex > .left > img{display:none;}
#faq .flex .right{width:90%;}
#faq .flex .right .question .right h3{font-size:1.2em;}
#contact{flex-direction:column;}
#contact .left{width:94%; padding:30px 3%;}
#contact .right{width:94%; padding:30px 3%;}
#contact .right .tableau .icon{width:14%;}
#contact .right .tableau .text{width:86%;}
#sticky-footer{flex-direction:column;}
#sticky-footer .left{margin-bottom:5px; text-align:center;}
#sticky-footer .right{text-align:center;}
#services .center p{font-size:1.2em;}
#pourquoi .flex .left h2{font-size:2.2em;}
}
@media all and (max-width: 750px){
.wrap{width:440px;}
#accueil .flex{flex-direction:column;}
#accueil .flex .left{width:100%; margin-bottom:40px; text-align:center;}
#accueil .flex .left h1{font-size:2em;}
#accueil .flex .right{width:75%;}
#presentation .flex{flex-direction:column;}
#presentation .flex .left{width:100%; margin-bottom:30px;}
#presentation .flex .right{width:100%; text-align:center;}
#presentation .flex .right h2, #services .center h2, #pourquoi .flex .left h2{font-size:2em;}
#presentation .flex .left img{width:80%; margin:0 auto; display:block;}
#services .center p br{display:none;}
#services .center p{font-size:1em;}
#services .list .service{width:100%;}
#services .list .service .text p{font-size:1.1em;}
#pourquoi .flex .right{width:90%;}
#clients p{padding:0 50px;}
#faq .flex .right .question .right .reponse{font-size:1em;}
#contact .left{text-align:center;}
#contact .left p{font-size:1em;}
#contact .right .tableau .icon{width:20%;}
#contact .right .tableau .text{width:80%;}
#footer .flex{flex-direction:column;}
#footer .flex .left{order:2; margin-top:30px;}
#sticky-footer .left{font-size:1.2em;}
#sticky-footer .right a{font-size:0.8em; margin-left:5px; margin-bottom:5px;}
#footer .flex .left img{margin:0 auto 5px;}
}
@media all and (max-width: 480px){
.wrap{width:96%;}
#presentation .flex .right h2, #services .center h2, #pourquoi .flex .left h2{font-size:2em;}
#top .flex .right a, #top.scrolled .flex .right a{font-size:0.9em;}
#accueil .flex .left h1{font-size:1.8em;}
#accueil .flex .left p, #accueil .flex .left a{font-size:1em;}
#presentation .flex .right h2, #services .center h2, #pourquoi .flex .left h2{font-size:1.6em;}
#services .list .service .icon{width:15%; margin-right:5%;}
#services .list .service .text{width:80%; margin-right:0;}
#services .list .service .text p{font-size:1em;}
#services .list .service .text ul li{font-size:1em; line-height:1.2em; margin-bottom:10px;}
#services .list .service{margin-bottom:40px;}
#pourquoi{padding:50px 0;}
#pourquoi .flex .left p{font-size:1em;}
#pourquoi .flex .left ul{margin:0 0 0 21px;}
#pourquoi .flex .left ul li{font-size:1em;}
#clients h2{font-size:1.6em;}
#clients p{font-size:1em; padding:0 20px !important;}
#timeline{padding:50px 0;}
#timeline h2{font-size:1.6em; max-width:300px; margin:0 auto 80px;}
#timeline ol{margin:0 10px 0 21px;}
#faq{padding:50px 0 15px;}
#faq .flex .right{width:95%;}
#footer .flex .right a{font-size:1em;}
}