/* Avant / apres : deux photos du meme point de vue, cote a cote, visibles d'un coup d'oeil.
   Aucune action du visiteur, aucun JavaScript. */
.cmp-wrap { margin: 0 0 28px; }
.cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 10px;
  overflow: hidden;
}
.cmp__side { margin: 0; position: relative; background: #eee; }
.cmp__side picture { display: block; }
.cmp__side img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cmp__side figcaption {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(26, 30, 33, 0.78); padding: 4px 10px; border-radius: 12px;
}
.cmp__side--apres figcaption { background: rgba(138, 109, 47, 0.92); }
.cmp__legende { margin: 8px 0 0; font-size: 0.9rem; color: #555; text-align: center; }
@media (max-width: 600px) {
  .cmp { gap: 4px; border-radius: 8px; }
  .cmp__side figcaption { top: 6px; left: 6px; font-size: 0.62rem; padding: 3px 7px; }
}