From 546001e635ea20a4c3b1fad977fe6f8058b979ba Mon Sep 17 00:00:00 2001
From: hugo LAMY <hugo.lamy@oskey.io>
Date: Thu, 12 Mar 2026 12:34:34 +0100
Subject: [PATCH] adding anchors in manifestation

---
 www/css/page_manifestations.css |  10 ++-
 www/manifestations.html         | 121 ++++++++++++++++++++++++--------
 2 files changed, 99 insertions(+), 32 deletions(-)

diff --git a/www/css/page_manifestations.css b/www/css/page_manifestations.css
index 7422068..bf61d0c 100644
--- a/www/css/page_manifestations.css
+++ b/www/css/page_manifestations.css
@@ -22,12 +22,18 @@
   column-gap: 30px;
 }
 
-#middle #top.name_list p {
+#middle #top.name_list .name_item {
+  text-decoration: none;
+  color: inherit;
   position: relative;
   padding-left: 13px;
 }
 
-#middle #top.name_list p::before {
+#middle #top.name_list .name_item:hover {
+  text-decoration-line: underline;
+}
+
+#middle #top.name_list .name_item::before {
   content: "";
   position: absolute;
   left: 0;
diff --git a/www/manifestations.html b/www/manifestations.html
index 1f36cc9..c27a78c 100644
--- a/www/manifestations.html
+++ b/www/manifestations.html
@@ -170,26 +170,55 @@
 
       <div id="right">
         <div id="middle">
-
           <div id="top" class="name_list">
-            <p>Le Livre d'artiste Un monde en Soi</p>
-            <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>
+            <a class="name_item" href="#manifestation_un_monde_en_soi"
+              >Le Livre d'artiste Un monde en Soi</a
+            >
+            <a class="name_item" href="#manifestation_visible_invisible_3"
+              >Visible / Invisible 3</a
+            >
+            <a class="name_item" href="#manifestation_nature_borders"
+              >Nature Borders</a
+            >
+            <a class="name_item" href="#manifestation_lart_mene_le_monde"
+              >L’art mène le monde</a
+            >
+            <a class="name_item" href="#manifestation_surface_sensible"
+              >Surface Sensible</a
+            >
+            <a class="name_item" href="#manifestation_visible_invisible_2"
+              >Visible / Invisible 2</a
+            >
+            <a class="name_item" href="#manifestation_visible_invisible_1"
+              >Visible / Invisible</a
+            >
+            <a class="name_item" href="#manifestation_amuse_gueule"
+              >Amuse-gueule</a
+            >
+            <a class="name_item" href="#manifestation_archipel">Archipel</a>
+            <a class="name_item" href="#manifestation_open54_performances"
+              >Open54 Performances</a
+            >
+            <a class="name_item" href="#manifestation_lelection"
+              >L'&eacute;lection</a
+            >
+            <a class="name_item" href="#manifestation_traces">Trac&eacute;s</a>
+            <a class="name_item" href="#manifestation_heureux_des_astres"
+              >Heureux Des-Astres</a
+            >
+            <a class="name_item" href="#manifestation_coincidences"
+              >Co-Incidences</a
+            >
+            <a class="name_item" href="#manifestation_noire">Noir</a>
+            <a class="name_item" href="#manifestation_to_be_a_stickler"
+              >To be a stickler</a
+            >
+            <a
+              class="name_item"
+              href="#manifestation_ceci_n_est_pas_un_kakemono"
+              >Ceci n'est pas un kak&eacute;mono</a
+            >
+            <a class="name_item" href="#manifestation_c1_1">C1.1</a>
           </div>
 
           <div id="manifestations">
@@ -199,7 +228,10 @@
                   <!-- Start nouveau-->
 
                   <!-- debut un-monde-en-soi -->
-                  <div class="video manifestation_poster">
+                  <div
+                    class="video manifestation_poster"
+                    id="manifestation_un_monde_en_soi"
+                  >
                     <video
                       width="480"
                       height="485"
@@ -315,7 +347,10 @@
                   <!-- fin un-monde-en-soi -->
 
                   <!-- debut visible-invisible 3 -->
-                  <div class="video manifestation_poster">
+                  <div
+                    class="video manifestation_poster"
+                    id="manifestation_visible_invisible_3"
+                  >
                     <video
                       width="480"
                       height="385"
@@ -424,6 +459,7 @@
                   <div
                     class="images_grand7"
                     style="width: 480px; height: 290px; margin-top: 3px"
+                    id="manifestation_nature_borders"
                   >
                     <div class="img_grand">
                       <a
@@ -551,6 +587,7 @@
                   <div
                     class="images_grand7"
                     style="width: 480px; height: 370px; margin-top: 3px"
+                    id="manifestation_lart_mene_le_monde"
                   >
                     <div class="img_grand">
                       <a
@@ -652,6 +689,7 @@
                   <div
                     class="images_grand7"
                     style="width: 480px; height: 276px; margin-top: 3px"
+                    id="manifestation_surface_sensible"
                   >
                     <div class="img_grand">
                       <a
@@ -778,7 +816,10 @@
                   <!-- fin Surface Sensible -->
 
                   <!-- debut Visible-invisible 2 -->
-                  <div class="video manifestation_poster">
+                  <div
+                    class="video manifestation_poster"
+                    id="manifestation_visible_invisible_2"
+                  >
                     <video
                       width="480"
                       height="310"
@@ -902,6 +943,7 @@
                   <div
                     class="images_grand7"
                     style="width: 480px; height: 322px; margin-top: 3px"
+                    id="manifestation_visible_invisible_1"
                   >
                     <div class="img_grand">
                       <a
@@ -1032,6 +1074,7 @@
                   <div
                     class="images_grand7"
                     style="width: 480px; height: 360px; margin-top: 3px"
+                    id="manifestation_amuse_gueule"
                   >
                     <div class="img_grand">
                       <a
@@ -1084,6 +1127,7 @@
                   <div
                     class="images_grand7"
                     style="width: 480px; height: 360px; margin-top: 3px"
+                    id="manifestation_archipel"
                   >
                     <div class="img_grand">
                       <a
@@ -1228,6 +1272,7 @@
                   <div
                     class="images_grand8"
                     style="width: 480px; height: 360px; margin-top: 3px"
+                    id="manifestation_open54_performances"
                   >
                     <div class="img_grand">
                       <a
@@ -1273,7 +1318,7 @@
                   <!-- fin Open54 -->
 
                   <!-- debut Election -->
-                  <div class="images_grand3">
+                  <div class="images_grand3" id="manifestation_lelection">
                     <div class="img_grand">
                       <a
                         href="images/manifestations/08_l_election/l_election.jpg"
@@ -1470,7 +1515,7 @@
                   <!-- fin Election -->
 
                   <!-- debut Tracés -->
-                  <div class="images_grand4">
+                  <div class="images_grand4" id="manifestation_traces">
                     <div class="img_grand">
                       <a
                         href="images/manifestations/07_traces/traces.jpg"
@@ -1585,7 +1630,10 @@
                   <!-- fin Tracés -->
 
                   <!-- debut Heureux Des-Astres -->
-                  <div class="images_grand5">
+                  <div
+                    class="images_grand5"
+                    id="manifestation_heureux_des_astres"
+                  >
                     <div class="img_grand">
                       <a
                         href="images/manifestations/06_heureuxDesAstres/heureuxDesAstres.jpg"
@@ -1636,7 +1684,10 @@
                   <!-- fin Heureux Des-Astres -->
 
                   <!-- debut Co-Incidences -->
-                  <div class="video manifestation_poster">
+                  <div
+                    class="video manifestation_poster"
+                    id="manifestation_coincidences"
+                  >
                     <video
                       width="480"
                       poster="images/manifestations/05_coIncidences/coIncidences-poster.jpg"
@@ -1766,7 +1817,10 @@
                   <!-- fin Co-Incidences -->
 
                   <!-- debut Noir -->
-                  <div class="video manifestation_poster">
+                  <div
+                    class="video manifestation_poster"
+                    id="manifestation_noire"
+                  >
                     <video
                       width="480"
                       height="390"
@@ -1894,7 +1948,9 @@
                   <!-- fin Noir -->
 
                   <!-- debut To be a stickler -->
-                  <div class="title">TO BE A STICKLER</div>
+                  <div class="title" id="manifestation_to_be_a_stickler">
+                    TO BE A STICKLER
+                  </div>
 
                   <div class="texte_manif">
                     <p style="font-size: 14px">
@@ -1929,7 +1985,12 @@
                   <!-- fin To be a stickler -->
 
                   <!-- debut Ceci n'est pas un kakémono -->
-                  <div class="title">CECI N'EST PAS UN KAK&Eacute;MONO</div>
+                  <div
+                    class="title"
+                    id="manifestation_ceci_n_est_pas_un_kakemono"
+                  >
+                    CECI N'EST PAS UN KAK&Eacute;MONO
+                  </div>
 
                   <div class="texte_manif">
                     <p style="font-size: 14px">
@@ -1947,7 +2008,7 @@
                   <!-- fin Ceci n'est pas un kakémono -->
 
                   <!-- debut C1.1 -->
-                  <div class="images_grand2">
+                  <div class="images_grand2" id="manifestation_c1_1">
                     <div class="img_grand">
                       <a
                         href="images/manifestations/01_c11/c11g.jpg"