/******************************************************************
    STYLE PRESTATIONS
    SENTINELLE NUISIBLES 42
    VERSION FINALE

    BLOC 1
    VARIABLES - RESET - BASE
******************************************************************/

:root{

    /* Couleurs */

    --vert:#2E5E3E;
    --vert-fonce:#23482F;
    --vert-clair:#4C7B5B;

    --orange:#F4A100;
    --orange-clair:#FFD15C;

    --blanc:#FFFFFF;

    --fond:#F7F8F5;

    --gris:#EFEFEF;

    --texte:#505050;

    --titre:#202020;

    /* Conteneur */

    --container:1220px;

    /* Rayons */

    --radius:20px;

    --radius-small:14px;

    --radius-large:30px;

    /* Ombres */

    --shadow-soft:
        0 10px 30px rgba(0,0,0,.06);

    --shadow:
        0 20px 50px rgba(0,0,0,.10);

    --shadow-hover:
        0 30px 70px rgba(0,0,0,.18);

    /* Animations */

    --transition:.35s ease;

}


/***************************************************************
RESET
****************************************************************/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Montserrat,Arial,sans-serif;

font-size:17px;

line-height:1.8;

color:var(--texte);

background:white;

overflow-x:hidden;

}


/***************************************************************
CONTAINER
****************************************************************/

.container{

max-width:var(--container);

margin:auto;

padding-left:30px;

padding-right:30px;

}


/***************************************************************
SECTIONS
****************************************************************/

section{

position:relative;

padding:65px 0;

}

section:nth-child(even){

background:var(--fond);

}


/***************************************************************
TYPOGRAPHIE
****************************************************************/

h1{

font-size:clamp(2.8rem,5vw,4.4rem);

line-height:1.1;

font-weight:800;

letter-spacing:-1px;

margin-bottom:28px;

}

h2{

font-size:clamp(2rem,4vw,3rem);

line-height:1.2;

font-weight:800;

color:var(--vert);

text-align:center;

margin-bottom:22px;

}

h3{

font-size:1.55rem;

font-weight:700;

color:var(--vert);

margin-bottom:18px;

}

h4{

font-size:1.2rem;

font-weight:700;

margin-bottom:12px;

color:var(--vert);

}

p{

margin-bottom:20px;

color:var(--texte);

}

.section-intro{

max-width:920px;

margin:0 auto 55px;

text-align:center;

font-size:1.15rem;

line-height:2;

}


/***************************************************************
LIENS
****************************************************************/

a{

text-decoration:none;

transition:var(--transition);

color:inherit;

}


/***************************************************************
IMAGES
****************************************************************/

img{

display:block;

max-width:100%;

height:auto;

}

.image-arrondie{

border-radius:var(--radius-large);

box-shadow:var(--shadow);

}


/***************************************************************
BOUTONS
****************************************************************/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:16px 34px;

border-radius:999px;

font-weight:700;

transition:var(--transition);

}

.btn-orange{

background:var(--orange);

color:white;

}

.btn-orange:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

.btn-green{

background:var(--vert);

color:white;

}

.btn-green:hover{

background:var(--vert-fonce);

transform:translateY(-4px);

box-shadow:var(--shadow);

}
/******************************************************************
    BLOC 2
    HERO - BREADCRUMB - BANDEAU - SOMMAIRE
******************************************************************/

/***************************************************************
HERO
****************************************************************/

.hero-prestation{

position:relative;

display:flex;

align-items:center;

min-height:72vh;

background-size:cover;

background-position:center;

background-repeat:no-repeat;

overflow:hidden;

color:#fff;

}

.hero-prestation::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(18,25,20,.88) 0%,
rgba(18,25,20,.72) 45%,
rgba(18,25,20,.38) 100%
);

z-index:1;

}

.hero-prestation .overlay{

display:none;

}

.hero-prestation .container{

position:relative;

z-index:2;

padding-top:150px;

padding-bottom:90px;

}

.hero-prestation h1{

max-width:900px;

color:#fff;

margin-bottom:28px;

text-shadow:

0 5px 18px rgba(0,0,0,.35);

}

.hero-slogan{

max-width:760px;

font-size:1.18rem;

line-height:2;

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

margin-bottom:40px;

}


/***************************************************************
FIL D'ARIANE
****************************************************************/

.breadcrumb{

display:flex;

align-items:center;

gap:10px;

margin-bottom:28px;

font-size:.95rem;

}

.breadcrumb a{

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

}

.breadcrumb a:hover{

color:var(--orange);

}

.breadcrumb span{

font-weight:600;

color:#fff;

}

.breadcrumb i{

font-size:.70rem;

opacity:.7;

}


/***************************************************************
BOUTONS HERO
****************************************************************/

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:20px;

}

.hero-buttons .btn{

min-width:240px;

font-size:1rem;

}


/***************************************************************
BANDEAU DE CONFIANCE
****************************************************************/

.bandeau-confiance{

background:#fff;

margin-top:-45px;

position:relative;

z-index:20;

border-radius:24px;

box-shadow:var(--shadow);

}

.confiance-grid{

display:grid;

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

gap:0;

}

.confiance-item{

padding:28px;

text-align:center;

border-right:1px solid #ececec;

}

.confiance-item:last-child{

border-right:none;

}

.confiance-item i{

font-size:2rem;

color:var(--orange);

margin-bottom:12px;

display:block;

}

.confiance-item strong{

display:block;

font-size:1.05rem;

color:var(--vert);

margin-bottom:5px;

}

.confiance-item span{

font-size:.95rem;

color:#666;

}


/***************************************************************
SOMMAIRE
****************************************************************/

.sommaire{

padding:75px 0;

background:var(--fond);

}

.sommaire h2{

margin-bottom:45px;

}

.sommaire-grid{

display:grid;

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

gap:22px;

}

.sommaire-grid a{

display:flex;

align-items:center;

gap:14px;

padding:20px;

background:#fff;

border-radius:20px;

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

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

font-weight:700;

color:var(--vert);

transition:var(--transition);

min-height:90px;

}

.sommaire-grid a:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

border-left-width:9px;

}

.sommaire-grid i{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(244,161,0,.12);

color:var(--orange);

font-size:1.15rem;

flex-shrink:0;

}

.sommaire-grid a:hover i{

background:var(--orange);

color:#fff;

transform:rotate(8deg);

}


/***************************************************************
RESPONSIVE
****************************************************************/

@media(max-width:1100px){

.hero-prestation{

min-height:60vh;

}

.confiance-grid{

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

}

.sommaire-grid{

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

}

}

@media(max-width:768px){

.hero-prestation{

min-height:52vh;

}

.hero-prestation .container{

padding-top:110px;

padding-bottom:70px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.confiance-grid{

grid-template-columns:1fr;

}

.confiance-item{

border-right:none;

border-bottom:1px solid #ececec;

}

.confiance-item:last-child{

border-bottom:none;

}

.sommaire-grid{

grid-template-columns:1fr;

}

}
/******************************************************************
    BLOC 3
    PRESENTATION - CARTES - DEUX COLONNES
******************************************************************/

/***************************************************************
PRESENTATION
****************************************************************/

#presentation .container{

max-width:1050px;

}

#presentation p{

font-size:1.12rem;

line-height:2;

text-align:center;

}


/***************************************************************
GRILLE DES CARTES
****************************************************************/

.cards{

display:grid;

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

gap:35px;

margin-top:55px;

align-items:stretch;

}

.service-card{

background:#fff;

border-radius:22px;

overflow:hidden;

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

transition:var(--transition);

display:flex;

flex-direction:column;

height:100%;

}

.service-card:hover{

transform:translateY(-10px);

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

}


.service-image{

    overflow:hidden;

    height:280px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.service-card:hover img{

transform:scale(1.08);

}
.illustration-frelon{

    object-fit:contain !important;

    padding:10px;

}

.service-content{

padding:30px;

flex:1;

display:flex;

flex-direction:column;

}

.service-content h3{

margin-bottom:18px;

text-align:center;

}

.service-content p{

font-size:1rem;

line-height:1.8;

}


/***************************************************************
DEUX COLONNES
****************************************************************/

.deux-colonnes{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.deux-colonnes img{

width:100%;

border-radius:28px;

box-shadow:var(--shadow);

}

.deux-colonnes h2{

text-align:left;

margin-bottom:25px;

}

.deux-colonnes p{

text-align:left;

}


/***************************************************************
LISTE CHECK
****************************************************************/

.liste-check{

list-style:none;

margin-top:35px;

}

.liste-check li{

position:relative;

padding-left:38px;

margin-bottom:18px;

font-size:1.05rem;

}

.liste-check li::before{

content:"✓";

position:absolute;

left:0;

top:1px;

width:24px;

height:24px;

border-radius:50%;

background:var(--orange);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:.80rem;

font-weight:bold;

}


/***************************************************************
ENCADRE INFORMATION
****************************************************************/

.info-box{

padding:90px 0;

background:transparent;

}

.conseil-box{

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

border-radius:28px;

padding:55px;

color:white;

text-align:center;

box-shadow:var(--shadow);

}

.conseil-box h2{

color:white;

margin-bottom:25px;

}

.conseil-box i{

color:var(--orange);

margin-right:12px;

}

.conseil-box p{

color:white;

font-size:1.15rem;

line-height:2;

max-width:900px;

margin:auto;

}


/***************************************************************
RESPONSIVE
****************************************************************/

@media(max-width:1100px){

.cards{

grid-template-columns:1fr 1fr;

}

.deux-colonnes{

grid-template-columns:1fr;

gap:40px;

}

.deux-colonnes h2,

.deux-colonnes p{

text-align:center;

}

}

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

}

.service-image{

height:220px;

}

.conseil-box{

padding:35px 25px;

}

.conseil-box p{

font-size:1.05rem;

}

}
/******************************************************************
    BLOC 4
    TIMELINE - ETAPES - MATERIEL - CONSEIL
******************************************************************/

/***************************************************************
TIMELINE
****************************************************************/

.timeline{

position:relative;

max-width:980px;

margin:70px auto 0;

padding-left:35px;

}

.timeline::before{

content:"";

position:absolute;

left:17px;

top:0;

bottom:0;

width:4px;

background:linear-gradient(
to bottom,
var(--orange),
var(--vert)
);

border-radius:20px;

}

.timeline-item{

position:relative;

padding:0 0 45px 45px;

}

.timeline-item:last-child{

padding-bottom:0;

}

.timeline-item::before{

content:"";

position:absolute;

left:-1px;

top:6px;

width:36px;

height:36px;

border-radius:50%;

background:var(--orange);

border:6px solid white;

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

}

.timeline-item h3{

margin-bottom:12px;

font-size:1.45rem;

color:var(--vert);

}

.timeline-item p{

margin:0;

line-height:1.9;

}


/***************************************************************
ETAPES
****************************************************************/

.etapes{

display:grid;

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

gap:25px;

margin-top:60px;

}

.etape{

background:white;

border-radius:24px;

padding:35px 25px;

text-align:center;

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

transition:var(--transition);

position:relative;

overflow:hidden;

}

.etape:hover{

transform:translateY(-10px);

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

}

.etape span{

display:flex;

align-items:center;

justify-content:center;

width:65px;

height:65px;

margin:0 auto 20px;

border-radius:50%;

background:var(--orange);

color:white;

font-size:1.6rem;

font-weight:800;

}

.etape h3{

font-size:1.25rem;

margin-bottom:15px;

}

.etape p{

font-size:.98rem;

margin:0;

}


/***************************************************************
MATERIEL
****************************************************************/

.avantages{

display:grid;

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

gap:30px;

margin-top:60px;

}

.avantages article{

background:white;

padding:35px;

border-radius:24px;

text-align:center;

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

transition:var(--transition);

}

.avantages article:hover{

transform:translateY(-8px);

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

}

.avantages i{

font-size:2.5rem;

color:var(--orange);

margin-bottom:20px;

}

.avantages h3{

font-size:1.3rem;

margin-bottom:15px;

}

.avantages p{

margin:0;

font-size:1rem;

}


/***************************************************************
CONSEIL PROFESSIONNEL
****************************************************************/

.conseil-pro{

display:grid;

grid-template-columns:320px 1fr;

gap:60px;

align-items:center;

margin-top:70px;

padding:50px;

background:white;

border-radius:30px;

box-shadow:var(--shadow);
}
/*==========================================================
  PHOTO CONSEIL
==========================================================*/

.conseil-photo{

    width:320px;
    height:320px;

    margin:auto;

    overflow:hidden;

    border-radius:50%;

    border:8px solid #fff;

    box-shadow:var(--shadow);

.conseil-photo img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    /* Ajuste le visage */
    object-position:center 8%;

}
}

.conseil-texte h2{

text-align:left;

margin-bottom:25px;

}

.conseil-texte p{

line-height:2;

}

.signature{

margin-top:35px;

padding-top:25px;

border-top:2px solid #ececec;

font-size:1rem;

color:#777;

}


/***************************************************************
RESPONSIVE
****************************************************************/

@media(max-width:1200px){

.etapes{

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

}

}

@media(max-width:992px){

.avantages{

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

}

.conseil-pro{

grid-template-columns:1fr;

text-align:center;

}

.conseil-texte h2{

text-align:center;

}

.timeline{

padding-left:20px;

}

}

@media(max-width:768px){

.timeline{

padding-left:10px;

}

.timeline::before{

left:14px;

}

.timeline-item{

padding-left:40px;

}

.timeline-item::before{

width:30px;

height:30px;

}

.etapes{

grid-template-columns:1fr;

}

.avantages{

grid-template-columns:1fr;

}

.conseil-photo img{

width:220px;

height:220px;

}

}
/******************************************************************
    BLOC 5
    FAQ - LEAFLET - CTA - FOOTER - ANIMATIONS
******************************************************************/

/***************************************************************
FAQ
****************************************************************/

.faq{

max-width:950px;

margin:70px auto 0;

}

.faq-item{

background:white;

border-radius:22px;

margin-bottom:18px;

overflow:hidden;

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

transition:var(--transition);

}

.faq-item:hover{

box-shadow:var(--shadow);

}

.faq-question{

width:100%;

background:white;

border:none;

cursor:pointer;

padding:24px 30px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:1.08rem;

font-weight:700;

color:var(--vert);

text-align:left;

}

/*======================================
ICÔNE FAQ
======================================*/

.faq-question i{

font-size:1.4rem;

color:var(--orange);

transition:transform .30s ease;

flex-shrink:0;

}

.faq-item.active .faq-question i{

transform:rotate(45deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

    background:white;

    padding:0 30px;

}

.faq-item.active .faq-answer{

    max-height:500px;

    padding:0 30px 25px;

}


.faq-answer p{

padding:0 30px 30px;

margin:0;

line-height:1.9;

}


/***************************************************************
LEAFLET
****************************************************************/

#map{

width:100%;

height:520px;

margin-top:45px;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

border:8px solid white;

}

.leaflet-container{

font-family:Montserrat,Arial,sans-serif;

border-radius:20px;

}

.leaflet-popup-content{

font-size:.95rem;

line-height:1.6;

}


/***************************************************************
CTA FINAL
****************************************************************/

.cta-fin{

padding:100px 0;

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

color:white;

text-align:center;

overflow:hidden;

position:relative;

}

.cta-fin::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,
rgba(255,255,255,.08),
transparent 40%),

radial-gradient(circle at bottom left,
rgba(255,255,255,.05),
transparent 45%);

pointer-events:none;

}

.cta-fin .container{

position:relative;

z-index:2;

}

.cta-fin h2{

color:white;

margin-bottom:25px;

}

.cta-fin p{

max-width:850px;

margin:0 auto 45px;

font-size:1.15rem;

line-height:2;

color:white;

}

.cta-fin .hero-buttons{

justify-content:center;

}


/***************************************************************
FOOTER
****************************************************************/

/* ==========================================================
   FOOTER — SENTINELLE NUISIBLES 42
   ========================================================== */

footer {
    margin-top:0;
    background:var(--vert-fonce);
    color:#fff;
}

.footer-container {
    display:grid;
    grid-template-columns:2fr 1fr 1.5fr;
    gap:60px;
    padding:65px 0 55px;
}

.footer-container h3 {
    margin:0 0 20px;
    color:#fff;
    font-size:1.25rem;
}

.footer-container p {
    margin:0 0 12px;
    color:rgba(255,255,255,.85);
    line-height:1.7;
}

.footer-container ul {
    list-style:none;
    margin:0;
    padding:0;
}

.footer-container li {
    margin-bottom:12px;
}

.footer-container a {
    color:rgba(255,255,255,.85);
    text-decoration:none;
    transition:color .25s ease;
}

.footer-container a:hover {
    color:var(--orange);
}

.footer-container i {
    width:20px;
    margin-right:8px;
    color:var(--orange);
    text-align:center;
}

.copyright {
    border-top:1px solid rgba(255,255,255,.15);
    padding:22px 0;
    text-align:center;
}

.copyright p {
    margin:5px 0;
    color:rgba(255,255,255,.75);
    font-size:.9rem;
}

.copyright a {
    color:rgba(255,255,255,.8);
    text-decoration:none;
}

.copyright a:hover {
    color:var(--orange);
}

.footer-slogan {
    color:var(--orange) !important;
    font-weight:700;
    letter-spacing:.5px;
}


/* ==========================================================
   FOOTER — RESPONSIVE
   ========================================================== */

@media(max-width:768px) {

    .footer-container {
        grid-template-columns:1fr;
        gap:35px;
        padding:50px 0 40px;
    }

    .copyright {
        padding:20px;
    }

}


/***************************************************************
ANIMATIONS
****************************************************************/

.fade-in{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-in.visible{

opacity:1;

transform:none;

}

.service-card,
.avantages article,
.etape,
.faq-item,
.conseil-pro{

will-change:transform;

}


/***************************************************************
RESPONSIVE
****************************************************************/

@media(max-width:992px){

#map{

height:420px;

}

.cta-fin{

padding:80px 0;

}

}

@media(max-width:768px){

.faq-question{

padding:20px;

font-size:1rem;

}

.faq-answer p{

padding:0 20px 24px;

}

#map{

height:340px;

border-width:4px;

}

.cta-fin{

padding:65px 0;

}

.cta-fin h2{

font-size:2rem;

}

.cta-fin p{

font-size:1rem;

}

}

@media(max-width:480px){

.hero-buttons .btn{

width:100%;

}

.service-content{

padding:22px;

}

.etape{

padding:28px 20px;

}

.avantages article{

padding:28px 20px;

}

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

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:0.35s;

    padding:0 30px;

}

.faq-item.active .faq-answer{

    max-height:300px;

    padding:0 30px 25px;

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    border:none;

    background:none;

    font:inherit;

}

.faq-question i{

    color:var(--orange);

    font-size:24px;

}
/* ======================================================
   BREADCRUMB
====================================================== */

.breadcrumb{

    background:#f7f7f4;

    padding:18px 0;

    border-top:1px solid #ececec;

    border-bottom:1px solid #ececec;

}

.breadcrumb nav{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    font-size:15px;

}

.breadcrumb a{

    color:var(--vert);

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--orange);

}

.breadcrumb strong{

    color:#666;

    font-weight:600;

}

.breadcrumb i{

    color:#999;

    font-size:12px;

}
/*==========================================================
FICHES D'IDENTIFICATION
==========================================================*/
/*==========================================================
  CARTES ESPECES
==========================================================*/

.espece-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

    display:grid;

    grid-template-rows:auto 1fr;

    height:100%;

}

.espece-card img{

    width:100%;

    height:280px;

    display:block;

    object-fit:cover;

}

.illustration-frelon{

    object-fit:contain !important;

    background:#fff;

    padding:8px;

}

.espece-body{

    padding:28px;

    display:flex;

    flex-direction:column;

    min-height:0;

    box-sizing:border-box;

}
.espece-card{

transition:.35s;

}

.espece-card:hover{

transform:translateY(-8px);

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

}
/*==========================================================
  BLOC 6
  FICHES D'IDENTIFICATION DES ESPÈCES
==========================================================*/

/*----------------------------------------------------------
  Carte
----------------------------------------------------------*/

.espece-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

    height:100%;

}


/*----------------------------------------------------------
  Image
----------------------------------------------------------*/

.espece-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    display:block;

}


/* Illustration naturaliste */

.illustration-frelon{

    object-fit:contain !important;

    background:#fff;

    padding:10px;

}


/*----------------------------------------------------------
  Corps de carte
----------------------------------------------------------*/

.espece-body{

    padding:28px;

}


/*----------------------------------------------------------
  Nom scientifique
----------------------------------------------------------*/

.nom-scientifique{

    margin-top:8px;

    margin-bottom:28px;

    font-style:italic;

    color:#666;

}


/*----------------------------------------------------------
  Badges
----------------------------------------------------------*/

.badge{

    display:inline-block;

    width:fit-content;

    padding:8px 18px;

    margin:0 0 24px 0;

    border-radius:999px;

    font-size:.95rem;

    font-weight:700;

    border:2px solid;

}


/* Espèce exotique envahissante */

.badge-danger{

    color:#D62828;

    background:#FFF4F4;

    border-color:#F4A3A3;

}


/* Espèce indigène */

.badge-green{

    color:#2E5E3E;

    background:#F2FAF4;

    border-color:#CFE7D4;

}
/* Badge jaune */

.badge-yellow{

display:inline-flex;

align-items:center;

padding:10px 22px;

border-radius:999px;

background:#FFF9E8;

border:2px solid #FFD76A;

color:#8C6A00;

font-weight:700;

margin-bottom:22px;

}
/* Espèce commensale */

.badge-brown{

    color:#6B4F2A;

    background:#F8F3EC;

    border-color:#D9C2A3;

}


/*----------------------------------------------------------
  Tableau d'identification
----------------------------------------------------------*/

.fiche-technique{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

.fiche-technique tr{

    border-bottom:1px solid #EFEFEF;

}

.fiche-technique th{

    width:140px;

    padding:14px 0;

    text-align:left;

    vertical-align:top;

    color:var(--vert);

    font-weight:700;

}

.fiche-technique td{

    padding:14px 0;

    line-height:1.7;

}


/*----------------------------------------------------------*
* Encadré "À retenir"
*----------------------------------------------------------*/

.a-retenir{

    min-height:220px;

    margin-top:auto;

    padding:22px;

    background:#FAFAFA;

    border-left:6px solid var(--orange);

    border-radius:14px;

    display:flex;

    align-items:flex-start;

    box-sizing:border-box;

}

.a-retenir i{

    color:var(--orange);

    margin-right:8px;

    flex-shrink:0;

}

.a-retenir p{

    margin:0;

    line-height:1.7;

}

/*==================================================
JAUGE DE DANGER (VERSION DEFINITIVE)
==================================================*/

.danger-bar{

display:flex;
align-items:center;
gap:15px;

}

.danger-progress{

width:110px;
height:10px;

background:#e5e5e5;

border-radius:50px;

overflow:hidden;

box-shadow:inset 0 1px 3px rgba(0,0,0,.15);

}

.danger-fill{

display:block;
height:100%;

border-radius:50px;

}

/*==============================
NIVEAUX
==============================*/

.danger-1{

width:20%;
background:#3bb54a;

}

.danger-2{

 width:40%;
    background:#E9C46A;

}

.danger-3{
width:72%;
background:#F4A100;
}

.danger-label-3{
color:#F4A100;
}
.danger-3{
width:72%;
background:#F4A100;
}

.danger-label-3{
color:#F4A100;
}

.danger-4{

width:80%;
background:#C1121F;

}

.danger-5{

width:100%;
background:#d62828;

}

.danger-bar strong{

margin-left:12px;

font-size:15px;

font-weight:700;

white-space:nowrap;

}
/*=================================
COULEUR DU TEXTE DU NIVEAU
=================================*/

.danger-label{

font-weight:700;

}

.danger-label-1{

color:#3bb54a;

}

.danger-label-2{

color:#C18A00;

}

.danger-label-3{

color:#D48806;

}

.danger-label-4{

color:#C1121F;

}

.danger-label-5{

color:#8b0000;

}
/*==========================================================
NOM SCIENTIFIQUE
==========================================================*/

.nom-scientifique{

    margin:-8px 0 18px;

    color:#777;

    font-size:15px;

    font-style:italic;

}

/*==========================================================
A RETENIR
==========================================================*/

.fiche-conseil{

    margin-top:22px;

    padding:18px 20px;

    background:#f8faf7;

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

    border-radius:8px;

    line-height:1.6;

    font-size:15px;

}

.fiche-conseil i{

    color:var(--orange);

    margin-right:8px;

}
/*==================================================
FICHES ESPECES
==================================================*/

.fiche-technique{

width:100%;

border-collapse:collapse;

margin:30px 0;

}

.fiche-technique th{

width:150px;

text-align:left;

font-weight:700;

color:var(--vert);

padding:12px 0;

vertical-align:top;

}

.fiche-technique td{

padding:12px 0;

line-height:1.6;

}

.nom-scientifique{

font-style:italic;

color:#666;

margin-bottom:25px;

}

.badge{

display:inline-block;

padding:8px 18px;

border-radius:40px;

font-size:.85rem;

font-weight:700;

margin-bottom:20px;

}

.badge-danger{

background:#fff2f2;

color:#d62828;

border:1px solid #f3b3b3;

}
.badge-green{

    color:#2E5E3E;

    background:#F2FAF4;

    border-color:#B7DFC2;

}

/*=============================
JAUGE DANGER
=============================*/

.danger-bar{

display:flex;

align-items:center;

gap:6px;

}

.danger{

width:28px;

height:8px;

border-radius:20px;

background:#ddd;

}

.danger-red{

background:#d62828;

}

.danger-orange{

background:#f4a300;

}

.danger-green{

background:#2d6a4f;

}

.off{

background:#ddd;

}

.danger-bar strong{

margin-left:12px;

font-size:.95rem;


}
/*==========================================================
PASTILLES DE COMPARAISON
==========================================================*/

.pastilles{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

}

.pastille{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#DDDDDD;

}

/* Faible */

.pastille.green{

    background:#67C23A;

}

/* Moyen */

.pastille.yellow{

    background:#F4B400;

}

/* Important */

.pastille.orange{

    background:#F39C12;

}

/* Très élevé */

.pastille.red{

    background:#D62828;

}

/*==========================================================
TABLEAU COMPARATIF
==========================================================*/

.comparatif-wrapper{

    overflow-x:auto;

    margin-top:40px;

}

.table-comparatif{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.table-comparatif th{

    background:var(--vert);

    color:white;

    padding:18px;

    text-align:center;

}

.table-comparatif td{

    padding:16px;

    text-align:center;

    border-bottom:1px solid #ececec;

}

.table-comparatif tbody th{

    color:var(--vert);

    background:#fafafa;

    text-align:left;

}
.table-comparatif td{

padding:18px 22px;

}

.table-comparatif th{

padding:18px 22px;

}
/*==========================================================
  RONGEURS - TABLEAU COMPARATIF
  Pastilles de capacité et niveau de danger
==========================================================*/

/*----------------------------------------------------------
  Pastilles actives du tableau Rongeurs
----------------------------------------------------------*/

.table-comparatif .pastille.active{

    background:#67C23A;

}


/*----------------------------------------------------------
  Niveau de danger
----------------------------------------------------------*/

.table-comparatif .danger-niveau{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    font-size:.9rem;

    font-weight:700;

}


/* Danger élevé */

.table-comparatif .danger-eleve{

    color:#C1121F;

    background:#FFF1F1;

    border:1px solid #E8A5A5;

}


/* Danger important */

.table-comparatif .danger-important{

    color:#B86B00;

    background:#FFF7E8;

    border:1px solid #F2C36B;

}
/*==========================================================
  RONGEURS - EQUILIBRAGE DES FICHES ESPECES
==========================================================*/

.espece-card .espece-body{

    display:flex;
    flex-direction:column;
    flex:1;

}

.espece-card .fiche-conseil{

    margin-top:auto;

}
/* ==========================================================
   RONGEURS — BLOC 07 : INDICES DE PRÉSENCE
   CSS isolé de la page Frelons
   ========================================================== */

.indices-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.indices-card {

    background:#ffffff;

    border-radius:18px;

    padding:24px 28px;

    border-left:4px solid #f5a000;

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

    display:flex;

    flex-direction:column;

    height:100%;

}


.indices-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:18px;

}


.indices-card h3 {

    margin:0 0 14px;

    color:#28613f;

    font-size:22px;

}


.indices-card p {

    margin:0;

    line-height:1.7;

    color:#444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:900px) {

    .indices-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width:600px) {

    .indices-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .indices-card {

        padding:24px;

    }

}
/* ==========================================================
   RONGEURS — BLOC 08 : POURQUOI AGIR RAPIDEMENT
   CSS isolé — ne pas modifier les classes génériques
   ========================================================== */

.risques-rongeurs-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.risque-rongeurs-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    display:flex;

    flex-direction:column;

    height:100%;

    box-sizing:border-box;

}


.risque-rongeurs-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.risque-rongeurs-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:22px;

}


.risque-rongeurs-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:900px) {

    .risques-rongeurs-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width:600px) {

    .risques-rongeurs-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .risque-rongeurs-card {

        padding:24px;

    }

}
/* ==========================================================
   RONGEURS — BLOC 09 : DÉROULEMENT D'UNE INTERVENTION
   CSS isolé — ne pas modifier les classes génériques
   ========================================================== */

.etapes-rongeurs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
    align-items: stretch;
}

.etape-rongeurs-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 26px 24px;
    border-left: 4px solid #f5a000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);

    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;

    min-height: 250px;
    box-sizing: border-box;
}

.etape-rongeurs-card .etape-number {
    grid-column: 1;
    grid-row: 1;

    align-self: center;

    margin: 0;

    color: #28613f;
    font-weight: 700;
    font-size: 15px;
}

.etape-rongeurs-card > i {
    grid-column: 2;
    grid-row: 1;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;
    background: #fff3dc;
    color: #f5a000;
    font-size: 20px;

    margin: 0;
}

.etape-rongeurs-card h3 {
    grid-column: 1 / -1;

    margin: 18px 0 10px;

    color: #28613f;
    font-size: 22px;
}

.etape-rongeurs-card p {
    grid-column: 1 / -1;

    margin: 0;

    line-height: 1.6;
    color: #444;
}


/* Tablette */

@media (max-width: 1000px) {

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

}


/* Téléphone */

@media (max-width: 600px) {

    .etapes-rongeurs-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .etape-rongeurs-card {
        padding: 24px;
    }
    @media (max-width: 1000px) {
    .etape-rongeurs-card {
        min-height: 250px;
    }
}

@media (max-width: 600px) {
    .etape-rongeurs-card {
        min-height: auto;
    }
}

}
/* ==========================================================
   RONGEURS — BLOC 10 : CONSEILS DU PROFESSIONNEL
   CSS isolé — ne modifie pas Frelons
   ========================================================== */

.conseils-rongeurs-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

    align-items:stretch;
}


.conseil-rongeurs-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    box-sizing:border-box;
}

.conseil-rongeurs-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}

.conseil-rongeurs-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}

.conseil-rongeurs-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/* Tablette */

@media (max-width:900px) {

    .conseils-rongeurs-grid {

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

    }

}


/* Téléphone */

@media (max-width:600px) {

    .conseils-rongeurs-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .conseil-rongeurs-card {

        padding:24px;

    }

}
/* ==========================================================
   RONGEURS — BLOC 11 : FAQ
   CSS isolé — ne modifie pas la FAQ existante
   ========================================================== */

.faq-rongeurs {

    max-width:950px;

    margin:50px auto 0;

}


/* Question */

.faq-rongeurs details {

    background:#ffffff;

    border-radius:16px;

    margin-bottom:16px;

    overflow:hidden;

    box-shadow:0 8px 22px rgba(0,0,0,.07);

}


/* Ligne de question */

.faq-rongeurs summary {

    position:relative;

    padding:22px 55px 22px 24px;

    cursor:pointer;

    list-style:none;

    font-size:1.05rem;

    font-weight:700;

    color:#28613f;

}


/* Suppression du marqueur natif */

.faq-rongeurs summary::-webkit-details-marker {

    display:none;

}


/* Petit + à droite */

.faq-rongeurs summary::after {

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    color:#f5a000;

    font-size:24px;

    font-weight:500;

    transition:transform .25s ease;
}


/* Quand la question est ouverte */

.faq-rongeurs details[open] summary::after {

    content:"−";

}


/* Réponse */

.faq-rongeurs details p {

    margin:0;

    padding:0 24px 24px;

    line-height:1.7;

    color:#444;

}


/* Téléphone */

@media (max-width:600px) {

    .faq-rongeurs {

        margin-top:35px;

    }

    .faq-rongeurs summary {

        padding:20px 50px 20px 20px;

        font-size:1rem;

    }

    .faq-rongeurs details p {

        padding:0 20px 20px;

    }

}
/* =====================================================
   POSITIONNEMENT DES ANCRES SOUS LE MENU FIXE
   ===================================================== */

html {
    scroll-padding-top: 100px;
}


/* ==========================================================
   RONGEURS — INTRODUCTION
   Image + texte
   CSS isolé
   ========================================================== */

.intro-grid {
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:45px;
    align-items:center;
}

.intro-image-rongeurs {
    width:100%;
    overflow:hidden;
    border-radius:22px;
}

.intro-image-rongeurs img {
    display:block;
    width:100%;
    height:360px;
    object-fit:cover;
}

.intro-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    
    .intro-content p {
    text-align:justify;
}
}

.intro-content p:last-child {
    margin-bottom:0;
}


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

@media (max-width:768px) {

    .intro-grid {
        grid-template-columns:1fr;
        gap:30px;
    }

    .intro-image-rongeurs img {
        height:280px;
    }

}
/* ==========================================================
   RONGEURS — BLOC "POURQUOI AGIR ?"
   Grille de 6 cartes
   ========================================================== */

.cards-rongeurs-6 {
    margin-top: 40px;
}


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

@media (max-width: 900px) {

    .cards-rongeurs-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

}


@media (max-width: 600px) {

    .cards-rongeurs-6 {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}
/* ==========================================================
   CARTES — POURQUOI AGIR ?
   ========================================================== */

.risque-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border-left: 5px solid var(--orange);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.risque-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.risque-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(244,161,0,.12);
    color: var(--orange);
    font-size: 1.15rem;
}

.risque-card h3 {
    margin-bottom: 14px;
}

.risque-card p {
    margin-bottom: 0;
    line-height: 1.8;
}
/* ==========================================================
   ABEILLES — BLOC 02 : HERO
   CSS isolé — ne pas modifier les classes génériques
   ========================================================== */

.hero-abeilles {

    min-height: 620px;

    display: flex;
    align-items: center;

    background: #f7f8f5;

    position: relative;
    overflow: hidden;

}


/* Contenu */

.hero-abeilles-content {

    width: 100%;

    display: flex;
    align-items: center;

}


/* Bloc texte */

.hero-abeilles-text {

    max-width: 820px;

    padding: 70px 0;

}


/* Petit intitulé */

.hero-abeilles .hero-label {

    display: inline-block;

    margin-bottom: 22px;

    color: #28613f;

    font-size: 1.05rem;

    font-weight: 700;

}


/* Titre principal */

.hero-abeilles h1 {

    margin: 0 0 28px;

    color: #28613f;

    font-size: clamp(2.6rem, 4.2vw, 3.8rem);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;

}


/* Texte */

.hero-abeilles-text > p {

    max-width: 680px;

    margin: 0 0 35px;

    color: #444;

    font-size: 1.2rem;

    line-height: 1.8;

}


/* Boutons */

.hero-abeilles-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

}


/* Bouton secondaire */

.hero-abeilles-buttons .btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 28px;

    border: 2px solid #28613f;

    border-radius: 50px;

    color: #28613f;

    background: transparent;

    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;

}


.hero-abeilles-buttons .btn-secondary:hover {

    background: #28613f;

    color: white;

}


/* ----------------------------------------------------------
   TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .hero-abeilles {

        min-height: 540px;

    }

    .hero-abeilles-text {

        max-width: 650px;

        padding: 60px 0;

    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .hero-abeilles {

        min-height: auto;

    }

    .hero-abeilles-text {

        padding: 55px 0;

    }

    .hero-abeilles h1 {

        font-size: 2.6rem;

    }

    .hero-abeilles-text > p {

        font-size: 1.05rem;

        line-height: 1.7;

    }

    .hero-abeilles-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .hero-abeilles-buttons .btn-header,
    .hero-abeilles-buttons .btn-secondary {

        width: 100%;

    }

}
/* ==========================================================
   ABEILLES — BLOC 03 : COMPRENDRE L'ESSAIMAGE
   CSS isolé — ne pas modifier les classes génériques
   ========================================================== */

.essaimage-intro {

    max-width: 920px;

    margin: 45px auto 0;

}


.essaimage-intro-text {

    background: #ffffff;

    padding: 32px 38px;

    border-left: 5px solid #f5a000;

    border-radius: 16px;

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

}


.essaimage-intro-text p {

    margin: 0 0 22px;

    line-height: 1.8;

    color: #444;

    text-align: justify;

}


.essaimage-intro-text p:last-child {

    margin-bottom: 0;

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .essaimage-intro {

        margin-top: 35px;

    }

    .essaimage-intro-text {

        padding: 24px;

    }

    .essaimage-intro-text p {

        text-align: left;

        line-height: 1.7;

    }

}
/* ==========================================================
   ABEILLES — BLOC 04 : POURQUOI RÉCUPÉRER UN ESSAIM ?
   CSS isolé — ne pas modifier les classes génériques
   ========================================================== */

.pourquoi-abeilles-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 40px;

}


.pourquoi-abeilles-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 28px;

    border-left: 4px solid #f5a000;

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

    align-self: stretch;

}


.pourquoi-abeilles-card > i {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3dc;

    color: #f5a000;

    font-size: 20px;

    margin-bottom: 16px;

}


.pourquoi-abeilles-card h3 {

    margin: 0 0 12px;

    color: #28613f;

    font-size: 22px;

}


.pourquoi-abeilles-card p {

    margin: 0;

    line-height: 1.7;

    color: #444;

}


/* ----------------------------------------------------------
   TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .pourquoi-abeilles-grid {

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

    }

}


/* ----------------------------------------------------------
   TÉLÉPHONE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .pourquoi-abeilles-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .pourquoi-abeilles-card {

        padding: 24px;

    }

}
/* ==========================================================
   ABEILLES — BLOC 05 : RECONNAÎTRE UN ESSAIM
   CSS isolé — ne modifie pas les autres pages
   ========================================================== */

.reconnaitre-abeilles-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 40px;

}


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

.reconnaitre-abeilles-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 26px 28px;

    border-left: 4px solid #f5a000;

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

    align-self: stretch;

}


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

.reconnaitre-abeilles-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3dc;

    color: #f5a000;

    font-size: 20px;

    margin-bottom: 14px;

}


.reconnaitre-abeilles-card h3 {

    margin: 0 0 12px;

    color: #28613f;

    font-size: 21px;

}


.reconnaitre-abeilles-card p {

    margin: 0 0 14px;

    line-height: 1.7;

    color: #444;

}


.reconnaitre-abeilles-card p:last-child {

    margin-bottom: 0;

}


/* ==========================================================
   ENCADRÉ INFORMATION
   ========================================================== */

.reconnaitre-abeilles-info {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    max-width: 950px;

    margin: 30px auto 0;

    padding: 22px 24px;

    background: #fafafa;

    border-left: 5px solid #f5a000;

    border-radius: 14px;

}


.reconnaitre-abeilles-info > i {

    color: #f5a000;

    font-size: 20px;

    margin-top: 3px;

    flex-shrink: 0;

}


.reconnaitre-abeilles-info p {

    margin: 0;

    line-height: 1.7;

    color: #444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 900px) {

    .reconnaitre-abeilles-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width: 600px) {

    .reconnaitre-abeilles-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .reconnaitre-abeilles-card {

        padding: 24px;

    }

    .reconnaitre-abeilles-info {

        padding: 20px;

    }

}
/* ==========================================================
   ABEILLES — BLOC 06 : DÉROULEMENT D'UNE RÉCUPÉRATION
   CSS isolé — ne modifie pas les autres pages
   ========================================================== */

.recuperation-abeilles-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 40px;

}


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

.recuperation-abeilles-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 26px 24px;

    border-left: 4px solid #f5a000;

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

    align-self: stretch;

}


/* ==========================================================
   NUMÉRO + ICÔNE
   ========================================================== */

.recuperation-abeilles-card .recuperation-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 10px;

    color: #28613f;

    font-weight: 700;

    font-size: 15px;

    vertical-align: middle;

}


.recuperation-abeilles-card > i {

    width: 48px;

    height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3dc;

    color: #f5a000;

    font-size: 20px;

    vertical-align: middle;

    margin-bottom: 14px;

}


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

.recuperation-abeilles-card h3 {

    margin: 0 0 10px;

    color: #28613f;

    font-size: 21px;

}


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

.recuperation-abeilles-card p {

    margin: 0;

    line-height: 1.6;

    color: #444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1000px) {

    .recuperation-abeilles-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width: 600px) {

    .recuperation-abeilles-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .recuperation-abeilles-card {

        padding: 24px;

    }

}
/* ==========================================================
   ABEILLES — BLOC 07 : DANS QUELS CAS PUIS-JE INTERVENIR ?
   CSS isolé — ne modifie pas les autres pages
   ========================================================== */

.situations-abeilles-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 40px;

}


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

.situation-abeilles-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 26px 28px;

    border-left: 4px solid #f5a000;

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

    align-self: stretch;

}


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

.situation-abeilles-card > i {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3dc;

    color: #f5a000;

    font-size: 20px;

    margin-bottom: 14px;

}


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

.situation-abeilles-card h3 {

    margin: 0 0 10px;

    color: #28613f;

    font-size: 21px;

}


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

.situation-abeilles-card p {

    margin: 0;

    line-height: 1.7;

    color: #444;

}


/* ==========================================================
   ENCADRÉ — RÉCUPÉRATION GRATUITE
   ========================================================== */

.situation-abeilles-info {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 950px;

    margin: 30px auto 0;

    padding: 22px 24px;

    background: #fafafa;

    border-left: 5px solid #f5a000;

    border-radius: 14px;

}


.situation-abeilles-info > i {

    color: #f5a000;

    font-size: 20px;

    margin-top: 3px;

    flex-shrink: 0;

}


.situation-abeilles-info p {

    margin: 0;

    line-height: 1.7;

    color: #444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 900px) {

    .situations-abeilles-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width: 600px) {

    .situations-abeilles-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .situation-abeilles-card {

        padding: 24px;

    }

    .situation-abeilles-info {

        padding: 20px;

    }

}
/* ==========================================================
   ABEILLES — BLOC 08 : QUAND UNE RÉCUPÉRATION N'EST PAS POSSIBLE
   CSS isolé — ne modifie pas les autres pages
   ========================================================== */

.limites-abeilles-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 40px;

}


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

.limite-abeilles-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 26px 28px;

    border-left: 4px solid #f5a000;

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

    align-self: stretch;

}


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

.limite-abeilles-card > i {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3dc;

    color: #f5a000;

    font-size: 20px;

    margin-bottom: 14px;

}


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

.limite-abeilles-card h3 {

    margin: 0 0 10px;

    color: #28613f;

    font-size: 21px;

}


/* ==========================================================
   TEXTES
   ========================================================== */

.limite-abeilles-card p {

    margin: 0;

    line-height: 1.7;

    color: #444;

}


/* ==========================================================
   ENCADRÉ FINAL
   ========================================================== */

.limite-abeilles-info {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 950px;

    margin: 30px auto 0;

    padding: 22px 24px;

    background: #fafafa;

    border-left: 5px solid #f5a000;

    border-radius: 14px;

}


.limite-abeilles-info > i {

    color: #f5a000;

    font-size: 20px;

    margin-top: 3px;

    flex-shrink: 0;

}


.limite-abeilles-info p {

    margin: 0;

    line-height: 1.7;

    color: #444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 900px) {

    .limites-abeilles-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width: 600px) {

    .limites-abeilles-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .limite-abeilles-card {

        padding: 24px;

    }

    .limite-abeilles-info {

        padding: 20px;

    }

}
/* ==========================================================
ABEILLES — BLOC 09 : QUE FAIRE SI VOUS DÉCOUVREZ UN ESSAIM
CSS isolé — ne modifie pas les autres blocs
========================================================== */

.conseils-abeilles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.conseil-abeilles-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 26px 28px;
    border-left: 4px solid #f5a000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    align-self: stretch;
}

.conseil-abeilles-card > i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff3dc;
    color: #f5a000;
    font-size: 20px;
    margin-bottom: 14px;
}

.conseil-abeilles-card h3 {
    margin: 0 0 10px;
    color: #28613f;
    font-size: 21px;
}

.conseil-abeilles-card p {
    margin: 0;
    line-height: 1.6;
    color: #444;
}


/* ==========================================================
ENCADRÉ IMPORTANT
========================================================== */

.conseil-abeilles-important {
    max-width: 950px;
    margin: 32px auto 0;
    padding: 22px 26px;
    background: #ffffff;
    border-left: 4px solid #f5a000;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.conseil-abeilles-important > i {
    color: #f5a000;
    font-size: 20px;
    margin-top: 3px;
    flex-shrink: 0;
}

.conseil-abeilles-important p {
    margin: 0;
    line-height: 1.6;
    color: #444;
}

.conseil-abeilles-important strong {
    color: #28613f;
}


/* ==========================================================
TABLETTE
========================================================== */

@media (max-width: 900px) {

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

}


/* ==========================================================
TÉLÉPHONE
========================================================== */

@media (max-width: 600px) {

    .conseils-abeilles-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .conseil-abeilles-card {
        padding: 24px;
    }

    .conseil-abeilles-important {
        padding: 20px;
    }

}
/* ==========================================================
INSECTES RAMPANTS — BLOC 02
Amélioration de la lisibilité du texte
========================================================== */

.hero-prestation-content .hero-prestation-intro {
    color: #ffffff;
}
/* ==========================================================
INSECTES RAMPANTS — BLOC 03 : INSECTES CONCERNÉS
CSS isolé — ne modifie pas les autres pages
========================================================== */

.insectes-rampants-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.insecte-rampant-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 26px 28px;
    border-left: 4px solid #f5a000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    align-self: stretch;
}

.insecte-rampant-card > i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff3dc;
    color: #f5a000;
    font-size: 20px;
    margin-bottom: 14px;
}

.insecte-rampant-card h3 {
    margin: 0 0 10px;
    color: #28613f;
    font-size: 21px;
}

.insecte-rampant-card p {
    margin: 0;
    line-height: 1.6;
    color: #444;
}


/* ==========================================================
TABLETTE
========================================================== */

@media (max-width: 900px) {

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

}


/* ==========================================================
TÉLÉPHONE
========================================================== */

@media (max-width: 600px) {

    .insectes-rampants-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .insecte-rampant-card {
        padding: 24px;
    }

}
/* ==========================================================
   INSECTES RAMPANTS — BLOC 04 : DIAGNOSTIC ET INTERVENTION
   CSS isolé — ne modifie pas Frelons / Rongeurs
   ========================================================== */

.etapes-rampants-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.etape-rampants-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 24px;

    border-left:4px solid #f5a000;

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

    display:flex;

    flex-direction:column;

}


.etape-rampants-icon {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}


.etape-rampants-icon span {

    font-size:15px;

    font-weight:700;

    color:#28613f;

}


.etape-rampants-icon i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

}


.etape-rampants-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.etape-rampants-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:1000px) {

    .etapes-rampants-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width:600px) {

    .etapes-rampants-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .etape-rampants-card {

        padding:24px;

    }

}
/* ==========================================================
   INSECTES RAMPANTS — BLOC 05 : CONSEILS DU PROFESSIONNEL
   CSS isolé — ne modifie pas Frelons / Rongeurs
   ========================================================== */

.conseils-rampants-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.conseil-rampants-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

}


.conseil-rampants-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.conseil-rampants-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.conseil-rampants-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:900px) {

    .conseils-rampants-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width:600px) {

    .conseils-rampants-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .conseil-rampants-card {

        padding:24px;

    }

}
/* ==========================================================
   INSECTES RAMPANTS — BLOC 06 : PREMIERS RÉFLEXES
   CSS isolé — ne modifie pas Frelons / Rongeurs
   ========================================================== */

.reflexes-rampants-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.reflexe-rampants-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

}


.reflexe-rampants-icon {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.reflexe-rampants-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.reflexe-rampants-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/* ==========================================================
   BLOC INFORMATION
   ========================================================== */

.info-rampants {

    max-width:950px;

    margin:35px auto 0;

    padding:20px 24px;

    background:#ffffff;

    border-left:4px solid #f5a000;

    border-radius:16px;

    box-shadow:0 8px 22px rgba(0,0,0,.06);

    display:flex;

    align-items:flex-start;

    gap:16px;

}


.info-rampants > i {

    color:#f5a000;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


.info-rampants p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:900px) {

    .reflexes-rampants-grid {

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

    }

}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media (max-width:600px) {

    .reflexes-rampants-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .reflexe-rampants-card {

        padding:24px;

    }

    .info-rampants {

        padding:18px 20px;

    }

}
/* ==========================================================
   AJUSTEMENT DU TITRE — BLOC 06
   ========================================================== */

#premiers-reflexes .section-title h2 {

    font-size:42px;

    white-space:nowrap;

}


/* Téléphone */

@media (max-width:600px) {

    #premiers-reflexes .section-title h2 {

        font-size:2rem;

        white-space:normal;

    }

}
/* ==========================================================
   CORRECTIF HERO — INSECTES RAMPANTS
   ========================================================== */

.hero-prestation-content {
    position: relative;
    z-index: 3;
    display: block;
    visibility: visible;
    opacity: 1;
    max-width: 950px;
}

.hero-prestation {
    min-height: 72vh;
}

.hero-prestation .container {
    position: relative;
    z-index: 3;
}

.hero-prestation-label {
    display: block;
    color: #ffffff;
    margin-bottom: 18px;
}

.hero-prestation h1 {
    display: block;
    color: #ffffff;
    max-width: none;
    margin-bottom: 28px;
}

.hero-prestation-intro {
    display: block;
    color: #ffffff;
    max-width: 850px;
    font-size: 1.15rem;
    line-height: 1.9;
    margin-bottom: 40px;
}

.hero-prestation .hero-buttons {
    display: flex;
    gap: 18px;
    align-items: center;
}

.hero-prestation .hero-buttons .btn {
    display: inline-flex;
}
<!--==========================================================
   TITRE — INSECTES CONCERNÉS
   Le titre doit rester sur une seule ligne
   ==========================================================-->

#especes h2 {
    font-size:42px !important;
}
<!--==========================================================
   TITRE — INSECTES CONCERNÉS
   Le titre doit rester sur une seule ligne
   ==========================================================-->

#especes .section-title h2 {

    display:block !important;

    width:100% !important;

    max-width:none !important;

    margin-left:0 !important;

    margin-right:0 !important;

    left:auto !important;

    transform:none !important;

    white-space:nowrap !important;

    font-size:44px !important;

}
/*==========================================================
   INSECTES RAMPANTS — BLOC 07 : LES SIGNES QUI DOIVENT
   VOUS ALERTER
   ==========================================================*/

.signes-rampants-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.signe-rampants-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.signe-rampants-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.signe-rampants-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.signe-rampants-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .signes-rampants-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .signes-rampants-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .signe-rampants-card {

        padding:24px;

    }

}
/*==========================================================
   INSECTES RAMPANTS — BLOC 08 : POURQUOI AGIR RAPIDEMENT ?
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.risques-rampants-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.risque-rampants-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.risque-rampants-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.risque-rampants-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.risque-rampants-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   ENCADRÉ INFORMATION
   ==========================================================*/

.risque-rampants-info {

    max-width:950px;

    margin:30px auto 0;

    padding:22px 24px;

    background:#ffffff;

    border-left:5px solid #f5a000;

    border-radius:14px;

    box-shadow:0 8px 22px rgba(0,0,0,.06);

    display:flex;

    align-items:flex-start;

    gap:12px;

}


.risque-rampants-info > i {

    color:#f5a000;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


.risque-rampants-info p {

    margin:0;

    line-height:1.7;

    color:#444;

}


.risque-rampants-info strong {

    color:#28613f;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .risques-rampants-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .risques-rampants-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .risque-rampants-card {

        padding:24px;

    }

    .risque-rampants-info {

        padding:20px;

    }

}
<!--==========================================================
   INSECTES RAMPANTS — BLOC 09 : FAQ
   CSS isolé — ne modifie pas les autres FAQ
   ==========================================================-->

.faq-rampants {

    max-width:950px;

    margin:50px auto 0;

}


.faq-rampants details {

    background:#ffffff;

    border-radius:16px;

    margin-bottom:16px;

    overflow:hidden;

    box-shadow:0 8px 22px rgba(0,0,0,.07);

}


.faq-rampants summary {

    position:relative;

    padding:22px 55px 22px 24px;

    cursor:pointer;

    list-style:none;

    font-size:1.05rem;

    font-weight:700;

    color:#28613f;

}


/* Suppression du marqueur natif */

.faq-rampants summary::-webkit-details-marker {

    display:none;

}


/* Petit + à droite */

.faq-rampants summary::after {

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    color:#f5a000;

    font-size:26px;

    font-weight:400;

}


/* Question ouverte */

.faq-rampants details[open] summary::after {

    content:"−";

}


/* Réponse */

.faq-rampants details p {

    margin:0;

    padding:0 24px 24px;

    line-height:1.7;

    color:#444;

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .faq-rampants {

        margin-top:35px;

    }

    .faq-rampants summary {

        padding:20px 50px 20px 20px;

        font-size:1rem;

    }

    .faq-rampants details p {

        padding:0 20px 20px;

    }

}
/*==========================================================
   CHENILLES PROCESSIONNAIRES — BLOC 02 : HERO
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.chenilles-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: #fff;
}

.chenilles-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(18,25,20,.88) 0%,
            rgba(18,25,20,.72) 45%,
            rgba(18,25,20,.38) 100%
        );
    z-index: 1;
}

.chenilles-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    padding-top: 150px;
    padding-bottom: 90px;
}

.chenilles-hero-label {
    display: block;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
}

.chenilles-hero h1 {
    max-width: 1100px;
    margin: 0 0 28px;
    color: #fff;
    font-size: 3.2rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 5px 18px rgba(0,0,0,.35);
}

.chenilles-hero-intro {
    max-width: 850px;
    margin: 0 0 40px;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.9;
}

.chenilles-hero .hero-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
}

@media (max-width: 900px) {

    .chenilles-hero {
        min-height: 60vh;
    }

    .chenilles-hero-content {
        padding-top: 120px;
        padding-bottom: 80px;
    }

}

@media (max-width: 600px) {

    .chenilles-hero {
        min-height: auto;
    }

    .chenilles-hero-content {
        padding-top: 90px;
        padding-bottom: 65px;
    }

    .chenilles-hero h1 {
        font-size: 2.5rem;
    }

    .chenilles-hero-intro {
        font-size: 1.05rem;
        line-height: 1.7;
    }

    .chenilles-hero .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .chenilles-hero .hero-buttons .btn {
        width: 100%;
    }

}
/*==========================================================
   CHENILLES PROCESSIONNAIRES — BLOC 03 : ESPÈCES
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.chenilles-especes-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.chenille-espece-card {

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.chenille-espece-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.chenille-espece-card h3 {

    margin:0 0 12px;

    color:#28613f;

    font-size:22px;

}


.chenille-espece-card p {

    margin:0;

    line-height:1.7;

    color:#444;

}


/*==========================================================
   ENCADRÉ RISQUE
   ==========================================================*/

.chenilles-especes-info {

    max-width:950px;

    margin:30px auto 0;

    padding:22px 24px;

    background:#fafafa;

    border-left:5px solid #f5a000;

    border-radius:14px;

    display:flex;

    align-items:flex-start;

    gap:12px;

}


.chenilles-especes-info > i {

    color:#f5a000;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


.chenilles-especes-info p {

    margin:0;

    line-height:1.7;

    color:#444;

}


.chenilles-especes-info strong {

    color:#28613f;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .chenilles-especes-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .chenilles-especes-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .chenille-espece-card {

        padding:24px;

    }

    .chenilles-especes-info {

        padding:20px;

    }

}
/*==========================================================
   CHENILLES PROCESSIONNAIRES — BLOC 04 : RISQUES
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.risques-chenilles-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.risque-chenilles-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.risque-chenilles-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.risque-chenilles-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.risque-chenilles-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   ENCADRÉ D'ALERTE
   ==========================================================*/

.risques-chenilles-info {

    max-width:950px;

    margin:30px auto 0;

    padding:22px 24px;

    background:#fafafa;

    border-left:5px solid #f5a000;

    border-radius:14px;

    display:flex;

    align-items:flex-start;

    gap:12px;

}


.risques-chenilles-info > i {

    color:#f5a000;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


.risques-chenilles-info p {

    margin:0;

    line-height:1.7;

    color:#444;

}


.risques-chenilles-info strong {

    color:#28613f;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .risques-chenilles-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .risques-chenilles-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .risque-chenilles-card {

        padding:24px;

    }

    .risques-chenilles-info {

        padding:20px;

    }

}
/*==========================================================
   CHENILLES PROCESSIONNAIRES — BLOC 05 : DÉROULEMENT
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.etapes-chenilles-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.etape-chenilles-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 24px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


/*==========================================================
   NUMÉRO + ICÔNE
   ==========================================================*/

.etape-chenilles-icon {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}


.etape-chenilles-icon span {

    font-size:15px;

    font-weight:700;

    color:#28613f;

}


.etape-chenilles-icon i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

}


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

.etape-chenilles-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


/*==========================================================
   TEXTES
   ==========================================================*/

.etape-chenilles-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:1000px) {

    .etapes-chenilles-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .etapes-chenilles-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .etape-chenilles-card {

        padding:24px;

    }

}
/*==========================================================
   CHENILLES PROCESSIONNAIRES — BLOC 06 : BONS RÉFLEXES
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.reflexes-chenilles-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.reflexe-chenilles-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.reflexe-chenilles-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.reflexe-chenilles-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.reflexe-chenilles-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   ENCADRÉ D'ALERTE
   ==========================================================*/

.reflexes-chenilles-info {

    max-width:950px;

    margin:30px auto 0;

    padding:22px 24px;

    background:#fafafa;

    border-left:5px solid #f5a000;

    border-radius:14px;

    display:flex;

    align-items:flex-start;

    gap:12px;

}


.reflexes-chenilles-info > i {

    color:#f5a000;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


.reflexes-chenilles-info p {

    margin:0;

    line-height:1.7;

    color:#444;

}


.reflexes-chenilles-info strong {

    color:#28613f;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .reflexes-chenilles-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .reflexes-chenilles-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .reflexe-chenilles-card {

        padding:24px;

    }

    .reflexes-chenilles-info {

        padding:20px;

    }

}
/*==========================================================
   CHENILLES PROCESSIONNAIRES — BLOC 07 : PRÉVENTION
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.prevention-chenilles-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.prevention-chenilles-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.prevention-chenilles-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.prevention-chenilles-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.prevention-chenilles-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   ENCADRÉ INFORMATION
   ==========================================================*/

.prevention-chenilles-info {

    max-width:950px;

    margin:30px auto 0;

    padding:22px 24px;

    background:#fafafa;

    border-left:5px solid #f5a000;

    border-radius:14px;

    display:flex;

    align-items:flex-start;

    gap:12px;

}


.prevention-chenilles-info > i {

    color:#f5a000;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


.prevention-chenilles-info p {

    margin:0;

    line-height:1.7;

    color:#444;

}


.prevention-chenilles-info strong {

    color:#28613f;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .prevention-chenilles-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .prevention-chenilles-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .prevention-chenilles-card {

        padding:24px;

    }

    .prevention-chenilles-info {

        padding:20px;

    }

}
/*==========================================================
   CHENILLES PROCESSIONNAIRES — BLOC 08 : FAQ
   CSS isolé — ne modifie pas les autres FAQ
   ==========================================================*/

.faq-chenilles {

    max-width:950px;

    margin:50px auto 0;

}


.faq-chenilles details {

    background:#ffffff;

    border-radius:16px;

    margin-bottom:16px;

    overflow:hidden;

    box-shadow:0 8px 22px rgba(0,0,0,.07);

}


.faq-chenilles summary {

    position:relative;

    padding:22px 55px 22px 24px;

    cursor:pointer;

    list-style:none;

    font-size:1.05rem;

    font-weight:700;

    color:#28613f;

}


.faq-chenilles summary::-webkit-details-marker {

    display:none;

}


.faq-chenilles summary::after {

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    color:#f5a000;

    font-size:24px;

    font-weight:500;

}


.faq-chenilles details[open] summary::after {

    content:"−";

}


.faq-chenilles details p {

    margin:0;

    padding:0 24px 24px;

    line-height:1.7;

    color:#444;

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .faq-chenilles {

        margin-top:35px;

    }

    .faq-chenilles summary {

        padding:20px 50px 20px 20px;

        font-size:1rem;

    }

    .faq-chenilles details p {

        padding:0 20px 20px;

    }

}
/*==========================================================
   MA MÉTHODE — BLOC 02 : HERO
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.methode-hero {

    position:relative;

    display:flex;

    align-items:center;

    min-height:72vh;

    background:
        linear-gradient(
            135deg,
            #1f4f34 0%,
            #2f6847 55%,
            #587060 100%
        );

    overflow:hidden;

    color:#fff;

}


.methode-hero::before {

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(255,255,255,.10),
            transparent 38%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(255,255,255,.06),
            transparent 42%
        );

    pointer-events:none;

}


.methode-hero .container {

    position:relative;

    z-index:2;

    padding-top:130px;

    padding-bottom:90px;

}


.methode-hero-content {

    max-width:1050px;

}


.methode-hero-label {

    display:block;

    margin-bottom:20px;

    color:#fff;

    font-size:1.05rem;

    font-weight:600;

}


.methode-hero h1 {

    margin:0 0 28px;

    max-width:1000px;

    color:#fff;

    font-size:4rem;

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1px;

    text-shadow:0 5px 18px rgba(0,0,0,.28);

}


.methode-hero-intro {

    max-width:850px;

    margin:0 0 40px;

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

    font-size:1.15rem;

    line-height:1.9;

}


.methode-hero .hero-buttons {

    display:flex;

    align-items:center;

    gap:18px;

}


/*==========================================================
   BOUTON SECONDAIRE
   ==========================================================*/

.methode-hero .btn-outline {

    color:#fff;

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

    background:transparent;

}


.methode-hero .btn-outline:hover {

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

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .methode-hero {

        min-height:60vh;

    }

    .methode-hero .container {

        padding-top:110px;

        padding-bottom:80px;

    }

    .methode-hero h1 {

        font-size:3.2rem;

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .methode-hero {

        min-height:auto;

    }

    .methode-hero .container {

        padding-top:90px;

        padding-bottom:65px;

    }

    .methode-hero h1 {

        font-size:2.5rem;

        line-height:1.1;

    }

    .methode-hero-intro {

        font-size:1.05rem;

        line-height:1.7;

    }

    .methode-hero .hero-buttons {

        flex-direction:column;

        align-items:stretch;

    }

    .methode-hero .hero-buttons .btn {

        width:100%;

    }

}
/*==========================================================
   MA MÉTHODE — BLOC 03 : LES 3 PILIERS
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.methode-piliers-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.methode-pilier-card {

    background:#ffffff;

    border-radius:18px;

    padding:30px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.methode-pilier-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:16px;

}


.methode-pilier-card h3 {

    margin:0 0 12px;

    color:#28613f;

    font-size:22px;

}


.methode-pilier-card p {

    margin:0;

    line-height:1.7;

    color:#444;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .methode-piliers-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .methode-piliers-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .methode-pilier-card {

        padding:24px;

    }

}
/*==========================================================
   MA MÉTHODE — BLOC 04 : MES PRINCIPES
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.principes-methode-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.principe-methode-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.principe-methode-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.principe-methode-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.principe-methode-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   ENCADRÉ INFORMATION
   ==========================================================*/

.principes-methode-info {

    max-width:950px;

    margin:30px auto 0;

    padding:22px 24px;

    background:#fafafa;

    border-left:5px solid #f5a000;

    border-radius:14px;

    display:flex;

    align-items:flex-start;

    gap:12px;

}


.principes-methode-info > i {

    color:#f5a000;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


.principes-methode-info p {

    margin:0;

    line-height:1.7;

    color:#444;

}


.principes-methode-info strong {

    color:#28613f;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .principes-methode-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .principes-methode-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .principe-methode-card {

        padding:24px;

    }

    .principes-methode-info {

        padding:20px;

    }

}
/*==========================================================
   MA MÉTHODE — BLOC 05 : MES ENGAGEMENTS
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.engagements-methode-grid {

    display:grid;

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

    gap:24px;

    margin-top:40px;

}


.engagement-methode-card {

    background:#ffffff;

    border-radius:18px;

    padding:26px 28px;

    border-left:4px solid #f5a000;

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

    align-self:stretch;

}


.engagement-methode-card > i {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff3dc;

    color:#f5a000;

    font-size:20px;

    margin-bottom:14px;

}


.engagement-methode-card h3 {

    margin:0 0 10px;

    color:#28613f;

    font-size:21px;

}


.engagement-methode-card p {

    margin:0;

    line-height:1.6;

    color:#444;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .engagements-methode-grid {

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

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .engagements-methode-grid {

        grid-template-columns:1fr;

        gap:18px;

    }

    .engagement-methode-card {

        padding:24px;

    }

}
/*==========================================================
   MA MÉTHODE — BLOC 06 : PROFIL
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.methode-profil {

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:center;

    margin-top:50px;

}


.methode-profil-photo {

    background:#ffffff;

    border-radius:22px;

    padding:14px;

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

    border:1px solid #e3e8e4;

}


.methode-profil-photo img {

    display:block;

    width:100%;

    height:auto;

    border-radius:16px;

}


.methode-profil-texte {

    max-width:760px;

}


.methode-profil-texte p {

    margin:0 0 22px;

    line-height:1.8;

    color:#444;

    font-size:1.05rem;

}


.methode-profil-texte strong {

    color:#28613f;

}


/*==========================================================
   POINTS CLÉS
   ==========================================================*/

.methode-profil-points {

    display:grid;

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

    gap:14px;

    margin-top:30px;

}


.methode-profil-points > div {

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

    background:#ffffff;

    border:1px solid #e3e8e4;

    border-radius:14px;

    box-shadow:0 6px 18px rgba(0,0,0,.04);

    font-weight:600;

    color:#444;

}


.methode-profil-points i {

    color:#f5a000;

    font-size:18px;

    flex-shrink:0;

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .methode-profil {

        grid-template-columns:1fr;

        gap:35px;

    }

    .methode-profil-photo {

        max-width:500px;

        margin:0 auto;

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .methode-profil {

        gap:25px;

        margin-top:35px;

    }

    .methode-profil-points {

        grid-template-columns:1fr;

    }

    .methode-profil-texte p {

        font-size:1rem;

    }

}
/*==========================================================
   MA MÉTHODE — BLOC 07 : APPEL À L'ACTION
   CSS isolé — ne modifie pas les autres pages
   ==========================================================*/

.methode-cta {

    position:relative;

    padding:90px 0;

    background:
        linear-gradient(
            135deg,
            #1f4f34 0%,
            #2f6847 55%,
            #587060 100%
        );

    color:#fff;

    text-align:center;

    overflow:hidden;

}


.methode-cta::before {

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(255,255,255,.10),
            transparent 38%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(255,255,255,.06),
            transparent 42%
        );

    pointer-events:none;

}


.methode-cta .container {

    position:relative;

    z-index:2;

}


.methode-cta-content {

    max-width:900px;

    margin:0 auto;

}


.methode-cta-content > span {

    display:block;

    margin-bottom:18px;

    color:#fff;

    font-weight:600;

}


.methode-cta h2 {

    margin:0 0 24px;

    color:#fff;

    font-size:2.7rem;

    line-height:1.15;

}


.methode-cta p {

    max-width:800px;

    margin:0 auto 38px;

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

    font-size:1.1rem;

    line-height:1.8;

}


.methode-cta .hero-buttons {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}


/*==========================================================
   BOUTON SECONDAIRE
   ==========================================================*/

.methode-cta .btn-outline {

    color:#fff;

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

    background:transparent;

}


.methode-cta .btn-outline:hover {

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

}


/*==========================================================
   TABLETTE
   ==========================================================*/

@media (max-width:900px) {

    .methode-cta {

        padding:75px 0;

    }

    .methode-cta h2 {

        font-size:2.3rem;

    }

}


/*==========================================================
   TÉLÉPHONE
   ==========================================================*/

@media (max-width:600px) {

    .methode-cta {

        padding:65px 0;

    }

    .methode-cta h2 {

        font-size:2rem;

    }

    .methode-cta p {

        font-size:1rem;

    }

    .methode-cta .hero-buttons {

        flex-direction:column;

        align-items:stretch;

    }

    .methode-cta .hero-buttons .btn {

        width:100%;

    }

}
/*==========================================================
   MA MÉTHODE — CORRECTION CTA FINAL
   ==========================================================*/

.methode-cta {

    background:
        linear-gradient(
            135deg,
            #1f4f34 0%,
            #2f6847 55%,
            #587060 100%
        ) !important;

    color:#ffffff !important;

}


.methode-cta-content > span {

    color:#ffffff !important;

}


.methode-cta h2 {

    color:#ffffff !important;

}


.methode-cta p {

    color:rgba(255,255,255,.95) !important;

}


.methode-cta .btn-outline {

    color:#ffffff !important;

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

    background:transparent !important;

}
/*==========================================================
   PAGES PRESTATIONS — BOUTONS DU HERO
   Alignement visuel avec l'accueil
   ==========================================================*/

.hero-prestation .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-prestation .hero-buttons .btn-orange {

    background:var(--orange) !important;

    color:#fff !important;

}


.hero-prestation .hero-buttons .btn-green {

    background:var(--vert) !important;

    color:#fff !important;

}


.hero-prestation .hero-buttons .btn-orange:hover {

    background:#e69400 !important;

}


.hero-prestation .hero-buttons .btn-green:hover {

    background:#356c49 !important;

}
/* =====================================================
   CORRECTION MOBILE – BLOC IDENTIFIER LES RONGEURS
   ===================================================== */

@media (max-width: 768px) {

    #identifier {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    #identifier .section-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #identifier .section-title h2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #identifier .section-intro {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #identifier .cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

}