fix bug et meilleure perf import css status

ajout d'un WEBRING <3<3<3
bug css section about et padding adress
2026-09-09 01:14:33 +02:00 · 2026-09-05 21:40:11 +02:00 · 2026-09-05 18:57:35 +02:00 · 2026-09-05 17:59:08 +02:00 · 2026-09-05 17:53:40 +02:00 · 2026-09-02 23:38:01 +02:00
88 changed files with 2949 additions and 1125 deletions
@@ -0,0 +1 @@
+status/index.html
@@ -1,11 +1,50 @@
-La dérniere version est sur la branche V2
+# Le site internet du LOL: labolyon.fr

-Laboratoire Ouvert Lyonnais
-===========================
-Vous retrouverez la version en ligne du site du lol, il n'y a pas de bootstrap sur cette version.
-Il a été codé le plus simplement possible.

-TODO
-====
-Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.  
-Est-ce le git pourrait nous permettre de faire ça ?
+## 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é
@@ -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<br>&ensp; &rarr; 7 Place Chazette, 69001 Lyon</span>
+            </p>
+        </div>
+    </article>
+</body>
+</html>
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="94.468002"
+   height="94.468002"
+   viewBox="0 0 94.468002 94.468003"
+   sodipodi:docname="favicon.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="130.08"
+   inkscape:export-ydpi="130.08"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1341"
+     inkscape:window-height="927"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="4.8680853"
+     inkscape:cx="38.824299"
+     inkscape:cy="53.306379"
+     inkscape:current-layer="svg2"
+     inkscape:window-x="56"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:#ffff4d;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4542"
+     width="88.88665"
+     height="88.88665"
+     x="2.7906749"
+     y="2.7906749" />
+  <circle
+     style="opacity:1;fill:#ffff4d;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="circle868"
+     cx="47.234001"
+     cy="47.234001"
+     r="16.613539" />
+</svg>
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="94.468002"
+   height="94.468002"
+   viewBox="0 0 94.468002 94.468003"
+   sodipodi:docname="favicon.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="130.08"
+   inkscape:export-ydpi="130.08"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1341"
+     inkscape:window-height="927"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="4.8680853"
+     inkscape:cx="38.824299"
+     inkscape:cy="53.306379"
+     inkscape:current-layer="svg2"
+     inkscape:window-x="56"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:#00ff44;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4542"
+     width="88.88665"
+     height="88.88665"
+     x="2.7906749"
+     y="2.7906749" />
+  <circle
+     style="opacity:1;fill:#00ff44;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="circle868"
+     cx="47.234001"
+     cy="47.234001"
+     r="16.613539" />
+</svg>
@@ -0,0 +1,31 @@
+<?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 4215.93 2604.36">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-miterlimit: 10;
+        stroke-width: .1px;
+      }
+    </style>
+  </defs>
+  <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"/>
+</svg>
@@ -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 85.1 99.94">
+  <path d="M44.95,76.19h-10.74l-1.98,23.75H13.43l1.98-23.75H0v-18.8h17.1l1.41-16.96H0v-18.8h20.21L22.05,0h18.8l-1.84,21.63h10.74l1.84-21.63h18.8l-1.84,21.63h16.54v18.8h-18.24l-1.41,16.96h19.65v18.8h-21.35l-1.98,23.75h-18.8l1.98-23.75ZM46.65,57.39l1.41-16.96h-10.74l-1.41,16.96h10.74Z"/>
+</svg>
@@ -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 123.81 117.86">
+  <path d="M116.98,39.88c-4.56-7.84-10.78-14.04-18.67-18.59-7.83-4.52-16.53-6.79-26.11-6.83h0s-31.02,0-31.02,0V0L0,26.5v.2l41.18,26.4v-15.82h30.79c5.45,0,10.38,1.27,14.79,3.81,4.41,2.54,7.89,6.01,10.42,10.42,2.54,4.41,3.8,9.3,3.8,14.65s-1.27,10.24-3.8,14.65c-2.54,4.41-6.01,7.89-10.42,10.42-4.41,2.54-9.34,3.8-14.79,3.8h0s-67.74,0-67.74,0v22.82h67.79c9.66,0,18.42-2.29,26.3-6.83,7.89-4.56,14.11-10.75,18.67-18.59,4.56-7.84,6.83-16.6,6.83-26.27s-2.28-18.43-6.83-26.27Z"/>
+</svg>
@@ -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 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>
@@ -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 109.29 109.29">
+  <path d="M26.84,102.1c-8.31-4.79-14.87-11.36-19.66-19.72C2.4,74.02,0,64.76,0,54.58s2.4-19.42,7.19-27.74c4.79-8.31,11.34-14.86,19.66-19.66C35.16,2.4,44.44,0,54.71,0s19.42,2.4,27.73,7.19c8.31,4.79,14.86,11.34,19.66,19.66,4.79,8.31,7.19,17.56,7.19,27.74v42.75h-12.72v-7.89c-2.97,2.46-6.3,4.37-9.99,5.72-3.69,1.36-7.53,2.04-11.51,2.04-7.21,0-13.78-2.16-19.72-6.49l.64,18.45c-.34.08-.76.13-1.27.13-10.26,0-19.55-2.4-27.86-7.19ZM24.75,71.56c2.84,5.13,6.74,9.25,11.71,12.34,4.96,3.1,10.5,4.77,16.6,5.02-3.56-3.22-6.36-7.02-8.4-11.39-2.04-4.37-3.05-9.05-3.05-14.06,0-6.02,1.5-11.58,4.52-16.67,3.01-5.09,7.08-9.14,12.21-12.15,5.13-3.01,10.71-4.52,16.73-4.52.85,0,2.2.08,4.07.25-3.05-3.14-6.7-5.58-10.94-7.32-4.24-1.74-8.74-2.61-13.49-2.61-6.36,0-12.15,1.49-17.37,4.45-5.22,2.97-9.33,7.06-12.34,12.28-3.01,5.22-4.52,11.01-4.52,17.37s1.42,11.85,4.26,16.99ZM84.29,72.71c2.59-2.5,3.88-5.49,3.88-8.97s-1.29-6.59-3.88-9.1c-2.59-2.5-5.66-3.75-9.22-3.75s-6.57,1.25-9.03,3.75c-2.46,2.5-3.69,5.53-3.69,9.1s1.23,6.57,3.69,9.03c2.46,2.46,5.47,3.69,9.03,3.69s6.64-1.25,9.22-3.75Z"/>
+</svg>
@@ -0,0 +1,5 @@
+<?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 118.5 103.19">
+  <path d="M59.26,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM73.16,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM87.06,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45Z"/>
+  <path d="M117.92,68.62h.54S94.78,0,94.78,0H0v103.19h118.5v-34.54l-.58-.03ZM94.6,87.19H16V16h68.44l17.71,51.84.35,19.35h-7.9Z"/>
+</svg>
@@ -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 118.5 103.19">
+  <path d="M78.75,24.59c-1.86-.06-3.42-.72-4.65-1.99-1.3-1.33-1.95-2.97-1.95-4.9V0H10.95v24.59H0v78.6h118.5V24.59h-39.75ZM102.5,87.19H16v-46.29h11.55v-24.9h27.8v1.05c0,4.4,1.03,8.38,3.1,11.95,2.07,3.57,4.92,6.38,8.55,8.45,3.55,2.02,7.47,3.04,11.75,3.09v.05h23.75v46.6Z"/>
+</svg>
@@ -0,0 +1,5 @@
+<?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 49.76 100.65">
+  <path d="M25.3,26.58c3.77,0,6.93-1.29,9.47-3.89,2.54-2.59,3.82-5.77,3.82-9.54s-1.3-6.66-3.89-9.26c-2.59-2.59-5.73-3.89-9.4-3.89s-6.69,1.32-9.33,3.96-3.96,5.7-3.96,9.19c0,3.77,1.32,6.95,3.96,9.54,2.64,2.59,5.75,3.89,9.33,3.89Z"/>
+  <polygon points="36.19 77.18 36.19 57.25 36.19 33.79 13.57 33.79 0 33.79 0 57.25 13.57 57.25 13.57 77.18 0 77.18 0 100.65 49.76 100.65 49.76 77.18 36.19 77.18"/>
+</svg>
@@ -0,0 +1,5 @@
+<?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 98.15 105.63">
+  <path d="M35.16,0h23.64L23.64,105.63H0L35.16,0Z"/>
+  <path d="M74.51,0h23.64l-35.16,105.63h-23.64L74.51,0Z"/>
+</svg>
@@ -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>
@@ -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 80.03 53.1">
+  <polygon points="24.73 0 24.73 17.46 0 17.46 0 35.64 24.73 35.64 24.73 53.1 80.03 26.6 80.03 26.4 24.73 0"/>
+</svg>
@@ -0,0 +1,5 @@
+<?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 13.67 16.63">
+  <path d="M5.28,0v16.63H0V0h5.28Z"/>
+  <path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
+</svg>
@@ -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 18.25 17.52">
+  <path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
+</svg>
@@ -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 97.51 84.66">
+  <path d="M18.91,0v49.74c-.47-.03-.94-.06-1.42-.06-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.35-3.41,5.02-7.6,5.02-12.56,0-.53-.03-1.05-.07-1.57V16h46.6v22.48c-.49-.04-.99-.07-1.49-.07-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.31-3.37,4.97-7.49,5.02-12.37h0V0H18.91Z"/>
+</svg>
@@ -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 80.03 53.1">
+  <polygon points="55.3 53.1 55.3 35.64 80.03 35.64 80.03 17.46 55.3 17.46 55.3 0 0 26.5 0 26.7 55.3 53.1"/>
+</svg>
@@ -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 110.86 103.76">
+  <path d="M110.86,57.31l-.12-.15-42.28.88,7.87,10.04c-1.67,2.55-3.76,4.81-6.28,6.77-5.14,4.01-11.14,6.01-18.02,6.01-5.47,0-10.41-1.27-14.84-3.82-4.43-2.54-7.92-6.03-10.46-10.46-2.55-4.43-3.82-9.33-3.82-14.7s1.27-10.27,3.82-14.7c2.54-4.43,6.03-7.92,10.46-10.46,4.43-2.55,9.38-3.82,14.84-3.82,6.88,0,12.89,2,18.02,6.01,5.14,4.01,8.5,9.21,10.11,15.62h23.32c-1.13-8.48-4.08-16.12-8.84-22.9-4.76-6.79-10.84-12.09-18.24-15.9-7.4-3.82-15.53-5.72-24.38-5.72-9.71,0-18.52,2.29-26.43,6.86-7.92,4.57-14.16,10.79-18.73,18.66C2.28,33.39,0,42.17,0,51.88s2.28,18.5,6.86,26.36c4.57,7.87,10.81,14.09,18.73,18.66,7.92,4.57,16.73,6.86,26.43,6.86,8.86,0,16.99-1.91,24.38-5.73,5.62-2.9,10.47-6.65,14.56-11.26l8.97,11.45,10.92-40.92Z"/>
+</svg>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.6 133.47">
+  <g id="Calque_1-2" data-name="Calque 1">
+    <path d="M78.6,113.9V0H0v113.9h0l.07,19.57,39.15-38.87,39.16,38.73.21-19.43h0ZM39.08,78.6l-23.08,20.85V16h46.6v83.5l-23.23-20.9h-.3Z"/>
+  </g>
+</svg>
@@ -0,0 +1,15 @@
+<?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 796.34 615.89">
+  <path d="M629.11,403.48c-22.39,0-40.53,18.15-40.53,40.53s18.15,40.53,40.53,40.53,40.53-18.15,40.53-40.53-18.15-40.53-40.53-40.53Z"/>
+  <path d="M629.11,212.41c22.38,0,40.53-18.15,40.53-40.53s-18.15-40.53-40.53-40.53-40.53,18.15-40.53,40.53,18.15,40.53,40.53,40.53Z"/>
+  <path d="M493.71,212.41c22.39,0,40.53-18.15,40.53-40.53s-18.14-40.53-40.53-40.53-40.53,18.15-40.53,40.53,18.15,40.53,40.53,40.53Z"/>
+  <rect x="316.89" y="267.34" width="162.12" height="81.06" rx="7.54" ry="7.54"/>
+  <circle cx="493.71" cy="444.01" r="40.53"/>
+  <path d="M256.51,403.48h147.04c4.16,0,7.54,3.38,7.54,7.54v65.97c0,4.16-3.38,7.54-7.54,7.54h-147.04c-4.16,0-7.54-3.38-7.54-7.54v-65.97c0-4.16,3.38-7.54,7.54-7.54Z"/>
+  <path d="M661.65,348.4c4.17,0,7.54-3.38,7.54-7.54v-65.97c0-4.17-3.38-7.54-7.54-7.54h-147.04c-4.16,0-7.54,3.38-7.54,7.54v65.97c0,4.17,3.38,7.54,7.54,7.54h147.04Z"/>
+  <path d="M0,0v615.89h796.34V0H0ZM765.52,585.07H30.82V30.82h734.69v554.25Z"/>
+  <path d="M256.51,131.35h147.04c4.16,0,7.54,3.38,7.54,7.54v65.97c0,4.16-3.38,7.54-7.54,7.54h-147.04c-4.16,0-7.54-3.38-7.54-7.54v-65.97c0-4.16,3.38-7.54,7.54-7.54Z"/>
+  <circle cx="167.24" cy="444.01" r="40.53"/>
+  <rect x="126.71" y="267.34" width="162.12" height="81.06" rx="7.54" ry="7.54"/>
+  <path d="M167.24,212.41c22.39,0,40.53-18.15,40.53-40.53s-18.14-40.53-40.53-40.53-40.53,18.15-40.53,40.53,18.14,40.53,40.53,40.53Z"/>
+</svg>
@@ -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 766.54 578.27">
+  <path d="M0,0v578.27h766.54V0H0ZM482.95,104.88c23.35,0,42.29,18.93,42.29,42.29s-18.93,42.29-42.29,42.29-42.29-18.93-42.29-42.29,18.93-42.29,42.29-42.29ZM658.17,246.77c4.35,0,7.87,3.52,7.87,7.87v68.83c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83c0-4.35,3.52-7.87,7.87-7.87h153.41ZM467.61,254.64v68.83c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87ZM227.6,112.75c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87v68.83c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83ZM142.32,104.88c23.35,0,42.29,18.93,42.29,42.29s-18.93,42.29-42.29,42.29-42.29-18.93-42.29-42.29,18.93-42.29,42.29-42.29ZM100.04,254.64c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87v68.83c0,4.35-3.52,7.87-7.87,7.87H107.91c-4.35,0-7.87-3.52-7.87-7.87v-68.83ZM142.32,473.39c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29ZM396.74,465.51c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87v68.83ZM482.95,473.39c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29ZM624.21,473.39c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29ZM624.21,189.46c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29Z"/>
+</svg>
@@ -0,0 +1,18 @@
+<?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 566.46 368.5">
+  <g>
+    <circle cx="42.29" cy="42.29" r="42.29"/>
+    <circle cx="382.91" cy="42.29" r="42.29"/>
+    <circle cx="524.18" cy="42.29" r="42.29"/>
+    <rect x="127.56" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
+  </g>
+  <g>
+    <circle cx="42.29" cy="326.22" r="42.29"/>
+    <circle cx="382.91" cy="326.22" r="42.29"/>
+    <circle cx="524.18" cy="326.22" r="42.29"/>
+    <rect x="127.56" y="283.93" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
+  </g>
+  <rect x="198.43" y="141.89" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
+  <rect y="141.89" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
+  <rect x="396.85" y="141.89" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
+</svg>
@@ -0,0 +1,52 @@
+<?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 4215.93 2604.36">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1d1d1b;
+        stroke: #fff;
+        stroke-linejoin: round;
+        stroke-width: 7.77px;
+      }
+
+      .cls-2 {
+        fill: none;
+        stroke: #000;
+        stroke-miterlimit: 10;
+        stroke-width: .1px;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-1" points="3658.74 491.76 2897.09 52.81 2897.09 597.3 3658.74 1036.25 3658.74 491.76"/>
+  <polygon class="cls-1" points="3223.51 576.36 3223.51 1120.84 2897.09 1309.32 2897.09 764.83 3223.51 576.36"/>
+  <polygon class="cls-1" points="1373.78 890.48 1228.71 806.72 1228.71 1351.2 1373.78 1309.32 1373.78 890.48"/>
+  <polygon class="cls-1" points="2280.51 408.82 2135.44 325.05 2135.44 869.54 2280.51 953.31 2280.51 408.82"/>
+  <polygon class="cls-1" points="249.44 2126.05 1446.32 1434.97 1446.32 890.48 249.44 1581.56 249.44 2126.05"/>
+  <polygon class="cls-1" points="2280.51 953.31 2897.09 597.3 2897.09 52.81 2280.51 408.31 2280.51 953.31"/>
+  <polygon class="cls-1" points="1301.25 806.72 2135.44 325.05 2135.44 869.54 1446.32 1267.44 1446.32 890.48 1301.25 806.72"/>
+  <polygon class="cls-1" points="1736.48 1602.51 2461.86 2021.34 2461.86 1895.69 1736.48 1476.85 1736.48 1602.51"/>
+  <polygon class="cls-1" points="2641.55 1161.6 2643.21 618.24 2897.09 764.83 2897.09 1309.32 2641.55 1161.6"/>
+  <polygon class="cls-1" points="2643.21 618.24 2969.63 429.76 3223.51 576.36 2897.09 764.83 2643.21 618.24"/>
+  <polygon class="cls-1" points="3223.51 1078.96 3187.24 1099.9 3332.32 1183.67 3368.59 1162.73 3223.51 1078.96"/>
+  <polygon class="cls-1" points="3187.24 1070.94 3150.97 1091.89 3296.05 1175.65 3332.32 1154.71 3187.24 1070.94"/>
+  <polygon class="cls-1" points="3150.97 1062.12 3114.7 1083.06 3259.78 1166.82 3296.05 1145.88 3150.97 1062.12"/>
+  <polygon class="cls-1" points="3114.7 1054.91 3078.44 1075.85 3223.51 1159.62 3259.78 1138.68 3114.7 1054.91"/>
+  <polygon class="cls-1" points="3078.44 1050 3042.17 1070.94 3187.24 1154.71 3223.51 1133.77 3078.44 1050"/>
+  <polygon class="cls-1" points="3042.17 1041.99 3005.9 1062.93 3150.97 1146.7 3187.24 1125.75 3042.17 1041.99"/>
+  <polygon class="cls-1" points="3005.9 1038.4 2969.63 1059.35 3114.7 1143.11 3150.97 1122.17 3005.9 1038.4"/>
+  <polygon class="cls-1" points="2969.63 1029.06 2933.36 1050 3078.44 1133.77 3114.7 1112.83 2969.63 1029.06"/>
+  <polygon class="cls-1" points="2933.36 1021.04 2897.09 1041.99 3042.17 1125.75 3078.44 1104.81 2933.36 1021.04"/>
+  <polygon class="cls-1" points="2897.09 1016.13 2860.82 1037.08 3005.9 1120.84 3042.17 1099.9 2897.09 1016.13"/>
+  <polygon class="cls-1" points="2860.82 1037.08 2860.82 1078.96 3005.9 1162.73 3005.9 1120.84 2860.82 1037.08"/>
+  <path class="cls-1" d="M3005.9,1120.84l36.27-20.94v25.85s36.27-20.94,36.27-20.94v28.96s36.27-20.94,36.27-20.94v30.29s36.27-20.94,36.27-20.94v24.52s36.27-20.94,36.27-20.94v28.96s36.27-20.94,36.27-20.94v25.85s36.27-20.94,36.27-20.94v28.15s36.27-20.94,36.27-20.94v29.77s36.27-20.94,36.27-20.94v28.96s36.27-20.94,36.27-20.94v41.88s-36.27,20.94-36.27,20.94c0,0-325.51-60.05-326.42-62.83-.91-2.78,0-41.88,0-41.88Z"/>
+  <polygon class="cls-1" points="3622.47 1057.67 3602.13 1046.27 3602.13 675.11 3622.47 681.07 3622.47 1057.67"/>
+  <polygon class="cls-1" points="3368.59 1078.96 3348.24 1067.56 3348.24 648.38 3368.59 660.12 3368.59 1078.96"/>
+  <polygon class="cls-1" points="3368.59 660.12 3368.59 1078.96 3042.17 1267.44 3042.17 1393.97 3368.59 1204.61 3441.13 1162.73 3441.13 785.77 3622.47 681.07 3622.47 1057.67 3695.01 1016.03 3695.01 471.55 3368.59 660.12"/>
+  <polygon class="cls-1" points="2897.09 1309.32 3296.05 1539.3 3296.05 1413.65 2897.09 1183.67 2897.09 1309.32"/>
+  <polygon class="cls-1" points="2462.85 2021.34 3314.19 1531.11 3313.98 1403.68 2462.85 1895.69 2462.85 2021.34"/>
+  <polygon class="cls-1" points="3313.98 1403.68 3296.05 1393.09 3296.05 1393.09 3063.02 1255.4 3368.59 1078.96 3348.24 1067.56 3044.87 1244.68 2919.1 1172 2897.09 1183.67 3024.03 1256.84 3042.17 1267.44 3042.29 1267.37 3278.27 1403.4 2462.85 1874.75 1736.48 1455.91 558.65 2137.05 558.65 2156.93 1736.48 1476.85 2456.45 1892.57 2461.86 1895.69 2461.86 1895.69 2461.86 1895.69 2461.86 1895.69 3313.98 1403.68"/>
+  <path class="cls-1" d="M2897.09,10.93l-616.58,356.01-145.08-83.77s-905.93,521.27-906.73,523.55c-.8,2.27,145.08,83.77,145.08,83.77L212.65,1560.22l36.87,21.3-.08.05,290.15,167.53v544.49l1196.88-691.08v-125.65l-1177.83,680.08v-418.85l-285.59-170.16,1173.26-677.44-145.08-83.77,834.19-481.66,145.08,83.77L2897.09,52.81l740.91,427-35.88,20.87-253.88,147.7,20.34,11.75,290.15-168.36,36.27-20.11L2897.09,10.93Z"/>
+  <rect class="cls-2" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4"/>
+  <polygon class="cls-1" points="285.71 2146.57 302.22 2137.04 302.22 1713.23 285.71 1727.73 285.71 2146.57"/>
+  <polygon class="cls-1" points="212.65 2104.7 285.71 2146.99 285.71 1728.16 467.06 1832.87 467.06 2251.7 539.59 2293.59 539.59 1749.1 212.65 1560.22 212.65 2104.7"/>
+</svg>
@@ -1,34 +0,0 @@
-@font-face {
-    font-family: "Azeret Mono";
-    src: url("./AzeretMono-VariableFont_wght.ttf");
-}
-
-.affiche-cafe {
-    font-family: "Azeret Mono", monospace;
-    line-height: 1.3;
-    font-size: 0.9rem;
-}
-
-.affiche-cafe > * {
-    margin: 0;
-    margin-bottom: 0.9rem;
-}
-
-.affiche-cafe > *:last-child {
-    margin-bottom: 0;
-}
-
-@keyframes cursor-blink {
-    0% {opacity: 0;}
-    65% {opacity: 1;}
-    100% {opacity: 1;}
-}
-
-.affiche-cafe .cursor {
-    animation: cursor-blink 1.5s steps(1) infinite;
-}
-
-.affiche-cafe h1 {
-    font-weight: normal;
-    font-size: 2em;
-}
@@ -1,57 +0,0 @@
-@font-face {
-    font-family: "Pixelify Sans";
-    src: url("./PixelifySans-Regular.ttf");
-}
-
-.affiche-dac {
-    background-color: transparent;
-    border: none;
-    background-image: url("/images/affiches/dac-background.png");
-    border-color: white;
-    font-family: "Pixelify Sans", monospace;
-
-    background-size: 550px;
-    background-position: center top;
-    background-repeat: no-repeat;
-
-    color: #1bff8d;
-    line-height: 1.5;
-}
-
-.affiche-dac .content {
-    width: 350px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 25px;
-}
-
-@media screen and (max-width: 880px) {
-    .affiche-dac {
-        padding-bottom: 200px;
-    }
-}
-
-.affiche-dac .notes {
-    float: right;
-    margin: 10px;
-}
-
-.affiche-dac em {
-    color: #ebff00;
-    font-style: normal;
-    font-weight: normal;
-}
-
-.affiche-dac strong {
-    text-decoration-color: #00ffff;
-    text-decoration-line: underline;
-    text-decoration-thickness: 3px;
-    text-decoration-style: dotted;
-    font-style: normal;
-    font-weight: normal;
-}
-
-.affiche-dac p {
-    margin: 0;
-    margin-bottom: 10px;
-}
@@ -1,35 +0,0 @@
-@font-face {
-    font-family: "Arvo";
-    src: url("./Arvo-Bold.ttf");
-    font-weight: bold;
-}
-
-.affiche-perm {
-    background: black url("../../images/affiches/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,67 +0,0 @@
-/* Computer */
-.grid_1 { width: 6.5%; } 
-.grid_2 { width: 15%; } 
-.grid_3 { width: 23.5%; } 
-.grid_4 { width: 32%; } 
-.grid_5 { width: 40.5%; }
-.grid_6 { width: 49%; } 
-.grid_7 { width: 57.5%; } 
-.grid_8 { width: 66%; } 
-.grid_9 { width: 74.5%; } 
-.grid_10 { width: 83%; } 
-.grid_11 { width: 91.5%; } 
-.grid_12 { width: 100%; } 
-
-.grid_1,
-.grid_2,
-.grid_3,
-.grid_4,
-.grid_5,
-.grid_6,
-.grid_7,
-.grid_8,
-.grid_9,
-.grid_10,
-.grid_11,
-.grid_12 {
-	margin: 0 2% 1% 0;
-	float: left;
-	display: block;
-}
-
-.alpha{margin-left:0;}
-.omega{margin-right:0;}
-
-.container{
-	width: 90%; /*width: 1000px;*/
-	max-width: 1000px;
-	margin: auto;
-	
-}
-
-
-
-.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
-
-
-
-
-/* Mobile */
-@media screen and (max-width : 480px) {
-
-.grid_1,
-.grid_2,
-.grid_3,
-.grid_4,
-.grid_5,
-.grid_6,
-.grid_7,
-.grid_8,
-.grid_9,
-.grid_10,
-.grid_11,
-.grid_12 {
-	width:100%;
-}
-
-}
@@ -1,351 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
- html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-  }
-  
-  /* Sections
-     ========================================================================== */
-  
-  /**
-   * Remove the margin in all browsers.
-   */
-  
-  body {
-    margin: 0;
-  }
-  
-  /**
-   * Render the `main` element consistently in IE.
-   */
-  
-  main {
-    display: block;
-  }
-  
-  /**
-   * Correct the font size and margin on `h1` elements within `section` and
-   * `article` contexts in Chrome, Firefox, and Safari.
-   */
-  
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-  
-  /* Grouping content
-     ========================================================================== */
-  
-  /**
-   * 1. Add the correct box sizing in Firefox.
-   * 2. Show the overflow in Edge and IE.
-   */
-  
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
-  
-  /**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-  
-  pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-  
-  /* Text-level semantics
-     ========================================================================== */
-  
-  /**
-   * Remove the gray background on active links in IE 10.
-   */
-  
-  a {
-    background-color: transparent;
-  }
-  
-  /**
-   * 1. Remove the bottom border in Chrome 57-
-   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-   */
-  
-  abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-  }
-  
-  /**
-   * Add the correct font weight in Chrome, Edge, and Safari.
-   */
-  
-  b,
-  strong {
-    font-weight: bolder;
-  }
-  
-  /**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-  
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-  
-  /**
-   * Add the correct font size in all browsers.
-   */
-  
-  small {
-    font-size: 80%;
-  }
-  
-  /**
-   * Prevent `sub` and `sup` elements from affecting the line height in
-   * all browsers.
-   */
-  
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  
-  sub {
-    bottom: -0.25em;
-  }
-  
-  sup {
-    top: -0.5em;
-  }
-  
-  /* Embedded content
-     ========================================================================== */
-  
-  /**
-   * Remove the border on images inside links in IE 10.
-   */
-  
-  img {
-    border-style: none;
-  }
-  
-  /* Forms
-     ========================================================================== */
-  
-  /**
-   * 1. Change the font styles in all browsers.
-   * 2. Remove the margin in Firefox and Safari.
-   */
-  
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
-  }
-  
-  /**
-   * Show the overflow in IE.
-   * 1. Show the overflow in Edge.
-   */
-  
-  button,
-  input { /* 1 */
-    overflow: visible;
-  }
-  
-  /**
-   * Remove the inheritance of text transform in Edge, Firefox, and IE.
-   * 1. Remove the inheritance of text transform in Firefox.
-   */
-  
-  button,
-  select { /* 1 */
-    text-transform: none;
-  }
-  
-  /**
-   * Correct the inability to style clickable types in iOS and Safari.
-   */
-  
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-  }
-  
-  /**
-   * Remove the inner border and padding in Firefox.
-   */
-  
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-  
-  /**
-   * Restore the focus styles unset by the previous rule.
-   */
-  
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-  
-  /**
-   * Correct the padding in Firefox.
-   */
-  
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-  
-  /**
-   * 1. Correct the text wrapping in Edge and IE.
-   * 2. Correct the color inheritance from `fieldset` elements in IE.
-   * 3. Remove the padding so developers are not caught out when they zero out
-   *    `fieldset` elements in all browsers.
-   */
-  
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
-  
-  /**
-   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-   */
-  
-  progress {
-    vertical-align: baseline;
-  }
-  
-  /**
-   * Remove the default vertical scrollbar in IE 10+.
-   */
-  
-  textarea {
-    overflow: auto;
-  }
-  
-  /**
-   * 1. Add the correct box sizing in IE 10.
-   * 2. Remove the padding in IE 10.
-   */
-  
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-  
-  /**
-   * Correct the cursor style of increment and decrement buttons in Chrome.
-   */
-  
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-  
-  /**
-   * 1. Correct the odd appearance in Chrome and Safari.
-   * 2. Correct the outline style in Safari.
-   */
-  
-  [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-  
-  /**
-   * Remove the inner padding in Chrome and Safari on macOS.
-   */
-  
-  [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  
-  /**
-   * 1. Correct the inability to style clickable types in iOS and Safari.
-   * 2. Change font properties to `inherit` in Safari.
-   */
-  
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-  
-  /* Interactive
-     ========================================================================== */
-  
-  /*
-   * Add the correct display in Edge, IE 10+, and Firefox.
-   */
-  
-  details {
-    display: block;
-  }
-  
-  /*
-   * Add the correct display in all browsers.
-   */
-  
-  summary {
-    display: list-item;
-  }
-  
-  /* Misc
-     ========================================================================== */
-  
-  /**
-   * Add the correct display in IE 10+.
-   */
-  
-  template {
-    display: none;
-  }
-  
-  /**
-   * Add the correct display in IE 10.
-   */
-  
-  [hidden] {
-    display: none;
-  }
-  
-  
@@ -1,332 +0,0 @@
-html {
-	font-family: 'arial', sans-serif;
-	font-weight: 400;
-	font-size: 1em;
-	color: #cfcfcf;
-    max-width: 100%;
-    overflow-x: hidden;
-    background: url("../images/world_network.muted.jpg");
-    background-color: black;
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-}
-
-body {
-    width: 100%;
-    max-width: 1000px;
-    margin-left: auto;
-    margin-right: auto;
-    
-}
-
-/* global items */
-
-img {
-	max-width: 100%;
-}
-
-a:link {
-	color: yellow;
-	text-decoration: none;
-}
-
-a:hover, a:focus {
-	color: white;
-	background-color:black;
-    text-decoration: underline;
-}
-
-a:visited {
-	color:yellow;
-}
-
-hr {
-    border: none;
-    height: 2em;
-}
-
-/* Header */
-
-#main-header {
-    display: grid;
-    grid-template-columns: 95px 1fr 400px;
-    grid-template-rows: min-content;
-    align-items: center;
-
-    gap: 15px;
-
-    padding: 50px 10px 10px;
-    position: relative;
-    margin-bottom: 25px;
-}
-
-#main-header > * {
-    grid-row: 1;
-}
-
-#main-header h1 {
-    line-height: 25px;
-    font-size: 20px;
-    font-weight: normal;
-    font-family: monospace;
-    color: yellow;
-
-    flex: 1;
-    grid-column: 2;
-}
-
-#main-header nav {
-    grid-column: 3;
-}
-
-@media screen and (max-width: 600px) {
-    #main-header {
-        grid-template-columns: 1fr 1fr;
-        grid-auto-rows: min-content;
-    }
-
-    #main-header img {
-        grid-column: 1;
-        margin-left: auto;
-    }
-
-    #main-header h1 {
-        grid-column: 2;
-    }
-
-    #main-header #main-nav {
-        grid-row: 2;
-        grid-column: 1 / 3;
-    }
-}
-
-/* main area */
-
-main {
-    display: grid;
-    grid-template-columns: 1fr 400px;
-    grid-auto-rows: min-content;
-    row-gap: 15px;
-    column-gap: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-bottom: 15vh;
-}
-
-main #main-info {
-    grid-column: 2;
-    grid-row: 1;
-}
-
-main #events {
-    grid-column: 2;
-    grid-row: 2;
-}
-
-main #description {
-    grid-column: 1;
-    grid-row: 1 / 5;
-}
-
-main .toolbar {
-    grid-column: 1 / 3;
-    text-align: right;
-}
-
-@media screen and (max-width: 889px){
-    main {
-        grid-template-columns: 1fr;
-        row-gap: 50px;
-    }
-
-    main #main-info {
-        grid-row: 3;
-        grid-column: 1;
-    }
-    
-    main #events {
-        grid-column: 1;
-        grid-row: 5;
-    }
-    
-    main #description {
-        grid-column: 1;
-        grid-row: 2;
-    }
-    
-    main .toolbar {
-        grid-column: 1;
-        grid-row: 1;
-    }
-}
-
-/* toolbar */
-
-main .toolbar button {
-    border: none;
-    background: none;
-    color: white;
-    font-size: 1.5em;
-    cursor: pointer;
-}
-
-main .toolbar button img {
-    height: 1em;
-    display: inline-block;
-}
-
-main .toolbar button img[hidden] {
-    display: none;
-}
-
-/* description */
-
-#description {
-    text-align: left;
-    line-height: 1.5;
-
-    grid-column: 1;
-}
-
-#description > *:first-child {
-    margin-top: 0;
-}
-
-dl.definitions > * {
-    display: inline;
-    padding: 0;
-    margin: 0;
-}
-
-dl.definitions > dt:not(:first-child)::before {
-    content: "";
-    display: block;
-    margin-top: 1em;
-}
-
-dl.definitions > dt {
-    font-weight: bold;
-}
-
-.hackerspace-logo {
-    float: right;
-    width: 100px;
-}
-
-#description marquee {
-    height:25px;
-    max-width:400px;
-    background-color:none;
-    font-family:arial;
-    font-size:12pt;
-    color:#ffffff;
-}
-
-/* side */
-
-main > aside {
-    grid-column: 2;
-    text-align: center;
-}
-
-#main-info address {
-    display: inline;
-}
-
-#main-info > * {
-    margin: 1.33em 0;
-    font-weight: bold;
-    color: yellow;
-}
-
-@media screen and (max-width: 889px){
-    #main-info {
-        text-align: center;
-    }
-}
-
-/* background */
-
-.fullscreen-background {
-    display: block !important;
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100vh;
-    overflow: hidden;
-    z-index: -1;
-    width: 100%;
-    background: black;
-}
-
-.fullscreen-background img, .fullscreen-background video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.fullscreen-background video {
-    opacity: 0.3;
-}
-
-.fullscreen-background img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: linear 1s opacity;
-}
-
-.fullscreen-background img[hidden]{
-    display: block;
-    opacity: 0;
-}
-
-.fullscreen-background::after {
-    content: "";
-    width: 100%;
-    height: 25vh;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(to top, black, rgba(0,0,0,0));
-}
-
-/* nav */
-
-#main-nav {
-    text-align: center;
-}
-
-#main-nav > *:not(:last-child)::after {
-    content: " | ";
-    content: " | " / "";
-    text-decoration: none !important;
-}
-
-/* Affiches */
-
-.affiche {
-    border: solid 1px currentColor;
-    padding: 10px;
-    background: black;
-    position: relative;
-}
-
-.affiche:not(:first-child){
-    margin-top: 25px;
-}
-
-.affiche:not(:last-child){
-    margin-bottom: 25px;
-}
-
-.affiche .credits {
-    font-size: 0.5em;
-    text-align: right;
-}
-
-.affiche .credits, .affiche .credits * {
-    color: inherit;
-}
@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="48"
-   viewBox="0 -960 960 960"
-   width="48"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="pause.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="987"
-     inkscape:window-height="931"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="14"
-     inkscape:cx="24"
-     inkscape:cy="24"
-     inkscape:window-x="26"
-     inkscape:window-y="23"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg4" />
-  <path
-     d="m 555,-200 v -560 h 175 v 560 z m -325,0 v -560 h 175 v 560 z"
-     id="path2"
-     style="fill:#ffffff;fill-opacity:1;stroke-width:0.999999" />
-</svg>
@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="48"
-   viewBox="0 -960 960 960"
-   width="48"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="play.svg"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="987"
-     inkscape:window-height="931"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="14"
-     inkscape:cx="24"
-     inkscape:cy="24"
-     inkscape:window-x="26"
-     inkscape:window-y="23"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg4" />
-  <path
-     d="m 320,-203 v -560 l 440,280 z"
-     id="path2"
-     style="fill:#ffffff;fill-opacity:1;stroke-width:0.999999" />
-</svg>
@@ -1,122 +1,239 @@
-<!DOCTYPE HTML>
-<html>
+<!DOCTYPE html>
+<html lang="fr">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="style/typo.css">
+    <link rel="stylesheet" href="style/default.css">
+    <link rel="stylesheet" href="style/common.css">
+    <link rel="stylesheet" href="style/animation.css">
+    <link rel="stylesheet" href="style/main.css">
+
+    <!--REPONSIVE-->
+    <link rel="stylesheet" href="style/responsive.css">
+    <!--REDUCED MOTION-->
+    <link rel="stylesheet" href="style/reduced.css">
+
    <title>Laboratoire Ouvert Lyonnais</title>
-	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">

-	<style>
-		.fullscreen-background {
-			display: none;
-		}
-	</style>
+    <!--OPEN GRAPHS-->
+    <meta property="og:title" content="Laboratoire Ouvert Lyonnais">
+    <meta property="og:description" content="Hackerspace Queer">
+    <meta property="og:url" content="https://labolyon.fr/">
+    <meta property="og:image" content="assets/logo/logo_picto.svg">
+    <meta property="og:type" content="website">

-	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

-	<link rel="stylesheet" href="css/affiches/perm.css">
-	<link rel="stylesheet" href="css/affiches/dac.css">
+  <link rel="icon" type="image/svg" href="assets/favicon.svg">
 </head>
-
 <body>
+    <header>
+        <h1>
+            <img id="logo" src="assets/logo/logo-forme.svg" alt="Logo du LOL : en jaune sur fond noir, la transcription visuelle des lettre L, O et L en morse, encadré d'un épaisse bordure">
+            <span aria-hidden="true" class="cool-name">LOL</span>
+            <span class="plain-name">LOL</span>
+        </h1>

-	<div class="fullscreen-background" aria-hidden="true">
-		<video muted loop poster="images/world_network.jpg" id="background-video">
-			<source src="videos/background.webm" type="video/webm" />
-			<source src="videos/background.mp4" type="video/mp4">
-		</video>
-		<img src="/images/world_network.muted.jpg" id="background-poster"/>
-	</div>
-
-	<header id="main-header">
-		<img class="logo" src="images/logo_picto.svg" alt="Logo du laboratoire ouvert lyonnais : un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." />
-
-		<h1>Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
-
-		<nav id="main-nav">
-			<a href="https://git.labolyon.fr/explore/repos ">Dépots Git</a>
-			<a href="https://team.labolyon.fr/">Wiki</a>
-			<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
+        <nav aria-label="outils numériques du LOL">
+            <ul>
+                <li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" target="_blank">Git</a></li>
+                <li><a href="https://wiki.labolyon.fr/" class="textBtnStyle" target="_blank">Wiki</a></li>
+                <li><a href="https://matrix.to/#/#lol-space:chat.labolyon.fr" class="textBtnStyle" target="_blank">Matrix</a></li>
+                <li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle" target="_blank">Fediverse</a></li>
+            </ul>
        </nav>
    </header>

    <main>
+      <div id="homeContent">

-		<section id="description">
+          <section id="titleSection" class="solidBox">
+              <h2>
+                  Hackerspace
+              </h2>
+              <p>
+                  <br>
+                  Lieu autogéré <br>
+                  de réappropriation, <br>
+                  réparation & recyclage <br>
+                  des objets techniques <br>
+                  & technologiques
+              </p>
+          </section>

-			<dl class="definitions">
+          <section id="hourSection" class="solidBox">
+            <h3>Horaires d'ouverture</h3>
+            <ol>
+                <li>
+                    Mar. <strong>17h &rarr; 23h</strong>
+                </li>
+                <li>
+                    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>
+
+          <div class="access-info-box transparentBox">
+            <address aria-label="Adresse du lieu">
+                7 place Chazette<br>
+                69001 Lyon<br>
+                <br>
+                45° 46' 23.698" N<br>
+                4° 50' 14.052" E
+            </address>
+  
+            <ul aria-label="Téléphones du lieu">
+                <li> &#128439; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
+                <li> &#9990; Tel EPVPN : <a href="tel:5256">5256</a></li>
+                <li> &#128439; Fax EPVPN : <a href="tel:5257">5257</a></li>
+            </ul>
+          </div>
+
+
+          <div id="planSection" class="transparentBox" aria-label="Plan d'accès du local">
+            <div id="planContainer" class="transparentBox">
+      				<img src="assets/plan.svg" id="plan" alt="Sonnez à l'interphone Laboratoire Ouvert Lyonnais au 7 Place Chazette 69001, puis avancez tout droit, traversez la cour, et avancez encore, la porte se situe après l'ascenceur, sur la droite">
+      				<svg aria-hidden="true" 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>
+
+          <div id="extLinkSection" class="transparentBox" aria-label="Liens externes">
+            <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank" aria-label="hackerspace.org est un site qui recense les hackerspaces en Europe">
+                <img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt=""> 
+            </a>
+          </div>
+
+                          <!-- MESSAGE DE BIENVENUE -->
+                    <aside>
+                      <button type="button" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
+                        <svg class="icon" viewBox="0 0 40.19 38.9" aria-hidden="true">
+                          <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" aria-label="Message de bienvenue du LOL">
+                          <h4 class="title">
+                            Bienvenue sur le site du LOL!
+                            <button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide" aria-label="Fermer la fenêtre">
+                              <svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
+                                <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>
+                          </h4>
+
+                          <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>
+      </div>
+      <section id="statuSection" class="solidBox">
+        <div id="statusDesc">
+            <h3>
+                Le LOL peut ouvrir en dehors des horaires habituels.
+                En fonction de nos envies et disponibilités.
+            </h3>
+            <p>
+                <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
+            </p>
+        </div>
+        <a href="status" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
+        </section>
+      <aside id="extraContent">
+        <div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
+          <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<br>et de bidouille anti-systèmes.
+            <br><br>
+            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 !
+            <br><br>
+            Nous revendiquons l'ouverture du code et des techniques,<br>
+            le partage des connaissances et l'autogestion,<br>
+            l'anti-capitalisme et l'anti-fascisme. <br><br>
+            Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
+            Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
+          </p>
+
+          <dl>
            <dt>Hackerspace</dt>
-				<dd><em>n.m.</em> : Tiers lieu de réunion et de rencontre entre personnes désirant comprendre, créer ou détourner des objets techniques ou technologiques.</dd>
+            <dd>
+              n.m. : Tiers lieu de réunion et de rencontre entre personnes désirant comprendre, créer ou détourner des objets techniques ou technologiques.
+            </dd>

            <dt>Hackeuse, Hacker</dt>
-				<dd><em>n.</em> : Personne ayant un intérêt dans la technique ou la technologie et faisant un usage creatif et/ou utile de celle-ci par le détournement.</dd>
+            <dd>
+              n. : Personne ayant un intérêt dans la technique ou la technologie et faisant un usage creatif et/ou utile de celle-ci par le détournement.
+            </dd>
+            </dt>
          </dl>
+        </div>

-			<hr>
-
-			<p>Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tout les passionné·es d'informatique, d'électronique et de technique.
-			Le LOL est un lieu d'exploration des alternatives et de bidouille.</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 techniques qui nous entourent.</p>
-
-			<p>Nous revendiquons l'ouverture du code et des techniques.
-			Le partage des connaissances et l'autogestion.</p>
-
-			<p>
-				<a href="https://www.hackerspaces.org/" class="hackerspace-logo" target="_blank"><img class="icons" src="images/logo_hackerspaces_monde.png" alt="Hackerspaces.org"></a>
-				<marquee direction="left" behavior="scroll" scrollamount="3">none of us is smarter than all of us - nul n'est plus intelligent·e que nous tou·tes réunis</marquee>
-			</p>
+        <section id="eventSection" class="transparentBox">
+  			       <h3>Événements <small>à venir</small></h3>
+                <article class="solidBox">
+                  <h4>Permanences du LOL</h4>
+                  <p class="date">↻ Mardi & Samedi</p>
+                  <a href="/affiches/mardis/" class="iconBtnStyle" target="_blank" aria-label="Plus d'infos sur cet évènement">
+                    <svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
+                      <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>
+                  </a>
+                </article>
        </section>
-
-		<aside id="main-info">
-			<address><a href="geo:45.7732495,4.8372366">
-				7 Place Louis Chazette 69001 Lyon<br/>
-				45° 46' 23.698" N 4° 50' 14.052" E 
-			</a></address>
-			<p> Ouvert tous les mardis à partir de 19h</p>	
      </aside>
-
-		<section id="events">
-
-			<article class="event affiche affiche-dac">
-
-				<div class="content">
-
-					<img src="/images/affiches/dac-notes.png" alt="Quelques notes de musique" class="notes"/>
-					<p>
-						La <em>Digital Audio Community</em> se donne rendez-vous le <time datetime="2023-10-11">Mercredi 25&nbsp;Octobre</time> à partir de <time datetime="18:30">18h30</time> au LOL, <a href="geo:45.7732495,4.8372366">7&nbsp;place Louis Chazette</a>.
-					</p>
-					<p>
-						<strong>Au Programme</strong> : Ateliers Livre-Coding, Discussions Informatique Musicale && Découverte Code Créatif.
-					</p>
-					
-				</div>
-
-			</article>
-
-			<article class="event affiche-perm affiche">
-				<h1>Permanence du LOL</h1>
-				
-				<p>Venez nous rencontrer autours d'une pizza</p>
-
-				<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
-				<p class="event-hours"><strong>Tous les mardis à partir de&nbsp;19h <br/>
-					au local du LOL</strong></p>
-
-				<p>Adhésion 5€ pour le mois</p>
-			</article>
-
-		</section>
-
-		<div class="toolbar">
-			<button id="play-background" hidden>
-				<img src="/images/play.svg" alt="Play" class="play" title="Play" />
-				<img src="/images/pause.svg" alt="Pause" class="pause" hidden title="Pause" />
-			</button>
-		</div>
+      <footer id="webRingSection" aria-label="les copaines du LOL">
+        <a href="https://berthe.cc" target="_blank" aria-label="berthe.cc">
+          <img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
+        </a>
+        <a href="https://murmure.cafe" target="_blank" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
+          <img src="/assets/webRings/murmure-cafe-webring.png" alt="une une tasse de café pixélisées en couleurs pastel avec des chevrons, quelques gouttes de café renversées et une écriture noire : murmure.café">
+        </a>
+        <a href="https://drags-nerds.net" target="_blank" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
+          <img class="needOutline" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
+        </a>
+      </footer>
+      <noscript>
+        <video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop aria-hidden="true"></video>
+      </noscript>
+      <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop aria-hidden="true"></video>
+      <canvas class="cute-texture" aria-hidden="true"></canvas>
    </main>
-
-	<script src="js/background.js"></script>
+    <!-- SCRIPT PRINCIPAL -->
+        <script type="module" src="js/main.js"></script>
 </body>
 </html>
@@ -1,32 +0,0 @@
-(function(){
-
-    var btn = document.getElementById("play-background");
-    /** @type {HTMLVideoElement} */
-    var video = document.getElementById("background-video");
-    var poster = document.getElementById("background-poster");
-
-    btn.hidden = false
-
-    btn.addEventListener("click", function(e) {
-        e.preventDefault()
-
-        if(btn.classList.contains("playing")) {
-            video.pause();
-        } else {
-            video.play()
-        }
-    })
-
-    video.addEventListener("pause", function(e) {
-        btn.querySelector(".play").hidden = false;
-        btn.querySelector(".pause").hidden = true;
-        btn.classList.remove("playing")
-    })
-
-    video.addEventListener("play", function(e) {
-        btn.querySelector(".play").hidden = true;
-        btn.querySelector(".pause").hidden = false;
-        poster.hidden = true;
-        btn.classList.add("playing")
-    })
-})()
@@ -0,0 +1,348 @@
+const DEFAULT_VERTEX_SHADER = `
+  attribute float aVertexIndex;
+  varying highp vec2 vTextureCoord;
+
+ 	// 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.
+
+	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;
+	}
+`
+
+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
+    }
+  }
+}
+
+/**
+ * @param {WebGLRenderingContext} ctx 
+ */
+function initMainShader(ctx, options){
+  let fragmentShaderCode = options?.shaderSource;
+
+  const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
+  ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
+  ctx.compileShader(vertexShader)
+
+  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
+  }
+
+  if(!fragmentShaderCode){
+    fragmentShaderCode = getDocumentShaderSource(document);
+  }
+
+  if(!fragmentShaderCode){
+    fragmentShaderCode = DEFAULT_FRAGMENT_SHADER
+  }
+
+  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
+}
@@ -0,0 +1,54 @@
+export async function loadEvents(){
+  const eventList = document.querySelectorAll('#eventSection > article');
+  //console.log("event list: ", eventList);
+
+  for (const event of eventList){
+    const title = event.querySelector('h4');
+    const date = event.querySelector('p.date');
+    const posterLink = event.querySelector('a.iconBtnStyle').href;
+    const posterHTML = await getPoster(posterLink);
+
+    const poster = posterHTML.querySelector('body > article');
+
+    const posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])')
+
+    //console.log('entry data :', title, date, poster, posterStyle);
+
+    const selectedEntry = createEntry(title, date, poster, posterStyle)
+
+    //console.log('created new details :', selectedEntry);
+
+    event.replaceChildren(selectedEntry);
+  }
+}
+
+async function getPoster(link){
+  const res = await fetch(link);
+  if (res.ok){
+      const html_text = await res.text()
+      const html = new DOMParser().parseFromString(html_text, "text/html");
+        return html
+    } else{
+      console.log('error 333: something went wrong with this poster...');
+        return
+    }
+
+}
+
+function createEntry(title, date, html, style){
+  const newEntry = document.createElement('details');
+  const newSummary = document.createElement('summary');
+  newSummary.append(title, date);
+
+  newEntry.append(newSummary);
+
+  newEntry.append(html);
+
+  newEntry.name = "eventList"
+
+  for(const el of style){
+    document.head.append(el);
+  }
+
+    return newEntry
+}
@@ -0,0 +1,44 @@
+export function makeItFloat(target){
+    const startTarget = target.querySelector('.title');
+
+    //console.log('selected target :', startTarget);
+
+    let startX, startY;
+    let clicked = false;
+    let selectedPointer;
+
+    startTarget.addEventListener('pointerdown', (event) => {
+        selectedPointer = event.pointerId;
+        startX = event.pageX;
+        startY = event.pageY;
+        //console.log('clicking...')
+    })
+
+    document.addEventListener('pointermove', (event) => {
+    if(event.pointerId === selectedPointer){
+        event.preventDefault();
+        document.querySelector('html').style.overflow = 'hidden';
+        //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('pointerup', () => {
+        //console.log('STOP !')
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
+    })
+
+    document.addEventListener('pointercancel', () => {
+        //console.log('STOP !')
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
+    })
+}
@@ -0,0 +1,21 @@
+import { loadEvents } from '/js/events.js'
+import { loadStatus } from '/js/status.js'
+import { initCuteTexture } from '/js/cuteTexture.js'
+import { makeItFloat } from '/js/floating.js';
+
+// ======================================== events & statut d'ouverture
+loadEvents();
+loadStatus()
+  .then((status) => {
+    console.log("is LOL open ???", status.open);
+
+    let cuteTexture = initCuteTexture({
+      shaderSource: status.shaderSource
+    });
+
+    cuteTexture.target.style.visibility = "visible"
+  });
+
+// ======================================== floating message window
+
+makeItFloat(document.querySelector('#msgWindow'));
@@ -0,0 +1,44 @@
+import { getDocumentShaderSource } from './cuteTexture.js';
+
+export async function loadStatus(){
+  const uri = new URL('/status/', document.baseURI);
+
+  console.log('folder uri', uri);
+
+
+  const html = await (await fetch(uri, {cache: 'no-store'})).text();
+
+  const remoteDoc = new DOMParser().parseFromString(html, "text/html");
+
+  let shaderSource = getDocumentShaderSource(remoteDoc);
+
+  let target = document.querySelector('#statuSection');
+
+  let hiddenBtn = target.querySelector('a');
+
+  hiddenBtn.style.visibility = 'collapse';
+
+  let status = remoteDoc.querySelector('#lolStatus');
+  //console.log('current status:', status);
+
+  let isOpen = status.innerText.includes('ouvert');
+
+  let icon = remoteDoc.querySelector('link[rel="icon"]');
+  let style = remoteDoc.querySelector('link[data-import="status-style"]');
+
+  let newStyle  = document.createElement('link');
+  newStyle.href = new URL(style.getAttribute("href"), uri).href;
+  newStyle.rel  = "stylesheet";
+  if (style.media) newStyle.media = style.media;
+  if (style.crossOrigin) newStyle.crossOrigin = style.crossOrigin;
+
+  console.log("selected style: ", newStyle);
+
+  document.head.append(newStyle);
+
+  document.head.append(icon);
+
+  target.appendChild(status);
+
+  return { open: isOpen, shaderSource };
+}
@@ -0,0 +1,33 @@
+{
+  "api_compatibility": [
+    "14",
+    "15"
+  ],
+  "space": "Laboratoire Ouvert Lyonnais",
+  "logo": "https://labolyon.fr/images/logo_picto.svg",
+  "url": "https://labolyon.fr/",
+  "location": {
+    "address": "7 Place Louis Chazette 69001 Lyon, France",
+    "lon": 4.8372366,
+    "lat": 45.7732494,
+    "country_code": "FR",
+    "timezone": "Europe/Paris"
+  },
+  "contact": {
+    "irc": "ircs://irc.geeknode.org:6697/labolyon",
+    "ml": "discussions@listes.labolyon.fr",
+    "mastodon": "@labolyon@nerdculture.de",
+    "matrix": "#lol-space:chat.labolyon.fr"
+  },
+  "state": {
+    "icon": {
+      "closed": "https://labolyon.fr/status/status.ferm%C3%A9.png",
+      "open": "https://labolyon.fr/status/status.ouvert.png"
+    },
+    "open": false
+  },
+  "projects": [
+    "https://git.labolyon.fr/",
+    "https://wiki.labolyon.fr/"
+  ]
+}
@@ -0,0 +1,88 @@
+:root {
+  --back-color: #FFFF4D;
+  --main-color: #000000;
+}
+
+/*======================= Page Statut LOL fermé ===*/
+#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{
+  width:100%;
+  height: 100%;
+  border-radius: 33px;
+
+  display:flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+
+        section{
+          width: 333px;
+          height: 117px;
+          background-color: var(--back-color);
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          padding-top: 33px;
+
+          margin-top: -77px;
+
+          border-radius: 33px;
+
+
+                p{
+                  padding: 0;
+                  margin: 0;
+                  text-transform: none;
+                  font-size: 22px;
+                  font-family: 'velvelyne';
+                  font-weight: bold;
+
+                  color: var(--main-color);
+                }
+
+                h3{
+                  width: 277px;
+                  height: 50px;
+
+                  background-color: var(--main-color);
+                  color: var(--back-color);
+
+                  border-radius: 33px;
+
+                  text-transform: uppercase;
+                  text-align: center;
+                  font-size: 33px;
+                  font-family: 'karrik';
+                  font-weight: normal;
+
+                  padding: 0;
+                  margin: 0;
+                  padding-top: 7.77px;
+                }
+        }
+}
@@ -0,0 +1,60 @@
+<!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.svg" />
+    <link rel="stylesheet" data-import="status-style" href="closedStyle.css">
+    <link rel="stylesheet" href="../style/animation.css">
+    <link rel="stylesheet" href="../style/typo.css">
+    <link rel="stylesheet" href="../style/reduced.css">
+    <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>
@@ -0,0 +1,71 @@
+<!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" />
+    <link rel="stylesheet" data-import="status-style" href="openStyle.css">
+    <link rel="stylesheet" href="../style/animation.css">
+    <link rel="stylesheet" href="../style/typo.css">
+    <link rel="stylesheet" href="../style/reduced.css">
+    <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>
@@ -0,0 +1,118 @@
+:root {
+    --back-color: #00FF44;
+    --main-color: #000000;
+}
+
+.closedBackground{
+  visibility: collapse;
+}
+
+.openBackground{
+  position: absolute;
+  visibility: visible;
+  opacity: 1;
+  z-index: -20
+}
+
+.openBackground#texture{
+  z-index: -30;
+}
+
+.openBackground#background{
+  mix-blend-mode: difference;
+  filter: brightness(133%) saturate(33%) grayscale();
+  transform: rotate(180deg);
+  position: absolute;
+  margin-top: -9%;
+  height: 120%;
+  opacity: .777;
+}
+
+/*======================= Page Statut LOL ouvert ===*/
+
+#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{
+  width:100%;
+  height: 100%;
+  border-radius: 33px;
+
+  display:flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+
+        section{
+          width: 333px;
+          height: 117px;
+          background-color: var(--back-color);
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          padding-top: 33px;
+
+          margin-top: -77px;
+
+          border-radius: 33px;
+
+
+                p{
+                  padding: 0;
+                  margin: 0;
+                  text-transform: none;
+                  font-size: 22px;
+                  font-family: 'velvelyne';
+                  font-weight: bold;
+
+                  color: var(--main-color);
+                }
+
+                h3{
+                  width: 277px;
+                  height: 50px;
+
+                  background-color: var(--main-color);
+                  color: var(--back-color);
+
+                  border-radius: 33px;
+
+                  text-transform: uppercase;
+                  text-align: center;
+                  font-size: 33px;
+                  font-family: 'karrik';
+                  font-weight: normal;
+
+                  padding: 0;
+                  margin: 0;
+                  padding-top: 7.77px;
+                }
+        }
+}
+
+#lolStatus{
+  animation: blink 3.33s infinite;
+}
@@ -0,0 +1,24 @@
+#!/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
+SPACE_JSON="$(dirname $0)/../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
@@ -0,0 +1,37 @@
+@keyframes blink {
+  0%   { color: var(--main-color);}
+  15%  { color: var(--back-color);}
+  35%  { color: var(--back-color);}
+  50%  { color: var(--main-color);}
+  65%  { color: var(--back-color);}
+  85%  { color: var(--back-color);}
+  100%  { color: var(--main-color);}
+}
+
+@keyframes blinkBack {
+  0%   { background-color: var(--back-color);}
+  15%  { background-color: var(--main-color);}
+  35%  { background-color: var(--main-color);}
+  50%  { background-color: var(--back-color);}
+  65%  { background-color: var(--main-color);}
+  85%  { background-color: var(--main-color);}
+  100%  { background-color: var(--back-color);}
+}
+
+@keyframes blinkBorder {
+  0%   { border-color: var(--main-color);}
+  15%  { border-color: var(--accent-color);}
+  35%  { border-color: var(--accent-color);}
+  50%  { border-color: var(--main-color);}
+  65%  { border-color: var(--accent-color);}
+  85%  { border-color: var(--accent-color);}
+  100%  { border-color: var(--main-color);}
+}
+
+@keyframes float {
+  0%   { transform: translateY(0px); }
+  35%  { transform: translateY(1px); }
+  50%  { transform: translateY(-10px); }
+  65%  { transform: translateY(1px); }
+  100% { transform: translateY(0px); }
+}
@@ -0,0 +1,188 @@
+.textBtnStyle{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+
+  border-radius: 16.1px;
+  border-style: solid;
+  border-width: thin;
+  padding: 3.33px;
+  padding-left: 7.77px;
+
+
+  font-family: 'karrik';
+  font-size: 16.1px;
+  text-transform: uppercase;
+
+  border-color: var(--main-color);
+  color: var(--main-color);
+  background-color: var(--back-color);
+}
+
+.textBtnStyle:hover{
+  color: var(--back-color);
+  background-color: var(--main-color);
+  border-color: var(--back-color);
+}
+
+.iconBtnStyle{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  text-align: center;
+
+  border-radius: 16.1px;
+  border-style: solid;
+  border-width: thin;
+
+  border-color: var(--main-color);
+  color: var(--main-color);
+  background-color: var(--back-color);
+}
+.icon{
+  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{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+
+  border-radius: 0;
+  border-style: solid;
+  border-width: thin;
+  padding: 7.77px;
+
+  border-color: var(--main-color);
+  color: var(--main-color);
+  background-color: var(--back-color);
+
+  font-family: 'velvelyne';
+  font-weight: bold;
+  font-size: 16.1px;
+  box-sizing: border-box;
+}
+
+.transparentBox{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+
+  padding: 7.77px;
+
+  color: var(--back-color);
+  background-color: transparent;
+
+  font-family: 'karrik';
+  text-transform: uppercase;
+  font-size: 16.1px;
+  box-sizing: border-box;
+}
+
+.borderBox{
+  width: 95%;
+  height: 95%;
+  position: relative;
+  z-index: 0;
+
+  border-radius: 0;
+  border-style: solid;
+  border-width: medium;
+  padding: 7.77px;
+  padding-right: 13.12px;
+
+  border-color: var(--main-color);
+  color: var(--back-color);
+  background-color: transparent;
+
+  box-sizing: border-box;
+}
+
+.floatingWindow{
+  position: relative;
+  z-index: 3333;
+
+  width: auto;
+  height: auto;
+
+  background-color: var(--back-color);
+  border-color: var(--main-color);
+  border-radius: 16.1px;
+  border-style: solid;
+  border-width: thin;
+
+  overflow: hidden;
+  box-sizing: content-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  .title{
+    position: relative;
+    top: 0;
+    width: 100%;
+    height: 44px;
+
+    background-color: var(--main-color);
+    color: var(--back-color);
+
+    text-transform: none;
+    font-size: 15px;
+    font-family: 'velvelyne';
+    font-weight: bold;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-left: 16.1px;
+    padding-right: 7.77px;
+
+    box-sizing: border-box;
+    cursor: move;
+
+    h4{
+      pointer-events: none;
+    }
+
+    .iconBtnStyle{
+      width: 27px;
+      height: 27px;
+      pointer-events: all;
+
+      .icon{
+        height: 13.12px;
+        width: auto;
+      }
+    }
+
+  }
+}
@@ -0,0 +1,39 @@
+input {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+
+a{
+  text-decoration: none;
+  color: inherit;
+  cursor: alias;
+}
+
+button{
+  cursor: cell;
+}
+
+a p{
+  cursor:inherit;
+}
+
+a button{
+  cursor: inherit;
+}
+
+p,h1,h2,h3,h4{
+  cursor: inherit;
+  pointer-events: none;
+  padding: 0;
+  margin: 0;
+}
+
+ul,ol {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+dialog{
+  padding: 0;
+}
@@ -0,0 +1,663 @@
+/*================ GAMME COLOR ======================*/
+:root{
+  --back-color: #FFFF4D;
+  --main-color: #000000;
+}
+
+/*================ BODY ======================*/
+html{
+  margin: 0;
+  padding: 0;
+  scrollbar-color: var(--back-color) var(--main-color);
+  background-color: var(--main-color);
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+  z-index: -33;
+}
+
+body{
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+  overflow-y: hidden;
+  position: relative;
+  z-index: -33;
+  box-sizing: border-box;
+}
+/*================ STRUCTURE ======================*/
+
+header{
+  width: 100%;
+  height: 93px;
+  margin: 0;
+  position: relative;
+  top:0;
+  z-index: 0;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  border-style: solid;
+  border-width: 0 0 1.61px 0;
+
+  border-color: var(--main-color);
+  background-color: var(--back-color);
+
+        h1{
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          gap: 13.12px;
+          padding-left: 13.12px;
+          margin-bottom: 13.12px;
+                img{
+                  height: 50px;
+                  width: auto;
+                }
+
+                .cool-name{
+                  font-family: 'pressStart';
+                  font-size: 50px;
+                  padding-top: 13.12px;
+
+
+                  .trans-symbol{
+                    font-family: 'velvelyne';
+                    font-weight: bold;
+                  }
+                }
+
+                .plain-name{
+                  position: relative;
+                  z-index: -33;
+                  opacity: 0;
+                  width: 0;
+                }
+        }
+
+        nav > ul{
+          width: auto;
+          height: 100%;
+          margin: 0;
+
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+          margin-right: 7.77px;
+          margin-top: 13.12px;
+
+                .textBtnStyle{
+                  border-radius: 0;
+                  width: 117px;
+                }
+        }
+
+}
+
+noscript > video{
+  height: 110%;
+  width: auto;
+  position: absolute;
+  inset: 0;
+  z-index: -32;
+}
+
+.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{
+  visibility: collapse;
+}
+
+
+main{
+  position: relative;
+  z-index: -33;
+  overflow: hidden;
+
+      #homeContent{
+        height: 66vh;
+        width: 100%;
+        position:relative;
+        z-index: 0;
+        display: grid;
+        grid-template-columns: 2.5fr 2fr 1fr;
+        grid-template-rows: 1fr 1.5fr;
+
+              .access-info-box {
+                grid-column: 2 / 4;
+                grid-row: 1;
+                font-size: 15px;
+                z-index: 5;
+                padding-top: 27px;
+
+                address {
+                  margin-bottom: 2em;
+                }
+              }
+
+              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;
+
+                                h4{
+                                  user-select: none;
+                                  pointer-events: all;
+                                }
+
+                                      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;
+                width: 100%;
+                height: 100%;
+
+                      h2{
+                        text-transform: uppercase;
+                        font-family: 'karrik';
+                        font-size: 22px;
+                        line-height: 1em;
+                      }
+                      small{
+                        text-transform: none;
+                        font-size: 15px;
+                        font-family: 'velvelyne';
+                        font-weight: bold;
+                        line-height: 0.3em;
+                        padding-left: 7.77px;
+                      }
+              }
+
+              #hourSection{
+                grid-column: 3;
+                grid-row: 2;
+                width: 100%;
+                height: 77%;
+                align-self: end;
+                justify-self: end;
+                padding: 0;
+
+                      h3{
+                        width: 100%;
+                        margin-bottom: 16.1px;
+
+                        font-family: 'karrik';
+                        text-transform: uppercase;
+                        font-weight: normal;
+                        font-size: 14px;
+
+                        border-radius: 0;
+                        border-style: solid;
+                        border-width: thin;
+
+                        padding: 3.33px;
+                        margin-bottom: 3.33px;
+                        box-sizing: border-box;
+
+                        border-color: var(--main-color);
+                      }
+
+                      ol{
+                        padding-left: 3.33px;
+
+                        font-family: 'karrik';
+                        text-transform: uppercase;
+                        font-weight: normal;
+                        font-size: 11px;
+
+                        strong{
+                          font-family: 'velvelyne';
+                          font-weight: bold;
+                          font-size: 16.1px;
+                        }
+
+                        li{
+                          margin-top: 16.1px;
+                        }
+                      }
+              }
+
+              #planSection{
+                grid-column: 1 / 3;
+                grid-row: 2;
+                color: var(--back-color);
+                justify-self: end;
+
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+
+                #planContainer{
+                  width: 100%;
+                  height: max-content;
+                  margin-left: 13.12px;
+                  margin-top: 0;
+                }
+
+                img{
+                  position: relative;
+                  z-index: 0;
+                  width: 90%;
+                  height: auto;
+                }
+
+                svg{
+                  fill: currentColor;
+                  position: absolute;
+                  z-index: -1;
+                  width: 90%;
+                  height: auto;
+                  top: 4.44px;
+                  left: -1.61px;
+                }
+              }
+
+              #extLinkSection{
+                grid-column: 3;
+                grid-row: 1;
+                width: 77%;
+                height: 122%;
+                justify-self: end;
+
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: flex-end;
+                margin-right: 16.1px;
+                margin-top: 7.77px;
+                gap: 13.12px;
+
+                a{
+                  cursor: alias;
+                        img{
+                          width: auto;
+                          height: 55px;
+                          pointer-events: none;
+                        }
+                }
+
+              }
+
+              #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{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0;
+        height: 20vh;
+
+            .textBtnStyle{
+              width: 66px;
+              font-size: 11px;
+              margin-right: 7.77px;
+            }
+
+            #statusDesc{
+              width: 77%;
+              padding: 7.77px;
+              padding-right: 33px;
+              font-size: 16.1px;
+              line-height: 1.1em;
+
+              small{
+                font-size: 13.12px;
+                line-height: 0.333em;
+              }
+            }
+
+            #lolStatus{
+              position: relative;
+              z-index: 33;
+              width: 40%;
+              height: 50px;
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+
+              font-family: 'karrik';
+              text-transform: uppercase;
+              font-size: 22px;
+              line-height: 1em;
+
+              padding-left: 16.1px;
+              box-sizing: border-box;
+              border-radius: 22px 0 0 22px;
+
+              background-color: var(--main-color);
+              color: var(--back-color);
+
+                    small{
+                      font-size: 1px;
+                      opacity: 0;
+                    }
+            }
+      }
+
+      #extraContent{
+        width: 100%;
+        height:auto;
+        position: relative;
+        z-index: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+              dl dt {
+                clear: both;
+                float: left;
+                margin-right: 1ex;
+                font-family: "karrik", sans-serif;
+                text-transform: uppercase;
+              }
+
+              dl dd {
+                margin-left: 0;
+                margin-bottom: 1em;
+              }
+
+              #aboutSection{
+                padding: 13.12px;
+                padding-right: 33px;
+                font-size: 16.1px;
+                line-height: 1.333em;
+                flex-shrink: 0;
+                box-sizing: border-box;
+              }
+
+              #eventSection{
+                position: relative;
+                z-index: -1;
+                height: 100%;
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: flex-start;
+                gap: 0;
+                padding-bottom: 16.1px;
+                padding-right: 16.1px;
+
+                overflow-y: scroll;
+
+                        h3{
+                          position: relative;
+                          margin-bottom: 7.77px;
+                        }
+
+
+                        article{
+                                h4{
+                                  padding: 16.1px;
+                                }
+
+                                h4:hover{
+                                  color: var(--back-color);
+                                  background-color: var(--main-color);
+                                }
+
+                                a{
+                                  margin-right: 33px;
+                                }
+
+                                .date{
+                                  padding: 16.1px;
+                                }
+                        }
+
+                        .solidBox{
+                          width: 100%;
+                          height: auto;
+                          display: flex;
+                          flex-direction: row;
+                          justify-content: space-between;
+                          align-items: center;
+                          padding: 0;
+                          box-sizing: border-box;
+                          flex-shrink: 0;
+                        }
+
+                        .solidBox:hover{
+                          color: var(--back-color);
+                          background-color: var(--main-color);
+                          border-color: var(--back-color);
+                        }
+
+                        .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;
+
+                          .icon{
+                            transform: rotate(45deg);
+                          }
+                        }
+
+                        details{
+                          width: 100%;
+                          height: 100%;
+                          cursor: copy;
+                          overflow: hidden;
+
+                                summary{
+                                  display: flex;
+                                  flex-direction: row;
+                                  align-items: center;
+                                  justify-content: space-between;
+                                  width: 100%;
+                                  box-sizing: border-box;
+                                  list-style-type: none;
+                                  padding: 16.1px;
+                                }
+
+                                article{
+                                  width: 100%;
+                                  cursor: default;
+                                  text-transform: none;
+                                }
+                        }
+                }
+      }
+
+      #webRingSection{
+        width: 100%;
+        padding: 13.12px;
+        padding-bottom: 16.1px;
+        min-height: 44px;
+        display: grid;
+        background-color: var(--back-color);
+        border-color: var(--main-color);
+        border-style: solid;
+        border-width: thin 0 0 0;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 7.77px;
+
+              a{
+                width: 100%;
+                height: 31px;
+
+                      img{
+                        width: 100%;
+                      }
+
+                      .needOutline{
+                        border-color: var(--main-color);
+                        border-style: solid;
+                        border-width: thin;
+                      }
+              }
+
+              
+      }
+}
@@ -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;
+    }
+}
@@ -0,0 +1,328 @@
+/*===========================Moyen format : Tablette et petite fenêtres PC ===*/
+@media(min-width: 650px){
+  header{
+    height: 60px;
+
+          h1{
+            margin-bottom: 5px;
+
+                  img{
+                    height: 40px;
+                  }
+          }
+          nav > ul{
+
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+            height: 44px;
+            margin-top: 16.1px;
+            margin-right: 13.12px;
+            min-width: 444px;
+            box-sizing: border-box;
+
+                  li{
+                    height: 100%;
+                  }
+
+                  .textBtnStyle{
+                    border-radius: 0;
+                    width: 93px;
+                    height: 100%;
+                  }
+          }
+  }
+
+  main{
+    #homeContent{
+      height: 77vh;
+      grid-template-columns: 2fr 2fr 1fr;
+      grid-template-rows: 0.7fr 2fr;
+
+      .access-info-box {
+        padding-top: 0;
+      }
+
+          aside{
+            grid-column: 3;
+            margin-bottom: 33px;
+            margin-right: 33px;
+
+            #msgWindow{
+              left: unset;
+              right: 77px;
+              top: 161px;
+            }
+          }
+
+          #titleSection{
+            height: 110%;
+                  h2{
+                    font-size: 27px;
+                  }
+
+                  p{
+                    font-size: 20px;
+                  }
+          }
+
+          #hourSection{
+            grid-column: 1;
+            width: 50%;
+            height: 100%;
+            justify-self: start;
+          }
+
+          address{
+            padding-top: 16.1px;
+          }
+
+          #planSection{
+            grid-column: 2 / 4;
+                  #planContainer{
+                    width: 110%;
+                    height: auto;
+                    margin-left: -88px;
+                    margin-top: -50px;
+
+                          @media(min-width: 800px){
+                            margin-top: -88px;
+                          }
+                  }
+          }
+
+          #extLinkSection{
+            justify-content: flex-start;
+            padding-top: 33px;
+          }
+
+          #adhesionSection{
+            justify-content: flex-end;
+            margin-top: 0;
+            margin-bottom: 33px;
+            width: 77%;
+          }
+
+      }
+      #statuSection{
+            .textBtnStyle{
+              font-size: 16.1px;
+              width: 117px;
+              margin-right: 33px;
+            }
+
+            #statusDesc{
+              font-size: 16.1px;
+              padding-left: 33px;
+            }
+      }
+
+      #extraContent{
+
+
+              #aboutSection{
+
+              }
+
+              #eventSection{
+                       #eventContent{
+                         li{
+                           .iconBtnStyle{
+                              right: 3.33%;
+                           }
+                         }
+                       }
+              }
+      }
+
+      #webRingSection{
+        grid-template-columns: repeat(6, 1fr);
+        min-height: 66px;
+      }
+    }
+  }
+
+
+
+/*===========================Grand format : écrans larges et grands ===*/
+@media(min-width: 1300px){
+  header{
+    nav > ul{
+
+      font-size: 27px;
+
+            li{
+              height: 100%;
+            }
+
+            .textBtnStyle{
+              padding-left: 16.1px;
+              width: 133px;
+            }
+    }
+  }
+
+  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%;
+          }
+
+          #hourSection{
+            height: 77%;
+            width: 44%;
+
+                  h3{
+                    font-size: 20px;
+                  }
+
+                  ol{
+                    font-size: 16.1px;
+                    padding-left: 16.1px;
+                          strong{
+                            font-size: 22px;
+                          }
+                  }
+          }
+
+          address{
+            font-size: 22px;
+            margin-top: 13.12px;
+          }
+
+          #planSection{
+                  #planContainer{
+                    width: 100%;
+                    height: auto;
+                    margin-left: -88px;
+                    margin-top: -133px;
+                  }
+          }
+
+          #extLinkSection{
+            a img{
+              height: 77px;
+            }
+          }
+
+          #adhesionSection{
+            width: 50%;
+            margin-left: 16.1px;
+            margin-bottom: 77px;
+
+            .textBtnStyle{
+              height: 44px;
+              font-size: 20px;
+            }
+          }
+
+    }
+
+    #statuSection{
+            #statusDesc{
+              padding-left: 77px;
+              font-size: 20px;
+            }
+            #lolStatus{
+              font-size: 33px;
+              height: 77px;
+              width: 50%;
+              border-radius: 33px 0 0 33px;
+            }
+
+            .textBtnStyle{
+              font-size: 22px;
+              margin-right: 33px;
+              padding-left: 16.1px;
+            }
+    }
+
+    #extraContent{
+      height: 100%;
+      flex-direction: row;
+      overflow: hidden;
+
+            #aboutSection{
+              font-size: 22px;
+              max-width: 50vw;
+            }
+
+            #eventSection{
+                    #eventContent{
+                            li{
+                                    .iconBtnStyle{
+                                      width: 44px;
+                                      height: 44px;
+                                      border-radius: 22px;
+                                      right: 1.61%;
+                                    }
+
+                                    .icon{
+                                      height: 22px;
+                                    }
+                            }
+
+                            details{
+                              summary{
+                                .title{
+                                  font-size: 22px;
+
+                                  h4{
+                                    font-size: 27px;
+                                  }
+                                }
+
+                                .resume{
+                                  font-size: 16.1px;
+                                }
+                              }
+                              .description{
+                                font-size: 16.1px;
+                              }
+                            }
+                    }
+            }
+    }
+
+    #webRingSection{
+        grid-template-columns: repeat(8, 1fr);
+        min-height: 77px;
+      }
+  }
+}
@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'karrik';
+  src: url('typo/Karrik-Italic.woff2') format('woff2');
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'karrik';
+  src: url('typo/Karrik-Regular.woff2') format('woff2');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('typo/Velvelyne-Book.ttf') format('truetype');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'avara';
+  src: url('typo/Avara-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'pressStart';
+  src: url('typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
Author	SHA1	Message	Date
vgaNAR6ta	5a4c624312	fix bug et meilleure perf import css status	2026-09-09 01:14:33 +02:00
vgaNAR6ta	ca158e0b0f	ajout d'un WEBRING <3<3<3	2026-09-05 21:40:11 +02:00
vgaNAR6ta	1148e062a9	bug css section about et padding adress	2026-09-05 18:57:35 +02:00
vgaNAR6ta	93286bd448	lien statut sans js et suppression de base dans les pages ouvert et fermé	2026-09-05 17:59:08 +02:00
vgaNAR6ta	58380ed71e	ménage let/const & console.log	2026-09-05 17:53:40 +02:00
vgaNAR6ta	8f6907d5a6	suppresion de qq console log et un script inutilisé	2026-09-02 23:38:01 +02:00
vgaNAR6ta	0b6c2a1303	ajout de base et correction du script pour sélectionner le style	2026-09-02 23:04:44 +02:00
vgaNAR6ta	4f2c02a7a9	restauration du index ouvert et chemins relatifs	2026-09-02 16:57:33 +02:00
vgaNAR6ta	0dec261119	animation survol sur les évènements	2026-09-02 16:47:56 +02:00
vgaNAR6ta	11f01368ae	jpeg prog + compression des images des permanences	2026-09-02 16:46:17 +02:00
vgaNAR6ta	33462fc640	icon space api et modif json	2026-09-02 16:45:29 +02:00
epickiwi	077db7ab6a	Suppression des affiches de test	2026-09-02 10:26:39 +02:00
epickiwi	8bdb628d61	Restoration du blend file du plan	2026-09-02 10:25:51 +02:00
epickiwi	325744e90e	Supression des TODO du readme	2026-09-02 10:19:56 +02:00
epickiwi	5470b24b2c	Merge branch 'REWORK' of git.labolyon.fr:vgaNAR6ta/LOLv333 into v333	2026-09-02 10:16:42 +02:00
epickiwi	d314294394	Wiped old site	2026-09-02 10:14:30 +02:00
vgaNAR6ta	dda83b7d4d	Modification du texte, du style et dequeerisation	2026-09-02 00:51:16 +02:00
vgaNAR6ta	24334511f3	btn désactivé et ajustement tex	2026-08-24 22:20:39 +02:00
vgaNAR6ta	7dc68ad0e5	accessibilité et open graph	2026-08-24 21:22:29 +02:00
vgaNAR6ta	c7a07c3b7c	edit: ajout du spaceapi	2026-08-24 03:29:49 +02:00
vgaNAR6ta	00b4c3e9bd	lien matrix et reduced motion dans les index ouvert et fermé	2026-08-20 19:27:38 +02:00
vgaNAR6ta	0bd2747852	chemins absolu js	2026-08-20 18:35:30 +02:00
vgaNAR6ta	953281f3d2	chemin absolus & probleme flex-shrink	2026-08-20 18:33:51 +02:00
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
epickiwi	75789ff6a8	Suppression de l'affiche drags and nerds	2026-08-06 15:30:13 +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
vgaNAR6ta	e95c848296	edit: html nouvelle section event sans js	2026-08-02 14:08:20 +02:00
vgaNAR6ta	a9dabeb5eb	edit: todo list	2026-08-01 21:48:59 +02:00
vgaNAR6ta	32a14714ec	edit: animation se modifie avec le statut d'ouverture + bug css import dans main.css	2026-07-31 06:23:50 +02:00
vgaNAR6ta	384e8494e7	edit: réglages un peu mieux, problème cadrage vidéo sur tel	2026-07-30 21:31:35 +02:00
vgaNAR6ta	81f39a62a2	edit: animation avec js possible mtn, à régler mieux pour plus de précision	2026-07-30 21:24:37 +02:00
vgaNAR6ta	e50b0819c7	edit: la fenetre évènement bouge sur pc ^^ + ajustement responsive	2026-07-30 20:31:19 +02:00
vgaNAR6ta	27f4c25b10	edit: tout prêt niveau front sans contenu ??? (à verifier) + orga js	2026-07-27 23:41:50 +02:00
vgaNAR6ta	6d95e9d80c	edit: un peu de rangement, ajout bouton plus évènement, ok en version dégradée, problème itération (ne garde pas en mémoire les poster des évènements, null au 2e tour) et style qui ne change pas dans js	2026-07-27 22:00:13 +02:00
vgaNAR6ta	ad50dd36cb	edit: ajout du readme pour se souvenir des trucs à faire	2026-07-26 22:06:25 +02:00
vgaNAR6ta	79f51146c1	edit: création des pages statut, sans interactivité pcq je comprends pas comment faire ^^	2026-07-26 20:54:12 +02:00
vgaNAR6ta	13b3b06d11	edit: version html css propre pour version dégradé sans js + responsive pour écrans larges	2026-07-26 19:55:23 +02:00
vgaNAR6ta	4e82328ff9	edit: évènements en version dégradée ? à voir + pb import js	2026-07-26 06:36:21 +02:00
vgaNAR6ta	b7b3497a0b	edit: version tel sans event + modif à faire + organisation des fichiers + css ouverture du local	2026-07-25 20:59:15 +02:00
vgaNAR6ta	e6ae40dc51	edit: html tout propre et début css	2026-07-23 19:14:23 +02:00
vgaNAR6ta	1d622924fb	init: version basique sans js et sans menu sur tel + division en 2 fichier html pour lolOpener	2026-07-23 02:57:36 +02:00
epickiwi	2fc2fed5f1	Suppression lien presentation	2026-03-28 15:46:33 +01:00
epickiwi	4ba7494fd7	Merge branch 'ajout-description'	2026-03-28 15:45:40 +01:00
epickiwi	471f0e993d	Fini la trixie release party	2026-03-28 15:44:48 +01:00
epickiwi	bcef3d80f0	Pas de retour a la ligne dans le nav	2026-03-28 15:44:43 +01:00
epickiwi	da4cf17781	Added drags and nerds	2026-03-28 11:04:51 +01:00
epickiwi	654a7165a8	Removed trixie release party	2026-03-28 11:03:39 +01:00
mirsal	87bf475e8d	spaceapi: Signalement de compatibilité avec la version 14	2025-12-11 09:16:51 +00:00
mirsal	0cd5df6fb8	Merge pull request 'Support initial de space-api' (#2 ) from space-api into main Reviewed-on: #2 Reviewed-by: Vincent F. <vincent@noreply.localhost>	2025-12-10 20:43:17 +01:00
mirsal	1834dec5b1	Support initial de space-api Ce commit ajoute un support rudimentaire de space-api: (voir https://spaceapi.io/docs/) Il consiste en deux parties: * un fichier spaceapi/space.json contenant les infos du lol * une mise à jour de status/set-status.sh qui utilise jq pour répercuter les changements de l'état d'ouverture du lolcal TODO: Ajouter nos capteurs (ce n'est pas trivial, amha, il faudra revoir l'architecture du système pour le faire correctement)	2025-12-10 19:36:52 +00:00
vincent	59e90b5a53	Ajout page de présentation du LOL	2025-11-23 21:01:04 +01:00
epickiwi	41af47adbd	Petite typo	2025-08-07 22:45:45 +02:00
epickiwi	0c08cdc165	Ajout del'affiche de la release party Trixie	2025-08-07 22:38:40 +02:00
alice264	7d9fd58a42	Cest la fete de la musique :D !!!	2025-06-17 19:29:59 +02:00
epickiwi	d135909f81	Ajout de l'affiche de l'algorave	2025-05-06 10:31:29 +02:00
epickiwi	17a37f17e7	Un peu de web semantique dans votre site ?	2025-01-23 17:44:19 +01:00
vincent	8c897dd7de	Rajout de la mention prix libre	2025-01-22 10:47:29 +01:00
epickiwi	56a9bc1b24	Bye by les pizzas	2025-01-21 22:33:56 +01:00
vincent	dcf7a3118c	Restore normal status on the website	2025-01-03 19:19:55 +01:00
epickiwi	3cfd026a9a	Fix diacritics	2024-12-23 11:07:03 +01:00
epickiwi	f643bfc311	LOL Closed on 25 and 31 of december	2024-12-23 11:06:06 +01:00
epickiwi	a2b29d76c6	Suppression de l'affiche jdll	2024-07-12 17:04:18 +02:00
vincent	fac944673a	Ajout lien Matrix	2024-06-11 19:04:48 +02:00
vincent	afd723f782	Ajout balise rel=me	2024-05-20 17:38:18 +02:00
epickiwi	5a70198b0b	Ajout de l'affiche des JDLL 2024	2024-05-04 13:59:56 +02:00
epickiwi	534782af30	Suppression de l'affiche du DAC	2024-03-02 15:28:41 +01:00
epickiwi	22aca52880	Mobile !	2024-01-13 16:45:10 +01:00
epickiwi	2beb330201	Added access instructions	2024-01-13 16:39:43 +01:00
epickiwi	91da5b850d	Fix	2023-11-08 19:13:43 +01:00
epickiwi	c0275717e4	Revert "fix script" This reverts commit `7473a263af`.	2023-11-08 19:09:05 +01:00
epickiwi	7473a263af	fix script	2023-11-08 19:08:24 +01:00
epickiwi	031db95c54	Fixed script	2023-11-08 19:07:28 +01:00
epickiwi	b7d883bd9a	Added mastodon link	2023-11-08 19:04:43 +01:00
epickiwi	a2e5caa2f8	Updated dac affiche	2023-11-08 19:02:50 +01:00
epickiwi	ca0351511a	Added status	2023-11-04 17:42:10 +01:00
epickiwi	072b907dd1	Merge branch 'main' into feat/status	2023-11-04 17:14:17 +01:00
epickiwi	50c14a388b	Added favicon	2023-10-29 15:56:52 +01:00
epickiwi	0b25a6c4b1	Updated wiki link	2023-10-29 13:09:51 +01:00
epickiwi	05fa968c2f	Moved status to ici.labolyon.fr	2023-08-16 01:33:10 +02:00
epickiwi	62f849e147	Merge branch 'master' into feat/status	2023-08-16 01:02:58 +02:00
epickiwi	e9e1a1f241	Updated close logo	2023-06-15 14:27:59 +02:00
epickiwi	e04379db6d	fix typo	2023-06-15 12:15:55 +02:00
epickiwi	ee72d9e12b	Ajout du status fermé et flushing a gauche	2023-06-15 12:15:22 +02:00
epickiwi	1cde507372	Merge branch 'feat/status' of git.labolyon.fr:epickiwi/site-lol into feat/status	2023-06-14 15:13:00 +02:00
epickiwi	229d044790	Ajout de l'ouverture du LOL	2023-06-14 15:11:24 +02:00
epickiwi	c8459c0b3b	Ajout de l'ouverture du LOL	2023-06-10 22:24:21 +02:00