#gages {
  position: relative;
  top: 0px; }

.gage {
  position: relative;
  margin: 0px auto;
  width: 50px;    /* largeur de la jauge */
  height: 250px ;  /* hauteur de la jauge */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  -webkit-box-shadow: 0px 2px 3px -1px white, inset 0px 10px 20px rgba(0, 0, 0, 0.8), inset -2px -2px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 2px 3px -1px white, inset 0px 10px 20px rgba(0, 0, 0, 0.8), inset -2px -2px 10px rgba(0, 0, 0, 0.8);
}
/* liquide dans le reservoire */
  .fuel {
    position: absolute;
    transform-origin: top;

    margin :  250px 0px auto;
    transform: rotate(180deg);
    width: 100%;
    height: 50%;             /*cette variable doit etre modifiée pour modifier la taille de la jauge */
    background: #c0d454;     /*cette variable doit etre modifiée pour modifier la couleur de la jauge */ */
    margin-top: 100%;
    border-radius: 0px 0px 3px 3px;
    -webkit-box-shadow: inset 0px -2px 20px rgba(0, 0, 0, 0.5), inset 0px 0px 8px rgba(0, 0, 0, 0.3);
    /* box-shadow: inset 0px -2px 20px rgba(0, 0, 0, 0.5), inset 0px 0px 8px rgba(0, 0, 0, 0.3); } */


/* Taille de la graduation */
  /* .textjauge{
    position: absolute;
    transform-origin: top;
    transform: rotate(180deg);
    width: 20%;
    margin: 50% 0%;
    content: " test "; /*affichage d'un texte en haut de la jauge */

}
  .gage .grad {
    position: absolute;
    width: 20%;
    background: none;
    border: 1px solid #fff;
    border-left: none;
    border-right: none;
    -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3); }

/* placement de la graduation */
    .gage .grad.g1 {
      height: 80%;
      top: 10%; }
    .gage .grad.g2 {
      height: 60%;
      top: 20%; }
    .gage .grad.g3 {
      height: 40%;
      top: 30%; }
    .gage .grad.g4 {
      height: 20%;
      top: 40%; }
    .gage .grad.g5 {
      height: 0%;
      top: 50%;
      width: 60%; }