/* Robert Saxton — navigation : en-tête horizontal sur tout le site, barre de livre sur les pages livres,
   et entrée mise en scène de l'accueil (« La nuit sur Gichi Gami », animée par js/accueil.js). */

/* ---------- En-tête ---------- */
.hdr { position: fixed; z-index: 50; top: 0; left: 0; right: 0; border-bottom: 1px solid transparent; transition: background-color .4s ease, border-color .4s ease; }
.hdr.solid { background: color-mix(in srgb, var(--night-2) 96%, transparent); border-bottom-color: var(--line); }
.hdr-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); height: 72px; display: flex; align-items: center; gap: var(--s4); }
.hdr .logo { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: .08em; color: #fff; text-decoration: none; line-height: 1.05; white-space: nowrap; }
.hdr .logo small { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: var(--fs-1); color: rgba(255, 255, 255, .7); }
.menu { display: flex; align-items: center; gap: 4px; margin: 0 auto; list-style: none; padding: 0; }
.menu > li { position: relative; margin: 0 !important; }
.menu > li > a, .menu > li > button { display: flex; align-items: center; gap: 7px; font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .07em;
	font-size: var(--fs-3); color: #fff; text-decoration: none; background: none; border: 0; padding: 10px 14px; cursor: pointer; border-radius: var(--r); line-height: 1.2; }
.menu > li > a:hover, .menu > li > button:hover, .menu > li > button[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.menu .cur { box-shadow: inset 0 -2px 0 var(--red); }
.menu .chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .3s; }
.menu button[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-1px); }
/* « Les livres » s'ouvre sur les couvertures. */
.drop { position: absolute; top: calc(100% + 10px); left: 50%; width: 560px; transform: translate(-50%, 8px); background: var(--night-2); border: 1px solid var(--line); border-radius: 6px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; opacity: 0; visibility: hidden;
	transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .1, 1), visibility .25s; }
.drop.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop a { text-decoration: none; color: var(--text); font-size: var(--fs-2); line-height: 1.35; }
.drop img, .drop .ghost { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; display: block; margin-bottom: 10px; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .8); transition: transform .35s cubic-bezier(.2, .7, .1, 1); }
.drop a:hover img { transform: translateY(-4px); }
.drop b { display: block; font-family: var(--display); font-weight: 600; color: #fff; font-size: 1rem; }
.drop span { color: var(--muted); font-size: var(--fs-1); }
.ghost { border: 1px dashed rgba(158, 195, 214, .4); display: flex !important; align-items: center; justify-content: center; font-family: var(--display); font-size: 3rem; color: rgba(158, 195, 214, .35); box-shadow: none !important; }
.hdr .lang { border-color: rgba(255, 255, 255, .3); }
.hdr .lang a:not(.on) { color: #fff; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { width: 24px; height: 1.5px; background: #fff; }
/* Menu plein écran (téléphone). */
.sheet { position: fixed; z-index: 60; inset: 0; background: var(--night-2); padding: 90px var(--s3) var(--s5); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.sheet.open { opacity: 1; visibility: visible; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.sheet .x { position: absolute; top: 14px; right: 14px; font-size: 2.2rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; padding: 6px 10px; }
.sheet-h { font-variant: small-caps; text-transform: lowercase; letter-spacing: .14em; color: var(--muted); font-size: var(--fs-2); margin: 0 0 12px; }
.sheet-books { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: var(--s4); }
.sheet-books a { text-decoration: none; color: var(--text); font-size: var(--fs-1); line-height: 1.35; }
.sheet-books img, .sheet-books .ghost { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; margin-bottom: 6px; border-radius: 2px; }
.sheet-books .ghost { font-size: 2rem; }
.sheet ul { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.sheet li { margin: 0 !important; }
.sheet li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: var(--fs-5); color: #fff; text-decoration: none; }

/* ---------- Barre de livre (pages livres) : repère dans le livre et accès à l'achat ---------- */
.subnav { position: sticky; top: 72px; z-index: 40; background: color-mix(in srgb, var(--night-2) 96%, transparent); border-bottom: 1px solid var(--line); }
.subnav .inner { height: 48px; display: flex; align-items: center; gap: var(--s3); }
.subnav strong { font-family: var(--display); font-weight: 600; color: #fff; margin-right: var(--s1); white-space: nowrap; }
.subnav a { color: var(--muted); text-decoration: none; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; font-size: var(--fs-2); padding: 13px 0; white-space: nowrap; }
.subnav a:hover { color: #fff; }
.subnav a.on { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.subnav .buy { margin-left: auto; color: #fff; background: var(--red); border-radius: 3px; padding: 5px 14px; }
.subnav .buy:hover { background: var(--red-dark); }
.bookpage .bk-hero-grid { padding-top: 90px; }

/* ---------- Accueil : la nuit sur Gichi Gami ---------- */
.gg { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: #02050b; isolation: isolate; }
.gg > * { position: absolute; inset: 0; }
.gg canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.gg-bg { inset: -5%; background: url(../img/rive-nord-2000.webp) center 62% / cover; will-change: transform, opacity; }
.gg-tint { background: linear-gradient(0deg, rgba(2, 5, 11, .85), rgba(2, 5, 11, .25) 45%, rgba(2, 5, 11, .6)); }
.gg-left, .gg-right { opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.gg-left { right: 45%; background: radial-gradient(70% 90% at 0% 100%, rgba(255, 110, 40, .35), transparent 70%); mix-blend-mode: screen; }
.gg-right { left: 45%; background: radial-gradient(70% 90% at 100% 0%, rgba(60, 220, 170, .28), transparent 70%), linear-gradient(270deg, rgba(20, 60, 90, .45), transparent); mix-blend-mode: screen; }
.gg.split .gg-left, .gg.split .gg-right { opacity: .85; }
.gg.split.hl .gg-left, .gg.split.hr .gg-right { opacity: 1; }
.gg.split.hl .gg-right, .gg.split.hr .gg-left { opacity: .45; }
.gg-aurora { left: 40% !important; mix-blend-mode: screen; filter: blur(3px); }
.gg-sparks { right: 40% !important; }
.gg-snow { left: 45% !important; }
.gg-mist { pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.gg.lit .gg-mist { opacity: 1; }
.gg-mist i { position: absolute; top: 48%; width: 80%; height: 40%; border-radius: 50%; filter: blur(50px); background: radial-gradient(closest-side, rgba(210, 222, 235, .7), transparent); transition: transform 3s cubic-bezier(.2, .7, .1, 1), opacity 3s ease; }
.gg-mist i:first-child { left: -10%; } .gg-mist i:last-child { right: -10%; }
.gg.open .gg-mist i:first-child { transform: translateX(-70%); opacity: 0; }
.gg.open .gg-mist i:last-child { transform: translateX(70%); opacity: 0; }
/* « Gichi Gami » monte du reflet, puis se range en petit au-dessus du titre. */
.gg-name { inset: auto 0 auto 0 !important; top: 30% !important; z-index: 8; text-align: center; pointer-events: none; }
.gg-name b, .gg-name i { display: block; font-family: var(--display); font-weight: 600; font-style: normal; font-size: clamp(3.5rem, 13vw, 11rem); letter-spacing: .08em; color: #eaf3ff; line-height: 1; }
.gg-name b { text-shadow: 0 0 40px rgba(170, 210, 255, .55); opacity: 0; transform: translateY(40px); filter: blur(10px); transition: opacity 1.6s ease, transform 2s cubic-bezier(.2, .7, .1, 1), filter 1.6s ease; }
.gg-name i { transform: scaleY(-1); opacity: 0; filter: blur(4px); -webkit-mask-image: linear-gradient(transparent 20%, rgba(0, 0, 0, .5)); mask-image: linear-gradient(transparent 20%, rgba(0, 0, 0, .5)); transition: opacity 1.6s ease .3s; }
.gg.name .gg-name b { opacity: 1; transform: none; filter: none; }
.gg.name .gg-name i { opacity: .35; animation: ripple 3.5s ease-in-out infinite; }
@keyframes ripple { 0%, 100% { transform: scaleY(-1) skewX(0); } 50% { transform: scaleY(-1.04) skewX(2deg); } }
.gg.done .gg-name { top: 15% !important; transition: top 1.6s cubic-bezier(.2, .7, .1, 1); }
.gg.done .gg-name b { font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: .5em; color: var(--ice); text-shadow: none; transition: font-size 1.6s cubic-bezier(.2, .7, .1, 1), letter-spacing 1.6s cubic-bezier(.2, .7, .1, 1), color 1.6s; }
.gg.done .gg-name i { opacity: 0; animation: none; }
.gg-text { inset: auto 0 auto 0 !important; top: 22% !important; z-index: 9; text-align: center; padding: 0 var(--s3); }
.gg-text h1 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.1; margin: 0 auto .4em; max-width: 16em; text-shadow: 0 2px 30px rgba(0, 0, 0, .7); }
.gg-text p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 34em; margin: 0 auto 1.4em; color: var(--text); }
.gg-text > * { opacity: 0; transform: translateY(18px); transition: opacity 1.2s ease .7s, transform 1.4s cubic-bezier(.2, .7, .1, 1) .7s; }
.gg.done .gg-text > * { opacity: 1; transform: none; }
.gg.done .gg-text > :nth-child(2) { transition-delay: .95s; } .gg.done .gg-text > :nth-child(3) { transition-delay: 1.2s; }
.gg:not(.done) .gg-text { pointer-events: none; }
/* Les deux couvertures sortent de l'eau, chacune dans son univers. */
.gg-book { inset: auto !important; bottom: 7vh !important; z-index: 10; width: clamp(130px, 14vw, 210px); text-decoration: none; color: #fff; text-align: center; opacity: 0; transform: translateY(120px); transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.2, .7, .1, 1); }
.gg-book img { width: 100%; display: block; border-radius: 2px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); transition: transform .5s cubic-bezier(.2, .7, .1, 1), box-shadow .5s; }
.gg-book.b1 { left: 11% !important; } .gg-book.b2 { right: 11% !important; transition-delay: .2s; }
.gg-book.b1 img { transform: rotate(-4deg); } .gg-book.b2 img { transform: rotate(4deg); }
.gg-book:hover img { transform: translateY(-10px) rotate(0); }
.gg-book.b1:hover img { box-shadow: 0 30px 60px -10px rgba(255, 110, 40, .55); } .gg-book.b2:hover img { box-shadow: 0 30px 60px -10px rgba(60, 220, 170, .5); }
.gg-book span { display: block; margin-top: 12px; font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; font-size: var(--fs-2); color: rgba(255, 255, 255, .85); }
.gg-book.b1 span { color: #ffb27a; }
.gg.split .gg-book { opacity: 1; transform: none; }
.gg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 120px; background: linear-gradient(transparent, var(--night)); z-index: 11; pointer-events: none; }

@media (max-width: 960px) {
	.menu, .hdr .lang { display: none; }
	.burger { display: flex; }
	.hdr-in { height: 64px; }
	.subnav { top: 64px; }
	.subnav .inner { gap: var(--s2); overflow-x: auto; }
	.subnav strong { display: none; }
	.gg-text { top: 17% !important; }
	.gg-book { bottom: 5vh !important; width: 112px; }
	.gg-book.b1 { left: 6% !important; } .gg-book.b2 { right: 6% !important; }
	.gg-book span { font-size: var(--fs-1); }
}
@media (prefers-reduced-motion: reduce) {
	.gg *, .gg-name b, .gg-name i, .gg-text > *, .gg-book { transition: none !important; animation: none !important; }
}

/* La barre de livre reste collée sous l'en-tête (la règle des pages livres met tout le contenu en position relative). */
.bookpage .page > .subnav { position: sticky; z-index: 40; }
.sheet-books b { display: block; font-family: var(--display); font-weight: 600; color: #fff; font-size: var(--fs-1); margin-bottom: 2px; }
.sheet-books span:not(.ghost) { display: block; color: var(--muted); }
/* Les liens de section ne cachent pas leur titre sous l'en-tête (et sous la barre de livre). */
html { scroll-padding-top: 80px; }
html:has(body.bookpage) { scroll-padding-top: 128px; }

/* Citation de Will Weaver sous le bouton de l'accueil. */
.gg-text .gg-proof { max-width: 30em; margin: 1.6em auto 0; padding-top: 1em; border-top: 1px solid rgba(255, 255, 255, .18); font-size: var(--fs-3); }
.gg-proof span { display: block; font-style: italic; color: var(--snow); text-shadow: 0 1px 16px rgba(0, 0, 0, .8); }
.gg-proof .by { font-style: normal; font-size: var(--fs-1); color: var(--muted); margin-top: .3em; }
.gg.done .gg-text > :nth-child(4) { transition-delay: 1.45s; }
@media (max-width: 960px) { .gg-text .gg-proof { font-size: var(--fs-2); margin-top: 1em; } }
.proof-m { display: none; }
@media (max-width: 960px) {
	/* Téléphone : la citation passe juste sous l'ouverture, et l'ouverture se resserre pour que le bouton ne touche pas les couvertures. */
	.gg-text .gg-proof { display: none; }
	.proof-m { display: block; text-align: center; margin: 0; padding: var(--s3) var(--s3) 0; background: var(--night); }
	.gg-text { top: 13% !important; }
	.gg-text h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
	.gg-text p { font-size: 1rem; margin-bottom: 1em; }
	.gg-book { width: 96px; bottom: 3vh !important; }
}
@media (max-width: 960px) and (max-height: 700px) { .gg-text > p:first-of-type { display: none; } }
@media (max-width: 960px) { .gg.done .gg-name { top: 10% !important; } .gg-text { top: 15% !important; } }