.monster-wrap {
  position: relative;
  display: inline-block;
  padding-bottom: 50px; /* espace suffisant pour le monstre */
}

.monstre {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -48px; /* caché sous le bouton */
  width: 160px;
  pointer-events: none;
  transition: bottom 260ms cubic-bezier(.2,.9,.2,1);
  z-index: 2;
}

.monstre img {
  width: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Yeux */
.eye {
  position: absolute;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
  z-index: 3;
}

/* Pupilles */
.pupil {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  transform: translate(0, 0);
  transition: transform 70ms linear;
}

/* Position précise des yeux */
#eye1 {
  top: 48px;
  left: 30px;
}

#eye2 {
  top: 47px;
  left: 103px;
}

/* Responsive */
@media (max-width: 420px) {
  .monstre {
    width: 120px;
    bottom: -38px;
  }
  .eye {
    width: 22px;
    height: 22px;
  }
  .pupil {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
  }
  #eye1 {
    top: 26px;
    left: 28px;
  }
  #eye2 {
    top: 26px;
    left: 70px;
  }
}

.btn-primary.btn-large {
  position: relative;
  z-index: 10; /* au-dessus du monstre */
}

@media (max-width: 768px) {
  .monstre {
    display: none !important;
  }
}