SEND all files + questionnaires + json + data_tests

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