Fix roll dialog CSS + JS: template <div> wrapper, moon-section, selectors

- Remplace <form class='roll-dialog celestopol'> par <div class='roll-dialog-content'>
  pour éviter les formulaires HTML imbriqués invalides (DialogV2 a son propre <form>)
- Corrige le sélecteur CSS de .roll-dialog.celestopol vers .application.roll-dialog .roll-dialog-content
- Remplace .form-group.form-moon par .moon-section (classe custom) pour éviter
  les conflits avec le CSS grid de FoundryVTT standard-form (label 130px de hauteur)
- Met à jour le script JS inline pour utiliser document.querySelector('.roll-dialog-content')
- Ajoute white-space: nowrap sur le label Destin pour éviter le wrapping sur 3 lignes
- Supprime .application.roll-dialog .window-content padding override (remplacé par dialog-content)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

templates/roll-dialog.hbs

@@ -1,21 +1,48 @@
-<form class="roll-dialog celestopol">
-  <div class="roll-title">
-    {{#if statLabel}}<span class="stat-label">{{localize statLabel}}</span><span class="separator"> › </span>{{/if}}
-    <span class="skill-label">{{localize skillLabel}}</span>
+<div class="roll-dialog-content">
+
+  {{!-- Info bloc : acteur + domaine --}}
+  <div class="roll-info-block">
+    <div class="roll-actor">{{actorName}}</div>
+    <div class="roll-skill-line">
+      {{#if statLabel}}<span class="stat-label">{{localize statLabel}}</span><span class="sep"> › </span>{{/if}}
+      <span class="skill-label">{{localize skillLabel}}</span>
+    </div>
+
+    <div class="roll-dice-summary">
+      <div class="dice-breakdown">
+        <span class="dval">{{skillValue}}</span>
+        <span class="dlabel">{{localize "CELESTOPOL.Roll.nbDiceBase"}}</span>
+        {{#if woundMalus}}
+        <span class="dminus"> − {{abs woundMalus}}</span>
+        <span class="dlabel">{{localize "CELESTOPOL.Roll.woundMalus"}}</span>
+        {{/if}}
+        <span class="deq"> = </span>
+        <span class="nb-dice" id="preview-ndice">{{nbDiceBase}}</span>
+        <span class="ddice">d6</span>
+      </div>
+      {{#if woundLabel}}
+      <div class="wound-info">⚠ {{woundLabel}}</div>
+      {{/if}}
+    </div>
   </div>
 
-  <div class="form-group">
-    <label for="moonPhase">{{localize "CELESTOPOL.Roll.moonPhase"}}</label>
-    <select id="moonPhase" name="moonPhase">
+  {{!-- Sélecteur Phase de Lune --}}
+  <div class="moon-section">
+    <div class="moon-section-label">{{localize "CELESTOPOL.Roll.moonPhase"}}</div>
+    <div class="moon-phases" id="moon-phases">
       {{#each moonPhaseChoices as |phase key|}}
-      <option value="{{key}}" {{#if (eq key ../defaultMoonPhase)}}selected{{/if}}>
-        {{localize phase.label}} {{#if phase.bonus}}(+{{phase.bonus}}){{else}}(+0){{/if}}
-      </option>
+      <label class="moon-option {{#if (eq key ../defaultMoonPhase)}}active{{/if}}" data-moon="{{key}}" title="{{localize phase.label}}{{#if phase.bonus}} (+{{phase.bonus}}){{else}} (+0){{/if}}">
+        <input type="radio" name="moonPhase" value="{{key}}" {{#if (eq key ../defaultMoonPhase)}}checked{{/if}} hidden>
+        <span class="moon-symbol">{{phase.symbol}}</span>
+        <span class="moon-name">{{localize phase.label}}</span>
+        <span class="moon-bonus">{{#if phase.bonus}}+{{phase.bonus}}{{else}}+0{{/if}}</span>
+      </label>
       {{/each}}
-    </select>
+    </div>
   </div>
 
-  <div class="form-group">
+  {{!-- Seuil de difficulté --}}
+  <div class="form-group form-row">
     <label for="difficulty">{{localize "CELESTOPOL.Roll.difficulty"}}</label>
     <select id="difficulty" name="difficulty">
       {{#each difficultyChoices as |diff key|}}
@@ -26,14 +53,77 @@
     </select>
   </div>
 
-  <div class="form-group">
-    <label for="modifier">{{localize "CELESTOPOL.Roll.modifier"}}</label>
-    <input type="number" id="modifier" name="modifier" value="0" min="-10" max="10">
+  {{!-- Modificateur & Aspect en ligne --}}
+  <div class="form-two-col">
+    <div class="form-group">
+      <label for="modifier">{{localize "CELESTOPOL.Roll.modifier"}}</label>
+      <input type="number" id="modifier" name="modifier" value="0" min="-10" max="10">
+    </div>
+    <div class="form-group">
+      <label for="aspectModifier">{{localize "CELESTOPOL.Roll.aspect"}}</label>
+      <input type="number" id="aspectModifier" name="aspectModifier" value="0" min="-4" max="4">
+    </div>
   </div>
 
-  <div class="dice-preview">
-    <span>{{localize "CELESTOPOL.Roll.nbDice"}}</span>
-    <span class="nb-dice">{{nbDice}}</span>
-    <span>d6</span>
+  {{!-- Destin --}}
+  <div class="form-group form-destin">
+    <label class="destin-label" for="useDestin">
+      <input type="checkbox" id="useDestin" name="useDestin">
+      <span class="destin-icon">⭐</span>
+      {{localize "CELESTOPOL.Roll.destin"}}
+    </label>
   </div>
-</form>
+
+  {{!-- Prévisualisation dynamique --}}
+  <div class="dice-preview" id="dice-preview">
+    <span class="preview-formula" id="preview-formula">{{nbDiceBase}}d6</span>
+  </div>
+
+</div>
+
+<script>
+(function() {
+  const wrap = document.querySelector('.roll-dialog-content');
+  if (!wrap) return;
+
+  const skillVal   = {{skillValue}};
+  const woundMalus = {{woundMalus}};
+  const base = Math.max(1, skillVal + woundMalus);
+
+  function update() {
+    const moonBonus    = parseInt(wrap.querySelector('input[name="moonPhase"]:checked')?.closest('[data-moon]')
+                          ?.dataset.moonBonus ?? 0);
+    const modifier     = parseInt(wrap.querySelector('#modifier')?.value ?? 0) || 0;
+    const aspectMod    = parseInt(wrap.querySelector('#aspectModifier')?.value ?? 0) || 0;
+    const useDestin    = wrap.querySelector('#useDestin')?.checked ? 2 : 0;
+    const ndice        = Math.max(1, base + useDestin);
+    const totalMod     = moonBonus + modifier + aspectMod;
+    const formula      = totalMod !== 0 ? `${ndice}d6 + ${totalMod}` : `${ndice}d6`;
+
+    const previewEl    = wrap.querySelector('#preview-formula');
+    const ndiceEl      = wrap.querySelector('#preview-ndice');
+    if (previewEl)  previewEl.textContent = formula;
+    if (ndiceEl)    ndiceEl.textContent   = ndice;
+  }
+
+  // Mettre à jour les classes actives des lunes + moon-bonus
+  wrap.querySelectorAll('.moon-option').forEach(opt => {
+    const input = opt.querySelector('input[type="radio"]');
+    const key   = opt.dataset.moon;
+    const bonusMap = { {{#each moonPhaseChoices}}"{{@key}}": {{#if bonus}}{{bonus}}{{else}}0{{/if}}, {{/each}} };
+    opt.dataset.moonBonus = bonusMap[key] ?? 0;
+    input.addEventListener('change', () => {
+      wrap.querySelectorAll('.moon-option').forEach(o => o.classList.remove('active'));
+      opt.classList.add('active');
+      update();
+    });
+  });
+
+  wrap.querySelectorAll('#modifier, #aspectModifier, #useDestin').forEach(el => {
+    el.addEventListener('change', update);
+    el.addEventListener('input', update);
+  });
+
+  update();
+})();
+</script>