positionnement des cases

README.md

@@ -94,3 +94,5 @@ Regarde les trois prochaines cartes de la pioche.
 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.
+### 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.

frontend/public/game.html

@@ -6,18 +6,15 @@
   <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}
+    /* keep a wrapper that forces a square area; the actual .board/.cell layout lives in src/styles.css */
-    .row{display:contents}
+    #board-wrapper .board{width:100%;aspect-ratio:1/1;box-sizing:border-box}
-  .cell{position:relative;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
     .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}
     /* grid cells will be created dynamically via JS using grid-template */
-    /* checkerboard colors */
+  /* 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}

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);}
+.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}
+.row{display:flex;gap:0 /* no gap between cells */}
-.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;background:#f0d9b5;border:1px solid #b58863}
+.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}

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);}
+.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}
+.row{display:flex;gap:0 /* no gap between cells */}
-.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;background:#f0d9b5;border:1px solid #b58863}
+.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}