add zoom composant

src/components/ui/ZoomControls.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="zoom-controls">
+    <button @click="zoomOut" title="Dézoomer">−</button>
+    <button @click="zoomReset" title="Réinitialiser le zoom">{{ Math.round(zoomLevel * 100) }}%</button>
+    <button @click="zoomIn" title="Zoomer">+</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const zoomLevel = ref(1);
+
+const zoomIn = () => { zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3); };
+const zoomOut = () => { zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.2); };
+const zoomReset = () => { zoomLevel.value = 1; };
+
+const zoomStyle = computed(() => ({
+  transform: `scale(${zoomLevel.value})`,
+  height: `${100 / zoomLevel.value}vh`,
+}));
+
+defineExpose({ zoomStyle });
+</script>
+
+<style scoped>
+.zoom-controls {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0;
+  z-index: 1000;
+  background: var(--color-interface-100, #fff);
+  border: 1px solid var(--color-interface-200, #ddd);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.zoom-controls button {
+  background: none;
+  border: none;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  color: var(--color-interface-800, #333);
+  min-width: 2.5rem;
+  text-align: center;
+}
+
+.zoom-controls button:hover {
+  background: var(--color-interface-200, #eee);
+}
+
+.zoom-controls button:not(:last-child) {
+  border-right: 1px solid var(--color-interface-200, #ddd);
+}
+</style>