/* ==========================================================================
   Histoire / Service — conteneur
   ========================================================================== */
.home_histoire_service {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 50px 0px;
    background-image: url("/wp-content/themes/webstudios/assets/img/bd_home_histoire_service.webp");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 500px;
}

.home_histoire_service_sized {
    display: flex;
    width: calc(100% - 20px);
    max-width: 1560px;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   Histoire
   ========================================================================== */
.home_histoire {
    display: flex;
    flex-direction: column;
    width: calc(50% - 20px);
}

.home_histoire h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home_histoire h2 > div:nth-child(1) {
    width: 70px;
}

.home_histoire h2 > div:nth-child(1) > img {
    max-width: 100%;
}

.home_histoire h2 > div:nth-child(2) {
    width: calc(100% - 70px);
    text-align: left;
    font: normal normal bold 35px/40px OS_Bold;
    letter-spacing: 0px;
    color: #000000;
    text-transform: uppercase;
}

.home_histoire > div {
    display: block;
    text-align: left;
    font: normal normal normal 20px/26px OS_Regular;
    letter-spacing: 0px;
    color: #100C06;
    max-width: 670px;
}

/* ==========================================================================
   Service
   ========================================================================== */
.home_service {
    display: flex;
    flex-direction: column;
    width: calc(50% - 20px);
    background: url("/wp-content/themes/webstudios/assets/img/bg_home_service.webp"),
                linear-gradient(180deg, rgb(29 127 199 / 35%) 0%, #1D7FC7 100%);
    mix-blend-mode: overlay;
    border-radius: 150px 0px 150px 0px;
    overflow: hidden;
    padding: 70px;
    box-sizing: border-box;
}

.home_service h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home_service h2 > div:nth-child(1) {
    width: 70px;
}

.home_service h2 > div:nth-child(1) > img {
    max-width: 100%;
}

.home_service h2 > div:nth-child(2) {
    width: calc(100% - 70px);
    text-align: left;
    font: normal normal bold 35px/40px OS_Bold;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.home_service_s {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.home_service_i {
    display: flex;
    width: calc(50% - 10px);
    background: #100D0893 0% 0% no-repeat padding-box;
    border-radius: 55px 0px;
    align-items: center;
    padding: 24px 20px;
    margin: 20px 0px;
    box-sizing: border-box;
    justify-content: space-between;
}

.home_service_i > div:nth-child(1) {
    width: 70px;
}

.home_service_i > div:nth-child(1) > img {
    max-width: 100%;
}

.home_service_i > div:nth-child(2) {
    width: calc(100% - 70px - 10px);
    font: normal normal normal 22px/24px OS_Bold;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
}

/* ==========================================================================
   Responsive — Tablette (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    
    .home_histoire h2 > div:nth-child(2),
    .home_service h2 > div:nth-child(2) {
        font: normal normal bold 30px/36px OS_Bold;
        width: unset;
    }

    .home_service {
        padding: 50px;
        border-radius: 100px 0px 100px 0px;
    }

    .home_service_i > div:nth-child(2) {
        font: normal normal normal 19px/22px OS_Bold;
    }
}

/* ==========================================================================
   Responsive — Mobile large (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .home_histoire_service_sized {
        flex-direction: column;
        gap: 40px;
    }

    .home_histoire,
    .home_service {
        width: 100%;
    }

    .home_histoire h2,
    .home_service h2 {
        justify-content: center
    }    
    .home_histoire > div {
        max-width: 100%;
    }

    .home_histoire h2 > div:nth-child(1),
    .home_service h2 > div:nth-child(1) {
        width: 50px;
    }

    .home_histoire h2 > div:nth-child(2),
    .home_service h2 > div:nth-child(2) {
        width: unset;
        font: normal normal bold 26px/32px OS_Bold;
    }

    .home_histoire > div {
        font: normal normal normal 17px/23px OS_Regular;
    }

    .home_service {
        padding: 35px;
        border-radius: 60px 0px 60px 0px;
    }

    /* Deux blocs par ligne devient trop étroit pour un texte uppercase lisible */
    .home_service_i {
        width: 100%;
    }
}

/* ==========================================================================
   Responsive — Mobile petit (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .home_histoire_service {
        padding: 30px 0px;
    }

    .home_histoire h2 > div:nth-child(2),
    .home_service h2 > div:nth-child(2) {
        font: normal normal bold 20px/26px OS_Bold;
    }

    .home_histoire > div {
        text-align: justify;
        font: normal normal normal 18px/24px OS_Regular;
    }

    .home_service {
        padding: 25px;
        border-radius: 40px 0px 40px 0px;
        background: linear-gradient(180deg, rgb(29 127 199 / 35%) 0%, #1D7FC7 100%);
    }

    .home_service_i {
        padding: 16px 14px;
        border-radius: 30px 0px;
        margin: 10px 0px
    }

    .home_service_i > div:nth-child(1) {
        width: 50px;
    }

    .home_service_i > div:nth-child(2) {
        width: calc(100% - 50px - 10px);
        font: normal normal normal 16px/20px OS_Bold;
    }
}