/* ----------- section avec background beige pour afficher un titre et texte en option ------------ */
.vos-besoins-solutions{
    padding: 20px 0 30px 0;
    .vos-besoins-solutions-titre{
        background-color:var(--beige);
        padding:30px 80px;

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

    .titre-only{
        padding-bottom:0;
    }

    & p{
        padding: 5px 0;
        max-width:1000px;
    }

    & ul {
        font-family:'ProximaNovaRegular';
        list-style-position: inside;
        & li{
            padding: 5px 0;
            color:var(--black);
            font-size:1rem;     
        }
    }
}

/* ----------------- section avec des boites renvoyant vers les différentes solutions ---------------- */
    & .solutions-container{
        padding: 50px 80px;
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        gap:50px;
    }

    .vos-besoins-solutions-item{
        width:16%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: space-between;
        & h4{
            color:var(--orange);
            font-family: 'ProximaNovaBold';
            font-size:1rem;
            margin:0;
            padding: 5px 0;
        }
        & img{
            width:100%;
            aspect-ratio:3/4;
            object-fit: cover;
        }

        & h6{
            color:var(--black);
            font-family: 'ProximaNovaSemiBold';
            font-size:1rem;
            line-height:1;
            margin:0;   
            padding:7px 0;    
        }

        & p{
            padding-bottom: 5px;
            font-size:0.9rem;
        }

        & .solutions-button{
            width:100%;
            & button{
                width:100%;
            }
        }
    }
}


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

/* ---------------- large desktop ----------------- */
@media screen and (max-width:1280px){
    .vos-besoins-solutions{
    & .vos-besoins-solutions-item{
        width:15%;
        & h4{
            font-size:0.9rem;
        }

        & h6{
            font-size:0.9rem;
            padding: 7px 0 3px 0;
        }

        & .solutions-button{
            & button{
                font-size:0.9rem;
                padding:7px 0;
            }
        }
    }
}
}

/* ---------------- small desktop ----------------- */
@media screen and (max-width:1024px){
    .vos-besoins-solutions{
    & .vos-besoins-solutions-item{
        width:25%;
    }
}
}

/* ---------------- tablet ----------------- */
@media screen and (max-width:768px){
.vos-besoins-solutions{
    & .solutions-container{
        padding: 50px;
        gap:30px;
    }

& .vos-besoins-solutions-titre{
    padding:20px 50px;

    & h3{
        font-size:1.8rem;
    }

    & ul {
        & li{
            font-size:0.9rem;     
        }
    }

    & p{
        font-size:0.9rem;
    }

}

}
    .vos-besoins-solutions{
    & .vos-besoins-solutions-item{
        width:42%;
        & h6{
            font-size:0.8rem;
        }

        & p{
            font-size:0.8rem;
        }

        & .solutions-button{
            & button{
                font-size:0.8rem;
                padding:6px 0;
            }
        }
    }
}
}

/* ---------------- mobile ----------------- */
@media screen and (max-width:480px){
.vos-besoins-solutions{
    padding: 0px 0 20px 0;

    & .solutions-container{
        padding:30px;
        gap:20px;
    }


    & .vos-besoins-solutions-titre{
    padding:20px 30px;

    & h3{
        font-size:1.6rem;
    }

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

    & p{
        font-size:0.8rem;
    }



        & .vos-besoins-solutions-item{
        width:43%;
        & h6{
            font-size:0.8rem;
        }

        & p{
            font-size:0.8rem;
        }

        & .solutions-button{
            & button{
                font-size:0.8rem;
                padding:6px 0;
            }
        }
    }
    }
}
}