.before-after { position: relative; overflow: hidden; background: #d7d0c8; }
.ba-layer { position: absolute; inset: 0; background-position: center; background-size: cover; }
.ba-after { background-image: url('assets/facade-apres.heic'); }
.ba-before { z-index: 2; background-image: linear-gradient(rgba(59,42,32,.2), rgba(59,42,32,.2)), url('assets/facade-avant.heic'); }
.ba-layer span { position: absolute; top: 16px; padding: 10px 14px; border: 2px solid #fff; border-radius: 999px; background: #211b17; color: #fff; box-shadow: 0 3px 12px #0005; font: 800 12px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ba-after span { background: var(--o); color: #211b17; }
.ba-after span { right: 16px; }
.ba-before span { left: 16px; }
.ba-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-handle { position: absolute; z-index: 3; top: 0; bottom: 0; width: 6px; background: #fff; box-shadow: -3px 0 0 #211b1755, 3px 0 0 #211b1755; transform: translateX(-50%); pointer-events: none; }
.ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%,-50%); border: 3px solid white; border-radius: 50%; background: var(--o); box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.realisation-card:focus-within { outline: 3px solid var(--o); outline-offset: 5px; }
.ba-handle svg { position: absolute; z-index: 1; top: 50%; left: 50%; width: 18px; transform: translate(-50%,-50%); color: var(--ink); }
.realisation-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.projects .section-title { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.projects .section-title h2 { font-size: clamp(52px, 5.4vw, 82px); }
.projects .section-title > p:last-child { max-width: 570px; margin: 24px auto 0; padding: 0; border: 0; color: #f0e7e0; font: 20px/1.5 'DM Serif Display', serif; }
.realisation-card { min-height: 315px; border-radius: 18px; box-shadow: 0 13px 26px rgba(0,0,0,.2); }
.ba-caption { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; padding: 42px 20px 19px; color: #fff; pointer-events: none; background: linear-gradient(0deg, rgba(18,13,10,.88), transparent); }
.ba-caption span { color: #ffb370; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ba-caption h3 { margin: 6px 0 0; font-size: 27px; line-height: 1; }
.realisation-grid .realisation-card { aspect-ratio: 4 / 5; min-height: 0; background: #302820; }
.realisation-card .ba-layer { bottom: 96px; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.realisation-card .ba-before { overflow: hidden; background-color: #302820; }
.realisation-card .ba-before span { z-index: 1; }
.realisation-card .ba-range { bottom: 96px; height: calc(100% - 96px); }
.realisation-card .ba-handle { bottom: 96px; }
.realisation-card .ba-caption { min-height: 96px; box-sizing: border-box; padding: 16px 20px; background: #211b17; }
@media (max-width: 900px) { .realisation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .projects .section-title h2 { font-size: clamp(46px, 13vw, 60px); } .projects .section-title > p:last-child { font-size: 18px; } .realisation-grid { grid-template-columns: 1fr; gap: 14px; } .realisation-card { min-height: 300px; } }