--- a/design/group.html	Wed Jul 19 16:20:29 2017 +0200
+++ b/design/group.html	Tue Jul 18 18:15:51 2017 +0200
@@ -4,29 +4,67 @@
 
 {% include nav.html search=true %}
 <div class="container">
+
+	<h3 class="mb-3">Lorem ipsum</h3>
+
 	<div class="row">
 		<div class="col col-8">		
 			{% include sessions.list.html show_author=true %}
 		</div>
 		<div class="col col-4">
 			
-			<h3>Lorem ipsum</h3>
+			<small><strong>à propos</strong> &bull; <a href="group-info.html">éditer</a></small>
+
+			<div class="card mb-3">
+				<div class="card-block">
+					<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi tortor, viverra id porta id, porttitor at justo. Curabitur pharetra, sapien sit amet ornare finibus, diam tortor varius sapien, non laoreet tellus ante a justo. Donec id lacus sit amet metus gravida tempus vel vitae justo.</p>
+				</div>
+			</div>
+
+			<small><strong>Protocole d'annotation</strong> &bull; <a href="group-protocol-edit.html">modifier</a></small>
 
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi tortor, viverra id porta id, porttitor at justo. Curabitur pharetra, sapien sit amet ornare finibus, diam tortor varius sapien, non laoreet tellus ante a justo. Donec id lacus sit amet metus gravida tempus vel vitae justo.</p>
+			<div class="card mb-3"><div class="card-block">
 
-			<h3>Protocole d'annotations</h3>
+			{% for metacategory in site.data.metacategories %}
+			
+			<div class="mb-2">
+				<span class="badge" style="background-color: rgb{{ metacategory.color }}">{{ metacategory.label }}</span> <span class="small">{{ metacategory.description }}</span>
+			</div>
+
+			{% endfor %}
+
+			<hr />
 
-			<h3>Membres</h3>
+			{% for metacategory in site.data.metacategories-extra %}
+			
+			<div class="mb-2">
+				<span class="badge" style="background-color: rgb{{ metacategory.color }}">{{ metacategory.label }}</span> <span class="small">{{ metacategory.description }}</span>
+			</div>
 
-			<div>
+			{% endfor %}
+			</div></div>
+
+
+			<small><strong>Membres</strong></small>
+		
+			<div class="card">
+			
+			<div class="list-group list-group-flush">
 			{% for member in site.data.members %}
-			<div class="mb-2">
-				<div>{{ member.name  }} <span class="text-muted">{{ member.shared_sessions }}</span></div>
-				<div><span class="text-muted small">{{ member.last_seen }}</span></div>
+			<div class="list-group-item d-flex flex-row flex-nowrap">
+				<div class="mr-3">
+					<span class="badge badge-default badge-pill">{{ member.shared_sessions }}</span>
+				</div>
+				<div>
+					{{ member.name  }}
+					<div><span class="text-muted small">{{ member.last_seen }}</span></div>
+				</div>
 			</div>
 			{% endfor %}
 			</div>
 
+			</div>
+
 		</div>
 	</div>
 </div>