/* ============================================================
   SKEION — home page: what belongs to the home only
   (hero and sun, proof band, Fig. 2 poster, section layouts).
   Everything shared by several pages lives in /assets/site/site.css,
   which index.html loads first. Guide: docs/build/13-design-system.md.
   ============================================================ */

/* ============================================================
   01 — HERO
   ============================================================ */
.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: grid; grid-template-rows: 1fr auto; min-height: max(660px, min(100svh, 1000px)); }
.hero-main { position: relative; display: flex; align-items: center; padding: calc(var(--hdr) + 24px) 0 44px; }
.aurora--hero { z-index: -1; }
.aurora--hero::before { inset: -20% 10% 20% -20%; opacity: 0.8; }

.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: var(--idx) minmax(0, 1fr); }
.hero-grid > .hero-copy { grid-column: 2; }   /* the margin column stays empty: no section numbers on the home (audit A16) */
.hero-copy { max-width: min(760px, 56vw); }
.hero-lead { margin-top: 28px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 36px; }

/* Sun stage (docs/build/04-sun-judgement.md §6 and the sun lab page, v2 posters of the "Passe DA" engine;
   adapted: absolute paths, the stage ends above the caption strip and the proof band) */
.sun-stage { position: absolute; top: 0; right: 0; bottom: 68px; width: 60%; z-index: 1; }
.sun-stage canvas, .sun-stage::before {
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%); mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
}
.sun-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.3s;
  background: url("/assets/img/sun/sun-poster-desktop-v5.jpg") right center / auto 100% no-repeat;
  background-image: image-set(url("/assets/img/sun/sun-poster-desktop-v5.avif") type("image/avif"), url("/assets/img/sun/sun-poster-desktop-v5.jpg") type("image/jpeg"));
}
/* the first canvas frame is the poster's picture: instant handover, never a poster under a moving canvas (docs/build/12, 4 Oct) */
.sun-stage.is-live::before { opacity: 0; transition: none; }
.sun-stage canvas { opacity: 0; transition: opacity 0.8s; outline: none; }
.sun-stage.is-live canvas { opacity: 1; transition: none; }

/* Fig. 1 caption: bottom right, on the right edge of the content grid (same edge as the header CTA) */
.hero-cap {
  position: absolute; right: max(var(--gut), calc((100% - var(--maxw)) / 2)); bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 16px; max-width: min(760px, calc(100vw - 680px)); text-align: right;
}
.hero-cap .fig-cap { text-shadow: 0 1px 12px rgba(10, 8, 27, 0.9); text-wrap: balance; }
.hero-cap .fig-t { color: var(--ink-2); }
.hero-cap .fig-d { display: block; }

/* Proof band: 30 years · 3 Nature · CNRS Innovation / RISE */
.proof { position: relative; z-index: 2; padding: 0 0 30px; }
.proof > .rule { margin-bottom: 22px; }
.proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-left: var(--idx); }
.proof-item { font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.proof-item .num {
  display: block; margin-bottom: 10px; font: 500 2.6rem/1 var(--f-display); letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.proof-item .logos { display: flex; align-items: center; gap: 14px; height: 2.6rem; margin-bottom: 10px; }

/* 1024–1179 px: stage pushed right (as in the sun lab page), so the flux rope stays clear of the text */
@media (min-width: 1024px) and (max-width: 1179px) {
  .sun-stage { right: calc(0.62 * (100vw - 1180px)); }
}
/* 1024–1279 px: short caption (no figure title) on two lines: « Fig. 1. Illustrative visualisation — … » */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-copy { max-width: 600px; }
  .hero-cap { max-width: 460px; }
  .hero-cap .fig-t { display: none; }
  .hero-cap .fig-k::after { content: ". "; }
  .hero-cap .fig-d { display: inline; }
}
/* short desktop viewports (e.g. 1280 × 800): keep the proof band inside the first screen */
@media (min-width: 1024px) and (max-height: 860px) {
  .h1 { margin-top: 12px; }
  .hero-lead { margin-top: 20px; }
  .cta-row { margin-top: 26px; }
  .proof { padding-bottom: 22px; }
  .proof > .rule { margin-bottom: 18px; }
}
/* 1024–1279 px wide and short: a slightly smaller title keeps it on 3 lines in French too */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 860px) {
  .hero-copy { max-width: 640px; }
  .h1 { font-size: clamp(40px, 6vw, 76px); }
}
/* laptops of 768 px or less in height (1366 × 768, 1280 × 720): one step smaller, so the whole proof band,
   CNRS Innovation / RISE mention included, stays above the fold */
@media (min-width: 1024px) and (max-height: 780px) {
  .hero { min-height: 100svh; }
  .hero-main { padding: calc(var(--hdr) + 12px) 0 30px; }
  .h1 { font-size: clamp(40px, calc(3.6vw + 22px), 74px); margin-top: 10px; }
  .hero-lead { margin-top: 20px; font-size: 1.1rem; }
  .cta-row { margin-top: 22px; }
  .proof { padding-bottom: 16px; }
  .proof > .rule { margin-bottom: 14px; }
  .proof-item .num { font-size: 2.2rem; margin-bottom: 8px; }
  .proof-item .logos { height: 2.2rem; margin-bottom: 8px; }
  .proof-item .logo-cnrs { height: 36px; }
  .proof-item .logo-rise { height: 19px; }
}

/* ----- 768–1023 px (tablets): the desktop composition, capped in height. The disk sits top right; the copy
   starts below the disk centre, in the left column, so the two never overlap and nothing is left empty. ----- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero-main {
    --sun-h: clamp(420px, 56vw, 540px);
    display: block; padding: calc(0.7 * var(--sun-h)) 0 40px;
  }
  .sun-stage { top: 0; bottom: auto; width: 100%; height: var(--sun-h); }
  .sun-stage canvas, .sun-stage::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 60%, transparent 86%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 60%, transparent 86%);
  }
  .hero-copy { max-width: min(640px, 80vw); }
  .hero-lead { max-width: 52ch; }
  /* caption bottom right, level with the CTA row (the lead ends above it) */
  .hero-cap { bottom: 14px; right: var(--gut); max-width: calc(40vw - var(--gut)); gap: 12px; }
  .hero-cap .fig-t { display: none; }
  .hero-cap .fig-k::after { content: ". "; }
  .hero-cap .fig-d { display: inline; }
}
/* tablets and phones: icon-only pause control (the label stays for screen readers) */
@media (max-width: 1023px) {
  .hero-cap .motion-btn { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .hero-cap .motion-btn span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ----- < 768 px: "limb-band" — the limb is a horizon above the title, never under it. The caption and the
   pause control sit on the faded bottom edge of the band, so the title follows the figure at once. ----- */
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero-main { --sun-h: clamp(220px, 29svh, 280px); flex-direction: column; align-items: stretch; padding: var(--hdr) 0 32px; }
  .sun-stage { position: relative; width: 100%; height: var(--sun-h); flex: none; }
  .sun-stage::before {
    background-position: center bottom; background-size: 100% auto;
    background-image: url("/assets/img/sun/sun-poster-mobile-v5.jpg");
    background-image: image-set(url("/assets/img/sun/sun-poster-mobile-v5.avif") type("image/avif"), url("/assets/img/sun/sun-poster-mobile-v5.jpg") type("image/jpeg"));
  }
  .sun-stage canvas, .sun-stage::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 72%, transparent 100%);
  }
  .aurora--hero::before { inset: -10% -40% 30% -40%; }
  .hero-cap {
    top: calc(var(--hdr) + var(--sun-h) - 48px); bottom: auto; left: var(--gut); right: var(--gut); max-width: none;
    justify-content: space-between; gap: 12px; text-align: left;
  }
  .hero-cap .fig-cap { font-size: 0.75rem; line-height: 1.5; color: var(--ink-2); text-shadow: 0 0 10px #0A081B, 0 1px 3px #0A081B; }
  .hero-cap .fig-t { display: none; }
  .hero-cap .fig-k::after { content: ". "; }
  .hero-cap .fig-d { display: inline; }
  .hero-grid { margin-top: 20px; }
  .hero-copy { max-width: none; }
  .hero-copy .eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; }
  .h1 { margin-top: 12px; }
  .hero-lead { margin-top: 18px; }
  .cta-row { margin-top: 26px; }
  .cta-row .btn { flex: 1 1 220px; }
  .proof-list { grid-template-columns: 1fr; gap: 0; }
  .proof > .rule { margin-bottom: 0; }
  .proof-item { max-width: none; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .proof-item > p { position: relative; padding: 4px 0 0 72px; min-height: 2.2rem; }
  .proof-item .num { position: absolute; left: 0; top: 0; margin: 0; font-size: 2.1rem; }
  .proof-item--cnrs { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
  .proof-item--cnrs > p { padding: 0; min-height: 0; }
  .proof-item .logos { margin: 0; height: auto; gap: 8px; }
  .logo-cnrs { height: 34px; }
  .logo-rise { height: 17px; }
}

/* ============================================================
   SECTIONS: the layouts that belong to the home
   Design pass of 4 October 2026 (docs/build/18-design-pass.md): one idea per section, bands that alternate
   (--bg, .sec--tint, .sec--deep), one strong figure per section, at most three visual blocks per screen,
   no decorative arrow. Shared components (keyfacts, plate, cards, disclosure): /assets/site/site.css.
   Clarity rewrite of 5 October 2026 (docs/build/28-home-rewrite.md): no section numbers, no « Fig. n », captions on
   one line (what you see, then « Illustration. »), team nested in the science section, a shorter page.
   ============================================================ */

/* A shorter page than the inner ones: a tighter rhythm between sections (88 → 57 px at 1440, 56 → 44 px on phones) */
main > .sec { padding-block: clamp(44px, calc(1.6vw + 34px), 60px); }
main > .sec .sec-head { margin-bottom: clamp(18px, 1.6vw, 24px); }

/* Titles are sentences: they take the width of their column (two lines instead of three or four) */
.sec-intro > .h2, .science-copy > .h2 { max-width: 24ch; }

/* French: short sentences are never cut in two at the end of a line (guide rule 12, docs/build/26 §4); the site
   hyphenates long French text by default (site.css) */
html[lang="fr"] main .body, html[lang="fr"] main .card-b, html[lang="fr"] .offer-cta, html[lang="fr"] .result-b, html[lang="fr"] .person-b { hyphens: manual; -webkit-hyphens: manual; }

/* Captions: what the figure shows, then its nature, on the same line */
.sec .fig-cap > .fig-n, .sec .fig-cap > .fig-d { display: inline; }
.sec .fig-cap a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
@media (hover: hover) { .sec .fig-cap a:hover { color: var(--teal); text-decoration-color: currentColor; } }

/* Opening of a section: the title on the left, a short text on the right, aligned on its last line */
@media (min-width: 1024px) {
  .sec-intro > .h2 { grid-column: 1 / span 6; }
  .sec-intro > .body { grid-column: 8 / -1; align-self: end; }
}
.sec-intro > .body { max-width: 50ch; }

/* ---------- 02 Problem (band) ---------- */
.sec--problem .h2 { max-width: 19ch; }   /* its two short sentences read best on three lines */

/* ---------- 03 Chain: Fig. 2, wide ---------- */
/* Poster before the engine arrives (it then sets its own, and removes it after the first frame). Held in a
   custom property and applied only once the figure approaches (.is-near, set by site.js), so it does not
   compete with the first screen for bandwidth; without JS it is applied at once. */
.fig--scene { --poster: image-set(url("/assets/img/scenes/sun-earth.avif") type("image/avif"), url("/assets/img/scenes/sun-earth.jpg") type("image/jpeg")); }
html[lang="fr"] .fig--scene { --poster: image-set(url("/assets/img/scenes/sun-earth-fr.avif") type("image/avif"), url("/assets/img/scenes/sun-earth-fr.jpg") type("image/jpeg")); }
.sec--chain .fig--scene { margin-top: clamp(32px, 3.2vw, 52px); }
@media (min-width: 1024px) {
  /* the band takes the whole width of the page grid, margin column included; its caption returns to the text column */
  .sec--chain .fig--scene { padding-left: 0; }
  .sec--chain .fig--scene .sk-stage { aspect-ratio: 3 / 1; }
  /* no table of values under the band (audit A10): the caption takes the row, the pause control sits at its right end */
  .sec--chain .fig--scene { grid-template-columns: minmax(0, 1fr) auto; }
  .sec--chain .fig--scene .sk-stage { aspect-ratio: 3.6 / 1; }
  .sec--chain .fig--scene > figcaption { margin-left: var(--idx); }
  .sec--chain .fig--scene > .motion-btn--fig { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 8px; }
}
/* tablets and phones: an icon-only pause control on the caption's row (the label stays for screen readers) */
@media (max-width: 1023px) {
  .sec--chain .fig--scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
  .sec--chain .fig--scene > .sk-stage { grid-column: 1 / -1; grid-row: 1; }
  .sec--chain .fig--scene > figcaption { grid-column: 1; grid-row: 2; margin-right: 0; }
  .sec--chain .fig--scene > .motion-btn--fig { grid-column: 2; grid-row: 2; margin: 6px var(--gut) 0 0; width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .sec--chain .fig--scene > .motion-btn--fig span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* 03 Chain: the two invitations (journey, guided scenario) under Fig. 2, aligned on its caption column */
.sec--chain .invites { margin-top: clamp(28px, 2.6vw, 40px); }
@media (min-width: 1024px) { .sec--chain .invites { margin-left: var(--idx); } }

/* ---------- 04 Offer (band): three illustrated levels ---------- */
.offer-levels { margin-top: clamp(32px, 3.2vw, 52px); gap: 48px clamp(28px, 2.6vw, 40px); }
.offer-levels .card { gap: 12px; }
/* 16:10 plates: the two pictures are cropped at the centre, the diagram is drawn whole, centred */
.offer-levels .plate-img { aspect-ratio: 16 / 10; }
.offer-levels .plate-img img, .offer-levels .plate-img svg { height: 100%; }
.offer-levels .plate-img img { object-fit: cover; }
.offer-levels .card-b { max-width: 40ch; }
/* three columns: the rows of the three cards line up (figure · title and status · text) whatever the caption lengths */
@media (min-width: 1180px) {
  .offer-levels > .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .offer-levels > .card > .plate { margin-bottom: 4px; }
  .offer-levels > .card > .card-head { align-self: start; }
}
/* phones: the three services are a swipe row (the next card shows at the edge); the list is focusable for the keyboard */
@media (max-width: 599px) {
  .offer-levels {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 14px; scroll-padding-inline: var(--gut);
  }
  .offer-levels > .card { scroll-snap-align: start; }
  .offer-levels:focus-visible { outline-offset: -2px; }
}
/* narrow phones (360 px): « Event Replay » and « EN DÉVELOPPEMENT » no longer fit side by side, so the three heads stack
   (title above status) and the row stays even */
@media (max-width: 380px) {
  .offer-levels .card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* three dots under the swipe row: which card is in view (moved by site.js; hidden without JS and from 600 px) */
.swipe-dots { display: none; }
@media (max-width: 599px) {
  .js .swipe-dots { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
  .swipe-dots > span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: 0.55; transition: background-color 0.2s, opacity 0.2s, transform 0.2s; }
  .swipe-dots > span.is-on { background: var(--teal); opacity: 1; transform: scale(1.3); }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) { .swipe-dots > span { transition: none; } }
/* what a pilot project is (the sentence shared by every page), then the one call to action */
.offer-cta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; margin-top: clamp(36px, 3.6vw, 52px); padding-left: var(--idx); font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.offer-cta > p { max-width: 68ch; }
/* Early Alert diagram, drawn in the page (labels translated with data-fr): 320 × 200 units = the 16:10 plate, text of 13.3 units
   = 12 px on the narrowest plate that is not a phone (288 px, tablets), 13.9 units = 12 px at 276 px (360 px phones). The band of uncertainty is wide at the early alert, steps down at the eruption, then narrows;
   teal for the eruption, white for the alert marks; no red, no alert symbol (it would need the « Vision » mention). */
.alert-svg text { font-family: var(--f-mono); font-size: 13.3px; letter-spacing: 0.04em; fill: var(--ink-2); }
@media (max-width: 380px) { .alert-svg text { font-size: 13.9px; } }
.alert-svg .a-lbl { fill: var(--ink); }
.alert-svg .a-axis { stroke: rgba(240, 252, 255, 0.34); stroke-width: 1; }
.alert-svg .a-mk { stroke: rgba(240, 252, 255, 0.34); stroke-width: 1; stroke-dasharray: 2 4; }
.alert-svg .a-t0 { stroke: rgba(45, 221, 184, 0.6); stroke-width: 1; stroke-dasharray: 4 4; }
.alert-svg .a-t0-dot { fill: var(--teal); }
.alert-svg .a-hi { fill: var(--teal); }
.alert-svg .a-band { fill: rgba(45, 221, 184, 0.13); stroke: rgba(45, 221, 184, 0.6); stroke-width: 1; stroke-linejoin: round; }
.alert-svg .a-est { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.alert-svg .a-dot { fill: var(--ink); }
.alert-svg .a-ring { fill: var(--bg); stroke: rgba(240, 252, 255, 0.5); stroke-width: 1; }

/* ---------- Sectors: the other sectors beside the title, then satellites and energy as two illustrated cards ---------- */
.sector-cards { margin-top: clamp(32px, 3.2vw, 52px); gap: 48px clamp(28px, 3vw, 48px); }
.sector-cards .card-b { max-width: 46ch; }
/* two columns: figure, title (the link to the use case) and text line up across the two cards */
@media (min-width: 768px) {
  .sector-cards > .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .sector-cards > .card > .plate { margin-bottom: 4px; }
}
.sectors-intro { display: grid; row-gap: 20px; padding-left: var(--idx); }
.sectors-all { display: grid; justify-items: start; gap: 10px; max-width: 52ch; }
@media (min-width: 1024px) and (max-width: 1179px) {
  .sectors-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .sectors-intro > .h2 { grid-column: 1 / span 6; }
  .sectors-intro > .sectors-all { grid-column: 8 / -1; align-self: end; }
}
/* from 1180 px: the title and the other sectors on the left, the two illustrated cards on the right */
@media (min-width: 1180px) {
  .sectors-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-left: var(--idx); align-items: start; }
  .sectors-intro { grid-column: 1 / span 4; padding-left: 0; row-gap: 24px; }
  .sector-cards { grid-column: 5 / -1; margin-top: 0; padding-left: clamp(16px, 2vw, 32px); gap: 40px 32px; }
}

/* ---------- Science and team (band): two results, each with its Nature cover; the founding team beside them ---------- */
.aurora--science::before { inset: -10% -30% 40% 20%; opacity: 0.75; }
@media (min-width: 1024px) {
  .science-copy { grid-column: 1 / span 6; }
  .team { grid-column: 8 / -1; align-self: start; }
}

.results { margin-top: clamp(28px, 3vw, 40px); }
.result { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) clamp(84px, 7.8vw, 112px); column-gap: 20px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.result-cover { display: block; align-self: start; }
.result-cover img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.result:last-child { border-bottom: 1px solid var(--line); }
.result-y { font: 500 1.35rem/1.3 var(--f-mono); letter-spacing: -0.02em; color: var(--teal); font-variant-numeric: tabular-nums; }
.result-b { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.result-ref { margin-top: 8px; font: 400 0.75rem/1.6 var(--f-mono); letter-spacing: 0.03em; color: var(--ink-3); }
.result-ref a { display: inline-block; padding: 13px 0; margin: -13px 0; color: var(--ink-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .result-ref a:hover { color: var(--teal); } }

/* ---------- Team (a section nested in the science one): title, photo, the two people side by side ---------- */
.team-t { margin-bottom: clamp(20px, 2vw, 28px); }
.team-photo img { width: 100%; border-radius: 3px; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 22%; }
.team-photo .fig-cap { margin-top: 10px; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-content: start; margin-top: 20px; }
@media (max-width: 1023px) { .team { padding-top: 32px; border-top: 1px solid var(--line); } }

/* ---------- Contact ---------- */
.aurora--contact::before { inset: -20% -20% 10% -20%; }
@media (min-width: 1024px) {
  .contact-copy { grid-column: 1 / span 5; }
  .form { grid-column: 7 / -1; }
}
.contact-copy .body { max-width: 46ch; }   /* its top margin comes from .h2 + .body (shared, 24 px, 16 px on phones) */


/* ---------- Responsive: the home's own layouts ---------- */
@media (max-width: 1023px) {
  .team-photo { max-width: 620px; }
  .contact-copy .body { max-width: 60ch; }
  .hero-grid { display: block; order: 2; }
  .hero-grid > .idx { display: none; }
  .sec-intro { row-gap: 20px; }
}
/* tablets and small laptops: each level becomes a row, its figure on the left */
@media (min-width: 600px) and (max-width: 1179px) {
  .offer-levels { --cols: 1; gap: 40px; }
  .offer-levels .card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 28px; row-gap: 10px; align-content: start; }
  .offer-levels .card > .plate { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .offer-levels .card > :not(.plate) { grid-column: 2; }
}
@media (max-width: 767px) {
  .sector-cards { --cols: 1; row-gap: 32px; }
  .result { padding: 16px 0 18px; }
  .people { gap: 20px 18px; }
  /* a wide strip on phones: faces and shoulders */
  .team-photo img { aspect-ratio: 2 / 1; object-position: 50% 14%; }
  .team-photo .fig-cap { margin-top: 8px; }
  /* the year above the text, the cover at the right of both */
  .result { grid-template-columns: minmax(0, 1fr) 76px; column-gap: 16px; row-gap: 4px; }
  .result > .result-y, .result > div { grid-column: 1; }
  .result > .result-cover { grid-column: 2; grid-row: 1 / span 2; }
  .fig--scene { --poster: image-set(url("/assets/img/scenes/sun-earth-mobile.avif") type("image/avif"), url("/assets/img/scenes/sun-earth-mobile.jpg") type("image/jpeg")); }
  html[lang="fr"] .fig--scene { --poster: image-set(url("/assets/img/scenes/sun-earth-fr-mobile.avif") type("image/avif"), url("/assets/img/scenes/sun-earth-fr-mobile.jpg") type("image/jpeg")); }
}