From c9d78e29ee410ac81ec51c876d9f3c50b91d05a4 Mon Sep 17 00:00:00 2001
From: ordinarthur <arthur.barre@forgeron3.fr>
Date: Wed, 25 Feb 2026 16:00:24 +0100
Subject: [PATCH] v4

---
 public/index.html |  2 --
 public/style.css  | 40 +++++++++++++++++++++++++++++++---------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index 8c18495..244c21f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -277,8 +277,6 @@
                 </div>
             </section>
 
-            <hr>
-
             <!-- NEWSLETTER -->
             <section class="newsletter" id="contact" aria-label="Accès anticipé">
                 <div class="nl-left">
diff --git a/public/style.css b/public/style.css
index 126cf5e..4c5dfd3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -218,7 +218,6 @@ hr { border: none; border-top: var(--border); margin: 0; }
     justify-content: space-between;
     align-items: center;
     padding: 1rem var(--pad);
-    border-bottom: var(--border);
 }
 
 /* ---- PRODUCT GRID — style Gufram ---- */
@@ -226,12 +225,13 @@ hr { border: none; border-top: var(--border); margin: 0; }
 .product-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    border-left: var(--border);
+    border-top: 2px solid #111;
+    border-left: 2px solid #111;
 }
 
 .product-card {
-    border-right: var(--border);
-    border-bottom: var(--border);
+    border-right: 2px solid #111;
+    border-bottom: 2px solid #111;
     background: var(--clr-card-bg);
     cursor: none;
     pointer-events: auto;
@@ -239,11 +239,30 @@ hr { border: none; border-top: var(--border); margin: 0; }
     flex-direction: column;
     transition: background 0.2s;
     position: relative;
+    z-index: 0;
 }
-.product-card:hover {
-    background: var(--clr-card-bg);
+.product-card::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border: 2px solid transparent;
+    pointer-events: none;
+    transition: border-color 0.15s;
+    z-index: 2;
+}
+.product-card:hover::before {
+    border-color: var(--clr-red);
+}
+.product-card:hover .card-name {
+    color: var(--clr-red);
+}
+.product-card:hover .card-index {
+    color: var(--clr-black);
+}
+.product-card:hover .card-arrow {
+    opacity: 1;
+    color: var(--clr-black);
 }
-
 /* Image : objet centré sur fond neutre, comme Gufram */
 .card-img-wrap {
     aspect-ratio: 1 / 1;
@@ -252,9 +271,12 @@ hr { border: none; border-top: var(--border); margin: 0; }
     align-items: center;
     justify-content: center;
     padding: 2rem;
-    border-bottom: var(--border);
+    border-bottom: 2px solid #111;
     background: var(--clr-card-bg);
-    transition: background 0.2s;
+    transition: background 0.2s, border-color 0.15s;
+}
+.product-card:hover .card-img-wrap {
+    border-bottom-color: var(--clr-red);
 }
 .product-card:hover .card-img-wrap {
     background: var(--clr-card-bg);