added click on chemin de fer, click on arrows, etc

css/dist/main.css

@@ -3,14 +3,33 @@ html, body {
   padding: 0;
   background-color: #1A1A1A; }
 
+#root {
+  height: 207.26mm;
+  margin: 0 auto;
+  position: relative;
+  width: 475.04741mm; }
+
 #header {
-  position: fixed;
-  display: none; }
+  display: absolute;
+  top: 0;
+  left: 0;
+  width: 15mm;
+  height: 100%;
+  background-color: white; }
+  #header h1 {
+    margin: 0;
+    padding: 0.3em;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform-origin: 0% 0%;
+    transform: rotate(270deg); }
 
 #main {
-  height: 207.26mm;
-  width: 455.04741mm;
-  margin: 0 auto; }
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 455.04741mm; }
   #main #page-left {
     float: left;
     background-position: right; }
@@ -44,3 +63,55 @@ html, body {
         cursor: pointer; }
     #main .page.page-6 .overlay {
       background-image: url("../../images/vectos/04_chance-RB.svg"); }
+  #main #navigation {
+    position: absolute;
+    z-index: 3;
+    bottom: 0;
+    width: 100%;
+    padding: 2mm 0;
+    background-color: rgba(26, 26, 26, 0.7);
+    overflow: hidden;
+    text-align: center;
+    opacity: 0;
+    transition: opacity .3s ease-in-out; }
+    #main #navigation:hover {
+      opacity: 1; }
+  #main #pagination {
+    color: #fff;
+    font-size: 1em;
+    padding: 0 0 2mm 0; }
+    #main #pagination div {
+      display: inline-block;
+      width: 49%; }
+      #main #pagination div.wrapper-l {
+        left: 0;
+        text-align: left; }
+      #main #pagination div.wrapper-r {
+        right: 0;
+        text-align: right; }
+      #main #pagination div span.l {
+        cursor: pointer;
+        line-height: -1; }
+  #main #railway ul {
+    padding: 1mm;
+    margin: 0; }
+    #main #railway ul li {
+      display: inline-block;
+      vertical-align: middle;
+      background-color: white;
+      width: 1mm;
+      height: 7mm;
+      margin-left: 0.5mm;
+      background-position: center;
+      background-size: cover;
+      opacity: 0.2;
+      transition: opacity 0.3s ease-in-out; }
+      #main #railway ul li.active {
+        width: 7mm;
+        cursor: pointer; }
+      #main #railway ul li.page-right {
+        margin-right: 1mm; }
+      #main #railway ul li.current, #main #railway ul li.active:hover {
+        opacity: 1; }
+    #main #railway ul:hover li {
+      opacity: 1; }

css/main.scss

@@ -4,6 +4,7 @@ html,body{
 }
 
 $debug:false;
+$tranchew:15mm;
 $pw:227.41mm;
 $ph:207.26mm;
 $mt:1cm;
@@ -11,15 +12,33 @@ $mb:1cm;
 $me:1cm;
 $mi:1cm;
 
+#root{
+  height:$ph;
+  margin:0 auto;
+  position: relative;
+  width:$tranchew+5+2.001*$pw;
+}
+
 #header{
-  position: fixed;
-  display: none;
+  display: absolute;
+  top: 0; left:0;
+  width: $tranchew; height: 100%;
+  background-color: white;
+
+  h1{
+    margin: 0; padding:0.3em;
+    position: absolute;
+    bottom:0; left:0;
+    transform-origin: 0% 0%;
+    transform: rotate(270deg);
+  }
 }
 
 #main{
-  height:$ph;
+  position: absolute;
+  top:0; right:0;
   width:2.001*$pw;
-  margin:0 auto;
+
   #page-left{
     float:left;
     // padding:$mt $mi $mb $me;
@@ -75,6 +94,59 @@ $mi:1cm;
     }
   }
 
+  #navigation{
+    position:absolute; z-index: 3;
+    bottom:0; width:100%; // height:2cm;
+    padding:2mm 0;
+    background-color: rgba(26, 26, 26, 0.7);
+    overflow: hidden;
+    text-align: center;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    &:hover{opacity: 1;}
+  }
 
+  #pagination{
+    color:#fff;
+    font-size: 1em;
+    padding: 0 0 2mm 0;
+    div{
+      display: inline-block;
+      width:49%;
+      &.wrapper-l{left:0; text-align: left;}
+      &.wrapper-r{right:0; text-align: right;}
+      span.p{
+
+      }
+      span.l{
+        cursor: pointer;
+        line-height: -1;
+      }
+    }
+  }
+
+  #railway{
+    ul{
+      padding:1mm; margin:0;
+      li{
+        display: inline-block; vertical-align: middle;
+        background-color: white;
+        width:1mm; height:7mm;
+        margin-left: 0.5mm;
+        background-position: center;
+        background-size: cover;
+        &.active{
+          width:7mm; cursor: pointer;
+        }
+        &.page-right{
+          margin-right: 1mm;
+        }
+        opacity:0.2;
+        transition: opacity 0.3s ease-in-out;
+        &.current, &.active:hover{opacity: 1;}
+      }
+      &:hover li{opacity: 1;}
+    }
+  }
 
 }