Add Phone Compatibility

2026-03-01 21:58:31 +01:00
parent ccd3f2ad49
commit ca7ae7a8ae
2 changed files with 145 additions and 0 deletions
@@ -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;
+    }
+}