From ec1d441b81f7fe8ddb82d4acd523cf873dbbd94c Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Fri, 17 Oct 2025 15:47:14 +0200
Subject: [PATCH] positionnement des cases

---
 README.md                      |  4 +++-
 frontend/public/game.html      | 17 +++++++----------
 frontend/public/src/styles.css | 11 ++++++++---
 frontend/src/styles.css        | 11 ++++++++---
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 8cb064c..fb5e7dd 100644
--- a/README.md
+++ b/README.md
@@ -93,4 +93,6 @@ Regarde les trois prochaines cartes de la pioche.
 ### Tout ou rien
 Une pièce choisie ne peut maintenant se déplacer que si elle capture.
 ### Tous les mêmes
-Au yeux de l'ennemie, toutes les pièces se ressemblent pendant 2 tours.
\ No newline at end of file
+Au yeux de l'ennemie, toutes les pièces se ressemblent pendant 2 tours.
+### Petit pion
+Le joueur choisit un pion. À partir du prochain tour, il est promu en reine dès qu'il capture un pièce non pion.
\ No newline at end of file
diff --git a/frontend/public/game.html b/frontend/public/game.html
index 1b1217f..1209b11 100644
--- a/frontend/public/game.html
+++ b/frontend/public/game.html
@@ -6,20 +6,17 @@
   <title>ChessNut 1 Partie</title>
   <link rel="stylesheet" href="src/styles.css">
   <style>
-    /* Minimal board CSS: grid that adapts to container size */
+    /* Minimal board CSS: keep responsive wrapper but delegate main layout to linked stylesheet */
     .game-page{max-width:1000px;margin:12px auto;padding:8px}
     #board-wrapper{width:100%;max-width:900px;margin:0 auto}
-    .board{display:grid;border:2px solid #333;box-sizing:border-box}
-    .row{display:contents}
-  .cell{position:relative;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
+    /* keep a wrapper that forces a square area; the actual .board/.cell layout lives in src/styles.css */
+    #board-wrapper .board{width:100%;aspect-ratio:1/1;box-sizing:border-box}
     .cell .piece{width:100%;height:100%;object-fit:contain;display:block}
-    .cell.selected{outline:3px solid rgba(0,128,255,0.6);}
-    /* make board square and responsive: use a wrapper with aspect-ratio */
-    #board-wrapper .board{width:100%;aspect-ratio:1/1}
+    .cell.selected{outline:3px solid rgba(0,128,255,0.6);}    
     /* grid cells will be created dynamically via JS using grid-template */
-    /* checkerboard colors */
-    .board .cell:nth-child(odd){ background: #f0d9b5; }
-    .board .cell:nth-child(even){ background: #b58863; }
+  /* checkerboard colors — keep these in case JS doesn't add classes */
+  .board .cell:nth-child(odd){ background: #f0d9b5; }
+  .board .cell:nth-child(even){ background: #b58863; }
     #meta{margin-top:8px}
   </style>
 </head>
diff --git a/frontend/public/src/styles.css b/frontend/public/src/styles.css
index 08962d7..4be16f9 100644
--- a/frontend/public/src/styles.css
+++ b/frontend/public/src/styles.css
@@ -6,9 +6,14 @@ body{font-family: Arial, Helvetica, sans-serif; margin:0; padding:0;}
 header{background:#222;color:#fff;padding:10px}
 main{padding:16px}
 .card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
-.board{display:flex;flex-direction:column;gap:0;border:4px solid #444;width:calc(var(--cell-size)*8);}
-.row{display:flex}
-.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;background:#f0d9b5;border:1px solid #b58863}
+.board{display:flex;flex-direction:column;gap:0 /* no gap between rows */; /* remove outer border so cell borders touch */ width:calc(var(--cell-size)*8);}
+.row{display:flex;gap:0 /* no gap between cells */}
+.row .cell { width:var(--cell-size); height:var(--cell-size); }
+/* Make sizing include borders so borders don't add extra space */
+*, *::before, *::after { box-sizing: border-box; }
+/* For grid-rendered boards (JS sets display:grid on .board), let cells stretch to the grid track size.
+  For row-based rendering, `.row .cell` provides fixed sizing. */
+.board > .cell { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f0d9b5; border:1px solid #b58863; margin:0; }
 .cell:nth-child(even){background:#b58863}
 .board.flipped{transform:rotate(180deg)}
 .piece{width:48px;height:48px}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 08962d7..4be16f9 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -6,9 +6,14 @@ body{font-family: Arial, Helvetica, sans-serif; margin:0; padding:0;}
 header{background:#222;color:#fff;padding:10px}
 main{padding:16px}
 .card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
-.board{display:flex;flex-direction:column;gap:0;border:4px solid #444;width:calc(var(--cell-size)*8);}
-.row{display:flex}
-.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;background:#f0d9b5;border:1px solid #b58863}
+.board{display:flex;flex-direction:column;gap:0 /* no gap between rows */; /* remove outer border so cell borders touch */ width:calc(var(--cell-size)*8);}
+.row{display:flex;gap:0 /* no gap between cells */}
+.row .cell { width:var(--cell-size); height:var(--cell-size); }
+/* Make sizing include borders so borders don't add extra space */
+*, *::before, *::after { box-sizing: border-box; }
+/* For grid-rendered boards (JS sets display:grid on .board), let cells stretch to the grid track size.
+  For row-based rendering, `.row .cell` provides fixed sizing. */
+.board > .cell { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f0d9b5; border:1px solid #b58863; margin:0; }
 .cell:nth-child(even){background:#b58863}
 .board.flipped{transform:rotate(180deg)}
 .piece{width:48px;height:48px}