fix: corriger le masquage du bas de l'app par la barre Android

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.css

@@ -10,14 +10,14 @@ body {
 .app {
   position: relative;
   width: 100vw;
-  height: 100vh;
+  height: 100dvh; /* dvh = dynamic, s'adapte à la barre d'adresse mobile */
 }
 
 /* ── Boutons flottants (signalement + info) ── */
 .app__actions {
   position: absolute;
-  bottom: 14px;
-  left: 16px;
+  bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
+  left: max(16px, calc(16px + env(safe-area-inset-left)));
   display: flex;
   flex-direction: column;
   gap: 8px;

frontend/src/components/Map/SargassesMap.css

@@ -1,7 +1,7 @@
 /* ── Placeholder avant chargement du style ── */
 .smap-placeholder {
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   background: #3ab5e6; /* couleur océan = pas de flash blanc */
 }
 
@@ -19,8 +19,8 @@
 /* ── Indicateur fraîcheur données ── */
 .smap-freshness {
   position: absolute;
-  bottom: 28px;
-  left: 10px;
+  bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
+  left: max(10px, calc(10px + env(safe-area-inset-left)));
   background: rgba(255, 255, 255, 0.82);
   backdrop-filter: blur(4px);
   border-radius: 6px;
@@ -31,6 +31,12 @@
   z-index: 10;
 }
 
+/* NavigationControl MapLibre — remonte au-dessus de la barre Android */
+.maplibregl-ctrl-bottom-right {
+  bottom: env(safe-area-inset-bottom) !important;
+  right: env(safe-area-inset-right) !important;
+}
+
 /* ── Spot markers ── */
 .smap-marker {
   cursor: pointer;

frontend/src/components/Map/SargassesMap.jsx

@@ -271,7 +271,7 @@ export default function SargassesMap({ onSpotSelect, selectedSpotId, activeStep,
       onClick={() => onSpotSelect(null)}
       mapStyle={mapStyle}
       maxBounds={MAX_BOUNDS}
-      style={{ width: '100%', height: '100vh' }}
+      style={{ width: '100%', height: '100dvh' }}
     >
       <NavigationControl position="bottom-right" />
 

frontend/src/components/SpotPanel/SpotPanel.css

@@ -367,8 +367,10 @@
     transform: none;
     width: 100%;
     border-radius: 20px 20px 0 0;
-    max-height: 70vh;
+    max-height: 70dvh;
     overflow-y: auto;
+    /* Padding bas pour ne pas se faire couper par la barre Android */
+    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
   }
   .spot-panel__feedback-btns { flex-direction: column; }
   .spot-panel__details { grid-template-columns: 1fr; }