Add Phone Compatibility

poker-paf/config.css

@@ -150,3 +150,85 @@ input[type="submit"]:hover {
     transform: translateX(-5px); /* Petit effet de glissement vers la gauche */
 }
 
+
+
+/* --- Mode Mobile ---*/
+/* --- ADAPTATION MOBILE POUR LA CONFIGURATION --- */
+@media (max-width: 600px) {
+    
+    body {
+        padding: 10px; /* On réduit la marge extérieure */
+        align-items: flex-start; /* On aligne en haut pour que le scroll soit naturel */
+    }
+
+    .container {
+        padding: 20px; /* On réduit le padding interne (30px 50px -> 20px) */
+        border-width: 8px; /* Bordure bois plus fine */
+        border-radius: 30px; /* Moins arrondi pour gagner de la place */
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    h1 {
+        font-size: 1.4rem;
+        margin-bottom: 20px;
+    }
+
+    /* Le bouton "Retour" */
+    .btn-back {
+        position: relative; /* On le sort de l'absolute pour qu'il ne chevauche pas le titre */
+        top: 0;
+        left: 0;
+        display: block;
+        margin-bottom: 15px;
+        width: auto;
+    }
+
+    /* 1. Ligne joueur : Le plus important ! */
+    .player-row {
+        flex-direction: column; /* On empile Nom et Poubelle verticalement */
+        align-items: stretch;
+        background: rgba(0,0,0,0.1);
+        padding: 10px;
+        border-radius: 8px;
+        border: 1px solid rgba(212, 175, 55, 0.3);
+    }
+
+    .player-row input {
+        width: 100%; /* Le champ de nom prend toute la largeur */
+    }
+
+    .player-row button {
+        width: 100%; /* Le bouton supprimer devient une large barre rouge */
+        padding: 12px;
+        margin-top: 5px;
+    }
+
+    /* 2. Inputs plus gros pour le tactile */
+    input[type="number"], 
+    input[type="text"] {
+        padding: 15px;
+        font-size: 1.1rem; /* Évite le zoom auto sur iPhone */
+    }
+
+    /* 3. Boutons d'action */
+    button[type="button"] {
+        width: 100%; /* "Ajouter un joueur" prend toute la largeur */
+        padding: 15px;
+        font-size: 1rem;
+    }
+
+    input[type="submit"] {
+        padding: 18px;
+        font-size: 1.1rem;
+        border-radius: 15px; /* Un peu moins arrondi pour le look mobile */
+    }
+
+    /* Infos de mise (les petits labels gris) */
+    label.info {
+        margin-left: 0;
+        margin-top: -15px;
+        margin-bottom: 15px;
+        display: block;
+    }
+}

poker-paf/index.css

@@ -116,4 +116,67 @@ li {
     display: flex;
     justify-content: space-between;
     align-items: center;
+}
+
+
+
+/* --- Mode Mobile --- */
+/* --- ADAPTATION MOBILE POUR L'ACCUEIL --- */
+@media (max-width: 600px) {
+    
+    body {
+        /* On permet le scroll si le contenu est plus haut que l'écran */
+        height: auto;
+        padding: 20px 0;
+    }
+
+    .welcome-container {
+        /* On réduit les bordures massives et le padding */
+        padding: 30px 20px;
+        border-width: 8px; /* Bordure en bois moins épaisse */
+        border-radius: 40px; /* Moins arrondi pour gagner de la place */
+        width: 85%;
+    }
+
+    h1 {
+        font-size: 1.6rem; /* Titre plus petit */
+        margin-bottom: 30px;
+    }
+
+    /* Le bouton principal doit être bien large pour le pouce */
+    .btn-start {
+        width: 100%;
+        box-sizing: border-box; /* Pour que le padding n'agrandisse pas la largeur */
+        padding: 18px 20px;
+        font-size: 1.1rem;
+    }
+
+    /* Section rejoindre */
+    input[type="text"] {
+        width: 100%; /* L'input prend toute la largeur */
+        box-sizing: border-box;
+        padding: 15px;
+        font-size: 1.1rem; /* Évite le zoom auto de l'iPhone sur les inputs */
+    }
+
+    button {
+        width: 100%; /* Les boutons de validation passent en pleine largeur */
+        padding: 15px;
+        margin-top: 10px;
+    }
+
+    /* Pour la liste des parties */
+    li {
+        flex-direction: column; /* On empile le nom et le bouton */
+        gap: 10px;
+        background: rgba(0,0,0,0.2);
+        padding: 15px;
+        border-radius: 10px;
+        margin-bottom: 15px;
+    }
+
+    .btn-join-list {
+        width: 100%;
+        text-align: center;
+    }
 }