/************************************************************************
                               DESKTOP                               
************************************************************************/
/********** BLOC HERO_B - PAGE SECONDAIRES **********/
.bloc.hero_C {
    min-height: 300px;
    margin-top: var(--height-header);
    display: flex;
    justify-content: center;
    color: var(--color-black);
}

.bloc.hero_C .wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--gap-5) 0;
    gap: var(--gap-5);
}

.bloc.hero_C .wrapper .top {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    width: 100%;
    padding: 0 var(--gap-5);
}

.bloc.hero_C .wrapper .bottom {
    height: 60vh;
    position: relative;
    width: 100%;
}

.bloc.hero_C .wrapper h1 {
    font-size: 7rem;
    line-height: 7.5rem;
    width: 100%;
    text-align: end;
}

.bloc.hero_C .wrapper p {
    width: 70%;
    text-align: end;
}
/************************************************************************
                               RESPONSIVE
************************************************************************/

@media (max-width: 768px) {    
    .bloc.hero_C .wrapper h1 {
        font-size: 6rem;
        line-height: 6.5rem;
        max-width: 75%;
    }
    .bloc.hero_C .wrapper p {
        width: 100%;
        text-align: justify;
    }
}

@media (max-width: 480px) {
    .bloc.hero_C {
        margin-top: var(--height-header-mobile);
    }
    
    .bloc.hero_C .wrapper h1 {
        font-size: 3rem;
        line-height: 4rem;
        max-width: 100%;
    }

    .bloc.hero_C .wrapper .top {
        padding: 0 var(--gap-2);
    }
}

@media (max-height : 450px) {    
    .bloc.hero_C .wrapper .bottom {
        height: 90vh;
    }
}