diff --git a/src/styles/map.css b/src/styles/map.css
index 2f10f6d..941f3c9 100644
--- a/src/styles/map.css
+++ b/src/styles/map.css
@@ -384,4 +384,28 @@ body[data-theme="light"] .sw-search-clear{
 .maplibregl-ctrl-zoom-out{
   display:none !important;
 }
+/* FIX FINAL : Texte blanc sur boutons MY SPOT / NEW WIRE (force le texte) */
+.map-action-btn,
+.map-action-btn * {
+  color: #e5e7eb !important; /* blanc forcé */
+}
+/* FIX FINAL : Texte noir sous thème Blue (comme Light) */
+body[data-theme="blue"] .map-action-btn,
+body[data-theme="blue"] .map-action-btn * {
+  color: #0b1220 !important; /* noir forcé */
+}
+/* Light theme : texte noir si besoin */
+body[data-theme="light"] .map-action-btn,
+body[data-theme="light"] .map-action-btn * {
+  color: #0b1220 !important;
+}
 
+/* FIX FINAL : Supprime le spot blanc MapLibre (cercle blanc en bas à droite) */
+.maplibregl-ctrl-bottom-right,
+.maplibregl-ctrl-group {
+  display: none !important;
+}
+.maplibregl-ctrl {
+  background: transparent !important;
+  box-shadow: none !important;
+}
diff --git a/src/styles/map.css.bak b/src/styles/map.css.bak
new file mode 100644
index 0000000..2f10f6d
--- /dev/null
+++ b/src/styles/map.css.bak
@@ -0,0 +1,387 @@
+:root{
+  --sw-subcats-nudge: -45px; /* subcats vertical nudge */
+  --sw-below-overlap: 40px;  /* wall overlaps map a bit */
+}
+
+.map-page{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+
+/* Map stage first */
+.map-stage{
+  position:relative;
+  width:100%;
+  height: clamp(520px, 72vh, 860px);
+}
+
+/* Landscape: vh is small, reduce min height */
+@media (orientation: landscape){
+  :root{ --sw-below-overlap: 22px; }
+  .map-stage{ height: clamp(360px, 62vh, 720px); }
+}
+
+.map-container,
+.maplibre-container{
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+}
+
+.map-status{
+  position:absolute;
+  left:.5rem;
+  bottom:.5rem;
+  font-size:.7rem;
+  padding:.2rem .4rem;
+  background:rgba(0,0,0,.6);
+  border-radius:.5rem;
+  z-index:30;
+}
+
+/* BELOW MAP (scroll area) – pulled up slightly over map */
+.below-stage{
+  margin-top: calc(var(--sw-below-overlap) * -1);
+  position:relative;
+  z-index:25;
+  padding: .25rem .7rem 1.0rem;
+}
+
+.below-row{
+  display:flex;
+  gap:.6rem;
+  align-items:stretch;
+  min-width:0;
+}
+
+/* stack only ultra-small (NOT normal portrait phones) */
+@media (max-width: 340px){
+  .below-row{ flex-direction:column; }
+}
+
+/* ======== OVERLAYS ======== */
+
+.map-overlay{
+  position:absolute;
+  pointer-events:none;
+  z-index:40;
+}
+.map-overlay *{ pointer-events:auto; }
+
+/* TOP: centré horizontalement, petit offset en haut */
+.map-overlay-top{
+  top: .7rem;
+  left:50%;
+  transform:translateX(-50%);
+  max-width: min(980px, calc(100vw - 24px));
+  width:100%;
+}
+
+/* Left / right: filtres */
+.map-overlay-left{
+  left:.7rem;
+  top:44%;
+  transform:translateY(-50%);
+  display:flex;
+  flex-direction:column;
+  gap:.5rem;
+}
+.map-overlay-right{
+  right:.7rem;
+  top:44%;
+  transform:translateY(-50%);
+  display:flex;
+  flex-direction:column;
+  gap:.5rem;
+}
+
+/* BOTTOM: sub-cats au-dessus du Sociowall */
+.map-overlay-bottom{
+  bottom: calc(3.2rem + var(--sw-below-overlap, 0px) + env(safe-area-inset-bottom) + var(--sw-subcats-nudge, 0px));
+  left:50%;
+  transform:translateX(-50%);
+  display:flex;
+  gap:.4rem;
+}
+
+/* Crosshair pour création */
+.map-crosshair{
+  left:50%;
+  top:40%;
+  transform:translate(-50%,-50%);
+}
+.crosshair-aim{
+  width:34px;
+  height:34px;
+  border-radius:999px;
+  border:1px solid #38bdf8;
+  position:relative;
+  box-shadow:0 0 14px rgba(56,189,248,.9);
+}
+.crosshair-aim::before,
+.crosshair-aim::after{
+  content:"";
+  position:absolute;
+  left:50%;
+  top:50%;
+  background:#38bdf8;
+  transform:translate(-50%,-50%);
+}
+.crosshair-aim::before{
+  width:70%;
+  height:1px;
+}
+.crosshair-aim::after{
+  width:1px;
+  height:70px;
+}
+
+/* Panneau de création */
+.create-post-panel{
+  left:50%;
+  bottom:20%;
+  transform:translateX(-50%);
+  width:92%;
+  max-width:520px;
+  background: rgba(15, 23, 42, 0.96);
+  border-radius:16px;
+  border:1px solid rgba(148, 163, 184, 0.9);
+  box-shadow: 0 16px 40px rgba(0,0,0,.9), 0 0 24px rgba(56,189,248,.6);
+  padding: .6rem .7rem .7rem;
+}
+.create-post-header{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  font-size:.8rem;
+  margin-bottom:.4rem;
+  color:#e5e7eb;
+}
+.create-close{
+  background:transparent;
+  border:none;
+  color:#9ca3af;
+  font-size:.85rem;
+  padding:.1rem .3rem;
+  cursor:pointer;
+}
+.create-row{
+  display:flex;
+  align-items:center;
+  gap:.5rem;
+  margin-bottom:.4rem;
+}
+.crosshair-label{
+  font-size:.75rem;
+  color:#cbd5f5;
+}
+
+.create-row select{
+  flex:1;
+  background:#020617;
+  border-radius:999px;
+  border:1px solid #4b5563;
+  padding:.35rem .7rem;
+  font-size:.75rem;
+  color:#e5e7eb;
+}
+.create-input{
+  width:100%;
+  margin-bottom:.3rem;
+  border-radius:999px;
+  border:1px solid #4b5563;
+  padding:.35rem .7rem;
+  background:#020617;
+  color:#e5e7eb;
+  font-size:.8rem;
+}
+.create-textarea{
+  width:100%;
+  border-radius:.75rem;
+  border:1px solid #4b5563;
+  padding:.35rem .7rem;
+  background:#020617;
+  color:#e5e7eb;
+  resize:none;
+  font-size:.78rem;
+}
+.create-error{
+  margin-top:.25rem;
+  font-size:.7rem;
+  color:#f97373;
+}
+.create-actions{
+  margin-top:.4rem;
+  display:flex;
+  justify-content:flex-end;
+}
+
+.chip-pill{
+  background: rgba(15, 23, 42, 0.96);
+  border: 1px solid rgba(148, 163, 184, 0.85);
+  color: #e5e7eb;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.78rem;
+  border-radius: 999px;
+  cursor: pointer;
+  box-shadow: 0 5px 12px rgba(0,0,0,.7), 0 0 12px rgba(56,189,248,.35);
+}
+
+/* ===== SEARCHBAR TOP ===== */
+
+.sw-searchbar{
+  pointer-events: auto;
+  display:flex;
+  align-items:center;
+  gap: .55rem;
+  padding: 0.42rem 0.70rem;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.92);
+  border: 1px solid rgba(148, 163, 184, 0.85);
+  box-shadow: 0 5px 12px rgba(0,0,0,.70), 0 0 14px rgba(56,189,248,.22);
+  backdrop-filter: blur(10px);
+  min-height: 38px;
+  width: 100%;          /* ✅ prend toute la largeur de son conteneur */
+}
+
+.sw-searchbar:focus-within{
+  border-color: rgba(56,189,248,.85);
+  box-shadow: 0 8px 18px rgba(0,0,0,.72), 0 0 18px rgba(56,189,248,.35);
+}
+
+.sw-search-icon{
+  font-size: 14px;
+  opacity: .95;
+}
+
+.sw-search-input{
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #e5e7eb;
+  font-size: 0.80rem;
+  font-weight: 800;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-search-input::placeholder{
+  color: rgba(203, 213, 225, 0.88);
+  font-weight: 800;
+}
+
+.sw-search-clear{
+  border: none;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: rgba(2,6,23,.35);
+  border: 1px solid rgba(148,163,184,.35);
+  color: #e5e7eb;
+  font-weight: 900;
+  display:grid;
+  place-items:center;
+}
+.sw-search-clear:active{
+  transform: scale(0.97);
+}
+
+/* Light theme */
+body[data-theme="light"] .sw-searchbar{
+  background: rgba(255,255,255,0.92);
+  border-color: rgba(148, 163, 184, 0.85);
+  box-shadow: 0 8px 18px rgba(0,0,0,.10);
+}
+body[data-theme="light"] .sw-search-input{
+  color:#0B1220;
+}
+body[data-theme="light"] .sw-search-input::placeholder{
+  color: rgba(91, 103, 122, 0.92);
+}
+body[data-theme="light"] .sw-search-clear{
+  background: rgba(255,255,255,.85);
+  color:#0B1220;
+  border-color: rgba(148,163,184,.55);
+}
+
+/* ===== TOP ROW: search + 2 icônes ===== */
+
+/* Ligne entière */
+.sw-top-row{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:0.75rem;
+  width:100%;
+}
+
+/* ✅ Search = prend tout, icônes juste ce qu’il faut */
+.sw-top-search{
+  flex: 1 1 auto;
+  max-width: 100%;
+}
+
+/* bloc des 2 boutons à droite, taille compacte */
+.map-top-actions{
+  flex: 0 0 auto;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:flex-end;
+  gap:0.5rem;
+}
+
+/* boutons icône */
+.map-action-btn{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  padding:0.35rem 0.55rem;
+  border-radius:999px;
+  border:1px solid rgba(255,255,255,0.15);
+  background:rgba(5, 25, 60, 0.25);
+  backdrop-filter:blur(8px);
+  box-shadow:0 6px 14px rgba(0,0,0,0.35);
+  font-size:0.7rem;
+  line-height:1.1;
+  cursor:pointer;
+  white-space:nowrap;
+}
+
+.map-action-btn:disabled{
+  opacity:0.45;
+  cursor:default;
+}
+
+.map-action-icon{
+  font-size:1.05rem;
+  margin-bottom:0.15rem;
+}
+
+.map-action-label{
+  font-size:0.6rem;
+  text-transform:uppercase;
+  letter-spacing:0.04em;
+}
+
+/* petits écrans : on compresse un peu les boutons */
+@media (max-width:480px){
+  .sw-top-row{
+    gap:0.5rem;
+  }
+  .map-action-btn{
+    padding:0.3rem 0.45rem;
+  }
+}
+
+/* === CACHER LES BOUTONS DE ZOOM MAPLIBRE (+/-) === */
+.maplibregl-ctrl-zoom-in,
+.maplibregl-ctrl-zoom-out{
+  display:none !important;
+}
+