From e49e117dacfff5a8e96b0883253e76262ce9f2a7 Mon Sep 17 00:00:00 2001
From: Evarin <champrobin@hotmail.com>
Date: Mon, 19 Mar 2018 21:52:30 +0100
Subject: [PATCH] Render clock partout

---
 avisstage/sass/screen.scss                    |   3 +
 avisstage/static/css/screen.css               | 214 +++++++++---------
 avisstage/static/js/render.js                 | 141 ++++++------
 .../templates/avisstage/detail/profil.html    |   6 +-
 .../avisstage/recherche/resultats.html        |   3 +-
 5 files changed, 182 insertions(+), 185 deletions(-)

diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss
index 0154294..ceee16a 100644
--- a/avisstage/sass/screen.scss
+++ b/avisstage/sass/screen.scss
@@ -251,6 +251,9 @@ header {
                 .year {
                     padding-left: 8px;
                 }
+                svg text {
+                    font-size: 0.8;
+                }
             }
         }
         
diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css
index 4ecdf57..496a799 100644
--- a/avisstage/static/css/screen.css
+++ b/avisstage/static/css/screen.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 @import url("https://fonts.googleapis.com/css?family=Dosis:300,500,700|Alegreya:700|Lato:300,300i,700");
-/* line 5, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -22,45 +22,45 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
-/* line 22, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1;
 }
 
-/* line 24, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none;
 }
 
-/* line 26, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-/* line 28, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
 }
 
-/* line 30, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none;
 }
-/* line 103, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 103, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q:before, q:after, blockquote:before, blockquote:after {
   content: "";
   content: none;
 }
 
-/* line 32, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none;
 }
 
-/* line 116, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block;
 }
@@ -325,7 +325,11 @@ header h1 {
 .stage-liste li .misc-hdr .dates .year {
   padding-left: 8px;
 }
-/* line 257, ../../sass/screen.scss */
+/* line 254, ../../sass/screen.scss */
+.stage-liste li .misc-hdr .dates svg text {
+  font-size: 0.8;
+}
+/* line 260, ../../sass/screen.scss */
 .stage-liste li a.hoverlink {
   position: absolute;
   display: block;
@@ -336,7 +340,7 @@ header h1 {
   z-index: 2;
 }
 
-/* line 269, ../../sass/screen.scss */
+/* line 272, ../../sass/screen.scss */
 ul.infos {
   margin: 0 -3px;
   padding: 0;
@@ -345,7 +349,7 @@ ul.infos {
   justify-content: space-between;
   width: 100;
 }
-/* line 277, ../../sass/screen.scss */
+/* line 280, ../../sass/screen.scss */
 ul.infos li {
   display: inline-block;
   padding: 5px;
@@ -357,28 +361,28 @@ ul.infos li {
   text-align: center;
   background-color: #ddd;
 }
-/* line 288, ../../sass/screen.scss */
+/* line 291, ../../sass/screen.scss */
 ul.infos li.thematique {
   color: #0d3f6b;
   background-color: #86bff1;
 }
-/* line 292, ../../sass/screen.scss */
+/* line 295, ../../sass/screen.scss */
 ul.infos li.matiere {
   color: #395214;
   background-color: #c7e699;
 }
-/* line 296, ../../sass/screen.scss */
+/* line 299, ../../sass/screen.scss */
 ul.infos li.lieu {
   color: #7c043c;
   background-color: #fb84bc;
 }
-/* line 300, ../../sass/screen.scss */
+/* line 303, ../../sass/screen.scss */
 ul.infos li.year {
   background-color: #950548;
   color: #fff;
   display: none;
 }
-/* line 305, ../../sass/screen.scss */
+/* line 308, ../../sass/screen.scss */
 ul.infos li.avis-len {
   background-color: transparent;
   border: 1px solid #eee;
@@ -386,29 +390,29 @@ ul.infos li.avis-len {
   padding: 4px;
   padding-bottom: 2px;
 }
-/* line 312, ../../sass/screen.scss */
+/* line 315, ../../sass/screen.scss */
 ul.infos li.avis-len.avis-vide {
   border-bottom-color: #ddd;
 }
-/* line 315, ../../sass/screen.scss */
+/* line 318, ../../sass/screen.scss */
 ul.infos li.avis-len.avis-court {
   border-bottom-color: #ffff66;
 }
-/* line 318, ../../sass/screen.scss */
+/* line 321, ../../sass/screen.scss */
 ul.infos li.avis-len.avis-moyen {
   border-bottom-color: #86bff1;
 }
-/* line 321, ../../sass/screen.scss */
+/* line 324, ../../sass/screen.scss */
 ul.infos li.avis-len.avis-long {
   border-bottom-color: #a5d65c;
 }
-/* line 327, ../../sass/screen.scss */
+/* line 330, ../../sass/screen.scss */
 ul.infos:after {
   content: "";
   flex: 1000;
 }
 
-/* line 333, ../../sass/screen.scss */
+/* line 336, ../../sass/screen.scss */
 section.profil {
   background: #fff;
   max-width: 600px;
@@ -416,7 +420,7 @@ section.profil {
   margin: 5px auto;
   margin-bottom: 15px;
 }
-/* line 340, ../../sass/screen.scss */
+/* line 343, ../../sass/screen.scss */
 section.profil div.infos {
   border-bottom: 3px solid #1a82dd;
   display: flex;
@@ -708,7 +712,7 @@ article.stage .section-wrapper .toc .toc-active a {
   border: 1px solid #ad0654;
 }
 
-/* line 361, ../../sass/screen.scss */
+/* line 364, ../../sass/screen.scss */
 input, textarea, select, div.tinymce, option, optgroup:before {
   background: #fff;
   font-size: 1em;
@@ -718,13 +722,13 @@ input, textarea, select, div.tinymce, option, optgroup:before {
   padding: 5px;
   text-align: left;
 }
-/* line 370, ../../sass/screen.scss */
+/* line 373, ../../sass/screen.scss */
 input:focus, input.mce-edit-focus, textarea:focus, textarea.mce-edit-focus, select:focus, select.mce-edit-focus, div.tinymce:focus, div.tinymce.mce-edit-focus, option:focus, option.mce-edit-focus, optgroup:before:focus, optgroup:before.mce-edit-focus {
   background-color: #e9f5d6;
   outline: none;
 }
 
-/* line 377, ../../sass/screen.scss */
+/* line 380, ../../sass/screen.scss */
 input[type='text'], input[type='password'],
 input[type='email'], input[type='number'], textarea, select {
   border: none;
@@ -734,7 +738,7 @@ input[type='email'], input[type='number'], textarea, select {
   transition: border 1s ease-out, background 1s ease-out;
 }
 
-/* line 386, ../../sass/screen.scss */
+/* line 389, ../../sass/screen.scss */
 select {
   -moz-appearance: none;
   appearance: none;
@@ -748,21 +752,21 @@ select {
   background-color: #fff;
   background-size: contain;
 }
-/* line 399, ../../sass/screen.scss */
+/* line 402, ../../sass/screen.scss */
 select option {
   padding: 3px;
   white-space: pre-wrap;
 }
-/* line 405, ../../sass/screen.scss */
+/* line 408, ../../sass/screen.scss */
 select optgroup option {
   padding-left: 10px;
 }
-/* line 408, ../../sass/screen.scss */
+/* line 411, ../../sass/screen.scss */
 select optgroup:before {
   font-weight: bold;
 }
 
-/* line 414, ../../sass/screen.scss */
+/* line 417, ../../sass/screen.scss */
 input[type="submit"], .btn {
   font: 19px "Dosis", sans-serif;
   background-color: #8fcc33;
@@ -773,17 +777,17 @@ input[type="submit"], .btn {
   display: inline-block;
 }
 
-/* line 424, ../../sass/screen.scss */
+/* line 427, ../../sass/screen.scss */
 p.submits {
   text-align: right;
 }
 
-/* line 428, ../../sass/screen.scss */
+/* line 431, ../../sass/screen.scss */
 form .commentaire {
   font-style: italic;
 }
 
-/* line 432, ../../sass/screen.scss */
+/* line 435, ../../sass/screen.scss */
 .edit-btn {
   border-color: #706c00;
   color: #000;
@@ -792,14 +796,14 @@ form .commentaire {
   background-origin: content-box;
   background-size: contain;
 }
-/* line 440, ../../sass/screen.scss */
+/* line 443, ../../sass/screen.scss */
 .edit-btn:after {
   content: "";
   width: 30px;
   display: inline-block;
 }
 
-/* line 447, ../../sass/screen.scss */
+/* line 450, ../../sass/screen.scss */
 textarea, div.tinymce {
   font-family: "Lato", sans-serif;
   border: none;
@@ -809,20 +813,20 @@ textarea, div.tinymce {
   transition: border 1s ease-out, background 1s ease-out;
 }
 
-/* line 456, ../../sass/screen.scss */
+/* line 459, ../../sass/screen.scss */
 textarea {
   height: 200px;
   resize: vertical;
 }
 
-/* line 464, ../../sass/screen.scss */
+/* line 467, ../../sass/screen.scss */
 form .field {
   margin: 5px 0;
   display: flex;
   background: #fff;
   padding: 10px;
 }
-/* line 470, ../../sass/screen.scss */
+/* line 473, ../../sass/screen.scss */
 form .field label, form .field .label {
   display: inline-block;
   width: 250px;
@@ -831,39 +835,39 @@ form .field label, form .field .label {
   padding-top: 5px;
   flex-shrink: 0;
 }
-/* line 478, ../../sass/screen.scss */
+/* line 481, ../../sass/screen.scss */
 form .field label.required:before, form .field .label.required:before {
   margin-right: 5px;
   content: "*";
   color: #f70978;
 }
-/* line 484, ../../sass/screen.scss */
+/* line 487, ../../sass/screen.scss */
 form .field label {
   font-family: Alegreya, serif;
   font-weight: bold;
 }
-/* line 488, ../../sass/screen.scss */
+/* line 491, ../../sass/screen.scss */
 form .field .help_text {
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 492, ../../sass/screen.scss */
+/* line 495, ../../sass/screen.scss */
 form .field .input {
   display: inline-block;
   flex-grow: 1;
   margin-right: 10px;
 }
 
-/* line 502, ../../sass/screen.scss */
+/* line 505, ../../sass/screen.scss */
 ul.as-selections {
   display: flex;
   flex-wrap: wrap;
 }
-/* line 506, ../../sass/screen.scss */
+/* line 509, ../../sass/screen.scss */
 ul.as-selections li {
   display: inline-block;
 }
-/* line 510, ../../sass/screen.scss */
+/* line 513, ../../sass/screen.scss */
 ul.as-selections .as-selection-item {
   padding: 0 5px;
   background: #f99b20;
@@ -872,52 +876,52 @@ ul.as-selections .as-selection-item {
   border-radius: 2px;
   font-weight: 500;
 }
-/* line 518, ../../sass/screen.scss */
+/* line 521, ../../sass/screen.scss */
 ul.as-selections .as-selection-item a.as-close {
   color: #fff;
   -webkit-cursor: pointer;
   cursor: pointer;
   margin-right: 5px;
 }
-/* line 525, ../../sass/screen.scss */
+/* line 528, ../../sass/screen.scss */
 ul.as-selections .as-selection-item.selected {
   background: #8fcc33;
 }
-/* line 530, ../../sass/screen.scss */
+/* line 533, ../../sass/screen.scss */
 ul.as-selections .as-original {
   flex-grow: 1;
   min-width: 200px;
 }
-/* line 534, ../../sass/screen.scss */
+/* line 537, ../../sass/screen.scss */
 ul.as-selections .as-original input {
   width: 100%;
 }
 
-/* line 540, ../../sass/screen.scss */
+/* line 543, ../../sass/screen.scss */
 div.as-results {
   position: relative;
 }
-/* line 542, ../../sass/screen.scss */
+/* line 545, ../../sass/screen.scss */
 div.as-results ul {
   position: absolute;
   width: 100%;
   background: #fff;
   border: 1px solid #d2ebad;
 }
-/* line 549, ../../sass/screen.scss */
+/* line 552, ../../sass/screen.scss */
 div.as-results ul li {
   padding: 3px 5px;
 }
-/* line 555, ../../sass/screen.scss */
+/* line 558, ../../sass/screen.scss */
 div.as-results ul li.as-result-item.active {
   background: #fddeb5;
 }
-/* line 560, ../../sass/screen.scss */
+/* line 563, ../../sass/screen.scss */
 div.as-results ul li.as-message {
   font-style: italic;
 }
 
-/* line 570, ../../sass/screen.scss */
+/* line 573, ../../sass/screen.scss */
 .window {
   display: none;
   position: fixed;
@@ -928,11 +932,11 @@ div.as-results ul li.as-message {
   left: 0;
   z-index: 50;
 }
-/* line 580, ../../sass/screen.scss */
+/* line 583, ../../sass/screen.scss */
 .window.visible {
   display: block;
 }
-/* line 584, ../../sass/screen.scss */
+/* line 587, ../../sass/screen.scss */
 .window .window-bg {
   background: #000;
   opacity: 0.7;
@@ -943,7 +947,7 @@ div.as-results ul li.as-message {
   top: 0;
   z-index: -1;
 }
-/* line 595, ../../sass/screen.scss */
+/* line 598, ../../sass/screen.scss */
 .window .window-content {
   position: relative;
   margin: 0 auto;
@@ -957,11 +961,11 @@ div.as-results ul li.as-message {
   max-height: 100%;
   overflow: auto;
 }
-/* line 609, ../../sass/screen.scss */
+/* line 612, ../../sass/screen.scss */
 .window .window-content form label, .window .window-content form .label {
   width: 150px;
 }
-/* line 615, ../../sass/screen.scss */
+/* line 618, ../../sass/screen.scss */
 .window .window-closer {
   position: absolute;
   top: 0;
@@ -969,65 +973,65 @@ div.as-results ul li.as-message {
   padding: 12px;
   z-index: 3;
 }
-/* line 621, ../../sass/screen.scss */
+/* line 624, ../../sass/screen.scss */
 .window .window-closer:after {
   content: "×";
 }
 
-/* line 632, ../../sass/screen.scss */
+/* line 635, ../../sass/screen.scss */
 #lieu_widget .lieu-ui {
   position: relative;
 }
-/* line 634, ../../sass/screen.scss */
+/* line 637, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .map {
   height: 400px;
   width: 100%;
 }
-/* line 638, ../../sass/screen.scss */
+/* line 641, ../../sass/screen.scss */
 #lieu_widget .lieu-ui.hidden {
   display: none;
 }
-/* line 641, ../../sass/screen.scss */
+/* line 644, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .masked {
   visibility: hidden;
 }
-/* line 646, ../../sass/screen.scss */
+/* line 649, ../../sass/screen.scss */
 #lieu_widget .lieu-choixmodif {
   display: none;
 }
-/* line 651, ../../sass/screen.scss */
+/* line 654, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-choixmodif {
   display: unset;
 }
-/* line 656, ../../sass/screen.scss */
+/* line 659, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
   display: none;
 }
-/* line 663, ../../sass/screen.scss */
+/* line 666, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .lieu-acinput {
   display: none;
 }
-/* line 666, ../../sass/screen.scss */
+/* line 669, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .map {
   height: 200px;
 }
-/* line 672, ../../sass/screen.scss */
+/* line 675, ../../sass/screen.scss */
 #lieu_widget #avis_lieu_vide {
   display: none;
 }
-/* line 676, ../../sass/screen.scss */
+/* line 679, ../../sass/screen.scss */
 #lieu_widget .message {
   background: #fddeb5;
   padding: 5px;
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 682, ../../sass/screen.scss */
+/* line 685, ../../sass/screen.scss */
 #lieu_widget .message.hidden {
   display: none;
 }
 
-/* line 688, ../../sass/screen.scss */
+/* line 691, ../../sass/screen.scss */
 a.lieu-change {
   color: #fff;
   background: #f99b20;
@@ -1040,25 +1044,25 @@ a.lieu-change {
   border-radius: 5px;
   margin-right: 7px;
 }
-/* line 700, ../../sass/screen.scss */
+/* line 703, ../../sass/screen.scss */
 a.lieu-change.ajout:before {
   content: "+";
   margin-right: 5px;
 }
 
-/* line 706, ../../sass/screen.scss */
+/* line 709, ../../sass/screen.scss */
 #stages-map {
   width: 100%;
   height: 600px;
   max-height: 90vh;
 }
 
-/* line 713, ../../sass/screen.scss */
+/* line 716, ../../sass/screen.scss */
 #id_stage-thematiques {
   display: none;
 }
 
-/* line 719, ../../sass/screen.scss */
+/* line 722, ../../sass/screen.scss */
 .homeh1 {
   display: flex;
   justify-content: space-between;
@@ -1068,26 +1072,26 @@ a.lieu-change.ajout:before {
   border-bottom: 3px solid #000;
   margin-bottom: 15px;
 }
-/* line 728, ../../sass/screen.scss */
+/* line 731, ../../sass/screen.scss */
 .homeh1 h1 {
   margin-bottom: 3px;
 }
-/* line 732, ../../sass/screen.scss */
+/* line 735, ../../sass/screen.scss */
 .homeh1 > * {
   display: inline-block;
 }
-/* line 735, ../../sass/screen.scss */
+/* line 738, ../../sass/screen.scss */
 .homeh1 p {
   text-align: right;
 }
 
-/* line 740, ../../sass/screen.scss */
+/* line 743, ../../sass/screen.scss */
 .betacadre {
   background: #fa6cae;
   padding: 10px;
 }
 
-/* line 745, ../../sass/screen.scss */
+/* line 748, ../../sass/screen.scss */
 .entrer {
   background: #fff;
   max-width: 500px;
@@ -1096,84 +1100,84 @@ a.lieu-change.ajout:before {
   margin: 15px auto;
 }
 
-/* line 753, ../../sass/screen.scss */
+/* line 756, ../../sass/screen.scss */
 article.promo {
   display: block;
   font-size: 1.1em;
 }
-/* line 757, ../../sass/screen.scss */
+/* line 760, ../../sass/screen.scss */
 article.promo .explications {
   display: table;
 }
-/* line 760, ../../sass/screen.scss */
+/* line 763, ../../sass/screen.scss */
 article.promo .explications:first-child {
   direction: rtl;
 }
-/* line 762, ../../sass/screen.scss */
+/* line 765, ../../sass/screen.scss */
 article.promo .explications:first-child > * {
   direction: ltr;
 }
-/* line 767, ../../sass/screen.scss */
+/* line 770, ../../sass/screen.scss */
 article.promo .explications > div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }
-/* line 772, ../../sass/screen.scss */
+/* line 775, ../../sass/screen.scss */
 article.promo .explications > div p {
   margin: 15px 15px;
 }
 
-/* line 780, ../../sass/screen.scss */
+/* line 783, ../../sass/screen.scss */
 .faq-toc {
   font-family: "Lato", sans-serif;
   display: block;
   max-width: 700px;
   margin: 0 auto;
 }
-/* line 785, ../../sass/screen.scss */
+/* line 788, ../../sass/screen.scss */
 .faq-toc ul {
   margin: 20px;
 }
-/* line 789, ../../sass/screen.scss */
+/* line 792, ../../sass/screen.scss */
 .faq-toc ul li a {
   color: #000;
   display: block;
   padding: 5px;
 }
-/* line 795, ../../sass/screen.scss */
+/* line 798, ../../sass/screen.scss */
 .faq-toc ul li.toc-h1 {
   display: none;
 }
-/* line 799, ../../sass/screen.scss */
+/* line 802, ../../sass/screen.scss */
 .faq-toc ul li.toc-h2 a {
   background: #fcc883;
 }
-/* line 803, ../../sass/screen.scss */
+/* line 806, ../../sass/screen.scss */
 .faq-toc ul li.toc-h3 a {
   padding-left: 10px;
   background: #fff;
   font-weight: normal;
 }
-/* line 809, ../../sass/screen.scss */
+/* line 812, ../../sass/screen.scss */
 .faq-toc ul li a:hover {
   color: #395214;
   background: #bce085 !important;
 }
 
-/* line 818, ../../sass/screen.scss */
+/* line 821, ../../sass/screen.scss */
 .faq article {
   background: #fff;
   padding: 15px;
 }
-/* line 821, ../../sass/screen.scss */
+/* line 824, ../../sass/screen.scss */
 .faq article h2 {
   background-color: #fcc883;
   color: #ae6505;
   margin: -15px;
   padding: 15px;
 }
-/* line 828, ../../sass/screen.scss */
+/* line 831, ../../sass/screen.scss */
 .faq article h3 {
   color: #0f4c82;
   background-color: #9dcbf3;
@@ -1181,19 +1185,19 @@ article.promo .explications > div p {
   margin-top: 30px;
   padding: 10px 15px;
 }
-/* line 835, ../../sass/screen.scss */
+/* line 838, ../../sass/screen.scss */
 .faq article h3:nth-child(2) {
   margin-top: 0;
 }
-/* line 840, ../../sass/screen.scss */
+/* line 843, ../../sass/screen.scss */
 .faq article ul {
   padding-left: 20px;
 }
-/* line 842, ../../sass/screen.scss */
+/* line 845, ../../sass/screen.scss */
 .faq article ul li {
   list-style: initial;
 }
-/* line 847, ../../sass/screen.scss */
+/* line 850, ../../sass/screen.scss */
 .faq article p, .faq article ul {
   font-family: "Lato", sans-serif;
   font-size: 18px;
diff --git a/avisstage/static/js/render.js b/avisstage/static/js/render.js
index 4599cc4..88e5c3e 100644
--- a/avisstage/static/js/render.js
+++ b/avisstage/static/js/render.js
@@ -1,69 +1,38 @@
 $(function() {
-    var RADIUS = 40;
-    var SVG_NS = "http://www.w3.org/2000/svg";
+    var RADIUS = 37;
 
+    // $("<...>", {}) pour des éléments SVG (i.e. namespacés)
     function cElSVG(name, props) {
-        var el = document.createElementNS(SVG_NS, name);
+        var el = document.createElementNS("http://www.w3.org/2000/svg", name);
         for (var n in props)
             el.setAttribute(n, props[n]);
-        
+
         return el;
     }
-    
-    $.each($(".dates"), function(i, item) {
+
+    // Rendu des dates de stage
+    function renderDateClock(item) {
         var $el = $(item);
+
+        // Parsing dates
         var debut = $el.find(".debut").text().split("/");
         var fin = $el.find(".fin").text().split("/");
         var an = $el.find(".year").text();
+        var scale = 1;
+        if($el.attr("c-radius"))
+            scale = Number($el.attr("c-radius")) / RADIUS;
+
+        // Conteneurs
         var svg = cElSVG("svg");
-        
-        svg.setAttribute('x', -RADIUS);
-        svg.setAttribute('y', -RADIUS);
-        svg.setAttribute("width", 2*RADIUS+10);
-        svg.setAttribute("height", 2*RADIUS+10);
-        var g = cElSVG("g", {"transform":"translate("+(5+RADIUS)
-                                        +", "+(5+RADIUS)+")"});
+        svg.setAttribute('x', -(RADIUS+3)*scale);
+        svg.setAttribute('y', -(RADIUS+3)*scale);
+        svg.setAttribute("width", 2*(RADIUS+3)*scale);
+        svg.setAttribute("height", 2*(RADIUS+3)*scale);
+        var g = cElSVG("g", {"transform":"scale("+scale+")"+
+                                         "translate("+(3+RADIUS)+", "+(3+RADIUS)+")"});
 
-        /* Dodécagone
-        var fnd = [];
-        for (var a=0; a<=12; a++) {
-            var ang = (a+3)*Math.PI/6;
-            fnd.push("L",
-                     RADIUS*Math.cos(ang),
-                     RADIUS*Math.sin(ang));
-        }
-        fnd[0] = "M";
-        var svg_fnd = cElSVG("path",
-                             {"d": fnd.join(" "), "stroke":"#ffffff77",
-                              "stroke-width": 2, "fill": "none"});
-        $(g).append(svg_fnd);
-
-        console.log(debut, fin);
-        var peri = [];
-        for (var b=Number(debut[1])-1; b!=Number(fin[1]); b=(b+1)%12) {
-            var ang = (b+3)*Math.PI/6;
-            peri.push("L",
-                      RADIUS*Math.cos(ang),
-                      RADIUS*Math.sin(ang));
-        }
-        var dcoef = (Number(debut[0])-1)/30;
-        peri[1] = peri[1] + dcoef*(peri[4]-peri[1]);
-        peri[2] = peri[2] + dcoef*(peri[5]-peri[2]);
-        peri[0] = "M";
-        var fcoef = (Number(fin[0])-1)/30;
-        var fi = peri.length-2;
-        peri[fi] = peri[fi-3] + fcoef*(peri[fi]-peri[fi-3]);
-        peri[fi+1] = peri[fi-2] + fcoef*(peri[fi+1]-peri[fi-2]);
-
-        var svg_peri = cElSVG("path",
-                             {"d": peri.join(" "), "stroke":"#ffffff",
-                              "stroke-width": 4, "fill": "none"});
-        $(g).append(svg_peri);
-
-        */
-
-
-        
+        // FOND
+        // Mois
         var ticks = [];
         for (var a=0; a<12; a++) {
             var ang = (a/6+0.5)*Math.PI;
@@ -78,37 +47,35 @@ $(function() {
                              {"d": ticks.join(" "), "stroke":"#ffffff99",
                               "stroke-width": 1, "fill": "none"});
         $(g).append(svg_tks);
-        
-        var fnd = [];
-        for (var a=0; a<=60; a++) {
-            var ang = (a/30+0.5)*Math.PI;
-            fnd.push("L",
-                     RADIUS*Math.cos(ang),
-                     RADIUS*Math.sin(ang));
-        }
-        fnd[0] = "M";
-        var svg_fnd = cElSVG("path",
-                             {"d": fnd.join(" "), "stroke":"#ffffff99",
+
+        // Cercle
+        var svg_fnd = cElSVG("circle",
+                             {"cx": 0, "cy":0, "r":RADIUS, "stroke":"#ffffff99",
                               "stroke-width": 1, "fill": "none"});
         $(g).append(svg_fnd);
 
+        // Période du stage
         console.log(debut, fin);
         var peri = [];
-        var bo = Math.round((Number(debut[1])-1+(Number(debut[0])-1)/30)*5);
-        var bf = Math.round((Number(fin[1])-1+(Number(fin[0])-1)/30)*5);
+        var bo = Number(debut[1])-1+(Number(debut[0])-1)/30;
+        bo = bo/6+0.5;
+        var bf = Number(fin[1])-1+(Number(fin[0])-1)/30;
+        bf = bf/6+0.5;
         console.log(bo, bf);
-        for(var b=bo; b!=bf; b=(b+1)%60) {
-            var ang = (b/30+0.5)*Math.PI;
-            peri.push("L",
-                      RADIUS*Math.cos(ang),
-                      RADIUS*Math.sin(ang));
-        }
-        peri[0] = "M";
+        peri = ["M",
+                RADIUS*Math.cos(bo*Math.PI),
+                RADIUS*Math.sin(bo*Math.PI),
+                "A",
+                RADIUS, RADIUS, 0, (bf-bo>1) ? 1:0, 1,
+                RADIUS*Math.cos(bf*Math.PI),
+                RADIUS*Math.sin(bf*Math.PI)]
         var svg_peri = cElSVG("path",
                               {"d": peri.join(" "), "stroke":"#ffffff",
                                "stroke-width": 4, "fill": "none"});
         $(g).append(svg_peri);
-        
+
+        // TEXTES
+        // Début
         var dtext = cElSVG("text",
                            {"transform":"translate(0, "+(-RADIUS*0.27)+")",
                             "text-anchor":"middle", "class":"debut",
@@ -116,7 +83,8 @@ $(function() {
                             "dominant-baseline":"text-after-edge"});
         dtext.innerHTML = debut.join("/");
         $(g).append(dtext);
-        
+
+        // Fin
         var ftext = cElSVG("text",
                            {"transform":"translate(0, "+(RADIUS*0.27)+")",
                             "text-anchor":"middle", "class":"fin",
@@ -125,7 +93,7 @@ $(function() {
         ftext.innerHTML = fin.join("/");
         $(g).append(ftext);
 
-        
+        // Année
         var atext = cElSVG("text",
                            {"transform":"translate(0, 3)",
                             "text-anchor":"middle", "class":"year",
@@ -133,9 +101,26 @@ $(function() {
                             "dominant-baseline":"middle"});
         atext.innerHTML = an;
         $(g).append(atext);
-        
+
+        // Affichage
         $(svg).append(g);
         $el.html("");
         $el.append(svg);
-    });
+    }
+
+    function progressiveForEach(array, fun, step, timeout) {
+        array = array.slice(); // copie
+        var i = 0;
+        
+        function doLoop(){
+            for(var d=0; d<step; i++, d++) {
+                if(i>=array.length) return;
+                fun(array[i]);
+            }
+            setTimeout(doLoop, step);
+        }
+        doLoop();
+    }
+    progressiveForEach($(".dates"), renderDateClock, 10, 100);
+
 });
diff --git a/avisstage/templates/avisstage/detail/profil.html b/avisstage/templates/avisstage/detail/profil.html
index e7db112..01c959e 100644
--- a/avisstage/templates/avisstage/detail/profil.html
+++ b/avisstage/templates/avisstage/detail/profil.html
@@ -1,6 +1,10 @@
 {% extends "avisstage/base.html" %}
 {% load staticfiles %}
 
+{% block extra_head %}
+    <script type="text/javascript" src="{% static "js/render.js" %}"></script>
+{% endblock %}
+
 {% block title %}Profil de {{ object.nom }} - ExperiENS{% endblock %}
 
 {% block content %}
@@ -34,7 +38,7 @@
                     <li class="stage">
                         <div class="misc-hdr">
                             <h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a><span class="auteur"></a></span></h3>
-                            <p class="dates"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
+                            <p class="dates" c-radius="30"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
                         </div>
                         <div>
                             <ul class="infos">
diff --git a/avisstage/templates/avisstage/recherche/resultats.html b/avisstage/templates/avisstage/recherche/resultats.html
index 5b0ff8c..3021f8f 100644
--- a/avisstage/templates/avisstage/recherche/resultats.html
+++ b/avisstage/templates/avisstage/recherche/resultats.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" type="text/css" href="{% static 'css/leaflet.css' %}" />
     <link rel="stylesheet" type="text/css" href="{% static 'css/MarkerCluster.css' %}" />
     <link rel="stylesheet" type="text/css" href="{% static 'css/MarkerCluster.Default.css' %}" />
+    <script type="text/javascript" src="{% static "js/render.js" %}"></script>
 {% endblock %}
 
 {% block extra_content_class %}recherche {{ vue }}{% endblock %}
@@ -40,7 +41,7 @@
                     <li class="stage" id="resultat-stage-{{ stage.id }}">
                         <div class="misc-hdr">
                             <h3><a href="{% url "avisstage:stage" stage.id %}" class="stage-sujet">{{ stage.sujet }}</a><span class="auteur"> par <span class="stage-auteur">{{ stage.auteur.nom }}</span></span></h3>
-                            <p class="dates"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
+                            <p class="dates" c-radius="30"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
                         </div>
                         <div>
                             <ul class="infos">