From 1dbcef46602827e658cee025d51fc89b2f481a8c Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Tue, 21 Apr 2026 18:34:43 +0200
Subject: [PATCH] style(frontend): match carousel nav to admin (square dots,
 overlay arrows)

Frontend product panel now mirrors the admin preview: 14px black square
dots with a 1px yellow border and a 6px yellow inner square when active,
and prev/next arrows as dark overlay buttons on the image sides that
fade in on hover.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 nextjs/public/style.css    | 89 ++++++++++++++++++++++++++++----------
 nextjs/src/scripts/main.js | 14 ++++--
 2 files changed, 75 insertions(+), 28 deletions(-)

diff --git a/nextjs/public/style.css b/nextjs/public/style.css
index f9a647d..3700340 100644
--- a/nextjs/public/style.css
+++ b/nextjs/public/style.css
@@ -514,50 +514,91 @@ hr {
     opacity: 0.92;
 }
 
-/* Gallery navigation */
+/* Gallery navigation — dots overlay at the bottom of the image, arrows overlay on sides */
 .panel-gallery-nav {
+    position: absolute;
+    bottom: 0.75rem;
+    left: 0;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    padding: 12px 0;
-    background: #1a1a1a;
-    border-top: 1px solid rgba(232, 168, 0, 0.15);
+    gap: 0.45rem;
+    padding: 0;
+    background: transparent;
+    border-top: none;
+    z-index: 3;
+    pointer-events: none;
 }
 
+.panel-gallery-nav > * {
+    pointer-events: auto;
+}
+
+/* Square dot: 14×14 black with yellow border, yellow inner 6×6 square when active */
 .gallery-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    background: #111;
     border: 1px solid var(--amber);
-    background: transparent;
     cursor: pointer;
     padding: 0;
-    transition: background 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
 }
 
-.gallery-dot.active {
+.gallery-dot::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    background: transparent;
+    transition: background 0.15s;
+}
+
+.gallery-dot.active::before {
     background: var(--amber);
 }
 
-.gallery-dot:hover {
-    background: rgba(232, 168, 0, 0.5);
+/* Arrows: overlay on image sides, shown on hover */
+.gallery-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2.4rem;
+    height: 2.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    font-family: 'Space Mono', monospace;
+    font-size: 1rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.15s, background 0.15s, color 0.15s;
+    z-index: 4;
+    padding: 0;
 }
 
-.gallery-arrow {
-    background: none;
-    border: 1px solid rgba(232, 168, 0, 0.3);
-    color: var(--amber);
-    font-family: 'Space Mono', monospace;
-    font-size: 0.75rem;
-    cursor: pointer;
-    padding: 2px 8px;
-    transition: border-color 0.2s, background 0.2s;
+.panel-img-col:hover .gallery-arrow {
+    opacity: 1;
 }
 
 .gallery-arrow:hover {
-    border-color: var(--amber);
-    background: rgba(232, 168, 0, 0.1);
+    background: rgba(232, 168, 0, 0.85);
+    color: #111;
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.gallery-prev {
+    left: 0.75rem;
+}
+
+.gallery-next {
+    right: 0.75rem;
 }
 
 /* Colonne infos : scrollable */
diff --git a/nextjs/src/scripts/main.js b/nextjs/src/scripts/main.js
index 8b9e112..d7c8729 100644
--- a/nextjs/src/scripts/main.js
+++ b/nextjs/src/scripts/main.js
@@ -416,8 +416,12 @@ function reboursInit() {
             fields.img.alt = card.dataset.imgAlt || card.dataset.name;
         }
 
-        // Build nav dots
+        // Build nav dots (centered overlay at image bottom) + arrows (side overlays on image)
         fields.galleryNav.innerHTML = '';
+        // Remove any previously injected arrows (they live on .panel-img-col)
+        const imgCol = fields.galleryNav.parentElement;
+        imgCol?.querySelectorAll('.gallery-arrow').forEach((el) => el.remove());
+
         if (currentGalleryImages.length > 1) {
             fields.galleryNav.style.display = 'flex';
             currentGalleryImages.forEach((_, i) => {
@@ -428,9 +432,10 @@ function reboursInit() {
                 fields.galleryNav.appendChild(dot);
             });
 
-            // Arrow buttons
+            // Arrow buttons — appended to .panel-img-col so they overlay the image
             const prevBtn = document.createElement('button');
             prevBtn.className = 'gallery-arrow gallery-prev';
+            prevBtn.type = 'button';
             prevBtn.textContent = '←';
             prevBtn.setAttribute('aria-label', 'Image précédente');
             prevBtn.addEventListener('click', () => {
@@ -439,14 +444,15 @@ function reboursInit() {
 
             const nextBtn = document.createElement('button');
             nextBtn.className = 'gallery-arrow gallery-next';
+            nextBtn.type = 'button';
             nextBtn.textContent = '→';
             nextBtn.setAttribute('aria-label', 'Image suivante');
             nextBtn.addEventListener('click', () => {
                 showGalleryImage((currentGalleryIndex + 1) % currentGalleryImages.length);
             });
 
-            fields.galleryNav.prepend(prevBtn);
-            fields.galleryNav.appendChild(nextBtn);
+            imgCol?.appendChild(prevBtn);
+            imgCol?.appendChild(nextBtn);
         } else {
             fields.galleryNav.style.display = 'none';
         }