SEND all files + questionnaires + json + data_tests

public/codes/all/cibler_has_checked.result

@@ -0,0 +1,153 @@
+#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;
+ }
+
+
+
+
+
+
+
+
+
+
+