/* =========================================================
   FLUIDITÉ + EFFETS AU TOUCHER — Comesee
   ========================================================= */

/* 1. CAUSE PRINCIPALE DES « SACCADES » SUR MOBILE :
      les rangées de produits bloquaient le défilement vertical quand le doigt
      commençait dessus. Maintenant on peut défiler dans les deux sens. */
.cat-row,
#memberGrid.grid{
  touch-action:pan-x pan-y !important;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}

/* 2. Le flou « verre dépoli » sur l'en-tête et la barre du bas est très
      coûteux à chaque pixel défilé : on le remplace par un fond presque opaque
      (même look, bien plus fluide). */
header{
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.bottom-nav{
  background:rgba(255,255,255,.98);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* 3. Les fenêtres fermées ne coûtent plus rien (elles gardaient leur flou
      même invisibles). Le flou reste quand elles sont ouvertes. */
.auth-overlay,
.product-overlay{
  visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.auth-overlay.open,
.product-overlay.open{
  visibility:visible;
  transition:opacity .3s ease, visibility 0s;
}

/* 4. Le défilement horizontal caché sur <body> pouvait casser l'en-tête
      collant et le défilement fluide : « clip » règle ça. */
html{ -webkit-tap-highlight-color:transparent; }
body{ overflow-x:clip; -webkit-tap-highlight-color:transparent; }

/* 5. Animations allégées : on n'anime plus d'ombres ni de dégradés
      (qui obligent à tout redessiner), seulement des mouvements légers. */
@keyframes promoPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
.quality-hl{ animation:none; background-position:50% center; }

/* 6. Photos des cartes : plus de zoom lent de 7 secondes sur chaque photo,
      juste un fondu. Beaucoup moins de travail pour le téléphone. */
.card-img-layer{
  transform:none !important;
  transition:opacity .9s ease !important;
}
.card:hover .card-img-layer.active{ transform:none !important; }
@media (hover:none){
  .card:hover .card-media img{ transform:none; }
}
.card.in-view{ will-change:auto; }

/* 7. Les zones tout en bas de page ne sont dessinées que quand on s'en approche. */
.usp-strip,
footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}

/* =========================================================
   EFFETS AU TOUCHER
   ========================================================= */

/* Petit « pop » quand on appuie sur un bouton ou une carte */
@keyframes tapPop{
  0%{ scale:1; }
  40%{ scale:.94; }
  100%{ scale:1; }
}
@keyframes tapPopCard{
  0%{ scale:1; }
  40%{ scale:.975; }
  100%{ scale:1; }
}
.btn-primary:active,
.btn-ghost:active,
.btn-load-more:active,
.quick-add:active,
.cart-checkout:active,
.pd-add-btn:active,
.auth-submit:active,
.auth-logout:active,
.cat-pill:active,
.icon-btn:active,
.card-fav-btn:active,
.pd-size-chip:active,
.checkout-point-btn:active,
.relay-item:active,
.bn-item:active{
  animation:tapPop .28s ease;
}
.card:active{ animation:tapPopCard .3s ease; }

/* Onde (ripple) qui part du doigt, à l'intérieur des boutons */
.fx-host{ position:relative; overflow:hidden; }
.fx-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.5);
  transform:scale(0);
  opacity:.9;
  animation:fxRipple .6s ease-out forwards;
}
.fx-ripple.dark{ background:rgba(255,90,31,.28); }
@keyframes fxRipple{
  to{ transform:scale(1); opacity:0; }
}

/* Anneau orange qui apparaît partout où l'on tape sur l'écran */
.fx-tap{
  position:fixed;
  width:56px; height:56px;
  margin:-28px 0 0 -28px;
  border-radius:50%;
  border:2px solid var(--orange);
  background:radial-gradient(circle, rgba(255,90,31,.22), rgba(255,90,31,0) 70%);
  pointer-events:none;
  z-index:9999;
  transform:scale(.25);
  opacity:.9;
  animation:fxTap .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fxTap{
  to{ transform:scale(1.2); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .fx-tap,.fx-ripple{ display:none; }
  .btn-primary:active,.btn-ghost:active,.card:active{ animation:none; }
}