/* ============================================================
   CHAMAL — feuille de style
   Palette échantillonnée directement sur les photographies studio.
   Charbon = le mur de la galerie. Terracotta = l'intérieur du cadre.
   ============================================================ */

@font-face{font-family:'Instrument Serif';src:url(assets/font-1.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(assets/font-2.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url(assets/font-3.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(assets/font-4.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(assets/font-5.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#14100C;
  --ink-2:#1B1610;
  --ink-3:#241D16;
  --bone:#EDE3D6;
  --bone-2:#DCCFBD;
  --sand:#AD9A83;
  --terra:#9E552A;
  --terra-deep:#6B3413;
  --terra-lit:#C9743A;
  --brass:#C0965A;
  --line:rgba(237,227,214,.15);
  --line-dark:rgba(20,16,12,.16);

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1320px;
  --rhythm:clamp(88px,13vh,168px);

  --page-bg:var(--ink);
  --page-fg:var(--bone);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page-bg);color:var(--page-fg);
  font-family:var(--sans);font-weight:300;font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.75;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  transition:background-color .9s ease,color .9s ease;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
img[data-img]{background:var(--ink-2)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* ---------- typographie ---------- */
.d1,.d2,.d3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;margin:0}
.d1{font-size:clamp(3.1rem,9.5vw,8.2rem);line-height:.93}
.d2{font-size:clamp(2rem,5vw,4rem);line-height:1.02}
.d3{font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.12}
.lede{max-width:34ch;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.62;color:var(--bone-2)}
.prose{max-width:62ch}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.muted{color:var(--sand)}

/* notation d'atelier: porte une information (édition, origine, année, cote) */
.note{font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--sand);line-height:1.9;margin:0}
.note-b{color:var(--brass)}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- structure ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:var(--rhythm)}
.band-tight{padding-block:clamp(56px,8vh,96px)}
.stack-s>*+*{margin-top:14px}
.stack-m>*+*{margin-top:26px}
.stack-l>*+*{margin-top:clamp(36px,6vh,64px)}

/* ---------- barre de navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:22px var(--gutter);
  display:flex;align-items:center;gap:32px;
  transition:background-color .5s ease,padding .4s ease,border-color .5s ease;
  border-bottom:1px solid transparent}
.nav-solid{background:color-mix(in srgb,var(--page-bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding-block:14px;border-bottom-color:var(--line)}
.brand{font-family:var(--sans);font-weight:500;font-size:.96rem;letter-spacing:.42em;
  margin-right:auto;padding-left:.42em}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:.8rem;letter-spacing:.05em;color:var(--bone-2);
  padding-block:4px;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.nav-links a:hover{border-bottom-color:var(--brass)}
.nav-links a.on{color:var(--page-fg);border-bottom-color:var(--brass)}
.nav-end{display:flex;align-items:center;gap:20px}
.lang{position:relative}
.lang-btn{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--sand);
  display:flex;align-items:center;gap:7px}
.lang-list{position:absolute;top:calc(100% + 12px);right:0;min-width:136px;
  background:var(--ink-2);border:1px solid var(--line);padding:6px;display:none}
.lang-list.open{display:block}
.lang-list button{display:block;width:100%;text-align:left;padding:7px 12px;
  font-size:.78rem;color:var(--bone-2)}
.lang-list button:hover{background:var(--ink-3);color:var(--bone)}
.lang-list button[aria-current="true"]{color:var(--brass)}
.inq{font-size:.78rem;letter-spacing:.09em;border:1px solid var(--line);
  padding:9px 18px;transition:border-color .3s,background-color .3s,color .3s}
.inq:hover{border-color:var(--brass);background:var(--brass);color:var(--ink)}
/* la barre passe en encre quand elle survole une section claire */
.nav-onlight{color:var(--ink)}
.nav-onlight .nav-links a{color:rgba(20,16,12,.72)}
.nav-onlight .nav-links a.on{color:var(--ink)}
.nav-onlight .lang-btn{color:rgba(20,16,12,.6)}
.nav-onlight .inq{border-color:var(--line-dark)}
.nav-onlight .inq:hover{color:var(--bone)}
.nav-onlight.nav-solid{background:rgba(237,227,214,.9);border-bottom-color:var(--line-dark)}
.burger{display:none;width:30px;height:14px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .35s}
.burger span:first-child{top:0}.burger span:last-child{bottom:0}

/* ---------- boutons ---------- */
.cta{display:inline-flex;align-items:center;gap:14px;font-size:.82rem;letter-spacing:.13em;
  text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--brass);color:var(--page-fg)}
.cta svg{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.cta:hover svg{transform:translateX(9px)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;align-items:end;position:relative;overflow:hidden}
.hero-img{position:absolute;top:0;right:0;width:min(64vw,900px);height:100%;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 16%,rgba(20,16,12,.66) 44%,rgba(20,16,12,0) 82%)}
.hero-bloom{position:absolute;top:24%;right:14%;width:min(46vw,540px);aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,214,176,.22),rgba(201,116,58,.10) 42%,transparent 70%);
  filter:blur(18px)}
.hero-inner{position:relative;z-index:2;width:100%;
  padding-block:clamp(96px,16vh,150px)}
.hero h1{max-width:12ch}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  margin-top:clamp(40px,7vh,72px);flex-wrap:wrap;max-width:min(680px,50vw)}

/* ---------- image éditoriale ---------- */
.fig{position:relative;margin:0}
.fig img{width:100%}
.fig-glow::before{content:"";position:absolute;inset:8% 6%;z-index:-1;
  background:radial-gradient(ellipse at 50% 42%,rgba(201,116,58,.42),transparent 68%);
  filter:blur(46px)}
.cap{margin-top:14px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* révélation par masque, un seul geste, désactivé si mouvement réduit */
.reveal>img,.reveal img{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s cubic-bezier(.22,.68,.24,1)}
.reveal.in img{clip-path:inset(0 0 0 0)}

/* ---------- courbes de contour ---------- */
.curves{display:block;width:100%;height:clamp(70px,9vw,130px);opacity:.5}
.curves path{fill:none;stroke:var(--brass);stroke-width:.7;opacity:.3}

/* ---------- composition asymétrique des objets sélectionnés ---------- */
.sel{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3.4vw,52px);align-items:end}
.sel-a{grid-column:1/7}
.sel-b{grid-column:8/13;padding-bottom:clamp(40px,9vh,120px)}
.sel-c{grid-column:3/8;margin-top:clamp(48px,9vh,124px)}
.sel-d{grid-column:9/13;margin-top:clamp(-40px,-4vh,0px);align-self:start}

.obj-link{display:block}
.obj-link .fig img{transition:transform 1.1s cubic-bezier(.22,.68,.24,1)}
.obj-link:hover .fig img{transform:scale(1.022)}
.obj-name{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.1}

/* ---------- section terracotta pleine largeur ---------- */
.terra-band{background:var(--terra-deep);color:var(--bone);position:relative}
.terra-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 62% 46%,rgba(226,146,84,.34),transparent 62%)}
.terra-band .wrap{position:relative;z-index:1}
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.split-img{grid-column:1/7}
.split-txt{grid-column:8/13}
.split-rev .split-img{grid-column:7/13;order:2}
.split-rev .split-txt{grid-column:1/6;order:1}
.split-top{align-items:start}

/* ---------- séquence jour vers nuit ---------- */
.dusk{position:relative;background:var(--bone);color:var(--ink);
  transition:background-color .1s linear,color .1s linear}
.dusk-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:1fr minmax(260px,400px) 1fr;
  align-items:center;gap:clamp(22px,4vw,64px);padding-inline:var(--gutter)}
.dusk-frame{position:relative;grid-column:2}
.dusk-frame img{width:100%;transition:filter .12s linear}
.dusk-on{position:absolute;inset:0;opacity:0}
.dusk-halo{position:absolute;left:50%;top:34%;translate:-50% -50%;
  width:210%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,234,200,.7),rgba(201,116,58,.26) 34%,transparent 64%);
  filter:blur(40px)}
.dusk-t{grid-column:1;justify-self:end;text-align:right;max-width:15ch}
.dusk-l{grid-column:3;max-width:28ch}
.dusk .lede{color:inherit;opacity:.74}
.dusk-track{height:280vh}

/* ---------- catalogue ---------- */
.cat{border-top:1px solid var(--line)}
.cat-row{display:grid;grid-template-columns:132px 1fr auto;gap:clamp(20px,3vw,48px);
  align-items:center;padding-block:26px;border-bottom:1px solid var(--line);
  transition:background-color .45s ease,padding-inline .45s ease}
.cat-row:hover{background:var(--ink-2);padding-inline:18px}
.cat-thumb{aspect-ratio:3/4;overflow:hidden;background:var(--ink-2)}
.cat-thumb img{width:100%;height:100%;object-fit:cover}
.cat-meta{display:flex;flex-direction:column;gap:5px}
.cat-price{text-align:right;white-space:nowrap}
.tag{display:inline-block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:4px 10px;color:var(--sand)}
.tag-unique{border-color:rgba(192,150,90,.5);color:var(--brass)}
.tag-sold{opacity:.55}

/* ---------- fiche objet ---------- */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:clamp(20px,3vw,44px);border-top:1px solid var(--line);padding-top:30px}
.spec h4{margin:0 0 8px;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:400;color:var(--sand)}
.spec p{margin:0;font-size:.95rem}
.plate{max-width:780px}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(18px,2.4vw,34px)}

/* ---------- processus ---------- */
.steps{counter-reset:s;border-top:1px solid var(--line)}
.step{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:clamp(18px,3vw,44px);
  padding-block:24px;border-bottom:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);font-size:.68rem;letter-spacing:.14em;
  color:var(--brass);padding-top:.5em}
.step h3{margin:0 0 6px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15}
.step p{margin:0;color:var(--sand);max-width:52ch}

/* ---------- journal ---------- */
.jr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(30px,4vw,60px)}
.jr-item .fig img{aspect-ratio:4/5;object-fit:cover}
.jr-item h3{font-family:var(--serif);font-weight:400;margin:16px 0 8px;
  font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.12}
.jr-body{max-width:62ch}
.jr-body p{margin:0 0 1.15em}

/* ---------- formulaire ---------- */
.form{display:grid;gap:22px;max-width:560px}
.field label{display:block;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--sand);margin-bottom:9px}
.field input,.field textarea,.field select{width:100%;background:transparent;color:var(--page-fg);
  border:0;border-bottom:1px solid var(--line);padding:11px 0;font:inherit;font-size:.98rem}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--brass)}
.field select option{background:var(--ink-2);color:var(--bone)}
.form-msg{font-size:.9rem;color:var(--brass);min-height:1.4em}

/* ---------- pied de page ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(52px,7vh,84px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:clamp(26px,4vw,56px)}
.foot a:hover{color:var(--brass)}

/* ---------- vues ---------- */
.view{display:none}
.view.on{display:block}
.view-head{padding-top:calc(clamp(96px,14vh,170px));padding-bottom:clamp(30px,5vh,58px)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .sel-a{grid-column:1/8}.sel-b{grid-column:8/13}
  .sel-c{grid-column:1/7}.sel-d{grid-column:7/13}
  .split-img,.split-rev .split-img{grid-column:1/13;order:1}
  .split-txt,.split-rev .split-txt{grid-column:1/13;order:2}
}
@media (max-width:820px){
  .nav-links,.nav-end .inq{display:none}
  .burger{display:block}
  .nav-open .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom-color:transparent}
  .nav-open .nav-links{display:flex;position:fixed;inset:0;background:var(--ink);
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:0 var(--gutter);gap:22px;z-index:70}
  .nav-open .nav-links a{font-family:var(--serif);font-size:clamp(2rem,9vw,3.2rem);
    letter-spacing:-.02em;border:0;color:var(--bone)}
  .nav-open .burger{position:fixed;right:var(--gutter);top:24px;z-index:80;color:var(--bone)}
  .nav-open .lang{z-index:80}
  .nav-open .lang-btn{color:var(--sand)}
  .nav-open .nav-end .inq{display:inline-flex;position:fixed;z-index:80;
    left:var(--gutter);bottom:clamp(38px,8vh,78px);color:var(--bone);border-color:var(--line)}
  .nav-open .burger span:first-child{transform:translateY(6px) rotate(45deg)}
  .nav-open .burger span:last-child{transform:translateY(-7px) rotate(-45deg)}

  .hero{align-items:end}
  .hero-img{width:100%;height:76%;top:0;opacity:.92}
  .hero-img::after{background:linear-gradient(180deg,rgba(20,16,12,.55) 0%,rgba(20,16,12,0) 34%,rgba(20,16,12,.92) 82%,var(--ink) 100%)}
  .hero-bloom{top:16%;right:6%;width:78vw}
  .hero-inner{padding-bottom:clamp(56px,9vh,90px)}

  .sel{display:flex;flex-direction:column;gap:clamp(46px,8vh,72px)}
  .sel-b,.sel-c,.sel-d{margin:0;padding:0}
  .cat-row{grid-template-columns:96px 1fr;row-gap:10px}
  .cat-price{grid-column:2;text-align:left}
  .dusk-stage{grid-template-columns:1fr;align-content:center;gap:clamp(18px,3vh,30px);
    padding-block:clamp(60px,9vh,90px)}
  .dusk-frame{grid-column:1;width:min(70vw,320px);justify-self:center}
  .dusk-t{grid-column:1;justify-self:start;text-align:left;max-width:18ch}
  .dusk-l{grid-column:1;max-width:40ch}
  .step{grid-template-columns:44px 1fr}
  .cta{font-size:.74rem;letter-spacing:.1em;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal img{clip-path:none}
  .dusk-track{height:auto}
  .dusk-stage{position:static;height:auto;padding-block:var(--rhythm)}
}