Update virtual sample style

src/assets/css/src/2.blocks.button.css

@@ -30,7 +30,8 @@
 .btn[disabled] {
   cursor: not-allowed;
   background: var(--color-black-10);
-  color: var(--color-black-20);
+  --btn-color: var(--color-black-20) !important;
+  --icon-color: var(--color-black-20) !important;
 }
 
 .btn.active,
@@ -122,6 +123,7 @@ input[type="checkbox"]:checked + .btn--primary {
   display: inline-block;
   background-image: var(--btn-image);
   background-size: cover;
+  background-color: #FAF8F7;
   width: var(--btn-image-w);
   position: absolute;
   left: 0;
@@ -133,6 +135,10 @@ input[type="checkbox"]:checked + .btn--primary {
   --btn-border-color: var(--color-primary-50);
   --btn-color: var(--color-primary);
 }
+.btn--image:hover,
+.btn--image:active {
+  color: var(--color-primary-hover);
+}
 
 @media (hover: hover) {
   .btn:hover {

src/components/project/VirtualSample.vue

@@ -48,47 +48,48 @@
       </header>
 
       <!--  -->
-      <div id="container">
+      <div class="track-container">
         <figure>
           <img :src="currentFile.url" alt="" />
         </figure>
         <fieldset>
-          <input
-            id="x"
-            type="range"
-            min="0"
-            :max="xMax"
-            :steps="xMax + 1"
-            value="0"
-          />
-          <input
-            id="y"
-            type="range"
-            min="0"
-            :max="yMax"
-            :steps="yMax + 1"
-            orient="vertical"
-            value="0"
-          />
           <button
+            class="btn btn--icon"
             id="y-up"
             @click="currentY++"
             :disabled="currentY === yMax.length"
+            data-icon="chevron-single-left"
+            title="Pivoter vers le haut"
           >
-            Top
-          </button>
-          <button id="x-down" @click="currentX--" :disabled="currentX === 0">
-            Left
+            <span class="sr-only">Top</span>
           </button>
           <button
-            id="x-up"
-            @click="currentX++"
-            :disabled="currentX === xMax.length"
+            class="btn btn--icon" 
+            id="x-down" 
+            @click="rotateX('left')" 
+            data-icon="chevron-single-left"
+            title="Pivoter vers la gauche"
           >
-            Right
+            <span class="sr-only">Left</span>
           </button>
-          <button id="y-down" @click="currentY--" :disabled="currentY === 0">
-            Bottom
+          <button
+            class="btn btn--icon"
+            id="x-up"
+            @click="rotateX('right')"
+            data-icon="chevron-single-left"
+            title="Pivoter vers la droite"
+          >
+            <span class="sr-only">Right</span>
+          </button>
+          <button
+            class="btn btn--icon" 
+            id="y-down" 
+            @click="currentX === xMax ? xMax : currentX--" 
+            :disabled="currentY === 0"
+            data-icon="chevron-single-left"
+            title="Pivoter vers le bas"
+          >
+            <span class="sr-only">Bottom</span>
           </button>
         </fieldset>
       </div>
@@ -171,6 +172,15 @@ const currentFile = computed(() =>
 // Variables
 const isOpen = ref(true);
 const isCommentsOpen = ref(false);
+
+function rotateX(direction) {
+  if (direction == 'left') {
+    currentX.value = currentX.value === 0 ? xMax.value : currentX.value - 1
+  }
+  if (direction == 'right') {
+    currentX.value = currentX.value === xMax.value ? 0 : currentX.value + 1
+  }
+}
 </script>
 
 <style scoped>
@@ -178,76 +188,86 @@ const isCommentsOpen = ref(false);
   padding: var(--space-16);
 }
 
-#container {
-  --w: 500px;
-  --h: 500px;
+.track-container {
+  --w: 100%;
+  --h: calc(100% - 74px);
   --x-steps: 14;
   --y-steps: 5;
   width: var(--w);
   height: var(--h);
-  background-color: dimgray;
   position: relative;
+  margin: var(--space-16) auto;
+  border-radius: var(--rounded-lg);
 }
 
-#container figure {
+.track-container figure {
   padding: 0;
   margin: 0;
   width: 100%;
   height: 100%;
   position: relative;
 }
-#container img {
+.track-container img {
   display: block;
   position: absolute;
   inset: 0;
   width: inherit;
   height: inherit;
+  object-fit: contain;
 }
-
-#container fieldset {
-  --p: 1rem;
+.track-container fieldset {
+  --p: 0rem;
   margin: 0;
   padding: 0;
   width: var(--w);
   height: var(--h);
   border: none;
 }
-
-#container button,
-input {
+.track-container button,
+.track-container input {
   position: absolute;
 }
 
-#x {
-  left: 0;
-  bottom: calc(-1 * var(--p));
-  right: 0;
+/* Buttons */
+.track-container .btn--icon {
+  --icon-size: var(--space-24);
+  --icon-color: var(--color-grey-700);
+  width: var(--space-48);
+  height: var(--space-48);
+  max-height: var(--space-48);
+  background: transparent;
+  padding: var(--space-12);
 }
-#y {
-  top: 0;
-  bottom: 0;
-  right: calc(-1 * var(--p));
+.track-container .btn--icon:hover {
+  background: var(--color-black-10);
 }
-
 #y-up {
   top: var(--p);
 }
+#y-up::before {
+  transform: rotate(90deg);
+}
 #y-down {
   bottom: var(--p);
 }
+#y-down::before {
+  transform: rotate(-90deg);
+}
 #y-up,
 #y-down {
   text-align: center;
   left: 50%;
   transform: translateX(-50%);
 }
-
 #x-down {
   left: var(--p);
 }
 #x-up {
   right: var(--p);
 }
+#x-up::before {
+  transform: rotate(180deg);
+}
 #x-down,
 #x-up {
   top: 50%;