/* ====================== */
/*   TOOLTIP HOVER MAP    */
/* ====================== */

/* rehausser la cellule survolée pour que le tooltip passe au dessus des voisines */
table.map A:hover { z-index:40; }

table.map A>div>.tip
{	display:none;
	position:absolute;
	bottom:calc(100% + 1em);
	left:50%;
	transform:translateX(-50%);
	background:RGBA(0,12,25,.95);
	border:1px solid RGBA(0,125,250,.3);
	border-radius:.5em;
	padding:.8em 1.2em;
	z-index:200;
	pointer-events:none;
	white-space:nowrap;
	text-align:center;
	box-shadow:0 .3em 1.2em RGBA(0,0,0,.7);
	line-height:1.3;
	min-width:8em;
}

table.map A>div:hover>.tip
{	display:block;
}

/* flèche en bas */
table.map A>div>.tip::after
{	content:'';
	position:absolute;
	top:100%;
	left:50%;
	transform:translateX(-50%);
	border:.5em solid transparent;
	border-top-color:RGBA(0,12,25,.95);
}

/* avatar */
table.map A>div>.tip>img
{
	width:4em;
	height:4em;

	border-radius:.25em;
	border:2px solid RGBA(0,125,250,.4);

	display:block;
	margin:0 auto .5em auto;

	object-fit:cover;
	pointer-events:none;
	background:#000;
}

/* nom */
table.map A>div>.tip>b
{	display:block;
	font-size:.95rem;
	font-weight:bold;
	color:white;
	margin-bottom:.25em;
}

/* ligue + métropole */
table.map A>div>.tip>span
{	display:block;
	font-size:.8rem;
	color:RGBA(255,255,255,.5);
	line-height:1.5;
}

table.map A>div>.tip>span.league
{	color:RGBA(135,255,255,.7);
}

table.map A>div>.tip>span.metro_tip
{	color:RGBA(255,255,150,.6);
}