/* ── Theme variables ── */
:root, .layer-light {
    --c-creme: 250 247 242;
    --c-creme-dark: 240 235 227;
    --c-brun: 139 69 19;
    --c-brun-light: 160 82 45;
    --c-brun-dark: 107 52 16;
    --c-encre: 44 36 23;
}

.layer-dark {
    --c-creme: 30 27 22;
    --c-creme-dark: 38 34 28;
    --c-brun: 186 130 82;
    --c-brun-light: 200 148 100;
    --c-brun-dark: 160 108 65;
    --c-encre: 232 228 220;
}

/* ── Body ── */
body.rideau-active {
    overflow: hidden;
    cursor: col-resize;
}

/* ── Layers ── */
.layer {
    position: fixed;
    inset: 0;
    overflow-y: auto;
}

.layer-dark {
    background: rgb(var(--c-creme));
    z-index: 1;
}

.layer-light {
    background: rgb(var(--c-creme));
    z-index: 2;
    clip-path: inset(0 0 0 0);
}

/* ── Slider ── */
#slider {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(139 69 19);
    z-index: 10;
    cursor: col-resize;
}

#slider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgb(139 69 19);
    background: rgba(30, 27, 22, 0.7);
    backdrop-filter: blur(4px);
}

#slider::after {
    content: '◂ ▸';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(139 69 19);
    font-size: 10px;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* ── Hide scrollbars on layers ── */
.layer::-webkit-scrollbar { width: 0; }
.layer { scrollbar-width: none; }