/* =========================================================
   TRACKSOLID PRO TUNISIA
   ACCUEIL.CSS - VERSION COMPLETE
========================================================= */


/* =========================================================
   01. VARIABLES
========================================================= */

:root{
    --blue:#008cff;
    --blue-dark:#082d62;
    --blue-deep:#063b76;
    --blue-soft:#eaf6ff;

    --orange:#ff6b0b;
    --orange-dark:#e95600;

    --white:#ffffff;
    --black:#07182e;

    --text:#102541;
    --muted:#66758a;

    --bg:#ffffff;
    --bg-soft:#f6faff;

    --border:#e2ebf5;

    --shadow:
        0 18px 50px
        rgba(12,49,88,.10);

    --shadow-hover:
        0 24px 55px
        rgba(12,49,88,.17);

    --radius:22px;
}


/* =========================================================
   02. RESET
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:var(--bg);
    color:var(--text);

    line-height:1.6;

    overflow-x:hidden;
}

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

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

button{
    font:inherit;
}

ul{
    list-style:none;
}


/* =========================================================
   03. GLOBAL CONTAINER
========================================================= */

.container{
    width:min(1180px, calc(100% - 40px));
    margin-inline:auto;
}

.section{
    padding:100px 0;
}


/* =========================================================
   04. BUTTONS
========================================================= */

.btn{
    display:inline-flex;

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

    min-height:48px;

    padding:12px 22px;

    border-radius:11px;

    font-size:14px;
    font-weight:800;

    border:1px solid transparent;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        color .25s ease;
}

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

.btn-orange{
    color:#fff;
    background:var(--orange);

    box-shadow:
        0 10px 25px
        rgba(255,107,11,.22);
}

.btn-orange:hover{
    background:var(--orange-dark);

    box-shadow:
        0 15px 30px
        rgba(255,107,11,.30);
}

.btn-outline{
    color:#0078e7;
    background:#fff;

    border-color:#168cff;
}

.btn-outline:hover{
    background:#eef8ff;
}

.btn-soft{
    color:#006bc7;
    background:#eaf6ff;
}

.btn-light{
    color:var(--orange);
    background:#fff;

    border-color:#fff;
}

.btn-light:hover{
    background:#f7fbff;
}


/* =========================================================
   05. HEADER
========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    height:74px;

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

    border-bottom:1px solid #e8eef5;

    backdrop-filter:blur(15px);
}

.nav-wrap{
    height:74px;

    display:flex;
    align-items:center;

    gap:30px;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
    flex-shrink:0;

    display:flex;
    align-items:center;

    margin-right:auto;
}

.logo img{
    width:150px;
    height:auto;

    object-fit:contain;

    transform-origin:left center;

    transition:
        transform .35s ease,
        filter .35s ease;
}

.logo:hover img{
    transform:scale(1.10);

    filter:
        drop-shadow(
            0 7px 8px
            rgba(0,140,255,.18)
        );
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{
    display:flex;
    align-items:center;

    gap:30px;
}

.nav a{
    position:relative;

    padding:26px 0;

    font-size:14px;
    font-weight:750;

    color:#0d203b;

    white-space:nowrap;

    transition:color .25s ease;
}

.nav a:hover,
.nav a.active{
    color:var(--blue);
}

.nav a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:0;
    height:3px;

    background:var(--blue);

    transform:translateX(-50%);

    transition:width .3s ease;
}

.nav a:hover::after,
.nav a.active::after{
    width:100%;
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions{
    display:flex;
    align-items:center;

    gap:10px;
}

.nav-actions .btn{
    white-space:nowrap;
}


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

.menu-btn{
    display:none;

    width:44px;
    height:44px;

    border:0;
    background:transparent;

    cursor:pointer;
}

.menu-btn span{
    display:block;

    width:25px;
    height:2px;

    margin:5px auto;

    background:var(--blue-dark);

    border-radius:20px;

    transition:.3s ease;
}


/* =========================================================
   06. HERO VIDEO
========================================================= */

.hero{
    position:relative;

    min-height:620px;

    display:flex;
    align-items:center;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #edf8ff 45%,
            #d7efff 100%
        );
}


/* VIDEO */

.hero-video{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center center;

    z-index:-3;
}


/* OVERLAY POUR LECTURE DU TEXTE */

.hero-overlay{
    position:absolute;

    inset:0;

    z-index:-2;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.94) 25%,
            rgba(255,255,255,.65) 47%,
            rgba(255,255,255,.10) 72%,
            rgba(255,255,255,0) 100%
        );
}


/* HERO CONTENT */

.hero-content{
    position:relative;
    z-index:2;

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

.hero-content .pill{
    margin-bottom:20px;
}

.hero h1{
    max-width:650px;

    font-size:clamp(45px,5vw,68px);

    line-height:1.02;

    letter-spacing:-2.5px;

    color:#082d62;

    margin-bottom:20px;
}

.hero h1 em{
    font-style:normal;
    color:var(--orange);
}

.hero-content > p{
    max-width:590px;

    font-size:18px;

    color:#172b47;

    margin-bottom:28px;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:12px;
}


/* =========================================================
   07. PILLS
========================================================= */

.pill{
    display:inline-flex;

    align-items:center;

    padding:7px 14px;

    border-radius:999px;

    background:#e7f5ff;

    color:#0075d8;

    font-size:12px;
    font-weight:900;

    letter-spacing:1px;
}

.dark-pill{
    color:#fff;

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


/* =========================================================
   TRUST STRIP + FEATURES PRO
========================================================= */


/* =========================================================
   01. TRUST STRIP
========================================================= */

.trust-strip{
    position:relative;
    z-index:10;
    margin-top:-32px;
    padding:0 0 30px;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);

    padding:3px;

    background:
        linear-gradient(
            120deg,
            #ff6b0b 0%,
            #ff8c2c 27%,
            #ffffff 50%,
            #1e9bff 74%,
            #0878dc 100%
        );

    border-radius:22px;

    box-shadow:
        0 20px 50px rgba(0,80,160,.15);

    overflow:hidden;
}

.trust-grid article{
    position:relative;

    min-height:90px;

    display:flex;
    align-items:center;

    gap:13px;

    padding:18px;

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

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.trust-grid article:first-child{
    border-radius:19px 0 0 19px;
}

.trust-grid article:last-child{
    border-radius:0 19px 19px 0;
}

.trust-grid article:not(:last-child)::after{
    content:"";

    position:absolute;

    right:0;
    top:22%;

    width:1px;
    height:56%;

    background:#dde7f0;
}

.trust-grid article:hover{
    z-index:2;

    transform:translateY(-5px);

    background:#fff;

    box-shadow:
        0 15px 30px rgba(0,105,200,.12);
}


/* TRUST ICON */

.trust-grid article img{
    width:46px;
    height:46px;

    object-fit:contain;

    flex-shrink:0;

    transition:
        transform .35s ease,
        filter .35s ease;
}

.trust-grid article:hover img{
    transform:
        scale(1.15)
        rotate(-4deg);

    filter:
        drop-shadow(
            0 7px 10px rgba(0,140,255,.20)
        );
}

.trust-grid b{
    display:block;

    color:#082d62;

    font-size:14px;
    font-weight:800;

    line-height:1.25;
}

.trust-grid small{
    display:block;

    margin-top:4px;

    color:#65768b;

    font-size:12px;
}


/* =========================================================
   02. FEATURES PRO
========================================================= */

.features-pro{
    position:relative;

    padding:100px 0 110px;

    background:
        linear-gradient(
            180deg,
            #f8fcff 0%,
            #ffffff 45%,
            #f5faff 100%
        );

    overflow:hidden;
}


/* BACKGROUND DECORATION */

.features-glow{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(5px);
}

.features-glow-1{
    width:500px;
    height:500px;

    right:-250px;
    top:60px;

    background:
        radial-gradient(
            circle,
            rgba(0,145,255,.12),
            rgba(0,145,255,0) 70%
        );
}

.features-glow-2{
    width:420px;
    height:420px;

    left:-220px;
    bottom:-100px;

    background:
        radial-gradient(
            circle,
            rgba(255,107,11,.10),
            rgba(255,107,11,0) 70%
        );
}


/* =========================================================
   HEADER
========================================================= */

.features-pro-head{
    position:relative;

    z-index:2;

    max-width:850px;

    margin:0 auto 55px;

    text-align:center;
}

.features-label{
    display:inline-flex;

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

    padding:9px 16px;

    color:#0878dc;

    background:#e9f5ff;

    border:1px solid #d4ebff;

    border-radius:999px;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.5px;
}

.features-pro-head h2{
    max-width:820px;

    margin:18px auto 0;

    color:#082d62;

    font-size:clamp(36px,4.5vw,58px);

    line-height:1.05;

    letter-spacing:-2px;
}

.features-pro-head h2 span{
    color:#ff6b0b;
}

.features-pro-head p{
    max-width:720px;

    margin:20px auto 0;

    color:#617187;

    font-size:17px;

    line-height:1.75;
}


/* =========================================================
   FEATURES GRID
========================================================= */

.features-pro-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


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

.feature-pro-card{
    position:relative;

    min-height:330px;

    padding:30px;

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

    border:
        1px solid #dfeaf4;

    border-radius:26px;

    box-shadow:
        0 12px 35px rgba(7,52,100,.06);

    overflow:hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* BLUE/ORANGE LINE */

.feature-pro-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            #078cff,
            #37b6ff,
            #ff8a2c,
            #ff6500
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:
        transform .45s ease;
}


/* LIGHT EFFECT */

.feature-pro-card::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-100px;
    top:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,145,255,.10),
            transparent 70%
        );

    transition:
        transform .5s ease;
}

.feature-pro-card:hover{
    transform:translateY(-10px);

    border-color:#c5e3f8;

    box-shadow:
        0 25px 60px rgba(4,63,120,.13);
}

.feature-pro-card:hover::before{
    transform:scaleX(1);
}

.feature-pro-card:hover::after{
    transform:scale(1.5);
}


/* =========================================================
   NUMBER
========================================================= */

.feature-number{
    position:absolute;

    right:22px;
    top:18px;

    color:#e6f0f8;

    font-size:46px;
    font-weight:900;

    line-height:1;

    transition:
        color .35s ease,
        transform .35s ease;
}

.feature-pro-card:hover .feature-number{
    color:#d5eaff;

    transform:translateY(4px);
}


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

.feature-icon-box{
    position:relative;

    width:74px;
    height:74px;

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

    margin-bottom:24px;

    background:
        linear-gradient(
            145deg,
            #edf8ff,
            #ffffff
        );

    border:
        1px solid #dceefa;

    border-radius:22px;

    box-shadow:
        0 10px 25px rgba(0,115,220,.10);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.feature-icon-box img{
    width:53px;
    height:53px;

    object-fit:contain;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}

.feature-pro-card:hover .feature-icon-box{
    transform:
        translateY(-4px)
        rotate(-3deg);

    box-shadow:
        0 15px 30px rgba(0,120,230,.16);
}

.feature-pro-card:hover .feature-icon-box img{
    transform:scale(1.13);

    filter:
        drop-shadow(
            0 7px 9px rgba(0,135,255,.18)
        );
}


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

.feature-pro-content{
    position:relative;
    z-index:2;
}

.feature-tag{
    display:block;

    margin-bottom:9px;

    color:#0785e8;

    font-size:10px;
    font-weight:900;

    letter-spacing:1.3px;
}

.feature-pro-card h3{
    max-width:290px;

    margin:0 0 13px;

    color:#082d62;

    font-size:21px;

    line-height:1.25;

    letter-spacing:-.4px;
}

.feature-pro-card p{
    margin:0;

    color:#68788d;

    font-size:14px;

    line-height:1.7;
}


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

.feature-main{
    grid-column:span 2;

    min-height:350px;

    display:grid;

    grid-template-columns:
        auto 1fr;

    align-items:center;

    column-gap:30px;

    padding:38px;

    background:
        linear-gradient(
            135deg,
            #082d62 0%,
            #075aa5 55%,
            #078bea 100%
        );

    border-color:transparent;
}

.feature-main .feature-icon-box{
    width:100px;
    height:100px;

    margin:0;

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

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

    box-shadow:none;
}

.feature-main .feature-icon-box img{
    width:72px;
    height:72px;
}

.feature-main .feature-number{
    color:
        rgba(255,255,255,.09);
}

.feature-main .feature-tag{
    color:#ffad70;
}

.feature-main h3{
    max-width:500px;

    color:#fff;

    font-size:30px;
}

.feature-main p{
    max-width:560px;

    color:
        rgba(255,255,255,.76);

    font-size:15px;
}


/* =========================================================
   FEATURE POINTS
========================================================= */

.feature-points{
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:20px;
}

.feature-points span{
    display:inline-flex;

    align-items:center;

    padding:8px 12px;

    color:#fff;

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

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

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.feature-points span::before{
    content:"";

    width:6px;
    height:6px;

    margin-right:7px;

    background:#ff7a18;

    border-radius:50%;

    box-shadow:
        0 0 0 4px rgba(255,122,24,.14);
}


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

.feature-wide{
    grid-column:span 3;

    min-height:auto;

    display:grid;

    grid-template-columns:
        85px 1fr;

    align-items:center;

    column-gap:25px;

    padding:32px 38px;

    background:
        linear-gradient(
            100deg,
            #ffffff,
            #f3faff
        );
}

.feature-wide .feature-icon-box{
    margin:0;
}

.feature-wide h3{
    max-width:600px;

    font-size:24px;
}

.feature-wide p{
    max-width:720px;
}


/* =========================================================
   FEATURE LINK
========================================================= */

.feature-link{
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:18px;

    color:#0878dc;

    font-size:14px;
    font-weight:800;

    text-decoration:none;

    transition:
        color .3s ease,
        gap .3s ease;
}

.feature-link span{
    color:#ff6b0b;

    font-size:19px;
}

.feature-link:hover{
    gap:15px;

    color:#ff6b0b;
}

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

.reveal{
    opacity:0;

    transform:
        translateY(28px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);

    transition-delay:
        var(--reveal-delay, 0ms);
}

.reveal.is-visible{
    opacity:1;

    transform:
        translateY(0);
}

/* STAGGER */

.features-pro-grid
.feature-pro-card:nth-child(2){
    transition-delay:.06s;
}

.features-pro-grid
.feature-pro-card:nth-child(3){
    transition-delay:.12s;
}

.features-pro-grid
.feature-pro-card:nth-child(4){
    transition-delay:.18s;
}

.features-pro-grid
.feature-pro-card:nth-child(5){
    transition-delay:.24s;
}

.features-pro-grid
.feature-pro-card:nth-child(6){
    transition-delay:.30s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .trust-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

    .trust-grid article{
        border-radius:0 !important;
    }

    .trust-grid article::after{
        display:none;
    }


    .features-pro{
        padding:
            80px 0 90px;
    }

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

    .feature-main{
        grid-column:
            span 2;
    }

    .feature-wide{
        grid-column:
            span 2;
    }

}


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

@media (max-width:700px){

    .trust-strip{
        margin-top:-15px;

        padding-bottom:20px;
    }

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

        border-radius:18px;
    }

    .trust-grid article{
        min-height:82px;

        padding:14px;
    }

    .trust-grid article img{
        width:38px;
        height:38px;
    }

    .trust-grid b{
        font-size:13px;
    }

    .trust-grid small{
        font-size:11px;
    }


    /* FEATURES */

    .features-pro{
        padding:
            65px 0 75px;
    }

    .features-pro-head{
        margin-bottom:35px;

        text-align:left;
    }

    .features-label{
        font-size:10px;
    }

    .features-pro-head h2{
        margin-top:14px;

        font-size:
            clamp(32px,10vw,44px);

        letter-spacing:-1.4px;
    }

    .features-pro-head p{
        margin-top:15px;

        font-size:15px;
    }

    .features-pro-grid{
        grid-template-columns:1fr;

        gap:16px;
    }

    .feature-pro-card,
    .feature-main,
    .feature-wide{
        grid-column:auto;

        min-height:auto;

        display:block;

        padding:24px;

        border-radius:22px;
    }

    .feature-icon-box,
    .feature-main .feature-icon-box{
        width:68px;
        height:68px;

        margin-bottom:20px;
    }

    .feature-icon-box img,
    .feature-main .feature-icon-box img{
        width:49px;
        height:49px;
    }

    .feature-pro-card h3,
    .feature-main h3,
    .feature-wide h3{
        max-width:none;

        font-size:21px;
    }

    .feature-main p{
        font-size:14px;
    }

    .feature-number{
        right:18px;
        top:18px;

        font-size:38px;
    }

}


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

@media (max-width:450px){

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

    .trust-grid article{
        min-height:auto;
    }

    .features-pro{
        padding:
            55px 0 65px;
    }

    .feature-pro-card,
    .feature-main,
    .feature-wide{
        padding:21px;
    }

    .features-pro-head h2{
        font-size:34px;
    }

    .feature-points{
        display:grid;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

    .feature-pro-card,
    .feature-icon-box,
    .feature-icon-box img,
    .trust-grid article,
    .trust-grid article img{
        transition:none;
    }

}
/* =========================================================
   11. PRODUCTS - PREMIUM SHOWCASE
========================================================= */

.products-section{
    position:relative;

    padding:110px 0 120px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #ffffff 48%,
            #f5faff 100%
        );
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.products-glow{
    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    filter:blur(100px);

    pointer-events:none;

    opacity:.13;
}

.products-glow-blue{
    top:-200px;
    right:-120px;

    background:#009dff;
}

.products-glow-orange{
    bottom:-280px;
    left:-180px;

    background:#ff6b00;

    opacity:.09;
}


/* =========================================================
   HEADER
========================================================= */

.products-header{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:50px;

    margin-bottom:55px;
}

.products-heading{
    max-width:760px;
}

.products-kicker{
    display:inline-flex;

    align-items:center;

    padding:9px 15px;

    margin-bottom:18px;

    border-radius:999px;

    background:#e7f5ff;

    color:#0077d8;

    font-size:12px;
    font-weight:900;

    letter-spacing:1.5px;
}

.products-heading h2{
    max-width:720px;

    margin:0;

    color:#072b5e;

    font-size:
        clamp(42px,5vw,66px);

    line-height:.98;

    letter-spacing:-2.5px;

    font-weight:900;
}

.products-heading h2 span{
    display:block;

    color:#ff6808;

    margin-top:7px;
}

.products-heading p{
    max-width:620px;

    margin-top:22px;

    color:#61738b;

    font-size:17px;

    line-height:1.7;
}


/* ALL PRODUCTS BUTTON */

.products-all-btn{
    flex-shrink:0;

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

    gap:14px;

    min-height:54px;

    padding:0 23px;

    border:1px solid #c7e2f7;

    border-radius:15px;

    background:#fff;

    color:#0874cc;

    font-size:14px;
    font-weight:800;

    box-shadow:
        0 10px 30px
        rgba(5,75,140,.08);

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

.products-all-btn span{
    font-size:20px;

    transition:
        transform .3s ease;
}

.products-all-btn:hover{
    transform:translateY(-4px);

    background:#087de0;

    color:#fff;

    box-shadow:
        0 16px 35px
        rgba(0,118,220,.20);
}

.products-all-btn:hover span{
    transform:translateX(5px);
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid{
    position:relative;

    z-index:2;

    display:grid;

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

    gap:22px;
}


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

.product-card{
    position:relative;

    display:flex;
    flex-direction:column;

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

    padding:16px;

    border:1px solid
        rgba(10,77,140,.12);

    border-radius:28px;

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

    box-shadow:
        0 16px 45px
        rgba(7,45,90,.08);

    overflow:hidden;

    text-decoration:none;

    isolation:isolate;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .35s ease;
}


/* gradient border top */

.product-card::before{
    content:"";

    position:absolute;

    top:0;
    left:15%;

    width:70%;
    height:3px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0c9cff,
            #ff720d,
            transparent
        );

    opacity:0;

    transform:scaleX(.4);

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


/* light hover */

.product-card::after{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    top:-140px;
    right:-140px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,155,255,.13),
            transparent 70%
        );

    opacity:0;

    transition:
        opacity .4s ease,
        transform .5s ease;

    z-index:-1;
}


.product-card:hover{
    transform:
        translateY(-12px);

    border-color:
        rgba(0,143,238,.28);

    box-shadow:
        0 28px 65px
        rgba(5,65,125,.16);
}

.product-card:hover::before{
    opacity:1;

    transform:scaleX(1);
}

.product-card:hover::after{
    opacity:1;

    transform:scale(1.4);
}


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

.product-top{
    min-height:34px;

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

    gap:10px;

    padding:2px 5px 10px;
}

.product-type{
    color:#0878d2;

    font-size:10px;
    font-weight:900;

    letter-spacing:1.2px;
}

.product-badge{
    display:inline-flex;

    align-items:center;

    padding:7px 10px;

    border-radius:999px;

    background:#ff6b08;

    color:#fff;

    font-size:10px;
    font-weight:900;

    box-shadow:
        0 6px 15px
        rgba(255,105,0,.25);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image{
    position:relative;

    height:235px;

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

    margin-bottom:23px;

    border-radius:21px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #f5faff,
            #eaf5ff
        );
}


/* subtle pattern */

.product-image::before{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    border-radius:50%;

    border:1px solid
        rgba(0,136,230,.12);

    box-shadow:
        0 0 0 30px
        rgba(0,136,230,.025),
        0 0 0 60px
        rgba(0,136,230,.018);
}


.product-image-glow{
    position:absolute;

    width:120px;
    height:120px;

    border-radius:50%;

    background:#13a6ff;

    filter:blur(55px);

    opacity:.15;

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


.product-image img{
    position:relative;

    z-index:2;

    width:88%;
    height:88%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 18px 18px
            rgba(7,38,75,.16)
        );

    transition:
        transform .55s
        cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}


.product-card:hover
.product-image img{

    transform:
        translateY(-7px)
        scale(1.08);

    filter:
        drop-shadow(
            0 25px 22px
            rgba(7,70,130,.23)
        );
}


.product-card:hover
.product-image-glow{

    opacity:.28;

    transform:scale(1.5);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-content{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:
        0 7px 5px;
}


.product-content h3{
    margin:0 0 10px;

    color:#062b60;

    font-size:27px;
    font-weight:900;

    letter-spacing:-.7px;
}


.product-description{
    min-height:48px;

    margin:0 0 19px;

    color:#66778c;

    font-size:14px;

    line-height:1.6;
}


/* =========================================================
   BENEFITS
========================================================= */

.product-benefits{
    display:grid;

    gap:10px;

    margin-bottom:24px;
}


.product-benefits span{
    display:flex;
    align-items:center;

    gap:9px;

    color:#29435f;

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


.product-benefits i{
    width:21px;
    height:21px;

    display:grid;
    place-items:center;

    flex-shrink:0;

    border-radius:50%;

    background:#e9f6ff;

    color:#0587e5;

    font-style:normal;

    font-size:11px;
    font-weight:900;

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


.product-card:hover
.product-benefits i{

    background:#ff700d;

    color:#fff;

    transform:scale(1.08);
}


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

.product-bottom{
    display:flex;

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

    gap:15px;

    margin-top:auto;

    padding-top:18px;

    border-top:
        1px solid #e5edf5;

    color:#0677d3;

    font-size:13px;
    font-weight:900;
}


.product-bottom b{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    flex-shrink:0;

    border-radius:50%;

    background:#eaf6ff;

    color:#087bd7;

    font-size:18px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}


.product-card:hover
.product-bottom b{

    transform:
        translateX(4px)
        rotate(-8deg);

    background:#ff6b08;

    color:#fff;
}


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

.product-card.reveal{
    opacity:0;

    transform:
        translateY(45px)
        scale(.97);

    transition:
        opacity .7s ease,
        transform .7s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;

    transition-delay:
        var(--reveal-delay,0ms);
}


.product-card.reveal.is-visible{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

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

    .product-card{
        min-height:550px;
    }

}


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

@media (max-width:700px){

    .products-section{
        padding:
            75px 0 80px;
    }


    .products-header{
        display:block;

        margin-bottom:35px;
    }


    .products-heading h2{
        font-size:
            clamp(38px,11vw,50px);

        letter-spacing:-1.5px;
    }


    .products-heading p{
        margin-top:17px;

        font-size:15px;
    }


    .products-all-btn{
        width:max-content;

        margin-top:25px;
    }


    .product-grid{
        grid-template-columns:1fr;

        gap:18px;
    }


    .product-card{
        min-height:auto;

        padding:14px;

        border-radius:23px;
    }


    .product-image{
        height:220px;

        border-radius:18px;
    }


    .product-content h3{
        font-size:25px;
    }


    .product-description{
        min-height:0;
    }

}


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

@media (max-width:420px){

    .products-heading h2{
        font-size:36px;
    }

    .product-image{
        height:190px;
    }

}

/* =========================================================
   12. COMMENT �A MARCHE
========================================================= */

.how-section{
    background:#f6faff;
}

.steps{
    display:grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items:center;

    gap:18px;
}

.steps article{
    min-height:250px;

    padding:28px 20px;

    text-align:center;

    background:#fff;

    border:1px solid #e3edf6;

    border-radius:20px;

    box-shadow:
        0 12px 30px
        rgba(10,50,90,.06);

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

.steps article:hover{
    transform:translateY(-8px);

    box-shadow:var(--shadow-hover);
}

.steps article b{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    margin:
        0 auto
        18px;

    border-radius:50%;

    color:#fff;
    background:var(--orange);
}

.steps article img{
    width:58px;
    height:58px;

    object-fit:contain;

    margin:
        0 auto
        18px;

    transition:transform .35s ease;
}

.steps article:hover img{
    transform:scale(1.15);
}

.steps h3{
    margin-bottom:8px;

    color:#082d62;

    font-size:17px;
}

.steps p{
    color:var(--muted);

    font-size:14px;
}

.step-arrow{
    color:var(--blue);

    font-size:30px;
    font-weight:900;
}


/* =========================================================
   13. PARTNERS
========================================================= */

.partners-section{
    background:#fff;
}

.partner-slider{
    display:flex;

    align-items:center;

    gap:15px;
}

.partner-track{
    flex:1;

    display:flex;

    gap:18px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding:10px 3px 20px;
}

.partner-track::-webkit-scrollbar{
    display:none;
}

.partner-card{
    flex:
        0 0
        210px;

    height:120px;

    display:grid;
    place-items:center;

    padding:20px;

    background:#fff;

    border:1px solid #e0eaf4;

    border-radius:18px;

    box-shadow:
        0 10px 25px
        rgba(10,45,85,.06);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.partner-card:hover{
    transform:translateY(-6px);

    border-color:#a9d8ff;

    box-shadow:var(--shadow);
}

.partner-card img{
    max-width:150px;
    max-height:70px;

    object-fit:contain;
}

.partner-card span{
    color:#9aa8b8;

    font-size:13px;
    font-weight:800;
}

.slider-btn{
    flex-shrink:0;

    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    border:0;

    border-radius:50%;

    color:#fff;
    background:var(--blue);

    cursor:pointer;

    box-shadow:
        0 8px 20px
        rgba(0,140,255,.20);

    transition:
        transform .25s ease,
        background .25s ease;
}

.slider-btn:hover{
    transform:scale(1.10);

    background:var(--orange);
}

.partner-note{
    display:block;

    margin-top:10px;

    text-align:center;

    color:#8c9aaa;
}


/* =========================================================
   14. APPLICATION MOBILE
========================================================= */

.app-section{
    position:relative;

    overflow:hidden;

    padding:80px 0;

    color:#fff;

    background:
        linear-gradient(
            115deg,
            #073c76 0%,
            #075fae 52%,
            #0094f6 100%
        );
}

.app-section::before{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    right:-150px;
    top:-270px;

    border-radius:50%;

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

.app-section::after{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    left:-180px;
    bottom:-200px;

    border-radius:50%;

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

.app-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        .9fr
        1.1fr;

    align-items:center;

    gap:60px;
}

.app-copy h2{
    margin-top:18px;

    font-size:
        clamp(38px,4vw,52px);

    line-height:1.08;

    letter-spacing:-1px;
}

.app-description{
    max-width:530px;

    margin-top:18px;

    color:
        rgba(255,255,255,.90);

    font-size:16px;
}


/* APPLICATION FEATURES */

.app-list{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:15px 25px;

    margin:28px 0;
}

.app-list span{
    display:flex;

    align-items:center;

    gap:9px;

    color:#fff;

    font-size:15px;
}

.app-list span b{
    width:22px;
    height:22px;

    flex-shrink:0;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;

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

    font-size:13px;
}


/* =========================================================
   GOOGLE PLAY + APP STORE
========================================================= */

.store-row{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:28px;
}

.store-link{
    display:inline-flex;

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

    width:auto;

    border-radius:10px;

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

.store-link img{
    display:block;

    width:auto;
    height:52px;

    object-fit:contain;

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

.store-link:hover{
    transform:translateY(-5px);
}

.store-link:hover img{
    transform:scale(1.05);

    filter:
        drop-shadow(
            0 10px 15px
            rgba(0,0,0,.25)
        );
}


/* =========================================================
   TELEPHONES 3D
========================================================= */

.app-visual{
    position:relative;

    display:flex;

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

    min-height:400px;
}

.app-visual img{
    position:relative;

    z-index:2;

    width:min(650px,100%);
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(
            0 30px 35px
            rgba(0,0,0,.25)
        );

    animation:
        phoneFloat
        5s
        ease-in-out
        infinite;
}

@keyframes phoneFloat{

    0%,
    100%{
        transform:
            translateY(0)
            rotate(.3deg);
    }

    50%{
        transform:
            translateY(-16px)
            rotate(-.3deg);
    }
}

/* =========================================================
   STATISTIQUES - TRACKSOLID PRO
========================================================= */

.stats {
    position: relative;
    overflow: hidden;

    padding: 58px 0;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(0, 169, 253, .20),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(245, 129, 7, .10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #062a5c 0%,
            #073873 50%,
            #082d62 100%
        );
}


/* lumière décorative */

.stats::before {
    content: "";

    position: absolute;
    width: 350px;
    height: 350px;

    top: -250px;
    left: 50%;

    transform: translateX(-50%);

    background: rgba(0, 169, 253, .15);

    border-radius: 50%;
    filter: blur(60px);

    pointer-events: none;
}


/* =========================================================
   GRID
========================================================= */

.stats-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: stretch;

    gap: 18px;
}


/* =========================================================
   CARDS
========================================================= */

.stat-card {
    position: relative;

    min-width: 0;

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

    text-align: center;

    padding: 22px 18px;

    border-radius: 22px;

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


/* séparateurs */

.stat-card:not(:last-child)::after {
    content: "";

    position: absolute;

    right: -9px;
    top: 20%;

    width: 1px;
    height: 60%;

    background:
        linear-gradient(
            transparent,
            rgba(255,255,255,.25),
            transparent
        );
}


/* hover */

.stat-card:hover {
    transform: translateY(-7px);

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

    box-shadow:
        0 20px 45px rgba(0,0,0,.14);
}


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

.stat-icon {
    position: relative;

    width: 88px;
    height: 88px;

    margin-bottom: 13px;

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


.stat-icon img {
    display: block;

    width: 82px;
    height: 82px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 14px rgba(0,0,0,.18)
        );

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}


/* halo derrière l'icône */

.stat-icon::before {
    content: "";

    position: absolute;

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background:
        rgba(0,169,253,.25);

    filter: blur(18px);

    opacity: 0;

    transform: scale(.6);

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


/* animation hover */

.stat-card:hover .stat-icon img {
    transform:
        translateY(-5px)
        scale(1.09);

    filter:
        drop-shadow(
            0 13px 18px rgba(0,169,253,.30)
        );
}


.stat-card:hover .stat-icon::before {
    opacity: 1;
    transform: scale(1.25);
}


/* =========================================================
   NUMBERS
========================================================= */

.stat-number {
    display: block;

    position: relative;

    font-size: clamp(
        34px,
        3vw,
        46px
    );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

    color: #ff720d;

    text-shadow:
        0 5px 18px rgba(255,114,13,.15);

    transition:
        transform .3s ease,
        text-shadow .3s ease;
}


.stat-card:hover .stat-number {
    transform: scale(1.06);

    text-shadow:
        0 5px 22px rgba(255,114,13,.35);
}


/* =========================================================
   LABEL
========================================================= */

.stat-card span {
    display: block;

    margin-top: 9px;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.4;

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


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

.stat-card.reveal {
    opacity: 0;

    transform:
        translateY(30px)
        scale(.96);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2,.8,.2,1);
}


.stat-card.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* apparition décalée */

.stat-card:nth-child(1) {
    transition-delay: .05s;
}

.stat-card:nth-child(2) {
    transition-delay: .12s;
}

.stat-card:nth-child(3) {
    transition-delay: .19s;
}

.stat-card:nth-child(4) {
    transition-delay: .26s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .stats {
        padding: 45px 0;
    }

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

        gap: 15px;
    }

    .stat-card {
        padding: 25px 15px;
    }

    .stat-card::after {
        display: none;
    }

    .stat-icon {
        width: 76px;
        height: 76px;
    }

    .stat-icon img {
        width: 68px;
        height: 68px;
    }

}


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

@media (max-width: 520px) {

    .stats {
        padding: 35px 0;
    }

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

        gap: 8px;
    }

    .stat-card {
        padding: 20px 8px;

        border-radius: 16px;
    }

    .stat-icon {
        width: 65px;
        height: 65px;

        margin-bottom: 9px;
    }

    .stat-icon img {
        width: 58px;
        height: 58px;
    }

    .stat-number {
        font-size: 31px;
    }

    .stat-card span {
        margin-top: 6px;

        font-size: 12px;
    }

}


/* =========================================================
   ACCESSIBILITE
========================================================= */

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

    .stat-card,
    .stat-icon img,
    .stat-number {
        transition: none !important;
        animation: none !important;
    }

}


/* =========================================================
   16. INSTALLATIONS
========================================================= */

.installations{
    background:#f7fbff;
}

.installation-grid{
    display:grid;

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

    gap:22px;
}

.installation-grid figure{
    position:relative;

    height:340px;

    overflow:hidden;

    border-radius:22px;

    box-shadow:
        0 15px 35px
        rgba(8,45,85,.10);
}

.installation-grid img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .6s ease,
        filter .6s ease;
}

.installation-grid figure:hover img{
    transform:scale(1.07);
}

.installation-grid figure::after{
    content:"";

    position:absolute;

    inset:45% 0 0;

    background:
        linear-gradient(
            transparent,
            rgba(2,26,55,.85)
        );

    pointer-events:none;
}

.installation-grid figcaption{
    position:absolute;

    left:25px;
    bottom:20px;

    z-index:2;

    color:#fff;

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


/* =========================================================
   17. CTA
========================================================= */

.cta-section{
    padding:75px 0;
}

.cta-box{
    position:relative;

    min-height:255px;

    display:grid;

    grid-template-columns:
        300px 1fr;

    align-items:center;

    gap:35px;

    padding:30px 55px;

    overflow:hidden;

    border-radius:30px;

    color:#fff;

    background:
        linear-gradient(
            120deg,
            #ff6200 0%,
            #ff852d 30%,
            #ffffff 50%,
            #149bff 72%,
            #006dcc 100%
        );

    box-shadow:
        0 20px 50px
        rgba(20,70,120,.15);
}

.cta-box::after{
    content:"";

    position:absolute;

    inset:4px;

    z-index:0;

    border-radius:26px;

    background:
        linear-gradient(
            110deg,
            rgba(255,105,10,.96) 0%,
            rgba(255,128,35,.95) 44%,
            rgba(7,126,220,.94) 100%
        );
}

.cta-mascotte{
    position:relative;

    z-index:2;

    width:270px;
    height:210px;

    object-fit:contain;

    margin:auto;

    filter:
        drop-shadow(
            0 15px 15px
            rgba(0,0,0,.15)
        );

    animation:
        mascotFloat
        4s
        ease-in-out
        infinite;
}

@keyframes mascotFloat{

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

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

.cta-content{
    position:relative;

    z-index:2;
}

.cta-content h2{
    font-size:
        clamp(28px,3vw,40px);

    line-height:1.1;

    margin-bottom:8px;
}

.cta-content p{
    margin-bottom:20px;

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


/* =========================================================
   18. WHATSAPP
========================================================= */






/* =========================================================
   19. FOOTER
========================================================= */

footer{
    padding:
        70px 0
        20px;

    color:#dbe9f7;

    background:#061f42;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:45px;
}

.footer-brand img{
    width:170px;

    margin-bottom:20px;
}

.footer-brand p{
    max-width:280px;

    color:#9fb5cb;

    font-size:14px;
}

footer h4{
    margin-bottom:18px;

    color:#fff;

    font-size:16px;
}

footer a{
    display:block;

    width:max-content;

    margin-bottom:10px;

    color:#a9bdd1;

    font-size:14px;

    transition:
        color .25s ease,
        transform .25s ease;
}

footer a:hover{
    color:#fff;

    transform:translateX(4px);
}

footer p{
    color:#a9bdd1;

    font-size:14px;
}

.copyright{
    margin-top:55px;

    padding-top:20px;

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

    text-align:center;

    color:#819bb6;

    font-size:13px;
}


/* =========================================================
   20. REVEAL ANIMATIONS
========================================================= */

.reveal{
    opacity:0;

    transform:
        translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s
        cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible{
    opacity:1;

    transform:
        translateY(0);
}


/* DELAY EFFECT */

.features-grid .reveal:nth-child(2),
.product-grid .reveal:nth-child(2),
.trust-grid .reveal:nth-child(2){
    transition-delay:.08s;
}

.features-grid .reveal:nth-child(3),
.product-grid .reveal:nth-child(3),
.trust-grid .reveal:nth-child(3){
    transition-delay:.16s;
}

.features-grid .reveal:nth-child(4),
.product-grid .reveal:nth-child(4),
.trust-grid .reveal:nth-child(4){
    transition-delay:.24s;
}

.trust-grid .reveal:nth-child(5){
    transition-delay:.32s;
}


/* =========================================================
   21. TABLET
========================================================= */

@media(max-width:1050px){

    .nav{
        gap:18px;
    }

    .nav-actions .btn-soft{
        display:none;
    }

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

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

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

    .step-arrow{
        display:none;
    }

    .app-grid{
        gap:30px;
    }

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


/* =========================================================
   22. MOBILE / TABLET
========================================================= */

@media(max-width:800px){

    .section{
        padding:75px 0;
    }

    .container{
        width:
            min(
                100% - 30px,
                1180px
            );
    }


    /* HEADER */

    .site-header,
    .nav-wrap{
        height:68px;
    }

    .logo img{
        width:135px;
    }

    .menu-btn{
        display:block;

        order:3;
    }

    .nav{
        position:absolute;

        left:15px;
        right:15px;
        top:75px;

        display:flex;
        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:15px;

        border:
            1px solid
            #e2ebf5;

        border-radius:18px;

        background:#fff;

        box-shadow:
            0 20px 45px
            rgba(5,35,70,.15);

        opacity:0;
        visibility:hidden;

        transform:
            translateY(-10px);

        transition:.3s ease;
    }

    .nav.open{
        opacity:1;
        visibility:visible;

        transform:
            translateY(0);
    }

    .nav a{
        padding:12px 10px;
    }

    .nav a::after{
        display:none;
    }

    .nav-actions{
        margin-left:auto;
    }

    .nav-actions .btn-orange{
        display:none;
    }


    /* HERO */

    .hero{
        min-height:650px;

        align-items:flex-end;
    }

    .hero-video{
        object-position:
            65%
            center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.20) 0%,
                rgba(255,255,255,.68) 40%,
                rgba(255,255,255,.97) 70%,
                #fff 100%
            );
    }

    .hero-content{
        padding:
            250px 0
            55px;
    }

    .hero h1{
        font-size:
            clamp(
                39px,
                9vw,
                55px
            );

        letter-spacing:-1.5px;
    }

    .hero-content > p{
        font-size:16px;
    }


    /* TRUST */

    .trust-strip{
        margin-top:0;

        padding-top:20px;
    }

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

    .trust-grid article{
        border-radius:0 !important;
    }

    .trust-grid article:first-child{
        border-radius:
            18px 0 0 0 !important;
    }

    .trust-grid article:nth-child(2){
        border-radius:
            0 18px 0 0 !important;
    }

    .trust-grid article:last-child{
        border-radius:
            0 0 18px 18px !important;

        grid-column:
            1 / -1;
    }


    /* SECTION HEAD */

    .section-head.split{
        align-items:flex-start;

        flex-direction:column;
    }


    /* APPLICATION */

    .app-grid{
        grid-template-columns:1fr;

        text-align:center;
    }

    .app-copy{
        padding-top:10px;
    }

    .app-copy p{
        margin-left:auto;
        margin-right:auto;
    }

    .app-list{
        max-width:520px;

        margin:
            28px auto;

        text-align:left;
    }

    .store-row{
        justify-content:center;
    }

    .store-link img{
        height:48px;
    }

    .app-visual{
        min-height:auto;

        padding-top:15px;
    }

    .app-visual img{
        width:
            min(
                570px,
                100%
            );
    }


    /* STATS */

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

        gap:35px 0;
    }

    .stats article:nth-child(2)::after{
        display:none;
    }


    /* CTA */

    .cta-box{
        grid-template-columns:
            220px 1fr;

        padding:
            30px;
    }

    .cta-mascotte{
        width:220px;
    }
}


/* =========================================================
   23. SMALL MOBILE
========================================================= */

@media(max-width:600px){

    .section{
        padding:65px 0;
    }


    /* HEADER */

    .logo img{
        width:120px;
    }


    /* HERO */

    .hero{
        min-height:610px;
    }

    .hero-video{
        object-position:
            67%
            center;
    }

    .hero-content{
        padding:
            260px 0
            45px;
    }

    .hero h1{
        font-size:40px;

        line-height:1.04;
    }

    .hero-actions{
        width:100%;
    }

    .hero-actions .btn{
        flex:1;

        padding-left:12px;
        padding-right:12px;

        font-size:13px;
    }


    /* TRUST */

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

    .trust-grid article{
        border-radius:0 !important;
    }

    .trust-grid article:first-child{
        border-radius:
            18px 18px 0 0 !important;
    }

    .trust-grid article:last-child{
        grid-column:auto;

        border-radius:
            0 0 18px 18px !important;
    }

    .trust-grid article::after{
        top:auto !important;

        left:20px;
        right:20px !important;
        bottom:0;

        width:auto !important;
        height:1px !important;
    }


    /* FEATURES */

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


    /* PRODUCTS */

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


    /* HOW */

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


    /* APPLICATION */

    .app-section{
        padding:
            65px 0
            45px;
    }

    .app-copy h2{
        font-size:34px;
    }

    .app-list{
        grid-template-columns:1fr;

        max-width:310px;

        gap:12px;
    }

    .store-row{
        gap:9px;
    }

    .store-link img{
        height:44px;
    }

    .app-visual img{
        width:100%;
    }


    /* STATS */

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

    .stats strong{
        font-size:35px;
    }


    /* INSTALLATIONS */

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

    .installation-grid figure{
        height:270px;
    }


    /* CTA */

    .cta-section{
        padding:55px 0;
    }

    .cta-box{
        grid-template-columns:1fr;

        text-align:center;

        gap:5px;

        padding:
            25px 22px
            35px;
    }

    .cta-mascotte{
        width:190px;
        height:180px;
    }

    .cta-content .hero-actions{
        justify-content:center;
    }


    /* FOOTER */

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

        gap:35px;
    }


 /* WHATSAPP */









/* =========================================================
   24. VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

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

    .hero-actions{
        flex-direction:column;
    }

    .hero-actions .btn{
        width:100%;
    }

    .store-link img{
        height:40px;
    }

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

    .stats article::after{
        display:none;
    }
}


/* =========================================================
   25. ACCESSIBILITY
========================================================= */

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

/* ===== FINAL CLEAN HOME OVERRIDES ===== */
.trust-grid{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr);}.trust-grid article{border-radius:0!important}.trust-grid article::after{display:none}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}.trust-grid article{min-height:76px}}


/* =========================================================
   TRACKSOLID PRO · ACCUEIL FINAL
   Header transparent et fin dégradé animé
========================================================= */
.site-header{
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:0;
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#fff 0%,#00a9fd 26%,#fff 49%,#f58107 73%,#fff 100%);
  background-size:220% 100%;animation:tsHeaderGradient 9s linear infinite;
}
.site-header.header-scrolled{background:rgba(255,255,255,.94);box-shadow:0 8px 26px rgba(6,43,91,.07)}
@keyframes tsHeaderGradient{to{background-position:220% 0}}
.nav-actions .btn-soft{background:rgba(255,255,255,.72);border:1px solid rgba(0,169,253,.22);color:#065da3}
.nav-actions .btn-soft:hover{background:#eaf7ff}
.hero-platform-btn{gap:12px;padding-inline:26px;box-shadow:0 12px 30px rgba(245,129,7,.25)}
.hero-platform-btn span{font-size:19px}
/* Liens sur les cartes entières : pas de bouton « Découvrir » */
.product-card{cursor:pointer}
/* WhatsApp : message et icône sur la même ligne */








/* Footer moderne, clair, 3 colonnes simples */













@media(max-width:800px){
  .site-header{background:rgba(255,255,255,.87)}
  .nav-actions{display:none}
  
  
  
  
  
  
}
@media(max-width:480px){
  
  
  
  
  .hero-platform-btn{width:100%;font-size:13px;text-align:center}
}



/* =========================================================
   HEADER TRANSPARENT SUR LE HERO - VERSION FINALE
   Plateforme disponible uniquement dans le Hero
========================================================= */
.site-header {
  position:absolute;
  inset:0 0 auto;
  width:100%;
  z-index:1000;
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.28);
  box-shadow:none !important;
  transition:background .35s ease,box-shadow .35s ease;
}
.site-header.header-scrolled {
  position:fixed;
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 28px rgba(6,43,91,.11) !important;
}
.site-header .nav-wrap {justify-content:space-between;}
.site-header .nav {margin-left:auto;}
.site-header .nav-actions {display:none !important;}
.site-header .nav a {text-shadow:0 1px 8px rgba(255,255,255,.65);}
.hero .hero-content {padding-top:max(135px, 11vw);}
@media(max-width:800px){
  .site-header {background:rgba(255,255,255,.16) !important;}
  .site-header .nav.open {background:rgba(255,255,255,.98);}
  .hero .hero-content {padding-top:125px;}
}
@media(max-width:480px){.hero .hero-content {padding-top:115px;}}

/* ===============================================
   FOOTER MINIMAL, ISOLÉ DES ANCIENS STYLES
   =============================================== */








/* Mascotte CTA: privilégie sa visibilité, y compris sur mobile */
.cta-box .cta-mascotte{
  display:block !important;visibility:visible !important;opacity:1 !important;
  position:relative !important;z-index:4 !important;
  width:min(100%,270px) !important;height:auto !important;
  min-height:170px;max-height:290px;object-fit:contain !important;
  justify-self:center;align-self:center;
}
@media(max-width:700px){
  
  
  
  .cta-box .cta-mascotte{width:min(72vw,225px) !important;min-height:130px;max-height:235px;}
}
@media(prefers-reduced-motion:reduce){.cta-box .cta-mascotte{animation:none !important;}}

/* FOOTER UNE SEULE LIGNE */










/* FOOTER FINAL : centre, une seule ligne, dégradé animé */









/* TRACKSOLID: FOOTER SIMPLE ET ANIMÉ, VERSION STABLE */








/* ===== CORRECTION FINALE WHATSAPP IMAGE PERSONNALISÉE ===== */





@keyframes tsMascotteFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}




/* ===========================================================
   TRACKSOLID PRO - PATCH STRUCTUREL 2026-10-12
   Regles uniques prioritaire apres anciens styles
   =========================================================== */
html,body {max-width:100%;overflow-x:clip;}
/* Better use of large screens without touching phone gutters */
@media(min-width:1100px){
  .container {width:min(1460px,calc(100% - 72px));max-width:none;}
}
/* Keep the video INSIDE its hero. Do not change the hero flow. */
.hero {position:relative!important;isolation:isolate!important;overflow:hidden!important;}
.hero-video {position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;z-index:0!important;pointer-events:none!important;}
.hero-overlay {position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;}
.hero .hero-content {position:relative!important;z-index:2!important;}
/* The four benefits must fill the entire frame; no blue unused slot. */
.trust-strip {position:relative;z-index:5;}
.trust-strip .trust-grid {
  width:min(1560px,calc(100% - 36px))!important;
  max-width:none!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:linear-gradient(105deg,#ff790d 0%,#fff 48%,#008cff 100%)!important;
  background-size:200% 100%!important;
  animation:tsBenefitFrame 9s ease-in-out infinite;
}
.trust-strip .trust-grid article {width:100%!important;min-width:0!important;min-height:92px; border-radius:0!important;}
.trust-strip .trust-grid article:first-child {border-radius:19px 0 0 19px!important;}
.trust-strip .trust-grid article:last-child {border-radius:0 19px 19px 0!important;}
@keyframes tsBenefitFrame {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(max-width:800px){
 .trust-strip .trust-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;width:calc(100% - 28px)!important;}
 .trust-strip .trust-grid article:first-child,.trust-strip .trust-grid article:last-child{border-radius:0!important;}
}
@media(max-width:480px){
 .trust-strip .trust-grid {grid-template-columns:1fr!important;}
 .trust-strip .trust-grid article {min-height:74px!important;padding:12px 16px!important;}
 .hero-video {object-position:65% center!important;}
}
/* Floating WhatsApp MUST be a sibling of footer, never its parent. */





/* Small centered animated footer, all content visible */




}

/* TRACKSOLID: footer + WhatsApp unified, desktop and mobile */
.ts-footer.ts-footer-minimal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 15px 18px;
  isolation: isolate;
  background: linear-gradient(110deg,#062b5b 0%,#0878c9 30%,#f58107 54%,#0674ba 75%,#062b5b 100%);
  background-size: 280% 100%;
  animation: tsFooterFlow 13s ease-in-out infinite;
}
.ts-footer.ts-footer-minimal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg,#00a9fd,#fff,#f58107,#00a9fd);
  background-size: 200% 100%;
  animation: tsFooterFlow 8s linear infinite;
}
.ts-footer.ts-footer-minimal .ts-one-line {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  line-height: 1.5;
  font-size: clamp(11px,1.2vw,14px);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ts-footer.ts-footer-minimal .ts-one-line span {color:#fff;font-weight:800;}
@keyframes tsFooterFlow {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Fixed contact does NOT participate in footer layout */
a.whatsapp.ts-whatsapp {
  position: fixed;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  z-index: 9999;
  top: auto;
  left: auto;
  right: 20px;
  bottom: 82px;
  width: max-content;
  max-width: calc(100vw - 40px);
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  color: #062b5b;
  text-decoration: none;
  transition: transform .2s ease;
}
a.whatsapp.ts-whatsapp:hover {transform:translateY(-3px);}
a.ts-whatsapp .wa-message {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
  margin: 0;
  padding: 11px 15px;
  background: rgba(255,255,255,.97);
  border: 1px solid #d8e7f3;
  border-radius: 15px;
  box-shadow: 0 10px 28px rgba(3,40,90,.17);
  color: #062b5b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
a.ts-whatsapp .wa-message strong {display:block;color:#e77300;font-weight:800;}
a.ts-whatsapp .wa-icon.wa-mascotte {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 86px;
  width: 86px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
a.ts-whatsapp .wa-icon.wa-mascotte img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(0,25,60,.15));
  animation: tsMascotteFloatClean 3.5s ease-in-out infinite;
}
@keyframes tsMascotteFloatClean {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width: 600px) {
  .ts-footer.ts-footer-minimal {min-height: 60px;padding:13px 12px;}
  .ts-footer.ts-footer-minimal .ts-one-line {font-size: 11px;}
  a.whatsapp.ts-whatsapp {right:10px;bottom:74px;gap:7px;max-width:calc(100vw - 20px);}
  a.ts-whatsapp .wa-message {font-size:11px;max-width:165px;padding:9px 11px;}
  a.ts-whatsapp .wa-icon.wa-mascotte {flex:0 0 64px;width:64px;height:75px;}
}
@media(prefers-reduced-motion:reduce){
 .ts-footer.ts-footer-minimal,.ts-footer.ts-footer-minimal::before,a.ts-whatsapp .wa-icon.wa-mascotte img {animation:none;}
}