identité : le kit du studio DA intégré, les 61 oiseaux posés sur la page

Copie du kit kit-site (empreinte vérifiée) : logotype dans l'en-tête, signe §,
favicons et icônes, og-default (?v=3), frise du pied de page, 61 oiseaux.
Les shadoks positionnés à la main (HomeShadoks et les règles des 10 pages)
cèdent la place à UiOiseauPose : chaque oiseau se pose sur une arête réelle
(perché, marge gauche ou droite, derrière une carte, libre), currentColor,
largeur 72 px au moins, opacité 0,18-0,28 près du texte et 0,10-0,14 derrière,
jamais deux fois sur une page, calligraphe et typographe jamais en miroir.
Sous 768 px, un oiseau par page au plus ; seuls ceux derrière une carte
dérivent un peu, et plus du tout en mouvement réduit.

Consignes d'Yvv du 03/11 inscrites dans docs/consignes-yvv.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/components/home/HomeFormat.vue

@@ -8,6 +8,8 @@
     <div class="format-grid">
       <!-- Éditorial : le livre et les chansons -->
       <article v-if="book" class="format-card format-card--book">
+        <!-- The reader peeks over the book card: only her head and book show -->
+        <UiOiseauPose nom="lectrice" pose="derriere" left="76%" bottom="calc(100% - 48px)" :w="104" />
         <div
           class="format-cover"
           role="img"
@@ -41,6 +43,8 @@
 
       <!-- Événementiel -->
       <NuxtLink v-if="evenement" :to="evenement.to" class="format-card format-card--event">
+        <!-- The accordion player stands on the event card -->
+        <UiOiseauPose nom="accordeoniste" pose="perche" right="66px" :w="84" retourne ton="accent" />
         <p class="format-kicker">
           {{ evenement.teaser }}
           <span v-if="evenement.gestation" class="format-state">en gestation</span>
@@ -123,6 +127,7 @@ defineEmits<{
 }
 
 .format-grid {
+  isolation: isolate;
   display: grid;
   gap: 1.25rem;
 }
@@ -132,6 +137,7 @@ defineEmits<{
 }
 
 .format-card {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

app/components/home/HomeLanding.vue

@@ -2,7 +2,6 @@
   <div class="va">
     <!-- Hero : the headline, and the three cursors to push -->
     <section class="va-hero">
-      <HomeShadoks />
       <div class="container-content va-hero-grid">
         <div class="va-intro">
           <h1 class="va-h1">
@@ -20,7 +19,11 @@
         </div>
 
         <div class="va-console">
-          <p class="va-console-title">{{ heading[2] }}</p>
+          <p class="va-console-title">
+            {{ heading[2] }}
+            <!-- The DJ stands on the console board, looking at the faders -->
+            <UiOiseauPose nom="dj" pose="perche" right="2rem" bottom="-0.75rem" :w="80" retourne ton="accent" mobile />
+          </p>
           <HomeConsole
             v-model="active"
             :axes="axes"
@@ -61,6 +64,7 @@
       <div class="container-content">
         <h2 class="va-h2">{{ toolboxTitle }}</h2>
         <HomeToolbox
+          :oiseaux="toolboxOiseaux"
           :axes="axes"
           :lpk="lpk"
           :bouquet="bouquet"
@@ -76,6 +80,7 @@
 
 <script setup lang="ts">
 import type { AxisKey } from '~/composables/useHomeData'
+import type { OiseauPlace } from '~/utils/oiseauPose'
 
 defineEmits<{
   'open-player': []
@@ -97,6 +102,14 @@ const axesLine = computed(() =>
     .filter(Boolean)
     .map(text => ({ text, hue: AXIS_WORDS[text] })))
 const active = ref<AxisKey>('numerique')
+
+// The governance crew stands in the empty space under the citoyenne column of the toolbox
+const toolboxOiseaux: Partial<Record<AxisKey, OiseauPlace[]>> = {
+  politique: [
+    { nom: 'capitaine', pose: 'libre', left: 'calc(34% - 75px)', bottom: '-190px', w: 150, op: 0.24 },
+    { nom: 'matelot', pose: 'libre', left: 'calc(80% - 40px)', bottom: '-300px', w: 80, op: 0.26, retourne: true },
+  ],
+}
 </script>
 
 <style scoped>
@@ -184,6 +197,7 @@ const active = ref<AxisKey>('numerique')
 }
 
 .va-console-title {
+  position: relative;
   margin: 0 0 0.75rem;
   font-family: var(--font-display);
   font-weight: 700;

app/components/home/HomeMessages.vue

@@ -5,6 +5,8 @@
     <!-- Formulaire -->
     <UiScrollReveal>
       <div class="message-form-card">
+        <!-- The postwoman stands on the message form -->
+        <UiOiseauPose nom="factrice" pose="perche" right="30px" :w="88" retourne />
         <h3 class="font-display text-lg font-bold form-title mb-4">Laisser un message</h3>
 
         <form v-if="!submitted" class="space-y-3" @submit.prevent="send">
@@ -167,6 +169,7 @@ function formatDate(iso: string) {
 
 /* ── Carte formulaire ── */
 .message-form-card {
+  position: relative;
   background: hsl(var(--color-surface));
   border-radius: 16px;
   padding: 1.5rem;

app/components/home/HomeShadoks.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="shadoks" aria-hidden="true">
-    <!-- Shadok bird decoration -->
-    <svg class="shadok-bird" viewBox="0 0 180 260" fill="none" aria-hidden="true">
-      <ellipse cx="90" cy="100" rx="45" ry="40" fill="currentColor" opacity="0.85"/>
-      <circle cx="130" cy="60" r="22" fill="currentColor" opacity="0.8"/>
-      <path d="M110 85 Q125 70 128 63" stroke="currentColor" stroke-width="8" stroke-linecap="round" opacity="0.7" fill="none"/>
-      <circle cx="136" cy="55" r="5" fill="currentColor" opacity="0.3"/>
-      <circle cx="137" cy="54" r="2" fill="currentColor" opacity="0.6"/>
-      <polygon points="150,58 175,50 152,65" fill="currentColor" opacity="0.6"/>
-      <line x1="75" y1="138" x2="60" y2="230" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-      <line x1="105" y1="138" x2="115" y2="230" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-      <circle cx="66" cy="190" r="4" fill="currentColor" opacity="0.4"/>
-      <circle cx="111" cy="190" r="4" fill="currentColor" opacity="0.4"/>
-      <path d="M60 230 L45 233 M60 230 L55 236 M60 230 L65 235" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
-      <path d="M115 230 L100 233 M115 230 L110 236 M115 230 L120 235" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
-      <path d="M48 95 Q20 80 15 65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5" fill="none"/>
-      <path d="M48 100 Q22 92 10 85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4" fill="none"/>
-      <path d="M48 105 Q25 102 12 100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3" fill="none"/>
-    </svg>
-
-    <!-- Shadok boulanger -->
-    <svg class="shadok-boulanger" viewBox="0 0 240 300" fill="none" aria-hidden="true">
-      <ellipse cx="120" cy="155" rx="40" ry="48" fill="currentColor" opacity="0.85"/>
-      <circle cx="120" cy="92" r="25" fill="currentColor" opacity="0.8"/>
-      <ellipse cx="120" cy="68" rx="18" ry="22" fill="currentColor" opacity="0.35"/>
-      <rect x="105" y="78" width="30" height="5" rx="1" fill="currentColor" opacity="0.4"/>
-      <path d="M110 88 Q114 84 118 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
-      <path d="M124 88 Q128 84 132 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
-      <path d="M112 102 Q120 108 128 102" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.35"/>
-      <line x1="160" y1="145" x2="190" y2="135" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-      <rect x="185" y="125" width="40" height="10" rx="5" fill="currentColor" opacity="0.4" transform="rotate(-15 205 130)"/>
-      <line x1="80" y1="148" x2="55" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-      <line x1="105" y1="200" x2="95" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-      <line x1="135" y1="200" x2="145" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-      <rect x="30" y="180" width="50" height="40" rx="4" fill="currentColor" opacity="0.25"/>
-      <rect x="35" y="185" width="40" height="20" rx="2" fill="currentColor" opacity="0.15"/>
-      <ellipse cx="55" cy="195" rx="12" ry="6" fill="currentColor" opacity="0.12"/>
-    </svg>
-  </div>
-</template>
-
-<style scoped>
-.shadoks {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.shadok-bird {
-  position: absolute;
-  right: 3%;
-  top: 6%;
-  width: clamp(90px, 10vw, 150px);
-  opacity: 0.22;
-  color: hsl(var(--axis-num));
-  animation: shadok-float 8s ease-in-out infinite;
-}
-
-.shadok-boulanger {
-  position: absolute;
-  left: 1.5%;
-  bottom: 4%;
-  width: clamp(80px, 9vw, 140px);
-  opacity: 0.2;
-  color: hsl(var(--axis-eco));
-  animation: shadok-float 9s ease-in-out infinite reverse;
-}
-
-@keyframes shadok-float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-
-@media (max-width: 768px) {
-  .shadoks { display: none; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .shadok-bird, .shadok-boulanger { animation: none; }
-}
-</style>

app/components/home/HomeToolbox.vue

@@ -9,6 +9,7 @@
         :style="{ '--hue': `var(${axis.hue})` }"
         :aria-labelledby="`tb-${uid}-${axis.key}`"
       >
+        <UiOiseauPose v-for="o in oiseaux?.[axis.key] ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" class="toolbox-oiseau" />
         <header class="toolbox-head">
           <p class="toolbox-lever">{{ axis.lever }}</p>
           <h3 :id="`tb-${uid}-${axis.key}`" class="toolbox-title">
@@ -61,7 +62,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HomeAxis } from '~/composables/useHomeData'
+import type { AxisKey, HomeAxis } from '~/composables/useHomeData'
+import type { OiseauPlace } from '~/utils/oiseauPose'
 
 withDefaults(defineProps<{
   axes: HomeAxis[]
@@ -70,6 +72,8 @@ withDefaults(defineProps<{
   gratewizard?: { title: string, subtitle: string }
   showPromise?: boolean
   anchors?: boolean
+  /** Birds standing by an axis column (home page) */
+  oiseaux?: Partial<Record<AxisKey, OiseauPlace[]>>
 }>(), {
   showPromise: true,
   anchors: false,
@@ -106,7 +110,13 @@ function onAction(id: string) {
   }
 }
 
+/* The birds under a column only make sense with the three columns side by side */
+@container (max-width: 59.99rem) {
+  .toolbox-oiseau { display: none; }
+}
+
 .toolbox-axis {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;