:root{
  --paper:#F6F7F9; --paper-2:#ECEEF3; --ink:#17204F; --muted:#59617F; --line:#D6DAE6;
  --gold:#9A711C; --accent:#2F3FB0;
  --serif:"Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#0F1430; --paper-2:#161C3F; --ink:#E8EAF3; --muted:#A3AACA; --line:#2A3160; --gold:#D9B45A; --accent:#9AA6FF; color-scheme:dark; }
}
:root[data-theme="dark"]{ --paper:#0F1430; --paper-2:#161C3F; --ink:#E8EAF3; --muted:#A3AACA; --line:#2A3160; --gold:#D9B45A; --accent:#9AA6FF; color-scheme:dark; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4.5rem)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.55; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--paper)}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--paper); border-bottom:1px solid var(--line)}
.top-in{max-width:1320px; margin:0 auto; padding:.9rem clamp(1rem,4vw,2.5rem); display:flex; align-items:baseline; justify-content:space-between; gap:.6rem 1.5rem; flex-wrap:wrap}
.brand{font-family:var(--serif); font-size:1.15rem; text-decoration:none}
.nav{display:flex; gap:clamp(.9rem,2.5vw,2rem); flex-wrap:wrap}
.nav a{text-decoration:none; font-size:.98rem; color:var(--muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}

.wrap{max-width:1320px; margin:0 auto; padding-inline:clamp(1rem,4vw,2.5rem)}
main{min-height:70vh}
#view{animation:fade .35s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0}
h2{font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.05}
h3{font-size:clamp(1.35rem,2.2vw,1.8rem); line-height:1.15}
.lede{color:var(--muted); max-width:58ch; margin:.6rem 0 0}
.block{padding-block:clamp(3.5rem,8vw,6.5rem)}
.block-head{display:flex; justify-content:space-between; align-items:end; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem)}
.more-link{text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; font-weight:500}

/* Accueil */
.intro{padding-top:clamp(2.5rem,7vw,5.5rem); padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.intro h1{font-size:clamp(3.2rem,11.5vw,10rem); line-height:.92; letter-spacing:-.02em}
.intro-row{display:flex; justify-content:space-between; align-items:end; gap:1.5rem 3rem; flex-wrap:wrap; margin-top:1.4rem}
.intro p{margin:0; max-width:40ch; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.45}
.intro .where{color:var(--muted); font-size:1rem}
.hero-fig{margin:0}
.hero-fig img{width:100%; max-height:80vh; object-fit:cover}
.hero-fig figcaption{max-width:1320px; margin:.7rem auto 0; padding-inline:clamp(1rem,4vw,2.5rem); font-size:.93rem; color:var(--muted)}
.hero-fig figcaption b{color:var(--ink); font-weight:600}

.choix{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2.5vw,2rem); row-gap:clamp(3rem,7vw,6rem); align-items:start}
.choix a{display:block; text-decoration:none}
.choix .piece{margin-bottom:0}
.choix .piece .cap b{font-family:var(--serif); font-weight:400; font-size:1.2rem; display:block}
.choix .piece .cap span{color:var(--muted)}
.choix img{width:100%; background:var(--paper-2)}
.choix .cap{margin-top:.7rem; font-size:.95rem; line-height:1.4}
.choix .cap b{font-family:var(--serif); font-weight:400; font-size:1.2rem; display:block}
.choix .cap span{color:var(--muted)}
.choix a:hover .cap b{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
@media (max-width:760px){ .choix > *{grid-column:1 / -1 !important; margin-top:0 !important} }

.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,2.5vw,2rem) clamp(1rem,2.5vw,2rem)}
.card{text-decoration:none; display:block}
.card .frame{aspect-ratio:4/5; overflow:hidden; background:var(--paper-2)}
.card img{width:100%; height:100%; object-fit:cover; transition:transform .7s ease}
.card:hover img{transform:scale(1.03)}
.card h3{margin-top:.8rem; font-size:1.4rem}
.card p{margin:.15rem 0 0; color:var(--muted); font-size:.95rem}
.card .y{color:var(--gold)}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .cards{grid-template-columns:1fr} }

.band{background:var(--paper-2)}
.band-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center}
.band-grid img{width:100%; aspect-ratio:4/3; object-fit:cover}
@media (max-width:860px){ .band-grid{grid-template-columns:1fr} }
.btn{display:inline-block; margin-top:1.6rem; padding:.8rem 1.3rem; border:1px solid var(--ink); text-decoration:none; font-weight:500}
.btn:hover{background:var(--ink); color:var(--paper)}
button.btn{font:inherit; background:none; color:inherit; cursor:pointer}
.btn-1{background:var(--ink); color:var(--paper)}
.btn-1:hover{background:var(--accent); border-color:var(--accent)}
.btn-2{border-color:var(--line)}
.contact h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.contact-mail{font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.9rem); margin:.5rem 0 0; overflow-wrap:anywhere}
.contact-btns{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem}
.contact-btns .btn{margin-top:0}
.contact-help{color:var(--muted); font-size:.9rem; margin:.9rem 0 0; max-width:52ch}
.mail-tools{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.7rem !important; font-size:.92rem}
.linkbtn{all:unset; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Page série */
.s-head{padding-top:clamp(2rem,5vw,4rem); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1.5rem clamp(2rem,5vw,4rem); align-items:end}
.back{display:inline-block; color:var(--muted); text-decoration:none; font-size:.95rem; margin-bottom:1.4rem}
.back:hover{color:var(--ink)}
.s-head h1{font-size:clamp(2.6rem,7vw,5.5rem); line-height:.98; letter-spacing:-.015em}
.s-head .y{color:var(--gold); margin-top:.6rem}
.s-head .intro-txt{color:var(--muted); margin:0; max-width:46ch}
blockquote.voix{margin:0 0 1.2rem; font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.4; max-width:34ch}
blockquote.voix footer{font-family:var(--sans); font-size:.9rem; color:var(--muted); margin-top:.5rem; padding:0; border:0}
@media (max-width:860px){ .s-head{grid-template-columns:1fr} }

.maitresse{margin:clamp(2.5rem,5vw,4rem) 0 0}
.maitresse button{all:unset; cursor:zoom-in; display:block; width:100%; background:var(--paper-2)}
.maitresse img{width:100%; max-height:86vh; object-fit:contain; margin-inline:auto}
.cap{margin-top:.6rem; font-size:.93rem; line-height:1.4}
.cap b{font-weight:600}
.cap span{display:block; color:var(--muted)}
.maitresse .cap{display:flex; gap:.4rem 1.2rem; flex-wrap:wrap; align-items:baseline}
.maitresse .cap span{display:inline}

.sub{display:flex; align-items:baseline; gap:1rem; margin:clamp(3rem,6vw,5rem) 0 1.4rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.sub h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.sub p{margin:0; color:var(--muted); font-size:.95rem}

.situ{display:grid; grid-template-columns:repeat(var(--n,2),minmax(0,1fr)); gap:clamp(1rem,2.5vw,1.8rem); align-items:start}
.situ.one{grid-template-columns:minmax(0,1fr)}
@media (max-width:700px){ .situ{grid-template-columns:1fr} }

.grid{columns:var(--c,2); column-gap:clamp(1rem,2.4vw,1.8rem)}
@media (max-width:860px){ .grid{columns:2} }
@media (max-width:480px){ .grid{columns:1} }
.piece{all:unset; cursor:zoom-in; display:block; break-inside:avoid; margin-bottom:clamp(1.4rem,2.6vw,2rem); width:100%}
.piece:focus-visible,.maitresse button:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.piece img{width:100%; background:var(--paper-2)}

.pager{display:flex; justify-content:space-between; gap:1rem; margin-top:clamp(3rem,6vw,5rem); padding-top:1.4rem; border-top:1px solid var(--line)}
.pager a{text-decoration:none; max-width:45%}
.pager small{display:block; color:var(--muted); font-size:.85rem}
.pager span{font-family:var(--serif); font-size:1.3rem}
.pager a:last-child{text-align:right; margin-left:auto}
.pager a:hover span{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}

/* Commandes */
.offre{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line); align-items:start}
.offre .imgs{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1rem; align-items:start}
.offre .txt p{color:var(--muted); max-width:44ch}
.offre .txt h2{font-size:clamp(1.7rem,3vw,2.4rem)}
@media (max-width:860px){ .offre{grid-template-columns:1fr} }

/* Expositions */
.year{display:grid; grid-template-columns:6rem minmax(0,1fr); gap:1rem 2rem; padding:1.4rem 0; border-top:1px solid var(--line)}
.year > .y{font-family:var(--serif); font-size:1.4rem; color:var(--gold)}
.year ul{list-style:none; padding:0; margin:0; display:grid; gap:1rem}
.year li{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:.2rem 2rem}
.year .t{font-family:var(--serif); font-size:1.15rem; line-height:1.3}
.year .t small{display:block; font-family:var(--sans); font-size:.93rem; color:var(--muted); margin-top:.15rem}
.year .l{color:var(--muted); font-size:.98rem}
details.older summary{cursor:pointer; padding:1.2rem 0; border-top:1px solid var(--line); font-weight:500; list-style:none}
details.older summary::-webkit-details-marker{display:none}
details.older summary::after{content:" +"; color:var(--gold)}
details.older[open] summary::after{content:" −"}
@media (max-width:720px){ .year{grid-template-columns:1fr; gap:.6rem} .year li{grid-template-columns:1fr} }

/* Atelier */
.atelier-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; padding-top:clamp(2rem,5vw,4rem)}
.atelier-grid figure{margin:0}
.atelier-grid figure img{width:100%}
.statement{font-family:var(--serif); font-size:clamp(1.3rem,2.3vw,1.75rem); line-height:1.38; max-width:32ch; margin:1.4rem 0 0}
.atelier-grid .txt p.more{color:var(--muted); max-width:56ch}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem 2rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line)}
.facts h4{margin:0 0 .3rem; font-size:1rem; font-weight:600}
.facts p{margin:0; color:var(--muted)}
@media (max-width:860px){ .atelier-grid{grid-template-columns:1fr} .facts{grid-template-columns:1fr} }

.insta{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem}
.insta a{display:block; aspect-ratio:1; overflow:hidden; background:var(--paper-2)}
.insta img{width:100%; height:100%; object-fit:cover}
@media (max-width:720px){ .insta{grid-template-columns:repeat(3,minmax(0,1fr))} }
.note{font-size:.85rem; color:var(--muted); margin-top:.8rem}
.ig{border:1px solid var(--line); background:var(--paper)}
.ig-head{display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; border-bottom:1px solid var(--line)}
.ig-head img{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 25%}
.ig-head b{display:block; font-weight:600}
.ig-head span{color:var(--muted); font-size:.9rem}
.ig-follow{margin-left:auto; padding:.45rem 1rem; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:500; font-size:.92rem; white-space:nowrap}
.ig .insta{margin-top:0; gap:3px}
.ig-tile{position:relative}
.ig-ico{position:absolute; top:.5rem; right:.5rem; width:20px; height:20px; color:#fff; filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.ig-over{position:absolute; inset:0; display:flex; align-items:flex-end; padding:.7rem; background:rgba(15,20,48,.62); color:#fff; font-size:.85rem; line-height:1.35; opacity:0; transition:opacity .25s}
.ig-tile:hover .ig-over,.ig-tile:focus-visible .ig-over{opacity:1}
.ig-foot{display:flex; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; padding:.8rem 1.1rem; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted)}
.ig-foot a{color:var(--ink)}

footer.site{border-top:1px solid var(--line); padding:clamp(3rem,6vw,5rem) 0 3rem; margin-top:clamp(3rem,6vw,5rem)}
.foot{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:2rem}
.foot .mail{font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.5rem); text-decoration:none; overflow-wrap:anywhere}
.foot .mail:hover{text-decoration:underline; text-underline-offset:6px}
.foot p{margin:0; color:var(--muted)}
.foot h4{margin:0 0 .3rem; font-size:1rem; font-weight:600}
@media (max-width:860px){ .foot{grid-template-columns:1fr} }

dialog{border:0; padding:0; width:min(96vw,1240px); max-width:none; max-height:94vh; background:var(--paper); color:var(--ink)}
dialog::backdrop{background:rgba(8,11,32,.9)}
.lb{display:grid; grid-template-columns:minmax(0,1fr) 19rem; max-height:94vh}
.lb-img{display:grid; place-items:center; background:#0d1128; min-height:50vh}
.lb-img img{max-height:94vh; width:auto; max-width:100%; object-fit:contain}
.lb-cap{padding:1.6rem; display:flex; flex-direction:column; gap:.55rem; overflow:auto}
.lb-cap h3{font-size:1.55rem}
.lb-cap p{margin:0; color:var(--muted)}
.lb-cap .serie-name{color:var(--gold); font-size:.95rem}
.lb-nav{display:flex; gap:.5rem; margin-top:auto; padding-top:1rem; flex-wrap:wrap}
.lb-nav button{all:unset; cursor:pointer; padding:.55rem .9rem; border:1px solid var(--line)}
.lb-nav button:hover{border-color:var(--ink)}
.lb-nav button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:760px){ .lb{grid-template-columns:1fr} .lb-img img{max-height:62vh} }