diff --git a/index.html b/index.html
index 6332c00..f93852f 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   <link media="all" href="main.css" rel="stylesheet" />
   <meta name="viewport" content="width=device-width">
   <!-- <script src="Y/Scripts/yfold.js"></script> -->
+  <script src="script.js"></script>
 </head>
 
 <body>
@@ -47,11 +48,11 @@
           </tr>
         </table>
       </div>
-      <!-- <script>
+      <script>
         //<![CDATA[
         initYfold('83fe3262');
         //]]>
-      </script> -->
+      </script>
     </section>
     <section class="yfold">
       <h2 class="yfold-title" onclick="toggleYfold('73992071')"><span class="arrow" id="arrow-73992071">&#x25b8;</span>Enseignement</h2>
@@ -117,11 +118,11 @@
           </tr>
         </table>
       </div>
-      <!-- <script>
+      <script>
         //<![CDATA[
         initYfold('73992071');
         //]]>
-      </script> -->
+      </script>
     </section>
   </main>
   <footer>
diff --git a/main.css b/main.css
index e03c0ad..c10104c 100644
--- a/main.css
+++ b/main.css
@@ -6,13 +6,38 @@
 
 html {
   background: #051937;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100vh;
+  position: relative;
+}
+
+.header:before {
+  z-index: 0;
+  content: "CSS";
+  font-size: 200%;
+  color: white;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background: #000;
+  transform: translateX(100%);
+  animation-name: translate;
+  animation-duration: 2s;
 }
 
 body:after, body:before {
   -webkit-clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%);
   clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%);
   display: block;
-  height: 300px;
+  height: 200px;
   position: absolute;
   top: 0;
   left: 0;
@@ -21,12 +46,9 @@ body:after, body:before {
 
 body:after {
   content: "";
-  /* background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
-  background-image: linear-gradient(to right top, #001271, #211880, #371e8e, #4a259d, #5e2bab, #7829ae, #8f27af, #a525b0, #be19a3, #d31295, #e31887, #ef2779); */
   background: linear-gradient(120deg, #113e9e, #b30082, #d31835);
   background-size: 200% 300%;
   opacity: 0.6;
-
   -webkit-animation: AnimationName 15s ease infinite;
   -moz-animation: AnimationName 15s ease infinite;
   animation: AnimationName 15s ease infinite;
@@ -34,37 +56,46 @@ body:after {
 
 body:before {
   height: 650px;
-  margin-top: -200px;
-  background: rgba(189,189,189,0.1);
+  margin-top: -250px;
+  background: rgba(189, 189, 189, 0.1);
   content: "";
 }
 
 .header {
   position: relative;
   z-index: 2;
-  padding: 40px 40px 20px 3vw;
+  padding: 40px 40px 60px 3vw;
+  height: 150px;
 }
 
 .header h1 {
   color: white;
-  padding-left: 10px;
+  margin-left: 10px;
+  padding-bottom: 10px;
   font-weight: lighter;
+  border-bottom: 8px solid #eee;
+  display: inline;
+}
+
+main {
+  min-height: calc(100vh - 320px);
 }
 
 .yfold {
-  background: rgba(189,189,189,0.2);
+  background: rgba(189, 189, 189, 0.2);
   position: relative;
-  z-index: 2;
+  z-index: 1;
   margin: 20px;
   margin-left: 3vw;
   margin-right: 3vw;
-  border-radius: 10px;
+  border-radius: 12px;
   width: clamp(10px, 94vw, 900px);
 }
 
 .yfold-title {
   color: white;
   padding: 10px 12px 5px 15px;
+  cursor: pointer;
 }
 
 .arrow {
@@ -75,8 +106,9 @@ body:before {
   background: #edd;
   position: relative;
   z-index: 2;
-  border-radius: 10px;
+  border-radius: 12px;
   padding: 40px;
+  overflow: hidden;
 }
 
 h1, h2, h3 {
@@ -84,18 +116,142 @@ h1, h2, h3 {
   font-weight: lighter;
 }
 
+.anim-hide {
+  padding-top: 0;
+  padding-bottom: 0;
+  animation-name: disappear;
+	animation-duration: 0.75s;
+	max-height: 0;
+	margin: 0;
+  transition: padding 0.75s ease .3s;
+}
+
+.anim-show {
+  animation-name: appear;
+	animation-duration: 0.75s;
+	max-height: initial;
+	margin: 0 0 3ex 0;
+  transition: padding 0.75s ease .1s;
+}
+
+
+
+
+
+
+footer {
+  bottom: 0px;
+  width: 100%;
+  min-height: 150px;
+  background: #002;
+  opacity: 0.6;
+  padding: 30px 50px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+footer * {
+  margin: 5px 0;
+}
+
+@media (min-width: 1500px) {
+  footer {
+    height: 150px;
+    position: absolute;
+    top: calc(20px + 150px);
+    right: 3vw;
+    width: calc(91vw - 900px);
+    border-radius: 12px;
+  }
+}
+
 @-webkit-keyframes AnimationName {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
+  0% {
+    background-position: 0% 50%
+  }
+
+  50% {
+    background-position: 100% 50%
+  }
+
+  100% {
+    background-position: 0% 50%
+  }
 }
+
 @-moz-keyframes AnimationName {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
+  0% {
+    background-position: 0% 50%
+  }
+
+  50% {
+    background-position: 100% 50%
+  }
+
+  100% {
+    background-position: 0% 50%
+  }
 }
+
 @keyframes AnimationName {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
+  0% {
+    background-position: 0% 50%
+  }
+
+  50% {
+    background-position: 100% 50%
+  }
+
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+@keyframes appear {
+  0% {
+    max-height: 0;
+    margin-bottom: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    margin-bottom: 3ex;
+  }
+}
+
+@keyframes disappear {
+  0% {
+    max-height: 500px;
+    margin-bottom: 3ex;
+  }
+
+  100% {
+    max-height: 0;
+    margin-bottom: 0;
+  }
+}
+
+@keyframes translate {
+  0% {
+    transform: translateX(0%);
+    background: #000;
+  }
+
+  30% {
+    background: #000;
+    color: white;
+  }
+
+  75% {
+    transform: scale(2);
+    background: #002;
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
 }
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8b0c3d0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,81 @@
+
+//
+// Show/hide some sections by clicking on the title.
+//
+// Can be replaced by <details>, <summary> once it is supported by most browsers.
+//
+
+function saveStatus(id, shown) {
+    if (typeof(Storage) !== "undefined") {
+	localStorage.setItem("yfold-shown-" + id, shown) ;
+    }
+}
+
+// record : (when clicked), record the status in local storage
+function setStatus(id, shown, content, record) {
+
+    // console.log ("setStatus (" + id + ", " + shown + ")") ;
+
+    var span = document.getElementById("arrow-" + id) ;
+
+    if (shown) {
+	content.classList.remove("anim-hide") ;
+        content.classList.remove("hidden") ;
+        span.innerHTML = "&#x25be;" ;
+        if (record) { content.classList.add("anim-show") ; }
+        else { content.classList.add("shown") ; }
+    }
+    else {
+        content.classList.remove("anim-show") ;
+        content.classList.remove("shown") ;
+        span.innerHTML = "&#x25b8;" ;
+        if (record) { content.classList.add("anim-hide") ; }
+        else { content.classList.add("hidden") ; }
+    }
+
+    if (record) { saveStatus(id, shown) ; }
+}
+
+// Invoked at load-time once for every yfold section.
+function initYfold(id) {
+
+    // console.log ("initYfold (" + id + ")") ;
+
+    // console.log ("unknown " + id)
+    var shown = true ;
+    var content = document.getElementById("content-" + id) ;
+
+    // Sets the state according to local storage or default value.
+
+    if (typeof(Storage) !== "undefined") {
+	var local = localStorage.getItem("yfold-shown-" + id) ;
+	// console.log ("using storage value = " + local)
+
+	if (local === 'true') {
+	    shown = true ;
+	}
+	else if (local === 'false') {
+	    shown = false ;
+	}
+	else {
+	    // Get default value
+	    var defv = content.getAttribute("data-yfold-default") ;
+	    if (defv === 'hide') {
+		shown = false ;
+	    }
+	    // console.log ("using default value = " + shown)
+	}
+    }
+
+    setStatus(id, shown, content, false) ;
+}
+
+// Function invoked when the title is clicked.
+function toggleYfold(id) {
+
+    // console.log ("toggleYfold (" + id + ")") ;
+
+    var content = document.getElementById("content-" + id) ;
+    var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden") ;
+    setStatus(id, expand, content, true) ;
+}
