diff --git a/source/components/AnimatedTargetValue.css b/source/components/AnimatedTargetValue.css
new file mode 100644
index 000000000..53f27f91a
--- /dev/null
+++ b/source/components/AnimatedTargetValue.css
@@ -0,0 +1,17 @@
+.Rule-value {
+	transition: background 0.8s;
+	font-size: 105%;
+}
+.Rule-value .figure {
+	font-weight: bold;
+}
+
+/* Animation of summary figures changes : flash ! */
+.flash-enter {
+	background: rgba(255, 255, 255, 1);
+}
+
+.flash-leave {
+	/* Completely hide the button while it's being animated and before it's removed from the DOM. */
+	display: none;
+}
diff --git a/source/components/AnimatedTargetValue.js b/source/components/AnimatedTargetValue.js
new file mode 100644
index 000000000..ded3ae151
--- /dev/null
+++ b/source/components/AnimatedTargetValue.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import withLanguage from './withLanguage'
+
+import './AnimatedTargetValue.css'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+
+@withLanguage
+class AnimatedTargetValue extends Component {
+	render() {
+		let { value, language } = this.props
+		let formattedValue =
+			value == null
+				? ''
+				: Intl.NumberFormat(language, {
+						style: 'currency',
+						currency: 'EUR',
+						maximumFractionDigits: 0,
+						minimumFractionDigits: 0
+				  }).format(value)
+		return (
+			<ReactCSSTransitionGroup
+				transitionName="flash"
+				transitionEnterTimeout={100}
+				transitionLeaveTimeout={100}>
+				<span key={value} className="Rule-value">
+					{' '}
+					<span>{formattedValue}</span>
+				</span>
+			</ReactCSSTransitionGroup>
+		)
+	}
+}
+
+export default AnimatedTargetValue
diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 2a275ff88..17bbfbc0f 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -16,7 +16,7 @@ import {
 import BlueButton from './BlueButton'
 import CurrencyInput from './CurrencyInput/CurrencyInput'
 import ProgressCircle from './ProgressCircle/ProgressCircle'
-import { RuleValue } from './rule/RuleValueVignette'
+import AnimatedTargetValue from './AnimatedTargetValue'
 import './TargetSelection.css'
 import withLanguage from './withLanguage'
 import Controls from './Controls'
@@ -236,15 +236,7 @@ let TargetInputOrValue = withLanguage(
 )
 class TargetValue extends Component {
 	render() {
-		let {
-			targets,
-			target,
-			setFormValue,
-			activeInput,
-			setActiveInput,
-			noUserInput,
-			blockingInputControls
-		} = this.props
+		let { targets, target, noUserInput, blockingInputControls } = this.props
 
 		let targetWithValue =
 				targets && targets.find(propEq('dottedName', target.dottedName)),
@@ -257,16 +249,21 @@ class TargetValue extends Component {
 					attractClick:
 						target.question && (noUserInput || blockingInputControls)
 				})}
-				onClick={() => {
-					if (!target.question) return
-					if (value != null)
-						setFormValue(target.dottedName, Math.floor(value) + '')
-
-					if (activeInput) setFormValue(activeInput, '')
-					setActiveInput(target.dottedName)
-				}}>
-				<RuleValue value={value} />
+				tabIndex="0"
+				onClick={this.showField(value)}
+				onFocus={this.showField(value)}>
+				<AnimatedTargetValue value={value} />
 			</span>
 		)
 	}
+	showField(value) {
+		let { target, setFormValue, activeInput, setActiveInput } = this.props
+		return () => {
+			if (!target.question) return
+			if (value != null) setFormValue(target.dottedName, Math.floor(value) + '')
+
+			if (activeInput) setFormValue(activeInput, '')
+			setActiveInput(target.dottedName)
+		}
+	}
 }
diff --git a/source/components/rule/RuleValueVignette.css b/source/components/rule/RuleValueVignette.css
deleted file mode 100644
index 43371c1af..000000000
--- a/source/components/rule/RuleValueVignette.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.RuleValueVignette .rule-box {
-	display: flex;
-	justify-content: space-between;
-}
-.rule-box:hover {
-	background: rgba(255, 255, 255, 0.16);
-}
-
-.RuleValueVignette .rule-box > span {
-	display: inline-block;
-}
-.RuleValueVignette .rule-name {
-	font-weight: 600;
-	font-size: 105%;
-}
-.Rule-value {
-	transition: background 0.8s;
-	font-size: 105%;
-}
-.Rule-value .unsatisfied {
-	font-style: italic;
-	font-size: 85%;
-}
-.Rule-value .irrelevant {
-	font-style: normal;
-}
-.Rule-value .figure {
-	font-weight: bold;
-}
-
-/* Animation of summary figures changes : flash ! */
-.flash-enter {
-	background: rgba(255, 255, 255, 1);
-}
-
-.flash-leave {
-	/* Completely hide the button while it's being animated and before it's removed from the DOM. */
-	display: none;
-}
diff --git a/source/components/rule/RuleValueVignette.js b/source/components/rule/RuleValueVignette.js
deleted file mode 100644
index 35f75236e..000000000
--- a/source/components/rule/RuleValueVignette.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { Component } from 'react'
-import withLanguage from '../withLanguage'
-import { Link } from 'react-router-dom'
-import { encodeRuleName } from 'Engine/rules'
-
-import './RuleValueVignette.css'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
-
-let RuleValueVignette = ({ name, title, nodeValue: ruleValue }) => (
-	<span key={name} className="RuleValueVignette">
-		<Link to={'/règle/' + encodeRuleName(name)}>
-			<div className="rule-box">
-				<span className="rule-name">{title}</span>
-				<RuleValue ruleValue={ruleValue} />
-			</div>
-		</Link>
-	</span>
-)
-
-@withLanguage
-export class RuleValue extends Component {
-	render() {
-		let { value, language } = this.props
-		let unsatisfied = value == null,
-			irrelevant = value == 0
-		let [className, text] = irrelevant
-			? ['irrelevant', '0']
-			: unsatisfied
-				? ['unsatisfied', '']
-				: [
-						'figure',
-						Intl.NumberFormat(language, {
-							style: 'currency',
-							currency: 'EUR',
-							maximumFractionDigits: 0,
-							minimumFractionDigits: 0
-						}).format(value)
-				  ]
-		return (
-			<ReactCSSTransitionGroup
-				transitionName="flash"
-				transitionEnterTimeout={100}
-				transitionLeaveTimeout={100}>
-				<span key={text} className="Rule-value">
-					{' '}
-					<span className={className}>{text}</span>
-				</span>
-			</ReactCSSTransitionGroup>
-		)
-	}
-}
-
-export default RuleValueVignette