:root {
  --color--primary: #179090;
  --color--primary-light: #e5f5f5;
  --color--secondary: #e5f5f5;
  --color--lien: #5d5c5c;
  --color--title: #5d5c5c;
  --color--font: #656A6E;
  --text--size: .95rem;
  --text--color: #5d5c5c;
  --color--warning: #ff9955;
  --font-family-heading: "Quicksand";
  --font-form: "Open Sans", "Merriweather Regular", Arial, serif;
  --font-dataviz: "Open Sans", "Merriweather Regular", Arial, serif;
  --font-text--regular: "Open Sans", "Merriweather Regular", Arial, serif;
  --font-text--italic: "Open Sans", "Merriweather Regular", Arial, serif;
  --font-text--bold: "Open Sans", "Merriweather Regular", Arial, serif;
  --font-family-heading--bold: "Open Sans", "Merriweather Bold", Arial, serif;
  --font-lien--bold: "Open Sans", "Source Sans Pro Semibold", Arial, sans-serif;
}
/* ==========================================================================
   Variables DATAGONE
   ========================================================================== */
:root {
    --font-family-heading : "Quicksand";
    --font-family : "Open Sans";

}
/* ==========================================================================
   Variables PRIMEVUE
   ========================================================================== */
:root {
    --p-floatlabel-focus-color: #179090 !important;
    --p-select-focus-border-color: #179090 !important;
    --p-select-option-selected-color: #179090 !important;
    --p-select-option-selected-focus-color: #179090 !important;
    --p-select-option-selected-focus-background: #e5f5f5 !important;
    --p-select-option-selected-background: #e5f5f5 !important;
    --p-inputtext-focus-border-color: #179090 !important;
    --p-select-option-group-background: #e5f5f5 !important;
    --p-select-option-group-color: #179090 !important;
    --p-togglebutton-background: #e5f5f5 !important;
    --p-togglebutton-checked-background: #e5f5f5 !important;
    --p-togglebutton-content-checked-background: #179090 !important ;
    
    --p-progressbar-value-background : #179090 !important;
    
    --p-datatable-row-toggle-button-background : #179090 !important;
    --p-datatable-row-toggle-button-color : white !important; 
    --p-datatable-row-toggle-button-hover-background : #e5f5f5 !important;
    --p-datatable-row-toggle-button-hover-color : #179090 !important;

    --p-button-primary-background : #179090 !important;
    --p-button-primary-border-color : #e5f5f5 !important;
    --p-button-primary-color : white !important;
    --p-button-primary-hover-background : #e5f5f5 !important;
    --p-button-primary-hover-border-color : #179090 !important;
    --p-button-primary-hover-color :#179090 !important;
    
    --p-radiobutton-checked-border-color : #179090 !important;
    --p-radiobutton-checked-background : #179090 !important;
    
    --p-select-background: #ffffff !important;
    --p-select-color : #5d5c5c !important;
    
    --p-togglebutton-color : #179090 !important;
    --p-datatable-row-toggle-button-size : 20px !important
}
/*========================================================================== */
/* PrimeVue
*/
/*========================================================================== */
.p-floatlabel label {
  font-family: var(--font-form);
}

.p-togglebutton-label {
  font-size: 0.8em;
  font-weight: bold;
  margin: 10px;
}

.p-togglebutton-content {
  border: solid 1px white;
}

.p-togglebutton-checked .p-togglebutton-content {
  color: white;
}

.p-datatable table tbody tr:nth-of-type(2n) td {
  background: white;
}
.p-datatable .p-datatable-row-group-header {
    .p-datatable table tbody tr:nth-of-type(2n) td {
        background: var(--color--primary-light);
    }
  td {
      background: var(--color--primary-light);
      color : var(--color--primary);
      font-weight: bold;
        font-size: 1.2em;        
  }
  .p-datatable-row-toggle-button {
      background: var(--color--primary);
      margin-right: 10px;
  }
}

.p-radiobutton label {
        margin-left: 10px;
        font-family: var(--font-form);
}

.page .node.node--page.node--24, .page .node.node--page.node--212{
    .dataviz[data-nid="193"] {
        display: none; 
    }
}
.print-page .node.node--page.node--24,.print-page .node.node--page.node--212 {
    .dataviz[data-nid="193"] {
        display: block; 
    }
}
.print-page[data-nid="24"],  .print-page[data-nid="212"]{
    .print-page-header {
        display: none;
    }
}
/*========================================================================== */
/* MAIN BANNER*/
/*========================================================================== */
.main-banner .mouse-scroll
    { display: none};

.main-header {
	padding-left: 0px; 
	padding-right: 0px; 
	
}
  
.main-header .row {
    height: 90px;
    padding-left: 0px;
}
	
.logo--primary {
  & img {
    max-height: 90px;
  }
}

.main-banner .banner-content {
    padding-left: 150px;
    padding-right: 150px;
}

.main-banner .banner-content h1 {
    font-family: var(--font-family-heading);
    font-weight: lighter;
    font-size : 4em;
    color : #ffffff;
    margin : 0 0 1em;
    text-transform: uppercase;
    text-align: center;
}

.main-banner .banner-content h2 {
    font-family: var(--font-family-heading);
    font-weight: bold;
    font-size : 3em;
    margin : 0 0 1em;    
    color : #ffffff;
    text-align: center;
}

.main-banner .banner-content p {
    font-family: var(--font-family-heading);
    font-weight: bolder;
    color : #ffffff;
    font-size : 1.5em;
    text-align: center;
}

/*========================================================================== */
/* NAV-MAIN */
/*========================================================================== */
.main-header {
    
    .nav-item.level-1 {
        background-color: #ffffff50;
        margin : 0 10px;
    }
    
    .nav--main .level-1 > a {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-l);
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
    }
    /* pour les liens du menu qui sont en <nolink>*/
    .nav--main .level-1 {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-l);
        font-weight: bold;        
        text-align: center;
        text-transform: uppercase;
        cursor: pointer;
    }
    .nav--main .level-1.atlas {
        display: none;
    }
    .nav--main .level-1 .nolink {
        height: 90px;
        display: block;
        align-content: center;
        padding: 0px 15px;
    }
    .nav--main .level-1 .nolink:hover > span::after {
        content: "";
        position: absolute;
        left: 5px;
        bottom: 28px;
        width: 95%;
        height: 1px;
        background: white;
        transition: transform .2s ease-out;
     }
    
    .nav-item.level-2 > a {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-s);
        font-weight: bold;        
        text-align: center;
        cursor: pointer;
    }
    .nav-item.level-2.nolink   {
        font-family: var(--font-family-heading);
        font-size: var(--font-size-s);
        font-weight: bold;        
        text-align: center;
        cursor: pointer;
        color : var(--color-primary);
    }
 }    
 
/*========================================================================== */
/* HOME PAGE */
/*========================================================================== */ 
.builder-row.layout.homepage {
    display: block;
}

.node.node--page.node--1 .introduction {
    .layout__region--first {
        display: flex;
        .block.block--image {
            height: 100px;
            width: 300px;
            margin : auto;
        }
    }
}
    
.list--page-selection {
    .list-item .item-content .item-introduction {
      min-height: 100px;
    }
    .list-item .item-content {
      padding: 50px 0 0;
    }
    .list-item .item-header {
      padding: 0;
      min-height: 0;
    }
    .list-item .item-title {
      font-family: var(--font-family-heading);
    }
    .list-item .item-footer {
      opacity: 1;
      visibility: visible;
      background: none;
    }    
    & .item-footer {
        &::after {
            background: none;
        }
  }
}

/*========================================================================== */
/* PAGE */
/*========================================================================== */ 
.block.block--richtext {
    p {
        text-align: justify;
    }
}

.layout.background-primary-light {
    background: var(--color--primary-light);
    color : var(--color-primary);
}


.atlas-title {
    margin: 0;
    color: white;
    font-size: 26px;
}



/*========================================================================== */
/* menu-reference.nav--simple */
/*========================================================================== */
.block.block--menu-reference.nav.nav--simple {
    .nav-item.level-1 {
        width: 49%;
        a {
            border-radius: 15px;
        }
    }
}
.nav--simple {
    & .nav-item {
        & .item-title {
                text-decoration: none;
                margin : auto;
            
        }
    }
}

/*========================================================================== */
/* Icon */
/*========================================================================== */
.icon {
    --icon-size: var(--icon-size-l)
}

.icon.icon--station_urbaine:before{
    background: #0076bb;
}
.icon.icon--station_periurbaine:before{
    background: #be5875;
}
.icon.icon--station_rurale:before{
    background: #97c06f;
}
.icon.icon--station_trafic:before{
    background: #ff5050;
}


.icon.icon--indice1:before{
    background: #abc837;
}
.icon.icon--indice2:before{
    background: #50ccaa;
}
.icon.icon--indice3:before{
    background: #f0e641;
}
.icon.icon--indice4:before{
    background: #ff5050;
}
.icon.icon--indiceR:before{
    background: #960032;
}
.icon.icon--indice6:before{
    background: #872181;
}


/*========================================================================== */
/* */
/*========================================================================== */

.dataviz .buttonFilter.tabs {
    .p-tab {
        font-size: 0.8em;
        border-radius: 0 15px 0 0;
        color: var(--color-primary);
        border: 1px solid var(--color-primary);
    }
    .p-tab.p-tab-active {
            border-radius: 0 15px 0 0;
            background: var(--color-primary);
            color: white;
    }
    button:nth-child(1) {z-index : 5;}
    button:nth-child(2) {transform: translateX(-15px); z-index : 4;}
    button:nth-child(3) {transform: translateX(-30px); z-index : 3;}
}

.buttonRepresentation {
    .p-selectbutton {
        .p-togglebutton {
            padding: 0 !important;
            border : none !important;
            .p-togglebutton-content {
                border-radius : 0 !important;
                .p-togglebutton-label {
                    margin: 5px 10px !important;
                }
            }
        }
        .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;
        }
    }
}


/*========================================================================== */
/* DATAVIZ */
/*========================================================================== */
.dataviz {
  font-family: var(--font-form);
  p {
      text-align: justify;
  }
  .control-message {
      font-weight: bold;
      fill : var(--color--primary)
  }
}

.dataviz .source {
    fill : var(--color--font);
    font-style: italic;
    font-size: 0.9em;
    dominant-baseline: ideographic;
}

.dataviz .dataviz-header {
  background: none;
  border-radius: 0px;
  font-size: 1.5em;
  border-bottom: 2px solid var(--color--primary);
}
.dataviz .dataviz-header .subtitle--dataviz {
  margin-bottom: 2px;
  display: block;
}
.dataviz .dataviz-header .title--dataviz {
  line-height: 1.1;
  font-family: var(--font-family-heading);
  font-weight: bold;
  font-size: 0.8em;
}
.dataviz .dataviz-header .title--dataviz .replace--text.unit {
  font-size: 0.9em;
  font-style: italic;
}
.dataviz .dataviz-header .title--dataviz .replace--text {
  background: var(--color--primary);
  color: white;
  padding: 2px 8px;
  font-weight: normal;
  border-radius: 4px;
  font-size: 0.8em;
}
.dataviz strong {
  font-family: var(--font-form);
  font-weight: bold;
}


/*========================================================================== */
/* MODELE DATAVIZ */
/*========================================================================== */

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

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

/*========================================================================== */
/* CHIFFRE CLES */
/*========================================================================== */

.dataviz .keynumber-container {
    .keynumber {
        margin : 5px 0 5px 0;
    }
    .keynumber:first-child {
        margin-top : 0;
    }
    .keynumber:last-child {
        margin-bottom : 0;
    }
    .style2 {
        border-radius: 15px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: center;
        padding : 15px;
        .title, p {
            text-align: center;
            margin : 0;
        }
        strong {
            font-size: 1.8em;
        }
        .icon {
            height: 0;
        }
    }
}


.dataviz .keynumber.style1 {
    border-radius: 15px;
  background: var(--color--primary-light);
  color: var(--color--primary);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.dataviz .keynumber.style1 .prefixtext {
  font-size: 1.3em;
}
.dataviz .keynumber.style1 .text {
  font-family: var(--font-family-heading);
  text-align: center;
  font-size: 15px;
}
.dataviz .keynumber.style1 .text .title {
  font-size: 1.2em;
  font-weight: bold;
}
.dataviz .keynumber.style1 .text strong {
  font-family: var(--font-family-heading);
  display: block;
  font-size: 3em;
  font-weight: bold;
}
.dataviz .keynumber.style1 .text b {
  font-family: var(--font-family-heading);
  font-weight: bold;
}
.dataviz .keynumber.style1 .text .icon {
  font-size: 1.8em;
  vertical-align: middle;
}
.dataviz .keynumber.style1 .title {
  margin-top: 25px;
  font-weight: bold;
}
.dataviz .keynumber.style1 .sufixtext {
  margin-bottom: 25px;
  font-family: var(--font-form);
}
.dataviz .keynumber.style1 .sufixtext b {
  font-family: var(--font-form);
  font-weight: bold;
}

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

/*========================================================================== */
/* CSS spécifique aux tableaux réglementaires */
/*========================================================================== */
.reg-tab table tbody tr:nth-of-type(2n) td.tab-reg--header {
  background-color: none;
}

.reg-tab table {
  border-collapse: inherit;
  border: none;
  border-spacing: 0 3px;
}

.reg-tab table tbody td {
  background-color: none;
  border: none;
  text-align: center;
}

.reg-tab table th, .reg-tab table td {
  vertical-align: middle;
  padding: 2px 2px;
}

.reg-tab .tab-reg--header {
  background-color: var(--color--primary-light);
  color: var(--color--primary);
  font-weight: bold;
  font-size: 1em;
}

.reg-tab .tab-reg--header.polluant {
  font-size: 1.3em;
}

.reg-tab .none {
  background-color: #dddddd;
}

.new-reg-tab {
  overflow-y: auto;
  max-height: 750px;
}

.print-page .new-reg-tab {
  overflow-y: unset;
  max-height: unset;
}

.new-reg-tab table tbody tr:nth-of-type(2n) td {
  background: none;
}

.new-reg-tab table {
  border-collapse: inherit;
  border: none;
  border-spacing: 0 3px;
}

.new-reg-tab table tbody td {
  background: none;
  border: none;
  text-align: center;
  font-weight: bold;
}
.new-reg-tab table tbody td strong {
  color: unset;
}

.new-reg-tab table th, .new-reg-tab table td {
  vertical-align: middle;
  padding: 2px 2px;
}

.new-reg-tab .tab-reg--header {
  background-color: rgba(0, 132, 168, 0.1);
  color: rgb(0, 132, 168);
  font-weight: bold;
  font-size: 1.15em;
}

.new-reg-tab .tab-reg--header.polluant {
  font-size: 1.3em;
}