/* Robert Saxton — « Ciel du Nord », par-dessus la structure Buuk.
   Système : 7 tailles de texte, 1 arrondi (4 px), 1 échelle d'espacement.
   Cinzel : logo, H1, H2 seulement. Source Serif : tout le reste (petites capitales pour menu et boutons). */
:root {
	--night: #0f1826; --night-2: #0b121d; --sky: #162234; --sky-2: #1c2b40; --line: #2a3a50;
	--ice: #9ec3d6; --snow: #eef1f4; --text: #d9e0e7; --muted: #a8b3bf;
	--red: #c7362c; --red-dark: #a82b23;
	--fs-1: .8125rem; --fs-2: .9375rem; --fs-3: 1.0625rem; --fs-4: 1.25rem; --fs-5: 1.625rem; --fs-6: clamp(1.9rem, 3.2vw, 2.5rem); --fs-7: clamp(2.3rem, 5vw, 4rem);
	--r: 4px; --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;
	--wrap: 1180px;
	--serif: "Source Serif 4", Georgia, serif; --display: "Cinzel", Georgia, serif;
}

/* Base */
html { background-color: var(--night); scroll-behavior: smooth; }
body { font-family: var(--serif); font-size: 100%; line-height: 1.7; color: var(--text); background: var(--night); }
p { font-size: var(--fs-3); }
a { color: var(--ice); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 2px; }
::selection { background-color: rgba(199, 54, 44, .5); color: #fff; }
h1, h2 { font-family: var(--display); font-weight: 600; color: #fff; letter-spacing: .01em; line-height: 1.12; text-transform: none; }
h1 { font-size: var(--fs-7); margin: 0 0 var(--s3); }
h2 { font-size: var(--fs-6); margin: 0 0 var(--s3); }
h3 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-4); color: #fff; margin: var(--s2) 0 var(--s1); letter-spacing: 0; text-transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--red); color: #fff; padding: .6em 1em; }
.skip:focus { left: 1em; top: 1em; }
.todo { font-size: var(--fs-2); color: var(--ice); border: 1px dashed rgba(158, 195, 214, .55); border-radius: var(--r); padding: .35em .75em; display: inline-block; }
.note { font-size: var(--fs-1); color: var(--muted); margin-top: var(--s2); }
.meta { font-size: var(--fs-2); color: var(--muted); margin: 0 0 var(--s1); }

.preview-note { background: var(--red); color: #fff; font-size: var(--fs-1); text-align: center; padding: 6px 16px; }
.main { padding-top: 0; }
.inner { max-width: var(--wrap); margin: 0 auto; padding-left: var(--s3); padding-right: var(--s3); }

/* Boutons (petites capitales, un seul style) */
.button { font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; font-size: var(--fs-3); font-weight: 600;
	border: 1.5px solid rgba(238, 241, 244, .7); color: var(--snow); background: transparent; border-radius: var(--r); padding: .55em 1.2em; line-height: 1.3;
	transition: background-color .2s, border-color .2s, color .2s; }
.button:hover, .button:focus { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }
.button.filled { background: var(--red); border-color: var(--red); color: #fff; }
.button.filled:hover, .button.filled:focus { background: var(--red-dark); border-color: var(--red-dark); }

/* En-tête + accueil */
#header.featured { position: relative; background: var(--night); overflow: hidden; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
#header.featured::before { content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(15, 24, 38, .92) 0%, rgba(15, 24, 38, .72) 45%, rgba(15, 24, 38, .35) 100%), linear-gradient(0deg, rgba(15, 24, 38, .9), transparent 40%); }
#header .inner { position: relative; z-index: 2; padding-top: var(--s3); }
#header .table-layout { display: flex; align-items: center; gap: var(--s3); }
#logo { flex: 1; }
#logo .site-title { font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: .08em; color: #fff; text-decoration: none; display: block; line-height: 1.1; }
.site-description { font-style: italic; color: var(--muted); font-size: var(--fs-2); }
#site-menu { display: block; }
#site-menu ul { display: flex; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
#site-menu ul li { margin: 0 !important; }
#site-menu ul li a { font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; font-size: var(--fs-3); color: var(--snow); text-decoration: none; padding: .3em 0; border-bottom: 1px solid transparent; }
#site-menu ul li a:hover { border-bottom-color: var(--red); color: #fff; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lang a { padding: .3em .7em; font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; color: var(--snow); text-decoration: none; }
.lang a.on { background: var(--red); color: #fff; }
.lang a:hover:not(.on) { background: var(--sky-2); }

#featured-content { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--s4); padding: var(--s5) 0 calc(var(--s6) + 40px) !important; }
.kicker { font-size: var(--fs-2); font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; color: var(--ice); margin-bottom: var(--s2); }
.lead { font-size: var(--fs-4); color: var(--text); max-width: 32em; }
.ctas { margin-top: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero-books { position: relative; height: 430px; perspective: 1400px; }
.book3d { position: absolute; top: 0; width: 230px; transform-style: preserve-3d; transition: transform .6s ease; }
.book3d img { display: block; width: 100%; border-radius: 2px 4px 4px 2px; box-shadow: 18px 26px 50px -18px rgba(0, 0, 0, .85); }
.book3d::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; transform-origin: left; transform: rotateY(90deg);
	background: linear-gradient(90deg, #07090d, #1e2530); }
.book3d::after { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent); }
.book3d.b1 { left: 14%; top: 40px; transform: rotateY(-22deg) rotateZ(-2deg); z-index: 2; }
.book3d.b2 { left: 48%; top: 0; transform: rotateY(-22deg) rotateZ(3deg); z-index: 1; }
.hero-books:hover .b1 { transform: rotateY(-12deg) rotateZ(-2deg) translateY(-6px); }
.hero-books:hover .b2 { transform: rotateY(-12deg) rotateZ(3deg) translateY(-6px); }
.treeline { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; z-index: 3; }
.treeline path { fill: var(--night); }

/* Sections */
.sec { padding-top: var(--s6); padding-bottom: 0; }
.intro { color: var(--muted); max-width: 40em; margin-top: calc(-1 * var(--s1)); }

/* Livres */
.books { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s4); }
.book .cover { display: block; border-radius: var(--r); transition: transform .35s ease, box-shadow .35s ease; }
.book .cover img { width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .95); display: block; }
.book .cover:hover { transform: translateY(-8px); }
.book h3 { margin-top: var(--s3); }
.book p { font-size: var(--fs-2); }
.actions { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }
.actions .button { font-size: var(--fs-2); }
.more-shops { font-size: var(--fs-1) !important; color: var(--muted); margin-top: var(--s1); }
.cover-soon { position: relative; aspect-ratio: 2 / 3; background: linear-gradient(180deg, #111c2d, #0b121d); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; place-items: center; }
.cover-soon .roman { font-family: var(--display); font-size: 5rem; color: rgba(158, 195, 214, .35); }
.cover-soon .treeline { height: 60px; }
.cover-soon .treeline path { fill: #070b12; }
.cover-soon .soon-label { position: absolute; top: var(--s3); font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; color: var(--muted); font-size: var(--fs-2); }

/* Bandeau citation de Robert */
.quote-band { margin-top: var(--s6); background: var(--sky); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote-band blockquote { padding-top: var(--s5); padding-bottom: var(--s5); text-align: center; border: 0; margin: 0 auto; }
.quote-band blockquote:before { display: none; }
.quote-band p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.35; color: #fff; max-width: 26em; margin: 0 auto var(--s2); }
.quote-band cite { font-style: normal; font-size: var(--fs-2); color: var(--muted); }

/* Univers : carte + texte */
.world { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s4); align-items: start; margin-top: var(--s3); }
.map { margin: 0; }
.map svg { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.map .land { fill: #152033; }
.map .lake { fill: #0b2033; stroke: #3e6179; stroke-width: 1.2; }
.map .lake-name { font-family: var(--display); font-size: 34px; fill: rgba(158, 195, 214, .85); letter-spacing: .12em; text-anchor: middle; }
.map .lake-sub { font-family: var(--serif); font-style: italic; font-size: 17px; fill: rgba(158, 195, 214, .6); text-anchor: middle; }
.map .region { font-family: var(--serif); font-variant: small-caps; font-size: 16px; fill: rgba(238, 241, 244, .35); letter-spacing: .2em; }
.map .pl circle { fill: var(--snow); }
.map .pl text { font-family: var(--serif); font-size: 15px; fill: var(--text); }
.map .pl circle[r="6"] { fill: var(--red); stroke: #fff; stroke-width: 2; }
.map figcaption, .lighthouse figcaption { font-size: var(--fs-1); color: var(--muted); margin-top: var(--s1); }
.world-text p { font-size: var(--fs-3); }
.lighthouse { margin: var(--s3) 0 0; }
.lighthouse img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.gloss-title { margin-top: var(--s5); }
.gloss { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s2) 0 0; }
.gloss div { background: var(--sky); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.gloss dt { font-family: var(--display); font-size: var(--fs-4); color: #fff; margin-bottom: var(--s1); }
.gloss dd { margin: 0; font-size: var(--fs-2); color: var(--text); }

/* Avis */
.featured-quote { margin: var(--s3) 0 var(--s4); padding-left: var(--s3); border-left: 3px solid var(--red); }
.featured-quote blockquote { margin: 0; padding: 0; border: 0; font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.35; color: #fff; }
.featured-quote blockquote:before, .reviews blockquote:before { display: none; }
.featured-quote figcaption { margin-top: var(--s1); font-size: var(--fs-2); color: var(--muted); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.reviews figure { margin: 0; background: var(--sky); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; justify-content: space-between; }
.reviews blockquote { margin: 0; padding: 0; border: 0; font-style: italic; font-size: var(--fs-4); color: #fff; line-height: 1.45; }
.reviews figcaption { margin-top: var(--s2); font-size: var(--fs-2); color: var(--muted); }

/* Extrait */
.excerpt-page { max-width: 640px; margin: var(--s3) auto 0; background: #f3efe6; color: #2b2a26; border-radius: var(--r); padding: var(--s5) var(--s4); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); text-align: center; }
.excerpt-page p { font-size: var(--fs-3); color: #3a3833; }
.excerpt-book { font-family: var(--display); font-size: var(--fs-5) !important; color: #1d2330 !important; margin-bottom: var(--s3); }
.excerpt-page .todo { color: #6b4e17; border-color: rgba(107, 78, 23, .5); margin-top: var(--s2); }

/* Écouter + écoles */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.panel { background: var(--sky); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.panel h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.player { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.play { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.wave { flex: 1; height: 46px; display: flex; align-items: center; gap: 3px; }
.wave i { flex: 1; background: rgba(158, 195, 214, .45); border-radius: 2px; }
.wave i:nth-child(-n+14) { background: var(--red); }
.event { border-top: 1px solid var(--line); padding-top: var(--s2); margin-top: var(--s3); font-size: var(--fs-2); }
.event span { display: block; font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; color: var(--ice); }

/* Auteur */
.author { display: grid; grid-template-columns: 360px 1fr; gap: var(--s4); align-items: start; margin-top: var(--s3); }
.author-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.author-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.7); }
.author-photo span { position: absolute; inset: auto 0 0 0; padding: var(--s2); font-size: var(--fs-2); color: #fff; background: linear-gradient(0deg, rgba(15, 24, 38, .95), transparent); }

/* Infolettre */
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; background: var(--sky); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.newsletter h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: var(--s1); }
.news-form { display: flex; gap: var(--s1); margin: 0; }
.news-form input[type=email] { flex: 1; margin: 0; background: var(--night); border: 1px solid var(--line); border-radius: var(--r); color: #fff; font-family: var(--serif); font-size: var(--fs-3); padding: .6em .8em; }
.news-form input[type=email]:focus { border-color: var(--ice); background: var(--night); }
::placeholder { color: rgba(238, 241, 244, .45) !important; }

/* Acheter */
.main .full-width-section { margin-top: var(--s6); background-color: var(--night);
	background-image: linear-gradient(0deg, rgba(15, 24, 38, .9), rgba(15, 24, 38, .55)), url(../img/aurore-1920.webp);
	background-size: cover; background-position: center 40%; text-align: center; }
.main .full-width-section .wrapper { padding: var(--s6) var(--s3); max-width: 900px; margin: 0 auto; }
.buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s4) 0 var(--s3); }
.buy-book { background: rgba(15, 24, 38, .6); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.buy-title { font-family: var(--display); font-size: var(--fs-4) !important; color: #fff; margin-bottom: var(--s2); }
.buy-book .button { font-size: var(--fs-2); margin: .2em; }
.local { font-size: var(--fs-2); }

/* Pied de page */
#footer { background: var(--night-2); border-top: 1px solid var(--line); margin-top: 0; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s4); }
.foot .site-title { font-family: var(--display); font-size: 1.3rem; color: #fff; letter-spacing: .08em; margin: 0; }
.foot-h { font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; color: #fff; font-size: var(--fs-3); margin-bottom: var(--s1); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: .25em 0; font-size: var(--fs-2); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot p { font-size: var(--fs-2); color: var(--muted); }
.foot .lang { margin-top: var(--s2); }
.foot-bottom { border-top: 1px solid var(--line); padding-top: var(--s2); padding-bottom: var(--s3); font-size: var(--fs-1); color: var(--muted); }

/* Panneau mobile */
.secondary, .secondary-helper, .secondary-helper.open { background-color: var(--night); }
.secondary #panel-menu a, .secondary-links a { color: var(--snow); }
.secondary .panel { background: transparent; border: 0; padding: 0; }
.secondary .panel .list-description { color: var(--muted); border-bottom-color: var(--line); }
.secondary .lang a { display: inline-block; padding: .55em 1.1em; font-size: var(--fs-2); }
.lang-panel { margin-top: var(--s3); }
@media (min-width: 900px) { .secondary-links { display: none; } }

/* Écrans moyens et petits */
@media (max-width: 1080px) {
	.book3d { width: 190px; }
	.hero-books { height: 360px; }
}
@media (max-width: 899px) {
	#site-menu, .lang-cell { display: none !important; }
	#featured-content { grid-template-columns: 1fr; padding: var(--s4) 0 var(--s6) !important; }
	.hero-books { height: 300px; }
	.book3d { width: 160px; }
	.book3d.b1 { left: 8%; } .book3d.b2 { left: 42%; }
	.books, .reviews, .gloss { grid-template-columns: 1fr 1fr; }
	.world, .two-up, .author, .newsletter, .buy-grid { grid-template-columns: 1fr; }
	.author-photo { max-width: 360px; }
	.foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.books, .reviews, .gloss, .foot { grid-template-columns: 1fr; }
	.sec { padding-top: var(--s5); }
	.panel, .newsletter { padding: var(--s3); }
	.news-form { flex-direction: column; }
	.excerpt-page { padding: var(--s4) var(--s3); }
	.book3d { width: 140px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Finitions après revue visuelle */
#logo .site-description { color: var(--muted); font-size: var(--fs-2); }
.book3d { width: 220px; }
.book3d.b1 { left: 2%; top: 56px; }
.book3d.b2 { left: 50%; top: 0; }
#header.featured::before { background: linear-gradient(90deg, rgba(15, 24, 38, .92) 0%, rgba(15, 24, 38, .7) 45%, rgba(15, 24, 38, .3) 100%), linear-gradient(0deg, rgba(15, 24, 38, .45), transparent 30%); }
#featured-content { padding-bottom: calc(var(--s5) + 60px) !important; }
.treeline { height: 110px; }
.world { grid-template-columns: 1fr 1fr; align-items: center; }
.world .lighthouse { margin: 0; }
.world .lighthouse img { aspect-ratio: 16 / 10; object-fit: cover; }
.map { margin-top: var(--s4); }
.map .pl text { font-size: 17px; }
.map .region { font-size: 18px; }
.cover-soon { display: block; }
.cover-soon .roman { position: absolute; left: 0; right: 0; top: 38%; text-align: center; line-height: 1; }
.cover-soon .soon-label { left: 0; right: 0; top: auto; bottom: 90px; text-align: center; }
.main .full-width-section { background-image: linear-gradient(0deg, rgba(15, 24, 38, .82), rgba(15, 24, 38, .3)), url(../img/aurore-1920.webp); }
.buy-book p { margin-bottom: 0; }
#footer .foot p, #footer .foot .site-description { display: block; text-align: left; margin: 0 0 var(--s1); }
#footer .foot .todo { display: inline-block; }
#footer .foot .lang { display: inline-flex; }
#footer .inner { padding-left: var(--s3); padding-right: var(--s3); }
#footer .foot-bottom { text-align: left; }
@media (max-width: 899px) { .book3d { width: 150px; } .book3d.b1 { left: 4%; top: 40px; } .book3d.b2 { left: 46%; } }
#footer p { float: none !important; }
.treeline.back { height: 150px; }
.treeline.back path { fill: #1a2842; }
.treeline.front { height: 110px; }
.treeline.front path { fill: var(--night); }
.cover-soon .treeline.front path { fill: #070b12; }
.cover-soon .treeline { height: 80px; }
#footer .foot, #footer .foot-bottom { box-sizing: border-box; width: 100%; max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--s3) !important; padding-right: var(--s3) !important; }
@media (max-width: 899px) { .world { grid-template-columns: 1fr; } }
#footer .foot .lang { display: flex; width: max-content; }