/* ============================================================
   GALERIE MAX BIAL — style
   Palette : blanc de galerie, encre marine, indigo d'estampe,
   rouge de cachet (réservé au sceau et aux accents).
   ============================================================ */

:root{
  --paper:#FAF9F6;
  --paper-deep:#F2EFE9;
  --ink:#1C2B33;
  --ink-soft:#5C6B72;
  --indigo:#1733B8;
  --seal:#0034D4;
  --line:#DFD9CE;
  --display:'Italiana',serif;
  --body:'EB Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.1rem;
  line-height:1.65;
}
img{display:block;max-width:100%}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}

/* ---------- sceau MB (signature de la maison) ---------- */
.seal{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:44px;height:44px;border:2px solid var(--seal);color:var(--seal);
  font-family:var(--display);font-size:1.05rem;line-height:1.02;
  letter-spacing:.05em;user-select:none;flex:none;
}
.seal span{display:block}

/* ---------- en-tête ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(250,249,246,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-bar{
  max-width:1440px;margin:0 auto;padding:.55rem 1.2rem;
  display:flex;align-items:center;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-name{font-family:var(--display);font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase}
nav.main{margin-left:auto;display:flex;align-items:center;gap:1.05rem;flex-wrap:wrap}
nav.main a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--seal);text-decoration:none}
.lang-toggle{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  background:none;border:1px solid var(--line);color:var(--ink);
  padding:.3rem .65rem;cursor:pointer;
}
.lang-toggle:hover{border-color:var(--seal);color:var(--seal)}

/* ---------- héros ---------- */
.hero{position:relative;min-height:23vh;display:flex;align-items:flex-end;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,43,51,.10) 25%,rgba(28,43,51,.84) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:1.1rem 1.2rem 1.3rem;color:#fff}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,7vw,5.4rem);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.04;
}
.hero .tagline{
  margin-top:.9rem;font-size:clamp(1.1rem,2.2vw,1.5rem);
  font-style:italic;color:#EDE8DE;
}
.hero .hero-note{
  margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:#CFC8BA;
}

/* ---------- sections communes ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 1.2rem}
section{padding:.6rem 0 4.2rem}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--seal);margin-bottom:.45rem;
}
h2.section-title{
  font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,2.8vw,2.05rem);
  letter-spacing:.06em;margin-bottom:.5rem;
}
.lede{max-width:62ch;font-size:1.2rem;color:var(--ink)}
.lede + .lede{margin-top:1rem}

/* ---------- tuiles collections ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.6rem}
.pillar{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;background:var(--ink)}
.pillar img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .6s ease,filter .4s ease;filter:brightness(1.08) saturate(1.08)}
.pillar:hover img{transform:scale(1.03);filter:brightness(1.12) saturate(1.1)}
.pillar:hover{text-decoration:none}
.pillar .label{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;
  background:linear-gradient(180deg,transparent,rgba(28,43,51,.72));color:#fff;
}
.pillar .label .name{font-family:var(--display);font-size:1.2rem;letter-spacing:.09em;text-transform:uppercase}
.pillar .label .tag{font-style:italic;font-size:.85rem;color:#DDD6C9}
.pillar .count{
  position:absolute;top:.9rem;right:.9rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;color:#fff;background:rgba(28,43,51,.55);padding:.25rem .55rem;
}

/* ---------- grille d'œuvres ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.6rem;margin-top:2.2rem}
.card{cursor:pointer;background:none;border:none;text-align:left;font:inherit;color:inherit;padding:0}
.card .frame{
  background:#fff;border:1px solid var(--line);padding:.7rem;
  transition:box-shadow .3s ease;
}
.card:hover .frame{box-shadow:0 10px 28px rgba(28,43,51,.14)}
.card .frame img{width:100%;aspect-ratio:4/3.4;object-fit:contain;background:#fff}
.card .meta{padding:.85rem .2rem 0}
.card .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--seal)}
.card .artist{font-family:var(--display);font-size:1.25rem;letter-spacing:.04em;margin-top:.15rem}
.card .title{font-style:italic;color:var(--ink-soft)}
.card .price{
  margin-top:.4rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--indigo);
}

/* ---------- bande confiance ---------- */
.trust{background:var(--ink);color:#EDE8DE;padding:3.4rem 0}
.trust .eyebrow{color:#8FA3FF}
.trust h2.section-title{color:#fff}
.trust-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;margin-top:1.8rem}
.trust-cols h3{font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:.08em;margin-bottom:.45rem;color:#fff}
.trust-cols p{font-size:1rem;color:#C9C2B4}

/* ---------- à propos / contact ---------- */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:start;margin-top:1.4rem}
.about-grid figure{background:#fff;border:1px solid var(--line);padding:.7rem}
.about-grid figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-soft);padding-top:.55rem}

.contact-box{
  margin-top:2rem;border:1px solid var(--line);background:#fff;
  padding:2rem;display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between;
}
.contact-box .mail{font-family:var(--display);font-size:clamp(1.2rem,3vw,1.9rem);letter-spacing:.05em}
.btn{
  display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink);color:var(--ink);padding:.75rem 1.4rem;background:none;cursor:pointer;
}
.btn:hover{background:var(--ink);color:#fff;text-decoration:none}
.btn.seal-btn{border-color:var(--seal);color:var(--seal)}
.btn.seal-btn:hover{background:var(--seal);color:#fff}

/* ---------- pied de page ---------- */
footer.site{border-top:1px solid var(--line);padding:2.4rem 0;margin-top:2rem}
.foot{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- page collection ---------- */
.page-head{padding:3.4rem 0 1rem;border-bottom:1px solid var(--line)}
.page-head .crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:.1em;text-transform:uppercase}
.page-head .tag{font-style:italic;color:var(--ink-soft);margin-top:.4rem;font-size:1.15rem}

/* ---------- fiche (modale) ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(28,43,51,.55);
  align-items:center;justify-content:center;padding:1.2rem;
}
.modal.open{display:flex}
.fiche{
  background:var(--paper);max-width:1080px;width:100%;max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:1.15fr .85fr;
}
.fiche .visual{background:#fff;border-right:1px solid var(--line);padding:1.2rem;display:flex;flex-direction:column;gap:.9rem}
.fiche .visual .main{width:100%;aspect-ratio:4/3.2;object-fit:contain;background:#fff}
.fiche .thumbs{display:flex;gap:.5rem;flex-wrap:wrap}
.fiche .thumbs button{border:1px solid var(--line);background:#fff;padding:2px;cursor:pointer}
.fiche .thumbs button.active{border-color:var(--seal)}
.fiche .thumbs img{width:64px;height:64px;object-fit:cover}
.fiche .info{padding:1.6rem 1.6rem 2rem;position:relative}
.fiche .close{
  position:absolute;top:.8rem;right:.8rem;background:none;border:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:.35rem .6rem;cursor:pointer;color:var(--ink)
}
.fiche .close:hover{border-color:var(--seal);color:var(--seal)}
.fiche .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--seal)}
.fiche h3{font-family:var(--display);font-weight:400;font-size:1.9rem;letter-spacing:.04em;margin:.35rem 0 .1rem}
.fiche .life{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-soft)}
.fiche .work-title{font-style:italic;font-size:1.25rem;margin-top:.9rem}
.fiche .specs{margin-top:.8rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-soft);line-height:1.8}
.fiche .desc{margin-top:1rem;font-size:1.05rem}
.fiche .por{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;
}
.fiche .por .label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .pillars{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .fiche{grid-template-columns:1fr;max-height:94vh}
  .fiche .visual{border-right:none;border-bottom:1px solid var(--line)}
  nav.main{gap:.9rem}
  .hero{min-height:46vh}
}

/* ---------- logo & accessibilité ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brand img{height:34px;width:auto;display:block}
.hero-logo{width:min(300px,55vw);height:auto;margin-bottom:.5rem}

/* ---------- section en construction ---------- */
.pillar-construction{background:var(--ink);display:flex;align-items:flex-end}
.pillar-construction .label{background:none}
.pillar-construction::before{
  content:"陈昭";position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  font-family:var(--body);font-size:5rem;color:rgba(250,249,246,.14);letter-spacing:.2em;
}
.construction-box{
  grid-column:1/-1;border:1px dashed var(--line);background:#fff;
  padding:3rem 2rem;text-align:center;max-width:640px;margin:2rem auto;
}

/* ---------- sélecteur de langue à 3 choix ---------- */
.lang-group{display:inline-flex}
.lang-group .lang-toggle{border-right-width:0}
.lang-group .lang-toggle:last-child{border-right-width:1px}
.lang-toggle.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- adresse email : trait d'union lisible ---------- */
.contact-box .mail{font-family:var(--mono);font-size:clamp(.95rem,2.2vw,1.25rem);letter-spacing:.04em}

/* ---------- encart biographique Chen Zhuo ---------- */
.artist-bio{grid-column:1/-1;display:grid;grid-template-columns:280px 1fr;gap:2.4rem;align-items:start;
  background:#fff;border:1px solid var(--line);padding:2rem;margin-bottom:1rem}
.artist-bio figure img{width:100%;display:block}
.artist-bio figcaption,.bio-strip figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-soft);padding-top:.5rem}
.artist-bio .lede{font-size:1.05rem}
.artist-bio .lede + .lede{margin-top:.8rem}
.chen-meet{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  font-style:italic;color:var(--indigo)}
.bio-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.6rem}
.bio-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fiche .provenance{margin-top:.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--indigo)}
@media (max-width:860px){.artist-bio{grid-template-columns:1fr}.bio-strip{grid-template-columns:1fr}}

/* ---------- bandeau À la une ---------- */
.une{
  display:flex;justify-content:center;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.42rem 1.2rem;background:var(--paper-deep);
  border-bottom:1px solid var(--line);text-decoration:none;line-height:1.35;
}
.une:hover{text-decoration:none;background:#ECE7DD}
.une-label{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--seal)}
.une-text{font-family:var(--body);font-size:1.22rem;color:var(--ink)}
.une-cta{font-family:var(--mono);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.une:hover .une-cta{text-decoration:underline}