@layer app {
    .body-screen-image {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        min-height: 520px;
    }

    .body-screen-image .body-screen-image-index {
        background-size: cover;
        filter: contrast(110%) brightness(20%);
        width: 100%;
        height: 100%;
    }

    .body-screen-image .body-screen-image-index {
        background-image: url("../img/banner-1-880634748a8c5e5c04fa5bacc89463ed.avif");
    }

    .container-image-content {
        position: absolute;
        inset-block-start: 0;
        height: 100dvh;
        width: 100vw;

        max-width: inherit; /* Override */
    }

    .container-image-content .body-screen-image-content {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 11px;
        margin-bottom: 100px;
        height: 100%;
    }

    .container-image-content .body-screen-image-content .full-name {
        font-family: "Lato-Black", serif;
        font-weight: normal;
        color: white;
        font-size: clamp(35px, 10vw, 52px);
        margin-bottom: 0;
        margin-top: 0;
    }

    .container-image-content .body-screen-image-content .job-title {
        font-family: "Lato-Bold", serif;
        font-weight: normal;
        font-size: clamp(24px, 6.73vw, .67rem);
        color: #e94d50;
    }

    .container-image-content .body-screen-image-content .mouse-container {
        position: absolute;
        bottom: 15px;
        left: 50%;
    }

    @media only screen and (max-height: 460px) {
        .container-image-content .body-screen-image-content .mouse-container {
            display: none;
        }
    }

    .container-image-content .body-screen-image-content .mouse-container .mouse {
        position: relative;
        left: -50%;
        cursor: pointer;
    }

    .container-image-content .body-screen-image-content .mouse-container .mouse img {
        width: 48px;
    }

    section.header-text .text {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        color: var(--light-black2);
    }

    @media only screen and (min-width: 959px) {
        section.header-text .text {
            width: 70%;
        }

        .container-square {
            display: flex;
            flex-direction: column;
            justify-content: center;

            margin-block-start: 1rem;
            margin-inline: 20px;
            max-width: 1500px;
        }
    }

    .home-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-block-start: 100dvh;
    }

    .container-square section.offres-square {
        display: grid;
        grid-template-columns: 1fr;
        border: 1px solid #d9d9d9;
    }

    @media only screen and (min-width: 960px) {
        .container-square section.offres-square {
            margin: 1rem 0;
            grid-template-columns: 1fr 1fr;
        }
    }

    .container-square {
        section.offres-square {
            .offre {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 40px;
                font-size: 1.3em;
            }
        }
    }

    @media only screen and (min-width: 959px) {
        .container-square section.offres-square .offre {
            padding: 5vh;
        }
    }

    .container-square section.offres-square .offre .image {
        margin-bottom: 30px;
        height: 60px;
    }

    .container-square section.offres-square .offre .image img {
        opacity: 0;
        transition: opacity 2s, transform 1s;
        transform: rotate(360deg) scale(3);
    }

    .container-square section.offres-square .offre .image img.showed {
        opacity: 1;
        transform: rotate(0) scale(1);
    }

    .container-square section.offres-square .offre .title {
        text-transform: uppercase;
        margin-bottom: 30px;
        color: #e94d50;
        letter-spacing: 2px;
        text-align: center;
    }

    .container-square section.offres-square .offre .text {
        text-align: center;
    }

    @media only screen and (min-width: 959px) {
        .container-square section.offres-square .offre:nth-child(1) {
            border-right: 1px solid #d9d9d9;
            border-bottom: 1px solid #d9d9d9;
        }

        .container-square section.offres-square .offre:nth-child(2) {
            border-bottom: 1px solid #d9d9d9;
        }

        .container-square section.offres-square .offre:nth-child(3) {
            border-right: 1px solid #d9d9d9;
        }
    }

    section.footer-line-container {
        margin: 60px 20px;
        text-align: center;
        /*font-size: large;*/
    }

    @media only screen and (min-width: 1280px) {
        section.footer-line-container {
            margin: 60px auto;
        }
    }
}