@micheeeeel/yinyangapp 2.5.0 → 2.6.0

package/dist/types/components/search/GlobalSearchController.d.ts

@@ -53,20 +53,32 @@ export interface GlobalSearchControllerOptions {
     onKeyEventGroupToggle?: (componentIndex: number, open: boolean) => void;
 }
 export declare class GlobalSearchController {
-    private readonly index;
+    private index;
     private readonly actionMap;
     private readonly options;
     private inputEl;
     private listEl;
     private clearBtn;
-    private activeIndex;
     private currentResults;
-    /** Référence directe à l'item actuellement surligné (évite O(n) querySelectorAll). */
-    private _activeItemEl;
     /** Timer de debounce pour l'input de recherche. */
     private _inputDebounceTimer;
-    /** Vrai quand le rendu courant est un arbre filtré (query non vide). */
-    private _filteredTreeMode;
+    /**
+     * Panneau de résultats semi-transparent, posé par-dessus l'arbre tant
+     * qu'une query est saisie. L'arbre reste en place dessous : cliquer un
+     * résultat le synchronise (applyTreeSync), replie le panneau sur son
+     * en-tête pour dégager la hiérarchie et vide le champ (la query est
+     * mémorisée) ; un clic sur l'en-tête rouvre les résultats. Le
+     * panneau ne se ferme qu'à la validation (Entrée sur le résultat déjà
+     * actif, bouton ✓, clic dans l'arbre) ou sur Échap / effacement de la query.
+     */
+    private _stackEl;
+    private _overlayEl;
+    private _overlayListEl;
+    private _overlayCountEl;
+    /** Ligne du panneau désignée au clavier (flèches), distincte de la sélection. */
+    private _overlayCursorEl;
+    /** 5 dernières queries validées (plus récente en tête), proposées au clic sur le champ vide. */
+    private _recentQueries;
     /** Cache hex + rgb par oddId — calculé une seule fois au démarrage. */
     private readonly oddRgbCache;
     /** Index composante id → index pour décodage O(1) des data-nav-key. */
@@ -124,6 +136,16 @@ export declare class GlobalSearchController {
     private _descBtns;
     constructor(options: GlobalSearchControllerOptions);
     mount(containerOrId: string | HTMLElement): void;
+    /** Bascule du mode adverse (voir adverseMode.ts) : actions et événements
+     *  montrés changent de catalogue, l'index de recherche et l'arbre sont
+     *  donc reconstruits — l'état d'ouverture et la sélection, portés par le
+     *  contrôleur, sont rejoués par renderTree. */
+    private rebuildForAdverseMode;
+    /**
+     * Enveloppe la liste dans un conteneur positionné et y ajoute le panneau
+     * de résultats (caché tant qu'aucune query n'est saisie).
+     */
+    private mountResultsOverlay;
     /**
      * Événements Clés correspondant à la requête, groupés par facette.
      *
@@ -136,6 +158,40 @@ export declare class GlobalSearchController {
     private search;
     private handleInput;
     private handleKeyDown;
+    private isResultsOverlayOpen;
+    private setResultsOverlayVisible;
+    private isRecentQueriesShown;
+    private rememberQuery;
+    /** Affiche les recherches récentes dans le panneau (champ vide uniquement). */
+    private showRecentQueries;
+    private setOverlayTitle;
+    private applyRecentQuery;
+    private isResultsOverlayCollapsed;
+    /** Réduit le panneau à son en-tête pour dégager la hiérarchie, sans perdre la recherche. */
+    private setResultsOverlayCollapsed;
+    /**
+     * Valide la recherche : efface la query et retire le panneau. La sélection
+     * courante (le dernier résultat activé) reste en place dans l'arbre.
+     */
+    private closeResultsOverlay;
+    private overlayRows;
+    private setOverlayCursor;
+    /**
+     * Active un résultat : sélection + diagramme (emitNav) et focus de l'arbre
+     * en arrière-plan (applyTreeSync). Le panneau se replie sur son en-tête
+     * pour laisser voir la hiérarchie, sans fermer la recherche.
+     */
+    private previewOverlayTarget;
+    /**
+     * Mémorise la query saisie puis vide le champ, sans toucher au panneau :
+     * replié, il garde ses résultats (rouvrables par l'en-tête) tandis que le
+     * champ est prêt pour une nouvelle recherche.
+     */
+    private releaseQueryField;
+    private previewOverlayRow;
+    /** Reflète la sélection courante sur les lignes du panneau. */
+    private syncOverlaySelection;
+    private setupOverlayListeners;
     /**
      * Version debounceée de handleInput(), utilisée par le listener "input".
      * Les appels programmatiques (clear, Escape, setQuery) appellent handleInput() directement.
@@ -147,6 +203,10 @@ export declare class GlobalSearchController {
      * éliminant les N listeners inline recréés à chaque renderTree().
      */
     private setupDelegatedListeners;
+    /** Drag depuis une ligne Action ou Événement Clé (arbre ou panneau de résultats). */
+    private handleRowPointerDown;
+    /** Survol d'une ligne (arbre ou panneau de résultats) → signalement dans le diagramme. */
+    private emitRowHover;
     /** Décode un data-nav-key en SearchNavTarget. O(1) grâce à compIdToIndex. */
     private _decodeNavKey;
     private _clearNodeCaches;
@@ -171,7 +231,7 @@ export declare class GlobalSearchController {
      * `alwaysOpen` force l'ouverture du groupe (arbre filtré, tout déplié).
      */
     private appendKeyEventGroup;
-    private renderFilteredTree;
+    private renderResultsOverlay;
     private renderContextEmptyState;
     /**
      * Rend le chemin unique composante → ODD → cutting dans le panneau Éclairage.
@@ -231,7 +291,6 @@ export declare class GlobalSearchController {
     private restoreExpandedDesc;
     private highlightMatch;
     private syncClearBtn;
-    private updateActiveItem;
     private navKeyFromTarget;
     private setSelectedNavKey;
     private restoreSelectedRow;
@@ -307,7 +366,7 @@ export declare class GlobalSearchController {
     /**
      * Cœur partagé de la synchronisation arbre→diagramme.
      * Ouvre les nœuds nécessaires, sélectionne la ligne et scrolle jusqu'à elle.
-     * No-op en mode arbre filtré (query active).
+     * Reste actif pendant une recherche : l'arbre vit sous le panneau de résultats.
      */
     private applyTreeSync;
     /** Active ou désactive le mode "action sélectionnée" : bloque les mises à jour d'arbre/sélection pour les cibles non-action. */

package/dist/types/components/view/BorderDrawer.d.ts

@@ -149,6 +149,11 @@ export declare class BorderDrawer {
      *  previously-tracked index, so the single-spotlight invariant holds
      *  whatever state the ring was left in. */
     revealFacetteImage(segmentIndex: number): void;
+    /** Thumbnails often overlap: SVG has no z-index, so the unveiled image's
+     *  group is moved last in the ring to be painted above its neighbours.
+     *  Style is flushed after the move so the filter transition still plays
+     *  (a re-inserted node would otherwise jump straight to its new filter). */
+    private bringFacetteImageToFront;
     /** Center + radius (pre-scale coordinate space) of a facette's image
      *  thumbnail, so labels can be anchored onto the image instead of
      *  floating radially around the sphere. */

package/dist/types/components/workspace/workspaceTemplate.d.ts

@@ -1 +1 @@
-export declare const WORKSPACE_TEMPLATE_HTML = "\n    <div class=\"main-grid\">\n      <div class=\"format-row\" id=\"cause-format-row\">\n        <div class=\"diagram-with-panel\" id=\"cause-diagram-with-panel\">\n          <div class=\"diagram-column\" id=\"svg-container-cause\">\n            <div\n              class=\"component-title-container\"\n              id=\"component-title-container\"\n            ></div>\n          </div>\n          <div\n            class=\"layout-resizer layout-resizer-vertical layout-resizer-panel\"\n            id=\"resizer-details-panel\"\n            title=\"Redimensionner le panneau de d\u00E9tails\"\n          >\n            <div class=\"layout-resizer-handle\" aria-hidden=\"true\">\n              <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--expand\">\u00AB</span>\n              <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--restore\">\u00BB</span>\n            </div>\n          </div>\n          <div class=\"force-field-details-panel\">\n            <div class=\"details-panel-content\">\n              <nav class=\"ff-panel-tabs\" role=\"tablist\">\n                <button\n                  class=\"ff-tab-btn ff-tab-active\"\n                  data-tab=\"ff-tab-recherche\"\n                  role=\"tab\"\n                >Recherche</button>\n                <button\n                  class=\"ff-tab-btn\"\n                  data-tab=\"ff-tab-stack\"\n                  role=\"tab\"\n                >Stack<span class=\"ff-tab-badge\" id=\"ff-stack-badge\" hidden></span></button>\n                <button\n                  class=\"ff-tab-btn\"\n                  data-tab=\"ff-tab-debug\"\n                  id=\"ff-tab-debug-btn\"\n                  role=\"tab\"\n                  style=\"display: none\"\n                >Debug</button>\n              </nav>\n\n              <!-- Panneau Recherche principal : synchronis\u00E9 avec le diagramme -->\n              <div class=\"ff-panel-tab-pane ff-tab-active\" id=\"ff-tab-recherche\">\n                <div class=\"gs-search-stack\">\n                  <div class=\"gs-recherche-context-panel gs-recherche-context-panel--primary\" id=\"gs-recherche-panel-1\">\n                  <div class=\"gs-recherche-context-header\" id=\"gs-recherche-panel1-header\">\n                    <span id=\"gs-recherche-panel1-title\">Recherche</span>\n                    <div class=\"gs-recherche-context-header-actions\">\n                      <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel1\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                      <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel1\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                      <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-panel1\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n                    </div>\n                  </div>\n                  <div class=\"gs-recherche-layout\">\n                    <div class=\"gs-recherche-left\">\n                      <div\n                        class=\"layout-resizer layout-resizer-vertical layout-resizer-recherche-left\"\n                        id=\"resizer-recherche-split\"\n                        title=\"Redimensionner la colonne arbre\"\n                      ></div>\n                      <div id=\"global-search-widget\" class=\"gs-search-widget\">\n                        <div class=\"gs-search-wrap\">\n                          <input\n                            id=\"global-search-input\"\n                            class=\"gs-search-input\"\n                            type=\"text\"\n                            placeholder=\"Chercher satellite / action\u2026\"\n                            autocomplete=\"off\"\n                            spellcheck=\"false\"\n                          />\n                          <button\n                            id=\"global-search-clear\"\n                            class=\"gs-search-clear\"\n                            aria-label=\"Effacer la recherche\"\n                          >\u00D7</button>\n                        </div>\n                        <ul id=\"global-search-results\" class=\"gs-search-results\"></ul>\n                      </div>\n                    </div>\n                    <div class=\"gs-recherche-right\" id=\"gs-recherche-right\">\n                      <div class=\"gs-detail-placeholder\">S\u00E9lectionnez un \u00E9l\u00E9ment dans l'arbre</div>\n                    </div>\n                  </div>\n                  </div><!-- /gs-recherche-panel-1 -->\n\n                  <div\n                    class=\"layout-resizer layout-resizer-horizontal layout-resizer-recherche-context\"\n                    id=\"resizer-recherche-context\"\n                    title=\"Redimensionner le panneau contextuel\"\n                  ></div>\n\n                  <div class=\"gs-recherche-context-panel gs-recherche-context-panel--collapsed\" id=\"gs-recherche-context-panel\">\n                    <div class=\"gs-recherche-context-header\">\n                      <span id=\"gs-recherche-context-title\" class=\"gs-context-title--empty\">Naviguez pour comparer</span>\n                      <div class=\"gs-recherche-context-header-actions\">\n                        <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel2\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                        <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel2\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                        <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-context-panel\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n                      </div>\n                    </div>\n                    <div class=\"gs-recherche-layout gs-recherche-layout--context\">\n                      <div class=\"gs-recherche-left\">\n                        <div id=\"global-search-widget-context\" class=\"gs-search-widget\">\n                          <div class=\"gs-search-wrap\">\n                            <input\n                              id=\"global-search-input-context\"\n                              class=\"gs-search-input\"\n                              type=\"text\"\n                              placeholder=\"Bloc contextuel\u2026\"\n                              autocomplete=\"off\"\n                              spellcheck=\"false\"\n                            />\n                            <button\n                              id=\"global-search-clear-context\"\n                              class=\"gs-search-clear\"\n                              aria-label=\"Effacer le panneau contextuel\"\n                            >\u00D7</button>\n                          </div>\n                          <ul id=\"global-search-results-context\" class=\"gs-search-results\"></ul>\n                        </div>\n                      </div>\n                      <div class=\"gs-recherche-right\" id=\"gs-recherche-right-context\">\n                        <div class=\"gs-detail-placeholder\">Aucun bloc contextuel affich\u00E9</div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Onglet Stack : action-stack \u00E0 gauche, analyse \u00E0 droite -->\n              <div class=\"ff-panel-tab-pane\" id=\"ff-tab-stack\">\n                <div class=\"stack-nav-header\" id=\"stack-nav-header\">\n                  <button\n                    class=\"stack-nav-chip\"\n                    id=\"stack-nav-chip\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"listbox\"\n                    title=\"Naviguer vers un satellite\"\n                  >\n                    <span class=\"stack-nav-chip-dot\" id=\"stack-nav-chip-dot\"></span>\n                    <span class=\"stack-nav-chip-label\" id=\"stack-nav-chip-label\">\u2014</span>\n                    <span class=\"stack-nav-chip-state\" id=\"stack-nav-chip-state\" hidden></span>\n                    <span class=\"stack-nav-chip-chevron\" aria-hidden=\"true\">\u25BC</span>\n                  </button>\n                  <div class=\"stack-nav-btns\">\n                    <button class=\"gs-panel-nav-btn\" id=\"stack-nav-back\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                    <button class=\"gs-panel-nav-btn\" id=\"stack-nav-fwd\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                  </div>\n                </div>\n                <div class=\"gs-stack-layout\">\n                  <div class=\"action-stack-column\" id=\"action-stack-column\">\n                    <svg id=\"action-stack-svg\" class=\"action-stack-svg\"></svg>\n                    <div\n                      class=\"layout-resizer layout-resizer-vertical layout-resizer-action-stack\"\n                      id=\"resizer-action-stack\"\n                      title=\"Redimensionner la colonne action stack\"\n                    ></div>\n                  </div>\n                  <div class=\"stack-right-col\">\n                    <nav class=\"ff-panel-subtabs\" role=\"tablist\">\n                      <button\n                        class=\"ff-subtab-btn ff-subtab-active\"\n                        data-subtab=\"ff-subtab-analyse\"\n                        role=\"tab\"\n                      >Analyse</button>\n                      <button\n                        class=\"ff-subtab-btn\"\n                        data-subtab=\"ff-subtab-etat-final\"\n                        role=\"tab\"\n                      >\u00C9tat final</button>\n                    </nav>\n                    <div class=\"ff-panel-subtab-pane ff-subtab-active\" id=\"ff-subtab-analyse\">\n                      <div class=\"force-field-details-section\" id=\"force-field-details-cause\">\n                        <div class=\"force-field-detail-empty\">\n                          Cliquez sur un champ de force pour voir le d\u00E9tail du calcul.\n                        </div>\n                      </div>\n                    </div>\n                    <div class=\"ff-panel-subtab-pane\" id=\"ff-subtab-etat-final\">\n                      <div class=\"force-field-details-section\" id=\"ghost-details-cause\">\n                        <div class=\"force-field-detail-empty\">\n                          Activez une action pour afficher le d\u00E9tail de la tension ghost.\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Onglet Debug : outils de dev/test, jamais affich\u00E9 en production -->\n              <div class=\"ff-panel-tab-pane\" id=\"ff-tab-debug\">\n                <div class=\"debug-panel-content\">\n                  <!-- En t\u00EAte pour un acc\u00E8s sans scroll ; options g\u00E9n\u00E9r\u00E9es depuis\n                       le registre des contacts (DiagramSwitcherControl.ts). -->\n                  <div class=\"shared-controls-group debug-diagram-group\">\n                    <div class=\"shared-controls-title\">Diagramme</div>\n                    <select\n                      id=\"debug-diagram-switcher\"\n                      class=\"debug-diagram-select\"\n                      aria-label=\"Diagramme affich\u00E9\"\n                      title=\"Changer de diagramme (recharge la page avec ?diagram=)\"\n                    ></select>\n                    <div class=\"debug-diagram-active\">\n                      Actif : <span id=\"debug-diagram-active\">-</span>\n                    </div>\n                  </div>\n                  <div class=\"shared-controls-group\">\n                    <div class=\"shared-controls-title\">Actions</div>\n                    <button\n                      id=\"toggle-all-labels-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"Afficher/Masquer tous les libell\u00E9s\"\n                    >\n                      Afficher libell\u00E9s\n                    </button>\n                    <button\n                      id=\"fill-random-actions-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"Remplir la pile d'actions avec des actions al\u00E9atoires\"\n                    >\n                      Remplir pile\n                    </button>\n                    <button\n                      id=\"trigger-outer-spark-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"D\u00E9clencher l'\u00E9tincelle du p\u00E9rim\u00E8tre\"\n                    >\n                      \u00C9tincelle\n                    </button>\n                    <button\n                      id=\"trigger-balance-spark-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"D\u00E9clencher l'\u00E9tincelle d'\u00E9quilibre\"\n                    >\n                      \u00C9tincelle d'\u00E9quilibre\n                    </button>\n                  </div>\n                  <div class=\"shared-controls-group\">\n                    <div class=\"shared-controls-title\">Difficult\u00E9 du niveau</div>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"2\"\n                      title=\"Laisser le syst\u00E8me placer 2 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      Facile (2)\n                    </button>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"5\"\n                      title=\"Laisser le syst\u00E8me placer 5 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      Moyen (5)\n                    </button>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"9\"\n                      title=\"Laisser le syst\u00E8me placer 9 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      Difficile (9)\n                    </button>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"12\"\n                      title=\"Laisser le syst\u00E8me placer 12 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      R\u00E9aliste (12)\n                    </button>\n                  </div>\n                  <div class=\"shared-controls-group\">\n          <h3>Format Cause (Nouveau)</h3>\n          <div class=\"debug-component-info\">\n            <strong>Composant:</strong>\n            <span id=\"current-component-cause\">-</span> |\n            <strong>Orientation:</strong>\n            <span id=\"current-orientation-cause\">-</span>\n          </div>\n          <div class=\"control-block\">\n            <label for=\"slider-cause\">Tension:</label>\n            <input\n              id=\"slider-cause\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              value=\"0.5\"\n            />\n            <div class=\"slider-value\" id=\"slider-value-cause\">0.50</div>\n          </div>\n          <div class=\"control-block\">\n            <label for=\"slider-cause-ghost\">Tension Ghost:</label>\n            <input\n              id=\"slider-cause-ghost\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              value=\"0.5\"\n            />\n            <div class=\"slider-value\" id=\"slider-value-cause-ghost\">0.50</div>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-ghost\">Afficher Ghost:</label>\n            <input id=\"toggle-cause-ghost\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-children\">Afficher Enfants:</label>\n            <input id=\"toggle-cause-children\" type=\"checkbox\" />\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-spark\">Etincelle perimetre:</label>\n            <input id=\"toggle-cause-spark\" type=\"checkbox\" />\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-spikes\">Afficher Spikes:</label>\n            <input id=\"toggle-cause-spikes\" type=\"checkbox\" checked />\n          </div>\n                  </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Rotation Yin/Yang</div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-rotation\">Rotation Yin/Yang:</label>\n            <input id=\"toggle-cause-rotation\" type=\"checkbox\" />\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-rotation-clockwise\">Sens horaire:</label>\n            <input id=\"toggle-cause-rotation-clockwise\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-speed\">Vitesse cible:</label>\n            <input\n              id=\"rotation-speed\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1000\"\n              step=\"1\"\n              value=\"321\"\n              title=\"\u00C9chelle logarithmique : de rapide (2s/tour, \u00E0 gauche) \u00E0 quasi \u00E0 l'arr\u00EAt (5min/tour, \u00E0 droite)\"\n            />\n            <span id=\"rotation-speed-value\">10s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n            <input\n              id=\"rotation-ramp\"\n              type=\"range\"\n              min=\"0\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"600\"\n            />\n            <span id=\"rotation-ramp-value\">0.6s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-rotation-idle-auto\">Auto-rotation apr\u00E8s inactivit\u00E9:</label>\n            <input id=\"toggle-rotation-idle-auto\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-idle-delay\">Temps d'inactivit\u00E9:</label>\n            <input\n              id=\"rotation-idle-delay\"\n              type=\"range\"\n              min=\"2000\"\n              max=\"300000\"\n              step=\"1000\"\n              value=\"20000\"\n              disabled\n              title=\"D\u00E9clenche automatiquement la rotation apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n            />\n            <span id=\"rotation-idle-delay-value\">20s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"rotation-stop-mode\">Mode d'arr\u00EAt:</label>\n            <select id=\"rotation-stop-mode\">\n              <option value=\"normal\" selected>Normal (rampe)</option>\n              <option value=\"instant\">Instantan\u00E9</option>\n              <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n            </select>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n            <input\n              id=\"rotation-fast-stop\"\n              type=\"range\"\n              min=\"100\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"800\"\n              title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n            />\n            <span id=\"rotation-fast-stop-value\">0.8s</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Orbite Satellites</div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-orbit\">Orbites enfants:</label>\n            <input id=\"toggle-cause-orbit\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-speed\">Vitesse cible:</label>\n            <input\n              id=\"orbit-speed\"\n              type=\"range\"\n              min=\"-1000\"\n              max=\"1000\"\n              step=\"1\"\n              value=\"884\"\n              title=\"\u00C9chelle logarithmique sign\u00E9e : n\u00E9gatif = sens antihoraire, positif = sens horaire, 0 = \u00E0 l'arr\u00EAt ; les vitesses lentes (jusqu'\u00E0 0.005 rad/s) se r\u00E8glent finement pr\u00E8s du centre\"\n            />\n            <span id=\"orbit-speed-value\">1.00 rad/s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n            <input\n              id=\"orbit-ramp\"\n              type=\"range\"\n              min=\"0\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"600\"\n            />\n            <span id=\"orbit-ramp-value\">0.6s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-orbit-idle-auto\">Auto-orbite apr\u00E8s inactivit\u00E9:</label>\n            <input id=\"toggle-orbit-idle-auto\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-idle-delay\">Temps d'inactivit\u00E9:</label>\n            <input\n              id=\"orbit-idle-delay\"\n              type=\"range\"\n              min=\"2000\"\n              max=\"300000\"\n              step=\"1000\"\n              value=\"20000\"\n              disabled\n              title=\"D\u00E9clenche automatiquement l'orbite apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n            />\n            <span id=\"orbit-idle-delay-value\">20s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"orbit-stop-mode\">Mode d'arr\u00EAt:</label>\n            <select id=\"orbit-stop-mode\">\n              <option value=\"normal\" selected>Normal (rampe)</option>\n              <option value=\"instant\">Instantan\u00E9</option>\n              <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n            </select>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n            <input\n              id=\"orbit-fast-stop\"\n              type=\"range\"\n              min=\"100\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"800\"\n              title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n            />\n            <span id=\"orbit-fast-stop-value\">0.8s</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Pr\u00E9f\u00E9rences</div>\n          <div class=\"shared-control\">\n            <button\n              id=\"snapshot-controls-btn\"\n              style=\"\n                width: 100%;\n                padding: 8px;\n                cursor: pointer;\n                background-color: #2196f3;\n                color: white;\n                border: none;\n                border-radius: 4px;\n                font-weight: bold;\n              \"\n            >\n              \uD83D\uDCF8 Sauvegarder comme d\u00E9faut\n            </button>\n          </div>\n          <div class=\"shared-control\">\n            <button\n              id=\"restore-controls-btn\"\n              style=\"\n                width: 100%;\n                padding: 8px;\n                cursor: pointer;\n                background-color: #4caf50;\n                color: white;\n                border: none;\n                border-radius: 4px;\n                font-weight: bold;\n              \"\n            >\n              \u21A9\uFE0F Restaurer d\u00E9fauts\n            </button>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Affichage</div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-details-panel\"\n              >Afficher panneau d\u00E9tails:</label\n            >\n            <input id=\"toggle-cause-details-panel\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"details-panel-width\">Largeur panneau d\u00E9tails:</label>\n            <input\n              id=\"details-panel-width\"\n              type=\"range\"\n              min=\"220\"\n              max=\"1200\"\n              step=\"10\"\n              value=\"600\"\n            />\n            <span id=\"details-panel-width-value\">600px</span>\n          </div>\n        </div>\n\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Ondes & p\u00E9rim\u00E8tre</div>\n          <div class=\"shared-control\">\n            <label for=\"wave-thickness\">\u00C9paisseur ondes:</label>\n            <input\n              id=\"wave-thickness\"\n              type=\"range\"\n              min=\"1\"\n              max=\"5\"\n              step=\"0.5\"\n              value=\"1\"\n            />\n            <span id=\"wave-thickness-value\">1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"perimeter-thickness\">\u00C9paisseur p\u00E9rim\u00E8tre:</label>\n            <input\n              id=\"perimeter-thickness\"\n              type=\"range\"\n              min=\"1\"\n              max=\"5\"\n              step=\"0.5\"\n              value=\"5\"\n            />\n            <span id=\"perimeter-thickness-value\">5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"perimeter-solid\">P\u00E9rim\u00E8tre plein:</label>\n            <input id=\"perimeter-solid\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"perimeter-wave-opacity\">Opacit\u00E9 p\u00E9rim\u00E8tre/ondes:</label>\n            <input\n              id=\"perimeter-wave-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"perimeter-wave-opacity-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-count\">Nombre d'ondes:</label>\n            <input\n              id=\"wave-count\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"1\"\n              value=\"10\"\n            />\n            <span id=\"wave-count-value\">10</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-spacing\">Espacement ondes:</label>\n            <input\n              id=\"wave-spacing\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"2\"\n              step=\"0.1\"\n              value=\"2.0\"\n            />\n            <span id=\"wave-spacing-value\">2.0</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Yin/yang Ghosts parameters</div>\n          <div class=\"shared-control\">\n            <label for=\"yin-opacity\">Opacit\u00E9 yin ghost:</label>\n            <input\n              id=\"yin-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.6\"\n            />\n            <span id=\"yin-opacity-value\">0.60</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yang-opacity\">Opacit\u00E9 yang ghost:</label>\n            <input\n              id=\"yang-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.6\"\n            />\n            <span id=\"yang-opacity-value\">0.60</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-color-increase\"\n              >Couleur tension d\u00E9terioration:</label\n            >\n            <input\n              id=\"wave-color-increase\"\n              type=\"color\"\n              value=\"#aa0000\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-color-decrease\"\n              >Couleur tension am\u00E9lioration:</label\n            >\n            <input\n              id=\"wave-color-decrease\"\n              type=\"color\"\n              value=\"#00aa00\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"ghost-pulse-duration\">Dur\u00E9e pulsation ghost (s):</label>\n            <input\n              id=\"ghost-pulse-duration\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"0.5\"\n              value=\"1.5\"\n            />\n            <span id=\"ghost-pulse-duration-value\">1.5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"base-pulse-enabled\">Pulsation rayons activ\u00E9e:</label>\n            <input id=\"base-pulse-enabled\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pulse-morph-ratio\">Ratio morphing/reset:</label>\n            <input\n              id=\"pulse-morph-ratio\"\n              type=\"range\"\n              min=\"0.1\"\n              max=\"0.9\"\n              step=\"0.05\"\n              value=\"0.85\"\n            />\n            <span id=\"pulse-morph-ratio-value\">85/15</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-travel-duration\">Dur\u00E9e trajet onde (s):</label>\n            <input\n              id=\"wave-travel-duration\"\n              type=\"range\"\n              min=\"0.3\"\n              max=\"5\"\n              step=\"0.1\"\n              value=\"1.2\"\n            />\n            <span id=\"wave-travel-duration-value\">1.2</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"ghost-delta-badge-scale\"\n              >Taille badge delta (c\u0153ur):</label\n            >\n            <input\n              id=\"ghost-delta-badge-scale\"\n              type=\"range\"\n              min=\"0.8\"\n              max=\"2.5\"\n              step=\"0.05\"\n              value=\"1.35\"\n            />\n            <span id=\"ghost-delta-badge-scale-value\">1.35</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Yin/yang children</div>\n          <div class=\"shared-control\">\n            <label for=\"child-scale\">Taille enfants:</label>\n            <input\n              id=\"child-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.4\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"child-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"children-orbit-distance\">Distance orbite:</label>\n            <input\n              id=\"children-orbit-distance\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.6\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"children-orbit-distance-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"random-force-fields-count\"\n              >Nb champs force al\u00E9atoires:</label\n            >\n            <input\n              id=\"random-force-fields-count\"\n              type=\"range\"\n              min=\"0\"\n              max=\"6\"\n              step=\"1\"\n              value=\"2\"\n            />\n            <span id=\"random-force-fields-count-value\">2</span>\n          </div>\n        </div>\n\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Com\u00E8te de propagation</div>\n          <div class=\"shared-control\">\n            <label for=\"comet-loop-gap\">Pause entre deux passes:</label>\n            <input\n              id=\"comet-loop-gap\"\n              type=\"range\"\n              min=\"0\"\n              max=\"10000\"\n              step=\"250\"\n              value=\"3000\"\n              title=\"Boucle jou\u00E9e sur les champs de force de l'action en focus (STACK) : pause entre la fin d'une passe et le d\u00E9part de la suivante\"\n            />\n            <span id=\"comet-loop-gap-value\">3.0s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-speed\">Vitesse:</label>\n            <input\n              id=\"comet-speed\"\n              type=\"range\"\n              min=\"40\"\n              max=\"600\"\n              step=\"10\"\n              value=\"180\"\n              title=\"Vitesse de croisi\u00E8re le long du chemin (px/s) \u2014 le trajet entier est jou\u00E9 d'un seul mouvement adouci\"\n            />\n            <span id=\"comet-speed-value\">180 px/s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-min-travel\">Dur\u00E9e minimale du trajet:</label>\n            <input\n              id=\"comet-min-travel\"\n              type=\"range\"\n              min=\"200\"\n              max=\"3000\"\n              step=\"50\"\n              value=\"900\"\n              title=\"Plancher de dur\u00E9e pour qu'un chemin tr\u00E8s court reste lisible\"\n            />\n            <span id=\"comet-min-travel-value\">0.90s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-dot-radius\">Taille du noyau:</label>\n            <input\n              id=\"comet-dot-radius\"\n              type=\"range\"\n              min=\"1.5\"\n              max=\"12\"\n              step=\"0.5\"\n              value=\"4.5\"\n            />\n            <span id=\"comet-dot-radius-value\">4.5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-opacity\">Opacit\u00E9:</label>\n            <input\n              id=\"comet-opacity\"\n              type=\"range\"\n              min=\"0.1\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.85\"\n            />\n            <span id=\"comet-opacity-value\">0.85</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-tail-ms\">Longueur de la queue:</label>\n            <input\n              id=\"comet-tail-ms\"\n              type=\"range\"\n              min=\"0\"\n              max=\"2000\"\n              step=\"20\"\n              value=\"520\"\n              title=\"Exprim\u00E9e en temps de trajet : la queue est l'ombre des positions r\u00E9centes, elle suit les virages\"\n            />\n            <span id=\"comet-tail-ms-value\">520 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-tail-width\">\u00C9paisseur de la queue:</label>\n            <input\n              id=\"comet-tail-width\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"8\"\n              step=\"0.25\"\n              value=\"3\"\n            />\n            <span id=\"comet-tail-width-value\">3.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-glow\">Halo / glow:</label>\n            <input\n              id=\"comet-glow\"\n              type=\"range\"\n              min=\"0\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1\"\n            />\n            <span id=\"comet-glow-value\">1.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-fade\">Fondu d\u00E9part / arriv\u00E9e:</label>\n            <input\n              id=\"comet-fade\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1200\"\n              step=\"20\"\n              value=\"320\"\n            />\n            <span id=\"comet-fade-value\">320 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-ring-opacity\">Anneaux d'arriv\u00E9e:</label>\n            <input\n              id=\"comet-ring-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.55\"\n              title=\"Opacit\u00E9 de d\u00E9part de l'anneau \u00E0 chaque satellite atteint (0 = aucun anneau)\"\n            />\n            <span id=\"comet-ring-opacity-value\">0.55</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"comet-use-item-color\">Couleur de l'action:</label>\n            <input\n              id=\"comet-use-item-color\"\n              type=\"checkbox\"\n              checked\n              title=\"Prendre la couleur de l'item de la pile ; d\u00E9coch\u00E9 : couleur fixe ci-dessous\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-color\">Couleur fixe / de repli:</label>\n            <input\n              id=\"comet-color\"\n              type=\"color\"\n              value=\"#7fd8ff\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n        </div>\n\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Libell\u00E9s</div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-action-deltas\"\n              >Afficher deltas d'action:</label\n            >\n            <input id=\"toggle-cause-action-deltas\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-children-labels\"\n              >Afficher libell\u00E9s enfants:</label\n            >\n            <input id=\"toggle-cause-children-labels\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-odd-labels\">Afficher libell\u00E9s ODD:</label>\n            <input id=\"toggle-cause-odd-labels\" type=\"checkbox\" checked />\n          </div>\n\n          <div class=\"shared-control\">\n            <label for=\"label-font-scale\">Taille police enfant:</label>\n            <input\n              id=\"label-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"component-label-font-scale\"\n              >Taille police Libell\u00E9 facette:</label\n            >\n            <input\n              id=\"component-label-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"component-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"component-legend-label-font-scale\"\n              >Taille police libell\u00E9s d\u00E9ploy\u00E9s:</label\n            >\n            <input\n              id=\"component-legend-label-font-scale\"\n              type=\"range\"\n              min=\"0.4\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"component-legend-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"odd-label-font-scale\">Taille police ODD:</label>\n            <input\n              id=\"odd-label-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"odd-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-label-font-scale\"\n              >Taille police score/poids facette:</label\n            >\n            <input\n              id=\"facette-label-font-scale\"\n              type=\"range\"\n              min=\"0.4\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"facette-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-facette-label-suffix\"\n              >Afficher \"/max\" (score/poids facette et ODD):</label\n            >\n            <input id=\"toggle-facette-label-suffix\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"action-stack-label-font-scale\"\n              >Taille police actions:</label\n            >\n            <input\n              id=\"action-stack-label-font-scale\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1.5\"\n            />\n            <span id=\"action-stack-label-font-scale-value\">1.50</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"action-stack-history-button-scale\"\n              >Taille boutons Undo/Redo:</label\n            >\n            <input\n              id=\"action-stack-history-button-scale\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"action-stack-history-button-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-label-max-lines\">Lignes libell\u00E9s enfants:</label>\n            <input\n              id=\"child-label-max-lines\"\n              type=\"range\"\n              min=\"1\"\n              max=\"3\"\n              step=\"1\"\n              value=\"1\"\n            />\n            <span id=\"child-label-max-lines-value\">1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"odd-label-max-lines\">Lignes libell\u00E9s ODD:</label>\n            <input\n              id=\"odd-label-max-lines\"\n              type=\"range\"\n              min=\"1\"\n              max=\"3\"\n              step=\"1\"\n              value=\"1\"\n            />\n            <span id=\"odd-label-max-lines-value\">1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"label-short-max-chars\">Caract\u00E8res max (ellipse):</label>\n            <input\n              id=\"label-short-max-chars\"\n              type=\"range\"\n              min=\"5\"\n              max=\"250\"\n              step=\"1\"\n              value=\"20\"\n            />\n            <span id=\"label-short-max-chars-value\">20</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-label-shadow\">Ombre texte:</label>\n            <input id=\"toggle-label-shadow\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-legend-labels-bg\"\n              >Cadre libell\u00E9s d\u00E9ploy\u00E9s:</label\n            >\n            <input id=\"toggle-legend-labels-bg\" type=\"checkbox\" checked />\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Combos</div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-combo-uncapped-chained-performance\"\n              >Performances cha\u00EEn\u00E9es non plafonn\u00E9es:</label\n            >\n            <input\n              id=\"toggle-combo-uncapped-chained-performance\"\n              type=\"checkbox\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-combo-dangerous-can-become-bonus\"\n              >Un combo dangereux peut devenir un bonus:</label\n            >\n            <input\n              id=\"toggle-combo-dangerous-can-become-bonus\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Etat/Delta</div>\n          <div class=\"shared-control\">\n            <label for=\"child-state-delta-font-scale\"\n              >Taille police \u00C9tats/Delta enfants:</label\n            >\n            <input\n              id=\"child-state-delta-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"child-state-delta-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-state-delta-offset\"\n              >Distance \u00C9tats/Delta enfants:</label\n            >\n            <input\n              id=\"child-state-delta-offset\"\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              step=\"1\"\n              value=\"20\"\n            />\n            <span id=\"child-state-delta-offset-value\">20</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-state-delta-box-scale\"\n              >Taille anneau s\u00E9lection:</label\n            >\n            <input\n              id=\"child-state-delta-box-scale\"\n              type=\"range\"\n              min=\"0.3\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"child-state-delta-box-scale-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Grappe actions</div>\n          <div class=\"shared-control\">\n            <label for=\"child-action-menu-distance\">Distance bottons:</label>\n            <input\n              id=\"child-action-menu-distance\"\n              type=\"range\"\n              min=\"0.8\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.7\"\n            />\n            <span id=\"child-action-menu-distance-value\">1.70</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-action-menu-scale\">Taille buttons:</label>\n            <input\n              id=\"child-action-menu-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"child-action-menu-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-action-icon-scale\">Taille ic\u00F4nes:</label>\n            <input\n              id=\"child-action-icon-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"child-action-icon-scale-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">\u00C9v\u00E9nements cl\u00E9s</div>\n          <div class=\"shared-control\">\n            <label for=\"core-event-menu-distance-offset\"\n              >Distance boutons:</label\n            >\n            <input\n              id=\"core-event-menu-distance-offset\"\n              type=\"range\"\n              min=\"-80\"\n              max=\"80\"\n              step=\"5\"\n              value=\"0\"\n            />\n            <span id=\"core-event-menu-distance-offset-value\">0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"core-event-menu-scale\">Taille boutons:</label>\n            <input\n              id=\"core-event-menu-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"core-event-menu-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"core-event-icon-scale\">Taille ic\u00F4nes:</label>\n            <input\n              id=\"core-event-icon-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"core-event-icon-scale-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Yin/yang</div>\n          <div class=\"shared-control\">\n            <label for=\"odd-gradient-spread\">Progression d\u00E9grad\u00E9:</label>\n            <input\n              id=\"odd-gradient-spread\"\n              type=\"range\"\n              min=\"0.3\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"odd-gradient-spread-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"odd-gradient-intensity\">Intensit\u00E9 couleur:</label>\n            <input\n              id=\"odd-gradient-intensity\"\n              type=\"range\"\n              min=\"0.2\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"odd-gradient-intensity-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Bordures</div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-intensity\">Intensite etincelle:</label>\n            <input\n              id=\"border-spark-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"2\"\n              step=\"0.1\"\n              value=\"2\"\n            />\n            <span id=\"border-spark-intensity-value\">2.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-length\">Longueur etincelle:</label>\n            <input\n              id=\"border-spark-length\"\n              type=\"range\"\n              min=\"0.1\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"0.1\"\n            />\n            <span id=\"border-spark-length-value\">0.1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-width\">Epaisseur etincelle:</label>\n            <input\n              id=\"border-spark-width\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"3\"\n            />\n            <span id=\"border-spark-width-value\">3.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-glow-color\">Couleur glow etincelle:</label>\n            <input\n              id=\"border-spark-glow-color\"\n              type=\"color\"\n              value=\"#72f5ff\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-speed\">Vitesse etincelle:</label>\n            <input\n              id=\"border-spark-speed\"\n              type=\"range\"\n              min=\"800\"\n              max=\"8000\"\n              step=\"100\"\n              value=\"7000\"\n            />\n            <span id=\"border-spark-speed-value\">7.0s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-glow-intensity\">Glow/Halo:</label>\n            <input\n              id=\"border-glow-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.5\"\n            />\n            <span id=\"border-glow-intensity-value\">0.50</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-width-expansion\"\n              >\u00C9largissement segment actif:</label\n            >\n            <input\n              id=\"border-segment-width-expansion\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.25\"\n            />\n            <span id=\"border-segment-width-expansion-value\">0.25</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-corner-radius\">Arrondi des arcs:</label>\n            <input\n              id=\"border-segment-corner-radius\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.6\"\n            />\n            <span id=\"border-segment-corner-radius-value\">0.60</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-bevel-intensity\">Biseau des arcs:</label>\n            <input\n              id=\"border-segment-bevel-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.7\"\n            />\n            <span id=\"border-segment-bevel-intensity-value\">0.70</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-hover-lift\">Soul\u00E8vement survol:</label>\n            <input\n              id=\"border-segment-hover-lift\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.35\"\n            />\n            <span id=\"border-segment-hover-lift-value\">0.35</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">yinyang sparks</div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-intensity\">Intensite etincelle:</label>\n            <input\n              id=\"yinyang-spark-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"2\"\n              step=\"0.1\"\n              value=\"2\"\n            />\n            <span id=\"yinyang-spark-intensity-value\">2.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-max-length\"\n              >Longueur max etincelle:</label\n            >\n            <input\n              id=\"yinyang-spark-max-length\"\n              type=\"range\"\n              min=\"0.1\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.5\"\n            />\n            <span id=\"yinyang-spark-max-length-value\">1.5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-width\">Epaisseur etincelle:</label>\n            <input\n              id=\"yinyang-spark-width\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"3\"\n            />\n            <span id=\"yinyang-spark-width-value\">3.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-duration\">Duree etincelle:</label>\n            <input\n              id=\"yinyang-spark-duration\"\n              type=\"range\"\n              min=\"800\"\n              max=\"8000\"\n              step=\"100\"\n              value=\"3500\"\n            />\n            <span id=\"yinyang-spark-duration-value\">3.5s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-yang-color\"\n              >Couleur etincelle Yang:</label\n            >\n            <input\n              id=\"yinyang-spark-yang-color\"\n              type=\"color\"\n              value=\"#72f5ff\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-yin-color\"\n              >Couleur etincelle Yin:</label\n            >\n            <input\n              id=\"yinyang-spark-yin-color\"\n              type=\"color\"\n              value=\"#ff4da6\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-distance\"\n              >Portee crepitement:</label\n            >\n            <input\n              id=\"yinyang-spark-ember-distance\"\n              type=\"range\"\n              min=\"10\"\n              max=\"150\"\n              step=\"5\"\n              value=\"90\"\n            />\n            <span id=\"yinyang-spark-ember-distance-value\">90</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-size\">Taille crepitement:</label>\n            <input\n              id=\"yinyang-spark-ember-size\"\n              type=\"range\"\n              min=\"0.2\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"1\"\n            />\n            <span id=\"yinyang-spark-ember-size-value\">1.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-speed\">Vitesse crepitement:</label>\n            <input\n              id=\"yinyang-spark-ember-speed\"\n              type=\"range\"\n              min=\"100\"\n              max=\"1500\"\n              step=\"50\"\n              value=\"500\"\n            />\n            <span id=\"yinyang-spark-ember-speed-value\">0.50s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-color\"\n              >Couleur crepitement:</label\n            >\n            <input\n              id=\"yinyang-spark-ember-color\"\n              type=\"color\"\n              value=\"#fff3c4\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-taper-power\">Forme tetard:</label>\n            <input\n              id=\"yinyang-spark-taper-power\"\n              type=\"range\"\n              min=\"1\"\n              max=\"6\"\n              step=\"0.1\"\n              value=\"2.2\"\n            />\n            <span id=\"yinyang-spark-taper-power-value\">2.2</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-birth-width\">Largeur naissance:</label>\n            <input\n              id=\"yinyang-spark-birth-width\"\n              type=\"range\"\n              min=\"0\"\n              max=\"0.9\"\n              step=\"0.05\"\n              value=\"0\"\n            />\n            <span id=\"yinyang-spark-birth-width-value\">0.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-drift-count\">Nombre de tetards:</label>\n            <input\n              id=\"yinyang-spark-drift-count\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"1\"\n              value=\"3\"\n            />\n            <span id=\"yinyang-spark-drift-count-value\">3</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-drift-remnant-scale\"\n              >Longueur reliquat:</label\n            >\n            <input\n              id=\"yinyang-spark-drift-remnant-scale\"\n              type=\"range\"\n              min=\"0.05\"\n              max=\"3\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"yinyang-spark-drift-remnant-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-drift-centrifugal-force\"\n              >Force centrifuge tetards:</label\n            >\n            <input\n              id=\"yinyang-spark-drift-centrifugal-force\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              value=\"0.15\"\n            />\n            <span id=\"yinyang-spark-drift-centrifugal-force-value\"\n              >0.15</span\n            >\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Images facette</div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-margin\">Marge vignettes:</label>\n            <input\n              id=\"facette-image-margin\"\n              type=\"range\"\n              min=\"0\"\n              max=\"40\"\n              step=\"1\"\n              value=\"10\"\n            />\n            <span id=\"facette-image-margin-value\">10</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-fade-start\">D\u00E9but du fondu:</label>\n            <input\n              id=\"facette-image-fade-start\"\n              type=\"range\"\n              min=\"0\"\n              max=\"95\"\n              step=\"5\"\n              value=\"50\"\n            />\n            <span id=\"facette-image-fade-start-value\">50%</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-fade-opacity\">Opacit\u00E9 au bord:</label>\n            <input\n              id=\"facette-image-fade-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0\"\n            />\n            <span id=\"facette-image-fade-opacity-value\">0.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-diameter\">Diam\u00E8tre vignettes:</label>\n            <input\n              id=\"facette-image-diameter\"\n              type=\"range\"\n              min=\"0.2\"\n              max=\"2\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"facette-image-diameter-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-weight-curve\">Courbe r\u00E9tr\u00E9cissement (poids):</label>\n            <input\n              id=\"facette-image-weight-curve\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"facette-image-weight-curve-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-offset\">\u00C9loignement depuis la sph\u00E8re:</label>\n            <input\n              id=\"facette-image-offset\"\n              type=\"range\"\n              min=\"-150\"\n              max=\"150\"\n              step=\"5\"\n              value=\"0\"\n            />\n            <span id=\"facette-image-offset-value\">0</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Pictogrammes ODD</div>\n          <div class=\"shared-control\">\n            <label for=\"odd-chip-zoom\">Grossissement au clic:</label>\n            <input\n              id=\"odd-chip-zoom\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"1\"\n              value=\"5\"\n            />\n            <span id=\"odd-chip-zoom-value\">5x</span>\n          </div>\n        </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n";
+export declare const WORKSPACE_TEMPLATE_HTML = "\n    <div class=\"main-grid\">\n      <div class=\"format-row\" id=\"cause-format-row\">\n        <div class=\"diagram-with-panel\" id=\"cause-diagram-with-panel\">\n          <div class=\"diagram-column\" id=\"svg-container-cause\">\n            <div\n              class=\"component-title-container\"\n              id=\"component-title-container\"\n            ></div>\n          </div>\n          <div\n            class=\"layout-resizer layout-resizer-vertical layout-resizer-panel\"\n            id=\"resizer-details-panel\"\n            title=\"Redimensionner le panneau de d\u00E9tails\"\n          >\n            <div class=\"layout-resizer-handle\" aria-hidden=\"true\">\n              <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--expand\">\u00AB</span>\n              <span class=\"layout-resizer-handle-icon layout-resizer-handle-icon--restore\">\u00BB</span>\n            </div>\n          </div>\n          <div class=\"force-field-details-panel\">\n            <div class=\"details-panel-content\">\n              <nav class=\"ff-panel-tabs\" role=\"tablist\">\n                <button\n                  class=\"ff-tab-btn ff-tab-active\"\n                  data-tab=\"ff-tab-recherche\"\n                  role=\"tab\"\n                >Recherche</button>\n                <button\n                  class=\"ff-tab-btn\"\n                  data-tab=\"ff-tab-stack\"\n                  role=\"tab\"\n                >Stack<span class=\"ff-tab-badge\" id=\"ff-stack-badge\" hidden></span></button>\n                <button\n                  class=\"ff-tab-btn\"\n                  data-tab=\"ff-tab-debug\"\n                  id=\"ff-tab-debug-btn\"\n                  role=\"tab\"\n                  style=\"display: none\"\n                >Debug</button>\n              </nav>\n\n              <!-- Panneau Recherche principal : synchronis\u00E9 avec le diagramme -->\n              <div class=\"ff-panel-tab-pane ff-tab-active\" id=\"ff-tab-recherche\">\n                <div class=\"gs-search-stack\">\n                  <div class=\"gs-recherche-context-panel gs-recherche-context-panel--primary\" id=\"gs-recherche-panel-1\">\n                  <div class=\"gs-recherche-context-header\" id=\"gs-recherche-panel1-header\">\n                    <span id=\"gs-recherche-panel1-title\">Recherche</span>\n                    <div class=\"gs-recherche-context-header-actions\">\n                      <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel1\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                      <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel1\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                      <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-panel1\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n                    </div>\n                  </div>\n                  <div class=\"gs-recherche-layout\">\n                    <div class=\"gs-recherche-left\">\n                      <div\n                        class=\"layout-resizer layout-resizer-vertical layout-resizer-recherche-left\"\n                        id=\"resizer-recherche-split\"\n                        title=\"Redimensionner la colonne arbre\"\n                      ></div>\n                      <div id=\"global-search-widget\" class=\"gs-search-widget\">\n                        <div class=\"gs-search-wrap\">\n                          <input\n                            id=\"global-search-input\"\n                            class=\"gs-search-input\"\n                            type=\"text\"\n                            placeholder=\"Chercher satellite / action\u2026\"\n                            autocomplete=\"off\"\n                            spellcheck=\"false\"\n                          />\n                          <button\n                            id=\"global-search-clear\"\n                            class=\"gs-search-clear\"\n                            aria-label=\"Effacer la recherche\"\n                          >\u00D7</button>\n                        </div>\n                        <ul id=\"global-search-results\" class=\"gs-search-results\"></ul>\n                      </div>\n                    </div>\n                    <div class=\"gs-recherche-right\" id=\"gs-recherche-right\">\n                      <div class=\"gs-detail-placeholder\">S\u00E9lectionnez un \u00E9l\u00E9ment dans l'arbre</div>\n                    </div>\n                  </div>\n                  </div><!-- /gs-recherche-panel-1 -->\n\n                  <div\n                    class=\"layout-resizer layout-resizer-horizontal layout-resizer-recherche-context\"\n                    id=\"resizer-recherche-context\"\n                    title=\"Redimensionner le panneau contextuel\"\n                  ></div>\n\n                  <div class=\"gs-recherche-context-panel gs-recherche-context-panel--collapsed\" id=\"gs-recherche-context-panel\">\n                    <div class=\"gs-recherche-context-header\">\n                      <span id=\"gs-recherche-context-title\" class=\"gs-context-title--empty\">Naviguez pour comparer</span>\n                      <div class=\"gs-recherche-context-header-actions\">\n                        <button class=\"gs-panel-nav-btn\" id=\"nav-back-panel2\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                        <button class=\"gs-panel-nav-btn\" id=\"nav-fwd-panel2\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                        <button class=\"gs-panel-lock-btn\" id=\"lock-recherche-context-panel\" type=\"button\" aria-pressed=\"false\" title=\"Verrouiller le panneau\"><svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" aria-hidden=\"true\"><rect x=\"1.5\" y=\"5\" width=\"9\" height=\"7.5\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" opacity=\"0.35\"/><circle cx=\"6\" cy=\"8.75\" r=\"1\" fill=\"currentColor\" opacity=\"0.4\"/></svg></button>\n                      </div>\n                    </div>\n                    <div class=\"gs-recherche-layout gs-recherche-layout--context\">\n                      <div class=\"gs-recherche-left\">\n                        <div id=\"global-search-widget-context\" class=\"gs-search-widget\">\n                          <div class=\"gs-search-wrap\">\n                            <input\n                              id=\"global-search-input-context\"\n                              class=\"gs-search-input\"\n                              type=\"text\"\n                              placeholder=\"Bloc contextuel\u2026\"\n                              autocomplete=\"off\"\n                              spellcheck=\"false\"\n                            />\n                            <button\n                              id=\"global-search-clear-context\"\n                              class=\"gs-search-clear\"\n                              aria-label=\"Effacer le panneau contextuel\"\n                            >\u00D7</button>\n                          </div>\n                          <ul id=\"global-search-results-context\" class=\"gs-search-results\"></ul>\n                        </div>\n                      </div>\n                      <div class=\"gs-recherche-right\" id=\"gs-recherche-right-context\">\n                        <div class=\"gs-detail-placeholder\">Aucun bloc contextuel affich\u00E9</div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Onglet Stack : action-stack \u00E0 gauche, analyse \u00E0 droite -->\n              <div class=\"ff-panel-tab-pane\" id=\"ff-tab-stack\">\n                <div class=\"stack-nav-header\" id=\"stack-nav-header\">\n                  <button\n                    class=\"stack-nav-chip\"\n                    id=\"stack-nav-chip\"\n                    aria-expanded=\"false\"\n                    aria-haspopup=\"listbox\"\n                    title=\"Naviguer vers un satellite\"\n                  >\n                    <span class=\"stack-nav-chip-dot\" id=\"stack-nav-chip-dot\"></span>\n                    <span class=\"stack-nav-chip-label\" id=\"stack-nav-chip-label\">\u2014</span>\n                    <span class=\"stack-nav-chip-state\" id=\"stack-nav-chip-state\" hidden></span>\n                    <span class=\"stack-nav-chip-chevron\" aria-hidden=\"true\">\u25BC</span>\n                  </button>\n                  <div class=\"stack-nav-btns\">\n                    <button class=\"gs-panel-nav-btn\" id=\"stack-nav-back\" type=\"button\" aria-label=\"Retour\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6.5 2L3 5l3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                    <button class=\"gs-panel-nav-btn\" id=\"stack-nav-fwd\" type=\"button\" aria-label=\"Suivant\" disabled><svg width=\"13\" height=\"13\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\"><path d=\"M3.5 2L7 5l-3.5 3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n                  </div>\n                </div>\n                <div class=\"gs-stack-layout\">\n                  <div class=\"action-stack-column\" id=\"action-stack-column\">\n                    <svg id=\"action-stack-svg\" class=\"action-stack-svg\"></svg>\n                    <div\n                      class=\"layout-resizer layout-resizer-vertical layout-resizer-action-stack\"\n                      id=\"resizer-action-stack\"\n                      title=\"Redimensionner la colonne action stack\"\n                    ></div>\n                  </div>\n                  <div class=\"stack-right-col\">\n                    <nav class=\"ff-panel-subtabs\" role=\"tablist\">\n                      <button\n                        class=\"ff-subtab-btn ff-subtab-active\"\n                        data-subtab=\"ff-subtab-analyse\"\n                        role=\"tab\"\n                      >Analyse</button>\n                      <button\n                        class=\"ff-subtab-btn\"\n                        data-subtab=\"ff-subtab-etat-final\"\n                        role=\"tab\"\n                      >\u00C9tat final</button>\n                    </nav>\n                    <div class=\"ff-panel-subtab-pane ff-subtab-active\" id=\"ff-subtab-analyse\">\n                      <div class=\"force-field-details-section\" id=\"force-field-details-cause\">\n                        <div class=\"force-field-detail-empty\">\n                          Cliquez sur un champ de force pour voir le d\u00E9tail du calcul.\n                        </div>\n                      </div>\n                    </div>\n                    <div class=\"ff-panel-subtab-pane\" id=\"ff-subtab-etat-final\">\n                      <div class=\"force-field-details-section\" id=\"ghost-details-cause\">\n                        <div class=\"force-field-detail-empty\">\n                          Activez une action pour afficher le d\u00E9tail de la tension ghost.\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Onglet Debug : outils de dev/test, jamais affich\u00E9 en production -->\n              <div class=\"ff-panel-tab-pane\" id=\"ff-tab-debug\">\n                <div class=\"debug-panel-content\">\n                  <!-- En t\u00EAte pour un acc\u00E8s sans scroll ; options g\u00E9n\u00E9r\u00E9es depuis\n                       le registre des contacts (DiagramSwitcherControl.ts). -->\n                  <div class=\"shared-controls-group debug-diagram-group\">\n                    <div class=\"shared-controls-title\">Diagramme</div>\n                    <select\n                      id=\"debug-diagram-switcher\"\n                      class=\"debug-diagram-select\"\n                      aria-label=\"Diagramme affich\u00E9\"\n                      autocomplete=\"off\"\n                      data-snapshot-ignore\n                      title=\"Changer de diagramme (recharge la page avec ?diagram=)\"\n                    ></select>\n                    <div class=\"debug-diagram-active\">\n                      Actif : <span id=\"debug-diagram-active\">-</span>\n                    </div>\n                  </div>\n                  <div class=\"shared-controls-group\">\n                    <div class=\"shared-controls-title\">Actions</div>\n                    <button\n                      id=\"toggle-all-labels-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"Afficher/Masquer tous les libell\u00E9s\"\n                    >\n                      Afficher libell\u00E9s\n                    </button>\n                    <button\n                      id=\"fill-random-actions-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"Remplir la pile d'actions avec des actions al\u00E9atoires\"\n                    >\n                      Remplir pile\n                    </button>\n                    <button\n                      id=\"trigger-outer-spark-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"D\u00E9clencher l'\u00E9tincelle du p\u00E9rim\u00E8tre\"\n                    >\n                      \u00C9tincelle\n                    </button>\n                    <button\n                      id=\"trigger-balance-spark-button\"\n                      class=\"debug-panel-btn\"\n                      title=\"D\u00E9clencher l'\u00E9tincelle d'\u00E9quilibre\"\n                    >\n                      \u00C9tincelle d'\u00E9quilibre\n                    </button>\n                  </div>\n                  <div class=\"shared-controls-group\">\n                    <div class=\"shared-controls-title\">Adverse</div>\n                    <div\n                      class=\"control-block-inline\"\n                      title=\"Les actions et \u00C9v\u00E9nements adverses remplacent les ordinaires sur le diagramme et dans la hi\u00E9rarchie, pour les placer soi-m\u00EAme dans la pile (qui garde les deux)\"\n                    >\n                      <label for=\"toggle-adverse-mode\">Mode adverse :</label>\n                      <input id=\"toggle-adverse-mode\" type=\"checkbox\" />\n                    </div>\n                  </div>\n                  <div class=\"shared-controls-group\">\n                    <div class=\"shared-controls-title\">Difficult\u00E9 du niveau</div>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"2\"\n                      title=\"Laisser le syst\u00E8me placer 2 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      Facile (2)\n                    </button>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"5\"\n                      title=\"Laisser le syst\u00E8me placer 5 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      Moyen (5)\n                    </button>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"9\"\n                      title=\"Laisser le syst\u00E8me placer 9 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      Difficile (9)\n                    </button>\n                    <button\n                      class=\"debug-panel-btn\"\n                      data-adverse-difficulty=\"12\"\n                      title=\"Laisser le syst\u00E8me placer 12 items adverses (actions + \u00E9v\u00E9nements) dans la pile active\"\n                    >\n                      R\u00E9aliste (12)\n                    </button>\n                  </div>\n                  <div class=\"shared-controls-group\">\n          <h3>Format Cause (Nouveau)</h3>\n          <div class=\"debug-component-info\">\n            <strong>Composant:</strong>\n            <span id=\"current-component-cause\">-</span> |\n            <strong>Orientation:</strong>\n            <span id=\"current-orientation-cause\">-</span>\n          </div>\n          <div class=\"control-block\">\n            <label for=\"slider-cause\">Tension:</label>\n            <input\n              id=\"slider-cause\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              value=\"0.5\"\n            />\n            <div class=\"slider-value\" id=\"slider-value-cause\">0.50</div>\n          </div>\n          <div class=\"control-block\">\n            <label for=\"slider-cause-ghost\">Tension Ghost:</label>\n            <input\n              id=\"slider-cause-ghost\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              value=\"0.5\"\n            />\n            <div class=\"slider-value\" id=\"slider-value-cause-ghost\">0.50</div>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-ghost\">Afficher Ghost:</label>\n            <input id=\"toggle-cause-ghost\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-spark\">Etincelle perimetre:</label>\n            <input id=\"toggle-cause-spark\" type=\"checkbox\" />\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-spikes\">Afficher Spikes:</label>\n            <input id=\"toggle-cause-spikes\" type=\"checkbox\" checked />\n          </div>\n                  </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Rotation Yin/Yang</div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-rotation\">Rotation Yin/Yang:</label>\n            <input id=\"toggle-cause-rotation\" type=\"checkbox\" />\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-rotation-clockwise\">Sens horaire:</label>\n            <input id=\"toggle-cause-rotation-clockwise\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-speed\">Vitesse cible:</label>\n            <input\n              id=\"rotation-speed\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1000\"\n              step=\"1\"\n              value=\"321\"\n              title=\"\u00C9chelle logarithmique : de rapide (2s/tour, \u00E0 gauche) \u00E0 quasi \u00E0 l'arr\u00EAt (5min/tour, \u00E0 droite)\"\n            />\n            <span id=\"rotation-speed-value\">10s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n            <input\n              id=\"rotation-ramp\"\n              type=\"range\"\n              min=\"0\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"600\"\n            />\n            <span id=\"rotation-ramp-value\">0.6s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-rotation-idle-auto\">Auto-rotation apr\u00E8s inactivit\u00E9:</label>\n            <input id=\"toggle-rotation-idle-auto\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-idle-delay\">Temps d'inactivit\u00E9:</label>\n            <input\n              id=\"rotation-idle-delay\"\n              type=\"range\"\n              min=\"2000\"\n              max=\"300000\"\n              step=\"1000\"\n              value=\"20000\"\n              disabled\n              title=\"D\u00E9clenche automatiquement la rotation apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n            />\n            <span id=\"rotation-idle-delay-value\">20s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"rotation-stop-mode\">Mode d'arr\u00EAt:</label>\n            <select id=\"rotation-stop-mode\">\n              <option value=\"normal\" selected>Normal (rampe)</option>\n              <option value=\"instant\">Instantan\u00E9</option>\n              <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n            </select>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"rotation-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n            <input\n              id=\"rotation-fast-stop\"\n              type=\"range\"\n              min=\"100\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"800\"\n              title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n            />\n            <span id=\"rotation-fast-stop-value\">0.8s</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Orbite Satellites</div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-cause-orbit\">Orbites enfants:</label>\n            <input id=\"toggle-cause-orbit\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-speed\">Vitesse cible:</label>\n            <input\n              id=\"orbit-speed\"\n              type=\"range\"\n              min=\"-1000\"\n              max=\"1000\"\n              step=\"1\"\n              value=\"884\"\n              title=\"\u00C9chelle logarithmique sign\u00E9e : n\u00E9gatif = sens antihoraire, positif = sens horaire, 0 = \u00E0 l'arr\u00EAt ; les vitesses lentes (jusqu'\u00E0 0.005 rad/s) se r\u00E8glent finement pr\u00E8s du centre\"\n            />\n            <span id=\"orbit-speed-value\">1.00 rad/s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-ramp\">Temps de rampe (acc\u00E9l./d\u00E9c\u00E9l.):</label>\n            <input\n              id=\"orbit-ramp\"\n              type=\"range\"\n              min=\"0\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"600\"\n            />\n            <span id=\"orbit-ramp-value\">0.6s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"toggle-orbit-idle-auto\">Auto-orbite apr\u00E8s inactivit\u00E9:</label>\n            <input id=\"toggle-orbit-idle-auto\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-idle-delay\">Temps d'inactivit\u00E9:</label>\n            <input\n              id=\"orbit-idle-delay\"\n              type=\"range\"\n              min=\"2000\"\n              max=\"300000\"\n              step=\"1000\"\n              value=\"20000\"\n              disabled\n              title=\"D\u00E9clenche automatiquement l'orbite apr\u00E8s ce temps sans interaction \u2014 s'arr\u00EAte au retour d'activit\u00E9\"\n            />\n            <span id=\"orbit-idle-delay-value\">20s</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"orbit-stop-mode\">Mode d'arr\u00EAt:</label>\n            <select id=\"orbit-stop-mode\">\n              <option value=\"normal\" selected>Normal (rampe)</option>\n              <option value=\"instant\">Instantan\u00E9</option>\n              <option value=\"fast\">Acc\u00E9l\u00E9r\u00E9 (dur\u00E9e r\u00E9glable)</option>\n            </select>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"orbit-fast-stop\">Dur\u00E9e arr\u00EAt acc\u00E9l\u00E9r\u00E9:</label>\n            <input\n              id=\"orbit-fast-stop\"\n              type=\"range\"\n              min=\"100\"\n              max=\"3000\"\n              step=\"100\"\n              value=\"800\"\n              title=\"Utilis\u00E9e par le mode d'arr\u00EAt Acc\u00E9l\u00E9r\u00E9 : rejoint toujours la position de base dans cette dur\u00E9e fixe (acc\u00E9l\u00E8re puis d\u00E9c\u00E9l\u00E8re si besoin), au lieu d'attendre la fin naturelle du tour\"\n            />\n            <span id=\"orbit-fast-stop-value\">0.8s</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Pr\u00E9f\u00E9rences</div>\n          <div class=\"shared-control\">\n            <button\n              id=\"snapshot-controls-btn\"\n              style=\"\n                width: 100%;\n                padding: 8px;\n                cursor: pointer;\n                background-color: #2196f3;\n                color: white;\n                border: none;\n                border-radius: 4px;\n                font-weight: bold;\n              \"\n            >\n              \uD83D\uDCF8 Sauvegarder comme d\u00E9faut\n            </button>\n          </div>\n          <div class=\"shared-control\">\n            <button\n              id=\"restore-controls-btn\"\n              style=\"\n                width: 100%;\n                padding: 8px;\n                cursor: pointer;\n                background-color: #4caf50;\n                color: white;\n                border: none;\n                border-radius: 4px;\n                font-weight: bold;\n              \"\n            >\n              \u21A9\uFE0F Restaurer d\u00E9fauts\n            </button>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Affichage</div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-details-panel\"\n              >Afficher panneau d\u00E9tails:</label\n            >\n            <input id=\"toggle-cause-details-panel\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"details-panel-width\">Largeur panneau d\u00E9tails:</label>\n            <input\n              id=\"details-panel-width\"\n              type=\"range\"\n              min=\"220\"\n              max=\"1200\"\n              step=\"10\"\n              value=\"600\"\n            />\n            <span id=\"details-panel-width-value\">600px</span>\n          </div>\n        </div>\n\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Ondes & p\u00E9rim\u00E8tre</div>\n          <div class=\"shared-control\">\n            <label for=\"wave-thickness\">\u00C9paisseur ondes:</label>\n            <input\n              id=\"wave-thickness\"\n              type=\"range\"\n              min=\"1\"\n              max=\"5\"\n              step=\"0.5\"\n              value=\"1\"\n            />\n            <span id=\"wave-thickness-value\">1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"perimeter-thickness\">\u00C9paisseur p\u00E9rim\u00E8tre:</label>\n            <input\n              id=\"perimeter-thickness\"\n              type=\"range\"\n              min=\"1\"\n              max=\"5\"\n              step=\"0.5\"\n              value=\"5\"\n            />\n            <span id=\"perimeter-thickness-value\">5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"perimeter-solid\">P\u00E9rim\u00E8tre plein:</label>\n            <input id=\"perimeter-solid\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"perimeter-wave-opacity\">Opacit\u00E9 p\u00E9rim\u00E8tre/ondes:</label>\n            <input\n              id=\"perimeter-wave-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"perimeter-wave-opacity-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-count\">Nombre d'ondes:</label>\n            <input\n              id=\"wave-count\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"1\"\n              value=\"10\"\n            />\n            <span id=\"wave-count-value\">10</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-spacing\">Espacement ondes:</label>\n            <input\n              id=\"wave-spacing\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"2\"\n              step=\"0.1\"\n              value=\"2.0\"\n            />\n            <span id=\"wave-spacing-value\">2.0</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Yin/yang Ghosts parameters</div>\n          <div class=\"shared-control\">\n            <label for=\"yin-opacity\">Opacit\u00E9 yin ghost:</label>\n            <input\n              id=\"yin-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.6\"\n            />\n            <span id=\"yin-opacity-value\">0.60</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yang-opacity\">Opacit\u00E9 yang ghost:</label>\n            <input\n              id=\"yang-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.6\"\n            />\n            <span id=\"yang-opacity-value\">0.60</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-color-increase\"\n              >Couleur tension d\u00E9terioration:</label\n            >\n            <input\n              id=\"wave-color-increase\"\n              type=\"color\"\n              value=\"#aa0000\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-color-decrease\"\n              >Couleur tension am\u00E9lioration:</label\n            >\n            <input\n              id=\"wave-color-decrease\"\n              type=\"color\"\n              value=\"#00aa00\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"ghost-pulse-duration\">Dur\u00E9e pulsation ghost (s):</label>\n            <input\n              id=\"ghost-pulse-duration\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"0.5\"\n              value=\"1.5\"\n            />\n            <span id=\"ghost-pulse-duration-value\">1.5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pulse-morph-ratio\">Ratio morphing/reset:</label>\n            <input\n              id=\"pulse-morph-ratio\"\n              type=\"range\"\n              min=\"0.1\"\n              max=\"0.9\"\n              step=\"0.05\"\n              value=\"0.85\"\n            />\n            <span id=\"pulse-morph-ratio-value\">85/15</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"wave-travel-duration\">Dur\u00E9e trajet onde (s):</label>\n            <input\n              id=\"wave-travel-duration\"\n              type=\"range\"\n              min=\"0.3\"\n              max=\"5\"\n              step=\"0.1\"\n              value=\"1.2\"\n            />\n            <span id=\"wave-travel-duration-value\">1.2</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"ghost-delta-badge-scale\"\n              >Taille badge delta (c\u0153ur):</label\n            >\n            <input\n              id=\"ghost-delta-badge-scale\"\n              type=\"range\"\n              min=\"0.8\"\n              max=\"2.5\"\n              step=\"0.05\"\n              value=\"1.35\"\n            />\n            <span id=\"ghost-delta-badge-scale-value\">1.35</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Yin/yang children</div>\n          <div class=\"shared-control\">\n            <label for=\"child-scale\">Taille enfants:</label>\n            <input\n              id=\"child-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.4\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"child-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"children-orbit-distance\">Distance orbite:</label>\n            <input\n              id=\"children-orbit-distance\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.6\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"children-orbit-distance-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"random-force-fields-count\"\n              >Nb champs force al\u00E9atoires:</label\n            >\n            <input\n              id=\"random-force-fields-count\"\n              type=\"range\"\n              min=\"0\"\n              max=\"6\"\n              step=\"1\"\n              value=\"2\"\n            />\n            <span id=\"random-force-fields-count-value\">2</span>\n          </div>\n        </div>\n\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Com\u00E8te de l'action en focus</div>\n          <div class=\"shared-control\">\n            <label for=\"comet-loop-gap\">Pause entre deux passes:</label>\n            <input\n              id=\"comet-loop-gap\"\n              type=\"range\"\n              min=\"0\"\n              max=\"10000\"\n              step=\"250\"\n              value=\"3000\"\n              title=\"Boucle jou\u00E9e sur les champs de force de l'action en focus (STACK) : pause entre la fin d'une passe et le d\u00E9part de la suivante\"\n            />\n            <span id=\"comet-loop-gap-value\">3.0s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-speed\">Vitesse:</label>\n            <input\n              id=\"comet-speed\"\n              type=\"range\"\n              min=\"150\"\n              max=\"2000\"\n              step=\"25\"\n              value=\"650\"\n            />\n            <span id=\"comet-speed-value\">650 px/s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-min-hop\">Dur\u00E9e minimale d'un saut:</label>\n            <input\n              id=\"comet-min-hop\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1500\"\n              step=\"20\"\n              value=\"220\"\n            />\n            <span id=\"comet-min-hop-value\">220 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-dot-radius\">Taille du noyau:</label>\n            <input\n              id=\"comet-dot-radius\"\n              type=\"range\"\n              min=\"1.5\"\n              max=\"14\"\n              step=\"0.5\"\n              value=\"7.5\"\n            />\n            <span id=\"comet-dot-radius-value\">7.5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-tail-ms\">Longueur de la queue:</label>\n            <input\n              id=\"comet-tail-ms\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1000\"\n              step=\"10\"\n              value=\"260\"\n            />\n            <span id=\"comet-tail-ms-value\">260 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-tail-width\">\u00C9paisseur de la queue:</label>\n            <input\n              id=\"comet-tail-width\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"12\"\n              step=\"0.25\"\n              value=\"6\"\n            />\n            <span id=\"comet-tail-width-value\">6.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-glow\">Halo / glow:</label>\n            <input\n              id=\"comet-glow\"\n              type=\"range\"\n              min=\"0\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"2\"\n            />\n            <span id=\"comet-glow-value\">2.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-fade\">Extinction \u00E0 l'arriv\u00E9e:</label>\n            <input\n              id=\"comet-fade\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1500\"\n              step=\"10\"\n              value=\"260\"\n            />\n            <span id=\"comet-fade-value\">260 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-ring-opacity\">Anneaux d'arriv\u00E9e:</label>\n            <input\n              id=\"comet-ring-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.9\"\n            />\n            <span id=\"comet-ring-opacity-value\">0.90</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"comet-use-block-color\">Couleur de l'action:</label>\n            <input\n              id=\"comet-use-block-color\"\n              type=\"checkbox\"\n              title=\"Prendre la couleur de l'item de la pile du bloc ; d\u00E9coch\u00E9 : couleur fixe ci-dessous\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"comet-color\">Couleur fixe / de repli:</label>\n            <input\n              id=\"comet-color\"\n              type=\"color\"\n              value=\"#ffd84a\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n        </div>\n\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Com\u00E8te des listes Source / Bilan</div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-speed\">Vitesse:</label>\n            <input\n              id=\"pviz-comet-speed\"\n              type=\"range\"\n              min=\"150\"\n              max=\"2000\"\n              step=\"25\"\n              value=\"650\"\n            />\n            <span id=\"pviz-comet-speed-value\">650 px/s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-min-hop\">Dur\u00E9e minimale d'un saut:</label>\n            <input\n              id=\"pviz-comet-min-hop\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1500\"\n              step=\"20\"\n              value=\"220\"\n            />\n            <span id=\"pviz-comet-min-hop-value\">220 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-burst-gap\">Intervalle de rafale:</label>\n            <input\n              id=\"pviz-comet-burst-gap\"\n              type=\"range\"\n              min=\"0\"\n              max=\"600\"\n              step=\"10\"\n              value=\"100\"\n              title=\"D\u00E9lai entre deux d\u00E9parts au clic sur l'en-t\u00EAte d'une liste\"\n            />\n            <span id=\"pviz-comet-burst-gap-value\">100 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-dot-radius\">Taille du noyau:</label>\n            <input\n              id=\"pviz-comet-dot-radius\"\n              type=\"range\"\n              min=\"1.5\"\n              max=\"14\"\n              step=\"0.5\"\n              value=\"7.5\"\n            />\n            <span id=\"pviz-comet-dot-radius-value\">7.5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-tail-ms\">Longueur de la queue:</label>\n            <input\n              id=\"pviz-comet-tail-ms\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1000\"\n              step=\"10\"\n              value=\"260\"\n            />\n            <span id=\"pviz-comet-tail-ms-value\">260 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-tail-width\">\u00C9paisseur de la queue:</label>\n            <input\n              id=\"pviz-comet-tail-width\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"12\"\n              step=\"0.25\"\n              value=\"6\"\n            />\n            <span id=\"pviz-comet-tail-width-value\">6.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-glow\">Halo / glow:</label>\n            <input\n              id=\"pviz-comet-glow\"\n              type=\"range\"\n              min=\"0\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"2\"\n            />\n            <span id=\"pviz-comet-glow-value\">2.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-fade\">Extinction \u00E0 l'arriv\u00E9e:</label>\n            <input\n              id=\"pviz-comet-fade\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1500\"\n              step=\"10\"\n              value=\"260\"\n            />\n            <span id=\"pviz-comet-fade-value\">260 ms</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-ring-opacity\">Anneaux d'arriv\u00E9e:</label>\n            <input\n              id=\"pviz-comet-ring-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.9\"\n            />\n            <span id=\"pviz-comet-ring-opacity-value\">0.90</span>\n          </div>\n          <div class=\"control-block-inline\">\n            <label for=\"pviz-comet-use-block-color\">Couleur de l'action:</label>\n            <input\n              id=\"pviz-comet-use-block-color\"\n              type=\"checkbox\"\n              title=\"Prendre la couleur de l'item de la pile du bloc ; d\u00E9coch\u00E9 : couleur fixe ci-dessous\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"pviz-comet-color\">Couleur fixe / de repli:</label>\n            <input\n              id=\"pviz-comet-color\"\n              type=\"color\"\n              value=\"#ffd84a\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n        </div>\n\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Libell\u00E9s</div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-action-deltas\"\n              >Afficher deltas d'action:</label\n            >\n            <input id=\"toggle-cause-action-deltas\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-children-labels\"\n              >Afficher libell\u00E9s enfants:</label\n            >\n            <input id=\"toggle-cause-children-labels\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-cause-odd-labels\">Afficher libell\u00E9s ODD:</label>\n            <input id=\"toggle-cause-odd-labels\" type=\"checkbox\" checked />\n          </div>\n\n          <div class=\"shared-control\">\n            <label for=\"label-font-scale\">Taille police enfant:</label>\n            <input\n              id=\"label-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"component-label-font-scale\"\n              >Taille police Libell\u00E9 facette:</label\n            >\n            <input\n              id=\"component-label-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"component-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"component-legend-label-font-scale\"\n              >Taille police libell\u00E9s d\u00E9ploy\u00E9s:</label\n            >\n            <input\n              id=\"component-legend-label-font-scale\"\n              type=\"range\"\n              min=\"0.4\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"component-legend-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"odd-label-font-scale\">Taille police ODD:</label>\n            <input\n              id=\"odd-label-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"odd-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-label-font-scale\"\n              >Taille police score/poids facette:</label\n            >\n            <input\n              id=\"facette-label-font-scale\"\n              type=\"range\"\n              min=\"0.4\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"facette-label-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-facette-label-suffix\"\n              >Afficher \"/max\" (score/poids facette et ODD):</label\n            >\n            <input id=\"toggle-facette-label-suffix\" type=\"checkbox\" />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"action-stack-label-font-scale\"\n              >Taille police actions:</label\n            >\n            <input\n              id=\"action-stack-label-font-scale\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1.5\"\n            />\n            <span id=\"action-stack-label-font-scale-value\">1.50</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"action-stack-history-button-scale\"\n              >Taille boutons Undo/Redo:</label\n            >\n            <input\n              id=\"action-stack-history-button-scale\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"action-stack-history-button-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-label-max-lines\">Lignes libell\u00E9s enfants:</label>\n            <input\n              id=\"child-label-max-lines\"\n              type=\"range\"\n              min=\"1\"\n              max=\"3\"\n              step=\"1\"\n              value=\"1\"\n            />\n            <span id=\"child-label-max-lines-value\">1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"odd-label-max-lines\">Lignes libell\u00E9s ODD:</label>\n            <input\n              id=\"odd-label-max-lines\"\n              type=\"range\"\n              min=\"1\"\n              max=\"3\"\n              step=\"1\"\n              value=\"1\"\n            />\n            <span id=\"odd-label-max-lines-value\">1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"label-short-max-chars\">Caract\u00E8res max (ellipse):</label>\n            <input\n              id=\"label-short-max-chars\"\n              type=\"range\"\n              min=\"5\"\n              max=\"250\"\n              step=\"1\"\n              value=\"20\"\n            />\n            <span id=\"label-short-max-chars-value\">20</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-label-shadow\">Ombre texte:</label>\n            <input id=\"toggle-label-shadow\" type=\"checkbox\" checked />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-legend-labels-bg\"\n              >Cadre libell\u00E9s d\u00E9ploy\u00E9s:</label\n            >\n            <input id=\"toggle-legend-labels-bg\" type=\"checkbox\" checked />\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Combos</div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-combo-uncapped-chained-performance\"\n              >Performances cha\u00EEn\u00E9es non plafonn\u00E9es:</label\n            >\n            <input\n              id=\"toggle-combo-uncapped-chained-performance\"\n              type=\"checkbox\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"toggle-combo-dangerous-can-become-bonus\"\n              >Une s\u00E9curisation peut devenir un bonus (plafond \u00D71,25):</label\n            >\n            <input\n              id=\"toggle-combo-dangerous-can-become-bonus\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Etat/Delta</div>\n          <div class=\"shared-control\">\n            <label for=\"child-state-delta-font-scale\"\n              >Taille police \u00C9tats/Delta enfants:</label\n            >\n            <input\n              id=\"child-state-delta-font-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"1.8\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"child-state-delta-font-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-state-delta-offset\"\n              >Distance \u00C9tats/Delta enfants:</label\n            >\n            <input\n              id=\"child-state-delta-offset\"\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              step=\"1\"\n              value=\"20\"\n            />\n            <span id=\"child-state-delta-offset-value\">20</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-state-delta-box-scale\"\n              >Taille anneau s\u00E9lection:</label\n            >\n            <input\n              id=\"child-state-delta-box-scale\"\n              type=\"range\"\n              min=\"0.3\"\n              max=\"3.0\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"child-state-delta-box-scale-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Grappe actions</div>\n          <div class=\"shared-control\">\n            <label for=\"child-action-menu-distance\">Distance bottons:</label>\n            <input\n              id=\"child-action-menu-distance\"\n              type=\"range\"\n              min=\"0.8\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.7\"\n            />\n            <span id=\"child-action-menu-distance-value\">1.70</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-action-menu-scale\">Taille buttons:</label>\n            <input\n              id=\"child-action-menu-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"child-action-menu-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"child-action-icon-scale\">Taille ic\u00F4nes:</label>\n            <input\n              id=\"child-action-icon-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"child-action-icon-scale-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">\u00C9v\u00E9nements cl\u00E9s</div>\n          <div class=\"shared-control\">\n            <label for=\"core-event-menu-distance-offset\"\n              >Distance boutons:</label\n            >\n            <input\n              id=\"core-event-menu-distance-offset\"\n              type=\"range\"\n              min=\"-80\"\n              max=\"80\"\n              step=\"5\"\n              value=\"0\"\n            />\n            <span id=\"core-event-menu-distance-offset-value\">0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"core-event-menu-scale\">Taille boutons:</label>\n            <input\n              id=\"core-event-menu-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"core-event-menu-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"core-event-icon-scale\">Taille ic\u00F4nes:</label>\n            <input\n              id=\"core-event-icon-scale\"\n              type=\"range\"\n              min=\"0.6\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.0\"\n            />\n            <span id=\"core-event-icon-scale-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Yin/yang</div>\n          <div class=\"shared-control\">\n            <label for=\"odd-gradient-spread\">Progression d\u00E9grad\u00E9:</label>\n            <input\n              id=\"odd-gradient-spread\"\n              type=\"range\"\n              min=\"0.3\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"odd-gradient-spread-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"odd-gradient-intensity\">Intensit\u00E9 couleur:</label>\n            <input\n              id=\"odd-gradient-intensity\"\n              type=\"range\"\n              min=\"0.2\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"odd-gradient-intensity-value\">1.00</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Bordures</div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-intensity\">Intensite etincelle:</label>\n            <input\n              id=\"border-spark-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"2\"\n              step=\"0.1\"\n              value=\"2\"\n            />\n            <span id=\"border-spark-intensity-value\">2.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-length\">Longueur etincelle:</label>\n            <input\n              id=\"border-spark-length\"\n              type=\"range\"\n              min=\"0.1\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"0.1\"\n            />\n            <span id=\"border-spark-length-value\">0.1</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-width\">Epaisseur etincelle:</label>\n            <input\n              id=\"border-spark-width\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"3\"\n            />\n            <span id=\"border-spark-width-value\">3.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-glow-color\">Couleur glow etincelle:</label>\n            <input\n              id=\"border-spark-glow-color\"\n              type=\"color\"\n              value=\"#72f5ff\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-spark-speed\">Vitesse etincelle:</label>\n            <input\n              id=\"border-spark-speed\"\n              type=\"range\"\n              min=\"800\"\n              max=\"8000\"\n              step=\"100\"\n              value=\"7000\"\n            />\n            <span id=\"border-spark-speed-value\">7.0s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-glow-intensity\">Glow/Halo:</label>\n            <input\n              id=\"border-glow-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.5\"\n            />\n            <span id=\"border-glow-intensity-value\">0.50</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-width-expansion\"\n              >\u00C9largissement segment actif:</label\n            >\n            <input\n              id=\"border-segment-width-expansion\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.25\"\n            />\n            <span id=\"border-segment-width-expansion-value\">0.25</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-corner-radius\">Arrondi des arcs:</label>\n            <input\n              id=\"border-segment-corner-radius\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.6\"\n            />\n            <span id=\"border-segment-corner-radius-value\">0.60</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-bevel-intensity\">Biseau des arcs:</label>\n            <input\n              id=\"border-segment-bevel-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.7\"\n            />\n            <span id=\"border-segment-bevel-intensity-value\">0.70</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"border-segment-hover-lift\">Soul\u00E8vement survol:</label>\n            <input\n              id=\"border-segment-hover-lift\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.35\"\n            />\n            <span id=\"border-segment-hover-lift-value\">0.35</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">yinyang sparks</div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-intensity\">Intensite etincelle:</label>\n            <input\n              id=\"yinyang-spark-intensity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"2\"\n              step=\"0.1\"\n              value=\"2\"\n            />\n            <span id=\"yinyang-spark-intensity-value\">2.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-max-length\"\n              >Longueur max etincelle:</label\n            >\n            <input\n              id=\"yinyang-spark-max-length\"\n              type=\"range\"\n              min=\"0.1\"\n              max=\"2.5\"\n              step=\"0.1\"\n              value=\"1.5\"\n            />\n            <span id=\"yinyang-spark-max-length-value\">1.5</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-width\">Epaisseur etincelle:</label>\n            <input\n              id=\"yinyang-spark-width\"\n              type=\"range\"\n              min=\"0.5\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"3\"\n            />\n            <span id=\"yinyang-spark-width-value\">3.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-duration\">Duree etincelle:</label>\n            <input\n              id=\"yinyang-spark-duration\"\n              type=\"range\"\n              min=\"800\"\n              max=\"8000\"\n              step=\"100\"\n              value=\"3500\"\n            />\n            <span id=\"yinyang-spark-duration-value\">3.5s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-yang-color\"\n              >Couleur etincelle Yang:</label\n            >\n            <input\n              id=\"yinyang-spark-yang-color\"\n              type=\"color\"\n              value=\"#72f5ff\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-yin-color\"\n              >Couleur etincelle Yin:</label\n            >\n            <input\n              id=\"yinyang-spark-yin-color\"\n              type=\"color\"\n              value=\"#ff4da6\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-distance\"\n              >Portee crepitement:</label\n            >\n            <input\n              id=\"yinyang-spark-ember-distance\"\n              type=\"range\"\n              min=\"10\"\n              max=\"150\"\n              step=\"5\"\n              value=\"90\"\n            />\n            <span id=\"yinyang-spark-ember-distance-value\">90</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-size\">Taille crepitement:</label>\n            <input\n              id=\"yinyang-spark-ember-size\"\n              type=\"range\"\n              min=\"0.2\"\n              max=\"3\"\n              step=\"0.1\"\n              value=\"1\"\n            />\n            <span id=\"yinyang-spark-ember-size-value\">1.0</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-speed\">Vitesse crepitement:</label>\n            <input\n              id=\"yinyang-spark-ember-speed\"\n              type=\"range\"\n              min=\"100\"\n              max=\"1500\"\n              step=\"50\"\n              value=\"500\"\n            />\n            <span id=\"yinyang-spark-ember-speed-value\">0.50s</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-ember-color\"\n              >Couleur crepitement:</label\n            >\n            <input\n              id=\"yinyang-spark-ember-color\"\n              type=\"color\"\n              value=\"#fff3c4\"\n              style=\"width: 50px; height: 25px; border: none; cursor: pointer\"\n            />\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-taper-power\">Forme tetard:</label>\n            <input\n              id=\"yinyang-spark-taper-power\"\n              type=\"range\"\n              min=\"1\"\n              max=\"6\"\n              step=\"0.1\"\n              value=\"2.2\"\n            />\n            <span id=\"yinyang-spark-taper-power-value\">2.2</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-birth-width\">Largeur naissance:</label>\n            <input\n              id=\"yinyang-spark-birth-width\"\n              type=\"range\"\n              min=\"0\"\n              max=\"0.9\"\n              step=\"0.05\"\n              value=\"0\"\n            />\n            <span id=\"yinyang-spark-birth-width-value\">0.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-drift-count\">Nombre de tetards:</label>\n            <input\n              id=\"yinyang-spark-drift-count\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"1\"\n              value=\"3\"\n            />\n            <span id=\"yinyang-spark-drift-count-value\">3</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-drift-remnant-scale\"\n              >Longueur reliquat:</label\n            >\n            <input\n              id=\"yinyang-spark-drift-remnant-scale\"\n              type=\"range\"\n              min=\"0.05\"\n              max=\"3\"\n              step=\"0.05\"\n              value=\"1\"\n            />\n            <span id=\"yinyang-spark-drift-remnant-scale-value\">1.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"yinyang-spark-drift-centrifugal-force\"\n              >Force centrifuge tetards:</label\n            >\n            <input\n              id=\"yinyang-spark-drift-centrifugal-force\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              value=\"0.15\"\n            />\n            <span id=\"yinyang-spark-drift-centrifugal-force-value\"\n              >0.15</span\n            >\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Images facette</div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-margin\">Marge vignettes:</label>\n            <input\n              id=\"facette-image-margin\"\n              type=\"range\"\n              min=\"0\"\n              max=\"40\"\n              step=\"1\"\n              value=\"20\"\n            />\n            <span id=\"facette-image-margin-value\">20</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-fade-start\">D\u00E9but du fondu:</label>\n            <input\n              id=\"facette-image-fade-start\"\n              type=\"range\"\n              min=\"0\"\n              max=\"95\"\n              step=\"5\"\n              value=\"45\"\n            />\n            <span id=\"facette-image-fade-start-value\">45%</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-fade-opacity\">Opacit\u00E9 au bord:</label>\n            <input\n              id=\"facette-image-fade-opacity\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0\"\n            />\n            <span id=\"facette-image-fade-opacity-value\">0.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-diameter\">Diam\u00E8tre vignettes:</label>\n            <input\n              id=\"facette-image-diameter\"\n              type=\"range\"\n              min=\"0.2\"\n              max=\"2\"\n              step=\"0.05\"\n              value=\"2\"\n            />\n            <span id=\"facette-image-diameter-value\">2.00</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-weight-curve\">Courbe r\u00E9tr\u00E9cissement (poids):</label>\n            <input\n              id=\"facette-image-weight-curve\"\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              value=\"0.55\"\n            />\n            <span id=\"facette-image-weight-curve-value\">0.55</span>\n          </div>\n          <div class=\"shared-control\">\n            <label for=\"facette-image-offset\">\u00C9loignement depuis la sph\u00E8re:</label>\n            <input\n              id=\"facette-image-offset\"\n              type=\"range\"\n              min=\"-150\"\n              max=\"150\"\n              step=\"5\"\n              value=\"-150\"\n            />\n            <span id=\"facette-image-offset-value\">-150</span>\n          </div>\n        </div>\n        <div class=\"shared-controls-group\">\n          <div class=\"shared-controls-title\">Pictogrammes ODD</div>\n          <div class=\"shared-control\">\n            <label for=\"odd-chip-zoom\">Grossissement au clic:</label>\n            <input\n              id=\"odd-chip-zoom\"\n              type=\"range\"\n              min=\"1\"\n              max=\"10\"\n              step=\"1\"\n              value=\"5\"\n            />\n            <span id=\"odd-chip-zoom-value\">5x</span>\n          </div>\n        </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n";