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

   HERO SYSTEME & LOGICIEL

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



.hero-systeme-logiciel {



    position: relative;



    overflow: hidden;



    background: #020817;



    min-height: 420px;



    padding: 28px 40px 40px;



    display: flex;



    align-items: center;



}



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

   BACKGROUND

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



.hero-systeme-logiciel__background {



    position: absolute;



    inset: 0;



    background-image: url('http://embsinformatique.fr/wp-content/uploads/2026/05/bg-reparation-logiciel-systeme.png');



    background-repeat: no-repeat;



    background-position: center right;



    background-size: contain;



    opacity: 0.95;



}



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

   CONTAINER

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



.hero-systeme-logiciel__container {



    position: relative;



    z-index: 2;



    width: 100%;



    



    margin: 0 auto;



}



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

   CONTENT

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



.hero-systeme-logiciel__content {



    display: flex;



    align-items: center;



    gap: 34px;



    margin-top: 8rem;



}



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

   ICON

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



.hero-systeme-logiciel__icon {



    width: 96px;

    height: 96px;



    border-radius: 26px;



    background:

        linear-gradient(

            180deg,

            #2563eb 0%,

            #1d4ed8 100%

        );



    display: flex;



    align-items: center;



    justify-content: center;



    box-shadow:

        0 14px 40px rgba(37,99,235,0.24);



    flex-shrink: 0;



}



.hero-systeme-logiciel__icon svg {



    width: 48px;

    height: 48px;



    color: #ffffff;



}



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

   TEXT

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



.hero-systeme-logiciel__text {



    max-width: 620px;



}



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

   LABEL

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



.hero-systeme-logiciel__label {



    display: block;



    font-size: 12px;



    font-weight: 700;



    letter-spacing: 1px;



    color: #3b82f6;



    margin-bottom: 10px;



}



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

   TITLE

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



.hero-systeme-logiciel__title {



    font-size: 56px;



    line-height: 1.02;



    font-weight: 800;



    color: #ffffff;



    margin-bottom: 18px;



    letter-spacing: -0.04em;



}



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

   DESCRIPTION

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



.hero-systeme-logiciel__description {



    font-size: 18px;



    line-height: 1.7;



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



    margin-bottom: 18px;



    max-width: 700px;



}



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

   SUBTEXT

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



.hero-systeme-logiciel__subtext {



    font-size: 15px;



    line-height: 1.9;



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



    max-width: 620px;



    margin-bottom: 30px;



}



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

   ACTIONS

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



.hero-systeme-logiciel__actions {



    display: flex;



    align-items: center;



    gap: 14px;



    flex-wrap: wrap;



}



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

   BADGE

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



.hero-systeme-logiciel__badge {



    display: inline-flex;



    align-items: center;



    gap: 10px;



    padding: 12px 18px;



    border-radius: 12px;



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



    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,0.02),

            rgba(255,255,255,0.008)

        );



    color: #ffffff;



    font-size: 13px;



    font-weight: 500;



}



.hero-systeme-logiciel__badge svg {



    width: 18px;

    height: 18px;



    stroke: #3b82f6;



    stroke-width: 2;



}



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

   RESPONSIVE

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



@media (max-width: 1200px) {



    .hero-systeme-logiciel {



        min-height: 360px;



    }



    .hero-systeme-logiciel__title {



        font-size: 44px;



    }



}



@media (max-width: 992px) {



    .hero-systeme-logiciel {



        padding: 28px 24px 34px;



    }



    .hero-systeme-logiciel__background {



        background-size: cover;



        opacity: 0.20;



    }



    .hero-systeme-logiciel__content {



        flex-direction: column;



        align-items: flex-start;



        gap: 24px;



        margin-top: 3rem;



    }



    .hero-systeme-logiciel__title {



        font-size: 38px;



    }



}



@media (max-width: 768px) {



    .hero-systeme-logiciel {



        padding: 22px 18px 28px;



    }



    .hero-systeme-logiciel__icon {



        width: 74px;

        height: 74px;



        border-radius: 20px;



    }



    .hero-systeme-logiciel__icon svg {



        width: 36px;

        height: 36px;



    }



    .hero-systeme-logiciel__title {



        font-size: 30px;



    }



    .hero-systeme-logiciel__description {



        font-size: 15px;



    }



    .hero-systeme-logiciel__subtext {



        font-size: 14px;



    }



    .hero-systeme-logiciel__actions {



        flex-direction: column;



        align-items: stretch;



    }



}