:root {
    --height_banner: 547px;
    --height_banner_logo: 260px;
    --width_presentation_description: 720px;
}

/* ==========================================================================
   Bandeau (banner)
   ========================================================================== */
.home_banner {
    display: flex;
    width: 100%;
    justify-content: center;
}

.home_banner_sized {
    display: block;
    width: 100%;
    max-width: 100%;
    height: var(--height_banner);
    background-image: linear-gradient(0deg, #1D7FC7 0px, #1D7FC7 7px, transparent 7px, transparent 100%),
                       url("/wp-content/themes/webstudios/assets/img/bg_home.webp");
    background-size: cover;
    background-position: center;
}

/* ==========================================================================
   Présentation
   ========================================================================== */
.home_presentation {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    background-image: url("/wp-content/themes/webstudios/assets/img/bg_home_presentation.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-bottom: 50px;
}

.home_presentation_logo_description {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-top: calc(-1 * (var(--height_banner) / 2 + var(--height_banner_logo) / 2 + 50px));
}

.home_presentation_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--height_banner_logo);
    width: var(--height_banner_logo);
    background: #FFF;
    border-radius: 50%;
    overflow: hidden;
}

.home_presentation_logo img {
    height: 80px;
}

.home_presentation_description {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--width_presentation_description);
    max-width: 100%;
    background-image: url("/wp-content/themes/webstudios/assets/img/sub_home_banner.png"),
                       linear-gradient(180deg, transparent 0%, transparent 200px, #FFFFFF 200px, #FFFFFF 100%);
    background-size: 100% auto;
    background-position: top center;
    margin-top: -50px;
    padding: 75px;
    box-sizing: border-box;
}

.home_presentation_description h1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

.home_presentation_description h1 > 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_presentation_description > div {
    text-align: center;
    font: normal normal normal 20px/26px OS_Regular;
    letter-spacing: 0px;
    color: #100C06;
}

/* ==========================================================================
   Objets (cercles)
   ========================================================================== */
.home_presentation_objets {
    display: flex;
    width: 100%;
    justify-content: center;
}

.home_presentation_objets_sized {
    display: flex;
    width: calc(100% - 40px);
    max-width: 1280px;
    justify-content: space-evenly;
    align-items: center;
}

.home_presentation_objet_i {
    display: flex;
    background: #E20914;
    width: 30%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.home_presentation_objet_i > img {
    height: 113px;
    width: auto;
}

.home_presentation_objet_i h2 {
    display: block;
    max-width: 80%;
    text-align: center;
    font: normal normal normal 24px/28px OS_Bold;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.home_presentation_objet_i > .trait {
    width: 44px;
    height: 3px;
    background: #FFFFFF;
    margin-top: 40px;
}

/* ==========================================================================
   Responsive — Tablette (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        --height_banner: 420px;
        --height_banner_logo: 200px;
        --width_presentation_description: 600px;
    }

    .home_presentation_description {
        padding: 50px;
    }

    .home_presentation_description h1 > div:nth-child(2) {
        font: normal normal bold 30px/36px OS_Bold;
    }

    .home_presentation_objet_i {
        width: 40%;
    }
}

/* ==========================================================================
   Responsive — Mobile large (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --height_banner: 320px;
        --height_banner_logo: 150px;
        --width_presentation_description: 90%;
    }

    .home_presentation_description {
        padding: 30px;
        background-image: url("/wp-content/themes/webstudios/assets/img/sub_home_banner.png"),
                           linear-gradient(180deg, transparent 0%, transparent 140px, #FFFFFF 140px, #FFFFFF 100%);
    }

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

    .home_presentation_description h1 > div:nth-child(2) {
        width: calc(100% - 60px);
        font: normal normal bold 24px/30px OS_Bold;
    }

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

    /* Les cercles passent en colonne pour éviter l'écrasement en dessous de ~250px chacun */
    .home_presentation_objets_sized {
        flex-direction: column;
        gap: 30px;
    }

    .home_presentation_objet_i {
        width: 70%;
        max-width: 280px;
    }
}

/* ==========================================================================
   Responsive — Mobile petit (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    :root {
        --height_banner: 240px;
        --height_banner_logo: 110px;
    }
    .home_presentation_logo img {
        height: 30px;
    }
    .home_presentation_description {
        padding: 20px;
        background-image: url("/wp-content/themes/webstudios/assets/img/sub_home_banner.png"), linear-gradient(180deg, transparent 0%, transparent 100px, #FFFFFF 100px, #FFFFFF 100%);
        margin-top: -20px;
    }

    .home_presentation_description h1 {
        flex-direction: column;
        gap: 12px;
    }

    .home_presentation_description h1 > div:nth-child(1),
    .home_presentation_description h1 > div:nth-child(2) {
        width: 100%;
        text-align: center;
    }

    .home_presentation_description h1 > div:nth-child(2) {
        font: normal normal bold 20px/26px OS_Bold;
    }

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

    .home_presentation_objet_i {
        width: 85%;
        max-width: 220px;
    }

    .home_presentation_objet_i > img {
        height: 50px;
    }

    .home_presentation_objet_i h2 {
        font: normal normal normal 18px/22px OS_Bold;
    }

    .home_presentation_objet_i > .trait {
        margin-top: 20px;
    }
}