init commit

.bash_logout

@@ -0,0 +1,3 @@
+# ~/.bash_logout
+
+clear

.bash_profile

@@ -0,0 +1,14 @@
+# .bash_profile
+
+# Get the aliases and functions
+if [ -f ~/.bashrc ]; then
+        . ~/.bashrc
+fi
+
+# User specific environment and startup programs
+
+PATH=$PATH:$HOME/bin
+BASH_ENV=$HOME/.bashrc
+USERNAME=""
+
+export USERNAME BASH_ENV PATH

.bashrc

@@ -0,0 +1,8 @@
+# .bashrc
+
+# User specific aliases and functions
+
+# Source global definitions
+if [ -f /etc/bashrc ]; then
+        . /etc/bashrc
+fi

.forward

@@ -0,0 +1 @@
+postmaster@bloc-house.org

.gitignore

@@ -0,0 +1,49 @@
+# These are some examples of commonly ignored file patterns.
+# You should customize this list as applicable to your project.
+# Learn more about .gitignore:
+#     https://www.atlassian.com/git/tutorials/saving-changes/gitignore
+
+# Node artifact files
+node_modules/
+dist/
+
+# Compiled Java class files
+*.class
+
+# Compiled Python bytecode
+*.py[cod]
+
+# Log files
+*.log
+
+# Package files
+*.jar
+
+# Maven
+target/
+dist/
+
+# JetBrains IDE
+.idea/
+
+# Unit test reports
+TEST*.xml
+
+# Generated by MacOS
+.DS_Store
+
+# Generated by Windows
+Thumbs.db
+
+# Applications
+*.app
+*.exe
+*.war
+
+# # Large media files
+# *.mp4
+# *.tiff
+# *.avi
+# *.flv
+# *.mov
+# *.wmv

.ovhconfig

@@ -0,0 +1,10 @@
+; pour plus d'informations sur ce fichier:
+; http://www.ovh.com/fr/g1175.format_du_point_ovhconfig
+
+app.engine=php
+app.engine.version=7.0
+
+http.firewall=none
+environment=production
+
+container.image=stable

README.md

@@ -0,0 +1,56 @@
+# notes
+
+- que voulais-tu dire par "si encore opérationnel" à propos de changer cette adresse mail ? -> j'ai remplacé l'ancienne par la nouvelle sur yahoo
+- j'ai changé l'adresse mail sur toutes les pages, pas uniquement la page d'accueil
+- j'ai rajouté "Visible / Invisible 3" en premiere position, mais je ne suis pas sur que c'etait ce que tu voulais
+- pour la video, j'ai fais une version simple comme pour visible-invisible-3 avec simplement une image, et quand on clique dessus la video se lance. Je crois que c'est autre chose que tu voulais : une image sans les "boutons" video, puis la video qui se lance toute seule au bout de 3 secondes ? dis-moi si c'est bien ca
+- j'ai modifié la qualité des images, est-ce qu'elle te convient ?
+- pour les artistes, j'ai choisis au hazard les couleurs des carrés vides
+
+---
+
+# Actualisation Février 2025, site bloc-house.org (ce qui est en bleu est ce qui sera visible sur le site, photos et vidéos jointes, les « OK » c’est qu’on change rien)
+
+## Page accueil
+
+- [x] Changer l’adresse mail si encore opérationnel (bloc.house79@gmail.com) ??? ? en bas à gauche  
+       Nouvelle adresse mail : blochouseprojects@yahoo.com
+
+## Page ateliers
+
+- [x] Changer adresse mail : bloc.house79@gmail.com -> blochouseprojects@yahoo.com
+
+## Page manifestations
+
+- [x] Changer adresse mail : bloc.house79@gmail.com -> blochouseprojects@yahoo.com
+- [x] Même style que pour toutes les manifestations passées
+- [x] Rajout en premier bandeau en haut à droite : Visible/Invisible.3
+- [x] Vidéo courte de l’exposition (rajouter comme page titre le visuel de la manifestation en fixe sur 3 secondes puis la vidéo enchaine elle est en verticale, d’où bandes noires de chaque cotés)
+- [x] En dessous les 5 photos (légendées « Vue de l’exposition » et pour la quatrième « les artistes organisateurs »
+- [x] Texte : Troisième volet du projet d’expositions sur le dessin contemporain Visible/Invisible – 15/01/2024 – 22/01/2024 à la LooLooLook Gallery, 12 rue de la Sourdière 75001 Paris.
+- [x] Artistes exposants : Milan Atanaskovic, Christophe Bogdan, Emmanuel Bing, Sophie Bloch, LAAB - Laurence Bost, Jérôme Bouchez, Sahar Foroutan, Macha Krivokapic, Lin Leï, Arnaud de l’Estourbeillon, Eliza Magri, Altone Mishino, Françoise Miquelis, Margot Montenoise, Stephane Moreaux, Vincent Pandellé, Ilan Parienté, Claudine Sabatier, Dashan Yang.
+
+## Page artistes
+
+- [x] Changer adresse mail : bloc.house79@gmail.com -> blochouseprojects@yahoo.com
+- [ ] Retirer de la mosaïque les artistes qui nous ont quittés (photos et tous liens):
+  - [x] Ligne 2 carré 1 Arnaud Laval
+  - [x] Ligne 3 carré 3 Françoise Delecroix
+  - [x] Ligne 4 carré 1 Paule Millara
+  - [x] Ligne 5 carré 2 Macha Pandellé
+  - [x] Ligne 5 carré 5 Lahouari Mansouri dit Wari
+  - [x] Ligne 6 carré 1 Anne Mauban
+  - [x] Ligne 6 carré 4 Françoise Miquelis
+- [x] retirer tous les noms de la description
+
+## Page interstices
+
+- [x] Changer adresse mail : bloc.house79@gmail.com -> blochouseprojects@yahoo.com
+
+## Page contact-Infos
+
+- [x] Changer adresse mail 2 endroits : bloc.house79@gmail.com -> blochouseprojects@yahoo.com
+
+## Page partenaires
+
+- [x] Changer adresse mail : bloc.house79@gmail.com -> blochouseprojects@yahoo.com

www/.htaccess

@@ -0,0 +1,3 @@
+RewriteEngine On
+RewriteCond %{SERVER_PORT} 80
+RewriteRule ^(.*)$ https://www.bloc-house.org/$1 [R,L]

www/actualisation/artistes.html

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>
+      Association Bloc-House - Les ateliers éphémères - Les artistes adhérents
+    </title>
+
+    <meta
+      name="description"
+      content="Site présentant les activités et les artistes de l'association Bloc-House à Sceaux"
+    />
+    <meta name="Author" content="L'association Bloc-House et ses artistes" />
+    <meta
+      name="keywords"
+      content="Bloc-House, ateliers éphémères, ville de Sceaux, ateliers portes ouvertes, association d'artistes plasticiens, diffusion de la création contemporaine, ouverture d'ateliers éphémères, territoire, pôle de création, interface, partenaires culturels, économiques et sociaux, manifestations artistiques, Underground, Milan Atanaskovic, Eliza Magri, Vincent Pandellé, Altone Mishino, Jérome Bouchez, Christophe Bogdan, Margot Montenoise, esapce de travail alternatif, Mitou Alalinarde, Claire Artemyz, Jean José Baranes, Gérard Koch, Nicolas de Ferran, Macha Krivokapic, Isabelle Rince, Claudine Sabatier, Dashan Yang, installation éphémères, manifestation NOIR, manifestation TO BE A STICKER, manifestation CECI N'EST PAS UN KAKEMONO, manifestation CO-INCIDENCES "
+    />
+    <link rel="shortcut icon" href="images/iconw.png" />
+    <link
+      rel="stylesheet"
+      media="screen"
+      type="text/css"
+      href="css/styles.css"
+      title="Design"
+    />
+
+    <script type="text/javascript" src="javascript/tools.js"></script>
+
+    <script type="text/javascript">
+      <!--
+      function preload() {
+        if (document.images) {
+          tabImages = new Array();
+          for (var i = 0; i < preload.arguments.length; i++) {
+            tabImages[i] = new Image();
+            tabImages[i].src = preload.arguments[i];
+          }
+        }
+      }
+
+      var tabImages = new Array();
+      preload(
+        "images/logo_bloc_house.png",
+        "images/fond1.png",
+        "images/mail.png"
+      );
+      //-->
+    </script>
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(["_setAccount", "UA-31878743-1"]);
+      _gaq.push(["_trackPageview"]);
+
+      (function () {
+        var ga = document.createElement("script");
+        ga.type = "text/javascript";
+        ga.async = true;
+        ga.src =
+          ("https:" == document.location.protocol
+            ? "https://ssl"
+            : "http://www") + ".google-analytics.com/ga.js";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+
+  <body onload="javascript:init();">
+    <div id="global">
+      <div id="left">
+        <div id="logo">
+          <img
+            src="images/logo_bloc_house.png"
+            alt="Logo Bloc-House"
+            width="223"
+            height="47"
+          />
+        </div>
+        <div class="trait"></div>
+        <div class="menu">
+          <a href="index.html" title="Retour à la page d'accueil">ACCUEIL</a>
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="ateliers.html" title="Accéder à la page ateliers"
+            >ATELIERS</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="manifestations.html" title="Accéder à la page manifestations"
+            >MANIFESTATIONS</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">ARTISTES</div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="interstices.html" title="Accéder à la page interstices"
+            >INTERSTICES</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="contact.html" title="Accéder à la page contact"
+            >CONTACT - INFOS</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="partenaires.html" title="Accéder à la page partenaires"
+            >PARTENAIRES</a
+          >
+        </div>
+
+        <!--
+	<div class="left_bottom1" style="margin-top:25px;">
+	<img class="icone" style="margin-left:5px;" src="images/iconePDF.png" alt="icone adobe reader" width="36" height="36" /><div class="sousmenu" style="margin-top:5px;"><a href="ressources/statuts_bloc_house.pdf" title="Télécharger les statuts de Bloc-House">Télécharger les statuts de l'association</a></div>
+	</div>
+	-->
+
+        <div class="left_bottom1" style="margin-top: 25px">
+          <img
+            class="icone"
+            style="margin-left: 12px"
+            src="images/mail.png"
+            alt="icone mailbox"
+            width="28"
+            height="18"
+          />
+          <div class="sousmenu" style="margin-top: 5px">
+            <a
+              href="mailto:blochouseprojects@yahoo.com"
+              title="Envoyer un mail à l'association Bloc-House"
+            >
+              blochouseprojects@yahoo.com
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- fin left -->
+
+      <div id="right">
+        <div id="content_artistes">
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(0);"
+              title="Margot Montenoise"
+              ><img
+                src="images/artistes/margotMontenoise.jpg"
+                alt="margot Montenoise"
+            /></a>
+          </div>
+          <div class="vide" style="background-color: #cccccc"></div>
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(1);"
+              title="Christophe Bogdan"
+              ><img
+                src="images/artistes/christopheBogdan.jpg"
+                alt="christophe Bogdan"
+            /></a>
+          </div>
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(2);"
+              title="Masha Krivokapic"
+              ><img
+                src="images/artistes/mashaKrivokapic.jpg"
+                alt="masha Krivokapic"
+            /></a>
+          </div>
+          <div class="vide" style="background-color: #999999"></div>
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(3);"
+              title="Vincent Pandellé"
+              ><img
+                src="images/artistes/vincentPandelle.jpg"
+                alt="vincent Pandelle"
+            /></a>
+          </div>
+          <!-- <div class="portrait">
+            <a href="#" onclick="javascript:afficher(22);" title="Arnaud Laval"
+              ><img src="images/artistes/arnaudLaval.jpg" alt="arnaud Laval"
+            /></a>
+          </div> -->
+          <div class="vide" style="background-color: #999999"></div>
+
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(4);"
+              title="Jean José Baranes"
+              ><img
+                src="images/artistes/jeanJoseBaranes.jpg"
+                alt="jean Jose Baranes"
+            /></a>
+          </div>
+          <div class="portrait">
+            <a href="#" onclick="javascript:afficher(5);" title="Eliza Magri"
+              ><img src="images/artistes/elizaMagri.jpg" alt="eliza Magri"
+            /></a>
+          </div>
+          <div class="vide" style="background-color: #666666"></div>
+          <div class="portrait">
+            <a href="#" onclick="javascript:afficher(6);" title="Laurence Bost"
+              ><img src="images/artistes/laurenceBost.jpg" alt="laurence Bost"
+            /></a>
+          </div>
+          <div class="vide" style="background-color: #333333"></div>
+
+          <div class="boite">
+            <div class="portrait">
+              <a
+                href="#"
+                onclick="javascript:afficher(17);"
+                title="Claudine Sabatier"
+                ><img
+                  src="images/artistes/claudineSabatier.jpg"
+                  alt="Claudine Sabatier"
+              /></a>
+            </div>
+            <div class="portrait">
+              <a
+                href="#"
+                onclick="javascript:afficher(7);"
+                title="Jérôme Bouchez"
+                ><img
+                  src="images/artistes/jeromeBouchez.jpg"
+                  alt="Jerome Bouchez"
+              /></a>
+            </div>
+            <!-- <div class="portrait">
+              <a
+                href="#"
+                onclick="javascript:afficher(8);"
+                title="Paule Millara"
+                ><img
+                  src="images/artistes/pauleMillara.jpg"
+                  alt="Paule Millara"
+              /></a>
+            </div> -->
+            <div class="vide" style="background-color: #ffffff"></div>
+            <div class="vide" style="background-color: #333333"></div>
+          </div>
+
+          <div id="affichage"></div>
+
+          <div class="boite">
+            <!-- <div class="portrait">
+              <a
+                href="#"
+                onclick="javascript:afficher(21);"
+                title="Françoise Delecroix"
+                ><img
+                  src="images/artistes/francoiseDelecroix.jpg"
+                  alt="Françoise Delecroix"
+              /></a>
+            </div> -->
+            <div class="vide" style="background-color: #cccccc"></div>
+            <div class="portrait">
+              <a href="#" onclick="javascript:afficher(9);" title="Dashan Yang"
+                ><img src="images/artistes/dashanYang.jpg" alt="Dashan Yang"
+              /></a>
+            </div>
+            <div class="portrait">
+              <a
+                href="#"
+                onclick="javascript:afficher(10);"
+                title="Altone Mishino"
+                ><img
+                  src="images/artistes/altoneMishino.jpg"
+                  alt="Altone Mishino"
+              /></a>
+            </div>
+            <div class="portrait">
+              <a
+                href="#"
+                onclick="javascript:afficher(24);"
+                title="Ilan Parienté"
+                ><img
+                  src="images/artistes/ilanPariente.jpg"
+                  alt="Ilan Parienté"
+              /></a>
+            </div>
+            <!--<div class="vide" style="background-color:#999999;"></div>-->
+          </div>
+
+          <div class="vide" style="background-color: #666666"></div>
+          <!-- <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(11);"
+              title="Macha Pandellé"
+              ><img
+                src="images/artistes/mariaPandelle.jpg"
+                alt="Maria Pandelle"
+            /></a>
+          </div> -->
+          <div class="vide" style="background-color: #999999"></div>
+          <div class="portrait">
+            <a href="#" onclick="javascript:afficher(20);" title="Lin Lei"
+              ><img src="images/artistes/linLei.jpg" alt="Lin Lei"
+            /></a>
+          </div>
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(12);"
+              title="Milan Atanaskovic"
+              ><img
+                src="images/artistes/milanAtanaskovic.jpg"
+                alt="Milan Atanaskovic"
+            /></a>
+          </div>
+          <!-- <div class="portrait">
+            <a href="#" onclick="javascript:afficher(13);" title="Wari"
+              ><img src="images/artistes/wari.jpg" alt="wari"
+            /></a>
+          </div> -->
+          <div class="vide" style="background-color: #666666"></div>
+          <div class="vide" style="background-color: #ffffff"></div>
+
+          <!-- <div class="portrait">
+            <a href="#" onclick="javascript:afficher(14);" title="Anna Mauban"
+              ><img src="images/artistes/annaMauban.jpg" alt="Anna Mauban"
+            /></a>
+          </div> -->
+          <div class="vide" style="background-color: #333333"></div>
+          <div class="vide" style="background-color: #ffffff"></div>
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(15);"
+              title="Mitou Alalinarde"
+              ><img
+                src="images/artistes/mitouAllalinarde.jpg"
+                alt="Mitou Allalinarde"
+            /></a>
+          </div>
+          <!-- <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(23);"
+              title="Françoise Miquelis"
+              ><img
+                src="images/artistes/francoiseMiquelis.jpg"
+                alt="Françoise Miquelis"
+            /></a>
+          </div> -->
+          <div class="vide" style="background-color: #999999"></div>
+          <div class="vide" style="background-color: #ccc"></div>
+          <div class="portrait">
+            <a
+              href="#"
+              onclick="javascript:afficher(19);"
+              title="Arnaud de l'Estourbeillion"
+              ><img
+                src="images/artistes/arnauddelestourbeillion.jpg"
+                alt="Arnaud de l'Estourbeillion"
+            /></a>
+          </div>
+        </div>
+        <!-- fin content -->
+
+        <div id="trait_vertical" style="margin-left: 68px"></div>
+      </div>
+      <!-- fin right -->
+
+      <div id="bottom">
+        <img
+          class="icone1"
+          src="images/logo_carre2.png"
+          alt="logo association"
+          width="33"
+          height="33"
+        />
+        <div
+          class="adress"
+          style="float: left; margin-top: 18px; margin-left: 8px"
+        >
+          <span style="font-weight: bold"
+            >Association BLOC-HOUSE, Les Ateliers Éphémères, </span
+          >54 rue de Bagneux, 92330 Sceaux
+        </div>
+      </div>
+      <!-- fin bottom -->
+    </div>
+    <!-- fin global -->
+  </body>
+</html>

www/actualisation/ateliers.html

@@ -0,0 +1,316 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Association Bloc-House - Les ateliers éphémères - Les lieux</title>
+
+    <meta
+      name="description"
+      content="Page présentant les lieux de l'association Bloc-House à Sceaux"
+    />
+    <meta
+      name="Author"
+      content="Les lieux de l'association Bloc-House à  Sceaux"
+    />
+    <meta
+      name="keywords"
+      content="Bloc-House, ateliers éphémères, ville de Sceaux, ateliers portes ouvertes, association d'artistes plasticiens, diffusion de la création contemporaine, ouverture d'ateliers éphémères, territoire, pôle de création, interface, partenaires culturels, économiques et sociaux, manifestations artistiques, Underground, Milan Atanaskovic, Eliza Magri, Vincent Pandellé, Altone Mishino, Jérome Bouchez, Christophe Bogdan, Margot Montenoise, esapce de travail alternatif, Mitou Alalinarde, Claire Artemyz, Jean José Baranes, Gérard Koch, Nicolas de Ferran, Macha Krivokapic, Isabelle Rince, Claudine Sabatier, Dashan Yang, installation éphémères, manifestation NOIR, manifestation TO BE A STICKER, manifestation CECI N'EST PAS UN KAKEMONO, manifestation CO-INCIDENCES "
+    />
+    <link rel="shortcut icon" href="images/iconw.png" />
+    <link
+      rel="stylesheet"
+      media="screen"
+      type="text/css"
+      href="css/styles.css"
+      title="Design"
+    />
+
+    <script type="text/javascript">
+      <!--
+      function preload() {
+        if (document.images) {
+          tabImages = new Array();
+          for (var i = 0; i < preload.arguments.length; i++) {
+            tabImages[i] = new Image();
+            tabImages[i].src = preload.arguments[i];
+          }
+        }
+      }
+
+      var tabImages = new Array();
+      preload(
+        "images/logo_bloc_house.png",
+        "images/fond1.png",
+        "images/mail.png"
+      );
+      //-->
+    </script>
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(["_setAccount", "UA-31878743-1"]);
+      _gaq.push(["_trackPageview"]);
+
+      (function () {
+        var ga = document.createElement("script");
+        ga.type = "text/javascript";
+        ga.async = true;
+        ga.src =
+          ("https:" == document.location.protocol
+            ? "https://ssl"
+            : "http://www") + ".google-analytics.com/ga.js";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+
+  <body>
+    <div id="global">
+      <div id="left">
+        <div id="logo">
+          <img
+            src="images/logo_bloc_house.png"
+            alt="Logo Bloc-House"
+            width="223"
+            height="47"
+          />
+        </div>
+        <div class="trait"></div>
+        <div class="menu">
+          <a href="index.html" title="Retour à la page d'accueil">ACCUEIL</a>
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">ATELIERS</div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="manifestations.html" title="Accéder à la page manifestations"
+            >MANIFESTATIONS</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="artistes.html" title="Accéder à la page artistes"
+            >ARTISTES</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="interstices.html" title="Accéder à la page interstices"
+            >INTERSTICES</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="contact.html" title="Accéder à la page contact"
+            >CONTACT - INFOS</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="partenaires.html" title="Accéder à la page partenaires"
+            >PARTENAIRES</a
+          >
+        </div>
+
+        <!--
+<div class="left_bottom1" style="margin-top:25px;">
+<img class="icone" style="margin-left:5px;" src="images/iconePDF.png" alt="icone adobe reader" width="36" height="36" /><div class="sousmenu" style="margin-top:5px;"><a href="ressources/statuts_bloc_house.pdf" title="Télécharger les statuts de Bloc-House">Télécharger les statuts de l'association</a></div>
+</div>
+-->
+
+        <div class="left_bottom1" style="margin-top: 25px">
+          <img
+            class="icone"
+            style="margin-left: 12px"
+            src="images/mail.png"
+            alt="icone mailbox"
+            width="28"
+            height="18"
+          />
+          <div class="sousmenu" style="margin-top: 5px">
+            <a
+              href="mailto:blochouseprojects@yahoo.com"
+              title="Envoyer un mail à l'association Bloc-House"
+            >
+              blochouseprojects@yahoo.com
+            </a>
+          </div>
+        </div>
+
+        <!-- fin left -->
+      </div>
+
+      <div id="right">
+        <div id="ateliers">
+          <div id="Container">
+            <div id="News">
+              <div class="Scroller-Container">
+                <div id="img_atelier">
+                  <img
+                    src="images/ateliers/ateliers1.jpg"
+                    alt="Le site des ateliers Bloc-House"
+                  />
+                </div>
+
+                <div class="legende">Site des ateliers Bloc-House</div>
+
+                <!-- ici la liste des artistes résidents, pour ajouter ou échanger un artiste, mettre "- nom de l'artiste" à l'endroit souhaité-->
+                <div class="artistes">
+                  <p style="font-size: 14px; font-weight: bold">
+                    Les artistes résidents
+                  </p>
+                  <!-- <p style="margin-top:2px;">Underground  <span style="margin-left:5px;">Milan Atanaskovic</span></p> -->
+                  <p style="margin-top: 2px">
+                    First level
+                    <span style="margin-left: 23px"
+                      >Laurence Boost dite LABB - Vincent Pandellé</span
+                    >
+                  </p>
+                  <p style="margin-top: 2px">
+                    Second level
+                    <span style="margin-left: 7px"
+                      >Altone Mishino - Jérome Bouchez - Macha Krivokapic -
+                      Milan Atanaskovic</span
+                    >
+                  </p>
+                  <p style="margin-top: 2px">
+                    Third level
+                    <span style="margin-left: 19px"
+                      >Margot Montenoise - Ilan Parienté</span
+                    >
+                  </p>
+                </div>
+
+                <!-- fin de la liste des artistes -->
+
+                <!-- les images -->
+
+                <div id="carton">
+                  <img
+                    src="images/ateliers/ateliers4.jpg"
+                    style="margin-left: 5px; margin-top: 25px"
+                    alt="carton invitation 1"
+                    width="228"
+                    height="320"
+                  /><img
+                    src="images/ateliers/ateliers5.jpg"
+                    style="margin-left: 5px; margin-top: 25px"
+                    alt="carton invitation 1"
+                    width="238"
+                    height="320"
+                  />
+                </div>
+
+                <!-- fin des images -->
+
+                <!-- pour ajouter un carton d'invitation, calculer l'image à une hauteur de 320px, la nommer par exemple "ateliers4.jpg" et la glisser dans le dossier images/ateliers/, ensuite ajouter dans le code ci dessus
+<div id="carton"><img src="images/ateliers/ateliers4.jpg" style="margin-left:5px;margin-top:25px;" alt="carton invitation 3" width="" height="320" /></div>
+-->
+
+                <div id="texte" style="margin-top: 18px; font-size: 12px">
+                  <p>
+                    <strong>2008 / 2018</strong> – Dixième anniversaire du site
+                    des ateliers d’artistes et de l’association Bloc-House
+                    marqué par la création collective de « Gesture », une
+                    peinture monumentale présentée au public sur la façade du
+                    site, le samedi 8 décembre 2018 lors d’une Porte Ouverte
+                    Nocturne des ateliers.
+                  </p>
+                  <br />
+                  <p>
+                    Chaque année, Bloc-House organise deux portes ouvertes : en
+                    octobre, dans le cadre des ateliers portes ouvertes, en
+                    partenariat avec la ville de Sceaux; en juin des ateliers
+                    portes ouvertes directement proposés par les artistes
+                    résidents Bloc-House.
+                  </p>
+
+                  <p
+                    style="
+                      width: 100px;
+                      height: 1px;
+                      border-bottom: 1px solid #cc3300;
+                      margin-left: 190px;
+                      margin-top: 25px;
+                    "
+                  ></p>
+
+                  <p style="margin-top: 25px; font-style: italic">
+                    "... l'Etat, en lien avec les collectivités territoriales,
+                    pourrait faciliter l'implantation de collectifs d'artistes
+                    dans des lieux dits "intercalaires", c'est à dire des
+                    bâtiments en attente d'affectation ou de travaux, sur un
+                    temps donné, clairement défini dans une convention
+                    d'occupation précaire - précaire car temporaire."
+                  </p>
+
+                  <p style="margin-top: 10px; font-style: italic">
+                    " Ces espaces de travail alternatifs... - même éphémères -
+                    ont un impact extrêmement positif sur la vie d'un quartier,
+                    son animation et son dynamisme. Il s'agit là d'une autre
+                    manière d'accéder à l'art, ni sacrée comme dans les musées,
+                    ni marchande comme dans les galeries. C'est un atout
+                    considérable, une chance pour les habitants, une opportunité
+                    pour les artistes."
+                  </p>
+
+                  <p style="margin-top: 10px; font-weight: bold">
+                    Christophe Girard
+                  </p>
+                  <p>
+                    Le petit livre rouge de la culture - Propositions pour une
+                    république culturelle
+                  </p>
+                  <p>Flammarion, 2012.</p>
+
+                  <p
+                    style="
+                      margin-top: 20px;
+                      margin-bottom: 10px;
+                      font-weight: bold;
+                    "
+                  >
+                    Le site des ateliers a fait l'objet d'une convention de mise
+                    à disposition éphémère entre la ville de Sceaux et
+                    l'association Bloc-House
+                  </p>
+                </div>
+                <!-- fin scroller container -->
+              </div>
+
+              <!-- fin news -->
+            </div>
+
+            <!-- fin container -->
+          </div>
+
+          <!-- fin ateliers -->
+        </div>
+
+        <div id="trait_vertical"></div>
+        <!-- fin right -->
+      </div>
+      <div id="bottom">
+        <img
+          class="icone1"
+          src="images/logo_carre2.png"
+          alt="logo association"
+          width="33"
+          height="33"
+        />
+        <div
+          class="adress"
+          style="float: left; margin-top: 18px; margin-left: 8px"
+        >
+          <span style="font-weight: bold"
+            >Association BLOC-HOUSE, Les Ateliers Éphémères, </span
+          >54 rue de Bagneux, 92330 Sceaux
+        </div>
+
+        <!-- fin bottom -->
+      </div>
+
+      <!-- fin global -->
+    </div>
+  </body>
+</html>

www/actualisation/contact.html

@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>
+      Association Bloc-House - Les ateliers éphémères - Contact et informations
+    </title>
+
+    <meta
+      name="description"
+      content="Page présentant les mentions légales de l'association Bloc-House à Sceaux"
+    />
+    <meta
+      name="Author"
+      content="Coordonnées de contact de l'association Bloc-House à  Sceaux"
+    />
+    <meta
+      name="keywords"
+      content="Bloc-House, ateliers éphémères, ville de Sceaux, ateliers portes ouvertes, association d'artistes plasticiens, diffusion de la création contemporaine, ouverture d'ateliers éphémères, territoire, pôle de création, interface, partenaires culturels, économiques et sociaux, manifestations artistiques, Underground, Milan Atanaskovic, Eliza Magri, Vincent Pandellé, Altone Mishino, Jérome Bouchez, Christophe Bogdan, Margot Montenoise, esapce de travail alternatif, Mitou Alalinarde, Claire Artemyz, Jean José Baranes, Gérard Koch, Nicolas de Ferran, Macha Krivokapic, Isabelle Rince, Claudine Sabatier, Dashan Yang, installation éphémères, manifestation NOIR, manifestation TO BE A STICKER, manifestation CECI N'EST PAS UN KAKEMONO, manifestation CO-INCIDENCES "
+    />
+    <link rel="shortcut icon" href="images/iconw.png" />
+    <link
+      rel="stylesheet"
+      media="screen"
+      type="text/css"
+      href="css/styles.css"
+      title="Design"
+    />
+    <script type="text/javascript" src="javascript/tools.js"></script>
+
+    <script type="text/javascript">
+      <!--
+      function preload() {
+        if (document.images) {
+          tabImages = new Array();
+          for (var i = 0; i < preload.arguments.length; i++) {
+            tabImages[i] = new Image();
+            tabImages[i].src = preload.arguments[i];
+          }
+        }
+      }
+
+      var tabImages = new Array();
+      preload(
+        "images/logo_bloc_house.png",
+        "images/fond1.png",
+        "images/mail.png"
+      );
+      //-->
+    </script>
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(["_setAccount", "UA-31878743-1"]);
+      _gaq.push(["_trackPageview"]);
+
+      (function () {
+        var ga = document.createElement("script");
+        ga.type = "text/javascript";
+        ga.async = true;
+        ga.src =
+          ("https:" == document.location.protocol
+            ? "https://ssl"
+            : "http://www") + ".google-analytics.com/ga.js";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+
+  <body>
+    <div id="global">
+      <div id="left">
+        <div id="logo">
+          <img
+            src="images/logo_bloc_house.png"
+            alt="Logo Bloc-House"
+            width="223"
+            height="47"
+          />
+        </div>
+        <div class="trait"></div>
+        <div class="menu">
+          <a href="index.html" title="Retour à la page d'accueil">ACCUEIL</a>
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="ateliers.html" title="Accéder à la rubrique ateliers"
+            >ATELIERS</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="manifestations.html" title="accéder à la page manifestations"
+            >MANIFESTATIONS</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="artistes.html" title="Accéder à la page artistes"
+            >ARTISTES</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="interstices.html" title="Accéder à la page interstices"
+            >INTERSTICES</a
+          >
+        </div>
+        <div class="trait1"></div>
+        <div class="menu">CONTACT - INFOS</div>
+        <div class="trait1"></div>
+        <div class="menu">
+          <a href="partenaires.html" title="Accéder à la page partenaires"
+            >PARTENAIRES</a
+          >
+        </div>
+
+        <!--
+<div class="left_bottom1" style="margin-top:25px;">
+<img class="icone" style="margin-left:5px;" src="images/iconePDF.png" alt="icone adobe reader" width="36" height="36" /><div class="sousmenu" style="margin-top:5px;"><a href="ressources/statuts_bloc_house.pdf" title="Télécharger les statuts de Bloc-House">Télécharger les statuts de l'association</a></div>
+</div>
+-->
+
+        <div class="left_bottom1" style="margin-top: 25px">
+          <img
+            class="icone"
+            style="margin-left: 12px"
+            src="images/mail.png"
+            alt="icone mailbox"
+            width="28"
+            height="18"
+          />
+          <div class="sousmenu" style="margin-top: 5px">
+            <a
+              href="mailto:blochouseprojects@yahoo.com"
+              title="Envoyer un mail à l'association Bloc-House"
+            >
+              blochouseprojects@yahoo.com
+            </a>
+          </div>
+        </div>
+
+        <!-- fin left -->
+      </div>
+
+      <div id="right">
+        <div id="ateliers">
+          <div id="Container">
+            <div id="News">
+              <div class="Scroller-Container">
+                <div id="fauteuil">
+                  <div id="adresse1">
+                    <div id="logo_p">
+                      <img
+                        src="images/logo_bloc_housep.png"
+                        width="180"
+                        height="38"
+                        alt="logo association bloc-house"
+                      />
+                    </div>
+
+                    <table style="position: relative; top: 48px; left: 13px">
+                      <tr>
+                        <td>Adresse postale :</td>
+                        <td>&nbsp;Les Garages</td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td>&nbsp;20 rue des Imbergères</td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td>&nbsp;92330 Sceaux</td>
+                      </tr>
+                    </table>
+
+                    <table style="position: relative; top: 64px; left: 13px">
+                      <tr>
+                        <td>Site des ateliers :</td>
+                        <td>&nbsp;54 rue de Bagneux</td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td>&nbsp;92330 Sceaux</td>
+                      </tr>
+                    </table>
+
+                    <table style="position: relative; top: 76px; left: 13px">
+                      <tr>
+                        <td>Adresse mail :</td>
+                        <td class="link">
+                          &nbsp;<a
+                            href="mailto:blochouseprojects@yahoo.com"
+                            title="Envoyer un mail à l'association Bloc-House"
+                          >
+                            blochouseprojects@yahoo.com
+                          </a>
+                        </td>
+                      </tr>
+                    </table>
+
+                    <table style="position: relative; top: 88px; left: 13px">
+                      <tr>
+                        <td>Responsables publication :</td>
+                        <td>&nbsp;Jérôme Bouchez</td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td>&nbsp;Eliza Magri</td>
+                      </tr>
+                    </table>
+
+                    <table style="position: relative; top: 100px; left: 13px">
+                      <tr>
+                        <td>Crédits photographiques :</td>
+                        <td>&nbsp;Macha Krivokapic</td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td>&nbsp;Eliza Magri</td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td>&nbsp;Jérôme Bouchez</td>
+                      </tr>
+                    </table>
+
+                    <table style="position: relative; top: 112px; left: 13px">
+                      <tr>
+                        <td>Crédits vidéos :</td>
+                        <td>&nbsp;Milan Atanaskovic</td>
+                      </tr>
+                    </table>
+
+                    <table style="position: relative; top: 124px; left: 13px">
+                      <tr>
+                        <td>Réalisation du site :</td>
+                        <td class="link">
+                          &nbsp;<a
+                            href="http://www.marlei-webdesign.com"
+                            title="Accéder au site de Marlei Webdesign"
+                            target="_blank"
+                            >Marlei Webdesign</a
+                          >
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>Maintenance du site :</td>
+                        <td class="link">
+                          &nbsp;<a
+                            href="https://hugulumu.fr"
+                            title="Accéder au site de Hugo Lamy"
+                            target="_blank"
+                            >Hugo Lamy</a
+                          >
+                        </td>
+                      </tr>
+                    </table>
+
+                    <div id="marlei"></div>
+                  </div>
+                  <p style="font-style: italic; margin-top: 18px">
+                    Totem, bois et béton, création Christophe Bogdan pour
+                    Bloc-House, 2013.
+                  </p>
+
+                  <p
+                    style="font-size: 12px; font-weight: bold; margin-top: 25px"
+                  >
+                    mentions légales
+                  </p>
+                  <p style="margin-top: 10px">
+                    L'association Bloc-House n'est tenue que d'une simple
+                    obligation de moyens concernant les informations qu'elle met
+                    à disposition des personnes qui accèdent à son site
+                    Internet.
+                  </p>
+                  <p style="margin-top: 10px">
+                    Alors même que nous avons effectué toutes les démarches pour
+                    nous assurer de la fiabilité des informations contenues sur
+                    ce site Internet, l'association Bloc-House ne peut encourir
+                    aucune responsabilité du fait d'erreurs, d'omissions, où
+                    pour les résultats qui pourraient être obtenus par l'usage
+                    de ces informations.
+                  </p>
+                  <p style="margin-top: 10px">
+                    Notamment l'usage des liens hypertextes peut conduire votre
+                    consultation de notre site vers d'autres serveurs pour
+                    prendre connaissance de l'information recherchée, serveurs
+                    sur lesquels l'association Bloc-House n'a aucun contrôle.
+                  </p>
+                </div>
+                <!-- fin scroller container -->
+              </div>
+
+              <!-- fin news -->
+            </div>
+
+            <!-- fin container -->
+          </div>
+
+          <!-- fin ateliers -->
+        </div>
+
+        <div id="trait_vertical"></div>
+        <!-- fin right -->
+      </div>
+      <div id="bottom">
+        <img
+          class="icone1"
+          src="images/logo_carre2.png"
+          alt="logo association"
+          width="33"
+          height="33"
+        />
+        <div
+          class="adress"
+          style="float: left; margin-top: 18px; margin-left: 8px"
+        >
+          <span style="font-weight: bold"
+            >Association BLOC-HOUSE, Les Ateliers Éphémères, </span
+          >54 rue de Bagneux, 92330 Sceaux
+        </div>
+
+        <!-- fin bottom -->
+      </div>
+
+      <!-- fin global -->
+    </div>
+  </body>
+</html>

www/actualisation/css/lightbox.css

@@ -0,0 +1,126 @@
+/* CSS Lightbox */
+
+#lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  text-align: center;
+  line-height: 0;
+}
+#lightbox img {
+  width: auto;
+  height: auto;
+}
+#lightbox a img {
+  border: none;
+}
+
+#outerImageContainer {
+  position: relative;
+  background-color: #fff;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto;
+}
+#imageContainer {
+  padding: 10px;
+}
+
+#loading {
+  position: absolute;
+  top: 40%;
+  left: 0%;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+#hoverNav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+#imageContainer > #hoverNav {
+  left: 0;
+}
+#hoverNav a {
+  outline: none;
+}
+
+#prevLink,
+#nextLink {
+  width: 49%;
+  height: 100%;
+  background-image: url(data:images/gif;base64,AAAA); /* Trick IE into showing hover */
+  display: block;
+}
+#prevLink {
+  left: 0;
+  float: left;
+}
+#nextLink {
+  right: 0;
+  float: right;
+}
+#prevLink:hover,
+#prevLink:visited:hover {
+  background: url(../images/prevlabel.gif) left 15% no-repeat;
+}
+#nextLink:hover,
+#nextLink:visited:hover {
+  background: url(../images/nextlabel.gif) right 15% no-repeat;
+}
+
+#imageDataContainer {
+  font: 11px Arial, Helvetica, sans-serif;
+  background-color: #fff;
+  border-top: 1px #666666 solid;
+  margin: 0 auto;
+  line-height: 1.4em;
+  overflow: auto;
+  width: 100%;
+}
+
+#imageData {
+  padding: 0 10px;
+  color: #666;
+  font-family: Courrier New, Courrier, DejaVu Sans Mono, monospace;
+}
+#imageData #imageDetails {
+  width: 70%;
+  float: left;
+  margin-top: 7px;
+  text-align: left;
+}
+#imageData #caption {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+}
+#imageData #numberDisplay {
+  font: 10px Arial, Helvetica, sans-serif;
+  display: block;
+  clear: left;
+  padding-bottom: 1em;
+}
+#imageData #bottomNavClose {
+  width: 66px;
+  float: right;
+  margin-top: 7px;
+  padding-bottom: 0.7em;
+  outline: none;
+  background: url(../images/closelabel.gif) right 15% no-repeat;
+}
+
+#overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 90;
+  width: 100%;
+  height: 500px;
+  background-color: silver;
+}

www/actualisation/css/styles.css

@@ -0,0 +1,824 @@
+@charset "UTF-8";
+/* CSS Document */
+
+@font-face {
+  font-family: "arial-bold";
+  src: local("Arial Bold");
+}
+
+* {
+  padding: 0px;
+  margin: 0px;
+}
+
+img {
+  border: none;
+}
+
+body {
+  background: url(../images/fond1.png);
+  background-repeat: repeat-x;
+}
+
+#global {
+  height: 700px;
+  width: 1024px;
+  background-color: #ffffff;
+  color: #000000;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#left {
+  float: left;
+  width: 290px;
+  height: 600px;
+}
+
+#logo {
+  float: left;
+  width: 230px;
+  height: 60px;
+  margin-top: 30px;
+  margin-left: 38px;
+}
+
+.trait {
+  float: left;
+  width: 218px;
+  height: 1px;
+  border-top: 1px solid #000000;
+  margin-left: 43px;
+}
+
+.trait1 {
+  float: left;
+  width: 180px;
+  height: 1px;
+  border-top: 1px solid #000000;
+  margin-left: 43px;
+}
+
+.menu {
+  float: left;
+  height: 41px;
+  width: 180px;
+  font-family: arial-bold, Arial Bold, sans-serif;
+  font-weight: 900;
+  color: #cc3300;
+  font-size: 18px;
+  line-height: 41px;
+  margin-left: 43px;
+}
+.menu a {
+  font-family: arial-bold, Arial Bold, sans-serif;
+  font-weight: 900;
+  text-decoration: none;
+  color: #000000;
+}
+
+.menu a:hover {
+  font-family: arial-bold, Arial Bold, sans-serif;
+  font-weight: 900;
+  text-decoration: none;
+  color: #cc3300;
+}
+
+.left_bottom {
+  float: left;
+  width: 213px;
+  height: auto;
+  font-size: 11px;
+  margin-left: 40px;
+  /*margin-top:7px;*/
+}
+
+.left_bottom1 {
+  float: left;
+  width: 222px;
+  height: auto;
+  font-size: 11px;
+  margin-left: 35px;
+  /*margin-top:7px;*/
+}
+
+.icone {
+  float: left;
+  width: auto;
+  height: auto;
+}
+
+.sousmenu {
+  float: left;
+  width: 150px;
+  height: auto;
+  color: #cc3300;
+  margin-left: 15px;
+}
+
+.sousmenu a {
+  text-decoration: none;
+  color: #000000;
+}
+
+.sousmenu a:hover {
+  text-decoration: none;
+  color: #cc3300;
+}
+
+#right {
+  float: left;
+  width: 700px;
+  height: 600px;
+}
+
+#trait_vertical {
+  float: left;
+  height: 610px;
+  width: 1px;
+  margin-top: 48px;
+  margin-left: 110px;
+  border-left: 1px solid #000000;
+}
+
+#bottom {
+  float: left;
+  width: 909px;
+  height: auto;
+  margin-left: 45px;
+  margin-top: 80px;
+  padding-top: 10px;
+  font-size: 10px;
+  color: #000000;
+  border-top: 1px solid #666666;
+}
+
+.icone1 {
+  float: left;
+  width: 33px;
+  height: 33px;
+  margin-left: 240px;
+}
+
+/* page accueil */
+
+#content {
+  float: left;
+  width: 480px;
+  height: 600px;
+  margin-left: 100px;
+  margin-top: 92px;
+}
+
+.diaporama {
+  position: relative;
+  width: 480px; /* Largeur d'une photo */
+  height: 360px; /* Hauteur d'une photo */
+  /*margin-top:30px;
+margin-left:262px;*/
+}
+
+.diaporama li {
+  list-style-type: none;
+  overflow: hidden;
+  position: absolute; /* Les images seront positionnées toutes au même endroit */
+}
+
+.diaporama li a img {
+  width: 100%;
+  height: 100%;
+}
+
+.diaporama_controls {
+  width: 512px;
+  margin: 3px 0;
+  /*  padding:5px;*/
+  clear: both;
+  overflow: hidden;
+}
+
+.diaporama_controls .btns {
+  float: right;
+}
+
+.diaporama_controls a {
+  font-weight: normal;
+  width: 10px;
+  /*height:13px;*/
+  text-indent: -9999px;
+  display: inline-block;
+  margin: 0 3px;
+}
+
+.diaporama_controls .prev {
+  background: url(img/fleches_diapo.png) no-repeat top right;
+}
+
+.diaporama_controls .next {
+  background: url(img/fleches_diapo.png) no-repeat top left;
+}
+
+.diaporama_controls .pause {
+  background: url(img/fleches_diapo.png) no-repeat bottom right;
+}
+
+.diaporama_controls .play {
+  background: url(img/fleches_diapo.png) no-repeat bottom left;
+}
+
+#texte {
+  float: left;
+  width: 480px;
+  height: auto;
+  font-size: 11px;
+  /*margin-top:15px;*/
+  padding-right: 10px;
+  text-align: justify;
+}
+
+/* page artistes */
+
+#content_artistes {
+  float: left;
+  width: 552px;
+  height: 552px;
+  margin-left: 70px;
+  margin-top: 92px;
+}
+
+.portrait a {
+  float: left;
+  width: 80px;
+  height: 80px;
+  margin-top: 5px;
+  margin-left: 5px;
+  border: 1px solid #000000;
+}
+
+.portrait a img {
+  width: 100%;
+  height: 100%;
+}
+.portrait a:hover {
+  border: 1px solid #cc3300;
+}
+
+.vide {
+  float: left;
+  width: 80px;
+  height: 80px;
+  margin-top: 5px;
+  margin-left: 5px;
+  border: 1px solid #000000;
+}
+
+.boite {
+  float: left;
+  width: 174px;
+  height: 174px;
+}
+
+#affichage {
+  float: left;
+  width: 167px;
+  height: 105px;
+  border: 1px solid #000000;
+  margin-left: 5px;
+  margin-top: 5px;
+  font-size: 12px;
+  text-align: center;
+  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 {
+  float: left;
+  height: 600px;
+  width: 570px;
+  margin-left: 70px;
+  margin-top: 92px;
+}
+
+#interstice {
+  float: left;
+  height: 520px;
+  width: 500px;
+}
+
+#survol {
+  float: left;
+  height: 520px;
+  width: 500px;
+}
+
+#chiffres {
+  float: left;
+  width: 30px;
+  height: 520px;
+  margin-left: 40px;
+}
+
+#chiffres p {
+  font-size: 18px;
+  font-weight: normal;
+  margin-bottom: 60px;
+}
+
+#chiffres p a {
+  color: #000000;
+  font-size: 18px;
+  font-weight: normal;
+  margin-bottom: 60px;
+  text-decoration: none;
+}
+
+#chiffres p a:hover {
+  color: #cc3300;
+  text-decoration: none;
+}
+
+/* page ateliers */
+
+#ateliers {
+  position: relative;
+  left: 100px;
+  top: 90px;
+  float: left;
+  width: 580px;
+  height: 600px;
+}
+
+#img_atelier {
+  background-color: #000000;
+  width: 480px;
+  /*height:336px;*/
+  height: 380px;
+  margin-top: 3px;
+  overflow: hidden;
+}
+
+#img_atelier img {
+  /*margin-top: 25px;*/
+  width: 100%;
+  height: 100%;
+}
+
+.legende {
+  width: 480px;
+  height: auto;
+  text-align: justify;
+  font-style: italic;
+  font-size: 11px;
+  color: #000000;
+  margin-top: 10px;
+  margin-left: 340px;
+}
+
+.artistes {
+  width: 480px;
+  height: auto;
+  text-align: justify;
+  font-size: 12px;
+  color: #000000;
+  margin-top: 30px;
+}
+
+#carton {
+  width: 480px;
+  height: 370px;
+  margin-top: 50px;
+  background-color: #000000;
+}
+
+.legende1 {
+  float: left;
+  width: 240px;
+  height: auto;
+  text-align: justify;
+  font-style: italic;
+  font-size: 11px;
+  color: #000000;
+  margin-top: 10px;
+}
+
+/* page de contact */
+
+#contact {
+  position: relative;
+  left: 100px;
+  top: 90px;
+  float: left;
+  width: 580px;
+  height: 600px;
+}
+
+#News1 {
+  position: absolute;
+  top: 0px;
+  overflow: hidden;
+  width: 480px;
+  height: 530px;
+  display: none;
+}
+
+#News1 {
+  display: block;
+}
+
+#noir {
+  width: 480px;
+  height: 480px;
+  background-color: #000000;
+}
+
+#fauteuil {
+  background-image: url(../images/contact5.jpg);
+  background-repeat: no-repeat;
+  height: auto;
+  width: 480px;
+  margin-top: 3px;
+}
+
+#fauteuil p {
+  text-align: justify;
+}
+
+/*#contact_center{
+height:442px;
+width:280px;
+margin-left:190px;
+top:0px;
+}*/
+
+#adresse1 {
+  position: relative;
+  width: 250px;
+  height: 444px;
+  left: 205px;
+  top: 0px;
+  font-size: 11px;
+  line-height: 16px;
+  /*background-color:#d1d7d6;*/
+  /*border-top:1px solid #cccccc;
+border-bottom:1px solid #cccccc;*/
+}
+
+#logo_p {
+  position: relative;
+  width: 200px;
+  left: 13px;
+  top: 30px;
+}
+
+#adresse1 p a {
+  color: #000000;
+  text-decoration: none;
+}
+
+#adresse1 p a:hover {
+  color: #cc3300;
+  text-decoration: none;
+}
+
+adresse1 td {
+  height: 11px;
+  width: auto;
+}
+
+.link a {
+  color: #000000;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.link a:hover {
+  color: #cc3300;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+#marlei {
+  margin-left: 17px;
+  padding-top: 15px;
+  width: 480px;
+  height: 55px;
+  text-decoration: none;
+  line-height: normal;
+}
+
+#marlei a {
+  text-decoration: none;
+  color: #000000;
+  font-weight: bold;
+}
+
+#marlei a:hover {
+  text-decoration: none;
+  color: #cc3300;
+  font-weight: bold;
+}
+
+#mentions_legales {
+  width: 450px;
+  height: auto;
+}
+
+/* page partenaires */
+
+#lP {
+  float: left;
+  margin-top: -5px;
+}
+
+#haut {
+  float: left;
+  width: 480px;
+  height: 220px;
+}
+
+#bas {
+  float: left;
+  width: 480px;
+  height: 220px;
+}
+
+.partner {
+  float: left;
+  width: 200px;
+  height: 200px;
+  margin: 10px;
+  border: 1px solid #000000;
+}
+
+.partner1 {
+  float: left;
+  width: 200px;
+  height: 200px;
+  margin: 10px;
+  visibility: hidden;
+}
+
+/**
+ * visible invisible 3
+ */
+.video.visible-invisible-3 {
+  position: relative;
+  width: 480px; /* Match poster width */
+  height: 342.85px;
+  background: black;
+}
+.video.visible-invisible-3 video {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain; /* Ensures black bars around the video */
+}
+.images.visible-invisible-3 {
+  display: flex;
+  justify-content: space-between;
+}
+
+/**
+ * SCROLL BAR
+ */
+
+/* Chrome, Safari, Edge Scrollbar */
+#Container::-webkit-scrollbar {
+  width: 10px;
+}
+#Container::-webkit-scrollbar-track {
+  background: #eee;
+}
+#Container::-webkit-scrollbar-thumb {
+  background: #cc3300;
+}
+/* Firefox-specific Scrollbar */
+@-moz-document url-prefix() {
+  #Container {
+    scrollbar-width: thin;
+    scrollbar-color: #cc3300 #eee;
+    scrollbar-gutter: stable;
+  }
+}
+
+/* Style scrollbar buttons (arrows) */
+/* ::-webkit-scrollbar-button {
+  background: #555;
+  height: 16px;
+  width: 16px;
+} */
+/* Optional: Style the top (up) and bottom (down) buttons differently */
+/* ::-webkit-scrollbar-button:vertical:start {
+  background: url("up-arrow.png") center no-repeat;
+}
+::-webkit-scrollbar-button:vertical:end {
+  background: url("down-arrow.png") center no-repeat;
+}
+::-webkit-scrollbar-button:horizontal:start {
+  background: url("left-arrow.png") center no-repeat;
+}
+::-webkit-scrollbar-button:horizontal:end {
+  background: url("right-arrow.png") center no-repeat;
+} */
+
+.Scrollbar-Up {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-image: url(../images/up.png);
+  font-size: 0px;
+}
+.Scrollbar-Down {
+  position: absolute;
+  top: 560px;
+  width: 10px;
+  height: 10px;
+  font-size: 0px;
+  background-image: url(../images/down.png);
+}