.noir{--bg:#0b1117;--ink:#e8e4da;--muted:#8d98a3;--line:#24303b;--accent:#c9a24a;background:#0b1117;color:#e8e4da}
.noir .nav{background:rgba(11,17,23,.6);backdrop-filter:blur(8px)}
.noir .brand,.noir nav a{color:#e8e4da}
.t-nav{display:flex}
@media (max-width:760px){.noir nav.t-nav{position:static;max-height:none;flex-direction:row;background:none;padding:0}.noir nav.t-nav a{border:0;padding:0;font-size:.9rem}}
.noir .btn{background:#e8e4da;color:#0b1117}
.noir .btn.ghost{background:transparent;color:#e8e4da;box-shadow:inset 0 0 0 1px #e8e4da}
.noir .btn:hover{background:var(--accent);color:#0b1117}
.noir .eyebrow{color:#c9a24a}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.t-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:6rem;padding-bottom:9rem;
 background:radial-gradient(90% 60% at 70% 20%,#1d2b38 0,transparent 70%),linear-gradient(180deg,#0e1620,#0b1117 60%,#0a1419)}
.t-hero-in{position:relative;z-index:2;display:grid;gap:3rem;align-items:center;width:100%}
.t-cover{width:min(300px,62vw);margin:auto;box-shadow:0 40px 80px -20px #000,0 0 80px rgba(201,162,74,.12);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-10px)}}
.t-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);margin-bottom:1.5rem}
.t-lead{font-size:clamp(1.05rem,2vw,1.3rem);color:#b9c1c8;max-width:44ch}
.t-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.t-actions.center{justify-content:center}
@media (min-width:900px){.t-hero-in{grid-template-columns:360px 1fr}.t-cover{width:100%}}
.fog{position:absolute;inset:-20% -50%;pointer-events:none;z-index:1;opacity:.5;
 background:radial-gradient(40% 25% at 30% 60%,rgba(200,210,220,.10),transparent 70%),radial-gradient(35% 20% at 70% 75%,rgba(200,210,220,.08),transparent 70%),radial-gradient(30% 18% at 50% 40%,rgba(200,210,220,.06),transparent 70%);
 animation:drift 40s linear infinite alternate}
.fog.f2{animation-duration:60s;animation-direction:alternate-reverse;opacity:.4;transform:scaleX(-1)}
@keyframes drift{from{translate:-8% 0}to{translate:8% -3%}}
.waves{position:absolute;left:0;bottom:0;width:200%;height:140px;z-index:1}
.waves .w1{fill:rgba(40,60,75,.35);animation:wave 16s ease-in-out infinite alternate}
.waves .w2{fill:#0b1117;animation:wave 22s ease-in-out infinite alternate-reverse}
@keyframes wave{to{transform:translateX(-25%)}}
.nights{text-align:center}
.nights h2{font-size:clamp(3rem,10vw,7rem)}
.moons{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;max-width:900px;margin:3.5rem auto;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.moon{display:block;width:clamp(26px,7vw,56px);aspect-ratio:1;margin:0 auto .8rem;border-radius:50%;background:#1a242e;box-shadow:inset 0 0 0 1px #2c3a46;transition:background .8s,box-shadow .8s}
.moons li.lit .moon{background:radial-gradient(circle at 35% 35%,#fff7e0,#d8c48f 60%,#9c8650);box-shadow:0 0 30px rgba(216,196,143,.45)}
.moons li.lit{color:#e8e4da}
@media (max-width:600px){.moons li{font-size:0}.moons li:first-child,.moons li:last-child{font-size:.62rem}}
.t-quote{font:400 clamp(1.4rem,3.4vw,2.3rem)/1.3 var(--serif);max-width:30ch;margin:2rem auto 0;font-style:italic}
.t-src{color:var(--muted);font-size:.85rem;margin-top:1rem}
.t-cta{text-align:center;background:linear-gradient(180deg,#0b1117,#121d27)}
.noir footer{border-color:#24303b}.noir footer .brand{color:#e8e4da}
.noir .reader{background:#10181f;color:#e8e4da}.noir .pages{color:#d6d1c6}.noir .close{color:#e8e4da}
@media (prefers-reduced-motion:reduce){.fog,.waves path,.t-cover{animation:none!important}}

/* bouton ambiance (dans la rangée de boutons ; fichier : audio/ambiance.mp3) */
.sound{display:inline-flex;align-items:center;gap:.65rem;padding:.3rem 1.2rem .3rem .3rem;border:0;border-radius:999px;background:#f3ead2;color:#0b1117;
 font:600 .95rem var(--sans);cursor:pointer;min-height:52px;box-shadow:0 0 0 1px rgba(201,162,74,.6);transition:background .25s}
.snd-ic{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:#c9a24a;display:grid;place-items:center;color:#0b1117}
.snd-ic svg{width:24px;height:24px}
.snd-ic::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(201,162,74,.6);animation:ring 2.2s ease-out infinite}
@keyframes ring{to{box-shadow:0 0 0 14px rgba(201,162,74,0)}}
.bars{display:none;gap:3px;align-items:flex-end;height:20px}
.bars i{width:3px;height:6px;background:currentColor;border-radius:2px;animation:eq .9s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:-.3s}.bars i:nth-child(3){animation-delay:-.6s}.bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:5px}50%{height:20px}}
.sound[aria-pressed=true] .spk{display:none}.sound[aria-pressed=true] .bars{display:flex}
.sound[aria-pressed=true] .snd-ic::after{animation:none}
.sound:hover{background:#fff}
.sound:focus-visible{outline:3px solid #fff;outline-offset:3px}
.t-actions{align-items:center}
@media (max-width:480px){.t-actions .btn,.t-actions .sound{flex:1 1 100%;justify-content:center;min-height:56px}}
@media (prefers-reduced-motion:reduce){.snd-ic::after,.bars i{animation:none!important}.bars i{height:14px}}
.noir .player{border-color:#3a4652;margin:1.6rem 0 0;background:rgba(255,255,255,.03)}
.noir .pl-btn{background:#c9a24a}.noir .pl-ico{border-left-color:#0b1117}.noir .playing .pl-ico{background:linear-gradient(90deg,#0b1117 0 4px,transparent 4px 8px,#0b1117 8px)}
.noir .pl-bar{background:#2a3642}.noir .pl-fill{background:#c9a24a}.noir .pl-time{color:#8d98a3}

.t-back{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:#e8e4da;font:500 .92rem var(--sans);padding:.55rem 1rem;border-radius:999px;box-shadow:inset 0 0 0 1px #3a4652;transition:background .2s,transform .2s}
.t-back:hover{background:rgba(255,255,255,.08);transform:translateX(-3px)}
.noir .nav{position:fixed}
.sound-fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:30;display:flex;align-items:center;gap:.7rem;border:0;cursor:pointer;
 padding:.35rem 1.3rem .35rem .35rem;border-radius:999px;background:#f3ead2;color:#0b1117;font:600 .95rem var(--sans);box-shadow:0 14px 34px -10px rgba(0,0,0,.8);transition:padding .35s,gap .35s}
.sound-fab .snd-ic{width:56px;height:56px}
.sound-fab .snd-ic svg{width:28px;height:28px}
.sound-fab .fab-lbl{white-space:nowrap;overflow:hidden;max-width:200px;transition:max-width .35s,opacity .3s}
.sound-fab.mini{padding:.35rem;gap:0}.sound-fab.mini .fab-lbl{max-width:0;opacity:0}
.sound-fab[aria-pressed=true] .spk{display:none}.sound-fab[aria-pressed=true] .bars{display:flex}.sound-fab[aria-pressed=true] .snd-ic::after{animation:none}
.sound-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.noir .player{border-color:#c9a24a}
.sound-fab{display:none!important}
@media (max-width:759px){
 .noir .nav{padding:.5rem 1rem}
 .t-back{min-height:44px;font-size:.88rem}
 .t-hero{padding-top:5rem;padding-bottom:7rem}
 .t-hero h1{font-size:2.4rem}
 .t-cover{width:min(56vw,240px)}
 .noir .player{width:100%}
 .moons{gap:.25rem}
 .t-quote{font-size:1.35rem}
}
.noir .btn.buy{background:#e8a33d;color:#1b1406}.noir .btn.buy:hover{background:#f2b452}
/* ===== L'histoire + premières lignes (visibles sans clic) ===== */
.t-story{padding-top:clamp(3rem,7vw,6rem)}
.t-story-in{display:grid;gap:clamp(2rem,5vw,4rem);max-width:1180px;margin:0 auto;align-items:start}
.t-story h2{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1.5rem}
.t-resume p{color:#cfd6dc;line-height:1.7;margin-bottom:1rem;max-width:60ch;font-size:1.05rem}
.t-ex{padding:1.6rem 1.8rem;border-left:2px solid #c9a24a;background:rgba(255,255,255,.035);border-radius:0 8px 8px 0}
.t-ex .pages{color:#e8e4da}.t-ex .pages p{margin-bottom:.9em}
.t-ex-more{margin-top:1.2rem}
@media (min-width:900px){.t-story-in{grid-template-columns:1fr 1fr}}
@media (max-width:759px){.t-ex{padding:1.1rem}.t-ex-more .btn{width:100%;justify-content:center}}
video.t-cover{display:block;height:auto;aspect-ratio:432/688;object-fit:cover;background:#0b1117}