Add an Onglets (Tabs) widget

New widget where each tab is a real "conteneur" element posed as a child
(see screens/elements/add_tab.py) — this reuses everything that already
exists for a normal container (adding a Répéteur/Conteneur/etc. inside via
"Ajouter DANS ce conteneur", renaming to change the tab's visible label,
deleting via the standard trash icon) instead of inventing a separate
storage format for tabs.

The widget's own properties panel gets a dedicated "Onglets" section to
add a tab, rename one, jump to its content, or delete it. Rendering
(render_onglets.py) builds a tab bar + one panel per tab, switched
client-side (forgeShowTab, in both screen_edit.html and play.html) with
only one panel visible at a time.

Distinct from the existing "activer_onglet" flow action (2.3, manual
show-one/hide-siblings) — that stays available for custom show/hide
wiring; this widget is the turnkey version with tab management built in.

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

templates/play.html

@@ -74,6 +74,20 @@
   let gameData = {{ payload_json|safe }};
   let screensData = gameData.screens;
 
+  // Élément à onglets (voir render_onglets.py) : bascule le panneau visible
+  // sans aller-retour serveur — même fonction que dans screen_edit.html,
+  // pour un comportement identique éditeur/jeu.
+  function forgeShowTab(btn) {
+    var groupId = btn.dataset.tabBtn;
+    var targetId = btn.dataset.tabTarget;
+    document.querySelectorAll('[data-tab-btn="' + groupId + '"]').forEach(function (b) {
+      b.classList.toggle('active', b === btn);
+    });
+    document.querySelectorAll('[data-tab-group="' + groupId + '"]').forEach(function (p) {
+      p.style.display = (p.id === targetId) ? '' : 'none';
+    });
+  }
+
   function showScreen(id) {
     document.querySelectorAll('.playScreen').forEach(s => s.style.display = 'none');
     const el = document.querySelector('.playScreen[data-screen-id="' + id + '"]');

templates/screen_edit.html

@@ -186,6 +186,38 @@
       </details>
       {% endif %}
 
+      {% if el.widget == 'onglets' %}
+      {% set tabs = children_of.get(el.id, []) %}
+      <details class="propGroup">
+        <summary>🗂️ Onglets{{ ' (' ~ tabs|length ~ ')' if tabs else '' }}</summary>
+        <div class="propGroupBody">
+      {% if tabs %}
+      <div class="list">
+        {% for tab in tabs %}
+        <div class="listRow" style="display:flex; flex-direction:column; gap:6px;">
+          <form method="post" action="{{ url_for('element_rename', slug=game.slug, element_id=tab.id) }}" class="fieldRow" style="align-items:center; margin:0;">
+            <input type="text" name="name" value="{{ tab.name or ('Onglet ' ~ loop.index) }}" placeholder="Nom de l'onglet" style="flex:1;">
+            <button type="submit" class="smallBtn">Renommer</button>
+          </form>
+          <div class="fieldRow" style="align-items:center; margin:0;">
+            <a class="smallBtn" style="flex:1; text-align:center;" href="{{ url_for('screen_edit', slug=game.slug, screen_id=screen.id, selected=tab.id) }}">📥 Contenu de l'onglet</a>
+            <form method="post" action="{{ url_for('element_delete', slug=game.slug, element_id=tab.id) }}" onsubmit="return confirm('Supprimer cet onglet et tout son contenu ?');">
+              <button type="submit" class="smallBtn danger">🗑️</button>
+            </form>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% else %}
+      <p class="hint">Aucun onglet pour l'instant.</p>
+      {% endif %}
+      <form method="post" action="{{ url_for('element_tab_add', slug=game.slug, element_id=el.id) }}" style="margin-top:8px;">
+        <button type="submit" class="smallBtn primary" style="width:100%;">➕ Ajouter un onglet</button>
+      </form>
+        </div>
+      </details>
+      {% endif %}
+
       {% set size_ctrl_keys = ['child-width', 'child-height'] %}
       {% set size_ctrls = {} %}
       {% for c in selected_controls if c.key in size_ctrl_keys %}{% set _ = size_ctrls.update({c.key: c}) %}{% endfor %}
@@ -675,6 +707,22 @@ function applySelectionHighlight(id) {
   if (node) node.classList.add('elementHighlighted');
 }
 
+// ---------- Élément à onglets : bascule d'onglet côté client ----------
+//
+// Un seul panneau visible à la fois (voir render_onglets.py) — basculé ici
+// plutôt que par un aller-retour serveur, pour un rendu instantané aussi
+// bien dans l'éditeur qu'en jeu (voir la même fonction dans play.html).
+function forgeShowTab(btn) {
+  var groupId = btn.dataset.tabBtn;
+  var targetId = btn.dataset.tabTarget;
+  document.querySelectorAll('[data-tab-btn="' + groupId + '"]').forEach(function (b) {
+    b.classList.toggle('active', b === btn);
+  });
+  document.querySelectorAll('[data-tab-group="' + groupId + '"]').forEach(function (p) {
+    p.style.display = (p.id === targetId) ? '' : 'none';
+  });
+}
+
 if (!window.__forgeTreeToggleBound) {
   window.__forgeTreeToggleBound = true;
   document.addEventListener('click', function (e) {