From 1e1f74096c6da6e5bd23438cdf8e29ef1c933b00 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 20 Dec 2025 23:01:13 -0500
Subject: [PATCH] update frontend

---
 src/styles/overlays.css | 64 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/src/styles/overlays.css b/src/styles/overlays.css
index bb73caa..7afcd67 100644
--- a/src/styles/overlays.css
+++ b/src/styles/overlays.css
@@ -267,3 +267,67 @@ body[data-theme="light"] .sw-search-clear{
     font-size:0.75rem;
   }
 }
+
+/* === Top bar : 75% search / 25% boutons === */
+
+.map-overlay-top{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:space-between;
+  gap:0.75rem;
+}
+
+/* Search = 75% */
+.map-overlay-top .sw-searchbar{
+  flex:0 0 75%;
+  max-width:75%;
+}
+
+/* Bloc 2 boutons = 25% */
+.map-overlay-top .map-top-actions{
+  flex:0 0 25%;
+  max-width:25%;
+  display:flex;
+  justify-content:flex-end;
+  gap:0.5rem;
+}
+
+/* === Style des deux boutons à droite === */
+.map-top-actions .map-action-btn{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  padding:0.35rem 0.55rem;
+  border-radius:999px;                    /* pastille bien ronde */
+  background:rgba(5, 25, 60, 0.25);       /* fond presque transparent */
+  border:1px solid rgba(255,255,255,0.15);
+  box-shadow:0 6px 14px rgba(0,0,0,0.35);
+  backdrop-filter:blur(8px);              /* effet verre comme le reste */
+}
+
+/* Icône Font Awesome */
+.map-top-actions .map-action-btn i{
+  display:block;
+  font-size:1.05rem;
+  margin-bottom:0.15rem;
+}
+
+/* Texte sous l’icône (MY SPOT / NEW WIRE) */
+.map-top-actions .map-action-btn span{
+  font-size:0.65rem;
+  font-weight:600;
+  letter-spacing:0.03em;
+}
+
+/* Petits écrans */
+@media (max-width:480px){
+  .map-overlay-top{
+    gap:0.4rem;
+  }
+
+  .map-top-actions .map-action-btn{
+    padding:0.3rem 0.45rem;
+  }
+}