#membres-overlay {
            position: fixed;
            inset: 0;
            z-index: 1199;
            background: rgba(0, 0, 0, 0);
            pointer-events: none;
            transition: background 0.30s ease;
        }
        #membres-overlay.show {
            background: rgba(0, 0, 0, 0.35);
            pointer-events: all;
        }
        #membres-wrapper {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1200;
            transform: translateX(100%);
            transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
        }
        #membres-wrapper.open {
            transform: translateX(0);
            pointer-events: all;
        }
        #membres-panel {
            position: relative;
            width: min(82vw, 310px);
            height: 100%;
            background: rgba(255, 255, 255, 0.62);
            backdrop-filter: blur(22px) saturate(160%);
            -webkit-backdrop-filter: blur(22px) saturate(160%);
            border-left: 1px solid rgba(255, 255, 255, 0.70);
            border-radius: 28px 0 0 28px;
            box-shadow: -4px 0 28px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 24px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            pointer-events: all;
        }
        #membres-tab {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 48px;
            background: rgba(0, 0, 0, 0.18);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
        }
        body.dark #membres-panel {
            background: rgba(28, 32, 48, 0.82);
            border-left-color: rgba(255,255,255,0.08);
        }
        body.dark #membres-tab { background: rgba(255,255,255,0.14); }

        /* ========================================
           PANNEAU MEMBRES — retouche légère
           ======================================== */

        /* Compteur de membres, discret, à côté du titre */
        #membres-panel #settings-header {
            position: relative;
        }
        #membres-panel #settings-header::after {
            content: attr(data-count);
            position: absolute;
            top: 2px; right: 4px;
            background: rgba(33,150,243,0.10);
            color: #1565C0;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 999px;
        }
        body.dark #membres-panel #settings-header::after {
            background: rgba(33,150,243,0.20);
            color: #90CAF9;
        }

        /* Cartes membres — même esprit verre que le reste de l'appli */
        #membres-list {
            padding: 4px 14px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #membres-list .settings-item {
            background: rgba(255,255,255,0.5);
            border: 1px solid rgba(255,255,255,0.6);
            border-radius: 16px;
            padding: 10px 12px !important;
            box-shadow: 0 2px 8px rgba(20,20,40,0.05);
        }
        body.dark #membres-list .settings-item {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.08);
        }

        /* Avatar rond, dans le bleu de l'appli */
        #membres-list .membre-avatar {
            width: 38px;
            height: 38px;
            min-width: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, #64B5F6, #2196F3);
        }

        /* Badge de rôle — pastille discrète */
        #membres-list .membre-role-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            padding: 1px 8px;
            border-radius: 999px;
            margin-top: 2px;
            background: rgba(0,0,0,0.05);
            color: rgba(0,0,0,0.45);
        }
        body.dark #membres-list .membre-role-badge {
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.6);
        }

        /* Boutons d'action */
        #membres-list button {
            transition: transform 0.1s ease !important;
        }
        #membres-list button:active {
            transform: scale(0.95);
        }

        /* ── Panneau À propos ── */
        #about-overlay {
            position: fixed;
            inset: 0;
            z-index: 1199;
            background: rgba(0, 0, 0, 0);
            pointer-events: none;
            transition: background 0.30s ease;
        }
        #about-overlay.show {
            background: rgba(0, 0, 0, 0.35);
            pointer-events: all;
        }
        #about-wrapper {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1200;
            transform: translateX(100%);
            transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            display: flex;
        }
        #about-wrapper.open {
            transform: translateX(0);
            pointer-events: all;
        }
        #about-panel {
            position: relative;
            width: min(82vw, 310px);
            height: 100%;
            background: rgba(255, 255, 255, 0.62);
            backdrop-filter: blur(22px) saturate(160%);
            -webkit-backdrop-filter: blur(22px) saturate(160%);
            border-left: 1px solid rgba(255, 255, 255, 0.70);
            border-radius: 28px 0 0 28px;
            box-shadow: -4px 0 28px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 32px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            pointer-events: all;
        }
        #about-tab {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 48px;
            background: rgba(0, 0, 0, 0.18);
            border-radius: 3px;
            cursor: pointer;
            pointer-events: all;
        }
        body.dark #about-panel {
            background: rgba(28, 32, 48, 0.82);
            border-left-color: rgba(255,255,255,0.08);
        }
        body.dark #about-tab { background: rgba(255,255,255,0.14); }

        /* Contenu du panneau about */
        .about-section-title {
            font-size: 11px;
            font-weight: 700;
            color: rgba(0,0,0,0.38);
            text-transform: uppercase;
            letter-spacing: 0.07em;
            padding: 18px 20px 8px;
        }
        body.dark .about-section-title { color: rgba(255,255,255,0.35); }

        .about-description {
            margin: 0 16px 4px;
            background: rgba(255,255,255,0.55);
            border-radius: 14px;
            padding: 14px 16px;
            font-size: 14px;
            line-height: 1.6;
            color: #333;
            border: 1px solid rgba(0,0,0,0.07);
        }
        body.dark .about-description {
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.82);
            border-color: rgba(255,255,255,0.07);
        }
        .about-description.empty {
            color: rgba(0,0,0,0.3);
            font-style: italic;
        }
        body.dark .about-description.empty { color: rgba(255,255,255,0.25); }

        .about-legend-item {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 0 16px 10px;
            background: rgba(255,255,255,0.55);
            border-radius: 14px;
            padding: 12px 16px;
            border: 1px solid rgba(0,0,0,0.07);
        }
        body.dark .about-legend-item {
            background: rgba(255,255,255,0.07);
            border-color: rgba(255,255,255,0.07);
        }
        .about-legend-label {
            flex: 1;
        }
        .about-legend-name {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            line-height: 1.3;
        }
        body.dark .about-legend-name { color: rgba(255,255,255,0.9); }
        .about-legend-desc {
            font-size: 12px;
            color: rgba(0,0,0,0.42);
            margin-top: 2px;
            line-height: 1.4;
        }
        body.dark .about-legend-desc { color: rgba(255,255,255,0.38); }

        body.dark #about-desc-input,
        body.dark [id^="about-legend-"] {
            background: rgba(255,255,255,0.07) !important;
            color: rgba(255,255,255,0.88) !important;
            border-color: rgba(255,255,255,0.1) !important;
        }

        /* ── Panneau Boîte à lettres ── */
        #mailbox-overlay {
            position: fixed; inset: 0; z-index: 1199;
            background: rgba(0,0,0,0); pointer-events: none;
            transition: background 0.30s ease;
        }
        #mailbox-overlay.show { background: rgba(0,0,0,0.35); pointer-events: all; }
        #mailbox-wrapper {
            position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
            transform: translateX(100%);
            transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94);
            pointer-events: none; display: flex;
        }
        #mailbox-wrapper.open { transform: translateX(0); pointer-events: all; }
        #mailbox-panel {
            position: relative; width: min(82vw, 320px); height: 100%;
            background: rgba(255,255,255,0.62);
            backdrop-filter: blur(22px) saturate(160%);
            -webkit-backdrop-filter: blur(22px) saturate(160%);
            border-left: 1px solid rgba(255,255,255,0.70);
            border-radius: 28px 0 0 28px;
            box-shadow: -4px 0 28px rgba(0,0,0,0.15);
            display: flex; flex-direction: column;
            overflow-y: auto; overflow-x: hidden;
            padding-bottom: 32px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            pointer-events: all;
        }
        #mailbox-tab {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            width: 5px; height: 48px; background: rgba(0,0,0,0.18);
            border-radius: 3px; cursor: pointer; pointer-events: all;
        }
        body.dark #mailbox-panel {
            background: rgba(28,32,48,0.82);
            border-left-color: rgba(255,255,255,0.08);
        }
        body.dark #mailbox-tab { background: rgba(255,255,255,0.14); }

        /* Items signalement */
        .sig-item {
            margin: 0 14px 10px;
            background: rgba(255,255,255,0.7);
            border-radius: 14px;
            padding: 13px 15px;
            border: 1px solid rgba(0,0,0,0.07);
            cursor: pointer;
            transition: background 0.15s;
        }
        .sig-item:active { background: rgba(255,255,255,0.95); }
        .sig-item.unread { border-left: 4px solid #FF9800; }
        body.dark .sig-item { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.07); }
        body.dark .sig-item.unread { border-left-color: #FF9800; }
        .sig-item-type { font-size: 13px; font-weight: 700; color: #FF9800; margin-bottom: 3px; }
        .sig-item-name { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 3px; text-decoration: underline; }
        body.dark .sig-item-name { color: rgba(255,255,255,0.9); }
        .sig-item-comment { font-size: 12px; color: rgba(0,0,0,0.5); line-height: 1.4; margin-bottom: 4px; }
        body.dark .sig-item-comment { color: rgba(255,255,255,0.4); }
        .sig-item-meta { font-size: 11px; color: rgba(0,0,0,0.35); }
        body.dark .sig-item-meta { color: rgba(255,255,255,0.25); }
        .sig-empty { text-align: center; padding: 40px 20px; color: rgba(0,0,0,0.3); font-size: 14px; }
        body.dark .sig-empty { color: rgba(255,255,255,0.25); }
        .sig-empty-icon { font-size: 44px; margin-bottom: 10px; }
        /* Styles pour le panneau de logs */
        #logs-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100000;
        }

        #logs-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
        }

        #logs-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #0f1117;
            overflow-y: auto;
            padding: 10px;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        #logs-content .header {
            background: linear-gradient(135deg,#1a1f3c,#2d1b6e);
            padding: 14px;
            border-radius: 12px;
            margin-bottom: 10px;
            border: 1px solid rgba(102,126,234,.3);
        }

        #logs-content .header-top {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        #logs-content .back-btn {
            background: rgba(255,255,255,.15);
            border: none;
            color: white;
            font-size: 20px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            flex-shrink: 0;
        }

        #logs-content .header h1 {
            font-size: 17px;
            color: white;
            font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
        }

        #logs-content .status-bar {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        #logs-content .pill {
            padding: 3px 9px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.1);
        }

        #logs-content .pill.ok {
            background: rgba(76,175,80,.25);
            border-color: #4CAF50;
            color: #81C784;
        }

        #logs-content .pill.err {
            background: rgba(244,67,54,.2);
            border-color: #F44336;
            color: #EF9A9A;
        }

        #logs-content .stats {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 8px;
            margin-bottom: 10px;
        }

        #logs-content .stat {
            background: #1a1f2e;
            border: 1px solid rgba(255,255,255,.08);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }

        #logs-content .stat-val {
            font-size: 20px;
            font-weight: bold;
            color: #667eea;
        }

        #logs-content .stat-lbl {
            font-size: 10px;
            color: #555;
            margin-top: 2px;
        }

        #logs-content .trip-banner {
            background: rgba(76,175,80,.12);
            border: 1px solid rgba(76,175,80,.35);
            border-radius: 8px;
            padding: 8px 12px;
            margin-bottom: 8px;
            font-size: 12px;
            display: none;
            color: #e0e0e0;
        }

        #logs-content .trip-banner.on {
            display: block;
        }

        #logs-content .trip-banner strong {
            color: #81C784;
        }

        #logs-content .filter-bar {
            display: flex;
            gap: 5px;
            margin-bottom: 8px;
            overflow-x: auto;
            padding-bottom: 2px;
        }

        #logs-content .fbtn {
            padding: 5px 11px;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 20px;
            background: transparent;
            color: #aaa;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        #logs-content .fbtn.on {
            background: #667eea;
            border-color: #667eea;
            color: white;
        }

        #logs-content .controls {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }

        #logs-content .btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }

        #logs-content .btn-r {
            background: #27ae60;
            color: white;
        }

        #logs-content .btn-s {
            background: #8e44ad;
            color: white;
        }

        #logs-content .btn-e {
            background: #2980b9;
            color: white;
        }

        #logs-content .btn-c {
            background: #c0392b;
            color: white;
        }

        #logs-content .logs {
            background: #12151e;
            border-radius: 10px;
            padding: 10px;
            height: calc(100vh - 380px);
            overflow-y: auto;
            border: 1px solid rgba(255,255,255,.06);
        }

        #logs-content .entry {
            padding: 7px 10px;
            margin-bottom: 5px;
            border-radius: 6px;
            border-left: 3px solid #333;
            background: rgba(255,255,255,.02);
        }

        #logs-content .entry.success {
            border-left-color: #4CAF50;
            background: rgba(76,175,80,.07);
        }

        #logs-content .entry.error {
            border-left-color: #F44336;
            background: rgba(244,67,54,.08);
        }

        #logs-content .entry.warning {
            border-left-color: #FF9800;
            background: rgba(255,152,0,.06);
        }

        #logs-content .entry.info {
            border-left-color: #667eea;
        }

        #logs-content .entry.position {
            border-left-color: #00BCD4;
        }

        #logs-content .entry.service {
            border-left-color: #9C27B0;
        }

        #logs-content .entry.debug {
            border-left-color: #00E5FF;
            background: rgba(0,229,255,.04);
        }

        #logs-content .etime {
            font-size: 10px;
            color: #444;
            font-family: monospace;
            margin-bottom: 2px;
        }

        #logs-content .emsg {
            color: #ddd;
            line-height: 1.4;
        }

        #logs-content .edet {
            margin-top: 4px;
            padding: 4px 8px;
            background: rgba(0,0,0,.3);
            border-radius: 4px;
            font-family: monospace;
            font-size: 10px;
            color: #777;
            white-space: pre-wrap;
        }

        #logs-content .empty {
            text-align: center;
            padding: 50px 20px;
            color: #333;
        }

        #logs-content .empty .ico {
            font-size: 40px;
            margin-bottom: 10px;
        }

        #logs-content .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #4CAF50;
            border-radius: 50%;
            margin-right: 6px;
            animation: blink 1.5s infinite;
            vertical-align: middle;
        }

        @keyframes blink {
            0%,100% { opacity: 1; }
            50% { opacity: .2; }
        }
                /* ── Durée — LIGHT ── */
                .invite-dur-btn {
                    padding:10px 6px;
                    border:1px solid rgba(0,0,0,0.12);
                    border-radius:12px;
                    background:rgba(0,0,0,0.04);
                    color:rgba(0,0,0,0.45);
                    font-size:12px;font-weight:600;font-family:inherit;
                    cursor:pointer;
                    transition:all 0.18s;
                    text-align:center;
                    line-height:1.2;
                }
                .invite-dur-btn.active {
                    background:rgba(33,150,243,0.12);
                    border-color:rgba(33,150,243,0.55);
                    color:#1565C0;
                    box-shadow:0 0 0 1px rgba(33,150,243,0.2);
                }

                /* ── Bouton créer — LIGHT ── */
                .invite-create-btn {
                    display:flex;align-items:center;justify-content:center;gap:8px;
                    width:100%;padding:14px;border:none;border-radius:14px;
                    background:linear-gradient(135deg,#2196F3,#1565C0);
                    color:#fff;font-size:14px;font-weight:700;font-family:inherit;
                    cursor:pointer;
                    box-shadow:0 6px 18px rgba(33,150,243,0.30);
                    transition:opacity 0.15s,transform 0.15s;
                }
                .invite-create-btn:active { opacity:0.85;transform:scale(0.98); }
                .invite-create-btn:disabled { opacity:0.45;cursor:not-allowed;transform:none; }

                /* ── Carte lien — LIGHT ── */
                .invite-link-card {
                    background:rgba(0,0,0,0.04);
                    border:1px solid rgba(0,0,0,0.09);
                    border-radius:14px;
                    padding:13px 14px;
                    margin-bottom:10px;
                    overflow:hidden;
                }
                .invite-link-card-header {
                    display:flex;align-items:center;
                    margin-bottom:8px;
                }
                .invite-link-expiry-badge {
                    display:inline-flex;align-items:center;gap:5px;
                    font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
                    color:#b45309;
                    background:rgba(180,83,9,0.10);
                    border:1px solid rgba(180,83,9,0.22);
                    border-radius:20px;padding:3px 9px;
                }
                .invite-link-url {
                    font-size:11px;
                    color:rgba(0,0,0,0.45);
                    word-break:break-all;line-height:1.55;
                    background:rgba(0,0,0,0.06);
                    border-radius:8px;padding:8px 10px;
                    margin-bottom:10px;
                    border:1px solid rgba(0,0,0,0.07);
                    font-family:monospace;
                }
                .invite-link-actions { display:flex;gap:8px; }
                .invite-btn-copy {
                    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
                    padding:10px 12px;
                    border:1px solid rgba(33,150,243,0.35);
                    border-radius:11px;
                    background:rgba(33,150,243,0.08);
                    color:#1565C0;
                    font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
                    transition:background 0.15s;
                }
                .invite-btn-copy:active { background:rgba(33,150,243,0.16); }
                .invite-btn-delete {
                    display:flex;align-items:center;justify-content:center;
                    padding:10px 14px;
                    border:1px solid rgba(211,47,47,0.28);
                    border-radius:11px;
                    background:rgba(211,47,47,0.07);
                    color:#c62828;
                    font-size:15px;font-family:inherit;cursor:pointer;
                    transition:background 0.15s;
                }
                .invite-btn-delete:active { background:rgba(211,47,47,0.16); }

                /* ── Label durée de validité ── */
                .invite-validity-label {
                    font-size:11px;color:rgba(0,0,0,0.35);
                    text-transform:uppercase;letter-spacing:0.07em;
                    margin-bottom:10px;padding:0 2px;
                }

                /* ══ DARK MODE ══ */
                body.dark .invite-dur-btn {
                    border-color:rgba(255,255,255,0.1);
                    background:rgba(255,255,255,0.05);
                    color:rgba(255,255,255,0.45);
                }
                body.dark .invite-dur-btn.active {
                    background:rgba(74,144,217,0.18);
                    border-color:rgba(74,144,217,0.6);
                    color:#6ab4f5;
                    box-shadow:0 0 0 1px rgba(74,144,217,0.22);
                }
                body.dark .invite-link-card {
                    background:rgba(255,255,255,0.04);
                    border-color:rgba(255,255,255,0.09);
                }
                body.dark .invite-link-expiry-badge {
                    color:rgba(251,191,36,0.9);
                    background:rgba(251,191,36,0.1);
                    border-color:rgba(251,191,36,0.22);
                }
                body.dark .invite-link-url {
                    color:rgba(255,255,255,0.35);
                    background:rgba(0,0,0,0.25);
                    border-color:rgba(255,255,255,0.06);
                }
                body.dark .invite-btn-copy {
                    border-color:rgba(74,144,217,0.35);
                    background:rgba(74,144,217,0.1);
                    color:#6ab4f5;
                }
                body.dark .invite-btn-copy:active { background:rgba(74,144,217,0.22); }
                body.dark .invite-btn-delete {
                    border-color:rgba(255,80,80,0.28);
                    background:rgba(255,80,80,0.07);
                    color:#ff7070;
                }
                body.dark .invite-btn-delete:active { background:rgba(255,80,80,0.18); }
                body.dark .invite-validity-label { color:rgba(255,255,255,0.32); }
            #close-routes-btn,
            #share-route-btn {
                z-index: 500 !important;
            }
            #settings-overlay {
                z-index: 1199 !important;
            }
            #settings-wrapper {
                z-index: 1200 !important;
            }
        @keyframes slideUpSms {
            from { transform: translateY(100%); opacity: 0; }
            to   { transform: translateY(0);    opacity: 1; }
        }