#akm-input {
  width: 100%;
  height: 60px;
  font-size: 28px;
  text-align: right;
  direction: rtl;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 10px;
  position: relative;
}
#akm-input::after {
  content: '|';
  position: absolute;
  left: 10px;
  animation: blink 1s step-start infinite;
  color: #000;
}
@keyframes blink {
  50% { opacity: 0; }
}
#akm-copy {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
}
.akm-keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.akm-key {
  flex: 1 1 calc(16% - 8px);
  font-size: 24px;
  padding: 10px 0;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.akm-space {
  flex: 1 1 calc(48% - 8px);
}
.akm-delete {
  flex: 1 1 calc(16% - 8px);
  transform: none; /* ⬅️ retourne le symbole horizontalement */
}
.akm-key:hover {
  background: #6C89B8;
}

/* Effet visuel au clic sur les touches */
.akm-key {
  transition: all 0.1s ease-in-out;
}

.akm-key:active {
  background: #A6A8AC;        /* Couleur plus claire au clic */
  transform: scale(0.95);     /* Légère réduction (effet appui) */
  box-shadow: 0 0 4px #aaa inset;
}

/* Limiter la largeur du clavier et du bouton copier*/

.akm-container {
  max-width: 600px;   /* largeur max du clavier */
  margin: 0 auto;     /* centré horizontalement */
}

#akm-copy {
  max-width: 600px;
  display: block;
  margin: 0 auto 10px auto; /* centré + espace en bas */
}