Composition en grille de poème pour étiquette d’exposition archivistique
Dans un contexte d’étiquettes d’archives, composez une mise en page en grille pour un poème : elle doit inclure du contenu réel, des contrôles interactifs, un retour d’état clair et une disposition adaptée aux différentes tailles d’écran.
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>Composition en grille de poème pour étiquette d’exposition archivistique</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#ff6b5e; --secondary:#71c9b5; --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:26px;border:1px solid var(--line);border-radius:2px;background:var(--paper)}.stack{display:grid;gap:28px}.row{display:flex;gap:20px;flex-wrap:wrap}.action{padding:9px 2px;border:0;border-bottom:2px solid var(--line);background:transparent}.action.primary,.action.is-active{border-color:var(--accent);color:var(--accent)}.muted{font-size:14px;line-height:1.9}.status{min-height:20px;margin-top:28px;font-size:13px}.metric{font-size:clamp(40px,9vw,88px);font-weight:500;letter-spacing:-.06em}.meter{height:2px;background:var(--line)}.meter>i{display:block;height:100%;background:var(--accent)}.chip{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.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}}
.poem-grid-lab{display:grid;gap:18px;min-width:0}.poem-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(190px,.6fr);gap:18px;align-items:end}.poem-controls>*{min-width:0}.poem-controls h2{margin:.3em 0 0}.poem-controls label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;font-weight:800}.poem-controls input{grid-column:1/-1;min-width:0}.poem-figure{--poem-gap:24px;display:grid;min-width:0;min-height:410px;padding:clamp(28px,7vw,80px);border:1px solid var(--line);background:var(--paper)}.poem-figure figcaption{color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.18em}.poem-figure blockquote{display:grid;align-self:center;gap:var(--poem-gap);min-width:0;margin:0}.poem-figure p{margin:0;font-family:ui-serif,Georgia,serif;font-size:clamp(22px,4vw,44px);line-height:1.25}.poem-figure.is-stair p:nth-child(2){margin-left:10%}.poem-figure.is-stair p:nth-child(3){margin-left:20%}.poem-figure.is-stair p:nth-child(4){margin-left:30%}.poem-figure.is-columns blockquote{grid-template-columns:repeat(2,minmax(0,1fr))}.poem-figure.is-center blockquote{text-align:center}@media(max-width:900px){.poem-controls{grid-template-columns:1fr}.poem-figure.is-columns blockquote{grid-template-columns:1fr}.poem-figure.is-stair p:nth-child(n){margin-left:0}}.workflow-guide{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-areas:"rail core" "rail evidence";gap:14px 18px}.guide-rail{grid-area:rail;display:grid;align-content:start;gap:15px;padding:18px;border-right:1px solid var(--line)}.guide-rail ol{display:grid;gap:8px;padding:0;margin:0;list-style:none}.guide-rail li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px;opacity:.5}.guide-rail li[aria-current="step"]{opacity:1;color:var(--paper);background:var(--ink)}.guide-rail li.is-complete{opacity:1;color:var(--accent)}.guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guide-actions .action{padding-inline:8px}#workflowGuideProgress{height:6px;background:var(--line)}#workflowGuideProgress i{display:block;width:0;height:100%;background:var(--accent)}.guide-core{grid-area:core;min-width:0;padding:16px;border:1px solid var(--line)}.guide-core>p{margin:0 0 14px;padding:10px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.guide-core[data-guide-step="1"]{border-radius:28px}.guide-core[data-guide-step="2"]{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}.guide-evidence{grid-area:evidence;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}.guide-evidence details,.guide-evidence form{padding:12px;border:1px solid var(--line)}.guide-evidence label{display:grid;gap:7px}.guide-evidence textarea{width:100%;padding:9px;border:1px solid var(--line);background:var(--paper)}@media(max-width:900px){.workflow-guide{grid-template-columns:1fr;grid-template-areas:"core" "rail" "evidence"}.guide-rail{border-right:0;border-bottom:1px solid var(--line)}.guide-rail ol{grid-template-columns:repeat(3,1fr)}.guide-evidence{grid-template-columns:1fr}}
</style>
</head>
<body data-aesthetic="terminal" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">terminal / composition typographique de grille poétique / BEGINNER</span><h1>Composition en grille de poème pour étiquette d’exposition archivistique</h1><p class="intro">Dans un contexte d’étiquettes d’archives, composez une mise en page en grille pour un poème : elle doit inclure du contenu réel, des contrôles interactifs, un retour d’état clair et une disposition adaptée aux différentes tailles d’écran.</p></div><span class="scenario">Cartel d’archives</span></header>
<div class="composition-index"><section class="demo" aria-label="Zone interactive de mise en page en grille de poésie pour étiquettes d’archives"><div class="workflow-guide"><nav class="guide-rail" aria-label="Guide de légende d’archive"><span class="eyebrow">Étiquette d’exposition d’archives GUIDE</span><ol><li data-workflow-guide-step="0" aria-current="step"><b>1</b><span>Ajustement de la mise en page des étiquettes d’exposition d’archives</span></li><li data-workflow-guide-step="1"><b>2</b><span>Mise en valeur des points clés de l’étiquette d’archive</span></li><li data-workflow-guide-step="2"><b>3</b><span>Lecture de la légende d’archive terminée</span></li></ol><div class="guide-actions"><button id="workflowGuideBack" class="action" type="button" disabled>Étape précédente</button><button id="workflowGuideNext" class="action primary" type="button">Terminer cette étape</button></div><div id="workflowGuideProgress" role="progressbar" aria-label="Avancement de l’étiquette d’exposition d’archives" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div></nav><section id="workflowCore" class="workflow-core guide-core" data-guide-step="0" aria-describedby="workflowGuideInstruction"><p id="workflowGuideInstruction">Veuillez effectuer dans le cas principal les opérations liées à l’ajustement de la mise en page des étiquettes d’exposition d’archives.</p><!-- 11DZ_CORE_START:typography-text-poem-grid --><div class="poem-grid-lab"><header class="poem-controls panel"><div><span class="eyebrow">POEM GRID</span><h2>Mise en page poétique en grille</h2></div><div class="row" role="group" aria-label="Mise en page des vers"><button class="action poem-layout is-active" type="button" data-poem-layout="stair" aria-pressed="true">Escalier</button><button class="action poem-layout" type="button" data-poem-layout="columns" aria-pressed="false">Deux colonnes</button><button class="action poem-layout" type="button" data-poem-layout="center" aria-pressed="false">Centré</button></div><label>Espacement des vers <input id="poemGap" type="range" min="8" max="48" value="24" data-core-bridge="typography-text-poem-grid"><output id="poemGapValue">24px</output></label></header><figure id="poemFigure" class="poem-figure is-stair"><figcaption>Cartouche d’archive · Quatrain</figcaption><blockquote><p>La lumière tombe sur la route sans nom</p><p>Le vent plie le lointain dans la page</p><p>Nous suivons le long blanc silencieux</p><p>Voir aujourd’hui briller lentement</p></blockquote></figure></div><!-- 11DZ_CORE_END --></section><aside class="guide-evidence"><details id="workflowGuideDetails"><summary>Voir les exigences d’acceptation</summary><ul><li>La mise en page de l’étiquette d’exposition des archives nécessite un changement d’état visible</li><li>La signalétique d’archive met l’accent sur la nécessité d’un changement d’état visible en une seule fois</li><li>La lecture de la fiche d’exposition des archives nécessite un changement d’état visible une seule fois</li></ul></details><form id="workflowGuideEvidenceForm"><label>Preuve de cette étape<textarea id="workflowGuideEvidence" rows="3" placeholder="Enregistrer l’état observé"></textarea></label><input class="action" type="submit" value="Enregistrer la preuve"></form><output id="workflowGuideSummary">0 / 3 étapes terminées</output></aside></div><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Légende d’archives FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:typography-text-poem-grid */
const poemFigure=document.querySelector('#poemFigure');const poemGap=document.querySelector('#poemGap');document.querySelectorAll('.poem-layout').forEach(button=>button.addEventListener('click',()=>{poemFigure.className='poem-figure is-'+button.dataset.poemLayout;document.querySelectorAll('.poem-layout').forEach(item=>{const selected=item===button;item.classList.toggle('is-active',selected);item.setAttribute('aria-pressed',String(selected));});announce('La poésie a été basculée vers'+button.textContent+'mise en page');}));poemGap.addEventListener('input',()=>{poemFigure.style.setProperty('--poem-gap',poemGap.value+'px');document.querySelector('#poemGapValue').textContent=poemGap.value+'px';announce('Espacement des vers '+poemGap.value+' pixel');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"typography-text-poem-grid","selector":"[data-core-bridge=\"typography-text-poem-grid\"]","mode":"range","key":"ArrowRight"};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("input",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',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();const step=Number(workflowBridgeControl.step)||1;const min=workflowBridgeControl.min===''?-Infinity:Number(workflowBridgeControl.min);const max=workflowBridgeControl.max===''?Infinity:Number(workflowBridgeControl.max);let next=Math.min(max,Math.max(min,(Number(workflowBridgeControl.value)||0)+step));if(next===Number(workflowBridgeControl.value))next=Math.max(min,Number(workflowBridgeControl.value)-step);workflowBridgeControl.value=String(next);workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowGuideCore=document.querySelector('#workflowCore');const workflowGuideStages=["Ajustement de la mise en page des étiquettes d’exposition d’archives","Mise en valeur des points clés de l’étiquette d’archive","Lecture de la légende d’archive terminée"];const workflowGuideState={step:0,completed:new Set(),evidence:new Map(),consumedVersion:0};function workflowGuideDrive(){const step=workflowGuideState.step;workflowGuideCore.dataset.guideStep=String(step);document.querySelector('#workflowGuideInstruction').textContent='Veuillez terminer «'+workflowGuideStages[step]+'Opérations associées à « ».';document.querySelectorAll('[data-workflow-guide-step]').forEach((item,index)=>{item.classList.toggle('is-complete',workflowGuideState.completed.has(index));if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');});document.querySelector('#workflowGuideBack').disabled=step===0;document.querySelector('#workflowGuideNext').textContent=step===workflowGuideStages.length-1?'Mise en page de l’application':'Terminer cette étape';const percent=Math.round(workflowGuideState.completed.size/workflowGuideStages.length*100);const progress=document.querySelector('#workflowGuideProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';document.querySelector('#workflowGuideSummary').textContent=workflowGuideState.completed.size+' / '+workflowGuideStages.length+' Étapes complétées · '+workflowBridgeSummary();announce('Étape actuelle de l’étiquette d’archive :'+workflowGuideStages[step]);}function workflowGuideAdvance(direction){if(direction>0){const bridge=workflowBridgeActivate();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Veuillez d’abord effectuer la modification d’état visible du cas principal');return;}workflowGuideState.consumedVersion=version;workflowGuideState.completed.add(workflowGuideState.step);announce('Variation du cas principal enregistrée · '+bridge.summary);}workflowGuideState.step=Math.max(0,Math.min(workflowGuideStages.length-1,workflowGuideState.step+direction));workflowGuideDrive();}document.querySelector('#workflowGuideBack').addEventListener('click',()=>workflowGuideAdvance(-1));document.querySelector('#workflowGuideNext').addEventListener('click',()=>workflowGuideAdvance(1));document.querySelector('#workflowGuideEvidenceForm').addEventListener('submit',event=>{event.preventDefault();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('La preuve n’a pas été enregistrée : le cas principal n’a encore subi aucun changement nouveau');return;}const text=document.querySelector('#workflowGuideEvidence').value.trim();workflowGuideState.evidence.set(workflowGuideState.step,text||'Vérification de l’état visible terminée');workflowGuideState.completed.add(workflowGuideState.step);workflowGuideState.consumedVersion=version;workflowGuideDrive();announce('Les preuves de cette étape ont été enregistrées · '+workflowBridgeSummary());});document.querySelector('#workflowGuideDetails').addEventListener('toggle',event=>announce(event.currentTarget.open?'Exigences d’acceptation développées':'Exigences d’acceptation repliées'));workflowGuideDrive();
workflowBridgeReset();
</script>
</body>
</html>