body {
    background-color: #ff009d;       
}

#pieces {
  position: relative; 
  width: 90%;
  max-width: 100%;
  margin: 10px auto;             
  height: auto;
  display: flex;
  justify-content: flex-start;       /* centre horizontalement */
  align-items: flex-start;           /* centre verticalement */
  overflow: hidden;
}

/* image principale : s'adapte au conteneur */
#entree {
  display: block;
  width: 100%;                   /* occupe toute la largeur du viewer soit pieces */
  height: auto;                  
  object-fit: cover;           
  object-position: 50% 30%;
}

.bouton-overlay {
  position: relative;
  width: 80px;
  height: auto;
  cursor: pointer;
  z-index: 20;
  transition: transform .12s, opacity .12s;
  opacity: 0.95;
}
.bouton-overlay:hover {
  transform: scale(1.06);
  opacity: 1;
}




#pieces.tall #pieces {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* l'image remplit la fenêtre */
  object-position: 50% 30%;          /* changez ici le focus, ex: 40% 30% */
}


.personnage-overlay {   /* c'est moi qui dit bonjour */
  position: absolute;
  width: 400px;   /* taille du perso */
  bottom: 0%;    /* distance du bas */
  left: 10%;      /* distance de la gauche */
  z-index: 15;    /* au-dessus du fond, en-dessous des boutons */
}