Auto deploy: 2025-12-09 05:52:24

src/styles/mapLayout.css

@@ -1,215 +1,93 @@
+/* Le conteneur global */
 .map-view {
   position: relative;
   width: 100%;
-  height: calc(100vh - 72px);
+  height: 100vh;
   background: #020814;
 }
 
-/* On laisse ~80px en haut pour les boutons,
+/* La map DOIT couvrir tout l'écran, sauf un petit espace pour la top bar */
-   la map commence plus bas → les posts ne collent plus au top. */
 .map-container {
   position: absolute;
-  inset: 80px 8px 12px 8px;
+  top: 70px;          /* ← espace pour les boutons */
-  border-radius: 18px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 12px;
   overflow: hidden;
+  background: black;
 }
 
-/* Overlays génériques */
+/* Overlays flottants */
 .map-overlay {
   position: absolute;
-  z-index: 10;
+  z-index: 20;
   pointer-events: none;
 }
 
-.map-overlay button,
+.map-overlay * {
-.map-overlay .chip-pill,
-.map-overlay .chip-round,
-.map-overlay .chip-egg {
   pointer-events: auto;
 }
 
-/* TOP BAR : Look at, Place your wire, Zoom In/Out, Swall, New post */
+/* TOP BAR FIXE */
 .map-overlay-top {
-  top: 12px;
+  top: 10px;
-  left: 12px;
+  left: 10px;
-  right: 12px;
+  right: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
 }
 
-.lookat-box {
+/* Boutons */
-  min-width: 90px;
+.chip-pill, .chip-round, .chip-egg, .chip-hex {
-  padding: 6px 10px;
+  background: rgba(8,32,72,0.9);
   border-radius: 999px;
-  background: rgba(4, 24, 52, 0.96);
   color: #e8f3ff;
-  font-size: 11px;
-  font-weight: 500;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
-  white-space: nowrap;
-}
-
-.wire-title {
-  flex: 1;
-  text-align: center;
-  color: #7fb7ff;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.zoom-buttons {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.top-newpost {
-  margin-left: 6px;
-}
-
-/* Style de base pour chips */
-.chip-hex,
-.chip-pill,
-.chip-round,
-.chip-egg {
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background: rgba(8, 32, 72, 0.96);
-  color: #f0f7ff;
-  font-size: 11px;
-  font-weight: 500;
-  border-radius: 999px;
   padding: 6px 12px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
+  font-size: 12px;
+  border: none;
+  cursor: pointer;
 }
 
-.chip-selected {
+/* LEFT = time filters */
-  background: #1c9dff;
-  color: #04101f;
-}
-
-/* LEFT time filters */
 .map-overlay-left {
+  top: 100px;
   left: 16px;
-  top: 96px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
-/* RIGHT main filters */
+/* RIGHT = category filters */
 .map-overlay-right {
+  top: 100px;
   right: 16px;
-  top: 96px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
-/* BOTTOM subcategories */
+/* Bottom subcategories */
 .map-overlay-bottom {
+  bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 20px;
   display: flex;
-  gap: 12px;
+  gap: 10px;
 }
 
-/* MY SPOT */
+/* Crosshair */
-.map-overlay-myloc {
-  right: 16px;
-  bottom: 80px;
-}
-
-/* CROSSHAIR */
 .map-crosshair {
   top: 50%;
   left: 50%;
-  width: 0;
+  position: absolute;
-  height: 0;
   transform: translate(-50%, -50%);
 }
 
 .crosshair-aim {
-  width: 22px;
+  width: 20px;
-  height: 22px;
+  height: 20px;
   border-radius: 999px;
   border: 2px solid #1c9dff;
-  box-shadow: 0 0 12px rgba(28, 157, 255, 0.9);
-  box-sizing: border-box;
-}
-
-/* PANEL CREATE POST */
-.create-post-panel {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 10px 14px 14px;
-  background: linear-gradient(
-    to top,
-    rgba(2, 8, 20, 0.98),
-    rgba(2, 8, 20, 0.92),
-    transparent
-  );
-}
-
-.create-post-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #dfeeff;
-  font-size: 12px;
-  margin-bottom: 6px;
-}
-
-.create-close {
-  border: none;
-  background: transparent;
-  color: #9fb7ff;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.create-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.crosshair-label {
-  font-size: 11px;
-  color: #9bb7ff;
-}
-
-.create-input,
-.create-textarea,
-.create-row select {
-  width: 100%;
-  border-radius: 8px;
-  border: 1px solid #23426b;
-  background: rgba(3, 15, 32, 0.95);
-  color: #e8f3ff;
-  font-size: 12px;
-  padding: 5px 7px;
-  box-sizing: border-box;
-}
-
-.create-textarea {
-  resize: vertical;
-}
-
-.create-error {
-  color: #ff6f6f;
-  font-size: 11px;
-  margin-top: 4px;
-}
-
-.create-actions {
-  margin-top: 6px;
-  display: flex;
-  justify-content: flex-end;
 }