/* OLEA — widget « Avant / après » : le curseur .olea-avap de la maquette (accueil,
   « Du verger tunisien à votre table »). Les variables --avap-* et la hauteur
   minimale sont posées par les réglages du widget ; --coupe suit le curseur. */
.elementor-widget-olea-avant-apres { margin: 0; height: 100%; }
.elementor-widget-olea-avant-apres > .elementor-widget-container { height: 100%; }
.olea-avap {
  --coupe: 50%; --avap-barre: #F1E8D4; --avap-chevrons: #6E4E2C; --avap-et: #F1E8D4; --avap-et-fond: rgba(42,30,16,.72);
  position: relative; overflow: hidden; height: 100%; min-height: 420px;
}
/* (0,2,0) : passe devant .elementor img { height: auto } qui arrive après cette feuille */
.olea-avap .olea-avap__fond, .olea-avap .olea-avap__dessus {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  margin: 0; border-radius: 0; max-width: none;
}
.olea-avap__dessus { clip-path: inset(0 calc(100% - var(--coupe)) 0 0); }
.olea-avap__et {
  position: absolute; bottom: 16px; z-index: 3; padding: 5px 13px; border-radius: 999px;
  background: var(--avap-et-fond); color: var(--avap-et);
  font: 700 13px/1 var(--e-global-typography-text-font-family, 'Manrope'), sans-serif; letter-spacing: .18em; text-transform: uppercase; pointer-events: none;
}
.olea-avap__et--g { left: 16px; }
.olea-avap__et--d { right: 16px; }
.olea-avap__barre {
  position: absolute; top: 0; bottom: 0; left: var(--coupe); z-index: 4; width: 2px; margin-left: -1px;
  background: var(--avap-barre); pointer-events: none;
}
.olea-avap__barre i {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px;
  background: var(--avap-barre); box-shadow: 0 2px 10px rgba(3,9,10,.3);
  display: grid; place-items: center; color: var(--avap-chevrons); font-style: normal;
}
.olea-avap__barre svg { display: block; }
.olea-avap .olea-avap__curseur {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
  touch-action: pan-y; /* 1.9.57 : le glissement horizontal est a nous (olea-avant-apres.js), le defilement vertical reste au navigateur */
}
.olea-avap.olea-avap--glisse { user-select: none; -webkit-user-select: none; }
.olea-avap .olea-avap__curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; cursor: ew-resize; }
.olea-avap .olea-avap__curseur::-moz-range-thumb { width: 48px; height: 100%; border: 0; cursor: ew-resize; }
.olea-avap:has(.olea-avap__curseur:focus-visible) .olea-avap__barre { outline: 3px solid var(--e-global-color-accent, #B38958); outline-offset: 2px; }
@media (max-width: 1024px) { .olea-avap { min-height: 340px; } }