/* ==========================================================
   VIDEOSURVEILLANCE CANNES — HOME PREMIUM V2
   uniquement design
   noir / blanc / rouge discret
   ========================================================== */

:root{
    --black:#000;
    --black2:#070707;
    --black3:#101010;
    --card:#111;
    --white:#fff;
    --muted:#aaa;
    --border:rgba(255,255,255,.10);
    --border2:rgba(255,255,255,.19);
    --red:#e21b1b;
}


/* BASE */

body{
    background:
        radial-gradient(circle at 50% 0,
            rgba(255,255,255,.035),
            transparent 28%),
        #030303 !important;

    color:#fff;
}

a{
    transition:
        color .2s ease,
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}


/* ==========================================================
   HEADER ORIGINAL CONSERVE
   ========================================================== */

.navigation{
    height:88px;
    padding:0 34px !important;

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

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

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

    backdrop-filter:blur(14px);

    gap:25px;
}


/* LOGO ORIGINAL */

.navigation > a:first-child{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.navigation .logo{
    width:112px !important;
    max-height:70px;
    object-fit:contain;

    filter:
        drop-shadow(0 4px 16px rgba(255,255,255,.08));
}


/* NAV */

.nav-links{
    gap:7px !important;
    justify-content:flex-end !important;
}

.nav-links a{
    padding:10px 14px;

    border-radius:9px;

    color:#d7d7d7 !important;

    font-size:.92rem !important;
    font-weight:650 !important;
    letter-spacing:.025em;
}

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

    background:
        rgba(255,255,255,.07) !important;

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


/* ACTIONS HEADER */

.nav-actions{
    gap:9px !important;
    flex-shrink:0;
}

.header-phone,
.header-quote{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:38px;

    padding:0 14px;

    border-radius:8px;

    font-size:.82rem;
    font-weight:700;

    white-space:nowrap;
}

.header-phone{
    color:#fff !important;

    background:#0b0b0b;

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

.header-phone:hover{
    border-color:rgba(255,255,255,.40);

    background:#161616;
}

.header-quote{
    color:#fff !important;

    background:#b91515;

    border:1px solid #d92525;
}

.header-quote:hover{
    background:#dc2020;

    transform:translateY(-1px);
}


/* drapeau */

.lang-toggle{
    width:34px !important;
    height:24px !important;

    padding:2px;

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

    border-radius:6px;

    overflow:hidden;
}


/* ==========================================================
   HERO
   IMPORTANT : AUCUNE URL D'IMAGE ICI
   L'IMAGE ORIGINALE .hero RESTE INTACTE
   ========================================================== */

.hero{
    min-height:600px !important;

    margin-top:88px !important;

    padding:
        clamp(40px,7vw,90px) !important;

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

    text-align:left !important;

    background-position:center top !important;

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

    box-shadow:
        inset 0 -60px 100px rgba(0,0,0,.28);
}


/* voile sur la vraie photo */

.hero::before{
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.89) 0%,
            rgba(0,0,0,.70) 38%,
            rgba(0,0,0,.34) 68%,
            rgba(0,0,0,.15) 100%
        ) !important;
}


.hero h1{
    max-width:780px;

    margin:0 0 22px !important;

    font-size:
        clamp(2.8rem,5.3vw,4.9rem) !important;

    line-height:1.02;

    letter-spacing:-.045em;

    text-shadow:
        0 5px 30px rgba(0,0,0,.85) !important;
}


.hero p{
    max-width:780px !important;

    margin-bottom:28px !important;

    color:#e1e1e1;

    font-size:
        clamp(1.05rem,1.8vw,1.24rem) !important;

    line-height:1.75;
}


.hero strong{
    color:#fff;
}


.hero .btn{
    margin:0 !important;

    padding:14px 24px !important;

    background:#fff !important;
    color:#070707 !important;

    border-radius:9px !important;

    font-weight:750;

    box-shadow:
        0 14px 35px rgba(0,0,0,.30);
}


.hero .btn:hover{
    background:#e8e8e8 !important;

    transform:translateY(-3px) !important;

    box-shadow:
        0 18px 42px rgba(0,0,0,.48);
}


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

.about,
.services,
.faq,
.experience,
.image-grid-section,
.quote-section{
    position:relative;

    max-width:1180px !important;

    margin:36px auto !important;

    padding:
        clamp(32px,4vw,55px) !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,18,18,.97),
            rgba(7,7,7,.98)
        );

    border:
        1px solid var(--border);

    border-radius:18px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 24px 60px rgba(0,0,0,.27);

    overflow:hidden;
}


/* petite lumière blanche très discrète */

.about::before,
.services::before,
.faq::before,
.experience::before,
.image-grid-section::before,
.quote-section::before{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-190px;
    top:-220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.055),
            transparent 68%
        );

    pointer-events:none;
}


/* TITRES */

h2{
    color:#fff !important;

    font-size:
        clamp(1.8rem,3vw,2.45rem) !important;

    line-height:1.18;

    letter-spacing:-.025em;
}


h2::after{
    content:"";

    display:block;

    width:48px;
    height:3px;

    margin:15px auto 0;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #fff,
            #a00
        );
}


h3{
    color:#fff !important;
}


/* ==========================================================
   FORMULAIRE DEVIS
   ========================================================== */

.quote-section{
    border-color:
        rgba(255,255,255,.14);
}


.quote-section form{
    margin-top:25px;

    padding:
        clamp(22px,3vw,36px);

    background:#090909;

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

    border-radius:16px;
}


.form-group input,
.form-group select,
.form-group textarea{
    background:#050505 !important;

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

    border-radius:9px !important;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    background:#0b0b0b !important;

    border-color:
        rgba(255,255,255,.45) !important;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.055) !important;
}


.quote-section .btn{
    min-width:260px !important;

    padding:15px 30px !important;

    background:#b91515 !important;

    color:#fff !important;

    border-radius:9px !important;

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


.quote-section .btn:hover{
    background:#dc2020 !important;
    color:#fff !important;
}


/* ==========================================================
   IMAGE GRID
   caméra-surveillance.webp reste une image de contenu normale
   ========================================================== */

.image-grid{
    gap:18px !important;
}


.image-grid img{
    height:230px !important;

    border-radius:13px !important;

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

    filter:
        saturate(.90)
        contrast(1.035);

    box-shadow:
        0 16px 38px rgba(0,0,0,.30);

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


.image-grid img:hover{
    transform:
        translateY(-5px)
        scale(1.012) !important;

    filter:
        saturate(1)
        contrast(1.06);

    box-shadow:
        0 22px 48px rgba(0,0,0,.48) !important;
}


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

.service-grid{
    gap:18px !important;
}


.service-card{
    padding:20px !important;

    background:
        linear-gradient(
            145deg,
            #121212,
            #080808
        ) !important;

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

    border-radius:14px !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.25);

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


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

    border-color:
        rgba(255,255,255,.22);

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


.service-card img{
    height:210px !important;

    border-radius:11px !important;
}


/* boutons cartes */

.service-card .btn,
.about .btn,
.services .btn,
.experience .btn{
    margin-top:20px !important;

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

    border-radius:8px !important;

    background:#151515 !important;

    color:#fff !important;
}


.service-card .btn:hover,
.about .btn:hover,
.services .btn:hover,
.experience .btn:hover{
    background:#fff !important;

    color:#050505 !important;
}


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

.faq-item{
    margin-bottom:10px !important;

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

    border-radius:11px !important;

    overflow:hidden;
}


.faq-question{
    padding:17px 19px !important;

    background:#101010 !important;

    border-radius:0 !important;

    font-size:1.04rem !important;
}


.faq-question:hover{
    background:#191919 !important;
}


.faq-item.active .faq-question{
    background:#161616 !important;

    border-left:3px solid #b91515;
}


.faq-answer{
    padding:20px !important;

    background:#080808 !important;

    color:#bfbfbf !important;

    border-radius:0 !important;
}


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

footer{
    max-width:none !important;
    width:100% !important;

    margin-top:60px !important;

    padding:48px 25px !important;

    background:#000 !important;

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


footer .logo{
    width:105px !important;

    opacity:.9;
}


footer a{
    color:#ccc !important;
}


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


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

@media(max-width:900px){

    .navigation{
        padding:0 18px !important;
    }

    .navigation .logo{
        width:90px !important;
    }

    .header-phone{
        display:none;
    }

    .hero{
        padding:
            50px 30px !important;
    }

}


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

@media(max-width:768px){

    .navigation{
        height:70px;

        padding:
            0 14px !important;
    }

    .navigation .logo{
        width:78px !important;
    }

    .header-phone,
    .header-quote{
        display:none !important;
    }

    .hamburger{
        display:block !important;

        margin-left:5px;

        color:#fff !important;
    }


    .nav-links{
        top:70px !important;

        padding:14px !important;

        gap:5px !important;

        background:
            rgba(0,0,0,.98) !important;

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


    .nav-links a{
        width:100%;

        padding:12px 14px;

        text-align:left;
    }


    .hero{
        min-height:480px !important;

        margin-top:70px !important;

        padding:
            40px 22px !important;

        background-position:
            58% top !important;
    }


    .hero::before{
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.87),
                rgba(0,0,0,.54)
            ) !important;
    }


    .hero h1{
        font-size:
            clamp(2.25rem,11vw,3.3rem) !important;
    }


    .hero p{
        font-size:
            .98rem !important;

        line-height:1.62;
    }


    .about,
    .services,
    .faq,
    .experience,
    .image-grid-section,
    .quote-section{
        margin:
            16px 10px !important;

        padding:
            26px 17px !important;

        border-radius:14px;
    }


    .image-grid img,
    .service-card img{
        height:210px !important;
    }

}


/* très petit mobile */

@media(max-width:480px){

    .hero{
        min-height:430px !important;
    }

    .hero h1{
        font-size:
            2.15rem !important;
    }

    h2{
        font-size:
            1.65rem !important;
    }

}


/* ACCESSIBILITE */

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

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

}