responsive breakpoints framework

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

@@ -43,6 +43,15 @@ gsap.registerPlugin(ScrollTrigger);
     const gsap_mm = gsap.matchMedia();
     console.log('gsap_mm', gsap_mm);
 
+    // Frontière mobile ↔ tablette : source unique = _breakpoints.scss,
+    // publiée en variable CSS --bp-mobile par _base.scss. Plus de littéral
+    // ici — le couple mq(mobile)/mq-above(mobile) du CSS est exclusif par
+    // construction, le JS doit l'être aussi (bug « à 768px pile », review #94).
+    const bpMobile = getComputedStyle(document.documentElement)
+      .getPropertyValue('--bp-mobile').trim() || '767px';
+    // Condition desktop STRICTEMENT au-dessus de la zone mobile, complémentaire du CSS.
+    const desktopQuery = `(min-width: calc(${bpMobile} + 1px))`;
+
     // Instance Lenis partagée : initPageFull en a besoin pour resynchroniser la
     // plage de scroll après avoir gonflé le spacer (voir ensureScrollForTitle).
     let lenis = null;
@@ -134,7 +143,7 @@ gsap.registerPlugin(ScrollTrigger);
       if (!scroller || !firstColumn || !secondColumn) return;
 
 
-      gsap_mm.add('(min-width: 768px)', () => {
+      gsap_mm.add(desktopQuery, () => {
         [firstColumn, secondColumn].forEach((column) => {
           gsap.to(column, {
             // Distance à parcourir pour que le bas de la colonne arrive en
@@ -191,7 +200,7 @@ gsap.registerPlugin(ScrollTrigger);
       // layoutSync() dimensionne les colonnes AVANT la création des ScrollTriggers.
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          gsap_mm.add('(min-width: 768px)', () => {
+          gsap_mm.add(desktopQuery, () => {
 
             const viewport = () => scroller.clientHeight;