/* V14 : la démo se lit comme une démo. Un écran en 3D, à la manière de linear.app : un boîtier (cadre clair,
   filet, reflet sur l'arête haute), des ombres marine en couches, une ombre portée au sol, et une inclinaison
   vers l'arrière qui se redresse au défilement (ecran.js pose --kd-rx et --kd-s) sans jamais s'aplatir tout à
   fait. Seule la barre latérale se clique : le reste de l'application est inerte (cockpit.js).
   Mouvement réduit : inclinaison fixe, légère. Chargé après mobile.css. */

.kd { --kd-rx: 10deg; --kd-s: .965; position: relative; }

/* Le boîtier : l'application posée dans un cadre, comme l'écran de Linear. */
.kd__ecran { position: relative; padding: 10px; border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F0EE 100%);
  border: 1px solid rgba(16, 34, 78, .12);
  transform: perspective(2400px) rotateX(var(--kd-rx)) scale(var(--kd-s));
  transform-origin: 50% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(16, 34, 78, .06),
    0 10px 24px -8px rgba(16, 34, 78, .14),
    0 36px 70px -24px rgba(16, 34, 78, .30),
    0 90px 140px -50px rgba(16, 34, 78, .38); }
/* Reflet sur l'arête haute du boîtier. */
.kd__ecran::before { content: ""; position: absolute; inset: 0 12% auto; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent); }
/* Ombre au sol : une ellipse marine floue sous l'écran, qui ancre la scène. */
.kd::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -46px; height: 70px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(16, 34, 78, .28), rgba(16, 34, 78, 0) 70%); filter: blur(12px); }

/* L'application dans le boîtier : le double cadre d'avant laisse place au boîtier. */
.kd__fenetre { box-shadow: 0 0 0 1px rgba(16, 34, 78, .04); border-radius: 12px; }

/* Ce qui ne se clique pas ne le laisse pas croire. */
.kd [inert] { cursor: default; }

@media (max-width: 599px) {
  .kd { --kd-rx: 7deg; --kd-s: .97; }
  .kd__ecran { padding: 6px; border-radius: 16px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 8px 18px -8px rgba(16, 34, 78, .18),
      0 30px 50px -24px rgba(16, 34, 78, .32); }
  .kd__fenetre { border-radius: 11px; }
  .kd::after { bottom: -30px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .kd { --kd-rx: 4deg; --kd-s: 1; }
}