Éditeur de scène : le canevas remplit exactement l'espace disponible, plus de marges

Le calcul JS "object-fit:contain" du tour précédent gardait l'aspect-ratio
(Portrait/Paysage/Carré) au prix de marges vides sur les côtés dès que la
fenêtre n'avait pas exactement ce ratio - "prendre toute la place
disponible" et "garder l'aspect-ratio" sont deux exigences contradictoires
dans ce cas, et c'est la première qui doit l'emporter dans l'éditeur.

Le canevas (#canvas) remplit donc maintenant .canvasFrame à 100% x 100%,
sans plus tenir compte de l'aspect-ratio choisi dans l'éditeur - ce
réglage continue de s'appliquer normalement à l'aperçu jouable ("Jouer",
voir screen_set_aspect.py/play.html), qui reste la référence pour le
rendu final. Padding de .canvasFrame réduit au minimum. fitCanvasToFrame()
et son calcul en pixels n'ont plus lieu d'être - retirés entièrement.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

templates/screen_edit.html

@@ -1432,11 +1432,6 @@ function initBuilderPanel() {
   })();
 
   bindAspectButtons();
-  // #canvas est recréé à chaque rafraîchissement du panneau (voir
-  // refreshBuilderPanel ci-dessus, qui remplace tout #builder3.innerHTML)
-  // — sa taille en pixels calculée par fitCanvasToFrame() est donc perdue
-  // à chaque fois et doit être reposée ici.
-  fitCanvasToFrame();
 
   document.querySelectorAll('.uploadInput').forEach(function (input) {
     input.addEventListener('change', function () {
@@ -1700,8 +1695,11 @@ function bindAspectButtons() {
     btn.addEventListener('click', function () {
       document.querySelectorAll('.aspectBtn').forEach(function (b) { b.classList.remove('active'); });
       btn.classList.add('active');
+      // Dans l'éditeur (≥1300px), le canevas remplit tout .canvasFrame
+      // (voir .canvas dans style.css) — cet aspect-ratio ne sert donc plus
+      // qu'au repli en page empilée (<1300px, voir le media query) et à
+      // l'aperçu jouable ("Jouer"), pas à la mise en page ici.
       document.getElementById('canvas').style.aspectRatio = btn.dataset.aspect;
-      fitCanvasToFrame();
       fetch("/game/{{ game.slug }}/screens/{{ screen.id }}/aspect", {
         method: 'POST', headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ aspect: btn.dataset.aspect }),
@@ -1710,38 +1708,6 @@ function bindAspectButtons() {
   });
 }
 
-// Le canevas doit "prendre toute la place disponible" dans .canvasFrame
-// tout en gardant son aspect-ratio (Portrait/Paysage/Carré) : calcule la
-// plus grande taille en pixels qui tient à la fois en largeur ET en
-// hauteur (comme un "object-fit:contain"), posée en style inline — un pur
-// CSS (aspect-ratio + height:100%) s'est révélé peu fiable ici (voir le
-// commentaire sur .canvas dans style.css). Sous 1300px (mise en page
-// empilée, une seule colonne, page qui défile normalement), la taille en
-// pixels n'a plus lieu d'être : on efface le style inline pour laisser la
-// règle CSS de repli (largeur pleine) reprendre la main.
-function fitCanvasToFrame() {
-  var canvas = document.getElementById('canvas');
-  var frame = document.querySelector('.canvasFrame');
-  if (!canvas || !frame) return;
-  if (window.innerWidth <= 1300) {
-    canvas.style.width = '';
-    canvas.style.height = '';
-    return;
-  }
-  var cs = getComputedStyle(frame);
-  var availW = frame.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
-  var availH = frame.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
-  if (availW <= 0 || availH <= 0) return;
-  var parts = (canvas.style.aspectRatio || '9/16').split('/');
-  var ratio = parseFloat(parts[0]) / parseFloat(parts[1]);
-  if (!ratio) return;
-  var w = availW, h = w / ratio;
-  if (h > availH) { h = availH; w = h * ratio; }
-  canvas.style.width = w + 'px';
-  canvas.style.height = h + 'px';
-}
-window.addEventListener('resize', fitCanvasToFrame);
-
 document.querySelectorAll('.uploadInput').forEach(function(input){
   input.addEventListener('change', function(){
     if (!input.files.length) return;