Update style/default/style.css

style/default/style.css

@@ -184,10 +184,18 @@ progress::-moz-progress-bar      { background-color: #4682B4; }
   flex-shrink: 0;
 }
 .widget-button:hover { background-color: rgba(242,240,239,0.7); }
-.fullscreen-toggle  { top: 12px; right: 12px; }
-.help-toggle        { top: 12px; right: 52px;  font-size: 18px; }
-.reset-camera-btn   { top: 12px; right: 92px;  font-size: 18px; line-height: normal; padding: 0; }
-.tooltips-toggle    { top: 12px; right: 132px; font-size: 18px; }
+
+/* ── Positionnement — côté DROIT (défaut) ── */
+.fullscreen-toggle  { top: 12px; right: 12px;  left: auto; }
+.help-toggle        { top: 12px; right: 52px;  left: auto; font-size: 18px; }
+.reset-camera-btn   { top: 12px; right: 92px;  left: auto; font-size: 18px; line-height: normal; padding: 0; }
+.tooltips-toggle    { top: 12px; right: 132px; left: auto; font-size: 18px; }
+
+/* ── Positionnement — côté GAUCHE (classe btn-left sur .viewer-container) ── */
+.btn-left .fullscreen-toggle  { right: auto; left: 12px;  }
+.btn-left .help-toggle        { right: auto; left: 52px;  }
+.btn-left .reset-camera-btn   { right: auto; left: 92px;  }
+.btn-left .tooltips-toggle    { right: auto; left: 132px; }
 
 .fake-fullscreen .widget-button,
 :fullscreen .widget-button,
@@ -213,13 +221,19 @@ progress::-moz-progress-bar      { background-color: #4682B4; }
   padding: 0;
 }
 
-/* ── Mobile : boutons ── */
+/* ── Mobile : boutons — côté droit (défaut) ── */
 .ply-widget-container.mobile .widget-button { width: 24px; height: 24px; font-size: 12px; }
 .ply-widget-container.mobile .help-toggle   { font-size: 14px; }
-.ply-widget-container.mobile .fullscreen-toggle { top: 8px; right: 8px; }
-.ply-widget-container.mobile .help-toggle       { top: 8px; right: 40px; }
-.ply-widget-container.mobile .reset-camera-btn  { top: 8px; right: 72px; }
-.ply-widget-container.mobile .tooltips-toggle   { top: 8px; right: 104px; }
+.ply-widget-container.mobile .fullscreen-toggle { top: 8px; right: 8px;   left: auto; }
+.ply-widget-container.mobile .help-toggle       { top: 8px; right: 40px;  left: auto; }
+.ply-widget-container.mobile .reset-camera-btn  { top: 8px; right: 72px;  left: auto; }
+.ply-widget-container.mobile .tooltips-toggle   { top: 8px; right: 104px; left: auto; }
+
+/* ── Mobile : boutons — côté gauche ── */
+.ply-widget-container.mobile .btn-left .fullscreen-toggle { right: auto; left: 8px;   }
+.ply-widget-container.mobile .btn-left .help-toggle       { right: auto; left: 40px;  }
+.ply-widget-container.mobile .btn-left .reset-camera-btn  { right: auto; left: 72px;  }
+.ply-widget-container.mobile .btn-left .tooltips-toggle   { right: auto; left: 104px; }
 
 #application-canvas { width: 100%; height: 100%; display: block; }
 html, body { margin: 0; padding: 0; height: 100%; }
@@ -379,8 +393,6 @@ html, body { margin: 0; padding: 0; height: 100%; }
   display: flex;
 }
 
-/* Grid trick : image et bouton fermer partagent la même cellule →
-   le bouton se positionne dans le coin de l'image quelle que soit sa taille */
 .ann-lb-content-wrap {
   position: relative;
   display: grid;
@@ -396,7 +408,6 @@ html, body { margin: 0; padding: 0; height: 100%; }
   box-shadow: 0 8px 40px rgba(0,0,0,0.6);
   grid-area: 1 / 1;
 }
-/* Bouton fermer positionné par le grid, sans position: absolute */
 .ann-lb-close {
   grid-area: 1 / 1;
   align-self: start;