fix: migration hostnames hub point->tiret + bouton repli sidebar

static/css/style.css

@@ -33,16 +33,25 @@ html, body {
   flex-direction: column;
   user-select: none;
   z-index: 20;
-  transition: width 0.2s ease;
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
 }
 
 .hub-brand {
   height: var(--hub-header-height);
-  padding: 0 1.25rem;
+  padding: 0 0.85rem 0 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--hub-border-subtle);
+  overflow: hidden;
+}
+
+.hub-brand-left {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  border-bottom: 1px solid var(--hub-border-subtle);
+  overflow: hidden;
 }
 
 .hub-logo-icon {
@@ -57,6 +66,7 @@ html, body {
   font-size: 1rem;
   color: #ffffff;
   box-shadow: 0 0 12px var(--hub-accent-glow-current);
+  flex-shrink: 0;
 }
 
 .hub-brand-text {
@@ -64,6 +74,7 @@ html, body {
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--hub-text-primary);
+  white-space: nowrap;
 }
 
 .hub-brand-badge {
@@ -75,6 +86,33 @@ html, body {
   border-radius: var(--hub-radius-full);
   color: var(--hub-text-secondary);
   border: 1px solid var(--hub-border-subtle);
+  white-space: nowrap;
+}
+
+/* Sidebar Collapse Toggle Button */
+.hub-collapse-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--hub-radius-sm);
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--hub-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.hub-collapse-btn:hover {
+  background-color: var(--hub-bg-card-hover);
+  color: var(--hub-text-primary);
+  border-color: var(--hub-border-subtle);
+}
+
+.hub-collapse-icon {
+  transition: transform 0.2s ease;
 }
 
 /* Universes Switcher List */
@@ -85,6 +123,7 @@ html, body {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--hub-text-muted);
+  white-space: nowrap;
 }
 
 .hub-universes-list {
@@ -95,6 +134,7 @@ html, body {
   gap: 0.35rem;
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .hub-universe-btn {
@@ -216,6 +256,7 @@ html, body {
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s ease;
+  white-space: nowrap;
 }
 
 .hub-tool-btn:hover {
@@ -223,6 +264,54 @@ html, body {
   color: var(--hub-text-primary);
 }
 
+/* =========================================================================
+   Collapsed Sidebar State
+   ========================================================================= */
+.hub-sidebar.collapsed {
+  width: var(--hub-sidebar-collapsed-width);
+}
+
+.hub-sidebar.collapsed .hub-brand {
+  padding: 0;
+  justify-content: center;
+}
+
+.hub-sidebar.collapsed .hub-brand-left,
+.hub-sidebar.collapsed .hub-nav-section,
+.hub-sidebar.collapsed .hub-universe-info,
+.hub-sidebar.collapsed .hub-sidebar-footer .hub-tool-btn span:last-child {
+  display: none;
+}
+
+.hub-sidebar.collapsed .hub-collapse-btn {
+  width: 36px;
+  height: 36px;
+}
+
+.hub-sidebar.collapsed .hub-collapse-icon {
+  transform: rotate(180deg);
+}
+
+.hub-sidebar.collapsed .hub-universe-btn {
+  padding: 0.65rem 0;
+  justify-content: center;
+}
+
+.hub-sidebar.collapsed .hub-universe-btn.active::before {
+  left: -0.25rem;
+}
+
+.hub-sidebar.collapsed .hub-status-dot {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+}
+
+.hub-sidebar.collapsed .hub-sidebar-footer .hub-tool-btn {
+  padding: 0.5rem 0;
+  justify-content: center;
+}
+
 /* Main View Area */
 .hub-main {
   flex: 1;
@@ -231,6 +320,7 @@ html, body {
   height: 100%;
   overflow: hidden;
   background-color: var(--hub-bg-canvas);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Universe Topbar */