diff --git a/frontend/protos/index.html b/frontend/protos/index.html
index b3e326e..28d34d6 100644
--- a/frontend/protos/index.html
+++ b/frontend/protos/index.html
@@ -115,16 +115,6 @@
     }
   }
 
-  after_section_header.addEventListener("click", function() {
-    logMsg('etatSection','toggle section_header ');
-    toggleElement(section_header);
-  });
-
-  after_section_synthese.addEventListener("click", function() {
-    logMsg('etatSection','toggle section_synthese ');
-    toggleElement(section_synthese);
-  });
-
   function scrollToElement(elementSelector) {
     const element = document.querySelector(elementSelector);
     if (element) {
@@ -168,6 +158,18 @@
     etatSections(currentEtat);
   }
 
+  after_section_synthese.addEventListener("click", function() {
+    logMsg('etatSection','toggle section_synthese ');
+    if (currentEtat==3) changeEtatDown();
+    else changeEtatUp();
+  });
+
+  after_section_header.addEventListener("click", function() {
+    logMsg('etatSection','toggle section_header ');
+    if (currentEtat==2) changeEtatDown();
+    else changeEtatUp();
+  });
+  
   function beforeHeaderVisibility(_visible) {
     intersectionObserverLog('TRIGGER '+arguments.callee.name);
     if (!_visible) {
diff --git a/frontend/protos/styles.css b/frontend/protos/styles.css
index 2060240..dcf930e 100644
--- a/frontend/protos/styles.css
+++ b/frontend/protos/styles.css
@@ -26,7 +26,8 @@
   --section-header-height: 120px;
   --section-navbar-height: var(--section-min-height);
   --section-synthese-height: 120px;
-  --section-principale-height: 800px;
+  --section-principale-height: 400px;
+  --section-footer-height: 100vh;
 }
 
 @font-face {
@@ -105,10 +106,13 @@ body {
     background-color: pink;
     height: var(--section-synthese-height);
 }
+
 .principale {
     height: var(--section-principale-height);
 }
+
 .footer {
     background-color: greenyellow;
+    height: var(--section-footer-height);
 }