SEND all files + questionnaires + json + data_tests

public/codes/all/cibler_adjascent_avance.css

@@ -0,0 +1,105 @@
+#cibler_adjascent_avance {
+  min-height: 300px;
+
+  img {
+    height: 300px;
+    position: absolute;
+    z-index: 2;
+  }
+
+  .go_button ~ .default_invisible {
+    opacity: 0;
+    visibility: hidden;
+    img {
+      border: 4px solid pink;
+   }
+  }
+
+  div#last_trigger {
+    transition: none;
+  }
+
+  /* TOUT .default_invisible Au meme niveau (meme parent) 
+  ... que .go_button sera affecté (quand .go_button:hover) */
+  .go_button:hover ~ .default_invisible {
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    img {
+      border: 4px solid blue;
+   }
+  }
+
+  .go_button + div#content_trigger {
+    right: 500px;
+    z-index: 2;
+  }
+
+  /* 2 == #second_trigger */
+  .go_button + div 
+    + div#second_trigger { 
+    right: 300px;
+    z-index: 3;
+  }
+
+  /* 3 == #last_trigger */
+  .go_button:hover + div + div 
+    + div#last_trigger { 
+    right: 730px;
+    margin-right: 350px;
+    transition: margin 1s ease 0s, 
+                opacity 0s ease 0.1s;
+  }
+  .go_button ~ .default_invisible > .sub_child {
+    position: relative;
+    right: -300px !important;
+    opacity: 0;
+    transition: all 5s ease 0.1s;
+  }
+  .go_button:hover ~ .default_invisible > .sub_child {
+    visibility: visible;
+    right: 0 !important;
+    opacity: 1;
+    transition: all 1s ease 0.1s,
+      right 2s ease-out 0s;
+    z-index: 1;
+  }
+
+
+  .go_button:hover + div + div 
+    + div#last_trigger img {
+    outline: 3px solid red;
+  }
+  .go_button:hover + div + div 
+    + div#last_trigger > span >  img[src*="_alt"] {
+    outline: 4px solid yellow;
+  }
+  img[alt="cat_3"] {
+    right: 50px;
+  }
+
+  .go_button:hover + div + div 
+    + div#last_trigger img[src*="_alt"],
+  .go_button:hover + div + div
+    + div#last_trigger > span > img {
+      position: absolute;
+      transform: rotateY(180deg);
+  }
+
+  .go_button + div + div 
+  + div#last_trigger 
+  + #trigger_oublie {
+    left: 500px;
+    bottom: 0;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+
+    img {
+      position: relative;
+      z-index: 0;
+      outline: 3px solid yellow;
+      height: 300px;
+    }
+  }
+}

public/codes/all/cibler_adjascent_avance.page

@@ -0,0 +1,37 @@
+<div id="cibler_adjascent_avance">
+  <div class="go_button">
+    Go
+  </div>
+
+  <div id="content_trigger" class="default_invisible">
+    <img 
+       src="./img/cibler_adjascent_avance.jpg" 
+       alt="cat_1" />
+  </div>
+  
+  <div id="second_trigger" class="default_invisible">
+    <img 
+       src="./img/cibler_adjascent_avance_second.png" 
+       alt="cat_2" />
+  </div>
+  
+  <div id="last_trigger" class="default_invisible">
+    <img 
+       src="./img/cibler_adjascent_avance_last.jpg" 
+       alt="cat_3" />
+    
+    <span class="sub_child default_invisible">
+      <img 
+         src="./img/cibler_adjascent_avance_last_alt.jpg" 
+         alt="cat_4" />
+    </span>
+  </div>
+  
+  <div id="trigger_oublie" class="default_invisible">
+      <img 
+         src="./img/cibler_adjascent_avance_last_oublie.jpg" 
+         alt="cat_5" />
+  </div>
+
+
+</div>

public/codes/all/cibler_adjascent_avance.result

@@ -0,0 +1,109 @@
+#cibler_adjascent_avance {
+  min-height: 400px;
+
+  img {
+    height: 400px;
+    position: absolute;
+    z-index: 2;
+  }
+
+  .go_button ~ .default_invisible {
+    opacity: 0;
+    visibility: hidden;
+    img {
+      border: 4px solid pink;
+   }
+  }
+
+  div#last_trigger {
+    transition: none;
+  }
+
+  /* TOUT .default_invisible Au meme niveau (meme parent) 
+  ... que .go_button sera affecté (quand .go_button:hover) */
+  .go_button:hover ~ .default_invisible {
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    img {
+      border: 4px solid blue;
+   }
+  }
+
+  .go_button + div#content_trigger {
+    right: 500px;
+    z-index: 2;
+  }
+
+  /* 2 == #second_trigger */
+  .go_button + div 
+    + div#second_trigger { 
+    right: 300px;
+    z-index: 3;
+  }
+
+  /* 3 == #last_trigger */
+  .go_button:hover + div + div 
+    + div#last_trigger { 
+    right: 730px;
+    margin-right: 350px;
+    transition: margin 1s ease 0s, 
+                opacity 0s ease 0.1s;
+  }
+  .go_button ~ .default_invisible > .sub_child {
+    position: relative;
+    right: -300px !important;
+    opacity: 0;
+    transition: all 5s ease 0.1s;
+  }
+  .go_button:hover ~ .default_invisible > .sub_child {
+    visibility: visible;
+    right: 0 !important;
+    opacity: 1;
+    transition: all 1s ease 0.1s,
+      right 2s ease-out 0s;
+    z-index: 1;
+  }
+
+  /* correction */
+  .go_button:hover ~ div#last_trigger img {
+    outline: 3px solid red;
+  }
+  .go_button:hover
+    ~ div#last_trigger > span >  img[src*="_alt"] {
+    outline: 4px solid yellow;
+  }
+  img[alt="cat_3"] {
+    right: 50px;
+  }
+
+  /* correction */
+  .go_button:hover ~ div#last_trigger img[src*="_alt"],
+  .go_button:hover ~ div#last_trigger > span > img {
+      position: absolute;
+      transform: rotateY(180deg);
+  }
+
+  .go_button ~ div#last_trigger 
+  + #trigger_oublie {
+    left: 500px;
+    bottom: 0;
+    opacity: 1;
+    visibility: hidden; /* correction */
+    position: absolute;
+
+    img {
+      position: relative;
+      z-index: 0;
+      outline: 3px solid yellow;
+      height: 300px;
+    }
+  }
+
+  /* correction */
+  .go_button:hover + div + div 
+  + div#last_trigger 
+  + #trigger_oublie {
+    visibility: visible;
+  }
+}

public/codes/all/cibler_adjascent_avance.txt

@@ -0,0 +1,24 @@
+Cibler l'élément suivant : 
+- <codescape class="css">element + autre_element.classe { ... }</codescape>
+Cibler les éléments suivants (meme parent) :
+- <codescape class="css">element ~ autres_elements.distants { ... }</codescape>
+Cibler un élément à l'intérieur de :
+- <codescape class="css">element > .enfant_direct { ... }</codescape>
+
+<codescape class="css">:hover</codescape> permet de trigger quand la souris passe sur un élément
+<codescape class="css">:active, :focus, :checked, :has, :is, :not</codescape>
+( ... il y a d'autres pseudo-classes... question suivante )
+
+On peut cumuler...
+- <codescape class="css">element:hover + autre_element { ... }</codescape>
+( va cibler <em>autre_element</em> si souris :hover <em>element</em> ) 
+
+TODO:
+- Actuellement <codescape class="css">#trigger_oublie</codescape> s'affiche par defaut (au chargement)
+: modifier pour qu'il aparaisse au survol de <codescape class="css">.go_button</codescape>
++ changer le <codescape class="css">z-index pour</codescape> que <em>cibler_adjascent_avance_last_oublie.jpg</em> passe au dessus ( z-index )
+- simplifier le code ( <codescape class="css">/* remplacer */ el... + el... + el... /* par */ el... ~ el... </codescape> )
+
+HELP, selectionner un élement et garder son état en mod "survol" (:hover)...
+( il resetera dans l'état :hover, comme si votre souris était en train de le survoler )
+<img src="/img/CSShover_devtool_state.png" />

public/codes/all/cibler_css_id_class_menu.css

@@ -0,0 +1,91 @@
+#cibler_css_id_class_el {
+  nav#top_menu, nav#vertical_menu {
+    border: 1px solid;
+  }
+
+
+  #top_menu {
+    width: fit-content;
+    float: right;
+    padding-left: 30px;
+    padding-right: 16px;
+  }  
+  
+  #top_menu .menu_liste {
+    padding-left: 0;
+    text-align: right;
+    padding-right: 10px;
+  }
+  #vertical_menu .menu_liste {
+    margin: 0 30px 0 0px;
+    padding-left: 0;
+    padding-bottom: 60px;
+  }
+
+  .menu_item {
+    display: inline-block;
+    list-style: none;
+    padding: 10px;
+    border: 1px solid;
+    position: relative;
+    vertical-align: top;
+  }
+
+  a[data-type] {
+    background: yellow;
+  }
+  li:hover {
+    background: #000 !important;
+    color: #FFF !important;
+  }
+
+  .menu_item .submenu { 
+    display: none;
+    position: absolute;
+    z-index: 1;
+    /* width: fit-content; */
+    width: max-content;
+    border: 1px solid;
+    padding: 3px 20px 10px 15px;
+    margin: 8px 0 0 -10px;
+    background: #000 !important;
+    color: #FFF !important;
+    text-align: left;
+    list-style: none;
+  }
+  .menu_item:hover .submenu {
+      display: block;
+  }
+
+  .menu_item .submenu .submenu_item { 
+    color: #FFF;
+    background: #000 !important;
+    border: 1px solid #000;
+    padding-top: 5px;
+    padding-bottom: 3px;
+  }
+  .menu_item .submenu .submenu_item:hover { 
+    filter: invert(1);
+    margin-left: -15px;
+    margin-right: -23px;
+    padding-left: 13px;
+    border-color: #FFF !important;
+  }
+
+
+
+  #vertical_menu {
+    width: fit-content;
+    float: left;
+  }
+  #vertical_menu li.menu_item {
+    display: block;
+    width: max-content;
+    padding: 9px 10px;
+  }
+  #vertical_menu .submenu {
+    margin-top: -35px !important;
+    margin-left: 80px !important;
+  }
+
+}

public/codes/all/cibler_css_id_class_menu.page

@@ -0,0 +1,59 @@
+<div id="cibler_css_id_class_el">
+  <nav id="top_menu">
+    <ul class="menu_liste">
+      <li class="menu_item" data-num="0">menu 0</li>
+      <li class="menu_item" data-num="1">menu 1</li>
+      <li class="menu_item" data-num="2">menu 2</li>
+      
+      <li class="menu_item" data-num="3" data-sub="oui">
+          <a id="menu_3">menu 3</a>
+          <ul class="submenu">
+            <li class="submenu_item" data-num="1">sous-menu 1</li>
+            <li class="submenu_item" data-num="2">sous-menu 2</li>
+            <li class="submenu_item" data-num="3">sous-menu 3</li>
+            <li class="submenu_item" data-num="4">sous-menu 4</li>
+        </ul>
+      </li>
+
+      <li class="menu_item">
+        <a href='#' target='_blank' data-type='demo'>menu 4</a>
+      </li>
+    </ul>
+  </nav>
+
+  <nav id="vertical_menu">
+    
+    <ul class="menu_liste">
+      <li class="menu_item" data-num="0">menu 0</li>
+      <li class="menu_item" data-num="1">menu 1</li>
+      <li class="menu_item" data-num="2">menu 2</li>
+      <li class="menu_item" data-num="3" data-sub="oui">
+          <a id="menu_3">menu 3</a>
+          <ul class="submenu">
+            <li class="submenu_item" data-type="files img">
+               images
+            </li>
+            <li class="submenu_item" data-type="files draw">
+               dessins
+            </li>
+            <li class="submenu_item" data-type="files txt">
+               textes
+            </li>
+            <li class="submenu_item" data-type="files ref">
+               references
+            </li>
+        </ul>
+      </li>
+      <li class="menu_item">
+        <a href='https://code.bonnebulle.xyz' target='_blank' data-type='demo'>menu 4</a>
+      </li>
+    </ul>
+  </nav>
+
+<section>
+  <article>
+    Aliquip excepteur et ad aute magna eu nulla in ut id excepteur tempor elit. Aliquip pariatur cupidatat do. Eiusmod voluptate irure fugiat aliquip eiusmod laborum quis veniam in irure id anim nisi. Ex adipisicing sint quis nisi quis ipsum fugiat. Excepteur consectetur sit irure ad occaecat duis. Incididunt ipsum non amet amet tempor fugiat magna sint ad. Eu consectetur nostrud sit quis officia aliqua consequat eiusmod officia occaecat elit sint labore do. Ullamco dolor consectetur aliquip pariatur reprehenderit incididunt esse.
+  </article>
+</section>
+
+</div>

public/codes/all/cibler_css_id_class_menu.result

@@ -0,0 +1,6 @@
+<pre><code class="line-numbers show-language nohelp_result language-css">
+#top_menu .submenu_item[data-num="4"],
+#vertical_menu [data-type="files draw"] {
+  background: red !important;
+}
+</code></pre>

public/codes/all/cibler_css_id_class_menu.txt

@@ -0,0 +1,41 @@
+Element : 
+div a { ... } /* CSS cible a présent dans une div */
+
+<pre>
+  <code class="line-numbers show-language nohelp_result language-markup">
+    <div>
+      <a href='http:...' target='_blank' data-type='demo'>lien</a>
+    </div>
+    <a href='http:...'>lien</a> <!-- non ciblé/affecté, hors de div -->
+  </code>
+</pre>
+
+Attribut : 
+'href', 'target', 'data-type' (dans l'element a)...
+<codescape class="css">a[href] { ... } /* element a avec attribut href */</codescape>
+<codescape class="css">a[href$=".html"] { ... } /* attribut href fini par... */</codescape>
+<codescape class="css">a[href^="https"] { ... } /* attribut href commence par... */</codescape>
+<codescape class="css">a[href*="fichier_final"] { ... } /* attribut href contient... */</codescape>
+
+Id : 
+<codescape class="css">
+  #top_menu { .... }
+</codescape>
+<codescape class="html">
+  <nav id="top_menu">
+</codescape>
+
+Classe : 
+<codescape class="css">
+  .menu_item { .... }
+</codescape>
+<codescape class="html">
+  <li class="menu_item">menu 1</li>
+</codescape>
+
+TODO : 
+Cibler le 4e sous-menu dans #top_menu
+Faire de même dans le menu de gauche, mais cette fois, cibler le 2e sous-menu
+... forcer leur couleur de fond (background) dans une couleur de votre choix...
+... Utiliser !important si nécesaire
+

public/codes/all/cibler_css_margin_transition.css

@@ -0,0 +1,49 @@
+/* Ici on peut attitrer des valeurs à des variables */
+/* on peut utiliser ces variables plusieures fois dans le CSS */
+/* Ici on va assigner cette variable à tous les éléments */
+/* normalement on utilise plutôt :root */
+* {
+    --element_width: 200px !important;
+}
+#mousehover_movemargin_element {
+  width: var(--element_width);
+  height: 200px;
+  padding: 20px;
+  text-align: center;
+  display: block; 
+  background: red;
+  color: #FFF;
+}
+#mousehover_movemargin:hover #mousehover_movemargin_element {
+  background:yellow;
+  color: #000;
+  
+  /* 
+  calc permet de calculer 
+  (adition +, soustraction -, multiplication *, ....
+  Ici on veut que la marge à gauche soit de :
+  100%
+  -130px
+  -70px ( == 200px )
+  ( la largeur "width" de #mousehover_movemargin_element )
+  */
+  margin-left: calc(100% - 130px - 70px);
+  /* On peut faire plus simple en utiisant la variable */
+  /* Ainsi, si on la modifie, dans * ...
+  ... la largeur de #mousehover_movemargin_element 
+  ... ainsi que la marge-left ici...
+  ..... vont être affectées
+  Si je veux changer la lageure+margin-left ici
+  ... je n'ai plus qu'à changer --element_width dans * !!!
+  */
+  margin-left: calc(100% - var(--element_width));  /* 100% - 200px */
+
+
+  /* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
+  /* all pour affecter toutes les propriétés CSS */
+  /* transition: all 1s; */
+  transition: 
+    margin-left 5s ease-in-out 0s,
+    color 2s ease-in-out 0s;
+  cursor: pointer;
+}

public/codes/all/cibler_css_margin_transition.page

@@ -0,0 +1,6 @@
+<div class="bouge_de_la">
+  <div id="mousehover_movemargin">
+    <div id="mousehover_movemargin_element">Youhouuuuu</div>
+  </div>  
+</div>
+<!-- https://code.bonnebulle.xyz/__html_css_js/public/0_intro.html#margin_move_transition -->

public/codes/all/cibler_css_margin_transition.txt

@@ -0,0 +1,9 @@
+Ici, on ajoute une <codescape class="language-css">transition</codescape> !
+Elle va s'activer au survol de <code>#mousehover_movemargin</code> (:hover)
+Modifier : 
+- la durée de la transition
+- la délais de la transition
+- la marge appliquée au survol (<codescape class="language-css">margin-left</codescape>) == 300px
+- la transition au survol affecte toutes les propriétés à la fois...
+Changer :
+- la valeure de <codescape class="language-css">--element_width</codescape>

public/codes/all/cibler_css_multiples_vs_is.css

@@ -0,0 +1,30 @@
+* {
+  color: red
+}
+p {
+  color: green;
+}
+#alt_saison,
+#popoesie u#soleils {
+  display: none;
+}
+/* cibler li + tout les éléments qui sont dedans*/
+li.poem,
+li.poem * {
+  color:#000;
+}
+/* cibler u et i */
+li.poem u,
+li.poem i {
+  color: rgb(15, 126, 82);
+}
+/* avec la condition :is on cible <u> ou <i> présent dans li.poem
+... pratique, on fait une pierre deux coups ! */
+li.poem *:is(u,i) {
+  color: rgb(81, 39, 247);
+  padding: 3px 8px 3px 5px;
+  border: 1px solid #000;
+}
+
+#popoesie * { background: cyan; }
+#popoesie *:hover { background: yellow; }

public/codes/all/cibler_css_multiples_vs_is.page

@@ -0,0 +1,18 @@
+<html>
+   <p>Un peu de bleu</p>
+   
+   <a href="#">lien hors sujet</a>
+
+   <p id="saisons">
+      c'est le ciel <span>d'été</span>
+      <span id="alt_saison">d'automne</span> !
+   </p>
+
+   <ul id="popoesie">
+      <li class="poem">des <span><u>nuages</u> rouges</span></li>
+      <li class="poem">des <span>mains <i>tombées</i></span></li>
+      <li class="poem last">des <span>chiens froids</span> 
+           <u id="soleils">soleils bleus</u>
+      </li>
+   </ul>
+</html>

public/codes/all/cibler_css_multiples_vs_is.result

@@ -0,0 +1,49 @@
+<pre>
+<code class="line-numbers show-language nohelp_result language-css">
+* {
+  color: red;
+}
+p {
+  color: green;
+}
+
+#alt_saison,
+#popoesie u#soleils {
+  display: none;
+}
+li.poem,
+li.poem * {
+  color:#000;
+}
+li.poem *:is(u,i) {
+  color: rgb(15, 126, 82);
+}
+/* extra */
+#popoesie * { background: cyan; }
+#popoesie *:hover { background: yellow; }
+
+/* CORRECTIONS */
+a,
+#saisons span {
+  display: none;
+}
+#saisons span#alt_saison {
+  display: inline-block;
+  color: blue;
+}
+li.poem.last span {
+  display: none;
+}
+#popoesie u#soleils {
+  display: inline-block;
+}
+
+li.poem *:is(u,i) {
+  color: red;
+}
+p, li, ul {
+  margin:0;
+  padding: 0;
+}
+</code>
+</pre>

public/codes/all/cibler_css_multiples_vs_is.txt

@@ -0,0 +1,16 @@
+* en CSS cible tous les éléments 
+( c'est un joker )
+( il prend tous les droits )
+( ça peut être envahissant )
+...
+
+Faire disparaitre <code>lien hors sujet</code>
+Faire disparaitre <code>d'été</code>
+Faire apparaitre <code>d'automne</code> 
+... et colorer en <codescape class="language-css">bleu</codescape>
+
+Faire disparaitre <code>chiens froids</code>
+Faire apparaitre <code>soleils bleus</code>
+Dans <code>li.poem</code>, changer la couleur des éléments <code>u</code> et <code>i</code> 
+
+Retirer <codescape class="language-css">margin</codescape> et <codescape class="language-css">padding</codescape> à tous les <code>p</code>, <code>ul</code> et <code>li</code> ( en utilisant :is )

public/codes/all/cibler_css_padding.css

@@ -0,0 +1,70 @@
+/* neasting, ce qui est à l'intérieur (plus bas)...
+   cible l'élément s'il est présent dans #margin_please (enfant) */
+#padding_project {
+  div {
+    border: 3px solid red;
+    border-width: 6px 1px 6px 1px;
+    border-color: red orange green blue;
+
+    margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
+  }
+
+
+  #padding_all { /* neasting */
+    padding: 10px; /* affecte #padding_all */
+    border: 2px dashed blue;
+
+    /* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
+    /* div#padding_all div { */
+    /* ici toute div enfant de #padding_all est ciblée / affectée */
+    div {
+      margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
+    }
+    div#sub_wrapper {
+      padding: 10px;
+      border-color: yellow;
+      border-width: 10px;
+    }
+    .inline {
+      border-color: #000;
+      border-width: 1px 6px;
+      display: inline-block;
+    }
+    /* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
+    div:not(.no_margin) { 
+      margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
+    }
+    /* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
+    /* .no_margin  {
+      margin:0
+    } */
+  }
+
+  #padding_left {
+    padding-left: 30px;
+  }
+  #padding_top {
+    padding-top: 30px;
+    width: 50%;
+    text-align: center;
+  }
+  #padding_right {
+    padding-right: 30px;
+  }
+
+  .laterales { /* blocs au début et fin, meme classe */
+    width: 20%;
+  }
+  .boxfix {
+    box-sizing: border-box;
+  }
+
+  .label {
+    width: 100%;
+    display: inline-block;
+    background: #FFF;
+  }
+  .padding_color {
+    background-color: #e3dcff ;
+  }
+}

public/codes/all/cibler_css_padding.page

@@ -0,0 +1,25 @@
+<div id="padding_project">
+
+   <div id="padding_all">
+      #padding_all<br />
+
+      <div id="sub_wrapper">
+         #sub_wrapper<br />
+
+         <div id="padding_right" 
+              class="no_margin inline padding_color boxfix laterales">
+            <span class="label">#padding_right</span>
+         </div>
+         <div id="padding_top" 
+              class="no_margin inline padding_color boxfix">
+            <span class="label">#padding_top</span>
+         </div>
+         <div id="padding_left" 
+              class="no_margin inline padding_color boxfix laterales">
+            <span class="label">#padding_left</span>
+         </div>
+
+      </div> <!-- #sub_wrapper -->
+   </div> <!-- #padding_all -->
+
+</div> <!-- #padding_project -->

public/codes/all/cibler_css_padding.result

@@ -0,0 +1,16 @@
+<pre>
+<code class="line-numbers show-language nohelp_result language-css">
+#padding_left,
+#padding_top,
+#padding_right {
+  padding:
+     30px 10px 20px 10px;
+  width: 400px;
+  text-align: center;
+}
+
+is(#padding_left, #padding_top, #padding_right) {
+  /* ... marchait aussi */
+}
+</code>
+</pre>

public/codes/all/cibler_css_padding.txt

@@ -0,0 +1,12 @@
+Changer le padding des éléments :
+<code>#padding_left</code>
+<code>#padding_top</code>
+<code>#padding_right</code>
+Leur attribuer ces propriété et valeures : 
+- <codescape class="language-css">padding-top</codescape> == 30px
+- <codescape class="language-css">padding-right</codescape> == 10px
+- <codescape class="language-css">padding-bottom</codescape> == 20px
+- <codescape class="language-css">padding-left</codescape> == 10px
+Changer leur largeure, fixe :
+- <codescape class="language-css">width</codescape> == 400px 
+- <codescape class="language-css">tex-align</codescape> == center 

public/codes/all/cibler_has_checked.css

@@ -0,0 +1,122 @@
+#world_wrapper {
+  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 {
+  background: url('https://cdn.forestresearch.gov.uk/2021/11/forestry-home-1-2120x1360.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;
+}

public/codes/all/cibler_has_checked.page

@@ -0,0 +1,22 @@
+<div id="world_wrapper">
+
+  <a href="#foret">foret</a>
+  <input id="checkbox" type="checkbox" />
+  
+  <div id="foret">
+    
+    <span class="champignon_rouge">
+      <!-- .champignon_rouge -->
+      <!-- pas d'image -->
+    </span>
+
+    <span class="champignon_rouge droite">
+       <!-- .champignon_rouge.droite -->
+       <!-- + img#champi_img_droite -->
+       <img id="champi_img_droite" src="./img/03902b7b.png">
+    </span>
+
+    <img id="champi_img" src="./img/03902b7b.png">
+    
+  </div> <!-- foret -->
+</div>

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;
+ }
+
+
+
+
+
+
+
+
+
+
+

public/codes/all/cibler_has_checked.txt

@@ -0,0 +1,29 @@
+<codescape class="css">:has</codescape> est magique
+Cette pseudo-class permet de cibler (et donc modfifier le comportement d'un élement) dès lors qu'il contient un autre élement
+Si <code>#foret</code> contient <code>.champignon_rouge</code> on peut ajouter une propriété à <code>#foret</code>
+
+<codescape class="css">:checked</codescape> vérifie si un checkbox est checker (cochée)
+Si elle est cochée on peut faire quelque chose avec les éléments suivants
+ou, grace à <codescape class="css">:has</codescape> ... aux éléments parents
+
+TODO:
+... quand la checkbox est checked :
+- Modifier l'image de fond de #foret 
+... on charge l'image en indiquant son <u>url("....")</u>
+par exemple avec : 
+https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg
+<img src="https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg" style="width: 100px;">
+
+- Modifier le background de #world_wrapper
+par exemple avec : 
+https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg
+<img src="https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg" style="width: 100px;">
+Ajouter également :
+<codescape class="css">background-size: cover;</codescape>
+
+
+Changer la position de <code>.champignon_rouge</code> où vous voulez
+- faire cela quand la checkbox est <codescape class="css">:checked</codescape>
+- egalement quand le lien est <codescape class="css">:active</codescape>
+- et quand :checked et <codescape class="css">:hover</codescape> sont cumulés
+( chercher où modifier le code existant )

public/codes/all/cibler_id_classes_multiples.css

@@ -0,0 +1 @@
+/* Modifier le CSS ici */

public/codes/all/cibler_id_classes_multiples.page

@@ -0,0 +1,13 @@
+<!-- MUTLIPLE -->
+<div id="wrap_p_easy">
+  <p>
+    je suis un paragraphe parmis d'autres
+  </p>
+  <p>
+    nous sommes tous uniques car nous sommes des paragraphes distincts <span class="important">et nous pouvons contenir du texte <span>mis en forme autrement</span></span>
+  </p>
+  <p class="last_p important">
+    nous finirons par sortir de l'emprise de cette div qui nous encercle !
+  </p>
+</div>
+

public/codes/all/cibler_id_classes_multiples.result

@@ -0,0 +1,13 @@
+<pre><code class="line-numbers show-language nohelp_result language-css">
+#wrap_p_easy p {
+  color: red;
+  text-decoration: underline;
+  font-size: 30px
+}
+span span {
+   background: yellow;
+}
+p.last_p {
+  font-style: italic;
+}
+</code></pre>

public/codes/all/cibler_id_classes_multiples.txt

@@ -0,0 +1,4 @@
+cibler les <code>paragraphes</code> présents dans la <code>div aillant pour id "wrap_p_easy"</code>
+... ajouter à ces paragraphes une couleur + text-decoration + taille de police (CSS)
+... cibler un élément <code>span</code> présent à l'intérieur d'une autre <code>span</code>, modifier son background (CSS)
+cibler le <code>dernier paragraphe</code>... changer <codescape class="language-css">font-style</codescape> 

public/codes/all/cibler_is_not.css

@@ -0,0 +1,61 @@
+li:is(.active, .superactive, .neversleep) {
+  background-color: red;
+}
+li.active [data-etat="busy"] {
+  background-color: orange;
+}
+li:not(.active) {
+  background-color: cyan;
+}
+/* tout élément présent dan li...
+... qui possède l'ttribut "data-etat" */
+li [data-etat] {
+  width: 100%;
+  display: inline-block;
+}
+li {
+  font-style: italic;
+    /* grâce au neasting... */
+    /* ... les spans contenues dans .state sont ciblées ainsi : 
+    ... sans neasting on autait écrit :
+    ... li.state
+    */
+    .state {
+      border-left: 15px solid pink;
+
+      /* & indique indique qu'on cible l'élément avec une class "state"
+      .... et (+) un attribut (ou autre propriété tel .exemple)
+      Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
+      ... sans neasting on autait écrit :
+      ... li.state[data-etat="sleeping"]
+      */
+      &.exemple, /* , affect si a la class OU l'attribut... */
+      &[data-etat="sleeping"],
+      &:is([data-etat="sleeping"],[data-etat="sleep"]) 
+      /* ... cumul de conditions pouvant être remplies
+             pour que cette instruction CSS soit remplie */
+      {
+        opacity: 0.4;
+      }
+    }
+}
+
+/* si une li "possède/contient" == :has(x_condition) */
+/* alors li en question (parent.e) est affectée/ciblée*/
+/* ... ici, si li contient un element enfant...
+...... dont l'attribut est data-etat="sleeping" 
+........ elle a un autre background */
+li:has([data-etat="sleeping"]) {
+  opacity: 1;
+  background: #8080805e;
+  text-decoration: line-through;
+}
+
+
+li:last-of-type {
+  border-bottom: 3px solid blue;
+}
+li:nth-child(3) {
+  border: 5px solid pink;
+}
+/* https://css-tricks.com/examples/nth-child-tester/ */

public/codes/all/cibler_is_not.page

@@ -0,0 +1,18 @@
+<div id="is_or_not">
+  <ul>
+    <li class="normal">Normal</li>
+    <li class="active busy">
+        Working<br />
+        <span class="state" data-etat="busy">Busy</span>
+    </li>
+    <li class="normal">
+        Normal<br />
+        <span class="state" data-etat="sleeping">sleeping</span>
+    </li>
+    <li class="normal">
+        Normal<br />
+        <span class="state" data-etat="sleeping">sleeping</span>
+    </li>
+    <li class="normal">Normal</li>
+  </ul>
+</div>

public/codes/all/cibler_is_not.txt

@@ -0,0 +1,15 @@
+<codescape class='css'>:is</codescape> vérifie si l'élément ciblé contient/possède/a telle classe / attribut / id / état(:hover, :active...)
+<codescape class='css'>:not</codescape> fait l'inverse...
+<codescape class='css'>:has</codescape> vérifie si l'élément contient tel element / état
+
+On cible les éléments en fonction de leurs attributs ainsi :
+<codescape class='css'>a[href]</codescape> ... un lien avec "href" comme Attribut
+<codescape class='css'>a[href="#"]</codescape> ... ici l'attribut doit <u>être égal à</u> "#"
+<codescape class='css'>a[href$=".pdf"]</codescape> ... ici l'attribut doit <u>finir par</u> "#"
+<codescape class='css'>a[href^="https://"]</codescape> ... ici l'attribut doit <u>commencer par</u> "https://"
+<codescape class='css'>a[href*="dead_internet"]</codescape> ... ici l'attribut... 
+                        .... <u>contient n'importe où</u> "dead_internet"
+
+TODO :
+Modifier l'opacité des éléments (<code>li</code>) contenant une <code>span</code>... 
+... dont l'attribut <codescape class='css'>"data-state"</codescape> contient <codescape class='css'>"sleep"</codescape>...

public/codes/all/cibler_orgacss.attendu.page

@@ -0,0 +1,2 @@
+Attendu :<br>
+<img src="/codes/html_css_divers/cibler_orgacss.png" alt="Image non disponible">

public/codes/all/cibler_orgacss.css

@@ -0,0 +1,15 @@
+.deux_col {
+  width: 50%;
+  float: left;
+}
+
+.complet {
+  text-decoration: line-through;
+  color: red;
+}
+.offre .speciale {
+  color: orange;
+}
+li:not(.complet) {
+  color: green;
+}

public/codes/all/cibler_orgacss.page

@@ -0,0 +1,19 @@
+<div id="wrap_holidays">
+  <div id="destinations" class="colonnes deux_col">
+    <ul id="europe">
+      <li>Paris</li>
+      <li class="complet">Barcelone</li>
+      <li class="offre speciale">Berlin</li>
+      <li class="complet">Dublin</li>
+    </ul>
+  </div>
+
+  <div id="hotel" class="colonnes deux_col">
+    <ul id="etages">
+      <li>rooftop</li>
+      <li>suites</li>
+      <li class="complet offre speciale">chambres</li>
+      <li>rez de chaussée</li>
+    </ul>
+  </div>
+</div> <!-- #wrap_holidays -->

public/codes/all/cibler_orgacss.result

@@ -0,0 +1,49 @@
+<pre><code class="line-numbers show-language nohelp_result language-none">
+0 == parce que .offre .speciale ciblerait un élément ".special", enfant de ".offre" (.offre > .speciale)... et non pas tout élémént contenant les classes .offre ET speciale... le CSS correcte pour mettre chambre en orange est .offre.speciale 
+1 == en CSS c'est la dernière instruction qui l'emporte... 
+</code>
+</pre>
+
+<pre><code class="line-numbers show-language nohelp_result language-css">
+.deux_col {
+  width: 50%;
+  float: left;
+}
+
+#wrap_holidays {  
+  /* Si on indique : */
+  li {
+    color: green;
+  }
+  .offre {
+    color: orange;
+  }
+  /* ... toute la liste (li) sera en vert */
+  /* si, ensuite, on met : */
+  .complet {
+    color: red;
+    text-decoration: line-through;
+  }
+  /* ...cette instruction étant en dernier, elle prendra le dessus (sur la précédente)...
+  "chambres" étant .complet sera en rouge !!! */
+}
+
+
+
+#wrap_holidays.correction.alt {
+  li {
+    &.complet {
+      color: red !important;
+      text-decoration: line-through;
+    }
+  }
+  li {
+    color: green;
+  }
+  .offre {
+    color: orange;
+  }
+}
+</code>
+</pre>
+

public/codes/all/cibler_orgacss.txt

@@ -0,0 +1,3 @@
+0 Pourquoi "chambres" n'est pas en orange ?
+1 Réorganiser le CSS pour que "chambres" soit color:red (sans utiliser :not)
+2 Vous pouvez répondre par une explication ou en réécrivant le CSS

public/codes/all/data/cibler_adjascent_avance.css

@@ -0,0 +1,76 @@
+test {
+  color: orange;
+}
+
+#cibler_adjascent_avance {
+  min-height: 400px;
+
+  img {
+    height: 400px;
+    position: absolute;
+  }
+
+  .default_invisible {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  div#last_trigger {
+    /* transition: all 0.5s ease 2s; */
+    transition: none;
+  }
+
+  .go_button:hover ~ .default_invisible {
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    /* right: 0; */
+  }
+
+  .go_button + div#content_trigger {
+    right: 500px;
+    z-index: 2;
+  }
+
+  /* 2 == #second_trigger */
+  .go_button + div + div#second_trigger { 
+    right: 300px;
+    z-index: 3;
+  }
+
+  /* 3 == #last_trigger */
+  .go_button:hover + div + div + div#last_trigger { 
+    right: 730px;
+    margin-right: 350px;
+    transition: margin 1s ease 0s, 
+                opacity 0s ease 0.1s;
+  }
+  .go_button:hover + div + div + div#last_trigger img {
+    border: 3px solid red;
+  }
+  .go_button:hover + div + div + div#last_trigger > span >  img[src*="_alt"] {
+    outline: 4px solid yellow;
+  }
+  .go_button:hover + div + div + div#last_trigger img[src*="_alt"],
+  .go_button:hover + div + div + div#last_trigger > span > img {
+      position: absolute;
+      margin-left: -540px;
+      transform: rotateY(180deg);
+  }
+
+  .go_button + div + div + div#last_trigger 
+  + #trigger_oublie {
+    left: 500px;
+    bottom: 0;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+
+    img {
+      position: relative;
+      z-index: -3;
+      outline: 3px solid yellow;
+      height: 300px;
+    }
+  }
+}

public/codes/all/data/mhqfms0o4avskry6od1_cibler_adjascent_avance.css

@@ -0,0 +1,76 @@
+test {
+  color: pink;
+}
+
+#cibler_adjascent_avance {
+  min-height: 400px;
+
+  img {
+    height: 400px;
+    position: absolute;
+  }
+
+  .default_invisible {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  div#last_trigger {
+    /* transition: all 0.5s ease 2s; */
+    transition: none;
+  }
+
+  .go_button:hover ~ .default_invisible {
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    /* right: 0; */
+  }
+
+  .go_button + div#content_trigger {
+    right: 500px;
+    z-index: 2;
+  }
+
+  /* 2 == #second_trigger */
+  .go_button + div + div#second_trigger { 
+    right: 300px;
+    z-index: 3;
+  }
+
+  /* 3 == #last_trigger */
+  .go_button:hover + div + div + div#last_trigger { 
+    right: 730px;
+    margin-right: 350px;
+    transition: margin 1s ease 0s, 
+                opacity 0s ease 0.1s;
+  }
+  .go_button:hover + div + div + div#last_trigger img {
+    border: 3px solid red;
+  }
+  .go_button:hover + div + div + div#last_trigger > span >  img[src*="_alt"] {
+    outline: 4px solid yellow;
+  }
+  .go_button:hover + div + div + div#last_trigger img[src*="_alt"],
+  .go_button:hover + div + div + div#last_trigger > span > img {
+      position: absolute;
+      margin-left: -540px;
+      transform: rotateY(180deg);
+  }
+
+  .go_button + div + div + div#last_trigger 
+  + #trigger_oublie {
+    left: 500px;
+    bottom: 0;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+
+    img {
+      position: relative;
+      z-index: -3;
+      outline: 3px solid yellow;
+      height: 300px;
+    }
+  }
+}

public/codes/all/data/mhqgb6mcj2269knbiog_cibler_adjascent_avance.css

@@ -0,0 +1,77 @@
+test {
+  color: red;
+ddd
+}
+
+#cibler_adjascent_avance {
+  min-height: 400px;
+
+  img {
+    height: 400px;
+    position: absolute;
+  }
+
+  .default_invisible {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  div#last_trigger {
+    /* transition: all 0.5s ease 2s; */
+    transition: none;
+  }
+
+  .go_button:hover ~ .default_invisible {
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    /* right: 0; */
+  }
+
+  .go_button + div#content_trigger {
+    right: 500px;
+    z-index: 2;
+  }
+
+  /* 2 == #second_trigger */
+  .go_button + div + div#second_trigger { 
+    right: 300px;
+    z-index: 3;
+  }
+
+  /* 3 == #last_trigger */
+  .go_button:hover + div + div + div#last_trigger { 
+    right: 730px;
+    margin-right: 350px;
+    transition: margin 1s ease 0s, 
+                opacity 0s ease 0.1s;
+  }
+  .go_button:hover + div + div + div#last_trigger img {
+    border: 3px solid red;
+  }
+  .go_button:hover + div + div + div#last_trigger > span >  img[src*="_alt"] {
+    outline: 4px solid yellow;
+  }
+  .go_button:hover + div + div + div#last_trigger img[src*="_alt"],
+  .go_button:hover + div + div + div#last_trigger > span > img {
+      position: absolute;
+      margin-left: -540px;
+      transform: rotateY(180deg);
+  }
+
+  .go_button + div + div + div#last_trigger 
+  + #trigger_oublie {
+    left: 500px;
+    bottom: 0;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+
+    img {
+      position: relative;
+      z-index: -3;
+      outline: 3px solid yellow;
+      height: 300px;
+    }
+  }
+}

public/codes/all/data/mhqk4d17j743t3dt5qb_cibler_adjascent_avance.css

@@ -0,0 +1,76 @@
+test {
+  color: red;
+}
+
+#cibler_adjascent_avance {
+  min-height: 400px;
+
+  img {
+    height: 400px;
+    position: absolute;
+  }ss
+
+  .default_invisible {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  div#last_trigger {
+    /* transition: all 0.5s ease 2s; */
+    transition: none;
+  }
+
+  .go_button:hover ~ .default_invisible {
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    /* right: 0; */
+  }
+
+  .go_button + div#content_trigger {
+    right: 500px;
+    z-index: 2;
+  }
+
+  /* 2 == #second_trigger */
+  .go_button + div + div#second_trigger { 
+    right: 300px;
+    z-index: 3;
+  }
+
+  /* 3 == #last_trigger */
+  .go_button:hover + div + div + div#last_trigger { 
+    right: 730px;
+    margin-right: 350px;
+    transition: margin 1s ease 0s, 
+                opacity 0s ease 0.1s;
+  }
+  .go_button:hover + div + div + div#last_trigger img {
+    border: 3px solid red;
+  }
+  .go_button:hover + div + div + div#last_trigger > span >  img[src*="_alt"] {
+    outline: 4px solid yellow;
+  }
+  .go_button:hover + div + div + div#last_trigger img[src*="_alt"],
+  .go_button:hover + div + div + div#last_trigger > span > img {
+      position: absolute;
+      margin-left: -540px;
+      transform: rotateY(180deg);
+  }
+
+  .go_button + div + div + div#last_trigger 
+  + #trigger_oublie {
+    left: 500px;
+    bottom: 0;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+
+    img {
+      position: relative;
+      z-index: -3;
+      outline: 3px solid yellow;
+      height: 300px;
+    }
+  }
+}

public/codes/all/data/mhvr52cqlenirutl77e_cibler_css_multiples_vs_is.css

@@ -0,0 +1,11 @@
+* {
+  color: redaaaa
+}
+p {
+  color: green
+}
+#alt_saison {
+  display: none;
+}
+#popoesie * { background: cyan; }
+#popoesie *:hover { background: yellow; }

public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_adjascent_avance.css

@@ -0,0 +1,109 @@
+test {
+  color: red;ss
+}
+
+#cibler_adjascent_avance {
+  min-height: 400px;
+
+  img {
+    height: 400px;
+    position: absolute;
+    z-index: 2;
+  }
+
+  .go_button ~ .default_invisible {
+    opacity: 0;
+    visibility: hidden;
+    img {
+      border: 4px solid pink;
+   }
+  }
+
+  div#last_trigger {
+    transition: none;
+  }
+
+  /* TOUT .default_invisible Au meme niveau (meme parent) 
+  ... que .go_button sera affecté (quand .go_button:hover) */
+  .go_button:hover ~ .default_invisible {
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+    img {
+      border: 4px solid blue;
+   }
+  }
+
+  .go_button + div#content_trigger {
+    right: 500px;
+    z-index: 2;
+  }
+
+  /* 2 == #second_trigger */
+  .go_button + div 
+    + div#second_trigger { 
+    right: 300px;
+    z-index: 3;
+  }
+
+  /* 3 == #last_trigger */
+  .go_button:hover + div + div 
+    + div#last_trigger { 
+    right: 730px;
+    margin-right: 350px;
+    transition: margin 1s ease 0s, 
+                opacity 0s ease 0.1s;
+  }
+  .go_button ~ .default_invisible > .sub_child {
+    position: relative;
+    right: -300px !important;
+    opacity: 0;
+    transition: all 5s ease 0.1s;
+  }
+  .go_button:hover ~ .default_invisible > .sub_child {
+    visibility: visible;
+    right: 0 !important;
+    opacity: 1;
+    transition: all 1s ease 0.1s,
+      right 2s ease-out 0s;
+    z-index: 1;
+  }
+
+
+  .go_button:hover + div + div 
+    + div#last_trigger img {
+    outline: 3px solid red;
+  }
+  .go_button:hover + div + div 
+    + div#last_trigger > span >  img[src*="_alt"] {
+    outline: 4px solid yellow;
+  }
+  img[alt="cat_3"] {
+    right: 50px;
+  }
+
+  .go_button:hover + div + div 
+    + div#last_trigger img[src*="_alt"],
+  .go_button:hover + div + div
+    + div#last_trigger > span > img {
+      position: absolute;
+      transform: rotateY(180deg);
+  }
+
+  .go_button + div + div 
+  + div#last_trigger 
+  + #trigger_oublie {
+    left: 500px;
+    bottom: 0;
+    opacity: 1;
+    visibility: visible;
+    position: absolute;
+
+    img {
+      position: relative;
+      z-index: 0;
+      outline: 3px solid yellow;
+      height: 300px;
+    }
+  }
+}

public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_adjascent_avance.page

@@ -0,0 +1,37 @@
+<div id="cibler_adjascent_avance">
+  <div class="go_button">
+    Goss
+  </div>
+
+  <div id="content_trigger" class="default_invisible">
+    <img 
+       src="./img/cibler_adjascent_avance.jpg" 
+       alt="cat_1" />
+  </div>
+  
+  <div id="second_trigger" class="default_invisible">
+    <img 
+       src="./img/cibler_adjascent_avance_second.png" 
+       alt="cat_2" />
+  </div>
+  
+  <div id="last_trigger" class="default_invisible">
+    <img 
+       src="./img/cibler_adjascent_avance_last.jpg" 
+       alt="cat_3" />
+    
+    <span class="sub_child default_invisible">
+      <img 
+         src="./img/cibler_adjascent_avance_last_alt.jpg" 
+         alt="cat_4" />
+    </span>
+  </div>
+  
+  <div id="trigger_oublie" class="default_invisible">
+      <img 
+         src="./img/cibler_adjascent_avance_last_oublie.jpg" 
+         alt="cat_5" />
+  </div>
+
+
+</div>

public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_css_multiples_vs_is.css

@@ -0,0 +1,30 @@
+* {
+  color: blue
+}
+p {
+  color: green;
+}
+#alt_saison,
+#popoesie u#soleils {
+  display: none;
+}
+/* cibler li + tout les éléments qui sont dedans*/
+li.poem,
+li.poem * {
+  color:#000;
+}
+/* cibler u et i */
+li.poem u,
+li.poem i {
+  color: rgb(15, 126, 82);
+}
+/* avec la condition :is on cible <u> ou <i> présent dans li.poem
+... pratique, on fait une pierre deux coups ! */
+li.poem *:is(u,i) {
+  color: rgb(81, 39, 247);
+  padding: 3px 8px 3px 5px;
+  border: 1px solid #000;
+}
+
+#popoesie * { background: cyan; }
+#popoesie *:hover { background: yellow; }

public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_css_padding.css

@@ -0,0 +1,70 @@
+/* neasting, ce qui est à l'intérieur (plus bas)...
+   cible l'élément s'il est présent dans #margin_please (enfant) */
+#padding_project {
+  div {
+    border: 5px solid red;
+    border-width: 6px 1px 6px 1px;
+    border-color: red orange green blue;
+
+    margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
+  }
+
+
+  #padding_all { /* neasting */
+    padding: 10px; /* affecte #padding_all */
+    border: 2px dashed blue;
+
+    /* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
+    /* div#padding_all div { */
+    /* ici toute div enfant de #padding_all est ciblée / affectée */
+    div {
+      margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
+    }
+    div#sub_wrapper {
+      padding: 10px;
+      border-color: yellow;
+      border-width: 10px;
+    }
+    .inline {
+      border-color: #000;
+      border-width: 1px 6px;
+      display: inline-block;
+    }
+    /* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
+    div:not(.no_margin) { 
+      margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
+    }
+    /* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
+    /* .no_margin  {
+      margin:0
+    } */
+  }
+
+  #padding_left {
+    padding-left: 30px;
+  }
+  #padding_top {
+    padding-top: 30px;
+    width: 50%;
+    text-align: center;
+  }
+  #padding_right {
+    padding-right: 30px;
+  }
+
+  .laterales { /* blocs au début et fin, meme classe */
+    width: 20%;
+  }
+  .boxfix {
+    box-sizing: border-box;
+  }
+
+  .label {
+    width: 100%;
+    display: inline-block;
+    background: #FFF;
+  }
+  .padding_color {
+    background-color: #e3dcff ;
+  }
+}

public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_id_classes_multiples.css

@@ -0,0 +1 @@
+p {}

public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_is_not.css

@@ -0,0 +1,61 @@
+li:is(.active, .superactive, .neversleep) {
+  background-color: red;
+}
+li.active [data-etat="busy"] {
+  background-color: orange;
+}
+li:not(.active) {
+  background-color: cyan;
+}
+/* tout élément présent dan li...
+... qui possède l'ttribut "data-etat" */
+li [data-etat] {
+  width: 100%;
+  display: inline-block;
+}
+li {
+  font-style: italic;
+    /* grâce au neasting... */
+    /* ... les spans contenues dans .state sont ciblées ainsi : 
+    ... sans neasting on autait écrit :
+    ... li.state
+    */
+    .state {
+      border-left: 15px solid pink;
+
+      /* & indique indique qu'on cible l'élément avec une class "state"
+      .... et (+) un attribut (ou autre propriété tel .exemple)
+      Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
+      ... sans neasting on autait écrit :
+      ... li.state[data-etat="sleeping"]
+      */
+      &.exemple, /* , affect si a la class OU l'attribut... */
+      &[data-etat="sleeping"],
+      &:is([data-etat="sleeping"],[data-etat="sleep"]) 
+      /* ... cumul de conditions pouvant être remplies
+             pour que cette instruction CSS soit remplie */
+      {
+        opacity: 0.4;
+      }
+    }
+}
+
+/* si une li "possède/contient" == :has(x_condition) */
+/* alors li en question (parent.e) est affectée/ciblée*/
+/* ... ici, si li contient un element enfant...
+...... dont l'attribut est data-etat="sleeping" 
+........ elle a un autre background */
+li:has([data-etat="sleeping"]) {
+  opacity: 1s;
+  background: #8080805e;
+  text-decoration: line-through;
+}
+
+
+li:last-of-type {
+  border-bottom: 3px solid blue;
+}
+li:nth-child(3) {
+  border: 5px solid pink;
+}
+/* https://css-tricks.com/examples/nth-child-tester/ */

public/codes/all/data/mhw8ac7rzxui2vbb6t_tuto.css

@@ -0,0 +1,5 @@
+/* Modifier le CSS */
+p {
+  color: blue;
+  margin: 0;
+}

public/codes/all/data/mhw8wbjbx43prp2z6ms_tuto.css

@@ -0,0 +1,5 @@
+/* Modifier le CSS */
+p {
+  color: blue;
+  margin: 0;
+}

public/codes/all/data/mhw9vqpxfxksxcamjva_cibler_css_margin_transition.css

@@ -0,0 +1,49 @@
+/* Ici on peut attitrer des valeurs à des variables */
+/* on peut utiliser ces variables plusieures fois dans le CSS */
+/* Ici on va assigner cette variable à tous les éléments */
+/* normalement on utilise plutôt :root */
+* {
+    --element_width: 200px !important;
+}
+#mousehover_movemargin_element {
+  width: var(--element_width);
+  height: 200px;
+  padding: 20px;
+  text-align: center;
+  display: block; 
+  background: red;
+  color: #FFF;
+}
+#mousehover_movemargin:hover #mousehover_movemargin_element {
+  background:yellow;
+  color: #000;
+  
+  /* 
+  calc permet de calculer 
+  (adition +, soustraction -, multiplication *, ....
+  Ici on veut que la marge à gauche soit de :
+  100%
+  -130px
+  -70px ( == 200px )
+  ( la largeur "width" de #mousehover_movemargin_element )
+  */
+  margin-left: calc(100% - 130px - 70px);
+  /* On peut faire plus simple en utiisant la variable */
+  /* Ainsi, si on la modifie, dans * ...
+  ... la largeur de #mousehover_movemargin_element 
+  ... ainsi que la marge-left ici...
+  ..... vont être affectées
+  Si je veux changer la lageure+margin-left ici
+  ... je n'ai plus qu'à changer --element_width dans * !!!
+  */
+  margin-left: dcalc(100% - var(--element_width));  /* 100% - 200px */
+
+
+  /* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
+  /* all pour affecter toutes les propriétés CSS */
+  /* transition: all 1s; */
+  transition: 
+    margin-left 5s ease-in-out 0s,
+    color 2s ease-in-out 0s;
+  cursor: pointer;
+}

public/codes/all/data/mhyj112vkkmogauj84_tuto.css

@@ -0,0 +1,5 @@
+/* Modifier le CSS */
+p {
+  color: blue;
+  margin: 0;
+}

public/codes/all/data/mhyj112vkkmogauj84_tuto.page

@@ -0,0 +1,4 @@
+<!-- Modifier l'HTML -->
+<p>
+  Modifier le text ici
+</p>

public/codes/all/data/mhyn3t3mqs39lk6jyv9_cibler_id_classes_multiples.css

@@ -0,0 +1,7 @@
+#wrap_p_easy p {
+  text-decoration: underline;
+  font-size: 20px;
+  margin: 0;
+  color: red;
+  line-height: 1.9em;
+}

public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.css

@@ -0,0 +1,6 @@
+/* Modifier le CSS */
+p {
+  color: blue;
+  margin: 0;
+  
+}

public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.page

@@ -0,0 +1,3 @@
+<!-- Modifier l'HTML -->
+<p>
+  Modifier le coucou</p>

public/codes/all/data/mhynco2ctaagi7n9yr_cibler_css_margin_transition.css

@@ -0,0 +1,49 @@
+/* Ici on peut attitrer des valeurs à des variables */
+/* on peut utiliser ces variables plusieures fois dans le CSS */
+/* Ici on va assigner cette variable à tous les éléments */
+/* normalement on utilise plutôt :root */
+* {
+    --element_width: 300px!important;
+}
+#mousehover_movemargin_element {
+  width: var(--element_width);
+  height: 200px;
+  padding: 20px;
+  text-align: center;
+  display: block; 
+  background: red;
+  color: #FFF;
+}
+#mousehover_movemargin:hover #mousehover_movemargin_element {
+  background :blue;
+  color: #000;
+  
+  /* 
+  calc permet de calculer 
+  (adition +, soustraction -, multiplication *, ....
+  Ici on veut que la marge à gauche soit de :
+  100%
+  -130px
+  -70px ( == 200px )
+  ( la largeur "width" de #mousehover_movemargin_element )
+  */
+  margin-left: calc(100% - 130px - 70px);
+  /* On peut faire plus simple en utiisant la variable */
+  /* Ainsi, si on la modifie, dans * ...
+  ... la largeur de #mousehover_movemargin_element 
+  ... ainsi que la marge-left ici...
+  ..... vont être affectées
+  Si je veux changer la lageure+margin-left ici
+  ... je n'ai plus qu'à changer --element_width dans * !!!
+  */
+  margin-left: calc(100% - var(--element_width));  /* 100% - 200px */
+
+
+  /* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
+  /* all pour affecter toutes les propriétés CSS */
+  /* transition: all 1s; */
+  transition: 
+    margin-left 3s ease-in-out 0s,
+    color 1s ease-in-out 0s;
+  cursor: pointer;
+}

public/codes/all/data/mhynco2ctaagi7n9yr_cibler_css_multiples_vs_is.css

@@ -0,0 +1,38 @@
+* {
+  color: blue;
+}
+p {
+  color: blue;
+}
+a ,
+.poem.last span {
+display: none;
+}
+
+#alt_saison,
+#popoesie u#soleils {
+  display: inline;
+}
+#saisons span:not(#alt_saison){
+display: none;
+}
+/* cibler li + tout les éléments qui sont dedans*/
+li.poem,
+li.poem * {
+  color:#000;
+}
+/* cibler u et i */
+li.poem u,
+li.poem i {
+  color: blue;
+}
+/* avec la condition :is on cible <u> ou <i> présent dans li.poem
+... pratique, on fait une pierre deux coups ! */
+li.poem *:is(u,i) {
+  color: rgb(81, 39, 247);
+  padding: 0px 0px 0px 0px;
+  border: 1px solid #000;
+}
+
+#popoesie * { background: cyan; }
+#popoesie *:hover { background: green; }

public/codes/all/data/mhynco2ctaagi7n9yr_cibler_css_padding.css

@@ -0,0 +1,90 @@
+/* neasting, ce qui est à l'intérieur (plus bas)...
+   cible l'élément s'il est présent dans #margin_please (enfant) */
+#padding_project {
+  div {
+    border: 3px solid red;
+    border-width: 6px 1px 6px 1px;
+    border-color: red orange green blue;
+
+    margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
+  }
+
+#padding_top {
+padding: 30px;
+width :400px;
+tex-align:center;
+}
+#padding_left {
+padding:10px;
+width :400p;
+tex-align:center;
+}
+#padding_right {
+padding:10px;
+width :400px;
+tex-align:center;
+}
+#padding_bottom {
+padding:20px;
+width :400px;
+tex-align:center;
+}
+
+  #padding_all { /* neasting */
+    padding: 10px; /* affecte #padding_all */
+    border: 2px dashed blue;
+
+    /* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
+    /* div#padding_all div { */
+    /* ici toute div enfant de #padding_all est ciblée / affectée */
+    div {
+      margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
+    }
+    div#sub_wrapper {
+      padding: 10px;
+      border-color: yellow;
+      border-width: 10px;
+    }
+    .inline {
+      border-color: #000;
+      border-width: 1px 6px;
+      display: inline-block;
+    }
+    /* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
+    div:not(.no_margin) { 
+      margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
+    }
+    /* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
+    /* .no_margin  {
+      margin:0
+    } */
+  }
+
+  #padding_left {
+    padding-left: 30px;
+  }
+  #padding_top {
+    padding-top: 30px;
+    width: 50%;
+    text-align: center;
+  }
+  #padding_right {
+    padding-right: 30px;
+  }
+
+  .laterales { /* blocs au début et fin, meme classe */
+    width: 20%;
+  }
+  .boxfix {
+    box-sizing: border-box;
+  }
+
+  .label {
+    width: 100%;
+    display: inline-block;
+    background: #FFF;
+  }
+  .padding_color {
+    background-color: #e3dcff ;
+  }
+}

public/codes/all/data/mhynco2ctaagi7n9yr_cibler_id_classes_multiples.css

@@ -0,0 +1,16 @@
+p {
+text-decoration: underline;
+color:blue;
+font-size:18px;
+margin:0;
+}
+span{
+background:green;
+}
+
+#wrap_p_easy p span span {
+
+}
+ .last_p.important {
+font-style: italic;
+}

public/codes/all/data/mhyo7lt4ry66m8zcuu_cibler_id_classes_multiples.css

@@ -0,0 +1,6 @@
+span span {
+  COLOR;   
+}
+p .important {
+ color: red;
+}

public/codes/all/data/mhyommdfj1c3onihsh_cibler_css_multiples_vs_is.css

@@ -0,0 +1,41 @@
+* {
+  color: red
+}
+p {
+  color: green;
+}
+
+#saisons span:first-of-type,
+a,
+.poem.last span {
+  display: none;
+}
+
+
+:is(p,u,li){
+ padding: 0px 0px 0px 0px;
+ margin: 0px 0px 0px 0px;
+}
+
+/* cibler li + tout les éléments qui sont dedans*/
+li.poem,
+li.poem * {
+  color:#000;
+}
+/* cibler u et i */
+li.poem u,
+li.poem i {
+  color: rgb(15, 126, 82);
+}
+/* avec la condition :is on cible <u> ou <i> présent dans li.poem
+... pratique, on fait une pierre deux coups ! */
+li.poem *:is(u,i) {
+  color: green;
+  padding: 3px 8px 3px 5px;
+  border: 1px solid #000;
+}
+
+
+
+#popoesie * { background: cyan; }
+#popoesie *:hover { background: yellow; }

public/codes/all/data/mhyommdfj1c3onihsh_cibler_css_padding.css

@@ -0,0 +1,73 @@
+/* neasting, ce qui est à l'intérieur (plus bas)...
+   cible l'élément s'il est présent dans #margin_please (enfant) */
+#padding_project {
+  div {
+    border: 3px solid red;
+    border-width: 6px 1px 6px 1px;
+    border-color: red orange green blue;
+
+    margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
+  }
+
+
+  #padding_all { /* neasting */
+    padding: 10px; /* affecte #padding_all */
+    border: 2px dashed blue;
+
+    /* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
+    /* div#padding_all div { */
+    /* ici toute div enfant de #padding_all est ciblée / affectée */
+    div {
+      margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
+    }
+    div#sub_wrapper {
+      padding: 10px;
+      border-color: yellow;
+      border-width: 10px;
+    }
+    .inline {
+      border-color: #000;
+      border-width: 1px 6px;
+      display: inline-block;
+    }
+    /* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
+    div:not(.no_margin) { 
+      margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
+    }
+    /* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
+    /* .no_margin  {
+      margin:0
+    } */
+  }
+
+  #padding_left {
+    padding-left: 10px;
+  }
+  #padding_top {
+    padding-top: 30px;
+    width: 50%;
+    text-align: center;
+  }
+  #padding_right {
+    padding-right:10px;
+  }
+  #padding_bottom {
+   padding-bottom: 20px;
+  }
+
+  .laterales { /* blocs au début et fin, meme classe */
+    width: 20%;
+  }
+  .boxfix {
+    box-sizing: border-box;
+  }
+
+  .label {
+    width: 100%;
+    display: inline-block;
+    background: #FFF;
+  }
+  .padding_color {
+    background-color: #e3dcff ;
+  }
+}

public/codes/all/data/mhyommdfj1c3onihsh_cibler_id_classes_multiples.css

@@ -0,0 +1,19 @@
+/* Modifier le CSS ici */
+
+#wrap_p_easy span span {
+
+color: red;
+Font-size: 13;
+Font-style: italic;
+text-decoration: underline;
+text-decoration-style: dotted;
+
+
+}
+
+.last_p.important {
+
+color: blue;
+font-style: oblique;
+
+}

public/codes/all/data/mhyommdfj1c3onihsh_tuto.css

@@ -0,0 +1,5 @@
+/* Modifier le CSS */
+p {
+  color: blue;
+  margin: 0;
+}

public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_css_margin_transition.css

@@ -0,0 +1,49 @@
+/* Ici on peut attitrer des valeurs à des variables */
+/* on peut utiliser ces variables plusieures fois dans le CSS */
+/* Ici on va assigner cette variable à tous les éléments */
+/* normalement on utilise plutôt :root */
+* {
+    --element_width: 200px !important;
+}
+#mousehover_movemargin_element {
+  width: var(--element_width);
+  height: 200px;
+  padding: 20px;
+  text-align: center;
+  display: block; 
+  background: red;
+  color: #FFF;
+}
+#mousehover_movemargin:hover #mousehover_movemargin_element {
+  background:yellow;
+  color: #000;
+  
+  /* 
+  calc permet de calculer 
+  (adition +, soustraction -, multiplication *, ....
+  Ici on veut que la marge à gauche soit de :
+  100%
+  -130px
+  -70px ( == 200px )
+  ( la largeur "width" de #mousehover_movemargin_element )
+  */
+  margin-left: calc(100% - 130px - 70px);
+  /* On peut faire plus simple en utiisant la variable */
+  /* Ainsi, si on la modifie, dans * ...
+  ... la largeur de #mousehover_movemargin_element 
+  ... ainsi que la marge-left ici...
+  ..... vont être affectées
+  Si je veux changer la lageure+margin-left ici
+  ... je n'ai plus qu'à changer --element_width dans * !!!
+  */
+  margin-left: calc(100% - var(--element_width));  /* 100% - 200px */
+
+
+  /* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
+  /* all pour affecter toutes les propriétés CSS */
+  /* transition: all 1s; */
+  transition: 
+    margin-left 5s ease-in-out 0s,
+    color 2s ease-in-out 0s;
+  cursor: pointer;
+}

public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_css_multiples_vs_is.css

@@ -0,0 +1,30 @@
+* {
+  color: red
+}
+p {ddd
+  color: green;
+}
+#alt_saison,
+#popoesie u#soleils {
+  display: none;
+}
+/* cibler li + tout les éléments qui sont dedans*/
+li.poem,
+li.poem * {
+  color:#000;
+}
+/* cibler u et i */
+li.poem u,
+li.poem i {
+  color: rgb(15, 126, 82);
+}
+/* avec la condition :is on cible <u> ou <i> présent dans li.poem
+... pratique, on fait une pierre deux coups ! */
+li.poem *:is(u,i) {
+  color: rgb(81, 39, 247);
+  padding: 3px 8px 3px 5px;
+  border: 1px solid #000;
+}
+
+#popoesie * { background: cyan; }
+#popoesie *:hover { background: yellow; }

public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_css_padding.css

@@ -0,0 +1,70 @@
+/* neastzzzzing, ce qui est à l'intérieur (plus bas)...
+   cible l'élément s'il est présent dans #margin_please (eddnfant) */
+#padding_project {
+  div {
+    border: 3px solid red;
+    border-width: 6px 1px 6px 1px;
+    border-color: red orange green blue;
+
+    margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
+  }
+
+
+  #padding_all { /* neasting */dd
+    padding: 10px; /* affecte #padding_all */
+    border: 2px dashed blue;
+
+    /* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
+    /* div#padding_all div { */
+    /* ici toute div enfant de #padding_all est ciblée / affectée */
+    div {
+      margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
+    }
+    div#sub_wrapper {
+      padding: 10px;
+      border-color: yellow;
+      border-width: 10px;
+    }
+    .inline {
+      border-color: #000;
+      border-width: 1px 6px;
+      display: inline-block;
+    }
+    /* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
+    div:not(.no_margin) { 
+      margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
+    }
+    /* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
+    /* .no_margin  {
+      margin:0
+    } */
+  }
+
+  #padding_left {
+    padding-left: 30px;
+  }
+  #padding_top {
+    padding-top: 30px;
+    width: 50%;
+    text-align: center;
+  }
+  #padding_right {
+    padding-right: 30px;
+  }
+
+  .laterales { /* blocs au début et fin, meme classe */
+    width: 20%;
+  }
+  .boxfix {
+    box-sizing: border-box;
+  }
+
+  .label {
+    width: 100%;
+    display: inline-block;
+    background: #FFF;
+  }
+  .padding_color {
+    background-color: #e3dcff ;
+  }
+}

public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_is_not.css

@@ -0,0 +1,61 @@
+li:is(.active, .superactive, .neversleep) {
+  background-color: red;
+}zzz
+li.active [data-etat="busy"] {
+  background-color: orange;
+}
+li:not(.active) {
+  background-color: cyan;
+}
+/* tout élément présent dan li...
+... qui possède l'ttribut "data-etat" */
+li [data-etat] {
+  width: 100%;
+  display: inline-block;
+}
+li {
+  font-style: italic;
+    /* grâce au neasting... */
+    /* ... les spans contenues dans .state sont ciblées ainsi : 
+    ... sans neasting on autait écrit :
+    ... li.state
+    */
+    .state {
+      border-left: 15px solid pink;
+
+      /* & indique indique qu'on cible l'élément avec une class "state"
+      .... et (+) un attribut (ou autre propriété tel .exemple)
+      Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
+      ... sans neasting on autait écrit :
+      ... li.state[data-etat="sleeping"]
+      */
+      &.exemple, /* , affect si a la class OU l'attribut... */
+      &[data-etat="sleeping"],
+      &:is([data-etat="sleeping"],[data-etat="sleep"]) 
+      /* ... cumul de conditions pouvant être remplies
+             pour que cette instruction CSS soit remplie */
+      {
+        opacity: 0.4;
+      }
+    }
+}
+
+/* si une li "possède/contient" == :has(x_condition) */
+/* alors li en question (parent.e) est affectée/ciblée*/
+/* ... ici, si li contient un element enfant...
+...... dont l'attribut est data-etat="sleeping" 
+........ elle a un autre background */
+li:has([data-etat="sleeping"]) {
+  opacity: 1;
+  background: #8080805e;
+  text-decoration: line-through;
+}
+
+
+li:last-of-type {
+  border-bottom: 3px solid blue;
+}
+li:nth-child(3) {
+  border: 5px solid pink;
+}
+/* https://css-tricks.com/examples/nth-child-tester/ */

public/codes/all/data/mi0gxzihcahf66f40mw_cibler_id_classes_multiples.css

@@ -0,0 +1 @@
+/* Modifier le CSS ici */

public/codes/all/data/mi0gxzihcahf66f40mw_tuto.css

@@ -0,0 +1,5 @@
+/* Modifier le CSS */
+p {ee
+  color: red;
+  margin: 0;
+}

public/codes/all/tuto.css

@@ -0,0 +1,5 @@
+/* Modifier le CSS */
+p {
+  color: red;
+  margin: 0;
+}

public/codes/all/tuto.page

@@ -0,0 +1,4 @@
+<!-- Modifier l'HTML -->
+<p>
+  Modifier le text
+</p>

public/codes/all/tuto.txt

@@ -0,0 +1,25 @@
+En vert le CSS
+En orangé l'HTML
+En dessous le Rendu
+Ensuit une textarea ou expliquer les modifications apportées
+( vous pouvez indiquer "RAS" ou autre si le code parle de lui-même )
+( n'hésitez pas à ajouter un commentaire sur ce qui a été compliqué/trop dur )
+
+En passant à la question suivante vos fichiers modifiés sont sauvegardés
+Mais vous pouvez aussi cliquer sur "sauvegarder" pour forcer la sauvegarde 
+(un lien vers le fichier s'affichera)
+Ou cliquer sur télécharger (pour le récupérer)
+
+Au début de la session un ID_unique est créé
+<b>Il faudra le noter lors de la dernière question...</b>
+<b>Il servira a retrouver/partager vos réponses !</b>
+( indiqué en haut de page )
+<img src="/codes/{sub_folder}/img/tuto.png"> 
+
+( <a href="#unique-id-wrapper">en bas de page</a> on peut charger un questionnaire fini )
+( ou en page d'acceuille )
+<a href="#unique-id-wrapper"><img src="/codes/{sub_folder}/img/tuto_box.png"></a>
+
+Le TOC permet d'aller d'une question à l'autre directement....
+<b>Mais, pour compléter le questionnaire... 
+il faut répondre à toutes questions dans l'ordre...</b>

public/codes/cibler_css_id_class_menu/cibler_css_id_class_menu.css

@@ -0,0 +1,91 @@
+#cibler_css_id_class_el {
+  nav#top_menu, nav#vertical_menu {
+    border: 1px solid;
+  }
+
+
+  #top_menu {
+    width: fit-content;
+    float: right;
+    padding-left: 30px;
+    padding-right: 16px;
+  }  
+  
+  #top_menu .menu_liste {
+    padding-left: 0;
+    text-align: right;
+    padding-right: 10px;
+  }
+  #vertical_menu .menu_liste {
+    margin: 0 30px 0 0px;
+    padding-left: 0;
+    padding-bottom: 60px;
+  }
+
+  .menu_item {
+    display: inline-block;
+    list-style: none;
+    padding: 10px;
+    border: 1px solid;
+    position: relative;
+    vertical-align: top;
+  }
+
+  a[data-type] {
+    background: yellow;
+  }
+  li:hover {
+    background: #000 !important;
+    color: #FFF !important;
+  }
+
+  .menu_item .submenu { 
+    display: none;
+    position: absolute;
+    z-index: 1;
+    /* width: fit-content; */
+    width: max-content;
+    border: 1px solid;
+    padding: 3px 20px 10px 15px;
+    margin: 8px 0 0 -10px;
+    background: #000 !important;
+    color: #FFF !important;
+    text-align: left;
+    list-style: none;
+  }
+  .menu_item:hover .submenu {
+      display: block;
+  }
+
+  .menu_item .submenu .submenu_item { 
+    color: #FFF;
+    background: #000 !important;
+    border: 1px solid #000;
+    padding-top: 5px;
+    padding-bottom: 3px;
+  }
+  .menu_item .submenu .submenu_item:hover { 
+    filter: invert(1);
+    margin-left: -15px;
+    margin-right: -23px;
+    padding-left: 13px;
+    border-color: #FFF !important;
+  }
+
+
+
+  #vertical_menu {
+    width: fit-content;
+    float: left;
+  }
+  #vertical_menu li.menu_item {
+    display: block;
+    width: max-content;
+    padding: 9px 10px;
+  }
+  #vertical_menu .submenu {
+    margin-top: -35px !important;
+    margin-left: 80px !important;
+  }
+
+}

public/codes/cibler_css_id_class_menu/cibler_css_id_class_menu.page

@@ -0,0 +1,59 @@
+<div id="cibler_css_id_class_el">
+  <nav id="top_menu">
+    <ul class="menu_liste">
+      <li class="menu_item" data-num="0">menu 0</li>
+      <li class="menu_item" data-num="1">menu 1</li>
+      <li class="menu_item" data-num="2">menu 2</li>
+      
+      <li class="menu_item" data-num="3" data-sub="oui">
+          <a id="menu_3">menu 3</a>
+          <ul class="submenu">
+            <li class="submenu_item" data-num="1">sous-menu 1</li>
+            <li class="submenu_item" data-num="2">sous-menu 2</li>
+            <li class="submenu_item" data-num="3">sous-menu 3</li>
+            <li class="submenu_item" data-num="4">sous-menu 4</li>
+        </ul>
+      </li>
+
+      <li class="menu_item">
+        <a href='#' target='_blank' data-type='demo'>menu 4</a>
+      </li>
+    </ul>
+  </nav>
+
+  <nav id="vertical_menu">
+    
+    <ul class="menu_liste">
+      <li class="menu_item" data-num="0">menu 0</li>
+      <li class="menu_item" data-num="1">menu 1</li>
+      <li class="menu_item" data-num="2">menu 2</li>
+      <li class="menu_item" data-num="3" data-sub="oui">
+          <a id="menu_3">menu 3</a>
+          <ul class="submenu">
+            <li class="submenu_item" data-type="files img">
+               images
+            </li>
+            <li class="submenu_item" data-type="files draw">
+               dessins
+            </li>
+            <li class="submenu_item" data-type="files txt">
+               textes
+            </li>
+            <li class="submenu_item" data-type="files ref">
+               references
+            </li>
+        </ul>
+      </li>
+      <li class="menu_item">
+        <a href='https://code.bonnebulle.xyz' target='_blank' data-type='demo'>menu 4</a>
+      </li>
+    </ul>
+  </nav>
+
+<section>
+  <article>
+    Aliquip excepteur et ad aute magna eu nulla in ut id excepteur tempor elit. Aliquip pariatur cupidatat do. Eiusmod voluptate irure fugiat aliquip eiusmod laborum quis veniam in irure id anim nisi. Ex adipisicing sint quis nisi quis ipsum fugiat. Excepteur consectetur sit irure ad occaecat duis. Incididunt ipsum non amet amet tempor fugiat magna sint ad. Eu consectetur nostrud sit quis officia aliqua consequat eiusmod officia occaecat elit sint labore do. Ullamco dolor consectetur aliquip pariatur reprehenderit incididunt esse.
+  </article>
+</section>
+
+</div>

public/codes/cibler_css_id_class_menu/cibler_css_id_class_menu.result

@@ -0,0 +1,6 @@
+<pre><code class="line-numbers show-language nohelp_result language-css">
+#top_menu .submenu_item[data-num="4"],
+#vertical_menu [data-type="files draw"] {
+  background: red !important;
+}
+</code></pre>

public/codes/cibler_css_id_class_menu/cibler_css_id_class_menu.txt

@@ -0,0 +1,28 @@
+Element : 
+div a { ... } /* CSS cible a présent dans une div */
+<div>
+  <a href='http:...' target='_blank' data-type='demo'>lien</a>
+</div>
+<a href='http:...'>lien</a> <!-- non ciblé/affecté, hors de div -->
+
+Attribut : 
+'href', 'target', 'data-type' (dans l'element a)...
+a[href] { ... } /* element a avec attribut href */
+a[href$=".html"] { ... } /* attribut href fini par... */
+a[href^="https"] { ... } /* attribut href commence par... */
+a[href*="fichier_final"] { ... } /* attribut href contient... */
+
+Id : 
+#top_menu { .... }
+<nav id="top_menu">
+
+Classe : 
+.menu_item { .... }
+<li class="menu_item">menu 1</li>
+
+TODO : 
+Cibler le 4e sous-menu dans #top_menu
+Faire de même dans le menu de gauche, mais cette fois, cibler le 2e sous-menu
+... forcer leur couleur de fond (background) dans une couleur de votre choix...
+... Utiliser !important si nécesaire
+

public/codes/cibler_css_id_class_menu/data/mhw8ufhq3jmrhqhr3k7_cibler_css_id_class_menu.css

@@ -0,0 +1,91 @@
+#cibler_css_id_class_el {
+  nav#top_menu, nav#vertical_menu {
+    border: 1px solid;
+  }
+
+
+  #top_menu {
+    width: fit-content;
+    float: right;
+    padding-left:330px;
+    padding-right: 16px;
+  }  
+  
+  #top_menu .menu_liste {
+    padding-left: 0;
+    text-align: right;
+    padding-right: 10px;
+  }
+  #vertical_menu .menu_liste {
+    margin: 0 30px 0 0px;
+    padding-left: 0;
+    padding-bottom: 60px;
+  }
+
+  .menu_item {
+    display: inline-block;
+    list-style: none;
+    padding: 10px;
+    border: 1px solid;
+    position: relative;
+    vertical-align: top;
+  }
+
+  a[data-type] {
+    background: yellow;
+  }
+  li:hover {
+    background: #000 !important;
+    color: #FFF !important;
+  }
+
+  .menu_item .submenu { 
+    display: none;
+    position: absolute;
+    z-index: 1;
+    /* width: fit-content; */
+    width: max-content;
+    border: 1px solid;
+    padding: 3px 20px 10px 15px;
+    margin: 8px 0 0 -10px;
+    background: #000 !important;
+    color: #FFF !important;
+    text-align: left;
+    list-style: none;
+  }
+  .menu_item:hover .submenu {
+      display: block;
+  }
+
+  .menu_item .submenu .submenu_item { 
+    color: #FFF;
+    background: #000 !important;
+    border: 1px solid #000;
+    padding-top: 5px;
+    padding-bottom: 3px;
+  }
+  .menu_item .submenu .submenu_item:hover { 
+    filter: invert(1);
+    margin-left: -15px;
+    margin-right: -23px;
+    padding-left: 13px;
+    border-color: #FFF !important;
+  }
+
+
+
+  #vertical_menu {
+    width: fit-content;
+    float: left;
+  }
+  #vertical_menu li.menu_item {
+    display: block;
+    width: max-content;
+    padding: 9px 10px;
+  }
+  #vertical_menu .submenu {
+    margin-top: -35px !important;
+    margin-left: 80px !important;
+  }
+
+}

public/codes/cibler_css_id_class_menu/data/mhxp2wcsreuryet6kb_cibler_css_id_class_menu.css

@@ -0,0 +1,91 @@
+#cibler_css_id_class_el {
+  nav#top_menu, nav#vertical_menu {
+    border: 1px solid;
+  }
+
+
+  #top_menu {
+    width: fit-content;
+    float: right;
+    padding-left: 30px;
+    padding-right: 16px;
+  }  
+  
+  #top_menu .menu_liste {
+    padding-left: 0;
+    text-align: right;
+    padding-right: 10px;
+  }
+  #vertical_menu .menu_liste {
+    margin: 0 30px 0 0px;
+    padding-left: 0;
+    padding-bottom: 60px;
+  }
+
+  .menu_item {
+    display: inline-block;
+    list-style: none;
+    padding: 10px;
+    border: 1px solid;
+    position: relative;
+    vertical-align: top;
+  }
+
+  a[data-type] {
+    background: yellow;
+  }
+  li:hover {
+    background: #000 !important;
+    color: #FFF !important;
+  }
+
+  .menu_item .submenu { 
+    display: none;
+    position: absolute;
+    z-index: 1;
+    /* width: fit-content; */
+    width: max-content;
+    border: 1px solid;
+    padding: 3px 20px 10px 15px;
+    margin: 8px 0 0 -10px;
+    background: #000 !important;
+    color: #FFF !important;
+    text-align: left;
+    list-style: none;
+  }
+  .menu_item:hover .submenu {
+      display: block;
+  }
+
+  .menu_item .submenu .submenu_item { 
+    color: #FFF;
+    background: #000 !important;
+    border: 1px solid #000;
+    padding-top: 5px;
+    padding-bottom: 3px;
+  }
+  .menu_item .submenu .submenu_item:hover { 
+    filter: invert(1);
+    margin-left: -15px;
+    margin-right: -23px;
+    padding-left: 13px;
+    border-color: #FFF;
+  }
+
+
+
+  #vertical_menu {
+    width: fit-content;
+    float: left;
+  }
+  #vertical_menu li.menu_item {
+    display: block;
+    width: max-content;
+    padding: 9px 10px;
+  }
+  #vertical_menu .submenu {
+    margin-top: -35px !important;
+    margin-left: 80px !important;
+  }
+
+}

public/codes/html/class_id_child.css

@@ -0,0 +1,14 @@
+/* CSS */
+/* créer un élement span..... */
+#div_entente p span.important {
+  color: red;
+}
+/* créer un élement strike..... */
+#div_corps p strike.hide {
+  display: none;
+}
+/* ajouter un titre h1 et h2 */
+h1, h2 {
+  background: #000;
+  color: #FFF;
+}

public/codes/html/class_id_child.page

@@ -0,0 +1,12 @@
+<!-- Modifier l'HTML -->
+<div id="div_entente">
+  <p>
+    Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
+  </p>
+</div>
+
+<div id="div_corps">
+  <p>
+   Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
+  </p>
+</div>

public/codes/html/class_id_child.result

@@ -0,0 +1,16 @@
+<!-- Modifier l'HTML -->
+<h1>Titre principal</h1>
+
+<div id="div_entente">
+  <p>
+    Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. <span class="important">Text important</span>.
+  </p>
+</div>
+
+<div id="div_corps">
+  <h2>Titre secondaire</h2>
+
+  <p>
+   Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod.<span class="hide">Text supprimé en fin de paragraphe</span>.
+  </p>
+</div>

public/codes/html/class_id_child.txt

@@ -0,0 +1,75 @@
+La feuille CSS cible des éléments dans la page
+Certains n'existent pas... les créer pour que les inscrtructions CSS les affectent. On se concentre ici sur l'HTML qu'on peut modifier.
+
+<button type="button" class="collapsible">Open Collapsible</button>
+<div class="coll_content">
+En CSS on peut cibler un élément...
+Exemple :
+NB: on done autant de class qu'on veut mais un seul id, unique dans toute la page !!!
+<codescape class="html block">
+<a href="/lien/" id="seul_lien" class="lien_normal inline">
+  text du lien
+</a>
+</codescape>
+
+- par son nom 
+<codescape class="css block">
+a {
+  text-decoration: none;
+}
+</codescape>
+
+- par sa.ses classe(s)
+<codescape class="css block">
+.lien_normal,
+.lien_normal.inline {
+  text-decoration: none;
+}
+.inline {
+  display: inline;
+}
+</codescape>
+
+NB: On peut cumuler les instructions (avec une virgule)
+NB: On peut cibler un élément en donnant autant de précision sur ses attributs, sa classe, son id, autres propriétés 
+
+- ici par son id
+.... puis par tous ses attributs
+#seul_lien,
+a#seul_lien.lien_normal.inline {
+  background: red;
+}
+
+- par n'importe quel autre attributs (ici href)
+<codescape class="css block">
+a[href] {
+  text-decoration: none;
+}
+</codescape>
+
+. . .
+
+NB: en HTML on cumule les classes (ici inline + lien_normal) en ajoutant un espace entre 
+<codescape class="html block">
+<p>
+  <a class="lien_normal inline">
+    text du lien
+  </a>
+</p>
+</codescape>
+....
+en CSS un espace signifie autre chose :
+<codescape class="css block">
+p a,
+html body {
+  text-decoration: none;
+  margin: 0;
+}
+</codescape>
+Ici on cible tout élement <code>a</code> qui serait présent dans <code>p</code>
+... on cible aussi <code>body</code> présent dans <code>html</code>
+... en CSS, c'est la virgule qui sert de séparateur
+
+Ensuite il faut bien penser à mettre des acolades "{" "}"
+Tout ce qui se trouver entre elles est appliqué aux éléments ciblés...
+</div> 

public/codes/html/data/mi4cacmvoerxxbygoch_class_id_child.css

@@ -0,0 +1,12 @@
+<span class="token comment"><!-- Modifier l'HTML --></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name keyword-id">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div_entente<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
+    Commodo duis ea aliquip consequat amets<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> do et enim<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
+  <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name keyword-id">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div_corps<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
+   Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
+  <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>

public/codes/html/data/mi4cacmvoerxxbygoch_sauts_de_lignes.css

@@ -0,0 +1 @@
+/* Rien a modifier */

public/codes/html/data/mi4cp4t5dfbpsizhrd_class_id_child.page

@@ -0,0 +1,12 @@
+<!-- Modifier l'HTML -->
+<div id="div_entente">
+  <p>
+    Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important. <span class="important">Sunt aute dolore eu mollit</span>
+  </p>
+</div>
+
+<div id="div_corps">
+  <p>
+   Magna et deserunt enim sit.  exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
+  </p>
+</div>

public/codes/html/data/mi4d5cv6af67wnisrhb_class_id_child.css

@@ -0,0 +1,14 @@
+/* CSS */
+/* créer un élement span..... */
+#div_entente p span.important {
+  color: orange;
+}
+/* créer un élement strike..... */
+#div_corps p strike.hide {
+  display: none;
+}
+/* ajouter un titre h1 et h2 */
+h1, h2 {
+  background: #000;
+  color: #FFF;
+}

public/codes/html/data/mi4d5cv6af67wnisrhb_class_id_child.page

@@ -0,0 +1,12 @@
+<!-- Modifier l'HTML -->
+<div id="div_entente">
+  <p>
+    Commodo duis ea aliquip consequat amet do et enim ea cillum <span class="important">nisi</span> amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
+  </p>
+</div>
+
+<div id="div_corps">
+  <p>
+   Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
+  </p>
+</div>

public/codes/html/data/mi4dc5glugn8is6mc4_class_id_child.page

@@ -0,0 +1,12 @@
+<!-- Modifier l'HTML -->
+<div id="div_entente">
+  <p>
+    Commodo duis ea aliquip consequat amet do et enim ea cillum nisi amet. Veniam aliqua consequat id consectetur cillum ullamco incididunt sit ex non adipisicing ullamco cillum laboris. Text important.
+  </p>
+</div>
+
+<div id="div_corps">
+  <p>
+   Magna et deserunt enim sit. Sunt aute dolore eu mollit exercitation ullamco est sit in ullamco amet irure commodo eiusmod. Text supprimé en fin de paragraphe.
+  </p>
+</div>