diff --git a/src/styles/layout.css b/src/styles/layout.css
index 2d1f74a..41f23aa 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -1,45 +1,82 @@
 .app-root{ min-height:100vh; display:flex; flex-direction:column; }
-
-/* allow full page scroll */
 .main-shell{ flex: 1 0 auto; display:block; padding:0; }
+.map-shell{ position:relative; width:100%; height:auto; overflow:visible; border:none; background:transparent; }
 
-/* DO NOT clip MapView (it contains map + below-stage) */
-.map-shell{
-  position:relative;
-  width:100%;
-  height:auto;
-  overflow:visible;
-  border:none;
-  background:transparent;
-}
-
-/* Barre en bas transparente */
-.bottom-bar {
+/* Bouton Contacts flottant en bas à droite */
+.contacts-float-btn {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 50px;
-  background: transparent; /* fond complètement supprimé */
-  backdrop-filter: blur(20px); /* effet verre fort */
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 16px;
-  z-index: 50;
-  transition: transform 0.3s ease;
-}
-
-.bottom-left, .bottom-right {
+  bottom: 16px;
+  right: 16px;
+  padding: 8px 12px;
+  background: rgba(30, 41, 59, 0.8);
+  border-radius: 999px;
+  color: #e5e7eb;
+  font-size: 13px;
+  font-weight: 600;
   display: flex;
   align-items: center;
   gap: 6px;
-  overflow-x: auto;
-  white-space: nowrap;
-  max-width: 45%;
+  z-index: 51;
+  border: none;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
 }
 
-.bottom-chat {
+.contact-icon { font-size: 16px; }
+
+/* Liste des contacts (dropdown) */
+.contacts-dropdown {
+  position: fixed;
+  bottom: 70px;
+  right: 16px;
+  background: rgba(30, 41, 59, 0.95);
+  border-radius: 12px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 52;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #e5e7eb;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+
+.contact-item:hover {
+  background: rgba(56,189,248,0.2);
+}
+
+.contact-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #38bdf8;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+/* Bulles de chats actifs flottantes à côté du bouton */
+.active-chats-bubbles {
+  position: fixed;
+  bottom: 16px;
+  right: 140px; /* décalage pour être à côté du bouton Contacts */
+  display: flex;
+  gap: 6px;
+  z-index: 51;
+}
+
+.chat-bubble {
   padding: 4px 10px;
   background: rgba(30, 41, 59, 0.8);
   border-radius: 999px;
@@ -49,7 +86,8 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  position: relative;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  backdrop-filter: blur(10px);
 }
 
 .chat-avatar {
@@ -65,13 +103,13 @@
 }
 
 .chat-name {
-  max-width: 120px;
+  max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.bottom-remove {
+.bubble-remove {
   background: red;
   border: none;
   color: white;
@@ -82,24 +120,5 @@
   cursor: pointer;
 }
 
-.bottom-contact {
-  padding: 4px 10px;
-  background: rgba(30, 41, 59, 0.8);
-  border-radius: 999px;
-  color: #e5e7eb;
-  font-size: 13px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-}
-
-.contact-icon { font-size: 16px; }
-.contact-text { font-weight: 700; }
-.contact-online { font-size: 11px; opacity: 0.8; }
-
-/* Espace pour la barre */
-.below-stage {
-  padding-bottom: 60px;
-}
\ No newline at end of file
+/* Espace pour les bulles */
+.below-stage { padding-bottom: 70px; }
\ No newline at end of file