/**
 * Zones interactives — styles partagés (single-scenario.php +
 * page-intervention-receive.php). Rectangle pointillé discret + bulle
 * contextuelle au clic.
 */

/*
 * Important : sur la page intervention-receive, intervention-templates.css
 * applique `.scenario-canvas-view .scenario-element { pointer-events: none }`
 * pour eviter que les images du scenario interceptent les clics. Les zones
 * interactives ONT besoin de recevoir le clic, donc on force l'override avec
 * une specificite suffisante (descendant + classe + classe).
 */
.scenario-zone-interactive,
.scenario-canvas-view .scenario-element.scenario-zone-interactive {
    border: 2px dashed rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.scenario-zone-interactive:hover,
.scenario-zone-interactive:focus {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(96, 165, 250, 0.95);
    outline: none;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
}

.scenario-zone-bubble {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    background: #1e293b;
    color: #fff;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 320px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
    white-space: normal;
    word-break: break-word;
}

.scenario-zone-bubble.visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.scenario-zone-bubble.bubble-right {
    left: calc(100% + 12px);
}

.scenario-zone-bubble.bubble-left {
    right: calc(100% + 12px);
}

.scenario-zone-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.scenario-zone-bubble.bubble-right::before {
    left: -8px;
    border-right: 8px solid #1e293b;
}

.scenario-zone-bubble.bubble-left::before {
    right: -8px;
    border-left: 8px solid #1e293b;
}