nav code is now fully fonctional

sites/all/themes/gui/jee/css/jee.scss

@@ -27,11 +27,28 @@ $column-gutter: rem-calc(20);
 
 html{
   position:relative;
+  // overflow:hidden;
+  // height:100%;
 }
 
 body{
   position:relative;
+  user-select:none;
   height:100%!important;
+  // min-height:1000px;
+  width:100%;;
+  overflow:hidden;
+}
+
+#root{
+  position:relative;
+  width:100%;
+  height:100%;
+  overflow: hidden;
+  // width:1125px;
+  // height:900px;
+  // margin:-450px auto 0;
+  // top:50%;
 
   /* IE10 Consumer Preview */
   background-image: -ms-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
@@ -45,17 +62,7 @@ body{
   background-image: -webkit-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
   /* W3C Markup, IE10 Release Preview */
   background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);
-}
 
-#root{
-  position:relative;
-  width:100%;
-  height:100%;
-  overflow: hidden;
-  // width:1125px;
-  // height:900px;
-  // margin:-450px auto 0;
-  // top:50%;
 }
 
 @keyframes introLogo{
@@ -79,10 +86,6 @@ body{
   100%  {opacity:0;}
 }
 
-body{
-  user-select:none;
-}
-
 $animeLogoDuration:8s;
 
 #header{
@@ -93,9 +96,9 @@ $animeLogoDuration:8s;
   top:50%; left:50%;
   margin-left:-350px;
   margin-top:-155px;
-  transition-property: "transform";
-  transition-duration: 0.2s;
-  transition-timing-function:ease-out;
+  // transition-property: "transform";
+  // transition-duration: 0.2s;
+  // transition-timing-function:ease-out;
   animation-fill-mode: forwards;
 
   h1{
@@ -132,7 +135,6 @@ $animeLogoDuration:8s;
     animation: introSlogan $animeLogoDuration linear 0s;
     animation-fill-mode: forwards;
   }
-
 } // #header
 
 div.messages{
@@ -145,19 +147,28 @@ div.messages{
 #main{
   position:absolute;
   width:100%; height:100%;
+  overflow:hidden;
 
   &>.region, &>.region>.block-system, &>.region>.block-system>.content{
     position:relative;
     width:100%; height:100%;
+    overflow:hidden;
   }
 
   .node-chapitre.node-teaser{
       position:absolute;
-      transition: transform 0.2s ease-out;
+      // transition:0.1s ease-out;
+      // transition-property:transform;
       // animation-fill-mode: forwards;
 
       // INTERACTIVITÉ - - - - - - - - - - - --
       // ----- DEFAULT MODE ----
+      h2.node-title{
+        transform:none;
+        transform-origin:bottom center;
+        transition:1s ease-out;
+        transition-property:transform;
+      }
       .field-name-field-comprendre{
         opacity:0; height:1px; overflow:hidden;
         transition:1s ease-out;
@@ -166,7 +177,7 @@ div.messages{
       .field-name-field-partie{
           opacity:0;
           position:absolute;
-          transition:1s ease-out 1s;
+          transition:1s ease-out 0.5s;
           transition-property: opacity transform;
           // just let see the field vignette of first partie
           &:nth-child(3){
@@ -175,7 +186,7 @@ div.messages{
             transition-delay:0;
             >.field-type-text{
               opacity:0;
-              transition:1s ease-out 1s;
+              transition:1s ease-out 0.5s;
               transition-property: opacity;
             }
             >.field-name-field-vignette{cursor:pointer;z-index:2;}
@@ -195,10 +206,15 @@ div.messages{
         transition: 3s ease-out;
         transition-property:opacity;
       }
+      .line{
+        // transition: 0.5s ease-out;
+        // transition-property:height transform;
+      }
 
        // ----- PREVIEW MODE ------
       &.previewed{
         &:after{opacity:1;}
+        h2.node-title{transform:scale(2,2);}
         .field-name-field-comprendre{opacity:1; height:6em;}
         .links{opacity:1;>*{display:block;}}
         .field-name-field-partie{
@@ -229,7 +245,7 @@ div.messages{
         text-transform: uppercase;
         text-align: center;
         max-width: 8.5em;
-        line-height: 1.1em;
+        line-height: 0.85;
         @media #{$large-up} {
           font-size: 1.3em;
         }
@@ -262,7 +278,7 @@ div.messages{
         background-repeat: no-repeat;
         background-origin: center center;
       }
-      .field-type-text{ min-width:14em; }
+      .field-type-text{ min-width:16em; }
       .field-name-field-titre{
         font-family: "epflul";
         font-size:1.6em;
@@ -302,8 +318,6 @@ div.messages{
         transform-origin:top left;
         width:2px; background-color:red;
         opacity:0.4;
-        // transition: 3s ease-out;
-        // transition-property:height;
       }
 
   } // node-chapitre
@@ -370,7 +384,6 @@ div.messages{
     position:absolute;
     top:0; left:0; bottom:0; right:0;
   }
-
 } // main
 
 #footer{
@@ -380,4 +393,29 @@ div.messages{
     display:inline-block;
     vertical-align: top;
   }
+}
+
+.backdom{
+  display:none;
+}
+
+#fullscreen-btn{
+  position:fixed;
+  top:20px; left:20px;
+  z-index: 1000;
+}
+
+// DEBUG
+#fps{
+  position:fixed;
+  top:20px; right:20px;
+  z-index: 1000;
+}
+
+#nav-cursor{
+  position:absolute;
+  width:6px; height:6px;
+  margin-top: -3px; margin-left: -3px;
+  background-color: red;
+  z-index:1000;
 }