/* Fichier généré par build.mjs (polices, style, style-custom, margin, fx, nav, unifie) — ne pas modifier à la main. */
/* ==== polices.css ==== */
/* Polices hébergées sur le site (Cinzel, Source Sans 3, Source Serif 4 — licence SIL OFL), sous-ensembles latin et latin étendu.
   Remplacent le lien Google Fonts : une connexion et une feuille bloquante de moins avant le premier affichage. */
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cinzel-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cinzel-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cinzel-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cinzel-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-ext-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-latin-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== style.css ==== */
/*

Buuk - Microsite HTML template
http://themeforest.net/user/liviu_cerchez

Table of contents:

 1. Reset
 2. Font-face Icons
 3. Typography
 4. Separators
 5. Tables
 6. Mouse selected text
 7. Links
 8. Forms
 9. Page elements
10. Thumbnails
11. Blockquote rotator
12. Cerchez slider
13. Responsive iframe or embed
14. Skills progress bar
15. Alert
16. Tabs
17. Pricing table
18. Social links
19. CSS3 animations
20. Secondary panels
21. Main content
22. Header
23. Archive view
24. Single post
25. Comments
26. Widgets
27. Footer
28. Media queries
29. Webkit scrollbar styling
30. Media query: Mobile Large
31. Media query: Tablet Small
32. Media query: Tablet Large
33. Media query: Desktop Small
34. Media query: Desktop Medium
35. Media query: Desktop Large
36. Media query: Print

*/

/* 1. Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section {
	display: block;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/* 2. Font-face Icons */
@font-face {
	font-family: 'Buuk Icons';
	src: url('../fonts/buuk-icons.eot');
	src: url('../fonts/buuk-icons.eot') format('embedded-opentype'), url('../fonts/buuk-icons.woff2') format('woff2'), url('../fonts/buuk-icons.woff') format('woff'), url('../fonts/buuk-icons.ttf') format('truetype'), url('../fonts/buuk-icons.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
	font-family: 'Buuk Icons';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: none;

	/* Better Font Rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-menu:before {
	content: "\e600";
}

.icon-search:before {
	content: "\e601";
}

.icon-close:before {
	content: "\e602";
}

.icon-quote:before {
	content: "\e603";
}

.icon-arrow-left:before {
	content: "\e604";
}

.icon-arrow-up:before {
	content: "\e605";
}

.icon-arrow-down:before {
	content: "\e606";
}

.icon-arrow-right:before {
	content: "\e607";
}

.icon-facebook:before {
	content: "\e608";
}

.icon-twitter:before {
	content: "\e609";
}

.icon-googleplus:before {
	content: "\e60a";
}

.icon-mail:before {
	content: "\e60b";
}

.icon-youtube:before {
	content: "\e60c";
}

.icon-pinterest:before {
	content: "\e60d";
}

.icon-vimeo:before {
	content: "\e60e";
}

.icon-instagram:before {
	content: "\e60f";
}

.icon-dribbble:before {
	content: "\e610";
}

.icon-flickr:before {
	content: "\e611";
}

.icon-tumblr:before {
	content: "\e612";
}

.icon-linkedin:before {
	content: "\e613";
}

.icon-github:before {
	content: "\e614";
}

.icon-skype:before {
	content: "\e615";
}

.icon-soundcloud:before {
	content: "\e616";
}

.icon-envato:before {
	content: "\e617";
}

.icon-location:before {
	content: "\e618";
}

.icon-phone:before {
	content: "\e619";
}

.icon-tripadvisor:before {
	content: "\e61a";
}

.icon-foursquare:before {
	content: "\e61b";
}

.icon-yelp:before {
	content: "\e61c";
}

.icon-clock:before {
	content: "\e61d";
}

.icon-user:before {
	content: "\e61e";
}

.icon-comments:before {
	content: "\e61f";
}

.icon-category:before {
	content: "\e620";
}

.icon-tag:before {
	content: "\e621";
}

.icon-play:before {
	content: "\e622";
}

.icon-pause:before {
	content: "\e623";
}

.icon-stop:before {
	content: "\e624";
}

.icon-star:before {
	content: "\e625";
}

.icon-star-outline:before {
	content: "\e626";
}

.icon-plus:before {
	content: "\e627";
}

.icon-minus:before {
	content: "\e628";
}

.icon-resize-enlarge:before {
	content: "\e629";
}

.icon-link:before {
	content: "\e62a";
}

/* 3. Typography */
html {
	background-color: #fff;
}

body {
	height: 100%;
	font-size: 87.52%;
	line-height: 1.6875;
	font-family: "Questrial", Arial, sans-serif;
	color: #000;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0,0,0,0.1)
}

h1,
h2,
h3,
h4,
h5,
h6,
li,
p {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font-weight: inherit;
}

h1 {
	margin-bottom: 0.5em;
	font-size: 2.5em;
	line-height: 1em;
}

h1.error {
	margin-bottom: 0;
	font-size: 10em;
}

h2 {
	margin-bottom: 0.66666667em;
	font-size: 2.25em;
	line-height: 1.33333333em;
}

h3 {
	margin-bottom: 1em;
	font-size: 1.75em;
	line-height: 1.33333333em;
}

h4 {
	margin-bottom: 1.142857142857143em;
	font-size: 1.5em;
	line-height: 1.142857142857143em;
}

h5 {
	margin-bottom: 1em;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.333333333333333em;
	text-transform: uppercase;
}

h6 {
	margin-bottom: 0.4em;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.5em;
	text-transform: uppercase;
}

h2.title,
h3.title,
h4.title {
	position: relative;
}

h2.title span,
h3.title span,
h4.title span {
	color: #999;
}

h2.title {
	margin-bottom: 1em;
}

h3.title {
	margin-bottom: 1.5em;
}

h4.title {
	margin-bottom: 1.5em;
}

h2.title:after,
h3.title:after,
h4.title:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 2px;
	background-color: #000;
}

h4.title:after {
	bottom: -0.1em;
	width: 20px;
}

p,
ol,
ul,
blockquote,
pre,
form {
	margin-bottom: 1.5em;
	font-size: 1em;
	line-height: 1.75em;
}

p:empty {
	margin-bottom: 0;
}

ul {
	padding-left: 1.2em;
	list-style: square outside none;
}

ul li {
	margin-left: 1.2em;
}

ol {
	padding-left: 1.2em;
	list-style: decimal outside none;
}

ul li,
ol li {
	margin-left: 1.2em;
}

li ul,
li ol {
	margin: 0;
	padding-left: 0;
}

ul.circle {
	list-style-type: circle;
}

ul.disc {
	list-style-type: disc;
}

ol.upper-roman {
	list-style-type: upper-roman;
}

ol.lower-roman {
	list-style-type: lower-roman;
}

ol.upper-alpha {
	list-style-type: upper-alpha;
}

ol.lower-alpha {
	list-style-type: lower-alpha;
}

em {
	font-style: italic;
}

strong {
	font-weight: 700;
}

small,
.small {
	font-size: 81.25%;
}

big,
.big {
	font-size: 112.5%;
}

blockquote {
	position: relative;
	padding: 1.5em 0 1.5em 4em;
	font-style: normal;
	quotes: none;
	color: #666;
}

blockquote:before {
	position: absolute;
	top: 0.65em;
	left: 0.2em;
	font-family: 'Buuk Icons';
	font-size: 2.75em;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-indent: 0;
	content: "\e603";
	speak: none;
	-webkit-font-smoothing: antialiased;
	color: #666;
}

blockquote cite {
	display: block;
	text-align: right;
	color: #999;
}

blockquote cite img {
	display: inline-block;
	position: relative;
	top: -0.05em;
	padding: 2px;
	margin-right: 0.2em;
	border: 2px solid #eee;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

blockquote cite strong {
	color: #333;
}

blockquote p:last-child {
	margin-bottom: 0;
}

dl,
dd,
address {
	margin-bottom: 1.5em;
}

dt {
	font-size: 1.1em;
	font-weight: 500;
}

acronym,
q,
var {
	font-weight: 500;
}

abbr[title] {
	border-bottom: 1px dotted #999;
	cursor: help;
}

dfn,
var {
	font-style: italic;
}

ins {
	padding: 0.1em 0.2em;
	text-decoration: none;
	background-color: #fffad4;
}

mark {
	padding: 0.1em 0.2em;
	background-color: #000;
	color: #fff;
}

pre,
code {
	background-color: #fafafa;
}

pre,
code,
kbd,
samp,
tt {
	font-family: 'Consolas', 'Courier New', monospace;
}

pre {
	padding: 1em;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre code {
	display: block;
	padding: 0;
	border: 0;
}

sub,
sup {
	position: relative;
	font-size: 0.8em;
	line-height: 0;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	max-width: 100%;
	height: auto;
	border-width: 0;
	vertical-align: middle;
	-ms-interpolation-mode: bicubic;
}

/* 4. Separators */
hr,
.sep {
	height: 0;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-top: 2px solid #eee;
	line-height: 1;
	text-align: center;
}

hr {
	-moz-box-sizing: content-box;
}

hr.dark,
.sep.dark {
	border-top-color: #000;
}

hr.no-top-margin,
.sep.no-top-margin {
	margin-top: 0;
}

hr.no-bottom-margin,
.sep.no-bottom-margin {
	margin-bottom: 0;
}

/* 5. Tables */
table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
}

table caption {
	padding: 0 0.4em 0.4em;
	border: 0;
	font-weight: 700;
	text-align: left;
}

table th {
	position: relative;
	padding: 0.6em 0.4em;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

table tfoot td {
	position: relative;
	padding: 0.6em 0.4em;
	border-top: 2px solid #000;
}

table tbody th,
table tbody td {
	padding: 0.4em;
	border-bottom: 2px solid #eee;
}

table tbody tr:last-child th,
table tbody tr:last-child td {
	border-bottom: 0;
}

table tbody + tbody {
	border-top: 2px solid #000;
}

/* 6. Mouse selected text */
::-moz-selection {
	background-color: rgba(0, 0, 0, 0.1);
}

::-ms-selection {
	background-color: rgba(0, 0, 0, 0.1);
}

::selection {
	background-color: rgba(0, 0, 0, 0.1);
}

/* 7. Links */
a {
	color: #968422;
}

a:focus {
	outline: 2px solid #eee;
	outline: 2px solid rgba(0, 0, 0, 0.1);
}

a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}

/* 8. Forms */
form {
	margin-bottom: 1.5em;
}

label,
legend {
	display: block;
	font-weight: 400;
	font-size: 0.9em;
	color: #333;
}

input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=date],
input[type=number],
input[type=tel],
input[type=url],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.7em;
	margin: 0 0 1em;
	font-family: "Questrial", Arial, sans-serif;
	line-height: normal;
	vertical-align: baseline;
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); /* Removing the inner shadow on iOS inputs */
	background-color: #fafafa;
	border: 2px solid #eee;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=search]:hover,
input[type=date]:hover,
input[type=number]:hover,
input[type=tel]:hover,
input[type=url]:hover,
textarea:hover,
select:hover {
	border-color: #ddd;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=url]:focus,
textarea:focus,
select:focus {
	background-color: #fff;
	border-color: #000;
}

input[type=text]:focus:invalid,
input[type=password]:focus:invalid,
input[type=email]:focus:invalid,
input[type=search]:focus:invalid,
input[type=date]:focus:invalid,
input[type=number]:focus:invalid,
input[type=tel]:focus:invalid,
input[type=url]:focus:invalid,
textarea:focus:invalid {
	border-color: #cb3315;
}

input[disabled],
select[disabled],
textarea[disabled] {
	cursor: default;
	opacity: 0.5;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle; 
}

label.checkbox,
label.radiobox {
	margin-bottom: 1em;
}

select {
	padding: 0.636em 0.7em;
}

select::-ms-expand {
	display: none;
}

textarea {
	min-height: 6.3em;
	overflow: auto;
	vertical-align: top;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button,
input[type=submit],
input[type=reset],
input[type=button],
.button,
.pagination .page-numbers,
.comments-pagination {
	display: inline-block;
	padding: 1em 1.3em;
	line-height: normal;
	margin: 0 0 1.2em;
	border: 2px solid #bbb;
	border-color: rgba(0, 0, 0, 0.25);
	border-radius: 2em;
	font-family: "Questrial", Arial, sans-serif;
	font-size: 1em;
	font-weight: inherit;
	text-transform: uppercase;
	vertical-align: middle;
	text-decoration: none;
	color: #666;
	color: rgba(0, 0, 0, 0.75);
	cursor: pointer;
	outline: 0;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

button:hover,
button:focus,
input[type=submit]:hover,
input[type=submit]:focus,
input[type=reset]:hover,
input[type=reset]:focus,
input[type=button]:hover,
input[type=button]:focus,
.button:hover,
.button:focus,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
	border-color: #000;
	color: #000;
}

button:active,
input[type=submit]:active,
input[type=reset]:active,
input[type=button]:active,
.button:active,
.button.filled,
.pagination .page-numbers.current {
	border-color: #000;
	background-color: #000;
	color: #fff;
}

button.color,
input[type=submit].color,
input[type=reset].color,
input[type=button].color,
.button.color {
	border-color: #e6d265;
}

button.color:hover,
button.color:focus,
input[type=submit].color:hover,
input[type=submit].color:focus,
input[type=reset].color:hover,
input[type=reset].color:focus,
input[type=button].color:hover,
input[type=button].color:focus,
.button.color:hover,
.button.color:focus,
.button.color.filled {
	background-color: #e6d265;
	color: #000;
}

button {
	background-color: transparent;
}

.button,
.button:hover,
.button:visited {
	text-decoration: none;
}

.button.square {
	padding: 1em;
}

input[type=submit],
input[type=reset],
input[type=button] {
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

::-webkit-input-placeholder {
	color: #ccc;
	color: rgba(0, 0, 0, 0.2);
}

::-moz-placeholder {
	color: #ccc;
	color: rgba(0, 0, 0, 0.2);
}

:-ms-input-placeholder {
	color: #ccc;
	color: rgba(0, 0, 0, 0.2);
}

/* 9. Page elements */
body.scrolling-disabled {
	overflow: hidden;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0px, 0px, 0px, 0px);
	border: 0px none;
}

.textcenter {
	text-align: center;
}

.textright {
	text-align: right;
}

.textleft {
	text-align: left;
}

.clearfix:before,
.clearfix:after,
.grid-container:after {
	content: "\0020";
	visibility: hidden;
	display: block;
	height: 0;
	width: 0;
	clear: both;
}

.clearfix:before,
.clearfix:after {
	width: 0;
}

.clear {
	visibility: hidden;
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	clear: both;
}

.margin-top {
	margin-top: 1em;
}

.no-bottom {
	margin-bottom: 0;
}

.reversed-number {
	color: #bbb;
	color: rgba(0, 0, 0, 0.25);
	font-size: 2.5em;
	line-height: 1em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.reversed-number span {
	display: inline-block;
	transform: rotate(-90deg) translateY(0.1em);
}

/* 10. Thumbnails */
.thumb {
	margin-bottom: 1.5em;
	text-align: center;
}

.thumb .photo {
	position: relative;
}

.thumb .photo.bordered-shadow:after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0.5em;
	left: 0.5em;
	width: 100%;
	height: 100%;
	border: 2px solid #e6d265;
}

.thumb .photo a {
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.thumb .photo img {
	width: 100%;
}

.thumb .photo .info-type {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2em;
	height: 2em;
	font-size: 1.2em;
	line-height: 2.3em;
	margin: -1em 0 0 -1em;
	background-color: #fff;
	color: #000;
}

.thumb h5 {
	margin: 1.5em 0;
}

.thumb .bordered-shadow + h5 {
	margin-top: 2.25em;
}

.thumb p {
	padding: 0 0.5em;
}

/* 11. Blockquote rotator */
.blockquote-rotator {
	position: relative;
}

.blockquote-rotator blockquote {
	display: none;
	margin-bottom: 0;
}

.no-js .blockquote-rotator blockquote {
	display: block;
}

.blockquote-rotator blockquote:first-child {
	display: block;
}

.blockquote-rotator .rotator-pagination {
	position: absolute;
	top: 5.3em;
	left: 1.4em;
	width: 1em;
}

.blockquote-rotator .rotator-pagination span {
	float: left;
	width: 1em;
	height: 1em;
	margin-bottom: 1em;
	background-color: #eee;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.blockquote-rotator .rotator-pagination span.current {
	background-color: #e6d265;
}

/* 12. Cerchez slider */
.cerchez-slider-container {
	position: relative;
	width: 100%;
	height: 0;
	padding: 0 0 56.25% 0;
	margin-bottom: 1.5em;
	overflow: hidden;
	background-color: #f8f8f8;
}

.cerchez-slider {
	z-index: 1;
	top: 0;
	left: 0;
	height: 1600px;
	overflow: hidden;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	-ms-touch-action: pan-y;
}

.cerchez-slider .slider {
	position: relative;
	height: 100%;
	-webkit-perspective: 0;
	-webkit-backface-visibility: hidden;
}

.cerchez-slider .slider .item {
	position: absolute;
	float: left;
	width: 100%;
	overflow: hidden;
}

.cerchez-slider .slider .item img {
	width: 100%;
	height: auto;
}

.cerchez-slider .slider .item .caption {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: 100%;
	text-decoration: none;
	text-align: center;
}

.no-js .cerchez-slider .slider .item .caption,
.cerchez-slider-init .slider .item .caption {
	display: block;
}

.cerchez-slider .slider .item .caption a {
	color: #968422;
	display: inline-block;
}

.cerchez-slider .slider .item .caption .text {
	display: inline-block;
	position: relative;
	max-width: 100%;
	padding: 0.5em 1em;
	background-color: #fff;
}

.cerchez-slider .controls {
	display: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.cerchez-slider.cerchez-slider-init .controls {
	display: block;
}

.cerchez-slider .controls span {
	position: absolute;
	right: 0;
	top: 50%;
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-top: -1.55em;
	font-size: 1.2em;
	line-height: 2.05em;
	text-align: center;
	background-color: #fff;
	color: #000;
}

.cerchez-slider .controls span em:before {
	position: relative;
	font-family: 'Buuk Icons';
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.cerchez-slider .controls .prev {
	left: -1px;
}

.cerchez-slider .controls .next {
	right: -1px;
}

.cerchez-slider .controls .prev em:before {
	content: "\e604";
	left: -0.05em;
}

.cerchez-slider .controls .next em:before {
	content: "\e607";
	left: 0.05em;
}

.cerchez-slider .slider .item {
	display: none;
}

.cerchez-slider .slider .item:first-child {
	display: block;
}

.cerchez-slider-init .slider .item {
	display: block;
}

.no-js .cerchez-slider .controls {
	display: none;
}

.cerchez-slider-container.show-pagination {
	margin-bottom: 3em;
	overflow: inherit;
}

.cerchez-slider-container.show-pagination .pagination {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom:
	-1.6em;
	width: 100%;
	text-align: center;
}

.cerchez-slider-container .pagination .page {
	display: inline-block;
}

.cerchez-slider-container .pagination .page em {
	display: inline-block;
	width: 3em;
	height: 5px;
	margin: 0 0.3em;
	background-color: #eee;
}

.cerchez-slider-container .pagination .page:hover em {
	background-color: #ddd;
}

.cerchez-slider-container .pagination .page.active em {
	background-color: #000;
}

/* 13. Responsive iframe or embed */
.responsive-container {
	position: relative;
	height: 0;
	margin-bottom: 1.5em;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container video,
.responsive-container embed,
.responsive-container img,
.responsive-container .map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.responsive-wrapper {
	max-width: 100%;
}

/* 14. Skills progress bar */
.skill {
	position: relative;
	margin-bottom: 2em;
}

.skill .skill-name,
.skill .skill-percentage {
	padding: 0.5em 0.75em;
	font-size: 0.8em;
}

.skill .skill-name {
	float: left;
	font-weight: 400;
	text-transform: uppercase;
	background-color: #e6d265;
}

.skill .skill-percentage {
	float: right;
	padding: 0.5em 0.75em;
	font-size: 0.8em;
}

.skill .skill-level,
.skill .skill-level-active {
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 0;
}

.skill .skill-level {
	width: 100%;
	background-color: #eee;
}

.skill .skill-level-active {
	background-color: #e6d265;
}

/* 15. Alert */
.alert,
.box {
	padding: 1em;
	border: 1px solid #eee;
	background-color: #f8f8f8;
}

.alert {
	margin-bottom: 1em;
	font-size: 0.9em;
}

.box {
	margin-bottom: 1.5em;
}

.alert.success {
	background-color: #defcca;
	border-color: #95f8a5;
}

.alert.notice {
	background-color: #fffad4;
	border-color: #fcf08d;
}

.alert.error {
	background-color: #fe4929;
	color: #fff;
	border-color: #cb3315;
}

/* 16. Tabs */
.tab-container {
	margin-bottom: 1.5em;
}

.tab-container .tab_content {
	display: none;
	padding: 1.25em;
	border: 1px solid #eee;
	background-color: #f8f8f8;
}

.tab-container .tab_content.active {
	display: block;
}

.tab-container .tab_content :last-child {
	margin-bottom: 0;
}

.tab-container .tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tab-container .tabs li {
	float: left;
	margin: 0;
	border: 1px solid #fff;
	border-bottom: 0;
}

.tab-container .tabs li.active {
	position: relative;
	border-color: #eee;
}

.tab-container .tabs li.active:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #f8f8f8;
}

.tab-container .tabs li a {
	display: block;
	text-decoration: none;
	color: #000;
	text-transform: uppercase;
	padding: 0.75em 1.3em 0.75em;
	outline: 0;
}

.tab-container .tabs li.active a {
	background-color: #f8f8f8;
}

/* 17. Pricing table */
.pricing-table .price-item {
	margin-bottom: 1.5em;
	border: 2px solid #e6d265;
	text-align: center;
	background-color: #fafafa;
}

.pricing-table .price-item .price-title {
	margin: 0;
	padding: 1em;
	border-bottom: 2px solid #e6d265;
	text-transform: uppercase;
}

.pricing-table .price-item .price-tag {
	display: block;
	margin-bottom: 1em;
	padding: 0.75em;
	border-bottom: 2px solid #e6d265;
	font-size: 1.75em;
}

.pricing-table .price-item .price-tag span {
	display: block;
	font-size: 0.5em;
	font-weight: 400;
	color: #999;
	line-height: 1;
}

.pricing-table .price-item ul {
	display: block;
	padding: 0 0.5em;
	list-style: none;
}

.pricing-table .price-item ul li {
	margin-left: 0;
}

.pricing-table .price-item .button {
	margin-bottom: 2em;
}

.pricing-table .special {
	border-color: #000;
}

.pricing-table .special .price-title {
	background-color: #000;
	color: #fff;
}

.pricing-table .special .price-title, .pricing-table .special .price-tag {
	border-color: #000;
}

/* 18. Social links */
a.social-link {
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	margin: 0.1em 0.2em 0.5em 0;
	border: 2px solid #000;
	line-height: 2.5em;
	text-decoration: none;
	text-align: center;
	color: #000;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

a.social-link:focus,
a.social-link:hover {
	border-color: #000;
	text-decoration: none;
	color: #fff;
	background-color: #000;
}

.social-link.color {
	background-color: #666;
	border-color: #666;
	color: #fff;
}

.social-link.color.icon-facebook {
	background-color: #3b5998;
	border-color: #3b5998;
}

.social-link.color.icon-twitter {
	background-color: #00aced;
	border-color: #00aced;
}

.social-link.color.icon-googleplus {
	background-color: #dd4b39;
	border-color: #dd4b39;
}

.social-link.color.icon-envato {
	background-color: #82B540;
	border-color: #82B540;
}

.social-link.color.icon-github {
	background-color: #171515;
	border-color: #171515;
}

.social-link.color.icon-flickr {
	background-color: #ff0084;
	border-color: #ff0084;
}

.social-link.color.icon-vimeo {
	background-color: #86c9ef;
	border-color: #86c9ef;
}

.social-link.color.icon-pinterest {
	background-color: #cb2027;
	border-color: #cb2027;
}

.social-link.color.icon-tumblr {
	background-color: #32506d;
	border-color: #32506d;
}

.social-link.color.icon-linkedin {
	background-color: #007bb6;
	border-color: #007bb6;
}

.social-link.color.icon-dribbble {
	background-color: #ea4c89;
	border-color: #ea4c89;
}

.social-link.color.icon-instagram {
	background-color: #3f729b;
	border-color: #3f729b;
}

.social-link.color.icon-skype {
	background-color: #00aff0;
	border-color: #00aff0;
}

.social-link.color.icon-youtube {
	background-color: #c4302b;
	border-color: #c4302b;
}

.social-link.color.icon-soundcloud {
	background-color: #ff7700;
	border-color: #ff7700;
}

.social-link.color.icon-location {
	background-color: #0f9d58;
	border-color: #0f9d58;
}

.social-link.color.icon-foursquare {
	background-color: #0072b1;
	border-color: #0072b1;
}

.social-link.color.icon-tripadvisor {
	background-color: #589442;
	border-color: #589442;
}

.social-link.color.icon-yelp {
	background-color: #af0606;
	border-color: #af0606;
}

.social-link.color.icon-mail {
	background-color: #333;
	border-color: #333;
}

/* 19. CSS3 animations */
@-webkit-keyframes fadefromright { from { opacity: 0; -webkit-transform: translateX(2em); } to { opacity: 1; -webkit-transform: translateX(0); } }
@-moz-keyframes fadefromright { from { opacity: 0; -moz-transform: translateX(2em); } to { opacity: 1; -moz-transform: translateX(0); } }
@keyframes fadefromright { from { opacity: 0; transform: translateX(2em); } to { opacity: 1; transform: translateX(0); } }

/* 20. Secondary panels */
.secondary {
	visibility: hidden;
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e6d265;
	opacity: 0;
	transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

.secondary.open {
	visibility: visible;
	opacity: 1;
	overflow-y: auto;
}

.secondary-helper {
	position: absolute;
	z-index: 6;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.4em;
	background-color: #e6d265;
	transition: background-color 0.4s ease-in-out;
}

.secondary-helper.open {
	background-color: #fff;
}

.secondary.open .panels {
	max-width: 80%;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.secondary .panel {
	padding: 1.5em;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
	transition-delay: 0.2s;
	transform: translateY(-0.5em);
}

.secondary #panel-menu.panel {
	padding-bottom: 0;
}

.secondary .panel .list-description {
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 2px solid #000;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	font-size: 0.9em;
	color: #999;
	color: rgba(0, 0, 0, 0.5);
}

.secondary .chapter-menu {
	margin-top: 1.5em;
}

.secondary .chapter-menu ul {
	margin-bottom: 0;
}

.secondary #panel-menu ul {
	padding-left: 0;
	list-style: none;
}

.secondary #panel-menu li {
	margin-left: 0;
}

.secondary #panel-menu li li {
	padding: 0.2em 0;
	margin-left: 1em;
}

.secondary #panel-menu .chapter-menu li ul {
	padding: 0.5em 0 0.5em 1.2em;
	list-style: decimal;
}

.secondary #panel-menu a {
	padding: 0.3em 0;
	text-decoration: none;
	color: #000;
}

.secondary #panel-search .ajax-results {
	padding-left: 0;
	margin-top: 0.5em;
	margin-bottom: 0;
	list-style: none;
}

.secondary #panel-search .ajax-results li {
	margin-left: 0;
}

.secondary #panel-search .ajax-results li.view-all {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 2px solid #000;
	border-top-color: rgba(0, 0, 0, 0.1);
}

.secondary #panel-search .ajax-results li a {
	display: inline-block;
	padding: 0.3em 0;
	text-decoration: none;
	color: #000;
}

.secondary #panel-search .ajax-results li.focus {
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
}

.secondary #panel-search .ajax-results li.view-all.focus {
	background-color: transparent;
}

.secondary #panel-search .ajax-results li a strong {
	font-weight: 400;
	text-decoration: underline;
}

.secondary.open .panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.secondary-links {
	position: absolute;
	z-index: 20;
	top: 2.75em;
	right: 1.5em;
	height: 2.5em;
}

.secondary-links a {
	float: right;
	position: relative;
	margin-left: 0.5em;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	text-align: center;
	text-decoration: none;
	color: #000;
}

.secondary-links a.toggle-search {
	display: none;
}

.secondary-links a em {
	position: absolute;
	top: 0.13em;
	left: 0;
	width: 100%;
	font-size: 2em;
	line-height: 0.9em;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease-in-out, transform 0.5s ease;
	transform: translateY(0);
}

.secondary-links a em.icon-close {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.2em);
}

.secondary-links a.on em.icon-close {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.secondary-links a.on em.icon-menu,
.secondary-links a.on em.icon-search {
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.2em);
}

/* 21. Main content */
.main {
	padding-top: 0.4em;
}

.main .inner {
	padding: 1.5em;
}

.main .full-width-section {
	text-align: center;
	background-color: #eee;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-image: url(../img/sample-post.png);
}

.main .full-width-section .wrapper {
	padding: 12em 0;
}

.main .sep-sections {
	margin: 0 1.5em;
}

.main .sep-sections .sep {
	margin: 0;
}

/* 22. Header */
#header.featured {
	background-color: #eee;
	background-repeat: repeat;
	background-image: url(../img/sample-header-pattern.png);
}

#header #featured-content {
	padding-top: 1.5em;
}

#header #featured-content .button,
.main .full-width-section .button {
	margin-right: 0.5em;
}

#header #featured-content .button:last-child,
.main .full-width-section .button:last-child {
	margin-right: 0;
}

#header .featured-image {
	display: block;
	margin-top: 1.5em;
	opacity: 0;
	-webkit-transform: translateX(2em);
	-moz-transform: translateX(2em);
	transform: translateX(2em);
	-webkit-animation: fadefromright 2s ease 1 forwards;
	-moz-animation: fadefromright 2s ease 1 forwards;
	animation: fadefromright 2s ease 1 forwards;
	opacity: 1\9\0; transform: translateY(0)\9\0; /* hacks for ie9 */
}

#logo h1 {
	margin-bottom: 0;
	font-size: 1em;
	line-height: 1;
}

#logo h1 a {
	display: inline-block;
}

#logo h1.text {
	font-size: 2.5em;
	line-height: 1;
}

#logo h1.text span {
	position: relative;
	top: -0.117em;
	left: -0.14em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#logo a {
	color: #000;
	text-decoration: none;
}

#logo .site-description {
	margin-bottom: 0;
	color: #999;
	color: rgba(0, 0, 0, 0.5);
}

#site-menu {
	display: none;
}

/* 23. Archive view */
.post-list {
	margin-bottom: 1.75em;
}

.post .thumb {
	margin-bottom: 2.5em;
}

.post h5 {
	margin-top: 0.5em;
	margin-bottom: 0.2em;
}

.post h5 a,
.post .meta-info a,
.post a.read-more {
	text-decoration: none;
}

.post h5 a {
	color: #000;
}

.post .meta-info,
.post .meta-info a,
.post a.read-more {
	color: #999;
}

.post .meta-info a:hover,
.post .meta-info a:focus,
.post a.read-more:hover,
.post a.read-more:focus {
	color: #000;
}

.post .meta-info span {
	margin-left: 0.5em;
}

.post .meta-info > span:first-child {
	margin-left: 0;
}

.post .meta-info span em {
	display: inline-block;
	position: relative;
	top: 0.085em;
	min-width: 1em;
}

.post a.read-more {
	text-transform: uppercase;
}

.post-list .pagination {
	margin-top: 1.6em;
	padding-top: 1.6em;
	border-top: 1px solid #eee;
	text-align: center;
}

.post-list .pagination .page-numbers {
	margin-bottom: 0;
}

.post-list .pagination .page-numbers em {
	font-size: 0.75em;
}

.post-list-thumbs .post h5 {
	margin-top: 0;
}

.post-list-thumbs .post {
	margin-bottom: 2em;
}

.post-list-thumbs .post .table-layout {
	display: table;
	width: 100%;
}

.post-list-thumbs .post .thumb,
.post-list-thumbs .post .details {
	display: table-cell;
	vertical-align: middle;
}

.post-list-thumbs .post .thumb {
	width: 10em;
}

.post-list-thumbs .post .details {
	padding-left: 1.5em;
}

/* 24. Single post */
.single-post .thumb,
.single-post .title + .responsive-container {
	margin-bottom: 2em;
}

.single-post .post-info {
	margin-top: 1.5em;
	padding: 1.5em 0;
	border-top: 1px solid #eee;
}

.single-post .post-info:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

.single-post .post-info p {
	margin-bottom: 0;
}

.single-post .post-info p.meta {
	margin-bottom: 0.75em;
	color: #999;
}

.single-post .post-info p.meta a {
	font-weight: 700;
	color: #999;
}

.single-post .post-info .share-post strong {
	margin-right: 0.75em;
	font-size: 1.1em;
	text-transform: uppercase;
}

.single-post .post-info .share-post a {
	margin-bottom: 0;
}

/* 25. Comments */
#comments {
	border-top: 1px solid #eee;
}

#comments h3 {
	margin-bottom: 1em;
	margin-top: 1em;
}

.commentlist {
	margin-left: 0;
	padding-left: 0;
	padding-bottom: 2em;
	border-bottom: 1px solid #eee;
	list-style: none;
	text-align: left;
}

.commentlist ol.children {
	list-style: none;
}

.commentlist .comment {
	padding-top: 2em;
	margin-left: 0;
	margin-top: 2em;
	border-top: 1px solid #eee;
}

.commentlist .comment .comment-author {
	float: left;
	width: 5em;
	height: 5em;
	margin-right: 0.8em;
}

.commentlist .comment .comment-author img {
	display: block;
	width: 100%;
	max-height: 100%;
}

.commentlist .comment h6 {
	padding-top: 1em;
	margin-bottom: 0.2em;
	text-transform: none;
}

.commentlist .comment h6 a,
.commentlist .comment-date a {
	text-decoration: none;
}

.commentlist .comment h6 a.url,
.commentlist .comment-date a {
	color: #000;
}

.commentlist .comment a.comment-reply-link {
	position: relative;
	top: -0.1em;
	margin-left: 0.2em;
	font-size: 0.8em;
	font-weight: 400;
	text-transform: none;
}

.commentlist .comment p.comment-date {
	font-size: 0.8em;
}

.commentlist .comment p {
	margin-bottom: 0.2em;
}

.commentlist .comment .children {
	margin: 0 0 0 1.5em;
}

.commentlist .comment .comment-body .comment_body_text {
	position: relative;
	padding: 1em;
	margin-top: 2em;
	border: 1px solid #eee;
	font-size: 0.9em;
}

.commentlist .comment .comment-body .comment_body_text p:last-child {
	margin-bottom: 0;
}

.commentlist .comment .comment-body .comment_body_text:before,
.commentlist .comment .comment-body .comment_body_text:after {
	content: '';
	position: absolute;
	left: 35px;
	width: 0;
	height: 0;
}

.commentlist .comment .comment-body .comment_body_text:before {
	top: -16px;
	margin-left: -8px;
	border-left: 8px solid transparent;
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #eee;
}

.commentlist .comment .comment-body .comment_body_text:after {
	top: -13px;
	margin-left: -7px;
	border-left: 7px solid transparent;
	border-top: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #fff;
}

.commentlist .comment.bypostauthor .comment-body .comment_body_text {
	border-color: #ccc;
	background-color: #fffdf2;
}

.commentlist .comment.bypostauthor .comment-body .comment_body_text:before {
	border-bottom-color: #ccc;
}

.commentlist .comment.bypostauthor .comment-body .comment_body_text:after {
	border-bottom-color: #fffdf2;
}

.comment-form,
.comment-form .form-submit,
.comment-form input#submit {
	margin-bottom: 0;
}

/* 26. Widgets */
.widget {
	margin-bottom: 3em;
}

.widget ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.widget ul ul {
	padding-left: 1em;
}

.widget li {
	margin-left: 0;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	list-style: none;
}

.widget li.current-cat > a {
	color: #999;
}

.widget h6 {
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #eee;
}

.widget-thumbs .thumbs {
	margin: 0 -5px;
}

.widget-thumbs a {
	float: left;
	width: 50%;
	padding: 5px;
}

.widget-thumbs a img {
	width: 100%;
}

.searchform {
	margin-bottom: 0;
	position: relative;
}

.searchform input[type="text"] {
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 2.5em;
	border: 0;
	border-bottom: 2px solid #000;
	background-color: transparent;
}

.searchform input[type="submit"],
.searchform span.icon-search {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	width: 1.2em;
	height: 1.3em;
	padding: 0;
	border: 0;
	margin: 0;
	text-align: center;
	font-family: 'Buuk Icons';
	font-size: 1.8em;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 1.3em;
	text-transform: none;
	speak: none;
	-webkit-font-smoothing: antialiased;
	background: transparent;
	color: #000;
}

.searchform span.icon-search {
	z-index: 1;
}

.go-to-top {
	display: none;
}

#contact_form {
	margin-bottom: 0;
}

#contact_form .message {
	display: none;
}

/* 27. Footer */
#footer p {
	margin-bottom: 0;
}

#footer a.social-link {
	font-size: 0.9em;
}

/* 28. Media queries */
/*
 * Does the same thing as <meta name="viewport" content="width=device-width">, but in the future W3C standard way. -ms- prefix is required for IE10+ to render responsive styling in Windows 10 "snapped" views; IE10+ does not honor the meta tag.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/* 29. Webkit scrollbar styling */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	::-webkit-scrollbar {
		width: 0.75em;
		height: 0.75em;
	}

	::-webkit-scrollbar-track {
		background-color: #f9f9f9;
	}

	::-webkit-scrollbar-thumb:vertical {
		height: 5em;
		background-color: #000;
	}
}

/* 30. Media query: Mobile Large */
@media screen and (min-width: 38.75em) {
	.secondary-helper {
		position: fixed;
		width: 4em;
		height: 100%;
	}

	.secondary.open .panels {
		max-width: none;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 4em;
	}

	.secondary-links {
		position: fixed;
		top: 2.95em;
		left: 0.75em;
		right: auto;
		width: 2.5em;
		height: auto;
	}

	.secondary-links a {
		margin-left: 0;
		margin-bottom: 0.5em;
	}

	.secondary-links a.toggle-search {
		display: block;
	}

	.secondary-links a em {
		transform: translateX(0);
	}

	.secondary-links a em.icon-close {
		transform: translateY(0);
		transform: translateX(-0.2em);
	}

	.secondary-links a.on em.icon-close {
		transform: translateX(0);
	}

	.secondary-links a.on em.icon-menu,
	.secondary-links a.on em.icon-search {
		transform: translateY(0);
		transform: translateX(0.2em);
	}

	.secondary .panel {
		padding: 3em;
		transform: translateY(0);
		transform: translateX(-0.5em);
	}

	.secondary #panel-menu.panel {
		padding-bottom: 3em;
	}

	.secondary .panel .list-description {
		border-bottom: 0;
	}

	.secondary .mobile-menu {
		margin-bottom: 1.5em;
		border-bottom: 2px solid #000;
		border-bottom-color: rgba(0, 0, 0, 0.1);
	}

	.secondary.open .panel {
		transform: translateX(0);
	}

	.secondary.open-menu #panel-menu,
	.secondary.open-search #panel-search {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	.secondary.open-search #panel-menu,
	.secondary.open-menu #panel-search {
		display: none;
	}

	.secondary .chapter-menu {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.secondary #panel-menu {
		padding-bottom: 3em;
	}

	.main {
		padding-top: 0;
		padding-left: 4em;
	}

	.main .inner {
		padding: 3em;
	}

	.main .sep-sections {
		margin: 0 3em;
	}

	#header #featured-content {
		position: relative;
		padding-top: 3em;
		padding-right: 40%;
	}

	#header .featured-image {
		position: absolute;
		top: 3em;
		right: -1em;
		width: auto;
		max-width: 40%;
		margin: 0;
	}

	.thumb .photo.bordered-shadow:after {
		top: 0.75em;
		left: 0.75em;
	}

	.go-to-top {
		visibility: hidden;
		display: block;
		position: fixed;
		z-index: 10;
		width: 2.5em;
		height: 2.5em;
		left: 0.75em;
		bottom: 2em;
		line-height: 3em;
		text-align: center;
		text-decoration: none;
		color: #000;
		opacity: 0;
		-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, bottom 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, bottom 0.2s ease-in-out;
	}

	.go-to-top em {
		font-size: 2em;
	}

	.go-to-top.active {
		visibility: visible;
		opacity: 1;
		bottom: 2.95em;
	}

}

/* 31. Media query: Tablet Small */
@media screen and (min-width: 46.25em) {

	/* add grid based layout only for larger screens */
	.grid-container .col {
		display: inline;
		float: left;
		margin-right: 5%;
	}

	.grid-container .grid2.col {
		width: 12.5%;
	}

	.grid-container .grid3.col {
		width: 21.25%;
	}

	.grid-container .grid4.col {
		width: 30%;
	}

	.grid-container .grid6.col {
		width: 47.5%;
	}

	.grid-container .grid8.col {
		width: 65%;
	}

	.grid-container .grid9.col {
		width: 73.75%;
	}

	.grid-container .grid10.col {
		width: 82.5%;
	}

	.grid-container .grid12.col {
		width: 100%;
		margin-right: 0;
	}

	.grid-container .omega,
	.grid-container .grid12.col {
		margin-right: 0;
	}

	blockquote {
		padding-right: 4em;
	}

	.secondary.open .panels {
		padding-left: 5em;
	}

	.secondary-links {
		top: 3.95em;
		left: 1.25em;
	}

	.secondary-links a {
		margin-bottom: 0.75em;
	}

	.secondary .panel {
		padding: 4em;
	}

	.secondary #panel-menu.panel {
		padding-bottom: 4em;
	}

	.secondary-helper {
		width: 5em;
	}

	.main {
		padding-left: 5em;
	}

	.main .inner {
		padding: 4em;
	}

	.main .sep-sections {
		margin: 0 4em;
	}

	.main .post-list {
		position: relative;
	}

	.main .post-list select.switch-category {
		position: absolute;
		top: 0.2em;
		right: 0;
		width: auto;
		margin-bottom: 0;
	}

	.post-list .pagination {
		padding-top: 3em;
	}

	#contact_form #message {
		margin-top: 2.5%;
		margin-bottom: 2em;
	}

	#contact_form input[type="submit"] {
		margin-bottom: 0;
	}

	.go-to-top {
		left: 1.25em;
		bottom: 3em;
	}

	.go-to-top.active {
		bottom: 3.95em;
	}

	#footer p {
		float: left;
	}

	#footer p:last-child {
		float: right;
		margin-top: 0.3em;
	}

	#footer a.social-link {
		margin-bottom: 0;
	}
}

/* 32. Media query: Tablet Large */
@media screen and (min-width: 55em) {
	body {
		font-size: 100%;
	}

	#header #featured-content {
		padding-right: 50%;
	}

	#header .featured-image {
		top: 3em;
		max-width: 48%;
	}

	.main .post-list select.switch-category {
		top: 0.5em;
	}

	.post-list-thumbs .post .thumb {
		width: 6em;
	}

	.post-list-thumbs .post .details {
		padding-left: 2em;
	}

	.searchform input[type="submit"],
	.searchform span.icon-search {
		width: 1.2em;
		height: 1.35em;
		font-size: 1.6em;
		line-height: 1.35em;
	}

}

/* 33. Media query: Desktop Small */
@media screen and (min-width: 59.6875em) {
	.secondary-links {
		top: 4.95em;
	}

	.secondary .panel,
	.main .inner {
		padding: 5em;
	}

	.main .sep-sections {
		margin: 0 5em;
	}

	.secondary #panel-menu.panel {
		padding-bottom: 5em;
	}

	#header #featured-content {
		padding-top: 5em;
		padding-right: 53%;
	}

	#header .featured-image {
		top: 4.5em;
		max-width: 52%;
	}

	#header .table-layout {
		display: table;
		width: 100%;
	}

	#header .table-layout .table-cell {
		display: table-cell;
		vertical-align: middle;
	}

	#site-menu ul {
		margin-bottom: 0;
		padding-left: 0;
		text-align: right;
		list-style: none;
	}

	#site-menu li {
		display: inline-block;
		margin-left: 0;
		list-style: none;
	}

	#site-menu.menu-separators li:first-child {
		margin-left: 0;
	}

	#site-menu li a {
		display: inline-block;
		padding: 0.3em 0.6em;
		margin-top: 0.2em;
		margin-bottom: 0.2em;
		text-decoration: none;
		color: #000;
		transition: color 0.2s ease-in-out;
	}

	.no-touch #site-menu li a:hover,
	#site-menu li.hover > a:hover,
	#site-menu li.current-menu-item > a,
	#site-menu li.current-menu-parent > a {
		color: #999;
		color: rgba(0, 0, 0, 0.5);
	}

	#site-menu li.menu-item-has-children {
		position: relative;
	}

	#site-menu li.menu-item-has-children ul {
		visibility: hidden;
		position: absolute;
		z-index: 97;
		top: 100%;
		right: 50%;
		width: 15em;
		padding: 0.5em 0;
		margin-top: 1.5em;
		margin-right: -6.75em;
		border: 2px solid #000;
		font-size: 0.9em;
		text-align: center;
		background-color: #fafafa;
		opacity: 0;
		transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, margin 0.2s ease-in-out;
		transition-delay: 0.2s;
	}

	#site-menu li.menu-item-has-children li.menu-item-has-children ul {
		top: -0.85em;
		right: 100%;
		margin: 0 0.5em 0 0;
		font-size: 1em;
	}

	.no-touch #site-menu li.menu-item-has-children:hover > ul,
	#site-menu li.menu-item-has-children.hover > ul {
		visibility: visible;
		margin-top: 1.75em;
		opacity: 1;
	}

	.no-touch #site-menu li.menu-item-has-children li.menu-item-has-children:hover > ul,
	#site-menu li.menu-item-has-children li.menu-item-has-children.hover > ul {
		margin-right: 0;
	}

	#site-menu li.menu-item-has-children:after {
		visibility: hidden;
		content: "\e606";
		position: absolute;
		z-index: 96;
		left: 0;
		top: 100%;
		height: 1.75em;
		width: 100%;
		margin-top: -0.5em;
		font-family: 'Buuk Icons';
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		text-align: center;
		line-height: 1;
		speak: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		opacity: 0;
		transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, margin-top 0.2s ease-in-out;
		transition-delay: 0.2s;
	}

	.no-touch #site-menu li.menu-item-has-children li.menu-item-has-children:after,
	#site-menu li.menu-item-has-children li.menu-item-has-children:after {
		content: none;
	}

	.no-touch #site-menu li.menu-item-has-children:hover:after,
	#site-menu li.menu-item-has-children.hover:after {
		visibility: visible;
		margin-top: -0.25em;
		opacity: 1;
	}

	#site-menu li.menu-item-has-children ul li {
		display: block;
		width: 100%;
		margin-left: 0;
	}

	#site-menu li.menu-item-has-children ul li a {
		display: block;
	}

	.no-touch #site-menu li.menu-item-has-children ul li a:hover,
	#site-menu li.menu-item-has-children ul li.hover > a {
		background-color: rgba(0, 0, 0, 0.02);
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	}

	#site-menu.menu-separators li:before {
		content: '';
		display: inline-block;
		position: relative;
		top: -0.25em;
		width: 1em;
		height: 1px;
		background-color: #bbb;
		background-color: rgba(100, 100, 100, 0.25);
	}

	#site-menu.menu-separators li:first-child:before,
	#site-menu.menu-separators li li:before {
		content: none;
	}

	#site-menu.menu-separators li.menu-item-has-children:after {
		margin-left: 0.625em;
	}

	#site-menu.menu-separators li.menu-item-has-children ul {
		margin-right: -8.5em;
	}

	.secondary .mobile-menu {
		display: none;
	}

	.secondary #panel-menu .chapter-menu {
		margin-top: 0;
	}

	.secondary #panel-menu .chapter-menu > ul {
		position: relative;
		width: 50%;
		padding-right: 2.5em;
	}

	.secondary #panel-menu .chapter-menu li {
		padding: 0.3em 0;
	}

	.no-touch .secondary #panel-menu .chapter-menu li a {
		transition: color 0.2s ease-in-out;
	}

	.no-touch  .secondary #panel-menu .chapter-menu li a:hover {
		color: #999;
		color: rgba(0, 0, 0, 0.5);
	}

	.secondary #panel-menu .chapter-menu li ul {
		display: none;
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		padding: 0 0 5em 3.5em;
	}

	.secondary #panel-menu .chapter-menu li li {
		margin-left: 0;
	}

	.secondary #panel-menu .chapter-menu li.current-menu-parent ul {
		display: block;
	}

	.secondary #panel-menu .chapter-menu li.current-menu-parent ul ul {
		display: none;
	}

	.secondary #panel-menu .chapter-menu li.current-menu-parent > a,
	.secondary #panel-menu .chapter-menu li.current-menu-item {
		position: relative;
		font-weight: 700;
	}

	.secondary #panel-menu .chapter-menu li.current-menu-parent > a,
	.secondary #panel-menu .chapter-menu li.current-menu-item a {
		color: #000;
	}


	.secondary #panel-menu .chapter-menu li.current-menu-parent > a:after,
	.secondary #panel-menu .chapter-menu li.current-menu-item:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 30px;
		height: 2px;
		background-color: #000;
	}

	.secondary #panel-menu .chapter-menu li.current-menu-parent li.current-menu-item:after {
		bottom: 0.3em;
	}

	.secondary #panel-search .fields input[type="text"] {
		width: 44%;
		transition: width 0.2s ease-in-out;
	}

	.secondary #panel-search .fields input[type="submit"],
	.secondary #panel-search .fields span.icon-search {
		right: 56%;
		transition: right 0.2s ease-in-out;
	}

	.secondary #panel-search .fields input[type="text"]:focus {
		width: 100%;
	}

	.secondary #panel-search .fields input[type="text"]:focus + input[type="submit"], 
	.secondary #panel-search .fields input[type="text"]:focus ~ span.icon-search {
		right: 0;
	}

	blockquote {
		padding-left: 5em;
		padding-right: 5em;
	}

	blockquote:before {
		left: 0.4em;
	}

	.blockquote-rotator .rotator-pagination {
		left: 2em;
	}

	.single-post .thumb,
	.single-post .title + .responsive-container {
		margin-bottom: 3em;
	}
}

/* 34. Media query: Desktop Medium */
@media screen and (min-width: 68.75em) {
	#header #featured-content {
		padding-right: 60%;
	}

	#header .featured-image {
		top: 5em;
		max-width: 60%;
		right: -2em;
	}

	#site-menu li {
		margin-left: 0.5em;
	}

	#site-menu li a {
		padding: 0.4em 0.8em;
	}

	#site-menu.menu-separators li:before {
		width: 2em;
	}

	#site-menu.menu-separators li.menu-item-has-children:after {
		margin-left: 1.125em;
	}

	#site-menu.menu-separators li.menu-item-has-children ul {
		margin-right: -9em;
	}

	.secondary .mobile-menu {
		display: none;
	}

	.secondary #panel-menu .chapter-menu > ul {
		width: 33.333%;
	}

	.secondary.open-menu {
		background-repeat: no-repeat;
		background-position: right bottom;
		background-attachment: fixed;
		background-size: 258px 267px; /* adjust based on the image size and preference */
		background-image: url(../img/sample-drawing1.jpg);
	}

	.secondary.open-search {
		background-repeat: no-repeat;
		background-position: right bottom;
		background-attachment: fixed;
		background-size: 250px 245px; /* adjust based on the image size and preference */
		background-image: url(../img/sample-drawing2.jpg);
	}

	.secondary #panel-search .searchform {
		width: 65%;
	}

	.secondary #panel-search .fields input[type="text"] {
		width: 53%;
	}

	.secondary #panel-search .fields input[type="submit"],
	.secondary #panel-search .fields span.icon-search {
		right: 47%;
	}

	.blockquote-rotator .rotator-pagination {
		top: auto;
		left: 5em;
		bottom: 2.1em;
		width: auto;
	}

	.blockquote-rotator .rotator-pagination span {
		margin-right: 0.5em;
		margin-bottom: 0;
	}

	.blockquote-rotator blockquote cite {
		padding-left: 20%;
	}

	.post-list-thumbs .post {
		margin-bottom: 3em;
	}

}

/* 35. Media query: Desktop Large */
@media screen and (min-width: 77.5em) {
	#header .featured-image {
		top: 3em;
		max-width: 600px;
		right: -2em;
	}

	.secondary.open-menu {
		background-size: 390px 372px; /* adjust based on the image size and preference */
	}

	.secondary.open-search {
		background-size: 380px 372px; /* adjust based on the image size and preference */
	}

	.secondary .panel,
	.main .inner,
	.main .full-width-section .wrapper {
		max-width: 78em;
		margin: 0 auto;
	}

	.main .sep-sections .sep {
		max-width: 68em;
		margin: 0 auto;
	}

	.main .full-width-section {
		max-width: none;
	}

	.main .full-width-section .wrapper {
		padding: 15em 2em;
	}

	.post h5 {
		margin-top: 1.5em;
	}

	.single-post .post-info {
		padding: 3.5em 0;
		margin-top: 3.5em;
	}

	.single-post .post-info p.meta {
		float: left;
		margin-top: 0.5em;
		margin-bottom: 0;
	}

	.single-post .post-info .share-post {
		float: right;
	}

	#comments h3 {
		margin-top: 2em;
	}

	#comments .available-tags {
		margin-top: 1em;
		margin-bottom: 2em;
	}

	.commentlist {
		padding-bottom: 3.5em;
	}

	.commentlist .comment {
		padding-top: 3.5em;
		margin-top: 3.5em;
	}

	.commentlist .comment .comment-author {
		width: 6em;
		height: 6em;
		margin-right: 1em;
	}

	.commentlist .comment .comment-body {
		position: relative;
		margin-left: 7em;
	}

	.commentlist .comment .comment-body .comment_body_text {
		margin-top: 0.5em;
	}

	.commentlist .comment .comment-body .comment_body_text:before,
	.commentlist .comment .comment-body .comment_body_text:after {
		left: 1.25em;
	}


	.commentlist .comment h6 {
		padding-top: 0.5em;
		padding-right: 8em;
	}

	.commentlist .comment p.comment-date {
		position: absolute;
		top: 0.9em;
		right: 0;
	}

	.commentlist .comment p {
		margin-top: 0;
	}

	.commentlist .comment .children {
		margin-left: 7em;
	}

}

/* 36. Media query: Print */
@media print {
	body {
		background: none !important;
	}

	#header.featured-image {
		background-image: none !important;
	}

	.secondary,
	.secondary-links,
	.secondary-helper {
		display: none;
	}
}
/* ==== style-custom.css ==== */
/* 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: #a64826; --red-dark: #8f3d20; /* accent = ocre de la main (icône), décision du 2026-10-01 ; le nom --red est gardé pour ne rien casser */
	--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(166, 72, 38, .55); 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.is-real img { filter: none; object-position: 50% 30%; } /* vraie photo de Robert (2026-10-01) : pas d'assombrissement */
.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; object-position: 50% 30%; 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); }
/* Article en sections, photos en quinconce (maquette D, 2026-10-02) */
.post-in.post-sections { max-width: 72rem; }
.post-sections > .post-back, .post-sections > h1, .post-sections > .meta { max-width: 38rem; }
.post-sections .post-body { font-size: 1.1875rem; line-height: 1.72; }
.post-sections .post-body p { margin: 0 0 1.05em; }
.sec { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.sec:first-child { border-top: 0; padding-top: var(--s3); }
.post-body .sec h2 { font-size: var(--fs-6); line-height: 1.15; margin: 0 0 .8em; color: var(--snow); }
.post-body .sec-photo { margin: 0 0 var(--s3); }
.sec-photo img { display: block; }
.sec-photo figcaption { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.sec-texte { max-width: 38rem; }
.post-body .sec blockquote { border: 0; padding: 0; margin: 1.3em 0; }
.post-body .sec blockquote p { font-size: var(--fs-5); line-height: 1.3; font-style: italic; color: var(--snow); margin: 0; }
.sec.fin .sec-texte { margin: 0 auto; }
.sec hr.envoi { border: 0; border-top: 1px solid var(--line); margin: 2em 0 1.3em; }
.post-body .sec hr.envoi + p { font-style: italic; color: var(--snow); }
@media (max-width: 959px) {
	.sec { display: flex; flex-direction: column; }
	.sec .sec-texte { display: contents; }
	.post-body .sec h2 { order: -1; margin-bottom: .5em; }
}
@media (min-width: 960px) {
	.sec { display: grid; gap: 4rem; align-items: start; }
	.sec.gauche { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.sec.droite { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.sec.droite .sec-photo { order: 2; }
	.post-body .sec-photo { position: sticky; top: 6rem; margin: 0; }
	.sec.fin { display: block; }
}
.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); }

/* ==== margin.css ==== */
/* 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: #a64826; --red-dark: #8f3d20; /* ocre commun (2026-10-01) */
}

/* ---------- 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: #a64826; --red-dark: #8f3d20; /* ocre commun (2026-10-01) */
	background: var(--night); color: var(--text);
}
body.tome-2 #footer { background: #0d1d21; }
body.tome-2 .preview-note { background: var(--red); }


/* ---------- É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; }
/* :where() garde la priorité basse : la barre du livre (.subnav, nav.css) et l'étiquette « Aperçu » gardent leur propre position. */
.bookpage .page > :where(:not(.bk-backdrop, .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: rgba(255, 255, 255, .004); text-shadow: none; } /* 0,4 % : peint dès le départ (mesure Google), invisible à l'œil */
.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: rgba(255, 255, 255, .004); text-shadow: none; } /* 0,4 % et non 0 : peinte dès le départ pour la mesure Google, invisible à l'œil */
	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, .004); 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: .004; 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%; }
}

/* ==== fx.css ==== */
/* Robert Saxton — animations.
   Activées page par page (body.fx) et seulement quand le script a posé html.fx-on :
   sans script, ou avec « réduire les animations », la page reste entière et immobile. */

/* ---------- L'ampleur du mouvement suit le rang ----------
   Partie : un vrai geste (chiffre, titre ligne à ligne, filet sur toute la largeur).
   Chapitre : un simple fondu, bloc après bloc.
   Infos pratiques : aucun effet, tout est là tout de suite. */
:root { --ease: cubic-bezier(.2, .7, .1, 1); }

/* Ouverture de partie. */
.fx-on .fx .part-num { opacity: 0; transform: translateY(30px); transition: opacity 1.2s ease, transform 1.4s var(--ease); }
.fx-on .fx .part-label { opacity: 0; transition: opacity .8s ease .1s; }
.fx-on .fx .part h2 .ln { overflow: hidden; padding-bottom: .06em; }
.fx-on .fx .part h2 .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.fx-on .fx .part h2 .ln + .ln > span { transition-delay: .12s; }
.fx-on .fx .part-promise { opacity: 0; transform: translateY(12px); transition: opacity 1s ease .45s, transform 1.2s var(--ease) .45s; }
.fx-on .fx .part-rule { transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.fx-on .fx .part-head.in :is(.part-num, .part-label, .part-promise) { opacity: 1; transform: none; }
.fx-on .fx .part-head.in .ln > span { transform: none; }
.fx-on .fx .part-head.in .part-rule { transform: scaleX(1); }

/* Changement de lumière : le fond de la partie s'allume en y entrant. */
.fx-on .fx :is(.part-2, .part.readers) { transition: background-color 1.2s ease; }
.fx-on .fx .part-2:not(.lit) { background-color: var(--night); }
.fx-on .fx .part.readers:not(.lit) { background-color: var(--night); }

/* Chapitre : titre puis blocs, en fondu. */
.fx-on .fx :is(.chap-h, .story p, .margin-notes, .chars article, .era figcaption, .season figure, .season-list li, .gloss > div, .land > div:first-child,
	.author-photo, .man-quote, .facts-line, .reviews figure, .featured-quote, .chap .note, .readers .note) {
	opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform 1.1s var(--ease); }
.fx-on .fx :is(.chap.in, .readers > .inner.in) :is(.chap-h, .story p, .margin-notes, .chars article, .era figcaption, .season figure, .season-list li, .gloss > div,
	.land > div:first-child, .author-photo, .man-quote, .facts-line, .reviews figure, .featured-quote, .note) { opacity: 1; transform: none; }
.fx-on .fx .in :is(.story p, .chars article, .reviews figure, .season-list li, .gloss > div):nth-child(2) { transition-delay: .15s; }
.fx-on .fx .in :is(.story p, .chars article, .reviews figure, .season-list li, .gloss > div):nth-child(3) { transition-delay: .3s; }
.fx-on .fx .in :is(.story p, .chars article, .reviews figure, .season-list li, .gloss > div):nth-child(n+4) { transition-delay: .45s; }
.fx-on .fx .in :is(.margin-notes, .man-quote, .featured-quote + .featured-quote) { transition-delay: .3s; }
.fx-on .fx .in :is(.facts-line, .era figcaption) { transition-delay: .45s; }
.fx-on .fx .in .note { transition-delay: .6s; }

/* Arrivée sur l'accueil : le texte monte, les livres se posent. */
.fx-on .home.fx .hero-text > * { opacity: 0; animation: rise-in 1s var(--ease) forwards; }
.fx-on .home.fx .hero-text > :nth-child(2) { animation-delay: .1s; }
.fx-on .home.fx .hero-text > :nth-child(3) { animation-delay: .35s; }
.fx-on .home.fx .hero-text > :nth-child(4) { animation-delay: .55s; }
.fx-on .home.fx .hero-text > :nth-child(5) { animation-delay: .8s; }
.fx-on .home.fx .hero-books .book3d img { animation: settle 1.6s var(--ease) .3s both; }
.fx-on .home.fx .hero-books .b2 img { animation-delay: .45s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(70px) rotate(-4deg); } }

/* Chemin de la trilogie : chaque couverture s'allume quand la ligne l'atteint. */
.fx-on .fx .path { --p: 0; }
.fx-on .fx .tome :is(.cover img, .cover-ghost) { transition: filter .9s ease, opacity .9s ease; }
.fx-on .fx .tome > :not(.cover):not(.cover-ghost) { transition: opacity .8s ease; }
.fx-on .fx .tome:not(.lit) :is(.cover img, .cover-ghost) { filter: grayscale(1) brightness(.5); opacity: .5; }
.fx-on .fx .tome:not(.lit) > :not(.cover):not(.cover-ghost) { opacity: .3; }

/* Carte : la rive se trace, puis les lieux paraissent et Grand Marais respire. */
.fx-on .fx .map .lake { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 2.2s ease-in-out, fill-opacity 1.2s ease 1.6s; }
.fx-on .fx .map :is(.pl, text) { opacity: 0; transition: opacity .8s ease 1.8s; }
.fx-on .fx .map.in .lake { stroke-dashoffset: 0; fill-opacity: 1; }
.fx-on .fx .map.in :is(.pl, text) { opacity: 1; }
.map .ring { fill: none; stroke: var(--red); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-on .fx .map.in .ring { animation: ping 2.6s ease-out 2.4s infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }

/* Voix : les barres se lèvent de gauche à droite, comme si Robert commençait à parler. */
.fx-on .fx .voice .wave i { transform: scaleY(.08); transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 22ms); }
.fx-on .fx .voice.in .wave i { transform: none; }

/* Page d'extrait : elle se redresse comme un livre qu'on ouvre. */
.fx-on .fx .excerpt-page { opacity: 0; transform: perspective(1200px) rotateX(18deg) translateY(30px); transform-origin: bottom; transition: transform 1.4s var(--ease), opacity 1s ease; }
.fx-on .fx .excerpt-page.in { opacity: 1; transform: none; }

/* La lettrine rougeoit une fois, comme une braise qu'on attise. */
.fx-on .tome-1.fx .chap.in .story .dropcap { animation: kindle 2.4s ease .3s both; }
@keyframes kindle { 0% { color: #5a1a10; text-shadow: none; } 45% { color: #ff7a45; text-shadow: 0 0 18px rgba(255, 110, 50, .7); } 100% { color: var(--red); text-shadow: 0 0 0 transparent; } }
/* Tome 1 : une braise court le long du filet de partie. */
.fx-on .tome-1.fx .part-rule { height: 2px; background: linear-gradient(90deg, var(--line) 0 40%, #ff7a45 48%, #ffd2a8 50%, #ff7a45 52%, var(--line) 60% 100%) 100% 0 / 300% 100% no-repeat; }
.fx-on .tome-1.fx .part-head.in .part-rule { animation: glint 2s ease 1.2s both; }

/* ---------- Tome 1 : traverser les 500 ans (lié au défilement, --p de 0 à 1) ---------- */
.era-img { position: relative; overflow: hidden; border-radius: var(--r); }
.era-img img { border-radius: 0; }
.fx-on .fx .eras { --p: 0; }
/* Le présent s'éloigne. */
.fx-on .fx .era.now .era-img::after { content: ""; position: absolute; inset: 0; background: #0a0b0f; opacity: calc(var(--p) * .55); pointer-events: none; }
/* Le passé sort de la brume. */
.fx-on .fx .era.past img { transform: scale(calc(1.08 - var(--p) * .08)); }
.fx-on .fx .era.past .era-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(222, 218, 208, .95), rgba(190, 186, 176, .9)); opacity: calc(1 - var(--p) * 1.15); }
/* Le fil entre les deux époques se remplit de braise : premier segment, puis second. */
.fx-on .fx .gate::before { background: linear-gradient(#ff7a45, var(--red)) top / 100% calc(clamp(0, var(--p) * 2, 1) * 100%) no-repeat, var(--line); }
.fx-on .fx .gate::after { background: linear-gradient(var(--red), #ff7a45) top / 100% calc(clamp(0, var(--p) * 2 - 1, 1) * 100%) no-repeat, var(--line); }
.fx-on .fx .gate::before, .fx-on .fx .gate::after { width: 2px; }
.fx-on .fx .gate-n { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }

/* ---------- Tome 2 : givre et aurore ---------- */
/* La lettrine se dégivre : blanc de givre, puis le vert du livre. */
.fx-on .tome-2.fx .chap.in .story .dropcap { animation: thaw 2.6s ease .3s both; }
@keyframes thaw { 0% { color: #eef8f9; text-shadow: 0 0 14px rgba(160, 225, 235, .95); } 100% { color: var(--red); text-shadow: 0 0 0 transparent; } }
/* Un reflet de givre parcourt le filet de partie quand il se trace. */
.fx-on .tome-2.fx .part-rule { height: 2px; background: linear-gradient(90deg, var(--line) 0 40%, var(--red) 46%, #dff6f8 50%, var(--red) 54%, var(--line) 60% 100%) 100% 0 / 300% 100% no-repeat; }
.fx-on .tome-2.fx .part-head.in .part-rule { animation: glint 2s ease 1.2s both; }
@keyframes glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Le givre gagne les bords de la photo du lac (--f de 0 à 1). */
.tome-2 .season figure { position: relative; }
.fx-on .tome-2.fx .season figure { --f: 0; }
.fx-on .tome-2.fx .season figure::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; opacity: var(--f);
	background: radial-gradient(120% 90% at 50% 45%, transparent 48%, rgba(236, 246, 248, .55) 72%, rgba(248, 252, 253, .92) 100%);
	box-shadow: inset 0 0 40px 6px rgba(255, 255, 255, .5); }

@media (max-width: 899px) {
	.fx-on .fx .gate::before { background: linear-gradient(90deg, #ff7a45, var(--red)) left / calc(clamp(0, var(--p) * 2, 1) * 100%) 100% no-repeat, var(--line); }
	.fx-on .fx .gate::after { background: linear-gradient(90deg, var(--red), #ff7a45) left / calc(clamp(0, var(--p) * 2 - 1, 1) * 100%) 100% no-repeat, var(--line); }
	.fx-on .fx .gate::before, .fx-on .fx .gate::after { width: auto; height: 2px; }
}


/* ==== nav.css ==== */
/* 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; }
@media (max-width: 1100px) { .gg-bg { background-image: url(../img/rive-nord-1100.webp); } } /* même fichier que le préchargement : une seule photo téléchargée */
.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; }
/* Opacité de départ 0,4 % (et non 0) : le titre est peint dès la 1re image pour la mesure Google du contenu principal ; invisible à l'œil. */
.gg-name b { text-shadow: 0 0 40px rgba(170, 210, 255, .55); opacity: .004; 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; } }

/* ==== unifie.css ==== */
/* Style unifié (audit visuel du 2026-10-01, option 1 « une voix pour lire, une pour agir »).
   Chargée en dernier : elle complète style.css, style-custom.css, margin.css, fx.css et nav.css.
   Cinzel (--display) : logo et titres des livres seulement. Source Serif (--serif) : lecture et titres.
   Source Sans 3 (--sans) : boutons, champs, menus, mentions. Pas de petites capitales. Accent : ocre (--red). */

:root { --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif; }

/* ---------- 1. Typographie ---------- */
/* Titres : Source Serif en minuscules, demi-gras (Cinzel retirée des titres courants). */
h1, h2, .chap-h, .gloss dt, .era strong, .season-list strong, .chars h4, .margin-notes dt, .f-done-h, .gate-n, .practical h3 {
	font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; letter-spacing: -.005em; text-transform: none; font-variant: normal;
}
h1, h2 { text-wrap: balance; }
/* Ce qui vient des couvertures garde Cinzel : logo, titres des livres. */
.hdr .logo, .foot .site-title, #logo .site-title, .bk-hero h1, .tome h3, .drop b, .sheet-books b, .next-book strong, .subnav strong, .excerpt-book, .gg-name b, .gg-name i, .map .lake-name { font-family: var(--display); }

/* Interface (menus, boutons, mentions) : Source Sans, casse normale. */
.menu > li > a, .menu > li > button, .sheet li a, .subnav a, .lang a, .button, .kicker, .foot-h, .part-label, .tome .step, .cover-ghost span,
.facts-line dt, .practical .practical-h, .where-h, .era-l, .gate-l, .facts dt, .next-book em, .bk-hero-grid .kicker, .sheet-h, .gg-book span, .meta, .preview-note,
.f-row label, .f-status, .f-note, .consent, .consent .button {
	font-family: var(--sans); font-variant: normal; text-transform: none;
}
.menu > li > a, .menu > li > button { letter-spacing: .01em; font-size: 1rem; font-weight: 500; }
.sheet li a { font-size: 1.375rem; font-weight: 500; letter-spacing: 0; }
.subnav a { letter-spacing: .01em; font-size: .9375rem; }
.lang a { letter-spacing: .02em; font-weight: 600; }
/* Petites mentions (ex-petites capitales) : lisibles, sans majuscules espacées. */
.kicker, .bk-hero-grid .kicker, .tome .step, .cover-ghost span, .facts-line dt, .era-l, .gate-l, .facts dt, .next-book em, .sheet-h, .gg-book span, .where-h {
	letter-spacing: .02em; font-size: .9375rem; font-weight: 500;
}
.foot-h, .practical .practical-h { letter-spacing: .03em; font-size: .9375rem; font-weight: 600; }

/* Texte courant un peu plus grand (17 → 18 px). */
:root { --fs-3: 1.125rem; }

/* ---------- 2. Contrastes et lisibilité ---------- */
/* En-tête et barre du livre opaques au défilement : le texte de la page ne transparaît plus dessous. */
.hdr.solid, .subnav { background: var(--night-2); }
.subnav a { color: var(--snow); opacity: .78; }
.subnav a:hover, .subnav a.on { opacity: 1; }
/* Surtitres retirés : le chiffre romain dit déjà « partie I, II, III ». */
.part-label { display: none; }
/* Mentions de période (« Today », « Five centuries earlier ») : lisibles, plus en rouge. */
.era-l { color: var(--ice); }
/* Initiales décoratives B, C, R retirées : elles passaient sous le texte. */
.chars .initial { display: none; }
/* Plus aucune petite mention sous 4,5:1 : le gris des mentions est éclairci. */
.meta, .facts-line dt, .gate-l, .cover-ghost span, .f-note, .foot-bottom { color: var(--muted); }
.tome .step { color: var(--ice); }
.tome.first .step { color: #fff; background: var(--red); padding: 2px 10px; border-radius: 4px; }

/* ---------- 3. Boutons et liens : 2 boutons + 1 lien, partout ---------- */
.button, .actions .button, .tome .actions .button, .voice .button, .practical .news-form .button, .consent .button {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 46px; padding: 0 22px;
	font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; border-radius: 6px;
	border: 1px solid rgba(158, 195, 214, .5); color: var(--snow); background: transparent; text-decoration: none;
}
.button:hover, .button:focus-visible { border-color: var(--ice); color: #fff; background: rgba(158, 195, 214, .08); }
.button.filled, .actions .button.filled, .tome .actions .button.filled, .voice .button.filled, .practical .news-form .button.filled { background: var(--red); border-color: var(--red); color: #fff; }
:is(.button.filled, .actions .button.filled, .tome .actions .button.filled, .practical .news-form .button.filled):is(:hover, :focus-visible) { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
/* Bouton « Acheter » de la barre du livre : même style, plus compact. */
.subnav .buy { font-family: var(--sans); font-weight: 600; font-size: .9375rem; letter-spacing: .01em; opacity: 1; border-radius: 6px; padding: 7px 16px; }
/* Un seul style de lien : bleu glacé, soulignement fin décalé. */
.link { color: var(--ice); border-bottom: 1px solid rgba(158, 195, 214, .45); padding-bottom: 2px; }
.link:hover, .link:focus-visible { color: #fff; border-bottom-color: #fff; }
main a:not(.button):not(.link):not(.post-item a):not(.next-book) { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 4. Formulaires ---------- */
.sx-form input, .sx-form select, .sx-form textarea, .news-form input[type=email] {
	min-height: 48px; padding: .65em .9em; font-family: var(--sans); font-size: 1.0625rem; color: #fff;
	background-color: #16243a; border: 1px solid #3a4d68; border-radius: 6px;
}
.sx-form textarea { min-height: 10rem; }
.sx-form input:focus, .sx-form select:focus, .sx-form textarea:focus, .news-form input[type=email]:focus {
	background-color: #16243a; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(158, 195, 214, .25); outline: none;
}
.sx-form select { background-color: #16243a; }
.sx-form input::placeholder, .news-form input::placeholder { color: #8d9aab; }
.f-row { gap: .45em; margin-bottom: 1.25rem; }
.f-row label { font-size: .9375rem; font-weight: 500; color: var(--snow); }
.js-form.checked :invalid { border-color: #e08a6a; }
.f-status { font-family: var(--sans); font-size: .9375rem; }
.f-status.err { color: #f0a58c; }
.news-form { gap: 10px; }
/* Confirmation : même rayon que les champs, titre en Source Serif. */
.f-done { border-radius: 6px; border: 1px solid rgba(158, 195, 214, .5); border-left: 3px solid var(--ice); }
.f-done p:last-child { font-family: var(--sans); }
@media (max-width: 600px) { .sx-form .button, .news-form .button { width: 100%; } }

/* ---------- 5. Espacements : une échelle (sections 80 px ordinateur / 56 px téléphone) ---------- */
.part { padding: 80px 0 32px; }
.part-head { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 var(--s3); margin-bottom: 48px; align-items: start; }
.part-num { font-size: 4.5rem; line-height: .9; padding-top: .1em; }
.part h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); margin: 0 0 .4em; }
.part-promise { max-width: 38em; }
.chap { padding: 56px 0; }
.season-sec { margin-top: 64px; }
.practical { padding: 56px 0 64px; }
.practical p, .practical .buy { font-size: 1rem; line-height: 1.6; }
.practical h3 { font-size: 1.25rem; }
.foot li a, .foot p { font-size: 1rem; }
@media (max-width: 899px) {
	.part { padding: 56px 0 24px; }
	.part-head { grid-template-columns: 1fr; margin-bottom: 32px; }
	.part-num { font-size: 2.75rem; text-align: left; margin-bottom: 8px; }
	.chap { padding: 40px 0; }
	.season-sec { margin-top: 40px; }
	.practical { padding: 40px 0 48px; }
}

/* ---------- 6. Téléphone : accueil plus compact ---------- */
@media (max-width: 600px) {
	/* Livres : la couverture à côté du texte, plus au-dessus. */
	.path { gap: 40px; }
	.path-line { display: none; }
	.tome { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; align-items: start; }
	.tome > * { grid-column: 2; }
	.tome .cover, .tome.first .cover, .tome .cover-ghost { grid-column: 1; grid-row: 1 / span 3; width: 104px; margin-bottom: 14px; }
	.tome .cover-ghost { height: 156px; }
	.tome .cover-ghost b { font-size: 2.5rem; }
	.tome .step { margin-top: 0; justify-self: start; }
	.tome.first h3, .tome h3 { font-size: 1.375rem; }
	.tome blockquote, .tome > p:not(.step, .meta) { grid-column: 1 / -1; }
	/* L'auteur : photo plus petite. */
	.author-photo { max-width: 220px; }
	/* Pied de page sur deux colonnes. */
	.foot { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
	.foot > div:first-child, .foot > div:last-child { grid-column: 1 / -1; }
	/* Ouverture : les légendes sous les couvertures (illisibles sous la brume du décor) sont masquées ; les couvertures restent cliquables. */
	.gg-book span { display: none; }
}

/* ---------- 7. Carte de la rive nord : eau lumineuse, rive en ocre, fiche de Grand Marais ---------- */
.map-v2 .map-stage { position: relative; }
.map-v2 svg { border: 1px solid var(--line); }
.map-v2 .land { fill: #0a121e; }
.map-v2 .lake { fill: url(#map-eau); stroke: #9ec3d6; stroke-width: 1.4; }
.map-v2 .waves path { fill: none; stroke: rgba(210, 236, 248, .13); stroke-width: 1.2; }
.map-v2 .waves { animation: map-vagues 14s linear infinite; }
@keyframes map-vagues { to { transform: translateX(-120px); } }
.map-v2 .shore { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.map-v2 .shore-name { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .04em; fill: #e2a27f; }
.map-v2 .lake-name { font-family: var(--display); font-size: 38px; fill: #e6f1f7; letter-spacing: .1em; }
.map-v2 .lake-sub { font-family: var(--serif); font-style: italic; font-size: 18px; fill: rgba(230, 241, 247, .75); }
.map-v2 .region { font-family: var(--sans); font-variant: normal; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; fill: rgba(238, 241, 244, .45); }
.map-v2 .pl circle { fill: #eef1f4; transition: r .25s; }
.map-v2 .pl text { font-family: var(--sans); font-size: 15px; font-weight: 500; fill: #eef1f4; paint-order: stroke; stroke: #0a121e; stroke-width: 3px; }
.map-v2 .pl:hover circle { r: 6; }
.map-v2 .pl.gm circle { fill: var(--red); stroke: #fff; stroke-width: 2; }
.map-v2 .pl.gm text { font-size: 17px; font-weight: 600; }
.map-v2 .ring { stroke: #e2a27f; }
/* Bouton invisible posé sur Grand Marais (clic ou toucher) et sa fiche. */
.map-pin { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.map-pin:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.map-card { position: absolute; right: 14px; bottom: 14px; width: min(260px, 45%); padding: 12px 14px; background: rgba(10, 18, 30, .92); border: 1px solid rgba(158, 195, 214, .45); border-left: 3px solid var(--red); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: opacity .3s, transform .3s; }
.map-card p { margin: 0; font-family: var(--sans); font-size: .9375rem; line-height: 1.45; color: var(--text); }
.map-card .map-card-h { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; color: #fff; margin-bottom: 2px; }
.map-card .map-card-l { margin-top: 6px; font-size: .875rem; }
.map-card a { color: var(--ice); }
.map-v2.card-off .map-card { opacity: 0; pointer-events: none; transform: translateY(6px); }
/* Apparition : la rive nord se dessine après le contour du lac. */
.fx-on .fx .map-v2 .shore { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease-in-out 2s; }
.fx-on .fx .map-v2.in .shore { stroke-dashoffset: 0; }
.fx-on .fx .map-v2 .map-card { opacity: 0; transition: opacity .6s ease 3.2s; }
.fx-on .fx .map-v2.in:not(.card-off) .map-card { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .map-v2 .waves { animation: none; } }
@media (max-width: 600px) {
	.map-card { position: static; transform: none; width: auto; margin-top: 10px; right: auto; bottom: auto; }
	.map-v2.card-off .map-card { display: none; }
	.map-v2 .pl text { font-size: 19px; }
}

/* ---------- 8. Chiffres romains en braise (I, II, III) ---------- */
/* Contour ocre qui rougeoie de façon irrégulière, comme un charbon, et quelques étincelles qui montent et s'éteignent. */
.part-head { grid-template-columns: 6.5rem minmax(0, 1fr); }
.part-num, .bookpage .part-num {
	position: relative; font-size: 5.25rem; opacity: 1;
	color: rgba(166, 72, 38, .2); -webkit-text-stroke: 1.2px #d98a5c;
	text-shadow: 0 0 6px rgba(255, 140, 70, .45), 0 0 20px rgba(166, 72, 38, .35);
	animation: braise 6s ease-in-out infinite;
}
@keyframes braise {
	0%, 100% { color: rgba(166, 72, 38, .18); -webkit-text-stroke-color: #d0835a; text-shadow: 0 0 5px rgba(255, 140, 70, .4), 0 0 18px rgba(166, 72, 38, .3); }
	18% { color: rgba(196, 88, 40, .34); -webkit-text-stroke-color: #ffb488; text-shadow: 0 0 9px rgba(255, 165, 95, .8), 0 0 32px rgba(210, 95, 40, .55); }
	34% { color: rgba(170, 74, 38, .22); -webkit-text-stroke-color: #df9466; text-shadow: 0 0 6px rgba(255, 140, 70, .5), 0 0 22px rgba(166, 72, 38, .38); }
	52% { color: rgba(205, 95, 42, .38); -webkit-text-stroke-color: #ffc29a; text-shadow: 0 0 11px rgba(255, 175, 105, .85), 0 0 38px rgba(215, 100, 45, .6); }
	71% { color: rgba(176, 78, 38, .25); -webkit-text-stroke-color: #e59c6e; text-shadow: 0 0 7px rgba(255, 150, 80, .58), 0 0 25px rgba(180, 80, 38, .42); }
}
.part-num::before, .part-num::after {
	content: ""; position: absolute; right: .42em; bottom: .3em; width: 4px; height: 4px; border-radius: 50%;
	background: #ffd1a6; opacity: 0; pointer-events: none;
}
.part-num::before {
	box-shadow: 0 0 8px 3px rgba(255, 140, 60, .9), 13px -7px 0 0 #ffb070, -9px -15px 0 -.5px #ffd9b8;
	animation: etincelles-a 4.6s ease-out infinite;
}
.part-num::after {
	right: .2em; bottom: .45em;
	box-shadow: 0 0 7px 3px rgba(255, 130, 55, .85), -12px -4px 0 -.5px #ffc08a, 7px -18px 0 0 #ffe0c4;
	animation: etincelles-b 5.8s ease-out 2.3s infinite;
}
@keyframes etincelles-a { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 10% { opacity: 1; } 65% { opacity: .55; } 100% { opacity: 0; transform: translate(-10px, -78px) scale(.45); } }
@keyframes etincelles-b { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: .9; } 60% { opacity: .5; } 100% { opacity: 0; transform: translate(12px, -66px) scale(.4); } }
/* Les trois parties ne respirent pas en même temps. */
.part:nth-of-type(2) .part-num { animation-delay: -2s; } .part:nth-of-type(3) .part-num { animation-delay: -4s; }
@media (max-width: 899px) {
	.part-head { grid-template-columns: 1fr; }
	.part-num, .bookpage .part-num { font-size: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.part-num, .bookpage .part-num { animation: none; }
	.part-num::before, .part-num::after { display: none; }
}

/* ---------- 9. Musique d'ambiance (en-tête) ---------- */
.son { position: relative; display: flex; align-items: center; }
.son-btn { width: 40px; height: 40px; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; cursor: pointer; transition: border-color .2s, background-color .2s; }
.son-btn:hover, .son-btn[aria-expanded="true"] { border-color: var(--ice); background: rgba(158, 195, 214, .1); }
.son-btn svg { width: 22px; height: 22px; }
.son-btn .hp { fill: currentColor; }
.son-btn .barres rect { fill: currentColor; opacity: .55; transform-box: fill-box; transform-origin: center bottom; }
.son-btn .coupe { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; display: none; }
.son.on .son-btn { border-color: rgba(226, 162, 127, .8); color: #ffd2b0; }
.son.on .son-btn .barres rect { opacity: 1; animation: son-barre 1.1s ease-in-out infinite; }
.son.on .son-btn .barres rect:nth-child(2) { animation-delay: -.35s; } .son.on .son-btn .barres rect:nth-child(3) { animation-delay: -.7s; }
@keyframes son-barre { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.son.muted .son-btn .barres { display: none; } .son.muted .son-btn .coupe { display: block; }
.son.resume .son-btn { animation: son-pulse 1.8s ease-in-out infinite; }
@keyframes son-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 162, 127, .5); } 50% { box-shadow: 0 0 0 7px rgba(226, 162, 127, 0); } }
.son-pop { position: absolute; top: calc(100% + 12px); right: 0; width: 240px; padding: 14px 16px 16px; background: var(--night-2); border: 1px solid rgba(158, 195, 214, .35); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.son-pop.open { opacity: 1; visibility: visible; transform: none; }
.son-titre { margin: 0 0 10px; font-family: var(--sans); font-size: .875rem; font-weight: 600; color: var(--snow); }
.son-titre span { display: block; font-weight: 400; font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.son-row { display: flex; gap: 8px; margin-bottom: 12px; }
.son-row button { flex: 1; min-height: 36px; padding: 6px 8px; font-family: var(--sans); font-size: .875rem; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--snow); background: transparent; border: 1px solid rgba(158, 195, 214, .45); border-radius: 6px; cursor: pointer; }
.son-row .son-play[aria-pressed="false"] { background: var(--red); border-color: var(--red); color: #fff; }
.son-row button:hover { border-color: var(--ice); }
.son-l { display: block; font-family: var(--sans); font-size: .8125rem; color: var(--muted); margin-bottom: 4px; }
.son-vol { width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.son-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--red) var(--p, 50%), #2a3a50 var(--p, 50%)); }
.son-vol::-moz-range-track { height: 4px; border-radius: 2px; background: #2a3a50; }
.son-vol::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--red); }
.son-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(166, 72, 38, .45); }
.son-vol::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; }
@media (max-width: 960px) { .hdr-in { gap: 12px; } .hdr-in .son { margin-left: auto; } .hdr-in .son + .burger { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .son.on .son-btn .barres rect, .son.resume .son-btn { animation: none; } }

/* ---------- 10. En-tête réaligné + menu des langues (globe) ---------- */
/* Tout sur la même ligne : le gabarit d'origine ajoutait une marge sous les boutons (10 px trop haut). */
.hdr-in > *, .menu > li > button, .son-btn, .lang-btn, .burger { margin-top: 0; margin-bottom: 0; }
.menu > li > a, .menu > li > button { height: 40px; }
.hdr-in .lang-menu { margin-left: 0; }
.lang-menu { position: relative; display: flex; align-items: center; }
.lang-btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 10px; background: transparent; border: 1px solid rgba(255, 255, 255, .28); border-radius: 20px; color: #fff; font-family: var(--sans); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: none; cursor: pointer; transition: border-color .2s, background-color .2s; }
.lang-btn:hover, .lang-menu.open .lang-btn { border-color: var(--ice); background: rgba(158, 195, 214, .1); }
.lang-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang-btn .chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.lang-menu.open .lang-btn .chev { transform: rotate(-135deg) translateY(-1px); }
.lang-list { position: absolute; right: 0; top: calc(100% + 12px); margin: 0; padding: 6px; list-style: none; width: 190px; background: var(--night-2); border: 1px solid rgba(158, 195, 214, .35); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.lang-menu.open .lang-list { opacity: 1; visibility: visible; transform: none; }
.lang-list li { margin: 0; }
.lang-list a { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 5px; color: var(--snow); text-decoration: none; font-family: var(--sans); font-size: .9375rem; }
.lang-list a span { color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.lang-list a:hover { background: rgba(158, 195, 214, .1); color: #fff; }
.lang-list a.on, .lang-list a[aria-current] { background: rgba(166, 72, 38, .25); color: #fff; }
.hdr-in > .son { margin-left: 0; }
@media (max-width: 960px) { .lang-menu { display: none; } }

/* ---------- 11. Trilogie : trois colonnes égales, couvertures de même taille, ordre suggéré par une lueur ---------- */
@media (min-width: 900px) {
	.path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tome .cover, .tome.first .cover, .tome .cover-ghost { width: 200px; }
	.tome h3, .tome.first h3 { font-size: 1.625rem; }
}
/* Même mention pour les trois livres (plus de pastille sur le tome 1). */
.tome.first .step { color: var(--ice); background: none; padding: 0; border-radius: 0; }
/* Le fil : fin et discret, à mi-hauteur des couvertures ; une petite lueur ocre glisse du tome 1 vers le tome 3. */
.path-line { top: 150px; height: 1px; background: rgba(158, 195, 214, .22); overflow: hidden; }
.path-line i { width: 120px !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(226, 162, 127, .95), transparent); animation: fil-ordre 6s ease-in-out infinite; }
@keyframes fil-ordre { 0% { margin-left: -120px; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { margin-left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .path-line i { animation: none; opacity: 0; } }
@media (max-width: 899px) { .path-line { display: none; } }
/* Boutons « Enter the world » alignés en bas des colonnes (ordinateur). */
@media (min-width: 900px) {
	.path { align-items: stretch; }
	.tome { display: flex; flex-direction: column; align-items: flex-start; }
	.tome .actions { margin-top: auto; padding-top: 8px; }
}

/* ---------- 12. Mention « Website by Applications Sigma » (entente, section 6) ---------- */
.foot-bottom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.foot-bottom .credit { margin-left: auto; color: var(--muted); }
.foot-bottom .credit a { color: var(--snow); }
@media (max-width: 600px) { .foot-bottom .credit { margin-left: 0; flex-basis: 100%; margin-top: 6px; } }

/* ---------- 13. Prix des livres : sceaux officiels (certificats de Robert, IPPY) ---------- */
/* Le sceau est l'objet réel ; sous lui, la mention en Source Serif (blanc) et le prix en Source Sans (gris). Aucun cadre. */
.prix { display: flex; flex-wrap: wrap; gap: 18px 24px; margin: 12px 0 22px; align-items: flex-start; }
.prix .sceau { margin: 0; width: 148px; text-align: center; }
.prix .sceau img { display: block; height: 88px; width: auto; margin: 0 auto 10px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.prix figcaption { font-family: var(--sans); font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.prix figcaption b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--snow); margin-bottom: 2px; }
.prix.grand { gap: 22px 40px; margin: 18px 0 32px; }
.prix.grand .sceau { width: 190px; }
.prix.grand .sceau img { height: 132px; }
.prix.grand figcaption { font-size: .875rem; }
.prix.grand figcaption b { font-size: 1.125rem; }
.prix.grand figcaption span { display: block; margin-top: 2px; }
@media (max-width: 600px) {
	.prix, .prix.grand { gap: 16px 12px; }
	/* Accueil : les sceaux passent sous la couverture, sur toute la largeur (la colonne de droite est trop étroite). */
	.tome .prix { grid-column: 1 / -1; }
	.prix .sceau, .prix.grand .sceau { width: calc(50% - 6px); max-width: 170px; }
	.prix.grand .sceau img { height: 112px; }
}

/* Magasins : un nom de magasin ne se coupe jamais en deux lignes. */
.stores a { white-space: nowrap; }

/* ---------- 14. Accueil réorganisé (maquette B, validée le 2026-10-02) ---------- */
/* Livres : « Entrer dans l'univers » + « Acheter le livre » côte à côte. */
.tome .actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 250px; }
.tome .actions .button { margin: 0; text-align: center; }
/* Avis : une bande à part, plus claire, la citation de Will Weaver en grand. */
.lecteurs { background: #16233a; border-top: 1px solid var(--line); padding: 80px 0; }
.lecteurs-h { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; margin: 0 0 28px; }
.lecteurs-une { margin: 0 0 40px; max-width: 900px; }
.lecteurs-une blockquote, .lecteurs-avis blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-style: italic; }
.lecteurs-une blockquote::before, .lecteurs-une blockquote::after, .lecteurs-avis blockquote::before, .lecteurs-avis blockquote::after { content: none; display: none; }
.lecteurs-une blockquote { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.3; color: #fff; }
.lecteurs-une figcaption { margin-top: 14px; font-family: var(--sans); color: #e2a27f; }
.lecteurs-avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.lecteurs-avis figure { margin: 0; border-top: 1px solid var(--line); padding-top: 16px; }
.lecteurs-avis blockquote { font-size: 1.1875rem; line-height: 1.45; color: var(--text); }
.lecteurs-avis figcaption { margin-top: 10px; font-family: var(--sans); font-size: .9375rem; color: var(--muted); }
.lecteurs .note { margin-top: 24px; }
/* La langue : cinq familles de mots, filets fins ; chaque mot ouvre sa fiche du dictionnaire. */
.langue { margin-top: 72px; }
.langue-intro { max-width: 680px; font-size: 1.125rem; }
.lexique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.lexique .large { grid-column: span 2; }
.lexique .large dl { columns: 2; column-gap: 40px; }
.lexique h4 { font-family: var(--sans); font-weight: 600; font-size: .9375rem; color: #e2a27f; margin: 0 0 6px; }
.lexique dl { margin: 0; }
.lexique dl > div { border-top: 1px solid var(--line); padding: 10px 0; break-inside: avoid; }
.lexique dt { font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; }
.lexique dt a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(226, 162, 127, .5); }
.lexique dt a:hover, .lexique dt a:focus-visible { border-bottom-color: #e2a27f; }
.lexique dd { margin: 2px 0 0; font-size: 1rem; color: var(--muted); }
/* Partie III : le conteur. Photo de Robert avec sa légende dessous, texte large à côté. */
.part-3 { border-top: 1px solid var(--line); }
.conteur { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.conteur p { max-width: 680px; }
.portrait, .tommy { margin: 0; }
.portrait img, .tommy img { display: block; width: 100%; height: auto; border-radius: 6px; }
.portrait figcaption, .tommy figcaption { margin-top: 10px; font-family: var(--sans); font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.tommy figcaption b { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--snow); margin: 6px 0 4px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); }
/* Sa voix : le livre audio et les deux entrevues KAXE, une ligne chacun. */
.ecoutes { list-style: none; padding: 0 !important; margin: 24px 0 0 !important; }
.ecoutes li { margin: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.ecoutes li:last-child { border-bottom: 1px solid var(--line); }
.ecoute-play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: .875rem; text-decoration: none; }
.ecoutes .k { margin: 0; font-family: var(--sans); font-size: .875rem; color: #e2a27f; }
.ecoutes .t { margin: 2px 0 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; color: var(--snow); }
@media (max-width: 900px) {
	.lecteurs-avis { grid-template-columns: 1fr; gap: 20px; }
	.lecteurs { padding: 56px 0; }
	.lexique { grid-template-columns: 1fr 1fr; }
	.lexique .large { grid-column: 1 / -1; }
	.conteur, .duo { grid-template-columns: 1fr; gap: 28px; }
	.portrait { max-width: 300px; }
}
@media (max-width: 600px) {
	.lexique { grid-template-columns: 1fr; gap: 28px; }
	.lexique .large { grid-column: auto; }
	/* Lexique compact sur téléphone (audit du 2026-10-02) : deux mots par ligne au lieu d'un. */
	.lexique dl, .lexique .large dl { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
	.lexique dl > div { padding: 8px 0; }
	.lexique dt { font-size: 1.0625rem; }
	.lexique dd { font-size: .875rem; line-height: 1.35; }
	.ecoutes li { grid-template-columns: 36px minmax(0, 1fr); }
	.ecoutes li .button { grid-column: 2; justify-self: start; }
	.ecoute-play { width: 36px; height: 36px; }
}
/* Accueil : titres de section sans chiffre romain (les chiffres restent sur les pages livres, pour le numéro du tome). */
.part-head.sans-num { grid-template-columns: minmax(0, 1fr); }

/* ---------- 15. Infos pratiques en modèle C (choisi par Olivier le 2026-10-02) : acheter d'abord, magasins un par ligne ---------- */
.practical { padding: 72px 0 88px; }
.practical h3 { font-size: 1.5rem; margin: 0 0 .6em; color: var(--snow); }
.practical p { font-size: 1.0625rem; line-height: 1.6; }
.practical .pc-h { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 1.2em; }
.practical .sub { font-family: var(--sans); font-size: .9375rem; font-weight: 600; color: var(--muted); margin: 0 0 .6em; }
.practical .b-t { margin: 0 0 .6em; color: var(--text); font-size: 1.125rem; }
.practical .b-t span { display: block; font-size: .875rem; color: var(--muted); font-family: var(--sans); }
.pc-top { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 3rem; padding-bottom: 3.5rem; }
.pc-livre .pc-top { grid-template-columns: 1fr 1.3fr; }
.pc-cover { display: inline-block; margin-bottom: 1.1rem; }
.pc-cover img { width: 120px; height: auto; display: block; box-shadow: 0 12px 28px rgba(0, 0, 0, .5); transition: transform .3s; }
.pc-cover:hover img, .pc-cover:focus-visible img { transform: translateY(-3px); }
.sellers { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2em; }
main a.seller { display: inline-block; padding: .55em .95em; border: 1px solid var(--line); border-radius: var(--r); color: var(--snow); text-decoration: none; font-family: var(--sans); font-size: .9375rem; line-height: 1.2; transition: border-color .2s, background .2s; }
main a.seller:hover, main a.seller:focus-visible { border-color: var(--ice); background: rgba(158, 195, 214, .08); }
.stores-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.stores-l li { margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.stores-l li::before { content: none; }
main .stores-l a { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: .8em 0; color: inherit; text-decoration: none; }
.stores-l .s-n { color: var(--snow); font-family: var(--serif); font-size: 1.25rem; }
.stores-l .s-v { grid-row: 2; color: var(--muted); font-size: .875rem; font-family: var(--sans); }
.stores-l .arr { grid-row: 1 / 3; align-self: center; color: var(--muted); transition: color .2s, transform .2s; }
.stores-l a:hover .s-n, .stores-l a:focus-visible .s-n { color: var(--ice); }
.stores-l a:hover .arr, .stores-l a:focus-visible .arr { color: var(--ice); transform: translate(2px, -2px); }
.practical .signed { margin-top: 1.2em; }
.practical .last b { display: block; color: var(--text); }
.practical .news-form { margin-top: 1em; }
.pc-bottom { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 3rem; }
.pc-bottom > div { padding: 0 3rem; border-left: 1px solid var(--line); }
.pc-bottom > div:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 900px) {
	.practical { padding: 48px 0 56px; }
	.pc-top { grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
	.pc-livre .pc-top { grid-template-columns: 1fr; }
	.pc-stores { grid-column: 1 / -1; }
	.pc-bottom { grid-template-columns: 1fr; padding-top: 0; }
	.pc-bottom > div { padding: 2.5rem 0 0; border-left: 0; }
	.pc-bottom > div + div { border-top: 1px solid var(--line); margin-top: 2.5rem; }
}
@media (max-width: 480px) { .pc-top { gap: 1.5rem; } .pc-cover img { width: 96px; } }

/* ---------- 16. Accueil : photo « fenêtre » derrière chaque partie (fond 1c, choisi par Olivier le 2026-10-02) ----------
   La photo occupe un côté de la partie (alternance droite / gauche) et se fond dans la nuit côté texte et vers le bas ;
   hauteur limitée pour ne pas étirer la photo sur les longues parties. Photos déjà publiées sur le site. */
.home main :is(#books, #reviews, #world, #author, #practical) { position: relative; isolation: isolate; overflow: hidden; background: var(--night) !important; }
.home main :is(#books, #reviews, #world, #author, #practical)::before { content: ""; position: absolute; top: 0; height: min(100%, 120vh); width: 58%; z-index: -2; pointer-events: none;
	background: var(--fenetre) center / cover no-repeat; opacity: .55;
	-webkit-mask-image: linear-gradient(var(--sens), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(var(--sens), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
	mask-composite: intersect; }
.home main :is(#books, #reviews, #world, #author, #practical)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, var(--night) 0%, transparent 14%, transparent 86%, var(--night) 100%); }
.home main #books { --fenetre: url(../img/nuit-etoiles-1700.webp); --sens: to left; }
.home main #books::before { right: 0; }
.home main #reviews { --fenetre: url(../img/aurore-1920.webp); --sens: to right; }
.home main #reviews::before { left: 0; }
.home main #world { --fenetre: url(../img/lac-vagues-1200.webp); --sens: to left; }
.home main #world::before { right: 0; }
.home main #author { --fenetre: url(../img/canot-brume-1200.webp); --sens: to right; }
.home main #author::before { left: 0; }
.home main #practical { --fenetre: url(../img/lac-gele-1200.webp); --sens: to left; }
.home main #practical::before { right: 0; }
@media (max-width: 900px) {
	.home main :is(#books, #reviews, #world, #author, #practical)::before { width: 100%; height: min(100%, 100vh); opacity: .5;
		-webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
	.home main #books { --fenetre: url(../img/nuit-etoiles-1100.webp); }
	.home main #reviews { --fenetre: url(../img/aurore-1000.webp); }
}
/* Pages livres : les infos pratiques laissent voir le décor du tome au lieu d'un aplat. */
.bookpage .practical { background: rgba(11, 18, 29, .78); }
/* Même fenêtre photo sur le blog, le contact et la confidentialité (l'article garde ses propres photos). */
:is(main.blog, main.contact, main.privacy) { position: relative; isolation: isolate; overflow: hidden; }
:is(main.blog, main.contact, main.privacy)::before { content: ""; position: absolute; top: 0; right: 0; height: min(100%, 110vh); width: 55%; z-index: -2; pointer-events: none;
	background: var(--fenetre) center / cover no-repeat; opacity: .5;
	-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
	mask-composite: intersect; }
main.blog { --fenetre: url(../img/phare-grand-marais-1200.webp); }
main.contact { --fenetre: url(../img/bouleau-900.webp); }
main.privacy { --fenetre: url(../img/rive-grand-marais-900.webp); }
@media (max-width: 900px) {
	:is(main.blog, main.contact, main.privacy)::before { width: 100%; height: min(100%, 80vh); opacity: .45;
		-webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
	main.contact::before { opacity: .26; } /* écorce de bouleau très claire : plus discrète pour garder le texte lisible */
	main.blog { --fenetre: url(../img/phare-grand-marais-700.webp); }
	main.privacy { --fenetre: url(../img/rive-grand-marais-500.webp); }
}