.elementor-3481 .elementor-element.elementor-element-a6865ce{--display:flex;}.elementor-3481 .elementor-element.elementor-element-22fde5c{--display:flex;}.elementor-3481 .elementor-element.elementor-element-2e95d05{--display:flex;}.elementor-3481 .elementor-element.elementor-element-e3a6b17{--display:flex;}.elementor-3481 .elementor-element.elementor-element-46a9c4c{--display:flex;}.elementor-3481 .elementor-element.elementor-element-46a9c4c:not(.elementor-motion-effects-element-type-background), .elementor-3481 .elementor-element.elementor-element-46a9c4c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}/* Start custom CSS for html, class: .elementor-element-3bbce4d *//* =========================
   HIGHLIGHT (mot plateforme)
   ========================= */
.highlight {
  color: #5a4fcf;
  position: relative;
  display: inline-block;
}

.highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 4px;
  background: #ff3b3b;
  border-radius: 2px;

  transform: scaleX(0);
  transform-origin: left;

  /* arrive après tout */
  animation: underlineAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

@keyframes underlineAppear {
  0% { transform: scaleX(0); }
  80% { transform: scaleX(1.05); }
  100% { transform: scaleX(1); }
}


/* =========================
   ANIMATIONS TEXTE (fade + slide)
   ========================= */
.hero-left > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-left h1 { animation-delay: 0.1s; }
.hero-left p { animation-delay: 0.25s; }
.tags { animation-delay: 0.4s; }
.cta-row { animation-delay: 0.55s; }
.mediation-box { animation-delay: 0.7s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================
   IMAGE HERO (entrée + float clean)
   ========================= */
.hero-right img {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  animation:
    imageEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards,
    floatImage 5s ease-in-out 1.2s infinite;
}

/* apparition */
@keyframes imageEntrance {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================
   ANIMATION TEXTE
   ========================= */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* délais */
.hero-left .reveal:nth-child(1) { animation-delay: 0.1s; }
.hero-left .reveal:nth-child(2) { animation-delay: 0.25s; }
.hero-left .reveal:nth-child(3) { animation-delay: 0.4s; }
.hero-left .reveal:nth-child(4) { animation-delay: 0.55s; }
.hero-left .reveal:nth-child(5) { animation-delay: 0.7s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================
   HIGHLIGHT + TRAIT
   ========================= */
.highlight {
  color: #5a4fcf;
  position: relative;
  display: inline-block;
}

.highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 4px;
  background: #ff3b3b;
  border-radius: 2px;

  transform: scaleX(0);
  transform-origin: left;

  animation: underlineAppear 0.6s ease-out 0.9s forwards;
}

@keyframes underlineAppear {
  0% { transform: scaleX(0); }
  80% { transform: scaleX(1.05); }
  100% { transform: scaleX(1); }
}


/* =========================
   IMAGE ULTRA FLUIDE
   ========================= */
.hero-image-wrapper {
  opacity: 0;
  transform: translateY(40px);
  animation: imageReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  will-change: transform, opacity;
}

.hero-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  animation: floatSmooth 6s ease-in-out 1.2s infinite;
  will-change: transform;
}

@keyframes imageReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatSmooth {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-14542f8 */@media (max-width: 768px) {

  .timeline {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  /* On enlève la ligne */
  .timeline::before {
    display: none;
  }

  /* Chaque étape prend toute la largeur */
  .step {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  /* Cercle centré */
  .circle {
    margin: 0 auto 15px;
  }

  /* Titres étapes */
  .step h4 {
    font-size: 16px;
    text-align: center;
  }

  /* Texte étapes */
  .step p {
    max-width: none;
    padding: 0 20px;
    line-height: 1.6;
    font-size: 15px;
    text-align: center;
  }

  /* 🔥 TITRE "NOTRE MÉTHODE" */
  .section-methode .subtitle {
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  /* 🔥 GROS TITRE */
  .section-methode h2 {
    font-size: 26px;
    line-height: 1.3;
    padding: 0 10px;
  }

  /* 🔥 TEXTE INTRO */
  .section-methode .description {
    font-size: 14px;
    padding: 0 20px;
    line-height: 1.6;
  }
}/* End custom CSS */