/* =========================================================
   LokoRiko — micro-interactions (survol / appui)
   ---------------------------------------------------------
   Uniquement des états :hover et :active. L'état au repos
   n'est jamais modifié : le design approuvé reste identique.
   Réservé aux pointeurs fins (pas de survol au doigt).
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  /* ---- Boutons : léger relief + appui ----
     Pas de will-change permanent : il forcerait une couche de
     composition en permanence et modifierait le lissage du texte. */
  .btn:hover{transform:translateY(-2px) scale(1.02)}
  .btn:active{transform:translateY(0) scale(.985);transition-duration:.09s}

  /* ---- Navigation ---- */
  .nav-link:hover{color:var(--orange-dark)}
  .nav-link--pill:hover{transform:translateY(-1px)}
  .nav-link--pill{transition:transform .25s var(--ease),background-color .25s var(--ease)}

  .footer__nav a{display:inline-block;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .footer__nav a:hover{transform:translateY(-1px)}

  .mobile-menu__link{transition:color .2s var(--ease)}

  /* ---- Cartes : très légère élévation ---- */
  .prod,.dish,.sauce,.side,.cat-card,.gal,.about__card{
    transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .45s var(--ease);
  }
  .prod:hover,.dish:hover,.sauce:hover,.side:hover,.gal:hover,.about__card:hover{
    transform:translateY(-3px);
  }
  /* La carte catégorie active garde son échelle : on n'ajoute
     qu'un très léger décalage vertical. */
  .cat-card:hover:not(.is-active){transform:scale(1) translateY(-3px)}

  /* ---- Images ---- */
  .loc-map a:hover img{transform:scale(1.015)}

  /* ---- Icônes : micro-animation élégante ---- */
  .value img,.value-c img,.benefit img,.info__icon{
    transition:transform .45s cubic-bezier(.34,1.4,.64,1);
  }
  .value:hover img,.value-c:hover img,.benefit:hover img,.info:hover .info__icon{
    transform:scale(1.08) rotate(-3deg);
  }

  /* ---- Pastille de pagination ---- */
  .dots button:hover{transform:scale(1.35)}

  /* ---- Filtres de la carte ---- */
  .filter:hover:not(.is-active){transform:translateY(-1px)}
  .filter{transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}

  /* ---- Logos ---- */
  .header__logo img,.footer__logo img{transition:transform .4s var(--ease)}
  .header__logo:hover img,.footer__logo:hover img{transform:scale(1.03)}
}

/* Appui tactile : retour visuel sur les boutons */
@media (hover: none){
  .btn:active{transform:scale(.98);transition-duration:.09s}
}

/* =========================================================
   Accessibilité — mouvement réduit
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn:active,
  .prod:hover,.dish:hover,.sauce:hover,.side:hover,.gal:hover,.about__card:hover,
  .cat-card:hover:not(.is-active),
  .nav-link--pill:hover,.footer__nav a:hover,.filter:hover:not(.is-active),
  .header__logo:hover img,.footer__logo:hover img,
  .value:hover img,.value-c:hover img,.benefit:hover img,.info:hover .info__icon,
  .loc-map a:hover img,.dots button:hover{
    transform:none;
  }
  /* La couche React n'anime pas : les éléments restent visibles. */
  html[data-motion="react"] .reveal{opacity:1;transform:none}
}