UX fix

static/map.js

@@ -310,6 +310,10 @@
     map.createPane('locatePane').style.zIndex = 650;
     L.control.zoom({ position: 'topright' }).addTo(map);
     var lastUpdatedText = (document.getElementById('last-updated') || {}).textContent || '';
+    var lastUpdatedMobile = document.getElementById('last-updated-mobile');
+    if (lastUpdatedMobile && lastUpdatedText) {
+      lastUpdatedMobile.textContent = lastUpdatedText;
+    }
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> | Données: <a href="https://regieessencequebec.ca">Régie de l\'énergie du Québec</a>' + (lastUpdatedText ? ' | ' + lastUpdatedText : ''),
       maxZoom: 18,

static/style.css

@@ -96,6 +96,11 @@ html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
 }
 #visible-count { margin-top: 6px; font-size: 11px; color: var(--muted-foreground); }
 
+/* Last-updated: only shown inside the mobile filter drawer */
+#last-updated-mobile {
+  display: none;
+}
+
 /* Map overlay panels — sit above the Leaflet tiles */
 .map-panel {
   background: var(--card);
@@ -315,6 +320,9 @@ html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
 @media (max-width: 768px) {
   #filter-toggle { display: flex; }
 
+  #filter-toggle,
+  #locate-btn { bottom: 24px; }
+
   #slider-panel {
     position: fixed;
     top: auto; left: 0; right: 0; bottom: 0;
@@ -367,4 +375,15 @@ html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
   .cluster-info-tip { display: none; }
   .cluster-hint { display: block; }
   .cluster-row { margin-bottom: 0; }
+
+  /* Hide Leaflet attribution bar on mobile */
+  .leaflet-control-attribution { display: none; }
+
+  /* Show last-updated inside the filter drawer */
+  #last-updated-mobile {
+    display: block;
+    margin-top: 6px;
+    font-size: 11px;
+    color: var(--muted-foreground);
+  }
 }

templates/map.html

@@ -55,6 +55,7 @@
       <span id="slider-max">-</span>
     </div>
     <div id="visible-count"></div>
+    <div id="last-updated-mobile"></div>
     <div id="legend">
       <div class="legend-header" id="legend-title">Régulier (¢/L)</div>
       <div class="legend-gradient"></div>
@@ -66,7 +67,7 @@
   </div>
 
   <div id="filter-backdrop"></div>
-  <button id="locate-btn" aria-label="Ma position" title="Ma position" style="position:absolute;bottom:34px;right:8px;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--card-foreground);box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer;z-index:1000;">
+  <button id="locate-btn" aria-label="Ma position" title="Ma position">
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
   </button>
   <div id="last-updated" hidden>{{.LastUpdated}}</div>