/* Feuille de style principale de l'app (ex-bloc <style> inline d'index.html).
 *
 * Déplacée telle quelle, sans une ligne modifiée : ce bloc de 9 200 lignes
 * représentait 76 % d'index.html. Le mouvement est purement mécanique pour que
 * la cascade soit inchangée — d'où le lien placé APRÈS variables/layout/
 * components/map/pwa dans le <head>, exactement là où le bloc inline se
 * trouvait. Ces règles gagnent donc toujours les égalités de spécificité
 * contre les cinq feuilles précédentes (cf. le cas connu de
 * `components.css .btn:hover` battu ici).
 *
 * À découper progressivement par domaine (un domaine = un commit), sans
 * jamais changer l'ordre relatif des règles.
 */
        :root {
            --mobile-vvh: 100dvh;
            --mobile-kb-inset: 0px;
            /* Memes rayons que la console admin : les deux surfaces du produit
               doivent parler la meme langue. */
            --radius: 14px;
            --radius-sm: 10px;
        }

        [data-theme="dark"] {
            /* --success, --danger et --warning etaient utilises 9 fois sans
               etre definis : les regles concernees n'avaient aucune couleur. */
            --accent-soft: rgba(96, 165, 250, 0.16);
            --danger: #F87171;
            --danger-soft: rgba(248, 113, 113, 0.16);
            --warning: #FBBF24;
            --warning-soft: rgba(251, 191, 36, 0.14);
            --success: #4ADE80;
            --success-soft: rgba(74, 222, 128, 0.14);
            /* Surface en creux DANS une carte. Opaque volontairement : l'en-tete
               du tableau et sa colonne d'actions sont sticky, les lignes
               defileraient visiblement dessous. */
            --panel-inset: #1B2740;
            --border-soft: rgba(150, 180, 225, 0.12);
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
            --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
            --bg-primary: #1a1a2e;
            --bg-secondary: #16213e;
            --bg-tertiary: #0f3460;
            --text-primary: #e0e0e0;
            --text-secondary: #adb5bd;
            --text-muted: #9aa6b4;
            --border: #2d3748;
            --accent: #4dabf7;
            --accent-hover: #339af0;
            --accent-light: #1a365d;
            --card-shadow: 0 1px 3px rgba(0,0,0,0.3);
            --header-bg: #0a0f1a;
            --popup-bg: #1a1a2e;
            --popup-text: #e0e0e0;
            --map-surface: rgba(13, 20, 35, 0.9);
            --map-surface-strong: rgba(9, 15, 28, 0.95);
            --map-surface-soft: rgba(32, 47, 76, 0.74);
            --map-surface-hover: rgba(36, 54, 86, 0.9);
            --map-credit-bg: rgba(9, 14, 26, 0.82);
            --map-credit-border: rgba(148, 163, 184, 0.26);
        }

        /* Light theme variables (used when <html data-theme="light">) */
        [data-theme="light"] {
            /* Couleurs d'etat reprises telles quelles de frontend/admin.html. */
            --accent-soft: rgba(11, 87, 176, 0.10);
            --danger: #C4283C;
            --danger-soft: rgba(196, 40, 60, 0.10);
            --warning: #B45309;
            --warning-soft: rgba(180, 83, 9, 0.12);
            --success: #1E7A4F;
            --success-soft: rgba(30, 122, 79, 0.12);
            /* On ne reutilise pas --bg-secondary : dans l'app il vaut #ffffff. */
            --panel-inset: #F1F5FC;
            --border-soft: rgba(20, 45, 80, 0.08);
            --shadow: 0 10px 30px rgba(18, 44, 92, 0.10);
            --shadow-sm: 0 4px 14px rgba(18, 44, 92, 0.07);
            --bg-primary: #ffffff;
            --bg-secondary: #ffffff;
            --bg-tertiary: #f7f7f9;
            --text-primary: #14253F; /* navy ink — aligned with landing */
            --text-secondary: #50637e;
            --text-muted: #57616f;
            --border: #dbe3ef; /* light border — aligned with landing */
            --accent: #0B57B0; /* primary accent — aligned with landing blue */
            --accent-hover: #0b63d4;
            --accent-light: #e3edfa;
            --card-shadow: 0 1px 3px rgba(2,6,23,0.06);
            --header-bg: #ffffff;
            --header-text: #0f1724;
            --popup-bg: #ffffff;
            --popup-text: #0f1724;
            --map-surface: rgba(255,255,255,0.96);
            --map-surface-strong: rgba(255,255,255,0.98);
            --map-surface-soft: rgba(255,255,255,0.6);
            --map-surface-hover: #ffffff;
            --map-credit-bg: rgba(255, 255, 255, 0.82);
            --map-credit-border: rgba(0, 0, 0, 0.08);
        }

        /* Visual style switch (modern vs classic fallback) */
        [data-design="modern"] .header {
            border-bottom: 1px solid rgba(11, 94, 183, 0.14);
            background: linear-gradient(180deg, rgba(248, 252, 255, 0.98) 0%, rgba(237, 245, 255, 0.96) 100%);
            backdrop-filter: blur(10px);
        }
        [data-theme="dark"][data-design="modern"] .header {
            border-bottom-color: rgba(77, 171, 247, 0.26);
            background: linear-gradient(180deg, rgba(8, 16, 31, 0.98) 0%, rgba(10, 24, 45, 0.96) 100%);
        }
        [data-design="modern"] .settings-modal,
        [data-design="modern"] .help-modal-content,
        [data-design="modern"] .nav-panel,
        [data-design="modern"] .nav-bottom-panel,
        [data-design="modern"] .map-bottom-bar,
        [data-design="modern"] .route-compact {
            border-radius: 14px;
            box-shadow: 0 18px 38px rgba(2, 6, 23, 0.2);
        }
        [data-design="classic"] .header {
            border-bottom: 0;
            background: var(--header-bg);
            backdrop-filter: none;
        }
        [data-design="classic"] .settings-modal,
        [data-design="classic"] .help-modal-content,
        [data-design="classic"] .nav-panel,
        [data-design="classic"] .nav-bottom-panel,
        [data-design="classic"] .map-bottom-bar,
        [data-design="classic"] .route-compact {
            border-radius: 8px;
            box-shadow: var(--card-shadow);
        }

        /* Modern light UI alignment with landing style (keeps classic fallback intact) */
        [data-theme="light"][data-design="modern"] body {
            background:
                radial-gradient(980px 420px at -8% -14%, rgba(90, 156, 255, 0.18) 0%, rgba(90, 156, 255, 0) 72%),
                radial-gradient(720px 340px at 108% 4%, rgba(31, 196, 136, 0.14) 0%, rgba(31, 196, 136, 0) 74%),
                linear-gradient(180deg, #f5f8ff 0%, #eaf1fb 100%);
        }
        [data-theme="light"][data-design="modern"] .main {
            background: transparent;
        }
        [data-theme="light"][data-design="modern"] .sidebar {
            background: linear-gradient(180deg, rgba(252, 254, 255, 0.96) 0%, rgba(239, 246, 255, 0.94) 100%);
            border-right: 1px solid rgba(23, 56, 112, 0.16);
            box-shadow: 10px 0 30px rgba(14, 41, 86, 0.08);
        }
        [data-theme="light"][data-design="modern"] .sidebar-tabs {
            background: rgba(255, 255, 255, 0.72);
            border-bottom-color: rgba(23, 56, 112, 0.14);
            backdrop-filter: blur(8px);
        }
        [data-theme="light"][data-design="modern"] .sidebar-tab {
            border-bottom-width: 2px;
            border-bottom-color: transparent;
            color: #44546f;
        }
        [data-theme="light"][data-design="modern"] .sidebar-tab:hover {
            background: rgba(11, 94, 183, 0.08);
            color: #123f7b;
        }
        [data-theme="light"][data-design="modern"] .sidebar-tab.active {
            color: #0b5eb7;
            border-bottom-color: #0b5eb7;
            background: rgba(255, 255, 255, 0.95);
        }
        [data-theme="light"][data-design="modern"] .sidebar-content {
            background: transparent;
            padding: 10px;
        }
        [data-theme="light"][data-design="modern"] .sidebar-panel {
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(245, 250, 255, 0.9) 100%);
            border: 1px solid rgba(23, 56, 112, 0.15);
            border-radius: 18px;
            box-shadow: 0 16px 34px rgba(16, 38, 78, 0.12);
            padding: 14px;
        }
        [data-theme="light"][data-design="modern"] #panelNotes > .form-group,
        [data-theme="light"][data-design="modern"] #panelNotes > .notes-search-row,
        [data-theme="light"][data-design="modern"] #panelNotes > .btn-row,
        [data-theme="light"][data-design="modern"] #panelInfra .collapsible-section,
        [data-theme="light"][data-design="modern"] .translate-module,
        [data-theme="light"][data-design="modern"] .firstaid-section-card,
        [data-theme="light"][data-design="modern"] .firstaid-card,
        [data-theme="light"][data-design="modern"] .sketch-card,
        [data-theme="light"][data-design="modern"] .note-card {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 248, 255, 0.9) 100%);
            border: 1px solid rgba(23, 56, 112, 0.16);
            box-shadow: 0 12px 28px rgba(16, 38, 78, 0.1);
            border-radius: 14px;
        }
        [data-theme="light"][data-design="modern"] #panelNotes .form-group,
        [data-theme="light"][data-design="modern"] #panelNotes .notes-search-row {
            padding: 12px;
            margin-bottom: 0;
        }
        [data-theme="light"][data-design="modern"] #panelNotes .section-header {
            margin-top: 2px;
            border-bottom-color: rgba(23, 56, 112, 0.2);
            color: #425676;
        }
        [data-theme="light"][data-design="modern"] .form-input {
            background: rgba(255, 255, 255, 0.92);
            border-color: rgba(23, 56, 112, 0.2);
            border-radius: 12px;
        }
        [data-theme="light"][data-design="modern"] .form-input:focus {
            border-color: #0b5eb7;
            box-shadow: 0 0 0 3px rgba(11, 94, 183, 0.18);
        }
        [data-theme="light"][data-design="modern"] .btn-primary {
            background: linear-gradient(145deg, #0b5eb7, #0a4687);
            box-shadow: 0 10px 22px rgba(10, 70, 135, 0.22);
        }
        [data-theme="light"][data-design="modern"] .btn-primary:hover {
            background: linear-gradient(145deg, #0d67c8, #0b4e9a);
        }
        [data-theme="light"][data-design="modern"] .btn-secondary {
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(23, 56, 112, 0.18);
        }
        [data-theme="light"][data-design="modern"] .btn-secondary:hover {
            background: rgba(219, 234, 254, 0.6);
        }
        [data-theme="light"][data-design="modern"] .note-card .note-meta,
        [data-theme="light"][data-design="modern"] .note-card .note-loc {
            color: #5a6e8f;
        }
        [data-theme="light"][data-design="modern"] .note-card .note-body {
            color: #12223a;
        }
        @media (max-width: 768px) {
            /* Full-height feature pages on mobile: no useless top band */
            [data-design="modern"] .sidebar.mobile-full {
                background: var(--bg-primary);
                padding-top: 0 !important;
            }
            [data-design="modern"] .sidebar.mobile-full .sidebar-content {
                padding: 0 !important;
                max-height: none;
                height: 100%;
                overflow: hidden;
            }
            [data-design="modern"] .sidebar.mobile-full .sidebar-content > .sidebar-panel {
                display: none !important;
                margin: 0 !important;
                padding: 10px 10px calc(90px + env(safe-area-inset-bottom, 0px)) !important;
                border-radius: 0;
                border-top: none;
                border-left: none;
                border-right: none;
                box-shadow: none;
                min-height: 100%;
                overflow-y: auto;
            }
            [data-design="modern"] .sidebar.mobile-full .sidebar-content > .sidebar-panel.active {
                display: block !important;
            }
            [data-design="modern"] .sidebar.mobile-full #panelFirstAid.active {
                display: flex !important;
                flex-direction: column;
                overflow-y: auto;
                padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 8px);
            }
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; width: 100%; /* allow scrolling */ }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            font-size: 15px; /* plancher lisibilité terrain (plein soleil, bras tendu) */
            background: var(--bg-secondary);
            color: var(--text-primary);
            transition: background 0.3s, color 0.3s;
        }

        .app {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* fallback for older browsers */
            min-height: 100dvh; /* dynamic viewport height — excludes mobile browser chrome */
        }

        /* â”€â”€â”€â”€â”€ HEADER â”€â”€â”€â”€â”€ */
        .header {
            background: var(--header-bg);
            color: var(--header-text);
            padding: 0 16px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 100;
            flex-shrink: 0;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        /* Header theme toggle styling */
        .header-theme-btn { margin-left: 6px; border: none; background: transparent; padding: 8px; border-radius: 8px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; }
        .header-theme-btn:hover { background: rgba(0,0,0,0.04); }
        .header-theme-btn:focus { outline: 2px solid rgba(59,130,246,0.3); outline-offset: 2px; }
        .header-theme-btn .header-theme-icon { width:18px; height:18px; color:var(--header-text); display:block; }

        .header-logo {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
        .header-logo.logo-action {
            cursor: pointer;
            user-select: none;
        }
        .header-logo.logo-action:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 6px;
        }

        .header-logo span { color: var(--accent); }

        .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Header tabs (desktop only) */
        .header-tabs { display: none; gap: 8px; margin-left: 12px; align-items: center; }
        .header-tabs .sidebar-tab { background: transparent; border: none; color: var(--header-text); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-weight:600; }
        .header-tabs .sidebar-tab.active { background: rgba(255,255,255,0.06); }

        @media (min-width: 769px) {
            .header-tabs { display:flex; }
            /* suppress left sidebar tabs on desktop now that header hosts the menu */
            .sidebar .sidebar-tabs { display: none; }
            /* hide the left sidebar entirely when collapsed on desktop (use header navigation) */
            .sidebar.collapsed { display: none; }
        }
        .header-dept-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: var(--header-text);
            padding: 5px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            max-width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .header-dept-btn:hover { background: rgba(255,255,255,0.18); }
        .header-dept-btn .dept-count {
            background: var(--accent);
            color: #fff;
            border-radius: 10px;
            padding: 1px 6px;
            font-size: 12px;
            min-width: 18px;
            text-align: center;
        }
        .header-dept-panel {
            display: none;
            position: fixed;
            top: 52px;
            right: 8px;
            margin-top: 4px;
            width: 320px;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.25);
            z-index: 2000;
            overflow: hidden;
            max-height: calc(100vh - 72px);
        }
        .header-dept-panel.visible {
            display: flex;
            flex-direction: column;
        }
        /* Drag handle (all screens — the panel is movable in x/y) */
        .header-dept-panel .dept-drag-handle {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 0 2px;
            cursor: grab;
            touch-action: none;
            flex: 0 0 auto;
        }
        /* The header doubles as a drag zone on desktop (natural title-bar move) */
        .header-dept-panel .dept-panel-header { cursor: grab; }
        .header-dept-panel .dept-panel-header .dept-panel-close { cursor: pointer; }
        .header-dept-panel .dept-drag-handle .dept-drag-pill {
            width: 36px;
            height: 5px;
            border-radius: 3px;
            background: var(--text-muted);
            opacity: 0.45;
        }
        .header-dept-panel .dept-panel-header {
            padding: 10px 14px 6px;
            font-size: 11px;
            color: var(--text-muted);
            line-height: 1.4;
            flex: 0 0 auto;
        }
        .header-dept-panel .dept-panel-header-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }
        .header-dept-panel .dept-panel-tools {
            display: flex;
            justify-content: flex-start;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .header-dept-panel .dept-panel-tool-row {
            padding: 8px 14px 6px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
            overflow: visible;
            flex: 0 0 auto;
            min-height: 44px;
            position: relative;
            z-index: 1;
            background: var(--bg-primary);
        }
        .dept-tool-btn {
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 700;
            border-radius: 8px;
            padding: 5px 10px;
            min-height: 34px;
            line-height: 1.2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            cursor: pointer;
        }
        .dept-tool-btn:hover {
            background: var(--accent-light);
            border-color: rgba(13, 110, 253, 0.28);
        }
        .dept-panel-close {
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-muted);
            width: 26px;
            height: 26px;
            border-radius: 8px;
            font-size: 18px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        .dept-panel-close:hover {
            color: var(--text-primary);
            background: var(--bg-tertiary);
        }
        .favorites-overlay {
            position: fixed;
            inset: 0;
            z-index: 2100;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(7, 16, 30, 0.38);
            backdrop-filter: blur(2px);
        }
        .favorites-overlay.visible { display: flex; }
        .favorites-modal {
            width: min(430px, calc(100vw - 20px));
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 18px;
            box-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
            padding: 14px;
        }
        .favorites-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }
        .favorites-modal-title {
            font-size: 16px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .favorites-modal-sub {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }
        .favorites-select-wrap {
            display: grid;
            gap: 6px;
        }
        .favorites-select-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
        }
        .favorites-select-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .favorites-select {
            width: 100%;
            min-height: 42px;
            font-size: 14px;
        }
        .favorites-remove-btn {
            width: 36px;
            min-width: 36px;
            height: 36px;
            border-radius: 999px;
            border: 1px solid rgba(239, 68, 68, 0.38);
            background: #fff5f5;
            color: #dc2626;
            font-size: 20px;
            line-height: 1;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
        }
        .favorites-remove-btn:hover {
            background: #ffe5e5;
            border-color: rgba(220, 38, 38, 0.48);
        }
        [data-theme="dark"] .favorites-remove-btn {
            background: rgba(127, 29, 29, 0.28);
            color: #fca5a5;
            border-color: rgba(248, 113, 113, 0.4);
        }
        [data-theme="dark"] .favorites-remove-btn:hover {
            background: rgba(153, 27, 27, 0.38);
            border-color: rgba(252, 165, 165, 0.55);
        }
        .favorites-remove-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .favorites-modal-actions {
            margin-top: 10px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .favorites-modal-actions .btn {
            width: 100%;
        }
        .favorites-modal-empty {
            margin-top: 8px;
            padding: 10px;
            border-radius: 10px;
            background: var(--bg-secondary);
            color: var(--text-muted);
            font-size: 12px;
            text-align: center;
        }
        @media (max-width: 768px) {
            .favorites-overlay {
                align-items: flex-end;
                padding: 8px;
            }
            .favorites-modal {
                width: 100%;
                border-radius: 16px;
                max-height: min(70vh, 480px);
                overflow-y: auto;
            }
            .favorites-modal-actions {
                grid-template-columns: 1fr;
            }
        }
        .header-dept-panel .dept-chips-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 8px 12px;
            min-height: 20px;
            border-bottom: 1px solid var(--border);
            max-height: 84px;
            overflow-y: auto;
            align-content: flex-start;
            flex: 0 0 auto;
        }
        .header-dept-panel .dept-search-input {
            flex: 0 0 auto;
            position: relative;
            z-index: 1;
        }
        .header-dept-panel .dept-options-list {
            max-height: 250px;
            flex: 1 1 auto;
            min-height: 120px;
            overflow-y: auto;
        }

        /* --- Dept panel tabs (Départements / Unités) --- */
        .dept-panel-tabs {
            display: flex;
            border-bottom: 2px solid var(--border);
            flex: 0 0 auto;
            margin-bottom: 2px;
        }
        .dept-panel-tab {
            flex: 1;
            padding: 8px 6px;
            font-size: 12px;
            font-weight: 700;
            text-align: center;
            cursor: pointer;
            background: transparent;
            border: none;
            color: var(--text-muted);
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: color .15s, border-color .15s;
        }
        .dept-panel-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        .dept-panel-tab:hover:not(.active) {
            color: var(--text-primary);
        }
        .dept-panel-tab-content {
            display: none;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }
        .dept-panel-tab-content.active {
            display: flex;
        }
        .header-dept-panel #deptTabContentDepts.active {
            padding-top: 4px;
            overflow: visible;
        }
        .header-dept-panel.dept-panel--compact-depts #deptTabContentDepts.active .dept-options-list {
            display: block;
            min-height: 88px;
            max-height: 34vh;
            overflow-y: auto;
        }
        .header-dept-panel.dept-panel--compact-units #deptTabContentUnits.active .unit-search-results {
            display: none !important;
        }
        .header-dept-panel.dept-panel--compact-depts #deptTabContentDepts.active .dept-search-input,
        .header-dept-panel.dept-panel--compact-units #deptTabContentUnits.active .dept-search-input {
            border-bottom: 1px solid var(--border);
        }
        .header-dept-panel.dept-panel--compact-depts #deptTabContentDepts.active .dept-apply-bar,
        .header-dept-panel.dept-panel--compact-units #deptTabContentUnits.active .dept-apply-bar {
            margin-top: 6px;
        }

        /* --- Brigade/commissariat search results --- */
        .unit-search-results {
            flex: 1 1 auto;
            overflow-y: auto;
            min-height: 100px;
            max-height: 300px;
        }
        .unit-local-suggestion {
            margin: 8px 12px 6px;
            padding: 8px 10px;
            border-radius: 12px;
            border: 1px solid rgba(13, 110, 253, 0.25);
            background: rgba(13, 110, 253, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex: 0 0 auto;
        }
        .unit-local-suggestion[hidden] { display: none !important; }
        .unit-local-suggest-text {
            min-width: 0;
            font-size: 12px;
            color: var(--text-primary);
            font-weight: 600;
        }
        .unit-local-suggest-sub {
            margin-top: 2px;
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .unit-local-suggest-btn {
            flex: 0 0 auto;
            border: 1px solid rgba(13, 110, 253, 0.35);
            background: #ffffff;
            color: #0b63d4;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 10px;
            cursor: pointer;
        }
        .unit-local-suggest-btn:hover {
            background: #e8f0fe;
        }
        .unit-search-empty {
            padding: 18px 14px;
            text-align: center;
            color: var(--text-muted);
            font-size: 12px;
        }
        .unit-result-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background .12s;
        }
        .unit-result-item:hover {
            background: var(--accent-light);
        }
        .unit-result-item.selected {
            background: var(--accent-light);
            font-weight: 600;
        }
        .unit-result-icon {
            font-size: 18px;
            flex: 0 0 24px;
            text-align: center;
        }
        .unit-result-info {
            flex: 1;
            min-width: 0;
        }
        .unit-result-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .unit-result-meta {
            font-size: 11px;
            color: var(--text-muted);
        }

        .icon-btn {
            background: none;
            border: none;
            color: var(--header-text);
            font-size: 20px;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;  /* cible tactile terrain (gants, véhicule) */
            min-height: 44px;
        }

        .icon-btn:hover { background: rgba(255,255,255,0.1); }


        /* â”€â”€â”€â”€â”€ MAIN LAYOUT â”€â”€â”€â”€â”€ */
        .main {
            display: flex;
            flex: 1;
            overflow: hidden;
            min-height: 0;
        }

        /* â”€â”€â”€â”€â”€ SIDEBAR â”€â”€â”€â”€â”€ */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--bg-primary);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            transition: margin-left 0.3s ease, width 0.3s ease;
            z-index: 50;
            flex-shrink: 0;
            min-height: 0;
        }

        .sidebar.collapsed {
            margin-left: calc(-1 * var(--sidebar-width));
        }

        .sidebar-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
            flex-shrink: 0;
        }

        .sidebar-tab {
            flex: 1;
            padding: 12px 8px;
            border: none;
            background: none;
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .sidebar-tab:hover { background: var(--bg-tertiary); }

        .sidebar-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            background: var(--bg-primary);
        }

        .sidebar-tab .tab-icon { font-size: 18px; }
        .tab-icon-emoji { display:none; }
        /* Desktop: show emoji icons (old style), hide svg material icons */
        @media (min-width: 769px) {
            .tab-icon { display:none; }
            .tab-icon-emoji { display:inline-block; font-size:18px; margin-right:6px; }
        }
        /* Mobile: keep SVG icons (current material) */
        @media (max-width: 768px) {
            .tab-icon { display:inline-block; }
            .tab-icon-emoji { display:none; }
        }

        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 0;
            min-height: 0;
            -webkit-overflow-scrolling: touch;
        }

        .sidebar-panel {
            display: none;
            padding: 16px;
            padding-bottom: 28px;
            overflow-y: auto;
            max-height: calc(100vh - 60px); /* leave space for header */
        }

        .sidebar-panel.active { display: block; }

        /* â”€â”€â”€â”€â”€ FORM ELEMENTS â”€â”€â”€â”€â”€ */
        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 11px;
            font-size: 15px;
            background: var(--bg-primary);
            color: var(--text-primary);
            transition: border 0.15s, box-shadow 0.15s;
            outline: none;
        }

        .form-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(11, 87, 176, 0.16);
        }

        .form-input::placeholder { color: var(--text-muted); }

        textarea.form-input {
            resize: vertical;
            min-height: 80px;
            font-family: inherit;
        }

        /* One-click clear for text fields */
        .clearable-host {
            position: relative;
            width: 100%;
            min-width: 0;
        }
        .clearable-host > .form-input {
            padding-right: 34px;
        }
        .clearable-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 0;
            border-radius: 999px;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            color: var(--text-muted);
            background: rgba(15, 23, 42, 0.08);
            z-index: 5;
        }
        .clearable-host.has-value .clearable-btn {
            display: inline-flex;
        }
        .clearable-btn:hover {
            color: var(--text-primary);
            background: rgba(15, 23, 42, 0.16);
        }
        .clearable-host textarea.form-input + .clearable-btn {
            top: 10px;
            transform: none;
        }

        /* â”€â”€â”€â”€â”€ BUTTONS â”€â”€â”€â”€â”€ */
        /* Design tokens 2026-07 — hierarchy: ONE filled primary per screen (the
           real CTA), secondary actions in tonal (pale accent bg + accent text,
           Material 3 / iOS pattern), tertiary in ghost. Contained heights,
           unified radius. Note: width:100% kept for layout stability — the
           width-to-content cleanup is a screen-by-screen follow-up pass. */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 9px 18px;
            border: none;
            border-radius: 11px;
            font-size: 14px;
            font-weight: 650;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: box-shadow 0.15s, background 0.15s, color 0.15s, opacity 0.15s;
            width: 100%;
            -webkit-tap-highlight-color: transparent;
        }
        .btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

        .btn-primary {
            background: var(--accent);
            color: #fff;
        }
        .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 14px rgba(11, 87, 176, 0.22); }
        .btn-primary:active { box-shadow: none; }

        /* Tonal: the modern secondary — quiet but UNMISTAKABLY a button.
           Visible border + firmer tint so it never melts into the blue-tinted
           panel gradients. */
        .btn-secondary {
            background: color-mix(in srgb, var(--accent) 10%, var(--bg-primary));
            color: var(--accent);
            border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
        }
        .btn-secondary:hover {
            background: color-mix(in srgb, var(--accent) 18%, var(--bg-primary));
            border-color: color-mix(in srgb, var(--accent) 55%, transparent);
        }
        [data-theme="dark"] .btn-secondary { color: #9ec9f5; border-color: rgba(158, 201, 245, 0.45); }

        /* Ghost: tertiary / low-emphasis actions — a faint border + an OPAQUE
           panel background: several ghosts sit directly over the map, where
           transparency made them unreadable on satellite imagery. */
        .btn-ghost {
            background: var(--bg-primary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

        .btn-success {
            background: var(--success);
            color: #fff;
        }
        .btn-success:hover { opacity: 0.9; }

        .btn-danger {
            background: var(--danger);
            color: #fff;
        }

        .btn-sm {
            min-height: 36px;
            padding: 5px 12px;
            font-size: 12.5px;
            border-radius: 9px;
        }

        /* â”€â”€â”€â”€â”€ AUTOCOMPLETE â”€â”€â”€â”€â”€ */
        .autocomplete-wrapper {
            position: relative;
        }

        .autocomplete-list { display: none; }

        /* Floating dropdown appended to body */
        .autocomplete-float {
            position: fixed;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(15, 23, 42, 0.12);
            border-radius: 14px;
            box-shadow: 0 18px 36px rgba(2, 6, 23, 0.22);
            backdrop-filter: blur(8px);
            max-height: min(48vh, 320px);
            overflow-y: auto;
            z-index: 99999;
            display: none;
            padding: 6px;
        }
        [data-theme="dark"] .autocomplete-float {
            background: rgba(15, 23, 42, 0.94);
            border-color: rgba(148, 163, 184, 0.35);
            box-shadow: 0 18px 36px rgba(2, 6, 23, 0.65);
        }

        .autocomplete-float.visible { display: block; }
        .autocomplete-float.autocomplete-float--mobile-full {
            border-radius: 14px;
        }

        .autocomplete-item {
            cursor: pointer;
            border-radius: 10px;
            transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
            outline: none;
        }
        .autocomplete-item + .autocomplete-item { margin-top: 3px; }
        .autocomplete-item-main {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 9px 10px;
        }
        .autocomplete-item-icon {
            width: 20px;
            height: 20px;
            border-radius: 999px;
            background: #e8f0fe;
            position: relative;
            margin-top: 2px;
            flex: 0 0 20px;
        }
        .autocomplete-item-icon::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: #1a73e8;
        }
        .autocomplete-item-text {
            min-width: 0;
            flex: 1 1 auto;
        }
        .autocomplete-item-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .autocomplete-item-meta,
        .autocomplete-item-sub {
            margin-top: 2px;
            font-size: 12px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .autocomplete-item-meta { color: var(--text-secondary); }
        .autocomplete-item-sub { color: var(--text-muted); }
        .autocomplete-item-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: 8px;
            flex: 0 0 auto;
        }
        .autocomplete-source-tag {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: #1a73e8;
            background: #e8f0fe;
            border: 1px solid rgba(26, 115, 232, 0.28);
            border-radius: 999px;
            padding: 2px 6px;
        }
        .autocomplete-fav-btn {
            width: 26px;
            height: 26px;
            border: 1px solid rgba(148, 163, 184, 0.44);
            border-radius: 999px;
            background: #ffffff;
            color: #64748b;
            cursor: pointer;
            font-size: 15px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .autocomplete-fav-btn.active {
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.4);
            background: #fff7e6;
        }
        .autocomplete-fav-btn:hover {
            border-color: rgba(100, 116, 139, 0.6);
            background: #f8fafc;
        }
        .autocomplete-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 4px 8px;
            margin: 2px 2px 4px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .autocomplete-link-btn {
            border: none;
            background: transparent;
            color: #1a73e8;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            padding: 0;
            text-transform: none;
        }
        .autocomplete-link-btn:hover {
            text-decoration: underline;
        }
        .autocomplete-empty {
            padding: 10px 12px;
            font-size: 12px;
            color: var(--text-muted);
            text-align: center;
        }

        .autocomplete-item:hover {
            background: #eef4ff;
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(26, 115, 232, 0.14);
        }
        .autocomplete-item:active {
            transform: none;
            background: #e4edff;
            box-shadow: none;
        }
        .autocomplete-item:focus-visible {
            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35);
            background: #eef4ff;
        }
        [data-theme="dark"] .autocomplete-item-icon {
            background: rgba(59, 130, 246, 0.22);
        }
        [data-theme="dark"] .autocomplete-item:hover,
        [data-theme="dark"] .autocomplete-item:focus-visible {
            background: rgba(30, 64, 175, 0.3);
            box-shadow: 0 6px 16px rgba(2, 6, 23, 0.5);
        }
        [data-theme="dark"] .autocomplete-source-tag {
            background: rgba(59, 130, 246, 0.25);
            border-color: rgba(96, 165, 250, 0.45);
            color: #bfdbfe;
        }
        [data-theme="dark"] .autocomplete-fav-btn {
            background: rgba(15, 23, 42, 0.82);
            color: #cbd5e1;
            border-color: rgba(148, 163, 184, 0.38);
        }
        [data-theme="dark"] .autocomplete-fav-btn.active {
            color: #fbbf24;
            border-color: rgba(251, 191, 36, 0.42);
            background: rgba(113, 63, 18, 0.28);
        }
        [data-theme="dark"] .autocomplete-section-title {
            color: #94a3b8;
        }
        [data-theme="dark"] .autocomplete-link-btn {
            color: #93c5fd;
        }
        [data-theme="dark"] .autocomplete-empty {
            color: #94a3b8;
        }
        [data-theme="dark"] .autocomplete-item:active {
            background: rgba(30, 64, 175, 0.38);
            box-shadow: none;
        }

        /* â”€â”€â”€â”€â”€ DEPARTMENT CHIPS â”€â”€â”€â”€â”€ */
        .dept-multi-select {
            position: relative;
        }

        .dept-trigger {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 42px;
            flex-wrap: wrap;
            gap: 4px;
        }

        .dept-trigger:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
        }

        .dept-chip {
            background: var(--accent);
            color: #fff;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .dept-chip .chip-remove {
            cursor: pointer;
            font-size: 14px;
            line-height: 1;
            opacity: 0.8;
        }

        .dept-chip .chip-remove:hover { opacity: 1; }

        .dept-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            max-height: 300px;
            overflow-y: auto;
            z-index: 200;
            display: none;
        }

        .dept-dropdown.visible { display: block; }

        .dept-search-input {
            width: 100%;
            padding: 10px 12px;
            border: none;
            border-bottom: 1px solid var(--border);
            font-size: 13px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            outline: none;
        }

        .dept-option {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.15s;
        }

        .dept-option:hover { background: var(--accent-light); }

        .dept-option.selected { background: var(--accent-light); font-weight: 600; }

        .dept-option input[type="checkbox"] { accent-color: var(--accent); }

        /* â”€â”€â”€â”€â”€ RESULTS â”€â”€â”€â”€â”€ */
        .result-card {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .result-card:hover {
            border-color: var(--accent);
            box-shadow: 0 2px 8px rgba(13, 110, 253, 0.1);
        }

        .result-card .title {
            font-weight: 600;
            color: var(--accent);
            font-size: 14px;
            margin-bottom: 4px;
        }

        .result-card .desc {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .result-card .meta {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 6px;
        }

        /* â”€â”€â”€â”€â”€ NATINF CARDS â€” collapsible â”€â”€â”€â”€â”€ */
        .natinf-card {
            cursor: pointer;
            user-select: none;
        }
        .natinf-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }
        .natinf-tab-btn {
            flex: 1;
            min-width: 0;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border-radius: 10px;
            padding: 7px 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .natinf-tab-btn.active {
            color: var(--accent);
            border-color: rgba(13, 110, 253, 0.45);
            background: rgba(13, 110, 253, 0.12);
        }
        .natinf-tab-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            border-radius: 999px;
            padding: 0 5px;
            font-size: 11px;
            font-weight: 700;
            background: rgba(245, 158, 11, 0.15);
            color: #b45309;
        }
        .natinf-tab-panel { display: none; }
        .natinf-tab-panel.active { display: block; }
        /* NATINF filter chips */
        .natinf-filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 8px;
        }
        .natinf-chip {
            display: inline-flex;
            align-items: center;
            padding: 5px 12px;
            border-radius: 16px;
            border: 1.5px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
        }
        .natinf-chip:hover { border-color: var(--accent); color: var(--accent); }
        .natinf-chip.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .natinf-voice-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-top: 8px;
        }
        .natinf-voice-actions .btn {
            width: auto;
            min-width: 0;
            flex: 1 1 auto;
        }
        .natinf-voice-btn {
            min-width: 180px;
        }
        .natinf-voice-btn.is-recording {
            color: #b91c1c;
            border-color: rgba(185, 28, 28, 0.45);
            background: rgba(185, 28, 28, 0.12);
        }
        .natinf-voice-status {
            margin-top: 6px;
            font-size: 12px;
            color: var(--text-muted);
            min-height: 16px;
        }
        .natinf-voice-status.is-recording {
            color: #b91c1c;
            font-weight: 600;
        }
        @media (max-width: 768px) {
            .natinf-voice-actions {
                flex-direction: column;
                align-items: stretch;
            }
            .natinf-voice-actions .btn,
            .natinf-voice-btn {
                width: 100%;
                min-width: 0;
            }
        }
        .natinf-favorites-tools {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 4px 0 8px;
        }
        .natinf-favorites-tools .form-input {
            margin: 0;
        }
        .natinf-favorites-search {
            flex: 1;
            min-width: 0;
        }
        .natinf-favorites-tools .btn {
            width: auto;
            min-width: 120px;
            height: 34px;
            white-space: nowrap;
            padding: 0 10px;
        }
        .natinf-favorites-tools .btn.active {
            color: var(--accent);
            border-color: rgba(13, 110, 253, 0.45);
            background: rgba(13, 110, 253, 0.12);
        }
        @media (max-width: 768px) {
            .natinf-favorites-tools {
                flex-direction: column;
                align-items: stretch;
            }
            .natinf-favorites-tools .btn {
                width: 100%;
                min-width: 0;
            }
        }
        .natinf-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .natinf-card-header-main {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .natinf-card-header-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .natinf-fav-btn {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 15px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .natinf-fav-btn.active {
            color: #b45309;
            border-color: rgba(245, 158, 11, 0.5);
            background: rgba(245, 158, 11, 0.18);
        }
        .natinf-fav-btn:hover {
            color: #b45309;
            border-color: rgba(245, 158, 11, 0.45);
        }
        .natinf-chevron {
            font-size: 12px;
            color: var(--text-muted);
            transition: transform 0.2s;
        }
        .natinf-card.expanded .natinf-chevron {
            transform: rotate(180deg);
        }
        .natinf-card-body {
            display: none;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
        }
        .natinf-card.expanded .natinf-card-body {
            display: block;
        }
        .natinf-results--ultra .natinf-card {
            padding: 6px 10px;
            margin-bottom: 6px;
            border-radius: 8px;
        }
        .natinf-results--ultra .natinf-card .title {
            font-size: 13px;
            margin: 0;
        }
        .natinf-results--ultra .natinf-chevron,
        .natinf-results--ultra .natinf-card .desc,
        .natinf-results--ultra .natinf-card .natinf-preview,
        .natinf-results--ultra .natinf-card .natinf-amende-badge,
        .natinf-results--ultra .natinf-card .natinf-points-badge,
        .natinf-results--ultra .natinf-card .natinf-category-badge,
        .natinf-results--ultra .natinf-card .natinf-best-badge,
        .natinf-results--ultra .natinf-card .natinf-card-body {
            display: none !important;
        }
        .natinf-results--ultra .natinf-card--best {
            border-width: 1px;
            box-shadow: none;
        }
        .natinf-qualif {
            font-size: 12px;
            color: var(--text-primary);
            line-height: 1.5;
            margin-bottom: 6px;
            font-weight: 500;
        }
        .natinf-amende-badge {
            display: inline-block;
            margin-top: 4px;
            padding: 2px 8px;
            border-radius: 4px;
        }

        /* â”€â”€â”€â”€â”€ FIRST AID CARDS (collapsible) â”€â”€â”€â”€â”€ */
        #panelFirstAid.active {
            display: flex;
        }
        #panelFirstAid {
            flex-direction: column;
            gap: 10px;
        }
        /* Ce selecteur (0,1,1) battait .form-input (0,1,0) alors que l'input
           porte deja cette classe : il imposait un padding et un rayon differents
           et, surtout, ne definissait ni fond ni couleur de texte — donc fond
           blanc du navigateur et texte sombre illisible en theme sombre. On ne
           garde que ce qui est specifique a cette rangee. */
        .firstaid-search-row input { width: 100%; }
        .firstaid-subtle {
            font-size: 13px;
            color: var(--text-muted);
            padding: 8px;
            text-align: center;
        }
        .firstaid-section-card {
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--bg-primary);
            padding: 16px;
            box-shadow: 0 4px 16px rgba(18, 44, 92, 0.06);
        }

        .firstaid-ai-assist {
            border-left: 4px solid var(--accent);
            margin: 0;
        }
        .firstaid-ai-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .firstaid-ai-sub {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }
        .firstaid-ai-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .firstaid-ai-actions .btn {
            flex: 1 1 190px;
            min-height: 40px;
        }
        .firstaid-ai-actions .btn-voice-hot {
            background: #b91c1c;
            border-color: #b91c1c;
            color: #fff;
            font-weight: 800;
        }
        .firstaid-ai-actions .btn-voice-hot:hover {
            background: #991b1b;
            border-color: #991b1b;
        }
        .firstaid-ai-actions .btn-voice-hot.btn-danger {
            background: #7f1d1d;
            border-color: #7f1d1d;
        }
        .firstaid-ai-actions .firstaid-dae-btn {
            flex: 1 1 100%;
            background: #b91c1c;
            border-color: #b91c1c;
            color: #fff;
            font-weight: 800;
        }
        .firstaid-ai-actions .firstaid-dae-btn:hover {
            background: #991b1b;
            border-color: #991b1b;
        }
        .firstaid-ai-status {
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .firstaid-ai-status.ok { color: #15803d; }
        .firstaid-ai-status.warn { color: #b45309; }
        .firstaid-ai-result {
            margin-top: 8px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg-primary);
            padding: 10px;
            font-size: 13px;
        }
        .firstaid-ai-result h4 {
            margin: 0 0 6px 0;
            font-size: 14px;
            color: var(--text-primary);
        }
        .firstaid-ai-result ul {
            margin: 6px 0 0 18px;
            padding: 0;
        }
        .firstaid-ai-result li {
            margin-bottom: 4px;
            color: var(--text-secondary);
        }
        .firstaid-ai-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .firstaid-ai-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 700;
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }
        .firstaid-ai-triage {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 800;
            margin-bottom: 8px;
        }
        .firstaid-ai-triage.critical { background: #fee2e2; color: #b91c1c; }
        .firstaid-ai-triage.high { background: #fef3c7; color: #92400e; }
        .firstaid-ai-triage.low { background: #dcfce7; color: #166534; }
        .firstaid-metronome-top {
            border-left: 4px solid #16a34a;
            margin: 0;
        }
        .firstaid-metro-head {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-bottom: 8px;
        }
        .firstaid-metro-sub {
            font-size: 12px;
            color: var(--text-muted);
        }
        .firstaid-metro-presets {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }
        .firstaid-metro-mode {
            display: flex;
            gap: 6px;
            margin-bottom: 10px;
        }
        .metro-mode-btn {
            flex: 1;
            border: 2px solid var(--border);
            background: var(--bg-primary);
            color: var(--text-secondary);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .metro-mode-btn.active {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
        }
        .metro-preset-btn {
            border: 1px solid var(--border);
            background: var(--bg-primary);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .metro-preset-btn.active {
            border-color: rgba(13, 110, 253, 0.32);
            background: var(--accent-light);
            color: var(--accent);
        }
        .firstaid-metro-grid {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .firstaid-metro-range {
            flex: 1;
        }
        .firstaid-metro-value {
            width: 96px;
            text-align: center;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg-primary);
            padding: 8px 6px;
        }
        .firstaid-metro-value strong {
            display: block;
            font-size: 19px;
            line-height: 1;
            color: var(--text-primary);
        }
        .firstaid-metro-actions {
            margin-top: 8px;
        }
        .firstaid-beat-row {
            margin-top: 8px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .firstaid-intro {
            margin: 0;
        }
        .firstaid-intro strong {
            display: block;
            margin-bottom: 4px;
            font-size: 15px;
        }
        .firstaid-audience-switch {
            display: inline-flex;
            gap: 6px;
            margin: 4px 0 8px 0;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 4px;
        }
        .firstaid-audience-btn {
            border: 0;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            background: transparent;
            cursor: pointer;
        }
        .firstaid-audience-btn.active {
            background: var(--accent);
            color: #fff;
        }
        .firstaid-audience-note {
            margin: 0 0 8px 0;
            font-size: 12px;
            color: var(--text-muted);
        }
        .firstaid-audience-badge {
            display: inline-block;
            margin-left: 6px;
            padding: 2px 7px;
            border-radius: 999px;
            background: var(--accent-light);
            color: var(--accent);
            font-size: 12px;
            font-weight: 700;
            vertical-align: middle;
        }

        .firstaid-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            background: var(--bg-secondary);
            transition: box-shadow 0.2s, transform 0.12s;
            cursor: pointer;
        }
        .firstaid-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-1px); }
        .firstaid-card:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .firstaid-card h3 { margin: 0 0 6px 0; font-size: 15px; }
        .firstaid-card p { margin: 0; color: var(--text-muted); }
        .firstaid-card .firstaid-card-summary { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
        .firstaid-card .fa-quick-strip {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .firstaid-card .fa-step-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg-primary);
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.2;
        }
        .firstaid-card .fa-step-pill b {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 999px;
            background: var(--accent-light);
            color: var(--accent);
            font-size: 12px;
            font-weight: 700;
        }
        .firstaid-card .firstaid-card-visual { display: none; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
        .firstaid-card.open .firstaid-card-visual { display: block; }
        .firstaid-card .fa-photo-wrap {
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            background: #f3f4f6;
        }
        .firstaid-card .fa-photo {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            aspect-ratio: 16 / 9;
        }
        .firstaid-card .fa-schema-wrap { width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-primary); }
        .firstaid-card .fa-schema-wrap svg { width: 100%; height: auto; display: block; }
        .firstaid-card .fa-schema-caption { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
        .firstaid-card .card-toggle { float: right; font-size: 14px; color: var(--text-muted); cursor: pointer; }
        .firstaid-card.open .card-toggle { transform: rotate(180deg); color: var(--accent); }
        @media (max-width: 768px) {
            .firstaid-metro-grid {
                flex-direction: column;
                align-items: stretch;
            }
            .firstaid-metro-value {
                width: 100%;
            }
        }
        .natinf-amende-delit {
            background: #fff3e0;
            color: #e65100;
        }
        .natinf-amende-crime {
            background: #fce4ec;
        }
        .natinf-points-badge {
            display: inline-block;
            background: #fff3cc;
            color: #b45309;
            padding: 2px 6px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            margin-left: 6px;
        }
        .natinf-category-badge {
            display: inline-block;
            background: #e8f0ff;
            color: #1d4ed8;
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            margin-left: 6px;
        }
        /* meilleur résultat */
        .natinf-card--best { border: 2px solid rgba(245, 166, 35, 0.25); box-shadow: 0 6px 18px rgba(244, 143, 0, 0.06); }
        .natinf-best-badge { background: #fff7ed; color: #b45309; border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight:700; margin-left:6px; }

        /* Marker highlight / pulsing ring (applied to placeMarker element) */
        .maplibregl-marker.marker-highlight, .mapboxgl-marker.marker-highlight {
            position: relative;
            z-index: 9999;
        }
        .maplibregl-marker.marker-highlight::after, .mapboxgl-marker.marker-highlight::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(244,143,0,0.12) 0%, rgba(244,143,0,0.03) 40%, rgba(244,143,0,0) 70%);
            box-shadow: 0 0 0 6px rgba(244,143,0,0.08) inset;
            animation: marker-pulse 1.6s ease-out infinite;
            pointer-events: none;
        }
        @keyframes marker-pulse { 0% { transform: translate(-50%,-50%) scale(0.85); opacity: 1; } 70% { transform: translate(-50%,-50%) scale(1.45); opacity: 0.15; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); } }
        .maplibregl-marker.marker-highlight-persistent::after, .mapboxgl-marker.marker-highlight-persistent::after { animation-iteration-count: infinite; }
        .gps-location-marker {
            position: relative;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            pointer-events: none;
        }
        .gps-location-marker.gps-emoji-marker {
            /* Boîte FIXE + centrage flex : l'emoji est centré sur la coordonnée
               comme le point bleu. En width/height:auto, l'ancrage 'center' de
               MapLibre décalait le glyphe (métriques emoji) → position fausse. */
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            line-height: 1;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
        }
        .gps-location-marker.gps-emoji-marker::before,
        .gps-location-marker.gps-emoji-marker::after {
            display: none;
        }
        .gps-location-marker::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 44px;
            height: 44px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: rgba(26, 115, 232, 0.18);
            animation: gps-dot-pulse 2.1s ease-out infinite;
        }
        .gps-location-marker::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 14px;
            height: 14px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: #1a73e8;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 1px rgba(26, 115, 232, 0.35), 0 4px 10px rgba(2, 6, 23, 0.22);
        }
        @keyframes gps-dot-pulse {
            0% { transform: translate(-50%, -50%) scale(0.78); opacity: 0.85; }
            75% { transform: translate(-50%, -50%) scale(1.34); opacity: 0; }
            100% { opacity: 0; }
        }

        .natinf-preview {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .section-header .btn-ghost { font-size:12px; padding:4px 8px; }
        .natinf-amende-detail {
            margin-top: 6px;
            padding: 6px 8px;
            background: var(--bg-secondary);
            border-radius: 6px;
            font-size: 11px;
            line-height: 1.6;
        }
        .natinf-amende-row {
            margin-bottom: 2px;
        }
        .natinf-ref {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 4px;
            line-height: 1.4;
        }

        /* â”€â”€â”€â”€â”€ SECTION â”€â”€â”€â”€â”€ */
        .section-header {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--border);
        }

        /* Collapsible sections */
        .collapsible-section {
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .collapsible-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            cursor: pointer;
            background: var(--bg-secondary);
            user-select: none;
            transition: background 0.15s;
            border-radius: 10px;
        }
        .collapsible-section.open .collapsible-header {
            border-radius: 10px 10px 0 0;
        }
        .collapsible-header:hover { background: var(--border); }
        .collapsible-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 14px;
            color: var(--text-primary);
        }
        .collapsible-header-left .collapsible-icon { font-size: 16px; }
        .collapsible-chevron {
            font-size: 12px;
            color: var(--text-muted);
            transition: transform 0.2s;
        }
        .collapsible-section.open .collapsible-chevron { transform: rotate(180deg); }
        .collapsible-body {
            display: none;
            padding: 14px;
        }
        .collapsible-section.open .collapsible-body { display: block; }

        /* â”€â”€â”€â”€â”€ NOTICE â”€â”€â”€â”€â”€ */
        .notice {
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 13px;
            margin-bottom: 12px;
        }

        .notice-info {
            background: var(--accent-light);
            color: var(--accent);
            border: 1px solid rgba(13, 110, 253, 0.2);
        }

        .notice-success {
            background: #d1e7dd;
            color: #0f5132;
        }

        .notice-warning {
            background: #fff3cd;
            color: #664d03;
        }

        /* â”€â”€â”€â”€â”€ NOTE ITEMS â”€â”€â”€â”€â”€ */
        .note-card {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 8px;
        }

        .note-card .note-meta {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .note-card .note-body {
            font-size: 14px;
            line-height: 1.5;
        }

        .note-card .note-loc {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 8px;
        }

        /* â”€â”€ Note action buttons â”€â”€ */
        .note-meta-actions { display: flex; gap: 6px; align-items: center; }
        .note-action-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 15px;
            padding: 4px;
            opacity: 0.55;
            border-radius: 6px;
            transition: opacity 0.15s, background 0.15s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .note-action-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .note-action-btn:hover { opacity: 1; background: var(--bg-tertiary); }
        .note-action-btn-share {
            padding: 4px;
            color: var(--accent);
            opacity: 1;
        }
        .note-action-btn-share:hover { background: rgba(37, 99, 235, 0.16); }
        .note-action-btn-delete { color: #ef4444; }
        .note-action-btn-delete:hover { background: rgba(239,68,68,0.12); }

        .notes-search-row { margin: 8px 0 10px; }
        .notes-search-input {
            width: 100%;
            height: 40px;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0 12px;
            font-size: 14px;
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
        .notes-search-input::placeholder { color: var(--text-muted); }

        /* ── Note quick-capture (mobile-first, Lot 1 refonte) ── */
        .note-gps-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            margin-bottom: 10px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-tertiary);
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text-muted);
        }
        .note-gps-chip .note-gps-dot {
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--text-muted); opacity: 0.5;
            flex: 0 0 auto;
        }
        .note-gps-chip[data-state="acquiring"] .note-gps-dot {
            background: #f59e0b; opacity: 1;
            animation: noteGpsPulse 1.1s ease-in-out infinite;
        }
        .note-gps-chip[data-state="ok"] { color: var(--text-primary); }
        .note-gps-chip[data-state="ok"] .note-gps-dot { background: #22a06b; opacity: 1; }
        .note-gps-chip[data-state="error"] .note-gps-dot { background: #ef4444; opacity: 1; }
        @keyframes noteGpsPulse { 50% { opacity: 0.35; } }
        .note-gps-refresh {
            margin-left: auto;
            width: 40px; height: 32px;
            border: 0; border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font-size: 17px;
            cursor: pointer;
        }
        .note-gps-refresh:hover { background: var(--bg-secondary); color: var(--text-primary); }
        /* Quick actions: two light buttons (Photo / Croquis) + one strong CTA */
        .note-quick-row {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }
        .note-quick-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .note-quick-btn:hover { background: var(--accent-light, #e3edfa); border-color: var(--accent); }
        .note-quick-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
        .note-save-btn {
            width: 100%;
            min-height: 52px;
            font-size: 15.5px;
            font-weight: 700;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .note-save-btn svg { width: 19px; height: 19px; }
        .note-saved-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 10px;
            padding: 10px 12px;
            border: 1px solid rgba(34, 160, 107, 0.4);
            border-radius: 12px;
            background: rgba(34, 160, 107, 0.08);
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }
        /* display:flex above would defeat the hidden attribute — restore it */
        .note-saved-bar[hidden] { display: none; }
        .note-saved-bar .btn { min-height: 38px; }

        /* In-app confirmation dialog (replaces the native confirm()) */
        .note-confirm-overlay {
            position: fixed;
            inset: 0;
            background: rgba(9, 18, 34, 0.55);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            z-index: 620;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            animation: settingsFade 0.15s ease;
        }
        .note-confirm-card {
            width: 100%;
            max-width: 340px;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 22px 20px 18px;
            box-shadow: 0 20px 60px rgba(9, 18, 34, 0.3);
            text-align: center;
            animation: settingsPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .note-confirm-icon {
            width: 46px;
            height: 46px;
            margin: 0 auto 10px;
            border-radius: 50%;
            background: rgba(239, 68, 68, 0.1);
            color: #dc2626;
            display: grid;
            place-items: center;
        }
        .note-confirm-icon svg { width: 22px; height: 22px; }
        .note-confirm-title {
            font-size: 16px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .note-confirm-message {
            margin-top: 6px;
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
        }
        .note-confirm-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }
        .note-confirm-actions .btn {
            flex: 1;
            min-height: 44px;
            border-radius: 11px;
        }
        .note-confirm-danger {
            background: #dc2626;
            border: 1px solid #dc2626;
            color: #fff;
            font-weight: 700;
            cursor: pointer;
        }
        .note-confirm-danger:hover { background: #b91c1c; }

        /* ── Note voice dictation button ── */
        .note-voice-ops {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
        }
        .note-voice-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            flex: 0 0 auto;
            transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
        }
        .note-voice-status {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .note-voice-btn:hover {
            background: var(--bg-tertiary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .note-voice-btn .nv-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
        .note-voice-btn.recording {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.5);
            color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
            animation: nv-pulse 1.5s ease-in-out infinite;
        }
        @keyframes nv-pulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
            50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.18); }
        }
        .note-voice-status {
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        .note-voice-status.recording {
            color: #ef4444;
            font-weight: 600;
        }

        /* â”€â”€ Note editing â”€â”€ */
        .note-editing { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
        .note-edit-area { min-height: 80px; margin-bottom: 8px; font-size: 14px; }
        .note-actions { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
        .note-actions .btn-sm { padding: 4px 10px; font-size: 12px; }

        /* â”€â”€ Note photos â”€â”€ */
        .note-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
        .note-photo-thumb {
            position: relative;
            width: 64px; height: 64px;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid var(--border);
        }
        .note-photo-thumb img {
            width: 100%; height: 100%;
            object-fit: cover;
            cursor: pointer;
        }
        .note-photo-remove {
            position: absolute; top: 2px; right: 2px;
            background: rgba(0,0,0,0.6); color: #fff;
            border: none; border-radius: 50%;
            width: 18px; height: 18px;
            font-size: 12px; line-height: 16px;
            text-align: center;
            cursor: pointer;
        }

        /* â”€â”€ Photo fullscreen â”€â”€ */
        .photo-fullscreen {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.9);
            z-index: 10000;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
        }
        .photo-fullscreen img {
            max-width: 95%; max-height: 85vh;
            border-radius: 8px;
        }
        .photo-fullscreen button {
            margin-top: 16px; padding: 8px 24px;
            background: #fff; color: #000;
            border: none; border-radius: 8px;
            font-size: 14px; font-weight: 600;
            cursor: pointer;
        }

        /* â”€â”€ Share popup â”€â”€ */
        .share-popup-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            display: flex; align-items: center; justify-content: center;
        }
        .share-popup {
            background: var(--bg-primary);
            border-radius: 16px;
            padding: 20px;
            min-width: 280px; max-width: 340px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        .share-popup-title {
            font-weight: 700; font-size: 16px;
            margin-bottom: 14px;
            text-align: center;
        }
        .share-option {
            display: block; width: 100%;
            padding: 10px 14px;
            margin-bottom: 6px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 14px;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            font-weight: 500;
        }
        .share-option:hover { background: var(--bg-tertiary); }
        .share-cancel { border: none; color: var(--text-muted); font-size: 13px; }

        /* â”€â”€ Accident sketch (notes) â”€â”€ */
        .sketch-card {
            margin-top: 12px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--bg-primary);
            overflow: hidden;
        }
        .sketch-collapse-btn {
            width: 100%;
            border: none;
            background: var(--bg-secondary);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            cursor: pointer;
            font-weight: 700;
            font-size: 14px;
        }
        /* prevent global button:hover red accent from colouring the sketch header */
        .sketch-collapse-btn:hover {
            background: var(--accent) !important;
        }
        .sketch-collapse-btn .sketch-collapse-chevron {
            transition: transform 0.2s ease;
            color: var(--text-muted);
        }
        .sketch-card:not(.is-collapsed) .sketch-collapse-btn .sketch-collapse-chevron {
            transform: rotate(180deg);
        }
        .sketch-card.is-collapsed .sketch-body {
            display: none;
        }
        .sketch-body {
            padding: 10px;
        }
        .sketch-head {
            margin-bottom: 8px;
        }
        .sketch-title {
            font-size: 16px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .sketch-sub {
            margin-top: 2px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .sketch-toolbar,
        .sketch-tools,
        .sketch-actions,
        .sketch-ai-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }
        .sketch-toolbar,
        .sketch-ai-box,
        .sketch-tools,
        .sketch-actions {
            margin-top: 8px;
        }
        .sketch-btn {
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-radius: 10px;
            padding: 7px 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .sketch-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .sketch-picker-group {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
        }
        .sketch-picker {
            min-width: 150px;
            max-width: 190px;
            height: 34px;
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 600;
        }
        .sketch-upload-btn {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-radius: 10px;
            padding: 7px 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        /* ── Scene chips + object palette (mobile-first, replaces the selects) ── */
        .sketch-scene-row {
            display: flex;
            gap: 6px;
            margin-top: 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 4px;
            scrollbar-width: thin;
        }
        .sketch-scene-chip {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 38px;
            padding: 7px 12px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
        }
        .sketch-scene-chip.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .sketch-palette {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding: 4px 2px 6px;
            scrollbar-width: thin;
        }
        .sketch-tile {
            flex: 0 0 auto;
            width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 5px 2px 4px;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            background: var(--bg-secondary);
            cursor: pointer;
        }
        .sketch-tile canvas {
            width: 44px;
            height: 34px;
            display: block;
        }
        .sketch-tile span {
            font-size: 9.5px;
            font-weight: 700;
            color: var(--text-muted);
            line-height: 1.1;
            text-align: center;
        }
        .sketch-tile.active {
            border-color: var(--accent);
            background: var(--accent-light, #e3edfa);
        }
        .sketch-tile.active span { color: var(--accent); }

        /* Secondary options accordion (Nouveau + IA) */
        .sketch-options { margin-top: 10px; }
        .sketch-options-body { padding-top: 2px; }

        .sketch-canvas-wrap {
            margin-top: 8px;
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            background: #e7ebf3;
            position: relative;
        }
        .sketch-zoom-controls {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            z-index: 2;
        }
        .sketch-float-controls {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 6px;
            z-index: 2;
        }
        .sketch-zoom-btn {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.15);
            background: rgba(255,255,255,0.9);
            color: #333;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
            backdrop-filter: blur(4px);
            transition: background 0.15s;
        }
        .sketch-zoom-btn:hover {
            background: rgba(255,255,255,1);
        }
        #accidentSketchCanvas {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
            touch-action: none;
        }
        .sketch-hint {
            margin-top: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .sketch-ai-box {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px;
            background: var(--bg-secondary);
        }
        .sketch-ai-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .sketch-ai-status {
            margin-top: 6px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .sketch-ai-status.ok {
            color: #15803d;
        }
        .sketch-ai-status.warn {
            color: #b45309;
        }

        /* â”€â”€â”€â”€â”€ MAP â”€â”€â”€â”€â”€ */
        .map-container {
            flex: 1;
            position: relative;
        }

        /* By default the interactive map fills the right-side area */
        #map { width: 100%; height: 100%; }
        #map.map-hidden { display: none; }

        /* ── Loading overlay (DAE search, etc.) ── */
        .map-loading-overlay {
            display: none;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 900;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(2px);
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 14px;
            pointer-events: auto;
        }
        .map-loading-overlay.visible { display: flex; }
        .map-loading-spinner {
            width: 48px; height: 48px;
            border: 4px solid rgba(255,255,255,0.25);
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: map-spin 0.8s linear infinite;
        }
        @keyframes map-spin { to { transform: rotate(360deg); } }
        .map-loading-label {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            text-shadow: 0 1px 4px rgba(0,0,0,0.5);
            text-align: center;
            max-width: 260px;
            line-height: 1.4;
        }

        /* When a non-map feature is active the interactive map must NOT
               stay visible as the global background. We hide the interactive
               map element and show a neutral feature background instead (map
               instance kept). map.resize() is called when the map is shown again. */
            /*
              Two-level hiding:
              - `#map.map-hidden` hides the map canvas itself (keeps the map container)
              - `.map-container.hidden` completely hides the container (defensive)
            */
            .map-container.hidden { display: none; }
            .map-container.feature-hidden { display: none !important; }
            .feature-bg { display: none; width:100%; height:100%; background: var(--bg-primary); color: var(--text-secondary); align-items: center; justify-content: center; text-align:center; padding:20px; }
            .feature-bg.visible { display: flex; }

            /* On mobile, when the search (Carte) panel is shown as an overlay
               we want the sidebar to be semi-transparent so the map remains
               visible as a background. Keep full-opaque for full-screen
               panels (infra/notes) using the `mobile-full` flag. */
            @media (max-width: 768px) {
                .sidebar:not(.mobile-full) {
                    background: var(--map-surface);
                    backdrop-filter: blur(6px);
                    width: 96% !important;
                    left: 2%;
                    right: 2%;
                }
                /* Make inputs appear to use the full available width when overlayed */
                .sidebar:not(.mobile-full) .sidebar-content { background: transparent; }
            }
            /* Desktop: when sidebar is desktop-full, occupy whole page and hide map */
            .sidebar.desktop-full { width: 100%; border-right: none; }
            .sidebar.desktop-full + .map-container { display: none; }
            /* Constrain content width on wide screens so panels don't stretch edge-to-edge */
            /* Un plafond de largeur reste souhaitable : une ligne de texte de
               1600 px est illisible (l'oeil perd le debut de la ligne suivante).
               Mais 960 px etait cale sur un panneau de lecture, pas sur ces
               outils denses : sur un ecran de 1500 px il restait plus de 250 px
               de vide de chaque cote alors que les formulaires et les cartes,
               eux, se serraient. 1280 px tient une mesure confortable tout en
               laissant respirer les grilles.
               #panelMission garde sa propre regle, sans plafond : son roadbook
               fait sept colonnes. */
            .sidebar.desktop-full .sidebar-content > .sidebar-panel {
                max-width: 1280px;
                margin-left: auto;
                margin-right: auto;
                padding-left: 28px;
                padding-right: 28px;
            }
            /* Le plafond de 960 px convient a un formulaire etroit, pas au
               roadbook : sept colonnes sur un ecran de 1600 px se retrouvaient
               comprimees au centre avec des marges vides de part et d'autre. */
            .sidebar.desktop-full .sidebar-content > #panelMission {
                max-width: none;
                padding-left: 24px;
                padding-right: 24px;
            }
            /* Tablet: use full width with comfortable margins */
            @media (max-width: 1200px) and (min-width: 769px) {
                .sidebar.desktop-full .sidebar-content > .sidebar-panel {
                    max-width: 100%;
                    padding-left: 32px;
                    padding-right: 32px;
                }
            }

            /* DEPRECATED: desktop 'route-modal' drawer removed — itinerary is inline in the top overlay now. */

            /* Inline route compact layout (moved above place search) */
            .route-compact {
                display: block;
                background: var(--surface);
                border-radius: 8px;
                padding: 0; /* collapsed by default */
                box-shadow: none;
                margin-bottom: 0;
                transform: translateY(-6px);
                opacity: 0;
                max-height: 0;
                overflow: hidden;
                transition: max-height 320ms ease, transform 240ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease, padding 200ms ease, box-shadow 200ms ease;
            }
            /* .cp-btn-route is now visible – re-enabled itinerary entry point */
            .route-compact.route-compact--active { transform: translateY(0); opacity: 1; }
            .route-compact.route-compact--open {
                padding: 4px 6px 2px 6px;
                box-shadow: var(--card-shadow);
                margin-bottom: 0;
                transform: translateY(0);
                opacity: 1;
                max-height: min(68vh, 360px);
                overflow: auto;
                /* Ensure the expanded route panel is always above the search row (avoid overlap) */
                position: relative;
                z-index: 1200;
                pointer-events: auto;
            }
            .route-compact.route-compact--dragging { transition: none; }
            /* Compact itinerary layout */
            .route-compact .form-group { margin-bottom: 2px; }
            .route-compact .form-label-sm {
                font-size: 9px;
                color: var(--text-muted);
                margin-bottom: 0;
                font-weight: 700;
                letter-spacing: 0.1px;
            }
            .route-compact .form-input {
                height: 32px;
                padding: 3px 7px;
                font-size: 12px;
                border-radius: 6px;
            }
            .route-compact .route-actions {
                display: flex !important;
                gap: 3px !important;
                align-items: center;
                justify-content: stretch;
            }
            .route-compact .route-actions .btn {
                flex: 1 1 0;
                width: auto;
                min-width: 0;
                padding: 4px 7px;
                font-size: 12px;
                height: 30px;
                white-space: nowrap;
            }
            .route-compact .btn { line-height: 1; }
            .route-compact .route-mode {
                margin: 0 !important;
                gap: 3px !important;
            }
            .route-compact .route-mode .btn-mode {
                padding: 4px 8px;
                font-size: 12px;
                height: 30px;
                min-width: 0;
            }
            .route-compact #routeSummary {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                min-height: 0;
                font-size: 11px !important;
            }
            .route-input-grid {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 4px;
                align-items: stretch;
                margin-bottom: 2px;
            }
            .route-input-main {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }
            .route-core-row {
                display: flex;
                align-items: center;
                gap: 3px;
                border: 1px solid transparent;
                border-radius: 8px;
                transition: border-color 140ms ease, background 140ms ease;
            }
            .route-core-row.route-core-drag-over {
                border-color: var(--accent);
                background: rgba(11, 94, 183, 0.08);
            }
            .route-core-row.route-core-selected {
                border-color: var(--accent);
                background: rgba(11, 94, 183, 0.14);
            }
            .route-core-row.route-core-dragging {
                opacity: 0.45;
            }
            .route-core-drag-handle {
                width: 24px;
                min-width: 24px;
                height: 32px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: grab;
                color: var(--accent);
                font-size: 15px;
                font-weight: 700;
                user-select: none;
                flex-shrink: 0;
                border: 1px solid rgba(11, 94, 183, 0.32);
                border-radius: 7px;
                background: rgba(11, 94, 183, 0.08);
                touch-action: none;
            }
            .route-core-drag-handle:hover { background: rgba(11, 94, 183, 0.16); }
            .route-core-drag-handle:active { cursor: grabbing; }
            .route-core-remove {
                width: 30px;
                height: 30px;
                min-width: 30px;
                border: 1px solid rgba(239, 68, 68, 0.38);
                background: rgba(239, 68, 68, 0.14);
                color: #b91c1c;
                font-size: 16px;
                font-weight: 800;
                cursor: pointer;
                display: none;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                transition: background 140ms, color 140ms, border-color 140ms, transform 140ms;
                padding: 0;
                line-height: 1;
                box-shadow: 0 4px 10px rgba(2, 6, 23, 0.12);
            }
            .route-core-remove:hover {
                background: rgba(239, 68, 68, 0.24);
                color: #991b1b;
                border-color: rgba(239, 68, 68, 0.6);
                transform: translateY(-1px);
            }
            .route-input-side {
                display: flex;
                flex-direction: column;
                gap: 3px;
                justify-content: center;
            }
            .route-icon-btn {
                width: 32px !important;
                min-width: 32px !important;
                height: 32px !important;
                padding: 0 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                font-size: 15px !important;
                line-height: 1 !important;
            }
            .route-icon-btn svg {
                width: 16px;
                height: 16px;
            }
            .route-compact #routeSummary:empty { display: none; }
            .route-compact-header {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 3px;
                margin-bottom: 2px;
                cursor: grab;
                touch-action: none;
            }
            .route-compact-grab {
                margin-right: auto;
                width: 44px;
                height: 7px;
                border-radius: 999px;
                background: rgba(2, 6, 23, 0.24);
                cursor: grab;
                flex: 0 0 auto;
            }
            .route-compact.route-compact--dragging .route-compact-header { cursor: grabbing; }
            .route-compact.route-compact--dragging .route-compact-grab { cursor: grabbing; background: rgba(0,0,0,0.2); }
            .route-compact-header .btn {
                width: auto;
                min-width: 0;
                height: 24px;
                padding: 2px 6px;
                font-size: 11px;
                line-height: 1;
                cursor: pointer;
            }
            .map-search-inner.route-open .search-row { display: none !important; }
            .map-search-inner .route-compact.route-compact--open ~ .search-row { display: none !important; }
            .map-search-inner.route-open {
                background: transparent !important;
                padding: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                transform: translate(var(--route-drag-x, 0px), var(--route-drag-y, 0px));
                position: relative;
                z-index: 1201;
            }
            .map-search-inner.route-open.route-open-dragging {
                transition: none !important;
            }
            @media (max-width: 768px) {
                .route-compact.route-compact--open { max-height: min(62vh, 320px); padding: 2px 4px; }
                .route-compact .route-actions { flex-direction: row; }
                .route-compact .route-actions .btn { width: auto; }
            }
            /* overlay-specific sizing (reduced for visual balance) */
            .map-overlay-search .route-compact { margin-top: 0; max-width:560px; width:100%; }
            .route-row { display:flex; gap:8px; align-items:flex-end; }
            .route-swap-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--bg-muted); color:var(--text-primary); border:1px solid rgba(0,0,0,0.06); cursor:pointer; transition: transform 160ms ease, background 160ms ease; }
            .route-swap-btn:hover { transform: rotate(18deg); background: rgba(0,0,0,0.04); }
            @media (max-width:768px) { .route-row { flex-direction:column; } .route-swap-btn { width:40px; height:32px; margin-left:0; } }

            /* ── Waypoints / étapes ── */
            .route-waypoints-container {
                display: flex;
                flex-direction: column;
                gap: 3px;
                margin: 0;
                max-height: 180px;
                overflow-y: auto;
            }
            .route-waypoint-row {
                display: flex;
                align-items: center;
                gap: 3px;
                animation: wpFadeIn 200ms ease;
            }
            @keyframes wpFadeIn {
                from { opacity: 0; transform: translateY(-6px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .route-waypoint-row .form-input {
                flex: 1;
                height: 32px;
                padding: 3px 7px;
                font-size: 12px;
                border-radius: 6px;
            }
            .route-waypoint-row.wp-drag-over {
                border-top: 2px solid var(--primary);
            }
            .route-waypoint-row.wp-dragging {
                opacity: 0.4;
            }
            .route-wp-drag-handle {
                width: 20px;
                min-width: 20px;
                height: 32px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: grab;
                color: var(--text-muted);
                font-size: 14px;
                user-select: none;
                flex-shrink: 0;
            }
            .route-wp-drag-handle:active { cursor: grabbing; }
            .route-wp-remove {
                width: 30px;
                height: 30px;
                min-width: 30px;
                border: 1px solid rgba(239, 68, 68, 0.38);
                background: rgba(239, 68, 68, 0.14);
                color: #b91c1c;
                font-size: 16px;
                font-weight: 800;
                cursor: pointer;
                display: none;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                transition: background 140ms, color 140ms, border-color 140ms, transform 140ms;
                padding: 0;
                line-height: 1;
                box-shadow: 0 4px 10px rgba(2, 6, 23, 0.12);
            }
            .route-wp-remove:hover {
                background: rgba(239, 68, 68, 0.24);
                color: #991b1b;
                border-color: rgba(239, 68, 68, 0.6);
                transform: translateY(-1px);
            }
            .route-add-wp-btn {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 5px 11px;
                margin-top: 3px;
                margin-bottom: 2px;
                font-size: 12px;
                color: var(--accent);
                font-weight: 700;
                background: rgba(11, 94, 183, 0.12);
                border: 1px solid rgba(11, 94, 183, 0.42);
                border-radius: 6px;
                cursor: pointer;
                transition: background 150ms, color 150ms, border-color 150ms;
                min-height: 30px;
            }
            .route-add-wp-btn:hover {
                background: var(--accent);
                color: #fff;
                border-color: var(--accent);
            }
            .route-add-wp-btn svg, .route-add-wp-btn .wp-icon {
                width: 14px;
                height: 14px;
                flex-shrink: 0;
            }
            .mission-planner-panel {
                display: none;
                position: fixed;
                top: 62px;
                left: 12px;
                width: min(400px, calc(100vw - 24px));
                padding: 0;
                border-radius: 14px;
                border: 1px solid rgba(37, 99, 235, 0.18);
                background: linear-gradient(180deg, rgba(239, 246, 255, 0.97), rgba(248, 250, 252, 0.99));
                box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
                max-height: min(82dvh, 860px);
                overflow: hidden;
                resize: both;
                min-width: 280px;
                min-height: 220px;
                flex-direction: column;
                z-index: 2000;
            }
            .mission-planner-panel.visible {
                display: flex;
            }
            .mission-planner-panel.mp-dragging {
                opacity: 0.92;
                user-select: none;
            }
            .mission-planner-panel-drag {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 5px 0 2px;
                cursor: grab;
                flex-shrink: 0;
            }
            .mission-planner-panel-drag:active { cursor: grabbing; }
            .mission-planner-panel-drag .mp-drag-pill {
                width: 32px;
                height: 4px;
                border-radius: 2px;
                background: rgba(148, 163, 184, 0.45);
            }
            .mission-planner-body {
                padding: 6px 10px 10px;
                overflow-y: auto;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
                flex: 1 1 auto;
                min-height: 0;
            }
            /* CAUSE DU DEFILEMENT BLOQUE DANS L'ONGLET.
               .mission-planner-body porte overflow-y:auto + overscroll-behavior:
               contain. C'est juste pour le panneau FLOTTANT de 340 px pose sur la
               carte : `contain` empeche volontairement le defilement de se
               propager au parent, sinon arriver en bas de la liste ferait bouger
               la carte. Mais dans l'onglet, ce meme `contain` interceptait la
               molette et refusait de la transmettre a #panelMission, le vrai
               conteneur de defilement : la page semblait figee alors que le
               clavier, lui, fonctionnait. Dans l'onglet, ce div n'a aucune raison
               d'etre un conteneur de defilement.
               Verifie : la molette fonctionnait sur la marge gauche du panneau
               (hors de ce div) et nulle part a l'interieur. */
            #missionTabView .mission-planner-body {
                overflow: visible;
                overscroll-behavior: auto;
                padding: 0;
            }

            .route-compact.mission-planner-active .route-waypoints-container,
            .route-compact.mission-planner-active .route-add-wp-btn,
            .route-compact.mission-planner-active .route-input-side,
            .route-compact.mission-planner-active .route-core-remove,
            .route-compact.mission-planner-active .route-wp-remove {
                display: none !important;
            }
            .route-compact.mission-planner-active .route-core-row {
                background: rgba(255, 255, 255, 0.76);
                border-radius: 12px;
            }
            .mission-planner-head {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 6px;
                margin-bottom: 4px;
                cursor: grab;
            }
            .mission-planner-head:active { cursor: grabbing; }
            .mission-planner-head-actions {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                flex: 0 0 auto;
            }
            .mission-planner-kicker {
                font-size: 12px;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: #64748b;
                font-weight: 700;
            }
            .mission-planner-title {
                font-size: 14px;
                font-weight: 800;
                color: #0f172a;
            }
            .mission-planner-head-status {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 72px;
                padding: 4px 8px;
                border-radius: 999px;
                border: 1px solid rgba(37, 99, 235, 0.18);
                background: rgba(255, 255, 255, 0.78);
                color: #1e40af;
                font-size: 12px;
                font-weight: 800;
                white-space: nowrap;
            }
            .mission-planner-head-status.is-live {
                background: rgba(37, 99, 235, 0.12);
                border-color: rgba(37, 99, 235, 0.3);
                color: #1d4ed8;
            }
            .mission-planner-close-btn {
                width: 28px;
                height: 28px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                border: 1px solid rgba(148, 163, 184, 0.28);
                background: rgba(255, 255, 255, 0.88);
                color: #64748b;
                font-size: 20px;
                font-weight: 700;
                line-height: 1;
                cursor: pointer;
                transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease;
            }
            .mission-planner-close-btn:hover {
                transform: translateY(-1px);
                border-color: rgba(220, 38, 38, 0.28);
                color: #b91c1c;
                background: rgba(254, 242, 242, 0.96);
            }
            .mission-planner-toolbar {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 5px;
                margin-bottom: 6px;
            }
            .mission-toolbar-btn {
                border: 1px solid rgba(15, 23, 42, 0.08);
                background: rgba(255, 255, 255, 0.86);
                color: #0f172a;
                border-radius: 999px;
                padding: 5px 10px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease;
            }
            .mission-toolbar-btn:hover {
                transform: translateY(-1px);
                border-color: rgba(37, 99, 235, 0.24);
            }
            .mission-toolbar-btn:disabled {
                opacity: 0.48;
                cursor: not-allowed;
                transform: none;
            }
            .mission-toolbar-btn.active {
                background: #2563eb;
                border-color: #2563eb;
                color: #fff;
            }
            .mission-toolbar-btn--primary {
                background: #2563eb;
                border-color: #2563eb;
                color: #fff;
                box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
            }
            .mission-toolbar-btn--danger {
                border-color: rgba(220, 38, 38, 0.2);
                color: #b91c1c;
            }
            .mission-planner-hint {
                margin-bottom: 5px;
                font-size: 11px;
                line-height: 1.4;
                color: #475569;
            }
            .mission-planner-summary-card {
                margin-bottom: 6px;
                padding: 8px 10px;
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.88);
                border: 1px solid rgba(148, 163, 184, 0.18);
            }
            .mission-planner-summary-card.is-loading,
            .mission-planner-summary-card.is-idle {
                color: #475569;
            }
            .mission-planner-summary-card.is-warning {
                color: #92400e;
                background: rgba(254, 243, 199, 0.72);
                border-color: rgba(217, 119, 6, 0.2);
            }
            .mission-planner-summary-card.is-pending {
                border-color: rgba(37, 99, 235, 0.22);
                background: rgba(219, 234, 254, 0.72);
            }
            .mission-planner-summary-main {
                font-size: 18px;
                font-weight: 900;
                color: #0f172a;
                display: flex;
                align-items: baseline;
                gap: 6px;
                flex-wrap: wrap;
            }
            .mission-planner-summary-main span {
                font-size: 12px;
                font-weight: 700;
                color: #2563eb;
            }
            .mission-planner-summary-sub {
                margin-top: 4px;
                font-size: 12px;
                color: #64748b;
            }
            .mission-planner-section + .mission-planner-section {
                margin-top: 6px;
            }
            .mission-planner-section-title {
                margin-bottom: 4px;
                font-size: 11px;
                font-weight: 800;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: #334155;
            }
            /* Dans l'onglet, chaque bloc est une CARTE, comme dans la console
               admin. Sans boite, les sections n'etaient que des bandes de
               couleur pleine largeur collees a 6 px : rien ne disait ou une
               section commence ni ou elle finit. Portee limitee a
               #missionTabView — le panneau flottant de la carte fait 340 px et
               n'a pas a heriter d'un padding de carte. */
            #missionTabView .mission-planner-section {
                background: var(--bg-primary);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                box-shadow: var(--shadow-sm);
                padding: 14px 16px;
            }
            #missionTabView .mission-planner-section + .mission-planner-section {
                margin-top: 12px;
            }
            /* Un titre gris de 11 px pesait MOINS que le corps de texte de
               12 px qu'il titre : hierarchie inversee. Les capitales restent
               reservees aux libelles de champ. */
            #missionTabView .mission-planner-section-title {
                display: flex; align-items: center; gap: 8px;
                margin: 0 0 10px;
                font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
                text-transform: none; color: var(--text-primary);
            }
            .mission-planner-empty,
            .mission-planner-segments-empty {
                padding: 8px 10px;
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.74);
                border: 1px dashed rgba(148, 163, 184, 0.35);
                color: #64748b;
                font-size: 12px;
                line-height: 1.45;
            }
            .mission-planner-checkpoints,
            .mission-planner-segments {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .mission-checkpoint-row,
            .mission-segment-row {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 11px;
                border-radius: 14px;
                background: rgba(255, 255, 255, 0.88);
                border: 1px solid rgba(148, 163, 184, 0.18);
            }
            .mission-checkpoint-row--start {
                border-color: rgba(22, 163, 74, 0.25);
            }
            .mission-checkpoint-row--end {
                border-color: rgba(220, 38, 38, 0.22);
            }
            .mission-checkpoint-badge {
                width: 30px;
                height: 30px;
                flex: 0 0 30px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                background: #2563eb;
                color: #fff;
                font-size: 13px;
                font-weight: 800;
                box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
            }
            .mission-checkpoint-row--start .mission-checkpoint-badge {
                background: #16a34a;
                box-shadow: 0 8px 18px rgba(22, 163, 74, 0.22);
            }
            .mission-checkpoint-row--end .mission-checkpoint-badge {
                background: #dc2626;
                box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
            }
            .mission-checkpoint-main {
                min-width: 0;
                flex: 1 1 auto;
            }
            .mission-checkpoint-title {
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: wrap;
            }
            .mission-checkpoint-role {
                font-size: 11px;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: #2563eb;
            }
            .mission-checkpoint-name {
                min-width: 0;
                font-size: 13px;
                font-weight: 700;
                color: #0f172a;
            }
            .mission-checkpoint-meta {
                margin-top: 2px;
                font-size: 11px;
                color: #64748b;
            }
            .mission-planner-pill {
                display: inline-flex;
                align-items: center;
                padding: 3px 8px;
                border-radius: 999px;
                background: rgba(37, 99, 235, 0.12);
                color: #1d4ed8;
                font-size: 12px;
                font-weight: 800;
            }
            /* Effectif engage sur un jalon : champ compact, aligne avec les
               boutons d'action pour ne pas casser la hauteur de la ligne. */
            /* Jalonnages enregistres : la liste n'avait aucun style, d'ou un
               nom qui debordait, des metadonnees collees et un bouton nu. */
            /* Etat vide de l'onglet Missions : c'est le premier ecran que voit
               quelqu'un qui decouvre la fonctionnalite, il doit expliquer et agir. */
            /* Barre de capture sur la carte : volontairement minimale. Poser un
               jalon exige la carte, la lire n'en a pas besoin — la liste, les
               segments et le briefing vivent dans l'onglet Missions. */
            /* min-height: 0 : la barre de capture tient en cinq lignes, le
               min-height de 220 px du panneau complet lui laissait un bas vide. */
            #missionPlannerPanel:has(.mission-capture-bar) {
                width: auto; max-width: 340px; min-height: 0;
            }
            .mission-capture-bar { padding: 4px 12px 12px; }
            .mission-capture-head {
                display: flex; align-items: center; gap: 10px; cursor: move;
                padding: 4px 0 8px;
            }
            .mission-capture-count { font-size: 13.5px; font-weight: 800; color: #0f172a; }
            .mission-capture-state {
                font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .04em; color: #64748b;
                background: rgba(148, 163, 184, 0.18); border-radius: 999px; padding: 2px 8px;
            }
            .mission-capture-state.is-live { color: #1E7A4F; background: rgba(30, 122, 79, 0.14); }
            .mission-capture-head .mission-planner-close-btn { margin-left: auto; }
            .mission-capture-last {
                font-size: 12px; color: #334155; margin-bottom: 10px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            .mission-capture-last.is-empty { color: #64748b; font-style: italic; }
            .mission-capture-actions { display: flex; gap: 6px; flex-wrap: wrap; }
            /* Deplacer et supprimer un jalon se font au doigt sur la pastille :
               sans cette ligne, rien ne le dit sur mobile (pas de survol). */
            .mission-capture-tip {
                margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: #64748b;
            }
            /* Blocs de groupe dans l'onglet Missions : un tableau par groupe. */
        .mission-groupe-bloc + .mission-groupe-bloc { margin-top: 16px; }
        .mission-groupe-bloc-tete {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 8px 10px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            background: var(--accent-soft);
            border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
            border-bottom: 0;
        }
        .mission-groupe-bloc-nom { font-size: 13.5px; font-weight: 800; color: var(--accent); }
        .mission-groupe-bloc-chef { font-size: 12px; color: var(--text-secondary); }
        .mission-groupe-bloc-tete .mission-groupe-cpt { margin-left: auto; }
        .mission-groupe-bloc--orphelins .mission-groupe-bloc-tete {
            background: var(--panel-inset); border-color: var(--border);
        }
        .mission-groupe-bloc--orphelins .mission-groupe-bloc-nom { color: var(--text-secondary); }
        .mission-groupe-bloc .mission-jalons-wrap { margin-top: 0; }

        /* Modale de confirmation. Remplace confirm(), qui affiche le nom de
           domaine, ignore la charte et ne distingue pas une action destructive. */
        .mission-modale-fond {
            position: fixed; inset: 0; z-index: 12000;
            display: flex; align-items: center; justify-content: center;
            padding: 20px; background: rgba(9, 16, 30, 0.55);
            -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
            animation: mmFond .14s ease-out;
        }
        @keyframes mmFond { from { opacity: 0; } to { opacity: 1; } }
        .mission-modale {
            width: min(460px, 100%);
            background: var(--bg-primary); color: var(--text-primary);
            border: 1px solid var(--border); border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 20px 22px;
            animation: mmBoite .16s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes mmBoite { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
        .mission-modale-titre {
            display: flex; align-items: center; gap: 9px;
            font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em;
            margin-bottom: 10px;
        }
        .mission-modale-ico { font-size: 18px; }
        .mission-modale-corps { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
        .mission-modale-corps p { margin: 0 0 8px; }
        .mission-modale-corps p:last-child { margin-bottom: 0; }
        .mission-modale-corps b { color: var(--text-primary); }
        .mission-modale-avert {
            margin-top: 10px !important; padding: 8px 11px;
            border-radius: var(--radius-sm);
            background: var(--warning-soft); color: var(--warning);
            border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
        }
        .mission-modale-actions {
            display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
        }
        .mission-modale-btn {
            cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
            min-height: 42px; padding: 9px 18px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--bg-primary); color: var(--text-primary);
        }
        .mission-modale-btn:hover { background: var(--panel-inset); }
        .mission-modale-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .mission-modale-btn--primaire {
            background: var(--accent); border-color: var(--accent); color: #fff;
        }
        .mission-modale-btn--primaire:hover { background: var(--accent-hover); }
        /* L'action destructive est nommee et coloree : « OK » ne disait pas ce
           qui allait etre detruit. */
        .mission-modale-btn--danger {
            background: var(--danger); border-color: var(--danger); color: #fff;
        }
        .mission-modale-btn--danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }
        @media (max-width: 520px) {
            .mission-modale-actions { flex-direction: column-reverse; }
            .mission-modale-btn { width: 100%; min-height: 48px; }
        }

        /* Plan de l'itineraire dans l'onglet Missions. */
        .mission-plan-img {
            display: block; width: 100%; height: auto;
            border-radius: var(--radius-sm); border: 1px solid var(--border);
        }
        .mission-plan-note {
            margin-top: 8px; padding: 8px 11px; border-radius: var(--radius-sm);
            font-size: 12px; line-height: 1.5;
            background: var(--warning-soft); color: var(--warning);
            border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
        }
        .mission-plan-vide {
            padding: 18px 14px; text-align: center;
            font-size: 12.5px; color: var(--text-secondary);
            background: var(--panel-inset);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
        }

        /* ── Geometrie commune des commandes ──
           Cinq familles de boutons cohabitaient dans le seul onglet Notes
           (.note-quick-btn, .note-save-btn, .note-voice-btn, .note-action-btn,
           .note-gps-refresh), plus autant dans le croquis et le secourisme,
           chacune avec sa hauteur, son rayon et sa graisse. Aucune classe n'est
           renommee — le JS les interroge par selecteur — on leur donne la meme
           geometrie.
           Plancher de 44 px : l'application s'utilise en intervention, parfois
           avec des gants, et une dizaine de ces commandes faisaient 24 a 36 px. */
        #panelNotes .note-quick-btn,
        #panelNotes .note-voice-btn,
        #panelNotes .sketch-btn,
        #panelNotes .sketch-upload-btn,
        #panelNotes .sketch-collapse-btn,
        #panelFirstAid .metro-mode-btn,
        #panelFirstAid .metro-preset-btn,
        #panelFirstAid .firstaid-audience-btn,
        #panelTranslate .translate-speak-btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 7px;
            min-height: 44px; padding: 10px 16px;
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--panel-inset); color: var(--text-primary);
            font: inherit; font-size: 13.5px; font-weight: 700;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        #panelFirstAid .metro-mode-btn.active,
        #panelFirstAid .metro-preset-btn.active,
        #panelFirstAid .firstaid-audience-btn.active {
            background: var(--accent-soft); color: var(--accent);
            border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        }
        #panelTranslate .translate-speak-btn {
            background: var(--accent); border-color: var(--accent); color: #fff;
        }
        /* L'enregistrement de note est LE bouton de l'onglet : il reste plein
           et pleine largeur. */
        #panelNotes .note-save-btn {
            min-height: 50px; font-size: 15px; width: 100%;
            border-radius: var(--radius-sm);
        }

        /* Commandes en icone seule : carre de 44 px, sans exception. */
        #panelInfra .natinf-fav-btn,
        #panelNotes .note-action-btn,
        #panelNotes .note-gps-refresh,
        #panelNotes .sketch-zoom-btn,
        #panelInfra .card-toggle,
        #panelFirstAid .card-toggle {
            width: 44px; height: 44px; flex: 0 0 auto;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: var(--radius-sm);
        }
        #panelNotes .sketch-zoom-btn {
            background: var(--bg-primary); color: var(--text-primary);
            border: 1px solid var(--border);
        }
        /* Le selecteur de couleur du croquis etait a 34 px de haut. */
        #panelNotes .sketch-picker { height: 44px; }
        /* Ces deux regles rabaissaient explicitement le plancher de .btn. */
        #panelInfra .natinf-favorites-tools .btn { height: auto; min-height: 44px; }
        #panelFirstAid .firstaid-ai-actions .btn { min-height: 44px; }
        #panelInfra .section-header .btn-ghost { font-size: 13px; padding: 8px 14px; min-height: 40px; }

        /* Chips : une seule recette pilule, atteignable au doigt. */
        #panelInfra .natinf-chip,
        #panelNotes .sketch-scene-chip {
            display: inline-flex; align-items: center; gap: 6px;
            min-height: 44px; padding: 8px 14px;
            border: 1px solid var(--border); border-radius: 999px;
            background: var(--panel-inset); color: var(--text-secondary);
            font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
        }
        #panelInfra .natinf-chip.active,
        #panelNotes .sketch-scene-chip.active {
            background: var(--accent); border-color: var(--accent); color: #fff;
        }
        /* Le champ de recherche des Notes dupliquait .form-input en divergeant
           (hauteur, rayon, fond, et aucun :focus) : deux champs de recherche de
           l'application ne se ressemblaient pas. */
        #panelNotes .notes-search-input {
            min-height: 44px; padding: 11px 14px;
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--bg-primary); color: var(--text-primary);
            font-size: 15px; width: 100%; box-sizing: border-box;
        }
        #panelNotes .notes-search-input:focus {
            outline: none; border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        /* .firstaid-card figurait dans la recette de CARTE alors qu'elle est
           imbriquee DANS .collapsible-section : on obtenait trois niveaux de
           cadre empiles (panneau borde et ombre > section bordee > fiche
           bordee). Une fiche de conduite a tenir est un bloc interne : fond
           tonal, bordure douce, aucune ombre. Le modele reste celui de la
           console admin — le panneau porte l'ombre, la section la bordure, le
           bloc interne la teinte. */
        #panelFirstAid .collapsible-section .firstaid-card {
            background: var(--panel-inset);
            border: 1px solid var(--border-soft);
            border-radius: var(--radius-sm);
            box-shadow: none;
        }

        /* ── Badges et etats sur jetons ──
           Une quinzaine de couleurs etaient ecrites en dur (#fff3cd, #e8f0ff,
           #fce4ec, rgba(245,158,11,.15)...) : elles restaient claires sur fond
           sombre, avec un texte fonce par-dessus. Une seule recette de pilule,
           declinee par jeton d'etat. */
        #panelInfra .natinf-points-badge,
        #panelInfra .natinf-category-badge,
        #panelInfra .natinf-best-badge,
        #panelInfra .natinf-tab-count,
        #panelInfra .natinf-amende-delit,
        #panelInfra .natinf-amende-crime,
        #panelFirstAid .firstaid-ai-triage,
        .llm-badge {
            display: inline-flex; align-items: center; gap: 4px;
            border-radius: 999px; padding: 3px 9px;
            font-size: 11.5px; font-weight: 700; line-height: 1.4;
            border: 1px solid transparent;
        }
        /* Le degrade violet du badge IA n'appartenait a aucune palette du produit. */
        .llm-badge,
        #panelInfra .natinf-category-badge {
            background: var(--accent-soft); color: var(--accent);
            border-color: color-mix(in srgb, var(--accent) 22%, transparent);
        }
        #panelInfra .natinf-points-badge,
        #panelInfra .natinf-best-badge,
        #panelInfra .natinf-tab-count,
        #panelInfra .natinf-amende-delit,
        #panelFirstAid .firstaid-ai-triage.high {
            background: var(--warning-soft); color: var(--warning);
            border-color: color-mix(in srgb, var(--warning) 22%, transparent);
        }
        #panelInfra .natinf-amende-crime,
        #panelFirstAid .firstaid-ai-triage.critical {
            background: var(--danger-soft); color: var(--danger);
            border-color: color-mix(in srgb, var(--danger) 22%, transparent);
        }
        #panelFirstAid .firstaid-ai-triage.low {
            background: var(--success-soft); color: var(--success);
            border-color: color-mix(in srgb, var(--success) 22%, transparent);
        }
        #panelFirstAid .firstaid-ai-status.ok, #panelNotes .sketch-ai-status.ok { color: var(--success); }
        #panelFirstAid .firstaid-ai-status.warn, #panelNotes .sketch-ai-status.warn { color: var(--warning); }

        /* Les trois notices avaient leurs couleurs en dur, sans variante sombre. */
        .notice-success {
            background: var(--success-soft) !important; color: var(--success) !important;
            border: 1px solid color-mix(in srgb, var(--success) 22%, transparent) !important;
        }
        .notice-warning {
            background: var(--warning-soft) !important; color: var(--warning) !important;
            border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent) !important;
        }
        .notice-info {
            background: var(--accent-soft) !important; color: var(--accent) !important;
            border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important;
        }

        /* L'etat porte sur le CONTENEUR, pas seulement sur la pastille : c'est le
           piege deja documente dans la console admin, ou une pastille coloree dans
           une puce neutre ne se remarque pas. */
        #panelNotes .note-gps-chip[data-state="ok"] {
            border-color: color-mix(in srgb, var(--success) 45%, var(--border));
            background: var(--success-soft);
        }
        #panelNotes .note-gps-chip[data-state="acquiring"] {
            border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
            background: var(--warning-soft);
        }
        #panelNotes .note-gps-chip[data-state="error"] {
            border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
            background: var(--danger-soft);
        }

        /* B2 — Secourisme : une seule urgence. Deux CTA rouges de poids egal
           (appel DAE et dictee vocale) se disputaient l'attention a cote d'un
           primaire et d'un secondaire : quatre boutons equivalents. Le DAE reste
           plein, la dictee devient tonale jusqu'a l'enregistrement. */
        #panelFirstAid .firstaid-dae-btn {
            background: var(--danger); border-color: var(--danger); color: #fff;
            font-weight: 800;
        }
        #panelFirstAid .btn-voice-hot:not(.btn-danger) {
            background: var(--danger-soft); color: var(--danger);
            border-color: color-mix(in srgb, var(--danger) 45%, transparent);
        }
        /* Deux barres d'accent laterales de couleurs sans rapport : meme jeton. */
        #panelFirstAid .firstaid-metronome-top { border-left-color: var(--success); }

        /* ═══════════════════════════════════════════════════════════════
           SYSTEME DE DESIGN PARTAGE — Notes, Infractions, Secourisme, Interprete
           Aligne sur frontend/admin.html. Trois niveaux, et un seul niveau
           d'elevation : le panneau porte l'ombre, la carte porte la bordure,
           le bloc interne est tonal. Empiler des cartes ombrees dans des cartes
           ombrees est ce qui produisait des cadres a trois ou quatre epaisseurs.
           ═══════════════════════════════════════════════════════════════ */

        /* NIVEAU 2 — la carte. Une recette, tous les selecteurs existants.
           Aucune classe n'est renommee : le JS de natinf.js, firstaid.js et
           notes.js interroge ces noms. */
        #panelInfra > .collapsible-section,
        #panelFirstAid > .collapsible-section,
        #panelTranslate .translate-section,
        #panelNotes .note-card,
        #panelNotes .sketch-card,
        #panelFirstAid .firstaid-card,
        #panelInfra .result-card {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: none;
            margin-bottom: 12px;
        }

        /* NIVEAU 3 — le bloc interne : tonal, sans ombre. --bg-secondary valant
           #ffffff en clair, ces blocs etaient purement invisibles. */
        #panelFirstAid .firstaid-section-card,
        #panelFirstAid .firstaid-ai-result,
        #panelFirstAid .firstaid-subtle,
        #panelNotes .sketch-ai-box,
        #panelInfra .natinf-amende-detail,
        #panelTranslate .translate-hint {
            background: var(--panel-inset);
            border: 1px solid var(--border-soft);
            border-radius: var(--radius-sm);
            box-shadow: none;
        }

        /* Cartes dans une carte : on degonfle les conteneurs intermediaires. */
        #panelTranslate .translate-module {
            background: transparent; border: 0; box-shadow: none; padding: 0;
        }
        #panelFirstAid .firstaid-section-card { box-shadow: none; }
        #panelFirstAid .firstaid-card:hover { box-shadow: none; }

        /* En-tete de section : lisible, et surtout VISIBLE en clair. */
        #panelInfra .collapsible-header,
        #panelFirstAid .collapsible-header {
            background: var(--panel-inset);
            border-radius: var(--radius) var(--radius) 0 0;
            min-height: 48px;
        }
        #panelInfra .collapsible-header:hover,
        #panelFirstAid .collapsible-header:hover { background: var(--accent-soft); }

        /* Une seule etiquette pour toute l'application. Quatre variantes du meme
           libelle cohabitaient, plus une dizaine de style= en ligne. */
        .form-label,
        .form-label-sm,
        #panelTranslate .translate-lang-select label {
            display: block;
            font-size: 12px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 5px;
        }
        /* L'aide contextuelle n'existait pas : elle etait ecrite en style= en
           ligne a chaque fois qu'on en avait besoin. */
        .form-hint {
            display: block;
            font-size: 13px; line-height: 1.5;
            color: var(--text-muted);
            margin-top: 5px;
        }

        /* Le lien Legifrance est injecte par natinf.js et n'avait AUCUN style :
           il s'affichait avec les couleurs par defaut du navigateur, non
           themees, et une cible tactile inexistante. */
        .legifrance-link {
            color: var(--accent); text-decoration: none; font-weight: 700;
            font-size: 13px;
            display: inline-flex; align-items: center; gap: 6px;
            min-height: 44px; padding: 8px 0;
        }
        .legifrance-link:hover { text-decoration: underline; }

        /* Surfaces qui etaient en dur et cassaient le theme sombre. */
        #panelNotes .sketch-canvas-wrap { background: var(--panel-inset); }
        #panelNotes .sketch-zoom-btn {
            background: var(--bg-primary); color: var(--text-primary);
            border: 1px solid var(--border);
        }
        #panelFirstAid .fa-photo-wrap { background: var(--panel-inset); }
        /* Une barre d'accent verte en dur a cote d'une bleue : meme jeton. */
        #panelFirstAid .firstaid-metronome-top { border-left-color: var(--success); }

        /* Cibles tactiles. L'application s'utilise en intervention, parfois avec
           des gants : 24 a 34 px n'est pas manipulable. Le plancher est 44 px. */
        #panelInfra .natinf-fav-btn,
        #panelNotes .note-action-btn,
        #panelNotes .note-gps-refresh {
            width: 44px; height: 44px; flex: 0 0 auto;
            display: inline-flex; align-items: center; justify-content: center;
        }
        #panelInfra .natinf-tab-btn,
        #panelFirstAid .metro-preset-btn,
        #panelFirstAid .firstaid-audience-btn,
        #panelNotes .sketch-btn,
        #panelTranslate .translate-speak-btn { min-height: 44px; }
        /* Ces deux regles rabaissaient explicitement le min-height de .btn. */
        #panelInfra .natinf-favorites-tools .btn { height: auto; min-height: 44px; }
        #panelFirstAid .firstaid-ai-actions .btn { min-height: 44px; }
        /* Mise en page par float, cible d'une vingtaine de pixels. */
        #panelInfra .card-toggle,
        #panelFirstAid .card-toggle {
            float: none; margin-left: auto;
            width: 44px; height: 44px;
            display: inline-flex; align-items: center; justify-content: center;
        }

        /* Interprete : la teinte etait figee en clair, donc invisible en sombre
           alors que --sec, lui, change de valeur avec le theme. */
        #panelTranslate .translate-section {
            --sec-soft: color-mix(in srgb, var(--sec) 12%, transparent);
        }
        #panelTranslate .translate-section--them { --sec: var(--text-secondary); }

        /* ── Onglet Missions : tableau des postes ──
               Une carte-formulaire par jalon etait illisible des 40 postes, et
               le bloc de champs pose en grid-column n'avait aucun effet dans un
               conteneur flex. On passe a un tableau dense, editable en ligne,
               qui a la meme forme que le roadbook imprime. */
            /* overflow-x:auto avec overflow-y:visible : la specification force
               le second a `auto`, le conteneur devient donc scrollable EN
               VERTICAL aussi, et la molette y mourait au lieu d'etre transmise
               au panneau. `clip` decoupe sans creer de conteneur de defilement :
               le tableau defile horizontalement, la molette verticale passe. */
            /* Pas de conteneur de defilement par defaut. overflow-x:auto force
               overflow-y a `auto` (la specification interdit un seul axe
               `visible`), et la molette verticale mourait alors dans ce div au
               lieu d'etre transmise au panneau. `clip` ne suffit pas dans tous
               les moteurs. Or le tableau ne deborde qu'en dessous de ~800 px de
               large (min-width 760) : on reserve donc le defilement horizontal
               a ce cas, ou l'on scrolle au doigt et non a la molette. */
            .mission-jalons-wrap { margin-top: 6px; }
            @media (max-width: 820px) {
                .mission-jalons-wrap { overflow-x: auto; }
            }
            .mission-jalons {
                width: 100%; border-collapse: separate; border-spacing: 0;
                font-size: 12.5px; min-width: 900px;
            }
            /* En-tete clair, comme .usage-table th de la console admin. Une bande
               bleu fonce saturee sur 43 lignes etait l'element le plus lourd de
               l'ecran alors qu'elle porte le contenu le moins utile.
               --panel-inset est OPAQUE : obligatoire, l'en-tete est sticky. */
            .mission-jalons thead th {
                position: sticky; top: 0; z-index: 2;
                background: var(--panel-inset); color: var(--text-secondary);
                text-align: left; font-size: 11px; font-weight: 700;
                text-transform: uppercase; letter-spacing: .04em;
                padding: 8px; white-space: nowrap;
                border-bottom: 1px solid var(--border);
            }
            .mission-jalons thead th:first-child { border-top-left-radius: 8px; }
            .mission-jalons thead th:last-child { border-top-right-radius: 8px; }
            .mission-jalons td {
                padding: 3px 4px; vertical-align: middle;
                background: transparent;
                border-bottom: 1px solid var(--border);
            }
            /* Zebre retire : avec un champ borde dans chaque cellule, il ajoutait
               une troisieme surface empilee. La hairline suffit a suivre la
               ligne, et le survol ou le focus la designe activement. */
            .mission-jalons tr:nth-child(even) td { background: transparent; }
            .mission-jalons tbody tr:hover td,
            .mission-jalons tbody tr:focus-within td { background: var(--accent-light); }
            /* Lisere sur la PREMIERE cellule seulement : applique a chaque td, il
               se repetait au milieu du tableau, y compris sous la colonne sticky. */
            .mission-jalons tr.mj-row--start td:first-child { box-shadow: inset 3px 0 0 var(--success); }
            .mission-jalons tr.mj-row--end td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
            /* Champs fantomes : aucune bordure au repos. 43 lignes x 5 champs,
               soit environ 215 rectangles de chrome pour zero information : c'est
               la cause du rendu « formulaire administratif ». L'affordance revient
               au survol et au focus, qui devient plus visible puisqu'il est alors
               le seul chrome a l'ecran. Tabulation et saisie inchangees. */
            .mission-jalons input, .mission-jalons select {
                font: inherit; font-size: 12.5px; padding: 5px 6px; width: 100%;
                border: 1px solid transparent; border-radius: 6px;
                background: transparent; color: var(--text-primary);
                box-sizing: border-box; min-width: 0;
            }
            .mission-jalons input::placeholder { color: var(--text-muted); opacity: .6; }
            @media (hover: hover) {
                .mission-jalons input:hover, .mission-jalons select:hover {
                    border-color: var(--border); background: var(--bg-primary);
                }
            }
            .mission-jalons input:focus, .mission-jalons select:focus {
                outline: none; border-color: var(--accent);
                background: var(--bg-primary);
                box-shadow: 0 0 0 3px var(--accent-soft);
            }
            /* Un effectif vide se signale de lui-meme : inutile d'enumerer
               J1..J43 dans un bandeau, l'oeil trouve les trous dans le tableau. */
            /* Effectif non renseigne : un fond tres leger suffit a le reperer,
               le pointille faisait « champ desactive ». */
            .mission-jalons .mj-eff:placeholder-shown {
                background: color-mix(in srgb, var(--warning) 8%, transparent);
            }
            .mission-jalons .mj-poste { white-space: nowrap; }
            .mission-jalons .mj-badge {
                display: inline-flex; align-items: center; justify-content: center;
                min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px;
                background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
            }
            .mj-row--start .mj-badge { background: var(--success); }
            .mj-row--end .mj-badge { background: var(--danger); }
            .mission-jalons .mj-role {
                display: block; margin-top: 3px; font-size: 9px; font-weight: 700;
                text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
            }
            .mission-jalons .mj-lieu { min-width: 200px; }
            .mission-jalons .mj-sub {
                margin-top: 3px; font-size: 10px; color: #64748b; line-height: 1.3;
                max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            }
            /* Unite competente : information de commandement — qui appeler pour
               ce poste — et non une annotation d'adresse. Elle etait rendue en
               petit gris sous le lieu, donc presente mais illisible : elle a
               desormais sa colonne, comme dans les roadbooks papier. */
            .mission-jalons .mj-comp {
                min-width: 150px; max-width: 230px;
                font-size: 11.5px; font-weight: 600; line-height: 1.35;
                color: var(--accent);
            }
            .mission-jalons .mj-comp-vide { color: var(--text-muted); font-weight: 400; }
            .mission-jalons .mj-comp-attente { color: var(--text-muted); font-style: italic; font-weight: 400; }
            .mission-jalons .mj-eff { width: 56px; text-align: center; font-weight: 700; }
            .mission-jalons .mj-perso { min-width: 210px; }
            .mission-jalons .mj-perso-row {
                display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
                gap: 4px; margin-bottom: 4px; align-items: center;
            }
            /* La colonne d'actions reste collee a droite : sur un tableau qui
               defile, le bouton de suppression sortait de l'ecran et devenait
               inatteignable. */
            .mission-jalons .mj-act,
            .mission-jalons thead th:last-child {
                position: sticky; right: 0; z-index: 1;
                white-space: nowrap; text-align: right;
                box-shadow: -7px 0 9px -7px rgba(15, 23, 42, 0.22);
            }
            .mission-jalons thead th:last-child { z-index: 3; }
            /* Fond opaque obligatoire (colonne sticky). Les deux regles en dur
               #fff / #f1f5f9 cassaient le theme sombre. */
            .mission-jalons tbody .mj-act { background: var(--bg-primary); }
            .mission-jalons tbody tr:hover .mj-act,
            .mission-jalons tbody tr:focus-within .mj-act { background: var(--accent-light); }
            .mission-jalons .mj-act .mission-mini-btn { width: 24px; height: 24px; font-size: 12px; }
            .mission-jalons td:nth-child(2) select { min-width: 110px; }

            /* .mission-mini-btn est un rond de 28 px pour UN glyphe : y mettre
               « + Ajouter » faisait deborder le libelle hors du panneau. */
            /* Plus de bordure en pointilles : le pointille signale un emplacement
               vide a remplir, pas une commande. Un bouton se dessine plein. */
            .mission-add-btn {
                cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
                padding: 5px 12px; border-radius: 999px; white-space: nowrap;
                border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
                background: var(--accent-soft); color: var(--accent);
            }
            .mission-add-btn:hover {
                background: color-mix(in srgb, var(--accent) 16%, transparent);
                border-color: var(--accent);
            }

            /* Synthese du dispositif : le chiffre d'abord, la legende ensuite.
               C'est l'equivalent de l'encadre bleu des roadbooks papier. */
            /* Fond teinte retire : la carte suffit a delimiter le bloc. */
            /* Grille et non flex : en flex, la derniere rangee etirait ses
               tuiles a ~290 px autour d'un chiffre de 20 px, d'ou l'effet
               « affiche ». Meme rythme que .stat-grid de l'admin. */
            .ms-tuiles {
                display: grid; gap: 10px;
                grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
            }
            .ms-tuile {
                padding: 10px 13px; border-radius: var(--radius-sm);
                background: var(--panel-inset); border: 1px solid var(--border);
            }
            .ms-tuile b {
                display: block; font-size: 22px; font-weight: 800; line-height: 1.15;
                color: var(--text-primary); font-variant-numeric: tabular-nums;
            }
            .ms-tuile span { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
            /* La tuile forte n'est plus un pave de couleur : un pave sombre au
               milieu d'une rangee se lit comme un bouton ou une selection.
               L'emphase passe par la taille du chiffre. */
            .ms-tuile--fort {
                background: var(--accent-soft);
                border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
            }
            .ms-tuile--fort b { color: var(--accent); font-size: 26px; }
            .ms-tuile--fort span { color: var(--accent); opacity: .82; }
            .ms-vents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
            .ms-vent {
                font-size: 11px; color: var(--accent); padding: 3px 9px; border-radius: 999px;
                background: var(--accent-soft);
            }
            .ms-liste { margin-top: 8px; font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
            .ms-liste > span {
                font-size: 10px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; color: var(--text-muted); margin-right: 6px;
            }
            /* Bande d'etat sur une ligne, base NEUTRE : « des postes n'ont pas
               d'effectif » est l'etat normal au depart, tout jalon naissant a 0.
               Une alerte toujours allumee n'informe pas et decredibilise les
               vraies. Le jaune est reserve a un ecart reel. */
            .ms-alerte {
                display: flex; align-items: center; gap: 8px;
                margin-top: 10px; padding: 7px 11px; border-radius: var(--radius-sm);
                font-size: 12.5px; line-height: 1.45;
                border: 1px solid var(--border);
                background: var(--panel-inset); color: var(--text-secondary);
            }
            .ms-alerte::before {
                content: ""; flex: 0 0 auto; width: 8px; height: 8px;
                border-radius: 50%; background: currentColor;
            }
            .ms-alerte--ok {
                color: var(--success); background: var(--success-soft);
                border-color: color-mix(in srgb, var(--success) 30%, transparent);
            }
            .ms-alerte--warn {
                color: var(--warning); background: var(--warning-soft);
                border-color: color-mix(in srgb, var(--warning) 30%, transparent);
            }
            /* Cadre RGPD du stockage local : visible la ou l'agent enregistre,
               pas relegue dans une politique que personne n'ouvre. */
            .mission-rgpd {
                margin-top: 10px; padding: 10px 12px; border-radius: 10px;
                font-size: 11.5px; line-height: 1.55; color: #7a5b12;
                background: #fdf6e7; border: 1px solid #f0d9a0;
            }
            .mission-rgpd a { color: #0b57b0; }
            /* La case gouverne l'enregistrement : elle vit donc a cote des actions,
               pas dans la liste des plans deja enregistres, ou elle n'apparaissait
               qu'apres le premier enregistrement — soit trop tard. */
            .mission-nominatifs {
                display: flex; align-items: flex-start; gap: 8px;
                margin: 8px 0 2px; padding: 9px 12px; border-radius: 10px;
                font-size: 11.5px; line-height: 1.5; cursor: pointer;
                background: #fdf6e7; border: 1px solid #f0d9a0; color: #6b4f0c;
            }
            .mission-nominatifs input { margin-top: 1px; flex: 0 0 auto; }
            .mission-rgpd-purge {
                display: block; margin-top: 8px; cursor: pointer; font: inherit;
                font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
                border: 1px solid rgba(220, 38, 38, 0.45);
                background: rgba(220, 38, 38, 0.06); color: #b91c1c;
            }
            .mission-rgpd-purge:hover { background: rgba(220, 38, 38, 0.14); }
            .mission-section-count {
                margin-left: 8px; font-size: 10.5px; font-weight: 700; color: #0B3A73;
                background: rgba(11, 87, 176, 0.1); border-radius: 999px; padding: 2px 8px;
                text-transform: none; letter-spacing: 0;
            }

            /* ── Cadre de la mission ── */
            .mpf { display: flex; flex-direction: column; gap: 2px; }
            .mpf > span {
                font-size: 9.5px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; color: #64748b;
            }
            .mpf-lieu, .mpf-part { grid-column: span 2; }
            .mission-meta-grid {
                display: grid; gap: 8px;
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            }
            /* Idem : plus de teinte, c'est la carte qui delimite. */
            .mission-meta-grid input,
            .mission-perso-row input,
            .mission-resp-row input,
            .mission-groupe-row input {
                font: inherit; font-size: 12px; padding: 5px 8px; width: 100%;
                border: 1px solid rgba(148, 163, 184, 0.55); border-radius: 7px;
                background: #fff; color: #0f172a; box-sizing: border-box; min-width: 0;
            }
            .mission-meta-grid input:focus,
            .mission-resp-row input:focus,
            .mission-groupe-row input:focus {
                outline: 2px solid rgba(37, 99, 235, 0.35); border-color: #2563eb;
            }
            .mission-perso-head {
                display: flex; align-items: center; gap: 8px; margin: 12px 0 5px;
                font-size: 9.5px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; color: #64748b;
            }
            .mission-perso-head button { margin-left: auto; }
            .mission-perso-vide { font-size: 11.5px; color: #64748b; font-style: italic; }
            .mission-resp-row, .mission-groupe-row {
                display: grid; gap: 6px; margin-bottom: 5px; align-items: center;
            }
            .mission-resp-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1fr) auto; }
            .mission-groupe-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .9fr) auto auto; }
            .mission-groupe-cpt {
                font-size: 10.5px; font-weight: 700; color: #0B3A73; white-space: nowrap;
                background: rgba(11, 87, 176, 0.1); border-radius: 999px; padding: 3px 8px;
            }
            @media (max-width: 640px) {
                .mission-resp-row, .mission-groupe-row { grid-template-columns: 1fr 1fr auto; }
                .mission-groupe-cpt { grid-column: 1 / -1; justify-self: start; }
                .mpf-lieu, .mpf-part { grid-column: span 2; }
            }
            .mission-tab-empty { padding: 22px 18px; text-align: center; }
            .mission-tab-empty-title { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
            .mission-tab-empty p { font-size: 13px; color: #475569; line-height: 1.6; margin: 0 auto 16px; max-width: 44ch; }
            .mission-tab-cta {
                cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px;
                color: #fff; background: #2563eb; border: none;
                border-radius: 10px; padding: 10px 20px;
            }
            .mission-tab-cta:hover { background: #1d4ed8; }
            .mission-tab-cta--secondaire {
                margin-left: 8px; background: transparent;
                border: 1px solid rgba(37, 99, 235, 0.5); color: #1d4ed8;
            }
            .mission-tab-cta--secondaire:hover { background: rgba(37, 99, 235, 0.08); }
            /* Retour a la liste avec un plan garde en memoire : la banniere est
               le chemin de retour vers ce plan, elle doit primer sur la liste. */
            .mission-reprendre {
                display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                margin: 0 0 12px; padding: 11px 13px; border-radius: 11px;
                border: 1px solid rgba(37, 99, 235, 0.32);
                background: rgba(37, 99, 235, 0.07);
            }
            .mission-reprendre-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
            .mission-reprendre-txt strong {
                font-size: 10.5px; font-weight: 800; color: #1d4ed8;
                text-transform: uppercase; letter-spacing: .04em;
            }
            .mission-reprendre-txt span {
                font-size: 12.5px; color: #0f172a; font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            .mission-reprendre .mission-toolbar-btn { flex: 0 0 auto; }
            .mission-saved-list { display: flex; flex-direction: column; gap: 6px; }
            .mission-saved-row {
                display: flex; align-items: stretch; gap: 6px;
            }
            .mission-saved-load {
                flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer;
                display: flex; flex-direction: column; gap: 2px;
                padding: 8px 11px; border-radius: 9px;
                border: 1px solid rgba(148, 163, 184, 0.34);
                background: rgba(255, 255, 255, 0.94);
                transition: border-color .15s, background .15s;
            }
            .mission-saved-load:hover { border-color: #2563eb; background: rgba(37, 99, 235, 0.06); }
            .mission-saved-load strong {
                font-size: 12.5px; color: #0f172a; font-weight: 700;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            .mission-saved-meta { font-size: 11px; color: #64748b; font-weight: 600; }
            .mission-saved-del {
                flex: 0 0 auto; width: 30px; cursor: pointer;
                border: 1px solid rgba(196, 40, 60, 0.28);
                background: rgba(196, 40, 60, 0.06);
                color: #C4283C; border-radius: 9px;
                font-size: 17px; line-height: 1;
            }
            .mission-saved-del:hover { background: rgba(196, 40, 60, 0.14); }
            .mission-checkpoint-effectif { flex-shrink: 0; margin-right: 6px; }
            .mission-checkpoint-effectif label {
                display: inline-flex; align-items: center; gap: 5px;
                font-size: 10.5px; font-weight: 700; color: #475569;
                text-transform: uppercase; letter-spacing: .03em;
            }
            .mission-checkpoint-effectif input {
                width: 46px; height: 28px; text-align: center;
                font-size: 13px; font-weight: 700; color: #0f172a;
                border: 1px solid rgba(148, 163, 184, 0.5);
                border-radius: 7px; background: #fff; padding: 0 2px;
            }
            .mission-checkpoint-effectif input:focus {
                outline: none; border-color: #2563eb;
                box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
            }
            .mission-checkpoint-actions {
                display: inline-flex;
                gap: 6px;
                flex-shrink: 0;
            }
            .mission-mini-btn {
                width: 28px;
                height: 28px;
                border: 1px solid rgba(148, 163, 184, 0.34);
                background: rgba(255, 255, 255, 0.92);
                color: #0f172a;
                border-radius: 999px;
                cursor: pointer;
                font-size: 13px;
                font-weight: 800;
                line-height: 1;
            }
            .mission-mini-btn:disabled {
                opacity: 0.38;
                cursor: not-allowed;
            }
            .mission-mini-btn--danger {
                color: #b91c1c;
                border-color: rgba(220, 38, 38, 0.22);
            }
            .mission-segment-row {
                justify-content: space-between;
            }
            .mission-segment-title {
                font-size: 12px;
                font-weight: 800;
                color: #0f172a;
            }
            .mission-segment-values {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                font-size: 12px;
                font-weight: 700;
                color: #334155;
                flex-wrap: wrap;
                justify-content: flex-end;
            }
            [data-theme="dark"] .route-core-row.route-core-drag-over {
                background: rgba(77, 171, 247, 0.16);
            }
            [data-theme="dark"] .route-core-row.route-core-selected {
                background: rgba(77, 171, 247, 0.24);
            }
            [data-theme="dark"] .route-core-drag-handle {
                border-color: rgba(125, 211, 252, 0.45);
                background: rgba(2, 132, 199, 0.24);
                color: #bae6fd;
            }
            [data-theme="dark"] .route-core-drag-handle:hover {
                background: rgba(2, 132, 199, 0.38);
            }
            [data-theme="dark"] .route-core-remove,
            [data-theme="dark"] .route-wp-remove {
                border-color: rgba(248, 113, 113, 0.62);
                background: rgba(220, 38, 38, 0.34);
                color: #fecaca;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.34);
            }
            [data-theme="dark"] .route-core-remove:hover,
            [data-theme="dark"] .route-wp-remove:hover {
                background: rgba(220, 38, 38, 0.5);
                border-color: rgba(252, 165, 165, 0.9);
                color: #fff;
            }
            [data-theme="dark"] .mission-planner-panel {
                background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.99));
                border-color: rgba(96, 165, 250, 0.2);
                box-shadow: 0 16px 32px rgba(2, 6, 23, 0.45);
            }
            [data-theme="dark"] .mission-planner-panel-drag .mp-drag-pill {
                background: rgba(148, 163, 184, 0.3);
            }
            [data-theme="dark"] .mission-planner-title,
            [data-theme="dark"] .mission-checkpoint-name,
            [data-theme="dark"] .mission-segment-title,
            [data-theme="dark"] .mission-toolbar-btn,
            [data-theme="dark"] .mission-mini-btn {
                color: #e2e8f0;
            }
            [data-theme="dark"] .mission-planner-hint,
            [data-theme="dark"] .mission-planner-summary-sub,
            [data-theme="dark"] .mission-checkpoint-meta,
            [data-theme="dark"] .mission-planner-empty,
            [data-theme="dark"] .mission-planner-segments-empty,
            [data-theme="dark"] .mission-segment-values {
                color: #94a3b8;
            }
            [data-theme="dark"] .mission-planner-summary-card,
            [data-theme="dark"] .mission-checkpoint-row,
            [data-theme="dark"] .mission-segment-row,
            [data-theme="dark"] .mission-planner-empty,
            [data-theme="dark"] .mission-planner-segments-empty,
            [data-theme="dark"] .mission-toolbar-btn,
            [data-theme="dark"] .mission-mini-btn,
            [data-theme="dark"] .mission-planner-head-status {
                background: rgba(15, 23, 42, 0.78);
                border-color: rgba(148, 163, 184, 0.16);
            }
            [data-theme="dark"] .mission-toolbar-btn.active {
                background: #2563eb;
                border-color: #2563eb;
                color: #fff;
            }
            [data-theme="dark"] .mission-toolbar-btn--primary {
                background: #2563eb;
                border-color: #2563eb;
                color: #fff;
            }
            [data-theme="dark"] .mission-planner-summary-card.is-warning {
                background: rgba(120, 53, 15, 0.42);
                border-color: rgba(217, 119, 6, 0.26);
                color: #fcd34d;
            }
            [data-theme="dark"] .mission-planner-summary-card.is-pending {
                background: rgba(30, 64, 175, 0.22);
                border-color: rgba(96, 165, 250, 0.3);
            }
            @media (max-width: 768px) {
                .mission-planner-panel {
                    max-height: min(54dvh, 460px);
                    width: min(320px, calc(100vw - 18px));
                    resize: none; /* poignée de resize inutilisable au doigt sur mobile */
                }
                .mission-checkpoint-row,
                .mission-segment-row {
                    align-items: flex-start;
                }
                .mission-checkpoint-row {
                    flex-wrap: wrap;
                }
                .mission-checkpoint-main {
                    min-width: calc(100% - 44px);
                }
                .mission-checkpoint-actions {
                    width: 100%;
                    justify-content: flex-end;
                }
                .mission-segment-row {
                    flex-direction: column;
                    align-items: flex-start;
                }
                .mission-segment-values {
                    justify-content: flex-start;
                }
            }

            /* ── Desktop: resizable map modals (from bottom-left corner) ── */
            @media (min-width: 769px) {
                .map-bottom-bar .mb-left {
                    resize: both;
                    overflow: auto;
                    direction: rtl;   /* puts native resize handle at bottom-left */
                    min-width: 200px;
                    min-height: 60px;
                }
                .map-bottom-bar .mb-left > * {
                    direction: ltr;   /* reset text direction for children */
                }
                .header-dept-panel {
                    resize: both;
                    overflow: auto;
                    min-width: 260px;
                    min-height: 200px;
                }
                .maplibregl-popup-content {
                    resize: both;
                    overflow: auto;
                    direction: rtl;
                    min-width: 200px;
                    min-height: 80px;
                }
                .maplibregl-popup-content > * {
                    direction: ltr;
                }
                .route-compact.route-compact--open {
                    resize: both;
                    min-width: 260px;
                    min-height: 120px;
                }
                .map-search-inner.route-open {
                    resize: none;
                    overflow: visible;
                }
            }

        /* â”€â”€â”€â”€â”€ MODERN MAP OVERLAY CONTROLS â”€â”€â”€â”€â”€ */
        /* ───── GOOGLE MAPS INSPIRED MAP CONTROLS ───── */
        .map-overlay-controls {
            position: absolute;
            bottom: 60px;
            right: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 1500;
            pointer-events: none;
            max-height: calc(100vh - 110px);
        }
        .map-ctrl-group {
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3);
            overflow: visible;
            pointer-events: auto;
        }
        [data-theme="dark"] .map-ctrl-group {
            background: #2d2d2d;
        }
        .map-ctrl-group .map-ctrl-btn + .map-ctrl-btn {
            border-top: 1px solid rgba(0,0,0,0.08);
        }
        [data-theme="dark"] .map-ctrl-group .map-ctrl-btn + .map-ctrl-btn {
            border-top-color: rgba(255,255,255,0.1);
        }
        .map-legal-credits {
            position: absolute;
            right: 10px;
            bottom: 8px;
            z-index: 24;
            max-width: min(52vw, 420px);
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            color: var(--text-muted);
            font-size: 9px;
            line-height: 1.15;
            text-align: right;
            opacity: 0.9;
            pointer-events: none;
            backdrop-filter: none;
            text-shadow: 0 1px 2px rgba(255,255,255,0.55), 0 0 1px rgba(255,255,255,0.45);
        }
        [data-theme="light"] .map-legal-credits { color: #334155; }
        [data-theme="dark"] .map-legal-credits {
            color: #e2e8f0;
            text-shadow: 0 1px 2px rgba(2,6,23,0.85), 0 0 1px rgba(2,6,23,0.7);
        }
        .map-legal-credits .credit-line {
            display: block;
            white-space: normal;
        }

        /* Top search overlay (Google Maps style) */
        .map-overlay-search {
            position: absolute;
            top: 12px;
            /* center container exactly, safer than symmetric left/right which may
               produce slight offset on certain viewports or inside parent elements */
            left: 50%;
            transform: translateX(-50%);
            /* ensure it never exceeds viewport width minus margins */
            max-width: calc(100% - 24px);
            display: flex;
            justify-content: center;
            z-index: 30;
            pointer-events: none; /* inner controls handle events */
        }
        .map-overlay-search .map-search-inner {
            pointer-events: auto;
            display: flex;
            flex-direction: column; /* stack route-compact above the search row */
            gap: 4px;
            width: 100%;
            max-width: 640px; /* slightly wider so input field is more usable */
            align-items: stretch;
            padding: 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }
        .map-overlay-search .map-search-inner .search-row { display:flex; gap:6px; align-items:center; }
        .map-overlay-search .map-search-inner .search-row .form-input { flex:1; }
        .map-overlay-search.nav-search-compact { justify-content: flex-end; }
        .map-overlay-search.nav-search-compact .map-search-inner {
            width: auto;
            max-width: none;
            padding: 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }
        .map-overlay-search.nav-search-compact .map-search-inner .search-row {
            width: auto;
            margin: 0;
            justify-content: flex-end;
        }
        .map-overlay-search.nav-search-compact .map-search-inner .search-row #mapSearchLocateBtn,
        .map-search-inner.nav-search-compact .search-row #mapSearchLocateBtn { display: none !important; }
        .map-overlay-search.nav-search-compact .map-search-inner .search-row .form-input { display: none !important; }
        .map-overlay-search.nav-search-compact .map-search-inner .search-row .btn {
            min-width: 48px;
            height: 48px;
            border-radius: 12px;
            background: var(--accent);
            color: #fff;
        }
        @media (min-width: 1024px) {
            /* on desktop the overlay can still use left/right for convenience */
            .map-overlay-search { left:12px; right:12px; transform:none; max-width:none; }
            .map-overlay-search .map-search-inner { flex-direction: row; align-items:center; position: relative; }
            /* mission planner panel is now a detached floating overlay */
            /* Default desktop behavior: when itinerary is closed, it must not reserve width. */
            .map-overlay-search .map-search-inner .route-compact {
                order: 0;
                flex: 0 0 0;
                width: 0;
                max-width: 0;
                min-width: 0;
                margin: 0;
                border: none;
                box-shadow: none;
                visibility: hidden;
                overflow: hidden;
            }
            .map-overlay-search .map-search-inner .route-compact.route-compact--open {
                flex: 0 0 420px;
                width: auto;
                max-width: 560px;
                visibility: visible;
            }
            .map-overlay-search .map-search-inner .search-row { order: 1; flex: 1 1 auto; width: 100%; max-width: none; }
            .map-overlay-search .map-search-inner .route-compact.route-compact--moved { width: 0 !important; max-width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
            .map-overlay-search .map-search-inner .route-compact.route-compact--moved ~ .search-row { width: 100% !important; max-width: none !important; }

            /* When the route panel is explicitly opened, force vertical stacking so the
               'Départ' field appears above the main search (no overlap). */
            .map-overlay-search .map-search-inner.route-expanded { flex-direction: column; align-items: stretch; }
            .map-overlay-search .map-search-inner.route-expanded .route-compact { order: 0; width: 100%; max-width: 560px; }
            .map-overlay-search .map-search-inner.route-expanded .search-row { order: 1; width: 100%; max-width: none; }
            /* mission planner panel is now a detached floating overlay */
        }

        /* Header SOS button */
        .sos-header-btn {
            background: transparent;
            color: var(--header-text);
            border-radius: 8px;
            padding: 8px;
            font-weight: 700;
            box-shadow: none;
            transition: background 0.2s, transform 0.12s, box-shadow 0.12s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .sos-header-btn:hover { transform: none; box-shadow: none; }
        .sos-header-btn.active { background: linear-gradient(180deg,#ff6b6b,#ef4444); color:#fff; box-shadow: 0 10px 26px rgba(239,68,68,0.22); }
        /* larger SOS variant (compact confirmation style) */
        .sos-header-btn.sos-lg { padding: 10px 12px; border-radius: 10px; font-size: 16px; }

        /* icon helper */
        .icon { width:18px; height:18px; display:inline-block; vertical-align:middle; fill:currentColor; }

        /* Compact SOS confirmation modal */
        /* Ensure SOS overlays appear above mobile panels (nav-panel z-index:1400). */
        .sos-confirm-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,6,23,0.35); z-index: 11050; }
        .sos-confirm-overlay.visible { display: flex; }
        .sos-confirm-box { background: var(--bg-secondary); padding: 14px; border-radius: 12px; width: calc(100% - 48px); max-width: 360px; box-shadow: 0 12px 40px rgba(2,6,23,0.3); border:1px solid var(--border); text-align:center; }
        .sos-confirm-title { font-weight:700; margin-bottom:8px; }
        .sos-confirm-body { color: var(--text-muted); margin-bottom:12px; }
        .sos-confirm-actions { display:flex; gap:10px; justify-content:center; }
        /* Doublon retire : ce selecteur global, declare apres .btn-danger,
           imposait un degrade en dur et ecrasait le rayon et le padding de
           .btn pour TOUS les boutons danger de l'application. */

        /* Full emergency panel (opened only via header SOS click) */
        .emergency-panel-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,6,23,0.45); z-index: 11060; padding: 20px; }
        .emergency-panel-overlay.visible { display: flex; }
        .emergency-panel { background: var(--bg-secondary); padding: 18px; border-radius: 12px; width: calc(100% - 48px); max-width: 760px; box-shadow: 0 18px 48px rgba(2,6,23,0.32); border:1px solid var(--border); color: var(--text-primary); }
        .emergency-panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
        .emergency-panel-header h3 { margin:0; font-size:20px; display:flex; gap:8px; align-items:center; }
        .emergency-panel-sub { color:var(--text-muted); font-size:13px; margin-bottom:12px; }
        .emergency-panel-close { background:transparent; border: none; color: var(--text-muted); font-size:20px; padding:6px 8px; border-radius:8px; cursor:pointer; }
        .emergency-panel-close:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); }
        .emergency-list { display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; padding-right:6px; }
        .emergency-separator { font-weight:700; color:var(--text-muted); font-size:12px; margin:6px 0; }
        .emergency-item { display:flex; gap:12px; align-items:center; background: transparent; padding:8px 10px; border-radius:10px; border:1px solid transparent; }
        .emergency-number { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; font-weight:700; color:#fff; font-size:18px; text-decoration:none; }
        .em-17 { background:#2563eb; } .em-15 { background:#059669; } .em-18 { background:#ef4444; } .em-112 { background:#7c3aed; }
        .em-114 { background:#0ea5e9; } .em-196 { background:#f97316; } .em-197 { background:#ef4444; } .em-3117 { background:#111827; }
        .emergency-info { flex:1; min-width:0; }
        .emergency-info-title { font-weight:700; font-size:14px; }
        .emergency-info-desc { font-size:13px; color:var(--text-muted); line-height:1.2; }
        .emergency-call-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; border:1px solid var(--border); text-decoration:none; color:var(--text-primary); background:transparent; font-size:18px; }

        /* Brigade overlay */
        .brigade-overlay { position: absolute; top: 82px; left: 12px; z-index: 26; display: none; }
        .brigade-overlay.visible { display: block; }
        .brigade-card { background: var(--bg-secondary); padding: 10px 12px; border-radius: 10px; box-shadow:0 8px 24px rgba(2,6,23,0.12); border:1px solid var(--border); min-width:220px; cursor: grab; user-select: none; }
        .brigade-card:active { cursor: grabbing; }
        .brigade-card .b-title { font-weight:700; margin-bottom:4px; }
        .brigade-card .b-sub { font-size:12px; color:var(--text-muted); }
        /* Draggable brigade overlay (when user detaches it from map flow) */
        .brigade-overlay.dragging { transition: none !important; z-index: 9999; }
        .brigade-overlay.dragged { z-index: 9998; position: fixed !important; }
        .brigade-overlay.dragged .brigade-card { box-shadow: 0 18px 48px rgba(2,6,23,0.28); }

        /* small badge for map dept button */
        .map-dept-badge { position: absolute; top: -4px; right: -4px; background: var(--accent); color:#fff; font-size:10px; padding:1px 5px; border-radius:999px; box-shadow:0 2px 6px rgba(2,6,23,0.12); pointer-events: none; }
        .map-dept-badge.is-zero { display: none; }
        .map-dept-badge:empty { display: none; }
        .map-overlay-search .map-search-inner .search-row input.form-input { border: none; box-shadow: none; padding: 4px 10px; font-size:13px; flex:1; height:34px; border-radius:8px; }
        .map-overlay-search .map-search-inner .route-input-main .form-input,
        .map-search-inner .inline-route-from .form-input {
            border: 1px solid rgba(15, 23, 42, 0.22);
            background: var(--bg-primary);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
        }
        [data-theme="dark"] .map-overlay-search .map-search-inner .route-input-main .form-input,
        [data-theme="dark"] .map-search-inner .inline-route-from .form-input {
            border-color: rgba(148, 163, 184, 0.55);
            background: rgba(15, 23, 42, 0.55);
            box-shadow: none;
        }
        .map-overlay-search .map-search-inner .route-input-main .form-input:focus,
        .map-search-inner .inline-route-from .form-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
        }
        .map-overlay-search .map-search-inner .btn { width: auto; padding: 6px 8px; min-width:38px; height:34px; border-radius:8px; }
        .map-overlay-search .map-search-inner .btn-ghost { padding: 6px 8px; min-width:38px; height:34px; border-radius:8px; }
        .map-overlay-search .map-search-inner .btn.locating { opacity: 0.7; pointer-events: none; }
        .map-overlay-search .map-search-inner button svg { width:18px; height:18px; }

        /* Les deux boutons de la barre de recherche heritaient du gris de
           .btn-ghost (--text-secondary) : poses sur du blanc au-dessus d'une
           image satellite, ils s'effacaient. On reprend le code couleur de la
           colonne de controles (--ctrl-locate) pour l'historique, et l'accent
           plein pour la loupe, qui est l'action principale de la barre. */
        .map-overlay-search .map-search-inner .search-row #mapSearchLocateBtn {
            color: #1a73e8;
        }
        .map-overlay-search .map-search-inner .search-row #mapSearchLocateBtn:hover {
            background: rgba(26, 115, 232, 0.12);
            color: #1a73e8;
        }
        [data-theme="dark"] .map-overlay-search .map-search-inner .search-row #mapSearchLocateBtn,
        [data-theme="dark"] .map-overlay-search .map-search-inner .search-row #mapSearchLocateBtn:hover {
            color: #8ab4f8;
        }
        [data-theme="dark"] .map-overlay-search .map-search-inner .search-row #mapSearchLocateBtn:hover {
            background: rgba(138, 180, 248, 0.16);
        }
        .map-overlay-search .map-search-inner .search-row #mapSearchActionBtn {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .map-overlay-search .map-search-inner .search-row #mapSearchActionBtn:hover {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
            color: #fff;
        }

        /* Bottom bar on the map (brigade / navigation CTA) */
        .map-bottom-bar {
            position: absolute;
            left: 12px;
            right: 62px;
            width: auto;
            max-width: min(960px, calc(100vw - 74px));
            bottom: 18px;
            z-index: 300;
            display: none;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
        }
        .map-bottom-bar.visible { display: flex; }
        .map-bottom-bar.visible .map-bottom-bar-grab { display: block; }
        /* Close control for the bottom bar (user can dismiss it) */
        .map-bottom-bar-close { position: absolute; right: 10px; top: 6px; background: transparent; border: none; color: var(--text-muted); font-size: 18px; padding: 6px; border-radius: 8px; cursor: pointer; }
        .map-bottom-bar-close:hover { background: rgba(0,0,0,0.04); color: var(--text); }

        /* grab handle for the bottom card (draggable) */
        .map-bottom-bar-grab { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; width: 40px; height: 6px; border-radius: 6px; background: rgba(0,0,0,0.08); cursor: grab; z-index: 320; display: none; }
        .map-bottom-bar.dragging .map-bottom-bar-grab { cursor: grabbing; background: rgba(0,0,0,0.14); }
        .map-bottom-bar-grab { touch-action: none; }

.map-bottom-bar .mb-left { background: var(--bg-secondary); padding: 10px 12px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); flex:1; min-width: 0; word-break: break-word; font-size: clamp(13px, 1.6vw, 15px); position: relative; cursor: grab; touch-action: none; }
        .map-bottom-bar.dragging .mb-left { cursor: grabbing; }
        /* inline close attached to the bottom card */
        .map-bottom-bar .mb-left .mb-close-inline {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: var(--map-surface-strong);
            color: var(--text-secondary);
            border: 1px solid var(--border);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 6px 14px rgba(2,6,23,0.06);
            z-index: 320;
            font-size: 14px;
        }
        .map-bottom-bar .mb-left .mb-close-inline:hover { background: var(--map-surface-hover); color: var(--text-primary); }
        .map-bottom-bar .mb-right { display:flex; gap:8px; align-items:center; }
        .map-bottom-bar .mb-right:empty { display: none; }
        
        /* Proposal card actions: keep buttons inline and compact (override global .btn width:100%) */
        .map-bottom-bar .mb-left .mb-title {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--text-primary);
            word-break: break-word;
        }
        .map-bottom-bar .mb-left .mb-sub {
            margin-top: 2px;
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.25;
        }
        .map-bottom-bar .mb-left .mb-sub--brigade {
            margin-top: 6px;
        }
        .map-bottom-bar .mb-left .mb-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            align-items: center;
            margin-top: 7px;
        }
        .map-bottom-bar .mb-left .mb-actions .btn {
            min-width: 0;
            padding: 0 10px;
            min-height: 34px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
            border-radius: 999px;
        }
        .map-bottom-bar .mb-left .mb-actions .btn.btn-primary { border-radius: 999px; }
        /* Ensure ghost buttons inside the proposal card remain readable on both themes */
        .map-bottom-bar .mb-left .mb-actions .btn-ghost { color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); }
        .map-bottom-bar .mb-left .mb-actions .btn-ghost svg { fill: currentColor; }
        .map-bottom-bar .mb-left .mb-brigade-line {
            margin-top: 8px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--map-surface-soft);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .map-bottom-bar .mb-left .mb-brigade-name {
            font-size: 12px;
            color: var(--text-muted);
            flex: 1 1 220px;
            min-width: 0;
            line-height: 1.25;
        }
        .map-bottom-bar .mb-left .mb-brigade-actions {
            display: inline-flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .map-bottom-bar .mb-left .mb-brigade-action {
            text-decoration: none;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 5px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
        }
        .map-bottom-bar .mb-left .mb-brigade-action .mb-brigade-icon {
            width: 13px;
            height: 13px;
            flex: 0 0 13px;
            opacity: 0.9;
        }
        .map-bottom-bar .mb-left .mb-brigade-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 14px rgba(2,6,23,0.10);
            background: var(--map-surface-hover);
        }

        @media (max-width:420px) {
            .map-bottom-bar .mb-left .mb-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .map-bottom-bar .mb-left .mb-actions .btn { min-width: 0; }
        }

        @media (max-width: 768px) {
            /* mobile: maintain centering instead of fixed offsets */
            .map-overlay-search {
                left: 50%;
                transform: translateX(-50%);
                max-width: calc(100% - 24px);
                /* clear previous left/right margins */
                right: auto;
            }
            /* Place the bottom bar above the mobile navigation and safe-area */
            .map-bottom-bar {
                left: 8px;
                right: 62px;
                width: auto;
                max-width: calc(100vw - 70px);
                bottom: calc(70px + env(safe-area-inset-bottom));
                z-index: 310;
                padding-right: 0;
            }
            /* Compact bottom card for mobile */
            .map-bottom-bar .mb-left {
                padding: 8px 10px;
                font-size: 13px;
                max-height: calc(100dvh - 200px);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .map-bottom-bar .mb-left .mb-close-inline {
                width: 26px;
                height: 26px;
                font-size: 12px;
                top: 4px;
                right: 4px;
            }
            .map-bottom-bar .mb-left .mb-actions .btn {
                padding: 7px 10px;
                font-size: 13px;
                min-width: 80px;
            }
            .map-bottom-bar .mb-left .mb-brigade-line {
                padding: 6px 8px;
                gap: 6px;
                margin-top: 6px;
            }
            .map-bottom-bar .mb-left .mb-brigade-name { font-size: 11px; }
            .map-bottom-bar .mb-left .mb-brigade-action {
                padding: 4px 7px;
                font-size: 12px;
            }
            /* Reserve space on the right so CTA buttons don't overlap map controls */
            .map-bottom-bar .mb-right { margin-right: 0; }
            .map-overlay-search .map-search-inner { max-width: 640px; }
        }

        .map-overlay-controls {
            /* Seul jeton reste gris de la colonne, le bouton disparaissait
               entre ses voisins colores. */
            --ctrl-compass: #0891b2;
            --ctrl-locate: #1a73e8;
            --ctrl-style: #1a73e8;
            --ctrl-dept: #3b5bdb;
            --ctrl-favorites: #f59e0b;
            --ctrl-poi: #0f9d8a;
            --ctrl-defib: #16a34a;
            --ctrl-mission: #2563eb;
            --ctrl-accidents: #d97706;
            --ctrl-voice: #8e44ad;
        }
        .map-ctrl-btn {
            position: relative;
            width: 40px;
            height: 40px;
            background: transparent;
            border: none;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5f6368;
            transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
            cursor: pointer;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        [data-theme="dark"] .map-ctrl-btn { color: #c6c9d1; }

        /* Bascule inclinaison : une seule des deux icones est montee visible,
           celle qui decrit l'action a venir. .active = carte inclinee ou
           tournee, donc l'action proposee est le retour a plat. */
        .map-ctrl-btn#mapBtnCompass .map-ctrl-tilt--off,
        .map-ctrl-btn#mapBtnCompass.active .map-ctrl-tilt--on { display: none; }
        .map-ctrl-btn#mapBtnCompass.active .map-ctrl-tilt--off { display: block; }

        .map-ctrl-btn:hover { background: rgba(95, 99, 104, 0.1); }
        [data-theme="dark"] .map-ctrl-btn:hover { background: rgba(255,255,255,0.08); }
        .map-ctrl-btn:active {
            background: rgba(95, 99, 104, 0.16);
            transform: scale(0.97);
        }
        [data-theme="dark"] .map-ctrl-btn:active { background: rgba(255,255,255,0.14); }

        .map-ctrl-btn#mapBtnCompass { color: var(--ctrl-compass); }
        .map-ctrl-btn#mapBtnLocate { color: var(--ctrl-locate); }
        .map-ctrl-btn#mapBtnStyle { color: var(--ctrl-style); }
        .map-ctrl-btn#mapBtnDept { color: var(--ctrl-dept); }
        .map-ctrl-btn#mapBtnFavorites { color: var(--ctrl-favorites); }
        .map-ctrl-btn#mapBtnPoi { color: var(--ctrl-poi); }
        .map-ctrl-btn#mapBtnDefib { color: var(--ctrl-defib); }
        /* Jalonnage : mis en valeur dans la barre de controles. C'est la
           fonction la plus differenciante de l'app et elle etait indistinguable
           des huit autres boutons. */
        /* Ce bouton avait un fond plein permanent, ajoute pour mettre le
           jalonnage en valeur sur la carte. Consequence : il paraissait ALLUME
           en permanence, alors que le plein doit signifier « la capture est
           active ». Au repos il reste distinctif — icone et bordure a la couleur
           d'accent, plus marque que les autres controles — mais il n'est plus
           rempli. Le remplissage est reserve a .active (cf. .active plus bas). */
        /* Ce controle se comporte comme les autres controles de la carte : une
           icone coloree, sans fond ni bordure propres. La mise en valeur du
           jalonnage demandee portait sur l'application (onglet dedie, carte de
           la landing, pitch), pas sur ce bouton — l'habiller a part le faisait
           surtout paraitre allume en permanence.
           Le remplissage reste reserve a .active, plus bas, ou il signifie que
           la capture est en cours. */
        .map-ctrl-btn#mapBtnMission { color: var(--ctrl-mission); }
        .map-ctrl-btn#mapBtnAccidents { color: var(--ctrl-accidents); }
        .map-ctrl-btn#mapBtnAntennes { color: #1d4ed8; }
        .map-ctrl-btn#mapBtnAntennes:hover { background: rgba(29, 78, 216, 0.12); }
        .map-ctrl-btn#mapBtnAntennes.active {
            color: #1d4ed8;
            background: rgba(29, 78, 216, 0.18);
        }
        .map-ctrl-btn#mapBtnAntennes.active:hover { background: rgba(29, 78, 216, 0.24); }
        .map-ctrl-btn#mapBtnVoice { color: var(--ctrl-voice); }

        .map-ctrl-btn#mapBtnLocate:hover,
        .map-ctrl-btn#mapBtnStyle:hover { background: rgba(26, 115, 232, 0.12); }
        .map-ctrl-btn#mapBtnDept:hover { background: rgba(59, 91, 219, 0.12); }
        .map-ctrl-btn#mapBtnFavorites:hover { background: rgba(245, 158, 11, 0.15); }
        .map-ctrl-btn#mapBtnPoi:hover { background: rgba(15, 157, 138, 0.12); }
        .map-ctrl-btn#mapBtnDefib:hover { background: rgba(22, 163, 74, 0.12); }
        .map-ctrl-btn#mapBtnMission:hover { background: rgba(37, 99, 235, 0.18); }
        .map-ctrl-btn#mapBtnAccidents:hover { background: rgba(217, 119, 6, 0.12); }
        .map-ctrl-btn#mapBtnVoice:hover { background: rgba(142, 68, 173, 0.12); }

        .map-ctrl-btn.active {
            color: var(--primary-color, #1a73e8);
            background: rgba(26, 115, 232, 0.1);
        }
        .map-ctrl-btn.active:hover { background: rgba(26, 115, 232, 0.15); }
        .map-ctrl-btn#mapBtnCompass.active {
            color: var(--ctrl-locate);
            background: rgba(26, 115, 232, 0.12);
        }
        .map-ctrl-btn#mapBtnDept.active {
            color: var(--ctrl-dept);
            background: rgba(59, 91, 219, 0.14);
        }
        .map-ctrl-btn#mapBtnFavorites.active {
            color: #b45309;
            background: rgba(245, 158, 11, 0.22);
        }
        .map-ctrl-btn#mapBtnFavorites.active svg path {
            fill: currentColor;
        }
        .map-ctrl-btn#mapBtnFavorites .map-dept-badge {
            display: none !important;
        }
        .map-ctrl-btn#mapBtnFavorites.active:hover {
            background: rgba(245, 158, 11, 0.28);
        }
        [data-theme="dark"] .map-ctrl-btn#mapBtnDept.active {
            color: #9eb0ff;
            background: rgba(96, 127, 255, 0.2);
        }
        .map-ctrl-btn#mapBtnAccidents.active {
            color: #c15f00;
            background: rgba(245, 158, 11, 0.2);
        }
        .map-ctrl-btn#mapBtnAccidents.active:hover {
            background: rgba(245, 158, 11, 0.26);
        }
        .map-ctrl-btn#mapBtnDefib.active {
            color: #0e8f44;
            background: rgba(22, 163, 74, 0.2);
        }
        .map-ctrl-btn#mapBtnDefib.active:hover {
            background: rgba(22, 163, 74, 0.26);
        }
        .map-ctrl-btn#mapBtnMission.active {
            color: #1d4ed8;
            background: rgba(37, 99, 235, 0.18);
        }
        .map-ctrl-btn#mapBtnMission.active.is-capturing {
            color: #1e40af;
            background: rgba(37, 99, 235, 0.24);
            box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
        }
        .map-ctrl-btn#mapBtnMission.active:hover {
            background: rgba(37, 99, 235, 0.24);
        }
        .map-ctrl-btn#mapBtnVoice.active {
            color: #7d2ca8;
            background: rgba(142, 68, 173, 0.18);
        }
        /* Mortel accident popup highlight */
        .cp-accident-mortel .cp-address-main {
            color: #dc2626 !important;
        }
        /* Mortel filter active - red button */
        .map-ctrl-btn#mapBtnAccidents.active.mortel-active {
            color: #dc2626;
            background: rgba(220, 38, 38, 0.12);
        }
        .map-ctrl-btn#mapBtnAccidents.active.mortel-active:hover {
            background: rgba(220, 38, 38, 0.18);
        }

        /* ----------  Accident filter panel (same spirit as dept panel)  ---------- */
        @keyframes accPanelIn {
            from { opacity: 0; transform: translateY(10px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0)    scale(1);    }
        }
        @keyframes accPanelOut {
            from { opacity: 1; transform: translateY(0)    scale(1);    }
            to   { opacity: 0; transform: translateY(10px) scale(0.96); }
        }
        .accident-filter-panel {
            display: none;
            position: fixed;
            bottom: 188px;
            right: 12px;
            width: min(320px, calc(100vw - 18px));
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
            z-index: 2000;
            overflow: hidden;
            flex-direction: column;
            transform-origin: bottom right;
            will-change: opacity, transform;
        }
        .accident-filter-panel.visible {
            display: flex;
            animation: accPanelIn 180ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
        }
        .accident-filter-panel.acc-closing {
            animation: accPanelOut 140ms ease forwards;
            pointer-events: none;
        }
        .accident-filter-panel .acc-panel-drag {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 0 1px;
            cursor: grab;
            touch-action: none;
        }
        .accident-filter-panel .acc-panel-drag .acc-drag-pill {
            width: 34px;
            height: 4px;
            border-radius: 3px;
            background: var(--text-muted);
            opacity: 0.45;
        }
        .accident-filter-panel .acc-panel-header {
            padding: 4px 10px 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            cursor: grab;
            user-select: none;
        }
        .accident-filter-panel .acc-panel-header:active { cursor: grabbing; }
        .accident-filter-panel .acc-panel-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.01em;
        }
        .accident-filter-panel .acc-panel-body {
            padding: 0 10px 10px;
        }
        .accident-filter-panel .acc-panel-year-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
        }
        .accident-filter-panel .acc-panel-body label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            margin-bottom: 0;
            display: block;
            white-space: nowrap;
        }
        .accident-filter-panel .acc-panel-year-select {
            flex: 0 0 108px;
        }
        .accident-filter-panel .acc-panel-year-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 10px;
            max-height: 260px;
            overflow-y: auto;
        }
        .accident-filter-panel .acc-year-checkbox {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            padding: 8px 4px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            white-space: nowrap;
            user-select: none;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
        }
        .accident-filter-panel .acc-year-checkbox:active {
            transform: scale(0.96);
        }
        .accident-filter-panel .acc-year-checkbox:hover {
            background: var(--accent-light);
            border-color: rgba(13, 110, 253, 0.28);
        }
        .accident-filter-panel .acc-year-checkbox:has(input:checked) {
            border-color: rgba(37, 99, 235, 0.5);
            background: rgba(37, 99, 235, 0.12);
            color: #1d4ed8;
        }
        .accident-filter-panel .acc-year-checkbox input[type="checkbox"] {
            width: 14px;
            height: 14px;
            margin: 0;
            accent-color: #2563eb;
            cursor: pointer;
        }
        .accident-filter-panel .acc-year-checkbox span {
            line-height: 1;
        }
        .accident-filter-panel .acc-panel-body select {
            width: 100%;
            padding: 5px 28px 5px 10px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            appearance: auto;
            min-height: 34px;
            margin-bottom: 0;
        }
        .accident-filter-panel .acc-panel-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        .accident-filter-panel .acc-panel-actions .acc-filter-btn {
            width: 100%;
            text-align: center;
            padding: 7px 6px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.1;
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
        .accident-filter-panel .acc-panel-actions .acc-filter-btn .acc-filter-icon {
            font-size: 13px;
            line-height: 1;
        }
        .accident-filter-panel .acc-panel-actions .acc-filter-btn.is-selected {
            border-color: rgba(37, 99, 235, 0.35);
            background: rgba(37, 99, 235, 0.12);
            color: #1d4ed8;
        }
        .accident-filter-panel .acc-panel-actions .acc-filter-btn--mortel.is-selected {
            border-color: rgba(220, 38, 38, 0.4);
            background: rgba(220, 38, 38, 0.12);
            color: #b91c1c;
        }
        .accident-filter-panel .acc-panel-actions .acc-filter-btn:hover {
            background: var(--accent-light);
            border-color: rgba(13, 110, 253, 0.28);
        }
        .accident-filter-panel.acc-dragging {
            transition: none !important;
            opacity: 0.92;
        }
        @media (max-width: 768px) {
            .accident-filter-panel {
                right: 10px;
                width: min(360px, calc(100vw - 20px));
                bottom: calc(78px + env(safe-area-inset-bottom, 0px));
            }
            .accident-filter-panel .acc-panel-title {
                font-size: 11px;
            }
            .accident-filter-panel .acc-panel-actions .acc-filter-btn {
                min-height: 40px;
                padding: 6px 6px;
            }
        }

        /* ───── ANTENNES FILTER PANEL ───── */
        .antennes-filter-panel {
            display: none;
            position: fixed;
            bottom: 188px;
            right: 12px;
            width: min(340px, calc(100vw - 18px));
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
            z-index: 2000;
            overflow: hidden;
            flex-direction: column;
            transform-origin: bottom right;
            will-change: opacity, transform;
        }
        .antennes-filter-panel.visible {
            display: flex;
            animation: accPanelIn 180ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
        }
        .antennes-filter-panel .ant-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px 8px;
            border-bottom: 1px solid var(--border);
        }
        .antennes-filter-panel .ant-panel-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .antennes-filter-panel .ant-panel-close {
            border: 0;
            background: transparent;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            color: var(--text-muted);
            width: 28px;
            height: 28px;
            border-radius: 6px;
        }
        .antennes-filter-panel .ant-panel-close:hover { background: var(--bg-secondary); }
        .antennes-filter-panel .ant-panel-body { padding: 10px 14px 14px; }
        .antennes-filter-panel .ant-panel-row-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin: 4px 0 6px;
        }
        .antennes-filter-panel .ant-panel-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 10px;
        }
        .antennes-filter-panel .ant-chip {
            padding: 6px 12px;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 0.1s ease;
        }
        .antennes-filter-panel .ant-chip:active { transform: scale(0.96); }
        .antennes-filter-panel .ant-chip--op.is-selected {
            background: var(--ant-chip-color, #2563eb);
            border-color: var(--ant-chip-color, #2563eb);
            color: #ffffff;
        }
        .antennes-filter-panel .ant-chip--tech.is-selected {
            background: rgba(37, 99, 235, 0.12);
            border-color: rgba(37, 99, 235, 0.5);
            color: #1d4ed8;
        }
        .antennes-filter-panel .ant-panel-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 12px;
        }
        .antennes-filter-panel .ant-btn {
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid var(--border);
        }
        .antennes-filter-panel .ant-btn-ghost {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
        .antennes-filter-panel .ant-btn-primary {
            background: #2563eb;
            border-color: #2563eb;
            color: #ffffff;
        }
        .antennes-filter-panel .ant-btn-primary:hover { background: #1d4ed8; }
        /* Override the global .maplibregl-popup-content resize/rtl hack — it
           leaves a tiny native scrollbar bleeding into the rounded corner on
           short popups like ours and pushes the title against the top edge. */
        .maplibregl-popup.antennes-popup-wrap .maplibregl-popup-content {
            resize: none;
            overflow: visible;
            direction: ltr;
            min-width: 0;
            min-height: 0;
            padding: 14px 32px 14px 14px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
        }
        .maplibregl-popup.antennes-popup-wrap .maplibregl-popup-close-button {
            top: 4px;
            right: 6px;
            font-size: 18px;
            color: var(--text-muted);
            padding: 4px 8px;
        }
        .antenne-popup {
            font-size: 12.5px;
            line-height: 1.5;
            color: var(--text-primary);
        }
        .antenne-popup-title {
            font-weight: 800;
            font-size: 14px;
            margin-bottom: 6px;
            color: #1d4ed8;
        }
        .antenne-popup-line { margin-top: 2px; }
        .antenne-popup-link {
            display: inline-block;
            margin-top: 6px;
            color: #2563eb;
            text-decoration: underline;
            font-weight: 600;
        }
        @media (max-width: 768px) {
            .antennes-filter-panel {
                right: 10px;
                bottom: calc(78px + env(safe-area-inset-bottom, 0px));
            }
        }

        .map-ctrl-btn .ctrl-icon {
            width: 20px;
            height: 20px;
            transition: transform 0.3s ease, opacity 0.2s;
            pointer-events: none;
        }
        .map-ctrl-btn svg { pointer-events: none; transition: transform 0.3s ease, opacity 0.2s; }
        /* First and last buttons get rounded corners from group */
        .map-ctrl-group .map-ctrl-btn:first-child { border-radius: 8px 8px 0 0; }
        .map-ctrl-group .map-ctrl-btn:last-child { border-radius: 0 0 8px 8px; }
        .map-ctrl-group .map-ctrl-btn:only-child { border-radius: 8px; }
        .map-style-wrap {
            position: relative;
            pointer-events: auto;
        }
        .map-style-menu {
            position: absolute;
            right: 48px;
            top: 0;
            display: none;
            flex-direction: column;
            gap: 4px;
            min-width: 150px;
            padding: 8px;
            border-radius: 8px;
            background: #fff;
            border: 1px solid rgba(0,0,0,0.08);
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            z-index: 35;
        }
        [data-theme="dark"] .map-style-menu {
            background: #2d2d2d;
            border-color: rgba(255,255,255,0.1);
        }
        .map-style-menu.open { display: flex; }
        .map-style-opt {
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 10px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
        }
        .map-style-opt:hover { background: rgba(15,23,42,0.06); color: var(--text-primary); }
        .map-style-opt.active {
            background: rgba(8, 96, 214, 0.12);
            border-color: rgba(8, 96, 214, 0.35);
            color: #0b4fae;
        }
        .map-style-opt.active .map-style-opt-icon {
            color: #0b4fae;
        }
        .map-style-opt.active::after {
            content: "✓";
            margin-left: auto;
            font-size: 13px;
            font-weight: 800;
            line-height: 1;
            color: #0b4fae;
        }
        [data-theme="dark"] .map-style-opt.active {
            background: rgba(98, 159, 255, 0.2);
            border-color: rgba(120, 173, 255, 0.48);
            color: #d6e7ff;
        }
        [data-theme="dark"] .map-style-opt.active .map-style-opt-icon,
        [data-theme="dark"] .map-style-opt.active::after {
            color: #d6e7ff;
        }
        
        /* POI category panel */
        .poi-panel {
            position: fixed;
            bottom: 8px;
            left: 50%;
            width: min(420px, calc(100vw - 32px));
            max-width: 420px;
            box-sizing: border-box;
            background: var(--map-surface-strong);
            padding: 16px 24px 24px 24px;
            border-radius: 18px;
            box-shadow: 0 16px 40px rgba(2,6,23,0.22);
            transform: translateX(-50%);
            z-index: 1000;
            font-size: 14px;
        }
        .poi-panel .handle {
            width: 40px;
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            margin: 0 auto 12px;
            cursor: grab;
            touch-action: none;
        }
        .poi-close-btn {
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-muted);
            width: 26px;
            height: 26px;
            border-radius: 8px;
            font-size: 18px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        .poi-close-btn:hover {
            color: var(--text-primary);
            background: var(--bg-tertiary);
        }
        .poi-header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .poi-panel .poi-header {
            margin-bottom: 8px;
            cursor: grab;
            touch-action: none;
            user-select: none;
        }
        .poi-panel .poi-header label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
        }
        .poi-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .poi-panel .poi-categories label {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr);
            align-items: center;
            column-gap: 10px;
            margin: 4px 0;
            line-height: 1.25;
            padding: 4px 6px;
            border-radius: 10px;
            overflow: visible;
        }
        .poi-panel .poi-categories {
            max-height: min(44vh, 280px);
            overflow-y: auto;
            padding: 2px 2px 0;
            margin: 0 -2px;
        }
        .poi-panel input[type=checkbox] {
            width: 20px;
            height: 20px;
            margin: 0;
            transform: none;
            flex: 0 0 20px;
            display: block;
            accent-color: var(--accent);
        }
        .poi-panel .poi-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        /* use same style as department tool buttons */
        .poi-panel .poi-actions button { /* dept-tool-btn already applies */ }
        .poi-panel .poi-footer {
            margin-top: 12px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        .poi-btn {
            border: none;
            border-radius: 8px;
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, box-shadow 0.15s;
        }
        .poi-btn-primary {
            background: var(--accent, #0d6efd);
            color: #fff;
            box-shadow: 0 1px 4px rgba(13,110,253,0.18);
        }
        .poi-btn-primary:hover {
            background: var(--accent-hover, #0b5ed7);
            box-shadow: 0 2px 8px rgba(13,110,253,0.28);
        }
        .poi-btn-secondary {
            background: var(--bg-secondary, #f1f5f9);
            color: var(--text-primary, #1e293b);
            border: 1px solid var(--border, #e2e8f0);
        }
        .poi-btn-secondary:hover {
            background: var(--bg-tertiary, #e2e8f0);
        }
        /* remove old individual button styles */
        .poi-panel .poi-footer button {
            /* reset – handled by .poi-btn */
        }
        .poi-panel #poiCatApply {
            /* handled by .poi-btn-primary */
        }
        .poi-panel.dragging .handle,
        .poi-panel.dragging .poi-header {
            cursor: grabbing;
        }
        .map-style-opt:disabled { opacity: 0.45; cursor: not-allowed; }
        .map-style-opt-icon { width: 16px; height: 16px; flex: 0 0 auto; }
        /* GPS locating animation: use pseudo-element so shadow doesn't intercept clicks */
        .map-ctrl-btn.locating {
            color: var(--primary-color, #1a73e8);
            background: rgba(26, 115, 232, 0.08);
        }
        .map-ctrl-btn.locating::after {
            content: '';
            position: absolute;
            top: -3px; left: -3px; right: -3px; bottom: -3px;
            border-radius: 10px;
            pointer-events: none;
            z-index: -1;
            animation: pulse-locate 1s infinite;
        }
        @keyframes pulse-locate {
            0%, 100% { box-shadow: 0 0 0 rgba(66,133,244,0.0); }
            50% { box-shadow: 0 0 0 8px rgba(66,133,244,0.25); }
        }

        /* Hide default MapLibre controls */
        .maplibregl-ctrl-bottom-right { display: none !important; }

        /* â”€â”€â”€â”€â”€ DEPT DETECT POPUP â”€â”€â”€â”€â”€ */
        .dept-detect-popup {
            background: var(--popup-bg);
            color: var(--popup-text);
            border-radius: 12px;
            padding: 16px;
            min-width: 250px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .dept-detect-popup .popup-title {
            font-weight: 700;
            font-size: 15px;
            margin-bottom: 4px;
        }

        .dept-detect-popup .popup-subtitle {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .dept-detect-popup .popup-btn {
            display: block;
            width: 100%;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            background: var(--accent);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 6px;
        }

        .dept-detect-popup .popup-btn:hover { opacity: 0.9; }
        .dept-detect-popup .popup-btn.secondary {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        /* â”€â”€â”€â”€â”€ CLICK POPUP (unified map click) â”€â”€â”€â”€â”€ */
        .click-popup {
            padding: 14px;
            min-width: 260px;
            max-width: 320px;
            font-size: 13px;
        }
        .maplibregl-popup.map-poi-popup:not(.map-click-popup) .click-popup {
            padding: 16px 16px 14px;
            padding-right: 44px;
            min-width: 278px;
            max-width: 340px;
        }
        .maplibregl-popup.map-poi-popup:not(.map-click-popup) .cp-address-main {
            line-height: 1.25;
            padding-right: 0;
            font-size: 17px;
            font-weight: 800;
            letter-spacing: -0.01em;
        }
        .maplibregl-popup.map-poi-popup:not(.map-click-popup) .maplibregl-popup-close-button {
            top: 6px !important;
            right: 6px !important;
        }

        /* Draggable popups */
        .maplibregl-popup {
            cursor: default;
        }
        .maplibregl-popup .maplibregl-popup-content {
            cursor: grab;
            user-select: none;
            touch-action: none;
            position: relative; /* ensure internal close button is positioned relative to popup content */
            overflow: visible;
        }
        .maplibregl-popup .maplibregl-popup-content:active {
            cursor: grabbing;
        }
        .maplibregl-popup.popup-dragging {
            transition: none !important;
            z-index: 9999;
        }
        .maplibregl-popup.popup-dragged {
            z-index: 9998;
        }
        .maplibregl-popup.popup-dragged .maplibregl-popup-tip {
            display: none;
        }
        .cp-loading { text-align: center; padding: 12px 0; color: var(--text-secondary); }
        .cp-address { margin-bottom: 10px; }
        .cp-address-main {
            font-weight: 700;
            font-size: 15px;
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        .cp-address-full {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
            margin-bottom: 2px;
        }
        .cp-address-type {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.08);
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            margin: 2px 0 6px;
        }
        .cp-distance {
            font-weight: 600;
        }
        .cp-coords {
            font-size: 11px;
            color: var(--text-muted);
            font-family: monospace;
        }
        .cp-fuel-prices {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.045);
            border: 1px solid rgba(148, 163, 184, 0.18);
            color: var(--text-primary);
            font-size: 13px;
            line-height: 1.5;
        }
        .cp-fuel-prices-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .cp-fuel-prices-row {
            color: var(--text-primary);
        }
        .cp-fuel-prices-row--summary {
            color: var(--text-secondary);
        }
        .cp-fuel-prices-label {
            font-weight: 700;
        }
        .cp-fuel-prices-bullet {
            margin-right: 4px;
            color: #1d4ed8;
            font-weight: 900;
        }
        .cp-fuel-badge {
            display: inline-flex;
            align-items: center;
            margin-left: 6px;
            padding: 1px 6px;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.12);
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
        }
        .cp-fuel-updated {
            color: var(--text-muted);
            font-size: 11px;
            margin-left: 4px;
        }
        .cp-dept {
            font-size: 12px;
            color: var(--text-secondary);
            padding: 4px 8px;
            background: var(--bg-tertiary);
            border-radius: 6px;
            margin-bottom: 10px;
            display: inline-block;
        }
        .cp-brigade {
            background: var(--bg-secondary);
            border-left: 3px solid var(--accent);
            border-radius: 0 8px 8px 0;
            padding: 8px 10px;
            margin-bottom: 10px;
        }

        /* Keep popup action buttons readable — allow wrapping */
        .maplibregl-popup .cp-actions { min-width: 160px; flex-wrap: wrap; }
        /* allow popup action labels to wrap instead of being truncated */
        .maplibregl-popup .cp-actions .cp-btn { min-width: 0; flex: 1 1 auto; white-space: normal; overflow: visible; text-overflow: unset; text-align: center; word-break: break-word; line-height: 1.2; }
        .maplibregl-popup .cp-actions .cp-btn svg { margin-right:6px; }
        .cp-brigade-title {
            font-weight: 700;
            font-size: 13px;
            color: var(--accent);
            margin-bottom: 2px;
        }
        .cp-brigade-detail {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .cp-brigade-detail a { color: var(--success); text-decoration: none; font-weight: 600; }
        .cp-police {
            border-left-color: #2563eb;
        }
        .cp-police .cp-brigade-title {
            color: #2563eb;
        }
        .cp-dept-placeholder { display: inline-block; }
        /* Route mode buttons */
        .btn-mode {
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            cursor: pointer;
            font-weight: 700;
        }
        .btn-mode.active { background: linear-gradient(180deg,#0ea5e9,#0369a1); color: #fff; box-shadow: 0 8px 20px rgba(3,105,161,0.12); border-color: transparent; }
        [data-theme="dark"] .btn-mode {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.2);
            color: #f3f6ff;
        }
        #routeSummary .notice { margin: 0; }
        #routeSummary { min-height: 0; }
        .cp-actions { display:flex; flex-direction:row; gap:8px; flex-wrap:wrap; align-items:center; }
        .cp-btn {
            display: inline-flex;
            width: auto;
            padding: 8px 10px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            background: var(--map-surface-strong);
            box-shadow: 0 6px 18px rgba(2,6,23,0.06);
            transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
        }
        .cp-btn:active { transform: translateY(1px) scale(0.998); }
        .cp-btn-route {
            background: linear-gradient(180deg, var(--accent), #0550b6);
            color: #fff; border-color: transparent; box-shadow: 0 8px 26px rgba(5,80,182,0.12);
        }
        .cp-btn-route:hover { opacity: 0.95; }
        .cp-btn-secondary {
            background: transparent;
            color: var(--text-primary);
        }
        .cp-btn-secondary:hover { background: rgba(0,0,0,0.04); }
        .cp-btn-share {
            background: #0f172a;
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 8px 20px rgba(15,23,42,0.18);
        }
        .maplibregl-popup .cp-actions .cp-btn.cp-btn-share {
            background: #0f172a !important;
            color: #ffffff !important;
            border-color: transparent !important;
        }
        .cp-btn-share:hover { opacity: 0.96; }
        [data-theme="dark"] .cp-btn-share {
            background: #2563eb;
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(37,99,235,0.22);
        }
        .cp-btn .cp-btn-icon {
            margin-right: 6px;
            line-height: 1;
            display: inline-block;
        }
        .maplibregl-popup.map-click-popup .maplibregl-popup-content {
            cursor: default;
            border-radius: 22px !important;
            border: 1px solid rgba(15, 23, 42, 0.14);
            box-shadow: 0 18px 36px rgba(2, 6, 23, 0.24) !important;
            max-width: min(376px, calc(100vw - 16px)) !important;
            max-height: min(78vh, 620px) !important;
            overflow: hidden;
            padding: 0 !important;
        }
        .maplibregl-popup.map-click-popup .maplibregl-popup-close-button {
            width: 30px !important;
            height: 30px !important;
            top: 10px !important;
            right: 10px !important;
            border: 1px solid rgba(148, 163, 184, 0.45) !important;
            background: rgba(255, 255, 255, 0.95) !important;
            box-shadow: 0 4px 12px rgba(2, 6, 23, 0.08);
        }
        .click-popup--map-click {
            width: min(364px, calc(100vw - 16px));
            min-width: 0;
            max-width: none;
            padding: 10px 12px 14px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            color: #0f172a;
            border-radius: inherit;
            overflow: hidden;
        }
        .click-popup--map-click .cp-header {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 18px;
            margin: 0 42px 6px;
            cursor: grab;
            touch-action: none;
            user-select: none;
        }
        .click-popup--map-click .cp-drag-handle {
            width: 44px;
            height: 5px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.72);
        }
        .maplibregl-popup.popup-dragging .click-popup--map-click .cp-header { cursor: grabbing; }
        .maplibregl-popup.popup-dragging .click-popup--map-click .cp-drag-handle {
            background: rgba(71, 85, 105, 0.52);
        }
        .click-popup--map-click .cp-body {
            display: grid;
            gap: 10px;
            max-height: calc(min(78vh, 620px) - 42px);
            overflow: auto;
            padding-right: 4px;
        }
        .click-popup--map-click .cp-address {
            margin-bottom: 0;
            display: grid;
            gap: 2px;
        }
        .click-popup--map-click .cp-address-main {
            font-size: 17px;
            line-height: 1.26;
            letter-spacing: -0.01em;
            margin-bottom: 1px;
            padding-right: 44px;
        }
        .click-popup--map-click .cp-address-full {
            font-size: 13px;
            color: #64748b;
            line-height: 1.4;
            max-height: 4.4em;
            overflow: auto;
        }
        .click-popup--map-click .cp-coords {
            display: inline-flex;
            width: auto;
            margin-top: 2px;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.18);
            color: #475569;
            font-size: 11px;
        }
        .click-popup--map-click .cp-dept {
            margin-bottom: 0;
            padding: 4px 9px;
            border-radius: 999px;
            background: #eaf2ff;
            border: 1px solid rgba(37, 99, 235, 0.24);
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 700;
        }
        .click-popup--map-click .cp-brigade {
            margin-bottom: 0;
            border-left: 4px solid #0ea5e9;
            border-radius: 14px;
            border: 1px solid rgba(14, 116, 144, 0.2);
            background: #f8fafc;
            padding: 8px 10px;
        }
        .click-popup--map-click .cp-police {
            border-left-color: #2563eb;
            border-color: rgba(37, 99, 235, 0.24);
            background: #eff6ff;
        }
        .click-popup--map-click .cp-brigade-title {
            font-size: 15px;
            margin-bottom: 1px;
            color: #0c4a6e;
        }
        .click-popup--map-click .cp-police .cp-brigade-title { color: #1d4ed8; }
        .click-popup--map-click .cp-brigade-sub {
            font-size: 11px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 4px;
        }
        .click-popup--map-click .cp-brigade-detail {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #334155;
        }
        .click-popup--map-click .cp-inline-icon {
            width: 14px;
            height: 14px;
            min-width: 14px;
            fill: currentColor;
            color: #64748b;
        }
        .click-popup--map-click .cp-brigade-detail a {
            color: #0f766e;
            font-weight: 700;
            text-decoration: none;
        }
        .click-popup--map-click .cp-brigade-detail a:hover { text-decoration: underline; }
        .click-popup--map-click .cp-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-top: 4px;
        }
        .click-popup--map-click .cp-btn {
            width: 100%;
            min-height: 44px;
            min-width: 0;
            border-radius: 14px;
            border: 1px solid rgba(15, 23, 42, 0.13);
            background: #f8fafc;
            box-shadow: none;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 700;
            justify-content: flex-start;
            align-items: center;
            gap: 8px;
            text-align: left;
        }
        .click-popup--map-click .cp-btn svg,
        .click-popup--map-click .cp-btn .cp-btn-svg {
            width: 15px;
            height: 15px;
            min-width: 15px;
            fill: currentColor;
        }
        .click-popup--map-click .cp-btn span {
            display: inline-block;
            line-height: 1.2;
        }
        .click-popup--map-click .cp-btn-route {
            background: linear-gradient(180deg, #1a73e8 0%, #0f5fcf 100%);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 8px 18px rgba(26, 115, 232, 0.24);
        }
        .click-popup--map-click .cp-btn-share {
            background: #0f172a;
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 8px 16px rgba(15, 23, 42, 0.22);
        }
        .click-popup--map-click .cp-btn-secondary {
            background: #eef2ff;
            color: #1e3a8a;
            border-color: rgba(59, 130, 246, 0.28);
        }
        [data-theme="dark"] .maplibregl-popup.map-click-popup .maplibregl-popup-content {
            border-color: rgba(148, 163, 184, 0.35);
            box-shadow: 0 18px 36px rgba(2, 6, 23, 0.42) !important;
        }
        [data-theme="dark"] .maplibregl-popup.map-click-popup .maplibregl-popup-close-button {
            border-color: rgba(148, 163, 184, 0.4) !important;
            background: rgba(30, 41, 59, 0.95) !important;
        }
        [data-theme="dark"] .click-popup--map-click {
            background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
            color: #f8fafc;
        }
        [data-theme="dark"] .click-popup--map-click .cp-address-full,
        [data-theme="dark"] .click-popup--map-click .cp-brigade-sub { color: #94a3b8; }
        [data-theme="dark"] .click-popup--map-click .cp-coords {
            background: rgba(148, 163, 184, 0.22);
            color: #cbd5e1;
        }
        [data-theme="dark"] .click-popup--map-click .cp-dept {
            background: rgba(37, 99, 235, 0.2);
            border-color: rgba(96, 165, 250, 0.38);
            color: #bfdbfe;
        }
        [data-theme="dark"] .click-popup--map-click .cp-brigade {
            border-color: rgba(14, 116, 144, 0.36);
            background: rgba(15, 23, 42, 0.55);
        }
        [data-theme="dark"] .click-popup--map-click .cp-police {
            border-color: rgba(59, 130, 246, 0.42);
            background: rgba(30, 58, 138, 0.35);
        }
        [data-theme="dark"] .click-popup--map-click .cp-brigade-title { color: #bae6fd; }
        [data-theme="dark"] .click-popup--map-click .cp-police .cp-brigade-title { color: #bfdbfe; }
        [data-theme="dark"] .click-popup--map-click .cp-brigade-detail { color: #e2e8f0; }
        [data-theme="dark"] .click-popup--map-click .cp-inline-icon { color: #94a3b8; }
        [data-theme="dark"] .click-popup--map-click .cp-btn {
            border-color: rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.72);
            color: #e2e8f0;
        }
        [data-theme="dark"] .click-popup--map-click .cp-btn-secondary {
            background: rgba(30, 58, 138, 0.38);
            color: #bfdbfe;
            border-color: rgba(96, 165, 250, 0.42);
        }
        @media (max-width: 768px) {
            /* Mobile-responsive click popup */
            .maplibregl-popup .maplibregl-popup-content {
                max-width: calc(100vw - 24px) !important;
                min-width: 200px;
            }
            .click-popup {
                padding: 10px;
                min-width: 220px;
                max-width: none;
                font-size: 12px;
            }
            .maplibregl-popup.map-poi-popup:not(.map-click-popup) .click-popup {
                padding-right: 42px;
            }
            .cp-address-main { font-size: 14px; }
            .cp-address-full { font-size: 11px; }
            .cp-coords { font-size: 12px; }
            .cp-dept { font-size: 11px; padding: 3px 6px; margin-bottom: 8px; }
            .cp-brigade {
                padding: 6px 8px;
                margin-bottom: 8px;
            }
            .cp-brigade-title { font-size: 12px; }
            .cp-brigade-detail { font-size: 11px; }
            .cp-btn {
                padding: 7px 8px;
                font-size: 12px;
            }
            .maplibregl-popup.map-click-popup .maplibregl-popup-content {
                max-width: min(338px, calc(100vw - 12px)) !important;
                border-radius: 20px !important;
            }
            .click-popup--map-click {
                width: min(332px, calc(100vw - 12px));
                padding: 8px 10px 12px;
            }
            .click-popup--map-click .cp-header {
                margin: 0 36px 6px;
                min-height: 16px;
            }
            .click-popup--map-click .cp-address-main {
                font-size: 15px;
                padding-right: 38px;
            }
            .click-popup--map-click .cp-address-full { font-size: 12px; }
            .click-popup--map-click .cp-actions { gap: 6px; }
            .click-popup--map-click .cp-btn {
                min-height: 40px;
                border-radius: 12px;
                padding: 9px 12px;
                font-size: 12px;
            }
            .click-popup--map-click .cp-brigade-title { font-size: 13px; }
            .click-popup--map-click .cp-brigade-sub { font-size: 12px; }
        }
        @media (max-width:420px) {
            .cp-actions { flex-direction: column; }
            .cp-btn { width: 100%; border-radius: 8px; min-width: 0; white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; line-height: 1.2; }
            .maplibregl-popup .maplibregl-popup-content { max-width: calc(100vw - 16px) !important; min-width: 180px; }
            /* ensure popup action text stays readable */
            .maplibregl-popup .cp-actions .cp-btn { padding-left: 10px; padding-right: 10px; font-size: 13px; white-space: normal; overflow: visible; text-align: center; }
            .click-popup {
                padding: 8px;
                min-width: 180px;
            }
            .click-popup--map-click {
                width: min(304px, calc(100vw - 10px));
            }
            .click-popup--map-click .cp-body {
                max-height: calc(min(74vh, 560px) - 36px);
            }
        }

        /* Hard decommission guard: even if an old caller re-adds `.mobile-bottom`,
           keep itinerary inline and never as a detached bottom drawer. */
        .route-compact.mobile-bottom {
            position: relative !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            width: 100% !important;
            max-width: 560px !important;
            max-height: 300px !important;
            border-radius: 8px !important;
            box-shadow: var(--card-shadow) !important;
            padding: 6px 8px !important;
            z-index: 1200 !important;
        }

        /* Minimal itinerary view (shown when user clicks an "Itinéraire" CTA) */
        .route-compact.route-compact--minimal {
            max-width: 640px;
            padding: 6px 8px; /* even tighter */
            position: relative;
        }
        /* When moved into the top overlay we keep route-compact in the DOM but visually collapse it */
        .route-compact.route-compact--minimal.route-compact--moved { min-height: 0; padding: 0; margin: 0; border: none; box-shadow: none; visibility: hidden; height: 0; overflow: hidden; }
        .route-compact.route-compact--minimal .route-row { gap:2px; }
        .route-compact.route-compact--minimal .route-row > div { flex: 1 1 100%; margin-left: 0 !important; }
        .route-compact.route-compact--minimal .route-actions { gap:4px; align-items:center; }
        /* hide auxiliary actions in minimal mode; only keep the nav start when available */
        .route-compact.route-compact--minimal .route-actions .btn { display: none; }
        .route-compact.route-compact--minimal .route-actions .btn-success { display: inline-flex; }
        /* reposition swap button to the right side */
        .route-compact.route-compact--minimal .route-swap-btn { position: absolute; right: 6px; top: 40px; transform: translateY(-50%); z-index: 10; }
        /* transport icons remain prominent above inputs */
        .route-compact.route-compact--minimal .route-mode { margin-bottom: 2px; }
        /* make inputs slightly more compact */
        .route-compact.route-compact--minimal .form-input { height: 32px; font-size: 14px; }
        /* ensure no extra bottom gap when inline */
        .map-search-inner .route-compact { margin-bottom: 0; }
        .map-search-inner .search-row { margin-top: 4px; }
        .map-search-inner .inline-route-summary { margin-top:2px; margin-bottom:2px; }

        /* Inline / integrated display when inputs are moved into the search overlay */
        .map-search-inner .inline-route-mode { display:flex; gap:6px; justify-content:flex-start; margin-bottom:2px; }
        .map-search-inner .inline-route-mode .btn-mode { padding:6px 8px; font-size:13px; min-width:44px; height:34px; }
        .map-search-inner .inline-route-from { margin-top:2px; margin-bottom:2px; position:relative; }
        .map-search-inner .inline-route-from .form-label-sm { display:none; }
        .map-search-inner .inline-route-from .form-input { height:34px; border-radius:8px; padding:5px 8px; border:1px solid var(--border); background: var(--bg-primary); color: var(--text-primary); box-shadow: none; }
        .map-search-inner .inline-route-from .form-input::placeholder { color: var(--text-muted); }
        .map-search-inner .inline-swap-btn { position: absolute; right: 6px; top: 8px; transform: translateY(0); z-index: 10; width:30px; height:30px; }
        .map-search-inner .inline-route-actions { display:flex; gap:6px; align-items:center; }
        .map-search-inner .inline-route-actions .btn { padding:6px 10px; font-size:13px; }
        .inline-nav-btn { display:none !important; }
        .inline-nav-btn.visible { display: inline-flex !important; }
        .inline-route-summary { margin-top:4px; }
        .inline-route-summary .notice { margin:0; padding:6px 8px; border-radius:8px; font-size:13px; }
        /* scope the inline close to the top overlay so it cannot float elsewhere */
        .map-search-inner .inline-route-close { position: absolute; right: 6px; top: 2px; background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; padding: 3px 6px; box-shadow: 0 3px 8px rgba(2,6,23,0.05); cursor: pointer; z-index: 1250; }
        .map-search-inner .inline-route-close:hover { background: rgba(0,0,0,0.06); }
        /* make the integrated area compact: reduce vertical white space */
        .map-search-inner.route-expanded { padding-bottom: 0px; gap: 2px; }

        /* make the inline 'Démarrer' button use the primary (blue) accent so it's visible */
        #navBtn { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

        /* ensure the navigation panel sits above the mobile nav and bottom bar */
        .nav-panel { z-index: 1400; }
        .route-compact.route-compact--moved { transition: none !important; }

        /* ensure popups and overlay are not cluttered */
        .maplibregl-popup .cp-actions .cp-btn-route { white-space: normal; }

        /* Google-like itinerary UI */
        .map-overlay-search .route-compact.route-compact--open {
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.12);
            border-radius: 24px;
            padding: 10px 12px 12px;
            box-shadow: 0 18px 34px rgba(2, 6, 23, 0.22);
            max-height: min(74vh, 460px);
        }
            .map-overlay-search .route-compact .route-compact-header {
                display: grid;
                grid-template-columns: auto 1fr;
                align-items: center;
                gap: 8px;
                margin-bottom: 8px;
                cursor: grab;
            }
        .map-overlay-search .route-compact .route-header-btn--close { display: none !important; }
        .map-overlay-search .route-compact .route-compact-grab {
            margin: 0 auto;
            width: 46px;
            height: 5px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.18);
        }
        .route-header-btn {
            width: 32px;
            height: 32px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: #ffffff;
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 4px 10px rgba(2, 6, 23, 0.08);
        }
        .route-header-btn:hover { background: #f8fafc; }
        .route-header-btn--clear {
            color: #b42318;
            border-color: rgba(180, 35, 24, 0.3);
            background: #fff5f5;
        }
        .route-header-btn--clear:hover {
            background: #ffe6e6;
            border-color: rgba(180, 35, 24, 0.45);
        }
        .route-header-btn--clear .icon {
            width: 16px;
            height: 16px;
            stroke: currentColor;
        }

        .map-overlay-search .route-compact .route-input-grid {
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: start;
        }
        .map-overlay-search .route-compact .route-input-main {
            position: relative;
            gap: 8px;
        }
        .map-overlay-search .route-compact .route-input-main::before {
            content: '';
            position: absolute;
            left: 12px;
            top: 28px;
            bottom: 28px;
            border-left: 2px dotted rgba(148, 163, 184, 0.78);
            pointer-events: none;
        }
        .map-overlay-search .route-compact .route-core-row {
            display: grid;
            grid-template-columns: 14px 16px minmax(0, 1fr) auto;
            align-items: center;
            gap: 6px;
            border: 1px solid rgba(15, 23, 42, 0.14);
            border-radius: 14px;
            background: #ffffff;
            padding: 0 6px 0 4px;
            min-height: 46px;
        }
        .map-overlay-search .route-compact .route-point {
            width: 12px;
            height: 12px;
            border-radius: 999px;
            z-index: 1;
        }
        .map-overlay-search .route-compact .route-point--from {
            background: #1a73e8;
            box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.14);
        }
        .map-overlay-search .route-compact .route-point--to {
            background: #ffffff;
            border: 3px solid #ea4335;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
        }
        .map-overlay-search .route-compact .route-core-drag-handle {
            width: 16px;
            min-width: 16px;
            height: 40px;
            border: none;
            border-radius: 0;
            background: transparent;
            color: #94a3b8;
            font-size: 14px;
            font-weight: 700;
            box-shadow: none;
            cursor: grab;
        }
        .map-overlay-search .route-compact .route-core-drag-handle:hover { background: transparent; }
        .map-overlay-search .route-compact .route-autocomplete { min-width: 0; }
        .map-overlay-search .route-compact .form-input {
            height: 42px;
            border: none !important;
            box-shadow: none !important;
            background: transparent;
            padding: 5px 6px;
            font-size: 18px;
            border-radius: 0;
        }
        .map-overlay-search .route-compact #routeFromInput {
            color: #1a73e8;
            font-weight: 600;
        }
        .map-overlay-search .route-compact #routeToInput {
            color: #0f172a;
            font-weight: 500;
        }
        .map-overlay-search .route-compact .route-core-remove {
            width: 24px;
            height: 24px;
            min-width: 24px;
            justify-self: end;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: #f8fafc;
            color: #475569;
            box-shadow: none;
            font-size: 14px;
        }
        .map-overlay-search .route-compact .route-core-remove:hover {
            background: #eef2ff;
            color: #1e293b;
            border-color: rgba(100, 116, 139, 0.6);
            transform: none;
        }
        .map-overlay-search .route-compact .route-input-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
            padding-top: 1px;
        }
        .map-overlay-search .route-compact .route-icon-btn {
            width: 38px !important;
            min-width: 38px !important;
            height: 38px !important;
            border-radius: 999px !important;
            border: 1px solid rgba(15, 23, 42, 0.16) !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
            box-shadow: 0 4px 10px rgba(2, 6, 23, 0.09);
            color: #334155 !important;
            transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
        }
        .map-overlay-search .route-compact .route-icon-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(15, 23, 42, 0.24) !important;
            background: #f8fafc !important;
            box-shadow: 0 6px 12px rgba(2, 6, 23, 0.14);
        }
        .map-overlay-search .route-compact .route-icon-btn:active {
            transform: none;
            background: #eef2ff !important;
            box-shadow: 0 2px 6px rgba(2, 6, 23, 0.08);
        }
        .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--gps {
            color: #0b63d4 !important;
            border-color: rgba(11, 99, 212, 0.34) !important;
            background: linear-gradient(180deg, #f1f7ff 0%, #e5f0ff 100%) !important;
        }
        .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--swap {
            color: #0f766e !important;
            border-color: rgba(15, 118, 110, 0.34) !important;
            background: linear-gradient(180deg, #f2fbf8 0%, #e6f6f2 100%) !important;
        }
        .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--gps:hover {
            background: #e8f2ff !important;
            border-color: rgba(11, 99, 212, 0.5) !important;
        }
        .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--swap:hover {
            background: #e8f8f3 !important;
            border-color: rgba(15, 118, 110, 0.5) !important;
        }
        .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--gps:active {
            background: #dcecff !important;
        }
        .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--swap:active {
            background: #ddf1ea !important;
        }
        .map-overlay-search .route-compact .route-icon-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .map-overlay-search .route-compact .route-waypoints-container {
            gap: 6px;
            margin-top: 8px;
            max-height: 180px;
        }
        .map-overlay-search .route-compact .route-waypoint-row {
            border: 1px solid rgba(15, 23, 42, 0.12);
            border-radius: 14px;
            background: #f8fafc;
            padding: 0 8px;
        }
        .map-overlay-search .route-compact .route-wp-drag-handle {
            color: #94a3b8;
            width: 16px;
            min-width: 16px;
        }
        .map-overlay-search .route-compact .route-wp-remove {
            width: 24px;
            height: 24px;
            min-width: 24px;
            justify-self: end;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: #ffffff;
            color: #475569;
            box-shadow: none;
        }
        .map-overlay-search .route-compact .route-add-wp-btn {
            margin-top: 8px;
            margin-bottom: 2px;
            min-height: 36px;
            border-radius: 999px;
            border: 1px solid rgba(26, 115, 232, 0.3);
            background: #e8f0fe;
            color: #1a73e8;
            font-weight: 700;
            padding: 7px 13px;
        }
        .map-overlay-search .route-compact .route-add-wp-btn:hover {
            background: #dbe8ff;
            color: #1a73e8;
            border-color: rgba(26, 115, 232, 0.45);
        }

        .map-overlay-search .route-compact .route-mode { margin-top: 8px !important; }
        .map-overlay-search .route-compact .route-mode > div {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: 100%;
            gap: 6px !important;
        }
        .map-overlay-search .route-compact .route-mode .btn-mode {
            height: 36px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, 0.12);
            background: #f8fafc;
            color: #334155;
            font-weight: 700;
            padding: 6px 8px;
        }
        .map-overlay-search .route-compact .route-mode .btn-mode.active {
            border-color: rgba(26, 115, 232, 0.35);
            background: #e8f0fe;
            color: #1a73e8;
        }
        .map-overlay-search .route-compact .route-actions {
            margin-top: 8px !important;
            gap: 8px !important;
        }
        .map-overlay-search .route-compact .route-actions .btn {
            border-radius: 999px;
            height: 40px;
            font-size: 14px;
            font-weight: 700;
        }
        .map-overlay-search .route-compact .route-actions .route-preview-btn {
            background: #e8f0fe;
            color: #1a73e8;
            border: 1px solid rgba(26, 115, 232, 0.32);
        }
        .map-overlay-search .route-compact .route-actions .route-start-btn {
            background: #0b8f95;
            color: #ffffff;
            border: 1px solid #0b8f95;
        }
        .map-overlay-search .route-compact .route-actions .route-clear-btn {
            flex: 0 0 auto;
            min-width: 96px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(180, 35, 24, 0.28);
            background: #fff5f5;
            color: #b42318;
        }
        .map-overlay-search .route-compact .route-actions .route-clear-btn .icon {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
        }
        .map-overlay-search .route-compact .route-actions .route-clear-btn:hover {
            background: #ffe6e6;
            border-color: rgba(180, 35, 24, 0.45);
        }
        .route-summary-card {
            margin-top: 8px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid rgba(26, 115, 232, 0.2);
            background: #f7fbff;
        }
        .route-summary-main {
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.2;
        }
        .route-summary-sub {
            margin-top: 4px;
            font-size: 12px;
            color: #64748b;
        }

        .map-bottom-bar .mb-left {
            border-radius: 18px;
            padding: 10px 12px 11px;
            background: var(--map-surface-strong);
            box-shadow: 0 10px 24px rgba(2, 6, 23, 0.16);
            border: 1px solid rgba(15, 23, 42, 0.12);
        }
        .map-bottom-bar .mb-left .mb-close-inline {
            top: 8px;
            right: 8px;
            border-radius: 999px;
            width: 28px;
            height: 28px;
        }
        .map-bottom-bar .mb-left .mb-title {
            font-size: 15px;
            line-height: 1.18;
            padding-right: 30px;
        }
        .map-bottom-bar .mb-left .mb-sub {
            font-size: 11.5px;
        }
        .map-bottom-bar .mb-left .gm-route-sheet {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 2px;
        }
        .map-bottom-bar .mb-left .gm-route-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-right: 34px;
        }
        .map-bottom-bar .mb-left .gm-route-title {
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
        }
        .map-bottom-bar .mb-left .gm-route-tools {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .map-bottom-bar .mb-left .gm-round-tool {
            border: 1px solid rgba(15, 23, 42, 0.12);
            background: #ffffff;
            color: #334155;
            border-radius: 999px;
            min-width: 30px;
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0;
            font-weight: 700;
            transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
        }
        .map-bottom-bar .mb-left .gm-round-tool:hover {
            transform: translateY(-1px);
            background: #f8fafc;
            border-color: rgba(15, 23, 42, 0.2);
        }
        .map-bottom-bar .mb-left .gm-round-tool svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        .map-bottom-bar .mb-left .gm-round-tool--danger {
            color: #b42318;
            border-color: rgba(180, 35, 24, 0.3);
            background: #fff5f5;
        }
        .map-bottom-bar .mb-left .gm-round-tool--danger:hover {
            background: #ffe6e6;
            border-color: rgba(180, 35, 24, 0.45);
        }
        .map-bottom-bar .mb-left .gm-round-tool--danger svg {
            fill: none;
            stroke: currentColor;
        }
        .map-bottom-bar .mb-left .gm-route-tabs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
        }
        .map-bottom-bar .mb-left .gm-route-options {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 6px;
        }
        .map-bottom-bar .mb-left .gm-route-option {
            border: 1px solid rgba(15, 23, 42, 0.16);
            border-radius: 999px;
            background: #ffffff;
            color: #334155;
            min-height: 30px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            padding: 0 10px;
        }
        .map-bottom-bar .mb-left .gm-route-option.active {
            color: #1a73e8;
            border-color: rgba(26, 115, 232, 0.35);
            background: #e8f0fe;
        }
        .map-bottom-bar .mb-left .gm-route-tab {
            border: 1px solid rgba(15, 23, 42, 0.12);
            border-radius: 999px;
            background: #f8fafc;
            color: #334155;
            min-height: 34px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            padding: 0 8px;
        }
        .map-bottom-bar .mb-left .gm-route-tab.active {
            color: #1a73e8;
            border-color: rgba(26, 115, 232, 0.35);
            background: #e8f0fe;
        }
        .map-bottom-bar .mb-left .gm-route-main {
            border: 1px solid rgba(15, 23, 42, 0.1);
            border-radius: 12px;
            background: #f8fafc;
            padding: 8px 10px;
        }
        .map-bottom-bar .mb-left .gm-route-eta {
            font-size: 32px;
            line-height: 1;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: -0.02em;
        }
        .map-bottom-bar .mb-left .gm-route-eta .gm-route-distance {
            font-size: 16px;
            color: #334155;
            font-weight: 500;
            margin-left: 2px;
        }
        .map-bottom-bar .mb-left .gm-route-sub {
            margin-top: 4px;
            font-size: 12px;
            color: #64748b;
        }
        .map-bottom-bar .mb-left .gm-route-arrival {
            margin-top: 2px;
            color: #475569;
        }
        .map-bottom-bar .mb-left .gm-route-note {
            margin-top: 2px;
            color: #b45309;
            font-size: 11px;
        }
        .map-bottom-bar .mb-left .gm-route-brigade {
            margin-top: 0;
            font-size: 12px;
            color: var(--text-muted);
        }
        .map-bottom-bar .mb-left .gm-route-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .map-bottom-bar .mb-left .gm-route-btn {
            border: none;
            border-radius: 999px;
            min-height: 40px;
            padding: 0 13px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1 1 0;
        }
        .map-bottom-bar .mb-left .gm-route-btn .icon { width: 16px; height: 16px; fill: currentColor; }
        .map-bottom-bar .mb-left .gm-route-btn-start {
            background: #0b8f95;
            color: #ffffff;
            box-shadow: 0 8px 18px rgba(11, 143, 149, 0.25);
        }
        .map-bottom-bar .mb-left .gm-route-btn-alt {
            background: #cdefff;
            color: #0f5f88;
            border: 1px solid rgba(15, 95, 136, 0.2);
        }

        [data-theme="dark"] .map-overlay-search .route-compact.route-compact--open {
            background: rgba(15, 23, 42, 0.96);
            border-color: rgba(148, 163, 184, 0.36);
            box-shadow: 0 18px 34px rgba(2, 6, 23, 0.62);
        }
        [data-theme="dark"] .route-header-btn,
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-round-tool {
            background: rgba(15, 23, 42, 0.88);
            border-color: rgba(148, 163, 184, 0.35);
            color: #e2e8f0;
        }
        [data-theme="dark"] .route-header-btn--clear,
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-round-tool--danger,
        [data-theme="dark"] .map-overlay-search .route-compact .route-actions .route-clear-btn {
            background: rgba(127, 29, 29, 0.28);
            border-color: rgba(248, 113, 113, 0.45);
            color: #fecaca;
        }
        [data-theme="dark"] .map-overlay-search .route-compact .route-core-row,
        [data-theme="dark"] .map-overlay-search .route-compact .route-waypoint-row,
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-main {
            background: rgba(15, 23, 42, 0.72);
            border-color: rgba(148, 163, 184, 0.35);
        }
        [data-theme="dark"] .map-overlay-search .route-compact .route-icon-btn {
            background: rgba(15, 23, 42, 0.9) !important;
            border-color: rgba(148, 163, 184, 0.36) !important;
            color: #e2e8f0 !important;
            box-shadow: 0 6px 14px rgba(2, 6, 23, 0.5);
        }
        [data-theme="dark"] .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--gps {
            color: #93c5fd !important;
            border-color: rgba(96, 165, 250, 0.5) !important;
            background: rgba(30, 58, 138, 0.42) !important;
        }
        [data-theme="dark"] .map-overlay-search .route-compact .route-icon-btn.route-icon-btn--swap {
            color: #5eead4 !important;
            border-color: rgba(45, 212, 191, 0.46) !important;
            background: rgba(17, 94, 89, 0.42) !important;
        }
        [data-theme="dark"] .map-overlay-search .route-compact #routeFromInput { color: #60a5fa; }
        [data-theme="dark"] .map-overlay-search .route-compact #routeToInput,
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-title,
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-eta { color: #f8fafc; }
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-tab {
            background: rgba(15, 23, 42, 0.72);
            border-color: rgba(148, 163, 184, 0.35);
            color: #e2e8f0;
        }
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-option {
            background: rgba(15, 23, 42, 0.72);
            border-color: rgba(148, 163, 184, 0.35);
            color: #e2e8f0;
        }
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-option.active {
            background: rgba(30, 64, 175, 0.38);
            border-color: rgba(96, 165, 250, 0.55);
            color: #bfdbfe;
        }
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-note {
            color: #fbbf24;
        }
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-tab.active {
            background: rgba(30, 64, 175, 0.38);
            border-color: rgba(96, 165, 250, 0.55);
            color: #bfdbfe;
        }
        [data-theme="dark"] .map-bottom-bar .mb-left .gm-route-btn-alt {
            background: rgba(30, 64, 175, 0.26);
            border-color: rgba(96, 165, 250, 0.42);
            color: #bfdbfe;
        }

        @media (max-width: 768px) {
            body.mobile-search-editing .autocomplete-float.autocomplete-float--mobile-full,
            body.mobile-keyboard-open .autocomplete-float.autocomplete-float--mobile-full {
                max-height: calc(var(--mobile-vvh, 100dvh) - 118px) !important;
            }
            .map-overlay-search {
                top: 8px;
                left: 8px;
                right: 8px;
                transform: none;
                justify-content: flex-start;
                width: auto;
                max-width: none;
            }
            .map-overlay-search .map-search-inner {
                gap: 6px;
                width: 100%;
                max-width: 100%;
            }
            body.route-modal-open .map-overlay-search {
                right: 60px;
            }
            .map-overlay-search .route-compact.route-compact--open:not(.route-compact--moved) {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                align-self: flex-start;
            }
            .map-overlay-search .route-compact.route-compact--open {
                border-radius: 20px;
                padding: 7px 8px calc(10px + env(safe-area-inset-bottom, 0px));
                max-height: min(calc(var(--mobile-vvh, 100dvh) - 150px), 430px);
                overflow-y: auto;
                overscroll-behavior: contain;
            }
            .map-overlay-search .route-compact .route-compact-header {
                gap: 6px;
                margin-bottom: 6px;
            }
            .map-overlay-search .route-compact .route-compact-grab {
                width: 40px;
                height: 4px;
            }
            .map-overlay-search .route-compact .route-input-grid {
                grid-template-columns: minmax(0, 1fr) 34px;
                gap: 6px;
            }
            .map-overlay-search .route-compact .route-input-main {
                gap: 6px;
            }
            .map-overlay-search .route-compact .route-input-main::before {
                left: 9px;
                top: 24px;
                bottom: 24px;
            }
            .map-overlay-search .route-compact .route-core-row {
                grid-template-columns: 12px minmax(0, 1fr) 22px;
                min-height: 40px;
                border-radius: 12px;
                padding: 0 4px 0 3px;
                gap: 5px;
            }
            .map-overlay-search .route-compact .route-core-drag-handle {
                display: none;
            }
            .map-overlay-search .route-compact .route-point {
                width: 10px;
                height: 10px;
            }
            .map-overlay-search .route-compact .route-header-btn {
                width: 30px;
                height: 30px;
                font-size: 13px;
            }
            .map-overlay-search .route-compact .form-input {
                height: 34px;
                font-size: clamp(14px, 4.1vw, 16px);
                padding: 4px 5px;
            }
            .map-overlay-search .route-compact .route-core-remove {
                width: 22px;
                height: 22px;
                min-width: 22px;
                font-size: 13px;
            }
            .map-overlay-search .route-compact .route-input-side {
                gap: 6px;
                padding-top: 1px;
            }
            .map-overlay-search .route-compact .route-icon-btn {
                width: 34px !important;
                min-width: 34px !important;
                height: 34px !important;
            }
            .map-overlay-search .route-compact .route-waypoints-container {
                display: flex;
                margin-top: 6px;
                max-height: 96px;
            }
            .map-overlay-search .route-compact .route-waypoint-row {
                border-radius: 12px;
                padding: 0 6px;
            }
            .map-overlay-search .route-compact .route-waypoint-row .form-input {
                height: 34px;
                font-size: 15px;
            }
            .map-overlay-search .route-compact .route-add-wp-btn {
                display: inline-flex;
                margin-top: 6px;
                min-height: 34px;
                font-size: 13px;
            }
            .map-overlay-search .route-compact .route-actions {
                margin-top: 6px !important;
                gap: 6px !important;
            }
            .map-overlay-search .route-compact .route-actions .btn {
                height: 38px;
                font-size: 13px;
                padding: 0 10px;
            }
            .map-overlay-search .route-compact .route-mode {
                display: flex !important;
                margin-top: 6px !important;
            }
            .map-overlay-search .route-compact .route-mode .btn-mode {
                height: 32px;
                font-size: 12px;
                padding: 4px 6px;
            }
            .route-summary-card {
                margin-top: 6px;
                padding: 8px 10px;
                border-radius: 12px;
            }
            .route-summary-main {
                font-size: 16px;
            }
            .route-summary-sub {
                margin-top: 3px;
                font-size: 11px;
            }
            .map-bottom-bar .mb-left {
                border-radius: 16px;
                padding: 7px 9px 8px;
            }
            .map-bottom-bar .mb-left .mb-title { font-size: 14px; }
            .map-bottom-bar .mb-left .mb-sub { font-size: 11px; }
            .map-bottom-bar .mb-left .mb-actions { gap: 5px; margin-top: 6px; }
            .map-bottom-bar .mb-left .mb-actions .btn {
                min-height: 32px;
                font-size: 11px;
                padding: 0 8px;
            }
            .map-bottom-bar .mb-left .gm-route-sheet { gap: 6px; }
            .map-bottom-bar .mb-left .gm-route-head { padding-right: 30px; }
            .map-bottom-bar .mb-left .gm-route-title { font-size: 15px; }
            .map-bottom-bar .mb-left .gm-route-tools { gap: 6px; }
            .map-bottom-bar .mb-left .gm-round-tool {
                width: 30px;
                min-width: 30px;
                height: 30px;
            }
            .map-bottom-bar .mb-left .gm-route-tabs { display: none; }
            .map-bottom-bar .mb-left .gm-route-options { margin-top: -1px; }
            .map-bottom-bar .mb-left .gm-route-option {
                min-height: 28px;
                font-size: 11px;
                padding: 0 9px;
            }
            .map-bottom-bar .mb-left .gm-route-main {
                border-radius: 12px;
                padding: 8px 10px;
            }
            .map-bottom-bar .mb-left .gm-route-eta {
                font-size: 28px;
            }
            .map-bottom-bar .mb-left .gm-route-eta .gm-route-distance {
                font-size: 16px;
            }
            .map-bottom-bar .mb-left .gm-route-sub { margin-top: 3px; font-size: 11px; }
            .map-bottom-bar .mb-left .gm-route-note { font-size: 12px; }
            .map-bottom-bar .mb-left .gm-route-actions {
                flex-direction: row;
                align-items: center;
                gap: 6px;
            }
            .map-bottom-bar .mb-left .gm-route-btn {
                min-height: 36px;
                font-size: 13px;
                padding: 0 12px;
            }
            .map-bottom-bar .mb-left .gm-route-btn-start { flex: 1 1 auto; }
            .map-bottom-bar .mb-left .gm-route-btn-alt {
                flex: 0 0 auto;
                width: 40px;
                min-width: 40px;
                padding: 0;
                border-radius: 12px;
            }
            .map-bottom-bar .mb-left .gm-route-btn-alt .gm-btn-label { display: none; }

            body.mobile-keyboard-open .map-overlay-search {
                top: 6px;
            }
            body.mobile-search-editing .map-overlay-search,
            body.mobile-keyboard-open .map-overlay-search {
                left: 6px;
                right: 6px;
                width: auto;
                max-width: none;
            }
            body.route-modal-open.mobile-search-editing .map-overlay-search,
            body.route-modal-open.mobile-keyboard-open .map-overlay-search {
                right: 60px;
            }
            body.mobile-search-editing .map-overlay-search .map-search-inner,
            body.mobile-keyboard-open .map-overlay-search .map-search-inner {
                width: 100%;
                max-width: none;
            }
            body.mobile-search-editing .map-overlay-search .search-row #mapSearchLocateBtn,
            body.mobile-keyboard-open .map-overlay-search .search-row #mapSearchLocateBtn {
                display: none !important;
            }
            body.mobile-search-editing .map-overlay-controls,
            body.mobile-keyboard-open .map-overlay-controls {
                opacity: 0;
                pointer-events: none;
            }
        }

        /* Turn-by-turn navigation: the layer/filter column overlaps the
           instruction banner and is useless mid-guidance — hide it (the
           recenter / overview nav buttons live elsewhere). All viewports. */
        body.navigation-mode .map-overlay-controls {
            opacity: 0;
            pointer-events: none;
        }
        @media (max-width: 768px) {
            body.mobile-search-editing .map-overlay-search .route-compact.route-compact--open,
            body.mobile-keyboard-open .map-overlay-search .route-compact.route-compact--open {
                max-height: calc(var(--mobile-vvh, 100dvh) - 84px);
                overflow-y: auto;
                overscroll-behavior: contain;
            }
            body.mobile-search-editing .map-overlay-search .route-compact .route-waypoints-container,
            body.mobile-keyboard-open .map-overlay-search .route-compact .route-waypoints-container {
                max-height: min(34vh, 220px);
            }
            body.mobile-search-editing .map-overlay-search .route-compact .route-actions .btn,
            body.mobile-keyboard-open .map-overlay-search .route-compact .route-actions .btn {
                height: 34px;
            }
        }
        @media (max-height: 760px) {
            .map-overlay-search .route-compact.route-compact--open {
                padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
                max-height: min(calc(var(--mobile-vvh, 100dvh) - 160px), 360px);
                overflow-y: auto;
                overscroll-behavior: contain;
            }
            .map-overlay-search .route-compact .route-core-row {
                min-height: 38px;
            }
            .map-overlay-search .route-compact .form-input {
                height: 34px;
                font-size: clamp(14px, 2.8vw, 16px);
            }
            .map-overlay-search .route-compact .route-add-wp-btn {
                margin-top: 5px;
                min-height: 32px;
            }
            .map-overlay-search .route-compact .route-actions {
                margin-top: 5px !important;
                gap: 6px !important;
            }
            .map-overlay-search .route-compact .route-actions .btn {
                height: 36px;
                font-size: 13px;
            }
            .map-overlay-search .route-compact .route-mode {
                margin-top: 5px !important;
                padding-bottom: 2px;
            }
            .map-overlay-search .route-compact .route-mode .btn-mode {
                height: 30px;
                font-size: 12px;
            }
        }
        @media (max-width: 380px) {
            .map-overlay-search .route-compact .route-input-grid {
                grid-template-columns: minmax(0, 1fr) 30px;
                gap: 5px;
            }
            .map-overlay-search .route-compact .route-icon-btn {
                width: 30px !important;
                min-width: 30px !important;
                height: 30px !important;
            }
            .map-overlay-search .route-compact .route-icon-btn svg {
                width: 16px;
                height: 16px;
            }
            .map-overlay-search .route-compact .route-mode > div {
                gap: 4px !important;
            }
            .map-overlay-search .route-compact .route-mode .btn-mode {
                font-size: 12px;
                padding: 3px 4px;
            }
        }


        /* â”€â”€â”€â”€â”€ NAV PANEL â”€â”€â”€â”€â”€ */
        .nav-panel {
            position: absolute;
            top: 16px;
            left: 50%;
            right: auto;
            width: min(94vw, 720px);
            transform: translateX(-50%);
            background: linear-gradient(180deg, #1669f2 0%, #0d54cb 100%);
            color: #ffffff;
            border-radius: 30px;
            box-shadow: 0 18px 42px rgba(9, 45, 112, 0.34);
            padding: 20px 24px 16px;
            z-index: 1400;
            display: none;
            animation: navPanelFadeIn 0.28s ease-out;
            user-select: none;
            backdrop-filter: blur(14px);
        }
        .nav-panel.dragged { animation: none; }

        .nav-top-main {
            display: flex;
            align-items: flex-start;
            gap: 18px;
        }

        .nav-turn-icon {
            flex: 0 0 auto;
            min-width: 96px;
            height: 96px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 74px;
            font-weight: 800;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            line-height: 1;
        }

        .nav-top-texts {
            min-width: 0;
            flex: 1 1 auto;
        }

        .nav-step-distance {
            margin-top: 2px;
            font-size: clamp(34px, 5vw, 56px);
            line-height: 1;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: -0.03em;
        }

        .nav-panel .nav-instruction {
            margin-top: 8px;
            font-size: 18px;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: 0.01em;
            color: #ffffff;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .nav-road-row {
            margin-top: 10px;
            min-height: 34px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .nav-road-badge {
            display: none;
            align-items: center;
            justify-content: center;
            min-width: 76px;
            min-height: 34px;
            padding: 5px 14px;
            border-radius: 12px;
            background: #d85f5f;
            color: #ffffff;
            font-size: 16px;
            line-height: 1;
            font-weight: 900;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
        }

        .nav-road-badge.visible {
            display: inline-flex;
        }

        .nav-road-badge[data-kind="motorway"] {
            background: #1656d8;
        }

        .nav-road-badge[data-kind="national"] {
            background: #cf5f60;
        }

        .nav-road-badge[data-kind="departmental"] {
            background: #c27c18;
        }

        .nav-road-badge[data-kind="europe"] {
            background: #14826e;
        }

        .nav-road-name {
            min-width: 0;
            font-size: 16px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.88);
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .nav-panel .nav-next {
            margin-top: 14px;
            padding: 9px 14px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.09);
            border: 1px solid rgba(255, 255, 255, 0.12);
            font-size: 14px;
            color: rgba(255, 255, 255, 0.95);
            min-height: 42px;
            display: flex;
            align-items: center;
        }

        .nav-bottom-panel {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 14px;
            width: min(96vw, 760px);
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 18px 20px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.96);
            color: #172033;
            box-shadow: 0 22px 54px rgba(23, 30, 47, 0.22);
            z-index: 1400;
            backdrop-filter: blur(18px);
        }

        .nav-bottom-left {
            min-width: 0;
        }

        .nav-bottom-center {
            flex: 1 1 auto;
            min-width: 0;
            text-align: center;
        }

        .nav-bottom-duration {
            font-size: clamp(36px, 5vw, 52px);
            line-height: 1;
            font-weight: 900;
            color: #172033;
            white-space: nowrap;
            letter-spacing: -0.04em;
        }

        .nav-bottom-meta {
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 16px;
            color: #4f5a73;
            white-space: nowrap;
        }

        .nav-bottom-sep {
            opacity: 0.72;
        }

        .nav-stop-btn {
            width: 78px !important;
            min-width: 78px;
            height: 78px;
            padding: 0;
            border-radius: 50%;
            border: 1px solid rgba(70, 78, 96, 0.2);
            background: #ffffff;
            color: #4d5568;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .nav-stop-btn:hover {
            background: #f3f5f8;
        }

        .nav-stop-btn svg,
        .nav-bottom-mode-btn svg {
            width: 38px;
            height: 38px;
        }

        .nav-bottom-mode-btn {
            width: 78px !important;
            min-width: 78px;
            height: 78px;
            padding: 0;
            border-radius: 50%;
            border: 1px solid rgba(70, 78, 96, 0.2);
            background: #ffffff;
            color: #4d5568;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .nav-bottom-mode-btn:hover {
            background: #f3f5f8;
        }

        .nav-bottom-mode-btn.is-overview {
            color: #0d54cb;
            border-color: rgba(13, 84, 203, 0.22);
            background: rgba(13, 84, 203, 0.08);
        }

        .nav-vehicle-marker {
            width: 62px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            filter: drop-shadow(0 8px 12px rgba(13, 19, 34, 0.34));
            transform-origin: center center;
        }

        .nav-vehicle-marker svg {
            width: 62px;
            height: 62px;
            overflow: visible;
        }

        @keyframes navPanelFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Nav waypoint search button */
        .nav-waypoint-btn {
            position: absolute;
            display: none;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
            cursor: pointer;
            z-index: 1401;
            top: 10px;
            right: 12px;
        }
        .nav-waypoint-btn:hover { background: rgba(255, 255, 255, 0.34); }
        .nav-waypoint-btn svg { width: 18px; height: 18px; }

        /* â”€â”€â”€â”€â”€ NAV RECENTER BTN â”€â”€â”€â”€â”€ */
        .nav-recenter-btn {
            position: absolute;
            bottom: 160px;
            right: 16px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bg-primary);
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            color: var(--accent);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 90;
        }
        .nav-recenter-btn:active { background: var(--bg-tertiary); }

        /* â”€â”€â”€â”€â”€ NAV MODE BTN (3D / Overview toggle) â”€â”€â”€â”€â”€ */
        .nav-mode-btn {
            position: absolute;
            bottom: 220px;
            right: 16px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bg-primary);
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            color: var(--accent);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 90;
        }
        .nav-mode-btn.visible { display: flex; }
        .nav-mode-btn:active { background: var(--bg-tertiary); }

        

        /* â”€â”€â”€â”€â”€ TRANSLATION MODULE â”€â”€â”€â”€â”€ */
        .translate-module {
            padding: 4px 0;
        }
        /* In modern design the module is rendered as a card (border+radius):
           it needs real inner padding so "Langue" doesn't sit on the frame. */
        [data-design="modern"] .translate-module {
            padding: 14px 14px 12px;
        }
        .translate-lang-bar {
            margin-bottom: 18px;
        }
        .translate-lang-select label {
            display: block;
            font-weight: 600;
            font-size: 11px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        .translate-lang-select select {
            font-size: 15px;
        }
        .translate-section {
            --sec: var(--accent);
            --sec-soft: rgba(11, 87, 176, 0.07);
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px 20px;
            margin-bottom: 16px;
            box-shadow: 0 4px 16px rgba(18, 44, 92, 0.06);
        }
        .translate-section--them {
            --sec: #34466B; /* navy sobre — ton forces de l'ordre */
            --sec-soft: rgba(52, 70, 107, 0.07);
        }
        .translate-section-label {
            font-weight: 800;
            font-size: 15px;
            color: var(--sec);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .translate-input-row {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 12px;
        }
        .translate-mic-btn {
            width: 56px;
            height: 56px;
            min-width: 56px;
            border-radius: 50%;
            border: 2px solid var(--sec);
            background: var(--sec-soft);
            color: var(--sec);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.18s;
        }
        .translate-mic-btn:hover { background: var(--sec); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 37, 63, 0.20); }
        .translate-mic-btn.recording {
            background: #e53935;
            border-color: #e53935;
            color: #fff;
            animation: pulse-mic 1s infinite;
        }
        @keyframes pulse-mic {
            0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.4); }
            50% { box-shadow: 0 0 0 12px rgba(229,57,53,0); }
        }
        .translate-input-row .form-input {
            flex: 1;
            font-size: 15px;
            padding: 13px 15px;
        }
        .translate-result {
            background: var(--sec-soft);
            border-radius: 12px;
            padding: 14px 16px;
            min-height: 56px;
            font-size: 16px;
            line-height: 1.55;
            color: var(--text-primary);
            border: 1px solid color-mix(in srgb, var(--sec) 18%, transparent);
            display: flex;
            align-items: center;
        }
        .translate-placeholder {
            color: var(--text-muted);
            font-style: normal;
            font-size: 14px;
        }
        .translate-speak-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 10px 16px;
            border: none;
            border-radius: 10px;
            background: var(--sec);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .translate-speak-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
        .translate-hint {
            font-size: 12.5px;
            color: var(--text-muted);
            line-height: 1.55;
            padding: 12px 14px;
            background: var(--bg-tertiary, var(--bg-secondary));
            border-radius: 10px;
            border: 1px solid var(--border);
        }

        /* â”€â”€â”€â”€â”€ SETTINGS PANEL â”€â”€â”€â”€â”€ */
        .settings-overlay {
            position: fixed;
            inset: 0;
            background: rgba(9, 18, 34, 0.55);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            z-index: 500;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .settings-overlay.visible { display: flex; animation: settingsFade 0.18s ease; }
        @keyframes settingsFade { from { opacity: 0; } to { opacity: 1; } }

        .settings-modal {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 22px 24px 20px;
            width: 100%;
            max-width: 440px;
            box-shadow: 0 20px 60px rgba(9, 18, 34, 0.28);
            max-height: calc(100vh - 80px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .settings-overlay.visible .settings-modal { animation: settingsPop 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
        @keyframes settingsPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

        .settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 4px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
            flex: 0 0 auto;
        }

        /* Grouped-list sections (iOS/Beneylu style) */
        .settings-section-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin: 18px 2px 8px;
        }
        .settings-group {
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--bg-tertiary);
            overflow: hidden;
        }

        .settings-content {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding-top: 8px;
            padding-right: 6px;
            margin-right: -6px;
            scrollbar-width: thin;
            scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
        }
        .settings-content::-webkit-scrollbar {
            width: 8px;
        }
        .settings-content::-webkit-scrollbar-track {
            background: transparent;
        }
        .settings-content::-webkit-scrollbar-thumb {
            background: rgba(100, 116, 139, 0.35);
            border-radius: 4px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        .settings-content::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 0.6);
            background-clip: padding-box;
            border: 2px solid transparent;
        }
        [data-theme="dark"] .settings-content {
            scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
        }
        [data-theme="dark"] .settings-content::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.35);
            background-clip: padding-box;
        }

        .settings-modal h2 {
            font-size: 18px;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .settings-close-btn {
            border: 0;
            background: transparent;
            color: var(--text-primary);
            font-size: 22px;
            line-height: 1;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            cursor: pointer;
        }

        .settings-close-btn:hover {
            background: var(--bg-secondary);
        }

        .settings-android-box {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 8px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--bg-tertiary);
        }

        .settings-android-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .settings-android-note {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.45;
        }

        .setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 13px 14px;
            border-bottom: 1px solid var(--border);
        }

        .setting-row:last-child { border-bottom: none; }
        .settings-group .setting-row { transition: background 0.15s ease; }
        .settings-group .setting-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

        .setting-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .setting-desc {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
            line-height: 1.4;
        }

        /* Selects inside settings rows share one compact, themed look */
        .settings-content .setting-row .form-input {
            flex: 0 0 auto;
            max-width: 190px;
            padding: 7px 10px;
            font-size: 13px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        /* Mobile: side-by-side label+select overflows the card — stack them.
           Toggle rows (mode sombre) stay horizontal, they fit fine. */
        @media (max-width: 480px) {
            .settings-group .setting-row:has(.form-input) {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }
            .settings-content .setting-row .form-input {
                width: 100%;
                max-width: none;
            }
        }

        /* Toggle switch */
        .toggle {
            position: relative;
            width: 48px;
            height: 26px;
        }

        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: var(--bg-tertiary);
            border-radius: 26px;
            transition: 0.3s;
        }

        .toggle-slider::before {
            content: '';
            position: absolute;
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }

        .toggle input:checked + .toggle-slider {
            background: var(--accent);
        }

        .toggle input:checked + .toggle-slider::before {
            transform: translateX(22px);
        }

        /* â”€â”€â”€â”€â”€ LLM indicator â”€â”€â”€â”€â”€ */
        .llm-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #fff;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 600;
        }

        .loading-dots::after {
            content: '';
            animation: dots 1.5s infinite;
        }

        /* â”€â”€â”€â”€â”€ CPP Results â”€â”€â”€â”€â”€ */
        .cpp-synthese {
            background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(124,58,237,0.03));
            border-left: 4px solid #7c3aed;
            border-radius: 8px;
            padding: 12px 14px;
            margin-bottom: 12px;
            font-size: 13px;
            line-height: 1.5;
        }
        .cpp-article {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 8px;
            transition: border-color 0.2s;
        }
        .cpp-article:hover { border-color: #7c3aed; }
        .cpp-article-num {
            font-weight: 700;
            color: #7c3aed;
            font-size: 14px;
            margin-bottom: 2px;
        }
        .cpp-article-titre {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 6px;
            font-style: italic;
        }
        .cpp-article-contenu {
            font-size: 13px;
            line-height: 1.5;
            color: var(--text-primary);
        }
        .cpp-article-link {
            display: inline-block;
            margin-top: 6px;
            font-size: 11px;
            color: #7c3aed;
            text-decoration: none;
        }
        .cpp-article-link:hover { text-decoration: underline; }
        .cpp-precautions {
            background: rgba(245, 158, 11, 0.08);
            border-left: 4px solid #f59e0b;
            border-radius: 8px;
            padding: 10px 14px;
            margin-top: 12px;
            font-size: 12px;
        }
        .cpp-precautions li {
            margin-bottom: 4px;
            line-height: 1.4;
        }
        .cpp-legifrance-link {
            display: block;
            text-align: center;
            margin-top: 12px;
            padding: 8px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            color: var(--accent);
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
        }
        .cpp-legifrance-link:hover { opacity: 0.8; }

        /* â”€â”€â”€â”€â”€ Help Modal â”€â”€â”€â”€â”€ */
        .help-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            justify-content: center;
            align-items: center;
        }
        .help-modal.visible { display: flex; }
        .help-modal-content {
            background: var(--bg-primary);
            border-radius: 16px;
            padding: 24px;
            max-width: 420px;
            width: 90vw;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        /* Entrees de la fenetre Aide : elle ne decrit plus les features (les
           tutos le font mieux), elle y conduit. Trois lignes tapables, meme
           forme, la premiere accentuee. */
        .help-entry {
            display: flex; align-items: center; gap: 12px;
            padding: 14px; margin-bottom: 10px; min-height: 44px;
            border: 1px solid var(--border); border-radius: 12px;
            text-decoration: none; color: inherit;
            transition: border-color .15s ease, background .15s ease;
        }
        .help-entry:hover { border-color: var(--accent); background: rgba(11, 94, 183, .06); }
        .help-entry--primary { background: rgba(11, 94, 183, .10); border-color: rgba(11, 94, 183, .24); }
        .help-entry-ic { font-size: 22px; min-width: 32px; text-align: center; }
        .help-entry-tx { min-width: 0; font-size: 13px; line-height: 1.4; }
        .help-entry-tx strong { display: block; margin-bottom: 2px; font-size: 14px; }
        .help-entry-tx span { color: var(--text-muted); }
        .help-entry-go { margin-left: auto; font-weight: 800; color: var(--accent); }

        /* â”€â”€â”€â”€â”€ Map Emergency Buttons â”€â”€â”€â”€â”€ */
        .map-emergency {
            position: absolute;
            bottom: 24px;
            left: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 5;
        }
        .map-emergency a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            color: #fff;
            font-weight: 900;
            font-size: 18px;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: transform 0.15s;
        }
        .map-emergency a:hover { transform: scale(1.1); }
        .map-emergency .em-17 { background: #2563eb; }
        .map-emergency .em-112 { background: #dc2626; font-size: 14px; }

        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
        }

        /* â”€â”€â”€â”€â”€ GPS STATUS â”€â”€â”€â”€â”€ */
        .gps-badge {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: var(--success);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            display: none;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .gps-badge.visible { display: flex; align-items: center; gap: 6px; }

        /* Section divider in merged panel */
        .section-divider {
            height: 1px;
            background: var(--border);
            margin: 20px 0 14px;
        }
        .form-label-sm {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 4px;
            display: block;
        }

        /* â”€â”€â”€â”€â”€ MAPLIBRE POPUP OVERRIDE â”€â”€â”€â”€â”€ */
        .maplibregl-popup-content {
            border-radius: 12px !important;
            padding: 0 !important;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
            background: var(--bg-primary) !important;
            color: var(--text-primary) !important;
        }
        .maplibregl-popup-tip {
            border-top-color: var(--bg-primary) !important;
        }

        .maplibregl-popup-close-button {
            font-size: 0 !important;
            width: 28px !important;
            height: 28px !important;
            top: 8px !important;
            right: 8px !important;
            border-radius: 50% !important;
            background: var(--bg-secondary) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: background 0.15s, transform 0.15s;
            z-index: 1400 !important; /* ensure popup close sits above overlay controls */
        }
        .maplibregl-popup-close-button::after {
            content: '\00D7';
            font-size: 18px;
            font-weight: 600;
            color: var(--text-secondary);
            line-height: 1;
        }
        .maplibregl-popup-close-button:hover {
            background: var(--bg-tertiary) !important;
            transform: scale(1.1);
        }

        .brigade-popup {
            padding: 14px;
            min-width: 220px;
        }

        .brigade-popup .bp-name {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 6px;
            color: var(--accent);
        }

        .brigade-popup .bp-info {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }

        .brigade-popup .bp-phone {
            font-size: 14px;
            font-weight: 600;
            color: var(--success);
        }

        .brigade-popup .bp-phone a {
            color: var(--success);
            text-decoration: none;
        }

        /* â”€â”€â”€â”€â”€ SPEED CALCULATOR â”€â”€â”€â”€â”€ */
        .speed-tooltip-trigger {
            position: relative;
            cursor: help;
            font-size: 14px;
            margin-left: 4px;
        }
        .speed-tooltip {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 12px;
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
            line-height: 1.5;
            color: var(--text-primary);
            width: 260px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            z-index: 300;
            white-space: normal;
        }
        .speed-tooltip-trigger:hover .speed-tooltip,
        .speed-tooltip-trigger:focus .speed-tooltip {
            display: block;
        }

        .speed-result-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 8px;
        }
        .speed-result-card .speed-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
        }
        .speed-result-card .speed-row + .speed-row {
            border-top: 1px solid var(--border);
        }
        .speed-row-label {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .speed-row-value {
            font-size: 15px;
            font-weight: 700;
        }
        .speed-row-value.excess {
            color: var(--danger);
        }
        .speed-infraction {
            margin-top: 10px;
            padding: 12px 14px;
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.5;
        }
        .speed-infraction.contravention {
            background: #fff3cd;
            border: 1px solid #ffc107;
            color: #856404;
        }
        [data-theme="dark"] .speed-infraction.contravention {
            background: #3d3000;
            border-color: #ffc107;
            color: #ffe066;
        }
        .speed-infraction.delit {
            background: #f8d7da;
            border: 1px solid var(--danger);
            color: #721c24;
        }
        [data-theme="dark"] .speed-infraction.delit {
            background: #3d0a0a;
            border-color: var(--danger);
            color: #f5c6cb;
        }

        /* ----- ALCOHOL CALCULATOR ----- */
        .alcohol-unit-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .alcohol-unit-option {
            flex: 1 1 180px;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 10px;
            font-size: 13px;
            background: var(--bg-secondary);
        }
        .alcohol-unit-option input[type="radio"] {
            accent-color: var(--accent);
        }
        .alcohol-summary {
            margin-top: 10px;
            padding: 12px 14px;
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.5;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        .alcohol-summary.ok {
            border-color: #86efac;
            background: #f0fdf4;
            color: #14532d;
        }
        .alcohol-summary.contravention {
            border-color: #facc15;
            background: #fefce8;
            color: #713f12;
        }
        .alcohol-summary.delit {
            border-color: #ef4444;
            background: #fef2f2;
            color: #7f1d1d;
        }
        [data-theme="dark"] .alcohol-summary.ok {
            background: #09220f;
            color: #bbf7d0;
            border-color: #22c55e;
        }
        [data-theme="dark"] .alcohol-summary.contravention {
            background: #2d2600;
            color: #fde68a;
            border-color: #eab308;
        }
        [data-theme="dark"] .alcohol-summary.delit {
            background: #2d0b0b;
            color: #fecaca;
            border-color: #ef4444;
        }
        .alcohol-notes {
            margin: 8px 0 0;
            padding-left: 18px;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.45;
        }
        .alcohol-other {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid #f5d48a;
            background: #fffbeb;
            color: #6b4e16;
            font-size: 12px;
            line-height: 1.45;
        }
        .alcohol-other ul {
            margin: 6px 0 0;
            padding-left: 18px;
        }
        .calc-natinf-ai {
            margin-top: 10px;
            padding: 12px 14px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        .calc-natinf-ai .calc-natinf-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        .calc-natinf-ai .calc-natinf-loading {
            font-size: 12px;
            color: var(--text-muted);
        }
        .calc-natinf-ai .calc-natinf-line {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.45;
            margin-top: 2px;
        }
        .calc-natinf-ai .calc-natinf-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .calc-natinf-ai .calc-natinf-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 700;
            background: var(--bg-primary);
            color: var(--text-secondary);
        }
        .calc-natinf-ai .calc-natinf-link {
            margin-top: 8px;
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            color: var(--accent);
            text-decoration: none;
        }
        .calc-natinf-ai .calc-natinf-link:hover {
            text-decoration: underline;
        }
        .calc-other-section {
            margin-top: 10px;
            border-top: 1px solid var(--border);
            padding-top: 8px;
        }
        .calc-other-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px 0;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .calc-other-toggle:hover { color: var(--accent); }
        .calc-other-chevron {
            font-size: 12px;
            transition: transform 0.2s;
        }
        .calc-other-toggle.open .calc-other-chevron {
            transform: rotate(90deg);
        }
        .calc-other-list {
            display: none;
            padding: 4px 0 0;
        }
        .calc-other-list.open {
            display: block;
        }
        .calc-other-item {
            padding: 6px 8px;
            margin-top: 4px;
            border-radius: 8px;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-primary);
        }
        [data-theme="dark"] .alcohol-other {
            background: #2f250b;
            border-color: #f5d48a;
            color: #fde68a;
        }

        /* â”€â”€â”€â”€â”€ RESPONSIVE â”€â”€â”€â”€â”€ */
        @media (max-width: 768px) {
            .main {
                position: relative;
                /* Use dvh to match actual visible viewport, not 100vh which includes browser chrome */
                height: calc(100vh - 52px);
                height: calc(100dvh - 52px);
                flex: none;
            }

            /* Map always full-screen on mobile */
            .map-container {
                position: absolute !important;
                inset: 0;
                z-index: 1;
            }

            /* Sidebar becomes slide-up overlay */
            .sidebar {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: auto;
                z-index: 100;
                width: 100% !important;
                max-width: 100%;
                max-height: 70vh;
                border-right: none;
                border-top: 1px solid var(--border);
                border-radius: 16px 16px 0 0;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
                transform: translateY(0);
                transition: transform 0.3s ease;
                margin-left: 0 !important;
            }

            .sidebar.collapsed {
                transform: translateY(100%);
                margin-left: 0 !important;
            }

            /* Hide desktop tabs on mobile â€” we use bottom nav instead */
            .sidebar-tabs {
                display: none;
            }

            /* Drag handle zone on top of the sheet */
            .sidebar-drag-handle {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 0 6px;
                cursor: grab;
                touch-action: none;
            }
            .sidebar-drag-handle::after {
                content: '';
                display: block;
                width: 40px;
                height: 5px;
                background: var(--text-muted);
                border-radius: 3px;
            }

            /* Hide the CSS pseudo-element handle on mobile (replaced by real element) */
            .sidebar::before {
                display: none;
            }

            .sidebar-content {
                max-height: calc(70vh - 40px);
                padding-bottom: 64px;
                overscroll-behavior: contain;
            }

            /* Full-screen sidebar for infra/notes (no map needed) */
            .sidebar.mobile-full {
                max-height: 100%;
                top: 0;
                bottom: 0;
                border-radius: 0;
                box-shadow: none;
                padding-top: 0 !important;
            }
            /* Hard guard: full feature page must fully replace map/search overlays */
            .sidebar.mobile-full + .map-container {
                display: none !important;
            }
            .sidebar.mobile-full + .map-container .map-overlay-search {
                display: none !important;
            }
            /* On mobile-full (non-dismissible) the drag handle must be hidden —
               JS already disables swipe-to-dismiss for `.mobile-full`. */
            .sidebar.mobile-full .sidebar-drag-handle {
                display: none !important; /* hide visual handle for full-screen panels */
                pointer-events: none;
                height: 0;
                padding: 0;
                margin: 0;
            }
            .sidebar.mobile-full .sidebar-tabs {
                display: none !important;
            }
            .sidebar.mobile-full .sidebar-content {
                max-height: none !important;
                height: 100% !important;
                padding: 0 !important;
                overflow: hidden;
            }
            .sidebar.mobile-full .sidebar-content > .sidebar-panel {
                display: none !important;
                padding: 10px 10px calc(90px + env(safe-area-inset-bottom, 0px)) !important;
                min-height: 100%;
                overflow-y: auto;
            }
            .sidebar.mobile-full .sidebar-content > .sidebar-panel.active {
                display: block !important;
            }
            .sidebar.mobile-full #panelFirstAid.active {
                display: flex !important;
                flex-direction: column;
                overflow-y: auto;
                padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 8px);
            }

            /* Bottom navigation bar (mobile only) */
            .mobile-nav {
                display: flex !important;
            }

            /* Dept panel — compact floating card on mobile */
            .header-dept-panel {
                top: auto;
                bottom: auto;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                width: calc(100vw - 32px);
                max-width: 340px;
                border-radius: 14px;
                /* Keep panel fully visible under mobile header/safe area. */
                top: calc(env(safe-area-inset-top, 0px) + 74px);
                max-height: calc(var(--mobile-vvh, 100dvh) - env(safe-area-inset-top, 0px) - 92px);
            }
            .header-dept-panel .dept-options-list {
                max-height: 28vh;
                min-height: 80px;
            }
            /* Drag handle visible on mobile */
            .header-dept-panel .dept-drag-handle {
                display: flex;
            }

            /* Show apply button only on mobile */
            .dept-apply-bar {
                display: flex !important;
                padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
            }

            body.mobile-keyboard-open .header-dept-panel.visible {
                top: calc(66px + env(safe-area-inset-top, 0px)) !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                max-height: calc(var(--mobile-vvh, 100dvh) - 74px);
            }
            body.mobile-keyboard-open .header-dept-panel .dept-panel-header {
                padding: 6px 12px 4px;
            }
            body.mobile-keyboard-open .header-dept-panel .dept-options-list {
                max-height: max(96px, calc(var(--mobile-vvh, 100dvh) - 230px));
            }
            body.mobile-keyboard-open .header-dept-panel .unit-search-results {
                max-height: max(96px, calc(var(--mobile-vvh, 100dvh) - 214px));
            }
            body.mobile-keyboard-open .header-dept-panel .dept-panel-tools,
            body.mobile-keyboard-open .header-dept-panel .dept-chips-bar,
            body.mobile-keyboard-open .header-dept-panel .dept-apply-bar {
                display: none !important;
            }
            body.mobile-keyboard-open .header-dept-panel #deptTabContentDepts.active .dept-options-list {
                display: block;
                min-height: 96px;
                max-height: max(120px, calc(var(--mobile-vvh, 100dvh) - 280px));
                overflow-y: auto;
            }
            body.mobile-keyboard-open .header-dept-panel .unit-local-suggestion {
                margin: 6px 12px 4px;
                padding: 7px 9px;
            }
            body.mobile-keyboard-open .header-dept-panel .dept-panel-tab-content.active {
                overflow-y: auto;
            }
            body.mobile-keyboard-open .header-dept-panel .dept-search-input {
                position: sticky;
                top: 0;
                z-index: 4;
                border-top: 1px solid var(--border);
                border-bottom: 1px solid var(--border);
            }

            /* Compass above bottom nav */
            .maplibregl-ctrl-bottom-right {
                bottom: 70px;
            }

            /* Map overlay controls above bottom nav */
            .map-overlay-controls {
                top: calc(env(safe-area-inset-top, 0px) + 74px);
                bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
                right: 8px;
                gap: 6px;
                overflow-y: auto;
                overflow-x: visible;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
                pointer-events: auto;
                padding-right: 2px;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .map-overlay-controls::-webkit-scrollbar {
                display: none;
            }
            .map-overlay-controls .map-ctrl-group {
                flex-shrink: 0;
            }
            .map-overlay-controls .map-ctrl-btn {
                width: 34px;
                height: 34px;
            }
            .map-overlay-controls .map-ctrl-btn svg {
                width: 16px;
                height: 16px;
            }

            /* Navigation mode: compact controls + scroll-fade hint so the
               filter buttons don't look cut off when the guidance panel and
               the bottom info card squeeze the available height. */
            body.navigation-mode .map-overlay-controls {
                gap: 4px;
                /* Top/bottom fade indicates more content is scrollable */
                -webkit-mask-image: linear-gradient(to bottom,
                    transparent 0,
                    #000 12px,
                    #000 calc(100% - 12px),
                    transparent 100%);
                mask-image: linear-gradient(to bottom,
                    transparent 0,
                    #000 12px,
                    #000 calc(100% - 12px),
                    transparent 100%);
            }
            body.navigation-mode .map-overlay-controls .map-ctrl-btn {
                width: 30px;
                height: 30px;
            }
            body.navigation-mode .map-overlay-controls .map-ctrl-btn svg {
                width: 14px;
                height: 14px;
            }
            body.navigation-mode .map-overlay-controls .map-ctrl-group {
                border-radius: 6px;
            }

            .map-legal-credits {
                right: 8px;
                bottom: calc(8px + env(safe-area-inset-bottom, 0px) + 64px);
                max-width: min(72vw, 360px);
                font-size: 8.5px;
            }

            /* Emergency SOS button position on mobile */
            /* Make SOS fixed on mobile and above overlay panels so it never gets hidden. */
            .map-emergency {
                position: fixed; /* avoid parent stacking-context clipping */
                left: 16px;
                bottom: 80px;
                z-index: 1500; /* above nav-panel / sidebar but below full-screen modals */
            }
            .sos-btn {
                width: 48px;
                height: 48px;
                font-size: 12px;
            }

            /* Nav panel above bottom nav on mobile */
            .nav-panel {
                top: calc(8px + env(safe-area-inset-top, 0px));
                left: 10px;
                right: 10px;
                width: auto;
                transform: none;
                border-radius: 26px;
                padding: 16px 16px 14px;
            }
            .nav-bottom-panel {
                left: 10px;
                right: 10px;
                width: auto;
                transform: none;
                bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 10px);
                padding: 14px 14px;
                border-radius: 26px;
            }
            .nav-turn-icon {
                min-width: 72px;
                height: 72px;
                font-size: 54px;
                border-radius: 22px;
            }
            .nav-top-main {
                gap: 12px;
            }
            .nav-step-distance {
                font-size: clamp(28px, 8vw, 42px);
            }
            .nav-panel .nav-instruction {
                font-size: 16px;
            }
            .nav-panel .nav-next {
                margin-top: 12px;
                font-size: 12px;
                min-height: 38px;
            }
            .nav-road-row {
                margin-top: 8px;
                gap: 8px;
            }
            .nav-road-badge {
                min-width: 66px;
                min-height: 30px;
                padding: 4px 12px;
                font-size: 14px;
                border-radius: 10px;
            }
            .nav-road-name {
                font-size: 14px;
            }
            .nav-bottom-duration {
                font-size: clamp(30px, 9vw, 42px);
            }
            .nav-bottom-meta {
                font-size: 14px;
            }
            .nav-stop-btn {
                min-width: 62px;
                width: 62px !important;
                height: 62px;
            }
            .nav-bottom-mode-btn {
                min-width: 62px;
                width: 62px !important;
                height: 62px;
            }
            .nav-stop-btn svg,
            .nav-bottom-mode-btn svg {
                width: 30px;
                height: 30px;
            }
            @keyframes navPanelFadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            /* Nav waypoint search button aligned with nav panel */
            .nav-waypoint-btn {
                top: auto;
            }
            .nav-recenter-btn {
                bottom: 186px;
            }
            .nav-mode-btn {
                bottom: 244px;
            }

            /* Header adjustments */
            .header-logo { font-size: 14px; }

            /* Hide hamburger on mobile â€” bottom nav replaces it */
            .header-left .icon-btn[title="Menu"] {
                display: none;
            }
        }

        /* Mobile bottom navigation bar */
        .mobile-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 200;
            background: var(--bg-primary);
            border-top: 1px solid var(--border);
            padding: 4px 0;
            padding-bottom: max(4px, env(safe-area-inset-bottom));
        }

        .mobile-nav-btn {
            /* min-width:0 est indispensable : sans lui, flex:1 ne descend pas
               sous la largeur du texte et le dernier onglet sort de l'ecran. */
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 7px 2px;
            border: none;
            background: none;
            color: var(--text-secondary);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: -0.01em;
            line-height: 1.15;
            cursor: pointer;
            transition: color 0.2s;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mobile-nav-btn .nav-icon { font-size: 19px; line-height: 1; }
        .mobile-nav-btn.active {
            color: var(--accent);
        }

        /* Dept apply bar â€” visible on desktop and mobile */
        .dept-apply-bar {
            display: flex;
            padding: 10px 12px;
            border-top: 1px solid var(--border);
            background: var(--bg-primary);
            flex-shrink: 0;
            position: sticky;
            bottom: 0;
            z-index: 2;
        }
        .dept-apply-bar button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 10px;
            background: var(--accent);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
        }
        .dept-apply-bar button:hover {
            opacity: 0.9;
        }

        /* â”€â”€â”€â”€â”€ DEBUG OVERLAY â”€â”€â”€â”€â”€ */
        .debug-overlay {
            position: absolute;
            bottom: 60px;
            right: 12px;
            background: rgba(0, 0, 0, 0.82);
            color: #e0e0e0;
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 11px;
            font-family: 'SF Mono', 'Fira Code', monospace;
            z-index: 90;
            display: none;
            min-width: 260px;
            max-width: 340px;
            line-height: 1.7;
            backdrop-filter: blur(8px);
        }
        .debug-overlay .dbg-title {
            font-weight: 700;
            font-size: 12px;
            margin-bottom: 6px;
            color: #4dabf7;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .debug-overlay .dbg-row { display: flex; justify-content: space-between; gap: 8px; }
        .debug-overlay .dbg-label { color: #8b949e; }
        .dbg-good { color: #3fb950; }
        .dbg-warn { color: #d29922; }
        .dbg-bad { color: #f85149; }

        /* â”€â”€â”€â”€â”€ SYNC UI (settings modal) â”€â”€â”€â”€â”€ */
        .sync-section {
            margin-top: 8px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: var(--bg-tertiary);
        }
        .sync-section .section-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .sync-status { font-size: 12px; margin-top: 6px; }
        .sync-success { color: #0f5132; }
        .sync-warn { color: #664d03; }
        .sync-error { color: #842029; }
        #lastSyncDate { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
        .data-stats-grid {
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .data-stat-card {
            border: 1px solid var(--border);
            border-radius: 11px;
            padding: 10px 12px;
            background: var(--bg-primary);
        }
        .data-stat-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
        }
        .data-stat-value {
            margin-top: 3px;
            font-size: 16px;
            font-weight: 800;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums;
        }
        /* Per-source freshness pill (date the layer was last refreshed from data.gouv) */
        .data-stat-fresh {
            margin-top: 5px;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .data-stat-fresh:empty { display: none; }
        .data-stat-fresh::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #22a06b;
            flex: 0 0 auto;
        }
        .data-stat-fresh.is-stale {
            color: #b45309;
        }
        .data-stat-fresh.is-stale::before {
            background: #f59e0b;
        }
        /* Live layer not loaded yet — neutral, not an alert */
        .data-stat-fresh.is-idle {
            color: var(--text-muted);
            font-weight: 500;
        }
        .data-stat-fresh.is-idle::before {
            background: var(--text-muted);
            opacity: 0.4;
        }
        @media (max-width: 420px) {
            .data-stats-grid { grid-template-columns: 1fr; }
        }
    

        /* ─────────────────────────────────────────────────────────────
           Onglet Missions : passe d'ergonomie du 26/07.
           Les regles vivent en fin de fichier a dessein — plusieurs blocs
           .mission-segment-row / .mission-tab-cta plus haut viennent de
           l'extraction du CSS inline, et la derniere regle de specificite
           egale gagne.
           ───────────────────────────────────────────────────────────── */

        /* Barre d'outils : neuf boutons a plat dans une grille 2 colonnes se
           lisaient comme un empilement de fonctionnalites. Deux rangs, tries
           par intention : ce qu'on FAIT du plan en haut, ce qu'on en GARDE en
           bas, et la fin de mission repoussee a droite, loin du reste. */
        .mission-planner-toolbar {
            display: flex; flex-direction: column; gap: 7px;
            margin-bottom: 8px;
        }
        .mission-planner-toolbar .mtb-rang {
            display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        }
        .mission-planner-toolbar .mtb-rang--second {
            padding-top: 7px;
            border-top: 1px solid var(--border);
        }
        .mission-planner-toolbar .mtb-titre {
            font-size: 10px; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.06em; color: var(--text-muted);
        }
        /* Le retour se lit comme un lien, pas comme une action de plus. */
        .mission-planner-toolbar .mtb-retour {
            border-color: transparent; background: transparent;
            color: var(--accent); padding-left: 2px; padding-right: 8px;
        }
        .mission-planner-toolbar .mtb-retour:hover {
            background: var(--accent-light); border-color: transparent;
        }
        .mission-planner-toolbar .mtb-fin { display: flex; gap: 6px; margin-left: auto; }
        /* Reprise apres echec : elle ne doit pas ressembler a une action de
           routine, sinon on recree le bouton « Recalculer » qu'on vient d'oter. */
        .mission-planner-toolbar .mtb-reprise {
            border-color: color-mix(in srgb, var(--warning) 45%, transparent);
            color: var(--warning);
        }
        @media (max-width: 560px) {
            .mission-planner-toolbar .mtb-fin { margin-left: 0; width: 100%; }
            .mission-planner-toolbar .mtb-rang > .mission-toolbar-btn--primary { flex: 1 1 100%; }
        }

        /* Actions du tableau : trois ronds en ligne mangeaient une centaine de
           pixels sur un tableau qui defile deja horizontalement. Plies en 2x2,
           monter/descendre empiles a gauche, la suppression a droite sur les
           deux rangs — meme cibles, colonne presque deux fois plus etroite. */
        .mission-jalons .mj-act {
            display: grid;
            grid-template-columns: repeat(2, auto);
            gap: 3px;
            justify-content: end; align-content: center;
            padding-left: 5px; padding-right: 5px;
        }
        .mission-jalons .mj-act .mission-mini-btn:nth-child(1) { grid-area: 1 / 1; }
        .mission-jalons .mj-act .mission-mini-btn:nth-child(2) { grid-area: 2 / 1; }
        .mission-jalons .mj-act .mission-mini-btn:nth-child(3) {
            grid-area: 1 / 2 / span 2 / span 1; align-self: center;
        }

        /* Segments : deux chiffres nus par ligne, « ca fait vide ». On ajoute
           ce que l'etat porte deja — lieux des extremites, cumul depuis le
           depart, et le changement d'unite competente, qui dit a qui passer la
           main en cours de trajet. */
        .mission-segment-row {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 12px;
        }
        .mission-segment-main { min-width: 0; }
        .mission-segment-title {
            display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
        }
        .mission-segment-lieux {
            font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
            overflow: hidden; text-overflow: ellipsis;
        }
        .mission-segment-cumul {
            margin-top: 3px; font-size: 11px; font-weight: 600;
            color: var(--text-muted);
        }
        .mission-segment-bascule {
            margin-top: 5px; padding: 3px 8px; border-radius: 999px;
            display: inline-block; font-size: 10.5px; font-weight: 700;
            background: var(--warning-soft); color: var(--warning);
        }
        .mission-segment-values { align-items: flex-start; white-space: nowrap; }

        /* Etat vide : les deux CTA etaient cote a cote avec un simple
           margin-left, ils se touchaient des que la colonne retrecissait. */
        .mission-tab-empty .mission-tab-cta {
            display: block; width: 100%; max-width: 300px;
            min-height: 44px; margin: 0 auto;
        }
        .mission-tab-empty .mission-tab-cta--secondaire { margin-top: 10px; margin-left: auto; }
        @media (min-width: 560px) {
            .mission-tab-empty .mission-tab-cta { display: inline-block; width: auto; margin: 0; }
            .mission-tab-empty .mission-tab-cta--secondaire { margin-top: 0; margin-left: 10px; }
        }

        /* Plan de l'itineraire : l'apercu est une image, donc ni zoom ni
           deplacement, alors qu'a douze jalons les codes ne se lisent plus. */
        .mission-plan-loupe {
            display: block; width: 100%; padding: 0; border: none;
            background: none; cursor: zoom-in; position: relative;
        }
        .mission-plan-zoom-hint {
            position: absolute; right: 10px; bottom: 10px;
            padding: 4px 10px; border-radius: 999px;
            font-size: 11px; font-weight: 700; color: #fff;
            background: rgba(15, 23, 42, 0.72);
            pointer-events: none;
        }
        /* Fond OPAQUE : a 0.92 la page transparaissait encore sous le plan, on
           croyait l'ecran mal recouvert. */
        .mission-plan-zoom {
            position: fixed; inset: 0; z-index: 10060;
            background: #0b1220;
            display: flex; flex-direction: column;
        }
        .mission-plan-zoom .mpz-barre {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; color: #fff;
        }
        .mission-plan-zoom .mpz-niveau {
            font-size: 12.5px; font-weight: 700; min-width: 56px; text-align: center;
        }
        .mission-plan-zoom .mpz-btn {
            width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.28);
            background: rgba(255, 255, 255, 0.1); color: #fff;
            font-size: 20px; font-weight: 700; line-height: 1;
        }
        .mission-plan-zoom .mpz-btn:hover { background: rgba(255, 255, 255, 0.2); }
        .mission-plan-zoom .mpz-btn--fermer { margin-left: auto; }
        /* Le defilement natif du conteneur fait le deplacement : au doigt comme
           a la souris, sans code de glisser maison. */
        /* Pas de flex + justify-content: center ici — une fois l'image plus large
           que la scene, le centrage flex rend son bord gauche inatteignable au
           defilement. Bloc + text-align, qui deborde proprement a droite. */
        .mission-plan-zoom .mpz-scene {
            flex: 1; overflow: auto; padding: 0 14px 14px;
            text-align: center;
        }
        .mission-plan-zoom .mpz-img {
            display: inline-block; max-width: none; height: auto;
            border-radius: 10px; cursor: zoom-in;
        }

        /* Champ de saisie des modales maison (remplace prompt()). */
        .mission-modale-champ { display: block; }
        .mission-modale-champ > span {
            display: block; margin-bottom: 5px;
            font-size: 11px; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.04em; color: var(--text-muted);
        }
        .mission-modale-champ > input {
            width: 100%; min-height: 44px; padding: 9px 12px;
            border-radius: var(--radius-sm); border: 1px solid var(--border);
            background: var(--bg-primary); color: var(--text-primary);
            font: inherit; font-size: 14px;
        }
        .mission-modale-champ > input:focus {
            outline: none; border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
        }
        .mission-modale-contexte {
            margin-top: 9px !important; font-size: 12px; color: var(--text-muted);
        }
        /* Choix des donnees nominatives, pose au moment de l'enregistrement. */
        .mission-modale-case {
            display: flex; align-items: flex-start; gap: 10px;
            margin-top: 10px; padding: 10px 12px;
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--panel-inset);
            font-size: 12.5px; line-height: 1.45; cursor: pointer;
        }
        .mission-modale-case input {
            width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer;
        }
        .mission-modale-btn:disabled { opacity: 0.45; cursor: not-allowed; }

        /* ─────────────────────────────────────────────────────────────
           Tableau des jalons sur mobile : une carte par poste.
           Huit colonnes dans un tableau qui defile horizontalement, c'est
           utilisable a la souris et pas au doigt — on ne voyait jamais le
           libelle de la colonne en meme temps que la valeur, et la moitie des
           champs restait hors ecran. Sous 768 px, chaque ligne devient une
           fiche : le libelle vient de data-libelle, en regard de son champ.
           ───────────────────────────────────────────────────────────── */
        @media (max-width: 768px) {
            .mission-jalons-wrap { overflow: visible; }
            /* Les min-width qui fabriquaient le defilement horizontal doivent
               tomber, sinon les fiches restent larges de 900 px. */
            .mission-jalons { border: none; min-width: 0; }
            .mission-jalons .mj-lieu,
            .mission-jalons .mj-perso { min-width: 0; }
            .mission-jalons td:nth-child(2) select { min-width: 0; }
            .mission-jalons thead { display: none; }
            .mission-jalons,
            .mission-jalons tbody,
            .mission-jalons tr,
            .mission-jalons td { display: block; width: 100%; }
            .mission-jalons tr {
                margin-bottom: 10px; padding: 8px 11px 10px;
                border: 1px solid var(--border);
                border-radius: var(--radius-md, 12px);
                background: var(--bg-primary);
            }
            .mission-jalons td {
                border: none; padding: 5px 0;
                display: grid; grid-template-columns: 84px minmax(0, 1fr);
                align-items: center; gap: 10px;
            }
            .mission-jalons td::before {
                content: attr(data-libelle);
                font-size: 10px; font-weight: 800; text-transform: uppercase;
                letter-spacing: 0.04em; color: var(--text-muted);
            }
            .mission-jalons td > input,
            .mission-jalons td > select { width: 100%; min-height: 40px; }
            .mission-jalons .mj-eff { max-width: 90px; }
            /* En-tete de fiche : la pastille et le role, sans libelle. */
            .mission-jalons td.mj-poste {
                display: flex; align-items: center; gap: 9px;
                padding-bottom: 8px; margin-bottom: 4px;
                border-bottom: 1px solid var(--border);
            }
            .mission-jalons td.mj-poste::before { content: none; }
            .mission-jalons .mj-lieu .mj-sub { grid-column: 2; }
            .mission-jalons .mj-perso { align-items: start; }
            .mission-jalons .mj-perso-row { grid-column: 2; }
            /* Colonne d'actions : plus rien a economiser en largeur ici, on
               reprend des cibles pleines, alignees a droite du pied de fiche. */
            .mission-jalons .mj-act,
            .mission-jalons thead th:last-child {
                position: static; box-shadow: none;
            }
            /* Le fond opaque servait a la colonne collante ; sur une fiche il
               dessine un rectangle blanc au milieu de la ligne surlignee. Meme
               specificite que la regle bureau, mais plus bas dans le fichier. */
            .mission-jalons tbody .mj-act,
            .mission-jalons tbody tr:hover .mj-act,
            .mission-jalons tbody tr:focus-within .mj-act {
                display: flex; justify-content: flex-end; gap: 8px;
                padding: 8px 0 0; margin-top: 4px;
                border-top: 1px solid var(--border);
                background: none;
            }
            .mission-jalons .mj-act::before { content: none; }
            .mission-jalons .mj-act .mission-mini-btn {
                width: 44px; height: 44px; font-size: 16px;
            }
            .mission-groupe-bloc .mission-jalons-wrap { overflow: visible; }
        }
