/* 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;
}