librodrome/docs/da-oiseaux.md

# Oiseaux — avis du studio DA et des relectures

Ce fichier garde les avis du studio DA et des relectures sur la place des oiseaux, relayés par la
session orch. Ce ne sont pas les mots d'Yvv : ses consignes, datées et mot pour mot, sont dans
`docs/consignes-yvv.md` (section « Les oiseaux »).

Code : `app/components/ui/OiseauPose.vue` (placement), `app/components/ui/Oiseau.vue` et
`app/utils/oiseaux.ts` (kit du studio DA). Les places sont dans chaque page.

### 03/11/2026, 07h00 : avis du studio DA (relayé par la session orch, ce ne sont pas les mots d'Yvv)

« kit : ok », avec trois constats de composition :
- trop d'oiseaux autour du seul bloc de productions-collectives ;
- des perchés qui mordent sur la carte du dessus (numérique) ;
- l'un d'eux mord aussi sur le coin d'une carte à 375 px.

La règle de DA, pour toutes les pages : un oiseau perché n'a sa place que s'il y a, au-dessus de
l'arête, un vide au moins égal à sa hauteur. Sinon, il va en marge ou derrière la carte.

La relecture du même jour ajoute : pas trois oiseaux sur la même verticale dans une marge.

Ce que fait le code depuis :
- Aucun oiseau perché entre deux cartes rapprochées. Ceux qui y étaient sont passés en marge ou
  derrière la carte.
- Au téléphone, l'oiseau de la page se tient au bout de la ligne de l'intitulé, au-dessus du titre.
- Un perché dont le bloc n'a de vide au-dessus qu'une fois la grille en deux colonnes ne s'affiche
  qu'à partir de 1024 px (`seuil`).
- Productions-collectives garde 4 oiseaux. Les autres sont partis sur des pages qui en avaient peu :
  - monnaie-libre : boulangère, vigneronne ;
  - tarifs-eau : potier ;
  - décision : tisserand ;
  - cloud-libre : imprimeuse 3D.
- Toujours les 61 oiseaux rendus sur le site.

### 03/11/2026, 07h56 : second avis du studio DA, et relecture de 08h14 (relayés par la session orch)

DA : « composition : à reprendre (numérique et commande seulement) ».
- Numérique : les 4 oiseaux de marge font un zigzag gauche, droite, gauche, droite, à pas égal et
  de même taille. C'est le « trop régulier, papier peint » d'Yvv sous une autre forme.
- Commande : chaque carte a un oiseau à gauche et un à droite, à la même hauteur.

Deux règles de DA en découlent :
- pas plus de deux alternances gauche-droite de suite à pas presque égal (moins de 20 % d'écart) ;
- dès qu'une page a trois oiseaux ou plus, au moins deux tailles différentes.

La relecture ajoute qu'un oiseau ne se pose pas sur le haut de la boîte d'un titre : ce n'est pas
une arête visible. Un oiseau de marge ne se tient pas non plus à mi-hauteur du texte.

Ce que fait le code depuis :
- Un oiseau de marge a les pieds sur une vraie ligne : le bas ou le haut de son bloc, ou d'une carte
  de ce bloc. C'est la consigne d'Yvv « posés sans flotter ».
- Un oiseau près d'un titre se tient sur sa dernière ligne, ou au bout de la ligne de l'intitulé.
- Numérique : électricien en M, codeuse et cryptographe au bas de leur carte, à droite,
  administrateur réseau en grand derrière Cloud libre.
- Commande : un seul côté par carte. Le cycliste est à gauche de la première, le libraire en grand
  derrière la seconde, à droite. La lectrice se tient sur le sac de l'icône. Le cartonnier est parti
  sur la ligne qui clôt chaque chapitre, l'empileur sur le sommaire du livre.

### 03/11/2026, 13h10 : relecture (relayée par la session orch, ce ne sont pas les mots d'Yvv)

La relecture de fb8c71f à 16d6607 conclut « à reprendre », avec cinq constats :
- /economique : la maraîchère et la balance font une paire, aux sols presque à la même hauteur ;
- /numerique/authentification-wot : la toile de confiance est « derrière » un bloc sans fond, et du
  texte la traverse ;
- les chapitres : le cartonnier est posé sur un filet que rien ne trace ;
- /evenement : le régisseur et l'acrobate font une paire ;
- le sommaire du livre : trois oiseaux dans une même bande de la marge droite.

Trois règles en découlent :
- pas deux oiseaux de part et d'autre dont les sols sont à moins de 40 px l'un de l'autre ;
- une ligne visible, c'est une bordure, un fond différent de ce qu'il y a dessous, le bas d'une
  carte qui a un fond, ou une ligne de texte ;
- « derrière une carte » demande une carte au fond opaque.

Ce que fait le code depuis :
- /economique : la balance sort de derrière le bloc du livre, à gauche, à mi-hauteur.
- 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 sur la ligne
  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. Un oiseau « libre »
  dont le centre sort de son bloc est donc un oiseau de marge. Un oiseau derrière une carte reste
  « derrière », même si son centre sort de la carte : son sol est le bas de ce qui se voit de lui
  (décisions d'orch, 03/11 après 17h58).

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. Cela vaut
  pour un oiseau « libre » dont le centre sort de son bloc (orch, 03/11 après 17h58).
  - 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 l'oiseau, un
  vide au moins égal à sa hauteur. Il se mesure du haut de son dessin à la plus basse des lignes de
  texte ou des blocs dont la boîte passe au-dessus de sa largeur peinte (précision de DA, 03/11
  après 17h35 : l'oiseau ne tient pas seulement dans le vide, il en garde autant au-dessus de lui).
  Les lignes du titre où il se tient comptent aussi, celles au-dessus de sa ligne. En haut de page,
  l'en-tête collant compte parmi ces blocs.
- g. Derrière : la part de l'oiseau qui est dans son bloc est couverte par un fond opaque (opacité
  du fond ≥ 0,9). « Dans son bloc » s'entend du rectangle du bloc : aucun pixel peint ne reste à
  découvert dans ce rectangle, découpe d'un coin arrondi comprise (décision d'orch, 03/11 après
  17h58).
- 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).

Ce que la liste a changé (03/11, après bb8fad9 ; la règle f mesurée au-dessus du dessin) :
- Accueil :
  - le DJ se tient derrière le pupitre de la console, comme derrière ses platines : seule sa tête
    dépasse. Perché sur le pupitre, sous l'en-tête, il n'avait pas sa hauteur de vide au-dessus ;
  - l'accordéoniste passe en S (72 px), à partir de 1200 px, 8 px sous la ligne de base ;
  - la factrice passe à 76 px ;
  - la lectrice ne sort plus de derrière la carte du livre. Descendue de 20 px, loin de la fin de
    la première ligne du chapeau (DA, 03/11), elle ne montrait plus que sa bulle. Ni la marge de
    page ni la gouttière ne la laissent sortir par le côté (DA, 03/11 après 19h : « Je ne veux pas
    d'un oiseau réduit à un morceau »). Elle reste sur la page commande.
- Au téléphone, l'oiseau de l'intitulé est un oiseau plat, l'en-tête collant laissant 93 px :
  codeuse (/numerique), maraîchère (/economique), potier (/citoyenne). Sur productions
  collectives, le cycliste livreur remplace le menuisier sous 768 px.
- Authentification : le pompeur de Ğ1 passe en marge droite, les pieds sur l'arête haute de la
  carte du projet. Perché sur la carte, il n'avait que 11 px de vide au-dessus de sa tête (DA).
- Tarifs de l'eau : le comédien, de même, en marge droite sur l'arête haute de la carte.
- Commande : la lectrice quitte le sac, sous l'en-tête, pour la marge droite, sur l'arête haute de
  la première carte.
- /en-musique : le danseur passe en S (80 px).
- /evenement :
  - l'acrobate se tient avant la devise, plus étroite que le leitmotiv ;
  - le régisseur passe en S, les pieds sur l'arête des cartes ;
  - le clown passe en M (108 px), pour deux tailles entre 768 et 1199 px ;
  - le marionnettiste se perche sur le filet du pied de page, à partir de 1200 px : sous
    « Espaces & programme », il n'y a pas la place, et chaque rangée de cartes ne porte qu'un
    oiseau. C'est le seul oiseau de la page hors de son bloc (orch, option 1, 03/11). Son décalage
    vient du bloc du sceau du layout (`--seal-block`), et le contrôle vérifie qu'il est sur le filet.
- Chapitres : le calligraphe se tient sur le filet du titre, le typographe sur le filet de la
  navigation, tous deux dans la marge gauche ; le cartonnier, en marge droite, au pied des boutons
  PDF et chansons. Ils n'ont plus de hauteur en %.
- Porteur de serveur (authentification, cloud libre) et administrateur réseau (cloud libre) :
  décalés hors de la découpe du coin arrondi de leur carte.