<div style="width: 100%; height: 50vh; position: relative; border: 2px solid #ddd; overflow: hidden;">
  <div id="imageContainer" style="width: 100%; height: calc(50% - 50px); overflow: auto; position: relative;">
    <img id="zoomableImage" 
         src="https://amis-archives-franche-comte.fr/wp-content/uploads/2026/02/Charte-de-Montmirey-1B-2734-10-p1.jpg" 
         style="display: block; transition: transform 0.2s; transform-origin: top left; cursor: move;"
         draggable="false">
  </div>
  
  <div style="height: 50px; display: flex; justify-content: center; align-items: center; gap: 10px; background: #f5f5f5; border-top: 1px solid #ddd;">
    <button onclick="zoomIn()" style="padding: 8px 16px; cursor: pointer; background: #0073aa; color: white; border: none; border-radius: 4px; font-size: 16px;">
      Zoom +
    </button>
    <button onclick="zoomOut()" style="padding: 8px 16px; cursor: pointer; background: #0073aa; color: white; border: none; border-radius: 4px; font-size: 16px;">
      Zoom -
    </button>
    <button onclick="resetZoom()" style="padding: 8px 16px; cursor: pointer; background: #666; color: white; border: none; border-radius: 4px; font-size: 14px;">
      Réinitialiser
    </button>
  </div>
</div>

<script>
let scale = 1;
const img = document.getElementById('zoomableImage');
const container = document.getElementById('imageContainer');

function zoomIn() {
  scale += 0.2;
  img.style.transform = `scale(${scale})`;
}

function zoomOut() {
  if (scale > 0.4) {
    scale -= 0.2;
    img.style.transform = `scale(${scale})`;
  }
}

function resetZoom() {
  scale = 1;
  img.style.transform = `scale(1)`;
  container.scrollTop = 0;
  container.scrollLeft = 0;
}

// Défilement avec la molette pour zoomer
container.addEventListener('wheel', function(e) {
  e.preventDefault();
  if (e.deltaY < 0) {
    zoomIn();
  } else {
    zoomOut();
  }
}, { passive: false });

// Permettre le déplacement de l'image zoomée
let isDragging = false;
let startX, startY, scrollLeft, scrollTop;

img.addEventListener('mousedown', function(e) {
  isDragging = true;
  startX = e.pageX - container.offsetLeft;
  startY = e.pageY - container.offsetTop;
  scrollLeft = container.scrollLeft;
  scrollTop = container.scrollTop;
});

container.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  e.preventDefault();
  const x = e.pageX - container.offsetLeft;
  const y = e.pageY - container.offsetTop;
  const walkX = (x - startX) * 1.5;
  const walkY = (y - startY) * 1.5;
  container.scrollLeft = scrollLeft - walkX;
  container.scrollTop = scrollTop - walkY;
});

container.addEventListener('mouseup', function() {
  isDragging = false;
});

container.addEventListener('mouseleave', function() {
  isDragging = false;
});
</script>