/* Sema Kilickaya — Le fil de l'Asi */

@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Literata";src:url(fonts/literata.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(fonts/literata-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --indigo:#1837A3; --orange:#F2702A; --jaune:#FEC007; --night:#0C1230; --givre:#F1F3FA;
  --display:"Bricolage Grotesque","Arial Narrow",sans-serif;
  --text:"Literata",Georgia,serif;
  --gut:clamp(20px,5vw,84px);
  --nav-h:60px;
  --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(84px,calc(var(--svh,1vh)*13),150px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--orange) var(--night);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--indigo);color:var(--givre);font-family:var(--text);font-size:1.0625rem;line-height:1.68;font-optical-sizing:auto;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
p,li{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{width:1.05em;height:1.05em;flex:none}
::selection{background:var(--thread,var(--orange));color:var(--ground,var(--night))}
:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:2px}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--jaune);color:var(--night);padding:.6rem 1rem;font-family:var(--display);font-weight:650}
.skip:focus{top:12px}

/* ── lands: each region owns a colour taken from a canvas ── */
.land{position:relative;background:var(--ground);color:var(--ink);padding-block:var(--pad);isolation:isolate}
.land--indigo{--ground:var(--indigo);--ink:#F3F4FA;--soft:#D3DBFA;--thread:#FF7B36;--line:rgba(243,244,250,.28)}
.land--givre{--ground:var(--givre);--ink:var(--night);--soft:#3B446B;--thread:var(--orange);--line:rgba(12,18,48,.2)}
.land--orange{--ground:var(--orange);--ink:var(--night);--soft:#34170A;--thread:var(--indigo);--line:rgba(12,18,48,.3)}
.land--night{--ground:var(--night);--ink:#F3F4FA;--soft:#B5BEE4;--thread:var(--jaune);--line:rgba(243,244,250,.22)}
.land--jaune{--ground:var(--jaune);--ink:var(--night);--soft:#3A2E05;--thread:var(--indigo);--line:rgba(12,18,48,.28)}
.wrap{position:relative;z-index:2;padding-inline:var(--gut);max-width:1560px;margin-inline:auto}

/* ── the thread ── */
.thread{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.thread path{fill:none;stroke:var(--thread);stroke-linecap:round;stroke-linejoin:round}
.thread path:nth-child(1){stroke-width:9px}
.thread path:nth-child(2){stroke-width:2.4px;transform:translate(9px,5px);opacity:.85}
.thread path:nth-child(3){stroke-width:1.3px;transform:translate(-8px,-4px);opacity:.7}
@media (max-width:859px){
  .thread path:nth-child(1){stroke-width:5px}
  .thread path:nth-child(2){stroke-width:1.6px;transform:translate(5px,4px)}
  .thread path:nth-child(3){display:none}
}

/* ── type ── */
h1,h2,h3,.statement{font-family:var(--display);font-stretch:78%;text-wrap:balance}
h2{font-size:clamp(2.6rem,6.4vw,5.75rem);font-weight:750;line-height:.94;letter-spacing:-.022em}
h3{font-size:clamp(1.65rem,2.7vw,2.5rem);font-weight:700;line-height:1.02;letter-spacing:-.012em}
.head{position:relative;margin-bottom:clamp(40px,calc(var(--svh,1vh)*6),72px)}
.head-guide{position:absolute;left:calc(var(--gut)*-.5);top:-10px;bottom:-10px;width:2px}
.prix .head{margin-bottom:clamp(64px,calc(var(--svh,1vh)*11),120px)}
.head-intro{margin-top:1.1rem;max-width:34ch;font-size:1.2rem;line-height:1.5;color:var(--soft)}

/* brush-swipe link: the one control of this world */
.go{display:inline-flex;align-items:center;gap:.5em;padding:.34em .5em .3em;margin-left:-.5em;font-family:var(--display);font-stretch:86%;font-weight:650;font-size:1.06rem;line-height:1.2;text-decoration:none;color:var(--ink);
  background:linear-gradient(var(--ink),var(--ink)) no-repeat left 100%/100% 3px;transition:background-size .5s var(--out),color .35s var(--out)}
.go:hover,.go:focus-visible{background-size:100% 100%;color:var(--ground)}
.go:active{transform:translateY(1px)}
.go svg{transition:transform .5s var(--out)}
.go:hover svg{transform:translate(3px,0)}
.prose a,.refs a{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--thread);transition:text-decoration-color .3s}
.prose a:hover,.refs a:hover{text-decoration-color:currentColor}

/* ── nav ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut);font-family:var(--display);font-stretch:86%;font-weight:600;font-size:1rem;
  background:var(--nav-ground);color:var(--nav-ink);transition:background-color .6s var(--out),color .6s var(--out)}
.nav[data-land=indigo]{--nav-ground:var(--indigo);--nav-ink:#F3F4FA}
.nav[data-land=givre]{--nav-ground:var(--givre);--nav-ink:var(--night)}
.nav[data-land=orange]{--nav-ground:var(--orange);--nav-ink:var(--night)}
.nav[data-land=night]{--nav-ground:var(--night);--nav-ink:#F3F4FA}
.nav[data-land=jaune]{--nav-ground:var(--jaune);--nav-ink:var(--night)}
.nav a{text-decoration:none;padding:.5em 0;background:linear-gradient(currentColor,currentColor) no-repeat left 88%/0 2px;transition:background-size .45s var(--out)}
.nav a:hover,.nav a[aria-current]{background-size:100% 2px}
.nav-name{font-weight:750;font-stretch:78%;font-size:1.16rem;letter-spacing:-.01em;opacity:0;transform:translateY(-6px);transition:opacity .4s var(--out),transform .4s var(--out),background-size .45s var(--out)!important}
.nav.past .nav-name{opacity:1;transform:none}
.nav-links{display:flex;gap:clamp(18px,2.6vw,40px)}
.nav-menu{display:none;font-weight:650;padding:.5em 0}
.menu{position:fixed;inset:0;z-index:49;background:var(--indigo);color:#F3F4FA;display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:var(--nav-h) var(--gut) 40px}
.menu[hidden]{display:none}
.menu a{font-family:var(--display);font-stretch:78%;font-weight:750;font-size:clamp(2.2rem,11vw,3.6rem);line-height:1.12;text-decoration:none}
@media (max-width:1020px){.page .nav-links{display:none}.page .nav-menu{display:block}}
@media (max-width:859px){.nav-links{display:none}.nav-menu{display:block}}

/* ── hero ── */
.hero{min-height:calc(var(--svh,1svh)*100);padding-block:calc(var(--nav-h) + calc(var(--svh,1vh)*3)) calc(var(--svh,1vh)*6);display:grid;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:center;width:100%}
.hero-text{position:relative;z-index:3}
.name{font-size:clamp(3.4rem,10.6vw,10.4rem);font-weight:800;font-stretch:75%;line-height:.86;letter-spacing:-.008em;white-space:nowrap}
.name-l{display:block;overflow:hidden;padding-block:.06em .1em;margin-block:-.06em -.1em}
.name-l>span{display:inline-block}
.t-start{display:inline-block;width:.06em;height:.1em;vertical-align:baseline}
.hero-line{margin-top:clamp(20px,calc(var(--svh,1vh)*3.4),36px);max-width:24ch;font-size:clamp(1.2rem,1.75vw,1.6rem);line-height:1.38;color:var(--soft)}
.hero-go{margin-top:clamp(18px,calc(var(--svh,1vh)*3),30px);display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.hero-art{position:relative;height:min(calc(var(--svh,1svh)*76),680px);min-height:380px}
.hero-art figure{position:absolute}
.hero-art img{height:100%;width:auto;border-radius:2px;box-shadow:0 30px 60px -28px rgba(5,9,34,.85),0 6px 14px -6px rgba(5,9,34,.5)}
.hero-art figcaption{position:absolute;right:0;top:calc(100% + .7rem);font-family:var(--display);font-stretch:86%;font-size:.84rem;font-weight:550;color:var(--soft);white-space:nowrap}
.hero-toile{right:0;top:0;height:100%;rotate:2.4deg}
.hero-livre{left:-14%;bottom:-3%;height:56%;rotate:-4deg;z-index:2}
.hero-portrait img{aspect-ratio:1;object-fit:cover}
.hero-livre figcaption{right:auto;left:0}

.courant{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(100deg,transparent 24%,#000 66%),linear-gradient(180deg,transparent 56px,#000 210px);mask-image:linear-gradient(100deg,transparent 24%,#000 66%),linear-gradient(180deg,transparent 56px,#000 210px);-webkit-mask-composite:source-in;mask-composite:intersect}
.ch{display:inline-block}
.js:not(.still):not(.settle) .name-l>span.split{animation:none}
.js:not(.still):not(.settle) .ch{animation:rise 1.15s var(--out) both}
@media (max-width:859px){.courant{-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 62%);mask-image:linear-gradient(180deg,transparent 30%,#000 62%)}}

/* ── autrice ── */
.autrice-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,7vw,120px);align-items:center}
.statement{font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:600;font-stretch:84%;line-height:1.1;letter-spacing:-.014em;max-width:22ch}
.prose{margin-top:clamp(28px,calc(var(--svh,1vh)*4.5),48px);max-width:60ch}
.prose p+p{margin-top:1.05em}
.prose-note{color:var(--soft)}
.autrice-photo{rotate:-2deg}
.autrice-photo figcaption{margin-top:.8rem;font-family:var(--display);font-stretch:86%;font-weight:600;font-size:.92rem;color:var(--soft)}
.autrice-photo img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:2px;box-shadow:0 34px 60px -30px rgba(12,18,48,.6),0 6px 14px -8px rgba(12,18,48,.35)}

/* ── livres: the bank ── */
.rive{position:relative;z-index:2;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(10px,1.6vw,26px);align-items:end;padding-inline:var(--gut);max-width:1560px;margin-inline:auto}
.rive-b{position:relative;display:grid;gap:.5rem;text-align:left;align-content:end;transition:translate .7s var(--out)}
.rive-b:nth-child(odd){translate:0 -14px}
.rive-b img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 22px 34px -20px rgba(40,14,0,.75),0 4px 10px -5px rgba(40,14,0,.45);transition:transform .7s var(--out),box-shadow .7s var(--out)}
.rive-b:hover img{transform:translateY(-10px) rotate(-1.5deg)}
.rive-b[aria-selected=true] img{transform:translateY(-18px);box-shadow:0 36px 40px -22px rgba(40,14,0,.8)}
.rive-y{font-family:var(--display);font-stretch:86%;font-weight:700;font-size:1rem;line-height:1;margin-top:.35rem;font-variant-numeric:tabular-nums}
.rive-t{font-family:var(--display);font-stretch:84%;font-weight:550;font-size:.92rem;line-height:1.18;color:var(--soft);min-height:2.4em}
.rive-b[aria-selected=true] .rive-t{color:var(--ink);font-weight:700}
.rive-b[aria-selected=true] .rive-y{background:var(--night);color:var(--orange);justify-self:start;padding:.22em .5em .18em}
.rive-gap{position:absolute;right:calc(100% + clamp(5px,.8vw,13px));top:0;bottom:0;width:2px}
.fiches{margin-top:clamp(48px,calc(var(--svh,1vh)*8),96px)}
.fiche{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(32px,8vw,140px);align-items:start}
.fiche+.fiche{margin-top:clamp(64px,calc(var(--svh,1vh)*10),120px)}
.js .fiche+.fiche{margin-top:0}
.fiche[hidden]{display:none}
.fiche-when{margin-top:.8rem;font-family:var(--display);font-stretch:86%;font-weight:650;font-size:1rem;color:var(--soft)}
.fiche h3{font-size:clamp(2rem,4.4vw,4rem);font-weight:750;line-height:.96;letter-spacing:-.02em;max-width:16ch}
.fiche-prize{margin-top:.9rem;display:inline-block;font-family:var(--display);font-stretch:86%;font-weight:700;font-size:1rem;background:var(--night);color:var(--orange);padding:.3em .7em .26em}
.fiche-body{margin-top:1.5rem;max-width:64ch}
.fiche-facts{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;padding-top:1.1rem;border-top:1px solid var(--line);font-family:var(--display);font-stretch:86%;font-size:.95rem;max-width:64ch}
.fiche-facts dt{font-weight:500;color:var(--soft);font-size:.82rem}
.fiche-facts dd{font-weight:650;font-variant-numeric:tabular-nums}
.fiche-links{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.3rem 1.8rem}
.fiche-cover{rotate:3deg;margin-top:1rem}
.fiche-cover img{width:100%;border-radius:2px;box-shadow:0 40px 60px -30px rgba(40,14,0,.85),0 8px 16px -8px rgba(40,14,0,.5)}

/* ── tableaux: the river turns sideways ── */
.galerie{padding-block:0}
.galerie-sticky{position:sticky;top:0;height:calc(var(--svh,1svh)*100);min-height:560px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding-top:calc(var(--nav-h) + calc(var(--svh,1vh)*2.5));padding-bottom:calc(var(--svh,1vh)*13)}
.galerie-head{margin-bottom:0;width:100%;display:flex;align-items:end;justify-content:flex-start;gap:.6rem clamp(2rem,5vw,5rem);flex-wrap:wrap}
.galerie-head h2{font-size:clamp(2.3rem,5vw,4.4rem)}
.galerie-head .head-intro{margin:0 0 .35rem;max-width:30ch;font-size:1.05rem}
.track-view{position:relative;z-index:2;min-width:0;min-height:0;display:flex;align-items:center;margin-top:clamp(14px,calc(var(--svh,1vh)*3),34px)}
.track{display:flex;align-items:center;gap:clamp(28px,4.5vw,84px);height:100%;padding-inline:var(--gut) 22vw;will-change:transform}
.track li{flex:none;height:100%;display:flex;align-items:center}
.track li:nth-child(even){align-items:flex-end}
.track li:nth-child(3n){align-items:flex-start}
.toile{position:relative;display:block;height:86%;text-decoration:none}
.toile img{height:100%;width:auto;max-width:none;border-radius:2px;box-shadow:0 34px 60px -30px #000,0 0 0 1px rgba(243,244,250,.06);transition:transform .8s var(--out)}
.toile:hover img,.toile:focus-visible img{transform:scale(1.035) rotate(-.8deg)}
.toile span{position:absolute;left:0;top:calc(100% + .6rem);font-family:var(--display);font-stretch:86%;font-weight:600;font-size:.95rem;white-space:nowrap;color:var(--soft);transition:color .3s}
.toile:hover span{color:var(--jaune)}

/* ── prix: stops along the bank ── */
.halte{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:center}
.halte+.halte{margin-top:clamp(84px,calc(var(--svh,1vh)*15),170px)}
.halte--flip .halte-media{order:2}
.halte--small{grid-template-columns:minmax(0,5fr) minmax(0,4fr)}
.halte--small .halte-media{max-width:440px;justify-self:end;width:100%}
.halte-text{max-width:52ch}
.halte-for{margin-top:.6rem;font-family:var(--display);font-stretch:86%;font-weight:650;font-size:1.05rem;color:var(--soft)}
.halte-text p+p{margin-top:1rem}
.ph{display:block;overflow:hidden;border-radius:2px;box-shadow:0 26px 44px -26px rgba(60,40,0,.8),0 4px 10px -6px rgba(60,40,0,.45)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--out)}
.ph:hover img{transform:scale(1.04)}
.ph--main{rotate:-1.4deg}
.ph-cap{margin-top:1.1rem;font-style:italic;font-size:.98rem;line-height:1.5;color:var(--soft);max-width:40ch}
.halte--flip .ph--main{rotate:1.4deg}
.ph-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.ph-strip .ph,.ph-strip video{aspect-ratio:1;width:100%;object-fit:cover;border-radius:2px}
.ph-strip--one{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.ph-strip--one .ph{aspect-ratio:3/4}
.ph-strip--two{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.vid{position:relative;border-radius:2px;overflow:hidden;box-shadow:0 26px 44px -26px rgba(60,40,0,.8)}
.vid video{display:block;width:100%;height:100%!important;object-fit:cover}
.vid-play{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:.5em;padding:.6em .9em .55em;background:var(--jaune);color:var(--night);font-family:var(--display);font-stretch:86%;font-weight:700;font-size:.98rem;transition:background-color .3s,color .3s}
.vid-play:hover,.vid-play:focus-visible{background:var(--night);color:var(--jaune)}
.vid-play[hidden]{display:none}
.ph-strip--two .ph,.ph-strip--two .vid{aspect-ratio:auto;height:clamp(180px,22vw,300px);background:var(--night)}

/* ── presse ── */
.presse .wrap>*{max-width:1060px}
.guide{position:absolute;right:9%;top:16%;bottom:14%;width:2px}
.rows{border-top:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:8.2rem 13.5rem minmax(0,1fr) auto;gap:.4rem 1.6rem;align-items:baseline;padding:1.15rem .7rem 1.05rem;margin-inline:-.7rem;border-bottom:1px solid var(--line);text-decoration:none;
  background:linear-gradient(var(--night),var(--night)) no-repeat left 100%/100% 0;transition:background-size .5s var(--out),color .3s var(--out)}
.rows a:hover,.rows a:focus-visible{background-size:100% 100%;color:var(--givre)}
.rows-d{font-family:var(--display);font-stretch:86%;font-weight:550;font-size:.92rem;color:var(--soft);font-variant-numeric:tabular-nums;transition:color .3s}
.rows-o{font-family:var(--display);font-stretch:84%;font-weight:750;font-size:1.08rem;line-height:1.2}
.rows-t{font-size:1.06rem;line-height:1.4}
.rows-a{display:inline-flex;align-items:center;gap:.4em;font-family:var(--display);font-stretch:86%;font-weight:650;font-size:.95rem;color:var(--indigo);transition:color .3s}
.rows a:hover .rows-d,.rows a:focus-visible .rows-d{color:#B5BEE4}
.rows a:hover .rows-a,.rows a:focus-visible .rows-a{color:var(--jaune)}
.sub{margin-top:clamp(64px,calc(var(--svh,1vh)*10),110px);margin-bottom:1.6rem}
.refs{counter-reset:r;font-size:.98rem;line-height:1.55;max-width:60ch!important}
.refs li{position:relative;padding-left:2.4rem;color:var(--soft)}
.refs li+li{margin-top:.95rem}
.refs li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:.05em;font-family:var(--display);font-weight:700;font-stretch:86%;color:var(--indigo);font-variant-numeric:tabular-nums}
.refs strong{color:var(--ink);font-weight:600}

/* ── écrire ── */
.ecrire{padding-bottom:0;min-height:calc(var(--svh,1svh)*88);display:flex;flex-direction:column;justify-content:space-between}
.ecrire-in{width:100%}
.ecrire h2{font-size:clamp(3rem,9vw,8.4rem)}
.ecrire-p{margin-top:clamp(22px,calc(var(--svh,1vh)*3.5),36px);max-width:44ch;font-size:1.15rem;color:var(--soft)}
.ecrire-mail{margin-top:clamp(32px,calc(var(--svh,1vh)*6),64px);position:relative;display:inline-block;padding-bottom:1.1rem}
.ecrire-mail a{font-family:var(--display);font-stretch:80%;font-weight:700;font-size:clamp(1.35rem,4.6vw,4rem);line-height:1.1;letter-spacing:-.012em;text-decoration:none;overflow-wrap:anywhere;transition:color .35s var(--out)}
.ecrire-mail a:hover{color:var(--jaune)}
.t-end{position:absolute;left:0;right:0;bottom:0;height:8px}
.foot{width:100%;margin-top:clamp(72px,calc(var(--svh,1vh)*14),150px);padding-block:1.6rem 1.8rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;font-family:var(--display);font-stretch:86%;font-size:.92rem;color:var(--soft)}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
.foot a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat left 100%/0 1.5px;transition:background-size .45s var(--out),color .3s}
.foot a:hover{background-size:100% 1.5px;color:var(--ink)}

/* ── lightbox ── */
.lb{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(12,18,48,.97);color:#F3F4FA}
.lb::backdrop{background:var(--night)}
.lb[open]{display:grid;place-items:center}
.lb-fig{display:grid;gap:.9rem;justify-items:start;padding:56px clamp(60px,8vw,120px) 24px;max-height:100dvh}
.lb-fig img{max-height:calc(100dvh - 150px);max-width:100%;width:auto;height:auto;border-radius:2px;box-shadow:0 40px 80px -40px #000}
.lb-fig figcaption{display:flex;gap:1.4rem;align-items:baseline;font-family:var(--display);font-stretch:84%;font-weight:700;font-size:1.3rem}
#lbCount{font-weight:500;font-size:.92rem;color:#B5BEE4;font-variant-numeric:tabular-nums}
.lb-b{position:absolute;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:rgba(243,244,250,.1);transition:background-color .3s,color .3s,transform .4s var(--out)}
.lb-b svg{width:22px;height:22px}
.lb-b:hover{background:var(--jaune);color:var(--night)}
.lb-b:active{transform:scale(.94)}
.lb-prev{left:clamp(8px,2vw,28px);top:50%;margin-top:-26px}
.lb-next{right:clamp(8px,2vw,28px);top:50%;margin-top:-26px}
.lb-close{right:clamp(8px,2vw,28px);top:14px}

/* ── motion ── */
@keyframes bob{50%{translate:0 -10px}}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes unveil{from{clip-path:inset(0 0 100% 0);transform:translateY(26px)}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}}
.js:not(.still) .hero-art .bob{animation:bob 7s ease-in-out infinite}
.js:not(.still) .hero-livre.bob{animation-duration:8.5s;animation-delay:-3s}
.js:not(.still) .name-l>span{animation:rise 1.25s var(--out) both}
.js:not(.still) .name-l:nth-child(2)>span{animation-delay:.12s}
.js:not(.still) .hero-line,.js:not(.still) .hero-go{animation:fade-up 1.1s var(--out) .55s both}
.js:not(.still) .hero-toile img{animation:unveil 1.5s var(--out) .25s both}
.js:not(.still) .hero-livre img{animation:unveil 1.4s var(--out) .6s both}
.js:not(.still) .hero-art figcaption{animation:fade-up 1s var(--out) 1.3s both}

.js:not(.still) [data-rv=wipe] img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--out)}
.js:not(.still) [data-rv=wipe].in img{clip-path:inset(0 0 0 0)}

::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
::view-transition-group(shown){animation-duration:.65s;animation-timing-function:var(--out)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

.settle *,.settle *::before,.settle *::after{animation:none!important;transition:none!important}

/* gallery without pinning: phones, reduced motion, still captures */
.still .galerie-sticky{position:relative;height:auto;min-height:0;padding-bottom:var(--pad)}
.still .track-view{overflow-x:auto;height:calc(var(--svh,1svh)*62);min-height:380px}

/* ── narrow ── */
@media (max-width:859px){
  :root{--pad:clamp(72px,calc(var(--svh,1vh)*11),110px)}
  body{font-size:1.03rem}
  .wrap{padding-right:calc(var(--gut) + 14px)}
  .hero{padding-block:calc(var(--nav-h) + 20px) 56px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .name{font-size:clamp(3.3rem,19.5vw,7rem)}
  .hero-art{height:auto;min-height:0;aspect-ratio:1/1.02;margin-right:14px}
  .hero-toile{height:96%}
  .hero-livre{left:0;height:48%;bottom:0}
  .autrice-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .autrice-photo{max-width:78%;margin-left:4%}
  .rive{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);gap:16px;padding-block:24px 8px;scrollbar-width:none}
  .rive::-webkit-scrollbar{display:none}
  .rive-b{flex:0 0 34vw;max-width:170px;scroll-snap-align:start}
  .fiche{grid-template-columns:minmax(0,1fr);gap:28px}
  .fiche-cover{order:-1;max-width:46%;margin:0 0 0 2%}
  .galerie-sticky{position:relative;height:auto;min-height:0;padding-block:var(--pad)}
  .galerie-head{margin-bottom:28px}
  .track-view{overflow-x:auto;height:calc(var(--svh,1svh)*58);min-height:340px;max-height:520px;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:40px}
  .track-view::-webkit-scrollbar{display:none}
  .track{gap:26px;padding-inline:var(--gut) 40px}
  .track li{scroll-snap-align:center}
  .halte,.halte--small{grid-template-columns:minmax(0,1fr);gap:26px}
  .halte--flip .halte-media{order:0}
  .halte--small .halte-media{justify-self:start;max-width:86%}
  .halte-media{margin-right:10px}
  .rows a{grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;padding-right:1.2rem}
  .rows-d{grid-column:1/-1}
  .rows-o{grid-column:1}
  .rows-a{grid-column:2;grid-row:2}
  .rows-t{grid-column:1/-1}
  .guide{display:none}
  .refs li{padding-left:1.8rem;padding-right:.6rem}
  .ecrire{min-height:0}
  .lb-fig{padding:60px 14px 84px}
  .lb-prev,.lb-next{top:auto;bottom:16px;margin:0}
}

/* ── secondary pages ── */
.more{margin-top:1.6rem}
.page-head{padding-top:calc(var(--nav-h) + clamp(56px,11vh,120px));padding-bottom:clamp(56px,10vh,110px)}
.page-head h1{font-size:clamp(2.8rem,8vw,7rem);font-weight:800;font-stretch:76%;line-height:.9;letter-spacing:-.012em;max-width:12ch}
.page-lead{margin-top:clamp(34px,5.5vh,52px);max-width:44ch;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.45;color:var(--soft)}
.page-body .guide{right:8%;top:3%;bottom:3%}
.doc{max-width:44rem}
.doc>*:first-child{margin-top:0}
.doc h2{margin-top:clamp(52px,8vh,84px);margin-bottom:1.1rem;font-size:clamp(1.7rem,2.9vw,2.6rem);font-weight:720;line-height:1.02;letter-spacing:-.012em}
.doc h3{margin-top:0;font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:700;line-height:1.15;letter-spacing:0}
.doc p{margin-top:1em}
.doc h2+p,.doc h3+p{margin-top:0}
.doc h3+p{margin-top:.45em}
.doc a{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--thread);transition:text-decoration-color .3s}
.doc a:hover{text-decoration-color:currentColor}
.doc a.go,.doc a.ph{text-decoration:none}
.doc ul{margin-top:1em;display:grid;gap:.55em}
.doc ul li{position:relative;padding-left:1.5rem}
.doc ul li::before{content:"";position:absolute;left:0;top:.82em;width:.8rem;height:3px;background:var(--indigo);border-radius:2px}
.doc blockquote{margin:1.4em 0 0;font-family:var(--display);font-stretch:86%;font-weight:560;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.25;max-width:30ch}
.doc blockquote em{display:block;margin-top:.5em;font-family:var(--text);font-size:.95rem;font-weight:400;color:var(--soft)}
.doc .meta,.doc .subtitle{font-family:var(--display);font-stretch:86%;font-weight:550;font-size:.98rem;color:var(--soft)}
.doc .item,.doc .prize,.doc section{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--line)}
.doc h2+.item,.doc section:first-child{border-top:0;padding-top:0;margin-top:0}
.doc section h2{margin-top:clamp(28px,5vh,48px)}
.doc section:first-child h2{margin-top:0}
.doc .prize{padding-top:2rem;margin-top:2.6rem}
.doc .prize:first-of-type{margin-top:0;border-top:0;padding-top:0}
.doc .prize .year{display:block;font-family:var(--display);font-stretch:78%;font-weight:800;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;color:var(--indigo);font-variant-numeric:tabular-nums}
.doc .prize .name{margin-top:.5rem;font-family:var(--display);font-stretch:80%;font-weight:720;font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.08}
.doc .info-block{margin-top:1em;padding:1.1rem 1.3rem;background:rgba(24,55,163,.07);border-radius:3px}
.doc .info-block p{margin:0}
.doc .info-block p+p{margin-top:.35em}
.doc table{margin-top:1.2em;width:100%;border-collapse:collapse;font-size:.96rem;line-height:1.45}
.doc th{text-align:left;font-family:var(--display);font-stretch:86%;font-weight:700;padding:.6rem .8rem .6rem 0;border-bottom:2px solid var(--ink)}
.doc td{padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.doc .img-row{margin-top:1.4em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.doc .img-row .ph{aspect-ratio:3/4;box-shadow:0 22px 40px -24px rgba(12,18,48,.6)}
.page-foot{padding-bottom:0}
.page-next{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem}
.page-foot .ecrire-mail a{font-size:clamp(1.3rem,3.6vw,3rem)}
.mur{columns:3;column-gap:clamp(22px,3.4vw,56px);max-width:1180px}
.mur li{break-inside:avoid;margin-bottom:clamp(30px,4.4vw,64px)}
.mur-t{display:block;text-decoration:none}
.mur-t img{width:100%;border-radius:2px;box-shadow:0 34px 60px -30px #000,0 0 0 1px rgba(243,244,250,.06);transition:transform .8s var(--out)}
.mur-t:hover img,.mur-t:focus-visible img{transform:scale(1.025) rotate(-.6deg)}
.mur-t span{display:block;margin-top:.7rem;font-family:var(--display);font-stretch:86%;font-weight:600;font-size:.95rem;color:var(--soft);transition:color .3s}
.mur-t:hover span{color:var(--jaune)}
.page-mur .guide{right:4%}
@media (max-width:1100px){.mur{columns:2}}
@media (max-width:859px){
  .page-head{padding-top:calc(var(--nav-h) + 44px)}
  .doc .img-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc table{font-size:.9rem}
  .mur{columns:2;column-gap:16px}
  .mur li{margin-bottom:26px}
}

/* ── the shelf: volumes fly in, turn on hover, and one opens into a spread ── */
.shelf-zone{position:relative;z-index:2;max-width:1560px;margin-inline:auto;--bh:clamp(250px,52vh,420px);--bw:calc(var(--bh)*.66);--bhS:clamp(280px,58vh,440px);--bwS:calc(var(--bhS)*.66)}
.shelf-now{padding-inline:var(--gut);min-height:1.7em;margin-bottom:6px;font-family:var(--display);font-stretch:84%;font-size:1.06rem;line-height:1.3;display:flex;flex-wrap:wrap;gap:.2em .9em;align-items:baseline}
.shelf-now b{font-weight:740}
.shelf-now span{font-weight:520;font-size:.94rem;color:var(--soft)}
.rive.shelf{display:flex;align-items:flex-start;justify-content:flex-start;gap:0;grid-template-columns:none;perspective:2000px;perspective-origin:50% 42%;padding-top:30px;padding-bottom:3rem;max-width:none;transition:opacity .45s var(--out)}
.rive.shelf::after{content:"";position:absolute;left:var(--gut);right:var(--gut);top:calc(30px + var(--bh));height:3px;background:var(--night);border-radius:2px}
.shelf .rive-b{--th:calc(var(--p)*1.55);position:relative;flex:0 0 auto;width:calc(var(--th) + 3px);max-width:none;display:block;translate:none;text-align:center;transition:width .75s cubic-bezier(.22,.9,.24,1)}
.shelf .rive-b:hover,.shelf .rive-b:focus-visible,.shelf .rive-b.is-feat{width:calc(var(--bw) + 30px)}
.shelf .rive-b:focus-visible{outline:0}
.vol-w{display:block;position:relative;height:var(--bh)}
.vol-w::after{content:"";position:absolute;left:50%;bottom:-9px;width:calc(var(--th) + 22px);height:16px;translate:-50% 0;background:radial-gradient(ellipse at center,rgba(40,14,0,.5),transparent 70%);transition:width .75s var(--out)}
.rive-b:hover .vol-w::after,.rive-b:focus-visible .vol-w::after,.rive-b.is-feat .vol-w::after{width:calc(var(--bw) + 26px)}
.vol{position:absolute;left:50%;bottom:0;width:var(--bw);height:var(--bh);margin-left:calc(var(--bw)/-2);transform-style:preserve-3d;transform:rotateY(90deg);transition:transform .95s cubic-bezier(.22,.9,.24,1)}
.rive-b:hover .vol,.rive-b:focus-visible .vol,.rive-b.is-feat .vol{transform:rotateY(10deg)}
/* neighbours lean out of the way of the book being turned */
.shelf .rive-b:has(+ .rive-b:hover):not(.is-feat) .vol{transform:rotateY(76deg)}
.shelf .rive-b:hover + .rive-b:not(.is-feat) .vol{transform:rotateY(104deg)}
.vol>span{position:absolute;display:block}
.vol-cover{inset:0;transform:translateZ(calc(var(--th)/2));background:var(--c);border-radius:1px 3px 3px 1px;overflow:hidden}
.shelf .vol-cover img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;box-shadow:none;transform:none!important;border-radius:0}
.vol-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--th)/2));background:var(--c)}
.vol-spine{top:0;left:calc(50% - var(--th)/2);width:var(--th);height:100%;transform:rotateY(-90deg) translateZ(calc(var(--bw)/2));background:var(--c);color:var(--k);display:flex!important;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0 12px;overflow:hidden;box-shadow:inset 3px 0 5px -3px rgba(0,0,0,.35),inset -3px 0 5px -3px rgba(0,0,0,.35)}
.vol-title,.vol-auth{writing-mode:vertical-rl;rotate:180deg;white-space:nowrap;font-family:var(--display);font-stretch:80%;line-height:1}
.vol-title{font-weight:720;font-size:clamp(.78rem,calc(var(--bh)*.056),1.15rem);letter-spacing:.012em;padding-block:2px}
.vol-auth{font-weight:520;font-size:.72rem;opacity:.82;letter-spacing:.03em}
.vol-pages{top:2px;bottom:2px;left:calc(50% - var(--th)/2);width:var(--th);transform:rotateY(90deg) translateZ(calc(var(--bw)/2 - 2px));background:repeating-linear-gradient(90deg,#F4EFE3 0 1px,#DDD5C3 1px 2px)}
.shelf .rive-y{display:block;margin-top:16px;font-size:.8rem;text-align:center}
.shelf .rive-t{display:none}
/* arrival: one after the other, spinning into place */
@keyframes fly{from{transform:translateX(58vw) rotateY(-250deg);opacity:0}35%{opacity:1}}
.js .shelf:not(.arrive):not(.here) .vol,.js .shelf:not(.arrive):not(.here) .rive-y{opacity:0}
.shelf.arrive .vol{animation:fly 1.3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*95ms)}
.shelf .rive-y{transition:opacity .6s var(--out) .9s}

/* opened state: the shelf steps back, the chosen book takes the stage and opens */
.js .shelf-zone .fiches{margin-top:0;padding-top:30px}
.js .livres.is-open .rive.shelf{position:absolute;left:0;right:0;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s var(--out),visibility 0s .45s}
.js .livres.is-open .shelf-now{visibility:hidden}
.js .fiche{grid-template-columns:calc(var(--bwS)*2) minmax(0,1fr);gap:clamp(28px,5vw,84px);align-items:start;min-height:calc(var(--bhS) + 30px)}
.js .fiche+.fiche{margin-top:0}
.js .fiche .fiche-cover{order:-1;width:var(--bwS);max-width:none;margin:0 0 0 var(--bwS);rotate:none;perspective:1900px;transform-origin:50% 50%;transition:transform .85s cubic-bezier(.22,.9,.24,1)}
.ouvert{display:block;position:relative;width:100%;aspect-ratio:66/100;transform-style:preserve-3d}
.js .ouvert{height:var(--bhS);aspect-ratio:auto}
.ouvert>span{position:absolute;inset:0;display:block}
.ouvert-page{background:var(--givre);color:var(--night);border-radius:1px 3px 3px 1px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:10%;box-shadow:0 34px 54px -30px rgba(40,14,0,.85),inset 16px 0 22px -14px rgba(12,18,48,.3)}
.ouvert-page .ouvert-mini{width:52%;height:auto;box-shadow:0 14px 24px -14px rgba(12,18,48,.6);border-radius:1px}
.ouvert-page em{font-family:var(--display);font-stretch:86%;font-style:normal;font-weight:600;font-size:.8rem;text-align:center;color:#3B446B}
.ouvert-flap{transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.33,.02,.2,1)}
.is-spread .ouvert-flap{transform:rotateY(-180deg)}
.ouvert-flap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;border-radius:1px 3px 3px 1px;box-shadow:0 24px 40px -22px rgba(40,14,0,.8)}
.ouvert-verso{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;background:var(--givre);color:var(--night);border-radius:3px 1px 1px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.7rem;padding:12%;box-shadow:inset -16px 0 22px -14px rgba(12,18,48,.3)}
.ouvert-verso i{font-size:.86rem;color:#3B446B}
.ouvert-verso b{font-family:var(--display);font-stretch:78%;font-weight:760;font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.02}
.js .fiche-text{--ink:#F3F4FA;--soft:#B5BEE4;--ground:var(--night);--line:rgba(243,244,250,.22);position:relative;background:var(--night);color:var(--ink);padding:clamp(22px,2.8vw,40px);border-radius:4px;box-shadow:0 40px 70px -40px rgba(12,18,48,.9);opacity:0;transform:translateX(26px);transition:opacity .55s var(--out),transform .8s var(--out)}
.js .is-spread .fiche-text{opacity:1;transform:none;transition-delay:.75s}
.js .fiche-text h3{font-size:clamp(1.7rem,3vw,2.8rem);max-width:none;padding-right:2.6rem}
.js .fiche-text .fiche-prize{background:var(--orange);color:var(--night)}
.js .fiche-text .fiche-body{max-width:60ch;font-size:.98rem;line-height:1.6}
.tome-close{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:.5em;padding:.5em .7em;font-family:var(--display);font-stretch:86%;font-weight:650;font-size:.88rem;color:var(--ink);border-radius:999px;background:rgba(243,244,250,.1);transition:background-color .3s,color .3s}
.tome-close:hover,.tome-close:focus-visible{background:var(--jaune);color:var(--night)}
.tome-close svg{width:16px;height:16px}

@media (max-width:859px){
  .shelf-zone{--bh:230px;--bhS:230px}
  .rive.shelf{overflow-x:auto;scrollbar-width:none;padding-bottom:2.6rem}
  .rive.shelf::-webkit-scrollbar{display:none}
  .shelf .rive-b{--th:calc(var(--p)*1.15);flex:0 0 auto;max-width:none;scroll-snap-align:center}
  .rive.shelf::after{width:max(100%,560px);right:auto}
  .js .fiche{grid-template-columns:minmax(0,1fr);gap:26px;min-height:0}
  .js .fiche .fiche-cover{margin:0 0 0 50%}
  .tome-close span{display:none}
}