/*==================================================
    RÉGLAGES GLOBAUX
==================================================*/

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    font-family:"Satoshi", sans-serif;
    overflow-x:clip;
}

img{
    display:block;
    max-width:100%;
}


/*==================================================
    HERO
==================================================*/

.hero{
    display:grid;
    width:100%;
    min-height:70vh;

    padding:40px max(2%, calc((100% - 1450px) / 2));

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);

    align-items:center;

    gap:clamp(60px,5vw,70px);

    background:#FFFFFF;
}

.hero-content,
.hero-image{
    min-width:0;
}

.hero-content{
    color:#000000;
}

.hero-tag{
    display:inline-block;

    margin-bottom:20px;

    color:#5BBC82;

    font-size:18px;
    font-weight:600;
}

.hero h1{
    margin:0 0 25px;

    color:#000000;

    font-size:clamp(38px,4.2vw,50px);
    font-weight:400;
    line-height:1.15;

    overflow-wrap:anywhere;
}

.hero p{
    max-width:600px;

    margin:0 0 40px;

    color:#000000;

    font-size:18px;
    line-height:1.8;

    overflow-wrap:anywhere;
}

.hero-image{
    display:flex;

    width:100%;

    align-items:center;
    justify-content:center;
}

.hero-image img{
    width:100%;
    max-width:100%;

    height:clamp(420px,42vw,600px);

    object-fit:contain;
    object-position:center;

    border-radius:5px;
}

.hero-buttons{
    display:flex;

    margin-bottom:60px;

    gap:20px;

    flex-wrap:wrap;
}

.separator{
    margin:0 12px;
    font-weight:400;
}

.btn-outline{
    display:inline-flex;

    max-width:100%;

    padding:16px 34px;

    align-items:center;
    justify-content:center;

    border-radius:50px;

    background:#5BBC82;
    color:#FFFFFF;

    text-align:center;
    text-decoration:none;

    overflow-wrap:anywhere;

    transition:
        background-color .3s,
        transform .3s;
}

.btn-outline:hover{
    background:#3E9F65;
    color:#FFFFFF;

    transform:translateY(-3px);
}


/*==================================================
    STATISTIQUES
==================================================*/

.hero-stats{
    display:flex;

    min-width:0;

    gap:clamp(25px,4vw,55px);

    flex-wrap:wrap;
}

.hero-stats > div{
    min-width:0;
}

.hero-stats h2{
    margin:0 0 8px;

    color:#000000;

    font-size:42px;
    font-weight:400;
}

.hero-stats span{
    color:#000000;

    font-size:16px;

    overflow-wrap:anywhere;
}


/*==================================================
    PARTENAIRES
==================================================*/

.partners{
    padding:10px 8%;

    overflow:hidden;

    background:#FFFFFF;
}

.partners-header{
    max-width:700px;

    margin:0 auto 40px;

    text-align:center;
}

.section-tag{
    display:inline-block;

    margin-bottom:20px;

    padding:8px 18px;

    border-radius:30px;

    background:#5BBC82;
    color:#114051;

    font-size:15px;
    font-weight:600;
}

.partners-header h2{
    margin:0 0 15px;

    color:#114051;

    font-size:clamp(30px,4vw,42px);
    font-weight:400;

    overflow-wrap:anywhere;
}

.partners-header p{
    margin:0;

    color:#45556C;

    font-size:18px;
    line-height:1.8;
}

.partners-grid{
    display:grid;

    width:min(100%,1400px);

    margin:0 auto;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    align-items:center;

    gap:clamp(25px,4vw,50px);
}

.partner{
    display:flex;

    min-width:0;

    padding:10px;

    align-items:center;
    justify-content:center;
}

.partner img{
    width:min(100%,160px);

    height:80px;

    object-fit:contain;

    filter:grayscale(100%);
    opacity:.7;

    transition:
        filter .3s,
        opacity .3s,
        transform .3s;
}

.partner:hover img{
    filter:none;

    opacity:1;

    transform:scale(1.08);
}


/*==================================================
    TÉMOIGNAGES
==================================================*/

.testimonials{
    padding:40px 8%;

    overflow:hidden;

    background:#F8FAF8;
}

.section-title{
    width:min(100%,800px);

    margin:0 auto 40px;

    text-align:center;
}

.section-title h2{
    margin:0 0 15px;

    color:#114051;

    font-size:clamp(30px,4vw,42px);
    font-weight:400;

    overflow-wrap:anywhere;
}

.section-title p{
    margin:0;
    color:#666666;
}

.testimonialSwiper{
    width:100%;
    max-width:1400px;

    margin:0 auto;

    overflow:hidden;
}

.swiper-slide{
    height:auto;
    min-width:0;
}

.testimonial-card{
    width:100%;
    height:100%;

    padding:35px;

    border-radius:20px;

    background:#FFFFFF;

    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.stars{
    margin-bottom:20px;

    color:#FFD700;

    font-size:22px;
}

.testimonial-text{
    margin:0 0 30px;

    color:#555555;

    font-style:italic;
    line-height:1.8;

    overflow-wrap:anywhere;
}

.testimonial-user{
    display:flex;

    min-width:0;

    align-items:center;

    gap:15px;
}

.testimonial-user img{
    width:60px;
    height:60px;

    flex:0 0 60px;

    border-radius:50%;

    object-fit:cover;
}

.testimonial-user > div{
    min-width:0;
}

.testimonial-user h4{
    margin:0 0 5px;

    color:#114051;

    overflow-wrap:anywhere;
}

.testimonial-user span{
    color:#777777;

    overflow-wrap:anywhere;
}


/*==================================================
    SERVICES
==================================================*/

.services{
    width:100%;

    padding:50px 4%;

    overflow:visible;

    background:#F7FAFC;
}

.services-container{
    width:min(100%,1500px);

    margin:0 auto;

    padding:35px;

    overflow:visible;

    background:#EEF3F6;
}

.services-wrapper{
    display:grid;

    width:100%;

    padding:45px;

    grid-template-columns:
        minmax(260px,380px)
        minmax(0,1fr);

    gap:clamp(35px,4vw,60px);

    align-items:stretch;

    overflow:visible;

    border-radius:28px;

    background:#FFFFFF;

    box-shadow:0 15px 40px rgba(17,64,81,.08);
}


/*==================================================
    SERVICES - PARTIE GAUCHE
==================================================*/

.services-left{
    position:relative;

    width:100%;
    min-width:0;

    min-height:100%;

    align-self:stretch;

    overflow:visible;
}

/*
Le déplacement desktop est géré par JavaScript.
On n'utilise volontairement PAS position:sticky ici
afin d'éviter les conflits avec Grid/overflow.
*/
.services-left-sticky{
    position:relative;

    top:auto;

    width:100%;

    height:max-content;

    transform:translateY(0);

    will-change:transform;
}

.services-left h2{
    margin:0 0 25px;

    color:#114051;

    font-size:clamp(34px,4vw,48px);
    font-weight:400;
    line-height:1.2;
}

.services-left p{
    margin:0 0 40px;

    color:#45556C;

    font-size:17px;
    line-height:1.8;
}

.services-btn{
    display:inline-flex;

    max-width:100%;

    padding:16px 32px;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#114051;
    color:#FFFFFF;

    font-weight:400;

    text-align:center;
    text-decoration:none;

    transition:
        background-color .3s,
        color .3s;
}

.services-btn:hover{
    background:#5BBC82;
    color:#114051;
}


/*==================================================
    SERVICES - PARTIE DROITE
==================================================*/

.services-right{
    display:grid;

    width:100%;
    min-width:0;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    grid-auto-rows:1fr;

    gap:20px;

    align-items:stretch;
}

.service-card{
    display:flex;

    width:100%;
    height:100%;

    min-width:0;
    min-height:330px;

    padding:35px;

    flex-direction:column;

    border-radius:20px;

    color:#114051;

    cursor:pointer;
    text-decoration:none;

    overflow:hidden;

    transition:
        transform .35s,
        box-shadow .35s;
}

.service-card:hover{
    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(17,64,81,.12);
}

.service-card:nth-child(1){
    background:#EAF8FD;
}

.service-card:nth-child(2){
    background:#E5FAEC;
}

.service-card:nth-child(3){
    background:#E2EBF7;
}

.service-card:nth-child(4){
    background:#DDEBEC;
}

.service-card:nth-child(5){
    background:#E8F7ED;
}

.service-card:nth-child(6){
    background:#E5ECF5;
}

.service-icon{
    display:flex;

    width:65px;
    height:65px;

    margin-bottom:9px;

    flex:0 0 65px;

    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:rgba(255,255,255,.45);
}

.service-icon i{
    font-size:30px;
}

.service-card h3{
    margin:0 0 10px;

    color:#1F2937;

    font-size:24px;
    font-weight:400;
    line-height:1.3;

    overflow-wrap:anywhere;
}

.service-card ul{
    margin:15px 0 25px;

    padding-left:18px;
}

.service-card li{
    margin-bottom:8px;

    font-size:15px;

    overflow-wrap:anywhere;
}

.service-card span{
    margin-top:auto;

    color:#114051;

    font-weight:500;

    overflow-wrap:anywhere;

    transition:letter-spacing .3s;
}

.service-card:hover span{
    letter-spacing:1px;
}


/*==================================================
    CTA
==================================================*/

.cta{
    width:min(calc(100% - 30px),1200px);

    margin:30px auto;

    padding:50px 60px;

    border-radius:20px;

    background:#114051;
}

.cta-content{
    display:flex;

    min-width:0;

    align-items:center;
    justify-content:space-between;

    gap:30px;
}

.cta h2{
    min-width:0;

    margin:0;

    color:#FFFFFF;

    font-size:32px;
    font-weight:400;
    line-height:1.4;

    overflow-wrap:anywhere;
}

.cta-btn{
    display:inline-flex;

    max-width:100%;

    padding:15px 35px;

    flex:0 0 auto;

    align-items:center;
    justify-content:center;

    border:2px solid #FFFFFF;
    border-radius:50px;

    background:#FFFFFF;
    color:#114051;

    font-size:16px;
    font-weight:400;

    text-align:center;
    text-decoration:none;

    overflow-wrap:anywhere;

    transition:
        background-color .3s,
        color .3s,
        transform .3s;
}

.cta-btn:hover{
    background:#114051;
    color:#FFFFFF;

    transform:translateY(-3px);
}


/*==================================================
    GRANDE TABLETTE / PETIT LAPTOP
==================================================*/

@media(max-width:1200px){

    .hero{
        min-height:auto;

        padding:60px 5%;

        grid-template-columns:1fr;

        text-align:center;
    }

    .hero-content{
        order:2;
    }

    .hero-image{
        order:1;
    }

    .hero-image img{
        max-width:600px;

        height:450px;
    }

    .hero p{
        margin-right:auto;
        margin-left:auto;
    }

    .hero-buttons,
    .hero-stats{
        justify-content:center;
    }
}


/*==================================================
    TABLETTE
==================================================*/

@media(max-width:992px){

    .hero h1{
        font-size:42px;
    }

    .hero-stats{
        gap:35px;
    }

    .hero-stats h2{
        font-size:36px;
    }

    .partners-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:30px;
    }

    .services-wrapper{
        padding:30px;

        grid-template-columns:1fr;

        align-items:start;
    }

    .services-left{
        position:static;

        width:100%;
        min-height:0;

        text-align:center;
    }

    .services-left-sticky{
        position:static;

        width:100%;

        height:auto;

        transform:none !important;

        will-change:auto;
    }

    .services-right{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-auto-rows:auto;
    }

    .service-card{
        height:auto;
        min-height:auto;
    }
}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:768px){

    .hero{
        padding:50px 20px;

        gap:30px;
    }

    .hero-tag{
        font-size:15px;
    }

    .hero h1{
        font-size:32px;
        line-height:1.25;
    }

    .hero p{
        font-size:15px;
        line-height:1.7;
    }

    .hero-image img{
        height:300px;

        border-radius:15px;
    }

    .hero-buttons{
        margin-bottom:40px;

        flex-direction:column;

        gap:15px;
    }

    .btn-outline{
        width:100%;

        padding:15px 20px;
    }


    /* STATS HORIZONTALES */

    .hero-stats{
        display:flex;

        width:100%;

        flex-direction:row;
        flex-wrap:nowrap;

        justify-content:space-between;
        align-items:flex-start;

        gap:8px;

        margin-top:10px;
    }

    .hero-stats > div{
        flex:1;

        min-width:0;

        text-align:center;
    }

    .hero-stats h2{
        margin:0 0 5px;

        font-size:25px;
        line-height:1.1;

        white-space:nowrap;
    }

    .hero-stats span{
        display:block;

        font-size:11px;
        line-height:1.3;

        white-space:normal;
    }


    /* PARTENAIRES HORIZONTAUX */

    .partners{
        padding:40px 15px;
    }

    .partners-grid{
        display:flex;

        width:100%;

        flex-direction:row;
        flex-wrap:nowrap;

        justify-content:space-between;
        align-items:center;

        gap:8px;
    }

    .partner{
        flex:1;

        min-width:0;

        padding:3px;
    }

    .partner img{
        width:100%;
        max-width:90px;

        height:50px;

        margin:auto;

        object-fit:contain;
    }


    /* TÉMOIGNAGES */

    .testimonials{
        padding:50px 20px;
    }

    .testimonial-card{
        padding:25px;
    }

    .testimonial-text{
        font-size:14px;
    }

    .testimonial-user img{
        width:50px;
        height:50px;

        flex-basis:50px;
    }


    /* SERVICES */

    .services{
        padding:50px 15px;
    }

    .services-container{
        padding:15px;
    }

    .services-wrapper{
        padding:25px 15px;

        grid-template-columns:1fr;

        border-radius:20px;
    }

    .services-left h2{
        font-size:32px;
    }

    .services-left p{
        font-size:15px;
    }

    .services-btn{
        width:100%;

        padding:15px 20px;

        justify-content:center;
    }

    .services-right{
        grid-template-columns:1fr;

        grid-auto-rows:auto;

        gap:20px;
    }

    .service-card{
        width:100%;

        height:auto;
        min-height:auto;

        padding:25px;

        border-radius:18px;
    }

    .service-card h3{
        font-size:21px;
    }

    .service-card li{
        font-size:14px;
    }


    /* CTA */

    .cta{
        width:calc(100% - 30px);

        margin:40px auto;

        padding:35px 20px;

        border-radius:18px;
    }

    .cta-content{
        flex-direction:column;

        text-align:center;
    }

    .cta h2{
        font-size:24px;
    }

    .cta-btn{
        width:100%;

        padding:15px 20px;
    }
}


/*==================================================
    PETITS MOBILES
==================================================*/

@media(max-width:400px){

    .hero{
        padding-right:15px;
        padding-left:15px;
    }

    .hero h1{
        font-size:27px;
    }

    .hero-image img{
        height:230px;
    }


    /* STATS */

    .hero-stats{
        gap:4px;
    }

    .hero-stats h2{
        margin-bottom:4px;

        font-size:21px;
    }

    .hero-stats span{
        font-size:9px;
        line-height:1.2;
    }


    /* PARTENAIRES */

    .partners-grid{
        gap:5px;
    }

    .partner{
        padding:2px;
    }

    .partner img{
        max-width:65px;

        height:40px;
    }


    /* SERVICES */

    .service-card{
        padding:20px;
    }

    .service-icon{
        width:55px;
        height:55px;

        flex-basis:55px;
    }

    .service-icon i{
        font-size:24px;
    }


    /* CTA */

    .cta h2{
        font-size:21px;
    }
}


/*==================================================
    ACCESSIBILITÉ
==================================================*/

@media(prefers-reduced-motion:reduce){

    .btn-outline,
    .partner img,
    .services-btn,
    .service-card,
    .service-card span,
    .cta-btn{
        transition:none;
    }
}



/*==================================================
    SERVICES LEFT - DESKTOP
==================================================*/

@media(min-width:993px){

    .services-wrapper{
        align-items:stretch;
    }


    .services-left{

        position:relative;

        width:100%;

        min-width:0;

        min-height:100%;

        align-self:stretch;
    }


    .services-left-sticky{

        position:relative;

        top:auto;
        left:auto;
        bottom:auto;

        width:100%;

        height:max-content;

        transform:none !important;

        will-change:auto;
    }


    /*==============================================
        PENDANT LE SCROLL
    ==============================================*/

    .services-left-sticky.is-fixed{

        position:fixed;

        top:105px;

        z-index:20;

        margin:0;
    }


    /*==============================================
        ARRIVÉ EN BAS DU WRAPPER
    ==============================================*/

    .services-left-sticky.is-bottom{

        position:absolute;

        top:auto;

        bottom:0;

        left:0;

        width:100%;

        margin:0;
    }

}


@media(max-width:992px){

    .services-left{

        position:static;

        width:100%;

        min-height:0;

        text-align:center;
    }


    .services-left-sticky,
    .services-left-sticky.is-fixed,
    .services-left-sticky.is-bottom{

        position:static;

        top:auto;
        left:auto;
        bottom:auto;

        width:100% !important;

        transform:none !important;
    }

}