/* Comparateur avant / après, partagé par les modèles B et C. */
.aa { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; user-select: none; max-width: 100%; background: #eef0f2; }
.aa-vue { position: absolute; inset: 0; display: grid; place-items: end start; padding: 12px; }
.aa-vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aa-apres { clip-path: inset(0 0 0 var(--pos, 50%)); place-items: end end; }
.aa-sale { background:
  radial-gradient(circle at 22% 32%, #a08a68b0 0 13%, transparent 14%),
  radial-gradient(circle at 68% 62%, #8f7a58a0 0 17%, transparent 18%),
  repeating-linear-gradient(45deg, #d9d0c2 0 12px, #cfc4b3 12px 24px); }
.aa-propre { background: repeating-linear-gradient(45deg, #ffffff 0 12px, #f2f5f8 12px 24px); }
.aa-texte { position: relative; font: 600 12px/1 ui-monospace, monospace; color: #4a5562; background: #ffffffd9; padding: 6px 9px; border-radius: 6px; }
.aa-tag { position: absolute; top: 10px; z-index: 2; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; background: #000000a0; color: #fff; padding: 6px 8px; border-radius: 6px; }
.aa-g { left: 10px; } .aa-d { right: 10px; }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; translate: -50% 0; z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px #0002; }
.aa-poignee::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1b2633; display: grid; place-items: center; font: 700 15px/1 sans-serif; box-shadow: 0 3px 12px #0004; }
.aa input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3; margin: 0; }