@charset "UTF-8";
/***!  /media/templates/site/avenir/css/mod_avenir_home_banner.css?736373  !***/

.homeBanner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    height: calc(100vh - var(--header-height-big) - 20px); /* 20px de marge en bas, pour montrer qu'il y a une suite */
    height: calc(100svh - var(--header-height-big) - 20px);
    min-height: 500px;
    padding: 60px var(--global-padding);
    background: var(--color-1);
}
    .homeBanner_image{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.7;
    }
    .homeBanner::before{
        content: '';
        width: 100%;
        height: 300px;
        background: linear-gradient(180deg, var(--color-1), transparent);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        opacity: 0.7;
    }
    .homeBanner_caption{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 50px;
        max-width: 768px;
        position: relative;
        z-index: 3;
    }
        .homeBanner_title{
            flex-grow: 1;
            color: var(--color-2);
            line-height: 1.2;
            font-family: var(--font-1);
            font-size: 48px;
            font-weight: 700;
            text-transform: none;
        }
        .homeBanner_button{
            flex-shrink: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            max-width: 160px;
            height: 110px;
            padding: 10px;
            border-radius: 20px;
            background: var(--color-5);
            color: var(--color-2);
            text-align: center;

            transition: background .2s ease-in-out;

            &:hover{
                background: var(--color-5-darker);
            }
        }
            .homeBanner_button-title{
                line-height: 1.2;
                font-size: 20px;
                font-weight: 800;
                text-transform: uppercase;
            }

@media (max-width: 1280px) {

    .homeBanner{
        height: calc(100vh - var(--header-height) - 20px);
        height: calc(100svh - var(--header-height) - 20px);
    }

}

@media (max-width: 1024px) {

    .homeBanner_title{
        font-size: 40px;
    }

}

@media (max-width: 768px) {

    .homeBanner{
        min-height: 0;
    }
    .homeBanner_caption{
        flex-direction: column;
        gap: 30px;
        max-width: 480px;
    }
    .homeBanner_title{
        font-size: 32px;
        text-align: center;
    }
    .homeBanner_button{
        width: auto;
        min-width: 150px;
        padding: 0 20px;
        border-radius: 20px;
    }
    .homeBanner_button-title{
        font-weight: 700;
    }

}