/********** BLOC HERO_A (Home Page) **********/

.bloc.d {
    display: flex;
    justify-content: center;
}

.bloc.d .wrapper{
    width: 100%;
    max-width: 1024px;    
    padding: var(--gap-8) var(--gap-2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap-4);
}
.bloc.d .wrapper.reverse{
    flex-direction: row-reverse;
}
.bloc.d .wrapper .col{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.bloc.d .wrapper .col img{
    width: 100%;
}
.bloc.d .wrapper h2{
    margin: var(--gap-2) 0 var(--gap-4) 0;    
    font-size: 3.2rem;
    font-weight: var(--font-primary-bold);
    line-height: 120%;
    text-align: center;
    position: relative;
}
.bloc.d .wrapper h2 strong{       
    font-size: 5.5rem;
    font-weight: var(--font-primary-bold);
    line-height: 105%;
}
.bloc.d .wrapper h2 span{
    position: absolute;
    bottom: -28px;
    right: -50%;
    transform: rotate(-3.5deg);

    font-size: 2.4rem;
    font-weight: var(--font-primary-bold);
    line-height: 105%;
    padding: 5px var(--gap-2);       
}  

.bloc.d .wrapper .paragraph{
    margin-bottom: var(--gap-2);
    text-align: center;
}

.bloc.d .wrapper .button{
    margin-bottom: var(--gap-2);
    width: 100%;
    text-align: center;    
}


/******************** RESPONSIVE max-width: 480px ********************/
@media (max-width : 480px) {
}