<template>
  <div class="relative overflow-hidden section-padding min-h-[70vh] flex items-center justify-center">
    <!-- 1. Shadok funambule: walking on tightrope (top-left) -->
    <svg class="shadok-funambule" viewBox="0 0 170 200" fill="none" aria-hidden="true">
      <!-- Tightrope -->
      <line x1="5" y1="170" x2="165" y2="170" stroke="currentColor" stroke-width="2" opacity="0.3"/>
      <!-- Body (small oval, leaning forward) -->
      <ellipse cx="85" cy="110" rx="20" ry="28" fill="currentColor" opacity="0.25" transform="rotate(-5 85 110)"/>
      <!-- Head -->
      <circle cx="88" cy="72" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (focused, looking down-right) -->
      <circle cx="93" cy="70" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="99" cy="71" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (pointy, right side) -->
      <polygon points="103,74 116,72 103,78" fill="currentColor" opacity="0.3"/>
      <!-- Balancing pole (big, horizontal) -->
      <line x1="10" y1="92" x2="160" y2="88" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Arms holding pole -->
      <line x1="67" y1="100" x2="45" y2="92" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="103" y1="98" x2="125" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Left leg (forward, on rope) -->
      <line x1="78" y1="136" x2="70" y2="170" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="70" cy="172" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <!-- Right leg (back, lifted) -->
      <line x1="92" y1="136" x2="108" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="108" cy="167" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 2. Shadok accordeoniste: playing accordion (top-right, profile) -->
    <svg class="shadok-accordeoniste" viewBox="0 0 180 210" fill="none" aria-hidden="true">
      <!-- Body (profile, small) -->
      <ellipse cx="70" cy="115" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head (profile) -->
      <circle cx="72" cy="75" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Beret -->
      <ellipse cx="72" cy="60" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
      <circle cx="72" cy="56" r="4" fill="currentColor" opacity="0.25"/>
      <!-- Eye (profile, one visible) -->
      <circle cx="80" cy="73" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (profile right) -->
      <polygon points="86,76 98,74 86,80" fill="currentColor" opacity="0.3"/>
      <!-- Accordion bellows (big, extended right) -->
      <rect x="92" y="95" width="12" height="45" rx="2" fill="currentColor" opacity="0.3"/>
      <line x1="98" y1="98" x2="98" y2="137" stroke="currentColor" stroke-width="0.8" opacity="0.2"/>
      <rect x="107" y="93" width="8" height="49" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="118" y="91" width="8" height="53" rx="2" fill="currentColor" opacity="0.2"/>
      <rect x="129" y="89" width="8" height="57" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="140" y="87" width="12" height="61" rx="2" fill="currentColor" opacity="0.3"/>
      <!-- Keyboard dots on right panel -->
      <circle cx="146" cy="100" r="1.5" fill="currentColor" opacity="0.2"/>
      <circle cx="146" cy="110" r="1.5" fill="currentColor" opacity="0.2"/>
      <circle cx="146" cy="120" r="1.5" fill="currentColor" opacity="0.2"/>
      <circle cx="146" cy="130" r="1.5" fill="currentColor" opacity="0.2"/>
      <!-- Left arm on bellows -->
      <line x1="52" y1="105" x2="92" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Right arm stretched to far end -->
      <line x1="90" y1="108" x2="140" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Foot tapping (right lifted) -->
      <line x1="60" y1="141" x2="52" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="52" cy="197" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="80" y1="141" x2="90" y2="188" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="90" cy="190" rx="8" ry="3" fill="currentColor" opacity="0.3" transform="rotate(-15 90 190)"/>
      <!-- Music notes -->
      <text x="155" y="80" fill="currentColor" opacity="0.25" font-size="14">&#9834;</text>
      <text x="145" y="68" fill="currentColor" opacity="0.2" font-size="11">&#9835;</text>
    </svg>

    <!-- 3. Shadok jongleur: 4 balls in the air (top-center) -->
    <svg class="shadok-jongleur" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="80" cy="120" rx="21" ry="27" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="80" cy="82" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (looking up, wide) -->
      <circle cx="74" cy="78" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="86" cy="78" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Mouth open (concentration) -->
      <ellipse cx="80" cy="92" rx="4" ry="3" fill="currentColor" opacity="0.2"/>
      <!-- Beak (small, front view) -->
      <polygon points="80,86 87,89 80,92" fill="currentColor" opacity="0.3"/>
      <!-- Arms up wide -->
      <line x1="60" y1="110" x2="30" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="100" y1="110" x2="130" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- 4 juggling balls in arc -->
      <circle cx="40" cy="35" r="8" fill="currentColor" opacity="0.3"/>
      <circle cx="70" cy="18" r="8" fill="currentColor" opacity="0.25"/>
      <circle cx="100" cy="15" r="8" fill="currentColor" opacity="0.3"/>
      <circle cx="128" cy="30" r="8" fill="currentColor" opacity="0.25"/>
      <!-- Long legs -->
      <line x1="72" y1="145" x2="60" y2="200" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="60" cy="202" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="88" y1="145" x2="100" y2="200" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="100" cy="202" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 4. Shadok cracheur de feu: head tilted back, flame from mouth -->
    <svg class="shadok-cracheur" viewBox="0 0 170 220" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="75" cy="125" rx="22" ry="30" fill="currentColor" opacity="0.25"/>
      <!-- Head (tilted back) -->
      <circle cx="78" cy="82" r="16" fill="currentColor" opacity="0.3" />
      <!-- Eyes (looking up) -->
      <circle cx="73" cy="76" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="83" cy="76" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (pointing up, open) -->
      <polygon points="78,66 85,52 72,66" fill="currentColor" opacity="0.3"/>
      <!-- Flame stream from beak (big, upward-right) -->
      <path d="M82 54 Q100 25 95 10 Q110 30 120 8 Q115 35 135 15 Q120 42 140 30 Q118 50 130 45" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="currentColor" opacity="0.2"/>
      <!-- Torch in left hand -->
      <line x1="55" y1="115" x2="30" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <rect x="24" y="78" width="8" height="16" rx="2" fill="currentColor" opacity="0.35"/>
      <path d="M28 78 Q28 68 32 72 Q28 65 28 78" fill="currentColor" opacity="0.25"/>
      <!-- Right arm out for balance -->
      <line x1="95" y1="112" x2="125" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Long legs -->
      <line x1="66" y1="153" x2="55" y2="210" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="55" cy="212" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="84" y1="153" x2="95" y2="210" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="95" cy="212" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 5. Shadok trapeziste: hanging from trapeze, body in arc -->
    <svg class="shadok-trapeziste" viewBox="0 0 150 220" fill="none" aria-hidden="true">
      <!-- Trapeze ropes -->
      <line x1="40" y1="0" x2="50" y2="40" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <line x1="110" y1="0" x2="100" y2="40" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <!-- Trapeze bar -->
      <line x1="48" y1="40" x2="102" y2="40" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.35"/>
      <!-- Arms (hanging from bar) -->
      <line x1="60" y1="42" x2="65" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="90" y1="42" x2="85" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Body (arched, graceful) -->
      <ellipse cx="75" cy="95" rx="20" ry="25" fill="currentColor" opacity="0.25" transform="rotate(10 75 95)"/>
      <!-- Head (below body, looking down) -->
      <circle cx="78" cy="72" r="14" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (excited, looking down) -->
      <circle cx="74" cy="74" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="84" cy="75" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak (pointing down-right) -->
      <polygon points="86,78 96,84 86,82" fill="currentColor" opacity="0.3"/>
      <!-- Legs (pointed, graceful, extending down-right) -->
      <line x1="80" y1="118" x2="95" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="70" y1="118" x2="82" y2="180" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Pointed feet -->
      <polygon points="95,175 105,180 95,182" fill="currentColor" opacity="0.3"/>
      <polygon points="82,180 92,185 82,187" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 6. Shadok batteur: behind drum kit, sticks raised -->
    <svg class="shadok-batteur" viewBox="0 0 180 210" fill="none" aria-hidden="true">
      <!-- Snare drum (center, big) -->
      <ellipse cx="90" cy="165" rx="35" ry="12" fill="currentColor" opacity="0.2"/>
      <rect x="55" y="155" width="70" height="20" rx="3" fill="currentColor" opacity="0.2"/>
      <ellipse cx="90" cy="155" rx="35" ry="12" fill="currentColor" opacity="0.25"/>
      <!-- Hi-hat (left) -->
      <ellipse cx="30" cy="140" rx="18" ry="5" fill="currentColor" opacity="0.2"/>
      <line x1="30" y1="140" x2="30" y2="185" stroke="currentColor" stroke-width="2" opacity="0.2"/>
      <!-- Cymbal (right) -->
      <ellipse cx="155" cy="120" rx="20" ry="5" fill="currentColor" opacity="0.2"/>
      <line x1="155" y1="120" x2="155" y2="185" stroke="currentColor" stroke-width="2" opacity="0.2"/>
      <!-- Body (behind kit) -->
      <ellipse cx="90" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="90" cy="70" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (intense, looking at drums) -->
      <circle cx="84" cy="68" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="96" cy="69" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Beak (front, small) -->
      <polygon points="90,76 97,80 90,82" fill="currentColor" opacity="0.3"/>
      <!-- Arms raised with drumsticks -->
      <line x1="70" y1="100" x2="40" y2="65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="40" y1="65" x2="25" y2="50" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
      <line x1="110" y1="100" x2="140" y2="60" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="140" y1="60" x2="158" y2="48" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
      <!-- Motion lines on sticks -->
      <path d="M22 52 Q18 48 20 44" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
      <path d="M160 50 Q164 46 162 42" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
      <!-- Legs (tucked behind kit) -->
      <line x1="80" y1="136" x2="70" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <ellipse cx="70" cy="197" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
      <line x1="100" y1="136" x2="110" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <ellipse cx="110" cy="197" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
    </svg>

    <!-- 7. Shadok marionnettiste: holding puppet strings -->
    <svg class="shadok-marionnettiste" viewBox="0 0 160 220" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="80" cy="75" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="80" cy="40" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (looking down at puppet) -->
      <circle cx="75" cy="42" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="86" cy="43" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak -->
      <polygon points="89,44 100,42 89,48" fill="currentColor" opacity="0.3"/>
      <!-- Arms down holding control bar -->
      <line x1="62" y1="68" x2="50" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="98" y1="68" x2="110" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Control bar (cross) -->
      <line x1="40" y1="108" x2="120" y2="108" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
      <line x1="80" y1="98" x2="80" y2="118" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
      <!-- Puppet strings -->
      <line x1="45" y1="108" x2="55" y2="155" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <line x1="80" y1="118" x2="70" y2="158" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <line x1="115" y1="108" x2="85" y2="155" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <line x1="80" y1="98" x2="70" y2="148" stroke="currentColor" stroke-width="1" opacity="0.25"/>
      <!-- Mini puppet shadok -->
      <circle cx="70" cy="155" r="8" fill="currentColor" opacity="0.2"/>
      <ellipse cx="70" cy="172" rx="10" ry="13" fill="currentColor" opacity="0.15"/>
      <!-- Puppet eyes -->
      <circle cx="67" cy="154" r="1" fill="currentColor" opacity="0.4"/>
      <circle cx="74" cy="154" r="1" fill="currentColor" opacity="0.4"/>
      <!-- Puppet beak -->
      <polygon points="76,156 82,155 76,158" fill="currentColor" opacity="0.2"/>
      <!-- Puppet legs -->
      <line x1="64" y1="184" x2="58" y2="208" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <line x1="76" y1="184" x2="82" y2="208" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <!-- Master shadok legs -->
      <line x1="72" y1="99" x2="62" y2="155" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
      <line x1="88" y1="99" x2="98" y2="155" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
      <ellipse cx="62" cy="157" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
      <ellipse cx="98" cy="157" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
    </svg>

    <!-- 8. Shadok clown: oversized shoes, red nose, squirting flower -->
    <svg class="shadok-clown" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="80" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="80" cy="70" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Party hat (tall cone) -->
      <polygon points="80,38 68,62 92,62" fill="currentColor" opacity="0.25"/>
      <circle cx="80" cy="38" r="3" fill="currentColor" opacity="0.35"/>
      <!-- Big red nose (circle on beak) -->
      <circle cx="92" cy="74" r="5" fill="currentColor" opacity="0.4"/>
      <!-- Beak behind nose -->
      <polygon points="88,72 100,74 88,78" fill="currentColor" opacity="0.2"/>
      <!-- Eyes (different directions — goofy) -->
      <circle cx="74" cy="66" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="85" cy="64" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Big goofy grin -->
      <path d="M72 82 Q80 90 88 82" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Squirting flower on chest -->
      <circle cx="80" cy="95" r="6" fill="currentColor" opacity="0.25"/>
      <circle cx="80" cy="95" r="2.5" fill="currentColor" opacity="0.35"/>
      <!-- Water squirt from flower -->
      <path d="M86 93 Q100 85 105 90" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
      <circle cx="107" cy="90" r="2" fill="currentColor" opacity="0.2"/>
      <circle cx="112" cy="88" r="1.5" fill="currentColor" opacity="0.15"/>
      <!-- Arms -->
      <line x1="60" y1="100" x2="35" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="100" y1="100" x2="125" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Long legs -->
      <line x1="72" y1="136" x2="50" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="88" y1="136" x2="110" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- OVERSIZED shoes -->
      <ellipse cx="42" cy="190" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
      <ellipse cx="118" cy="190" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- 9. Shadok acrobate: mid-cartwheel, body rotated 90deg -->
    <svg class="shadok-acrobate" viewBox="0 0 160 200" fill="none" aria-hidden="true">
      <!-- Body (rotated 90 degrees) -->
      <ellipse cx="80" cy="100" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(90 80 100)"/>
      <!-- Head (at bottom-right, inverted) -->
      <circle cx="112" cy="100" r="14" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (dizzy, spiral-ish) -->
      <path d="M108 97 Q110 94 113 97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M117 97 Q119 94 122 97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
      <!-- Beak (pointing right) -->
      <polygon points="124,102 136,100 124,106" fill="currentColor" opacity="0.3"/>
      <!-- Limbs in pinwheel pattern -->
      <!-- Arm up-right -->
      <line x1="85" y1="80" x2="110" y2="35" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Arm down-left -->
      <line x1="75" y1="120" x2="50" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Leg up-left (hand on ground) -->
      <line x1="65" y1="88" x2="25" y2="55" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <circle cx="23" cy="53" r="4" fill="currentColor" opacity="0.25"/>
      <!-- Leg down-right -->
      <line x1="95" y1="112" x2="135" y2="150" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet -->
      <ellipse cx="110" cy="33" rx="6" ry="3" fill="currentColor" opacity="0.25" transform="rotate(-60 110 33)"/>
      <ellipse cx="135" cy="152" rx="6" ry="3" fill="currentColor" opacity="0.25" transform="rotate(40 135 152)"/>
      <!-- Motion arc -->
      <path d="M30 40 Q20 50 25 60" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
      <path d="M140 140 Q148 148 145 158" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
    </svg>

    <!-- 10. Shadok regisseur: headset, clipboard, running -->
    <svg class="shadok-regisseur" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body (leaning forward, running) -->
      <ellipse cx="75" cy="105" rx="20" ry="27" fill="currentColor" opacity="0.25" transform="rotate(-12 75 105)"/>
      <!-- Head -->
      <circle cx="80" cy="68" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Headset arc -->
      <path d="M66 60 Q80 48 94 60" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.35"/>
      <!-- Headset earpiece -->
      <ellipse cx="66" cy="64" rx="4" ry="6" fill="currentColor" opacity="0.3"/>
      <!-- Headset mic -->
      <path d="M66 70 Q62 78 70 80" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Eyes (stressed, one looking forward one sideways) -->
      <circle cx="76" cy="65" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="87" cy="64" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Beak -->
      <polygon points="91,68 104,66 91,72" fill="currentColor" opacity="0.3"/>
      <!-- Lanyard -->
      <line x1="80" y1="82" x2="80" y2="100" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
      <!-- Badge -->
      <rect x="74" y="100" width="12" height="15" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="76" y="103" width="8" height="3" rx="1" fill="currentColor" opacity="0.15"/>
      <!-- Right arm pointing forward (with authority) -->
      <line x1="92" y1="95" x2="135" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Pointing finger -->
      <line x1="135" y1="75" x2="145" y2="70" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
      <!-- Left arm holding clipboard -->
      <line x1="58" y1="98" x2="38" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Clipboard (big) -->
      <rect x="22" y="105" width="22" height="30" rx="2" fill="currentColor" opacity="0.25"/>
      <rect x="28" y="102" width="10" height="5" rx="1" fill="currentColor" opacity="0.3"/>
      <!-- Clipboard lines -->
      <line x1="26" y1="114" x2="40" y2="114" stroke="currentColor" stroke-width="1" opacity="0.15"/>
      <line x1="26" y1="120" x2="38" y2="120" stroke="currentColor" stroke-width="1" opacity="0.15"/>
      <line x1="26" y1="126" x2="40" y2="126" stroke="currentColor" stroke-width="1" opacity="0.15"/>
      <!-- Legs (running stride, long) -->
      <line x1="68" y1="130" x2="40" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="38" cy="197" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
      <line x1="82" y1="130" x2="115" y2="190" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <ellipse cx="117" cy="192" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <div class="container-content relative z-10 text-center">
      <!-- Logo SVG vectoriel — inline pour currentColor -->
      <div class="evt-logo-wrap mx-auto mb-6" aria-hidden="true">
        <svg viewBox="0 0 64 80" fill="none" class="evt-logo">
          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
                stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" opacity="0.12"/>
          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
                stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"/>
          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
                stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.92"/>
        </svg>
      </div>

      <p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
      <h1 class="page-title font-display font-extrabold tracking-tight" style="color: hsl(var(--color-text))">
        {{ content?.title }}
      </h1>
      <p v-if="evtContent?.subtitle" class="mt-2 text-base italic" style="color: hsl(var(--color-text-muted))">
        {{ evtContent.subtitle }}
      </p>
      <p class="mt-4 text-lg leading-relaxed max-w-xl mx-auto" style="color: hsl(var(--color-text-muted))">
        {{ content?.description }}
      </p>

      <!-- Leitmotiv -->
      <div v-if="evtContent?.leitmotiv" class="mt-8 flex flex-col items-center gap-3">
        <p class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
          « {{ evtContent.leitmotiv }} »
        </p>
        <p v-if="evtContent?.tagline" class="font-mono text-sm tracking-widest uppercase" style="color: hsl(var(--color-primary))">
          {{ evtContent.tagline }}
        </p>
        <span v-if="evtContent?.gestation" class="evt-gestation-badge">
          <div class="i-lucide-flask-conical h-3.5 w-3.5" />
          En gestation
        </span>
      </div>
    </div>
  </div>

  <!-- ══ Contenu événement ══ -->
  <section v-if="evtContent?.axes || evtContent?.espaces || evtContent?.config" class="evt-content section-padding">
    <div class="container-content flex flex-col gap-14">

      <!-- 3 axes -->
      <div v-if="evtContent?.axes">
        <h2 class="evt-section-title">Trois axes d'émancipation</h2>
        <p class="evt-section-sub">« je subis — ou je m'affranchis »</p>
        <div class="axes-grid">
          <div v-for="(axe, i) in evtContent.axes" :key="i" class="axe-card">
            <div class="axe-icon">
              <div :class="`i-lucide-${axe.icon} h-5 w-5`" />
            </div>
            <h3 class="font-display text-lg font-bold mb-3" style="color: hsl(var(--color-text))">
              {{ axe.label }}
            </h3>
            <ul class="axe-list">
              <li v-for="(item, j) in axe.items" :key="j">
                <div class="i-lucide-arrow-right h-3.5 w-3.5 shrink-0 mt-0.5" style="color: hsl(var(--color-primary))" />
                <span>{{ item }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Espaces permanents -->
      <div v-if="evtContent?.espaces">
        <h2 class="evt-section-title">Espaces & programme</h2>
        <p class="evt-section-sub">Chorégraphie séquencée de plénières, ateliers et espaces permanents</p>
        <div class="espaces-grid">
          <div v-for="(esp, i) in evtContent.espaces" :key="i" class="espace-card">
            <div class="espace-icon">
              <div :class="`i-lucide-${esp.icon} h-4 w-4`" />
            </div>
            <div>
              <p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ esp.label }}</p>
              <p class="text-xs mt-0.5 leading-relaxed" style="color: hsl(var(--color-text-muted))">{{ esp.desc }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Config -->
      <div v-if="evtContent?.config">
        <h2 class="evt-section-title">Format & lieu</h2>
        <div class="config-grid">
          <div v-for="(cfg, i) in evtContent.config" :key="i" class="config-card">
            <div class="config-icon">
              <div :class="`i-lucide-${cfg.icon} h-4 w-4`" />
            </div>
            <div>
              <p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ cfg.label }}</p>
              <p class="text-xs mt-0.5" style="color: hsl(var(--color-text-muted))">{{ cfg.detail }}</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default',
})

const { data: content } = await usePageContent('evenement')
const evtContent = computed(() => content.value as Record<string, any> | null)

useSeoPage({
  title: evtContent.value?.meta?.title ?? 'Évènement — Le Librodrome',
  description: evtContent.value?.description as string ?? 'Prochains événements du Librodrome : rencontres, lectures et ateliers autour de l\'économie du don.',
})
</script>

<style scoped>
.page-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

/* 1. Funambule — top-left */
.shadok-funambule {
  position: absolute;
  left: 4%;
  top: 5%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.24;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-sway-funambule 9s ease-in-out infinite;
}

/* 2. Accordeoniste — top-right */
.shadok-accordeoniste {
  position: absolute;
  right: 3%;
  top: 4%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-bounce-accordeon 8s ease-in-out infinite;
}

/* 3. Jongleur — top-center */
.shadok-jongleur {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  width: clamp(70px, 10vw, 130px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-jongleur 7s ease-in-out infinite;
}

/* 4. Cracheur de feu — left 5%, 40% */
.shadok-cracheur {
  position: absolute;
  left: 5%;
  top: 40%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-flicker-cracheur 8s ease-in-out infinite;
}

/* 5. Trapeziste — right 3%, 30% */
.shadok-trapeziste {
  position: absolute;
  right: 3%;
  top: 30%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-swing-trapeze 10s ease-in-out infinite;
}

/* 6. Batteur — left 4%, bottom 15% */
.shadok-batteur {
  position: absolute;
  left: 4%;
  bottom: 15%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-pulse-batteur 7s ease-in-out infinite;
}

/* 7. Marionnettiste — right 4%, bottom 20% */
.shadok-marionnettiste {
  position: absolute;
  right: 4%;
  bottom: 20%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-bob-marionnette 9s ease-in-out infinite;
}

/* 8. Clown — bottom-left */
.shadok-clown {
  position: absolute;
  left: 6%;
  bottom: 3%;
  width: clamp(70px, 10vw, 135px);
  opacity: 0.24;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-wobble-clown 8s ease-in-out infinite;
}

/* 9. Acrobate — center-bottom */
.shadok-acrobate {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: clamp(70px, 10vw, 130px);
  opacity: 0.18;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-spin-acrobate 12s ease-in-out infinite;
}

/* 10. Regisseur — bottom-right */
.shadok-regisseur {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-rush-regisseur 7s ease-in-out infinite;
}

@keyframes shadok-sway-funambule {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(2deg); }
  75% { transform: translateY(-3px) rotate(-2deg); }
}

@keyframes shadok-bounce-accordeon {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  70% { transform: translateY(-3px); }
}

@keyframes shadok-float-jongleur {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes shadok-flicker-cracheur {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-4px) scale(1.02); }
  60% { transform: translateY(-2px) scale(0.99); }
}

@keyframes shadok-swing-trapeze {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-4deg); }
}

@keyframes shadok-pulse-batteur {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-4px); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-6px); }
  60% { transform: translateY(0); }
}

@keyframes shadok-bob-marionnette {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes shadok-wobble-clown {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-5px) rotate(-3deg); }
  70% { transform: translateY(-2px) rotate(3deg); }
}

@keyframes shadok-spin-acrobate {
  0% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(10deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

@keyframes shadok-rush-regisseur {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(3px) translateY(-5px); }
  50% { transform: translateX(-2px) translateY(-2px); }
  75% { transform: translateX(2px) translateY(-6px); }
}

@media (max-width: 768px) {
  .shadok-funambule,
  .shadok-accordeoniste,
  .shadok-jongleur,
  .shadok-cracheur,
  .shadok-trapeziste,
  .shadok-batteur,
  .shadok-marionnettiste,
  .shadok-clown,
  .shadok-acrobate,
  .shadok-regisseur {
    display: none;
  }
}

/* ── Logo SVG ── */
.evt-logo-wrap {
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--color-primary));
  filter: drop-shadow(0 0 14px hsl(var(--color-primary) / 0.25));
}

.evt-logo {
  width: 100%;
  height: 100%;
}

/* ── Badge gestation hero ── */
.evt-gestation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: hsl(var(--color-accent) / 0.12);
  border: 1px solid hsl(var(--color-accent) / 0.25);
  color: hsl(var(--color-accent));
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ── Section contenus événement ── */
.evt-content {
  background: hsl(var(--color-bg));
}

.evt-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  color: hsl(var(--color-text));
  margin-bottom: 0.25rem;
}

.evt-section-sub {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--color-primary));
  margin-bottom: 1.5rem;
}

/* ── Axes ── */
.axes-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .axes-grid { grid-template-columns: repeat(3, 1fr); }
}

.axe-card {
  padding: 1.5rem;
  border-radius: 16px;
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.axe-card:hover {
  border-color: hsl(var(--color-primary) / 0.25);
  box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
}

.axe-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  margin-bottom: 1rem;
}

.axe-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.axe-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: hsl(var(--color-text-muted));
}

/* ── Espaces ── */
.espaces-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .espaces-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .espaces-grid { grid-template-columns: repeat(3, 1fr); }
}

.espace-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.06);
  transition: border-color 0.15s;
}

.espace-card:hover {
  border-color: hsl(var(--color-accent) / 0.25);
}

.espace-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-accent) / 0.1);
  color: hsl(var(--color-accent));
  flex-shrink: 0;
}

/* ── Config ── */
.config-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .config-grid { grid-template-columns: repeat(4, 1fr); }
}

.config-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.06);
}

.config-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  flex-shrink: 0;
}
</style>
