feat: add exceptional transport dashboard widget with role-based access and map visualization

loko/assets/tests_exceptional_transport.py

@@ -254,3 +254,54 @@ class ExceptionalTransportTests(TestCase):
 
         folders_te = filter_folders_for_user(DocumentFolder.objects.all(), user_te_viewer)
         self.assertIn(te_folder, folders_te)
+
+    def test_exceptional_transport_geojson_endpoint(self):
+        # Set geometry on location
+        from django.contrib.gis.geos import MultiPolygon, Polygon
+        p = Polygon(((4.35, 50.84), (4.36, 50.84), (4.36, 50.85), (4.35, 50.85), (4.35, 50.84)))
+        p.srid = 4326
+        p.transform(3812)
+        self.location.geom = MultiPolygon(p, srid=3812)
+        self.location.save()
+
+        client = Client()
+        url = reverse("assets:structures_exceptional_transport_geojson")
+
+        # Anonymous / unauthenticated (redirects to login)
+        res = client.get(url)
+        self.assertIn(res.status_code, (302, 401, 403))
+
+        # User without TE profile
+        client.force_login(self.user_no_te)
+        res = client.get(url)
+        self.assertEqual(res.status_code, 200)
+        self.assertEqual(res.json()["features"], [])
+
+        # User with TE profile
+        client.force_login(self.user_te_viewer)
+        res = client.get(url)
+        self.assertEqual(res.status_code, 200)
+        data = res.json()
+        self.assertEqual(data["type"], "FeatureCollection")
+        self.assertEqual(len(data["features"]), 1)
+        feat = data["features"][0]
+        self.assertEqual(feat["properties"]["structure_code"], "OA-TEST-001")
+        self.assertEqual(feat["properties"]["fod_vnr"], 1234)
+        self.assertEqual(feat["properties"]["passage_status"], "conditional")
+
+    def test_home_widget_exceptional_transport_resolution(self):
+        from home.models import HomeWidget
+        widget = HomeWidget.objects.filter(widget_code="exceptional_transport").first()
+        self.assertIsNotNone(widget)
+
+        cfg_no_te = self.user_no_te.config
+        cfg_viewer = self.user_te_viewer.config
+
+        # User without profile should not resolve widget
+        res_no = widget.resolve_for_user(cfg_no_te, None, None)
+        self.assertIsNone(res_no)
+
+        # User with TE profile should resolve widget
+        res_yes = widget.resolve_for_user(cfg_viewer, None, None)
+        self.assertIsNotNone(res_yes)
+        self.assertEqual(res_yes["template_name"], "home/widgets/exceptional_transport.html")

loko/assets/urls.py

@@ -161,6 +161,7 @@ urlpatterns = [
     path('structures/locations/<int:location_id>/', structures.structures_locations_detail, name='structures_locations_detail'),
     path('structures/assets/', structures.structures_assets, name='structures_assets'),
     path('structures/assets/geojson/', structures.structures_assets_geojson, name='structures_assets_geojson'),
+    path('structures/exceptional-transport/geojson/', structures.structures_exceptional_transport_geojson, name='structures_exceptional_transport_geojson'),
     path('structures/structures/<int:structure_id>/edit-exceptional-transport/', structures.structures_edit_exceptional_transport, name='structures_edit_exceptional_transport'),
     path('structures/<str:asset_model>/<int:asset_id>/', structures.structures_assets_detail, name='structures_assets_detail'),
 

loko/assets/views/structures.py

@@ -3,6 +3,7 @@
 # ----------------
 
 from django.shortcuts import render, get_object_or_404, redirect
+from django.urls import reverse
 from django.http import JsonResponse, Http404
 from django.views.decorators.http import require_GET, require_POST
 from django.contrib.gis.db.models.functions import Transform, Distance
@@ -720,6 +721,96 @@ def structures_edit_exceptional_transport(request, structure_id):
         return JsonResponse({'success': False, 'errors': form.errors}, status=400)
 
 
+@require_GET
+def structures_exceptional_transport_geojson(request):
+    """Retourne l'ensemble des ouvrages avec données de transport exceptionnel au format GeoJSON."""
+    if not request.user.is_authenticated or not can_view_exceptional_transport(request.user):
+        return JsonResponse({'type': 'FeatureCollection', 'features': []})
+
+    te_list = (
+        StructureExceptionalTransport.objects
+        .select_related('structure', 'structure__main_location')
+        .all()
+    )
+
+    features = []
+    for te in te_list:
+        structure = te.structure
+        loc = structure.main_location
+        if not loc:
+            continue
+
+        lon, lat = None, None
+        if loc.geom:
+            try:
+                pt = loc.geom.centroid.transform(4326, clone=True)
+                lon = pt.x
+                lat = pt.y
+            except Exception:
+                pass
+        
+        if (lon is None or lat is None) and loc.lon and loc.lat:
+            try:
+                lon = float(loc.lon)
+                lat = float(loc.lat)
+            except (ValueError, TypeError):
+                pass
+
+        if lon is None or lat is None:
+            continue
+
+        detail_url = reverse('assets:structures_locations_detail', args=[loc.id])
+
+        h_str = ""
+        if te.clearance_height_left_m or te.clearance_height_center_m or te.clearance_height_right_m:
+            h_left = f"{te.clearance_height_left_m}m" if te.clearance_height_left_m else "-"
+            h_center = f"{te.clearance_height_center_m}m" if te.clearance_height_center_m else "-"
+            h_right = f"{te.clearance_height_right_m}m" if te.clearance_height_right_m else "-"
+            h_str = f"{h_left} / {h_center} / {h_right}"
+
+        features.append({
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Point',
+                'coordinates': [lon, lat]
+            },
+            'properties': {
+                'id': te.id,
+                'structure_id': structure.id,
+                'structure_code': structure.code or '',
+                'name': structure.get_name(),
+                'name_fr': structure.name_fr or '',
+                'name_nl': structure.name_nl or '',
+                'structure_type': structure.get_structure_type_display() if hasattr(structure, 'get_structure_type_display') else (structure.structure_type or ''),
+                'location_id': loc.id,
+                'location_code': loc.code or '',
+                'detail_url': detail_url,
+                'fod_vnr': te.fod_vnr,
+                'national_id': te.national_id or '',
+                'bridge_class': te.bridge_class or '',
+                'passage_status': te.passage_status,
+                'passage_status_display': str(te.get_passage_status_display()),
+                'max_authorized_weight_tonnes': float(te.max_authorized_weight_tonnes) if te.max_authorized_weight_tonnes is not None else None,
+                'min_guaranteed_capacity_tonnes': float(te.min_guaranteed_capacity_tonnes) if te.min_guaranteed_capacity_tonnes is not None else None,
+                'max_calculated_weight_tonnes': float(te.max_calculated_weight_tonnes) if te.max_calculated_weight_tonnes is not None else None,
+                'usable_width_m': float(te.usable_width_m) if te.usable_width_m is not None else None,
+                'clearance_heights_str': h_str,
+                'max_speed_kmh': te.max_speed_kmh,
+                'is_braking_forbidden': te.is_braking_forbidden,
+                'is_isolated_crossing_only': te.is_isolated_crossing_only,
+                'safety_distance_m': float(te.safety_distance_m) if te.safety_distance_m is not None else None,
+                'prescriptions_fr': te.prescriptions_fr or '',
+                'prescriptions_nl': te.prescriptions_nl or '',
+                'last_study_ref': te.last_study_ref or '',
+            }
+        })
+
+    return JsonResponse({
+        'type': 'FeatureCollection',
+        'features': features
+    })
+
+
 
 
 @check_thematic_access('structures') 

loko/home/migrations/0005_alter_homewidget_widget_code_and_more.py

@@ -0,0 +1,23 @@
+# Generated by Django 6.0.7 on 2026-08-21 09:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0004_alter_homewidget_widget_code'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homewidget',
+            name='widget_code',
+            field=models.CharField(choices=[('intervention_stats', 'Statistiques interventions'), ('contracts_summary', 'Résumé contrats'), ('map_today', 'Carte du jour'), ('operator_shortcuts', 'Raccourcis opérateur'), ('assets_links', 'Liens assets'), ('stock_summary', 'Résumé stock'), ('observer_shortcuts', 'Raccourcis observateur'), ('incident_counter', 'Compteur incidents à traiter'), ('intervention_to_verify', 'Compteur interventions à vérifier'), ('intervention_to_plan', 'Compteur interventions à planifier'), ('intervention_to_approve', 'Compteur interventions à approuver'), ('intervention_checked_to_approve', 'Compteur interventions vérifiées à approuver'), ('intervention_finished', 'Compteur interventions terminées'), ('intervention_on_pause', 'Compteur interventions en pause'), ('external_interventions', 'Interventions externes'), ('stock_actions', 'Actions stock'), ('exceptional_transport', 'Transport exceptionnel')], max_length=50, unique=True, verbose_name='Code du widget'),
+        ),
+        migrations.AlterField(
+            model_name='homewidgetcondition',
+            name='condition_type',
+            field=models.CharField(choices=[('role', 'Rôle'), ('team', 'Équipe'), ('contract', 'Contrat'), ('thematic', 'Thématique'), ('is_intern', 'Statut interne'), ('exceptional_transport', 'Profil Transport Exceptionnel')], max_length=50, verbose_name='Type de condition'),
+        ),
+    ]

loko/home/migrations/0006_create_exceptional_transport_widget.py

@@ -0,0 +1,44 @@
+from django.db import migrations
+
+
+def create_exceptional_transport_widget(apps, schema_editor):
+    HomeWidget = apps.get_model('home', 'HomeWidget')
+    HomeWidgetConditionGroup = apps.get_model('home', 'HomeWidgetConditionGroup')
+    HomeWidgetCondition = apps.get_model('home', 'HomeWidgetCondition')
+
+    widget, created = HomeWidget.objects.get_or_create(
+        widget_code='exceptional_transport',
+        defaults={'is_active': True}
+    )
+
+    if not widget.condition_groups.exists():
+        group = HomeWidgetConditionGroup.objects.create(
+            widget=widget,
+            label="Profil Transport Exceptionnel",
+            order=25,
+            col_width=12,
+            priority=0,
+            is_active=True
+        )
+        HomeWidgetCondition.objects.create(
+            group=group,
+            condition_type='exceptional_transport',
+            is_active=True,
+            is_negated=False
+        )
+
+
+def remove_exceptional_transport_widget(apps, schema_editor):
+    HomeWidget = apps.get_model('home', 'HomeWidget')
+    HomeWidget.objects.filter(widget_code='exceptional_transport').delete()
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0005_alter_homewidget_widget_code_and_more'),
+    ]
+
+    operations = [
+        migrations.RunPython(create_exceptional_transport_widget, remove_exceptional_transport_widget),
+    ]

loko/home/models.py

@@ -20,6 +20,7 @@ WIDGET_CODE_CHOICES = [
     ('intervention_on_pause', _('Compteur interventions en pause')),
     ('external_interventions', _('Interventions externes')),
     ('stock_actions', _('Actions stock')),
+    ('exceptional_transport', _('Transport exceptionnel')),
 ]
 
 # Condition type choices
@@ -29,6 +30,7 @@ CONDITION_TYPE_CHOICES = [
     ('contract', _('Contrat')),
     ('thematic', _('Thématique')),
     ('is_intern', _('Statut interne')),
+    ('exceptional_transport', _('Profil Transport Exceptionnel')),
 ]
 
 
@@ -221,7 +223,7 @@ class HomeWidgetCondition(models.Model):
         verbose_name=_("Groupe")
     )
     condition_type = models.CharField(
-        max_length=20,
+        max_length=50,
         choices=CONDITION_TYPE_CHOICES,
         verbose_name=_("Type de condition")
     )
@@ -330,6 +332,9 @@ class HomeWidgetCondition(models.Model):
         
         elif self.condition_type == 'is_intern':
             res = user_config.is_intern == self.is_intern
+
+        elif self.condition_type == 'exceptional_transport':
+            res = bool(user_config.user.is_superuser or user_config.has_exceptional_transport_profile)
         
         else:
             res = False

loko/home/templates/home/widgets/exceptional_transport.html

@@ -0,0 +1,647 @@
+{% load i18n %}
+{% load static %}
+
+<div class="card section-card shadow-sm border-0 rounded-4 overflow-hidden mb-4" id="exceptional-transport-widget">
+    <!-- Header -->
+    <div class="card-header bg-white border-bottom py-3 px-4 d-flex flex-wrap justify-content-between align-items-center gap-2">
+        <div class="d-flex align-items-center gap-2">
+            <div class="rounded-3 p-2 d-flex align-items-center justify-content-center" style="background-color: #e8f4fd; color: #007bc5; width: 42px; height: 42px;">
+                <i class="bi bi-truck-front-fill fs-5"></i>
+            </div>
+            <div class="text-start">
+                <h5 class="card-title fw-bold mb-0 text-dark">
+                    {% translate "Transport Exceptionnel & Convois Lourds" %}
+                </h5>
+                <small class="text-muted">
+                    {% translate "Cartographie du réseau d'ouvrages d'art et conditions d'admissibilité" %}
+                </small>
+            </div>
+        </div>
+
+        <div class="d-flex align-items-center gap-2">
+            <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-semibold" id="te-total-badge">
+                <i class="bi bi-geo-alt-fill me-1"></i><span id="te-total-count">0</span> {% translate "ouvrages répertoriés" %}
+            </span>
+            <a href="{% url 'assets:structures_index' %}" class="btn btn-outline-secondary btn-sm rounded-pill px-3 py-1 fw-medium" title="{% translate 'Voir tous les ouvrages d\'art' %}">
+                <i class="bi bi-arrow-right me-1"></i>{% translate "Tous les ouvrages" %}
+            </a>
+        </div>
+    </div>
+
+    <!-- Body -->
+    <div class="card-body p-3 p-md-4">
+        <!-- Controls Bar: Search & Status Filters -->
+        <div class="row g-2 align-items-center mb-3">
+            <!-- Search Autocomplete -->
+            <div class="col-12 col-lg-6 position-relative">
+                <div class="input-group shadow-sm rounded-pill overflow-hidden border">
+                    <span class="input-group-text bg-white border-0 ps-3 text-muted">
+                        <i class="bi bi-search"></i>
+                    </span>
+                    <input type="text"
+                           id="te-search-input"
+                           class="form-control border-0 py-2 shadow-none"
+                           placeholder="{% translate 'Rechercher un ouvrage (code ex: OA120, nom, n° FOD, BKL...)' %}"
+                           autocomplete="off">
+                    <button class="btn btn-white border-0 pe-3 text-muted d-none" type="button" id="te-search-clear" title="{% translate 'Effacer la recherche' %}">
+                        <i class="bi bi-x-circle-fill"></i>
+                    </button>
+                </div>
+                <!-- Autocomplete Dropdown List -->
+                <div id="te-autocomplete-dropdown"
+                     class="list-group position-absolute w-100 shadow-lg rounded-3 mt-1 overflow-auto border-0 d-none"
+                     style="max-height: 320px; z-index: 1060; left: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);">
+                </div>
+            </div>
+
+            <!-- Status Filter Chips -->
+            <div class="col-12 col-lg-6">
+                <div class="d-flex flex-wrap gap-1 justify-content-lg-end" id="te-status-filters">
+                    <button type="button" class="btn btn-sm btn-dark rounded-pill px-3 py-1 te-filter-btn active" data-status="all">
+                        {% translate "Tous" %} (<span id="te-count-all">0</span>)
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-success rounded-pill px-2 py-1 te-filter-btn" data-status="authorized">
+                        <i class="bi bi-check-circle-fill me-1"></i>{% translate "Autorisé" %} (<span id="te-count-authorized">0</span>)
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-warning rounded-pill px-2 py-1 te-filter-btn text-dark" data-status="conditional">
+                        <i class="bi bi-exclamation-triangle-fill me-1 text-warning"></i>{% translate "Sous conditions" %} (<span id="te-count-conditional">0</span>)
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-2 py-1 te-filter-btn" data-status="other">
+                        {% translate "Autres" %} (<span id="te-count-other">0</span>)
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Map Container -->
+        <div class="position-relative rounded-4 overflow-hidden border shadow-inner" style="height: 540px;">
+            <div id="te-map-container" style="width: 100%; height: 100%;"></div>
+
+            <!-- Floating Map Controls Overlay (Top Right) -->
+            <div class="position-absolute top-0 end-0 m-3 d-flex flex-column gap-2" style="z-index: 5;">
+                <button type="button" class="btn btn-light btn-sm shadow-sm rounded-3 border" id="te-btn-reset-view" title="{% translate 'Réinitialiser la vue' %}">
+                    <i class="bi bi-arrows-fullscreen"></i>
+                </button>
+            </div>
+
+            <!-- Floating Legend (Bottom Left) -->
+            <div class="position-absolute bottom-0 start-0 m-3 p-2 px-3 rounded-3 shadow-sm border bg-white bg-opacity-95 text-start"
+                 style="z-index: 5; font-size: 0.8rem; max-width: 280px; backdrop-filter: blur(8px);">
+                <div class="fw-bold mb-1 text-secondary text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">
+                    {% translate "Statut de passage" %}
+                </div>
+                <div class="d-flex flex-column gap-1">
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #198754; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
+                        <span>{% translate "Autorisé (standard / calculé)" %}</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #ffc107; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
+                        <span>{% translate "Sous conditions / prescriptions" %}</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #fd7e14; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
+                        <span>{% translate "Étude préalable requise" %}</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #dc3545; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
+                        <span>{% translate "Interdit" %}</span>
+                    </div>
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="rounded-circle d-inline-block" style="width: 12px; height: 12px; background-color: #6c757d; border: 2px solid white; box-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
+                        <span>{% translate "Non évalué" %}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Loading Spinner Overlay -->
+            <div id="te-map-loading" class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-white bg-opacity-75" style="z-index: 10;">
+                <div class="text-center">
+                    <div class="spinner-border text-primary" role="status">
+                        <span class="visually-hidden">{% translate "Chargement..." %}</span>
+                    </div>
+                    <div class="small fw-semibold text-secondary mt-2">{% translate "Chargement du réseau d'ouvrages..." %}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Custom Styles for Popup and Autocomplete -->
+<style>
+.te-popup .maplibregl-popup-content {
+    padding: 0;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+    border: none;
+    overflow: hidden;
+    max-width: 360px;
+    width: 340px;
+}
+.te-popup .maplibregl-popup-close-button {
+    font-size: 1.2rem;
+    color: #495057;
+    padding: 6px 10px;
+    z-index: 10;
+}
+.te-autocomplete-item {
+    cursor: pointer;
+    transition: background-color 0.15s ease-in-out;
+}
+.te-autocomplete-item:hover, .te-autocomplete-item.active {
+    background-color: #f1f8ff !important;
+}
+.te-metric-box {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 6px 10px;
+    text-align: center;
+}
+</style>
+
+<!-- Widget Logic -->
+<script>
+(function() {
+    const GEOJSON_URL = "{% url 'assets:structures_exceptional_transport_geojson' %}";
+    let teMap = null;
+    let teFeatures = [];
+    let activeFilter = 'all';
+    let currentPopup = null;
+
+    const STATUS_COLORS = {
+        'authorized': '#198754',
+        'conditional': '#ffc107',
+        'prior_study_required': '#fd7e14',
+        'forbidden': '#dc3545',
+        'not_evaluated': '#6c757d'
+    };
+
+    function initExceptionalTransportWidget() {
+        const container = document.getElementById('te-map-container');
+        if (!container) return;
+
+        // Map initialization
+        teMap = new maplibregl.Map({
+            container: 'te-map-container',
+            style: window.MAP_STYLE_LIGHT || 'https://tiles.openfreemap.org/styles/positron',
+            center: window.MAP_DEFAULT_CENTER || [4.3572, 50.8477],
+            zoom: window.MAP_DEFAULT_ZOOM || 11.5,
+            minzoom: 8,
+            maxzoom: 20
+        });
+
+        teMap.addControl(new maplibregl.NavigationControl({ showCompass: true }), 'top-left');
+
+        teMap.on('load', async () => {
+            try {
+                const response = await fetch(GEOJSON_URL);
+                const data = await response.json();
+                teFeatures = (data && data.features) ? data.features : [];
+
+                updateCounts();
+                renderMapLayers();
+                setupSearchAutocomplete();
+                setupStatusFilters();
+                setupResetButton();
+
+                const loadingEl = document.getElementById('te-map-loading');
+                if (loadingEl) loadingEl.classList.add('d-none');
+            } catch (err) {
+                console.error("Error loading Exceptional Transport GeoJSON:", err);
+                const loadingEl = document.getElementById('te-map-loading');
+                if (loadingEl) {
+                    loadingEl.innerHTML = `<div class="text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>Impossible de charger les données cartographiques.</div>`;
+                }
+            }
+        });
+    }
+
+    function updateCounts() {
+        let total = teFeatures.length;
+        let auth = 0, cond = 0, other = 0;
+
+        teFeatures.forEach(f => {
+            const st = f.properties.passage_status;
+            if (st === 'authorized') auth++;
+            else if (st === 'conditional') cond++;
+            else other++;
+        });
+
+        const elTotal = document.getElementById('te-total-count');
+        if (elTotal) elTotal.textContent = total;
+        const elAll = document.getElementById('te-count-all');
+        if (elAll) elAll.textContent = total;
+        const elAuth = document.getElementById('te-count-authorized');
+        if (elAuth) elAuth.textContent = auth;
+        const elCond = document.getElementById('te-count-conditional');
+        if (elCond) elCond.textContent = cond;
+        const elOther = document.getElementById('te-count-other');
+        if (elOther) elOther.textContent = other;
+    }
+
+    function renderMapLayers() {
+        if (!teMap) return;
+
+        const geojsonData = {
+            type: 'FeatureCollection',
+            features: teFeatures
+        };
+
+        teMap.addSource('te-structures', {
+            type: 'geojson',
+            data: geojsonData
+        });
+
+        // Outer glow layer
+        teMap.addLayer({
+            id: 'te-structures-glow',
+            type: 'circle',
+            source: 'te-structures',
+            paint: {
+                'circle-radius': ['interpolate', ['linear'], ['zoom'], 10, 8, 16, 18],
+                'circle-color': [
+                    'match',
+                    ['get', 'passage_status'],
+                    'authorized', STATUS_COLORS.authorized,
+                    'conditional', STATUS_COLORS.conditional,
+                    'prior_study_required', STATUS_COLORS.prior_study_required,
+                    'forbidden', STATUS_COLORS.forbidden,
+                    STATUS_COLORS.not_evaluated
+                ],
+                'circle-opacity': 0.25,
+                'circle-blur': 0.4
+            }
+        });
+
+        // Main circle points layer
+        teMap.addLayer({
+            id: 'te-structures-circles',
+            type: 'circle',
+            source: 'te-structures',
+            paint: {
+                'circle-radius': ['interpolate', ['linear'], ['zoom'], 10, 6, 16, 12],
+                'circle-color': [
+                    'match',
+                    ['get', 'passage_status'],
+                    'authorized', STATUS_COLORS.authorized,
+                    'conditional', STATUS_COLORS.conditional,
+                    'prior_study_required', STATUS_COLORS.prior_study_required,
+                    'forbidden', STATUS_COLORS.forbidden,
+                    STATUS_COLORS.not_evaluated
+                ],
+                'circle-stroke-width': 2,
+                'circle-stroke-color': '#ffffff',
+                'circle-opacity': 0.95
+            }
+        });
+
+        // Cursor pointer
+        teMap.on('mouseenter', 'te-structures-circles', () => {
+            teMap.getCanvas().style.cursor = 'pointer';
+        });
+        teMap.on('mouseleave', 'te-structures-circles', () => {
+            teMap.getCanvas().style.cursor = '';
+        });
+
+        // Click handler with multi-structure grouping
+        teMap.on('click', 'te-structures-circles', (e) => {
+            if (!e.features || !e.features.length) return;
+            
+            // Query features in small buffer for stacked structures
+            const bbox = [
+                [e.point.x - 8, e.point.y - 8],
+                [e.point.x + 8, e.point.y + 8]
+            ];
+            const clickedFeatures = teMap.queryRenderedFeatures(bbox, { layers: ['te-structures-circles'] });
+            
+            // De-duplicate features by structure_id
+            const uniqueFeatures = [];
+            const seenIds = new Set();
+            (clickedFeatures.length ? clickedFeatures : e.features).forEach(f => {
+                const sid = f.properties.structure_id;
+                if (!seenIds.has(sid)) {
+                    seenIds.add(sid);
+                    uniqueFeatures.push(f);
+                }
+            });
+
+            openPopupForFeatures(uniqueFeatures, e.lngLat);
+        });
+    }
+
+    function openPopupForFeatures(features, lngLat) {
+        if (currentPopup) currentPopup.remove();
+
+        let html = '';
+        if (features.length === 1) {
+            html = buildSingleStructurePopupHtml(features[0].properties);
+        } else {
+            html = buildMultiStructurePopupHtml(features);
+        }
+
+        currentPopup = new maplibregl.Popup({
+            className: 'te-popup',
+            closeButton: true,
+            closeOnClick: true,
+            maxWidth: '360px',
+            offset: 12
+        })
+        .setLngLat(lngLat)
+        .setHTML(html)
+        .addTo(teMap);
+    }
+
+    function buildSingleStructurePopupHtml(p) {
+        const statusBadge = getStatusBadgeHtml(p.passage_status, p.passage_status_display);
+        
+        let metricsHtml = '<div class="row g-2 mb-2">';
+        metricsHtml += `
+            <div class="col-6">
+                <div class="te-metric-box">
+                    <div class="small text-muted" style="font-size: 0.7rem;">Poids max autorisé</div>
+                    <div class="fw-bold text-dark">${p.max_authorized_weight_tonnes ? p.max_authorized_weight_tonnes + ' t' : (p.max_calculated_weight_tonnes ? p.max_calculated_weight_tonnes + ' t (calc)' : '-')}</div>
+                </div>
+            </div>
+            <div class="col-6">
+                <div class="te-metric-box">
+                    <div class="small text-muted" style="font-size: 0.7rem;">Classe de pont (BKL)</div>
+                    <div class="fw-bold text-dark text-truncate" title="${p.bridge_class || '-'}">${p.bridge_class || '-'}</div>
+                </div>
+            </div>
+        `;
+        if (p.usable_width_m || p.clearance_heights_str) {
+            metricsHtml += `
+                <div class="col-6">
+                    <div class="te-metric-box">
+                        <div class="small text-muted" style="font-size: 0.7rem;">Largeur utile</div>
+                        <div class="fw-bold text-dark">${p.usable_width_m ? p.usable_width_m + ' m' : '-'}</div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="te-metric-box">
+                        <div class="small text-muted" style="font-size: 0.7rem;">Hauteurs (G/C/D)</div>
+                        <div class="fw-bold text-dark text-truncate" title="${p.clearance_heights_str || '-'}">${p.clearance_heights_str || '-'}</div>
+                    </div>
+                </div>
+            `;
+        }
+        metricsHtml += '</div>';
+
+        // Restrictions badges
+        let restrictionsBadges = '';
+        if (p.max_speed_kmh) {
+            restrictionsBadges += `<span class="badge bg-warning text-dark me-1 mb-1"><i class="bi bi-speedometer2 me-1"></i>Max ${p.max_speed_kmh} km/h</span>`;
+        }
+        if (p.is_braking_forbidden) {
+            restrictionsBadges += `<span class="badge bg-danger me-1 mb-1"><i class="bi bi-slash-circle me-1"></i>Freinage interdit</span>`;
+        }
+        if (p.is_isolated_crossing_only) {
+            restrictionsBadges += `<span class="badge bg-info text-dark me-1 mb-1"><i class="bi bi-person-slash me-1"></i>Convoi seul</span>`;
+        }
+
+        // Prescriptions excerpt
+        let prescText = p.prescriptions_fr || p.prescriptions_nl || '';
+        let prescHtml = '';
+        if (prescText) {
+            let shortPresc = prescText.length > 130 ? prescText.substring(0, 130) + '...' : prescText;
+            prescHtml = `
+                <div class="alert alert-light border p-2 mb-2 text-start" style="font-size: 0.75rem; max-height: 80px; overflow-y: auto;">
+                    <div class="fw-bold text-secondary mb-1"><i class="bi bi-card-text me-1"></i>Prescriptions :</div>
+                    ${shortPresc}
+                </div>
+            `;
+        }
+
+        return `
+            <div class="card border-0 shadow-none">
+                <div class="card-header bg-light border-bottom p-3 text-start">
+                    <div class="d-flex justify-content-between align-items-center mb-1">
+                        <span class="badge bg-secondary">${p.structure_code}</span>
+                        ${p.fod_vnr ? `<span class="small text-muted">FOD n°${p.fod_vnr}</span>` : ''}
+                    </div>
+                    <div class="fw-bold text-dark" style="font-size: 0.95rem; line-height: 1.2;">
+                        ${p.name || p.name_fr || p.structure_code}
+                    </div>
+                    <div class="mt-2">${statusBadge}</div>
+                </div>
+                <div class="card-body p-3">
+                    ${metricsHtml}
+                    ${restrictionsBadges ? `<div class="mb-2 text-start">${restrictionsBadges}</div>` : ''}
+                    ${prescHtml}
+                    <a href="${p.detail_url}" class="btn btn-primary btn-sm w-100 rounded-pill fw-semibold mt-1">
+                        <i class="bi bi-box-arrow-up-right me-1"></i>{% translate "Ouvrir la fiche de l'ouvrage" %}
+                    </a>
+                </div>
+            </div>
+        `;
+    }
+
+    function buildMultiStructurePopupHtml(features) {
+        let itemsHtml = '';
+        features.forEach((f, idx) => {
+            const p = f.properties;
+            const statusBadge = getStatusBadgeHtml(p.passage_status, p.passage_status_display);
+            itemsHtml += `
+                <div class="border-bottom pb-2 mb-2 text-start ${idx > 0 ? 'pt-2' : ''}">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <span class="badge bg-secondary me-1">${p.structure_code}</span>
+                        ${statusBadge}
+                    </div>
+                    <div class="fw-bold text-dark small mt-1">${p.name || p.name_fr}</div>
+                    <div class="d-flex justify-content-between align-items-center mt-2">
+                        <span class="small text-muted">Poids: <strong>${p.max_authorized_weight_tonnes ? p.max_authorized_weight_tonnes + 't' : '-'}</strong></span>
+                        <a href="${p.detail_url}" class="btn btn-sm btn-outline-primary py-0 px-2 rounded-pill" style="font-size: 0.75rem;">
+                            {% translate "Détail" %} <i class="bi bi-arrow-right"></i>
+                        </a>
+                    </div>
+                </div>
+            `;
+        });
+
+        return `
+            <div class="card border-0 shadow-none">
+                <div class="card-header bg-light border-bottom p-2 px-3 text-start">
+                    <div class="fw-bold text-dark" style="font-size: 0.85rem;">
+                        <i class="bi bi-layers-fill text-primary me-1"></i>${features.length} {% translate "ouvrages à cet endroit" %}
+                    </div>
+                </div>
+                <div class="card-body p-3" style="max-height: 280px; overflow-y: auto;">
+                    ${itemsHtml}
+                </div>
+            </div>
+        `;
+    }
+
+    function getStatusBadgeHtml(status, display) {
+        let colorClass = 'bg-secondary';
+        let icon = 'bi-question-circle';
+        if (status === 'authorized') {
+            colorClass = 'bg-success';
+            icon = 'bi-check-circle-fill';
+        } else if (status === 'conditional') {
+            colorClass = 'bg-warning text-dark';
+            icon = 'bi-exclamation-triangle-fill';
+        } else if (status === 'prior_study_required') {
+            colorClass = 'bg-orange text-white' ;
+            icon = 'bi-journal-text';
+        } else if (status === 'forbidden') {
+            colorClass = 'bg-danger';
+            icon = 'bi-slash-circle-fill';
+        }
+        return `<span class="badge ${colorClass} py-1 px-2"><i class="bi ${icon} me-1"></i>${display || status}</span>`;
+    }
+
+    function setupSearchAutocomplete() {
+        const input = document.getElementById('te-search-input');
+        const clearBtn = document.getElementById('te-search-clear');
+        const dropdown = document.getElementById('te-autocomplete-dropdown');
+        if (!input || !dropdown) return;
+
+        input.addEventListener('input', () => {
+            const query = input.value.trim().toLowerCase();
+            if (clearBtn) {
+                if (query.length > 0) clearBtn.classList.remove('d-none');
+                else clearBtn.classList.add('d-none');
+            }
+
+            if (query.length < 1) {
+                dropdown.classList.add('d-none');
+                dropdown.innerHTML = '';
+                return;
+            }
+
+            // Filter features
+            const matches = teFeatures.filter(f => {
+                if (activeFilter !== 'all') {
+                    const st = f.properties.passage_status;
+                    if (activeFilter === 'authorized' && st !== 'authorized') return false;
+                    if (activeFilter === 'conditional' && st !== 'conditional') return false;
+                    if (activeFilter === 'other' && (st === 'authorized' || st === 'conditional')) return false;
+                }
+
+                const p = f.properties;
+                const code = (p.structure_code || '').toLowerCase();
+                const nameFr = (p.name_fr || '').toLowerCase();
+                const nameNl = (p.name_nl || '').toLowerCase();
+                const vnr = p.fod_vnr ? String(p.fod_vnr) : '';
+                const bkl = (p.bridge_class || '').toLowerCase();
+
+                return code.includes(query) || nameFr.includes(query) || nameNl.includes(query) || vnr.includes(query) || bkl.includes(query);
+            }).slice(0, 8);
+
+            if (matches.length === 0) {
+                dropdown.innerHTML = `<div class="p-3 text-muted small text-center">{% translate "Aucun ouvrage correspondant trouvé" %}</div>`;
+                dropdown.classList.remove('d-none');
+                return;
+            }
+
+            let html = '';
+            matches.forEach(f => {
+                const p = f.properties;
+                const statusBadge = getStatusBadgeHtml(p.passage_status, p.passage_status_display);
+                html += `
+                    <button type="button" class="list-group-item list-group-item-action te-autocomplete-item p-2 px-3 border-bottom text-start" data-structure-id="${p.structure_id}">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="badge bg-secondary">${p.structure_code}</span>
+                            ${statusBadge}
+                        </div>
+                        <div class="fw-bold text-dark small mt-1 text-truncate">${p.name || p.name_fr}</div>
+                        <div class="small text-muted d-flex justify-content-between mt-1" style="font-size: 0.75rem;">
+                            <span>${p.fod_vnr ? 'FOD: ' + p.fod_vnr : ''}</span>
+                            <span>Poids: ${p.max_authorized_weight_tonnes ? p.max_authorized_weight_tonnes + 't' : (p.max_calculated_weight_tonnes ? p.max_calculated_weight_tonnes + 't' : '-')}</span>
+                        </div>
+                    </button>
+                `;
+            });
+
+            dropdown.innerHTML = html;
+            dropdown.classList.remove('d-none');
+
+            // Add click listeners to items
+            dropdown.querySelectorAll('.te-autocomplete-item').forEach(item => {
+                item.addEventListener('click', () => {
+                    const sid = parseInt(item.getAttribute('data-structure-id'));
+                    const selected = teFeatures.find(f => f.properties.structure_id === sid);
+                    if (selected && teMap) {
+                        const coords = selected.geometry.coordinates;
+                        teMap.flyTo({
+                            center: coords,
+                            zoom: 16,
+                            speed: 1.2
+                        });
+                        openPopupForFeatures([selected], coords);
+                    }
+                    dropdown.classList.add('d-none');
+                });
+            });
+        });
+
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                input.value = '';
+                clearBtn.classList.add('d-none');
+                dropdown.classList.add('d-none');
+                dropdown.innerHTML = '';
+            });
+        }
+
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!input.contains(e.target) && !dropdown.contains(e.target)) {
+                dropdown.classList.add('d-none');
+            }
+        });
+    }
+
+    function setupStatusFilters() {
+        const filterBtns = document.querySelectorAll('.te-filter-btn');
+        filterBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                filterBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                activeFilter = btn.getAttribute('data-status');
+
+                if (!teMap || !teMap.getLayer('te-structures-circles')) return;
+
+                let filterExpr = null;
+                if (activeFilter === 'authorized') {
+                    filterExpr = ['==', ['get', 'passage_status'], 'authorized'];
+                } else if (activeFilter === 'conditional') {
+                    filterExpr = ['==', ['get', 'passage_status'], 'conditional'];
+                } else if (activeFilter === 'other') {
+                    filterExpr = ['all',
+                        ['!=', ['get', 'passage_status'], 'authorized'],
+                        ['!=', ['get', 'passage_status'], 'conditional']
+                    ];
+                }
+
+                teMap.setFilter('te-structures-circles', filterExpr);
+                teMap.setFilter('te-structures-glow', filterExpr);
+
+                if (currentPopup) currentPopup.remove();
+            });
+        });
+    }
+
+    function setupResetButton() {
+        const resetBtn = document.getElementById('te-btn-reset-view');
+        if (resetBtn) {
+            resetBtn.addEventListener('click', () => {
+                if (teMap) {
+                    teMap.flyTo({
+                        center: window.MAP_DEFAULT_CENTER || [4.3572, 50.8477],
+                        zoom: window.MAP_DEFAULT_ZOOM || 11.5
+                    });
+                }
+            });
+        }
+    }
+
+    // Auto-init on DOMContentLoaded or immediate if DOM already ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initExceptionalTransportWidget);
+    } else {
+        initExceptionalTransportWidget();
+    }
+})();
+</script>