fix: positionnement lecteur media (mobile/desktop) et drag libre de la mini-video #110

frontend/style.css

@@ -9913,6 +9913,7 @@ body.desktop-mode .editor-container {
   border-radius: 14px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
   backdrop-filter: blur(12px);
+  overflow: hidden;
 }
 .np-dock--audio .np-media {
   display: none;
@@ -9931,11 +9932,12 @@ body.desktop-mode .editor-container {
   cursor: pointer;
 }
 .np-dock-info {
-  flex: 1 1 auto;
+  flex: 1 1 120px;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
+  cursor: pointer;
 }
 .np-dock-title {
   color: var(--text);
@@ -9958,8 +9960,8 @@ body.desktop-mode .editor-container {
   gap: 2px;
 }
 .np-dock-progress {
-  flex: 1 1 180px;
-  min-width: 120px;
+  flex: 1 1 160px;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -10209,6 +10211,13 @@ body.desktop-mode .editor-container {
   font-size: 0.75rem;
 }
 
+/* Mid-size screens: drop the volume slider before the row gets cramped. */
+@media (max-width: 1100px) {
+  .np-dock--audio .np-volume {
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
   .np-dock--audio {
     left: 8px;
@@ -10216,11 +10225,39 @@ body.desktop-mode .editor-container {
     bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px);
     transform: none;
     width: auto;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      "progress progress progress progress"
+      "art info controls actions";
+    align-items: center;
+    gap: 6px 8px;
+    padding: 8px 10px;
+    border-radius: 12px;
   }
-  .np-dock-progress {
-    flex-basis: 90px;
+  .np-dock--audio .np-dock-art {
+    grid-area: art;
+    width: 38px;
+    height: 38px;
   }
-  .np-volume {
+  .np-dock--audio .np-dock-info {
+    grid-area: info;
+  }
+  .np-dock--audio .np-dock-controls {
+    grid-area: controls;
+  }
+  .np-dock--audio .np-dock-progress {
+    grid-area: progress;
+    width: 100%;
+    min-width: 0;
+  }
+  .np-dock--audio .np-dock-actions {
+    grid-area: actions;
+  }
+  /* Compact mobile: keep play / return / close; expand via the artwork. */
+  .np-dock--audio [data-np="prev"],
+  .np-dock--audio [data-np="next"],
+  .np-dock--audio [data-np="expand"] {
     display: none;
   }
   .np-dock--video {