/* ========================================================== VORIK MOBILE VEHICLE MAP FIX Carte mobile plein écran + bouton Liste ========================================================== */ .vorik-mobile-map-close { display: none; } @media (max-width: 768px) { /* * La carte occupe uniquement la zone située entre * la barre supérieure et la navigation inférieure. */ body.vorik-mobile-map-active { overflow: hidden; } body.vorik-mobile-map-active .vorik-mobile-search-topbar { z-index: 1200; } body.vorik-mobile-map-active .vorik-mobile-bottom-nav { z-index: 1200; } /* * Sélecteurs pris en charge pour les différentes * implémentations possibles du catalogue. */ body.vorik-mobile-map-active :is( [data-vorik-map-view], [data-vehicle-map-view], .vorik-map-view, .vorik-vehicles-map-view, .vorik-catalog-map-view, .vorik-catalog-map, .vehicles-map-view, .vehicle-map-view ) { position: fixed !important; z-index: 1000 !important; top: calc( var( --vorik-mobile-search-top-height, 72px ) + env(safe-area-inset-top) ) !important; right: 0 !important; bottom: var( --vorik-mobile-nav-height, calc( 66px + env(safe-area-inset-bottom) ) ) !important; left: 0 !important; display: block !important; width: 100vw !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: #dce7ef !important; box-shadow: none !important; } /* * Lorsque la Leaflet map elle-même est le conteneur * principal, elle doit remplir exactement son parent. */ body.vorik-mobile-map-active :is( [data-vorik-map-view], [data-vehicle-map-view], .vorik-map-view, .vorik-vehicles-map-view, .vorik-catalog-map-view, .vorik-catalog-map, .vehicles-map-view, .vehicle-map-view ) .leaflet-container { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; background: #dce7ef !important; } /* * Cas où .leaflet-container est directement la carte * sélectionnée par le script. */ body.vorik-mobile-map-active .leaflet-container[data-vorik-mobile-active-map="true"] { position: fixed !important; z-index: 1000 !important; top: calc( var( --vorik-mobile-search-top-height, 72px ) + env(safe-area-inset-top) ) !important; right: 0 !important; bottom: var( --vorik-mobile-nav-height, calc( 66px + env(safe-area-inset-bottom) ) ) !important; left: 0 !important; width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; background: #dce7ef !important; } /* * Les anciennes règles utilisant la hauteur du contenu * ou de la page sont neutralisées. */ body.vorik-mobile-map-active :is( [data-vorik-map-view], [data-vehicle-map-view], .vorik-map-view, .vorik-vehicles-map-view, .vorik-catalog-map-view, .vorik-catalog-map, .vehicles-map-view, .vehicle-map-view, .leaflet-container[data-vorik-mobile-active-map="true"] ) { aspect-ratio: auto !important; } /* * Garantir que les tuiles Leaflet apparaissent bien * derrière les routes, labels et marqueurs. */ body.vorik-mobile-map-active .leaflet-map-pane, body.vorik-mobile-map-active .leaflet-tile-pane, body.vorik-mobile-map-active .leaflet-overlay-pane, body.vorik-mobile-map-active .leaflet-marker-pane, body.vorik-mobile-map-active .leaflet-tooltip-pane, body.vorik-mobile-map-active .leaflet-popup-pane { display: block !important; visibility: visible !important; } body.vorik-mobile-map-active .leaflet-tile-pane { z-index: 200 !important; opacity: 1 !important; } body.vorik-mobile-map-active .leaflet-overlay-pane { z-index: 400 !important; } body.vorik-mobile-map-active .leaflet-marker-pane { z-index: 600 !important; } body.vorik-mobile-map-active .leaflet-tooltip-pane { z-index: 650 !important; } body.vorik-mobile-map-active .leaflet-popup-pane { z-index: 700 !important; } body.vorik-mobile-map-active .leaflet-tile-container { display: block !important; visibility: visible !important; opacity: 1 !important; } body.vorik-mobile-map-active img.leaflet-tile { display: block !important; visibility: visible !important; max-width: none !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } /* * Bouton permettant de revenir à la liste. */ .vorik-mobile-map-close { position: fixed; z-index: 1300; right: 16px; bottom: calc( var( --vorik-mobile-nav-height, 66px ) + 18px ); display: none; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px 17px; color: #ffffff; font: inherit; font-size: 13px; font-weight: 900; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: #102b55; box-shadow: 0 12px 30px rgba(7, 28, 59, 0.30); cursor: pointer; -webkit-tap-highlight-color: transparent; } body.vorik-mobile-map-active .vorik-mobile-map-close { display: inline-flex; } .vorik-mobile-map-close svg { width: 18px; height: 18px; flex: 0 0 auto; } .vorik-mobile-map-close:active { transform: scale(0.97); } /* * Contrôles Leaflet : ne pas les placer derrière * la barre supérieure ou le bouton Liste. */ body.vorik-mobile-map-active .leaflet-top { top: 10px !important; } body.vorik-mobile-map-active .leaflet-bottom { bottom: 72px !important; } body.vorik-mobile-map-active .leaflet-control-container { position: relative; z-index: 800; } /* * La liste est masquée pendant l'affichage de la carte, * mais reste dans le DOM afin de préserver son état. */ body.vorik-mobile-map-active :is( .vorik-vehicle-grid, .vorik-vehicles-grid, .vehicle-grid, .vehicles-grid, [data-vehicle-grid], [data-vorik-vehicle-grid] ) { visibility: hidden !important; pointer-events: none !important; } } @media (max-width: 380px) { .vorik-mobile-map-close { right: 12px; padding-inline: 14px; } }