/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 01 - VARIABLES - RESET - TYPOGRAPHIE
    Début du bloc
======================================================================*/


/*======================================================
01.01 - GOOGLE FONT
======================================================*/

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


/*======================================================
01.02 - VARIABLES
======================================================*/

:root{

    /*==================================================
        IDENTITÉ VISUELLE
    ==================================================*/

    --vert:#245534;
    --vert-clair:#2f6d43;
    --vert-fonce:#183b24;

    --orange:#F6A300;
    --orange-hover:#DF9100;

    --blanc:#FFFFFF;
    --noir:#222222;

    --texte:#404040;
    --texte-clair:#6D6D6D;

    --gris:#F5F5F3;
    --gris-fond:#FAFAF8;

    --bordure:#E7E7E7;


    /*==================================================
        OMBRES
    ==================================================*/

    --ombre-petite:0 6px 18px rgba(0,0,0,.08);

    --ombre-moyenne:0 12px 35px rgba(0,0,0,.10);

    --ombre-forte:0 20px 45px rgba(0,0,0,.14);


    /*==================================================
        ARRONDIS
    ==================================================*/

    --radius:18px;

    --radius-grand:28px;

    --radius-xl:40px;


    /*==================================================
        LARGEURS
    ==================================================*/

    --container:1320px;

    --container-etroit:1180px;


    /*==================================================
        TRANSITIONS
    ==================================================*/

    --transition:.30s ease;

}



/*======================================================
01.03 - RESET
======================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    font-size:18px;

    line-height:1.75;

    color:var(--texte);

    background:var(--gris-fond);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}



/*======================================================
01.04 - STRUCTURE
======================================================*/

.container{

    width:min(92%,var(--container));

    margin:auto;

}

section{

    padding:70px 0;

}

main{

    overflow:hidden;

}



/*======================================================
01.05 - TYPOGRAPHIE
======================================================*/

h1{

    color:#FFF;

    font-size:clamp(35px,3.3vw,58px);

    font-weight:800;

    line-height:1.08;

}

h2{

    color:var(--vert);

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

    font-weight:800;

    text-align:center;

    margin-bottom:25px;

}

h3{

    color:var(--vert);

    font-size:26px;

    font-weight:700;

    line-height:1.30;

}

p{

    color:var(--texte);

    line-height:1.75;

}

strong{

    color:var(--vert);

    font-weight:700;

}



/*======================================================
01.06 - INTRO DE SECTION
======================================================*/

.section-intro{

    max-width:900px;

    margin:0 auto 55px;

    text-align:center;

    font-size:20px;

    color:var(--texte-clair);

}



/*======================================================
01.07 - UTILITAIRES
======================================================*/

.text-center{

    text-align:center;

}

.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}



/*======================================================
01.08 - SÉLECTION
======================================================*/

::selection{

    background:var(--orange);

    color:#FFF;

}



/*======================================================================
    FIN BLOC 01 - VARIABLES - RESET - TYPOGRAPHIE
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 02-1 - TOPBAR - HEADER - LOGO
    Début du bloc
======================================================================*/


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

.topbar{

    width:100%;

    background:var(--vert);

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    position:relative;

    z-index:1001;

}

.topbar-container{

    width:min(92%,var(--container));

    margin:auto;

    min-height:44px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar a{

    color:#ffffff;

}

.topbar a:hover{

    color:#FFD45A;

}

.topbar .fa-solid{

    color:#FFD45A;

    width:20px;

    text-align:center;

    margin-right:8px;

}



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

#header{

    position:sticky;

    top:0;

    width:100%;

    z-index:1000;

    background:#ffffff;

    backdrop-filter:blur(8px);

    0 6px 25px rgba(0,0,0,.08);

    transition:all .30s ease;

}

.header-container{

    width:min(92%,var(--container));

    margin:auto;

    min-height:96px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}



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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    height:82px;

    width:auto;

    transition:.35s;

}

.logo:hover img{

    transform:scale(1.04);

}



/*======================================================
02.04 ZONES
======================================================*/

.header-left{

    display:flex;

    align-items:center;

}

.header-center{

    flex:1;

    display:flex;

    justify-content:center;

}

.header-right{

    display:flex;

    align-items:center;

    gap:18px;

}



/*======================================================
02.05 STICKY
======================================================*/

#header.scrolled{

    min-height:82px;

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

}

#header.scrolled .logo img{

    height:72px;

}



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

@media(max-width:992px){

.topbar{

display:none;

}

.header-container{

min-height:82px;

}

.logo img{

height:72px;

}

}


/*======================================================================
    FIN BLOC 02-1 - TOPBAR - HEADER - LOGO
======================================================================*/

/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 02-2 - NAVIGATION - BOUTONS
    Début du bloc
======================================================================*/


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

nav{

    display:flex;

    align-items:center;

}

nav ul{

    display:flex;

    align-items:center;

    gap:42px;

}

nav li{

    position:relative;

}

nav a{

    position:relative;

    display:inline-block;

    font-size:17px;

    font-weight:600;

    color:var(--vert);

    transition:var(--transition);

}

nav a:hover{

    color:var(--orange);

}


/*======================================================
02.08 SOULIGNEMENT
======================================================*/

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--orange);

    border-radius:50px;

    transition:.30s ease;

}

nav a:hover::after{

    width:100%;

}



/*======================================================
02.09 BOUTONS HEADER
======================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:18px;

}

.btn-header{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 28px;

    border-radius:50px;

    background:var(--orange);

    color:#fff;

    font-weight:700;

    font-size:16px;

    box-shadow:0 10px 25px rgba(246,163,0,.25);

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.btn-header:hover{

    background:var(--orange-hover);

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(246,163,0,.35);

}

.btn-header .fa-solid{

    color:#fff;

}



/*======================================================
02.10 EFFET LUMIÈRE
======================================================*/

.btn-header::before,
.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.80s;

}

.btn-header:hover::before,
.btn:hover::before{

    left:150%;

}



/*======================================================
02.11 BOUTON TELEPHONE
======================================================*/

.btn-header-phone{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--vert);

}

.btn-header-phone i{

    color:var(--orange);

}



/*======================================================
02.12 RESPONSIVE TABLETTE
======================================================*/

@media(max-width:1100px){

nav ul{

gap:26px;

}

.header-actions{

display:none;

}

}



/*======================================================
02.13 RESPONSIVE MOBILE
======================================================*/

@media(max-width:900px){

nav{

display:none;

}

.header-container{

justify-content:center;

}

.logo img{

height:72px;

}

}



/*======================================================================
    FIN BLOC 02-2 - NAVIGATION - BOUTONS
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 03-1 - HERO - STRUCTURE
    Début du bloc
======================================================================*/


/*======================================================
03.01 SECTION HERO
======================================================*/

#hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:610px;

    padding:20px 0;

    overflow:hidden;

    background:url("../images/fond-hero.jpg")
               center center/cover
               no-repeat;

}


/*======================================================
03.02 OVERLAY
======================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(18,48,28,.82) 0%,

        rgba(30,65,40,.60) 45%,

        rgba(30,65,40,.18) 100%

    );

}


/*======================================================
03.03 CONTENEUR
======================================================*/

.hero-container{

    position:relative;

    z-index:2;

    display:grid;

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

    align-items:center;

    gap:50px;

}


/*======================================================
03.04 COLONNES
======================================================*/

.hero-gauche{

    max-width:700px;

}

.hero-droite{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}


/*======================================================
03.05 VERSION TABLETTE
======================================================*/

@media(max-width:1200px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-gauche{

max-width:100%;

}

.hero-droite{

margin-top:30px;

}

}


/*======================================================
03.06 VERSION MOBILE
======================================================*/

@media(max-width:768px){

#hero{

min-height:auto;

padding:70px 0;

}

.hero-container{

grid-template-columns:1fr;

gap:35px;

}

}


/*======================================================================
    FIN BLOC 03-1 - HERO - STRUCTURE
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 03-2 - HERO - CONTENU GAUCHE
    Début du bloc
======================================================================*/


/*======================================================
03.07 BADGE LOCAL
======================================================*/

.hero-local{

    display:inline-flex;

    align-items:center;

    padding:12px 22px;

    border-radius:40px;

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

    backdrop-filter:blur(8px);

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;

}


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

.hero-gauche h1{

    max-width:700px;

    font-size:clamp(35px,3.3vw,58px);

    line-height:1.08;

    margin-bottom:18px;

}


/*======================================================
03.09 SLOGAN
======================================================*/

.hero-slogan{

    font-size:22px;

    font-weight:700;

    color:#ffffff;

    line-height:1.35;

    margin-bottom:14px;

}


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

.hero-intro{

    font-size:18px;

    color:#F2F2F2;

    line-height:1.65;

    margin-bottom:20px;

}


/*======================================================
03.11 LISTE DES PRESTATIONS
======================================================*/

.hero-liste{

    display:grid;

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

    gap:12px 28px;

    margin:22px 0;

}

.hero-liste li{

    display:flex;

    align-items:center;

    gap:10px;

    color:#ffffff;

    font-size:18px;

}

.hero-liste .fa-solid{

    color:#8ED081;

    margin:0;

}


/*======================================================
03.12 ZONE D'INTERVENTION
======================================================*/

.hero-zone{

    margin:20px 0 24px;

    font-size:20px;

    color:#ffffff;

}

.hero-zone strong{

    color:var(--orange);

}


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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:22px;

}

.hero-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:255px;

    padding:15px 30px;

}
/*======================================================
=        FINITIONS BOUTONS HERO                        =
======================================================*/

.hero-buttons .btn{

    transition:.25s;

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}

.hero-buttons .btn:hover{

    transform:translateY(-3px);

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

}


/*======================================================
03.14 VERSION MOBILE
======================================================*/

@media(max-width:768px){

.hero-local{

margin:auto auto 20px;

}

.hero-liste{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

align-items:stretch;

}

.hero-buttons .btn{

min-width:100%;

}

}


/*======================================================================
    FIN BLOC 03-2 - HERO - CONTENU GAUCHE
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 03-3 - HERO - PHOTO PREMIUM
    Début du bloc
======================================================================*/


/*======================================================
03.15 CONTENEUR PHOTO
======================================================*/

.hero-droite{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    position:relative;

}


/*======================================================
03.16 PHOTO
======================================================*/

.hero-droite img{

    width:100%;

    max-width:500px;

    transform:translateY(-80px);

    background:#FFFFFF;

    padding:18px;

    border-radius:28px;

    border:2px solid rgba(38,92,55,.20);

    box-shadow:

        0 18px 45px rgba(0,0,0,.22),

        0 0 0 6px rgba(255,255,255,.10);

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

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}


/*======================================================
03.17 SURVOL
======================================================*/

.hero-droite img:hover{

    transform:translateY(-85px) scale(1.015);

    border-color:rgba(246,163,0,.35);

    box-shadow:

        0 28px 60px rgba(0,0,0,.28),

        0 0 0 8px rgba(255,255,255,.15);

}


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

@media(max-width:1200px){

.hero-droite{

margin-top:20px;

}

.hero-droite img{

max-width:420px;

transform:none;

}

.hero-droite img:hover{

transform:scale(1.02);

}

}


@media(max-width:768px){

.hero-droite img{

max-width:340px;

padding:14px;

border-radius:22px;

}

}


/*======================================================================
    FIN BLOC 03-3 - HERO - PHOTO PREMIUM
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 03-4 - HERO - BADGES - ICÔNES - RESPONSIVE
    Début du bloc
======================================================================*/


/*======================================================
03.19 BADGES
======================================================*/

.hero-points{

    display:grid;

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

    gap:14px;

    margin-top:18px;

}

.hero-points div{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:58px;

    padding:14px 18px;

    border-radius:16px;

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

    backdrop-filter:blur(8px);

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

    color:#FFFFFF;

    font-size:15px;

    font-weight:600;

    transition:all .30s ease;

}

.hero-points div:hover{

    transform:translateY(-3px);

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

    border-color:rgba(246,163,0,.35);

}


/*======================================================
03.20 ICÔNES
======================================================*/

.hero-points .fa-solid{

    color:#8ED081;

    font-size:18px;

    margin:0;

    transition:transform .30s ease;

}

.hero-points div:hover .fa-solid{

    transform:scale(1.15);

}


/*======================================================
03.21 RESPONSIVE TABLETTE
======================================================*/

@media(max-width:1200px){

.hero-points{

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

max-width:650px;

margin:20px auto 0;

}

}


/*======================================================
03.22 RESPONSIVE MOBILE
======================================================*/

@media(max-width:768px){

.hero-points{

grid-template-columns:1fr;

gap:12px;

}

.hero-points div{

justify-content:center;

text-align:center;

min-height:54px;

font-size:14px;

padding:12px 16px;

}

}


/*======================================================
03.23 PETITES FINITIONS
======================================================*/

.hero-gauche{

    animation:fadeHero .8s ease;

}

.hero-droite{

    animation:fadeHero .9s ease;

}

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*======================================================================
    FIN BLOC 03-4 - HERO - BADGES - ICÔNES - RESPONSIVE
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 04-1 - PRESTATIONS - STRUCTURE
    Début du bloc
======================================================================*/


/*======================================================
04.01 GRILLE
======================================================*/

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:34px;

    align-items:stretch;

}



/*======================================================
04.02 CARTE
======================================================*/

.service-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid rgba(0,0,0,.05);

    border-radius:26px;

    box-shadow:0 14px 40px rgba(0,0,0,.08);

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

}



/*======================================================
04.03 SURVOL
======================================================*/

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(246,163,0,.35);

    box-shadow:
        0 24px 55px rgba(0,0,0,.14);

}



/*======================================================
04.04 REFLET
======================================================*/

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-20deg);

    transition:.9s;

    pointer-events:none;

}

.service-card:hover::before{

    left:160%;

}



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

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

gap:24px;

}

}


/*======================================================================
    FIN BLOC 04-1 - PRESTATIONS - STRUCTURE
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 04-2 - PRESTATIONS - IMAGES
    Début du bloc
======================================================================*/


/*======================================================
04.06 IMAGE
======================================================*/

.service-image{

    position:relative;

    overflow:hidden;

    height:220px;

    background:#e9ece8;

}



/*======================================================
04.07 IMAGE
======================================================*/

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .55s ease,
        filter .45s ease;

}



/*======================================================
04.08 DÉGRADÉ
======================================================*/

.service-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.20),

        rgba(0,0,0,.02)

    );

    transition:.35s;

}



/*======================================================
04.09 SURVOL
======================================================*/

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

    transform:scale(1.08);

    filter:brightness(1.05);

}

.service-card:hover .service-image::after{

    background:linear-gradient(

        to top,

        rgba(0,0,0,.08),

        rgba(0,0,0,0)

    );

}



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

@media(max-width:768px){

.service-image{

height:210px;

}

}


/*======================================================================
    FIN BLOC 04-2 - PRESTATIONS - IMAGES
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 04-3 - PRESTATIONS - CONTENU
    Début du bloc
======================================================================*/


/*======================================================
04.11 CONTENU
======================================================*/

.service-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}


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

.service-content h3{

    color:var(--vert);

    font-size:24px;

    font-weight:700;

    line-height:1.30;

    min-height:64px;

    margin-bottom:18px;

    transition:.30s;

}

.service-card:hover h3{

    color:var(--orange);

}


/*======================================================
04.13 TEXTE
======================================================*/

.service-content p{

    flex:1;

    color:#555;

    line-height:1.75;

    margin-bottom:25px;

}


/*======================================================
04.14 BOUTON
======================================================*/

.service-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    align-self:flex-start;

    margin-top:auto;

    padding:12px 22px;

    border-radius:40px;

    background:var(--orange);

    color:#FFFFFF;

    font-weight:700;

    transition:all .30s ease;

    box-shadow:0 8px 20px rgba(246,163,0,.25);

}

.service-link .fa-solid{

    color:#FFFFFF;

    margin:0;

}


/*======================================================
04.15 SURVOL
======================================================*/

.service-link:hover{

    background:var(--vert);

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(36,85,52,.25);

}

.service-link:hover .fa-solid{

    transform:translateX(4px);

}


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

@media(max-width:768px){

.service-content{

padding:24px;

}

.service-content h3{

min-height:auto;

font-size:22px;

}

.service-link{

width:100%;

justify-content:center;

}

}


/*======================================================================
    FIN BLOC 04-3 - PRESTATIONS - CONTENU
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 05-1 - POURQUOI NOUS CHOISIR
    Début du bloc
======================================================================*/


/*======================================================
05.01 GRILLE
======================================================*/

.avantages{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

    margin-top:40px;

}


/*======================================================
05.02 CARTE
======================================================*/

.avantages article{

    background:#FFFFFF;

    border-radius:24px;

    padding:32px;

    border-top:5px solid var(--orange);

    border:1px solid rgba(0,0,0,.05);

    box-shadow:var(--ombre-petite);

    transition:.35s;

}


.avantages article:hover{

    transform:translateY(-10px);

    box-shadow:var(--ombre-forte);

}


/*======================================================
05.03 ICÔNES
======================================================*/

.avantages .fa-solid{

    font-size:34px;

    color:var(--orange);

    margin-bottom:18px;

    transition:.35s;

}


.avantages article:hover .fa-solid{

    transform:scale(1.15);

}


/*======================================================
05.04 TITRES
======================================================*/

.avantages h3{

    color:var(--vert);

    font-size:24px;

    margin-bottom:15px;

}


/*======================================================
05.05 TEXTE
======================================================*/

.avantages p{

    color:#555;

    line-height:1.8;

}


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

@media(max-width:768px){

.avantages{

grid-template-columns:1fr;

}

}


/*======================================================================
    FIN BLOC 05-1 - POURQUOI NOUS CHOISIR
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 05-2 - A PROPOS
    Début du bloc
======================================================================*/


/*======================================================
05.07 CONTENEUR
======================================================*/

.apropos-container{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:70px;

    align-items:center;

}


/*======================================================
05.08 PHOTO
======================================================*/

.apropos-photo{

    display:flex;

    justify-content:center;

}

.apropos-photo img{

    width:100%;

    max-width:360px;

    border-radius:28px;

    border:2px solid rgba(38,92,55,.15);

    background:#FFF;

    padding:12px;

    box-shadow:var(--ombre-forte);

    transition:.35s;

}

.apropos-photo img:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 60px rgba(0,0,0,.22);

}


/*======================================================
05.09 TEXTE
======================================================*/

.apropos-texte h2{

    text-align:left;

    margin-bottom:22px;

}

.apropos-texte p{

    color:#555;

    line-height:1.9;

    margin-bottom:18px;

}


/*======================================================
05.10 LISTE
======================================================*/

.apropos-liste{

    display:grid;

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

    gap:14px;

    margin-top:30px;

}

.apropos-liste li{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 18px;

    background:#F7F8F6;

    border-radius:14px;

    border:1px solid rgba(0,0,0,.05);

    font-weight:600;

}

.apropos-liste .fa-solid{

    color:var(--orange);

    margin:0;

}


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

@media(max-width:1100px){

.apropos-container{

grid-template-columns:1fr;

text-align:center;

}

.apropos-texte h2{

text-align:center;

}

.apropos-liste{

grid-template-columns:1fr;

}

}


/*======================================================================
    FIN BLOC 05-2 - A PROPOS
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 06 - ZONE D'INTERVENTION - LEAFLET
    Début du bloc
======================================================================*/


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

#zone{

    background:#F8F8F5;

    text-align:center;

}

#zone .container{

    max-width:1200px;

}


/*======================================================
06.02 INTRODUCTION
======================================================*/

#zone h2{

    margin-bottom:20px;

}

#zone p{

    max-width:820px;

    margin:0 auto;

    line-height:1.9;

    color:#555;

}


/*======================================================
06.03 CARTES D'INFORMATION
======================================================*/

.zone-grid{

    display:grid;

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

    gap:30px;

    margin:50px 0;

}

.zone-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:35px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:var(--ombre-petite);

    transition:.35s;

}

.zone-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--ombre-forte);

}

.zone-card .fa-solid{

    font-size:40px;

    color:var(--orange);

    margin-bottom:20px;

}

.zone-card h3{

    margin-bottom:15px;

}

.zone-card p{

    margin:0;

}


/*======================================================
06.04 CONTENEUR LEAFLET
======================================================*/

#map-container{

    margin-top:60px;

}

#map-container h3{

    text-align:center;

    margin-bottom:20px;

}

#map{

    width:100%;

    height:520px;

    border-radius:24px;

    overflow:hidden;

    border:2px solid rgba(38,92,55,.12);

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

}


/*======================================================
06.05 MARQUEUR PERSONNALISÉ
======================================================*/

.custom-marker{

    background:none;

    border:none;

}

.marker-pin{

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--vert);

    border:4px solid #FFF;

    display:flex;

    align-items:center;

    justify-content:center;

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

    animation:pulse 2s infinite;

}

.marker-pin img{

    width:26px;

    height:26px;

}


/*======================================================
06.06 ANIMATION
======================================================*/

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}


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

@media(max-width:900px){

.zone-grid{

grid-template-columns:1fr;

}

#map{

height:400px;

}

}


/*======================================================================
    FIN BLOC 06 - ZONE D'INTERVENTION - LEAFLET
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 07 - CONTACT
    Début du bloc
======================================================================*/


/*======================================================
07.01 SECTION CONTACT
======================================================*/

#contact{

    background:#FFFFFF;

}


/*======================================================
07.02 GRILLE
======================================================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:45px;

}


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

.contact-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:35px;

    text-align:center;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:var(--ombre-petite);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--ombre-forte);

}


/*======================================================
07.04 ICÔNES
======================================================*/

.contact-card .fa-solid{

    font-size:34px;

    color:var(--vert);

    margin-bottom:18px;

    transition:.35s;

}

.contact-card:hover .fa-solid{

    transform:scale(1.15);

    color:var(--orange);

}


/*======================================================
07.05 TITRES
======================================================*/

.contact-card h3{

    margin-bottom:16px;

    color:var(--vert);

    font-size:24px;

}


/*======================================================
07.06 TEXTE
======================================================*/

.contact-card p{

    color:#555;

    margin-bottom:12px;

    line-height:1.8;

}

.contact-card a{

    color:var(--orange);

    font-weight:700;

    transition:.30s;

}

.contact-card a:hover{

    color:var(--vert);

}


/*======================================================
07.07 BOUTON DE CONTACT
======================================================*/

.contact-action{

    text-align:center;

    margin-top:45px;

}

.contact-action .btn{

    min-width:320px;

}


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

@media(max-width:768px){

.contact-grid{

grid-template-columns:1fr;

}

.contact-action .btn{

width:100%;

min-width:auto;

}

}


/*======================================================================
    FIN BLOC 07 - CONTACT
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 08 - FOOTER PREMIUM
    Début du bloc
======================================================================*/


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

footer{

    background:linear-gradient(
        180deg,
        var(--vert),
        var(--vert-fonce)
    );

    color:#FFFFFF;

    padding:70px 0 25px;

    position:relative;

    overflow:hidden;

}


/*======================================================
08.02 LÉGER DÉCOR
======================================================*/

footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.05),
        transparent 45%);

    pointer-events:none;

}


/*======================================================
08.03 CONTENEUR
======================================================*/

.footer-container{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:50px;

}


/*======================================================
08.04 TITRES
======================================================*/

.footer-container h3{

    color:#FFFFFF;

    font-size:24px;

    margin-bottom:22px;

}


/*======================================================
08.05 TEXTE
======================================================*/

.footer-container p,
.footer-container li{

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

    line-height:1.9;

    margin-bottom:10px;

}


/*======================================================
08.06 LIENS
======================================================*/

.footer-container a{

    color:#FFFFFF;

    transition:.30s;

}

.footer-container a:hover{

    color:var(--orange);

    padding-left:6px;

}


/*======================================================
08.07 ICÔNES
======================================================*/

.footer-container .fa-solid{

    color:var(--orange);

    margin-right:10px;

}


/*======================================================
08.08 SLOGAN
======================================================*/

.footer-slogan{

    margin-top:28px;

    font-size:34px;

    font-style:italic;

    color:#ffffff;

    font-weight:600;

    letter-spacing:.5px;

}


/*======================================================
08.09 COPYRIGHT
======================================================*/

.copyright{

    margin-top:45px;

    padding-top:25px;

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

    text-align:center;

    font-size:14px;

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

}


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

@media(max-width:900px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

gap:35px;

}

.footer-container a:hover{

padding-left:0;

}

}


/*======================================================================
    FIN BLOC 08 - FOOTER PREMIUM
======================================================================*/
/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 09 - RESPONSIVE - ANIMATIONS - FINITIONS
    Début du bloc
======================================================================*/


/*======================================================
09.01 FADE IN
======================================================*/

.fade-in{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .80s ease,

        transform .80s ease;

}

.fade-in.visible{

    opacity:1;

    transform:translateY(0);

}



/*======================================================
09.02 ANIMATIONS GENERALES
======================================================*/

img{

    transition:transform .35s ease;

}

a{

    transition:var(--transition);

}

button{

    transition:var(--transition);

}



/*======================================================
09.03 BOUTON RETOUR EN HAUT
======================================================*/

#backToTop{

    position:fixed;

    right:28px;

    bottom:28px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--vert),
        var(--vert-clair)
    );

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    transition:.25s;

    z-index:9999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    background:linear-gradient(
        135deg,
        var(--orange),
        #ffb000
    );

    transform:translateY(-6px);

}

#backToTop .fa-solid{

    color:#FFF;

    margin:0;

    font-size:22px;

}

#backToTop:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,.30);

}


/*======================================================
09.04 RESPONSIVE TABLETTE
======================================================*/

@media(max-width:1100px){

.container{

width:94%;

}

section{

padding:60px 0;

}

h2{

font-size:40px;

}

.section-intro{

font-size:18px;

}

}



/*======================================================
09.05 RESPONSIVE MOBILE
======================================================*/

@media(max-width:768px){

body{

font-size:16px;

}

section{

padding:50px 0;

}

.container{

width:92%;

}

h2{

font-size:32px;

}

.section-intro{

font-size:17px;

margin-bottom:35px;

}

#backToTop{

width:50px;

height:50px;

right:18px;

bottom:18px;

}

}



/*======================================================
09.06 IMPRESSION
======================================================*/

@media print{

.topbar,

header,

footer,

#backToTop{

display:none;

}

body{

background:#FFF;

color:#000;

}

}

/*======================================================================
    SENTINELLE NUISIBLES 42
    STYLE.CSS V7
    BLOC 10 - FINITIONS GENERALES
    Début du bloc
======================================================================*/


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

.hero-buttons .btn{

    box-shadow:0 12px 28px rgba(0,0,0,.18);

}

.hero-buttons .btn:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(246,163,0,.35);

}


.hero-droite img{

    transform:translateY(-90px);

}


.hero-droite img:hover{

    transform:translateY(-95px) scale(1.02);

}


/*======================================================
10.02 BADGES HERO
======================================================*/

.hero-points div{

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

    backdrop-filter:blur(10px);

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

}


/*======================================================
10.03 PRESTATIONS
======================================================*/

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}


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

    transform:scale(1.10);

}


/*======================================================
10.04 POURQUOI NOUS CHOISIR
======================================================*/

.avantages article{

    transition:.35s;

}

.avantages article:hover{

    transform:translateY(-8px);

    border-top-color:var(--vert);

}

.avantages article:hover i{

    transform:scale(1.15);

}


/*======================================================
10.05 CONTACT
======================================================*/

.contact-card i{

    font-size:42px;

}


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

footer{

    border-top:4px solid var(--orange);

}

.footer-slogan{

    font-size:19px;

    font-weight:600;

    color:#ffffff;

    margin-top:18px;

}


/*======================================================
10.07 LEAFLET
======================================================*/

.leaflet-popup-content{

    font-family:'Inter',sans-serif;

    text-align:center;

}

.leaflet-popup-content strong{

    color:var(--vert);

}


/*======================================================
10.08 RETOUR EN HAUT
======================================================*/

#backToTop{

    position:fixed;

    right:28px;

    bottom:28px;

    width:58px;

    height:58px;

    border-radius:50%;

    border:none;

    background:linear-gradient(
        135deg,
        var(--vert),
        var(--vert-clair)
    );

    color:#FFF;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:99999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    transform:translateY(-5px);

    background:linear-gradient(
        135deg,
        var(--orange),
        #ffb000
    );

}

#backToTop i{

    font-size:22px;

}


/*======================================================
10.09 SELECTION
======================================================*/

::selection{

    background:var(--orange);

    color:#FFF;

}


/*======================================================================
    FIN BLOC 10 - FINITIONS GENERALES
======================================================================*/

/*======================================================================
    FIN BLOC 09 - RESPONSIVE - ANIMATIONS - FINITIONS
======================================================================*/

/*==========================================================
   ACCUEIL — BOUTONS DU HERO
   Alignement visuel avec la page Frelons
   ==========================================================*/

#hero .hero-buttons .btn {

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:12px !important;

    min-width:240px !important;

    padding:18px 42px !important;

    border-radius:999px !important;

    font-size:1rem !important;

    font-weight:700 !important;

    text-decoration:none !important;

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

}


#hero .hero-buttons .btn-orange {

    background:var(--orange) !important;

    color:#fff !important;

}


#hero .hero-buttons .btn-green {

    background:var(--vert) !important;

    color:#fff !important;

}
/* ==========================================================
   CORRECTION PHOTO HERO SUR MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .hero-droite img {
        transform: translateY(0);
    }

    .hero-droite img:hover {
        transform: translateY(0);
    }

}
/* ==========================================================
   PHOTO "MA MÉTHODE" — AFFICHER LE VISAGE
   ========================================================== */

.service-card:last-child .service-image img {
    object-position: center top;
}