diff --git a/doc/MoteurDeJeu.html b/doc/MoteurDeJeu.html
new file mode 100644
index 0000000000000000000000000000000000000000..143828d0dd403f36ff7307ffdbbdcfa41b9fcedf
--- /dev/null
+++ b/doc/MoteurDeJeu.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <meta name="author" content="PF Villard" />
+  <title>Le moteur de jeu</title>
+  <link rel="stylesheet" href="mvp.css" />
+<style type="text/css">
+  :root {
+  --color: #2096ba;
+  --color-secondary: #2096ba;
+  --color-accent: #f7f8fa;
+  --color-text: #222426;
+  --color-shadow: #c5d2db;
+  --width-content: 720px;
+  }
+  
+  code, samp {
+    font-size: 1.2em;
+  }
+
+  nav {
+    justify-content: space-evenly;
+  }
+  
+  a:hover {
+    filter: none;
+    color: #df6e21;
+  }
+</style>
+</head>
+<body>
+<header id="title-block-header">
+  <nav id="TOC">
+      <a href="/"><img alt="Logo" src="iut.png" height="70"></a>
+        </nav>
+<h1 class="title">Le moteur de jeu</h1>
+<p class="author">PF Villard</p>
+</header>
+<main>
+<hr>
+<article>
+<!-- pandoc -s -f markdown -t html5 --template=template.html -c mvp.css  -o MoteurDeJeu.html MoteurDeJeu.md -->
+<h1 id="utilisation-de-la-bibliothèque-de-moteur-de-jeu">Utilisation de la bibliothèque de moteur de jeu <!-- omit in toc --></h1>
+<p>Avant de lire ce document, il faut déjà comprendre l’<a href="./archiMoteurDeJeu.pdf">architecture du Moteur de jeu</a>.</p>
+<figure>
+<img src="logo.png" alt="Example du jeu par défaut" /><figcaption aria-hidden="true">Example du jeu par défaut</figcaption>
+</figure>
+<h1 id="sommaire">Sommaire <!-- omit in toc --></h1>
+<ul>
+<li><a href="#création-de-décors">Création de décors</a></li>
+<li><a href="#changement-dimage">Changement d’image</a></li>
+<li><a href="#changement-dimage-pendant-une-collision">Changement d’image pendant une collision</a></li>
+<li><a href="#changement-de-gravité">Changement de gravité</a></li>
+<li><a href="#vue-subjective">Vue subjective</a></li>
+<li><a href="#boucle-de-jeu">Boucle de jeu</a></li>
+<li><a href="#changement-du-contrôleur">Changement du contrôleur</a></li>
+</ul>
+<h2 id="création-de-décors">Création de décors</h2>
+<p>Il y a deux façon de créer un décors : - Soit en utilisant un objet de la classe <code>ObjetMur</code> en le rajoutant au <strong>monde</strong> par <code>addMur(int x, int y, int dx, int dy)</code> avec <span class="math inline">(<em>x</em>, <em>y</em>)</span> la position du coin supérieur gauche du mur de dimension <span class="math inline"><em>d</em><em>x</em> × <em>d</em><em>y</em></span> - Soit en créant une classe héritant de <code>ObjetMur</code> et en l’ajoutant au <strong>monde</strong> par <code>addObjet(Objet monObjet)</code>.</p>
+<p>Les éléments de décors, comme toutes les classes héritant de <code>Objet</code> ont une méthode <code>update()</code> qui permet de rajouter un comportement dynamique (Cf <code>ObjetMurDynamique</code>).</p>
+<h2 id="changement-dimage">Changement d’image</h2>
+<p>Pour changer l’image associée aux monstres ou aux héros, il suffit d’appeler la méthode <code>assignNewImage(String fileName)</code> de l’attribut <code>sprites</code> de l’objet. Exemple :</p>
+<pre><code>monMonde.balle.sprites.assignNewImage(&quot;hero2.png&quot;);</code></pre>
+<figure>
+<img src="fig/img2.png" alt="Changement de l’image du hero" /><figcaption aria-hidden="true">Changement de l’image du hero</figcaption>
+</figure>
+<p>Il est également possible de changer l’image du decors.</p>
+<pre><code>affiche.decor.changeImage(&quot;background2.jpg&quot;);</code></pre>
+<figure>
+<img src="fig/img1.png" alt="Changement du background" /><figcaption aria-hidden="true">Changement du background</figcaption>
+</figure>
+<h2 id="changement-dimage-pendant-une-collision">Changement d’image pendant une collision</h2>
+<p>Pour changer l’aspect d’un héros, monstre ou mur lorsque une collision a lieu, il faut faire une classe fille (par exemple de <code>ObjetHeros</code>) et ré-écrire la méthode <code>public void draw(Graphics g)</code>en rajoutant quelque chose du type :</p>
+<pre><code>// si en collision affiche carre
+if (collision==1) {
+    g.setColor(Color.red);
+    g.fillRect(tab[0],tab[1],tab[2],tab[3]);
+}</code></pre>
+<p>Pour changer l’aspect du hero, il faut aussi créer une classe héritant de <code>Monde</code> afin de d’assigner à la construction la bonne classe pour <code>balle</code>.</p>
+<p>Exemple :</p>
+<pre><code>public class MonMondeCool extends Monde{
+        public MonMondeCool() throws IOException
+    {
+        balle=new HeroCarreQuandTouche();
+        //gere la vision subjective
+        Repere.h=balle; 
+    }
+}</code></pre>
+<figure>
+<img src="fig/img3.png" alt="Rectangle rouge lorsque collision" /><figcaption aria-hidden="true">Rectangle rouge lorsque collision</figcaption>
+</figure>
+<h2 id="changement-de-gravité">Changement de gravité</h2>
+<p>Pour changer la gravité, il faut changer la valeur de l’attribut <code>gravityValue</code> dans <code>MoteurPhysique</code>. Exemple :</p>
+<pre><code>moteurPhys.gravityValue=-0.08f;</code></pre>
+<p>Pour annuler la gravité et pouvoir se déplacer en <strong>X</strong> et en <strong>Y</strong> de la même façon, il faut mettre l’attribut <code>gravity</code> à <code>false</code>.</p>
+<h2 id="vue-subjective">Vue subjective</h2>
+<p>On parle de vue subjective lorsque l’on se place du point de vue du joueur. C’est-à-dire que si on se déplace, la géométrie du hero ne bouge pas, c’est le décors et les monstres qui bougent. Si la vu n’est pas subjective, le décors est fixe et ceux sont les monstres et le hero qui bougent. La vue subjective peut être activé en changeant la valeur du booléen <code>Repere.isSubjective</code>.</p>
+<h2 id="boucle-de-jeu">Boucle de jeu</h2>
+<p>La boucle de jeu est créée par défaut par la classe <code>BoucleDeJeu</code>. Pour gérer les événements du jeu, il est conseillé de créer une classe qui hérite de <code>BoucleDeJeu</code> en re-créant la méthode <code>public void lanceBouclePrincipale() throws Exception</code>.</p>
+<p>Exemple de code pour gérer les collisions en fonction du type</p>
+<pre><code>switch (jeuPhysique.moteurPhys.monde.balle.collision)
+{
+    case MONSTRE: System.out.println(&quot;Aie avec monstre numéro &quot;+jeuPhysique.moteurPhys.current_monster_index);break;
+    case HERO: System.out.println(&quot;Copain !&quot;);break;
+    case DECORS: System.out.println(&quot;Pas mal avec mur numéro &quot;+jeuPhysique.moteurPhys.current_wall_index);break;
+    default: break;
+}</code></pre>
+<h2 id="changement-du-contrôleur">Changement du contrôleur</h2>
+<p>Pour personnaliser son moyen de contrôler un joueur, plusieurs étapes sont nécessaires.</p>
+<ol type="1">
+<li>Il faut faire une classe fille de <code>ControleurClavier</code> afin d’attribuer d’autres valeurs pour les éléments de l’attribut <code>Controle c</code>.</li>
+</ol>
+<p>Exemple :</p>
+<pre><code>public class ControleurClavier2 extends ControleurClavier{
+    public ControleurClavier2(boolean affiche) {
+        super(affiche);
+    }
+    public void keyPressed(KeyEvent e) {
+        //touche gauche
+        if (e.getKeyCode()==KeyEvent.VK_A)
+        {
+            c.gauche=true;          
+        }
+        ...
+    }
+    public void keyReleased(KeyEvent e) {
+        //touche gauche
+        if (e.getKeyCode()==KeyEvent.VK_A)
+        {
+            c.gauche=false;
+        }
+        ...     
+    }
+}</code></pre>
+<ol start="2" type="1">
+<li>Il faut créer une classe fille de <code>Monde</code> pour rajouter l’attribut correspondant au nouveau contrôleur.</li>
+</ol>
+<p>Exemple :</p>
+<pre><code>public class MondePourDeux extends Monde{
+    public Controle c2;
+    ...
+}</code></pre>
+<ol start="3" type="1">
+<li>Il faut créer une classe qui hérite de <code>BouclePrincipale</code> afin de pouvoir rajouter le contrôleur au monde et écouter les nouveaux événements clavier.</li>
+</ol>
+<p>Exemple :</p>
+<pre><code>public void lanceBouclePrincipale() throws Exception {
+    ...
+    jeuPhysique.affiche.addKeyListener(cClavier2);
+    ...
+    MondePourDeux monMonde=(MondePourDeux jeuPhysique.moteurPhys.monde;
+    monMonde.c2=cClavier2.c;
+    ...         </code></pre>
+<ol start="4" type="1">
+<li>Il faut créer une classe fille de <code>MoteurPhysique</code> pour rajouter l’attribut correspondant au nouveau monde.</li>
+</ol>
+<pre><code>public class MoteurPourDeux extends MoteurPhysique{
+    public MondePourDeux monde;
+    ...</code></pre>
+<hr>
+</article>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/doc/MoteurDeJeu.md b/doc/MoteurDeJeu.md
index 407e23846f194561ddce6020be00c77aebc82706..c09c08aba3c807aa62ed8e0119d2bd5386abe4bf 100644
--- a/doc/MoteurDeJeu.md
+++ b/doc/MoteurDeJeu.md
@@ -1,13 +1,28 @@
 ---
 author: PF Villard
 title: Le moteur de jeu
+logo: iut.png
 ---
-<!-- pandoc  -N  --variable mainfont="Palatino" --variable sansfont="Helvetica" --variable monofont="Menlo"  -o MoteurDeJeu.html archiMoteurDeJeu.md -->
+<!-- pandoc -s -f markdown -t html5 --template=template.html -c mvp.css  -o MoteurDeJeu.html MoteurDeJeu.md -->
+
+
+# Utilisation de la bibliothèque de moteur de jeu  <!-- omit in toc -->
 
-# Utilisation de la bibliothèque de moteur de jeu
 
 Avant de lire ce document, il faut déjà comprendre l'[architecture du Moteur de jeu](./archiMoteurDeJeu.pdf).
 
+![Example du jeu par défaut](logo.png)
+
+# Sommaire  <!-- omit in toc -->
+
+- [Création de décors](#création-de-décors)
+- [Changement d'image](#changement-dimage)
+- [Changement d'image pendant une collision](#changement-dimage-pendant-une-collision)
+- [Changement de gravité](#changement-de-gravité)
+- [Vue subjective](#vue-subjective)
+- [Boucle de jeu](#boucle-de-jeu)
+- [Changement du contrôleur](#changement-du-contrôleur)
+
 ## Création de décors
 
 Il y a deux façon de créer un décors :
@@ -23,9 +38,18 @@ Pour changer l'image associée aux monstres ou aux héros, il suffit d'appeler l
 monMonde.balle.sprites.assignNewImage("hero2.png");
 ```
 
+![Changement de l'image du hero](fig/img2.png)
+
+Il est également possible de changer l'image du decors. 
+```
+affiche.decor.changeImage("background2.jpg");
+```
+
+![Changement du background](fig/img1.png)
+
 ## Changement d'image pendant une collision
 
-Pour changer l'aspect d'un héros, monstre ou mur lorsque une collision a lieu, il faut faire une classe fille et ré-écrire la méthode `public void draw(Graphics g)`en rajoutant quelque chose du type :
+Pour changer l'aspect d'un héros, monstre ou mur lorsque une collision a lieu, il faut faire une classe fille (par exemple de `ObjetHeros`)  et ré-écrire la méthode `public void draw(Graphics g)`en rajoutant quelque chose du type :
 
 ```
 // si en collision affiche carre
@@ -37,6 +61,20 @@ if (collision==1) {
 
 Pour changer l'aspect du hero, il faut aussi créer une classe héritant de `Monde` afin de d'assigner à la construction la bonne classe pour `balle`.
 
+Exemple :
+
+```
+public class MonMondeCool extends Monde{
+    	public MonMondeCool() throws IOException
+	{
+        balle=new HeroCarreQuandTouche();
+		//gere la vision subjective
+		Repere.h=balle;	
+	}
+}
+```
+
+![Rectangle rouge lorsque collision](fig/img3.png)
 
 ## Changement de gravité
 
@@ -67,3 +105,70 @@ switch (jeuPhysique.moteurPhys.monde.balle.collision)
 }
 ```
 
+## Changement du contrôleur
+
+
+Pour personnaliser son moyen de contrôler un joueur, plusieurs étapes sont nécessaires.
+
+1. Il faut faire une classe fille de `ControleurClavier` afin d'attribuer d'autres valeurs pour les éléments de l'attribut `Controle c`.
+
+Exemple :
+
+```
+public class ControleurClavier2 extends ControleurClavier{
+    public ControleurClavier2(boolean affiche) {
+        super(affiche);
+    }
+	public void keyPressed(KeyEvent e) {
+		//touche gauche
+		if (e.getKeyCode()==KeyEvent.VK_A)
+		{
+			c.gauche=true;			
+		}
+		...
+	}
+	public void keyReleased(KeyEvent e) {
+		//touche gauche
+		if (e.getKeyCode()==KeyEvent.VK_A)
+		{
+			c.gauche=false;
+		}
+		...		
+	}
+}
+```
+
+2. Il faut créer une classe fille de `Monde` pour rajouter l'attribut correspondant au nouveau contrôleur.
+
+Exemple :
+```
+public class MondePourDeux extends Monde{
+    public Controle c2;
+    ...
+}
+```
+
+3. Il faut créer une classe qui hérite de `BouclePrincipale` afin de pouvoir rajouter le contrôleur au monde et écouter les nouveaux événements clavier.
+
+Exemple :
+   
+```
+public void lanceBouclePrincipale() throws Exception {
+    ...
+	jeuPhysique.affiche.addKeyListener(cClavier2);
+	...
+    MondePourDeux monMonde=(MondePourDeux jeuPhysique.moteurPhys.monde;
+    monMonde.c2=cClavier2.c;
+    ...         
+```   
+
+4. Il faut créer une classe fille de `MoteurPhysique` pour rajouter l'attribut correspondant au nouveau monde.
+
+```
+public class MoteurPourDeux extends MoteurPhysique{
+    public MondePourDeux monde;
+    ...
+```
+
+
+
diff --git a/doc/archiMoteurDeJeu.pdf b/doc/archiMoteurDeJeu.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..81321f364cd878da1ec258f992e137b4628a25a2
Binary files /dev/null and b/doc/archiMoteurDeJeu.pdf differ
diff --git a/doc/fig/img1.png b/doc/fig/img1.png
new file mode 100644
index 0000000000000000000000000000000000000000..846ad6be9c82ab291e1bfb9cfc37f4ccd97124d2
Binary files /dev/null and b/doc/fig/img1.png differ
diff --git a/doc/fig/img2.png b/doc/fig/img2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f352e68e7143f530e1c3e5d27cb2dc3b90026f28
Binary files /dev/null and b/doc/fig/img2.png differ
diff --git a/doc/fig/img3.png b/doc/fig/img3.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb62af00cb01c3f437548a93809fd8c93d9f3c21
Binary files /dev/null and b/doc/fig/img3.png differ
diff --git a/doc/iut.png b/doc/iut.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c32cc34641de2acf000ab0a025b074066d07dd9
Binary files /dev/null and b/doc/iut.png differ
diff --git a/doc/logo.png b/doc/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2765093d45a8f4fedaca2983ccbc8a74fbada38
Binary files /dev/null and b/doc/logo.png differ
diff --git a/doc/mvp.css b/doc/mvp.css
new file mode 100644
index 0000000000000000000000000000000000000000..bea3cc9cdfa22f0c56e872f79a4882921fc9f6df
--- /dev/null
+++ b/doc/mvp.css
@@ -0,0 +1,475 @@
+/* MVP.css v1.7.3 - https://github.com/andybrewer/mvp */
+
+:root {
+    --border-radius: 5px;
+    --box-shadow: 2px 2px 10px;
+    --color: #118bee;
+    --color-accent: #118bee15;
+    --color-bg: #fff;
+    --color-bg-secondary: #e9e9e9;
+    --color-secondary: #920de9;
+    --color-secondary-accent: #920de90b;
+    --color-shadow: #f4f4f4;
+    --color-text: #000;
+    --color-text-secondary: #999;
+    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    --hover-brightness: 1.2;
+    --justify-important: center;
+    --justify-normal: left;
+    --line-height: 1.5;
+    --width-card: 285px;
+    --width-card-medium: 460px;
+    --width-card-wide: 800px;
+    --width-content: 1080px;
+}
+
+/*
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color: #0097fc;
+        --color-accent: #0097fc4f;
+        --color-bg: #333;
+        --color-bg-secondary: #555;
+        --color-secondary: #e20de9;
+        --color-secondary-accent: #e20de94f;
+        --color-shadow: #bbbbbb20;
+        --color-text: #f7f7f7;
+        --color-text-secondary: #aaa;
+    }
+}
+*/
+
+/* Layout */
+article aside {
+    background: var(--color-secondary-accent);
+    border-left: 4px solid var(--color-secondary);
+    padding: 0.01rem 0.8rem;
+}
+
+body {
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-family);
+    line-height: var(--line-height);
+    margin: 0;
+    overflow-x: hidden;
+    padding: 1rem 0;
+}
+
+footer,
+header,
+main {
+    margin: 0 auto;
+    max-width: var(--width-content);
+    padding: 2rem 1rem;
+}
+
+hr {
+    background-color: var(--color-bg-secondary);
+    border: none;
+    height: 1px;
+    margin: 4rem 0;
+    width: 100%;
+}
+
+section {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--justify-important);
+}
+
+section img,
+article img {
+    max-width: 100%;
+}
+
+section pre {
+    overflow: auto;
+}
+
+section aside {
+    border: 1px solid var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow) var(--color-shadow);
+    margin: 1rem;
+    padding: 1.25rem;
+    width: var(--width-card);
+}
+
+section aside:hover {
+    box-shadow: var(--box-shadow) var(--color-bg-secondary);
+}
+
+[hidden] {
+    display: none;
+}
+
+/* Headers */
+article header,
+div header,
+main header {
+    padding-top: 0;
+}
+
+header {
+    text-align: var(--justify-important);
+}
+
+header a b,
+header a em,
+header a i,
+header a strong {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+header nav img {
+    margin: 1rem 0;
+}
+
+section header {
+    padding-top: 0;
+    width: 100%;
+}
+
+/* Nav */
+nav {
+    align-items: center;
+    display: flex;
+    font-weight: bold;
+    justify-content: space-between;
+    margin-bottom: 7rem;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline-block;
+    margin: 0 0.5rem;
+    position: relative;
+    text-align: left;
+}
+
+/* Nav Dropdown */
+nav ul li:hover ul {
+    display: block;
+}
+
+nav ul li ul {
+    background: var(--color-bg);
+    border: 1px solid var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow) var(--color-shadow);
+    display: none;
+    height: auto;
+    left: -2px;
+    padding: .5rem 1rem;
+    position: absolute;
+    top: 1.7rem;
+    white-space: nowrap;
+    width: auto;
+    z-index: 1;
+}
+
+nav ul li ul::before {
+    /* fill gap above to make mousing over them easier */
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -0.5rem;
+    height: 0.5rem;
+}
+
+nav ul li ul li,
+nav ul li ul li a {
+    display: block;
+}
+
+/* Typography */
+code,
+samp {
+    background-color: var(--color-accent);
+    border-radius: var(--border-radius);
+    color: var(--color-text);
+    display: inline-block;
+    margin: 0 0.1rem;
+    padding: 0 0.5rem;
+}
+
+details {
+    margin: 1.3rem 0;
+}
+
+details summary {
+    font-weight: bold;
+    cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    line-height: var(--line-height);
+}
+
+mark {
+    padding: 0.1rem;
+}
+
+ol li,
+ul li {
+    padding: 0.2rem 0;
+}
+
+p {
+    margin: 0.75rem 0;
+    padding: 0;
+}
+
+pre {
+    margin: 1rem 0;
+    max-width: var(--width-card-wide);
+    padding: 1rem 0;
+}
+
+pre code,
+pre samp {
+    display: block;
+    max-width: var(--width-card-wide);
+    padding: 0.5rem 2rem;
+    white-space: pre-wrap;
+}
+
+small {
+    color: var(--color-text-secondary);
+}
+
+sup {
+    background-color: var(--color-secondary);
+    border-radius: var(--border-radius);
+    color: var(--color-bg);
+    font-size: xx-small;
+    font-weight: bold;
+    margin: 0.2rem;
+    padding: 0.2rem 0.3rem;
+    position: relative;
+    top: -2px;
+}
+
+/* Links */
+a {
+    color: var(--color);
+    display: inline-block;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+a:hover {
+    filter: brightness(var(--hover-brightness));
+    text-decoration: underline;
+}
+
+a b,
+a em,
+a i,
+a strong,
+button {
+    border-radius: var(--border-radius);
+    display: inline-block;
+    font-size: medium;
+    font-weight: bold;
+    line-height: var(--line-height);
+    margin: 0.5rem 0;
+    padding: 1rem 2rem;
+}
+
+button {
+    font-family: var(--font-family);
+}
+
+button:hover {
+    cursor: pointer;
+    filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a strong,
+button {
+    background-color: var(--color);
+    border: 2px solid var(--color);
+    color: var(--color-bg);
+}
+
+a em,
+a i {
+    border: 2px solid var(--color);
+    border-radius: var(--border-radius);
+    color: var(--color);
+    display: inline-block;
+    padding: 1rem 2rem;
+}
+
+article aside a {
+    color: var(--color-secondary);
+}
+
+/* Images */
+figure {
+    margin: 0;
+    padding: 0;
+}
+
+img{
+    display: block;
+    margin: auto;
+}
+
+figure img {
+    max-width: 100%;
+}
+
+figure figcaption {
+    color: var(--color-text-secondary);
+    text-align: center;
+}
+
+/* Forms */
+
+button:disabled,
+input:disabled {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    cursor: not-allowed;
+}
+
+button[disabled]:hover {
+    filter: none;
+}
+
+form {
+    border: 1px solid var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow) var(--color-shadow);
+    display: block;
+    max-width: var(--width-card-wide);
+    min-width: var(--width-card);
+    padding: 1.5rem;
+    text-align: var(--justify-normal);
+}
+
+form header {
+    margin: 1.5rem 0;
+    padding: 1.5rem 0;
+}
+
+input,
+label,
+select,
+textarea {
+    display: block;
+    font-size: inherit;
+    max-width: var(--width-card-wide);
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    display: inline-block;
+}
+
+input[type="checkbox"]+label,
+input[type="radio"]+label {
+    display: inline-block;
+    font-weight: normal;
+    position: relative;
+    top: 1px;
+}
+
+input,
+select,
+textarea {
+    border: 1px solid var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    margin-bottom: 1rem;
+    padding: 0.4rem 0.8rem;
+}
+
+input[readonly],
+textarea[readonly] {
+    background-color: var(--color-bg-secondary);
+}
+
+label {
+    font-weight: bold;
+    margin-bottom: 0.2rem;
+}
+
+/* Tables */
+table {
+    border: 1px solid var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    border-spacing: 0;
+    display: inline-block;
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 0;
+    white-space: nowrap;
+}
+
+table td,
+table th,
+table tr {
+    padding: 0.4rem 0.8rem;
+    text-align: var(--justify-important);
+}
+
+table thead {
+    background-color: var(--color);
+    border-collapse: collapse;
+    border-radius: var(--border-radius);
+    color: var(--color-bg);
+    margin: 0;
+    padding: 0;
+}
+
+table thead th:first-child {
+    border-top-left-radius: var(--border-radius);
+}
+
+table thead th:last-child {
+    border-top-right-radius: var(--border-radius);
+}
+
+table thead th:first-child,
+table tr td:first-child {
+    text-align: var(--justify-normal);
+}
+
+table tr:nth-child(even) {
+    background-color: var(--color-accent);
+}
+
+/* Quotes */
+blockquote {
+    display: block;
+    font-size: x-large;
+    line-height: var(--line-height);
+    margin: 1rem auto;
+    max-width: var(--width-card-medium);
+    padding: 1.5rem 1rem;
+    text-align: var(--justify-important);
+}
+
+blockquote footer {
+    color: var(--color-text-secondary);
+    display: block;
+    font-size: small;
+    line-height: var(--line-height);
+    padding: 1.5rem 0;
+}
\ No newline at end of file
diff --git a/doc/template.html b/doc/template.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2dd56c182db9bd2ee80f8dce6196414545a4f40
--- /dev/null
+++ b/doc/template.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+$for(author-meta)$
+  <meta name="author" content="$author-meta$" />
+$endfor$
+$if(date-meta)$
+  <meta name="dcterms.date" content="$date-meta$" />
+$endif$
+$if(keywords)$
+  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
+$endif$
+  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+$if(highlighting-css)$
+  <style type="text/css">
+$highlighting-css$
+  </style>
+$endif$
+$for(css)$
+  <link rel="stylesheet" href="$css$" />
+$endfor$
+<style type="text/css">
+  :root {
+  --color: #2096ba;
+  --color-secondary: #2096ba;
+  --color-accent: #f7f8fa;
+  --color-text: #222426;
+  --color-shadow: #c5d2db;
+  --width-content: 720px;
+  }
+  
+  code, samp {
+    font-size: 1.2em;
+  }
+
+  nav {
+    justify-content: space-evenly;
+  }
+  
+  a:hover {
+    filter: none;
+    color: #df6e21;
+  }
+$if(quotes)$
+    q { quotes: "“" "”" "‘" "’"; }
+$endif$
+</style>
+$if(math)$
+  $math$
+$endif$
+$for(header-includes)$
+  $header-includes$
+$endfor$
+</head>
+<body>
+$for(include-before)$
+$include-before$
+$endfor$
+$if(title)$
+<header id="title-block-header">
+  <nav id="$idprefix$TOC">
+      <a href="/"><img alt="Logo" src="$logo$" height="70"></a>
+      $if(toc)$
+      <ul>
+          <li><a href="#">Navigation</a>
+            $table-of-contents$
+          </li>
+      </ul>
+      $endif$
+  </nav>
+<h1 class="title">$title$</h1>
+$if(subtitle)$
+<p class="subtitle">$subtitle$</p>
+$endif$
+$for(author)$
+<p class="author">$author$</p>
+$endfor$
+$if(date)$
+<p class="date">$date$</p>
+$endif$
+$if(website)$
+<p><a href="$website$"><i>Website &nearr;</i></a></p>
+$endif$
+</header>
+$endif$
+<main>
+<hr>
+<article>
+$body$
+$for(include-after)$
+$include-after$
+$endfor$
+<hr>
+</article>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/nbproject/overview.html b/nbproject/overview.html
new file mode 100644
index 0000000000000000000000000000000000000000..d4bae9dfa37c962ee909f277715f24fac1a75e2f
--- /dev/null
+++ b/nbproject/overview.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+<p>[S. Yawn, Bureaucratosis] Gas mine treaty blah blah bl-blah </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/testMario.java b/test/testMario.java
index 8e172c7b497ebf1403ea1684c71f651dce169f91..e25ffb21e7d750ba76f71b4670e78e666d8bca1a 100644
--- a/test/testMario.java
+++ b/test/testMario.java
@@ -44,8 +44,10 @@ public class testMario {
         
         
         // Construction du monde
-        //MonMondeCool monMonde= new MonMondeCool();
-         Monde monMonde= new Monde();
+        
+        // Essai de changement d'apparence pour collisions
+        MonMondeCool monMonde= new MonMondeCool();
+        // Monde monMonde= new Monde();
          
         //////////////////////
         // Les MURS