edit: reduced motion mode

index.html

@@ -10,6 +10,8 @@
     <link rel="stylesheet" href="style/main.css">
 
     <link rel="stylesheet" href="style/responsive.css">
+
+    <link rel="stylesheet" href="style/reduced.css">
       <!-- TEST CCS OUVERTURE
         <link rel="stylesheet" href="status/openStyle.css">
       -->
@@ -201,24 +203,13 @@
                 </article>
             </section>
       </section>
-      <video src="/assets/video/close.webm" id="texture" class="closed" autoplay muted loop>
-
-      </video>
+      <noscript>
+        <video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop></video>
+        <video src="/assets/video/closed.webm" class="openBackground" autoplay muted loop></video>
+      </noscript>
       <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
       <canvas class="cute-texture"></canvas>
     </main>
-
-    <section class="floatingWindow" id="posterWindow">
-      <div class="posterTitle">
-        <h4>test</h4>
-        <button type="button" name="close" class="iconBtnStyle" id="posterCloseBtn">
-          <svg viewBox="0 0 53.73 53.59" class="icon">
-            <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
-          </svg>
-        </button>
-      </div>
-      <article id="posterContainer"></article>
-    </section>
     <!-- SCRIPT PRINCIPAL -->
         <script type="module" src="./js/main.js"></script>
     

style/main.css

@@ -4,21 +4,16 @@
   --main-color: #000000;
 }
 
-/*================ ANIMATION ======================*/
-
-
-/*================ DESACT DEFAULT ======================*/
-
-
 /*================ BODY ======================*/
 html{
   margin: 0;
   padding: 0;
   scrollbar-color: var(--back-color) var(--main-color);
   background-color: var(--main-color);
-  min-height: 100vh;
+  height: 100%;
   width: 100%;
   overflow-x: hidden;
+  overflow-y: scroll;
   position: relative;
   z-index: -33;
 }
@@ -26,13 +21,13 @@ html{
 body{
   margin: 0;
   padding: 0;
+  width: 100%;
+  height: auto;
+  overflow-y: hidden;
   position: relative;
   z-index: -33;
+  box-sizing: border-box;
 }
-
-/*================ CLASSES COMMUNES ======================*/
-
-
 /*================ STRUCTURE ======================*/
 
 header{
@@ -106,7 +101,7 @@ header{
 
 }
 
-video{
+noscript > video{
   height: 110%;
   width: auto;
   position: absolute;
@@ -114,6 +109,14 @@ video{
   z-index: -32;
 }
 
+.cute-texture-video{
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -33;
+}
+
 .openBackground{
   visibility: collapse;
 }
@@ -139,7 +142,7 @@ main{
                 align-self: end;
                 justify-self: end;
                 color: var(--main-color);
-
+13.12px
                 position: relative;
 
                 z-index: 33;
@@ -449,7 +452,6 @@ main{
                           justify-content: space-between;
                           align-items: center;
                           padding: 16.1px;
-
                         }
 
                         .solidBox:has(details[open]){
@@ -464,6 +466,7 @@ main{
                           details{
                             cursor: default;
                           }
+
                         }
 
                         .iconBtnStyle{
@@ -478,6 +481,7 @@ main{
                         details{
                           width: 100%;
                           cursor: copy;
+                          overflow: hidden;
                                 summary{
                                   display: flex;
                                   flex-direction: row;

style/reduced.css

@@ -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;
+    }
+}