*{box-sizing: border-box}
:root {
    --darkBlue: #106db8;
    --lightBlue: #4eabeb;
    --gray: #808285;
}
body, html {scroll-behavior: smooth; margin:0; padding: 0; background-color:rgb(255, 255, 255); font-family: 'Poppins', sans-serif; font-size:0px; color:var(--gray);}
h1,h2,h3,h4,h5,h6{outline:none;font-weight:inherit;font-size:inherit;color:inherit;margin:0;padding:0;display:inline}
a {text-decoration: none; color: inherit;}
.wrapper {margin:0px auto; max-width: 1100px; width: 95%;}
.padding {padding:1% 0}
.text-wrapper {max-width: 800px; padding: 40px 0;}
.title {font-size:45px}
h1.title {font-size:32px;}
.subtitle {font-size:20px}
.text {font-size:14px; line-height:22px; margin: 0;}
.white {color:#FFF}
.bg-white {background-color:#FFF}
.black {color:black}
.bg-black {background-color:#000}
.gray {color: var(--gray);}
.bg-gray {background-color: var(--gray);}
.darkBlue {color: var(--darkBlue);}
.bg-darkBlue {background-color: var(--darkBlue);}
.lightBlue {color: var(--lightBlue);}
.bg-lightBlue {background-color: var(--lightBlue);}
.caps {text-transform:uppercase}
.bold {font-weight:700}
.semi-bold {font-weight: 600;}
.light {font-weight:300}
.poppins {font-family: "Poppins", sans-serif;}
.rtl {direction:rtl}
.ltr {direction:ltr}
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.hidden {display: none !important; opacity: 0;}
.loader {margin: -10px 20px; display: inline-block; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid var(--red); width: 30px;  height: 30px; -webkit-animation: spin 1s linear infinite; /* Safari */ animation: spin 1s linear infinite;}
.noinput {position:absolute; left:-200%; opacity:0}
.left-transition {transform: translateX(100px);}
.right-transition {transform: translateX(-100px);}
.motionEase {transition: ease-in .3s;}
.opacity0 {opacity: 0.01;}
.absolute {position: absolute;}

.text12 {font-size: 12px;}
.text14 {font-size: 14px;}
.text16 {font-size: 16px; line-height: 22px;}
.text18 {font-size: 18px;}
.text20 {font-size: 20px;}
.text22 {font-size: 22px;}
.text24 {font-size: 24px;}
.text26 {font-size: 26px; line-height: 30px;}
.text28 {font-size: 28px; line-height: 35px;}
.text30 {font-size: 30px;}
.text32 {font-size: 32px; letter-spacing:1px; line-height:40px}
.text34 {font-size: 34px; letter-spacing:1px; line-height:40px}
.text40 {font-size: 40px; letter-spacing:-1px; line-height: 38px;}
.text45 {font-size: 45px; letter-spacing:-1px; line-height: 42px;}
.text50 {font-size: 50px; line-height: 55px}
.text60 {font-size: 60px; line-height: 1;}

/* Utilities */

.cta-blue {text-align: center; min-width: 200px; transition: ease .2s; cursor: pointer; font-size: 14px; color: white; padding: 10px 60px 10px 40px; display: inline-block; background-image: url(../img/cta.svg); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cta-blue:hover {filter: brightness(1.25);}
.cta-white {text-align: center; min-width: 200px; transition: ease .2s; cursor: pointer; font-size: 14px; color: var(--lightBlue); padding: 10px 50px 10px 30px; display: inline-block; background-image: url(../img/cta-white.svg); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cta-white:hover { filter: saturate(3); }
.hr-white {border: none; border-radius: 5px; width: 60px; height: 4px; background-color: white; margin: 20px 0 40px;}
.hr-blue {border: none; border-radius: 5px; width: 60px; height: 4px; background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(9,9,121,1) 50%, rgba(78,171,235,1) 50%, rgba(78,171,235,1) 100%); margin: 20px 0 40px;}
.diago {width: 101vw; margin-top: -1px; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0.5%, rgba(255,255,255,0) 0.5%);}
.diago-reverse {width: 101vw; transform: rotate(180deg); margin-bottom: -1px; background: linear-gradient(90deg, rgba(255,255,255,0) 99.5%, rgba(255,255,255,1) 99.5%, rgba(255,255,255,1) 100%);}
ul {margin: 15px 0;}
li {margin: 15px 0;}
li::marker {color: #106db8;}

/* Ease transition */

.fast {transition: ease-in .2s;}
.medium {transition: ease-in .3s;}
.paced {transition: ease-in .4s;}
.slow {transition: ease-in .5s;}

/*Burger menu*/

.burger-menu-container {display: none; z-index: 100;}
.burger-menu-container .tabs {vertical-align: middle; margin-right: 20px;}
.burger-menu-container .burger-menu-wrapper {display: inline-block; vertical-align: middle; margin-right: 2px;}

.btn {position: sticky; width: 30px; cursor: pointer;}
.bg-span {display: block; width: 100%; border-radius: 2px; height: 2px; background: #106db8; transition: all .3s; position: relative;}
.active span:nth-child(1) {animation: ease .7s top forwards;}
.not-active span:nth-child(1) {animation: ease .7s top-2 forwards;}
.active span:nth-child(2) {animation: ease .7s scaled forwards;}
.not-active span:nth-child(2) {animation: ease .7s scaled-2 forwards;}
.active span:nth-child(3) {animation: ease .7s bottom forwards;}
.not-active span:nth-child(3) {animation: ease .7s bottom-2 forwards;}

@keyframes top {0% {top: 0; transform: rotate(0);} 50% {top: 8px; transform: rotate(0);} 100% {top: 8px; transform: rotate(45deg);}}
@keyframes top-2 {0% {top: 8px; transform: rotate(45deg);} 50% {top: 8px; transform: rotate(0deg);} 100% {top: 0; transform: rotate(0deg);}}
@keyframes bottom {0% {bottom: 0; transform: rotate(0);} 50% {bottom: 8px; transform: rotate(0);} 100% {bottom: 8px; transform: rotate(135deg);}}
@keyframes bottom-2 {0% {bottom: 8px; transform: rotate(135deg);} 50% {bottom: 8px; transform: rotate(0);} 100% {bottom: 0; transform: rotate(0);}}
@keyframes scaled { 50% {transform: scale(0);} 100% {transform: scale(0);}}
@keyframes scaled-2 {0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);}}

.menu-option {display: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 99; transition: ease-in-out .4s; background-color: white;}
.menu-option .wrapper {padding: 175px 20px 0;}
.menu-option-opened {display: initial; transform: translate(0px);}
.menu-option-closed {display: none; transform: translate(-1000px);}
.menu-option .tabs {margin: 10px 0; position: relative; cursor: pointer; display: inline-block; transition: ease .2s;}
.menu-option .tabs:hover {color: #106db8;}
.menu-option .soumission {margin-right: 0; padding: 5px 10px; background-color: #106db8; border-radius: 2px; color: white;}
.menu-option .soumission:hover {background-color: #4eabeb; color: white;}
.menu-option .dropdown {margin: 10px 0; position: relative; cursor: pointer;}
.menu-option .dropdown .dropdown-wrapper {position: absolute; top: 22px; padding-top: 3px; left: 0; width: 200%; pointer-events: none;}
.menu-option .dropdown .dropdown-wrapper .dropdown-tab {font-size: 16px !important; margin: 10px 15px; cursor: pointer; opacity: 0.001; position: relative; left: 100px; pointer-events: none;}
.menu-option .dropdown:hover .dropdown-tab {opacity: 1; left: 0px; pointer-events: initial;}
.menu-option .dropdown:hover .dropdown-tab:hover {color: #106db8;}
.menu-option .dropdown:hover .dropdown-wrapper {pointer-events: initial;}

/* Nav */

#nav {padding: 30px 0 80px; position: relative; z-index: 100; background-color: white;}
#nav .nav-wrapper {display: flex; justify-content: space-between; align-items: center;}
#nav .nav-wrapper .logo-container {}
#nav .nav-wrapper .logo-container .logo {width: 200px;}
#nav .nav-wrapper .tabs-container {display: flex; justify-content: space-between; align-items: center;}
#nav .nav-wrapper .tabs-container .tabs {margin: 0 0 0 40px; transition: ease .3s; position: relative; cursor: pointer;}
#nav .nav-wrapper .tabs-container .tabs .fleche {width: 15px; vertical-align: middle;}
#nav .nav-wrapper .tabs-container .dropdown {position: relative; margin: 0 0 0 25px; cursor: pointer;}
#nav .nav-wrapper .tabs-container .dropdown .dropdown-wrapper {position: absolute; top: 22px; padding-top: 10px; left: 0; width: 300%; pointer-events: none;}
#nav .nav-wrapper .tabs-container .dropdown .dropdown-wrapper .dropdown-tab {padding: 2px 0; cursor: pointer; opacity: 0.001; position: relative; left: 100px; pointer-events: none;}
#nav .nav-wrapper .tabs-container .dropdown .dropdown-wrapper .dropdown-tab:hover {opacity: 1; left: 0px; pointer-events: initial; color: #106db8;}
#nav .nav-wrapper .tabs-container .dropdown:hover .dropdown-tab {opacity: 1; left: 0px; pointer-events: initial;}
#nav .nav-wrapper .tabs-container .dropdown:hover .dropdown-wrapper {pointer-events: initial;}
#nav .nav-wrapper .tabs-container .tabs:first-of-type {margin-left: 40px;}
#nav .nav-wrapper .tabs-container .soumission {margin-right: 0; padding: 5px 10px; background-color: #106db8; border-radius: 2px; margin-left: 30px; color: white;}
#nav .nav-wrapper .tabs-container .soumission:hover::after {content: none;}
#nav .nav-wrapper .tabs-container .tabs::after {content: ''; width: 0.0001px; transition: ease .3s; position: absolute; bottom: -3px; height: 4px; border-radius: 4px; right: calc(50%); background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(9,9,121,1) 50%, rgba(78,171,235,1) 50%, rgba(78,171,235,1) 100%);}
#nav .nav-wrapper .tabs-container .tabs:hover {color: #106db8;}
#nav .nav-wrapper .tabs-container .tabs:hover::after {width: 60px; right: calc(50% - 30px);}
#nav .nav-wrapper .tabs-container .soumission:hover {background-color: #4eabeb; color: white;}
#nav .nav-wrapper .socials-container {display: flex; align-items: center;}
#nav .nav-wrapper .socials-container .socials-icon {width: 25px;}
#nav .nav-wrapper .socials-container .socials-icon:first-of-type {margin-right: 5px;}
#nav .nav-wrapper .socials-container .lang-selector {transition: ease .3s; cursor: pointer; background-image: url(../img/hexagon-bg.svg); background-repeat: no-repeat; text-align: center; background-position: center; background-size: contain; padding: 10px;}
#nav .nav-wrapper .socials-container .lang-selector:hover {color: rgb(132, 132, 132);}

/* Hero */

#hero {position: relative;}
#hero .hero-iframe {position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;}
#hero .hero-iframe::after {position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background-color: #1074bcc2;}
#hero .hero-iframe img {width: 100%; height: 57vw; min-height: 400px; object-fit: cover;}
#hero .hero-iframe iframe {width: 100%; height: 57vw; min-height: 400px;}
#hero .hero-content {height: 57vw; min-height: 400px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;}
#hero .hero-content .wrapper .text50 {max-width: 600px;}
#hero .hero-content .wrapper .text16 {max-width: 450px;}

/* Default template */

/* #content {padding: 80px 0;} */

/* Snippet à propos */

#snippet-propos {padding: 20px 0; position: relative;}
#snippet-propos .two-block-container {}
#snippet-propos .two-block-container .two-block {display: inline-block; vertical-align: top; width: 40%; padding-right: 40px;}
#snippet-propos .two-block-container .two-block:first-of-type {width: 60%; padding-left: 40px;}
#snippet-propos .two-block-container .two-block .content div {margin: 20px 0;}
#snippet-propos .two-block-container .two-block .cta-blue {margin-top: 60px;}
#snippet-propos .two-block-container .two-block .hex-container {z-index: 10; position: relative; display: inline-block; vertical-align: top;}
#snippet-propos .two-block-container .two-block .hex-container .hexagon-path {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; width: 200px; height: 200px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#snippet-propos .two-block-container .two-block .hex-container .hexagon-bg {background-color: white; content: ''; position: absolute; top: -10px; left: -10px; width: 220px; height: 220px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#snippet-propos .two-block-container .two-block .hex-container-1 {margin-top: -120px; margin-left: 75px;}
#snippet-propos .two-block-container .two-block .hex-container-1 .hexagon-bg {width: 270px; height: 270px;}
#snippet-propos .two-block-container .two-block .hex-container-1 .hexagon-path {width: 250px; height: 250px;}
#snippet-propos .two-block-container .two-block .hex-container-2 {margin-left: 40px;}
#snippet-propos .two-block-container .two-block .hex-container-2 .hexagon-bg {width: 170px; height: 170px;}
#snippet-propos .two-block-container .two-block .hex-container-2 .hexagon-path {width: 150px; height: 150px;}
#snippet-propos .two-block-container .two-block .hex-container-3 {margin-top: -55px; margin-bottom: -120px;}
#snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-bg {width: 400px; height: 400px;}
#snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-path {width: 380px; height: 380px;}

/* Map */

#map {padding: 0 0 80px;}

/* Snippet de services */

#snippet-service {position: relative;}
#snippet-service .wrapper {padding: 80px 0;}
#snippet-service .service-img {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#snippet-service .service-img::after {position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background-color: #1074bc92;}
#snippet-service .service-img img {width: 100%; height: 100%; object-fit: cover;}
#snippet-service .service-content {position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;}
#snippet-service .service-content .two-block {display: inline-block; width: 50%; vertical-align: top; padding-right: 120px;}
#snippet-service .service-content .two-block .semi-bold {transition: ease .3s; cursor: pointer;}
#snippet-service .service-content .two-block .semi-bold:hover {color: #106db8;}
#snippet-service .service-content .two-block .mobile {display: none;}
#snippet-service .service-content .services-container {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
#snippet-service .service-content .services-container .hex-container {cursor: pointer; top: 0; transition: ease .3s; z-index: 10; position: relative; display: inline-block; vertical-align: top; width: 25%;}
#snippet-service .service-content .services-container .hex-container:hover {top: -25px;}
#snippet-service .service-content .services-container .hex-container:hover .hexagon-bg {z-index: 1; background-color: #4eaceb4a;}
#snippet-service .service-content .services-container .margin-top {margin-top: 75px;}
#snippet-service .service-content .services-container .hexagon-path {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; width: 260px; height: 260px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#snippet-service .service-content .services-container .hexagon-bg {transition: ease .3s; background-color: white; content: ''; position: absolute; top: -10px; left: -10px; width: 280px; height: 280px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#snippet-service .service-content .services-container .active {top: -25px;}
#snippet-service .service-content .services-container .active .hexagon-bg {z-index: 1; background-color: #4eaceb4a;}

#services {padding: 20px 0 60px;}
#services hr {height: 3px; width: 50px; background-color: #106db8; margin-bottom: 50px; border: none;}
#services .two-block-container {padding: 20px 0;}
#services .two-block-container .two-block {display: inline-block; vertical-align: top; width: 50%;}
#services .two-block-container .two-block:first-of-type {padding: 0 60px 0 0;}
#services .two-block-container .two-block:first-of-type .cta-blue {margin-top: 30px;}
#services .two-block-container .two-block .cta-blue {margin-bottom: 20px;}
#services .two-block-container .two-block .service-img {text-align: center; margin-top: -500px;}
#services .two-block-container .two-block .service-img .hex-container {display: inline-block; top: 0; transition: ease .3s; z-index: 10; position: relative;}
#services .two-block-container .two-block .service-img .hexagon-path {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; width: 500px; height: 500px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#services .two-block-container .two-block .service-img .hexagon-bg {transition: ease .3s; background-color: white; content: ''; position: absolute; top: -10px; left: -10px; width: 520px; height: 520px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}

#services .two-block-container .two-block .hex-container {display: inline-block; top: 0; transition: ease .3s; z-index: 10; position: relative;}
#services .two-block-container .two-block .hexagon-path {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; width: 340px; height: 340px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#services .two-block-container .two-block .hexagon-bg {transition: ease .3s; background-color: white; content: ''; position: absolute; top: -10px; left: -10px; width: 360px; height: 360px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}

#services .middle .two-block {vertical-align: middle;}
#services .middle .two-block:first-of-type {padding: 0;}

#services .services-container {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
#services .services-container .hex-container {cursor: pointer; top: 0; transition: ease .3s; z-index: 10; position: relative; display: inline-block; vertical-align: top; width: 25%;}
#services .services-container .hex-container:hover {top: -25px;}
#services .services-container .hex-container:hover .hexagon-bg {z-index: 1; background-color: #4eaceb4a;}
#services .services-container .margin-top {margin-top: 75px;}
#services .services-container .hexagon-path {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; width: 260px; height: 260px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#services .services-container .hexagon-bg {transition: ease .3s; content: ''; position: absolute; top: -10px; left: -10px; width: 280px; height: 280px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#services .services-container .active {top: -25px;}
#services .services-container .active .hexagon-bg {z-index: 1; background-color: #4eaceb4a;}
#services .services-container .no-hover {cursor: initial;}
#services .services-container .no-hover:hover {top: 0;}
#services .services-container .no-hover .lightBlue:hover {background-color: #4eabeb;}
#services .services-container .no-hover .darkBlue:hover {background-color: #106db8;}
#services .services-container .no-hover:hover .hexagon-bg {z-index: 0;}

.extensive-content {padding: 60px 0;}

/* Snippet de réalisation */

#snippet-realisation {padding: 60px 0 20px;}

#realisation {padding: 40px 0;}
#realisation .slideshow {width: 100%;}
#realisation .arrow-container {position: relative; z-index: 10; margin-top: -30px;}
#realisation .arrow-container .cta-blue {margin-top: 60px;}
#realisation .arrow-container .arrow {display:inline-block; width: 50px; vertical-align:middle; cursor:pointer}
#realisation .arrow-container .arrow img {max-width:20px; width:100%}
#realisation .slider-container {width:100%; vertical-align:middle; overflow:hidden}
#realisation .slider-container .slide-wrapper {white-space: nowrap; transition: ease-in-out .3s; overflow:hidden; scroll-behavior:smooth;}
#realisation .slider-container .slide {white-space:initial; width:50%; display:inline-block; vertical-align:top; position: relative; z-index: 10;}
#realisation .slideshow .slider-container .slide-wrapper .slide .hex-container {width: fit-content; display: inline-block; position: relative;}
#realisation .slideshow .slider-container .slide-wrapper .slide .hex-container .blue-notice {z-index: 10; border-radius: 5px; padding: 5px 10px; background-color: #106db8; position: absolute; top: 40px; left: 60px;}
#realisation .slideshow .slider-container .slide-wrapper .slide .hexagon-path {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; width: 500px; height: 500px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}

/* Slideshow réalisations */

#slideshow-real { padding-bottom: 80px;}
#slideshow-real .slides-wrapper {top: -28vw; position: relative; padding: 200px 0 140px;}
#slideshow-real .slides-wrapper .slide-container {display: none; transition: ease .3s; border: 15px solid white; width: 100%; filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.179));}
#slideshow-real .slides-wrapper .middle {display: initial; position: absolute; z-index: 30; left: 0; right: 0;}
#slideshow-real .slides-wrapper .softLeft {display: initial; position: absolute; z-index: 20; transform: scale(0.7); left: -20%;}
#slideshow-real .slides-wrapper .softRight {display: initial; position: absolute; z-index: 20; transform: scale(0.7); right: -20%;}
#slideshow-real .slides-wrapper .farLeft {display: initial; position: absolute; z-index: 10; transform: scale(0.5); left: -35%;}
#slideshow-real .slides-wrapper .farRight {display: initial; position: absolute; z-index: 10; transform: scale(0.5); right: -35%;}
#slideshow-real .slides-wrapper .slide-container .two-block-real {display: inline-block; vertical-align: middle; width: 50%;}
#slideshow-real .slides-wrapper .slide-container .two-block-real .real-img-container {position: relative; height: 500px;}
#slideshow-real .slides-wrapper .slide-container .two-block-real .real-img-container .real-img {height: 100%; width: 100%; object-fit: cover;}
#slideshow-real .slides-wrapper .slide-container .two-block-real .real-img-container .notice {text-align: center; position: absolute; top: 20px; left: calc(50% - 50px); width: 100px; padding: 5px 10px; background-color: #106db8; border-radius: 5px; color: white; font-size: 20px; font-weight: bold;}
#slideshow-real .arrow-container {position: relative; z-index: 10; margin-top: 20px;}
#slideshow-real .arrow-container .cta-blue {margin-top: 60px;}
#slideshow-real .arrow-container .arrow {display:inline-block; width: 50px; vertical-align:middle; cursor:pointer}
#slideshow-real .arrow-container .arrow img {max-width:20px; width:100%}

/* Grid image réalisations */

#grid-img {padding-bottom: 40px;}
#grid-img .img-wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;}
#grid-img .img-wrapper .img-real-container {display: inline-block; width: 49%; height: 300px; margin: 0 0 20px; filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));}
#grid-img .img-wrapper .img-real-container img {width: 100%; height: 100%; object-fit: cover;}

/* Snippet articles */

#snippet-articles {padding: 80px 0 0; position: relative; z-index: 10; margin-bottom: -200px;}
#snippet-articles .articles-container {display: flex; justify-content: space-between; padding: 40px 0;}
#snippet-articles .articles-container .article {width: 30%; background-color: #f0f0f0; position: relative;}
#snippet-articles .articles-container .article .img-article {height: 250px;}
#snippet-articles .articles-container .article .img-article img {object-fit: cover; height: 100%; width: 100%;}
#snippet-articles .articles-container .article .content .date {padding: 10px 20px; background: linear-gradient(133deg, rgba(78,171,235,1) 0%, rgba(78,171,235,1) 60%, rgba(240,240,240,1) 60%, rgba(240,240,240,1) 100%);}
#snippet-articles .articles-container .article .content .padded-content {padding: 20px 20px 100px;}
#snippet-articles .articles-container .article .content .padded-content .hr-blue {margin: 20px 0;}
#snippet-articles .articles-container .article .content .padded-content .cta-blue {position: absolute; bottom: 20px; left: 20px; padding: 10px 60px;}

#articles .articles-container {display: flex; justify-content: center; padding: 40px 0; flex-wrap: wrap; margin-top: -17vw;}
#articles .articles-container .article {width: 30%; background-color: #f0f0f0; position: relative; margin: 0 10px; margin-bottom: 40px;}
#articles .articles-container .article .img-article {height: 250px;}
#articles .articles-container .article .img-article img {object-fit: cover; height: 100%; width: 100%;}
#articles .articles-container .article .content .date {padding: 10px 20px; background: linear-gradient(133deg, rgba(78,171,235,1) 0%, rgba(78,171,235,1) 60%, rgba(240,240,240,1) 60%, rgba(240,240,240,1) 100%);}
#articles .articles-container .article .content .padded-content {padding: 20px 20px 100px;}
#articles .articles-container .article .content .padded-content .hr-blue {margin: 20px 0;}
#articles .articles-container .article .content .padded-content .cta-blue {position: absolute; bottom: 20px; left: 20px; padding: 10px 60px;}

#article {margin-top: -450px; position: relative; z-index: 100; margin-bottom: 100px;}
#article li {margin: 5px 0;}
#article .article-wrapper {width: 65%; margin: 0 auto;}
#article .article-wrapper .article-container {background-color: #eaeef0; padding: 20px 20px 50px;}
#article .article-wrapper .article-container .article-img {height: 387px}
#article .article-wrapper .article-container .article-img img {width: 100%; height: 100%; object-fit: cover;}
#article .article-wrapper .article-container .article-content {padding: 0 30px;}
#article .article-wrapper .article-container .article-content .title-box {width: 100%; margin: 60px 0; position: relative;}
#article .article-wrapper .article-container .article-content .cta-blue {margin-top: 60px;}

/* Soumission */

#soumission {position: relative;}
#soumission .wrapper {padding:200px 0 80px 0;}
#soumission .soumission-img {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#soumission .soumission-img::after {position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background-color: #1074bc92;}
#soumission .soumission-img img {width: 100%; height: 100%; object-fit: cover;}
#soumission .soumission-content {position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;}
#soumission .soumission-content .two-block {display: inline-block; width: 50%; vertical-align: top; padding-right: 120px;}
#soumission .soumission-content .two-block:last-of-type {padding: 0;}

#soumission .custom-input {display: inline-block; width: 48%; margin: 1%; padding: 10px 20px; background-color: white; border: 2px solid #106db8;}
#soumission .custom-input::placeholder {font-style: italic; color: lightgray;}
#soumission .custom-select {display: inline-block; width: 98%; margin: 1%; padding: 10px 20px; background-color: white; border: 2px solid #106db8; border-radius: 5px; font-weight: bold; color: #106db8;}
#soumission .custom-textarea {display: inline-block; width: 98%; margin: 1%; padding: 10px 20px; background-color: white; border: 2px solid #106db8;}
#soumission .custom-textarea::placeholder {font-style: italic; color: lightgray;}
#soumission input[type="submit"] {min-width: 180px; border: none; background-color: transparent; margin-left: 1%; margin-top: 20px;}
.wpcf7 form.sent .wpcf7-response-output {margin: 20p 0 0 0; font-size: 16px; color: white; display: inline-block;}
.wpcf7-not-valid-tip {display: none;}
.wpcf7 form.invalid .wpcf7-response-output {display: inline-block; font-size: 14px; color: white;}

/* Snippet soumission */

#snippet-temoignages {padding: 60px 0;}
#snippet-temoignages .temoignage-wrapper {display: flex; justify-content: space-between; margin: 100px 0 60px;}
/* #snippet-temoignages .temoignage-wrapper .temoignage:nth-child(even) {margin-left: 40px;} */
#snippet-temoignages .temoignage-wrapper .temoignage .hex-container {position: relative;}
#snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-bg {content: ''; position: absolute; top: -15px; left: -15px; width: 380px; height: 380px; background: linear-gradient(90deg, rgba(16,109,184,1) 0%, rgba(16,109,184,1) 50%, rgba(78,171,235,1) 50%, rgba(78,171,235,1) 100%); clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-path {padding: 80px 70px; background-color: white; background-size: 120px; background-repeat: no-repeat; background-position: 220px 200px; position: relative; display: inline-block; width: 350px; height: 350px; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);}
#snippet-temoignages .temoignage-wrapper .temoignage .hex-container .male {background-image: url(../img/reviewer.svg); }
#snippet-temoignages .temoignage-wrapper .temoignage .hex-container .female {background-image: url(../img/reviewerF.svg); }
#snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-path .stars {width: 130px; margin-top: 5px;}
#snippet-temoignages .temoignage-wrapper .temoignage .hr-blue {width: 50px; height: 3px; margin: 10px 0;}

/* Footer */

#footer {padding: 60px 0; background-color: #f0f0f0;}
#footer .footer-wrapper {display: flex; justify-content: space-between; align-items: center;}
#footer .footer-wrapper .footer-tab {width: 23%;}
#footer .footer-wrapper .footer-tab .logo {width: 90%;}
#footer .footer-wrapper .footer-tab .footer-tab-wrapper {display: flex; justify-content: flex-start;}
#footer .footer-wrapper .footer-tab .footer-tab-wrapper .icon {width: 9%;}
#footer .footer-wrapper .footer-tab .footer-tab-wrapper .content {width: 86%; margin-left: 5%;}

/* Copyright */

#copyright {padding: 10px 0; text-align: center; background-color: #106db8;}
#copyright a {text-decoration: underline;}

/* Média queries */

@media (max-width:1300px) {
    #slideshow-real .slides-wrapper {top: -150px; position: relative; padding: 0;}
    #slideshow-real .slides-wrapper .middle {position: initial; display: block;}
    #slideshow-real .slides-wrapper .softLeft {display: none;}
    #slideshow-real .slides-wrapper .softRight {display: none;}
    #slideshow-real .slides-wrapper .farLeft {display: none;}
    #slideshow-real .slides-wrapper .farRight {display: none;}
    #slideshow-real .slides-wrapper .slide-container {transition: none;}
    #slideshow-real .arrow-container {margin-top: -100px;}
}

@media (max-width:1200px) {
    #snippet-propos .two-block-container .two-block .hex-container-3 {margin-top: -30px;}
    #snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-bg {width: 300px; height: 300px;}
    #snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-path {width: 280px; height: 280px;}
    #snippet-propos .two-block-container .two-block {padding-right: 0;}
}

@media (max-width:1100px) {
    #nav .nav-wrapper .tabs-container .tabs {margin: 0 15px;}

    #snippet-service .service-content .services-container .hexagon-path {width: 200px; height: 200px;}
    #snippet-service .service-content .services-container .hexagon-bg {width: 220px; height: 220px;}

    #services .services-container .hexagon-path {width: 200px; height: 200px;}
    #services .services-container .hexagon-bg {width: 220px; height: 220px;}
    #services .two-block-container .two-block .service-img {margin-top: -300px;}
    #services .two-block-container .two-block .service-img .hexagon-path {width: 400px; height: 400px;}
    #services .two-block-container .two-block .service-img .hexagon-bg {width: 420px; height: 420px;}
    #realisation .slideshow .slider-container .slide-wrapper .slide .hexagon-path {width: 350px; height: 350px;}

    #snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-path {width: 300px; height: 300px; background-position: 200px 180px;}
    #snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-bg {width: 330px; height: 330px;}
}

@media (max-width:1000px) {
    #nav {padding: 20px 0;}
    #nav .nav-wrapper .tabs-container .tabs {display: none;}
    #nav .nav-wrapper .tabs-container .dropdown {display: none;}

    #snippet-propos .two-block-container .two-block:first-of-type {padding-left: 0px;}

    .burger-menu-container {display: block; position: relative; z-index: 100; margin-right: 30px;}
    .menu-option {display: initial; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 99; transition: ease-in-out .23s;}
    
    #snippet-service .service-content .two-block {width: 100%; margin-bottom: 30px; padding-right: 0;}
    #snippet-service .service-content .two-block .mobile {display: inline-block; margin-top: 20px;}
    #snippet-service .service-content .two-block .desktop {display: none;}

    #services .two-block {width: 100%; margin-bottom: 30px; padding-right: 0;}
    #services .two-block .mobile {display: inline-block; margin-top: 20px;}
    #services .two-block .desktop {display: none;}

    #snippet-articles .articles-container {flex-wrap: wrap;}
    #snippet-articles .articles-container .article {width: 100%; margin: 0 0 20px 0;}
    
    #article {margin-top: -250px; position: relative; z-index: 100; margin-bottom: 100px;}
    #article .article-wrapper .article-container .article-img {height: 300px}
    #articles .articles-container .article {width: 47%;}

    #snippet-temoignages .temoignage-wrapper {justify-content: center; margin: 0; flex-wrap: wrap;}
    #snippet-temoignages .temoignage-wrapper .temoignage {margin: 0 5px;}
    #snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-path {width: 200px; height: 200px; background-image: none; padding: 40px 35px;}
    #snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-bg {width: 220px; height: 220px; top: -10px; left: -10px;}

    #footer {padding: 20px 0;}
    #footer .footer-wrapper {justify-content: center;}
    #footer .footer-wrapper .footer-tab {display: none; width: auto;}
    #footer .footer-wrapper .footer-tab:first-of-type {display: initial;}
    #footer .footer-wrapper .footer-tab .logo {width: 175px;}
}

@media (max-width:850px) {
    .text40 {font-size: 30px; letter-spacing:-1px; line-height: 35px;}

    #snippet-propos .two-block-container .two-block {width: 100%;}
    #snippet-propos .two-block-container .two-block:first-of-type {width: 100%; display: flex; justify-content: center; margin: -75px 0 40px;}
    #snippet-propos .two-block-container .two-block .hex-container-1 {margin-top: 0; margin-left: 0;}
    #snippet-propos .two-block-container .two-block .hex-container-2 {margin-left: 0;}
    #snippet-propos .two-block-container .two-block .hex-container-3 {margin-top: 0; margin-bottom: 0;}
    #snippet-propos .two-block-container .two-block .hex-container-1 .hexagon-bg {width: 220px; height: 220px;}
    #snippet-propos .two-block-container .two-block .hex-container-1 .hexagon-path {width: 200px; height: 200px;}
    #snippet-propos .two-block-container .two-block .hex-container-2 .hexagon-bg {width: 220px; height: 220px;}
    #snippet-propos .two-block-container .two-block .hex-container-2 .hexagon-path {width: 200px; height: 200px;}
    #snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-bg {width: 220px; height: 220px;}
    #snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-path {width: 200px; height: 200px;}

    #map {padding: 0 0 40px 0;}

    #snippet-service .wrapper {padding: 40px 0;}
    #snippet-service .service-content .services-container {margin-top: 20px;}
    #snippet-service .service-content .services-container .hexagon-path {width: 140px; height: 140px;}
    #snippet-service .service-content .services-container .hexagon-bg {width: 160px; height: 160px;}
    #snippet-service .service-content .services-container .margin-top {margin-top: 50px;}

    #services .services-container {margin-top: 20px;}
    #services .services-container .hexagon-path {width: 140px; height: 140px;}
    #services .services-container .hexagon-bg {width: 160px; height: 160px;}
    #services .services-container .margin-top {margin-top: 50px;}
    #services .two-block-container .two-block {width: 100%;}
    #services .two-block-container .two-block:first-of-type {padding: 0;}
    #services .two-block-container .two-block .service-img {margin-top: -100px;}
    #services .two-block-container .two-block .service-img .hexagon-path {width: 300px; height: 300px;}
    #services .two-block-container .two-block .service-img .hexagon-bg {width: 320px; height: 320px;}
    #services .two-block-container .two-block .hexagon-path {width: 280px; height: 280px;}
    #services .two-block-container .two-block .hexagon-bg {width: 300px; height: 300px;}
}

@media (max-width:800px) {
    #nav .nav-wrapper .logo-container .logo {width: 150px;}

    #hero .hero-iframe iframe {width: 200%; position: relative; left: -50%;}

    #hero .hero-content .text50 {font-size: 35px; line-height: 40px;}
    #hero .hero-content .hr-white {margin: 10px 0 20px;}
    #hero .hero-content .text16 {font-size: 14px;}

    #realisation .slideshow {padding: 50px 0;}
    #realisation .slider-container {border: 10px solid white;}
    #realisation .slider-container .slide {width: 50%;}

    #realisation {padding: 0;}
    #realisation .slideshow .slider-container .slide-wrapper .slide .hexagon-path {width: 200px; height: 200px;}
    #realisation .slideshow .slider-container .slide-wrapper .slide .hex-container .blue-notice {top: 0; left: 10px;}

    #article .article-wrapper .article-container .article-content .title-box {font-size: 28px; margin: 40px 0;}

    #slideshow-real .slides-wrapper {top: -100px;}
    #slideshow-real .arrow-container {margin-top: -50px;}
    #slideshow-real .slides-wrapper .slide-container {border: 10px solid white;}
    #slideshow-real .slides-wrapper .slide-container .two-block-real .real-img-container {height: 250px;}

    #soumission .soumission-content .two-block {width: 100%;}
    #soumission .soumission-content .two-block:first-of-type {padding: 10px 10px 20px;}

    #snippet-temoignages .temoignage-wrapper .temoignage {margin: 20px 5px;}
}

@media (max-width:700px) {
    #articles .articles-container {margin-top: -120px;}
    #articles .articles-container .article {width: 100%;}
    #article .article-wrapper {width: 80%;} 

    #services {padding: 20px 0 20px;}
    #services .two-block-container {padding: 20px 0 0;}
    #services .two-block-container .two-block {margin-bottom: 20px;}
    #services .two-block-container .two-block .cta-blue {margin-bottom: 20px; font-size: 12px;}
}

@media (max-width:600px) {
    .text18 {font-size: 16px;}
    
    #hero .hero-content .text50 {font-size: 20px;line-height: 25px;}
    #hero .hero-content .hr-white {margin: 10px 0;}

    #snippet-propos .two-block-container .two-block .hex-container-1 .hexagon-bg {width: 135px; height: 135px;}
    #snippet-propos .two-block-container .two-block .hex-container-1 .hexagon-path {width: 115px; height: 115px;}
    #snippet-propos .two-block-container .two-block .hex-container-2 .hexagon-bg {width: 135px; height: 135px;}
    #snippet-propos .two-block-container .two-block .hex-container-2 .hexagon-path {width: 115px; height: 115px;}
    #snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-bg {width: 135px; height: 135px;}
    #snippet-propos .two-block-container .two-block .hex-container-3 .hexagon-path {width: 115px; height: 115px;}

    #snippet-service .service-content .services-container .hexagon-path {width: 90px; height: 90px;}
    #snippet-service .service-content .services-container .hexagon-bg {width: 100px; height: 100px; top: -5px; left: -5px;}
    #snippet-service .service-content .services-container .margin-top {margin-top: 30px;}

    #services .services-container .hexagon-path {width: 90px; height: 90px;}
    #services .services-container .hexagon-bg {width: 100px; height: 100px; top: -5px; left: -5px;}
    #services .services-container .margin-top {margin-top: 30px;}

    #article .article-wrapper {width: 90%;} 
    #article .article-wrapper .article-container .article-content {padding: 0;}
    #article .article-wrapper .article-container {padding: 20px;}

    #realisation .slideshow .slider-container .slide-wrapper .slide .hexagon-path {width: 180px; height: 180px;}

    #grid-img .img-wrapper .img-real-container {width: 100%;}

    #snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-path {width: 250px; height: 250px; padding: 60px 55px;}
    #snippet-temoignages .temoignage-wrapper .temoignage .hex-container .hexagon-bg {width: 270px; height: 270px;}
}

@media (max-width:500px) {

    #slideshow-real .slides-wrapper {top: 0px; padding: 30px 0;}
    #slideshow-real .arrow-container {margin-top: 0px;}

    #snippet-temoignages .temoignage-wrapper .temoignage {margin: 0 80px 0 0;}
    #snippet-temoignages .temoignage-wrapper .temoignage:nth-child(even) {margin-left: 80px; margin-right: 0;}

}