identité 3 : plus de zigzag ni de paires, des tailles variées, chaque oiseau sur une vraie ligne

Second avis du studio DA (03/11, 07h56) et relecture de fb8c71f (08h14) :
- numérique : le zigzag gauche-droite à pas égal est cassé. Électricien en M,
  codeuse et cryptographe au bas de leur carte, à droite, administrateur réseau
  en grand derrière Cloud libre ;
- commande : un seul côté par carte. Cycliste à gauche de la première, libraire
  en grand derrière la seconde ; la lectrice se tient sur le sac de l'icône.
  Le cartonnier va sur la ligne qui clôt chaque chapitre, l'empileur sur le
  sommaire du livre : les 61 restent rendus ;
- au moins deux tailles dès trois oiseaux (chapitre, en-musique, événement) ;
- un oiseau de marge a les pieds sur une vraie ligne, le bas ou le haut de son
  bloc ou d'une carte, jamais à mi-hauteur (« posés sans flotter ») ;
- aucun oiseau sur le haut invisible de la boîte d'un titre : dj, trapéziste,
  alchimiste et droneuse se tiennent sur la dernière ligne ou au bout de
  l'intitulé ;
- téléphone : le pompeur de Ğ1 au bout de la ligne de l'intitulé ;
- sous-pages numériques : poses, tailles et décalages variés malgré le sommaire
  à droite ; le comédien de tarifs-eau perché sur sa carte, hors du sommaire.

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

app/pages/citoyenne/[slug].vue

@@ -132,15 +132,18 @@ interface OiseauxPage { fonctions?: OiseauPlace[], projet?: OiseauPlace[], texte
 const OISEAUX_PAGE: Record<string, OiseauxPage> = {
   'decision': {
     fonctions: [
-      { nom: 'mime', pose: 'marge-g', ecart: '48px', bottom: '24%', w: 104 },
-      { nom: 'avocate', pose: 'marge-d', ecart: '44px', bottom: '58%', w: 96, retourne: true },
+      { nom: 'mime', pose: 'marge-g', ecart: '48px', w: 104 },
+      // on the line under the first row of cards (16 px gap between the rows)
+      { nom: 'avocate', pose: 'marge-d', ecart: '44px', bottom: 'calc(50% + 8px)', w: 96, retourne: true },
       // above the grid's left corner the page is empty (the links row starts at its middle)
       { nom: 'tisserand', pose: 'perche', left: '24px', w: 84 },
     ],
   },
   'tarifs-eau': {
-    projet: [{ nom: 'comedien', pose: 'marge-d', ecart: '44px', bottom: '-20px', w: 112, retourne: true }],
-    texte: [{ nom: 'potier', pose: 'marge-g', ecart: '52px', bottom: '18%', w: 112 }],
+    // the summary stands right of the project card: the actor stands on the card, where the
+    // links row above leaves the page empty
+    projet: [{ nom: 'comedien', pose: 'perche', right: '24px', w: 100, retourne: true }],
+    texte: [{ nom: 'potier', pose: 'marge-g', ecart: '52px', w: 112 }],
   },
 }
 const oiseaux = computed<OiseauxPage>(() => OISEAUX_PAGE[slug] ?? {})

app/pages/citoyenne/index.vue

@@ -19,7 +19,7 @@
       <div class="mx-auto max-w-3xl flex flex-col gap-6">
         <!-- Decision collective — the card clips its corners, the birds stand on a wrapper -->
         <div class="relative">
-        <UiOiseauPose nom="juge" pose="marge-d" ecart="40px" bottom="30%" :w="84" retourne />
+        <UiOiseauPose nom="juge" pose="marge-d" ecart="40px" :w="84" retourne />
         <div class="item-card">
           <NuxtLink to="/citoyenne/decision" class="item-overlay" aria-label="Décision collective" tabindex="-1" />
           <div class="item-body group">
@@ -49,7 +49,7 @@
         <div class="relative">
         <!-- 24 px between the two cards: no room above them for a perched bird (DA rule of 03/11) -->
         <UiOiseauPose nom="cartographe" pose="derriere" left="calc(100% - 100px)" bottom="-70px" :w="220" />
-        <UiOiseauPose nom="capitaine" pose="marge-g" ecart="46px" bottom="-30px" :w="136" />
+        <UiOiseauPose nom="capitaine" pose="marge-g" ecart="46px" :w="136" />
         <div class="item-card">
           <NuxtLink to="/citoyenne/tarifs-eau" class="item-overlay" aria-label="Tarifs de l'eau" tabindex="-1" />
           <div class="item-body group">

app/pages/economique/commande.vue

@@ -2,7 +2,9 @@
   <div class="oiseaux-scene relative overflow-hidden section-padding">
     <div class="container-content">
       <div class="mx-auto max-w-2xl">
-        <div class="section-icon mx-auto mb-6">
+        <div class="section-icon relative mx-auto mb-6">
+          <!-- The reader stands on the bag: a real edge, with the page's top margin above -->
+          <UiOiseauPose nom="lectrice" pose="perche" left="14px" :w="84" retourne :seuil="1024" />
           <div class="i-lucide-shopping-bag h-12 w-12" />
         </div>
 
@@ -14,7 +16,6 @@
 
         <h1 class="relative font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
           {{ content?.title }}
-          <UiOiseauPose nom="lectrice" pose="perche" right="8px" :w="84" retourne />
         </h1>
 
         <p class="text-lg leading-relaxed mb-10 text-center" style="color: hsl(var(--color-text-muted))">
@@ -23,8 +24,7 @@
 
         <!-- Bookelis CTA -->
         <div class="cta-block mb-8">
-          <UiOiseauPose nom="cartonnier" pose="marge-d" ecart="44px" bottom="10px" :w="96" retourne />
-          <UiOiseauPose nom="cycliste-livreur" pose="marge-g" ecart="54px" bottom="-10px" :w="156" />
+          <UiOiseauPose nom="cycliste-livreur" pose="marge-g" ecart="54px" :w="150" />
           <div class="cta-icon">
             <div class="i-lucide-globe h-5 w-5" />
           </div>
@@ -49,8 +49,7 @@
 
         <!-- Librairie -->
         <div class="cta-block mb-10">
-          <UiOiseauPose nom="libraire" pose="marge-d" ecart="40px" bottom="-60px" :w="122" retourne />
-          <UiOiseauPose nom="empileur" pose="derriere" left="-120px" bottom="-30px" :w="200" />
+          <UiOiseauPose nom="libraire" pose="derriere" left="calc(100% - 96px)" bottom="-36px" :w="214" retourne />
           <div class="cta-icon cta-icon--accent">
             <div class="i-lucide-store h-5 w-5" />
           </div>

app/pages/economique/index.vue

@@ -3,7 +3,11 @@
     <div class="container-content">
       <!-- Header -->
       <header class="mb-12 text-center">
-        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
+        <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
+          {{ content?.kicker }}
+          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
+          <UiOiseauPose nom="pompeur-de-g1" pose="perche" right="-6px" bottom="0px" :w="72" retourne mobile-seul />
+        </p>
         <h1 class="page-title font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
           {{ content?.title }}
         </h1>
@@ -15,8 +19,7 @@
       <div class="mx-auto max-w-3xl flex flex-col gap-8">
         <!-- Monnaie libre — the card clips its Ğ1 watermark, so the bird stands on a wrapper -->
         <div class="relative">
-        <UiOiseauPose nom="pompeur-de-g1" pose="marge-d" ecart="34px" bottom="18%" :w="126" retourne />
-        <UiOiseauPose nom="pompeur-de-g1" pose="perche" right="24px" :w="80" mobile-seul />
+        <UiOiseauPose nom="pompeur-de-g1" pose="marge-d" ecart="34px" :w="126" retourne />
         <NuxtLink to="/economique/monnaie-libre" class="item-card g1-card group">
           <span class="g1-watermark" aria-hidden="true">Ğ1</span>
           <div class="item-header">
@@ -42,6 +45,8 @@
         <div class="book-block">
           <!-- The balance (the measure of the gift) peeks out from behind the book -->
           <UiOiseauPose nom="la-balance" pose="derriere" left="-150px" bottom="-20px" :w="240" />
+          <!-- Not by the Productions card: with the beekeeper, a pair at the same height -->
+          <UiOiseauPose nom="maraichere" pose="marge-d" ecart="46px" :w="108" retourne />
           <HomeBookSection
             compact
             @open-player="showBookPlayer = true"
@@ -52,7 +57,6 @@
         <!-- Productions collectives -->
         <NuxtLink to="/economique/productions-collectives" class="item-card group">
           <UiOiseauPose nom="apicultrice" pose="marge-g" ecart="52px" :w="124" />
-          <UiOiseauPose nom="maraichere" pose="marge-d" ecart="46px" bottom="-90px" :w="108" retourne />
           <div class="item-header">
             <div class="item-icon">
               <div class="i-lucide-users h-5 w-5" />

app/pages/economique/modele-eco/[slug].vue

@@ -15,7 +15,8 @@
     <BookChapterContent :content="chapter" />
 
     <!-- Prev / Next navigation -->
-    <nav class="mt-16 flex items-center justify-between border-t border-white/8 pt-8">
+    <nav class="relative mt-16 flex items-center justify-between border-t border-white/8 pt-8">
+      <UiOiseauPose nom="cartonnier" pose="perche" left="calc(50% - 38px)" :w="76" />
       <NuxtLink
         v-if="prevChapter"
         :to="`/economique/modele-eco/${prevChapter.stem?.split('/').pop()}`"

app/pages/economique/modele-eco/index.vue

@@ -75,9 +75,10 @@ import type { OiseauPlace } from '~/utils/oiseauPose'
 // Birds along the chapters, each by the one its trade tells (irregular intervals). The cards
 // stand 12 px apart: no room above them for a perched bird (DA rule of 03/11)
 const OISEAUX_CHAPITRE: Record<string, OiseauPlace[]> = {
-  '01-introduction': [{ nom: 'conteuse', pose: 'marge-g', ecart: '50px', bottom: '20%', w: 122 }],
-  '03-mesure': [{ nom: 'la-balance', pose: 'marge-d', ecart: '40px', bottom: '25%', w: 112, retourne: true }],
-  '07-echanger': [{ nom: 'colporteur', pose: 'marge-g', ecart: '44px', bottom: '-20px', w: 116 }],
+  '01-introduction': [{ nom: 'conteuse', pose: 'marge-g', ecart: '50px', w: 122 }],
+  '03-mesure': [{ nom: 'la-balance', pose: 'marge-d', ecart: '40px', w: 112, retourne: true }],
+  '07-echanger': [{ nom: 'colporteur', pose: 'marge-g', ecart: '44px', w: 116 }],
+  '08-institution': [{ nom: 'empileur', pose: 'marge-d', ecart: '48px', w: 128, retourne: true }],
   '11-annexes': [{ nom: 'illustratrice', pose: 'derriere', left: 'calc(100% - 90px)', bottom: '-40px', w: 220 }],
 }
 

app/pages/economique/monnaie-libre.vue

@@ -64,7 +64,7 @@
           id="section-content"
           class="prose-block relative mb-8 max-w-2xl mx-auto section-anchor"
         >
-          <UiOiseauPose nom="boulangere" pose="marge-g" ecart="56px" bottom="52%" :w="100" />
+          <UiOiseauPose nom="boulangere" pose="marge-g" ecart="56px" :w="96" />
           <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
             {{ content.content }}
           </p>

app/pages/economique/productions-collectives.vue

@@ -27,7 +27,7 @@
         <!-- Content -->
         <div v-if="content?.content" class="prose-block mb-10">
           <UiOiseauPose nom="menuisier" pose="perche" left="20px" :w="84" mobile />
-          <UiOiseauPose nom="forgeron" pose="marge-g" ecart="70px" bottom="-30px" :w="140" />
+          <UiOiseauPose nom="forgeron" pose="marge-g" ecart="70px" :w="140" />
           <UiOiseauPose nom="berger" pose="derriere" left="calc(100% - 110px)" bottom="-46px" :w="230" />
           <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
             {{ content.content }}

app/pages/en-musique/index.vue

@@ -16,10 +16,13 @@
         </div>
 
         <div class="text-center md:text-left">
-          <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
+          <p class="relative mb-2 font-mono text-sm tracking-widest text-accent uppercase">
+            {{ content?.kicker }}
+            <!-- The DJ stands at the end of this line: the title's box has no visible top edge -->
+            <UiOiseauPose nom="dj" pose="perche" right="0px" bottom="0px" :w="84" retourne ton="accent" :seuil="1200" />
+          </p>
           <h1 class="page-title relative font-display font-bold tracking-tight text-white">
             {{ content?.title }}
-            <UiOiseauPose nom="dj" pose="perche" right="0px" bottom="calc(100% + 4px)" :w="100" retourne ton="accent" :seuil="1200" />
           </h1>
           <p class="mt-4 text-white/60">
             {{ content?.description }}

app/pages/evenement.vue

@@ -12,7 +12,7 @@
       <p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
       <h1 class="page-title relative font-display font-extrabold tracking-tight" style="color: hsl(var(--color-text))">
         {{ content?.title }}
-        <UiOiseauPose nom="trapeziste" pose="perche" left="calc(80% - 48px)" bottom="calc(100% + 30px)" :w="96" ton="accent" :seuil="1200" />
+        <UiOiseauPose nom="trapeziste" pose="perche" left="calc(80% - 48px)" bottom="-6px" :w="96" ton="accent" :seuil="1200" />
       </h1>
       <p v-if="evtContent?.format" class="evt-format font-display">
         {{ evtContent.format }}
@@ -74,7 +74,7 @@
       <div v-if="evtContent?.espaces">
         <h2 class="evt-section-title relative">
           Espaces & programme
-          <UiOiseauPose nom="marionnettiste" pose="perche" right="8%" bottom="-4px" :w="96" retourne />
+          <UiOiseauPose nom="marionnettiste" pose="perche" right="8%" bottom="-4px" :w="112" retourne />
         </h2>
         <p class="evt-section-sub">Chorégraphie séquencée de plénières, ateliers et espaces permanents</p>
         <div class="espaces-grid">

app/pages/gratewizard.vue

@@ -19,7 +19,7 @@
             </span>
             <h1 class="page-title relative font-display font-bold text-white">
               {{ content?.title }}
-              <UiOiseauPose nom="alchimiste" pose="perche" right="72px" bottom="calc(100% - 4px)" :w="98" retourne />
+              <UiOiseauPose nom="alchimiste" pose="perche" right="72px" bottom="-4px" :w="98" retourne />
             </h1>
             <p class="mt-4 text-lg text-white/60 leading-relaxed max-w-xl mx-auto">
               {{ content?.description }}

app/pages/numerique/[slug].vue

@@ -439,25 +439,26 @@ const OISEAUX_PAGE: Record<string, OiseauxPage> = {
   'logiciel-libre': {
     projet: [{ nom: 'cafeine', pose: 'derriere', left: '-130px', bottom: '-30px', w: 200 }],
     sections: {
-      1: [{ nom: 'debogueur', pose: 'marge-g', ecart: '48px', bottom: '62%', w: 120 }],
+      1: [{ nom: 'debogueur', pose: 'marge-g', ecart: '24px', w: 132 }],
       // sections 2 (and cloud-libre 1 and 5) are wide: 152 px of margin at 1200 px
-      2: [{ nom: 'le-manchot', pose: 'marge-g', ecart: '28px', bottom: '18%', w: 108 }],
-      3: [{ nom: 'canard-en-plastique', pose: 'marge-g', ecart: '72px', bottom: '6%', w: 84 }],
+      2: [{ nom: 'le-manchot', pose: 'marge-g', ecart: '40px', w: 84 }],
+      3: [{ nom: 'canard-en-plastique', pose: 'marge-g', ecart: '110px', w: 76 }],
     },
   },
   'authentification-wot': {
     projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
     sections: {
-      0: [{ nom: 'cryptographe', pose: 'marge-g', ecart: '48px', bottom: '45%', w: 104 }],
-      1: [{ nom: 'toile-de-confiance', pose: 'marge-g', ecart: '44px', bottom: '30%', w: 150 }],
-      4: [{ nom: 'pompeur-de-g1', pose: 'marge-g', ecart: '40px', bottom: '22%', w: 108 }],
+      1: [{ nom: 'toile-de-confiance', pose: 'derriere', left: '-120px', bottom: '-30px', w: 220 }],
+      // not right under the server carrier and the web of trust: no column of three
+      2: [{ nom: 'cryptographe', pose: 'marge-g', ecart: '96px', w: 84 }],
+      4: [{ nom: 'pompeur-de-g1', pose: 'marge-g', ecart: '72px', w: 120 }],
     },
   },
   'cloud-libre': {
     projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
     sections: {
-      1: [{ nom: 'admin-reseau', pose: 'marge-g', ecart: '28px', bottom: '40%', w: 104 }],
-      5: [{ nom: 'imprimeuse-3d', pose: 'marge-g', ecart: '28px', bottom: '62%', w: 100 }],
+      1: [{ nom: 'admin-reseau', pose: 'derriere', left: '-110px', bottom: '-20px', w: 220 }],
+      5: [{ nom: 'imprimeuse-3d', pose: 'marge-g', ecart: '48px', w: 84 }],
     },
   },
 }

app/pages/numerique/index.vue

@@ -9,7 +9,7 @@
         </p>
         <h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
           {{ content?.title }}
-          <UiOiseauPose nom="droneuse" pose="perche" left="calc(68% - 38px)" bottom="calc(100% - 6px)" :w="76" :seuil="1200" />
+          <UiOiseauPose nom="droneuse" pose="perche" left="calc(68% - 38px)" bottom="-4px" :w="76" :seuil="1200" />
         </h1>
         <p class="mt-4 mx-auto max-w-2xl leading-relaxed" style="color: hsl(var(--color-text-muted))">
           {{ content?.description }}
@@ -19,7 +19,7 @@
       <div class="mx-auto max-w-3xl flex flex-col gap-6">
         <!-- LPK sert l'axe numérique -->
         <NuxtLink v-if="lpk" :to="lpk.to" class="lpk-card">
-          <UiOiseauPose nom="electricien" pose="marge-g" ecart="46px" :w="132" />
+          <UiOiseauPose nom="electricien" pose="marge-g" ecart="40px" :w="150" />
           <span class="lpk-name">{{ lpk.name }}</span>
           <span class="lpk-body">
             <span class="lpk-full">{{ lpk.text }}</span>
@@ -97,17 +97,17 @@ const { data: content } = await usePageContent('numerique')
 
 // Birds by pillar, each next to the trade it is about (composition of 03/11)
 const OISEAUX_PILIER: Record<string, OiseauPlace[]> = {
-  // The cards stand 16 px apart: no room above them for a perched bird (DA rule of 03/11),
-  // so the birds alternate in the margins, right then left, never three on one vertical
-  // (the server carrier stays on the authentification-wot and cloud-libre pages)
+  // The cards stand 16 px apart: no room above them for a perched bird (DA rule of 03/11).
+  // In the margins, no strict zigzag and several sizes (DA, 03/11 07h56): two stand at the
+  // bottom of their card on the right, the network admin is large behind Cloud libre
   'logiciel-libre': [
-    { nom: 'codeuse', pose: 'marge-d', ecart: '40px', bottom: '34%', w: 112, retourne: true },
+    { nom: 'codeuse', pose: 'marge-d', ecart: '28px', w: 84, retourne: true },
   ],
   'authentification-wot': [
-    { nom: 'cryptographe', pose: 'marge-g', ecart: '52px', bottom: '22%', w: 96 },
+    { nom: 'cryptographe', pose: 'marge-d', ecart: '64px', w: 112, retourne: true },
   ],
   'cloud-libre': [
-    { nom: 'admin-reseau', pose: 'marge-d', ecart: '36px', bottom: '28%', w: 118, retourne: true },
+    { nom: 'admin-reseau', pose: 'derriere', left: '-150px', bottom: '-40px', w: 236 },
   ],
 }
 const { data: site } = await useSiteContent()