# M/ — Système de mouvement, version 0.39

Un système réutilisable issu du portfolio de Mateo. Exemple vivant : systeme.html. Le but est de construire une expérience singulière autour d'un sujet, avec une hiérarchie précise et des interactions utiles.

## Kit actuel — 0.39

La galerie `components.html` est générée depuis les sections actuelles du portfolio. Dans le ZIP, elle devient `index.html`. Les styles, modules interactifs, médias d’exemple et polices nécessaires l’accompagnent. `kit-manifest.json` consigne leurs empreintes SHA-256.

Démarrer un serveur HTTP local dans le dossier extrait, par exemple `python -m http.server 8080 --bind 127.0.0.1`, puis ouvrir http://127.0.0.1:8080. Aucune installation npm n’est requise pour consulter le kit. Le réemploi demande de remplacer textes, médias, liens et email.

Le moteur de jeu, la scène glTF, les modèles et le son ne font pas partie du paquet. Leurs descriptions plus bas documentent l’histoire et les principes du portfolio, pas des dépendances promises dans le ZIP. Les sources spécifiques à la 3D restent dans le dépôt du site.

Pour régénérer la galerie et le ZIP dans le dépôt : `python scripts/build-kit.py` (Python 3, bibliothèque standard). Les téléchargements CSS/HTML isolés ne remplacent pas l’archive complète.


## Traversée immersive — règle actuelle 0.39

La sélection se traverse dans une scène fixe : titres, documents et plans changent de profondeur et pivotent au défilement natif. Chaque projet dispose d'un temps de lecture avant la transition. La commande « Écarter les plans » ouvre sa composition manuellement ; les quatre liens supérieurs permettent l'accès direct.

Charger `project-flight.css` après les autres styles du portfolio et `project-flight.js` après `reader.js`. Le module enrichit les quatre articles `.scene-project` de `#projets`, en déplaçant leurs nœuds originaux. Il attend quatre projets, des identifiants uniques, un `.project-index` et les structures documentées dans la galerie. Les images et lecteurs existants conservent leurs événements.

Le parcours utilise 450 hauteurs de fenêtre, sans intercepter la molette. Une seule scène est active pour le clavier ; les autres sont inertes. Le lecteur suspend la mise à jour de la traversée. La géométrie revient après fermeture et le focus retrouve sa commande.

« Vue liste » rend immédiatement les quatre articles au document. Cette présentation complète sert aussi au mode réduit et aux fenêtres de moins de 650 px de hauteur. Sans JavaScript, les articles d'origine restent disponibles. Les amplitudes et cadrages s'adaptent aux écrans étroits. Vérifier la tablette autant que le téléphone ; un grand média ne doit pas recouvrir les commandes.

Les photos restent des preuves à agrandir. Le visuel mécano porte son statut de concept ; les couches animées sont une interprétation visuelle des documents, pas un logiciel AR fonctionnel. L'expérience ne demande ni nouvel actif WebGL ni service tiers.

À valider au réemploi : accès direct aux quatre projets, scroll dans les deux sens, liste et retour à la scène, focus, dossiers sans changement de hauteur, fenêtres courtes, largeur 320 px et tablette. Des contrôles techniques réussis ne certifient pas une qualité artistique.

## Atelier ouvert — historique 0.38

Les projets sont des scènes documentaires distinctes : application et parcours pour Papyrus, concept AR pour le mécano, diptyque photo/signal en Ligurie, panorama du jeu. Le nom du projet, sa nature, la contribution et les actions doivent être lisibles hors des plans animés. Une grande image n’autorise ni à inventer une preuve ni à couper une annotation utile.

Le scroll natif ouvre progressivement les plans de lecture. Il doit exister une position de repos lisible avant l’action. Les contrôles ne bougent pas au survol ; le mouvement de la page se suspend lorsqu’un lecteur est ouvert. Les scènes ne requièrent ni défilement forcé ni délai pour accéder à un projet.

Au réemploi, choisir une composition adaptée à chaque preuve, pas un même gabarit repeint. Les références artistiques et critères détaillés sont consignés dans la passation du projet. Le kit fournit les composants réalisés, sans garantir un résultat artistique pour n’importe quel contenu.

Les introductions sont compactes ; la transition CONSTRUIRE / ÉPROUVER appartient au carnet d’essai. Le ruban de slogans autonome de 0.37 est retiré de la galerie actuelle. Les règles historiques ci-dessous décrivent les étapes précédentes.

## Lecture complémentaire — règle actuelle 0.36

La fiche reste une synthèse : projet, contribution, preuve et action. Une lecture complémentaire s’ouvre dans un panneau `dialog` indépendant. Elle ne pousse ni les voisins, ni la section suivante. Les descriptions historiques des versions précédentes ne prescrivent plus une expansion dans la page.

- Bureau : panneau papier à droite, titre et fermeture fixes, contenu défilant. Mobile : même lecture sur toute la surface, avec une seule zone de défilement pour le dossier.
- Bouton explicite avec flèche ↗ ; les figures portent « Agrandir ». Le fond est bloqué. Échap, Fermer ou le fond extérieur ferment la lecture. Le focus revient au déclencheur et la position du document est conservée.
- Si une image est ouverte depuis un dossier, Retour au dossier (ou Échap) retrouve ce dossier. Un lien vers un autre projet ferme le panneau et rejoint effectivement sa destination.
- Les nœuds originaux sont déplacés temporairement, sans copie des identifiants. Les onglets Papyrus et le brouillon local conservent leur état.
- Le contenu principal et les preuves restent visibles dans la page. Le panneau ne doit pas cacher la proposition du projet ou une information indispensable à la décision.
- Sans JavaScript ou sans prise en charge de `dialog`, les `details/summary` natifs gardent le texte disponible. Ce repli se déplie dans le document ; la stabilité garantie concerne l’interface enrichie.
- Réemploi : charger `reader.css` après les styles des composants et `reader.js` comme module. Donner au `details` les attributs `data-reader-title`, `data-reader-context`, et facultativement `data-reader-kind="demo|contact|text"`. Pour les images : `.evidence-figure > a > img` avec lien vers l’image complète, alt et légende.

Critères : comparer hauteur, scrollY et position des visuels avant/pendant/après ; tester clavier, fermeture, 320/390/1440 px, changement de contenu, préférence de mouvement réduit. Une boîte stable seule ne prouve pas que la page entière reste stable.


## Chorégraphie du défilement — historique 0.37

Le mouvement revient sur les composants actuellement affichés, tout en conservant le lecteur 0.36. Les titres entrent par lignes en directions opposées ; les preuves visuelles entrent légèrement inclinées avant de se poser ; le carnet et la capture du jeu prennent de la perspective. Entre les projets et la démarche, deux lignes typographiques croisent leur course. Les photos des univers dérivent en sens opposés ; les titres des offres glissent latéralement.

`choreography.css` se charge après `portfolio-refinement.css` et `reader.css`. Les amplitudes diminuent sur mobile. Le mode réduit conserve une composition fixe et le contenu visible. La préférence explicite du bouton Animations prime sur le réglage initial du système.

- `data-motion="media"` porte sur la boîte stable `.case-media` ; seule sa figure enfant se transforme. Un visuel garde son image entière. Les actions complémentaires restent dans le flux, hors de cette transformation.
- `data-motion="project-title"` et `.choreography-line > span` font entrer les lignes d’un titre sans animer sa boîte.
- `data-motion="interlude"` pilote les deux `.interlude-row`, décoratives et exclues de l’arbre d’accessibilité pour éviter les répétitions.
- `data-motion="workbench"` porte sur `.story-layout`, pas sur le carnet transformé : la mesure utilise un parent stable. Au focus clavier, le carnet s’aplatit.
- `data-motion="offer"` anime le titre et le trait de chaque offre ; ses liens restent dans leur colonne.

`motion.js` garde le scroll natif, regroupe les lectures puis les écritures dans une frame demandée sur événement. Pas de boucle d’animation permanente ajoutée. Le lecteur ouvert suspend les mises à jour de composition derrière lui. Ne pas faire dépendre la hauteur du document d’une variable de progression.

Validation : comparer les matrices à plusieurs positions, tester les mouvements opposés, le mode réduit, l’absence de débordement mobile et le clic sur une preuve inclinée. Préserver les invariants du lecteur : hauteur, position et retour du focus.

## Brief réutilisable pour une prochaine réalisation
1. Définir le sujet concret, le public, le contenu réel et le geste principal.
2. Choisir une composition dominante : atelier interactif, archive expressive ou récit photographique.
3. Réutiliser la hiérarchie du système et personnaliser l'image, la matière et le mouvement autour du sujet. Ne pas simplement remplacer le nom et l'accent d'un ancien site.
4. Composer une première vue reconnaissable. Faire entrer immédiatement dans l'expérience.
5. Utiliser les mêmes tokens entre l'application et sa page de composants.
6. Vérifier le chargement, le clavier, le tactile, les mouvements réduits, la mise en page mobile et les droits des médias avant livraison. Noter ce qui a réellement été testé.

## Recettes de composition
### Atelier interactif
Un objet + un geste + un mode révélant sa structure. Typographie autour de l'objet, commandes visibles. Les informations importantes existent également dans le HTML. La navigation reste utilisable sans WebGL. Exemples pertinents : mécanique, produit, science, architecture.
### Archive expressive
Une liste de titres numérotés, grands et alignés, accompagnés d'une information concise et d'une direction. Le survol prolonge la lecture ; le focus clavier donne accès au même contenu. Exemples : travaux, collections, réalisations.
### Récit photographique
Une image forte, un titre bref, un changement de rythme au chapitre suivant. Garder l'image comme contenu ; fournir un alt utile et un crédit. Ne pas remplacer les faits par des images générées si le sujet exige des visuels réels.

## Tokens
- Fonds : `--ink`, `--surface`, `--surface-raised`.
- Texte : `--paper`, `--muted`. Accent : `--signal`. Séparation : `--line`.
- Familles : `--font-display` (Barlow Condensed 600), `--font-body` (Manrope), `--font-data` (Courier New).
- Échelle : 8, 16, 24, 32, 48, 64, 96 px ; gouttière fluide 20–72 px.
- Temps : 160 ms réponse, 480 ms transition, 900 ms séquence ; courbe cubic-bezier(.22,1,.36,1).
- Lecture : corps >=16 px, actions >=14 px ; métadonnées secondaires 12 px. Ne pas réduire des informations essentielles au format métadonnée.

## Composants
- `.masthead` : signature et navigation ; `.monogram` : signature typographique.
- `.section-label` + `.data` : chapitre et métadonnées.
- `.universe-row` : index de navigation, avec numéro, titre, description et direction.
- `.view-mode` + `.mode-button` : boutons exclusifs avec aria-pressed, état actif explicite.
- `.explore-link` : action directionnelle ; `.text-link` : lien textuel souligné.
- `.photo-chapter` : photo de contenu, voile pour le texte, légende et titre.
- `.aero-grid` et `.about-grid` : compositions asymétriques ramenées à une colonne sur mobile.
- `.scene` : WebGL en amélioration progressive ; `.scene-fallback` : statut accessible.

## Contrat de mouvement
- Pas de blocage ou de remplacement du scroll natif.
- Rotation 3D modérée, arrêt au premier geste, bouton de pause visible.
- Flèches clavier uniquement quand le canvas a le focus, R pour recentrer.
- Le tactile horizontal fait tourner, le vertical conserve le défilement.
- prefers-reduced-motion : rotation initialement arrêtée, transitions instantanées. Une rotation explicitement lancée reste possible et peut être arrêtée.
- Rendu suspendu hors écran ou onglet caché, densité de pixels plafonnée à 1.5.
- Pas de son automatique, faux compteur, fausse télémétrie, curseur masquant celui du système ou écran de chargement bloquant le contenu.

## Références
[Adveris, sélection 2026](https://www.adveris.fr/sites-internet-innovants-de-l-annee/) a servi de point d'entrée : Ponpon Mania (jeu), Sun Metalon (structure), Ribbit (rythme), Symphony of Vines (immersion), 1X (hiérarchie), Glenn Catteeuw (typographie), Bruno Simon (exploration), Lando Norris (identité), Microsoft AI (matière), Terminal Industries (matière et filaire). Il s'agit de principes tirés de la sélection, pas d'un audit interactif exhaustif des dix sites.

Références principales : https://bruno-simon.com/ ; https://terminal-industries.com/ ; https://glenncatteeuw.com/ . Ne pas copier leurs assets, codes sources ou compositions à l'identique.

## Faire évoluer le système
Choisir des tokens propres à la nouvelle identité, mettre à jour la page système en même temps que le produit, conserver les invariants de navigation et d'accessibilité. La singularité doit venir du sujet, du contenu, de la composition et du geste — une palette seule ne suffit pas.

## Validation
Une vérification syntaxique ou HTTP confirme une intégrité technique, pas une réussite esthétique. La V0.13 demande encore la validation esthétique de Mateo. Les projets sont factuels ; leurs captures et liens publics restent à compléter.

## Version 0.2 — développement web & produits IA
Le portfolio présente maintenant trois cas réels : Papyrus, l'assistant mécano et le stage scientifique en Italie. Le récit exprime le travail réalisé et distingue explicitement l'intention d'un projet de ses résultats attestés.

Patterns supplémentaires dans developer.css :
- `.deconstruct-button` et `.engine-panel` : carrosserie déconstruite autour d’ensembles mécaniques fermés ; exige scene.js, powertrain.js, car-parts.js, roar.js et leurs assets, non inclus dans le kit de base.
- `.featured-project`, `.project-art`, `.project-detail` : présentation d'un cas, détails HTML natifs et statut factuel.
- `.story-workbench`, `.bench-view`, `.story-step` : séquence idée/code/produit ; developer.js lie les étapes au scroll sur bureau et expose des boutons sur mobile.
- `.influence-film` : trois images décalées, ramenées en colonne sur mobile.

### Archive de base
`mouvement-kit.zip` contient un index autonome d'exemples, les feuilles de style communes et atelier.css, le guide et les polices avec leurs licences. Décompresser et ouvrir index.html. Aucun serveur, abonnement, installation ou appel IA n'est nécessaire pour ce kit de base. Les photographies du portfolio, le modèle automobile et la scène Three.js sont exclus de cette archive ; leurs sources et droits restent dans la page Crédits du portfolio.

## Version 0.3 — chorégraphie de scroll et inspection mécanique
- motion.js lit la position des éléments une fois par frame de scroll ; pas de boucle de défilement artificielle.
- data-motion="title" + .kinetic-line : entrée de chaque ligne par masque.
- data-motion="project" : visuel sticky sur bureau, recadrage progressif, parallaxe de photo et progression du schéma.
- data-motion="film" : décalage opposé des images ; amplitude réduite sur mobile.
- Variables réutilisables : --arrival (entrée 0 à 1), --passage (traversée 0 à 1), --drift (pixels), --project-progress (lecture du cas).
- preferences.js respecte le système par défaut et conserve le choix explicite via le bouton .motion-toggle.
- Le V6 importé contient 196 meshes ; 27 forment les pistons, bielles et vilebrequin isolables. Écartement illustratif, sans simulation de fonctionnement ni diagnostic.

### Kit animé autonome
L’archive comprend aussi motion.css et motion-kit.js, regroupement classique de preferences.js et motion.js. Les animations fonctionnent en ouvrant index.html directement ; aucun CDN, module distant ni moteur 3D à installer. Pour un site à modules, utiliser les fichiers sources motion.js et preferences.js. La scène mécanique et les médias restent séparés du kit et crédités dans le portfolio.

## Version 0.4 — déconstruction, composition et son
- atelier.css place le titre, l’introduction et les commandes dans des lignes de grille distinctes. L’objet occupe la colonne de droite sur deux lignes ; le titre peut passer derrière l’objet, jamais devant le texte d’introduction.
- Le canvas est positionné dans son conteneur : sa taille intrinsèque ne doit pas agrandir la grille. Sous 800 px, l’ordre devient titre, introduction, objet puis commandes ; la hauteur reste naturelle. Sur mobile, la scène mécanique reste visible pendant le défilement des commandes.
- car-parts.js sépare les 51 éléments de la voiture et relève sa coque. Le V6 de 196 pièces apparaît dans cette composition, avec un gros plan indépendant et 27 éléments isolables. C’est un assemblage illustratif, pas le moteur d’origine de la Ferrari.
- Historique V0.4, remplacé en V0.8 : roar.js produisait un rugissement synthétisé pendant 4,2 secondes. Aucun AudioContext avant un clic. Une seconde pression, la fermeture de l’atelier, la sortie de la scène ou le masquage de l’onglet arrêtent le son.
- L’enveloppe du son pilote une légère vibration et un indicateur graphique, sans fausse mesure de régime. Le mode réduit supprime les vibrations. Ce geste évoque un démarrage ; il ne simule pas la cinématique réelle du V6.
- Le kit de base compte 12 fichiers, dont atelier.css. Les modules 3D/audio sont des sources séparées du portfolio. Pour les réutiliser, copier aussi leurs dépendances et respecter les crédits des modèles.

## Version 0.5 — proportions et déconstruction radiale
- Reprise du mouvement radial de la première version : les 51 pièces automobiles suivent la direction de leur centre par rapport au centre de la voiture. Pneus, jantes, freins et moyeux ont des écarts distincts le long des essieux ; le vitrage se sépare de la coque.
- Les matériaux de surface restent opaques, à l’exception du vitrage déjà transparent. La coque ne devient plus un voile fantôme.
- fitEngineToCar dans engine.js déduit un volume arrière des dimensions de la voiture, puis applique une échelle uniforme au V6. Le modèle actuel mesure 0,823 × 0,593 × 0,908 dans les unités de scène, contre une dimension maximale de 1,5 auparavant.
- Le moteur reste assemblé et à cette échelle dans la voiture. Son écartement et son agrandissement interviennent seulement en gros plan. Les deux vues utilisent le même modèle.
- scripts/check-assembly.mjs vérifie les bornes glTF, l’inclusion du moteur dans l’enveloppe automobile, la séparation des 51 pièces et le retour exact à leurs transformations d’origine. Ce contrôle géométrique ne remplace pas l’inspection visuelle.

## Version 0.6 — fidélité avant illustration
La 458 possède un V8 atmosphérique de 4,5 litres. Le V6 pédagogique utilisé jusqu’en V0.5 ne correspond pas à cette mécanique. Le redimensionnement ne corrige pas une identité de modèle erronée.
- La déconstruction Ferrari affiche uniquement les 51 éléments du modèle de voiture ; aucun V6 ajouté et aucun chargement automatique du V6.
- L’étude V6 demande un clic explicite et possède un titre, une légende et un crédit distincts. Elle s’ouvre assemblée, à 0 % d’écartement, indépendamment de l’écartement de la voiture.
- Les matériaux conservent le rendu double face du modèle CAO d’origine. Ce réglage évite des faces masquées ; il ne crée pas les pièces absentes et ne transforme pas le modèle en moteur Ferrari.
- L’intégration d’un V8 fidèle et complet reste en attente d’un asset vérifié. Ne pas présenter le modèle générique, un modèle généré, ou seulement un haut moteur comme un moteur authentique complet.
Les recettes de composition combinée et de dimensionnement des versions 0.4/0.5 ci-dessus sont historiques ; elles ne sont plus appliquées au V6 dans la Ferrari.

## Version 0.7 — ensembles extérieurs conservés
Mateo accepte le bloc moteur, la transmission et les autres ensembles tels quels lorsque les pièces internes détaillées ne sont pas disponibles.
- powertrain.js crée trois ensembles extérieurs simplifiés : bloc V8 fermé avec deux plénums rouges, boîte/transmission et échappement. Ils sont construits en code ; ce ne sont pas des fichiers CAO constructeur.
- L’ensemble est dimensionné uniformément dans le volume arrière de la voiture. Le même objet reste dans la voiture et dans le gros plan. La carrosserie s’écarte autour de la mécanique assemblée.
- En gros plan, le curseur déplace les trois ensembles entiers ; aucune pièce interne n’est séparée. Revenir à la voiture ramène les ensembles à leur position assemblée. Le réassemblage coupe le son.
- La légende identifie les trois ensembles ; les couleurs rouge, métal et bronze suivent leur matière. Le comptage distingue les 51 meshes automobiles des 3 ensembles mécaniques.
- Le V6 et engine.js sont préservés dans les fichiers et dans les versions antérieures, mais ne sont plus chargés par la scène. Les paragraphes 0.3 à 0.6 décrivent des états historiques.
- scripts/check-powertrain.mjs vérifie inclusion, échelle uniforme, déplacements des ensembles entiers, retour exact et restauration des matériaux. La fidélité CAO détaillée n’est pas revendiquée.


## Version 0.8 — axes mécaniques et enregistrement réel
- Les découpes de matériau du volant ne sont pas des pièces mécaniques indépendantes. Ses sept meshes et l’habitacle reçoivent la même translation mondiale, convertie dans le repère de chaque parent. Leurs rotations sont conservées.
- Les pneus, jantes, moyeux et freins suivent l’axe de leur groupe de roue. L’écart varie par couche sans dérive verticale ou longitudinale.
- createPowertrain reçoit les positions des moyeux du modèle. La boîte et les demi-arbres sont construits à partir des deux moyeux arrière ; les joints extérieurs rejoignent ces points dans l’état assemblé. L’écartement de la carrosserie les sépare volontairement.
- roar.js lit ferrari-458-goodwood.mp3 : enregistrement de la 458 par Edvvc (Ed Pond), Goodwood, 3 juillet 2010. Lecture à vitesse originale, au clic seulement ; aucun son synthétique. L’analyse du signal audio pilote la vibration, supprimée en mode de mouvement réduit.
- Un second clic, le retour de vue, la fermeture de l’atelier, la sortie d’écran ou le masquage de l’onglet arrêtent la lecture. Fin naturelle et erreur réinitialisent l’état. Aucun élément audio ni chargement du fichier avant le premier clic.
- Pour réutiliser le son, copier le média et LICENSE-458-SOUND.txt, créditer Edvvc et lier la source Wikimedia Commons ainsi que CC BY-SA 3.0. Le son conserve cette licence. Les médias et modules 3D/audio sont exclus du kit de base de 12 fichiers.
- scripts/check-powertrain.mjs contrôle les translations communes, les axes, les raccordements aux moyeux et le retour exact. scripts/check-audio.mjs vérifie le cycle de lecture avec un faux lecteur ; une lecture réelle dans le navigateur est vérifiée séparément. Ces contrôles ne certifient ni la fidélité CAO, ni une cinématique moteur, ni une réussite esthétique.


## Version 0.9 — historique, remplacé par la lecture 0.36
- Les colonnes des fiches utilisent minmax(0, …) et les enfants acceptent de rétrécir ; l’ouverture d’un texte long ne redéfinit pas la largeur du visuel.
- Le titre, les compétences et le bouton sont alignés en haut du bloc texte. Les détails HTML natifs se développent vers le bas, sans recentrage vertical du résumé.
- Le visuel possède son propre gabarit et ne s’étire pas avec le texte. Les animations de la fiche utilisent une plage de lecture calculée à partir du visuel et du viewport, indépendante de la hauteur du détail ouvert.
- La suite de la page descend naturellement pour laisser lire le contenu. Aucun texte tronqué, aucune hauteur maximale imposée au détail et aucun défilement interne supplémentaire.
- Le comportement s’applique aux trois projets et au kit, avec ou sans mouvements réduits. La correction ne modifie pas l’atelier mécanique.


## Version 0.10 — Sandbox / M/ Circuit
- Une route sandbox.html accessible depuis le portfolio, le système et les crédits. Elle ouvre directement sur un contre-la-montre 3D. La page jeu possède ses styles dans sandbox.css et réutilise tokens.css, les polices et le modèle Ferrari existants.
- Caméra orthographique en vraie isométrie : direction (1, 1, 1), orientation constante, suivi amorti de la voiture. Le pilotage reste arcade. Une projection isométrique ne revendique pas une simulation automobile constructeur.
- race-materials.js injecte des shaders procéduraux en coordonnées monde dans le pipeline PBR de Three.js : grain et vieillissement de l’asphalte, gravier et terrain. Reflets d’environnement, vernis automobile, ombres dynamiques rapprochées et traces de pneus issues du freinage/virage réel. Bloom léger puis tone mapping ACES ; bloom désactivé sous 600 px pour limiter le coût. Ressources Three.js 0.180.0 conservées localement et sous leur licence existante.
- race-core.js sépare la physique, le compte à rebours, la pause, les pénalités et le franchissement des trois secteurs. Un tour n’est validé qu’après les secteurs dans l’ordre et le retour à la ligne. Le reset revient au dernier secteur franchi et ajoute 3 secondes.
- Flèches ou ZQSD/WASD, P pour pause/reprise, R pour remise en piste. Les commandes tactiles se maintiennent et gèrent l’annulation et la perte de capture ; les touches sont relâchées en perdant le focus. Le jeu démarre uniquement au clic et se met en pause quand l’onglet est masqué.
- Le meilleur chrono est stocké uniquement sur l’appareil, avec repli en mémoire si le stockage est indisponible. Pas de classement distant ni de valeur de démonstration injectée. Le tour du pilote de référence des tests reste dans les preuves et n’alimente pas le record du jeu.
- Réutiliser le jeu : copier sandbox.html/css, race.js, race-core.js, race-materials.js, tokens.css, les ressources et licences référencées (Ferrari, polices et modules vendor). Adapter le circuit dans race-core.js. Le kit éditorial de 12 fichiers reste distinct du jeu 3D.
- Vérification logique : scripts/check-race.mjs. Vérifications de rendu, interfaces et limites dans les preuves Sandbox. Le rendu recherché est stylisé avec des matières travaillées, pas une promesse de photoréalisme.


## Version 0.11 — Les Esses, adhérence et paysage
- Les Esses remplace le petit tracé par une boucle de 1,906 km, construite sur une B-spline fermée : douze inversions de courbure, trois secteurs. La largeur de 17 m et les 7 m de dégagement de chaque côté restent constants. Les rayons et espacements sont contrôlés par le script de physique.
- Le moteur de conduite sépare orientation de caisse et direction du déplacement. L’adhérence avant plafonne la rotation à haute vitesse (sous-virage) ; le transfert au freinage ou Espace relâche l’arrière (survirage). Le contre-braquage augmente la stabilité. La direction est amortie et son rayon à 18 m/s passe d’environ 15,8 m à 9,1 m dans l’essai contrôlé.
- Espace + une direction, ou le bouton tactile DRIFT, déclenche la glisse. Relâcher puis contre-braquer la résorbe. Les barres AV/AR et les conseils lisent les valeurs de la physique. Les traces avant/arrière suivent l’essieu concerné, la fumée suit la dérive arrière. Pas d’animation de glisse indépendante des trajectoires.
- race-scenery.js génère 595 arbres et 355 buissons avec une graine fixe. Le houppier reste hors des dégagements. Feuillages variés, troncs, branches, conifères, ombres PBR et nuances procédurales. Instances regroupées par zones de 64 m pour permettre l’élimination des zones hors champ ; géométries et matériaux partagés. Aucun nouvel asset externe.
- Le record utilise mouvement-circuit-best-v2. La clé v1 n’est ni lue comme score du nouveau tracé, ni supprimée. Changer de tracé ou modifier fortement la physique implique une nouvelle clé.
- Pour réutiliser cette version, ajouter race-scenery.js aux fichiers de jeu de la V0.10. Adapter les points de contrôle, les paramètres arcade et les exclusions du décor, puis relancer scripts/check-race.mjs. Vérifier séparément le ressenti humain et la fluidité sur les appareils visés. Les tests du pilote de référence n’écrivent aucun score dans le navigateur.
- Le rendu adapte sa résolution, son antialiasing, le bloom et les ombres après deux fenêtres lentes pendant le jeu. La physique reste au même pas fixe. Ce réglage dépend de la cadence observée ; il ne garantit pas 60 images/s sur tout appareil.
- La voiture conserve son modèle visible ; seules la carrosserie, les jantes et les pneus projettent son ombre. Le rendu du jeu demande le GPU performant et évite le double antialiasing du canvas et du compositeur.


## Version 0.12 — Pilotage rapproché
- La voiture occupe nettement plus de place. Caméra isométrique rapprochée par défaut, poursuite avec C, boutons +/− pour ajuster le zoom. Le cadrage se desserre légèrement avec la vitesse. La scène occupe l’essentiel de la hauteur disponible ; interfaces adaptées aux formats portrait et paysage court.
- race-vehicle.js : modèle dynamique à deux essieux, masse et inertie, transfert longitudinal de charge, adhérence combinée (freiner/accélérer utilise une partie de l’adhérence nécessaire au virage), direction filtrée pour clavier, assistance de rattrapage des grandes dérives. Boîte automatique à sept rapports, régime et interruption de couple pendant les changements. Le freinage, le roulis, le tangage et les phases de rotation des roues alimentent les retours visuels. Réglages de jeu, sans calibration Ferrari certifiée ni équivalence avec Assetto Corsa.
- La racine visible est décalée de 0,325 m par rapport au centre de gravité du modèle de conduite pour raccorder les essieux du GLB à l’empattement de 2,65 m. La carrosserie oscille séparément des roues ; traces et fumée suivent les essieux aux offsets avant +1,48 m et arrière −1,17 m. Le frein arrière distingue les phases des roues avant/arrière.
- race-audio.js exploite l’enregistrement réel existant de la 458 : extraits 0,60–1,65 s et 4,05–4,85 s, boucles fondues et rééchantillonnées selon le régime simulé. Démarrage au clic, coupure en pause/fin, bouton muet. Attribution et adaptation CC BY-SA 3.0 détaillées dans les crédits. Ce n’est pas une banque constructeur multi-régimes.
- race-coach.js fournit la trajectoire d’aide et une reconnaissance qui utilise les mêmes pédales et la même physique que le joueur. Aucune téléportation. La reconnaissance est identifiée et ne peut enregistrer un record ; une commande de conduite reprend une nouvelle session manuelle. Objectifs or 1:45, argent 2:05, bronze 2:30 ; points gagnés pour une glisse récupérée. Record v3, v1/v2 conservés.
- race-trackside.js : glissières et poteaux ; trajectoire verte/orange/rouge selon le besoin de freinage. race-scenery.js : feuilles et aiguilles découpées par textures procédurales RGBA, regroupées par zones. Les anciens volumes sphériques/coniques visibles ont été remplacés ; brume atmosphérique en poursuite. Ombre de contact adoucie.
- assets/ferrari-circuit.glb est dérivé de l’original par scripts/build-circuit-car.mjs. Simplification tenant compte des normales, conservation des pivots et compression Draco : 133 605 triangles contre 358 788, 632 572 octets. L’original reste inchangé. Les outils glTF Transform, meshoptimizer et Draco sont des dépendances de développement locales gratuites ; aucune dépendance distante du jeu.
- Réutilisation : ajouter race-vehicle.js, race-coach.js, race-trackside.js, race-audio.js et le GLB de circuit aux fichiers des versions précédentes. Garder les attributions. Lancer node scripts/check-race.mjs et node scripts/check.mjs, puis contrôler les deux caméras, les commandes et le son dans le navigateur. Le kit éditorial reste distinct de ces ressources du jeu.
- Références de conception : [notes de physique Assetto Corsa](https://assettocorsa.gg/pc-update-1-9-and-2023-gtwc-dlc-out-now/) pour les enjeux d’adhérence combinée et de transfert ; [Ferrari 458 Italia](https://www.ferrari.com/en-PA/history/garage/2009/458-italia) pour le contexte de la voiture. Aucune donnée ou ressource du jeu commercial n’est intégrée. Simplification selon la [documentation glTF Transform](https://gltf-transform.dev/modules/functions/functions/simplify).

## Version 0.13 — Accroche et glisse volontaire

La référence active est désormais l’esprit Forza Horizon : priorité à une conduite accessible, vive et stable au clavier. Le retour de Mateo sur V12 (« sur la glace ») prime sur les anciens tests techniques.

- race-vehicle.js conserve les forces par essieu, les vitesses longitudinale/latérale, la boîte et les retours visuels. Adhérence routière augmentée ; accélération et freinage réservent une part d’adhérence latérale en virage. Le coefficient de route 1,85 est un paramètre de jeu, pas une valeur certifiée du pneu Ferrari.
- steeringLimit() borne la demande latérale en fonction de la vitesse, sans angle minimal constant à haute vitesse. Direction plus prompte (14/s à l’entrée, 18/s au retour/contre-braquage), partagée avec la reconnaissance pour éviter des règles divergentes.
- Assistance progressive de stabilisation latérale et de lacet : elle maintient la voiture alignée sur route, s’atténue sur gravier et lors du frein à main. La charge de drift décroît après relâchement ; aucune téléportation ni recopie instantanée de la direction de déplacement. Une correction de lacet rattrape les dérives excessives. C’est une aide de jeu explicite, pas une simulation constructeur.
- Espace + direction déclenche la dérive. Relâcher les commandes rend l’adhérence progressivement ; le contre-braquage reste disponible. L’indicateur de perte d’adhérence avant ignore la petite déformation nécessaire à un virage normal.
- Record v4 pour ces nouveaux réglages, anciennes clés v1/v2/v3 intactes. Caméras isométrique/poursuite, son réel, circuit, score de glisse et objectifs existants conservés.
- scripts/check-grip.mjs compare les mêmes entrées à la version ecec94a (V12) extraite de Git : six virages accélérés, freinage en appui, drift tenu/relâché, réponse de direction, symétrie et gravier. Preuves dans GRIP-V13.json et RACE-DYNAMICS-V13.json. Les résultats mesurent des scénarios, pas le plaisir de conduite humain.
- Référence de conception des aides : [Forza Support — direction Normal/Simulation](https://support.forzamotorsport.net/hc/en-us/articles/360012736414-FM7-Wheel-Setup-and-Tuning), qui décrit le rôle des aides de direction et de lacet dans Forza Motorsport. Inspiration générale ; aucune copie de code, calibration ou ressource de Forza Horizon.


## Évolutions du jeu après le kit éditorial v0.13

La mission audio V14 est documentée dans [CAR-AUDIO.md](./CAR-AUDIO.md). La calibration V15 puis les aides de lecture V17 sont des étapes historiques, conservées dans Git et les preuves du projet. Le kit éditorial demeure distinct des ressources du jeu.

## Conduite V18 — inspiration Trackmania

La nouvelle demande de Mateo remplace l’objectif de calibration routière : commandes arcade précises, accroche franche et drift volontaire au frein. race-vehicle.js sépare vitesse, orientation et trajectoire ; race-arcade-spec.js regroupe les réglages et race-input.js partage les commandes clavier/tactiles. Ajouter ces deux modules pour réutiliser le jeu actuel. Les modèles, les pivots de roues et l’enregistrement de 458 restent les mêmes.

Espace ou flèche bas freine. Tourner puis toucher le frein lance la glisse ; relâcher la direction ou contre-braquer rend l’accroche. La reconnaissance et les conseils emploient la nouvelle courbe de braquage. Médailles : 0:55 / 1:05 / 1:20. Record mouvement-circuit-best-v6-arcade, anciennes clés préservées.

Les mesures avant/après, les références de conception et les limites sont dans [CAR-HANDLING.md](./CAR-HANDLING.md). La physique est une interprétation originale, sans équivalence revendiquée avec Trackmania. Validation actuelle : npm test et npm run check ; portée des suites historiques dans scripts/README.md. Les tours scriptés ne valident pas à eux seuls le plaisir de conduite.


## Conduite conservée V19 — dosage et son stabilisé
Le retour joueur corrige l’excès de V18 : entrée de direction plus progressive, rayons croissant davantage avec la vitesse, lever de pied utile et drift demandant une direction engagée dès environ 80 km/h. Médailles 1:05 / 1:18 / 1:35, record v7 distinct. Ajouter car-audio-texture.js pour réutiliser le jeu actuel : les deux extraits de passage 458 sont réassemblés en lits sonores longs afin de réduire leur motif répétitif à régime constant. Le MP3 et les attributions restent identiques. Détails, mesures et limites dans CAR-HANDLING.md et CAR-AUDIO.md.

## Rendu actuel V20 — extérieur et présentation

Mateo valide V19 puis demande davantage de réalisme. Le circuit reçoit un ciel photographique et du bitume sous CC0, des reflets extérieurs, des collines, des herbes animées et des détails de paddock. Une présentation rapprochée précède le départ ; le jeu garde ensuite la caméra choisie et exactement la conduite V19. Le modèle original sert aux gros plans, son allègement à la vue isométrique. Les effets suivent la vitesse et les capacités de rendu. Ressources, limites et protocole de réutilisation dans [CIRCUIT-VISUALS.md](./CIRCUIT-VISUALS.md).

## Rendu V21 — reflet de scène et végétation détaillée
La version visuelle actuelle utilise un ciel de coucher de soleil, des reflets plans sur les parties humides du bitume, de l’herbe/gravier photographiques, des glissières profilées et des phares. Les arbres complets sont convertis une fois au chargement en atlas multivues, puis affichés avec leurs ombres. Conduite et audio V19 inchangés. Modules à reprendre : race-forest-atlas.js et race-reflections.js ; ressources et compromis dans CIRCUIT-VISUALS.md.

V22 / Forêt : composer plusieurs rangs de canopée et de sous-bois, avec chevauchement naturel des cimes et variations de hauteur/couleur. Garder le volume de forêt derrière les dégagements et préserver la lecture du véhicule par effacement local des premiers plans en isométrique. Groupes de distance distincts pour grands arbres et sous-bois ; ressources V21 réutilisées. Voir CIRCUIT-VISUALS.md et preuves/FORET-V22.json.

## Portfolio V24 — une démonstration comme document manipulable

Papyrus remplace sa vignette statique par un aperçu interactif autonome, intégré à la surface papier existante. Trois scénarios préparés suivent quatre étapes : brief, mission, résultat et relecture. Le visiteur peut avancer, revenir ou changer de cas. Ce composant explique une méthode ; il ne lance pas de modèle et ne montre aucune donnée privée de Papyrus.

Pour réutiliser : reprendre le balisage de #papyrus-demo dans index.html, papyrus-demo.css et papyrus-demo.js avec les polices et tokens du kit. Adapter les exemples, les libellés et les identifiants ensemble. Le module ne dépend pas de Three.js. Il emploie data-demo-step pour rester indépendant des étapes de défilement de la page.

La surface conserve une hauteur de 742 px sur ordinateur et 730 px sur petit écran. Les textes longs défilent dans le panneau, accessible au clavier ; les commandes restent en place. Entre 761 et 1100 px, la composition passe sur une colonne. La taille fixe doit être réévaluée si les traductions ou exemples deviennent plus longs. Les onglets suivent les flèches, Début et Fin, avec un seul onglet actif ; le panneau est relié à son titre et les changements sont annoncés. Les transitions respectent les animations réduites et un résumé reste lisible sans JavaScript.

Validation : parcours des douze vues en bureau et mobile simulé, clavier, stabilité du papier à l’ouverture du texte associé, formats 320/390/1024/1440 px et animations réduites. Les détails ouverts augmentent naturellement la hauteur de l’article. La vérification ne couvre pas un lecteur d’écran réel ni un téléphone physique. Source des preuves : QA-PAPYRUS-V24.json dans le dossier preuves du projet.

## Portfolio V25 — une réalisation jouable

La Sandbox devient la quatrième réalisation, M/ Circuit. Le format pleine largeur convient à une capture de jeu : titre et contexte, accès Jouer, image, trois faits vérifiables puis coulisses dépliables. La copie relie les retours sur la conduite aux ajustements réalisés. Le lien en bas du jeu revient directement à cette fiche.

Le composant est natif HTML/CSS, sans JavaScript supplémentaire. Reprendre le balisage #projet-circuit dans index.html et circuit-case.css avec les tokens du système. Garder les actions utilisables au clavier, le ratio du visuel et les textes indépendants de sa hauteur. Le titre et les coulisses passent sur une colonne sous 900 px. Les animations se limitent aux états de survol et respectent le réglage de mouvement.

assets/circuit-course.jpg est une capture réelle de la présentation du jeu, prise localement le 14 septembre 2026 : Les Esses, quatre pilotes, départ prêt, chrono à zéro. Le bitmap original 1425 × 891 est conservé ; la fenêtre CSS cadre x=402, y=272, largeur=990, hauteur=560 pour montrer les voitures sans les menus. Aucun rendu généré ni retouche du bitmap. Adapter ces valeurs si la capture change, puis inspecter le cadrage sur mobile. Les crédits des modèles et textures sont accessibles sous l’image.

Vérification V25 : fiche et retour depuis le jeu, formats 320/390/820/1024/1440 px, ouverture/fermeture clavier des coulisses, stabilité de l’image et animations réduites. Le jeu est observé au départ, sans lancer de tour ni modifier de record. Aucune modification de sa conduite, de son audio ou de ses modèles. Preuves QA-CIRCUIT-PORTFOLIO-V25.json et INTEGRITE-CIRCUIT-V25.json dans le dossier preuves du projet.

## Portfolio V26 — de l’objet aux systèmes

L’ouverture de la carrosserie accompagne maintenant le début du défilement de l’accueil. La caméra rejoint progressivement l’angle d’inspection ; le moteur, la transmission et l’échappement restent assemblés. Le modèle se referme en revenant en haut. La hauteur du bloc et le panneau d’inspection manuel restent inchangés pendant ce passage.

scene.js réutilise le signal atelier:scroll et initialise aussi sa position après le chargement du modèle. La progression lissée couvre 2 à 20 % de la hauteur du hero après son passage en haut de l’écran, avec un écartement maximal de 0,65. Le même calcul de cadrage englobe les pièces visibles. L’ouverture a été avancée après contrôle : la première version se terminait trop tard et le haut de la voiture avait déjà quitté l’écran.

La première interaction de rotation, clavier, matière, inspection ou réglage WebMCP donne la priorité aux commandes manuelles pour le reste de la page. Le passage se retire progressivement et ne reprend pas pendant cette inspection ; recharger réactive la présentation initiale. Les animations réduites coupent le passage automatique, tout en gardant le sous-capot utilisable. Aucun son n’est déclenché par le défilement.

L’index des quatre projets remplace le bandeau décoratif. Balisage natif dans index.html, styles project-index.css : quatre colonnes sur grand écran, deux sous 1100 px. Chaque lien nomme le projet et son domaine. Les ancres visent les articles, avec tabindex=-1 pour que le clavier poursuive dans la bonne fiche. Ne pas remplacer ces liens par une navigation dépendante de JavaScript.

Validation : progression puis inversion sur mobile, ouverture en bureau avant sortie du cadre, inspection et modes manuels, plage 0–100 %, animations réduites, quatre destinations et reprise clavier, formats 320/390/820/1024/1440 px. Preuves QA-TRANSITION-V26.json. Ce passage reste une mise en scène de la mécanique existante, pas une transformation des pièces en code ni une démonstration des projets qu’elles annoncent.

## Portfolio V27 — une décision documentée
La démarche générique devient un carnet de conception du réglage de M/ Circuit : constat de Mateo, choix d’une direction progressive avec grip conservé, essai automatisé comparant le dosage des pédales et l’accélérateur bloqué. La citation reprend le retour utilisateur ; rôle personnel et aide IA restent distincts.

Le workbench conserve trois étapes au scroll sur grand écran. Les boutons permettent la lecture directe ; le focus dans le panneau suspend le pilotage par scroll. En largeur ≤ 1100 px, hauteur ≤ 800 px ou mouvement réduit, la lecture se fait par boutons. Les vues occupent une même cellule de grille et réservent la hauteur du plus long contenu : pas de variation de boîte au clic. Les vues masquées sont inertes ; sans le module, les trois vues restent lisibles à la suite.

Le sélecteur compare trois mesures enregistrées (≈ 50/90/130 km/h), à partir de preuves/ARCADE-V19.json, relevé du 14 septembre 2026. Barres sur une échelle commune de 60 m ; ce ne sont ni une nouvelle simulation ni des données Ferrari. Le chrono 1:17.792 et la sortie à 6,21 s viennent du même essai archivé. Aucun import du jeu, modèle 3D ou appel distant ajouté.

Pour réutiliser ce format, partir d’un retour réel, d’un choix documenté et d’un résultat mesuré. Fournir des valeurs traçables et indiquer la portée de l’essai. Conserver le texte de repli, le focus, les unités, la grille stable et les préférences de mouvement. Vérifications séparées : QA-DECISIONS-V27.json et INTEGRITE-DECISIONS-V27.json.

## Portfolio V29 — une invitation à prendre contact
Le dernier aplat orange accueille une intention, un lien email visible et une flèche circulaire. Contact est une ancre native de la navigation ; le design system reste accessible dans les projets et le pied de page. Aucun script, formulaire ou service distant n’est nécessaire pour ce parcours.

Le texte prépare l’après-alternance, sans annoncer de date, statut freelance ou disponibilité immédiate. L’adresse professionnelle est celle fournie par Mateo. Pour réutiliser ce motif, écrire une invitation fidèle à la situation et afficher un contact réel.

Les styles restent isolés dans contact.css. À 460 px et moins, la flèche rejoint le libellé pour laisser toute la largeur à l’adresse. Le focus noir reste visible sur le fond orange. L’ancre reçoit le focus, puis Tab mène au lien email ; son utilisation reste possible sans JavaScript. Les préférences de mouvement existantes s’appliquent au titre. Preuves : QA-CONTACT-V29.json.

## Portfolio V30 — du besoin au projet
Une section papier précède le contact. Trois lignes éditoriales rapprochent un besoin, une première version possible et une réalisation existante : site web / design system du portfolio, outil de suivi / Papyrus, analyse d’images / travail en Ligurie. Il s’agit de pistes de collaboration, pas de forfaits ou de références clients.

Pour réutiliser ce motif, nommer un besoin compréhensible, décrire un premier résultat limité et lier une réalisation pertinente. Éviter les promesses chiffrées sans preuve. Garder une seule action de contact après la liste, et le lien de retour vers ces pistes depuis le contact.

Balisage natif dans index.html et styles isolés dans collaboration.css. Trois colonnes sur bureau ; numéro sur sa propre ligne et deux colonnes sous 1000 px ; une colonne sous 600 px. Liens d’au moins 44 px de haut, texte et focus noirs sur papier. Le titre réutilise l’arrivée au scroll existante, désactivée avec les animations réduites. Aucun nouveau module JavaScript. Depuis l’ancre Contact, Tab passe désormais par le lien vers ces pistes, puis par l’email. Preuves : QA-COLLABORER-V30.json.

La V30 contient aussi une correction du contact : overflow-x: clip retient le déplacement décoratif du titre dans l’aplat orange. À 762 px, le contrôle final a révélé 5 px de débordement lors de l’arrivée ; après correction, scrollWidth et clientWidth sont tous deux à 747 px. Les liens conservent leurs marges et leur focus visible.

## Portfolio V31 — entrer par une réalisation ou par un besoin
L’accueil propose deux liens natifs : Découvrir les projets et Un projet en tête ?. Collaborer rejoint le menu principal ; Démarche reste visible même à 320 px. Les cinq destinations gardent l’ordre de lecture et des cibles d’au moins 44 px de haut. Pas de menu dépendant d’un script.

Styles dans navigation.css, limités à la page principale. Sous 1000 px, le menu occupe sa propre rangée ; sous 560 px, trois colonnes sur deux rangées. Le contact reste à droite. La colonne du hero empile les deux accès dans la grille existante ; à faible hauteur, le défilement vertical reste nécessaire pour voir toutes les commandes.

Le contrôle à 762 px a aussi révélé un débordement du panneau de démarche lorsqu’il s’inclinait. Dans la disposition sur une colonne (≤ 1100 px ou hauteur ≤ 800 px), decision-story.css neutralise cette inclinaison. La version bureau conserve sa mise en mouvement. Les boutons de lecture et les préférences d’animation restent disponibles. Preuves : QA-NAVIGATION-V31.json.

## Portfolio V32 — donner la priorité aux preuves
L’index indique ce que chaque fiche présente : aperçu préparé, intention, travail de stage ou jeu à essayer. Cela décrit le contenu consultable, pas un niveau de maturité supposé des projets. La fiche Ligurie montre d’emblée la contribution de Mateo : scripts Python, automatisation, analyse et comparaison aux modèles, à partir de l’attestation fournie.

Les photos mécano/Ligurie restent des illustrations clairement nommées. Leur hauteur est indépendante de celle du texte et des détails ouverts ; ces deux fiches ne réservent plus une scène de défilement entière. Papyrus et le jeu gardent leur présentation. Styles isolés dans project-evidence.css ; les liens de l’index alignent leur contenu en haut.

Pour réutiliser ce motif, séparer ce qui est montré de ce qui est livré, nommer une contribution vérifiable et garder les méthodes en lecture complémentaire. Aucune métrique ou sortie simulée ne remplace une preuve absente. Mesures avant/après, clavier, tailles de photos stables et limites : preuves/QA-AUDIT-V32.json et preuves/AUDIT-PARCOURS-V32.md.


## Portfolio V33 — préparer le premier échange
Le contact direct est suivi d’un volet facultatif « Préparer un message ». Le visiteur choisit un sujet, décrit un besoin et peut ajouter ce qui existe déjà. Deux colonnes mettent en regard le besoin sur orange et le brouillon sur papier ; elles se suivent sous 900 px. Le bouton prépare un texte à relire, puis un lien mailto ouvre la messagerie du visiteur. Le texte reste copiable si aucun logiciel de messagerie n’est associé.

Pour réutiliser : reprendre #contact-composer, les règles contact-composer de contact.css et contact.js, avec les tokens et polices du système. Le destinataire vient du lien .contact-email ; adapter ce lien, les sujets et les labels au projet. Le module est indépendant de la 3D et ne fait aucun appel réseau ni stockage applicatif. Le volet est caché tant que ses événements ne sont pas installés ; le lien email reste natif sans JavaScript.

Besoin requis, contexte facultatif, limites de 500 et 300 caractères. Les champs n’ont pas de name pour éviter leur inclusion dans une navigation de formulaire accidentelle ; le submit est intercepté. Le contenu est affecté avec textContent/value et chaque champ du mailto est encodé séparément. Toute modification retire le lien du brouillon précédent. Après préparation, le focus rejoint le titre du brouillon, puis Tab atteint le texte copiable et le lien. La lecture commence en haut du texte, même lorsqu’il déborde.

Le papier réserve sa place entre les états vide et prêt ; les longs messages défilent dans la zone de lecture. Le formulaire n’envoie rien et n’affiche aucune confirmation d’envoi. L’ouverture et le préremplissage effectifs dépendent de la messagerie du visiteur ; les contrôles navigateur n’activent pas le lien. Aucun tarif, statut, délai de réponse ou disponibilité ajouté. Preuves : QA-MESSAGE-V33.json et INTEGRITE-MESSAGE-V33.json.


## Version 0.36 — preuves et composants synchronisés

La lecture précède la démonstration, y compris dans l’ordre HTML mobile. Les fiches utilisent `.project-detail` puis `.case-media` ; les figures restent dans leurs proportions natives et indépendantes des volets de lecture. Une légende distingue capture réelle, sortie de traitement et concept généré.

- `portfolio-refinement.css` : hiérarchie éditoriale, figures, lecture compacte et contact.
- `papyrus-demo.js/css` : parcours préparé, placé dans un volet facultatif après la capture réelle.
- `developer.js` et `decision-story.css` : trois états du carnet, sélection manuelle dans la version compacte.
- `project-index.css`, `collaboration.css`, `navigation.css` : accès natifs, pistes et navigation mobile.
- `contact.js/css` : email direct ; brouillon facultatif révélé seulement quand il existe. Aucun envoi automatique.
- `preferences.js` et `motion.js/css` : préférence de mouvement partagée, contenu visible sans JavaScript.

La galerie components.html et le ZIP sont produits par `python scripts/build-kit.py` depuis les sections et dépendances actuelles. Le ZIP contient un manifeste SHA-256 de chaque fichier, des polices locales et leurs licences. Servir après extraction en HTTP local. Le jeu, ses modèles et son audio ne sont pas inclus : ses liens aboutissent à une note d’intégration dans la galerie. Les contenus, email et médias d’exemple doivent être remplacés avant réemploi.

Les métadonnées de partage utilisent une image locale 1200 × 630. Une URL publique absolue pour canonical, og:url et og:image sera définie au déploiement ; aucune URL de production n’est présumée.

Sur le portfolio, `project-transition.js` relie l’accueil au cas Papyrus : sortie de la voiture en 260 ms, puis arrivée sur la capture réelle. Le lien natif reste utilisable sans JavaScript et la réduction des animations désactive cette séquence. Ce module propre à l’accueil 3D n’est pas nécessaire à la galerie du kit.