v2 graphic

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>

public/style.css

@@ -3,10 +3,10 @@
    ========================================================================== */
 
 :root {
-    --clr-bg: #e8e8e4;
+    --clr-bg: #d8d8d4;
     --clr-black: #111;
-    --clr-white: #f5f5f0;
+    --clr-white: #e8e8e4;
-    --clr-card-bg: #f0f0ec;
+    --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%;
+    width: 88%;
-    height: 100%;
+    height: 88%;
-    object-fit: cover;
+    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;
+    opacity: 0.4;
-    transform: translateY(3px);
-    transition: opacity 0.2s, transform 0.2s;
-}
-.product-card:hover .card-arrow {
-    opacity: 1;
-    transform: translateY(0);
 }
 
 /* ---- PRODUCT PANEL (overlay) ---- */