abbr.infobulle {}
abbr.infobulle:hover {text-decoration: underline;}
abbr.infobulle:after
{
content: '?';
display: inline-block;
position: relative;
margin-left: 0.2em;
margin-right: 0.2em;
font-size: 0.9em;
font-weight: 800;
vertical-align: middle;
transform: translateY(-0.1em) scale(1.5) rotate(10deg);
}
abbr.infobulle:hover:after {}

/* Infobulle */
abbr.infobulle:before
{
content: attr(data-title);
z-index: 1;
display: block;
position: absolute;
box-sizing: border-box;
max-width: 128px;
margin-top: 1.6em;
padding: calc(0.4em + 4px) 0.55em 0.4em 0.55em;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
text-align: center;
transform: perspective(500px) rotateX(-90deg);
transform-origin: top;
transition: transform 0.25s;
}
abbr.infobulle:hover:before {transform: perspective(500px) rotateX(0deg);}

/* COULEURS */

/* Noir */
abbr.infobulle:before
{
background: url(InfobulleN.svg) no-repeat left top;
color: white;
}
/* Blanc */
/*abbr.infobulle:before
{
background: url(InfobulleB.svg) no-repeat left top;
box-shadow: 0 0.3em 0.3em rgba(0,0,0,0.25);
color: rgb(50,50,50);
}*/