/* ------------------------------------------------------------------
   COMPARATEUR AVANT / APRÈS (page Réalisations)
   Structure : .avap > img(après) + .avap-avant > img(avant) + input[type=range] + .avap-poignee
   La position est pilotée par la variable --pos (0–100 %), mise à jour par main.js.
   ------------------------------------------------------------------ */
.avap { position: relative; overflow: hidden; --pos: 50%; touch-action: pan-y; user-select: none; }
.avap > img, .avap-avant img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avap-avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.avap-poignee {
    position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
    background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); pointer-events: none;
}
.avap-poignee::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 3.25rem; height: 3.25rem;
    transform: translate(-50%, -50%); border-radius: 999px; background-color: #4CAF50;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    /* deux chevrons blancs */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 1.6rem;
}
.avap input[type="range"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.avap input[type="range"]:focus-visible ~ .avap-poignee::after { outline: 3px solid #005728; outline-offset: 3px; }
.avap-etiquette {
    position: absolute; bottom: 1rem; padding: .3rem .8rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: #005728; pointer-events: none;
}

/* Petit balayage d'introduction, une seule fois (pas de "fill-mode" : il rend ensuite la main au curseur) */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.avap.avap-intro { animation: avap-balayage 2.2s ease-in-out .8s 1; }
@keyframes avap-balayage { 0% { --pos: 50%; } 35% { --pos: 78%; } 70% { --pos: 26%; } 100% { --pos: 50%; } }

@media (prefers-reduced-motion: reduce) {
    .avap.avap-intro { animation: none; }
}