/*!

 * fichier de style du projet CS

 * Copyright 2023 Steve NOUYEP

 * Copyright 2023 SEED, Inc.

 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

 */



/****************** SECTION MENU PRINCIPAL *****************/

.btn_menu

{

    color: white;

}



.navbar-custom {

    background-color: #333333;

    padding-bottom: 40px;

    padding-top: 40px;

}







.logo_menu

{

    width: 100px;

    position: absolute;

    top: -45px;

    left: 150px;

}



/* Modify brand and text color */



.navbar-custom .navbar-brand,

.navbar-custom .navbar-text {

    color: white;

}



.navbar-custom .nav-link

{

    color: white;

    font-size: small;

    text-transform: uppercase;

}



.navbar-nav > .active > a

{

    color: #E09620;

    font-weight: bold;

}



.navbar-nav > .active

{

    border-bottom: 3px solid #E09620;

}



.navbar-custom .nav-link:hover

{

    border-bottom: 3px solid #E09620;

}



.nav-item

{

    /*border-bottom: 3px solid #53893d;*/

    font-family: Candara;

    font-size: medium;

}







.app_d_menu

{

    width: 140px;

}



.lg_menu

{

    width: 36px;

}

.button_menu

{

    background-color: #fff;

    color:  #53893d;

    border-radius: 40px;

    font-size: small;

}



.mobile_cs

{

    width: 453px;

    height: 479px;

    margin-top: 40px;

}



.mobile_cs_xs

{

    width: 300px;

    height: 300px;

    margin-top: -10px;

    margin-bottom: 100px;

}



.image_accueil

{

    width: 100%;

    height: 479px;

    margin-top: 40px;

    margin-left: -30px;

}



.cadre_video

{

    border-radius: 10px;

    border: 5px solid #E09620;

}



#mobile_app_bg > svg {

    display: block;

}



.navbar-toggler

{

    color: red !important;

}





.bg_principal

{

    background-color: #F9F9F9;

    padding-bottom: 60px;

    background-image: url("../assets/img/bg_principal.png");

    background-size: cover;

}



.titre_section_principal

{

    margin-top: 120px;

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    font-size: x-large;

}



.texte_middle_p1

{

    color: #47890E;

}



.texte_middle_p2

{

    color: #E09620;

}



.img_fleche

{

    width: 21px;

    height: 219px;

    margin-left: 10px;

}



.img_join_us

{

    width: 220px;

    height: 50px;

}



.btn_join_us

{

    margin-top: 20px;

    background-color: #333333;

    font-size: medium;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: 220px;

    /*box-shadow: -1px 5px 6px 0px rgba(0,0,0,0.75);*/

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    text-transform: uppercase;

}



.btn_join_us:hover

{

    color: #fff;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);



}



.btn_connexion

{

    background-color: #FFFFFF;

    border-radius: 50px;

    color: #E09620;

    font-weight: 500;

    width: 150px;

    text-transform: uppercase;

    font-size: small;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.btn_connexion:hover

{

    color: #333333;

    transform: scale(1.02);

    -moz-transform: scale(1.02);

    -webkit-transform: scale(1.02);

    -ms-transform: scale(1.02);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}







/* CSS SECTION CATEGORIES POPULAIRES */



.titre_section

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 30px;

    font-size: x-large;

}



.sous_titre

{

    font-size: small;

    color: #53893d;

    font-family: Candara;

}



.trait

{

    border-bottom: 5px solid #dc8d00;

    width: 8%;

    border-radius: 10px;

}



.trait_long

{

    border-bottom: 4px solid #dc8d00;

    width: 10%;

}



.box_cat

{

    padding: 10px;

}



.icone_cat_pop

{

    width: 80%;

    height: 150px;

    border-radius: 20px;

    margin-top: 50px;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.icone_cat_pop:hover

{

    /*border: 3px solid #E09620;*/

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.description_cat_pop

{

    text-transform: uppercase;

    color: #E09620;

    font-weight: 600;

    /*text-align: center;*/

    margin-top: 15px;

    font-size: large;

}



.lien_categorie

{

    color: #333333;

}



.lien_categorie:hover

{

    text-decoration: none;

    color: #333333;

}



.ombre

{

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);



    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);

    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);

}



/********************** CSS DE LA SECTION DES COURS POPULAIRES ****************/

.section_cours

{

    background-color: #F9F9F9;

    padding-bottom: 60px;

    background-image: url("../assets/img/bg_cours.png");

    background-size: cover;

}



.img_cours

{

    height: 300px;

    border-bottom: 1px solid #707070;

}



.titre_cours

{

    text-transform: uppercase;

    font-weight: 650;

    text-align: left;

    font-size: medium;

}



.auteur

{

    text-transform: uppercase;

    font-weight: 650;

    text-align: left;

    font-size: small;

}



.cours_description

{

    font-size: small;

}



.btn_cours

{

    text-transform: uppercase;

    font-size: x-small;

    font-weight: bold;

    color: #333333;

}



.prix_cours

{

    text-transform: uppercase;

    color: #E09620;

    font-weight: bold;

    font-size: large;

    text-align: left;

}



.etiquette_cours

{

    background-color: #E09620;

    padding: 5px;

    text-transform: uppercase;

    position: absolute;

    border-radius: 5px;

    color: white;

    font-weight: bold;

    font-size: small;

    left: 10px;

    top: 20px;

}



.carte_cours

{

    margin-top: 50px;

    margin-left: 10%;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.carte_cours:hover

{

    /*border: 3px solid #E09620;*/

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}





.carte_cours:nth-child(1)

{

    margin-left: 0%;

}



.btn_consult_courses

{

    background-color: #E09620;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: auto;

    margin-top: 50px;

    text-transform: uppercase;

    font-size: medium;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.btn_consult_courses:hover

{

    color: white;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



/******** SECTION TEMOIGNAGES*******/



.section_temoignages

{

    background-color: #333333;

    padding-bottom: 60px;

    overflow: hidden;

}



.temoignages

{

    padding-bottom: 10px;

}



.titre_section_colore

{

    font-size: x-large;

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 30px;

    color: #E09620;

}



.sous_titre_colore

{

    font-size: small;

    color: #53893d;

    font-family: Candara;

}



.carte_temoignage

{

    border-radius: 10px;

    background-color: #F8F8F8;

    padding: 15px;

    margin-top: 50px;

}







.zone_auteur

{

    position: relative;

}



.img_temoignage

{

    height: 50px;

    width: 50px;

    border-radius: 50%;

    float: left;

}



.auteur_t

{

    color: #E09620;

    font-weight: bold;

    margin-left: 60px;

}



.profession

{

    margin-left: 60px;

    font-size: small;

    margin-top: -15px;

}



.titre_temoignage

{

    font-size: large;

}



/********** SECTION WORKS *************************/

.carte_works

{

    border-radius: 10px;

    background-color: #FFF;

    padding: 15px;

    margin-top: 50px;

}



.number_works

{

    border-radius: 50%;

    width: 50px;

    height: 50px;

    color: #fff;

    font-size: 1.7em;

    text-align: center;

    font-weight: bold;

    float: left;

    background-color: #E09620;

}



.texte_number

{

    padding: 10px;

    font-weight: 500;

    margin-left: 50px;

    font-size: 1.3rem;

}





/************ SECTION CITATION ***************/



.img_carousel

{

    width: 700px;

    height: 400px;

}



#citation

{

    margin-top: 50px;

}



.zone_citation

{

    margin-top: 50px;

}



.titre_citation

{

    font-weight: bold;

    color: #E09620;

    text-transform: uppercase;

    font-size: large;

}



.description_citation

{

    font-size: large;

    font-weight: 500;

    text-align: justify;

}





/************* SECTION PARTNERS ***********/

.partner

{

    padding-bottom: 50px;

    overflow: hidden;

}



.partners

{

    margin-top: 50px;

}



.img_partners

{

    max-height: 200px;

    /*height: 80px;*/

    max-width: 150px;

}



.box_partner

{

    height: 200px;

    width: 150px;

    align-items: center;

    align-content: center;

}



/************** SECTION FOOTER ****************/

.app_footer

{

    background-color: #333333;

}



.titre_footer

{

    margin-top: 50px;

    margin-bottom: 30px;

    color: white;

    text-transform: uppercase;

    font-size: medium;

}



.lien_footer

{

    color: white;

}



.lien_footer:hover

{

    color: white;

}



.suivez_nous

{

    margin-top: 30px;

    color: #E09620;

}



.img_rs

{

    /*width: 20px;*/

    height: 35px;

    padding: 5px;

    margin-bottom: 50px;

}



.lien_rs

{

    text-decoration: none;

}



.lien_rs:hover

{

    text-decoration: none;

}



.footer

{

    background-color: #E09620;

    color: white;

    padding: 20px;

    height: 60px;

}



.equipe

{

    font-weight: bold;

}



.copyright

{

    margin-left: -50px;

    text-align: left;

}



.designed

{

    text-align: right;

    margin-top: -40px;



}



/**************   MEDIAS QUERIES MOBILES    ********************/

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {

    .logo_menu

    {

        width: 100px;

        position: absolute;

        top: -45px;

        left: 0px;

    }

    .box_btn_menu

    {

        left: 80%;

        position: absolute;

        /*background-color: red;*/

    }



    .titre_section_principal

    {

        text-align: center;

        margin-top: 20px;

    }



    .logo_rs_bg_principal

    {

        /*margin-left: 30%;*/

        width: 100%;

    }



    .image_accueil

    {

        width: 100%;

        height: 279px;

        margin-top: 10px;

        margin-left: 0px;

    }



    .titre_section, .titre_section_colore

    {

        font-family: Candara;

        font-weight: bold;

        font-size: x-large;

        text-align: center;

    }



    .trait_long

    {

        border-bottom: 3px solid #dc8d00;

        width: 100px;

        border-radius: 10px;

        margin-left: 30%;

    }



    .icone_cat_pop

    {

        width: 80%;

        height: 200px;

        border-radius: 20px;

        margin-top: 50px;

        transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    }





    .titre_citation

    {

        font-weight: bold;

        color: #E09620;

        text-transform: uppercase;

        font-size: large;

        text-align: center;

    }



    .description_citation

    {

        font-size: large;

        font-weight: 500;

        text-align: center;

    }



    .titre_footer

    {

        text-align: center;

    }



    .box_lien_footer

    {

        text-align: center;

    }



    .copyright

    {

        margin-left: 0px;

        text-align: center;

        font-size: small;

    }



    .designed

    {

        text-align: center;

        margin-top: -10px;

    }





    .footer

    {

        background-color: #E09620;

        height: 120px;

        padding-top: 20px;

        text-align: center;

        float: none;

        padding-bottom: 10px;

    }



    .titre_read_course

    {

        font-size: medium;

    }



}



/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {





}



/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {



}



/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {



}



/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {



}



/************* CSS FORMULAIRES CONNEXION *****************/



.form_connexion

{

    padding: 50px;

}



.arriere_form

{

    margin-top: 50px;

    background-color: #fff;

    border-radius: 10px;

    margin-bottom: 50px;

}



.titre_form

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    color: #E09620;

    font-size: medium;
}


.bg_form


{

    background-color: #F9F9F9;

    padding-bottom: 60px;

    background-image: url("../assets/img/epargne.jpg");

    background-size: cover;

    border-radius: 10px 0 0 10px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 25% center; 

}



.btn_form

{

    background-color: #E09620;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    margin-top: 10px;

    text-transform: uppercase;

    font-size: medium;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    width: 100%;

}



.btn_form:hover

{

    color: white;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.lien_form

{

    text-transform: uppercase;

    font-size: small;

    font-weight: bold;

    color: #333333;

}





/************* CSS DE LA PAGE ABOUT *****************/



.sous_titre_about

{

    margin-top: 20px;

    font-size: medium;

    color: #53893d;

    font-family: Candara;

    text-transform: capitalize;

}



.img_about

{

    margin-top: 7em;

    width: 100%;

}



.img_about_3

{

    margin-top: 3em;

    width: 100%;

}



.img_about_3s

{

    margin-top: 3em;

    width: 100%;

    height: 350px;

    margin-bottom: 50px;

}



.section_about_2

{

    background-color: #f8f8f8;

}



/******* CSS DE LA PAGE CONTACT *******/



.arriere_contact

{

    margin-top: 50px;

    margin-bottom: 50px;

}



.arriere_form_contact

{

    margin-top: 30px;

    background-color: #fff;

    border-radius: 10px;

    margin-bottom: 50px;

}



.icon_contact

{

    height: 50px;

    width: 50px;

    display: inline-block;

    background-color: #E09620;

    color: #fff;

    font-size: x-large;

    padding: 10px;

    border-radius: 5px;

    float: left;

}



.text_contact_icone

{

    padding: 10px;

    font-weight: bold;

}



.description_contact_icone

{

    padding: 10px;

    margin-left: 50px;

    margin-top: -10px;

}



.i_ulif

{

    text-transform: none

}





/*********** CSS DETAILLE DE LA PAGE PRODUIT COURS **********/



.titre_complete_course

{

    margin-top: 50px;

    font-size: large;

    text-transform: uppercase;

    font-family: Candara;

    font-weight: bold;

}



.zone_enrol

{

    margin-top: 50px;

}



.btn_enrol

{

    margin-top: 20px;

    background-color: #E09620;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: 100%;

    /*box-shadow: -1px 5px 6px 0px rgba(0,0,0,0.75);*/

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    font-size: medium;

    text-transform: uppercase;

}



.btn_enrol:hover

{

    color: #fff;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);



}



.zone_about_course

{

    background-color: #fff;

    border-radius: 5px;

    padding: 20px;

    margin-bottom: 30px;



}



.product

{

    background-color: #f2f3f5;

    padding: 10px;

}



.titre_resume

{

    margin-top: 10px;

    margin-bottom: 15px;

    font-size: large;

    text-transform: uppercase;

    font-family: Candara;

    font-weight: bold;

}



.icon_stats

{

    height: 20px;

    width: 20px;

    display: inline-block;

    background-color: #E09620;

    color: #fff;

    font-size: x-large;

    padding: 10px;

    border-radius: 5px;

    float: left;

}



.zone_formats

{

    margin-top: 20px;

    background-color: #fff;

    border-radius: 5px;

    padding: 20px;

    margin-bottom: 20px;

}



.btn_achat

{

    margin-top: -50px;

    background-color: #333333;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    /*box-shadow: -1px 5px 6px 0px rgba(0,0,0,0.75);*/

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-left: 20px;

    padding-right: 20px;

    z-index: 5000;

    text-transform: uppercase;

    font-size: medium;

}



.btn_achat:hover

{

    color: #fff;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.section_banner

{

    margin-bottom: 20px;

}





/*********** CSS DETAILLE DE LA PAGE SHOP **********/



.shop

{

    background-color: #f5f7fa;

}



.titre_section_shop

{

    margin-top: 80px;

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    font-size: x-large;



}



.trait_center

{

    height: 3px;

    background-color: #E09620;

    width: 300px;

    margin-top: -5px;

}







/********** CSS PAGE CATEGORIES ***********/

.section_formations

{

    background-color: #fdc686;

}





/******     CSS PAGE ESPACE UTILISATEUR ************/



.user_space

{

    background-color: #f0f0f0;

    min-height: 100vh;

}



.menu_droite

{

    background-color: #333333;

    /*min-height: 100vh;*/

    /*position: fixed;*/

    z-index: 5000

}



.logo_user_space

{

    /*background-color: red;*/

    width: 110px;

    height: 100px;

}



#menu_user a

{

    color: #f5f7fa;

    padding: 15px;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

    font-family: Candara;

}



#menu_user a:hover

{

    background-color: #E09620;

    border-radius: 3px;

    font-family: Candara;



}



#menu_user > .active > a

{

    color: #fff;

    font-weight: bold;

    font-family: Candara;



}



#menu_user > .active

{

    background-color: #E09620;

    border-right: 10px solid #E09620;

    border-radius: 3px;

    font-family: Candara;

}



#menu_user > li

{

    list-style: none;

}



.content_userspace

{

    background-color: #f0f0f0;

    padding: 10px;

}



.stats_box

{

    background-color: #E09620;

}



.stats_box_no_color

{

    border-radius: 5px;

    /*width: 100px;*/

    height: 100px;

    padding: 10px;

    text-align: center;

    margin-top: 10px;

    margin-left: 50px;

}



.titre_stats

{

    margin-top: 50px;

    margin-left: 50px;

    padding: 10px;

    font-family: Candara;

    font-weight: bold;

}



.titre_user

{

    margin-top: 20px;

    margin-left: 50px;

    padding: 10px;

    font-family: Candara;

    font-weight: bold;

    font-size: medium;

    text-transform: uppercase;

    /*text-transform: uppercase;*/

}



.titre_user_space

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 50px;

    font-size: medium;

}



.titre_read_course

{

    font-family: Candara;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 10px;

}



.description_user

{

    margin-left: 50px;

    padding-left: 10px;

}



/************** CSS PAGE CATEGORIE ************/



.btn_add

{

    background-color: #E09620;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: auto;

    text-transform: uppercase;

    font-size: medium;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.btn_add:hover

{

    color: white;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.btn_add_dark

{

    background-color: #333333;

    border-radius: 50px;

    color: white;

    font-weight: 500;

    width: auto;

    text-transform: uppercase;

    font-size: medium;

    transition: transform 500ms ease-in-out, box-shadow 500ms linear;

}



.btn_add_dark:hover

{

    color: white;

    transform: scale(1.05);

    -moz-transform: scale(1.05);

    -webkit-transform: scale(1.05);

    -ms-transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}



.ico_edit

{

    text-decoration: none;

    color: #333333;

}

.ended_button{
    color: white;
    background-color:#e09620 ; 
    border: 1px solid #e09620;
}