diff --git a/Tylestel/tylestel.css b/Tylestel/tylestel.css
index 90db0a0dae..e54795b32e 100644
--- a/Tylestel/tylestel.css
+++ b/Tylestel/tylestel.css
@@ -424,7 +424,7 @@ div.sheet-comba{
 /* -----------------------*/
 /* Styles génériques */
 
-.sheet-comba div.sheet-etatNom {
+div.sheet-etatNom {
   grid-area: nom;
   font-size: 15px;
   line-height: 15px;
@@ -432,7 +432,7 @@ div.sheet-comba{
   font-family: 'Trebuchet MS';
 }
 
-.sheet-comba div.sheet-etatInfos {
+div.sheet-etatInfos {
   grid-area: infos;
   font-size: 9px;
   line-height: 9px;
@@ -443,7 +443,7 @@ div.sheet-comba{
 /* -----------------------*/
 /* Styles des 5 valeurs du haut */
 
-.sheet-comba .sheet-moduleEtat {
+.sheet-moduleEtat {
   display: grid;
   grid-template-columns: 60px 100px;
   grid-template-rows: 17px 10px;
@@ -452,8 +452,8 @@ div.sheet-comba{
   height: 35px;
 }
 
-.sheet-comba .sheet-moduleEtat div.sheet-input { grid-area: input; width: 50px; }
-.sheet-comba .sheet-moduleEtat input {
+.sheet-moduleEtat div.sheet-input { grid-area: input; width: 50px; }
+.sheet-moduleEtat input {
   width: 50px;
   justify: center;
   text-align: center;
@@ -866,11 +866,83 @@ div.sheet-equipement{
 /* =============================================================================================== */
 
 div.sheet-cartes{
-  width:    650px;
-  height:   920px;
-  background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/master/Tylestel/images/page3_cartes_lq.png?raw=true);
-  background-size: 650px 920px;
+    width:    650px;
+    height:   920px;
+    background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/master/Tylestel/images/page3_cartes_lq.png?raw=true);
+    background-size: 650px 920px;
+    background-repeat: no-repeat;
+  
+    display: grid;
+    grid-template-columns: 270px, 290px;
+    grid-template-rows: 320px 550px;
+    grid-template-areas:"actions reactions"
+                        "actionsFavorites reactionsFavorites";
+}
+
+.sheet-cartes div.sheet-actions { grid-area: actions; }
+.sheet-cartes div.sheet-reactions { grid-area: reactions; }
+.sheet-cartes div.sheet-actionsFavorites { grid-area: actionsFavorites; }
+.sheet-cartes div.sheet-reactionsFavorites { grid-area: reactionsFavorites; }
+
+.sheet-moduleCartes {
+  display: grid;
+  grid-template-columns: 60px 200px;
+  grid-template-rows: 17px 10px;
+  grid-template-areas:"input nom"
+                      "input infos";
+  height: 35px;
+}
+
+.sheet-cartes div.sheet-actions{
+    padding-top: 80px;
+    padding-left: 35px;
+}
+
+.sheet-cartes div.sheet-reactions{
+    padding-top: 80px;
+    padding-left: 35px;
+}
+
+.sheet-cartes .sheet-moduleCartes div.sheet-input {
+    grid-area: input;
+    width: 250px;
+}
+
+.sheet-moduleCartes div.sheet-input { grid-area: input; width: 50px; }
+.sheet-moduleCartes input {
+  width: 50px;
+  justify: center;
+  text-align: center;
+  
+  background-image: url(https://github.com/Gustavitch/roll20-character-sheets/blob/master/Tylestel/images/metiers/_cadre.png?raw=true);
   background-repeat: no-repeat;
+  background-size: 50px 25px;
+  background-position: center;
+}
+
+.sheet-cartes label {
+    margin-top: 10px;
+    font-family: 'Trebuchet MS';
+    font-size: 14px;
+    margin-bottom: 0px;
+}
+
+.sheet-cartes .sheet-main textarea {
+    width: 270px;
+    height: 140px;
+    resize: none;
+    font-size: 12px;
+    line-height: 14px;
+}
+
+.sheet-cartes textarea.sheet-actionsFavorites {
+    margin-left: 35px;
+    margin-top: 40px;
+    width: 270px;
+    height: 500px;
+    resize: none;
+    font-size: 12px;
+    line-height: 14px;
 }
 
 
diff --git a/Tylestel/tylestel.html b/Tylestel/tylestel.html
index bbc45eebd6..f1d77f7060 100644
--- a/Tylestel/tylestel.html
+++ b/Tylestel/tylestel.html
@@ -1,4 +1,4 @@
-<input type="hidden" class="onglets" name="attr_onglet"  value="equipement"/>
+<input type="hidden" class="onglets" name="attr_onglet"  value="cartes"/>
 <div>
     <button type="action" name="act_caracs" >Caractéristiques</button>
     <button type="action" name="act_equipement" >Équipement</button>
@@ -444,7 +444,29 @@
 <!-- =============================================================================================== -->
 
 <div class="cartes">
-</div>
+    <div class="actions main flex-column">
+      <div class="moduleCartes">
+          <div class="input"><input type="attribut" name="attr_nombre_actions"></div>
+          <div class="etatNom">Nombre de cartes</div>
+          <div class="etatInfos">2 + Guerrier / 2</div>
+      </div>
+      <label>Main actuelle</label>
+      <textarea name="attr_main_actions"></textarea>
+    </div>
+    
+    <div class="reactions main flex-column">
+      <div class="moduleCartes">
+          <div class="input"><input type="attribut" name="attr_nombre_reactions"></div>
+          <div class="etatNom">Nombre de cartes</div>
+          <div class="etatInfos">1 + Strategos / 2</div>
+      </div>
+      <label>Main actuelle</label>
+      <textarea name="attr_main_reactions"></textarea>
+    </div>
+    
+    <textarea class="actionsFavorites" name="attr_actions_favorites"></textarea>
+    <textarea class="actionsFavorites" name="attr_reactions_favorites"></textarea>
+</div> <!-- cartes -->
 
 
 <!-- =============================================================================================== -->