<style id="oui-walk">
/* ── Hero A+ : la traversée accompagnée ── */
.hero--c .hero-art.hero-walk { width:100%; left:0; top:clamp(0px,1vw,20px); height:min(64%, 580px); transform:translateY(var(--py,0px)); mix-blend-mode:normal; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,#000 72%,transparent 100%); }
.hero-walk svg { width:100%; height:100%; display:block; overflow:visible; }
.wk-road { fill:none; stroke:#FAF7F3; stroke-width:46; stroke-linecap:round; filter:drop-shadow(0 6px 10px rgba(60,44,30,.08)); }
.wk-road-line { fill:none; stroke:var(--teal); stroke-width:3; stroke-dasharray:2 16; stroke-linecap:round; opacity:.7; }
.js-anim .wk-road-line { animation:wkDash 1.6s linear infinite; }
@keyframes wkDash { to { stroke-dashoffset:-18; } }
.wk-sun { transform-box:fill-box; transform-origin:center; animation:wkSun 9s ease-in-out infinite; }
@keyframes wkSun { 50% { transform:scale(1.06); } }
.wk-city .bld { fill:#CFE6E6; } .wk-city .bld2 { fill:#BBDCDD; } .wk-city .win { fill:#fff; opacity:.75; }
.wk-city .eiffel { fill:none; stroke:#9CC9CB; stroke-width:3; stroke-linejoin:round; }
.wk-tree-c { fill:#BFE0D6; } .wk-tree-t { stroke:#B9A88F; stroke-width:3; }
.wk-cloud { fill:#fff; opacity:.85; }
/* étapes */
.wk-step .post { stroke:#C9B59C; stroke-width:3; stroke-linecap:round; }
.wk-step .disc { fill:#fff; stroke:#E2D8CC; stroke-width:2.5; transition:fill .5s, stroke .5s; }
.wk-step .ico { fill:none; stroke:#A7A9AC; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .5s; }
.wk-step .pill { fill:#fff; filter:drop-shadow(0 4px 8px rgba(60,44,30,.10)); transition:fill .5s; }
.wk-step .lbl { font:800 12px Inter, sans-serif; fill:var(--text-lt); transition:fill .5s; }
.wk-step .ring { fill:none; stroke:var(--teal); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.wk-step.lit .disc { fill:var(--teal); stroke:var(--teal); }
.wk-step.lit .ico { stroke:#fff; }
.wk-step.lit .pill { fill:var(--dark); }
.wk-step.lit .lbl { fill:#fff; }
.wk-step.pop .ring { animation:wkRing 1.2s ease-out; }
@keyframes wkRing { 0% { opacity:.8; transform:scale(1); } 100% { opacity:0; transform:scale(2.2); } }
.wk-step.last.lit .disc { fill:var(--pink); stroke:var(--pink); }
/* personnages : cycle de marche */
.wk-p .limb { transform-box:fill-box; transform-origin:50% 0; }
.wk-p .leg-a, .wk-p .arm-b { animation:wkSwingA var(--cyc,.95s) ease-in-out infinite; }
.wk-p .leg-b, .wk-p .arm-a { animation:wkSwingB var(--cyc,.95s) ease-in-out infinite; }
.wk-p .body { animation:wkBob calc(var(--cyc,.95s) / 2) ease-in-out infinite; }
@keyframes wkSwingA { 0%,100% { transform:rotate(24deg); } 50% { transform:rotate(-24deg); } }
@keyframes wkSwingB { 0%,100% { transform:rotate(-24deg); } 50% { transform:rotate(24deg); } }
@keyframes wkBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2.5px); } }
.wk-p .arm-fixed { animation:none; }
.wk-heart { fill:var(--pink); opacity:0; }
.wk-heart.go { animation:wkHeart 1.6s ease-out forwards; }
@keyframes wkHeart { 0% { opacity:0; transform:translateY(0) scale(.6); } 25% { opacity:1; } 100% { opacity:0; transform:translateY(-34px) scale(1.15); } }
.wk-shadow { fill:rgba(60,44,30,.10); }
@media (max-width:760px) {
  .hero--c .hero-art.hero-walk { position:relative; left:auto; top:auto; width:170%; height:260px; margin:0 0 -24px -48%; transform:none; -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent); mask-image:linear-gradient(180deg,#000 80%,transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-p .limb, .wk-p .body, .js-anim .wk-road-line, .wk-sun { animation:none !important; }
}
</style>
