/* --- Styles globaux --- */

        @font-face {
    font-family: 'Bellerose';
    src: url('bellerose/Bellerose.woff2') format('woff2'),
            url('belleroseBellerose.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

        body {
            margin: 0;
            padding-bottom: 70px; /* Espace pour la barre mobile */
            font-family: 'Bellerose';
            font-weight: 800;
        }

        .btn-bellerose{
            font-weight: bold;
        }

        /* --- Cartes --- */
        #map, #map-mobile {
            width: 100%;
            height: 500px;
        }
        #map-mobile {
            height: calc(100vh - 150px);
            min-height: 300px;
            max-height: 400px;
        }
        /*
        #add-marker::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    border: 1px dashed #000;

                    animation: pulse-ring 1.8s infinite;
                    opacity: 0.6;
                }
        @keyframes pulse-ring {
            0% {
                transform: scale(1);
                opacity: 0.6;
            }
            70% {
                transform: scale(1.6);
                opacity: 0;
            }
            100% {
                transform: scale(1.6);
                opacity: 0;
            }
        }
        #add-marker:not(.pulse)::after {
            display: none;
        }
        #add-marker {
            writing-mode: vertical-rl; 
            text-orientation: upright;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        */
        /* --- Barre d'outils mobile --- */
        .mobile-toolbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 10px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            display: none;
        }
        .mobile-btn {
            width: 100%;
            margin-bottom: 8px;
            font-size: 16px;
            padding: 12px;
            border-radius: 8px;
        }

        /* --- Boutons personnalisés --- */
        .button {
            background-color: #dc3545; /* Rouge Bootstrap */
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
            height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .button:hover {
            background-color: #c82333;
        }

        /* --- Marqueurs de simulation --- */
        .simulation-marker {
            background-color: rgba(255, 165, 0, 0.7);
            border-radius: 50%;
            width: 10px;
            height: 10px;
            border: 2px solid white;
        }

        /* --- Splash screen --- */
        #splash-screen {
            position: fixed;
            inset: 0;
            background: #dc3545;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.6s ease;
        }
        #splash-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        #splash-screen h1 {
            color: white;
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: 2px;
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .desktop-controls { display: none !important; }
            .mobile-toolbar { display: block !important; }
            /*#map { display: none !important; }*/
        }
        @media (min-width: 769px) {
            .mobile-toolbar { display: none !important; }
            #map-mobile { display: none !important; }
        }
        #map-nouveau, #map-existant { height: 500px; margin-top: 20px; }
                .simulation-active { background-color: #28a745; }

                .leaflet-popup-content img {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 5px 0;
            }

            @media (max-width: 768px) {
                #map-nouveau, #map-existant { height: 300px; margin-top: 20px;  }
                .mobile{display: none;}
            }
            #installButton{
                position: absolute;
                top: 0;
                right:0;
                margin: 1em;

            }
            .slide-up-modal .modal-dialog {
                position: fixed;
                bottom: 0;
                margin: 0;
                width: 100%;
                max-width: 100%;
                height: 100%;
                transform: translateY(100%);
                transition: transform 0.35s ease;
            }

            .slide-up-modal.show .modal-dialog {
                transform: translateY(0);
            }
            #pathFormContainer.hidden {
                display: none;
            }