/*! TPE Motion v1.1 — Craftech Digital */

/* ---- Réglages (modifiables dans Elementor > Site Settings > Custom CSS) ---- */
:root {
  --tpe-accent: #EC008C;        /* magenta process CMJN */
  --tpe-cyan: #00AEEF;          /* cyan process CMJN */
  --tpe-hero-strength: .72;     /* 0 = vidéo brute, 1 = trame totale */
  --tpe-mesh-1: #7A0B4F;
  --tpe-mesh-2: #0B3D5C;
  --tpe-mesh-3: #1A0F24;
  --tpe-mesh-4: #EC008C;        /* couleur qui suit la souris */
  --tpe-step-active: #FFFA45;   /* process : ligne + numéro actif (jaune du site) */
  --tpe-step-track: rgba(255, 255, 255, .28);
}

/* ---- Canvases WebGL ---- */
.tpe-gl { position: absolute; display: block; pointer-events: none; }
.tpe-gl--hero,
.tpe-gl--mesh { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.tpe-gl--hero { z-index: 1; }
.tpe-gl--mesh { z-index: 0; }
.tpe-gl.is-ready { opacity: 1; }
.tpe-gl--img { z-index: 2; visibility: hidden; }
.tpe-gl--bg { inset: 0; width: 100%; height: 100%; z-index: auto; }

.tpe-mesh { position: relative; overflow: hidden; isolation: isolate; }
.tpe-mesh > :not(.tpe-gl) { position: relative; z-index: 1; }

/* ---- Révélation tache d'encre : l'image attend le shader ---- */
html.tpe-js .tpe-ink img { opacity: 0; }
html.tpe-js .tpe-ink.is-done img,
html.tpe-js .tpe-ink.is-fallback img { opacity: 1; }

/* ---- Titres mot par mot ---- */
.tpe-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.tpe-wi { display: inline-block; will-change: transform; }

/* ---- Compteurs : remplissage encre ---- */
/* .tpe-ink-counter :is(.elementor-counter-number-wrapper, .number-percentage-wraper) {
  background: linear-gradient(to top, var(--tpe-accent) 50%, currentColor 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 2.2s cubic-bezier(.22, 1, .36, 1) .2s;
}
.tpe-ink-counter.is-in :is(.elementor-counter-number-wrapper, .number-percentage-wraper) { background-position: 0 100%; } */

/* ---- Process ---- */ 

/* ---- Tilt : les animations d'entrée Elementor ne doivent pas bloquer la transformation ---- */
.tpe-tilt.animated { animation-fill-mode: backwards; }

/* ---- Partenaires : défilement infini ---- */
.tpe-marquee.is-marquee > :not(.tpe-marquee__wrap) { display: none !important; }
.tpe-marquee__wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tpe-marquee__track { display: flex; width: max-content; animation: tpe-marquee 45s linear infinite; }
.tpe-marquee__wrap:hover .tpe-marquee__track { animation-play-state: paused; }
.tpe-marquee__set { display: flex; align-items: center; gap: clamp(32px, 5vw, 72px); padding-right: clamp(32px, 5vw, 72px); }
.tpe-marquee__set img {
  height: clamp(36px, 4vw, 56px); width: auto; max-width: none; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: filter .4s ease, opacity .4s ease;
}
.tpe-marquee__set img:hover { filter: none; opacity: 1; }
@keyframes tpe-marquee { to { transform: translateX(-50%); } }

/* ---- Smooth scroll (Lenis) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  .tpe-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .tpe-marquee__set[aria-hidden] { display: none; }
  .tpe-marquee__wrap { -webkit-mask-image: none; mask-image: none; }
}
.elementor-widget-video canvas { display: none !important; }