Binary file .DS_Store has changed
Binary file crea/.DS_Store has changed
Binary file crea/inte-crea/.DS_Store has changed
--- a/crea/inte-crea/css/ldt-commun.css Tue Oct 25 18:14:00 2011 +0200
+++ b/crea/inte-crea/css/ldt-commun.css Wed Oct 26 16:51:02 2011 +0200
@@ -26,7 +26,7 @@
}
body {
- font-family: "DIN-Light", Helvetica, Arial, sans-serif; color: #484848; background: url(../img/main_bg.png) repeat-x #f8f6f7;
+ font-family: Helvetica, Arial, sans-serif; color: #484848; background: url(../img/main_bg.png) repeat-x #f8f6f7;
}
/* usual selectors */
@@ -40,33 +40,39 @@
}
b {
- font-family: "DIN-Bold", Helvetica, Arial, sans-serif; font-weight: 800;
+ font-weight: 800;
+}
+
+h1 {
+ font-family: "DIN-Light", Helvetica, Arial, sans-serif; font-size: 22px;
+}
+
+h1 bold {
+ font-family: "DIN-Bold", Helvetica, Arial, sans-serif;
}
h2 {
- font-size: 21px; color: #0068c4; margin: 4px 2px;
+ font-family: "DIN-Bold", Helvetica, Arial, sans-serif; font-size: 21px; color: #0068c4; margin: 4px 2px;
+}
+
+h3 {
+ font-family: "DIN-Bold", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 18px; color: #0068c4;
+}
+
+h4 {
+ font-size: 16px;
}
p {
margin: 2px 0; font-size: 13px;
}
-/* Grid widths */
-
-.full_width {
- width: 960px;
-}
+/* Frequently-used classes */
-.cols_2 {
- width: 140px; margin: 10px; /* Total : 160px */
+.highlight {
+ background: #fff080;
}
-.cols_4 {
- width: 300px; margin: 10px; /* Total : 320px */
-}
-
-/* Frequently-used classes */
-
div.pad {
padding: 10px;
}
@@ -79,16 +85,28 @@
float: left;
}
-.fl {
+div.fl, li.fl {
float: left;
}
+div.fr, li.fr {
+ float: right;
+}
+
.clear {
clear: both;
}
.li_h2 {
- width: 100%; border-bottom: 1px solid #484848; margin: 5px 0;
+ border-bottom: 1px solid #484848; margin: 5px 0;
+}
+
+.li_media {
+ margin: 10px;
+}
+
+.li_media img {
+ background: #000000; border: 2px solid #ffffff; padding: 1px;
}
a.under {
@@ -99,12 +117,28 @@
text-decoration: none;
}
+a.blue, p.blue {
+ color: #0068c4;
+}
+
a.pink {
color: #ff3b77;
}
+.bulle_annot, .bulle_people {
+ float: right; width: 17px; height: 10px; font-size: 9px; margin: 3px 0 0; padding: 0 0 3px 11px; color: #ffffff; text-align: center; overflow: hidden;
+}
+
.bulle_annot {
- float: right; width: 17px; height: 10px; font-size: 9px; margin: 3px 0 0; padding: 0 0 3px 11px; color: #ffffff; background: url(../img/bulle_annot.png); text-align: center; overflow: hidden;
+ background: url(../img/bulle_annot.png);
+}
+
+.bulle_people {
+ background: url(../img/bulle_people.png);
+}
+
+.font_11 {
+ font-size: 11px;
}
/* General container */
@@ -116,7 +150,7 @@
/* Barre de titre */
#title_bar {
- height: 50px; font-size: 22px;
+ font-family: "DIN-Light", Helvetica, Arial, sans-serif; height: 50px; font-size: 22px;
}
#title_bar a {
@@ -147,10 +181,11 @@
margin: 3px 10px 0 0;
}
+
/* Footer */
#footer {
- float: right; list-style: none; border-top: 1px solid #484848; margin: 5px 0 0; padding: 10px;
+ float: right; list-style: none; border-top: 1px solid #484848; padding: 10px; width: 940px; /* 960 - padding */
}
#footer li {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/inte-crea/css/ldt-home.css Wed Oct 26 16:51:02 2011 +0200
@@ -0,0 +1,53 @@
+/* Derniers médias */
+
+#derniers_medias {
+ width: 960px; margin: 5px 0;
+}
+
+#derniers_medias .li_h2 {
+ width: 960px;
+}
+
+#derniers_medias .li_media {
+ width: 300px;
+}
+
+/* Plus annotés */
+
+#plus_annotes {
+ width: 640px; margin: 5px 0;
+}
+
+#plus_annotes .li_h2 {
+ width: 630px; margin-right: 10px;
+}
+
+#plus_annotes .li_media {
+ width: 140px;
+}
+
+/* Groupes actifs */
+
+#groupes_actifs {
+ width: 320px; margin: 5px 0;
+}
+
+#groupes_actifs .li_h2 {
+ width: 310px; margin-left: 10px;
+}
+
+#groupes_actifs .li_media {
+ width: 300px; margin: 5px 10px;
+}
+
+div.img_groupes_actifs {
+ float: left; position: relative; padding: 5px 10px 0 0;
+}
+
+div.txt_groupes_actifs {
+ float: left; width: 230px;
+}
+
+.lock_group {
+ background: url(../img/lock.png); width: 11px; height: 13px; position: absolute; left: 45px; top: 34px;
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/inte-crea/css/ldt-recherche.css Wed Oct 26 16:51:02 2011 +0200
@@ -0,0 +1,108 @@
+
+/* LISTE DES RÉSULTATS DE RECHERCHE */
+
+#liste_resultats {
+ width: 640px;
+}
+
+#li_haut_resultats {
+ width: 630; padding: 5px 9px 5px 0; border-right: 1px solid #484848;
+}
+
+#ul_haut_resultats {
+ width: 630px; border-bottom: 1px solid #484848;
+}
+
+#title_resultats {
+ width: 250px;
+}
+
+#title_resultats h2 {
+ font-size: 19px;
+}
+
+#p_nb_resultats {
+ margin : 10px 0 0;
+}
+
+#resultats_options {
+ font-family: "DIN-Light", Helvetica, Arial, sans-serif; float: right; padding: 0 20px; margin: 4px 0; font-size: 19px; background:url(../img/fl_bas.png) right 80% no-repeat; color: #0068c4;
+}
+
+/* TITRE DU MÉDIA */
+
+div.titre_result_media {
+ float: left; width: 630px; padding: 10px 9px 0 0; border-right: 1px solid #484848;
+}
+
+.titre_result_media div {
+ float: left; border-color: #d0d0d0; border-width: 1px; border-style: solid none; height: 25px;
+}
+
+.h3_result_media {
+ width: 240px;
+}
+
+.h3_result_media h3 {
+ margin: 2px 0 0 2px;
+}
+
+div.duree_result_media {
+ width: 49px; border-right: 1px solid #d0d0d0;
+}
+
+.duree_result_media p {
+ font-size: 11px; text-align: right; margin: 10px 2px 0 0;
+}
+
+.graph_result_media {
+ width: 350px; height: 25px;
+}
+
+/* LISTE DES SEGMENTS */
+
+ul.list_segments {
+ width: 640px;
+}
+
+li.li_segment {
+ width: 630px; padding: 3px 9px 3px 0; border-width: 1px; border-style: none solid none none; border-color: #484848;
+}
+
+li.li_segment.selected {
+ background: #fbfafa; padding: 2px 10px 2px 0; border-style: solid none;
+}
+
+div.left_segment {
+ float: left; width: 87px; height: 47px; padding: 5px; position: relative;
+}
+
+.left_segment img {
+ border: 1px solid #f0f0f0;
+}
+
+p.duree_segment {
+ position: absolute; margin: 0; right: 10px; bottom: 10px; color: #ffffff; font-size: 11px;
+}
+
+div.color_zone {
+ float: left; width: 5px; height: 45px; margin: 1px 0;
+}
+
+p.text_segment, h4.title_segment {
+ margin-left: 100px;
+}
+
+li.plus_result {
+ width: 630px; padding: 0 9px 0 0; border-right: 1px solid #484848;
+}
+
+.plus_result p {
+ width: 630px; margin: 0 0 10px; padding: 0 0 5px; text-align: right; border-bottom: 1px solid #d0d0d0;
+}
+
+/* PAGINATION DES RESULTATS */
+
+#result_pagination {
+ width: 630px; padding: 0 0 10px 9px; border-right: 1px solid #484848;
+}
\ No newline at end of file
--- a/crea/inte-crea/home.html Tue Oct 25 18:14:00 2011 +0200
+++ b/crea/inte-crea/home.html Wed Oct 26 16:51:02 2011 +0200
@@ -4,6 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Plateforme LDT : Home</title>
<link rel="stylesheet" href="css/ldt-commun.css" type="text-css" />
+ <link rel="stylesheet" href="css/ldt-home.css" type="text-css" />
</head>
<body>
@@ -39,29 +40,150 @@
<li class="li_h2">
<h2>Derniers médias</h2>
</li>
- <li class="cols_4">
- <img src="img/placeholder.png" width="300" height="225" />
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
<div class="bulle_annot">250</div>
<p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
<p>par <a class="under" href="#">IRI</a> | 1h30</p>
</li>
- <li class="cols_4">
- <img src="img/placeholder.png" width="300" height="225" />
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
<div class="bulle_annot">250</div>
<p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
<p>par <a class="under" href="#">IRI</a> | 1h30</p>
</li>
- <li class="cols_4">
- <img src="img/placeholder.png" width="300" height="225" />
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="294" height="165" /></a>
<div class="bulle_annot">250</div>
<p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
<p>par <a class="under" href="#">IRI</a> | 1h30</p>
</li>
</ul>
+
+<!-- MEDIAS LES PLUS ANNOTÉS -->
+
+ <ul class="floatlist" id="plus_annotes">
+ <li class="li_h2">
+ <h2>Médias les plus annotés</h2>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ <li class="li_media">
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+ <div class="bulle_annot">120</div>
+ <p><a href="#"><b>Lorem Ipsum</b></a></p>
+ <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>
+ </li>
+ </ul>
+
+<!-- GROUPES ACTIFS -->
+
+ <ul class="floatlist" id="groupes_actifs">
+ <li class="li_h2">
+ <h2>Groupes actifs</h2>
+ </li>
+ <li class="li_media">
+ <div class="img_groupes_actifs">
+ <a href="#"><img src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
+ </div>
+ <div class="txt_groupes_actifs">
+ <div class="bulle_people">57</div>
+ <div class="bulle_annot">32</div>
+ <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
+ </div>
+ </li>
+ <li class="li_media">
+ <div class="img_groupes_actifs">
+ <a href="#"><img src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
+ <div class="lock_group"></div>
+ </div>
+ <div class="txt_groupes_actifs">
+ <div class="bulle_people">57</div>
+ <div class="bulle_annot">32</div>
+ <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
+ </div>
+ </li>
+ <li class="li_media">
+ <div class="img_groupes_actifs">
+ <a href="#"><img src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
+ </div>
+ <div class="txt_groupes_actifs">
+ <div class="bulle_people">57</div>
+ <div class="bulle_annot">32</div>
+ <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
+ </div>
+ </li>
+ <li class="li_media">
+ <div class="img_groupes_actifs">
+ <a href="#"><img src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
+ <div class="lock_group"></div>
+ </div>
+ <div class="txt_groupes_actifs">
+ <div class="bulle_people">57</div>
+ <div class="bulle_annot">32</div>
+ <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
+ </div>
+ </li>
+ <li class="li_media">
+ <div class="img_groupes_actifs">
+ <a href="#"><img src="img/placeholder_4_3.jpg" width="54" height="40" /></a>
+ </div>
+ <div class="txt_groupes_actifs">
+ <div class="bulle_people">57</div>
+ <div class="bulle_annot">32</div>
+ <p><a href="#" class="under"><b>Regards sur le numérique</b></a></p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod …</p>
+ </div>
+ </li>
+ </ul>
<!-- FOOTER COMMUN -->
- <ul class="full_width" id="footer">
+ <ul id="footer">
<li>
<a href="#">V.01.15</a>
</li>
Binary file crea/inte-crea/img/bulle_people.png has changed
Binary file crea/inte-crea/img/fl_bas.png has changed
Binary file crea/inte-crea/img/lock.png has changed
Binary file crea/inte-crea/img/placeholder_16_9.jpg has changed
Binary file crea/inte-crea/img/placeholder_4_3.jpg has changed
Binary file crea/inte-crea/img/placeholder_media_graph.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/inte-crea/recherche.html Wed Oct 26 16:51:02 2011 +0200
@@ -0,0 +1,247 @@
+<!doctype html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Plateforme LDT : Résultats de Recherche</title>
+ <link rel="stylesheet" href="css/ldt-commun.css" type="text-css" />
+ <link rel="stylesheet" href="css/ldt-recherche.css" type="text-css" />
+</head>
+<body>
+
+ <div id="general_container">
+
+<!-- BARRE DE TITRE COMMUNE -->
+
+ <ul class="floatlist" id="title_bar">
+ <li id="li_h1">
+ <h1><a href="#"><b>Lignes</b> de temps</a></h1>
+ </li>
+ <li id="li_search">
+ <form id="form_search">
+ <input id="search_text" name="q" value="" />
+ <input id="search_submit" type="submit" value="Rechercher" />
+ </form>
+ <li id="li_annotation">
+ <div class="fl">
+ <a href="#"><img src="img/annot_icon.png" id="annot_icon" /></a>
+ </div>
+ <div class="fl">
+ <a href="#">Annoter</a>
+ </div>
+ </li>
+ <li id="li_connexion">
+ <a href="#">Connexion</a>
+ </li>
+ </ul>
+
+<!-- LISTE DES RÉSULTATS -->
+
+ <ul class="floatlist" id="liste_resultats">
+
+ <!-- titre "Résultats de recherche" et options -->
+
+ <li id="li_haut_resultats">
+ <ul class="floatlist" id="ul_haut_resultats">
+ <li id="title_resultats">
+ <h2>Résultats de la recherche</h2>
+ </li>
+ <li>
+ <p id="p_nb_resultats">250 000 résultats</p>
+ </li>
+ <li id="resultats_options">options</li>
+ </ul>
+ </li>
+
+ <!-- Médias trouvés -->
+
+ <!-- Média -->
+
+ <li class="li_result_media">
+ <div class="titre_result_media">
+ <div class="h3_result_media">
+ <h3>L'Open Data, et moi, et moi</h3>
+ </div>
+ <div class="duree_result_media">
+ <p>03:31:12</p>
+ </div>
+ <div class="graphe_result_media">
+ <img src="img/placeholder_media_graph.png" width="340" height="25" />
+ </div>
+ </div>
+
+ <!-- Segments du média -->
+
+ <ul class="floatlist list_segments">
+
+ <li class="li_segment">
+ <div class="left_segment">
+ <div class="color_zone" style="background: #f49af5;"></div>
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="80" height="45" /></a>
+ <p class="duree_segment">00:15:14</p>
+ </div>
+ <h4 class="title_segment"><a class="blue under" href="#">Lorem Ispum Dolor Sit Amet</a></h4>
+ <p class="text_segment">Nemo enim ipsam voluptatem quia voluptas sit <span class="highlight">mot-clé</span> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</h4>
+ </li>
+
+ <li class="li_segment selected">
+ <div class="left_segment">
+ <div class="color_zone" style="background: #adfba1;"></div>
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="80" height="45" /></a>
+ <p class="duree_segment">00:15:14</p>
+ </div>
+ <h4 class="title_segment"><a class="blue under" href="#">Lorem Ispum Dolor Sit Amet</a></h4>
+ <p class="text_segment">Nemo enim ipsam voluptatem quia voluptas sit <span class="highlight">mot-clé</span> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</h4>
+ </li>
+
+ <li class="plus_result">
+ <p class="blue">+ de résultats dans ce média (16)</p>
+ </li>
+
+ </ul>
+ </li>
+
+ <!-- Fin du média -->
+
+ <!-- Média -->
+
+ <li class="li_result_media">
+ <div class="titre_result_media">
+ <div class="h3_result_media">
+ <h3>L'Open Data, et moi, et moi</h3>
+ </div>
+ <div class="duree_result_media">
+ <p>03:31:12</p>
+ </div>
+ <div class="graphe_result_media">
+ <img src="img/placeholder_media_graph.png" width="340" height="25" />
+ </div>
+ </div>
+
+ <!-- Segments du média -->
+
+ <ul class="floatlist list_segments">
+
+ <li class="li_segment">
+ <div class="left_segment">
+ <div class="color_zone" style="background: #f49af5;"></div>
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="80" height="45" /></a>
+ <p class="duree_segment">00:15:14</p>
+ </div>
+ <h4 class="title_segment"><a class="blue under" href="#">Lorem Ispum Dolor Sit Amet</a></h4>
+ <p class="text_segment">Nemo enim ipsam voluptatem quia voluptas sit <span class="highlight">mot-clé</span> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</h4>
+ </li>
+
+ <li class="li_segment">
+ <div class="left_segment">
+ <div class="color_zone" style="background: #adfba1;"></div>
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="80" height="45" /></a>
+ <p class="duree_segment">00:15:14</p>
+ </div>
+ <h4 class="title_segment"><a class="blue under" href="#">Lorem Ispum Dolor Sit Amet</a></h4>
+ <p class="text_segment">Nemo enim ipsam voluptatem quia voluptas sit <span class="highlight">mot-clé</span> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</h4>
+ </li>
+
+ <li class="plus_result">
+ <p class="blue">+ de résultats dans ce média (16)</p>
+ </li>
+
+ </ul>
+ </li>
+
+ <!-- Fin du média -->
+
+ <!-- Média -->
+
+ <li class="li_result_media">
+ <div class="titre_result_media">
+ <div class="h3_result_media">
+ <h3>L'Open Data, et moi, et moi</h3>
+ </div>
+ <div class="duree_result_media">
+ <p>03:31:12</p>
+ </div>
+ <div class="graphe_result_media">
+ <img src="img/placeholder_media_graph.png" width="340" height="25" />
+ </div>
+ </div>
+
+ <!-- Segments du média -->
+
+ <ul class="floatlist list_segments">
+
+ <li class="li_segment">
+ <div class="left_segment">
+ <div class="color_zone" style="background: #f49af5;"></div>
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="80" height="45" /></a>
+ <p class="duree_segment">00:15:14</p>
+ </div>
+ <h4 class="title_segment"><a class="blue under" href="#">Lorem Ispum Dolor Sit Amet</a></h4>
+ <p class="text_segment">Nemo enim ipsam voluptatem quia voluptas sit <span class="highlight">mot-clé</span> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</h4>
+ </li>
+
+ <li class="li_segment">
+ <div class="left_segment">
+ <div class="color_zone" style="background: #adfba1;"></div>
+ <a href="#"><img src="img/placeholder_16_9.jpg" width="80" height="45" /></a>
+ <p class="duree_segment">00:15:14</p>
+ </div>
+ <h4 class="title_segment"><a class="blue under" href="#">Lorem Ispum Dolor Sit Amet</a></h4>
+ <p class="text_segment">Nemo enim ipsam voluptatem quia voluptas sit <span class="highlight">mot-clé</span> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</h4>
+ </li>
+
+ <li class="plus_result">
+ <p class="blue">+ de résultats dans ce média (16)</p>
+ </li>
+
+ </ul>
+ </li>
+
+ <!-- Fin du média -->
+
+ <!-- Fin des médias -->
+
+ <li id="result_pagination">
+ <p>
+ <a class="pink" href="#">1</a>
+ .
+ <a class="blue under" href="#">2</a>
+ .
+ <a class="blue under" href="#">3</a>
+ .
+ <a class="blue under" href="#">4</a>
+ .
+ <a class="blue under" href="#">5</a>
+ .
+ <a class="blue under" href="#">6</a>
+ .
+ <a class="blue under" href="#">7</a>
+ .
+ <a class="blue under" href="#">Suivant</a>
+ </p>
+ </li>
+
+ </ul>
+
+<!-- APERÇU DU RÉSULTAT -->
+
+<!-- FOOTER COMMUN -->
+
+ <ul id="footer">
+ <li>
+ <a href="#">V.01.15</a>
+ </li>
+ <li>
+ <a href="#"> © 2011 IRI</a>
+ </li>
+ <li>
+ <a href="#">Contact</a>
+ </li>
+ <li>
+ <a href="#">A propos</a>
+ </li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+
+</body>
+</html>
\ No newline at end of file
