/* =========================================================

   HERO NETTOYAGE

========================================================= */



.hero-nettoyage{



    position:relative;



    overflow:hidden;



    background:#020817;



    min-height:300px;



    display:flex;



    align-items:center;



    padding:22px 28px;



}



/* =========================================================

   BACKGROUND

========================================================= */



.hero-nettoyage__background{



    position:absolute;



    inset:0;



    background:

        radial-gradient(

            circle at center,

            rgba(37,99,235,0.12),

            transparent 70%

        );



}



/* =========================================================

   CONTAINER

========================================================= */



.hero-nettoyage__container{



    position:relative;



    z-index:2;



    width:100%;



    max-width:95%;



    margin:0 auto;



    display:grid;



    grid-template-columns:1.2fr 420px 260px;



    gap:24px;



    align-items:center;



}



/* =========================================================

   CONTENT

========================================================= */



.hero-nettoyage__content{



    display:flex;



    align-items:flex-start;



    gap:24px;

    margin-top:8rem;



}



/* =========================================================

   ICON

========================================================= */



.hero-nettoyage__icon{



    width:92px;

    height:92px;



    border-radius:20px;



    background:

        linear-gradient(

            180deg,

            #102a6d 0%,

            #091b4d 100%

        );



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



    border:1px solid rgba(255,255,255,0.05);



}



.hero-nettoyage__icon svg{



    width:48px;

    height:48px;



    color:#ffffff;



    stroke-width:1.8;



}



/* =========================================================

   TEXT

========================================================= */



.hero-nettoyage__text{



    max-width:560px;



}



/* =========================================================

   BREADCRUMB

========================================================= */



.hero-nettoyage__breadcrumb{



    display:flex;



    align-items:center;



    gap:8px;



    font-size:11px;



    color:rgba(255,255,255,0.68);



    margin-bottom:18px;



}



.hero-nettoyage__breadcrumb a{



    color:rgba(255,255,255,0.72);



    text-decoration:none;



}



.hero-nettoyage__breadcrumb-current{



    color:#3b82f6;



}



/* =========================================================

   TITLE

========================================================= */



.hero-nettoyage__title{



    font-size:28px;



    line-height:1.1;



    font-weight:800;



    color:#ffffff;



    margin-bottom:14px;



    letter-spacing:-0.03em;



}



/* =========================================================

   SUBTITLE

========================================================= */



.hero-nettoyage__subtitle{



    font-size:15px;



    line-height:1.8;



    color:rgba(255,255,255,0.84);



    margin-bottom:18px;



}



/* =========================================================

   DESCRIPTION

========================================================= */



.hero-nettoyage__description{



    font-size:13px;



    line-height:1.9;



    color:rgba(255,255,255,0.68);



    margin-bottom:20px;



    max-width:520px;



}



/* =========================================================

   BADGES

========================================================= */



.hero-nettoyage__badges{



    display:flex;



    align-items:center;



    gap:12px;



    flex-wrap:wrap;



}



/* =========================================================

   BADGE

========================================================= */



.hero-nettoyage__badge{



    display:inline-flex;



    align-items:center;



    gap:10px;



    height:38px;



    padding:0 16px;



    border-radius:12px;



    background:

        linear-gradient(

            180deg,

            rgba(16,42,109,0.72),

            rgba(9,27,77,0.72)

        );



    border:1px solid rgba(255,255,255,0.05);



    color:#ffffff;



    font-size:12px;



    font-weight:500;



}



.hero-nettoyage__badge svg{



    width:16px;

    height:16px;



    color:#3b82f6;



    stroke-width:2;



}



/* =========================================================

   VISUAL

========================================================= */



.hero-nettoyage__visual{



    display:flex;



    justify-content:center;



    align-items:center;



}



.hero-nettoyage__visual img{



    width:100%;



    max-width:420px;



    height:auto;



    display:block;



    object-fit:contain;



}



/* =========================================================

   FEATURES

========================================================= */



.hero-nettoyage__features{



    display:flex;



    flex-direction:column;



    gap:12px;



}



/* =========================================================

   FEATURE

========================================================= */



.hero-nettoyage__feature{



    min-height:66px;



    border-radius:14px;



    background:

        linear-gradient(

            180deg,

            rgba(9,27,66,0.92),

            rgba(6,18,48,0.96)

        );



    border:1px solid rgba(255,255,255,0.04);



    padding:12px 14px;



    display:flex;



    align-items:center;



    gap:14px;



}



.hero-nettoyage__feature-icon{



    width:42px;

    height:42px;



    border-radius:12px;



    background:

        linear-gradient(

            180deg,

            rgba(37,99,235,0.22),

            rgba(37,99,235,0.08)

        );



    display:flex;



    align-items:center;



    justify-content:center;



    flex-shrink:0;



}



.hero-nettoyage__feature-icon svg{



    width:18px;

    height:18px;



    color:#3b82f6;



    stroke-width:2;



}



.hero-nettoyage__feature-text strong{



    display:block;



    color:#ffffff;



    font-size:12px;



    font-weight:700;



    margin-bottom:4px;



    line-height:1.4;



}



.hero-nettoyage__feature-text span{



    color:rgba(255,255,255,0.68);



    font-size:11px;



    line-height:1.5;



}



/* =========================================================

   RESPONSIVE

========================================================= */



@media(max-width:1200px){



    .hero-nettoyage__container{



        grid-template-columns:1fr;



    }



    .hero-nettoyage__visual{



        justify-content:flex-start;



    }



    .hero-nettoyage__features{



        width:100%;



    }



}



@media(max-width:768px){



    .hero-nettoyage{



        padding:18px;



    }



    .hero-nettoyage__content{



        flex-direction:column;



        gap:18px;



    }



    .hero-nettoyage__icon{



        width:78px;

        height:78px;



    }



    .hero-nettoyage__icon svg{



        width:38px;

        height:38px;



    }



    .hero-nettoyage__title{



        font-size:24px;



    }



    .hero-nettoyage__subtitle{



        font-size:14px;



    }



}