/* =========================================================================
   TOULOUSE — le mot en gris, qui se pose lettre par lettre
   -------------------------------------------------------------------------
   Le nom de la ville ne se remplit plus de couleur : il est gris, et il
   ARRIVE. Chaque lettre monte de sous sa ligne et vient se poser, les deux
   du milieu d'abord, puis les suivantes vers les bords. Le mot s'ouvre donc
   depuis son centre, au lieu d'être balayé de gauche à droite comme
   « Sitero » plus haut dans la page : les deux moments ne se ressemblent
   plus.

   Le corps, la police, le centrage et le débordement volontaire du mot
   restent ceux de « .tls__t » (assets/css/toulouse.css). Ce fichier ne
   s'occupe que de la couleur et du comportement des lettres.

   🔴 AU REPOS, LE MOT EST ENTIER, GRIS ET IMMOBILE. Aucune règle ici ne le
   masque. C'est le script qui l'efface, au dernier moment, une fois GSAP
   confirmé — et seulement pour le faire revenir. Sans JavaScript, sans
   GSAP, ou en cas d'erreur, on lit « Toulouse » normalement.
   ========================================================================= */

/* ---------- le mot ---------- */
.tlm__mot{
  /* Le gris, choisi sur la photo elle-même et non au jugé. Trois valeurs ont
     été comparées à l'écran, sur la vue du Capitole :
       #c8cdd5 — trop clair, il passe pour du blanc ;
       #98a0ab — trop sombre, le haut des lettres se perd dans la façade ;
       #aeb5bf — celui-ci : franchement gris, et lisible partout.
     Un seul propriétaire pour la couleur : ce fichier. Le script n'y touche
     jamais, il ne pilote que l'opacité et la position. */
  color:#aeb5bf;

  /* Une ombre très douce, pour les endroits où la photo est claire derrière
     une lettre. Elle est peinte une fois pour toutes ; comme l'animation ne
     joue que sur l'opacité et la transformation, elle n'est jamais
     recalculée pendant le mouvement. */
  text-shadow:0 .010em .05em rgba(0,0,0,.34);
}

/* ---------- une lettre ---------- */
.tlm__l{
  /* Une transformation n'a aucun effet sur du texte en ligne : il faut que
     chaque lettre soit une boîte. Mesuré dans le navigateur : découper le
     mot en boîtes ne change sa largeur que de 0,03 px sur 1 394 — le
     crénage de Poppins ne joue pas sur « Toulouse ». Le calage à 96,8 % de
     l'écran est donc conservé au pixel près. */
  display:inline-block;

  /* La lettre grandit depuis son pied, pas depuis son milieu : c'est ce qui
     fait qu'elle se POSE au lieu de se gonfler sur place. */
  transform-origin:50% 92%;

  /* Le texte en mouvement est rendu par le GPU ; sans cette ligne, Chrome
     repasse par un rendu logiciel à la fin du déplacement et la lettre
     « claque » d'un demi-pixel. */
  backface-visibility:hidden;
}

/* ---------- préférences système ----------
   Rien à neutraliser : l'état de repos est déjà l'état final. Le script
   s'abstient de lui-même quand le système demande moins d'animations, et
   le mot reste simplement écrit. */