Ajout d'une infobulle pour specifier les limites du calcul des retraite

source/components/SchemeComparaison.css

@@ -172,6 +172,7 @@
 	}
 	.comparaison-grid > .legend {
 		justify-content: start;
+		align-items: baseline;
 		text-align: left;
 	}
 	.comparaison-grid > * {

source/components/SchemeComparaison.js

@@ -21,6 +21,7 @@ import { branchAnalyseSelector } from 'Selectors/analyseSelectors'
 import { règleAvecMontantSelector } from 'Selectors/regleSelectors'
 import Animate from 'Ui/animate'
 import AnimatedTargetValue from 'Ui/AnimatedTargetValue'
+import InfoBulle from 'Ui/InfoBulle'
 import './SchemeComparaison.css'
 
 import type { RègleAvecMontant } from 'Types/RegleTypes'
@@ -293,7 +294,11 @@ const SchemeComparaison = ({
 					</div>
 					<T k="comparaisonRégimes.retraiteEstimation">
 						<h3 className="legend">
-							Votre pension de retraite <small>(estimation)</small>
+							<span>
+								Pension de retraite{' '}
+								<InfoBulle text="calculée pour 172 trimestres cotisés dans ce régime sans variations de revenus" />
+							</span>
+							<small>(avant impôts)</small>
 						</h3>
 					</T>
 					<div className="AS">

source/components/ui/InfoBulle.css

@@ -0,0 +1,41 @@
+.info-bulle__interrogation-mark {
+	position: relative;
+	color: var(--colour);
+	border: 1px solid var(--colour);
+	display: inline-block;
+	border-radius: 50%;
+
+	font-weight: bold;
+	font-size: 75%;
+	user-select: none;
+	width: 1.5em;
+	height: 1.5em;
+	text-align: center;
+}
+.info-bulle__interrogation-mark:focus {
+	outline: 1px dotted var(--darkColour);
+}
+.info-bulle__text {
+	position: absolute;
+	z-index: 1;
+	border: 1px solid var(--colour);
+	padding: 0.3rem;
+	font-weight: normal;
+	display: block;
+	border-radius: 3px;
+	font-family: 'Roboto';
+	font-size: 0.8rem;
+	background-color: white;
+	transition: opacity 0.2s, transform 0.2s;
+	opacity: 0;
+	transform: translateY(-5px);
+}
+
+.info-bulle__interrogation-mark:hover + .info-bulle__text,
+.info-bulle__interrogation-mark:focus + .info-bulle__text {
+	transform: translateY(1px);
+	opacity: 1;
+}
+.info-bulle__interrogation-mark:focus {
+	position: relative;
+}

source/components/ui/InfoBulle.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import './InfoBulle.css'
+
+export default function InfoBulle({ text }) {
+	return (
+		<span style={{ position: 'relative', verticalAlign: 'bottom' }}>
+			<span className="info-bulle__interrogation-mark" tabIndex="0">
+				?
+			</span>
+			<span className="info-bulle__text">{text}</span>
+		</span>
+	)
+}