*,
        *::before,
        *::after {
            margin: 0;
            box-sizing: border-box;
        }

        body {
            touch-action: pan-y;
            padding: 0;
        }

        :root {
    --page-side-padding: 20px;
            --rose-fuchsia: #FF3EB5;
            --noir-profond: #0B0B0B;
            --blanc-pur: #FFFFFF;
            --gris-perle: #B6B6B6;
            --rouge-passion: #E30049;
        }

        /* Masquer l'attribution Leaflet sur les cartes */
        .leaflet-control-attribution { display: none !important; }

        /* Import Design System - Buttons */
        @import url('buttons.css');

        /* Import Design System - Typography */
        @import url('typography.css');

        html, body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--noir-profond);
            color: var(--blanc-pur);
            overflow-x: hidden;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            height: auto;
            min-height: 100vh;
            padding: 0;
            margin: 0;
        }

        body {
            touch-action: pan-y;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
                    }
        
        /* Particules */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: var(--rose-fuchsia);
            border-radius: 50%;
            animation: float linear infinite;
            opacity: 0.3;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 0.3;
            }
            90% {
                opacity: 0.3;
            }
            100% {
                transform: translateY(-100px) translateX(100px);
                opacity: 0;
            }
        }

/* Mobile menu icon */
.mobile-menu-toggle {
    width: 42px;
    height: 36px;
    position: relative;
    padding: 0;
}

.mobile-menu-toggle::before,
.mobile-menu-toggle::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--blanc-pur);
    border-radius: 2px;
}

.mobile-menu-toggle::before {
    top: 9px;
    box-shadow: 0 8px 0 var(--blanc-pur);
}

.mobile-menu-toggle::after {
    bottom: 9px;
}

/* ============================================
   UNIFIED PAGE CONTAINER LAYOUT
   All main page containers share the same width/centering.
   Reference: /hub/map page layout (max-width: 1800px)
   ============================================ */
.dashboard-container,
.content-container,
.map-section {
    width: 100%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-side-padding);
    padding-right: var(--page-side-padding);
    padding-top: 110px;
    padding-bottom: 40px;
    position: relative;
    z-index: 1;
    flex: 1;
}