/* Site Commerce · noyau des effets (lot 0, fondation) : ce que fx/noyau.js
   pose dans la page, et la règle « Animations : réduites » forcée par le
   réglage du visiteur. Les jetons de durée et de courbe vivent avec les
   autres jetons de la coquille, dans le <style> de index.html. */

/* « Réduites » choisi dans la feuille de choix : toute animation et toute
   transition de la coquille tombent à une durée quasi nulle. Pas `none` :
   `animationend` et `transitionend` arrivent toujours, et l'état final d'une
   animation est atteint. */
:root[data-mouvement="reduit"] { scroll-behavior: auto !important; }
:root[data-mouvement="reduit"] *,
:root[data-mouvement="reduit"] *::before,
:root[data-mouvement="reduit"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* L'interrupteur du retour haptique de l'iPhone : JAMAIS display:none
   (Safari ne vibre plus), jamais en bas (zone sûre), hors écran en haut. */
.cv-haptique {
  position: fixed; top: 0; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Le bandeau unique « Garder les animations » : en haut de la scène, sous
   la barre d'outils, au-dessus de la vitrine et du store (z 5), sous le dock. */
.cv-mvt {
  position: absolute; z-index: 6; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 20px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  padding: 8px 8px 8px 16px;
  background: var(--cv-card); color: var(--cv-fg);
  border: 1px solid var(--cv-line); border-radius: 14px;
  box-shadow: var(--cv-shadow);
  font: 500 14px/1.35 var(--cv-body);
}
.cv-mvt[hidden] { display: none; }
.cv-mvt-txt { margin: 0; }
.cv-mvt-btn {
  min-height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: 600 14px/1 var(--cv-body); color: var(--cv-fg);
  background: transparent; border: 1px solid var(--cv-line);
}
.cv-mvt-btn--oui { background: var(--cv-cta); color: var(--cv-on-cta); border-color: transparent; }
.cv-mvt-btn:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 2px; }
@media (max-width: 400px) {
  .cv-mvt { padding: 10px; }
  .cv-mvt-txt { width: 100%; text-align: center; }
}
@media (pointer: coarse) {
  .cv-mvt-btn { min-height: 44px; }
}