diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ec50337
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Gratin Dauphinois</title>
+</head>
+<body>
+  <h1>Recette de Gratin Dauphinois</h1>
+
+  <label for="portions">Nombre de personnes :</label>
+  <input type="number" id="portions" value="4" min="1" onchange="updateQuantities()">
+
+  <h2>Ingrédients</h2>
+  <ul>
+    <li><span id="pommes">1</span> kg de pommes de terre</li>
+    <li><span id="creme">25</span> cl de crème fraîche épaisse</li>
+    <li><span id="lait">25</span> cl de lait entier</li>
+    <li><span id="ail">1</span> gousse d'ail</li>
+    <li><span id="fromage">60</span> g de fromage râpé</li>
+  </ul>
+
+  <script>
+    const base = {
+      pommes: 1,      // kg
+      creme: 25,      // cl
+      lait: 25,       // cl
+      ail: 1,         // gousse
+      fromage: 60     // g
+    };
+
+    function updateQuantities() {
+      const portions = document.getElementById("portions").value;
+      document.getElementById("pommes").textContent = (base.pommes * portions / 4).toFixed(2);
+      document.getElementById("creme").textContent = (base.creme * portions / 4).toFixed(2);
+      document.getElementById("lait").textContent = (base.lait * portions / 4).toFixed(2);
+      document.getElementById("ail").textContent = Math.ceil(base.ail * portions / 4);
+      document.getElementById("fromage").textContent = (base.fromage * portions / 4).toFixed(0);
+    }
+  </script>
+</body>
+</html>
