[projet_perso-associations][css] Add infobulle and circumflex accent

assets/css/main.css

@@ -1703,6 +1703,47 @@
 		font-size: 0.8em;
 	}
 
+	.infobulle {
+		position: relative;  /* les .infobulle deviennent référents */
+		/*cursor: help;*/
+	}
+
+	/* on génère un élément :after lors du survol et du focus :*/
+	.infobulle:hover::after,
+	.infobulle:focus::after {
+		content: attr(texte-infobulle);  /* on affiche aria-label */
+		position: absolute;
+		top: -2.2em;
+		left: 50%;
+		transform: translateX(-10%); /* on centre horizontalement  */
+		z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
+		white-space: nowrap;  /* on interdit le retour à la ligne */
+		padding: 0px 5px;
+		line-height: 20px;
+		background: #CACACA;
+		color: #fff;
+		border-radius: 4px;
+		font-size: 12px;
+		font-weight: normal;
+	}
+
+	/* on génère un second élément en :before pour la flèche */
+	[texte-infobulle]:hover:before,
+	[texte-infobulle]:focus:before {
+		content: "▼";
+		position: absolute;
+		top: -1.4em;
+		left: 50%;
+		transform: translateX(-50%); /* on centre horizontalement  */
+		font-size: 12px;
+		color: #CACACA;
+	}
+
+	/* pas de contour durant le :focus */
+	[texte-infobulle]:focus {
+		outline: none;
+	}
+
 /* Sections/Article */
 
 	section, article {

projet_perso-associations.html

@@ -122,7 +122,7 @@
 
 									<section id="SPHERE">
 										<header>
-											<u><h3>SPHERE: Association des anciens de l’EMSIM</h3></u>
+											<u><h3>SPHERE: Association des anciens de l’<span class="infobulle" texte-infobulle="École National Supérieur d’Ingénieur du Mans">EMSIM</span></h3></u>
 										</header>
 										<p>
 											SPHERE est l'association des anciens de l'École National Supérieur d’Ingénieur du Mans.
@@ -140,7 +140,7 @@
 											<u><h3>BilurFest’: Festival de Musique</h3></u>
 										</header>
 										<p>
-											Le BilurFest’ est un festival de musique organisé par une bande d’amis qui aime la musique et les festivals. La première édition s’est tenue le 30 mai 2015 à Bouloire (un village de Sarthe), et a rassemblé plus de 500 personnes. Depuis nous continuions dans la meme dynamique.
+											Le BilurFest’ est un festival de musique organisé par une bande d’amis qui aime la musique et les festivals. La première édition s’est tenue le 30 mai 2015 à Bouloire (un village de Sarthe), et a rassemblé plus de 500 personnes. Depuis nous continuions dans la m&ecirc;me dynamique.
 											Je suis <b>membre</b> actifs au jours de l'événement.
 										</p>
 										<p>