diff --git a/test/client/interface.php b/test/client/interface.php
index 9042584..1ee9171 100644
--- a/test/client/interface.php
+++ b/test/client/interface.php
@@ -14,6 +14,11 @@
 	}
 
 ?>
+
+
+
+
+
 <!DOCTYPE html>
 <html>
 	<head>
@@ -25,7 +30,6 @@
 		<script type='text/javascript' src='/js/lib/api.js'              ></script>  <!-- Gestion des transactions avec le serveur -->
 		<script type='text/javascript' src='/js/lib/page-manager.js'     ></script>  <!-- Gestion réseau/chargement/liens/URL      -->
 		<script type='text/javascript' src='/js/lib/form-deflater.js'    ></script>  <!-- Gestion des formulaires (Object)         -->
-
 		<style type='text/css'>
 			body{
 				background: #1c384b;
@@ -101,9 +105,24 @@
 				color: #000;
 			}
 
-			#sync-button{
+			#card-stack > input{
+				display: inline-block;
+				position: relative;
+					width: calc( 100% - 1em*2 );
+					height: calc( 3em - 1em*2 );
+				padding: 1em;
+				margin-bottom: 2em;
+
+				border-radius: 3px;
+				border: 0;
+
+				background: #eee;
+			}
+
+			#sync-button,
+			#card-pass{
 				position: absolute;
-					top: calc( 40% + 29em );
+					top: calc( 50% + 29em );
 					left: 60%;
 					padding: 1.5em;
 
@@ -114,7 +133,7 @@
 
 				color: #fff;
 				font-weight: bold;
-				letter-spacing: .1em;
+				letter-spacing: .15em;
 				text-transform: uppercase;
 
 				transition: all .2s ease-in-out;
@@ -124,10 +143,19 @@
 				cursor: pointer;
 			}
 
+			#card-pass{
+				top: calc( 40% + 29em );
+				background: #3595ce;
+			}
+
 			#sync-button:hover{
 				background: #1ac47c;
 			}
 
+			#card-pass:hover{
+				background: #2d7dad;
+			}
+
 
 		</style>
 
@@ -141,11 +169,13 @@
 
 
 		<div id='card-stack'>
+			<input id='add-card' placeholder='Code RFID' type='text'>
 			<div class='card'>AB-CD-EF-GH</div>
 			<div class='card'>12-CD-56-GH</div>
 		</div>
 
 
+		<input type='button' id='card-pass' value='Passer la carte'>
 		<input type='button' id='sync-button' value='Synchronisation'>
 
 
@@ -154,30 +184,83 @@
 		<script type='text/javascript'>
 			/* [0] Initialisation et éléments
 			=========================================================*/
-			var STATES = {
+			/* (1) Etats du système */
+			var STATE = {
 				started: false,
 				signaled: false,
 				locked: false
 			};
 
-
+			/* (2) Elements du DOM */
 			var mBox = document.getElementById('machine-box');
 			var led  = document.getElementById('led');
 			var cBox = document.getElementById('card-stack');
+			var cAdd = document.getElementById('add-card');
 			var sync = document.getElementById('sync-button');
+			var pass = document.getElementById('card-pass');
 
+			/* (3) Variables de suivi */
+			var card     = null;
+			var lastCard = null;
+
+
+			/* (4) Récupération des données de fonctionnement */
+			var api = new APIClass('/api/');
+
+			
 
 			/* [1] Fonctions
 			=========================================================*/
-			function update(){
+			/* (1) Gestion de mise à jour de la led en fonction de l'état
+			---------------------------------------------------------*/
+			function updateLed(){
+				/* (1) Si machine bloquée */
 				if( STATE.locked ){
 					STATE.started  = false;
 					STATE.signaled = false;
-					led.style.background = '#ff0000';
+					led.style.background = '#f00';
 				}
 
+				/* (2) Si machine allumée */
+				else if( STATE.started ){
+
+					// {1} Allumée + signalée //
+					if( STATE.signaled )
+						led.style.background = '#00f';
+
+					// {2} Allumée (non signalée) //
+					else
+						led.style.background = '#0f0';
+
+				}else
+					led.style.background = '#000';
+
 			}
 
+
+
+
+			/* [2] Gestion de l'ajout de carte
+			=========================================================*/
+			cAdd.addEventListener('keyup', function(e){
+				if( e.keyCode == 13 ) cBox.innerHTML += "<div class='card'>"+e.target.value+"</div>";
+			}, false);
+
+			/* [3] Gestion de la sélection de carte
+			=========================================================*/
+			cBox.addEventListener('click', function(e){
+				if( e.target.className == 'card' ){
+					lastCard = card;
+					card = e.target.innerHTML;
+				}
+			}, false);
+			card = document.querySelector('#card-stack .card').innerHTML;
+
+			/* [4] Passage de carte
+			=========================================================*/
+
+
+
 		</script>
 	</body>
 </html>
