.cnsa-canvas {
  position: absolute !important;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100% !important;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: normal;
}

.cnsa-picto {
  position: absolute !important;
  z-index: 25;
  width: clamp(70px, var(--cnsa-picto-size, 160px), 260px) !important;
  height: clamp(70px, var(--cnsa-picto-size, 160px), 260px) !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: 0 !important;
  opacity: .82;
  transform: translate3d(var(--cnsa-dx, 0px), var(--cnsa-dy, 0px), 0) rotate(-2deg);
  will-change: transform;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}

.cnsa-picto:hover {
  animation: cnsa-shiver .46s infinite linear;
  opacity: 1;
  filter: drop-shadow(0 18px 20px rgba(18, 47, 40, .20));
}

.cnsa-picto.is-dragging {
  opacity: 1;
  transform: translate3d(var(--cnsa-dx, 0px), var(--cnsa-dy, 0px), 0) scale(1.06) rotate(0deg);
  filter: drop-shadow(0 16px 18px rgba(18, 47, 40, .18));
  animation: none;
  transition: opacity .12s ease, filter .12s ease;
}

.cnsa-picto.is-dragging {
  cursor: grabbing !important;
}

.cnsa-picto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: saturate(.96) contrast(1.04) drop-shadow(0 12px 18px rgba(18, 47, 40, .12));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.cnsa-picto.has-image-error {
  display: none !important;
}

@media (max-width: 767px) {
  .cnsa-canvas {
    opacity: .28;
  }

  .cnsa-picto {
    display: none !important;
  }
}

@keyframes cnsa-shiver {
  0% { transform: translate3d(var(--cnsa-dx, 0px), var(--cnsa-dy, 0px), 0) rotate(-2deg); }
  25% { transform: translate3d(calc(var(--cnsa-dx, 0px) + var(--cnsa-tremble-a, 1.5px)), calc(var(--cnsa-dy, 0px) - var(--cnsa-tremble-b, 1px)), 0) rotate(var(--cnsa-rotate-a, .8deg)); }
  50% { transform: translate3d(calc(var(--cnsa-dx, 0px) - var(--cnsa-tremble-b, 1px)), calc(var(--cnsa-dy, 0px) + var(--cnsa-tremble-a, 1.5px)), 0) rotate(var(--cnsa-rotate-b, -.6deg)); }
  75% { transform: translate3d(calc(var(--cnsa-dx, 0px) + var(--cnsa-tremble-c, .8px)), calc(var(--cnsa-dy, 0px) + var(--cnsa-tremble-b, 1px)), 0) rotate(var(--cnsa-rotate-c, 1.2deg)); }
  100% { transform: translate3d(var(--cnsa-dx, 0px), var(--cnsa-dy, 0px), 0) rotate(-2deg); }
}