diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css
index 854bdd7..8415fbb 100644
--- a/src/styles/mapMarkers.css
+++ b/src/styles/mapMarkers.css
@@ -1,9 +1,13 @@
-/* Ne PAS toucher au transform du marker : MapLibre gère la position. */
+/* Le conteneur du pin : MapLibre gère la position/transform */
 .post-pin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   pointer-events: auto;
 }
 
-/* Bulle principale (état compact) */
+/* ===== PETIT POST (compact) ===== */
+
 .post-pin-bubble {
   display: inline-flex;
   align-items: center;
@@ -14,7 +18,6 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-/* Petit rond à gauche */
 .post-pin-dot {
   width: 10px;
   height: 10px;
@@ -23,7 +26,6 @@
   margin-right: 6px;
 }
 
-/* Texte compact */
 .post-pin-text {
   color: #e8f5ff;
   font-size: 11px;
@@ -34,23 +36,31 @@
   text-overflow: ellipsis;
 }
 
-/* Petite pointe qui touche la coordonnée */
+/* PETITE POINTE sous la bulle – pointe exactement sur la coordonnée */
 .post-pin-pointer {
   width: 0;
   height: 0;
-  margin: 0 auto;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 7px solid rgba(6, 40, 80, 0.95);
+  margin-top: 2px;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 9px solid rgba(6, 40, 80, 0.95); /* couleur de la bulle */
+  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
 }
 
-/* ÉTAT AGRANDI */
+/* ===== GROS POST (quand on clique) ===== */
+
 .post-pin.post-pin-expanded .post-pin-bubble {
-  border-radius: 10px;
-  max-width: 220px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  max-width: 260px;
+  background: rgba(8, 20, 40, 0.98);
 }
 
+/* Titre + texte multi-ligne comme ta maquette */
 .post-pin.post-pin-expanded .post-pin-text {
   white-space: normal;
-  max-width: 220px;
+  max-width: 260px;
+  line-height: 1.35;
 }
+
+/* On garde la même pointe, donc le gros post pointe toujours sur la position */