diff --git a/source/components/CDD.css b/source/components/CDD.css
new file mode 100644
index 000000000..7dce93847
--- /dev/null
+++ b/source/components/CDD.css
@@ -0,0 +1,30 @@
+#sim {
+	padding: 2em;
+}
+
+
+#sim section {
+	padding: 2em;
+}
+
+#conversation {
+	display: flex;
+	justify-content: space-around;
+	min-height: 10em;
+	margin: 3em 0;
+}
+
+#questions-answers {
+	background: blue;
+	min-width: 50%;
+}
+
+#help {
+	background: green;
+	min-width: 30%;
+}
+
+#results {
+	width: 100%;
+	background: purple;
+}
diff --git a/source/components/CDD.js b/source/components/CDD.js
index ea0795dda..63cf3cb03 100644
--- a/source/components/CDD.js
+++ b/source/components/CDD.js
@@ -1,10 +1,18 @@
 import React, { Component } from 'react'
-import {analyseSituation} from '../traverse'
+import {analyseSituation, variableType} from '../traverse'
+import './CDD.css'
 
 export default class CDD extends Component {
+	state = {
+		situation: {}
+	}
 	render() {
+
+		let [missingVariable] = analyseSituation(this.state.situation)
+		let type = variableType(missingVariable)
+
 		return (
-			<div>
+			<div id="sim">
 				<section id="introduction">
 					<p>
 						Le CDD en France est un contrat d'exception au CDI. On y a donc recours sous certaines conditions seulement. Cet outil vous aidera à respecter ces conditions et à calculer le prix mensuel de l'embauche, qui en dépend, en vous proposant une suite de questions.
@@ -15,14 +23,24 @@ export default class CDD extends Component {
 						*: écrivez à contact@contact.contact (on fera mieux après). La loi française est complexe, souvent à raison. Nous ne la changerons pas, mais pouvons la rendre plus transparente.
 					</p>
 				</section>
-				<section id="discussion">
-					<ul>
-					{analyseSituation().map(v =>
-						<li key={v}>
-							{v}
-						</li>
-					)}
-					</ul>
+				<div id="conversation">
+					<section id="questions-answers">
+						<form onSubmit={e => e.preventDefault()}>
+							<label>
+								{missingVariable}
+								<input type="text"
+									value={this.state.value}
+									onChange={e => this.setState({situation: {[missingVariable]: true}}) } />
+							</label>
+							<input type="submit" value="Submit" />
+						</form>
+					</section>
+					<section id="help">
+						Aide
+					</section>
+				</div>
+				<section id="results">
+					Résultats
 				</section>
 			</div>
 		)
diff --git a/source/load-cdd-rules.js b/source/load-cdd-rules.js
deleted file mode 100644
index d79643e25..000000000
--- a/source/load-cdd-rules.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import R from 'ramda'
-
-/* Load yaml files */
-
-let context = require.context(
-  '../règles/rémunération-travail/cdd/simples', true,
-  /([a-zA-Z]|-|_)+.yaml$/)
-
-
-let rules = R.pipe(
-  R.map(context),
-  //flatten
-  R.unnest,
-)(context.keys())
-
-
-export default rules.filter(r => r != null)
diff --git a/source/traverse.js b/source/traverse.js
index 83934c4ff..a79c23f03 100644
--- a/source/traverse.js
+++ b/source/traverse.js
@@ -1,7 +1,8 @@
 import removeDiacritics from './utils/remove-diacritics'
 import R from 'ramda'
-import cddRules from './load-cdd-rules'
+import rules from './load-rules'
 import initialSituation from './initialSituation'
+import {findRuleByName, extractRuleTypeAndName} from './model'
 
 /*
 
@@ -152,12 +153,24 @@ let analyseVariable = situation =>
 		}, [[], null])
 	)
 
+let selectedRules = rules.filter(r => extractRuleTypeAndName(r)[1] == 'CIF CDD')
+
 export let analyseSituation = (situation = initialSituation) =>
 	R.pipe(
 		R.map(analyseVariable(situation)),
 		R.flatten()
-	)(cddRules)
+	)(selectedRules)
 
+console.log(rules)
+
+
+export let variableType = name => {
+	let rule = findRuleByName(name)
+	// tellement peu de variables pour l'instant
+	// que c'est très simpliste
+	if (!rule) return 'boolean'
+	if (rule.formule['somme']) return 'numeric'
+}
 
 // console.log('RES', JSON.stringify(res))