/* 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; }

/* ---- 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) { .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 */
  .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; }
  .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, .stage__photo { transition: opacity 0.8s var(--ease); }
.stage[data-state="ready"]:not([data-settling]) .stage__still { opacity: 0; visibility: hidden; transition: opacity 0.8s var(--ease), visibility 0s 0.8s; }
.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; }
.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); } }