/* =========================================================
   NATU — site public, version 2 (design « nuit d'atelier »)
   Fond sombre assumé, couleurs tirées des toiles, or des feuilles d'or.
   ========================================================= */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}
:root{
  --night:#0C0D14; --night2:#14151F; --night3:#1C1E2B;
  --chalk:#F2EEE6; --soft:#C9C6D0; --dim:#8E8FA3;
  --gold:#D8B25A; --pink:#E8619A; --blue:#2F6BFF; --orange:#F2622E;
  --line:rgba(242,238,230,.14);
  --f-display:"Cormorant Garamond","Didot","Bodoni MT",Georgia,serif;
  --f-serif:"Cormorant Garamond",Georgia,serif;
  --f-body:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
main,.footer{overflow-x:clip}
html{overflow-x:hidden}
body{margin:0;background:var(--night);color:var(--chalk);font-family:var(--f-body);font-size:1.02rem;font-weight:300;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--night)}
h1,h2,h3{margin:0;font-family:var(--f-display);line-height:1;text-wrap:balance}
.g{padding-left:max(clamp(18px,4vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(18px,4vw,72px),env(safe-area-inset-right,0px))}
.wrap{max-width:none;margin:0 auto;width:100%}
.kicker{display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:500}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0}
.gold{color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------- intro (accueil, 1re visite) ---------- */
.intro{position:fixed;inset:0;z-index:200;background:var(--night);display:grid;place-items:center;pointer-events:none;animation:introOut .9s var(--ease-io) 1.55s forwards}
.intro img{width:56px;margin:0 auto 18px;filter:invert(1);animation:letter .7s var(--ease) both}
.intro .word{font-family:var(--f-display);font-weight:500;font-size:clamp(3rem,12vw,8rem);letter-spacing:-.02em;line-height:1}
.intro .word span{display:inline-block;animation:letter .7s var(--ease) both}
.intro .word span:nth-child(2){animation-delay:.08s;color:var(--pink)}
.intro .word span:nth-child(3){animation-delay:.16s;color:var(--gold)}
.intro .word span:nth-child(4){animation-delay:.24s;color:var(--blue)}
.intro.skip{display:none}
@keyframes letter{from{transform:translateY(60%) rotate(8deg);opacity:0}}
@keyframes introOut{to{clip-path:inset(0 0 100% 0)}}

/* ---------- transition entre pages ---------- */
.wipe{position:fixed;inset:0;z-index:190;background:var(--night2);pointer-events:none;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-io)}
.wipe.on{transform:scaleY(1)}
.wipe.leave{transform-origin:top}

/* ---------- en-tête ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:120;background:var(--night)}
.site-header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:100;mix-blend-mode:difference;transition:transform .45s var(--ease)}
.site-header.hide{transform:translateY(-110%)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand img{width:52px;height:auto;filter:invert(1);transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand span{font-family:var(--f-display);font-weight:500;font-size:2rem;letter-spacing:-.02em}
.menu{display:flex;gap:clamp(16px,2.6vw,38px);list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;color:#fff;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;position:relative;padding-block:4px}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:#fff;transition:right .35s var(--ease)}
.menu a:hover::after,.menu a[aria-current="page"]::after{right:0}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px;font:inherit;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:820px){.menu{display:none}.burger{display:block}}

/* menu plein écran (mobile) */
.overlay{position:fixed;inset:0;z-index:110;background:var(--night2);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 80px) max(24px,env(safe-area-inset-right,0px)) 40px max(24px,env(safe-area-inset-left,0px));clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .7s var(--ease-io);visibility:hidden}
.overlay.open{clip-path:circle(150% at calc(100% - 40px) 40px);visibility:visible}
.overlay a{font-family:var(--f-display);font-weight:600;font-size:clamp(2.2rem,10vw,4rem);letter-spacing:-.02em;text-decoration:none;line-height:1.15;transform:translateY(30px);opacity:0;transition:transform .6s var(--ease),opacity .6s}
.overlay.open a{transform:none;opacity:1}
.overlay.open a:nth-child(2){transition-delay:.06s}.overlay.open a:nth-child(3){transition-delay:.12s}.overlay.open a:nth-child(4){transition-delay:.18s}.overlay.open a:nth-child(5){transition-delay:.24s}
.overlay .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);right:max(18px,env(safe-area-inset-right,0px));background:none;border:1px solid var(--line);color:var(--chalk);border-radius:40px;padding:8px 16px;font:inherit;font-size:.8rem;cursor:pointer}
.overlay .contacts{margin-top:32px;color:var(--dim);font-size:.9rem}

/* ---------- curseur ---------- */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #fff;border-radius:50%;pointer-events:none;z-index:300;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;opacity:0;display:grid;place-items:center;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#000;font-weight:700}
.cursor.live{opacity:1}
.cursor.big{width:88px;height:88px;margin:-44px 0 0 -44px;background:#fff}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- messages Django ---------- */
.toasts{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);z-index:150;display:grid;gap:10px;width:min(560px,calc(100% - 32px))}
.toast{background:var(--chalk);color:var(--night);padding:16px 20px;border-radius:14px;font-weight:500;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);animation:toast .6s var(--ease) both}
.toast.error{background:var(--orange);color:#fff}
@keyframes toast{from{transform:translateY(30px);opacity:0}}

/* ---------- hero accueil ---------- */
.hero{position:relative;height:min(84vh,780px);height:min(84svh,780px);min-height:min(480px,100svh);overflow:hidden;background:var(--night)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(to top,var(--night),transparent);pointer-events:none}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-block:0 clamp(28px,6vw,64px);pointer-events:none}
.hero h1{font-size:clamp(4.5rem,19vw,17rem);font-weight:500;letter-spacing:-.02em;line-height:.78;mix-blend-mode:difference;color:#fff;margin-left:-.04em}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:14px}
.hero-row p{margin:0;max-width:26ch;font-size:clamp(1.25rem,2.3vw,1.9rem);line-height:1.15}
.scroll-cue{display:flex;align-items:center;gap:12px}
.scroll-cue i{width:1px;height:48px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--chalk);animation:drip 1.8s infinite}
@keyframes drip{to{top:100%}}

/* ---------- bandeau défilant ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:18px;background:var(--night2)}
.marquee-track{display:flex;width:max-content;animation:mq 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,3.4vw,2.6rem);white-space:nowrap;padding-right:.6em}
.marquee span em{font-family:var(--f-serif);font-weight:400;color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- galerie horizontale épinglée ---------- */
.hgallery{position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sec-head h2,.h2{font-size:clamp(2.1rem,4.6vw,4rem);font-weight:500;letter-spacing:-.02em}
.sec-head h2 .serif,.h2 .serif{font-size:1.1em;color:var(--pink)}
.progress{width:min(240px,40vw);height:2px;background:var(--line);position:relative}
.progress b{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold)}
.track{display:flex;align-items:flex-end;gap:clamp(18px,3vw,44px);will-change:transform;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.piece{flex:0 0 auto;display:block;text-decoration:none;color:inherit;perspective:900px}
.piece .art{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out;box-shadow:0 40px 70px -35px rgba(0,0,0,.9);background:var(--night3)}
.track .piece img{height:min(56vh,540px);width:auto;max-width:none}
.piece .glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.piece:hover .glare{opacity:1}
.piece .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:14px}
.piece .meta b{font-family:var(--f-body);font-weight:500;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}
.piece .meta span{font-size:.74rem;color:var(--dim);letter-spacing:.1em;white-space:nowrap}
.track .end{flex:0 0 auto;width:clamp(240px,24vw,320px);align-self:center;display:grid;gap:18px}
.track .end p{font-family:var(--f-serif);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;margin:0}
@media (max-width:820px),(prefers-reduced-motion:reduce){
  .hgallery{height:auto!important}
  .pin{position:relative;height:auto;padding-block:80px}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;transform:none!important;-webkit-overflow-scrolling:touch}
  .piece{scroll-snap-align:start}
  .track{scroll-padding-left:max(18px,env(safe-area-inset-left,0px))}
  .track .piece img{height:min(56vh,400px);width:auto;max-width:78vw;object-fit:cover}
  .progress{display:none}
}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:40px;padding:12px 22px;text-decoration:none;font-size:.85rem;letter-spacing:.04em;transition:background .3s,color .3s,border-color .3s;background:none;color:var(--chalk);font-family:inherit;cursor:pointer}
.btn:hover{background:var(--chalk);color:var(--night);border-color:var(--chalk)}
.btn.solid{background:var(--chalk);color:var(--night);border-color:var(--chalk)}
.btn.solid:hover{background:var(--gold);border-color:var(--gold)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- sections ---------- */
.section{padding-block:clamp(44px,5.5vw,80px)}
.section.alt{background:var(--night2)}
.bordered{border-top:1px solid var(--line)}

/* artiste (accueil + page) */
.duo{display:grid;grid-template-columns:minmax(0,clamp(300px,28vw,460px)) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.duo .prose,.duo .quote{max-width:70ch}
.arch{position:relative;max-width:100%}
.arch .ph{border-radius:999px 999px 4px 4px;overflow:hidden;aspect-ratio:3/4;background:var(--night3)}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.arch:hover img{transform:scale(1.05)}
.arch .ring{position:absolute;inset:-7%;border:1px dashed var(--line);border-radius:50%;animation:spin 50s linear infinite;pointer-events:none}
.arch .badge{position:absolute;right:-4%;bottom:12%;width:120px;height:120px;border-radius:50%;background:var(--gold);color:var(--night);display:grid;place-items:center;text-align:center;font-family:var(--f-serif);font-style:italic;font-size:1.15rem;line-height:1.05;animation:bob 5s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes bob{to{transform:translateY(-14px) rotate(-6deg)}}
.quote{font-family:var(--f-display);font-weight:400;font-style:italic;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.01em;margin:10px 0 20px}
.quote .w{transition:color .35s;color:rgba(242,238,230,.25)}
.quote .w.on{color:var(--chalk)}
.quote .w.hl.on{color:var(--gold);font-family:var(--f-serif);font-style:italic;letter-spacing:0}
.prose{max-width:62ch;color:var(--soft);font-size:1.05rem}
.prose p{margin:0 0 .8em}
.prose p:first-child::first-letter{font-family:var(--f-serif);font-size:4.2em;float:left;line-height:.85;padding:.04em .1em 0 0;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{border:1px solid var(--line);border-radius:40px;padding:8px 16px;font-size:.82rem;transition:background .3s,color .3s}
.chips span:hover{background:var(--chalk);color:var(--night)}

/* ruban d'images (page artiste) */
.ribbon{overflow:hidden;padding-block:24px}
.ribbon-track{display:flex;gap:20px;width:max-content;animation:mq 60s linear infinite}
.ribbon img{height:clamp(160px,22vw,280px);width:auto;border-radius:4px;filter:saturate(.9)}
.ribbon:hover .ribbon-track{animation-play-state:paused}

/* bande atelier */
.studio{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(16px,2vw,28px);align-items:stretch}
.studio figure{margin:0;overflow:hidden;border-radius:4px}
.studio img{width:100%;height:100%;object-fit:cover}
.studio figure:first-child{aspect-ratio:4/3}
.studio figure:last-child{aspect-ratio:auto;min-height:0}
.studio figcaption{font-size:.78rem;color:var(--dim);margin-top:10px;letter-spacing:.06em}

/* ---------- en-tête des pages intérieures ---------- */
.page-hero{padding-block:calc(env(safe-area-inset-top,0px) + clamp(100px,9vw,120px)) clamp(18px,2.6vw,32px);position:relative;overflow:hidden}
.page-hero{padding-left:max(clamp(18px,4vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(18px,4vw,72px),env(safe-area-inset-right,0px))}
.page-hero .container,.page-hero .wrap{max-width:none;margin:0}
.page-title{font-family:var(--f-display);font-size:clamp(2.6rem,8vw,7rem);font-weight:500;letter-spacing:-.02em;line-height:.85;margin:0}
.page-title .ch{display:inline-block;animation:letter .8s var(--ease) both}
.page-hero .lead{margin:12px 0 0;max-width:44ch;font-size:clamp(1.1rem,1.8vw,1.45rem);color:var(--soft)}
.page-hero .blob{position:absolute;width:55vmax;height:55vmax;right:-22vmax;top:-26vmax;background:radial-gradient(circle,var(--glow,rgba(47,107,255,.35)),transparent 62%);filter:blur(10px);animation:float 14s ease-in-out infinite alternate;pointer-events:none;z-index:-1}
@keyframes float{to{transform:translate(-8vmax,12vmax) scale(1.15)}}

/* ---------- œuvres ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tabs a{text-decoration:none;border:1px solid var(--line);border-radius:40px;padding:10px 20px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.tabs a:hover{border-color:var(--chalk)}
.tabs a.active{background:var(--chalk);color:var(--night);border-color:var(--chalk)}
.coll-desc{max-width:62ch;font-family:var(--f-serif);font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.3;color:var(--soft);margin:0 0 clamp(24px,3vw,36px)}
.masonry{columns:4 280px;column-gap:clamp(18px,2.4vw,32px)}
.masonry .piece{break-inside:avoid;margin-bottom:clamp(20px,2.4vw,32px)}
.masonry .piece img{width:100%;height:auto}
.empty{color:var(--dim);padding-block:60px;font-size:1.1rem}

/* fiche œuvre */
.detail{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,80px);align-items:start;padding-block:calc(env(safe-area-inset-top,0px) + 110px) clamp(40px,5vw,72px)}
.zoom{position:relative;overflow:hidden;cursor:zoom-in;background:var(--night3);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.zoom img{width:100%;height:auto;transition:transform .2s ease-out;transform-origin:var(--zx,50%) var(--zy,50%)}
.zoom.on img{transform:scale(2.2)}
.detail-info{position:sticky;top:110px;display:grid;gap:14px}
.detail-info h1{font-size:clamp(2.1rem,4.2vw,3.6rem);font-weight:500;letter-spacing:-.02em}
.specs{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0;border-top:1px solid var(--line);padding-top:20px}
.specs dt{color:var(--dim);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.specs dd{margin:0}
.detail-info .desc{color:var(--soft);margin:0}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:180;background:rgba(8,9,14,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,64px);align-items:center;padding:calc(env(safe-area-inset-top,0px) + 70px) max(22px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 30px) max(22px,env(safe-area-inset-left,0px));animation:fade .35s both;overflow:auto}
@keyframes fade{from{opacity:0}}
.lb .imgbox{display:grid;place-items:center;min-height:0}
.lb img{max-height:80vh;width:auto;max-width:100%;object-fit:contain;animation:zoomIn .6s var(--ease) both;box-shadow:0 40px 80px -30px #000}
@keyframes zoomIn{from{transform:scale(.9);opacity:0}}
.lb .info{display:grid;gap:12px;max-width:46ch}
.lb h3{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:500;letter-spacing:-.02em}
.lb .x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:max(18px,env(safe-area-inset-right,0px))}
.lb .count{font-variant-numeric:tabular-nums}
@media (max-width:760px){.lb{grid-template-columns:1fr;align-content:start}.lb img{max-height:58vh}}

/* ---------- actualités ---------- */
.news-list{list-style:none;margin:0;padding:0}
.news-item{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:8px 36px;align-items:center;padding-block:20px;border-top:1px solid var(--line);transition:padding .45s var(--ease);isolation:isolate}
.news-item:last-child{border-bottom:1px solid var(--line)}
.news-item::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--pink));transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-io);z-index:-1}
.news-item.hov:hover::before{transform:scaleY(1)}
.news-item.hov:hover{padding-inline:22px}
.news-item time{font-size:.85rem;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.news-item.hov:hover time{color:var(--chalk)}
.news-item h3{font-size:clamp(1.4rem,2.8vw,2.3rem);font-weight:500;letter-spacing:-.02em}
.news-item .tag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);border-radius:30px;padding:6px 12px;white-space:nowrap}
.news-item a.cover{position:absolute;inset:0;z-index:1}
.peek{position:fixed;left:0;top:0;width:220px;pointer-events:none;z-index:90;opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-4deg);transition:opacity .3s,transform .3s var(--ease);border-radius:4px;overflow:hidden;box-shadow:0 30px 60px -20px #000}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
@media (pointer:coarse){.peek{display:none}}
@media (max-width:700px){.news-item{grid-template-columns:1fr}}

/* page actualités : articles */
.articles{display:grid;gap:clamp(36px,5vw,64px)}
.article{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:start}
.article:nth-child(even) .article-img{order:2}
.article-img{overflow:hidden;border-radius:4px;background:var(--night3);position:sticky;top:100px}
.article-img img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.article:hover .article-img img{transform:scale(1.04)}
.article time{color:var(--gold);font-size:.85rem;letter-spacing:.08em}
.article h2{font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:500;letter-spacing:-.01em;margin:6px 0 12px}
.article .txt{color:var(--soft);max-width:62ch}
.article .txt p{margin:0 0 1em}
.article .txt.clamp{max-height:9.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.more{background:none;border:0;color:var(--chalk);font:inherit;font-size:.85rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:0;margin-top:10px}
@media (max-width:760px){.article{grid-template-columns:1fr}.article:nth-child(even) .article-img{order:0}.article-img{position:relative;top:0}}

/* ---------- contact ---------- */
.cta{position:relative;overflow:hidden;background:var(--night2)}
.cta .blob{position:absolute;width:60vmax;height:60vmax;right:-20vmax;top:-20vmax;background:radial-gradient(circle,rgba(47,107,255,.35),transparent 60%);filter:blur(20px);animation:float 12s ease-in-out infinite alternate;pointer-events:none}
.cta h2,.big{font-size:clamp(2rem,4vw,3.4rem);font-weight:500;letter-spacing:-.02em;line-height:.9}
.cta h2 .serif,.big .serif{font-weight:400;color:var(--pink);letter-spacing:-.02em}
.cta .row{margin-top:0;position:relative}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.section.cta{padding-block:clamp(28px,3.5vw,48px)}
.c-grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,36px);margin-top:clamp(14px,2vw,24px);position:relative}
.c-grid .form{max-width:none}
.coords{display:flex;flex-wrap:wrap;gap:14px clamp(28px,4vw,56px);align-items:flex-start;padding-bottom:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line)}
.coords div{display:grid;gap:4px}
.coords .v{font-size:clamp(1rem,1.4vw,1.15rem);word-break:break-word}
.coords .v a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.coords .v a:hover{background-size:100% 1px}
.form{display:grid;gap:14px;min-width:0}
.form .two{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.field{position:relative}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--chalk);font:inherit;font-size:1.05rem;padding:24px 0 10px;border-radius:0}
.field textarea{min-height:90px;resize:vertical}
.field label{position:absolute;left:0;top:24px;color:var(--dim);transition:all .25s var(--ease);pointer-events:none}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.magnet{justify-self:start;display:inline-grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--chalk);color:var(--night);border:0;font-family:var(--f-body);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:transform .2s ease-out,background .3s}
.magnet:hover{background:var(--gold)}
.note{color:var(--dim);font-size:.82rem;margin:0}
@media (max-width:760px){.c-grid,.form .two{grid-template-columns:1fr}}

/* ---------- pages légales ---------- */
.legal-content{padding-block:0 clamp(40px,6vw,80px)}
.legal-content .container{max-width:none;margin:0;padding-left:max(clamp(18px,4vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(18px,4vw,72px),env(safe-area-inset-right,0px))}
.legal-text{max-width:900px}
.legal-text{color:var(--soft)}
.legal-text h2{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:500;color:var(--chalk);margin:28px 0 8px;letter-spacing:-.01em}
.legal-text a{color:var(--gold)}

/* ---------- pied de page ---------- */
.footer{border-top:1px solid var(--line);padding-block:clamp(22px,3vw,34px) 18px;background:var(--night)}
.foot-top{display:flex;justify-content:flex-start;gap:16px clamp(28px,4vw,56px);flex-wrap:wrap;align-items:baseline}
.foot-word{font-family:var(--f-display);font-weight:500;font-size:clamp(2.6rem,5vw,4rem);letter-spacing:-.02em;line-height:.75;background:linear-gradient(100deg,var(--pink),var(--gold) 45%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 10s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.foot-links{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.4vw,32px);list-style:none;margin:0;padding:0;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}
.foot-links a{text-decoration:none;color:var(--soft)}
.foot-links a:hover{color:var(--chalk)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--dim)}
.foot-bottom a{color:var(--dim)}
.totop{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:80;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(12,13,20,.7);color:var(--chalk);cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;display:grid;place-items:center}
.totop.on{opacity:1;transform:none}

/* ---------- apparitions (visible au repos) ---------- */
.rv.in{animation:rise .9s var(--ease) both}
@keyframes rise{from{transform:translateY(40px);opacity:.15}}

@media (max-width:820px){.duo,.studio,.detail{grid-template-columns:1fr}.detail-info{position:relative;top:0}.arch{max-width:440px}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .intro{display:none}
}

/* bouton Retour (pages intérieures) */
.nav-right{display:flex;align-items:center;gap:clamp(16px,2.6vw,38px)}
.nav-end{display:flex;align-items:center;gap:12px}
.backbar{display:inline-flex;align-items:center;gap:6px;border:1px solid #fff;border-radius:40px;padding:6px 14px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff;transition:background .3s,color .3s;white-space:nowrap}
.backbar:hover{background:#fff;color:#000}

/* logo sur chaque page */
.foot-brand{display:flex;align-items:flex-end;gap:clamp(14px,2vw,28px)}
@media (max-width:820px){.brand img{width:40px}.brand span{font-size:1.6rem}}

/* ===== Téléphones (Android / iPhone) ===== */
html{-webkit-tap-highlight-color:transparent}
@media (max-width:820px){
  body{font-weight:400;font-size:1rem}
  .prose{font-size:1rem}
  .masonry{columns:2;column-gap:12px}
  .masonry .piece{margin-bottom:18px}
  .piece .meta{flex-wrap:wrap;gap:2px 8px;margin-top:8px}
  .piece .meta b{font-size:.72rem;letter-spacing:.12em}
  .piece .meta span{font-size:.68rem}
  .tabs a{padding:10px 16px;font-size:.74rem}
  .more{display:inline-block;padding:12px 0;min-height:44px}
  .coords .v a,.legal-text a,.detail-info .kicker{display:inline-block;padding-block:10px}
  .coords{gap:4px 28px}
  .news-item{padding-block:16px}
  .news-item h3{font-size:1.3rem}
  .duo{grid-template-columns:1fr}
  .arch{max-width:340px;margin-inline:auto}
  .arch .badge{width:92px;height:92px;font-size:.95rem}
  .hero-row p{font-size:1.15rem}
  .lb{padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
  .lb .row .btn{padding:12px 18px}
  .magnet{width:100%;height:54px;border-radius:40px}
  .cta .row{width:100%}
  .backbar{padding:8px 12px}
}
@media (max-width:380px){
  .brand span{font-size:1.35rem}.brand img{width:34px}
  .backbar{font-size:.66rem;letter-spacing:.08em;padding:7px 10px}
  .burger{font-size:.68rem;letter-spacing:.12em;padding:8px 4px}
}
/* téléphone à l'horizontale : écran peu haut */
@media (max-height:520px) and (orientation:landscape){
  .hero{height:100svh;min-height:0}
  .hero h1{font-size:clamp(3.4rem,14vh,6rem)}
  .hero-row{margin-top:6px}.hero-row p{font-size:1rem}
  .scroll-cue{display:none}
  .nav{padding-block:10px}
  .brand img{width:34px}.brand span{font-size:1.4rem}
  .page-hero{padding-top:calc(env(safe-area-inset-top,0px) + 74px)}
  .detail{padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
  .lb img{max-height:70vh}
}

/* pied de page étiré sur toute la largeur */
.foot-top{flex-wrap:nowrap;align-items:center}
.foot-links{flex:1;justify-content:space-between;padding-left:clamp(24px,6vw,120px)}
.foot-bottom{padding-right:max(0px, calc(72px - clamp(18px,4vw,72px)))}
@media (max-width:820px){
  .foot-top{flex-wrap:wrap}
  .foot-links{flex-basis:100%;padding-left:0;justify-content:space-between}
  .foot-bottom{padding-right:0;padding-bottom:56px}
}

/* ===== Ouverture « poudre » ===== */
.hero #powder,.hero #powderBg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero #powder{z-index:1}
.pw-glow{position:absolute;inset:0;color:#FF2E88;background:radial-gradient(60% 70% at 66% 45%,currentColor,transparent 70%);opacity:.22;transition:color 1.6s ease;pointer-events:none}
.pw-img{position:absolute;max-width:none;opacity:0;transform-origin:50% 45%;will-change:transform,opacity;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%);mask-image:linear-gradient(90deg,transparent,#000 28%)}
@media (max-width:820px){.pw-img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 60% 40%,transparent 45%,rgba(12,13,20,.75) 100%),linear-gradient(90deg,rgba(12,13,20,.55),transparent 45%)}
.hero-in{z-index:2}
.hero-cap{pointer-events:auto;display:grid;gap:2px;text-align:right;text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.hero-cap.on{opacity:1;transform:none}
.hero-cap b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:.02em}
.hero-cap:hover b{color:var(--gold)}
@media (max-width:820px){.hero-cap{text-align:left}.hero-cap b{font-size:1.2rem}}

.hero-tag{display:grid;gap:2px}
.hero-tag .serif{font-size:1.05em}

/* pastille rouge « vendue », convention des galeries */
.sold-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#E0312F;margin-right:.5em;vertical-align:.08em;box-shadow:0 0 0 2px rgba(224,49,47,.25)}

.foot-bottom .admin-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:30px;padding:4px 12px;text-decoration:none;color:var(--soft)}
.foot-bottom .admin-link::before{content:"🔒";font-size:.8em}
.foot-bottom .admin-link:hover{background:var(--chalk);color:var(--night)}

/* bandeau « site en construction » : sens inverse, fond or */
.marquee.construction{background:var(--gold);border-color:transparent;padding-block:10px}
.marquee.construction .marquee-track{animation-direction:reverse;animation-duration:48s}
.marquee.construction span{font-family:var(--f-body);font-weight:500;font-size:clamp(.78rem,1.2vw,.95rem);letter-spacing:.18em;text-transform:uppercase;color:var(--night);padding-right:2.2em}
.marquee.construction b{font-weight:400;margin-left:2.2em}

/* En-tête lisible au-dessus des images (plus de mélange de couleurs) */
.site-header{mix-blend-mode:normal}
.site-header::before{content:"";position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(12,13,20,.92) 0%,rgba(12,13,20,.7) 55%,rgba(12,13,20,0) 100%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.site-header .menu a,.site-header .brand span,.site-header .burger,.site-header .backbar{text-shadow:0 1px 8px rgba(0,0,0,.65)}
.site-header .menu a{font-weight:500}
.site-header .backbar{background:rgba(12,13,20,.35)}
.site-header .backbar:hover{background:#fff;color:#000;text-shadow:none}