body {
  font-family: Arial, sans-serif; 
  background: #F5F5DC;            
  display: flex;                  /* active flexbox pour organiser la page */
  justify-content: center;        /* centre le contenu */
  padding-top: 40px;              /* ajoute un espace en haut */
}

.app {
  background: #14253d;
  color: white;                   
  padding: 20px;                  /* espace intérieur autour du jeu */
  border-radius: 10px;            /* arrondit les coins du bloc */
  text-align: center;             /* centre tout le texte */
  width: 350px;                   /* largeur du cadre du jeu */
}

.grid {
  display: grid;                          /* transforme la zone en grille */
  grid-template-columns: repeat(3, 70px); /* crée 3 colonnes */
  gap: 10px;                               /* espace entre les cases */
  margin: 20px auto;                       /* espace autour + centre la grille horizontalement */
}

.grid input {
  width: 70px;             /* largeur de chaque case */
  height: 70px;            /* hauteur de chaque case */
  font-size: 26px;         /* taille du chiffre */
  text-align: center;      /* centre le texte dans la case */
  border-radius: 6px;      /* arrondit les coins des cases */
}

.locked {					/* cases pré-remplies*/
  background: #1b324f;     
  color: white;            
  font-weight: bold;       /* texte plus épais */
}

button {					/* bouton */
  padding: 8px 14px;       
  border-radius: 6px;      
  background: #1b324f;     
  color: white;            
  margin: 5px;             /* espace entre les boutons */
}

#msg {
  margin-top: 12px;        /* espace entre le message et les boutons */
  font-weight: bold;       /* message en gras */
}