/* 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); font-style: italic; color: var(--ice); }
.note { font-size: var(--fs-2); color: var(--muted); margin-top: var(--s2); }
.meta { font-size: var(--fs-2); color: var(--muted); margin: 0 0 var(--s1); }

/* Mention « aperçu » : petite étiquette fixe, pour ne pas gêner l'en-tête. */
.preview-note { position: fixed; z-index: 45; left: 12px; bottom: 12px; max-width: 320px; background: var(--red); color: #fff; font-size: var(--fs-1); line-height: 1.4; padding: 6px 10px; border-radius: 3px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.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); }


.actions { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }
.actions .button { font-size: var(--fs-2); }


.map { margin: 0; }
.map svg { width: 100%; height: auto; border-radius: var(--r); 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; }
.gloss { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s2) 0 0; }
.gloss div { border-top: 1px solid var(--line); padding: var(--s2) 0 0; }
.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; border-top: 1px solid var(--line); padding: var(--s2) 0 0; 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); }

.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); }

/* 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; }
.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); }

.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; }


/* 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%; }
	.reviews, .gloss { grid-template-columns: 1fr 1fr; }
	.author { grid-template-columns: 1fr; }
	.author-photo { max-width: 360px; }
	.foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.reviews, .gloss, .foot { grid-template-columns: 1fr; }
	.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; }
.map .pl text { font-size: 17px; }
.map .region { font-size: 18px; }
#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; }
#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; }
#footer .foot .lang { display: flex; width: max-content; }

/* ---------- Accueil : trois rangs ----------
   Partie : grande, rare, avec une phrase qui dit ce qu'on y trouve.
   Chapitre : à l'intérieur d'une partie, titre plus petit, sans numéro.
   Infos pratiques : petites, regroupées, lisibles d'un coup d'œil. */
.link { color: var(--snow); text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 1px; font-size: var(--fs-3); }
.link:hover { color: #fff; border-bottom-color: #fff; }
.ctas { align-items: center; }
.hero-proof { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid rgba(255, 255, 255, .15); max-width: 30em; font-size: var(--fs-3); }
.hero-proof span { display: block; font-style: italic; color: var(--snow); }
.hero-proof .by { font-style: normal; font-size: var(--fs-1); color: var(--muted); margin-top: .3em; }

.part { padding: calc(var(--s6) + 1rem) 0 var(--s4); }
.part-2 { background: #13202c; border-top: 1px solid var(--line); }
.part-head { display: grid; grid-template-columns: 11rem 1fr; gap: 0 var(--s4); align-items: end; margin-bottom: var(--s5); }
.part-num { font-family: var(--display); font-weight: 500; font-size: 9rem; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(158, 195, 214, .45); text-align: right; }
.part-label { font-variant: small-caps; text-transform: lowercase; letter-spacing: .16em; color: var(--red); font-size: var(--fs-2); margin: 0 0 .6em; }
.part h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.1; margin: 0 0 .45em; }
.part h2 .ln { display: block; }
.part-promise { font-size: var(--fs-4); line-height: 1.55; max-width: 34em; color: var(--text); margin: 0; }
.part-rule { grid-column: 1 / -1; height: 1px; background: var(--line); margin-top: var(--s4); transform-origin: left; }
.chap { padding: var(--s5) 0; }
.chap + .chap, .path + .chap { border-top: 1px solid var(--line); }
.path + .chap { margin-top: var(--s5); }
.chap-h { font-family: var(--display); font-weight: 600; font-size: var(--fs-5); line-height: 1.2; margin: 0 0 var(--s2); }

/* Partie I : la trilogie comme un chemin, dans l'ordre de lecture. */
.path { position: relative; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s5); align-items: start; }
.path-line { position: absolute; left: 0; right: 0; top: 150px; height: 2px; background: var(--line); }
.path-line i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: linear-gradient(90deg, var(--red), #ff7a45); }
.tome { position: relative; }
.tome .cover { display: block; width: 190px; transition: transform .5s cubic-bezier(.2, .7, .1, 1); }
.tome .cover img { width: 100%; height: auto; border-radius: 2px; box-shadow: 12px 18px 34px rgba(0, 0, 0, .5); }
.tome .cover:hover { transform: translateY(-6px) rotate(-1deg); }
.tome.first .cover { width: 240px; }
.tome .step { display: inline-block; font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; font-size: var(--fs-2); color: var(--ice); margin: var(--s3) 0 .3em; }
.tome.first .step { color: #fff; background: var(--red); padding: 1px 10px; border-radius: 3px; }
.tome h3 { font-family: var(--display); font-weight: 600; font-size: var(--fs-5); line-height: 1.2; margin: 0 0 .15em; }
.tome.first h3 { font-size: 1.9rem; }
.tome h3 a { color: inherit; text-decoration: none; }
.tome h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.tome p { font-size: var(--fs-2); }
.tome blockquote { margin: var(--s2) 0; padding: 0 0 0 14px; border: 0; border-left: 2px solid var(--red); font-style: italic; font-size: var(--fs-3); color: var(--snow); }
.tome blockquote:before { display: none; }
.tome blockquote span { display: block; font-style: normal; font-size: var(--fs-1); color: var(--muted); margin-top: .3em; }
.tome .actions .button { font-size: var(--fs-2); }
.cover-ghost { width: 190px; aspect-ratio: 2 / 3; border: 1px dashed rgba(158, 195, 214, .4); background: var(--night); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); }
.cover-ghost b { font-family: var(--display); font-weight: 500; font-size: 4.5rem; line-height: 1; color: rgba(158, 195, 214, .35); }
.cover-ghost span { font-variant: small-caps; text-transform: lowercase; letter-spacing: .14em; font-size: var(--fs-1); color: var(--muted); }
#reviews .reviews { margin-top: var(--s2); }

/* Partie II : le pays, l'homme, sa voix. */
.land { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s5); align-items: center; }
.land .map { margin: 0; }
#land .gloss { margin-top: var(--s4); }
.author { grid-template-columns: 320px 1fr; gap: var(--s5); margin-top: 0; }
.man-quote { margin: 0 0 var(--s3); padding: 0; border: 0; }
.man-quote:before { display: none; }
.man-quote p { font-style: italic; font-size: 1.6rem; line-height: 1.35; color: #fff; margin: 0 0 .3em; }
.man-quote cite { display: block; text-align: left; font-style: normal; font-size: var(--fs-1); color: var(--muted); }
.facts-line { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s3) 0; padding-top: var(--s2); border-top: 1px solid var(--line); }
.facts-line dt { font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; font-size: var(--fs-1); color: var(--ice); }
.facts-line dd { margin: 0; font-size: var(--fs-2); color: var(--text); }
.voice { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; margin-top: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.voice .wave { height: 40px; }
.voice-t { font-size: var(--fs-2); margin: 0 0 .4em; }
.voice-t b { display: block; color: #fff; }
.voice .button { font-size: var(--fs-2); }
.voice + .todo { margin-top: var(--s1); }

/* Infos pratiques : aucun effet, tout est là tout de suite. */
.practical { padding: var(--s5) 0 var(--s6); background: var(--night-2); border-top: 1px solid var(--line); }
.practical .practical-h { font-family: var(--serif); font-weight: 400; font-variant: small-caps; text-transform: lowercase; letter-spacing: .16em; font-size: var(--fs-2); color: var(--muted); margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.practical-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.practical-grid > div { padding: 0 var(--s4); border-left: 1px solid var(--line); }
.practical-grid > div:first-child { padding-left: 0; border-left: 0; }
.practical h3 { font-size: var(--fs-4); margin: 0 0 .5em; }
.practical p { font-size: var(--fs-2); color: var(--muted); margin: 0 0 .7em; }
.practical p b { color: var(--text); font-weight: 600; }
.practical .buy em { display: block; color: var(--text); }
.practical .news-form { flex-direction: column; margin-top: var(--s2); }
.practical .news-form .button { align-self: flex-start; font-size: var(--fs-2); }

@media (max-width: 899px) {
	.part { padding: var(--s6) 0 var(--s3); }
	.part-head { grid-template-columns: 1fr; margin-bottom: var(--s4); }
	.part-num { font-size: 5rem; text-align: left; margin-bottom: var(--s2); }
	.path { grid-template-columns: 1fr; gap: var(--s5); }
	.path-line { left: 20px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
	.path-line i { width: 100%; height: calc(var(--p, 1) * 100%); }
	.tome { padding-left: 48px; }
	.tome .cover, .tome.first .cover, .cover-ghost { width: 150px; }
	.land { grid-template-columns: 1fr; gap: var(--s3); }
	.author { grid-template-columns: 1fr; }
	.voice { grid-template-columns: auto 1fr; }
	.voice .button { grid-column: 1 / -1; justify-self: start; }
	.practical-grid { grid-template-columns: 1fr; }
	.practical-grid > div { padding: var(--s3) 0; border-left: 0; border-top: 1px solid var(--line); }
	.practical-grid > div:first-child { border-top: 0; padding-top: 0; }
}

/* Adresse de contact : peut être longue, on autorise la coupure sur petits écrans. */
a.mail { overflow-wrap: anywhere; }

/* ---------- Page introuvable (404) ---------- */
.nf { min-height: 78vh; display: flex; align-items: center; padding: calc(var(--s3) * 4) 0 calc(var(--s3) * 2); text-align: center; }
.nf .inner { width: 100%; }
.nf h1 { font-size: clamp(1.7rem, 7vw, 4rem); margin: 0 0 .4em; overflow-wrap: anywhere; }
.nf p { font-size: var(--fs-4); max-width: 34rem; margin: 0 auto 1.4em; }
.nf-books { list-style: none; display: flex; justify-content: center; gap: var(--s3); margin: 2.4em 0 0; padding: 0; }
.nf-books a { display: flex; flex-direction: column; align-items: center; gap: .6em; font-size: var(--fs-2); color: inherit; text-decoration: none; }
.nf-books a:hover, .nf-books a:focus { color: #fff; }
.nf-books img { width: 96px; height: auto; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }

/* ---------- Blog : liste et article ---------- */
.blog, .post { padding: calc(var(--s5) + var(--s4)) 0 var(--s5); }
.blog-in, .post-in { max-width: 46rem; }
.blog h1, .post h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
.blog-intro { font-size: var(--fs-4); color: var(--muted); margin: 0 0 var(--s4); }
.blog-empty { font-style: italic; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s3); }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-item, .post-end li { margin: 0; border-bottom: 1px solid var(--line); }
.post-end li { border: 0; }
.post-item a { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s3); padding: var(--s3) 0; color: inherit; text-decoration: none; }
.post-item a:not(:has(img)) { grid-template-columns: 1fr; }
.post-item img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--r); }
.post-item h2 { font-size: var(--fs-5); margin: 0 0 var(--s1); }
.post-item h2 + p { margin: 0; color: var(--text); }
.post-item a:hover h2, .post-item a:focus h2 { color: var(--ice); }
.post-item.draft h2::after { content: " · brouillon"; color: var(--red); font-family: var(--serif); font-size: var(--fs-2); }
.post-back { margin: 0 0 var(--s3); font-size: var(--fs-2); }
.post-back a { text-decoration: none; }
.post-cover { margin: var(--s3) 0 var(--s4); }
.post-cover img, .post-body figure img { width: 100%; height: auto; border-radius: var(--r); }
.post-body { font-size: var(--fs-4); }
.post-body p { font-size: inherit; margin: 0 0 1.2em; }
.post-body h2 { font-size: var(--fs-5); margin: 1.8em 0 .6em; }
.post-body figure { margin: var(--s4) 0; }
.post-body figcaption { font-size: var(--fs-2); color: var(--muted); margin-top: var(--s1); }
.post-body blockquote { margin: var(--s4) 0; padding: 0 0 0 var(--s3); border-left: 2px solid var(--red); color: inherit; }
.post-body blockquote::before { content: none; }
.post-body blockquote p { font-style: italic; color: var(--snow); }
.post-end { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.post-end-h { font-size: var(--fs-2); color: var(--muted); margin: 0 0 var(--s2); }
.post-end ul { list-style: none; display: flex; gap: var(--s3); margin: 0; padding: 0; }
.post-end a { display: flex; align-items: center; gap: var(--s2); color: inherit; text-decoration: none; font-size: var(--fs-3); }
.post-end img { width: 56px; height: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
@media (max-width: 600px) {
	.post-item a { grid-template-columns: 1fr; gap: var(--s2); }
	.post-end ul { flex-direction: column; gap: var(--s2); }
}

/* ---------- Formulaires ---------- */
.sx-form { margin: 0 0 var(--s4); }
.sx-form + .sx-form { padding-top: var(--s3); border-top: 1px solid var(--line); }
.f-row { display: flex; flex-direction: column; gap: .35em; margin: 0 0 var(--s3); }
.f-row label { font-size: var(--fs-2); color: var(--muted); }
.sx-form input, .sx-form select, .sx-form textarea { width: 100%; margin: 0; padding: .7em .8em; background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r); color: #fff; font-family: var(--serif); font-size: var(--fs-3); line-height: 1.5; }
.sx-form textarea { resize: vertical; min-height: 9rem; }
/* Liste déroulante redessinée : Safari (iPhone) ignore le fond d'une liste au style natif → case blanche. */
.sx-form select { -webkit-appearance: none; appearance: none; padding-right: 2.6em; background-color: var(--night-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239ec3d6' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9em center; background-size: 12px 8px; }
.sx-form input:focus, .sx-form select:focus, .sx-form textarea:focus { background-color: var(--night-2); color: #fff; border-color: var(--ice); outline: none; } /* style.css:808 met le fond en blanc au focus */
.sx-form option { background: var(--night-2); color: #fff; }
/* Remplissage automatique du navigateur : garder le fond nuit et le texte blanc */
.sx-form input:-webkit-autofill, .news-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--night-2) inset; -webkit-text-fill-color: #fff; caret-color: #fff; }
.js-form.checked :invalid { border-color: var(--red); }
.js-form.busy button[type=submit] { opacity: .6; pointer-events: none; }
.f-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-status { min-height: 1.5em; margin: var(--s1) 0 0; font-size: var(--fs-2); color: var(--muted); }
.f-status.ok { color: var(--ice); }
.f-status.err { color: #f08a80; }
.news-form { flex-wrap: wrap; }
.news-form .ts, .news-form .f-status { flex-basis: 100%; }
.f-note { font-size: var(--fs-1) !important; color: var(--muted); }

/* ---------- Bandeau de consentement (C4) ---------- */
.consent { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(44rem, calc(100% - 32px)); display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); background: var(--sky-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.consent p { margin: 0; font-size: var(--fs-2); color: var(--text); }
.consent-b { display: flex; gap: var(--s1); flex-shrink: 0; }
.consent .button { font-size: var(--fs-2); }
.foot-bottom a { color: inherit; }
@media (max-width: 600px) { .consent { flex-direction: column; align-items: stretch; } .consent-b .button { flex: 1; } }

/* Confirmation d'envoi : un seul encadré, réservé à ce moment (remplace le formulaire). */
.f-done { margin: var(--s3) 0; padding: var(--s3) var(--s4); border: 1px solid var(--ice); border-left: 3px solid var(--ice); border-radius: var(--r); background: var(--sky); outline: none; }
.f-done-h { font-family: var(--display); font-weight: 600; font-size: var(--fs-5); color: #fff; margin: 0 0 .4em; }
.f-done p:last-child { font-size: var(--fs-3); color: var(--text); margin: 0; }
.practical .f-done { padding: var(--s2) var(--s3); }
.practical .f-done-h { font-size: var(--fs-4); }