#robot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

#robot-head {
  width: 150px;
  height: 130px;

  /* Forme haricot classique */
  border-radius: 70% 70% 55% 55% / 65% 65% 45% 45%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;

  box-shadow: 0 3px 6px rgba(0,0,0,0.3);

  /* Desktop par défaut : opaque */
  background: rgba(17, 17, 17, 1); /* 100% opaque */
}

/* Mobile : 50% de transparence */
@media (max-width: 768px) {
  #robot-head {
    background: rgba(17, 17, 17, 0.5); /* 50% transparent */
  }
}




.eyes {
  display: flex;            /* les yeux côte à côte */
  justify-content: center;  /* centre les yeux horizontalement */
  gap: 12px;                /* espace entre les yeux */
  margin-bottom: 12px;
}

.eye {
  width: 48px;
  height: 58px;
  background: #00e5ff;
  border-radius: 50%;
  transition: height 0.3s ease;
}

/* BOUCHE : stable sous les yeux */
.mouth {
  width: 18px;
  height: 6px;
  background: #00e5ff;
  border-radius: 8px;
  transition: all 0.4s ease;

  /* CORRECTION : on supprime position fixed */
  position: relative;  /* ou rien du tout */
  margin-top: 12px;    /* espace sous les yeux */
}