/* ==========================================================================
   Snap Sections — the demonstration page and the panels it carries
   --------------------------------------------------------------------------
   Two things live here, and they are kept apart on purpose:

     §1-§3  the panels. These are content, not the component: their padding,
            their gaps and their measures are the reference's, reproduced to
            the pixel, and they are what apercu.html and the test bench put
            inside the component.
     §3bis  the photographs the two shipped pages put behind those panels.
            Scoped to them, so the bench keeps the reference's flat colours.
     §4-§6  the page around it — heading, footer, colours. Nothing here is
            needed to use the component.

   PROPORTIONS of the panels — module: --ss-font-size, the component's own.
   There is one module for the whole thing, not one for the component and one
   for its content: setting --ss-font-size rescales the panels, their measures
   and the rail together, which is the point of having a module at all.

     panel text        1                 30 px  (24 px below 1248 px)
     line height       1.2               36 px
     panel padding     0.8 em            24 px
     stack gap         0.3334 em         10 px
     wide stack gap    1.5 em            45 px
     text measure      16.6667 em        500 px
     row measure       26.6667 em        800 px
     row text measure  20 em             600 px
     row image measure 13.3334 em        400 px
     image ratio       1.0674573758339512

   Every ratio is rounded up, never down: the engine truncates to a 64th of a
   pixel, and a ratio rounded down lands a hair short, which is enough to
   wrap a line early.
   ========================================================================== */

/* ==========================================================================
   1. Face declarations
   --------------------------------------------------------------------------
   Inter 600, the weight the reference uses, in two local subsets. Latin
   alone covers French and English; latin-ext is fetched only if a character
   actually needs it. SIL Open Font License — see README.md, "Credits".
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("inter-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("inter-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. A panel
   --------------------------------------------------------------------------
   The class goes on .snap-sections__panel itself, not on a box inside it: on
   the reference the panel and the coloured frame inside it measure the same
   rectangle to the pixel, so one box does the work of two.
   ========================================================================== */

.demo-slide {
  flex-direction: column;
  padding: calc(0.8 * var(--ss-font-size));
  gap: calc(0.3334 * var(--ss-font-size));
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The size itself is inherited from .snap-sections, which sets it from the
     module; only what derives from it is written out. */
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  /* The reference clips each frame; a long word cannot push a panel wider
     than the viewport it snaps into. */
  overflow: hidden;
}

/* The reference's three background tokens, plus the near-black of the last
   panel, read off the published page. */
.demo-slide--nuit {
  background: #0f0f10;
}

.demo-slide--orange {
  background: #ea6506;
}

.demo-slide--bleu {
  background: #078ceb;
}

.demo-slide--gris {
  background: #1e1e1e;
}

/* Two panels of the reference space their contents wider than the others. */
.demo-slide--aere {
  gap: calc(1.5 * var(--ss-font-size));
}

/* ==========================================================================
   3. What a panel holds
   ========================================================================== */

.demo-slide__bloc {
  width: 100%;
  max-width: calc(16.6667 * var(--ss-font-size));
}

.demo-slide__titre {
  /* The component assumes no reset, and neither does its content: an <h2>
     keeps a user-agent margin that would push the text off centre by more
     than half a line. */
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: center;
  text-wrap: pretty;
}

/* The fourth panel: text and picture side by side, the pair centred. */
.demo-slide__rangee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.3334 * var(--ss-font-size));
  width: 100%;
  max-width: calc(26.6667 * var(--ss-font-size));
}

.demo-slide__rangee .demo-slide__bloc {
  /* minmax(0, 1fr)'s flexbox cousin: a basis of 0 rather than auto, so the
     text cannot claim room from the picture because of a long word. */
  flex: 1 0 0;
  max-width: calc(20 * var(--ss-font-size));
}

.demo-slide__rangee .demo-slide__titre {
  text-align: start;
}

.demo-slide__image {
  flex: 1 0 0;
  max-width: calc(13.3334 * var(--ss-font-size));
  aspect-ratio: 1.0674573758339512;
  margin: 0;
}

.demo-slide__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The reference drops its body size one step below 1248 px. It leaves its
   paddings at 24 px while doing so, because they are fixed numbers in the
   tool that drew it; here they are ratios of the module, so they follow the
   text down — 19.2 px instead of 24. That is the deliberate reading: one
   variable rescales the whole thing, at every width, and not only at the two
   the reference happened to be drawn at. Above 1248 px, where the reference
   was measured, the two agree to the pixel. */
@media (max-width: 1247px) {
  .demo-scene .snap-sections,
  .apercu .snap-sections,
  .repro .snap-sections {
    --ss-font-size: 1.5rem; /* 24 px */
  }
}

/* ==========================================================================
   3 bis. The photographic grounds — the two shipped pages only
   --------------------------------------------------------------------------
   The reference fills its panels with flat colour. On a dark page that costs
   the demonstration the very thing it is here to show: four near-black
   rectangles stopping on their edge look like one long black page, and the
   snap goes unseen. So each panel carries a photograph of its own, one
   dominant hue apiece — night blue, amber, azure, graphite — and the change
   of panel is felt before it is understood.

   Three things are deliberate:

     - the scope. These rules are keyed on .demo-scene and .apercu, the two
       pages that ship. _mesures/repro-fidele.html loads this same file and
       reuses these same classes, and it must keep the reference's flat
       colours: it is what the superposition is measured against.
     - the veil. White 30 px text over a photograph needs a floor. The scrim
       is denser in the middle, where the text sits, and lighter at the edges,
       where the picture still has to exist. It is a background layer, not an
       overlay box, so nothing is added to the markup and no geometry moves.
     - the flat colour of §2 stays underneath. It is what shows while the
       photograph loads, and what remains if it never does.
   ========================================================================== */

.demo-scene,
.apercu {
  --demo-voile: radial-gradient(
    120% 85% at 50% 50%,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.56) 45%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

.demo-scene .demo-slide,
.apercu .demo-slide {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.demo-scene .demo-slide--nuit,
.apercu .demo-slide--nuit {
  background-image: var(--demo-voile), url("panneau-nuit.webp");
}

.demo-scene .demo-slide--orange,
.apercu .demo-slide--orange {
  background-image: var(--demo-voile), url("panneau-orange.webp");
}

.demo-scene .demo-slide--bleu,
.apercu .demo-slide--bleu {
  background-image: var(--demo-voile), url("panneau-bleu.webp");
}

.demo-scene .demo-slide--gris,
.apercu .demo-slide--gris {
  background-image: var(--demo-voile), url("panneau-gris.webp");
}

/* The fourth panel's picture now sits on a photograph rather than on a flat
   ground; a hairline keeps the two apart. border-box is already on, so the
   line grows inwards and the calibrated 400 px box does not move. */
.demo-scene .demo-slide__image,
.apercu .demo-slide__image {
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* In forced colours the text is repainted in system colours while a
   background image is not dropped, which would leave white on white. The
   photographs go, the flat colours of §2 come back. */
@media (forced-colors: active) {
  .demo-scene .demo-slide,
  .apercu .demo-slide {
    background-image: none;
  }
}

/* ==========================================================================
   4. The page around the component
   ========================================================================== */

:root {
  color-scheme: dark;
}

body {
  margin: 0;
  background: #0f0f10;
  color: #e7e8ea;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.demo-tete {
  max-width: 46rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 3rem;
  text-align: center;
}

.demo-surtitre {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ea6506;
}

.demo-tete h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1;
}

.demo-intro {
  margin: 0 auto;
  max-width: 38rem;
  color: #a0a4ad;
}

.demo-fleche {
  margin: 2.5rem 0 0;
  font-size: 1.5rem;
  color: #5a616e;
}

/* ==========================================================================
   5. The component in its slot
   --------------------------------------------------------------------------
   .snap-sections is 100% of its parent's height and does not invent one, so
   the page says how tall the scene is. svh, not vh: on a phone, vh is the
   height the window has once the address bar has slid away, so a panel sized
   in vh is taller than what you can see until you scroll.
   ========================================================================== */

.demo-scene {
  height: 100svh;
}

/* The reference's own rail colour: the slate grey of its palette. The track
   keeps the component's 10% black. */
.demo-scene .snap-sections {
  --ss-thumb-color: #5a616e;
  --ss-focus-color: #fff;
}

/* ==========================================================================
   6. After the component
   --------------------------------------------------------------------------
   A block below, to show what happens at the end of the last panel: the
   scroll is handed back to the page, which is the browser's own behaviour
   and the reference's.
   ========================================================================== */

.demo-suite {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  text-align: center;
}

.demo-suite h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.demo-suite p {
  margin: 0 auto;
  max-width: 38rem;
  color: #a0a4ad;
}