/* paramètrages du clavier en général */
.partie-keyboard {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  padding: 9.6px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.35);
  width: 661.2px;
  border-radius: 7.2px;
  -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.3);
}
  /* paramètres des lignes */
.kb-row {
  margin-bottom: 8.4px;
  font-size: 0;
  width: 642px;
}
.kb-row:last-child {
  margin-bottom: 0;
}
  /* paramètrages des touches du clavier */
.k {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 36px;
  margin-right: 8.4px;
  border-radius: 3.6px;
  background-color: rgba(15, 15, 15, 1.0);
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 0 1px rgb(255, 255, 255);
}
  /* ombre quand on clique */
.k.active {
  box-shadow: 0 0 0 1px rgb(255, 255, 255);
}
  /* ombre sur la touche entrée bas*/
.k.k-returnb.active {
  box-shadow: 1px 0 rgb(255, 255, 255);
}


.k:last-child {
  margin-right: 0;
  float: right;
}
.k:before {
  content: attr(pre) "\a" attr(suf);
  white-space: pre;
  text-align: center;
  position: absolute;
  font-size: 12px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.k.k-txt:before {
  font-size: 8px;
  text-transform: none;
}
.k.k-caps:after {
  content: attr(pre) "\a";
  top: 4.2px;
  font-size: 12px;
}
.k.k-caps.active:after {
  color: #2ecc71;
  text-shadow: 0 0 4px #7ee2a8;
}
.k.k-caps:before {
  content: "\a" attr(suf);
  bottom: 4.2px;
}
.k.k-caps:before, .k.k-caps:after {
  white-space: pre;
  position: absolute;
  font-size: 8px;
  text-align: left;
  width: 80%;
  left: 4.2px;
  top: auto;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.k.k-uarr, .k.k-darr {
  height: 18px;
  line-height: 18px;
}
.k.k-arr-udarr {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 8.4px;
  background-color: transparent;
}
.k.k-arr-udarr, .k.k-arr-udarr.active {
  box-shadow: none;
}
.k.k-arr-udarr .k {
  display: block;
  margin: 0 0 1px;
}
.k.k-arr-udarr .k:first-child {
  border-radius: 3.6px 3.6px 0 0;
}
.k.k-arr-udarr .k:last-child {
  margin-bottom: 0;
  border-radius: 0 0 3.6px 3.6px;
}


/* changement de largeurs pour certains touches */
.k.k-lcmnd, .k.k-rcmnd {
  width: 48px;
}
.k.k-del {
  width: 64px;
}
.k.k-tab {
  width: 60px;
}
.k.k-caps {
  width: 72px;
}
.k.k-returnt {
  width: 40px;
  text-align: right;
}
.k.k-returnt::before {
  top: 55%;
  left: 70%;
}
.k.k-returnb {
  margin-top: -11px;
  height: 47px;
  width: 28px;
  border-top-right-radius: 0;
}
.k.k-lshift {
  width: 51.6px;
}
.k.k-rshift {
  width: 93.6px;
}
.k.k-space {
  width: 218.4px;
}



/* touches suppr droite, retour, maj gauche, option droite, command gauche*/
.k.k-del:before, .k.k-rshift:before, .k.k-ropt:before, .k.k-lcmnd:before {
  text-align: right;
  left: auto;
  right: 4.2px;
  top: auto;
  bottom: 4.2px;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
/* touches command droite, option gauche, control, maj gauche, capslock, tab, fn */
.k.k-rcmnd:before, .k.k-lopt:before, .k.k-ctrl:before, .k.k-lshift:before, .k.k-caps:before, .k.k-tab:before, .k.k-func:before {
  text-align: left;
  width: 80%;
  left: 4.2px;
  top: auto;
  bottom: 4.2px;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
/* flèches gauche et bas réorientées */
.k.k-uarr:before, .k.k-larr:before {
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
/* lettres centrées */
.k-a::before, .k-z::before, .k-e::before, .k-r::before, .k-t::before, .k-y::before, .k-u::before, .k-i::before, .k-o::before, .k-p::before, .k-q::before, .k-s::before, .k-d::before, .k-f::before, .k-g::before, .k-h::before, .k-j::before, .k-k::before, .k-l::before, .k-m::before, .k-w::before, .k-x::before, .k-c::before, .k-v::before, .k-b::before, .k-n::before {
  white-space: normal;
}