:root{--paper:#f7f3eb;--paper-deep:#ece4d8;--ink:#211e1a;--muted:#726b61;--accent:#9b6747;--line:#d8cdbd;--serif:Georgia,"Times New Roman",serif;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip{position:fixed;z-index:100;top:-5rem;left:1rem;padding:.8rem 1rem;background:var(--ink);color:#fff}
.skip:focus{top:1rem}
.reading-progress{position:fixed;inset:0 0 auto;z-index:50;height:3px;background:#d8cdbd88}
.reading-progress span{display:block;width:0;height:100%;background:var(--accent);transform-origin:left}
.site-header{position:fixed;z-index:40;top:3px;left:0;right:0;min-height:72px;padding:1.1rem 4.5vw;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:#f7f3ebd9;backdrop-filter:blur(18px);border-bottom:1px solid #a990791a}
.brand{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;text-decoration:none}
.brand span{color:var(--accent);padding:0 .4rem}
.site-header nav{display:flex;gap:2rem}
.site-header nav a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.site-header nav a:hover{text-decoration:underline;text-underline-offset:6px}
.story-section{background:var(--paper);border-bottom:1px solid var(--line)}
.story-section .stage{position:relative;min-height:100svh;padding:8rem 5vw 7rem;overflow:hidden}
.film-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--paper-deep)}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover}
.film-frame .still{display:none;width:100%;height:100%;object-fit:cover}
.paper-wash,.film-tint,.hero-number,.stage-progress,.stage-footer{display:none}
.story-kicker,.eyebrow{font-size:.66rem;letter-spacing:.19em;line-height:1.5;text-transform:uppercase;color:var(--accent);font-weight:700}
.story-kicker{margin:2.2rem 0}
.story-kicker span{padding:0 .6rem}
.beat{max-width:720px;margin:2rem 0 3rem}
.beat h1,.beat h2{font:400 clamp(3rem,7.5vw,8rem)/.94 var(--serif);letter-spacing:-.065em;margin:.5rem 0 1.2rem}
.beat em,.next em{font-style:italic;font-weight:400}
.beat p:last-child{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.55;max-width:430px}
.chapter-bridge{min-height:58svh;padding:10vh 5vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--paper-deep)}
.chapter-bridge span{font-size:.65rem;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);font-weight:700}
.chapter-bridge p{font:400 clamp(2.6rem,5vw,5.8rem)/1.08 var(--serif);letter-spacing:-.045em;margin:1.4rem 0 2rem}
.chapter-bridge a{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;text-underline-offset:6px}
.chapter-bridge-dark{background:#2a2723;color:#f8f1e6}
.chapter-bridge-dark span{color:#dbb99c}
.next{min-height:90svh;padding:15vh 7vw;display:flex;flex-direction:column;justify-content:center;background:#f5f0e7}
.next h2{font:400 clamp(3.5rem,8vw,9rem)/.98 var(--serif);letter-spacing:-.06em;margin:1rem 0 2rem}
.next>p:not(.eyebrow){max-width:680px;font-size:1.15rem;line-height:1.7;color:var(--muted)}
.next-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.next-actions a{display:inline-block;padding:.9rem 1.2rem;border:1px solid var(--ink);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.next-actions a:hover{background:var(--ink);color:var(--paper)}
footer{padding:2rem 5vw;display:flex;justify-content:space-between;gap:2rem;border-top:1px solid var(--line);font-size:.7rem;color:var(--muted);letter-spacing:.04em}

html.is-enhanced .story-section{height:540svh}
html.is-enhanced .story-section .stage{position:sticky;top:0;height:100svh;min-height:0;padding:0;isolation:isolate}
html.is-enhanced .film-frame{position:absolute;inset:0;aspect-ratio:auto;width:auto;height:auto;background:var(--paper-deep)}
html.is-enhanced .film-frame video{width:100%;height:100%;object-fit:cover;object-position:center}
html.is-enhanced .samurai .film-frame video{object-position:60% center}
html.is-enhanced .paper-wash{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--paper) 0%,#f7f3ebef 17%,#f7f3eb82 39%,transparent 65%);pointer-events:none}
html.is-enhanced .film-tint{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#f7f3ebdc,transparent 50%,#f7f3eb60);pointer-events:none}
html.is-enhanced .hero-number{display:block;position:absolute;right:4vw;bottom:-7vh;z-index:2;font:400 clamp(11rem,25vw,34rem)/1 var(--serif);letter-spacing:-.1em;color:#6c4d3316;pointer-events:none}
html.is-enhanced .story-kicker{position:absolute;z-index:3;top:100px;left:5vw;margin:0;color:#664f3c}
html.is-enhanced .beat{position:absolute;z-index:3;top:50%;left:5vw;width:min(44vw,700px);max-width:none;margin:0;opacity:0;pointer-events:none;transform:translate3d(-70px,-40%,0);filter:blur(8px);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.7,.2,1),filter .65s ease}
html.is-enhanced .beat-right{left:auto;right:5vw;text-align:right;transform:translate3d(70px,-40%,0)}
html.is-enhanced .beat-right p:last-child{margin-left:auto}
html.is-enhanced .samurai .beat-right{left:5vw;right:auto;width:min(40vw,620px);text-align:left}
html.is-enhanced .samurai .beat-right p:last-child{margin-left:0}
html.is-enhanced .beat-zoom{left:50%;width:min(70vw,1000px);text-align:center;transform:translate3d(-50%,-34%,0) scale(.82)}
html.is-enhanced .beat-zoom p:last-child{margin-left:auto;margin-right:auto}
html.is-enhanced .samurai .beat-zoom{left:5vw;top:60%;width:min(42vw,640px);text-align:left;transform:translate3d(0,-34%,0) scale(.82);transform-origin:left center}
html.is-enhanced .samurai .beat-zoom p:last-child{margin-left:0}
html.is-enhanced .beat.active{opacity:1;pointer-events:auto;filter:blur(0);transform:translate3d(0,-40%,0)}
html.is-enhanced .beat-zoom.active{transform:translate3d(-50%,-40%,0) scale(1)}
html.is-enhanced .samurai .beat-zoom.active{transform:translate3d(0,-40%,0) scale(1)}
html.is-enhanced .beat h1{font-size:clamp(4.5rem,7.3vw,9rem)}
html.is-enhanced .beat h2{font-size:clamp(4rem,6vw,8rem)}
html.is-enhanced .beat p:last-child{font-size:clamp(.95rem,1.25vw,1.15rem)}
html.is-enhanced .stage-footer{display:flex;position:absolute;z-index:4;left:5vw;right:5vw;bottom:4vh;justify-content:space-between;gap:2rem;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:#5f5246}
html.is-enhanced .stage-progress{display:block;position:absolute;z-index:4;left:5vw;right:5vw;bottom:3vh;height:1px;background:#8e7d6b66}
html.is-enhanced .stage-progress i{display:block;width:0;height:100%;background:var(--accent)}
html.is-enhanced .chapter-bridge{min-height:70svh}
html.is-enhanced .samurai{height:540svh}

@media(max-width:900px){
  .site-header{padding:1rem 5vw;min-height:62px}.site-header nav{gap:1rem}
  html.is-enhanced .story-kicker{top:80px}
  html.is-enhanced .film-frame{inset:9vh 0 21vh}
  html.is-enhanced .film-frame video,html.is-enhanced .samurai .film-frame video{object-fit:contain;object-position:center}
  html.is-enhanced .paper-wash,html.is-enhanced .film-tint{background:linear-gradient(180deg,var(--paper) 0%,transparent 23%,transparent 62%,var(--paper) 80%)}
  html.is-enhanced .beat,html.is-enhanced .beat-right,html.is-enhanced .beat-zoom{top:auto;left:5vw;right:5vw;bottom:9vh;width:auto;text-align:left;transform:translate3d(0,35px,0) scale(1)}
  html.is-enhanced .samurai .beat-right{top:auto;left:5vw;right:5vw;bottom:9vh;width:auto;text-align:left;transform:translate3d(0,35px,0)}
  html.is-enhanced .samurai .beat-zoom{top:auto;left:5vw;right:5vw;bottom:9vh;width:auto;transform:translate3d(0,35px,0) scale(1)}
  html.is-enhanced .beat-right p:last-child,html.is-enhanced .beat-zoom p:last-child{margin-left:0;margin-right:0}
  html.is-enhanced .beat.active,html.is-enhanced .beat-zoom.active{transform:translate3d(0,0,0) scale(1)}
  html.is-enhanced .samurai .beat-zoom.active{transform:translate3d(0,0,0) scale(1)}
  html.is-enhanced .beat h1,html.is-enhanced .beat h2{font-size:clamp(3.4rem,10vw,6.5rem);margin-bottom:.6rem}
  html.is-enhanced .beat p:last-child{max-width:460px;line-height:1.4;margin-top:.4rem}
  html.is-enhanced .stage-footer{bottom:3vh;font-size:.57rem}
  html.is-enhanced .stage-progress{bottom:2vh}
  html.is-enhanced .hero-number{font-size:50vw;bottom:18vh}
}
@media(max-width:600px){
  .site-header nav a:first-child{display:none}
  .brand{font-size:.57rem}.site-header nav a{font-size:.56rem}
  html.is-enhanced .story-section{height:470svh}
  html.is-enhanced .samurai{height:470svh}
  html.is-enhanced .story-kicker{font-size:.55rem}
  html.is-enhanced .film-frame{inset:14vh 0 26vh}
  html.is-enhanced .beat{bottom:8vh}
  html.is-enhanced .beat h1,html.is-enhanced .beat h2{font-size:clamp(2.9rem,13vw,4.8rem)}
  html.is-enhanced .beat p:last-child{font-size:.84rem}
  html.is-enhanced .stage-footer span:first-child{max-width:210px}
  .chapter-bridge{min-height:48svh;padding:8vh 6vw}
  .chapter-bridge p{font-size:clamp(2.1rem,9vw,3.4rem)}
  .next{padding:12vh 6vw}.next h2{font-size:clamp(3rem,12vw,5.5rem)}
  footer{display:block}footer span{display:block;margin-bottom:.6rem}
}
@media(max-height:620px) and (min-width:901px){
  html.is-enhanced .beat h1,html.is-enhanced .beat h2{font-size:clamp(3rem,5vw,6rem)}
  html.is-enhanced .story-kicker{top:82px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.beat{transition:none!important}.samurai .film-frame video{display:none}.samurai .film-frame .still{display:block}}

/* Ouverture originale : une perspective japonaise révélée par le défilement. */
.city-hero{background:#1c2835;color:#fff}
.city-stage{position:relative;height:100svh;overflow:hidden;isolation:isolate}
.city-world{position:absolute;inset:0;overflow:hidden;perspective:1200px;background:#253246}
.city-day,.city-night{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.city-day{transform:scale(1.05)}
.city-night{opacity:1}
.city-panel{display:none}
.city-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#10192388,transparent 26%,transparent 50%,#101923bb);pointer-events:none}
.city-heading,.city-bottom{position:absolute;z-index:3;left:5vw;right:5vw;display:flex;justify-content:space-between;gap:2rem;font-size:.67rem;letter-spacing:.15em;text-transform:uppercase}
.city-heading{top:105px}.city-bottom{bottom:4.5vh}
.city-title{position:absolute;z-index:3;left:7vw;bottom:16vh;max-width:760px;text-shadow:0 2px 28px #09132188}
.city-title .eyebrow{color:#f3bc83}
.city-title h1{font:400 clamp(5rem,10vw,11rem)/.9 var(--serif);letter-spacing:-.065em;margin:.8rem 0 1.4rem}
.city-title h1 em{font-weight:400}
.city-title>p:last-child{max-width:430px;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.55}
.city-progress{position:absolute;z-index:4;left:5vw;right:5vw;bottom:3.5vh;height:1px;background:#ffffff66}
.city-progress i{display:block;width:0;height:100%;background:#f3bc83}
html.is-enhanced .city-hero{height:680svh}
html.is-enhanced .city-stage{position:sticky;top:0}
html.is-enhanced .city-day{transform:scale(1.2);will-change:transform}
html.is-enhanced .city-night{opacity:0;will-change:opacity}
html.is-enhanced .city-panel{display:block;position:absolute;z-index:2;top:0;bottom:0;width:50.2%;background-image:url('assets/japon-jour.webp');background-size:200% 100%;background-repeat:no-repeat;box-shadow:0 0 70px #15233266;will-change:transform,opacity}
html.is-enhanced .city-panel-left{left:0;background-position:left center;transform-origin:left center}
html.is-enhanced .city-panel-right{right:0;background-position:right center;transform-origin:right center}
html.is-enhanced .city-title{opacity:0;transform:translate3d(0,55px,0) scale(.96);will-change:transform,opacity}
html.is-enhanced .chapter-bridge-first{background:#e9e3d7}
@media(max-width:900px){
  .city-heading{top:82px}
  .city-title{left:6vw;right:6vw;bottom:16vh}
  .city-title h1{font-size:clamp(4rem,11vw,7rem)}
  .city-day,.city-night{object-position:50% center}
}
@media(max-width:600px){
  html.is-enhanced .city-hero{height:560svh}
  .city-heading{font-size:.52rem}.city-heading span:last-child{display:none}
  .city-title{bottom:16vh}.city-title h1{font-size:clamp(3.9rem,15vw,6rem)}
  .city-title>p:last-child{font-size:.9rem;max-width:320px}
  .city-bottom{font-size:.55rem;bottom:4vh}.city-bottom span:nth-child(2){display:none}
  .city-progress{bottom:3vh}
}

html.is-enhanced .city-day,html.is-enhanced .city-night{will-change:transform,opacity;transform-origin:50% 58%}
html.is-enhanced .city-panel-left{box-shadow:35px 0 80px #101b2b88}
html.is-enhanced .city-panel-right{box-shadow:-35px 0 80px #101b2b88}

/* Façades en avant-plan : elles avancent plus vite que la rue. */
.city-depth{display:none}
html.is-enhanced .city-depth{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 58%;will-change:transform}
.city-depth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.city-depth .depth-night{opacity:0}
.city-depth-left{clip-path:polygon(0 0,28% 0,33% 19%,32% 34%,37% 45%,32% 74%,0 88%);mask-image:linear-gradient(to right,#000 0%,#000 22%,transparent 39%)}
.city-depth-right{clip-path:polygon(72% 0,100% 0,100% 88%,68% 74%,63% 45%,68% 34%,67% 19%);mask-image:linear-gradient(to left,#000 0%,#000 22%,transparent 39%)}

/* Détourage transparent sur fond reconstruit : aucun mur ne se répète. */
.city-depth-left{clip-path:inset(0 50% 0 0);mask-image:none}
.city-depth-right{clip-path:inset(0 0 0 50%);mask-image:none}
html.is-enhanced .city-depth{transform-origin:50% 58%}

html.is-enhanced .city-stage{background:#17212b}
html.is-enhanced .city-world{will-change:transform}

/* La scène se soulève et dévoile le titre dans un bandeau sous l’image. */
html.is-enhanced .city-hero{height:780svh}
html.is-enhanced .city-title{left:6vw;right:6vw;bottom:7vh;max-width:none;text-align:center;text-shadow:none}
html.is-enhanced .city-title h1{font-size:clamp(2.7rem,5vw,5.6rem);line-height:.95;margin:.3rem 0 .5rem}
html.is-enhanced .city-title h1 br{display:none}
html.is-enhanced .city-title>p:last-child{margin:.4rem auto;font-size:.85rem}
html.is-enhanced .city-title .eyebrow{margin:.2rem}
@media(max-width:600px){html.is-enhanced .city-hero{height:650svh}html.is-enhanced .city-title{bottom:7vh}html.is-enhanced .city-title h1{font-size:clamp(2.4rem,9vw,3.7rem)}html.is-enhanced .city-title>p:last-child{font-size:.75rem}}

/* Traversée nocturne et transition vers le personnage. */
.night-journey{background:#17212b;color:#f8f1e6}
.night-stage{position:relative;height:100svh;overflow:hidden}
.night-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.night-shade{position:absolute;inset:0;background:linear-gradient(180deg,#10172322 20%,#101723aa 100%)}
.night-copy{position:absolute;bottom:14vh;left:7vw;right:7vw;text-shadow:0 2px 25px #101723;text-align:center}
.night-copy span{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:#e3bc98}
.night-copy p{font:400 clamp(2.8rem,6vw,6.5rem)/1 var(--serif);letter-spacing:-.05em;margin:1rem 0 1.5rem}
.night-copy a{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;text-underline-offset:6px}
html.is-enhanced .night-journey{height:420svh}
html.is-enhanced .night-stage{position:sticky;top:0}
html.is-enhanced .night-image{transform-origin:50% 58%;will-change:transform}
html.is-enhanced .night-copy{opacity:0;will-change:opacity,transform}
@media(max-width:600px){html.is-enhanced .night-journey{height:360svh}.night-copy{bottom:13vh}.night-copy p{font-size:clamp(2.4rem,10vw,4rem)}}

.night-to-paper{position:absolute;inset:0;background:#f7f3eb;opacity:0;pointer-events:none;z-index:2}
html.is-enhanced .night-image{transform:scale(1.24);transform-origin:50% 58%}
.night-copy{z-index:3}

/* Un seul écran pour l'ouverture, le travelling et le samouraï. */
.hero-night-film,.hero-samurai-film{display:block;width:100%;height:auto}
html.is-enhanced .city-hero{height:1450svh}
html.is-enhanced .hero-night-film,html.is-enhanced .hero-samurai-film{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0;pointer-events:none;object-fit:cover}
html.is-enhanced .hero-night-film{object-position:50% 58%;transform:scale(1.24)}
html.is-enhanced .hero-samurai-film{z-index:3;background:#f7f3eb;object-fit:contain}
html.is-enhanced .city-heading,html.is-enhanced .city-title,html.is-enhanced .city-bottom,html.is-enhanced .city-progress{z-index:4}
.hero-anchor{display:block;height:0}
@media(max-width:600px){html.is-enhanced .city-hero{height:1200svh}}

@media(prefers-reduced-motion:reduce){.city-stage{height:auto;overflow:visible}.city-world{position:relative;height:100svh}.hero-night-film,.hero-samurai-film{position:relative;width:100%;height:auto}.city-title{position:absolute;top:55svh;bottom:auto}.city-heading,.city-bottom,.city-progress{display:none}}

html.is-enhanced .hero-night-film{transform-origin:50% 58%;object-position:center}

.hero-sword{display:none}
html.is-enhanced .hero-sword{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;opacity:0;pointer-events:none}

/* Calligraphie en caractères japonais, sur papier éclairé. */
html.is-enhanced .hero-sword{background:radial-gradient(ellipse at 50% 44%,#fff8e5 0%,#f3e6c9 55%,#e4d0ac 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem}
.hero-sword span{font-family:"Yu Kyokasho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;writing-mode:vertical-rl;color:#342d25;font-size:clamp(4rem,10vh,8rem);line-height:1.2;letter-spacing:.14em;text-shadow:1px 2px 2px #6d543b55}
.hero-sword small{font-size:.59rem;letter-spacing:.3em;color:#8e725a}

/* Images et films sans voile sur leurs côtés. */
html.is-enhanced .paper-wash,html.is-enhanced .film-tint{display:none}
html.is-enhanced .city-panel-left,html.is-enhanced .city-panel-right{box-shadow:none}

/* Responsive correction 2026-10-29: shared cover projection, no stretched panels. */
html.is-enhanced .city-panel{background:none;overflow:hidden;perspective:none}
html.is-enhanced .city-panel img{position:absolute;top:0;width:199.203187%;max-width:none;height:100%;object-fit:cover;object-position:center}
html.is-enhanced .city-panel-left img{left:0}
html.is-enhanced .city-panel-right img{right:0}
.city-day,.city-night,.city-depth img,.city-panel img,.hero-night-film{image-rendering:auto}
html.is-enhanced .hero-night-film{transform:none;object-position:50% 58%}
/* A stable viewport avoids resizing the image whenever mobile browser bars move. */
.city-stage{height:100vh;height:100svh}
.city-panel{-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media(max-width:700px){
 html.is-enhanced .city-world{perspective:none}
 html.is-enhanced .city-depth{display:none}
 html.is-enhanced .city-day,html.is-enhanced .city-night{transform-origin:50% 58%}
 html.is-enhanced .city-heading{top:max(82px,calc(env(safe-area-inset-top) + 72px))}
 .city-bottom{bottom:max(4.5svh,calc(env(safe-area-inset-bottom) + 18px))}
}
/* Keep wide compositions readable in short landscape viewports. */
@media(max-height:500px) and (orientation:landscape){
 .city-heading{top:80px;font-size:.52rem}
 html.is-enhanced .city-title{bottom:8svh}
 html.is-enhanced .city-title h1{font-size:clamp(1.6rem,5svh,2.6rem)}
 html.is-enhanced .city-title>p:last-child{font-size:.7rem;margin:.2rem auto}
 .city-bottom{font-size:.5rem}
}
@media(prefers-reduced-motion:reduce){
 .city-day{transform:none}
 .city-night,.city-depth,.city-panel{display:none!important}
 .city-stage{height:auto}
 .city-world{height:auto;overflow:visible}
 .city-day{position:relative;height:auto}
 .city-title{position:relative;top:auto;bottom:auto;left:auto;right:auto;padding:2rem 6vw;background:#17212b}
 .city-title h1{font-size:clamp(2.5rem,8vw,5rem)}
}