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;