.infobulle {position: relative;}

/* Abréviation */
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.2em) scale(1.5) rotate(10deg);
}
abbr.infobulle:hover:after {}

/* Infobulle */
.infobulle:before
{
content: attr(data-title);
z-index: 1;
display: block;
position: absolute;
box-sizing: border-box;
min-width: var(--taille);
left: var(--left);
right: var(--right);
top: 1.75em;
background: var(--fond);
padding: calc(0.4em + 4px) 0.55em 0.4em 0.55em;
border-radius: 2px;
color: var(--texte);
font-size: 0.9rem;
font-weight: 600;
text-align: center;
text-shadow: none;
transform: perspective(500px) rotateX(-90deg);
transform-origin: top;
transition: transform 0.25s;
mask-image: var(--masqueImg);
mask-size: 512px 512px;
mask-position: var(--masquePos) top;
}
.infobulle:hover:before {transform: perspective(500px) rotateX(0deg);}