Ajustements lightbox et search (#717)

assets/sass/_theme/_configuration.sass

@@ -7,3 +7,4 @@
 @import configuration/components
 @import configuration/blocks
 @import configuration/sections
+@import configuration/zindex

assets/sass/_theme/components/lightbox.sass

@@ -1,14 +1,14 @@
 .lightbox
     backdrop-filter: $lightbox-backdrop
-    background: $lightbox-overlay-color
+    background: $lightbox-background-color
     bottom: 0
     display: none
     left: 0
     padding: $spacing-2
     position: fixed
     right: 0
     top: 0
-    z-index: 100
+    z-index: $zindex-lightbox
     &.is-opened
         display: block
     &-media
@@ -20,27 +20,25 @@
             display: block
             margin: auto
             max-height: 100%
+            outline-color: $lightbox-focus-outline-color
     &-controls
         bottom: $spacing-2
         display: flex
         position: absolute
         right: $spacing-2
-        z-index: 101
-        @include media-breakpoint-down(sm)
-            left: $spacing-2
-            width: initial
+        z-index: 1
         button
             @include button-reset
             @include meta
-            background-color: $color-background
-            color: $color-text
+            background-color: var(--color-background)
+            color: var(--color-text)
             height: $spacing-4
-            outline-color: $color-background
+            outline-color: $lightbox-focus-outline-color
             margin: 0
             padding: 0
             width: $spacing-4
             &:not(:last-child)
-                border-right: 1px solid $color-border
+                border-right: 1px solid var(--color-border)
             &.lightbox-button-next
                 @include icon(arrow-right-s-line, before)
             &.lightbox-button-previous
@@ -54,22 +52,23 @@
             &.lightbox-button-close
                 @include icon(close-line, before)
             &[aria-expanded='true']
-                background-color: $color-text
-                color: $color-background
+                background-color: var(--color-text)
+                color: var(--color-background)
             &:disabled
-                background: $color-background-alt
+                background: var(--color-background-alt)
                 &::before
-                    color: $color-border
+                    color: var(--color-border)
     &-detail
-        background-color: $color-background
+        background-color: var(--color-background)
         bottom: calc(var(--spacing-4) + var(--spacing-2) + 1px)
-        // color: $color-text
         display: none
         padding: $spacing-2
         position: fixed
         right: $spacing-2
-        width: columns(6)
-        z-index: 102
+        margin-left: $spacing-2
+        z-index: 2
+        @include media-breakpoint-up(md)
+            width: columns(6)
         &__title, &__close
             @include meta
             color: var(--color-text-alt)
@@ -78,8 +77,6 @@
             position: absolute
             right: $spacing-2
             top: $spacing-2
-        &-content
-            margin-top: $spacing-3
         > div
             margin-top: $spacing-3
         [aria-expanded="true"] + &

assets/sass/_theme/configuration/components.sass

@@ -88,8 +88,9 @@ $breadcrumb-icon-color: var(--color-text-alt) !default
 // System
 
 // Lightbox
-$lightbox-overlay-color: rgba(0, 0, 0, 0.80) !default
 $lightbox-backdrop: blur(5px) !default
+$lightbox-background-color: rgba(0, 0, 0, 0.80) !default
+$lightbox-focus-outline-color: white !default
 
 // Table of content
 $toc-color: var(--color-text) !default

assets/sass/_theme/configuration/spacings.sass

@@ -19,15 +19,3 @@ $spacing-6: space(32) !default  // 128px
 $spacing-7: space(64) !default  // 256px
 
 $minimum-accessible-size: pxToRem(44) !default
-
-// Z-index
-$zindex-nav-accessibility: 1010 !default
-$zindex-stretched-link: 2 !default
-$zindex-header: 52 !default
-$zindex-body-overlay: 51 !default
-$zindex-toc-offcanvas: 60 !default
-$zindex-toc: 50 !default
-$zindex-toc-cta: 49 !default
-$zindex-modal: 72 !default
-$zindex-aside: 48 !default
-$zindex-footer: 50 !default

assets/sass/_theme/configuration/zindex.sass

@@ -0,0 +1,12 @@
+// Z-index
+$zindex-aside: 48 !default
+$zindex-body-overlay: 51 !default
+$zindex-footer: 50 !default
+$zindex-header: 52 !default
+$zindex-lightbox: 80 !default
+$zindex-modal: 72 !default
+$zindex-nav-accessibility: 1010 !default
+$zindex-toc: 50 !default
+$zindex-toc-cta: 49 !default
+$zindex-toc-offcanvas: 60 !default
+$zindex-stretched-link: 2 !default

assets/sass/_theme/design-system/search.sass

@@ -5,7 +5,7 @@
     @include meta
     &:focus
         box-shadow: none
-.pagefind-ui__toggle:not(.pagefind-menu), 
+.pagefind-ui__toggle:not(.pagefind-primary), 
 .pagefind-ui__button, 
 .search__close
     @include meta
@@ -20,7 +20,7 @@
         &::after
             line-height: inherit
             margin-left: $spacing-1
-    &:not(.pagefind-menu)    
+    &:not(.pagefind-primary)
         padding: $spacing-1 $spacing-2
     &.toggle-both
         .menu & span
@@ -29,7 +29,7 @@
     &::after
         display: inline
     @include media-breakpoint-down(desktop)
-        &.pagefind-menu
+        &.pagefind-primary
             padding: $spacing-3 0
             width: 100%
     @include media-breakpoint-up(desktop)
@@ -232,7 +232,7 @@ footer#document-footer .footer-search
 
 .nav-search
     display: flex
-    .pagefind-menu:not(.toggle-icon)::after
+    .pagefind-primary:not(.toggle-icon)::after
         margin-top: 10px
 
 .menu .nav-level-1 > li .pagefind-ui__toggle span