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;

app/pages/citoyenne/index.vue

@@ -3,13 +3,12 @@
     <div class="container-content">
       <header class="mb-12 text-center">
         <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, on its baseline -->
-          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
+          {{ content?.kicker }}<UiOiseauPose nom="vigie" pose="perche" bout :w="72" retourne mobile-seul />
-          <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 }}
+          <!-- At the end of the title, on its baseline (rule e, docs/da-oiseaux.md) -->
-          <UiOiseauPose nom="vigie" pose="perche" left="calc(66% - 48px)" bottom="-6px" :w="96" retourne :seuil="1200" />
+          {{ content?.title }}<UiOiseauPose nom="vigie" pose="perche" bout left="16px" :w="96" retourne :seuil="1200" />
         </h1>
         <p class="mt-4 mx-auto max-w-2xl leading-relaxed" style="color: hsl(var(--color-text-muted))">
           {{ content?.description }}
@@ -48,7 +47,9 @@
         <!-- Tarifs de l'eau -->
         <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" />
+        <!-- Out by the side of the card, not by its corners: the card is a link (rule h); its feet
+             46 px above the card's bottom, where the captain stands on the other side (rule c) -->
+        <UiOiseauPose nom="cartographe" pose="derriere" left="calc(100% - 100px)" bottom="46px" :w="210" />
         <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" />

app/pages/economique/commande.vue

@@ -9,9 +9,8 @@
         </div>
 
         <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, on its baseline -->
-          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
+          {{ content?.kicker }}<UiOiseauPose nom="lectrice" pose="perche" bout :w="84" retourne mobile-seul />
-          <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))">

app/pages/economique/index.vue

@@ -4,9 +4,8 @@
       <!-- Header -->
       <header class="mb-12 text-center">
         <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, on its baseline -->
-          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
+          {{ content?.kicker }}<UiOiseauPose nom="pompeur-de-g1" pose="perche" bout :w="72" retourne mobile-seul />
-          <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 }}

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

@@ -11,13 +11,12 @@
 
       <header class="mb-10 text-center">
         <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, on its baseline -->
-          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
+          {{ content?.kicker }}<UiOiseauPose nom="relieur" pose="perche" bout :w="72" mobile-seul />
-          <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 }}
+          <!-- Before the title, on its baseline (rule e, docs/da-oiseaux.md) -->
-          <UiOiseauPose nom="relieur" pose="perche" left="calc(24% - 54px)" bottom="-4px" :w="108" :seuil="1200" />
+          <UiOiseauPose nom="relieur" pose="perche" bout right="16px" :w="108" :seuil="1200" />{{ content?.title }}
         </h1>
         <p class="mt-3 mx-auto max-w-2xl text-sm" style="color: hsl(var(--color-text-muted))">
           {{ content?.description }}

app/pages/economique/productions-collectives.vue

@@ -13,7 +13,8 @@
         <!-- The workshop: each trade of the collective productions around the page -->
         <h1 class="relative font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
           {{ content?.title }}
-          <UiOiseauPose nom="soudeuse" pose="marge-d" ecart="30px" bottom="-6px" :w="112" retourne />
+          <!-- In the margin, feet on the title's baseline (rule e) -->
+          <UiOiseauPose nom="soudeuse" pose="marge-d" ecart="30px" bottom="4px" :w="112" retourne />
         </h1>
 
         <p class="relative text-lg leading-relaxed mb-8 text-center" style="color: hsl(var(--color-text-muted))">

app/pages/en-musique/index.vue

@@ -17,9 +17,9 @@
 
         <div class="text-center md:text-left">
           <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, on its baseline: the title's box has no visible
-            <!-- The DJ stands at the end of this line: the title's box has no visible top edge -->
+                 top edge (rule e) -->
-            <UiOiseauPose nom="dj" pose="perche" right="0px" bottom="0px" :w="84" retourne ton="accent" :seuil="1200" />
+            {{ content?.kicker }}<UiOiseauPose nom="dj" pose="perche" bout left="14px" :w="84" retourne ton="accent" :seuil="1200" />
           </p>
           <h1 class="page-title relative font-display font-bold tracking-tight text-white">
             {{ content?.title }}

app/pages/evenement.vue

@@ -11,8 +11,8 @@
 
       <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 }}
+        <!-- The trapeze artist at the end of the title, on its baseline (rule e, docs/da-oiseaux.md) -->
-        <UiOiseauPose nom="trapeziste" pose="perche" left="calc(80% - 48px)" bottom="-6px" :w="96" ton="accent" :seuil="1200" />
+        {{ content?.title }}<UiOiseauPose nom="trapeziste" pose="perche" bout left="16px" :w="96" ton="accent" :seuil="1200" />
       </h1>
       <p v-if="evtContent?.format" class="evt-format font-display">
         {{ evtContent.format }}
@@ -50,8 +50,8 @@
       <!-- 3 axes -->
       <div v-if="evtContent?.axes">
         <h2 class="evt-section-title relative">
-          Trois axes d'émancipation
+          <!-- The section birds stand at the end of their title, on its baseline (rule e) -->
-          <UiOiseauPose nom="clown" pose="perche" right="3%" bottom="0px" :w="84" retourne ton="accent" />
+          Trois axes d'émancipation<UiOiseauPose nom="clown" pose="perche" bout left="14px" :w="84" retourne ton="accent" />
         </h2>
         <p class="evt-section-sub">« je subis — ou je m'affranchis »</p>
         <div class="axes-grid">
@@ -76,8 +76,7 @@
       <!-- Espaces permanents -->
       <div v-if="evtContent?.espaces">
         <h2 class="evt-section-title relative">
-          Espaces & programme
+          Espaces & programme<UiOiseauPose nom="marionnettiste" pose="perche" bout left="14px" :w="112" 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

@@ -18,8 +18,8 @@
               {{ content?.kicker }}
             </span>
             <h1 class="page-title relative font-display font-bold text-white">
-              {{ content?.title }}
+              <!-- The alchemist at the end of the title, on its baseline (rule e) -->
-              <UiOiseauPose nom="alchimiste" pose="perche" right="72px" bottom="-4px" :w="98" retourne />
+              {{ content?.title }}<UiOiseauPose nom="alchimiste" pose="perche" bout left="16px" :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

@@ -447,14 +447,18 @@ const OISEAUX_PAGE: Record<string, OiseauxPage> = {
     },
   },
   'authentification-wot': {
-    projet: [{ nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 }],
+    projet: [
+      { nom: 'porteur-de-serveur', pose: 'derriere', left: '-130px', bottom: '-30px', w: 210 },
+      // the Ğ1 pump (Duniter) perched on the project card: 74 px of void above it at every width,
+      // and the left margin keeps no column of three (rule d)
+      { nom: 'pompeur-de-g1', pose: 'perche', right: '14px', w: 96 },
+    ],
     sections: {
       // the steps have no background: in the margin, on their last line, small and close to the
       // text, out of the band shared by the server carrier and the pump
       1: [{ nom: 'toile-de-confiance', pose: 'marge-g', ecart: '24px', bottom: '16px', w: 76 }],
       // 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': {

app/pages/numerique/index.vue

@@ -3,13 +3,12 @@
     <div class="container-content">
       <header class="mb-12 text-center">
         <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, on its baseline -->
-          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
+          {{ content?.kicker }}<UiOiseauPose nom="droneuse" pose="perche" bout :w="72" mobile-seul />
-          <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 }}
+          <!-- At the end of the title, on its baseline (rule e, docs/da-oiseaux.md) -->
-          <UiOiseauPose nom="droneuse" pose="perche" left="calc(68% - 38px)" bottom="-4px" :w="76" :seuil="1200" />
+          {{ content?.title }}<UiOiseauPose nom="droneuse" pose="perche" bout left="16px" :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 }}
@@ -107,7 +106,9 @@ const OISEAUX_PILIER: Record<string, OiseauPlace[]> = {
     { nom: 'cryptographe', pose: 'marge-d', ecart: '64px', w: 112, retourne: true },
   ],
   'cloud-libre': [
-    { nom: 'admin-reseau', pose: 'derriere', left: '-150px', bottom: '-40px', w: 236 },
+    // out by the side of the card, not by its corner: the card is a link, and its rounded corner
+    // let 5 px of the drawing show on it (rule h)
+    { nom: 'admin-reseau', pose: 'derriere', left: '-150px', bottom: '20px', w: 236 },
   ],
 }
 const { data: site } = await useSiteContent()

app/utils/oiseauPose.ts

@@ -14,4 +14,5 @@ export interface OiseauPlace {
   seuil?: 768 | 1024 | 1200
   ton?: 'primary' | 'accent'
   op?: number
+  bout?: boolean
 }

docs/da-oiseaux.md

@@ -77,9 +77,82 @@ Ce que fait le code depuis :
 - Authentification : la toile de confiance est petite, en marge, sur la dernière ligne des étapes.
 - Logiciel libre : le débogueur se tient aussi sur la dernière ligne des étapes.
 - Chapitres : le filet au-dessus de précédent et suivant est tracé ; le cartonnier s'y pose.
-- /evenement : le régisseur reste seul près de « Format & lieu ». L'acrobate se tient au bout de la
+- /evenement : le régisseur reste seul près de « Format & lieu ». L'acrobate se tient sur la ligne
-  ligne du leitmotiv, dans l'en-tête.
+  du leitmotiv, dans l'en-tête, avant le texte, à gauche.
 - Sommaire du livre : l'empileur est plus loin dans la marge, l'illustratrice dépasse moins de sa
   carte.
 - Monnaie libre : la vigneronne sort de derrière le haut du bloc de texte, qui a un fond.
 
+## Règles mesurées (liste fermée, 03/11 à 14h41)
+
+Liste fixée par la session orch le 03/11 à 14h41, seuils confirmés par DA le 03/11. Ce ne sont pas
+les mots d'Yvv. Une composition qui tient ces règles est finie : on n'en ajoute pas d'autre.
+
+Comment on mesure :
+- Largeurs : 375 px, de 376 à 767 px par pas de 16, de 768 à 1600 px par pas de 8.
+- Un oiseau compte quand il est affiché.
+- Ses pixels peints : son dessin (le SVG du kit) rendu à sa taille et retourné s'il est en miroir.
+  Un pixel compte s'il a au moins 32/255 d'opacité. Pour un oiseau derrière une carte, on retire
+  les pixels cachés par un fond opaque, coins arrondis compris.
+- Son sol : la ligne de sol du dessin (`sol` du kit, en % de la hauteur depuis le bas). Pour un
+  oiseau derrière une carte qui en cache les pieds, le bas de ce qui se voit de lui.
+- Une ligne de texte se mesure à sa ligne de base, d'après les métriques de sa police.
+- Côté : gauche ou droite du milieu de la fenêtre, selon le centre de l'oiseau.
+- Oiseau de marge : posé en marge, ou dont le centre est hors de son bloc.
+
+Les règles :
+- a. Tailles : S sous 100 px de large, M de 100 à 179 px, L à partir de 180 px. Dès que trois
+  oiseaux sont visibles, au moins deux tailles.
+- b. Zigzag : pas trois alternances gauche-droite de suite (de haut en bas) quand chaque pas est à
+  moins de 20 % du pas moyen.
+- c. Paire : deux oiseaux de part et d'autre du milieu n'ont pas leurs sols à moins de 40 px l'un
+  de l'autre. Où qu'ils soient, deux sols ne sont jamais à moins de 12 px.
+- d. Colonne : trois oiseaux de marge du même côté ne partagent aucune bande verticale de plus de
+  12 px, mesurée sur leurs dessins.
+- e. Sol : un oiseau de marge ou perché a son sol à 12 px au plus d'une ligne visible.
+  - Ligne visible : une bordure non nulle, un fond différent de celui du dessous (le bas d'une
+    carte qui a un fond, le haut du bloc sur lequel il se tient, une image), ou une ligne de texte
+    de son bloc.
+  - Un oiseau « au bout du titre » est à 48 px au plus de la fin du texte de cette ligne (ou de
+    son début s'il se tient avant), et son sol à 12 px au plus de la ligne de base du titre.
+  - Au-delà, il relève d'une autre règle : la marge ; perché sur le bloc d'en dessous, le sol à
+    12 px au plus de son arête haute ; ou derrière une carte.
+- f. Perché : jamais sur la moitié haute d'un titre ou d'un paragraphe. Au-dessus de son sol, un
+  vide au moins égal à sa hauteur.
+- g. Derrière : la part de l'oiseau qui est dans son bloc est couverte par un fond opaque (opacité
+  du fond ≥ 0,9).
+- h. Aucun pixel peint sur un texte ou un lien, trait de sol compris.
+- i. Sous 768 px, au plus un oiseau par page. Les 61 oiseaux visibles au moins une fois à 1440 px.
+  Jamais deux fois le même sur une page. Aucun sous 72 px de large.
+
+Hors liste, le contrôle garde les règles techniques du kit :
+- aucun oiseau rogné ;
+- aucun oiseau hors de la page ;
+- les opacités ;
+- jamais de miroir pour le calligraphe et le typographe ;
+- ni dégradé ni filtre ;
+- aucun débordement de la page ou de l'en-tête ;
+- un oiseau ne mord pas sur un bloc plein ;
+- aucune erreur console.
+
+Code : `app/components/ui/OiseauPose.vue`. La pose `bout` sert à l'oiseau au bout d'un titre : une
+ancre sans taille dans le texte, sur sa ligne de base.
+
+Ce que la liste a changé (03/11, après b6143c5) :
+- Les oiseaux près d'un titre se tiennent au bout de sa ligne, sur sa ligne de base (pose `bout`) :
+  - trapéziste, clown et marionnettiste (/evenement) ;
+  - DJ (/en-musique) ;
+  - droneuse (/numerique) ;
+  - vigie (/citoyenne) ;
+  - alchimiste (/gratewizard) ;
+  - relieur (/economique/modele-eco), avant le titre ;
+  - l'oiseau de l'intitulé au téléphone sur chaque page.
+- Accueil : l'accordéoniste passe au bout du titre « Le librodrome est une invitation ». Sur la
+  carte de l'événement, il se tenait à la hauteur de la lectrice et son trait de sol touchait le
+  lien.
+- Authentification : le pompeur de Ğ1 est perché sur la carte du projet. Il y a 74 px de vide
+  au-dessus, à toutes les largeurs.
+- Productions collectives : la soudeuse a les pieds sur la ligne de base du titre.
+- /numerique et /citoyenne : l'administrateur réseau et le cartographe sortent par le côté de leur
+  carte, plus par un coin (la carte est un lien).
+