Grille éditoriale du carnet-journal du jardin
Achever une grille éditoriale de type magazine dans un scénario de carnet de jardin : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptative selon la taille.
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>Grille éditoriale du carnet-journal du jardin</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#af4f45; --secondary:#9eb49f; --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:ui-monospace,"SFMono-Regular",Consolas,monospace; background:linear-gradient(color-mix(in srgb,var(--secondary) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--secondary) 5%,transparent) 1px,transparent 1px),var(--paper);background-size:24px 24px; }
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(1080px,calc(100% - 30px));margin:auto;padding:48px 0}.eyebrow{color:var(--secondary);font:700 12px/1.3 ui-monospace,monospace}.eyebrow::before{content:"> ";color:var(--accent)}.mast{display:grid;grid-template-columns:1fr auto;border:1px solid var(--secondary);padding:18px;gap:24px;align-items:center;margin-bottom:16px}.mast h1{font-family:ui-monospace,"SFMono-Regular",monospace;font-weight:700;font-size:clamp(34px,7vw,72px);letter-spacing:-.055em;margin:12px 0;line-height:1.05}.intro{margin:0;color:color-mix(in srgb,var(--ink) 72%,transparent);font:400 14px/1.7 ui-monospace,monospace}.scenario{padding:7px 10px;border:1px dashed var(--secondary);font:700 11px/1 ui-monospace,monospace}.demo{border-color:var(--secondary);border-radius:8px;box-shadow:0 0 50px color-mix(in srgb,var(--secondary) 15%,transparent);position:relative;min-height:390px;padding:26px;background:color-mix(in srgb,var(--paper) 94%,#000)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:14px}}
.panel{padding:20px;border:1px dashed var(--secondary);border-radius:8px;background:color-mix(in srgb,var(--paper) 92%,#000)}.stack{display:grid;gap:10px}.row{display:flex;flex-wrap:wrap;gap:7px}.action{min-height:40px;padding:8px 12px;border:1px solid var(--secondary);border-radius:5px;color:var(--ink);background:transparent;font:700 12px/1 ui-monospace,monospace}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:22px;color:var(--secondary);font:700 12px/1.5 ui-monospace,monospace}.status::before{content:"status: "}.metric{font:800 clamp(28px,6vw,56px)/1 ui-monospace,monospace}.muted{opacity:.64;font-family:ui-monospace,monospace}.meter{height:8px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 10px)}.meter>i{display:block;height:100%;background:var(--secondary)}.chip{padding:4px 7px;border:1px solid var(--secondary);font:700 10px/1 ui-monospace,monospace}
.composition-gallery{margin:0;padding:clamp(8px,2vw,18px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 78%,transparent)}.gallery-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 4px 2px;font-size:12px}.gallery-caption::before,.gallery-caption::after{content:"";height:1px;background:var(--line)}.gallery-caption strong{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.composition-gallery .demo{box-shadow:none}.composition-gallery .demo::before{content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--accent) 36%,transparent);pointer-events:none}
.editorial-studio{display:grid;grid-template:"head head head" auto "figure lead aside" auto "figure columns aside" 1fr "figure action aside" auto/minmax(220px,.72fr) minmax(0,1.08fr) 220px;gap:22px}.editorial-studio>header{grid-area:head;border-bottom:4px solid var(--ink)}.editorial-studio>header h2{margin:.15em 0;font-size:clamp(42px,9vw,92px);line-height:.88}.editorial-studio figure{grid-area:figure;margin:0}.editorial-studio figure div{min-height:390px;background:linear-gradient(145deg,var(--accent),var(--secondary),var(--ink));clip-path:polygon(0 0,100% 8%,91% 100%,6% 92%)}.editorial-studio figcaption{padding:8px;font-style:italic}.editorial-studio .lead{grid-area:lead;font-size:19px;line-height:1.8}.editorial-studio .columns{grid-area:columns;columns:2 220px;column-gap:28px}.editorial-studio .columns p{break-inside:avoid;line-height:1.75}.editorial-studio aside{grid-area:aside;display:grid;align-content:start;gap:10px;padding:18px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.editorial-studio aside ul{display:grid;gap:8px;padding-left:18px;margin:0}.editorial-studio>button{grid-area:action;justify-self:start}.editorial-studio.is-single .columns{columns:1}.editorial-studio.is-single aside{border-left-color:var(--ink)}@media(max-width:920px){.editorial-studio{grid-template:"head" auto "figure" auto "lead" auto "columns" auto "aside" auto "action" auto/1fr}.editorial-studio figure div{min-height:270px}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}.notebook-editorial-desk{--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)}.notebook-editorial-desk__head{display:flex;justify-content:space-between;gap:18px;align-items:end}.notebook-editorial-desk__head h2{margin:.18em 0}.notebook-editorial-desk__modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.notebook-editorial-desk__grid{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(230px,.54fr);gap:16px}.notebook-editorial-desk__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)}.notebook-editorial-desk__viewport>*{display:block;width:calc(10000%/var(--casework-scale));max-width:none;transform:scale(calc(var(--casework-scale)/100));transform-origin:top left}.notebook-editorial-desk__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))}.notebook-editorial-desk__rail label{display:grid;gap:8px}.notebook-editorial-desk__rail input{width:100%}.notebook-editorial-desk__notes{display:grid;gap:10px}.notebook-editorial-desk__notes button{display:grid;gap:6px;padding:14px;border:1px solid #ffffff24;border-radius:16px;color:inherit;background:#ffffff10;text-align:left}.notebook-editorial-desk__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)}.notebook-editorial-desk__notes small{line-height:1.45;opacity:.78}.notebook-editorial-desk__log{display:grid;gap:8px;margin:0;padding-left:18px}.notebook-editorial-desk[data-casework-mode="inspect"] .notebook-editorial-desk__viewport{outline:4px solid color-mix(in srgb,var(--accent) 26%,transparent);outline-offset:2px}.notebook-editorial-desk[data-casework-mode="handoff"] .notebook-editorial-desk__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){.notebook-editorial-desk__grid{grid-template-columns:1fr}}@media(max-width:560px){.notebook-editorial-desk__head{align-items:stretch;flex-direction:column}.notebook-editorial-desk__modes{justify-content:start}.notebook-editorial-desk__viewport>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="terminal" data-composition="gallery-frame">
<main class="page">
<header class="mast"><div><span class="eyebrow">terminal / grille éditoriale de magazine / BEGINNER</span><h1>Grille éditoriale du carnet-journal du jardin</h1><p class="intro">Achever une grille éditoriale de type magazine dans un scénario de carnet de jardin : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptative selon la taille.</p></div><span class="scenario">Carnet de jardin</span></header>
<figure class="composition-gallery"><section class="demo" aria-label="Zone interactive de la grille éditoriale du carnet de jardin"><section id="notebookEditorialDesk" class="notebook-editorial-desk" data-casework-mode="queue"><header class="notebook-editorial-desk__head"><div><span class="eyebrow">Carnet de jardin / NOTEBOOK EDITORIAL DESK</span><h2>table d’assemblage de la grille éditoriale de magazine</h2><p>Place la grille éditoriale sur la table de mise en page, en la découpant avec des cartes de notes distinctes, des variations d’échelle et un mode de passation, pour le gabarit de la version du centre de soins.</p></div><div class="notebook-editorial-desk__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="notebook-editorial-desk__grid"><div class="notebook-editorial-desk__viewport"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Carnet de jardin SESSION</span><h2>Comptoir de chronométrage du carnet de jardin</h2></div><output id="workflowSessionClock">00:45</output><label>Durée du tour<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>s</span></label><button id="workflowSessionToggle" class="action primary" type="button">Commencer à appliquer la mise en page</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="progression du carnet de jardin" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:layouts-responsive-editorial-grid --><article class="editorial-studio"><header><span class="eyebrow">EDITORIAL GRID</span><h2>Tableau de travail spécial Carnet de jardin</h2><p>Placez la couverture, l’introduction, le corps du texte en colonnes et les notes éditoriales à droite dans un seul panneau de lecture que l’on peut basculer.</p></header><figure><div aria-label="Image de couverture abstraite"></div><figcaption>Collaboration du carnet de jardin</figcaption></figure><section class="lead"><h3>progression du carnet de jardin</h3><p>L’introduction explique pourquoi le sujet actuel tient la route et oriente l’attention vers le paragraphe de la colonne de droite.</p></section><section class="columns"><p><b>Rappel du carnet de jardin</b> Répartir le contenu sur un rythme de lecture plus long tout en conservant le repli sur une seule colonne.</p><p><b>Collection de carnet de jardin</b> Répartir le contenu sur un rythme de lecture plus long tout en conservant le repli sur une seule colonne.</p><p><b>Aperçu du carnet de jardin</b> Répartir le contenu sur un rythme de lecture plus long tout en conservant le repli sur une seule colonne.</p><p><b>Plan du carnet de jardin</b> Répartir le contenu sur un rythme de lecture plus long tout en conservant le repli sur une seule colonne.</p><p><b>Inspiration pour le carnet de jardin</b> Répartir le contenu sur un rythme de lecture plus long tout en conservant le repli sur une seule colonne.</p></section><aside><strong id="editorialModeLabel">Actuel : double colonne de magazine</strong><ul><li>L’espace réservé de couverture s’étend sur plusieurs colonnes</li><li>Le chapeau l’emporte sur le corps du texte</li><li>Notes d’annotation à droite pour la stratégie de lecture</li></ul></aside><button id="editorialColumns" class="action" type="button" aria-pressed="false" data-core-bridge="layouts-responsive-editorial-grid">Passer à la lecture en une colonne</button></article><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 points de contrôle interactifs</strong><ol id="workflowSessionLaps" aria-label="Journal de ronde"></ol></footer></div></div><aside class="notebook-editorial-desk__rail"><label>Multiplicateur de suivi<input id="notebookEditorialDeskScale" type="range" min="84" max="132" value="100"><output id="notebookEditorialDeskScaleValue">100%</output></label><div class="notebook-editorial-desk__notes"><button type="button" data-casework-note="0" aria-pressed="true"><strong>Collaboration du carnet de jardin</strong><small>Vérifier les changements d’état</small></button><button type="button" data-casework-note="1" aria-pressed="false"><strong>progression du carnet de jardin</strong><small>Confirmer l’entrée clavier</small></button><button type="button" data-casework-note="2" aria-pressed="false"><strong>Rappel du carnet de jardin</strong><small>Observer le repli pour les petits écrans</small></button><button type="button" data-casework-note="3" aria-pressed="false"><strong>Collection de carnet de jardin</strong><small>Écrire le verdict actuel</small></button></div><button id="notebookEditorialDeskCapture" class="action primary" type="button">Écrire le journal de mise en page</button><ol id="notebookEditorialDeskLog" class="notebook-editorial-desk__log"><li>En attente du premier enregistrement</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Carnet de jardin / GALLERY 03</strong></figcaption></figure>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:layouts-responsive-editorial-grid */
document.querySelector('#editorialColumns').addEventListener('click',event=>{const studio=document.querySelector('.editorial-studio');const single=studio.classList.toggle('is-single');event.currentTarget.setAttribute('aria-pressed',String(single));document.querySelector('#editorialModeLabel').textContent=single?'Actuel : lecture en une seule colonne':'Actuel : double colonne de magazine';announce(single?'Passage en mode lecture sur une seule colonne activé':'Reprise de la mise en page en colonnes d’un magazine');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"layouts-responsive-editorial-grid","selector":"[data-core-bridge=\"layouts-responsive-editorial-grid\"]","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 workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' points de contrôle d’interaction';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Recommencer':'Tour suivant';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Tour de carnet de jardin terminé':'La ronde est suspendue');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Tour de pause';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('Le cycle du carnet de jardin a commencé · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('Opérations au clavier');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Opération principale · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
const caseworkShell=document.querySelector('#notebookEditorialDesk');const caseworkScale=document.querySelector('#notebookEditorialDeskScale');const caseworkScaleValue=document.querySelector('#notebookEditorialDeskScaleValue');const caseworkLog=document.querySelector('#notebookEditorialDeskLog');const caseworkModeButtons=[...caseworkShell.querySelectorAll('[data-casework-mode]')];const caseworkNotes=[...caseworkShell.querySelectorAll('[data-casework-note]')];const caseworkLabels=["Collaboration du carnet de jardin","progression du carnet de jardin","Rappel du carnet de jardin","Collection de carnet de 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('#notebookEditorialDeskCapture').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>