/*////////////////////POUR BOUTON PLUS SIMPLE///////////////////////////*/ 

  @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
  * {
    box-sizing: border-box;
  }

  :root{
    --couleurBouton: rgba(247, 248, 252, 0.98);
    --couleurBoutonHover:#1da0f209;
    /*Ce sont les meme couleurs que celles du menu*/
}



  *::before, *::after {
    box-sizing: border-box;
  } 
  
   button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 1px;
    vertical-align: middle;
    text-decoration: none;
    /* font-size: 0.6rem; */
    font-size: calc(8px + (13 - 8) * ((100vw - 300px) / (1600 - 300)));
    background-color: var(--couleurBouton);
    color: rgb(7, 7, 7);
    border-radius: 12px;
    padding: 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: inherit;
    box-shadow: 0 2px rgb(241, 244, 255);
    border: 2px solid rgba(207, 213, 223, 0.5);

  } 

   button:hover {
    background-color:  var(--couleurBoutonHover);
        box-shadow: 0 2px rgb(219, 225, 245);
        border: 2px solid rgba(207, 213, 223, 0.993);
  } 

  button:active {
    background-color:hotpink;
      /* background: #f1f1f1; */
      /* border: 1px solid rgba(161, 161, 161, 0.664); */
      background-color: rgb(229, 234, 253);
      box-shadow: 1px 1px 2px #ffffffe7;
      /* color: #000000; */
      text-decoration: none;
      /* text-shadow: -1px -1px 0 #000000; */
      transition: all 250ms linear;

  }

  





/* // Pour le bouton d'avant //

/* :root {
    --backgroundColor: rgba(246, 241, 209);
    --colorShadeA: rgb(167, 167, 167);
    --colorShadeB: rgb(189, 189, 189);
    --colorShadeC: rgb(239, 241, 241);
    --colorShadeD: rgb(225, 226, 226);
    --colorShadeE: rgb(255, 255, 255);
  }
  
  @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
  * {
    box-sizing: border-box;
  }
  *::before, *::after {
    box-sizing: border-box;
  }
  
  button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: 0.6rem;
      color:var(--colorShadeA);
    font-weight: 700;
    text-transform: uppercase;
    font-family: inherit;
  }
  
  button.big-button {
     padding: 1em 2em;
     border: 2px solid var(--colorShadeA);
    border-radius: 1em;
    background: var(--colorShadeE);
  transform-style: preserve-3d;
     transition: all 175ms cubic-bezier(0, 0, 1, 1);
  }
  button.big-button::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeE);
    border-radius: inherit;
      box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
   transform: translate3d(0, 0.75em, -1em);
       transition: all 175ms cubic-bezier(0, 0, 1, 1);
  }
  
  
  button.big-button:hover {
    background: var(--colorShadeE);
    transform: translate(0, 0.375em);
  }
  
  button.big-button:hover::before {
    transform: translate3d(0, 0.75em, -1em);
  }
  
  button.big-button:active {
              transform: translate(0em, 0.75em);
  }
  
  button.big-button:active::before {
    transform: translate3d(0, 0, -1em);
    
        box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
  
  }
  
  /* //////////////////////////// POUR AVOIR LA POLICE DE LA LEGENDE /////////////////////////// */
  

  /*
.legendeRect{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: red;
  padding-left: 22em;
  padding-right:22em;
  font-family: inherit, 'SUN', 'Montserrat';
  font-size: 0.5em;
  text-transform: uppercase;
  padding-bottom: 2em;
  padding-top: 2em;

  }


#moyenneTrumpRect{
  background-color: #fee054;
  height: 17px;
  width: 30px;
  border-radius: 2px;
float:left;
margin-right:1.5em;
}

#moyenneTruthRect{
  background-color: #1da1f2;
  height: 17px;
  width: 30px;
  border-radius: 2px;
  float: left;
  margin-right:1.5em;
}

#moyenneLieRect{
 background-color:#f67867;
 height: 17px;
 width: 30px;
 border-radius: 2px;
 float: left;
 margin-right:1.5em;
}

*/