html, body {
  margin: 0;
  padding: 0;
}

body {
  /* Image de fond */
  background-image: url('img/poetryBG.jpg'); /* Mets le chemin de ton image ici */
  background-repeat: no-repeat;
  background-size: 100% auto; /* 100% de largeur, hauteur auto pour garder les proportions */
  background-position: top center; /* Image alignée en haut et centrée horizontalement */
  background-attachment: scroll; /* L’image défile avec le contenu */
  overflow-x: hidden;
}

/* Exemple de contenu pour scroller */
.content {
  height: calc(1.5*99vw); /* Ajuste selon la longueur de ton image ou ton contenu */
}

#floating-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(1.5*99vw);
  pointer-events: none; /* Permet aux clics/hover de passer au contenu en dessous */
  overflow: hidden;
}

.poem-bloc {
  pointer-events: auto; /* Réactive l’interaction sur les blocs */
}

.poem-bloc {
  overflow: hidden;
  position: absolute;
  padding: 10px;
  cursor: pointer;
  transition: none;
}

.poem-bloc h2{
  padding: 10px;
  text-decoration: underline;
  font-weight: bold;
}

.poem {
  padding: 10px;
}

#Ange {
  width: 338px;
  background-image: url('img/Ange.png');
}

#Ange .poem {
  background-color: #fffee6;
}

#ChantDuCygne {
  width: 200px;
  background-image: url('img/Cygne.jpg');  
  background-size: 800px auto;
  background-position: center;
}

#ChantDuCygne .poem {
  background-color: #433;
  color: whitesmoke;
}

#Horizon {
  width: 350px;
  background-image: url('img/horizon.gif');
  color: whitesmoke;
  background-size: cover;
}

#Horizon .poem {
  background-color:rgba(35, 35, 56, 0.5);
}

#Djazzy {
  width: 260px;
  background-image: url('img/djz.jpg');
  color: whitesmoke;
  background-size: cover;
}

#Djazzy .poem {
  background-color:rgba(33, 33, 33, 0.5);
}

#ClairObscur{
  width: 400px;
  background-image: url('img/ClairObscur.JPG');
  color: whitesmoke;
  background-size: cover;
  background-position: center;
}

#Inavoue {
  width: 250px;
  background-image: url('img/Inavoue.jpg');
  color: whitesmoke;
  background-size: cover;
  background-position: center;
}

#Inavoue .poem {
  background-color:rgba(17, 36, 97, 0.5);
}