/* Kova preview page (site/kit/page.ts; preview.js): the page around kova-ui (kova-ui.css: the 3D stage and its
   dock), the top bar and the stage's still. `html.embed` (`?embed`, the home page's hero): no top bar,
   see-through (the home page's still under it until its own copy of that still, preview.js, lies over the 3D). */
:root { --top-h: 64px; } /* page.ts's head script picks the still by the stage's size: change both together */
.embed { --top-h: 0px; }

.cfg-page { height: 100svh; display: flex; flex-direction: column; overflow: hidden; }

/* ---- A page (page.ts `layout: "page"`, body.demo-page): the site page around a stage of a fixed aspect (the
   head script picks its still by it: change both together); `?full` and `?embed` are its full-window view. ---- */
:root:not(.full, .embed) .demo-page { height: auto; display: block; overflow: visible; }
:root:not(.full, .embed) .demo-page .top { display: none; }
:is(.full, .embed) .page-only { display: none !important; }
.cfg-doc { flex: 1; min-height: 0; display: grid; }
:is(.full, .embed) .demo-stage { display: contents; }
:root:not(.full, .embed) .demo-page .dock__legal { display: none !important; } /* the footer has it */
/* The head: « Démos / category » over the title and its line. */
.demo-head { padding-block: 32px 28px; }
.demo-crumb { display: flex; gap: 10px; font-size: 0.875rem; color: var(--text-3); }
.demo-crumb a { color: var(--text-2); text-decoration: none; }
.demo-crumb a:hover { color: var(--text); }
.demo-title { margin-top: 12px; font-size: clamp(2.25rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.015em; }
.demo-lead { margin-top: 12px; color: var(--text-2); font-size: 1.125rem; line-height: 1.55; max-width: 64ch; text-wrap: balance; }
.demo-stage { position: relative; }
:root:not(.full, .embed) .demo-stage .cfg {
  position: relative; aspect-ratio: 2; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; isolation: isolate;
  box-shadow: 0 40px 80px -32px rgb(0 0 0 / 0.7);
}
/* The engine switch and « Plein écran »: glass controls in the stage's top right corner, one height. */
.demo-stage__actions { position: absolute; z-index: 2; top: 16px; right: calc(var(--pad) + 16px); display: flex; align-items: center; gap: 8px; }
.demo-stage__actions :is(.btn, .backend-switch) { height: 36px; background: rgb(13 14 16 / 0.62); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.demo-stage__actions .btn:hover { background: rgb(26 27 30 / 0.8); border-color: var(--line-3); }
.demo-stage__actions .backend-switch { align-items: center; padding: 3px; }
.demo-stage__actions .backend-switch button { height: 28px; padding: 0 10px; }
.demo-stage__actions .backend-switch .lbl-long { display: inline; }
/* « Ce que vous voyez »: its label as an eyebrow, then a ruled row of short facts. */
.demo-facts { padding-block: 56px 96px; }
.demo-facts__title { margin-bottom: 12px; font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.demo-facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 24px 32px; }
.demo-facts__list > div { padding-top: 16px; border-top: 1px solid var(--line); }
.demo-facts__list dt { font-weight: 500; font-size: 0.9375rem; }
.demo-facts__list dd { margin-top: 4px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }
.demo-others__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); }
.demo-others__head .link { flex: none; }
.demo-others { padding-top: 96px; }
@media (min-width: 601px) and (max-width: 900px) and (min-height: 521px) { :root:not(.full, .embed) .demo-stage .cfg { aspect-ratio: 3 / 2; } }
/* Phones: the stage to the screen's edges, « Plein écran » as its icon (its name in aria-label). */
@media (max-width: 600px) {
  .demo-head { padding-block: 20px 20px; }
  .demo-title { margin-top: 10px; font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .demo-lead { margin-top: 10px; font-size: 1rem; }
  .demo-stage.wrap { padding-inline: 0; }
  .demo-stage__actions { top: 12px; right: 12px; }
  .demo-full { width: 36px; padding: 0; }
  .demo-full span { display: none; }
  :root:not(.full, .embed) .demo-stage .cfg { aspect-ratio: 393 / 500; border-inline: 0; border-radius: 0; box-shadow: none; }
  .demo-facts { padding-block: 32px 88px; }
  .demo-facts__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .demo-facts__list > div { padding-block: 14px; }
  .demo-others__head .title { font-size: 2.25rem; }
}
@media (pointer: coarse) {
  .demo-stage__actions :is(.btn, .backend-switch) { height: 44px; min-height: 44px; }
  .demo-stage__actions .backend-switch button { height: 36px; min-height: 36px; }
}
@media (pointer: coarse) and (max-width: 600px) { .demo-full { width: 44px; } }
/* As the full view (no `js` class there): no spinner nor message while the 3D starts; a failure still says it. */
.demo-page .stage[data-state="loading"] :is(.spinner, .stage__msg) { display: none; }
/* Short phones (360x640): without the lead, the stage and its dock fit under the title (the meta description says it). */
@media (max-width: 600px) and (max-height: 700px) { :root:not(.full, .embed) .demo-lead { display: none; } }

/* ---- Top bar (like the site header, slimmer content) ---------------------------------------------- */
.top {
  flex: none; display: flex; align-items: center; gap: 20px;
  height: var(--top-h); padding: 0 var(--pad); padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right));
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.embed .top { display: none; }
.top-back { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; color: var(--text); }
.top-back .i { color: var(--text-3); transition: transform 0.3s var(--ease); }
.top-back:hover .i { transform: translateX(-3px); color: var(--text); }
/* The product's name, then where it renders (from 961 px). */
.top-name { min-width: 0; font: 500 0.875rem/1.3 var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-where { color: var(--text-3); }
.top-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lbl-short { display: none; }
/* « Kova Secure | Kova View » (two backends): a segmented control. */
.backend-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; }
.backend-switch button { font: 600 0.8125rem/1 var(--sans); color: var(--text-2); background: none; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.backend-switch button:hover { color: var(--text); }
.backend-switch button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.backend-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 960px) { .top-where { display: none; } }
@media (max-width: 720px) { .top .backend-switch .lbl-long { display: none; } }
@media (max-width: 520px) {
  .top { gap: 8px; padding: 0 12px; }
  .top-back span { display: none; } /* the arrow and the mark; the name is in aria-label */
  .top :is(.lang-switch a, .backend-switch button) { padding: 6px 8px; }
  .top-actions { gap: 8px; }
  .top-actions .btn { padding: 0 10px; }
}
@media (max-width: 420px) { /* the other language and « Appel » in 390 px */
  .top-back { min-width: 44px; justify-content: center; }
  .top-back .brand-mark { display: none; }
  .top .lang-switch a[aria-current] { display: none; }
}
@media (max-width: 620px) {
  .top-cta .lbl-long { display: none; }
  .top-cta .lbl-short { display: inline; }
}
@media (orientation: landscape) and (max-height: 520px) { :root:not(.embed) { --top-h: 44px; } }
@media (pointer: coarse) { :is(.lang-switch a, .backend-switch button) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; } }

/* ---- The stage (kova-ui.css) in the page -------------------------------------------------------- */
.cfg { flex: 1; min-height: 0; display: grid; }
/* The still: the engine's own first frame for this stage (page.ts picks it, its `object-position` from its lift),
   so the live 3D opens on it. It lies OVER the 3D (z-index -1 in the stage's own stacking context: the 3D just over
   the stage's background), which kova-ui keeps opaque under it while it settles (`still`), so Chrome draws its video
   from the start; then the still alone fades out over the opaque 3D (one translucent layer at a time) and is gone
   once the fade is over (a paused, dimmed 3D never shows it through). Presses go through it to the 3D. Dimmed only
   with the offline message. */
.stage__still, .stage__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.stage { isolation: isolate; }
.stage__viewer { z-index: -1; }
.stage__still { transition: opacity 0.25s var(--ease); } /* kova-ui.js FADE_MS */
.stage__photo { transition: opacity 0.8s var(--ease); }
.stage[data-state="ready"]:not([data-settling]) .stage__still { opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0s 0.25s; }
.stage[data-state="ready"][data-cut]:not([data-settling]) .stage__still { transition: none; } /* the visitor moves the 3D: at once */
.stage[data-state="error"] .stage__still { opacity: 0.25; }
/* A photo page: their photo first (preview.js lays it out where the 3D still's product is; while it loads, an empty
   stage, the 3D under the still hidden too), then the 3D still under it, then the dock. */
.stage__photo { position: absolute; overflow: hidden; }
.stage__photo img { position: absolute; max-width: none; } /* its box may run past the stage: a product small in their photo */
.stage__photo.is-out { opacity: 0; }
.stage:has(.stage__photo) .dock { transition: opacity 0.4s var(--ease); }
.stage:has(.stage__photo:not(.is-out)) :is(.dock, .stage__still, .stage__viewer) { opacity: 0; }
/* The home page's hero: see-through (that page's still under it while this page loads), its still that page's own
   (preview.js), over the 3D as above; its footer has the legal lines. */
.embed, .embed body, .embed .stage { background: transparent; }
.embed .dock__legal { display: none !important; }
@media (prefers-reduced-motion: reduce) { .stage__still, .stage__photo, .dock { transition: none; } }
/* The hero on desktop (its stage spans the home's column and its gutters): the still and the 3D fade like the
   home's still (site.css --hero-fade), the dock unfaded across the column inside the gutters. Phones: the dock on the gutters. */
@media (min-width: 901px) {
  .embed :is(.stage__viewer, .stage__still) { -webkit-mask: var(--hero-fade); -webkit-mask-composite: source-in; mask: var(--hero-fade); mask-composite: intersect; }
  .embed .dock { width: calc(100% - 2 * var(--pad)); }
}
@container stage (max-width: 600px) { .embed .dock { left: var(--pad); right: var(--pad); } }