/* --- 1. Structure générale --- */
html { zoom: 70%; }

body {
  font-family: 'Quicksand', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0f0f0; /* fond général gris très clair */
  color: #333333;            /* texte gris foncé */
}

/* --- 2. Blocs principaux --- */
.zone {
  width: 100%;
  max-width: 1200px;
  background-color: #f9f9f9;  /* fond des zones : gris très clair */
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  padding: 20px;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

/* Couleurs spécifiques (si tu veux les garder) */
#zone1-titres { background-color: #f5f5f5; }
#zone2-boutons { background-color: #f6f6f6; }
#zone3-analyse { background-color: #f8f8f8; }
#zone4-table  { background-color: #fcfcfc; }

/* --- 3. Messages & analyse --- */
#message,
#resultatAnalyse {
  background-color: #e0e0e0;
  border: 1px solid #bbb;
  border-radius: 10px;
  padding: 10px;
  color: #333;
  text-align: center;
  margin: 10px auto;
  display: block;
  max-width: 800px;
  font-style: italic;
}

/* --- 4. Tableaux --- */
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}

th, td {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 0.85em;
  color: #333;
  background-color: #fff;
}

/* --- 5. Boutons --- */
button {
background: linear-gradient(to bottom, #dce6e8, #9ab9c0);
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #222;
}

button:hover {
  background-color: #bbbbbb;       /* gris un peu plus foncé */
}


/* bouton actif spécial */
.bouton-modele-actif {
  background-color: #dddddd;
  border: 2px solid #888888;
  font-weight: bold;
}

/* --- 6. Alignement des éléments clés --- */
button,
h3,
#message,
#tempoConfig,
#status,
#identiteJoueur,
#messageJeu,
#scorePartie,
#compteurTour,
#resultatAnalyse {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}

/* --- 7. Utilitaires --- */
.masquer {
  visibility: hidden ;
  position: absolute ;
  left: -9999px ;
}

.col:first-child {
  border-left: none;
}
#copieTableAffichage td,
#tableAffichageHoriz td {
  color: #5a7d87;
  font-weight: bold;
}
#tableAffichageHorizImitateur td {
  color: #5a7d87;
  font-weight: bold;
}
/* Arrondi global du tableau */
#copieTableAffichage table,
#tableAffichageHoriz table,
#tableAffichageHorizImitateur table {
  border-collapse: separate;
  border-spacing: 2px;
  border-radius: 12px;
  overflow: hidden;
}

/* Arrondi léger sur chaque cellule */
#copieTableAffichage td,
#tableAffichageHoriz td,
#tableAffichageHorizImitateur td {
  border-radius: 6px;
  padding: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
}
@keyframes defilementFondMessageJeu {
  0% {
    background-position: top;
  }
  100% {
    background-position: bottom;
  }
}

#messageJeu {
  background: linear-gradient(to bottom, #eee8e5, #d8cec8);
  background-size: 100% 200%;
  background-position: top;
  border-radius: 10px;
  padding: 10px;
  animation: defilementFondMessageJeu 6s ease-in-out infinite alternate;
}
input[type="number"] {
  border: 1px solid #bbb;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 1em;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  background-color: #ffffff;
  color: #333;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
  margin: 10px auto;
  display: block;
}

input[type="number"]:focus {
  border-color: #9ab9c0;
  box-shadow: 0 0 3px rgba(154, 185, 192, 0.6);
  outline: none;
}