diff --git a/frontend/protos/proto1.html b/frontend/protos/proto1.html
new file mode 100644
index 0000000..4dd093f
--- /dev/null
+++ b/frontend/protos/proto1.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Scroll Snap CSS</title>
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html, body {
+            height: 100%;
+            font-family: Arial, sans-serif;
+        }
+
+        /* NAVBAR */
+        .navbar {
+            position: sticky;
+            top: 0;
+            height: 80px;
+            background: #111;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 10;
+        }
+
+        /* ZONE SCROLLABLE */
+        .scroll-container {
+            height: calc(100vh - 80px);
+            overflow-y: scroll;
+            scroll-snap-type: y mandatory;
+        }
+
+        /* SECTIONS */
+        .section {
+            height: calc(100vh - 80px);
+            scroll-snap-align: start;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+        }
+
+        .section-1 {
+            height: 150px;
+            background: #4caf50;
+        }
+
+        .section-2 {
+            background: #2196f3;
+        }
+
+        .section-3 {
+            background: red;
+        }
+
+        .section-3 {
+            background: yellow;
+        }
+    </style>
+</head>
+<body>
+
+    <nav class="navbar">
+        Navbar sticky
+    </nav>
+
+    <main class="scroll-container">
+        <section class="section section-1">
+            Section 1
+        </section>
+
+        <section class="section section-2">
+            Section 2
+        </section>
+
+        <section class="section section-3">
+            Section 3
+        </section>
+
+        <section class="section section-4">
+            Section 4
+        </section>
+    </main>
+
+</body>
+</html>
diff --git a/frontend/protos/proto2.html b/frontend/protos/proto2.html
new file mode 100644
index 0000000..a1fe10d
--- /dev/null
+++ b/frontend/protos/proto2.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Scroll Snap avec Header Scrollable</title>
+    <style>
+        html, body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            height: 100%;
+
+            /* Scroll snap global */
+            scroll-snap-type: y mandatory;
+            overflow-y: scroll;
+        }
+
+        header {
+            height: 120px;
+            background-color: #34495e;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            scroll-snap-align: start;
+        }
+
+        nav {
+            height: 80px;
+            background-color: #2ecc71;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        section {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+
+            scroll-snap-align: start;
+            scroll-margin-top: 80px;
+        }
+
+        .section-1 {
+            background-color: #ecf0f1;
+            min-height: 200px;
+        }
+
+        .section-2 {
+           background-color: #bdc3c7;
+           height: calc(100vh - 80px);
+        }
+
+        .section-3 {
+            background-color: #95a5a6;
+            min-height: 200vh;
+        }
+
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>Header (120px)</h1>
+    </header>
+
+    <nav>
+        <strong>Navbar sticky (80px)</strong>
+    </nav>
+
+    <section class="section-1">Section 1</section>
+    <section class="section-2">Section 2</section>
+    <section class="section-3">Section 3</section>
+
+</body>
+</html>
+
diff --git a/frontend/protos/proto3.html b/frontend/protos/proto3.html
new file mode 100644
index 0000000..4c80d75
--- /dev/null
+++ b/frontend/protos/proto3.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Scroll Snap avec Header Scrollable</title>
+    <style>
+        html, body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            height: 100%;
+
+            /* Scroll snap global */
+            scroll-snap-type: y mandatory;
+            overflow-y: scroll;
+        }
+
+        header {
+            height: 120px;
+            background-color: #34495e;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            scroll-snap-align: start;
+        }
+
+        nav {
+            height: 80px;
+            background-color: #2ecc71;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        section {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+
+            scroll-snap-align: start;
+            scroll-margin-top: 80px;
+        }
+
+        .section-1 {
+            background-color: #ecf0f1;
+            min-height: 200px;
+        }
+
+        .section-3 {
+            background-color: #95a5a6;
+            min-height: 200vh;
+        }
+
+.section-2 {
+    background-color: #bdc3c7;
+    height: calc(100vh - 80px);
+    padding: 0;
+    display: flex;
+}
+
+/* Conteneur du tableau */
+.table-wrapper {
+    flex: 1;
+    overflow-y: auto;
+}
+
+/* Tableau */
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+/* THEAD sticky */
+thead th {
+    position: sticky;
+    top: 0;
+    background: #ffffff;
+    z-index: 2;
+    border-bottom: 2px solid #999;
+}
+
+/* TFOOT sticky */
+tfoot td {
+    position: sticky;
+    bottom: 0;
+    background: #ffffff;
+    z-index: 2;
+    border-top: 2px solid #999;
+}
+
+/* Style cellules */
+th, td {
+    padding: 12px;
+    border: 1px solid #aaa;
+    text-align: left;
+}
+
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>Header (120px)</h1>
+    </header>
+
+    <nav>
+        <strong>Navbar sticky (80px)</strong>
+    </nav>
+
+    <section class="section-1">Section 1</section>
+<section class="section-2">
+    <div class="table-wrapper">
+        <table>
+            <thead>
+                <tr>
+                    <th>Nom</th>
+                    <th>Valeur</th>
+                    <th>Status</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                <tr><td>Ligne 1</td><td>123</td><td>OK</td></tr>
+                <tr><td>Ligne 2</td><td>456</td><td>OK</td></tr>
+                <tr><td>Ligne 3</td><td>789</td><td>OK</td></tr>
+                <tr><td>Ligne 4</td><td>111</td><td>OK</td></tr>
+                <tr><td>Ligne 5</td><td>222</td><td>OK</td></tr>
+                <tr><td>Ligne 6</td><td>333</td><td>OK</td></tr>
+                <tr><td>Ligne 7</td><td>444</td><td>OK</td></tr>
+                <tr><td>Ligne 8</td><td>555</td><td>OK</td></tr>
+                <tr><td>Ligne 9</td><td>666</td><td>OK</td></tr>
+                <tr><td>Ligne 10</td><td>777</td><td>OK</td></tr>
+            </tbody>
+
+            <tfoot>
+                <tr>
+                    <td colspan="3">Total : 10 éléments</td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</section>
+
+    <section class="section-3">Section 3</section>
+
+</body>
+</html>
+

Nom	Valeur	Status
Ligne 1	123	OK
Ligne 2	456	OK
Ligne 3	789	OK
Ligne 4	111	OK
Ligne 5	222	OK
Ligne 6	333	OK
Ligne 7	444	OK
Ligne 8	555	OK
Ligne 9	666	OK
Ligne 10	777	OK
Total : 10 éléments