/* =========================================================
   MANIFOLD — Collection N°01
   Black & gold, geometric. Signature: the light-line.
   ========================================================= */

:root{
  --ink:        #060606;
  --ink-soft:   #0c0c0b;
  --panel:      #0f0f0e;
  --or:         #f4c20d;
  --or-soft:    #ffd451;
  --or-deep:    #b8890a;
  --craie:      #ece9e1;
  --gris:       #8b877e;
  --gris-fonce: #5a564f;
  --ligne:      rgba(255,255,255,.09);
  --ligne-or:   rgba(244,194,13,.32);

  --ff-disp: "Space Grotesk", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1480px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

html{ background:var(--ink); }
body{
  background:transparent;
  color:var(--craie);
  font-family:var(--ff-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--or); color:#000; }

.mono{ font-family:var(--ff-mono); font-weight:400; }

main, .ftr{ position:relative; z-index:2; }

/* ---------- Eyebrow / shared ---------- */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--or);
  display:inline-flex; align-items:center; gap:.8em;
}

.sec-head{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.sec-title{
  font-family:var(--ff-disp);
  font-weight:500;
  font-size:clamp(2rem, 5vw, 3.8rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin-top:1.4rem;
  color:var(--craie);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--ff-mono); font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:1.05em 1.6em; border-radius:2px;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space:nowrap;
}
.btn__arrow{ width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(.3em); }
.btn--solid{ background:var(--or); color:#0a0a0a; }
.btn--solid:hover{ background:var(--or-soft); transform:translateY(-2px); }
.btn--ghost{ color:var(--craie); border:1px solid var(--ligne); }
.btn--ghost:hover{ border-color:var(--or); color:var(--or); }

/* =========================================================
   CURTAIN (load reveal)
   ========================================================= */
.curtain{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:grid; place-items:center;
}
.curtain__mark img{ width:74px; opacity:.0; }
.curtain.is-done{ pointer-events:none; }


/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(6,6,6,.72);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--ligne);
  padding-top:1rem; padding-bottom:1rem;
}
.hdr__left{ display:flex; align-items:center; }
.hdr__logo{ display:flex; align-items:center; gap:.7rem; }
.hdr__mark{ width:30px; }
.hdr__word{ width:118px; }

/* hamburger toggle */
.hdr__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:none; border:none;
  color:var(--craie); cursor:pointer;
  transition:color .35s var(--ease);
}
.hdr__toggle:hover{ color:var(--or); }
.hdr__toggle svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* hide header controls on small screens */
@media(max-width:768px){
  .hdr__hide-mobile{ display:none !important; }
}

.hdr__cta{
  font-family:var(--ff-mono); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.85em 1.4em; border:1px solid var(--ligne-or); color:var(--or); border-radius:2px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.hdr__cta:hover{ background:var(--or); color:#0a0a0a; }

/* =========================================================
   SIDEBAR (lateral navigation)
   ========================================================= */
.sidebar-backdrop{
  position:fixed; inset:0; z-index:300;
  background:rgba(4,4,4,.6); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}
.sidebar-backdrop.is-open{ opacity:1; visibility:visible; }

.sidebar{
  position:fixed; top:0; left:0; bottom:0; z-index:310;
  width:min(380px, 86vw);
  background:#0a0a09;
  border-right:1px solid var(--ligne);
  display:flex; flex-direction:column;
  padding:2rem 2rem 2.2rem;
  transform:translateX(-102%);
  transition:transform .5s var(--ease);
}
.sidebar.is-open{ transform:translateX(0); }
.sidebar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2.5rem; }
.sidebar__label{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gris); }
.sidebar__close{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--ligne); border-radius:3px; color:var(--craie); cursor:pointer;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.sidebar__close:hover{ border-color:var(--or); color:var(--or); }
.sidebar__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.sidebar__nav{ display:flex; flex-direction:column; }
.sidebar__nav a{
  display:flex; align-items:baseline; gap:1.1rem;
  font-family:var(--ff-disp); font-weight:500; font-size:1.7rem; letter-spacing:-.01em;
  padding:1rem 0; border-top:1px solid var(--ligne);
  color:var(--craie); transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.sidebar__nav a:last-child{ border-bottom:1px solid var(--ligne); color:var(--or); }
.sidebar__nav a:hover{ color:var(--or); padding-left:.5rem; }
.sidebar__nav a .mono{ font-size:.72rem; color:var(--gris); letter-spacing:.1em; }
.sidebar__foot{ margin-top:auto; padding-top:2rem; display:flex; flex-direction:column; gap:.5rem; }
.sidebar__foot a{ color:var(--or); font-size:.95rem; }
.sidebar__foot .mono{ color:var(--gris); font-size:.74rem; letter-spacing:.12em; }
.sidebar__foot-controls{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.8rem;
}
.sidebar__ctrl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 .9rem; min-width:40px;
  background:none; border:1px solid var(--ligne); border-radius:3px;
  color:var(--craie); cursor:pointer; font-family:var(--ff-mono); font-size:.72rem;
  letter-spacing:.08em; transition:border-color .35s var(--ease), color .35s var(--ease);
}
.sidebar__ctrl-btn:hover{ border-color:var(--or); color:var(--or); }
.sidebar__ctrl-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sidebar__ctrl-btn .i-moon{ display:none; }
html[data-theme="light"] .sidebar__ctrl-btn .i-sun{ display:none; }
html[data-theme="light"] .sidebar__ctrl-btn .i-moon{ display:inline; }
.sidebar__ctrl-lang .is-active{ color:var(--or); }
.sidebar__ctrl-lang .sep{ color:var(--gris-fonce); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:8rem var(--pad) 4rem;
  overflow:hidden;
}

/* Global geometric background — injected by geo-bg.js on every page */
.geo-bg{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  pointer-events:none;
}

.hero__grid{
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center;
  gap:clamp(2rem, 5vw, 4rem);
}
.hero__text{
  position:relative; z-index:3;
  flex:1; min-width:0;
  max-width:min(640px, 56%);
}

/* ---- Lamp showcase (hero, right column) ---- */
.hero__lamps{
  position:relative; z-index:3;
  flex:0 0 auto;
  width:clamp(240px, 34vw, 480px);
  height:clamp(340px, 58vh, 680px);
  pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
}

/* Breathing halo — independent element so it never conflicts with lamp transforms */
.lamp__halo{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse at 50% 62%,
    rgba(244,194,13,.15) 0%,
    rgba(244,194,13,.06) 38%,
    transparent 65%);
  animation:haloBreath 4.5s ease-in-out infinite;
}
html[data-theme="light"] .lamp__halo{
  background:radial-gradient(ellipse at 50% 62%,
    rgba(168,120,10,.10) 0%,
    rgba(168,120,10,.03) 38%,
    transparent 65%);
}

/* Stage — enter/exit: opacity + translateY + scale only */
.lamp__stage{
  position:relative; z-index:1;
  flex:1; width:100%;
  opacity:0;
  transform:translateY(12px) scale(.97);
  transition:opacity .8s ease, transform .8s ease;
  will-change:opacity, transform;
}
.lamp__stage.is-visible{ opacity:1; transform:none; }

/* Figure — levitation animation (child of stage = no transform conflict) */
.lamp__figure{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
}
.lamp__stage.is-visible .lamp__figure{
  animation:lampFloat 6s ease-in-out infinite;
}

.lamp__img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 28px 20px rgba(0,0,0,.55)) drop-shadow(0 5px 5px rgba(0,0,0,.28));
  user-select:none;
}
html[data-theme="light"] .lamp__img{
  filter:drop-shadow(0 28px 20px rgba(0,0,0,.2)) drop-shadow(0 5px 5px rgba(0,0,0,.1));
}

/* Piece name — small-caps monospace with gold bar */
.lamp__name{
  display:flex; align-items:center; gap:.7rem; flex-shrink:0;
  margin-top:.9rem;
  font-family:var(--ff-mono); font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gris);
  opacity:0; transform:translateY(8px);
  transition:opacity .8s ease, transform .8s ease;
}
.lamp__name.is-visible{ opacity:1; transform:none; }
.lamp__name-bar{
  display:inline-block; width:18px; height:1px;
  background:var(--or); flex-shrink:0;
}

/* Keyframes */
@keyframes lampFloat{
  0%   { transform:translateY(0)    rotate(-.8deg); }
  50%  { transform:translateY(-7px) rotate(.8deg);  }
  100% { transform:translateY(0)    rotate(-.8deg); }
}
@keyframes haloBreath{
  0%,100% { opacity:.4;  transform:scale(.94); }
  50%     { opacity:.9;  transform:scale(1.06); }
}
.hero__title{
  font-family:var(--ff-disp);
  font-weight:600;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  line-height:1.0;
  letter-spacing:-.03em;
  margin:1.8rem 0;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.line--accent > span{ color:var(--or); }
.hero__lede{
  max-width:38ch; color:var(--gris);
  font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.7;
}
.hero__accroche{
  display:block; font-family:var(--ff-disp); font-weight:500;
  color:var(--craie); font-size:clamp(1.3rem,2vw,1.7rem);
  letter-spacing:-.01em; line-height:1.2; margin-bottom:.6rem;
}
.hero__actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

.hero__piece{ position:relative; z-index:2; aspect-ratio:4/5; }
.hero__halo{
  position:absolute; inset:-12% -8%; z-index:-1;
  background:radial-gradient(closest-side, rgba(244,194,13,.16), rgba(244,194,13,.04) 55%, transparent 75%);
  filter:blur(8px);
}
.hero__line{ position:absolute; inset:4% 6%; z-index:1; width:88%; height:92%; }
.hero__line .draw{ fill:none; stroke:var(--ligne-or); stroke-width:1; }
.hero__img{
  width:100%; height:100%; object-fit:cover; border-radius:3px;
  position:relative; z-index:2;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
}
.hero__video{
  display:block; background:transparent;
  object-position:center;
  border-radius:0;
  box-shadow:none;
  /* large feathered fade so the video melts into the background on every edge */
  -webkit-mask-image:radial-gradient(66% 74% at 50% 46%, #000 44%, rgba(0,0,0,.4) 64%, transparent 82%);
  mask-image:radial-gradient(66% 74% at 50% 46%, #000 44%, rgba(0,0,0,.4) 64%, transparent 82%);
}
/* the caption sits below the faded edge — keep it clear of the mask */
.hero__piece:has(.hero__video) .hero__cap{ bottom:.4rem; }
.hero__cap{
  position:absolute; left:0; bottom:-1.6rem; z-index:3;
  display:flex; gap:1rem; align-items:center;
  font-size:.78rem; color:var(--gris);
}
.hero__cap .mono{ color:var(--or); letter-spacing:.1em; }

.hero__index{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  font-size:.72rem; color:var(--gris); z-index:4;
}
.hero__index-rule{ width:1px; height:60px; background:linear-gradient(var(--or),transparent); }

.hero__scroll{
  position:absolute; left:var(--pad); bottom:2rem; z-index:4;
  display:flex; align-items:center; gap:1rem;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris);
}
.hero__scroll-rule{ width:60px; height:1px; background:var(--gris-fonce); position:relative; overflow:hidden; }
.hero__scroll-rule::after{
  content:""; position:absolute; inset:0; background:var(--or);
  transform:translateX(-100%); animation:scrollpulse 2.4s var(--ease) infinite;
}
@keyframes scrollpulse{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* =========================================================
   MANIFESTO STRIP
   ========================================================= */
.strip{
  border-block:1px solid var(--ligne);
  padding:clamp(3rem,8vw,7rem) var(--pad);
  margin-top:3rem;
}
.strip__line{
  max-width:var(--maxw); margin:0 auto;
  font-family:var(--ff-disp); font-weight:400;
  font-size:clamp(1.6rem,4.4vw,3.4rem);
  line-height:1.18; letter-spacing:-.02em;
  color:var(--gris-fonce);
  display:flex; flex-wrap:wrap; gap:.4em;
}
.strip__line span{ color:var(--craie); }
.strip__line em{ color:var(--or); font-style:italic; }

/* =========================================================
   COLLECTION
   ========================================================= */
.collection{ padding:clamp(4rem,9vw,8rem) 0; }
.collection .sec-head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); }

.pieces{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem);
}
.piece{ display:flex; flex-direction:column; }

.piece__media{
  position:relative; display:block; overflow:hidden; border-radius:3px;
  aspect-ratio:4/5; background:var(--panel);
  border:1px solid var(--ligne);
  transition:border-color .6s var(--ease), box-shadow .6s var(--ease);
}
/* the frame "lights up" on hover, like an LED switching on */
.piece__media:hover{
  border-color:var(--or);
  box-shadow:0 0 0 1px rgba(244,194,13,.35), 0 24px 70px -34px rgba(244,194,13,.5);
}

.piece__media img{
  width:100%; height:100%; object-fit:cover;
  /* "off" state — dim & cool */
  filter:brightness(.62) saturate(.85) contrast(1.02);
  transform:scale(1.02);
  transition:filter .7s var(--ease), transform 1.1s var(--ease);
}
.piece__media:hover img{
  /* "on" state — warm & lit */
  filter:brightness(1.04) saturate(1.06) contrast(1.02);
  transform:scale(1.06);
}
/* gold glow that blooms on hover */
.piece__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 60%, rgba(244,194,13,.16), transparent 70%);
  opacity:0; transition:opacity .7s var(--ease);
}
.piece__media:hover::after{ opacity:1; }

.piece__trace{ display:none; }

.piece__num{
  position:absolute; top:1rem; left:1.1rem; z-index:4;
  font-size:.82rem; letter-spacing:.1em; color:var(--craie);
  mix-blend-mode:difference;
}

.piece__meta{ padding:1.3rem .2rem 0; }
.piece__meta h3{
  font-family:var(--ff-disp); font-weight:500; font-size:1.5rem; letter-spacing:-.01em;
}
.fam{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--or); margin-top:.5rem;
}

/* =========================================================
   FAMILIES
   ========================================================= */
.familles{ padding:clamp(4rem,9vw,8rem) 0; border-top:1px solid var(--ligne); }
.familles .sec-head{ margin-bottom:clamp(2rem,4vw,3.5rem); }
.fam-list{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.fam-row{
  display:grid; grid-template-columns:1fr 1.3fr; gap:2rem; align-items:start;
  padding:2.2rem 0; border-top:1px solid var(--ligne);
}
.fam-row:last-child{ border-bottom:1px solid var(--ligne); }
.fam-row__n{ font-size:.8rem; color:var(--or); letter-spacing:.1em; padding-top:.5rem; }
.fam-row__t{ font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.01em; }
.fam-row__d{ color:var(--gris); max-width:46ch; }
.fam-row__d .mono{ display:block; margin-top:.8rem; color:var(--gris-fonce); font-size:.78rem; letter-spacing:.1em; }

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifeste{
  padding:clamp(5rem,11vw,10rem) var(--pad);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(244,194,13,.06), transparent 60%),
    var(--ink-soft);
  border-top:1px solid var(--ligne);
}
.manifeste__inner{ max-width:1000px; margin:0 auto; text-align:center; }
.manifeste__lead{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(1.8rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.02em;
  margin:1.8rem auto; max-width:18ch;
}
.manifeste__body{ color:var(--gris); max-width:60ch; margin:0 auto; font-size:1.05rem; }
.principles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:clamp(3rem,6vw,5rem);
  text-align:left;
}
.principle{ border-top:1px solid var(--ligne-or); padding-top:1.4rem; }
.principle span{ font-size:.8rem; color:var(--or); letter-spacing:.1em; }
.principle h4{ font-family:var(--ff-disp); font-weight:500; font-size:1.2rem; margin:.8rem 0 .6rem; }
.principle p{ color:var(--gris); font-size:.92rem; }

/* =========================================================
   ATELIER
   ========================================================= */
.atelier{ padding:clamp(4rem,9vw,8rem) 0; border-top:1px solid var(--ligne); }
.atelier__grid{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center;
}
.atelier__p{ color:var(--gris); margin-top:1.6rem; max-width:48ch; font-size:1.02rem; }
.atelier__facts{ list-style:none; margin-top:2.2rem; }
.atelier__facts li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  padding:1rem 0; border-top:1px solid var(--ligne); align-items:baseline;
}
.atelier__facts li:last-child{ border-bottom:1px solid var(--ligne); }
.atelier__facts .mono{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or); }
.atelier__media{ aspect-ratio:4/5; overflow:hidden; border-radius:3px; border:1px solid var(--ligne); }
.atelier__media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.92); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  padding:clamp(5rem,10vw,9rem) 0;
  border-top:1px solid var(--ligne);
  background:radial-gradient(70% 60% at 80% 0%, rgba(244,194,13,.05), transparent 55%);
}
.contact__grid{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem);
}
.contact__title{
  font-family:var(--ff-disp); font-weight:500;
  font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.06; letter-spacing:-.02em; margin-top:1.4rem;
}
.contact__p{ color:var(--gris); margin-top:1.4rem; max-width:42ch; }
.contact__direct{ margin-top:2.2rem; display:flex; flex-direction:column; gap:.6rem; }
.contact__direct a{ font-family:var(--ff-disp); font-size:1.4rem; color:var(--or); width:fit-content; position:relative; }
.contact__direct a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--ligne-or); transition:background .35s; }
.contact__direct a:hover::after{ background:var(--or); }
.contact__direct .mono{ color:var(--gris); font-size:.78rem; letter-spacing:.14em; }

.form{ display:flex; flex-direction:column; gap:1.3rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); }
.field input, .field select, .field textarea{
  background:var(--panel); border:1px solid var(--ligne); color:var(--craie);
  padding:.95em 1em; font-family:var(--ff-body); font-size:.98rem; border-radius:2px;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--or); background:#121210;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--gris-fonce); }
.field textarea{ resize:vertical; }
.form__submit{ align-self:flex-start; margin-top:.4rem; border:0; cursor:pointer; }
.form__note{ font-size:.78rem; color:var(--or); letter-spacing:.06em; min-height:1.2em; }

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{ padding:clamp(3rem,6vw,5rem) var(--pad) 2.5rem; border-top:1px solid var(--ligne); }
.ftr__top{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; padding-bottom:2.5rem; border-bottom:1px solid var(--ligne);
}
.ftr__brand{ display:flex; align-items:center; gap:.8rem; }
.ftr__mark{ width:34px; }
.ftr__word{ width:130px; }
.ftr__tag{ font-family:var(--ff-disp); font-size:clamp(1rem,2vw,1.4rem); color:var(--gris); }
.ftr__bottom{
  max-width:var(--maxw); margin:2rem auto 0; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.ftr__nav{ display:flex; gap:1.8rem; }
.ftr__nav a{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }
.ftr__nav a:hover{ color:var(--or); }
.ftr__site{ color:var(--or); font-size:.78rem; letter-spacing:.1em; }
.ftr__copy{ color:var(--gris-fonce); font-size:.72rem; letter-spacing:.08em; }

/* =========================================================
   REVEAL ANIMATIONS (JS toggles .is-in)
   ========================================================= */
[data-rise]{ opacity:0; transform:translateY(26px); }
.is-in[data-rise], [data-rise].is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .pieces{ grid-template-columns:repeat(2,1fr); }
  .contact__grid{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:1fr; gap:0; }
  .principle{ padding-block:1.4rem; }
  /* hero: reorder elements — title → lede → lamp → actions */
  .hero__grid{ flex-direction:column; align-items:stretch; gap:0; }
  .hero__text{ display:contents; }
  .hero__title{ order:1; margin-bottom:1.6rem; }
  .hero__lede{ order:2; margin-bottom:0; }
  .hero__lamps{
    order:3;
    width:min(320px, 80vw);
    height:clamp(240px, 52vw, 380px);
    align-self:center;
    margin:1.8rem auto;
  }
  .hero__actions{ order:4; margin-bottom:2rem; }
}
@media (max-width:560px){
  .hdr__word, .hdr__word-dark{ width:104px; }
  .hdr__cta{ padding:.7em 1em; font-size:.68rem; }
  /* products: 2 columns on mobile */
  .pieces{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .piece__meta{ padding:.7rem .1rem 0; }
  .piece__meta h3{ font-size:1rem; }
  .fam{ font-size:.62rem; margin-top:.3rem; }
  .piece__num{ font-size:.7rem; top:.6rem; left:.7rem; }
  .fam-row{ grid-template-columns:1fr; gap:.8rem; }
  .ftr__bottom{ flex-direction:column; align-items:flex-start; }
  .hero__scroll{ display:none; }
  .hero__lamps{ width:min(260px, 82vw); height:clamp(200px, 58vw, 300px); }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  [data-rise]{ opacity:1; transform:none; }
  .hero__title .line > span{ transform:none !important; }
  .piece__media img{ filter:brightness(.95) saturate(1) contrast(1); transform:none; }
  /* lamp: instant visible state, no transitions */
  .lamp__stage, .lamp__name{ transition:none !important; }
  .lamp__stage.is-visible, .lamp__stage{ opacity:1 !important; transform:none !important; }
  .lamp__name.is-visible, .lamp__name{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   PRODUCT PAGE (PDP)
   ========================================================= */
.pdp{ max-width:var(--maxw); margin:0 auto; padding:8.5rem var(--pad) 5rem; position:relative; z-index:2; }
.pdp__back{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); margin-bottom:2.5rem; transition:color .3s var(--ease);
}
.pdp__back:hover{ color:var(--or); }
.pdp__back svg{ width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.pdp__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:start;
}

/* ---- gallery ---- */
.pgallery__main{
  position:relative; aspect-ratio:4/5; border:1px solid var(--ligne); border-radius:3px;
  overflow:hidden; background:var(--panel);
}
.pslide{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); }
.pslide.is-active{ opacity:1; }
.pslide img{ width:100%; height:100%; object-fit:cover; }
.pslide--ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:repeating-linear-gradient(135deg, #161513, #161513 14px, #131210 14px, #131210 28px);
  color:var(--gris-fonce);
}
.pslide--ph span{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.pslide--ph svg{ width:30px; height:30px; fill:none; stroke:var(--gris-fonce); stroke-width:1.4; }

.pgallery__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:44px; height:44px; display:grid; place-items:center;
  background:rgba(6,6,6,.55); backdrop-filter:blur(6px);
  border:1px solid var(--ligne); border-radius:50%; color:var(--craie); cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.pgallery__arrow:hover{ border-color:var(--or); color:var(--or); }
.pgallery__arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pgallery__arrow--prev{ left:1rem; }
.pgallery__arrow--next{ right:1rem; }

.pgallery__thumbs{ display:flex; gap:.8rem; margin-top:.9rem; }
.pthumb{
  flex:1; aspect-ratio:1/1; border:1px solid var(--ligne); border-radius:2px; overflow:hidden;
  background:var(--panel); cursor:pointer; padding:0; opacity:.6;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.pthumb img{ width:100%; height:100%; object-fit:cover; }
.pthumb.is-active{ opacity:1; border-color:var(--or); }
.pthumb--ph{
  background:repeating-linear-gradient(135deg, #161513, #161513 8px, #131210 8px, #131210 16px);
}

/* ---- info ---- */
.pdp__info{ position:sticky; top:6.5rem; }
.pdp__title{ font-family:var(--ff-disp); font-weight:600; font-size:clamp(2.2rem,4vw,3.4rem); letter-spacing:-.02em; line-height:1.02; margin:.8rem 0 .4rem; }
.pdp__ref{ font-size:.74rem; letter-spacing:.14em; color:var(--gris); }
.pdp__desc{ color:var(--gris); margin-top:1.6rem; font-size:1.02rem; line-height:1.7; max-width:48ch; }

.buy{ margin-top:2.2rem; padding:1.6rem 0; border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne); }
.buy__price{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.3rem; }
.buy__price .mono{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }
.buy__price strong{ font-family:var(--ff-disp); font-weight:500; font-size:1.9rem; color:var(--craie); }
.buy__actions{ display:flex; flex-direction:column; gap:.8rem; }
.buy__add[disabled]{
  background:#1a1916; color:var(--gris); border:1px solid var(--ligne); cursor:not-allowed;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
}
.buy__add[disabled]:hover{ transform:none; background:#1a1916; }
.buy__add .dot{ width:7px; height:7px; border-radius:50%; background:var(--gris-fonce); }
.buy .btn--ghost{ justify-content:center; }
.buy__note{ font-size:.72rem; color:var(--gris-fonce); letter-spacing:.04em; margin-top:1.1rem; line-height:1.6; text-transform:none; }

.specs{ margin-top:2.2rem; }
.specs > div{
  display:grid; grid-template-columns:11rem 1fr; gap:1rem; padding:.95rem 0;
  border-top:1px solid var(--ligne); align-items:baseline;
}
.specs > div:last-child{ border-bottom:1px solid var(--ligne); }
.specs dt{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or); }
.specs dd{ color:var(--craie); font-size:.95rem; }

@media (max-width:860px){
  .pdp__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .pdp__info{ position:static; }
}
@media (max-width:560px){
  .specs > div{ grid-template-columns:1fr; gap:.25rem; }
}

.piece__meta h3 a{ color:inherit; transition:color .3s var(--ease); }
.piece__meta h3 a:hover{ color:var(--or); }

/* =========================================================
   LIGHT THEME (day mode) + HEADER CONTROLS + LOGO SWAP
   ========================================================= */
html[data-theme="light"]{
  --ink:        #f5f4ef;
  --ink-soft:   #ecebe4;
  --panel:      #ffffff;
  --or:         #a9780a;
  --or-soft:    #c08f1e;
  --or-deep:    #7d5800;
  --craie:      #16150f;
  --gris:       #6c685f;
  --gris-fonce: #a39e93;
  --ligne:      rgba(0,0,0,.12);
  --ligne-or:   rgba(168,120,10,.4);
}
/* surfaces that were hardcoded dark */
html[data-theme="light"] .hdr.is-stuck{ background:rgba(255,255,255,.82); border-bottom-color:var(--ligne); }
html[data-theme="light"] .sidebar{ background:#ffffff; }
html[data-theme="light"] .sidebar-backdrop{ background:rgba(20,20,18,.32); }
html[data-theme="light"] .btn--solid{ color:#fff; }
html[data-theme="light"] .btn--solid:hover{ color:#fff; }
html[data-theme="light"] .hdr__cta:hover{ color:#fff; }
html[data-theme="light"] .piece__media img{ filter:brightness(.97) saturate(1.02) contrast(1.01); }
html[data-theme="light"] .piece__media:hover img{ filter:brightness(1.04) saturate(1.06) contrast(1.02); }
html[data-theme="light"] .pslide--ph{
  background:repeating-linear-gradient(135deg, #eceae3, #eceae3 14px, #e3e1d8 14px, #e3e1d8 28px);
  color:var(--gris-fonce);
}
html[data-theme="light"] .pthumb--ph{
  background:repeating-linear-gradient(135deg, #eceae3, #eceae3 8px, #e3e1d8 8px, #e3e1d8 16px);
}
html[data-theme="light"] .buy__add[disabled]{ background:#eceae3; }
html[data-theme="light"] .pgallery__arrow{ background:rgba(255,255,255,.7); }
html[data-theme="light"] ::selection{ background:var(--or); color:#fff; }

/* logo wordmark swap (white for dark theme, black for light) */
.hdr__word-dark{ width:118px; }
.ftr__word-dark{ width:130px; }
.hdr__word-dark, .ftr__word-dark{ display:none; }
html[data-theme="light"] .hdr__word{ display:none; }
html[data-theme="light"] .hdr__word-dark{ display:inline; }
html[data-theme="light"] .ftr__word{ display:none; }
html[data-theme="light"] .ftr__word-dark{ display:inline; }

/* header controls */
.hdr__controls{ display:flex; align-items:center; gap:.7rem; }
.hdr__icon{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--ligne); border-radius:3px; color:var(--craie); cursor:pointer;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.hdr__icon:hover{ border-color:var(--or); color:var(--or); }
.hdr__icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hdr__icon .i-moon{ display:none; }
html[data-theme="light"] .hdr__icon .i-sun{ display:none; }
html[data-theme="light"] .hdr__icon .i-moon{ display:inline; }

.hdr__lang{
  display:inline-flex; align-items:center; gap:.35em; padding:0 .8em; height:42px;
  background:none; border:1px solid var(--ligne); border-radius:3px; cursor:pointer;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; color:var(--gris);
  transition:border-color .35s var(--ease);
}
.hdr__lang:hover{ border-color:var(--or); }
.hdr__lang span{ transition:color .3s var(--ease); }
.hdr__lang .is-active{ color:var(--or); }
.hdr__lang .sep{ color:var(--gris-fonce); }

@media (max-width:560px){
  .hdr__icon, .hdr__lang{ height:38px; }
  .hdr__icon{ width:38px; }
  .hdr__controls{ gap:.45rem; }
}