/* Redimensionneur : aperçus canvas stables sur mobile. Avant et après occupent
   la même zone visuelle, quelle que soit la taille réelle du fichier redimensionné.
   L'arrière-plan de la couche Après masque complètement l'ancienne image. */
.comparison-layer canvas {
  position:absolute;
  left:calc(50% + var(--pan-x));
  top:calc(50% + var(--pan-y));
  display:block;
  width:calc(100% - 28px);
  height:calc(100% - 28px);
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center center;
  image-rendering:auto;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--zoom));
  transform-origin:center center;
  will-change:left, top, transform;
}
.comparison-layer canvas[hidden] { display:none; }
.comparison-after {
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#f2f5f9 25%,transparent 25%),
    linear-gradient(-45deg,#f2f5f9 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f2f5f9 75%),
    linear-gradient(-45deg,transparent 75%,#f2f5f9 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
}
.resize-quick-options { flex-wrap:wrap; }