<template>
  <div class="relative overflow-hidden section-padding">
    <!-- Shadok 1 : Libraire — behind counter, 3/4 view, glasses, recommending a book -->
    <svg class="shadok-libraire" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Body (small oval) -->
      <ellipse cx="75" cy="95" rx="22" ry="28" fill="currentColor" opacity="0.25"/>
      <!-- Head -->
      <circle cx="75" cy="58" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Eyes looking right (recommending) -->
      <circle cx="80" cy="55" r="2" fill="currentColor" opacity="0.6"/>
      <circle cx="86" cy="54" r="2" fill="currentColor" opacity="0.6"/>
      <!-- Glasses on beak -->
      <circle cx="80" cy="55" r="5" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.4"/>
      <circle cx="86" cy="54" r="5" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.4"/>
      <line x1="85" y1="55" x2="81" y2="54" stroke="currentColor" stroke-width="1" opacity="0.3"/>
      <!-- Beak (pointy, triangular) -->
      <polygon points="90,58 102,55 90,52" fill="currentColor" opacity="0.35"/>
      <!-- Arm holding book out to customer -->
      <line x1="97" y1="88" x2="125" y2="78" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Book in hand (big, detailed) -->
      <rect x="120" y="70" width="18" height="24" rx="2" fill="currentColor" opacity="0.35"/>
      <rect x="122" y="73" width="14" height="3" rx="1" fill="currentColor" opacity="0.2"/>
      <line x1="129" y1="70" x2="129" y2="94" stroke="currentColor" stroke-width="1" opacity="0.2"/>
      <!-- Other arm resting on counter -->
      <line x1="53" y1="90" x2="35" y2="108" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4"/>
      <!-- Counter (big) -->
      <rect x="10" y="120" width="140" height="10" rx="2" fill="currentColor" opacity="0.3"/>
      <rect x="15" y="130" width="130" height="6" rx="1" fill="currentColor" opacity="0.15"/>
      <!-- Stack of books on counter -->
      <rect x="25" y="105" width="22" height="15" rx="2" fill="currentColor" opacity="0.3"/>
      <rect x="28" y="98" width="18" height="7" rx="1" fill="currentColor" opacity="0.25"/>
      <rect x="30" y="93" width="14" height="5" rx="1" fill="currentColor" opacity="0.2"/>
      <!-- Legs (long!) -->
      <line x1="65" y1="123" x2="55" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="85" y1="123" x2="95" y2="185" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Big flat feet -->
      <ellipse cx="50" cy="188" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
      <ellipse cx="100" cy="188" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok 2 : Factrice — running profile, letter carrier bag, letters flying, cap -->
    <svg class="shadok-factrice" viewBox="0 0 180 200" fill="none" aria-hidden="true">
      <!-- Body (small oval, leaning forward) -->
      <ellipse cx="80" cy="80" rx="20" ry="26" fill="currentColor" opacity="0.25" transform="rotate(-15 80 80)"/>
      <!-- Head -->
      <circle cx="95" cy="48" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Cap -->
      <rect x="82" y="34" width="28" height="7" rx="3" fill="currentColor" opacity="0.4"/>
      <rect x="106" y="36" width="10" height="5" rx="2" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (determined, looking forward) -->
      <circle cx="101" cy="46" r="1.8" fill="currentColor" opacity="0.6"/>
      <circle cx="106" cy="45" r="1.8" fill="currentColor" opacity="0.6"/>
      <!-- Beak (pointy, profile) -->
      <polygon points="110,48 125,44 110,42" fill="currentColor" opacity="0.35"/>
      <!-- Carrier bag (big, on shoulder) -->
      <rect x="55" y="62" width="28" height="35" rx="4" fill="currentColor" opacity="0.3"/>
      <line x1="60" y1="62" x2="75" y2="55" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
      <!-- Letters flying out of bag -->
      <rect x="42" y="55" width="12" height="9" rx="1" fill="currentColor" opacity="0.2" transform="rotate(-20 48 59)"/>
      <rect x="35" y="45" width="10" height="7" rx="1" fill="currentColor" opacity="0.15" transform="rotate(-35 40 48)"/>
      <rect x="48" y="42" width="11" height="8" rx="1" fill="currentColor" opacity="0.18" transform="rotate(10 53 46)"/>
      <!-- Arm swinging back -->
      <line x1="65" y1="72" x2="45" y2="90" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Running legs (long strides!) -->
      <line x1="72" y1="106" x2="40" y2="170" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="88" y1="106" x2="130" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Big flat feet -->
      <ellipse cx="35" cy="174" rx="11" ry="4" fill="currentColor" opacity="0.3"/>
      <ellipse cx="135" cy="168" rx="11" ry="4" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok 3 : Cartonnier — assembling cardboard box, tape gun, flat boxes nearby -->
    <svg class="shadok-cartonnier" viewBox="0 0 170 220" fill="none" aria-hidden="true">
      <!-- Body (small, leaning over work) -->
      <ellipse cx="70" cy="100" rx="22" ry="27" fill="currentColor" opacity="0.25" transform="rotate(8 70 100)"/>
      <!-- Head (looking down at box) -->
      <circle cx="78" cy="65" r="15" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (focused, looking down) -->
      <circle cx="83" cy="67" r="1.8" fill="currentColor" opacity="0.6"/>
      <circle cx="88" cy="68" r="1.8" fill="currentColor" opacity="0.6"/>
      <!-- Beak pointing down -->
      <polygon points="88,72 98,78 86,76" fill="currentColor" opacity="0.35"/>
      <!-- Arm holding tape gun -->
      <line x1="90" y1="95" x2="130" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Tape gun (big, detailed) -->
      <circle cx="138" cy="102" r="8" fill="currentColor" opacity="0.25"/>
      <rect x="132" y="99" width="18" height="6" rx="1" fill="currentColor" opacity="0.35"/>
      <polygon points="150,100 158,102 150,104" fill="currentColor" opacity="0.3"/>
      <!-- Other arm holding box flap -->
      <line x1="50" y1="92" x2="35" y2="118" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Box being assembled (big, 3D perspective) -->
      <rect x="25" y="118" width="45" height="35" rx="2" fill="currentColor" opacity="0.2"/>
      <polygon points="25,118 15,108 60,108 70,118" fill="currentColor" opacity="0.15"/>
      <polygon points="70,118 60,108 60,143 70,153" fill="currentColor" opacity="0.12"/>
      <!-- Flap open -->
      <polygon points="25,118 15,108 15,98 25,108" fill="currentColor" opacity="0.18"/>
      <!-- Flat boxes nearby -->
      <rect x="90" y="145" width="35" height="4" rx="1" fill="currentColor" opacity="0.2"/>
      <rect x="88" y="150" width="38" height="4" rx="1" fill="currentColor" opacity="0.15"/>
      <rect x="92" y="155" width="32" height="4" rx="1" fill="currentColor" opacity="0.12"/>
      <!-- Legs (long!) -->
      <line x1="60" y1="127" x2="48" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="80" y1="127" x2="92" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Big flat feet -->
      <ellipse cx="43" cy="196" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
      <ellipse cx="97" cy="196" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok 4 : Cycliste livreur — on bicycle, package on rack, profile leaning forward -->
    <svg class="shadok-cycliste" viewBox="0 0 180 200" fill="none" aria-hidden="true">
      <!-- Back wheel -->
      <circle cx="35" cy="160" r="22" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.25"/>
      <circle cx="35" cy="160" r="3" fill="currentColor" opacity="0.3"/>
      <!-- Front wheel -->
      <circle cx="145" cy="160" r="22" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.25"/>
      <circle cx="145" cy="160" r="3" fill="currentColor" opacity="0.3"/>
      <!-- Frame -->
      <line x1="35" y1="160" x2="80" y2="120" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
      <line x1="80" y1="120" x2="120" y2="120" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
      <line x1="120" y1="120" x2="145" y2="160" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
      <line x1="35" y1="160" x2="80" y2="140" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.2"/>
      <line x1="80" y1="140" x2="120" y2="120" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.2"/>
      <!-- Handlebars -->
      <line x1="120" y1="120" x2="130" y2="105" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
      <line x1="125" y1="105" x2="135" y2="105" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
      <!-- Saddle -->
      <rect x="72" y="116" width="16" height="5" rx="2" fill="currentColor" opacity="0.3"/>
      <!-- Package on rear rack (big!) -->
      <rect x="15" y="125" width="30" height="22" rx="3" fill="currentColor" opacity="0.3"/>
      <line x1="30" y1="125" x2="30" y2="147" stroke="currentColor" stroke-width="1" opacity="0.2"/>
      <line x1="15" y1="136" x2="45" y2="136" stroke="currentColor" stroke-width="1" opacity="0.2"/>
      <!-- Rear rack -->
      <line x1="35" y1="147" x2="35" y2="155" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <line x1="15" y1="147" x2="55" y2="147" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
      <!-- Body (small, leaning forward on bike) -->
      <ellipse cx="90" cy="100" rx="18" ry="24" fill="currentColor" opacity="0.25" transform="rotate(-20 90 100)"/>
      <!-- Head -->
      <circle cx="108" cy="68" r="14" fill="currentColor" opacity="0.3"/>
      <!-- Eyes (focused ahead) -->
      <circle cx="115" cy="65" r="1.8" fill="currentColor" opacity="0.6"/>
      <circle cx="120" cy="64" r="1.8" fill="currentColor" opacity="0.6"/>
      <!-- Beak -->
      <polygon points="122,68 134,64 122,62" fill="currentColor" opacity="0.35"/>
      <!-- Arms to handlebars -->
      <line x1="100" y1="90" x2="130" y2="105" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Legs pedaling -->
      <line x1="82" y1="118" x2="72" y2="145" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="88" y1="120" x2="95" y2="148" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Feet on pedals -->
      <ellipse cx="70" cy="148" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
      <ellipse cx="97" cy="150" rx="8" ry="3" fill="currentColor" opacity="0.3"/>
    </svg>

    <!-- Shadok 5 : Lectrice satisfaite — sitting in armchair, open book, wrapping paper on floor -->
    <svg class="shadok-lectrice" viewBox="0 0 160 210" fill="none" aria-hidden="true">
      <!-- Armchair (big!) -->
      <path d="M20 100 Q20 80 35 80 L115 80 Q130 80 130 100 L130 150 L20 150 Z" fill="currentColor" opacity="0.15"/>
      <!-- Armrests -->
      <rect x="10" y="90" width="16" height="55" rx="6" fill="currentColor" opacity="0.2"/>
      <rect x="124" y="90" width="16" height="55" rx="6" fill="currentColor" opacity="0.2"/>
      <!-- Chair legs -->
      <line x1="25" y1="150" x2="22" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.2"/>
      <line x1="125" y1="150" x2="128" y2="165" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.2"/>
      <!-- Body (sitting, small) -->
      <ellipse cx="75" cy="120" rx="20" ry="25" fill="currentColor" opacity="0.25"/>
      <!-- Head (tilted, reading happily) -->
      <circle cx="75" cy="82" r="16" fill="currentColor" opacity="0.3"/>
      <!-- Happy eyes (curved) -->
      <path d="M66 79 Q69 76 72 79" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"/>
      <path d="M80 78 Q83 75 86 78" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"/>
      <!-- Small smile -->
      <path d="M70 88 Q75 93 80 88" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Beak (small, happy) -->
      <polygon points="88,83 98,80 88,78" fill="currentColor" opacity="0.3"/>
      <!-- Arms holding open book -->
      <line x1="55" y1="112" x2="40" y2="125" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="95" y1="112" x2="110" y2="125" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Open book (big, in lap) -->
      <rect x="38" y="125" width="28" height="20" rx="1" fill="currentColor" opacity="0.3"/>
      <rect x="66" y="125" width="28" height="20" rx="1" fill="currentColor" opacity="0.25"/>
      <line x1="66" y1="125" x2="66" y2="145" stroke="currentColor" stroke-width="1.5" opacity="0.35"/>
      <!-- Text lines on book pages -->
      <line x1="42" y1="131" x2="62" y2="131" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
      <line x1="42" y1="135" x2="60" y2="135" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
      <line x1="70" y1="131" x2="90" y2="131" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
      <line x1="70" y1="135" x2="88" y2="135" stroke="currentColor" stroke-width="0.8" opacity="0.15"/>
      <!-- Legs (long, dangling from chair) -->
      <line x1="62" y1="145" x2="50" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="88" y1="145" x2="100" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Big flat feet -->
      <ellipse cx="45" cy="198" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
      <ellipse cx="105" cy="198" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
      <!-- Wrapping paper on floor -->
      <path d="M30 175 Q45 170 55 178 Q60 182 50 185" stroke="currentColor" stroke-width="1.5" fill="currentColor" opacity="0.12"/>
      <path d="M100 180 Q115 172 125 180 Q120 188 108 185" stroke="currentColor" stroke-width="1.5" fill="currentColor" opacity="0.1"/>
    </svg>

    <!-- Shadok 6 : Empileur — balancing tower of books on head, arms out, worried eyes -->
    <svg class="shadok-empileur" viewBox="0 0 140 220" fill="none" aria-hidden="true">
      <!-- Precarious tower of books on head (big, detailed!) -->
      <rect x="48" y="8" width="24" height="7" rx="1" fill="currentColor" opacity="0.2" transform="rotate(3 60 11)"/>
      <rect x="46" y="16" width="28" height="7" rx="1" fill="currentColor" opacity="0.25" transform="rotate(-2 60 19)"/>
      <rect x="44" y="24" width="32" height="7" rx="1" fill="currentColor" opacity="0.2" transform="rotate(4 60 27)"/>
      <rect x="47" y="32" width="26" height="7" rx="1" fill="currentColor" opacity="0.28" transform="rotate(-3 60 35)"/>
      <rect x="50" y="40" width="22" height="6" rx="1" fill="currentColor" opacity="0.22" transform="rotate(2 61 43)"/>
      <!-- Head -->
      <circle cx="65" cy="58" r="14" fill="currentColor" opacity="0.3"/>
      <!-- Worried eyes (looking up at books) -->
      <circle cx="60" cy="54" r="2.2" fill="currentColor" opacity="0.6"/>
      <circle cx="70" cy="54" r="2.2" fill="currentColor" opacity="0.6"/>
      <!-- Tiny worried pupils (looking up) -->
      <circle cx="60" cy="53" r="1" fill="currentColor" opacity="0.35"/>
      <circle cx="70" cy="53" r="1" fill="currentColor" opacity="0.35"/>
      <!-- Worried eyebrows -->
      <line x1="56" y1="50" x2="63" y2="51" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
      <line x1="74" y1="51" x2="67" y2="50" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
      <!-- Beak (slightly open, worried) -->
      <polygon points="74,60 86,57 74,55" fill="currentColor" opacity="0.3"/>
      <line x1="76" y1="58" x2="83" y2="58" stroke="currentColor" stroke-width="0.8" opacity="0.2"/>
      <!-- Body (small oval, upright, tense) -->
      <ellipse cx="65" cy="95" rx="20" ry="26" fill="currentColor" opacity="0.25"/>
      <!-- Arms out wide for balance -->
      <line x1="45" y1="88" x2="10" y2="82" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="85" y1="88" x2="120" y2="82" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Hands (small circles at arm ends) -->
      <circle cx="8" cy="82" r="3" fill="currentColor" opacity="0.25"/>
      <circle cx="122" cy="82" r="3" fill="currentColor" opacity="0.25"/>
      <!-- Legs (long!) -->
      <line x1="55" y1="121" x2="45" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <line x1="75" y1="121" x2="85" y2="192" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.35"/>
      <!-- Big flat feet -->
      <ellipse cx="40" cy="196" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
      <ellipse cx="90" cy="196" rx="10" ry="4" fill="currentColor" opacity="0.3"/>
    </svg>

    <div class="container-content">
      <div class="mx-auto max-w-2xl">
        <div class="section-icon mx-auto mb-6">
          <div class="i-lucide-shopping-bag h-12 w-12" />
        </div>

        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
          {{ content?.kicker }}
        </p>

        <h1 class="font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
          {{ content?.title }}
        </h1>

        <p class="text-lg leading-relaxed mb-10 text-center" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>

        <!-- Bookelis CTA -->
        <div class="cta-block mb-8">
          <div class="cta-icon">
            <div class="i-lucide-globe h-5 w-5" />
          </div>
          <div class="flex-1">
            <h2 class="font-display text-lg font-semibold mb-1" style="color: hsl(var(--color-text))">
              Commander en ligne
            </h2>
            <p class="text-sm mb-3" style="color: hsl(var(--color-text-muted))">
              Impression à la demande, livraison chez vous.
            </p>
            <a
              :href="content?.bookelis?.url"
              target="_blank"
              rel="noopener"
              class="order-btn"
            >
              <div class="i-lucide-external-link h-4 w-4" />
              {{ content?.bookelis?.label }}
            </a>
          </div>
        </div>

        <!-- Librairie -->
        <div class="cta-block mb-10">
          <div class="cta-icon cta-icon--accent">
            <div class="i-lucide-store h-5 w-5" />
          </div>
          <div class="flex-1">
            <h2 class="font-display text-lg font-semibold mb-2" style="color: hsl(var(--color-text))">
              {{ content?.librairie?.title }}
            </h2>
            <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
              {{ content?.librairie?.text }}
            </p>
          </div>
        </div>

        <div class="text-center">
          <UiBaseButton variant="ghost" to="/economique">
            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
            Autonomie économique
          </UiBaseButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: content } = await usePageContent('economique/commande')

useSeoPage({
  title: content.value?.meta?.title ?? 'Commander le livre — Une économie du don',
  description: 'Commander l\'édition papier du livre « Une économie du don — enfin concevable » d\'Yvv.',
  image: '/images/Couv-Economie-du-don.jpg',
})
</script>

<style scoped>
.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: hsl(var(--color-primary) / 0.1);
  border: 1px solid hsl(var(--color-primary) / 0.2);
  color: hsl(var(--color-primary));
}

.cta-block {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-text) / 0.08);
  background: hsl(var(--color-surface));
}

.cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.12);
  color: hsl(var(--color-primary));
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.cta-icon--accent {
  background: hsl(var(--color-accent) / 0.12);
  color: hsl(var(--color-accent));
}

.order-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background: hsl(var(--color-primary));
  color: white;
  transition: all 0.2s;
}

.order-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.3);
}

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

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

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

.shadok-cycliste {
  position: absolute;
  left: 3%;
  bottom: 8%;
  width: clamp(75px, 10vw, 140px);
  opacity: 0.18;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-4 8s ease-in-out infinite;
}

.shadok-lectrice {
  position: absolute;
  right: 2%;
  bottom: 10%;
  width: clamp(70px, 10vw, 135px);
  opacity: 0.28;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-5 12s ease-in-out infinite;
}

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

@keyframes shadok-float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shadok-float-2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes shadok-float-3 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes shadok-float-4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes shadok-float-5 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shadok-float-6 { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-9px); } }

@media (max-width: 768px) {
  .shadok-libraire,
  .shadok-factrice,
  .shadok-cartonnier,
  .shadok-cycliste,
  .shadok-lectrice,
  .shadok-empileur { display: none; }
}
</style>
