:root{
    --font-text--regular : "Open Sans", Arial, serif;
    --font-text--medium : "Open Sans", Arial, serif;
    --font-text--bold : "Open Sans", Arial, serif;
    --font-text--black : "Open Sans", Arial, serif;


    --font-form : "Open Sans", Arial, sans-serif;
    --font-dataviz : "Open Sans", Arial, sans-serif;
    --font : "Open Sans", sans-serif;
    --font-family : "Open Sans", sans-serif;
    
    --color--primary : #283246;
    --color--primary-ligth : #d8e2f5;
    --color--secondary : #E9EAEC;
    
    --color--white : #FFFFFF;
    --color--orange : #FFBE00;
    --color--green : #cfe85c;
    --color--text : #656A6E;
    --color--warning : #ff9955;
    
    --color-bg-primary : var(--color--primary);
}

.node-body {
    font-family: var(--font);
}

.layout--onecol .dataviz {
  margin: 0px auto;
}


/*--------------------------------------------------------------------------------------------------------------------
 PRIMEVUE
--------------------------------------------------------------------------------------------------------------------*/
:root {
    
    --p-floatlabel-focus-color : var(--color--primary) !important;
    
    --p-select-border-color : var(--color--primary) !important;
    --p-select-option-selected-background : none !important;
    --p-select-option-selected-color : var(--color--primary) !important;
    --p-select-focus-border-color : var(--color--primary) !important;
    --p-select-option-selected-focus-background : var(--color--primary) !important;
    --p-select-option-selected-focus-color : white !important;
    
    --p-tabs-tab-border-color : #283246 !important;
    --p-tabs-tab-color : #283246 !important;
    --p-tabs-tab-background : #E4DDE7 !important;
    --p-tabs-tab-hover-background : #E4DDE7 !important;
    --p-tabs-tab-hover-border-color : #283246 !important;
    --p-tabs-tab-hover-color : #E4DDE7 !important;
    --p-tabs-tab-active-background : #283246 !important;
    --p-tabs-tab-active-border-color : #283246 !important;
    --p-tabs-tab-active-color : #ffffff !important;
    --p-tabs-tab-border-width : 1px !important;
    --p-tabs-tab-hover-color : #283246 !important;
    
    --p-togglebutton-background:  var(--color--primary-ligth) !important;
    --p-togglebutton-color :  var(--color--primary) !important;
    --p-togglebutton-checked-background:  var(--color--primary) !important;
    --p-togglebutton-checked-color :  var(--color--white) !important;
    --p-togglebutton-content-checked-background: #283246 !important ;
    
    --p-radiobutton-checked-border-color : var(--color--primary) !important;
    --p-radiobutton-checked-background : var(--color--primary) !important;
    
}
.p-select-list {
  font-size: 1em !important;
}

.p-selectbutton {
    .p-togglebutton {
        padding: 0 !important;
        border : 1px solid var(--color--primary) !important;
        font-size: 12px !important;
        .p-togglebutton-content {
            border-radius : 0 !important;
            .p-togglebutton-label {
                margin: 5px 10px !important;
            }
        }
    }
    .p-togglebutton.p-togglebutton-checked {
        .p-togglebutton-label {
            font-weight: bold;
        }
    }
    .p-togglebutton:first-child {
      border-start-start-radius: 15px !important;
      border-end-start-radius: 15px !important;
    }
    .p-togglebutton:last-child {
        border-start-end-radius: 15px !important;
        border-end-end-radius: 15px !important;
    }
}


.buttonFilter.tabs {
    margin-top : 15px;
    .p-tab {
        font-size: 0.8em;
        border-radius: 0 15px 0 0;
    }
    .p-tab.p-tab-active {
            border-radius: 0 15px 0 0;
    }
    button:nth-child(1) {z-index : 10;}
    button:nth-child(2) {transform: translateX(-15px); z-index : 9;}
    button:nth-child(3) {transform: translateX(-30px); z-index : 8;}
    button:nth-child(4) {transform: translateX(-45px); z-index : 7;}
    button:nth-child(5) {transform: translateX(-60px); z-index : 6;}
}

.p-radiobutton-box {
    border: 10px solid var(--p-radiobutton-border-color);
}

label {
    font-family: var(--font);
}



/*  -------------------------------------------------------------------------------------------------------------------- */
/*  GENERAL  */
/* --------------------------------------------------------------------------------------------------------------------  */ 

.cke_dialog_ui_html .icon.theme-primary, .theme-primary {
  & .icon::before {
    background-color: white;
  }
}

/* /* -------------------------------------------------------------------------------------------------------------------- */
/*  COLOR  */
/* --------------------------------------------------------------------------------------------------------------------  */ 


/* -------------------------------------------------------------------------------------------------------------------- */
/*  PAGE SELECTION */
/* --------------------------------------------------------------------------------------------------------------------  */
.list--page-selection {
    & .item-header {
        min-height: 70px;
        border-bottom : 2px solid var(--color--primary);
    }
    & .item-title {
        font-family: var(--font);
    }
    & .item-content {
        padding: 15px 0 0;
    }
    & a {
        border: 2.5px solid var(--color--primary);
        border-radius: 10px;
        padding: 10px 0;
    }
    & .item-title-icon {
        p {
            font-size: 1.25rem;
            line-height: 1;
            /* font-weight: normal; */
            font-weight: bold;
            /* text-align: center; */
            margin : auto;
            text-transform: unset;
        }
        .icon {
            display: none;
        }
    }
}

 @media (min-width: 1280px) {
    .l-third {
        height: 325px;
        .vignette  {
            height: 260px;
        } 
        article.dataviz {
            margin: 50px auto
        }
    }
 }


 @media (max-width: 1280px) {
    .l-third {
        article.dataviz {
            margin: 50px 0 0 0;
        }
    }
 }

/* -------------------------------------------------------------------------------------------------------------------- */
/*  BREAKINNG NEWS */
/* --------------------------------------------------------------------------------------------------------------------  */
.breaking-new  {
    .layout__region--content {
        background-color: var(--color--green);
        border-radius: 15px;
    }
    .block.block--richtext {
        padding : 15px;
    }
    .field-body {
        font-size: 1.2em;
        text-align: center;
        color: var(--color--primary);
        font-weight: bold;
        line-height: 1;
    }
    p {
        margin : 0;
    }
}


/* -------------------------------------------------------------------------------------------------------------------- */
/*  MENU DE REFERENCE */
/* --------------------------------------------------------------------------------------------------------------------  */
.is-front .layout__region .block {
    height: unset;
}
.is-front .main {
    background: white;
}

.nav--detail .nav-menu {
    padding: 5px;
}

.block--menu-reference.nav.nav--detail {
    background: var(--color--primary);
    .nav-item a:not(.btn) {
        color : white;
    }
    .nav-item.level-2 .item-title {
        font-weight: normal;
    }
}
.block--menu-reference.nav.nav--detail .nav-menu{
    padding : 0;
}
.block--menu-reference.nav.nav--detail .nav-item.is-active-trail > a,
.block--menu-reference.nav.nav--detail .nav-item a:hover,
.block--menu-reference.nav.nav--detail .nav-item a:focus {
    background: var(--color--green);
    color: var(--color--primary);
}
.nav--detail .l-accordion > a::after {
    /*color : var(--color--green);*/
    background: red;
}
/* -------------------------------------------------------------------------------------------------------------------- */
/*  SIDE BAR */
/* --------------------------------------------------------------------------------------------------------------------  */

.nav--detail .level-2.is-parent a::before {
    display: none;
}

/* -------------------------------------------------------------------------------------------------------------------- */
/*  MAIN-MENU */
/* --------------------------------------------------------------------------------------------------------------------  */
.l-banner {
    background: white;
    .main-header {
        border-bottom : 1px solid var(--color--primary);
        background: white;
        .row--full {
            max-width: 100%;
        }
    }
    /* border : 2px solid var(--color--primary); */
    .nav--main .nav-item.level-1 {
        a > span {
            font-family: var(--font);
            font-weight: bold;
            color : var(--color--primary);
        }
        a > span::after {
            background: var(--color--green);
            height: 3px;
        }
    }
    .nav--main .nav-item.level-2 {
        a {
            /*  font-family: var(--font); */
            /*  font-weight: bold; */
            /*  color : var(--color--primary); */
        }
        a::after {
          content: "";
          position: absolute;
          left: 10px;
          bottom: 5px;
          width: 90%;
          height: 2px;
          background: var(--color--green);
          transform: scaleX(0);
          transform-origin: 100% 50%;
        }
    }

    .nav--main .nav-item.level-2:hover {
        a::after {
            transform: scaleX(1);
            transform-origin: 0 50%;
            transition: transform .2s ease-out, -webkit-transform .2s ease-out;

        }
    }
    
    .nav--dropdown .nav-toggle .icon {
        color : var(--color--primary);
    }
    .nav--dropdown.is-open .nav-toggle .icon, 
    .nav--dropdown .nav-toggle:hover .icon,
    .nav--dropdown .nav-toggle:focus .icon {
        color : var(--color--primary);
        background: var(--color--green);
    }
    
}

.nav--main .nav-item.level-2 > a.intro-transport {
        background : var(--color--primary);
        color : white;
}

.is-front .l-banner .main-header {
    background: white;
    /* border : none; */
}
.l-banner .main-header-banner-image {
    display: none;
}

/*  .main-header .main-header-middle { */
/*      background: var(--color--green); */
/*  } */
.l-banner .btn--togglemenu {
    background: var(--color--green);
    .part {
        background: var(--color--primary);
    }
}

.contexte-menu + .nav-menu.level-2{
    display: none;
}

/* -------------------------------------------------------------------------------------------------------------------- */
/*  NAV--CHILDREN  */
/* --------------------------------------------------------------------------------------------------------------------  */
.nav--children.item-wrapper {
    height: 200px;
}


/* -------------------------------------------------------------------------------------------------------------------- */
/*  PAGE d'ACCEUIL */
/* ------------------------------------------------------------------------------------------------------------------- */

.banner-image {
    margin-left : 20px;
    margin-right : 20px;
    .slider .slider-inner .slider-item {
        picture {
            height: 250px;
        }
        img {
        filter: contrast(50%);
        }
    }
}

.main-banner {
    .mouse-scroll {
        display: none;
    }
    .banner-content {
        padding: 30px 0px;
        width: 100%;
        p {
            font-family: var(--font);
            font-weight: bolder;
            color : #ffffff;
            font-size : 1.5em;
            text-align: center;
        }
    }
}

.block.block--page-selection {
    max-width: 1200px;
    margin : auto;
    border-radius: 10px;
    .list-item {
        padding-left : 20px;
        padding-right : 20px;
    }
}

.is-front .layout__region .block.contexte_acces {
    margin : 10px auto 10px auto;
    p {
        border-radius: 10px;
        max-width: 1100px;
        margin: 0px auto 0px auto;
        text-align: center;
        padding: 10px;
        font-weight: bold;
        color: var(--color--primary);
        border: 2px solid var(--color--primary);
        font-size: 1.3em;
    }
}

/* -------------------------------------------------------------------------------------------------------------------- */
/*  PAGE */
/* -------------------------------------------------------------------------------------------------------------------- */

b {
    font-family: var(--font);
    color : var(--color--primary);
    font-weight: bold;
}

.layout--twocol.l-25-75 .layout__region--first {
    flex: 0 1 25%;
}
.layout--twocol.l-25-75 .layout__region--second {
    flex: 0 1 75%;
}

.content-before-inner {
    background: none;
    .row--fluid {
        max-width: 100%;
    }
}


.content.row .content-titles .content-title {
    /* background: var(--color--green); */
    /* padding: 35px 0 35px 10px; */
    font-size: 2em;
    
}

.node-body p {
    font-family: var(--font);
}

.content-titles:after {
    display: none;
}

.title--h1, .content-title {
    font-family: var(--font);
    font-weight: bold;
    text-transform: uppercase;
     &:after {
        display: none; 
        /*  display: inline-block; */
        /*  margin: 0 0 0px 0px; */
        /*  height: 2px; */
        /*  content: " "; */
        /*  text-shadow: none; */
        /*  background-color: var(--color--primary); */
        /*  width: 100%; */
    }
}
.node-body h2:not(.messages__title) {
    font-family: var(--font);
	font-size: 2em;
	font-weight: bold;
	border-radius: 5px;
	padding-left: 0px;
	line-height: 1;
	margin : 0px 0px;
    &:after {
        display: none;
        /*  display: inline-block; */
        /*  margin: 0 0 0px 0px; */
        /*  height: 2px; */
        /*  content: " "; */
        /*  text-shadow: none; */
        /*  background-color: var(--color--primary); */
        /*  width: 100%; */
    }
}

.node-body h3:not(.messages__title) {
    font-family: var(--font-text--bold);
	font-size: 1.4em;
	color : var(--color--primary);
	font-weight: bold;
	padding-left: 0px;
	line-height: 1;
	margin : 20px 0px;
    &:after {
        display: inline-block;
        margin: 0 0 0px 0px;
        height: 2px;
        content: " ";
        text-shadow: none;
        background-color: var(--color--primary);
        width: 100%;
    }
}


.block.block--dataviz {
    margin : 0 0 1.6em;
}

.field-body strong {
    font-family: var(--font);
    font-weight: bold;
    color : var(--color--primary);
}


/*  le nav summary étant dans la sidebar on force sont affichage */
.block.block--nav-summary {
    pointer-events: none;
    display: block;
    position: fixed;
    top: 50vh;
    left: 20px;
    z-index: 20;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: 20px;
    width: 260px;
    max-height: 58vh;
    font-size: 0.75rem;
    overflow-y: auto;
    transition: left .2s;
    .nav-menu {
        color: var(--color--primary);
        font-family: var(--font);
        font-size: 1.2em;
    }
}
/* -------------------------------------------------------------------------------------------------------------------- */
/*  CHIFFRES CLES */
/* --------------------------------------------------------------------------------------------------------------------  */
.dataviz.category--chiffre-cle, .dataviz .keynumber.style1{
    font-family: var(--font);
    .dataviz-title {
        font-weight: bold;
        color : white;
        font-size: 1.2em;
        padding-bottom: 0px;
    }
    .keynumber-title {
        font-weight: bold;
        color : white;
    }
    .text-keynumber {
        /* font-weight: bold; */
        color : white;
    }
    .value-keynumber {
        font-weight: bold;
        color : var(--color--primary);
    }
    .keynumber-footer {
        font-size: 0.9em;
    }
    
}

.node-body .item-keyfacts.keyfacts--primary strong::after {
    background-color : var(--color--primary);
}
.field-body.chiffre_cle {
    border-radius: 15px;
}
.field-body.chiffre_cle .icon {
    /* margin: 0px 15px; */
    top: 25%;
    position: relative;
}

.field-body.chiffre_cle .item-keyfacts.keyfacts--primary {
    max-width: 50%;
    padding : 15px 24px;
    margin : 0px;
}

.node-body .push--homepage {
    color : var(--color--primary);
    font-weight: bold;
    text-align: center;
    font-size: 1.4em;
}

/* --------------------------------------------------------------------------------------------------------------------   */
/*  Leaflet  */
/* -------------------------------------------------------------------------------------------------------------------- */

.leaflet-container {
    background: white;
}

.leaflet-control-layers-toggle { background-image: url(/sites/oreges-ligair-odace/files/img/layers.png);}

/*  .leaflet-sidebar {z-index : 20;} */

/*  .leaflet-top, .leaflet-left {z-index : 20;} */

/*  .leaflet-top, .leaflet-right {z-index : 20;} */

/*  .leaflet-control-layers label { */
/*      font-family: var(--font-text--regular); */
/*  } */

.dataviz .leaflet-control-layers-base {
    /* background : var(--color--primary-ligth); */
    label {
        font-family: var(--font-text--medium);
    }
}

.dataviz .leaflet-container {
    z-index : 0;
    font-family: var(--font-form);
    fill : var(--color--text);
    background: white;
    .legend-container {
        background: white;
        padding: 10px;
        .navalue, .secretvalue {
            stroke : var(--color--primary);
        }
    }
    .leaflet-background-pane {
        color : white;/* var(--color--primary-ligth); */
        path {
            stroke : var(--color--primary);
            pointer-events: none;
        }
        .icon--content {
            pointer-events: none;
        }
        
    }
}

.dataviz .leaflet-contour-departement-pane > svg path.leaflet-interactive {
/* .dataviz .leaflet-pane > svg path.leaflet-interactive { */
    fill : none;
    stroke: var(--color--primary);
    pointer-events: none;
}

.node-body a:not(.btn) {text-decoration: none; }

/* -------------------------------------------------------------------------------------------------------------------- */
/*   SCAN BUTTON */
/* -------------------------------------------------------------------------------------------------------------------- */
.scan-button {
    background-color: var(--color--primary);
    color: white;
    padding: 15px 32px;
    display: inline-block;
    font-size: 14px;
    margin: 4px 0px;
    cursor: pointer;
    border-radius : 4px;
    /*::hover {
        opacity : 0.6;
    }*/
}

/* -------------------------------------------------------------------------------------------------------------------- */
/*  */
/*  */
/*  DATAVIZ */
/*  */
/*  */
/* -------------------------------------------------------------------------------------------------------------------- */

/* style pour le modele de dataviz n°1  */
.dataviz.category--modele-de-dataviz.category--dataviz-modele-1 {
    .dataviz-header {
        background: var(--color--primary);
        border-radius: 0;
        .title--dataviz {
            color : white;
            font-size: 1.5em;
            font-weight: bold; 
            p {
                margin : 0;
            }
        }
    }
    .dataviz-containers {
        display: flex;
        .dataviz-before {
            width: 25%;
            margin-right: 10px;
            .dataviz-prefix {
                margin-bottom: 10px;
            }
        }
        .dataviz-current {
            width: 75%;
        }
    }
    .theme-primary .icon::before {
        color : white;
    }
    
}


@media screen and (max-width: 768px) {
    .dataviz.category--modele-de-dataviz.category--dataviz-modele-1 {
        .dataviz-containers {
            flex-direction: column-reverse;
            .dataviz-before {
                width: 100%;
            }
            .dataviz-current {
                width: 100%;
            }
        }
    }    
}

/* style pour le modele de dataviz n°2 */
/*  Sans size bar a gauge */
.dataviz.category--modele-de-dataviz.category--dataviz-modele-2 {
    .dataviz-header {
        background: var(--color--primary);
        border-radius: 0;
        .title--dataviz {
            color : white;
            font-size: 1.5em;
            font-weight: bold;
            p {
                margin : 0;
            }
        }
    }
    .dataviz-containers {
        display: flex;
        .dataviz-before {
            display: none;
        }
        .dataviz-current {
            width: 100%;
        }
    }
    .theme-primary .icon::before {
        color : white;
    }
    
}


.dataviz .article-current {
    /* border: 2px solid var(--color--green); */
    /* padding: 5px;     */
}

p.dataviz_source {
    color : var(--color--text);
    width: 100%;
    font-size: 0.8em;
    margin : 0;
}

/* -------------------------------------------------------------------------------------------------------------------- */
/*  CHIFFRES CLES */
/* --------------------------------------------------------------------------------------------------------------------  */
/* .dataviz .dataviz-before .keynumber.style1 { */
.dataviz .keynumber.style1 {
    .title {
        margin : 10px 0 0 0;
        font-weight: bold;
        font-size: 1.2em;
    }
    p {
        /* margin : 0 0 1em; ; */
    }
    strong {
        font-size : 2em;
    }
    b {
        font-family: var(--font);
        font-weight: bold;
    }
    .icon--top {
        height: 0;
    }
}

/* -------------------------------------------------------------------------------------------------------------------- */
/*  SCAN */
/* -------------------------------------------------------------------------------------------------------------------- */
.graphic--title  {
    display: none;
}
.dataviz .graphic--title {
    display: none;
}
.dataviz .child--header h1 {
    font-family: var(--font-text--bold);
}

.dataviz .dataviz-header {
    margin-bottom : 0px;
    .replace--text.unit {
        font-size: 0.8em;
        font-style: italic;
    }
}
.dataviz-form {
   margin-top : 5px;    
}

.dataviz-topbar {
    display : flex;
}
/*  INTRO */
/* --------------------- */
.dataviz-intro {
    margin-bottom: 10px;
    p {
        margin : 0;
    }
}

/*  FORMULAIRE */
/* --------------------- */
.dataviz-form {
    width: 100%;
}

/*  spécifique pour les map */
.dataviz-form .first {
    display: flex;
    justify-content: space-between;
    margin-bottom : 10px;
    margin-top : 10px;
}

.dataviz-form .second {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom : 10px;    
}


.page--print .layout.layout--threecol {
    display: flex;
}
/* --------------------------------------------------------------------------------------------------------------------   */
/*  FANCYBOX  */
/* -------------------------------------------------------------------------------------------------------------------- */
.fancybox-content {
    padding: 20px 25px 5px 25px;
}

.print-page {
    .dataviz.category--modele-de-dataviz.category--dataviz-modele-2 .dataviz-header .title--dataviz {
        font-size: 1em;
    }
    
    .dataviz.category--modele-de-dataviz.category--dataviz-modele-1 .dataviz-header .title--dataviz {
        font-size: 1em;
    }
    
    .print-columns .builder-item.layout__region.layout__region--content {
        display: flex;
        flex-direction: row;
        .dataviz.category--modele-de-dataviz.category--dataviz-modele-1 {
            margin : 0px;
            margin-left : 2px;
            .dataviz-containers {
                    flex-direction: column-reverse;
                    .dataviz-before {
                        width: 100%;
                    }
                    .dataviz-current {
                        width: 100%;
                    }
            }
        }
        .keynumber.style1 {
            background: none;
            line-height: 1;
            p {
                margin : 0px;
            }
        }
    }
}