fix(web): lecteur mobile — compacter la barre du lecteur sur téléphone (wrap flex, libellés secondaires masqués, navigation/plein écran en icônes, select de mode réductible) pour éliminer le rognage à droite (bug #40)

apps/web/src/styles/app.css

@@ -1282,6 +1282,78 @@ main.app-main-reader .reader-page {
 
   .reader-topbar {
     gap: 8px;
+    flex-wrap: wrap;
+    align-content: start;
+    overflow: hidden;
+  }
+
+  .reader-back-button,
+  .reader-nav-button,
+  .reader-fullscreen-toggle {
+    width: 34px;
+    min-width: 34px;
+    padding: 0;
+  }
+
+  .reader-back-button {
+    order: 1;
+  }
+
+  .reader-title {
+    order: 2;
+    flex: 1 1 120px;
+    font-size: 0.9rem;
+  }
+
+  .reader-position {
+    order: 3;
+    min-width: 78px;
+    font-size: 0.78rem;
+  }
+
+  .reader-fullscreen-toggle {
+    order: 4;
+    margin-left: 0;
+  }
+
+  .reader-mode-control {
+    order: 5;
+    flex: 1 1 132px;
+    min-width: 0;
+  }
+
+  .reader-mode-control select {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    font-size: 0.78rem;
+  }
+
+  .reader-previous-button {
+    order: 6;
+  }
+
+  .reader-next-button {
+    order: 7;
+  }
+
+  .reader-zoom-controls {
+    order: 8;
+    flex: 0 1 auto;
+    min-width: 0;
+    gap: 4px;
+  }
+
+  .reader-zoom-label {
+    min-width: 46px;
+    font-size: 0.78rem;
+  }
+
+  .reader-back-button span,
+  .reader-nav-button span,
+  .reader-fullscreen-toggle span,
+  .reader-mode-control > span {
+    display: none;
   }
 
   .reader-zoom-reset {