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

/* Les entrées CSS de la coquille cèdent la place au ressort (WAAPI). Une
   animation CSS remplie (`both`) resterait aussi dans getAnimations() tant
   que la couche est ouverte. */
html.cv-feuille .cv-sheet,
html.cv-feuille .cv-dialog,
html.cv-feuille .cv-voile,
html.cv-feuille .cv-pop { animation: none; }

/* Le clone qui part (couche ou popover) : jamais touchable. Son état de base
   est invisible : les animations l'amènent de visible à parti, ne tiennent
   rien, et il quitte le DOM sans reparaître une image. */
.cv-fantome, .cv-fantome-pop { pointer-events: none; }
.cv-fantome .cv-sheet,
.cv-fantome .cv-dialog,
.cv-fantome .cv-voile,
.cv-fantome-pop { opacity: 0; }

@media (max-width: 900px), (max-height: 520px) {
  /* La scène recule derrière une feuille : 96 %, coins arrondis, détachée
     de la barre du site. L'état est posé par une classe, l'animation ne fait
     que l'amener (et la ramener : `cv-recul-retour` garde les coins le temps
     du retour). */
  html.cv-feuille .stage.cv-recul,
  html.cv-feuille .stage.cv-recul-retour {
    transform-origin: 50% 0;
    border-radius: 14px;
  }
  html.cv-feuille .stage.cv-recul { transform: translateY(6px) scale(.96); }

  /* L'en-tête d'une carte se tire au doigt : le navigateur ne doit ni
     défiler ni zoomer dessous. */
  html.cv-feuille .cv-sheet-head,
  html.cv-feuille .cv-dialog-head { touch-action: none; }
}

/* Pendant un glissé, rien ne se sélectionne. */
html.cv-feuille-glisse,
html.cv-feuille-glisse * { -webkit-user-select: none; user-select: none; }