div[data-elementor-type="single-page"] > .elementor-section-wrap > section.elementor-section:first-child,
div[data-elementor-type="single-page"] > section.elementor-section:first-child{
    display:none;
}

.paris-habitat-elementor-widget-map-projets .ph-map-container{

    height: calc(100vh - 3rem - 8rem - 3rem);
    min-height:400px;
    margin-top:3rem;

    display:flex;
    gap:0;
    position:relative;
    z-index: 1;
    /*height:90rem;*/
    border:1px solid var(--ph-color-9);
    overflow: hidden;
}
.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-left{
    flex:0 0 56rem;
    display:flex;
}
.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-filters{
    z-index: 10;    
    background: var(--ph-color-1);   
    display: flex;
    flex-direction: column;
}

.ph-map-filter-search input{
    width:100%;
}

.ph-map-filters-top{    
    padding:2.3rem 3.2rem;
    border-bottom:1px solid rgba(230, 230, 230, 0.2);
}
.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-filters-title{
    color:white;    
}
.ph-map-filters-button-clear{
    cursor:pointer;
    color:var(--ph-color-6);
    transition:all 0.25s;    
    display:inline-block;
    opacity:0;
    visibility:hidden;
}
.ph-map-filters-button-clear:hover{  
    color:var(--ph-color-2);    
}
.ph-map-filters-button-clear.visible{
    opacity:1;
    visibility:visible;
}

/* ---- */

.paris-habitat-elementor-widget-map-projets .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: none;    
    border-radius:0;
}
.paris-habitat-elementor-widget-map-projets .leaflet-bar a, 
.paris-habitat-elementor-widget-map-projets .leaflet-bar a:hover {
    background-color: var( --e-global-color-accent );  
    color: white;
    border-bottom: none;
    width: 8rem;
    height: 8rem;
    line-height: 8rem;  
}
.paris-habitat-elementor-widget-map-projets .leaflet-bar a:hover{
    background-color: var( --e-global-color-secondary );  
}
.paris-habitat-elementor-widget-map-projets .leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.paris-habitat-elementor-widget-map-projets .leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top:1px solid var( --e-global-color-secondary );
}

/* --- */

.ph-map-filters-list-filters{
    overflow:auto;
    margin-right: 0.2rem;
}
.ph-map-filters-list-filters::-webkit-scrollbar {
    width: 0.6rem; 
}
.ph-map-filters-list-filters::-webkit-scrollbar-track {
    background: var(--ph-color-1);
}
.ph-map-filters-list-filters::-webkit-scrollbar-thumb {
    background-color: var(--ph-color-6);
    border-radius: 0.2rem;
    border: none; 
}
.ph-map-filter{
    border-bottom:1px solid rgba(230, 230, 230, 0.2);
}
.ph-map-filter-title{
    color:white;
    padding:1.9rem 1.6rem 1.6rem 3.2rem;
    cursor:pointer;
    display:flex;
    gap:2rem;
    align-items:center;
    user-select:none;
}
.ph-map-filter-title:after{
    margin-left:auto;
    content: '\f078';
    font-family: 'Font Awesome 5 pro';
    transform-origin:center;
    transition: all 0.3s;
}
.ph-map-filter.opened .ph-map-filter-title:after{    
    transform:rotate(180deg);
}

.ph-map-filter-options-wrapper{
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.5s;
}

.ph-map-filter-options{
    min-height: 0;
    transition: visibility 0.5s;
    visibility: hidden;
    
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ph-map-filter.opened .ph-map-filter-options-wrapper{
    grid-template-rows: 1fr;
}
.ph-map-filter.opened .ph-map-filter-options{    
    visibility: visible;
}
.ph-map-filter-option label{
    margin:0 3.2rem 0 3.2rem;
    display: block;    
    padding-bottom: 0.3rem;
    border-bottom:1px solid rgba(230, 230, 230, 0.2);
}
.ph-map-filter-option:last-child label{
    border-bottom:none;
}
.ph-map-filter-option label input{
    display:none !important;
}
.ph-map-filter-option label span{
    color:white;
    padding:1.2rem 0.8rem;
    cursor:pointer;
    display: block;
    border:2px solid var(--ph-color-1);
    display:flex;
    gap:2rem;
    align-items:center;
    transition:border 0.2s;
    border-radius:0.4rem;
    line-height: 1.8rem;
}
.ph-map-filter-option label span:hover {     
    border:2px solid rgba(230, 230, 230, 0.2);
}
.ph-map-filter-option label input:checked + span {     
    border:2px solid white;
}
.ph-map-filter-option label input + span::after {     
    margin-left:auto;
    content: '\f00c';
    font-family: 'Font Awesome 5 pro';
    opacity:0;
    transition:opacity 0.2s;
}
.ph-map-filter-option label input:checked + span::after {     
    opacity:1;
}
.ph-map-filters-button{
    flex: 0 0 8rem;
    /*margin-top: auto;*/
}
.ph-map-filters-button span{
    opacity:0;
    line-height:8rem !important;
    background:var(--ph-color-2);
    display:block;
    height:100%;
    padding:0 2rem;
    text-align:center;
    color:white;
}
.ph-map-filters-button.visible span{
    opacity:1;    
    cursor: pointer;
}
.ph-map-filters-button.visible:not(.nohover) span:hover{
    background:var( --e-global-color-accent );
}

/* --------- */

.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-key-numbers{
    flex:0 0 29rem;
    z-index: 10;
    background:white;
    display:flex;
    flex-direction:column;
    border-style: solid;
    border-color: var( --ph-color-9);
    border-width: 1px  0   0  1px;
    overflow: auto;
}
.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-key-numbers::-webkit-scrollbar {
    width: 0.6rem; 
}
.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-key-numbers::-webkit-scrollbar-track {
    background: white;
}
.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-key-numbers::-webkit-scrollbar-thumb {
    background-color: var(--ph-color-1);
    border-radius: 0.2rem;
    border: none; 
}
.ph-map-key-number{
   /* flex: 0 0 20%;*/
    flex: 1;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    justify-content: center;
    border-style: solid;
    border-color: var( --ph-color-9);
    border-width:  0  1px 1px  0  ;
    background: #FBFBFB;
    
}
.ph-map-key-number-label{
    color:var(--ph-color-1);
}
.ph-map-key-number-value{
    white-space: nowrap;
}

.ph-map-key-number-child .ph-map-key-number-value{
    color:var(--ph-color-2);
}

.ph-map-key-number-child {
    flex: 0;
    background: white;
    flex-direction: row;
    align-items: baseline;
    gap:10px;    
    justify-content: flex-start;
}
.ph-map-key-number-child:before {
    content:url(/wp-content/themes/parishabitat/assets/images/subdirectory.svg); 
    transform: translateY(4px);
}
body.elementor-default .ph-map-key-number-child .ph-map-key-number-label{
    text-align:left;
    text-transform: inherit;    
    font-size: 18px;
    font-weight: 500;
}

/* ------------ */

.paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map{
    width:100%;
}

/* ---- */

.ph-map-popup{
    position:absolute;
    background:white;
    z-index: 15;
    left:0;
    top:0;
    height:100%;
    width:calc(34.5rem + 19rem);
    transform:translateX(-100%);
    transition:transform 0.25s;
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--ph-color-9);
}
.ph-map-popup.visible{
    transform:translateX(0);
}
.ph-map-popup-content{
    padding:2.8rem 3.2rem;
    flex: 1 1 auto;
    color:var(--ph-color-1);
    overflow: auto;
}
.ph-map-popup-content::-webkit-scrollbar {
    width: 0.6rem; 
}
.ph-map-popup-content::-webkit-scrollbar-track {
    background: white;
}
.ph-map-popup-content::-webkit-scrollbar-thumb {
    background-color: var(--ph-color-6);
    border-radius: 0.2rem;
    border: none; 
}
.ph-map-popup-content-image img{
    display:block;
    margin-bottom:2.4rem;
}
.ph-map-popup-top{    
    border-bottom:1px solid var(--ph-color-9);
}
.ph-map-popup-footer a{
    width:100%;
    justify-content: space-between;
}
.ph-map-popup-content-localisation{
    margin-bottom:1.8rem;
}

body.elementor-page button.ph-btn.ph-map-filters-open,
body.elementor-page button.ph-btn.ph-map-filters-top-close{
    display:none !important;
}



@media (max-height: 1000px){
    .elementor-widget-heading .ph-map-key-numbers  h3.elementor-heading-title, 
    body.elementor-default .ph-map-key-numbers  .ph-typo-h3 {
        font-size: 2.5rem;
    }
    body.elementor-default .ph-map-key-numbers .ph-typo-pretitle {
        font-size: 1rem;
    }
    body.elementor-default .ph-map-key-number-child .ph-map-key-number-label {
        font-size: 12px;
    }
    .ph-map-key-number {       
        padding: 0.7rem;
    }
}


@media (max-width: 1500px){
    .paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-left {
        flex: 0 0 46rem;
    }
    .paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-key-numbers {
        flex: 0 0 23rem;
    }
   
    .ph-map-popup {
        width:46rem;
    }
}


@media (max-width: 1100px){
    
    body.elementor-page button.ph-btn.ph-map-filters-top-close{
        display:inline-block !important;
        position:absolute;
        top:0;
        right:0;
    }
    
    body.elementor-page button.ph-btn.ph-map-filters-open{
        display:inline-block !important;
        background: var( --e-global-color-primary );
    }
    
    .paris-habitat-elementor-widget-map-projets .ph-map-container{
        flex-direction:column;    
        height: 65rem;
    }
    .paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-left {       
        transform: translateY(-100%); 
        transition: transform 0.3s;  
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:10000;
        background:var(--ph-color-1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-left.visible{
        transform: translateY(0);  
    }    
    .paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map-key-numbers{
        display:none;
    }        
    .paris-habitat-elementor-widget-map-projets .ph-map-container .ph-map{
        height:calc(100% - 6.4rem);
        order: 2;
    }        
    .ph-map-popup {
        z-index: 10000;
        width: 100%;
    }    
    .ph-map-filters-list-filters{
        overflow: auto;
    }   
    .ph-map-popup-content-image img{
        width: 40rem;
    }
    
}