/* Preview — a bare page, made to be embedded in an <iframe> inside a 16:9
   frame. The component in its telling state, a background, nothing else.

   The scale is taken from the HEIGHT and not from the width: the laptop is
   taller than what a 16:9 frame allows for horizontal scaling (ratio 1.479
   against 1.778). The `min()` with the width is not a cap in the sense of the
   usual trap — it freezes no dimension, it chooses which of the two constrains.
   The layout stays uniformly scaled either way, so a single constant is always
   enough to centre it; without it, a frame narrower than 16:9 would make the
   laptop overflow by 298 px. */

html, body {
  /* Without this, the padding adds to the 100% height and the content drifts
     downwards. */
  box-sizing: border-box;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: #f0f0f0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.l3d {
  --l3d-largeur: min(calc(100vw - 8vmin), calc((100vh - 8vmin) * 1.4794));
}

/* ── The content of the panel ────────────────────────────────────────────
   Everything is in em, never in px: the component sets the `font-size` of
   `.l3d__ecran` so that the panel is 90 em wide. So you write as you would on a
   1440 px mockup — 1 em to 16 px — and the page follows the scale of the
   laptop, from the 700 px thumbnail to the full-screen hero. */

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #08090b;
  color: #e8e9ec;
  font-size: .9375em; /* 15 px on the mockup */
  line-height: 1.45;
}

.page__barre {
  display: flex;
  align-items: center;
  gap: 1.867em;
  padding: 1.2em 2em;
  border-bottom: .067em solid rgba(255, 255, 255, .07);
}

.page__marque {
  font-size: 1.067em;
  font-weight: 700;
  letter-spacing: -.01em;
}

.page__nav {
  display: flex;
  gap: 1.692em;
  margin-right: auto;
  color: rgba(232, 233, 236, .55);
  font-size: .867em;
}

.page__action {
  padding: .538em 1.231em;
  background: #f0f0f0;
  border-radius: .538em;
  color: #08090b;
  font-size: .867em;
  font-weight: 600;
}

.page__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 4em;
}

.page__oeil {
  margin: 0 0 1.5em;
  color: #7c5cff;
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page__titre {
  margin: 0;
  font-size: 3.6em;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.page__texte {
  max-width: 27em;
  margin: 1.2em 0 0;
  color: rgba(232, 233, 236, .6);
  font-size: 1em;
}

.page__boutons {
  display: flex;
  gap: .8em;
  margin-top: 2em;
}

.page__bouton {
  padding: .786em 1.571em;
  border: .071em solid rgba(255, 255, 255, .14);
  border-radius: .643em;
  font-size: .933em;
  font-weight: 500;
}

.page__bouton--plein {
  background: #7c5cff;
  border-color: #7c5cff;
}

.page__grille {
  display: grid;
  gap: .667em;
  grid-template-columns: repeat(4, 6.4em);
  margin-top: 2.933em;
}

.page__grille span {
  height: 3.467em;
  background: rgba(255, 255, 255, .045);
  border: .067em solid rgba(255, 255, 255, .06);
  border-radius: .533em;
}