/*!
 * NS Portfolio, éditeur de workflow interactif. Sombre dans les deux thèmes (comme un outil).
 */
.nswf {
	--wf-bg: #070c16; --wf-panel: #0d1524; --wf-ink: #e8eef6; --wf-soft: rgba(232, 238, 246, .62);
	--wf-line: rgba(56, 214, 255, .18); --wf-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
	--wf-head: "Space Grotesk", Poppins, sans-serif;
	position: relative; border: 1px solid rgba(56, 214, 255, .24); border-radius: 16px; overflow: hidden;
	background: var(--wf-bg); color: var(--wf-ink); box-shadow: 0 30px 70px -45px rgba(0, 0, 0, .85);
}
.nswf *, .nswf *::before, .nswf *::after { box-sizing: border-box; }
.nswf script.nswf-data { display: none; }

/* Barre */
.nswf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--wf-panel); border-bottom: 1px solid var(--wf-line); }
.nswf-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.nswf .nswf-tab { padding: 7px 12px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--wf-soft); font: 600 13px/1.2 var(--wf-mono); cursor: pointer; }
.nswf .nswf-tab:hover { color: var(--wf-ink); border-color: var(--wf-line); }
.nswf .nswf-tab[aria-selected="true"] { color: #ffd24d; border-color: rgba(255, 193, 7, .5); background: rgba(255, 193, 7, .08); }
.nswf-actions { display: flex; gap: 6px; }
.nswf .nswf-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--wf-line); background: rgba(56, 214, 255, .06); color: var(--wf-ink); font: 600 13px/1 var(--wf-mono); cursor: pointer; }
.nswf .nswf-btn:hover { border-color: rgba(56, 214, 255, .5); }
.nswf .nswf-btn.nswf-sq { width: 34px; justify-content: center; padding: 0; font-size: 17px; }
.nswf .nswf-btn.nswf-run { background: #ffc107; border-color: #ffc107; color: #0b1220; }
.nswf .nswf-btn.nswf-run:hover { filter: brightness(1.08); }
.nswf .nswf-btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
.nswf button:focus-visible { outline: 2px solid #38d6ff; outline-offset: 2px; }

/* Plan */
.nswf-stage {
	position: relative; height: clamp(380px, 62vh, 560px); overflow: hidden; cursor: grab; touch-action: none; user-select: none;
	background-color: var(--wf-bg);
	background-image: radial-gradient(circle, rgba(140, 170, 210, .22) 1.1px, transparent 1.3px);
	background-size: 22px 22px;
}
.nswf-stage:focus-visible { outline: 2px solid #38d6ff; outline-offset: -2px; }
.nswf-stage.is-pan { cursor: grabbing; }
.nswf-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.nswf-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.nswf-edge-hit { fill: none; stroke: transparent; stroke-width: 14; }
.nswf-edge-line { fill: none; stroke: rgba(140, 170, 210, .45); stroke-width: 2; transition: stroke .3s; }
.nswf-edge.is-side .nswf-edge-line { stroke-dasharray: 5 5; }
.nswf-edge.is-skip .nswf-edge-line { stroke-dasharray: 3 6; stroke: rgba(255, 107, 107, .4); }
.nswf-edge.is-live .nswf-edge-line { stroke: #38d6ff; }
.nswf-edge.is-done .nswf-edge-line { stroke: rgba(61, 220, 132, .75); }
.nswf-edge.is-skip.is-done .nswf-edge-line { stroke: rgba(255, 107, 107, .35); }
.nswf-edge-label rect { fill: #0d1524; stroke: rgba(140, 170, 210, .35); }
.nswf-edge-label text { fill: var(--wf-soft); font: 600 11px var(--wf-mono); }
.nswf-packet { fill: #38d6ff; filter: drop-shadow(0 0 6px #38d6ff); }

/* Étapes */
.nswf .nswf-node {
	position: absolute; width: 216px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start;
	padding: 11px 12px 11px 11px; text-align: left; border-radius: 12px;
	border: 1px solid rgba(140, 170, 210, .22); background: #0f1828; color: var(--wf-ink);
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9), inset 3px 0 0 var(--app);
	cursor: pointer; touch-action: none; transition: border-color .25s, box-shadow .25s, opacity .25s;
}
.nswf .nswf-node:hover { border-color: color-mix(in srgb, var(--app) 60%, transparent); }
.nswf .nswf-node.is-drag { cursor: grabbing; box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .95), inset 3px 0 0 var(--app); z-index: 3; }
.nswf .nswf-node.is-sel { border-color: #ffc107; box-shadow: 0 0 0 3px rgba(255, 193, 7, .25), inset 3px 0 0 var(--app); }
.nswf-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--app); background: color-mix(in srgb, var(--app) 14%, transparent); border: 1px solid color-mix(in srgb, var(--app) 35%, transparent); }
.nswf-txt { display: grid; gap: 2px; min-width: 0; }
.nswf-app { font: 600 10.5px/1.2 var(--wf-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--app); }
.nswf-title { font: 700 14.5px/1.25 var(--wf-head); color: var(--wf-ink); }
.nswf-sub { font: 500 11.5px/1.35 var(--wf-mono); color: var(--wf-soft); }
.nswf-in, .nswf-out { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #0f1828; border: 2px solid rgba(140, 170, 210, .6); }
.nswf-in { left: -6px; }
.nswf-out { right: -6px; }
.nswf-badge { position: absolute; right: 8px; top: -10px; padding: 2px 7px; border-radius: 999px; font: 600 10.5px/1.4 var(--wf-mono); background: #0d1524; border: 1px solid transparent; color: transparent; }
.nswf .nswf-node.is-run { border-color: #38d6ff; box-shadow: 0 0 0 3px rgba(56, 214, 255, .22), inset 3px 0 0 var(--app); }
.nswf .nswf-node.is-run .nswf-ico { animation: nswfPulse .9s ease-in-out infinite; }
.nswf .nswf-node.is-ok .nswf-badge { color: #3ddc84; border-color: rgba(61, 220, 132, .45); }
.nswf .nswf-node.is-ok .nswf-out, .nswf .nswf-node.is-ok .nswf-in { border-color: #3ddc84; }
.nswf .nswf-node.is-skipped { opacity: .42; }
.nswf .nswf-node.is-skipped .nswf-badge { color: #ff8a8a; border-color: rgba(255, 107, 107, .4); }
@keyframes nswfPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--app) 18%, transparent); } }

.nswf-hint { position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 90px); padding: 6px 10px; border-radius: 8px; background: rgba(13, 21, 36, .88); border: 1px solid var(--wf-line); font: 500 11.5px/1.4 var(--wf-mono); color: var(--wf-soft); pointer-events: none; transition: opacity .4s; }
.nswf-hint.is-gone { opacity: 0; }
.nswf-zoom { position: absolute; right: 12px; bottom: 10px; padding: 4px 8px; border-radius: 7px; background: rgba(13, 21, 36, .88); border: 1px solid var(--wf-line); font: 600 11px/1.3 var(--wf-mono); color: var(--wf-soft); pointer-events: none; }

/* Inspecteur */
.nswf-panel {
	position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(340px, calc(100% - 20px)); overflow-y: auto;
	border-radius: 14px; background: rgba(13, 21, 36, .97); border: 1px solid color-mix(in srgb, var(--app, #38d6ff) 40%, transparent);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); cursor: auto; user-select: text; touch-action: pan-y; z-index: 5;
}
.nswf-panel[hidden] { display: none; }
.nswf-p-head { position: sticky; top: 0; display: grid; grid-template-columns: 40px 1fr 32px; gap: 10px; align-items: center; padding: 14px 14px 12px; background: rgba(13, 21, 36, .98); border-bottom: 1px solid var(--wf-line); }
.nswf-p-head .nswf-ico { color: var(--app); }
.nswf .nswf-p-head h4 { margin: 2px 0 0; font: 700 16px/1.3 var(--wf-head); color: #fff; }
.nswf .nswf-p-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--wf-line); background: transparent; color: var(--wf-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.nswf-p-body { padding: 12px 14px 16px; }
.nswf .nswf-p-body p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--wf-ink); }
.nswf .nswf-p-body h5 { margin: 14px 0 6px; font: 600 11px/1.3 var(--wf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wf-soft); }
.nswf .nswf-p-body table, .nswf .nswf-p-body tr, .nswf .nswf-p-body tbody { border: 0 !important; background: transparent !important; }
.nswf .nswf-p-body table { width: 100%; border-collapse: collapse; margin: 0 !important; }
.nswf .nswf-p-body th, .nswf .nswf-p-body td { padding: 6px 0 !important; border: 0 !important; border-bottom: 1px solid var(--wf-line) !important; background: transparent !important; text-align: left !important; vertical-align: top; font: 500 12.5px/1.45 var(--wf-mono) !important; }
.nswf .nswf-p-body th { width: 42%; padding-right: 10px !important; color: var(--wf-soft) !important; font-weight: 500 !important; }
.nswf .nswf-p-body td { color: var(--wf-ink) !important; }
.nswf .nswf-io { list-style: none; margin: 0; padding: 0; }
.nswf .nswf-io li::before, .nswf .nswf-io li::marker { content: none !important; }
.nswf .nswf-io li { list-style: none !important; padding: 0 !important; margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--wf-ink); }
.nswf .nswf-io b { display: inline-block; min-width: 54px; font: 600 11px var(--wf-mono); color: #38d6ff; text-transform: uppercase; }
.nswf .nswf-p-body pre { margin: 0; padding: 10px 12px; border-radius: 9px; background: #070c16; border: 1px solid var(--wf-line); color: #cfe8ff; font: 500 12px/1.55 var(--wf-mono); white-space: pre-wrap; word-break: break-word; }

/* Journal */
.nswf-log { height: 132px; overflow-y: auto; padding: 10px 14px; background: #060a12; border-top: 1px solid var(--wf-line); font: 500 12.5px/1.6 var(--wf-mono); color: var(--wf-soft); }
.nswf-l-t { color: rgba(232, 238, 246, .38); }
.nswf-l-k { display: inline-block; min-width: 3.2em; font-weight: 600; }
.nswf-l-ok .nswf-l-k { color: #3ddc84; }
.nswf-l-run .nswf-l-k { color: #38d6ff; }
.nswf-l-info .nswf-l-k { color: #ffc107; }
.nswf-l-skip .nswf-l-k { color: #ff8a8a; }
.nswf-l-ok { color: var(--wf-ink); }

@media (max-width: 640px) {
	.nswf-bar { padding: 8px; }
	.nswf .nswf-tab { font-size: 12px; padding: 6px 9px; }
	.nswf-actions { width: 100%; }
	.nswf .nswf-btn.nswf-run { flex: 1; justify-content: center; }
	.nswf-stage { height: 440px; }
	.nswf-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 72%; }
	.nswf-hint { display: none; }
	.nswf-log { height: 118px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.nswf .nswf-node.is-run .nswf-ico { animation: none; }
}

/* Le thème force « body.light-mode span { color: … !important } » : on verrouille les couleurs du canevas,
 * qui reste sombre dans les deux thèmes. */
html body .nswf.nswf .nswf-app { color: var(--app) !important; }
html body .nswf.nswf .nswf-title { color: var(--wf-ink) !important; }
html body .nswf.nswf .nswf-sub { color: var(--wf-soft) !important; }
html body .nswf.nswf .nswf-badge { color: transparent !important; }
html body .nswf.nswf .nswf-node.is-ok .nswf-badge { color: #3ddc84 !important; }
html body .nswf.nswf .nswf-node.is-skipped .nswf-badge { color: #ff8a8a !important; }
html body .nswf.nswf .nswf-l, html body .nswf.nswf .nswf-l span { color: inherit !important; }
html body .nswf.nswf .nswf-l { color: var(--wf-soft) !important; }
html body .nswf.nswf .nswf-l-ok { color: var(--wf-ink) !important; }
html body .nswf.nswf .nswf-l-t { color: rgba(232, 238, 246, .38) !important; }
html body .nswf.nswf .nswf-l-ok .nswf-l-k { color: #3ddc84 !important; }
html body .nswf.nswf .nswf-l-run .nswf-l-k { color: #38d6ff !important; }
html body .nswf.nswf .nswf-l-info .nswf-l-k { color: #ffc107 !important; }
html body .nswf.nswf .nswf-l-skip .nswf-l-k { color: #ff8a8a !important; }
html body .nswf.nswf .nswf-btn span { color: inherit !important; }
html body .nswf.nswf .nswf-io li, html body .nswf.nswf .nswf-p-body p { color: var(--wf-ink) !important; }
@media (max-width: 640px) {
	html body .nswf.nswf .nswf-l-t { display: none; }
}
html body .nswf.nswf .nswf-panel { background: #0d1524 !important; }
html body .nswf.nswf .nswf-p-head h4 { color: #fff !important; }
html body .nswf.nswf .nswf-p-body h5 { color: var(--wf-soft) !important; }
html body .nswf.nswf .nswf-p-body p { color: var(--wf-ink) !important; }
html body .nswf.nswf .nswf-io b { color: #38d6ff !important; }
html body .nswf.nswf .nswf-p-body pre { color: #cfe8ff !important; }
html body .nswf.nswf .nswf-btn { white-space: nowrap; }
/* Les pages hôtes (.nsv, .ns3…) colorent leurs p/h via --ink et --soft : on les redéfinit pour le canevas. */
.nswf, body.light-mode .nswf { --ink: #e8eef6; --soft: rgba(232, 238, 246, .62); --line: rgba(56, 214, 255, .18); }
html body .nswf.nswf .nswf-ico { color: var(--app) !important; }
html body .nswf.nswf .nswf-ico svg, html body .nswf.nswf .nswf-ico svg * { stroke: currentColor !important; fill: none !important; }

/* ---------- Démos jouables (.nsdemo) ---------- */
html body .nsdemo.nsdemo { position: relative; border: 1px solid rgba(56, 214, 255, .24); border-radius: 16px; overflow: hidden; background: #070c16; box-shadow: 0 30px 70px -45px rgba(0, 0, 0, .85); }
html body .nsdemo.nsdemo .nsdemo-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0d1524; border-bottom: 1px solid rgba(56, 214, 255, .16); font: 500 12.5px/1.2 "JetBrains Mono", ui-monospace, Consolas, monospace; color: rgba(232, 238, 246, .6) !important; }
.nsdemo-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; flex: none; }
.nsdemo-bar i + i { background: #febc2e; } .nsdemo-bar i + i + i { background: #28c840; margin-right: 6px; }
html body .nsdemo.nsdemo .nsdemo-bar span { color: rgba(232, 238, 246, .62) !important; }
html body .nsdemo.nsdemo .nsdemo-full { margin-left: auto; color: #38d6ff !important; text-decoration: none !important; white-space: nowrap; }
html body .nsdemo.nsdemo .nsdemo-full:hover { color: #ffd24d !important; }
.nsdemo-stage { position: relative; aspect-ratio: 16 / 10; min-height: 340px; }
.nsdemo-stage img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top; filter: brightness(.55) saturate(.9); }
.nsdemo-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; }
html body .nsdemo.nsdemo .nsdemo-play { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; background: #ffc107; color: #0b1220 !important; font: 700 17px/1 "Space Grotesk", Poppins, sans-serif; text-decoration: none !important; box-shadow: 0 12px 30px -10px rgba(255, 193, 7, .6); transition: transform .25s; }
html body .nsdemo.nsdemo .nsdemo-play:hover { transform: translateY(-2px); }
html body .nsdemo.nsdemo .nsdemo-play:focus-visible { outline: 3px solid #38d6ff; outline-offset: 3px; }
html body .nsdemo.nsdemo .nsdemo-note { margin: 0 !important; max-width: 520px; font: 500 13px/1.5 "JetBrains Mono", ui-monospace, Consolas, monospace; color: rgba(232, 238, 246, .85) !important; background: rgba(7, 12, 22, .7); padding: 6px 12px; border-radius: 8px; }
.nsdemo.is-live .nsdemo-stage { aspect-ratio: auto; height: min(78vh, 760px); }
.nsdemo-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 700px) { .nsdemo-stage { aspect-ratio: 4 / 3; min-height: 0; } }