From bb1b8039a3b8c562ac0fdbc84bcbe3854025392f Mon Sep 17 00:00:00 2001
From: ordinarthur <arthur.barre@forgeron3.fr>
Date: Wed, 25 Feb 2026 15:40:06 +0100
Subject: [PATCH] v2 graphic

---
 .DS_Store         | Bin 6148 -> 8196 bytes
 public/index.html |   5 +++
 public/style.css  |  84 +++++++++++++++++++++++++++++++++++-----------
 3 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index 788295894f8943262124c4130d2f65b0fc1e6a7d..64c44bbdf0ab1eb49952f294d61d3a8b33d770f2 100644
GIT binary patch
delta 391
zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aMA$hk3KH}hr%jz7$c**Q2SHn1>q
zZsuXhWaedKC}1dMNMgug$Ye;KEX``dBqTjKkX2kLUVy(iBfs1;IX^F;D77pzwS00R
z>n{0-OrSt;W>so*dQoOda6w{nW?s6o{Rg0BK)^XUn$6Tp*&zVJRd(=(Fn|uyW^iN(
zW{6=ZWN2WR&ajwaJ;OnUa}19ezB2r0<Yg3NRASU-)L}GbG-q^RbYu)-jAl$=Oq_g)
zO<f$xfn~u(c{%xc=|EE%Cl|3#-PrJ(QIHv8hXgl}b_Mx)vmnQJ=E?jbo|FA~I5-#~
R!ND*&o@bUh&D`;W5dcWRSx5i?

delta 104
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50$jH7iU^g=(`(_@2Oy<c|qLUW0
qb8rYU162Tl05_0u1u5QG_?>w&zl<kHD+3e67?8;fo8x)rFarQ`N)Q+T

diff --git a/public/index.html b/public/index.html
index aa4d114..8c18495 100644
--- a/public/index.html
+++ b/public/index.html
@@ -168,6 +168,11 @@
             <!-- HERO -->
             <section class="hero" aria-label="Introduction">
                 <div class="hero-left">
+                    <div class="hero-floats" aria-hidden="true">
+                        <img class="hero-float" src="/assets/lamp-violet.jpg" alt="">
+                        <img class="hero-float" src="/assets/table-terrazzo.jpg" alt="">
+                        <img class="hero-float" src="/assets/lampes-serie.jpg" alt="">
+                    </div>
                     <p class="label">// ARCHIVE_001 — 2026</p>
                     <h1>REBOURS<br>STUDIO</h1>
                     <p class="hero-sub">Mobilier d'art contemporain.<br>Space Age × Memphis.</p>
diff --git a/public/style.css b/public/style.css
index 642fad7..a926a81 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,10 +3,10 @@
    ========================================================================== */
 
 :root {
-    --clr-bg: #e8e8e4;
+    --clr-bg: #d8d8d4;
     --clr-black: #111;
-    --clr-white: #f5f5f0;
-    --clr-card-bg: #f0f0ec;
+    --clr-white: #e8e8e4;
+    --clr-card-bg: #dcdcd8;
     --clr-grid: rgba(0,0,0,0.055);
     --clr-red: #e8a800;
     --font-mono: 'Space Mono', monospace;
@@ -138,6 +138,12 @@ hr { border: none; border-top: var(--border); margin: 0; }
     flex-direction: column;
     justify-content: flex-end;
     gap: 1.6rem;
+    position: relative;
+    overflow: hidden;
+}
+.hero-left > *:not(.hero-floats) {
+    position: relative;
+    z-index: 3;
 }
 .hero-left h1 {
     font-size: clamp(3.5rem, 7vw, 6rem);
@@ -146,6 +152,55 @@ hr { border: none; border-top: var(--border); margin: 0; }
     letter-spacing: -0.02em;
 }
 .hero-sub { font-size: 0.85rem; line-height: 1.75; max-width: 300px; }
+
+/* ---- FLOATING ASSETS in hero-left ---- */
+.hero-floats {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2;
+}
+.hero-float {
+    position: absolute;
+    object-fit: contain;
+    filter: grayscale(20%);
+    opacity: 1;
+}
+.hero-float:nth-child(1) {
+    width: clamp(100px, 18vw, 180px);
+    top: 8%;
+    left: 10%;
+    animation: float-a 9s ease-in-out infinite;
+}
+.hero-float:nth-child(2) {
+    width: clamp(80px, 14vw, 140px);
+    top: 30%;
+    right: 8%;
+    animation: float-b 13s ease-in-out infinite;
+}
+.hero-float:nth-child(3) {
+    width: clamp(130px, 22vw, 220px);
+    bottom: 10%;
+    right: 5%;
+    animation: float-c 7s ease-in-out infinite;
+}
+@keyframes float-a {
+    0%   { transform: translateY(0px) rotate(0deg); }
+    40%  { transform: translateY(-18px) rotate(-1deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+@keyframes float-b {
+    0%   { transform: translateY(0px) rotate(0deg); }
+    55%  { transform: translateY(-10px) rotate(1.5deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+@keyframes float-c {
+    0%   { transform: translateY(0px) rotate(0deg); }
+    30%  { transform: translateY(-22px) rotate(-2deg); }
+    65%  { transform: translateY(-6px) rotate(1deg); }
+    100% { transform: translateY(0px) rotate(0deg); }
+}
+
 .hero-right { overflow: hidden; background: #1c1c1c; }
 .hero-img {
     width: 100%; height: 100%;
@@ -186,7 +241,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
     position: relative;
 }
 .product-card:hover {
-    background: var(--clr-white);
+    background: var(--clr-card-bg);
 }
 
 /* Image : objet centré sur fond neutre, comme Gufram */
@@ -202,19 +257,14 @@ hr { border: none; border-top: var(--border); margin: 0; }
     transition: background 0.2s;
 }
 .product-card:hover .card-img-wrap {
-    background: var(--clr-white);
+    background: var(--clr-card-bg);
 }
 .card-img-wrap img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    width: 88%;
+    height: 88%;
+    object-fit: contain;
     display: block;
     filter: grayscale(15%);
-    transition: filter 0.4s, transform 0.5s ease;
-}
-.product-card:hover .card-img-wrap img {
-    filter: grayscale(0%);
-    transform: scale(1.04);
 }
 
 /* Bas de la card : index + nom + flèche, tout en ligne */
@@ -238,13 +288,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
 }
 .card-arrow {
     font-size: 1rem;
-    opacity: 0;
-    transform: translateY(3px);
-    transition: opacity 0.2s, transform 0.2s;
-}
-.product-card:hover .card-arrow {
-    opacity: 1;
-    transform: translateY(0);
+    opacity: 0.4;
 }
 
 /* ---- PRODUCT PANEL (overlay) ---- */