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

   HERO RÉPARATION ORDINATEUR LENT

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



.hero-reparation-ordinateur-lent {



    position: relative;



    overflow: hidden;



    background: #020817;



    min-height: 420px;



    padding: 30px 40px;



    display: flex;



    align-items: center;



}



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

   BACKGROUND

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



.hero-reparation-ordinateur-lent__background {



    position: absolute;



    inset: 0;



    background:

        radial-gradient(

            circle at center,

            rgba(37,99,235,0.10),

            transparent 70%

        );



}



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

   CONTAINER

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



.hero-reparation-ordinateur-lent__container {



    position: relative;



    z-index: 2;



    width: 100%;



  



    margin: 0 auto;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 40px;



}



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

   CONTENT

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



.hero-reparation-ordinateur-lent__content {



    display: flex;



    align-items: flex-start;



    gap: 34px;



    max-width: 760px;



    margin-top:8rem;



}



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

   ICON

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



.hero-reparation-ordinateur-lent__icon {



    width: 118px;

    height: 118px;



    border-radius: 26px;



    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);



    box-shadow:

        0 18px 40px rgba(0,0,0,0.28);



}



.hero-reparation-ordinateur-lent__icon svg {



    width: 58px;

    height: 58px;



    color: #ffffff;



    stroke-width: 1.8;



}



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

   TEXT

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



.hero-reparation-ordinateur-lent__text {



    max-width: 580px;



}



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

   TITLE

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



.hero-reparation-ordinateur-lent__title {



    font-size: 58px;



    line-height: 1;



    font-weight: 800;



    color: #ffffff;



    margin-bottom: 16px;



    letter-spacing: -0.05em;



}



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

   SUBTITLE

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



.hero-reparation-ordinateur-lent__subtitle {



    font-size: 18px;



    line-height: 1.7;



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



    margin-bottom: 24px;



}



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

   DESCRIPTION

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



.hero-reparation-ordinateur-lent__description {



    font-size: 15px;



    line-height: 2;



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



    max-width: 620px;



    margin-bottom: 28px;



}



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

   BADGES

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



.hero-reparation-ordinateur-lent__badges {



    display: flex;



    align-items: center;



    gap: 14px;



    flex-wrap: wrap;



}



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

   BADGE

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



.hero-reparation-ordinateur-lent__badge {



    display: inline-flex;



    align-items: center;



    gap: 10px;



    padding: 12px 18px;



    border-radius: 12px;



    background:

        linear-gradient(

            180deg,

            rgba(16,42,109,0.75),

            rgba(9,27,77,0.75)

        );



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



    color: #ffffff;



    font-size: 14px;



    font-weight: 500;



    backdrop-filter: blur(10px);



}



.hero-reparation-ordinateur-lent__badge svg {



    width: 18px;

    height: 18px;



    stroke: #3b82f6;



    stroke-width: 2;



}



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

   VISUAL

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



.hero-reparation-ordinateur-lent__visual {



    width: 470px;



    flex-shrink: 0;



    display: flex;



    justify-content: center;



    align-items: center;



}



.hero-reparation-ordinateur-lent__visual img {



    width: 100%;



    height: auto;



    display: block;



    object-fit: contain;



}



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

   RESPONSIVE

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



@media (max-width: 1200px) {



    .hero-reparation-ordinateur-lent__container {



        flex-direction: column;



        align-items: flex-start;



    }



    .hero-reparation-ordinateur-lent__visual {



        width: 100%;



        max-width: 480px;



        align-self: center;



    }



}



@media (max-width: 768px) {



    .hero-reparation-ordinateur-lent {



        padding: 24px 18px 30px;



    }



    .hero-reparation-ordinateur-lent__content {



        flex-direction: column;



        gap: 24px;



    }



    .hero-reparation-ordinateur-lent__icon {



        width: 88px;

        height: 88px;



    }



    .hero-reparation-ordinateur-lent__icon svg {



        width: 42px;

        height: 42px;



    }



    .hero-reparation-ordinateur-lent__title {



        font-size: 38px;



    }



    .hero-reparation-ordinateur-lent__subtitle {



        font-size: 16px;



    }



    .hero-reparation-ordinateur-lent__description {



        font-size: 14px;



        line-height: 1.9;



    }



}