From b56713cfb49deca8dd53888c612464ed851ed693 Mon Sep 17 00:00:00 2001
From: Hogu <flugoxx@gmail.com>
Date: Thu, 5 Mar 2026 18:27:49 +0100
Subject: [PATCH] =?UTF-8?q?j'ai=20retir=C3=A9=20des=20commentaires=20pas?=
 =?UTF-8?q?=20utiles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 967 +++++++++++++++++++++++++++--------------------------
 1 file changed, 493 insertions(+), 474 deletions(-)
diff --git a/index.html b/index.html
index c4d7c1b..0b90dea 100755
--- a/index.html
+++ b/index.html
@@ -1,474 +1,493 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" href="assets/style.css" />
-  <title>Calculateur d'épices</title>
-</head>
-
-<body>
-  <!-- div contenant le titre -->
-  <div id="titre">
-    <h1 id="grandTitre">Calcul des épices</h1>
-  </div>
-  <br />
-  <script>
-    let poids_planche = 4.4;
-    const bassines = [
-      { Nom: "Niagara", tare: 6.5 },
-      { Nom: "Manu Chao", tare: 2.7 },
-      { Nom: "Kamini", tare: 2.7 },
-      { Nom: "Tina", tare: 2.7 },
-      { Nom: "Garou", tare: 6.0 },
-      { Nom: "Johnny", tare: 2.7 },
-      { Nom: "Vanessa", tare: 1.7 },
-      { Nom: "Joséphine", tare: 4.9 },
-      { Nom: "Céline", tare: 6.0 },
-      { Nom: "Dalida", tare: 2.5 },
-      { Nom: "Florent", tare: 2.7 },
-      { Nom: "Petite bassine ronde verte (JM)", tare: 1.7 },
-      { Nom: "Grande bassine verte", tare: 2.7 },
-      { Nom: "Caisse grise", tare: 2.45 },
-      { Nom: "Caisse verte", tare: 2.6 },
-    ];
-
-    const col = [
-      "Bassine",
-      "Couenne ?",
-      "Poids brut",
-      "Tare bassine",
-      "Net",
-      "Sel (Kg)",
-      "Poivre (g)",
-      "Poivre concassé (g)",
-      "Muscade (g)",
-      "Ail (g)",
-    ];
-
-    const getElementValue = (id) =>
-      parseFloat(document.getElementById(id).value) || 0;
-    const getElementText = (id) => {
-      const el = document.getElementById(id);
-      if (!el) {
-        console.warn("Element introuvable :", id);
-        return 0;
-      }
-      return parseFloat(el.innerHTML) || 0;
-    };
-
-    function calculEpices(ligne) {
-      const poidsBrut = getElementValue("Poids_bassine_" + ligne);
-      if (poidsBrut) {
-        const tare = getElementText("tare_" + ligne);
-        const net = (poidsBrut - tare - poids_planche).toFixed(3);
-        document.getElementById("Net" + ligne).innerHTML = net;
-        const propSel = getElementValue("Prop_sel");
-        const propPoivre = getElementValue("Prop_poivre");
-        const propMuscade = getElementValue("Prop_muscade");
-        const propAil = getElementValue("Prop_ail");
-        let qteSel;
-        if (!document.getElementById("isCouenne" + ligne).checked) {
-          qteSel = net * propSel
-        } else {
-          qteSel = net * (propSel / 2)
-        };
-        document.getElementById("Sel (Kg)" + ligne).innerHTML = (
-          qteSel
-        ).toFixed(3);
-        document.getElementById("Poivre (g)" + ligne).innerHTML = (
-          (net * propPoivre) * 0.6
-        ).toFixed(3);
-        document.getElementById("Poivre concassé (g)" + ligne).innerHTML = (
-          (net * propPoivre) * 0.4
-        ).toFixed(3);
-        document.getElementById("Muscade (g)" + ligne).innerHTML = (
-          net * propMuscade
-        ).toFixed(3);
-        document.getElementById("Ail (g)" + ligne).innerHTML = (
-          net * propAil
-        ).toFixed(3);
-      } else {
-        ["Net", "Sel (Kg)", "Poivre (g)", "Poivre concassé (g)", "Muscade (g)", "Ail (g)"].forEach(
-          (colonne) => {
-            document.getElementById(colonne + ligne).innerHTML = "";
-          }
-        );
-      }
-      calculerTotaux(); // Recalcul des totaux après chaque changement
-    }
-
-    const recalculerToutesLignes = () => {
-      for (let i = 1; i <= bassines.length; i++) {
-        calculEpices(i);
-      }
-    };
-
-    function calculerTotaux() {
-      let totalNet = 0,
-        totalSel = 0,
-        totalPoivre = 0,
-        totalPoivreConcasse = 0,
-        totalMuscade = 0,
-        totalAil = 0;
-
-      for (let i = 1; i <= bassines.length; i++) {
-        totalNet += getElementText("Net" + i);
-        totalSel += getElementText("Sel (Kg)" + i);
-        totalPoivre += getElementText("Poivre (g)" + i);
-        totalPoivreConcasse += getElementText("Poivre concassé (g)" + i);
-        totalMuscade += getElementText("Muscade (g)" + i);
-        totalAil += getElementText("Ail (g)" + i);
-      }
-
-      document.getElementById("Total_Net").innerHTML = totalNet.toFixed(3);
-      document.getElementById("Total_Sel").innerHTML = totalSel.toFixed(3);
-      document.getElementById("Total_Poivre").innerHTML =
-        totalPoivre.toFixed(3);
-      document.getElementById("Total_Poivre_Concasse").innerHTML =
-        totalPoivreConcasse.toFixed(3);
-      document.getElementById("Total_Muscade").innerHTML =
-        totalMuscade.toFixed(3);
-      document.getElementById("Total_Ail").innerHTML = totalAil.toFixed(3);
-
-      // Calcul du total assaisonné et rendement
-      calculerTotalAssaisonne();
-    }
-
-    function calculerTotalAssaisonne() {
-      const totalNet = getElementText("Total_Net");
-      const totalSel = getElementText("Total_Sel");
-      const totalPoivre = getElementText("Total_Poivre");
-      const totalPoivreConcasse = getElementText("Total_Poivre_Concasse");
-      const totalMuscade = getElementText("Total_Muscade");
-      const totalAil = getElementText("Total_Ail");
-
-      const totalAssaisonne =
-        totalNet + totalSel + totalPoivre / 1000 + totalPoivreConcasse / 1000 + totalMuscade / 1000 + totalAil / 1000;
-      document.getElementById("Total_Assaisonne").innerHTML =
-        totalAssaisonne.toFixed(3);
-
-      const totalAchete = getElementValue("Total_Achete");
-      if (totalAchete > 0) {
-        const totalNet = document.getElementById("Total_Net").innerHTML;
-        const rendement = (totalNet / totalAchete) * 100;
-        document.getElementById("Rendement").innerHTML =
-          rendement.toFixed(3) + " %";
-      } else {
-        document.getElementById("Rendement").innerHTML = "0 %";
-      }
-    }
-
-    const body = document.body;
-    const formulaire = document.createElement("form");
-    formulaire.setAttribute("class", "form-grid");
-
-    /*test*/
-    // ---- Début Intégration LocalStorage ----
-    const STORAGE_KEY = 'calculateurEpices';
-    const MAX_AGE = 48 * 60 * 60 * 1000; // 72h
-
-    function sauvegarderFormulaire() {
-      const data = { timestamp: Date.now(), values: {} };
-      document.querySelectorAll('input').forEach(input => {
-        data.values[input.id] = input.type === 'checkbox' ? input.checked : input.value;
-      });
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-    }
-
-    function restaurerFormulaire() {
-      const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
-      if (saved && Date.now() - saved.timestamp < MAX_AGE) {
-        for (const [id, value] of Object.entries(saved.values)) {
-          const input = document.getElementById(id);
-          if (input) {
-            if (input.type === 'checkbox') input.checked = value;
-            else input.value = value;
-          }
-        }
-      } else {
-        localStorage.removeItem(STORAGE_KEY);
-      }
-    }
-
-    window.addEventListener('DOMContentLoaded', () => {
-      restaurerFormulaire();
-      recalculerToutesLignes();
-    });
-
-    document.body.addEventListener('input', sauvegarderFormulaire);
-    document.body.addEventListener('change', sauvegarderFormulaire);
-    // Table des proportions et du poids de la planche
-    const proportionTable = document.createElement("table");
-    proportionTable.setAttribute("id", "TableauProportions");
-    const proportionBody = document.createElement("tbody");
-
-    // Ajout du poids de la planche
-    const poidsPlancheRow = document.createElement("tr");
-    const poidsPlancheLabelCell = document.createElement("td");
-    const poidsPlancheInputCell = document.createElement("td");
-
-    const poidsPlancheLabel = document.createElement("label");
-    poidsPlancheLabel.setAttribute("for", "Poids_planche");
-    poidsPlancheLabel.innerHTML = "Poids de la planche (Kg)";
-
-    const poidsPlancheInput = document.createElement("input");
-    poidsPlancheInput.setAttribute("id", "Poids_planche");
-    poidsPlancheInput.value = 4.4;
-    poidsPlancheInput.onchange = () => {
-      poids_planche = getElementValue("Poids_planche");
-      recalculerToutesLignes();
-    };
-
-    poidsPlancheLabelCell.appendChild(poidsPlancheLabel);
-    poidsPlancheInputCell.appendChild(poidsPlancheInput);
-    poidsPlancheRow.appendChild(poidsPlancheLabelCell);
-    poidsPlancheRow.appendChild(poidsPlancheInputCell);
-    proportionBody.appendChild(poidsPlancheRow);
-
-    // Ajout des proportions dans le tableau
-    const proportions = [
-      {
-        label: "Proportion de sel (Kg)",
-        id: "Prop_sel",
-        defaultValue: 0.028,
-      },
-      {
-        label: "Proportion de poivre (g)",
-        id: "Prop_poivre",
-        defaultValue: 2,
-      },
-      {
-        label: "Proportion de muscade (g)",
-        id: "Prop_muscade",
-        defaultValue: 1,
-      },
-      {
-        label: "Proportion d'ail (g)",
-        id: "Prop_ail",
-        defaultValue: 2
-      },
-    ];
-
-    proportions.forEach((prop) => {
-      const row = document.createElement("tr");
-
-      const labelCell = document.createElement("td");
-      const inputCell = document.createElement("td");
-
-      const label = document.createElement("label");
-      label.setAttribute("for", prop.id);
-      label.innerHTML = prop.label;
-
-      const input = document.createElement("input");
-      input.setAttribute("id", prop.id);
-      input.value = prop.defaultValue;
-      input.onchange = recalculerToutesLignes;
-
-      labelCell.appendChild(label);
-      inputCell.appendChild(input);
-
-      row.appendChild(labelCell);
-      row.appendChild(inputCell);
-
-      proportionBody.appendChild(row);
-    });
-
-    const boutonDiv = document.createElement("div");
-    boutonDiv.setAttribute("id", "button-wrapper")
-    boutonDiv.style.display = "inline-block";
-    boutonDiv.style.verticalAlign = "top";
-    boutonDiv.style.marginLeft = "20px"; // espace entre le tableau et le bouton
-
-    const boutonAction = document.createElement("button");
-    boutonAction.setAttribute("class", "no-print button-17");
-    boutonAction.textContent = "Imprimer la page";
-    boutonAction.type = "button";
-    boutonAction.onclick = () => {
-      window.print()
-      alert("Page imprimée !");
-    };
-
-    boutonDiv.appendChild(boutonAction);
-
-    // wrapper pour le tableau des proportions
-    const tabPropDiv = document.createElement("div");
-    tabPropDiv.id = "tabProp";
-
-    proportionTable.appendChild(proportionBody);
-    tabPropDiv.appendChild(proportionTable);
-
-    formulaire.appendChild(boutonDiv);
-    formulaire.appendChild(tabPropDiv);
-
-    // Création du tableau des bassines avec les titres
-    const tbl = document.createElement("table");
-    tbl.setAttribute("id", "TableauBassines");
-    const tblBody = document.createElement("tbody");
-
-    // Ajout des titres
-    const headerRow = document.createElement("tr");
-    headerRow.setAttribute("id", "Titres_tableau");
-    col.forEach((titre) => {
-      const cell = document.createElement("td");
-      const cellText = document.createTextNode(titre);
-      cell.appendChild(cellText);
-      headerRow.appendChild(cell);
-    });
-    tblBody.appendChild(headerRow);
-
-    // Ajout des lignes pour chaque bassine
-    bassines.forEach((bassine, index) => {
-      const row = document.createElement("tr");
-      row.id = "Bassine_" + (index + 1);
-
-      col.forEach((colonne, colIndex) => {
-        const cell = document.createElement("td");
-        cell.setAttribute("class", "tdBassine");
-        if (colIndex === 0) {
-          cell.textContent = bassine.Nom;
-          cell.setAttribute("class", "NomBassine");
-        } else if (colIndex === 1) {
-          const checkbox = document.createElement("input");
-          checkbox.type = "checkbox";
-          checkbox.id = "isCouenne" + (index + 1);
-          checkbox.onchange = () => calculEpices(index + 1);
-          cell.appendChild(checkbox);
-        } else if (colIndex === 2) {
-          const input = document.createElement("input");
-          input.id = "Poids_bassine_" + (index + 1);
-          input.onchange = () => calculEpices(index + 1);
-          cell.appendChild(input);
-        } else if (colIndex === 3) {
-          cell.id = "tare_" + (index + 1);
-          cell.textContent = bassine.tare.toFixed(3);
-        } else {
-          cell.id = colonne + (index + 1);
-        }
-        row.appendChild(cell);
-      });
-
-      tblBody.appendChild(row);
-    });
-
-    tbl.appendChild(tblBody);
-
-    // wrapper pour le tableau des bassines
-    const tabBassDiv = document.createElement("div");
-    tabBassDiv.id = "tabBass";
-    tabBassDiv.appendChild(document.createElement("br"));
-    tabBassDiv.appendChild(tbl);
-    formulaire.appendChild(tabBassDiv);
-
-    //
-    // Tableau des totaux
-    const totalTable = document.createElement("table");
-    totalTable.setAttribute("id", "TableauTotaux");
-    const totalBody = document.createElement("tbody");
-
-    // Première ligne : titres
-    const totalHeaderRow = document.createElement("tr");
-    [
-      "Total Viande Net",
-      "Total Sel (Kg)",
-      "Total Poivre (g)",
-      "Total Poivre Concassé (g)",
-      "Total Muscade (g)",
-      "Total Ail (g)",
-    ].forEach((titre) => {
-      const cell = document.createElement("td");
-      cell.setAttribute("class", "cellule_totaux");
-      const cellText = document.createTextNode(titre);
-      cell.appendChild(cellText);
-      totalHeaderRow.appendChild(cell);
-    });
-    totalBody.appendChild(totalHeaderRow);
-
-    // Deuxième ligne : totaux
-    const totalRow = document.createElement("tr");
-    const totalIds = [
-      "Total_Net",
-      "Total_Sel",
-      "Total_Poivre",
-      "Total_Poivre_Concasse",
-      "Total_Muscade",
-      "Total_Ail",
-    ];
-    totalIds.forEach((id) => {
-      const cell = document.createElement("td");
-      cell.setAttribute("class", "cellule_totaux");
-      cell.id = id;
-      cell.innerHTML = "0.000"; // Valeurs initiales à 0
-      totalRow.appendChild(cell);
-    });
-    totalBody.appendChild(totalRow);
-
-    totalTable.appendChild(totalBody);
-
-    // wrapper pour le tableau des totaux
-    const tabTotDiv = document.createElement("div");
-    tabTotDiv.id = "tabTot";
-    tabTotDiv.appendChild(document.createElement("br"));
-    tabTotDiv.appendChild(totalTable);
-    formulaire.appendChild(tabTotDiv);
-    //
-    // Tableau supplémentaire à droite
-    const rendementTable = document.createElement("table");
-    rendementTable.setAttribute("id", "TableauRendement");
-    const rendementBody = document.createElement("tbody");
-
-    // Première ligne : titres
-    const rendementHeaderRow = document.createElement("tr");
-    ["Total acheté", "Total assaisonné", "Rendement"].forEach(titre => {
-      const cell = document.createElement("td");
-      cell.setAttribute("class", "tdRendement");
-      const cellText = document.createTextNode(titre);
-      cell.appendChild(cellText);
-      rendementHeaderRow.appendChild(cell);
-    });
-    rendementBody.appendChild(rendementHeaderRow);
-
-    // Deuxième ligne : contenu
-    const rendementRow = document.createElement("tr");
-
-    // Total acheté (input)
-    const totalAcheteCell = document.createElement("td");
-    totalAcheteCell.setAttribute("class", "tdRendement");
-    const totalAcheteInput = document.createElement("input");
-    totalAcheteInput.setAttribute("id", "Total_Achete");
-    totalAcheteInput.setAttribute("type", "number");
-    totalAcheteInput.onchange = calculerTotalAssaisonne;
-    totalAcheteCell.appendChild(totalAcheteInput);
-    rendementRow.appendChild(totalAcheteCell);
-
-    // Total assaisonné
-    const totalAssaisonneCell = document.createElement("td");
-    totalAssaisonneCell.setAttribute("class", "tdRendement");
-    totalAssaisonneCell.setAttribute("id", "Total_Assaisonne");
-    totalAssaisonneCell.innerHTML = "0.000";  // Initialement 0
-    rendementRow.appendChild(totalAssaisonneCell);
-
-    // Rendement
-    const rendementCell = document.createElement("td");
-    rendementCell.setAttribute("class", "tdRendement");
-    rendementCell.setAttribute("id", "Rendement");
-    rendementCell.innerHTML = "0 %";  // Initialement 0
-    rendementRow.appendChild(rendementCell);
-
-    rendementBody.appendChild(rendementRow);
-    rendementTable.appendChild(rendementBody);
-
-    // wrapper pour le tableau rendement
-    const tabRendDiv = document.createElement("div");
-    tabRendDiv.id = "tabRend";
-    tabRendDiv.appendChild(document.createElement("br"));
-    tabRendDiv.appendChild(rendementTable);
-
-    // Ajout du tableau rendement au formulaire
-    formulaire.appendChild(tabRendDiv);
-    body.appendChild(formulaire);
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="assets/style.css" />
+        <title>Calculateur d'épices</title>
+    </head>
+
+    <body>
+        <div id="titre">
+            <h1 id="grandTitre">Calcul des épices</h1>
+        </div>
+        <br />
+        <script>
+            let poids_planche = 4.4;
+            const bassines = [
+                { Nom: "Niagara", tare: 6.5 },
+                { Nom: "Manu Chao", tare: 2.7 },
+                { Nom: "Kamini", tare: 2.7 },
+                { Nom: "Tina", tare: 2.7 },
+                { Nom: "Garou", tare: 6.0 },
+                { Nom: "Johnny", tare: 2.7 },
+                { Nom: "Vanessa", tare: 1.7 },
+                { Nom: "Joséphine", tare: 4.9 },
+                { Nom: "Céline", tare: 6.0 },
+                { Nom: "Dalida", tare: 2.5 },
+                { Nom: "Florent", tare: 2.7 },
+                { Nom: "Petite bassine ronde verte (JM)", tare: 1.7 },
+                { Nom: "Grande bassine verte", tare: 2.7 },
+                { Nom: "Caisse grise", tare: 2.45 },
+                { Nom: "Caisse verte", tare: 2.6 },
+            ];
+
+            const col = [
+                "Bassine",
+                "Couenne ?",
+                "Poids brut",
+                "Tare bassine",
+                "Net",
+                "Sel (Kg)",
+                "Poivre (g)",
+                "Poivre concassé (g)",
+                "Muscade (g)",
+                "Ail (g)",
+            ];
+
+            const getElementValue = (id) =>
+                parseFloat(document.getElementById(id).value) || 0;
+            const getElementText = (id) => {
+                const el = document.getElementById(id);
+                if (!el) {
+                    console.warn("Element introuvable :", id);
+                    return 0;
+                }
+                return parseFloat(el.innerHTML) || 0;
+            };
+
+            function calculEpices(ligne) {
+                const poidsBrut = getElementValue("Poids_bassine_" + ligne);
+                if (poidsBrut) {
+                    const tare = getElementText("tare_" + ligne);
+                    const net = (poidsBrut - tare - poids_planche).toFixed(3);
+                    document.getElementById("Net" + ligne).innerHTML = net;
+                    const propSel = getElementValue("Prop_sel");
+                    const propPoivre = getElementValue("Prop_poivre");
+                    const propMuscade = getElementValue("Prop_muscade");
+                    const propAil = getElementValue("Prop_ail");
+                    let qteSel;
+                    if (!document.getElementById("isCouenne" + ligne).checked) {
+                        qteSel = net * propSel;
+                    } else {
+                        qteSel = net * (propSel / 2);
+                    }
+                    document.getElementById("Sel (Kg)" + ligne).innerHTML =
+                        qteSel.toFixed(3);
+                    document.getElementById("Poivre (g)" + ligne).innerHTML = (
+                        net *
+                        propPoivre *
+                        0.6
+                    ).toFixed(3);
+                    document.getElementById(
+                        "Poivre concassé (g)" + ligne,
+                    ).innerHTML = (net * propPoivre * 0.4).toFixed(3);
+                    document.getElementById("Muscade (g)" + ligne).innerHTML = (
+                        net * propMuscade
+                    ).toFixed(3);
+                    document.getElementById("Ail (g)" + ligne).innerHTML = (
+                        net * propAil
+                    ).toFixed(3);
+                } else {
+                    [
+                        "Net",
+                        "Sel (Kg)",
+                        "Poivre (g)",
+                        "Poivre concassé (g)",
+                        "Muscade (g)",
+                        "Ail (g)",
+                    ].forEach((colonne) => {
+                        document.getElementById(colonne + ligne).innerHTML = "";
+                    });
+                }
+                calculerTotaux(); // Recalcul des totaux après chaque changement
+            }
+
+            const recalculerToutesLignes = () => {
+                for (let i = 1; i <= bassines.length; i++) {
+                    calculEpices(i);
+                }
+            };
+
+            function calculerTotaux() {
+                let totalNet = 0,
+                    totalSel = 0,
+                    totalPoivre = 0,
+                    totalPoivreConcasse = 0,
+                    totalMuscade = 0,
+                    totalAil = 0;
+
+                for (let i = 1; i <= bassines.length; i++) {
+                    totalNet += getElementText("Net" + i);
+                    totalSel += getElementText("Sel (Kg)" + i);
+                    totalPoivre += getElementText("Poivre (g)" + i);
+                    totalPoivreConcasse += getElementText(
+                        "Poivre concassé (g)" + i,
+                    );
+                    totalMuscade += getElementText("Muscade (g)" + i);
+                    totalAil += getElementText("Ail (g)" + i);
+                }
+
+                document.getElementById("Total_Net").innerHTML =
+                    totalNet.toFixed(3);
+                document.getElementById("Total_Sel").innerHTML =
+                    totalSel.toFixed(3);
+                document.getElementById("Total_Poivre").innerHTML =
+                    totalPoivre.toFixed(3);
+                document.getElementById("Total_Poivre_Concasse").innerHTML =
+                    totalPoivreConcasse.toFixed(3);
+                document.getElementById("Total_Muscade").innerHTML =
+                    totalMuscade.toFixed(3);
+                document.getElementById("Total_Ail").innerHTML =
+                    totalAil.toFixed(3);
+
+                // Calcul du total assaisonné et rendement
+                calculerTotalAssaisonne();
+            }
+
+            function calculerTotalAssaisonne() {
+                const totalNet = getElementText("Total_Net");
+                const totalSel = getElementText("Total_Sel");
+                const totalPoivre = getElementText("Total_Poivre");
+                const totalPoivreConcasse = getElementText(
+                    "Total_Poivre_Concasse",
+                );
+                const totalMuscade = getElementText("Total_Muscade");
+                const totalAil = getElementText("Total_Ail");
+
+                const totalAssaisonne =
+                    totalNet +
+                    totalSel +
+                    totalPoivre / 1000 +
+                    totalPoivreConcasse / 1000 +
+                    totalMuscade / 1000 +
+                    totalAil / 1000;
+                document.getElementById("Total_Assaisonne").innerHTML =
+                    totalAssaisonne.toFixed(3);
+
+                const totalAchete = getElementValue("Total_Achete");
+                if (totalAchete > 0) {
+                    const totalNet =
+                        document.getElementById("Total_Net").innerHTML;
+                    const rendement = (totalNet / totalAchete) * 100;
+                    document.getElementById("Rendement").innerHTML =
+                        rendement.toFixed(3) + " %";
+                } else {
+                    document.getElementById("Rendement").innerHTML = "0 %";
+                }
+            }
+
+            const body = document.body;
+            const formulaire = document.createElement("form");
+            formulaire.setAttribute("class", "form-grid");
+
+            // ---- Début Intégration LocalStorage ----
+            const STORAGE_KEY = "calculateurEpices";
+            const MAX_AGE = 48 * 60 * 60 * 1000; // 72h
+
+            function sauvegarderFormulaire() {
+                const data = { timestamp: Date.now(), values: {} };
+                document.querySelectorAll("input").forEach((input) => {
+                    data.values[input.id] =
+                        input.type === "checkbox" ? input.checked : input.value;
+                });
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+            }
+
+            function restaurerFormulaire() {
+                const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
+                if (saved && Date.now() - saved.timestamp < MAX_AGE) {
+                    for (const [id, value] of Object.entries(saved.values)) {
+                        const input = document.getElementById(id);
+                        if (input) {
+                            if (input.type === "checkbox")
+                                input.checked = value;
+                            else input.value = value;
+                        }
+                    }
+                } else {
+                    localStorage.removeItem(STORAGE_KEY);
+                }
+            }
+
+            window.addEventListener("DOMContentLoaded", () => {
+                restaurerFormulaire();
+                recalculerToutesLignes();
+            });
+
+            document.body.addEventListener("input", sauvegarderFormulaire);
+            document.body.addEventListener("change", sauvegarderFormulaire);
+            // Table des proportions et du poids de la planche
+            const proportionTable = document.createElement("table");
+            proportionTable.setAttribute("id", "TableauProportions");
+            const proportionBody = document.createElement("tbody");
+
+            // Ajout du poids de la planche
+            const poidsPlancheRow = document.createElement("tr");
+            const poidsPlancheLabelCell = document.createElement("td");
+            const poidsPlancheInputCell = document.createElement("td");
+
+            const poidsPlancheLabel = document.createElement("label");
+            poidsPlancheLabel.setAttribute("for", "Poids_planche");
+            poidsPlancheLabel.innerHTML = "Poids de la planche (Kg)";
+
+            const poidsPlancheInput = document.createElement("input");
+            poidsPlancheInput.setAttribute("id", "Poids_planche");
+            poidsPlancheInput.value = 4.4;
+            poidsPlancheInput.onchange = () => {
+                poids_planche = getElementValue("Poids_planche");
+                recalculerToutesLignes();
+            };
+
+            poidsPlancheLabelCell.appendChild(poidsPlancheLabel);
+            poidsPlancheInputCell.appendChild(poidsPlancheInput);
+            poidsPlancheRow.appendChild(poidsPlancheLabelCell);
+            poidsPlancheRow.appendChild(poidsPlancheInputCell);
+            proportionBody.appendChild(poidsPlancheRow);
+
+            // Ajout des proportions dans le tableau
+            const proportions = [
+                {
+                    label: "Proportion de sel (Kg)",
+                    id: "Prop_sel",
+                    defaultValue: 0.028,
+                },
+                {
+                    label: "Proportion de poivre (g)",
+                    id: "Prop_poivre",
+                    defaultValue: 2,
+                },
+                {
+                    label: "Proportion de muscade (g)",
+                    id: "Prop_muscade",
+                    defaultValue: 1,
+                },
+                {
+                    label: "Proportion d'ail (g)",
+                    id: "Prop_ail",
+                    defaultValue: 2,
+                },
+            ];
+
+            proportions.forEach((prop) => {
+                const row = document.createElement("tr");
+
+                const labelCell = document.createElement("td");
+                const inputCell = document.createElement("td");
+
+                const label = document.createElement("label");
+                label.setAttribute("for", prop.id);
+                label.innerHTML = prop.label;
+
+                const input = document.createElement("input");
+                input.setAttribute("id", prop.id);
+                input.value = prop.defaultValue;
+                input.onchange = recalculerToutesLignes;
+
+                labelCell.appendChild(label);
+                inputCell.appendChild(input);
+
+                row.appendChild(labelCell);
+                row.appendChild(inputCell);
+
+                proportionBody.appendChild(row);
+            });
+
+            const boutonDiv = document.createElement("div");
+            boutonDiv.setAttribute("id", "button-wrapper");
+            boutonDiv.style.display = "inline-block";
+            boutonDiv.style.verticalAlign = "top";
+            boutonDiv.style.marginLeft = "20px"; // espace entre le tableau et le bouton
+
+            const boutonAction = document.createElement("button");
+            boutonAction.setAttribute("class", "no-print button-17");
+            boutonAction.textContent = "Imprimer la page";
+            boutonAction.type = "button";
+            boutonAction.onclick = () => {
+                window.print();
+                alert("Page imprimée !");
+            };
+
+            boutonDiv.appendChild(boutonAction);
+
+            // wrapper pour le tableau des proportions
+            const tabPropDiv = document.createElement("div");
+            tabPropDiv.id = "tabProp";
+
+            proportionTable.appendChild(proportionBody);
+            tabPropDiv.appendChild(proportionTable);
+
+            formulaire.appendChild(boutonDiv);
+            formulaire.appendChild(tabPropDiv);
+
+            // Création du tableau des bassines avec les titres
+            const tbl = document.createElement("table");
+            tbl.setAttribute("id", "TableauBassines");
+            const tblBody = document.createElement("tbody");
+
+            // Ajout des titres
+            const headerRow = document.createElement("tr");
+            headerRow.setAttribute("id", "Titres_tableau");
+            col.forEach((titre) => {
+                const cell = document.createElement("td");
+                const cellText = document.createTextNode(titre);
+                cell.appendChild(cellText);
+                headerRow.appendChild(cell);
+            });
+            tblBody.appendChild(headerRow);
+
+            // Ajout des lignes pour chaque bassine
+            bassines.forEach((bassine, index) => {
+                const row = document.createElement("tr");
+                row.id = "Bassine_" + (index + 1);
+
+                col.forEach((colonne, colIndex) => {
+                    const cell = document.createElement("td");
+                    cell.setAttribute("class", "tdBassine");
+                    if (colIndex === 0) {
+                        cell.textContent = bassine.Nom;
+                        cell.setAttribute("class", "NomBassine");
+                    } else if (colIndex === 1) {
+                        const checkbox = document.createElement("input");
+                        checkbox.type = "checkbox";
+                        checkbox.id = "isCouenne" + (index + 1);
+                        checkbox.onchange = () => calculEpices(index + 1);
+                        cell.appendChild(checkbox);
+                    } else if (colIndex === 2) {
+                        const input = document.createElement("input");
+                        input.id = "Poids_bassine_" + (index + 1);
+                        input.onchange = () => calculEpices(index + 1);
+                        cell.appendChild(input);
+                    } else if (colIndex === 3) {
+                        cell.id = "tare_" + (index + 1);
+                        cell.textContent = bassine.tare.toFixed(3);
+                    } else {
+                        cell.id = colonne + (index + 1);
+                    }
+                    row.appendChild(cell);
+                });
+
+                tblBody.appendChild(row);
+            });
+
+            tbl.appendChild(tblBody);
+
+            // wrapper pour le tableau des bassines
+            const tabBassDiv = document.createElement("div");
+            tabBassDiv.id = "tabBass";
+            tabBassDiv.appendChild(document.createElement("br"));
+            tabBassDiv.appendChild(tbl);
+            formulaire.appendChild(tabBassDiv);
+
+            //
+            // Tableau des totaux
+            const totalTable = document.createElement("table");
+            totalTable.setAttribute("id", "TableauTotaux");
+            const totalBody = document.createElement("tbody");
+
+            // Première ligne : titres
+            const totalHeaderRow = document.createElement("tr");
+            [
+                "Total Viande Net",
+                "Total Sel (Kg)",
+                "Total Poivre (g)",
+                "Total Poivre Concassé (g)",
+                "Total Muscade (g)",
+                "Total Ail (g)",
+            ].forEach((titre) => {
+                const cell = document.createElement("td");
+                cell.setAttribute("class", "cellule_totaux");
+                const cellText = document.createTextNode(titre);
+                cell.appendChild(cellText);
+                totalHeaderRow.appendChild(cell);
+            });
+            totalBody.appendChild(totalHeaderRow);
+
+            // Deuxième ligne : totaux
+            const totalRow = document.createElement("tr");
+            const totalIds = [
+                "Total_Net",
+                "Total_Sel",
+                "Total_Poivre",
+                "Total_Poivre_Concasse",
+                "Total_Muscade",
+                "Total_Ail",
+            ];
+            totalIds.forEach((id) => {
+                const cell = document.createElement("td");
+                cell.setAttribute("class", "cellule_totaux");
+                cell.id = id;
+                cell.innerHTML = "0.000"; // Valeurs initiales à 0
+                totalRow.appendChild(cell);
+            });
+            totalBody.appendChild(totalRow);
+
+            totalTable.appendChild(totalBody);
+
+            // wrapper pour le tableau des totaux
+            const tabTotDiv = document.createElement("div");
+            tabTotDiv.id = "tabTot";
+            tabTotDiv.appendChild(document.createElement("br"));
+            tabTotDiv.appendChild(totalTable);
+            formulaire.appendChild(tabTotDiv);
+            //
+            // Tableau supplémentaire à droite
+            const rendementTable = document.createElement("table");
+            rendementTable.setAttribute("id", "TableauRendement");
+            const rendementBody = document.createElement("tbody");
+
+            // Première ligne : titres
+            const rendementHeaderRow = document.createElement("tr");
+            ["Total acheté", "Total assaisonné", "Rendement"].forEach(
+                (titre) => {
+                    const cell = document.createElement("td");
+                    cell.setAttribute("class", "tdRendement");
+                    const cellText = document.createTextNode(titre);
+                    cell.appendChild(cellText);
+                    rendementHeaderRow.appendChild(cell);
+                },
+            );
+            rendementBody.appendChild(rendementHeaderRow);
+
+            // Deuxième ligne : contenu
+            const rendementRow = document.createElement("tr");
+
+            // Total acheté (input)
+            const totalAcheteCell = document.createElement("td");
+            totalAcheteCell.setAttribute("class", "tdRendement");
+            const totalAcheteInput = document.createElement("input");
+            totalAcheteInput.setAttribute("id", "Total_Achete");
+            totalAcheteInput.setAttribute("type", "number");
+            totalAcheteInput.onchange = calculerTotalAssaisonne;
+            totalAcheteCell.appendChild(totalAcheteInput);
+            rendementRow.appendChild(totalAcheteCell);
+
+            // Total assaisonné
+            const totalAssaisonneCell = document.createElement("td");
+            totalAssaisonneCell.setAttribute("class", "tdRendement");
+            totalAssaisonneCell.setAttribute("id", "Total_Assaisonne");
+            totalAssaisonneCell.innerHTML = "0.000"; // Initialement 0
+            rendementRow.appendChild(totalAssaisonneCell);
+
+            // Rendement
+            const rendementCell = document.createElement("td");
+            rendementCell.setAttribute("class", "tdRendement");
+            rendementCell.setAttribute("id", "Rendement");
+            rendementCell.innerHTML = "0 %"; // Initialement 0
+            rendementRow.appendChild(rendementCell);
+
+            rendementBody.appendChild(rendementRow);
+            rendementTable.appendChild(rendementBody);
+
+            // wrapper pour le tableau rendement
+            const tabRendDiv = document.createElement("div");
+            tabRendDiv.id = "tabRend";
+            tabRendDiv.appendChild(document.createElement("br"));
+            tabRendDiv.appendChild(rendementTable);
+
+            // Ajout du tableau rendement au formulaire
+            formulaire.appendChild(tabRendDiv);
+            body.appendChild(formulaire);
+        </script>
+    </body>
+</html>
