2025-12-27 02:10:44 +01:00
14 changed files with 3116 additions and 7 deletions
--- a/pmoapp/webapp/package-lock.json
+++ b/pmoapp/webapp/package-lock.json
@@ -8,6 +8,7 @@
      "name": "webapp",
      "version": "0.0.0",
      "dependencies": {
+        "@vueuse/core": "^14.1.0",
        "dompurify": "^3.2.7",
        "lucide-vue-next": "^0.555.0",
        "marked": "^16.3.0",
@@ -870,6 +871,12 @@
      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -1095,6 +1102,44 @@
        }
      }
    },
+    "node_modules/@vueuse/core": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz",
+      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.1.0",
+        "@vueuse/shared": "14.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.1.0.tgz",
+      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.1.0.tgz",
+      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
    "node_modules/alien-signals": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.0.0.tgz",
--- a/pmoapp/webapp/package.json
+++ b/pmoapp/webapp/package.json
@@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@vueuse/core": "^14.1.0",
    "dompurify": "^3.2.7",
    "lucide-vue-next": "^0.555.0",
    "marked": "^16.3.0",
@@ -18,8 +19,8 @@
    "vue-virtual-scroller": "^2.0.0-beta.8"
  },
  "devDependencies": {
-    "@types/node": "^22.0.0",
    "@types/dompurify": "^3.0.5",
+    "@types/node": "^22.0.0",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/tsconfig": "^0.8.1",
    "typescript": "~5.8.3",
--- a/pmoapp/webapp/src/assets/styles/glass-theme.css
+++ b/pmoapp/webapp/src/assets/styles/glass-theme.css
@@ -0,0 +1,430 @@
+/**
+ * Liquid Glass Theme - Glassmorphism Effects
+ * Style inspiré de macOS Big Sur et suivants
+ * Utilise backdrop-filter pour des effets de flou et transparence
+ */
+
+/* ========================================
+   CLASSES DE BASE GLASS
+   ======================================== */
+
+/* Panel glass standard (fond clair) */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow:
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+}
+
+/* Panel glass pour fond sombre */
+.glass-panel-dark {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 8px 32px 0 rgba(0, 0, 0, 0.37),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
+}
+
+/* Variantes d'intensité */
+.glass-subtle {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(10px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-medium {
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(15px) saturate(170%);
+  -webkit-backdrop-filter: blur(15px) saturate(170%);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.glass-strong {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(30px) saturate(200%);
+  -webkit-backdrop-filter: blur(30px) saturate(200%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+/* ========================================
+   BOUTONS GLASS
+   ======================================== */
+
+.glass-button {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(10px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.glass-button:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.glass-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.glass-button:disabled {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Bouton glass primary (avec couleur d'accent) */
+.glass-button-primary {
+  background: rgba(102, 126, 234, 0.3);
+  backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(10px) saturate(150%);
+  border: 1px solid rgba(102, 126, 234, 0.5);
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.glass-button-primary:hover {
+  background: rgba(102, 126, 234, 0.4);
+  border-color: rgba(102, 126, 234, 0.6);
+}
+
+/* ========================================
+   INPUTS GLASS
+   ======================================== */
+
+.glass-input {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  transition: all 0.3s ease;
+}
+
+.glass-input:focus {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(102, 126, 234, 0.5);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.glass-input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* ========================================
+   CARTES GLASS
+   ======================================== */
+
+.glass-card {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(15px) saturate(170%);
+  -webkit-backdrop-filter: blur(15px) saturate(170%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.glass-card:hover {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.18);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* ========================================
+   SLIDER GLASS (pour volume control)
+   ======================================== */
+
+.glass-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 8px;
+  height: 8px;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.glass-slider:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Thumb Webkit (Chrome, Safari) */
+.glass-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.glass-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+  box-shadow:
+    0 6px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.glass-slider::-webkit-slider-thumb:active {
+  transform: scale(1.1);
+}
+
+/* Thumb Mozilla */
+.glass-slider::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.glass-slider::-moz-range-thumb:hover {
+  transform: scale(1.2);
+}
+
+/* ========================================
+   OVERLAY GLASS (pour CurrentTrack)
+   ======================================== */
+
+.glass-overlay {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+}
+
+.glass-overlay::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
+  backdrop-filter: blur(0px);
+  -webkit-backdrop-filter: blur(0px);
+  transition: backdrop-filter 0.3s ease;
+  pointer-events: none;
+}
+
+.glass-overlay:hover::before {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* ========================================
+   UTILITAIRES
+   ======================================== */
+
+/* Backdrop blur seul */
+.glass-blur {
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.glass-blur-sm {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.glass-blur-lg {
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+}
+
+/* Saturation */
+.glass-saturate {
+  backdrop-filter: saturate(180%);
+  -webkit-backdrop-filter: saturate(180%);
+}
+
+/* Bordures glass */
+.glass-border {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.glass-border-subtle {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-border-strong {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Shadow glass */
+.glass-shadow {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+.glass-shadow-lg {
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
+}
+
+/* Inset shadow (lumière interne) */
+.glass-inset-light {
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+}
+
+/* ========================================
+   THÈME SOMBRE (prefers-color-scheme)
+   ======================================== */
+
+@media (prefers-color-scheme: dark) {
+  .glass-panel {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .glass-subtle {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .glass-medium {
+    background: rgba(0, 0, 0, 0.4);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .glass-strong {
+    background: rgba(0, 0, 0, 0.5);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .glass-button {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .glass-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+
+  .glass-card {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .glass-card:hover {
+    background: rgba(0, 0, 0, 0.4);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+}
+
+/* ========================================
+   FALLBACK (pas de backdrop-filter)
+   ======================================== */
+
+@supports not (backdrop-filter: blur(20px)) {
+  .glass-panel,
+  .glass-panel-dark,
+  .glass-subtle,
+  .glass-medium,
+  .glass-strong {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .glass-panel,
+    .glass-panel-dark,
+    .glass-subtle,
+    .glass-medium,
+    .glass-strong {
+      background: rgba(0, 0, 0, 0.95);
+    }
+  }
+
+  .glass-button,
+  .glass-button-primary {
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  .glass-card {
+    background: rgba(255, 255, 255, 0.98);
+  }
+
+  .glass-slider {
+    background: rgba(200, 200, 200, 0.8);
+  }
+}
+
+/* ========================================
+   ANIMATIONS
+   ======================================== */
+
+@keyframes glassShimmer {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+.glass-shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 200% 100%;
+  animation: glassShimmer 2s ease-in-out infinite;
+}
+
+/* ========================================
+   PERFORMANCE
+   ======================================== */
+
+/* GPU acceleration pour les éléments glass animés */
+.glass-panel,
+.glass-button,
+.glass-card,
+.glass-slider {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+/* Réduire l'animation sur préférence système */
+@media (prefers-reduced-motion: reduce) {
+  .glass-button,
+  .glass-card,
+  .glass-slider::-webkit-slider-thumb,
+  .glass-slider::-moz-range-thumb {
+    transition: none;
+  }
+
+  .glass-shimmer {
+    animation: none;
+  }
+}
--- a/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/TransportControls.vue
@@ -92,8 +92,103 @@ async function handleNext() {
 <style scoped>
 .transport-controls {
  display: flex;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-md);
  align-items: center;
  justify-content: center;
+  padding: var(--spacing-lg);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow:
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  .transport-controls {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+
+/* Boutons avec effet glass */
+.transport-controls .btn-icon {
+  width: 56px;
+  height: 56px;
+  min-width: 56px;
+  min-height: 56px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(10px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateZ(0);
+}
+
+.transport-controls .btn-icon:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.transport-controls .btn-icon:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.transport-controls .btn-icon:disabled {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Bouton primary (play) avec accent vert */
+.transport-controls .btn-primary {
+  background: rgba(34, 197, 94, 0.3);
+  border-color: rgba(34, 197, 94, 0.5);
+}
+
+.transport-controls .btn-primary:hover:not(:disabled) {
+  background: rgba(34, 197, 94, 0.4);
+  border-color: rgba(34, 197, 94, 0.6);
+}
+
+@media (prefers-color-scheme: dark) {
+  .transport-controls .btn-icon {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .transport-controls .btn-icon:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+}
+
+/* Fallback pour navigateurs sans backdrop-filter */
+@supports not (backdrop-filter: blur(20px)) {
+  .transport-controls {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  .transport-controls .btn-icon {
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .transport-controls {
+      background: rgba(0, 0, 0, 0.95);
+    }
+
+    .transport-controls .btn-icon {
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
 }
 </style>
--- a/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/VolumeControl.vue
@@ -83,16 +83,116 @@ async function handleToggleMute() {
  gap: var(--spacing-md);
  width: 100%;
  max-width: 300px;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }

+@media (prefers-color-scheme: dark) {
+  .volume-control {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+
+/* Bouton mute avec effet glass */
+.volume-control .btn-icon {
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.volume-control .btn-icon:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.volume-control .btn-icon:active {
+  transform: scale(1.0);
+}
+
+/* Slider avec effet glass */
 .volume-slider {
  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 8px;
+  height: 8px;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.volume-slider:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* Thumb Webkit (Chrome, Safari) */
+.volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+  box-shadow:
+    0 6px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.volume-slider::-webkit-slider-thumb:active {
+  transform: scale(1.1);
+}
+
+/* Thumb Mozilla */
+.volume-slider::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.volume-slider::-moz-range-thumb:hover {
+  transform: scale(1.2);
 }

 .volume-value {
  font-size: var(--text-sm);
  font-weight: 600;
-  color: var(--color-text-secondary);
+  color: var(--color-text);
  min-width: 2.5rem;
  text-align: right;
 }
@@ -100,5 +200,53 @@ async function handleToggleMute() {
 .volume-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.volume-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.volume-slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+  .volume-control .btn-icon {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .volume-control .btn-icon:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+
+  .volume-slider {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+/* Fallback pour navigateurs sans backdrop-filter */
+@supports not (backdrop-filter: blur(20px)) {
+  .volume-control {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  .volume-slider {
+    background: rgba(200, 200, 200, 0.8);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .volume-control {
+      background: rgba(0, 0, 0, 0.95);
+    }
+
+    .volume-slider {
+      background: rgba(100, 100, 100, 0.8);
+    }
+  }
 }
 </style>
--- a/pmoapp/webapp/src/components/unified/BottomTabBar.vue
+++ b/pmoapp/webapp/src/components/unified/BottomTabBar.vue
@@ -0,0 +1,449 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { X, ChevronLeft, ChevronRight, Server } from 'lucide-vue-next'
+import { useTabs } from '@/composables/useTabs'
+import { useSwipe } from '@vueuse/core'
+
+defineProps<{
+  onlineServersCount?: number
+}>()
+
+const emit = defineEmits<{
+  'open-drawer': []
+}>()
+
+const { tabs, activeTabId, switchTab, closeTab, nextTab, previousTab, compactMode } = useTabs()
+
+const tabBarRef = ref<HTMLElement | null>(null)
+const scrollContainerRef = ref<HTMLElement | null>(null)
+
+// Gestion du swipe pour changer d'onglet
+useSwipe(tabBarRef, {
+  threshold: 50,
+  onSwipeEnd(_e: TouchEvent, swipeDirection: string) {
+    if (swipeDirection === 'left') {
+      nextTab()
+    } else if (swipeDirection === 'right') {
+      previousTab()
+    }
+  },
+})
+
+// Scroll vers l'onglet actif
+function scrollToActiveTab() {
+  if (!scrollContainerRef.value) return
+
+  const activeTabElement = scrollContainerRef.value.querySelector('.tab-item.active')
+  if (activeTabElement) {
+    activeTabElement.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center',
+    })
+  }
+}
+
+// Scroll vers l'onglet actif quand il change
+watch(() => activeTabId.value, () => {
+  scrollToActiveTab()
+})
+
+// Gestion des boutons de scroll
+const showLeftScroll = ref(false)
+const showRightScroll = ref(false)
+
+function updateScrollButtons() {
+  if (!scrollContainerRef.value) return
+
+  const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.value
+  showLeftScroll.value = scrollLeft > 10
+  showRightScroll.value = scrollLeft < scrollWidth - clientWidth - 10
+}
+
+function scrollLeft() {
+  if (!scrollContainerRef.value) return
+  scrollContainerRef.value.scrollBy({ left: -200, behavior: 'smooth' })
+}
+
+function scrollRight() {
+  if (!scrollContainerRef.value) return
+  scrollContainerRef.value.scrollBy({ left: 200, behavior: 'smooth' })
+}
+
+onMounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.addEventListener('scroll', updateScrollButtons)
+    updateScrollButtons()
+  }
+})
+
+onUnmounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.removeEventListener('scroll', updateScrollButtons)
+  }
+})
+
+// Gestion du clic sur un onglet
+function handleTabClick(tabId: string) {
+  switchTab(tabId)
+}
+
+// Gestion du clic sur le bouton fermer
+function handleCloseClick(event: Event, tabId: string) {
+  event.stopPropagation()
+  closeTab(tabId)
+}
+
+// Gestion du clic sur le bouton server drawer
+function handleServerDrawerClick() {
+  emit('open-drawer')
+}
+</script>
+
+<template>
+  <div ref="tabBarRef" class="bottom-tab-bar">
+    <!-- Bouton pour ouvrir le drawer des servers -->
+    <button
+      class="server-drawer-button"
+      @click="handleServerDrawerClick"
+      :aria-label="`Open media servers (${onlineServersCount || 0} online)`"
+      :title="`Media Servers (${onlineServersCount || 0} online)`"
+    >
+      <Server :size="24" />
+      <span v-if="onlineServersCount && onlineServersCount > 0" class="server-badge">{{ onlineServersCount }}</span>
+    </button>
+
+    <!-- Bouton scroll gauche -->
+    <button
+      v-if="showLeftScroll"
+      class="scroll-button scroll-left"
+      @click="scrollLeft"
+      aria-label="Scroll left"
+    >
+      <ChevronLeft :size="20" />
+    </button>
+
+    <!-- Container avec scroll horizontal -->
+    <div ref="scrollContainerRef" class="tabs-scroll-container">
+      <div class="tabs-container">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="tab-item"
+          :class="{
+            active: tab.id === activeTabId,
+            compact: compactMode
+          }"
+          @click="handleTabClick(tab.id)"
+          :title="tab.fullTitle"
+          :aria-label="`Switch to ${tab.fullTitle} tab`"
+          :aria-current="tab.id === activeTabId ? 'page' : undefined"
+        >
+          <!-- Icône -->
+          <component :is="tab.icon" class="tab-icon" :size="compactMode ? 28 : 24" />
+
+          <!-- Titre (masqué en mode compact) -->
+          <span v-if="!compactMode" class="tab-title">{{ tab.title }}</span>
+
+          <!-- Bouton fermer (seulement pour les onglets fermables, masqué en mode compact) -->
+          <button
+            v-if="tab.closeable && !compactMode"
+            class="tab-close"
+            @click="(e) => handleCloseClick(e, tab.id)"
+            :aria-label="`Close ${tab.fullTitle} tab`"
+          >
+            <X :size="16" />
+          </button>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bouton scroll droite -->
+    <button
+      v-if="showRightScroll"
+      class="scroll-button scroll-right"
+      @click="scrollRight"
+      aria-label="Scroll right"
+    >
+      <ChevronRight :size="20" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.bottom-tab-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 64px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  overflow: hidden;
+}
+
+/* Support pour thème sombre */
+@media (prefers-color-scheme: dark) {
+  .bottom-tab-bar {
+    background: rgba(0, 0, 0, 0.25);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}
+
+.tabs-scroll-container {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.tabs-scroll-container::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+.tabs-container {
+  display: flex;
+  gap: 4px;
+  padding: 0 8px;
+  min-width: 100%;
+}
+
+.tab-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 100px;
+  max-width: 200px;
+  height: 64px;
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  border-bottom: 4px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  font-family: inherit;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Mode compact: icônes seulement */
+.tab-item.compact {
+  min-width: 60px;
+  max-width: 60px;
+  padding: 8px;
+  justify-content: center;
+}
+
+.tab-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text);
+}
+
+.tab-item.active {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom-color: var(--color-primary);
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tab-item:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .tab-item.active {
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+.tab-icon {
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+.tab-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.tab-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text-secondary);
+}
+
+.tab-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+  color: var(--color-text);
+  transform: scale(1.1);
+}
+
+.tab-close:active {
+  transform: scale(0.95);
+}
+
+/* Boutons de scroll */
+.scroll-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text);
+}
+
+.scroll-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.scroll-button:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.scroll-left {
+  left: 8px;
+}
+
+.scroll-right {
+  right: 8px;
+}
+
+/* Responsive mobile */
+@media (max-width: 768px) {
+  .tab-item {
+    min-width: 80px;
+    max-width: 150px;
+    padding: 8px 12px;
+    gap: 6px;
+  }
+
+  .tab-title {
+    font-size: 12px;
+  }
+
+  .tab-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .tab-close {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+/* Animation d'entrée */
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.bottom-tab-bar {
+  animation: slideInUp 0.3s ease-out;
+}
+
+/* Effet de swipe visuel */
+.tabs-scroll-container {
+  touch-action: pan-x;
+}
+
+/* Bouton server drawer */
+.server-drawer-button {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin: 0 8px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--color-text);
+}
+
+.server-drawer-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.server-drawer-button:active {
+  transform: scale(0.95);
+}
+
+@media (prefers-color-scheme: dark) {
+  .server-drawer-button {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .server-drawer-button:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+/* Badge pour le nombre de servers online */
+.server-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+  background: rgba(102, 126, 234, 0.9);
+  border: 2px solid var(--color-bg);
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+</style>
--- a/pmoapp/webapp/src/components/unified/EmptyState.vue
+++ b/pmoapp/webapp/src/components/unified/EmptyState.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { RadioTower, RefreshCw } from 'lucide-vue-next'
+import { useRenderers } from '@/composables/useRenderers'
+import { ref } from 'vue'
+
+const { fetchRenderers } = useRenderers()
+const isRefreshing = ref(false)
+
+async function handleRefresh() {
+  isRefreshing.value = true
+  try {
+    await fetchRenderers(true) // Force refresh
+  } finally {
+    // Petit délai pour montrer l'animation
+    setTimeout(() => {
+      isRefreshing.value = false
+    }, 500)
+  }
+}
+</script>
+
+<template>
+  <div class="empty-state">
+    <div class="empty-content">
+      <!-- Icône -->
+      <div class="empty-icon">
+        <RadioTower :size="80" />
+      </div>
+
+      <!-- Message -->
+      <h2 class="empty-title">Aucun renderer détecté</h2>
+      <p class="empty-description">
+        Vérifiez que vos renderers (Chromecast, UPnP, OpenHome) sont allumés et connectés au réseau.
+      </p>
+
+      <!-- Bouton refresh -->
+      <button
+        class="btn-refresh"
+        :class="{ refreshing: isRefreshing }"
+        @click="handleRefresh"
+        :disabled="isRefreshing"
+      >
+        <RefreshCw :size="20" :class="{ spin: isRefreshing }" />
+        <span>{{ isRefreshing ? 'Actualisation...' : 'Actualiser' }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-xl);
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
+}
+
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-lg);
+  max-width: 500px;
+  padding: var(--spacing-2xl);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow:
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+  text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .empty-content {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+
+.empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+.empty-title {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.empty-description {
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+  max-width: 400px;
+}
+
+.btn-refresh {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: 12px 24px;
+  margin-top: var(--spacing-md);
+  font-size: var(--text-base);
+  font-weight: 600;
+  font-family: inherit;
+  color: white;
+  background: rgba(102, 126, 234, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(102, 126, 234, 0.4);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.btn-refresh:hover:not(:disabled) {
+  background: rgba(102, 126, 234, 1);
+  border-color: rgba(102, 126, 234, 0.6);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+}
+
+.btn-refresh:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-refresh:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.btn-refresh .spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Responsive mobile */
+@media (max-width: 768px) {
+  .empty-state {
+    padding: var(--spacing-lg);
+  }
+
+  .empty-content {
+    padding: var(--spacing-xl);
+  }
+
+  .empty-icon {
+    width: 100px;
+    height: 100px;
+  }
+
+  .empty-icon svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  .empty-title {
+    font-size: var(--text-xl);
+  }
+
+  .empty-description {
+    font-size: var(--text-sm);
+  }
+}
+
+/* Fallback pour navigateurs sans backdrop-filter */
+@supports not (backdrop-filter: blur(20px)) {
+  .empty-content {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .empty-content {
+      background: rgba(20, 20, 30, 0.95);
+    }
+  }
+}
+</style>
--- a/pmoapp/webapp/src/components/unified/RendererTabContent.vue
+++ b/pmoapp/webapp/src/components/unified/RendererTabContent.vue
@@ -0,0 +1,483 @@
+<script setup lang="ts">
+import { ref, computed, toRef, onMounted } from 'vue'
+import { useRenderer } from '@/composables/useRenderers'
+import CurrentTrack from '@/components/pmocontrol/CurrentTrack.vue'
+import TransportControls from '@/components/pmocontrol/TransportControls.vue'
+import VolumeControl from '@/components/pmocontrol/VolumeControl.vue'
+import QueueViewer from '@/components/pmocontrol/QueueViewer.vue'
+import StatusBadge from '@/components/pmocontrol/StatusBadge.vue'
+import { ChevronUp, ChevronDown, Link } from 'lucide-vue-next'
+import { useRenderers } from '@/composables/useRenderers'
+import { useUIStore } from '@/stores/ui'
+
+const props = defineProps<{
+  rendererId: string
+}>()
+
+const { renderer, state, queue, binding, refresh } = useRenderer(toRef(props, 'rendererId'))
+const { detachPlaylist } = useRenderers()
+const uiStore = useUIStore()
+
+// État du drawer queue sur mobile
+const queueDrawerOpen = ref(false)
+
+function toggleQueueDrawer() {
+  queueDrawerOpen.value = !queueDrawerOpen.value
+}
+
+// Charger les données au montage
+onMounted(async () => {
+  await refresh()
+})
+
+// État du renderer pour affichage
+const isOnline = computed(() => renderer.value?.online ?? false)
+const transportState = computed(() => state.value?.transport_state ?? 'STOPPED')
+const hasPlaylistBinding = computed(() => !!binding.value)
+
+// Détacher la playlist
+async function handleDetachPlaylist() {
+  try {
+    await detachPlaylist(props.rendererId)
+    uiStore.notifySuccess('Playlist détachée')
+  } catch (error) {
+    uiStore.notifyError(`Erreur: ${error instanceof Error ? error.message : 'Erreur inconnue'}`)
+  }
+}
+</script>
+
+<template>
+  <div class="renderer-tab-content">
+    <!-- Header avec nom du renderer et état -->
+    <header class="renderer-header">
+      <div class="header-info">
+        <h1 class="renderer-name">{{ renderer?.friendly_name || 'Renderer' }}</h1>
+        <p v-if="renderer?.model_name" class="renderer-model">{{ renderer.model_name }}</p>
+      </div>
+      <div class="header-badges">
+        <StatusBadge v-if="state" :status="transportState" />
+        <span v-if="renderer?.protocol" class="protocol-badge">
+          {{ renderer.protocol.toUpperCase() }}
+        </span>
+
+        <!-- Badge playlist binding avec tooltip -->
+        <div v-if="hasPlaylistBinding" class="playlist-badge" :title="`Playlist liée\nServeur: ${binding?.server_id}\nContainer: ${binding?.container_id}`">
+          <button class="playlist-badge-btn" @click="handleDetachPlaylist" title="Cliquer pour détacher">
+            <Link :size="16" />
+          </button>
+        </div>
+
+        <span v-if="!isOnline" class="offline-badge">OFFLINE</span>
+      </div>
+    </header>
+
+    <!-- Layout principal -->
+    <div class="renderer-layout" :class="{ 'queue-open': queueDrawerOpen }">
+      <!-- Colonne gauche: Contrôles -->
+      <div class="controls-column">
+        <!-- Pochette + infos track -->
+        <CurrentTrack v-if="state" :renderer-id="rendererId" class="current-track-section" />
+
+        <!-- Contrôles de transport -->
+        <div v-if="state" class="controls-section">
+          <TransportControls :renderer-id="rendererId" />
+        </div>
+
+        <!-- Contrôle de volume -->
+        <div v-if="state" class="volume-section">
+          <VolumeControl :renderer-id="rendererId" />
+        </div>
+
+        <!-- Message si offline -->
+        <div v-if="!isOnline" class="offline-message">
+          <p>Ce renderer est actuellement hors ligne</p>
+        </div>
+      </div>
+
+      <!-- Colonne droite: Queue (desktop) -->
+      <div class="queue-column">
+        <div class="queue-header">
+          <h2 class="queue-title">File d'attente</h2>
+          <span v-if="queue" class="queue-count">{{ queue.items.length }} morceaux</span>
+        </div>
+
+        <QueueViewer v-if="queue" :renderer-id="rendererId" class="queue-viewer" />
+
+        <div v-else class="queue-empty">
+          <p>Aucun morceau en file d'attente</p>
+        </div>
+      </div>
+
+      <!-- Drawer queue (mobile uniquement) -->
+      <div class="queue-drawer" :class="{ open: queueDrawerOpen }">
+        <!-- Toggle button -->
+        <button class="queue-drawer-toggle" @click="toggleQueueDrawer">
+          <ChevronUp v-if="queueDrawerOpen" :size="24" />
+          <ChevronDown v-else :size="24" />
+          <span>File d'attente ({{ queue?.items.length || 0 }})</span>
+        </button>
+
+        <!-- Contenu du drawer -->
+        <div class="queue-drawer-content">
+          <QueueViewer v-if="queue" :renderer-id="rendererId" />
+          <div v-else class="queue-empty">
+            <p>Aucun morceau en file d'attente</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Backdrop pour fermer le drawer -->
+      <div
+        v-if="queueDrawerOpen"
+        class="queue-drawer-backdrop"
+        @click="queueDrawerOpen = false"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.renderer-tab-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Header */
+.renderer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.header-info {
+  flex: 1;
+}
+
+.renderer-name {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.renderer-model {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 4px 0 0 0;
+}
+
+.header-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.protocol-badge,
+.offline-badge {
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.protocol-badge {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.offline-badge {
+  background: var(--status-offline);
+  color: white;
+}
+
+/* Badge playlist binding compact */
+.playlist-badge {
+  position: relative;
+  display: inline-flex;
+}
+
+.playlist-badge-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: rgba(102, 126, 234, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(102, 126, 234, 0.4);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: rgba(102, 126, 234, 1);
+}
+
+.playlist-badge-btn:hover {
+  background: rgba(102, 126, 234, 0.3);
+  border-color: rgba(102, 126, 234, 0.6);
+  transform: scale(1.1);
+}
+
+.playlist-badge-btn:active {
+  transform: scale(1.0);
+}
+
+@media (prefers-color-scheme: dark) {
+  .playlist-badge-btn {
+    background: rgba(102, 126, 234, 0.15);
+    border-color: rgba(102, 126, 234, 0.3);
+  }
+
+  .playlist-badge-btn:hover {
+    background: rgba(102, 126, 234, 0.25);
+    border-color: rgba(102, 126, 234, 0.5);
+  }
+}
+
+/* Layout principal - 800x600 landscape (2 colonnes) */
+.renderer-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Colonne gauche - Contrôles */
+.controls-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  overflow-y: auto;
+  padding-right: var(--spacing-sm);
+}
+
+.current-track-section,
+.controls-section,
+.volume-section,
+.playlist-section {
+  flex-shrink: 0;
+}
+
+.offline-message {
+  padding: var(--spacing-lg);
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius-md);
+  text-align: center;
+  color: var(--status-offline);
+}
+
+/* Colonne droite - Queue */
+.queue-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  overflow: hidden;
+}
+
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.queue-title {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.queue-count {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  padding: 4px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-sm);
+}
+
+.queue-viewer {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.queue-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: var(--radius-md);
+  border: 1px dashed rgba(255, 255, 255, 0.1);
+}
+
+.queue-empty p {
+  color: var(--color-text-tertiary);
+  font-size: var(--text-base);
+  margin: 0;
+}
+
+/* Queue drawer - masqué sur desktop, visible sur mobile */
+.queue-drawer {
+  display: none;
+}
+
+/* Responsive - Mobile portrait */
+@media (max-width: 768px) and (orientation: portrait) {
+  .renderer-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+  }
+
+  .header-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .renderer-layout {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    padding-bottom: 0;
+  }
+
+  /* Queue column cachée sur mobile */
+  .queue-column {
+    display: none;
+  }
+
+  /* Queue drawer visible sur mobile */
+  .queue-drawer {
+    display: block;
+    position: fixed;
+    bottom: 64px; /* Hauteur de la tab bar */
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(30px) saturate(180%);
+    -webkit-backdrop-filter: blur(30px) saturate(180%);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
+    transform: translateY(calc(100% - 56px));
+    transition: transform 0.3s ease;
+    z-index: 90;
+    max-height: 70vh;
+  }
+
+  .queue-drawer.open {
+    transform: translateY(0);
+  }
+
+  .queue-drawer-toggle {
+    width: 100%;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text);
+    font-size: var(--text-base);
+    font-weight: 600;
+    font-family: inherit;
+  }
+
+  .queue-drawer-content {
+    max-height: calc(70vh - 56px);
+    overflow-y: auto;
+    padding: var(--spacing-md);
+  }
+
+  .queue-drawer-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 64px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 89;
+  }
+
+  .controls-column {
+    padding-right: 0;
+  }
+}
+
+/* Responsive - 800x600 landscape */
+@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
+  .renderer-layout {
+    grid-template-columns: 280px 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+  }
+
+  .renderer-header {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .renderer-name {
+    font-size: var(--text-xl);
+  }
+
+  .queue-title {
+    font-size: var(--text-lg);
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1200px) {
+  .renderer-layout {
+    grid-template-columns: 350px 1fr;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+}
+
+/* Scrollbar styling */
+.controls-column::-webkit-scrollbar,
+.queue-viewer::-webkit-scrollbar {
+  width: 6px;
+}
+
+.controls-column::-webkit-scrollbar-track,
+.queue-viewer::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+.controls-column::-webkit-scrollbar-thumb,
+.queue-viewer::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.controls-column::-webkit-scrollbar-thumb:hover,
+.queue-viewer::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>
--- a/pmoapp/webapp/src/components/unified/ServerDrawer.vue
+++ b/pmoapp/webapp/src/components/unified/ServerDrawer.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { X, Server as ServerIcon, Circle } from 'lucide-vue-next'
+import { useMediaServers } from '@/composables/useMediaServers'
+import type { MediaServerSummary } from '@/services/pmocontrol/types'
+
+defineProps<{
+  modelValue: boolean // v-model pour contrôler l'ouverture
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'server-selected': [server: MediaServerSummary]
+}>()
+
+const { allServers } = useMediaServers()
+
+const onlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => s.online))
+const offlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => !s.online))
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function handleServerClick(server: MediaServerSummary) {
+  if (!server.online) return
+  emit('server-selected', server)
+  close()
+}
+</script>
+
+<template>
+  <div>
+    <!-- Backdrop -->
+    <Transition name="backdrop">
+      <div v-if="modelValue" class="drawer-backdrop" @click="close"></div>
+    </Transition>
+
+    <!-- Drawer -->
+    <Transition name="drawer">
+      <aside v-if="modelValue" class="server-drawer">
+        <!-- Header -->
+        <header class="drawer-header">
+          <div class="drawer-title-section">
+            <ServerIcon :size="24" />
+            <h2 class="drawer-title">Media Servers</h2>
+          </div>
+          <button class="drawer-close-btn" @click="close" aria-label="Fermer">
+            <X :size="24" />
+          </button>
+        </header>
+
+        <!-- Liste des servers -->
+        <div class="drawer-content">
+          <!-- Servers online -->
+          <section v-if="onlineServers.length > 0" class="server-section">
+            <h3 class="section-title">Disponibles ({{ onlineServers.length }})</h3>
+            <ul class="server-list">
+              <li
+                v-for="server in onlineServers"
+                :key="server.id"
+                class="server-item online"
+                @click="handleServerClick(server)"
+              >
+                <div class="server-icon">
+                  <ServerIcon :size="20" />
+                </div>
+                <div class="server-info">
+                  <p class="server-name">{{ server.friendly_name }}</p>
+                  <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                </div>
+                <div class="server-status">
+                  <Circle :size="8" fill="currentColor" />
+                </div>
+              </li>
+            </ul>
+          </section>
+
+          <!-- Servers offline -->
+          <section v-if="offlineServers.length > 0" class="server-section">
+            <h3 class="section-title">Hors ligne ({{ offlineServers.length }})</h3>
+            <ul class="server-list">
+              <li
+                v-for="server in offlineServers"
+                :key="server.id"
+                class="server-item offline"
+              >
+                <div class="server-icon">
+                  <ServerIcon :size="20" />
+                </div>
+                <div class="server-info">
+                  <p class="server-name">{{ server.friendly_name }}</p>
+                  <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                </div>
+                <div class="server-status">
+                  <Circle :size="8" fill="currentColor" />
+                </div>
+              </li>
+            </ul>
+          </section>
+
+          <!-- Aucun server -->
+          <div v-if="allServers.length === 0" class="empty-servers">
+            <ServerIcon :size="48" />
+            <p>Aucun serveur multimédia détecté</p>
+          </div>
+        </div>
+      </aside>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.drawer-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 200;
+}
+
+.server-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 320px;
+  max-width: 80vw;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
+  z-index: 201;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+  .server-drawer {
+    background: rgba(0, 0, 0, 0.4);
+    border-right-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+/* Header */
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.drawer-title-section {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  color: var(--color-text);
+}
+
+.drawer-title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  margin: 0;
+}
+
+.drawer-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text);
+}
+
+.drawer-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+.drawer-close-btn:active {
+  transform: scale(0.95);
+}
+
+/* Content */
+.drawer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-md);
+}
+
+.server-section {
+  margin-bottom: var(--spacing-lg);
+}
+
+.section-title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-secondary);
+  margin: 0 0 var(--spacing-sm) 0;
+  padding: 0 var(--spacing-sm);
+}
+
+.server-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.server-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
+}
+
+.server-item.online {
+  cursor: pointer;
+}
+
+.server-item.online:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateX(4px);
+}
+
+.server-item.online:active {
+  transform: translateX(2px);
+}
+
+.server-item.offline {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.server-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text-secondary);
+}
+
+.server-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.server-name {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.server-model {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 2px 0 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.server-status {
+  flex-shrink: 0;
+  color: var(--status-playing);
+}
+
+.server-item.offline .server-status {
+  color: var(--status-offline);
+}
+
+.empty-servers {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-2xl);
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+.empty-servers p {
+  margin: 0;
+  font-size: var(--text-base);
+}
+
+/* Animations */
+.backdrop-enter-active,
+.backdrop-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.backdrop-enter-from,
+.backdrop-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  transform: translateX(-100%);
+}
+
+/* Scrollbar styling */
+.drawer-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.drawer-content::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+.drawer-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.drawer-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .server-drawer {
+    width: 280px;
+  }
+
+  .drawer-header {
+    padding: var(--spacing-md);
+  }
+
+  .drawer-title {
+    font-size: var(--text-lg);
+  }
+}
+
+/* Fallback pour navigateurs sans backdrop-filter */
+@supports not (backdrop-filter: blur(30px)) {
+  .server-drawer {
+    background: rgba(255, 255, 255, 0.98);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .server-drawer {
+      background: rgba(20, 20, 30, 0.98);
+    }
+  }
+}
+</style>
--- a/pmoapp/webapp/src/components/unified/ServerTabContent.vue
+++ b/pmoapp/webapp/src/components/unified/ServerTabContent.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useMediaServers } from '@/composables/useMediaServers'
+import MediaBrowser from '@/components/pmocontrol/MediaBrowser.vue'
+
+const props = defineProps<{
+  serverId: string
+}>()
+
+const { getServerById, fetchServers } = useMediaServers()
+
+// Container ID actuel (commence à la racine '0')
+const containerId = ref('0')
+
+const server = computed(() => getServerById(props.serverId))
+const isOnline = computed(() => server.value?.online ?? false)
+
+// Gestion de la navigation dans les containers
+function handleNavigate(newContainerId: string) {
+  containerId.value = newContainerId
+}
+
+onMounted(async () => {
+  await fetchServers()
+})
+</script>
+
+<template>
+  <div class="server-tab-content">
+    <!-- Header avec nom du serveur et état -->
+    <header class="server-header">
+      <div class="header-info">
+        <h1 class="server-name">{{ server?.friendly_name || 'Media Server' }}</h1>
+        <p v-if="server?.model_name" class="server-model">{{ server.model_name }}</p>
+      </div>
+      <div class="header-badges">
+        <span v-if="isOnline" class="online-badge">ONLINE</span>
+        <span v-else class="offline-badge">OFFLINE</span>
+      </div>
+    </header>
+
+    <!-- Browser de médias -->
+    <div class="browser-section">
+      <MediaBrowser
+        v-if="isOnline"
+        :server-id="serverId"
+        :container-id="containerId"
+        @navigate="handleNavigate"
+      />
+
+      <div v-else class="offline-message">
+        <p>Ce serveur est actuellement hors ligne</p>
+        <button class="btn btn-secondary" @click="fetchServers(true)">Actualiser</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.server-tab-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Header */
+.server-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.header-info {
+  flex: 1;
+}
+
+.server-name {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.server-model {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 4px 0 0 0;
+}
+
+.header-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.online-badge,
+.offline-badge {
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.online-badge {
+  background: var(--status-playing);
+  color: white;
+}
+
+.offline-badge {
+  background: var(--status-offline);
+  color: white;
+}
+
+/* Section browser */
+.browser-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: var(--spacing-lg);
+}
+
+.offline-message {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xl);
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius-lg);
+  text-align: center;
+}
+
+.offline-message p {
+  color: var(--status-offline);
+  font-size: var(--text-lg);
+  margin: 0;
+}
+
+/* Responsive - Mobile portrait */
+@media (max-width: 768px) and (orientation: portrait) {
+  .server-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+  }
+
+  .header-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .browser-section {
+    padding: var(--spacing-md);
+  }
+}
+
+/* Responsive - 800x600 landscape */
+@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
+  .server-header {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .server-name {
+    font-size: var(--text-xl);
+  }
+
+  .browser-section {
+    padding: var(--spacing-md);
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1200px) {
+  .browser-section {
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+</style>
--- a/pmoapp/webapp/src/composables/useTabs.ts
+++ b/pmoapp/webapp/src/composables/useTabs.ts
@@ -0,0 +1,376 @@
+/**
+ * Composable pour gérer les onglets dynamiques de l'interface unifiée.
+ * Onglets renderer auto-générés depuis la liste des renderers online.
+ * Onglets server ouverts manuellement via le drawer (fermables).
+ */
+import { reactive, computed, watch, onMounted, type Component } from 'vue'
+import { Radio, Server } from 'lucide-vue-next'
+import type { RendererSummary, MediaServerSummary } from '../services/pmocontrol/types'
+
+export interface Tab {
+  id: string // "renderer-{id}", "server-{id}"
+  type: 'renderer' | 'server'
+  title: string // Nom affiché (tronqué sur mobile)
+  fullTitle: string // Nom complet (pour tooltip)
+  icon: Component
+  metadata?: {
+    rendererId?: string
+    serverId?: string
+  }
+  closeable: boolean // renderer: false (auto-géré), server: true (manuel)
+}
+
+interface TabsState {
+  tabs: Tab[]
+  activeTabId: string
+  tabHistory: string[] // Pour back/forward navigation
+}
+
+const MAX_TABS = 12 // Augmenté car onglets auto-générés
+const STORAGE_KEY = 'pmo-tabs-state'
+const COMPACT_MODE_THRESHOLD = 5 // Passer en mode icônes seulement au-delà de 5 onglets
+
+// État global partagé entre toutes les instances du composable
+const state = reactive<TabsState>({
+  tabs: [],
+  activeTabId: '',
+  tabHistory: [],
+})
+
+// Flag pour éviter les boucles de sauvegarde
+let isRestoringFromStorage = false
+
+/**
+ * Tronque un titre pour mobile si nécessaire
+ */
+function truncateTitle(title: string, maxLength = 15): string {
+  return title.length > maxLength ? title.slice(0, maxLength) + '...' : title
+}
+
+/**
+ * Sauvegarde l'état dans localStorage
+ * Note: On ne sauvegarde que les onglets server (les renderer tabs sont auto-générés)
+ */
+function saveToLocalStorage() {
+  if (isRestoringFromStorage) return
+
+  try {
+    const stateToSave = {
+      // Sauvegarder uniquement les onglets server (fermables manuellement)
+      tabs: state.tabs
+        .filter((tab) => tab.type === 'server')
+        .map((tab) => ({
+          ...tab,
+          // On ne peut pas sauvegarder les composants Vue, on sauve juste le type
+          icon: undefined,
+        })),
+      activeTabId: state.activeTabId,
+      tabHistory: state.tabHistory,
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave))
+  } catch (error) {
+    console.error('[useTabs] Erreur sauvegarde localStorage:', error)
+  }
+}
+
+/**
+ * Restaure l'état depuis localStorage
+ * Note: Restaure uniquement les onglets server (les renderer tabs seront auto-générés)
+ */
+function restoreFromLocalStorage() {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    if (!saved) return
+
+    isRestoringFromStorage = true
+    const savedState = JSON.parse(saved)
+
+    // Reconstituer uniquement les tabs server avec les bonnes icônes
+    const serverTabs = (savedState.tabs || [])
+      .filter((tab: Tab) => tab.type === 'server')
+      .map((tab: Tab) => ({
+        ...tab,
+        icon: Server,
+        closeable: true,
+        fullTitle: tab.fullTitle || tab.title, // Fallback si fullTitle n'existe pas
+      }))
+
+    // Ajouter les tabs server restaurés (les renderer tabs seront ajoutés par syncWithRenderers)
+    state.tabs.push(...serverTabs)
+
+    state.activeTabId = savedState.activeTabId || ''
+    state.tabHistory = savedState.tabHistory || []
+
+    // Vérifier que l'onglet actif existe toujours (sera validé après syncWithRenderers)
+    if (!state.tabs.find((t) => t.id === state.activeTabId)) {
+      state.activeTabId = ''
+    }
+
+    isRestoringFromStorage = false
+  } catch (error) {
+    console.error('[useTabs] Erreur restauration localStorage:', error)
+    isRestoringFromStorage = false
+  }
+}
+
+/**
+ * Trouve un onglet par son ID
+ */
+function findTab(tabId: string): Tab | undefined {
+  return state.tabs.find((t) => t.id === tabId)
+}
+
+/**
+ * Ouvre un nouvel onglet ou active un onglet existant
+ */
+function openTab(newTab: Omit<Tab, 'id' | 'fullTitle'> & { id?: string; fullTitle?: string }): string {
+  // Générer un ID si non fourni
+  const tabId =
+    newTab.id ||
+    (newTab.type === 'renderer'
+      ? `renderer-${newTab.metadata?.rendererId}`
+      : `server-${newTab.metadata?.serverId}`)
+
+  // Si l'onglet existe déjà, on le sélectionne
+  const existingTab = findTab(tabId)
+  if (existingTab) {
+    switchTab(tabId)
+    return tabId
+  }
+
+  // Vérifier la limite max
+  if (state.tabs.length >= MAX_TABS) {
+    console.warn(`[useTabs] Limite max de ${MAX_TABS} onglets atteinte`)
+    return state.activeTabId
+  }
+
+  // Créer le nouvel onglet
+  const tab: Tab = {
+    id: tabId,
+    type: newTab.type,
+    title: truncateTitle(newTab.title),
+    fullTitle: newTab.fullTitle || newTab.title, // Utiliser fullTitle si fourni, sinon title
+    icon: newTab.icon,
+    metadata: newTab.metadata,
+    closeable: newTab.closeable !== false, // true par défaut sauf si explicitement false
+  }
+
+  state.tabs.push(tab)
+  switchTab(tabId)
+
+  return tabId
+}
+
+/**
+ * Ferme un onglet (uniquement les onglets server manuels)
+ * Les onglets renderer sont auto-gérés et ne peuvent pas être fermés manuellement
+ */
+function closeTab(tabId: string) {
+  const tab = findTab(tabId)
+  if (!tab) return
+
+  // Ne fermer que les onglets server (closeable = true)
+  // Les renderer tabs sont auto-gérés par syncWithRenderers
+  if (!tab.closeable || tab.type === 'renderer') {
+    console.warn('[useTabs] Impossible de fermer un onglet renderer (auto-géré)')
+    return
+  }
+
+  const tabIndex = state.tabs.findIndex((t) => t.id === tabId)
+  if (tabIndex === -1) return
+
+  // Supprimer l'onglet
+  state.tabs.splice(tabIndex, 1)
+
+  // Supprimer de l'historique
+  state.tabHistory = state.tabHistory.filter((id) => id !== tabId)
+
+  // Si c'était l'onglet actif, basculer vers le précédent dans l'historique
+  if (state.activeTabId === tabId) {
+    // Chercher le précédent dans l'historique qui existe encore
+    const previousTab = state.tabHistory
+      .slice()
+      .reverse()
+      .find((id) => state.tabs.some((t) => t.id === id))
+
+    if (previousTab) {
+      switchTab(previousTab)
+    } else {
+      // Fallback sur le premier onglet disponible (ou vide)
+      const firstTab = state.tabs[0]
+      if (firstTab) {
+        switchTab(firstTab.id)
+      } else {
+        state.activeTabId = ''
+      }
+    }
+  }
+}
+
+/**
+ * Change l'onglet actif
+ */
+function switchTab(tabId: string) {
+  const tab = findTab(tabId)
+  if (!tab) {
+    console.warn(`[useTabs] Onglet ${tabId} introuvable`)
+    return
+  }
+
+  state.activeTabId = tabId
+
+  // Ajouter à l'historique (en évitant les doublons consécutifs)
+  if (state.tabHistory[state.tabHistory.length - 1] !== tabId) {
+    state.tabHistory.push(tabId)
+
+    // Limiter la taille de l'historique
+    if (state.tabHistory.length > 20) {
+      state.tabHistory.shift()
+    }
+  }
+}
+
+/**
+ * Onglet suivant (pour swipe gesture)
+ */
+function nextTab() {
+  const currentIndex = state.tabs.findIndex((t) => t.id === state.activeTabId)
+  const nextIndex = (currentIndex + 1) % state.tabs.length
+  const nextTabObj = state.tabs[nextIndex]
+  if (nextTabObj) switchTab(nextTabObj.id)
+}
+
+/**
+ * Onglet précédent (pour swipe gesture)
+ */
+function previousTab() {
+  const currentIndex = state.tabs.findIndex((t) => t.id === state.activeTabId)
+  const previousIndex = currentIndex === 0 ? state.tabs.length - 1 : currentIndex - 1
+  const prevTabObj = state.tabs[previousIndex]
+  if (prevTabObj) switchTab(prevTabObj.id)
+}
+
+/**
+ * Synchronise les onglets avec la liste des renderers online
+ * Les renderer tabs sont automatiquement créés/supprimés selon l'état online
+ */
+function syncWithRenderers(renderers: RendererSummary[]) {
+  const onlineRenderers = renderers.filter((r) => r.online)
+
+  // Extraire les tabs renderer actuels
+  const currentRendererTabs = state.tabs.filter((t) => t.type === 'renderer')
+
+  // IDs des renderers online
+  const onlineRendererIds = new Set(onlineRenderers.map((r) => `renderer-${r.id}`))
+
+  // Supprimer les tabs des renderers qui ne sont plus online
+  const renderersToRemove = currentRendererTabs.filter((t) => !onlineRendererIds.has(t.id))
+  renderersToRemove.forEach((tab) => {
+    const index = state.tabs.findIndex((t) => t.id === tab.id)
+    if (index !== -1) state.tabs.splice(index, 1)
+    state.tabHistory = state.tabHistory.filter((id) => id !== tab.id)
+  })
+
+  // Ajouter les nouveaux renderers online
+  const currentRendererIds = new Set(currentRendererTabs.map((t) => t.id))
+  onlineRenderers.forEach((renderer) => {
+    const tabId = `renderer-${renderer.id}`
+    if (!currentRendererIds.has(tabId)) {
+      const newTab: Tab = {
+        id: tabId,
+        type: 'renderer',
+        title: truncateTitle(renderer.friendly_name),
+        fullTitle: renderer.friendly_name,
+        icon: Radio,
+        metadata: { rendererId: renderer.id },
+        closeable: false, // renderer tabs ne sont pas fermables manuellement
+      }
+      state.tabs.unshift(newTab) // Ajouter au début
+    }
+  })
+
+  // Vérifier que l'onglet actif existe toujours
+  if (state.activeTabId && !state.tabs.find((t) => t.id === state.activeTabId)) {
+    // Basculer vers le premier onglet disponible
+    const firstTab = state.tabs[0]
+    if (firstTab) {
+      state.activeTabId = firstTab.id
+    } else {
+      state.activeTabId = ''
+    }
+  }
+
+  // Si aucun onglet actif et qu'il y a des onglets, sélectionner le premier
+  if (!state.activeTabId && state.tabs.length > 0) {
+    const firstTab = state.tabs[0]
+    if (firstTab) {
+      state.activeTabId = firstTab.id
+    }
+  }
+}
+
+/**
+ * Ouvre un onglet server (manuel)
+ */
+function openServer(server: MediaServerSummary | undefined) {
+  if (!server) return ''
+
+  return openTab({
+    type: 'server',
+    title: server.friendly_name,
+    icon: Server,
+    metadata: { serverId: server.id },
+    closeable: true,
+  })
+}
+
+/**
+ * Composable principal
+ */
+export function useTabs() {
+  // Watch pour sauvegarde automatique (uniquement les server tabs)
+  watch(
+    () => [state.tabs, state.activeTabId, state.tabHistory],
+    () => {
+      saveToLocalStorage()
+    },
+    { deep: true },
+  )
+
+  // Restaurer au montage (uniquement les server tabs)
+  onMounted(() => {
+    // Restaurer seulement si pas déjà fait
+    if (state.tabs.filter((t) => t.type === 'server').length === 0) {
+      restoreFromLocalStorage()
+    }
+  })
+
+  // Computed properties
+  const activeTab = computed(() => findTab(state.activeTabId) || state.tabs[0] || null)
+  const hasMultipleTabs = computed(() => state.tabs.length > 1)
+  const canAddTab = computed(() => state.tabs.length < MAX_TABS)
+  const isEmpty = computed(() => state.tabs.length === 0)
+  const compactMode = computed(() => state.tabs.length > COMPACT_MODE_THRESHOLD)
+
+  return {
+    // State
+    tabs: computed(() => state.tabs),
+    activeTabId: computed(() => state.activeTabId),
+    activeTab,
+    tabHistory: computed(() => state.tabHistory),
+    hasMultipleTabs,
+    canAddTab,
+    isEmpty,
+    compactMode,
+
+    // Actions
+    syncWithRenderers, // Nouvelle fonction clé pour auto-sync
+    openTab,
+    closeTab,
+    switchTab,
+    nextTab,
+    previousTab,
+    openServer,
+    findTab,
+  }
+}
--- a/pmoapp/webapp/src/main.ts
+++ b/pmoapp/webapp/src/main.ts
@@ -13,6 +13,7 @@ import { useUIStore } from "./stores/ui";
 import "./style.css";
 import "./assets/styles/variables.css";
 import "./assets/styles/pmocontrol.css";
+import "./assets/styles/glass-theme.css";

 // Créer l'application Vue
 const app = createApp(App);
--- a/pmoapp/webapp/src/router/index.ts
+++ b/pmoapp/webapp/src/router/index.ts
@@ -1,6 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";

-// PMOControl Views (nouvelle home)
+// PMOControl Unified View (nouvelle interface unifiée)
+import UnifiedControlView from "../views/UnifiedControlView.vue";
+
+// PMOControl Views (anciennes vues - conservées pour fallback)
 import DashboardView from "../views/DashboardView.vue";
 import RendererView from "../views/RendererView.vue";
 import MediaServerView from "../views/MediaServerView.vue";
@@ -16,19 +19,26 @@ import APIDashboard from "../components/APIDashboard.vue";
 import RadioParadiseExplorer from "../components/RadioParadiseExplorer.vue";

 const routes = [
-  // PMOControl (nouvelle home)
+  // PMOControl Unified Interface (nouvelle interface unifiée avec onglets)
  {
    path: "/",
+    name: "Control",
+    component: UnifiedControlView,
+  },
+
+  // Anciennes routes (conservées sous /legacy pour fallback)
+  {
+    path: "/legacy",
    name: "Dashboard",
    component: DashboardView,
  },
  {
-    path: "/renderer/:id",
+    path: "/legacy/renderer/:id",
    name: "Renderer",
    component: RendererView,
  },
  {
-    path: "/server/:serverId",
+    path: "/legacy/server/:serverId",
    name: "MediaServer",
    component: MediaServerView,
  },
--- a/pmoapp/webapp/src/views/UnifiedControlView.vue
+++ b/pmoapp/webapp/src/views/UnifiedControlView.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTabs } from '@/composables/useTabs'
+import { useRenderers } from '@/composables/useRenderers'
+import { useMediaServers } from '@/composables/useMediaServers'
+import { useSwipe } from '@vueuse/core'
+import type { MediaServerSummary } from '@/services/pmocontrol/types'
+
+// Import des composants
+import BottomTabBar from '@/components/unified/BottomTabBar.vue'
+import EmptyState from '@/components/unified/EmptyState.vue'
+import ServerDrawer from '@/components/unified/ServerDrawer.vue'
+import RendererTabContent from '@/components/unified/RendererTabContent.vue'
+import ServerTabContent from '@/components/unified/ServerTabContent.vue'
+
+const route = useRoute()
+const router = useRouter()
+const { tabs, activeTabId, switchTab, activeTab, syncWithRenderers, isEmpty, openServer } = useTabs()
+const { allRenderers, fetchRenderers } = useRenderers()
+const { allServers } = useMediaServers()
+
+// État du drawer server
+const drawerOpen = ref(false)
+
+// Ref pour le swipe edge detection
+const viewRef = ref<HTMLElement | null>(null)
+
+// Swipe depuis le bord gauche pour ouvrir le drawer
+useSwipe(viewRef, {
+  threshold: 50,
+  onSwipeEnd(_e: TouchEvent, swipeDirection: string) {
+    // Swipe right depuis le bord gauche → ouvrir drawer
+    if (swipeDirection === 'right' && !drawerOpen.value) {
+      const touch = _e.changedTouches[0]
+      // Vérifier que le swipe commence depuis le bord gauche (< 50px)
+      if (touch && touch.clientX < 50) {
+        drawerOpen.value = true
+      }
+    }
+  },
+})
+
+// Gestion de l'ouverture d'un server depuis le drawer
+function handleServerSelected(server: MediaServerSummary) {
+  openServer(server)
+}
+
+// Nombre de servers online pour afficher dans le badge
+const onlineServersCount = computed(() => allServers.value.filter((s) => s.online).length)
+
+// Gestion de l'ouverture du drawer depuis le bouton
+function handleDrawerOpen() {
+  drawerOpen.value = true
+}
+
+// Sync route query params avec l'état des tabs
+onMounted(async () => {
+  // Fetch renderers au montage
+  await fetchRenderers()
+
+  // Sync initial des tabs avec les renderers
+  syncWithRenderers(allRenderers.value)
+
+  // Restaurer l'onglet actif depuis l'URL
+  const urlTabId = route.query.tab as string
+  if (urlTabId && tabs.value.find((t) => t.id === urlTabId)) {
+    switchTab(urlTabId)
+  }
+})
+
+// Watch renderers pour sync automatique des tabs
+watch(
+  () => allRenderers.value,
+  (newRenderers) => {
+    syncWithRenderers(newRenderers)
+  },
+  { deep: true },
+)
+
+// Watch les changements d'URL pour changer d'onglet
+watch(
+  () => route.query.tab,
+  (newTabId) => {
+    if (newTabId && typeof newTabId === 'string') {
+      const tab = tabs.value.find((t) => t.id === newTabId)
+      if (tab && activeTabId.value !== newTabId) {
+        switchTab(newTabId)
+      }
+    }
+  },
+)
+
+// Watch les changements d'onglet actif pour mettre à jour l'URL
+watch(
+  () => activeTabId.value,
+  (newActiveTabId) => {
+    const currentTabId = route.query.tab as string
+    if (currentTabId !== newActiveTabId) {
+      router.replace({
+        query: {
+          ...route.query,
+          tab: newActiveTabId,
+          tabs: tabs.value.map((t) => t.id).join(','),
+        },
+      })
+    }
+  },
+)
+
+// Composant dynamique selon le type d'onglet
+const currentTabComponent = computed(() => {
+  const tab = activeTab.value
+  if (!tab) return null
+
+  switch (tab.type) {
+    case 'renderer':
+      return RendererTabContent
+    case 'server':
+      return ServerTabContent
+    default:
+      return null
+  }
+})
+
+// Props pour le composant actif
+const currentTabProps = computed(() => {
+  const tab = activeTab.value
+  if (!tab || !tab.metadata) return null
+
+  if (tab.type === 'renderer' && tab.metadata.rendererId) {
+    return { rendererId: tab.metadata.rendererId }
+  }
+  if (tab.type === 'server' && tab.metadata.serverId) {
+    return { serverId: tab.metadata.serverId }
+  }
+  return null
+})
+</script>
+
+<template>
+  <div ref="viewRef" class="unified-control-view">
+    <!-- Zone de contenu -->
+    <main class="content-area">
+      <!-- État vide: aucun renderer détecté -->
+      <EmptyState v-if="isEmpty" />
+
+      <!-- Onglets renderers/servers avec keep-alive -->
+      <keep-alive v-else :max="12">
+        <component
+          v-if="currentTabComponent && currentTabProps"
+          :is="currentTabComponent"
+          :key="activeTab?.id"
+          v-bind="currentTabProps"
+        />
+      </keep-alive>
+    </main>
+
+    <!-- Barre d'onglets en bas -->
+    <BottomTabBar :online-servers-count="onlineServersCount" @open-drawer="handleDrawerOpen" />
+
+    <!-- Drawer servers (swipe depuis bord gauche) -->
+    <ServerDrawer v-model="drawerOpen" @server-selected="handleServerSelected" />
+  </div>
+</template>
+
+<style scoped>
+.unified-control-view {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--color-bg);
+}
+
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0;
+  position: relative;
+}
+
+/* Placeholder temporaire */
+.tab-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-xl);
+}
+
+.placeholder-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-lg);
+  max-width: 500px;
+  padding: var(--spacing-xl);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.placeholder-icon {
+  color: var(--color-primary);
+  opacity: 0.5;
+}
+
+.placeholder-title {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.placeholder-text {
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.placeholder-subtitle {
+  font-size: var(--text-sm);
+  color: var(--color-text-tertiary);
+  font-style: italic;
+  margin: 0;
+}
+
+/* Responsive pour 800x600 landscape */
+@media (min-width: 600px) and (orientation: landscape) {
+  .content-area {
+    padding: var(--spacing-md);
+  }
+}
+
+/* Responsive mobile portrait */
+@media (max-width: 768px) and (orientation: portrait) {
+  .content-area {
+    padding: var(--spacing-sm);
+  }
+
+  .placeholder-card {
+    padding: var(--spacing-lg);
+  }
+
+  .placeholder-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .placeholder-title {
+    font-size: var(--text-xl);
+  }
+
+  .placeholder-text {
+    font-size: var(--text-sm);
+  }
+}
+
+/* Animation de transition des onglets */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.v-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.v-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+</style>