[data-tech]{
    --tool-width: 300px;
    &[data-tech="mobile"]{
        --tool-width: 405px;
    }
    &[data-tech="fixe"]{
        --tool-width: 500px;
    }
}

#Map{
    position: relative; height: 708px;
    
    .red-loader{
        position: absolute; bottom: 0; right: 0; display: none; align-items: center; gap: var(--space-S); padding: var(--space-S); background-color: var(--c-fg-secondary); color: var(--c-t-constant-black);
        .loader{ --loader-width: var(--space-L); --loader-height: var(--space-L); }
        &.show{ display: flex; }
        @media (max-width: 1023px ){
            margin-bottom: var(--space-L);
            top: 0; right: auto; bottom: auto; left: 0;
        }
    }
    
    /* ----- Boutons ----- -*/
    .esriSimpleSlider, .opt{
        > button{
            display: block; width: var(--space-XL); height: var(--space-XL); padding: var(--space-S); border: 0px; border-radius: 0px; background-color: var(--c-fg-constant-black); background-repeat: no-repeat; background-position: center; color: var(--c-fg-constant-white); font-size: 1.563em;
            &:hover{ background-color: var(--c-bg-cta-black-hover); color: var(--c-t-secondary); }
            &:has( + button){ margin-bottom: var(--space-XS); }
            &.geoloc{ background-image: url("https://static.s-sfr.fr/media/RED/icones/location-white.svg"); }
            &.recenter{ background-image: url("https://static.s-sfr.fr/media/RED/icones/recentrer-white.svg"); }
            .esriIconFallbackText{ clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
        }
    }
    
    /* ----- Barre de Gauche ----- -*/
    .tools{
        position: absolute; top: var(--space-XL); left: var(--space-XL); display: grid; justify-items: start; gap: var(--space-L); max-width: var(--tool-width); width: 100%; padding: var(--space-L); background-color: var(--c-bg-container-primary); border: 1px solid var(--c-bg-cta-black-click); z-index: 1;

        [data-techgroup]{
            --display: none; display: var(--display);
            &.show.tab-bar{ --display: inline-grid; }
            &.show.tog{ --display: block; }
        }
        
        .tog:not(:has(.legende.show li.show)){ display: none; }
        
        .legende{
            display: none;
            &.show{ display: grid; }
            .t{ margin-bottom: var(--space-S); font: var(--f-p-Mb); }
            ul{
                display: grid; gap: var(--space-S);
                li{
                    display: none; align-items: center; gap: var(--space-M);
                    &.show{ display: flex; }
                    .color{ flex: 0 0 32px; height: 32px; background-repeat: no-repeat; background-position: center; }
                }
            }
        }
        .button-group{ display: none; width: 100%; }
    }
    
    /* ----- Barre de Droite ----- -*/
    .esriSimpleSlider{
        position: absolute; top: var(--space-XL); right: var(--space-XL); left: auto; border: 0; border-radius: 0px; z-index: 1;
    }

    @media (max-width: 1023px){
        height: 566px!important;
        
        .tools{
            top: auto; left: var(--space-M); bottom: var(--space-M); gap: var(--space-M); max-width: 100%; width: calc(100% - (var(--space-M) * 2)); padding: var(--space-M);
            .button-group{ display: block; }
        }
        .esriSimpleSlider{
            top: var(--space-M); right: var(--space-M);
        }
    }
}