diff --git a/frontend/protos/index.html b/frontend/protos/index.html
new file mode 100644
index 0000000..d4fcb01
--- /dev/null
+++ b/frontend/protos/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+ template ZONES
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/protos/zones.css b/frontend/protos/zones.css
new file mode 100644
index 0000000..f4e1555
--- /dev/null
+++ b/frontend/protos/zones.css
@@ -0,0 +1,115 @@
+:root {
+
+ --dark-mode: 1;
+
+ --r-sombre: 0;
+ --g-sombre: 0;
+ --b-sombre: 0;
+
+ --r-clair: 245;
+ --g-clair: 245;
+ --b-clair: 240;
+
+ --rgb-sombre: var(--r-sombre), var(--g-sombre), var(--b-sombre);
+ --rgb-clair: var(--r-clair), var(--g-clair), var(--b-clair);
+
+ --couleur-sombre: rgb(var(--rgb-sombre));
+ --couleur-clair: rgb(var(--rgb-clair));
+
+ --couleur-texte: black;
+ --couleur-fond: var(--couleur-clair);
+
+ --header-height: 400px;
+ --nav-height: 80px;
+}
+
+@font-face {
+ font-family: 'Fonte-Texte';
+ font-display: fallback;
+ /* Penser à bien héberger la font sur le même domaine que mon site */
+ src: url(../fonts/Fonte-Texte.woff2) format('woff2');
+ /* Réutiliser ici exactement la même liste unicode que ci-dessus */
+ unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
+ U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
+ U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
+ U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
+}
+
+@font-face {
+ font-family: 'Fonte-Titre';
+ font-display: fallback;
+ /* Penser à bien héberger la font sur le même domaine que mon site */
+ src: url(../fonts/Fonte-Titre.woff2) format('woff2');
+ /* Réutiliser ici exactement la même liste unicode que ci-dessus */
+ unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
+ U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
+ U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
+ U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
+}
+
+html {
+ scroll-behavior: smooth;
+ font-family: Fonte-Texte, monospace;
+ max-width: 95%;
+ padding-left: 0;
+ padding-right: 0;
+ margin: 0 auto;
+ background: var(--couleur-fond);
+}
+
+body {
+ padding: 0;
+ margin: 0;
+ height:100%;
+}
+
+#before_header {
+ color: var(--couleur-texte);
+ background-color: black;
+ height: 5px;
+}
+header {
+ position: sticky;
+ color: var(--couleur-texte);
+ background-color: aqua;
+ height: var(--header-height);
+}
+#after_header {
+ color: var(--couleur-texte);
+ background-color: black;
+ height: 1px;
+}
+
+#before_nav {
+ color: var(--couleur-texte);
+ background-color: red;
+ height: 5px;
+}
+nav {
+ color: var(--couleur-texte);
+ background-color: yellow;
+ height: var(--nav-height);
+}
+#after_nav {
+ color: var(--couleur-texte);
+ background-color: red;
+ height: 5px;
+}
+
+#synthese {
+ color: var(--couleur-texte);
+ background-color: rgb(252, 130, 201);
+ min-height: 80px;
+}
+
+#principale {
+ color: var(--couleur-texte);
+ background-color: rgb(63, 15, 177);
+ min-height: 1000px;
+}
+
+footer {
+ color: var(--couleur-texte);
+ background-color: rgb(9, 138, 15);
+ min-height: 80px;
+}
diff --git a/frontend/protos/zones.js b/frontend/protos/zones.js
new file mode 100644
index 0000000..d08a96d
--- /dev/null
+++ b/frontend/protos/zones.js
@@ -0,0 +1,80 @@
+const intersectionObserverRegistry = new Object();
+function setIntersectionObserverRegistry(parametre, valeur)
+{
+ intersectionObserverRegistry[parametre] = valeur;
+}
+function getIntersectionObserverRegistry(parametre)
+{
+ return intersectionObserverRegistry[parametre];
+}
+function entryVisiblity(_id, _visible) {
+ let entry=getIntersectionObserverRegistry(_id);
+ if (entry) return entry(_visible);
+ return consoleLog(_id, _visible)
+}
+
+// Create a function that will handle any intersection between some elements and the viewport.
+const handleIntersectionObserverEntries = function (entries) {
+ entries.forEach(entry => {
+ if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);
+ });
+}
+const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries);
+
+function addIntersectionObserverEntry(_id, _func)
+{
+ let item = document.querySelector('#'+_id);
+ if ((item) && (intersectionObserver)) {
+ setIntersectionObserverRegistry(_id, _func);
+ intersectionObserver.observe(item);
+ }
+}
+
+function consoleLog(_id, _visible) {
+ if (_visible) {
+ console.log(_id + ' is Visible');
+ } else {
+ console.log(_id + ' is NOT Visible');
+ }
+}
+
+
+function scrollToElement(elementSelector) {
+ let element = document.querySelector(elementSelector);
+ if (element) element.scrollIntoView({ behavior: 'smooth' });
+}
+
+function beforeHeaderVisibility(_visible) {
+ console.log('TRIGGER beforeHeaderVisibility');
+ if (_visible) {
+ console.log('HEADER is Visible');
+ } else {
+ console.log('HEADER is NOT Visible');
+ scrollToElement('#before_nav');
+ }
+}
+function afterHeaderVisibility(_visible) {
+ console.log('TRIGGER afterHeaderVisibility');
+ if (_visible) {
+ scrollToElement('#before_header');
+ } else {
+ console.log('HEADER is NOT Visible');
+ }
+}
+
+function beforeNavVisibility(_visible) {
+ console.log('TRIGGER beforeNavVisibility');
+ let synthese=document.querySelector('#synthese');
+ if (synthese) {
+ if (_visible) {
+ synthese.style.display="block";
+ } else {
+ synthese.style.display="none";
+ }
+ }
+}
+
+addIntersectionObserverEntry("before_header", beforeHeaderVisibility);
+addIntersectionObserverEntry("after_header", afterHeaderVisibility);
+
+addIntersectionObserverEntry("before_nav", beforeNavVisibility);