diff --git a/SNT/03_Internet/Simulation/build.py b/SNT/03_Internet/Simulation/build.py
index 7dee5e3..b734e3e 100644
--- a/SNT/03_Internet/Simulation/build.py
+++ b/SNT/03_Internet/Simulation/build.py
@@ -1,13 +1,12 @@
 import yaml
-import cairosvg
+#import cairosvg
+from weasyprint import HTML, CSS
 import jinja2
 from pathlib import Path
 import networkx as nx
 import matplotlib.pyplot as plt
 
 
-#cairosvg.svg2pdf(url="role.svg", write_to="role.pdf")
-
 def graph(roles):
     g = nx.Graph()
     g.add_nodes_from([str(role["num"]) for role in roles])
@@ -16,30 +15,42 @@ def graph(roles):
             g.add_edge(str(role["num"]), str(list(lien.keys())[0]))
     return g
 
+def build_topo(topo, roles):
+    plt.figure(figsize=(2,2))
+    ax = plt.gca()
+    #ax.set_title(f"Forme du réseau: {topo}")
+    g = graph(roles)
+    nx.draw(g, 
+            node_color='white',
+            node_size=100,
+            ax=ax)
+    _ = ax.axis('off')
+    plt.margins(0.2)
+    plt.subplots_adjust(left=0, right=1, top=1, bottom=0)
+    plt.savefig(f"{topo}/forme.png",
+            transparent=True,
+            )
+    plt.cla()
+
+def role_card(role, topo, template, css):
+    card = template.render(topo=topo, **role)
+    Path(topo).mkdir(exist_ok=True)
+    dest = f"{topo}/role{role['num']}.html"
+    with open(dest, "w") as f:
+        f.write(card)
+    #cairosvg.svg2pdf(url=dest, write_to=dest.replace("svg", "pdf"))
+    HTML(dest).write_pdf(dest.replace("html", "pdf"), stylesheets=[css])
+
 
 with open("roles.yml", "r") as f:
     topos = yaml.load(f, Loader=yaml.SafeLoader)
-with open("role.svg", "r") as f:
-    template = jinja2.Template(f.read())
+with open("role.html", "r") as f:
+    template = jinja2.Template(f.read(), undefined=jinja2.StrictUndefined)
+css = CSS("role.css")
 
 for topo, desc in topos.items():
-    for role in desc["roles"]:
-        card = template.render(**role)
-        Path(topo).mkdir(exist_ok=True)
-        dest = f"{topo}/role{role['num']}.svg"
-        with open(dest, "w") as f:
-            f.write(card)
-        cairosvg.svg2pdf(url=dest, write_to=dest.replace("svg", "pdf"))
+    build_topo(topo, desc["roles"])
+
+    for role in desc["roles"]:
+        role_card(role, topo, template, css)
 
-    plt.figure(figsize=(5,5))
-    ax = plt.gca()
-    ax.set_title('Random graph')
-    ax.set_title(f"Forme du réseau: {topo}")
-    g = graph(desc['roles'])
-    nx.draw(g, with_labels=True, 
-            node_color='lightgreen',
-            node_size=700,
-            ax=ax)
-    _ = ax.axis('off')
-    plt.savefig(f"{topo}/forme.pdf")
-    plt.cla()
diff --git a/SNT/03_Internet/Simulation/role.css b/SNT/03_Internet/Simulation/role.css
index 597892f..762b2a5 100644
--- a/SNT/03_Internet/Simulation/role.css
+++ b/SNT/03_Internet/Simulation/role.css
@@ -1,7 +1,6 @@
 @page {
     margin: 0;
-    height: 8cm;
-    width: 25cm; 
+    size: A5;
 }
 html {
     height: 100%;
@@ -11,7 +10,61 @@ body {
     box-sizing: border-box;
     color: #2A3239;
     display: flex;
-    flex-wrap: rows;
-    justify-content: space-between;
+    flex-direction: column;
     margin: 0;
 }
+
+header {
+    display: flex;
+    flex-direction: row;
+    background-color: #D9411E;
+    justify-content: space-between;
+}
+
+header > * {
+    padding: 10px;
+}
+
+#layout {
+    width: 15%;
+    background-color: #333;
+}
+#layout > img {
+    width: 4em;
+    height: 4em;
+    min-height: 100%;
+    min-width: 100%;
+    vertical-align: middle;
+}
+#ip {
+    font-size: 2em;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+#number {
+    background-color: #333;
+    color: #fff;
+    width: 15%;
+    font-size: 2em;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+main > * {
+    padding: 10px;
+}
+
+#links {
+    background-color: #eeeeee;
+    border: solid black;
+    border-width: medium 0 medium 0;
+    }
+
+
diff --git a/SNT/03_Internet/Simulation/role.html b/SNT/03_Internet/Simulation/role.html
new file mode 100644
index 0000000..c0e4621
--- /dev/null
+++ b/SNT/03_Internet/Simulation/role.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="../role.css" rel="stylesheet">
+    <title>Role {{num}} </title>
+    <meta name="description" content="Role">
+  </head>
+
+  <body>
+      <header>
+          <span id="layout">
+              <img  src="../{{topo}}/forme.png"> 
+          </span>
+          <span id="ip">
+              <p>IP: {{IP}}</p>
+          </span>
+          <span id="number">
+              <p># {{ num }} </p>
+          </span>
+      </header>
+      <main>
+          <section id="goals">
+              <h2>Objectifs:</h2>
+                {% if objectifs %}
+                <ul>
+                    {% for o in objectifs %}
+                    <li>{{ o }}</li>
+                    {% endfor %}
+                </ul>
+                {% endif %}
+          </section>
+          <section id="events">
+              <h2>Particularités:</h2>
+              {% if particularites %}
+              <ul>
+                  {% for p in particularites %}
+                  <li>{{ p }}</li>
+                  {% endfor %}
+              </ul>
+              {% else %}
+              ∅
+              {% endif %}
+          </section>
+          <section id="links">
+              <h2>Voisins connus</h2>
+              {% if liens %}
+              <ul>
+                  {% for l in liens %}
+                  <li>{{ l | replace("{", "") | replace("}", "")}}</li>
+                  {% endfor %}
+              </ul>
+              {% endif %}
+          </section>
+      </main>
+  </body>
+</html>