html {
        --links: #769AAE;
--page-background: #F5F5F5;
--header-links: #FFFFFF;
--titles: #2C3F56;
--section-titles: #FFFFFF;
--highlight: #2C3F56;
--footer-links: #0088CC;
--boxes-border: #E5E5E5;
--boxes-background: #FFFFFF;
--header-background: #FFFFFF;
--footer-background: #FFFFFF;
--text: #333333;
--section-titles-background: #769AAE;
    }
    
.top-head{max-width:1200px; margin:auto;padding:0px 40px}
.logo-odre img{width:350px;max-height:90px}
.partenaires{margin-left:10%;margin-top:5px;display:inline-block}
.partenaires img{max-width:90px; display:inline-block}

.bottom-head{background-color:#769AAE;text-align:center;padding:0px 20px;min-height:48px}

.ods-front-header__menu-item-link{; color:#fff;opacity:0.9;font-size:1em;text-transform:uppercase;line-height:15px;padding:15px 10px 5px 10px;margin:0px 15px 8px 15px}

.ods-front-header__menu-item-link:hover{border-bottom:solid 5px #eee;}
.ods-front-header__menu-item-link--active{border-bottom:solid 5px #fff;}

.ods-responsive-menu-placeholder__toggle{color:#769AAE;opacity:1}
.ods-responsive-menu-placeholder__toggle{background-color:none}


.ods-front-header__management-menu-item{display:block;text-align:right;margin-top:10px;}
.ods-front-header__management-menu-item-link{color:#769AAE}
.ods-front-header__management-menu-item--backoffice .ods-front-header__management-menu-item-link {color:#fff}
.ods-front-header__management-menu-item--backoffice{background-color:#769AAE}


.ods-front-header{height:155px;padding:0px;}
.ods-front-header__portal-brand{top:7px}

.ods-responsive-menu-collapsible__toggle button{color:#999}




@media(max-width:999px){

   .ods-front-header{height:120px;}
    .partenaires{display:block;margin-left:0px}
    .partenaires img{max-width:40px;}
    .logo-odre img{width:150px;max-height:45px}
    .bottom-head{background-color:#fff;text-align:left;border-top:solid 1px #769AAE;padding-top:10px;}
    .ods-front-header__menu-item-link{color:#769AAE;}
    .ods-front-header__menu-item-link:hover{border-bottom:none;border-left:solid 5px #769AAE;color:black}
    .ods-front-header__menu-item-link--active{border-bottom:none;font-weight:bold;color:black}
    
    .ods-front-header__management-menu-item{text-align:left}
    .ods-responsive-menu-collapsible__content{margin-top:-70px}
   

}


html{scroll-behavior: smooth;  }

/* TDB */


.dropdown-menu{
    margin-right: 5px;
    margin-top: -4px;
    display: inline-block;
    width: 120px;
    vertical-align: top;
    height: 34px;
    padding: 10px 22px;
    font-size: 12px;
    line-height: 3;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    background-color: rgb(44,192,200);
    background-image: none !important;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.dropdown-menu:hover{background-color:#03888F}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 250px;
    top:40px;
    right:0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown .dropdown-titre{ 
    background-color: rgb(44,192,200);
    padding: 6px 7px 1px 10px;
    position: relative;
    font-size: 12px;
    border-radius: 5px;
    top: -4px;
}


.dropdown .dropdown-titre img{ display:inline-block; ; width: 20px;     margin-left: 14px;
}
.dropdown .dropdown-titre p{
    display: inline-block;
    color: #fff;
    transform: translateY(-6px);
    margin-bottom: 0px;
    font-weight: bold;
    text-transform: uppercase;}

.dropdown input{
    display: block;
    width: 130px;
    height: 42px;
    position: absolute;
    top: -10px;
    cursor: pointer;
    z-index: 2;
    opacity:0;
}

.dropdown input:hover + .dropdown-titre {background-color: #03888F}

.dropdown input:checked ~ .dropdown-content {  display: block;    z-index: 9;}
.dropdown input:checked + .dropdown-titre {background-color: #03888F}

.dropdown-content a{color:black;display:block;border-left:solid 3px  #f9f9f9;}
.dropdown-content a:hover{color: #03888F;border-left:solid 3px  #03888F;}



.blue-fonce{color:#2C3F56}
.blue-odre{color:#5E7888}
.blue-elec{color:#00ACDA}
.green-gaz{color:#00A983}
.blue-green {color:#00A9AC}
.light-dark{color:#464646}



.tdb header { background: linear-gradient( -0.90turn, rgb(0, 172, 218), rgb(38, 170, 131));color:#fff;}

.tdb header h1 {
    font-size:3.5rem;
    color:#fff;
    text-shadow: -1px -1px 0 black;
    margin-bottom:0px;
}



.tdb nav { 
    background: linear-gradient( -0.90turn, rgb(0, 172, 218), rgb(38, 170, 131));
    margin-top:2px;
    padding:5px 0px;
}
.tdb nav ul {padding-left:10px}
.tdb nav ul, .nav-right{display:inline-block;margin:0px}
.tdb nav li{display:inline-block;color:#fff;}
.tdb nav a{ padding:5px 15px;color:#ddd;}

.tdb nav a:hover {text-decoration:none;color:#fff;}

.tdb nav ul:hover a:not(:hover) {opacity:0.6}


.tdb nav .active{; padding-right:15px;;font-weight:bold;}

.tdb .menu-vue {display:inline;border-right:solid 1px #fff}

.tdb .nav-right {float:right;margin-right:8px;margin-top:-3px}
.tdb .nav-right a{color:black}


.tdb nav strong{color:#fff}

.indisponible:after {
    display:none;
    content:"Bientôt disponible";
    position: absolute;
    margin-left: -120px;
    z-index:1;
    font-weight:bold;
    font-size:12px;
    margin-top:-5px;
    pointer-events: none;
    background-color: rgb(44,192,200);
    padding: 5px;
    border-radius:5px;
}

.indisponible:hover:after{display:inline-block;
}

.article {
    ;background-position: left;;background-attachment: fixed;background-repeat:no-repeat;
    background: linear-gradient( hsl(0, 0%, 100%), hsl(0, 0%, 95%));

}
.back-conso { background-image: url('/assets/theme_image/back-conso.jpg');  ;background-position: left;;background-attachment: fixed;background-repeat:no-repeat;   border-bottom:solid 4px rgba(0,0,0,0.05)
}
.back-prod { background-image: url('/assets/theme_image/back-prod.jpg');  ;background-position: left;;background-attachment: fixed;background-repeat:no-repeat;  border-bottom:solid 4px rgba(0,0,0,0.05);  
}



.article .titre{margin-bottom:30px;}

.article h2 {
    font-size:2rem;  
    margin-bottom:10px;
    padding-bottom:5px;
    border-bottom: solid 5px #2C3F56;
        text-shadow: -1px -1px white;
}

.article h2::before{ 
    transform:scale(1.5);
    position:absolute;
    left:-110px;
    top:-5px;
}
/**
.conso::before {content:url('/assets/theme_image/icon-conso.png');}
.prod::before {content:url('/assets/theme_image/icon-prod.png');}
.ma-region::before{content:url('/assets/theme_image/icon-territoire.png')}
**/

.article h3 {
    font-size:1.4rem;  
    margin-top:0px;
    margin-bottom:20px;
    font-weight:400;
}


.article .titre p{font-weight:300;font-size:12px}

.glossaire-conso-brutes{text-decoration:underline;cursor: help;}
.glossaire-conso-brutes:after {
    display:none;
    content:"Consommation d’électricité au périmètre France, Corse comprise, et pertes incluses. Consommation de gaz au périmètre France, hors Corse.";
    position: absolute;
    left: 80px;
    z-index:1;
    margin-top:-2px;
    width: 450px;
    pointer-events: none;
    background-color: rgba(256,256,256,1);
    padding: 10px;
    font-weight:bold;
    border-radius: 10px;
    border: solid 1px #eee;
}

.glossaire-conso-brutes:hover:after{display:block;}

.ligne{margin-bottom:20px;}
.ligne h4{border-bottom:solid 1px #E6E5E5;margin-bottom:0px;font-weight:300;font-size:12px}
.ligne p{display:inline;font-weight:300}
.ligne .nombre{font-size:1.5rem; font-weight:bold}
.ligne .evolution { float: right;margin-top:3px;font-size;0.9rem;cursor: help;}
.ligne img{    
    transform: translateY(1px);
    width: 15px;
    margin-right: 10px;
    opacity: 0.8;}

.ligne .icon-svg{float:left;margin-right:10px}

.ligne .evolution:after {
    display:none;
    content:"Par rapport à l'année précedente";
    position: absolute;
    margin-left: 80px;
    z-index:1;
    font-weight:bold;
    font-size:12px;
    margin-top:-32px;
    width: 200px;
    pointer-events: none;
    background-color: rgba(256,256,256,0.8);
    padding: 10px;
    border-radius: 10px;
    border: solid 1px #eee;
}

.ligne .evolution:hover:after{display:block;}


.viz {
    background-color:#fff;
    box-shadow: 0 15px 36px -15px hsla(0,0%,0%,0.3)
}

.pie .highcharts-background {
    fill:transparent;
}


.viz-under {text-align:right; margin-top:10px}

.switch-epci{   
    float:left;
    padding: 5px 20px;
    margin-right: 10px;
    border-radius: 5px;
    border: solid 1px rgb(119,155,174);
    color: rgb(119,155,174);   
    transition-duration:0.3s;
}

.switch-epci:hover{text-decoration:none; background-color:rgb(119,155,174);color:#fff} 

.switch-active{ background-color:rgb(119,155,174);color:#fff}


.viz-label {;transform: translateY(4px);max-width:300px;display:inline-block;font-size:10px}
.viz-label a {color: #999;display:block;}
a.source {; color: #999}



.sources-donnees{
    background: linear-gradient( -0.90turn, rgb(0, 172, 218), rgb(38, 170, 131));
}

.sources-donnees h4 {display:inline-block;vertical-align:top;margin-top:0px;width:20px}
.sources-donnees .description {display:inline-block;margin-left:10px;padding-left:10px; border-left:solid 1px #fff;max-width:80%;margin-bottom:40px}
.sources-donnees .description a{display:block;color:#fff}


.txt-align-right{text-align:right}
.txt-align-center{text-align:center}
.maxwidth{max-width:1200px;margin:auto;padding:10px}
.padding-right{padding-right:80px}
.no-margin {margin-top:0px}
.padding-t-b{padding-top:80px;padding-bottom:80px}


@media(max-width:999px){
    .maxwidth {padding:0px}
    .padding-right{padding-right:0px}
    .txt-align-right{text-align:left}
    .txt-align-center{text-align:left}
        
    .tdb header {background:linear-gradient( -0.70turn, rgb(0, 172, 218), rgb(38, 170, 131))}  
    .tdb header p{max-width:250px; margin:auto;padding-bottom:30px}
    .tdb header h1{margin-bottom:10px}
    
    .tdb nav {margin-top:0px;background:#2C3F56} 
    .tdb nav a {padding: 5px 5px;}
    .tdb nav ul, .nav-right {display:block;text-align: center;margin:auto}
    .tdb nav ul {padding-left:0px}
    .tdb nav ul li:first-child {;padding:10px 0 0 0;margin:0 0 10px 0}
    .tdb nav .active{border-bottom: solid 4px #fff;padding:0px}
    
    .tdb .menu-vue {display:block;border:none;  margin-left: 10px;    margin-top: 5px;
    margin-bottom: 10px;}
    .tdb .nav-right {float:none;margin-top:20px;padding-top:20px;    border-top: solid 2px white;padding-bottom:6px;margin-right:0px}
 
    .hide-mobile {display:none}
    .sources-donnees {padding-top:60px}  
    .back-conso{background:none}
    .back-prod{background:none}