titles: hide only what js claims (.variable-title class), drop duplicated selector list (fix: teaser dates invisible for 3s)

web/themes/custom/leshed/assets/js/titles.js

@@ -2,8 +2,10 @@
 import Splitting from "splitting";
 import { hyphenateSync } from "hyphen/fr";
 
-// À garder identique à $variable-title-selectors (main.scss), qui masque ces
-// titres jusqu'à `is-ready`.
+// La classe `variable-title` (posée dans initTitles) masque l'élément via le CSS
+// (.variable-title:not(.is-ready)) jusqu'à ce qu'il soit splitté et marqué
+// `is-ready`. Le CSS ne masque rien que ce fichier ne traite pas : cette liste
+// peut évoluer librement, aucun contenu ne peut rester invisible par désync.
 const TITLE_SELECTORS = '\
   #block-leshed-identitedusite>a, \
   article.node-type-projet>header>h2,\
@@ -14,8 +16,6 @@ const TITLE_SELECTORS = '\
   article.node-type-evenement.view-mode-calendrier h2.node-title,\
   div.views-archives-evenements > h3 > time\
   ';
-  // article.node-type-evenement>header>.field_dates>time,\
-  // article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part,\
 
 // Police Epilogue = axe variable `wght` (100–900) uniquement ; l'italique est
 // un fichier séparé (font-style).

web/themes/custom/leshed/assets/scss/partials/global/_variable-titles.scss

@@ -41,20 +41,15 @@
   // }
 }
 
-// Titres traités par assets/js/titles.js : garder identique à TITLE_SELECTORS.
-$variable-title-selectors: (
-  '#block-leshed-identitedusite>a',
-  'article.node-type-projet>header>h2',
-  'article.node-type-projet>.cols>.left>h2',
-  'article.node-type-projet.view-mode-full h2.node-title',
-  'article.node-type-evenement>header>h2',
-  'article.node-type-evenement>header>.field_dates>time',
-  'article.node-type-evenement.view-mode-full h2.node-title',
-  'article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part',
-);
+// La classe `variable-title` est posée par assets/js/titles.js au moment où
+// il prend en charge un titre. Le CSS ne masque donc QUE des éléments que le
+// JS traite : une désynchronisation de listes de sélecteurs ne peut plus
+// rendre de contenu invisible (c'est ce qui cachait les dates des teasers
+// pendant 3 s — le garde-fou). Un titre non traité par le JS n'est jamais
+// masqué : il reste affiché tel quel.
 
 // Avant le split : même métrique qu'après, pour éviter un saut de mise en page.
-:where(#{$variable-title-selectors}):not(.splitting){
+.variable-title:not(.splitting){
   margin: 0;
   font-weight: 200;
   text-transform: lowercase;
@@ -64,7 +59,7 @@ $variable-title-selectors: (
 
 // Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue.
 @media (scripting: enabled){
-  :where(#{$variable-title-selectors}):not(.is-ready){
+  .variable-title:not(.is-ready){
     visibility: hidden;
     animation: leshed-title-failsafe 0s 3s forwards;
   }