/* =========================================================
   DBC · Comparateur d'images (Avant / Après)
   ========================================================= */

.dbc-comp {
    --dbc-comp-pos: 50%;
    --dbc-comp-handle: #ffffff;
    --dbc-comp-line: #ffffff;
    --dbc-comp-arrow: #0d4899;
    --dbc-comp-badge-bg: rgba(10, 25, 41, 0.78);
    --dbc-comp-badge-text: #ffffff;
    --dbc-comp-img-bg: #0a1929;

    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 18px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: #e8eef6;
    box-shadow: 0 24px 50px -24px rgba(13, 72, 153, 0.45);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: ew-resize;
}
.dbc-comp--vertical { cursor: ns-resize; }
.dbc-comp *, .dbc-comp *::before, .dbc-comp *::after { box-sizing: border-box; }

.dbc-comp__empty {
    padding: 40px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
}

/* Les deux couches d'images remplissent le conteneur (taille fixe) */
.dbc-comp__after,
.dbc-comp__before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--dbc-comp-img-bg);
}
.dbc-comp__after img,
.dbc-comp__before img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* image ENTIÈRE visible, jamais coupée */
    object-position: center;
    display: block;
    pointer-events: none;
}

/* L'image AVANT est clippée selon la position de la poignée */
.dbc-comp--horizontal .dbc-comp__before {
    clip-path: inset(0 calc(100% - var(--dbc-comp-pos)) 0 0);
}
.dbc-comp--vertical .dbc-comp__before {
    clip-path: inset(0 0 calc(100% - var(--dbc-comp-pos)) 0);
}

/* ============ ÉTIQUETTES ============ */
.dbc-comp__label {
    position: absolute;
    top: 16px;
    z-index: 4;
    padding: 7px 16px;
    border-radius: 30px;
    background: var(--dbc-comp-badge-bg);
    color: var(--dbc-comp-badge-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.dbc-comp__label--before { left: 16px; }
.dbc-comp__label--after  { right: 16px; }
.dbc-comp--vertical .dbc-comp__label--before { left: 16px; top: 16px; }
.dbc-comp--vertical .dbc-comp__label--after  { left: 16px; top: auto; bottom: 16px; right: auto; }

/* ============ POIGNÉE ============ */
.dbc-comp__handle {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
/* Horizontal : poignée verticale */
.dbc-comp--horizontal .dbc-comp__handle {
    top: 0;
    bottom: 0;
    left: var(--dbc-comp-pos);
    width: 0;
    transform: translateX(-50%);
    flex-direction: column;
}
/* Vertical : poignée horizontale */
.dbc-comp--vertical .dbc-comp__handle {
    left: 0;
    right: 0;
    top: var(--dbc-comp-pos);
    height: 0;
    transform: translateY(-50%);
    flex-direction: row;
}

/* Ligne de séparation */
.dbc-comp__line {
    position: absolute;
    background: var(--dbc-comp-line);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.dbc-comp--horizontal .dbc-comp__line {
    top: 0; bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
}
.dbc-comp--vertical .dbc-comp__line {
    left: 0; right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
}

/* Pastille centrale avec les flèches */
.dbc-comp__grip {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--dbc-comp-handle);
    color: var(--dbc-comp-arrow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: -4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.dbc-comp__grip svg { margin: 0 -3px; }
.dbc-comp--vertical .dbc-comp__grip { flex-direction: column; }
.dbc-comp--vertical .dbc-comp__grip svg { margin: -3px 0; }

.dbc-comp:hover .dbc-comp__grip,
.dbc-comp.is-active .dbc-comp__grip { transform: scale(1.1); }

/* Focus clavier accessible */
.dbc-comp__handle:focus-visible .dbc-comp__grip {
    outline: 3px solid var(--dbc-comp-arrow);
    outline-offset: 3px;
}

/* Indice "glissez" au repos, disparaît à l'interaction */
.dbc-comp__grip::after {
    content: '';
}

@media (max-width: 600px) {
    .dbc-comp__grip { width: 42px; height: 42px; }
    .dbc-comp__label { font-size: 11px; padding: 6px 13px; top: 12px; }
    .dbc-comp__label--before { left: 12px; }
    .dbc-comp__label--after  { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .dbc-comp__grip { transition: none !important; }
}