/* keycap.css — FEELING TOUCHE DE CLAVIER MÉCANIQUE (RS-7 : « chaque endroit = une touche de
   clavier mécanique, automatique, feeling jeu vidéo, même sur téléphone »).
   Chaque tuile devient un KEYCAP : relief 3D (paroi + ombre = hauteur), enfoncement au tap
   (la touche descend et se pose). 100% adaptatif au thème (--xr-*), zéro JS pour le visuel.
   Cibles : .hm-lt (launcher mobile) · .hm-node (carte) · .plx-tile (dock/marketplace) · .dd-app (dock bas).
   Le préfixe `body ` monte la spécificité pour battre les :active inline des composants. */

body .hm-lt, body .hm-node, body .plx-tile, body .dd-app {
  border-radius: 12px;
  /* le relief : liseré haut clair (lumière) + creux bas + PAROI solide (la hauteur de la touche) + ombre au sol */
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, #ffffff 22%, transparent),
    inset 0 -3px 4px color-mix(in srgb, #000000 28%, transparent),
    0 5px 0 color-mix(in srgb, var(--xr-surface, #0c1320) 38%, #000),
    0 9px 16px rgba(0, 0, 0, 0.45);
  transition: transform .05s cubic-bezier(.3, .8, .3, 1), box-shadow .05s ease, filter .1s ease;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

/* ENFONCEMENT au tap (mobile) et au clic : la touche descend de 5px et la paroi disparaît -> elle se pose */
body .hm-lt:active, body .hm-node:active, body .plx-tile:active, body .dd-app:active {
  transform: translateY(5px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    inset 0 -1px 2px color-mix(in srgb, #000000 24%, transparent),
    0 0 0 color-mix(in srgb, var(--xr-surface, #0c1320) 38%, #000),
    0 2px 5px rgba(0, 0, 0, 0.4) !important;
  filter: brightness(1.07) !important;
}

/* la touche « éclairée » de la carte garde son halo d'accent PAR-DESSUS le relief */
body .hm-node.lit {
  box-shadow:
    inset 0 1.5px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 0 0 1px var(--xr-accent, #3fe0d0),
    0 5px 0 color-mix(in srgb, var(--xr-surface, #0c1320) 38%, #000),
    0 10px 22px color-mix(in srgb, var(--xr-accent, #3fe0d0) 26%, transparent) !important;
}

/* les gros boutons de nav du dock (portes/fenêtres, favoris) profitent aussi du keycap */
body .plx-tile .plx-ic, body .hm-lt .hm-ic, body .hm-node .hm-ic { transition: transform .05s ease; }
body .plx-tile:active .plx-ic, body .hm-lt:active .hm-ic { transform: translateY(-1px) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  body .hm-lt, body .hm-node, body .plx-tile, body .dd-app { transition: none; }
  body .hm-lt:active, body .hm-node:active, body .plx-tile:active, body .dd-app:active { transform: none !important; }
}