Page de comparaison de produits de la semaine d’inscription du studio
Réalisez une page de comparaison de produits dans le scénario de la semaine d’inscription au studio : elle comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée aux 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>Page de comparaison de produits de la semaine d’inscription du studio</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#c66a2d; --secondary:#b5c88d; --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:18px;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px}.action{min-height:42px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.status{min-height:24px;padding:8px;color:var(--paper);background:var(--ink);font-weight:900}.metric{font-size:clamp(34px,8vw,76px);font-weight:900;letter-spacing:-.08em}.muted{font-weight:600}.chip{padding:5px 8px;border:2px solid var(--ink);font-weight:900}.meter{height:14px;border:3px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
.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}}
.marketing-compare{display:grid;gap:18px}.marketing-compare>header{display:grid;grid-template-columns:1fr auto minmax(180px,.35fr);gap:22px;align-items:end;padding:24px;border:1px solid var(--line);background:var(--paper)}.marketing-compare h2{margin:.2em 0}.marketing-compare header fieldset{display:grid;gap:7px;border:0}.marketing-compare header>label{display:grid;grid-template-columns:1fr auto;gap:8px}.marketing-compare header input[type="range"]{grid-column:1/-1}.marketing-compare-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.marketing-compare-cards article{display:grid;align-content:start;gap:13px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}.marketing-compare-cards article.is-recommended{transform:translateY(-8px);border:3px solid var(--accent)}.plan-rank{font:900 28px/1 ui-monospace,monospace;color:var(--accent)}.marketing-compare-cards h3{margin:0;font-size:28px}.marketing-compare-cards strong{font-size:36px}.marketing-compare-cards strong small{font-size:12px}.plan-fit{height:7px;overflow:hidden;background:var(--line)}.plan-fit i{display:block;height:100%;background:var(--accent)}.marketing-compare-cards ul{display:grid;gap:7px;padding-left:20px}.marketing-decision{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:center;padding:20px;color:var(--paper);background:var(--ink)}.marketing-decision>div{display:grid;gap:6px}.marketing-decision strong{font-size:26px}.marketing-decision ol{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}.marketing-decision li{padding:5px 8px;border:1px solid color-mix(in srgb,var(--paper) 30%,transparent)}.marketing-decision .action{color:var(--paper);border-color:var(--paper)}@media(max-width:760px){.marketing-compare>header,.marketing-decision{grid-template-columns:1fr}.marketing-compare-cards{grid-template-columns:1fr}.marketing-compare-cards article.is-recommended{transform: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)}}.atlas-shell{--atlas-zoom:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:34px;background:linear-gradient(165deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 96%,transparent));box-shadow:var(--shadow)}.atlas-head{display:flex;justify-content:space-between;gap:20px;align-items:end}.atlas-head h2{margin:.18em 0}.atlas-controls{display:grid;gap:10px;justify-items:end}.atlas-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.atlas-controls output{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-weight:900}.atlas-body{display:grid;grid-template-columns:minmax(240px,.56fr) minmax(0,1.44fr);gap:16px}.atlas-index{display:grid;align-content:start;gap:14px;padding:18px;border-radius:26px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 88%,#071310),color-mix(in srgb,var(--ink) 72%,#21110f))}.atlas-index label{display:grid;gap:8px}.atlas-index input,.atlas-index select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.atlas-chapters{display:grid;gap:10px;margin:0;padding:0;list-style:none}.atlas-chapters button{display:grid;gap:6px;width:100%;padding:14px;border:1px solid #ffffff24;border-radius:18px;color:inherit;background:#ffffff0e;text-align:left}.atlas-chapters button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff18;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.atlas-chapters span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-chapters small{line-height:1.5;opacity:.76}.atlas-meta{display:grid;gap:10px;margin:0}.atlas-meta div{display:grid;gap:4px;padding:12px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff10}.atlas-meta dt{font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.72}.atlas-meta dd{margin:0;font-weight:900}.atlas-stage{display:grid;gap:14px;min-width:0}.atlas-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.atlas-summary article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.atlas-summary article[data-active="true"]{background:color-mix(in srgb,var(--secondary) 14%,var(--paper));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}.atlas-summary span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-core-shell{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--accent) 8%,transparent),transparent 35%),color-mix(in srgb,var(--paper) 94%,transparent)}.atlas-core-shell>*{display:block;width:calc(10000%/var(--atlas-zoom));max-width:none;transform:scale(calc(var(--atlas-zoom)/100));transform-origin:top left}.atlas-log{display:grid;gap:8px;margin:0;padding-left:18px}.atlas-log li{line-height:1.55}.atlas-shell[data-atlas-mode="trace"] .atlas-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 24%,transparent);outline-offset:3px}.atlas-shell[data-atlas-mode="handoff"] .atlas-index{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 82%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:960px){.atlas-body{grid-template-columns:1fr}.atlas-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.atlas-head{align-items:stretch;flex-direction:column}.atlas-controls{justify-items:start}.atlas-modes{justify-content:start}.atlas-summary{grid-template-columns:1fr}.atlas-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="dark-neon" data-composition="split-note">
<main class="page">
<header class="mast"><div><span class="eyebrow">dark-neon / Page de comparaison de produits / ADVANCED</span><h1>Page de comparaison de produits de la semaine d’inscription du studio</h1><p class="intro">Réalisez une page de comparaison de produits dans le scénario de la semaine d’inscription au studio : elle comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée aux différentes tailles.</p></div><span class="scenario">Semaine d’inscription du studio</span></header>
<div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Maîtriser la structure sémantique des pages de comparaison de produits, la mise en page réactive, l’utilisation du clavier et la synchronisation de l’état.</span></aside><section class="demo" aria-label="Zone interactive de la page de comparaison des produits de la semaine d’inscription du studio"><section id="atlasShell" class="atlas-shell" data-atlas-mode="brief"><header class="atlas-head"><div><span class="eyebrow">Semaine d’inscription du studio / ATLAS DOSSIER</span><h2>Atlas d’images d’échantillons de pages de comparaison de produits</h2><p>Réencapsuler le cas principal dans une page d’exemple de type atlas, en séparant l’index des exemples, la vue de suivi, les annotations de passation et les notes de terrain.</p></div><div class="atlas-controls"><div class="atlas-modes"><button class="action primary" type="button" data-atlas-mode="brief">Briefing</button><button class="action" type="button" data-atlas-mode="trace">Suivi</button><button class="action" type="button" data-atlas-mode="handoff">Transfert</button></div><output id="atlasState">En attente de création d’échantillon</output></div></header><div class="atlas-body"><aside class="atlas-index"><ol class="atlas-chapters"><li><button type="button" data-atlas-card="0" aria-pressed="true"><span>01</span><strong>Semaine d’inscription du studio</strong><small>Vérifier si les changements d’état sont visibles</small></button></li><li><button type="button" data-atlas-card="1" aria-pressed="false"><span>02</span><strong>Collaboration de la semaine d’inscription au studio</strong><small>Confirmer la cohérence entre l’entrée au clavier et le clic</small></button></li><li><button type="button" data-atlas-card="2" aria-pressed="false"><span>03</span><strong>Progression des inscriptions au studio</strong><small>Vérifiez si la disposition se replie sur les écrans étroits</small></button></li><li><button type="button" data-atlas-card="3" aria-pressed="false"><span>04</span><strong>Rappel de la semaine d’inscription du studio</strong><small>Enregistrer la conclusion de la révision en cours</small></button></li></ol><label>Ratio de mise en page<input id="atlasZoom" type="range" min="82" max="132" value="100"><output id="atlasZoomValue">100%</output></label><label>focus de l’échantillonnage<select id="atlasFocus"><option value="0">Semaine d’inscription du studio</option><option value="1">Collaboration de la semaine d’inscription au studio</option><option value="2">Progression des inscriptions au studio</option><option value="3">Rappel de la semaine d’inscription du studio</option></select></label><button id="atlasCapture" class="action primary" type="button">Échantillon inclus</button><dl class="atlas-meta"><div><dt>Nombre de contenus</dt><dd id="atlasCount">0</dd></div><div><dt>Focus actuel</dt><dd id="atlasCurrent">Semaine d’inscription du studio</dd></div><div><dt>Mode de relecture</dt><dd id="atlasModeLabel">Briefing</dd></div></dl></aside><section class="atlas-stage"><div class="atlas-summary"><article data-active="true"><span>Sample</span><strong>Semaine d’inscription du studio</strong><p>Vérifier si les changements d’état sont visibles</p></article><article><span>Trace</span><strong>Collaboration de la semaine d’inscription au studio</strong><p>Confirmer la cohérence entre l’entrée au clavier et le clic</p></article><article><span>Signal</span><strong>Progression des inscriptions au studio</strong><p>Vérifiez si la disposition se replie sur les écrans étroits</p></article><article><span>Handoff</span><strong>Rappel de la semaine d’inscription du studio</strong><p>Enregistrer la conclusion de la révision en cours</p></article></div><div id="atlasCoreShell" class="atlas-core-shell"><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 · Présentation des points forts de la semaine d’inscription au studio</label><label><input type="radio" name="workflowChannel" value="B">B · Complément de preuves pour la semaine d’inscription du studio</label></fieldset><label>Poids de l’audience cible<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 personnes</output></label><label><input id="workflowCompareFreeze" type="checkbox">Geler la version actuelle</label><button id="workflowCompareCapture" class="action primary" type="button">Échantillonner et enregistrer la page</button><ol id="workflowCompareShelf" aria-label="Enregistrement de version"></ol></form><section class="compare-stage"><header><span class="eyebrow">Semaine d’inscription du studio COMPARE</span><h2>Comparatif des deux versions de la semaine d’inscription du studio</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:marketing-content-pages-comparison-page --><div class="marketing-compare"><header><div><span class="eyebrow">CHOOSE BY PRIORITY</span><h2>Comparaison des plans de la semaine d’inscription du studio</h2><p>Inutile d’empiler des paramètres dans des tableaux denses ; choisissez d’abord l’objectif le plus important, puis consultez les raisons de recommandation ciblées.</p></div><fieldset><legend>Objectif prioritaire actuel</legend><label><input type="radio" name="compareGoal" value="simple" checked>Démarrage rapide</label><label><input type="radio" name="compareGoal" value="team">Travail d’équipe</label><label><input type="radio" name="compareGoal" value="depth">Approfondir les capacités</label></fieldset><label>Plafond budgétaire mensuel<input id="marketingCompareBudget" type="range" min="30" max="150" step="10" value="90" data-core-bridge="marketing-content-pages-comparison-page"><output id="marketingCompareBudgetValue">¥90</output></label></header><section id="marketingCompareCards" class="marketing-compare-cards"><article data-marketing-plan="0" data-price="39"><span class="plan-rank">01</span><h3>Version légère</h3><strong>¥39<small>/ mois</small></strong><div class="plan-fit" role="progressbar" aria-label="Correspondance de la version légère" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68"><i style="width:68%"></i></div><ul><li>Démarrage rapide</li><li>modèle de base</li><li>Support de la communauté</li></ul><button type="button" class="action" aria-pressed="false">Ajouter la barre de décision</button></article><article data-marketing-plan="1" data-price="79"><span class="plan-rank">02</span><h3>Version de collaboration</h3><strong>¥79<small>/ mois</small></strong><div class="plan-fit" role="progressbar" aria-label="degré d’adéquation de la version collaborative" aria-valuemin="0" aria-valuemax="100" aria-valuenow="86"><i style="width:86%"></i></div><ul><li>Collaboration multiutilisateur</li><li>Historique des versions</li><li>support prioritaire</li></ul><button type="button" class="action" aria-pressed="false">Ajouter la barre de décision</button></article><article data-marketing-plan="2" data-price="129"><span class="plan-rank">03</span><h3>Version professionnelle</h3><strong>¥129<small>/ mois</small></strong><div class="plan-fit" role="progressbar" aria-label="Correspondance version professionnelle" aria-valuemin="0" aria-valuemax="100" aria-valuenow="94"><i style="width:94%"></i></div><ul><li>Analyses avancées</li><li>Permissions complètes</li><li>Services sur mesure</li></ul><button type="button" class="action" aria-pressed="false">Ajouter la barre de décision</button></article></section><aside class="marketing-decision"><div><span>Recommandé actuellement</span><strong id="marketingRecommendation">Version de collaboration</strong><p id="marketingReason">Offrir des capacités de collaboration plus complètes dans le budget.</p></div><div><span>Barre de décision</span><ol id="marketingDecisionList"><li>Pas encore inscrit au forfait</li></ol></div><button id="marketingCompareConfirm" class="action primary" type="button">Confirmer le résultat de la comparaison</button></aside></div><!-- 11DZ_CORE_END --></section></section></div></div><ol id="atlasLog" class="atlas-log"><li>En attente du premier échantillon du graphe</li></ol></section></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:marketing-content-pages-comparison-page */
const marketingComparePlans=[{"name":"Version légère","score":68,"price":39,"features":["Démarrage rapide","modèle de base","Support de la communauté"]},{"name":"Version de collaboration","score":86,"price":79,"features":["Collaboration multiutilisateur","Historique des versions","support prioritaire"]},{"name":"Version professionnelle","score":94,"price":129,"features":["Analyses avancées","Permissions complètes","Services sur mesure"]}];const marketingCompareCards=[...document.querySelectorAll('[data-marketing-plan]')];const marketingCompareBudget=document.querySelector('#marketingCompareBudget');const marketingCompareState={goal:'simple',budget:90,selected:new Set()};function marketingGoalBonus(planIndex){const matrix={simple:[24,12,2],team:[4,28,16],depth:[0,14,32]};return matrix[marketingCompareState.goal][planIndex];}function renderMarketingComparison(){marketingCompareState.budget=Number(marketingCompareBudget.value);document.querySelector('#marketingCompareBudgetValue').textContent='¥'+marketingCompareState.budget;const ranked=marketingComparePlans.map((plan,index)=>({index,fit:plan.score+marketingGoalBonus(index)-(plan.price>marketingCompareState.budget?45:0)})).sort((left,right)=>right.fit-left.fit);const winner=ranked[0];marketingCompareCards.forEach((card,index)=>{card.classList.toggle('is-recommended',index===winner.index);card.hidden=marketingComparePlans[index].price>marketingCompareState.budget+50;const fit=Math.max(0,Math.min(100,marketingComparePlans[index].score+marketingGoalBonus(index)));const meter=card.querySelector('[role="progressbar"]');meter.setAttribute('aria-valuenow',String(fit));meter.querySelector('i').style.width=fit+'%';});document.querySelector('#marketingRecommendation').textContent=marketingComparePlans[winner.index].name;document.querySelector('#marketingReason').textContent=marketingComparePlans[winner.index].price<=marketingCompareState.budget?'Correspond au budget et s’aligne sur les objectifs prioritaires actuels.':'Le budget actuel est trop faible ; nous recommandons l’option la plus proche de l’objectif.';const list=document.querySelector('#marketingDecisionList');list.replaceChildren(...(marketingCompareState.selected.size?[...marketingCompareState.selected].map(index=>{const item=document.createElement('li');item.textContent=marketingComparePlans[index].name;return item;}):[Object.assign(document.createElement('li'),{textContent:'Pas encore inscrit au forfait'})]));announce('Recommandé '+marketingComparePlans[winner.index].name);}document.querySelectorAll('[name="compareGoal"]').forEach(input=>input.addEventListener('change',()=>{marketingCompareState.goal=input.value;renderMarketingComparison();}));marketingCompareBudget.addEventListener('input',renderMarketingComparison);marketingCompareCards.forEach((card,index)=>card.querySelector('button').addEventListener('click',event=>{if(marketingCompareState.selected.has(index))marketingCompareState.selected.delete(index);else marketingCompareState.selected.add(index);event.currentTarget.setAttribute('aria-pressed',String(marketingCompareState.selected.has(index)));event.currentTarget.textContent=marketingCompareState.selected.has(index)?'Déplacer hors de la barre de décision':'Ajouter la barre de décision';renderMarketingComparison();}));document.querySelector('#marketingCompareConfirm').addEventListener('click',()=>announce(marketingCompareState.selected.size?'Confirmé '+marketingCompareState.selected.size+' options candidats':'Veuillez d’abord ajouter au moins une proposition candidate'));renderMarketingComparison();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"marketing-content-pages-comparison-page","selector":"[data-core-bridge=\"marketing-content-pages-comparison-page\"]","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 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+' personne';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' personne'+(workflowCompareState.frozen?' · figé':'');announce('Le studio vérifie actuellement la semaine d’inscription '+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+' personne · '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('échantillonné '+snapshot.channel+' Version et enregistrer la page · '+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 atlasShell=document.querySelector('#atlasShell');const atlasState=document.querySelector('#atlasState');const atlasZoom=document.querySelector('#atlasZoom');const atlasZoomValue=document.querySelector('#atlasZoomValue');const atlasFocus=document.querySelector('#atlasFocus');const atlasCurrent=document.querySelector('#atlasCurrent');const atlasCount=document.querySelector('#atlasCount');const atlasModeLabel=document.querySelector('#atlasModeLabel');const atlasCards=[...document.querySelectorAll('[data-atlas-card]')];const atlasSummary=[...document.querySelectorAll('.atlas-summary article')];const atlasLog=document.querySelector('#atlasLog');const atlasModeButtons=[...atlasShell.querySelectorAll('[data-atlas-mode]')];const atlasNotes=["Semaine d’inscription du studio","Collaboration de la semaine d’inscription au studio","Progression des inscriptions au studio","Rappel de la semaine d’inscription du studio"];const atlasCore=document.querySelector('#workflowCore');let atlasCaptures=0;function atlasSetActive(index){atlasCards.forEach((button,buttonIndex)=>button.setAttribute('aria-pressed',String(buttonIndex===index)));atlasSummary.forEach((card,cardIndex)=>{if(cardIndex===index)card.setAttribute('data-active','true');else card.removeAttribute('data-active');});atlasCurrent.textContent=atlasNotes[index]||atlasNotes[0]||'Sans titre - focalisation';}function atlasRender(reason){const version=atlasCore?.dataset.workflowVersion||'0';const zoom=Number(atlasZoom.value);const active=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);atlasShell.style.setProperty('--atlas-zoom',String(zoom));atlasZoomValue.textContent=zoom+'%';atlasCount.textContent=String(atlasCaptures);atlasSetActive(active);atlasModeLabel.textContent={brief:'Briefing',trace:'Suivi',handoff:'Transfert'}[atlasShell.dataset.atlasMode]||'Briefing';atlasState.textContent=reason+' · Version de base '+version;}atlasModeButtons.forEach(button=>button.addEventListener('click',()=>{atlasModeButtons.forEach(item=>item.classList.toggle('primary',item===button));atlasShell.dataset.atlasMode=button.dataset.atlasMode;atlasRender('Basculé vers'+button.textContent);announce('Mode graphe :'+button.textContent);}));atlasCards.forEach((button,index)=>button.addEventListener('click',()=>{atlasFocus.value=String(index);atlasRender('Focalisation de l’échantillon changée');announce('Focus du graphe :'+atlasNotes[index]);}));atlasZoom.addEventListener('input',()=>{atlasRender('Le niveau de zoom de la mise en page a été mis à jour');announce('Échelle du graphe '+atlasZoom.value+'%');});atlasFocus.addEventListener('change',()=>{atlasRender('Focus d’échantillonnage changé');announce('Point d’échantillonnage :'+atlasNotes[Number(atlasFocus.value)||0]);});document.querySelector('#atlasCapture').addEventListener('click',()=>{const index=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);const note=atlasNotes[index]||atlasNotes[0]||'Sans titre - focalisation';const version=atlasCore?.dataset.workflowVersion||'0';atlasCaptures+=1;const item=document.createElement('li');item.textContent='échantillon '+atlasCaptures+' · '+note+' · Version de base '+version;const empty=atlasLog.querySelector('li')?.textContent==='En attente du premier échantillon du graphe';if(empty)atlasLog.replaceChildren(item);else atlasLog.prepend(item);while(atlasLog.children.length>6)atlasLog.lastElementChild.remove();atlasRender('Échantillon inclus '+atlasCaptures);announce('Échantillon inclus '+atlasCaptures+' · '+note);});atlasCore?.addEventListener('focusin',()=>atlasRender('L’élément principal a le focus'));atlasCore?.addEventListener('click',()=>atlasRender('Interaction de l’exemple principal'));atlasRender('En attente de création d’échantillon');
</script>
</body>
</html>