retour sur la robustesse du mot de passe pour la demande de repas
Dans le contexte d’une demande de repas, réalisez un retour sur la robustesse du mot de passe : avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à toutes les 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>retour sur la robustesse du mot de passe pour la demande de repas</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#8b6fb0; --secondary:#d7a971; --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:"Trebuchet MS","PingFang SC",sans-serif; background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 35%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 38%),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(1160px,calc(100% - 30px));margin:auto;padding:60px 0}.mast{display:flex;justify-content:space-between;border-left:4px solid var(--accent);padding-left:22px;gap:28px;align-items:center;margin-bottom:34px}.mast h1{font-family:"Trebuchet MS","PingFang SC",sans-serif;font-weight:900;font-size:clamp(42px,9vw,94px);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);margin:0;line-height:.92}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:900 11px/1 ui-monospace,monospace;letter-spacing:.2em}.intro{max-width:680px;color:color-mix(in srgb,var(--ink) 68%,transparent);line-height:1.7}.scenario{padding:10px 16px;border:1px solid var(--secondary);border-radius:4px;box-shadow:0 0 20px color-mix(in srgb,var(--secondary) 30%,transparent)}.demo{border-color:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:24px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 60px color-mix(in srgb,var(--secondary) 12%,transparent);position:relative;min-height:410px;overflow:hidden;padding:clamp(24px,4vw,50px);background:color-mix(in srgb,var(--paper) 86%,transparent)}@media(max-width:700px){.mast{display:grid}.page{padding:22px 0}.demo{padding:16px}}
.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-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.password-lab{display:grid;gap:16px;max-width:650px;margin:auto}.password-lab h2{margin:.2em 0}.password-lab label{display:grid;gap:8px;font-weight:800}.password-wrap{display:grid;grid-template-columns:1fr auto}.password-wrap input,.password-wrap button{min-height:46px;padding:10px;border:1px solid var(--line);background:var(--paper)}.password-wrap input{border-radius:10px 0 0 10px}.password-wrap button{border-radius:0 10px 10px 0}.password-lab ul{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0;list-style:none}.password-lab li::before{content:"○ ";color:var(--line)}.password-lab li.is-met::before{content:"● ";color:var(--accent)}#passwordStrength i{width:0;transition:width .2s ease}@media(max-width:540px){.password-lab ul{grid-template-columns:1fr}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}.strength-prep-shell{--strength-density:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,color-mix(in srgb,var(--secondary) 14%,transparent),color-mix(in srgb,var(--paper) 96%,transparent));box-shadow:var(--shadow)}.strength-prep-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.strength-prep-head h2{margin:.2em 0}.strength-prep-actions{display:grid;gap:10px;justify-items:end}.strength-prep-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.strength-prep-actions output{padding:10px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-weight:900}.strength-prep-layout{display:grid;grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr);gap:16px}.strength-prep-panel{display:grid;align-content:start;gap:14px;padding:18px;border-radius:22px;background:color-mix(in srgb,var(--ink) 92%,#10201a);color:var(--paper)}.strength-prep-panel label{display:grid;gap:8px}.strength-prep-panel input{width:100%}.strength-prep-notes{display:grid;gap:10px}.strength-prep-notes button{display:grid;gap:6px;padding:14px;border:1px solid #ffffff2b;border-radius:16px;color:inherit;background:#ffffff10;text-align:left}.strength-prep-notes button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff18;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 34%,transparent)}.strength-prep-notes small{line-height:1.5;opacity:.78}.strength-prep-log{display:grid;gap:8px;margin:0;padding-left:18px}.strength-prep-stage{display:grid;gap:14px;min-width:0}.strength-prep-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.strength-prep-summary article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.strength-prep-summary span{font:700 11px/1.2 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.strength-prep-core{min-width:0;padding:clamp(14px,3vw,24px);overflow:auto;border:1px dashed var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.strength-prep-core>*{display:block;width:calc(10000%/var(--strength-density));max-width:none;transform:scale(calc(var(--strength-density)/100));transform-origin:top left}.strength-prep-shell[data-prep-view="ingredients"] .strength-prep-core{border-style:solid;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--secondary) 28%,transparent)}.strength-prep-shell[data-prep-view="handoff"] .strength-prep-panel{background:color-mix(in srgb,var(--ink) 78%,#28120f)}@media(max-width:920px){.strength-prep-layout{grid-template-columns:1fr}.strength-prep-summary{grid-template-columns:1fr}}@media(max-width:560px){.strength-prep-head{align-items:stretch;flex-direction:column}.strength-prep-actions{justify-items:start}.strength-prep-tabs{justify-content:start}.strength-prep-core>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="dark-neon" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">dark-neon / Retour sur la force du mot de passe / INTERMEDIATE</span><h1>retour sur la robustesse du mot de passe pour la demande de repas</h1><p class="intro">Dans le contexte d’une demande de repas, réalisez un retour sur la robustesse du mot de passe : avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à toutes les tailles.</p></div><span class="scenario">Demande de repas</span></header>
<div class="composition-index"><section class="demo" aria-label="Zone interactive de retour sur la résistance du mot de passe pour la demande de repas"><section id="strengthPrepShell" class="strength-prep-shell" data-prep-view="score"><header class="strength-prep-head"><div><span class="eyebrow">Demande de repas / STRENGTH PREP</span><h2>Retour sur la robustesse du mot de passe pour le poste de contrôle des repas</h2><p>Place l’exemple de robustesse du mot de passe sur le poste de préparation des repas, en le distinguant par une liste en colonnes, une vue de cuisson et une zone d’enregistrement des échantillons pour le cycle d’observation en cours.</p></div><div class="strength-prep-actions"><div class="strength-prep-tabs"><button class="action primary" type="button" data-prep-view="score">intensité</button><button class="action" type="button" data-prep-view="ingredients">Ingrédients</button><button class="action" type="button" data-prep-view="handoff">Transfert</button></div><output id="strengthPrepState">En attente du premier échantillon</output></div></header><div class="strength-prep-layout"><aside class="strength-prep-panel"><label>Densité d’échantillonnage<input id="strengthPrepDensity" type="range" min="86" max="126" value="100"><output id="strengthPrepDensityValue">100%</output></label><div class="strength-prep-notes"><button type="button" data-prep-note="0" aria-pressed="true"><strong>Rappel de demande de repas</strong><small>Vérifier si les changements d’état sont visibles</small></button><button type="button" data-prep-note="1" aria-pressed="false"><strong>Favoris de demande de repas</strong><small>Confirmer la cohérence entre l’entrée au clavier et le clic</small></button><button type="button" data-prep-note="2" aria-pressed="false"><strong>Aperçu de la demande de repas</strong><small>Vérifiez si la disposition se replie sur les écrans étroits</small></button><button type="button" data-prep-note="3" aria-pressed="false"><strong>Plan de demande de repas</strong><small>Enregistrer la conclusion de la révision en cours</small></button></div><button id="strengthPrepCapture" class="action primary" type="button">Saisie d’un échantillon</button><ol id="strengthPrepLog" class="strength-prep-log"><li>En attente du premier enregistrement d’échantillon</li></ol></aside><section class="strength-prep-stage"><div class="strength-prep-summary"><article><span>Poste de travail actuel</span><strong id="strengthPrepLane">intensité</strong></article><article><span>Prélevé et enregistré</span><strong id="strengthPrepCount">0</strong></article><article><span>Point de contrôle actuel</span><strong id="strengthPrepCheckpoint">Rappel de demande de repas</strong></article></div><div id="strengthPrepCore" class="strength-prep-core"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Demande de repas DISPATCH</span><h2>Tableau de bord pour commandes de repas</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Informations de base de la demande de repas</option><option>Informations complémentaires pour la demande de repas</option><option>Confirmation finale de la demande de repas</option></select></label><label>Délai de traitement<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="27"><span>heure</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Confirmer l’envoi</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Informations de base de la demande de repas</option><option value="2">Informations complémentaires pour la demande de repas</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:forms-input-password-strength --><form id="passwordForm" class="password-lab panel"><span class="eyebrow">PASSWORD STRENGTH</span><h2>Mot de passe sécurisé pour la demande de repas</h2><label>Nouveau mot de passe <span class="password-wrap"><input id="passwordInput" type="password" minlength="8" autocomplete="new-password" aria-describedby="passwordRules" required><button id="togglePassword" type="button" aria-pressed="false" data-core-bridge="forms-input-password-strength">Afficher</button></span></label><div id="passwordStrength" class="meter" role="progressbar" aria-label="Force du mot de passe" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0"><i></i></div><ul id="passwordRules"><li data-rule="length">au moins 8 caractères</li><li data-rule="case">Comprend à la fois des majuscules et des minuscules</li><li data-rule="number">Au moins un chiffre</li><li data-rule="symbol">Au moins un symbole</li></ul><button class="action primary" type="submit">Vérifier le mot de passe</button></form><!-- 11DZ_CORE_END --></section></div></div></section></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Demande de repas FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:forms-input-password-strength */
const passwordInput=document.querySelector('#passwordInput');const passwordMeter=document.querySelector('#passwordStrength');const passwordRules={length:value=>value.length>=8,case:value=>/[a-z]/.test(value)&&/[A-Z]/.test(value),number:value=>/\d/.test(value),symbol:value=>/[^a-z0-9]/i.test(value)};function scorePassword(){const value=passwordInput.value;let score=0;Object.entries(passwordRules).forEach(([name,test])=>{const met=test(value);document.querySelector('[data-rule="'+name+'"]').classList.toggle('is-met',met);if(met)score+=1;});passwordMeter.setAttribute('aria-valuenow',String(score));passwordMeter.querySelector('i').style.width=(score/4*100)+'%';announce('Force du mot de passe '+score+' / 4');return score;}passwordInput.addEventListener('input',scorePassword);document.querySelector('#togglePassword').addEventListener('click',event=>{const visible=passwordInput.type==='text';passwordInput.type=visible?'password':'text';event.currentTarget.setAttribute('aria-pressed',String(!visible));event.currentTarget.textContent=visible?'Afficher':'Masquer';});document.querySelector('#passwordForm').addEventListener('submit',event=>{event.preventDefault();announce(scorePassword()===4?'Le mot de passe a passé la vérification locale de robustesse':'Veuillez satisfaire à toutes les règles de mot de passe');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"forms-input-password-strength","selector":"[data-core-bridge=\"forms-input-password-strength\"]","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 workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Informations de base de la demande de repas","amount":12,"priority":"normal","touches":0}],["2",{"label":"Informations complémentaires pour la demande de repas","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' heure · '+bridge.summary;announce('Tâche actuelle de la demande de repas :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' heure · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
const strengthPrepShell=document.querySelector('#strengthPrepShell');const strengthPrepState=document.querySelector('#strengthPrepState');const strengthPrepDensity=document.querySelector('#strengthPrepDensity');const strengthPrepDensityValue=document.querySelector('#strengthPrepDensityValue');const strengthPrepLane=document.querySelector('#strengthPrepLane');const strengthPrepCount=document.querySelector('#strengthPrepCount');const strengthPrepCheckpoint=document.querySelector('#strengthPrepCheckpoint');const strengthPrepNotes=[...document.querySelectorAll('[data-prep-note]')];const strengthPrepLog=document.querySelector('#strengthPrepLog');const strengthPrepViews=[...document.querySelectorAll('[data-prep-view]')];const strengthPrepSteps=["Rappel de demande de repas","Favoris de demande de repas","Aperçu de la demande de repas","Plan de demande de repas"];const strengthPrepCore=document.querySelector('#workflowCore');let strengthPrepCaptures=0;function strengthPrepSetActive(index){strengthPrepNotes.forEach((button,buttonIndex)=>button.setAttribute('aria-pressed',String(buttonIndex===index)));strengthPrepCheckpoint.textContent=strengthPrepSteps[index]||strengthPrepSteps[0]||'Point de contrôle sans nom';}function strengthPrepRender(reason){const active=Math.max(0,strengthPrepNotes.findIndex(button=>button.getAttribute('aria-pressed')==='true'));const density=Number(strengthPrepDensity.value);const version=strengthPrepCore?.dataset.workflowVersion||'0';strengthPrepShell.style.setProperty('--strength-density',String(density));strengthPrepDensityValue.textContent=density+'%';strengthPrepCount.textContent=String(strengthPrepCaptures);strengthPrepLane.textContent={score:'intensité',ingredients:'Ingrédients',handoff:'Transfert'}[strengthPrepShell.dataset.prepView]||'intensité';strengthPrepSetActive(active < 0 ? 0 : active);strengthPrepState.textContent=reason+' · Version de base '+version;}strengthPrepViews.forEach(button=>button.addEventListener('click',()=>{strengthPrepViews.forEach(item=>item.classList.toggle('primary',item===button));strengthPrepShell.dataset.prepView=button.dataset.prepView;strengthPrepRender('Basculé vers'+button.textContent);announce('Vue de préparation des repas :'+button.textContent);}));strengthPrepNotes.forEach((button,index)=>button.addEventListener('click',()=>{strengthPrepSetActive(index);strengthPrepRender('Point de contrôle changé');announce('Point de contrôle :'+strengthPrepSteps[index]);}));strengthPrepDensity.addEventListener('input',()=>{strengthPrepRender('La densité d’échantillonnage a été mise à jour');announce('Densité d’échantillonnage '+strengthPrepDensity.value+'%');});document.querySelector('#strengthPrepCapture').addEventListener('click',()=>{const active=Math.max(0,strengthPrepNotes.findIndex(button=>button.getAttribute('aria-pressed')==='true'));const note=strengthPrepSteps[active]||strengthPrepSteps[0]||'Point de contrôle sans nom';const version=strengthPrepCore?.dataset.workflowVersion||'0';strengthPrepCaptures+=1;const item=document.createElement('li');item.textContent='Échantillon '+strengthPrepCaptures+' · '+note+' · Version de base '+version;const empty=strengthPrepLog.querySelector('li')?.textContent==='En attente du premier enregistrement d’échantillon';if(empty)strengthPrepLog.replaceChildren(item);else strengthPrepLog.prepend(item);while(strengthPrepLog.children.length>6)strengthPrepLog.lastElementChild.remove();strengthPrepRender('Échantillon enregistré '+strengthPrepCaptures);announce('Échantillon enregistré '+strengthPrepCaptures+' · '+note);});strengthPrepCore?.addEventListener('focusin',()=>strengthPrepRender('L’élément principal a le focus'));strengthPrepCore?.addEventListener('click',()=>strengthPrepRender('Interaction de l’exemple principal'));strengthPrepRender('En attente du premier échantillon');
</script>
</body>
</html>