/* Site Commerce · css/fx-gestes.css : Lot 2 · Gestes et feuilles, les gestes.
   Les règles de fx/gestes.js, accrochées à `html.cv-gestes` (posée par le
   script). Aucune variable lue ici n'est hors des jetons --cv-* de la
   coquille. */

/* Le dock se glisse à l'horizontale : le navigateur garde la verticale
   (rien à défiler là, mais aucun geste d'historique ne doit partir du dock). */
html.cv-gestes .cv-dock { touch-action: pan-y; }

/* Au téléphone, le glissé horizontal sur la vitrine EST le changement de
   style : il ne doit pas être pris par le navigateur pour un retour en
   arrière dans l'historique (Chromium navigue au débordement horizontal de
   la page racine, mesuré : un glissé vers la droite quittait /commerce).
   Les gestes de bord du système (iOS, Android) ne sont pas concernés. Sur
   grand écran, le pavé tactile garde son retour arrière. */
@media (max-width: 900px), (max-height: 520px) {
  html.cv-gestes, html.cv-gestes body { overscroll-behavior-x: none; }
}

/* Pendant le glissé : rien ne se sélectionne, le libellé ne transite pas. */
html.cv-gestes .cv-dock.is-glisse,
html.cv-gestes .cv-dock.is-glisse * { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* La carte du style voisin, pendant le glissé : posée comme le contenu du
   bouton (l'icône et le libellé), décalée et rendue visible au doigt (style
   en ligne). Son état de base est invisible. Le bouton la découpe (cf.
   fx-dock.css ; sans fx/dock.js, `overflow` est posé ici aussi). */
html.cv-gestes .dock-model { position: relative; overflow: hidden; }
html.cv-gestes .cv-dock-apercu {
  position: absolute; top: 0; bottom: 0; margin: 0;
  display: flex; align-items: center; gap: inherit; min-width: 0;
  pointer-events: none; opacity: 0;
}

/* Au-delà du seuil, la flèche du côté où l'on va s'allume : on sait, avant
   de lâcher, ce qui va se passer. */
html.cv-gestes .dock-step.is-arme {
  background: var(--cv-dock-soft);
  scale: 1.08;
  transition: background-color var(--cv-dur-court) var(--cv-ease-standard),
              scale var(--cv-dur-court) var(--cv-ease-ressort);
}
html.cv-gestes .dock-step { transition: background-color var(--cv-dur-court) var(--cv-ease-standard),
                                         scale var(--cv-dur-court) var(--cv-ease-standard); }

@media (prefers-reduced-motion: reduce) {
  html.cv-gestes .dock-step,
  html.cv-gestes .dock-step.is-arme { scale: none; transition: background-color var(--cv-dur-court) linear; }
}