diff --git a/style.css b/style.css
diff --git a/tags.html b/tags.html
diff --git a/video.html b/video.html
diff --git a/videos.html b/videos.html
diff --git a/videos/static/style.css b/videos/static/style.css
@@ -1,5 +1,5 @@
 * {
-    font-family: Muli;
+    font-family: Roboto;
 }
 
 #lateral_bar {
@@ -35,7 +35,8 @@ body {
 }
 
 .tag {
-    font-family: 'Comic Sans MS';
+    font-family: 'roboto';
+    font-variant: small-caps;
     font-size: 20px;
     padding-top: 3px;
     padding-bottom: 3px;
@@ -54,14 +55,9 @@ h1 {
 }
 
 a {
-    color: #167ac6;
     text-decoration: none;
 }
 
-a:hover {
-    text-decoration: underline;
-}
-
 #navigation_bar ul {
     list-style-type: none;
     margin: 0;
@@ -88,7 +84,7 @@ a:hover {
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
-    
+
 }
 
 #navigation_bar li a:hover {
@@ -97,12 +93,57 @@ a:hover {
     text-decoration: none;
 }
 
-figcaption{
-    color:#167ac6;
+
+
+
+
+/* Concerne l'affichage des images de template des projs que l'on impose à la taille 16/9 */
+.proj_image{
+  max-width:200px;
+  max-height: 113px;
+}
+
+/* Concerne l'affichage des images de template des vidéos que l'on impose à la taille 16/9 */
+.img_vid{
+  max-width:200px;
+  max-height: 113px;
+}
+
+/* Concerne l'affichage des légendes des vidéos */
+.legende_vid_duree{
+  margin-top: -23px;
+  margin-right: 2px;
+  text-align: right;
+  color:white;
+}
+
+.legende_vid_titre{
+  color:#167ac6;
+  width: 200px;
+  max-height: 40px;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.legende_vid_auteur{
+  text-decoration: none;
+  color:grey;
+  width: 200px;
+  font-size: 12px;
+  margin-bottom: 15px;
+}
+
+a:hover{
+  opacity: 0.7;
 }
 
-img {
-    width:200px;
+/* Concerne l'affichage des légendes des projs */
+.legende_proj{
+  color:#167ac6;
+  width: 200px;
+  max-height: 40px;
+  overflow: hidden;
+  text-decoration: none;
 }
 
 #lateral_bar h1{

diff --git a/videos/templates/base.html b/videos/templates/base.html
@@ -5,6 +5,7 @@
 <head>
   <meta charset="utf-8"/>
   <link rel="stylesheet" href="{% static 'style.css' %}"/>
+  <link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
   <title>JTX</title>
 </head>
 <body>
@@ -49,7 +50,7 @@ <h3>Projs :</h3>
 	</div>
 
 	<div id="body">
-    
+
     {% if titre_tag %}
         <span class="tag" style="font-size:30px">{{titre}}</span><br/><br/>
     {% else %}

diff --git a/videos/templates/index.html b/videos/templates/index.html
@@ -16,20 +16,20 @@ <h1>Projs</h1>
 	{% for p in projs %}
     <a href="{% url 'proj' p.id %}">
         <figure style="display:table-cell">
-            <img width="300px" src="{{p.image}}"/>
+            <img class="proj_image" src="{{p.image}}"/>
             <figcaption>{{p.titre}}</figcaption>
         </figure>
     </a>
 	{% endfor %}
 {% endif %}
 
 {% if videos %}
-<h1>Videos</h1>
+<h1>Vidéos</h1>
 	{% for v in videos %}
     <a href="{% url 'video' v.id %}">
         <figure style="display:table-cell">
-            <img width="300px" src="{{v.url}}.png"/>
-            <figcaption style="font-size:20px">{{v.titre}}</figcaption>
+            <img class="img_vid" src="{{v.url}}.png"/>
+            <figcaption class="legende_vid">{{v.titre}}</figcaption>
         </figure>
     </a>
 	{% endfor %}

diff --git a/videos/templates/proj.html b/videos/templates/proj.html
@@ -57,7 +57,7 @@ <h2 id="titre_video"></h2>
 <br/>
 {% for r in proj.relation_comment_proj_set.all %}
     <br/>
-    <strong>{{r.author.username }}</strong> : 
+    <strong>{{r.author.username }}</strong> :
     {{ r.comment }}
 {% endfor %}
 
@@ -81,7 +81,7 @@ <h2>Suggestions</h2>
 {% for p in suggestions %}
 <a href="{% url 'proj' p.id %}">
 	<figure style="display:table-cell">
-        <img width="200px" src="{{p.image}}"/>
+        <img class="img_vid" src="{{p.image}}"/>
 		<figcaption style="font-size:20px">{{p.titre}}</figcaption>
 	</figure>
 </a>

diff --git a/videos/templates/projs.html b/videos/templates/projs.html
@@ -4,10 +4,10 @@
 {% if elements %}
 
 	{% for p in elements %}
-    <a href="{% url 'proj' p.id %}">
+    <a href="{% url 'proj' p.id %}", class="proj">
         <figure style="display:table-cell">
-            <img width="300px" src="{{p.image}}"/>
-            <figcaption style="font-size:20px">{{p.titre}}</figcaption>
+            <img class="proj_image" src="{{p.image}}"/>
+            <figcaption class="legende_proj">{{p.titre}}</figcaption>
         </figure>
     </a>
 	{% endfor %}

diff --git a/videos/templates/video.html b/videos/templates/video.html
@@ -13,7 +13,7 @@ <h2>{{ video.date|date:"d/m/Y" }}</h2>
         <source src="{{video.url}}">
 		Your browser does not support the video tag.
 	</video>
-  
+
 {% if request.user.is_authenticated %}
 <br/>
 {% if favorite %}
@@ -66,8 +66,8 @@ <h2>Suggestions</h2>
 {% for v in suggestions %}
 <a href="{% url 'video' v.id %}">
 	<figure style="display:table-cell">
-		<img width="200px" src="{{v.url}}.png"/>
-		<figcaption style="font-size:20px">{{v.titre}}</figcaption>
+		<img class="img_vid" src="{{v.url}}.png"/>
+		<figcaption>{{v.titre}}</figcaption>
 	</figure>
 </a>
 <br/><br/>

diff --git a/videos/templates/videos.html b/videos/templates/videos.html
@@ -6,18 +6,24 @@
 {% load app_filters %}
 
 	{% for v in elements %}
-    <a href="{% url 'video' v.id %}">
+				<a href="{% url 'video' v.id %}">
         <figure style="display:table-cell">
-            <img src="{{v.url}}.png"/>
-            <figcaption style="font-size:15">
-                {{v.titre}}
-                <br/>
+
+            <img class="img_vid" src="{{v.url}}.png"/>
+
+						<figcaption class="legende_vid_duree">
                 {{v|duration}}
-                <br/>
-                {{v|auteurs}}
             </figcaption>
+
+						<figcaption class="legende_vid_titre">
+								{{v.titre}}
+						</figcaption>
+
+						<figcaption class="legende_vid_auteur">
+								{{v|auteurs}}
+						</figcaption>
         </figure>
-    </a>
+				</a>
 	{% endfor %}
 
 {% endif %}