Make Jauge, Onglets, and every form-field widget real native Bulma elements

- Jauge now renders a real <progress class="progress"> instead of a hand-built pair of absolutely-positioned divs. The bas/haut color interpolation still works, set via Bulma's own --bulma-progress-value-background-color CSS custom property rather than fighting the class.
- Onglets' tab strip is now genuine Bulma tabs markup (tabs > ul > li, is-active on the li) instead of custom forgeTabBar/forgeTabBtn classes; forgeShowTab (duplicated in screen_edit.html and play.html) now toggles is-active to match.
- Champ texte/email/mot de passe get class="input", Zone de texte gets class="textarea", Case à cocher/Bouton radio's existing <label> wrapper gets class="checkbox"/"radio" (Bulma's own convention — the structure already matched, just needed the class), Liste déroulante is wrapped in Bulma's required <div class="select"> (a bare class on the <select> itself has zero effect in Bulma), Tableau gets class="table is-bordered is-fullwidth" with the per-cell inline borders removed so Bulma's own table styling applies.
- Removed the now-dead .forgeTabBar/.forgeTabBtn CSS.

Updated tests/test_jauge.py and tests/test_onglets_widget.py assertions to match the new markup (value="X" attribute instead of width:X% inline style, --bulma-progress-value-background-color instead of background-color, forgeShowTab(this) marker instead of the removed forgeTabBtn class) — same behavior, different rendering mechanism. Full suite green (89 passed), verified end to end against the real "test" project via the actual /play route.

screens/rendering/render_checkbox_or_radio.py

@@ -12,4 +12,8 @@ def _render_checkbox_or_radio(el, meta, slug=None, children_map=None, ctx=None,
     attrs["type"] = input_type
     style = _style_string(el, " display:flex; align-items:center; gap:8px;", parent_flex_direction)
     content = _apply_ctx(el.get("content") or "", ctx)
-    return f'<label {_attr_string({}, style)}><input {_attr_string(attrs, "")}> {html_lib.escape(content)}</label>'
+    # <label class="checkbox"/"radio"> entourant l'input EST la façon dont
+    # Bulma stylise nativement une case à cocher/un bouton radio — pas de
+    # wrapper supplémentaire nécessaire, la structure existante correspondait
+    # déjà exactement à cette convention.
+    return f'<label {_attr_string({"class": input_type}, style)}><input {_attr_string(attrs, "")}> {html_lib.escape(content)}</label>'

screens/rendering/render_jauge.py

@@ -127,14 +127,21 @@ def _render_jauge(el, meta, slug, children_map=None, ctx=None, parent_flex_direc
                 f'color:#e8eaf0; text-align:{text_align};">{html_lib.escape(str(nom_value))}</div>'
             )
 
-    # La classe "jaugeBar" est repérée côté client (play.html, refreshRuntimeData)
-    # pour savoir que ce wrapper doit être régénéré après toute action
-    # "Modifier une donnée" — sinon la jauge resterait figée sur sa valeur
-    # de départ après un changement, exactement comme il fallait déjà
-    # repérer "repeaterItem" pour les Répéteurs (voir 1.1/1.2).
+    # Vraie balise <progress> Bulma ("class=progress") plutôt qu'une barre
+    # maison faite de <div> positionnés — la couleur dégradée bas/haut (voir
+    # _interpolate_color ci-dessus) reste possible nativement : Bulma pilote
+    # justement le remplissage via la variable CSS --bulma-progress-value-
+    # background-color, qu'on peut fixer en ligne à la couleur calculée sans
+    # sortir du système de classes de Bulma. La classe "jaugeBar" est
+    # repérée côté client (play.html, refreshRuntimeData) pour savoir que
+    # cette balise doit être régénérée après toute action "Modifier une
+    # donnée" — sinon la jauge resterait figée sur sa valeur de départ après
+    # un changement, exactement comme il fallait déjà repérer "repeaterItem"
+    # pour les Répéteurs (voir 1.1/1.2).
     bar = (
-        f'<div class="jaugeBar" style="position:absolute; left:0; top:0; bottom:0; width:{percent}%; '
-        f'background-color:{fill_color}; transition:width .3s ease, background-color .3s ease;"></div>'
+        f'<progress class="progress jaugeBar" value="{percent}" max="100" '
+        f'style="--bulma-progress-value-background-color:{fill_color}; --bulma-progress-bar-background-color:#1c2130; '
+        f'margin:0; border-radius:6px; transition:background-color .3s ease;">{percent}%</progress>'
     )
     # min-height (pas 0) : un élément posé DANS un conteneur a une hauteur
     # "auto" par défaut (voir _style_string) — "flex:1 1 auto" seul n'a
@@ -145,7 +152,7 @@ def _render_jauge(el, meta, slug, children_map=None, ctx=None, parent_flex_direc
     # l'élément a une vraie hauteur (posé directement sur un écran, ou
     # hauteur fixée via "Position & taille").
     bar_wrap = (
-        f'<div style="position:relative; overflow:hidden; background:#1c2130; border-radius:6px; '
+        f'<div style="position:relative; display:flex; align-items:center; '
         f'flex:1 1 auto; min-height:14px;">{bar}{label_html}</div>'
     )
     return (

screens/rendering/render_onglets.py

@@ -38,10 +38,14 @@ def _render_onglets(el, meta, slug, children_map=None, ctx=None, parent_flex_dir
         active = i == 0
         tab_html = render_element_html(tab, slug, children_map, ctx, parent_flex_direction=flex_dir)
         target_id = f"tabpanel-{tab['id']}"
+        # <li> Bulma natif ("tabs" > "ul" > "li", "is-active" sur le <li> —
+        # pas le <a> — pour l'onglet en cours) : le <li> porte le clic ET les
+        # data-attributes ciblés par forgeShowTab (voir screen_edit.html /
+        # play.html), le <a> imbriqué n'est là que pour le rendu visuel Bulma.
         bar_items.append(
-            f'<button type="button" class="forgeTabBtn{" active" if active else ""}" '
+            f'<li class="{"is-active" if active else ""}" '
             f'data-tab-btn="{group_id}" data-tab-target="{target_id}" '
-            f'onclick="forgeShowTab(this)">{html_lib.escape(str(label))}</button>'
+            f'onclick="forgeShowTab(this)"><a>{html_lib.escape(str(label))}</a></li>'
         )
         hidden_style = "" if active else ' style="display:none;"'
         panels.append(
@@ -51,7 +55,7 @@ def _render_onglets(el, meta, slug, children_map=None, ctx=None, parent_flex_dir
 
     return (
         f'<div {_attr_string(attrs, style)}>'
-        f'<div class="forgeTabBar">{"".join(bar_items)}</div>'
+        f'<div class="tabs"><ul>{"".join(bar_items)}</ul></div>'
         f'<div class="forgeTabPanels" style="flex:1 1 auto; min-height:0;">{"".join(panels)}</div>'
         f"</div>"
     )

screens/rendering/render_select.py

@@ -4,12 +4,22 @@ from .visible_attrs import _visible_attrs
 from .apply_ctx import _apply_ctx
 from .style_string import _style_string
 from .attr_string import _attr_string
+from .auto_id import _auto_id
 
 
 def _render_select(el, meta, slug=None, children_map=None, ctx=None, parent_flex_direction=None):
-    attrs = _visible_attrs(el, meta, ctx)
-    style = _style_string(el, parent_flex_direction=parent_flex_direction)
+    # Bulma stylise un <select> via la classe "select" posée sur un <div>
+    # QUI L'ENTOURE (le petit triangle est un ::after de ce wrapper) — la
+    # poser directement sur la balise <select> elle-même n'aurait aucun
+    # effet. Le wrapper porte donc l'id/positionnement habituel de
+    # l'élément (comme tous les autres widgets), le <select> reste à
+    # l'intérieur avec ses propres attributs de formulaire (name, required).
+    outer_attrs = _visible_attrs(el, meta, ctx)
+    select_attrs = {k: v for k, v in outer_attrs.items() if k not in ("id", "class", "data-element-id", "data-anim-target")}
+    wrapper_attrs = {k: v for k, v in outer_attrs.items() if k in ("id", "data-element-id", "data-anim-target")}
+    style = _style_string(el, " display:flex;", parent_flex_direction)
     content = _apply_ctx(el.get("content") or "", ctx)
     options = [o.strip() for o in content.split("\n") if o.strip()]
     opts_html = "".join(f'<option value="{html_lib.escape(o)}">{html_lib.escape(o)}</option>' for o in options)
-    return f'<select {_attr_string(attrs, style)}>{opts_html}</select>'
+    select_html = f'<select {_attr_string(select_attrs, "")}>{opts_html}</select>'
+    return f'<div {_attr_string(wrapper_attrs, style)}><div class="select is-fullwidth">{select_html}</div></div>'

screens/rendering/render_table.py

@@ -10,15 +10,12 @@ def _render_table(el, meta, slug=None, children_map=None, ctx=None, parent_flex_
     attrs = _visible_attrs(el, meta, ctx)
     header_row = (el.get("attributes") or {}).get("_header_row") in ("1", "true", "on")
     content = _apply_ctx(el.get("content") or "", ctx)
-    style = _style_string(el, " border-collapse:collapse;", parent_flex_direction)
+    style = _style_string(el, "", parent_flex_direction)
     rows = [r for r in content.split("\n") if r.strip()]
     html_rows = []
     for i, r in enumerate(rows):
         cells = r.split(";")
         cell_tag = "th" if (header_row and i == 0) else "td"
-        cells_html = "".join(
-            f'<{cell_tag} style="border:1px solid #2b3140; padding:6px 8px;">{html_lib.escape(c.strip())}</{cell_tag}>'
-            for c in cells
-        )
+        cells_html = "".join(f"<{cell_tag}>{html_lib.escape(c.strip())}</{cell_tag}>" for c in cells)
         html_rows.append(f"<tr>{cells_html}</tr>")
     return f'<table {_attr_string(attrs, style)}>{"".join(html_rows)}</table>'

screens/widgets/registry.py

@@ -100,7 +100,7 @@ WIDGETS = {
     },
     "champ_texte": {
         "label": "Champ — texte", "icon": "⌨️", "tag": "input", "has_content": False, "self_closing": True,
-        "w": 40, "h": 8, "default_content": "", "fixed_attrs": {"type": "text"},
+        "w": 40, "h": 8, "default_content": "", "fixed_attrs": {"type": "text", "class": "input"},
         "controls": [
             c_text("placeholder", "Texte indicatif", "attr:placeholder", placeholder="ex. Votre réponse", group="Contenu"),
             c_text("name", "Nom du champ", "attr:name", placeholder="ex. reponse1", group="Contenu"),
@@ -109,7 +109,7 @@ WIDGETS = {
     },
     "champ_email": {
         "label": "Champ — email", "icon": "📧", "tag": "input", "has_content": False, "self_closing": True,
-        "w": 40, "h": 8, "default_content": "", "fixed_attrs": {"type": "email"},
+        "w": 40, "h": 8, "default_content": "", "fixed_attrs": {"type": "email", "class": "input"},
         "controls": [
             c_text("placeholder", "Texte indicatif", "attr:placeholder", placeholder="ex. votre@email.com", default="votre@email.com", group="Contenu"),
             c_text("name", "Nom du champ", "attr:name", placeholder="ex. email", group="Contenu"),
@@ -118,7 +118,7 @@ WIDGETS = {
     },
     "champ_mot_de_passe": {
         "label": "Champ — mot de passe", "icon": "🔒", "tag": "input", "has_content": False, "self_closing": True,
-        "w": 40, "h": 8, "default_content": "", "fixed_attrs": {"type": "password"},
+        "w": 40, "h": 8, "default_content": "", "fixed_attrs": {"type": "password", "class": "input"},
         "controls": [
             c_text("placeholder", "Texte indicatif", "attr:placeholder", placeholder="ex. Mot de passe", group="Contenu"),
             c_text("name", "Nom du champ", "attr:name", placeholder="ex. mot_de_passe", group="Contenu"),
@@ -149,7 +149,7 @@ WIDGETS = {
     },
     "zone_texte": {
         "label": "Zone de texte", "icon": "🗒️", "tag": "textarea", "has_content": False,
-        "w": 40, "h": 18, "default_content": "",
+        "w": 40, "h": 18, "default_content": "", "fixed_attrs": {"class": "textarea"},
         "controls": [
             c_text("placeholder", "Texte indicatif", "attr:placeholder", placeholder="ex. Votre message", group="Contenu"),
             c_text("name", "Nom du champ", "attr:name", placeholder="ex. message", group="Contenu"),
@@ -195,6 +195,7 @@ WIDGETS = {
     "tableau": {
         "label": "Tableau", "icon": "🗂️", "tag": "table", "has_content": True, "special_render": "table",
         "w": 55, "h": 25, "default_content": "Colonne 1;Colonne 2\nValeur A;Valeur B",
+        "fixed_attrs": {"class": "table is-bordered is-fullwidth"},
         "controls": [
             c_textarea("content", "Contenu — une ligne par rangée, colonnes séparées par ;", "content",
                        default="Colonne 1;Colonne 2\nValeur A;Valeur B", group="Contenu"),