.container-page-accueil{
    max-width: 1200px;
    margin:0 auto;
}


.image-home-agents{
    background:url("https://www.mercanet.org/wp-content/uploads/2020/03/img_home-scaled.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height:250px;
    width: 100%;
}

.container-page-accueil{
    margin-top:-100px !important;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.main-container-annonces-flash {
    width: 77%;
}

.colonne-principale-home{
    width:77%;
    background-color:white;
    padding:30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    align-self: flex-start;
}

.colonne-principale-home h2{
    color:#e26f38;
    font-weight: bold;
    font-size:28px;
    font-style:italic;
}
.colonne-principale-home span.sous-titre-home{
    color:black;
    font-size:18px;
    margin-bottom:20px;
}

.colonne-secondaire-home{
    width:23%;
    background-color:#F5F5F5;
    box-sizing: border-box;
}

.row-page-accueil{
    display:flex;
    justify-content: space-between;
}



.colonne-home-middle{
    width:18%;
}

.colonne-home-right{
    width:32%;
    margin-top:50px;
}

.avant-titre-accueil{
    padding-left:20px;
    font-size:0.8rem;
    font-weight: bold;
}

.border-bloc{
    border:1px solid #CCCCCC;
    border-top:none;
    display:flex;
    flex:auto;
    flex-direction: column;
    transition:all 0.2s ease-out;
}

.nota-bene .border-bloc{
    border:1px solid #CCCCCC;

}

.actualite{
    display: flex;
    flex-direction: column;
    margin:15px 0px;

}

.actualite, .nota-bene{
    width:66%;
    position: relative;
}

.image-a-la-une-home img{
    width:100%;
    height: auto;
}


#actualite-courante, .actualite{
    transition:all 0.5s ease-out;
}

.avant-titre-actualite{
    color:#004662;
}

.titre-bloc-actualite, .titre-bloc-agenda, .titre-bloc-discussion, 
.titre-bloc-application, .titre-bloc-tutoriel, .titre-bloc-actualite-reseau{
    display:flex;
    flex-wrap: wrap;
    font-size: 10px;
    line-height: 15px;
    text-transform: uppercase;
    padding:20px 0px 11px 75px;
    color:white;
    align-items: center;
}

.titre-bloc-actualite b, .titre-bloc-agenda b, .titre-bloc-discussion b, 
.titre-bloc-application b, .titre-bloc-tutoriel b, .titre-bloc-actualite-reseau b{
    display:block;
    font-size: 18px;
    width:100%;
}

.titre-bloc-actualite{
    background-image: url("https://www.mercanet.org/wp-content/uploads/2020/03/bandeau_actualites.svg");
    background-size:cover;
}

.titre-bloc-actualite-reseau{
    background-image: url("https://www.mercanet.org/wp-content/uploads/2020/12/bandeau_actu_mercato.svg");
    background-size:cover;
}

.titre-bloc-agenda{
    background-image: url("https://www.mercanet.org/wp-content/uploads/2020/03/bandeau_agenda.svg");
    background-size:cover;
}

.titre-bloc-discussion{
    background-image: url("https://www.mercanet.org/wp-content/uploads/2020/03/bandeau_discussions.svg");
    background-size:cover;
}

.titre-bloc-application{
    background-image: url("https://www.mercanet.org/wp-content/uploads/2020/03/bandeau_applications.svg");
    background-size:cover;
}

.titre-bloc-tutoriel{
    background-image: url("https://www.mercanet.org/wp-content/uploads/2020/03/bandeau_tutos.svg");
    background-size:cover;
}

.container-article-titre-content{
    padding:10px 20px 20px 20px;
}

.date-article-accueil{
    font-size:0.8rem;
    font-style:italic;
    color:#303030;
    margin-top:-3px;
    margin-bottom: 5px;
}

.titre-article-accueil{
   line-height: 0.8rem;
   margin-top:0px;
   margin-bottom:10px;
}


.titre-article-accueil a{
    font-size:1.3rem;
    text-transform: uppercase;
    color:#003e5d;
    font-weight:bold;
    font-style:normal;
    line-height: 1.4rem;
    
}

.texte-article-home{
    font-size:0.85rem;
    line-height: 1.2rem;
    color:#3a3a3a;
}

.sous-titre-accueil{
    font-size:0.8rem;
    font-weight: bold;
    color:#303030;
}



.navigation-actu{
    margin-top:5px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.dot-actu{
    font-size:0.7rem;
    margin:5px 5px 0px 5px;
    color:#a8a239;
    cursor:pointer;
}

.btn-voir-plus{
    padding:10px 20px;
    border-radius: 5px;
    background-color: #dadada;
    color:#707070;
    text-transform: uppercase;
    font-size:10px;
    font-weight:bold;
}

/****** EVENEMENT ******/


.container-jour-mois{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:18%;
}

.container-evenement{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding:10px 20px;
    align-items:center;
}

.mois-actuel{
    padding:0px 5px;
    color:white;
    background-color:#e26f38;
    text-transform: lowercase;
    font-weight:bold;
    border-radius: 5px 5px 0 0;
    width:100%;
    text-align:center;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    font-size:14px;
}

.jour-actuel{
    padding:0px 5px;
    background-color:white;
    font-weight: 800;
    border-radius: 0px 0px 5px 5px;
    width:100%;
    text-align:center;
    font-size:26px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    color:#003e5d;
    font-style:normal;

}

.heure-evenement {
    width: 100%;
    color: #003e5d;
    font-size: small;
    font-weight: bold;
}

.titre-evenement-accueil{
    font-size:1.1rem;
    color:#303030;
    text-transform: uppercase;
}

.container-infos-evenement{
    width:75%;
}

.categorie-evenement-home{
    color:#e26f38;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform:uppercase;
}

.nom-evenement-home{
    color:black;
    font-size:0.9rem;
    font-weight: bold;
}

.separation-bloc{
    margin:5px auto;
    width:84%;
    border:none;
    border-top:2px solid #73737350;
}

.nouvel-agent{
    padding:15px 20px;
    border-radius:10px;
    border: 0.3em dotted #00678f;
    position:relative;
    height:220px;
}

.avant-titre-agent{
    padding-top:20px;
    color:#00678f;
}

.titre-bloc-nouvel-agent{
    display:block;
    color:#00678f;
    text-transform: uppercase;
    font-size:2rem;
    margin-top:-10px;
}



.activite-departement{
    font-size:0.8rem;
    font-style:italic;
    font-weight: bold;
    color:#303030;
}

.nouvel-agent .photo{
    border-radius:50%;
    position: absolute;
    top:-70px;
    left:25px;
}

.bio-agent{
    font-size:0.85rem;
}



.prochain-evenement, .discussions, .outils, .tutoriels, .boite-a-idees{
    width: 32%;
    display: flex;
    flex-direction: column;
    margin:15px 0px;
}

.prochain-evenement div.container-btn-voir-plus, .discussions div.container-btn-voir-plus,
.outils div.container-btn-voir-plus, .tutoriels div.container-btn-voir-plus{
    display:flex;
    justify-content: flex-end;
    margin-top:5px;
}

.avant-titre-evenement{
    margin-bottom: 5px;
    color:#bc3e19;
}

.titre-bloc-evenement{
    display:block;
    color:#bc3e19;
    text-transform: uppercase;
    font-size:2rem;
    margin-top:-10px;
}
.colonne-container-evenement{
    display:flex;
    justify-content: space-between;
    margin-top:12px;
}

/****** DISCUSSION *****/

.container-auteur-discussion, .container-application{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:20px 20px 10px 20px;
}

.container-auteur-discussion img, .container-application img{
    width:80px;
    height: auto;
}

.auteur-discussion, .titre-application{
    margin-left:10px;
    font-size:0.8rem;
}

.auteur-discussion, .titre-application b{
    font-size:0.9rem;
    color:#283B4F
}

.auteur-discussion b{
    font-size:0.8rem;
}


.logo-home{
    display:flex;
    align-items:center;
    justify-content: center;
}

.logo-home img{
    width:200px;
    height:auto;
    margin-top:-20px;
}

.container-contenu-discussion, .container-contenu-application{
    padding:10px 20px 20px 20px;
}


.avant-titre-discussions{
    color:#f36722;
}

.titre-bloc-discussions{
    display:block;
    color:#f36722;
    text-transform: uppercase;
    font-size:2rem;
    margin-top:-10px;
}

.titre-discussion-accueil{
    color:#003e5d;
    font-size:1rem;
    line-height: 1rem;
    font-weight:bold;
    text-transform: uppercase;
}

.discussion-autheur{
    font-size:0.7rem;
    font-style:italic;
    font-weight: bold;
    color:#303030;
    
}

.discussion-content, .application-content{
    margin-top:5px;
    color:#3A3A3A;
    font-size:0.85rem;
}


.separateur-discussion{
    margin:4px 0;
}

/***** APPLICATION *****/

.application-content{
    margin-top:2px;
}

/***** TUTO ******/

/***** NOTA BENE *****/

.nota-bene{
    margin-top:30px;
}

.nota-bene .border-bloc{
    padding:30px;
    font-size:0.9rem;
}


.icone-nota-bene{
    width:60px;
    height: auto;
    position: absolute;
    top:-20px;
    left:-20px;
}

.titre-nota-bene{
    color:#e26f38;
    text-transform: uppercase;
    font-style:italic;
    font-size:1.2rem;
}

/***** Boite à idées *****/

.boite-a-idees{
    display: flex;
    justify-content: center;
    align-items:center
}


/***** SIDEBAR *****/

.temporaire{
    height:200px;
}

.bandeau-mercato-info{
    width:100%;
    height:auto;
    margin-bottom:-5px;
}

.image-home-mbc3 {
    width: 100%;
    height: auto;
    background-color: #dfdede;
}

#titre-texte-mbc3-home {
    padding: 0.5em 1em 0.5em;
    background-color: #dfdede;
}

#titre-home-mbc3 {
    color: #003e5d;
    font-weight: 900;
}

#mbc-indice-orange {
    color: #e26f38;
    font-size: 19px;
    vertical-align: super;
}

#mbc-titre-italique {
    font-weight: normal;
    font-style: italic;
}

#sous-titre-mbc-home-orange {
    color: #e26f38;
    font-weight: bold;
    font-size: 18px;
    margin: 0;
}

#sous-titre-mbc-home-bleu {
    color: #003e5d;
    font-weight: bold;
    font-size: 16px;
    margin: 0;
}

#text-home-mbc3 {
    color: #003e5d;
    margin-bottom: 0px;
}

.bandeau-bienvenu{
    width:107%;
    height: auto;
    margin-left:-3.6%;
}

ul.slick-dots{
    display: flex;
    margin: 0px auto;
    margin-left: 45%;
    padding-left: 20px;
    justify-content: center;
    color: #dfdede;
}

ul.slick-dots li{
    font-size:1.5rem;
}

.slick-active{
    color: #008f95;
}

.slick-dots li button{
    font-size: 0;
    visibility: hidden;
}  

.container-infos-mercato{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:10px 20px 20px 20px;
}

.titre-infos-mercato{
    color: #003E5D;
    text-transform: uppercase;
    font-weight: 800;
    font-size:1.4rem;
    line-height: 1.3rem; 
    margin: 10px 0 10px 0;
}

.texte-infos-mercato{
    color:black;
    font-size:0.9rem;
    font-weight: 500;
    padding:0px;
}


.container-info-agent{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:100%;
    align-items: center;
    padding:10px 0px 5px 0px;
}


.container-info-agent img{
    width:50px;
    height:50px;
}

.mise-en-avant-agent img{
    width:40%;
    height:auto;
}

.titre-agent-accueil{
    font-size:0.8rem;
    color:#003E5D;
    width:100%;
    font-weight:700;
}


.mise-en-avant-agent .info-agent-flexbox{
    display:flex;
    flex-wrap: wrap;
    width:100%;

}
.info-agent-flexbox{
    width:70%;
    font-size:0.9rem;
}

.secteur-activite-agent{
    color:#008f95;
    text-transform: uppercase;
    font-weight:500;
    padding-right:5px;
}

.secteur-geographique-agent{
    font-size:0.8rem;
    color:#008f95;
    font-weight:500;
    
}

/***** BIENVENU A *****/

.container-bienvenu-agents{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:5px;
}

.container-bienvenu-agents .container-info-agent{
    padding:5px 0;
}

.container-info-agent:nth-child(even){
    background-color: rgb(223, 222, 222);
}



/* 
.titre-reponse{
    color:#f36722;
    font-size:0.8rem;
    font-style:italic;
    font-weight:bold;
}

.reponse-content{
    margin-top:5px;
    color:#303030;
    font-size:0.85rem;
}

.reponse-content i{
    color:#f36722;    
    font-weight:bold;
} */



.statistiques{
    padding:15px 20px;
    border-radius:10px;
    border: 0.3em dotted #008f95;
    position:relative;
    margin-top:-80px;
    margin-right:2%;
    width:30% !important;
}

.avant-titre-statistiques{
    color:#008f95;

}

.titre-bloc-statistiques{
    display:block;
    color:#008f95;
    text-transform: uppercase;
    font-size:2rem;
    margin-top:-10px;
}

.date-maj-statistiques{
    font-size:0.7rem;
    font-style:italic;
    color:#303030;
    margin-top:-3px;
    padding-left:10px;
}

.chiffres-statistiques{
    color:#008f95;
    font-size:2rem;
}

.separateur-statistiques{
    margin:1px 0;
    color:#008f95;
    background-color:#008f95; 
    height:1px;
}

.row-statistiques p{
    font-style:italic;
    color:#303030;
    padding-left:10px;
}

.icone{
    width:50px;
    z-index: 10;
}

.icone-actualite{
    position: absolute;
    bottom:-25px;
    right: -25px;
}

.icone-evenement{
    position: absolute;
    bottom:-25px;
    left:-25px;

}

.icone-discussion{
    position: absolute;
    top:-25px;
    right:-25px;

}

.icone-statistiques{
    position: absolute;
    top:-25px;
    left:-25px;

}


/***** MEDIA QUERIES *****/

@media screen and (max-width:1199px){
    .colonne-principale-home, .colonne-secondaire-home{
        width:100%;
    }

    .colonne-principale-home{
        margin-top:70px;
        padding:20px;
    }

    .actualite, .nota-bene, .prochain-evenement, .discussions,
    .outils,.tutoriels,.boite-a-idees{
        width: 100%;
        max-width:500px;
        margin: 0 auto;
    }

    .image-home-agents{
        display: none;
    }

    .container-page-accueil{
        margin-top:0px !important;
       
    }

    .colonne-secondaire-home {
        padding: 20px;
        background-color: white;
    }
    
}