/* @font-face {
    font-family: "Montserrat-Regular";
    src: url("/sites/observatoire-energie-grand-est/files/fonts/Montserrat-Regular.ttf");
}*/
@font-face {
    font-family: "Montserrat";
    src: url("/sites/observatoire-energie-grand-est/files/fonts/Montserrat-VariableFont_wght.ttf");
}


 :root{
     
    --drupal-displace-offset-top :0;

    --color-blue-light : #c9dde4;
     

    --color-blue : #3d77ac;    
    --color--primary-ligth : #c9dde4;  
    --color-fg-primary : #294181 !important; /* blue foncé - selection*/
    --color-bg-primary : #294181 !important; /* blue clair*/
    --color-blue-dark : #294181;
    
    --color-blue-navy : #1c2d45;
    --color-blue-selection : #294181;

    --color-fond : #f1f6f8 !important;

    --font : "Montserrat";
    --color-text : #2B2929;
    --color-primary : #00a7c3;
    --color-primary-ligth : #e5f6f9;
    --color-secondary : #d1d85b;
    
    
    --color-gray : #565656;
    --color-gray-light : #d9d9d9;
    --color-anise : #c1d100;
    --color-beige : #f6f4ea;
    
    --p-tabs-tablist-background : none !important;
    --p-tabs-tablist-border-color : var(--color-fg-primary) !important;
    --p-tabs-tab-border-color : var(--color-fg-primary)C !important;
    --p-tabs-tab-color : var(--color-fg-primary) !important;
    --p-tabs-tab-background : var(--color-fond) !important;
    --p-tabs-tab-hover-background : var(--color-fond) !important;
    --p-tabs-tab-hover-border-color : var(--color-fg-primary) !important;
    --p-tabs-tab-hover-color : var(--color-fond) !important;
    --p-tabs-tab-active-background : var(--color-fg-primary) !important;
    --p-tabs-tab-active-border-color : var(--color-fg-primary) !important;
    --p-tabs-tab-active-color : #ffffff !important;
    --p-tabs-tab-border-width : 1px !important;
    --p-tabs-tab-hover-color : var(--color-fg-primary) !important;
    
    --p-select-background : #294181 !important;
    --p-select-border-color : #294181 !important;
    --p-select-option-group-color : #294181 !important;
    --p-select-placeholder-color : #ffffff !important;
    --p-select-color : #ffffff !important;
    --p-select-focus-border-color : none !important;
    --p-select-option-selected-background : var(--color-fond ) !important;
    --p-select-option-selected-color : var(--color-fg-primary) !important;
    --p-select-option-selected-focus-background : var(--color-fond ) !important;
    --p-select-option-selected-focus-color : var(--color-fg-primary) !important;
    
    
    --p-selectbutton-border-radius : 0 !important;
    --p-select-border-radius : 0 !important;
    
    --p-togglebutton-background: none !important;
    --p-togglebutton-hover-background: #c9dde4 !important;
    --p-togglebutton-checked-background: #c9dde4 !important;
    --p-togglebutton-content-checked-background: #294181 !important;
    --p-togglebutton-color : #294181 !important;
    --p-togglebutton-checked-color : #ffffff !important;
    --p-togglebutton-border-color : #294181 !important;
    --p-togglebutton-checked-border-color : var(--color-fg-primary) !important;
    --p-togglebutton-hover-color : var(--color-fg-primary) !important;
    
    
    --p-toggleswitch-border-color : #294181 !important;
    --p-toggleswitch-checked-border-color : #294181 !important;
    --p-toggleswitch-background : none !important; /*#c9dde4 !important;*/
    --p-toggleswitch-checked-background : #294181 !important;
    --p-toggleswitch-handle-background : #294181 !important;
    --p-toggleswitch-hover-background : #294181 !important;
    --p-toggleswitch-checked-hover-background : #294181 !important;
    
    --p-checkbox-checked-background : #294181 !important;
    --p-checkbox-checked-hover-background: #294181 !important;
    --p-checkbox-checked-border-color : #000000 !important;
    --p-checkbox-focus-border-color : #000000 !important;
    --p-checkbox-checked-hover-border-color : #294181 !important;
    
    --p-dataview-content-background : none !important;
    
    --p-button-primary-background : ##f1f6f8 !important;
    --p-button-primary-border-color : #294181 !important;
    --p-button-primary-color : #294181 !important;
    --p-button-primary-hover-background : #294181 !important;
    --p-button-primary-hover-border-color : none !important;
    --p-selectbutton-border-radius : 0 !important;
    
    --p-button-border-radius : 0 !important;
    --p-button-primary-color : var(--color-fg-primary) !important;
    --p-button-text-secondary-color : #294181 !important; 
    --p-button-text-secondary-hover-background : #294181 !important;
    --p-carousel-indicator-active-background : #294181 !important; 
    
    --p-dataview-content-color : #2B2929  !important;
 }

/*________________________________________________________________________*/
/* PRIMEVUE */
/*________________________________________________________________________*/

.p-select-option:has(.select_with_icon) {
    padding : 0 !important;
}

.p-button:disabled {
  cursor: not-allowed;
  background: var(--color-gray-light);
}

/* Caroussel */
.p-button-text.p-button-secondary {
  background:  #294181 !important;
  color: white !important;
}

.category--mon-territoire {
    .content-before {
        display: none;
    }
    .content-titles {
        display: none;
    }
}

.p-select-list .p-select-option.p-disabled {
    display: none;
}

body, .main-header {
    background: var(--color-fond);
    font-family: var(--font);
}

.main-header {
    max-width: 1910px;
}

.page {
    max-width: 1920px;
    
}


/* LAYOUT BUILDER EDITOR */
#drupal-off-canvas:not(.drupal-off-canvas-reset).ui-dialog-content div,
#drupal-off-canvas-wrapper .ui-dialog-content div {
 	color: #ccc;
}

.p-selectbutton {
        .p-togglebutton[data-p="checked"] {
            pointer-events: none;
        }
        .p-togglebutton {
            padding: 0 !important;
            /*border : none !important;*/
            .p-togglebutton-content {
                border-radius : 0 !important;
                .p-togglebutton-label {
                    margin: 5px 10px !important;
                }
            }
        }
}

h2, .title--h2 {
    color : var(--color-bg-primary);
  &::before {
    display: none;
  }
}


.block.block--image {
    text-align: center;
     &::before {
         display: none;
     }
}


.row {
    padding-left: 0;
    padding-right: 0;
}

.block.block--slideshow.slider.slider--slideshow  {
    height: 400px;
    .splide__list {
        height: 400px;
    }
}

.accordion-item {
  border-bottom: none;
}
.accordion-title {
    color : white;
}

.fancybox-iframe {
    padding : 25px;
}


/*________________________________________________________________________*/
/* General */
/*________________________________________________________________________*/

/*.block--user-notifications,.block--user-menu {
    display: none;
}*/
h3 {
    color : var(--color-bg-primary);
    margin-bottom: 0;
}
h2 {
    color : var(--color-bg-primary);
    margin-top: 40px;
}

h3, .title--h3, h4, .title--h4 {
  &::before {
    display: none;
  }
}

.background-primary {
    background: var(--color-bg-primary);
    padding: 25px !important;
    color: white !important;
    a {
        color: white;
        font-weight: bold;
        text-decoration: underline;
    }
}

/*________________________________________________________________________*/
/* Toltip des selecteur */
/*________________________________________________________________________*/
.select-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.select-tooltip {
    .icon {
        color: #87c991;
        --icon-size: 30px;
    }
}

.select-tooltip.is-empty {
    .icon {
        color: var(--color-gray-light);
    }
    pointer-events: none;
}

.select-tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  font-size: 0.8em;
  background-color: var(--color-blue-light);
  color: var(--color-blue-dark);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  cursor : pointer;
}

.select-tooltip:hover .tooltiptext {
  visibility: visible;
}

.messages--status {
    margin: 0 20px;
    padding: 10px;
    border-radius: 5px;
    color: var(--gin-color-green-light);
    background: var(--gin-bg-green);
    h2 {
        color: var(--gin-color-green-light);
        font-size: 1.2em;
    }
}
/*________________________________________________________________________*/
/* FOOTER */
/*________________________________________________________________________*/

.main-footer-inner {
    background-color: #294181;
    color: white;
    .block--footer {
        & a {
            color : white;
        }
        margin :0;
        padding : 0;
        width: 100%;
        & .footer-content-top {
            width: 100%;
        }
     
        .block1 {
            p {
                color : var(--color-bg-primary);
                font-size: 0.7em;
                margin-top: 10px;
                padding: 10px;
            }
        }
        .block2 {
            .part1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 200px;
                justify-content: space-around;
            }
        }
        .block2 {
            .part1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 200px;
                justify-content: space-around;
            }
        }
    }
}
/*________________________________________________________________________*/
/* Page d'acceuil */
/*________________________________________________________________________*/

.layout.logo-climaxion {
    .block.block--image {
        & img {
            height: 150px;
            width: 750px;
        }
    }
}

/* logo */
.logo--primary {
  margin: 10px 0;
  img[src*=".svg"] {
    max-height: 120px;
    height: 120px;
    max-width: unset;
  }
}

/* nav-manu */
.nav .nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  justify-content: end;
  .nav-item.no-level ul {
      display: none;
  }
}

.nav--main {
    & .nav-item:not(.level-1) {
        & > a {
            color : var(--color-bg-primary);
        }
    }
}
.nav--main {
  & .nav-item:not(.level-1) {
    & > a {
      &:hover, &:focus {
        color: white;
        background: var(--color-bg-primary);
      }
    }
  }
}

/*________________________________________________________________________*/
/* slideshow */
/*________________________________________________________________________*/
.slider--slideshow {
  & .item-bg {
      display: none;
  }
}

.slider--slideshow {
    & .item-content {
        font-size: 1.5em;
        border-top: none;
        background: none;
        color : var(--color-bg-primary);
          & h2 {
                font-size: 1.8em;          
            }
    }
}

#splide01-slide01  {
    .item-content {
        font-size: 2em;
        width: 650px;   
    }
}

#splide01-slide02  {
    .item-content {
        color : white;
        width: 650px;   
    }
}

/*________________________________________________________________________*/
/* Page Partenaire */
/*________________________________________________________________________*/
.layout.partenaire-logo-atmo,
.layout.partenaire-logo-dreal,
.layout.partenaire-logo-ademe {
    .block.block--image {
        width: 180px;
        margin : auto;
    }
}

.layout.partenaire-logo-region  {
    .block.block--image {
        width: 300px;
        margin : auto;
    }
}

.layout {
    .block.block--image {
        img {
            border-radius : 0;
        }
    }
}

/*________________________________________________________________________*/
/* Testimonials */
/*________________________________________________________________________*/
.slider--testimonials {
  & .slider-item {
        .item-footer {
            display: none;
    }
  }
}
.slider--testimonials {
  & .slider-item.is-active {
        .item-footer {
            display: block;
    }
  }
}

/*________________________________________________________________________*/
/* main */
/*________________________________________________________________________*/
.content-before {
    background: #f9f7f7;
    margin : 0 0 36px 0;
}
.layout.no-margin {
    margin-top: 0px;
    margin-bottom: 0px;
    .dataviz {
        margin : 0;
    }
}

/*________________________________________________________________________*/
/* block block--documents */
/*________________________________________________________________________*/

.block--documents {
    & .media {
        width: 100%;
    }
    & .button.button--secondary {
        min-height: 150px;
        text-align: center;
    }
}

/*________________________________________________________________________*/
/* block--sticky-event */
/*________________________________________________________________________*/
.block--sticky-event {
  color: var(--color-text);
  font-family: var(--font);
  text-align: center;
  background: #f6a84a;
}

/*________________________________________________________________________*/
/* nav-main */
/*________________________________________________________________________*/

.main-header-navigation {
  background:var(--color-blue-selection);
}

.nav--main {
  & .nav-item {
    &.level-1 {
        border-bottom: 1px solid white;
      & > a {
        color: white;
        font-weight: 300;
        font-size: 1.5em;
      }
    }
  }
}

/*.nav--main {
  & .nav-item.level-1.is-active-trail > a {
        font-weight: 600;
  }
}
*/

.nav--main {
  & .nav-item {
    &.level-1 {
      & + .nav-item.level-1 {
        &::before {
          background: white;
        }
      }
    }
  }
}


.nav--main {
  & .nav-item.level-1 > a:active, & .nav-item.level-1 > a:focus, & .nav-item.level-1:hover > a, & .nav-item.level-1.is-active-trail > a {
    font-weight: bold;
  }
}

.role--authenticated.fixer-header-container.is-fixed {
    .main-header {
        & .nav--main .level-1 > a {
            height: 50px;
        }
    }
}

.fixer-header-container {
  &.toolbar-horizontal.toolbar-fixed.is-fixed {
    & .main-header-navigation {
      top: 40px;
    }
  }
}


.nav--secondary {
  & .nav-item {
    font-size: 1.1em;
  }
}

/*________________________________________________________________________*/
/* Mon TERRITOIRE */
/*________________________________________________________________________*/
.node.node--page .layout {
    padding : 0 10px;
}

.category--mon-territoire {
    h2 {
        margin: 0 0 20px 0;
        color: var(--color-blue-dark);
        font-size: 1.5em;
        border-bottom: 2px solid var(--color-blue-dark);
        width: 100%;
    }
    h2::before {
        display: none;
    }
    
}

.dataviz[data-nid="37"],.dataviz[data-nid="100"],.dataviz[data-nid="101"] {
    .dataviz-header {
        min-height: 100px;        
    }
}

.dataviz[data-nid="37"],.dataviz[data-nid="100"],.dataviz[data-nid="101"],.dataviz[data-nid="82"] {
    .dataviz-form {
        background: var(--color-beige);
    }
}

/*========================================================================== */
/* Modele de dataviz */
/*========================================================================== */

.dataviz {
    margin : 0 auto !important;

    .dataviz-header {
        padding: 6px 0px;
        background: none;
        margin-bottom: 0;
        .title--dataviz {
            color : var(--color-blue-navy);
            font-weight: bold;
            font-size : 1.15em;
            .replace--text.unit {
                font-size: 0.8em;
                font-style: italic;
            }
        }
        .subtitle--dataviz {
            display: block;
            .replace--text.secondary, .replace--text.primary {
                background: var(--color-blue-dark);
                font-weight: normal;
                color : white;
                font-size: 0.9em ;
                padding: 0 5px;
                margin-right: 5px;
                /*border-radius: 15px;*/
            }
            .replace--text:empty {
                display : none;
            }
            
        }
    }
    .dataviz-super-container {
        width : 100%;
        height: 100%;
    }
    strong {
        font-weight: bold;
    }
    .source {
        font-size: 0.8em;
        line-height: 1;
        margin-top: 10px;
        color : var(--p-form-field-placeholder-color);
    }
}

.dataviz.category--modele-no-sidebar {
    .dataviz-sidebar {
        display: none;
    }
}

.dataviz.category--modele-sidebar-right {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: row;
    }
    .dataviz-container {
        width: 75%;
    }
    .dataviz-sidebar {
        width: 25%;
        padding: 6px;
    }
    .buttonFilter {
        margin-bottom : 15px;
    }
}


.dataviz.category--modele-sidebar-left {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: row-reverse;
        
    }
    .dataviz-container {
        width: 100%;
    }
    .dataviz-sidebar {
        width: 25%;
        padding: 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;     
        margin-right: 15px;
        background: white;
        padding: 25px 10px;
    }
    .buttonFilter {
        margin-bottom : 15px;
    }
}

.dataviz.category--modele-sidebar-top {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: column-reverse;
        background: white;
        /*border-radius: 15px;*/
    }
    .dataviz-form.top {
        margin-bottom: 0px;
    }
    .form-first {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        margin-bottom: 0px;
    }
    .form-second {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        background: var(--color-primary-ligth);
        padding: 20px 5px;
        margin-bottom: 0px;
        .buttonFilter[scanname="typeDecoupageButton"] {
            width: 33%;
        }
        .buttonFilter[scanname="zoomButton"] {
            width: 60%;
        }
    }
    
}


.dataviz.category--modele-sidebar-bottom {
    .dataviz-sidebar {
        margin-top :25px;
    }
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: column;
        background: white;
       /* border-radius: 15px;*/
    }
    .dataviz-form.top {
        margin-bottom: 0px;
    }
    .form-first {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        margin-bottom: 0px;
    }
    .form-second {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        background: var(--color-primary-ligth);
        padding: 20px 5px;
        margin-bottom: 0px;
        .buttonFilter[scanname="typeDecoupageButton"] {
            width: 33%;
        }
        .buttonFilter[scanname="zoomButton"] {
            width: 60%;
        }
    }
    
}


.dataviz.category--script-js {
         background : var(--color-gray-light);
         margin : 0;
         /*border-radius: 20px;*/
        .dataviz-header {
            margin : 0;
            border-bottom: none;
            font-size: 1em;
            font-style: italic;
            .title--dataviz {
                color : var(--color-text);
            }
            .icon::before {
                color : var(--color-text);
                font-size: 0.8em;
            }
            .nav.nav--toolbar .nav-item[data-tool="expand"],.nav.nav--toolbar .nav-item[data-tool="export"], .nav.nav--toolbar .nav-item[data-tool="embed"], .nav.nav--toolbar .nav-item[data-tool="ticket"] {
                display: none;
            }
        }
        .dataviz-form--suffix {
            margin-top : 0px;
        }
}

.dataviz-simply {
    .dataviz.category--modele-sidebar-top {
        .dataviz-sidebar-container {
            background: none;
        }
        .dataviz-sidebar {
            display: none;
        }
        header {
            display: none;
        }
        .dataviz-footer {
            display: none;
        }
    }
    
}


.dataviz .buttonFilter.type-secteur {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: none;
  margin: 0;
  padding: 5px 0;
  label {
        margin-right: 10px;
        color : var(--color-blue-selection);

  }
  .p-select {
        border-radius: 10px;
        background: white;
        border: 1px solid var(--color-blue-selection);
        .p-select-label {
            padding : 2px;
            color : var(--color-blue-selection);
        }
  }
  .p-select-dropdown {
    color : var(--color-blue-selection);
  }
}


/*========================================================================== */
/* ACCEUIL
/*========================================================================== */
/* Style de la dataviz d'introduction de la page "Mon Territoire" */
.layout.carte-acceuil {
    .dataviz path.static {
        stroke: #ffffff;
        stroke-width: 2px;
    }
}


/*========================================================================== */
/* MON TERRITOIRE
/*========================================================================== */

/* Style de la dataviz d'introduction de la page "Mon Territoire" */
.layout.carte-territoire {
    margin-bottom : 0;
    .builder-item.layout__region.layout__region--content {
        background: none;
        margin-left : 0;
        margin-right: 0;
    }
}

/* MENU : CHIFFRES CLES / FOCUS / TABLEAU DE BORD / PUBLICATION / ACCOMPAGNEMENT
/*========================================================================== */
.layout.menu-territoire {
    display: flex;
    flex-direction: column-reverse;
    border-top : 1px solid white;
    border-bottom : 1px solid white;
    margin-top : 0;
    margin-bottom : 0;
    .nav--simple .nav-menu {
        height: 46px;
        justify-content: center;
    }
    .nav--simple .nav-item {
        margin-bottom: 0;
        width: unset;
        background: none;
    }
    .block--menu-reference {
        margin-bottom: 0;
    }
    .nav-menu.level-1 {
        margin : 0;
        a {
            .item-title{ 
                font-weight: normal;
                text-transform: uppercase;
                color : white;
            }
            color : #ffffff;
            padding: 10px 20px;
            background: none;
        }
        a.active {
            border-bottom: 4px solid white;
        }
        
        a.active .item-title {
            color : white;
            font-weight: bold;
        }
    }
    .builder-item.layout__region {
        background: var(--color-blue-selection);
        padding: 10px 0;
        margin-left : 0;
        margin-right: 0;
    }
    .bandeau-nom-territoire {
        background: var(--color-blue-selection);
        color : white;
        max-width: 1920px;
        text-align: center;
        font-size: 1.3em;
        padding: 10px 0;
        font-weight: bold;        
        display: none;
    }
}

.layout.menu-territoire.is-fixed {
    position : fixed;
    top : 50px;
    z-index :1000;
    width : 100%;
    margin-left: 0;
    margin-right: 0;
    max-width : 1920px;
    .bandeau-nom-territoire {
        display: block;
    }

}

.layout.selection-accueil {
    /*background: var(--color-bg-primary);*/
    background-image: url("/sites/observatoire-energie-grand-est/files/styles/content_full/public/2026-01/fond_de_carte.jpg");
    background-size: cover;
    padding: 50px 20px;
    .field-body h2, p {
        color : white;
        
    }
    .leaflet-container {
        background: none;
        .d3-overlay path.static {
            
            stroke : white;
        }
        .leaflet-control-container .leaflet-bottom.leaflet-right, .leaflet-control-container .leaflet-top.leaflet-right{
            display: none;
        }
    }
    .app-export {
        flex-direction: column;
        align-items: left;
        .select-type-territoire {
            width:50%
        }
        .select-territoire {
            width:100%
        }
    }
}

.layout.selection-mon-territoire {
    .app-export {
        display: flex;
        flex-direction:  row;
        align-items: center;
        justify-content: left;
        .select-type-territoire {
            width:200px;
            margin-right: 25px;
        }
        .select-territoire {
            width:400px
        }
    }
    
}


.dataviz.category--mon-territoire-introduction {
    
    .leaflet-container {
        background: var(--color-blue-light);
        .leaflet-control-container .leaflet-bottom.leaflet-right, .leaflet-control-container .leaflet-top.leaflet-right{
            display: none;
        }
        .leaflet-control-container .leaflet-bottom.leaflet-left{
            height: 100px;
            font-size: 2.5em;
            line-height: 1;
            font-weight: bold;
            color: var(--color-blue-dark);
            margin: 0 10px 80px 30px;
            max-width: 350px;
            width: 350px;
            padding : 20px;
            background: var(--color-blue-light);
            
        } 
        
    }
   /* .dataviz-sidebar {
        align-content: end;
        background: var(--color-blue-light);
        margin-right : 0;
    }*/
    
}

/*========================================================================== */
/* FOCUS
/* focus-menu : menu de la page focus
/* js-page-render-focus-page : style des page focus sur deux colonnes
/*========================================================================== */

.layout.focus-menu {
    .nav-menu.level-1 {
        justify-content: space-around;  
        .nav-item {
            background: none;
            width: unset;
            a {
                padding : 15px;
                border-radius: 30px;
                background: none;
                border : 2px solid var(--color-blue-selection);
                color : var(--color-blue-selection);
            }
            .item-title {
                font-weight: bold;
            }
            a.active {
                background: var(--color-blue-selection);
                color : white;
            }        
        }
    }
}

.js-page-render-focus-page, .category--focus-page {
    .layout__region.layout__region--first {
        /*background: var(--color-gray);
        color: var(--color-gray-light);*/
        padding : 10px;
        margin-: 10px;        
    }
    /*h2 {
        color: var(--color-gray-light);
    }*/
    h2::before {
        display: none;
    }
    .layout__region.layout__region--second {
        /*background: var(--color-gray-light);
        color: var(--color-text);*/
        margin-right: 10px;
    }
}

/*========================================================================== */
/**/
/* DASHBOARD
/*========================================================================== */
/**/
/* dashboard-menu : menu de la page dashboard
/*========================================================================== */

.layout.dashboard-menu {
    .icon {
        display: none;
    }
    .nav-menu.level-1 {
        justify-content: center; 
        .nav-item {
            background: none;
            width: 250px;
            padding : 0 0px;
            border : 1px solid var(--color-blue-selection);
            a {
                padding : 15px;
                /*border : 2px solid var(--color-blue);*/
                color : var(--color-blue-selection);
                background: none;
            }
            a.active {
                padding : 15px;
                background: var(--color-blue-selection);
                color: white;
            }
            .item-title {
                font-weight: bold;
                text-align: center;
                width: 100%;
                text-transform: uppercase;
            }
            
        }
        & a:not(.active):hover {
            background : #c9dde4;
        }
    }
}

/*
.layout.dashboard-menu .nav-menu.level-1 li:first-child a {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-right: none;
}  

.layout.dashboard-menu .nav-menu.level-1 li:last-child a {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-left: none;
}  
*/

/* dashboard-submenu : menu de la page dashboard
/*========================================================================== */

.layout.dashboard-submenu {
    .nav-menu.level-1 {
        justify-content: center; 
        .nav-item {
            background: none;
            width: unset;
            border : none;
            a {

                background: none;
            }
            .item-title {
                color : var(--color-blue-dark);
                font-weight: bold;
                text-align: center;
                width: 100%;
            }
            /*.item-title &:before {
                    mask-image: var(--icon-default);
                    background-color: red;
            }
            a.active .item-title::before {
                color : var(--color-anise);
            }
            */
            .icon {
                display: block;
                margin-right: 5px;
                order: -1;
                --icon-size: 25px;
                &::before {
                    background-color: var(--color-blue-selection);      
                }
            }
            a.active .icon {
                &::before {
                    background-color: var(--color-blue-selection);   
                    mask-image: var(--icon-default);
                }
            }

            
        }
    }
}


/*========================================================================== */
/* DATAVIZ */
/*========================================================================== */
/*
.dataviz.category--chiffre-cles-2 {
    width: 100%;
}*/

/*========================================================================== */
/* ICONS */
/*========================================================================== */
.icon::before  {
        background-color: currentColor;
}
.icon.white::before  {
        background-color: white;
}

/* KEYNUMBER -> category--chiffre-cles-1
/*========================================================================== */
.dataviz.category--chiffre-cles-1 {
    background: var(--color-blue-dark);
    color : white;
    p { 
        margin : 0;
    }
    .keynumber {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .keynumber-content-title {
        margin-top: 10px;
        border: 1px solid var(--color-gray);
        padding: 0 25px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
            color : var(--color-anise);
        }
    }
    .text {
        text-align: center;
        strong {
            font-size: 1.5em;
            font-weight: bold;
        }
    }
    .suffix {
        margin-bottom: 10px;
    }
}

/* NEW KEYNUMBER -> Style1
/*========================================================================== */
.dataviz .keynumber.style1 {
    background: var(--color-blue-navy);
    /*
    background-image: url("/sites/observatoire-energie-grand-est/files/imgs/coubes.png");
    background-size: cover;
    */
    color : white;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    /*border-radius: 25px;*/
    padding: 25px 0;
    width: 100%;

    .title {
        margin-bottom: 10px;
        line-height: 1;
        .maintitle {
            text-transform: uppercase;
            font-weight: bold;
            color : white;
            font-size: 1.3em;
            margin-bottom: 8px;
        }
    }
    strong {
        font-size: 1.5em;
    }
    
    .icon.white::before  {
        background-color: white;
    }
    .prefixtext {
        margin :0;
    }
}

.dataviz .keynumber.style1.dark {
    
    color : var(--color-blue-selection);
    .icon.white::before  {
        background-color: var(--color-blue-selection);
    }
}


/* NEW KEYNUMBER -> Style2
Chiifres clé avec arrow
/*========================================================================== */
.dataviz .keynumber.style2 {
    background: white;
    color : var(--color-blue-selection);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    /*border-radius: 25px;*/
    .title {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: end;
        padding-top: 10px;
        .maintitle, .subtitle {
            font-size: 0.9em;
            color : white;
            background: var(--color-blue-selection);
            border-radius: 5px;
            padding: 0 5px;
            margin: 0 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;            
        }
    }
    p {
        margin : 0;
    }
    .ligne { 
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin-bottom : 10px;
        line-height: 1;
        /*.label {
            width: 40%;
            max-width: 40%;
            min-width: 40%;
        }*/
        strong {
            font-size: 1.3em;
            width: 20%;
        }
    }
}


/*========================================================================== */
/* DATAVIZ */
/*========================================================================== */
/* Legend */
.dataviz .legend, .dataviz .legend-content {
    .legend-icon {
        transform: scale(0.05);
    }
}

.dataviz .evolution-container {
    text-align: right;
    background: white;
    .btn.btn--primary.evolution-link {
        pointer-events: auto;
        cursor : pointer;
        margin-right: 10px;
        margin-bottom : 5px;
        font-size: 0.8em;
        border : 1px solid var(--color-blue-selection);
        color : white;
        background: var(--color-blue-selection);
        font-size: 0.9em;
    }
    .btn.btn--primary.evolution-link.active {
        pointer-events: none;
        background: none;
        color : var(--color-gray-light);
        border : 1px solid var(--color-gray-light);
        cursor: not-allowed;
    }
        
    p {
        pointer-events: none;
        user-select: none;
        margin : 0;
    }
}

/*
.dataviz .btn.btn--primary.evolution-link  {
    border : 1px solid var(--color-blue-selection);
    color : white;
    background: var(--color-blue-selection);
    padding : 8px;
}
*/
/*.dataviz .btn.btn--primary.evolution-link:hover  {
    background: var(--color-blue-selection);
    color : white;
    padding : 8px;
}
*/