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

   The hero fills the whole frame: there is nothing to centre here, only a scale
   to hold. Four things to watch, all of them verified:

   1. box-sizing on html and body, otherwise the padding would add to the 100%
      height and the component would drift downwards.
   2. No absolutely positioned child carries the height: it is
      .reveal-mosaic-hero__contenu, in flow, that gives it — hence
      --ph-hauteur: 100%.
   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
      layout is the same at every size, so a single constant is enough and the
      framing no longer moves.
   4. The component's responsive breakpoints are neutralised below: in a narrow
      frame they would change the layout when the scale has already adapted
      everything.
   ========================================================================== */

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

.reveal-mosaic-hero {
  /* 1440 / 90 = 16 px, the body size of the original. */
  --ph-font-size: calc(100vw / 90);
  --ph-hauteur: 100%;
  height: 100%;
}

/* The component's media query reasons in viewport width. In a narrow frame it
   would fire even though the scale has already brought everything to the right
   size: so the wide proportions are reasserted, and the script's threshold is
   set to zero so that it does not switch to its tightened form either. */
@media (max-width: 420px) {
  .reveal-mosaic-hero {
    --ph-marge: calc(4.875 * var(--ph-font-size));
    --ph-ecart-titre: calc(1.375 * var(--ph-font-size));
    --ph-bloc-max: calc(42.5 * var(--ph-font-size));
    --ph-cellule: calc(3.3125 * var(--ph-font-size));
    --ph-seuil-etroit: 0px;
  }
}