/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   The background fills the whole frame: there is nothing to recentre, only a
   scale to hold. The four framing traps, and what they come to here:

   1. box-sizing on html and body, otherwise the padding would add to the 100%
      height and the component would drift downwards.
   2. No out-of-flow child carries the height: the eight layers are absolutely
      positioned and weigh nothing, it is --sh-height that decides, and it is
      100% of the frame.
   3. The scale follows the width, with no cap: at a frame of 1440 px we land
      exactly on the 16 px of the original (1440 / 90 = 16). With no cap the
      composition is the same at every size — the same star tiles per screen, the
      same blur, the same halo — so a single constant is enough.
   4. The component has no responsive breakpoint to neutralise: everything in it
      is expressed in percentages or in multiples of --sh-scale. Nor is there an
      entrance animation to wait for before a capture; what has to be waited for
      is the script setting data-sh-ready — see _mesures/affiche.mjs, which also
      picks the most telling moment.
   ========================================================================== */

html,
body {
  box-sizing: border-box;
  block-size: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.star-horizon {
  /* 1440 / 90 = 16 px, the scale of the original. */
  --sh-scale: calc(100vw / 90);
  --sh-height: 100%;
  block-size: 100%;
}

/* -- The text belongs to this page, not to the component ----------------- */

.apercu-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  padding: 0 calc(100vw / 24);
  color: #e8e9ec;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

.apercu-texte__oeil {
  margin: 0 0 calc(100vw / 130);
  color: rgba(150, 245, 245, 0.75);
  font-size: calc(100vw / 105);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.apercu-texte__titre {
  margin: 0;
  font-size: calc(100vw / 22);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}