body           { background-color: darkolivegreen; color: white; font-size: 130%}
input          { height: 30px; width: 300px; font-size: 120%; }
.boutonLance   { background-color: grey; border: 3px solid white; color: white; padding: 5px 5px; text-align: center; font-size: 100%; }
.tdDroite      { text-align: right; }

.carteGrise    { cursor: pointer; color: black;  border: 5px solid black; height: 130px; width: 70px; text-align:center;font-size: 300%; background-color: darkgray;}
.carteViolette { cursor: pointer; color: black;  border: 5px solid black; height: 130px; width: 70px; text-align:center;font-size: 300%; background-color: rgb(248, 137, 202);}
.carteBleue    { cursor: pointer; color: black;  border: 5px solid black; height: 130px; width: 70px; text-align:center;font-size: 300%; background-color: rgb(186, 186, 248);}
.carteVerte    { cursor: pointer; color: black;  border: 5px solid black; height: 130px; width: 70px; text-align:center;font-size: 300%; background-color: rgb(111, 243, 111);}
.carteJaune    { cursor: pointer; color: black;  border: 5px solid black; height: 130px; width: 70px; text-align:center;font-size: 300%; background-color: rgb(241, 241, 84);}
.carteRouge    { cursor: pointer; color: black;  border: 5px solid black; height: 130px; width: 70px; text-align:center;font-size: 300%; background-color: rgb(243, 72, 72);}
.carteInvisible    { color: black;  height: 130px; width: 70px; border: 5px solid darkolivegreen; ; background-color: darkolivegreen; }
.carteInvisibleGreen    { color: black;  height: 130px; width: 70px; background-color: teal; }

.carteChoisie  { color: black;  border: 5px solid yellow; height: 130px; width: 70px; text-align:center;font-size: 300%; background-color: rgb(90, 82, 209);}

.texteVert     { text-align:left;   font-size: 120%; color: rgb(178, 238, 178);}
.texteRouge    { text-align:left;   font-size: 120%; color: rgb(230, 181, 181);}

.fondTDgris    { background-color: darkgray}


/* CODE ANIMATION

  .animationCarteApparait {
    width: 50px;
    height: 50px;
    background-color:  white;
    position: relative;
    animation-name: aniApparait;
    animation-duration: 1s;
    animation-play-state: paused;
    animation-iteration-count: 1;
  }

  .animationCarteDisparait {
    width: 50px;
    height: 50px;
    background-color:darkolivegreen;
    position: relative;
    animation-name: aniDisparait;
    animation-duration: 1s;
    animation-play-state: paused;
    animation-iteration-count: 1;
  }

    @keyframes aniDisparait {
    0% {
      background-color: white;
      left: 0px;
      top: 0px;
    }
    100% {
      background-color: darkolivegreen;
      left: 0px;
      top: 0px;
    }
  }

  @keyframes aniApparait {
    0% {
      background-color: darkolivegreen;
      left: 0px;
      top: 0px;
    }
    100% {
      background-color: white;
      left: 0px;
      top: 0px;
    }
  }
  
*/