diff --git a/components/RulesDisplay.vue b/components/RulesDisplay.vue
index 17f9efd..773c16d 100644
--- a/components/RulesDisplay.vue
+++ b/components/RulesDisplay.vue
@@ -2,80 +2,282 @@
 
 import type { Card } from '~/netcode/Card';
 
+const router = useRouter();
 
 </script>
 <template>
-
-  <div>
-    <h1>Règles de Héron Realms</h1>
-    <section>
-        <p>Héron Realms, c'est un jeu de ~~héron building~~ deck-building. Dans celui-ci, tout le monde part du même deck de base.</p>
-        <p></p>
-        <p>L'unique objectif du jeu est d'être le dernier en lice. Pour y arriver, il faut descendre les Points de Vie de vos adversaires à 0 en partant de 50.</p>
-        <p>
-            Le moyen principal d'y arriver, c'est de faire des <span style="color: red">Dégats</span>. Tout le reste des mécaniques du jeu sont là pour vous faciliter la tâche, 
-        ou pour mettre des bâtons dans les roues de vos adversaires.
-        </p>
-        <p></p>
-        <p>Comme c'est un jeu de "deckbuilding", on va expliquer ce qu'est le "deck" et ce qui nous permet de le "build".</p>
-        <p>
-            Le deck d'un joueur est-ce qui constitue sa pioche, qui lui permettra ensuite de constituer sa main 
-            (la main est préparée à la fin du tour et permet de jouer le tour d'après).
-        </p>
-        <p>
-            Quand la pioche est vide, elle est recyclée à partir de sa défausse. 
-            La défausse est ce qui contient les cartes déjà jouées mais aussi celles qui sont achetées, et qui sera mélangée pour former la nouvelle pioche.
-        </p>
-        <p>
-            Tout le monde commence avec 10 cartes:
-        </p>
-        <ul>
-            <li>7 or + 1 carte qui vaut 2 d'or;</li>
-            <li>1 carte à 1 de dégats et 1 carte à 2 de dégats.</li>
-        </ul>
-        <p>
-            La pioche est formée au hasard: on peut donc avoir une main de départ avec 5 or et 2 dégats, ou 3 or et 4 dégats, ou 4 or et 3 dégats, etc.
-        </p>
-        <p>
-            A partir de sa main, on peut jouer des cartes. Ces cartes peuvent déclencher des effets: on peut considérer qu'ils vont dans un "pool commun", et qu'on peut les utiliser dans 
-            l'ordre qu'on souhaite. 1 de dégats et 2 de dégats me donnent 3 ressources de dégats que je split comme je veux ensuite. Pareil pour l'or et pour le soin, qui sont les 3 ressources 
-            principales du jeu.
-        </p>
-        <p></p>
-        <p>
-            Les cartes sont de 3 catégories: objets, actions et champions.
-        </p>
-        <p>
-            Par simplicité, disons que les objets et les actions sont pareil: on les joue, ils font un effet disponible durant le tour actuel, et ils sont défaussés.
-        </p>
-        <p>
-            Les champions sont un peu plus complexes: ils restent sur le terrain, et on peut les utiliser à chaque tour (en les mobilisant). Ils ont une défense et il ne meurent 
-            que si ils sont descendus à 0 durant un tour donné. Je ne peux pas faire un peu de dégats pendant un tour, et un peu le tour d'après pour les tuer.
-        </p>
-        <p>
-            Par ailleurs, certains champions sont des Gardes, ce qui veut dire qu'on est obligés de les tuer pour faire des dégats à des champions non-gardes ou au joueur. 
-            (J'en profite pour préciser qu'on peut en effet, sans garde, choisir d'attaquer le joueur directement ou ses champions.) 
-            Incidentellement, ça veut dire qu'avec seulement 2 de dégats, je ne peux rien faire à un joueur avec un garde à 3 de défense.
-        </p>
-        <p></p>
-        <p></p>
-        <p>
-           Passons au "building": on peut acheter des cartes pour les ajouter à notre défausse qui, si vous avez suivi, constituera la prochaine pioche. 
-           Avec le jeu de base, <span style="color: yellow">l'or</span> sert exclusivement à accomplir ce but: acheter des cartes.
-        </p>
-        <p>
-            Un marché est mis à disposition de tous les joueurs, mettant à disposition les cartes du marché. Ces cartes ont chacune un coût indiqué en haut à droite. 
-            Il faut au moins autant d'or que ce qui est indiqué pour acheter une carte. Une carte achetée laisse la place à une nouvelle carte directement, qu'on peut 
-            décider d'acheter immédiatement.
-        </p>
-        <p>
-            Il ne nous reste plus qu'à comprendre ce que font les cartes du marché, puisqu'elles sont plus complexes (et bien plus fortes) que votre deck de base. 
-            Prenons des exemples!
-        </p>
-        <p>
-            La première chose qui ne vous échappera pas, c'est qu'on a 4 couleurs différentes pour les cartes.
-        </p>
-    </section>
+  <div class="background">
+    <div class="overlay-2">
+        <div class="erika-zone-2">
+            <img @click="router.push({ path: '/'})" class="overlay-image" src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png" alt="pétasse" />
+        </div>
+    </div>
+    <div class="text-content">
+        <h1>Règles de Héron Realms</h1>
+        <section>
+            <p>Héron Realms, c'est un jeu de <span style="text-decoration:line-through;">héron building</span> deck-building.</p>
+            <p>Tout le monde part d'un même deck de base.</p>
+            <p>Le but du jeu est de l'enrichir pour obtenir de quoi gagner.</p>
+            <p>Et comme la violence est une solution universelle, ça se traduit en battre ses adversaires.</p>
+            <p>&#8203;</p>
+            <p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 6}"></CardPreview>
+                <CardPreview :data="{card_id: 19}"></CardPreview>
+                <CardPreview :data="{card_id: 36}"></CardPreview>
+                <CardPreview :data="{card_id: 46}"></CardPreview>
+            </div>
+            <p>&#8203;</p>
+            <hr>
+            <p>&#8203;</p>
+            <h2>Objectif</h2>
+            <p>L'unique objectif du jeu est d'être le dernier en lice. Pour y arriver, il faut descendre les Points de Vie de vos adversaires à 0 en partant de 50.</p>
+            <p>
+                Le moyen principal d'y arriver, c'est de faire des <span style="color: red">Dégats</span> <img src="/images/damage.png" class="icon_img" draggable="false" />. Tout le reste des mécaniques du jeu sont là pour vous faciliter la tâche, 
+            ou pour mettre des bâtons dans les roues de vos adversaires.
+            </p>
+            <p>&#8203;</p>
+            <hr>
+            <h2>Deckbuilding</h2>
+            <p>Comme c'est un jeu de "deckbuilding", on va expliquer ce qu'est le "deck" et ce qui nous permet de le "build".</p>
+            <div class="card-row">
+                <CardPreview></CardPreview>
+            </div>
+            <p>&#8203;</p>
+            <p>
+                Le deck d'un joueur est-ce qui constitue sa pioche, qui lui permettra ensuite de constituer sa main 
+                (la main est préparée à la fin du tour et permet de jouer le tour d'après).
+            </p>
+            <p>
+                Quand la pioche est vide, elle est recyclée à partir de sa défausse. 
+                
+            </p>
+            <p>
+                La défausse est ce qui contient les cartes déjà jouées. Mais aussi celles qui sont achetées! Elle finit par être mélangée pour former la nouvelle pioche.
+            </p>
+            <p>&#8203;</p>
+            <hr>
+            <h2>Deck de base</h2>
+            <p>
+                Tout le monde commence avec 10 cartes divisées en 4 types:
+            </p>
+            <ul>
+                <li>7x Or (1)</li>
+                <li>1x Or (2)</li>
+                <li>1x Dégats (1)</li>
+                <li>1x Dégats (2)</li>
+            </ul>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 56}"></CardPreview>
+                <CardPreview :data="{card_id: 59}"></CardPreview>
+                <CardPreview :data="{card_id: 58}"></CardPreview>
+                <CardPreview :data="{card_id: 57}"></CardPreview>
+            </div>
+            <p>
+                La pioche est formée au hasard: on peut donc avoir une main de départ avec 5 or et 2 dégats, ou 3 or et 4 dégats, ou 4 or et 3 dégats, etc.
+            </p>
+            <p>
+                A partir de sa main, on peut jouer des cartes. Ces cartes peuvent déclencher des effets: on peut considérer qu'ils vont dans un "pool commun", et qu'on peut les utiliser dans 
+                l'ordre qu'on souhaite. 1 de dégats et 2 de dégats me donnent 3 ressources de dégats que je split comme je veux ensuite. Pareil pour l'or et pour le soin, qui sont les 3 ressources 
+                principales du jeu.
+            </p>
+            <p>&#8203;</p>
+            <hr>
+            <h2>Types de cartes</h2>
+            <p>
+                Les cartes sont divisées en 3 catégories: objets, actions et champions.
+            </p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 56}"></CardPreview>
+                <CardPreview :data="{card_id: 52}"></CardPreview>
+                <CardPreview :data="{card_id: 43}"></CardPreview>
+            </div>
+            <p>&#8203;</p>
+            <h3>Objets & actions</h3>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 56}"></CardPreview>
+                <CardPreview :data="{card_id: 52}"></CardPreview>
+            </div>
+            <p>
+                Par simplicité, disons que les objets et les actions sont pareil: on les joue, ils font un effet disponible durant le tour actuel, et ils sont défaussés.
+            </p>
+            <h3>Champions (& gardes)</h3>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 43}"></CardPreview>
+            </div>
+            <p>
+                Les champions sont un peu plus complexes: ils restent sur le terrain, et on peut les utiliser à chaque tour (en les mobilisant). 
+            </p>
+            <p>Ils ont une défense <img src="/images/champion-shield.png" style="height: 30px" draggable="false" /> indiquée en bas à droite et ils ne sont assommés (défaussés) que si on leur fait des dégats = défense.</p>
+            <p>Ces dégats doivent être faits d'un coup. Je ne peux pas faire un peu de dégats pendant un tour, et un peu le tour d'après pour les tuer.</p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 49}"></CardPreview>
+            </div>
+            <p>
+                Par ailleurs, certains champions sont des Gardes <img src="/images/champion-shield-guard.png" style="height: 30px" draggable="false" /> (ils ont un bouclier noir), ce qui veut dire qu'on est obligés de les tuer pour faire des dégats à des champions non-gardes ou au joueur. 
+            </p>
+            <p>
+                (J'en profite pour préciser qu'on peut en effet, sans garde, choisir d'attaquer le joueur directement ou ses champions.) 
+                Incidentellement, ça veut dire qu'avec seulement 2 de dégats, je ne peux rien faire à un joueur avec un garde à 3 de défense.
+            </p>
+            <p>&#8203;</p>
+            <hr>
+            <h2>Building</h2>
+            <p>
+            Passons au "building": on peut acheter des cartes pour les ajouter à notre défausse qui, si vous avez suivi, constituera la prochaine pioche. 
+            Avec le jeu de base, <span style="color: darkgoldenrod">l'or</span> <img src="/images/gold.png" class="icon_img" draggable="false" /> sert exclusivement à accomplir ce but: acheter des cartes.
+            </p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 6}"></CardPreview>
+                <CardPreview :data="{card_id: 19}"></CardPreview>
+                <CardPreview :data="{card_id: 36}"></CardPreview>
+                <CardPreview :data="{card_id: 46}"></CardPreview>
+            </div>
+            <p>
+                Un marché est mis à disposition de tous les joueurs, mettant à disposition 5 cartes (pas ici parce que j'ai pas la place). 
+            </p>
+            <p>
+                Ces cartes ont chacune un coût indiqué en haut à droite. 
+                Il faut au moins autant d'or que ce qui est indiqué pour acheter une carte. Une carte achetée laisse la place à une nouvelle carte directement, qu'on peut 
+                décider d'acheter juste après (tant qu'on a l'argent).
+            </p>
+            <p>
+                Il ne nous reste plus qu'à comprendre ce que font les cartes du marché, puisqu'elles sont plus complexes (et bien plus fortes) que votre deck de base. 
+                Prenons des exemples!
+            </p>
+            <hr>
+            <h2>Couleurs</h2>
+            <p>
+                La première chose qui ne vous échappera pas, c'est qu'on a 4 couleurs différentes pour les cartes.
+            </p>
+            <p>&#8203;</p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 13}"></CardPreview>
+                <CardPreview :data="{card_id: 3}"></CardPreview>
+                <CardPreview :data="{card_id: 1}"></CardPreview>
+            </div>
+            <p>&#8203;</p>
+            <p>Les cartes <span style="color: darkgoldenrod">jaunes</span> sont les cartes Empire.</p>
+            <p>Elles font beaucoup de soin, et activent souvent des effets de pioche.</p>
+            <p>&#8203;</p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 39}"></CardPreview>
+                <CardPreview :data="{card_id: 34}"></CardPreview>
+                <CardPreview :data="{card_id: 40}"></CardPreview>
+            </div>
+            <p>&#8203;</p>
+            <p>Les cartes <span style="color: red">rouges</span> sont les cartes Necros.</p>
+            <p>Elles sont les seules à pouvoir sacrifier des cartes pour les sortir de son deck de façon permanente.</p>
+            <p>&#8203;</p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 52}"></CardPreview>
+                <CardPreview :data="{card_id: 46}"></CardPreview>
+                <CardPreview :data="{card_id: 47}"></CardPreview>
+            </div>
+            <p>&#8203;</p>
+            <p>Les cartes <span style="color: darkgreen">vertes</span> sont les cartes Sauvages.</p>
+            <p>Elles font beaucoup de dégats, et forcent vos adversaires à jouer moins de cartes.</p>
+            <p>&#8203;</p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 24}"></CardPreview>
+                <CardPreview :data="{card_id: 25}"></CardPreview>
+                <CardPreview :data="{card_id: 19}"></CardPreview>
+            </div>
+            <p>&#8203;</p>
+            <p>Les cartes <span style="color: darkblue">bleues</span> sont les cartes Guilde.</p>
+            <p>Elles donnent beaucoup d'or, assomment les champions adverses et manipulent votre pioche.</p>
+            <p>&#8203;</p>
+            <hr>
+            <h2>Déclencheurs</h2>
+            <p>Les effets de cartes peuvent se déclencher pour 3 raisons différentes.</p>
+            <div class="card-row">
+                <CardPreview :data="{card_id: 14}"></CardPreview>
+            </div>
+            <p>Sur cette carte, on peut voir les trois en même temps.</p>
+            <p>La 1ère ligne s'active tout le temps.</p>
+            <p>La 2ème ligne est une capacité Allié: il faut une autre carte de la même couleur en jeu pour pouvoir en profiter.</p>
+            <p>La 3ème ligne est un Effet Poubelle (différent du sacrifice des cartes rouges): vous pouvez retirer cette carte de votre jeu pour bénéficier, en plus des autres effets, de l'effet marqué. Mais la carte sera défaussée à tout jamais.</p>
+            <p>&#8203;</p>
+            <hr>
+            <h2>Effets</h2>
+            <p>Une variété d'effets peuvent être inclus dans les cartes.</p>
+            <p>Il y en a plein et les expliquer ici serait relou, alors je vous laisse poser la question en vocal si vous n'en comprenez pas un.</p>
+            <p>&#8203;</p>
+            <hr>
+            <h2>Activer les cartes dans la version en ligne</h2>
+            <p>Il suffit de cliquer sur la carte que vous voulez activer dans votre main pour la "LOCK".</p>
+            <p>Une carte "LOCKED" est considérée en jeu, & peut activer des effets Allié pour d'autres cartes, etc.</p>
+            <p>Si vous avez des choix à faire sur la carte, un menu apparaîtra pour vous laisser choisir.</p>
+            <p>Pour faire des dommages, il y aura un bouton "Damage" sur vos ennemis. Pareil sur leurs champions.</p>
+            <p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
+        </section>
+    </div>
   </div>
 
-</template>
\ No newline at end of file
+</template>
+
+<style>
+.background {
+    background-color: #f0f0f0;
+    background-image: url('images/bg-darkgrass.png');
+    background-size: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;;
+}
+
+.text-content {
+    background-color: rgba(255, 255, 255, .75);
+    padding: 1em;
+    border-radius: 1em;
+    max-width: 800px;
+    margin-top: 2em;
+    text-align: left;
+
+    h1 {
+        text-align: center;
+        font-size: 2em;
+        margin-bottom: 1.5em;
+    }
+
+    p {
+        margin: 1em 0;
+        font-size: 1.2em;
+    }
+}
+
+.card-row {
+    display: flex;
+    justify-content: center;
+    gap: 1em;
+}
+
+.overlay-2 {
+    height: 00px;
+    width: 100%;
+    position: sticky;
+    z-index: 2;
+    top: 0;
+    pointer-events: none;
+
+    .erika-zone-2 {
+        position: absolute;
+        top: 300px;
+        display: flex;
+        justify-content: right;
+        z-index: 2;
+        height: 300px;
+        width: 100%;
+        object-fit: cover;
+
+        .overlay-image {
+            position: sticky;
+            height: 100%;
+            cursor: pointer;
+            pointer-events: all;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/public/sounds/buy1.mp3 b/public/sounds/buy1.mp3
new file mode 100644
index 0000000..e9a6cfa
Binary files /dev/null and b/public/sounds/buy1.mp3 differ