update frontend

src/styles/layout.css

@@ -12,3 +12,94 @@
   border:none;
   background:transparent;
 }
+
+/* Barre en bas transparente */
+.bottom-bar {
+  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 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow-x: auto;
+  white-space: nowrap;
+  max-width: 45%;
+}
+
+.bottom-chat {
+  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;
+  position: relative;
+}
+
+.chat-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #38bdf8;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.chat-name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bottom-remove {
+  background: red;
+  border: none;
+  color: white;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  font-size: 12px;
+  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;
+}