/* Robert Saxton — pages « univers » des livres (la navigation est dans css/nav.css).
   Chaque livre redéfinit les jetons de couleur de style-custom.css : les composants suivent. */

:root { --ink: #fff; }



.where-h { font-family: var(--serif); font-size: var(--fs-3); font-weight: 600; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; color: var(--ink); margin: 0 0 var(--s1); }

/* ---------- Pages « univers » ---------- */


.story { max-width: 40rem; }
.story p { font-size: var(--fs-4); line-height: 1.75; color: var(--text); }
.story .dropcap { float: left; font-family: var(--display); font-size: 4.4em; line-height: .82; margin: .06em .05em 0 0; color: var(--red); }

/* Tome 1 : deux époques */
.eras-sec { padding-top: var(--s6); }
.eras { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--s3); max-width: 1400px; margin: var(--s2) auto 0; padding: 0 var(--s3); }
.era { margin: 0; }
.era img { display: block; width: 100%; height: clamp(280px, 38vw, 520px); object-fit: cover; border-radius: var(--r); }
.era.past img { filter: saturate(.6) sepia(.2) brightness(.9); }
.era figcaption { padding-top: var(--s2); }
.era-l { display: block; font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; font-size: var(--fs-2); color: var(--red); }
.era strong { display: block; font-family: var(--display); font-weight: 600; font-size: var(--fs-5); color: #fff; margin: .2em 0 .3em; }
.era figcaption > span:last-child { display: block; font-size: var(--fs-3); color: var(--text); max-width: 34ch; }
.gate { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 0 var(--s1); min-height: clamp(280px, 38vw, 520px); }
.gate::before, .gate::after { content: ""; flex: 1; width: 1px; background: linear-gradient(var(--line), var(--red), var(--line)); }
.gate-n { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.2rem); color: #fff; line-height: 1; }
.gate-l { font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; font-size: var(--fs-2); color: var(--muted); text-align: center; max-width: 9ch; }

/* Tome 2 : la saison */
.season-sec { margin-top: var(--s6); padding: var(--s5) 0; background: var(--sky-2) var(--texture, none) center / cover; position: relative; }
.season { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s4); align-items: center; }
.season figure { margin: 0; }
.season img { display: block; width: 100%; border-radius: var(--r); box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .45); }
.season-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.season-list li { counter-increment: s; position: relative; padding: var(--s2) 0 var(--s2) 3.2rem; border-bottom: 1px solid var(--line); }
.season-list li::before { content: counter(s, upper-roman); position: absolute; left: 0; top: var(--s2); font-family: var(--display); color: var(--red); font-size: var(--fs-4); }
.season-list strong { display: block; font-family: var(--display); font-weight: 600; font-size: var(--fs-4); color: var(--ink); }
.season-list span { display: block; font-size: var(--fs-3); color: var(--text); }

/* Personnages */
.chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.chars article { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: var(--s3) 0 0; }
.chars .initial { position: absolute; right: 0; top: -.05em; font-family: var(--display); font-weight: 600; font-size: 7.5rem; line-height: 1; color: var(--red); opacity: .14; pointer-events: none; }
.chars h4 { font-family: var(--display); font-weight: 600; font-size: var(--fs-4); margin-top: 0; color: var(--ink); }
.chars p { font-size: var(--fs-3); margin: 0; }


/* Lecteurs */
.readers { margin-top: var(--s6); padding-top: var(--s5); padding-bottom: var(--s5); background: var(--sky); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }


/* Le livre */
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s2); padding: .6em 0; border-bottom: 1px solid var(--line); }
.facts dt { font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; color: var(--muted); font-size: var(--fs-3); }
.facts dd { margin: 0; color: var(--text); font-size: var(--fs-3); }
.others { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s3); margin: var(--s5) 0 var(--s5); }
.next-book { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) 0; text-decoration: none; color: var(--text); }
.next-book:hover { color: var(--text); }
.next-book:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.next-book img { width: 92px; flex: none; border-radius: 2px; box-shadow: 8px 12px 24px -10px rgba(0, 0, 0, .6); }
.next-book em { display: block; font-style: normal; font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; font-size: var(--fs-2); color: var(--muted); }
.next-book strong { display: block; font-family: var(--display); font-weight: 600; font-size: var(--fs-4); color: var(--ink); margin: .2em 0 .6em; line-height: 1.25; }
.next-book.soon strong { font-family: var(--serif); font-size: var(--fs-3); font-weight: 400; color: var(--text); }
.next-book .button { font-size: var(--fs-2); }
.mini-soon { width: 92px; height: 138px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2rem; color: var(--muted); background: var(--night-2); border: 1px solid var(--line); border-radius: 2px; }

/* ---------- Thème du tome 1 : nuit étoilée, braise ---------- */
body.tome-1 {
	--night: #0a0b0f; --night-2: #060709; --sky: #12141a; --sky-2: #181b22; --line: #2b2e37;
	--ice: #d9d2c3; --snow: #efe9dc; --text: #dcd6c9; --muted: #a39d91; --ink: #fff;
	--red: #bf3a24; --red-dark: #9f2e1b;
}

/* ---------- Thème du tome 2 : neige et aurore (nuit d'hiver) ---------- */
body.tome-2 {
	--night: #0d1d21; --night-2: #08151a; --sky: #11272c; --sky-2: #163036; --line: #22383e;
	--ice: #a7ecd6; --snow: #eef4f5; --text: #d5e2e4; --muted: #9db3b8; --ink: #fff;
	--red: #26917a; --red-dark: #1d7a66;
	background: var(--night); color: var(--text);
}
body.tome-2 #footer { background: #0d1d21; }
body.tome-2 .preview-note { background: #155e4e; }


/* ---------- Écrans étroits ---------- */
@media (max-width: 899px) {
	.eras { grid-template-columns: 1fr; }
	.gate { min-height: 0; flex-direction: row; padding: var(--s1) 0; }
	.gate::before, .gate::after { height: 1px; width: auto; background: linear-gradient(90deg, var(--line), var(--red), var(--line)); }
	.gate-l { max-width: none; }
	.season { grid-template-columns: 1fr; }
	.facts div { grid-template-columns: 7.5rem 1fr; }
}
.featured-quote + .featured-quote { margin-top: var(--s4); }

/* ---------- Fondu du haut de page (remplace la rangée de sapins) ---------- */
.hero-fade { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 180px; pointer-events: none;
	background: linear-gradient(180deg, transparent, var(--night) 92%); }
#header .hero-fade { z-index: 1; }

/* ---------- Pages livres : trois parties ---------- */
.bookpage .part-num { -webkit-text-stroke-color: var(--muted); opacity: .6; }
.bookpage .part + .part { border-top: 1px solid var(--line); }
.bookpage #opening { padding-bottom: 0; }
.part.readers { margin-top: 0; padding: calc(var(--s6) + 1rem) 0 var(--s5); }
.chap.eras-sec { padding-top: var(--s5); }
.chap.season-sec { margin-top: 0; }
.chap h4 { margin: 0 0 .4em; }
.chars h4 { font-family: var(--display); font-weight: 600; font-size: var(--fs-4); color: var(--ink); }
/* L'histoire, avec les mots ojibwés en notes de marge, comme dans un livre annoté. */
.story-wrap { display: grid; grid-template-columns: minmax(0, 42rem) 15rem; gap: 0 var(--s5); align-items: start; }
.margin-notes { border-left: 1px solid var(--red); padding-left: var(--s2); }
.margin-notes dl { margin: 0; }
.margin-notes div + div { margin-top: var(--s2); }
.margin-notes dt { font-family: var(--display); font-weight: 600; font-size: var(--fs-4); color: var(--ink); }
.margin-notes dd { margin: 0; font-size: var(--fs-2); color: var(--muted); }
.margin-notes .note { font-size: var(--fs-1); }
.voice-t b { color: var(--ink); }
.bookpage .excerpt-page { margin-top: 0; }
/* Infos pratiques en fin de page livre. */
.bookpage .practical { margin-top: var(--s5); background: var(--sky-2); }
.practical .facts div { grid-template-columns: 6.5rem 1fr; gap: var(--s1); padding: .3em 0; }
.practical .facts dt, .practical .facts dd { font-size: var(--fs-2); }
.practical .others { display: block; margin: 0; }
.practical .next-book { padding: 0 0 var(--s2); gap: var(--s2); }
.practical .next-book img, .practical .mini-soon { width: 64px; }
.practical .mini-soon { height: 96px; }
.practical .next-book strong { font-size: var(--fs-3); }
@media (max-width: 899px) {
	.story-wrap { grid-template-columns: 1fr; }
	.margin-notes { margin-top: var(--s3); }
}

/* ---------- Pages livres : entrer dans l'univers ----------
   Tome 1 : la grotte, l'année qui recule de 2024 à 1524, une gerbe d'étincelles, le ciel qui tourne.
   Tome 2 : le blizzard, le givre qui gagne les coins, l'aurore en rideaux, deux yeux à la lisière.
   Le décor (js/univers.js) reste fixe derrière toute la page ; le contenu défile par-dessus sur un voile. */
.bk-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; pointer-events: none; isolation: isolate; }
.bk-backdrop > * { position: absolute; inset: 0; }
.bk-backdrop canvas { width: 100%; height: 100%; display: block; }
.bookpage .page > :not(.bk-backdrop):not(.preview-note) { position: relative; z-index: 1; }
.bookpage main { background: color-mix(in srgb, var(--night) 74%, transparent); }
.bookpage .part.readers, .fx-on .fx.bookpage .part.readers:not(.lit) { background: color-mix(in srgb, var(--sky) 55%, transparent); }
.bookpage .practical { background: color-mix(in srgb, var(--sky-2) 80%, transparent); }
.bookpage .season-sec { background: transparent; }
.u-bg { inset: -6%; background-size: cover; background-position: center; will-change: transform; }

/* L'en-tête : titre, accroche, bouton, couverture. Ils apparaissent quand l'entrée se termine. */
.u-hero { min-height: 100vh; display: flex; flex-direction: column; }
.u-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 60%), linear-gradient(0deg, color-mix(in srgb, var(--night) 74%, transparent), transparent 25%); }
.bk-hero-grid { flex: 1; display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: var(--s4); padding-bottom: 12vh; width: 100%; }
.bk-hero-grid .kicker { font-variant: small-caps; text-transform: lowercase; letter-spacing: .16em; font-size: var(--fs-2); margin: 0 0 var(--s2); }
.tome-1 .bk-hero-grid .kicker { color: #e3b3a6; }
.tome-2 .bk-hero-grid .kicker { color: #a7ecd6; }
.bk-hero-grid h1 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1; margin: 0 0 var(--s3); color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.bk-hero-grid h1 .w { display: inline-block; white-space: nowrap; }
.bk-hero-grid h1 .w span { display: inline-block; }
.hook { font-size: var(--fs-5); line-height: 1.4; max-width: 22ch; font-style: italic; color: #fff; margin: 0 0 var(--s4); hyphens: manual; }
.bk-hero-cover { perspective: 1400px; display: flex; justify-content: center; }
.sp-cover { position: relative; left: auto; top: auto; width: clamp(180px, 20vw, 280px); transform: rotateY(-18deg) rotateZ(-3deg); pointer-events: none; }
/* Pendant l'entrée : l'en-tête attend. */
.fx-on .u-hero:not(.on) :is(.kicker, .hook, .ctas, .bk-hero-cover) { opacity: 0; }
.fx-on .u-hero:not(.on) h1 { color: transparent; text-shadow: none; }
.u-hero :is(.kicker, .hook, .ctas) { transition: opacity 1.2s ease, transform 1.4s var(--ease, ease); }
.u-hero.on .hook { transition-delay: .7s; }
.u-hero.on .ctas { transition-delay: 1s; }
.fx-on .u-hero:not(.on) :is(.hook, .ctas) { transform: translateY(14px); }
.u-hero.on .bk-hero-cover img { animation: cover-in 1.8s cubic-bezier(.2, .7, .1, 1) .5s both; }
@keyframes cover-in { from { opacity: 0; transform: translateY(80px) rotate(6deg); } }
/* Tome 1 : le titre s'embrase lettre par lettre. */
.fx-on .tome-1 .u-hero.on h1 .w span { animation: ignite 1.6s ease both; animation-delay: calc(var(--i) * 70ms); }
@keyframes ignite {
	0% { color: transparent; text-shadow: none; }
	30% { color: #ffcf8a; text-shadow: 0 0 18px #ff8a3a, 0 0 40px #ff4d1a; }
	100% { color: #fff; text-shadow: 0 0 22px rgba(255, 110, 50, .45), 0 2px 30px rgba(0, 0, 0, .6); } }
/* Tome 2 : le titre se fige comme du givre. */
.fx-on .tome-2 .u-hero.on h1 .w span { animation: freeze 1.8s cubic-bezier(.2, .7, .1, 1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes freeze {
	0% { color: rgba(255, 255, 255, 0); filter: blur(14px); transform: translateY(-10px) scale(1.15); }
	50% { color: #eaffff; filter: blur(2px); text-shadow: 0 0 28px rgba(170, 240, 255, .9); }
	100% { color: #fff; filter: none; transform: none; text-shadow: 0 0 24px rgba(140, 240, 210, .45), 0 2px 30px rgba(0, 0, 0, .6); } }

/* ---------- Décor du tome 1 ---------- */
.u1 .u-bg { background-image: url(../img/nuit-etoiles-1700.webp); }
.u-glow { background: radial-gradient(circle at var(--lx, 50%) var(--ly, 60%), rgba(255, 150, 70, .22), transparent 35%); mix-blend-mode: screen; opacity: 0; }
.u-cave { will-change: transform, opacity; transform-origin: 50% 56%;
	background: linear-gradient(rgba(20, 10, 4, .05), rgba(10, 6, 3, .3)), var(--rock) center / cover;
	-webkit-mask-image: radial-gradient(ellipse var(--hw) var(--hh) at 50% 56%, transparent 62%, #000 100%);
	mask-image: radial-gradient(ellipse var(--hw) var(--hh) at 50% 56%, transparent 62%, #000 100%); }
.u-cave.far { --hw: 30%; --hh: 40%; filter: brightness(.55); }
.u-cave.near { --hw: 17%; --hh: 25%; }
.u-cave::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse calc(var(--hw) * 1.25) calc(var(--hh) * 1.25) at 50% 56%, rgba(0, 0, 0, .85) 55%, transparent 90%); }
.u-dark { background: radial-gradient(circle var(--tr, 0px) at var(--tx, 50%) var(--ty, 58%), rgba(255, 150, 60, .16), rgba(40, 14, 0, .18) 35%, rgba(0, 0, 0, .8) 72%, #000 100%); }
.u-year { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 12vw, 9rem);
	color: #ffd6a8; letter-spacing: .06em; text-shadow: 0 0 30px rgba(255, 140, 60, .9), 0 0 80px rgba(255, 90, 30, .6); opacity: 0; font-variant-numeric: tabular-nums; }
.u-year > div { text-align: center; }
.u-year small { display: block; font-family: var(--serif); font-size: .16em; letter-spacing: .3em; color: #ffb27a; text-shadow: none; margin-top: .4em; }

/* ---------- Décor du tome 2 ---------- */
.u2 .u-bg { background-image: url(../img/lac-gele-1200.webp); filter: brightness(.34) saturate(.7) contrast(1.15) hue-rotate(-10deg); }
.u-sky { background: linear-gradient(#030a18 0%, rgba(3, 10, 24, .7) 35%, transparent 62%); }
.u-aurora { mix-blend-mode: screen; filter: blur(3px); }
.u-white { background: radial-gradient(circle at 50% 45%, #d7e3ec, #9fb3c3); opacity: 0; }
.u-eyes { inset: auto; width: 60px; height: 14px; opacity: 0; }
.u-eyes::before, .u-eyes::after { content: ""; position: absolute; top: 0; width: 11px; height: 7px; border-radius: 50%; background: #e8ffcf; box-shadow: 0 0 10px 3px rgba(200, 255, 160, .75), 0 0 26px 6px rgba(120, 255, 170, .35); }
.u-eyes::before { left: 10px; } .u-eyes::after { right: 10px; }
.u-eyes.show { animation: stare 2.2s ease-in-out forwards; }
@keyframes stare { 0% { opacity: 0; } 25% { opacity: .9; } 55% { opacity: .9; } 60% { opacity: 0; } 66% { opacity: .9; } 100% { opacity: 0; } }
/* L'ordre des plans : fond, ciel, aurore, yeux, étincelles, grotte, obscurité, année / neige, givre, blizzard. */
.u-sky { z-index: 1; } .u-aurora, .u-stars { z-index: 2; } .u-eyes, .u-glow { z-index: 3; } .u-sparks { z-index: 4; }
.u-cave { z-index: 5; } .u-dark { z-index: 6; } .u-year { z-index: 7; }
.u-frost { z-index: 5; } .u-white { z-index: 6; } .u-snow { z-index: 7; }

@media (max-width: 899px) {
	.bk-hero-grid { grid-template-columns: 1fr; align-content: end; gap: var(--s3); padding-bottom: 10vh; }
	.bk-hero-cover { order: -1; justify-content: flex-start; }
	.sp-cover { width: 130px; }
	.u-hero::before { background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 70%); }
	.hook { font-size: var(--fs-4); }
	.u-cave.near { --hw: 34%; --hh: 22%; }
	.u-cave.far { --hw: 55%; --hh: 34%; }
}