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/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" />