body{
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.container{
    max-width: 80%;
    height: auto;
    margin: auto;
}

/*HAUT DE PAGE : HEADER*/
.div_header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 3rem;
}

.btn_noir{
    padding: 1.5rem 5rem 1.5rem 5rem;
    background-color: #13183F;
    color: white;
    border-radius: 3rem;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.btn_noir:hover{
    background-color: #666CA3;
}

.position_img{
    background-image: url("../img/femme_cafe.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 38%;
}

/*ZONE DE CONTACT : HERO*/
.div_gau-dro{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10rem;
}

h1{
    color: #13183F;
    font-size: 6rem;
    font-style: normal;
    font-weight: 800;
    max-width: 60%;
}

.bloc_gauche{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;
    height: 40rem;
}

.bloc_gauche p{
    color:#83869A;
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    max-width:45%;
    margin-bottom: 2rem;
}


.btn_orange{
    padding: 1.5rem 5rem 1.5rem 5rem;
    background: linear-gradient(180deg, #FF6F48 0%, #F02AA6 100%);
    color: white;
    border-radius: 3rem;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.btn_orange:hover{
    background:linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), linear-gradient(180deg, #FF6F48 0%, #F02AA6 100%); 
}


/*SECTION PRESENTATION*/
.fond_gris{
    background: linear-gradient(180deg, #FFF 0%, #F0F1FF 100%);
    padding-bottom: 15rem;
}


.card_diff{
    background: linear-gradient(180deg, #FF6F48 0%, #F02AA6 100%);
    width: 35rem;
    height: 35rem;
    border-radius: 1.5rem;
}

.card_diff h2{
    color: white;
    font-size: 3rem;
    font-style: normal;
    font-weight: 800;
    line-height: 3.5rem;
    padding: 0 0 0 2.5rem;
    margin-top: 12rem;
    max-width: 70%;
}

.taille_text_card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 25rem;
    margin-top: 4rem;
}

.card{
    background: white;
    width: 35rem;
    height: 35rem;
    border-radius: 1.5rem;
    box-shadow: 0px 25px 50px 0px rgba(6, 22, 141, 0.04);
}

.card h3{
    color:#13183F;
    font-size: 2rem;
    font-style: normal;
    font-weight: 800;
    padding: 2.5rem 2.5rem 0 2.5rem;
}

.card p{
    color: #83869A;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    padding: 0 2.5rem 0 2.5rem;

}

.lien_orange{
    color: #F74780;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    padding: 0 2.5rem 0 2.5rem;
    transition: 0.3s ease-in-out;
}

/*GRID*/
.div_cards{
    display: grid;
    grid-template-columns: repeat(3,1fr) ;
    grid-template-rows: auto;
    column-gap:2rem;
    row-gap:7rem;
    grid-template-areas: 
        "zone1 zone2 zone3"
        "zone4 zone5 zone6";
    margin-top: 15rem;
}

/*PICTOGRAMME EN BEFORE*/
.picto_course:before{
    content: url("../img/picto_course.svg");
    display: block;
    margin-top: -9rem;
    margin-bottom: 5rem;
}

.picto_design:before{
    content: url("../img/picto_design.svg");
    display: block;
    margin-top: -9rem;
    margin-bottom: 5rem;
}

.picto_photo:before{
    content: url("../img/picto_photo.svg");
    display: block;
    margin-top: -9rem;
    margin-bottom: 5rem;
}

.picto_crypto:before{
    content: url("../img/picto_crypto.svg");
    display: block;
    margin-top: -9rem;
    margin-bottom: 5rem;
}

.picto_business:before{
    content: url("../img/picto_panier.svg");
    display: block;
    margin-top: -9rem;
    margin-bottom: 5rem;
}

/*BAS DE PAGE : FOOTER*/
.fond_noir{
    background-color: #13183F;
    width: 100%;
}

.div_footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5rem;
}

.btn_violet{
    padding: 1.5rem 5rem 1.5rem 5rem;
    background: linear-gradient(180deg, #4851FF -54.32%, #F02AA6 100%);
    color: white;
    border-radius: 3rem;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.btn_violet:hover{
    background:linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), linear-gradient(180deg, #4851FF -54.32%, #F02AA6 100%);
    
}

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

/* Tablets and small desktops//1200px*/
@media only screen and (max-width: 1200px){
    .card,.card_diff{
        width: 100%;
        height: 30rem;
    }
}

/*Small tablets (portrait view)//992px*/
@media only screen and (max-width: 992px){
    .container{
        max-width: 90%;
    }

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

    .position_img{
        background-size: 45%;
    }

    /*SECTION PRESENTATION*/
    .card,.card_diff{
        width: 100%;
        height: 28rem;
    }

    .card_diff h2{
        font-size: 2rem;
        margin-top: 4rem;
    }

    .taille_text_card{
        display: flex;
        justify-content: space-evenly;
        height: 30rem;
        margin-top:-8rem;
    }

    /*PICTOGRAMME EN BEFORE*/
    .picto_course:before, .picto_design:before, .picto_photo:before, 
    .picto_crypto:before, .picto_business:before{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

}

/*Small tablets and large smartphones (landscape view)//768px*/
@media only screen and (max-width: 768px){
    .container{
        max-width: 90%;
    }
    
    /*ZONE DE CONTACT : HERO*/
    h1{
        font-size: 4rem;
    }

    .bloc_gauche{
        height: 30rem;
    }

    .bloc_gauche p{
        font-size: 1.5rem;
        max-width:60%;
    }
    
    /*SECTION PRESENTATION*/
    .div_cards{
        display: grid;
        grid-template-columns: repeat(2,1fr) ;
        row-gap:7rem;
        grid-template-areas: 
            "zone1 zone2"
            "zone3 zone4";
    }
    
    .card,.card_diff{
        width: 100%;
        height: 27rem;
    }

    .card_diff h2{
        font-size: 2.3rem;
        max-width: 80%;
        margin-top: 6rem;
    }

    .taille_text_card{
        display: flex;
        justify-content: space-evenly;
        height: 30rem;
        margin-top:-5rem;
    }

    /*PICTOGRAMME EN BEFORE*/
    .picto_course:before, .picto_design:before, .picto_photo:before, 
    .picto_crypto:before, .picto_business:before{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/*Smartphones //576px */
@media only screen and (max-width: 576px){
    .container{
        max-width: 90%;
    }

    /*HAUT DE PAGE : HEADER*/
    .div_header img{
        width: 60%;
        height: auto;
    }
    
    .btn_noir{
        padding: 1.5rem 3rem 1.5rem 3rem;
        font-size: 1.2rem;
    }

    .position_img{
        background-image: url("../img/femme_cafe_mobile.png");
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 70%;
    }

    /*ZONE DE CONTACT : HERO*/
    .div_gau-dro{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 5rem auto;
    }
    
    h1{
        font-size: 3.5rem;
        max-width: 100%;
    }

    .bloc_gauche{
        margin: 1rem;
        height: 55rem;
        justify-content: flex-start;
    }

    .bloc_gauche p{
        color:#83869A;
        font-size: 1.7rem;
        max-width:100%;
    }

    /*SECTION PRESENTATION*/
    .div_cards{
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-areas: 
            "zone1";
        margin-top: -5rem;
    }

    .card_diff{
        width: 100%;
        height: 10rem;
    }

    .card_diff h2{
        font-size: 2rem;
        margin-top: 2rem;
        max-width: 80%;
    }

    .taille_text_card{
        height: 26rem;
        margin-top: -2rem;
    }

    .card{
        width: 100%;
        height: 24rem;
    }

    /*PICTOGRAMME EN BEFORE*/
    .picto_course:before, .picto_design:before, .picto_photo:before, 
    .picto_crypto:before, .picto_business:before{
        margin-top: -6rem;
    }

     /*FOOTER*/
    .fond_gris{
        padding-bottom: 5rem;
        width: 100%;
    }

    .div_footer{
    justify-content: space-between;
    width: 35rem;
    }

    .div_footer img{
        width: 60%;
        height: auto;
    }

    .btn_violet{
        padding: 1.5rem 2.5rem 1.5rem 2.5rem;
        font-size: 1.2rem;
    }

}