diff --git a/poker-paf/Css/Game.css b/poker-paf/Css/Game.css
index 946c4d6..a366537 100644
--- a/poker-paf/Css/Game.css
+++ b/poker-paf/Css/Game.css
@@ -2,63 +2,70 @@
     --poker-green: #1a5e33;
     --poker-border: #3e2723;
     --gold: #d4af37;
+    --gold-light: #f9e27d;
     --dark-bg: #0a0a0a;
     --panel-bg: #1a1a1a;
     --white: #ffffff;
+    --table-width: 800px;
+    --table-height: 400px;
 }
 
+/* --- Base & Reset --- */
+* { box-sizing: border-box; }
+
 body {
     background-color: var(--dark-bg);
     color: var(--white);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     margin: 0;
     height: 100vh;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow-x: hidden;
 }
 
-
-
 .game-container {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 
-/* 1. Barre de stats */
+/* --- 1. Stats Bar --- */
 .stats-bar {
-    background: rgba(0,0,0,0.8);
-    padding: 15px 30px;
+    background: rgba(0, 0, 0, 0.9);
+    padding: 10px 20px;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
     border-bottom: 2px solid var(--poker-border);
+    z-index: 100;
 }
 
 .stat-item {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     color: var(--gold);
+    font-weight: bold;
 }
 
-/* 2. Table de jeu */
+/* --- 2. Table Area --- */
 .table-container {
-    flex-grow: 1;
+    flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
-    padding: 60px; /* Espace pour les noms des joueurs */
+    padding: 80px 20px; /* Espace crucial pour les avatars */
 }
 
 .poker-table {
-    width: 800px;
-    height: 400px;
+    width: 100%;
+    max-width: var(--table-width);
+    height: var(--table-height);
     background-color: var(--poker-green);
-    border: 15px solid var(--poker-border);
+    border: 12px solid var(--poker-border);
     border-radius: 200px;
     position: relative;
-    box-shadow: inset 0 0 80px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.5);
+    box-shadow: inset 0 0 80px rgba(0,0,0,0.6), 0 20px 50px rgba(0,0,0,0.5);
 }
 
 .pot-area {
@@ -67,550 +74,161 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
-    pointer-events: none;
+    z-index: 2;
 }
 
 .total-pot {
-    font-size: 3rem;
-    font-weight: bold;
-    color: var(--white);
-    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
+    font-size: clamp(1.5rem, 5vw, 2.5rem);
+    font-weight: 800;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
 }
 
-.current-bet-display {
-    font-size: 1.2rem;
-    opacity: 0.8;
-}
-
-/* 3. Positionnement des joueurs (8 slots) */
+/* --- 3. Players Slots --- */
 .player-slot {
     position: absolute;
-    width: 140px;
-    z-index: 5;
+    width: 120px;
+    z-index: 10;
+    transition: all 0.3s ease;
 }
 
 .player-info {
-    background: rgba(0, 0, 0, 0.9);
-    border: 2px solid var(--gold);
-    border-radius: 12px;
+    background: rgba(10, 10, 10, 0.95);
+    border: 2px solid var(--poker-border);
+    border-radius: 10px;
     padding: 8px;
     text-align: center;
-    position: relative;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
 }
 
 .player-info.active {
-    box-shadow: 0 0 25px var(--gold);
-    transform: scale(1.1);
-    border-color: #fff;
+    border-color: var(--gold);
+    box-shadow: 0 0 15px var(--gold);
+    transform: scale(1.05);
 }
 
-.player-name {
-    display: block;
-    font-weight: bold;
-    color: var(--gold);
-    font-size: 0.9rem;
-}
+.player-name { color: var(--gold); font-weight: bold; font-size: 0.85rem; }
+.player-money { font-size: 1rem; display: block; margin: 2px 0; }
+.player-bet { font-size: 0.75rem; color: #aaa; }
 
-.player-money {
-    font-size: 1.1rem;
-    font-weight: bold;
-}
+/* Positionnement Responsive des slots */
+.slot-0 { top: -65px; left: 50%; transform: translateX(-50%); }
+.slot-1 { top: 10%; right: -60px; }
+.slot-2 { top: 50%; right: -90px; transform: translateY(-50%); }
+.slot-3 { bottom: 10%; right: -60px; }
+.slot-4 { bottom: -65px; left: 50%; transform: translateX(-50%); }
+.slot-5 { bottom: 10%; left: -60px; }
+.slot-6 { top: 50%; left: -90px; transform: translateY(-50%); }
+.slot-7 { top: 10%; left: -60px; }
 
-/* Coordonnées autour de l'ovale */
-.slot-0 { top: -60px; left: 50%; transform: translateX(-50%); } 
-.slot-1 { top: 0%; right: -110px; }
-.slot-2 { top: 50%; right: -150px; transform: translateY(-50%); }
-.slot-3 { bottom: 0%; right: -110px; }
-.slot-4 { bottom: -60px; left: 50%; transform: translateX(-50%); } 
-.slot-5 { bottom: 0%; left: -110px; }
-.slot-6 { top: 50%; left: -150px; transform: translateY(-50%); }
-.slot-7 { top: 0%; left: -110px; }
-
-/* 4. Panneau d'action */
+/* --- 4. Action Panel --- */
 .action-panel {
     background: var(--panel-bg);
-    border-top: 4px solid var(--gold);
-    padding: 20px;
-    text-align: center;
-}
-
-.turn-info {
-    margin: 0 0 15px 0;
-    font-size: 1.2rem;
+    border-top: 3px solid var(--gold);
+    padding: 15px;
+    z-index: 200;
 }
 
 .action-buttons {
     display: flex;
     justify-content: center;
-    gap: 15px;
+    align-items: center;
+    gap: 10px;
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
 .btn {
-    padding: 15px 30px;
-    border-radius: 8px;
+    padding: 12px 20px;
+    border-radius: 6px;
     border: none;
     font-weight: bold;
     cursor: pointer;
     text-transform: uppercase;
     transition: 0.2s;
-    min-width: 120px;
+    font-size: 0.9rem;
 }
 
-.btn-fold { background: #444; color: white; }
+.btn-fold { background: #333; color: #eee; }
 .btn-call { background: var(--poker-green); color: white; border: 1px solid var(--gold); }
 .btn-raise { background: #1e88e5; color: white; }
-.btn-allin { 
-    background: linear-gradient(45deg, #d4af37, #f9e27d); 
-    color: #3e2723;
-    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
-}
+.btn-allin { background: linear-gradient(to bottom, var(--gold), #b8860b); color: #000; }
 
-.btn:hover {
-    transform: translateY(-5px);
-    filter: brightness(1.2);
-}
-
-/* --- Styles pour le bloc Augmenter --- */
+/* Raise Group Input */
 .raise-group {
     display: flex;
-    align-items: stretch; /* Pour que l'input et le bouton aient la même hauteur */
-    margin: 0 10px;
+    border: 2px solid var(--gold);
+    border-radius: 6px;
+    overflow: hidden;
 }
 
 #raise-amount {
-    width: 100px;
-    padding: 10px;
-    border: 2px solid var(--gold);
-    border-right: none; /* On retire la bordure droite pour coller au bouton */
-    border-radius: 8px 0 0 8px; /* Arrondi seulement à gauche */
-    background: #222;
-    color: white;
-    font-weight: bold;
-    outline: none;
-}
-
-.btn-validate {
-    padding: 10px 15px;
-    background: var(--gold);
-    color: var(--poker-border);
-    border: 2px solid var(--gold);
-    border-radius: 0 8px 8px 0; /* Arrondi seulement à droite */
-    font-weight: bold;
-    cursor: pointer;
-    text-transform: uppercase;
-    transition: 0.2s;
-}
-
-.btn-validate:hover {
-    background: #f9e27d;
-    filter: brightness(1.1);
-}
-
-/* Suppression des flèches par défaut de l'input number pour un look plus propre */
-#raise-amount::-webkit-inner-spin-button, 
-#raise-amount::-webkit-outer-spin-button { 
-    -webkit-appearance: none; 
-    margin: 0; 
-}
-
-.guide-overlay {
-    position: fixed;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.9);
-    border: 2px solid var(--gold);
-    padding: 20px;
-    border-radius: 15px;
-    z-index: 1000;
-    text-align: center;
-    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
-    min-width: 300px;
-}
-
-.guide-content h2 {
-    margin: 0 0 15px 0;
-    color: white;
-    font-size: 1.5rem;
-}
-
-#guide-btn {
-    background: var(--gold);
-    color: black;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    font-weight: bold;
-    cursor: pointer;
-    text-transform: uppercase;
-}
-
-.dealer-badge {
-    position: absolute;
-    top: -15px;
-    right: -15px;
-    background: linear-gradient(45deg, #ffd700, #b8860b);
-    color: #000;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    font-size: 14px;
-    border: 2px solid #fff;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-    z-index: 20;
-}
-
-/* On peut aussi ajouter un effet d'ombre sur le joueur qui commence */
-.player-info.is-dealer {
-    border-color: #ffd700;
-}
-
-.btn-next-round {
-    margin-top: 15px;
-    padding: 10px 20px;
-    background: var(--gold);
-    border: none;
-    border-radius: 20px;
-    font-weight: bold;
-    cursor: pointer;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-    transition: 0.3s;
-    z-index: 10;
-}
-
-.btn-next-round:hover {
-    transform: scale(1.1);
-    background: #fff;
-    z-index: 10;
-}
-
-.player-bet {
-    font-size: 0.9rem;
-    color: rgb(141, 141, 141);
-    margin-top: 5px;
-}
-
-.btn-spaction {
-    background: transparent;
-    color: var(--gold);
-    text-decoration: none;
-    font-size: 0.9rem;
-    padding: 5px 10px;
-    border: 1px solid var(--gold);
-    border-radius: 5px;
-    transition: background 0.3s, color 0.3s;
-}
-
-
-
-
-
-/* Le panneau qui contient tout le message de fin */
-/* Le rideau qui floute l'arrière-plan */
-.win-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
-    backdrop-filter: blur(8px);    /* C'est ici qu'on met le flou ! */
-    z-index: 9998;                 /* Juste en dessous du panel */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-/* On ajuste le win-panel pour qu'il soit propre à l'intérieur */
-.win-panel {
-    position: relative; /* Plus besoin de fixed ici car l'overlay l'est déjà */
-    background: #1a1a1a;
-    padding: 40px;
-    border-radius: 20px;
-    border: 3px solid #ffd700;
-    box-shadow: 0 0 50px rgba(0, 0, 0, 1);
-    z-index: 9999;
-    text-align: center;
-    min-width: 400px;
-    display: flex;
-    flex-direction: column;
-    gap: 25px;
-}
-
-/* Le titre dans le panel */
-.win-panel h2 {
+    width: 70px;
+    background: #000;
     color: #fff;
-    margin: 0;
-    font-family: 'Arial Black', sans-serif;
-    text-transform: uppercase;
-    line-height: 1.4;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-}
-
-/* Zone qui contient les boutons des joueurs */
-#winner-buttons-area {
-    display: flex;
-    flex-wrap: wrap;      /* Si beaucoup de joueurs, ils vont à la ligne */
-    justify-content: center;
-    gap: 15px;
-    width: 100%;
-}
-
-/* Tes boutons .btn-win (on réutilise le style Or précédent) */
-.btn-win {
-    background: linear-gradient(to bottom, #ffd700, #b8860b);
-    border: 2px solid #8b4513;
-    color: #000;
-    padding: 15px 30px;
-    font-weight: bold;
-    cursor: pointer;
-    border-radius: 8px;
-    transition: transform 0.2s;
-}
-
-.btn-win:hover {
-    transform: scale(1.1);
-}
-
-.btn-win:active {
-    transform: translateY(3px);
-    box-shadow: 0 1px 0 #5d2e0a;
-}
-
-/* Base commune pour tous les boutons de l'interface */
-.btn-back, .btn-replay, .btn-spaction {
-    text-decoration: none;
-    border-radius: 8px;
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    padding: 10px 20px;
-    text-transform: uppercase;
-    transition: all 0.2s ease;
-    border: 2px solid rgba(0,0,0,0.2);
-}
-
-/* Style spécifique : Rejouer (Style Action / Casino) */
-.btn-replay {
-    padding: 10px 20px;
-    background: linear-gradient(to bottom, #5bc0de, #2aabd2); /* Bleu électrique */
-    box-shadow: 0 4px 0 #1b728c;
-}
-
-.btn-replay:hover {
-    filter: brightness(1.1);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 0 #1b728c;
-}
-
-/* Animation au clic pour les deux */
-.btn-back:active, .btn-replay:active, .btn-spaction:active {
-    transform: translateY(3px);
-    box-shadow: 0 1px 0 rgba(0,0,0,0.5);
-}
-
-/* Style spécifique : Retour (Style plus sobre / Alerte) */
-.btn-back {
-    background: linear-gradient(to bottom, #d9534f, #a94442); /* Rouge profond */
-    box-shadow: 0 4px 0 #7b2e2c;
-}
-
-.btn-back:hover, .btn-spaction:hover {
-    filter: brightness(1.1);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 0 #7b2e2c;
-}
-
-.blur-effect {
-    filter: blur(5px);
-    pointer-events: none; /* Empêche de cliquer sur la table derrière */
-}
-
-.All-in-Blur {
-    filter: blur(1px);
-}
-
-
-
-
-/* Le conteneur avec la bordure dorée fine */
-.money-group {
-    display: inline-flex;
-    align-items: stretch; /* Force le bouton à prendre toute la hauteur */
-    background: #1e1e1e;   /* Fond très sombre pour faire ressortir l'or */
-    border: 1px solid #c5a059; /* Bordure Or mat (plus sobre que le jaune brillant) */
-    border-radius: 8px;
-    overflow: hidden;      /* Pour que le bouton épouse l'arrondi de la bordure */
-    height: 40px;          /* Hauteur fixe pour un look plus pro */
-}
-
-/* Le champ de saisie */
-#money-amount {
-    background: transparent;
     border: none;
-    color: #ffffff;
-    font-size: 1rem;
-    padding: 0 15px;
-    width: 100px;          /* Ajustable selon tes besoins */
-    outline: none;
+    padding: 5px;
+    text-align: center;
 }
 
-/* Le bouton OK qui occupe tout l'espace à droite */
-.btn-money {
-    background: linear-gradient(45deg, #d4af37, #f9e27d);   /* Fond Or mat */
-    border: none;
-    color: #1e1e1e;        /* Texte sombre pour le contraste */
-    cursor: pointer;
-    font-weight: 800;
-    padding: 0 20px;       /* Largeur du bouton */
-    text-transform: uppercase;
-    transition: background 0.2s ease;
-    display: flex;
-    align-items: center;   /* Centre le texte "OK" verticalement */
-}
+.btn-validate { background: var(--gold); border: none; padding: 0 10px; cursor: pointer; font-weight: bold; }
 
-.btn-money:hover {
-    filter: brightness(1.2);   /* Or un peu plus clair au survol */
-}
-
-.btn-money:active {
-    filter: brightness(0.8);   /* Or plus sombre au clic */
-}
-
-/* Suppression des flèches de l'input */
-#money-amount::-webkit-inner-spin-button, 
-#money-amount::-webkit-outer-spin-button { 
-    -webkit-appearance: none; 
-    margin: 0; 
-}
-
-
-
-
-
-/* --- Mode Mobile (pour les petits écrans) --- */
-/* --- ADAPTATION MOBILE --- */
+/* --- 5. Mobile Adjustments --- */
 @media (max-width: 900px) {
-    
-    /* 1. On permet au corps de défiler si besoin, mais on réduit les espaces */
-    body {
-        height: auto;
-        overflow-y: auto;
+    :root {
+        --table-height: 300px;
     }
 
-    /* 2. Barre de stats plus compacte */
-    .stats-bar {
-        padding: 10px;
-        flex-wrap: wrap;
-        gap: 10px;
-        justify-content: center;
-    }
-
-    .stat-item {
-        font-size: 1rem;
-    }
-
-    /* 3. LA TABLE : On la réduit pour qu'elle tienne en largeur */
     .table-container {
-        padding: 40px 10px; /* Moins d'espace autour */
-        min-height: 450px;
+        padding: 60px 40px;
     }
 
-    .poker-table {
-        width: 100%;       /* Elle prend toute la largeur dispo */
-        max-width: 350px;  /* Mais pas trop non plus */
-        height: 300px;
-        border-width: 8px;
-        border-radius: 100px; /* Plus arrondie pour le format portrait */
-    }
-
-    .total-pot {
-        font-size: 1.8rem;
-    }
-
-    /* 4. POSITION DES JOUEURS : On resserre tout */
-    .player-slot {
-        width: 100px; /* Joueurs plus petits sur mobile */
-    }
-
-    .player-name { font-size: 0.7rem; }
-    .player-money { font-size: 0.9rem; }
-    .player-bet { font-size: 0.7rem; }
-
-    /* Ajustement des positions pour que ça ne sorte pas de l'écran */
-    .slot-0 { top: -45px; }
-    .slot-1 { right: -20px; top: 10%; }
-    .slot-2 { right: -40px; }
-    .slot-3 { right: -20px; bottom: 10%; }
-    .slot-4 { bottom: -45px; }
-    .slot-5 { left: -20px; bottom: 10%; }
-    .slot-6 { left: -40px; }
-    .slot-7 { left: -20px; top: 10%; }
-
-    /* 5. PANNEAU D'ACTION : On empile les boutons */
-    .action-panel {
-        padding: 15px 10px;
-        position: sticky;
-        bottom: 0;
-        z-index: 100;
-    }
+    .player-slot { width: 90px; }
+    
+    /* On resserre les positions pour mobile */
+    .slot-1 { right: -20px; }
+    .slot-2 { right: -30px; }
+    .slot-3 { right: -20px; }
+    .slot-5 { left: -20px; }
+    .slot-6 { left: -30px; }
+    .slot-7 { left: -20px; }
 
     .action-buttons {
         display: grid;
-        grid-template-columns: 1fr 1fr; /* 2 colonnes de boutons */
-        gap: 10px;
+        grid-template-columns: 1fr 1fr;
     }
 
-    .btn {
-        padding: 12px 5px;
-        min-width: 0;   /* On laisse la grille gérer la largeur */
-        font-size: 0.8rem;
-    }
-
-    /* Le groupe de relance prend toute la largeur sur une ligne de la grille */
-    .raise-group {
-        grid-column: span 2; 
-        margin: 0;
-        justify-content: center;
-    }
-
-    #raise-amount {
-        flex-grow: 1;
-    }
-
-    .btn-allin {
-        grid-column: span 2; /* Le tapis prend toute la largeur pour bien le voir */
-    }
-
-    /* 6. Guide de bienvenue */
-    .guide-overlay {
-        width: 90%;
-        box-sizing: border-box;
+    .raise-group, .btn-allin {
+        grid-column: span 2;
     }
 }
 
-/* Optionnel : Pour les très petits écrans (iPhone SE, etc.) */
-@media (max-width: 380px) {
-    .poker-table {
-        height: 250px;
-    }
-    .player-slot {
-        width: 85px;
-    }
+/* --- Win Panel & Overlays --- */
+.win-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.85);
+    backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
 }
 
-@media (max-width: 600px) {
-    .win-panel {
-        padding: 20px;
-        width: 95%;
-    }
-    .win-panel h2 {
-        font-size: 1.3rem;
-    }
+.win-panel {
+    background: #1a1a1a;
+    padding: 30px;
+    border: 3px solid var(--gold);
+    border-radius: 15px;
+    text-align: center;
+    max-width: 90%;
 }
 
+.btn-win {
+    background: var(--gold);
+    padding: 10px 20px;
+    margin: 5px;
+    border: none;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+}
\ No newline at end of file