Éditeur de scène : supprime le fil d'Ariane, canevas remonté, défilement propre au canevas

Le fil d'Ariane disparaît entièrement sur cette page (breadcrumb_wrap vide)
- le nom de l'écran est de toute façon déjà éditable juste au-dessus, dans
le panneau "Éléments" (voir le tour précédent) - et .content-builder perd
son padding par défaut hérité de .content, pour que le canevas commence le
plus haut possible.

Change aussi la façon dont le canevas est dimensionné : il était
jusqu'ici contraint par la LARGEUR (width:100%), ce qui pouvait le rendre
bien plus haut que la fenêtre pour un format Portrait - obligeant à
défiler .builderCanvasArea (toolbar/onglets compris) pour voir le bas de
l'écran. Il est maintenant contraint par la HAUTEUR disponible
(height:100%, la largeur se déduisant de l'aspect-ratio), avec
max-width:100% en secours si c'est la largeur qui manque en premier -
l'écran entier reste donc visible sans défiler. Le défilement, s'il reste
nécessaire (fenêtre très basse), se fait maintenant sur .canvasFrame
lui-même, jamais sur .builderCanvasArea (repassé à overflow:hidden) : la
barre d'onglets et la barre d'outils restent toujours fixes en haut.

Ajoute le pendant pour le repli en page empilée (< 1300px, une seule
colonne) : le "letterboxing" par hauteur suppose une chaîne de hauteurs
définies qui n'existe plus une fois empilé - revient alors à un
dimensionnement par largeur, cohérent avec une page qui défile normalement.

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

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; }
+.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:8px; 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; }
+/* 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 %}
+<!-- Pas de fil d'Ariane sur cette page : le canevas doit être monté le
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
+     plus haut possible (voir .content-builder), et le nom de l'écran est
-<li><a href="{{ url_for('screens_list', slug=game.slug) }}">Écrans</a></li>
+     de toute façon déjà éditable juste au-dessus (panneau "Éléments"). -->
-<li class="is-active"><a>{{ screen.name }}</a></li>
+{% block breadcrumb_wrap %}{% endblock %}
-{% 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;">