diff --git a/index.html b/index.html
index 054fa56..91e8790 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
     </div>
 
     <!-- Page -->
-    <nav class="red" role="navigation">
+    <nav role="navigation">
         <div class="nav-wrapper container">
             <a class="brand-logo" v-if="page == 'connexion'">10⁵</a>
             <div class="left" v-else>
@@ -68,8 +68,8 @@
                 <li><a>TODO</a></li>
             </ul>
         </div>
-        <div class="col s12 red" v-show="page == 'operations'">
-            <ul class="tabs red">
+        <div class="col s12" v-show="page == 'operations'">
+            <ul class="tabs">
                 <li class="tab col s3"><a href="#creation">Création</a></li>
                 <li class="tab col s3"><a href="#rechargement">Rechargement</a></li>
                 <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li>
@@ -78,125 +78,102 @@
         </div>
     </nav>
 
-    <div class="section no-pad-bot" id="main">
-        <br><br><br>
+    <div id="main">
         <div class="container" v-show="page == 'connexion'">
             <h4>Se connecter</h4>
-            <h5>Avec votre identifiant et votre mot de passe</h5>
-            <div class="row">
-                <form class="col s12">
-                    <div class="row">
-                        <div class="input-field col s12">
-                            <input type="text" name="login" v-model="login">
-                            <label for="login">Identifiant</label>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="input-field col s12">
-                            <input type="password" name="mdp" v-model="mdp">
-                            <label for="mdp">Mot de passe</label>
-                        </div>
+            <div>
+                <h5>Avec votre identifiant et votre mot de passe</h5>
+                <form @submit="connecter">
+                    <div class="input-field">
+                        <input type="text" name="login" v-model="login">
+                        <label for="login">Identifiant</label>
                     </div>
-                    <div class="row">
-                        <a class="btn-large waves-effect waves-light disabled" @click="connecter" :class="{'disabled': !peutConnecter}">Se connecter</a>
+                    <div class="input-field">
+                        <input type="password" name="mdp" v-model="mdp">
+                        <label for="mdp">Mot de passe</label>
                     </div>
-                </form>
-            </div>
-            <div v-if="PEUT_NFC">
-                <h5>Avec votre carte étudiant</h5>
-                <p>Passez-la simplement devant le lecteur</p>
+                    <button :disabled="!login || !mdp">Se connecter</button>
             </div>
+            </form>
+        </div>
+        <div v-if="PEUT_NFC">
+            <h5>Avec votre carte étudiant</h5>
+            <p>Passez-la simplement devant le lecteur.</p>
         </div>
 
         <div class="container" v-show="page == 'operations'">
             <div class="row center">
                 <div id="creation">
                     <h5>Créer un nouveau client</h5>
-                    <div class="row">
-                        <form class="col s12">
-                            <div class="input-field col s12" v-if="!PEUT_NFC">
-                                <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
-                                <label for="idCarte">Identifiant de la carte</label>
-                            </div>
-                            <div class="input-field col s12">
-                                <input type="number" name="solde" v-model="solde">
-                                <label for="solde">Solde initial (€)</label>
-                            </div>
-                            <div class="row center">
-                                <a class="btn-large waves-effect waves-light" @click="creer" :class="{'disabled': !peutCreer}">Créer</a>
-                            </div>
-                        </form>
-                    </div>
+                    <form @submit="creer">
+                        <div class="input-field" v-if="!PEUT_NFC">
+                            <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
+                            <label for="idCarte">Identifiant de la carte</label>
+                        </div>
+                        <div class="input-field">
+                            <input type="number" name="solde" v-model="solde">
+                            <label for="solde">Solde initial (€)</label>
+                        </div>
+                        <button :disabled="!solde || (!PEUT_NFC && !idCarte)">Créer</button>
+                    </form>
                 </div>
                 <div id="rechargement">
                     <h5>Recharger un client</h5>
-                    <div class="row">
-                        <form class="col s12">
-                            <div class="input-field col s12" v-if="!PEUT_NFC">
-                                <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
-                                <label for="idCarte">Identifiant de la carte</label>
-                            </div>
-                            <div class="input-field col s12">
-                                <input type="number" name="credit">
-                                <label for="credit">Crédit (€)</label>
-                            </div>
-                            <div class="row center">
-                                <a class="btn-large waves-effect waves-light btn modal-trigger">Recharger</a>
-                            </div>
-                        </form>
-                    </div>
+                    <form @submit="recharger">
+                        <div class="input-field" v-if="!PEUT_NFC">
+                            <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
+                            <label for="idCarte">Identifiant de la carte</label>
+                        </div>
+                        <div class="input-field">
+                            <input type="number" name="credit" v-model="credit">
+                            <label for="credit">Crédit (€)</label>
+                        </div>
+                        <button :disabled="!credit || (!PEUT_NFC && !idCarte)">Créer</button>
+                    </form>
                 </div>
                 <div id="paiement">
                     <h5>Vendre à un client</h5>
-                    <div class="row">
-                        <form class="col s12">
-                            <div class="input-field col s12" v-if="!PEUT_NFC">
-                                <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
-                                <label for="idCarte">Identifiant de la carte</label>
-                            </div>
-                            <br/>
+                    <form @submit="payer">
+                        <div class="input-field" v-if="!PEUT_NFC">
+                            <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
+                            <label for="idCarte">Identifiant de la carte</label>
+                        </div>
+                        <div>
                             <h6>En spécifiant le nombre de consommations</h6>
                             <div id="grilleBieres">
-                                <div class="row">
-                                    <div class="col s4"><a class="waves-effect waves-light btn">1</a></div>
-                                    <div class="col s4"><a class="waves-effect waves-light btn">2</a></div>
-                                    <div class="col s4"><a class="waves-effect waves-light btn">3</a></div>
+                                <div>
+                                    <div v-for="i in [1, 2, 3]"><button :disabled="!PEUT_NFC && !idCarte">{{ i }}</button></div>
                                 </div>
-                                <div class="row">
-                                    <div class="col s4"><a class="waves-effect waves-light btn">4</a></div>
-                                    <div class="col s4"><a class="waves-effect waves-light btn">5</a></div>
-                                    <div class="col s4"><a class="waves-effect waves-light btn">6</a></div>
+                                <div>
+                                    <div v-for="i in [4, 5, 6]"><button :disabled="!PEUT_NFC && !idCarte">{{ i }}</button></div>
                                 </div>
                             </div>
-                            <br/>
+                        </div>
+                        <div class="row">
                             <h6>En spécifiant un montant</h6>
-                            <div class="row">
-                                <div class="input-field col s12">
-                                    <input type="number" name="prix">
-                                    <label for="prix">Prix (€)</label>
-                                </div>
+                            <div class="input-field">
+                                <input type="number" name="prix" v-model="prix">
+                                <label for="prix">Prix (€)</label>
                             </div>
-                            <div class="row center">
-                                <a class="btn-large waves-effect waves-light">Payer</a>
-                            </div>
-                        </form>
-                    </div>
+                        </div>
+                        <button :disabled="!prix || (!PEUT_NFC && !idCarte)">Payer</button>
+                    </form>
                 </div>
                 <div id="vidange">
                     <h5>Vider le contenu de la carte d'un client</h5>
-                    <div class="input-field col s12" v-if="!PEUT_NFC">
-                        <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
-                        <label for="idCarte">Identifiant de la carte</label>
-                    </div>
-                    <div class="row center">
-                        <a class="btn-large waves-effect waves-light">Vider</a>
-                    </div>
+                    <form @submit="vidanger">
+                        <div class="input-field" v-if="!PEUT_NFC">
+                            <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
+                            <label for="idCarte">Identifiant de la carte</label>
+                        </div>
+                        <button :disabled="!PEUT_NFC && !idCarte">Vider</button>
+                    </form>
                 </div>
             </div>
         </div>
     </div>
 
-    <footer class="page-footer red">
+    <footer class="page-footer">
         <div class="footer-copyright">
             <div class="container">
                 10p5 v0.0.0 - © Copyright 2016, <a href="http://clubinfo.plil.net">Le Club Info Polytech Lille</a>
diff --git a/js/init.js b/js/init.js
index 413166a..288b4ee 100644
--- a/js/init.js
+++ b/js/init.js
@@ -11,10 +11,11 @@ var TRANSACTION_DUREE = 60
 
 var PEUT_NFC = false
 
-// Fonctions pour Materialize
+// Préparation de l'interactivité
 $(function(){
     $('.button-collapse').sideNav();
     $('.modal-trigger').leanModal()
+    $('form').submit(function() { return false });
 });
 
 // Application
@@ -54,7 +55,7 @@ var app = new Vue({
         },
         // Fonctionnement
         connecter: function() {
-            if (!this.peutConnecter) return
+            console.log(57)
             var that = this;
             this.apiBrute("utilisateur/connexion", {login: this.login , mdp: this.mdp} , function(retour, donnees) {
                 that.mdp = ''
@@ -77,9 +78,9 @@ var app = new Vue({
                         break;
                 }
             })
+            return false
         },
         creer: function() {
-            if (!this.peutCreer) return
             var that = this
             this.api("client/ajouter", {idCarte: this.idCarte, solde: this.solde}, function(retour, donnees) {
                 switch(retour) {
@@ -99,12 +100,6 @@ var app = new Vue({
         }
     },
     computed: {
-        peutConnecter: function() {
-            return this.login && this.mdp;
-        },
-        peutCreer: function() {
-            return this.solde && (this.PEUT_NFC || this.idCarte)
-        },
         timer: function() {
             var secondes = this.connecte + JETON_DUREE - this.date
             var minutes = Math.floor(secondes/60)
diff --git a/scss/style.scss b/scss/style.scss
index 4a2112f..8c15dda 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -5,7 +5,7 @@
 @import "../lib/Materialize/sass/components/color";
 
 // Définition de la couleur principale de Materialize
-$primary-color: color("red", "lighten-2") !default;
+$primary-color: color("red", "base") !default;
 $primary-color-light: lighten($primary-color, 15%) !default;
 $primary-color-dark: darken($primary-color, 15%) !default;
 
@@ -14,12 +14,18 @@ $success-color: color("green", "base") !default;
 $error-color: color("pink", "base") !default;
 $link-color: color("blue", "darken-1") !default;
 
+// Couleur des onglets : texte clair sur fond coloré
+$tabs-underline-color: $secondary-color !default;
+$tabs-text-color: #fff !default;
+$tabs-bg-color: $primary-color !default;
+
 // Import du reste de Materialize
 @import "../lib/Materialize/sass/materialize.scss";
 
 // Import des icônes Material Design
 @import "../lib/material-design-icons/iconfont/material-icons.css";
 
+// Permet le footer de se mettre toujours en bas
 body {
     display: flex;
     min-height: 100vh;
@@ -28,39 +34,70 @@ body {
 
 #main {
     flex: 1 0 auto;
+    margin-top: 100px;
 }
 
+footer.page-footer {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+// Suppression de l'espace entre les onglets
+nav {
+    line-height: $navbar-height-mobile;
+}
+
+// Affichage correct des icônes dans le header
 nav i.material-icons {
     display: inline;
     font-size: 1rem;
 }
 
-nav .tabs .tab a {
-    color: white;
+// Stylisation de tous les boutons
+button {
+    @extend .btn-large;
+    @extend .waves-effect;
+    @extend .waves-light;
+}
+
+button[disabled] {
+    @extend .disabled;
 }
 
-nav .tabs .indicator {
-    background-color: #fff59d;
+// Simplification des formulaires
+form {
+    @extend .row;
+    >.input-field {
+        @extend .col;
+        @extend .s12;
+    }
 }
 
+
+
+// On met les toasts en bas
 #toast-container {
     top: inherit;
     bottom: 10%;
-}
 
-#toast a {
-    text-transform: uppercase;
+    a {
+        text-transform: uppercase;
+    }
 }
 
-#grilleBieres a {
-    width: 90%;
-    padding: 25px;
-    height: 100px;
-    font-size: 3em;
-}
-
-footer.page-footer {
-    margin-top: 0;
-    padding-top: 0;
+#grilleBieres {
+    >div {
+        @extend .row;
+        >div {
+            @extend .col;
+            @extend .s4;
+            >button {
+                width: 90%;
+                padding: 25px;
+                height: 150px;
+                font-size: 3em;
+            }
+        }
+    }
 }
 
--
libgit2 0.21.2