From 441134c23b3e59f52149c959e6854882f707a7f7 Mon Sep 17 00:00:00 2001
From: LeRatierBretonnier <sylvain@lahiette.com>
Date: Fri, 10 Jul 2026 22:59:10 +0200
Subject: [PATCH] =?UTF-8?q?refacto:=20styles=20externalis=C3=A9s=20dans=20?=
 =?UTF-8?q?.less,=20plus=20d'inline=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- style='width: X%' → style='--pct: X' dans templates et JS
- CSS calc(var(--pct) * 1%) dans les fichiers .less correspondants
- Création de styles/action-complexe.less
- Import action-complexe.less dans fvtt-hamalron.less
- style='width: 100%' → class='tension-select' dans tarot-deck-manager
- Ajout .tension-select dans tarot-deck-manager.less
- Suppression doublon .initiative-roll dans chat.less
---
 css/fvtt-hamalron.css                       | 141 +++++++++++++++++++
 module/applications/resistance-recovery.mjs |   2 +-
 module/applications/tarot-deck-manager.mjs  |   2 +-
 styles/action-complexe.less                 | 142 ++++++++++++++++++++
 styles/fvtt-hamalron.less                   |   1 +
 styles/tarot-deck-manager.less              |   4 +
 templates/dialog-action-complexe.hbs        |   2 +-
 7 files changed, 291 insertions(+), 3 deletions(-)
 create mode 100644 styles/action-complexe.less

diff --git a/css/fvtt-hamalron.css b/css/fvtt-hamalron.css
index 6c2bfa1..41ccb21 100644
--- a/css/fvtt-hamalron.css
+++ b/css/fvtt-hamalron.css
@@ -2335,6 +2335,144 @@ i.fvtt-hamalron {
 .fvtt-hamalron .tarot-content label {
   flex: 10%;
 }
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-complexe-container {
+  padding: 8px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-complexe-header {
+  margin-bottom: 12px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-complexe-header button {
+  width: 100%;
+  padding: 8px;
+  background: #2a2a4a;
+  color: #e0e0e0;
+  border: 1px dashed #555;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-complexe-header button:hover {
+  background: #3a3a6a;
+  border-color: #e94560;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-complexe-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-card {
+  background: #1e1e3a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 10px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-card.action-complete {
+  border-color: #4caf50;
+  background: #1a2e1a;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-header .action-name {
+  font-weight: 600;
+  color: #e0e0e0;
+  font-size: 14px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-header .action-symbole {
+  color: #e94560;
+  font-size: 14px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-progress .progress-bar {
+  flex: 1;
+  height: 8px;
+  background: #333;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-progress .progress-bar .progress-fill {
+  height: 100%;
+  width: calc(var(--pct) * 1%);
+  background: linear-gradient(90deg, #e94560, #ff6b81);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-progress .progress-text {
+  font-size: 12px;
+  color: #aaa;
+  white-space: nowrap;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 4px;
+  font-size: 12px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-stats .stat-success {
+  color: #4caf50;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-stats .stat-failure {
+  color: #f44336;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-notes {
+  font-size: 11px;
+  color: #888;
+  font-style: italic;
+  margin-bottom: 6px;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-controls {
+  display: flex;
+  gap: 4px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-controls button {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+  transition: opacity 0.2s;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-controls button:hover {
+  opacity: 0.8;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-controls .btn-success {
+  background: #2e7d32;
+  color: #fff;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-controls .btn-failure {
+  background: #c62828;
+  color: #fff;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-controls .btn-reset {
+  background: #555;
+  color: #ccc;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-controls .btn-delete {
+  background: #333;
+  color: #888;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-empty {
+  text-align: center;
+  padding: 40px 20px;
+  color: #666;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-empty i {
+  margin-bottom: 12px;
+}
+.fvtt-hamalron .fvtt-hamalron.action-complexe .action-empty p {
+  font-size: 13px;
+}
 .fvtt-hamalron.ask-roll {
   display: flex;
   flex-direction: column;
@@ -3469,6 +3607,9 @@ i.fvtt-hamalron {
     opacity: 0.8;
   }
 }
+.tarot-deck-manager .tension-select {
+  width: 100%;
+}
 .tarot-deck-manager .tarot-deck-manager-content {
   padding: 1.5rem;
   display: flex;
diff --git a/module/applications/resistance-recovery.mjs b/module/applications/resistance-recovery.mjs
index 4780589..13b994f 100644
--- a/module/applications/resistance-recovery.mjs
+++ b/module/applications/resistance-recovery.mjs
@@ -85,7 +85,7 @@ export default class HamalronResistanceRecovery {
           <strong>${info.label}</strong>
           <span>${info.value}/${info.max}</span>
         </div>
-        <div class="progress-bar-mini"><div class="progress-fill" style="width:${pct}%"></div></div>
+        <div class="progress-bar-mini"><div class="progress-fill" style="--pct: ${pct}"></div></div>
         <div class="recovery-actions">`
 
       if (info.isDenierCoupe) {
diff --git a/module/applications/tarot-deck-manager.mjs b/module/applications/tarot-deck-manager.mjs
index 215e02e..a1b5588 100644
--- a/module/applications/tarot-deck-manager.mjs
+++ b/module/applications/tarot-deck-manager.mjs
@@ -556,7 +556,7 @@ export default class HamalronTarotDeckManager extends HandlebarsApplicationMixin
     const content = `
       <div class="form-group">
         <label>${game.i18n.localize("HAMALRON.Label.difficulty")}</label>
-        <select id="tension-difficulty" style="width: 100%;">
+        <select id="tension-difficulty" class="tension-select">
           ${selectOptions}
         </select>
       </div>
diff --git a/styles/action-complexe.less b/styles/action-complexe.less
new file mode 100644
index 0000000..d3a9af8
--- /dev/null
+++ b/styles/action-complexe.less
@@ -0,0 +1,142 @@
+.fvtt-hamalron {
+  &.action-complexe {
+    .action-complexe-container {
+      padding: 8px;
+    }
+
+    .action-complexe-header {
+      margin-bottom: 12px;
+
+      button {
+        width: 100%;
+        padding: 8px;
+        background: #2a2a4a;
+        color: #e0e0e0;
+        border: 1px dashed #555;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+
+        &:hover {
+          background: #3a3a6a;
+          border-color: #e94560;
+        }
+      }
+    }
+
+    .action-complexe-list {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .action-card {
+      background: #1e1e3a;
+      border: 1px solid #333;
+      border-radius: 8px;
+      padding: 10px;
+
+      &.action-complete {
+        border-color: #4caf50;
+        background: #1a2e1a;
+      }
+    }
+
+    .action-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 6px;
+
+      .action-name {
+        font-weight: 600;
+        color: #e0e0e0;
+        font-size: 14px;
+      }
+
+      .action-symbole {
+        color: #e94560;
+        font-size: 14px;
+      }
+    }
+
+    .action-progress {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 4px;
+
+      .progress-bar {
+        flex: 1;
+        height: 8px;
+        background: #333;
+        border-radius: 4px;
+        overflow: hidden;
+
+        .progress-fill {
+          height: 100%;
+          width: calc(var(--pct) * 1%);
+          background: linear-gradient(90deg, #e94560, #ff6b81);
+          border-radius: 4px;
+          transition: width 0.3s ease;
+        }
+      }
+
+      .progress-text {
+        font-size: 12px;
+        color: #aaa;
+        white-space: nowrap;
+      }
+    }
+
+    .action-stats {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 4px;
+      font-size: 12px;
+
+      .stat-success { color: #4caf50; }
+      .stat-failure { color: #f44336; }
+    }
+
+    .action-notes {
+      font-size: 11px;
+      color: #888;
+      font-style: italic;
+      margin-bottom: 6px;
+      padding: 4px;
+      background: rgba(0,0,0,0.2);
+      border-radius: 4px;
+    }
+
+    .action-controls {
+      display: flex;
+      gap: 4px;
+
+      button {
+        padding: 4px 8px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 11px;
+        transition: opacity 0.2s;
+
+        &:hover { opacity: 0.8; }
+      }
+
+      .btn-success { background: #2e7d32; color: #fff; }
+      .btn-failure { background: #c62828; color: #fff; }
+      .btn-reset { background: #555; color: #ccc; }
+      .btn-delete { background: #333; color: #888; }
+    }
+
+    .action-empty {
+      text-align: center;
+      padding: 40px 20px;
+      color: #666;
+
+      i { margin-bottom: 12px; }
+      p { font-size: 13px; }
+    }
+  }
+}
diff --git a/styles/fvtt-hamalron.less b/styles/fvtt-hamalron.less
index c5e911d..34f28f9 100644
--- a/styles/fvtt-hamalron.less
+++ b/styles/fvtt-hamalron.less
@@ -16,6 +16,7 @@
   @import "region.less";
   @import "sortilege.less";
   @import "tarot.less";
+  @import "action-complexe.less";
 }
 
 @import "chat.less";
diff --git a/styles/tarot-deck-manager.less b/styles/tarot-deck-manager.less
index 1d46153..231f8d4 100644
--- a/styles/tarot-deck-manager.less
+++ b/styles/tarot-deck-manager.less
@@ -1,4 +1,8 @@
 .tarot-deck-manager {
+  .tension-select {
+    width: 100%;
+  }
+
   .tarot-deck-manager-content {
     padding: 1.5rem;
     display: flex;
diff --git a/templates/dialog-action-complexe.hbs b/templates/dialog-action-complexe.hbs
index 930c183..2cfd5ec 100644
--- a/templates/dialog-action-complexe.hbs
+++ b/templates/dialog-action-complexe.hbs
@@ -16,7 +16,7 @@
 
           <div class="action-progress">
             <div class="progress-bar">
-              <div class="progress-fill" style="width: {{pct}}%"></div>
+              <div class="progress-fill" style="--pct: {{pct}}"></div>
             </div>
             <span class="progress-text">{{currentSuccesses}} / {{resistance}}</span>
           </div>