<template>
  <div class="relative overflow-hidden section-padding">
    <!-- 1. Shadok Capitaine (top-left, profile — at ship's wheel, telescope) -->
    <svg class="shadok shadok-capitaine" viewBox="0 0 170 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- ship's wheel -->
        <circle cx="50" cy="130" r="28" stroke="currentColor" stroke-width="3" fill="none" opacity="0.35"/>
        <line x1="50" y1="102" x2="50" y2="158" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
        <line x1="22" y1="130" x2="78" y2="130" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
        <line x1="30" y1="110" x2="70" y2="150" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
        <line x1="70" y1="110" x2="30" y2="150" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
        <!-- wheel spokes knobs -->
        <circle cx="50" cy="100" r="3" fill="currentColor" opacity="0.4"/>
        <circle cx="50" cy="160" r="3" fill="currentColor" opacity="0.4"/>
        <circle cx="20" cy="130" r="3" fill="currentColor" opacity="0.4"/>
        <circle cx="80" cy="130" r="3" fill="currentColor" opacity="0.4"/>
        <!-- body (small oval, profile facing right) -->
        <ellipse cx="85" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
        <!-- head -->
        <circle cx="92" cy="68" r="16" fill="currentColor" opacity="0.3"/>
        <!-- captain hat -->
        <rect x="76" y="52" width="32" height="8" rx="4" fill="currentColor" opacity="0.4"/>
        <rect x="80" y="46" width="24" height="8" rx="3" fill="currentColor" opacity="0.3"/>
        <!-- hat brim detail -->
        <ellipse cx="92" cy="60" rx="18" ry="3" fill="currentColor" opacity="0.2"/>
        <!-- eyes (looking right through telescope) -->
        <circle cx="98" cy="65" r="2.5" fill="currentColor" opacity="0.6"/>
        <circle cx="90" cy="66" r="2" fill="currentColor" opacity="0.5"/>
        <!-- beak (pointy, profile right) -->
        <polygon points="108,68 120,65 108,72" fill="currentColor" opacity="0.35"/>
        <!-- left arm on wheel -->
        <line x1="65" y1="100" x2="55" y2="115" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- right arm holding telescope -->
        <line x1="105" y1="95" x2="130" y2="72" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- telescope -->
        <rect x="128" y="66" width="30" height="7" rx="3.5" fill="currentColor" opacity="0.4"/>
        <rect x="155" y="64" width="10" height="11" rx="3" fill="currentColor" opacity="0.3"/>
        <!-- left leg (long, forward) -->
        <line x1="75" y1="135" x2="60" y2="190" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <!-- left foot -->
        <ellipse cx="55" cy="193" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
        <!-- right leg (long, back) -->
        <line x1="92" y1="136" x2="100" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <!-- right foot -->
        <ellipse cx="103" cy="195" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
      </g>
    </svg>

    <!-- 2. Shadok Avocate (top-right — robe, scroll, arm up) -->
    <svg class="shadok shadok-avocate" viewBox="0 0 160 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- body (small oval) -->
        <ellipse cx="80" cy="115" rx="22" ry="30" fill="currentColor" opacity="0.25"/>
        <!-- robe/gown flowing -->
        <path d="M58 100 Q55 145 48 175 L112 175 Q105 145 102 100 Z" fill="currentColor" opacity="0.18"/>
        <!-- robe collar -->
        <path d="M68 88 Q80 96 92 88" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.35"/>
        <!-- head -->
        <circle cx="80" cy="70" r="16" fill="currentColor" opacity="0.3"/>
        <!-- eyes (looking up-left) -->
        <circle cx="74" cy="67" r="2.5" fill="currentColor" opacity="0.6"/>
        <circle cx="83" cy="68" r="2" fill="currentColor" opacity="0.5"/>
        <!-- beak (3/4 view, slight left) -->
        <polygon points="68,72 56,69 66,76" fill="currentColor" opacity="0.35"/>
        <!-- left arm up dramatically -->
        <line x1="60" y1="100" x2="30" y2="55" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- open hand at top -->
        <line x1="30" y1="55" x2="24" y2="46" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
        <line x1="30" y1="55" x2="28" y2="44" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
        <line x1="30" y1="55" x2="34" y2="46" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
        <!-- right arm holding scroll -->
        <line x1="100" y1="102" x2="125" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- scroll document (big) -->
        <rect x="120" y="72" width="28" height="40" rx="3" fill="currentColor" opacity="0.25"/>
        <!-- scroll curl top -->
        <ellipse cx="134" cy="72" rx="14" ry="5" fill="currentColor" opacity="0.2"/>
        <!-- scroll curl bottom -->
        <ellipse cx="134" cy="112" rx="12" ry="4" fill="currentColor" opacity="0.2"/>
        <!-- scroll text lines -->
        <line x1="126" y1="82" x2="142" y2="82" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
        <line x1="126" y1="88" x2="140" y2="88" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
        <line x1="126" y1="94" x2="143" y2="94" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
        <line x1="126" y1="100" x2="138" y2="100" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
        <!-- left leg (long) -->
        <line x1="72" y1="142" x2="62" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="58" cy="198" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
        <!-- right leg -->
        <line x1="88" y1="142" x2="95" y2="196" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="99" cy="199" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
      </g>
    </svg>

    <!-- 3. Shadok Vigie (left — crow's nest, looking far) -->
    <svg class="shadok shadok-vigie" viewBox="0 0 140 220" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- mast pole -->
        <line x1="70" y1="90" x2="70" y2="218" stroke="currentColor" stroke-width="4" opacity="0.3"/>
        <!-- crow's nest platform -->
        <path d="M38 88 L42 100 L98 100 L102 88 Z" fill="currentColor" opacity="0.25"/>
        <line x1="36" y1="88" x2="104" y2="88" stroke="currentColor" stroke-width="3" opacity="0.35"/>
        <!-- nest railing -->
        <line x1="40" y1="78" x2="40" y2="100" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
        <line x1="100" y1="78" x2="100" y2="100" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
        <line x1="40" y1="78" x2="100" y2="78" stroke="currentColor" stroke-width="2" opacity="0.25"/>
        <!-- body (small, inside nest) -->
        <ellipse cx="70" cy="72" rx="20" ry="22" fill="currentColor" opacity="0.25"/>
        <!-- head -->
        <circle cx="70" cy="38" r="15" fill="currentColor" opacity="0.3"/>
        <!-- eyes (squinting, looking right far) -->
        <circle cx="78" cy="35" r="2.5" fill="currentColor" opacity="0.6"/>
        <circle cx="70" cy="36" r="2" fill="currentColor" opacity="0.4"/>
        <!-- beak (profile right) -->
        <polygon points="83,38 96,35 84,42" fill="currentColor" opacity="0.35"/>
        <!-- right hand shielding eyes -->
        <line x1="88" y1="55" x2="98" y2="35" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <line x1="96" y1="33" x2="108" y2="30" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
        <!-- left arm resting on railing -->
        <line x1="52" y1="60" x2="42" y2="78" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- legs dangling below nest (long!) -->
        <line x1="60" y1="98" x2="52" y2="160" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="48" cy="163" rx="8" ry="4" fill="currentColor" opacity="0.3"/>
        <line x1="80" y1="98" x2="86" y2="158" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="90" cy="161" rx="8" ry="4" fill="currentColor" opacity="0.3"/>
      </g>
    </svg>

    <!-- 4. Shadok Comedien (right — theater masks, cape, leg lifted) -->
    <svg class="shadok shadok-comedien" viewBox="0 0 170 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- dramatic cape -->
        <path d="M65 85 Q40 120 35 180 L115 180 Q110 120 95 85 Z" fill="currentColor" opacity="0.15"/>
        <path d="M95 85 Q120 100 135 160 Q130 165 115 180" fill="currentColor" opacity="0.1"/>
        <!-- body (small oval) -->
        <ellipse cx="80" cy="105" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
        <!-- head -->
        <circle cx="80" cy="62" r="16" fill="currentColor" opacity="0.3"/>
        <!-- eyes (different directions — dramatic!) -->
        <circle cx="74" cy="59" r="2.5" fill="currentColor" opacity="0.6"/>
        <circle cx="86" cy="61" r="2.5" fill="currentColor" opacity="0.55"/>
        <!-- beak -->
        <polygon points="72,66 60,63 70,70" fill="currentColor" opacity="0.35"/>
        <!-- left arm up holding comedy mask -->
        <line x1="62" y1="92" x2="32" y2="55" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- comedy mask (big, smiling) -->
        <circle cx="25" cy="42" r="16" fill="currentColor" opacity="0.2"/>
        <path d="M17 46 Q25 56 33 46" stroke="currentColor" stroke-width="2" fill="none" opacity="0.4"/>
        <circle cx="20" cy="38" r="2" fill="currentColor" opacity="0.5"/>
        <circle cx="30" cy="38" r="2" fill="currentColor" opacity="0.5"/>
        <!-- right arm out holding tragedy mask -->
        <line x1="98" y1="92" x2="135" y2="65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- tragedy mask (big, frowning) -->
        <circle cx="145" cy="55" r="16" fill="currentColor" opacity="0.2"/>
        <path d="M137 62 Q145 54 153 62" stroke="currentColor" stroke-width="2" fill="none" opacity="0.4"/>
        <circle cx="140" cy="50" r="2" fill="currentColor" opacity="0.5"/>
        <circle cx="150" cy="50" r="2" fill="currentColor" opacity="0.5"/>
        <!-- left leg (long, planted) -->
        <line x1="72" y1="128" x2="62" y2="190" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="58" cy="193" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
        <!-- right leg (lifted dramatically!) -->
        <line x1="88" y1="126" x2="115" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="120" cy="167" rx="8" ry="4" transform="rotate(-25 120 167)" fill="currentColor" opacity="0.3"/>
      </g>
    </svg>

    <!-- 5. Shadok Cartographe (bottom-left — sitting, map, compass) -->
    <svg class="shadok shadok-cartographe" viewBox="0 0 180 190" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- table -->
        <rect x="20" y="125" width="140" height="6" rx="2" fill="currentColor" opacity="0.3"/>
        <line x1="35" y1="131" x2="30" y2="185" stroke="currentColor" stroke-width="3" opacity="0.25"/>
        <line x1="145" y1="131" x2="150" y2="185" stroke="currentColor" stroke-width="3" opacity="0.25"/>
        <!-- big map spread on table -->
        <rect x="30" y="108" width="110" height="18" rx="2" fill="currentColor" opacity="0.2"/>
        <!-- map details -->
        <path d="M45 112 Q65 108 85 115 Q105 110 125 114" stroke="currentColor" stroke-width="1" fill="none" opacity="0.25"/>
        <circle cx="75" cy="115" r="3" stroke="currentColor" stroke-width="1" fill="none" opacity="0.2"/>
        <line x1="95" y1="110" x2="95" y2="122" stroke="currentColor" stroke-width="0.8" opacity="0.2"/>
        <!-- body (small, hunched over map) -->
        <ellipse cx="90" cy="88" rx="22" ry="25" fill="currentColor" opacity="0.25" transform="rotate(10 90 88)"/>
        <!-- head (bent down looking at map) -->
        <circle cx="78" cy="60" r="15" fill="currentColor" opacity="0.3"/>
        <!-- eyes (looking down at map) -->
        <circle cx="74" cy="64" r="2" fill="currentColor" opacity="0.6"/>
        <circle cx="83" cy="65" r="2" fill="currentColor" opacity="0.5"/>
        <!-- beak (pointing down) -->
        <polygon points="72,70 65,78 78,72" fill="currentColor" opacity="0.35"/>
        <!-- right arm holding compass tool -->
        <line x1="110" y1="92" x2="130" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- compass/divider tool (big V shape) -->
        <line x1="130" y1="105" x2="125" y2="125" stroke="currentColor" stroke-width="2.5" opacity="0.4"/>
        <line x1="130" y1="105" x2="140" y2="125" stroke="currentColor" stroke-width="2.5" opacity="0.4"/>
        <circle cx="130" cy="103" r="3" fill="currentColor" opacity="0.3"/>
        <!-- left arm holding magnifying glass -->
        <line x1="70" y1="90" x2="48" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- magnifying glass (big) -->
        <circle cx="38" cy="96" r="12" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.35"/>
        <line x1="48" y1="103" x2="55" y2="112" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <!-- legs (sitting, bent under table) -->
        <line x1="78" y1="110" x2="65" y2="145" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <line x1="65" y1="145" x2="50" y2="148" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
        <ellipse cx="45" cy="150" rx="8" ry="3.5" fill="currentColor" opacity="0.3"/>
        <line x1="100" y1="110" x2="110" y2="145" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <line x1="110" y1="145" x2="122" y2="148" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
        <ellipse cx="127" cy="150" rx="8" ry="3.5" fill="currentColor" opacity="0.3"/>
      </g>
    </svg>

    <!-- 6. Shadok Juge (bottom-right — on bench, gavel, wig) -->
    <svg class="shadok shadok-juge" viewBox="0 0 160 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- elevated bench/podium -->
        <rect x="30" y="145" width="100" height="55" rx="4" fill="currentColor" opacity="0.2"/>
        <rect x="25" y="138" width="110" height="10" rx="3" fill="currentColor" opacity="0.28"/>
        <!-- bench front panel detail -->
        <rect x="55" y="155" width="50" height="35" rx="3" fill="currentColor" opacity="0.1"/>
        <!-- body (small, seated) -->
        <ellipse cx="80" cy="112" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
        <!-- head -->
        <circle cx="80" cy="68" r="16" fill="currentColor" opacity="0.3"/>
        <!-- judge wig (curly puffs) -->
        <circle cx="66" cy="60" r="6" fill="currentColor" opacity="0.2"/>
        <circle cx="94" cy="60" r="6" fill="currentColor" opacity="0.2"/>
        <circle cx="72" cy="54" r="5" fill="currentColor" opacity="0.18"/>
        <circle cx="88" cy="54" r="5" fill="currentColor" opacity="0.18"/>
        <circle cx="80" cy="52" r="5.5" fill="currentColor" opacity="0.2"/>
        <!-- wig curls hanging -->
        <circle cx="63" cy="70" r="4.5" fill="currentColor" opacity="0.15"/>
        <circle cx="97" cy="70" r="4.5" fill="currentColor" opacity="0.15"/>
        <!-- eyes (stern, both forward) -->
        <circle cx="74" cy="66" r="2.5" fill="currentColor" opacity="0.65"/>
        <circle cx="86" cy="66" r="2.5" fill="currentColor" opacity="0.65"/>
        <!-- stern eyebrows -->
        <line x1="71" y1="62" x2="77" y2="63" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
        <line x1="89" y1="63" x2="83" y2="62" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
        <!-- beak (small, stern) -->
        <polygon points="80,74 72,78 80,80" fill="currentColor" opacity="0.35"/>
        <!-- right arm raising gavel -->
        <line x1="100" y1="98" x2="130" y2="60" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- gavel (big!) -->
        <rect x="120" y="44" width="26" height="12" rx="4" fill="currentColor" opacity="0.4"/>
        <line x1="133" y1="56" x2="133" y2="38" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <!-- left arm on bench -->
        <line x1="60" y1="100" x2="40" y2="130" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- legs (dangling from bench, long) -->
        <line x1="72" y1="138" x2="62" y2="200" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="58" cy="203" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
        <line x1="88" y1="138" x2="96" y2="198" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="100" cy="201" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
      </g>
    </svg>

    <!-- 7. Shadok Matelot (center-bottom — pulling rope, leaning back, anchor) -->
    <svg class="shadok shadok-matelot" viewBox="0 0 160 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- rope going up and off -->
        <path d="M30 20 Q35 50 55 70 Q65 78 68 85" stroke="currentColor" stroke-width="3" fill="none" opacity="0.3"/>
        <!-- body (leaning back, tilted) -->
        <ellipse cx="85" cy="108" rx="20" ry="27" fill="currentColor" opacity="0.25" transform="rotate(-15 85 108)"/>
        <!-- head -->
        <circle cx="95" cy="68" r="15" fill="currentColor" opacity="0.3"/>
        <!-- bandana -->
        <path d="M80 62 Q95 55 110 62" stroke="currentColor" stroke-width="3" fill="currentColor" opacity="0.2"/>
        <line x1="108" y1="60" x2="118" y2="55" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
        <line x1="108" y1="62" x2="116" y2="60" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.2"/>
        <!-- eyes (straining, squinting) -->
        <circle cx="90" cy="66" r="2" fill="currentColor" opacity="0.6"/>
        <circle cx="100" cy="65" r="2.5" fill="currentColor" opacity="0.55"/>
        <!-- beak -->
        <polygon points="104,70 115,67 105,74" fill="currentColor" opacity="0.35"/>
        <!-- both arms pulling rope -->
        <line x1="68" y1="95" x2="55" y2="78" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <line x1="75" y1="98" x2="62" y2="82" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- left leg (long, bracing forward) -->
        <line x1="72" y1="130" x2="48" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="43" cy="188" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
        <!-- right leg (long, back) -->
        <line x1="92" y1="132" x2="110" y2="188" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="114" cy="191" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
        <!-- anchor nearby -->
        <line x1="135" y1="140" x2="135" y2="185" stroke="currentColor" stroke-width="3" opacity="0.3"/>
        <circle cx="135" cy="138" r="5" stroke="currentColor" stroke-width="2" fill="none" opacity="0.25"/>
        <path d="M120 180 Q135 195 150 180" stroke="currentColor" stroke-width="3" fill="none" opacity="0.3"/>
        <line x1="120" y1="180" x2="117" y2="174" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
        <line x1="150" y1="180" x2="153" y2="174" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
      </g>
    </svg>

    <!-- 8. Shadok Mime (right — pushing invisible wall, striped shirt, beret) -->
    <svg class="shadok shadok-mime" viewBox="0 0 150 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- body (small oval) -->
        <ellipse cx="70" cy="112" rx="22" ry="28" fill="currentColor" opacity="0.2"/>
        <!-- striped shirt lines -->
        <line x1="52" y1="96" x2="88" y2="96" stroke="currentColor" stroke-width="2" opacity="0.2"/>
        <line x1="50" y1="102" x2="90" y2="102" stroke="currentColor" stroke-width="2" opacity="0.2"/>
        <line x1="50" y1="108" x2="90" y2="108" stroke="currentColor" stroke-width="2" opacity="0.2"/>
        <line x1="50" y1="114" x2="90" y2="114" stroke="currentColor" stroke-width="2" opacity="0.2"/>
        <line x1="52" y1="120" x2="88" y2="120" stroke="currentColor" stroke-width="2" opacity="0.2"/>
        <line x1="54" y1="126" x2="86" y2="126" stroke="currentColor" stroke-width="2" opacity="0.2"/>
        <!-- head (white face = lighter) -->
        <circle cx="75" cy="65" r="16" fill="currentColor" opacity="0.2"/>
        <!-- white face highlight -->
        <circle cx="75" cy="65" r="13" fill="currentColor" opacity="0.08"/>
        <!-- beret -->
        <ellipse cx="75" cy="50" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
        <circle cx="75" cy="46" r="3" fill="currentColor" opacity="0.25"/>
        <!-- eyes (expressive, wide) -->
        <circle cx="69" cy="62" r="3" fill="currentColor" opacity="0.55"/>
        <circle cx="81" cy="62" r="3" fill="currentColor" opacity="0.55"/>
        <!-- raised eyebrows (surprised) -->
        <path d="M66 57 Q69 54 72 57" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.4"/>
        <path d="M78 57 Q81 54 84 57" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.4"/>
        <!-- beak (small) -->
        <polygon points="75,72 68,76 75,78" fill="currentColor" opacity="0.3"/>
        <!-- both arms pushing against invisible wall (to the right) -->
        <line x1="90" y1="100" x2="125" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <line x1="90" y1="115" x2="125" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
        <!-- flat hands pressed against wall -->
        <rect x="124" y="78" width="12" height="15" rx="3" fill="currentColor" opacity="0.2"/>
        <rect x="124" y="103" width="12" height="15" rx="3" fill="currentColor" opacity="0.2"/>
        <!-- invisible wall hint (faint line) -->
        <line x1="138" y1="50" x2="138" y2="180" stroke="currentColor" stroke-width="1" stroke-dasharray="4 6" opacity="0.12"/>
        <!-- left leg (long, leaning forward) -->
        <line x1="60" y1="138" x2="45" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="40" cy="198" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
        <!-- right leg (long, back) -->
        <line x1="80" y1="138" x2="95" y2="194" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
        <ellipse cx="99" cy="197" rx="9" ry="4" fill="currentColor" opacity="0.3"/>
      </g>
    </svg>

    <div class="container-content">
      <header class="mb-12 text-center">
        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
        <h1 class="page-title font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
          {{ content?.title }}
        </h1>
        <p class="mt-4 mx-auto max-w-2xl leading-relaxed" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>
      </header>

      <div class="mx-auto max-w-3xl flex flex-col gap-6">
        <!-- Decision collective -->
        <div class="item-card">
          <NuxtLink to="/citoyenne/decision" class="item-body group">
            <div class="item-header">
              <div class="item-icon">
                <div class="i-lucide-gavel h-5 w-5" />
              </div>
              <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                Décision collective
              </h2>
            </div>
            <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
              Se donner les moyens de la décision collective.
            </p>
            <div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors">
              En savoir plus
              <div class="i-lucide-arrow-right h-3.5 w-3.5" />
            </div>
          </NuxtLink>
          <div class="item-actions">
            <a :href="decisionUrl" target="_blank" rel="noopener" class="action-btn action-btn--primary">
              <div class="i-lucide-external-link h-3.5 w-3.5" />
              Ouvrir Glibredecision
            </a>
          </div>
        </div>

        <!-- Tarifs de l'eau -->
        <div class="item-card">
          <NuxtLink to="/citoyenne/tarifs-eau" class="item-body group">
            <div class="item-header">
              <div class="item-icon">
                <div class="i-lucide-droplets h-5 w-5" />
              </div>
              <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                Tarifs de l'eau
              </h2>
              <span class="gestation-badge">
                <div class="i-lucide-flask-conical h-3 w-3" />
                En gestation
              </span>
            </div>
            <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
              Application pour obtenir justice sociale et incitation dynamique à la réduction.
              Permet de confier la décision à la population des communes.
            </p>
            <div class="mt-3 inline-flex items-center gap-1 text-sm text-primary group-hover:text-primary/80 transition-colors">
              En savoir plus
              <div class="i-lucide-arrow-right h-3.5 w-3.5" />
            </div>
          </NuxtLink>
          <div class="item-actions">
            <a :href="sejeteral0Url" target="_blank" rel="noopener" class="action-btn action-btn--primary">
              <div class="i-lucide-external-link h-3.5 w-3.5" />
              Lancer SejeteralO
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const { data: content } = await usePageContent('citoyenne')

const appConfig = useAppConfig()
const decisionUrl = (appConfig.libredecision as { url: string })?.url ?? '#'
const sejeteral0Url = (appConfig.sejeteral0 as { url: string })?.url ?? '#'

useHead({
  title: content.value?.meta?.title ?? 'Autonomie citoyenne',
})
</script>

<style scoped>
.page-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.item-card {
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-text) / 0.08);
  background: hsl(var(--color-surface));
  transition: border-color 0.2s;
  overflow: hidden;
}

.item-card:hover {
  border-color: hsl(var(--color-primary) / 0.2);
}

.item-body {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
}

.item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.15);
  color: hsl(var(--color-primary));
  box-shadow: 0 0 12px hsl(var(--color-primary) / 0.12);
  flex-shrink: 0;
}

.gestation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--color-accent) / 0.12);
  color: hsl(var(--color-accent));
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-mono);
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid hsl(var(--color-text) / 0.06);
  background: hsl(var(--color-bg) / 0.4);
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.action-btn--primary {
  color: hsl(var(--color-primary));
  background: hsl(var(--color-primary) / 0.12);
  border: 1px solid hsl(var(--color-primary) / 0.25);
}

.action-btn--primary:hover {
  background: hsl(var(--color-primary) / 0.2);
  border-color: hsl(var(--color-primary) / 0.4);
}

/* Shadok illustrations */
.shadok {
  position: absolute;
  pointer-events: none;
  width: clamp(70px, 10vw, 140px);
  z-index: 0;
}

.shadok-capitaine {
  top: 2%;
  left: 2%;
  color: hsl(var(--color-primary));
  opacity: 0.22;
  animation: shadok-float-1 9s ease-in-out infinite;
}

.shadok-avocate {
  top: 1%;
  right: 2%;
  color: hsl(var(--color-accent));
  opacity: 0.2;
  animation: shadok-float-2 11s ease-in-out infinite;
}

.shadok-vigie {
  left: 2%;
  top: 38%;
  color: hsl(var(--color-primary));
  opacity: 0.24;
  animation: shadok-float-3 10s ease-in-out infinite;
}

.shadok-comedien {
  right: 3%;
  top: 35%;
  color: hsl(var(--color-accent));
  opacity: 0.2;
  animation: shadok-float-4 8s ease-in-out infinite;
}

.shadok-cartographe {
  bottom: 10%;
  left: 1%;
  color: hsl(var(--color-accent));
  opacity: 0.22;
  animation: shadok-float-5 12s ease-in-out infinite;
}

.shadok-juge {
  bottom: 6%;
  right: 1%;
  color: hsl(var(--color-primary));
  opacity: 0.24;
  animation: shadok-float-6 9.5s ease-in-out infinite;
}

.shadok-matelot {
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  color: hsl(var(--color-primary));
  opacity: 0.18;
  animation: shadok-float-7 7s ease-in-out infinite;
}

.shadok-mime {
  right: 2%;
  top: 55%;
  color: hsl(var(--color-accent));
  opacity: 0.28;
  animation: shadok-float-8 10.5s ease-in-out infinite;
}

@keyframes shadok-float-1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

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

@keyframes shadok-float-4 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes shadok-float-5 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes shadok-float-6 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

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

@media (max-width: 768px) {
  .shadok {
    display: none;
  }
}
</style>
