<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <!-- Pour que la page s'adapte à la largeur de l'écran sur mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sous-totaux par LOT</title>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background-color: #f9f9f9;
      margin: 20px;
      color: #333;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
      font-size: 1.5em;
    }
    .form-container {
      text-align: center;
      margin-bottom: 20px;
    }
    input[type="number"] {
      padding: 8px;
      width: 200px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-right: 10px;
    }
    button {
      padding: 8px 16px;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      background-color: #2c3e50;
      color: #fff;
      cursor: pointer;
    }
    button:disabled {
      background-color: #aaa;
      cursor: not-allowed;
    }
    button:hover:enabled {
      background-color: #34495e;
    }
    /* Conteneur pour permettre le défilement horizontal sur mobile */
    .table-responsive {
      overflow-x: auto;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      max-width: 800px;
      margin: 20px auto;
      background-color: transparent;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    thead tr {
      background-color: #2c3e50;
      color: #fff;
      text-transform: uppercase;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: center;
      white-space: nowrap;
    }
    /* Les lignes de détail conservent un fond transparent */
    tbody tr:not(.subtotal) {
      background-color: transparent;
    }
    /* Lignes de sous-total en fond coloré */
    .subtotal {
      font-weight: bold;
      background-color: #e6e6e6;
    }
    /* Tous les montants s'affichent en rouge avec le sigle € */
    .montant {
      color: red;
    }
    /* Adaptations pour les petits écrans */
    @media screen and (max-width: 600px) {
      h1 {
        font-size: 1.3em;
      }
      input[type="number"] {
        width: 150px;
      }
      th, td {
        font-size: 14px;
        padding: 8px;
      }
      button {
        font-size: 14px;
        padding: 6px 12px;
      }
    }
  </style>
</head>
<body>
  <h1>Sous-totaux par LOT</h1>
  <div class="form-container">
    <label for="montant">Saisir le montant :</label>
    <input type="number" id="montant" placeholder="Entrez un montant" step="0.01">
    <button id="calcButton" onclick="calculer()" disabled>Calculer</button>
  </div>
  
  <div class="table-responsive">
    <table>
      <thead>
        <tr>
          <th>LOT</th>
          <th>Type</th>
          <th>Tantièmes</th>
          <th>Montant</th>
        </tr>
      </thead>
      <tbody id="resultats">
        <!-- LOT A -->
        <tr>
          <td rowspan="3">A</td>
          <td>Maison</td>
          <td>138</td>
          <td id="A-maison" class="montant">0.00 €</td>
        </tr>
        <tr>
          <td>Parking 1</td>
          <td>3</td>
          <td id="A-parking1" class="montant">0.00 €</td>
        </tr>
        <tr>
          <td>Parking 2</td>
          <td>3</td>
          <td id="A-parking2" class="montant">0.00 €</td>
        </tr>
        <tr class="subtotal">
          <td colspan="4" id="subtotal-A" class="montant">Sous-total LOT A : 0.00 €</td>
        </tr>
        <!-- LOT B -->
        <tr>
          <td rowspan="3">B</td>
          <td>Maison</td>
          <td>138</td>
          <td id="B-maison" class="montant">0.00 €</td>
        </tr>
        <tr>
          <td>Parking 1</td>
          <td>3</td>
          <td id="B-parking1" class="montant">0.00 €</td>
        </tr>
        <tr>
          <td>Parking 2</td>
          <td>3</td>
          <td id="B-parking2" class="montant">0.00 €</td>
        </tr>
        <tr class="subtotal">
          <td colspan="4" id="subtotal-B" class="montant">Sous-total LOT B : 0.00 €</td>
        </tr>
        <!-- LOT C -->
        <tr>
          <td rowspan="2">C</td>
          <td>Maison</td>
          <td>138</td>
          <td id="C-maison" class="montant">0.00 €</td>
        </tr>
        <tr>
          <td>Parking 1</td>
          <td>3</td>
          <td id="C-parking1" class="montant">0.00 €</td>
        </tr>
        <tr class="subtotal">
          <td colspan="4" id="subtotal-C" class="montant">Sous-total LOT C : 0.00 €</td>
        </tr>
        <!-- LOT D -->
        <tr>
          <td rowspan="2">D</td>
          <td>Maison</td>
          <td>287</td>
          <td id="D-maison" class="montant">0.00 €</td>
        </tr>
        <tr>
          <td>Parking 1</td>
          <td>3</td>
          <td id="D-parking1" class="montant">0.00 €</td>
        </tr>
        <tr class="subtotal">
          <td colspan="4" id="subtotal-D" class="montant">Sous-total LOT D : 0.00 €</td>
        </tr>
        <!-- LOT E -->
        <tr>
          <td>E</td>
          <td>Maison</td>
          <td>281</td>
          <td id="E-maison" class="montant">0.00 €</td>
        </tr>
        <tr class="subtotal">
          <td colspan="4" id="subtotal-E" class="montant">Sous-total LOT E : 0.00 €</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <script>
    // Fonction de formatage avec séparateur des milliers et 2 décimales
    function formater(valeur) {
      return valeur.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
    
    function calculer() {
      var montant = parseFloat(document.getElementById('montant').value);
      if (isNaN(montant) || montant <= 0) {
        alert("Veuillez saisir un montant valide supérieur à 0.");
        return;
      }
      
      // LOT A : 138 + 3 + 3 = 144 tantièmes
      var A_maison = montant * (138 / 1000);
      var A_parking1 = montant * (3 / 1000);
      var A_parking2 = montant * (3 / 1000);
      var totalA = montant * (144 / 1000);
      document.getElementById('A-maison').innerText = formater(A_maison) + " €";
      document.getElementById('A-parking1').innerText = formater(A_parking1) + " €";
      document.getElementById('A-parking2').innerText = formater(A_parking2) + " €";
      document.getElementById('subtotal-A').innerText = "Sous-total LOT A : " + formater(totalA) + " €";
      
      // LOT B : 138 + 3 + 3 = 144 tantièmes
      var B_maison = montant * (138 / 1000);
      var B_parking1 = montant * (3 / 1000);
      var B_parking2 = montant * (3 / 1000);
      var totalB = montant * (144 / 1000);
      document.getElementById('B-maison').innerText = formater(B_maison) + " €";
      document.getElementById('B-parking1').innerText = formater(B_parking1) + " €";
      document.getElementById('B-parking2').innerText = formater(B_parking2) + " €";
      document.getElementById('subtotal-B').innerText = "Sous-total LOT B : " + formater(totalB) + " €";
      
      // LOT C : 138 + 3 = 141 tantièmes
      var C_maison = montant * (138 / 1000);
      var C_parking1 = montant * (3 / 1000);
      var totalC = montant * (141 / 1000);
      document.getElementById('C-maison').innerText = formater(C_maison) + " €";
      document.getElementById('C-parking1').innerText = formater(C_parking1) + " €";
      document.getElementById('subtotal-C').innerText = "Sous-total LOT C : " + formater(totalC) + " €";
      
      // LOT D : 287 + 3 = 290 tantièmes
      var D_maison = montant * (287 / 1000);
      var D_parking1 = montant * (3 / 1000);
      var totalD = montant * (290 / 1000);
      document.getElementById('D-maison').innerText = formater(D_maison) + " €";
      document.getElementById('D-parking1').innerText = formater(D_parking1) + " €";
      document.getElementById('subtotal-D').innerText = "Sous-total LOT D : " + formater(totalD) + " €";
      
      // LOT E : 281 tantièmes
      var E_maison = montant * (281 / 1000);
      document.getElementById('E-maison').innerText = formater(E_maison) + " €";
      document.getElementById('subtotal-E').innerText = "Sous-total LOT E : " + formater(E_maison) + " €";
    }
    
    // Désactive ou active le bouton en fonction de la valeur saisie
    function updateButtonState() {
      var montantInput = document.getElementById('montant');
      var calcButton = document.getElementById('calcButton');
      var valeur = parseFloat(montantInput.value);
      if (isNaN(valeur) || valeur <= 0) {
        calcButton.disabled = true;
      } else {
        calcButton.disabled = false;
      }
    }
    
    // Lancer le calcul avec la touche "Entrée"
    document.getElementById('montant').addEventListener('keydown', function(event) {
      if (event.key === "Enter" && !document.getElementById('calcButton').disabled) {
        calculer();
      }
    });
    
    // Mettre à jour l'état du bouton dès qu'une valeur est saisie
    document.getElementById('montant').addEventListener('input', updateButtonState);
    
    // Initialisation de l'état du bouton
    updateButtonState();
  </script>
</body>
</html>