update frontend

src/styles/overlays.css

@@ -1,6 +1,7 @@
 /* ==========================================
-   SOCIOWIRE — OVERLAYS (TOP / LEFT / RIGHT /
+   SOCIOWIRE — OVERLAYS AUTOUR DE LA MAP
-   BOTTOM / MY SPOT / CREATE PANEL)
+   (TOP / LEFT / RIGHT / BOTTOM / MY SPOT /
+   CREATE PANEL)
    ========================================== */
 
 .map-overlay {
@@ -13,7 +14,7 @@
   pointer-events: auto;
 }
 
-/* --------- TOP --------- */
+/* --------- TOP : "Look at..." + "Place your wire" --------- */
 
 .map-overlay-top {
   top: 0.7rem;
@@ -24,19 +25,25 @@
   align-items: center;
 }
 
-.lookat-box {
+.chip-pill {
-  /* maintenant on utilise un bouton chip, cette classe sert juste au texte au centre si besoin */
+  background: radial-gradient(circle at 30% 30%, #0f172a, #020617);
-  font-size: 0.75rem;
+  border: 1px solid rgba(148, 163, 184, 0.9);
-  color: #93c5fd;
+  color: #e5e7eb;
+  padding: 0.45rem 1.1rem;
+  font-size: 0.8rem;
+  border-radius: 999px;
+  cursor: pointer;
+  box-shadow:
+    0 6px 16px rgba(0, 0, 0, 0.85),
+    0 0 16px rgba(56, 189, 248, 0.4);
 }
 
-.wire-title {
+.chip-pill:first-child {
-  font-size: 0.75rem;
+  /* "Look at..." un peu plus large, façon bannière */
-  opacity: 0.9;
+  padding-inline: 1.4rem;
-  color: #93c5fd;
 }
 
-/* --------- LEFT --------- */
+/* --------- LEFT : filtres temps (Now / Today / Recently / Past) --------- */
 
 .map-overlay-left {
   left: 0.7rem;
@@ -44,10 +51,23 @@
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.55rem;
 }
 
-/* --------- RIGHT --------- */
+.chip-round {
+  background: radial-gradient(circle at 30% 30%, #020617, #020617);
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.9);
+  color: #e5e7eb;
+  padding: 0.5rem 1rem;
+  font-size: 0.78rem;
+  cursor: pointer;
+  box-shadow:
+    0 5px 14px rgba(0, 0, 0, 0.8),
+    0 0 14px rgba(56, 189, 248, 0.35);
+}
+
+/* --------- RIGHT : filtres principaux (All / News / Friends / Events / Market) --------- */
 
 .map-overlay-right {
   right: 0.7rem;
@@ -55,17 +75,19 @@
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.55rem;
 }
 
-/* Bouton principal sélectionné */
+/* Quand un bouton est sélectionné (temps ou catégorie) */
 .chip-selected {
-  background: linear-gradient(135deg, #2563eb, #0ea5e9);
+  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
   border-color: #7dd3fc;
-  box-shadow: 0 0 20px rgba(56, 189, 248, 0.55);
+  box-shadow:
+    0 0 20px rgba(56, 189, 248, 0.55),
+    0 8px 22px rgba(0, 0, 0, 0.9);
 }
 
-/* --------- BOTTOM — ARC (INVERSE AUTOUR DU GLOBE) --------- */
+/* --------- BOTTOM : sous-catégories en arc --------- */
 
 .map-overlay-bottom {
   bottom: 3.2rem;
@@ -75,35 +97,55 @@
   gap: 0.4rem;
 }
 
-/* courbure inversée : centre plus bas, côtés plus hauts */
+.chip-egg {
+  background: rgba(0, 10, 30, 0.95);
+  border-radius: 999px;
+  border: 1px solid rgba(56, 189, 248, 0.55);
+  color: #e5e7eb;
+  padding: 0.4rem 0.9rem;
+  font-size: 0.78rem;
+  cursor: pointer;
+  box-shadow:
+    0 5px 14px rgba(0, 0, 0, 0.8),
+    0 0 14px rgba(56, 189, 248, 0.4);
+}
+
+/* effet de courbe autour du bas de la carte
+   (5 premiers œufs, les autres restent droits) */
 .map-overlay-bottom .chip-egg:nth-child(1) {
-  transform: translateY(-8px) rotate(-12deg);
+  transform: translateY(-10px) rotate(-14deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(2) {
-  transform: translateY(-4px) rotate(-6deg);
+  transform: translateY(-6px) rotate(-7deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(3) {
-  transform: translateY(0px) rotate(0deg);
+  transform: translateY(-2px) rotate(0deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(4) {
-  transform: translateY(-4px) rotate(6deg);
+  transform: translateY(-6px) rotate(7deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(5) {
-  transform: translateY(-8px) rotate(12deg);
+  transform: translateY(-10px) rotate(14deg);
+}
+
+/* œuf sélectionné */
+.chip-egg-active {
+  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
+  border-color: #7dd3fc;
 }
 
 /* --------- BOUTON "MY SPOT" --------- */
 
 .map-overlay-myloc {
   right: 0.7rem;
-  bottom: 6rem;
+  bottom: 6.2rem;
 }
 
-/* --------- CROSSHAIR SUR LA MAP --------- */
+/* --------- CROSSHAIR (si tu le remets plus tard) --------- */
 
 .map-crosshair {
   left: 50%;
-  top: 40%; /* au-dessus du popup */
+  top: 40%;
   transform: translate(-50%, -50%);
 }
 
@@ -136,7 +178,7 @@
   height: 70%;
 }
 
-/* --------- CREATE POST PANEL (1/5 du bas) --------- */
+/* --------- CREATE POST PANEL (fenêtre 1/5 du bas) --------- */
 
 .create-post-panel {
   left: 50%;
@@ -173,16 +215,16 @@
   cursor: pointer;
 }
 
+.crosshair-label {
+  font-size: 0.75rem;
+  color: #cbd5f5;
+}
+
 .create-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.4rem;
+  margin: 0.35rem 0;
-}
-
-.crosshair-label {
-  font-size: 0.75rem;
-  color: #cbd5f5;
 }
 
 .create-row select {
@@ -228,35 +270,3 @@
   display: flex;
   justify-content: flex-end;
 }
-
-/* --------- STYLES DES CHIPS --------- */
-
-.chip-round,
-.chip-pill,
-.chip-egg,
-.chip-hex {
-  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, 0.7),
-    0 0 12px rgba(56, 189, 248, 0.35);
-}
-
-.chip-egg {
-  background: rgba(0, 10, 30, 0.9);
-  border: 1px solid rgba(56, 189, 248, 0.55);
-}
-
-.chip-egg-active {
-  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
-  border-color: #7dd3fc;
-}
-
-.chip-hex {
-  border-radius: 0.65rem;
-}