:root {
    --noir: #000;
    --rouge: #FF0000;
    --blanc: #FFF;
    --gris-clair : #f2f4f7;

    --noir: #262626;
    --orange: #EF7D00;
    --vert-drapeau: #3FA535;
    --vert: #0f7705;
    --vert-fonce:#023A05;
    --blanc: #FFF;
}

/**    Code region **/
#cartographies{
    position: relative;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}
#cartographies{
    position: relative;
    width: 100%;

    display:  flex;
    justify-content: center;
    align-items: center;
}

#cartographies svg{
       
  font-family: Inter, sans-serif !important;
}
#cartographies {    
  font-family: Inter, sans-serif !important;
}

/***    */
 /* On hover */
    path#folon {
      fill: #add5b1 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#folon:hover {
      fill: #add5b1 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#folon:hover tspan{
      color: white !important;
    }

    path#bagoue {
      fill: #ee7211 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#bagoue:hover {
      fill: #ee7211 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#bagoue:hover tspan{
      color: white !important;
    }

    path#poro {
      fill: #0d7ab4 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#poro:hover {
      fill: #0d7ab4 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#poro:hover tspan{
      color: white !important;
    }

    path#tchologo {
      fill: #f9c8ab !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#tchologo:hover {
      fill: #f9c8ab !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#tchologo:hover tspan{
      color: white !important;
    }


    path#bounkani {
      fill: #222752 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#bounkani:hover {
      fill: #222752 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#bounkani:hover tspan{
      color: white !important;
    }


    path#gontougo {
      fill: #9f9e9e !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#gontougo:hover {
      fill: #9f9e9e !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#gontougo:hover tspan{
      color: white !important;
    }


    path#hambol {
      fill: #d8ead9 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#hambol:hover {
      fill: #d8ead9 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#hambol:hover tspan{
      color: white !important;
    }


    path#iffou {
      fill: #fff !important;
      cursor: pointer !important;
      color: rgb(55, 55, 55) !important;
      transition: ease-out 0.2s all;
    }
    path#iffou:hover {
      fill: #fff !important;
      cursor: pointer !important;
      color: rgb(62, 62, 62) !important;
      transition: ease-out 0.2s all;
    }
    path#iffou:hover tspan{
      color: white !important;
    }

    path#bere {
      fill: #fff !important;
      cursor: pointer !important;
      color: rgb(55, 55, 55) !important;
      transition: ease-out 0.2s all;
    }
    path#bere:hover {
      fill: #fff !important;
      cursor: pointer !important;
      color: rgb(62, 62, 62) !important;
      transition: ease-out 0.2s all;
    }
    path#bere:hover tspan{
      color: white !important;
    }

    path#gbeke {
      fill: #dedfdf !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#gbeke:hover {
      fill: #dedfdf !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#gbeke:hover tspan{
      color: white !important;
    }


    path#worodougou {
      fill: #d2e4f0 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#worodougou:hover {
      fill: #d2e4f0 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#worodougou:hover tspan{
      color: white !important;
    }



    path#bafing {
      fill: #fde3d6 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#bafing:hover {
      fill: #fde3d6 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#bafing:hover tspan{
      color: white !important;
    }


    path#tonkpi {
      fill: #13a538 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#tonkpi:hover {
      fill: #13a538 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#tonkpi:hover tspan{
      color: white !important;
    }


    path#guemon {
      fill: #fde3d6 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#guemon:hover {
      fill: #fde3d6 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#guemon:hover tspan{
      color: white !important;
    }


    path#haut_sassandra {
      fill: #f6ab81 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#haut_sassandra:hover {
      fill: #f6ab81 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#haut_sassandra:hover tspan{
      color: white !important;
    }


    path#marahoue {
      fill: #505276 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#marahoue:hover {
      fill: #505276 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#marahoue:hover tspan{
      color: white !important;
    }


    path#belier01,
    path#belier02 {
      fill: #4c94c2 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#belier01:hover,
    path#belier02 {
      fill: #4c94c2 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#belier01 tspan,
    path#belier02 tspan{
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#nzi {
      fill: #13a538 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#nzi:hover {
      fill: #109832 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#nzi:hover tspan{
      color: white !important;
    }


    path#moronou {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#moronou:hover {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#moronou:hover tspan{
      color: white !important;
    }

    path#indenie_djuablin {
      fill: #f28f52 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#indenie_djuablin:hover {
      fill: #e18247 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#indenie_djuablin:hover tspan{
      color: white !important;
    }


    path#yamoussoukro {
      fill: #dedfdf !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#yamoussoukro:hover {
      fill: #dedfdf !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#yamoussoukro:hover tspan{
      color: white !important;
    }

    
    path#me {
      fill: #7bb0d3 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#me:hover {
      fill: #7bb0d3 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#me:hover tspan{
      color: white !important;
    }


    path#goh {
      fill: #85c48b !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#goh:hover {
      fill: #70af77 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#goh:hover tspan{
      color: white !important;
    }


    path#agneby_tiassa {
      fill: #ead8c3 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#agneby_tiassa:hover {
      fill: #ead8c3 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#agneby_tiassa:hover tspan{
      color: white !important;
    }


    path#sud_comoe {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#sud_comoe:hover {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#sud_comoe:hover tspan{
      color: white !important;
    }



    path#abidjan {
      fill: #13a538 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#abidjan:hover {
      fill: #13a538 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#abidjan:hover tspan{
      color: white !important;
    }



    path#grands_ponts {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#grands_ponts:hover {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#grands_ponts:hover tspan{
      color: white !important;
    }

    
    path#loh_djiboua {
      fill: #bebebe !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#loh_djiboua:hover {
      fill: #bebebe !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#loh_djiboua:hover tspan{
      color: white !important;
    }


    path#gbokle {
      fill: #c99d65 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#gbokle:hover {
      fill: #c99d65 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#gbokle:hover tspan{
      color: white !important;
    }


    path#nawa {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#nawa:hover {
      fill: #a7a7ba !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#nawa:hover tspan{
      color: white !important;
    }




    path#san_pedro {
      fill: #fde3d6 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#san_pedro:hover {
      fill: #fde3d6 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#san_pedro:hover tspan{
      color: white !important;
    }


    path#cavally {
      fill: #7f7f7f !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#cavally:hover {
      fill: #747474 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#cavally:hover tspan{
      color: white !important;
    }


    path#kabadougou {
      fill: #1f224b !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#kabadougou:hover {
      fill: #1b1d47 !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#kabadougou:hover tspan{
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#region {
      fill: red !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#region:hover {
      fill: red !important;
      cursor: pointer !important;
      color: white !important;
      transition: ease-out 0.2s all;
    }
    path#region:hover tspan{
      color: white !important;
    }



/** Liste **/

#cartographies .liste {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 5px;
}
#cartographies .liste .carte{
    position: relative;
    padding: 25px;
    background-color: rgba(147, 203, 147, 0.06);

    border: 1px solid rgb(244, 244, 244);
}
#cartographies .liste .carte svg {
  width: 100%;
  height: auto;
  display: block;
}
#cartographies .liste .right{
    position: relative;
    background-color: lightblue;
}
    


/******************************************* Responsive********************/

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

}
@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 1350px) {
    
}
@media screen and (max-width: 1250px) {

}
@media screen and (max-width: 992px) {
    #cartographies .liste {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
}
}

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

}
@media screen and (max-width: 640px) {
    
}
@media screen and (max-width: 480px) {
  

}



/**************       dark mode   ***********/
.dark-mode #actualite h1,
.dark-mode #actualite .items .item a .caption h2,
.dark-mode #actualite .items .item a .caption h3,
.dark-mode #actualite .items .item a .caption .foot .left,
.dark-mode .menu_navigation ul a{
    color: yellow !important;
}
.dark-mode #actualite .items .item{
    box-shadow: 0 4px 8px 0 rgba(41, 41, 41, 0.08), 0 6px 20px 0 rgba(223, 223, 223, 0.04);
}
.dark-mode #actualite .items .item a .caption h2,
.dark-mode .menu_navigation ul a{
    border: 1px solid yellow !important;
}
.dark-mode .section_e_services::after{
    border-top: 1px solid yellow !important;
}
.dark-mode #header .items{
    border-bottom: 1px solid yellow !important;
}
.dark-mode #colonne_droite .content .section_grands_dossiers .items .titre{
    border-top: 2px solid yellow;
}
.dark-mode #colonne_droite .content .section_grands_dossiers .items .titre h1::after{
   background-color: yellow !important;
}
.dark-mode #actualite{
   background-color: rgb(32, 32, 32) !important;
}
.dark-mode #actualite .items .item a .caption,
.dark-mode #actualite .items .item a .caption h2,
.dark-mode .menu_navigation {
   background-color: rgb(19, 19, 19) !important;
}
.dark-mode #colonne_droite .content .section_grands_dossiers .items #owl_grands_dossiers.owl-carousel.owl-theme a .inner h2{
   background-color: rgb(37, 37, 37) !important;
   background: rgb(36, 36, 36) !important;
}
.dark-mode #colonne_droite .content .gouv_videos .item .inner .icon span{
    background-color: #000 !important;
    background: #000 !important;
}