/************************************************************************
                               DESKTOP                               
************************************************************************/
/********** BLOC HERO_A - IMAGE ACCUEIL **********/

.bloc.hero_A {
    height: 100vh;
    position: relative;
    background-color: var(--color-black-trans-plus);
    display: flex;
    justify-content: center;
    background-attachment: fixed;
}

.bloc.hero_A .wrapper {
    height: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--gap-5) 25vh var(--gap-5);
}

.bloc.hero_A .wrapper h1 {
    font-size: 7rem;
    line-height: 7.5rem;
    color: var(--color-white);
}

.bloc.hero_A .wrapper p {
    font-size: 3rem;
    line-height: 4rem;
    color: white;
}

.bloc.hero_A .button {
    position: fixed;
    left: 50%;
    bottom: var(--gap);
    transform: translate(-50%, 0);
    padding: 15px 15px;
    font-size: 1.5rem;
    z-index: 9;
    width: calc(3 * var(--width-column) + 3 * var(--width-space));
    min-width: 300px;
    text-align: center;
}

/************************************************************************
                               RESPONSIVE
************************************************************************/

@media (max-width: 1024px) {
    /********** BLOC_A - Titre, paragraphe et bouton max-width : 1024px **********/
    .bloc.bloc_A .wrapper h2 {
        width: 100%;
    }
}
@media (max-width: 768px) {    
    .bloc.hero_A {
        background-attachment: scroll;
    }

    .bloc.hero_A .wrapper h1 {
        font-size: 6rem;
        line-height: 6.5rem;
        text-align: center;
    }
    .bloc.hero_A .wrapper p {
        font-size: 2rem;
        line-height: 3rem;
        text-align: center;
    }
    .bloc.bloc_A .wrapper .bottom {
        flex-direction: column;
    }

    .bloc.bloc_A .wrapper .bottom .left {
        width: 100%;
        text-align: justify;
    }
}

@media (max-width: 480px) {  
    .bloc.hero_A .wrapper h1 {
        font-size: 4.5rem;
        line-height: 5rem;
    }
    .bloc.hero_A .wrapper {
        padding: 0 var(--gap-2) 25vh var(--gap-2);
    }
    .bloc.bloc_A .wrapper {
        padding: var(--gap-5) var(--gap-2);
    }

    .bloc.bloc_A .wrapper h2 {
        font-size: 3rem;
        line-height: 3.5rem;
    }

}

@media (max-height : 450px) {    
    .bloc.hero_A {
        height: 150vh;
    }
}