/* =========================================================
   MPS DARK PREMIUM
   Noir / anthracite / bleu froid / blanc
   ========================================================= */

:root{
    --black:#050505;
    --black2:#090b0e;
    --black3:#0d1116;
    --panel:#10151b;

    --white:#f7f9fb;
    --soft:#c3cbd3;
    --muted:#8995a1;

    --blue:#3b82f6;
    --blue2:#60a5fa;

    --line:rgba(255,255,255,.09);

    --shadow:0 22px 65px rgba(0,0,0,.38);
}


/* ================= GLOBAL ================= */

html{
    background:var(--black) !important;
}

body{
    background:var(--black) !important;
    color:var(--white) !important;
}

main{
    background:var(--black) !important;
}

p{
    color:var(--soft);
}


/* ================= TOPBAR ================= */

.topbar{
    background:#020202 !important;
    color:#8f99a4 !important;

    border-bottom:1px solid rgba(255,255,255,.05) !important;
}

.topbar a{
    color:#b5bec7 !important;
}


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

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

    background:rgba(5,5,5,.96) !important;

    border-bottom:1px solid rgba(255,255,255,.08) !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.30) !important;

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}

.nav{
    min-height:66px !important;

    display:flex !important;
    align-items:center !important;

    gap:18px !important;
}


/* LOGO */

.brand{
    min-width:0 !important;
}

.brand-logo{
    width:auto !important;
    max-width:48px !important;
    height:44px !important;

    object-fit:contain !important;
}

.brand-copy{
    min-width:0 !important;
}

.brand-copy strong{
    color:#ffffff !important;
    font-size:14px !important;
}

.brand-copy small{
    color:#798592 !important;
    font-size:10px !important;
}


/* MENU */

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

    gap:17px !important;
}

.nav-links a{
    color:#c6ced6 !important;

    font-size:13px !important;
    font-weight:500 !important;

    text-shadow:none !important;

    white-space:nowrap !important;

    transition:
        color .18s ease,
        opacity .18s ease !important;
}

.nav-links a:hover,
.nav-links a[aria-current="page"]{
    color:#ffffff !important;
}

.nav-links a[aria-current="page"]{
    position:relative;
}

.nav-links a[aria-current="page"]::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-10px;

    height:2px;

    border-radius:4px;

    background:var(--blue);
}


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

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

    flex-shrink:0 !important;

    gap:8px !important;

    margin-left:auto !important;
}


/* LANGUES */

.lang-switch{
    flex-shrink:0 !important;
}

.lang-switch a{
    color:#adb7c1 !important;
}


/* ================= DEVIS GRATUIT ================= */

.nav-cta{
    position:static !important;

    inset:auto !important;

    display:inline-flex !important;

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

    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;

    height:34px !important;
    min-height:34px !important;

    padding:0 13px !important;
    margin:0 !important;

    border:
        1px solid rgba(96,165,250,.55) !important;

    border-radius:999px !important;

    background:
        rgba(59,130,246,.08) !important;

    color:#dbeafe !important;

    font-size:12px !important;
    font-weight:600 !important;

    line-height:32px !important;

    white-space:nowrap !important;

    box-shadow:none !important;

    transform:none !important;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.nav-cta:hover{
    background:var(--blue) !important;

    border-color:var(--blue) !important;

    color:#fff !important;

    transform:translateY(-1px) !important;
}


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

.hero{
    position:relative !important;

    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(59,130,246,.13),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #080b0f 60%,
            #0c1118 100%
        ) !important;

    color:#fff !important;

    border-bottom:
        1px solid rgba(255,255,255,.07) !important;
}

.hero-grid{
    display:grid !important;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(340px,.95fr) !important;

    gap:52px !important;

    align-items:center !important;

    padding-top:65px !important;
    padding-bottom:65px !important;
}

.hero-grid > *{
    min-width:0 !important;
}


/* TEXTE HERO */

.hero .eyebrow{
    color:var(--blue2) !important;
}

.hero h1{
    color:#ffffff !important;

    max-width:780px !important;

    margin:
        12px 0
        22px !important;

    font-size:
        clamp(40px,4.8vw,68px) !important;

    line-height:1.03 !important;

    letter-spacing:-.045em !important;

    font-weight:700 !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
}

.hero h1 em{
    color:var(--blue2) !important;

    font-style:normal !important;
}

.hero .lead{
    color:#b3bec8 !important;

    max-width:690px !important;

    font-size:17px !important;
    line-height:1.65 !important;
}


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

.hero-media{
    position:relative !important;

    overflow:visible !important;

    min-width:0 !important;
}

.hero-media .photo{
    display:block !important;

    width:100% !important;
    height:auto !important;

    aspect-ratio:16 / 10 !important;

    object-fit:cover !important;

    border-radius:22px !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 30px 75px rgba(0,0,0,.48) !important;

    transform:none !important;
}


/* watermark discret */

.hero-media .watermark{
    opacity:.08 !important;
}


/* BADGE HERO */

.hero-badge{
    background:
        rgba(8,11,15,.88) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 14px 35px rgba(0,0,0,.35) !important;

    backdrop-filter:blur(12px);

    color:#fff !important;
}

.hero-badge strong{
    color:#ffffff !important;
}

.hero-badge small{
    color:#9ba7b3 !important;
}


/* ================= BOUTONS ================= */

.btn{
    border-radius:999px !important;

    font-weight:600 !important;

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        background .20s ease !important;
}

.btn.primary{
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        ) !important;

    color:#fff !important;

    border-color:transparent !important;

    box-shadow:
        0 10px 25px rgba(37,99,235,.22) !important;
}

.btn.primary:hover{
    transform:translateY(-2px) !important;

    box-shadow:
        0 16px 34px rgba(37,99,235,.30) !important;
}

.btn.secondary{
    background:
        rgba(255,255,255,.035) !important;

    color:#dce3ea !important;

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


/* ================= TRUST ROW ================= */

.trust-row{
    border-color:
        rgba(255,255,255,.08) !important;
}

.trust-row span{
    color:#99a5b1 !important;
}


/* ================= SECTIONS ================= */

.section{
    background:var(--black) !important;

    color:var(--white) !important;

    border-color:var(--line) !important;
}

.section.alt{
    background:var(--black2) !important;
}

.section h2,
.section h3{
    color:#f8fafc !important;
}

.section p{
    color:#aab5bf !important;
}

.eyebrow{
    color:var(--blue2) !important;
}


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

.feature{
    gap:52px !important;
}

.feature-media img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-height:440px !important;

    object-fit:cover !important;

    border-radius:20px !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    box-shadow:var(--shadow) !important;

    transition:
        transform .35s ease,
        border-color .35s ease !important;
}

.feature-media:hover img{
    transform:translateY(-3px) !important;

    border-color:
        rgba(96,165,250,.28) !important;
}


/* ================= CARTES ================= */

.card{
    overflow:hidden !important;

    background:
        linear-gradient(
            145deg,
            #101419,
            #0a0d11
        ) !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-radius:18px !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.22) !important;

    transition:
        transform .27s ease,
        border-color .27s ease,
        box-shadow .27s ease !important;
}

.card:hover{
    transform:translateY(-5px) !important;

    border-color:
        rgba(96,165,250,.25) !important;

    box-shadow:
        0 26px 55px rgba(0,0,0,.38) !important;
}

.card-media{
    overflow:hidden !important;
}

.card-media img{
    transition:
        transform .45s ease !important;
}

.card:hover .card-media img{
    transform:scale(1.025) !important;
}

.card-body h3{
    color:#fff !important;
}

.card-body p{
    color:#9faab5 !important;
}

.text-link{
    color:var(--blue2) !important;
}


/* ================= FAQ ================= */

.faq details{
    background:#0d1116 !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    color:#fff !important;
}

.faq summary{
    color:#fff !important;
}

.faq p{
    color:#aab5bf !important;
}


/* ================= SEO / MARQUES ================= */

.mps-seo-local,
.mps-marques-plus,
.mps-marques{
    background:#090c10 !important;

    color:#fff !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-radius:18px !important;

    padding:28px !important;

    margin:
        30px auto !important;
}

.mps-seo-local h2,
.mps-marques-plus h2,
.mps-marques h2{
    color:#fff !important;
}

.mps-local-links a{
    display:inline-flex !important;

    margin:
        5px 4px !important;

    padding:
        7px 11px !important;

    border:
        1px solid rgba(96,165,250,.20) !important;

    border-radius:999px !important;

    background:
        rgba(59,130,246,.05) !important;

    color:#a9ccff !important;

    font-size:13px !important;

    transition:
        background .18s ease,
        border-color .18s ease !important;
}

.mps-local-links a:hover{
    background:
        rgba(59,130,246,.13) !important;

    border-color:
        rgba(96,165,250,.45) !important;
}


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

.cta-box{
    background:
        linear-gradient(
            135deg,
            #0f1823,
            #0a0d11
        ) !important;

    border:
        1px solid rgba(96,165,250,.16) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.30) !important;
}


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

.footer{
    background:#020202 !important;

    color:#aab3bd !important;

    border-top:
        1px solid rgba(255,255,255,.07) !important;
}

.footer h3{
    color:#fff !important;
}

.footer a{
    color:#b8c3cd !important;
}

.footer a:hover{
    color:#fff !important;
}


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

@media(max-width:1050px){

    .nav-links{
        gap:11px !important;
    }

    .nav-links a{
        font-size:12px !important;
    }

    .nav-cta{
        padding:
            0 10px !important;

        font-size:11px !important;
    }
}


@media(max-width:900px){

    .hero-grid{
        grid-template-columns:
            1fr !important;

        gap:34px !important;

        padding-top:42px !important;
        padding-bottom:48px !important;
    }

    .hero h1{
        font-size:
            clamp(34px,9vw,48px) !important;

        line-height:1.06 !important;

        letter-spacing:-.035em !important;

        overflow-wrap:break-word !important;
    }

    .hero-media .photo{
        aspect-ratio:16 / 10 !important;
    }

    .nav-cta{
        height:32px !important;
        min-height:32px !important;

        line-height:30px !important;
    }
}