:root{
  --taille : min(20vh,20vw);
}

.wrapper {
  display: grid;
  margin : auto;
  margin-top : calc(50vh - calc(var(--taille) * 1.6));
  margin-bottom : calc(var(--taille) * 0.1);
  width : calc(calc(3 * var(--taille)) + 18px);
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  padding : calc(var(--taille) /10);
  border : black solid 1px;
  background-color : grey;
}

.slot, #jouer{
  border : grey solid 1px;
  border-top-color : white;
  border-left-color : white;
  background-color : lightgrey;
  text-align : center;
  user-select: none;
}

.slot:hover, #jouer:hover {
  background-color : #DDDDDD;
}
.slot:active, #jouer:active {
  background-color : grey;
}

.slot{
  min-height : var(--taille);
  min-width : var(--taille);
  font-size : calc(var(--taille) * 0.666);
}

#jouer{
  margin : auto;
  width : calc(var(--taille) * 2);
  border-radius : calc(var(--taille) * 0.1);
  font-size : calc(var(--taille) * 0.333);
}

.decouvre {
  border-color : grey;
  background-color : silver;
}

.decouvre:hover {
  background-color : #CCCCCC
}