7691cc4139
- 06-economie → 06-produire (titre "Produire"), 07-echange → 07-echanger - Frontmatter : champ page: ajouté sur les 11 chapitres (p.9 à p.199) - content.config.ts : page: z.number().optional() dans le schéma - modele-eco/index.vue : numéro de page affiché sur chaque carte, hero réduit - 11 chapitres condensés à ~moitié : voix de l'auteur conservée, répétitions et transitions secondaires supprimées, concepts clés préservés Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
584 lines
32 KiB
Vue
584 lines
32 KiB
Vue
<template>
|
|
<div class="relative overflow-hidden section-padding">
|
|
<!-- Shadok illustrations -->
|
|
|
|
<!-- 1. Typographe — placing movable type in composing stick, profile view -->
|
|
<svg class="shadok shadok-typographe" viewBox="0 0 170 210" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- body (small oval, profile facing right) -->
|
|
<ellipse cx="70" cy="72" rx="22" ry="28" fill="currentColor" opacity="0.28"/>
|
|
<!-- head -->
|
|
<circle cx="78" cy="36" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- beak (pointy, profile right) -->
|
|
<polygon points="94,34 110,38 94,42" fill="currentColor" opacity="0.35"/>
|
|
<!-- eyes (profile — one visible) -->
|
|
<circle cx="84" cy="33" r="2.5" fill="currentColor" opacity="0.6"/>
|
|
<!-- apron -->
|
|
<path d="M52 60 L88 60 L85 100 L55 100 Z" fill="currentColor" opacity="0.15"/>
|
|
<line x1="70" y1="60" x2="70" y2="100" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
|
<!-- arm reaching to composing stick -->
|
|
<line x1="88" y1="65" x2="120" y2="55" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- other arm holding type block -->
|
|
<line x1="52" y1="68" x2="35" y2="58" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- composing stick (big, detailed) -->
|
|
<rect x="110" y="40" width="50" height="14" rx="2" fill="currentColor" opacity="0.2"/>
|
|
<rect x="110" y="42" width="50" height="10" rx="1" stroke="currentColor" stroke-width="1" fill="none" opacity="0.25"/>
|
|
<!-- type blocks in stick -->
|
|
<rect x="114" y="44" width="6" height="7" rx="0.5" fill="currentColor" opacity="0.3"/>
|
|
<rect x="122" y="44" width="5" height="7" rx="0.5" fill="currentColor" opacity="0.25"/>
|
|
<rect x="129" y="44" width="7" height="7" rx="0.5" fill="currentColor" opacity="0.3"/>
|
|
<rect x="138" y="44" width="5" height="7" rx="0.5" fill="currentColor" opacity="0.22"/>
|
|
<rect x="145" y="44" width="6" height="7" rx="0.5" fill="currentColor" opacity="0.28"/>
|
|
<!-- tiny letter on held block -->
|
|
<rect x="30" y="52" width="8" height="10" rx="1" fill="currentColor" opacity="0.25"/>
|
|
<text x="32" y="60" font-size="6" fill="currentColor" opacity="0.5" font-family="serif">A</text>
|
|
<!-- long legs -->
|
|
<line x1="62" y1="98" x2="50" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="78" y1="98" x2="90" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- big flat feet -->
|
|
<ellipse cx="45" cy="168" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="95" cy="168" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
</svg>
|
|
|
|
<!-- 2. Lectrice — sitting in armchair, legs crossed, book on lap, reading glasses -->
|
|
<svg class="shadok shadok-lectrice" viewBox="0 0 180 210" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- armchair back -->
|
|
<path d="M30 55 Q25 50 28 30 L85 28 Q88 50 83 55" fill="currentColor" opacity="0.12"/>
|
|
<!-- armchair seat -->
|
|
<path d="M25 55 L88 55 L92 90 L20 90 Z" fill="currentColor" opacity="0.15"/>
|
|
<!-- armchair arms -->
|
|
<rect x="15" y="45" width="12" height="45" rx="5" fill="currentColor" opacity="0.15"/>
|
|
<rect x="85" y="45" width="12" height="45" rx="5" fill="currentColor" opacity="0.15"/>
|
|
<!-- body (seated, small) -->
|
|
<ellipse cx="58" cy="68" rx="20" ry="25" fill="currentColor" opacity="0.28"/>
|
|
<!-- head -->
|
|
<circle cx="58" cy="32" r="15" fill="currentColor" opacity="0.3"/>
|
|
<!-- beak (small, facing right-down toward book) -->
|
|
<polygon points="70,35 80,40 70,42" fill="currentColor" opacity="0.3"/>
|
|
<!-- reading glasses -->
|
|
<circle cx="52" cy="30" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.4"/>
|
|
<circle cx="65" cy="30" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.4"/>
|
|
<line x1="58" y1="30" x2="59" y2="30" stroke="currentColor" stroke-width="1.5" opacity="0.35"/>
|
|
<!-- eyes behind glasses (looking down) -->
|
|
<circle cx="53" cy="31" r="2" fill="currentColor" opacity="0.55"/>
|
|
<circle cx="64" cy="31" r="2" fill="currentColor" opacity="0.55"/>
|
|
<!-- arms holding open book on lap -->
|
|
<line x1="40" y1="60" x2="35" y2="82" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="76" y1="60" x2="80" y2="82" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- open book on lap -->
|
|
<path d="M32 80 L58 88 L84 80 L84 95 L58 103 L32 95 Z" fill="currentColor" opacity="0.18"/>
|
|
<line x1="58" y1="88" x2="58" y2="103" stroke="currentColor" stroke-width="1" opacity="0.25"/>
|
|
<!-- text lines on pages -->
|
|
<line x1="37" y1="86" x2="54" y2="91" stroke="currentColor" stroke-width="0.7" opacity="0.2"/>
|
|
<line x1="37" y1="89" x2="54" y2="94" stroke="currentColor" stroke-width="0.7" opacity="0.2"/>
|
|
<line x1="62" y1="91" x2="79" y2="86" stroke="currentColor" stroke-width="0.7" opacity="0.2"/>
|
|
<line x1="62" y1="94" x2="79" y2="89" stroke="currentColor" stroke-width="0.7" opacity="0.2"/>
|
|
<!-- crossed legs (long!) -->
|
|
<line x1="48" y1="90" x2="30" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="68" y1="90" x2="55" y2="150" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- the crossed leg goes over -->
|
|
<line x1="55" y1="150" x2="75" y2="140" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.22"/>
|
|
<!-- big flat feet -->
|
|
<ellipse cx="25" cy="168" rx="11" ry="4" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="79" cy="142" rx="9" ry="3.5" fill="currentColor" opacity="0.22"/>
|
|
<!-- cup of tea nearby -->
|
|
<rect x="130" y="78" width="14" height="16" rx="3" fill="currentColor" opacity="0.2"/>
|
|
<ellipse cx="137" cy="78" rx="7" ry="2.5" fill="currentColor" opacity="0.25"/>
|
|
<!-- tea handle -->
|
|
<path d="M144 83 Q152 86 144 92" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
|
|
<!-- steam -->
|
|
<path d="M134 73 Q132 68 135 64" stroke="currentColor" stroke-width="0.8" fill="none" opacity="0.15"/>
|
|
<path d="M139 74 Q141 69 138 65" stroke="currentColor" stroke-width="0.8" fill="none" opacity="0.15"/>
|
|
</svg>
|
|
|
|
<!-- 3. Calligraphe — standing at tilted drafting table, large quill, ink flourishes -->
|
|
<svg class="shadok shadok-calligraphe" viewBox="0 0 180 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- drafting table (tilted, big) -->
|
|
<rect x="75" y="50" width="65" height="85" rx="3" fill="currentColor" opacity="0.12" transform="rotate(-15 108 92)"/>
|
|
<!-- table legs -->
|
|
<line x1="85" y1="130" x2="78" y2="195" stroke="currentColor" stroke-width="2.5" opacity="0.18"/>
|
|
<line x1="140" y1="115" x2="150" y2="195" stroke="currentColor" stroke-width="2.5" opacity="0.18"/>
|
|
<!-- paper on table -->
|
|
<rect x="85" y="58" width="48" height="65" rx="1" fill="currentColor" opacity="0.08" transform="rotate(-15 109 90)"/>
|
|
<!-- ink flourishes on paper -->
|
|
<path d="M95 80 Q105 70 115 82 Q120 90 110 95" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.25" transform="rotate(-15 105 85)"/>
|
|
<path d="M100 95 Q108 88 118 98" stroke="currentColor" stroke-width="0.8" fill="none" opacity="0.2" transform="rotate(-15 109 93)"/>
|
|
<!-- body (3/4 view, facing table) -->
|
|
<ellipse cx="55" cy="95" rx="21" ry="27" fill="currentColor" opacity="0.28"/>
|
|
<!-- head (turned toward table) -->
|
|
<circle cx="62" cy="58" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- beak pointing at paper -->
|
|
<polygon points="75,55 90,52 78,60" fill="currentColor" opacity="0.32"/>
|
|
<!-- eyes (looking at paper, slightly different directions) -->
|
|
<circle cx="66" cy="55" r="2.5" fill="currentColor" opacity="0.6"/>
|
|
<circle cx="58" cy="54" r="2" fill="currentColor" opacity="0.5"/>
|
|
<!-- arm holding large quill -->
|
|
<line x1="72" y1="85" x2="105" y2="65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- large quill -->
|
|
<line x1="105" y1="65" x2="100" y2="80" stroke="currentColor" stroke-width="1.5" opacity="0.35"/>
|
|
<path d="M105 65 L115 30 Q108 45 100 40 Q105 55 105 65" fill="currentColor" opacity="0.2"/>
|
|
<!-- other arm resting on table edge -->
|
|
<line x1="40" y1="88" x2="80" y2="85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- ink trailing from quill tip -->
|
|
<path d="M100 80 Q95 90 98 100 Q102 108 96 115" stroke="currentColor" stroke-width="0.8" fill="none" opacity="0.2"/>
|
|
<!-- long legs -->
|
|
<line x1="45" y1="120" x2="35" y2="190" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="65" y1="120" x2="72" y2="190" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- big flat feet -->
|
|
<ellipse cx="30" cy="193" rx="11" ry="4" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="77" cy="193" rx="11" ry="4" fill="currentColor" opacity="0.25"/>
|
|
</svg>
|
|
|
|
<!-- 4. Relieur — sewing book spine with needle and thread, stack of signatures -->
|
|
<svg class="shadok shadok-relieur" viewBox="0 0 170 210" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- body (leaning forward over work) -->
|
|
<ellipse cx="85" cy="80" rx="22" ry="26" fill="currentColor" opacity="0.28" transform="rotate(10 85 80)"/>
|
|
<!-- head (tilted down, focused) -->
|
|
<circle cx="95" cy="46" r="15" fill="currentColor" opacity="0.3"/>
|
|
<!-- beak (pointing down at work) -->
|
|
<polygon points="105,52 115,62 103,58" fill="currentColor" opacity="0.32"/>
|
|
<!-- eyes (both looking down at different angles) -->
|
|
<circle cx="92" cy="44" r="2" fill="currentColor" opacity="0.55"/>
|
|
<circle cx="100" cy="46" r="2.5" fill="currentColor" opacity="0.6"/>
|
|
<!-- arm holding needle high -->
|
|
<line x1="100" y1="70" x2="130" y2="40" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- needle -->
|
|
<line x1="130" y1="40" x2="135" y2="32" stroke="currentColor" stroke-width="2" opacity="0.45"/>
|
|
<!-- thread from needle down to book -->
|
|
<path d="M132 38 Q140 55 125 75 Q115 90 120 100" stroke="currentColor" stroke-width="1" fill="none" stroke-dasharray="4 3" opacity="0.3"/>
|
|
<!-- other arm holding book spine -->
|
|
<line x1="68" y1="75" x2="50" y2="95" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- book being bound (open spine view, big) -->
|
|
<path d="M40 90 L60 85 L60 125 L40 130 Z" fill="currentColor" opacity="0.18"/>
|
|
<path d="M60 85 L80 90 L80 130 L60 125 Z" fill="currentColor" opacity="0.14"/>
|
|
<!-- stitching holes along spine -->
|
|
<circle cx="60" cy="92" r="1.2" fill="currentColor" opacity="0.35"/>
|
|
<circle cx="60" cy="100" r="1.2" fill="currentColor" opacity="0.35"/>
|
|
<circle cx="60" cy="108" r="1.2" fill="currentColor" opacity="0.35"/>
|
|
<circle cx="60" cy="116" r="1.2" fill="currentColor" opacity="0.35"/>
|
|
<!-- stack of folded signatures nearby -->
|
|
<rect x="10" y="125" width="30" height="5" rx="1" fill="currentColor" opacity="0.18"/>
|
|
<rect x="12" y="119" width="28" height="5" rx="1" fill="currentColor" opacity="0.15"/>
|
|
<rect x="11" y="113" width="29" height="5" rx="1" fill="currentColor" opacity="0.2"/>
|
|
<rect x="13" y="107" width="27" height="5" rx="1" fill="currentColor" opacity="0.16"/>
|
|
<!-- long legs -->
|
|
<line x1="75" y1="104" x2="65" y2="172" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="95" y1="104" x2="105" y2="172" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- big flat feet -->
|
|
<ellipse cx="60" cy="175" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="110" cy="175" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
</svg>
|
|
|
|
<!-- 5. Conteuse — on small stage, arms dramatically wide, 3 tiny shadoks below -->
|
|
<svg class="shadok shadok-conteuse" viewBox="0 0 180 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- small stage/box -->
|
|
<rect x="55" y="110" width="60" height="20" rx="3" fill="currentColor" opacity="0.18"/>
|
|
<rect x="58" y="108" width="54" height="4" rx="1.5" fill="currentColor" opacity="0.22"/>
|
|
<!-- body (on stage, upright, dramatic) -->
|
|
<ellipse cx="85" cy="85" rx="20" ry="26" fill="currentColor" opacity="0.28"/>
|
|
<!-- head (thrown back slightly) -->
|
|
<circle cx="85" cy="50" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- beak (open, telling story) -->
|
|
<polygon points="98,46 112,42 100,52" fill="currentColor" opacity="0.3"/>
|
|
<polygon points="100,52 112,55 98,54" fill="currentColor" opacity="0.22"/>
|
|
<!-- wide expressive eyes -->
|
|
<circle cx="82" cy="46" r="3" fill="currentColor" opacity="0.6"/>
|
|
<circle cx="92" cy="45" r="2.5" fill="currentColor" opacity="0.55"/>
|
|
<!-- arms dramatically wide -->
|
|
<line x1="65" y1="75" x2="15" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<line x1="105" y1="75" x2="160" y2="50" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- gesture sparkles -->
|
|
<circle cx="10" cy="45" r="2" fill="currentColor" opacity="0.15"/>
|
|
<circle cx="165" cy="45" r="2" fill="currentColor" opacity="0.15"/>
|
|
<circle cx="18" cy="38" r="1.5" fill="currentColor" opacity="0.12"/>
|
|
<circle cx="157" cy="38" r="1.5" fill="currentColor" opacity="0.12"/>
|
|
<!-- long legs (standing on stage) -->
|
|
<line x1="77" y1="108" x2="70" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="93" y1="108" x2="100" y2="110" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- big flat feet on stage -->
|
|
<ellipse cx="67" cy="112" rx="8" ry="3" fill="currentColor" opacity="0.2"/>
|
|
<ellipse cx="103" cy="112" rx="8" ry="3" fill="currentColor" opacity="0.2"/>
|
|
<!-- audience: 3 tiny shadoks below stage -->
|
|
<!-- tiny shadok 1 (left) -->
|
|
<ellipse cx="40" cy="165" rx="8" ry="10" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="40" cy="152" r="6" fill="currentColor" opacity="0.22"/>
|
|
<circle cx="39" cy="151" r="1" fill="currentColor" opacity="0.45"/>
|
|
<circle cx="42" cy="151" r="1" fill="currentColor" opacity="0.45"/>
|
|
<polygon points="45,151 50,153 45,155" fill="currentColor" opacity="0.2"/>
|
|
<line x1="37" y1="175" x2="35" y2="195" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
<line x1="43" y1="175" x2="45" y2="195" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
<!-- tiny shadok 2 (center) -->
|
|
<ellipse cx="85" cy="168" rx="8" ry="10" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="85" cy="155" r="6" fill="currentColor" opacity="0.22"/>
|
|
<circle cx="83" cy="154" r="1" fill="currentColor" opacity="0.45"/>
|
|
<circle cx="87" cy="154" r="1" fill="currentColor" opacity="0.45"/>
|
|
<polygon points="90,154 95,156 90,158" fill="currentColor" opacity="0.2"/>
|
|
<line x1="82" y1="178" x2="80" y2="198" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
<line x1="88" y1="178" x2="90" y2="198" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
<!-- tiny shadok 3 (right) -->
|
|
<ellipse cx="130" cy="163" rx="8" ry="10" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="130" cy="150" r="6" fill="currentColor" opacity="0.22"/>
|
|
<circle cx="128" cy="149" r="1" fill="currentColor" opacity="0.45"/>
|
|
<circle cx="132" cy="149" r="1" fill="currentColor" opacity="0.45"/>
|
|
<polygon points="135,149 140,151 135,153" fill="currentColor" opacity="0.2"/>
|
|
<line x1="127" y1="173" x2="125" y2="193" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
<line x1="133" y1="173" x2="135" y2="193" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
|
|
</svg>
|
|
|
|
<!-- 6. Correcteur — leaning forward, magnifying glass over manuscript, red pen -->
|
|
<svg class="shadok shadok-correcteur" viewBox="0 0 170 210" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- body (leaning forward heavily) -->
|
|
<ellipse cx="75" cy="82" rx="21" ry="28" fill="currentColor" opacity="0.28" transform="rotate(20 75 82)"/>
|
|
<!-- head (craned forward) -->
|
|
<circle cx="95" cy="48" r="15" fill="currentColor" opacity="0.3"/>
|
|
<!-- beak (pursed, critical) -->
|
|
<polygon points="108,45 118,48 108,52" fill="currentColor" opacity="0.3"/>
|
|
<!-- eyes (squinting, one bigger — peering through glass) -->
|
|
<circle cx="92" cy="45" r="1.8" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="101" cy="46" r="3" fill="currentColor" opacity="0.6"/>
|
|
<!-- arm holding magnifying glass -->
|
|
<line x1="90" y1="72" x2="120" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- magnifying glass (big) -->
|
|
<circle cx="128" cy="98" r="18" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.3"/>
|
|
<circle cx="128" cy="98" r="16" fill="currentColor" opacity="0.06"/>
|
|
<!-- handle -->
|
|
<line x1="140" y1="112" x2="155" y2="135" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- manuscript under magnifying glass -->
|
|
<rect x="95" y="115" width="55" height="70" rx="2" fill="currentColor" opacity="0.1"/>
|
|
<!-- text lines on manuscript -->
|
|
<line x1="100" y1="125" x2="140" y2="125" stroke="currentColor" stroke-width="0.8" opacity="0.18"/>
|
|
<line x1="100" y1="132" x2="145" y2="132" stroke="currentColor" stroke-width="0.8" opacity="0.18"/>
|
|
<line x1="100" y1="139" x2="138" y2="139" stroke="currentColor" stroke-width="0.8" opacity="0.18"/>
|
|
<line x1="100" y1="146" x2="142" y2="146" stroke="currentColor" stroke-width="0.8" opacity="0.18"/>
|
|
<line x1="100" y1="153" x2="135" y2="153" stroke="currentColor" stroke-width="0.8" opacity="0.18"/>
|
|
<!-- crossed-out text (red corrections) -->
|
|
<line x1="100" y1="132" x2="130" y2="132" stroke="currentColor" stroke-width="1.5" opacity="0.35"/>
|
|
<line x1="105" y1="146" x2="125" y2="146" stroke="currentColor" stroke-width="1.5" opacity="0.35"/>
|
|
<!-- other arm holding red pen -->
|
|
<line x1="58" y1="78" x2="35" y2="100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- red pen -->
|
|
<line x1="35" y1="100" x2="25" y2="115" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.35"/>
|
|
<circle cx="24" cy="117" r="1.5" fill="currentColor" opacity="0.4"/>
|
|
<!-- long legs -->
|
|
<line x1="65" y1="108" x2="50" y2="178" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="82" y1="105" x2="95" y2="178" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- big flat feet -->
|
|
<ellipse cx="45" cy="181" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="100" cy="181" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
</svg>
|
|
|
|
<!-- 7. Colporteur — walking profile, books in wooden crate on back, walking stick, hat -->
|
|
<svg class="shadok shadok-colporteur" viewBox="0 0 160 210" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- body (profile, walking right, leaning forward under weight) -->
|
|
<ellipse cx="70" cy="72" rx="20" ry="25" fill="currentColor" opacity="0.28" transform="rotate(15 70 72)"/>
|
|
<!-- head -->
|
|
<circle cx="82" cy="38" r="14" fill="currentColor" opacity="0.3"/>
|
|
<!-- hat (brimmed) -->
|
|
<ellipse cx="82" cy="26" rx="18" ry="5" fill="currentColor" opacity="0.25"/>
|
|
<rect x="72" y="16" width="20" height="12" rx="3" fill="currentColor" opacity="0.2"/>
|
|
<!-- beak (profile right) -->
|
|
<polygon points="94,36 106,40 94,43" fill="currentColor" opacity="0.32"/>
|
|
<!-- eye (profile — one visible, determined) -->
|
|
<circle cx="88" cy="35" r="2.5" fill="currentColor" opacity="0.6"/>
|
|
<!-- wooden crate on back (big, loaded with books) -->
|
|
<rect x="25" y="35" width="40" height="50" rx="3" stroke="currentColor" stroke-width="2" fill="currentColor" opacity="0.12"/>
|
|
<!-- strap over shoulder -->
|
|
<line x1="45" y1="35" x2="78" y2="55" stroke="currentColor" stroke-width="2" opacity="0.25"/>
|
|
<line x1="65" y1="35" x2="85" y2="60" stroke="currentColor" stroke-width="2" opacity="0.25"/>
|
|
<!-- books in crate (visible spines) -->
|
|
<rect x="28" y="38" width="6" height="44" rx="1" fill="currentColor" opacity="0.22"/>
|
|
<rect x="36" y="40" width="5" height="42" rx="1" fill="currentColor" opacity="0.18"/>
|
|
<rect x="43" y="37" width="7" height="45" rx="1" fill="currentColor" opacity="0.2"/>
|
|
<rect x="52" y="39" width="5" height="43" rx="1" fill="currentColor" opacity="0.16"/>
|
|
<rect x="58" y="38" width="4" height="44" rx="1" fill="currentColor" opacity="0.2"/>
|
|
<!-- arm forward with walking stick -->
|
|
<line x1="88" y1="65" x2="115" y2="80" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- walking stick (long) -->
|
|
<line x1="115" y1="80" x2="125" y2="195" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- other arm back holding strap -->
|
|
<line x1="55" y1="68" x2="45" y2="55" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- long legs (walking stride) — front leg forward, back leg behind -->
|
|
<line x1="78" y1="95" x2="100" y2="170" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="62" y1="95" x2="40" y2="170" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- big flat feet (walking) -->
|
|
<ellipse cx="105" cy="173" rx="11" ry="4" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="35" cy="173" rx="10" ry="4" fill="currentColor" opacity="0.22"/>
|
|
</svg>
|
|
|
|
<!-- 8. Illustratrice — at easel, brush in one hand, palette in other, canvas showing a shadok -->
|
|
<svg class="shadok shadok-illustratrice" viewBox="0 0 180 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- easel legs -->
|
|
<line x1="105" y1="30" x2="85" y2="210" stroke="currentColor" stroke-width="2" opacity="0.2"/>
|
|
<line x1="145" y1="30" x2="165" y2="210" stroke="currentColor" stroke-width="2" opacity="0.2"/>
|
|
<line x1="125" y1="60" x2="125" y2="210" stroke="currentColor" stroke-width="2" opacity="0.18"/>
|
|
<!-- canvas on easel -->
|
|
<rect x="95" y="25" width="60" height="75" rx="2" fill="currentColor" opacity="0.08"/>
|
|
<rect x="95" y="25" width="60" height="75" rx="2" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.2"/>
|
|
<!-- tiny shadok drawing on canvas! -->
|
|
<ellipse cx="125" cy="65" rx="8" ry="10" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="125" cy="52" r="6" fill="currentColor" opacity="0.2"/>
|
|
<polygon points="130,51 136,53 130,55" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="123" cy="51" r="1" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="127" cy="51" r="1" fill="currentColor" opacity="0.3"/>
|
|
<line x1="121" y1="75" x2="118" y2="88" stroke="currentColor" stroke-width="1" opacity="0.15"/>
|
|
<line x1="129" y1="75" x2="132" y2="88" stroke="currentColor" stroke-width="1" opacity="0.15"/>
|
|
<!-- body (3/4 view, standing back from easel) -->
|
|
<ellipse cx="55" cy="90" rx="22" ry="28" fill="currentColor" opacity="0.28"/>
|
|
<!-- head (looking at canvas) -->
|
|
<circle cx="62" cy="52" r="16" fill="currentColor" opacity="0.3"/>
|
|
<!-- beak (profile right, toward canvas) -->
|
|
<polygon points="75,50 88,54 76,56" fill="currentColor" opacity="0.3"/>
|
|
<!-- eyes (artistic scrutiny, different sizes) -->
|
|
<circle cx="60" cy="49" r="2" fill="currentColor" opacity="0.55"/>
|
|
<circle cx="69" cy="50" r="2.8" fill="currentColor" opacity="0.6"/>
|
|
<!-- arm holding brush toward canvas -->
|
|
<line x1="73" y1="82" x2="100" y2="60" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
|
|
<!-- paintbrush -->
|
|
<line x1="100" y1="60" x2="108" y2="52" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
|
|
<circle cx="110" cy="50" r="2" fill="currentColor" opacity="0.3"/>
|
|
<!-- other arm holding palette -->
|
|
<line x1="38" y1="85" x2="18" y2="95" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- palette (big, with color dots) -->
|
|
<ellipse cx="12" cy="102" rx="16" ry="12" fill="currentColor" opacity="0.15"/>
|
|
<!-- thumb hole -->
|
|
<circle cx="12" cy="108" r="3" fill="currentColor" opacity="0.05"/>
|
|
<!-- paint dabs on palette -->
|
|
<circle cx="6" cy="97" r="2.5" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="14" cy="94" r="2" fill="currentColor" opacity="0.25"/>
|
|
<circle cx="21" cy="98" r="2.5" fill="currentColor" opacity="0.28"/>
|
|
<circle cx="8" cy="104" r="2" fill="currentColor" opacity="0.22"/>
|
|
<circle cx="18" cy="103" r="2" fill="currentColor" opacity="0.3"/>
|
|
<!-- long legs -->
|
|
<line x1="45" y1="116" x2="35" y2="188" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="65" y1="116" x2="75" y2="188" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25"/>
|
|
<!-- big flat feet -->
|
|
<ellipse cx="30" cy="191" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="80" cy="191" rx="10" ry="4" fill="currentColor" opacity="0.25"/>
|
|
</svg>
|
|
|
|
<div class="container-content">
|
|
<!-- Page de couverture du livre -->
|
|
<HomeBookSection
|
|
class="mb-10 hero-compact"
|
|
:show-chapters="false"
|
|
@open-player="showBookPlayer = true"
|
|
@open-pdf="showPdfReader = true"
|
|
/>
|
|
|
|
<header class="mb-10 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-3 mx-auto max-w-2xl text-sm" style="color: hsl(var(--color-text-muted))">
|
|
{{ content?.description }}
|
|
</p>
|
|
</header>
|
|
|
|
<div class="mx-auto max-w-3xl">
|
|
<ul class="flex flex-col gap-3">
|
|
<li
|
|
v-for="chapter in chapters"
|
|
:key="chapter.path"
|
|
>
|
|
<NuxtLink
|
|
:to="`/economique/modele-eco/${chapter.stem?.split('/').pop()}`"
|
|
class="card-surface flex items-start gap-4 group"
|
|
>
|
|
<span class="font-mono text-2xl font-bold text-primary/30 leading-none mt-1 w-10 text-right flex-shrink-0">
|
|
{{ String(chapter.order).padStart(2, '0') }}
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-baseline gap-2 flex-wrap">
|
|
<h2 class="font-display text-lg font-semibold text-white group-hover:text-primary transition-colors">
|
|
{{ chapter.title }}
|
|
</h2>
|
|
<span v-if="chapter.page" class="text-xs font-mono text-white/30 flex-shrink-0">p. {{ chapter.page }}</span>
|
|
</div>
|
|
<p v-if="chapter.description" class="mt-1 text-sm text-white/50">
|
|
{{ chapter.description }}
|
|
</p>
|
|
<div class="mt-2 flex items-center gap-3">
|
|
<span v-if="chapter.readingTime" class="text-xs text-white/30">
|
|
<span class="i-lucide-clock inline-block h-3 w-3 mr-1 align-middle" />
|
|
{{ chapter.readingTime }}
|
|
</span>
|
|
<SongBadges :chapter-slug="chapter.stem?.split('/').pop() ?? ''" />
|
|
</div>
|
|
</div>
|
|
<div class="i-lucide-chevron-right h-5 w-5 text-white/20 group-hover:text-primary/60 transition-colors flex-shrink-0 mt-2" />
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</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/modele-eco')
|
|
|
|
useHead({
|
|
title: content.value?.meta?.title ?? 'Table des matières',
|
|
})
|
|
|
|
const { data: chapters } = await useAsyncData('book-toc', () =>
|
|
queryCollection('book').order('order', 'ASC').all(),
|
|
)
|
|
|
|
const showBookPlayer = ref(false)
|
|
const showPdfReader = ref(false)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
font-size: clamp(1.5rem, 3.5vw, 2rem);
|
|
}
|
|
|
|
/* Compact the HomeBookSection hero */
|
|
:deep(.hero-compact .book-hero),
|
|
:deep(.hero-compact .section-hero) {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
:deep(.hero-compact img),
|
|
:deep(.hero-compact .book-cover) {
|
|
max-height: 260px;
|
|
}
|
|
:deep(.hero-compact h1),
|
|
:deep(.hero-compact .hero-title) {
|
|
font-size: clamp(1.4rem, 3vw, 2rem);
|
|
}
|
|
:deep(.hero-compact .hero-description) {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Shadok illustrations — shared */
|
|
.shadok {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: clamp(70px, 10vw, 140px);
|
|
z-index: 0;
|
|
}
|
|
|
|
/* 1. Typographe — top left */
|
|
.shadok-typographe {
|
|
top: 1%;
|
|
left: 1%;
|
|
opacity: 0.24;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-float-1 9s ease-in-out infinite;
|
|
}
|
|
|
|
/* 2. Lectrice — top right, sitting */
|
|
.shadok-lectrice {
|
|
top: 2%;
|
|
right: 1%;
|
|
opacity: 0.22;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-float-2 11s ease-in-out infinite;
|
|
}
|
|
|
|
/* 3. Calligraphe — left, 40% */
|
|
.shadok-calligraphe {
|
|
top: 40%;
|
|
left: 1%;
|
|
opacity: 0.2;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-float-3 10s ease-in-out infinite;
|
|
}
|
|
|
|
/* 4. Relieur — right, 35% */
|
|
.shadok-relieur {
|
|
top: 35%;
|
|
right: 2%;
|
|
opacity: 0.24;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-float-4 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* 5. Conteuse — bottom left */
|
|
.shadok-conteuse {
|
|
bottom: 6%;
|
|
left: 1%;
|
|
opacity: 0.22;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-float-5 12s ease-in-out infinite;
|
|
}
|
|
|
|
/* 6. Correcteur — bottom right, leaning */
|
|
.shadok-correcteur {
|
|
bottom: 5%;
|
|
right: 1%;
|
|
opacity: 0.2;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-float-6 9.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* 7. Colporteur — center bottom, walking */
|
|
.shadok-colporteur {
|
|
bottom: 2%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 0.18;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-float-7 7.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* 8. Illustratrice — right, 58% */
|
|
.shadok-illustratrice {
|
|
top: 58%;
|
|
right: 1%;
|
|
opacity: 0.26;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-float-8 10.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Float animations — each unique duration and offset */
|
|
@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(-7px); }
|
|
}
|
|
@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(-8px); }
|
|
}
|
|
|
|
/* Hidden on mobile */
|
|
@media (max-width: 768px) {
|
|
.shadok {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|