<section class="lancer-recette">
  <header class="lancer-recette-header">
    <p><strong>{{recette}}</strong> — <em>{{personnage}}</em></p>
    {{#if but}}<p class="lancer-recette-but">{{but}}</p>{{/if}}
  </header>

  {{!-- Ingrédients --}}
  {{#if ingredients.length}}
  <div class="lancer-recette-section">
    <h4>Ingrédients</h4>
    <table class="lancer-recette-ingredients">
      <thead>
        <tr>
          <th>Ingrédient</th>
          <th>Requis</th>
          <th>Possédé</th>
          <th>Consommable</th>
        </tr>
      </thead>
      <tbody>
        {{#each ingredients as |ing|}}
        <tr class="{{#if ing.suffisant}}ing-ok{{else}}ing-missing{{/if}}">
          <td>{{ing.nom}}</td>
          <td>{{ing.quantiteRequise}} {{ing.unite}}</td>
          <td>{{ing.quantiteTrouvee}} {{ing.unite}}</td>
          <td>{{#if ing.consommable}}✓{{else}}—{{/if}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
  {{/if}}

  {{!-- Étapes alchimiques --}}
  {{#if etapes.length}}
  <div class="lancer-recette-section">
    <h4>Opérations alchimiques</h4>
    <table class="lancer-recette-etapes">
      <thead>
        <tr>
          <th>#</th>
          <th>Opération</th>
          <th>Difficulté</th>
          <th>Carac.</th>
          <th>Statut</th>
        </tr>
      </thead>
      <tbody>
        {{#each etapes as |etape idx|}}
        <tr class="etape-row etape-{{etape.status}}" data-index="{{@index}}">
          <td>{{etape.num}}</td>
          <td>
            {{#if (eq etape.type "couleur")}}Couleur{{else}}Consistance{{/if}}
            <span class="etape-termes">{{etape.termes}}</span>
            {{#if etape.sansCristal}}<span class="etape-malus">(−4 sans cristal)</span>{{/if}}
          </td>
          <td class="etape-diff">{{etape.difficulte}}</td>
          <td>{{etape.carac.label}}</td>
          <td class="etape-status">
            {{#if (eq etape.status "pending")}}<i class="fas fa-circle status-pending"></i>
            {{else if (eq etape.status "rolling")}}<i class="fas fa-spinner fa-pulse status-rolling"></i>
            {{else if (eq etape.status "success")}}<i class="fas fa-check-circle status-success"></i>
            {{else if (eq etape.status "failure")}}<i class="fas fa-times-circle status-failure"></i>
            {{/if}}
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
    {{#if enCours}}<p class="lancer-recette-progress">Opération en cours…</p>{{/if}}
  </div>
  {{/if}}

  {{!-- Résultat --}}
  {{#if resultat}}
  <div class="lancer-recette-section">
    <h4>Résultat</h4>
    <p>{{resultat.name}} ({{resultat.type}}) × {{resultat.quantite}}</p>
  </div>
  {{/if}}

  {{!-- Message de fin --}}
  {{#if termine}}
  <div class="lancer-recette-result {{#if allReussi}}result-success{{else}}result-failure{{/if}}">
    {{#if allReussi}}
    <p><i class="fas fa-check-circle"></i> Toutes les opérations ont réussi !</p>
    {{else}}
    <p><i class="fas fa-times-circle"></i> La recette a échoué. Les ingrédients ont été consommés.</p>
    {{/if}}
  </div>
  {{/if}}

  {{!-- Boutons d'action --}}
  <div class="lancer-recette-buttons">
    {{#if peutLancer}}
    <button type="button" data-action="lancerOperations">
      <i class="fas fa-flask"></i> Lancer les opérations
    </button>
    {{/if}}
    <button type="button" data-action="close">
      <i class="fas fa-times"></i> Fermer
    </button>
  </div>
</section>
