<!-- CODE PROTEGE PAR LA PROPRIETE INTELLECTUELLE-REPRODUCTION INTERDITE -->
<div id="reserve-calculator" style="max-width: 800px; margin: 0 auto; font-family: Alata, sans-serif; border: 10px solid #C61E2F; padding: 20px; border-radius: 10px; background-color: #fff;">
<!-- Logo -->
  <div style="position: relative; top: 1px; left: 1px;">
    <img src="https://www.resilience-urbaine.com/wp-content/uploads/2022/06/cropped-logo-2022RED.png" alt="Logo" style="width: 50px; height: auto; border-radius: 50%; border: 0px solid #C61E2F;">
  </div>
  <h3 style="color: #C61E2F; font-size: 24px;text-align: center; margin-bottom: 20px;">Outil de calcul de stock alimentaire d'urgence</h3>
  <form id="calculatorForm">
    <div style="margin-bottom: 15px;">
      <label for="numPeople" style="color: #333;">Nombre de personnes :</label>
      <input type="number" id="numPeople" name="numPeople" min="1" value="1" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="duration" style="color: #333;">Durée (en jours) :</label>
      <input type="number" id="duration" name="duration" min="1" max="3650" value="30" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px;">
    </div>
    <h4 style="color: #C61E2F;margin-top: 20px; margin-bottom: 10px;">Prix moyen par type d'aliment (modifiable)</h4>
    <div style="margin-bottom: 10px;">
      <label for="priceFish" style="color: #333;">Poissons (€/conserve de 80 g) :</label>
      <input type="number" id="priceFish" name="priceFish" value="2.8" step="0.1" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px;">
    </div>
    <div style="margin-bottom: 10px;">
      <label for="priceVeg" style="color: #333;">Légumes (€/conserve de 400 g) :</label>
      <input type="number" id="priceVeg" name="priceVeg" value="2" step="0.1" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px;">
    </div>
    <div style="margin-bottom: 10px;">
      <label for="priceFruit" style="color: #333;">Fruits (€/conserve de 475 g) :</label>
      <input type="number" id="priceFruit" name="priceFruit" value="2.5" step="0.1" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px;">
    </div>
    <div style="margin-bottom: 10px;">
      <label for="priceBiscottes" style="color: #333;">Biscottes (€/boîte de 800 g) :</label>
      <input type="number" id="priceBiscottes" name="priceBiscottes" value="1.8" step="0.1" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px;">
    </div>
    <button type="button" id="calculateButton" style="width: 100%; padding: 10px; background-color: #C61E2F; color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">Calculer</button>
  </form>
  
  <h4 style="color: #C61E2F; margin-top: 20px; text-align: center;">Résultat</h4>
  <p id="result" style="color: #333; font-size: 14px; line-height: 1.6;"></p>
</div>

<script>
  document.getElementById('calculateButton').addEventListener('click', function() {
    const numPeople = parseFloat(document.getElementById('numPeople').value);
    const duration = parseFloat(document.getElementById('duration').value);
    const priceFish = parseFloat(document.getElementById('priceFish').value);
    const priceVeg = parseFloat(document.getElementById('priceVeg').value);
    const priceFruit = parseFloat(document.getElementById('priceFruit').value);
    const priceBiscottes = parseFloat(document.getElementById('priceBiscottes').value);

    if (isNaN(numPeople) || isNaN(duration) || numPeople < 1 || duration < 1) {
      document.getElementById('result').innerHTML = "<strong style='color: #C61E2F;'>Veuillez entrer un nombre valide pour les personnes et la durée.</strong>";
      return;
    }

    // Quantités par personne par jour
    const biscottesPerDay = 32; // 4 biscottes de 8 g par personne au petit déjeuner
    const fishPerDay = 2; // 1 conserve de poisson (80 g) pour déjeuner et dîner
    const vegPerDay = 400; // 200 g de légumes par repas, donc 400 g/jour
    const fruitPerDay = 400; // 200 g de fruits par repas, donc 400 g/jour

    // Poids des conserves
    const vegWeight = 400; // Une conserve de légumes pèse 400 g
    const fruitWeight = 475; // Une conserve de fruits pèse 475 g

    // Calcul des besoins totaux
    const totalBiscottes = Math.ceil((numPeople * duration * biscottesPerDay) / 800); // Boîtes de 800 g
    const totalFish = Math.ceil(numPeople * duration * fishPerDay); // Conserves de poisson
    const totalVeg = Math.ceil((numPeople * duration * vegPerDay) / vegWeight); // Conserves de légumes
    const totalFruit = Math.ceil((numPeople * duration * fruitPerDay) / fruitWeight); // Conserves de fruits

    // Calcul des coûts
    const costBiscottes = totalBiscottes * priceBiscottes;
    const costFish = totalFish * priceFish;
    const costVeg = totalVeg * priceVeg;
    const costFruit = totalFruit * priceFruit;
    const totalCost = costBiscottes + costFish + costVeg + costFruit;

    // Conversion des grammes en kilogrammes
    function formatWeight(weight) {
      return weight > 999 ? `${(weight / 1000).toFixed(2)} kg` : `${weight} g`;
    }

    // Résultat détaillé
    const resultText = `
      <strong>Petit déjeuner :</strong><br>
      - Biscottes : 4 biscottes (32 g) par personne par jour (soit ${totalBiscottes} boîtes de 800 g pour ${numPeople} personnes sur ${duration} jours)<br><br>

      <strong>Déjeuner et dîner (par personne) :</strong><br>
      - Poissons : 1 conserve de 80 g par repas (soit ${totalFish} conserves)<br>
      - Légumes : 200 g par repas (soit ${totalVeg} conserves de 400 g)<br>
      - Fruits : 200 g par repas (soit ${totalFruit} conserves de 475 g)<br><br>

      <strong>Total à mettre en réserve :</strong><br>
      - Biscottes : ${totalBiscottes} boîtes (${formatWeight(totalBiscottes * 800)})<br>
      - Poissons : ${totalFish} conserves (${formatWeight(totalFish * 80)})<br>
      - Légumes : ${totalVeg} conserves (${formatWeight(totalVeg * vegWeight)})<br>
      - Fruits : ${totalFruit} conserves (${formatWeight(totalFruit * fruitWeight)})<br><br>

      <strong>Coût total :</strong> ${totalCost.toFixed(2)} €
    `;
    document.getElementById('result').innerHTML = resultText;
  });
</script>
