/* -------- section créé avec l'éditeur de blocks wordpress affichant 2 colones -------- */
.page-vos-besoins-section{
    padding:50px 80px;

    & h1{
        font-family:'Didot';
        font-size:3.5rem;
        color:var(--black);
        line-height: 1.1;
        padding-bottom:15px;
    }

    & p{
        padding: 10px 0;
        font-family:'ProximaNovaRegular';
        color:var(--black);
        font-size:1rem;
        max-width:1200px;
    }

    .sous-liste{
        padding:0 0 0 50px;
    }

    & h2{
        background-color:var(--beige);
        font-family:'Didot';
        font-size:2.2rem;
        color:var(--black);
        line-height: 1.1;
        margin:20px 0 30px 0;
        padding:20px;
    }

    & h4{
        font-family:'ProximaNovaSemiBold';
        color:var(--black);
        font-size:1rem;
        text-transform: uppercase;
    }

    & ul{
        padding:10px 0 0 35px ;
        list-style-position: inside;
    }

    & li{
        font-family:'ProximaNovaSemiBold';
        color:var(--black);
        font-size:1rem;      
    }

    /* colone des images */
    .vos-besoins-image{
        display:flex;
        flex-direction: column;
        align-items: end;
        padding:20px;
        & img{
            width: 100%;
            max-width: 350px;
            height: auto;
            object-fit: cover;
        }
    }

    & h3{
        font-family:'Didot';
        font-size:2rem;
        color:var(--black);
        padding:30px 0 15px 0;
        line-height: 1.1;
    }

    .liste-space li{
        padding:10px 0; 
        font-family:'ProximaNovaRegular';
    }

    & strong{
        font-family: 'ProximaNovaSemiBold';
    }

    & em{
        padding: 5px 0;
    }
}


.column-flex{
    display:flex;
}


/* ----------------------------------------- responsive ---------------------------------------- */

/* ---------------- large desktop ----------------- */
@media screen and (max-width:1280px){
    
    .page-vos-besoins-section{
    .vos-besoins-image{
        & img{
            width: 100%;
            max-width: 250px;
            height: auto;
        }
    }
}
}

/* ----------------- small desktop ----------------- */
@media screen and (max-width:1024px){
.column-flex{
    display:flex;
    flex-direction: column;
}
    .page-vos-besoins-section{
        & h1{
        font-size:3rem;
    }

    & p{

        font-size:0.9rem;
    }

    .sous-liste{
        padding:0 0 0 30px;
    }

    & h2{
        font-size:2rem;
        margin:0px 0px 30px 0px;
    }

    & h3{
        font-size:1.8rem;
    }

    & h4{
        font-size:0.9rem;
    }

    & ul{
        padding:10px 0 0 15px ;
    }

    & li{
        font-size:0.9rem;      
    }
    .vos-besoins-image{
        padding: 50px 0 0px 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
}
}

/* ---------------------- tablet --------------------- */
@media screen and (max-width:768px){
    .page-vos-besoins-section{
        padding: 30px 50px;
        & h1{
        font-size:2.5rem;
        padding-bottom: 15px;
    }

    .sous-liste{
        padding:0 0 0 15px;
    }

    & h2{
        font-size:1.8rem;
        margin:0px 0 30px 0;
    }

    & ul{
        padding:10px 0 0 0px ;
    }
    
    & h3{
        font-size:1.6rem;
    }

    .vos-besoins-image{
        padding: 20px 50px 20px 50px;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        & img{
            aspect-ratio:4/3 !important;
            max-width:350px;
        }
        & .image-osteo {
        & img {
        aspect-ratio: auto !important;
        max-width: 350px;
      }
    }
    }
}
}


/* ------------------- mobile ------------------- */
@media screen and (max-width:480px){
    .page-vos-besoins-section{
         padding: 30px 30px 10px 30px;
    & h1{
        font-size:2.5rem;
    }

    & p{

        font-size:0.8rem;
    }

    & h2{
        font-size:1.6rem;
    }

    & h4{
        font-size:0.8rem;
    }

    & ul{
        padding:10px 0 0 15px ;
    }

    & li{
        font-size:0.8rem;      
    }
}
}