+ .jpeg)
+
+
+
+
- SHAPING
-
-
// ARCHIVE 001
-SHAPING
THE FUTURE
OF FORM
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ +
+ +
-
+ + +
+ +
-
-
+
+ Contemporary art furniture bridging the gap between
Space Age geometry and Memphis rebellion.
+
+ SPÉCIFICATIONS TECHNIQUES ↓
+ +
+
+
+ NOTES DE CONCEPTION ↓
+ ++
+
+
+ REBOUR
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + + +
+
diff --git a/main.js b/main.js
index 0ccc24a..a88a04d 100644
--- a/main.js
+++ b/main.js
@@ -1,73 +1,142 @@
/**
- * Main Interaction Script
- * Minimalist animations and custom cursor for that "Premium WIP" feel.
+ * REBOUR — Main Script
*/
document.addEventListener('DOMContentLoaded', () => {
- // Custom Cursor Logic
+
+ // ---- CUSTOM CURSOR ----
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');
- let isHovering = false;
- // Track mouse position
window.addEventListener('mousemove', (e) => {
- const posX = e.clientX;
- const posY = e.clientY;
-
- // Custom dot follows exact position
- cursorDot.style.left = `${posX}px`;
- cursorDot.style.top = `${posY}px`;
-
- // Outline trails slightly with a small delay simulation via animationFrame
- // But for simplicity and performance in vanilla, we use transform directly
- cursorOutline.animate({
- left: `${posX}px`,
- top: `${posY}px`
- }, { duration: 150, fill: "forwards" });
+ cursorDot.style.left = `${e.clientX}px`;
+ cursorDot.style.top = `${e.clientY}px`;
+ cursorOutline.animate(
+ { left: `${e.clientX}px`, top: `${e.clientY}px` },
+ { duration: 100, fill: 'forwards' }
+ );
});
- // Hover effects on links and interactive elements
- const links = document.querySelectorAll('a, .status-badge, .art-piece-container');
-
- links.forEach(link => {
- link.addEventListener('mouseenter', () => {
- isHovering = true;
- cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
- cursorOutline.style.backgroundColor = 'rgba(0,0,0,0.1)';
- cursorDot.style.transform = 'translate(-50%, -50%) scale(0.5)';
+ const interactives = document.querySelectorAll('a, button, input, .product-card, summary, .panel-close');
+ interactives.forEach(el => {
+ el.addEventListener('mouseenter', () => {
+ cursorOutline.style.width = '38px';
+ cursorOutline.style.height = '38px';
+ cursorDot.style.transform = 'translate(-50%, -50%) scale(0)';
});
-
- link.addEventListener('mouseleave', () => {
- isHovering = false;
- cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
- cursorOutline.style.backgroundColor = 'transparent';
+ el.addEventListener('mouseleave', () => {
+ cursorOutline.style.width = '26px';
+ cursorOutline.style.height = '26px';
cursorDot.style.transform = 'translate(-50%, -50%) scale(1)';
});
});
- // Simple 3D parallax on the art piece
- const artContainer = document.querySelector('.art-piece-container');
- const artPiece = document.querySelector('.art-piece');
+ // ---- INTERACTIVE GRID ----
+ const gridContainer = document.getElementById('interactive-grid');
+ const CELL = 60;
+ const COLORS = [
+ 'rgba(160,160,155,0.3)',
+ 'rgba(140,140,135,0.22)',
+ 'rgba(120,120,115,0.18)',
+ ];
- if (artContainer && artPiece) {
- artContainer.addEventListener('mousemove', (e) => {
- const rect = artContainer.getBoundingClientRect();
- const x = e.clientX - rect.left; // x position within the element.
- const y = e.clientY - rect.top; // y position within the element.
-
- // Calculate rotation based on cursor position
- const centerX = rect.width / 2;
- const centerY = rect.height / 2;
-
- const rotateX = ((y - centerY) / centerY) * -15; // Max 15deg
- const rotateY = ((x - centerX) / centerX) * 15; // Max 15deg
+ function buildGrid() {
+ if (!gridContainer) return;
+ gridContainer.innerHTML = '';
+ const cols = Math.ceil(window.innerWidth / CELL);
+ const rows = Math.ceil(window.innerHeight / CELL);
+ gridContainer.style.display = 'grid';
+ gridContainer.style.gridTemplateColumns = `repeat(${cols}, ${CELL}px)`;
+ gridContainer.style.gridTemplateRows = `repeat(${rows}, ${CELL}px)`;
- artPiece.style.transform = `scale(1.05) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
- });
+ for (let i = 0; i < cols * rows; i++) {
+ const cell = document.createElement('div');
+ cell.className = 'grid-cell';
+ cell.addEventListener('mouseenter', () => {
+ cell.style.transition = 'none';
+ cell.style.backgroundColor = COLORS[Math.floor(Math.random() * COLORS.length)];
+ });
+ cell.addEventListener('mouseleave', () => {
+ cell.style.transition = 'background-color 1.4s ease-out';
+ cell.style.backgroundColor = 'transparent';
+ });
+ gridContainer.appendChild(cell);
+ }
+ }
- artContainer.addEventListener('mouseleave', () => {
- // Reset position
- artPiece.style.transform = 'scale(1) perspective(1000px) rotateX(0) rotateY(0)';
+ buildGrid();
+ let rt;
+ window.addEventListener('resize', () => { clearTimeout(rt); rt = setTimeout(buildGrid, 150); });
+
+ // ---- PRODUCT PANEL ----
+ const panel = document.getElementById('product-panel');
+ const panelClose = document.getElementById('panel-close');
+ const cards = document.querySelectorAll('.product-card');
+
+ // Champs du panel
+ const fields = {
+ img: document.getElementById('panel-img'),
+ index: document.getElementById('panel-index'),
+ name: document.getElementById('panel-name'),
+ type: document.getElementById('panel-type'),
+ mat: document.getElementById('panel-mat'),
+ year: document.getElementById('panel-year'),
+ status: document.getElementById('panel-status'),
+ desc: document.getElementById('panel-desc'),
+ specs: document.getElementById('panel-specs'),
+ notes: document.getElementById('panel-notes'),
+ };
+
+ function openPanel(card) {
+ fields.img.src = card.dataset.img;
+ fields.img.alt = card.dataset.name;
+ fields.index.textContent = card.dataset.index;
+ fields.name.textContent = card.dataset.name;
+ fields.type.textContent = card.dataset.type;
+ fields.mat.textContent = card.dataset.mat;
+ fields.year.textContent = card.dataset.year;
+ fields.status.textContent = card.dataset.status;
+ fields.desc.textContent = card.dataset.desc;
+ fields.specs.textContent = card.dataset.specs;
+ fields.notes.textContent = card.dataset.notes;
+
+ // Ferme les accordéons
+ panel.querySelectorAll('details').forEach(d => d.removeAttribute('open'));
+
+ panel.classList.add('is-open');
+ panel.setAttribute('aria-hidden', 'false');
+ document.body.style.overflow = 'hidden';
+
+ // Refresh cursor sur les nouveaux éléments
+ panel.querySelectorAll('summary, .panel-close').forEach(el => {
+ el.addEventListener('mouseenter', () => {
+ cursorOutline.style.width = '38px';
+ cursorOutline.style.height = '38px';
+ cursorDot.style.transform = 'translate(-50%, -50%) scale(0)';
+ });
+ el.addEventListener('mouseleave', () => {
+ cursorOutline.style.width = '26px';
+ cursorOutline.style.height = '26px';
+ cursorDot.style.transform = 'translate(-50%, -50%) scale(1)';
+ });
});
}
+
+ function closePanel() {
+ panel.classList.remove('is-open');
+ panel.setAttribute('aria-hidden', 'true');
+ document.body.style.overflow = '';
+ }
+
+ cards.forEach(card => {
+ card.addEventListener('click', () => openPanel(card));
+ });
+
+ panelClose.addEventListener('click', closePanel);
+
+ // Echap pour fermer
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') closePanel();
+ });
+
});
diff --git a/style.css b/style.css
index 3aac58d..c7540cf 100644
--- a/style.css
+++ b/style.css
@@ -1,335 +1,484 @@
/* ==========================================================================
- REBOUR - WIP SPACE AGE & MEMPHIS BASE STYLES
+ REBOUR — RAW HTML 2000s + GRILLE GUFRAM + PANEL PRODUIT
========================================================================== */
:root {
- /* Memphis Colors */
- --clr-black: #050505;
- --clr-white: #fcfcfc;
- --clr-memphis-red: #ff3b28;
- --clr-memphis-blue: #0047bb;
- --clr-memphis-yellow: #ffd100;
- --clr-memphis-green: #00a651;
- --clr-bg: #f4f4f0;
- --clr-grid-line: rgba(0, 0, 0, 0.05);
-
- /* Typography */
- --font-heading: 'Outfit', sans-serif;
+ --clr-bg: #e8e8e4;
+ --clr-black: #111;
+ --clr-white: #f5f5f0;
+ --clr-card-bg: #f0f0ec;
+ --clr-grid: rgba(0,0,0,0.055);
+ --clr-red: #e8a800;
--font-mono: 'Space Mono', monospace;
-
- /* Memphis Shadows & Borders */
- --border-thick: 3px solid var(--clr-black);
- --shadow-hard: 8px 8px 0px 0px var(--clr-black);
- --shadow-hover: 12px 12px 0px 0px var(--clr-black);
-
- /* Layout */
- --container-padding: 2rem;
+ --border: 1px solid #111;
+ --pad: 2rem;
}
-/* Reset */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { font-size: 13px; }
body {
- background-color: var(--clr-bg);
+ background: var(--clr-bg);
color: var(--clr-black);
- font-family: var(--font-mono); /* Default technical font */
+ font-family: var(--font-mono);
overflow-x: hidden;
- cursor: none; /* Hidden for custom cursor */
+ cursor: none;
}
-/* Custom Cursor */
+/* ---- CURSOR ---- */
.cursor-dot {
- width: 8px;
- height: 8px;
- background-color: var(--clr-memphis-red);
- border-radius: 50%;
- position: fixed;
- top: 0;
- left: 0;
+ width: 5px; height: 5px;
+ background: var(--clr-black);
+ position: fixed; top: 0; left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
- z-index: 10000;
- transition: width 0.2s, height 0.2s;
+ z-index: 99999;
+ transition: transform 0.1s;
}
-
.cursor-outline {
- width: 40px;
- height: 40px;
- border: 2px solid var(--clr-black);
- border-radius: 50%;
- position: fixed;
- top: 0;
- left: 0;
+ width: 26px; height: 26px;
+ border: 1px solid var(--clr-black);
+ position: fixed; top: 0; left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
- z-index: 9999;
- transition: width 0.2s, height 0.2s, background-color 0.2s;
+ z-index: 99998;
+ transition: width 0.15s, height 0.15s, border-color 0.15s;
}
-/* Blueprint Grid Background */
-.grid-overlay {
+/* ---- INTERACTIVE GRID (derrière tout) ---- */
+.interactive-grid {
position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- pointer-events: none;
- z-index: -1;
- background-image:
- linear-gradient(var(--clr-grid-line) 1px, transparent 1px),
- linear-gradient(90deg, var(--clr-grid-line) 1px, transparent 1px);
- background-size: 40px 40px;
+ top: 0; left: 0;
+ width: 100vw; height: 100vh;
+ z-index: 0;
+ pointer-events: auto;
+ overflow: hidden;
+}
+.grid-cell {
+ border-right: 1px solid var(--clr-grid);
+ border-bottom: 1px solid var(--clr-grid);
+ pointer-events: auto;
+ transition: background-color 1.3s ease-out;
}
-/* Layout Wrapper */
+/* ---- PAGE WRAPPER ---- */
.page-wrapper {
+ position: relative;
+ z-index: 1;
+ pointer-events: none; /* laisse passer vers la grid */
min-height: 100vh;
display: flex;
flex-direction: column;
- padding: var(--container-padding);
- position: relative;
- z-index: 1;
+}
+/* Re-active pointer-events sur les éléments interactifs */
+.page-wrapper a,
+.page-wrapper button,
+.page-wrapper input,
+.page-wrapper form,
+.page-wrapper nav,
+.page-wrapper .product-card,
+.page-wrapper summary,
+.page-wrapper details {
+ pointer-events: auto;
}
-/* Header */
+/* ---- HEADER ---- */
.header {
display: flex;
justify-content: space-between;
- align-items: center;
- border: var(--border-thick);
- padding: 1rem 1.5rem;
- background-color: var(--clr-white);
- box-shadow: var(--shadow-hard);
- border-radius: 999px; /* Space Age Pill shape */
+ align-items: baseline;
+ padding: 1.1rem var(--pad);
+ border-bottom: var(--border);
+ background: var(--clr-bg);
+ pointer-events: auto;
}
-
.logo-text {
+ font-size: 1rem;
font-weight: 700;
- font-size: 1.25rem;
- letter-spacing: -0.05em;
+ letter-spacing: 0.18em;
}
-
-.status-badge {
+.header-nav {
display: flex;
- align-items: center;
- gap: 0.5rem;
- font-size: 0.85rem;
- font-weight: 700;
+ align-items: baseline;
+ gap: 2.5rem;
+ font-size: 0.82rem;
}
-
-.blinking-dot {
- width: 10px;
- height: 10px;
- background-color: var(--clr-memphis-red);
- border-radius: 50%;
- display: inline-block;
- animation: blink 1.5s infinite;
+.header-nav a {
+ color: var(--clr-black);
+ text-decoration: none;
}
+.header-nav a:hover { text-decoration: underline; }
+.wip-tag { color: #999; font-size: 0.78rem; }
-@keyframes blink {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0; }
-}
+/* ---- UTILS ---- */
+.label { font-size: 0.75rem; color: #888; letter-spacing: 0.04em; }
+.mono-sm { font-size: 0.75rem; line-height: 1.9; color: #777; }
+.red { color: var(--clr-red); font-weight: 700; }
+.blink { animation: blink 1.4s step-end infinite; color: var(--clr-red); }
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+hr { border: none; border-top: var(--border); margin: 0; }
-/* Hero Section */
+/* ---- HERO ---- */
.hero {
- flex-grow: 1;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ min-height: 88vh;
+ pointer-events: none;
+}
+.hero-left {
+ padding: 5rem var(--pad) 3rem;
+ border-right: var(--border);
display: flex;
- justify-content: center;
- align-items: center;
- padding: 4rem 0;
+ flex-direction: column;
+ justify-content: flex-end;
+ gap: 1.6rem;
}
-
-.hero-content {
- text-align: center;
- max-width: 900px;
- width: 100%;
-}
-
-.mono-subtitle {
- font-size: 0.9rem;
- color: #666;
- margin-bottom: 2rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
-}
-
-.hero-title {
- font-family: var(--font-heading);
- font-size: clamp(3rem, 8vw, 7rem);
- line-height: 0.9;
- font-weight: 900;
- text-transform: uppercase;
+.hero-left h1 {
+ font-size: clamp(3.5rem, 7vw, 6rem);
+ font-weight: 700;
+ line-height: 0.92;
letter-spacing: -0.02em;
- margin-bottom: 3rem;
}
-
-.memphis-highlight {
- color: var(--clr-white);
- background-color: var(--clr-black);
- padding: 0 1rem;
- display: inline-block;
- transform: rotate(-2deg);
- border: var(--border-thick);
- box-shadow: 6px 6px 0px 0px var(--clr-memphis-yellow);
+.hero-sub { font-size: 0.85rem; line-height: 1.75; max-width: 300px; }
+.hero-right { overflow: hidden; background: #1c1c1c; }
+.hero-img {
+ width: 100%; height: 100%;
+ object-fit: cover; display: block;
+ filter: grayscale(10%);
+ opacity: 0.92;
+ transition: opacity 0.5s, filter 0.5s;
}
+.hero-right:hover .hero-img { opacity: 1; filter: grayscale(0%); }
-/* Abstract Memphis / Space Age CSS Art */
-.art-piece-container {
- height: 300px;
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 4rem 0;
- position: relative;
- perspective: 1000px;
-}
-
-.art-piece {
- position: relative;
- width: 250px;
- height: 250px;
- transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.art-piece-container:hover .art-piece {
- transform: scale(1.05) rotate(5deg);
-}
-
-.shape {
- position: absolute;
- border: var(--border-thick);
- box-shadow: var(--shadow-hard);
- transition: all 0.3s ease;
-}
-
-/* The primary Space Age pill shape */
-.shape-pill {
- width: 120px;
- height: 220px;
- background-color: var(--clr-memphis-blue);
- border-radius: 999px;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 2;
-}
-
-/* A retro Space Age perfect circle */
-.shape-circle {
- width: 140px;
- height: 140px;
- background-color: var(--clr-memphis-red);
- border-radius: 50%;
- top: -20px;
- left: -40px;
- z-index: 1;
-}
-
-/* A weird arch (Gufram / Memphis reference) */
-.shape-arch {
- width: 100px;
- height: 150px;
- background-color: var(--clr-memphis-green);
- border-top-left-radius: 100px;
- border-top-right-radius: 100px;
- border-bottom: 0;
- bottom: -10px;
- right: -30px;
- z-index: 3;
-}
-
-/* A strictly Memphis zigzag/stairs element */
-.shape-zigzag {
- width: 60px;
- height: 60px;
- background-color: var(--clr-memphis-yellow);
- top: 50%;
- left: 110%;
- transform: translateY(-50%) rotate(45deg);
- z-index: 4;
-}
-
-/* Text Description */
-.hero-description {
- font-size: 1.1rem;
- line-height: 1.6;
- max-width: 500px;
- margin: 0 auto;
- padding: 1.5rem;
- background-color: var(--clr-white);
- border: var(--border-thick);
- box-shadow: var(--shadow-hard);
-}
-
-/* Footer */
-.footer {
+/* ---- COLLECTION ---- */
+.collection { pointer-events: none; }
+.collection-header {
display: flex;
justify-content: space-between;
align-items: center;
- border-top: var(--border-thick);
- padding-top: 2rem;
- margin-top: 2rem;
+ padding: 1rem var(--pad);
+ border-bottom: var(--border);
}
-.footer-col {
- font-size: 0.9rem;
+/* ---- PRODUCT GRID — style Gufram ---- */
+/* 3 colonnes, image centrée sur fond neutre, bordure fine */
+.product-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ border-left: var(--border);
}
-.footer-col.right {
+.product-card {
+ border-right: var(--border);
+ border-bottom: var(--border);
+ background: var(--clr-card-bg);
+ cursor: none;
+ pointer-events: auto;
display: flex;
- gap: 2rem;
-}
-
-.memphis-link {
- color: var(--clr-black);
- text-decoration: none;
- font-weight: 700;
+ flex-direction: column;
+ transition: background 0.2s;
position: relative;
- padding: 0.25rem 0.5rem;
- transition: all 0.2s ease;
+}
+.product-card:hover {
+ background: var(--clr-white);
}
-.memphis-link::before {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
+/* Image : objet centré sur fond neutre, comme Gufram */
+.card-img-wrap {
+ aspect-ratio: 1 / 1;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ border-bottom: var(--border);
+ background: var(--clr-card-bg);
+ transition: background 0.2s;
+}
+.product-card:hover .card-img-wrap {
+ background: var(--clr-white);
+}
+.card-img-wrap img {
width: 100%;
height: 100%;
- background-color: var(--clr-memphis-yellow);
- z-index: -1;
- transform: scaleY(0.2) translateY(10px);
- transform-origin: bottom;
- transition: transform 0.2s ease;
+ object-fit: cover;
+ 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);
}
-.memphis-link:hover::before {
- transform: scaleY(1) translateY(0);
+/* Bas de la card : index + nom + flèche, tout en ligne */
+.card-meta {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ padding: 0.9rem 1.1rem;
+ gap: 0.8rem;
+}
+.card-index {
+ font-size: 0.72rem;
+ color: #999;
+ flex-shrink: 0;
+}
+.card-name {
+ font-size: 0.82rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ flex-grow: 1;
+}
+.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);
}
-.memphis-link:hover {
- color: var(--clr-black);
- border: 2px solid var(--clr-black);
+/* ---- PRODUCT PANEL (overlay) ---- */
+.product-panel {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ background: var(--clr-bg);
+ display: flex;
+ flex-direction: column;
+ transform: translateY(100%);
+ transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+ pointer-events: none;
+ overflow: hidden;
+}
+.product-panel.is-open {
+ transform: translateY(0);
+ pointer-events: auto;
}
-/* Responsive */
-@media (max-width: 768px) {
- :root {
- --container-padding: 1rem;
- }
- .header {
- flex-direction: column;
- gap: 1rem;
- border-radius: 1rem;
- }
- .footer {
- flex-direction: column;
- gap: 1.5rem;
- text-align: center;
- }
+.panel-close {
+ display: flex;
+ align-items: center;
+ padding: 1.1rem var(--pad);
+ border-bottom: var(--border);
+ font-size: 0.78rem;
+ font-weight: 700;
+ cursor: none;
+ background: var(--clr-bg);
+ letter-spacing: 0.05em;
+ pointer-events: auto;
+ flex-shrink: 0;
+}
+.panel-close:hover { background: var(--clr-white); }
+.panel-close span { pointer-events: none; }
+
+.panel-inner {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ flex-grow: 1;
+ overflow: hidden;
+}
+
+/* Colonne image : sticky, fond sombre, image centrée */
+.panel-img-col {
+ border-right: var(--border);
+ background: #1a1a1a;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+}
+#panel-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ opacity: 0.92;
+}
+
+/* Colonne infos : scrollable */
+.panel-info-col {
+ overflow-y: auto;
+ padding: 2.5rem var(--pad);
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+ background: var(--clr-bg);
+}
+
+.panel-index {
+ font-size: 0.72rem;
+ color: #999;
+ letter-spacing: 0.05em;
+}
+
+.panel-info-col h2 {
+ font-size: clamp(1.8rem, 3vw, 2.8rem);
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -0.01em;
+}
+
+/* Meta table */
+.panel-meta {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+.panel-meta-row {
+ display: flex;
+ gap: 1.5rem;
+ padding: 0.55rem 0;
+ border-bottom: 1px solid rgba(0,0,0,0.1);
+ font-size: 0.8rem;
+ align-items: baseline;
+}
+.meta-key {
+ color: #888;
+ width: 7rem;
+ flex-shrink: 0;
+ font-size: 0.72rem;
+}
+
+.panel-desc {
+ font-size: 0.85rem;
+ line-height: 1.85;
+ color: #333;
+}
+
+/* Accordion */
+.accordion {
+ border-bottom: var(--border);
+}
+.accordion summary {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ font-size: 0.78rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ cursor: none;
+ list-style: none;
+ pointer-events: auto;
+}
+.accordion summary::-webkit-details-marker { display: none; }
+.accordion summary span {
+ transition: transform 0.2s;
+ display: inline-block;
+}
+.accordion[open] summary span { transform: rotate(180deg); }
+.accordion-body {
+ font-size: 0.78rem;
+ line-height: 2;
+ color: #444;
+ padding-bottom: 1rem;
+ white-space: pre-line;
+}
+
+.panel-footer {
+ font-size: 0.75rem;
+ color: #888;
+ padding-top: 0.5rem;
+}
+
+/* ---- NEWSLETTER ---- */
+.newsletter {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ pointer-events: none;
+}
+.nl-left {
+ padding: 3rem var(--pad);
+ border-right: var(--border);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ gap: 1rem;
+}
+.nl-left h2 {
+ font-size: clamp(2rem, 4vw, 3rem);
+ font-weight: 700;
+ line-height: 0.95;
+ letter-spacing: -0.02em;
+}
+.nl-right {
+ padding: 3rem var(--pad);
+ display: flex;
+ align-items: flex-end;
+}
+.nl-form {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 0.7rem;
+ pointer-events: auto;
+}
+.nl-form label { font-size: 0.75rem; font-weight: 700; }
+.nl-row {
+ display: flex;
+ border: var(--border);
+ background: var(--clr-white);
+}
+.nl-row input {
+ flex-grow: 1;
+ border: none;
+ background: transparent;
+ font-family: var(--font-mono);
+ font-size: 0.85rem;
+ padding: 0.9rem;
+ outline: none;
+ cursor: none;
+}
+.nl-row input::placeholder { color: #bbb; }
+.nl-row input:focus { background: rgba(0,0,0,0.03); }
+.nl-row button {
+ border: none;
+ border-left: var(--border);
+ background: var(--clr-black);
+ color: var(--clr-white);
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+ font-weight: 700;
+ padding: 0 1.3rem;
+ cursor: none;
+ transition: background 0.15s;
+ pointer-events: auto;
+}
+.nl-row button:hover { background: var(--clr-red); }
+
+/* ---- FOOTER ---- */
+.footer {
+ margin-top: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.1rem var(--pad);
+ border-top: var(--border);
+ font-size: 0.75rem;
+ pointer-events: auto;
+ background: var(--clr-bg);
+}
+.footer a { color: var(--clr-black); text-decoration: none; }
+.footer a:hover { text-decoration: underline; }
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 900px) {
+ .hero, .newsletter { grid-template-columns: 1fr; }
+ .hero-left { border-right: none; border-bottom: var(--border); min-height: 55vw; padding: 3rem var(--pad); }
+ .hero-right { height: 55vw; }
+ .nl-left { border-right: none; border-bottom: var(--border); }
+ .product-grid { grid-template-columns: 1fr 1fr; }
+ .panel-inner { grid-template-columns: 1fr; }
+ .panel-img-col { height: 50vw; }
+ .panel-info-col { overflow-y: auto; }
+}
+@media (max-width: 600px) {
+ .product-grid { grid-template-columns: 1fr; }
+ .header-nav { gap: 1rem; }
}
+ REBOUR
+
+ // ARCHIVE_001 — 2026
+REBOUR
STUDIO
+ Mobilier d'art contemporain.
Space Age × Memphis.
STATUS: [PROTOTYPE EN COURS]
COLLECTION_001 — BIENTÔT DISPONIBLE
+
+
+
+ + + +
+
+
+ // COLLECTION_001
+ 3 OBJETS — CLIQUER POUR OUVRIR +
+
+
+
+
+
+
+
+
+
+
+
+
+ .jpeg)
+
+
+
+
+ 
+
+
+
+ + + + +