/* ==========================================
           1. COMPORTEMENT GLOBAL & SCROLL
        ========================================== */
        html {
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }
        
        section {
            scroll-snap-align: start;
            scroll-snap-stop: always; /* Force l'arrêt complet du scroll sur chaque section */
        }

        body {
            background-color: black;
            color: white;
            font-family: sans-serif;
            overflow-x: hidden;
            overscroll-behavior-y: none; 
        }

        /* ==========================================
           2. SLIDES & ANIMATIONS
        ========================================== */
        .slide {
            transition: all 1500ms ease-in-out;
            opacity: 0;
            transform: scale(1.025); 
            z-index: 0;
        }
        .slide.active {
            opacity: 1;
            transform: scale(1);
            z-index: 10;
        }

        /* --- Images brutes (Densité) --- */
        .raw-map {
            transition: opacity 150ms ease-in-out;
            opacity: 0;
        }
        .main-map {
            transition: opacity 150ms ease-in-out;
        }
        
        /* Clic : 100% */
        .show-raw .raw-map { opacity: 1; }
        .show-raw .main-map { opacity: 0; }

        /* Survol : 50% (uniquement si pas déjà cliqué) */
        .hover-raw:not(.show-raw) .raw-map { opacity: 0.7; }

        /* ==========================================
           3. OVERLAYS & TEXTES
        ========================================== */
        #title-overlay {
            transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }
        .title-visible {
            opacity: 1;
            transform: translate(-50%, -50%) translateY(0);
            filter: blur(0);
        }
        .title-hidden {
            opacity: 0;
            transform: translate(-50%, -50%) translateY(20px);
            filter: blur(8px);
        }
        
        .dim-overlay {
            transition: opacity 800ms ease-in-out;
            opacity: 0;
        }
        .dim-overlay.active {
            opacity: 0.6;
        }

        /* ==========================================
           4. LÉGENDE & UI
        ========================================== */
        /* --- Animations légende (Desktop Uniquement) --- */
        @media (min-width: 1024px) {
            #legend-panel {
                transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
                transform-origin: bottom right;
            }
            .legend-hidden {
                opacity: 0;
                transform: scale(0.95) translateX(10px);
                pointer-events: none;
                visibility: hidden;
            }
            .legend-visible {
                opacity: 1;
                transform: scale(1) translateX(0);
                pointer-events: auto;
                visibility: visible;
            }
        }
        
        /* --- Indicateurs de pagination --- */
        .indicator {
            transition: all 300ms;
        }
        .indicator.active {
            width: 2rem;
            background-color: white;
        }
        .indicator.inactive {
            width: 0.5rem;
            background-color: rgba(255, 255, 255, 0.3);
        }