:root {
            --bg-deep:       #0d1117;
            --bg-panel:      rgba(22, 27, 34, 0.95);
            --accent-velo:   #ff3b30;
            --accent-traces: #0055ff;
            --accent-saved:  #00c896;
            --accent-select: #ff9f00;
            --text-primary:  #e6edf3;
            --text-secondary:#8b949e;
            --border-subtle: rgba(255,255,255,0.1);
            --radius-sm:     8px;
            --radius-lg:     16px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html, body { margin:0; padding:0; width:100%; height:100%; font-family:'Rajdhani',Arial,sans-serif; background:var(--bg-deep); color:var(--text-primary); }

        /* ── HEADER ── */
        .app-header {
            height: 70px;
            background: var(--bg-panel);
            border-bottom: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 1000;
            position: relative;
            backdrop-filter: blur(10px);
        }

        .app-logo { display:flex; align-items:center; gap:10px; }
        .logo-icon { font-size:1.8rem; }
        .logo-text { font-size:1.4rem; font-weight:700; letter-spacing:1px; }
        .logo-text span { color:var(--accent-velo); }

        .control-panel { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

        .divider { width:1px; height:30px; background:var(--border-subtle); }

/* ── TOGGLE ── */
        .toggle-wrapper { display:flex; align-items:center; gap:8px; }
        .toggle-label { font-size:0.85rem; font-weight:600; white-space:nowrap; }

        /* Conteneur principal */
        .toggle-switch { position:relative; display:inline-block; width:34px; height:18px; flex-shrink:0; }
        .toggle-switch input { opacity:0; width:0; height:0; margin:0; }
        
        /* Le fond du bouton */
        .toggle-slider {
            position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
            background:#444; border-radius:18px; transition:.3s;
        }
        
        /* Le cercle à l'intérieur */
        .toggle-slider::before {
            content:""; position:absolute; 
            height:14px; width:14px; /* Tailles paires plus faciles à centrer */
            left:2px; bottom:2px;    /* (18 - 14) / 2 = 2px de marge parfaite */
            background:#fff; border-radius:50%; transition:.3s;
        }

        /* ── COULEURS DES BOUTONS ACTIFS ── */
        input:checked + .toggle-slider { background:var(--accent-velo, #34c759); } /* Couleur par défaut */
        input:checked + .toggle-slider.toggle-slider-blue { background:var(--accent-traces); }
        input:checked + .toggle-slider.toggle-slider-yellow { background:#ffaa00; }
        input:checked + .toggle-slider.toggle-slider-green { background:var(--accent-saved); }

        /* ── ANIMATION UNIQUE POUR TOUS LES BOUTONS ── */
        /* Translation = Largeur totale (34) - Cercle (14) - Marges gauche/droite (4) = 16px */
        input:checked + .toggle-slider::before { transform:translateX(16px); }

        /* ── BUTTONS ── */
        .btn {
            display:flex; align-items:center; gap:6px;
            padding:8px 16px; border:none; border-radius:var(--radius-sm);
            font-family:inherit; font-size:0.9rem; font-weight:600;
            cursor:pointer; transition:all 0.2s; white-space:nowrap;
        }
        .btn:disabled { opacity:0.4; cursor:not-allowed; }
        .btn-primary { background:var(--accent-velo); color:#fff; }
        .btn-primary:not(:disabled):hover { background:#e0241b; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,59,48,0.4); }
        .btn-secondary { background:transparent; color:var(--text-primary); border:1px solid var(--border-subtle); }
        .btn-secondary:not(:disabled):hover { border-color:var(--accent-velo); color:var(--accent-velo); }
        .btn-success { background:#238636; color:#fff; }
        .btn-success:not(:disabled):hover { background:#2ea043; transform:translateY(-1px); }
        .btn-mode-free { background:#238636; color:#fff; }
        .btn-mode-free:hover { background:#2ea043; }
        .btn-mode-free.active-free { background:#d29922; }

        /* ── STATUS BADGE ── */
        .status-badge {
            display:flex; align-items:center; gap:8px;
            padding:6px 14px; background:var(--bg-deep);
            border:1px solid var(--border-subtle); border-radius:20px;
            font-size:0.85rem; font-weight:500;
        }
        .status-dot { width:8px; height:8px; border-radius:50%; background:var(--text-secondary); animation:pulse 2s infinite; }
        .status-dot.active { background:var(--accent-velo); box-shadow:0 0 10px var(--accent-velo); }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

        /* ── MAP ── */
        #map { width:100%; height:calc(100vh - 70px); z-index:1; }

        /* ── DB ERROR ── */
        .db-error {
            position:absolute; top:80px; left:50%; transform:translateX(-50%);
            z-index:2000; background:#ffcdd2; color:#b71c1c;
            padding:15px 25px; border-radius:8px;
            box-shadow:0 4px 10px rgba(0,0,0,0.3); border:1px solid #e57373;
        }

        /* ── ROUTE INFO ── */
        .route-info {
            position:fixed; bottom:30px; right:20px;
            background:var(--bg-panel); backdrop-filter:blur(10px);
            border:1px solid var(--accent-velo); border-radius:var(--radius-lg);
            padding:18px 22px; z-index:1000; min-width:200px;
            opacity:0; transform:translateY(20px); transition:all 0.3s;
        }
        .route-info.visible { opacity:1; transform:translateY(0); }
        .route-info h4 { margin:0 0 12px; font-size:1rem; color:var(--accent-velo); text-transform:uppercase; letter-spacing:1px; }
        .route-stat { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
        .stat-label { font-size:0.85rem; color:var(--text-secondary); }
        .stat-value { font-size:1rem; font-weight:700; color:var(--text-primary); font-family:'JetBrains Mono',monospace; }

        /* ── PANNEAU TRACES SAUVEGARDÉES ── */
        #savedPanel {
            position:fixed; left:20px; bottom:30px;
            background:var(--bg-panel); backdrop-filter:blur(10px);
            border:1px solid var(--accent-saved); border-radius:var(--radius-lg);
            padding:16px; z-index:1000; min-width:260px; max-width:300px;
            max-height:60vh; display:flex; flex-direction:column;
            transition:all 0.3s;
        }
        #savedPanel h4 {
            margin:0 0 12px; font-size:1rem; color:var(--accent-saved);
            text-transform:uppercase; letter-spacing:1px;
            display:flex; justify-content:space-between; align-items:center;
        }
        #savedPanel h4 span { font-size:0.75rem; color:var(--text-secondary); font-weight:400; }
        #savedList { overflow-y:auto; flex:1; }

        .saved-item {
            display:flex; align-items:center; gap:8px;
            padding:8px 10px; border-radius:var(--radius-sm);
            border:1px solid var(--border-subtle); margin-bottom:6px;
            cursor:pointer; transition:all 0.2s; background:rgba(255,255,255,0.03);
        }
        .saved-item:hover { border-color:var(--accent-saved); background:rgba(0,200,150,0.08); }
        .saved-item.active-saved { border-color:var(--accent-saved); background:rgba(0,200,150,0.15); }

        .saved-item-info { flex:1; min-width:0; }
        .saved-item-name { font-size:0.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .saved-item-meta { font-size:0.75rem; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; }

        .saved-item-eye {
            background:none; border:none; color:var(--text-secondary);
            cursor:pointer; font-size:1rem; padding:2px 4px; border-radius:4px;
            transition:color 0.2s;
        }
        .saved-item-eye:hover { color:var(--accent-saved); }
        .saved-item-eye.hidden-eye { color:#444; }

        .saved-item-del {
            background:none; border:none; color:#555;
            cursor:pointer; font-size:0.9rem; padding:2px 4px; border-radius:4px;
            transition:color 0.2s;
        }
        .saved-item-del:hover { color:var(--accent-velo); }

        /* ── POPUP ACTIVITÉ SÉLECTIONNÉE ── */
        .activity-popup {
            position:fixed; top:85px; left:50%; transform:translateX(-50%);
            background:var(--bg-panel); backdrop-filter:blur(12px);
            border:2px solid var(--accent-select); border-radius:var(--radius-lg);
            padding:14px 20px; z-index:2000; min-width:280px;
            animation:slideDown 0.3s ease;
            pointer-events:none;
        }
        @keyframes slideDown { from{opacity:0;transform:translateX(-50%) translateY(-10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
        .activity-popup h5 { margin:0 0 8px; color:var(--accent-select); font-size:1rem; text-transform:uppercase; letter-spacing:1px; }
        .activity-popup-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
        .activity-popup-item { font-size:0.82rem; }
        .activity-popup-item .lbl { color:var(--text-secondary); display:block; font-size:0.75rem; }
        .activity-popup-item .val { font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--text-primary); }

        /* ── MODAL SAUVEGARDE ── */
        .modal-overlay {
            position:fixed; inset:0; background:rgba(0,0,0,0.7);
            z-index:3000; display:flex; align-items:center; justify-content:center;
            opacity:0; pointer-events:none; transition:opacity 0.3s;
        }
        .modal-overlay.open { opacity:1; pointer-events:all; }
        .modal-box {
            background:var(--bg-panel); border:1px solid var(--accent-saved);
            border-radius:var(--radius-lg); padding:28px 32px; min-width:320px;
            transform:scale(0.9); transition:transform 0.3s;
        }
        .modal-overlay.open .modal-box { transform:scale(1); }
        .modal-box h3 { margin:0 0 20px; color:var(--accent-saved); font-size:1.2rem; text-transform:uppercase; letter-spacing:1px; }
        .modal-input {
            width:100%; padding:10px 14px; background:rgba(255,255,255,0.05);
            border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
            color:var(--text-primary); font-family:inherit; font-size:1rem;
            margin-bottom:16px; outline:none; transition:border-color 0.2s;
        }
        .modal-input:focus { border-color:var(--accent-saved); }
        .modal-actions { display:flex; gap:10px; justify-content:flex-end; }

        /* Popups Leaflet */
        .delete-popup-btn {
            background:#ff3b30; color:#fff; border:none; padding:5px 10px;
            border-radius:4px; font-family:inherit; font-weight:bold; cursor:pointer; font-size:11px;
        }
        .delete-popup-btn:hover { background:#d32f2f; }

/* ── ROUTING MACHINE OVERRIDES ── */
.leaflet-routing-container { display:none !important; }
/* Supprimez ou remplacez la ligne .leaflet-routing-waypoint-icon par celle-ci pour avoir des points discrets et visibles */
.leaflet-routing-waypoint-icon {
    background: #ff3b30;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 12px !important;
    height: 12px !important;
    margin-left: -6px !important;
    margin-top: -6px !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.leaflet-routing-icon { display:none !important; }

/* 1. Permet aux clics de traverser les volets transparents de Leaflet */
.leaflet-oldTracesPane-pane,
.leaflet-savedRoutesPane-pane,
.leaflet-newRoutePane-pane {
    pointer-events: none !important;
}

/* 2. Forcer les lignes des anciennes activités (oldTracesPane) à ignorer TOTALEMENT les clics */
.leaflet-oldTracesPane-pane path {
    pointer-events: none !important;
}

/* 3. Restaurer l'interactivité UNIQUEMENT pour les lignes éditables et enregistrées */
.leaflet-savedRoutesPane-pane path,
.leaflet-newRoutePane-pane path {
    pointer-events: auto !important;
}

/* Empêche le moteur SVG des anciennes traces de bloquer la carte */
.leaflet-oldTracesPane-pane svg {
    pointer-events: none !important;
}
        /* Scrollbar */
        #savedList::-webkit-scrollbar { width:4px; }
        #savedList::-webkit-scrollbar-track { background:transparent; }
        #savedList::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:2px; }