premier commit je sais pas ce que je fais

assets/bassines.json

@@ -0,0 +1,17 @@
+{"bassines":[
+    {"Nom":"Grande bassine ronde en fer","tare":6.500},
+    {"Nom":"Grande bassine ronde verte","tare":2.700},
+    {"Nom":"Grande bassine ronde verte","tare":2.700},
+    {"Nom":"Grande bassine ronde verte","tare":2.700},
+    {"Nom":"Moyenne bassine ovale en fer","tare":6.000},
+    {"Nom":"Petite bassine ronde en fer","tare":2.700},
+    {"Nom":"Petite bassine ronde bleue (Tonton Pierre)","tare":1.700},
+    {"Nom":"Petite bassine ronde verte (JM)","tare":1.700},
+    {"Nom":"Grande bassine verte","tare":2.700},
+    {"Nom":"Moyenne bassine ronde (Couenne)","tare":4.900},
+    {"Nom":"Grande bassine ovale en fer (Jeannot)","tare":6.000},
+    {"Nom":"Caisse grise","tare":2.450},
+    {"Nom":"Caisse verte","tare":2.600},
+    {"Nom":"Bassine bleue (JM1)","tare":2.500},
+    {"Nom":"Bassine verte (JM3)","tare":2.700}
+]}

assets/style.css

@@ -0,0 +1,248 @@
+/* =========================================================
+   1️⃣  RESET GÉNÉRAL
+========================================================= */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* =========================================================
+   2️⃣  BASE GLOBALE
+========================================================= */
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 10pt;
+    padding: 3mm;
+    color: #000;
+    background-color: #344d59d5;
+}
+
+h1,
+h2 {
+    text-align: center;
+}
+
+/* =========================================================
+   3️⃣  TABLEAUX
+========================================================= */
+table {
+    margin: 2mm auto;
+    width: auto;
+    max-width: calc(297mm - 6mm);
+    border: 2px solid #b8cbd0;
+    border-radius: 7px;
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: hidden;
+    text-align: center;
+    font-size: 9pt;
+}
+
+table+table {
+    margin-top: 1mm;
+}
+
+th,
+td {
+    border: 2px solid #b8cbd0;
+    background-clip: padding-box;
+    padding: 2px 4px;
+    vertical-align: middle;
+}
+
+#TableauBassines,
+#TableauRendement,
+#TableauProportions {
+    background-color: #709ca7;
+}
+
+#TableauTotaux {
+    background-color: #137c8b;
+}
+
+#TableauRendement {
+    margin: 2mm auto !important;
+    display: table;
+    float: none !important;
+    clear: both;
+    width: auto;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: 0fr repeat(4, auto);
+    grid-template-rows: repeat(3, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+#tabProp {
+    grid-area: 2 / 3 / 3 / 4;
+}
+
+#button-wrapper {
+    grid-area: 2 / 4 / 3 / 5;
+}
+
+#tabBass {
+    grid-area: 3 / 2 / 4 / 6;
+}
+
+#tabTot {
+    grid-area: 4 / 3 / 5 / 4;
+}
+
+#tabRend {
+    grid-area: 4 / 4 / 5 / 5;
+}
+
+.button-wrapper {
+    padding: 0;
+}
+
+/* =========================================================
+   4️⃣  FORMULAIRES — CASES À COCHER
+========================================================= */
+
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    margin: 0 4px;
+    border: 2px solid #6b6b6b;
+    border-radius: 6px;
+    background: #fff;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    cursor: pointer;
+    transition: border-color 0.12s ease;
+}
+
+input[type="checkbox"]::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 6px;
+    height: 9px;
+    border: solid #000;
+    border-width: 0 3px 3px 0;
+    transform: translate(-50%, -80%) rotate(43deg);
+    opacity: 0;
+    transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+input[type="checkbox"]:checked {
+    border-color: #4f4f4f;
+}
+
+input[type="checkbox"]:checked::after {
+    opacity: 1;
+}
+
+input[type="checkbox"]:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(19, 124, 139, 0.15);
+}
+
+/* =========================================================
+   5️⃣  BOUTONS — STYLE GOOGLE MATERIAL
+========================================================= */
+
+#button-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+#button-wrapper .button-17 {
+    justify-content: center;
+    appearance: none;
+    border: none;
+    border-radius: 24px;
+    background: #fff;
+    color: #3c4043;
+    font-family: "Google Sans", Roboto, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.25px;
+    height: 48px;
+    padding: 2px 24px;
+    cursor: pointer;
+    text-align: center;
+    user-select: none;
+    touch-action: manipulation;
+}
+
+#button-wrapper .button-17:hover {
+    background: #f6f9fe;
+    color: #174ea6;
+    box-shadow: rgba(60, 64, 67, 0.3) 0 2px 3px,
+                rgba(60, 64, 67, 0.15) 0 6px 10px 4px;
+}
+
+#button-wrapper .button-17:active {
+    box-shadow: rgba(60, 64, 67, 0.3) 0 4px 4px,
+                rgba(60, 64, 67, 0.15) 0 8px 12px 6px;
+}
+
+#button-wrapper .button-17:disabled {
+    cursor: default;
+    opacity: 0.7;
+    box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px,
+                rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
+}
+
+/* =========================================================
+   6️⃣  IMPRESSION — FORMAT A4 PAYSAGE
+========================================================= */
+@media print {
+    @page {
+        size: A4 landscape;
+        margin: 3mm;
+    }
+
+    html,
+    body {
+        width: 297mm;
+        height: 210mm;
+        margin: 0;
+        padding: 3mm;
+        background: none !important;
+        color: #000;
+    }
+
+    table {
+        font-size: 8.5pt;
+        margin: 0;
+        page-break-inside: avoid;
+        break-inside: avoid;
+    }
+
+    th,
+    td {
+        padding: 1px 3px;
+        font-size: 8.5pt;
+    }
+
+    input[type="checkbox"] {
+        width: 14px;
+        height: 14px;
+    }
+
+    body>* {
+        transform-origin: top left;
+        transform: scale(0.94);
+    }
+
+    /* Masquer tous les boutons et éléments non imprimables */
+    .no-print{
+        display: none !important;
+        visibility: hidden !important;
+    }
+}

assets/style2.css

@@ -0,0 +1,81 @@
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    padding: 0px;
+    background-color: #344d59d5;
+    color: rgb(0, 0, 0);
+}
+td{
+    min-width: 70px;
+    width: max-content;
+}
+
+#grandTitre {
+    padding-left: 2%;
+}
+
+.ligneTableauProportions{
+    margin-bottom: 2%;
+}
+
+#TableauProportions {
+    margin-left: 2%;
+    margin-top: 2%;
+}
+
+#TableauProportions>tr {
+    margin-bottom: 3%;
+}
+
+#TableauBassines {
+    margin-left: 2%;
+    margin-top: 2%;
+    border-collapse: collapse;
+    border: 2px solid #B8CBD0;
+    background-color: #709CA7;
+    text-align: center;
+    min-width: 150px;
+}
+
+#Titres_tableau {
+    background-color: #137C8B;
+    border: 2px solid #B8CBD0;
+}
+.NomBassine {
+    background-color: #137C8B;
+    border: 2px solid #B8CBD0;
+}
+
+.tdBassine {
+    padding: 5px;
+    border: 2px solid #B8CBD0;
+}
+
+#TableauTotaux{
+    text-align: center;
+    margin-left: 2%;
+    background-color: #137C8B;
+    border-collapse: collapse;
+    border: 2px solid #B8CBD0;
+}
+
+.cellule_totaux{
+    border: 2px solid #B8CBD0;
+    min-width: 150px;
+    width: max-content;
+}
+
+#TableauRendement{
+    text-align: center;
+    margin-left: 2%;
+    background-color: #709CA7;
+    border-collapse: collapse;
+    border: 2px solid #B8CBD0;
+}
+
+.tdRendement{
+    border: 2px solid #B8CBD0;
+    min-width: 60px;
+    width: max-content;
+    padding-left: 10px;
+    padding-right: 10px;
+}

index.html

@@ -0,0 +1,474 @@
+<!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>