/* =============================================================================
 * Type de question IMAGE (élève) et assistant de zones (éditeur de question)
 * Zones : polygones d'un calque SVG 100 × 100 posé sur l'image (coordonnées en %).
 * Étiquettes posées, repères, rangs et badges : HTML positionné en % dans la même boîte.
 * ============================================================================= */

.qi-question {
    --qi-zone: rgba(var(--bs-primary-rgb), 0.14);
    --qi-bord: rgba(var(--bs-primary-rgb), 0.9);
    --qi-juste: var(--bs-success);
    --qi-faux: var(--bs-danger);
    position: relative;
}

/* Disposition : banque d'étiquettes sous l'image (défaut), au-dessus, à gauche ou à droite */
.qi-disposition {display: flex; flex-direction: column; gap: 0.5rem;}
.qi-banque-bas .qi-banque, .qi-banque-droite .qi-banque {order: 2;}
.qi-banque-gauche .qi-disposition, .qi-banque-droite .qi-disposition {flex-direction: row; align-items: flex-start;}
.qi-banque-gauche .qi-banque, .qi-banque-droite .qi-banque {flex-direction: column; align-items: stretch; flex: 0 0 auto; max-width: 30%;}
.qi-banque-gauche .qi-banque .qi-etiquette, .qi-banque-droite .qi-banque .qi-etiquette {white-space: normal;}
.qi-colonne-image {position: relative; flex: 1 1 auto; min-width: 0;}
@media (max-width: 576px) { /* Petit écran : étiquettes sous l'image, sauf « haut » */
    .qi-banque-gauche .qi-disposition, .qi-banque-droite .qi-disposition {flex-direction: column;}
    .qi-banque-gauche .qi-banque, .qi-banque-droite .qi-banque {order: 2; flex-direction: row; max-width: none;}
}

/* Image et calque ---------------------------------------------------------- */
.qi-cadre {max-width: 100%; overflow-x: auto;}
.qi-cadre .qi-image {position: relative; display: block; width: fit-content; max-width: 100%; min-width: min(100%, 300px);
                     margin: 0 auto; user-select: none;}
.qi-cadre .qi-image > img {display: block; width: 100%; height: auto;}
.qi-cadre.qi-agrandi .qi-image {width: var(--qi-largeur-agrandie) !important; max-width: none;} /* Voir QuestionImage.agrandir() */
.qi-image.qi-image-active {cursor: crosshair;}
.qi-question .qi-agrandir {position: absolute; top: 0.25rem; right: 0.25rem; z-index: 4; opacity: 0.8;
                           background: rgba(var(--bs-body-bg-rgb), 0.75);}
.qi-calque {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1;}

/* Zones visibles (polygones) ---------------------------------------------- */
.qi-calque .qi-zone {
    fill: var(--qi-zone); stroke: var(--qi-bord); stroke-width: 2; stroke-dasharray: 6 4;
    vector-effect: non-scaling-stroke; pointer-events: all; cursor: pointer;
}
.qi-calque .qi-zone:hover {fill: rgba(var(--bs-primary-rgb), 0.24);}
.qi-calque .qi-cocher[aria-pressed="true"] {fill: rgba(var(--bs-primary-rgb), 0.4); stroke-dasharray: none;}
.qi-calque .qi-zone.drop-zone-ready {fill: rgba(var(--bs-primary-rgb), 0.24);}
.qi-calque .qi-zone.drag-over {fill: rgba(var(--bs-primary-rgb), 0.45); stroke-dasharray: none; stroke-width: 3;}
.qi-image .qi-rang {
    position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none;
    font-weight: bold; background: var(--bs-body-bg); border-radius: 1em; padding: 0 0.4em; line-height: 1.3;
}
.qi-image .qi-rang:empty {display: none;}
.qi-image .qi-rang.qi-rang-attendu {background: var(--qi-juste); color: #fff;}

/* Étiquettes --------------------------------------------------------------- */
.qi-banque {display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; min-height: 2.6rem; padding: 0.35rem;
            border: 1px dashed var(--bs-border-color); border-radius: 0.5rem;}
.qi-question .qi-etiquette {cursor: grab; padding: 0.15rem 0.5rem; white-space: nowrap;}
.qi-question .qi-etiquette.btn-outline-primary {background: var(--bs-body-bg);}
.qi-question .qi-etiquette.active {box-shadow: 0 0 0 3px rgba(var(--bs-warning-rgb), 0.8);}
.qi-question .qi-etiquette img {max-height: 3rem; width: auto;}
.qi-image .qi-etiquette.qi-pose {position: absolute; z-index: 3; transform: translate(-50%, -50%); font-size: 0.85em;}
/* Pendant un glisser, les étiquettes posées laissent passer le pointeur vers les zones et l'image dessous */
.qi-glisser .qi-image .qi-etiquette {pointer-events: none;}

/* Repères (clics sur une image aux zones masquées) ------------------------- */
.qi-image .qi-marqueur {
    position: absolute; z-index: 3; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem; padding: 0 0.35rem; border-radius: 0.8rem;
    border: 2px solid var(--bs-body-bg); background: var(--bs-primary); color: #fff;
    font-weight: bold; font-size: 0.85rem; line-height: 1; cursor: pointer;
    box-shadow: 0 0 0 1px var(--bs-primary);
}
.qi-image .qi-marqueur:has(.qi-num:empty) {width: 1.6rem; padding: 0;}
.qi-marqueur .qi-num {display: block;}
.qi-marqueur .qi-num:empty::before {content: ""; display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff;}
.qi-marqueur .qi-retirer {
    position: absolute; top: -0.5rem; right: -0.5rem; display: flex; align-items: center; justify-content: center;
    width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--bs-body-bg); color: var(--bs-danger);
    font-size: 0.8rem; line-height: 1; box-shadow: 0 0 0 1px var(--bs-danger);
}
.qi-desactivee .qi-marqueur .qi-retirer {display: none;}

/* Correction --------------------------------------------------------------- */
.qi-desactivee .qi-etiquette, .qi-desactivee .qi-marqueur, .qi-desactivee .qi-image {cursor: default;}
.qi-desactivee .qi-calque .qi-zone {cursor: default;}
.qi-calque .qi-zone.qi-juste {stroke: var(--qi-juste); fill: rgba(var(--bs-success-rgb), 0.2); stroke-dasharray: none;}
.qi-calque .qi-zone.qi-faux {stroke: var(--qi-faux); fill: rgba(var(--bs-danger-rgb), 0.2); stroke-dasharray: none;}
.qi-calque .qi-zone.qi-manquee {stroke: var(--qi-juste); stroke-width: 3;}
.qi-calque .qi-solution {stroke: var(--qi-juste); fill: rgba(var(--bs-success-rgb), 0.15); stroke-dasharray: none; pointer-events: none;}
.qi-calque .qi-solution-leurre {stroke: var(--qi-faux); fill: rgba(var(--bs-danger-rgb), 0.12); pointer-events: none;}
.qi-image .qi-marqueur.qi-juste {background: var(--qi-juste); box-shadow: 0 0 0 1px var(--qi-juste);}
.qi-image .qi-marqueur.qi-faux {background: var(--qi-faux); box-shadow: 0 0 0 1px var(--qi-faux);}
.qi-attendu {position: absolute; z-index: 4; transform: translate(-50%, 0.95rem); padding: 0 0.35rem; pointer-events: none;
             border-radius: 0.3rem; background: var(--qi-juste); color: #fff; font-size: 0.75rem; white-space: nowrap;}
.qi-explications:not(:empty) {margin-top: 0.5rem; font-size: 0.95em;}

/* Assistant de zones (éditeur de question) --------------------------------- */
.qi-assistant {margin-top: 0.5rem;}
.qi-az-entete {display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;}
.qi-az-entete .qi-az-variante {width: auto;}
.qi-az-cadre {max-width: 100%; overflow-x: auto; padding-top: 1rem;}
.qi-az-image {position: relative; width: fit-content; max-width: 100%; min-width: min(100%, 300px); user-select: none;}
.qi-az-image > img {display: block; width: 100%; height: auto;}
.qi-az-calque {position: absolute; inset: 0; cursor: crosshair; touch-action: none;}
.qi-az-svg {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;}
/* Couleur d'une zone selon son rôle : bordure, remplissage et fond du nom */
.qi-az-calque [data-role] {--az-couleur: var(--bs-primary-rgb);}
.qi-az-calque [data-role="cible"] {--az-couleur: var(--bs-success-rgb);}
.qi-az-calque [data-role="leurre"], .qi-az-calque [data-role="piege"] {--az-couleur: var(--bs-secondary-rgb);}
.qi-az-svg .qi-az-zone {
    fill: rgba(var(--az-couleur), 0.18); stroke: rgb(var(--az-couleur)); stroke-width: 2;
    vector-effect: non-scaling-stroke; cursor: move;
}
.qi-az-svg .qi-az-variable {stroke-dasharray: 6 4; cursor: pointer;}
.qi-az-svg .qi-az-selection {stroke: var(--bs-warning); stroke-width: 3;}
.qi-az-svg .qi-az-trace {fill: rgba(var(--bs-warning-rgb), 0.15); stroke: var(--bs-warning); stroke-width: 2; stroke-dasharray: 5 4;
                         vector-effect: non-scaling-stroke; pointer-events: none;}
.qi-az-nom {position: absolute; transform: translate(-50%, -50%); padding: 0 0.3rem; border-radius: 0.25rem; /* Au centre de la zone */
            background: rgb(var(--az-couleur)); color: #fff; font-size: 0.7rem; white-space: nowrap; pointer-events: none;}
.qi-az-outils {position: absolute; display: flex; transform: translate(-100%, -100%);}
.qi-az-outils button {border: 0; padding: 0 0.3rem; font-size: 0.75rem; background: var(--bs-warning); color: #000;}
.qi-az-poignee {position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
                width: 1.1rem; height: 1.1rem; border-radius: 0.2rem; cursor: nwse-resize;
                background: var(--bs-warning); color: #000; font-size: 0.7rem; border: 1px solid var(--bs-body-bg);}
.qi-az-poignee i {pointer-events: none;}
.qi-az-sommet {position: absolute; transform: translate(-50%, -50%); width: 0.75rem; height: 0.75rem; border-radius: 50%;
               background: var(--bs-warning); border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px #000; cursor: grab;}
.qi-az-sommet.qi-az-premier {width: 1rem; height: 1rem; cursor: pointer;}
.qi-az-geste .qi-az-nom, .qi-az-geste .qi-az-outils, .qi-az-geste .qi-az-poignee, .qi-az-geste .qi-az-sommet {visibility: hidden;}