/*--------------------------------------------------------------------------------------------------------------------
 FONT
--------------------------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: "kanit--regular";
    src: url("/sites/obdec/files/fonts/Kanit-Regular.ttf");
}

/*--------------------------------------------------------------------------------------------------------------------
 VARIABLES
--------------------------------------------------------------------------------------------------------------------*/
:root {
    --color-bg-primary: rgba(70, 161, 65, .1); /* --color-primary to rgba */
    --color-primary: #46A141;
    --color-primary-light : #EEF4EA;
    --color-secondary: #EEF4EA;
    --color-text : #000000;
    --color-dataviz-text : #959595;
    --font-family : "kanit--regular", sans-serif;
}

/*--------------------------------------------------------------------------------------------------------------------
 PRIMEVUE
--------------------------------------------------------------------------------------------------------------------*/
:root {
    --p-primary-hover-color  : var(--color-primary) !important;
    --p-primary-color : var(--color-primary) !important;
    --p-surface-400 : var(--color-primary) !important;


    --p-select-border-color : var(--color-primary) !important;
    --p-select-option-selected-background : var(--color-primary-light) !important;
    --p-select-option-selected-focus-background : var(--color-primary-light) !important;
    --p-select-option-selected-color : var(--color-primary) !important;
    --p-select-option-selected-focus-color : var(--color-primary) !important;
    --p-select-focus-border-color : var(--color-primary) !important;

    --p-tabs-tab-border-color : var(--color-primary) !important;
    --p-tabs-tab-color : var(--color-primary) !important;
    --p-tabs-tab-background : var(--color-primary-light) !important;
    --p-tabs-tab-hover-background : var(--color-primary-light) !important;
    --p-tabs-tab-hover-border-color : var(--color-primary) !important;
    --p-tabs-tab-active-background : var(--color-primary) !important;
    --p-tabs-tab-active-border-color : var(--color-primary) !important;
    --p-tabs-tab-active-color : #ffffff !important;
    --p-tabs-tab-border-width : 1px !important;
    --p-tabs-tab-hover-color : var(--color-primary) !important;

    --p-togglebutton-background: #E4DDE7 !important;
    --p-togglebutton-color : var(--color-primary) !important;
    --p-togglebutton-checked-background: #E4DDE7 !important;
    --p-togglebutton-checked-color : #E4DDE7 !important;
    --p-togglebutton-content-checked-background: var(--color-primary) !important ;

    --p-radiobutton-checked-border-color : var(--color-primary) !important;
    --p-radiobutton-checked-background : var(--color-primary) !important;
    --p-radiobutton-icon-checked-color : var(--color-primary) !important;
    --p-radiobutton-border-color : var(--color-primary) !important;

    --p-select-option-group-background : var(--color-primary) !important;
    --p-select-option-group-color : white !important;
}

.dataviz .buttonRepresentation {
    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;
        }
    }
}


.node--page .block.block--richtext p,
.node--page .block.block--richtext li {
    color : #666;
}
.introduction .block.block--richtext p {
    color : #fff;
}

.node.node--page .builder-row.l-background {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 400px;

    .block.block--richtext {
        margin : 15px;
    }
}

.nav-item.level-1 .donnees_territoriales + .nav-menu.level-2,
.nav-item.level-1 .no-level2 + .nav-menu.level-2,
.nav-item.level-2 .no-level3 + .nav-menu.level-3,
.nav--main .nav-item.level-2.is-parent a.no-level3::after {
    display: none;
}

.content-builder-sidebar {
    background: none;
}

.is-fixed .content-builder-sidebar {
     .content-builder-sidebar-inner {
        top: calc(86px + 53px);
    }
}

.nav--detail {
    .nav-item .icon {
        display: block;
        margin-right: 10px;
    }
    .nav-item .icon::before {
        font-size: 2em;
    }
    .nav-item a {
        padding: 9px 10px 9px 25px;
    }
    .nav-item .item-title {
        font-size: .85em;
    }
    .nav-item a.is-active, .nav-item a:hover {
        background: var(--color-primary);
        color : white;
        .icon::before {
            background-color: white;
        }
    }
}


.block--image {
    &:before {
        content: none;
    }
    img {
        border-radius: 5px;
    }
}

.nav--children a {
    border-radius: 5px;
}

.layout--onecol .dataviz {
  margin: 0
}

.list--page-selection .item-wrapper {
    border-radius: 5px;
}

.block.block--sticky-event {
    background: var(--color-primary-light);
    position: absolute;
    top : calc(-1*var(--sticky-event-height));
}

/*
//_________________________________________________________________
// La class  align-vetical-block sur une section aligne verticalement les blocs */
.node--page .layout.align-vetical-block  {
    .builder-item.layout__region {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.node--page .block.block--richtext {
    h3 {
        margin-bottom : 0;
    }
    p {
        margin-bottom : 10px;
    }
    strong {
        font-family: var(--font-family);
        font-weight: bold;
        color: #2B2929;
    }

    .icon {
        --icon-size: 3em;
        vertical-align: middle;

        &:before {
            background-color: var(--color-primary);
        }
    }
}


.block.block--nav-summary {
    padding: 0;
    background: #ecf5eb;
    color : var(--color-primary);

    .nav-item {
        min-height: 35px;

        .l-accordion.is-open {
            background: var(--color-primary);

            .nav-menu-trigger {
                color : white;
            }
        }
    }
    .nav-menu-trigger {
        color: var(--color-primary);
    }
}


/*_________________________________________________________________
//
// DATAVIZ MENU de selection de terrioire
//
//_________________________________________________________________*/
.dataviz.category--menu {
    z-index : 50;
    position: inherit;

    .title {
        font-family: var(--font-family);
        font-weight: bold;
        line-height: 1.1;
        color: var(--color-primary);
        text-transform: uppercase;

        .sub-title {
            text-transform: initial;
            font-style: italic;
            font-size: .8em;
        }
    }
    .menu-secteur {
        color: var(--color-primary);
        font-weight: bold;
    }
    .typeahead__filter-button {
        color: var(--color-primary);
        text-align: left;
    }
    .lib-search-epci {
        color: var(--color-primary);
        font-style: italic;
        cursor : pointer;
        font-size: .8em;
    }

    .btn.icon {
        font-size: 2.5em;
        color: var(--color-primary);
        line-height: 1;
        background: none;
        padding: 0;

    }
    .btn:hover{
        background: var(--color-primary);
    }
    .btn.icon:hover{
        color: #fff;
    }
}


/*_________________________________________________________________
//
// DATAVIZ CHIFFRE CLE
//
//_________________________________________________________________*/
.dataviz .keynumber.style1 {
    margin : 5px;

    strong {
        font-size: 2em;
        font-weight: bold;
    }
    .icon {
        background: white;
        height: 80px;
        width: 80px;
        &::before {
            mask-size: 4em;
        }
    }
}

.keynumber.text.style1 {
    padding: 25px 0 25px 0;
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
    .title {
        margin-bottom: 15px;
        color: white;
    }
    .icon {
        background-color: white;
        border-radius: 50%;
        color: var(--color-primary);
        width: 80px;
        height: 80px;
    }
/*    .icon::before {
        transform: translateX(9px);

    }*/
    .number {
        font-size: 1.8em;
        font-weight: bold;
        color: white;
    }
    .text {
        font-weight: bold;
        margin-bottom: 15px;
        color: white;
    }
    .sufixtext {
        color : white;
    }
}

/*_________________________________________________________________
//
// DATAVIZ HEADER
//
//_________________________________________________________________*/
.dataviz-header {
    .title.title--dataviz {
        .replace--text.icon {
            font-size: 2em;
            line-height: 0.75;
        }
    }
}

/*_________________________________________________________________
//
// DATAVIZ CONTAINER
//
//_________________________________________________________________*/
.dataviz-sidebar-container {
    display: flex;

    .dataviz-container {
        flex: 1;
        width: 75%;
    }
    .dataviz-sidebar {
        width: 25%;
        padding: 0px 0 0 24px;
    }
}

.dataviz.category--dataviz-modele-2 {
    .dataviz-sidebar-container {
        flex-direction: column-reverse;

    }
    .dataviz-container,
    .dataviz-sidebar {
        width: 100%;
    }
}

.dataviz.category--dataviz-modele-3 {
    .dataviz-sidebar-container {
        flex-direction: column
    }
    .dataviz-container,
    .dataviz-sidebar {
        width: 100%;
    }
}


/* category--dataviz-modele-1 : */
.dataviz.category--dataviz-modele-1 {
    .dataviz-sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }
    .dataviz-form--prefix {
        display: none;
    }
}



/*_________________________________________________________________
// FORMULAIRE
//_________________________________________________________________*/
.dataviz-form .form-align,
.dataviz-form .first,
.dataviz-form .second {
    display: block;

    .buttonFilter {
        margin-right: 10px;
    }
}

.dataviz-form .form-align,
.dataviz-form .first-align {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}


/* Style du formulaire : .dataviz-form.top */
.dataviz-form.top {
    display: flex;
    justify-content: space-between;

    .topleft {
        display: flex;

        .buttonFilter {
            margin-right: 10px;
        }
    }
}


/* Radio button
//______________________________________________*/
.dataviz-form .buttonFilter .radioFilter--label {
    margin: 0 0 0px;
}


/* with-icon
//__________________________________________________________________*/
.radioFilter.with-icon {
    .radioFilter--element {
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        cursor: pointer;
    }
    .p-radiobutton {
        width: 50px;
        height: 50px;
        flex: none;
    }
    .p-radiobutton-box.icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid currentColor;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
        opacity: .7;
        transition: background .2s, box-shadow .2s, opacity .2s, transform .2s;
    }
    .p-radiobutton-box.icon::before {
        content: '';
        display: block;
        width: 30px;
        height: 30px;
        background-color: currentColor !important;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }
    .radioFilter--element:hover .p-radiobutton-box.icon {
        opacity: 1;
        transform: scale(1.05);
    }
    .p-radiobutton-checked .p-radiobutton-box.icon {
        background: currentColor;
        opacity: 1;
        box-shadow: 0 3px 10px rgba(0,0,0,.28);
    }
    .p-radiobutton-checked .p-radiobutton-box.icon::before {
        filter: brightness(0) invert(1);
    }
    .radioFilter--element-label {
        font-weight: 600;
    }
    .radioFilter--element.checked .radioFilter--element-label {
        color: #1f1f1f;
    }
}

.radioFilter.with-simple-icon {
  & .radioFilter--element { align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; }
  & .p-radiobutton { width: 26px; height: 26px; flex: 0 0 auto; }
  & .p-radiobutton-box.icon {
    width: 26px; height: 26px;
    border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  }
  & .p-radiobutton-box.icon::before {
    content: ""; display: block; width: 26px; height: 26px;
    background-color: currentColor !important;
    mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  }
  & .radioFilter--element-label { font-weight: 600; }
}


.dataviz-form  .buttonFilter.buttonFilter.radioFilter.vertical {
    margin-top: 0;
    margin-bottom : 20px;
    color : var(--color-dataviz-text);
    .radioFilter--content {
        display: flex;
        flex-direction: column;
        .radioFilter--label {
            margin-bottom :10px;
        }
        .radioFilter--element {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom :0px;
        }
        .radioFilter--element-label {
            font-weight: normal;
            font-size: 0.9em;
            margin-bottom: 0;
            margin-left: 10px;
            font-family : var(--font-family);
        }

    }
    .p-radiobutton-box.icon::before {
        background-color: currentColor !important;

    }
    .p-radiobutton-checked {
        .radioFilter--element-label {
            font-weight: bold;
            color: #1f1f1f;
        }
    }
    .radioFilter--element.checked .radioFilter--element-label {
        color: #1f1f1f;
    }
    
}


/* button-representation
//_______________________________________________________________________________________*/
/* .dataviz .radioFilter.switch {
     margin: 0 10px 10px 0;

     .radioFilter--label {
         display: none;
     }
    .radioFilter--groupcontent {
        display: flex;
        border: 1px solid var(--color-primary);
        padding-left: 0;
        border-radius: 50em;
        width: fit-content;
    }
    .radioFilter--content {
        display: flex;
        overflow: hidden;

        > * {
            border-left: 1px solid var(--color-primary);
        }
        &:first-child {
            border-radius: 50em 0 0 50em;

            label {
                border-left: none;
            }
        }
        &:last-child {
            border-radius: 0 50em 50em 0;

            label {
                border-right: none;
            }
        }
    }

    input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden;
    }
    label {
        margin : 0;
        background-color: var(--color-secondary);
        color: var(--color-primary);
        font-size: 12px;
        font-weight: normal;
        line-height: 1;
        text-align: center;
        padding: 8px 16px;
        transition: all 0.1s ease-in-out;
    }
    label:hover {
	    cursor: pointer;
    }

    input:checked + label {
        background-color: var(--color-primary);
        color : white;
        font-weight: bold;
        box-shadow: none;
    }
 }*/

.dataviz .buttonFilter.switch {
    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 : MapLeaflet
//_________________________________________________________________*/
.dataviz .leaflet-control-container > * {
    z-index: 0;
}

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

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

.leaflet-container {
    background: #fff;
}
.leaflet-legend {
    background: #fff;
    padding: 10px;
}

/*.dataviz .leaflet-contour-departement-pane > path {*/
.dataviz .leaflet-pane > svg path.leaflet-interactive {
    fill: none;
    pointer-events: none;
    stroke: white;
    stroke-width: 2px;
}
.dataviz .leaflet-contour-epci-pane  > svg path.leaflet-interactive {
    stroke: #808080;
    stroke-width: 2px;
}
.dataviz path.static {
    stroke: #ffffff;
    stroke-width: 1px;
}
.dataviz[data-nid="80"] path.static {
    stroke: #ffffff;
    stroke-width: .25px;
}
.dataviz path.applat {
    stroke: #ffffff;
    stroke-width: 1px;
}
.dataviz .legend-container .icon-group {
    .legend-block[select="unchecked"] {
            opacity: .3;
    }
}


.messages__nodata {
    background: #483e1e;
    padding: 12px;
    border: 2px solid transparent;
    border-radius: 10px;

    .messages__header {
        color: #efcf64;
        font-weight: bold;
    }
    .messages__content {
        color: #efcf64;
    }
}