From b9589a29bc72a590d0770f8a91c5c34a2fc941dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Tansorier?= <mickael.tansorier@openwide.fr>
Date: Sat, 27 May 2017 23:15:15 +0200
Subject: [PATCH] [projet_perso-associations][css] Add infobulle and circumflex
 accent

---
 assets/css/main.css            | 41 ++++++++++++++++++++++++++++++++++
 projet_perso-associations.html |  4 ++--
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 8af7e84..6eac750 100644
--- a/assets/css/main.css
+++ b/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 {
diff --git a/projet_perso-associations.html b/projet_perso-associations.html
index aca1ae9..9110a68 100644
--- a/projet_perso-associations.html
+++ b/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>