body {
    background-color: #e9fe01;       /* une couleur de fond proche, en secours */
}

h1{
  color: rgb(217, 0, 119);
  margin-left: 40px;
  margin-top: 40px;
  margin-bottom: 40px;
}
h2{
  color: rgb(255, 23, 201);
  margin-bottom: 80px;
  margin-left: 80px;
}



#objets01,
#objets02,
#objets03 {
  display: flex;
  justify-content: center; /* centre horizontalement */
  gap: 10px; /* espace entre les images, optionnel */
  height: 28vh;
}


/* Bordures */

.cadre-container {
  position: relative;
  display: block; /* mieux que inline-block ici */
  width: fit-content; /* ou une largeur fixe comme 800px */
  margin-left: auto;
  margin-right: auto;
}


.cadre-top,
.cadre-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url('../02_photos_ok/taupiqueur01.png');
  background-repeat: repeat-x;
  background-size: contain;
  z-index: 2;
}

.cadre-top {
  top: 0;
  transform: translateY(-100%);
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url('../02_photos_ok/taupiqueur01.png');
  background-repeat: repeat-x;
  background-size: contain;
  animation: scroll-x 3s linear infinite;;
}

.cadre-bottom {
  bottom: 0;
  transform: translateY(100%);
  position: absolute;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url('../02_photos_ok/taupiqueur01.png');
  background-repeat: repeat-x;
  background-size: contain;
  animation: scroll-x 3s linear infinite reverse; /* dans l'autre sens */
}

.cadre-left,
.cadre-right {
  position: absolute;
  top: 0;
  height: 100%;
  width: 30px;
  background-image: url('../02_photos_ok/taupiqueur01.png');
  background-repeat: repeat-y;
  background-size: contain;
  z-index: 2;
  animation: scroll-y 3s linear infinite;
}

.cadre-left {
  left: 0;
  transform: translateX(-100%);
}

.cadre-right {
  right: 0;
  transform: translateX(100%);
  animation-direction: reverse; /* pour inverser le sens */
}



@keyframes scroll-x {
  0%   { background-position: 0 0; }
  100% { background-position: 100% 0; }
}

@keyframes scroll-y {
  0%   { background-position: 0 100%; }
  100% { background-position: 0 0; }
}


#score-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 150px; /* ajuste selon ton image */
  height: 80px;
  z-index: 1000;
}

#score-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#score-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 2px 2px 5px black;
}


#life-counter .vie {
  width: 50px;
  height: auto;
}