static/style.css

@@ -148,13 +148,23 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
      l'espace restant une fois "max-width" atteint, comme voulu à l'origine. */
   width:100%;
   max-width:1600px;
+  /* Sans fil d'Ariane sur cette page (voir breadcrumb_wrap dans
+     screen_edit.html), .content garde quand même son padding par défaut
+     (28px en haut) — réduit ici pour que le canevas commence le plus haut
+     possible sur la page. */
+  padding:10px 20px 8px;
 }
 
 /* 3 colonnes : ajout d'éléments (gauche) / écran en grand (centre) / propriétés (droite) —
    toutes les trois occupent exactement la même hauteur (celle qui reste
    disponible), avec leur propre défilement interne si leur contenu dépasse. */
-.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:14px; flex:1 1 auto; min-height:0; }
-.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column; }
+.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:8px; flex:1 1 auto; min-height:0; }
+/* overflow:hidden (pas auto) : le défilement doit se faire DANS le
+   canevas lui-même (voir .canvasFrame plus bas) ou dans l'onglet actif
+   (.flowCanvasWrap/.animTimelineWrap ont déjà leur propre défilement),
+   jamais sur cette zone entière — sans quoi la barre d'onglets et la barre
+   d'outils défileraient avec le contenu au lieu de rester fixes en haut. */
+.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; }
 
 /* ---------- Panneaux gauche/droite flottants ---------- */
 /* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux
@@ -233,10 +243,25 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
 .aspectBtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
 
 .canvasFrame{
-  width:100%; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--panel);
+  /* flex:1 1 auto + min-height:0 : occupe tout l'espace restant sous la
+     barre d'outils dans .builderTabPanel (voir screen_edit.html), et c'est
+     LUI qui défile (overflow:auto) si le canevas ne peut pas être réduit
+     davantage (ex. fenêtre très basse) — jamais .builderCanvasArea (voir
+     plus haut), pour garder la barre d'onglets/d'outils toujours visible. */
+  flex:1 1 auto; min-height:0; width:100%; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--panel);
+  display:flex; align-items:flex-start; justify-content:center; overflow:auto;
 }
 .canvas{
-  position:relative; width:100%; max-width:100%; margin:0 auto; background:#0b0d12; border-radius:8px;
+  /* "Monté le plus haut possible" et "je dois voir tout l'écran" : plutôt
+     qu'une largeur pleine (l'ancien width:100%, qui pouvait rendre un
+     format Portrait bien plus haut que la fenêtre), la hauteur DISPONIBLE
+     devient la contrainte principale (height:100%) et la largeur se déduit
+     de l'aspect-ratio (posé en style inline, voir screen_edit.html) —
+     max-width:100% prend le relais si jamais c'est la largeur qui manque
+     en premier (fenêtre étroite/écran Paysage). Résultat : le canevas
+     entier tient toujours dans la zone visible, sans avoir à défiler pour
+     voir le bas de l'écran. */
+  position:relative; height:100%; width:auto; max-width:100%; flex:0 0 auto; margin:0 auto; background:#0b0d12; border-radius:8px;
   overflow:hidden; border:1px solid var(--border);
 }
 .canvasElement{
@@ -366,6 +391,12 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
   body.builderBody > main.content{ overflow:visible; }
   .builder3{ flex-direction:column; flex:none; }
   .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; }
+  /* Le "letterboxing" par hauteur (voir .canvas plus haut) suppose une
+     chaîne de hauteurs définies jusqu'ici — qui n'existe plus une fois
+     .builderCanvasArea repassée en "height:auto" ci-dessus. Revient donc à
+     un dimensionnement par LARGEUR, comme une page qui défile normalement. */
+  .canvasFrame{ flex:none; overflow:visible; }
+  .canvas{ height:auto; width:100%; }
   /* Trop peu de largeur pour qu'un panneau flottant ait un sens (il
      couvrirait tout l'écran) : les deux rejoignent la pile normale et
      restent toujours ouverts/visibles, quel que soit l'état mémorisé —

templates/screen_edit.html

@@ -6,11 +6,10 @@
 <link rel="stylesheet" href="{{ google_fonts_link }}">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
 {% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li><a href="{{ url_for('screens_list', slug=game.slug) }}">Écrans</a></li>
-<li class="is-active"><a>{{ screen.name }}</a></li>
-{% endblock %}
+<!-- Pas de fil d'Ariane sur cette page : le canevas doit être monté le
+     plus haut possible (voir .content-builder), et le nom de l'écran est
+     de toute façon déjà éditable juste au-dessus (panneau "Éléments"). -->
+{% block breadcrumb_wrap %}{% endblock %}
 {% block content %}
 {% if screen.is_template %}
 <p class="hint" style="background:#1c2130; border:1px solid #2b3140; border-radius:8px; padding:10px 14px; margin:10px 0;">