/* SKEION — guided scenario « Anticipate, protect » of /scenario.html (docs/build/39-scenario-promotion.md).
   Loaded after /assets/site/site.css and /assets/site/alert.css (the alert red); expand.css (full screen) is loaded by
   assets/js/scenario.js once the page is idle. The site header (fixed, --hdr high, written by tools/sync-chrome.mjs) and footer
   are the common ones: everything below that measures from the top of the page reads --hdr. A stepper of seven steps: the text
   column (one step at a time, its values, Back / Next) next to (desktop, ≥ 900 px) or under (phones, tablets in
   portrait) one figure (rail, stage, caption). Live stage only under html.anim (assets/site/anim-flag.js, scenario.js); otherwise
   the stage shows a fixed, captioned figure per step. Without JavaScript, the seven steps follow each other with their fixed figures.
   Charter: dark grounds, context dimmed, one thing bright at a time; the alert red (--alert) only on alert marks:
   the triangle and the critical point (in the scenes) and the part of a gauge beyond its threshold (here). */

:root { --sc-r: 14px; --sc-top: calc(var(--hdr) + 16px); --sc-railh: 34px; --sc-barh: 84px; }

/* ---------- Sector: shown only once chosen (JS sets html[data-role]); without JS both are shown, labelled ---------- */
html[data-role="grid"] [data-role="satellite"], html[data-role="satellite"] [data-role="grid"] { display: none !important; }

/* ---------- Player ---------- */
.sc {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "side";
  width: min(100% - 2 * var(--gut), 1440px); margin-inline: auto; padding: calc(var(--hdr) + 10px) 0 0;
}
.sc-side { grid-area: side; display: flex; flex-direction: column; min-width: 0; }
.sc-fig { grid-area: fig; margin: 0; min-width: 0; }

/* text */
.sc-step { padding: 18px 0 8px; }
.sc-idx { display: flex; align-items: baseline; gap: 10px; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.sc-idx-n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sc-h1 {
  margin: 12px 0 14px; max-width: 18ch; text-wrap: balance;
  font: 600 clamp(30px, calc(2.2vw + 16px), 50px)/1.05 var(--f-display); letter-spacing: -0.03em; color: var(--ink);
}
.sc-h {
  margin: 10px 0 12px; max-width: 20ch; text-wrap: balance;
  font: 600 clamp(26px, calc(1.4vw + 16px), 40px)/1.08 var(--f-display); letter-spacing: -0.024em; color: var(--ink);
}
.sc-h1:focus, .sc-h:focus { outline: none; }
.sc-h1:focus-visible, .sc-h:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 4px; }
.sc-p { max-width: 46ch; font-size: clamp(16px, calc(0.2vw + 15px), 18px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.sc-p + .sc-p { margin-top: 10px; }
/* who carries the scenario (steps 01 and 07): one sober line, never a call to action */
.sc-who { margin-top: 14px; max-width: 50ch; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.sc-who em { font-style: italic; color: var(--ink); }
html[lang="fr"] .sc, html[lang="fr"] .skx-panel { hyphens: manual; -webkit-hyphens: manual; }   /* short texts: no automatic breaks */
.sc-src { margin-top: 14px; max-width: 58ch; font: 400 0.75rem/1.55 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-3); }
.sc-need { margin-top: 14px; padding: 10px 14px; border: 1px solid rgba(91, 180, 236, 0.45); border-radius: 8px; color: var(--ink); font-size: 0.95rem; max-width: 46ch; }
.sc-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font: 400 0.8125rem/1.5 var(--f-mono); color: var(--ink-2); }
.sc-vis .badge { padding: 3px 9px 3px 8px; gap: 6px; }

/* before scenario.js (deferred) runs: only the opening step (html[data-step0], set in the head) is shown, and the
   sector line keeps its place, so that nothing moves when the script takes over (html.sc-on) */
html[data-step0="1"]:not(.sc-on) .sc-step:not([data-step="1"]),
html[data-step0="2"]:not(.sc-on) .sc-step:not([data-step="2"]),
html[data-step0="3"]:not(.sc-on) .sc-step:not([data-step="3"]),
html[data-step0="4"]:not(.sc-on) .sc-step:not([data-step="4"]),
html[data-step0="5"]:not(.sc-on) .sc-step:not([data-step="5"]),
html[data-step0="6"]:not(.sc-on) .sc-step:not([data-step="6"]),
html[data-step0="7"]:not(.sc-on) .sc-step:not([data-step="7"]) { display: none; }
html.js:not(.sc-on):not([data-step0="1"]) .sc-sector { display: flex; visibility: hidden; }
html:not(.sc-on)[data-step0="1"] .sc-nav { display: none; }

/* after step 01, its section keeps only the page's h1, visually hidden (the document always has its h1) */
.sc-step.is-off { padding: 0; }
.sc-step.is-off > :not(.sc-h1) { display: none; }
.sc-step.is-off > .sc-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* sector reminder (steps 02 to 07) */
.sc-sector { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-top: 12px; font: 400 0.8125rem/1.5 var(--f-mono); color: var(--ink-3); }
.sc-sector-v { color: var(--ink-2); }
.sc-sector-c { color: var(--teal); }
.sc-sector[hidden] { display: none; }

/* step 01: the two sectors */
.sc-q { margin: 20px 0 10px; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.sc-cards { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 560px; }
.sc-card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 84px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--line-2); border-radius: 10px; background: rgba(9, 18, 49, 0.55); text-decoration: none; color: var(--ink);
  transition: border-color 0.2s, background-color 0.2s;
}
.sc-card-img { display: block; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #0A081B; }
.sc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-card-t { display: grid; gap: 3px; min-width: 0; }
.sc-card-t b { font: 600 1.06rem/1.25 var(--f-display); letter-spacing: -0.01em; }
.sc-card-t small { font: 400 0.75rem/1.4 var(--f-mono); color: var(--ink-3); letter-spacing: 0.02em; }
.sc-card[aria-current] { border-color: rgba(45, 221, 184, 0.7); background: rgba(45, 221, 184, 0.07); }
@media (hover: hover) { .sc-card:hover { border-color: rgba(45, 221, 184, 0.6); background: rgba(9, 18, 49, 0.85); } }

/* step 03: how to read the instrument */
.sc-keys { display: grid; gap: 6px; margin-top: 16px; font: 400 0.8125rem/1.45 var(--f-mono); color: var(--ink-2); }
.sc-keys li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; }
.sc-keys b { font-weight: 500; color: var(--ink); }
.sc-keys i { display: block; width: 22px; height: 12px; }
.k-map { border: 1px solid rgba(41, 221, 218, 0.6); background: repeating-linear-gradient(-45deg, rgba(41, 221, 218, 0.55) 0 1px, transparent 1px 4px); }
.k-idx { background: linear-gradient(transparent 5px, var(--ink) 5px, var(--ink) 7px, transparent 7px), rgba(41, 221, 218, 0.22); }
.k-axis { background: linear-gradient(transparent 6px, var(--ink-3) 6px, var(--ink-3) 7px, transparent 7px); position: relative; }
.k-axis::after { content: ""; position: absolute; right: 2px; top: 3px; width: 8px; height: 6px; background: var(--cyan); opacity: 0.8; }

/* step 04: the time slider (live figure only) */
.sc-scrub { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; margin-top: 12px; max-width: 560px; }
.sc-scrub-v { min-width: 9ch; font: 500 0.875rem/1 var(--f-mono); color: var(--ink); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-range { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--cyan); cursor: pointer; }
.sc-replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(10, 8, 27, 0.6); cursor: pointer; font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
@media (hover: hover) { .sc-replay:hover { color: var(--ink); border-color: rgba(45, 221, 184, 0.55); } }
html:not(.anim) .sc-scrub { display: none; }

/* step 05: actions and the choice */
.sc-acts { display: grid; gap: 8px; margin-top: 16px; max-width: 520px; }
.sc-acts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.sc-acts-n {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border: 1px solid var(--ink-3); border-radius: 50%;
  font: 500 0.8125rem/1 var(--f-mono); color: var(--ink-2); transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.sc-acts-t { display: grid; gap: 2px; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.sc-acts-t small { font: 400 0.75rem/1.4 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-3); }
.sc[data-choice="act"] .sc-acts-n { border-color: var(--cyan); color: var(--ink); background: rgba(41, 221, 218, 0.16); }
.sc-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.sc-choice-l { flex-basis: 100%; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.sc-pick { min-height: 48px; font-size: 0.97rem; }
.sc-pick[aria-pressed="true"] { border-color: var(--ink); background: rgba(240, 252, 255, 0.07); }

/* step 06: the two outcomes side by side (a real table; gauges are decorative, the words carry the meaning) */
.sc-cmp { width: 100%; max-width: 600px; margin-top: 16px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sc-cmp caption { caption-side: top; text-align: left; padding-bottom: 8px; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.sc-cmp th, .sc-cmp td { padding: 8px 10px 9px; vertical-align: top; text-align: left; border-top: 1px solid var(--line); }
.sc-cmp thead th { padding-top: 6px; padding-bottom: 6px; border-top: 0; font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.sc-cmp thead th:first-child { width: 38%; }
.sc-cmp tbody th { font-weight: 400; }
.sc-cmp-k { display: block; font: 500 0.9rem/1.3 var(--f-text); color: var(--ink); }
.sc-cmp tbody th small { display: block; margin-top: 2px; font: 400 0.75rem/1.35 var(--f-mono); color: var(--ink-3); }
.sc-cmp-n { float: left; display: grid; place-items: center; width: 18px; height: 18px; margin: 1px 7px 0 0; border: 1px solid var(--ink-3); border-radius: 50%; font: 500 0.75rem/1 var(--f-mono); color: var(--ink-2); }
.sc-cmp td .sc-val { display: block; font: 500 0.9375rem/1.3 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-cmp td .sc-s { display: block; margin-top: 2px; font: 400 0.75rem/1.35 var(--f-mono); color: var(--ink-2); }
.sc-cmp-h td .sc-s { color: var(--ink-3); }
.sc-cmp-h th, .sc-cmp-h td { background: rgba(9, 18, 49, 0.55); }
.sc-g { position: relative; display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(240, 252, 255, 0.09); }
.sc-g i { position: absolute; top: 0; bottom: 0; left: 0; display: block; border-radius: 2px; }
.sc-g .z { background: rgba(45, 221, 184, 0.16); }                        /* safe zone */
.sc-g .b { background: var(--cyan); transition: width 0.25s linear; }
.sc-g .r { background: var(--alert); border-radius: 0 2px 2px 0; transition: width 0.25s linear; }   /* beyond the threshold: the alert red */
.sc-g .w { background: var(--ink); border-radius: 0 2px 2px 0; }       /* hazard beyond its reference: white (physics, never red) */
.sc-g .t { top: -4px; bottom: -4px; width: 2px; border-radius: 0; background: var(--ink); }
.sc-g i[hidden] { display: none; }
.sc-cmp-h .sc-g { max-width: 260px; }
.sc-mine { display: none; margin-top: 3px; font: 400 0.75rem/1.2 var(--f-mono); letter-spacing: 0.06em; color: var(--teal); }
.sc-cmp[data-choice="act"] th[data-c="act"] .sc-mine, .sc-cmp[data-choice="none"] th[data-c="none"] .sc-mine { display: block; }
/* the chosen outcome: a white frame around its column; the other stays readable, slightly dimmed */
.sc-cmp[data-choice="act"] [data-c="act"], .sc-cmp[data-choice="none"] [data-c="none"] { box-shadow: inset 1px 0 0 var(--line-3), inset -1px 0 0 var(--line-3); }
.sc-cmp[data-choice="act"] thead [data-c="act"], .sc-cmp[data-choice="none"] thead [data-c="none"] { box-shadow: inset 1px 0 0 var(--line-3), inset -1px 0 0 var(--line-3), inset 0 1px 0 var(--line-3); border-radius: 6px 6px 0 0; }
.sc-cmp[data-choice="act"] tr:last-child [data-c="act"], .sc-cmp[data-choice="none"] tr:last-child [data-c="none"] { box-shadow: inset 1px 0 0 var(--line-3), inset -1px 0 0 var(--line-3), inset 0 -1px 0 var(--line-3); border-radius: 0 0 6px 6px; }
.sc-cmp[data-choice="act"] td[data-c="none"], .sc-cmp[data-choice="none"] td[data-c="act"] { opacity: 0.85; }

/* step 07 */
.sc-sum { display: grid; gap: 4px; margin-top: 16px; padding: 12px 14px; max-width: 520px; border: 1px solid var(--line-2); border-radius: 8px; font: 400 0.875rem/1.5 var(--f-mono); color: var(--ink); }
.sc-pilot { margin-top: 16px; max-width: 52ch; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
.sc-cta { margin-top: 16px; }
.sc-step[data-step="7"] .sc-vis--end { margin-top: 16px; }
.sc-more { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 8px; }

/* values written by the scenes (illustrative) */
.sc-ro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-top: 12px; max-width: 560px; }
.sc-ro[hidden] { display: none; }
.sc-ro > div { display: grid; grid-template-rows: 1fr auto; border-top: 1px solid var(--line); padding: 8px 0 6px; min-width: 0; }
.sc-ro > div.is-wide { grid-column: 1 / -1; }
.sc-ro dt { font: 400 0.75rem/1.35 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.sc-ro dd { margin: 3px 0 0; font: 500 0.95rem/1.35 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
html[lang="fr"] .sc-ro { hyphens: manual; -webkit-hyphens: manual; }

/* Back / Next */
.sc-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sc-nav .btn { min-height: 48px; min-width: 112px; }
.sc-back { margin-right: auto; }
.sc-next { border-color: rgba(45, 221, 184, 0.6); }
.sc-nav[hidden] { display: none; }
.sc-count { font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-nav .btn[hidden] { display: none; }
.sc-again { text-decoration: none; }
.sc-nav .btn:disabled { opacity: 0.4; cursor: default; }
html:not(.js) .sc-nav, html:not(.js) .sc-ro { display: none; }
/* step 07: the result in words in the text column (stacked), or in the figure under the chain (side by side) */
@media (min-width: 900px) { html.js .sc-step[data-step="7"] .sc-sum { display: none; } .sc-chain .sc-recap { display: block; } }

/* ---------- Figure: rail, stage, caption ---------- */
.sc-rail ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sc-rail a {
  position: relative; display: flex; align-items: flex-start; gap: 6px; min-height: var(--sc-railh); padding: 6px 0 10px; text-decoration: none;
  font: 500 0.75rem/1.2 var(--f-mono); letter-spacing: 0.05em; color: var(--ink-3);
}
.sc-rail a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--line-2); }
.sc-rail a.is-done::after { background: rgba(45, 221, 184, 0.45); }
.sc-rail a[aria-current]::after { background: var(--teal); }
.sc-rail a[aria-current] { color: var(--ink); }
.sc-rail a[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.sc-rail-n { font-variant-numeric: tabular-nums; }
.sc-rail-t { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* a step name not shown stays in the link's accessible name (« 03 1st alert », WCAG 2.4.4) */
.sc-rail-t { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0 0 0 0); border: 0; }
@media (hover: hover) { .sc-rail a:not([aria-disabled="true"]):hover { color: var(--ink); } }
html:not(.js) .sc-fig { display: none; }

.sc-stage {
  position: relative; overflow: hidden; isolation: isolate; margin-inline: auto;
  width: min(100%, 52svh); aspect-ratio: 1 / 1;
  border: 1px solid var(--line); border-radius: var(--sc-r); background: #0A081B;
  container: scstage / inline-size;                      /* the early alert (step 02) compacts on small stages */
}
.sc-pic, .sc-pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-pic img { object-fit: contain; }
.sc-pic img:not([src]) { visibility: hidden; }
.sc-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.sc-layer.is-on { opacity: 1; }
.sc-layer.is-slow { transition-duration: 0.6s; }
.sc-layer.is-parked { visibility: hidden; transform: translate3d(0, -400%, 0) !important; }
.sc-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-sun { background: #0A081B center / cover no-repeat; }
.sc-sun canvas { opacity: 0; }
/* the still (set inline by scenario.js) is only the first frame: once the engine draws, it must be gone, or it shows through
   the transparent canvas and the Sun looks doubled when the camera turns (same contract as the home hero, .sun-stage.is-live) */
.sc-sun.is-live { background-image: none !important; }
/* the disc and the corona dimmed (E6): the twisted structure, the step's only subject, stands out in white and cyan; the
   same veil on the fixed pictures of the Sun (step 01, and step 02 without the live stage) */
:root {
  --sc-sun-veil:
    radial-gradient(ellipse 34% 30% at 50% 46%, rgba(10, 8, 27, 0) 0%, rgba(10, 8, 27, 0) 55%, rgba(10, 8, 27, 0.3) 100%),
    linear-gradient(180deg, rgba(10, 8, 27, 0.42) 0%, rgba(10, 8, 27, 0.2) 34%, rgba(10, 8, 27, 0.12) 52%, rgba(10, 8, 27, 0.5) 66%, rgba(10, 8, 27, 0.66) 100%);
}
.sc-sun::after, .sc[data-step="1"] .sc-pic::after, html:not(.anim) .sc[data-step="2"] .sc-pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--sc-sun-veil);
}
.sc-sun.is-live canvas { opacity: 1; transition: none; }   /* swapped with the still on the same frame: no dark flash */
.sc-snap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; }
.sc-snap.is-on { visibility: visible; opacity: 1; }
.sc-snap.is-off { visibility: visible; opacity: 0; transition: opacity 0.6s ease; }
.sc-a, .sc-b { z-index: 1; }
.sc-chain { z-index: 2; display: grid; place-items: center; background: #0A081B; }

/* step 02, the free magnetic energy stored by the structure: a qualitative gauge (no value) in the stage's lower band, over the dimmed
   disk, below the structure's feet. Teal / ice palette: the alert red is for alerts only. Fill up to the instability
   threshold (the tick), ice white beyond it, lowered by about half by the eruption (a part of the free energy is released). Moving parts are transforms (no layout, one value per
   frame). Text 12 px (13 px from 900 px), in the text face: compact enough for the 243 px stage of a 360 × 640 phone. */
.sc-energy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 clamp(14px, 6%, 44px) clamp(10px, 4%, 24px); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.sc-energy::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -22px; z-index: -1; background: linear-gradient(180deg, rgba(10, 8, 27, 0) 0%, rgba(10, 8, 27, 0.62) 40%, rgba(10, 8, 27, 0.84) 100%); }
.sc-energy.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.sc-en-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; font: 500 0.75rem/1.35 var(--f-text); letter-spacing: 0.01em; color: var(--ink); }
.sc-en-i { font-weight: 400; color: var(--ink-2); }
.sc-en-bar { position: relative; display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(240, 252, 255, 0.16); }
.sc-en-bar i { position: absolute; top: 0; bottom: 0; display: block; transform-origin: 0 50%; will-change: transform; }
.sc-en-f { left: 0; width: 80%; border-radius: 3px 0 0 3px; background: var(--cyan); }
.sc-en-o { left: 80%; width: 20%; border-radius: 0 3px 3px 0; background: var(--ink); }
.sc-en-t { left: calc(80% - 1px); width: 2px; top: -4px !important; bottom: -4px !important; background: var(--ink); }
.sc-en-k { width: 80%; margin-top: 6px; text-align: right; font: 400 0.75rem/1.3 var(--f-text); letter-spacing: 0.01em; color: var(--ink-2); }
.sc-energy[data-state="over"] .sc-en-k, .sc-energy[data-state="edge"] .sc-en-k { color: var(--ink); }
.sc-energy[data-state="release"] .sc-en-f { background: var(--teal); }
@media (min-width: 900px) { .sc-en-h, .sc-en-k { font-size: 0.8125rem; } }
@media (prefers-reduced-motion: reduce) { .sc-energy, .sc-energy.is-on { transition: none; } }

/* step 02, the early alert (docs/build/42-scenario-alerte-precoce.md): our vision of sector alerts, a DOM card at the top of the stage, above
   the structure (its apex stays under it at every size, measured) and clear of the gauge in the lower band. White triangle (the alert red
   is for the alert once confirmed, step 03, and for animation alerts only), the « Vision » badge, the sector, a qualitative uncertainty (no
   number, no horizon). It appears when the gauge reaches the instability threshold: fade and a short slide (none under reduced motion);
   present from the start in every mode without the live story (reduced motion, Save-Data, short screens, no WebGL, full screen). */
.sc-tri {
  display: block; flex: none; width: 22px; height: 19px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 1.6 22.6 19.6H1.4Z' fill='%23F0FCFF' fill-opacity='.12' stroke='%23F0FCFF' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M11 7.2h2v6.4h-2z' fill='%23F0FCFF'/%3E%3Ccircle cx='12' cy='16.3' r='1.15' fill='%23F0FCFF'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sc-early {
  --pad: clamp(12px, 4%, 36px);
  position: absolute; z-index: 4; top: clamp(10px, 3.4%, 22px); left: var(--pad); width: min(calc(100% - 2 * var(--pad)), 392px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 11px; align-items: start; padding: 10px 14px 11px 12px;
  border: 1px solid var(--line-3); border-radius: 10px; background: rgba(10, 8, 27, 0.86); color: var(--ink); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0);
  transition: opacity 0.5s ease, transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.sc-early.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.5s var(--ease); }
.sc-early-b { display: grid; gap: 3px; min-width: 0; }
.sc-early-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.sc-early-h b { font-weight: 600; color: var(--ink); }
.sc-early-h .badge { margin-left: auto; padding: 1px 8px 1px 7px; gap: 6px; font-size: 0.75rem; letter-spacing: 0.06em; }
.sc-early-t { font: 400 0.8125rem/1.4 var(--f-text); color: var(--ink-2); }
.sc-early-t b { font-weight: 500; color: var(--ink); }
.sc-early-u { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font: 400 0.75rem/1.4 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.sc-early-u b { font-weight: 500; color: var(--ink); }
/* the uncertainty, qualitative: a wide band between two ticks (the band of the instrument at step 03, still wide) */
.sc-early-m { display: block; flex: none; width: 46px; height: 8px; border-left: 1px solid var(--cyan); border-right: 1px solid var(--cyan); background: linear-gradient(rgba(41, 221, 218, 0.34), rgba(41, 221, 218, 0.34)) center / 100% 4px no-repeat; }
html[lang="fr"] .sc-early { hyphens: manual; -webkit-hyphens: manual; }
/* a small stage (phones): the head and the uncertainty only, the sentence is in the text column and in the readout */
@container scstage (max-width: 340px) {                /* small phones, landscape phones: the head and the uncertainty only */
  .sc-early { top: 8px; padding: 6px 10px 7px; gap: 0 9px; }
  .sc-early-t, .sc-early-m { display: none; }
  .sc-early-h { letter-spacing: 0.06em; }
}
@media (min-width: 768px) { @container scstage (max-width: 640px) { .sc-early-t { display: none; } } }   /* 4:3 stages this small (1024 × 768): the structure's apex is at 28 % */
@media (min-width: 900px) { .sc-early-t { font-size: 0.875rem; } }
/* without JavaScript: a block under the picture, both sectors named */
html:not(.js) .sc-early { position: static; width: auto; max-width: 560px; margin-top: 10px; opacity: 1; visibility: visible; transform: none; transition: none; }
html:not(.js) .sc-early-t { font-size: 0.9375rem; }
html:not(.js) .sc-early-h { text-transform: none; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) { .sc-early, .sc-early.is-on { transition: none; transform: none; } }

/* the chain (step 07): three vignettes joined by plain rules, no arrowhead; under them (side by side), the two outcomes */
.sc-chain-box { display: grid; justify-items: center; align-content: center; gap: clamp(18px, 4%, 34px); width: 100%; }
.sc-chain-in { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 8px; width: 80%; }
.sc-recap { display: none; width: 76%; margin: 0; }
.sc-recap-r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.6fr); align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font: 400 0.75rem/1.35 var(--f-mono); color: var(--ink-2); }
.sc-recap-r:last-child { border-bottom: 1px solid var(--line); }
.sc-recap-l { display: grid; gap: 2px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.sc-recap-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-recap-g > span { display: block; }
.sc-recap-g .sc-g { margin-top: 0; }
.sc-chain[data-choice="act"] .sc-recap-r[data-c="act"] .sc-mine, .sc-chain[data-choice="none"] .sc-recap-r[data-c="none"] .sc-mine { display: block; }
.sc-v { display: grid; grid-template-columns: 30% 1fr; align-items: center; gap: 14px; width: 100%; }
.sc-v-img { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--line-2); border-radius: 8px; background: #0A081B center / cover no-repeat; }
.sc-v-t { display: grid; align-content: start; gap: 4px; font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.sc-v-t small { font: 400 0.75rem/1.4 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.sc-v-rule { display: block; width: 1px; height: 16px; margin-left: calc(-70% + 15%); background: linear-gradient(var(--teal), rgba(41, 221, 218, 0.25)); }

/* caption, pause, full screen */
.sc-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; width: min(100%, 52svh); margin: 10px auto 0; }
.sc-cap { flex: 1 1 260px; min-width: 0; }
.sc-cap b { color: var(--ink-2); font-weight: 500; }
.sc-vision { color: var(--ink-2); }
.sc-vision[hidden] { display: none; }
.sc-vision .badge { display: inline-flex; vertical-align: 1px; margin: 0 6px 0 4px; padding: 1px 8px 1px 7px; gap: 6px; font-size: 0.75rem; }
.sc-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tools .skx-btn[hidden] { display: none; }

@media (min-width: 768px) {
  .sc-chain-in { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0; width: 88%; }
  .sc-v { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; }
  .sc-v-t { min-height: calc(0.75rem * 1.3 + 4px + 3 * 0.75rem * 1.4); }
  .sc-v-t small { max-width: 18ch; margin-inline: auto; }
  .sc-v-rule { width: 28px; height: 1px; margin: 0 0 calc(12px + 0.75rem * 1.3 + 4px + 3 * 0.75rem * 1.4); background: linear-gradient(90deg, var(--teal), rgba(41, 221, 218, 0.25)); }
}
.sc-side > .sc-cap { margin-top: 18px; }

/* ---------- Stacked (phones, portrait tablets) ---------- */
@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }   /* the height of the sticky bar: the keyboard focus never lands under it (PA-03) */
  html.sc-on .sc[data-step="1"] .sc-fig, html:not(.sc-on)[data-step0="1"] .sc-fig { display: none; }   /* step 01: the text and the two sectors first, no engine */
  .sc[data-step="1"] .sc-side > .sc-cap { display: none; }                                              /* no figure at step 01: no caption */
  /* steps 06 and 07 (E6): the payoff in the first view. 06: the title, then the comparison (its sentence after it);
     07: the text and the single call to action first, the chain under them */
  .sc[data-step="6"] .sc-cmp thead th { letter-spacing: 0.02em; }
  .sc[data-step="6"] .sc-sector, .sc[data-step="7"] .sc-sector, .sc[data-step="6"] .sc-step[data-step="6"] .sc-idx { display: none; }
  .sc-step[data-step="6"]:not([hidden]) { display: flex; flex-direction: column; }
  .sc-step[data-step="6"] > .sc-h { margin-bottom: 4px; }
  .sc-step[data-step="6"] > .sc-p { order: 2; margin-top: 12px; }
  .sc-step[data-step="6"] > .sc-src, .sc-step[data-step="6"] > noscript { order: 3; }
  .sc-step[data-step="6"] .sc-cmp { margin-top: 8px; }
  .sc-step[data-step="6"] .sc-cmp caption { padding-bottom: 4px; }
  .sc-cmp th, .sc-cmp td { padding: 6px 8px 7px; }
  .sc-cmp thead th { padding-top: 2px; padding-bottom: 4px; }
  .sc-cmp .sc-g { margin-top: 6px; }
  .sc-cmp tbody th small, .sc-cmp td .sc-s { line-height: 1.25; }
  .sc[data-step="7"] { grid-template-areas: "side" "fig"; }
  .sc[data-step="7"] .sc-fig { margin-top: 18px; }
  .sc-rail { width: min(100%, 52svh); margin: 0 auto 6px; }
  .sc-rail ol { gap: 3px; }
  .sc-rail a { justify-content: center; padding: 10px 0 12px; min-height: 44px; }   /* 44 px touch targets, the bar stays thin */
  .sc-rail-n { font-size: 0.75rem; }
  .sc-step { padding-top: 14px; }
  .sc-nav { position: sticky; bottom: 0; z-index: 6; margin-top: 16px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: var(--bg); }
  .sc-nav .btn { min-width: 0; flex: 0 1 auto; padding: 0 18px; }
  .sc-tools .motion-btn, .sc-tools .skx-btn { min-height: 44px; padding: 0 12px; }
  .sc-bar { justify-content: flex-end; margin-top: 8px; }
  .sc-bar > .sc-cap { display: none; }                  /* stacked, the caption goes after the text (scenario.js): never shown here first */
}
/* phones, step 06 (E6): a smaller stage with the tools beside it, so that the comparison comes up into the first view */
@media (max-width: 767px) {
  .sc[data-step="6"] .sc-fig { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: end; }
  .sc[data-step="6"] .sc-rail { grid-column: 1 / -1; width: min(100vw - 2 * var(--gut), 52svh); }
  .sc[data-step="6"] .sc-stage { width: min(100vw - 2 * var(--gut) - 54px, 32svh); margin: 0; }
  .sc[data-step="6"] .sc-rail a { min-height: 44px; margin-block: -5px; padding: 10px 0 14px; }
  .sc[data-step="6"] .sc-rail a::after { bottom: 7px; }
  .sc[data-step="6"] .sc-bar { width: auto; margin: 0 0 0 10px; }
  .sc[data-step="6"] .sc-tools { flex-direction: column; }
  /* satellites: low orbit's own phone frame (4:3, full width: its labels need ≥ 330 px across), the tools under it */
  html[data-role="satellite"] .sc[data-step="6"] .sc-fig { display: block; }
  html[data-role="satellite"] .sc[data-step="6"] .sc-stage { width: 100%; aspect-ratio: 4 / 3; margin-inline: auto; }
  html[data-role="satellite"] .sc[data-step="6"] .sc-bar { width: 100%; margin: 6px 0 0; }
  html[data-role="satellite"] .sc[data-step="6"] .sc-tools { flex-direction: row; }
}
/* short phones (360 × 640): a smaller stage and a thinner rail, so that the title comes under the figure */
@media (max-width: 899px) and (max-height: 699px) {
  .sc-stage, .sc-bar, .sc-rail { width: min(100%, 38svh); }
  .sc-rail a { min-height: 44px; margin-block: -6px; padding: 12px 0 14px; }   /* 44 px target, 32 px of layout */
  .sc-rail a::after { bottom: 8px; }
  .sc-bar { margin-top: 4px; }
  .sc-step { padding-top: 8px; }
  .sc-h { margin: 6px 0 8px; }
}
/* stacked tablets (768–899 px): the 4:3 stage of the desktop scenes (the engines switch to 1:1 under 768 px) */
@media (min-width: 768px) and (max-width: 899px) { .sc-stage { aspect-ratio: 4 / 3; } .sc-stage, .sc-bar, .sc-rail { width: min(100%, calc(52svh * 4 / 3)); } }
@media (max-width: 479px) {
  /* narrow phones: the two tools as icons (their text kept for assistive technology) */
  .sc-tools .motion-btn, .sc-tools .skx-btn { width: 44px; padding: 0; justify-content: center; }
  .sc-tools .motion-btn > span, .sc-tools .skx-btn .skx-btn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* …except the Full screen button, steps 02 to 05 (the figure is live under the title): it keeps its name next to the pause icon. It is the way into
     the full-screen view for a link shared with ?role= (a touch on a sector card opens it by itself, scenario.js); an outline, never a filled button */
  .sc:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .sc-tools .skx-btn { width: auto; padding: 0 14px 0 12px; justify-content: flex-start; }
  .sc:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .sc-tools .skx-btn .skx-btn-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .sc-cmp th, .sc-cmp td { padding: 6px 6px 7px; }
  .sc-cmp thead th:first-child { width: 34%; }
  .sc-cmp tbody th small { font-size: 0.75rem; }
  .sc-cmp td .sc-val { font-size: 0.875rem; }
  .sc-cmp-n { display: none; }                          /* phones: the row numbers go (decorative), the labels get their width */
  .sc-cmp-h .sc-g { display: none; }                    /* and the hazard's plain bar (no reference: decorative) */
}

/* ---------- Side by side (≥ 900 px): text column on the left, figure on the right, one screen ---------- */
@media (min-width: 900px) {
  .sc {
    grid-template-columns: minmax(340px, 4.4fr) minmax(0, 7.6fr); grid-template-areas: "side fig"; column-gap: clamp(28px, 3.4vw, 56px);
    padding-top: var(--sc-top); min-height: 100svh;
  }
  /* the column is one screen high: the step's text (.sc-steps) is the only thing that scrolls, and only when it does not fit; the sector
     line, the values of the figure and Back / Next are never covered (a sticky bar used to hide the tail of the values, V1 of docs/build/40) */
  html.js .sc > .sc-side { position: sticky; top: var(--sc-top); align-self: start; height: calc(100svh - var(--sc-top)); min-height: 0; }
  html.js .sc > .sc-side > :not(.sc-steps) { flex: none; }
  html.js .sc > .sc-side .sc-steps {
    flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
    padding-inline: 10px; margin-inline: -10px;   /* room for the focus ring of the headings */
  }
  html.js .sc > .sc-side .sc-steps.is-cut { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }
  html.js .sc > .sc-side .sc-steps:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 4px; }
  .sc-nav { margin-top: auto; background: var(--bg); }
  .sc-fig { position: sticky; top: var(--sc-top); align-self: start; }
  .sc-stage, .sc-bar, .sc-rail { width: min(100%, calc((100svh - var(--sc-top) - var(--sc-railh) - var(--sc-barh) - 26px) * 4 / 3)); }
  .sc-rail { margin: 0 auto 8px; }
  .sc-stage { aspect-ratio: 4 / 3; }
  .sc-rail-t { display: block; }
  .sc-step { padding-top: 8px; }
  .sc-cards { grid-template-columns: 1fr 1fr; }
  .sc-card { grid-template-columns: 1fr; align-content: start; justify-items: start; padding: 12px; }
  .sc-card-img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}
@media (min-width: 1280px) { .sc-rail-t { position: static; width: auto; height: auto; margin: 0; clip: auto; display: block; } }
@media (min-width: 900px) and (max-width: 1279px) {
  .sc-rail a[aria-current] .sc-rail-t { position: static; width: auto; height: auto; margin: 0; clip: auto; display: block; }
  /* the current step takes the room of its name (seven equal columns cut « 04 Précision » at 1024 px, V3 of docs/build/40) */
  .sc-rail ol { display: flex; gap: 4px; }
  .sc-rail li { flex: 1 1 0; min-width: 0; }
  .sc-rail li:has(> a[aria-current]) { flex: 2.6 1 0; }
}
/* side by side on short screens (1280 × 800): the comparison and the outcome stay above Back / Next */
@media (min-width: 900px) and (max-height: 860px) {
  .sc-step { padding-top: 4px; }
  .sc-h { margin: 6px 0 8px; }
  .sc-step[data-step="6"] .sc-p, .sc-step[data-step="7"] .sc-p { line-height: 1.5; }
  .sc-cmp { margin-top: 10px; }
  .sc-cmp th, .sc-cmp td { padding: 5px 10px 6px; }
  .sc-cmp thead th { padding-top: 2px; padding-bottom: 4px; }
  .sc-cmp .sc-g { margin-top: 5px; }
  .sc-cmp tbody th small, .sc-cmp td .sc-s { line-height: 1.25; }
  .sc-step[data-step="6"] .sc-src { margin-top: 6px; line-height: 1.4; }
  .sc-nav { padding-top: 8px; padding-bottom: 8px; }
  /* the caption (illustrative, note, the alert symbol's Vision line) stays within the screen at 1366 × 768 */
  .sc-bar { margin-top: 6px; }
  .sc-cap { line-height: 1.45; }
  /* steps 03 and 04 (values of the figure under the text): tighter, so that the French text fits above them at 1280 × 800 and 1366 × 768 */
  .sc-p { line-height: 1.5; }
  .sc-keys { margin-top: 10px; gap: 4px; }
  .sc-src { margin-top: 8px; line-height: 1.45; }
  .sc-scrub { margin-top: 8px; }
  .sc-ro { margin-top: 6px; }
  .sc-ro > div { padding: 5px 0 4px; }
  .sc-ro dd { margin-top: 1px; }
  /* step 07: the outcome, the call to action and the link to the other sector above Back / Next at 1280 × 800 */
  .sc-step[data-step="7"] .sc-who { margin-top: 10px; }
  .sc-pilot { margin-top: 10px; }
  .sc-cta { margin-top: 12px; }
  .sc-step[data-step="7"] .sc-vis--end { margin-top: 12px; }
}
/* ---------- Phones in landscape (≤ 520 px high): side by side as well, a compact figure (fixed figures there) ---------- */
@media (min-width: 640px) and (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
  .sc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "side fig"; column-gap: 24px; padding-top: calc(var(--hdr) + 8px); }
  .sc[data-step="1"] .sc-fig { display: block; }
  .sc-fig { position: sticky; top: calc(var(--hdr) + 8px); align-self: start; }
  .sc-stage { aspect-ratio: 4 / 3; }
  .sc-stage, .sc-rail, .sc-bar { width: min(100%, calc((100svh - var(--hdr) - 100px) * 4 / 3)); }
}

/* ---------- No JavaScript: the seven steps one after the other, each with its fixed figure ---------- */
.sc-still { display: none; margin: 22px 0 0; max-width: 720px; }
html:not(.js) .sc-still { display: block; }
html:not(.js) .sc { display: block; width: min(100% - 2 * var(--gut), 820px); }
/* below 1180 px the header of the site scrolls with the page without JavaScript (site.css): no room to keep for it */
@media (max-width: 1179px) { html:not(.js) .sc { padding-top: 0; } }
html:not(.js) .sc-step { padding: 40px 0; border-bottom: 1px solid var(--line); }
html:not(.js) [data-role="grid"]::before, html:not(.js) [data-role="satellite"]::before {
  display: block; margin-bottom: 6px; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
}
html:not(.js) .sc-p[data-role="grid"]::before, html:not(.js) .sc-acts[data-role="grid"]::before, html:not(.js) .sc-cmp[data-role="grid"] caption::before { content: "Power grid operator"; }
html:not(.js) .sc-p[data-role="satellite"]::before, html:not(.js) .sc-acts[data-role="satellite"]::before, html:not(.js) .sc-cmp[data-role="satellite"] caption::before { content: "Satellite operator"; }
html:not(.js) .sc-cmp caption::before { display: block; color: var(--teal); }
html[lang="fr"]:not(.js) .sc-p[data-role="grid"]::before, html[lang="fr"]:not(.js) .sc-acts[data-role="grid"]::before, html[lang="fr"]:not(.js) .sc-cmp[data-role="grid"] caption::before { content: "Gestionnaire de réseau électrique"; }
html[lang="fr"]:not(.js) .sc-p[data-role="satellite"]::before, html[lang="fr"]:not(.js) .sc-acts[data-role="satellite"]::before, html[lang="fr"]:not(.js) .sc-cmp[data-role="satellite"] caption::before { content: "Opérateur de satellites"; }
html:not(.js) .sc-still img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--sc-r); background: #0A081B; }
html:not(.js) .sc-still .fig-cap { margin-top: 8px; }
html:not(.js) .sc-choice { display: none; }
html:not(.js) .sc-g { display: none; }

/* ---------- The way back to the journey page, under the player ---------- */
.sc-end {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; width: min(100% - 2 * var(--gut), 1440px); margin: 40px auto 0; padding: 14px 0 44px;
  border-top: 1px solid var(--line); font: 400 0.8125rem/1.5 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-3);
}
html:not(.js) .sc-end { margin-top: 8px; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .sc-layer, .sc-sun.is-live canvas, .sc-snap.is-off, .sc-g .b, .sc-g .r, .sc-acts-n { transition: none; }
}
.sc-pause::before { flex: none; }
html.capture body::after { display: none; }

/* full screen (SkeionExpand): the text column goes to the side panel; the stage keeps its aspect */
.skx-panel .sc-side, .skx-panel .sc-bar { flex: none; }
.skx-panel .sc-side { min-height: 0; }
.skx-panel .sc-nav { position: sticky; bottom: -32px; margin-top: 8px; background: var(--bg); }
.skx-panel .sc-nav .btn { min-width: clamp(64px, calc((100% - 80px) / 2), 112px); padding: 0 16px; }   /* the panel is 300 px wide at 1024 px: Back, « 3 / 7 » and Next share one line (V4) */
.skx-panel .sc-step { padding-top: 0; }
.skx-panel .sc-bar { width: auto; margin: 0; }