/* Base styles converted from the component's shadow DOM */
.img-comparison-slider {
  --divider-width: 1px;
  --divider-color: #fff;
  --divider-shadow: none;
  --default-handle-width: 50px;
  --default-handle-color: #fff;
  --default-handle-opacity: 1;
  --default-handle-shadow: none;
  --handle-position-start: 50%;
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  direction: ltr;
  cursor: grab;
  touch-action: pan-y;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .img-comparison-slider {
    outline-offset: 1px;
  }
}
.img-comparison-slider:focus {
  outline: 2px solid -webkit-focus-ring-color;
}
.img-comparison-slider * {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.img-comparison-slider .first {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  line-height: normal;
  font-size: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  --exposure: 50%;
  --keyboard-transition-time: 0ms;
  --default-transition-time: 0ms;
  --transition-time: var(--default-transition-time);
}
.img-comparison-slider .first .first-overlay-container {
  position: relative;
  clip-path: inset(0 var(--exposure) 0 0);
  transition: clip-path var(--transition-time);
  height: 100%;
}
.img-comparison-slider .first .first-overlay {
  overflow: hidden;
  height: 100%;
}
.img-comparison-slider .first.focused {
  will-change: clip-path;
}
.img-comparison-slider .first.focused .first-overlay-container {
  will-change: clip-path;
}
.img-comparison-slider .second {
  position: relative;
}
.img-comparison-slider .handle-container {
  transform: translateX(50%);
  position: absolute;
  top: 0;
  right: var(--exposure);
  height: 100%;
  transition: right var(--transition-time), bottom var(--transition-time);
}
.img-comparison-slider .focused .handle-container {
  will-change: right;
}
.img-comparison-slider .divider {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.img-comparison-slider .divider:after {
  content: " ";
  display: block;
  height: 100%;
  border-left-width: var(--divider-width);
  border-left-style: solid;
  border-left-color: var(--divider-color);
  box-shadow: var(--divider-shadow);
}
.img-comparison-slider .handle {
  position: absolute;
  top: var(--handle-position-start);
  pointer-events: none;
  box-sizing: border-box;
  margin-left: 1px;
  transform: translate(calc(-50% - 0.5px), -50%);
  line-height: 0;
}
.img-comparison-slider .default-handle {
  width: var(--default-handle-width);
  opacity: var(--default-handle-opacity);
  transition: all 1s;
  filter: drop-shadow(var(--default-handle-shadow));
}
.img-comparison-slider .default-handle path {
  stroke: var(--default-handle-color);
}
.img-comparison-slider.vertical .first-overlay-container {
  clip-path: inset(0 0 var(--exposure) 0);
}
.img-comparison-slider.vertical .handle-container {
  transform: translateY(50%);
  height: auto;
  top: unset;
  bottom: var(--exposure);
  width: 100%;
  left: 0;
  flex-direction: row;
}
.img-comparison-slider.vertical .divider:after {
  height: 1px;
  width: 100%;
  border-top-width: var(--divider-width);
  border-top-style: solid;
  border-top-color: var(--divider-color);
  border-left: 0;
}
.img-comparison-slider.vertical .handle {
  top: auto;
  left: var(--handle-position-start);
  transform: translate(calc(-50% - 0.5px), -50%) rotate(90deg);
}

/* Custom plugin styles */
.img-comparison-slider {
  visibility: hidden;
  outline: none;
  --default-handle-width: 100px;
  --divider-width: 2px;
  --divider-color: var(--e-global-color-cf746cf);
  --default-handle-opacity: 0;
}

.img-comparison-slider .ics-handle {
  transition: transform 0.3s ease-in-out;
}

.img-comparison-slider:hover .ics-handle {
  transform: scale(1.1);
}

.img-comparison-slider .ics-handle-img {
  position: absolute;
    left: 0;
    transform: translateX(20px) translateY(-15px);
    width: 60px;
    height: 60px;
}

.img-comparison-slider .after {
  display: none;
}

.img-comparison-slider.rendered {
  visibility: inherit;
}

.img-comparison-slider.rendered .after {
  display: block;
}

.img-comparison-slider.before,
.img-comparison-slider .after {
  margin: 0;
  position: relative;
}

.img-comparison-slider .before figcaption,
.img-comparison-slider .after figcaption {
  background: rgb(0 0 0 / 6%);
  color: var(--e-global-color-cf746cf);
  padding: 0.5em 1.2em 0.3em 1.2em;
  position: absolute;
  top: 40px;
  transform: translateY(-50%);
  font-style: normal;
}

.img-comparison-slider .before figcaption {
  left: 40px;
  z-index: 2;
}

.img-comparison-slider .after figcaption {
  right: 40px;
  z-index: 0;
}

.img-comparison-slider {
    border-radius: 30px;
}
.img-comparison-slider figcaption {
    border-radius: 30px;
    background: none;
    border: solid  1px white;
    padding: 5px;
    text-align: center;
}

@media (max-width: 767px) {

  .img-comparison-slider .before figcaption {
    left: 15px;
    top:30px;
  }
  
  .img-comparison-slider .after figcaption {
    right: 15px;
    top:30px;
  }
  
  .img-comparison-slider {
    border-radius: 20px;
  }
  
  .img-comparison-slider .ics-handle,
  .img-comparison-slider:hover .ics-handle {
    transform: scale(0.8);
  }
  
}


/* ---------- Elementor widget (répéteur) ---------- */
.aic-repeater-wrapper {
  width: 100%;
}

.aic-item {
  width: 100%;
}

.aic-item .img-comparison-slider {
  display: block;
  width: 100%;
}

.aic-title {
  margin: 0 0 15px 0;
}

.aic-notice {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  background: rgba(0,0,0,0.03);
}

/* Handle personnalisable */
.img-comparison-slider .aic-handle {
  --aic-handle-size: 95px;
  width: var(--aic-handle-size);
  height: var(--aic-handle-size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
}

.img-comparison-slider .aic-handle .aic-handle-media {
 width: 50%;
    display: block;
    position: absolute;
    background: #fff;
    height: 50%;
    border-radius: 50px;
    padding: 5px;
}

.img-comparison-slider .aic-handle svg {
  width: 100%;
  height: auto;
}

.img-comparison-slider .aic-handle i {
  font-size: calc(var(--aic-handle-size) * 0.45);
}

.img-comparison-slider .aic-handle .e-font-icon-svg {
  width: calc(var(--aic-handle-size) * 0.45);
  height: calc(var(--aic-handle-size) * 0.45);
}