Caisson du tableau de bord d’exposition du jardin
Dans le contexte d’un jardin d’exposition, réaliser une coque de tableau de bord : avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptable à différentes tailles.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Caisson du tableau de bord d’exposition du jardin</title>
<style>
:root { --ink:#18332f; --paper:#f4efe4; --accent:#d45f3e; --secondary:#8fc4ad; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
.panel{padding:24px;border-block:1px solid var(--ink);background:transparent}.stack{display:grid;gap:22px}.row{display:flex;flex-wrap:wrap;gap:16px}.action{padding:8px 0;border:0;border-bottom:1px solid currentColor;background:transparent;letter-spacing:.08em}.action.primary,.action.is-active{color:var(--accent);border-bottom-width:4px}.status{min-height:28px;margin-top:20px;font-style:italic}.metric{font-family:Didot,serif;font-size:clamp(38px,8vw,76px)}.muted{max-width:54ch;line-height:1.8}.meter{position:relative;height:3px;background:var(--line)}.meter>i{position:absolute;inset:0 auto 0 0;background:var(--accent)}.chip{padding-bottom:3px;border-bottom:1px solid var(--ink);font-size:13px}
.composition-split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}.split-note{position:sticky;top:20px;display:grid;gap:14px;padding:18px 12px;border-block:3px double var(--accent);font-size:13px;line-height:1.65}.split-note b{font:900 12px/1 ui-monospace,monospace;letter-spacing:.12em}.split-note span{writing-mode:vertical-rl;min-height:120px;color:color-mix(in srgb,var(--ink) 60%,transparent)}.composition-split .demo{min-width:0}@media(max-width:900px){.composition-split{grid-template-columns:1fr}.split-note{position:static;grid-template-columns:auto 1fr}.split-note span{writing-mode:horizontal-tb;min-height:0}}
.dashboard-shell-studio{display:grid;grid-template-columns:240px 1fr;min-height:440px;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--paper)}.dashboard-shell-studio>aside{display:grid;align-content:start;gap:16px;padding:20px;background:var(--ink);color:var(--paper)}.dashboard-shell-studio>aside strong{font-size:20px}.dashboard-shell-studio nav{display:grid;gap:5px}.dashboard-shell-studio nav button{padding:11px;border:0;border-radius:9px;color:inherit;text-align:left;background:transparent}.dashboard-shell-studio nav button[aria-current="page"]{color:var(--ink);background:var(--secondary)}#shellQueue{display:grid;gap:8px;padding:0;margin:0;list-style:none}#shellQueue li{padding:10px 12px;border:1px solid #ffffff2d;border-radius:10px;background:#ffffff12}.dashboard-shell-studio>section>header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}.dashboard-shell-studio header button,.dashboard-shell-studio header input{min-height:42px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.dashboard-shell-studio main{padding:clamp(22px,5vw,48px)}.shell-widgets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.shell-widgets article{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px}.shell-widgets strong{font-size:28px}.dashboard-shell-studio.is-collapsed{grid-template-columns:0 1fr}.dashboard-shell-studio.is-collapsed>aside{overflow:hidden;padding-inline:0}@media(max-width:620px){.dashboard-shell-studio{grid-template-columns:1fr}.dashboard-shell-studio>aside{display:none}.dashboard-shell-studio>section>header{grid-template-columns:auto 1fr}.dashboard-shell-studio header button span,.dashboard-shell-studio header output{display:none}}.workflow-compare{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);gap:18px}.compare-stage{display:grid;gap:12px;min-width:0}.compare-stage>header{display:flex;justify-content:space-between;gap:16px;align-items:end}.compare-stage h2{margin:.2em 0}.compare-core{--compare-split:50%;min-width:0;padding:14px;clip-path:inset(0 calc(100% - var(--compare-split)) 0 0);outline:1px dashed var(--accent);outline-offset:-8px;transition:clip-path .25s,filter .25s}.compare-core[data-compare-channel="B"]{filter:hue-rotate(32deg) saturate(1.15)}.compare-controls{display:grid;align-content:start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:24px 4px 24px 4px;background:var(--paper)}.compare-controls fieldset,.compare-controls>label{display:grid;gap:8px}.compare-controls input[type="range"]{width:100%}#workflowCompareShelf{display:grid;gap:6px;padding:0;margin:0;list-style:none}#workflowCompareShelf li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:9px;border-top:1px solid var(--line);font-size:12px}@media(max-width:900px){.workflow-compare{grid-template-columns:1fr}.compare-stage{order:-1}.compare-core{clip-path:none;border-left:8px solid var(--accent)}}.gallery-shell-workbench{--casework-scale:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(160deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 95%,transparent));box-shadow:var(--shadow)}.gallery-shell-workbench__head{display:flex;justify-content:space-between;gap:18px;align-items:end}.gallery-shell-workbench__head h2{margin:.18em 0}.gallery-shell-workbench__modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.gallery-shell-workbench__grid{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(230px,.54fr);gap:16px}.gallery-shell-workbench__viewport{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.gallery-shell-workbench__viewport>*{display:block;width:calc(10000%/var(--casework-scale));max-width:none;transform:scale(calc(var(--casework-scale)/100));transform-origin:top left}.gallery-shell-workbench__rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:24px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 90%,#08120f),color-mix(in srgb,var(--ink) 72%,#1b120e))}.gallery-shell-workbench__rail label{display:grid;gap:8px}.gallery-shell-workbench__rail input{width:100%}.gallery-shell-workbench__notes{display:grid;gap:10px}.gallery-shell-workbench__notes button{display:grid;gap:6px;padding:14px;border:1px solid #ffffff24;border-radius:16px;color:inherit;background:#ffffff10;text-align:left}.gallery-shell-workbench__notes button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff1a;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.gallery-shell-workbench__notes small{line-height:1.45;opacity:.78}.gallery-shell-workbench__log{display:grid;gap:8px;margin:0;padding-left:18px}.gallery-shell-workbench[data-casework-mode="inspect"] .gallery-shell-workbench__viewport{outline:4px solid color-mix(in srgb,var(--accent) 26%,transparent);outline-offset:2px}.gallery-shell-workbench[data-casework-mode="handoff"] .gallery-shell-workbench__rail{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 84%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:920px){.gallery-shell-workbench__grid{grid-template-columns:1fr}}@media(max-width:560px){.gallery-shell-workbench__head{align-items:stretch;flex-direction:column}.gallery-shell-workbench__modes{justify-content:start}.gallery-shell-workbench__viewport>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="editorial" data-composition="split-note">
<main class="page">
<header class="mast"><div><span class="eyebrow">editorial / coque de tableau de bord / BEGINNER</span><h1>Caisson du tableau de bord d’exposition du jardin</h1><p class="intro">Dans le contexte d’un jardin d’exposition, réaliser une coque de tableau de bord : avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptable à différentes tailles.</p></div><span class="scenario">Présentation du jardin</span></header>
<div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Maîtriser la structure sémantique, l’agencement adaptatif, l’utilisation du clavier et la synchronisation d’état de l’enveloppe du tableau de bord.</span></aside><section class="demo" aria-label="Zone interactive de la vitrine-journal du tableau de bord du jardin"><section id="galleryShellWorkbench" class="gallery-shell-workbench" data-casework-mode="queue"><header class="gallery-shell-workbench__head"><div><span class="eyebrow">Exposition au jardin / GALLERY SHELL WORKBENCH</span><h2>Poste d’exposition du châssis de tableau de bord</h2><p>Placez la coque du tableau de bord dans le poste d’exposition, et utilisez une carte d’enregistrement indépendante, un mode de zoom et un mode de passation pour distinguer cette coque de la version audio archive.</p></div><div class="gallery-shell-workbench__modes"><button class="action primary" type="button" data-casework-mode="queue">File d’attente</button><button class="action" type="button" data-casework-mode="inspect">Voir</button><button class="action" type="button" data-casework-mode="handoff">Transfert</button></div></header><div class="gallery-shell-workbench__grid"><div class="gallery-shell-workbench__viewport"><div class="workflow-compare"><form id="workflowCompareControls" class="compare-controls"><fieldset><legend>Canal de comparaison</legend><label><input type="radio" name="workflowChannel" value="A" checked>A · Mise en page compacte de l’exposition du jardin</label><label><input type="radio" name="workflowChannel" value="B">B · mise en page équilibrée pour exposition de jardin</label></fieldset><label>Poids de la largeur du canevas<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 px</output></label><label><input id="workflowCompareFreeze" type="checkbox">Geler la version actuelle</label><button id="workflowCompareCapture" class="action primary" type="button">Échantillonner et appliquer la mise en page</button><ol id="workflowCompareShelf" aria-label="Enregistrement de version"></ol></form><section class="compare-stage"><header><span class="eyebrow">Exposition de jardin COMPARE</span><h2>Comparatif des deux versions de l’exposition du jardin</h2><output id="workflowCompareLive">Version A en attente d’échantillonnage</output></header><section id="workflowCore" class="workflow-core compare-core" data-compare-channel="A" style="--compare-split:50%"><!-- 11DZ_CORE_START:layouts-responsive-dashboard-shell --><div id="dashboardShell" class="dashboard-shell-studio"><aside><strong>Présentation du jardin</strong><nav aria-label="Navigation de l’administration"><button type="button" aria-current="page">Vue d’ensemble de l’exposition du jardin</button><button type="button">Plan d’exposition du jardin</button><button type="button">Inspiration pour une exposition de jardin</button><button type="button">Journal d’exposition du jardin</button><button type="button">Collaboration pour l’exposition du jardin</button></nav><ul id="shellQueue"><li>Projet d’exposition du jardin · 1</li><li>Inspiration d’exposition du jardin · 2</li><li>Journal d’exposition du jardin · 3</li></ul></aside><section><header><button id="dashboardMenu" type="button" aria-expanded="true" aria-controls="dashboardShell" data-core-bridge="layouts-responsive-dashboard-shell">☰ <span>Navigation</span></button><input type="search" aria-label="Espace de travail de recherche" placeholder="Recherche"><output id="shellStatus">Module actuel : aperçu de l’exposition du jardin</output></header><main><span class="eyebrow">DASHBOARD SHELL</span><h2 id="dashboardShellTitle">Vue d’ensemble de l’exposition du jardin</h2><div class="shell-widgets"><article><span>Inspiration pour une exposition de jardin</span><strong>24</strong><small>Stable</small></article><article><span>Journal d’exposition du jardin</span><strong>41</strong><small>À traiter</small></article><article><span>Collaboration pour l’exposition du jardin</span><strong>58</strong><small>Stable</small></article><article><span>Progression de l’exposition du jardin</span><strong>75</strong><small>À traiter</small></article></div></main></section></div><!-- 11DZ_CORE_END --></section></section></div></div><aside class="gallery-shell-workbench__rail"><label>Multiplicateur de suivi<input id="galleryShellWorkbenchScale" type="range" min="84" max="132" value="100"><output id="galleryShellWorkbenchScaleValue">100%</output></label><div class="gallery-shell-workbench__notes"><button type="button" data-casework-note="0" aria-pressed="true"><strong>Vue d’ensemble de l’exposition du jardin</strong><small>Vérifier les changements d’état</small></button><button type="button" data-casework-note="1" aria-pressed="false"><strong>Plan d’exposition du jardin</strong><small>Confirmer l’entrée clavier</small></button><button type="button" data-casework-note="2" aria-pressed="false"><strong>Inspiration pour une exposition de jardin</strong><small>Observer le repli pour les petits écrans</small></button><button type="button" data-casework-note="3" aria-pressed="false"><strong>Journal d’exposition du jardin</strong><small>Écrire le verdict actuel</small></button></div><button id="galleryShellWorkbenchCapture" class="action primary" type="button">Enregistrer un échantillon du poste de travail</button><ol id="galleryShellWorkbenchLog" class="gallery-shell-workbench__log"><li>En attente du premier enregistrement</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:layouts-responsive-dashboard-shell */
const dashboardShell=document.querySelector('#dashboardShell');const dashboardMenu=document.querySelector('#dashboardMenu');dashboardMenu.addEventListener('click',()=>{const collapsed=dashboardShell.classList.toggle('is-collapsed');dashboardMenu.setAttribute('aria-expanded',String(!collapsed));announce(collapsed?'La navigation du tableau de bord administrateur est repliée':'La navigation latérale d’administration est déployée');});document.querySelectorAll('.dashboard-shell-studio nav button').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('.dashboard-shell-studio nav button').forEach(item=>item.removeAttribute('aria-current'));button.setAttribute('aria-current','page');document.querySelector('#dashboardShellTitle').textContent=button.textContent;document.querySelector('#shellStatus').textContent='Module actuel :'+button.textContent;announce('Ouvert '+button.textContent);}));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"layouts-responsive-dashboard-shell","selector":"[data-core-bridge=\"layouts-responsive-dashboard-shell\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowCompareCore=document.querySelector('#workflowCore');const workflowCompareWeight=document.querySelector('#workflowCompareWeight');const workflowCompareState={channel:'A',weight:50,frozen:false,snapshots:[]};function workflowCompareFingerprint(){const controls=[...workflowCompareCore.querySelectorAll('input,select,textarea')];const outputs=[...workflowCompareCore.querySelectorAll('output,[role="status"],strong')].map(node=>node.textContent.trim()).filter(Boolean);return {controlValues:controls.map(control=>control.type==='checkbox'||control.type==='radio'?control.checked:control.value),summary:outputs.slice(0,4).join(' / '),nodes:workflowCompareCore.querySelectorAll('*').length};}function workflowCompareDrive(){workflowCompareCore.dataset.compareChannel=workflowCompareState.channel;workflowCompareCore.style.setProperty('--compare-split',workflowCompareState.weight+'%');document.querySelector('#workflowCompareWeightValue').textContent=workflowCompareState.weight+' px';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' px'+(workflowCompareState.frozen?' · figé':'');announce('Exposition du jardin en cours de consultation '+workflowCompareState.channel+' Version');}function workflowCompareCapture(source){const bridge=workflowBridgeActivate();const snapshot={...workflowCompareFingerprint(),channel:workflowCompareState.channel,weight:workflowCompareState.weight,source,bridge:bridge.summary};workflowCompareState.snapshots.push(snapshot);const item=document.createElement('li');item.innerHTML='<b>'+snapshot.channel+'</b><span>'+(snapshot.summary||snapshot.bridge)+'</span><small>'+snapshot.weight+' px · '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('échantillonné '+snapshot.channel+' Appliquer le style de la version · '+bridge.summary);}document.querySelectorAll('[name="workflowChannel"]').forEach(input=>input.addEventListener('change',()=>{workflowCompareState.channel=input.value;workflowCompareDrive();}));workflowCompareWeight.addEventListener('input',()=>{workflowCompareState.weight=Number(workflowCompareWeight.value);workflowCompareDrive();});document.querySelector('#workflowCompareFreeze').addEventListener('change',event=>{workflowCompareState.frozen=event.currentTarget.checked;workflowCompareDrive();});document.querySelector('#workflowCompareCapture').addEventListener('click',()=>workflowCompareCapture('Échantillonnage du bouton'));workflowCompareCore.addEventListener('dblclick',()=>workflowCompareCapture('Double-clic sur la vue principale'));workflowCompareDrive();
workflowBridgeReset();
const caseworkShell=document.querySelector('#galleryShellWorkbench');const caseworkScale=document.querySelector('#galleryShellWorkbenchScale');const caseworkScaleValue=document.querySelector('#galleryShellWorkbenchScaleValue');const caseworkLog=document.querySelector('#galleryShellWorkbenchLog');const caseworkModeButtons=[...caseworkShell.querySelectorAll('[data-casework-mode]')];const caseworkNotes=[...caseworkShell.querySelectorAll('[data-casework-note]')];const caseworkLabels=["Vue d’ensemble de l’exposition du jardin","Plan d’exposition du jardin","Inspiration pour une exposition de jardin","Journal d’exposition du jardin"];const caseworkCore=document.querySelector('#workflowCore');let caseworkCount=0;function caseworkActiveIndex(){return Math.max(0,caseworkNotes.findIndex(button=>button.getAttribute('aria-pressed')==='true'));}function caseworkRender(reason){const version=caseworkCore?.dataset.workflowVersion||'0';const scale=Number(caseworkScale.value);caseworkShell.style.setProperty('--casework-scale',String(scale));caseworkScaleValue.textContent=scale+'%';caseworkNotes.forEach((button,index)=>button.setAttribute('aria-pressed',String(index===caseworkActiveIndex())));announce(reason+' · Version de base '+version);}caseworkModeButtons.forEach(button=>button.addEventListener('click',()=>{caseworkModeButtons.forEach(item=>item.classList.toggle('primary',item===button));caseworkShell.dataset.caseworkMode=button.dataset.caseworkMode;caseworkRender('Basculé vers'+button.textContent);}));caseworkNotes.forEach((button,index)=>button.addEventListener('click',()=>{caseworkNotes.forEach(item=>item.setAttribute('aria-pressed','false'));button.setAttribute('aria-pressed','true');caseworkRender('Carte d’enregistrement basculée');announce('Carte de suivi :'+caseworkLabels[index]);}));caseworkScale.addEventListener('input',()=>caseworkRender('L’échelle d’observation a été mise à jour'));document.querySelector('#galleryShellWorkbenchCapture').addEventListener('click',()=>{const index=caseworkActiveIndex();const version=caseworkCore?.dataset.workflowVersion||'0';caseworkCount+=1;const item=document.createElement('li');item.textContent='Enregistrement '+caseworkCount+' · '+(caseworkLabels[index]||caseworkLabels[0]||'Exemple sans nom')+' · Version de base '+version;const empty=caseworkLog.querySelector('li')?.textContent==='En attente du premier enregistrement';if(empty)caseworkLog.replaceChildren(item);else caseworkLog.prepend(item);while(caseworkLog.children.length>6)caseworkLog.lastElementChild.remove();caseworkRender('Enregistrement ajouté '+caseworkCount);});caseworkCore?.addEventListener('focusin',()=>caseworkRender('L’élément principal a le focus'));caseworkCore?.addEventListener('click',()=>caseworkRender('Interaction de l’exemple principal'));caseworkRender('Prêt à créer l’enregistrement');
</script>
</body>
</html>