/* Popup responsive fix — 2026-05-29. * * Le popup riche véhicule a max-width 320px en CSS mais peut être tronqué * quand son anchor (bord droit ou bas) tombe près du bord de la viewport : * MapLibre positionne automatiquement mais la mise à jour du DOM ne tient * pas toujours compte du viewport résolu. Force les contraintes ici. * * Loaded en dernier dans pour override dashboard.css. */ /* Le popup doit passer AU-DESSUS des panneaux latéraux fixes (PAV, Circuits… z-index:5) : * sinon il apparaît TRONQUÉ/derrière eux quand le marqueur est côté droit. Sûr ici car aucun * ancêtre de la carte ne crée de stacking context (vérifié) → z-index:10 stacke à la racine, * au-dessus des panneaux (5) et sous les toasts/modales (>=1000). */ .maplibregl-popup { z-index: 10 !important; } /* Le wrapper MapLibre lui-même : jamais plus de 90% viewport, scroll si trop haut */ .maplibregl-popup-content, .veh-popup-container .maplibregl-popup-content { max-width: min(360px, 92vw) !important; max-height: 75vh !important; padding: 0 !important; border-radius: 8px !important; /* SCROLL si trop haut (intention d'origine) — `visible` laissait le contenu (ex. section * « Requête trajectoire ») déborder HORS du fond blanc = zone transparente/coupée. */ overflow-y: auto !important; overflow-x: visible !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; } /* Le panel interne riche véhicule : flex column, scroll body, actions fixes */ .rich-veh-popup { display: flex !important; flex-direction: column !important; min-width: 0 !important; max-width: 100% !important; width: min(340px, 90vw) !important; } .rich-veh-popup .rvp-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: 45vh !important; overflow-y: auto !important; } /* Actions toujours visibles + flex-wrap cohérent + interactif */ .rich-veh-popup .rvp-actions { flex: 0 0 auto !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 8px 12px !important; border-top: 1px solid #e5e7eb !important; background: #fff !important; position: relative !important; z-index: 2 !important; } .rich-veh-popup .rvp-btn { flex: 1 1 auto !important; min-width: 70px !important; padding: 5px 10px !important; font-size: 11px !important; pointer-events: auto !important; cursor: pointer !important; } /* Export row pareillement */ .rich-veh-popup .rvp-export-row { flex: 0 0 auto !important; background: #f9fafb !important; padding: 5px 12px 7px !important; } .rich-veh-popup .rvp-export-btn { pointer-events: auto !important; cursor: pointer !important; } /* Le close button MapLibre toujours en haut-droite cliquable */ .maplibregl-popup-close-button { font-size: 18px !important; padding: 0 6px !important; z-index: 3 !important; } /* Petit mobile (< 480px) : popup quasi pleine largeur */ @media (max-width: 480px) { .maplibregl-popup-content, .veh-popup-container .maplibregl-popup-content { max-width: 96vw !important; } .rich-veh-popup { width: 96vw !important; } .rich-veh-popup .rvp-btn { min-width: 50px !important; font-size: 10px !important; } } /* ============================================================ * Fix marqueurs GPS qui « glissent » au zoom/dézoom — 2026-05-30 * * Cause 1 (drift/swim) : `.veh-marker-container` portait `transition: transform` * ET c'est l'élément que MapLibre positionne (il réécrit `transform: translate(...)` * à CHAQUE frame pendant le zoom). La transition animait donc chaque repositionnement * → le marqueur traînait derrière son point GPS. On désactive toute transition sur * l'élément positionné par MapLibre (transform doit être instantané et exact). * * Cause 2 (offset ~4px) : l'icône camion (36×36) était en top:0;left:0 dans un * conteneur 45×45 ancré `center` → centre visuel de l'icône décalé de (-4.5,-4.5)px * du vrai point GPS. On recentre l'icône sur le point GPS (left/top:50% + translate), * en conservant la rotation de cap (heading) appliquée inline par le JS. * ============================================================ */ /* 1) Aucune transition sur l'élément MapLibre-positionné → zéro lag au zoom. * position:absolute !important (2026-06-10) : un inline `position:relative` posé * par du JS sur le root marker (cause du drift en escalier 0/+45/+90px de * 520/516/482) perdrait contre cette règle — protège AUSSI tout futur marker. */ .maplibregl-marker { position: absolute !important; transition: none !important; will-change: auto; } .maplibregl-marker .veh-marker-container, .veh-marker-container { transition: none !important; } /* 2) Icône camion recentrée exactement sur le point GPS (anchor:center). * transform inline du JS = `rotate(Ndeg)` → on compose translate(-50%,-50%) + rotate * via une variable, mais comme le JS écrit `transform: rotate(...)` en inline (priorité), * on recentre plutôt par la position pour ne PAS écraser la rotation. */ .veh-truck-marker { top: 50% !important; left: 50% !important; margin-top: -18px; /* -hauteur/2 (36/2) : recentre sans toucher au transform (rotation) */ margin-left: -18px; /* -largeur/2 */ transition: filter 0.3s ease !important; /* garde le fondu couleur, retire transform 1s (sautait au refresh) */ } /* Ombre + label restent calés sur l'icône recentrée (déjà en left:50% + translateX) */ /* ============================================================ * Fenêtre « Surveillance » (#cameraModal) — 2026-06-08 * NON BLOQUANTE (la carte reste visible + cliquable derrière) + DÉPLAÇABLE (drag en-tête, JS * dashboard_camera_window.js) + redimensionnable. Les 3 caméras (Avant Intérieur, Avant Route, * Arrière) tiennent sur UNE ligne ; « Extra » est masquée (d-none dans le HTML). !important car * une CSS buildée définit la grille en auto-fit. * ============================================================ */ #cameraModal.camera-modal { background: transparent !important; /* plus de voile sombre plein écran */ pointer-events: none !important; /* les clics passent à la carte derrière */ } #cameraModal .camera-modal-content { pointer-events: auto !important; /* la fenêtre elle-même reste interactive */ position: fixed !important; top: 64px !important; right: 12px !important; left: auto !important; bottom: auto !important; width: min(900px, 66vw) !important; max-height: 82vh !important; margin: 0 !important; resize: both !important; overflow: auto !important; } #cameraModal .camera-modal-header { cursor: move; } #cameraModal .camera-grid { grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 820px) { #cameraModal .camera-modal-content { width: 94vw !important; right: 3vw !important; } #cameraModal .camera-grid { grid-template-columns: 1fr !important; } } /* Bouton « détacher » dans le titre de chaque caméra */ .gca-cam-detach-btn { margin-left: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #cfe3ff; border-radius: 5px; cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 7px; vertical-align: middle; } .gca-cam-detach-btn:hover { background: rgba(59,130,246,.45); color: #fff; } /* Fenêtre d'une caméra détachée (flottante, déplaçable, non bloquante) */ .gca-detached-cam { position: fixed; top: 90px; left: 90px; z-index: 1300; width: 360px; min-width: 200px; background: #0b1220; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); overflow: hidden; resize: both; } .gca-detached-cam-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: #16223b; color: #e6edf3; font: 600 12px system-ui; cursor: move; } .gca-detached-cam-close { background: none; border: none; color: #e6edf3; cursor: pointer; font-size: 15px; padding: 0 4px; line-height: 1; } .gca-detached-cam .camera-screen { width: 100%; min-height: 200px; } .gca-detached-cam .camera-screen video { width: 100%; height: 100%; object-fit: contain; } /* ============================================================ * HUD flotte topbar (2026-06-10) — légende véhicules + coords WGS84 remontées * en haut (même ligne que langue/thème). Design "glass/neon" : capsule en * verre fumé, points luminescents qui PULSENT quand l'état est peuplé, * compteurs LIVE (maj 2 s, dashboard_vehicles_ui.updateFleetStatusHud), * coordonnées mono cyan à droite (dashboard_geomatic_tools). * Placé ici (et pas dashboard.css) : la page charge le BUNDLE Vite hashé de * dashboard.css — ce fichier-ci est chargé en direct avec ?v= -> déploiement * immédiat sans rebuild. * ============================================================ */ #fleetStatusHud { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; margin: 0 2px; background: linear-gradient(135deg, rgba(8,14,28,0.72), rgba(13,24,46,0.66)); border: 1px solid rgba(59,130,246,0.35); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 18px rgba(2,8,20,0.45), 0 0 14px rgba(59,130,246,0.12); font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: #9fb6d8; user-select: none; white-space: nowrap; } #fleetStatusHud .fsh-chip { display: inline-flex; align-items: center; gap: 5px; } #fleetStatusHud .fsh-n { font-weight: 700; color: #e8f1ff; font-variant-numeric: tabular-nums; } #fleetStatusHud .fsh-lbl { opacity: 0.75; letter-spacing: 0.2px; } #fleetStatusHud .fsh-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } #fleetStatusHud .fsh-dot--green { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.9); } #fleetStatusHud .fsh-dot--orange { background: #fb923c; box-shadow: 0 0 8px rgba(251,146,60,0.85); } #fleetStatusHud .fsh-dot--red { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.85); } #fleetStatusHud .fsh-dot--live { background: #38bdf8; box-shadow: 0 0 9px rgba(56,189,248,0.95); animation: fshPulse 1.8s ease-in-out infinite; } #fleetStatusHud .fsh-mode .fsh-lbl { color: #7dd3fc; font-weight: 600; opacity: 0.95; } #fleetStatusHud .fsh-chip.fsh-live .fsh-dot { animation: fshPulse 2.2s ease-in-out infinite; } @keyframes fshPulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.35); filter: brightness(1.5); } } #fleetStatusHud .fsh-sep { width: 1px; height: 16px; background: linear-gradient(180deg, transparent, rgba(59,130,246,0.6), transparent); } #fleetStatusHud .fsh-coords { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 10.5px; color: #7dd3fc; text-shadow: 0 0 8px rgba(125,211,252,0.35); min-width: 132px; text-align: right; } /* Dégradation progressive pour ne JAMAIS chevaucher les boutons sur écran étroit : * <1500px on masque les libellés (les puces+compteurs parlent d'eux-mêmes), * <1320px on masque les coords (dispo au survol via le panneau outils SIG), * <1120px on masque la pastille Direct -> le HUD reste un trio de puces compact. */ @media (max-width: 1500px) { #fleetStatusHud .fsh-lbl { display: none; } } @media (max-width: 1320px) { #fleetStatusHud .fsh-coords, #fleetStatusHud .fsh-sep { display: none; } } @media (max-width: 1120px) { #fleetStatusHud .fsh-mode { display: none; } }