/* Fonts */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/helveticaneue.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter-Bold';
    src: url('../fonts/Inter-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/circular-std-medium.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aleo';
    src: url('../fonts/Aleo-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global */
html, body {
    overflow-x: hidden;
}
a{
	text-decoration: none;
}
ul {
    list-style-type: none;
}
.displayDesktop{
    display: block;
}
.displayMobile{
    display: none;
}

/* Header */
.mute{
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.mute img{
    height: 45px;
    width: 45px;
}
.unmuteImage{
    display: block;
}
.muteImage{
    display: none;
}

.mute {
    display:none !important;
}
.Header{
    display: flex;
	justify-content: space-between;
    align-items: center;
	height: 73px;
    margin: auto;
}
.nav-container {
    background: #FFF;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    transition: box-shadow 500ms;
}

.nav-container.sticky {
    box-shadow: 0px 5px 20px 5px #00000020;
}
.LogoHeader{
    height: 45px;
}
.HeaderContent{
    display: flex;
	justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.HeaderContent > li > a {
  font: normal normal normal 16px/22px Helvetica Neue;
  color: #000000;
  transition: all 0.5s ease;
}
.HeaderContent > li > a:hover {
  color: #8ECBC4;
}
.HeaderContent li a.nav-link{
    padding: .5rem;
    margin: 0rem 0.7rem;
}
.HeaderContent li.active a {
  color: #8ECBC4;
  padding: 1.5rem .5rem;
  border-bottom: 3px solid #8ECBC4;
}
.buttonContact{
    padding: 8px 12px;
    background-color: #8ECBC4;
    border-radius: 5px;
    text-align: left;
    font: normal normal normal 16px/24px Helvetica Neue;
    letter-spacing: 0px;
    color: #FFFFFF!important;
    cursor: pointer;
    font-weight: 600;
    transition: all .3s;
}
.buttonContact:hover{
    text-decoration: none;
    background-color: #0D1B49;
}

[class^=imghvr-] {
    background-color: #8ECBC4;
}

[class^=imghvr-] figcaption {
    background-color: transparent;
}

/************************* Footer **************************/

.footer{
	padding: 100px 0 0 0;
    background-image: url(../images/BackFooter.webp) ;
	background-size: 100% 140%;
	background-position: 0% 0%;
    background-repeat: no-repeat;
	background-color: #0A1541d4;
    background-blend-mode: multiply;
}
.footerUp{
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr;
	margin-bottom: 30px;
}
.footerDiv{
	display: flex;
	flex-direction: column;
    margin: 0px 15px;
}
.footer .titleP{
	color: #ffffff;
    font: normal normal bold 20px/29px Gilroy;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.footer .firstP{
    font: normal normal normal 14px/22px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    width: 70%;
    margin-bottom: 55px;
}
.footer .rejoignez{
    font: normal normal normal 18px/26px Inter;
    letter-spacing: 0.54px;
    color: #F8F8F8;
    text-transform: capitalize;
    opacity: 1;
}
.footer a{
	color: #ffffff;
	text-decoration: none;
    font: normal normal normal 18px/28px Gilroy;
}
.footer a:hover{
	color: #8ECBC4;
}
.footer p{
	color: #ffffff;
    font: normal normal normal 18px/28px Gilroy;
}
.LogoRS img{
    margin-right: 22px;
    height: 30px;
}
.LogoRS img:first-child{
    margin-right: 8px;
}
.LogoFooter{
	width: 200px;
	margin-bottom: 35px;
}
.separation{
    height: 1px;
	width: 	100%;
	background: #67696c;
	margin: 40px 0px;
}
.footerDown{
    display: flex;
    justify-content: space-between;
    margin: 0 15px ;
}
@media screen and (max-width: 900px) {
    .footerUp{
        display: flex;
        flex-direction: column;
    }
    .footerDown{
        flex-direction: column;
    }
    .footer .titleP{
        margin-top: 35px;
        margin-bottom: 15px;
    }
    .footer .firstP {
        width: 100%;
    }
}

/* block */
.Section404{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
}
.Section404 h1{
    font: normal normal bold 80px/80px Inter;
    letter-spacing: 0px;
    color: #8ECBC4;
}
.Section404 h2{
    font: normal normal bold 60px/70px Inter;
    letter-spacing: 0px;
    color: #8ECBC4;
}
.Section404 p{
    text-align: center;
    font: normal normal normal 20px/30px Inter;
    letter-spacing: 0px;
    margin-top: 30px;
    color: #0D1A49;
}


.section1{
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    padding: 30px 0px;
}
.section1 H1{
    font: normal normal bold 52px/60px Inter;
    letter-spacing: 0px;
    color: #0D1A49;
    text-transform: capitalize;
    margin-bottom: 40px;
}
.section1 H1 span{
    color: #8ECBC4;
}
.VideoSection{
    margin-bottom: -6px;
    height: auto;
    min-height: 100%;
    width: 100%;
    object-fit: fill;
}

.section2{
    padding: 50px 0px;
    background: #F2F8FB;
}
.SousSection2{
    display: flex;
    justify-content: space-between;
    margin: 100px 0px;
}
.Imageection2{
    padding: 0px 30px;
}
.SousSection2 img{
    width: 100%;
    box-shadow: -10px 14px 15px #0000001A;
    border-radius: 5px;
}
.SousSection2 h2{
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: 25px;
    width: 480px;
}
.SousSection2 h2 span{
    color: #8ECBC4;
}
.SousSection2 p{
    font: normal normal normal 21px/31px Inter;
    text-align: justify;
    letter-spacing: 0px;
    color: #000000;
    width: 510px;
}


.section3{
    padding: 150px 0;
    margin: 0 auto;
}
.section3 h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    margin-bottom: 20px;
}
.section3 h2 span{
    color: #8ECBC4;
}
.section3 p{
    text-align: center;
    font: normal normal normal 18px/23px Inter;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin: 0px auto 100px;
    width: 500px;
}

.OffreEntreprise{
    padding: 0px 10px;
}

.OffreEntreprise a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    text-align: center;
}
.OffreEntreprise h3{
    font: normal normal normal 25px/35px Circular Std;
    letter-spacing: 0px;
    margin: 10px 0;
}
.OffreEntreprise p{
    font: normal normal normal 15px/19px Inter;
    letter-spacing: 0px;
    width: auto;
    margin: 0;
}

.OffreEntreprise img {
    height: 250px;
    object-fit: cover;
}

.btn-standard-1 {
    color: #FFFFFF;
    padding: 15px 30px;
    border-radius: 5px;
    background-color: #0D1B49;
    font-weight: 600;
    transition: all .3s;
}

.btn-standard-1:hover {
    color: #FFFFFF;
    background-color: #8ECBC4;
}

.section4{
    padding: 100px 0;
    background-image: url(../images/vector-bg-1.webp) ;
    background-repeat: no-repeat;
    background-size: cover;
}
.SousSection4{
    margin: 0 auto;
}
.section4 h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-bottom: 20px;
}
.section4 p{
    text-align: center;
    font: normal normal normal 14px/23px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0px auto 40px;
    width: 500px;
}
.VoirPlus{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.VoirPlus a{
    font: normal normal normal 20px/25px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-right: 5px;
    text-align: left;
}
.VoirPlus a {
    transition: all 400ms;
}
.VoirPlus a:hover {
    padding-right: 10px;
}
.ListReferences{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.ListReferences a:hover{
    text-decoration: none;
}
.ReferenceEntreprise{
    display: flex;
    flex-direction: column;
    height: 250px;
    padding: 30px 20px;
    margin: 3px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    transition: all 0.3s ease;
}
.ReferenceEntreprise h3{
    display: none;
    font: normal normal bold 25px/35px Circular Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.ReferenceEntreprise p{
    display: none;
    font: normal normal normal 15px/26px Inter;
    letter-spacing: 0px;
    text-align: left;
    color: #FFFFFF;
    width: auto;
    margin: 0px;
}
.ArrowRef{
    height: 20px;
    width: 20px;
    align-self: flex-end;
    margin-top: auto;
    display: none;
}


.section5{
    background-image: url(../images/Talents.webp) ;
    background-size: 45% 26%;
    background-position: 1% 15%;
    background-repeat: no-repeat;
    max-width: 1550px;
    padding: 230px 0px 120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.section5 > img{
    width: 100%;
}
.ZoneTextSection5{
    padding: 0px 40px 0px 90px;
}
.ZoneTextSection5 h2{
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: 25px;
    width: 480px;
}
.ZoneTextSection5 h2 span{
    color: #8ECBC4;
}
.ZoneTextSection5 .paragrapheSection5{
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.ZoneTextSection5 .paragrapheSection5 img{
    width: 20px;
}
.ZoneTextSection5 p{
    font: normal normal normal 18px/25px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    width: 510px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.ZoneTextSection5 p span{
    font-weight: bold;
}
.ButtonSection5{
    margin-top: 50px;
}

.ImageHeader {
   padding: 90px;
}

.ImageHeader h1{
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    width: 780px;
}
.ImageHeader h1 span{
    color: #8ECBC4;
}

.buttonRejoigner{
    padding: 15px;
    background-color: #8ECBC4;
    border-radius: 5px;
    text-align: left;
    font: normal normal normal 20px/24px Helvetica Neue;
    letter-spacing: 0px;
    color: #FFFFFF!important;
}
.buttonRejoigner:hover{
    text-decoration: none;
}

.section6{
    padding: 60px 0px;
    background-image: url(../images/Backcertif.webp);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    max-width: 1350px;
    margin: 0 auto;
}
.section6 h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    margin-bottom: 20px;
}
.section6 p{
    text-align: center;
    font: normal normal normal 18px/23px Inter;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin: 0px auto 70px;
    width: 500px;
}
.ListeCertification{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.Certification {
    width: 315px;
    height: 200px;
    background-image: url(../images/BackOneCertif.svg);
	background-size: contain;
	background-position: 100% 100%;
    background-repeat: no-repeat;
    margin: 5px;
    cursor: pointer;
    transition-property: all;
    transition-duration: .3s;
    display: flex;
}

.Certification p {
    font: normal normal 400 12px/18px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin : 20px 0px;
    text-align: left;
    width: 100%;
}

.Certification:hover {
    transform: translateY(-30px);
}

.lg-outer.lg-visible {
    z-index: 100000000;
    background-color: #FFFFFF66;
}

.lg-backdrop.in {
    z-index: 1000000;
    background-color: #FFFFFF66;
}

.lg-outer .lg-thumb-outer {
    background-color: #FFFFFF66;
}

.lg-toolbar {
    background-color: #FFFFFF;
}

.lg-toolbar .lg-icon, .lg-counter {
    color: #000;
}

.lg-toolbar .lg-icon:hover, .lg-counter:hover {
    color: #000;
}

.lg-next, .lg-prev {
    color: #000;
    background-color: #FFFFFF66;
}

.lg-next:hover:not(.disabled), .lg-prev:hover:not(.disabled) {
    color: #000;
    background-color: #FFFFFF66;
}

.lg-next::before {
    font-size: 50px;
    font-weight: 900;
}

.lg-prev::after {
    font-size: 50px;
    font-weight: 900;
}

.section7{
    padding: 90px 0px;
}
.section7 h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    margin-bottom: 20px;
}
.section7 p{
    text-align: center;
    font: normal normal normal 18px/23px Inter;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin: 0px auto 70px;
    width: 500px;
}
.ListImagePartenaires{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ListImagePartenaires span {
    display: flex;
    justify-content: center;
}
.ListImagePartenaires span img{
    width: 80%;
}

.plus-de-references {
    background-color: #8ECBC4;
}

.ContactSection{
    padding: 50px 0;
    background-image: url(../images/vector-bg-2.webp) ;
	background-size: cover;
    background-repeat: no-repeat;
}
.ContactInfo{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.TextContact{
    display: flex;
    flex-direction: column;
}
.TextContact h2{
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.TextContact p{
    font: normal normal normal 14px/24px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.ContactSection .ContactButton{
    background: #0D1B49;
    font: normal normal bold 15px/20px Inter;
    border-radius: 5px 5px 5px 0px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0px;
    text-align: center;
    margin: 0 auto;
    color: #FFFFFF;
    padding: 12px 40px;
}


.ContactSection2{
    padding: 50px;
    background-image: url(../images/Backcontact.svg) ;
	background-size: contain;
	background-position: 100% 100%;
    background-repeat: no-repeat;
	background-color: #8ECBC4;
    background-blend-mode: overlay;
}
.ContactInfo2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.TextContact2{
    display: flex;
    flex-direction: column;
}
.TextContact2 h2{
    font: normal normal bold 29px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.TextContact2 ul{
    padding: 0px 0px 0px 10px;
}
.TextContact2 li{
    font: normal normal normal 14px/24px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.TextContact2 li:before {
    content:"·";
    font-size:50px;
    vertical-align: top;
    line-height:20px;
}
.ContactSection2 .ContactButton2{
    background: #1E2867 0% 0% no-repeat padding-box;
    font: normal normal bold 15px/20px Inter;
    border-radius: 5px 5px 5px 0px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0px;
    text-align: center;
    margin: 0 auto;
    color: #FFFFFF;
    padding: 12px 40px;
    max-width: 300px;
    border-radius: 5px;
    line-height: 24px;
}


.Headerdigital{
    padding: 100px 50px 160px;
    background-image: url(../images/vector-bg-1.webp) ;
	background-size: cover;
    background-repeat: no-repeat;
}
.Headerdigital h1{
    text-align: center;
    font: normal normal bold 40px/50px Circular Std;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.Headerdigital h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-bottom: 20px;
    margin-top: 50px;
}

.Headerdigital p{
    text-align: center;
    font: normal normal normal 14px/23px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0px auto 40px;
    width: 400px;
}
.Headerdigital2{
    padding: 100px 50px 160px;
    background-image: url(../images/vector-bg-1.webp) ;
	background-size: cover;
    background-repeat: no-repeat;

}
.Headerdigital2 h1{
    text-align: center;
    font: normal normal bold 40px/50px Circular Std;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.Headerdigital2 h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-bottom: 20px;
    margin-top: 50px;
}

.Headerdigital2 p{
    text-align: center;
    font: normal normal normal 14px/23px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 0px auto 40px;
    width: 400px;
}
.ImagesHeader{
    margin-top: -110px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
/* .OverText{
    padding: 90px;
}
.OverText h3{
    text-align: center;
    font: normal normal bold 29px/39px Circular Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.OverText p{
    text-align: center;
    font: normal normal normal 15px/25px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
} */

.SectionCaseStudies, .SectionCaseStudies2{
    background: #EDF3FA 0% 0% no-repeat padding-box;
}
.CaseStudiesTitle{
    padding: 28px 0;
    background-color: #0D1B49;
    opacity: 1;
}
.CaseStudiesTitle h2{
    font: normal normal bold 35px/35px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    max-width: 1500px;
    margin: 0 auto;
}
.ListeCaseStudies{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding-top: 60px;
}
.ListeCaseStudies a:hover{
    text-decoration: none;
}

.ListeCaseStudies .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
.ListeCaseStudies .grid-item-2 { grid-area: 2 / 1 / 3 / 2; }
.ListeCaseStudies .grid-item-3 { grid-area: 3 / 1 / 4 / 2; }
.ListeCaseStudies .grid-item-4 { grid-area: 1 / 2 / 3 / 3; }
.ListeCaseStudies .grid-item-5 { grid-area: 3 / 2 / 4 / 3; }
.ListeCaseStudies .grid-item-6 { grid-area: 1 / 3 / 2 / 4; }
.ListeCaseStudies .grid-item-7 { grid-area: 2 / 3 / 3 / 4; }
.ListeCaseStudies .grid-item-8 { grid-area: 3 / 3 / 4 / 4; }

.ListeCaseStudies a {
    height: 250px;
}

.ListeCaseStudies .grid-item-4 {
    height: 500px;
}

.ListeCaseStudies h3, .ListeCaseStudies2 h3 {
    text-align: left;
}

.CaseStudy{
    display: flex;
    flex-direction: column;
    height: 300px;
    padding: 30px 20px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    transition: all 0.3s ease;
}
.thirdChild{
    grid-column: 3/4;
    grid-row: 1/3;
    height: 100%;
}
.fourthChild{
    grid-column: 1/2;
    grid-row: 2/4;
    height: 100%;
}
.CaseStudy h3{
    display: none;
    font: normal normal bold 25px/35px Circular Std;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.CaseStudy p{
    display: none;
    font: normal normal normal 15px/26px Inter;
    letter-spacing: 0px;
    text-align: left;
    color: #FFFFFF;
    width: auto;
    margin: 0px;
}
.CaseStudiesFooter{
    padding: 35px;
    background: #EDF3FA 0% 0% no-repeat padding-box;
}


.TemoignageSection{
    padding: 50px 50px 0px;
}
.TemoignageSection h2{
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #000000;
    margin: 0px auto 50px;
    text-align: center;
}
.TemoignageSection h2 span{
    color: #8ECBC4;
}
.ListClient{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 130px;
}
.ListClient2{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 130px;
}
.client{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px 15px;
    cursor: pointer;
}
.client .Imageclient{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    width: 140px;
    height: 140px;
    object-fit: cover;
    transition: 500ms;
}
.client .ImagePartenaire{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    width: 70%;
}
.client.PersoActive .Imageclient{
    -webkit-filter: none;
    filter: none;
    transform: scale(1.2);
}
.client.PersoActive .ImagePartenaire{
    -webkit-filter: none;
    filter: none;
}
.client.PersoActiveHover .Imageclient{
    -webkit-filter: none;
    filter: none;
}
.client.PersoActiveHover .ImagePartenaire{
    -webkit-filter: none;
    filter: none;
}
.Info{
    padding: 50px 0px 30px;
    background-image: url(../images/back-section.webp);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
.Info > div{
    display: none;
    padding: 50px;
    background-image: url(../images/BackgroundTemoi2.webp) ;
	background-size: 67px 50px;
	background-position: 0% 0%;
    background-repeat: no-repeat;
    width: 600px;
    margin: 0 auto;
    transition: all 0.5s ease;
}
.Info .InfoActive{
    display: block;
    transition: all 0.5s ease;
}
.Info p{
    text-align: justify;
    font: italic normal normal 16px/24px Aleo;
    letter-spacing: 0px;
    color: #101E5A;
}
.FooterTemoi{
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.FooterTemoi .Imageclient{
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.FooterTemoi .ImagePartenaire{
    width: 130px;
}
.FooterTemoi .BlockText{
    margin: 0 20px;
}
.FooterTemoi h3{
    font: normal normal bold 16px/19px Circular Std;
    letter-spacing: 0px;
    color: #10165F;
    opacity: 1;
}
.FooterTemoi p{
    font: normal normal normal 16px/19px Circular Std;
    letter-spacing: 0px;
    color: #6B6B6B;
    opacity: 1;
    margin-bottom: 0px;
}


.PartenaireSection{
    padding: 50px;
    padding-top: 100px;
    padding-bottom: 100px;
    background: #F4F8FD 0% 0% no-repeat padding-box;
}
.PartenaireSection h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    margin-bottom: 20px;
}
.PartenaireSection h2 span{
    color: #8ECBC4;
}
.ListPartenaire{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.ListPartenaire span {
    display: flex;
    justify-content: center;
}
.ListPartenaire span img{
    filter: grayscale(100%);
    padding: 20px;
    height: 65px;
}

/* .clipped-bg {
    background-color: #8ECBC4;
    width: fit-content;
    padding: 5px 20px 5px 12px;
    clip-path: polygon(0 10%, 100% 0,95% 100%,0 90%);
    color: #FFF;
} */

.clipped-bg {
    color: #0D1B49;
}

.agence-digitale-service {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0px 10px;
}

.agence-digitale-service p {
    width: 75%;
    color: #000;
    text-align: center;
}

.agence-digitale-service ul {
    list-style-type: disc;
    font-size: 12px;
    text-align: left;
}

.agence-media-service {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0px 10px;
}

.agence-media-service p {
    width: 75%;
    color: #000;
    text-align: center;
}

.SectionExpertise{
    padding: 150px 0;
    margin: 0 auto;
}
.SectionExpertise h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin-bottom: 20px;
}
.SectionExpertise h2 span{
    color: #8ECBC4;
}
.SectionExpertise p{
    text-align: center;
    font: normal normal normal 18px/23px Inter;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin: 0px auto 50px;
    width: 500px;
}
.ListEspertises{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}
.Expertise{
    height: auto;
    display: flex;
    flex-direction: column;
}
.Expertise img{
    height: 80px;
    margin-bottom: 20px;
    object-fit: contain;
}
.Expertise h3{
    font: normal normal bold 20px/23px Circular Std;
    color: #1F3947;
    text-align: center;
}
.Expertise p{
    font: normal normal normal 12px/17px Inter;
    text-align: left;
    color: #1F3947;
    width: auto;
    text-align: center;
}


.SectionParcours{
    padding: 150px 50px;
    padding-top: 80px;
    background-image: url(../images/back-section.webp) ;
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    max-width: 1550px;
    margin: 0 auto;
}
.SectionParcours h2{
    text-align: center;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin-bottom: 20px;
}
.SectionParcours h2 span{
    color: #8ECBC4;
}
.SectionParcours p{
    text-align: center;
    font: normal normal normal 18px/23px Inter;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin: 0px auto 50px;
    width: 500px;
}
.ListParcours{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.ListParcours img{
    width: 260px;
    height: 200px;
    margin: 10px 15px;
}


.SectionOffresEmploi{
    padding: 50px 0;
    background-color: #0D1B49;
}
.SectionOffresEmploi h2 {
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 20px 10px;
}
.SectionOffresEmploi p {
    font: normal normal normal 14px/23px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin: 20px 10px;
}
.ListOffreEmploi{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.OffreEmploi img{
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
}
.OffreEmploi h3 {
    font: normal normal bold 20px/24px Inter;
    color: #FFFFFF;
    margin-bottom: 20px;
}
.OffreEmploi p {
    font: normal normal normal 14px/23px Inter;
    color: #FFFFFF;
    margin: 0px 0px 20px;
}
.OffreEmploi .DivButton{
    margin-top: 35px;
}
.OffreEmploi a{
    text-decoration: none;
    padding: 10px 25px;
    font: normal normal normal 20px/24px Inter;
    border: 1px solid #8ECBC4;
    border-radius: 5px;
    color: #FFFFFF;
}
.OffreEmploi a:hover{
    text-decoration: none;
    background: transparent linear-gradient(261deg, #8ECBC4 0%, #53CBCB 57%, #41A4D8 100%) 0% 0% no-repeat padding-box;
    color: #FFFFFF;
}

.offre-accroche {
    font-family: Circular Std;
}
.DetailHeader{
    height: 440px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    padding: 40px 0;
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
.DetailHeader H1{
    font: normal normal bold 45px/59px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: capitalize;
}
.DetailHeader H1 span{
    color: #8ECBC4;
}
.DetailSousHeader{
    justify-content: space-between;
    align-items: flex-end;
}
.ListeOffreButton{
    padding: 10px 15px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 5px;
    font: normal normal normal 17px/24px Inter;
    letter-spacing: 0px;
    color: #1E2867;
}
.ListeOffreButton:hover{
    text-decoration: none;
    color: #1E2867;
}



#details-offre{
    padding: 60px 0px;
}
.InfoOffre .title{
    font: normal normal bold 25px/40px Circular Std;
    color: #031142;
    text-align: left;
    text-transform: uppercase;
    opacity: 1;
}
.InfoOffre h3{
    font: normal normal normal 16px/27px Circular Std;
    letter-spacing: 0px;
    color: #191919;
}
.InfoOffre h3 span{
    color: #8ECBC4;
}
.detail_offre h3{
    font: normal normal bold 20px/45px Circular Std;
    color: #1E2867;
}
.detail_offre p{
    font-family: Circular Std;
}
#details-offre .col-lg-5 .title2{
    font: normal normal bold 20px/33px Helvetica Neue;
    letter-spacing: 0px;
    color: #1C1C1C;
    text-align: left;
    text-transform: uppercase;
    opacity: 1;
    margin-bottom: 20px;
}
#details-offre .col-lg-7 p{
    text-align: left;
    opacity: 1;
}
.Notice{
    text-align: left;
    font: normal normal normal 9px/28px Inter;
    letter-spacing: 0px;
    margin-bottom: 40px;
    color: #221C1C;
}
#details-offre .ValideDiv input{
    width: 100%;
    font: normal normal normal 12px/32px Helvetica Neue;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    background: #3C3B84 0% 0% no-repeat padding-box;
    border-radius: 5px;
}
.candidature_form{
    padding: 20px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 19px #00000010;
    border-radius: 10px;
}
.candidature_form label{
    font: normal normal normal 12px/20px Inter;
}
.candidature_form input{
    font: normal normal normal 12px/20px Inter;
}
.candidature_form .form-group {
    margin-bottom: 0.5rem;
}


.contactHeader{
    height: 400px;
    display: flex;
    align-items: flex-end;
    padding: 40px 50px;
    background: transparent linear-gradient(120deg, #3C3B84 0%, #1E1E42 100%) 0% 0% no-repeat padding-box;
}
.contactHeader div{
    padding: 0px 50px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    background-image: url(../images/BackContact.webp);
    background-size: 71%;
    background-position: 0% 23%;
    background-repeat: no-repeat;
}
.contactHeader h1{
    text-align: left;
    font: normal normal bold 50px/60px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}


.ContactForm{
    padding: 60px 0px;
    background: #EDF3FA 0% 0% no-repeat padding-box;
}
.ContactForm .col-lg-7 .title{
    font: normal normal bold 25px/40px Helvetica Neue;
    color: #000000;
    text-align: left;
    text-transform: uppercase;
    opacity: 1;
    margin-bottom: 30px;
}
.contact_info{
    padding: 40px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #8ECBC4;
    border-radius: 10px;
}
.contact_info h2{
    font: normal normal bold 25px/40px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    margin-bottom: 30px;
}
.contact_info .adresseSection h3{
    font: normal normal 600 13px/21px Inter;
    letter-spacing: 0px;
    color: #1E2867;
}
.contact_info .adresseSection p{
    font: normal normal normal 13px/17px Inter;
    letter-spacing: 0px;
    color: #414141;
    width: 50%;
}
.contact_info .adresseSection{
    margin-bottom: 30px;
}
.contact_info .ButtonAdresseMail, .contact_info .ButtonPhoneNumber {
     transition: opacity 1s ease-out;
    padding: 15px 40px;
    background: #8ECBC4 0% 0% no-repeat padding-box;
    border-radius: 6px;
    font: normal normal 600 13px/21px Inter;
    letter-spacing: 0px;
    border: #8ECBC4;
    color: #FFFFFF;
    cursor: pointer;
}
#AdresseMail, #PhoneNumber{
    display: none;
    font: normal normal 600 13px/21px Inter;
    letter-spacing: 0px;
    color: #1E2867;
}
#AdresseMail a, #PhoneNumber a {
    color: #8ECBC4;
}
.contact_info .RS_section h3{
    margin-top: 50px;
    font: normal normal 600 13px/21px Inter;
    letter-spacing: 0px;
    color: #1E2867;
}
.contact_info .RS_section img{
    width: 30px;
    margin-right: 15px;
}
.contact_form label{
    font: normal normal normal 12px/20px Inter;
}
.contact_form input{
    font: normal normal normal 12px/20px Inter;
}
.contact_form .form-group {
    margin-bottom: 0.5rem;
}
.contact_form .ValideDiv input{
    margin-top: 20px;
    width: 100%;
    font: normal normal normal 12px/32px Helvetica Neue;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    background: #3C3B84 0% 0% no-repeat padding-box;
    border: 0;
    padding: 4px;
    font-weight: bold;
    border-radius: 0;
}


.CaseStudiesReference{
    padding: 50px 40px;
    background-image: url(../images/BackOneCertif.svg) ;
	background-position: 100% 0%;
    background-repeat: no-repeat;
	background-color: #0D1B49;
    background-blend-mode: overlay;
}

.CaseStudiesReference h2{
    text-align: left;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-bottom: 20px;
}
.ListReferences2{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ListReferences2 a:hover{
    text-decoration: none;
}
.ReferenceEntreprise2{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 250px;
    padding: 30px 50px;
    margin: 3px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    transition: all 0.3s ease;
}
.ReferenceEntreprise2 h3{
    font: normal normal bold 25px/35px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
}
.ReferenceEntreprise2 p{
    font: normal normal normal 15px/26px Inter;
    letter-spacing: 0px;
    text-align: left;
    color: #FFFFFF;
    width: auto;
    margin: 0px;
}
.ArrowRef2{
    height: 20px;
    width: 20px;
    align-self: flex-end;
}


.TemoignageReferenceSection{
    padding: 50px 0px;
    background: #EDF3FA 0% 0% no-repeat padding-box;
}
.TemoignageReferenceSection h2 {
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: 10px;
    text-align: left;
}
.TemoignageReferenceSection h2 span {
    color: #8ECBC4;
}
.TemoignageReferenceSection p {
    font: normal normal normal 17px/27px Inter;
    width: 600px;
    letter-spacing: 0px;
    color: #0F0F0F;
    margin-bottom: 30px;
    text-align: left;
}
.OneTemoignageReference{
    margin-bottom: 40px;
}
.OneTemoignageReference span{
    display: flex;
    justify-content: center
}
.OneTemoignageReference span img{
    width: 90%;
    height: 390px;
}
.OneTemoignageReference .Temoignage{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 50px;
    background-image: url(../images/BackgroundTemoi2.webp);
    background-size: 67px 50px;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    margin: 0 auto;
}
.OneTemoignageReference .Temoignage p{
    width: 100%;
    text-align: justify;
    font: italic normal normal 16px/24px Aleo;
    letter-spacing: 0px;
    color: #101E5A;
    margin-bottom: 0px;
}


.RefrenceHeader{
    height: 400px;
    display: flex;
    align-items: flex-end;
    padding: 40px 0;
    background-image: linear-gradient(114deg, #8ECBC4 0%, #3446ACD6 50%, #8ECBC4 100%), url(../images/reference-bg.webp);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

.RefrenceHeader h1{
    font: normal normal bold 45px/59px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: capitalize;
    margin-top: 50px;
}

.RefrenceHeader h2{
    text-align: left;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}
.RefrenceHeader p{
    width: 500px;
    text-align: left;
    font: normal normal normal 17px/27px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.CaseStudiesReference {
    padding: 40px 0;
}

.CaseStudiesReference h2{
    text-align: left;
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    padding: 40px 25px;
    text-align: center;
    margin: auto;
}


.DetailRef{
    padding: 40px 0px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    background-image: url(../images/LogoBack.svg);
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
.DetailReferenceHeader h2{
    text-align: left;
    font: normal normal normal 25px/24px Inter;
    letter-spacing: 5.4px;
    color: #0D1B49;
    text-transform: uppercase;
    opacity: 1;
}
.DetailReferenceHeader h1{
    text-align: left;
    font: normal normal bold 50px/72px Inter;
    letter-spacing: 0px;
    color: #0D1B49;
    opacity: 1;
    margin-bottom: 0px;
}
.HeaderReference{
    width: 100%;
}

.RefStat{
    background: #F4F8FD 0% 0% no-repeat padding-box;
    padding: 20px 0px;
    margin: 20px 0px;
}
.ListStatReference{
    display: flex;
    justify-content: space-around;
    padding: 0px 50px;
    flex-wrap: wrap;
}
.OneStat{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}
.OneStat img{
    width: 60px;
    height: 60px;
}
.OneStat .number{
    text-align: center;
    font: normal normal 600 30px/47px Inter;
    letter-spacing: 0px;
    color: #124C9B;
    opacity: 1;
    margin: 5px 0px;
}
.OneStat .description{
    font: normal normal normal 16px/25px Inter;
    letter-spacing: 0px;
    color: #124C9B;
    text-transform: capitalize;
    opacity: 1;
    text-align: center;
}


.SectionDetailReference{
    padding: 30px 0px;
}
.SectionDetailReference img{
    width: 100%
}
.SectionDetail{
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-repeat: no-repeat;
}
.SectionDetail > div h3 {
    position: relative;
}

.SectionDetail > div img {
    position: relative;
    left: -10px;
    top: 40px;
    width: unset;
    max-width: 100%;
}

/* .SectionDetail.Brief{
    background-image: url(../images/brief-bg.webp);
    background-position-x: left;
    background-position-y: top;
    background-size: contain;
} */
.SectionDetail.Contexte{
    background-image: url(../images/contexte-back.webp);
    background-position-x: left;
    background-position-y: top;
    background-size: contain;
}
.SectionDetail.Dispositif{
    background-image: url(../images/dispositif-back.webp);
    background-position-x: left;
    background-position-y: top;
    background-size: contain;
}
.SectionDetail h3{
    text-align: left;
    font: normal normal bold 27px/49px Inter;
    letter-spacing: 0px;
    color: #124C9B;
    text-transform: capitalize;
    opacity: 1;
}
.SectionDetail p{
    font-family: Inter;
}
.DetailExpertise{
    padding: 30px;
    background: #F6FAFE 0% 0% no-repeat padding-box;
    border: 1px solid  ;
    margin-bottom: 30px;
    margin-top: 30px;
}
.DetailExpertise ul{
    padding: 0px;
}
.DetailExpertise ul li{
    list-style: none;
    font-family: Inter;
    margin-bottom: 10px;
}
.DetailExpertise ul li:before{
   content: '';
   display: inline-block;
   height: 15px;
   width: 15px;
   background-image: url(../images/arrowTalent.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
    margin-right: 12px;
}
.separation2{
    height: 5px;
    width: 30%;
    background: #8ECBC4;
    margin: 20px 0px;
}

#close {
    display: none;
    cursor: pointer;
    margin-bottom: 30px;
}

#hamburger {
    display: none;
    cursor: pointer;
    filter: invert(1);
}

#mobile-menu-overlay {
    display: none;
    background-color: #000000AA;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.offre-header-btn {
    text-align: center;
}

.ListeOffreButton {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .ListeCaseStudies {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .ListeCaseStudies .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
    .ListeCaseStudies .grid-item-2 { grid-area: 1 / 2 / 2 / 3; }
    .ListeCaseStudies .grid-item-3 { grid-area: 2 / 1 / 3 / 2; }
    .ListeCaseStudies .grid-item-4 { grid-area: 2 / 2 / 3 / 3; }
    .ListeCaseStudies .grid-item-5 { grid-area: 3 / 1 / 4 / 2; }
    .ListeCaseStudies .grid-item-6 { grid-area: 3 / 2 / 4 / 3; }
    .ListeCaseStudies .grid-item-7 { grid-area: 4 / 1 / 5 / 2; }
    .ListeCaseStudies .grid-item-8 { grid-area: 4 / 2 / 5 / 3; }

    .ListeCaseStudies .grid-item-4 {
        height: 250px;
    }
}

@media screen and (max-width: 1020px) {
    .no-scroll {
        overflow: hidden;
    }

    .header {
        height: 73px;
    }

	.HeaderContent {
        display: none;
    }

    #hamburger, #close {
        display: inline-block;
    }

    .HeaderContent.show {
        display: block;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        left: 30%;
        background-color: #8ECBC4;
        z-index: 100;
        padding: 20px;
        transition: all 500ms;
    }

    #mobile-menu-overlay.show {
        display: block;
    }

    .HeaderContent .nav-item a {
        display: block;
        font-size: 20px;
        color: #FFF;
        margin-bottom: 30px !important;
    }

    .HeaderContent .nav-item.active a {
        color: #FFF;
        padding: 0.5rem;
        border-left: 2px solid #FFF;
    }

    .HeaderContent .nav-item.last {
        position: absolute;
        bottom: 0;
    }

    .ImagesHeader{
        grid-template-columns: 1fr;
    }
}


@media screen and (max-width: 1100px) {
    .ZoneTextSection5 {
        padding: 0px 25px;
    }
}
@media screen and (max-width: 1000px) {
    .ListOffreImage{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .OffreEntreprise{
        width: 300px;
        margin-bottom: 20px;
    }
    .section5{
        display: flex;
        flex-wrap: wrap;
        background-image: none;

    }
    .ZoneTextSection5 h2, .ZoneTextSection5 p{
        width: 100%;
    }
    .ZoneTextSection5{
        padding: 170px 60px 60px;
        background-image: url(../images/Talents.webp);
        background-size: contain;
        background-position: 0% 0%;
        background-repeat: no-repeat;
    }
}

.ListeCaseStudies2 {
    padding-top: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}

.ListeCaseStudies2 .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
.ListeCaseStudies2 .grid-item-2 { grid-area: 1 / 2 / 2 / 3; }
.ListeCaseStudies2 .grid-item-3 { grid-area: 1 / 3 / 2 / 4; }

.ListeCaseStudies2 > a {
    height: 500px;
}

.ListeCaseStudies2 figure {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

.ListeCaseStudies3 {
    padding-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.ListeCaseStudies3 .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
.ListeCaseStudies3 .grid-item-2 { grid-area: 1 / 2 / 2 / 3; }
.ListeCaseStudies3 .grid-item-3 { grid-area: 1 / 3 / 2 / 4; }
.ListeCaseStudies3 .grid-item-4 { grid-area: 1 / 4 / 2 / 5; }
.ListeCaseStudies3 .grid-item-5 { grid-area: 2 / 1 / 3 / 2; }
.ListeCaseStudies3 .grid-item-6 { grid-area: 2 / 2 / 3 / 3; }
.ListeCaseStudies3 .grid-item-7 { grid-area: 2 / 3 / 3 / 4; }
.ListeCaseStudies3 .grid-item-8 { grid-area: 2 / 4 / 3 / 5; }

.ListeCaseStudies3 > a {
    height: 250px;
}

.ListeCaseStudies3 figure {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

.SectionCaseStudies2 .ListeCaseStudies3 .c4-izmir img, .SousSection4 .ListReferences .c4-izmir img, .SectionCaseStudies2 .ListeCaseStudies2 .c4-izmir img {
    object-fit: unset;
}

@media screen and (max-width: 1200px) {
    .ListeCaseStudies3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    
    .ListeCaseStudies3 .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
    .ListeCaseStudies3 .grid-item-2 { grid-area: 1 / 2 / 2 / 3; }
    .ListeCaseStudies3 .grid-item-3 { grid-area: 2 / 1 / 3 / 2; }
    .ListeCaseStudies3 .grid-item-4 { grid-area: 2 / 2 / 3 / 3; }
    .ListeCaseStudies3 .grid-item-5 { grid-area: 3 / 1 / 4 / 2; }
    .ListeCaseStudies3 .grid-item-6 { grid-area: 3 / 2 / 4 / 3; }
    .ListeCaseStudies3 .grid-item-7 { grid-area: 4 / 1 / 5 / 2; }
    .ListeCaseStudies3 .grid-item-8 { grid-area: 4 / 2 / 5 / 3; }
    
    .ListeCaseStudies3 > a {
        height: auto !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 600px) {
    .ListeCaseStudies3 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);
    }

    .ListeCaseStudies3 .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
    .ListeCaseStudies3 .grid-item-2 { grid-area: 2 / 1 / 3 / 2; }
    .ListeCaseStudies3 .grid-item-3 { grid-area: 3 / 1 / 4 / 2; }
    .ListeCaseStudies3 .grid-item-4 { grid-area: 4 / 1 / 5 / 2; }
    .ListeCaseStudies3 .grid-item-5 { grid-area: 5 / 1 / 6 / 2; }
    .ListeCaseStudies3 .grid-item-6 { grid-area: 6 / 1 / 7 / 2; }
    .ListeCaseStudies3 .grid-item-7 { grid-area: 7 / 1 / 8 / 2; }
    .ListeCaseStudies3 .grid-item-8 { grid-area: 8 / 1 / 9 / 2; }
    
    .ListeCaseStudies3 > a {
        height: auto !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 900px) {
    .LogoHeader {
        height: 34px;
    }
    .ListImagePartenaires span {
        width: 50%;
    }
    .Headerdigital p {
        width: unset;
    }
    .SectionExpertise p {
        width: unset;
    }
    .Headerdigital2 p {
        width: unset;
    }
    .TemoignageReferenceSection p {
        width: unset;
    }
    .SectionParcours p {
        width: unset;
    }
    .ListImagePartenaires, .SousSection2{
        flex-wrap: wrap;
    }
    .ZoneTextSection2{
        margin-bottom: 20px;
    }
    .Imageection2{
        padding: 0px;
    }
    .SousSection2{
        margin: 50px 0px;
    }
    .section3{
        padding: 100px 0px;
    }
    .section5{
        padding: 0px 0px 30px;
        background-position: 6% 65%;
    }
    .SousSection2 h2, .SousSection2 p, .section3 p,.section4 p,.section6 p,.section7 p{
        width: 100%;
    }
    .contactHeader{
        padding: 40px 20px;
    }
    .displayDesktop{
        display: none;
    }
    .displayMobile{
        display: block;
    }
    .section1 H1 , .contactHeader h1{
        font: normal normal bold 40px/50px Inter;
    }
    #contact_form{
        margin-bottom: 40px;
    }

    .ListeCaseStudies {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);
    }

    .ListeCaseStudies .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
    .ListeCaseStudies .grid-item-2 { grid-area: 2 / 1 / 3 / 2; }
    .ListeCaseStudies .grid-item-3 { grid-area: 3 / 1 / 4 / 2; }
    .ListeCaseStudies .grid-item-4 { grid-area: 4 / 1 / 5 / 2; }
    .ListeCaseStudies .grid-item-5 { grid-area: 5 / 1 / 6 / 2; }
    .ListeCaseStudies .grid-item-6 { grid-area: 6 / 1 / 7 / 2; }
    .ListeCaseStudies .grid-item-7 { grid-area: 7 / 1 / 8 / 2; }
    .ListeCaseStudies .grid-item-8 { grid-area: 8 / 1 / 9 / 2; }

    .ListeCaseStudies .grid-item-4 {
        height: 250px;
    }



    .ListeCaseStudies2 {
        grid-template-columns: 1fr;
    }

    .ListeCaseStudies2 .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
    .ListeCaseStudies2 .grid-item-2 { grid-area: 2 / 1 / 3 / 2; }
    .ListeCaseStudies2 .grid-item-3 { grid-area: 3 / 1 / 4 / 2; }

    .ListeCaseStudies2 > a {
        height: auto !important;
        width: 100% !important;
    }




    .ListReferences2 {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(3, 1fr) !important;
    }

    .ListReferences2 .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
    .ListReferences2 .grid-item-2 { grid-area: 2 / 1 / 3 / 2; }
    .ListReferences2 .grid-item-3 { grid-area: 3 / 1 / 4 / 2; }
    .ListReferences2 .grid-item-4 { grid-area: 4 / 1 / 5 / 2; }
    .ListReferences2 .grid-item-5 { grid-area: 5 / 1 / 6 / 2; }
    .ListReferences2 .grid-item-6 { grid-area: 6 / 1 / 7 / 2; }
    .ListReferences2 .grid-item-7 { grid-area: 7 / 1 / 8 / 2; }
    .ListReferences2 .grid-item-8 { grid-area: 8 / 1 / 9 / 2; }

    .ListReferences2 > a {
        height: auto !important;
        width: 100% !important;
    }

    .CaseStudiesReference {
        padding: 50px 0 !important;
    }



        input, select {
        padding: 15px 20px !important;
        font-size: 14px !important;
    }
    
    label {
        font-size: 16px !important;
        margin-top: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .ValideDiv input {
        border-radius: 5px;
        padding: 12px;
        font-size: 20px;
        margin-bottom: 60px;
    }
    
    .contact_info .adresseSection p {
        width: 100% !important;
    }

    .ContactSection2 {
        padding-right: 40px !important;
        padding-left: 40px !important;
    }

    .ContactSection2 .ContactButton2 {
        max-width: unset;
    }

    .offre-header-btn {
        text-align: left;
    }

    .DetailSousHeader h1 {
        font-size: 26px;
        line-height: 38px;
    }

    .DetailReferenceHeader h1 {
        font-size: 24px;
    }
    .ImageHeader{
        padding: 50px;
    }
    .ImageHeader h1{
        width: auto;
    }
}

.errorlist {
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.errorlist li {
    color: red;
}

@media screen and (max-width: 600px) {
    .section3, .section2{
        padding: 30px 0px;
    }
    .ZoneTextSection5{
        padding:  100px 30px 30px;
    }
    .contactHeader{
        height: 275px;
        padding: 40px 0px;
        background-image: url(../images/BackContact.webp), linear-gradient(120deg, #3C3B84 0%, #1E1E42 100%);
        background-size: contain;
        background-position: 0% 23%;
        background-repeat: no-repeat;
    }
    .section1 H1 , .contactHeader h1{
        font: normal normal bold 30px/34px Inter;
    }
    .SousSection2 h2, .section3 h2, .section4 h2,.ZoneTextSection5 h2,.section6 h2,.section7 h2{
        font: normal normal bold 27px/34px Inter;
    }
    .SousSection2 p,.section3 p,.ZoneTextSection5 p,.section6 p,.section7 p{
        font: normal normal normal 16px/21px Inter;
    }
    .contactHeader div{
        padding: 0px 50px;
        background: none;
    }
    .ContactSection2{
        background-image: none;
        padding: 50px 0px;
    }
    .ContactInfo2{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .TextContact2{
        margin-bottom: 20px;
    }
    .TextContact2 h2{
        font: normal normal bold 27px/37px Inter;
    }
    .TextContact2 ul{
        padding: 0px;
    }
    .TextContact2 li{
        font: normal normal normal 12px/24px Inter;
    }
    .ContactSection2 .ContactButton2{
        width: 100%;
    }
    .Section404 h1{
        font-size: 50px;
    }
}
@media screen and (max-width: 400px) {
    .contactHeader{
        height: 250px;
    }
    .section1 H1 ,.contactHeader h1{
        font: normal normal bold 27px/30px Inter;
    }
    .ImageHeader{
        padding: 20px;
    }
    .ImageHeader h1{
        font: normal normal bold 27px/34px Inter;
    }
    .SectionParcours h2{
        font: normal normal bold 27px/34px Inter;
    }
    .Headerdigital h1{
        font: normal normal bold 27px/34px Inter;
    }
    .Headerdigital h2{
        font: normal normal bold 27px/34px Inter;
    }
    .Headerdigital2 h1{
        font: normal normal bold 27px/34px Inter;
    }
    .Headerdigital2 h2{
        font: normal normal bold 27px/34px Inter;
    }
    .RefrenceHeader h1{
        font: normal normal bold 27px/34px Inter;
    }
    .CaseStudiesReference h2{
        font: normal normal bold 27px/34px Inter;
    }
    .sz-navbar .sz-links .sz-last{
        position: unset;
        margin-bottom: 30px;
    }
    .sz-navbar .sz-links{
        overflow-y: scroll;
    }
}
@media screen and (max-width: 350px) {
    .section1 H1 ,.contactHeader h1{
        font: normal normal bold 25px/30px Inter;
    }
}
@media screen and (max-width: 300px) {
    .contactHeader div{
        padding: 0px 20px;
    }
    .section1 H1 ,.contactHeader h1{
        font: normal normal bold 23px/30px Inter;
    }
}


h1, h2 {
    font-family: Inter-Bold !important;
}

.ZoneTextSection5 h2, .SectionExpertise h2, .TemoignageSection h2, .SectionParcours h2 {
    color: #1E2867;
}

.SectionParcours p {
    color: #101E5A; 
}

.points1 {
    position: absolute;
    height: 90px;
}

.Imageection2 {
    position: relative;
}

.Imageection2 img {
    position: relative;
    z-index: 10;
}

.dots-left .points2 {
    box-shadow: none !important;
    position: absolute !important;
    width: 150px !important;
    left: -10px;
    bottom: -20px;
    z-index: 1 !important;
}

.dots-right .points2 {
    box-shadow: none !important;
    position: absolute !important;
    width: 150px !important;
    right: -10px;
    bottom: -20px;
    z-index: 1 !important;
}

.section6 {
    background-image: url(../images/clap.webp);
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    max-width: unset;
}

.img-shadow {
    box-shadow: -10px 14px 15px #0000001a;
    border-radius: 5px;
}

.main-title h2 {
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #1E2867;
    margin-bottom: 25px;
}

.main-title h2 span{
    color: #8ECBC4;
}

.main-title p {
    font: normal normal normal 21px/31px Inter;
    text-align: justify;
    letter-spacing: 0px;
    color: #000000;
    max-width: 510px;
}

.img-with-points-left {
    z-index: 100;
    position: relative;
    transform-origin: top right;
    transform: scale(0.92, 0.95);
}

.img-with-points-right {
    z-index: 100;
    position: relative;
    transform-origin: top left;
    transform: scale(0.92, 0.95);
}

.reference-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.reference-item p {
    width: fit-content;
    margin: unset;
}

.ArrowRef {
    width: 25px !important;
    height: auto !important;
    display: block;
}

.ListReferences {
    gap: 0 !important;
}

.ListReferences a {
    height: 250px;
}

.ListReferences figure {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

.ListeCaseStudies figure {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

.ListReferences2 {
    gap: 0 !important;
}

.ListReferences2 .reference-item {
    /*height: 260px;*/
    position: relative;
    overflow: hidden;
}

.ListReferences2 .reference-item:hover > .reference-content {
    transform: translateY(0);
    opacity: 1;
}


.ListReferences2 .reference-item .reference-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ListReferences2 .reference-item .reference-content {
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(238,238,238,0) 100%);
    transition: all 500ms;
    transform: translateY(120px);
    opacity: 0;
    color: white;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.reference-content .ArrowRef2 {
    align-self: center !important;
}

.details-offre .section5 {
    padding: 90px 0px 120px;
}

.Contact-footer {
    border: 1px solid #FFF;
    padding: 10px 20px;
    width: fit-content;
    transition: all 400ms;
}

.Contact-footer:hover {
    border-color: #8ECBC4;
}

.InfoOffre ul {
    list-style-type: disc;
}
@media screen and (max-width: 990px) {
    .ListReferences2 {
        grid-template-columns: 1fr 1fr!important;
        grid-template-rows: unset!important;
    }
}
@media screen and (max-width: 768px) {
    .ListReferences2 {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(3, 1fr) !important;
    }
}
@media screen and (max-width: 992px) {

    .section2 .img-shadow {
        transform: unset;
    }

    .ContactSection .ContactButton {
        margin: 20px 0;
    }

    .ListReferences {
        grid-template-columns: 1fr 1fr;
    }

    .TextContact h2 {
        font-size: 30px;
    }

    .main-title h2 {
        font-size: 30px;
    }

    .Contact-footer {
        margin-top: 40px;
    }
}

@media screen and (max-width: 600px) {
    .ListReferences {
        grid-template-columns: 1fr;
    }
}

.TemoignageSection {
    display: none;
}

.TemoignageReferenceSection {
    display: none;
}

.container.large {
    max-width: 1650px !important;
    padding: 0;
}

.container.large .hidden{
    display: none;
}


.main-title-main h1 {
    font: normal normal bold 37px/47px Inter;
    letter-spacing: 0px;
    color: #000000;
    margin-bottom: 25px;
}

.main-title-main h1 span{
    color: #8ECBC4;
}

.main-title-main p {
    font: normal normal normal 21px/31px Inter;
    text-align: justify;
    letter-spacing: 0px;
    color: #000000;
}

/* FLOATING CTA*/

.floating-cta{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 10000;
    box-shadow: 0 2px 4px 0 rgba(103,151,255,.08),0 8px 20px 0 rgba(103,151,255,.1)!important;
}
.floating-cta .list-items{
    padding: 0;
    margin: 0;
}
.floating-cta .single-item:nth-child(even){
    background-color: #8ECBC4;
}
.floating-cta .single-item:nth-child(odd){
    background-color: #0D1A49;
}
.floating-cta .single-item a{
    padding: 15px;
    display: block;
}
.floating-cta .single-item a img{
    width: 39px;
}
@media screen and (max-width: 600px) {
    .floating-cta .single-item a{
        padding: 10px;
    }
    .floating-cta .single-item a img{
        width: 35px;
    }
}