/* M17 — Avant / après à glisser (Atelier WP, 09/10/2026).
   Transforme un bloc de deux photos (.rp-aa de la direction Repère, ou tout
   groupe .atelier-avant-apres) en comparateur à poignée. Sans JavaScript :
   les deux photos restent côte à côte. */
.aa-slider { position: relative !important; display: block !important; overflow: hidden; touch-action: pan-y; }
.aa-slider > :first-child { position: relative; margin: 0 !important; }
.aa-slider > :nth-child(2) { position: absolute !important; inset: 0; margin: 0 !important; clip-path: inset(0 0 0 var(--aa, 50%)); }
.aa-slider > :nth-child(2) .wp-block-image,
.aa-slider > :nth-child(2) figure { height: 100%; margin: 0 !important; }
.aa-slider > :nth-child(2) img { height: 100% !important; width: 100%; object-fit: cover; }
.aa-slider > :nth-child(2) [class*="label"] { left: auto !important; right: 14px; }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--aa, 50%); width: 2px; background: #FFFFFF; transform: translateX(-1px); pointer-events: none; z-index: 3; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.aa-poignee::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: #16211F; display: grid; place-items: center; font-size: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }
.aa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.aa-curseur:focus-visible + .aa-poignee::after { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }