/* =============================================================================
 * choco_drag_drop — zones de dépôt pendant un drag
 *
 * Indicateur interne (::after), sans outline extérieur.
 * Classe "no-border" = pas d’indicateur (voir choco_drag_drop.js).
 * ============================================================================= */

.drop-zone-ready,
.drag-over {
    --dd-inset: 2px;
    --dd-radius: inherit;
    --dd-ring: #3b82f6;
    --dd-ring-soft: rgba(59, 130, 246, 0.55);
    --dd-fill: rgba(59, 130, 246, 0.14);
    --dd-fill-strong: rgba(37, 99, 235, 0.28);
    --dd-accent: #1d4ed8;
    position: relative;
    outline: none !important;
    border-radius: var(--dd-radius, 0.35rem);
    background-color: var(--dd-fill) !important;
    box-shadow:
        inset 0 0 0 1px rgba(59, 130, 246, 0.25),
        0 0 0 1px rgba(59, 130, 246, 0.12);
    transition:
        background-color 0.16s ease,
        box-shadow 0.16s ease;
}

.drop-zone-ready::after,
.drag-over::after {
    content: "";
    position: absolute;
    inset: var(--dd-inset);
    border: 2px dashed var(--dd-ring);
    border-radius: max(0px, calc(var(--dd-radius, 0.35rem) - 1px));
    box-sizing: border-box;
    pointer-events: none;
    z-index: 5;
    transition:
        border-color 0.16s ease,
        border-width 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
}

.drop-zone-ready::after {
    background: rgba(59, 130, 246, 0.06);
    animation: dd_ready_pulse 1.2s ease-in-out infinite;
}

.drag-over {
    background-color: var(--dd-fill-strong) !important;
    box-shadow:
        inset 0 0 0 1px rgba(37, 99, 235, 0.45),
        0 0 0 2px rgba(37, 99, 235, 0.22);
}

.drag-over::after {
    border-style: solid;
    border-width: 2.5px;
    border-color: var(--dd-accent);
    background: rgba(37, 99, 235, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    animation: none;
    opacity: 1;
}

@keyframes dd_ready_pulse {
    0%, 100% {
        opacity: 0.7;
        border-color: var(--dd-ring-soft);
    }
    50% {
        opacity: 1;
        border-color: var(--dd-ring);
    }
}

@media (prefers-reduced-motion: reduce) {
    .drop-zone-ready,
    .drag-over,
    .drop-zone-ready::after,
    .drag-over::after {
        transition: none;
        animation: none !important;
    }
    .drop-zone-ready::after {
        opacity: 1;
        border-color: var(--dd-ring);
    }
}