/* BODY */
body {margin: 0 auto;padding: 0;-webkit-font-smoothing: antialiased;font-family: 'Poppins', sans-serif;font-weight: 400;}
html {
    scroll-behavior: smooth;
}
[id]::before {
    content: '';
    display: block;
    height:      120px;
    margin-top: -120px;
    visibility: hidden;
}
.mr-auto{margin: auto;}

h2{font-weight: 900}
h3{font-weight: 700}

/* LOADER */
.loader-wrap {position: fixed;top: 0;left: 0;z-index: 100;background: #fff;width: 100%;height: 100%;}
.loader-wrap.hide {-webkit-animation: 0.8s loaderOut ease-in-out forwards;-moz-animation: 0.8s loaderOut ease-in-out forwards;-ms-animation: 0.8s
loaderOut ease-in-out forwards;-o-transition: 0.8s loaderOut ease-in-out forwards; animation: 0.8s loaderOut ease-in-out forwards;}
.loader-wrap .loader {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100px;height: 100px;}
.loader-wrap .loader img {width: 100%;-webkit-animation: 2.4s
loader ease-in-out infinite;-moz-animation: 2.4s
loader ease-in-out infinite;-ms-animation: 2.4s
loader ease-in-out infinite;-o-transition: 2.4s
loader ease-in-out infinite;animation: 2s
loader ease-in-out infinite;}
@-webkit-keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-o-keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes loader{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-webkit-keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}
@-moz-keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}
@-o-keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}
@keyframes loaderOut{0%{opacity:1}100%{opacity:0;z-index:-10}}

/* Reset arrow numeric input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* NEWS BANNER */
.news {display: flex;justify-content: center;align-items: center;color: #FFF;font-size: .9rem;font-weight: 500;background: linear-gradient(45deg, #62a2ab 0%, #62a2ab 50%, #62a2ab 100%);padding: 10px;}
.news span:hover{color: white !important; text-decoration: none}


/* a */
a {color: white !important;text-decoration: none;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
a:hover {color: white !important;text-decoration: none !important;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
a.colorRed{ color:#62a2ab !important;}
a.colorRed:hover{ color:#000 !important;}

/* Bouton */
.btn {display: inline-block;text-decoration: none;cursor: pointer;text-align: center;font-size: .875rem;font-weight: 500;border-radius: 2px;padding: 11px 15px;min-width: 150px;
    -webkit-transition: opacity 0.4s ease;-moz-transition: opacity 0.4s ease;-ms-transition: opacity 0.4s ease;-o-transition: opacity 0.4s ease;transition: opacity 0.4s ease;}
.btn:hover {opacity: 0.9;}
.btn-small {padding: 7px 15px;min-width: 100px;}
.btn-std {background: linear-gradient(45deg, #62a2ab 0%, #62a2ab 50%, #62a2ab 100%);color: #FFF;     box-shadow: 0 0 9px 3px rgba(98 162 171 / 23%);}
.btn-light {color: #62a2ab !important; border: 1px solid rgba(98, 162, 171, 0.3);}
.btn-white {color: #62a2ab !important; border: 1px solid rgba(98, 162, 171, 0.3); background: white; padding:10px 25px }
.btn-white:hover {color: #62a2ab !important; border: 1px solid rgba(98, 162, 171, 0.3); background: white}
.buttonAlone{width: 100%; text-align: center;}
.slide-btn{ margin-bottom: 10px}
/* HEADER */
header {position: fixed;top: 0;z-index: 40;width: 100%;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px}

/* Offers */
.offers{display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 40px;}
.offers div{padding: 10px; margin: 0 10px; border: 1px solid #ccc; border-radius: 10px; text-align: center; background: #62a2ab08; flex-basis: 0;flex-grow: 1;}
.offers p{line-height: 25px;text-align: justify; padding: 0 15px}
.offers img{ width: 130px; height:130px; margin-top: 20px;}

/* marqee */
.marquee {
    display: flex;
    block-size: 150px;
    margin-block: 0;
    position: relative;
    overflow-x: hidden;
    mask-image: linear-gradient(
            to right,
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)
    );
}

.marquee--3 {
    --marquee-item-width: 150px;
    --marquee-item-height: 150px;
    --marquee-duration: 24s;
    --marquee-items: 13;
    background: #61a0a9;
    border-top: 1px solid white;
}

.marquee--3 img{
object-fit: contain;
}

.marquee--3 .marquee__item:nth-of-type(1) {--marquee-item-index: 1;}
.marquee--3 .marquee__item:nth-of-type(2) {--marquee-item-index: 2;}
.marquee--3 .marquee__item:nth-of-type(3) {--marquee-item-index: 3;}
.marquee--3 .marquee__item:nth-of-type(4) {--marquee-item-index: 4;}
.marquee--3 .marquee__item:nth-of-type(5) {--marquee-item-index: 5;}
.marquee--3 .marquee__item:nth-of-type(6) {--marquee-item-index: 6;}
.marquee--3 .marquee__item:nth-of-type(7) {--marquee-item-index: 7;}
.marquee--3 .marquee__item:nth-of-type(8) {--marquee-item-index: 8;}
.marquee--3 .marquee__item:nth-of-type(9) {--marquee-item-index: 9;}
.marquee--3 .marquee__item:nth-of-type(10) {--marquee-item-index: 10;}
.marquee--3 .marquee__item:nth-of-type(11) {--marquee-item-index: 11;}
.marquee--3 .marquee__item:nth-of-type(12) {--marquee-item-index: 12;}
.marquee--3 .marquee__item:nth-of-type(13) {--marquee-item-index: 13;}

.marquee__item {
    --marquee-item-offset: max(
            calc(var(--marquee-item-width) * var(--marquee-items)),
            calc(100% + var(--marquee-item-width))
    );
    --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
    position: absolute;
    inset-inline-start: var(--marquee-item-offset);
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}
@keyframes go {
    to {
        inset-inline-start: calc(var(--marquee-item-width) * -1);
    }
}

/* FOOTER */
footer {background-color: #242633;padding: 50px 20px 20px 20px;}
.footer-container{ margin: auto;font-size: .8rem;font-weight: 500;line-height: 1.2;color: rgba(255,255,255,0.7);}
.footer-top{display: flex; justify-content: space-between;}
.footer-top .footer-top-left .logo{width: 140px;}
.footer-top .footer-top-left {font-size: .87rem;font-weight: 300;color: #FFF;width: 320px;flex-shrink: 0; line-height: 21px;}

.footer-top .footer-top-right {display: flex; width: 70%;    justify-content: flex-end;}

.footer-top .footer-top-right .cat{min-width: 180px;display: flex;flex-direction: column;align-items: baseline;color: #FFF;margin: 0 30px;}
.footer-top .footer-top-right .cat a {display: block;color: rgba(255,255,255,0.6) !important;margin-bottom: 15px;}
.footer-top .footer-top-right .cat a:hover {color: rgba(255,255,255,1) !important;}
.footer-top .footer-top-right .cat .title {font-weight: 700;margin: 0;margin-bottom: 20px;line-height: 1;font-size: .875rem;color: white;}

.footer-bottom{ display: flex;justify-content: space-between;align-items: center;padding: 25px 0 5px 0; margin-top: 30px;border-top: 1px solid #62a2ab;}
.footer-bottom .copyright img {width: 24px;margin-right: 10px;}
.footer-bottom .copyright p {}
.footer-bottom .copyright{    display: flex;align-items: center;}
.footer-bottom .legals {display: flex;justify-content: flex-end;align-items: center;}
.footer-bottom .legals a {margin-left: 15px; color: rgba(255,255,255,0.6) !important;}
.footer-bottom .legals a:hover {color: rgba(255,255,255,1) !important;}

.socials{}
.socials a{padding: 10px; color: white;}
.socials a i{ font-size: 1rem}
.socials .facebook{ padding-left:0;}
.socials .facebook:hover{ color:#3B5998 !important;}
.socials .instagram:hover{ color:#f14b11 !important;}
.socials .twitter:hover{ color:#33ccff !important;}
.socials .linkedin:hover{ color:#0077b5 !important;}

/* Page header */
.page-header{background: url(../images/slide/agence-developpement.jpg) no-repeat center/cover; height: 300px; width: 100%}
.page-header-container{    display: flex;height: 300px;width: 100%;flex-direction: column;justify-content: center; text-align: center}
.page-header-container h1{   font-size: 3rem; margin: 0}

ul.breadcrumb {padding: 0;list-style: none;}
ul.breadcrumb li {display: inline;font-size: .9rem;}
ul.breadcrumb li+li:before {padding: 3px;color: black ;content: "/\00a0";}
ul.breadcrumb li a {color: black!important; text-decoration: none;}
ul.breadcrumb li a:hover {text-decoration: underline!important;}

/* Wrapper */
.wrapper{max-width: 1100px; margin: auto;}

.greyBlock{background: #f9f9f9;padding-bottom: 40px;}
.greyBlock .serviceContainer h4 {background: #ffffff;}

/* Divers */
h2 strong,h3 strong{ font-weight: 900; color: #62a2ab; }
.smallBottom{ margin-bottom: 5px !important;}
.smallTop{ margin-top: 5px !important;}

/* Page-Container */
.content{ padding-top: 136px}
.pageTitle{padding: 40px 0 20px; text-align: left; color: #0b0b0b}
.pageTitle h1, .pageTitle h2{color: #242633; font-weight: 900; font-size: 2rem}
.pageTitle h1 strong, .pageTitle h2 strong{ font-weight: 900; color: #62a2ab; }
.pageTitle p{font-weight: 400; line-height: 23px; padding-left: 10px; border-left: 1px solid #62a2ab}


p.leftLine{font-weight: 400;
    line-height: 23px;
    padding-left: 10px;
    border-left: 1px solid #62a2ab;}
/* nav */
nav {position: relative;z-index: 40; background-color: #FFF;box-shadow: 0 0 50px rgba(44,48,55,0.07);}
.nav-mobile {display: none;}
.nav-wrap {max-width: 1100px;display: flex;justify-content: space-between;align-items: center;margin: auto; height: 100px}
nav .logo, nav .logo img {height: 75px;}
.nav__links {display: flex;justify-content: space-between;align-items: center;}
.nav__links .link {color: rgba(44,48,55,0.8) !important;font-size: .875rem;font-weight: 600;text-decoration: none;margin: 0 15px; line-height: 70px;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
.nav__links .link:hover {color: #62a2ab !important;font-size: .875rem;font-weight: 600;text-decoration: none;margin: 0 15px;-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition: color 0.2s ease-in-out;}
.nav__links .link.link--dropdown i {display: inline-block;font-size: 1rem;color: #62a2ab;vertical-align: middle;margin-left: 5px; transition: transform 150ms ease;}
.nav__links .link.link--bold {color: #2C3037;font-weight: 700;margin-right: 30px;}
.separator--rectangle {display: inline-block;height: 10px;width: 2px;margin: 0 10px;background-color: rgba(44,48,55,0.15);}
.mobile-legals{display: none}
.dropdown {position: relative;display: inline-block;}
.dropdown-content { visibility: hidden; position: absolute; top:80px; background-color: #fff;min-width: 300px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);z-index: 1; padding: 10px; opacity: 0;}
.dropdown-content a {color: rgba(44,48,55,0.8) !important; padding: 12px 16px;text-decoration: none;display: block; font-size: .875rem;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {visibility: visible; opacity: 1; top:55px; transition: visibility 0s, all 150ms ease-in-out }
.dropdown:hover .link.link--dropdown i  {transform: rotate(180deg);}
.dropdown:hover .dropbtn {background-color: #3e8e41;}

.mobileMenu{visibility: hidden; opacity: 0; transition: all 0.4s ease-in-out;bottom: 0;overflow: auto;width: 100%;background-color: #FFF;position: fixed;z-index: 30;height: 100%;top: 70px;
    -webkit-transform: translateY(-30px);-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-o-transform: translateY(-30px);transform: translateY(-30px);
    -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;
}
.mobileMenuVisible{visibility: visible;opacity: 1;
    -webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);
}
.mobile-link {display: block;padding: 25px 30px;border-bottom: 1px solid rgba(44,48,55,0.15);font-weight: 500;text-transform: uppercase;color: rgba(44,48,55,1) !important;}
.mobile-link i{float: right; color: #62a2ab;font-size: 1.3rem;}
.mobile-menu-boutons{margin: 20px;}
.mobile-menu-boutons .btn{ width: 100%; padding: 11px 0; margin-bottom: 20px;}

/* blockcontent */
.blockcontent{ display: flex;}
.blockcontent div{overflow: hidden;}
.blockcontent div img{object-fit: cover}

/* Home banner */
.banner-full{  text-align: center;background: url(../images/slide/agence-developpement.jpg) no-repeat center/cover}
.banner-container{display: flex; flex-direction: column;height: 300px;justify-content: center;}
.banner-container h2{font-size: 3rem; margin: 0; color: #61a0a9}
.banner-container strong {
                           color: #61a0a9;
                           text-shadow: 0 3px 26px rgb(98 161 170);
                           transition: text-shadow .6s ease;
                       }

/* SLIDER */
.slider {width: 100%;height: 700px;margin: 0;position: relative;}
.slider p a{ color:#242633 !important;font-weight: 600 }
.slider p a:hover{text-decoration: underline!important; }
.slide1 {position: absolute;width: 100%;
    height: 100%;background: url(../images/slide/agence-developpement.jpg) no-repeat center/cover;-webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;-o-animation-delay: 0s;animation-delay: 0s;}

.slideText{max-width: 1100px;margin: auto;overflow: hidden;padding: 90px 0 0 40px;color: #242633}
.slideText h1{max-width: 900px;line-height: 60px; font-family: 'Poppins', serif; font-size: 3.5rem; }
.slideText p{max-width: 700px; line-height: 24px; padding-bottom: 15px;}

/* PAGE MENTIONS LEGALES */
.textLegals{max-width:850px ; font-size: .9rem; margin: auto; text-align: justify;margin-bottom: 50px;}
.textLegals h3{ margin-top: 30px;}
.textLegals a, .textLegals{ color: rgb(36, 38, 51) !important;}

/* FORMS */
.contactForm{ width: 100%; display: flex; justify-content: center;}
.contactForm .infos{ width: 45%; background: #cccccc;}
.contactForm .formContent{width: 45%;background: #fff;box-shadow: 0 0 15px #cccccc;padding: 30px;display: flex;flex-wrap: wrap;}
.contactForm .formContent input{ outline: none; border: 1px solid #d7d7d7; color: #aaaaaa; border-radius: 4px;}
.contactForm .formContent input:focus{ border: 1px solid #62a2ab;}
.contactForm .colorRed{ color:#62a2ab;}
::placeholder {color: #aaaaaa;opacity: 1;}
.contactForm .formContent input, .contactForm .formContent div{ padding: 12px 10px;margin: 10px; width: 40%;}
.contactForm .formContent .mention{ margin-left: 0; font-size: .7rem}
.contactByPhone{ font-size: 1rem; width: 100%; text-align: center;}
.contactByPhone a{ font-weight: bold; color: #000 !important;}
.contactForm .error{ width: 100%;text-align: center;color: #62a2ab;font-weight: bold; display: none;}
.contactForm .success{ width: 100%;text-align: center;color: #61a0a9;font-weight: bold; display: none;}

    /* Questions Fréquentes */
.questions{ width: 100%; background: #fafcfc; color: rgb(36 38 51) !important; margin: 50px 0 0; padding: 50px 0;}
.questions h2{text-align: center;margin-bottom: 50px;}
.questions .questionContainer{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between;}
.questions .question{ width: 30%}
.questions .question p{font-size: 1rem;line-height: 22px;text-align: justify;}

/* Banner Contact Us */
.bannerContactUs{    text-align: center;width: 100%;padding: 30px 0;background: linear-gradient(45deg, #62a2ab 0%, #62a2ab 50%, #62a2ab 100%);color: white;font-size: 1.5rem;font-weight: bold;}
.bannerContactUs a{ text-decoration: underline}

.cardList .card .cardFooter{border-top: 1px solid #62a2ab;margin-top: 20px;}
.cardList .card .cardDesc{margin-bottom: 20px !important;}
.cardList .card .cardCategory{ font-weight: 500; font-size: .8rem; padding-top: 10px; color: rgba(0,0,0,.5);}

.mobile-break { display: none; }
@media all and (max-width: 900px) and (orientation: portrait) {
    .mobile-break { display: block; }
    .content{ padding-top: 70px}

    .news {display: none;}

    .page-header-container h1 {
        font-size: 2rem;
        margin: 0;
    }

    /* Contact Forms */
    .contactForm{flex-direction: column-reverse;}
    .contactForm .infos{ width: 100%; height: 250px;}
    .contactForm .formContent{width: 100%;box-shadow: none;padding: 0; margin-bottom: 30px;}
    .contactForm .formContent input, .contactForm .formContent div{ margin: 10px 30px; width: 100%;}
    .contactForm .formContent .mention{text-align: center; font-size: .8rem; margin: auto;}
    .contactForm .contactByPhone{ font-size: .9rem; width: 100%; text-align: center;}

    .wrapper{width: 90%;}

    .pageTitle{ padding-bottom: 20px; padding-top: 20px; }
    .pageTitle h1, .pageTitle h2{font-size: 1.95rem !important;}


    .nav__links {display: none;}
    .nav-mobile {display: flex;}
    .nav-wrap {padding: 20px 30px; height:50px }
    .nav-mobile i{ font-size: 1.8rem; color: rgb(98 162 171) !important}
    nav .logo, nav .logo img {height: 60px;}
    .banner-clients .scrolling-wrapper {width: 200%;}
    .banner-clients h5 {padding: 0 10px;}
    .banner-clients .scrolling-wrapper img { margin-right: 40px;}

    /* Slider */
    .slider{height: 100vh;}
    .slideText{max-width: 100%;padding: 0;padding-top: 30px; text-align: center; margin-top: 0px;}
    .slideText h1{max-width: 100%;line-height: 40px; font-size: 1.5rem; width: 100%;}
    .slideText p{max-width: 100%; line-height: 25px; width: 100%; }
    /*.slideText a{ margin-left: 10px;}*/


    /* FOOTER MOBILE */
    .footer-container{ margin: auto;font-size: 1rem;}
    .footer-top {flex-direction: column;}
    .footer-top .footer-top-right .cat { margin: 0 0 30px 10px;}
    .footer-top .footer-top-right .cat .title {font-size: 1rem; }
    .footer-top .footer-top-left {text-align: center; margin: auto}

    .footer-top .footer-top-left .socials { margin-top: 30px}
    .footer-top .footer-top-left .socials  a i {font-size: 1.5rem;}
    .footer-top .footer-top-right{/*flex-direction: column;align-items: flex-start;width: 100%;margin-top: 40px;*/display: none !important;}
    .footer-bottom {}
    .footer-bottom img {display: none}
    .bannerContactUs {font-size: 1.3rem;}
    .footer-bottom .legals{ display: none}
    .footer-bottom .copyright {margin: 10px auto;font-size: .8rem;}

    /* TEXT LEGALS */
    .textLegals{max-width:100% ; font-size: 1rem;}
    .textLegals h3{ margin-top: 30px;}


    /* Questions Fréquentes */
    .questions .questionContainer{ flex-direction: column;}
    .questions .question{ width: 100%}

    .offers {flex-direction: column;}
    .offers div {margin-bottom: 10px;}
    .blockcontent {flex-direction: column-reverse;}
}