/* -------- section créé avec l'éditeur de blocks wordpress affichant 2 colones -------- */
.page-nos-solutions{
padding: 30px 0 60px 0;
.column-flex{
    display:flex;
    gap:30px;
}

.column-flex-header{
    display:flex;
    gap:30px;
}

}
.page-nos-solutions-section{
    padding:20px 80px;
    & a{
        color:var(--black);
    }

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


    & 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;
        margin:20px 0 30px 0;
        padding:20px;
    }

    & h4{
        font-family:'Didot';
        color:var(--black);
        font-size:1.4rem;
        line-height:1.2;
        margin: 20px 0 0 0;

  }

    & hr{
        width:400px;
        border: 2px solid var(--beige);
        margin:5px 0 20px 0;
    }

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

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

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

    & 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;
    }
}

.beige-bloc{
    background-color:var(--beige);
    & .sous-bloc{
        display:flex;
        flex-direction: column;
        align-items: center;
        width:25%;
        padding: 0 10px;
        & h3, p{
            text-align:center;
        }
    }
}

.column-flex-end{
    display:flex;
    flex-direction: column;
    justify-content: end;
}

.container-led{
    display:flex;
    flex-wrap:wrap;
    gap:5%;
    padding: 0px 80px 80px 80px;
    & article{
        width:46%;
    }
    & img{
        border-radius:50%;
        aspect-ratio: 1/1;
        object-fit: cover;
        width:150px;
        height:150px;
        float: right;
        padding:5px;
    }
}


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

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

/* ----------------- small desktop ----------------- */
@media screen and (max-width:1024px){
.column-flex{
    display:flex;
    flex-direction: column;
}

.column-flex-header{
    & img{
        aspect-ratio:3/4 !important;
    }
}
    .page-nos-solutions-section{
        & h1{
        font-size:3rem;
    }

    & p{

        font-size:0.9rem;
    }

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

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

    & h3{
        font-size:1.8rem;
    }

    & h4{
        font-size:1.3rem;
    }

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

    & li{
        font-size:0.9rem;      
    }
    .vos-solutions-image{
        padding:0;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        & .column-image{
            max-width:none;
        & img{
            max-width:none;
            aspect-ratio: 16/9 !important;
            height:220px;
        }
        }

    }
}

.beige-bloc{
    & .sous-bloc{
        width:100%;
    }
}

}

/* ---------------------- tablet --------------------- */
@media screen and (max-width:768px){
    .page-nos-solutions{
        padding:15px 0px;

        & .column-flex-header{
        flex-direction: column;
            & img{
                aspect-ratio: 16/9 !important;
            }
        }

        & .page-nos-solutions-section{
            padding:10px 50px;

        & h1{
        font-size:2.5rem;
        padding-bottom: 15px;
        }

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

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

        & .vos-solutions-image{
        flex-direction: column;
        align-items: center;
        & .column-image{
            & img{
                height:150px;
            }
        }
    }
}
}

hr{
            max-width:350px;
        }

.container-led{
    padding: 0px 50px 50px 50px;
    gap:30px;
    & article{
        width:100%;
    }
}


}


/* ------------------- mobile ------------------- */
@media screen and (max-width:480px){
    #titre-led{
        font-size:2.2rem;
    }
    .page-nos-solutions{
    
    .page-nos-solutions-section{
         padding: 5px 30px;
    & h1{
        font-size:2.5rem;
    }

    & p{

        font-size:0.8rem;
    }

    & h2{
        font-size:1.6rem;
    }

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

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

hr{
        max-width:200px;
    }

.container-led{
    padding: 0 30px 50px 30px;
        & p, li{

        font-size:0.8rem;
    }
    & img{
        width:100px;
        height:100px;
    }
}

}