feat: refonte visuelle Art Déco — palette jade/or antique

Remplace le vert saturé rgb(12,76,12) par une palette Art Déco
cohérente avec l'esthétique du jeu (nuit lunaire, Belle Époque 1922).

Palette :
- --cel-green : #1b3828 (jade profond désaturé)
- --cel-orange : #c49a1a (or antique)
- --cel-cream : #f0e8d4 (parchemin chaud)
- --cel-border : #7a5c20 (bordure dorée)
- --cel-cream-dark : #e0d4b8 (rangées alternées)
- --cel-accent : #6b1e28 (bordeaux — échecs)

Changements visuels :
- Header : fond jade sombre + fond_cadrille (soft-light), cadre portrait doré
- Tabs : style Art Déco (border-bottom or, pas de fond orange plein)
- Section headers : couleur or + ::after gradient ornamental
- Stat blocks : jade texturé, valeurs compétences en or, rangées alternées
- Factions table : thead jade texturé, rangées alternées
- Items sheets : header jade, tabs Art Déco, labels or
- Chat : header jade texturé, bannière succès jade+or, échec bordeaux
- Roll dialog : titre et labels en or

Assets copiés depuis celestopol1922 :
- fond_cadrille2.jpg, cercle-vert/jaune-checked/unchecked.png, logo_jeu.png

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

styles/character.less

@@ -59,11 +59,14 @@
 
       .stat-header {
         background: var(--cel-green);
+        background-image: url("../assets/ui/fond_cadrille.jpg");
+        background-blend-mode: soft-light;
         color: var(--cel-orange);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 4px 8px;
+        padding: 5px 8px;
+        border-bottom: 1px solid rgba(196,154,26,0.4);
 
         .stat-name {
           font-family: var(--cel-font-title);
@@ -98,9 +101,12 @@
           align-items: center;
           justify-content: space-between;
           padding: 3px 8px;
-          border-bottom: 1px solid rgba(139,115,85,0.2);
+          border-bottom: 1px solid rgba(122,92,32,0.18);
           font-size: 0.85em;
 
+          // Alternating cream-dark rows for legibility
+          &:nth-child(even) { background: var(--cel-cream-dark); }
+
           &.rollable { .cel-rollable(); }
 
           .skill-name { flex: 1; }
@@ -108,7 +114,7 @@
             font-weight: bold;
             min-width: 24px;
             text-align: center;
-            color: var(--cel-green);
+            color: var(--cel-orange);  // gold instead of vivid green
           }
           .skill-value-input {
             width: 36px;
@@ -149,11 +155,14 @@
 
     .track-header {
       background: var(--cel-green);
+      background-image: url("../assets/ui/fond_cadrille.jpg");
+      background-blend-mode: soft-light;
       color: var(--cel-orange);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 4px 8px;
+      padding: 5px 8px;
+      border-bottom: 1px solid rgba(196,154,26,0.4);
 
       .track-title {
         font-family: var(--cel-font-title);
@@ -176,7 +185,7 @@
         align-items: center;
         gap: 2px;
 
-        input[type="checkbox"] { .cel-box(); }
+        input[type="checkbox"] { .cel-box(); accent-color: var(--cel-orange); }
         .box-label {
           font-size: 0.65em;
           color: var(--cel-border);
@@ -208,13 +217,16 @@
 
     thead tr {
       background: var(--cel-green);
+      background-image: url("../assets/ui/fond_cadrille.jpg");
+      background-blend-mode: soft-light;
       color: var(--cel-orange);
-      th { padding: 4px 8px; font-family: var(--cel-font-title); }
+      th { padding: 5px 8px; font-family: var(--cel-font-title); letter-spacing: 0.06em; }
     }
 
     .faction-row {
-      &:nth-child(odd) td { background: rgba(139,115,85,0.08); }
+      &:nth-child(odd) td { background: rgba(122,92,32,0.06); }
-      td { padding: 4px 8px; border-bottom: 1px solid rgba(139,115,85,0.2); }
+      &:nth-child(even) td { background: var(--cel-cream-dark); }
+      td { padding: 4px 8px; border-bottom: 1px solid rgba(122,92,32,0.2); }
       &.custom td { font-style: italic; color: #666; }
 
       .faction-value input[type="number"] {

styles/global.less

@@ -5,14 +5,21 @@
 .fvtt-celestopol .window-title { color: var(--cel-orange, #e07b00); }
 
 :root {
-  --cel-green:        rgb(12, 76, 12);
+  // ── Palette Art Déco / nuit lunaire ─────────────────────────────────────
-  --cel-green-light:  rgb(20, 110, 20);
+  --cel-green:        #1b3828;   // jade profond, désaturé (ex rgb(12,76,12))
-  --cel-green-dark:   rgb(6, 40, 6);
+  --cel-green-light:  #2c5a3f;   // jade moyen
-  --cel-orange:       #e07b00;
+  --cel-green-dark:   #0d1f14;   // jade très sombre
-  --cel-orange-light: #f0a040;
+
-  --cel-cream:        #f5f0e8;
+  --cel-orange:       #c49a1a;   // or antique (ex #e07b00)
-  --cel-border:       #8b7355;
+  --cel-orange-light: #ddb84a;   // or clair
-  --cel-shadow:       rgba(0,0,0,0.4);
+
+  --cel-cream:        #f0e8d4;   // parchemin chaud
+  --cel-cream-dark:   #e0d4b8;   // parchemin foncé (rangées alternées)
+
+  --cel-border:       #7a5c20;   // bordure dorée
+  --cel-accent:       #6b1e28;   // bordeaux profond (échecs, accents)
+
+  --cel-shadow:       rgba(10,15,10,0.5);
 
   --cel-font-title:   "CopaseticNF", "Palatino Linotype", serif;
   --cel-font-body:    "Palatino Linotype", "Book Antiqua", Palatino, serif;
@@ -32,27 +39,50 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
+      // Very subtle grid texture evokes Art Déco marquetry
+      background-color: var(--cel-cream);
+      background-image: url("../assets/ui/fond_cadrille.jpg");
+      background-blend-mode: multiply;
+      background-size: auto;
+      background-repeat: repeat;
+      // Tint so the texture is extremely faint on the parchment
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
         background: var(--cel-cream);
+        opacity: 0.92;
+        pointer-events: none;
+        z-index: 0;
       }
     }
+    // Ensure content sits above the pseudo texture
+    .sheet-header, .sheet-tabs, .sheet-body, .tab { position: relative; z-index: 1; }
+  }
 
   // ─── Header ──────────────────────────────────────────────────────────────
 
   .sheet-header {
     display: flex;
     align-items: stretch;
-    background: var(--cel-green);
+    // fond_cadrille overlay on jade dark gives rich Art Déco textile look
+    background-color: var(--cel-green-dark);
     background-image: url("../assets/ui/fond_cadrille.jpg");
-    background-blend-mode: overlay;
+    background-blend-mode: soft-light;
-    padding: 8px;
+    background-size: auto;
-    gap: 8px;
+    padding: 10px 12px 10px 10px;
+    gap: 10px;
+    // Double-rule Art Déco bottom border
     border-bottom: 3px solid var(--cel-orange);
+    box-shadow: 0 3px 0 0 rgba(196,154,26,0.25);
 
     .actor-portrait {
-      width: 80px;
+      width: 84px;
-      height: 80px;
+      height: 84px;
       object-fit: cover;
       border: 2px solid var(--cel-orange);
+      // Subtle inner glow — gold frame effect
+      box-shadow: inset 0 0 6px rgba(196,154,26,0.4), 0 0 4px rgba(0,0,0,0.5);
       cursor: pointer;
     }
 
@@ -66,19 +96,21 @@
       input[type="text"] {
         background: transparent;
         border: none;
-        border-bottom: 1px solid var(--cel-orange-light);
+        border-bottom: 1px solid rgba(196,154,26,0.5);
         color: var(--cel-orange);
         font-family: var(--cel-font-title);
         font-size: 1.4em;
         font-weight: bold;
+        letter-spacing: 0.06em;
         padding: 2px 4px;
-        &::placeholder { color: var(--cel-orange-light); }
+        &::placeholder { color: rgba(196,154,26,0.5); }
       }
 
       .actor-name {
         font-family: var(--cel-font-title);
         font-size: 1.4em;
         color: var(--cel-orange);
+        letter-spacing: 0.06em;
         margin: 0;
       }
 
@@ -88,27 +120,29 @@
         font-size: 0.9em;
         color: var(--cel-cream);
         background: transparent;
-        border-bottom: 1px solid rgba(255,255,255,0.3);
+        border-bottom: 1px solid rgba(240,232,212,0.25);
       }
     }
 
     .header-stats-row {
       display: flex;
-      gap: 12px;
+      gap: 10px;
       align-items: center;
 
       .header-stat {
         display: flex;
         flex-direction: column;
         align-items: center;
-        background: rgba(0,0,0,0.3);
+        background: rgba(0,0,0,0.35);
         border: 1px solid var(--cel-orange);
-        border-radius: 4px;
+        border-radius: 2px;
-        padding: 4px 8px;
+        padding: 4px 10px;
+        min-width: 52px;
 
         label {
-          font-size: 0.65em;
+          font-size: 0.62em;
           text-transform: uppercase;
+          letter-spacing: 0.08em;
           color: var(--cel-orange-light);
         }
 
@@ -128,23 +162,33 @@
     display: flex;
     background: var(--cel-green-dark);
     padding: 0;
+    // Art Déco thin gold line at top + bottom separator
+    border-top: 1px solid rgba(196,154,26,0.3);
     border-bottom: 2px solid var(--cel-orange);
 
     .item {
-      padding: 6px 12px;
+      padding: 6px 14px;
-      color: var(--cel-cream);
+      color: rgba(240,232,212,0.7);
       font-family: var(--cel-font-title);
-      font-size: 0.85em;
+      font-size: 0.82em;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.07em;
       cursor: pointer;
-      border-right: 1px solid var(--cel-green-light);
+      border-right: 1px solid rgba(196,154,26,0.2);
-      transition: background 0.2s;
+      transition: color 0.2s, border-bottom-color 0.2s;
+      // Art Déco underline indicator
+      border-bottom: 3px solid transparent;
+      position: relative;
+
+      &:hover {
+        color: var(--cel-orange-light);
+        background: rgba(196,154,26,0.07);
+      }
 
-      &:hover { background: var(--cel-green-light); }
       &.active {
-        background: var(--cel-orange);
+        color: var(--cel-orange);
-        color: #1a0a00;
+        background: rgba(196,154,26,0.1);
+        border-bottom-color: var(--cel-orange);
         font-weight: bold;
       }
     }

styles/items.less

@@ -8,11 +8,12 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 8px;
+    padding: 10px 12px;
-    background: var(--cel-green);
+    background-color: var(--cel-green-dark);
     background-image: url("../assets/ui/fond_cadrille.jpg");
-    background-blend-mode: overlay;
+    background-blend-mode: soft-light;
-    border-bottom: 2px solid var(--cel-orange);
+    border-bottom: 3px solid var(--cel-orange);
+    box-shadow: 0 3px 0 0 rgba(196,154,26,0.2);
 
     .item-portrait img {
       width: 56px;
@@ -74,17 +75,32 @@
   .item-tabs {
     display: flex;
     background: var(--cel-green-dark);
+    border-top: 1px solid rgba(196,154,26,0.3);
     border-bottom: 2px solid var(--cel-orange);
 
     .item {
-      padding: 5px 10px;
+      padding: 5px 12px;
-      color: var(--cel-cream);
+      color: rgba(240,232,212,0.7);
       font-family: var(--cel-font-title);
-      font-size: 0.8em;
+      font-size: 0.78em;
       text-transform: uppercase;
+      letter-spacing: 0.07em;
       cursor: pointer;
-      &:hover { background: var(--cel-green-light); }
+      border-right: 1px solid rgba(196,154,26,0.2);
-      &.active { background: var(--cel-orange); color: #1a0a00; font-weight: bold; }
+      border-bottom: 3px solid transparent;
+      transition: color 0.2s;
+
+      &:hover {
+        color: var(--cel-orange-light);
+        background: rgba(196,154,26,0.07);
+      }
+
+      &.active {
+        color: var(--cel-orange);
+        background: rgba(196,154,26,0.1);
+        border-bottom-color: var(--cel-orange);
+        font-weight: bold;
+      }
     }
   }
 
@@ -101,7 +117,7 @@
       font-size: 0.75em;
       text-transform: uppercase;
       letter-spacing: 0.05em;
-      color: var(--cel-green);
+      color: var(--cel-orange);  // gold label instead of vivid green
       margin-bottom: 2px;
     }
     input[type="text"], input[type="number"] { .cel-input-std(); width: 100%; box-sizing: border-box; }
@@ -120,10 +136,11 @@
         .scores-stat-name {
           font-family: var(--cel-font-title);
           font-size: 0.75em;
-          color: var(--cel-green);
+          color: var(--cel-orange);  // gold
           text-transform: uppercase;
           border-bottom: 1px solid var(--cel-border);
           margin-bottom: 4px;
+          letter-spacing: 0.06em;
         }
 
         .score-row {
@@ -133,14 +150,16 @@
           padding: 2px 0;
           font-size: 0.8em;
 
+          &:nth-child(even) { background: rgba(224,212,184,0.35); border-radius: 2px; }
+
           .score-skill-name { flex: 1; }
           .score-bonus, .score-malus {
             width: 36px;
             .cel-input-std();
             text-align: center;
           }
-          .score-bonus { border-color: #4a8a4a; }
+          .score-bonus { border-color: #4a7a4a; }
-          .score-malus { border-color: #8a4a4a; }
+          .score-malus { border-color: var(--cel-accent); }
         }
       }
     }

styles/mixins.less

@@ -2,17 +2,29 @@
 
 .cel-section-header() {
   font-family: var(--cel-font-title);
-  font-size: 0.8em;
+  font-size: 0.78em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
-  color: var(--cel-green);
+  // Gold instead of vivid green — Art Déco elegance
-  border-bottom: 1px solid var(--cel-border);
+  color: var(--cel-orange);
-  padding-bottom: 2px;
+  padding-bottom: 4px;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
+  position: relative;
+
+  // Ornamental gradient rule underneath — fades to transparent at edges
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(to right, transparent 0%, var(--cel-orange) 20%, var(--cel-border) 80%, transparent 100%);
+  }
 }
 
 .cel-input-std() {
-  background: rgba(255,255,255,0.7);
+  background: rgba(255,255,255,0.6);
   border: 1px solid var(--cel-border);
   border-radius: 2px;
   padding: 2px 4px;
@@ -25,8 +37,8 @@
   width: 22px;
   height: 22px;
   border: 2px solid var(--cel-border);
-  border-radius: 3px;
+  border-radius: 2px;
-  background: rgba(255,255,255,0.5);
+  background: rgba(255,255,255,0.45);
   cursor: pointer;
   &.checked { background: var(--cel-orange); border-color: var(--cel-orange); }
 }
@@ -35,7 +47,7 @@
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
   &:hover {
-    background: var(--cel-orange-light);
+    background: rgba(196,154,26,0.15);  // gold tint — more elegant than orange
     color: #1a0a00;
     border-radius: 3px;
   }
@@ -46,9 +58,9 @@
   align-items: center;
   gap: 6px;
   padding: 3px 6px;
-  border-bottom: 1px solid rgba(139,115,85,0.3);
+  border-bottom: 1px solid rgba(122,92,32,0.25);
   transition: background 0.1s;
-  &:hover { background: rgba(224,123,0,0.08); }
+  &:hover { background: rgba(196,154,26,0.08); }
 
   .item-icon {
     width: 24px;

styles/npc.less

@@ -17,11 +17,14 @@
 
       .stat-header {
         background: var(--cel-green);
+        background-image: url("../assets/ui/fond_cadrille.jpg");
+        background-blend-mode: soft-light;
         color: var(--cel-orange);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 4px 8px;
+        padding: 5px 8px;
+        border-bottom: 1px solid rgba(196,154,26,0.4);
 
         .stat-name {
           font-family: var(--cel-font-title);
@@ -55,13 +58,15 @@
           align-items: center;
           justify-content: space-between;
           padding: 3px 8px;
-          border-bottom: 1px solid rgba(139,115,85,0.2);
+          border-bottom: 1px solid rgba(122,92,32,0.18);
           font-size: 0.85em;
 
+          &:nth-child(even) { background: var(--cel-cream-dark); }
+
           &.rollable { .cel-rollable(); }
 
           .skill-name { flex: 1; }
-          .skill-value { font-weight: bold; color: var(--cel-green); min-width: 24px; text-align: center; }
+          .skill-value { font-weight: bold; color: var(--cel-orange); min-width: 24px; text-align: center; }
           .skill-value-input { width: 36px; .cel-input-std(); text-align: center; }
         }
       }
@@ -76,12 +81,16 @@
 
     .track-header {
       background: var(--cel-green);
+      background-image: url("../assets/ui/fond_cadrille.jpg");
+      background-blend-mode: soft-light;
       color: var(--cel-orange);
-      padding: 4px 8px;
+      padding: 5px 8px;
       font-family: var(--cel-font-title);
       font-weight: bold;
       text-transform: uppercase;
       font-size: 0.9em;
+      letter-spacing: 0.06em;
+      border-bottom: 1px solid rgba(196,154,26,0.4);
     }
 
     .track-boxes {

styles/roll.less

@@ -8,12 +8,12 @@
     text-align: center;
     font-family: var(--cel-font-title, "CopaseticNF", serif);
     font-size: 1.1em;
-    color: var(--cel-green, rgb(12,76,12));
+    color: var(--cel-orange, #c49a1a);
     margin-bottom: 10px;
 
     .separator {
       margin: 0 6px;
-      color: var(--cel-orange, #e07b00);
+      color: var(--cel-border, #7a5c20);
     }
   }
 
@@ -28,12 +28,12 @@
       font-size: 0.85em;
       text-transform: uppercase;
       letter-spacing: 0.04em;
-      color: var(--cel-green, rgb(12,76,12));
+      color: var(--cel-orange, #c49a1a);
     }
 
     select, input[type="number"] {
       flex: 1;
-      border: 1px solid var(--cel-border, #8b7355);
+      border: 1px solid var(--cel-border, #7a5c20);
       border-radius: 2px;
       padding: 2px 6px;
       background: rgba(255,255,255,0.7);
@@ -45,14 +45,14 @@
     font-size: 1em;
     margin-top: 10px;
     padding: 6px;
-    background: rgba(12,76,12,0.08);
+    background: rgba(27,56,40,0.08);
-    border-radius: 4px;
+    border-radius: 3px;
-    border: 1px solid var(--cel-green, rgb(12,76,12));
+    border: 1px solid var(--cel-green, #1b3828);
 
     .nb-dice {
       font-family: var(--cel-font-title, "CopaseticNF", serif);
       font-size: 1.5em;
-      color: var(--cel-orange, #e07b00);
+      color: var(--cel-orange, #c49a1a);
       font-weight: bold;
     }
   }
@@ -61,8 +61,8 @@
 // ─── Chat message ─────────────────────────────────────────────────────────────
 
 .celestopol.chat-roll {
-  border: 1px solid var(--cel-border, #8b7355);
+  border: 1px solid var(--cel-border, #7a5c20);
-  border-radius: 4px;
+  border-radius: 3px;
   overflow: hidden;
   font-family: var(--cel-font-body, "Palatino Linotype", serif);
 
@@ -70,15 +70,19 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    background: var(--cel-green, rgb(12,76,12));
+    background-color: var(--cel-green, #1b3828);
+    background-image: url("../assets/ui/fond_cadrille.jpg");
+    background-blend-mode: soft-light;
     padding: 6px 8px;
+    border-bottom: 2px solid var(--cel-orange, #c49a1a);
 
     .actor-img {
       width: 36px;
       height: 36px;
       object-fit: cover;
-      border: 1px solid var(--cel-orange, #e07b00);
+      border: 1px solid var(--cel-orange, #c49a1a);
       border-radius: 2px;
+      box-shadow: inset 0 0 4px rgba(196,154,26,0.3);
     }
 
     .roll-info {
@@ -86,11 +90,12 @@
       flex-direction: column;
       .actor-name {
         font-family: var(--cel-font-title, "CopaseticNF", serif);
-        color: var(--cel-orange, #e07b00);
+        color: var(--cel-orange, #c49a1a);
         font-weight: bold;
+        letter-spacing: 0.05em;
       }
       .skill-info {
-        color: var(--cel-cream, #f5f0e8);
+        color: var(--cel-cream, #f0e8d4);
         font-size: 0.8em;
         font-style: italic;
       }
@@ -99,7 +104,7 @@
 
   .roll-details {
     padding: 8px;
-    background: var(--cel-cream, #f5f0e8);
+    background: var(--cel-cream, #f0e8d4);
 
     .dice-results {
       display: flex;
@@ -113,8 +118,8 @@
         justify-content: center;
         width: 28px;
         height: 28px;
-        border: 2px solid var(--cel-border, #8b7355);
+        border: 2px solid var(--cel-border, #7a5c20);
-        border-radius: 4px;
+        border-radius: 3px;
         background: white;
         font-weight: bold;
         font-size: 1em;
@@ -135,38 +140,49 @@
       gap: 8px;
       margin-top: 6px;
       padding-top: 4px;
-      border-top: 1px solid var(--cel-border, #8b7355);
+      border-top: 1px solid var(--cel-border, #7a5c20);
 
       .total-label {
         text-transform: uppercase;
         font-size: 0.75em;
-        color: var(--cel-green, rgb(12,76,12));
+        color: var(--cel-orange, #c49a1a);
       }
 
       .total-value {
         font-family: var(--cel-font-title, "CopaseticNF", serif);
         font-size: 1.6em;
         font-weight: bold;
-        color: var(--cel-orange, #e07b00);
+        color: var(--cel-orange, #c49a1a);
       }
 
       .vs-difficulty {
         font-size: 0.8em;
-        color: #999;
+        color: #888;
       }
     }
   }
 
   .roll-result-banner {
     text-align: center;
-    padding: 4px 8px;
+    padding: 5px 8px;
     font-family: var(--cel-font-title, "CopaseticNF", serif);
     font-size: 1.1em;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
 
-    &.success { background: var(--cel-green, rgb(12,76,12)); color: var(--cel-orange, #e07b00); }
+    // Success: jade green with gold text — elegant
-    &.failure { background: #4a1a1a; color: #e0a0a0; }
+    &.success {
+      background-color: var(--cel-green, #1b3828);
+      background-image: url("../assets/ui/fond_cadrille.jpg");
+      background-blend-mode: soft-light;
+      color: var(--cel-orange, #c49a1a);
+    }
+
+    // Failure: deep burgundy — dark and grave
+    &.failure {
+      background: var(--cel-accent, #6b1e28);
+      color: #e8c8c8;
+    }
 
     .critical {
       display: block;