/*--------------------------------------------------------------------------------------------------------------------
 FONT 
--------------------------------------------------------------------------------------------------------------------*/
@font-face { font-family: "Open Sans"; src: url("/sites/terriscan/files/fonts/OpenSans-Regular.ttf"); }

@font-face {
    font-family: "Montserrat";
    src: url("/sites/atmo-occitanie/files/fonts/Montserrat-Regular.woff2");
}

@font-face {
    font-family: "Montserrat";
    src: url("/sites/atmo-occitanie/files/fonts/Montserrat-Bold.woff2");
    font-weight: bold;
}


 :root{
    --font-family : "Poppins", Arial, serif; 
    --font : "Poppins", Arial, serif;
    --color-text : #2B2929;
    --color-primary : #001132;
    --color-primary-ligth : #e5e7ea;
    --color-secondary : #d1d85b;
    --color-blue-dark : #1c2d45;
    --color-blue-light : #f1f3f4;
    --color-gray : #565656;
    --color-gray-light : #d9d9d9;
    --color-anise : #c1d100;
    --color-active : #c1d100;
    --color-turquoise : #60c0cc;
    
    --p-tabs-tab-active-color : #007581 !important;
    --p-tabs-tablist-background : none !important;
    --p-tabs-active-bar-background :  #d1d85b !important;
    --p-tabs-tablist-border-color : none !important;
    --p-tabs-tab-hover-background : #e5e7ea !important;
    --p-tabs-tab-hover-border-color : #001132 !important;
    --p-tabs-tab-hover-color : #001132 !important;
    
    
    --p-togglebutton-background: #e5e7ea !important;
    --p-togglebutton-color : #001132 !important;
    --p-togglebutton-checked-background: #e5e7ea !important;
    --p-togglebutton-checked-color : #e5e7ea !important;
    --p-togglebutton-content-checked-background: #001132 !important ;    
    
    --p-togglebutton-padding : 0 !important;
    --p-togglebutton-content-padding : 15px 0 !important;
    --p-togglebutton-content-border-radius : 0 !important;
    --p-selectbutton-border-radius : 0px !important;

 }



/*========================================================================== */
/* PrimeVue
*/
/*========================================================================== */
.dataviz .buttonFilter.tabs {
    .p-tab {
        font-size: 0.8em;
        border-radius: 0 15px 0 0;
        color: var(--color-primary);
    }
    .p-tab.p-tab-active {
            border-radius: 0 15px 0 0;
            background: var(--color-primary);
            color: white;
    }
    & button {
        background: white;
        border : 1px solid var(--color-primary);
    }
    
    button:nth-child(1) { z-index : 14}
    button:nth-child(2) {transform: translateX(-15px); z-index : 13}
    button:nth-child(3) {transform: translateX(-30px); z-index : 12}
    button:nth-child(4) {transform: translateX(-45px); z-index : 11}
    button:nth-child(5) {transform: translateX(-60px); z-index : 10}
    button:nth-child(6) {transform: translateX(-75px); z-index : 9}
    button:nth-child(7) {transform: translateX(-90px); z-index : 8}
    button:nth-child(8) {transform: translateX(-105px); z-index : 7}
    button:nth-child(9) {transform: translateX(-120px); z-index : 6}
    button:nth-child(10) {transform: translateX(-135px); z-index : 5}
    button:nth-child(11) {transform: translateX(-150px); z-index : 4}
    button:nth-child(12) {transform: translateX(-165px); z-index : 3}
}


.dataviz .buttonRepresentation {
    margin : 10px 0;
    text-align: right;
    .p-selectbutton {
        .p-togglebutton {
            padding: 0 !important;
            border : none !important;
            font-size: 12px !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 .buttonFilter.multiselect {
    .p-floatlabel {
        font-size: 0.8em;
    }
}

.mode-draw {
    .p-togglebutton {
        width: 50%;
    }
}

.page.node--page {
    background: var(--color-primary-ligth);
}


.dataviz[data-nid="188"] {
    .selected {
        border : 1px solid var(--color-primary);
    }
    .unselected {
        border : 1px solid var(--color-primary-ligth);
    }
}

/*========================================================================== */
/* main-header
*/
/*========================================================================== */
.main-header {
    background-image: url("/sites/terriscan/files/imgs/terriscan_bandeau.png");
    .main-header-navigation .row {
        background-image: url("/sites/terriscan/files/imgs/terriscan_bandeau.png");    
        border-bottom: 2px solid white;
        max-width: 100%;
    }
    .main-header-navigation {
        background: none;
        border-top: 2px solid white;
    }
    .nav--secondary .nav-item a {
        color: white;
        position: relative;
    }
    
}

.logo.logo--primary::after {
    content : "terriSCAN";
    color : white;
}



/*========================================================================== */
/* page-selection
*/
/*========================================================================== */
.list--page-selection {
    & .item-introduction {
        display: block;
        width: 60%;
        padding: 10px 25px;
    }
    & .item-content {
        display: flex;
        flex-direction: row-reverse;
    }
    & .item-header {
        min-height: 0;
        background: var(--color-anise);
        border : none;
    }
    & .item-thumbnail {
        width: 40%;
        & img {
            width: 100%;
        }
    }
}
/*========================================================================== */
/* slider--slideshow
*/
/*========================================================================== */
.slider--slideshow {
    
    .leaflet-legend {
        background: none;
    }
    .dataviz .text-legend-map .tick text {
        font-size: 0.8em;
    }
    
    .item-media {
        height: 510px;
    }
    .row {
        .dataviz {
            box-shadow : none;
        }
        .dataviz.category--modele-top .dataviz-container {
            width: unset;
        }
        .item-bg {
            display: none;
        }
        .dataviz-content {
            max-width: unset;
        }
        .item-content {
            top : none;
            left : 25px;
            width: 500px;
            background: none;
            color : var(--color-primary);
            border-top : none;
        }
        margin-left : 0;
    }
    .splide__arrows {
        bottom : 10px;
    }
}


/*========================================================================== */
/* Footer
*/
/*========================================================================== */
.main-footer-inner{
    background-image: url("/sites/terriscan/files/imgs/terriscan_bandeau.png");
}

.theme-dark, .main-footer {
    & .btn, & .button {
        color: var(--color-white);
        font-weight: bold;
        border: 1px solid white;
    }
}

.btn {
    & .icon {
        --icon-size: 36px;
        margin-right: 10px;
        background: white;
    }
}

.btn--secondary, .btn--primary, .button--secondary {
  a:focus &, a:hover &, &:active, &.is-active, &:focus, &:hover {
    color: var(--color-primary);
    background-color: white;
  }
}


/*========================================================================== */
/* Menu de navigation (nav nav--main)
*/
/*========================================================================== */

.site-baseline {
    background-image: url("/sites/terriscan/files/imgs/terriscan_bandeau.png");
    color : white;
    text-align: center;
    font-size: 1.4em;
    padding: 10px 0;
    border-bottom: 2px solid white;
    font-family: var(--font-family-heading);
    font-size: 1.5em;
}

.nav.nav--main {
    a {
        color : white;
        height: 50px;
        font-family: var(--font-family-heading);
        font-size: 1.3em;
        height: unset;
    }
    .nav-menu.level-1 {
        height: 75px;
    }
    .nav-item.level-1 > a {
        border-radius: 50px;
        height: 50px;
    }
    .nav-item.level-1 > a:focus,
    .nav-item.level-1:hover > a
    {
        color: var(--color-primary);
        background: var(--color-primary-ligth);
        border-radius: 50px;
        height: 50px;
    }
    .nav-item.level-1 > a:active,
    .nav-item.level-1.is-active-trail > a {
        color: var(--color-primary);
        background: white;
        border-radius: 50px;
        height: 50px;
    }
    .nav-menu.level-2 {
        margin-top : 13px;
        a {
            font-size: 1.2em;
        }
    }
    .nav-menu.level-2 span {
        font-size: 1.2em;
        padding: 10px 20px;
        font-family: var(--font-family-heading);
    }
    .nav--main .nav-menu.level-2::before {
        background: transparent transparent var(--color-primary-ligth);
    }
 
}

.nav--detail {
  & .nav-item {
    & .item-title {
        pointer-events: none;
        font-weight: normal;
    }
  }
}

.nav.nav--secondary {
    .new-territoire {
        background: var(--color-anise);
        height: 50px;
        display: flex;
        border-radius: 50px;
        align-items: center;
        padding: 0 5px;
        pointer-events: auto;
        cursor: pointer;
    }
}

/*========================================================================== */
/* Menu de la sidebar : block--menu-reference
*/
/*========================================================================== */
.content-builder-sidebar {
    background: none;
    .nav.nav--detail.block--menu-reference {
        padding : 0;
        .nav-item.level-1 .icon {
            display: none;
        }
        .nav-item.level-1 .icon::before {
                font-size: 30px;
                line-height: 1;
        }
        .nav-item.level-1 .item-title {
            font-size: 0.938rem;
        }
        .nav-item.level-2 .item-title {
            font-size: 0.85em;
            margin-left: 30px;
            text-align: right;        
        }
        .nolink {
            display: inline-flex;
            align-items: center;
            width: inherit;
            height: 100%;
            padding: var(--space-xs) var(--gutter-l);
            background: var(--color-bg-primary);
            color : var(--color-primary);
            box-sizing: border-box;
        }
    }
    .block.block--richtext {
        padding : 15px 0 0 0;
    }
}

/*========================================================================== */
/* Page */
/*========================================================================== */
/*.builder-row {
    margin-bottom: 0;
    margin-top : 0;
}*/


.block--richtext {
  & .item-push {
    &.push--primary {
        font-family: var(--font-family-heading);
        color : var(--color-primary);
        font-size: 2em;
        text-transform: uppercase;
        margin: 25px auto;
        text-align: center;
        span {
            text-transform: initial;
            font-size: 2.5em;
        }
    }
  }
}

.block--richtext {
  & .item-push {
    &.push--secondary {

        font-family: var(--font-family-heading);
        margin: auto;
        text-align: center;
        background: #c1d100;
        color: var(--color-primary);
        font-size: 2em;
        padding : 20px;
    }
  }
}

.questionnaire {
    text-align: center;
    margin : 15px;
    .btn.btn--primary {
        background: var(--color-anise);
        font-family: var(--font-family-heading);
        
    }
}

/*========================================================================== */
/* Modele de dataviz */
/*========================================================================== */
.dataviz {
    background: white;
    .dataviz-footer {
        font-size: 0.7em;
        font-weight: normal;
        font-style: italic;        
    }
    .dataviz-super-container {
        width: 100%;
    }
    .dataviz-form--prefix {
        font-size: 0.85em;
    }
}

.layout--sidebar .dataviz {
    box-shadow: none
}

.dataviz {
    font-family: var(--font);
    .dataviz-header {
        background: none;
        margin-bottom: 0;
        padding : 10px 0;
        
        .title--dataviz {
            color : var(--color-primary);
            font-weight: 600;
            .replace--text.unit {
                font-size: 0.8em;
                font-style: italic;
            }
        }
    }
    .secteur {
        background: var(--color-blue-dark);
        color : white;
        padding: 5px;
        margin-right: 5px;
        border-radius: 5px;
        font-size: 0.9em;
    }
    .detail {
        background: var(--color-anise);
        color : white;
        padding: 5px;
        margin-right: 5px;
        border-radius: 5px;
        font-size: 0.9em;
    }
    .comparaison {
        background: var(--color-turquoise);
        color : white;
        padding: 5px;
        margin-right: 5px;
        border-radius: 5px;
        font-size: 0.9em;
    }
    
    
    .subtitle--dataviz {
        display: block;
        .secteur {
            background: var(--color-blue-dark);
            color : white;
            padding: 5px;
            margin-right: 5px;
            border-radius: 5px;
            font-size: 0.9em;
        }
        .detail {
            background: var(--color-anise);
            color : white;
            padding: 5px;
            margin-right: 5px;
            border-radius: 5px;
            font-size: 0.9em;
        }
        .comparaison {
            background: var(--color-turquoise);
            color : white;
            padding: 5px;
            margin-right: 5px;
            border-radius: 5px;
            font-size: 0.9em;
        }
    }
    
    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-sidebar-right {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: row;
    }
    .dataviz-sidebar {
        width: 25%;
        padding: 0 6px;
    }
    .buttonFilter {
        margin-bottom : 15px;
    }
}


.dataviz.category--modele-sidebar-left {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: row-reverse;
        
    }
    .dataviz-container {
        width: 75%;
    }
    .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;
    }
    .dataviz-form.top {
        margin-bottom: 0px;
    }
    .dataviz-content
    .form-first {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        margin-bottom: 10px;
    }
    .form-second {
        display: flex;
        flex-direction: row;
        justify-content: space-between;        
        background: var(--color-primary-ligth);
        padding: 20px 5px;
        margin-bottom: 10px;
        .buttonFilter[scanname="typeDecoupageButton"] {
            width: 33%;
        }
        .buttonFilter[scanname="zoomButton"] {
            width: 60%;
        }
    }
    
}


.dataviz.category--modele-sidebar-bottom {
    .dataviz-sidebar-container {
        display: flex;
        flex-direction: column;
        background: white;
    }
    .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;
            }
    }
}

/* Style pour les dataviz simplifiées dans les map */
.dataviz-simply {
    .dataviz.category--modele-sidebar-top {
        .dataviz-sidebar-container {
            background: none;
        }
        .dataviz-sidebar {
            display: none;
        }
        header {
            display: none;
        }
        .dataviz-footer {
            display: none;
        }
    }
    
}

/*_________________________________________________________________
 Chiffres clé
_________________________________________________________________*/
.dataviz .keynumber-container {
    
    .keynumber {
        margin : 5px 0 5px 0;
    }
    .keynumber:first-child {
        margin-top : 0;
    }
    .keynumber:last-child {
        margin-bottom : 0;
    }
    .style1 {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: center;
        .title, p {
            margin : 0;
        }
        strong {
            font-family: var(--font);
            font-size: 1.8em;
        }
        .icon {
            height: 0;
        }
    }
    .style-text {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: left;
        .title, p {
            margin : 0;
        }
        strong {
            font-family: var(--font);
            font-size: 1.8em;
        }
        .icon {
            height: 0;
        }
    }
    
    
}

/*_________________________________________________________________
 DATAVIZ : Plot
_________________________________________________________________*/
 
 .dataviz .legend, .dataviz .legend-div  {
    .legend-icon {
        transform: scale(0.05);
    }
    .legend-text {
        font-size: 1em;
        fill : var(--color-text);
    }
    .legend-value {
        font-size: 0.9em;
        dominant-baseline: auto;       
        font-style: italic;
    }
    .legend-title {
        font-style: italic;
        font-size: 0.8em;
        fill : #cccccc;
    }
}

 
 

/* Tooltip
_________________________________________________________________*/
 
 .dataviz .tooltip.pie, .dataviz .tooltip.plotBar,.dataviz .tooltip.treemap--tooltip,  .tooltip.Heatmap--tooltip, .tooltip.area--tooltip ,
 .voronoi--tooltip, .waffle--tooltip,.specialBubble--tooltip, .bubble--tooltip, .barlink--tooltip {
    background: white;
    color: var(--color-text);
    border : 1px solid var(--color-primary);
    border-radius: 5px;
    font-size : 0.9em;
    max-width: 500px;
    padding: 10px;
    pointer-events: none;
}


.dataviz .tooltip.plotBar tr.content {
    text-align: left;
}

.dataviz .tooltip.plotBar tr.content.isActive {
    font-weight: bold;
}

.dataviz .tooltip.plotBar tr.content.not-representative {
    font-size: 0.8em;
}


.dataviz .scan.bubble {
    foreignObject {
        color : white;
    }
}




/*_________________________________________________________________
 DATAVIZ : plotBar
_________________________________________________________________*/

.dataviz .scan--bar .axis.xaxis, .dataviz .scan--bar .axis.yaxis {
    font-size: 0.85em;
    font-family: var(--font);
}

.dataviz .scan--bar .axis.yaxis {
    font-family: var(--font);
    fill : var(--color-text);
    font-size: 0.85em;
}

.dataviz .graphBar .svg-fond-line {
    stroke: var(--color-text);
    stroke-dasharray: 4;
}

.svg-fond-line {
    stroke: var(--color-text);
    stroke-dasharray: 4;
}

.dataviz .graphBar text.bar_label {
    font-size: 0.8em;
    &[defy="equip0"] {
        fill : var(--color-text);
    }
    &[defy="freq_4"] {
        fill : var(--color-text);
    }
}

.dataviz .graphBar text.stagger-label {
    font-size: 1em;
}

.dataviz .scan--bar .bar.grouped {
    stroke : white;
    stroke-width: 2px;
}

.dataviz .scan.mapflow{
    path.secteur_geo {
        stroke : var(--color-primary)
    }
}

/*_________________________________________________________________
// DATAVIZ : Marimekko
//_________________________________________________________________*/

.dataviz .plotMarimekko {
    .text_colomn {
        font-weight: bold;
    }
    .text_cell {
        font-size: 0.9em;
        fill: white;
    }
}

/*_________________________________________________________________
// DATAVIZ : Treemap
//_________________________________________________________________*/

.dataviz .treemap {
    .points_g text {
        font-family: var(--font)
    }

}


/*_________________________________________________________________
// DATAVIZ : Voronoi
//_________________________________________________________________*/

.dataviz .scan.heatmap {
    .label--voronoi {
        fill : var(--color-text);
        font-family: var(--font);
        
    }
}
/*_________________________________________________________________
// DATAVIZ : heatmap
//_________________________________________________________________*/
 
 .dataviz .scan.heatmap {
     
    .axis.xaxis  {
        font-size: 12px;
        font-family: var(--font);
    }
    .axis.yaxis  {
        font-size: 12px;
        font-family: var(--font);
    }
     
 }
 
 
/*_________________________________________________________________
// DATAVIZ : SpecialBubble
//_________________________________________________________________*/
 .dataviz .scan.specialBubble {
    .bubble-circle {
        stroke : white;
    }
}
 
/*_________________________________________________________________
// DATAVIZ :  plotBarLink
//_________________________________________________________________*/
 .dataviz .scan.plotBarLink {
    .text-xLabel, .text-yLabel {
        font-size: 1.2em ;
    }
 }

 
/*_________________________________________________________________
// DATAVIZ : MapLeaflet
//_________________________________________________________________*/

.dataviz .leaflet-control-container > * {
    z-index : 0;
}

.dataviz  .leaflet-control-layers {
    .leaflet-control-layers-toggle {
	    background-image: url(/sites/observatoires-normandie/files/imgs/layers.png);
    }
}

.dataviz .leaflet-control-layers-base {
    label {
	    font-family: var(--font);
    }
}


.dataviz .leaflet-bottom.leaflet-left {
    width: 50%;
}

/* plugin graphicscale : affichage d'une échelle */
.dataviz .leaflet-control.leaflet-control-graphicscale {
    margin-bottom :0;
    color : var(--color-text);
}

.leaflet-container {
    background: #ffffff;    
}



.dataviz .leaflet-container {
    font-family: var(--font);
}

.dataviz .leaflet-pane.leaflet-contour-parent-pane > svg path.leaflet-interactive {
    fill : none;
    pointer-events: none;
    stroke: var(--color-anise);
    stroke-width: 2px;
}

.dataviz .leaflet-pane.leaflet-coutour_selected-commune-pane  > svg path.leaflet-interactive {
    fill : none;
    stroke : var(--color-active);
}


.dataviz .leaflet-contour-epci-pane  > svg path.leaflet-interactive {
    stroke: #808080;
    stroke-width: 2px;
}

.dataviz path.static {
    stroke: #ffffff;
    stroke-width: 1px;
}

.dataviz path.applat {
    stroke: #ffffff;
    stroke-width: 1px;
}


/* Legend */
.leaflet-legend {
    background: #ffffff;
    padding: 10px;
}


.dataviz .legend-container {
    .legend-content.bottom {
        margin-top : 6px;
        width: 100%;
    }
}

.dataviz .legend-container .icon-group {
    .legend-block[select="unchecked"] {
            opacity : 0.3;
    }
}
.dataviz  .legend-container .map-legend.quantile-scale {
    font-size: 0.7em;
}
.dataviz .text-legend-map .tick{
    font-family: var(--font);
    font-size: 14px;
    fill : var(--color-text);
    text {
        fill : var(--color-text);      
    }
}

.dataviz .tooltip.scan.map {
    background: var(--color-primary-ligth);
    color: var(--color-text);
    border-radius: 5px;
    font-size : 0.9em;
    font-family: var(--font);
    max-width: 200px;
    padding : 10px;
    .tooltip-title {
        font-weight: bold;
        font-family: var(--font);
        color : var(--color-primary);
        text-align: center;
    }
    .tooltip-content {
        font-family: var(--font);
        text-align: center;
        b {
            font-family: var(--font);
            font-weight: bold;
        }
    }
    .tooltip-suffix {
        font-style: italic;
        font-weight: lighter;
        text-align: center;

    }
    .dataviz {
        font-size : 0.8em;
    }
}

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

STYLE DE DATAVIZ SPECIFIQUE

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


/*==========================================================================
Carte de selection de territoire
========================================================================== */
.dataviz[data-nid="193"] {
    background: var(--color-primary);
    margin-top : 0;
    .dataviz {
        box-shadow : none;
    }
    .dataviz-header {
        .title--dataviz {
            color : white;
        }
    }
    .menu-title {
        font-size:1.4em;
        color : white;
    }
    .second {
        display: flex;
        justify-content: end;
        align-items: center;
        margin-right: 10px;
        /*.p-select {
            background: var(--color-primary-ligth) !important;            
        }
        .p-select-overlay {
            background: var(--color-primary-ligth) !important;
        }
        .p-floatlabel-on:has(.p-inputwrapper-filled) label {
            background: var(--color-primary-ligth) !important;
        }*/
    }
    .fourth {
        min-height: 120px;
        .selected-territoire {
            p {
                color : white;
                font-size: 1.2em;
                font-weight: bold;
            }
        }
    }
    .p-icon.p-select-dropdown-icon path {
        fill : var(--color-primary)
    }
    .leaflet-container {
        background: var(--color-primary);
    }
    .leaflet-top.leaflet-right {
        display: none;
    }
}