/* =====================================================================
   📁 /generateur_imagezones/generateur_imagezones.css
   ===================================================================== */

.generateur-imagezones-page .generator-panel {
    position: sticky;
    top: 1rem;
}

.iz-editor-viewport {
    width: 100%;
    max-height: 78vh;
    overflow: auto;
    border-radius: 1rem;
    background: #e9ecef;
}

.iz-editor-stage {
    position: relative;
    width: 100%;
    min-width: 320px;
    overflow: hidden;
    margin-inline: auto;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 1rem;
    background: #fff;
    touch-action: none;
}

.iz-editor-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.iz-editor-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.iz-editor-zone {
    fill: rgba(13, 110, 253, .18);
    stroke: #0d6efd;
    stroke-width: 3;
    cursor: pointer;
    vector-effect: non-scaling-stroke;
}

.iz-editor-zone.is-editable {
    cursor: move;
}

.iz-editor-zone.is-active {
    fill: rgba(255, 193, 7, .26);
    stroke: #856404;
}

.iz-editor-draft {
    fill: rgba(25, 135, 84, .16);
    stroke: #198754;
    stroke-width: 3;
    stroke-dasharray: 8 6;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.iz-editor-handle {
    fill: #fff;
    stroke: #212529;
    stroke-width: 2;
    cursor: grab;
    vector-effect: non-scaling-stroke;
}

.iz-editor-handle:active {
    cursor: grabbing;
}

.iz-editor-resize-n,
.iz-editor-resize-s {
    cursor: ns-resize;
}

.iz-editor-resize-e,
.iz-editor-resize-w {
    cursor: ew-resize;
}

.iz-editor-resize-ne,
.iz-editor-resize-sw {
    cursor: nesw-resize;
}

.iz-editor-resize-nw,
.iz-editor-resize-se {
    cursor: nwse-resize;
}

.iz-editor-center-handle {
    fill: #ffc107;
    cursor: move;
}

.iz-editor-vertex-handle.is-selected {
    fill: #ffc107;
    stroke-width: 3;
}

.iz-editor-midpoint-handle {
    fill: #d1e7dd;
    stroke: #198754;
    stroke-dasharray: 2 2;
    cursor: copy;
}

.iz-editor-polygon-draft-node {
    fill: #d1e7dd;
    stroke: #198754;
    pointer-events: none;
}

.iz-zoom-controls input[type="range"] {
    width: min(220px, 28vw);
}

.iz-json-preview {
    min-height: 18rem;
    font-family: Consolas, Monaco, monospace;
    font-size: .85rem;
}

.iz-question-list .list-group-item {
    cursor: pointer;
}

@media (max-width: 1199.98px) {
    .generateur-imagezones-page .generator-panel {
        position: static;
    }
}

/* =====================================================================
   SVG structuré - v1.3.0
   ===================================================================== */

.iz-editor-svg-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}

.iz-editor-svg-host > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.iz-svg-map-element {
    cursor: pointer;
    outline: none;
    vector-effect: non-scaling-stroke;
    transition: fill .12s ease, stroke .12s ease;
}

.iz-svg-map-element:hover,
.iz-svg-map-element:focus-visible,
.iz-svg-map-element.is-hovered {
    fill: #cfe2ff !important;
    stroke: #0d6efd !important;
    stroke-width: 2.5 !important;
}

.iz-svg-map-element.is-answer {
    fill: #a3cfbb !important;
    stroke: #198754 !important;
    stroke-width: 3 !important;
}

.iz-svg-map-element.is-active {
    stroke: #ffc107 !important;
    stroke-width: 4 !important;
}

.iz-svg-element-list {
    max-height: 22rem;
    overflow: auto;
}

.iz-svg-element-list code {
    font-size: .75rem;
}

.iz-svg-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}