.bout{
            background: #000000;
            background: linear-gradient(45deg,rgba(0, 0, 0, 1) 19%, rgba(117, 20, 20, 1) 58%, rgba(237, 221, 83, 1) 100%);
            color: lightblue;
            border-radius: 50% 5% 50% 5%;
            cursor: pointer;
      }
      .bout:hover{
            background: rgba(0, 0, 0, 0.6); 
            color: orangered;
            border-radius: 5% 50% 5% 50%;
            cursor: pointer;
      }

      .bout_news{
            background: #000000;
            background: linear-gradient(45deg,rgba(0, 0, 0, 1) 19%, rgba(117, 20, 20, 1) 58%, rgba(237, 221, 83, 1) 100%);
            color: lightblue;
            border-radius: 50% 5% 50% 5%;
      }
      .bout_news:hover{
            background: rgba(0, 0, 0, 0.6); 
            color: lightyellow;
            border-radius: 5% 50% 5% 50%;
      }

      
      .infobulle {
          position: relative;  /* les .infobulle deviennent référents */
          cursor: help;
        }
        #div{
          width:200px;
          height: 200px;
        }
       
        a span{ 
          display:none;
          color:#fff;
          background:rgba(255, 87, 51,0.75);
          padding:10px;
          font-size:10px;
          border-radius:4px;
          -moz-border-radius:4px;
          -webkit-border-radius:4px;
          width:100px;
          text-align:center;
          position: absolute;
          z-index:10;
        }
        a { 
          display: inline-block;
        }
        a:hover span{ 
          display:block; 
        }

        

/*Menu lateral*/


  #lateral-panel{
  z-index: 29999;                  /* pour être au dessus des autres éléments */
  position: fixed;                /* ne suit pas le scroll de la page et sert de réfèrent */
  top: 300px;                         /* position en haut */
  left: 0;                        /* à gauche */
  width: 28%;                    /* valeur de largeur pour tout le contenu */
  min-height: 100vh;              /* occupe toute la hauteur du viewport */
  transform: translateX(-100%);   /* on déplace à gauche pour ne pas interférer avec le document */
}
  #lateral-panel-input {
  position: absolute;           /* pour sortir l'élément du flux */
  left: -999em;                 /* position hors de la fenêtre */
}

  id="lateral-panel-input">.

#lateral-panel-bloc {
  /*-- positions et dimensions --*/
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /*-- visuel --*/
  border-right: 1px solid #CCC;
  background: #FFF;
  transition: transform .5s;    /* pour animation du panneau */
}

  #lateral-panel-label {
  /*-- positions et dimensions --*/
  z-index: 1;                   /* on le met au dessus */
  position: absolute;           /* pour sortir l'élément du flux, il va bouger */
  top: .5em;                    /* on décolle légèrement du haut */
  left: 100%;                   /* alignement sur le bord droit du parent */
  width: 2em;                   /* dimensions respectables */
  height: 3em;
  /*-- visuel --*/
  border: 1px solid #CCC;
  border-width: 1px 1px 1px 0;
  border-radius: 0 .5em .5em 0;
  font-size: inherit;
  background: #FFF;
  transition: all .5s;          /* pour animation éventuelle */
  cursor: pointer;
}
  
  #lateral-panel-content {
  padding: .5em;                /* on décolle le contenu du bord */
  overflow: auto;               /* rien ne doit déborder */
  max-height: 100%;             /* pas plus haut que son parent */
  box-sizing: border-box;       /* modèle de boîte, plus simple à gérer */
}

  #lateral-panel-input1:checked ~ #lateral-panel-bloc {
  transform: translateX(100%);  /* translation vers la droite de 100% */
  }

  #lateral-panel-input2:checked ~ #lateral-panel-bloc {
  transform: translateX(100%);  /* translation vers la droite de 100% */
  }

  #lateral-panel-label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  border: .5em solid currentColor;
  border-width: .5em .5em 0 0;
  color: #888;
  transition: all .5s;
  transform: translate(-50%, -50%) rotate(45deg);
}

  #lateral-panel-input1:checked ~ #lateral-panel-bloc #lateral-panel-label:before {
  transform: translate(-50%, -50%) rotate(-135deg);
  }
  #lateral-panel-input2:checked ~ #lateral-panel-bloc #lateral-panel-label:before {
  transform: translate(-50%, -50%) rotate(-135deg);
  }