<template>
  <div class="relative overflow-hidden section-padding">
    <!-- Shadok boulangère (top-left, walking profile, carrying bread tray) -->
    <svg class="shadok shadok-boulangere" viewBox="0 0 160 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body tilted forward walking -->
        <ellipse cx="85" cy="105" rx="22" ry="28" fill="currentColor" opacity="0.25" transform="rotate(-8 85 105)" />
        <!-- head -->
        <circle cx="80" cy="65" r="16" fill="currentColor" opacity="0.3" />
        <!-- eyes looking forward -->
        <circle cx="88" cy="62" r="2" fill="currentColor" />
        <circle cx="88" cy="68" r="1.5" fill="currentColor" />
        <!-- beak pointing right -->
        <path d="M94 64 L108 62 L94 68" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- arms up holding tray -->
        <line x1="75" y1="88" x2="60" y2="42" stroke-width="3" />
        <line x1="95" y1="88" x2="110" y2="42" stroke-width="3" />
        <!-- big bread tray -->
        <rect x="48" y="32" width="74" height="12" rx="3" fill="currentColor" opacity="0.25" />
        <!-- bread loaves on tray -->
        <ellipse cx="62" cy="30" rx="10" ry="6" fill="currentColor" opacity="0.3" />
        <ellipse cx="85" cy="28" rx="11" ry="7" fill="currentColor" opacity="0.3" />
        <ellipse cx="108" cy="30" rx="9" ry="6" fill="currentColor" opacity="0.3" />
        <!-- score marks on loaves -->
        <line x1="58" y1="28" x2="60" y2="32" opacity="0.4" />
        <line x1="64" y1="27" x2="66" y2="31" opacity="0.4" />
        <line x1="82" y1="26" x2="84" y2="30" opacity="0.4" />
        <line x1="88" y1="25" x2="90" y2="29" opacity="0.4" />
        <!-- flour apron -->
        <path d="M70 95 Q85 92 100 95 L97 125 Q85 128 73 125 Z" fill="currentColor" opacity="0.1" />
        <!-- flour dots -->
        <circle cx="78" cy="100" r="1" fill="currentColor" opacity="0.3" />
        <circle cx="92" cy="108" r="1.2" fill="currentColor" opacity="0.25" />
        <circle cx="83" cy="115" r="0.8" fill="currentColor" opacity="0.3" />
        <!-- long legs walking stride -->
        <line x1="78" y1="132" x2="58" y2="185" stroke-width="3" />
        <line x1="92" y1="132" x2="112" y2="180" stroke-width="3" />
        <!-- big flat feet -->
        <ellipse cx="52" cy="188" rx="12" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="118" cy="183" rx="12" ry="4" fill="currentColor" opacity="0.3" />
      </g>
    </svg>

    <!-- Shadok potier (top-right, sitting at wheel) -->
    <svg class="shadok shadok-potier" viewBox="0 0 170 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body sitting, slightly hunched -->
        <ellipse cx="70" cy="100" rx="23" ry="26" fill="currentColor" opacity="0.25" transform="rotate(5 70 100)" />
        <!-- head looking down at wheel -->
        <circle cx="65" cy="65" r="15" fill="currentColor" opacity="0.3" />
        <!-- eyes looking down -->
        <circle cx="60" cy="68" r="2" fill="currentColor" />
        <circle cx="72" cy="70" r="1.8" fill="currentColor" />
        <!-- beak pointing down-right -->
        <path d="M68 76 L80 82 L66 82" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- arms reaching to vase -->
        <line x1="50" y1="92" x2="110" y2="115" stroke-width="3" />
        <line x1="90" y1="90" x2="120" y2="110" stroke-width="3" />
        <!-- hands on vase -->
        <circle cx="112" cy="113" r="4" fill="currentColor" opacity="0.2" />
        <circle cx="122" cy="108" r="4" fill="currentColor" opacity="0.2" />
        <!-- vase being shaped -->
        <path d="M108 95 Q102 108 106 125 Q115 135 124 125 Q128 108 122 95" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="2" />
        <!-- vase opening -->
        <ellipse cx="115" cy="95" rx="8" ry="3" fill="currentColor" opacity="0.15" />
        <!-- pottery wheel -->
        <ellipse cx="115" cy="140" rx="28" ry="8" fill="currentColor" opacity="0.2" />
        <line x1="115" y1="148" x2="115" y2="170" stroke-width="3" />
        <line x1="100" y1="170" x2="130" y2="170" stroke-width="3" />
        <!-- spinning motion lines -->
        <path d="M88 138 Q85 135 88 132" fill="none" opacity="0.35" />
        <path d="M142 138 Q145 135 142 132" fill="none" opacity="0.35" />
        <path d="M90 145 Q86 143 90 140" fill="none" opacity="0.25" />
        <!-- legs folded sitting -->
        <line x1="60" y1="124" x2="40" y2="165" stroke-width="3" />
        <line x1="80" y1="124" x2="75" y2="170" stroke-width="3" />
        <!-- flat feet -->
        <ellipse cx="34" cy="168" rx="11" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="70" cy="173" rx="11" ry="4" fill="currentColor" opacity="0.3" />
      </g>
    </svg>

    <!-- Shadok apicultrice (left, 40% down, with smoker and bees) -->
    <svg class="shadok shadok-apicultrice" viewBox="0 0 160 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body upright -->
        <ellipse cx="75" cy="110" rx="20" ry="27" fill="currentColor" opacity="0.25" />
        <!-- head -->
        <circle cx="75" cy="70" r="15" fill="currentColor" opacity="0.3" />
        <!-- beekeeping hat brim -->
        <ellipse cx="75" cy="56" rx="22" ry="5" fill="currentColor" opacity="0.2" />
        <!-- hat top -->
        <path d="M58 56 Q58 42 75 40 Q92 42 92 56" fill="currentColor" opacity="0.15" />
        <!-- veil hanging down -->
        <path d="M53 56 L53 82 Q75 88 97 82 L97 56" fill="none" stroke-dasharray="3 2" opacity="0.3" />
        <!-- eyes behind veil -->
        <circle cx="70" cy="68" r="2" fill="currentColor" />
        <circle cx="82" cy="66" r="1.8" fill="currentColor" />
        <!-- beak -->
        <path d="M80 74 L94 72 L82 78" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- arm left holding smoker -->
        <line x1="56" y1="100" x2="28" y2="85" stroke-width="3" />
        <!-- smoker device (big) -->
        <rect x="10" y="72" width="22" height="20" rx="4" fill="currentColor" opacity="0.25" />
        <path d="M14 72 L14 62 Q21 58 28 62 L28 72" fill="currentColor" opacity="0.15" />
        <!-- smoke puffs -->
        <circle cx="18" cy="55" r="5" fill="currentColor" opacity="0.12" />
        <circle cx="24" cy="48" r="4" fill="currentColor" opacity="0.08" />
        <circle cx="16" cy="42" r="3" fill="currentColor" opacity="0.06" />
        <!-- arm right -->
        <line x1="94" y1="100" x2="110" y2="90" stroke-width="3" />
        <!-- buzzing bees (small detailed dots) -->
        <circle cx="120" cy="60" r="2.5" fill="currentColor" opacity="0.35" />
        <line x1="118" y1="58" x2="115" y2="56" opacity="0.3" />
        <line x1="122" y1="58" x2="125" y2="55" opacity="0.3" />
        <circle cx="135" cy="75" r="2" fill="currentColor" opacity="0.3" />
        <line x1="133" y1="73" x2="131" y2="71" opacity="0.25" />
        <line x1="137" y1="73" x2="139" y2="71" opacity="0.25" />
        <circle cx="110" cy="48" r="2.2" fill="currentColor" opacity="0.25" />
        <line x1="108" y1="46" x2="106" y2="44" opacity="0.2" />
        <line x1="112" y1="46" x2="114" y2="43" opacity="0.2" />
        <circle cx="140" cy="55" r="1.8" fill="currentColor" opacity="0.2" />
        <circle cx="128" cy="42" r="2" fill="currentColor" opacity="0.22" />
        <!-- long legs -->
        <line x1="66" y1="136" x2="55" y2="192" stroke-width="3" />
        <line x1="84" y1="136" x2="95" y2="192" stroke-width="3" />
        <!-- flat feet -->
        <ellipse cx="49" cy="195" rx="11" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="101" cy="195" rx="11" ry="4" fill="currentColor" opacity="0.3" />
      </g>
    </svg>

    <!-- Shadok forgeron (right, 35%, swinging hammer on anvil) -->
    <svg class="shadok shadok-forgeron" viewBox="0 0 180 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body leaning forward, muscular feel -->
        <ellipse cx="90" cy="105" rx="24" ry="30" fill="currentColor" opacity="0.3" transform="rotate(-12 90 105)" />
        <!-- head in profile -->
        <circle cx="100" cy="65" r="16" fill="currentColor" opacity="0.3" />
        <!-- eyes focused, intense -->
        <circle cx="108" cy="62" r="2.5" fill="currentColor" />
        <circle cx="108" cy="70" r="2" fill="currentColor" />
        <!-- beak pointing right -->
        <path d="M114 65 L130 62 L114 70" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- big arm swinging hammer UP -->
        <line x1="72" y1="90" x2="40" y2="40" stroke-width="3.5" />
        <!-- hammer head (big!) -->
        <rect x="22" y="22" width="38" height="18" rx="3" fill="currentColor" opacity="0.3" />
        <!-- hammer handle end -->
        <line x1="40" y1="40" x2="42" y2="30" stroke-width="4" />
        <!-- other arm resting on anvil -->
        <line x1="110" y1="92" x2="140" y2="130" stroke-width="3" />
        <!-- anvil (big detailed) -->
        <path d="M120 135 L160 135 L168 145 L112 145 Z" fill="currentColor" opacity="0.25" />
        <rect x="128" y="145" width="24" height="20" fill="currentColor" opacity="0.2" />
        <rect x="122" y="165" width="36" height="6" rx="2" fill="currentColor" opacity="0.25" />
        <!-- hot metal on anvil -->
        <rect x="132" y="130" width="20" height="5" rx="1" fill="currentColor" opacity="0.35" />
        <!-- sparks flying -->
        <line x1="138" y1="128" x2="132" y2="118" opacity="0.4" />
        <line x1="145" y1="126" x2="150" y2="116" opacity="0.35" />
        <line x1="152" y1="128" x2="160" y2="120" opacity="0.3" />
        <circle cx="130" cy="115" r="1.5" fill="currentColor" opacity="0.35" />
        <circle cx="155" cy="112" r="1.2" fill="currentColor" opacity="0.3" />
        <circle cx="162" cy="118" r="1" fill="currentColor" opacity="0.25" />
        <!-- long legs wide stance -->
        <line x1="78" y1="133" x2="55" y2="190" stroke-width="3" />
        <line x1="100" y1="133" x2="120" y2="192" stroke-width="3" />
        <!-- flat feet -->
        <ellipse cx="48" cy="193" rx="13" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="127" cy="195" rx="13" ry="4" fill="currentColor" opacity="0.3" />
      </g>
    </svg>

    <!-- Shadok maraîchère (bottom-left, pushing wheelbarrow) -->
    <svg class="shadok shadok-maraichere" viewBox="0 0 180 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body leaning forward pushing -->
        <ellipse cx="120" cy="95" rx="21" ry="26" fill="currentColor" opacity="0.25" transform="rotate(-20 120 95)" />
        <!-- head tilted forward -->
        <circle cx="130" cy="58" r="14" fill="currentColor" opacity="0.3" />
        <!-- eyes looking down at path -->
        <circle cx="136" cy="56" r="2" fill="currentColor" />
        <circle cx="136" cy="63" r="1.5" fill="currentColor" />
        <!-- beak pointing right-down -->
        <path d="M140 60 L154 64 L140 66" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- arms pushing wheelbarrow handles -->
        <line x1="104" y1="86" x2="72" y2="110" stroke-width="3" />
        <line x1="108" y1="80" x2="72" y2="100" stroke-width="3" />
        <!-- wheelbarrow body (big!) -->
        <path d="M10 80 L70 80 L75 120 L5 120 Z" fill="currentColor" opacity="0.2" />
        <path d="M10 80 L70 80 L75 120 L5 120 Z" />
        <!-- wheelbarrow handles -->
        <line x1="70" y1="90" x2="72" y2="110" stroke-width="3" />
        <line x1="70" y1="100" x2="72" y2="100" stroke-width="2" />
        <!-- wheel -->
        <circle cx="12" cy="128" r="12" fill="currentColor" opacity="0.15" />
        <circle cx="12" cy="128" r="12" />
        <circle cx="12" cy="128" r="3" fill="currentColor" opacity="0.3" />
        <!-- vegetables in wheelbarrow -->
        <circle cx="22" cy="72" r="7" fill="currentColor" opacity="0.3" />
        <circle cx="38" cy="70" r="8" fill="currentColor" opacity="0.25" />
        <circle cx="55" cy="73" r="6" fill="currentColor" opacity="0.3" />
        <ellipse cx="30" cy="76" rx="5" ry="8" fill="currentColor" opacity="0.2" transform="rotate(15 30 76)" />
        <!-- carrot tops -->
        <line x1="22" y1="66" x2="18" y2="58" opacity="0.35" />
        <line x1="22" y1="66" x2="25" y2="57" opacity="0.35" />
        <line x1="55" y1="67" x2="52" y2="60" opacity="0.3" />
        <line x1="55" y1="67" x2="58" y2="59" opacity="0.3" />
        <!-- long legs striding -->
        <line x1="112" y1="118" x2="100" y2="180" stroke-width="3" />
        <line x1="128" y1="118" x2="150" y2="178" stroke-width="3" />
        <!-- flat feet -->
        <ellipse cx="94" cy="183" rx="12" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="156" cy="181" rx="12" ry="4" fill="currentColor" opacity="0.3" />
      </g>
    </svg>

    <!-- Shadok tisserand (bottom-right, sitting at loom) -->
    <svg class="shadok shadok-tisserand" viewBox="0 0 170 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body sitting upright -->
        <ellipse cx="55" cy="100" rx="20" ry="25" fill="currentColor" opacity="0.25" />
        <!-- head looking down at loom -->
        <circle cx="55" cy="65" r="15" fill="currentColor" opacity="0.3" />
        <!-- eyes focused downward -->
        <circle cx="62" cy="66" r="2" fill="currentColor" />
        <circle cx="60" cy="72" r="1.5" fill="currentColor" />
        <!-- beak pointing right-down -->
        <path d="M66 70 L78 74 L64 76" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- arms reaching to loom -->
        <line x1="72" y1="92" x2="100" y2="80" stroke-width="3" />
        <line x1="74" y1="100" x2="105" y2="100" stroke-width="3" />
        <!-- loom frame (big detailed) -->
        <rect x="95" y="55" width="60" height="80" rx="3" fill="none" />
        <!-- vertical loom posts -->
        <line x1="95" y1="55" x2="95" y2="135" stroke-width="3" />
        <line x1="155" y1="55" x2="155" y2="135" stroke-width="3" />
        <!-- top beam -->
        <line x1="95" y1="55" x2="155" y2="55" stroke-width="3" />
        <!-- warp threads (vertical) -->
        <line x1="105" y1="55" x2="105" y2="135" opacity="0.3" />
        <line x1="115" y1="55" x2="115" y2="135" opacity="0.3" />
        <line x1="125" y1="55" x2="125" y2="135" opacity="0.3" />
        <line x1="135" y1="55" x2="135" y2="135" opacity="0.3" />
        <line x1="145" y1="55" x2="145" y2="135" opacity="0.3" />
        <!-- weft threads (horizontal, partial = work in progress) -->
        <line x1="95" y1="70" x2="155" y2="70" opacity="0.25" />
        <line x1="95" y1="80" x2="155" y2="80" opacity="0.25" />
        <line x1="95" y1="90" x2="145" y2="90" opacity="0.25" />
        <line x1="95" y1="100" x2="135" y2="100" opacity="0.2" />
        <!-- shuttle in hand -->
        <ellipse cx="105" cy="100" rx="8" ry="3" fill="currentColor" opacity="0.3" transform="rotate(-5 105 100)" />
        <!-- woven fabric area -->
        <rect x="97" y="62" width="56" height="28" fill="currentColor" opacity="0.08" />
        <!-- legs folded sitting on stool -->
        <line x1="45" y1="123" x2="30" y2="178" stroke-width="3" />
        <line x1="65" y1="123" x2="70" y2="180" stroke-width="3" />
        <!-- flat feet -->
        <ellipse cx="24" cy="181" rx="11" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="76" cy="183" rx="11" ry="4" fill="currentColor" opacity="0.3" />
        <!-- stool -->
        <rect x="38" y="124" width="30" height="6" rx="2" fill="currentColor" opacity="0.15" />
        <line x1="42" y1="130" x2="40" y2="148" stroke-width="2" opacity="0.3" />
        <line x1="64" y1="130" x2="66" y2="148" stroke-width="2" opacity="0.3" />
      </g>
    </svg>

    <!-- Shadok berger (center-bottom, walking with sheep) -->
    <svg class="shadok shadok-berger" viewBox="0 0 180 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body walking, slight lean -->
        <ellipse cx="85" cy="90" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(-5 85 90)" />
        <!-- head 3/4 view -->
        <circle cx="88" cy="52" r="16" fill="currentColor" opacity="0.3" />
        <!-- eyes looking ahead, slightly different directions -->
        <circle cx="94" cy="48" r="2" fill="currentColor" />
        <circle cx="96" cy="56" r="1.8" fill="currentColor" />
        <!-- beak -->
        <path d="M100 52 L114 50 L100 56" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- arm holding staff -->
        <line x1="68" y1="82" x2="50" y2="60" stroke-width="3" />
        <!-- shepherd's crook (big, detailed) -->
        <line x1="50" y1="60" x2="44" y2="10" stroke-width="3" />
        <path d="M44 10 Q44 0 54 0 Q62 0 62 10 Q62 18 54 18" fill="none" stroke-width="3" />
        <!-- other arm relaxed -->
        <line x1="104" y1="84" x2="118" y2="95" stroke-width="3" />
        <!-- long legs walking -->
        <line x1="76" y1="114" x2="60" y2="175" stroke-width="3" />
        <line x1="94" y1="114" x2="110" y2="172" stroke-width="3" />
        <!-- flat feet -->
        <ellipse cx="54" cy="178" rx="12" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="116" cy="175" rx="12" ry="4" fill="currentColor" opacity="0.3" />
        <!-- sheep 1 (following) -->
        <ellipse cx="140" cy="160" rx="14" ry="10" fill="currentColor" opacity="0.18" />
        <circle cx="150" cy="152" r="6" fill="currentColor" opacity="0.15" />
        <circle cx="153" cy="150" r="1" fill="currentColor" />
        <line x1="132" y1="170" x2="132" y2="180" stroke-width="2" opacity="0.3" />
        <line x1="148" y1="170" x2="148" y2="180" stroke-width="2" opacity="0.3" />
        <!-- sheep 2 -->
        <ellipse cx="158" cy="172" rx="12" ry="8" fill="currentColor" opacity="0.14" />
        <circle cx="166" cy="166" r="5" fill="currentColor" opacity="0.12" />
        <circle cx="168" cy="164" r="0.8" fill="currentColor" />
        <line x1="152" y1="180" x2="152" y2="188" stroke-width="1.5" opacity="0.25" />
        <line x1="164" y1="180" x2="164" y2="188" stroke-width="1.5" opacity="0.25" />
        <!-- sheep 3 (smaller, behind) -->
        <ellipse cx="170" cy="178" rx="9" ry="6" fill="currentColor" opacity="0.1" />
        <circle cx="176" cy="174" r="4" fill="currentColor" opacity="0.08" />
        <!-- dog at side -->
        <ellipse cx="125" cy="170" rx="8" ry="5" fill="currentColor" opacity="0.2" />
        <circle cx="130" cy="164" r="4" fill="currentColor" opacity="0.18" />
        <circle cx="132" cy="163" r="1" fill="currentColor" />
        <line x1="118" y1="168" x2="112" y2="165" stroke-width="1.5" opacity="0.3" />
        <line x1="120" y1="175" x2="120" y2="182" stroke-width="1.5" opacity="0.25" />
        <line x1="130" y1="175" x2="130" y2="182" stroke-width="1.5" opacity="0.25" />
      </g>
    </svg>

    <!-- Shadok vigneronne (right, 55%, carrying grape basket) -->
    <svg class="shadok shadok-vigneronne" viewBox="0 0 170 210" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- body seen from 3/4 back, leaning under weight -->
        <ellipse cx="80" cy="105" rx="22" ry="28" fill="currentColor" opacity="0.25" transform="rotate(10 80 105)" />
        <!-- head turned slightly -->
        <circle cx="72" cy="65" r="15" fill="currentColor" opacity="0.3" />
        <!-- eyes looking to the side -->
        <circle cx="64" cy="62" r="2" fill="currentColor" />
        <circle cx="66" cy="69" r="1.5" fill="currentColor" />
        <!-- beak pointing left -->
        <path d="M58 65 L44 62 L58 69" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.2" />
        <!-- arm back holding basket strap -->
        <line x1="98" y1="92" x2="115" y2="75" stroke-width="3" />
        <!-- arm front with pruning shears -->
        <line x1="62" y1="95" x2="38" y2="80" stroke-width="3" />
        <!-- pruning shears (big) -->
        <line x1="38" y1="80" x2="26" y2="68" stroke-width="3" />
        <line x1="38" y1="80" x2="28" y2="78" stroke-width="3" />
        <circle cx="36" cy="78" r="3" fill="currentColor" opacity="0.2" />
        <!-- blade shapes -->
        <path d="M26 68 Q22 72 28 74" fill="none" stroke-width="2" />
        <path d="M28 78 Q22 76 24 72" fill="none" stroke-width="2" />
        <!-- big basket on back with grapes -->
        <path d="M100 60 L130 60 L135 120 L95 120 Z" fill="currentColor" opacity="0.2" />
        <path d="M100 60 L130 60 L135 120 L95 120 Z" />
        <!-- basket weave texture -->
        <line x1="100" y1="75" x2="133" y2="75" opacity="0.2" />
        <line x1="98" y1="90" x2="134" y2="90" opacity="0.2" />
        <line x1="97" y1="105" x2="135" y2="105" opacity="0.2" />
        <!-- grapes overflowing -->
        <circle cx="108" cy="55" r="4" fill="currentColor" opacity="0.3" />
        <circle cx="116" cy="53" r="4.5" fill="currentColor" opacity="0.3" />
        <circle cx="124" cy="55" r="4" fill="currentColor" opacity="0.25" />
        <circle cx="112" cy="48" r="3.5" fill="currentColor" opacity="0.25" />
        <circle cx="120" cy="47" r="3.5" fill="currentColor" opacity="0.2" />
        <circle cx="105" cy="52" r="3" fill="currentColor" opacity="0.2" />
        <!-- grape stems -->
        <line x1="115" y1="43" x2="115" y2="36" opacity="0.3" />
        <line x1="113" y1="36" x2="117" y2="36" opacity="0.3" />
        <!-- grapevine nearby -->
        <line x1="148" y1="30" x2="148" y2="130" stroke-width="2" opacity="0.2" />
        <path d="M148 50 Q158 45 162 55" fill="none" opacity="0.2" />
        <path d="M148 75 Q160 70 165 80" fill="none" opacity="0.2" />
        <circle cx="160" cy="58" r="3" fill="currentColor" opacity="0.12" />
        <circle cx="163" cy="83" r="3" fill="currentColor" opacity="0.1" />
        <!-- grape leaf -->
        <path d="M148 90 Q155 85 158 90 Q160 95 155 98 Q150 95 148 90" fill="currentColor" opacity="0.12" />
        <!-- long legs -->
        <line x1="70" y1="132" x2="55" y2="192" stroke-width="3" />
        <line x1="90" y1="132" x2="105" y2="190" stroke-width="3" />
        <!-- flat feet -->
        <ellipse cx="49" cy="195" rx="12" ry="4" fill="currentColor" opacity="0.3" />
        <ellipse cx="111" cy="193" rx="12" ry="4" fill="currentColor" opacity="0.3" />
      </g>
    </svg>

    <div class="container-content">
      <!-- Header -->
      <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-8">
        <!-- Monnaie libre -->
        <NuxtLink to="/economique/monnaie-libre" class="item-card g1-card group">
          <span class="g1-watermark" aria-hidden="true">Ğ1</span>
          <div class="item-header">
            <div class="item-icon">
              <span class="g1-icon">Ğ1</span>
            </div>
            <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
              Monnaie libre
            </h2>
          </div>
          <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
            La Ğ1 (June) : une monnaie co-créée par ses membres, sans dette ni intérêt. Le dividende universel comme base.
          </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>

        <!-- Modèle économique — bloc livre -->
        <div class="book-block">
          <HomeBookSection
            compact
            @open-player="showBookPlayer = true"
            @open-pdf="showPdfReader = true"
          />
        </div>

        <!-- Productions collectives -->
        <NuxtLink to="/economique/productions-collectives" class="item-card group">
          <div class="item-header">
            <div class="item-icon">
              <div class="i-lucide-users h-5 w-5" />
            </div>
            <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
              Productions collectives
            </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))">
            Une plateforme pour faciliter la création d'équipes et la réalisation de productions à l'échelle des bassins de vie. Passer la seconde.
          </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>
    </div>

    <BookPlayer v-model="showBookPlayer" />
    <BookPdfReader v-model="showPdfReader" />
  </div>
</template>

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

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

useSeoPage({
  title: content.value?.meta?.title ?? 'Autonomie économique',
  description: (content.value as Record<string, unknown> | null)?.description as string ?? 'Comprendre et expérimenter une économie fondée sur le don, la monnaie libre et la réciprocité.',
})

const showBookPlayer = ref(false)
const showPdfReader = ref(false)
</script>

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

.item-card {
  display: block;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-text) / 0.08);
  background: hsl(var(--color-surface));
  transition: border-color 0.2s, transform 0.12s ease;
  text-decoration: none;
}

.item-card:hover {
  border-color: hsl(var(--color-primary) / 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px hsl(var(--color-primary) / 0.08);
}

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

.g1-icon {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

.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);
}

.book-block {
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-text) / 0.08);
  background: hsl(var(--color-surface));
}

/* Monnaie libre card */
.g1-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    hsl(var(--color-surface)) 60%,
    hsl(var(--color-primary) / 0.06) 100%
  );
  border-color: hsl(var(--color-primary) / 0.14);
}

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

.g1-watermark {
  position: absolute;
  right: -0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5.5rem;
  line-height: 1;
  color: hsl(var(--color-primary) / 0.07);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}

.g1-card:hover .g1-watermark {
  color: hsl(var(--color-primary) / 0.11);
}

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

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

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

.shadok-apicultrice {
  left: 2%;
  top: 40%;
  opacity: 0.2;
  color: hsl(var(--color-accent));
  animation: shadok-float-3 10s ease-in-out infinite;
}

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

.shadok-maraichere {
  bottom: 14%;
  left: 1%;
  opacity: 0.18;
  color: hsl(var(--color-primary));
  animation: shadok-float-5 12s ease-in-out infinite;
}

.shadok-tisserand {
  bottom: 12%;
  right: 1%;
  opacity: 0.22;
  color: hsl(var(--color-accent));
  animation: shadok-float-6 9.5s ease-in-out infinite;
}

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

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

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

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

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

@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(-11px); }
}

@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(-10px); }
}

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

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