/* SKEION — page « From the Sun to power grids »: /sun-to-grid.html (FR /fr/eruption-solaire.html). Loaded after
   /assets/site/site.css (tokens, type, buttons, badges, header, footer, page head). One section « Parcours »: native scroll, a
   sticky figure next to (side by side: desktop, landscape tablets) or above (stacked: phones, portrait tablets up to 1199 px)
   the text; no scroll capture. Live figure only under html.anim (assets/js/journey.js, same layout query; the class is set
   before the first paint by assets/site/anim-flag.js); otherwise each step carries a fixed, captioned figure. After the
   journey: the same story in readable text, questions, glossary, sources (the page's SEO content, docs/build/38).
   The sticky offsets use the site header's own height (--hdr, a fixed header of 64 px, 76 px from 1024 px).
   Charter: dark grounds, teal / cyan / blue accents, #5BB4EC for severity, no red or orange. */

:root { --jr-top: calc(var(--hdr) + 14px); --jr-r: 14px; --jr-below: 220px; }   /* below: rail, values, caption (side by side) */

/* ---------- Page head (the site's .page-head): key points under the H1, then the invitation to scroll ---------- */
.jr-key { margin-top: 26px; max-width: 62ch; }
.jr-key-l { font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.jr-key-t { margin-top: 10px; max-width: 62ch; }
.jr-key-t, .jr-go { color: var(--ink-2); }
.jr-go { margin-top: 18px; max-width: 58ch; font-size: 1rem; line-height: 1.6; }
.jr-intro-note { margin-top: 14px; font: 400 0.8125rem/1.5 var(--f-mono); letter-spacing: 0.03em; color: var(--ink-3); }
/* the invitation to the guided scenario (a framed link, docs/build/39-scenario-promotion.md): beside the intro text from 1024 px (it adds
   no height to the head, the journey keeps its place in the first screen), under it on narrower screens; then two small links to a sector */
.jr-after { display: grid; gap: 22px 32px; margin-top: 18px; }
.jr-after .jr-go { margin-top: 0; }
.jr-invite { max-width: 62ch; }
.jr-invite .invite-copy { max-width: 88%; }   /* the title stays on one line next to the picture (it fades into the page colour under the text) */
@media (min-width: 1024px) { .jr-after { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.jr-invite-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 2px; font: 400 0.8125rem/1.5 var(--f-mono); letter-spacing: 0.03em; color: var(--ink-3); }

/* ---------- Section and grid ---------- */
.jr { position: relative; border-top: 1px solid var(--line); }
.jr-wrap { width: min(100% - 2 * var(--gut), 1360px); margin-inline: auto; position: relative; }
html.anim .jr-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
html.anim .jr-sticky { grid-row: 1; }
html.anim .jr-steps { grid-row: 2; }
html:not(.anim) .jr-sticky { display: none; }
html:not(.anim) .jr-wrap { width: min(100% - 2 * var(--gut), var(--maxw)); }
html:not(.anim) .jr-steps { max-width: 760px; }
@media (min-width: 1024px) { html:not(.anim) .jr-steps { margin-left: var(--idx); } }

/* ---------- Sticky figure ---------- */
.jr-sticky { position: sticky; top: var(--hdr); z-index: 5; background: var(--bg); padding: 8px 0 10px; }
.jr-fig { margin: 0; }
.jr-stage {
  position: relative; overflow: hidden; isolation: isolate; margin-inline: auto;
  width: min(100%, 50svh); aspect-ratio: 1 / 1;
  border: 1px solid var(--line); border-radius: var(--jr-r); background: #0A081B;
}
.jr-layer { position: absolute; inset: 0; transform-origin: 0 0; will-change: opacity, transform; }
.jr-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jr-layer.is-parked { visibility: hidden; transform: translate3d(0, -400%, 0) !important; opacity: 0 !important; }
.jr-sun canvas { opacity: 0; transform-origin: 0 0; }
/* layers carried by a camera move (CSS transform; for the sun, on its canvas: the host keeps the stage box for the motion
   bus): soft edges, so that a canvas border never cuts the picture; the fade width (--jm) grows from 0 with the move, so
   that nothing changes when the move starts */
.jr-sun.is-carried canvas, .jr-b.is-carried {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--jm, 0%), #000 calc(100% - var(--jm, 0%)), transparent), linear-gradient(180deg, transparent, #000 var(--jm, 0%), #000 calc(100% - var(--jm, 0%)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent, #000 var(--jm, 0%), #000 calc(100% - var(--jm, 0%)), transparent), linear-gradient(180deg, transparent, #000 var(--jm, 0%), #000 calc(100% - var(--jm, 0%)), transparent);
}
.jr-sun.is-live canvas { opacity: 1; transition: opacity 0.5s ease; }
.jr-snap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; }
.jr-snap.is-on { visibility: visible; opacity: 1; }
.jr-snap.is-off { visibility: visible; opacity: 0; transition: opacity 0.6s ease; }
.jr-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; margin: 0;
  font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  transition: opacity 0.4s ease;
}
.jr.is-ready .jr-loading { opacity: 0; visibility: hidden; }

/* Chain (step 06): three vignettes joined by plain rules, no arrowhead */
.jr-chain { z-index: 2; display: grid; place-items: center; background: #0A081B; }
.jr-chain-in { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 8px; width: 78%; }
.jr-v { display: grid; grid-template-columns: 30% 1fr; align-items: center; gap: 14px; width: 100%; }
.jr-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;
}
.jr-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); }
.jr-v-t small { font: 400 0.75rem/1.4 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.jr-v-rule { display: block; width: 1px; height: 18px; margin-left: calc(-70% + 15%); background: linear-gradient(var(--teal), rgba(41, 221, 218, 0.25)); }

/* Rail of steps: number, name, progress bar; the current one in full colour */
.jr-rail { margin: 0 auto 8px; width: min(100%, 50svh); }
.jr-rail ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.jr-rail a {
  display: grid; grid-template-rows: auto auto; gap: 5px; min-height: 30px; padding: 4px 0 2px; text-decoration: none;
  font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3);
}
.jr-rail-t { display: none; text-transform: uppercase; }
.jr-rail-b { display: block; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.jr-rail-b i { display: block; height: 100%; background: var(--teal); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.jr-rail a[aria-current] { color: var(--ink); }
@media (hover: hover) { .jr-rail a:hover { color: var(--ink); } }

/* Readouts and pause under the stage */
.jr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; width: min(100%, 50svh); margin: 8px auto 0; min-height: 44px; }
.jr-ro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; flex: 1; min-width: 0; }
.jr-ro div { min-width: 0; }
.jr-ro div { display: flex; flex-direction: column; justify-content: flex-end; }
.jr-ro div:only-child { grid-column: 1 / -1; }   /* a single value (step 01) takes the whole row */
.jr-ro dt { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-3); }
.jr-ro dd { margin: 2px 0 0; font: 500 0.9375rem/1.2 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-ro div:nth-child(n + 3) { display: none; }
.jr-pause { flex: none; }
.motion-paused .jr-pause::before { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* Caption. Stacked: « Illustrative · <short note> » and the Vision badge on one line (reserved height: no jump when the
   badge appears). Side by side: « Illustrative visualisation. <note> » and the Vision row, height reserved for both. */
.jr-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; width: min(100%, 50svh); min-height: 26px; margin: 6px auto 0; }
.jr-cap b { color: var(--ink-2); font-weight: 500; }
.jr-cap-d, .jr-vision-t { display: none; }
.jr-cap-t { min-width: 0; }
.jr-vision { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.jr-vision[hidden] { display: flex; visibility: hidden; }
.jr-vision .badge { padding: 3px 9px 3px 8px; gap: 6px; }
.jr-h:focus { outline: none; }
.jr-h:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 4px; }

/* French, short texts: no automatic hyphenation (« magné-tique », « trans-formateurs »); the long paragraphs of « In detail » and the questions keep
   the automatic breaks of site.css (V5 of docs/build/40, as the guided scenario does) */
html[lang="fr"] .jr-key-t, html[lang="fr"] .jr-go, html[lang="fr"] .jr-intro-note, html[lang="fr"] .jr-h, html[lang="fr"] .jr-p, html[lang="fr"] .jr-src,
html[lang="fr"] .jr-ro, html[lang="fr"] .jr-cap, html[lang="fr"] .jr-v-t, html[lang="fr"] .jr-still .fig-cap { hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Steps (text) ---------- */
.jr-step { position: relative; }
html.anim .jr-step { min-height: 92svh; padding: 10svh 0 6svh; }
html.anim .jr-step--long { min-height: 150svh; }
html.anim .jr-step--mid { min-height: 120svh; }
html.anim .jr-step--end { min-height: 70svh; padding-bottom: 12svh; }
html.anim .jr-step:first-child { padding-top: 4svh; }
html:not(.anim) .jr-step { padding: clamp(40px, 8svh, 72px) 0; border-bottom: 1px solid var(--line); }
html:not(.anim) .jr-step:last-child { border-bottom: 0; }
.jr-idx { font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); font-variant-numeric: tabular-nums; }
.jr-h {
  margin: 12px 0 16px; max-width: 18ch; text-wrap: balance;
  font: 600 clamp(26px, calc(1.3vw + 19px), 40px)/1.08 var(--f-display); letter-spacing: -0.024em; color: var(--ink);
}
.jr-p { max-width: 46ch; font-size: clamp(16px, calc(0.2vw + 15px), 18px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.jr-p + .jr-p { margin-top: 14px; }
.jr-p--key { color: var(--ink); }
.jr-p--fact { font: 400 0.875rem/1.55 var(--f-mono); letter-spacing: 0.01em; color: var(--ink-2); }
.jr-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1rem; }
.jr-src { margin-top: 16px; max-width: 52ch; font: 400 0.8125rem/1.55 var(--f-mono); color: var(--ink-3); }
.jr-cta { margin-top: 26px; }
.jr-step--end .jr-p { color: var(--ink); }

/* fixed figures (reduced motion, no JS, short screens) */
.jr-still { margin: 28px 0 0; display: none; }
html:not(.anim) .jr-still { display: block; }
.jr-still img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--jr-r); background: #0A081B; }
.jr-still .fig-cap { margin-top: 10px; }

/* ---------- Stacked (phones, portrait tablets): figure stuck under the header, text below ---------- */
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait) {
  html.anim .jr-steps { padding-top: 6px; }
  /* the text slides under the sticky figure: a short fade instead of a cut line */
  html.anim .jr-sticky::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none; background: linear-gradient(var(--bg), rgba(10, 8, 27, 0)); }
  .jr-pause { min-height: 44px; padding: 0 10px; gap: 7px; letter-spacing: 0.04em; }
  .jr-ro { gap: 0 10px; }
  html.anim .jr-step { min-height: 72svh; padding: 3svh 0 8svh; }
  html.anim .jr-step--long { min-height: 130svh; }
  html.anim .jr-step--mid { min-height: 100svh; }
  html.anim .jr-step--end { min-height: 60svh; }
  .jr-h { font-size: clamp(24px, 6.4vw, 30px); }
  .jr-chain-in { width: 84%; }
  .jr-rail ol { gap: 6px; }
  .jr-rail a { min-height: 44px; margin-block: -9px; padding: 11px 0; }   /* 44 px target, 26 px of layout (PA-04) */
  .jr-cap.no-vision .jr-vision { display: none; }   /* steps 01, 02, 06: no alert, the note has the whole line */
}
/* stacked, short screens (< 700 px high): a smaller figure leaves room for the text */
@media (max-width: 767px) and (max-height: 699px) {
  .jr-stage { width: min(100%, 40svh); }
  .jr-rail, .jr-bar, .jr-cap { width: 100%; }   /* the values and the caption keep the whole width (one line) */
}
@media (max-width: 374px) {
  /* narrow phones: the pause control as an icon (its text kept for assistive technology), room for the values,
     whose labels may take two lines (height reserved: the text below never moves); « Magnetopause » needs 90 px (V2 of docs/build/40) */
  .jr-pause { padding: 0 13px; }
  .jr-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jr-bar { min-height: 52px; }
}

/* ---------- Side by side (desktop, landscape tablets): text column on the left, sticky figure on the right ---------- */
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  html.anim .jr-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 64px); }
  html.anim .jr-sticky {
    grid-column: 2; grid-row: 1; align-self: start; top: var(--jr-top); padding: 0;
    height: calc(100svh - var(--jr-top) - 14px); display: flex; flex-direction: column; justify-content: center; background: none;
  }
  html.anim .jr-steps { grid-column: 1; grid-row: 1; }
  html.anim .jr-step { min-height: 104svh; padding: 34svh 0 8svh; }
  html.anim .jr-step:first-child { padding-top: 26svh; }
  html.anim .jr-step--long { min-height: 175svh; }
  html.anim .jr-step--mid { min-height: 130svh; }
  html.anim .jr-step--end { min-height: 100svh; padding-bottom: 30svh; }
  html.anim .jr-step-in { position: sticky; top: calc(var(--jr-top) + 22svh); }
  .jr-stage, .jr-rail, .jr-bar, .jr-cap { width: min(100%, calc((100svh - var(--jr-top) - var(--jr-below)) * 4 / 3)); }
  .jr-stage { aspect-ratio: 4 / 3; }
  .jr-rail-t { display: inline; }
  .jr-rail a { grid-template-rows: auto auto; gap: 6px; }
  .jr-rail-n { margin-right: 6px; }
  .jr-ro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jr-ro div:nth-child(n + 3) { display: block; }
  .jr-bar { min-height: 52px; }   /* a value label on two lines does not move the figure */
  /* constant height (note up to 3 lines + the Vision row, kept in place when hidden): the centred figure never moves */
  .jr-cap { display: grid; align-content: start; justify-content: stretch; gap: 6px; margin: 10px auto 0; min-height: calc(3 * 1.55em + 6px + 28px); }
  .jr-cap-d, .jr-vision-t { display: inline; }
  .jr-cap-m { display: none; }
  .jr-vision .badge { padding: 5px 11px 5px 9px; gap: 8px; }
  .jr-chain-in { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0; width: 88%; }
  .jr-v { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; }
  .jr-v-t { min-height: calc(0.75rem * 1.3 + 4px + 3 * 0.75rem * 1.4); }   /* three lines for every vignette: aligned images */
  .jr-v-t small { max-width: 18ch; margin-inline: auto; }
  .jr-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)); }
}
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .jr-rail-t { display: none; }
  .jr-rail a[aria-current] .jr-rail-t { display: inline; }
  .jr-ro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-ro div:nth-child(n + 3) { display: none; }
}
/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .jr-sun.is-live canvas, .jr-snap.is-off, .jr-loading { transition: none; }
}
html.capture body::after { display: none; }

/* sun unavailable (no WebGL, Save-Data, low-end device): its still, never under a live canvas */
.jr-sun.sun-fallback { background: #0A081B center / cover no-repeat; background-image: url("/assets/img/journey/journey-eruption.jpg"); background-image: image-set(url("/assets/img/journey/journey-eruption.avif") type("image/avif"), url("/assets/img/journey/journey-eruption.jpg") type("image/jpeg")); }
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait) {
  .jr-sun.sun-fallback { background-image: url("/assets/img/journey/journey-eruption-mobile.jpg"); background-image: image-set(url("/assets/img/journey/journey-eruption-mobile.avif") type("image/avif"), url("/assets/img/journey/journey-eruption-mobile.jpg") type("image/jpeg")); }
}

/* ---------- After the journey: the story in readable text, questions, key terms, sources ---------- */
.jr-det { display: grid; gap: clamp(28px, 3vw, 40px); }
.jr-det > article { padding-top: 22px; border-top: 1px solid var(--line); }
.jr-det h3 { font: 500 clamp(20px, calc(0.7vw + 16px), 26px)/1.2 var(--f-display); letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; max-width: 30ch; }
.jr-det p { margin-top: 12px; max-width: 62ch; font-size: clamp(16px, calc(0.23vw + 14.8px), 18px); line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.jr-det p strong { font-weight: 500; color: var(--ink); }
.jr-det .jr-more { margin-top: 12px; font: 400 0.8125rem/1.6 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-3); }

/* the rules below are the ones of assets/site/pages/science.css (key terms, questions, references): same components, to be
   moved into site.css at the next pass over the design system */
@media (min-width: 768px) { .terms { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.terms dt { text-transform: none; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--ink); }
.sources a { overflow-wrap: anywhere; }
.faq summary h3 { font: inherit; letter-spacing: inherit; color: inherit; }
.faq .disclosure > div { font-size: clamp(16px, calc(0.23vw + 14.8px), 18px); }
.faq .link--inline { white-space: normal; }
.refs { counter-reset: ref; border-top: 1px solid var(--line); }
.refs > li { counter-increment: ref; position: relative; padding: 14px 0 14px 2.6rem; border-bottom: 1px solid var(--line); font: 400 0.8rem/1.65 var(--f-mono); letter-spacing: 0.02em; color: var(--ink-2); overflow-wrap: anywhere; }
.refs > li::before { content: counter(ref, decimal-leading-zero); content: counter(ref, decimal-leading-zero) / ""; position: absolute; left: 0; top: 14px; font: 500 0.75rem/1.75 var(--f-mono); letter-spacing: 0.1em; color: var(--teal); }
.refs cite { font-style: normal; color: var(--ink); }
.refs a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 12px 0; margin: -12px 0; }
@media (hover: hover) { .refs a:hover { color: var(--teal); } }