forked from EHV/librodrome
efed0b9033
- evenement.yml : kicker, titre, subtitle, leitmotiv, tagline, gestation, description, 3 axes (numérique/économique/politique), 6 espaces, 4 config - evenement.vue : hero complet (shadoks, logo SVG inline, badges), sections axes/espaces/config, styles scoped responsive - bookplayer.config.yml → slugs 06-produire/07-echanger déjà commités - Ajout Librodrome-Logo.png + librodrome-logo.svg (vectorisation en cours) - Ajout PDF genèse en public/pdf/ - .gitignore, CLAUDE.md, BookSection, économique : ajustements session Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
834 lines
37 KiB
Vue
834 lines
37 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">
|
|
<!-- Logo SVG vectoriel — inline pour currentColor -->
|
|
<div class="evt-logo-wrap mx-auto mb-6" aria-hidden="true">
|
|
<svg viewBox="0 0 64 80" fill="none" class="evt-logo">
|
|
<path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
|
|
stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" opacity="0.12"/>
|
|
<path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
|
|
stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"/>
|
|
<path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
|
|
stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.92"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<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 v-if="evtContent?.subtitle" class="mt-2 text-base italic" style="color: hsl(var(--color-text-muted))">
|
|
{{ evtContent.subtitle }}
|
|
</p>
|
|
<p class="mt-4 text-lg leading-relaxed max-w-xl mx-auto" style="color: hsl(var(--color-text-muted))">
|
|
{{ content?.description }}
|
|
</p>
|
|
|
|
<!-- Leitmotiv -->
|
|
<div v-if="evtContent?.leitmotiv" class="mt-8 flex flex-col items-center gap-3">
|
|
<p class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
|
|
« {{ evtContent.leitmotiv }} »
|
|
</p>
|
|
<p v-if="evtContent?.tagline" class="font-mono text-sm tracking-widest uppercase" style="color: hsl(var(--color-primary))">
|
|
{{ evtContent.tagline }}
|
|
</p>
|
|
<span v-if="evtContent?.gestation" class="evt-gestation-badge">
|
|
<div class="i-lucide-flask-conical h-3.5 w-3.5" />
|
|
En gestation
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ Contenu événement ══ -->
|
|
<section v-if="evtContent?.axes || evtContent?.espaces || evtContent?.config" class="evt-content section-padding">
|
|
<div class="container-content flex flex-col gap-14">
|
|
|
|
<!-- 3 axes -->
|
|
<div v-if="evtContent?.axes">
|
|
<h2 class="evt-section-title">Trois axes d'émancipation</h2>
|
|
<p class="evt-section-sub">« je subis — ou je m'affranchis »</p>
|
|
<div class="axes-grid">
|
|
<div v-for="(axe, i) in evtContent.axes" :key="i" class="axe-card">
|
|
<div class="axe-icon">
|
|
<div :class="`i-lucide-${axe.icon} h-5 w-5`" />
|
|
</div>
|
|
<h3 class="font-display text-lg font-bold mb-3" style="color: hsl(var(--color-text))">
|
|
{{ axe.label }}
|
|
</h3>
|
|
<ul class="axe-list">
|
|
<li v-for="(item, j) in axe.items" :key="j">
|
|
<div class="i-lucide-arrow-right h-3.5 w-3.5 shrink-0 mt-0.5" style="color: hsl(var(--color-primary))" />
|
|
<span>{{ item }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Espaces permanents -->
|
|
<div v-if="evtContent?.espaces">
|
|
<h2 class="evt-section-title">Espaces & programme</h2>
|
|
<p class="evt-section-sub">Chorégraphie séquencée de plénières, ateliers et espaces permanents</p>
|
|
<div class="espaces-grid">
|
|
<div v-for="(esp, i) in evtContent.espaces" :key="i" class="espace-card">
|
|
<div class="espace-icon">
|
|
<div :class="`i-lucide-${esp.icon} h-4 w-4`" />
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ esp.label }}</p>
|
|
<p class="text-xs mt-0.5 leading-relaxed" style="color: hsl(var(--color-text-muted))">{{ esp.desc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Config -->
|
|
<div v-if="evtContent?.config">
|
|
<h2 class="evt-section-title">Format & lieu</h2>
|
|
<div class="config-grid">
|
|
<div v-for="(cfg, i) in evtContent.config" :key="i" class="config-card">
|
|
<div class="config-icon">
|
|
<div :class="`i-lucide-${cfg.icon} h-4 w-4`" />
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ cfg.label }}</p>
|
|
<p class="text-xs mt-0.5" style="color: hsl(var(--color-text-muted))">{{ cfg.detail }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
const { data: content } = await usePageContent('evenement')
|
|
const evtContent = computed(() => content.value as Record<string, any> | null)
|
|
|
|
useHead({
|
|
title: evtContent.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;
|
|
}
|
|
}
|
|
|
|
/* ── Logo SVG ── */
|
|
.evt-logo-wrap {
|
|
width: 4.5rem;
|
|
height: 4.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: hsl(var(--color-primary));
|
|
filter: drop-shadow(0 0 14px hsl(var(--color-primary) / 0.25));
|
|
}
|
|
|
|
.evt-logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ── Badge gestation hero ── */
|
|
.evt-gestation-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
background: hsl(var(--color-accent) / 0.12);
|
|
border: 1px solid hsl(var(--color-accent) / 0.25);
|
|
color: hsl(var(--color-accent));
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ── Section contenus événement ── */
|
|
.evt-content {
|
|
background: hsl(var(--color-bg));
|
|
}
|
|
|
|
.evt-section-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
|
font-weight: 800;
|
|
color: hsl(var(--color-text));
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.evt-section-sub {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: hsl(var(--color-primary));
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* ── Axes ── */
|
|
.axes-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.axes-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
.axe-card {
|
|
padding: 1.5rem;
|
|
border-radius: 16px;
|
|
background: hsl(var(--color-surface));
|
|
border: 1px solid hsl(var(--color-text) / 0.07);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.axe-card:hover {
|
|
border-color: hsl(var(--color-primary) / 0.25);
|
|
box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
|
|
}
|
|
|
|
.axe-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.625rem;
|
|
background: hsl(var(--color-primary) / 0.1);
|
|
color: hsl(var(--color-primary));
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.axe-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.axe-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
font-size: 0.82rem;
|
|
line-height: 1.5;
|
|
color: hsl(var(--color-text-muted));
|
|
}
|
|
|
|
/* ── Espaces ── */
|
|
.espaces-grid {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.espaces-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.espaces-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
.espace-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.875rem;
|
|
padding: 1rem 1.25rem;
|
|
border-radius: 12px;
|
|
background: hsl(var(--color-surface));
|
|
border: 1px solid hsl(var(--color-text) / 0.06);
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.espace-card:hover {
|
|
border-color: hsl(var(--color-accent) / 0.25);
|
|
}
|
|
|
|
.espace-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.5rem;
|
|
background: hsl(var(--color-accent) / 0.1);
|
|
color: hsl(var(--color-accent));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Config ── */
|
|
.config-grid {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.config-grid { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
|
|
.config-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: 12px;
|
|
background: hsl(var(--color-surface));
|
|
border: 1px solid hsl(var(--color-text) / 0.06);
|
|
}
|
|
|
|
.config-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
border-radius: 0.5rem;
|
|
background: hsl(var(--color-primary) / 0.1);
|
|
color: hsl(var(--color-primary));
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|