/* image-zoom.css — Wrapper pour zoom/pan d'image (cf. image-zoom.js) */

.img-zoom-wrapper {
    position: relative;
    overflow: hidden;
    cursor: grab;
    background: #f8f9fa;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; /* désactive scroll natif pour pinch zoom */
}

.img-zoom-wrapper.grabbing {
    cursor: grabbing;
}

.img-zoom-wrapper img {
    transform-origin: 0 0;
    transition: transform 0.15s ease-out;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none; /* évite drag natif de l'image qui interfère */
}

.img-zoom-wrapper.grabbing img {
    transition: none; /* pendant le drag, pas d'animation */
}

/* Hint visuel "double-clic pour reset" en bas */
.img-zoom-wrapper::after {
    content: "Molette : zoom · drag : déplacer · double-clic : reset";
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 10px;
    color: #6c757d;
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 6px;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.img-zoom-wrapper:hover::after {
    opacity: 1;
}