reponsive bug fix

edit: random bug fix
add : fenetre adhesion sans contenu juste interactivité
2026-08-19 20:33:37 +02:00 · 2026-08-16 22:45:21 +02:00 · 2026-08-12 21:49:33 +02:00 · 2026-08-06 01:22:12 +02:00 · 2026-08-05 00:59:39 +02:00 · 2026-08-05 00:41:31 +02:00
67 changed files with 1231 additions and 14012 deletions
@@ -0,0 +1 @@
+status/index.html
@@ -0,0 +1,136 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Permanence du mardi soir</title>
+    <link rel="stylesheet" href="/style/typo.css">
+    <link rel="stylesheet" href="/style/default.css">
+    <style data-import="no-import">
+        html{
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            top: 0;
+            left: 0;
+
+            background-color: var(--mardi-back-color);
+        }
+
+        body{
+            height: 100%;
+            max-width: 1000px;
+            background-color: var(--mardi-accent-color);
+            margin: 0;
+        }
+    </style>
+    <style>
+        :root{
+            --mardi-back-color: rgb(37, 1, 65);
+            --mardi-main-color: rgb(255, 74, 231);
+            --mardi-accent-color: rgb(0, 255, 21);
+        }
+
+        .afficheMardis{
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+            background-color: var(--mardi-main-color);
+
+               @container( width > 650px ){
+                    flex-direction: row;
+                }
+        }
+
+            
+
+                    #imgContainer{
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: flex-end;
+                        align-items: flex-start;
+
+                        width: 100%;
+                        max-height: 33vh;
+                        box-sizing: border-box;
+                        overflow: hidden;
+                        gap: 3.33px;
+                        padding-top: 3.33px;
+
+                        img{
+                            max-width: 34%;
+                            box-sizing: border-box;
+                        }
+                    }
+
+                    #textContainer{
+                        padding: 13.12px;
+                        color: var(--mardi-back-color);
+
+                        h4{
+                            font-family: 'karrik';
+                            text-transform: uppercase;
+                            font-size: 33px;
+                            margin-bottom: 3.33px;
+                        }
+
+                        p{
+                            font-family: 'velvelyne';
+                            font-family: 16.1px;
+                            margin-bottom: 7.77px;
+                        }
+
+                        .event-hours{
+                            margin-left: 44px;
+                            font-size: 22px;
+                            font-weight: bold;
+
+                                    span[property="location"]{
+                                        font-size: 16.1px;
+                                        margin-left: -22px;
+                                    }
+
+                        }
+                    }
+        }
+
+        @container( width < 650px ){
+                .afficheMardis{
+                    flex-direction: column;
+                }
+        }
+
+
+     
+    </style>
+</head>
+<body>
+    <article class="afficheMardis" property="event" typeof="Event">
+        <div id="imgContainer">
+            <img src="/affiches/mardis/IMG001.jpg" alt="une lampe d'atelier sur un grand plan de travail un peu désorganisé, quelques chaises un peu disparates, on distingue un empilement de caisses et cartons à l'arrière plan">
+            <img src="/affiches/mardis/IMG002.jpg" alt="un coin atelier bien équipé et éclairé, beaucoup d'outils, une échelle au bord du cadre, et  on aperçoit un espace avec un ordinateur sur une mezzanine, éclairé d'une lumière rouge vive">
+            <img src="/affiches/mardis/IMG333.jpg" alt="un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle">   
+        </div>
+        
+        <div id="textContainer" property="description">
+            <h4 property="name">Permanences du LOL</h1>
+
+                <p>Venez chiller avec nous, partager un thé ou une bière.</p>
+
+                <p>On échange technique et savoir-faire<br>sur tous les sujets : logiciel libre, hacking,<br> couture, bricole et bidouille en tout genre,<br> mais aussi sur nos projets personnels ou collectifs</p>
+            
+
+            <p class="event-hours">
+                <span property="eventSchedule" typeof="Schedule">
+                    <data property="byDay" content="Tuesday">Tous les mardis</data><br> à partir de&nbsp;<data property="startTime" content="17:00">17h</data><br>
+                </span>
+                <span property="eventSchedule" typeof="Schedule">
+                    <data property="byDay" content="Saturday">&emsp;Tous les samedis</data><br>&emsp;à partir de&nbsp;<data property="startTime" content="14:00">14h</data>
+                </span>
+                <br>
+                <span property="location" href="https://labolyon.fr/">au local du LOL &ensp; &rarr; 7 Place Chazette, 69001 Lyon</span>
+            </p>
+        </div>
+    </article>
+</body>
+</html>
@@ -5,15 +5,17 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg" href="../assets/favicon.svg" />
    <title>TEST EVENT</title>
-    <style>
+    <style data-import="no-import">
      /*=========================== INFROMATIONS AFFICHES :

-      la première balise style est filtrée
-            ici on place les eléments qui entre en conflit avec la page principale
+      le style 'no-import' est filtrée
+            ici on place les eléments qui entre en conflit avec 
+            la page principale

      les suivant sont inclus

-      IMPORTANT : il faut nommer le main avec un id unique pour éviter les conflit avec les reste du site
+      IMPORTANT : il faut nommer le <article> avec un id unique 
+                  pour éviter les conflit avec les reste du site

      ====================================================*/

@@ -42,8 +44,8 @@
    </style>
 </head>
 <body>
-    <main id="testAffiche">
+    <article id="testAffiche">
        <p>test affiche !</p>
-    </main>
+    </article>
 </body>
 </html>
@@ -8,10 +8,10 @@
    <link rel="stylesheet" href="../style/animation.css">
    <link rel="stylesheet" href="/style/typo.css">
    <title>TEST EVENT 333</title>
-    <style>
+    <style data-import="no-import">
      /*=========================== INFROMATIONS AFFICHES :

-      la première balise style est filtrée
+      la balise style data-import="no-import" est filtrée
            ici on place les eléments qui entre en conflit avec la page principale

      les suivant sont inclus
@@ -45,8 +45,8 @@
    </style>
 </head>
 <body>
-    <main id="testAffiche333">
+    <article id="testAffiche333">
        <p>test affiche 333 !</p>
-    </main>
+    </article>
 </body>
 </html>
@@ -1,51 +0,0 @@
-.affiche-algorave {
-    grid-row: span 2;
-    padding: 0;
-    font-family: monospace;
-
-    img {
-        display: block;
-        width: 100%;
-    }
-
-    &:hover .description,
-    &:active .description {
-        opacity: 1;
-    }
-
-    .description {
-        opacity: 0;
-
-        padding: 10px;
-        
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: stretch;
-
-        background: rgba(0, 0, 0, 0.9);
-
-        ul {
-            padding: 0;
-            list-style-type: none;
-            text-align: justify;
-
-            flex: 1;
-            line-height: 2;
-        }
-
-        ul li {
-            display: inline
-        }
-
-        ul li:not(:last-child)::after {
-            content: ", ";
-        }
-    }
-}
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Le LOL aux JDLL 2024</title>
-</head>
-<body>
-    <h1>Le LOL sera aux <a href="https://jdll.org/">JDLL 2024</a> !</h1>
-
-    <p>C'est le 25 et le 26 mai à l'<a href="https://www.openstreetmap.org/?mlat=45.73257&mlon=4.83185#map=19/45.73257/4.83185" target="_blank">ENS</a> ! Le LOL sera présent pendant tout l'événement pour se rencontrer, discuter et hacker ensemble. En plus de ça, nous allons proposer un temps d'expression libre sur le web.</p>
-
-    <p>Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.<br/>
-    Il n'y a aucun pré-requis, si ce n'est savoir utiliser un clavier.</p>
-
-    <p>Venez nous rencontrer, hacker ou bien discuter sur le stand.</p>
-</body>
-</html>
@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="4.6079388mm"
-   height="3.1703224mm"
-   viewBox="0 0 4.6079388 3.1703224"
-   version="1.1"
-   id="svg5"
-   xml:space="preserve"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs2"><linearGradient
-       id="linearGradient22086"><stop
-         style="stop-color:#ffffff;stop-opacity:1;"
-         offset="0"
-         id="stop22082" /><stop
-         style="stop-color:#d4d4d4;stop-opacity:1;"
-         offset="1"
-         id="stop22084" /></linearGradient><linearGradient
-       xlink:href="#linearGradient22086"
-       id="linearGradient22088"
-       x1="24.94607"
-       y1="37.351017"
-       x2="25.431881"
-       y2="37.910633"
-       gradientUnits="userSpaceOnUse" /><linearGradient
-       xlink:href="#linearGradient22086"
-       id="linearGradient22096"
-       x1="27.680107"
-       y1="37.517262"
-       x2="28.045597"
-       y2="37.891655"
-       gradientUnits="userSpaceOnUse" /></defs><g
-     id="layer4"
-     transform="translate(-24.106776,-36.438155)"><g
-       id="g18540"
-       style="display:inline;fill:#bdbdbd;fill-opacity:1"><path
-         style="fill:url(#linearGradient22088);fill-opacity:1;stroke:#07077d;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 24.297671,37.95924 1.296798,-1.216447 0.0019,0.646007 1.376938,0.0036 -0.01322,1.089295 -1.296188,-0.01308 -0.0089,0.827227 z"
-         id="path14411" /><circle
-         style="opacity:1;fill:url(#linearGradient22096);fill-opacity:1;stroke:#07077d;stroke-width:0.210988;stroke-linejoin:round;stroke-miterlimit:10.5;stroke-opacity:1;paint-order:markers fill stroke"
-         id="path14465"
-         cx="28.041388"
-         cy="37.955338"
-         r="0.56783295" /></g></g></svg>
@@ -1,148 +0,0 @@
-.affiche-jdll2024 {
-    border-top-color: #fafaf5ff;
-    border-left-color: #fafaf5ff;
-    border-bottom-color: #868381ff;
-    border-right-color: #868381ff;
-    border-style: solid;
-    border-width: 4px;
-    background-color: #d3cfc9ff;
-    padding: 0;
-    color: black;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-items: stretch;
-    padding-bottom: 4px;
-}
-
-.affiche-jdll2024 iframe {
-    flex: 1;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-}
-
-.affiche-jdll2024 button {
-    border-top-color: #fafaf5ff;
-    border-left-color: #fafaf5ff;
-    border-bottom-color: #868381ff;
-    border-right-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-    background-color: #d3cfc9ff;
-}
-
-.affiche-jdll2024 header {
-    height: 25px;
-
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-
-    background: linear-gradient(to right, #112160ff, #a6c6f2ff);
-    padding: 2px 4px;
-    box-sizing: border-box;
-
-    column-gap: 4px;
-
-    border-bottom: solid 2px #d3cfc9ff;
-}
-
-.affiche-jdll2024 > :not(header) {
-    margin-left: 4px;
-    margin-right: 4px;
-}
-
-.affiche-jdll2024 header h1 {
-    flex: 1;
-    color: white;
-    margin: 0;
-    font-size: 1rem;
-    font-family: sans-serif;
-}
-
-.affiche-jdll2024 header > img {
-    height: 80%;
-}
-
-.affiche-jdll2024 header > button {
-    height: 100%;
-    display: block;
-    padding: 2px;
-}
-
-.affiche-jdll2024 button img {
-    height: 100%;
-    display: block;
-    box-sizing: border-box;
-}
-
-.affiche-jdll2024 nav {
-    padding: 2px;
-
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: row;
-
-    border-bottom: groove 2px #fafaf5ff;
-}
-
-.affiche-jdll2024 nav:first-of-type {
-    height: 40px;
-}
-
-.affiche-jdll2024 nav button {
-    height: 100%;
-    font-size: 0.6rem;
-    width: 50px;
-
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-}
-
-.affiche-jdll2024 nav button img {
-    height: 15px;
-}
-
-.affiche-jdll2024 nav hr {
-    flex: 1;
-    border: none;
-}
-
-.affiche-jdll2024 nav > img {
-    height: 100%;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 1px;
-}
-
-.affiche-jdll2024 nav input {
-    flex: 1;
-    border-bottom-color: #fafaf5ff;
-    border-right-color: #fafaf5ff;
-    border-top-color: #868381ff;
-    border-left-color: #868381ff;
-    border-style: solid;
-    border-width: 2px;
-    font-size: 0.7rem;
-}
-
-.affiche-jdll2024 nav label {
-    font-size: 0.7rem;
-    margin-right: 1ex;
-}
-
-.affiche-jdll2024 nav:last-of-type {
-    border-bottom: none;
-}
@@ -1,35 +0,0 @@
-@font-face {
-    font-family: "Arvo";
-    src: url("./Arvo-Bold.ttf");
-    font-weight: bold;
-}
-
-.affiche-perm {
-    background: black url("./perm-bg.jpg");
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    text-align: center;
-
-    padding-left: 25px;
-    padding-right: 25px;
-
-    font-size: 0.9rem;
-    line-height: 1.5;
-}
-
-.affiche-perm h1 {
-    font-size: 1.8em;
-    margin-top: 50px;
-    font-weight: normal;
-    font-family: "Arvo", sans-serif;
-}
-
-.affiche-perm .event-hours {
-    font-weight: bold;
-    text-align: center;
-    margin-top: 25px;
-    margin-bottom: 25px;
-    font-size: 1.2em;
-    font-family: "Arvo";
-}
@@ -1,125 +0,0 @@
-<!doctype html>
-<html lang="fr" data-theme="closed">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
-    <link rel="stylesheet" href="./style.old.css">
-    <title>L(. O.)L</title>
-  </head>
-  <body>
-    <!--<video autoplay muted loop src="./assets/video/background.webm" id="anim"></video>-->
-    <video autoplay muted loop src="./assets/video/close.webm" id="texture"></video>
-    <div id="mainContainer">
-      <div class="uiStyle" id="topBar">
-        <div class="left">
-          <img src="./assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
-          <p>L<strong>. ⚧. </strong>L<strong>. </strong></p>
-        </div>
-        <div class="right">
-          <a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
-          <a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
-          <a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
-          <a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
-          <a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
-        </div>
-        <button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
-          <svg class="icon" viewBox="0 0 53.73 53.59">
-            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="mainInfo">
-        <div class="uiStyle" id="title">
-          <p>
-            Hackerspace queer
-          </p>
-          <p id="desc">
-              Lieu de réappropriation, <br>
-              réparation & recyclage <br>
-              des objets techniques <br>
-              & technologiques
-          </p>
-        </div>
-        <div id="address">
-          <p>
-            7 place Chazette
-            <br>
-            69001 Lyon
-            <br> <br>
-            45° 46' 23.698" N
-            <br>
-            4° 50' 14.052" E
-          </p>
-          <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
-            <img src="./assets/logo_hackerspaces_monde.png">
-          </a>
-        </div>
-        <div class="uiStyle" id="openingHours">
-          <p>
-            Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
-            &ensp; &rarr; nocturne : &ensp;<br>
-            Ven. &emsp; <strong>21h &rarr; 5h</strong>
-          </p>
-        </div>
-        <div id="planContainer">
-          <img src="./assets/plan.svg" id="plan">
-          <svg id="fleche" viewBox="0 0 4215.93 2604.36">
-            <g>
-              <path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
-              <g>
-                <path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
-                <path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
-                <path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-              </g>
-            </g>
-            <rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
-          </svg>
-        </div>
-        <div class="uiStyle" id="lolOpener">
-          <p id="desc">Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :</p>
-          <div class="lolStatus">
-            <p id="closedStatus">FERMÉ...</p>
-          </div>
-        </div>
-      </div>
-      <div id="aboutSection">
-        <div class="uiStyle" id="aboutText">
-          <p>
-            Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
-            qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
-    				Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes.
-          </p>
-  				<p>
-            Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
-    				Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc.
-            Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles il y'a une place pour toi !
-          </p>
-    			<p>
-            Nous revendiquons l'ouverture du code et des techniques,
-    				le partage des connaissances et l'autogestion,
-            l'anti-capitalisme et l'anti-fascisme. <br><br>
-            Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
-            Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
-          </p>
-        </div>
-        <div id="eventSection">
-          <div class="uiStyle" id="title">
-            évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
@@ -1,128 +0,0 @@
-<!doctype html>
-<html lang="fr" data-theme="open">
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="./assets/favicon_open.svg" />
-    <link rel="stylesheet" href="./style.old.css">
-    <script src="./js/components/svg.js"></script>
-    <title>L(. O.)L</title>
-  </head>
-  <body>
-    <video autoplay muted loop src="./assets/video/background.webm" id="anim"></video>
-    <video autoplay muted loop src="./assets/video/open.webm" id="texture"></video>
-    <div id="mainContainer">
-      <div class="uiStyle" id="topBar">
-        <div class="left">
-          <img src="./assets/logo/logo-contreforme.svg" class="icon" id="mainLogo">
-          <p>L<strong>. ⚧. </strong>L<strong>. </strong></p>
-        </div>
-        <div class="right">
-          <a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a>
-          <a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a>
-          <a href="https://matrix.to/#/#general:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a>
-          <a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a>
-          <a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions" name="diff" class="textBtnStyle" target="_blank">Diffusion</a>
-        </div>
-        <button type="button" name="menu" class="iconBtnStyle" id="menuBtn">
-          <svg class="icon" viewBox="0 0 53.73 53.59">
-            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="mainInfo">
-        <div class="uiStyle" id="title">
-          <p>
-            Hackerspace queer
-          </p>
-          <p id="desc">
-              Lieu de réappropriation, <br>
-              réparation & recyclage <br>
-              des objets techniques <br>
-              & technologiques
-          </p>
-        </div>
-        <div id="address">
-          <p>
-            7 place Chazette
-            <br>
-            69001 Lyon
-            <br> <br>
-            45° 46' 23.698" N
-            <br>
-            4° 50' 14.052" E
-          </p>
-          <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
-            <img src="./assets/logo_hackerspaces_monde.png">
-          </a>
-        </div>
-        <div class="uiStyle" id="openingHours">
-          <p>
-            Dim. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Lun. &emsp; <strong>15h &rarr; 23h</strong> <br>
-            Mar. &emsp; <strong>15h &rarr; 23h</strong> <br><br>
-            &ensp; &rarr; nocturne : &ensp;<br>
-            Ven. &emsp; <strong>21h &rarr; 5h</strong>
-          </p>
-        </div>
-        <div id="planContainer">
-          <img src="./assets/plan.svg" id="plan">
-          <lol-svg>
-            <svg id="fleche" viewBox="0 0 4215.93 2604.36">
-            <g>
-              <path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
-              <g>
-                <path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
-                <path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
-                <path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
-                <path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
-                <path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-                <path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
-                <path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
-              </g>
-            </g>
-            <rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
-          </svg>
-          </lol-svg>
-        </div>
-        <div class="uiStyle" id="lolOpener">
-          <p id="desc">&uarr; &uarr; &uarr; Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte</p>
-          <div class="lolStatus">
-            <p id="openStatus">Ouvert !</p>
-          </div>
-        </div>
-      </div>
-      <div id="aboutSection">
-        <div class="uiStyle" id="aboutText">
-          <p>
-            Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
-            qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
-    				Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes.
-          </p>
-  				<p>
-            Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
-    				Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc.
-            Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles il y'a une place pour toi !
-          </p>
-    			<p>
-            Nous revendiquons l'ouverture du code et des techniques,
-    				le partage des connaissances et l'autogestion,
-            l'anti-capitalisme et l'anti-fascisme. <br><br>
-            Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
-            Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
-          </p>
-        </div>
-        <div id="eventSection">
-          <div class="uiStyle" id="title">
-            évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
+  <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
+</svg>
@@ -10,6 +10,8 @@
    <link rel="stylesheet" href="style/main.css">

    <link rel="stylesheet" href="style/responsive.css">
+
+    <link rel="stylesheet" href="style/reduced.css">
      <!-- TEST CCS OUVERTURE
        <link rel="stylesheet" href="status/openStyle.css">
      -->
@@ -22,7 +24,6 @@
  <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
 </head>
 <body>
-
    <header>
        <h1>
            <img id="logo" src="./assets/logo/logo-forme.svg" alt="">
@@ -42,6 +43,39 @@

    <main>
      <section id="homeContent">
+
+                <!-- MESSAGE DE BIENVENUE -->
+                    <aside>
+
+                      <button type="button" name="msgBtn" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg">
+                        <svg class="icon" viewBox="0 0 40.19 38.9">
+                          <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
+                        </svg>
+                      </button>
+
+                      <div id="msgWindow" popover="auto">
+                        <dialog class="floatingWindow">
+                          <div class="title">
+                            <h4>Bienvenue !</h4>
+                            <button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide">
+                              <svg viewBox="0 0 53.73 53.59" class="icon">
+                                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+                              </svg>
+                            </button>
+                          </div>
+
+                          <p>
+                            hellooo, <br>
+                            bienvenue sur le site du LOL ^^<br><br>
+                            en ce moment on cherche du monde pour nous aider à faire fonctionner le lieu, le faire évoluer et le péreniser.<br><br>
+                            si jamais ça t'intéresse<br><strong>contacte nous sur Matrix, <br>
+                            ou passe nous voir au local </strong>directement, quand il est ouvert !<br>
+                          </p>
+                        </dialog>
+                      </div>
+
+                    </aside>
+
          <section id="titleSection" class="solidBox">
              <h2>
                  Hackerspace queer
@@ -58,20 +92,18 @@
            <h3>Horaires d'ouverture</h3>
            <ol>
                <li>
-                    Dim. <strong>15h &rarr; 23h</strong>
+                    Mar. <strong>17h &rarr; 23h</strong>
                </li>
                <li>
-                    Lun. <strong>15h &rarr; 23h</strong>
-                </li>
-                <li>
-                    Mar. <strong>15h &rarr; 23h</strong>
+                    Sam. <strong>14h &rarr; 20h</strong>
                </li>
            </ol>
-
+            <!-- pour plus tard 
            <h3>Nocturne</h3>
            <ol>
                <li>Ven. <strong>21h &rarr; 5h</strong></li>
            </ol>
+            -->
          </section>

          <address class="transparentBox">
@@ -113,6 +145,27 @@
                <img src="./assets/logo_hackerspaces_monde.png">
            </a>
          </div>
+
+          <div id="adhesionSection">
+            <button class="textBtnStyle" popovertarget="addUserWindow" popoveraction="show">Comment adhérer ?</button>
+            <div id="addUserWindow" popover="auto">
+                        <dialog class="floatingWindow">
+                          <div class="title">
+                            <h4>Bienvenue !</h4>
+                            <button class="iconBtnStyle" popovertarget="addUserWindow" popoveraction="hide">
+                              <svg viewBox="0 0 53.73 53.59" class="icon">
+                                <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+                              </svg>
+                            </button>
+                          </div>
+
+                          <p>
+                            test adhésion
+                          </p>
+                        </dialog>
+              </div>
+          </div>
+
      </section>

      <section id="statuSection" class="solidBox">
@@ -150,9 +203,9 @@
        <section id="eventSection" class="transparentBox">
  			       <h3>Événements <small>à venir</small></h3>
                <article class="solidBox">
-                 <h4>Test évènement 333</h4>
-                 <p class="date">13/12</p>
-                 <a href="./affiches/test333/" class="iconBtnStyle" target="_blank">
+                  <h4>Permanences du LOL</h4>
+                  <p class="date">↻ Mardi & Samedi</p>
+                  <a href="/affiches/mardis/" class="iconBtnStyle" target="_blank">
                    <svg viewBox="0 0 53.73 53.59" class="icon">
                      <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
                    </svg>
@@ -160,25 +213,13 @@
                </article>
            </section>
      </section>
-      <video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
-      <video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
-      <video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
-      <canvas></canvas>
+      <noscript>
+        <video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop></video>
+      </noscript>
+      <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
+      <canvas class="cute-texture"></canvas>
    </main>
-
-    <section class="floatingWindow" id="posterWindow">
-      <div class="posterTitle">
-        <h4>test</h4>
-        <button type="button" name="close" class="iconBtnStyle" id="posterCloseBtn">
-          <svg viewBox="0 0 53.73 53.59" class="icon">
-            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-          </svg>
-        </button>
-      </div>
-      <article id="posterContainer"></article>
-    </section>
    <!-- SCRIPT PRINCIPAL -->
        <script type="module" src="./js/main.js"></script>
-
 </body>
 </html>
@@ -1,87 +1,348 @@
-const target = document.querySelector('canvas');
+const DEFAULT_VERTEX_SHADER = `
+  attribute float aVertexIndex;
+  varying highp vec2 vTextureCoord;

-const ctx = target.getContext('2d');
+ 	// This vertex shader produces the following, when drawn using indices 0..3:
+	//
+	//  1 |  0-----x.....2
+	//  0 |  |  s  |  . ´
+	// -1 |  x_____x´
+	// -2 |  :  .´
+	// -3 |  1´
+	//    +---------------
+	//      -1  0  1  2  3
+	//
+	// The axes are clip-space x and y. The region marked s is the visible region.
+	// The digits in the corners of the right-angled triangle are the vertex
+	// indices.
+	//
+	// The top-left has UV 0,0, the bottom-left has 0,2, and the top-right has 2,0.
+	// This means that the UV gets interpolated to 1,1 at the bottom-right corner
+	// of the clip-space rectangle that is at 1,-1 in clip space.

-export let lolState = false;
-
-let scale = 0.7;
-
-function analogLikeNoise(){
-  let tH = target.height;
-  let tW = target.width;
-  //console.log('window dimensions :', tH, tW)
-  const img = ctx.createImageData(tW, tH);
-  let offset = 0;
-  let index = 0;
-  let brightness = 0;
-
-  for(let x = 0; x<tW; x++){
-    const sx = x * scale + offset
-    for(let y = 0; y<tH; y++){
-      let lum = Math.random()*161
-
-      //img.data[index++] = lum*150/255;
-      index++
-      img.data[index++] = lum;
-      img.data[index++] = lum;
-      img.data[index++] = 255;
+	void main() {
+	    vec2 uv = vec2(floor(aVertexIndex / 2.0), floor(mod(aVertexIndex, 2.0))) * 2.0;
+	    gl_Position = vec4(uv * vec2(2.0, -2.0) + vec2(-1.0, 1.0), 0.0, 1.0);
+      vTextureCoord = uv;
 	}
-    }
-  ctx.putImageData(img, 0, 0);
+`

-  offset ++;
-  if(offset>1024){
-    offset = 0;
+const FRAGMENT_SHADER_UTILITIES = `
+  highp float noise1(highp vec2 co){
+      return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
+  }
+
+  // Color spaces from https://github.com/tobspr/GLSL-Color-Spaces/blob/master/ColorSpaces.inc.glsl
+
+  const highp float HCV_EPSILON = 1e-10;
+  const highp float HSL_EPSILON = 1e-10;
+
+  highp vec3 hue_to_rgb(highp float hue)
+  {
+      highp float R = abs(hue * 6.0 - 3.0) - 1.0;
+      highp float G = 2.0 - abs(hue * 6.0 - 2.0);
+      highp float B = 2.0 - abs(hue * 6.0 - 4.0);
+      return clamp(vec3(R,G,B), vec3(0), vec3(1));
+  }
+
+  // Converts from HSL to linear RGB
+  highp vec3 hsl_to_rgb(highp vec3 hsl)
+  {
+      highp vec3 rgb = hue_to_rgb(hsl.x);
+      highp float C = (1.0 - abs(2.0 * hsl.z - 1.0)) * hsl.y;
+      return (rgb - 0.5) * C + hsl.z;
+  }
+
+  // Converts a value from linear RGB to HCV (Hue, Chroma, Value)
+  highp vec3 rgb_to_hcv(highp vec3 rgb)
+  {
+      // Based on work by Sam Hocevar and Emil Persson
+      highp vec4 P = (rgb.g < rgb.b) ? vec4(rgb.bg, -1.0, 2.0/3.0) : vec4(rgb.gb, 0.0, -1.0/3.0);
+      highp vec4 Q = (rgb.r < P.x) ? vec4(P.xyw, rgb.r) : vec4(rgb.r, P.yzx);
+      highp float C = Q.x - min(Q.w, Q.y);
+      highp float H = abs((Q.w - Q.y) / (6.0 * C + HCV_EPSILON) + Q.z);
+      return vec3(H, C, Q.x);
+  }
+
+  // Converts from linear rgb to HSL
+  highp vec3 rgb_to_hsl(highp vec3 rgb)
+  {
+      highp vec3 HCV = rgb_to_hcv(rgb);
+      highp float L = HCV.z - HCV.y * 0.5;
+      highp float S = HCV.y / (1.0 - abs(L * 2.0 - 1.0) + HSL_EPSILON);
+      return vec3(HCV.x, S, L);
+  }
+
+  highp vec4 hue_rotate(highp vec4 rgb_input, highp float amount) {
+    highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
+    hsl.x = mod(hsl.x+amount,1.0);
+    return vec4(hsl_to_rgb(hsl), rgb_input.w);
+  }
+
+  highp vec4 grayscale(highp vec4 rgb_input, highp float amount) {
+    highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
+    hsl.y = 1.0 - amount;
+    return vec4(hsl_to_rgb(hsl), rgb_input.w);
+  }
+`
+
+const FRAGMENT_SHADER_UTILITIES_N_LINES = FRAGMENT_SHADER_UTILITIES.split(/\n/g).length
+
+const DEFAULT_FRAGMENT_SHADER = `
+  // Some random values computed for each frame
+  uniform highp vec4 uRandom;
+  // Size (in logical pixel) of current CuteTexture canvas
+  uniform lowp vec2 uCanvasSize;
+  // Number of seconds since canvas was initialized
+  uniform lowp float uTime;
+  // Current frame of first video with [data-cute-texture-video] attribute
+  uniform sampler2D uVideo;
+  // Size (in pixels) of current video frame in uVideo
+  uniform lowp vec2 uVideoSize;
+  // Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
+  varying highp vec2 vTextureCoord;
+
+  void main() {
+    gl_FragColor = vec4(vTextureCoord.x, vTextureCoord.y, 0.0, 1.0);
+  }
+`
+
+/**
+ * Initialise un canvas d'arrière plan "CuteTexture" avec les options données
+ */
+export function initCuteTexture(options){
+  let shaderSourceOption = options?.shaderSource;
+
+  /** @type {HTMLCanvasElement} */
+  const targetCanvas = document.querySelector("canvas[data-cute-texture]") || document.querySelector("canvas.cute-texture") || document.querySelector("canvas");
+  if(!targetCanvas)
+    throw new Error(`Aucun élément <canvas> trouvé sur la page`)
+
+  {
+    let computedStyle = getComputedStyle(targetCanvas)
+    let elementWidth = parseFloat(computedStyle.width)
+    let elementHeight = parseFloat(computedStyle.height)
+    targetCanvas.width = elementWidth
+    targetCanvas.height = elementHeight
+  }
+
+  const ctx = targetCanvas.getContext("webgl");
+  if(ctx == null)
+    throw new Error("WebGL n'ext pas supporté sur votre machine")
+
+  let mainShader = initMainShader(ctx, {
+    shaderSource: shaderSourceOption
+  })
+  console.log("Shader CuteTexture initialisé", mainShader)
+  
+  const initTime = Date.now()
+
+  function startRender(){
+    renderCuteTexture(targetCanvas, mainShader, initTime)
+    requestAnimationFrame(startRender)
+  }
+
+  startRender()
+
+  return {
+    target: targetCanvas,
+    initTime,
+    resize: function(width, height) {
+      targetCanvas.width = width
+      targetCanvas.height = height
+    }
  }
 }

-let time = 0
+/**
+ * @param {WebGLRenderingContext} ctx 
+ */
+function initMainShader(ctx, options){
+  let fragmentShaderCode = options?.shaderSource;

-function scanlines(){
-  time += 0.05;
-  let tH = target.height;
-  let tW = target.width;
-  //console.log('window dimensions :', tH, tW)
-  const img = ctx.createImageData(tW, tH);
-  let index = 0;
+  const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
+  ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
+  ctx.compileShader(vertexShader)

-  for(let y = 0; y<tH; y++){
-    for(let x = 0; x<tW; x++){
-      let lum = (Math.sin(y*2 - time*3.1415) * 44) + 161;
-
-      //img.data[index++] = lum;
-      index++;
-      img.data[index++] = lum;
-      //img.data[index++] = lum + Math.random()*32;
-      index++
-      img.data[index++] = 255;
-      }
-    }
-  ctx.putImageData(img, 0, 0);
-}
-
-export function scanlinesAnimation(){
-    scanlines();
-    requestAnimationFrame(scanlinesAnimation);
-}
-
-export function noiseAnimation(){
-    analogLikeNoise();
-    requestAnimationFrame(noiseAnimation);
-}
-
-
-export function loadCanvas(){
-  let textureVideo = document.querySelectorAll('main > #texture');
-
- for (let video of textureVideo){
-   video.style.visibility = 'collapse';
+  if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) {
+    throw new Error(`Le vertex shader n'a pas pu être compilé: ${ctx.getShaderInfoLog(vertexShader)}`)
+    ctx.deleteShader(vertexShader)
+    return null
  }

- let textureCanvas = document.querySelector('main > canvas');
- textureCanvas.style.visibility = 'visible';
+  if(!fragmentShaderCode){
+    fragmentShaderCode = getDocumentShaderSource(document);
+  }

- //console.log(textureCanvas);
+  if(!fragmentShaderCode){
+    fragmentShaderCode = DEFAULT_FRAGMENT_SHADER
+  }

- //console.log(textureVideo)
+  const fragmentShader = ctx.createShader(ctx.FRAGMENT_SHADER)
+  ctx.shaderSource(fragmentShader, FRAGMENT_SHADER_UTILITIES+fragmentShaderCode)
+  ctx.compileShader(fragmentShader)
+
+  if (!ctx.getShaderParameter(fragmentShader, ctx.COMPILE_STATUS)) {
+    let error = ctx.getShaderInfoLog(fragmentShader)
+    
+    let errorLine = error.match(/\d+:(\d+):/)
+    if(errorLine) {
+      let lineNum = parseInt(errorLine[1])
+      let lineNumeWithoutUtils = lineNum-FRAGMENT_SHADER_UTILITIES_N_LINES;
+      if(lineNumeWithoutUtils >= 0){
+        error = `Ligne ${lineNumeWithoutUtils}: ${error}`
+      }
+    }
+
+    ctx.deleteShader(fragmentShader)
+    throw new Error(`Le fragment shader n'a pas pu être compilé: ${error}`)
+  }
+
+  const shaderProgram = ctx.createProgram()
+  ctx.attachShader(shaderProgram, vertexShader)
+  ctx.attachShader(shaderProgram, fragmentShader)
+  ctx.linkProgram(shaderProgram)
+
+  if (!ctx.getProgramParameter(shaderProgram, ctx.LINK_STATUS)) {
+    throw new Error(`Le shader n'a pas pu être linké: ${ctx.getProgramInfoLog(shaderProgram)}`)
+    ctx.deleteShader(vertexShader)
+    ctx.deleteShader(fragmentShader)
+    ctx.deleteProgram(shaderProgram)
+    return null
+  }
+
+  let videoElement, videoTexture = null;
+  if(ctx.getUniformLocation(shaderProgram, "uVideo") != null){
+    videoElement = document.querySelector("video[data-cute-texture-video]") || document.querySelector("video");
+    if(!videoElement){
+      console.warn("Aucune vidéo avec l'attribut [data-cute-texture-video] n'a été trouvé sur la page");
+    } else {
+      videoTexture = ctx.createTexture();
+      ctx.bindTexture(ctx.TEXTURE_2D, videoTexture)
+      ctx.texImage2D(
+        ctx.TEXTURE_2D,
+        0,
+        ctx.RGBA,
+        1, 1,
+        0,
+        ctx.RGBA,
+        ctx.UNSIGNED_BYTE,
+        new Uint8Array([0, 0, 0, 255])
+      )
+      ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
+      ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
+      ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
+    }
+  }
+
+  const vertexIndexBuffer = ctx.createBuffer()
+  ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexIndexBuffer)
+  ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([0, 1, 2]), ctx.STATIC_DRAW)
+
+  return {
+    program: shaderProgram,
+    vertexShader,
+    fragmentShader,
+    videoElement,
+    videoTexture,
+    aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"),
+    uRandom: ctx.getUniformLocation(shaderProgram, "uRandom"),
+    uCanvasSize: ctx.getUniformLocation(shaderProgram, "uCanvasSize"),
+    uTime: ctx.getUniformLocation(shaderProgram, "uTime"),
+    uVideo: ctx.getUniformLocation(shaderProgram, "uVideo"),
+    uVideoSize: ctx.getUniformLocation(shaderProgram, "uVideoSize"),
+    vertexIndexBuffer,
+  }
+}
+
+/**
+ * @param {HTMLCanvasElement} target 
+ * @param {*} mainShader 
+ */
+function renderCuteTexture(target, mainShader, initTime){
+  let ctx = target.getContext("webgl")
+
+  ctx.clearColor(0, 0, 0, 0)
+  ctx.clearDepth(1.0)
+  ctx.enable(ctx.DEPTH_TEST)
+  ctx.depthFunc(ctx.LEQUAL)
+
+  ctx.clear(ctx.COLOR_BUFFER_BIT)
+
+  ctx.bindBuffer(ctx.ARRAY_BUFFER, mainShader.vertexIndexBuffer)
+  ctx.vertexAttribPointer(
+    mainShader.aVertexIndex, // location
+    1, // pull out 1 value per iteration
+    ctx.FLOAT, // the data in the buffer is 32bit floats
+    false, // don't normalize
+    0, // how many bytes to get from one set of values to the next
+    0 // how many bytes inside the buffer to start from
+  )
+  ctx.enableVertexAttribArray(mainShader.aVertexIndex)
+
+  ctx.useProgram(mainShader.program)
+  if(mainShader.uRandom){
+    ctx.uniform4f(
+      mainShader.uRandom,
+      Math.random(),
+      Math.random(),
+      Math.random(),
+      Math.random()
+    )
+  }
+
+  if(mainShader.uCanvasSize){
+    ctx.uniform2f(
+      mainShader.uCanvasSize,
+      target.width,
+      target.height
+    )
+  }
+
+  if(mainShader.uTime){
+    ctx.uniform1f(
+      mainShader.uTime,
+      (Date.now() - initTime)/1000
+    )
+  }
+
+  if(mainShader.uVideo){
+    ctx.activeTexture(ctx.TEXTURE0);
+    ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
+    ctx.uniform1i(
+      mainShader.uVideo,
+      0
+    )
+  }
+
+  if(mainShader.uVideo && mainShader.videoElement && mainShader.videoTexture){
+    ctx.activeTexture(ctx.TEXTURE0);
+    ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
+    ctx.texImage2D(
+      ctx.TEXTURE_2D,
+      0,
+      ctx.RGBA,
+      ctx.RGBA,
+      ctx.UNSIGNED_BYTE,
+      mainShader.videoElement,
+    );
+    ctx.uniform1i(
+      mainShader.uVideo,
+      0
+    )
+  }
+
+  if(mainShader.uVideoSize && mainShader.videoElement) {
+    ctx.uniform2f(
+      mainShader.uVideoSize,
+      mainShader.videoElement.videoWidth,
+      mainShader.videoElement.videoHeight
+    )
+  }
+  
+  ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3);
+}
+
+export function getDocumentShaderSource(doc=document){
+  return doc.querySelector(`script[type="x-shader/glsl+fragment"]`)?.innerHTML
 }
@@ -1,5 +1,27 @@
 export async function loadEvents(){
-  let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');
+  let eventList = document.querySelectorAll('#eventSection > article');
+  //console.log("event list: ", eventList);
+  
+  for (let event of eventList){
+    let title = event.querySelector('h4');
+    let date = event.querySelector('p.date');
+    let posterLink = event.querySelector('a.iconBtnStyle').href;
+    let posterHTML = await getPoster(posterLink);
+
+    let poster = posterHTML.querySelector('body > article');
+    
+    let posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])')
+
+    console.log('entry data :', title, date, poster, posterStyle);
+
+    let selectedEntry = createEntry(title, date, poster, posterStyle)
+    
+    console.log('created new details :', selectedEntry);
+
+    event.replaceChildren(selectedEntry);
+  }
+
+  /* let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');

  //console.log("source buttons : ", btnList)

@@ -83,5 +105,36 @@ export async function loadEvents(){
        displayContainer.replaceChildren(content);
      })
    })
-  }
+  } */
+}
+
+async function getPoster(link){
+  let res = await fetch(link);
+  if (res.ok){
+      let html_text = await res.text()
+      let html = new DOMParser().parseFromString(html_text, "text/html");
+        return html
+    } else{
+      console.log('error 333');
+        return
+    }
+
+}
+
+function createEntry(title, date, html, style){
+  let newEntry = document.createElement('details');
+  let newSummary = document.createElement('summary');
+  newSummary.append(title, date);
+
+  newEntry.append(newSummary);
+
+  newEntry.append(html);
+
+  newEntry.name = "eventList"
+
+  for(let el of style){
+    document.head.append(el);
+  }
+   
+    return newEntry
 }
@@ -0,0 +1,34 @@
+export function makeItFloat(target){
+    let startTarget = target.querySelector('.title');
+
+    console.log('selected target :', startTarget);
+
+    let startX, startY;
+    let clicked = false;
+
+    startTarget.addEventListener('mousedown', (event) => {
+    startX = event.pageX;
+    startY = event.pageY;
+    clicked = true;
+    console.log('clicking...')
+    })
+
+    document.addEventListener('mousemove', (event) => {
+    if(clicked){
+        console.log('moving...')
+        let currentX = event.pageX;
+        let currentY = event.pageY;
+        let moveX = target.offsetLeft + currentX - startX;
+        target.style.left =  moveX + 'px';
+        let moveY = target.offsetTop + currentY - startY;
+        target.style.top = moveY + 'px';
+        startX = currentX;
+        startY = currentY;
+    }
+    });
+
+    document.addEventListener('mouseup', () => {
+    console.log('STOP !')
+    clicked = false;
+    })
+}
@@ -1,84 +1,27 @@
 import { loadEvents } from './events.js'
 import { loadStatus } from './status.js'
-import { scanlinesAnimation } from './cuteTexture.js'
-import { noiseAnimation } from './cuteTexture.js'
-import { loadCanvas } from './cuteTexture.js'
-
-
-
-
-
-// =================================== background texture
-loadCanvas();
-let backgroundVideo = document.querySelector('main > #background');
-
-let proxyTarget = {};
-let proxyHandler = {
-
-};
-export let statusProxy = new Proxy(proxyTarget, {
-  set(obj, prop, value){
-    if(prop === 'lolStatus'){
-      if (value){
-        backgroundVideo.style.visibility = 'visible';
-        scanlinesAnimation();
-          return true
-      } else {
-        backgroundVideo.style.visibility = 'collapse';
-        noiseAnimation();
-          return true
-      }
-    }
-  }
-})
-
-statusProxy.lolStatus = false;
-
-//console.log(proxyTarget.lolStatus);
-
+import { initCuteTexture } from './cuteTexture.js'
+import { makeItFloat } from './floating.js';

 // ======================================== events & statut d'ouverture
 loadEvents();
-loadStatus();
+loadStatus()
+  .then((status) => {
+    console.log("Status actuel du LOL", status);

-// ======================================== floating event window
+    let cuteTexture = initCuteTexture({
+      shaderSource: status.shaderSource
+    });

-let target = document.querySelector('#posterWindow');
+    cuteTexture.target.style.visibility = "visible"
+  });

-let startTarget = target.querySelector('.posterTitle');
-
-console.log('selected target :', startTarget);
-
-let startX, startY;
-let clicked = false;
-
-startTarget.addEventListener('mousedown', (event) => {
-  startX = event.pageX;
-  startY = event.pageY;
-  clicked = true;
-  console.log('clicking...')
-})
-
-document.addEventListener('mousemove', (event) => {
-  if(clicked){
-    console.log('moving...')
-    let currentX = event.pageX;
-    let currentY = event.pageY;
-    let moveX = target.offsetLeft + currentX - startX;
-    target.style.left =  moveX + 'px';
-    let moveY = target.offsetTop + currentY - startY;
-    target.style.top = moveY + 'px';
-    startX = currentX;
-    startY = currentY;
-  }
-});
-
-document.addEventListener('mouseup', () => {
-  console.log('STOP !')
-  clicked = false;
-})
+// ======================================== floating message window

+makeItFloat(document.querySelector('#msgWindow'));
+makeItFloat(document.querySelector('#addUserWindow'));

+/*
 //================================ tentative de gestion des écran tactiles
 startTarget.addEventListener('touchstart', (event) => {
  startX = event.pageX;
@@ -105,3 +48,4 @@ document.addEventListener('touchend', () => {
  console.log('STOP !')
  clicked = false;
 })
+*/
@@ -1,11 +1,13 @@
-import { statusProxy } from './main.js'
+import { getDocumentShaderSource } from './cuteTexture.js';

 export async function loadStatus(){
-  let res = await fetch('/status/index.ouvert.html');
+  let res = await fetch('/status/index.html');

  let html_text = await res.text()
  let html = new DOMParser().parseFromString(html_text, "text/html");
  
+  let shaderSource = getDocumentShaderSource(html);
+
  let target = document.querySelector('#statuSection');

  let hiddenBtn = target.querySelector('a');
@@ -15,13 +17,7 @@ export async function loadStatus(){
  let status = html.querySelector('#lolStatus');
  console.log('current status:', status.innerText);

-
-  if (status.innerText.includes('ouvert')){
-    statusProxy.lolStatus = true;
-  }else{
-    statusProxy.lolStatus = false;
-  }
-
+  let isOpen = status.innerText.includes('ouvert');

  let icon = html.querySelector('link[rel="icon"]');
  let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
@@ -31,4 +27,6 @@ export async function loadStatus(){
  document.head.append(style);

  target.appendChild(status);
+
+  return { open: isOpen, shaderSource };
 }
@@ -18,13 +18,76 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont

 > problème import css directement dans main.css

-* [ ] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche
+* [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche

-* [ ]  performance arrière plan avec un shader 
+* [x] auto scale affiche dans son conteneur
+> problème à gérer dans la conception des affiches 
+
+* [x] message de bienvenue !!!
+
+* [x] tester section event avec des vraies affiches !!!
+> problème de cohérence interface / contenu sur pc, le panneau event est très large et dois afficher des affiches format vertical donc très haut si rescale sur width ou très petit si rescale sur hauteur + si format aléatoire je sais pas comment scale
+
+* [x]  performance arrière plan avec un shader
 > OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg
           + video noir & blanc au dessus en mix blend difference, opacité 0.777
 > FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg

-* [ ] désactiver la video pour les personnes qui veulent pas d'effets visuels
+* [x] désactiver la video pour les personnes qui veulent pas d'effets visuels
+
+* [x] fond video en version dégradée + scale video un peu plus grand car bande noire en bas 
+
+* [x] réglages padding section statut
+
+* [ ] section adhésion et explication financement
+    (à discuter pour le contenu)
+
+# Démarrer un serveur de developpement
+
+```
+python3 -m http.server
+```
+
+Et ensuite, le site est disponible sur http://localhost:8000/
+
+## Tester sur son tel
+
+Il faut démarrer le serveur avec la commande suivante:
+
+```
+python3 -m http.server -b 0.0.0.0
+```
+
+Ensuite il faut obtenir l'adresse IP de son ordinateur
+```
+ip a
+```
+
+Dans notre cas c'est `10.0.0.165` (voir l'exemple ci-dessous).
+```
+1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
+    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
+    inet 127.0.0.1/8 scope host lo
+       valid_lft forever preferred_lft forever
+2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
+    link/ether c4:9d:ed:15:78:cc brd ff:ff:ff:ff:ff:ff
+    inet 10.0.0.165/24 brd 10.0.0.255 scope global dynamic noprefixroute mlan0
+       valid_lft 5204sec preferred_lft 5204sec
+```
+
+Sur son tel, on peut alors acceder a http://10.0.0.165:8000/.
+Si cela ne fonctionne pas, c'est peut être que le pare feu interdit la connexion depuis un autre ordinateur sur le port 8000.
+
+## Lien symbolique et ouverture => comment preview pour dev
+
+aller dans /status puis executer la commande en fonction du statut souhaité
+
+    ./set-status.sh opened 
+    
+> statut ouvert
+
+    ./set-status.sh closed
+    
+> statut fermé
+

-* [ ] réglages padding section statut 
@@ -4,13 +4,28 @@
 }

 /*======================= Page Statut LOL fermé ===*/
-#lolIsClosed{
+#lolIsClosed {
  position: relative;
  top: 0;
  left: 0;
+  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--main-color);
+
+  #closedContainer {
+    padding: 15px;
+    box-sizing: border-box;
+  }
+
+  .cute-texture {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
 }

 #closedContainer{
@@ -10,11 +10,49 @@
    <title>Le LOL est Fermé ...</title>
 </head>
 <body id="lolIsClosed">
+    <canvas data-cute-texture class="cute-texture"></canvas>
    <main id="closedContainer">
        <section>
          <p>Le LOL est actuellement</p>
          <h3 id="lolStatus">fermé ...</h3>
        </section>
    </main>
+    
+    <script type="x-shader/glsl+fragment">
+// Some random values computed for each frame
+uniform highp vec4 uRandom;
+// Size (in logical pixel) of current CuteTexture canvas
+uniform highp vec2 uCanvasSize;
+// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
+varying highp vec2 vTextureCoord;
+
+void main() {
+    highp float pixelSize = 50.0;
+    highp vec2 coords = floor((uCanvasSize.xy * vTextureCoord.xy) / pixelSize);
+    highp float lum = (noise1(uRandom.yz+coords) * 0.631372549);
+    lowp float opacity = 0.5;
+
+    highp vec4 baseColor = vec4(
+        0.0,
+        lum,
+        lum,
+        1.0
+    );
+
+    highp vec4 rotatedColor = hue_rotate(baseColor, 13.12);
+
+    gl_FragColor = vec4(
+        rotatedColor.x*opacity,
+        rotatedColor.y*opacity,
+        rotatedColor.z*opacity,
+        1.0
+    );
+}
+    </script>
+
+    <script type="module">
+        import {initCuteTexture} from "../js/cuteTexture.js"
+        initCuteTexture()
+    </script>
 </body>
 </html>
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="/assets/favicon_open.svg" />
-    <style>
-        :root {
-            --back-color: #00FF44;
-            --main-color: #000000;
-        }
-    </style>
-    <title>Le LOL est Ouvert</title>
-</head>
-<body>
-    <main>
-        <p id="statusText">Ouvert !</p>
-    </main>
-</body>
-</html>
@@ -11,11 +11,60 @@
    <title>Le LOL est Ouvert</title>
 </head>
 <body id="lolIsOpen">
+    <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
+    <canvas data-cute-texture class="cute-texture"></canvas>
    <main id="openContainer">
        <section>
          <p>Le LOL est actuellement</p>
          <h3 id="lolStatus">ouvert !</h3>
        </section>
    </main>
+    
+    <script type="x-shader/glsl+fragment">
+// Some random values computed for each frame
+uniform highp vec4 uRandom;
+// Size (in logical pixel) of current CuteTexture canvas
+uniform highp vec2 uCanvasSize;
+// Number of seconds since canvas was initialized
+uniform lowp float uTime;
+// Current frame of first video with [data-cute-texture-video] attribute
+uniform sampler2D uVideo;
+// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
+varying highp vec2 vTextureCoord;
+
+void main() {
+    highp float waveSize = 10.0;
+    highp vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize;
+    highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
+    lowp float opacity = 0.25;
+
+    gl_FragColor = vec4(
+        0.0,
+        lum,
+        0.0,
+        1.0
+    );
+
+    gl_FragColor = vec4(
+        gl_FragColor.rgb * opacity,
+        1.0
+    );
+
+    highp vec2 videoCoords = (vTextureCoord.xy / 1.5) + vec2(0, 0.25);
+    highp vec4 videoPix = clamp(( grayscale(texture2D(uVideo, videoCoords), 1.0) * 2.0 ), vec4(0), vec4(1));
+    videoPix *= 0.777;
+
+    gl_FragColor = abs( (videoPix*1.2) - gl_FragColor );
+    
+    gl_FragColor.xyz *= 0.9;
+    
+    gl_FragColor.a = 1.0;
+}
+    </script>
+
+    <script type="module">
+        import {initCuteTexture} from "../js/cuteTexture.js"
+        initCuteTexture()
+    </script>
 </body>
 </html>
@@ -29,13 +29,29 @@
 }

 /*======================= Page Statut LOL ouvert ===*/
-#lolIsOpen{
+
+#lolIsOpen {
  position: relative;
  top: 0;
  left: 0;
+  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--main-color);
+
+  #openContainer {
+    padding: 15px;
+    box-sizing: border-box;
+  }
+
+  .cute-texture, .cute-texture-video {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
 }

 #openContainer{
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+if [ "$#" = "0" ]; then
+    echo "Usage set-status.sh [new-status]"
+    echo ""
+    echo "[new-status] can be \"opened\" or \"closed\""
+    echo ""
+    exit 1
+fi
+
+#SPACE_JSON=/var/www/html/spaceapi/space.json
+
+if [ "$1" = "opened" ]; then
+    ln -sf "index.ouvert.html" "$(dirname $0)/index.html"
+    #jq "setpath([\"state\", \"open\"]; true) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
+    #mv -f $SPACE_JSON.new $SPACE_JSON
+fi
+
+if [ "$1" = "closed" ]; then
+    ln -sf "index.fermé.html" "$(dirname $0)/index.html"
+    #jq "setpath([\"state\", \"open\"]; false) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
+    #mv -f $SPACE_JSON.new $SPACE_JSON
+fi
@@ -24,6 +24,7 @@
 .textBtnStyle:hover{
  color: var(--back-color);
  background-color: var(--main-color);
+  border-color: var(--back-color);
 }

 .iconBtnStyle{
@@ -45,12 +46,24 @@
  height: 16.1px;
  width: auto;
  fill: currentColor;
+  pointer-events: none;
 }

 .iconBtnStyle:hover{
  color: var(--back-color);
  background-color: var(--main-color);
  border-color: var(--back-color);
+  animation: none;
+}
+
+@media(min-width: 1300px){
+  .textBtnStyle{
+    font-size: 19px;
+  }
+
+  .iconBtnStyle{
+    font-size: 19px;
+  }
 }

 .solidBox{
@@ -111,7 +124,7 @@
 }

 .floatingWindow{
-  position: fixed;
+  position: relative;
  z-index: 3333;

  width: auto;
@@ -131,7 +144,7 @@
  justify-content: flex-start;
  align-items: center;

-  .posterTitle{
+  .title{
    position: relative;
    top: 0;
    width: 100%;
@@ -150,8 +163,8 @@
    align-items: center;
    justify-content: space-between;

-    padding-left: 33px;
-    padding-right: 16.1px;
+    padding-left: 16.1px;
+    padding-right: 7.77px;

    box-sizing: border-box;
    cursor: move;
@@ -161,8 +174,13 @@
    }

    .iconBtnStyle{
-      width: 33px;
-      height: 33px;
+      width: 27px;
+      height: 27px;
+
+      .icon{
+        height: 13.12px;
+        width: auto;
+      }
    }

  }
@@ -26,7 +26,6 @@ p,h1,h2,h3,h4{
  pointer-events: none !important;
  padding: 0;
  margin: 0;
-  user-select: none;
 }

 ul,ol {
@@ -34,3 +33,7 @@ ul,ol {
  margin: 0;
  list-style-type: none;
 }
+
+dialog{
+  padding: 0;
+}
@@ -4,28 +4,30 @@
  --main-color: #000000;
 }

-/*================ ANIMATION ======================*/
-
-
-/*================ DESACT DEFAULT ======================*/
-
-
 /*================ BODY ======================*/
-html, body{
+html{
  margin: 0;
  padding: 0;
  scrollbar-color: var(--back-color) var(--main-color);
  background-color: var(--main-color);
-  min-height: 100vh;
+  height: 100%;
  width: 100%;
  overflow-x: hidden;
+  overflow-y: scroll;
  position: relative;
  z-index: -33;
 }

-/*================ CLASSES COMMUNES ======================*/
-
-
+body{
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+  overflow-y: hidden;
+  position: relative;
+  z-index: -33;
+  box-sizing: border-box;
+}
 /*================ STRUCTURE ======================*/

 header{
@@ -99,17 +101,29 @@ header{

 }

-video{
+noscript > video{
  height: 110%;
  width: auto;
  position: absolute;
  inset: 0;
-  z-index: -30;
+  z-index: -32;
 }

-.closedBackground{
-  opacity: .5;
-  mix-blend-mode: exclusion;
+.cute-texture-video{
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -33;
+}
+
+.cute-texture{
+  position: absolute;
+  width: 100%;
+  height: 110%;
+  top: 0; 
+  left: 0;
+  z-index: -33;
 }

 .openBackground{
@@ -131,6 +145,79 @@ main{
        grid-template-columns: 2.5fr 2fr 1fr;
        grid-template-rows: 1fr 1.5fr;

+              aside{
+                grid-row: 2;
+                grid-column: 2;
+                align-self: end;
+                justify-self: end;
+                color: var(--main-color);
+                position: relative;
+
+                z-index: 33;
+
+                margin-bottom: 13.12px;
+                margin-right: 13.12px;
+
+                      #openMsg{
+                        width: 33px;
+                        height: 33px;
+                        animation: float 1.61s infinite;
+                        box-sizing: border-box;
+
+                        border-radius: 13.12px;
+                      }
+
+                      #openMsg:hover{
+                        animation: none;
+                      }
+
+                      #msgWindow{
+                        border-style: none;
+                        background-color: transparent;
+                        position: fixed;
+                        top: 117px;
+                        left: 33px;
+                        animation: none;
+                        z-index: 1312;
+                        margin: 0;
+
+                              .floatingWindow{
+                                width: 277px;
+                                height: auto;
+                                margin-top: 33px;
+
+                                text-transform: none;
+                                font-size: 15px;
+                                font-family: 'velvelyne';
+                                font-weight: bold;
+                                padding-bottom: 13.12px;
+                                border-width: 3.33px;
+                                border-style: double solid solid;
+
+                                      p{
+                                        padding: 7.77px;
+                                        padding-right: 16.1px;
+
+                                              strong{
+                                                font-family: 'karrik';
+                                                font-weight: normal;
+                                                text-transform: uppercase;
+                                                font-size: 16.1px;
+                                              }
+                                      }
+                              }
+                      }
+
+                      #msgWindow::backdrop{
+                        background-color: var(--back-color);
+                        opacity: .333;
+                        width: 100vw;
+                        height: 100vh;
+                        box-sizing: border-box;
+                      }
+
+              }
+
              #titleSection{
                grid-column: 1;
                grid-row: 1;
@@ -165,7 +252,7 @@ main{

                      h3{
                        width: 100%;
-                        padding-bottom: 13.12px;
+                        margin-bottom: 16.1px;

                        font-family: 'karrik';
                        text-transform: uppercase;
@@ -198,7 +285,7 @@ main{
                        }

                        li{
-                          margin-bottom: 7.77px;
+                          margin-top: 16.1px;
                        }
                      }
              }
@@ -217,9 +304,14 @@ main{
                color: var(--back-color);
                justify-self: end;

+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+
                #planContainer{
                  width: 100%;
-                  height: 100%;
+                  height: max-content;
                  margin-left: 13.12px;
                  margin-top: 0;
                }
@@ -267,6 +359,70 @@ main{
                }

              }
+
+              #adhesionSection{
+                visibility: collapse;
+                grid-column: 1;
+                grid-row: 2;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: flex-start;
+
+                .textBtnStyle{
+                  position: relative;
+                  z-index: 33;
+                  width: 90%;
+                  height: 33px;
+                  font-size: 13.12px;
+                  margin-top: 13.12px;
+                }
+
+                #addUserWindow{
+                        border-style: none;
+                        background-color: transparent;
+                        position: fixed;
+                        top: 77px;
+                        left: 16.1px;
+                        animation: none;
+                        z-index: 1312;
+                        margin: 0;
+
+                              .floatingWindow{
+                                width: 333px;
+                                height: auto;
+                                margin-top: 33px;
+
+                                text-transform: none;
+                                font-size: 15px;
+                                font-family: 'velvelyne';
+                                font-weight: bold;
+                                padding-bottom: 13.12px;
+                                border-width: 3.33px;
+                                border-style: double solid solid;
+
+                                      p{
+                                        padding: 7.77px;
+                                        padding-right: 16.1px;
+
+                                              strong{
+                                                font-family: 'karrik';
+                                                font-weight: normal;
+                                                text-transform: uppercase;
+                                                font-size: 16.1px;
+                                              }
+                                      }
+                              }
+                      }
+
+                      #addUserWindow::backdrop{
+                        background-color: var(--back-color);
+                        opacity: .333;
+                        width: 100vw;
+                        height: 100vh;
+                        box-sizing: border-box;
+                      }
+              }
      }

      #statuSection{
@@ -286,7 +442,7 @@ main{
            #statusDesc{
              width: 77%;
              padding: 7.77px;
-              padding-right: 16.1px;
+              padding-right: 33px;
              font-size: 16.1px;
              line-height: 1.1em;

@@ -353,55 +509,86 @@ main{
                align-items: flex-start;
                gap: 0;
                padding-bottom: 16.1px;
+                padding-right: 16.1px;

                        h3{
-                          position: sticky;
+                          position: relative;
                          margin-bottom: 7.77px;
                        }

+
+                        article{
+                                h4{
+                                  padding: 16.1px;
+                                }
+
+                                a{
+                                  margin-right: 33px;
+                                }
+
+                                .date{
+                                  padding: 16.1px;
+                                }
+                        }
+
                        .solidBox{
                          width: 100%;
-                          height: 77px;
+                          height: auto;
                          display: flex;
                          flex-direction: row;
                          justify-content: space-between;
                          align-items: center;
-                          padding-left: 16.1px;
-                          padding-right: 33px;
+                          padding: 0;
+                          box-sizing: border-box;
+                        }
+
+                        .solidBox:has(details[open]){
+                          color: var(--back-color);
+                          background-color: var(--main-color);
+                          border-color: var(--back-color);
+                          border-radius: 16.1px;
+                          margin-top: 7.77px;
+                          overflow: hidden;
+                          margin-bottom: 7.77px;
+
+                          details{
+                            cursor: default;
+                          }
+
+                        }

                        .iconBtnStyle{
                          width: 33px;
                          height: 33px;
-                                }
-                        }
-              }
-      }
-}

-#posterWindow{
-  visibility: collapse;
-  top: 5vh;
-  left: 5vw;
-}
+                          .icon{
+                            transform: rotate(45deg);
+                          }
+                        }

-#posterContainer{
+                        details{
                          width: 100%;
                          height: 100%;
+                          cursor: copy;
+                          overflow: hidden;
+
+                                summary{
                                  display: flex;
-  flex-direction: column;
+                                  flex-direction: row;
                                  align-items: center;
-  justify-content: space-around;
-}
+                                  justify-content: space-between;
+                                  width: 100%;
+                                  box-sizing: border-box;
+                                  list-style-type: none;
+                                  padding: 16.1px;
+                                }

-canvas{
-  visibility: collapse;
-  height: 110%;
-  width: auto;
-  position: absolute;
-  inset: 0;
-  z-index: -32;
-
-  opacity: .5;
-  filter: hue-rotate(13.12deg);
-  mix-blend-mode: multiply;
+                                article{
+                                  width: 100%;
+                                  cursor: default;
+                                  text-transform: none;
+                                }
+                        }
+                }
+      }
 }
@@ -0,0 +1,12 @@
+@media (prefers-reduced-motion: reduce){
+    noscript > video,
+    .cute-texture,
+    .cute-texture-video{
+        visibility: collapse !important;
+        display: none !important;
+    }
+
+    main aside #openMsg{
+        animation: none !important;
+    }
+}
@@ -40,6 +40,18 @@
      grid-template-columns: 2fr 2fr 1fr;
      grid-template-rows: 0.7fr 2fr;

+          aside{
+            grid-column: 3;
+            margin-bottom: 33px;
+            margin-right: 33px;
+
+            #msgWindow{
+              left: unset;
+              right: 77px;
+              top: 161px;
+            }
+          }
+
          #titleSection{
            height: 110%;
                  h2{
@@ -80,6 +92,13 @@
            padding-top: 33px;
          }

+          #adhesionSection{
+            justify-content: flex-end;
+            margin-top: 0;
+            margin-bottom: 33px;
+            width: 77%;
+          }
+
      }
      #statuSection{
            .textBtnStyle{
@@ -90,6 +109,7 @@

            #statusDesc{
              font-size: 16.1px;
+              padding-left: 33px;
            }
      }

@@ -135,7 +155,40 @@

  main{
    #homeContent{
+          aside{
+            margin-bottom: 77px;
+            margin-right: 77px;

+            #msgWindow{
+              left: unset;
+              right: 33px;
+              top: 33vh;
+            }
+
+            #openMsg{
+              width: 44px;
+              height: 44px;
+            }
+
+            .icon{
+              height: 22px;
+              width: auto;
+            }
+
+            dialog{
+
+                .title{
+                  font-size: 22px;
+                  height: 50px;
+
+                  .iconBtnStyle{
+                    width: 36px;
+                    height: 36px;
+                    border-radius: 22px;
+                  }
+                }
+            }
+          }

          #titleSection{
            width: 90%;
@@ -151,6 +204,7 @@

                  ol{
                    font-size: 16.1px;
+                    padding-left: 16.1px;
                          strong{
                            font-size: 22px;
                          }
@@ -159,6 +213,7 @@

          address{
            font-size: 22px;
+            margin-top: 13.12px;
          }

          #planSection{
@@ -176,6 +231,17 @@
            }
          }

+          #adhesionSection{
+            width: 50%;
+            margin-left: 16.1px;
+            margin-bottom: 77px;
+
+            .textBtnStyle{
+              height: 44px;
+              font-size: 20px;
+            }
+          }
+
    }

    #statuSection{
@@ -188,7 +254,6 @@
              height: 77px;
              width: 50%;
              border-radius: 33px 0 0 33px;
-              margin-left: -88px;
            }

            .textBtnStyle{
Author	SHA1	Message	Date
vgaNAR6ta	415fb46c99	reponsive bug fix	2026-08-19 20:33:37 +02:00
vgaNAR6ta	cd766e3969	edit: random bug fix	2026-08-16 22:45:21 +02:00
vgaNAR6ta	2ed49a5fe1	add : fenetre adhesion sans contenu juste interactivité	2026-08-12 21:49:33 +02:00
vgaNAR6ta	f435cb36b8	ménage et affiche permanence	2026-08-06 01:22:12 +02:00
vgaNAR6ta	407eeef09e	edit: event mieux cadrés	2026-08-05 00:59:39 +02:00
vgaNAR6ta	198a0031f1	ménage	2026-08-05 00:41:31 +02:00
vgaNAR6ta	c223ab281c	edit: reduced motion mode	2026-08-04 23:05:28 +02:00
vgaNAR6ta	db59f2ae48	edit: pb de scroll et responsive msg bienvenue	2026-08-04 16:27:07 +02:00
vgaNAR6ta	e75f0443df	todo	2026-08-04 16:16:49 +02:00
vgaNAR6ta	af0b014581	add: message de bienvenue !!!	2026-08-04 05:55:01 +02:00
vgaNAR6ta	906c3a3ae2	section évènement v2 article avec lien vers affiche qui devient details avec import de l'affiche avec js	2026-08-03 02:39:52 +02:00
vgaNAR6ta	e6c2fbf4d3	todo cochée	2026-08-02 20:56:04 +02:00
vgaNAR6ta	c7c07beb76	Ajustement shader ouverture	2026-08-02 20:54:48 +02:00
epickiwi	dc2f0013b0	Ajout du shader d'ouverture sur la page d'accueil	2026-08-02 15:31:56 +02:00
epickiwi	36d9ac4230	Ajout de la vidéo	2026-08-02 15:31:56 +02:00
epickiwi	3e7c9475e5	Première version GPU des effets de fond	2026-08-02 15:31:55 +02:00
epickiwi	9f67c28bc0	Ajout du script du lien symbolique	2026-08-02 15:31:55 +02:00
epickiwi	0170db486c	Centrage du plan	2026-08-02 15:31:53 +02:00
epickiwi	94907c178e	Ajout d'instructions de dev	2026-08-02 15:31:11 +02:00