/* 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;
                /* Sans ceci, le navigateur mobile prend le glissement pour un
                   defilement de page et le panneau reste colle. */
                touch-action: none;
            }
            .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;
                touch-action: none;   /* poignee de deplacement : voir .mission-planner-panel-drag */
            }
            .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;
                touch-action: none;   /* poignee de deplacement : voir .mission-planner-panel-drag */
            }
            .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-actions {
                display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
                flex: 0 0 auto;
            }
            .mp-collapse-btn { font-size: 14px; }
            .mp-collapse-btn:hover {
                border-color: rgba(37, 99, 235, 0.3); color: #1d4ed8;
                background: rgba(239, 246, 255, 0.96);
            }
            /* Barre reduite a une seule ligne : le compteur et l'etat suffisent a
               savoir ou on en est, la carte reprend la place. */
            #missionPlannerPanel.mp-collapsed .mission-capture-last,
            #missionPlannerPanel.mp-collapsed .mission-capture-actions,
            #missionPlannerPanel.mp-collapsed .mission-capture-tip { display: none; }
            #missionPlannerPanel.mp-collapsed .mission-capture-bar { padding-bottom: 5px; }
            #missionPlannerPanel.mp-collapsed .mission-capture-head { padding-bottom: 0; }
            .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 */
                }
                /* Barre de capture au telephone : elle est posee SUR la carte,
                   chaque pixel qu'elle prend est du terrain masque. On resserre
                   les marges et on elargit la poignee, qui doit se prendre au
                   doigt (32 x 4 px etait hors de portee). */
                #missionPlannerPanel:has(.mission-capture-bar) {
                    max-width: min(300px, calc(100vw - 20px));
                }
                .mission-capture-bar { padding: 0 10px 10px; }
                .mission-capture-head { gap: 8px; padding: 2px 0 7px; }
                .mission-capture-last { margin-bottom: 8px; }
                .mission-capture-tip { margin-top: 6px; font-size: 11px; }
                /* Les trois actions tiennent sur UNE ligne a 390 px : sur deux,
                   elles coutaient 44 px de carte. Elles se replient d'elles-memes
                   sur les ecrans plus etroits. */
                .mission-capture-actions { gap: 5px; }
                .mission-capture-actions .mission-toolbar-btn {
                    min-height: 36px; padding: 7px 9px; font-size: 10.5px;
                }
                .mission-planner-panel-drag { padding: 9px 0 4px; }
                .mission-planner-panel-drag .mp-drag-pill { width: 44px; height: 5px; }
                .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;
            /* La colonne est positionnée dans .map-container, qui commence déjà
               sous le header. L'ancien réglage ne posait que `bottom` avec
               `max-height: calc(100vh - 110px)` : une hauteur calculée sur la
               fenêtre entière pour une boîte ancrée dans le conteneur. Sous
               ~660 px de haut, la pile des 14 boutons (536 px) remontait de
               quelques pixels DANS le header, et son premier bouton, rogné par
               le max-height, devenait inatteignable faute de défilement.
               `top` + `bottom` bornent la colonne à son conteneur, et le
               débordement défile. */
            top: 8px;
            bottom: 60px;
            right: 4px;
            /* Marge intérieure : les compteurs (.map-dept-badge, top/right -4px)
               dépassent des boutons et seraient rognés par le défilement. `right`
               est réduit d'autant pour que les boutons ne bougent pas. */
            padding: 6px 6px 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 1500;
            pointer-events: none;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .map-overlay-controls::-webkit-scrollbar { display: none; }
        /* Pile collée en bas tant qu'elle tient. `margin-top: auto` et non
           `justify-content: flex-end` : avec flex-end, le contenu qui déborde
           sort par le haut sans pouvoir être ramené au défilement. */
        .map-overlay-controls > :first-child { margin-top: auto; }
        /* Sur MOBILE, la pile est centrée verticalement plutôt que collée en
           bas : entassée contre la barre d'onglets, elle tombait sous le pouce
           et laissait un grand vide au-dessus. Marge auto en haut ET en bas :
           centrée quand elle tient, et les deux marges retombent à 0 dès que
           ça déborde — le défilement reste sain aux deux extrémités. */
        @media (max-width: 768px) {
            .map-overlay-controls > :last-child { margin-bottom: auto; }
        }
        /* Écran de laptop (hauteur limitée) : la pile des 14 boutons (~590 px)
           ne tient plus sur une colonne et son défilement, sans barre visible,
           cache les derniers filtres. On la laisse se REPLIER en colonnes :
           les groupes qui ne tiennent plus passent dans une colonne voisine,
           tout reste visible. `column wrap` en ancrage droit : la première
           ligne (navigation) part à gauche, le grand groupe de filtres reste
           au bord droit, là où l'utilisateur le connaît. Réservé aux écrans
           larges (>768 px) : sur téléphone, une deuxième colonne mangerait la
           carte. En dessous de 520 px de haut, même deux colonnes ne
           suffiraient pas : on conserve le défilement. */
        @media (min-width: 769px) and (min-height: 520px) and (max-height: 740px) {
            .map-overlay-controls {
                flex-flow: column wrap;
                align-content: flex-end;
                justify-content: flex-end;
                overflow: visible;
            }
            .map-overlay-controls > :first-child { margin-top: 0; }
        }
        .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;
            /* Deux actions depuis le retrait du renvoi Waze : « Itinéraire » et
               « Partager ». Trois colonnes laisseraient une case vide. */
            grid-template-columns: repeat(2, 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(2, 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#mapBtnTransit { color: #0b57b0; }
        .map-ctrl-btn#mapBtnTransit:hover { background: rgba(11, 87, 176, 0.12); }
        .map-ctrl-btn#mapBtnTransit.active {
            color: #0b57b0;
            background: rgba(11, 87, 176, 0.18);
        }
        .map-ctrl-btn#mapBtnTransit.active:hover { background: rgba(11, 87, 176, 0.24); }
        .map-ctrl-btn#mapBtnVoice { color: var(--ctrl-voice); }

        /* ── Popup des horaires d'arrêt ──────────────────────────────────────
           Couleurs en dur et non par variables : `--success` et `--danger` ont
           déjà été utilisées ici sans être définies, ce qui rendait des blocs
           invisibles. */
        .transit-popup .transit-chargement { padding: 10px 2px; font-size: 12px; color: #6b7280; }
        .transit-popup .transit-resume {
            font-size: 12px;
            font-weight: 700;
            color: #0b57b0;
            padding: 6px 0 4px;
            line-height: 1.45;
        }
        .transit-popup .transit-mortes {
            font-size: 11px;
            color: #b45309;
            background: rgba(217, 119, 6, 0.1);
            border-radius: 6px;
            padding: 4px 7px;
            margin-bottom: 6px;
        }
        .transit-popup .transit-passages { max-height: 220px; overflow-y: auto; }
        .transit-popup .transit-passage {
            display: grid;
            grid-template-columns: 46px auto 1fr auto;
            gap: 6px;
            align-items: baseline;
            font-size: 12px;
            padding: 3px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }
        .transit-popup .transit-heure { font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
        .transit-popup .transit-ligne {
            font-weight: 700;
            color: #0b57b0;
            background: rgba(11, 87, 176, 0.12);
            border-radius: 4px;
            padding: 1px 5px;
        }
        .transit-popup .transit-destination { color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .transit-popup .transit-nature { font-size: 10px; color: #9ca3af; text-transform: uppercase; }
        /* Une course d'après minuit appartient au jour de service de la veille :
           l'heure affichée est juste, le repère évite le contresens de date. */
        .transit-popup .transit-nuit {
            font-size: 10px;
            font-weight: 700;
            color: #4338ca;
            background: rgba(67, 56, 202, 0.12);
            border-radius: 4px;
            padding: 1px 4px;
        }
        .transit-popup .transit-vide {
            font-size: 12px;
            color: #b45309;
            background: rgba(217, 119, 6, 0.1);
            border-radius: 6px;
            padding: 8px;
            line-height: 1.5;
        }
        .transit-popup .transit-note { font-size: 11px; color: #6b7280; }
        .transit-popup .transit-alerte {
            font-size: 11px;
            color: #b91c1c;
            background: rgba(185, 28, 28, 0.09);
            border-radius: 6px;
            padding: 5px 7px;
            margin-bottom: 6px;
            line-height: 1.4;
        }
        .transit-popup .transit-profil {
            display: flex;
            align-items: flex-end;
            gap: 1px;
            height: 32px;
            margin: 4px 0 2px;
        }
        .transit-popup .transit-barre {
            flex: 1 1 0;
            min-width: 3px;
            background: #0b57b0;
            border-radius: 1px 1px 0 0;
        }
        /* Les tranches sans desserte gardent une trace visible : sur 24 h, les
           fenêtres mortes sont l'information la plus actionnable. */
        .transit-popup .transit-barre.est-vide {
            height: 2px !important;
            background: rgba(185, 28, 28, 0.45);
        }
        .transit-popup .transit-profil-axe {
            display: flex;
            justify-content: space-between;
            font-size: 9px;
            color: #9ca3af;
            margin-bottom: 6px;
        }
        .transit-popup .transit-btn-24h {
            margin-top: 8px;
            width: 100%;
            min-height: 44px;
            border: 1px solid #0b57b0;
            border-radius: 8px;
            background: rgba(11, 87, 176, 0.08);
            color: #0b57b0;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .transit-popup .transit-btn-24h:hover { background: rgba(11, 87, 176, 0.16); }

        /* Bandeau « aucun réseau importé ici ». Une carte vide se lit comme
           « il n'y a pas de bus » ; ce bandeau dit la vraie raison et nomme les
           réseaux réellement en base. Placé en bas à gauche pour ne masquer ni
           la barre de recherche ni la colonne de contrôles. */
        .transit-bandeau-vide {
            position: absolute;
            left: 12px;
            bottom: 84px;
            z-index: 5;
            max-width: min(420px, calc(100% - 96px));
            padding: 10px 34px 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(180, 83, 9, 0.35);
            background: rgba(255, 251, 235, 0.97);
            color: #7c2d12;
            font-size: 12px;
            line-height: 1.5;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
        }
        .transit-bandeau-vide code {
            background: rgba(120, 53, 15, 0.1);
            border-radius: 4px;
            padding: 0 4px;
            font-size: 11px;
        }
        .transit-bandeau-fermer {
            position: absolute;
            top: 4px;
            right: 6px;
            width: 24px;
            height: 24px;
            border: 0;
            background: transparent;
            color: #7c2d12;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
        }
        @media (max-width: 640px) {
            .transit-bandeau-vide { bottom: 96px; max-width: calc(100% - 76px); }
        }

        .transit-popup .transit-btn-surveiller {
            margin-top: 6px;
            width: 100%;
            min-height: 44px;
            border: 1px solid #1d4ed8;
            border-radius: 8px;
            background: #1d4ed8;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .transit-popup .transit-btn-surveiller:hover:not(:disabled) { background: #1e40af; }
        /* La bulle se ferme après l'ajout : le retour visible est la pastille
           numérotée sur la carte et le compteur du bouton, pas un état de bouton
           dans une bulle qu'il faudrait ensuite refermer à la main. */
        .transit-popup .transit-btn-surveiller:disabled { opacity: 0.75; }
        /* La bulle ne doit jamais dépasser l'espace libre : hauteur plafonnée
           par transit.js d'après la zone sûre, et défilement interne. */
        .transit-popup .transit-passages { max-height: 180px; }

        /* ── Surveillance de réseau : panneau de préparation ─────────────────
           Objet distinct du jalonnage, avec son propre panneau et son propre
           document. Couleurs en dur, jamais de variables non définies. */
        /* Rendu dans l'onglet Missions et NON en surimpression sur la carte :
           celle-ci porte déjà la recherche, les bulles, la barre du bas et la
           colonne de contrôles, un panneau de plus s'y superposait. */
        .surv-bloc {
            background: #fff;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            margin-bottom: 12px;
            font-size: 12px;
            color: #111827;
            overflow: hidden;
        }
        .surv-entete {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 12px;
            background: #0b57b0;
            color: #fff;
            font-size: 13px;
        }
        .surv-compteur { font-size: 11px; opacity: 0.92; white-space: nowrap; }
        /* En-tête cliquable : le bloc est replié par défaut pour ne pas squatter
           l'onglet, qui appartient d'abord au jalonnage. */
        .surv-entete--bouton {
            width: 100%;
            border: 0;
            cursor: pointer;
            text-align: left;
            font: inherit;
            min-height: 48px;
        }
        .surv-chevron { font-size: 13px; opacity: 0.9; }

        /* Point de départ dans l'onglet Missions : sans lui, rien ne disait qu'une
           surveillance de réseau pouvait se préparer ici. */
        .surv-bloc--amorce { border-style: dashed; }
        .surv-amorce { padding: 14px 16px; text-align: center; }
        .surv-amorce-titre { font-weight: 800; font-size: 14px; color: #0b57b0; margin-bottom: 4px; }
        .surv-amorce p { color: #4b5563; line-height: 1.55; margin: 0 0 10px; }

        /* Bulle d'un poste de surveillance : ouvrir la préparation, ou retirer le
           poste sans passer par l'onglet. */
        .surv-popup-poste .surv-btn { width: 100%; margin-top: 6px; }
        .surv-popup-poste .cp-address-main { display: flex; align-items: center; gap: 6px; }
        .surv-popup-poste .surv-poste { flex: 0 0 auto; }
        .surv-retirer {
            border: 0;
            background: transparent;
            color: #b91c1c;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            min-width: 32px;
            min-height: 32px;
        }
        .surv-champs { display: flex; gap: 8px; padding: 10px 12px 6px; }
        .surv-titre { flex: 1 1 auto; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; font-size: 12px; }
        .surv-date { display: flex; flex-direction: column; font-size: 10px; color: #6b7280; }
        .surv-date input { min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 6px; font-size: 12px; }
        .surv-vide { padding: 14px 12px; color: #6b7280; line-height: 1.6; }
        .surv-liste { padding: 0 12px; }
        .surv-arret { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; margin-bottom: 8px; }
        .surv-arret-tete { display: flex; align-items: center; gap: 7px; }
        .surv-poste { background: #0b57b0; color: #fff; border-radius: 4px; padding: 1px 6px; font-weight: 700; font-size: 11px; }
        .surv-nom { flex: 1 1 auto; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .surv-arret-meta { color: #374151; margin-top: 3px; }
        /* Le nom de l'arrêt renvoie à ses horaires sur la carte : c'est la même
           fiche, servie par le même code que le clic sur l'arrêt. */
        .surv-nom--bouton {
            border: 0;
            background: transparent;
            padding: 0;
            font: inherit;
            font-weight: 700;
            color: #0b57b0;
            text-align: left;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 3px;
            cursor: pointer;
            min-height: 32px;
        }
        .surv-nom--bouton:hover { color: #084a94; }
        .surv-arret-unite { color: #1d4ed8; font-size: 11px; margin-top: 3px; }
        .surv-attente { color: #6b7280; font-style: italic; }
        .surv-alerte-inline { color: #b45309; font-weight: 600; }
        .surv-mortes { background: rgba(217, 119, 6, 0.1); color: #b45309; border-radius: 5px; padding: 3px 6px; margin-top: 4px; font-size: 11px; }
        .surv-profil { display: flex; align-items: flex-end; gap: 1px; height: 28px; margin: 5px 0 2px; }
        /* Barres cliquables : le créneau de tenue du poste se choisit là où l'on
           voit à quelle heure il y a du monde. */
        .surv-barre {
            flex: 1 1 0;
            min-width: 2px;
            background: #0b57b0;
            border-radius: 1px 1px 0 0;
            border: 0;
            padding: 0;
            cursor: pointer;
        }
        .surv-profil { align-items: flex-end; }
        .surv-barre:hover { outline: 2px solid #0b57b0; outline-offset: 1px; }
        .surv-barre.hors-creneau { opacity: 0.3; }
        .surv-barre.est-dans-creneau { background: #d97706; }
        .surv-barre.est-dans-creneau.est-vide { background: #dc2626; }

        .surv-creneau {
            margin: 4px 0 2px;
            padding: 5px 7px;
            border-radius: 6px;
            background: rgba(217, 119, 6, 0.1);
            color: #92400e;
            font-size: 11px;
            line-height: 1.5;
        }
        .surv-creneau--vide { background: #f1f5f9; color: #6b7280; }
        .surv-creneau-alerte { color: #b91c1c; font-weight: 700; }
        .surv-creneau-effacer {
            border: 0;
            background: transparent;
            color: #6b7280;
            font-size: 11px;
            text-decoration: underline;
            cursor: pointer;
            padding: 0 2px;
            min-height: 28px;
        }
        /* Les tranches vides gardent une trace : sur 24 h, savoir QUAND rien
           n'arrive est ce qui permet de répartir l'effectif. */
        .surv-barre.est-vide { height: 2px !important; background: rgba(185, 28, 28, 0.45); }
        .surv-arret-saisie { display: flex; gap: 6px; margin-top: 6px; align-items: flex-end; }
        .surv-arret-saisie label { display: flex; flex-direction: column; font-size: 10px; color: #6b7280; }
        .surv-arret-saisie input[type="number"] { width: 68px; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 6px; }
        .surv-note { flex: 1 1 auto; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 8px; font-size: 11px; }
        .surv-totaux { display: flex; justify-content: space-between; padding: 8px 12px; background: #eff6ff; border-top: 1px solid #bfdbfe; font-weight: 700; }
        .surv-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid #e2e8f0; }
        .surv-btn {
            flex: 1 1 auto;
            min-height: 44px;
            border: 1px solid #0b57b0;
            border-radius: 8px;
            background: rgba(11, 87, 176, 0.08);
            color: #0b57b0;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .surv-btn:hover:not(:disabled) { background: rgba(11, 87, 176, 0.16); }
        .surv-btn:disabled { opacity: 0.45; cursor: not-allowed; }
        .surv-btn-primaire { background: #0b57b0; color: #fff; }
        .surv-btn-primaire:hover:not(:disabled) { background: #084a94; }
        .surv-btn-discret { flex: 0 0 auto; border-color: #cbd5e1; background: transparent; color: #6b7280; }
        .surv-btn-danger { border-color: #dc2626 !important; color: #dc2626 !important; background: rgba(220, 38, 38, 0.08) !important; }
        .surv-btn-mini { flex: 0 0 auto; min-height: 36px; padding: 0 10px; font-size: 11px; }

        /* Préparations enregistrées : le travail survit à la fermeture de l'app
           et se reprend depuis l'onglet Missions. */
        .surv-archives { padding: 8px 12px 12px; }
        .surv-archive {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        .surv-archive:last-child { border-bottom: 0; }
        .surv-archive-info { flex: 1 1 auto; min-width: 0; }
        .surv-archive-nom { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .surv-archive-meta { font-size: 11px; color: #6b7280; }

        /* ── Éditeur de croquis sur carte figée ─────────────────────────────── */
        .surv-croquis-modale {
            position: fixed;
            inset: 0;
            z-index: 4000;
            background: rgba(15, 23, 42, 0.72);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .surv-croquis-cadre {
            background: #fff;
            border-radius: 12px;
            max-width: 100%;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .surv-croquis-barre {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            padding: 9px 12px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }
        .surv-croquis-titre { font-weight: 700; font-size: 13px; margin-right: 6px; }
        .surv-croquis-espace { flex: 1 1 auto; }
        .surv-outil, .surv-croquis-btn {
            min-height: 40px;
            padding: 0 12px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #fff;
            color: #374151;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        .surv-outil.active { border-color: #dc2626; background: rgba(220, 38, 38, 0.1); color: #b91c1c; }
        .surv-croquis-btn-primaire { border-color: #0b57b0; background: #0b57b0; color: #fff; }
        .surv-croquis-texte { min-height: 40px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 8px; font-size: 12px; min-width: 220px; }
        .surv-croquis-zone { overflow: auto; padding: 10px; background: #e2e8f0; }
        .surv-croquis-zone canvas { display: block; max-width: 100%; height: auto; touch-action: none; cursor: crosshair; background: #fff; }
        .surv-croquis-aide { padding: 7px 12px; font-size: 11px; color: #6b7280; border-top: 1px solid #e2e8f0; }

        @media (max-width: 640px) {
            /* Dans l'onglet, la place est comptée : les actions passent en colonne
               plutôt que de se tasser sur une ligne illisible. */
            .surv-actions { flex-direction: column; }
            .surv-btn, .surv-btn-discret { flex: 1 1 auto; width: 100%; }
            .surv-archive { flex-wrap: wrap; }
        }

        .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: #0b57b0;
            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: #0b57b0 !important;
            border-color: rgba(11, 87, 176, 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(11, 87, 176, 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; }
        }
