@font-face{font-family:Fraunces;src:url(./fonts/fraunces.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:InterVar;src:url(./fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --creme:#F4EEE4; --lin:#E9DFD0; --encre:#2B1F19; --accent:#8A3E27;    --sourd:#696058;
  --filet:rgba(43,31,25,.20);
  --serif:Fraunces,Georgia,serif; --sans:InterVar,system-ui,sans-serif;
  --marge:80px; --gout:24px; --rythme:160px; --r:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);
  font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:.95;margin:0}
h1{font-size:clamp(44px,6.2vw,88px)}
h2{font-size:clamp(34px,4.4vw,60px)}
em{font-style:normal;color:var(--accent)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p a{text-decoration:underline;text-underline-offset:2px}
p{margin:0 0 1em}
.meta{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sourd)}
.lede{max-width:46ch;margin-top:24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}

.topbar{position:fixed;top:var(--kf-demo-h, 0px);left:0;right:0;z-index:50;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--marge);background:rgba(244,238,228,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;
  transition:border-color .3s ease}
.topbar.is-on{border-bottom-color:var(--filet)}
.topbar__name{font-family:var(--serif);font-size:19px;color:var(--encre)}
.topbar nav{display:flex;align-items:center;gap:26px}
.topbar nav a{font-size:14px;color:var(--encre)}
.topbar nav a.btn{color:var(--creme)}

.btn{display:inline-block;padding:10px 20px;border-radius:var(--r);
  font:500 14px/1 var(--sans);letter-spacing:.02em;cursor:pointer;border:1px solid transparent}
.btn--ink{background:var(--encre);color:var(--creme)}
.btn--accent{background:var(--accent);color:var(--creme)}
.btn:hover{background:var(--accent);color:var(--creme);text-decoration:none}

:root{--barre:56px}
main [id], main section[id]{scroll-margin-top:calc(var(--kf-demo-h, 0px) + var(--barre) + 16px)}

main{padding:0 var(--marge)}
.hero{display:grid;grid-template-columns:5fr 7fr;gap:var(--gout);
  align-items:center;min-height:calc(100vh - var(--kf-demo-h, 0px));padding:136px 0 60px}
.section{padding:var(--rythme) 0;border-top:1px solid var(--filet)}
.section--lin{background:var(--lin);margin:0 calc(var(--marge) * -1);
  padding-left:var(--marge);padding-right:var(--marge);border:0}
.section__head{max-width:60ch;margin-bottom:64px}
.section__head h2{margin:10px 0}

.intro{border-top:0}
.intro h2{margin:10px 0 56px;max-width:16ch}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gout) 64px;max-width:1000px}
.intro__grid p{margin:0 0 1.2em;max-width:52ch}
.intro__quote{font-family:var(--serif);font-size:32px;line-height:1.25;text-wrap:balance;
  padding-top:24px;border-top:1px solid var(--filet)}
.intro__next{margin-top:72px;padding-top:20px;border-top:1px solid var(--filet)}

.piece{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.piece--wide{grid-template-columns:8fr 4fr}
.hero > *, .piece > *, .essences li > *{min-width:0}   
.piece__stage{position:relative;width:100%;aspect-ratio:5/4;min-height:320px;overflow:hidden}
.piece--wide .piece__stage{aspect-ratio:16/10}
.piece__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.piece__fallback{color:var(--sourd)}
.piece__essence,.piece__fabric{display:block;font-family:var(--serif);font-size:38px;line-height:1.1;margin-top:2px}
.piece__label{margin:0 0 14px}
.piece__label + .piece__label{margin-top:34px}
.piece__spec{margin-top:30px;padding-top:14px;border-top:1px solid var(--filet)}

.swatches{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.swatch{width:56px;height:56px;padding:0;border:1px solid var(--filet);border-radius:var(--r);
  background-size:cover;background-position:center;cursor:pointer;position:relative;
  transition:transform .18s ease}
.swatch:hover{transform:translateY(-3px)}
.swatch[aria-checked="true"]{outline:2px solid var(--accent);outline-offset:3px}

.essences{list-style:none;margin:0;padding:0}
.essences li{display:grid;grid-template-columns:200px 1fr auto;gap:var(--gout);
  align-items:center;padding:28px 0;border-top:1px solid var(--filet)}
.essences li:last-child{border-bottom:1px solid var(--filet)}
.essences img{width:200px;height:120px;object-fit:cover;border-radius:var(--r);display:block}
.essences h3{font-family:var(--serif);font-size:30px;font-weight:600;margin:0 0 4px}

.devis{display:grid;grid-template-columns:1fr 1fr;gap:32px var(--gout);max-width:820px}
.field{margin:0;display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sourd)}
.field select,.field textarea{font:400 18px/1.5 var(--sans);color:var(--encre);
  background:var(--lin);border:0;border-bottom:1px solid var(--encre);
  border-radius:var(--r) var(--r) 0 0;padding:12px 12px;resize:vertical}
.devis__ok{max-width:820px;font-family:var(--serif);font-size:32px;line-height:1.25}

.foot{background:var(--lin);margin-top:var(--rythme);padding:64px var(--marge);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gout);font-size:16px}
.foot p:last-child{margin:0}

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.is-in{opacity:1;transform:none}

@media (max-width:900px){
  :root{--marge:20px;--rythme:96px}
  body{font-size:17px}
  .hero{grid-template-columns:1fr;min-height:auto;padding:96px 0 40px;gap:40px}
  .piece,.piece--wide{grid-template-columns:1fr;gap:28px}
  .piece__stage{aspect-ratio:4/3;min-height:260px}
  .piece__essence,.piece__fabric{font-size:30px}
  .topbar nav{gap:16px}
  .topbar nav a:not(.btn){display:none}
  .essences li{grid-template-columns:100px 1fr;gap:16px}
  .essences img{width:100px;height:80px}
  .intro__grid{grid-template-columns:1fr;gap:0}
  .intro h2{margin-bottom:36px}
  .intro__quote{font-size:26px}
  .devis{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr;gap:32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .swatch{transition:none}
  .topbar{transition:none}
}