/* ═══════════════════════════════════════════
   AVANT / APRÈS — comparateur à poignée
   Activé par window.BEFORE_AFTER dans chaque page projet.
   ═══════════════════════════════════════════ */

.ba-section {
  padding: clamp(2rem, 6vh, 5rem) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.ba-section > .label { display: block; margin-bottom: 1.5rem; }

.ba-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.ba-list--pair { grid-template-columns: 1fr 1fr; }

.ba__caption {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--ink-40);
}

.ba {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ba-ratio, 4 / 3);
  overflow: hidden;
  background: var(--cream-warm);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* The "après" layer is clipped from the left by the handle position */
.ba__after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }

.ba__tag {
  position: absolute; bottom: 1rem; z-index: 3;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: rgba(26,22,21,0.6);
  padding: 0.45rem 0.8rem;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.ba__tag--before { left: 1rem; }
.ba__tag--after  { right: 1rem; }

.ba__handle {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  left: var(--ba-pos, 50%);
  width: 2px; margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,0.28);
  display: flex; align-items: center; justify-content: center;
  gap: 3px;
  transition: transform 0.25s var(--ease);
}
.ba:hover .ba__grip { transform: translate(-50%, -50%) scale(1.08); }
.ba__grip svg {
  width: 15px; height: 15px;
  stroke: var(--brand); stroke-width: 2; fill: none;
}
.ba__handle:focus-visible { outline: none; }
.ba__handle:focus-visible .ba__grip {
  box-shadow: 0 0 0 3px var(--brand), 0 2px 14px rgba(0,0,0,0.28);
}

@media (max-width: 900px) {
  .ba-list--pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ba__grip, .ba__tag { transition: none; }
}