/* =====================================================
   LEDUC CRÉATION BOIS — Feuille de style
   ===================================================== */

/* --- Variables --- */
:root {
  --noir:        #0d0c0b;
  --blanc:       #f5f0e8;
  --vert:        #2d4a3e;
  --vert-mid:    #3a5c4e;
  --bois:        #8B6914;
  --bois-clair:  #c4973a;
  --gris:        #6b6560;
  --gris-clair:  #c8c2ba;

  --serif:    'Playfair Display', Georgia, serif;
  --sans:     'Inter', system-ui, sans-serif;
  --elegant:  'Cormorant Garamond', Georgia, serif;

  --ease:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t:     0.6s var(--ease);
  --tf:    0.3s ease;
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { background:none; border:none; cursor:pointer; font-family:inherit; }

/* =====================================================
   GRAIN OVERLAY (subtle global texture)
   ===================================================== */
.grain-overlay {
  position: fixed; inset:0;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 55px,
    rgba(139,105,20,.006) 55px, rgba(139,105,20,.006) 56px
  );
}

/* =====================================================
   REAL PHOTOS — object-fit cover for Unsplash images
   ===================================================== */
.opening__image-wrap img,
.sf__item-img img,
.real__card-img img,
.atelier__img-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .85s var(--ease);
}
.real__card:hover .real__card-img img { transform: scale(1.07); }
.sf__item:hover .sf__item-img img     { transform: scale(1.05); filter: grayscale(0%) brightness(0.88) contrast(1.05); }

/* Editorial B&W treatment for savoir-faire images */
.sf__item-img img {
  filter: grayscale(90%) brightness(0.75) contrast(1.1);
  transition: transform .85s var(--ease), filter .9s var(--ease);
}

/* contact info links */
.info-val a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--tf);
}
.info-val a:hover { opacity: .65; }

/* =====================================================
   WOOD BACKGROUNDS (CSS texture — kept as fallback)
   ===================================================== */
.wood-bg {
  position: absolute; inset:0;
  transition: transform .8s var(--ease);
}
.wood-bg--amber {
  background:
    repeating-linear-gradient(88deg, transparent 0, transparent 4px, rgba(200,150,60,.05) 4px, rgba(200,150,60,.05) 5px),
    repeating-linear-gradient(92deg, transparent 0, transparent 9px, rgba(100,65,10,.03) 9px, rgba(100,65,10,.03) 10px),
    linear-gradient(155deg, #d4a84b 0%, #a07020 38%, #7a5215 68%, #5c3d0e 100%);
}
.wood-bg--warm {
  background:
    repeating-linear-gradient(87deg, transparent 0, transparent 5px, rgba(200,155,55,.04) 5px, rgba(200,155,55,.04) 6px),
    linear-gradient(150deg, #c8923a 0%, #9a6c18 42%, #74500f 72%, #503608 100%);
}
.wood-bg--dark {
  background:
    repeating-linear-gradient(89deg, transparent 0, transparent 6px, rgba(255,255,255,.018) 6px, rgba(255,255,255,.018) 7px),
    linear-gradient(145deg, #5c3d0e 0%, #3d2708 42%, #241706 70%, #140d04 100%);
}
.wood-bg--cedar {
  background:
    repeating-linear-gradient(88deg, transparent 0, transparent 4px, rgba(160,80,40,.05) 4px, rgba(160,80,40,.05) 5px),
    linear-gradient(155deg, #c47840 0%, #9a5a28 42%, #7a4220 70%, #5a2e15 100%);
}
.wood-bg--charcoal {
  background:
    repeating-linear-gradient(89deg, transparent 0, transparent 7px, rgba(255,255,255,.012) 7px, rgba(255,255,255,.012) 8px),
    linear-gradient(148deg, #3a3028 0%, #2a2018 42%, #1a1208 70%, #0e0a04 100%);
}
.wood-bg--ipe {
  background:
    repeating-linear-gradient(91deg, transparent 0, transparent 3px, rgba(180,130,40,.04) 3px, rgba(180,130,40,.04) 4px),
    linear-gradient(160deg, #b8862e 0%, #8a6018 42%, #6b4912 70%, #4d3209 100%);
}
.wood-bg--workshop {
  background:
    repeating-linear-gradient(87deg, transparent 0, transparent 3px, rgba(185,140,55,.06) 3px, rgba(185,140,55,.06) 4px),
    repeating-linear-gradient(93deg, transparent 0, transparent 11px, rgba(100,60,10,.03) 11px, rgba(100,60,10,.03) 12px),
    linear-gradient(160deg, #c89840 0%, #9a7020 36%, #744e12 65%, #4e340a 100%);
}

/* =====================================================
   SCROLL REVEAL
   ===================================================== */
.reveal, .reveal-right, .reveal-left {
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal       { transform: translateY(28px); }
.reveal-right { transform: translateX(40px); }
.reveal-left  { transform: translateX(-40px); }

.reveal.visible, .reveal-right.visible, .reveal-left.visible {
  opacity: 1;
  transform: translate(0);
}
[data-delay="1"] { transition-delay:.12s; }
[data-delay="2"] { transition-delay:.24s; }
[data-delay="3"] { transition-delay:.36s; }

/* =====================================================
   NAVIGATION
   ===================================================== */
.nav {
  position: fixed; top:0; left:0; right:0;
  z-index: 500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 1.6rem 3.5rem;
  background: rgba(245,240,232,.96);
  transition: background var(--tf), padding var(--tf), box-shadow var(--tf);
}
.nav.scrolled {
  background: rgba(245,240,232,.96);
  backdrop-filter: blur(14px);
  padding: 1rem 3.5rem;
  box-shadow: 0 1px 0 rgba(139,105,20,.1);
}
.nav__logo img {
  height: 57px; width:auto;
  transition: opacity var(--tf);
}
.nav__logo:hover img { opacity:.75; }
.nav__links { display:flex; align-items:center; gap:2.8rem; }
.nav__link {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--noir);
  position: relative;
  transition: color var(--tf);
}
.nav__link::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--vert);
  transition: width var(--tf);
}
.nav__link:hover { color:var(--vert); }
.nav__link:hover::after { width:100%; }
.nav__cta {
  padding: .5rem 1.3rem;
  border: 1px solid var(--noir);
  transition: background var(--tf), color var(--tf), border-color var(--tf);
}
.nav__cta::after { display:none; }
.nav__cta:hover { background:var(--noir); color:var(--blanc); }
.nav__burger {
  display:none; flex-direction:column; gap:6px; padding:4px; z-index:600;
}
.nav__burger span { display:block; width:24px; height:1px; background:var(--noir); transition:var(--tf); }

/* =====================================================
   OPENING
   ===================================================== */
.opening {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .opening {
    min-height: 50svh;
  }
}

/* SVG Copeaux flottants */
.svg-copeau {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.svg-copeau--a { top:7%; right:4%;  width:150px; opacity:.55; }
.svg-copeau--b { bottom:22%; left:3%; width:110px; opacity:.45; }
.svg-copeau--c { top:55%; right:52%; width:85px; opacity:.35; }

/* Rabot background ghost */
.svg-rabot-bg {
  position: absolute;
  bottom: 13%;
  left: 27%;
  width: 340px;
  color: var(--noir);
  pointer-events: none;
  z-index: 2;
  opacity: .85;
}

.opening__left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8rem 0.5rem 5.5rem 5rem;
  z-index: 4;
}
.opening__ghost-num {
  font-family: var(--elegant);
  font-size: clamp(6rem,14vw,16rem);
  font-weight: 300;
  color: var(--noir);
  opacity: .055;
  line-height: .85;
  letter-spacing: -.03em;
  position: absolute;
  top: 48%; left: 2.5rem;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
}
.opening__tagline {
  font-family: var(--serif);
  font-size: clamp(2.4rem,4.2vw,4.2rem);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.025em;
  color: var(--noir);
  position: relative; z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.opening__tagline em { font-style:italic; color:var(--vert); }
.opening__tagline.loaded { opacity:1; transform:translateY(0); }

.opening__meta {
  display: flex; align-items:center; gap:.75rem;
  margin-top: 1.8rem;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 400;
  position: relative; z-index:2;
  opacity: 0; transition: opacity .8s var(--ease) 1.2s;
}
.opening__meta.loaded { opacity:1; }
.opening__meta .dot { color:var(--bois); }

.opening__right {
  position: relative;
  overflow: hidden;
}
.opening__image-wrap {
  position: absolute; inset:0;
  clip-path: polygon(9% 0%, 100% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
}
.opening__image-vignette {
  position: absolute; inset:0; z-index:2;
  background: linear-gradient(to right, rgba(13,12,11,.25) 0%, transparent 50%),
              linear-gradient(to top, rgba(13,12,11,.4) 0%, transparent 40%);
}
.opening__caption {
  position: absolute; bottom:2rem; left:3rem; z-index:3;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,240,232,.6);
}

.opening__scroll {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction:column; align-items:center; gap:.6rem;
  z-index: 5;
  opacity: 0; transition: opacity .8s var(--ease) 1.6s;
}
.opening__scroll.loaded { opacity:1; }
.opening__scroll span {
  font-size: .6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); writing-mode:vertical-rl; transform:rotate(180deg);
}
.opening__scroll-line {
  width:1px; height:52px;
  background: linear-gradient(to bottom, var(--gris), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.4; transform:scaleY(1); transform-origin:top; }
  50%      { opacity:1;  transform:scaleY(.65); transform-origin:top; }
}

/* =====================================================
   MANIFESTE
   ===================================================== */
.manifeste {
  position: relative;
  padding: 10rem 5rem 8rem;
  background: var(--blanc);
  z-index: 2;
  overflow: hidden;
}
.manifeste__wrap { position:relative; z-index:2; }

.manifeste__eyebrow {
  font-size: .7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vert); font-weight:400; margin-bottom:2.8rem;
}
.manifeste__headline {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.5vw, 6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--noir);
  margin-bottom: 3.5rem;
}
.manifeste__headline em { font-style:italic; color:var(--vert); }

.manifeste__body { max-width:480px;  }
.manifeste__body p {
  font-family: var(--elegant);
  font-size: 1.15rem; font-weight:300; line-height:1.85;
  color:var(--gris); margin-bottom:1.2rem;
}
.manifeste__body-accent {
  font-weight: 400 !important;
  color: var(--noir) !important;
  font-size: 1.28rem !important;
}
.manifeste__rabot { width: 213px;
  opacity: .8;
  margin: auto; }

.manifeste__side {
  position: absolute; right:-9.5rem; top:50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  font-size: .6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris-clair); white-space:nowrap;
  pointer-events: none;
}
.manifeste__grain {
  position: absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    90deg, transparent 0, transparent 50px,
    rgba(139,105,20,.007) 50px, rgba(139,105,20,.007) 51px
  );
}
.manifeste__inner {
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: 5rem;
  align-items: center;
  position: relative; z-index: 2;
}
.manifeste__image {
  position: relative;
  height: 580px;
  overflow: hidden;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}
.manifeste__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =====================================================
   SAVOIR-FAIRE
   ===================================================== */
.savoir-faire {
  position: relative;
  background: var(--noir);
  color: var(--blanc);
  z-index: 2;
  overflow: hidden;
}
.savoir-faire::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    90deg, transparent 0, transparent 78px,
    rgba(255,255,255,.01) 78px, rgba(255,255,255,.01) 79px
  );
}
.sf__header {
  display: flex; align-items:baseline; gap:1.8rem;
  padding: 6rem 5rem 3rem;
}
.sf__ghost-num {
  font-family: var(--elegant);
  font-size: clamp(5rem,10vw,11rem);
  font-weight: 300; line-height:1; color:var(--blanc); opacity:.055;
  user-select:none; pointer-events:none;
}
.sf__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem,3vw,3.2rem);
  font-weight: 400; color:var(--blanc);
}

/* Items */
.sf__item {
  display: grid;
  min-height: 340px;
  border-top: 1px solid rgba(245,240,232,.07);
  position: relative;
  overflow: hidden;
}
.sf__item--a { grid-template-columns: 55% 45%; }
.sf__item--b { grid-template-columns: 45% 55%; }
.sf__item--d { grid-template-columns: 45% 55%; }
.sf__item--c {
  grid-template-columns: 45% 55%;
  min-height: 320px;
}

.sf__item-img {
  position: relative; overflow:hidden;
}
.sf__item-img--clip {
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.sf__item-img--clip-r {
  clip-path: polygon(0% 0%, 92% 0%, 83% 100%, 0% 100%);
}
.sf__item:hover .wood-bg { transform: scale(1.05); }

.sf__img-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(13,12,11,.72) 0%, rgba(13,12,11,.25) 55%, transparent 85%);
}
.sf__img-overlay--r {
  background: linear-gradient(to left, rgba(13,12,11,.72) 0%, rgba(13,12,11,.25) 55%, transparent 85%);
}

.sf__item-body {
  padding: 3.5rem 4rem;
  display: flex; flex-direction:column; justify-content:center;
  position: relative; z-index:2;
}
.sf__item-body--flip { padding: 3.5rem 4rem 3.5rem 4rem; order:-1; }
.sf__item-body--center { padding: 4rem 4.5rem; max-width: none; }

.sf__item-num {
  font-family: var(--elegant);
  font-size: 5rem; font-weight:300;
  color:var(--blanc); opacity:.06; line-height:1; margin-bottom:-.8rem;
  user-select:none;
}
.sf__item-title {
  font-family: var(--serif);
  margin-top: 25px;
  font-size: clamp(1.7rem,2.5vw,2.6rem);
  font-weight: 400; color:var(--blanc); line-height:1.2; margin-bottom:1.2rem;
}
.sf__item-title em { font-style:italic; color:var(--bois-clair); }
.sf__item-text {
  font-family: var(--elegant);
  font-size: 1.05rem; font-weight:300; line-height:1.8;
  color:rgba(245,240,232,.6); max-width:380px;
}

.sf__item-accent-bar {
  position: absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(to bottom, transparent, var(--vert), transparent);
}

/* Chisel / Mèche SVGs */
.sf__chisel { width:72px; margin-top:1.8rem; opacity:.75; }
.sf__meche  { width:14px; margin-top:1.8rem; opacity:.7; }

.sf__shaving-c {
  position: absolute; right:4rem; top:50%; transform:translateY(-50%);
  width:130px; opacity:.75; pointer-events:none;
}

/* =====================================================
   CITATION
   ===================================================== */
.citation {
  position: relative;
  padding: 8rem 5rem;
  background: var(--vert);
  color: var(--blanc);
  overflow: hidden;
  z-index: 2;
}
.citation::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    88deg, transparent 0, transparent 42px,
    rgba(255,255,255,.013) 42px, rgba(255,255,255,.013) 43px
  );
}
.citation__shaving {
  position: absolute; top:1.5rem; right:5%;
  width:260px; pointer-events:none;
}
.citation__text {
  font-family: var(--serif);
  font-size: clamp(2.2rem,5vw,5rem);
  font-weight: 400; line-height:1.12; letter-spacing:-.02em;
  max-width:740px; position:relative; z-index:2;
}
.citation__text em { font-style:italic; opacity:.65; }
.citation__mark {
  font-family: var(--serif); font-size:7rem; line-height:0;
  vertical-align:-.4em; margin-right:.08em; opacity:.22;
}
.citation__attr {
  margin-top:2.2rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,240,232,.45); position:relative; z-index:2;
}

/* =====================================================
   RÉALISATIONS
   ===================================================== */
.realisations {
  position: relative;
  padding: 8rem 0 6rem;
  background: var(--blanc);
  z-index: 2;
  overflow: hidden;
}
.real__header {
  display: flex; align-items:flex-end; gap:2rem;
  padding: 0 5rem; margin-bottom:4rem;
}
.real__ghost-num {
  font-family: var(--elegant);
  font-size: clamp(5rem,10vw,11rem);
  font-weight: 300; line-height:1; color:var(--noir); opacity:.05;
  user-select:none; pointer-events:none; flex-shrink:0;
}
.real__titles { display:flex; flex-direction:column; gap:.4rem; }
.real__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem,3vw,3.2rem);
  font-weight: 400; color:var(--noir);
}
.real__sub {
  font-family: var(--elegant);
  font-size: 1rem; font-style:italic; color:var(--gris);
}

/* Irregular grid */
.real__grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 4px;
  padding: 0 5rem;
}
.real__card {
  position: relative; overflow:hidden;
  background: var(--noir);
  cursor: pointer;
}
/* Grid placement — asymmetric */
.real__card:nth-child(1) { grid-column:1/5;  grid-row:1/3; min-height:500px; }
.real__card:nth-child(2) { grid-column:5/9;  grid-row:1/2; min-height:248px; }
.real__card:nth-child(3) { grid-column:9/13; grid-row:1/2; min-height:248px; }
.real__card:nth-child(4) { grid-column:5/8;  grid-row:2/3; min-height:248px; }
.real__card:nth-child(5) { grid-column:8/13; grid-row:2/3; min-height:248px; }

.real__card-img { position:absolute; inset:0; overflow:hidden; }
.real__card-img .wood-bg { transition: transform .85s var(--ease); }
.real__card:hover .real__card-img .wood-bg { transform:scale(1.07); }

/* Clip first card corner */
.real__card:nth-child(1) .real__card-img {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.real__card-label {
  position: absolute; bottom:0; left:0; right:0;
  padding: 2.5rem 1.6rem 1.4rem;
  background: linear-gradient(to top, rgba(13,12,11,.82) 0%, transparent 100%);
  transform: translateY(40%);
  transition: transform var(--t);
}
.real__card:hover .real__card-label { transform:translateY(0); }
.real__card-label h3 {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight:400; color:var(--blanc); margin-bottom:-.7rem;
}
.real__card-label span {
  font-size: .62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bois-clair); font-weight:400;
}

/* =====================================================
   ATELIER
   ===================================================== */
.atelier {
  position: relative;
  background: var(--blanc);
  z-index: 2;
  padding: 0 0 8rem;
}
.atelier__wrap {
  display: grid;
  grid-template-columns: 54% 46%;
  min-height: 620px;
}

.atelier__visual { position:relative; overflow:hidden; }
.atelier__img-frame {
  position: absolute; inset:0;
  clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 0% 100%);
  overflow:hidden;
}
.atelier__shaving {
  position: absolute; bottom:1rem; right:1.5rem;
  width:110px; z-index:5; pointer-events:none;
}

.atelier__content {
  padding: 6rem 5rem 4rem 4.5rem;
  display: flex; flex-direction:column; justify-content:center;
  position: relative;
}
.atelier__eyebrow {
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--vert); font-weight:400; margin-bottom:1rem;
}
.atelier__ghost-num {
  font-family: var(--elegant);
  font-size: 9rem; font-weight:300; color:var(--noir); opacity:.04;
  line-height:1; position:absolute; top:3rem; right:3rem;
  user-select:none; pointer-events:none;
}
.atelier__title {
  font-family: var(--serif);
  font-size: clamp(2.2rem,3.5vw,3.8rem);
  font-weight:400; line-height:1.12; letter-spacing:-.022em;
  margin-bottom:2.2rem; color:var(--noir);
}
.atelier__title em { font-style:italic; color:var(--vert); }
.atelier__text p {
  font-family: var(--elegant);
  font-size:1.06rem; font-weight:300; line-height:1.82; color:var(--gris);
  margin-bottom:1.2rem;
}
.atelier__stats {
  display:flex; gap:2rem; margin-top:3rem;
  padding-top:2rem; border-top:1px solid rgba(13,12,11,.09);
}
.atelier__stat { display:flex; flex-direction:column; gap:.3rem; }
.stat-num {
  font-family: var(--serif);
  font-size:1.9rem; font-weight:400; color:var(--noir); line-height:1;
}
.stat-label {
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris); font-weight:400; line-height:1.5;
}

/* =====================================================
   MATIÈRES
   ===================================================== */
.matieres {
  position: relative;
  background: var(--noir);
  padding: 5rem;
  z-index: 2;
}
.matieres__inner {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:1px;
}
.matieres__item {
  padding: 2.2rem 2rem;
  border-left: 1px solid rgba(245,240,232,.07);
  display: flex; flex-direction:column; gap:.5rem;
}
.matieres__item:first-child { border-left:none; }

.matieres__swatch {
  width:100%; height:3px; border-radius:2px;
  margin-bottom:.6rem;
}
.matieres__swatch--chene   { background: linear-gradient(to right,#d4a84b,#8B6914); }
.matieres__swatch--douglas { background: linear-gradient(to right,#9a7830,#6B4F12); }
.matieres__swatch--cedre   { background: linear-gradient(to right,#c47840,#9a5a28); }
.matieres__swatch--ipe     { background: linear-gradient(to right,#7a5215,#241706); }

.matieres__name {
  font-family: var(--serif);
  font-size:1.35rem; font-weight:400; color:var(--blanc);
}
.matieres__desc {
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(245,240,232,.32); font-weight:300; margin-bottom:.8rem;
}
.matieres__bar {
  height:2px; background:rgba(245,240,232,.1); border-radius:2px; overflow:hidden;
}
.matieres__bar-fill {
  height:100%; width:0;
  background: linear-gradient(to right,var(--bois),var(--bois-clair));
  border-radius:2px;
  transition: width 1.3s var(--ease);
}
.matieres__item.visible .matieres__bar-fill { width: var(--pct); }

/* =====================================================
   CONTACT
   ===================================================== */
.contact {
  position: relative;
  background: var(--noir);
  color: var(--blanc);
  z-index: 2; overflow:hidden;
}
.contact__grain {
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    89deg, transparent 0, transparent 72px,
    rgba(255,255,255,.007) 72px, rgba(255,255,255,.007) 73px
  );
}
.contact__wrap {
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 580px;
  position: relative; z-index:2;
}
.contact__left {
  padding: 6rem 4rem 4rem 5rem;
  display: flex; flex-direction:column; justify-content:center;
  border-right: 1px solid rgba(245,240,232,.06);
  position: relative;
}
.contact__ghost-num {
  font-family: var(--elegant);
  font-size:9rem; font-weight:300; color:var(--blanc); opacity:.04;
  line-height:1; position:absolute; top:-3rem; left:4rem;
  user-select:none; pointer-events:none;
}
.contact__title {
  font-family: var(--serif);
  font-size: clamp(2.4rem,3.8vw,4.2rem);
  font-weight:400; line-height:1.08; letter-spacing:-.022em;
  color:var(--blanc);
}
.contact__title em { font-style:italic; color:var(--bois-clair); }
.contact__rabot { margin-top:2.5rem; width:200px; opacity:.7; }

.contact__infos { margin-top:3rem; display:flex; flex-direction:column; gap:1.4rem; }
.contact__info  { display:flex; flex-direction:column; gap:.3rem; }
.info-label {
  font-size:1rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,240,232,.3); font-weight:400;
}
.info-val {
  font-family: var(--elegant);
  font-size:1.5rem; font-weight:300; color:rgba(245,240,232,.65);
}

.contact__right {
  padding: 6rem 5rem 4rem 4rem;
  display: flex; align-items:center;
}
.contact__form { width:100%; display:flex; flex-direction:column; gap:1.8rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; }
.form-field { display:flex; flex-direction:column; gap:.55rem; }
.form-field label {
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,240,232,.38); font-weight:400;
}
.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: none; border-bottom:1px solid rgba(245,240,232,.14);
  color:var(--blanc); font-family:var(--elegant);
  font-size:1.05rem; font-weight:300; padding:.75rem 0;
  outline:none; transition: border-color var(--tf);
  width:100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color:rgba(245,240,232,.22); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-bottom-color:var(--bois-clair); }
.form-field select { appearance:none; cursor:pointer; }
.form-field select option { background:var(--noir); }
.form-field textarea { resize:none; height:90px; }

.form-submit {
  display:inline-flex; align-items:center; gap:1rem;
  padding:.95rem 2.4rem;
  border:1px solid rgba(245,240,232,.18);
  color:var(--blanc); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:400; align-self:flex-start;
  transition: background var(--tf), border-color var(--tf);
}
.form-submit svg { transition:transform var(--tf); }
.form-submit:hover { background:var(--vert); border-color:var(--vert); }
.form-submit:hover svg { transform:translateX(4px); }

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  position:relative; background:#080705;
  padding: 2.2rem 4rem; z-index:2; overflow:hidden;
}
.footer__grain {
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    90deg, transparent 0, transparent 38px,
    rgba(255,255,255,.005) 38px, rgba(255,255,255,.005) 39px
  );
}
.footer__shaving {
  position:absolute; bottom:0; right:3%;
  width:180px; pointer-events:none; opacity:.8;
}
.footer__inner {
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:2;
}
.footer__logo {
  height:34px; width:auto;
  filter:brightness(0) invert(1);
  opacity:.45;
}
.footer__tagline {
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,240,232,.2);
}
.footer__copy {
  font-size:.6rem; color:rgba(245,240,232,.18); letter-spacing:.05em;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1100px) {
  /* Nav */
  .nav { padding:1.3rem 2rem; }
  .nav.scrolled { padding:.9rem 2rem; }
  .nav__links {
    display:none; flex-direction:column;
    position:fixed; inset:0; background:var(--blanc);
    padding:7rem 2.5rem 3rem; gap:2rem; z-index:599;
    align-items:flex-start;
  }
  .nav__links.open { display:flex; }
  .nav__link { font-size:1.1rem; letter-spacing:.05em; }
  .nav__burger { display:flex; }

  /* Opening */
  .opening { grid-template-columns:1fr; }
  .opening__left { padding:9rem 2.5rem 4rem; z-index:4; }
  .opening__right { position:absolute; inset:0; opacity:.4; z-index:1; }
  .opening__image-wrap { clip-path:none; }
  .opening__tagline { color:var(--blanc); text-shadow:0 2px 30px rgba(0,0,0,.55); }
  .opening__tagline em { color:rgba(245,240,232,.8); }
  .opening__ghost-num { color:var(--blanc); opacity:.04; }
  .opening__meta { color: rgb(245, 240, 232);
    margin-left: -24px; }
  .opening__meta .dot { color:var(--bois-clair); }
  .svg-rabot-bg { display:none; }

  /* Manifeste */
  .manifeste { padding:7rem 2.5rem 5rem; }
  .manifeste__inner { grid-template-columns: 1fr; }
  .manifeste__image { height: 340px; clip-path: none; margin-top: 2rem; }
  .manifeste__body { margin-left:0; margin-top:2rem; }
  .manifeste__side { display:none; }

  /* Savoir-faire */
  .sf__header { padding:5rem 2.5rem 2rem; }
  .sf__item--a { grid-template-columns:1fr; }
  .sf__item--b { grid-template-columns:1fr; }
  .sf__item--d { grid-template-columns:1fr; }
  .sf__item-img { min-height:240px; position:relative; }
  .sf__item--a .sf__item-img { order:-1; }
  .sf__item-body--flip { order:1; }
  .sf__item--c { grid-template-columns:1fr; padding:0; }
  .sf__item-body--center { padding:2.5rem 2.5rem; }
  .sf__item-body { padding:2.5rem 2.5rem; }
  .sf__shaving-c { display:none; }

  /* Citation */
  .citation { padding:6rem 2.5rem; }

  /* Réalisations */
  .real__header { padding:0 2.5rem; margin-bottom:2.5rem; }
  .real__grid {
    grid-template-columns:1fr 1fr;
    padding:0 2.5rem;
  }
  .real__card:nth-child(n) { grid-column:auto; grid-row:auto; min-height:220px; }
  .real__card-label { transform:translateY(0); }

  /* Atelier */
  .atelier__wrap { grid-template-columns:1fr; }
  .atelier__visual { min-height:380px; }
  .atelier__img-frame { position:relative; height:380px; clip-path:none; }
  .atelier__content { padding:3rem 2.5rem; }

  /* Matières */
  .matieres { padding:4rem 2.5rem; }
  .matieres__inner { grid-template-columns:1fr 1fr; }

  /* Contact */
  .contact__wrap { grid-template-columns:1fr; }
  .contact__left { padding:5rem 2.5rem 2.5rem; border-right:none; border-bottom:1px solid rgba(245,240,232,.06); }
  .contact__right { padding:2.5rem 2.5rem 5rem; }

  /* Footer */
  .footer { padding:2rem 2rem; }
  .footer__inner { flex-direction:column; gap:1.2rem; text-align:center; }
}

@media (max-width:640px) {
  .matieres__inner { grid-template-columns:1fr; }
  .real__grid { grid-template-columns:1fr; padding:0 1.5rem; }
  .real__card:nth-child(n) { min-height:200px; }
  .form-row { grid-template-columns:1fr; }
  .atelier__stats { flex-wrap:wrap; gap:1.5rem; }
  .manifeste__headline { font-size:2.2rem; }
  .citation__text { font-size:1.9rem; }
  .sf__item--c { grid-template-columns:1fr; }
}