/* =========================================================================
   Couche tactile mobile — scoped .hx-*  (additive, aucun style existant modifié)
   simonlabbe.fr — retour haptique + micro-interactions au toucher
   ========================================================================= */

/* 1) Confort de tap : pas de flash bleu, pas de délai de 300 ms,
      pas de menu contextuel intempestif sur les boutons. */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], input, select, textarea, label,
  summary, .project-card, .sl-skill, .cv-button, .eco-btn, #eco-leaf-btn, #lang-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  button, [role="button"], .cv-button, .eco-btn, #eco-leaf-btn, #lang-toggle, .project-card {
    -webkit-touch-callout: none;
  }
}

/* 2) Réaction à l'appui : l'élément "s'enfonce" légèrement sous le doigt. */
.hx-pressed {
  transform: scale(.965) !important;
  transition: transform .09s cubic-bezier(.22,.61,.36,1) !important;
  filter: brightness(1.04);
}
.hx-released {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1) !important;
}
/* Les cartes projet ont déjà un translate au survol : on garde l'effet doux. */
.project-card.hx-pressed, .sl-skill.hx-pressed { transform: scale(.985) !important; }

/* 3) Onde de contact (ripple) — élément flottant, n'affecte aucun layout. */
.hx-ripple {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,.45) 0%, rgba(255,174,0,.18) 55%, transparent 70%);
  opacity: .9;
  transform: scale(1);
  animation: hx-ripple-out .5s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes hx-ripple-out {
  to { transform: scale(11); opacity: 0; }
}

/* 4) Réglage discret dans le footer. */
.hx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px auto 0;
  padding: 6px 13px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: #bdbdbd;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.hx-toggle:hover, .hx-toggle:focus-visible { color: #FFD700; border-color: rgba(255,215,0,.5); }
.hx-toggle__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FFD700;
  box-shadow: 0 0 8px rgba(255,174,0,.7);
  transition: background .2s ease, box-shadow .2s ease;
}
.hx-toggle[aria-pressed="false"] .hx-toggle__dot { background: #555; box-shadow: none; }

/* 5) Accessibilité : on coupe le mouvement, pas l'information. */
@media (prefers-reduced-motion: reduce) {
  .hx-pressed, .hx-released { transform: none !important; transition: none !important; filter: none; }
  .hx-ripple { display: none; }
}