tabindex, style :focus et bug associés pour accesibilité clavier (et visuelle au passage)

style/common.css

@@ -27,6 +27,10 @@
   border-color: var(--back-color);
 }
 
+.textBtnStyle:focus{
+  filter: hue-rotate(180deg);
+}
+
 .iconBtnStyle{
   display: flex;
   flex-direction: column;
@@ -56,6 +60,10 @@
   animation: none;
 }
 
+.iconBtnStyle:focus{
+  filter: hue-rotate(180deg);
+}
+
 @media(min-width: 1300px){
   .textBtnStyle{
     font-size: 19px;

style/default.css

@@ -6,7 +6,7 @@ input {
 a{
   text-decoration: none;
   color: inherit;
-  cursor: url(../assets/cursor/lien.png) 2 2 auto;
+  cursor: url(../assets/cursor/lien.png) 2 2 , auto;
 }
 
 
@@ -34,3 +34,11 @@ ul,ol {
 dialog{
   padding: 0;
 }
+dialog:focus{
+  outline:none;
+  filter: hue-rotate(180deg);
+}
+
+button:focus, a:focus, summary:focus{
+  outline:none;
+}

style/main.css

@@ -158,6 +158,10 @@ main{
                 address {
                   margin-bottom: 2em;
                 }
+
+                ul li a:focus{
+                  filter: hue-rotate(180deg);
+                }
               }
 
               aside{
@@ -184,7 +188,7 @@ main{
                         cursor: url(../assets/cursor/msg.png) 2 16 , auto;
                       }
 
-                      #openMsg:hover{
+                      #openMsg:hover, #openMsg:focus{
                         animation: none;
                       }
 
@@ -373,6 +377,14 @@ main{
                         }
                 }
 
+                a:focus, a:hover{
+                  background-color: var(--back-color);
+                  img{
+                    filter: invert();
+
+                  }
+                }
+
               }
 
               #adhesionSection{
@@ -583,6 +595,10 @@ main{
                           border-color: var(--back-color);
                         }
 
+                        .solidBox:has(details){
+                          overflow: hidden;
+                        }
+
                         .solidBox:has(details[open]){
                           color: var(--back-color);
                           background-color: var(--main-color);
@@ -595,6 +611,10 @@ main{
                           margin-right: 16.1px;
                           width: calc(100% - 32.2px);
 
+                          summary{
+                            background-color: var(--main-color);
+                          }
+
                         }
 
                         article:first-of-type,
@@ -652,13 +672,14 @@ main{
                                   box-sizing: border-box;
                                   list-style-type: none;
                                   padding: 16.1px;
+                                  background-color: var(--back-color);
+
+                                  cursor: url(../assets/cursor/default.png) 2 16 , auto;
 
-                                  cursor: url(../assets/cursor/details.png) 2 16 , auto;                                  
-                            
                                 }
 
                                 &:not([open]) summary{
-                                  cursor: url(../assets/cursor/default.png) 2 16 , auto;
+                                  cursor: url(../assets/cursor/details.png) 2 16 , auto;
                                 }
 
                                 article{
@@ -666,8 +687,17 @@ main{
                                   text-transform: none;
                                 }
                         }
+
+                        summary:hover{
+                          background-color: var(--main-color);
+                        }
+
+                        summary:focus{
+                          filter: hue-rotate(180deg);
+
+                        }
                 }
-      }
+    }
 
       #webRingSection{
         width: 100%;
@@ -680,15 +710,22 @@ main{
         border-style: solid;
         border-width: thin 0 0 0;
         grid-template-columns: repeat(4, 1fr);
+        box-sizing: border-box;
         gap: 7.77px;
 
               a{
                 width: 100%;
-                height: 31px;
+                height: 100%;
+                display: flex;
+                flex-direction: row;
+                align-items: flex-end;
+                margin-top: 3.33px;
+                transition: 0.333s;
 
                       img{
                         width: 100%;
                         image-rendering: pixelated;
+
                       }
 
                       .needOutline{
@@ -698,6 +735,10 @@ main{
                       }
               }
 
-              
+              a:focus, a:hover{
+                margin-top: -7.77px;
+              }
+
+
       }
 }