librodrome/docs/consignes-yvv.md

# Consignes d'Yvv — design du site

Ce fichier rassemble les consignes qu'Yvv donne en conversation, avec leur date. Les consignes
entre guillemets sont recopiées mot pour mot ; les autres le disent. Elles l'emportent sur les choix
d'interprétation des sessions.

Pourquoi ce fichier : la graduation de la console, donnée le 29/09, s'est perdue avec le transcript
où elle était écrite. Une consigne qui ne vit que dans une conversation finit par disparaître.

## Accueil — la console des trois curseurs

Code : `app/components/home/HomeConsole.vue`. Libellés : `site/pages/home.yml > console`.

### 29/09/2026

Le transcript a été effacé. Ces quatre consignes sont reconstituées d'après le commit `201cfbb` et le
relais de la session orch le 03/11 : ce ne sont pas les mots d'Yvv.

- l'axe de la console a Asservissement en bas et Émancipation en haut ;
- une animation où les curseurs bougent lentement, pour qu'on ne croie pas devoir les manipuler ;
- « AUTONOMIE » devant les légendes des curseurs ;
- « Autonomie numérique, économique, citoyenne » et « Code source, création monétaire, décision »
  mis en valeur.

### 03/11/2026, vers 03h58 (à la session orch)

Mot pour mot, d'après `~/harness/etat/reponses-yvv.md` :

> « Et retrouve les consignes, comme par exemple celles pour l'animation (curseurs qui montent au
> rollover et ne fait pas descendre les autres, je t'avais donné une graduation). »

### 03/11/2026, entre 05h40 et 05h45 (relayée mot pour mot par la session orch)

> « Je t'avais dit déjà tout ça. Au rollover, numérique monte à 3/4, économie monte à 1/2, citoyenne
> monte à 2/3. Les curseurs restent. Si on rollover à nouveau ils refont leur montée. Et le pavé
> correspondant s'affiche bien sûr au même rollover. »

Ce que fait le code :
- Un survol à la souris, un focus au clavier ou un tap sur un curseur arrête pour de bon la rotation
  automatique.
- Le curseur touché repart d'en bas et monte en 1,1 s à son cran : numérique 0,75, économique 0,50,
  citoyenne 0,667. Il y reste.
- Le panneau de l'axe s'affiche au même geste.
- Les autres curseurs ne bougent pas. Un curseur jamais touché reste là où il était.
- Un nouveau survol rejoue la montée.
- Avant tout geste, l'animation du 29/09 continue : la rotation et la dérive des curseurs bas. L'axe
  mis en avant monte à son cran, et non plus vers 0,9. C'est une décision d'orch du 03/11 à 05h51, qui
  découle de la graduation : l'animation et la main donnent les mêmes niveaux.
- Sous `prefers-reduced-motion`, il n'y a aucune transition, mais les crans sont les mêmes.
- Un défilement au doigt qui part d'un curseur ne compte pas comme un survol.

## Les oiseaux (identité du studio DA)

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

### 03/11/2026, 05h08 (relayée mot pour mot par la session orch)

> « fais un effort sur le positionnement des oiseaux, là ils sont en colonne, c'est trop régulier,
> trop papier peint, fais mieux que ça, peuple le fond intelligemment par rapport aux contenus, varie
> les tailles et les emplacements »

### 03/11/2026, vers 05h45 (réponses au formulaire, relayées par la session orch)

- « Posés sans flotter » : un oiseau posé sur une arête est immobile sur sa ligne de sol. Seul l'oiseau
  de fond, derrière une carte, peut garder un léger mouvement.
- « Un oiseau par page » sous 768 px.
- « Les 61 tout de suite » : les places du plan, plus les oiseaux restants sur les sous-pages.
- Pour le kit : « Oui, à intégrer » (au formulaire du studio DA).

Ce que fait le code :
- Chaque oiseau est accroché au bloc dont il fait le métier, et se tient sur une vraie arête :
  - perché sur le haut d'une carte ;
  - près d'un titre ;
  - en marge, à côté de son bloc ;
  - derrière une carte, en grand et pâle.
- Jamais deux fois le même oiseau sur une page.
- Entre 768 et 1199 px, seuls les oiseaux perchés restent.
- Sous 768 px, au plus un oiseau par 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.