/* image-picker.css — widget « zone cliquable sur image » (cf. assets/image-picker.js). */

.evo-image-picker {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.evo-image-picker img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Les zones sont positionnees en % via le `style` inline du HTML enrichi. */
.evo-image-picker .evo-zone {
    position: absolute;
    display: block;
    background: transparent;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.evo-image-picker .evo-zone:hover {
    border-color: rgba(0, 0, 0, 0.35);
}

/* Navigation clavier : outline contrasté WCAG AA (ratio ≥ 3:1 sur fond blanc). */
.evo-image-picker .evo-zone:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

.evo-image-picker .evo-zone.evo-zone-selected {
    border-color: #1d4ed8;
    background-color: rgba(29, 78, 216, 0.10);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.10);
    transform: scale(1.04);
}