home double colonne vitesse différente, page projet empilement des images

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

@@ -210,6 +210,10 @@ header[role="banner"]{
 
 div.layout.layout--twocol-section--50-50{
   flex-wrap: nowrap;
+  // Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
+  // même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
+  // flex-start = chaque colonne prend la hauteur de son contenu.
+  align-items: flex-start;
 
   column-gap: $colsgap;
   div.layout__region{
@@ -298,10 +302,27 @@ article.node-type-projet.view-mode-full{
         }
       }
       &.right{
+        // Étire .field_images sur toute la hauteur de la colonne (= colonne la
+        // plus haute, via le stretch de .cols) : le contexte de collage sticky
+        // couvre alors tout le scroll, donc les cartes restent figées tant que
+        // la colonne gauche défile encore (cf. point 6).
+        display: flex;
+        .field_images{
+          flex: 1;
+        }
         img{
           max-width: 100%;
           height: auto;
         }
+        // Empilement "cartes" : chaque image se fige au même endroit (haut) et
+        // est recouverte par la suivante (l'ordre du DOM fait que la dernière
+        // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
+        @media (min-width: 768px){
+          .field_images .field-item{
+            position: sticky;
+            top: 0;
+          }
+        }
       }
     }
   }