9caf11c8ab
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- Structure par section : /numerique, /economique, /citoyenne (plus de /gestation) - Chaque section a index + sous-pages avec contenu YAML administrable - API content supporte les chemins imbriqués ([...path]) - Admin : liste des pages + éditeur par section - Page /economique : monnaie libre (picto Ğ1), modèle éco, productions collectives, commande livre - Page /citoyenne : decision (CTA Glibredecision), tarifs-eau (CTA SejeteralO) - BookActions : composant partagé (player, PDF, chapitres, commande) sur home, eco et modele-eco - GrateWizard remonté dans la section économique de la home - Palette été par défaut, choix persisté en localStorage - Fix lisibilité été (text-white/65 + variables CSS) - Shadoks thématiques sur toutes les pages (8-10 par page, métiers variés) - Redirections 301 : /gestation/*, /modele-eco/*, /decision, /lire/* - README, CONTRIBUTING, CLAUDE.md mis à jour Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
559 lines
28 KiB
Vue
559 lines
28 KiB
Vue
<template>
|
|
<div class="relative overflow-hidden section-padding min-h-[70vh] flex items-center justify-center">
|
|
<!-- 1. Shadok funambule: walking on tightrope (top-left) -->
|
|
<svg class="shadok-funambule" viewBox="0 0 170 200" fill="none" aria-hidden="true">
|
|
<!-- Tightrope -->
|
|
<line x1="5" y1="170" x2="165" y2="170" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
|
<!-- Body (small oval, leaning forward) -->
|
|
<ellipse cx="85" cy="110" rx="20" ry="28" fill="currentColor" opacity="0.25" transform="rotate(-5 85 110)"/>
|
|
<!-- Head -->
|
|
<circle cx="88" cy="72" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- Eyes (focused, looking down-right) -->
|
|
<circle cx="93" cy="70" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="99" cy="71" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<!-- Beak (pointy, right side) -->
|
|
<polygon points="103,74 116,72 103,78" fill="currentColor" opacity="0.3"/>
|
|
<!-- Balancing pole (big, horizontal) -->
|
|
<line x1="10" y1="92" x2="160" y2="88" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
|
<!-- Arms holding pole -->
|
|
<line x1="67" y1="100" x2="45" y2="92" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="103" y1="98" x2="125" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Left leg (forward, on rope) -->
|
|
<line x1="78" y1="136" x2="70" y2="170" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="70" cy="172" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
|
<!-- Right leg (back, lifted) -->
|
|
<line x1="92" y1="136" x2="108" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="108" cy="167" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
|
</svg>
|
|
|
|
<!-- 2. Shadok accordeoniste: playing accordion (top-right, profile) -->
|
|
<svg class="shadok-accordeoniste" viewBox="0 0 180 210" fill="none" aria-hidden="true">
|
|
<!-- Body (profile, small) -->
|
|
<ellipse cx="70" cy="115" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
|
|
<!-- Head (profile) -->
|
|
<circle cx="72" cy="75" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- Beret -->
|
|
<ellipse cx="72" cy="60" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="72" cy="56" r="4" fill="currentColor" opacity="0.25"/>
|
|
<!-- Eye (profile, one visible) -->
|
|
<circle cx="80" cy="73" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<!-- Beak (profile right) -->
|
|
<polygon points="86,76 98,74 86,80" fill="currentColor" opacity="0.3"/>
|
|
<!-- Accordion bellows (big, extended right) -->
|
|
<rect x="92" y="95" width="12" height="45" rx="2" fill="currentColor" opacity="0.3"/>
|
|
<line x1="98" y1="98" x2="98" y2="137" stroke="currentColor" stroke-width="0.8" opacity="0.2"/>
|
|
<rect x="107" y="93" width="8" height="49" rx="2" fill="currentColor" opacity="0.25"/>
|
|
<rect x="118" y="91" width="8" height="53" rx="2" fill="currentColor" opacity="0.2"/>
|
|
<rect x="129" y="89" width="8" height="57" rx="2" fill="currentColor" opacity="0.25"/>
|
|
<rect x="140" y="87" width="12" height="61" rx="2" fill="currentColor" opacity="0.3"/>
|
|
<!-- Keyboard dots on right panel -->
|
|
<circle cx="146" cy="100" r="1.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="146" cy="110" r="1.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="146" cy="120" r="1.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="146" cy="130" r="1.5" fill="currentColor" opacity="0.2"/>
|
|
<!-- Left arm on bellows -->
|
|
<line x1="52" y1="105" x2="92" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Right arm stretched to far end -->
|
|
<line x1="90" y1="108" x2="140" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Foot tapping (right lifted) -->
|
|
<line x1="60" y1="141" x2="52" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="52" cy="197" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
|
<line x1="80" y1="141" x2="90" y2="188" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="90" cy="190" rx="8" ry="3" fill="currentColor" opacity="0.3" transform="rotate(-15 90 190)"/>
|
|
<!-- Music notes -->
|
|
<text x="155" y="80" fill="currentColor" opacity="0.25" font-size="14">♪</text>
|
|
<text x="145" y="68" fill="currentColor" opacity="0.2" font-size="11">♫</text>
|
|
</svg>
|
|
|
|
<!-- 3. Shadok jongleur: 4 balls in the air (top-center) -->
|
|
<svg class="shadok-jongleur" viewBox="0 0 160 210" fill="none" aria-hidden="true">
|
|
<!-- Body -->
|
|
<ellipse cx="80" cy="120" rx="21" ry="27" fill="currentColor" opacity="0.25"/>
|
|
<!-- Head -->
|
|
<circle cx="80" cy="82" r="15" fill="currentColor" opacity="0.3"/>
|
|
<!-- Eyes (looking up, wide) -->
|
|
<circle cx="74" cy="78" r="2" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="86" cy="78" r="2" fill="currentColor" opacity="0.5"/>
|
|
<!-- Mouth open (concentration) -->
|
|
<ellipse cx="80" cy="92" rx="4" ry="3" fill="currentColor" opacity="0.2"/>
|
|
<!-- Beak (small, front view) -->
|
|
<polygon points="80,86 87,89 80,92" fill="currentColor" opacity="0.3"/>
|
|
<!-- Arms up wide -->
|
|
<line x1="60" y1="110" x2="30" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="100" y1="110" x2="130" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- 4 juggling balls in arc -->
|
|
<circle cx="40" cy="35" r="8" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="70" cy="18" r="8" fill="currentColor" opacity="0.25"/>
|
|
<circle cx="100" cy="15" r="8" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="128" cy="30" r="8" fill="currentColor" opacity="0.25"/>
|
|
<!-- Long legs -->
|
|
<line x1="72" y1="145" x2="60" y2="200" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="60" cy="202" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
|
<line x1="88" y1="145" x2="100" y2="200" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="100" cy="202" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
|
</svg>
|
|
|
|
<!-- 4. Shadok cracheur de feu: head tilted back, flame from mouth -->
|
|
<svg class="shadok-cracheur" viewBox="0 0 170 220" fill="none" aria-hidden="true">
|
|
<!-- Body -->
|
|
<ellipse cx="75" cy="125" rx="22" ry="30" fill="currentColor" opacity="0.25"/>
|
|
<!-- Head (tilted back) -->
|
|
<circle cx="78" cy="82" r="16" fill="currentColor" opacity="0.3" />
|
|
<!-- Eyes (looking up) -->
|
|
<circle cx="73" cy="76" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="83" cy="76" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<!-- Beak (pointing up, open) -->
|
|
<polygon points="78,66 85,52 72,66" fill="currentColor" opacity="0.3"/>
|
|
<!-- Flame stream from beak (big, upward-right) -->
|
|
<path d="M82 54 Q100 25 95 10 Q110 30 120 8 Q115 35 135 15 Q120 42 140 30 Q118 50 130 45" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="currentColor" opacity="0.2"/>
|
|
<!-- Torch in left hand -->
|
|
<line x1="55" y1="115" x2="30" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<rect x="24" y="78" width="8" height="16" rx="2" fill="currentColor" opacity="0.35"/>
|
|
<path d="M28 78 Q28 68 32 72 Q28 65 28 78" fill="currentColor" opacity="0.25"/>
|
|
<!-- Right arm out for balance -->
|
|
<line x1="95" y1="112" x2="125" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Long legs -->
|
|
<line x1="66" y1="153" x2="55" y2="210" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="55" cy="212" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
|
<line x1="84" y1="153" x2="95" y2="210" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="95" cy="212" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
|
|
</svg>
|
|
|
|
<!-- 5. Shadok trapeziste: hanging from trapeze, body in arc -->
|
|
<svg class="shadok-trapeziste" viewBox="0 0 150 220" fill="none" aria-hidden="true">
|
|
<!-- Trapeze ropes -->
|
|
<line x1="40" y1="0" x2="50" y2="40" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
|
<line x1="110" y1="0" x2="100" y2="40" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- Trapeze bar -->
|
|
<line x1="48" y1="40" x2="102" y2="40" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.35"/>
|
|
<!-- Arms (hanging from bar) -->
|
|
<line x1="60" y1="42" x2="65" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="90" y1="42" x2="85" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Body (arched, graceful) -->
|
|
<ellipse cx="75" cy="95" rx="20" ry="25" fill="currentColor" opacity="0.25" transform="rotate(10 75 95)"/>
|
|
<!-- Head (below body, looking down) -->
|
|
<circle cx="78" cy="72" r="14" fill="currentColor" opacity="0.3"/>
|
|
<!-- Eyes (excited, looking down) -->
|
|
<circle cx="74" cy="74" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="84" cy="75" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<!-- Beak (pointing down-right) -->
|
|
<polygon points="86,78 96,84 86,82" fill="currentColor" opacity="0.3"/>
|
|
<!-- Legs (pointed, graceful, extending down-right) -->
|
|
<line x1="80" y1="118" x2="95" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="70" y1="118" x2="82" y2="180" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Pointed feet -->
|
|
<polygon points="95,175 105,180 95,182" fill="currentColor" opacity="0.3"/>
|
|
<polygon points="82,180 92,185 82,187" fill="currentColor" opacity="0.3"/>
|
|
</svg>
|
|
|
|
<!-- 6. Shadok batteur: behind drum kit, sticks raised -->
|
|
<svg class="shadok-batteur" viewBox="0 0 180 210" fill="none" aria-hidden="true">
|
|
<!-- Snare drum (center, big) -->
|
|
<ellipse cx="90" cy="165" rx="35" ry="12" fill="currentColor" opacity="0.2"/>
|
|
<rect x="55" y="155" width="70" height="20" rx="3" fill="currentColor" opacity="0.2"/>
|
|
<ellipse cx="90" cy="155" rx="35" ry="12" fill="currentColor" opacity="0.25"/>
|
|
<!-- Hi-hat (left) -->
|
|
<ellipse cx="30" cy="140" rx="18" ry="5" fill="currentColor" opacity="0.2"/>
|
|
<line x1="30" y1="140" x2="30" y2="185" stroke="currentColor" stroke-width="2" opacity="0.2"/>
|
|
<!-- Cymbal (right) -->
|
|
<ellipse cx="155" cy="120" rx="20" ry="5" fill="currentColor" opacity="0.2"/>
|
|
<line x1="155" y1="120" x2="155" y2="185" stroke="currentColor" stroke-width="2" opacity="0.2"/>
|
|
<!-- Body (behind kit) -->
|
|
<ellipse cx="90" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
|
|
<!-- Head -->
|
|
<circle cx="90" cy="70" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- Eyes (intense, looking at drums) -->
|
|
<circle cx="84" cy="68" r="2" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="96" cy="69" r="2" fill="currentColor" opacity="0.5"/>
|
|
<!-- Beak (front, small) -->
|
|
<polygon points="90,76 97,80 90,82" fill="currentColor" opacity="0.3"/>
|
|
<!-- Arms raised with drumsticks -->
|
|
<line x1="70" y1="100" x2="40" y2="65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="40" y1="65" x2="25" y2="50" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
<line x1="110" y1="100" x2="140" y2="60" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="140" y1="60" x2="158" y2="48" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
<!-- Motion lines on sticks -->
|
|
<path d="M22 52 Q18 48 20 44" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
<path d="M160 50 Q164 46 162 42" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
<!-- Legs (tucked behind kit) -->
|
|
<line x1="80" y1="136" x2="70" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
|
<ellipse cx="70" cy="197" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
|
|
<line x1="100" y1="136" x2="110" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
|
|
<ellipse cx="110" cy="197" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
|
|
</svg>
|
|
|
|
<!-- 7. Shadok marionnettiste: holding puppet strings -->
|
|
<svg class="shadok-marionnettiste" viewBox="0 0 160 220" fill="none" aria-hidden="true">
|
|
<!-- Body -->
|
|
<ellipse cx="80" cy="75" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
|
|
<!-- Head -->
|
|
<circle cx="80" cy="40" r="15" fill="currentColor" opacity="0.3"/>
|
|
<!-- Eyes (looking down at puppet) -->
|
|
<circle cx="75" cy="42" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="86" cy="43" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<!-- Beak -->
|
|
<polygon points="89,44 100,42 89,48" fill="currentColor" opacity="0.3"/>
|
|
<!-- Arms down holding control bar -->
|
|
<line x1="62" y1="68" x2="50" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="98" y1="68" x2="110" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Control bar (cross) -->
|
|
<line x1="40" y1="108" x2="120" y2="108" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
|
|
<line x1="80" y1="98" x2="80" y2="118" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
|
|
<!-- Puppet strings -->
|
|
<line x1="45" y1="108" x2="55" y2="155" stroke="currentColor" stroke-width="1" opacity="0.25"/>
|
|
<line x1="80" y1="118" x2="70" y2="158" stroke="currentColor" stroke-width="1" opacity="0.25"/>
|
|
<line x1="115" y1="108" x2="85" y2="155" stroke="currentColor" stroke-width="1" opacity="0.25"/>
|
|
<line x1="80" y1="98" x2="70" y2="148" stroke="currentColor" stroke-width="1" opacity="0.25"/>
|
|
<!-- Mini puppet shadok -->
|
|
<circle cx="70" cy="155" r="8" fill="currentColor" opacity="0.2"/>
|
|
<ellipse cx="70" cy="172" rx="10" ry="13" fill="currentColor" opacity="0.15"/>
|
|
<!-- Puppet eyes -->
|
|
<circle cx="67" cy="154" r="1" fill="currentColor" opacity="0.4"/>
|
|
<circle cx="74" cy="154" r="1" fill="currentColor" opacity="0.4"/>
|
|
<!-- Puppet beak -->
|
|
<polygon points="76,156 82,155 76,158" fill="currentColor" opacity="0.2"/>
|
|
<!-- Puppet legs -->
|
|
<line x1="64" y1="184" x2="58" y2="208" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="76" y1="184" x2="82" y2="208" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- Master shadok legs -->
|
|
<line x1="72" y1="99" x2="62" y2="155" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<line x1="88" y1="99" x2="98" y2="155" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<ellipse cx="62" cy="157" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="98" cy="157" rx="7" ry="3" fill="currentColor" opacity="0.25"/>
|
|
</svg>
|
|
|
|
<!-- 8. Shadok clown: oversized shoes, red nose, squirting flower -->
|
|
<svg class="shadok-clown" viewBox="0 0 160 210" fill="none" aria-hidden="true">
|
|
<!-- Body -->
|
|
<ellipse cx="80" cy="110" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
|
|
<!-- Head -->
|
|
<circle cx="80" cy="70" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- Party hat (tall cone) -->
|
|
<polygon points="80,38 68,62 92,62" fill="currentColor" opacity="0.25"/>
|
|
<circle cx="80" cy="38" r="3" fill="currentColor" opacity="0.35"/>
|
|
<!-- Big red nose (circle on beak) -->
|
|
<circle cx="92" cy="74" r="5" fill="currentColor" opacity="0.4"/>
|
|
<!-- Beak behind nose -->
|
|
<polygon points="88,72 100,74 88,78" fill="currentColor" opacity="0.2"/>
|
|
<!-- Eyes (different directions — goofy) -->
|
|
<circle cx="74" cy="66" r="2" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="85" cy="64" r="2" fill="currentColor" opacity="0.5"/>
|
|
<!-- Big goofy grin -->
|
|
<path d="M72 82 Q80 90 88 82" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
<!-- Squirting flower on chest -->
|
|
<circle cx="80" cy="95" r="6" fill="currentColor" opacity="0.25"/>
|
|
<circle cx="80" cy="95" r="2.5" fill="currentColor" opacity="0.35"/>
|
|
<!-- Water squirt from flower -->
|
|
<path d="M86 93 Q100 85 105 90" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
<circle cx="107" cy="90" r="2" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="112" cy="88" r="1.5" fill="currentColor" opacity="0.15"/>
|
|
<!-- Arms -->
|
|
<line x1="60" y1="100" x2="35" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="100" y1="100" x2="125" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Long legs -->
|
|
<line x1="72" y1="136" x2="50" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="88" y1="136" x2="110" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- OVERSIZED shoes -->
|
|
<ellipse cx="42" cy="190" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
|
|
<ellipse cx="118" cy="190" rx="18" ry="6" fill="currentColor" opacity="0.3"/>
|
|
</svg>
|
|
|
|
<!-- 9. Shadok acrobate: mid-cartwheel, body rotated 90deg -->
|
|
<svg class="shadok-acrobate" viewBox="0 0 160 200" fill="none" aria-hidden="true">
|
|
<!-- Body (rotated 90 degrees) -->
|
|
<ellipse cx="80" cy="100" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(90 80 100)"/>
|
|
<!-- Head (at bottom-right, inverted) -->
|
|
<circle cx="112" cy="100" r="14" fill="currentColor" opacity="0.3"/>
|
|
<!-- Eyes (dizzy, spiral-ish) -->
|
|
<path d="M108 97 Q110 94 113 97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<path d="M117 97 Q119 94 122 97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<!-- Beak (pointing right) -->
|
|
<polygon points="124,102 136,100 124,106" fill="currentColor" opacity="0.3"/>
|
|
<!-- Limbs in pinwheel pattern -->
|
|
<!-- Arm up-right -->
|
|
<line x1="85" y1="80" x2="110" y2="35" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Arm down-left -->
|
|
<line x1="75" y1="120" x2="50" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Leg up-left (hand on ground) -->
|
|
<line x1="65" y1="88" x2="25" y2="55" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<circle cx="23" cy="53" r="4" fill="currentColor" opacity="0.25"/>
|
|
<!-- Leg down-right -->
|
|
<line x1="95" y1="112" x2="135" y2="150" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Feet -->
|
|
<ellipse cx="110" cy="33" rx="6" ry="3" fill="currentColor" opacity="0.25" transform="rotate(-60 110 33)"/>
|
|
<ellipse cx="135" cy="152" rx="6" ry="3" fill="currentColor" opacity="0.25" transform="rotate(40 135 152)"/>
|
|
<!-- Motion arc -->
|
|
<path d="M30 40 Q20 50 25 60" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
<path d="M140 140 Q148 148 145 158" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
</svg>
|
|
|
|
<!-- 10. Shadok regisseur: headset, clipboard, running -->
|
|
<svg class="shadok-regisseur" viewBox="0 0 160 210" fill="none" aria-hidden="true">
|
|
<!-- Body (leaning forward, running) -->
|
|
<ellipse cx="75" cy="105" rx="20" ry="27" fill="currentColor" opacity="0.25" transform="rotate(-12 75 105)"/>
|
|
<!-- Head -->
|
|
<circle cx="80" cy="68" r="15" fill="currentColor" opacity="0.3"/>
|
|
<!-- Headset arc -->
|
|
<path d="M66 60 Q80 48 94 60" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.35"/>
|
|
<!-- Headset earpiece -->
|
|
<ellipse cx="66" cy="64" rx="4" ry="6" fill="currentColor" opacity="0.3"/>
|
|
<!-- Headset mic -->
|
|
<path d="M66 70 Q62 78 70 80" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
<!-- Eyes (stressed, one looking forward one sideways) -->
|
|
<circle cx="76" cy="65" r="2" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="87" cy="64" r="2" fill="currentColor" opacity="0.5"/>
|
|
<!-- Beak -->
|
|
<polygon points="91,68 104,66 91,72" fill="currentColor" opacity="0.3"/>
|
|
<!-- Lanyard -->
|
|
<line x1="80" y1="82" x2="80" y2="100" stroke="currentColor" stroke-width="1.5" opacity="0.25"/>
|
|
<!-- Badge -->
|
|
<rect x="74" y="100" width="12" height="15" rx="2" fill="currentColor" opacity="0.25"/>
|
|
<rect x="76" y="103" width="8" height="3" rx="1" fill="currentColor" opacity="0.15"/>
|
|
<!-- Right arm pointing forward (with authority) -->
|
|
<line x1="92" y1="95" x2="135" y2="75" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Pointing finger -->
|
|
<line x1="135" y1="75" x2="145" y2="70" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
<!-- Left arm holding clipboard -->
|
|
<line x1="58" y1="98" x2="38" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<!-- Clipboard (big) -->
|
|
<rect x="22" y="105" width="22" height="30" rx="2" fill="currentColor" opacity="0.25"/>
|
|
<rect x="28" y="102" width="10" height="5" rx="1" fill="currentColor" opacity="0.3"/>
|
|
<!-- Clipboard lines -->
|
|
<line x1="26" y1="114" x2="40" y2="114" stroke="currentColor" stroke-width="1" opacity="0.15"/>
|
|
<line x1="26" y1="120" x2="38" y2="120" stroke="currentColor" stroke-width="1" opacity="0.15"/>
|
|
<line x1="26" y1="126" x2="40" y2="126" stroke="currentColor" stroke-width="1" opacity="0.15"/>
|
|
<!-- Legs (running stride, long) -->
|
|
<line x1="68" y1="130" x2="40" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="38" cy="197" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
|
<line x1="82" y1="130" x2="115" y2="190" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
|
|
<ellipse cx="117" cy="192" rx="9" ry="3" fill="currentColor" opacity="0.3"/>
|
|
</svg>
|
|
|
|
<div class="container-content relative z-10 text-center">
|
|
<p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
|
|
<h1 class="page-title font-display font-extrabold tracking-tight" style="color: hsl(var(--color-text))">
|
|
{{ content?.title }}
|
|
</h1>
|
|
<p class="mt-4 text-lg" style="color: hsl(var(--color-text-muted))">
|
|
{{ content?.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
const { data: content } = await usePageContent('evenement')
|
|
|
|
useHead({
|
|
title: content.value?.meta?.title ?? 'Évènement',
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
font-size: clamp(2.5rem, 6vw, 3.5rem);
|
|
}
|
|
|
|
/* 1. Funambule — top-left */
|
|
.shadok-funambule {
|
|
position: absolute;
|
|
left: 4%;
|
|
top: 5%;
|
|
width: clamp(70px, 10vw, 140px);
|
|
opacity: 0.24;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-sway-funambule 9s ease-in-out infinite;
|
|
}
|
|
|
|
/* 2. Accordeoniste — top-right */
|
|
.shadok-accordeoniste {
|
|
position: absolute;
|
|
right: 3%;
|
|
top: 4%;
|
|
width: clamp(70px, 10vw, 140px);
|
|
opacity: 0.22;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-bounce-accordeon 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* 3. Jongleur — top-center */
|
|
.shadok-jongleur {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 2%;
|
|
transform: translateX(-50%);
|
|
width: clamp(70px, 10vw, 130px);
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-float-jongleur 7s ease-in-out infinite;
|
|
}
|
|
|
|
/* 4. Cracheur de feu — left 5%, 40% */
|
|
.shadok-cracheur {
|
|
position: absolute;
|
|
left: 5%;
|
|
top: 40%;
|
|
width: clamp(70px, 10vw, 140px);
|
|
opacity: 0.22;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-flicker-cracheur 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* 5. Trapeziste — right 3%, 30% */
|
|
.shadok-trapeziste {
|
|
position: absolute;
|
|
right: 3%;
|
|
top: 30%;
|
|
width: clamp(70px, 10vw, 130px);
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-swing-trapeze 10s ease-in-out infinite;
|
|
}
|
|
|
|
/* 6. Batteur — left 4%, bottom 15% */
|
|
.shadok-batteur {
|
|
position: absolute;
|
|
left: 4%;
|
|
bottom: 15%;
|
|
width: clamp(70px, 10vw, 140px);
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-pulse-batteur 7s ease-in-out infinite;
|
|
}
|
|
|
|
/* 7. Marionnettiste — right 4%, bottom 20% */
|
|
.shadok-marionnettiste {
|
|
position: absolute;
|
|
right: 4%;
|
|
bottom: 20%;
|
|
width: clamp(70px, 10vw, 130px);
|
|
opacity: 0.22;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-bob-marionnette 9s ease-in-out infinite;
|
|
}
|
|
|
|
/* 8. Clown — bottom-left */
|
|
.shadok-clown {
|
|
position: absolute;
|
|
left: 6%;
|
|
bottom: 3%;
|
|
width: clamp(70px, 10vw, 135px);
|
|
opacity: 0.24;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-wobble-clown 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* 9. Acrobate — center-bottom */
|
|
.shadok-acrobate {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 2%;
|
|
transform: translateX(-50%);
|
|
width: clamp(70px, 10vw, 130px);
|
|
opacity: 0.18;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-spin-acrobate 12s ease-in-out infinite;
|
|
}
|
|
|
|
/* 10. Regisseur — bottom-right */
|
|
.shadok-regisseur {
|
|
position: absolute;
|
|
right: 3%;
|
|
bottom: 4%;
|
|
width: clamp(70px, 10vw, 140px);
|
|
opacity: 0.22;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-rush-regisseur 7s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shadok-sway-funambule {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
25% { transform: translateY(-5px) rotate(2deg); }
|
|
75% { transform: translateY(-3px) rotate(-2deg); }
|
|
}
|
|
|
|
@keyframes shadok-bounce-accordeon {
|
|
0%, 100% { transform: translateY(0); }
|
|
40% { transform: translateY(-8px); }
|
|
70% { transform: translateY(-3px); }
|
|
}
|
|
|
|
@keyframes shadok-float-jongleur {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(-10px); }
|
|
}
|
|
|
|
@keyframes shadok-flicker-cracheur {
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
30% { transform: translateY(-4px) scale(1.02); }
|
|
60% { transform: translateY(-2px) scale(0.99); }
|
|
}
|
|
|
|
@keyframes shadok-swing-trapeze {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
25% { transform: rotate(4deg); }
|
|
75% { transform: rotate(-4deg); }
|
|
}
|
|
|
|
@keyframes shadok-pulse-batteur {
|
|
0%, 100% { transform: translateY(0); }
|
|
15% { transform: translateY(-4px); }
|
|
30% { transform: translateY(0); }
|
|
45% { transform: translateY(-6px); }
|
|
60% { transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes shadok-bob-marionnette {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-7px); }
|
|
}
|
|
|
|
@keyframes shadok-wobble-clown {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
30% { transform: translateY(-5px) rotate(-3deg); }
|
|
70% { transform: translateY(-2px) rotate(3deg); }
|
|
}
|
|
|
|
@keyframes shadok-spin-acrobate {
|
|
0% { transform: translateX(-50%) rotate(0deg); }
|
|
50% { transform: translateX(-50%) rotate(10deg); }
|
|
100% { transform: translateX(-50%) rotate(0deg); }
|
|
}
|
|
|
|
@keyframes shadok-rush-regisseur {
|
|
0%, 100% { transform: translateX(0) translateY(0); }
|
|
25% { transform: translateX(3px) translateY(-5px); }
|
|
50% { transform: translateX(-2px) translateY(-2px); }
|
|
75% { transform: translateX(2px) translateY(-6px); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.shadok-funambule,
|
|
.shadok-accordeoniste,
|
|
.shadok-jongleur,
|
|
.shadok-cracheur,
|
|
.shadok-trapeziste,
|
|
.shadok-batteur,
|
|
.shadok-marionnettiste,
|
|
.shadok-clown,
|
|
.shadok-acrobate,
|
|
.shadok-regisseur {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|