/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --bg:            #14130f;
  --bg-alt:        #191712;
  --card:          #1e1c16;
  --card-hover:    #24211a;
  --line:          rgba(184,147,90,0.22);
  --line-strong:   rgba(184,147,90,0.45);
  --text:          #efe9db;
  --text-dim:      #a89d87;
  --text-faint:    #6f6656;
  --brass:         #c19a5b;
  --brass-bright:  #dab672;
  --overlay:       rgba(10,9,6,0.94);

  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Inter', -apple-system, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  --container:     1280px;
  --gutter:        clamp(20px, 4vw, 64px);
  --nav-h:         76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
img{ max-width:100%; display:block; }

::selection{ background:var(--brass); color:var(--bg); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:1.5px solid var(--brass-bright);
  outline-offset:3px;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  z-index:100;
  background:linear-gradient(to bottom, rgba(20,19,15,0.96), rgba(20,19,15,0.85) 70%, transparent);
  backdrop-filter:blur(6px);
}
.header-inner{
  max-width:var(--container); margin:0 auto; height:100%;
  padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  letter-spacing:0.01em;
  color:var(--text);
}
.main-nav{ display:flex; gap:2.5rem; }
.main-nav a{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  position:relative;
  padding-bottom:4px;
  transition:color 0.25s ease;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brass-bright);
  transition:right 0.3s ease;
}
.main-nav a:hover{ color:var(--text); }
.main-nav a:hover::after{ right:0; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:26px; padding:4px;
}
.nav-toggle span{ display:block; height:1px; background:var(--text-dim); width:100%; transition:all 0.25s ease; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  padding:calc(var(--nav-h) + 40px) var(--gutter) 0;
  background:
    radial-gradient(ellipse 900px 500px at 80% 15%, rgba(184,147,90,0.07), transparent 60%),
    var(--bg);
}
.hero-inner{ max-width:var(--container); margin:0 auto; width:100%; padding-bottom:120px; }
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 1.75rem;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3.2rem, 10vw, 8.5rem);
  line-height:0.94;
  letter-spacing:-0.01em;
  margin:0 0 2rem;
  color:var(--text);
}
.hero-sub{
  font-size:clamp(0.95rem, 1.4vw, 1.15rem);
  color:var(--text-dim);
  max-width:34em;
  font-weight:300;
  margin:0 0 2.75rem;
}
.br-desktop{ display:inline; }
.hero-cta{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:0.5em;
  transition:border-color 0.25s ease, gap 0.25s ease;
}
.hero-cta:hover{ border-color:var(--brass-bright); gap:0.9em; }
.hero-cta-arrow{ color:var(--brass); transition:transform 0.25s ease; }
.hero-cta:hover .hero-cta-arrow{ transform:translateY(3px); }

.hero-strip{
  position:absolute; left:0; right:0; bottom:0;
  height:96px;
  overflow:hidden;
  border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.hero-strip-track{
  display:flex; gap:14px; height:100%; padding:14px 0;
  animation:scrollStrip 60s linear infinite;
  width:max-content;
}
@media (prefers-reduced-motion: reduce){ .hero-strip-track{ animation:none; } }
.hero-strip-item{
  width:130px; height:100%; flex:none; border-radius:2px;
  opacity:0.55;
}
@keyframes scrollStrip{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================================
   SECTION HEAD (shared)
   ========================================================================== */
.section-head{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; align-items:baseline; gap:1.25rem;
  padding-top:110px; margin-bottom:2.75rem;
}
.section-num{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--brass);
  letter-spacing:0.1em;
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:0.3em 0.75em;
}
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.9rem, 4vw, 2.75rem);
  margin:0;
  flex:1;
}
.section-count{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--text-faint);
  letter-spacing:0.05em;
}

/* ==========================================================================
   GALERIE
   ========================================================================== */
.gallery-section{ padding-bottom:60px; }

.filters{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; gap:0.6rem; flex-wrap:wrap;
  margin-bottom:2.5rem;
}
/* 2e rangée (filtres par style) : la marge se fusionne avec le margin-bottom
   de .filters (2.5rem) — -1.6rem ramène l'écart entre les deux rangées à 0.9rem. */
.filters-style{ margin-top:-1.6rem; }
.filter-pill{
  font-family:var(--font-mono);
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.55em 1.2em;
  transition:all 0.25s ease;
}
.filter-pill:hover{ border-color:var(--line-strong); color:var(--text); }
.filter-pill.is-active{
  background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:500;
}

.artwork-grid{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:2.75rem 1.75rem;
}

.artwork-card{
  cursor:pointer;
  opacity:0; transform:translateY(18px);
  animation:cardIn 0.6s ease forwards;
}
@media (prefers-reduced-motion: reduce){ .artwork-card{ opacity:1; transform:none; animation:none; } }
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }

.artwork-figure{
  aspect-ratio:4/5;
  border-radius:2px;
  overflow:hidden;
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  transition:border-color 0.3s ease;
}
.artwork-card:hover .artwork-figure{ border-color:var(--line-strong); }
.artwork-figure img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:opacity 0.4s ease;
}

.artwork-placeholder{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  transition:transform 0.5s ease;
}
.artwork-card:hover .artwork-placeholder{ transform:scale(1.04); }
.artwork-placeholder-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:rgba(239,233,219,0.55);
  padding:0.5em 0.9em;
  border:1px solid rgba(239,233,219,0.25);
  border-radius:999px;
  background:rgba(20,19,15,0.35);
}

.artwork-status-tag{
  position:absolute; top:12px; right:12px;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.35em 0.7em; border-radius:999px;
  background:rgba(20,19,15,0.75); backdrop-filter:blur(4px);
  border:1px solid rgba(239,233,219,0.2);
  color:var(--text-dim);
}
.artwork-status-tag.is-sold{ color:var(--text-faint); }
.artwork-status-tag.is-available{ color:var(--brass-bright); border-color:rgba(193,154,91,0.4); }
.artwork-status-tag.is-pending{ color:#c98a4b; border-color:rgba(201,138,75,0.4); font-style:italic; }
.artwork-status-tag.is-private{ color:var(--text-faint); font-style:italic; }

.artwork-label{
  margin-top:0.9rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:0.75rem;
}
.artwork-label-main{ min-width:0; }
.artwork-catalog{
  display:block;
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.1em;
  color:var(--text-faint); margin-bottom:0.3em;
}
.artwork-title{
  font-family:var(--font-display); font-style:italic; font-size:1.02rem;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.artwork-year{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); flex:none;
}

.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:4rem 1rem;
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:0.85rem;
}

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about-section{ padding-bottom:60px; }
.about-inner{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter);
  display:grid; grid-template-columns:340px 1fr; gap:4.5rem;
}
.about-portrait-img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:2px;
}
.portrait-placeholder{
  aspect-ratio:4/5;
  border:1px solid var(--line);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    repeating-linear-gradient(135deg, var(--card), var(--card) 12px, var(--bg-alt) 12px, var(--bg-alt) 24px);
}
.portrait-placeholder span{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em;
  color:var(--text-faint); background:rgba(20,19,15,0.7); padding:0.6em 1em; border-radius:4px;
}
.about-lead{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:1.4rem; color:var(--text); line-height:1.45;
  margin:0 0 1.5rem;
}
.about-text p{ color:var(--text-dim); font-weight:300; max-width:56em; }
.about-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;
  margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line);
}
.about-meta-block h3{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1rem;
}
.about-meta-block li{
  display:flex; gap:1rem; font-size:0.88rem; color:var(--text-dim);
  padding:0.5em 0; border-top:1px solid var(--line);
}
.about-meta-block li:first-child{ border-top:none; }
.about-meta-block li span{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--text-faint); flex:none; width:3em;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-section{ padding-bottom:110px; }
.contact-inner{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1.3fr; gap:4.5rem;
}
.contact-lead{
  font-family:var(--font-display); font-style:italic; font-size:1.35rem;
  color:var(--text); line-height:1.5; max-width:22em; margin:0 0 2.5rem;
}
.contact-list div{ padding:1rem 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; }
.contact-list div:first-child{ border-top:none; }
.contact-list dt{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); }
.contact-list dd{ margin:0; color:var(--text-dim); }
.contact-list a:hover{ color:var(--brass-bright); }

.contact-form{ display:flex; flex-direction:column; gap:1.4rem; }
.form-row{ display:flex; flex-direction:column; gap:0.5rem; }
.form-row label{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint);
}
.form-row input, .form-row textarea{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--text);
  font-family:var(--font-body); font-size:0.95rem;
  padding:0.75em 0.9em;
  resize:vertical;
  transition:border-color 0.25s ease;
}
.form-row input:focus, .form-row textarea:focus{ border-color:var(--brass); }
.form-submit{
  align-self:flex-start;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  background:var(--brass); color:var(--bg); font-weight:500;
  padding:0.85em 1.8em; border-radius:2px;
  transition:background 0.25s ease;
}
.form-submit:hover{ background:var(--brass-bright); }
.form-note{ font-size:0.78rem; color:var(--text-faint); margin:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--line);
  padding:2rem var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  max-width:var(--container); margin:0 auto;
  font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint);
}
.footer-top:hover{ color:var(--brass-bright); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox-backdrop{ position:absolute; inset:0; background:var(--overlay); backdrop-filter:blur(4px); }
.lightbox-content{
  position:relative; z-index:1;
  width:min(1100px, 92vw);
  max-height:90vh;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  background:var(--bg-alt);
  border:1px solid var(--line-strong);
  border-radius:3px;
  overflow:hidden;
}
.lightbox-image-wrap{ background:var(--card); display:flex; align-items:center; justify-content:center; min-height:340px; }
.lightbox-image{
  width:100%; height:100%; min-height:340px;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-image img{ width:100%; height:100%; object-fit:contain; }
.lightbox-placard{
  padding:2.5rem 2.25rem;
  display:flex; flex-direction:column; justify-content:center; gap:0.9rem;
  border-left:1px solid var(--line);
}
.placard-catalog{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--brass); margin:0; }
.placard-title{ font-family:var(--font-display); font-style:italic; font-size:1.7rem; margin:0; color:var(--text); }
.placard-meta{ font-family:var(--font-mono); font-size:0.8rem; color:var(--text-dim); line-height:1.9; margin:0; white-space:pre-line; }
.placard-price{ font-family:var(--font-mono); font-size:0.9rem; color:var(--brass-bright); margin:0.5rem 0 0; }

.lightbox-close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(20,19,15,0.6); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:background 0.2s ease;
}
.lightbox-close:hover{ background:rgba(20,19,15,0.9); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(20,19,15,0.55); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; transition:background 0.2s ease;
}
.lightbox-nav:hover{ background:rgba(20,19,15,0.9); }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .about-inner{ grid-template-columns:1fr; }
  .portrait-placeholder, .about-portrait-img{ max-width:280px; }
  .contact-inner{ grid-template-columns:1fr; }
  .lightbox-content{ grid-template-columns:1fr; overflow-y:auto; }
  .lightbox-image-wrap{ min-height:260px; }
}
@media (max-width:720px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .br-desktop{ display:none; }
  .about-meta{ grid-template-columns:1fr; }
  .site-footer{ flex-direction:column; gap:0.75rem; align-items:flex-start; }
}
@media (max-width:720px){
  .site-header.is-menu-open .main-nav{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg-alt);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .site-header.is-menu-open .main-nav a{ padding:1.1em var(--gutter); border-bottom:1px solid var(--line); }
}