/* =====================================================
   SECTION 01 — EVERY BRAND IS AN ECOSYSTEM
===================================================== */

.sv-ecosystem-left{
  position:relative !important;
  overflow:hidden !important;
  height:clamp(620px,58vw,760px) !important;
  background:#000 !important;
  isolation:isolate;
}

/* Vidéo */
.sv-ecosystem-left .sv-video-widget{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  width:100% !important;
  height:100% !important;
}

.sv-ecosystem-left .sv-video-card{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

.sv-ecosystem-left .sv-section-video{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 5% !important;
  transform:translate(-50%,-50%) scale(1.08) !important;
  display:block !important;
}

/* Overlay */
.sv-ecosystem-left::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,.25) 52%,
    rgba(0,0,0,.70) 100%
  );
}

/* Contenu au-dessus */
.sv-ecosystem-left > .elementor-element:not(.sv-video-widget){
  position:relative !important;
  z-index:2 !important;
}

/* Titre animé */
.sv-ecosystem-left .word-reveal{
  margin:0;
  max-width:520px;
  font-family:Inter,Arial,sans-serif;
  font-size:58px;
  font-weight:700;
  line-height:.95;
  letter-spacing:-.055em;
  color:#fff !important;
}

.sv-ecosystem-left .word-reveal span{
  opacity:1 !important;
  color:#fff !important;
  transition:color .35s ease;
}

.sv-ecosystem-left .word-reveal span.active{
  color:#79CFD2 !important;
}

/* Lettrine */
.sv-dropcap{
  float:left;
  font-size:5.2rem;
  line-height:.72;
  font-weight:800;
  margin:.05em .18em 0 0;
  color:#79CFD2 !important;
  font-family:Inter,sans-serif;
}

/* Liste services — flèche à droite + animation */
.sv-services-list .elementor-icon-list-item,
.sv-services-list .elementor-icon-list-item a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
}

.sv-services-list .elementor-icon-list-text{
  order:1 !important;
  flex:1 !important;
}

.sv-services-list .elementor-icon-list-icon{
  order:2 !important;
  margin-left:16px !important;
  margin-right:0 !important;
  opacity:.35 !important;
  transform:translateX(0) !important;
  transition:
    opacity .3s ease,
    transform .3s cubic-bezier(.22,1,.36,1) !important;
}

.sv-services-list .elementor-icon-list-item:hover .elementor-icon-list-icon{
  opacity:1 !important;
  transform:translateX(7px) !important;
}

@media (max-width:767px){

  .sv-services-list li,
  .sv-services-list li a,
  .sv-services-list li span,
  .sv-services-list .elementor-icon-list-text,
  .sv-services-list .elementor-icon-list-text span{
    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:500 !important;
    letter-spacing:-0.02em !important;
  }

  .sv-services-list .elementor-icon-list-item{
    padding:12px 0 !important;
  }

  .sv-services-list .elementor-icon-list-icon{
    transform:scale(.78) !important;
  }
}