/* Écran animé des pages d'exemple (champ `demo` dans src/exemples.ts), orchestré par demo.js. Sources dans scripts/demo/, copiées vers public/pour/exemple/_/ par scripts/exemples.ts.
   Mouvement : transform et opacity seulement, classes d'état posées par le script.
   Sans script : le fichier brut reste lisible. Avec prefers-reduced-motion : état final, sans déplacement. */
.demo{padding:48px 0 8px}.demo .sub{margin-bottom:24px}
.stage{perspective:1600px}
.screen{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-move:cubic-bezier(0.77,0,0.175,1);
background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 40px 80px -40px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.05);
overflow:hidden;font-size:13px;line-height:1.35;opacity:0;transform:rotateX(9deg) rotateY(-7deg) translateY(28px) scale(.97);transform-origin:50% 60%;
transition:transform 1.1s var(--ease-out),opacity .6s var(--ease-out)}
.screen.in{opacity:1;transform:none}
.screen.jump *{transition:none!important}

/* Barre de l'application : marque, fil d'Ariane, étapes, rejouer */
.bar{display:flex;align-items:center;gap:14px;height:48px;padding:0 16px;border-bottom:1px solid var(--line);background:#fafafa}
.dots{display:flex;gap:5px;flex:none}.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.app{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:-.01em;flex:none}.app i{width:14px;height:14px;border-radius:4px;background:var(--accent)}
.crumb{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.steps{margin-left:auto;display:flex;gap:4px;flex:none}
.steps button{position:relative;appearance:none;border:0;background:transparent;font:inherit;font-weight:600;color:var(--mute);padding:7px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;overflow:hidden;transition:color .2s ease,background-color .2s ease}
.steps button i{font-style:normal;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--line);color:var(--mute);transition:background-color .2s ease,color .2s ease}
.steps button.on{color:var(--ink);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.steps button.on i,.steps button.done i{background:var(--accent);color:#fff}
.steps button u{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.steps button.run u{transform:scaleX(1);transition:transform var(--dur,3s) linear}
.replay{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:12px;font-weight:600;border-radius:999px;padding:5px 11px;cursor:pointer;flex:none;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.screen.done .replay{opacity:1;transform:none;pointer-events:auto}
@media(hover:hover) and (pointer:fine){.steps button:hover{color:var(--ink)}.replay:hover{border-color:var(--ink)}}

/* Tableau : le fichier du lead */
.body{display:grid;grid-template-columns:1fr 256px;min-height:468px}
.table{border-right:1px solid var(--line);min-width:0}
.thead,.row{display:grid;grid-template-columns:1.2fr 1.4fr .9fr 1.6fr 1fr;gap:10px;align-items:center;padding:0 16px}
.thead{height:36px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.rows{position:relative}
.row{height:43px;border-bottom:1px solid #eef0f2;transition:opacity .45s var(--ease-out),background-color .3s ease,transform .6s var(--ease-move)}
.row span{min-width:0}
.row .co{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .ct{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.scan{background:#f0f4f6;background:color-mix(in srgb,var(--accent) 9%,#fff)}
.row.muted{opacity:.42}
.tag,.sig,.rep{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;opacity:0;transform:translateY(4px) scale(.96);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.row.scanned .tag,.row.ranked .sig,.row.assigned .rep{opacity:1;transform:none}
.tag{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px;background:#eef0f2;color:#4b5058}
.tag.keep{background:#e6f1f4;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent)}
.sig{font-size:12px;font-weight:600;color:var(--ink);max-width:100%}.sig span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sig::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.rep{font-size:12px;font-weight:600}.rep i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--dark);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:none}

/* Panneau latéral : une vue par scène */
.panel{position:relative;padding:18px;background:#fafafa}
.pane{position:absolute;inset:18px;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);pointer-events:none}
.pane.on{opacity:1;transform:none;pointer-events:auto}
.pane h4{margin:0 0 14px;font-size:14px;line-height:1.3}
.big{margin:0 0 16px}.big b{display:block;font-size:34px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}.big span{font-size:12px;color:var(--mute)}
.tally{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tally li{display:grid;grid-template-columns:1fr auto;gap:3px 8px;font-size:12px;color:var(--mute)}
.tally li b{color:var(--ink);font-variant-numeric:tabular-nums}
.tally li i{grid-column:1/-1;height:6px;border-radius:3px;background:#e6e8eb;position:relative;overflow:hidden}
.tally li i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:#aeb4bc;border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) var(--d,0s)}
.tally li.keep i::after,.sigs li i::after{background:var(--accent)}
.tally li:nth-child(2) i::after{--d:.08s}.tally li:nth-child(3) i::after{--d:.16s}.tally li:nth-child(4) i::after{--d:.24s}.tally li:nth-child(5) i::after{--d:.32s}
.pane.fill .tally li i::after{transform:scaleX(1)}
.reps{display:grid;gap:8px}
.repc{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease-out) var(--d,0s),transform .3s var(--ease-out) var(--d,0s)}
.repc:nth-child(2){--d:.09s}.repc:nth-child(3){--d:.18s}
.repc .rep{opacity:1;transform:none;transition:none}
.repc span{font-weight:700;font-variant-numeric:tabular-nums}
.pane.fill .repc{opacity:1;transform:none}
.ready{margin:16px 0 0;font-size:12px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .4s var(--ease-out) .5s}
.pane.fill .ready{opacity:1}

@media(max-width:820px){
.body{grid-template-columns:1fr;min-height:0}.table{border-right:0;border-bottom:1px solid var(--line)}
.thead,.row{grid-template-columns:1fr .85fr 1.3fr .5fr;gap:8px;padding:0 12px}.ct{display:none}.row{height:46px}.rp .rep{font-size:0;gap:0}.rp .rep i{font-size:11px}
.sig{font-size:11px}.sig span{white-space:normal;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.crumb{display:none}
.panel{min-height:250px}.bar{gap:10px;padding:0 12px}.steps button{padding:6px 7px;font-size:12px}
}
@media(max-width:480px){.steps button{gap:0;font-size:0}.steps button i{font-size:11px}.replay{font-size:11px;padding:4px 9px}}
@media(prefers-reduced-motion:reduce){
.screen{transform:none;transition:opacity .3s ease}
.row,.tag,.sig,.rep,.pane,.repc,.tally li i::after,.ready,.replay,.steps button u{transition:none}
.row{transform:none!important}
}