html:not(.motion-ready) .anim-fade,
html:not(.motion-ready) .anim-reveal-up .elementor-heading-title,
html:not(.motion-ready) .anim-reveal-down .elementor-heading-title,
html:not(.motion-ready) .anim-line-left .elementor-divider-separator,
html:not(.motion-ready) .anim-line-right .elementor-divider-separator {
  animation-play-state: paused !important;
}

html.motion-ready .anim-fade,
html.motion-ready .anim-reveal-up .elementor-heading-title,
html.motion-ready .anim-reveal-down .elementor-heading-title,
html.motion-ready .anim-line-left .elementor-divider-separator,
html.motion-ready .anim-line-right .elementor-divider-separator {
  animation-play-state: running !important;
}

@supports not (translate: 0 0) {
  html:not(.motion-ready) .anim-fade-up { animation-play-state: paused !important; }
  html.motion-ready .anim-fade-up { animation-play-state: running !important; }
}


/* ==========================================================
   1. DÉLAIS LINÉAIRES (usage simple)
   ========================================================== */
.delay-05 { --delay: 0.075s; }
.delay-1  { --delay: 0.15s; }
.delay-15 { --delay: 0.225s; }
.delay-2  { --delay: 0.3s; }
.delay-25 { --delay: 0.375s; }
.delay-3  { --delay: 0.45s; }
.delay-35 { --delay: 0.525s; }
.delay-4  { --delay: 0.6s; }
.delay-45 { --delay: 0.675s; }
.delay-5  { --delay: 0.75s; }

/* ==========================================================
   2. STAGGER POWER3.OUT (séquences d'éléments)
   ========================================================== */
.stagger-out3-1 { --delay: 0.1s; --duration: 1s; --duration-opacity: 0.6s; --duration-transform: 1s; }
.stagger-out3-2 { --delay: 0.18s; --duration: 1s; --duration-opacity: 0.6s; --duration-transform: 1s; }
.stagger-out3-3 { --delay: 0.3s; --duration: 1s; --duration-opacity: 0.6s; --duration-transform: 1s; }
.stagger-out3-4 { --delay: 0.48s; --duration: 1s; --duration-opacity: 0.6s; --duration-transform: 1s; }
.stagger-out3-5 { --delay: 0.72s; --duration: 1s; --duration-opacity: 0.6s; --duration-transform: 1s; }
.stagger-out3-6 { --delay: 1.05s; --duration: 1s; --duration-opacity: 0.6s; --duration-transform: 1s; }

/* ==========================================================
   3. ANIMATION FADE (conteneurs, blocs texte)
   ========================================================== */
.anim-fade {
    opacity: 0;
    animation: customFadeIn var(--duration, 0.4s) ease-out var(--delay, 0s) forwards;
}

@keyframes customFadeIn {
    to { opacity: 1; }
}

.elementor-editor-active .anim-fade {
    opacity: 1 !important;
}

/* ==========================================================
   4. ANIMATION FADE-UP (cards, éléments stagger)
   ========================================================== */
/* Version moderne (Chrome, Safari, Edge) */
@supports (translate: 0 0) {
  html:not(.motion-ready) .anim-fade-up {
    opacity: 0 !important;
    translate: 0 20px !important;
  }

  html.motion-ready .anim-fade-up {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition:
      opacity var(--duration-opacity, 0.6s) ease-out,
      translate var(--duration-transform, 1s) cubic-bezier(0.22, 1, 0.36, 1) !important;
    transition-delay: var(--delay, 0s) !important;
  }
}


/* Fallback navigateurs anciens (Firefox, etc.) */
@supports not (translate: 0 0) {
    .anim-fade-up {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp var(--duration-transform, 1s) cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) forwards;
    }
}

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

.elementor-editor-active .anim-fade-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
    translate: 0 0 !important;
}

/* ==========================================================
   5. ANIMATION REVEAL UP/DOWN (titres)
   ========================================================== */
.anim-reveal-up {
    overflow: hidden !important;
}

.anim-reveal-up .elementor-heading-title {
    opacity: 0;
    transform: translateY(100%);
    animation: revealUp var(--duration, 1.2s) cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) forwards;
}

.anim-reveal-down {
    overflow: hidden !important;
}

.anim-reveal-down .elementor-heading-title {
    opacity: 0;
    transform: translateY(-100%);
    animation: revealDown var(--duration, 0.6s) cubic-bezier(0.65, 0.05, 0.36, 1) var(--delay, 0s) forwards;
}

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

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

.elementor-editor-active .anim-reveal-up .elementor-heading-title,
.elementor-editor-active .anim-reveal-down .elementor-heading-title {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ==========================================================
   6. ANIMATION LIGNES
   ========================================================== */
.anim-line-left .elementor-divider-separator,
.anim-line-right .elementor-divider-separator {
    transform: scaleX(0);
}

.anim-line-left .elementor-divider-separator {
    transform-origin: right;
    animation: drawLine var(--duration, 0.8s) cubic-bezier(0.83, 0, 0.17, 1) var(--delay, 0s) forwards;
}

.anim-line-right .elementor-divider-separator {
    transform-origin: left;
    animation: drawLine var(--duration, 0.8s) cubic-bezier(0.83, 0, 0.17, 1) var(--delay, 0s) forwards;
}

@keyframes drawLine {
    to { transform: scaleX(1); }
}

.elementor-editor-active .anim-line-left .elementor-divider-separator,
.elementor-editor-active .anim-line-right .elementor-divider-separator {
    transform: scaleX(1) !important;
}

/* ==========================================================
   7. ANIMATIONS ELEMENTOR - Override distance (100px → 30px)
   ========================================================== */
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -30px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-30px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(30px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}