/* CSS Document */
#numeros_bulle {
	display: flex;
}
.case_bulle {
	position: relative;
	margin:0px 5px;
	font-size: 1.2em;
	text-decoration: none;
	color:#0D5A90;
	border : 1px solid #0D5A90;
	background-color: #A5D4F6 ;
	padding: 2px 4px 2px 4px;
	border-radius: 18px;
	text-align: center;
}
.bulle_index h3 {
	margin:35px 0 5px 0;
}
.bulle_index li {
	margin:0 0 10px 0;
}
/*_________________________________________
pour afficher une info bulle au survol d'un numéro
------------------------------------------*/
.case_bulle:hover:after, .case_bulle:focus:after {
	content: attr(aria-label);  /* on affiche aria-label (le titre) */
	position: absolute;
	top: 2em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
	z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
	white-space: pre;  /* permet le retour à la ligne si dans le texte on insère "\n"*/
	padding: 5px 14px;
	background: #A5D4F6;
	border: solid 1px #0D5A90;
	border-radius: 4px;
	font-size: 1rem;
	z-index: 20;
}
.case_bulle[aria-label]:hover:before, .case_bulle[aria-label]:focus:before {
	content: "▼";
	position: absolute;
	top: -1.2em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
	font-size: 12px;
	color: #fff;
}

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

/*_________________________________________
menu dans la partie index de la bulle
------------------------------------------*/
.case_bulle[aria-label]:hover:before, .case_bulle[aria-label]:focus:before {
	color: #0D5A90;
}
article #bandeau_menu [aria-label]:hover:before, article #bandeau_menu [aria-label]:focus:before {
	color: #0D5A90;
}
article #bandeau_menu .case_bulle:hover:after,
article #bandeau_menu .case_bulle:focus:after {
	color : #0D5A90;	
}