identité 2 : un oiseau perché seulement où il y a du vide au-dessus, l'en-tête tient à 768 px

Avis du studio DA du 03/11 (07h00) et relecture de 8ccdda3 :
- règle du perché : il faut au-dessus de l'arête un vide au moins égal à la hauteur
  de l'oiseau, sinon il va en marge ou derrière la carte. Les perchés entre cartes
  rapprochées (numérique, logiciel-libre, économique, sommaire du livre, commande,
  citoyenne, événement) passent en marge, derrière, ou partent ;
- productions-collectives : 8 oiseaux ramenés à 4, sans colonne ni chevauchement.
  Les oiseaux retirés vont sur des pages qui en avaient peu : monnaie-libre
  (boulangère, vigneronne), tarifs-eau (potier), décision (tisserand),
  cloud-libre (imprimeuse 3D). Les 61 restent rendus ;
- pas trois oiseaux sur la même verticale (commande, numérique) ;
- au téléphone, l'oiseau de la page se tient au bout de la ligne de l'intitulé ;
- seuil 1024 pour un perché dont le bloc n'a de vide au-dessus qu'en deux colonnes
  (accordéoniste et factrice de l'accueil) ;
- numerique/[slug] : les oiseaux des sections larges tiennent dans 152 px de marge
  à 1200 px ;
- en-tête : de 768 à 1023 px, boutons resserrés au lieu d'un débordement ; le
  logotype du kit ne change pas.

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

app/components/home/HomeFormat.vue

@@ -43,8 +43,9 @@
 
       <!-- É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" />
+        <!-- The accordion player stands on the event card; under 1024 px the cards stack and
+             the book card leaves no room above it -->
+        <UiOiseauPose nom="accordeoniste" pose="perche" right="66px" :w="84" retourne ton="accent" :seuil="1024" />
         <p class="format-kicker">
           {{ evenement.teaser }}
           <span v-if="evenement.gestation" class="format-state">en gestation</span>

app/components/home/HomeMessages.vue

@@ -6,7 +6,7 @@
     <UiScrollReveal>
       <div class="message-form-card">
         <!-- The postwoman stands on the message form -->
-        <UiOiseauPose nom="factrice" pose="perche" right="30px" :w="88" retourne />
+        <UiOiseauPose nom="factrice" pose="perche" right="30px" :w="88" retourne :seuil="1024" />
         <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">

app/components/layout/TheHeader.vue

@@ -7,7 +7,7 @@
       </NuxtLink>
 
       <!-- Desktop navigation -->
-      <nav class="hidden md:flex items-center gap-1" aria-label="Navigation principale">
+      <nav class="nav-main hidden md:flex items-center gap-1" aria-label="Navigation principale">
         <!-- Autonomie : prefix + axis buttons -->
         <span class="nav-prefix">Autonomie&thinsp;:</span>
         <NuxtLink
@@ -117,4 +117,22 @@ const AXIS_HUES = ['--axis-num', '--axis-eco', '--axis-cit']
 .btn-ghost--muted {
   color: hsl(var(--color-text) / 0.45);
 }
+
+/* From 768 to 1023 px the kit's logotype (166 px) and the whole navigation share the bar:
+   tighter buttons instead of an overflow; the logotype of the studio DA kit stays as it is */
+@media (max-width: 1023px) {
+  .nav-main {
+    gap: 0.125rem;
+  }
+
+  .nav-axis,
+  .btn-ghost--muted {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .nav-sep {
+    margin: 0 0.25rem;
+  }
+}
 </style>

app/components/ui/OiseauPose.vue

@@ -13,8 +13,11 @@
 //   libre     placed only by left / right / top / bottom (an empty area next to its block)
 //
 // Birds in the margin, behind a block or free need room around the column: they show from
-// 1200 px wide, the perched ones from 768 px (`seuil` overrides); under 768 px, only a bird
-// marked `mobile`.
+// 1200 px wide, the perched ones from 768 px (`seuil` overrides, for instance 1024 for a perched
+// bird whose block has no void above it until the grid splits in two); under 768 px, only a
+// bird marked `mobile`.
+// A perched bird needs, above its edge, a void at least as tall as itself (DA rule of 03/11);
+// where blocks stand close, the bird goes in the margin or behind the block.
 //
 // Drawing rules of the studio DA (kit README, §2.5): one colour (currentColor), proportions
 // intact and never cropped, 72 px wide at least, opacity 0.18-0.28 next to text and 0.10-0.14
@@ -42,7 +45,7 @@ const props = withDefaults(defineProps<{
   mobileSeul?: boolean
   /** Narrowest window (px) where the bird shows: 1200 by default for the margin, behind
    * and free poses, 768 for a perched bird */
-  seuil?: 768 | 1200
+  seuil?: 768 | 1024 | 1200
   ton?: 'primary' | 'accent'
   op?: number
 }>(), { pose: 'perche', w: 80, ecart: '2.5rem', ton: 'primary' })
@@ -73,6 +76,7 @@ const classes = computed(() => [
     'oiseau-pose--mobile': props.mobile || props.mobileSeul,
     'oiseau-pose--mobile-seul': props.mobileSeul,
     'oiseau-pose--large': (props.seuil ?? (props.pose === 'perche' ? 768 : 1200)) >= 1200,
+    'oiseau-pose--moyen': props.seuil === 1024,
     'oiseau-pose--accent': props.ton === 'accent',
   },
 ])
@@ -122,6 +126,12 @@ const classes = computed(() => [
   }
 }
 
+@media (max-width: 1023px) {
+  .oiseau-pose--moyen {
+    display: none;
+  }
+}
+
 @media (min-width: 768px) {
   .oiseau-pose--mobile-seul {
     display: none;

app/pages/citoyenne/[slug].vue

@@ -95,8 +95,9 @@
         <div
           v-if="content?.content"
           id="section-content"
-          class="prose-block mb-10 max-w-2xl mx-auto section-anchor"
+          class="prose-block relative mb-10 max-w-2xl mx-auto section-anchor"
         >
+          <UiOiseauPose v-for="o in oiseaux.texte ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" />
           <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
             {{ content.content }}
           </p>
@@ -126,17 +127,20 @@ import type { OiseauPlace } from '~/utils/oiseauPose'
 const route = useRoute()
 const slug = route.params.slug as string
 
-// Birds of each page: by the features grid and by the project card
-interface OiseauxPage { fonctions?: OiseauPlace[], projet?: OiseauPlace[] }
+// Birds of each page: by the features grid, the project card and the text block
+interface OiseauxPage { fonctions?: OiseauPlace[], projet?: OiseauPlace[], texte?: OiseauPlace[] }
 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 },
+      // 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 }],
   },
 }
 const oiseaux = computed<OiseauxPage>(() => OISEAUX_PAGE[slug] ?? {})

app/pages/citoyenne/index.vue

@@ -2,7 +2,11 @@
   <div class="axis-scope axis-scope--cit oiseaux-scene relative overflow-hidden section-padding">
     <div class="container-content">
       <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="vigie" pose="perche" right="-6px" bottom="0px" :w="72" retourne mobile-seul />
+        </p>
         <h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
           {{ content?.title }}
           <UiOiseauPose nom="vigie" pose="perche" left="calc(66% - 48px)" bottom="-6px" :w="96" retourne :seuil="1200" />
@@ -16,7 +20,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="cartographe" pose="derriere" left="-130px" bottom="-40px" :w="230" />
         <div class="item-card">
           <NuxtLink to="/citoyenne/decision" class="item-overlay" aria-label="Décision collective" tabindex="-1" />
           <div class="item-body group">
@@ -44,7 +47,8 @@
 
         <!-- Tarifs de l'eau -->
         <div class="relative">
-        <UiOiseauPose nom="matelot" pose="perche" right="22%" :w="80" mobile />
+        <!-- 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" />
         <div class="item-card">
           <NuxtLink to="/citoyenne/tarifs-eau" class="item-overlay" aria-label="Tarifs de l'eau" tabindex="-1" />

app/pages/economique/commande.vue

@@ -6,13 +6,15 @@
           <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">
+        <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
           {{ content?.kicker }}
+          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
+          <UiOiseauPose nom="lectrice" pose="perche" right="8px" bottom="0px" :w="84" retourne mobile-seul />
         </p>
 
         <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="marge-d" ecart="16px" bottom="-8px" :w="84" retourne />
+          <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))">
@@ -47,7 +49,6 @@
 
         <!-- Librairie -->
         <div class="cta-block mb-10">
-          <UiOiseauPose nom="factrice" pose="perche" left="calc(80% - 43px)" :w="86" retourne mobile />
           <UiOiseauPose nom="libraire" pose="marge-d" ecart="40px" bottom="-60px" :w="122" retourne />
           <UiOiseauPose nom="empileur" pose="derriere" left="-120px" bottom="-30px" :w="200" />
           <div class="cta-icon cta-icon--accent">

app/pages/economique/index.vue

@@ -51,7 +51,6 @@
 
         <!-- Productions collectives -->
         <NuxtLink to="/economique/productions-collectives" class="item-card group">
-          <UiOiseauPose nom="boulangere" pose="perche" left="calc(76% - 38px)" :w="76" />
           <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">

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

@@ -10,7 +10,11 @@
       />
 
       <header class="mb-10 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="relieur" pose="perche" right="4px" bottom="0px" :w="72" mobile-seul />
+        </p>
         <h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
           {{ content?.title }}
           <UiOiseauPose nom="relieur" pose="perche" left="calc(24% - 54px)" bottom="-4px" :w="108" :seuil="1200" />
@@ -68,12 +72,11 @@
 <script setup lang="ts">
 import type { OiseauPlace } from '~/utils/oiseauPose'
 
-// Birds along the chapters, each by the one its trade tells (irregular intervals)
+// 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 }],
-  '02-don': [{ nom: 'penseur', pose: 'perche', right: '12%', w: 76 }],
   '03-mesure': [{ nom: 'la-balance', pose: 'marge-d', ecart: '40px', bottom: '25%', w: 112, retourne: true }],
-  '05-trm': [{ nom: 'colporteur', pose: 'perche', right: '4px', w: 72, mobileSeul: true }],
   '07-echanger': [{ nom: 'colporteur', pose: 'marge-g', ecart: '44px', bottom: '-20px', w: 116 }],
   '11-annexes': [{ nom: 'illustratrice', pose: 'derriere', left: 'calc(100% - 90px)', bottom: '-40px', w: 220 }],
 }

app/pages/economique/monnaie-libre.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="axis-scope axis-scope--eco section-padding">
+  <div class="oiseaux-scene axis-scope axis-scope--eco section-padding">
     <div class="container-content">
 
       <!-- Header -->
@@ -62,8 +62,9 @@
         <div
           v-if="content?.content"
           id="section-content"
-          class="prose-block mb-8 max-w-2xl mx-auto section-anchor"
+          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" />
           <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
             {{ content.content }}
           </p>
@@ -73,8 +74,9 @@
         <div
           v-if="content?.links"
           id="section-links"
-          class="flex flex-col gap-3 mb-10 max-w-2xl mx-auto section-anchor"
+          class="relative flex flex-col gap-3 mb-10 max-w-2xl mx-auto section-anchor"
         >
+          <UiOiseauPose nom="vigneronne" pose="derriere" left="-140px" bottom="-24px" :w="210" />
           <a
             v-for="link in content.links"
             :key="link.href"

app/pages/economique/productions-collectives.vue

@@ -18,7 +18,6 @@
 
         <p class="relative text-lg leading-relaxed mb-8 text-center" style="color: hsl(var(--color-text-muted))">
           {{ content?.description }}
-          <UiOiseauPose nom="imprimeuse-3d" pose="marge-g" ecart="60px" :w="96" />
         </p>
 
         <div class="mb-8 text-center">
@@ -29,7 +28,6 @@
         <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="potier" pose="marge-d" ecart="40px" bottom="40%" :w="120" retourne />
           <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 }}
@@ -37,8 +35,6 @@
         </div>
 
         <div class="relative text-center">
-          <UiOiseauPose nom="tisserand" pose="perche" left="calc(50% + 120px)" :w="84" retourne />
-          <UiOiseauPose nom="vigneronne" pose="marge-g" ecart="40px" bottom="-40px" :w="100" />
           <UiBaseButton variant="ghost" to="/economique">
             <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
             Autonomie économique

app/pages/en-musique/index.vue

@@ -4,7 +4,8 @@
       <!-- Hero section with book cover -->
       <div class="mb-12 grid items-center gap-8 md:grid-cols-2">
         <div class="book-cover-wrapper relative">
-            <UiOiseauPose nom="trompettiste" pose="libre" left="2%" bottom="0px" :w="116" />
+            <!-- On the cover's base line, in the empty space between the book and the text -->
+            <UiOiseauPose nom="trompettiste" pose="libre" left="calc(100% - 112px)" bottom="0px" :w="104" />
           <div class="book-cover-3d">
             <img
               :src="homeContent?.book.coverImage"
@@ -68,7 +69,7 @@
 
       <!-- Song list -->
       <div v-if="viewMode === 'list'" class="relative flex flex-col gap-2">
-        <UiOiseauPose nom="danseur" pose="perche" left="calc(52% - 60px)" :w="120" />
+        <UiOiseauPose nom="danseur" pose="perche" left="calc(64% - 60px)" :w="120" :seuil="1200" />
         <SongItem
           v-for="song in filteredSongs"
           :key="song.id"

app/pages/evenement.vue

@@ -48,7 +48,7 @@
       <div v-if="evtContent?.axes">
         <h2 class="evt-section-title relative">
           Trois axes d'émancipation
-          <UiOiseauPose nom="clown" pose="perche" right="30%" bottom="0px" :w="84" retourne ton="accent" />
+          <UiOiseauPose nom="clown" pose="perche" right="3%" bottom="0px" :w="84" retourne ton="accent" />
         </h2>
         <p class="evt-section-sub">« je subis — ou je m'affranchis »</p>
         <div class="axes-grid">
@@ -95,7 +95,7 @@
       <div v-if="evtContent?.config">
         <h2 class="evt-section-title relative">
           Format & lieu
-          <UiOiseauPose nom="regisseur" pose="perche" right="42%" bottom="0px" :w="92" retourne />
+          <UiOiseauPose nom="regisseur" pose="perche" right="24%" bottom="0px" :w="92" retourne />
         </h2>
         <div class="config-grid">
           <div v-for="(cfg, i) in evtContent.config" :key="i" class="config-card">
@@ -129,7 +129,6 @@ const evtContent = computed(() => content.value as Record<string, any> | null)
 const OISEAUX_CARTE: Record<string, OiseauPlace[]> = {
   'Économique': [{ nom: 'jongleur', pose: 'perche', right: '22px', w: 76 }],
   'Ğ(marché)': [{ nom: 'cracheur-de-feu', pose: 'perche', right: '18px', w: 76, ton: 'accent', seuil: 1200 }],
-  'Scène musicale & théâtrale': [{ nom: 'accordeoniste', pose: 'perche', right: '16px', w: 76, retourne: true, ton: 'accent' }],
   '100 à 200 personnes': [{ nom: 'acrobate', pose: 'perche', right: '14px', w: 72 }],
 }
 

app/pages/numerique/[slug].vue

@@ -440,8 +440,9 @@ const OISEAUX_PAGE: Record<string, OiseauxPage> = {
     projet: [{ nom: 'cafeine', pose: 'derriere', left: '-130px', bottom: '-30px', w: 200 }],
     sections: {
       1: [{ nom: 'debogueur', pose: 'marge-g', ecart: '48px', bottom: '62%', w: 120 }],
-      2: [{ nom: 'le-manchot', pose: 'marge-g', ecart: '40px', bottom: '18%', w: 132 }],
-      3: [{ nom: 'canard-en-plastique', pose: 'perche', right: '8%', w: 80 }],
+      // 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 }],
     },
   },
   'authentification-wot': {
@@ -455,7 +456,8 @@ const OISEAUX_PAGE: Record<string, OiseauxPage> = {
   'cloud-libre': {
     projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
     sections: {
-      1: [{ nom: 'admin-reseau', pose: 'marge-g', ecart: '44px', bottom: '40%', w: 124 }],
+      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 }],
     },
   },
 }

app/pages/numerique/index.vue

@@ -2,7 +2,11 @@
   <div class="axis-scope axis-scope--num oiseaux-scene relative overflow-hidden section-padding">
     <div class="container-content">
       <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="droneuse" pose="perche" right="-6px" bottom="0px" :w="72" mobile-seul />
+        </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" />
@@ -93,16 +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)
   'logiciel-libre': [
-    { nom: 'codeuse', pose: 'perche', right: '4px', w: 88, retourne: true },
+    { nom: 'codeuse', pose: 'marge-d', ecart: '40px', bottom: '34%', w: 112, retourne: true },
   ],
   'authentification-wot': [
-    { nom: 'cryptographe', pose: 'perche', right: '18%', w: 76 },
+    { nom: 'cryptographe', pose: 'marge-g', ecart: '52px', bottom: '22%', w: 96 },
   ],
   'cloud-libre': [
     { nom: 'admin-reseau', pose: 'marge-d', ecart: '36px', bottom: '28%', w: 118, retourne: true },
-    { nom: 'admin-reseau', pose: 'perche', right: '6px', w: 76, retourne: true, mobileSeul: true },
-    { nom: 'porteur-de-serveur', pose: 'derriere', left: '-150px', bottom: '-40px', w: 240 },
   ],
 }
 const { data: site } = await useSiteContent()

app/utils/oiseauPose.ts

@@ -11,7 +11,7 @@ export interface OiseauPlace {
   retourne?: boolean
   mobile?: boolean
   mobileSeul?: boolean
-  seuil?: 768 | 1200
+  seuil?: 768 | 1024 | 1200
   ton?: 'primary' | 'accent'
   op?: number
 }