/*------------------- info-bulles ---------------------*/
.info-bulle { position: relative; }
.info-bulle:hover::after,
.info-bulle:focus::after {
  content: attr(aria-label);
  position: absolute;
  top: +3.3em;
  left: 50%;
  
   display: inline-block;
  
  transform: translateX(-50%); 
  z-index: 1;
  
  white-space: nowrap;  
  padding: 4px 5px;
  background: #e6e8ec;
  color: #333;
  border-radius: 4px;
  border: 1px solid #000;
  font-size: 9px;
  font-weight: normal;
  text-transform:uppercase;
  letter-spacing:0px;
  
  opacity: 0;
  animation-name: change_opacite;
  animation-iteration-count: 1;
  animation-duration: 1s;  
}

.info-bulleXX:hover::before {
  content: 'YANN GENNNINASCA';
  position: absolute;
  bottom: -26px;
  left: -40px;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 2px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-family: sans-serif;
  white-space: nowrap;
  z-index: 1;
}

.info-bulle-bottom {  }

/* pas de contour durant le :focus */
[aria-label]:focus { outline: none; }


@keyframes change_opacite {
  0% 	{ opacity: 1; } 
  100%  { opacity: 1; }
}