/* Breakpoints mobile first - modèle Bootstrap

On commence par le support format xs formt infèrieur à 576 px (smartphones portrait view)
sm // Small tablets and large smartphones (landscape view)//576px
md//Small tablets (portrait view)//768px
lg//Tablets and small desktops//992px
xl//Large tablets and desktops//1200px
xxl//XLarge tablets and desktops//1400px */


/*Media queries mobile first - selon modèle ci-dessus*/

@media only screen and (min-width: 576px){
    /*HAUT DE PAGE : HEADER*/
    .div_nav a{
        font-size: 1.7rem;
    }
    
    /*ZONE DE CONTACT : HERO*/
    .btn_orange{
        width: 60%;
    }

    /*SECTIONS : SERVICES/EQUIPE/COMPET*/
    .fond_service, .fond_equipe, .fond_compet{
        padding: 10rem 0rem 20rem 0rem;
    }

    .div_cards_services, .div_cards_equipe, .div_cards_compet{
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 10rem;
        column-gap: 2rem;
    }

    /*SECTION : PORTFOLIO*/
    .div_btn{
        width: 80%;
    }

    .div_btn a{
        padding: 0.5rem 2rem;
    }
}

@media only screen and (min-width: 768px){
    .container_header, .container{
        max-width: 90%;
        margin: auto;
    }

    /*HAUT DE PAGE : HEADER*/
    .logo{
        width: 40%;
    }

    /*ZONE DE CONTACT : HERO*/
    .btn_orange{
        width: 40%;
    }

    /*SECTION : PORTFOLIO*/
    .div_btn{
        width: 60%;
    }

    .div_ordinateurs{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /*BAS DE PAGE : FOOTER*/
    .fond_footer{
        padding: 5rem 0rem ;
    }
    
    .div_nav2 ul{
        display: flex;
        flex-direction: row;
        width: 90%;
        align-items: center;
        height:auto ;
        margin: auto;
    }

    .div_nav2 a{
        font-size: 2rem;
    }
}

@media only screen and (min-width: 992px) {
    /*HAUT DE PAGE : HEADER*/
    .logo{
        width: 100%;
    }

    .div_header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .div_nav{
        width: 60%;
    }

    .div_nav a{
        font-size: 2rem;
    }

    /*ZONE DE CONTACT : HERO*/
    h1{
        font-size: 4rem;
    }

    .btn_orange{
        width: 30%;
    }

    /*SECTIONS : SERVICES/EQUIPE/COMPET*/
    .div_cards_services, .div_cards_equipe{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 0rem;
    }

    .card_equipe h3{
        font-size: 2rem;
    }

    .social{
        width: 100%;
    }
    
    .taille_img{
        width: 3.5rem;
    }
}

@media only screen and (min-width: 1200px){
    /*SECTION : SERVICES ET EXPERTISES*/
    .para_blanc, .para_noir{
        width: 60%;
        margin: auto;
    }

    /*SECTION : UNE EQUIPE AU TOP NIVEAU*/
    .social{
        width: 75%;
    }

    /*SECTION : DOMAINES DE COMPETENCE*/
    .div_cards_compet{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    /*SECTION : PORTFOLIO*/
    .div_btn{
        width: 40%;
    }
}

@media only screen and (min-width: 1400px){
    /*ZONE DE CONTACT : HERO*/
    .btn_orange{
        width: 20%;
    }

    /*SECTION : PORTFOLIO*/
    .div_btn{
        width: 30%;
    }
}