Révision complète des styles des items et des onglets

- global.less : réécriture complète
  * Fusion des deux blocs .sheet-tabs en un seul
  * Déplacement des styles faction hors de .sheet-tabs
  * Onglet actif : gradient or avec texte sombre (bon contraste)
  * CSS variables centralisées + hiérarchie propre

- templates/aspect.hbs + attribute.hbs : normalisation
  * Ajout de wrappers .form-group pour tous les champs
  * Labels explicites (Technique, Narratif, Référence)
  * .item-meta container pour les métadonnées du header

- templates/equipment.hbs : suppression de .form-grid
  (conflictait avec le grid CSS natif de FoundryVTT)

- styles/items.less
  * Labels : var(--cel-orange) → var(--cel-border) (#7a5c20)
    contraste WCAG AA sur fond crème (ratio ~5.9)
  * Score rows : couleur de texte explicite #1a1209 (lisible)
  * Onglet actif : gradient or + texte sombre (cohérent)
  * Ajout .item-value-display, .item-qty styles

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

styles/global.less

@@ -1,16 +1,14 @@
 // ─── Variables CSS (couleurs + typo) ────────────────────────────────────────
 
-// ─── FVTT-wide type label fix ────────────────────────────────────────────────
+.fvtt-celestopol .window-title { color: var(--cel-orange, #c49a1a); }
-// Override window title color for celestopol sheets
-.fvtt-celestopol .window-title { color: var(--cel-orange, #e07b00); }
 
 :root {
-  // ── Palette Art Déco / nuit lunaire ─────────────────────────────────────
+  // ── Palette Art Déco / nuit lunaire ──────────────────────────────────────
-  --cel-green:        #1b3828;   // jade profond, désaturé (ex rgb(12,76,12))
+  --cel-green:        #1b3828;   // jade profond, désaturé
   --cel-green-light:  #2c5a3f;   // jade moyen
   --cel-green-dark:   #0d1f14;   // jade très sombre
 
-  --cel-orange:       #c49a1a;   // or antique (ex #e07b00)
+  --cel-orange:       #c49a1a;   // or antique
   --cel-orange-light: #ddb84a;   // or clair
 
   --cel-cream:        #f0e8d4;   // parchemin chaud
@@ -39,13 +37,12 @@
       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
+      // Thin cream overlay so texture is subtle
       &::before {
         content: '';
         position: absolute;
@@ -56,7 +53,6 @@
         z-index: 0;
       }
     }
-    // Ensure content sits above the pseudo texture
     .sheet-header, .sheet-tabs, .sheet-body, .tab { position: relative; z-index: 1; }
   }
 
@@ -65,14 +61,12 @@
   .sheet-header {
     display: flex;
     align-items: stretch;
-    // 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: soft-light;
     background-size: auto;
     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);
 
@@ -81,7 +75,6 @@
       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;
     }
@@ -157,92 +150,11 @@
   }
 
   // ─── Tabs ────────────────────────────────────────────────────────────────
-  // Updated: 1774698726 - Enhanced tab styling
 
   .sheet-tabs {
-
-  // ─── Faction checkboxes ─────────────────────────────────────────────────
-  
-  .faction-checkboxes-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    pointer-events: auto !important;
-  }
-
-  .faction-checkboxes {
-    display: inline-flex;
-    gap: 2px;
-    pointer-events: auto !important;
-  }
-
-  .faction-checkbox-wrapper {
-    display: inline-block;
-    pointer-events: auto !important;
-    position: relative;
-    z-index: 101;
-  }
-
-  .faction-checkbox {
-    width: 14px;
-    height: 14px;
-    cursor: pointer;
-    pointer-events: auto !important;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    z-index: 100;
-  }
-
-  .faction-checkbox:disabled {
-    cursor: default;
-    opacity: 0.7;
-  }
-
-  .faction-count {
-    margin-left: 8px;
-    font-weight: bold;
-    color: var(--cel-orange);
-    min-width: 20px;
-    text-align: right;
-  }
-
-  .faction-value-input {
-    width: 40px;
-    margin-left: 8px;
-  }
-
-  // Fix pointer-events for faction checkboxes in table cells
-  .faction-row {
-    pointer-events: auto !important;
-  }
-
-  .faction-row td {
-    pointer-events: auto !important;
-  }
-
-  // Ensure labels are clickable
-  .faction-checkbox-wrapper label {
-    cursor: pointer;
-    pointer-events: auto !important;
-    display: inline-block;
-  }
-}
-
-// Ensure table cells allow pointer events
-.faction-row {
-  pointer-events: auto !important;
-}
-
-.faction-row td {
-  pointer-events: auto !important;
-}
-
-.sheet-tabs {
     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);
 
@@ -255,43 +167,23 @@
       letter-spacing: 0.07em;
       cursor: pointer;
       border-right: 1px solid rgba(196,154,26,0.2);
-      transition: all 0.2s ease;
-      // Art Déco underline indicator
       border-bottom: 3px solid transparent;
-      position: relative;
+      transition: background 0.15s, color 0.15s;
-      background: rgba(240,232,212,0.1);
-      margin: 0 1px;
 
       &:hover {
         color: var(--cel-orange-light);
-        background: rgba(196,154,26,0.15);
+        background: rgba(196,154,26,0.12);
       }
 
+      // Onglet actif : gradient or avec texte sombre (bon contraste)
       &.active {
-        color: var(--cel-cream) !important;
+        color: var(--cel-green-dark);
-        background: linear-gradient(to bottom, var(--cel-orange), var(--cel-orange-light)) !important;
+        background: linear-gradient(to bottom, var(--cel-orange-light), var(--cel-orange));
-        border-bottom: 3px solid var(--cel-accent) !important;
+        border-bottom: 3px solid var(--cel-accent);
-        font-weight: bold !important;
+        font-weight: bold;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+        transform: translateY(-1px);
-        transform: translateY(-1px) !important;
+        position: relative;
-        position: relative !important;
+        z-index: 2;
-        z-index: 2 !important;
-        border-right-color: transparent !important;
-        border: 2px solid red !important; // DEBUG: bordure rouge très visible
-        
-        // Art Déco triangle indicator
-        &::before {
-          content: '' !important;
-          position: absolute !important;
-          top: -5px !important;
-          left: 50% !important;
-          transform: translateX(-50%) !important;
-          width: 0 !important;
-          height: 0 !important;
-          border-left: 8px solid transparent !important;
-          border-right: 8px solid transparent !important;
-          border-bottom: 8px solid var(--cel-accent) !important;
-        }
       }
     }
   }
@@ -310,4 +202,54 @@
     overflow-y: auto;
     &.active { display: block; }
   }
+
+  // ─── Faction checkboxes (pointer-events dans les fiches) ─────────────────
+
+  .faction-checkboxes-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    pointer-events: auto !important;
+  }
+
+  .faction-checkboxes {
+    display: inline-flex;
+    gap: 2px;
+    pointer-events: auto !important;
+  }
+
+  .faction-checkbox-wrapper {
+    display: inline-block;
+    pointer-events: auto !important;
+    position: relative;
+    z-index: 101;
+    label { cursor: pointer; pointer-events: auto !important; display: inline-block; }
+  }
+
+  .faction-checkbox {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    pointer-events: auto !important;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 100;
+    &:disabled { cursor: default; opacity: 0.7; }
+  }
+
+  .faction-count {
+    margin-left: 8px;
+    font-weight: bold;
+    color: var(--cel-orange);
+    min-width: 20px;
+    text-align: right;
+  }
+
+  .faction-value-input { width: 40px; margin-left: 8px; }
+
+  .faction-row {
+    pointer-events: auto !important;
+    td { pointer-events: auto !important; }
+  }
 }

styles/items.less

@@ -96,14 +96,42 @@
       }
 
       &.active {
-        color: var(--cel-orange);
+        color: var(--cel-green-dark);
-        background: rgba(196,154,26,0.1);
+        background: linear-gradient(to bottom, var(--cel-orange-light), var(--cel-orange));
-        border-bottom-color: var(--cel-orange);
+        border-bottom: 3px solid var(--cel-accent);
         font-weight: bold;
+        transform: translateY(-1px);
+        position: relative;
+        z-index: 2;
       }
     }
   }
 
+  // Affichage valeur en mode play
+  .item-value-display {
+    font-size: 1.1em;
+    font-weight: bold;
+    color: var(--cel-orange);
+    min-width: 28px;
+    text-align: center;
+  }
+
+  // Champ quantité équipement
+  .item-qty {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    label { color: var(--cel-orange-light); font-size: 0.72em; text-transform: uppercase; }
+    input[type="number"] {
+      width: 44px;
+      background: transparent;
+      border: 1px solid var(--cel-orange-light);
+      color: var(--cel-orange);
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
   section.tab {
     padding: 8px;
     display: none;
@@ -117,7 +145,7 @@
       font-size: 0.75em;
       text-transform: uppercase;
       letter-spacing: 0.05em;
-      color: var(--cel-orange);  // gold label instead of vivid green
+      color: var(--cel-border);   // #7a5c20 — contraste WCAG AA sur fond crème
       margin-bottom: 2px;
     }
     input[type="text"], input[type="number"] { .cel-input-std(); width: 100%; box-sizing: border-box; }
@@ -149,6 +177,7 @@
           gap: 4px;
           padding: 2px 0;
           font-size: 0.8em;
+          color: #1a1209;  // texte sombre lisible sur fond crème
 
           &:nth-child(even) { background: rgba(224,212,184,0.35); border-radius: 2px; }
 

templates/aspect.hbs

@@ -5,27 +5,47 @@
     </div>
     <div class="item-header-fields">
       <input type="text" name="name" value="{{item.name}}" {{#unless isEditable}}disabled{{/unless}}>
-      <div class="item-value-field">
+      <div class="item-meta">
-        <label>{{localize "CELESTOPOL.Item.value"}}</label>
+        <div class="item-value-field">
-        <input type="number" name="system.value" value="{{system.value}}" min="0" max="8"
+          <label>{{localize "CELESTOPOL.Item.value"}}</label>
-               {{#unless isEditable}}disabled{{/unless}}>
+          {{#if isEditable}}
+          <input type="number" name="system.value" value="{{system.value}}" min="0" max="8">
+          {{else}}
+          <span class="item-value-display">{{system.value}}</span>
+          {{/if}}
+        </div>
       </div>
     </div>
   </header>
+
   <nav class="item-tabs sheet-tabs tabs" data-group="item-tabs">
     <a class="item active" data-group="item-tabs" data-tab="description">{{localize "CELESTOPOL.Tab.description"}}</a>
     <a class="item" data-group="item-tabs" data-tab="technique">{{localize "CELESTOPOL.Tab.technique"}}</a>
     <a class="item" data-group="item-tabs" data-tab="scores">{{localize "CELESTOPOL.Item.scores"}}</a>
   </nav>
+
   <section class="tab active" data-group="item-tabs" data-tab="description">
-    {{editor system.description target="system.description" button=true editable=isEditable}}
+    <div class="form-group">
-    <label>{{localize "CELESTOPOL.Item.reference"}}</label>
+      {{editor system.description target="system.description" button=true editable=isEditable}}
-    <input type="text" name="system.reference" value="{{system.reference}}" {{#unless isEditable}}disabled{{/unless}}>
+    </div>
+    <div class="form-group">
+      <label>{{localize "CELESTOPOL.Item.reference"}}</label>
+      <input type="text" name="system.reference" value="{{system.reference}}"
+             {{#unless isEditable}}disabled{{/unless}}>
+    </div>
   </section>
+
   <section class="tab" data-group="item-tabs" data-tab="technique">
-    {{editor system.technique target="system.technique" button=true editable=isEditable}}
+    <div class="form-group">
-    {{editor system.narratif target="system.narratif" button=true editable=isEditable}}
+      <label>{{localize "CELESTOPOL.Item.technique"}}</label>
+      {{editor system.technique target="system.technique" button=true editable=isEditable}}
+    </div>
+    <div class="form-group">
+      <label>{{localize "CELESTOPOL.Item.narratif"}}</label>
+      {{editor system.narratif target="system.narratif" button=true editable=isEditable}}
+    </div>
   </section>
+
   <section class="tab" data-group="item-tabs" data-tab="scores">
     {{> "systems/fvtt-celestopol/templates/partials/item-scores.hbs" skills=skills system=system}}
   </section>

templates/attribute.hbs

@@ -5,27 +5,47 @@
     </div>
     <div class="item-header-fields">
       <input type="text" name="name" value="{{item.name}}" {{#unless isEditable}}disabled{{/unless}}>
-      <div class="item-value-field">
+      <div class="item-meta">
-        <label>{{localize "CELESTOPOL.Item.value"}}</label>
+        <div class="item-value-field">
-        <input type="number" name="system.value" value="{{system.value}}" min="0" max="8"
+          <label>{{localize "CELESTOPOL.Item.value"}}</label>
-               {{#unless isEditable}}disabled{{/unless}}>
+          {{#if isEditable}}
+          <input type="number" name="system.value" value="{{system.value}}" min="0" max="8">
+          {{else}}
+          <span class="item-value-display">{{system.value}}</span>
+          {{/if}}
+        </div>
       </div>
     </div>
   </header>
+
   <nav class="item-tabs sheet-tabs tabs" data-group="item-tabs">
     <a class="item active" data-group="item-tabs" data-tab="description">{{localize "CELESTOPOL.Tab.description"}}</a>
     <a class="item" data-group="item-tabs" data-tab="technique">{{localize "CELESTOPOL.Tab.technique"}}</a>
     <a class="item" data-group="item-tabs" data-tab="scores">{{localize "CELESTOPOL.Item.scores"}}</a>
   </nav>
+
   <section class="tab active" data-group="item-tabs" data-tab="description">
-    {{editor system.description target="system.description" button=true editable=isEditable}}
+    <div class="form-group">
-    <label>{{localize "CELESTOPOL.Item.reference"}}</label>
+      {{editor system.description target="system.description" button=true editable=isEditable}}
-    <input type="text" name="system.reference" value="{{system.reference}}" {{#unless isEditable}}disabled{{/unless}}>
+    </div>
+    <div class="form-group">
+      <label>{{localize "CELESTOPOL.Item.reference"}}</label>
+      <input type="text" name="system.reference" value="{{system.reference}}"
+             {{#unless isEditable}}disabled{{/unless}}>
+    </div>
   </section>
+
   <section class="tab" data-group="item-tabs" data-tab="technique">
-    {{editor system.technique target="system.technique" button=true editable=isEditable}}
+    <div class="form-group">
-    {{editor system.narratif target="system.narratif" button=true editable=isEditable}}
+      <label>{{localize "CELESTOPOL.Item.technique"}}</label>
+      {{editor system.technique target="system.technique" button=true editable=isEditable}}
+    </div>
+    <div class="form-group">
+      <label>{{localize "CELESTOPOL.Item.narratif"}}</label>
+      {{editor system.narratif target="system.narratif" button=true editable=isEditable}}
+    </div>
   </section>
+
   <section class="tab" data-group="item-tabs" data-tab="scores">
     {{> "systems/fvtt-celestopol/templates/partials/item-scores.hbs" skills=skills system=system}}
   </section>

templates/equipment.hbs

@@ -20,7 +20,7 @@
     </div>
   </header>
 
-  <div class="form-grid equipment-stats">
+  <div class="equipment-stats">
     <div class="form-group">
       <label>{{localize "CELESTOPOL.Item.damage"}}</label>
       <input type="text" name="system.damage" value="{{system.damage}}" {{#unless isEditable}}disabled{{/unless}}>