docs(markup): better <cite> usage to fix #50

_site/templates/accueil.njk

@@ -102,7 +102,7 @@
 	<p>
 		Pour d’autres astuces utiles, je vous recommande chaleureusement la lecture
 		du <a hreflang="en" href="https://inclusive-components.design/data-tables/">
-			composant inclusif <em lang="en">Data Tables</em> de <cite>Heydon Pickering</cite></a>,
+			composant inclusif <em lang="en">Data Tables</em> de <strong>Heydon Pickering</strong></a>,
 		qui est une véritable mine d’or.
 	</p>
 
@@ -128,7 +128,7 @@
 		<li>
 			pour ne pas embarquer trop de fichiers externes, on utilise
 			<a hreflang="en" href="https://www.trysmudford.com/blog/using-css-custom-properties/">une technique
-				proposée par <cite>Trys Mudford</cite> pour inclure nos
+				proposée par <strong>Trys Mudford</strong> pour inclure nos
 				<abbr lang="en" title="Scalable Vector Graphics" aria-label="Scalable Vector Graphics">svg</abbr>
 				en <i lang="en">data URi</i> dans une variable
 				<abbr lang="en" title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr> chacun</a>&nbsp;;
@@ -141,7 +141,7 @@
 	<div class="note">
 		<h4>Qu’encoder&nbsp;?</h4>
 		<p>
-			<a hreflang="en" href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris"><cite>Taylor Hunt</cite>
+			<a hreflang="en" href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris"><strong>Taylor Hunt</strong>
 				a rédigé un article complet sur l’optimisation des
 				<abbr lang="en" title="Scalable Vector Graphics" aria-label="Scalable Vector Graphics">svg</abbr>
 				passés en <i lang="en">data URi</i></a>. En résumé, seuls les chevrons et le
@@ -169,10 +169,10 @@
 			de
 			<code>-ms-high-contrast: active</code>, inspiré par
 			<a hreflang="en" href="https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">
-				l’article de <cite>Greg Whitworth</cite></a> sur le sujet. Je vous conseille d’ailleurs
+				l’article de <strong>Greg Whitworth</strong></a> sur le sujet. Je vous conseille d’ailleurs
 			<a hreflang="en" href="http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html">
-				l’increvable page <q lang="en">Test of System Colors Specified in CSS 2</q> rédigée
-				par <cite>Ian Graham</cite></a>, éditée en… 2000&nbsp;!
+				l’increvable page <cite lang="en">Test of System Colors Specified in CSS 2</cite> rédigée
+				par <strong>Ian Graham</strong></a>, éditée en… 2000&nbsp;!
 		</li>
 		<li>
 			les <strong>animations et transitions sont désactivées</strong> lorsque le système
@@ -186,7 +186,7 @@
 
 	<h3><code>display</code> et sémantique</h3>
 	<p>
-		<cite>Adrian Roselli</cite> explique que jouer avec le <code>display</code> d’un élément
+		<strong>Adrian Roselli</strong> explique que jouer avec le <code>display</code> d’un élément
 		<code>&lt;table&gt;</code> ou <code>&lt;dl&gt;</code> met en péril sa sémantique.
 		Cette dernière est donc «&nbsp;verrouillée&nbsp;» à l’aide des rôles
 		<abbr lang="en" title="Accessible Rich Internet Application"
@@ -198,7 +198,7 @@
 	<p>
 		C’est pourquoi chaque tableau est précédé d’un interrupteur —&nbsp;basé sur
 		<a hreflang="en" href="https://inclusive-components.design/toggle-button/">le composant inclusif
-			conçu par <cite>Heydon Pickering</cite></a>&nbsp;—
+			conçu par <strong>Heydon Pickering</strong></a>&nbsp;—
 		dont le seul et unique rôle est de désactiver les styles supplémentaires&nbsp;:
 	</p>
 

_site/templates/bar-charts.njk

@@ -42,7 +42,7 @@
 		(in our example, a timeline).
 		It's based on <strong>CSS grids and custom properties</strong>,
 		a technique inspired by
-		<a href="https://css-tricks.com/css-charts-grid-custom-properties/">an article by <cite>Miriam Suzanne</cite> on
+		<a href="https://css-tricks.com/css-charts-grid-custom-properties/">an article by <strong>Miriam Suzanne</strong> on
 			<abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">CSS</abbr> Tricks</a>
 		with a slight enhancement to improve accessibility.
 		Here's how to use it:
@@ -62,8 +62,8 @@
 				<li>
 					and finally the last column measuring <code>10ch</code>, literally meaning enough space for ten "0" characters
 					have a look to <a href="https://every-layout.dev/rudiments/units/#the-ch-and-ex-units">CSS
-						units rudiments, documented in <em>Every Layout</em> by <cite>Andy Bell</cite> and <cite>Heydon
-							Pickering</cite></a>.
+						units rudiments, documented in <em>Every Layout</em> by <strong>Andy Bell</strong> and <strong>Heydon
+							Pickering</strong></a>.
 				</li>
 			</ul>
 		</li>

_site/templates/barres.njk

@@ -42,8 +42,8 @@
 		(dans notre exemple, une ligne de temps).
 		Il repose sur les <strong>grilles et les variables CSS</strong>,
 		technique inspirée
-		d’<a hreflang="en" href="https://css-tricks.com/css-charts-grid-custom-properties/">un article de <cite>Miriam
-				Suzanne</cite> sur
+		d’<a hreflang="en" href="https://css-tricks.com/css-charts-grid-custom-properties/">un article de <strong>Miriam
+				Suzanne</strong> sur
 			<abbr lang="en" title="Cascading StyleSheet" aria-label="Cascading StyleSheet">CSS</abbr> Tricks</a>
 		légèrement agrémentée pour en améliorer l’accessibilité.
 		Pour vous en servir, c’est simple&nbsp;:
@@ -64,8 +64,8 @@
 					enfin une dernière colonne mesurant <code>10ch</code>, soit l’espace suffisant pour dix lettres —&nbsp;jetez
 					un œil
 					<a hreflang="en" href="https://every-layout.dev/rudiments/units/#the-ch-and-ex-units">rudiments
-						concernant les unités CSS, documentés dans <em lang="en">Every Layout</em> par <cite>Andy Bell</cite> et
-						<cite>Heydon Pickering</cite></a>.
+						concernant les unités CSS, documentés dans <em lang="en">Every Layout</em> par <strong>Andy Bell</strong> et
+						<strong>Heydon Pickering</strong></a>.
 				</li>
 			</ul>
 		</li>
@@ -84,8 +84,8 @@
 			balisée avec <code>&lt;abbr&gt;</code> (et <code>aria-label</code> pour suppléer <code>title</code>) si un
 			intitulé peut être explicité pour l’unité.
 			Cette valeur est poussée à droite de la grille, et son texte sert de masque pour le dégradé en arrière-plan
-			—&nbsp;grâce à <a hreflang="en" href="https://twitter.com/shshaw/status/1140637533539377153">une astuce de S.
-				Shaw's pour
+			—&nbsp;grâce à <a hreflang="en" href="https://twitter.com/shshaw/status/1140637533539377153">une astuce de <strong>S.
+				Shaw</strong>'s pour
 				appliquer <code>background-clip: text</code> en amélioration progressive</a> —&nbsp;lui permettant d’être de la
 			couleur correspondante
 			à la fin du dégradé pour la position donnée.

_site/templates/camembert.njk

@@ -70,7 +70,7 @@
 				<li>
 					Et enfin une série de variables <em>booléennes</em> valant chacune <var>0</var> ou <var>1</var>
 					—&nbsp;d’après une idée de <a hreflang="en" href="https://www.kizu.ru/conditions-for-css-variables/">
-						<cite>Roman Komarov</cite> dans son article <em lang="en">"Conditions for CSS variables"</em></a>&nbsp;—
+						<strong>Roman Komarov</strong> dans son article <cite lang="en">"Conditions for CSS variables"</cite></a>&nbsp;—
 					dépendent de la valeur&nbsp;: <var>--lt-25</var>, <var>--gt-25</var>, <var>--lt-50</var>…
 					Elles permettent de <strong>faire basculer les points</strong> de leur position d’origine
 					(<code>50% 50%</code>) à leur position calculée, en s’additionnant ou se soustrayant
@@ -90,7 +90,7 @@
 					<a hreflang="en" href="https://caniuse.com/#search=mask-image">pour tous les navigateurs basés sur WebKit</a>,
 					on utilise une variable CSS pour <strong>éviter la duplication de leurs valeurs</strong>
 					—&nbsp;<a hreflang="en" href="https://css-irl.info/7-uses-for-css-custom-properties/">astuce
-						partagée par <cite>Michelle Barker</cite> dans <em lang="en">"7 uses for CSS custom properties"</em></a>.
+						partagée par <strong>Michelle Barker</strong> dans <cite lang="en">"7 uses for CSS custom properties"</cite></a>.
 				</li>
 			</ul>
 		</li>
@@ -106,15 +106,15 @@
 				<li>
 					Encore une fois on recycle <a hreflang="en"
 																				href="https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab">
-						une astuce de <cite>Cassie Evans</cite> basée sur <code>counter-reset</code> et sa valeur par défaut
+						une astuce de <strong>Cassie Evans</strong> basée sur <code>counter-reset</code> et sa valeur par défaut
 						pour <strong>convertir</strong> notre variable <var>--value</var> en chaîne</a>.
 				</li>
 				<li>
 					Cependant <code>counter-reset</code> ne fonctionne qu’avec un entier et notre valeur peut être un nombre.
 					Alors on s’appuie sur
 					<a hreflang="en" href="https://css-tricks.com/animating-number-counters/#the-new-school-css-solution">une ruse
 						de
-						<cite>Carter Li</cite> utilisant <code>calc()</code> pour convertir les nombres en entiers —&nbsp;et
+						<strong>Carter Li</strong> utilisant <code>calc()</code> pour convertir les nombres en entiers —&nbsp;et
 						<code>@property</code> pour les navigateurs basés sur Chromium</a>. Boum&nbsp;!
 				</li>
 			</ul>
@@ -193,7 +193,7 @@
 				et ainsi obtenir la position du point sur le cercle.
 				Cela implique de calculer le sinus… Fort heureusement,
 				<a href="https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97"
-					 hreflang="en"><cite>Stereokai</cite> a implémenté pour nous
+					 hreflang="en"><strong>Stereokai</strong> a implémenté pour nous
 					la représentation polynomiale de Taylor/Maclaurin en CSS</a> —&nbsp;que j’ai implémentée sour forme d’un <em
 					lang="en">mixin</em>&nbsp;:
 			</p>
@@ -585,7 +585,7 @@
 		qui permet de déterminer la dimension du trou du <em lang="en">donut</em>,
 		généré à l’aide de <code>mask-image</code> et <code>radial-gradient()</code>.
 		<a href="https://codepen.io/thebabydino/pens/tags/?selected_tag=mask" hreflang="en">
-			<cite>Ana Tudor</cite> a réalisé de très nombreux exemples
+			<strong>Ana Tudor</strong> a réalisé de très nombreux exemples
 			d’utilisation des <code>mask-*</code> sur CodePen</a>, jetez-y un œil&nbsp;!
 	</p>
 
@@ -634,7 +634,7 @@
 		<h3>Dégradé conique</h3>
 		<p>
 			L’utilisation de <code>conic-gradient()</code> est prometteuse pour ce cas précis.
-			Vous en trouverez des exemples réalisés par <cite>Ana Tudor</cite> ou <cite>Léa Verou</cite> —&nbsp;qui a
+			Vous en trouverez des exemples réalisés par <strong>Ana Tudor</strong> ou <strong>Léa Verou</strong> —&nbsp;qui a
 			carrément rédigé la spécification,
 			et conçu <a href="https://leaverou.github.io/conic-gradient/" hreflang="en">un <em lang="en">polyfill</em></a>.
 			Cependant le <a href="https://caniuse.com/#search=conic-gradient" hreflang="en">support limité aux navigateurs

_site/templates/column-charts.njk

@@ -43,9 +43,9 @@
 		<code>display: grid;</code> and especially <code>display: contents;</code> to
 		<strong>facilitate the placement of the cells</strong> —&nbsp;technique inspired by
 		<a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">
-			<cite>Hidde De Vries</cite>'s article <q>More accessible markup with <code>display: contents</code></q></a>,
+			<strong>Hidde De Vries</strong>'s article <cite>More accessible markup with <code>display: contents</code></cite></a>,
 		and clarified by <a href="https://bitsofco.de/how-display-contents-works/">
-			<cite>Ire Aderinokun</cite>'s post <q>How <code>display: contents</code> works</q></a>.
+			<strong>Ire Aderinokun</strong>'s post <cite>How <code>display: contents</code> works</cite></a>.
 	</p>
 
 	<p>The basic principle is the same as <a href="./bar-charts.html">the bar charts</a>:</p>
@@ -54,7 +54,7 @@
 			the first grid row is the reserved to display value in case it reaches scale's max value,
 			with a fixed size of <code>2ex</code>
 			— have a look to <a href="https://every-layout.dev/rudiments/units/#the-ch-and-ex-units">CSS
-				units rudiments, documented in <em>Every Layout</em> by <cite>Andy Bell</cite> and <cite>Heydon Pickering</cite></a>&nbsp;;
+				units rudiments, documented in <em>Every Layout</em> by <strong>Andy Bell</strong> and <strong>Heydon Pickering</strong></a>&nbsp;;
 		</li>
 		<li>
 			the <code>repeat()</code> function applied with the <var>--scale</var> custom property
@@ -146,7 +146,7 @@
 				<li>
 					and finally add an <strong>identifier</strong> to each header cell
 					to referenced them to the relevant data cells —&nbsp;using the
-					<code>headers</code> attribute, par exemple pour la première cellule:
+					<code>headers</code> attribute, eg. for the first cell:
 					<code>headers="browser chrome year chrome-2018"</code> where each value
 					is a header cell's identifier.
 				</li>

_site/templates/courbe.njk

@@ -85,7 +85,7 @@
 						un préfixe <code>-webkit-</code> pour Safari</a>, on utilise une variable CSS pour <strong>éviter la
 						duplication</strong> du <code>polygon()</code> —&nbsp;<a hreflang="en"
 																																		 href="https://css-irl.info/7-uses-for-css-custom-properties/">astuce
-						partagée par <cite>Michelle Barker</cite> dans <em lang="en">"7 uses for CSS custom properties"</em></a>.
+						partagée par <strong>Michelle Barker</strong> dans <cite lang="en">"7 uses for CSS custom properties"</cite></a>.
 				</li>
 			</ul>
 		</li>
@@ -97,7 +97,7 @@
 				<li>
 					l’affichage multiligne repose sur <a hreflang="en"
 																							 href="https://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/">une
-						astuce de <cite>Lea Verou</cite> utilisant <code>white-space: pre;</code> et le caractère
+						astuce de <strong>Lea Verou</strong> utilisant <code>white-space: pre;</code> et le caractère
 						<code>\A</code></a>&nbsp;;
 				</li>
 				<li>
@@ -106,13 +106,13 @@
 					des nombres.
 					Encore une fois on recycle <a hreflang="en"
 																				href="https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab">
-						une astuce de <cite>Cassie Evans</cite> basée sur <code>counter-reset</code> et sa valeur par défaut
+						une astuce de <strong>Cassie Evans</strong> basée sur <code>counter-reset</code> et sa valeur par défaut
 						pour <strong>convertir</strong> notre variable <var>--value</var> en chaîne</a>.
 					Cependant <code>counter-reset</code> ne fonctionne qu’avec un entier et notre valeur peut être un nombre.
 					Alors on s’appuie sur
 					<a hreflang="en" href="https://css-tricks.com/animating-number-counters/#the-new-school-css-solution">une ruse
 						de
-						<cite>Carter Li</cite> utilisant <code>calc()</code> pour convertir les nombres en entiers —&nbsp;et
+						<strong>Carter Li</strong> utilisant <code>calc()</code> pour convertir les nombres en entiers —&nbsp;et
 						<code>@property</code> pour les navigateurs basés sur Chromium</a>. Boum&nbsp;!
 				</li>
 				<li>Et finalement la propriété personnalisée <var>--unit</var> sert de finition.</li>
@@ -347,7 +347,7 @@
 		<h3>Note</h3>
 		<p>
 			Pour jouer d’avantage et vous familiariser avec <code>clip-path</code>,
-			<cite>Bennett Feely</cite> a créé
+			<strong>Bennett Feely</strong> a créé
 			<a hreflang="en" href="https://bennettfeely.com/clippy/">clippy</a>.
 		</p>
 	</div>

_site/templates/histogramme.njk

@@ -43,9 +43,9 @@
 		sur <code>display: grid;</code> et surtout <code>display: contents;</code> pour
 		<strong>faciliter le placement des cellules</strong> —&nbsp;technique inspirée par
 		<a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents" hreflang="en">l’article
-			de <cite>Hidde De Vries</cite> <q lang="en">More accessible markup with <code>display: contents</code></q></a>,
+			de <strong>Hidde De Vries</strong> <cite lang="en">More accessible markup with <code>display: contents</code></cite></a>,
 		et clarifiée par <a href="https://bitsofco.de/how-display-contents-works/" hreflang="en">l’article de
-			<cite>Ire Aderinokun</cite> <q lang="en">How <code>display: contents</code> works</q></a>.
+			<strong>Ire Aderinokun</strong> <cite lang="en">How <code>display: contents</code> works</cite></a>.
 	</p>
 
 	<p>Le principe de base est le même que <a href="./barres.html">le graphique en barre</a>&nbsp;:</p>
@@ -55,8 +55,8 @@
 			l’échelle,
 			avec une taille fixe de <code>2ex</code>
 			—&nbsp;jetez un œil <a hreflang="en" href="https://every-layout.dev/rudiments/units/#the-ch-and-ex-units">rudiments
-				concernant les unités CSS, documentés dans <em lang="en">Every Layout</em> par <cite>Andy Bell</cite> et <cite>Heydon
-					Pickering</cite></a>&nbsp;;
+				concernant les unités CSS, documentés dans <em lang="en">Every Layout</em> par <strong>Andy Bell</strong> et <strong>Heydon
+					Pickering</strong></a>&nbsp;;
 		</li>
 		<li>
 			la fonction <code>repeat()</code> appliquée avec la variable <var>--scale</var>

_site/templates/index.njk

@@ -116,7 +116,7 @@
 		<p>
 			For other useful tips, I warmly recommend reading
 			<a href="https://inclusive-components.design/data-tables/">
-				<em>Data Tables</em> Inclusive Component by <cite>Heydon Pickering</cite></a>,
+				<em>Data Tables</em> Inclusive Component by <strong>Heydon Pickering</strong></a>,
 			which is a real gold mine.
 		</p>
 
@@ -141,7 +141,7 @@
 			<li>
 				in order not to embed too many external files, we use a
 				<a href="https://www.trysmudford.com/blog/using-css-custom-properties/">
-					technique proposed by <cite>Trys Mudford</cite> to include each
+					technique proposed by <strong>Trys Mudford</strong> to include each
 					<abbr title="Scalable Vector Graphics" aria-label="Scalable Vector Graphics">svg</abbr>
 					in data URi in a <abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr> variable</a>;
 				thus, a finite list of patterns is used in the theme, without ever repeating the svg.
@@ -151,7 +151,7 @@
 		<div class="note">
 			<h4>What to encode?</h4>
 			<p>
-				<a href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris"><cite>Taylor Hunt</cite>
+				<a href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris"><strong>Taylor Hunt</strong>
 					a comprehensive article on optimizing past <abbr title="Scalable Vector Graphics"
 																													 aria-label="Scalable Vector Graphics">svg</abbr>
 					in URi data</a>. In summary, only the chevrons and the "#" character need to be encoded
@@ -177,10 +177,10 @@
 				colors are adjusted when <strong>Windows High Contrast Mode</strong> is detected using
 				<code>-ms-high-contrast: active</code>, inspired by
 				<a href="https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">
-					<cite>Greg Whitworth</cite> article</a> on the topic. I also recommend you
+					<strong>Greg Whitworth</strong> article</a> on the topic. I also recommend you
 				<a href="http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html">
-					<q>Test of System Colors Specified in CSS 2</q> rustproof page written by
-					<cite>Ian Graham</cite></a>, published in… 2000!
+					<cite>Test of System Colors Specified in CSS 2</cite> rustproof page written by
+					<strong>Ian Graham</strong></a>, published in… 2000!
 			</li>
 			<li>
 				<strong>animations and transitions are disabled</strong> when the system exposes
@@ -194,7 +194,7 @@
 
 		<h3><code>display</code> and semantics</h3>
 		<p>
-			<cite>Adrian Roselli</cite> explains that playing with a <code>&lt;table&gt;</code> or <code>&lt;dl&gt;</code>
+			<strong>Adrian Roselli</strong> explains that playing with a <code>&lt;table&gt;</code> or <code>&lt;dl&gt;</code>
 			element's <code>display</code> endangers its semantics.
 			The latter is therefoore "locked" using dedicated
 			<abbr title="Accessible Rich Internet Application" aria-label="Accessible Rich Internet Application">aria</abbr>
@@ -203,7 +203,7 @@
 		</p>
 		<p>
 			That's why each table is preceded by a switch —&nbsp;based on
-			<a href="https://inclusive-components.design/toggle-button/"><cite>Heydon Pickering</cite>
+			<a href="https://inclusive-components.design/toggle-button/"><strong>Heydon Pickering</strong>
 				inclusive toggle button</a>&nbsp;—
 			whose one and only role is to disable additional styles:
 		</p>