/* Le rail de chapitres — voir src/rail.js. Un fichier à lui, comme le verre et l'onde : le rail est un couple js + css, et les garder ensemble est ce qui permet de le décrocher d'une ligne si le film change de forme. */ /* ============================================================ 1 · LA COLONNE ============================================================ */ /* SUR LE MONTANT, ET POSÉ AU BAS DE LA PAGE (Lucas, 2026-08-14 — le menu de la référence Shopify Editions, repris pour son style et pour sa place, mais sans son animation). L'abscisse ne bouge pas. Le rail ne flotte pas dans la marge : il PART du montant gauche et s'avance vers l'intérieur du cadre. C'est ce qui en fait une graduation — une règle graduée est posée sur son axe, pas à côté. L'ordonnée, elle, a changé de bord, et c'est tout le déménagement. Le rail pendait du filet du bandeau, avec la marque au-dessus de lui. Il est maintenant ANCRÉ EN BAS, comme le sommaire de la référence : la bande basse est la seule bande vraiment libre de la page — aucun chapitre ne s'y ancre (les ancrages en service sont `center-left`, `top-left`, `center-right` et `center`, voir src/chapters.js), alors que le haut porte déjà la marque et le bouton d'écriture. `bottom` et non `top` : c'est le BAS de la liste qui doit tenir sa position. Ancré par le haut, un septième chapitre pousserait la colonne vers le pied de page ; ancré par le bas, il la fait grandir vers le haut, dans le vide, et l'écart au mot « Descendre » reste le même quel que soit le nombre de chapitres — c'est lui qu'on lit, pas la hauteur du bloc. 3,4rem : le mot « Descendre » vit à `13vh + 1,2rem` (style.css) et le rail se pose juste au-dessus de lui. Les deux se lisent alors comme une seule colonne de pied de page — le sommaire, puis l'affordance — exactement comme la référence range ses mentions légales sous son menu. `position: fixed` et non `absolute` : la scène est haute d'un écran et ne bouge pas, les deux reviendraient au même — sauf pendant le geste d'ouverture du panneau d'écriture, où le document est décalé. Fixe, le rail ne suit pas ce décalage. */ .rail { position: fixed; z-index: 4; left: calc(var(--rule-inset) * 100vw); bottom: calc(13vh + 3.4rem); display: flex; flex-direction: column; /* `max-content`, soit ici les 24 px du chiffre : les titres sont hors du flux (§ 2) et ne comptent pas dans la mesure. La boîte du rail est donc étroite comme une graduation, et les volets qui s'en échappent ne l'élargissent jamais. */ width: max-content; /* AUCUNE gouttière, et ce n'est pas un oubli : le pas de la colonne est porté par l'interligne du chiffre (`line-height: 1.7`, § 2), qui vaut aussi la bande de survol de chaque entrée. Un `gap` en plus aurait ouvert entre les bandes des couloirs morts où le volet se referme alors que la souris descend la colonne. */ gap: 0; /* Le rail entre APRÈS le rideau, comme la marque et le bouton d'écriture : il fait partie de l'interface, pas du film, et rien de l'interface ne doit être là avant que la première image le soit. L'opacité n'est ici qu'un INTERRUPTEUR — le geste, lui, est porté par les chiffres eux-mêmes (§ 2), qui se dessinent un à un. Le fondu accompagne ce tracé sur la même courbe et au même instant que le logo, il ne le double pas. */ opacity: 0; transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1600ms; pointer-events: none; } .stage.is-ready .rail { opacity: 1; } /* ============================================================ 2 · LA LIGNE : SON TITRE, SON CHIFFRE ============================================================ */ /* L'encre et le halo viennent du même groupe que le bouton d'écriture (style.css) : le rail est une unité sondée, main.js l'inscrit dans la liste et le cadre lui pose `.on-light` quand le film passe au clair sous lui. On ne redit ici que ce qui lui est propre. Le halo est celui des autres unités, et il n'est pas décoratif : douze pixels de texte posés sur une huile n'ont aucun contraste garanti — le film passe du bleu de nuit au blanc de nuage sous la même ligne, et c'est le halo qui tient la lecture entre les deux, la sonde de polarité ne faisant que choisir le bon des deux régimes. */ /* LE CHIFFRE SEUL DANS LE FLUX, LE TITRE EN VOLET (Lucas, 2026-08-14). Les deux colonnes de la référence ont été inversées : le chiffre passe à gauche, sur le montant, et le titre à droite. Ce n'est pas un simple échange de places — c'est un échange de rôles. Chez la référence, les titres sont le menu et les chiffres les commentent ; ici c'est la COLONNE DE CHIFFRES qui est le menu permanent, et le titre n'est plus qu'une réponse à une question qu'on pose en survolant. D'où le retour de `position: absolute` sur le titre, qui avait été abandonné quand les noms étaient écrits en permanence. Il est ici indispensable, et pour deux raisons qui tiennent chacune toute seule : · LA CIBLE DE SURVOL. Lucas demande que le titre ne sorte qu'au survol DU CHIFFRE. Un titre resté dans le flux garderait sa place réservée dans le lien même invisible : la boîte du ferait 170 px de large et le survol se déclencherait à 150 px du chiffre, sur du vide. Hors flux, le lien ne mesure plus que son chiffre — la cible EST le chiffre, sans qu'aucune règle n'ait à le dire. · LA LARGEUR DE LA COLONNE. Cinq titres de longueurs différentes qui apparaissent et disparaissent feraient respirer la boîte du rail à chaque survol, et le montant avec. Le lien ne porte plus d'opacité : elle est descendue sur le chiffre et sur le titre, séparément. Posée ici, elle se serait multipliée avec la leur — un titre à 0,95 dans un lien à 0,78 se serait affiché à 0,74, et le réglage de contraste serait devenu illisible à écrire autant qu'à relire. */ .rail a { position: relative; display: block; color: var(--type-mark, var(--film-light)); text-decoration: none; pointer-events: auto; } /* La bascule de polarité. Elle se redit ici pour la même raison que `.scroll-hint.on-light` et `.contact-open.on-light` se redisent dans style.css : la règle générale est écrite `.type-layer .on-light`, et le rail ne vit pas dans la couche de texte — il est dans la marge, hors du cadre. C'est le