/* ═══════════════════════════════════════════
   Valroc – Widget Machine Gallery
   ═══════════════════════════════════════════ */

.vmg-wrap { width: 100%; }

/* ── Image principale ── */
.vmg-main-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
    /* aspect-ratio géré exclusivement par Elementor */
}

.vmg-main-img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .25s ease;
    /* object-fit géré exclusivement par Elementor */
}

.vmg-main-img.is-loading { opacity: 0; }

/* ── Miniatures ── */
.vmg-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

.vmg-thumb {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid transparent;
    transition: opacity .2s, border-color .2s;
    box-sizing: border-box;
    width: 80px;         /* écrasé par Elementor */
    aspect-ratio: 4 / 3; /* écrasé par Elementor */
}

.vmg-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* object-fit géré exclusivement par Elementor */
}

.vmg-thumb.is-active { border-color: currentColor; opacity: 1 !important; }
.vmg-thumb:not(.is-active) { opacity: .6; }
.vmg-thumb:hover:not(.is-active) { opacity: .85; }

/* ── Vide ── */
.vmg-empty { color: #888; font-style: italic; }