identité 5 : la liste fermée des règles mesurées, appliquée à toutes les pages

Ordre IDENTITE-DA-5 (03/11 14h41, relayé par la session orch ; seuils confirmés par DA) :
- docs/da-oiseaux.md : « Règles mesurées (liste fermée) », règles a à i avec leurs seuils, telles
  que le contrôle les mesure (pixels peints, ligne de base), et la phrase juste sur l'acrobate ;
- UiOiseauPose : pose `bout`, une ancre sans taille dans le texte, sur sa ligne de base, pour un
  oiseau au bout (ou au début) d'un titre ;
- au bout de leur titre : trapéziste, clown, marionnettiste, DJ (/en-musique), droneuse, vigie,
  alchimiste, relieur, et l'oiseau de l'intitulé au téléphone ;
- authentification : le pompeur de Ğ1 perché sur la carte du projet (plus de colonne en marge) ;
- accueil : l'accordéoniste au bout du titre du format (plus de paire avec la lectrice, plus de
  trait sur le lien) ;
- soudeuse sur la ligne de base de son titre ; administrateur réseau et cartographe sortent par le
  côté de leur carte, pas par un coin.

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

app/components/home/HomeFormat.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="format">
     <header v-if="format && showHeader" class="format-head">
-      <h2 class="format-title">{{ format.title }}</h2>
+      <!-- The accordion player at the end of the title, on its baseline: on the event card it stood
+           at the height of the reader, and its ground line touched the card's link (rules c, h) -->
+      <h2 class="format-title">{{ format.title }}<UiOiseauPose nom="accordeoniste" pose="perche" bout left="16px" :w="84" retourne ton="accent" :seuil="1024" /></h2>
       <p class="format-text">{{ format.text }}</p>
     </header>
 
@@ -43,9 +45,6 @@
 
       <!-- Événementiel -->
       <NuxtLink v-if="evenement" :to="evenement.to" class="format-card format-card--event">
-        <!-- 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/ui/OiseauPose.vue

@@ -12,6 +12,11 @@
 //             that creates none itself (no z-index, transform, opacity, filter).
 //   libre     placed only by left / right / top / bottom (an empty area next to its block)
 //
+// `bout`: a perched bird at the end (or the start) of a line of a title. The component is then a
+// zero-size anchor in the text, at its baseline, written right after the text (the gap is `left`,
+// 12 px by default) or right before it (the gap is `right`): the bird follows the end of the text
+// at every width, wherever the line breaks (rule e, docs/da-oiseaux.md).
+//
 // 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, 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
@@ -48,6 +53,8 @@ const props = withDefaults(defineProps<{
   seuil?: 768 | 1024 | 1200
   ton?: 'primary' | 'accent'
   op?: number
+  /** At the end (or the start) of a line of text: written in the text, without a space */
+  bout?: boolean
 }>(), { pose: 'perche', w: 80, ecart: '2.5rem', ton: 'primary' })
 
 /** These two write and compose from left to right: never mirrored */
@@ -57,7 +64,8 @@ const sol = computed(() => OISEAUX[props.nom]?.sol ?? 5)
 
 const style = computed(() => {
   const s: Record<string, string> = { 'width': `${Math.max(72, props.w)}px`, '--sol': `${sol.value}%` }
-  if (props.pose === 'perche') s.bottom = '100%'
+  if (props.pose === 'perche') s.bottom = props.bout ? '0px' : '100%'
+  if (props.bout && props.left === undefined && props.right === undefined) s.left = '12px'
   if (props.pose === 'marge-g') s.right = `calc(100% + ${props.ecart})`
   if (props.pose === 'marge-d') s.left = `calc(100% + ${props.ecart})`
   if (props.pose === 'marge-g' || props.pose === 'marge-d') s.bottom = '0px'
@@ -83,10 +91,20 @@ const classes = computed(() => [
 </script>
 
 <template>
-  <UiOiseau :nom="nom" :class="classes" :style="style" :data-oiseau="nom" :data-pose="pose" />
+  <span v-if="bout" class="oiseau-bout"><UiOiseau :nom="nom" :class="classes" :style="style" :data-oiseau="nom" :data-pose="pose" /></span>
+  <UiOiseau v-else :nom="nom" :class="classes" :style="style" :data-oiseau="nom" :data-pose="pose" />
 </template>
 
 <style scoped>
+/* The anchor of a bird at the end of a line: no size, on the text's baseline */
+.oiseau-bout {
+  position: relative;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: baseline;
+}
+
 .oiseau-pose {
   position: absolute;
   z-index: 1;