From d493aceb2c4332b19c1dbcc15535aa8dd483beec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Herg=C3=A8s?= <william@herges.fr>
Date: Sun, 10 Aug 2025 13:57:40 +0200
Subject: feat(producteur): better responsiveness

---
 src/component/MosaicBackground.astro |  4 ++--
 src/component/VideoAuto.astro        |  6 +++---
 src/pages/legal.astro                |  8 ++++----
 src/scss/style.scss                  | 21 +++++++++++++++------
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro
index 8c38bcf..4d110d2 100644
--- a/src/component/MosaicBackground.astro
+++ b/src/component/MosaicBackground.astro
@@ -30,7 +30,7 @@ const { height = "400" } = Astro.props;
               line.appendChild(current.cloneNode(true));
               currentWidth += ratio * height;
             } else {
-              console.error("is NaN", current)
+              console.error("is NaN", current);
             }
           }
         }
@@ -45,5 +45,5 @@ const { height = "400" } = Astro.props;
       }
       e.replaceChildren(...newChildren);
     });
-  })
+  });
 </script>
diff --git a/src/component/VideoAuto.astro b/src/component/VideoAuto.astro
index 38282f6..ddfe1c8 100644
--- a/src/component/VideoAuto.astro
+++ b/src/component/VideoAuto.astro
@@ -7,10 +7,10 @@ const { src } = Astro.props;
 </video>
 
 <script>
-  window.addEventListener('load', () => {
-    document.querySelectorAll('video').forEach(video => {
+  window.addEventListener("load", () => {
+    document.querySelectorAll("video").forEach((video) => {
       if (window.screen.width < 1000) return;
       video.autoplay = true;
     });
-  })
+  });
 </script>
diff --git a/src/pages/legal.astro b/src/pages/legal.astro
index 2b41b4a..01ab8cc 100644
--- a/src/pages/legal.astro
+++ b/src/pages/legal.astro
@@ -42,13 +42,13 @@ import Base from "../layout/Base.astro";
       <h3>3. Vie privée</h3>
       <p>
         Ce site ne collecte aucune information personnelle à part les informations purement
-        nécessaires aux protocoles permettant l'envoie de ce page (à votre adresse IP) en vertu de
-        l'Article 5(3) de la directive du 12 juillet 2002 sur la protection de la vie privée dans le
-        secteur des communications électroniques.
+        nécessaires aux protocoles permettant l'envoie de cette page (à votre adresse IP) en vertu
+        de l'Article 5(3) de la directive du 12 juillet 2002 sur la protection de la vie privée dans
+        le secteur des communications électroniques.
       </p>
       <p>Ce site est hébergé par Infomaniak Network SA, Les Acacias, Genève, Suisse.</p>
       <p>
-        Les données personnelles récoltées nécessaires sont traités par Infomaniak Network SA
+        Les données personnelles récoltées nécessaires sont traitées par Infomaniak Network SA
         conformément à leur <a
           href="https://www.infomaniak.com/fr/cgv/politique-de-confidentialite"
           target="_blank">politique de confidentialité</a
diff --git a/src/scss/style.scss b/src/scss/style.scss
index a3c4639..bdb052a 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -3,6 +3,11 @@
 $background: hsl(15, 20%, 5%);
 $text: hsl(0, 0%, 100%);
 
+$bp-large: 1200px;
+$bp-mid: 1000px; // video disabled
+$bp-small: 750px;
+$bp-tiny: 500px;
+
 body {
   font-size: 22px;
   background: $background;
@@ -41,8 +46,9 @@ p {
 }
 
 ul {
-  list-style: disc inside;
+  list-style: disc outside;
   margin-top: -0.5rem;
+  margin-left: 1em;
 }
 
 li {
@@ -154,21 +160,23 @@ section[data-scroll] .content {
   background-attachment: fixed;
 
   & .blur {
-    position: absolute;
-    backdrop-filter: blur(50px) brightness(0.8);
-    inset: 0;
+    backdrop-filter: blur(40px) brightness(0.7) saturate(0.8) sepia(0.2);
     display: flex;
     justify-content: center;
-    min-height: 100%;
+    width: 100%;
+    min-height: 100vh;
   }
   & .content {
     padding: 4rem;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     align-items: center;
     justify-items: center;
     min-height: 75vh;
     gap: 4rem;
+    @media only screen and (max-width: $bp-large) {
+      grid-template-columns: 1fr;
+    }
   }
   & .text {
     display: flex;
@@ -178,5 +186,6 @@ section[data-scroll] .content {
   }
   & img {
     box-shadow: 0 0 150px $background;
+    width: 100%;
   }
 }
-- 
cgit v1.2.3