/* ========================================================================= TOULOUSE — ON ENTRE DANS LE MOT, PUIS IL S'OUVRE EN DEUX ------------------------------------------------------------------------- Cette feuille ne remplace pas toulouse.css ni toulouse-mot.css : elle se pose PAR-DESSUS. Elle fait trois choses, et rien d'autre : 1. elle rend la section beaucoup plus haute, pour qu'on reste longtemps devant la vidéo de Toulouse ; 2. elle colle un écran (.tlx__vue) en haut de la fenêtre pendant toute cette hauteur, pour que l'image ne bouge plus pendant qu'on descend ; 3. elle prépare les pièces que la traversée fait bouger — le mot, ses deux moitiés, le voile de sortie, la phrase du bas. 🔴 CE QUI EST VISIBLE SANS JAVASCRIPT La hauteur supplémentaire n'existe QUE si le script a posé la classe « tlx-on » sur . Sans JavaScript, sans GSAP, ou si le système demande moins d'animations : la section fait un écran, le mot gris est écrit en entier, la phrase du bas est en place, et on défile normalement. Aucune ligne d'ici ne cache quoi que ce soit. 🔴 POURQUOI « overflow:clip » ET PAS « overflow:hidden » SUR .tls « overflow:hidden » fabrique une boîte de défilement. Un élément collant (position:sticky) placé dedans se colle À CETTE BOÎTE — qui, elle, ne défile jamais. Résultat : il ne colle plus du tout. « overflow:clip » coupe pareil mais ne fabrique pas de boîte de défilement : le collant continue de se caler sur la fenêtre. Les vieux navigateurs qui ne connaissent pas « clip » ignorent simplement la ligne — ils ne coupent plus les coins arrondis de la section, et c'est tout. ========================================================================= */ /* ========================================================================= 1. LA SECTION ========================================================================= */ .tls{ /* On sort de la grille de toulouse.css. Elle centrait son contenu à la verticale : dans une section de trois écrans de haut, elle aurait posé l'écran collant au MILIEU de la section, donc un écran et demi trop bas, et il n'aurait plus rien collé du tout. Le centrage du mot est repris tel quel par .tlx__vue, juste en dessous. */ display:block; /* Voir l'explication en tête de fichier. */ overflow:clip; } /* La hauteur n'arrive qu'avec le script. 300svh = un écran collant + deux écrans de course. Ces deux écrans se répartissent ainsi : — le premier cinquième : rien ne bouge, on regarde la vidéo ; — le reste : on avance dans le mot, puis il s'ouvre. Monter ce chiffre rend la traversée plus lente et plus longue, le descendre la rend plus sèche. Rien d'autre n'est à retoucher : le script raisonne en pourcentage de la course, pas en pixels. */ html.tlx-on .tls{min-height:300svh} /* ========================================================================= 2. L'ÉCRAN COLLANT ------------------------------------------------------------------------- Il fait exactement un écran et reste en haut de la fenêtre tant que la section défile. C'est lui qui contient tout : la vidéo, le mot, la phrase. ========================================================================= */ .tlx__vue{ position:sticky; top:0; height:100svh; /* La découpe est ICI, sur une boîte qui fait exactement la taille de l'écran. C'est le seul endroit où elle est sans danger : le mot grandit jusqu'à déborder très largement, et on veut justement qu'il soit coupé par les bords de la fenêtre — pas par une boîte plus petite qu'elle. Sans cette ligne, le mot géant élargirait la page et ferait apparaître une barre de défilement horizontale. */ overflow:hidden; /* Le centrage du mot, repris mot pour mot de .tls dans toulouse.css. « place-items:center » tout court dimensionnerait la colonne sur le contenu, et le mot, en nowrap, déborderait puis serait coupé. */ display:grid; grid-template-columns:100%; align-items:center; justify-items:stretch; /* Le fond de la section avant que la vidéo ne soit décodée. */ background:#0b0b0c; } /* ========================================================================= 3. LES ÉTAGES ------------------------------------------------------------------------- Du fond vers l'avant : la vidéo, le voile de sortie, le mot, la phrase. Le voile de sortie passe DEVANT la vidéo mais DERRIÈRE le mot : c'est ce qui fait qu'on voit les deux moitiés s'écarter sur du blanc, au lieu de les voir recouvertes par un aplat. ========================================================================= */ .tlx__sortie{ position:absolute; inset:0; z-index:1; background:var(--white,#fff); opacity:0; /* le script est seul à écrire cette valeur */ pointer-events:none; } /* Le mot repasse devant le voile de sortie (il était à 1 dans toulouse.css, donc à égalité). */ .tls__mot{z-index:2} /* La boîte de la phrase du bas. Elle existe pour une seule raison : donner à la traversée un élément à elle pour faire disparaître la phrase. 🔴 effets-scroll.js pilote déjà l'opacité et la transformation de .tls__pied (il fait partie de sa liste BLOCS). Si la traversée écrivait sur le même élément, les deux se disputeraient la main et la phrase sauterait. Ici, chacun a le sien : effets-scroll garde .tls__pied, la traversée prend .tlx__pied. Deux éléments, deux propriétaires, aucun conflit — et rien à retirer dans effets-scroll.js. inset:0 + position:absolute : la phrase, qui est elle-même en absolu avec « bottom », se cale exactement comme avant. */ .tlx__pied{ position:absolute; inset:0; z-index:3; pointer-events:none; } .tlx__pied .tls__pied{pointer-events:auto} /* ========================================================================= 4. LE MOT ET SES DEUX MOITIÉS ------------------------------------------------------------------------- 🔴 TROIS PROPRIÉTAIRES EMBOÎTÉS, QUI NE SE CROISENT JAMAIS : — les huit lettres (.tlm__l) appartiennent à toulouse-mot.js : ce sont elles qui se posent quand la section arrive. Personne d'autre n'écrit leur opacité ni leur transformation. — les deux moitiés (.tlx__moitie) appartiennent à traversee.js : elles ne font QUE se déplacer à gauche et à droite. — le paragraphe (.tlx__mot) appartient à traversee.js : il ne fait QUE grossir. Chacun agit sur son propre élément. Les transformations s'emboîtent naturellement, sans qu'aucune n'écrase l'autre : c'est ce qui permet aux lettres de finir de se poser pendant que la traversée démarre, sans le moindre saut. ========================================================================= */ .tlx__mot{ /* Le point vers lequel on avance : le centre exact du mot, c'est-à-dire l'endroit où il va s'ouvrir, entre le « l » et le « o ». 🔴 CE POINT NE CHANGE JAMAIS. Déplacer un point d'ancrage sur un élément déjà transformé le fait sauter d'un coup. */ transform-origin:50% 50%; backface-visibility:hidden; } .tlx__moitie{ /* Une transformation n'a aucun effet sur du texte en ligne : chaque moitié doit être une boîte. Elles restent côte à côte sur une seule ligne grâce au « white-space:nowrap » de .tls__t. Le script les fabrique sans le moindre espace entre elles : le mot garde exactement la même largeur qu'avant, au pixel près. */ display:inline-block; transform-origin:50% 50%; backface-visibility:hidden; } /* Pendant la traversée seulement, on prévient la carte graphique. On ne le fait pas en permanence : un calque de la taille d'un mot agrandi quatorze fois coûte cher en mémoire, il ne doit exister que le temps du passage. La classe est posée puis retirée par le script. */ .tls.tlx-actif .tlx__mot, .tls.tlx-actif .tlx__moitie, .tls.tlx-actif .tls__fond{will-change:transform} /* ========================================================================= 5. L'INTERRUPTEUR D'URGENCE ------------------------------------------------------------------------- « tlx-off » est posé par le script si quoi que ce soit se passe mal. Il remet la section exactement dans l'état d'avant : un écran de haut, tout en place, plus aucune transformation. ========================================================================= */ html.tlx-off .tls{min-height:100svh} html.tlx-off .tlx__mot, html.tlx-off .tlx__moitie, html.tlx-off .tls__fond{transform:none!important;will-change:auto!important} html.tlx-off .tlx__sortie{display:none} html.tlx-off .tlx__pied{opacity:1!important;transform:none!important} /* ========================================================================= 6. ÉCRANS ÉTROITS ------------------------------------------------------------------------- Sur un téléphone, la course est raccourcie : le doigt fait défiler bien plus lentement qu'une molette, et trois écrans de traversée y paraîtraient interminables. Le geste, lui, est identique — le script raisonne en pourcentage de la course. ========================================================================= */ @media (max-width:640px){ html.tlx-on .tls{min-height:240svh} } /* ========================================================================= 7. PRÉFÉRENCES SYSTÈME ET IMPRESSION ------------------------------------------------------------------------- Le script s'abstient de lui-même quand le système demande moins d'animations : la classe « tlx-on » n'est jamais posée, donc la section fait un écran et le mot reste simplement écrit. Ces règles-ci sont la ceinture par-dessus les bretelles. ========================================================================= */ @media (prefers-reduced-motion:reduce){ html .tls{min-height:100svh} /* On garde une boîte positionnée : la vidéo et la phrase sont en absolu dedans, et le mot y est centré. Simplement, elle ne colle plus. */ html .tlx__vue{position:relative} html .tlx__mot, html .tlx__moitie, html .tls__fond{transform:none!important} html .tlx__sortie{display:none} html .tlx__pied{opacity:1!important;transform:none!important} } @media print{ html .tls{min-height:0} html .tlx__vue{position:relative;height:auto;overflow:visible} html .tlx__mot,html .tlx__moitie{transform:none!important} html .tlx__sortie{display:none} }