From f2ec37ac444a465cefdb04273471d438dca39d3d Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Tue, 29 Sep 2026 03:24:48 +0200
Subject: [PATCH] dernier edits et corrections sur le mode off

---
 assets/webRings/1312.media-webring.png | Bin 0 -> 3257 bytes
 assets/webRings/dnn-reduced-motion.png | Bin 0 -> 1528 bytes
 index.html                             |  32 ++++++++++++++-----------
 style/common.css                       |   2 +-
 style/default.css                      |   4 ++++
 style/main.css                         |  30 +++++++++++++++++++++--
 style/reduced.css                      |  16 ++++++++++++-
 7 files changed, 66 insertions(+), 18 deletions(-)
 create mode 100644 assets/webRings/1312.media-webring.png
 create mode 100644 assets/webRings/dnn-reduced-motion.png

diff --git a/assets/webRings/1312.media-webring.png b/assets/webRings/1312.media-webring.png
new file mode 100644
index 0000000000000000000000000000000000000000..151bbfd0f12dbb498413d7609fe8c25f53a081d9
GIT binary patch
literal 3257
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

literal 0
HcmV?d00001

diff --git a/assets/webRings/dnn-reduced-motion.png b/assets/webRings/dnn-reduced-motion.png
new file mode 100644
index 0000000000000000000000000000000000000000..97c3dc215b27131d6c5577e08e774bd110d4c93f
GIT binary patch
literal 1528
zcmdUu`BPJO6ve-9$x0SNAOs2`4_O36E2TOV7if^BKn1Zyqz<;$)&-J+i5f-|s0-0f
zD=y;#jytW&A{Gm{l)zxAiU^eAf-<rwBSL~el9%M=eH;Ib-ZSUkIlrFyT;0mF1U}cB
z3jp9JCCW0KH_K^1Hs;)!5?c=dsL#rj%y?&n5Mlu1B3y6G+Y9p&p&}_Jbwyp-2-_3$
zv=KH5CJ~}STY$|PU^NrwasP2&+?Na>EddsDfY}H4@xVL;sDOpA=s=pBLt5roMu|}}
zkaWk~$sp1YXm~-qAcM)L#8WXQ9uFF)LMeNweJW&%i7<_Gjl;piws4y%+++wfQ1hvY
zc@x9)hDRbsh9ia<2xBN>XlTLE;DSN>VmprD*5%gm)NyY&Z#SVEoQBW@Aqk-sLJC3}
z0xkovae$)$MGywYU@@nm)dX!8XtzU$1JVGh0Hp*|3h+(=Cgs2=2ZnqwwiWQ12(3cQ
zg@~yDnJGXFa%4Ooo%#WtRG>x$I+lmgJ1}ZHZd2h_B~B_Cw(SgylJP2!MXOoVPS%W)
zP3`2+MI1`aHEwfp6!GjuJe%5`(s)>QOYOz8Y<mpQJVBc#p=An^?`VsWGJ$CYaA5!r
zj=tW)Fcq>*O0GjKw(jzvwH}m4LTNoIt(U#{L(5NQXalY+AYcL(MnXGapeAUwL5hM7
zJEQ;tXh=JpqG^Z2K~a>+Wb*Rzl1il#iNxLAT_h5@y1EL5LV-ZQ=ks|yo{NhMm&@gF
zIBYhX#bPm;Oa_C2<2Z(4DC+DEaZ>SHK&#xzNBy>pv{lade;Z&V)89V;N0GRu5C9kP
zdn4dfh13auYmzKBGf_8jG&M0Z-MwA&-A1Znb4skP!?k}!=E39(=jSG`Y|q$wBvD!-
zihUDwd3MOA!MIefE{Qo-me$!G_kCIV!2(a&-g+IOIHx;Ynf7PXyn&)f`9OJUS7=PR
zy|W2UH^aitJHoyR%{8$GGc;K9uO8ty0;#yH#W(hAqUSN9&3ag#+=K0s+y5c<Ki~xu
z1kF93bQ{kJ|K$)UXuDi{C?-<0S<8vIgsdwHGYR=8COxv^v#KAm4NKj*cUQ#ARQXB7
z+A9GBQ4m_qyc~+`2qLaGOJnqRrd50IXEj%S9LJl~oJz~D`M0Ses->s)qsI&~ZoSs9
z*@IEiK$K;Fv&iM;qO*DR70+t^&fU2#G_|dwrm<{+KBr`{K4mtia}DmDTYnFp%)2B9
z3*YWd`gwPh?yk=OcX@i8Jhqjn(Pz>que<$Az|@bv?3)=ZUZ@j;^V^1a2ReQ~>b*Y7
zk3TT?#)AV-)U)qD;Fd*h)VC6=zo=6OmQN(GPYW*<XA5)EK1EYbL?5p10vnPw%T%h2
z2E1=3KJ12nL0xL^w@J?v{-`dEl1FD>JXZWcXe+5~>T4^_Nxdfs@ld+jwJ)m*c#rDC
zuiAuceI8WA?D+NCqE+i795>(iW*-hye^%Adnw!HE-=EGI`zvPIqoE;t?}_L<f5Gx6
zW1p;>$-O0dp2^uG8+p<)=X&K+YW(J*<oQvv+E<CnmRQwc`}XA>tCbFQ1$ApmIx4S}
zVr^%G8yY=tZF;?*6_RdQdv>(kZ?&++y72S;b!!LTCN>^FM-A6^w<SCrHgz`^`GeD6
z)mTKFi{dbl)CqN^&-3_h649HbC&MR8yUTt1Q%8Q>(A>$_mG<^$zsr(sFft2?S^9}B
zkK31=iH67O=qy!lM_f4w+;@E0h1z^=)%p0asmjQmFZw3VJoAg}zkTwRMCsy093;i3
K$!g+qOa22Fco{(e

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index d71a08d..2ea7c62 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
     </head>
     <body>
         <main>
-            <section id="seeYouLater" class="floating">
+            <section tabindex="-1" id="seeYouLater" class="floating">
                 <h1>
                     Merci à touxes !
                 </h1>
@@ -44,7 +44,7 @@
             </section>
 
             <div id="colorBtnContainer" aria-hidden="true">
-                <svg class="icon" viewBox="0 0 34.01 34.53">
+                <svg tabindex="-1" class="icon" viewBox="0 0 34.01 34.53">
                     <path d="M10.91,27.58c-1.85-1.07-3.31-2.52-4.37-4.36-1.07-1.84-1.6-3.89-1.6-6.16s.53-4.32,1.6-6.15c1.07-1.84,2.52-3.29,4.37-4.36,1.85-1.07,3.91-1.6,6.17-1.6s4.29.53,6.14,1.6c1.85,1.07,3.3,2.52,4.37,4.37,1.07,1.85,1.6,3.89,1.6,6.14s-.53,4.29-1.6,6.14c-1.07,1.85-2.52,3.31-4.37,4.37-1.85,1.07-3.89,1.6-6.14,1.6s-4.32-.53-6.17-1.6ZM20.51,22.94c1.03-.59,1.85-1.41,2.44-2.44s.89-2.18.89-3.43-.3-2.4-.89-3.43-1.41-1.85-2.44-2.44c-1.04-.59-2.18-.89-3.43-.89s-2.43.3-3.46.89c-1.03.59-1.85,1.41-2.44,2.44-.59,1.03-.89,2.18-.89,3.43s.3,2.4.89,3.43c.59,1.03,1.41,1.85,2.44,2.44,1.03.59,2.19.89,3.46.89s2.4-.3,3.43-.89Z"/>
                     <path d="M15.29.08l3.31-.08-.15,3.71h-2.86s-.31-3.63-.31-3.63Z"/>
                     <path d="M19.13,34.43l-3.97.1.18-4.45h3.42s.37,4.35.37,4.35Z"/>
@@ -55,11 +55,11 @@
                     <path d="M.08,18.76l-.08-3.35,3.76.15v2.89s-3.68.31-3.68.31Z"/>
                     <path d="M3.46,5.82l2.29-2.41,2.53,2.74-2.02,2.03-2.8-2.37Z"/>
                 </svg>
-                <label class="switch">
+                <label class="switch" tabindex="0">
                     <input type="checkbox">
                     <span class="slider"></span>
                 </label>
-                <svg class="icon" viewBox="0 0 31.8 30.75">
+                <svg tabindex="-1" class="icon" viewBox="0 0 31.8 30.75">
                     <path d="M4.06,8.45l-2.47,1.39-1.58-2.84,2.41-1.39-2.41-1.39L1.58,1.39l2.47,1.35V0h3.23v2.74l2.51-1.35,1.55,2.84-2.38,1.39,2.38,1.39-1.55,2.84-2.51-1.39v2.8h-3.23v-2.8Z"/>
                     <path d="M31.8,18.58c0-2.12-.52-4.11-1.57-5.97-1.03-1.8-2.48-3.26-4.36-4.39-.06-.03-.1-.07-.16-.11-1.64-.96-3.35-1.5-5.11-1.67,0,1.22-.12,2.45-.42,3.71-.13.54-.28,1.07-.45,1.6-.49,1.51-1.16,3.01-2.03,4.49-1.18,2.01-2.55,3.73-4.1,5.15-.04.04-.09.07-.13.11-1.41,1.26-2.93,2.21-4.58,2.86.11.21.22.42.34.62.88,1.38,2.03,2.54,3.43,3.5.26.18.52.37.8.53,1.96,1.14,4,1.72,6.13,1.74,2.13.01,4.13-.5,5.97-1.55,1.85-1.05,3.35-2.55,4.49-4.5s1.72-4,1.73-6.12ZM22.95,24.51c-1.04.59-2.15.88-3.34.87-.68,0-1.34-.13-1.98-.34,2-1.74,3.67-3.72,4.97-5.94.9-1.55,1.62-3.2,2.15-4.95.3.34.57.69.79,1.08.59,1.03.88,2.15.87,3.34-.01,1.19-.33,2.33-.97,3.41s-1.47,1.92-2.5,2.51Z"/>
                 </svg>
@@ -70,29 +70,33 @@
                     Nous contacter :
                 </h1>
                 <nav aria-label="informations de contact de la team drags and nerds">
-                  <a href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" class="textBtn" target="_blank">Vega</a>
-                  <a href="mailto:urazoriapro@gmail.com" class="textBtn" target="_blank">Urazoria</a>
+                  <a tabindex="0" href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" class="textBtn">Vega</a>
+                  <a tabindex="0" href="mailto:urazoriapro@gmail.com" class="textBtn">Urazoria</a>
                 </nav>
             </section>
 
             <footer id="webRing" class="solid" aria-label="les copaines du LOL">
-                <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 tabindex="0" href="https://drags-nerds.net" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
+                  <img id="flashDNN" 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">
+                  <img id="reducedDNN" src="/assets/webRings/dnn-reduced-motion.png" alt="les lettres #, D, et, N en gros pixel blanc sur fond noir avec un léger effet 3D, alternée entre vert et rose, toujours fluo ">
                 </a>
-                <a href="https://berthe.cc" target="_blank" aria-label="berthe.cc">
+                <a tabindex="0" href="https://berthe.cc" 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">
+                <a tabindex="0" href="https://murmure.cafe" 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://labolyon.fr" target="_blank" aria-label="laboratoire ouvert lyonnais, hackerspace ">
+                <a tabindex="0" href="https://labolyon.fr" aria-label="laboratoire ouvert lyonnais, hackerspace ">
                     <img src="/assets/webRings/labolyon.fr.png" alt="LOL en morse dans un cadre épais, en jaune sur fond noir">
                 </a>
+                <a tabindex="0" href="https://peertube.1312.media/"  aria-label="the 1312 media collective">
+                  <img src="/assets/webRings/1312.media-webring.png" alt="le logo antifasciste et un texte rouge très large, the 1312 media collective">
+                </a>
             </footer>
         </main>
-        <aside>
-            <img id="texture" src="assets/background-noise.png" alt="un léger grain animé qui texture le fond">
-            <video id="gradient" src="assets/background.webm" autoplay muted loop aria-label="un gradient de couleur rose, vert, noir et blanc"></video>
+        <aside tabindex="-1">
+            <img tabindex="-1" id="texture" src="assets/background-noise.png" alt="un léger grain animé qui texture le fond">
+            <video tabindex="-1" id="gradient" src="assets/background.webm" autoplay muted loop aria-label="un gradient de couleur rose, vert, noir et blanc"></video>
         </aside>
 
         <script type="module" src="js/main.js"></script>
diff --git a/style/common.css b/style/common.css
index aa80fa2..8f29bde 100644
--- a/style/common.css
+++ b/style/common.css
@@ -87,7 +87,7 @@
   animation: none;
 }
 
-.textBtn:hover{
+.textBtn:hover, .textBtn:focus{
   color: var(--back-color);
   animation: blinkBack 1.61s infinite;
 }
diff --git a/style/default.css b/style/default.css
index 255fec2..226ff5b 100644
--- a/style/default.css
+++ b/style/default.css
@@ -42,3 +42,7 @@ ul,ol {
 dialog{
   padding: 0;
 }
+
+button:focus, a:focus, label:focus{
+  outline: none;
+}
diff --git a/style/main.css b/style/main.css
index ed4a7c0..2208ad4 100644
--- a/style/main.css
+++ b/style/main.css
@@ -91,7 +91,7 @@ main{
                     visibility: collapse;
                     position:absolute;
                     right: 13.12px;
-                    bottom: 117px;
+                    bottom: 161px;
                     height: 144px;
                     width: 44px;
                     display: flex;
@@ -171,6 +171,12 @@ main{
                             }
             }
 
+            #colorBtnContainer:has(.switch:focus){
+              background-color: var(--main-color);
+              border-color: var(--back-color);
+              color: var(--back-color);
+            }
+
             footer{
                 width: 100%;
                 min-height: 93px;
@@ -192,10 +198,13 @@ main{
 
                     a{
                         width: 100%;
-                        height: 31px;
+                        height: 100%;
+                        margin-top: 7.77px;
+                        box-sizing: border-box;
 
                             img{
                                 width: 100%;
+                                image-rendering: pixelated;
                             }
 
                             .needOutline{
@@ -203,7 +212,24 @@ main{
                                 border-style: solid;
                                 border-width: thin;
                             }
+
+                            #reducedDNN{
+                              visibility: collapse;
+                              display: none;
+                            }
                     }
+
+                    a:focus, a:hover{
+                      margin-top: 0;
+                      margin-bottom: 7.77px;
+
+                          img{
+                            border-color: var(--main-color);
+                            border-style: solid;
+                            border-width: thin;
+                          }
+                    }
+
             }
 }
 
diff --git a/style/reduced.css b/style/reduced.css
index bb3c0de..6c960e6 100644
--- a/style/reduced.css
+++ b/style/reduced.css
@@ -1,5 +1,19 @@
 @media (prefers-reduced-motion: reduce){
     aside{
         visibility: collapse;
+        display: none;
     }
-}
\ No newline at end of file
+
+    main footer a{
+      
+      #reducedDNN{
+        visibility: visible;
+        display: inline;
+      }
+
+      #flashDNN{
+        visibility: collapse;
+        display: none;
+      }
+    }
+}