From 8690efb8c01d6a6feeb09380bcbddfa42cd9d320 Mon Sep 17 00:00:00 2001
From: hugo LAMY <hugo.lamy@oskey.io>
Date: Sun, 15 Feb 2026 20:40:31 +0100
Subject: [PATCH] top names v1

---
 www/css/page_manifestations.css |  29 +++--
 www/manifestations.html         | 206 +++-----------------------------
 2 files changed, 36 insertions(+), 199 deletions(-)

diff --git a/www/css/page_manifestations.css b/www/css/page_manifestations.css
index 7f4fc17..5394587 100644
--- a/www/css/page_manifestations.css
+++ b/www/css/page_manifestations.css
@@ -5,7 +5,7 @@
   width: 600px;
   height: auto;
 
-  #top {
+  #top.name_list {
     float: left;
     height: 25px;
     width: 480px;
@@ -16,17 +16,24 @@
     margin-top: 50px;
     margin-bottom: 25px;
 
-    .nom {
-      float: left;
-      height: 12px;
-      width: auto;
-      margin-right: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    column-gap: 30px;
 
-      .carre {
-        float: left;
-        width: 10px;
-        height: 12px;
-        margin-right: 3px;
+    p {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: -13px;
+        top: 50%;
+        translate: 0% -50%;
+        width: 7px;
+        height: 7px;
+        border-radius: 10%;
+        border: 1px solid #cc3300;
       }
     }
   }
diff --git a/www/manifestations.html b/www/manifestations.html
index 9da5c74..6b994fb 100644
--- a/www/manifestations.html
+++ b/www/manifestations.html
@@ -171,194 +171,24 @@
       <div id="right">
         <div id="middle">
 
-          <div id="top">
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Visible / Invisible 3
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Nature Borders
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              L’art mène le monde
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Surface Sensible
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Visible / Invisible 2
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Visible / Invisible
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Amuse-gueule
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Archipel
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Open54 Performances
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              L'&eacute;lection
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Trac&eacute;s
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Heureux Des-Astres
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Co-Incidences
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Noir
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              To be a stickler
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              Ceci n'est pas un kak&eacute;mono
-            </div>
-            <div class="nom">
-              <div class="carre">
-                <img
-                  src="images/carre_noir.png"
-                  width="10"
-                  height="12"
-                  alt="carr&eacute; Bloc-House"
-                />
-              </div>
-              C1.1
-            </div>
+          <div id="top" class="name_list">
+            <p>Visible / Invisible 3</p>
+            <p>Nature Borders</p>
+            <p>L’art mène le monde</p>
+            <p>Surface Sensible</p>
+            <p>Visible / Invisible 2</p>
+            <p>Visible / Invisible</p>
+            <p>Amuse-gueule</p>
+            <p>Archipel</p>
+            <p>Open54 Performances</p>
+            <p>L'&eacute;lection</p>
+            <p>Trac&eacute;s</p>
+            <p>Heureux Des-Astres</p>
+            <p>Co-Incidences</p>
+            <p>Noir</p>
+            <p>To be a stickler</p>
+            <p>Ceci n'est pas un kak&eacute;mono</p>
+            <p>C1.1</p>
           </div>
 
           <div id="manifestations">