<template>
  <div class="relative overflow-hidden section-padding">
    <!-- Shadok codeuse — sitting at desk, typing on laptop, glasses -->
    <svg class="shadok-codeuse" viewBox="0 0 170 200" fill="none" aria-hidden="true">
      <!-- Desk -->
      <rect x="15" y="120" width="80" height="5" rx="2" fill="currentColor" opacity="0.3"/>
      <line x1="25" y1="125" x2="25" y2="165" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.25"/>
      <line x1="85" y1="125" x2="85" y2="165" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.25"/>
      <!-- Laptop on desk -->
      <rect x="30" y="108" width="50" height="12" rx="2" fill="currentColor" opacity="0.35"/>
      <path d="M35 108 L40 80 L70 80 L75 108" fill="currentColor" opacity="0.28"/>
      <rect x="42" y="84" width="26" height="18" rx="1" fill="currentColor" opacity="0.15"/>
      <!-- Code on screen < /> -->
      <text x="48" y="96" font-size="8" fill="currentColor" opacity="0.4" font-family="monospace">&lt;/&gt;</text>
      <!-- Body — seated, tilted forward -->
      <ellipse cx="110" cy="105" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(-10 110 105)"/>
      <!-- Head — looking at screen -->
      <circle cx="105" cy="68" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Glasses -->
      <circle cx="100" cy="66" r="5" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.4"/>
      <circle cx="111" cy="66" r="5" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.4"/>
      <line x1="105" y1="66" x2="106" y2="66" stroke="currentColor" stroke-width="1" opacity="0.35"/>
      <!-- Eyes behind glasses -->
      <circle cx="101" cy="66" r="1.5" fill="currentColor" opacity="0.5"/>
      <circle cx="110" cy="65" r="1.5" fill="currentColor" opacity="0.5"/>
      <!-- Beak — pointy, looking left -->
      <polygon points="88,68 82,65 88,72" fill="currentColor" opacity="0.35"/>
      <!-- Arms reaching to laptop -->
      <line x1="95" y1="95" x2="78" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="125" y1="98" x2="80" y2="115" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Legs — bent, seated -->
      <line x1="100" y1="128" x2="90" y2="180" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="118" y1="128" x2="125" y2="180" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet -->
      <ellipse cx="88" cy="183" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="127" cy="183" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok electricien — profile view, climbing utility pole, tool belt -->
    <svg class="shadok-electricien" viewBox="0 0 150 210" fill="none" aria-hidden="true">
      <!-- Utility pole -->
      <rect x="68" y="5" width="8" height="200" rx="2" fill="currentColor" opacity="0.2"/>
      <line x1="50" y1="30" x2="94" y2="30" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.25"/>
      <line x1="45" y1="55" x2="99" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.22"/>
      <!-- Cables hanging -->
      <path d="M50 30 Q35 45 30 35" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
      <path d="M94 30 Q110 45 115 35" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
      <path d="M45 55 Q30 68 25 60" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.18"/>
      <!-- Body — climbing, profile, tilted -->
      <ellipse cx="95" cy="100" rx="20" ry="25" fill="currentColor" opacity="0.25" transform="rotate(15 95 100)"/>
      <!-- Head — looking up at cable -->
      <circle cx="100" cy="65" r="14" fill="currentColor" opacity="0.3"/>
      <!-- Eyes — looking up -->
      <circle cx="96" cy="61" r="1.5" fill="currentColor" opacity="0.5"/>
      <circle cx="105" cy="60" r="1.5" fill="currentColor" opacity="0.45"/>
      <!-- Beak — profile right -->
      <polygon points="114,63 122,60 114,67" fill="currentColor" opacity="0.35"/>
      <!-- Hard hat -->
      <ellipse cx="100" cy="53" rx="16" ry="5" fill="currentColor" opacity="0.3"/>
      <path d="M88 53 Q100 42 112 53" fill="currentColor" opacity="0.25"/>
      <!-- Arms — one gripping pole, one holding cable -->
      <line x1="82" y1="90" x2="74" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="108" y1="88" x2="118" y2="60" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Tool belt -->
      <ellipse cx="95" cy="118" rx="22" ry="4" fill="currentColor" opacity="0.25"/>
      <rect x="82" y="118" width="6" height="8" rx="1" fill="currentColor" opacity="0.2"/>
      <rect x="105" y="118" width="5" height="10" rx="1" fill="currentColor" opacity="0.2"/>
      <!-- Legs — climbing, spread on pole -->
      <line x1="85" y1="122" x2="72" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="105" y1="122" x2="76" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet gripping pole -->
      <ellipse cx="70" cy="188" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="75" cy="178" rx="8" ry="3" fill="currentColor" opacity="0.28"/>
    </svg>

    <!-- Shadok soudeuse — welding mask flipped up, torch with sparks, apron -->
    <svg class="shadok-soudeuse" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body — upright, slight lean forward -->
      <ellipse cx="80" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Apron -->
      <path d="M62 95 L60 140 L100 140 L98 95" fill="currentColor" opacity="0.18"/>
      <line x1="80" y1="95" x2="80" y2="140" stroke="currentColor" stroke-width="1" opacity="0.15"/>
      <!-- Head -->
      <circle cx="80" cy="65" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Welding mask flipped up on head -->
      <rect x="65" y="42" width="30" height="18" rx="4" fill="currentColor" opacity="0.2"/>
      <rect x="70" y="46" width="20" height="10" rx="2" fill="currentColor" opacity="0.12"/>
      <!-- Eyes — squinting from bright light -->
      <line x1="73" y1="64" x2="77" y2="64" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.5"/>
      <line x1="84" y1="63" x2="88" y2="63" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.45"/>
      <!-- Beak — small, front-facing -->
      <polygon points="78,72 80,78 82,72" fill="currentColor" opacity="0.35"/>
      <!-- Right arm holding torch -->
      <line x1="100" y1="100" x2="135" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Welding torch -->
      <rect x="132" y="78" width="22" height="6" rx="2" fill="currentColor" opacity="0.35"/>
      <line x1="154" y1="81" x2="160" y2="78" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
      <!-- Sparks from torch -->
      <circle cx="158" cy="75" r="1.5" fill="currentColor" opacity="0.45"/>
      <circle cx="155" cy="70" r="1" fill="currentColor" opacity="0.35"/>
      <circle cx="160" cy="72" r="1.2" fill="currentColor" opacity="0.4"/>
      <line x1="157" y1="76" x2="160" y2="68" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
      <line x1="155" y1="78" x2="152" y2="71" stroke="currentColor" stroke-width="0.8" opacity="0.25"/>
      <!-- Left arm down -->
      <line x1="60" y1="100" x2="45" y2="125" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Legs — standing, spread -->
      <line x1="70" y1="136" x2="58" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="90" y1="136" x2="102" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Big flat feet -->
      <ellipse cx="55" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="105" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok admin réseau — tangled in cables, router at feet, frustrated -->
    <svg class="shadok-admin-reseau" viewBox="0 0 160 200" fill="none" aria-hidden="true">
      <!-- Body — upright but struggling -->
      <ellipse cx="80" cy="95" rx="21" ry="27" fill="currentColor" opacity="0.25"/>
      <!-- Head — tilted, frustrated -->
      <circle cx="82" cy="52" r="15" fill="currentColor" opacity="0.3" />
      <!-- Eyes — looking in different directions (frustrated) -->
      <circle cx="77" cy="50" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="88" cy="48" r="1.8" fill="currentColor" opacity="0.45"/>
      <!-- Angry eyebrows -->
      <line x1="74" y1="46" x2="79" y2="47" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
      <line x1="91" y1="44" x2="86" y2="46" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
      <!-- Beak — open, yelling -->
      <polygon points="73,56 65,55 73,60" fill="currentColor" opacity="0.35"/>
      <line x1="67" y1="56" x2="66" y2="58" stroke="currentColor" stroke-width="1" opacity="0.3"/>
      <!-- Cables tangling around body -->
      <path d="M50 40 Q30 60 55 80 Q80 95 60 115 Q40 130 70 140" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
      <path d="M110 45 Q130 65 105 85 Q85 100 110 120 Q125 130 95 145" stroke="currentColor" stroke-width="2" fill="none" opacity="0.28"/>
      <path d="M75 38 Q95 50 75 70" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.22"/>
      <!-- Arms — trying to untangle -->
      <line x1="60" y1="85" x2="40" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="100" y1="85" x2="120" y2="68" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Legs -->
      <line x1="70" y1="120" x2="60" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="90" y1="120" x2="100" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet -->
      <ellipse cx="57" cy="178" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="103" cy="178" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <!-- Router box at feet -->
      <rect x="60" y="168" width="40" height="14" rx="3" fill="currentColor" opacity="0.25"/>
      <circle cx="70" cy="175" r="1.5" fill="currentColor" opacity="0.35"/>
      <circle cx="78" cy="175" r="1.5" fill="currentColor" opacity="0.3"/>
      <circle cx="86" cy="175" r="1.5" fill="currentColor" opacity="0.35"/>
      <!-- Antenna on router -->
      <line x1="92" y1="168" x2="96" y2="155" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.25"/>
    </svg>

    <!-- Shadok imprimeuse 3D — watching printer build object layer by layer -->
    <svg class="shadok-imprimeuse3d" viewBox="0 0 170 210" fill="none" aria-hidden="true">
      <!-- 3D printer frame -->
      <rect x="10" y="90" width="65" height="60" rx="3" fill="currentColor" opacity="0.2"/>
      <!-- Printer rails -->
      <line x1="15" y1="95" x2="15" y2="145" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
      <line x1="70" y1="95" x2="70" y2="145" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
      <!-- Print bed -->
      <rect x="18" y="135" width="49" height="4" rx="1" fill="currentColor" opacity="0.25"/>
      <!-- Object being printed (layered) -->
      <rect x="32" y="128" width="20" height="7" rx="1" fill="currentColor" opacity="0.3"/>
      <rect x="34" y="122" width="16" height="6" rx="1" fill="currentColor" opacity="0.25"/>
      <rect x="36" y="117" width="12" height="5" rx="1" fill="currentColor" opacity="0.2"/>
      <!-- Extruder head -->
      <rect x="34" y="110" width="16" height="6" rx="2" fill="currentColor" opacity="0.35"/>
      <line x1="42" y1="116" x2="42" y2="118" stroke="currentColor" stroke-width="1.5" opacity="0.4"/>
      <!-- Body — leaning forward, watching intently -->
      <ellipse cx="120" cy="105" rx="20" ry="25" fill="currentColor" opacity="0.25" transform="rotate(-15 120 105)"/>
      <!-- Head — looking down at printer -->
      <circle cx="108" cy="70" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Eyes — both staring down at printer, fascinated -->
      <circle cx="103" cy="72" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="112" cy="73" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Beak — pointing down -->
      <polygon points="100,78 96,82 104,82" fill="currentColor" opacity="0.35"/>
      <!-- Arms — one pointing at printer -->
      <line x1="105" y1="95" x2="75" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="135" y1="98" x2="150" y2="115" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Legs — standing, leaning -->
      <line x1="112" y1="128" x2="105" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="128" y1="128" x2="138" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet -->
      <ellipse cx="103" cy="195" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="140" cy="195" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok cryptographe — 3/4 view, cloak, giant key + padlock -->
    <svg class="shadok-cryptographe" viewBox="0 0 170 210" fill="none" aria-hidden="true">
      <!-- Mysterious cloak -->
      <path d="M55 70 Q50 110 45 160 L125 160 Q120 110 115 70" fill="currentColor" opacity="0.15"/>
      <path d="M45 160 Q40 170 38 180 L132 180 Q130 170 125 160" fill="currentColor" opacity="0.12"/>
      <!-- Body under cloak -->
      <ellipse cx="85" cy="105" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head — 3/4 view, slightly turned -->
      <circle cx="85" cy="55" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Hood suggestion -->
      <path d="M68 50 Q85 35 102 50" fill="currentColor" opacity="0.18"/>
      <!-- Eyes — mysterious, one slightly larger -->
      <circle cx="80" cy="53" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="91" cy="52" r="1.5" fill="currentColor" opacity="0.4"/>
      <!-- Beak — 3/4 profile -->
      <polygon points="75,58 67,55 74,62" fill="currentColor" opacity="0.35"/>
      <!-- Left arm holding giant key -->
      <line x1="63" y1="95" x2="30" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Giant key -->
      <circle cx="18" cy="108" r="12" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.4"/>
      <line x1="30" y1="108" x2="55" y2="108" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="48" y1="108" x2="48" y2="118" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <line x1="53" y1="108" x2="53" y2="115" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <!-- Right arm holding padlock -->
      <line x1="107" y1="95" x2="140" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Padlock — big -->
      <rect x="135" y="82" width="28" height="24" rx="4" fill="currentColor" opacity="0.3"/>
      <path d="M141 82 L141 70 Q149 58 157 70 L157 82" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.35"/>
      <circle cx="149" cy="95" r="3" fill="currentColor" opacity="0.2"/>
      <line x1="149" y1="98" x2="149" y2="103" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
      <!-- Legs — long, cloak partly covering -->
      <line x1="75" y1="130" x2="65" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="95" y1="130" x2="108" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet -->
      <ellipse cx="63" cy="198" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="110" cy="198" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok droneuse — looking up at flying drone, remote in hands -->
    <svg class="shadok-droneuse" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Drone above -->
      <rect x="60" y="12" width="30" height="8" rx="3" fill="currentColor" opacity="0.3"/>
      <!-- Drone arms -->
      <line x1="55" y1="16" x2="35" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <line x1="95" y1="16" x2="115" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <!-- Propellers spinning -->
      <ellipse cx="35" cy="14" rx="12" ry="3" fill="currentColor" opacity="0.2"/>
      <ellipse cx="115" cy="14" rx="12" ry="3" fill="currentColor" opacity="0.2"/>
      <!-- Propeller blur lines -->
      <line x1="25" y1="12" x2="45" y2="12" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
      <line x1="105" y1="12" x2="125" y2="12" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
      <!-- Drone camera -->
      <circle cx="75" cy="22" r="3" fill="currentColor" opacity="0.25"/>
      <!-- Drone legs -->
      <line x1="62" y1="20" x2="58" y2="28" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
      <line x1="88" y1="20" x2="92" y2="28" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
      <!-- Body — upright, looking up -->
      <ellipse cx="78" cy="115" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
      <!-- Head — tilted back looking up -->
      <circle cx="78" cy="72" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Eyes — looking up at drone -->
      <circle cx="74" cy="68" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="83" cy="67" r="1.8" fill="currentColor" opacity="0.45"/>
      <!-- Beak — pointing up -->
      <polygon points="76,56 80,50 82,57" fill="currentColor" opacity="0.35"/>
      <!-- Arms — holding remote control -->
      <line x1="60" y1="108" x2="50" y2="128" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="96" y1="108" x2="106" y2="128" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Remote control in hands -->
      <rect x="42" y="126" width="70" height="14" rx="4" fill="currentColor" opacity="0.3"/>
      <circle cx="55" cy="133" r="3" fill="currentColor" opacity="0.2"/>
      <circle cx="100" cy="133" r="3" fill="currentColor" opacity="0.2"/>
      <!-- Joysticks -->
      <line x1="55" y1="130" x2="55" y2="127" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.3"/>
      <line x1="100" y1="131" x2="102" y2="128" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.3"/>
      <!-- Legs — standing -->
      <line x1="68" y1="138" x2="58" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="88" y1="138" x2="100" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Feet -->
      <ellipse cx="55" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="103" cy="198" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok mécanicienne — lying under machine, legs sticking out, wrench, oil drops -->
    <svg class="shadok-mecanicienne" viewBox="0 0 180 200" fill="none" aria-hidden="true">
      <!-- Machine/server box above -->
      <rect x="5" y="55" width="100" height="50" rx="5" fill="currentColor" opacity="0.2"/>
      <rect x="12" y="62" width="35" height="12" rx="2" fill="currentColor" opacity="0.15"/>
      <rect x="12" y="80" width="35" height="12" rx="2" fill="currentColor" opacity="0.15"/>
      <!-- Machine details -->
      <circle cx="20" cy="68" r="2" fill="currentColor" opacity="0.3"/>
      <circle cx="20" cy="86" r="2" fill="currentColor" opacity="0.25"/>
      <line x1="60" y1="65" x2="90" y2="65" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
      <line x1="60" y1="72" x2="85" y2="72" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
      <!-- Body — lying flat under machine, only partial visible -->
      <ellipse cx="80" cy="118" rx="25" ry="18" fill="currentColor" opacity="0.22" transform="rotate(90 80 118)"/>
      <!-- Head under machine (barely visible) -->
      <circle cx="55" cy="115" r="12" fill="currentColor" opacity="0.2"/>
      <!-- Arm sticking out with wrench -->
      <line x1="42" y1="115" x2="15" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Wrench -->
      <path d="M8 100 L15 105 L12 108 L5 103 Z" fill="currentColor" opacity="0.35"/>
      <circle cx="5" cy="100" r="5" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.3"/>
      <!-- Oil drops falling -->
      <ellipse cx="70" cy="108" rx="2" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="85" cy="112" rx="1.5" ry="2.5" fill="currentColor" opacity="0.25"/>
      <ellipse cx="62" cy="105" rx="1" ry="2" fill="currentColor" opacity="0.2"/>
      <!-- Legs sticking out from under machine — the signature view -->
      <line x1="90" y1="125" x2="130" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <line x1="95" y1="120" x2="145" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Big feet sticking up -->
      <ellipse cx="133" cy="178" rx="10" ry="4" fill="currentColor" opacity="0.35" transform="rotate(-25 133 178)"/>
      <ellipse cx="148" cy="168" rx="10" ry="4" fill="currentColor" opacity="0.35" transform="rotate(-25 148 168)"/>
      <!-- Beak visible from side -->
      <polygon points="42,118 35,116 42,122" fill="currentColor" opacity="0.3"/>
      <!-- Eye visible -->
      <circle cx="50" cy="113" r="1.5" fill="currentColor" opacity="0.4"/>
    </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">
        <div
          v-for="pillar in content?.pillars"
          :key="pillar.id"
          class="pillar-card"
        >
          <!-- Overlay lien — toute la carte cliquable -->
          <NuxtLink v-if="pillar.to" :to="pillar.to" class="pillar-overlay" :aria-label="pillar.label" tabindex="-1" />

          <!-- Corps de la carte -->
          <div class="pillar-body">
            <div class="pillar-header">
              <div class="pillar-icon">
                <div :class="`i-lucide-${pillar.icon}`" class="h-5 w-5" />
              </div>
              <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                {{ pillar.label }}
              </h2>
              <span v-if="pillar.gestation" class="gestation-badge">
                <div class="i-lucide-flask-conical h-3 w-3" />
                En gestation
              </span>
            </div>

            <p class="leading-relaxed whitespace-pre-line mt-3" style="color: hsl(var(--color-text-muted))">{{ pillar.text }}</p>

            <!-- Project card -->
            <div v-if="pillar.project" class="project-card mt-4">
              <div class="project-icon">
                <div class="i-lucide-rocket h-4 w-4" />
              </div>
              <div>
                <span class="font-display font-semibold text-sm" style="color: hsl(var(--color-text))">{{ pillar.project.name }}</span>
                <span class="text-sm ml-2" style="color: hsl(var(--color-text-muted))">{{ pillar.project.text }}</span>
              </div>
            </div>
          </div>

          <!-- Zone actions — z-index au-dessus de l'overlay -->
          <div v-if="(pillar as any).actions?.length" class="pillar-actions">
            <a
              v-for="action in (pillar as any).actions"
              :key="action.label"
              :href="action.href"
              target="_blank"
              rel="noopener noreferrer"
              class="pillar-action-btn"
              :class="{ 'pillar-action-btn--highlight': action.highlight }"
            >
              <div :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" />
              {{ action.label }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

useSeoPage({
  title: content.value?.meta?.title ?? 'Autonomie numérique',
  description: (content.value as Record<string, unknown> | null)?.description as string ?? 'Logiciel libre, authentification Web of Trust, cloud souverain — reprendre le contrôle de ses outils numériques.',
})
</script>

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

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

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

.pillar-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.pillar-body {
  padding: 1.5rem;
}

.pillar-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);
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  position: relative;
  z-index: 2;
}

.pillar-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;
  color: hsl(var(--color-text) / 0.7);
  background: hsl(var(--color-text) / 0.05);
  border: 1px solid hsl(var(--color-text) / 0.1);
  transition: all 0.2s;
  text-decoration: none;
  cursor: pointer;
}

.pillar-action-btn:hover {
  color: hsl(var(--color-text));
  background: hsl(var(--color-primary) / 0.12);
  border-color: hsl(var(--color-primary) / 0.3);
}

.pillar-action-btn--highlight {
  color: hsl(var(--color-primary));
  background: hsl(var(--color-primary) / 0.12);
  border-color: hsl(var(--color-primary) / 0.25);
}

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

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

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

.project-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-bg) / 0.5);
  border: 1px solid hsl(var(--color-primary) / 0.1);
}

.project-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  flex-shrink: 0;
}

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

.shadok-electricien {
  position: absolute;
  right: 1%;
  top: 3%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-electricien 11s ease-in-out infinite;
}

.shadok-soudeuse {
  position: absolute;
  left: 3%;
  top: 40%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-soudeuse 8s ease-in-out infinite;
}

.shadok-admin-reseau {
  position: absolute;
  right: 2%;
  top: 35%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-admin-reseau 10s ease-in-out infinite;
}

.shadok-imprimeuse3d {
  position: absolute;
  left: 2%;
  bottom: 8%;
  width: clamp(70px, 10vw, 135px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-imprimeuse3d 12s ease-in-out infinite;
}

.shadok-cryptographe {
  position: absolute;
  right: 1%;
  bottom: 6%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.18;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-cryptographe 11s ease-in-out infinite;
}

.shadok-droneuse {
  position: absolute;
  left: 40%;
  bottom: 2%;
  width: clamp(70px, 10vw, 130px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-droneuse 7s ease-in-out infinite;
}

.shadok-mecanicienne {
  position: absolute;
  right: 2%;
  top: 60%;
  width: clamp(70px, 10vw, 140px);
  opacity: 0.22;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-mecanicienne 9s ease-in-out infinite;
}

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

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

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

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

@keyframes shadok-float-imprimeuse3d {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-11px) rotate(0.5deg); }
}

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

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

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

@media (max-width: 768px) {
  .shadok-codeuse { display: none; }
  .shadok-electricien { display: none; }
  .shadok-soudeuse { display: none; }
  .shadok-admin-reseau { display: none; }
  .shadok-imprimeuse3d { display: none; }
  .shadok-cryptographe { display: none; }
  .shadok-droneuse { display: none; }
  .shadok-mecanicienne { display: none; }
}
</style>
