Various fix CSS

assets/css/src/_main.scss

@@ -35,7 +35,7 @@
   --font-size-S: 0.9rem;
   --font-size-L: 1.6rem;
   --font-size-XL: 11vw;
-  --line-height-S: var(--font-size-S);
+  --line-height-S: calc(var(--font-size-S) * 1.2);
   --text-color: black;
   --bg-color: white;
   --body-margin: 0.6rem;
@@ -48,11 +48,13 @@
   --index-width: 40rem;
   --close-cursor: url(/assets/images/close-cursor.png), crosshair;
   --main-title-top: -0.7vw;
+  --mix-blend-color: white;
 }
 
 body {
   font-family: var(--main-font);
   font-size: var(--font-size-S);
+  line-height: var(--line-height-S);
   margin: var(--body-margin);
   top: 0;
   position: absolute;
@@ -114,6 +116,7 @@ nav {
     column-gap: calc(2 * var(--body-margin));
     margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
     width: calc(var(--index-width) - var(--body-margin));
+    line-height: normal;
 
     a {
       text-decoration: none;
@@ -178,10 +181,10 @@ button.next {
   display: grid;
   grid-template-columns: var(--index-width) auto;
   pointer-events: none;
+  mix-blend-mode: difference;
 }
 
 .fix:hover .slide-number {
-  display: none;
 }
 
 .toggle {
@@ -220,18 +223,15 @@ button.next {
   opacity: 1;
 }
 
+// passe en oppacité réduite les éléments non survolés de la liste sur la page index
 .projects-index:has(li:hover) li:not(:hover) {
-  opacity: var(--low-opacity);
+  // opacity: var(--low-opacity);
 }
 
 .unselected:hover .toggle {
   display: none;
 }
 
-.unselected:hover .slide-number {
-  display: none;
-}
-
 .selected {
   opacity: 1;
 }
@@ -255,6 +255,8 @@ button.next {
 .slide-number {
   text-align: right;
   display: none;
+  padding-right: var(--body-margin);
+  color: var(--mix-blend-color);
 }
 
 .selected .slide-number {