@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap');

:root{
    --purple:#7B2FBE;
    --purple-dark:#4A1580;
    --purple-light:#B574E8;

    --white:#ffffff;

    --gray:#f5f5f7;
    --text:#111827;
    --muted:#6b7280;
}

/* ================= RESET ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:var(--text);
    overflow-x:hidden;
    background:#fff;
}

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

a{
    text-decoration:none;
    color:inherit;
}

.hero-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.2rem;

    overflow:visible;
}

.feature-card{
    position:relative;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        opacity .35s ease;

    transform-origin:center center;
    z-index:1;
}

/* Les autres cartes deviennent légèrement plus petites */
.hero-cards:hover .feature-card{
    transform:scale(.92);
    opacity:.75;
}

/* Celle survolée passe devant et grossit */
.hero-cards .feature-card:hover{
    transform:scale(1.18);
    opacity:1;
    z-index:100;

    box-shadow:0 35px 80px rgba(0,0,0,.25);
}

.hero-cards{
    text-align:center;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.2rem;
    perspective:1200px;
}

.container{
    width:94%;
    /*max-width:1200px;*/
    margin:0 auto;
}


/* ================= NAVBAR ================= */

nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.05);
}

.nav-container{
    height:78px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-logo img{
    width:120px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:1rem;
}

.nav-links a{
    font-family:'Sora',sans-serif;
    font-size:.9rem;
    font-weight:600;
    color:var(--purple-dark);
    padding:.5rem 1rem;
    /*border-radius:4px;*/
    transition:.3s;
}

.nav-links a:hover,
.nav-links a.active{
    border-bottom:2px solid #7B2FBE;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:1rem;
}

/* =========================================================
   SECTION SERVICES - BACKGROUND ANIMÉ PREMIUM
========================================================= */

.section-light{
    position: relative;
    overflow: hidden;

    background:
    linear-gradient(
        135deg,
        #faf7ff 0%,
        #f3ebff 40%,
        #ffffff 100%
    );
}

/* ================= ANIMATED GRADIENT ================= */

.section-light::before{
    content:'';

    position:absolute;

    width:700px;
    height:700px;

    top:-250px;
    left:-180px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(123,47,190,.18),
        transparent 70%
    );

    animation:floatBg 12s ease-in-out infinite;

    z-index:0;
}

/* ================= SECOND BLOB ================= */

.section-light::after{
    content:'';

    position:absolute;

    width:600px;
    height:600px;

    bottom:-250px;
    right:-180px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(181,116,232,.15),
        transparent 70%
    );

    animation:floatBg2 14s ease-in-out infinite;

    z-index:0;
}

/* =========================================================
   PARTICLES
========================================================= */

.section-light .container{
    position:relative;
    z-index:2;
}

.section-light .container::before,
.section-light .container::after{
    content:'';

    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#7B2FBE;

    filter:blur(1px);

    animation:particleMove 16s linear infinite;
}

.section-light .container::before{
    top:80px;
    left:10%;
}

.section-light .container::after{
    bottom:120px;
    right:15%;

    width:20px;
    height:20px;

    animation-duration:22s;
}

/* =========================================================
   GRID LIGHT EFFECT
========================================================= */

.services-grid{
    position:relative;
}

.services-grid::before{
    content:'';

    position:absolute;
    inset:-50px;

    background-image:
        linear-gradient(
            rgba(123,47,190,.03) 2px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(123,47,190,.03) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    mask-image:
        radial-gradient(circle, black 45%, transparent 100%);

    z-index:0;

    animation:gridMove 20s linear infinite;
}

/* =========================================================
   SERVICE CARDS PREMIUM
========================================================= */

.service-card{
    position:relative;
    z-index:2;

    overflow:hidden;

    background:
    rgba(255,255,255,.65);

    backdrop-filter:blur(18px);

    border:
    1px solid rgba(255,255,255,.7);

    box-shadow:
    0 10px 40px rgba(123,47,190,.08);

    transition:.45s;
}

/* Glow Hover */

.service-card::before{
    content:'';

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    padding:5px;

    background:
    linear-gradient(
        135deg,
        rgba(123,47,190,.7),
        rgba(181,116,232,.2),
        rgba(123,47,190,.7)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    opacity:0;

    transition:.45s;
}

.service-card:hover::before{
    opacity:1;
}


.service-card:hover{
    transform:
    translateY(-12px)
    scale(1.02);

    box-shadow:
    0 25px 70px rgba(123,47,190,.16);
}

/* =========================================================
   ICON ANIMATION
========================================================= */

.service-icon{
    animation:floatIcon 4s ease-in-out infinite;
}

.service-card:nth-child(2) .service-icon{
    animation-delay:.5s;
}

.service-card:nth-child(3) .service-icon{
    animation-delay:1s;
}

.service-card:nth-child(4) .service-icon{
    animation-delay:1.5s;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes floatBg{

    0%{
        transform:
        translate(0,0)
        scale(1);
    }

    50%{
        transform:
        translate(40px,30px)
        scale(1.1);
    }

    100%{
        transform:
        translate(0,0)
        scale(1);
    }

}

@keyframes floatBg2{

    0%{
        transform:
        translate(0,0)
        scale(1);
    }

    50%{
        transform:
        translate(-50px,-40px)
        scale(1.08);
    }

    100%{
        transform:
        translate(0,0)
        scale(1);
    }

}

@keyframes particleMove{

    0%{
        transform:
        translateY(0)
        translateX(0);
    }

    25%{
        transform:
        translateY(-80px)
        translateX(30px);
    }

    50%{
        transform:
        translateY(-140px)
        translateX(-20px);
    }

    75%{
        transform:
        translateY(-60px)
        translateX(40px);
    }

    100%{
        transform:
        translateY(0)
        translateX(0);
    }

}

@keyframes gridMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(40px);
    }

}

@keyframes floatIcon{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ================= BUTTONS ================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;

    font-family:'Sora',sans-serif;
    font-weight:700;

    border-radius:12px;

    transition:.3s;
}

.btn-primary{
    border-radius:5px;
    background:var(--purple);
    color:#fff;
    padding:.5rem 1.1rem;
}

.btn-primary:hover{
    background:var(--purple-dark);
    transform:translateY(-3px);
}

.btn-light{
    background:#fff;
    color:var(--purple-dark);
    padding:.95rem 1.6rem;
}

.btn-light:hover{
    transform:translateY(-3px);
}

.btn-outline{
    border:2px solid rgba(255,255,255,.4);
    color:#fff;
    padding:.85rem 1.6rem;
}

.btn-outline:hover{
    background:rgba(255,255,255,.1);
}

/* ================= HAMBURGER ================= */

.hamburger{
    width:45px;
    height:45px;

    border:none;
    border-radius:10px;

    background:#f3ebff;

    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;

    cursor:pointer;
}

.hamburger span{
    width:22px;
    height:3px;
    background:var(--purple);
    border-radius:10px;
}

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

.mobile-menu{
    display:none;
    flex-direction:column;

    padding:1rem 2rem 2rem;
    background:#fff;
}

.mobile-menu a{
    padding:1rem 0;
    border-bottom:1px solid #eee;
    color:var(--purple-dark);
    font-weight:600;
}

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


.hero{
    min-height:90%;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
}

/* VIDEO */
.hero-video{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;
    z-index:1;
}

/* OVERLAY VIOLET */
.hero-overlay{
    position:absolute;
    inset:0;
/*background: linear-gradient(135deg, rgba(17, 17, 17, .78), rgba(74, 21, 128, .82));*/

    /*background:*/
    /*    linear-gradient(*/
    /*        135deg,*/
    /*        rgba(74, 21, 128, 0.80) 0%,*/
    /*        rgba(123, 47, 190, 0.65) 55%,*/
    /*        rgba(181, 116, 232, 0.45) 100%*/
    /*    );*/

    z-index:2;
}

/* CONTENU AU DESSUS */
.hero-shapes,
.hero-grid{
    position:relative;
    z-index:3;
}
/* USER AVATAR */
.user-avatar {
    width: 32px;
    height: 32px;

    border: 1px solid #8510cd;
    border-radius: 50%;

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

    font-size: 0.75rem;
    font-weight: 600;

    cursor: pointer;
}
.hero-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:2rem;
    align-items:center;

    padding-top:90px;
    padding-bottom:50px;
}

.hero-content{
    color:#fff;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.6rem;

    padding:.45rem 1.2rem;

    border-radius:100px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.2);

    margin-bottom:1.5rem;

    font-size:.75rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.hero-badge::before{
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:#9effb1;
}

.hero-title{
    font-family:'Sora',sans-serif;
    font-size:clamp(2.5rem,4vw,1.5rem);
    line-height:1.0;
    font-weight:800;

    margin-bottom:1rem;
}

.hero-title span{
    color:#d4a8ff;
}

.hero-description{
    font-size:1.05rem;
    line-height:1.9;
    color:#fff;

    max-width:600px;

    margin-bottom:2rem;
}

.hero-buttons{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;

    margin-bottom:2rem;
}

/* ================= STATS ================= */

.hero-stats{
    display:flex;
    gap:2rem;
    flex-wrap:wrap;
}

.stat-item{
    min-width:140px;
}

.stat-number{
    font-size:2.2rem;
    font-weight:800;
    color:#fff;
}

.stat-label{
    font-size:.9rem;
    color:rgba(255,255,255,.8);
}
 

/* =========================
   CARD
========================= */


.feature-card{
    position:relative;
    padding:5px;
    border-radius:5px;
    border:1px solid rgba(255,255,255,0.1);
    /*overflow:hidden;*/
    transform-style:preserve-3d;
    cursor:pointer;
}

/* Glow */
.feature-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(
        135deg,
        rgba(0,255,255,0.25),
        rgba(0,132,255,0.15),
        0.82
    );

    opacity:0;
    transition:0.5s;
}

.feature-card:hover::before{
    opacity:1;
}

.feature-icon{
    font-size:2rem;
    margin-bottom:16px;
}

.feature-card h3{
    color:#fff;
    margin-bottom:12px;
    font-size:1.2rem;
}

.feature-card p{
    color:rgba(255,255,255,0.7);
    line-height:1.6;
}
/* ================= HERO CARDS ================= */
.feature-card p{
    position:relative;

    font-size:.85rem;
    line-height:1.7;
    color:rgba(255,255,255,.8);

    max-height:2.9em;
    overflow:hidden;

    transition:max-height .45s ease;
}

.feature-card p::after{
    content:'';

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:35px;


    transition:.5s;
}


.feature-card:hover p::after{
    opacity:0;
}

.feature-card{
    padding:1rem;

    border-radius:5px;

    background#7B2FBE;
    background:#7B2FBE; 

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    transition:.4s;
}

.feature-card:hover {

    transform: translateY(-12px) scale(1.12);

    z-index: 20;

    box-shadow: 0 35px 80px rgba(0,0,0,.22);

    border-color: rgba(123,63,228,.35);

}

.feature-icon{
    font-size:2rem;
    margin-bottom:1rem;
}

.feature-card h3{
    font-size:1rem;
    margin-bottom:.5rem;
}

.feature-card p{
    font-size:.80rem;
    line-height:1.5;
    color:rgba(255,255,255,.8);
}

/* ================= SHAPES ================= */

.hero-shapes .shape{
    /*position:absolute;*/
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
}

.shape-1{
    width:700px;
    height:700px;

    top:-250px;
    right:-150px;
}

.shape-2{
    width:400px;
    height:400px;

    bottom:-140px;
    right:180px;

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

.shape-3{
    width:220px;
    height:220px;

    left:5%;
    top:20%;

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

/* ================= MARQUEE ================= */

.marquee{
    overflow:hidden;
    height:90px;
    background:#f5ecff;

    border-top:1px solid #e7d8ff;
    border-bottom:1px solid #e7d8ff;

    padding:2rem 0;
}

.marquee-track{
    display:flex;
    gap:3rem;
    width:max-content;

    animation:marquee 30s linear infinite;
}

.marquee-track span{
    font-family:'Sora',sans-serif;
    font-size:.8rem;
    font-weight:700;
    color:var(--purple);
    text-transform:uppercase;
    letter-spacing:.1em;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

/* ================= SECTION ================= */


.section-light{
    background:#fafafa;
}

.section-title{
    font-family:'Sora',sans-serif;
    font-size:40px;
    /*line-height:1.7;*/
    font-weight:800;
}

.section-title span{
    color:var(--purple);
}

.section-description{
    color:var(--muted);
    line-height:1.9;
    margin-top:1rem;
}


.section-desc{
    line-height:1.3;
    padding:1rem;
}


.section-tag{
    color:var(--purple);
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;

    margin-bottom:1rem;
}

.section-header{
    margin-bottom:2rem;
}

.centered{
    text-align:center;
}

/* ================= ABOUT ================= */

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
    padding-bottom:10px;
}

.about-box{
    background:
    linear-gradient(
        135deg,
        var(--purple-dark),
        var(--purple-light)
    );

    padding:4rem 3rem;

    border-radius:28px;

    color:#fff;

    position:relative;
}

.about-box p{
    line-height:2;
}

.about-year{
    position:absolute;

    top:20px;
    right:30px;

    font-size:5rem;
    font-weight:800;

    opacity:.12;
}

.as-floating {
      position: absolute;
      bottom: -1.75rem;
      left: 2.5rem;
      background: #fff;
      border-radius: 16px;
      padding: 1.1rem 1.5rem;
      box-shadow: 0 12px 48px rgba(90, 21, 139, .22);
      display: flex;
      align-items: center;
      gap: 1rem;
    }

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

    border-radius:14px;

    background:#f3ebff;

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

    font-size:1.5rem;
}

.check-list{
    display:flex;
    flex-direction:column;
    gap:1rem;

    margin:2rem 0;
}

.check-item{
    display:flex;
    gap:1rem;
}

.check-item span{
    width:24px;
    height:24px;

    border-radius:50%;

    background:#f3ebff;
    color:var(--purple);

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

    font-size:.8rem;
    font-weight:700;
}

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

.services-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-bottom:20px;
}

/* ================= CARD ================= */

.service-card{
    cursor:pointer;

    position:relative;

    background:#fff;

    border:1px solid rgba(123,47,190,.12);

    border-radius:12px;

    padding:20px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.05);

    transition:
        height .45s ease,
        transform .45s ease,
        box-shadow .45s ease;

    height:250px;
}

.service-card:hover{

    height:450px;

    transform:translateY(-12px);

    box-shadow:
        0 25px 60px rgba(123,47,190,.16);
}

/* ================= TOP ================= */

.service-top{

    display:flex;
    flex-direction:column;

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

    text-align:center;
}

/* ================= ICON ================= */

.service-icon{

    width:40px;
    height:40px;

    margin-bottom:13px;

    border-radius:15px;

    background:#f5ecff;

    color:#7B2FBE;

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

    font-size:25px;

    transition:.4s;
}

.service-card:hover .service-icon{

    transform:
        rotate(-8deg)
        scale(1.08);

    background:#7B2FBE;

    color:#fff;
}

/* ================= TITRE ================= */

.service-top h3{

    font-size:1.4rem;

    font-weight:700;

    color:#1b1833;

    margin-bottom:12px;
}

/* ================= INTRO ================= */

.service-intro{

    color:#6d6488;

    line-height:1.5;

    max-width:320px;

    margin:auto;
}

/* ================= DETAILS ================= */

.service-details{

    margin-top:28px;

    opacity:0;

    transform:
        translateY(25px);

    transition:
        opacity .45s ease,
        transform .45s ease;
}

.service-card:hover .service-details{

    opacity:1;

    transform:translateY(0);
}

.service-details ul{

    text-align:left;
    list-style:none;
}

.service-details li{

    margin-bottom:14px;

    line-height:1.5;

    color:#5b5372;

    opacity:0;

    transform:translateX(-18px);
}

.service-details strong{

    color:#1d1835;
}

/* ================= ANIMATION DES LIGNES ================= */

.service-card:hover .service-details li{

    animation:showItem .45s forwards;
}

.service-card:hover .service-details li:nth-child(1){animation-delay:.05s;}
.service-card:hover .service-details li:nth-child(2){animation-delay:.12s;}
.service-card:hover .service-details li:nth-child(3){animation-delay:.20s;}
.service-card:hover .service-details li:nth-child(4){animation-delay:.28s;}
.service-card:hover .service-details li:nth-child(5){animation-delay:.36s;}

/* ================= KEYFRAMES ================= */

@keyframes showItem{

    from{

        opacity:0;

        transform:
            translateX(-18px);
    }

    to{

        opacity:1;

        transform:
            translateX(0);
    }

}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

    .services-grid{

        grid-template-columns:1fr;
    }

}

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

@media (max-width:576px){

    .services-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .service-card{

        height:auto;
        min-height:auto;

        padding:22px;
    }

    /* Plus d'effet hover sur mobile */
    .service-card:hover{

        height:auto;

        transform:none;

        box-shadow:0 15px 45px rgba(0,0,0,.05);
    }

    /* Les détails sont toujours visibles */
    .service-details{

        opacity:1;

        transform:none;

        margin-top:20px;
    }

    /* Les éléments de la liste sont visibles */
    .service-details li{

        opacity:1;

        transform:none;

        animation:none;
    }

    .service-top h3{
        font-size:1.25rem;
    }

    .service-intro{
        font-size:.95rem;
    }

    .service-icon{

        width:56px;
        height:56px;

        font-size:22px;

        margin-bottom:15px;
    }

}

/* ================= CTA VIDEO SECTION ================= */

.cta-section{
    background:url('{{asset("img/Backgroundaccelérer.jpg") }}');
    height:500px;
    position:relative;
    overflow:hidden;
    
}

/* VIDEO */

.cta-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;
}

/* OVERLAY */

.cta-overlay{
    /*position:absolute;*/
    inset:0;

    background:
     

    z-index:1;
}

/* CTA CONTENT */

.cta-section .container{
    position:relative;
    z-index:2;
}

/* CTA BOX */

.cta{
    position:relative;

    /*padding:5rem;*/

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;

    /*box-shadow:*/
    /*0 25px 80px rgba(0,0,0,.25);*/
}

/* TEXT */

.cta h2{
    /*background: linear-gradient(135deg, rgba(17, 17, 17, .78), rgba(74, 21, 128, .82));*/
    padding:5px;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.2;
    border-radius:8px;
}

.cta p{
    margin-top:1rem;
    color:rgba(255,255,255,.82);
}

/* RESPONSIVE */

@media(max-width:768px){

    .cta{
        flex-direction:column;
        align-items:flex-start;

        padding:3rem 2rem;
    }

}

.cta{

    border-radius:30px;

    /*padding:5rem;*/

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
}

.cta h2{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.2;
}

.cta p{
    margin-top:1rem;
    color:rgba(255,255,255,.8);
}

/* ================= FOOTER ================= */

footer{
    background:var(--purple-dark);
    color:#fff;

    padding-top:5rem;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;
}

.footer-title{
    font-size:1.8rem;
    line-height:1.5;
}

.footer-socials{
    display:flex;
    gap:1rem;
    margin-top:1.5rem;
}

.footer-socials a{
    width:45px;
    height:45px;

    border-radius:12px;

    background:rgba(255,255,255,.1);

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

.footer-links{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.footer-links h4{
    margin-bottom:.5rem;
}

.footer-links a{
    color:rgba(255,255,255,.7);
}

.footer-bottom{
    margin-top:4rem;

    border-top:1px solid rgba(255,255,255,.1);

    padding:1.5rem;
    text-align:center;

    color:rgba(255,255,255,.7);
}

/* ================= REVEAL ================= */

.reveal{
    opacity:0;
    transform:translateY(40px);
}

.reveal.in{
    
    opacity:1;
    transform:translateY(0);

    transition:1s;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1100px){

    .hero-grid,
    .about-grid{
        grid-template-columns:1fr;
    }

    .hero-cards{
        grid-template-columns:repeat(2,1fr);
    }

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

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

    .cta{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:768px){

    .nav-links,
    .nav-contact{
        display:none;
    }

    .hamburger{
        display:flex;
    }

    .mobile-menu.active{
        display:flex;
    }

    .hero{
        padding-top:4rem;
    }

    .hero-cards{
        grid-template-columns:1fr;
    }

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

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

    .hero-title{
        font-size:3rem;
    }

    .cta{
        padding:3rem 2rem;
    }

}

@media(max-width:500px){

    .hero-title{
        font-size:2.4rem;
    }

    .hero-stats{
        gap:1rem;
    }

    .stat-number{
        font-size:1.7rem;
    }

}



/* =========================================================
   PARTNERS
========================================================= */


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

.partners{
    padding:40px 7%;
    background:#fff;
}

.partners-title h2{
    font-family: 'Inter', sans-serif;
        font-size: 40px;
        /*line-height: 1.7;*/
        font-weight: 800;
}

/* Bloc */
.partner-group{
    padding-top 15px;
    margin-bottom:45px;
}

/* Titre avec barre verticale */
.partner-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:25px;
}

.partner-heading span{
    width:3px;
    height:55px;
    background:#5a36d6;
    border-radius:3px;
}

.partner-heading h3{
    font-size:1.8rem;
    color:#4747d4;
    font-weight:500;
    font-family:'Inter', serif;
}

/* Logos */
.partner-logos{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:25px 30px;
    padding-left:18px;
}

/* Taille des logos */
.partner-logos img{
    /*filter:grayscale(100%);*/
    opacity:.6;
    max-height:55px;
    max-width: 140;
    width:auto;
    object-fit:contain;

    transition:.35s ease;
    cursor:pointer;
}


.partner-heading h3:hover {
    cursor:pointer;
}

.partner-logos img:hover{
    transform:scale(1.08);
    opacity:1;
    filter:none;
}

/* Logo PECB légèrement plus grand */
.partner-logos img[alt="PECB"]{
    max-height:72px;
}

/* Section experts */
.partner-logos.expert img{
    max-height:58px;
}

/* Responsive */
@media(max-width:768px){

    .partners{
        padding:50px 20px;
    }

    .partners-title h2{
        font-size:2rem;
    }

    .partner-heading h3{
        font-size:1.3rem;
    }

    .partner-logos{
        gap:20px;
        justify-content:center;
        padding-left:0;
    }

    .partner-logos img{
        max-height:40px;
    }
}
/*sectin croissance continue*/
/* =========================
   ODEDIS STATS SECTION
========================= */

.odedis-stats-section {
    background: #f5f7fa;
    padding: 90px 0;
    position: relative;
}

.odedis-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.odedis-stat-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    transition: all .35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
}

.odedis-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        purple,
        grey
    );
}

.odedis-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
}

.odedis-stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 12px;
    display: inline-block;
}

.odedis-stat-plus {
    font-size: 2rem;
    font-weight: 800;
    color: purple;
    margin-left: 2px;
}

.odedis-stat-label {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* TABLET */

@media (max-width: 992px) {
    .odedis-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */

@media (max-width: 576px) {
    .odedis-stats-section {
        padding: 70px 0;
    }

    .odedis-stats-grid {
        grid-template-columns: 1fr;
    }

    .odedis-stat-number {
        font-size: 2.5rem;
    }
}