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/anomaly.hbs

@@ -1,6 +1,6 @@
 <div class="item-sheet anomaly">
   <header class="item-header">
-    <div class="item-portrait" data-action="editImage" data-edit="img">
+    <div class="item-portrait" data-action="editImage">
       <img src="{{item.img}}" alt="{{item.name}}">
     </div>
     <div class="item-header-fields">

templates/aspect.hbs

@@ -1,6 +1,6 @@
 <div class="item-sheet aspect">
   <header class="item-header">
-    <div class="item-portrait" data-action="editImage" data-edit="img">
+    <div class="item-portrait" data-action="editImage">
       <img src="{{item.img}}" alt="{{item.name}}">
     </div>
     <div class="item-header-fields">

templates/attribute.hbs

@@ -1,6 +1,6 @@
 <div class="item-sheet attribute">
   <header class="item-header">
-    <div class="item-portrait" data-action="editImage" data-edit="img">
+    <div class="item-portrait" data-action="editImage">
       <img src="{{item.img}}" alt="{{item.name}}">
     </div>
     <div class="item-header-fields">

templates/character-blessures.hbs

@@ -12,7 +12,10 @@
       <div class="track-box {{#if (lookup ../system.blessures key 'checked')}}checked{{/if}}">
         <input type="checkbox" name="system.blessures.{{key}}.checked"
                {{#if (lookup ../system.blessures key 'checked')}}checked{{/if}}
-               {{#unless ../isEditable}}disabled{{/unless}}>
+               {{#unless ../isEditable}}disabled{{/unless}}
+               class="wound-checkbox"
+               data-track="blessures"
+               data-index="{{idx}}">
         <label class="box-label">{{lookup ../system.blessures key 'malus'}}</label>
       </div>
       {{/each}}
@@ -37,7 +40,10 @@
       <div class="track-box destiny {{#if (lookup ../system.destin key 'checked')}}checked{{/if}}">
         <input type="checkbox" name="system.destin.{{key}}.checked"
                {{#if (lookup ../system.destin key 'checked')}}checked{{/if}}
-               {{#unless ../isEditable}}disabled{{/unless}}>
+               {{#unless ../isEditable}}disabled{{/unless}}
+               class="wound-checkbox"
+               data-track="destin"
+               data-index="{{@index}}">
       </div>
       {{/each}}
     </div>
@@ -61,7 +67,10 @@
       <div class="track-box spleen {{#if (lookup ../system.spleen key 'checked')}}checked{{/if}}">
         <input type="checkbox" name="system.spleen.{{key}}.checked"
                {{#if (lookup ../system.spleen key 'checked')}}checked{{/if}}
-               {{#unless ../isEditable}}disabled{{/unless}}>
+               {{#unless ../isEditable}}disabled{{/unless}}
+               class="wound-checkbox"
+               data-track="spleen"
+               data-index="{{@index}}">
       </div>
       {{/each}}
     </div>

templates/character-competences.hbs

@@ -1,5 +1,5 @@
 <div class="tab competences {{tab.cssClass}}" data-group="sheet" data-tab="competences">
-  {{!-- Grille des 4 stats × 4 compétences --}}
+  {{!-- Grille des 4 stats × 4 domaines --}}
   <div class="stats-grid">
     {{#each stats as |stat statId|}}
     <div class="stat-block">
@@ -8,26 +8,50 @@
         <div class="stat-res">
           <label>{{localize "CELESTOPOL.Stat.res"}}</label>
           {{#if ../isEditMode}}
-            <input type="number" name="system.stats.{{statId}}.res" value="{{lookup ../system.stats statId 'res'}}" min="0" max="8" class="stat-res-input">
+            <input type="number" name="system.stats.{{statId}}.res" value="{{lookup (lookup ../system.stats statId) 'res'}}" min="0" max="8" class="stat-res-input">
           {{else}}
-            <span class="stat-res-value">{{lookup ../system.stats statId 'res'}}</span>
+            <span class="stat-res-value">{{lookup (lookup ../system.stats statId) 'res'}}</span>
           {{/if}}
         </div>
       </div>
       <div class="skills-list">
         {{#each (lookup ../skills statId) as |skill skillId|}}
-        <div class="skill-row {{#unless ../isEditMode}}rollable{{/unless}}"
-             data-stat-id="{{statId}}" data-skill-id="{{skillId}}"
-             title="{{#unless ../isEditMode}}{{localize 'CELESTOPOL.Roll.clickToRoll'}}{{/unless}}">
+        {{#if @root.isEditMode}}
+        <div class="skill-row edit-mode" data-stat-id="{{statId}}" data-skill-id="{{skillId}}">
           <span class="skill-name">{{localize skill.label}}</span>
-          {{#if ../isEditMode}}
-            <input type="number" name="system.stats.{{statId}}.{{skillId}}.value"
-                   value="{{lookup (lookup ../system.stats statId) skillId 'value'}}"
-                   min="0" max="8" class="skill-value-input">
-          {{else}}
-            <span class="skill-value">{{lookup (lookup ../system.stats statId) skillId 'value'}}</span>
-          {{/if}}
+          <div class="skill-checkboxes-container">
+            <div class="skill-checkboxes">
+              {{#each (array 1 2 3 4 5 6 7 8) as |level|}}
+              <label class="skill-checkbox-wrapper">
+                <input type="checkbox" name="system.stats.{{statId}}.{{skillId}}.level{{level}}"
+                       {{#if (lookup (lookup (lookup @root.system.stats statId) skillId) (concat 'level' level))}}checked{{/if}}
+                       class="skill-level-checkbox">
+              </label>
+              {{/each}}
+            </div>
+          </div>
+          <input type="number" name="system.stats.{{statId}}.{{skillId}}.value"
+                 value="{{lookup (lookup @root.system.stats statId) skillId 'value'}}"
+                 min="0" max="8" class="skill-value-input">
         </div>
+        {{else}}
+        <div class="skill-row rollable" data-stat-id="{{statId}}" data-skill-id="{{skillId}}"
+             title="{{localize 'CELESTOPOL.Roll.clickToRoll'}}">
+          <span class="skill-name">{{localize skill.label}}</span>
+          <div class="skill-checkboxes-container">
+            <div class="skill-checkboxes">
+              {{#each (array 1 2 3 4 5 6 7 8) as |level|}}
+              <label class="skill-checkbox-wrapper">
+                <input type="checkbox"
+                       {{#if (lookup (lookup (lookup @root.system.stats statId) skillId) (concat 'level' level))}}checked{{/if}}
+                       disabled class="skill-level-checkbox">
+              </label>
+              {{/each}}
+            </div>
+          </div>
+          <span class="skill-value">{{lookup (lookup @root.system.stats statId) skillId 'value'}}</span>
+        </div>
+        {{/if}}
         {{/each}}
       </div>
     </div>

templates/character-factions.hbs

@@ -8,21 +8,44 @@
     </thead>
     <tbody>
       {{#each factions as |faction factionId|}}
-      <tr class="faction-row">
+      <tr class="faction-row" data-faction="{{factionId}}">
         <td class="faction-name">{{localize faction.label}}</td>
         <td class="faction-value">
-          {{#if ../isEditMode}}
-            <input type="number" name="system.factions.{{factionId}}.value"
-                   value="{{lookup ../system.factions factionId 'value'}}" min="0">
-          {{else}}
-            <span>{{lookup ../system.factions factionId 'value'}}</span>
-          {{/if}}
+          <div class="faction-checkboxes-container">
+            <div class="faction-checkboxes">
+              {{#each (array 1 2 3 4 5 6 7 8 9) as |level|}}
+              {{#if @root.isEditMode}}
+              <label class="faction-checkbox-wrapper">
+                <input type="checkbox" name="system.factions.{{factionId}}.level{{level}}"
+                       {{#if (lookup (lookup @root.system.factions factionId) (concat 'level' level))}}checked{{/if}}
+                       class="faction-checkbox"
+                       data-faction="{{factionId}}"
+                       data-level="{{level}}">
+              </label>
+              {{else}}
+              <label class="faction-checkbox-wrapper">
+                <input type="checkbox" 
+                       {{#if (lookup (lookup @root.system.factions factionId) (concat 'level' level))}}checked{{/if}}
+                       disabled class="faction-checkbox">
+              </label>
+              {{/if}}
+              {{/each}}
+            </div>
+            <span class="faction-count">
+              {{#if ../isEditMode}}
+                <input type="number" name="system.factions.{{factionId}}.value"
+                       value="{{lookup (lookup ../system.factions factionId) 'value'}}" min="0" max="9" class="faction-value-input">
+              {{else}}
+                {{lookup (lookup ../system.factions factionId) 'value'}}
+              {{/if}}
+            </span>
+          </div>
         </td>
       </tr>
       {{/each}}
 
       {{!-- Factions personnalisées --}}
-      <tr class="faction-row custom">
+      <tr class="faction-row custom" data-faction="perso1">
         <td>
           {{#if isEditMode}}
             <input type="text" name="system.factions.perso1.label"
@@ -33,14 +56,38 @@
           {{/if}}
         </td>
         <td>
-          {{#if isEditMode}}
-            <input type="number" name="system.factions.perso1.value" value="{{system.factions.perso1.value}}" min="0">
-          {{else}}
-            <span>{{system.factions.perso1.value}}</span>
-          {{/if}}
+          <div class="faction-checkboxes-container">
+            <div class="faction-checkboxes">
+              {{#each (array 1 2 3 4 5 6 7 8 9) as |level|}}
+              {{#if ../isEditMode}}
+              <label class="faction-checkbox-wrapper">
+                <input type="checkbox" name="system.factions.perso1.level{{level}}"
+                       {{#if (lookup ../system.factions.perso1 (concat 'level' level))}}checked{{/if}}
+                       class="faction-checkbox"
+                       data-faction="perso1"
+                       data-level="{{level}}">
+              </label>
+              {{else}}
+              <label class="faction-checkbox-wrapper">
+                <input type="checkbox" 
+                       {{#if (lookup ../system.factions.perso1 (concat 'level' level))}}checked{{/if}}
+                       disabled class="faction-checkbox">
+              </label>
+              {{/if}}
+              {{/each}}
+            </div>
+            <span class="faction-count">
+              {{#if ../isEditMode}}
+                <input type="number" name="system.factions.perso1.value"
+                       value="{{system.factions.perso1.value}}" min="0" max="9" class="faction-value-input">
+              {{else}}
+                {{system.factions.perso1.value}}
+              {{/if}}
+            </span>
+          </div>
         </td>
       </tr>
-      <tr class="faction-row custom">
+      <tr class="faction-row custom" data-faction="perso2">
         <td>
           {{#if isEditMode}}
             <input type="text" name="system.factions.perso2.label"
@@ -51,11 +98,35 @@
           {{/if}}
         </td>
         <td>
-          {{#if isEditMode}}
-            <input type="number" name="system.factions.perso2.value" value="{{system.factions.perso2.value}}" min="0">
-          {{else}}
-            <span>{{system.factions.perso2.value}}</span>
-          {{/if}}
+          <div class="faction-checkboxes-container">
+            <div class="faction-checkboxes">
+              {{#each (array 1 2 3 4 5 6 7 8 9) as |level|}}
+              {{#if ../isEditMode}}
+              <label class="faction-checkbox-wrapper">
+                <input type="checkbox" name="system.factions.perso2.level{{level}}"
+                       {{#if (lookup ../system.factions.perso2 (concat 'level' level))}}checked{{/if}}
+                       class="faction-checkbox"
+                       data-faction="perso2"
+                       data-level="{{level}}">
+              </label>
+              {{else}}
+              <label class="faction-checkbox-wrapper">
+                <input type="checkbox" 
+                       {{#if (lookup ../system.factions.perso2 (concat 'level' level))}}checked{{/if}}
+                       disabled class="faction-checkbox">
+              </label>
+              {{/if}}
+              {{/each}}
+            </div>
+            <span class="faction-count">
+              {{#if ../isEditMode}}
+                <input type="number" name="system.factions.perso2.value"
+                       value="{{system.factions.perso2.value}}" min="0" max="9" class="faction-value-input">
+              {{else}}
+                {{system.factions.perso2.value}}
+              {{/if}}
+            </span>
+          </div>
         </td>
       </tr>
     </tbody>

templates/character-main.hbs

@@ -1,6 +1,6 @@
 <div class="character-main sheet-part">
   <header class="sheet-header">
-    <div class="portrait" data-action="editImage" data-edit="img">
+    <div class="portrait" data-action="editImage">
       <img src="{{actor.img}}" alt="{{actor.name}}" class="actor-portrait {{#unless isEditMode}}click-to-edit{{/unless}}">
     </div>
     <div class="header-fields">

templates/chat-message.hbs

@@ -1,49 +1,88 @@
 <div class="celestopol chat-roll {{resultClass}}">
+
+  {{!-- En-tête : acteur + domaine --}}
   <div class="roll-header">
     {{#if actorImg}}
       <img src="{{actorImg}}" class="actor-img" alt="{{actorName}}">
     {{/if}}
     <div class="roll-info">
       <span class="actor-name">{{actorName}}</span>
-      <span class="skill-info">{{statLabel}} › {{skillLabel}}</span>
+      <span class="skill-info">
+        {{#if statLabel}}<span class="stat-lbl">{{statLabel}}</span><span class="sep"> › </span>{{/if}}
+        <span class="skill-lbl">{{skillLabel}}</span>
+      </span>
+      {{#if woundLabel}}
+      <span class="wound-info">⚠ {{woundLabel}}</span>
+      {{/if}}
+    </div>
+    <div class="moon-badge" title="{{moonPhaseLabel}}">
+      <span class="moon-sym">{{moonSymbol}}</span>
+      {{#if moonBonus}}<span class="moon-bon">+{{moonBonus}}</span>{{/if}}
     </div>
   </div>
 
-  <div class="roll-details">
-    <div class="dice-results">
-      {{#each diceResults as |die|}}
-      <span class="die d6">{{die}}</span>
-      {{/each}}
-    </div>
+  {{!-- Dés --}}
+  <div class="dice-zone">
+    {{#each diceResults as |die|}}
+    <span class="die-face d6 {{#if (eq die 6)}}max{{/if}}{{#if (eq die 1)}}min{{/if}}">{{die}}</span>
+    {{/each}}
+  </div>
 
+  {{!-- Formule détaillée --}}
+  <div class="formula-line">
+    <span class="fl-ndice">{{nbDice}}d6</span>
+    <span class="fl-eq"> = </span>
+    <span class="fl-sum">{{diceSum}}</span>
     {{#if moonBonus}}
-    <div class="bonus-line">
-      <span class="bonus-label">{{localize "CELESTOPOL.Roll.moonBonus"}} ({{moonPhaseLabel}}) :</span>
-      <span class="bonus-value">+{{moonBonus}}</span>
-    </div>
+    <span class="fl-op"> + </span>
+    <span class="fl-moon" title="{{moonPhaseLabel}}">{{moonSymbol}} {{moonBonus}}</span>
     {{/if}}
-
     {{#if modifier}}
-    <div class="bonus-line">
-      <span class="bonus-label">{{localize "CELESTOPOL.Roll.modifier"}} :</span>
-      <span class="bonus-value">{{#if (gt modifier 0)}}+{{/if}}{{modifier}}</span>
-    </div>
+    <span class="fl-op"> {{#if (gt modifier 0)}}+{{else}}−{{/if}} </span>
+    <span class="fl-mod">{{abs modifier}}</span>
     {{/if}}
-
-    <div class="roll-total-line">
-      <span class="total-label">{{localize "CELESTOPOL.Roll.total"}}</span>
-      <span class="total-value">{{total}}</span>
-      <span class="vs-difficulty">vs {{difficultyLabel}}</span>
-    </div>
+    {{#if aspectMod}}
+    <span class="fl-op"> {{#if (gt aspectMod 0)}}+{{else}}−{{/if}} </span>
+    <span class="fl-asp" title="{{localize "CELESTOPOL.Roll.usedAspect"}}">✦ {{abs aspectMod}}</span>
+    {{/if}}
+    <span class="fl-sep"> = </span>
+    <span class="fl-total">{{total}}</span>
   </div>
 
+  {{!-- Seuil et marge --}}
+  <div class="threshold-line">
+    <span class="vs-label">vs</span>
+    <span class="diff-label">{{difficultyLabel}}</span>
+    <span class="diff-val">({{difficultyValue}})</span>
+    {{#if margin}}
+    <span class="margin-badge {{#if marginAbove}}above{{else}}below{{/if}}">
+      {{#if marginAbove}}+{{/if}}{{margin}}
+    </span>
+    {{/if}}
+  </div>
+
+  {{!-- Infos bonus (Destin utilisé) --}}
+  {{#if useDestin}}
+  <div class="used-info">
+    <span class="used-destin">⭐ {{localize "CELESTOPOL.Roll.usedDestin"}}</span>
+  </div>
+  {{/if}}
+
+  {{!-- Bandeau résultat --}}
   <div class="roll-result-banner {{resultClass}}">
-    {{#if success}}
-      <span class="result-label success">{{localize "CELESTOPOL.Roll.success"}}</span>
-      {{#if criticalSuccess}}<span class="critical">{{localize "CELESTOPOL.Roll.criticalSuccess"}}</span>{{/if}}
-    {{else}}
-      <span class="result-label failure">{{localize "CELESTOPOL.Roll.failure"}}</span>
-      {{#if criticalFailure}}<span class="critical">{{localize "CELESTOPOL.Roll.criticalFailure"}}</span>{{/if}}
+    {{#if isCriticalSuccess}}
+      <span class="result-icon">✦</span>
+      <span class="result-label">{{localize "CELESTOPOL.Roll.criticalSuccess"}}</span>
+      <span class="result-desc">{{localize "CELESTOPOL.Roll.criticalSuccessDesc"}}</span>
+    {{else if isSuccess}}
+      <span class="result-label">{{localize "CELESTOPOL.Roll.success"}}</span>
+    {{else if isCriticalFailure}}
+      <span class="result-icon">✖</span>
+      <span class="result-label">{{localize "CELESTOPOL.Roll.criticalFailure"}}</span>
+      <span class="result-desc">{{localize "CELESTOPOL.Roll.criticalFailureDesc"}}</span>
+    {{else if isFailure}}
+      <span class="result-label">{{localize "CELESTOPOL.Roll.failure"}}</span>
     {{/if}}
   </div>
+
 </div>

templates/equipment.hbs

@@ -1,6 +1,6 @@
 <div class="item-sheet equipment">
   <header class="item-header">
-    <div class="item-portrait" data-action="editImage" data-edit="img">
+    <div class="item-portrait" data-action="editImage">
       <img src="{{item.img}}" alt="{{item.name}}">
     </div>
     <div class="item-header-fields">

templates/npc-main.hbs

@@ -1,6 +1,6 @@
 <div class="npc-main sheet-part">
   <header class="sheet-header">
-    <div class="portrait" data-action="editImage" data-edit="img">
+    <div class="portrait" data-action="editImage">
       <img src="{{actor.img}}" alt="{{actor.name}}" class="actor-portrait">
     </div>
     <div class="header-fields">

templates/partials/item-scores.hbs

@@ -1,4 +1,4 @@
-{{!-- Template partagé pour les scores bonus/malus d'un item par compétence --}}
+{{!-- Template partagé pour les scores bonus/malus d'un item par domaine --}}
 <div class="scores-section">
   <div class="scores-header">
     <span>{{localize "CELESTOPOL.Item.scores"}}</span>

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>