From 32007e7ada79be0f3fcadd013e27bba77d7b2971 Mon Sep 17 00:00:00 2001
From: hugo LAMY <hugo.lamy@oskey.io>
Date: Sun, 15 Feb 2026 18:57:09 +0100
Subject: [PATCH] reorganized manifestation css

---
 www/css/page_manifestations.css | 193 +++++++++++++++++++++++++++++
 www/css/styles.css              | 207 --------------------------------
 www/manifestations.html         |  59 ++-------
 3 files changed, 202 insertions(+), 257 deletions(-)
 create mode 100644 www/css/page_manifestations.css

diff --git a/www/css/page_manifestations.css b/www/css/page_manifestations.css
new file mode 100644
index 0000000..7f4fc17
--- /dev/null
+++ b/www/css/page_manifestations.css
@@ -0,0 +1,193 @@
+/* page manifestations */
+
+#middle {
+  float: left;
+  width: 600px;
+  height: auto;
+
+  #top {
+    float: left;
+    height: 25px;
+    width: 480px;
+    margin-left: 98px;
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+    margin-top: 50px;
+    margin-bottom: 25px;
+
+    .nom {
+      float: left;
+      height: 12px;
+      width: auto;
+      margin-right: 10px;
+
+      .carre {
+        float: left;
+        width: 10px;
+        height: 12px;
+        margin-right: 3px;
+      }
+    }
+  }
+
+  #manifestations {
+    position: relative;
+    left: 100px;
+    top: 0px;
+    float: left;
+    width: 580px;
+    height: 600px;
+
+    #Container {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 510px;
+      height: 530px;
+      background-color: #ffffff;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      padding-right: 20px;
+
+      #News {
+        position: absolute;
+        top: 0px;
+        /* overflow: hidden; */
+        width: 480px;
+        height: 530px;
+        display: block;
+
+        .Scroller-Container {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+
+          .video {
+            width: 480px;
+            height: 400px;
+            margin-top: 3px;
+
+            &.manifestation_poster {
+              position: relative;
+              background: black;
+              height: auto;
+
+              video {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: contain;
+                object-position: top;
+              }
+            }
+          }
+
+          .images {
+            width: 480px;
+            height: 80px;
+            margin-top: 10px;
+
+            &.manifestation_flex {
+              display: flex;
+              justify-content: space-between;
+            }
+          }
+
+          .title {
+            width: 480px;
+            height: 20px;
+            font-family: Arial, sans-serif;
+            font-size: 19px;
+            color: #cc3300;
+            font-weight: bold;
+          }
+
+          .texte_manif {
+            width: 480px;
+            height: auto;
+            margin-bottom: 35px;
+
+            p {
+              text-align: justify;
+              font-size: 11px;
+              font-weight: normal;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.images_grand {
+  width: 480px;
+  height: 380px;
+}
+
+.images_grand1 {
+  width: 480px;
+  height: 357px;
+}
+
+.images_grand2 {
+  width: 480px;
+  height: 384px;
+}
+
+.images_grand3 {
+  width: 480px;
+  height: 351px;
+  margin-top: 3px;
+}
+
+.images_grand4 {
+  width: 480px;
+  height: 402px;
+}
+
+.images_grand5 {
+  width: 480px;
+  height: 372px;
+}
+
+.images1 {
+  width: 480px;
+  height: 80px;
+  margin-top: 0px;
+}
+
+.vignette a {
+  float: left;
+  width: 70px;
+  height: 70px;
+  border: 1px solid #ffffff;
+}
+
+.vignette a:hover {
+  float: left;
+  width: 70px;
+  height: 70px;
+  border: 1px solid #cc3300;
+}
+
+.img_grand a {
+  float: left;
+  width: 478px;
+  height: auto;
+  border: 1px solid #ffffff;
+}
+.img_grand a:hover {
+  float: left;
+  width: 478px;
+  height: auto;
+  border: 1px solid #cc3300;
+}
+
+#trait_vertical1 {
+  float: left;
+  height: 610px;
+  width: 1px;
+  margin-top: 48px;
+  margin-left: 90px;
+  border-left: 1px solid #000000;
+}
diff --git a/www/css/styles.css b/www/css/styles.css
index 1ad1368..3b63083 100644
--- a/www/css/styles.css
+++ b/www/css/styles.css
@@ -301,190 +301,6 @@ margin-left:262px;*/
   padding-top: 62px;
 }
 
-/* page manifestations */
-
-#middle {
-  float: left;
-  width: 600px;
-  height: auto;
-}
-
-#top {
-  float: left;
-  height: 15px;
-  width: 480px;
-  margin-left: 98px;
-  font-family: Arial, sans-serif;
-  font-size: 11px;
-  font-weight: normal;
-  margin-top: 50px;
-  margin-bottom: 25px;
-}
-
-.center {
-  display: table;
-}
-
-.carre {
-  float: left;
-  width: 10px;
-  height: 12px;
-  margin-right: 3px;
-}
-
-.nom {
-  float: left;
-  height: 12px;
-  width: auto;
-  margin-right: 10px;
-}
-
-#manifestations {
-  position: relative;
-  left: 100px;
-  top: 0px;
-  float: left;
-  width: 580px;
-  height: 600px;
-}
-
-#Container {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 510px;
-  height: 530px;
-  background-color: #ffffff;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding-right: 20px;
-}
-
-#News {
-  position: absolute;
-  top: 0px;
-  /* overflow: hidden; */
-  width: 480px;
-  height: 530px;
-  display: none;
-}
-
-#News {
-  display: block;
-}
-
-.Scroller-Container {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-}
-
-.title {
-  width: 480px;
-  height: 20px;
-  font-family: Arial, sans-serif;
-  font-size: 19px;
-  color: #cc3300;
-  font-weight: bold;
-}
-
-.video {
-  width: 480px;
-  height: 400px;
-  margin-top: 3px;
-}
-
-.images_grand {
-  width: 480px;
-  height: 380px;
-}
-
-.images_grand1 {
-  width: 480px;
-  height: 357px;
-}
-
-.images_grand2 {
-  width: 480px;
-  height: 384px;
-}
-
-.images_grand3 {
-  width: 480px;
-  height: 351px;
-  margin-top: 3px;
-}
-
-.images_grand4 {
-  width: 480px;
-  height: 402px;
-}
-
-.images_grand5 {
-  width: 480px;
-  height: 372px;
-}
-
-.images {
-  width: 480px;
-  height: 80px;
-  margin-top: 10px;
-}
-
-.images1 {
-  width: 480px;
-  height: 80px;
-  margin-top: 0px;
-}
-
-.vignette a {
-  float: left;
-  width: 70px;
-  height: 70px;
-  border: 1px solid #ffffff;
-}
-
-.vignette a:hover {
-  float: left;
-  width: 70px;
-  height: 70px;
-  border: 1px solid #cc3300;
-}
-
-.texte_manif {
-  width: 480px;
-  height: auto;
-  margin-bottom: 35px;
-}
-
-.texte_manif p {
-  text-align: justify;
-  font-size: 11px;
-  font-weight: normal;
-}
-
-.img_grand a {
-  float: left;
-  width: 478px;
-  height: auto;
-  border: 1px solid #ffffff;
-}
-.img_grand a:hover {
-  float: left;
-  width: 478px;
-  height: auto;
-  border: 1px solid #cc3300;
-}
-
-#trait_vertical1 {
-  float: left;
-  height: 610px;
-  width: 1px;
-  margin-top: 48px;
-  margin-left: 90px;
-  border-left: 1px solid #000000;
-}
-
 /* page interstices */
 
 #content_inter {
@@ -754,29 +570,6 @@ adresse1 td {
   visibility: hidden;
 }
 
-/**
- * manifestation video poster
- */
-.video.manifestation_poster {
-  position: relative;
-  background: black;
-  height: auto;
-}
-.video.manifestation_poster video {
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-  object-position: top;
-}
-
-/**
- * manifestations images flex
- */
-.images.manifestation_flex {
-  display: flex;
-  justify-content: space-between;
-}
-
 /**
  * SCROLL BAR
  */
diff --git a/www/manifestations.html b/www/manifestations.html
index ee154d3..9da5c74 100644
--- a/www/manifestations.html
+++ b/www/manifestations.html
@@ -34,6 +34,13 @@
       href="css/lightbox.css"
       title="Design"
     />
+    <link
+      rel="stylesheet"
+      media="screen"
+      type="text/css"
+      href="css/page_manifestations.css"
+      title="Design"
+    />
 
     <script type="text/javascript" src="javascript/prototype.js"></script>
     <script
@@ -163,7 +170,8 @@
 
       <div id="right">
         <div id="middle">
-          <div id="top" style="height: 25px">
+
+          <div id="top">
             <div class="nom">
               <div class="carre">
                 <img
@@ -800,18 +808,12 @@
                   <div class="title">L’art mène le monde</div>
                   <div class="texte_manif">
                     <p style="font-size: 14px">Février - Avril 2020</p>
-                    <!--
-		<p style="font-style:italic;margin-top:5px;">Hôtel de ville de Sceaux</p>
-	-->
                     <p style="margin-top: 8px; text-align: justify">
                       Disposées pendant le confinement sur le territoire de la
                       ville de Sceaux et perçues lors des précieuses sorties du
                       public, ces 5 citations rappelaient la présence
                       essentielle de l’Art dans nos vies.
                     </p>
-                    <!--
-		<p style="margin-top:8px;text-align:justify;">Macha Pandellé  - Altone Mishino - Françoise Delecroix - ITAE   - Wari  Mansouri – Vincent Pandellé - Jean.José Baranes  - Grégory Morizeau  - Arnaud Laval - Renaud Bargues - Laurence Bost - Mitou Allalinarde - Christophe Bogdan - Claudine Sabatier - Anne Mauban  - Jérôme Bouchez – Dashan Yang - Arnaud de l’Estourbeillon -  Paule Millara -  Margot Montenoise - Jouda Gomri - Lin Lei - Milan Atanaskovic - Bertell’</p>
-	-->
                   </div>
                   <!-- fin lart mene le monde -->
 
@@ -2136,49 +2138,6 @@
                   </div>
                   <!-- fin C1.1 -->
 
-                  <!-- debut du paragraphe d'une nouvelle manifestation 
-
-<div class="video">
-
-insérer le code de la vidéo s'il y a lieu,  et effacer ce texte
-
-</div> 
-
-
- <div class="images"> 
- 
- exemple pour 5 images, completer le chemin des images avec les noms à la place de "..." ainsi que title et alt avec le nom de la manifestation, ne pas oublier de glisser les nouvelles images p et g dans le dossier images/manifestations/,  et effacer ce texte
- 
-          <div class="vignette"><a href="images/manifestations/...1g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...1p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
-
-          <div class="vignette"><a href="images/manifestations/...2g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...2p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
-          
-          <div class="vignette"><a href="images/manifestations/...3g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...3p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
-
-          <div class="vignette"><a href="images/manifestations/...4g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...4p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
-
-          <div class="vignette"><a href="images/manifestations/...5g.jpg" rel="lightbox[manifestations]" title="Photo 1 de la manifestation ..."><img src="images/manifestations/...5p.jpg" alt="Image 1 ..." width="70" height="70" border="0" /></a></div>
-           </div>
-
-
- <div class="title">....
- 
- mettre le nom de la manifestions et effacer ce texte
- 
- </div>
-<div class="texte_manif"> ici tous les paragraphes qui suivent le titre
-
-<p style="font-size:14px;">... remplir en cas de sous-titre, genre de manifestations</p>
-<p style="font-style:italic;margin-top:5px;">... nom général et date</p>
-
-         <p style="margin-top:8px;text-align:justify;">... les noms des participants</p>
-          <p style="margin-top:8px;text-align:justify;">... Un texte sur l'événement</p>
-
-fin de texte_manif</div>
-
-
-fin du paragraphe nouvelle manifestation, à insérer à l'endroit souhaité entre fin et debut d'autres paragraphes -->
-
                   <!-- fin scroller container -->
                 </div>
                 <!-- fin news -->