/* -------- bannière haut de page avec lien -------- */
.rides-header {
    background-image: url('../../images/vos-besoins/header/rides-header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    align-items: end;
    height: 300px;
    display: flex;
    &::before {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, rgba(16, 89, 116, 0.3) 0%, rgba(232, 247, 252, 0.25) 51%, rgba(255, 255, 255, 0.25) 100%);
    }
    & a {
        color: var(--white);
        font-size: 1.2rem;
        font-family: 'proximaNovaSemiBold';
        text-shadow: 1px 1px 7px #10597424;
        position: relative;
        z-index: 1;
        padding: 30px 80px;
    }
}

#levres-header{
    background-image: url('../../images/vos-besoins/header/levres-header.jpg');

}

#regard-header{
    background-image: url('../../images/vos-besoins/header/regard-header.jpg');

}

#cheveux-header{
    background-image: url('../../images/vos-besoins/header/cheveux-header-03.jpg');

}

#cicatrices-header{
    background-image: url('../../images/vos-besoins/header/cicatrices-header.jpg');

}

#peau-header{
    background-image: url('../../images/vos-besoins/header/peau-header-03.jpg');

}

#xanthelasma-header{
    background-image: url('../../images/vos-besoins/header/xanthelasma-header-02.jpg');

}

#acne-header{
    background-image: url('../../images/vos-besoins/header/acne-header.jpg');

}

#osteo-header{
    background-image: url('../../images/vos-besoins/header/osteo.jpg');

}

#epilation-header{
    background-image: url('../../images/vos-besoins/header/epilation.jpg');

}

@media screen and (max-width:1024px){
    .rides-header, #levres-header, #regard-header, #cheveux-header, #cicatrices-header, #peau-header, #xanthelasma-header, #acne-header, #osteo-header, #epilation-header{
        height:250px;
    }
}

@media screen and (max-width:768px){
    .rides-header, #levres-header, #regard-header, #cheveux-header, #cicatrices-header, #peau-header, #xanthelasma-header, #acne-header, #osteo-header, #epilation-header{
        height:180px;
        & a{
            padding:30px 50px;
            font-size:1rem;
        }
    }

}

@media screen and (max-width:480px){
    .rides-header, #levres-header, #regard-header, #cheveux-header, #cicatrices-header, #peau-header, #xanthelasma-header, #acne-header, #osteo-header, #epilation-header{
        height:150px;
        & a{
            padding:20px 30px;
        }
    }

}