/* ═══════════════════════════════════════════════════════════════════════════ LE LANGAGE DE MOUVEMENT — source unique CVE 2026-08-31 ┌────────────────────────────────────────────────────────────────────┐ │ L'ANIMATION EST AU SERVICE DU RÉCIT. │ │ Règle posée par Christophe le 31/08/2026, et elle prime sur tout │ │ le reste de ce fichier. │ │ │ │ Concrètement : le mouvement suit l'ordre de lecture, il ne le │ │ contredit pas. On lit l'affirmation, puis on voit la preuve. Le │ │ texte entre donc en premier, la figure ensuite. Un mouvement qui │ │ attire l'œil ailleurs que là où la phrase l'emmène est un défaut, │ │ même s'il est beau. │ │ │ │ Corollaire : si un réglage ne sert pas la lecture, il se supprime │ │ au lieu de se peaufiner. │ └────────────────────────────────────────────────────────────────────┘ Toutes les animations d'entrée des études de cas lisent leurs valeurs ICI, et nulle part ailleurs. Un changement demandé se fait dans ce fichier, une fois, et les quatre cas suivent. Pourquoi ce fichier existe. Ces jetons étaient déclarés deux fois, dans scene.css et dans cas.css. Le 31/08/2026, une correction de la courbe d'entrée a été faite dans le premier et pas dans le second : le rebond a persisté, et il a fallu une deuxième passe pour trouver le doublon. Une valeur écrite à deux endroits est une correction qui en oublie toujours un. ⚠️ NE REDÉCLARE JAMAIS UN `--mv-*` AILLEURS. `controler.py` échoue si un de ces jetons est déclaré dans plus d'un fichier. Les feuilles de figures les LISENT, elles ne les écrivent pas. Ce fichier se charge avant scene.css et cas.css, qui en dépendent. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── LA COURBE ───────────────────────────────────────────────────────── Une seule, pour la position ET pour l'opacité. Deux courbes différentes sur un même élément font arriver l'opacité avant que la position ne finisse : la pièce a l'air posée puis bouge encore, et l'œil lit un rebond. Une seule courbe, une seule arrivée. Aucun point de contrôle ne dépasse 1 : pas de dépassement, donc pas de rebond géométrique. Vérifié au navigateur le 31/08 — une pièce va de 7,7 px à 0 sans jamais passer au-delà. 31/08, troisième réglage. (.4, 0, .2, 1) démarrait ET finissait en douceur : juste pour un objet qui se déplace d'un point à un autre, faux pour quelque chose qui ARRIVE. La pièce partait de l'arrêt, accélérait, puis freinait : on avait l'impression de la pousser au lieu de la voir se poser. Christophe : « ça fait bizarre et pas naturel ». (.25, .46, .45, .94) a de l'élan dès le premier instant et ralentit régulièrement jusqu'à l'arrêt. C'est le mouvement d'une chose qui atterrit, et c'est la plus douce des courbes de décélération : aucune cassure, aucun à-coup. Une entrée se freine, elle ne se lance pas. Ce qu'il faut en retenir. Il est revenu à 2,3 s au total, soit la durée d'avant la correction. La longueur n'était donc pas le défaut : c'étaient la désynchronisation du texte et de la figure, et une courbe qui atteignait 90 % du chemin dans son premier tiers. Il voulait lent et ample, mais dans l'ordre. Ne raccourcis pas ces durées en croyant bien faire. */ --mv-entree: cubic-bezier(.25, .46, .45, .94); --mv-doux: cubic-bezier(.25, .46, .45, .94); /* ── LE TEMPS ────────────────────────────────────────────────────────── UNE durée pour tout ce qui entre, texte comme figure. UN pas entre deux éléments d'un même bloc. Rien d'autre. Pourquoi si peu de réglages. Avant, chaque pièce portait sa propre durée écrite dans le HTML (62 valeurs de 1,05 s à 1,35 s sur une seule page), multipliée par un facteur global ; et la cascade de texte avait ses durées écrites en dur dans la feuille, sans lire aucun jeton. Résultat mesuré le 31/08 : dans la même section, le texte mettait 0,85 s et la figure 0,56 s. Deux moitiés d'écran qui n'arrivaient jamais ensemble. C'est ce décalage que Christophe lisait comme un rebond, puis comme du stress. Les `--d` restés dans le HTML ne sont plus lus. Ne les rétablis pas : une durée par pièce, c'est une animation qu'on ne peut plus régler. */ --mv-duree: .75s; --mv-pas: 60ms; --mv-long: .6s; /* le contour de la scène vide, qui entre seul */ /* ── L'ORDRE ─────────────────────────────────────────────────────────── Le texte entre d'abord, la figure ensuite. Demande de Christophe le 31/08 : les deux moitiés d'écran arrivaient ensemble et se disputaient l'attention. On lit le titre, puis on regarde l'illustration ; le mouvement suit l'ordre de lecture au lieu de le contredire. 0,3 s : le texte a fini de se poser, la figure démarre sans que l'œil ait eu le temps d'attendre. */ --mv-fig: .38s; /* Une phrase de l'ad-lib après l'autre. L'écart y est plus large qu'ailleurs parce qu'on lit chaque segment : « Notre X … aide Y … qui veulent Z … ». La proposition de valeur se compose devant le lecteur, phrase par phrase, avec le même geste que tout le reste du site. Pas une machine à écrire : Christophe a demandé « pas un truc sec, un truc qui respecte le style général ». */ --mv-phrase: .3s; /* ── LA DISTANCE ─────────────────────────────────────────────────────── Les `--dx` / `--dy` des scènes ont été écrits généreux, de 40 à 60 px. L'amplitude les ramène à une vingtaine de pixels : le mouvement se sent, il ne se regarde pas. 31/08 : porté à 1,1 par Christophe. Au-delà de 1, la pièce parcourt PLUS que la distance écrite dans la scène, soit 45 à 65 px. Une course courte rend l'entrée sèche : la pièce apparaît plus qu'elle n'arrive. */ --mv-amp: .5; } /* Le mouvement est un confort, jamais une condition d'accès au contenu. */ @media (prefers-reduced-motion: reduce) { :root { --mv-duree: .001s; --mv-pas: 0ms; --mv-fig: 0s; --mv-phrase: 0s; --mv-amp: 0; } }