.pendu{
    display:flex;
    flex-wrap: wrap;
  }
  .pendu-visuel{
    flex: 0 0 auto;
    text-align: center;
    max-height: 16rem;
    margin: 0 auto;
    width: 100%;
  }
  .pendu-visuel svg{
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }

  .pendu .man{
    display:block;
  }
  .pendu *[data-errors]{
    display:none;
  }
  .pendu[data-errors="1"] [data-errors~="1"]{
    display:block;
  }
  .pendu[data-errors="2"] [data-errors~="2"]{
    display:block;
  }
  .pendu[data-errors="3"] [data-errors~="3"]{
    display:block;
  }
  .pendu[data-errors="4"] [data-errors~="4"]{
    display:block;
  }
  .pendu[data-errors="5"] [data-errors~="5"]{
    display:block;
  }
  .pendu[data-errors="6"] [data-errors~="6"]{
    display:block;
  }
  .pendu[data-errors="7"] [data-errors~="7"]{
    display:block;
  }
  .pendu[data-errors="8"] [data-errors~="8"]{
    display:block;
  }
  .pendu[data-errors="9"] [data-errors~="9"]{
    display:block;
  }
  .pendu[data-errors="10"] [data-errors~="10"]{
    display:block;
  }
  .pendu[data-success="1"] *[data-errors]{
    display:none;
  }

  .pendu[data-errors="10"] .pendu-clavier, .pendu[data-success="1"] .pendu-clavier{
    display:none;
  }
  .pendu-lostmessage, .pendu-winmessage{
    display:none;
    font-size: 4rem;
    text-align: center;
    margin-bottom:2rem;
  }
  .pendu-lostmessage{
    color: #901f1f;
  }
  .pendu-winmessage{
    color: #0f8400;
  }
  .pendu[data-errors="10"] .pendu-lostmessage{
    display:block;
  }
  .pendu[data-success="1"] .pendu-winmessage{
    display:block;
  }

  .pendu-newgamecont{
    display:none;
    text-align: center;
  }
  .pendu[data-errors="10"] .pendu-newgamecont, .pendu[data-success="1"] .pendu-newgamecont{
    display:block;
  }

  .pendu[data-errors="10"] .man{
    animation: bouaaa 1s infinite;
  }
  @keyframes bouaaa {
    0% {
      transform: rotate(0) translateY(0) translateX(0);
    }
    30% {
      transform: rotate(-15deg ) translateY(13px) translateX(-18px);
    }
    50% {
      transform: rotate(0) translateY(0) translateX(0);
    }
    70% {
      transform: rotate(15deg) translateY(-22px) translateX(13px);
    }
    90% {
      transform: rotate(0) translateY(0) translateX(0);
    }
  }

  .pendu .happy{
    display:none;
  }
  .pendu[data-success="1"] .happy{
    display:block;
    animation: yippee 0.5s infinite;
    animation-direction: alternate;
  }
  @keyframes yippee {
    0% {
      transform: translate(0,0);
    }
    100% {
      transform: translate(0px, -28px);/*first value is x, second is y*/
    }
  }

  .pendu-game{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: center;
  }

  .pendu-question{
    font-size: 1.5rem;
    display: block;
    margin-bottom:1rem;
  }
  .pendu-answer{
    display: flex;
    flex: 0 0 auto;
    margin-bottom: 1rem;
    align-self: center;
  }
  .pendu-case, .pendu-spacecase{
    background: #fff;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    line-height: 1.6rem;
    width: 1.3rem;
    font-size: 1.3rem;
    padding: 0 0.1rem;
    margin: 0 0.2rem 0.2rem 0;
  }
  .pendu-case{
    text-indent: -500vw;
    border-bottom: 3px solid #000;
  }
  .pendu-case.show{
    text-indent: inherit;
  }
  .pendu-clavier{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    background-color: #ececec;
    padding-1: 0.5rem 0 0.3rem 0.5rem;
    align-items: center;
    justify-content: space-around;

  }
  .pendu-touche{
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid #b5b5b5;
    border-radius: 5px;
    box-shadow: 0 0 3px -1px rgba(0,0,0,.3);
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    height: 2.5rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
    width: 2.5rem;
    padding: 0.2rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .pendu-touche.disabled{
    background-color: #eee;
    color: #ccc;
  }
  @media( min-width: 768px ){
    .pendu-visuel{
      width:40%;
      max-height:unset;
      margin: 0 auto;
    }
    .pendu-visuel svg{
      max-width: 100%;
      max-height: 24rem;
    }
    .pendu-game{
      width:60%;
    }
  }