From dd4484c17b849e4ac65de8dbe4d065996dd175cb Mon Sep 17 00:00:00 2001
From: Vincent Vandemeulebrouck <vincent.vandemeulebrouck@itiviti.com>
Date: Mon, 28 Nov 2022 14:36:25 +0100
Subject: [PATCH] =?UTF-8?q?En-t=C3=AAte=20de=20feuille=20de=20personnage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Affichage des portraits plus grands
Les boutons sont sur la ligne du nom du personnage
Les états sont affichés sur une colonne
---
 module/actor-sheet.js                         |   2 +-
 module/rdd-utility.js                         |   3 +-
 styles/simple.css                             | 212 +++++++++++-------
 templates/actor-creature-sheet.html           |  36 +--
 templates/actor-entite-sheet.html             |  22 +-
 templates/actor-sheet.html                    |  15 +-
 templates/actor/header-buttons.html           |   2 +-
 .../actor/header-compteurs-creature.html      |  51 +++--
 templates/actor/header-compteurs-entitee.html |  28 ++-
 templates/actor/header-compteurs.html         |  80 +++----
 templates/actor/header-effects.html           |  21 +-
 templates/actor/header-etat.html              |  20 +-
 12 files changed, 274 insertions(+), 218 deletions(-)

diff --git a/module/actor-sheet.js b/module/actor-sheet.js
index ca31444a..075c6d22 100644
--- a/module/actor-sheet.js
+++ b/module/actor-sheet.js
@@ -25,7 +25,7 @@ export class RdDActorSheet extends ActorSheet {
     return mergeObject(super.defaultOptions, {
       classes: ["rdd", "sheet", "actor"],
       template: "systems/foundryvtt-reve-de-dragon/templates/actor-sheet.html",
-      width: 640,
+      width: 550,
       tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "carac" }],
       dragDrop: [{ dragSelector: ".item-list .item", dropSelector: undefined }],
       showCompNiveauBase: false,
diff --git a/module/rdd-utility.js b/module/rdd-utility.js
index 38033330..2ec4e486 100644
--- a/module/rdd-utility.js
+++ b/module/rdd-utility.js
@@ -545,8 +545,7 @@ export class RdDUtility {
     if (!profondeur) profondeur = 1;
     objet.niveau = profondeur;
     const display = afficherContenu ? 'item-display-show' : 'item-display-hide';
-    //console.log("ITEM DISPLAYED", objet );
-    let strContenu = `<ul class='item-list alterne-list ${display} list-item-margin${profondeur}'>`;
+    let strContenu = `<ul class='item-list alterne-list ${display} list-item-margin${Math.min(profondeur,6)}'>`;
     for (let subItem of objet.subItems) {
       strContenu += this.buildConteneur(subItem, profondeur + 1);
     }
diff --git a/styles/simple.css b/styles/simple.css
index 4d1f7445..fb8213c6 100644
--- a/styles/simple.css
+++ b/styles/simple.css
@@ -93,12 +93,18 @@
 }
 
 /* Fonts */
-.sheet header.sheet-header h1 input, .window-app .window-header, #actors .directory-list, #navigation #scene-list .scene.nav-item {font-family: "GoudyAcc"} /* For title, sidebar character and scene */
-.sheet nav.sheet-tabs {
-  font-family: "CaslonAntique";
-} /* For nav and title */
-.window-app input, .foundryvtt-reve-de-dragon .item-form, .sheet header.sheet-header .flex-compteurs, .sheet header.sheet-header .flex-group-center.flex-fatigue, select, button, .item-checkbox, #sidebar, #players, #navigation #nav-toggle {
-  font-family: "CaslonAntique"; /* For sheet parts */
+.sheet header.sheet-header h1 input,
+.window-app .window-header,
+#actors .directory-list,
+#navigation #scene-list .scene.nav-item {
+  font-family: "GoudyAcc"
+} /* For title, sidebar character and scene */
+.sheet nav.sheet-tabs,
+.window-app input,
+.sheet header.sheet-header .header-compteurs,
+.sheet header.sheet-header .flex-group-center.flex-fatigue,
+select, button, .item-checkbox, #sidebar, #players, #navigation #nav-toggle {
+    font-family: "CaslonAntique"; /* For sheet parts; For nav and title */
 }
 
 .window-header{
@@ -109,6 +115,7 @@
   margin: 0;
   padding: 0;
 }
+
 .strong-text{
   font-weight: bold;
 }
@@ -116,6 +123,114 @@ i:is(.fas, .far) {
   font-size: smaller;
 }
 
+/* =================== En-têtes de feuilles ============ */
+.system-foundryvtt-reve-de-dragon .sheet-header h1.charname {
+  height: 48px;
+  padding: 0.1rem 0.1rem;
+  margin: 0;
+  margin-bottom: 0px;
+  border: 0;
+  min-width: none;
+  flex: auto;
+  flex-basis: 30%;
+}
+.system-foundryvtt-reve-de-dragon .window-app.sheet .window-content .sheet-header h1.charname input[type="text"] {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header div.header-buttons {
+  height: 48px;
+  padding: 0.1rem 0.1rem;
+  margin: 0;
+  width: fit-content;
+  flex: initial;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header div.header-buttons img.button-img {
+  max-height: 48px;
+  padding: 0.1rem 0.1rem;
+  margin: 0;
+  width: fit-content;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header :is(.header-compteurs,.header-etats,.profile-img){
+  padding: 0 3%;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header .profile-img {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 110px;
+  flex: 0 0 110px;
+  height: 110px;
+  width: 110px;
+  margin-right: 0.5rem;
+  object-fit: scale-down;
+  object-position: 50% 0;
+  margin: 0.1rem;
+}
+
+.system-foundryvtt-reve-de-dragon .rdd-item-sheet-tarot img.profile-img {
+  max-height: 600px;
+  max-width: 200px;
+  width: max-content;
+  margin-right: 0px;
+  object-fit: scale-down;
+  border: none;
+  margin-right: 5px;
+  object-position: 50% 0;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header .header-compteurs {
+  text-align: right;
+  max-width: fit-content;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header div.header-etats {
+  height: 48px;
+  max-width: fit-content;
+  flex: initial;
+}
+
+.system-foundryvtt-reve-de-dragon .sheet-header .resource-content {
+  width: 2rem;
+}
+
+/* =================== Navigation ============ */
+.sheet nav.sheet-tabs {
+  font-size: 0.65rem;
+  font-weight: bold;
+  height: 4rem;
+  flex: 0 0 4rem;
+  margin: 0;
+  padding: 0 0 0 0.1rem;
+  text-align: center;
+  text-transform: uppercase;
+  line-height: 2rem;
+  border-top: 0 none;
+  border-bottom: 0 none;
+  color: rgba(52, 52, 52, 0.95);
+  background: rgb(245,245,240) url(img/bg_menu.webp) no-repeat left top;
+}
+.sheet nav.sheet-tabs .item ,
+nav.sheet-tabs .item {
+  position: relative;
+  padding: 0.1rem 0.2rem;
+}
+
+nav.sheet-tabs .item:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 2rem;
+  width: 1px;
+  border-right: 1px dashed rgba(52, 52, 52, 0.25);
+}
+
+/* =================== Autres ============ */
+
 .tabs .item.active, .blessures-list li ul li:first-child:hover, a:hover {
   text-shadow: 1px 0px 0px #ff6600;
 }
@@ -197,7 +312,7 @@ table {border: 1px solid #7a7971;}
   -ms-flex-align: center;
   align-items: center;
   text-align: center;
-  padding: 5px;
+  padding: 0.1rem;
 }
 
 .flex-group-left {
@@ -303,45 +418,6 @@ input:is(.blessure-premiers_soins, .blessure-soins_complets) {
   text-shadow: 1px 1px 4px rgba(60, 60, 60, 1);
 }
 
-.foundryvtt-reve-de-dragon .sheet-header {
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 210px;
-  flex: 0 0 210px;
-  overflow: hidden;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.foundryvtt-reve-de-dragon .sheet-header .profile-img {
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 128px;
-  flex: 0 0 128px;
-  height: 128px;
-  width: 128px;
-  margin-right: 10px;
-  object-fit: cover;
-  object-position: 50% 0;
-}
-.foundryvtt-reve-de-dragon .rdd-item-sheet-tarot img.profile-img {
-  max-height: 600px;
-  max-width: 200px;
-  width: max-content;
-  margin-right: 0px;
-  object-fit: scale-down;
-  border: none;
-  margin-right: 5px;
-  object-position: 50% 0;
-}
 .rdd-dialog-select-target img.select-token-img {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 48px;
@@ -674,36 +750,6 @@ section.sheet-body{padding: 0.25rem 0.5rem;}
   padding: 1px;
   margin: 1px;
 }
-.sheet nav.sheet-tabs {
-  font-size: 0.65rem;
-  font-weight: bold;
-  height: 4rem;
-  flex: 0 0 5rem;
-  margin: 0;
-  padding: 0 0 0 0.25rem;
-  text-align: center;
-  text-transform: uppercase;
-  line-height: 1.2rem;
-  border-top: 0 none;
-  border-bottom: 0 none;
-  color: rgba(52, 52, 52, 0.95);
-  background: rgb(245,245,240) url(img/bg_menu.webp) no-repeat left top;
-}
-
-nav.sheet-tabs .item {
-  position: relative;
-  padding: 0 0.2rem;
-}
-
-nav.sheet-tabs .item:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 2rem;
-  width: 1px;
-  border-right: 1px dashed rgba(52, 52, 52, 0.25);
-}
 
 .sheet .tab[data-tab] {
   padding: 0;
@@ -715,8 +761,6 @@ section.sheet-body:after {
   clear: both;
 }
 
-.sheet header.sheet-header .flex-compteurs { text-align: right; max-width: max-content;}
-.sheet header.sheet-header .resource-content {width: 2rem;}
 
 li label.compteur {
   display: inline-block;
@@ -903,22 +947,22 @@ ul, li {
   text-align: center;
 }
 
-.list-item-margin1 {
+ul.list-item-margin1 {
   margin-left: 0.5rem;
 }
-.list-item-margin2 {
+ul.list-item-margin2 {
   margin-left: 1rem;
 }
-.list-item-margin3 {
+ul.list-item-margin3 {
   margin-left: 1.5rem;
 }
-.list-item-margin4 {
+ul.list-item-margin4 {
   margin-left: 2rem;
 }
-.list-item-margin5 {
+ul.list-item-margin5 {
   margin-left: 2.5rem;
 }
-.list-item-margin6 {
+ul.list-item-margin6 {
   margin-left: 3rem;
 }
 
diff --git a/templates/actor-creature-sheet.html b/templates/actor-creature-sheet.html
index e2381427..f20c90b3 100644
--- a/templates/actor-creature-sheet.html
+++ b/templates/actor-creature-sheet.html
@@ -5,22 +5,26 @@
     <div class="header-fields">
       <div class="flexrow">
         <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
-        <h1 class="charname flex-grow"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
-        <div class="flex-group-center">
-          <span class="encaisser-direct"><a title="Encaisser des dommages"><img class="button-img" src="icons/svg/bones.svg" alt="Encaisser des dommages"/></a></span>
-          {{#if @root.options.isGM}}
-          <span class="remise-a-neuf"><a title="Remise à neuf"><img class="button-img" src="icons/svg/regen.svg" alt="Remise à neuf"/></a></span>
-          {{/if}}
-        </div>
-      </div>
-      <div class="flex-group-left flexrow">
-        {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs-creature.html"}}
-        <div class="flex-group-center">
-          <span>
-            {{calc.resumeBlessures}}
-            &hyphen; Etat Général : {{system.compteurs.etat.value}}
-          </span>
-          {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-effects.html"}}
+        <div class="flexcol">
+          <div class="flexrow">
+            <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
+            <div class="header-buttons">
+              <span class="encaisser-direct"><a title="Encaisser des dommages"><img class="button-img" src="icons/svg/bones.svg" alt="Encaisser des dommages"/></a></span>
+              {{#if @root.options.isGM}}
+              <span class="remise-a-neuf"><a title="Remise à neuf"><img class="button-img" src="icons/svg/regen.svg" alt="Remise à neuf"/></a></span>
+              {{/if}}
+            </div>
+          </div>
+          <div class="flexrow">
+            {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs-creature.html"}}
+            <div class="flex-group-left header-etats">
+              <div class="flexcol">
+                <span>{{system.compteurs.etat.label}}: {{system.compteurs.etat.value}}</span>
+                <span>{{calc.resumeBlessures}}</span>
+                {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-effects.html"}}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/templates/actor-entite-sheet.html b/templates/actor-entite-sheet.html
index f2af78d4..6c0b6f09 100644
--- a/templates/actor-entite-sheet.html
+++ b/templates/actor-entite-sheet.html
@@ -5,17 +5,21 @@
     <div class="header-fields">
       <div class="flexrow">
         <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
-        <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
-        <div class="flex-group-center">
-          <span class="encaisser-direct"><a title="Encaisser des dommages"><img class="button-img" src="icons/svg/bones.svg" alt="Encaisser des dommages"/></a></span>
-          {{#if @root.options.isGM}}
-          <span class="remise-a-neuf"><a title="Remise à neuf"><img class="button-img" src="icons/svg/regen.svg" alt="Remise à neuf"/></a></span>
-          {{/if}}
+        <div class="flexcol">
+          <div class="flexrow">
+            <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
+            <div class="header-buttons">
+              <span class="encaisser-direct"><a title="Encaisser des dommages"><img class="button-img" src="icons/svg/bones.svg" alt="Encaisser des dommages"/></a></span>
+              {{#if @root.options.isGM}}
+              <span class="remise-a-neuf"><a title="Remise à neuf"><img class="button-img" src="icons/svg/regen.svg" alt="Remise à neuf"/></a></span>
+              {{/if}}
+            </div>
+          </div>
+          <div class="flexrow">
+            {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs-entitee.html"}}
+          </div>
         </div>
       </div>
-      <div class="flex-group-left flexrow">
-        {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs-entitee.html"}}
-      </div>
     </div>
 </header>
 
diff --git a/templates/actor-sheet.html b/templates/actor-sheet.html
index 0e0c11d8..17d4d1ae 100644
--- a/templates/actor-sheet.html
+++ b/templates/actor-sheet.html
@@ -3,16 +3,15 @@
     {{!-- Sheet Header --}}
     <header class="sheet-header">
       <div class="header-fields">
-        <div class="flexrow">
-          <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
-          <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name"/></h1>
-        </div>
-        <div class="flexrow">
-          {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs.html"}}
-          <div class="flex-group-center">
+        <div class="flexcol">
+          <div class="flexrow">
+            <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name"/></h1>
             {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-buttons.html"}}
+          </div>
+          <div class="flexrow">
+            <img class="profile-img" src="{{img}}" data-edit="img" title="{{name}}" />
+            {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-compteurs.html"}}
             {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-etat.html"}}
-            {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-effects.html"}}
           </div>
         </div>
       </div>
diff --git a/templates/actor/header-buttons.html b/templates/actor/header-buttons.html
index 6574f54c..2d418099 100644
--- a/templates/actor/header-buttons.html
+++ b/templates/actor/header-buttons.html
@@ -1,4 +1,4 @@
-<div>
+<div class="header-buttons">
   <span class="chance-appel">
     <a title="Appel à la chance"><img class="button-img" src="systems/foundryvtt-reve-de-dragon/styles/img/ui/appel-chance.svg" alt="Appel à la chance"/></a>
   </span>
diff --git a/templates/actor/header-compteurs-creature.html b/templates/actor/header-compteurs-creature.html
index 3c10a471..4e90ad78 100644
--- a/templates/actor/header-compteurs-creature.html
+++ b/templates/actor/header-compteurs-creature.html
@@ -1,24 +1,27 @@
-<ul class="flex-compteurs">
-  <li data-attribute="vie">
-    <label class="compteur">
-      <a class="jet-vie" name="system.sante.vie.label">Vie</a>
-      <a class="vie-moins"><i class="fas fa-minus-square"></i></a>
-      <input class="resource-content" type="text" name="system.sante.vie.value" value="{{system.sante.vie.value}}" data-dtype="Number" />
-      / {{#if @root.options.vueDetaillee}}
-      <input class="resource-content" type="text" name="system.sante.vie.max" value="{{system.sante.vie.max}}" data-dtype="Number"/>
-      {{else}}{{system.sante.vie.max}}{{/if}}
-      <a class="vie-plus"><i class="fas fa-plus-square"></i></a>
-    </label>
-  </li>
-  <li data-attribute="endurance">
-    <label class="compteur">
-      <a class="jet-endurance" name="system.sante.endurance.label">Endurance</a>
-      <a class="endurance-moins"><i class="fas fa-minus-square"></i></a>
-      <input class="resource-content" type="text" name="system.sante.endurance.value" value="{{system.sante.endurance.value}}" data-dtype="Number"/>
-      / {{#if @root.options.vueDetaillee}}
-      <input class="resource-content" type="text" name="system.sante.endurance.max" value="{{system.sante.endurance.max}}" data-dtype="Number"/>
-      {{else}}{{system.sante.endurance.max}}{{/if}}
-      <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
-    </label>
-  </li>
-</ul>
+<div class="flex-group-center header-compteurs">
+  <ul>
+    <li data-attribute="vie">
+      <label class="compteur">
+        <a class="jet-vie" name="system.sante.vie.label">Vie</a>
+        <a class="vie-moins"><i class="fas fa-minus-square"></i></a>
+        <input class="resource-content" type="text" name="system.sante.vie.value" value="{{system.sante.vie.value}}" data-dtype="Number" />
+        / {{#if @root.options.vueDetaillee}}
+        <input class="resource-content" type="text" name="system.sante.vie.max" value="{{system.sante.vie.max}}" data-dtype="Number"/>
+        {{else}}{{system.sante.vie.max}}{{/if}}
+        <a class="vie-plus"><i class="fas fa-plus-square"></i></a>
+      </label>
+    </li>
+    <li data-attribute="endurance">
+      <label class="compteur">
+        <a class="jet-endurance" name="system.sante.endurance.label">Endurance</a>
+        <a class="endurance-moins"><i class="fas fa-minus-square"></i></a>
+        <input class="resource-content" type="text" name="system.sante.endurance.value" value="{{system.sante.endurance.value}}" data-dtype="Number"/>
+        / {{#if @root.options.vueDetaillee}}
+        <input class="resource-content" type="text" name="system.sante.endurance.max" value="{{system.sante.endurance.max}}" data-dtype="Number"/>
+        {{else}}{{system.sante.endurance.max}}{{/if}}
+        <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
+      </label>
+    </li>
+  </ul>
+</div>
+  
\ No newline at end of file
diff --git a/templates/actor/header-compteurs-entitee.html b/templates/actor/header-compteurs-entitee.html
index a94bf680..9a5801ad 100644
--- a/templates/actor/header-compteurs-entitee.html
+++ b/templates/actor/header-compteurs-entitee.html
@@ -1,13 +1,17 @@
-{{#if (eq system.definition.typeentite 'incarne')}}
-<li data-attribute="endurance">
-  <label class="compteur">
-    Endurance
-    <a class="endurance-moins"><i class="fas fa-minus-square"></i></a>
-    <input class="resource-content" type="text" name="system.sante.endurance.value" value="{{system.sante.endurance.value}}" data-dtype="Number" />
-    / {{#if @root.options.vueDetaillee}}
-    <input class="resource-content" type="text" name="system.sante.endurance.max" value="{{system.sante.endurance.max}}" data-dtype="Number"/>
-    {{else}}{{system.sante.endurance.max}}{{/if}}
-  <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
-  </label>
-</li>
+{{#if (ne system.definition.typeentite 'nonincarne')}}
+<div class="flex-group-center header-compteurs">
+  <ul>
+    <li data-attribute="endurance">
+      <label class="compteur">
+        Endurance
+        <a class="endurance-moins"><i class="fas fa-minus-square"></i></a>
+        <input class="resource-content" type="text" name="system.sante.endurance.value" value="{{system.sante.endurance.value}}" data-dtype="Number" />
+        / {{#if @root.options.vueDetaillee}}
+        <input class="resource-content" type="text" name="system.sante.endurance.max" value="{{system.sante.endurance.max}}" data-dtype="Number"/>
+        {{else}}{{system.sante.endurance.max}}{{/if}}
+        <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
+      </label>
+    </li>
+  </ul>
+</div>
 {{/if}}
diff --git a/templates/actor/header-compteurs.html b/templates/actor/header-compteurs.html
index dbf6750b..9ff90fee 100644
--- a/templates/actor/header-compteurs.html
+++ b/templates/actor/header-compteurs.html
@@ -1,39 +1,41 @@
-<ul class="flex-group-center flex-compteurs">
-  <li>
-    <label class="compteur">
-      <a class="jet-vie">Vie</a>
-      <a class="vie-moins"><i class="fas fa-minus-square"></i></a>
-      <input class="resource-content" type="text" name="system.sante.vie.value" value="{{system.sante.vie.value}}" data-dtype="Number"/>
-      <span>/ {{system.sante.vie.max}}</span>
-      <a class="vie-plus"><i class="fas fa-plus-square"></i></a>
-    </label>
-  </li>
-  <li>
-    <label class="compteur">
-      <a class="jet-endurance">Endurance</a>
-      <a class="endurance-moins"><i class="fas fa-minus-square"></i></a>
-      <input class="resource-content" type="text" name="system.sante.endurance.value" value="{{system.sante.endurance.value}}" data-dtype="Number"/>
-      <span>/ {{system.sante.endurance.max}}</span>
-      <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
-    </label>
-  </li>
-  <li>
-    <label class="appliquerFatigue compteur tooltip">
-      <span class="tooltiptext ttt-fatigue">{{{calc.fatigue.html}}}</span>
-      Fatigue
-      <a class="fatigue-moins"><i class="fas fa-minus-square"></i></a>
-      <input class="resource-content" id="fatigue-value" type="text" name="system.sante.fatigue.value" value="{{system.sante.fatigue.value}}" data-dtype="Number" />
-      <span>/ {{system.sante.fatigue.max}}</span>
-      <a class="fatigue-plus"><i class="fas fa-plus-square"></i></a>
-    </label>
-  </li>
-  <li>
-    <label class="compteur">
-      <span class="ptreve-actuel"><a>Rêve</a></span>
-      <a class="ptreve-actuel-moins"><i class="fas fa-minus-square"></i></a>
-      <input class="resource-content" id="pointsreve-value" type="text" name="system.reve.reve.value" value="{{system.reve.reve.value}}" data-dtype="Number" />
-      <span>/ {{system.reve.seuil.value}}</span>
-      <a class="ptreve-actuel-plus"><i class="fas fa-plus-square"></i></a>
-    </label>
-  </li>
-</ul>
+<div class="flex-group-center header-compteurs">
+  <ul>
+    <li>
+      <label class="compteur">
+        <a class="jet-vie">Vie</a>
+        <a class="vie-moins"><i class="fas fa-minus-square"></i></a>
+        <input class="resource-content" type="text" name="system.sante.vie.value" value="{{system.sante.vie.value}}" data-dtype="Number"/>
+        <span>/ {{system.sante.vie.max}}</span>
+        <a class="vie-plus"><i class="fas fa-plus-square"></i></a>
+      </label>
+    </li>
+    <li>
+      <label class="compteur">
+        <a class="jet-endurance">Endurance</a>
+        <a class="endurance-moins"><i class="fas fa-minus-square"></i></a>
+        <input class="resource-content" type="text" name="system.sante.endurance.value" value="{{system.sante.endurance.value}}" data-dtype="Number"/>
+        <span>/ {{system.sante.endurance.max}}</span>
+        <a class="endurance-plus"><i class="fas fa-plus-square"></i></a>
+      </label>
+    </li>
+    <li>
+      <label class="appliquerFatigue compteur tooltip">
+        <span class="tooltiptext ttt-fatigue">{{{calc.fatigue.html}}}</span>
+        Fatigue
+        <a class="fatigue-moins"><i class="fas fa-minus-square"></i></a>
+        <input class="resource-content" id="fatigue-value" type="text" name="system.sante.fatigue.value" value="{{system.sante.fatigue.value}}" data-dtype="Number" />
+        <span>/ {{system.sante.fatigue.max}}</span>
+        <a class="fatigue-plus"><i class="fas fa-plus-square"></i></a>
+      </label>
+    </li>
+    <li>
+      <label class="compteur">
+        <span class="ptreve-actuel"><a>Rêve</a></span>
+        <a class="ptreve-actuel-moins"><i class="fas fa-minus-square"></i></a>
+        <input class="resource-content" id="pointsreve-value" type="text" name="system.reve.reve.value" value="{{system.reve.reve.value}}" data-dtype="Number" />
+        <span>/ {{system.reve.seuil.value}}</span>
+        <a class="ptreve-actuel-plus"><i class="fas fa-plus-square"></i></a>
+      </label>
+    </li>
+  </ul>
+</div>
diff --git a/templates/actor/header-effects.html b/templates/actor/header-effects.html
index b7c8288f..3a94f93e 100644
--- a/templates/actor/header-effects.html
+++ b/templates/actor/header-effects.html
@@ -1,17 +1,12 @@
-<div class="flexrow">
-  {{#if calc.surprise}}{{calc.surprise}}! {{/if}}
+<span>
   {{#if effects}}
-    <span>
-      {{#each effects as |effect key|}}
-      <span class="active-effect" data-effect="{{effect.flags.core.statusId}}">
-        <img class="button-effect-img delete-active-effect" src="{{effect.icon}}" alt="{{localize effect.label}}" width="24" height="24" />
-      </span>
-      {{/each}}
+    {{#each effects as |effect key|}}
+    <span class="active-effect" data-effect="{{effect.flags.core.statusId}}">
+      <img class="button-effect-img {{#if @root.options.isGM}}delete-active-effect{{/if}}" src="{{effect.icon}}" alt="{{localize effect.label}}" width="24" height="24" />
     </span>
-    {{#if options.isGM}}
-    <span class="enlever-tous-effets"><a>(enlever tout)</a></span>
-    {{/if}}
+    {{/each}}
+    {{#if calc.surprise}}<span>{{calc.surprise}}!</span>{{/if}}
   {{else}}
-    <span>Aucun effet actif</span>
+    Aucun effet actif
   {{/if}}
-</div>
+  </span>
diff --git a/templates/actor/header-etat.html b/templates/actor/header-etat.html
index 24dec49b..24431e0c 100644
--- a/templates/actor/header-etat.html
+++ b/templates/actor/header-etat.html
@@ -1,10 +1,12 @@
-<div class="flexrow">
-  <span class="appliquerFatigue tooltip tooltip-dotted">Malus de fatigue : {{calc.fatigue.malus}}
-    <span class="tooltiptext ttt-fatigue">{{{calc.fatigue.html}}}</span>
-  </span>
-  <span>{{calc.resumeBlessures}}</span>
-</div>
-<div class="flexrow">
-  <span>{{system.compteurs.etat.label}}: {{system.compteurs.etat.value}}</span>
-  <span>{{system.compteurs.surenc.label}}: {{system.compteurs.surenc.value}}</span>
+<div class="flex-group-left header-etats">
+  <div class="flexcol">
+    <span class="appliquerFatigue tooltip tooltip-dotted">Fatigue: {{calc.fatigue.malus}}
+      <span class="tooltiptext ttt-fatigue">{{{calc.fatigue.html}}}</span>
+    </span>
+    <span>{{system.compteurs.etat.label}}: {{system.compteurs.etat.value}}</span>
+    <span>{{system.compteurs.surenc.label}}: {{system.compteurs.surenc.value}}</span>
+    <span>{{calc.resumeBlessures}}</span>
+    {{>"systems/foundryvtt-reve-de-dragon/templates/actor/header-effects.html"}}
+  </div>
 </div>
+