<style id="oui-threads">
/* ── Hero : fils tissés (remplace l'illustration du pont) ── */
.hero--c .hero-art.hero-threads { width:100%; left:0; top:clamp(10px,2vw,40px); height:min(62%, 560px); transform:translateY(var(--py,0px)); mix-blend-mode:normal; -webkit-mask-image:none; mask-image:none; }
.hero-threads svg { width:100%; height:100%; display:block; overflow:visible; }
.th-line { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.th-lines { filter:drop-shadow(0 6px 10px rgba(60,44,30,.10)); }
.th-bead { stroke:#fff; stroke-width:2.5; }
.th-knot { fill:#fff; stroke:var(--teal); stroke-width:2; }
.js-anim .hero-threads { animation:none; }
.js-anim .th-line { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:thDraw 2.4s cubic-bezier(.22,1,.36,1) forwards; animation-delay:var(--dl,0s); }
@keyframes thDraw { to { stroke-dashoffset:0; } }
.js-anim .th-beads, .js-anim .th-knots { opacity:0; animation:thFade 1s ease 2s forwards; }
@keyframes thFade { to { opacity:1; } }
@media (max-width:760px) {
  .hero--c .hero-art.hero-threads { position:relative; left:auto; top:auto; width:150%; height:220px; margin:0 0 -20px -25%; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .th-line { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .js-anim .th-beads, .js-anim .th-knots { opacity:1; animation:none; }
}
</style>
