{% extends "mobile/mobile_base.html" %}
{% load static %}
{% load i18n %}

{% block title %}
    {% translate "Assets" %}
{% endblock title %}

{% block extra_head %}
    <!-- MapLibre GL -->
    <link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">

    <style>
        :root {
            --mobile-header-height: 56px;
        }

        /* Bloquer tout défilement global de la page : vue pleine hauteur d'application mobile */
        html, body {
            height: 100% !important;
            height: 100dvh !important;
            overflow: hidden !important;
            padding: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
        }

        /* Masquer le footer sur cette vue cartographique pour libérer 100% de la hauteur */
        footer.fixed-footer {
            display: none !important;
        }

        /* Layout pleine hauteur et flexbox pour la vue mobile : fixé directement sous la navbar */
        main.container,
        main.container.mt-4.mb-5,
        main {
            position: fixed !important;
            top: var(--mobile-header-height, 56px) !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: auto !important;
            max-height: none !important;
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding: 0.35rem 0.5rem 0.4rem 0.5rem !important;
            max-width: 100% !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
            z-index: 10;
        }

        /* Barre de contrôle supérieure */
        .assets-controls-panel {
            background-color: #ffffff;
            border-radius: 0.85rem;
            padding: 0.55rem 0.65rem;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
            border: 1px solid #e2e8f0;
            margin-bottom: 0.35rem;
            flex-shrink: 0;
        }

        /* Boutons de bascule Carte / Liste */
        .view-toggle-group .btn {
            font-size: 0.85rem;
            font-weight: 600;
            padding: 0.35rem 0.85rem;
            border-radius: 0.6rem;
        }

        /* Chips / Badges défilants des thématiques */
        .thematic-chips-scroll {
            display: flex;
            gap: 0.45rem;
            overflow-x: auto;
            white-space: nowrap;
            padding: 0.15rem 0.1rem;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .thematic-chips-scroll::-webkit-scrollbar {
            display: none;
        }
        .thematic-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.82rem;
            font-weight: 500;
            padding: 0.35rem 0.75rem;
            border-radius: 2rem;
            background-color: #f1f5f9;
            color: #475569;
            border: 1px solid #cbd5e1;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
            user-select: none;
            flex-shrink: 0;
        }
        .thematic-chip:hover, .thematic-chip:focus {
            background-color: #e2e8f0;
            color: #1e293b;
        }
        .thematic-chip.active {
            background-color: #0f172a;
            color: #ffffff;
            border-color: #0f172a;
            box-shadow: 0 2px 5px rgba(47, 62, 139, 0.3);
        }

        /* Vues Carte et Liste en Flex */
        #viewContainerMap {
            flex: 1 1 0;
            min-height: 0;
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        /* Conteneur de carte - 100% de l'espace disponible */
        #assets-map-wrapper {
            position: relative;
            flex: 1 1 0;
            min-height: 0;
            height: 100% !important;
            width: 100%;
            border-radius: 0.85rem;
            overflow: hidden;
            border: 1px solid #cbd5e1;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
        }
        #assets-map {
            width: 100%;
            height: 100%;
        }

        /* Alerte flottante sur la carte */
        .map-floating-alert {
            position: absolute;
            top: 0.65rem;
            left: 0.65rem;
            right: 0.65rem;
            z-index: 25;
            background-color: rgba(240, 249, 255, 0.96) !important;
            backdrop-filter: blur(8px);
            border: 1px solid #bae6fd !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
            animation: slideDownFadeIn 0.25s ease-out;
        }
        @keyframes slideDownFadeIn {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Bouton flottant GPS */
        .map-gps-btn {
            position: absolute;
            bottom: 1.25rem;
            right: 1.25rem;
            z-index: 10;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            box-shadow: 0 3px 10px rgba(0,0,0,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0f172a;
            font-size: 1.25rem;
            cursor: pointer;
            transition: transform 0.15s ease, background-color 0.15s ease;
        }
        .map-gps-btn:active {
            transform: scale(0.92);
        }

        /* Bouton flottant Vue Initiale */
        .map-initial-view-btn {
            position: absolute;
            bottom: 4.5rem;
            right: 1.25rem;
            z-index: 10;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            box-shadow: 0 3px 10px rgba(0,0,0,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0f172a;
            font-size: 1.15rem;
            cursor: pointer;
            transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.2s ease;
        }
        .map-initial-view-btn:active {
            transform: scale(0.92);
        }
        .map-initial-view-btn.highlight-pulse {
            animation: initial-btn-pulse 1.5s infinite;
            border-color: #2563eb;
            color: #2563eb;
        }
        @keyframes initial-btn-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
            }
            70% {
                box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
            }
        }

        /* Marqueur utilisateur GPS */
        .user-gps-marker {
            width: 18px;
            height: 18px;
            background-color: #0d6efd;
            border: 3px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(13, 110, 253, 0.7);
        }

        /* Marqueur asset ponctuel standard */
        .asset-map-marker {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid #0f172a;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            transition: none !important;
            padding: 3px;
            box-sizing: border-box;
            position: relative;
        }
        .maplibregl-marker {
            transition: none !important;
        }
        .asset-map-marker i {
            display: inline-flex;
            transition: transform 0.15s ease;
            pointer-events: none;
        }
        .asset-map-marker img,
        .asset-symbology-icon-img {
            width: 22px;
            height: 22px;
            object-fit: contain;
            display: block;
            pointer-events: none;
            transition: transform 0.15s ease;
        }
        .asset-map-marker:hover i, .asset-map-marker:active i,
        .asset-map-marker:hover img, .asset-map-marker:active img {
            transform: scale(1.2);
        }
        .asset-map-marker:hover, .asset-map-marker:active {
            z-index: 5;
            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
        }

        /* Marqueur spécifique panneau de signalisation (sans cercle bleu/blanc) */
        .asset-map-marker-sign {
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            box-sizing: border-box;
            transition: none !important;
        }
        .asset-map-marker-sign::before {
            content: '';
            position: absolute;
            top: -4px;
            bottom: -4px;
            left: -4px;
            right: -4px;
            cursor: pointer;
        }
        .asset-map-marker-sign img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            display: block;
            pointer-events: none;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
            transition: transform 0.15s ease;
        }
        .asset-map-marker-sign:hover img, .asset-map-marker-sign:active img {
            transform: scale(1.2);
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
        }
        .asset-map-marker-sign i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 3px;
            background: #ffffff;
            border: 1.5px solid #2563eb;
            color: #2563eb;
            font-size: 0.65rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            pointer-events: none;
            transition: transform 0.15s ease;
        }
        .asset-map-marker-sign:hover i, .asset-map-marker-sign:active i {
            transform: scale(1.2);
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }

        /* Assemblage unifié poteau + panneaux (ancre à offset [0, 0] sur la base au sol) */
        .asset-map-assembly {
            width: 28px;
            height: 0px;
            position: relative;
            cursor: pointer;
            pointer-events: none;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box;
            z-index: 5;
            transition: none !important;
        }
        /* Conteneur de mise à l'échelle dynamique des poteaux et panneaux selon le zoom */
        .asset-map-assembly .assembly-scaler {
            width: 28px;
            height: 0px;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: 50% 0;
            transform: scale(var(--assembly-scale, 1));
            pointer-events: none;
            transition: none !important;
        }
        .asset-map-assembly .pole-base {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #888888;
            border: 1.5px solid #333333;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, -50%);
            z-index: 2;
            cursor: pointer;
            pointer-events: auto;
            transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
        }
        .asset-map-assembly .pole-base::before {
            content: '';
            position: absolute;
            top: -8px;
            bottom: -8px;
            left: -8px;
            right: -8px;
            cursor: pointer;
        }
        .asset-map-assembly .pole-base:hover,
        .asset-map-assembly .pole-base:active {
            transform: translate(-50%, -50%) scale(1.3);
            background-color: #ca8a04;
            border-color: #854d0e;
            box-shadow: 0 0 8px rgba(202, 138, 4, 0.6);
        }
        .asset-map-assembly.selected .pole-base,
        .asset-map-assembly .pole-base.selected {
            background-color: #fde047 !important;
            border-color: #ca8a04 !important;
            border-width: 2px !important;
            transform: translate(-50%, -50%) scale(1.4);
            box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.45), 0 0 12px #eab308 !important;
        }
        .asset-map-assembly .pole-stem {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2.5px;
            background-color: #555555;
            border-left: 0.5px solid #222222;
            border-right: 0.5px solid #222222;
            border-top: 0.5px solid #222222;
            box-sizing: border-box;
            z-index: 1;
            pointer-events: none;
            transition: background-color 0.15s ease, box-shadow 0.15s ease;
        }
        .asset-map-assembly.selected .pole-stem {
            background-color: #eab308 !important;
            border-color: #ca8a04 !important;
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.7) !important;
        }
        .asset-map-assembly .assembly-panel-item {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: auto;
            box-sizing: border-box;
            z-index: 10;
        }
        .asset-map-assembly .assembly-panel-item::before {
            content: '';
            position: absolute;
            top: -8px;
            bottom: -8px;
            left: -8px;
            right: -8px;
            cursor: pointer;
        }
        .asset-map-assembly .assembly-panel-item img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            display: block;
            pointer-events: none;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
            transition: transform 0.15s ease;
        }
        .asset-map-assembly .assembly-panel-item:hover img,
        .asset-map-assembly .assembly-panel-item:active img {
            transform: scale(1.25);
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
        }
        .asset-map-assembly .assembly-panel-item i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 3px;
            background: #ffffff;
            border: 1.5px solid #2563eb;
            color: #2563eb;
            font-size: 0.65rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            pointer-events: none;
            transition: transform 0.15s ease;
        }
        .asset-map-assembly .assembly-panel-item:hover i,
        .asset-map-assembly .assembly-panel-item:active i {
            transform: scale(1.25);
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }
        .asset-map-assembly .assembly-panel-item.selected img {
            transform: scale(1.3);
            filter: drop-shadow(0 0 5px #eab308) drop-shadow(0 0 10px #fde047) drop-shadow(0 2px 5px rgba(0,0,0,0.5)) !important;
        }
        .asset-map-assembly .assembly-panel-item.selected i {
            border-color: #ca8a04 !important;
            color: #854d0e !important;
            transform: scale(1.3);
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.85);
        }
        .asset-map-assembly .assembly-panel-item.selected::after {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 4px;
            border: 2px solid #eab308;
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.85);
            pointer-events: none;
            animation: marker-selected-pulse 1.8s infinite ease-in-out;
        }
        .asset-map-assembly .marker-count-badge {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(6px, -14px);
        }

        /* Marqueur spécifique panneau compact à faible/moyen zoom (< 16.5) */
        .asset-map-marker-compact {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            box-sizing: border-box;
            transition: none !important;
        }
        .asset-map-marker-compact::before {
            content: '';
            position: absolute;
            top: -4px;
            bottom: -4px;
            left: -4px;
            right: -4px;
            cursor: pointer;
        }
        .asset-map-marker-compact img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            display: block;
            pointer-events: none;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
            transition: transform 0.15s ease;
        }
        .asset-map-marker-compact:hover img, .asset-map-marker-compact:active img {
            transform: scale(1.2);
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
        }
        .asset-map-marker-compact i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 3px;
            background: #ffffff;
            border: 1.5px solid #2563eb;
            color: #2563eb;
            font-size: 0.65rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            pointer-events: none;
            transition: transform 0.15s ease;
        }
        .asset-map-marker-compact:hover i, .asset-map-marker-compact:active i {
            transform: scale(1.2);
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }
        .asset-map-marker-compact.selected {
            z-index: 50 !important;
        }
        .asset-map-marker-compact.selected img {
            transform: scale(1.25);
            filter: drop-shadow(0 0 5px #eab308) drop-shadow(0 0 10px #fde047) drop-shadow(0 2px 5px rgba(0,0,0,0.5)) !important;
        }
        .asset-map-marker-compact.selected i {
            border-color: #ca8a04;
            color: #854d0e;
            transform: scale(1.2);
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.85);
        }
        .asset-map-marker-compact.selected::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 2px solid #eab308;
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.85);
            pointer-events: none;
            animation: marker-selected-pulse 1.8s infinite ease-in-out;
        }

        /* Marqueur spécifique poteau de signalisation seul (socle circulaire + tige verticale) */
        .asset-map-marker-pole {
            width: 24px;
            height: 24px;
            position: relative;
            cursor: pointer;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: none !important;
        }
        .asset-map-marker-pole::before {
            content: '';
            position: absolute;
            top: -6px;
            bottom: -6px;
            left: -6px;
            right: -6px;
            cursor: pointer;
        }
        .asset-map-marker-pole .pole-base {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #888888;
            border: 1.5px solid #333333;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
        }
        .asset-map-marker-pole .pole-stem {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform: translateX(-50%);
            width: 2.5px;
            background-color: #555555;
            border-left: 0.5px solid #222222;
            border-right: 0.5px solid #222222;
            border-top: 0.5px solid #222222;
            box-sizing: border-box;
            z-index: 1;
            pointer-events: none;
            transition: background-color 0.15s ease, box-shadow 0.15s ease;
        }
        .asset-map-marker-pole:hover .pole-base,
        .asset-map-marker-pole:active .pole-base {
            transform: translate(-50%, -50%) scale(1.3);
            background-color: #ca8a04;
            border-color: #854d0e;
            box-shadow: 0 0 8px rgba(202, 138, 4, 0.6);
        }
        .asset-map-marker-pole.selected {
            z-index: 50 !important;
        }
        .asset-map-marker-pole.selected .pole-base {
            background-color: #fde047 !important;
            border-color: #ca8a04 !important;
            border-width: 2px !important;
            transform: translate(-50%, -50%) scale(1.4);
            box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.45), 0 0 12px #eab308 !important;
        }
        .asset-map-marker-pole.selected .pole-stem {
            background-color: #eab308 !important;
            border-color: #ca8a04 !important;
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.7) !important;
        }

        /* Badge compteur pour assets multiples au même endroit */
        .marker-count-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 18px;
            height: 18px;
            padding: 0 3px;
            border-radius: 9px;
            background: #2563eb;
            color: #ffffff;
            font-size: 0.65rem;
            font-weight: 700;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 4px rgba(0,0,0,0.45);
            border: 1.5px solid #ffffff;
            pointer-events: none;
            z-index: 20;
        }
        .asset-map-marker-pole .marker-count-badge {
            top: -8px;
            right: -8px;
        }

        /* Marqueur ponctuel sélectionné */
        .asset-map-marker.selected {
            z-index: 50 !important;
            border-color: #ca8a04 !important;
            border-width: 3px !important;
            background-color: #fef08a !important;
            box-shadow: 0 0 0 4px rgba(254, 240, 138, 0.9), 0 4px 14px rgba(0, 0, 0, 0.45) !important;
            position: relative;
        }
        .asset-map-marker.selected::after {
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
            border-radius: 50%;
            border: 2.5px solid #eab308;
            box-shadow: 0 0 12px rgba(234, 179, 8, 0.85);
            pointer-events: none;
            animation: marker-selected-pulse 1.8s infinite ease-in-out;
        }
        .asset-map-marker-sign.selected {
            z-index: 50 !important;
        }
        .asset-map-marker-sign.selected img {
            transform: scale(1.25);
            filter: drop-shadow(0 0 5px #eab308) drop-shadow(0 0 10px #fde047) drop-shadow(0 2px 5px rgba(0,0,0,0.5)) !important;
        }
        .asset-map-marker-sign.selected i {
            border-color: #ca8a04;
            color: #854d0e;
            transform: scale(1.2);
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.85);
        }
        .asset-map-marker-sign.selected::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 2px solid #eab308;
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.85);
            pointer-events: none;
            animation: marker-selected-pulse 1.8s infinite ease-in-out;
        }
        @keyframes marker-selected-pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.95;
            }
            50% {
                transform: scale(1.4);
                opacity: 0.25;
            }
        }
        .asset-map-marker.selected i,
        .asset-map-marker.selected img {
            color: #854d0e !important;
            transform: scale(1.15);
        }

        /* Cartes d'assets multiples au même endroit */
        .multi-asset-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.65rem 0.85rem;
            border: 1px solid #e2e8f0;
            border-radius: 0.85rem;
            background-color: #f8fafc;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        }
        .multi-asset-card:active {
            background-color: #e2e8f0;
            border-color: #cbd5e1;
            transform: scale(0.98);
        }

        /* Volet inférieur (Bottom Sheet) pour prévisualisation */
        .bottom-sheet-preview {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            border-top-left-radius: 1.25rem;
            border-top-right-radius: 1.25rem;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
            padding: 1rem;
            z-index: 1050;
            transform: translateY(110%);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            max-height: 75vh;
            overflow-y: auto;
        }
        .bottom-sheet-preview.active {
            transform: translateY(0);
        }
        .bottom-sheet-drag-handle {
            width: 38px;
            height: 5px;
            background: #cbd5e1;
            border-radius: 3px;
            margin: 0 auto 0.75rem auto;
            cursor: pointer;
        }

        /* Vue Liste avec défilement interne */
        #viewContainerList {
            flex: 1 1 0;
            min-height: 0;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 2rem;
        }

        /* Cartes de la liste des assets */
        .asset-list-card {
            border: 1px solid #e2e8f0;
            border-radius: 0.85rem;
            background-color: #ffffff;
            padding: 0.75rem 0.9rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: inherit;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .asset-list-card:active {
            transform: scale(0.98);
            background-color: #f8fafc;
        }
        .asset-icon-circle {
            width: 42px;
            height: 42px;
            border-radius: 0.75rem;
            background-color: rgba(47, 62, 139, 0.1);
            color: #0f172a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            flex-shrink: 0;
            padding: 5px;
            box-sizing: border-box;
        }
        .asset-icon-circle img,
        #sheetIconCircle img {
            width: 26px;
            height: 26px;
            object-fit: contain;
            display: block;
        }
        .multi-asset-card .asset-icon-circle img {
            width: 22px;
            height: 22px;
        }

        /* Badges de statuts */
        .badge-status {
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 0.4rem;
        }
        .badge-status-active { background-color: #dcfce7; color: #15803d; }
        .badge-status-damaged { background-color: #fef9c3; color: #854d0e; }
        .badge-status-to_replace { background-color: #fee2e2; color: #b91c1c; }
        .badge-status-planned { background-color: #e0e7ff; color: #3730a3; }
        .badge-status-removed { background-color: #f1f5f9; color: #475569; }

        /* Badges de types d'asset */
        .badge-element-type {
            font-size: 0.70rem;
            font-weight: 500;
            line-height: 1.25;
            padding: 0.15rem 0.45rem;
            border-radius: 0.35rem;
            background-color: #eff6ff;
            color: #1e40af;
            border: 1px solid #bfdbfe;
            display: inline-block;
            vertical-align: middle;
        }

        .spin-once {
            animation: spinOnce 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @keyframes spinOnce {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }
    </style>
{% endblock extra_head %}

{% block content %}
    <!-- Panneau de recherche & filtres -->
    <div class="assets-controls-panel">
        <!-- Ligne 1 : Champ de recherche, Réinitialisation et bascule Vue -->
        <div class="d-flex align-items-center gap-2 mb-2">
            <div class="input-group input-group-sm flex-grow-1">
                <input
                    type="text"
                    id="assetSearchInput"
                    class="form-control rounded-start-3"
                    placeholder="{% translate 'Code, nom, modèle...' %}"
                    value="{{ initial_query|default:'' }}"
                    autocomplete="off"
                    enterkeyhint="search"
                >
                <button class="btn btn-outline-secondary d-none" type="button" id="clearSearchBtn" title="{% translate 'Effacer' %}">
                    <i class="bi bi-x"></i>
                </button>
                <button class="btn btn-primary px-2.5" type="button" id="submitSearchBtn">
                    <i class="bi bi-search"></i>
                </button>
            </div>

            <!-- Bouton Réinitialiser -->
            <button type="button" id="btnGlobalReset" class="btn btn-outline-secondary btn-sm rounded-3 px-2 py-1 flex-shrink-0 d-flex align-items-center gap-1" title="{% translate 'Réinitialiser la recherche, les filtres et le zoom' %}">
                <i class="bi bi-arrow-counterclockwise"></i>
                <span class="d-none d-sm-inline small">{% translate "Reset" %}</span>
            </button>

            <!-- Bascule Carte / Liste -->
            <div class="btn-group btn-group-sm view-toggle-group flex-shrink-0" role="group" aria-label="{% translate "Mode d'affichage" %}">
                <button type="button" id="btnViewMap" class="btn btn-primary active">
                    <i class="bi bi-map me-1"></i>{% translate "Carte" %}
                </button>
                <button type="button" id="btnViewList" class="btn btn-outline-primary">
                    <i class="bi bi-list-ul me-1"></i>{% translate "Liste" %}
                </button>
            </div>
        </div>

        <!-- Ligne 2 : Filtre Statut & Thématiques -->
        <div class="d-flex align-items-center gap-2">
            <!-- Sélecteur Statut -->
            <div style="min-width: 120px; max-width: 140px;">
                <select id="assetStatusSelect" class="form-select form-select-sm rounded-3">
                    <option value="">{% translate "Tous statuts" %}</option>
                    {% for key, label in asset_status_choices %}
                        <option value="{{ key }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Puces / Chips des thématiques à défilement horizontal (Sélection d'au minimum une thématique obligatoire) -->
            <div class="thematic-chips-scroll flex-grow-1" id="thematicChipsContainer">
                {% for thematic in accessible_thematics %}
                <div class="thematic-chip {% if selected_thematic == thematic.code %}active{% endif %}" data-thematic="{{ thematic.code }}">
                    {% if thematic.icon %}
                        <i class="bi {{ thematic.icon }}"></i>
                    {% endif %}
                    <span>{{ thematic.name_fr }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Alerte limite d'assets atteinte (Zoom / filtres requis) -->
    <div id="filterLimitAlert" class="alert alert-warning py-1.5 px-2.5 mb-1.5 small d-flex align-items-center gap-2 rounded-3 d-none flex-shrink-0" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-6 text-warning flex-shrink-0"></i>
        <div class="flex-grow-1" style="line-height: 1.25;">
            <strong>{% translate "Limite atteinte" %}</strong> : <span id="filterLimitAlertText">{% translate "Plus de 500 assets correspondent. Veuillez zoomer sur la carte ou affiner vos critères de recherche pour les afficher." %}</span>
        </div>
    </div>

    <!-- Indicateur de résultats & compteur -->
    <div class="d-flex justify-content-between align-items-center mb-1.5 px-1 text-secondary small flex-shrink-0">
        <div class="d-flex align-items-center gap-1 flex-wrap">
            <span id="resultsCount">0</span> {% translate "asset(s) trouvé(s)" %}
            <span id="limitNotice" class="badge bg-warning-subtle text-warning-emphasis d-none">
                {% translate "500 affichés" %}
            </span>
            <span id="zoneIndicator" class="badge bg-info-subtle text-info-emphasis d-none" role="button" style="cursor: pointer;" title="{% translate 'Filtré selon la zone visible sur la carte. Cliquez pour élargir à toute la commune.' %}">
                <i class="bi bi-crop me-1"></i>{% translate "Zone visible" %} <i class="bi bi-x ms-1"></i>
            </span>
        </div>
        <div id="loadingSpinner" class="spinner-border spinner-border-sm text-primary d-none" role="status">
            <span class="visually-hidden">{% translate "Chargement..." %}</span>
        </div>
    </div>

    <!-- VUE CARTE -->
    <div id="viewContainerMap">
        <div id="assets-map-wrapper">
            <div id="assets-map"></div>

            <!-- Alerte flottante : Aucun résultat dans la zone visible (invitation retour vue initiale) -->
            <div id="noResultsInZoneAlert" class="map-floating-alert alert alert-info py-2 px-2.5 mb-0 small d-flex align-items-center gap-2 rounded-3 shadow d-none" role="alert">
                <i class="bi bi-info-circle-fill fs-5 text-primary flex-shrink-0"></i>
                <div class="flex-grow-1" style="line-height: 1.25; min-width: 0;">
                    <div class="fw-semibold text-dark text-truncate">{% translate "Aucun résultat dans cette zone" %}</div>
                    <div class="text-secondary small">{% translate "Appuyez sur le bouton pour revenir à la vue initiale." %}</div>
                </div>
                <button type="button" id="btnResetToInitialView" class="btn btn-sm btn-primary rounded-3 text-nowrap py-1 px-2.5 d-flex align-items-center gap-1 shadow-sm flex-shrink-0">
                    <i class="bi bi-arrows-angle-expand"></i>
                    <span class="small">{% translate "Vue initiale" %}</span>
                </button>
                <button type="button" id="btnCloseNoResultsAlert" class="btn-close ms-0.5 flex-shrink-0" style="font-size: 0.7rem;" aria-label="{% translate 'Fermer' %}"></button>
            </div>

            <!-- Invite sélection thématique sur la carte -->
            <div id="mapThematicPrompt" class="position-absolute top-50 start-50 translate-middle text-center p-3 bg-white bg-opacity-95 rounded-4 shadow-sm border {% if selected_thematic %}d-none{% endif %}" style="z-index: 8; max-width: 85%; pointer-events: none;">
                <div class="rounded-circle bg-primary-subtle text-primary d-inline-flex p-3 mb-2">
                    <i class="bi bi-layers fs-2"></i>
                </div>
                <h6 class="fw-bold text-dark mb-1">{% translate "Sélectionnez une thématique" %}</h6>
                <p class="small text-muted mb-0">{% translate "Veuillez choisir une thématique ci-dessus pour afficher les assets sur la carte." %}</p>
            </div>

            <!-- Bouton flottant Vue initiale -->
            <button type="button" id="btnInitialView" class="map-initial-view-btn" title="{% translate 'Retour à la vue initiale (toute la commune)' %}" aria-label="{% translate 'Retour à la vue initiale' %}">
                <i class="bi bi-arrows-angle-expand"></i>
            </button>

            <!-- Bouton flottant GPS -->
            <button type="button" id="btnGpsLocate" class="map-gps-btn" title="{% translate 'Ma position' %}">
                <i class="bi bi-crosshair"></i>
            </button>
        </div>
    </div>

    <!-- VUE LISTE -->
    <div id="viewContainerList" class="d-none">
        <div id="assetsListContainer">
            <!-- Rempli dynamiquement via JS -->
        </div>

        <div id="noThematicSelectedMessage" class="text-center py-5 {% if selected_thematic %}d-none{% endif %}">
            <div class="rounded-circle bg-primary-subtle text-primary d-inline-flex p-3 mb-3">
                <i class="bi bi-layers fs-1"></i>
            </div>
            <h6 class="fw-bold text-secondary">{% translate "Sélectionnez une thématique" %}</h6>
            <p class="small text-muted mb-0">{% translate "Veuillez choisir une thématique ci-dessus pour afficher la liste des assets." %}</p>
        </div>

        <div id="emptyListMessage" class="text-center py-5 d-none">
            <div class="rounded-circle bg-light d-inline-flex p-3 mb-3 text-muted">
                <i class="bi bi-search fs-1" id="emptyListIcon"></i>
            </div>
            <h6 class="fw-bold text-secondary" id="emptyListTitle">{% translate "Aucun asset trouvé" %}</h6>
            <p class="small text-muted mb-3" id="emptyListSubtitle">{% translate "Modifiez votre recherche ou zoomez sur une autre zone." %}</p>
            <div class="d-flex justify-content-center gap-2 flex-wrap">
                <button type="button" class="btn btn-outline-primary btn-sm rounded-3" id="btnResetFilters">
                    {% translate "Réinitialiser les filtres" %}
                </button>
                <button type="button" class="btn btn-primary btn-sm rounded-3 d-none" id="btnListInitialView">
                    <i class="bi bi-arrows-angle-expand me-1"></i>{% translate "Vue initiale" %}
                </button>
            </div>
        </div>
    </div>

    <!-- VOLET INFÉRIEUR (Bottom Sheet Modal) pour la Carte -->
    <div id="assetBottomSheet" class="bottom-sheet-preview">
        <div class="bottom-sheet-drag-handle" id="bottomSheetCloseHandle"></div>
        <button type="button" id="btnBackToMultiSheet" class="btn btn-sm btn-link text-decoration-none p-0 d-none text-primary mb-2">
            <i class="bi bi-arrow-left me-1"></i><span id="btnBackToMultiSheetText">{% translate "Retour aux assets à cet endroit" %}</span>
        </button>
        <div class="d-flex align-items-start justify-content-between mb-2">
            <div class="d-flex align-items-center gap-2">
                <div class="asset-icon-circle" id="sheetIconCircle">
                    <i class="bi bi-pin-map" id="sheetIcon"></i>
                </div>
                <div>
                    <div class="fw-bold text-dark fs-6" id="sheetCode">-</div>
                    <div class="small text-muted text-truncate" style="max-width: 200px;" id="sheetThematicName">-</div>
                </div>
            </div>
            <button type="button" class="btn-close" id="btnSheetClose" aria-label="Close"></button>
        </div>

        <div class="mb-3">
            <div class="fw-semibold text-dark mb-1" id="sheetName">-</div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span id="sheetStatusBadge" class="badge-status badge-status-active">Actif</span>
                <span id="sheetElementType" class="badge-element-type">Élément</span>
                <span id="sheetDistanceBadge" class="badge bg-primary-subtle text-primary d-none">
                    <i class="bi bi-geo-alt me-1"></i><span id="sheetDistanceText"></span>
                </span>
            </div>
        </div>

        <div class="d-flex gap-2">
            <a href="#" id="sheetDetailLink" class="btn btn-primary btn-sm flex-grow-1 py-2 fw-semibold rounded-3 text-center">
                <i class="bi bi-box-arrow-up-right me-1"></i>{% translate "Consulter la fiche" %}
            </a>
            <a href="#" id="sheetRouteLink" target="_blank" class="btn btn-outline-secondary btn-sm px-3 py-2 rounded-3 text-center" title="{% translate 'Itinéraire GPS' %}">
                <i class="bi bi-compass"></i>
            </a>
        </div>
    </div>

    <!-- VOLET MULTI-ASSETS (quand plusieurs assets sont au même endroit) -->
    <div id="multiAssetBottomSheet" class="bottom-sheet-preview">
        <div class="bottom-sheet-drag-handle" id="multiSheetCloseHandle"></div>
        <div class="d-flex align-items-center justify-content-between mb-2">
            <div class="d-flex align-items-center gap-2">
                <div class="rounded-circle bg-primary-subtle text-primary d-inline-flex align-items-center justify-content-center" style="width: 38px; height: 38px; flex-shrink: 0;">
                    <i class="bi bi-layers-half fs-5"></i>
                </div>
                <div>
                    <div class="fw-bold text-dark fs-6" id="multiSheetTitle">{% translate "Plusieurs assets à cet endroit" %}</div>
                    <div class="small text-muted" id="multiSheetCount">2 {% translate "assets trouvés" %}</div>
                </div>
            </div>
            <button type="button" class="btn-close" id="btnMultiSheetClose" aria-label="{% translate 'Fermer' %}"></button>
        </div>
        <div class="text-secondary small mb-2">{% translate "Sélectionnez l'asset à consulter :" %}</div>
        <div id="multiAssetListContainer" class="d-flex flex-column gap-1.5" style="max-height: 52vh; overflow-y: auto;">
            <!-- Rempli dynamiquement via JS -->
        </div>
    </div>
{% endblock content %}

{% block extra_scripts %}
    <script src="{% static 'assets/asset_symbology.js' %}?v=20260913"></script>
    <script>
    (function() {
        'use strict';

        const STORAGE_KEY = 'loko_mobile_assets_state_v1';

        // Ajuster dynamiquement l'offset du header pour supprimer tout espace blanc inutile
        function updateHeaderOffset() {
            const header = document.querySelector('.fixed-header');
            if (header) {
                const height = header.offsetHeight;
                if (height > 0) {
                    document.documentElement.style.setProperty('--mobile-header-height', `${height}px`);
                }
            }
        }
        updateHeaderOffset();
        window.addEventListener('resize', () => {
            updateHeaderOffset();
            if (map) map.resize();
        });
        window.addEventListener('orientationchange', () => {
            setTimeout(() => {
                updateHeaderOffset();
                if (map) map.resize();
            }, 150);
        });

        // Données injectées depuis la vue
        const THEMATIC_CONFIG = {{ thematic_config_json|safe }};
        let currentThematic = "{{ selected_thematic|escapejs }}";
        let currentStatus = "";
        let currentQuery = "{{ initial_query|escapejs }}";
        let currentView = "{{ initial_view|default:'map'|escapejs }}";

        let isBboxFiltered = false;
        let currentBbox = null;
        let hasSavedPosition = false;
        let isProgrammaticMove = false;
        let startCenter = null;
        let startZoom = null;
        const defaultCenter = window.MAP_DEFAULT_CENTER || [4.3572, 50.8477]; // Bruxelles par défaut
        const defaultZoom = window.MAP_DEFAULT_ZOOM || 12;

        let userCoordinates = null; // { lat, lon }
        let map = null;
        let userMarker = null;
        let activeMarkers = [];
        let searchTimeout = null;
        let noResultsAlertTimeout = null;
        let mapMoveTimeout = null;
        let lastResults = [];
        let lastGeojson = { type: 'FeatureCollection', features: [] };
        let lastLimitReached = false;
        let lastTotalCount = 0;
        let lastSelectedFeatureId = null;
        let layersConfigured = false;

        // Éléments DOM
        const searchInput = document.getElementById('assetSearchInput');
        const clearSearchBtn = document.getElementById('clearSearchBtn');
        const submitSearchBtn = document.getElementById('submitSearchBtn');
        const btnGlobalReset = document.getElementById('btnGlobalReset');
        const statusSelect = document.getElementById('assetStatusSelect');
        const thematicChips = document.querySelectorAll('.thematic-chip');
        const btnViewMap = document.getElementById('btnViewMap');
        const btnViewList = document.getElementById('btnViewList');
        const viewContainerMap = document.getElementById('viewContainerMap');
        const viewContainerList = document.getElementById('viewContainerList');
        const assetsListContainer = document.getElementById('assetsListContainer');
        const emptyListMessage = document.getElementById('emptyListMessage');
        const emptyListIcon = document.getElementById('emptyListIcon');
        const emptyListTitle = document.getElementById('emptyListTitle');
        const noThematicSelectedMessage = document.getElementById('noThematicSelectedMessage');
        const mapThematicPrompt = document.getElementById('mapThematicPrompt');
        const filterLimitAlert = document.getElementById('filterLimitAlert');
        const filterLimitAlertText = document.getElementById('filterLimitAlertText');
        const noResultsInZoneAlert = document.getElementById('noResultsInZoneAlert');
        const btnResetToInitialView = document.getElementById('btnResetToInitialView');
        const btnCloseNoResultsAlert = document.getElementById('btnCloseNoResultsAlert');
        const btnInitialView = document.getElementById('btnInitialView');
        const btnListInitialView = document.getElementById('btnListInitialView');
        const emptyListSubtitle = document.getElementById('emptyListSubtitle');
        const limitNotice = document.getElementById('limitNotice');
        const zoneIndicator = document.getElementById('zoneIndicator');
        const resultsCountEl = document.getElementById('resultsCount');
        const loadingSpinner = document.getElementById('loadingSpinner');
        const btnGpsLocate = document.getElementById('btnGpsLocate');
        const btnResetFilters = document.getElementById('btnResetFilters');

        // Bottom Sheet elements
        const bottomSheet = document.getElementById('assetBottomSheet');
        const btnSheetClose = document.getElementById('btnSheetClose');
        const bottomSheetCloseHandle = document.getElementById('bottomSheetCloseHandle');
        const sheetCode = document.getElementById('sheetCode');
        const sheetName = document.getElementById('sheetName');
        const sheetThematicName = document.getElementById('sheetThematicName');
        const sheetIcon = document.getElementById('sheetIcon');
        const sheetStatusBadge = document.getElementById('sheetStatusBadge');
        const sheetElementType = document.getElementById('sheetElementType');
        const sheetDistanceBadge = document.getElementById('sheetDistanceBadge');
        const sheetDistanceText = document.getElementById('sheetDistanceText');
        const sheetDetailLink = document.getElementById('sheetDetailLink');
        const sheetRouteLink = document.getElementById('sheetRouteLink');

        // Éléments du volet Multi-Assets
        const multiAssetBottomSheet = document.getElementById('multiAssetBottomSheet');
        const multiSheetCloseHandle = document.getElementById('multiSheetCloseHandle');
        const btnMultiSheetClose = document.getElementById('btnMultiSheetClose');
        const multiSheetCount = document.getElementById('multiSheetCount');
        const multiAssetListContainer = document.getElementById('multiAssetListContainer');
        const btnBackToMultiSheet = document.getElementById('btnBackToMultiSheet');
        const btnBackToMultiSheetText = document.getElementById('btnBackToMultiSheetText');

        let lastMultiAssets = null;
        let selectedMarkerElement = null;

        // Couleurs par thématique (source unique : AssetSymbology)
        const THEMATIC_COLORS = (typeof AssetSymbology !== 'undefined')
            ? AssetSymbology.THEMATIC_COLORS
            : {
                'nature': '#2e7d32',
                'sign': '#0022ff',
                'trafficlights': '#e53935',
                'publiclighting': '#fdd835',
                'roads': '#607d8b',
                'clean': '#5e5e5e',
                'structures': '#6d4c41',
                'artworks': '#f24141',
                'controlcenters': '#7b1fa2',
                'its': '#0288d1',
                'outdoorfacilities': '#198754',
                'outdoor': '#198754',
                'parking': '#0d6efd',
            };

        // Fonction pour obtenir une boîte englobante valide (non dégénérée) depuis la carte
        function getValidMapBbox() {
            if (!map) return null;
            try {
                const bounds = map.getBounds();
                if (!bounds) return null;
                const west = bounds.getWest();
                const south = bounds.getSouth();
                const east = bounds.getEast();
                const north = bounds.getNorth();
                if (isFinite(west) && isFinite(south) && isFinite(east) && isFinite(north)) {
                    // Rejeter les coordonnées dégénérées (conteneur 0x0 ou masqué)
                    if (Math.abs(east - west) > 0.0005 && Math.abs(north - south) > 0.0005) {
                        return `${west},${south},${east},${north}`;
                    }
                }
            } catch (e) {}
            return null;
        }

        // Persistance de l'état (localStorage & URL)
        function saveState() {
            try {
                // S'assurer que le bbox n'est jamais sauvegardé sous forme dégénérée
                let validBboxToSave = null;
                if (isBboxFiltered && currentBbox) {
                    const parts = currentBbox.split(',').map(Number);
                    if (parts.length === 4 && parts.every(isFinite)) {
                        if (Math.abs(parts[2] - parts[0]) > 0.0005 && Math.abs(parts[3] - parts[1]) > 0.0005) {
                            validBboxToSave = currentBbox;
                        }
                    }
                }

                const state = {
                    thematic: currentThematic,
                    status: currentStatus,
                    q: currentQuery,
                    view: currentView,
                    isBboxFiltered: isBboxFiltered && Boolean(validBboxToSave),
                    bbox: validBboxToSave,
                };
                if (map) {
                    const center = map.getCenter();
                    if (center && isFinite(center.lng) && isFinite(center.lat)) {
                        state.center = [center.lng, center.lat];
                    }
                    const zoom = map.getZoom();
                    if (isFinite(zoom)) {
                        state.zoom = zoom;
                    }
                } else if (startCenter && startZoom) {
                    state.center = startCenter;
                    state.zoom = startZoom;
                }
                localStorage.setItem(STORAGE_KEY, JSON.stringify(state));

                // Mettre à jour l'URL sans recharger la page
                const url = new URL(window.location.href);
                if (currentThematic) url.searchParams.set('thematic', currentThematic);
                else url.searchParams.delete('thematic');

                if (currentStatus) url.searchParams.set('status', currentStatus);
                else url.searchParams.delete('status');

                if (currentQuery) url.searchParams.set('q', currentQuery);
                else url.searchParams.delete('q');

                if (currentView) url.searchParams.set('view', currentView);
                else url.searchParams.delete('view');

                window.history.replaceState({}, '', url.toString());
            } catch (e) {
                console.warn('Impossible de sauvegarder l\'état dans localStorage:', e);
            }
        }

        function loadSavedState() {
            try {
                const raw = localStorage.getItem(STORAGE_KEY);
                if (raw) {
                    return JSON.parse(raw);
                }
            } catch (e) {
                console.warn('Impossible de charger l\'état depuis localStorage:', e);
            }
            return null;
        }

        // Mise à l'échelle dynamique des poteaux et panneaux selon le niveau de zoom
        function updateAssemblyScale() {
            if (!map) return;
            const z = map.getZoom();
            let scale;
            if (z >= 20.5) {
                scale = 1.0;
            } else if (z <= 12.5) {
                scale = 0.25;
            } else {
                // La réduction commence plus tôt (dès zoom 20.5) et s'adapte régulièrement jusqu'à zoom 12.5
                scale = 0.25 + (z - 12.5) * (0.75 / 8.0);
            }
            scale = Math.round(scale * 100) / 100;
            const container = map.getContainer ? map.getContainer() : document.getElementById('assets-map');
            if (container) {
                container.style.setProperty('--assembly-scale', scale);
            }
        }

        // 1. Initialisation de la carte MapLibre
        function initMap() {
            if (map) return;

            const mapEl = document.getElementById('assets-map');
            if (!mapEl) return;

            const mapStyle = window.MAP_STYLE_LIGHT || 'https://demotiles.maplibre.org/style.json';
            const initialCenter = (hasSavedPosition && startCenter) ? startCenter : defaultCenter;
            const initialZoom = (hasSavedPosition && startZoom) ? startZoom : defaultZoom;

            map = new maplibregl.Map({
                container: 'assets-map',
                style: mapStyle,
                center: initialCenter,
                zoom: initialZoom,
                attributionControl: false,
            });

            map.addControl(new maplibregl.NavigationControl({ showCompass: true }), 'top-left');

            // Écouter le zoom pour ajuster dynamiquement et immédiatement la taille des poteaux et panneaux
            map.on('zoom', updateAssemblyScale);
            updateAssemblyScale();

            // Couches vectorielles pour les éléments surfaciques (polygones) et linéaires (lignes)
            function setupMapLayers() {
                if (!map || !map.isStyleLoaded()) return;

                if (!map.getSource('assets')) {
                    map.addSource('assets', {
                        type: 'geojson',
                        data: lastGeojson || { type: 'FeatureCollection', features: [] },
                        promoteId: 'feature_id'
                    });
                }

                if (typeof AssetSymbology !== 'undefined') {
                    if (!map.getLayer('assets-fill')) {
                        map.addLayer(AssetSymbology.getAssetsFillLayer('assets'));
                    }
                    if (!map.getLayer('assets-polygon-outline')) {
                        map.addLayer(AssetSymbology.getAssetsPolygonOutlineLayer('assets'));
                    }
                    if (!map.getLayer('assets-line')) {
                        map.addLayer(AssetSymbology.getAssetsLineLayer('assets'));
                    }

                    if (!layersConfigured) {
                        layersConfigured = true;
                        ['assets-fill', 'assets-line'].forEach(layerId => {
                            map.on('click', layerId, (e) => {
                                if (e.originalEvent) {
                                    e.originalEvent._handledByAssetLayer = true;
                                }
                                const bbox = [[e.point.x - 14, e.point.y - 14], [e.point.x + 14, e.point.y + 14]];
                                const rendered = map.queryRenderedFeatures(bbox, { layers: ['assets-fill', 'assets-line'] }) || [];
                                const foundMap = new Map();

                                rendered.forEach(feat => {
                                    const props = feat.properties || {};
                                    const featId = feat.id || props.feature_id;
                                    const asset = lastResults.find(a => String(a.feature_id) === String(featId) || (a.model_key === props.model_key && String(a.id) === String(props.id))) || props;
                                    const key = String(asset.feature_id || (asset.model_key && asset.id ? `${asset.model_key}_${asset.id}` : asset.code));
                                    if (!foundMap.has(key)) {
                                        foundMap.set(key, asset);
                                    }
                                });

                                const assetsList = Array.from(foundMap.values());
                                if (assetsList.length > 1) {
                                    openMultiBottomSheet(assetsList);
                                } else if (assetsList.length === 1) {
                                    openBottomSheet(assetsList[0]);
                                }
                            });
                            map.on('mouseenter', layerId, () => {
                                map.getCanvas().style.cursor = 'pointer';
                            });
                            map.on('mouseleave', layerId, () => {
                                map.getCanvas().style.cursor = '';
                            });
                        });
                    }
                }
            }

            map.on('click', (e) => {
                if (e.originalEvent && e.originalEvent._handledByAssetLayer) return;
                closeBottomSheet();
                closeMultiBottomSheet();
            });

            // Détection du déplacement ou zoom pour filtrage par zone visible (bbox) et synchronisation de la liste
            map.on('moveend', () => {
                // Ignorer si la vue active n'est pas la carte ou si aucune thématique n'est choisie
                if (!currentThematic || currentView !== 'map') return;

                if (isProgrammaticMove) {
                    isProgrammaticMove = false;
                    saveState();
                    return;
                }

                // Déplacement ou zoom manuel par l'utilisateur : valider que la boîte est réelle et non dégénérée
                const validBbox = getValidMapBbox();
                if (!validBbox) return;

                currentBbox = validBbox;
                isBboxFiltered = true;

                saveState();

                clearTimeout(mapMoveTimeout);
                mapMoveTimeout = setTimeout(() => {
                    if (currentView !== 'map') return;
                    fetchAndRenderAssets(true); // fromMapMove = true -> synchronise carte et liste
                }, 200);
            });



            map.on('load', () => {
                layersConfigured = false;
                setupMapLayers();
                if (lastResults.length > 0) {
                    renderMapView(lastResults, lastGeojson, isBboxFiltered);
                }
            });

            map.on('styledata', () => {
                if (map.isStyleLoaded() && !map.getSource('assets')) {
                    layersConfigured = false;
                    setupMapLayers();
                    if (lastGeojson && lastGeojson.features && lastGeojson.features.length > 0) {
                        const source = map.getSource('assets');
                        if (source) source.setData(lastGeojson);
                    }
                }
            });
        }

        // 2. Bascule Carte / Liste
        function setView(mode) {
            currentView = mode;
            clearTimeout(mapMoveTimeout); // Annuler tout timeout de déplacement de carte en cours

            if (mode === 'map') {
                btnViewMap.classList.add('btn-primary', 'active');
                btnViewMap.classList.remove('btn-outline-primary');
                btnViewList.classList.add('btn-outline-primary');
                btnViewList.classList.remove('btn-primary', 'active');
                viewContainerMap.classList.remove('d-none');
                viewContainerList.classList.add('d-none');
                if (map) {
                    isProgrammaticMove = true;
                    setTimeout(() => {
                        isProgrammaticMove = true;
                        map.resize();
                    }, 100);
                }
            } else {
                // Avant de masquer la carte, capturer le bbox valide
                const validBbox = getValidMapBbox();
                if (validBbox) {
                    currentBbox = validBbox;
                }

                btnViewList.classList.add('btn-primary', 'active');
                btnViewList.classList.remove('btn-outline-primary');
                btnViewMap.classList.add('btn-outline-primary');
                btnViewMap.classList.remove('btn-primary', 'active');
                viewContainerList.classList.remove('d-none');
                viewContainerMap.classList.add('d-none');
                closeBottomSheet();

                // S'assurer immédiatement que la liste affiche les résultats courants
                renderListView(lastResults);
            }

            saveState();
        }

        // 3. Récupération des données depuis le backend
        function fetchAndRenderAssets(fromMapMove = false, options = {}) {
            // L'utilisateur doit choisir au minimum une thématique
            if (!currentThematic) {
                loadingSpinner.classList.add('d-none');
                if (filterLimitAlert) filterLimitAlert.classList.add('d-none');
                if (limitNotice) limitNotice.classList.add('d-none');
                hideNoResultsInZoneAlert();
                resultsCountEl.textContent = '0';
                if (zoneIndicator) zoneIndicator.classList.add('d-none');
                if (mapThematicPrompt) mapThematicPrompt.classList.remove('d-none');
                if (noThematicSelectedMessage) noThematicSelectedMessage.classList.remove('d-none');
                if (emptyListMessage) emptyListMessage.classList.add('d-none');
                assetsListContainer.innerHTML = '';
                activeMarkers.forEach(m => m.remove());
                activeMarkers = [];
                selectedMarkerElement = null;
                lastMultiAssets = null;
                closeBottomSheet();
                closeMultiBottomSheet();
                lastGeojson = { type: 'FeatureCollection', features: [] };
                if (map && map.getSource('assets')) {
                    map.getSource('assets').setData(lastGeojson);
                }
                return;
            }

            if (mapThematicPrompt) mapThematicPrompt.classList.add('d-none');
            if (noThematicSelectedMessage) noThematicSelectedMessage.classList.add('d-none');

            loadingSpinner.classList.remove('d-none');

            const params = new URLSearchParams();
            params.append('thematic', currentThematic);
            if (currentQuery) params.append('q', currentQuery);
            if (currentStatus) params.append('status', currentStatus);
            if (userCoordinates) {
                params.append('lat', userCoordinates.lat);
                params.append('lon', userCoordinates.lon);
            }
            params.append('limit', '500');

            // Filtrage spatial par boîte englobante
            let bboxToSend = null;
            if (currentBbox) {
                const parts = currentBbox.split(',').map(Number);
                if (parts.length === 4 && parts.every(isFinite)) {
                    if (Math.abs(parts[2] - parts[0]) > 0.0005 && Math.abs(parts[3] - parts[1]) > 0.0005) {
                        bboxToSend = currentBbox;
                    }
                }
            }
            if (!bboxToSend && currentView === 'map' && isBboxFiltered) {
                bboxToSend = getValidMapBbox();
                if (bboxToSend) {
                    currentBbox = bboxToSend;
                }
            }

            if ((fromMapMove || isBboxFiltered) && bboxToSend) {
                params.append('bbox', bboxToSend);
                if (zoneIndicator) zoneIndicator.classList.remove('d-none');
            } else {
                if (zoneIndicator) zoneIndicator.classList.add('d-none');
            }

            fetch(`/mobile/assets/search/?${params.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                }
            })
            .then(res => {
                if (!res.ok) throw new Error('Erreur réseau');
                return res.json();
            })
            .then(data => {
                loadingSpinner.classList.add('d-none');
                renderResults(data, fromMapMove, options);
            })
            .catch(err => {
                console.error("Erreur chargement assets:", err);
                loadingSpinner.classList.add('d-none');
            });
        }

        // 4. Rendu des résultats sur Carte et dans la Liste
        function renderResults(data, fromMapMove = false, options = {}) {
            lastResults = data.results || [];
            lastGeojson = data.geojson || { type: 'FeatureCollection', features: [] };
            lastLimitReached = Boolean(data.limit_reached);
            lastTotalCount = data.total_count || 0;

            // Gestion de la limite de 500 assets atteinte
            if (data.limit_reached) {
                if (filterLimitAlert) {
                    filterLimitAlert.classList.remove('d-none');
                    if (filterLimitAlertText && data.total_count) {
                        filterLimitAlertText.textContent = `{% translate "Plus de 500 assets correspondent" %} (${data.total_count} {% translate "au total" %}). {% translate "Veuillez zoomer sur la carte ou affiner vos critères de recherche pour les afficher." %}`;
                    }
                }
                if (limitNotice) limitNotice.classList.add('d-none');
                resultsCountEl.textContent = `${data.total_count}`;
            } else {
                if (filterLimitAlert) filterLimitAlert.classList.add('d-none');
                if (limitNotice) limitNotice.classList.add('d-none');
                resultsCountEl.textContent = data.count;
            }

            // Synchronisation de la Liste (toujours à jour avec la zone zoomée ou les filtres)
            renderListView(lastResults);

            // Rendu Carte (mise à jour des marqueurs et des couches vectorielles)
            renderMapView(lastResults, lastGeojson, fromMapMove);

            // Gestion du message invitant à revenir à la vue initiale en cas de recherche sans résultat
            handleNoResultsInZoneAlert(data, options);
        }

        function renderListView(results = lastResults) {
            assetsListContainer.innerHTML = '';
            if (!results || results.length === 0) {
                emptyListMessage.classList.remove('d-none');
                if (lastLimitReached) {
                    if (emptyListIcon) emptyListIcon.className = 'bi bi-zoom-in fs-1 text-warning';
                    if (emptyListTitle) emptyListTitle.textContent = "{% translate 'Limite de 500 assets atteinte' %}";
                    if (emptyListSubtitle) {
                        emptyListSubtitle.textContent = `{% translate "Plus de 500 assets correspondent" %}${lastTotalCount ? ` (${lastTotalCount} {% translate "au total" %})` : ''}. {% translate "Veuillez zoomer sur la carte ou affiner vos critères de recherche pour afficher la liste." %}`;
                    }
                    if (btnListInitialView) btnListInitialView.classList.add('d-none');
                } else {
                    if (emptyListIcon) emptyListIcon.className = 'bi bi-search fs-1 text-muted';
                    if (emptyListTitle) emptyListTitle.textContent = "{% translate 'Aucun asset trouvé' %}";
                    if (btnListInitialView) {
                        if (currentQuery && !isAtMaxBbox()) {
                            btnListInitialView.classList.remove('d-none');
                            if (emptyListSubtitle) {
                                emptyListSubtitle.textContent = "{% translate 'Aucun asset trouvé dans cette zone pour votre recherche.' %}";
                            }
                        } else {
                            btnListInitialView.classList.add('d-none');
                            if (emptyListSubtitle) {
                                emptyListSubtitle.textContent = "{% translate 'Modifiez votre recherche ou zoomez sur une autre zone.' %}";
                            }
                        }
                    }
                }
                return;
            }
            emptyListMessage.classList.add('d-none');

            results.forEach(asset => {
                const card = document.createElement('a');
                card.className = 'asset-list-card';
                card.href = asset.detail_url;

                const statusClass = `badge-status badge-status-${asset.status || 'active'}`;
                const distanceBadge = asset.distance_m !== null
                    ? `<span class="badge bg-primary-subtle text-primary ms-auto me-2 text-nowrap"><i class="bi bi-geo-alt me-1"></i>${formatDistance(asset.distance_m)}</span>`
                    : '';

                const symbology = (typeof AssetSymbology !== 'undefined')
                    ? AssetSymbology.getAssetSymbology(asset)
                    : { color: THEMATIC_COLORS[asset.thematic] || '#2f3e8b', iconClass: asset.thematic_icon || 'bi-pin-map' };
                const thematicColor = symbology.color || THEMATIC_COLORS[asset.thematic] || '#2f3e8b';
                const iconHtml = (typeof AssetSymbology !== 'undefined')
                    ? AssetSymbology.renderIconHtml(symbology)
                    : `<i class="bi ${symbology.iconClass || 'bi-pin-map'}"></i>`;

                const hasCustomName = asset.name && asset.name.trim() && asset.name.toLowerCase() !== (asset.element_type || '').toLowerCase();
                const typeBadgeHtml = asset.element_type
                    ? `<span class="badge-element-type text-nowrap flex-shrink-0">${escapeHtml(asset.element_type)}</span>`
                    : '';
                const nameHtml = hasCustomName
                    ? `<span class="text-truncate flex-grow-1">${escapeHtml(asset.name)}</span>`
                    : (!asset.element_type && asset.thematic_name ? `<span class="text-truncate flex-grow-1">${escapeHtml(asset.thematic_name)}</span>` : '');

                card.innerHTML = `
                    <div class="asset-icon-circle" style="background-color: ${thematicColor}15; color: ${thematicColor};">
                        ${iconHtml}
                    </div>
                    <div class="flex-grow-1 text-truncate">
                        <div class="d-flex align-items-center gap-1.5 flex-wrap">
                            <span class="fw-bold text-dark text-truncate">${escapeHtml(asset.code)}</span>
                            <span class="${statusClass}">${escapeHtml(asset.status_display || asset.status || 'Actif')}</span>
                        </div>
                        <div class="small text-secondary d-flex align-items-center gap-1.5 mt-0.5 overflow-hidden">
                            ${typeBadgeHtml}
                            ${nameHtml}
                        </div>
                    </div>
                    ${distanceBadge}
                    <i class="bi bi-chevron-right text-muted"></i>
                `;
                assetsListContainer.appendChild(card);
            });
        }

        function renderMapView(results = lastResults, geojson = lastGeojson, fromMapMove = false) {
            if (!map) return;
            if (typeof geojson === 'boolean') {
                fromMapMove = geojson;
                geojson = lastGeojson;
            }
            if (!geojson) geojson = lastGeojson;

            // Mettre à jour la source vectorielle pour les polygones et polylignes
            if (map.isStyleLoaded()) {
                const source = map.getSource('assets');
                if (source) {
                    source.setData(geojson || { type: 'FeatureCollection', features: [] });
                }
            }

            // Supprimer les anciens marqueurs
            activeMarkers.forEach(m => m.remove());
            activeMarkers = [];
            selectedMarkerElement = null;

            // 1. Filtrer les assets ponctuels valides
            const punctualAssets = (results || []).filter(asset => {
                if (asset.lon === null || asset.lat === null) return false;
                return !asset.geom_type || asset.geom_type === 'Point' || asset.geom_type === 'MultiPoint';
            });

            // 2. Regrouper les assets superposés aux mêmes coordonnées exactes ou sur le même poteau
            const locationGroups = [];
            const processedSet = new Set();

            punctualAssets.forEach(asset => {
                const key = String(asset.feature_id || `${asset.model_key}_${asset.id}`);
                if (processedSet.has(key)) return;

                const group = [asset];
                processedSet.add(key);

                const isAssetPole = asset.model_key && asset.model_key.includes('pole');

                punctualAssets.forEach(other => {
                    const otherKey = String(other.feature_id || `${other.model_key}_${other.id}`);
                    if (processedSet.has(otherKey)) return;

                    const isOtherPole = other.model_key && other.model_key.includes('pole');

                    // Règle 1 : Deux poteaux distincts ne doivent JAMAIS être fusionnés
                    if (isAssetPole && isOtherPole && String(asset.id) !== String(other.id)) {
                        return;
                    }
                    // Règle 2 : Deux panneaux rattachés à des poteaux différents ne doivent JAMAIS être fusionnés
                    if (asset.pole_id && other.pole_id && String(asset.pole_id) !== String(other.pole_id)) {
                        return;
                    }
                    // Règle 3 : Un panneau et un poteau distinct ne doivent JAMAIS être fusionnés
                    if (isAssetPole && other.pole_id && String(asset.id) !== String(other.pole_id)) {
                        return;
                    }
                    if (isOtherPole && asset.pole_id && String(other.id) !== String(asset.pole_id)) {
                        return;
                    }

                    const samePole = (other.pole_id && asset.pole_id && String(other.pole_id) === String(asset.pole_id))
                        || (isAssetPole && String(other.pole_id) === String(asset.id))
                        || (isOtherPole && String(asset.pole_id) === String(other.id));

                    const isSignRelated = isAssetPole || isOtherPole || asset.model_key === 'signpanel' || other.model_key === 'signpanel' || !!asset.pole_id || !!other.pole_id;

                    let isSameLocation = false;
                    if (isSignRelated) {
                        // Pour les panneaux et poteaux, regrouper si même poteau
                        // ou si coordonnées strictement identiques (< 1.5m) pour éléments sans poteau attribué
                        if (samePole) {
                            isSameLocation = true;
                        } else if (!asset.pole_id && !other.pole_id) {
                            const dLon = Math.abs(other.lon - asset.lon);
                            const dLat = Math.abs(other.lat - asset.lat);
                            isSameLocation = (dLon < 0.000015 && dLat < 0.000015);
                        }
                    } else {
                        const dLon = Math.abs(other.lon - asset.lon);
                        const dLat = Math.abs(other.lat - asset.lat);
                        isSameLocation = (dLon < 0.000015 && dLat < 0.000015);
                    }

                    if (isSameLocation) {
                        group.push(other);
                        processedSet.add(otherKey);
                    }
                });

                locationGroups.push(group);
            });

            // 3. Fonction pour déterminer l'asset prioritaire visuellement
            function getDisplayPriority(a) {
                // 1. Panneau avec visuel SVG/PNG : priorité maximale (100)
                if (a.model_key === 'signpanel' && (a.svg_url || a.icon_url || a.panel_type)) return 100;
                // 2. Autre panneau de signalisation : 90
                if (a.model_key === 'signpanel') return 90;
                // 3. Lanterne tricolore / luminaire : 80
                if (a.model_key === 'trafficlightlantern' || a.model_key === 'publiclightinglightfixture') return 80;
                // 4. Autre équipement non-poteau : 70
                if (!a.model_key.includes('pole')) return 70;
                // 5. Poteau / mât structural : priorité minimale (10)
                return 10;
            }

            // 4. Créer les marqueurs pour chaque emplacement
            updateAssemblyScale();
            locationGroups.forEach(group => {
                const signPanels = group.filter(a => a.model_key === 'signpanel');
                const otherAssets = group.filter(a => a.model_key !== 'signpanel');

                // CAS A : Emplacement avec un ou plusieurs panneaux de signalisation
                // Rendu systématique en assemblage vertical unifié sans agrégation avec compteur
                if (signPanels.length > 0) {
                    const poleAsset = otherAssets.find(a => a.model_key === 'signpole' || (a.model_key && a.model_key.includes('pole')) || (a.thematic === 'sign' && a.model_key && a.model_key.includes('pole')));
                    const baseAsset = poleAsset || (otherAssets.length > 0 ? otherAssets[0] : null);
                    const hasBaseSupport = !!baseAsset;

                    const refLon = baseAsset ? baseAsset.lon : signPanels[0].lon;
                    const refLat = baseAsset ? baseAsset.lat : signPanels[0].lat;

                    // vertical_order = 1 est le panneau le plus bas (au-dessus du dégagement du sol)
                    // Les ordres supérieurs s'empilent vers le haut le long du mât
                    signPanels.sort((a, b) => {
                        const orderA = a.vertical_order != null ? Number(a.vertical_order) : (a.panel_vertical_order != null ? Number(a.panel_vertical_order) : 1);
                        const orderB = b.vertical_order != null ? Number(b.vertical_order) : (b.panel_vertical_order != null ? Number(b.panel_vertical_order) : 1);
                        return (orderA - orderB) || (Number(a.id) - Number(b.id));
                    });

                    const N = signPanels.length;
                    const itemStep = 21; // Espacement vertical compact entre panneaux
                    const baseClearance = hasBaseSupport ? 16 : 0; // Dégagement harmonieux au-dessus du trottoir (tige visible ~12px)
                    const stemHeight = hasBaseSupport ? (baseClearance + (N - 1) * itemStep + 16) : 0;

                    const el = document.createElement('div');
                    el.className = 'asset-map-assembly';
                    el.style.zIndex = '5';

                    const scaler = document.createElement('div');
                    scaler.className = 'assembly-scaler';
                    el.appendChild(scaler);

                    // 1. Socle / base circulaire du poteau (ancré exactement à Y=0 sur les coordonnées GPS)
                    if (hasBaseSupport) {
                        const baseDot = document.createElement('div');
                        baseDot.className = 'pole-base';
                        const baseFeatId = baseAsset.feature_id || (baseAsset.model_key && baseAsset.id ? `${baseAsset.model_key}_${baseAsset.id}` : null);
                        if (baseFeatId) baseDot.dataset.featureId = baseFeatId;
                        baseDot.title = baseAsset.name || baseAsset.code || 'Poteau';

                        baseDot.addEventListener('click', (e) => {
                            e.stopPropagation();
                            if (e.originalEvent) {
                                e.originalEvent._handledByAssetLayer = true;
                            }
                            if (otherAssets.length > 1) {
                                openMultiBottomSheet(otherAssets);
                            } else {
                                openBottomSheet(baseAsset, false, group);
                            }
                        });

                        if (lastSelectedFeatureId && baseFeatId === lastSelectedFeatureId) {
                            baseDot.classList.add('selected');
                            el.style.zIndex = '50';
                            selectedMarkerElement = baseDot;
                        }

                        scaler.appendChild(baseDot);

                        // Tige verticale montant vers le haut depuis la base
                        const stem = document.createElement('div');
                        stem.className = 'pole-stem';
                        stem.style.height = `${stemHeight}px`;
                        scaler.appendChild(stem);
                    }

                    // 2. Panneaux de signalisation empilés vers le haut
                    signPanels.forEach((panel, index) => {
                        const panelBottom = baseClearance + (index * itemStep);

                        const symbology = (typeof AssetSymbology !== 'undefined')
                            ? AssetSymbology.getAssetSymbology(panel)
                            : { color: '#0022ff', iconClass: 'bi-sign-stop-fill' };
                        const iconHtml = (typeof AssetSymbology !== 'undefined')
                            ? AssetSymbology.renderIconHtml(symbology)
                            : `<i class="bi ${symbology.iconClass || 'bi-sign-stop-fill'}"></i>`;

                        const panelEl = document.createElement('div');
                        panelEl.className = 'assembly-panel-item';
                        panelEl.style.bottom = `${panelBottom}px`;
                        panelEl.style.zIndex = String(10 + index);
                        panelEl.innerHTML = iconHtml;

                        const featId = panel.feature_id || (panel.model_key && panel.id ? `${panel.model_key}_${panel.id}` : null);
                        if (featId) panelEl.dataset.featureId = featId;

                        panelEl.addEventListener('click', (e) => {
                            e.stopPropagation();
                            if (e.originalEvent) {
                                e.originalEvent._handledByAssetLayer = true;
                            }
                            openBottomSheet(panel, false, group);
                        });

                        if (lastSelectedFeatureId && featId === lastSelectedFeatureId) {
                            panelEl.classList.add('selected');
                            el.style.zIndex = '50';
                            selectedMarkerElement = panelEl;
                        }

                        scaler.appendChild(panelEl);
                    });

                    const marker = new maplibregl.Marker({ element: el, offset: [0, 0] })
                        .setLngLat([refLon, refLat])
                        .addTo(map);

                    marker._asset = baseAsset || signPanels[0];
                    marker._group = group;
                    marker._element = el;

                    activeMarkers.push(marker);
                } else {
                    // CAS B : Emplacement sans panneau (arbres, bancs, corbeilles, poteau seul, etc.)
                    group.sort((a, b) => getDisplayPriority(b) - getDisplayPriority(a));
                    const primaryAsset = group[0];

                    const symbology = (typeof AssetSymbology !== 'undefined')
                        ? AssetSymbology.getAssetSymbology(primaryAsset)
                        : { color: THEMATIC_COLORS[primaryAsset.thematic] || '#2f3e8b', iconClass: primaryAsset.thematic_icon || 'bi-pin-map' };
                    const color = symbology.color || THEMATIC_COLORS[primaryAsset.thematic] || '#2f3e8b';
                    const iconHtml = (typeof AssetSymbology !== 'undefined')
                        ? AssetSymbology.renderIconHtml(symbology)
                        : `<i class="bi ${symbology.iconClass || 'bi-pin-map'}"></i>`;

                    const isSignPole = primaryAsset.model_key === 'signpole' || (primaryAsset.thematic === 'sign' && primaryAsset.model_key.includes('pole'));

                    const el = document.createElement('div');
                    if (isSignPole) {
                        el.className = 'asset-map-assembly';
                        el.style.zIndex = '5';

                        const scaler = document.createElement('div');
                        scaler.className = 'assembly-scaler';
                        el.appendChild(scaler);

                        const baseDot = document.createElement('div');
                        baseDot.className = 'pole-base';
                        const baseFeatId = primaryAsset.feature_id || (primaryAsset.model_key && primaryAsset.id ? `${primaryAsset.model_key}_${primaryAsset.id}` : null);
                        if (baseFeatId) baseDot.dataset.featureId = baseFeatId;
                        baseDot.title = primaryAsset.name || primaryAsset.code || 'Poteau';

                        baseDot.addEventListener('click', (e) => {
                            e.stopPropagation();
                            if (e.originalEvent) {
                                e.originalEvent._handledByAssetLayer = true;
                            }
                            if (group.length > 1) {
                                openMultiBottomSheet(group);
                            } else {
                                openBottomSheet(primaryAsset, false, group);
                            }
                        });

                        if (lastSelectedFeatureId && baseFeatId === lastSelectedFeatureId) {
                            baseDot.classList.add('selected');
                            el.style.zIndex = '50';
                            selectedMarkerElement = baseDot;
                        }

                        scaler.appendChild(baseDot);

                        const stem = document.createElement('div');
                        stem.className = 'pole-stem';
                        stem.style.height = '18px';
                        scaler.appendChild(stem);
                    } else {
                        el.className = 'asset-map-marker';
                        el.style.borderColor = color;
                        el.style.color = color;
                        el.innerHTML = iconHtml;

                        el.addEventListener('click', (e) => {
                            e.stopPropagation();
                            if (e.originalEvent) {
                                e.originalEvent._handledByAssetLayer = true;
                            }
                            if (group.length > 1) {
                                openMultiBottomSheet(group);
                            } else {
                                openBottomSheet(primaryAsset, false, group);
                            }
                        });
                    }

                    if (!isSignPole && group.length > 1) {
                        const badge = document.createElement('span');
                        badge.className = 'marker-count-badge';
                        badge.textContent = group.length > 99 ? '99+' : group.length;
                        badge.title = `${group.length} assets à cet endroit`;
                        el.appendChild(badge);
                    }

                    const marker = new maplibregl.Marker({ element: el, offset: [0, 0] })
                        .setLngLat([primaryAsset.lon, primaryAsset.lat])
                        .addTo(map);

                    marker._asset = primaryAsset;
                    marker._group = group;
                    marker._element = el;

                    const isGroupSelected = group.some(a => {
                        const featId = a.feature_id || (a.model_key && a.id ? `${a.model_key}_${a.id}` : null);
                        return lastSelectedFeatureId && featId === lastSelectedFeatureId;
                    });
                    if (isGroupSelected) {
                        el.classList.add('selected');
                        el.style.zIndex = '50';
                        selectedMarkerElement = el;
                    }

                    activeMarkers.push(marker);
                }
            });

            // Ne jamais modifier la visualisation (zoom ou pan) de manière automatique lors d'une action de filtre ou de recherche
        }

        // Trouver tous les assets situés au même endroit ou à proximité immédiate (tap sur écran)
        function findAssetsAtMarker(targetAsset) {
            if (!map || !targetAsset) return [targetAsset];
            const targetPoint = (targetAsset.lon !== null && targetAsset.lat !== null)
                ? map.project([targetAsset.lon, targetAsset.lat])
                : null;
            const tolerancePx = 24; // Rayon de tolérance pour le tap tactile
            const foundMap = new Map();
            const targetKey = String(targetAsset.feature_id || (targetAsset.model_key && targetAsset.id ? `${targetAsset.model_key}_${targetAsset.id}` : targetAsset.code));
            foundMap.set(targetKey, targetAsset);

            (lastResults || []).forEach(a => {
                if (a.lon === null || a.lat === null) return;
                const key = String(a.feature_id || (a.model_key && a.id ? `${a.model_key}_${a.id}` : a.code));
                if (foundMap.has(key)) return;

                // 1. Coordonnées identiques ou quasi-identiques
                const dLon = Math.abs(a.lon - targetAsset.lon);
                const dLat = Math.abs(a.lat - targetAsset.lat);
                if (dLon < 0.00005 && dLat < 0.00005) {
                    foundMap.set(key, a);
                    return;
                }

                // 2. Distance à l'écran (marqueurs superposés au zoom actuel)
                if (targetPoint) {
                    const p = map.project([a.lon, a.lat]);
                    const dist = Math.hypot(p.x - targetPoint.x, p.y - targetPoint.y);
                    if (dist <= tolerancePx) {
                        foundMap.set(key, a);
                    }
                }
            });

            return Array.from(foundMap.values());
        }

        // 5a. Volet Multi-Assets (quand plusieurs éléments se trouvent au même endroit)
        function openMultiBottomSheet(assetsList) {
            if (!assetsList || assetsList.length === 0) return;
            lastMultiAssets = assetsList;

            // Fermer le bottom sheet simple
            bottomSheet.classList.remove('active');

            if (multiSheetCount) {
                multiSheetCount.textContent = `${assetsList.length} {% translate "assets trouvés à cet endroit" %}`;
            }

            multiAssetListContainer.innerHTML = '';
            assetsList.forEach(asset => {
                const symbology = (typeof AssetSymbology !== 'undefined')
                    ? AssetSymbology.getAssetSymbology(asset)
                    : { color: THEMATIC_COLORS[asset.thematic] || '#2f3e8b', iconClass: asset.thematic_icon || 'bi-pin-map' };
                const color = symbology.color || THEMATIC_COLORS[asset.thematic] || '#2f3e8b';
                const iconHtml = (typeof AssetSymbology !== 'undefined')
                    ? AssetSymbology.renderIconHtml(symbology)
                    : `<i class="bi ${symbology.iconClass || 'bi-pin-map'}"></i>`;

                const statusClass = `badge-status badge-status-${asset.status || 'active'}`;
                const distanceBadge = (asset.distance_m !== null && asset.distance_m !== undefined)
                    ? `<span class="badge bg-primary-subtle text-primary ms-auto me-1 text-nowrap"><i class="bi bi-geo-alt me-1"></i>${formatDistance(asset.distance_m)}</span>`
                    : '';

                const hasCustomName = asset.name && asset.name.trim() && asset.name.toLowerCase() !== (asset.element_type || '').toLowerCase();
                const typeBadgeHtml = asset.element_type
                    ? `<span class="badge-element-type text-nowrap flex-shrink-0">${escapeHtml(asset.element_type)}</span>`
                    : '';
                const nameHtml = hasCustomName
                    ? `<span class="text-truncate flex-grow-1">${escapeHtml(asset.name)}</span>`
                    : (!asset.element_type && asset.thematic_name ? `<span class="text-truncate flex-grow-1">${escapeHtml(asset.thematic_name)}</span>` : '');

                const card = document.createElement('div');
                card.className = 'multi-asset-card';
                card.innerHTML = `
                    <div class="asset-icon-circle" style="background-color: ${color}18; color: ${color}; width: 36px; height: 36px; font-size: 1.1rem; flex-shrink: 0;">
                        ${iconHtml}
                    </div>
                    <div class="flex-grow-1 text-truncate">
                        <div class="d-flex align-items-center gap-1.5 flex-wrap">
                            <span class="fw-bold text-dark text-truncate">${escapeHtml(asset.code)}</span>
                            <span class="${statusClass}">${escapeHtml(asset.status_display || asset.status || 'Actif')}</span>
                        </div>
                        <div class="small text-secondary d-flex align-items-center gap-1.5 mt-0.5 overflow-hidden">
                            ${typeBadgeHtml}
                            ${nameHtml}
                        </div>
                    </div>
                    ${distanceBadge}
                    <i class="bi bi-chevron-right text-muted flex-shrink-0"></i>
                `;

                card.addEventListener('click', (ev) => {
                    ev.preventDefault();
                    ev.stopPropagation();
                    closeMultiBottomSheet(true); // Conserve le contexte multi pour le bouton retour
                    openBottomSheet(asset, true); // fromMulti = true
                });

                multiAssetListContainer.appendChild(card);
            });

            multiAssetBottomSheet.classList.add('active');
        }

        function closeMultiBottomSheet(keepMultiContext = false) {
            if (multiAssetBottomSheet) {
                multiAssetBottomSheet.classList.remove('active');
            }
            if (!keepMultiContext) {
                lastMultiAssets = null;
            }
        }

        // 5b. Volet d'aperçu individuel (Bottom Sheet)
        function openBottomSheet(asset, fromMulti = false, assetGroup = null) {
            if (!asset) return;

            // Fermer le volet multi-assets
            if (multiAssetBottomSheet) {
                multiAssetBottomSheet.classList.remove('active');
            }

            // Bouton retour vers la liste multi si ouvert depuis une sélection multiple ou s'il y a d'autres assets sur le même support
            const siblingGroup = (assetGroup && assetGroup.length > 1) ? assetGroup : ((lastMultiAssets && lastMultiAssets.length > 1) ? lastMultiAssets : null);
            if (btnBackToMultiSheet) {
                if (siblingGroup && siblingGroup.length > 1) {
                    lastMultiAssets = siblingGroup;
                    btnBackToMultiSheet.classList.remove('d-none');
                    if (btnBackToMultiSheetText) {
                        btnBackToMultiSheetText.textContent = `{% translate "Voir les" %} ${siblingGroup.length} {% translate "assets à cet endroit" %}`;
                    }
                } else {
                    btnBackToMultiSheet.classList.add('d-none');
                }
            }

            // Mettre en surbrillance sur la carte (pour surfaces polygonales et polylignes)
            if (map && map.getSource('assets')) {
                if (lastSelectedFeatureId) {
                    try {
                        map.setFeatureState({ source: 'assets', id: lastSelectedFeatureId }, { selected: false });
                    } catch (e) {}
                }
                const featId = asset.feature_id || (asset.model_key && asset.id ? `${asset.model_key}_${asset.id}` : null);
                if (featId) {
                    lastSelectedFeatureId = featId;
                    try {
                        map.setFeatureState({ source: 'assets', id: featId }, { selected: true });
                    } catch (e) {}
                }
            }

            // Symbologie de sélection pour marqueur ponctuel
            if (selectedMarkerElement) {
                selectedMarkerElement.classList.remove('selected');
                selectedMarkerElement.style.zIndex = '';
                const parentAssembly = selectedMarkerElement.closest ? selectedMarkerElement.closest('.asset-map-assembly') : null;
                if (parentAssembly) parentAssembly.style.zIndex = '';
                selectedMarkerElement = null;
            }
            const currentFeatId = asset.feature_id || (asset.model_key && asset.id ? `${asset.model_key}_${asset.id}` : null);
            if (currentFeatId) {
                const matchingMarker = activeMarkers.find(m => {
                    if (!m._element) return false;
                    return m._asset && (
                        String(m._asset.feature_id) === String(currentFeatId) ||
                        (m._asset.model_key === asset.model_key && String(m._asset.id) === String(asset.id))
                    );
                }) || activeMarkers.find(m => {
                    if (!m._element) return false;
                    return m._group && m._group.some(g => String(g.feature_id) === String(currentFeatId) || (g.model_key === asset.model_key && String(g.id) === String(asset.id)));
                });
                if (matchingMarker && matchingMarker._element) {
                    const subItem = matchingMarker._element.querySelector ? matchingMarker._element.querySelector(`[data-feature-id="${currentFeatId}"]`) : null;
                    if (subItem) {
                        selectedMarkerElement = subItem;
                        subItem.classList.add('selected');
                        subItem.style.zIndex = '50';
                        matchingMarker._element.style.zIndex = '50';
                    } else {
                        selectedMarkerElement = matchingMarker._element;
                        selectedMarkerElement.classList.add('selected');
                        selectedMarkerElement.style.zIndex = '50';
                    }
                }
            }

            sheetCode.textContent = asset.code || '-';
            sheetName.textContent = asset.name || asset.element_type || '';
            sheetThematicName.textContent = asset.thematic_name || '';

            const symbology = (typeof AssetSymbology !== 'undefined')
                ? AssetSymbology.getAssetSymbology(asset)
                : { color: THEMATIC_COLORS[asset.thematic] || '#2f3e8b', iconClass: asset.thematic_icon || 'bi-pin-map' };
            const color = symbology.color || THEMATIC_COLORS[asset.thematic] || '#2f3e8b';

            const iconCircle = document.getElementById('sheetIconCircle');
            iconCircle.style.color = color;
            iconCircle.style.backgroundColor = `${color}18`;
            iconCircle.innerHTML = (typeof AssetSymbology !== 'undefined')
                ? AssetSymbology.renderIconHtml(symbology)
                : `<i class="bi ${symbology.iconClass || 'bi-pin-map'}" id="sheetIcon"></i>`;

            sheetStatusBadge.className = `badge-status badge-status-${asset.status || 'active'}`;
            if (asset.element_type) {
                sheetElementType.textContent = asset.element_type;
                sheetElementType.classList.remove('d-none');
            } else {
                sheetElementType.classList.add('d-none');
            }

            if (asset.distance_m !== null && asset.distance_m !== undefined) {
                sheetDistanceBadge.classList.remove('d-none');
                sheetDistanceText.textContent = formatDistance(asset.distance_m);
            } else {
                sheetDistanceBadge.classList.add('d-none');
            }

            sheetDetailLink.href = asset.detail_url || '#';

            if (asset.lat !== null && asset.lat !== undefined && asset.lon !== null && asset.lon !== undefined) {
                sheetRouteLink.href = `https://www.google.com/maps/dir/?api=1&destination=${asset.lat},${asset.lon}`;
                sheetRouteLink.classList.remove('d-none');
            } else {
                sheetRouteLink.classList.add('d-none');
            }

            bottomSheet.classList.add('active');

            // NOTE : Le centrage et le zoom ont été supprimés lors du tap pour préserver la vue choisie par l'utilisateur.
        }

        function closeBottomSheet() {
            bottomSheet.classList.remove('active');
            closeMultiBottomSheet();
            if (map && map.getSource('assets') && lastSelectedFeatureId) {
                try {
                    map.setFeatureState({ source: 'assets', id: lastSelectedFeatureId }, { selected: false });
                } catch (e) {}
                lastSelectedFeatureId = null;
            }
            if (selectedMarkerElement) {
                selectedMarkerElement.classList.remove('selected');
                selectedMarkerElement.style.zIndex = '';
                const parentAssembly = selectedMarkerElement.closest ? selectedMarkerElement.closest('.asset-map-assembly') : null;
                if (parentAssembly) parentAssembly.style.zIndex = '';
                selectedMarkerElement = null;
            }
        }

        btnSheetClose.addEventListener('click', () => {
            closeBottomSheet();
            lastMultiAssets = null;
        });
        bottomSheetCloseHandle.addEventListener('click', () => {
            closeBottomSheet();
            lastMultiAssets = null;
        });

        if (btnMultiSheetClose) {
            btnMultiSheetClose.addEventListener('click', () => closeMultiBottomSheet());
        }
        if (multiSheetCloseHandle) {
            multiSheetCloseHandle.addEventListener('click', () => closeMultiBottomSheet());
        }

        if (btnBackToMultiSheet) {
            btnBackToMultiSheet.addEventListener('click', () => {
                const multiContext = lastMultiAssets;
                bottomSheet.classList.remove('active');
                if (map && map.getSource('assets') && lastSelectedFeatureId) {
                    try {
                        map.setFeatureState({ source: 'assets', id: lastSelectedFeatureId }, { selected: false });
                    } catch (e) {}
                    lastSelectedFeatureId = null;
                }
                if (selectedMarkerElement) {
                    selectedMarkerElement.classList.remove('selected');
                    selectedMarkerElement.style.zIndex = '';
                    const parentAssembly = selectedMarkerElement.closest ? selectedMarkerElement.closest('.asset-map-assembly') : null;
                    if (parentAssembly) parentAssembly.style.zIndex = '';
                    selectedMarkerElement = null;
                }
                if (multiContext && multiContext.length > 1) {
                    openMultiBottomSheet(multiContext);
                }
            });
        }

        // 6. Gestion du GPS et localisation
        function locateUser() {
            if (!navigator.geolocation) {
                alert("{% translate "La géolocalisation n'est pas supportée par votre navigateur." %}");
                return;
            }

            btnGpsLocate.innerHTML = `<span class="spinner-border spinner-border-sm" role="status"></span>`;

            navigator.geolocation.getCurrentPosition(
                (pos) => {
                    btnGpsLocate.innerHTML = `<i class="bi bi-crosshair text-primary"></i>`;
                    userCoordinates = {
                        lat: pos.coords.latitude,
                        lon: pos.coords.longitude,
                    };

                    // Marqueur sur la carte
                    if (map) {
                        if (userMarker) userMarker.remove();
                        const el = document.createElement('div');
                        el.className = 'user-gps-marker';
                        userMarker = new maplibregl.Marker({ element: el })
                            .setLngLat([userCoordinates.lon, userCoordinates.lat])
                            .addTo(map);

                        map.flyTo({ center: [userCoordinates.lon, userCoordinates.lat], zoom: 15 });
                    }

                    // Rafraîchir la recherche avec coordonnées pour calculer les distances
                    fetchAndRenderAssets(false);
                },
                (err) => {
                    btnGpsLocate.innerHTML = `<i class="bi bi-crosshair"></i>`;
                    console.warn("Échec géolocalisation:", err.message);
                },
                { enableHighAccuracy: true, timeout: 8000 }
            );
        }

        btnGpsLocate.addEventListener('click', locateUser);

        // 7. Réinitialisation complète (Bouton Reset)
        function resetAll() {
            // Effet visuel immédiat sur le bouton
            if (btnGlobalReset) {
                const icon = btnGlobalReset.querySelector('i');
                if (icon) {
                    icon.classList.add('spin-once');
                    setTimeout(() => icon.classList.remove('spin-once'), 500);
                }
            }

            // Réinitialiser la recherche textuelle
            currentQuery = '';
            if (searchInput) {
                searchInput.value = '';
                clearSearchBtn.classList.add('d-none');
            }

            // Réinitialiser le filtre statut
            currentStatus = '';
            if (statusSelect) {
                statusSelect.value = '';
            }

            // Réinitialiser le filtrage par zone / zoom
            isBboxFiltered = false;
            currentBbox = null;
            hasSavedPosition = false;
            if (zoneIndicator) {
                zoneIndicator.classList.add('d-none');
            }

            hideNoResultsInZoneAlert();
            closeBottomSheet();
            lastGeojson = { type: 'FeatureCollection', features: [] };
            if (map && map.getSource('assets')) {
                map.getSource('assets').setData(lastGeojson);
            }

            // Supprimer la persistance localStorage
            try {
                localStorage.removeItem(STORAGE_KEY);
            } catch (e) {}

            // Nettoyer l'URL
            const url = new URL(window.location.href);
            url.searchParams.delete('q');
            url.searchParams.delete('status');
            url.searchParams.delete('bbox');
            if (currentThematic) {
                url.searchParams.set('thematic', currentThematic);
            }
            window.history.replaceState({}, '', url.toString());

            // Recentrer la carte sur la position par défaut
            if (map) {
                isProgrammaticMove = true;
                map.flyTo({
                    center: defaultCenter,
                    zoom: defaultZoom,
                    essential: true
                });
            }

            // Recharger la totalité des assets pour la thématique
            fetchAndRenderAssets(false);
        }

        // Vérifier si la vue courante correspond à la boîte englobante maximale (vue initiale)
        function isAtMaxBbox() {
            if (!map) return true;
            // Si la recherche est restreinte par une boîte englobante (zone visible), elle n'est pas à la bbox maximale
            if (isBboxFiltered) return false;

            const currentZoom = map.getZoom();
            const currentCenter = map.getCenter();

            const dLng = Math.abs(currentCenter.lng - defaultCenter[0]);
            const dLat = Math.abs(currentCenter.lat - defaultCenter[1]);
            const zoomDiff = currentZoom - defaultZoom;

            // Si le zoom est plus grand que le zoom initial (+0.5) ou si le centre s'est décalé (> 0.025 deg)
            if (zoomDiff > 0.5 || dLng > 0.025 || dLat > 0.025) {
                return false;
            }

            return true;
        }

        function showNoResultsInZoneAlert() {
            if (noResultsInZoneAlert) {
                noResultsInZoneAlert.classList.remove('d-none');
            }
            if (btnInitialView) {
                btnInitialView.classList.add('highlight-pulse');
            }
            if (btnListInitialView) {
                btnListInitialView.classList.remove('d-none');
            }
        }

        function hideNoResultsInZoneAlert() {
            clearTimeout(noResultsAlertTimeout);
            if (noResultsInZoneAlert) {
                noResultsInZoneAlert.classList.add('d-none');
            }
            if (btnInitialView) {
                btnInitialView.classList.remove('highlight-pulse');
            }
        }

        function handleNoResultsInZoneAlert(data, options = {}) {
            clearTimeout(noResultsAlertTimeout);

            const count = data.count || (data.results ? data.results.length : 0);
            const hasQuery = Boolean(currentQuery && currentQuery.trim().length > 0);

            // Si la limite de 500 est atteinte, ce n'est pas une zone vide : masquer l'alerte de zone vide
            if (data.limit_reached) {
                hideNoResultsInZoneAlert();
                return;
            }

            // Si la recherche a retourné des résultats ou si aucune recherche textuelle n'est active, masquer l'alerte
            if (!hasQuery || count > 0) {
                hideNoResultsInZoneAlert();
                return;
            }

            // Si la vue correspond déjà à la bbox maximale, ne pas afficher l'alerte (recherche déjà globale)
            if (isAtMaxBbox()) {
                hideNoResultsInZoneAlert();
                return;
            }

            // Recherche sans résultat ET vue restreinte à une zone inférieure à la bbox maximale :
            if (options.fromSearchTyping) {
                // Petite latence pour lui permettre d'entrer suffisamment de caractères pour sa recherche
                if (currentQuery.trim().length < 2) {
                    hideNoResultsInZoneAlert();
                    return;
                }
                noResultsAlertTimeout = setTimeout(() => {
                    if (currentQuery && currentQuery.trim().length >= 2 && lastResults.length === 0 && !isAtMaxBbox()) {
                        showNoResultsInZoneAlert();
                    }
                }, 500);
            } else {
                // Soumission explicite (touche Entrée ou clic loupe) ou déplacement de carte
                showNoResultsInZoneAlert();
            }
        }

        // Retour à la vue initiale (toute la commune) tout en conservant la recherche et la thématique
        function returnToInitialView() {
            isBboxFiltered = false;
            currentBbox = null;
            hasSavedPosition = false;
            if (zoneIndicator) zoneIndicator.classList.add('d-none');
            hideNoResultsInZoneAlert();

            if (map) {
                isProgrammaticMove = true;
                map.flyTo({
                    center: defaultCenter,
                    zoom: defaultZoom,
                    essential: true
                });
            }

            saveState();
            fetchAndRenderAssets(false);
        }

        if (btnGlobalReset) {
            btnGlobalReset.addEventListener('click', resetAll);
        }
        if (btnResetFilters) {
            btnResetFilters.addEventListener('click', resetAll);
        }
        if (btnResetToInitialView) {
            btnResetToInitialView.addEventListener('click', returnToInitialView);
        }
        if (btnCloseNoResultsAlert) {
            btnCloseNoResultsAlert.addEventListener('click', hideNoResultsInZoneAlert);
        }
        if (btnInitialView) {
            btnInitialView.addEventListener('click', returnToInitialView);
        }
        if (btnListInitialView) {
            btnListInitialView.addEventListener('click', returnToInitialView);
        }

        // Clic sur l'indicateur de zone : élargir à toute la commune sans réinitialiser la recherche
        if (zoneIndicator) {
            zoneIndicator.addEventListener('click', returnToInitialView);
        }

        // 8. Filtres et événements
        // Chips thématiques (au moins une thématique obligatoire) : ne pas modifier la visualisation (zoom ou pan)
        thematicChips.forEach(chip => {
            chip.addEventListener('click', () => {
                thematicChips.forEach(c => c.classList.remove('active'));
                chip.classList.add('active');
                currentThematic = chip.dataset.thematic || '';
                closeBottomSheet();
                hideNoResultsInZoneAlert();
                saveState();
                // Conserver la boîte englobante si un filtrage spatial est actif, sans modifier le zoom ou pan
                fetchAndRenderAssets(isBboxFiltered);
            });
        });

        // Sélecteur Statut
        statusSelect.addEventListener('change', () => {
            currentStatus = statusSelect.value;
            closeBottomSheet();
            hideNoResultsInZoneAlert();
            saveState();
            fetchAndRenderAssets(isBboxFiltered);
        });

        // Champ de recherche : ne pas modifier la visualisation (zoom ou pan)
        function handleSearchInput() {
            currentQuery = searchInput.value.trim();
            if (currentQuery) {
                clearSearchBtn.classList.remove('d-none');
            } else {
                clearSearchBtn.classList.add('d-none');
            }
            hideNoResultsInZoneAlert();
            saveState();
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                closeBottomSheet();
                fetchAndRenderAssets(isBboxFiltered, { fromSearchTyping: true });
            }, 300);
        }

        searchInput.addEventListener('input', handleSearchInput);
        searchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                clearTimeout(searchTimeout);
                closeBottomSheet();
                saveState();
                fetchAndRenderAssets(isBboxFiltered, { isExplicitSubmit: true });
            }
        });

        clearSearchBtn.addEventListener('click', () => {
            searchInput.value = '';
            currentQuery = '';
            clearSearchBtn.classList.add('d-none');
            hideNoResultsInZoneAlert();
            closeBottomSheet();
            saveState();
            fetchAndRenderAssets(isBboxFiltered);
        });

        submitSearchBtn.addEventListener('click', () => {
            clearTimeout(searchTimeout);
            closeBottomSheet();
            saveState();
            fetchAndRenderAssets(isBboxFiltered, { isExplicitSubmit: true });
        });

        // Boutons Vue Carte / Liste
        btnViewMap.addEventListener('click', () => setView('map'));
        btnViewList.addEventListener('click', () => setView('list'));

        // Fonctions utilitaires
        function formatDistance(meters) {
            if (meters === null || meters === undefined) return '';
            if (meters < 1000) return `${Math.round(meters)} m`;
            return `${(meters / 1000).toFixed(1)} km`;
        }

        function escapeHtml(str) {
            if (!str) return '';
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');
        }

        // Initialisation globale
        function initApp() {
            updateHeaderOffset();

            // 1. Restaurer l'état sauvegardé ou paramètres URL
            const saved = loadSavedState();
            const urlParams = new URLSearchParams(window.location.search);

            // Priorité : URL > localStorage > défaut serveur
            if (urlParams.has('thematic')) {
                currentThematic = urlParams.get('thematic');
            } else if (saved && saved.thematic) {
                currentThematic = saved.thematic;
            }

            if (urlParams.has('status')) {
                currentStatus = urlParams.get('status');
            } else if (saved && saved.status !== undefined) {
                currentStatus = saved.status;
            }

            if (urlParams.has('q')) {
                currentQuery = urlParams.get('q');
            } else if (saved && saved.q !== undefined) {
                currentQuery = saved.q;
            }

            if (urlParams.has('view')) {
                currentView = urlParams.get('view');
            } else if (saved && saved.view) {
                currentView = saved.view;
            }

            if (saved) {
                if (saved.center && saved.zoom) {
                    startCenter = saved.center;
                    startZoom = saved.zoom;
                    hasSavedPosition = true;
                }
                if (saved.isBboxFiltered && saved.bbox) {
                    const parts = String(saved.bbox).split(',').map(Number);
                    if (parts.length === 4 && parts.every(isFinite)) {
                        if (Math.abs(parts[2] - parts[0]) > 0.0005 && Math.abs(parts[3] - parts[1]) > 0.0005) {
                            isBboxFiltered = true;
                            currentBbox = saved.bbox;
                        }
                    }
                }
            }

            // 2. Synchroniser les contrôles dans le DOM
            if (searchInput) {
                searchInput.value = currentQuery || '';
                if (currentQuery) {
                    clearSearchBtn.classList.remove('d-none');
                } else {
                    clearSearchBtn.classList.add('d-none');
                }
            }

            if (statusSelect) {
                statusSelect.value = currentStatus || '';
            }

            let foundChip = false;
            thematicChips.forEach(chip => {
                if (chip.dataset.thematic === currentThematic) {
                    chip.classList.add('active');
                    chip.scrollIntoView({ inline: 'nearest', behavior: 'smooth' });
                    foundChip = true;
                } else {
                    chip.classList.remove('active');
                }
            });

            // Si la thématique sauvegardée n'est pas accessible, sélectionner la première accessible
            if (!foundChip && thematicChips.length > 0) {
                currentThematic = thematicChips[0].dataset.thematic || '';
                thematicChips[0].classList.add('active');
            }

            initMap();
            setView(currentView);

            if (currentThematic) {
                fetchAndRenderAssets(isBboxFiltered);
            } else {
                resultsCountEl.textContent = '0';
                if (mapThematicPrompt) mapThematicPrompt.classList.remove('d-none');
                if (noThematicSelectedMessage) noThematicSelectedMessage.classList.remove('d-none');
            }
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initApp);
        } else {
            initApp();
        }
    })();
    </script>
{% endblock extra_scripts %}

{% block footer %}
{# Masquer le footer sur cette vue cartographique interactive pour préserver 100% de la hauteur d'écran #}
{% endblock footer %}

{% block script %}
{{ block.super }}
{% endblock script %}