identité : le kit du studio DA intégré, les 61 oiseaux posés sur la page
Copie du kit kit-site (empreinte vérifiée) : logotype dans l'en-tête, signe §, favicons et icônes, og-default (?v=3), frise du pied de page, 61 oiseaux. Les shadoks positionnés à la main (HomeShadoks et les règles des 10 pages) cèdent la place à UiOiseauPose : chaque oiseau se pose sur une arête réelle (perché, marge gauche ou droite, derrière une carte, libre), currentColor, largeur 72 px au moins, opacité 0,18-0,28 près du texte et 0,10-0,14 derrière, jamais deux fois sur une page, calligraphe et typographe jamais en miroir. Sous 768 px, un oiseau par page au plus ; seuls ceux derrière une carte dérivent un peu, et plus du tout en mouvement réduit. Consignes d'Yvv du 03/11 inscrites dans docs/consignes-yvv.md. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
+13
-494
@@ -1,378 +1,5 @@
|
||||
<template>
|
||||
<div class="axis-scope axis-scope--eco 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="axis-scope axis-scope--eco oiseaux-scene relative overflow-hidden section-padding">
|
||||
<div class="container-content">
|
||||
<!-- Header -->
|
||||
<header class="mb-12 text-center">
|
||||
@@ -386,7 +13,10 @@
|
||||
</header>
|
||||
|
||||
<div class="mx-auto max-w-3xl flex flex-col gap-8">
|
||||
<!-- Monnaie libre -->
|
||||
<!-- Monnaie libre — the card clips its Ğ1 watermark, so the bird stands on a wrapper -->
|
||||
<div class="relative">
|
||||
<UiOiseauPose nom="pompeur-de-g1" pose="marge-d" ecart="34px" bottom="18%" :w="126" retourne />
|
||||
<UiOiseauPose nom="pompeur-de-g1" pose="perche" right="24px" :w="80" mobile-seul />
|
||||
<NuxtLink to="/economique/monnaie-libre" class="item-card g1-card group">
|
||||
<span class="g1-watermark" aria-hidden="true">Ğ1</span>
|
||||
<div class="item-header">
|
||||
@@ -406,9 +36,12 @@
|
||||
<div class="i-lucide-arrow-right h-3.5 w-3.5" />
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Modèle économique — bloc livre -->
|
||||
<div class="book-block">
|
||||
<!-- The balance (the measure of the gift) peeks out from behind the book -->
|
||||
<UiOiseauPose nom="la-balance" pose="derriere" left="-150px" bottom="-20px" :w="240" />
|
||||
<HomeBookSection
|
||||
compact
|
||||
@open-player="showBookPlayer = true"
|
||||
@@ -418,6 +51,9 @@
|
||||
|
||||
<!-- Productions collectives -->
|
||||
<NuxtLink to="/economique/productions-collectives" class="item-card group">
|
||||
<UiOiseauPose nom="boulangere" pose="perche" left="calc(76% - 38px)" :w="76" />
|
||||
<UiOiseauPose nom="apicultrice" pose="marge-g" ecart="52px" :w="124" />
|
||||
<UiOiseauPose nom="maraichere" pose="marge-d" ecart="46px" bottom="-90px" :w="108" retourne />
|
||||
<div class="item-header">
|
||||
<div class="item-icon">
|
||||
<div class="i-lucide-users h-5 w-5" />
|
||||
@@ -469,6 +105,7 @@ const showPdfReader = ref(false)
|
||||
}
|
||||
|
||||
.item-card {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
@@ -526,6 +163,7 @@ const showPdfReader = ref(false)
|
||||
}
|
||||
|
||||
.book-block {
|
||||
position: relative;
|
||||
padding: 1.25rem;
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
@@ -567,123 +205,4 @@ const showPdfReader = ref(false)
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user