#world_wrapper {
  /* correction */
  background: url('https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg');
  border: 3px solid blue;
  text-align: center;
  padding: 10px;
  margin: -10px;

}
#foret {
  border: 8px solid green;
  margin-bottom: 30px;
}
#world_wrapper:has(#checkbox:checked) {
  background: #ffa5002b;
}
#world_wrapper:has(.champignon_bleu) {
  background: blue;
}


#champi_img { 
  display:none;
}

#world_wrapper:has(#checkbox:checked) #foret,
#checkbox:checked + #foret,
#foret:has(.champignon_rouge) {
  border: 5px solid red;
}

#foret {
  margin: auto; /* si display==block + width donnée... 
     .... les marges auto à gauche et à droite vont centrer l'élément*/
  width: 600px;
  position: relative;
}
#foret, 
.champignon_rouge {
  background-size: 100% !important;
  height: 410px;
  display: block;
  width: 400px;
  background-position: 0px bottom !important;
  background-repeat: no-repeat !important;
}
#foret {
  /* correction */
  background: url('https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg');
  height: 420px;
  width: 740px;
}
.champignon_rouge {
  width: 400px;
  background: url('https://cdn.futura-sciences.com/buildsv6/images/wide1920/0/e/7/0e77024415_77241_canonique-1358.jpg');
  background-size: 200px auto !important;
  background-position: left bottom !important;
  display: block;
  position: relative;
  /* si l'élément est positionné (relative, fixed, absolute...) */
  /* on peut changer sa position en partant... */
  /* du haut==top bas==bottom gauche==left droite==right */
  /* ... on peut mettre des valeurs négatives/ou/positives */
  bottom: 10px; /* l'élément est déplacé de 10px depuis le bas */
  right: -200px; /* l'élément est déplacé de -100px depuis le droite */
       /* ... ici negatif(soustraction), ici le déplace vers la gauche*/
}
.champignon_rouge.droite {
   position: absolute;
   bottom: 30px;
   right: 100px !important;
   z-index: 99999;
   border: 1px solid red;
   width: 100px !important;
   background: none !important;
   height: 100px !important;
}

#world_wrapper:has(#checkbox:checked) .champignon_rouge {
  background-size: 100px auto !important;;
}
#world_wrapper:has(#checkbox:checked) #foret:hover {
  width: 100vw;
  .champignon_rouge:not(.droite) {
    width: fit-content !important;
    background-size: contain !important;
    height: 40%;
    background-position: center bottom !important;
    left: 230px;
    bottom: 20px;
    border: 3px solid red;
    min-width: 380px;
    position: absolute;
  }
}

#world_wrapper a:active ~ #foret img,
#world_wrapper a:active ~ #foret .champignon_rouge {
  display: none !important;
}


#champi_img {
  position: absolute;
  width: 100px;
  z-index: 999;
  bottom: 0;
  left: 10vw;
}
#champi_img_droite {
  position: absolute;
  width: 100px;
  z-index: 999;
  bottom: 0;
  left: 0px;
  right: auto;
  width: auto;
  height: auto;
  max-height: 100px
}
#checkbox:checked + #foret img {
  display: block;
}
input#checkbox {
  margin: 0 auto !important;
}






/* correction */
#world_wrapper:has(#checkbox:checked) {
  .champignon_rouge {
    left: 400px !important;
  }
}
#world_wrapper:has(#checkbox:checked) #foret:hover {  
  .champignon_rouge:not(.droite) {  
    left: 400px !important;
 }