/*
 * Cèdre — Main stylesheet
 * Design tokens + components from hero & article mockups, consolidated.
 */

/* ==========================================
   1. DESIGN TOKENS
   ========================================== */
:root {
	--sapin-deep: #0F3D2E;
	--sapin: #1F5947;
	--sapin-soft: #2d6b57;
	--or: #C9A961;
	--or-light: #E8D9B0;
	--or-pale: #F2E9D2;
	--creme: #FAF7F0;
	--creme-warm: #F4EFE3;
	--encre: #0E1A14;
	--greige: #6B6960;
	--greige-light: #A8A498;
	--rouge: #B14B3A;
	--bleu: #2D5C7F;

	--serif: 'Newsreader', 'Times New Roman', Georgia, serif;
	--sans: 'Geist', system-ui, -apple-system, sans-serif;
	--mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

	--container: 1320px;
	--gutter: clamp(1.25rem, 3vw, 2.5rem);
}

/* ==========================================
   2. BASE
   ========================================== */
* { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--sans);
	background: var(--creme);
	color: var(--encre);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	position: relative;
}

/* Paper grain texture overlay */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.35;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	position: relative;
	z-index: 2;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	background: var(--sapin-deep);
	color: var(--creme);
	padding: 0.6rem 1rem;
	position: absolute;
	top: -40px;
	left: 0;
	z-index: 1000;
	text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ==========================================
   3. READING PROGRESS BAR
   ========================================== */
.read-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	width: 0%;
	background: linear-gradient(to right, var(--or), var(--or-light));
	z-index: 100;
	transition: width 0.05s linear;
	box-shadow: 0 0 8px rgba(201, 169, 97, 0.4);
}

/* ==========================================
   4. TOPBAR
   ========================================== */
.topbar {
	background: var(--sapin-deep);
	color: var(--or-light);
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.6rem 0;
	position: relative;
	z-index: 3;
}
.topbar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}
.topbar-left { display: flex; gap: 1.5rem; align-items: center; }
.topbar-dot {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--or);
	margin-right: 0.5rem;
	animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.8); }
}
.topbar a {
	color: var(--or-light);
	text-decoration: none;
	transition: color 0.2s;
}
.topbar a:hover { color: var(--or); }

/* ==========================================
   5. HEADER NAV
   ========================================== */
header.nav {
	position: relative;
	z-index: 3;
	border-bottom: 1px solid rgba(15,61,46,0.08);
	background: var(--creme);
}
header.nav .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.4rem;
	padding-bottom: 1.4rem;
}
.logo {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--encre);
}
.logo-mark {
	font-family: var(--serif);
	font-size: 1.7rem;
	font-weight: 500;
	font-variation-settings: "opsz" 24;
	letter-spacing: -0.02em;
	line-height: 1;
}
.logo-mark::first-letter { color: var(--or); }
.logo-tag {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--greige);
	border-left: 1px solid var(--or);
	padding-left: 0.6rem;
}
nav.menu { display: flex; gap: 2.2rem; align-items: center; }
nav.menu a {
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--encre);
	text-decoration: none;
	letter-spacing: -0.005em;
	position: relative;
	padding: 0.3rem 0;
	transition: color 0.2s;
}
nav.menu a::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 0; height: 1px;
	background: var(--or);
	transition: width 0.3s ease;
}
nav.menu a:hover::after,
nav.menu a.current-menu-item::after,
nav.menu a.active::after { width: 100%; }
nav.menu a:hover { color: var(--sapin-deep); }
nav.menu a.current-menu-item,
nav.menu a.active { color: var(--sapin-deep); }
nav.menu li { list-style: none; }

.nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--sapin-deep);
	color: var(--creme);
	padding: 0.65rem 1.2rem;
	border-radius: 2px;
	font-family: var(--sans);
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: -0.005em;
	transition: background 0.25s, transform 0.25s;
	border: 1px solid var(--sapin-deep);
}
.nav-cta:hover { background: var(--sapin); transform: translateY(-1px); }

.custom-logo-wrap img {
	max-height: 60px;
	width: auto;
}

/* ==========================================
   6. HERO
   ========================================== */
.hero {
	position: relative;
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	overflow: hidden;
}
.bg-grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(15,61,46,0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(15,61,46,0.04) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, black 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, black 30%, transparent 80%);
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	position: relative;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sapin);
	margin-bottom: 2rem;
	opacity: 0;
	animation: fadeUp 0.8s ease forwards;
}
.eyebrow-rule { height: 1px; width: 48px; background: var(--or); }
.eyebrow-num { color: var(--or); font-weight: 500; }

h1.headline {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.8rem, 7.5vw, 6.4rem);
	line-height: 0.96;
	letter-spacing: -0.035em;
	color: var(--encre);
	margin-bottom: 1.8rem;
	font-variation-settings: "opsz" 72;
	opacity: 0;
	animation: fadeUp 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
	animation-delay: 0.3s;
}
h1.headline em {
	font-style: italic;
	font-weight: 300;
	font-variation-settings: "opsz" 72;
	color: var(--sapin-deep);
	position: relative;
	padding: 0 0.05em;
}
h1.headline em::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	bottom: 0.12em;
	height: 0.08em;
	background: var(--or);
	opacity: 0.65;
	transform: scaleX(0);
	transform-origin: left;
	animation: underlineIn 0.9s ease forwards;
	animation-delay: 1.4s;
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes underlineIn { to { transform: scaleX(1); } }

.lede {
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.5;
	color: var(--greige);
	max-width: 32em;
	margin-bottom: 2.4rem;
	font-variation-settings: "opsz" 30;
	opacity: 0;
	animation: fadeUp 0.8s ease forwards;
	animation-delay: 1.1s;
}
.lede strong {
	color: var(--encre);
	font-weight: 400;
	font-style: normal;
	font-family: var(--sans);
}

.cta-row {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	opacity: 0;
	animation: fadeUp 0.8s ease forwards;
	animation-delay: 1.3s;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.7rem;
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: 2px;
	transition: all 0.25s ease;
	border: 1px solid transparent;
	cursor: pointer;
}
.btn-primary {
	background: var(--sapin-deep);
	color: var(--creme);
	border-color: var(--sapin-deep);
	position: relative;
	overflow: hidden;
}
.btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--sapin);
	transform: translateX(-101%);
	transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary span { position: relative; z-index: 1; }
.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -12px rgba(15,61,46,0.4);
}
.btn-secondary {
	background: transparent;
	color: var(--sapin-deep);
	border: 1px solid rgba(15,61,46,0.25);
}
.btn-secondary:hover {
	border-color: var(--or);
	background: var(--or-pale);
}
.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Hero illustration */
.hero-art {
	position: relative;
	aspect-ratio: 1 / 1.05;
	width: 100%;
	max-width: 540px;
	justify-self: end;
	opacity: 0;
	animation: fadeUp 1.1s ease forwards;
	animation-delay: 0.8s;
}
.hero-art svg { width: 100%; height: 100%; }
.hero-art::before,
.hero-art::after {
	content: '';
	position: absolute;
	width: 28px; height: 28px;
	border: 1px solid var(--or);
}
.hero-art::before { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.hero-art::after { bottom: -8px; right: -8px; border-left: none; border-top: none; }

.float-anim   { animation: float 6s ease-in-out infinite; }
.float-anim-2 { animation: float 7s ease-in-out infinite; animation-delay: -2s; }
.float-anim-3 { animation: float 5.5s ease-in-out infinite; animation-delay: -3.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.dash-anim {
	stroke-dasharray: 4 6;
	animation: dash-march 18s linear infinite;
}
@keyframes dash-march { to { stroke-dashoffset: -200; } }

/* ==========================================
   7. STATS BAR
   ========================================== */
.stats-bar {
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(15,61,46,0.1);
	border-bottom: 1px solid rgba(15,61,46,0.1);
	background: var(--creme-warm);
}
.stats-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.stat {
	padding: 1.8rem var(--gutter);
	border-right: 1px solid rgba(15,61,46,0.1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.4rem;
	position: relative;
}
.stat:last-child { border-right: none; }
.stat-label {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--greige);
}
.stat-value {
	font-family: var(--serif);
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	font-weight: 400;
	font-variation-settings: "opsz" 72;
	color: var(--sapin-deep);
	line-height: 1;
	letter-spacing: -0.02em;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}
.stat-value .unit {
	font-family: var(--sans);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--greige);
	letter-spacing: 0;
}
.stat-value .accent { color: var(--or); }
.stat-sub {
	font-family: var(--sans);
	font-size: 0.78rem;
	color: var(--greige);
}
.stat.countdown {
	background: var(--sapin-deep);
	color: var(--creme);
}
.stat.countdown .stat-label { color: var(--or); }
.stat.countdown .stat-value {
	color: var(--creme);
	font-size: clamp(2.2rem, 4vw, 3.2rem);
}
.stat.countdown .stat-value .accent { color: var(--or); }
.stat.countdown .stat-sub { color: var(--or-light); }

.stat:not(.countdown):not(:last-child)::after {
	content: '';
	position: absolute;
	right: -3px; top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 5px; height: 5px;
	background: var(--or);
	z-index: 1;
}

/* ==========================================
   8. ARTICLE HEADER
   ========================================== */
.article-header {
	padding-top: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2rem, 3vw, 2.5rem);
	border-bottom: 1px solid rgba(15,61,46,0.08);
}
.breadcrumb {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--greige);
	margin-bottom: 1.6rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.breadcrumb a { color: var(--greige); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--sapin-deep); }
.breadcrumb .sep { color: var(--or); }
.breadcrumb .current { color: var(--sapin-deep); }

.article-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sapin);
	background: var(--or-pale);
	padding: 0.45rem 0.9rem;
	border-radius: 2px;
	margin-bottom: 1.8rem;
}
.article-eyebrow::before {
	content: '';
	width: 6px; height: 6px;
	background: var(--or);
	border-radius: 50%;
}

h1.article-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--encre);
	font-variation-settings: "opsz" 72;
	margin-bottom: 1.6rem;
	max-width: 22ch;
}
h1.article-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--sapin-deep);
	font-variation-settings: "opsz" 72;
}

.article-lede {
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	line-height: 1.45;
	color: var(--greige);
	max-width: 38em;
	margin-bottom: 2.4rem;
	font-variation-settings: "opsz" 30;
}

.article-meta {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(15,61,46,0.08);
}
.author { display: flex; align-items: center; gap: 0.8rem; }
.author-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sapin-deep), var(--sapin));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	color: var(--or);
	font-weight: 500;
	font-size: 1rem;
	border: 1px solid var(--or);
	flex-shrink: 0;
}
.author-avatar-img { object-fit: cover; padding: 0; background: none; }
.author-avatar-lg { width: 80px; height: 80px; font-size: 1.6rem; }
.author-info { display: flex; flex-direction: column; gap: 0.15rem; }
.author-name { font-family: var(--sans); font-size: 0.92rem; font-weight: 500; color: var(--encre); }
.author-role {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--greige);
}

.meta-divider { width: 1px; height: 28px; background: rgba(15,61,46,0.15); }
.meta-item { display: flex; flex-direction: column; gap: 0.15rem; }
.meta-label {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--greige);
}
.meta-value { font-family: var(--sans); font-size: 0.88rem; color: var(--encre); font-weight: 500; }

.share-row { margin-left: auto; display: flex; gap: 0.4rem; }
.share-btn {
	width: 36px; height: 36px;
	border: 1px solid rgba(15,61,46,0.15);
	background: transparent;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s ease;
	color: var(--greige);
	text-decoration: none;
}
.share-btn:hover {
	border-color: var(--or);
	color: var(--sapin-deep);
	background: var(--or-pale);
}

/* ==========================================
   9. FEATURED FIGURE
   ========================================== */
.featured-figure { margin-top: 2.5rem; margin-bottom: 0.8rem; position: relative; }
.figure-frame {
	position: relative;
	background: var(--creme-warm);
	border: 1px solid rgba(15,61,46,0.08);
	aspect-ratio: 16 / 8.5;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.figure-frame img { width: 100%; height: 100%; object-fit: cover; }
.figure-frame::before,
.figure-frame::after {
	content: '';
	position: absolute;
	width: 22px; height: 22px;
	border: 1px solid var(--or);
}
.figure-frame::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.figure-frame::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.figure-caption {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: 0.85rem;
	color: var(--greige);
	margin-top: 0.9rem;
	padding-left: 0.9rem;
	border-left: 2px solid var(--or);
	font-variation-settings: "opsz" 16;
}
.figure-caption strong {
	font-style: normal;
	font-weight: 500;
	color: var(--sapin-deep);
	font-family: var(--sans);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-right: 0.4rem;
}

/* ==========================================
   10. ARTICLE LAYOUT
   ========================================== */
.article-layout {
	display: grid;
	grid-template-columns: 1fr minmax(0, 720px) 240px;
	gap: clamp(2rem, 4vw, 4rem);
	padding-top: 3.5rem;
	padding-bottom: 4rem;
	align-items: start;
}
.article-layout > .article-body { grid-column: 2; min-width: 0; }
.article-layout > aside.toc-wrap { grid-column: 3; position: sticky; top: 2rem; }

/* ==========================================
   11. TOC
   ========================================== */
.toc { font-family: var(--sans); font-size: 0.85rem; }
.toc-label {
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--greige);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.toc-label::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--or), transparent);
}
.toc ol {
	list-style: none;
	counter-reset: toc;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.toc li { counter-increment: toc; }
.toc a {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	padding: 0.5rem 0 0.5rem 0.8rem;
	text-decoration: none;
	color: var(--greige);
	border-left: 1px solid rgba(15,61,46,0.1);
	transition: all 0.25s ease;
	font-size: 0.85rem;
	line-height: 1.4;
}
.toc a::before {
	content: counter(toc, decimal-leading-zero);
	font-family: var(--mono);
	font-size: 0.65rem;
	color: var(--greige-light);
	letter-spacing: 0.05em;
	flex-shrink: 0;
}
.toc a:hover { color: var(--sapin-deep); border-left-color: var(--or); }
.toc a.active {
	color: var(--sapin-deep);
	border-left: 2px solid var(--or);
	padding-left: calc(0.8rem - 1px);
	font-weight: 500;
}
.toc a.active::before { color: var(--or); }
.toc-share { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(15,61,46,0.08); }

/* ==========================================
   12. ARTICLE BODY
   ========================================== */
.article-body {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.18rem;
	line-height: 1.65;
	color: var(--encre);
	font-variation-settings: "opsz" 18;
	letter-spacing: -0.005em;
}
.article-body p { margin-bottom: 1.4rem; }

.article-body > p.lead::first-letter {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 4.2em;
	float: left;
	line-height: 0.85;
	margin: 0.12em 0.12em 0 -0.04em;
	color: var(--sapin-deep);
	font-variation-settings: "opsz" 72;
}
.article-body > p.lead { font-size: 1.25rem; line-height: 1.6; }

.article-body h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--sapin-deep);
	margin-top: 3.5rem;
	margin-bottom: 1.2rem;
	font-variation-settings: "opsz" 48;
	position: relative;
	padding-top: 1.6rem;
	scroll-margin-top: 2rem;
}
.article-body h2::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 36px; height: 1px;
	background: var(--or);
}
.article-body h3 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--sapin-deep);
	margin-top: 2.4rem;
	margin-bottom: 1rem;
	font-variation-settings: "opsz" 32;
}
.article-body h4, .article-body h5, .article-body h6 {
	font-family: var(--sans);
	font-weight: 600;
	color: var(--sapin-deep);
	margin-top: 2rem;
	margin-bottom: 0.8rem;
	letter-spacing: -0.01em;
}
.article-body h4 { font-size: 1.15rem; }
.article-body h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono); }

.article-body a {
	color: var(--sapin-deep);
	text-decoration: none;
	background-image: linear-gradient(to right, var(--or), var(--or));
	background-position: 0 92%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: background-size 0.3s ease;
	padding-bottom: 1px;
}
.article-body a:hover {
	background-size: 100% 100%;
	background-image: linear-gradient(to right, var(--or-pale), var(--or-pale));
}

.article-body strong { font-weight: 500; color: var(--sapin-deep); }
.article-body em { font-style: italic; font-variation-settings: "opsz" 24; }

.article-body ul, .article-body ol {
	margin: 0 0 1.5rem 0;
	padding-left: 0;
}
.article-body ul { list-style: none; }
.article-body ul li {
	margin-bottom: 0.6rem;
	padding-left: 1.6rem;
	position: relative;
}
.article-body ul li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.65em;
	width: 8px; height: 1px;
	background: var(--or);
}
.article-body ol {
	list-style: none;
	counter-reset: section;
}
.article-body ol li {
	counter-increment: section;
	margin-bottom: 0.6rem;
	padding-left: 2.4rem;
	position: relative;
}
.article-body ol li::before {
	content: counter(section, decimal-leading-zero);
	position: absolute;
	left: 0; top: 0;
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--or);
	font-weight: 500;
	letter-spacing: 0.05em;
}

.article-body img,
.article-body figure { margin: 1.8rem 0; }
.article-body figure figcaption {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.88rem;
	color: var(--greige);
	margin-top: 0.6rem;
	padding-left: 0.8rem;
	border-left: 2px solid var(--or);
}

/* ==========================================
   13. CALLOUTS
   ========================================== */
.callout,
.is-style-cedre-callout > .wp-block-group__inner-container,
.is-style-cedre-callout {
	margin: 2rem 0;
	padding: 1.5rem 1.8rem;
	background: var(--creme-warm);
	border-left: 2px solid var(--or);
	font-size: 1.02rem;
	line-height: 1.55;
	font-family: var(--serif);
	font-variation-settings: "opsz" 16;
	color: var(--encre);
}
.callout-label {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or);
	font-weight: 700;
	margin-bottom: 0.7rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--sapin-deep); }

.callout.warning,
.is-style-cedre-callout-warning {
	border-left-color: var(--rouge);
	background: rgba(177, 75, 58, 0.05);
}
.callout.warning .callout-label { color: var(--rouge); }

.callout.info,
.is-style-cedre-callout-info {
	border-left-color: var(--bleu);
	background: rgba(45, 92, 127, 0.05);
}
.callout.info .callout-label { color: var(--bleu); }

/* ==========================================
   14. PULL QUOTE
   ========================================== */
blockquote.pull,
.is-style-cedre-pull blockquote,
blockquote.is-style-cedre-pull {
	margin: 3rem 0;
	padding: 0;
	border: none;
	text-align: center;
	position: relative;
}
blockquote.pull::before,
blockquote.pull::after {
	content: '';
	display: block;
	width: 32px; height: 1px;
	background: var(--or);
	margin: 0 auto;
}
blockquote.pull::before { margin-bottom: 1.8rem; }
blockquote.pull::after { margin-top: 1.8rem; }
blockquote.pull p {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.3;
	color: var(--sapin-deep);
	font-variation-settings: "opsz" 48;
	letter-spacing: -0.015em;
	max-width: 24ch;
	margin: 0 auto;
}
blockquote.pull cite {
	display: block;
	margin-top: 1.4rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--greige);
	font-style: normal;
}

/* ==========================================
   15. DATA TABLE
   ========================================== */
.table-wrap {
	margin: 2rem 0;
	overflow-x: auto;
	border: 1px solid rgba(15,61,46,0.1);
	border-radius: 2px;
}
table.data,
.is-style-cedre-data table,
.wp-block-table.is-style-cedre-data table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 0.92rem;
	background: var(--creme);
}
table.data thead { background: var(--sapin-deep); color: var(--or-light); }
table.data th {
	padding: 0.95rem 1.1rem;
	text-align: left;
	font-weight: 500;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
table.data td {
	padding: 0.85rem 1.1rem;
	border-top: 1px solid rgba(15,61,46,0.08);
	color: var(--encre);
}
table.data tr:hover td { background: var(--or-pale); }
table.data .recommended {
	background: linear-gradient(to right, var(--or-pale), transparent);
}
table.data .recommended::before { content: '★'; color: var(--or); margin-right: 0.4rem; }

/* ==========================================
   16. KEY FACT
   ========================================== */
.key-fact,
.is-style-cedre-key-fact {
	margin: 2.5rem 0;
	padding: 2rem;
	background: var(--sapin-deep);
	color: var(--creme);
	border: 1px solid var(--sapin-deep);
	position: relative;
}
.key-fact::before,
.key-fact::after {
	content: '';
	position: absolute;
	width: 18px; height: 18px;
	border: 1px solid var(--or);
}
.key-fact::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.key-fact::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.key-fact .kf-label {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or);
	margin-bottom: 1rem;
}
.key-fact .kf-number {
	font-family: var(--serif);
	font-size: clamp(2.4rem, 4.5vw, 3.5rem);
	font-weight: 400;
	line-height: 1;
	color: var(--creme);
	font-variation-settings: "opsz" 72;
	letter-spacing: -0.03em;
	margin-bottom: 0.6rem;
}
.key-fact .kf-number .accent { color: var(--or); }
.key-fact .kf-desc {
	font-family: var(--sans);
	font-size: 0.95rem;
	color: var(--or-light);
	max-width: 36em;
	line-height: 1.55;
}

/* ==========================================
   17. ARTICLE FOOTER (author bio)
   ========================================== */
.article-footer {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(15,61,46,0.1);
}
.author-card {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 1.5rem;
	padding: 1.8rem;
	background: var(--creme-warm);
	border: 1px solid rgba(15,61,46,0.08);
	align-items: start;
}
.author-card-info .author-name {
	font-family: var(--serif);
	font-size: 1.3rem;
	font-weight: 500;
	font-variation-settings: "opsz" 24;
	margin-bottom: 0.2rem;
}
.author-card-info .author-role { margin-bottom: 0.9rem; }
.author-card-info p {
	font-family: var(--sans);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--greige);
	margin-bottom: 0.9rem;
}
.author-links {
	display: flex;
	gap: 1rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	flex-wrap: wrap;
}
.author-links a {
	color: var(--sapin-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--or);
	padding-bottom: 1px;
	transition: color 0.2s;
}
.author-links a:hover { color: var(--or); }

/* ==========================================
   18. RELATED CARDS
   ========================================== */
.related { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(15,61,46,0.1); }
.related-label {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--greige);
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.related-label::before {
	content: '';
	width: 36px; height: 1px;
	background: var(--or);
}
.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.related-grid-listing { grid-template-columns: repeat(3, 1fr); }
.related-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.08);
	padding: 1.5rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}
.related-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 0; height: 1px;
	background: var(--or);
	transition: width 0.4s ease;
}
.related-card:hover { transform: translateY(-2px); }
.related-card:hover::before { width: 100%; }
.related-card-cat {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or);
	margin-bottom: 0.8rem;
}
.related-card-title {
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.25;
	font-weight: 500;
	color: var(--encre);
	font-variation-settings: "opsz" 24;
	letter-spacing: -0.015em;
	margin-bottom: 0.8rem;
}
.related-card-excerpt {
	font-family: var(--sans);
	font-size: 0.88rem;
	color: var(--greige);
	line-height: 1.5;
	margin-bottom: 0.8rem;
}
.related-card-meta {
	margin-top: auto;
	padding-top: 1.2rem;
	display: flex;
	gap: 1rem;
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--greige);
}

/* ==========================================
   19. NEWSLETTER CTA
   ========================================== */
.newsletter-cta {
	margin-top: 4rem;
	padding: 3rem;
	background: var(--sapin-deep);
	color: var(--creme);
	position: relative;
	overflow: hidden;
}
.newsletter-cta::before {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 320px;
	height: 100%;
	background-image:
		linear-gradient(to right, rgba(201,169,97,0.12) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(201,169,97,0.12) 1px, transparent 1px);
	background-size: 24px 24px;
	mask-image: radial-gradient(ellipse 60% 60% at 100% 50%, black, transparent);
	-webkit-mask-image: radial-gradient(ellipse 60% 60% at 100% 50%, black, transparent);
	pointer-events: none;
}
.newsletter-cta .nl-label {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	position: relative;
	z-index: 1;
}
.newsletter-cta .nl-label::before {
	content: '';
	width: 6px; height: 6px;
	background: var(--or);
	border-radius: 50%;
	animation: pulse 2.4s ease-in-out infinite;
}
.newsletter-cta h3 {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 400;
	line-height: 1.15;
	font-variation-settings: "opsz" 48;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
	max-width: 22ch;
	position: relative;
	z-index: 1;
}
.newsletter-cta h3 em { font-style: italic; font-weight: 300; color: var(--or); }
.newsletter-cta p {
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--or-light);
	max-width: 38em;
	margin-bottom: 1.8rem;
	line-height: 1.55;
	position: relative;
	z-index: 1;
}
.newsletter-form {
	display: flex;
	gap: 0.6rem;
	max-width: 480px;
	position: relative;
	z-index: 1;
}
.newsletter-form input {
	flex: 1;
	padding: 0.85rem 1.1rem;
	background: rgba(250, 247, 240, 0.06);
	border: 1px solid var(--or);
	color: var(--creme);
	font-family: var(--sans);
	font-size: 0.92rem;
	border-radius: 2px;
	outline: none;
	transition: background 0.2s;
}
.newsletter-form input::placeholder { color: var(--or-light); opacity: 0.6; }
.newsletter-form input:focus { background: rgba(250, 247, 240, 0.12); }
.newsletter-form button {
	padding: 0.85rem 1.4rem;
	background: var(--or);
	color: var(--sapin-deep);
	border: 1px solid var(--or);
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 500;
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.25s ease;
}
.newsletter-form button:hover {
	background: var(--or-light);
	border-color: var(--or-light);
}

/* ==========================================
   20. SEARCH FORM
   ========================================== */
.search-form {
	display: flex;
	gap: 0.5rem;
}
.search-field {
	flex: 1;
	padding: 0.8rem 1rem;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.15);
	font-family: var(--sans);
	font-size: 0.95rem;
	color: var(--encre);
	border-radius: 2px;
	outline: none;
	transition: border-color 0.2s;
}
.search-field:focus { border-color: var(--or); }
.search-submit {
	padding: 0.8rem 1.4rem;
	background: var(--sapin-deep);
	color: var(--creme);
	border: 1px solid var(--sapin-deep);
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 500;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.25s;
}
.search-submit:hover { background: var(--sapin); }

/* ==========================================
   21. PAGINATION
   ========================================== */
.pagination-wrap {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}
.pagination-wrap .nav-links {
	display: flex;
	gap: 0.4rem;
	font-family: var(--mono);
	font-size: 0.82rem;
}
.pagination-wrap a,
.pagination-wrap .current,
.pagination-wrap .dots {
	padding: 0.6rem 1rem;
	border: 1px solid rgba(15,61,46,0.15);
	color: var(--sapin-deep);
	text-decoration: none;
	letter-spacing: 0.06em;
	transition: all 0.25s;
}
.pagination-wrap a:hover { background: var(--or-pale); border-color: var(--or); }
.pagination-wrap .current { background: var(--sapin-deep); color: var(--creme); border-color: var(--sapin-deep); }

/* ==========================================
   22. FOOTER
   ========================================== */
footer.site-footer {
	margin-top: 5rem;
	background: var(--sapin-deep);
	color: var(--or-light);
	padding: 3rem 0 1.5rem;
	position: relative;
	z-index: 2;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
.footer-col h4 {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or);
	margin-bottom: 1rem;
	font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col a {
	color: var(--or-light);
	text-decoration: none;
	font-size: 0.88rem;
	transition: color 0.2s;
}
.footer-col a:hover { color: var(--or); }
.footer-brand .logo-mark { color: var(--creme); font-size: 1.6rem; }
.footer-brand .logo-mark::first-letter { color: var(--or); }
.footer-brand p {
	margin-top: 0.8rem;
	font-size: 0.85rem;
	line-height: 1.5;
	max-width: 28em;
	color: var(--or-light);
	opacity: 0.75;
}
.footer-bottom {
	border-top: 1px solid rgba(201, 169, 97, 0.2);
	padding-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--or-light);
	opacity: 0.7;
	flex-wrap: wrap;
	gap: 1rem;
}
.disclaimer {
	font-family: var(--sans);
	font-size: 0.78rem;
	letter-spacing: 0;
	text-transform: none;
	font-style: italic;
	max-width: 40em;
}

/* ==========================================
   23. COMMENTS
   ========================================== */
.comments-area { margin-top: 3rem; }
.comments-title {
	font-family: var(--serif);
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--sapin-deep);
	margin-bottom: 1.5rem;
	font-variation-settings: "opsz" 32;
}
.comment-list { list-style: none; padding: 0; }
.comment-body {
	padding: 1.4rem;
	border: 1px solid rgba(15,61,46,0.08);
	margin-bottom: 1rem;
	background: var(--creme-warm);
}
.comment-meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.comment-author .fn { font-weight: 500; color: var(--sapin-deep); }
.comment-metadata { font-family: var(--mono); font-size: 0.7rem; color: var(--greige); }

/* ==========================================
   24. RESPONSIVE
   ========================================== */
@media (max-width: 1100px) {
	.article-layout {
		grid-template-columns: minmax(0, 720px);
		justify-content: center;
	}
	.article-layout > .article-body { grid-column: 1; }
	.article-layout > aside.toc-wrap { display: none; }
	.related-grid { grid-template-columns: 1fr 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; gap: 3rem; }
	.hero-art { max-width: 380px; justify-self: center; order: 2; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.stat { border-bottom: 1px solid rgba(15,61,46,0.1); }
	.stat:nth-child(2) { border-right: none; }
	.stat:nth-child(3), .stat:nth-child(4) { border-bottom: none; }
	.stat:not(.countdown):not(:last-child)::after { display: none; }
	nav.menu { display: none; }
	.topbar-left .hide-mobile { display: none; }
}
@media (max-width: 720px) {
	.related-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.newsletter-form { flex-direction: column; }
	.article-meta { gap: 1rem; }
	.meta-divider { display: none; }
	.share-row { margin-left: 0; width: 100%; margin-top: 0.5rem; }
	.author-card { grid-template-columns: 1fr; text-align: left; }
	.article-body > p.lead::first-letter { font-size: 3.6em; }
}
@media (max-width: 540px) {
	.stats-grid { grid-template-columns: 1fr; }
	.stat { border-right: none; }
	.topbar { font-size: 0.66rem; }
}

/* ==========================================
   25. PRINT
   ========================================== */
@media print {
	body::before, .topbar, header.nav, .toc-wrap, .related, .newsletter-cta, footer.site-footer, .share-row, .read-progress, .nav-cta { display: none !important; }
	body { background: white; color: black; }
	.article-body { font-size: 11pt; line-height: 1.5; }
	.article-body a { color: black; background: none; }
	.article-body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
	.article-layout { grid-template-columns: 1fr; padding: 0; }
}

/* ==========================================
   26. ACCESSIBILITY: REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

/* ==========================================
   27. FEATURES GRID (sous le hero)
   ========================================== */
.features-section {
	padding: clamp(3rem, 5vw, 4.5rem) 0;
	border-top: 1px solid rgba(15,61,46,0.08);
	border-bottom: 1px solid rgba(15,61,46,0.08);
	background: var(--creme);
	position: relative;
	z-index: 2;
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
}
.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.4rem 0;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease;
}
.feature-item:hover { transform: translateX(2px); }
.feature-item:hover .feature-title { color: var(--sapin-deep); }
.feature-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sapin-deep);
	background: var(--or-pale);
	border-radius: 2px;
	border: 1px solid var(--or-light);
	transition: all 0.3s ease;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-item:hover .feature-icon {
	background: var(--sapin-deep);
	color: var(--or);
	border-color: var(--sapin-deep);
	transform: translateY(-2px);
}
.feature-body { flex: 1; min-width: 0; }
.feature-title {
	font-family: var(--serif);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--encre);
	letter-spacing: -0.01em;
	font-variation-settings: "opsz" 24;
	margin: 0 0 0.25rem 0;
	line-height: 1.2;
	transition: color 0.25s ease;
}
.feature-desc {
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--greige);
	margin: 0;
	line-height: 1.4;
}

/* ==========================================
   28. BANNER ACCENT (sapin pleine largeur)
   ========================================== */
.banner-accent {
	background: var(--sapin-deep);
	color: var(--creme);
	position: relative;
	overflow: hidden;
	z-index: 2;
}
.banner-accent::before {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 380px;
	height: 100%;
	background-image:
		linear-gradient(to right, rgba(201,169,97,0.1) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(201,169,97,0.1) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse 65% 70% at 100% 50%, black, transparent);
	-webkit-mask-image: radial-gradient(ellipse 65% 70% at 100% 50%, black, transparent);
	pointer-events: none;
}
.banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	padding: clamp(2rem, 4vw, 3rem) 0;
	position: relative;
	z-index: 1;
}
.banner-title {
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	font-weight: 400;
	color: var(--creme);
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 36;
	margin: 0;
	line-height: 1.2;
	max-width: 32em;
}
.btn-on-accent {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.5rem;
	background: var(--or);
	color: var(--sapin-deep);
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: 2px;
	border: 1px solid var(--or);
	transition: all 0.25s ease;
	flex-shrink: 0;
	cursor: pointer;
}
.btn-on-accent svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.btn-on-accent:hover {
	background: var(--or-light);
	border-color: var(--or-light);
	transform: translateY(-1px);
}
.btn-on-accent:hover svg { transform: translateX(3px); }

/* ==========================================
   29. ABOUT SECTION (2 colonnes + checklist)
   ========================================== */
.about-section {
	padding: clamp(4rem, 7vw, 6rem) 0;
	position: relative;
	z-index: 2;
}
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(3rem, 6vw, 5rem);
	align-items: center;
}
.about-visual {
	position: relative;
}
.about-figure-frame {
	position: relative;
	background: var(--creme-warm);
	border: 1px solid rgba(15,61,46,0.08);
	aspect-ratio: 5 / 4;
	overflow: hidden;
}
.about-figure-frame::before,
.about-figure-frame::after {
	content: '';
	position: absolute;
	width: 22px; height: 22px;
	border: 1px solid var(--or);
}
.about-figure-frame::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.about-figure-frame::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.about-content > .article-eyebrow { margin-bottom: 1.4rem; }

.about-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--encre);
	font-variation-settings: "opsz" 48;
	margin-bottom: 1.4rem;
	max-width: 16ch;
}
.about-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--sapin-deep);
	font-variation-settings: "opsz" 48;
}

.about-lede {
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--greige);
	margin-bottom: 1.8rem;
	max-width: 38em;
}

.about-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem 1.5rem;
}
.about-checklist li {
	font-family: var(--sans);
	font-size: 0.95rem;
	color: var(--encre);
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding-left: 0;
	margin: 0;
}
.about-checklist li::before {
	content: '';
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: var(--or-pale);
	border: 1px solid var(--or);
	border-radius: 50%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m4 12 5 5 11-11'/></svg>");
	background-size: 11px 11px;
	background-position: center;
	background-repeat: no-repeat;
	position: static;
	top: auto;
	left: auto;
}

.about-cta { margin-top: 0.5rem; }
.about-cta svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.about-cta:hover svg { transform: translateX(3px); }

/* ==========================================
   30. GUIDES SECTION (6 cards)
   ========================================== */
.guides-section {
	padding: clamp(4rem, 6vw, 5.5rem) 0;
	background: var(--creme-warm);
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(15,61,46,0.08);
}
.section-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(2.5rem, 4vw, 4rem);
}
.section-header > .article-eyebrow { margin-bottom: 1.4rem; }
.section-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 2.8rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--encre);
	font-variation-settings: "opsz" 56;
	margin: 0 0 1.2rem 0;
}
.section-lede {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.5;
	color: var(--greige);
	font-variation-settings: "opsz" 24;
	margin: 0;
	max-width: 38em;
	margin-left: auto;
	margin-right: auto;
}

.guides-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.guide-card {
	display: flex;
	flex-direction: column;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.08);
	padding: 2rem 1.8rem;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	min-height: 280px;
}
.guide-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 0; height: 1px;
	background: var(--or);
	transition: width 0.4s ease;
}
.guide-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -22px rgba(15, 61, 46, 0.25);
}
.guide-card:hover::before { width: 100%; }

.guide-card-num {
	position: absolute;
	top: 1.4rem;
	right: 1.6rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	color: var(--greige-light);
	font-weight: 500;
}
.guide-card-cat {
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or);
	font-weight: 500;
	margin-bottom: 1rem;
}
.guide-card-title {
	font-family: var(--serif);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--encre);
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 28;
	margin: 0 0 0.8rem 0;
	line-height: 1.2;
}
.guide-card-desc {
	font-family: var(--sans);
	font-size: 0.92rem;
	color: var(--greige);
	line-height: 1.55;
	margin: 0 0 1.5rem 0;
	flex: 1;
}
.guide-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sapin-deep);
	font-weight: 500;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--or);
	margin-top: auto;
	align-self: flex-start;
	transition: all 0.25s ease;
}
.guide-card-link svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.guide-card:hover .guide-card-link {
	color: var(--or);
	border-bottom-color: var(--sapin-deep);
}
.guide-card:hover .guide-card-link svg { transform: translateX(4px); }

/* ==========================================
   31. RESPONSIVE pour les nouvelles sections
   ========================================== */
@media (max-width: 1100px) {
	.features-grid { grid-template-columns: repeat(2, 1fr); }
	.guides-grid { grid-template-columns: repeat(2, 1fr); }
	.about-grid { gap: 3rem; }
}
@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; }
	.about-visual { max-width: 480px; margin: 0 auto; }
	.about-title { max-width: none; }
	.banner-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
	.btn-on-accent { align-self: flex-start; }
}
@media (max-width: 640px) {
	.features-grid { grid-template-columns: 1fr; gap: 1.4rem; }
	.guides-grid { grid-template-columns: 1fr; }
	.about-checklist { grid-template-columns: 1fr; }
	.guide-card { padding: 1.6rem 1.4rem; min-height: 0; }
	.guide-card-num { top: 1.2rem; right: 1.2rem; }
	.section-title { font-size: 1.8rem; }
	.banner-title { font-size: 1.2rem; }
}

/* ==========================================
   32. CALLOUT v2 — variante avec icône en pastille
   (Inspiré visuels 2 et 7 : pastille colorée à gauche)
   Activable via class="callout-v2" sur le wrapper.
   ========================================== */
.callout-v2 {
	display: flex;
	gap: 1rem;
	padding: 1.4rem 1.6rem;
	margin: 2rem 0;
	background: var(--creme-warm);
	border-radius: 6px;
	border: 1px solid rgba(15,61,46,0.06);
	font-family: var(--sans);
	font-size: 0.96rem;
	line-height: 1.55;
	color: var(--encre);
}
.callout-v2 .cv2-icon {
	flex-shrink: 0;
	width: 38px; height: 38px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--or);
	color: var(--sapin-deep);
}
.callout-v2 .cv2-icon svg { width: 18px; height: 18px; }
.callout-v2 .cv2-body { flex: 1; min-width: 0; }
.callout-v2 .cv2-label {
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or);
	font-weight: 700;
	margin-bottom: 0.4rem;
}
.callout-v2 .cv2-title {
	font-family: var(--serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--sapin-deep);
	margin-bottom: 0.5rem;
	font-variation-settings: "opsz" 18;
	line-height: 1.3;
}
.callout-v2 p { margin: 0 0 0.5rem 0; }
.callout-v2 p:last-child { margin-bottom: 0; }
.callout-v2 strong { color: var(--sapin-deep); font-weight: 500; }

/* Variantes couleur callout-v2 */
.callout-v2.warning { background: rgba(177, 75, 58, 0.07); }
.callout-v2.warning .cv2-icon { background: var(--or); color: var(--sapin-deep); }
.callout-v2.warning .cv2-label { color: var(--rouge); }

.callout-v2.info { background: rgba(15, 61, 46, 0.05); }
.callout-v2.info .cv2-icon { background: var(--sapin-deep); color: var(--or-light); }
.callout-v2.info .cv2-label { color: var(--sapin-deep); }

.callout-v2.tip { background: rgba(31, 89, 71, 0.06); }
.callout-v2.tip .cv2-icon { background: var(--sapin-deep); color: var(--or); }
.callout-v2.tip .cv2-label { color: var(--sapin-deep); }

/* ==========================================
   33. STEP CARD LIST — liste numérotée en cards
   (Inspiré visuel 8 : 01/02/03/04 sub-process)
   Pour les processus simples sans dimension temporelle.
   ========================================== */
.step-list {
	margin: 2rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.step-card {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	padding: 1.2rem 1.5rem;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.1);
	border-radius: 4px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.step-card:hover {
	border-color: var(--or);
	transform: translateX(2px);
}
.step-card-num {
	flex-shrink: 0;
	font-family: var(--serif);
	font-size: 1.6rem;
	font-weight: 500;
	font-style: italic;
	color: var(--or);
	font-variation-settings: "opsz" 36;
	line-height: 1;
	min-width: 2.4rem;
	text-align: center;
}
.step-card-body { flex: 1; min-width: 0; }
.step-card-title {
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--sapin-deep);
	margin: 0 0 0.3rem 0;
	line-height: 1.25;
	font-variation-settings: "opsz" 24;
}
.step-card-desc {
	font-family: var(--sans);
	font-size: 0.92rem;
	color: var(--greige);
	line-height: 1.55;
	margin: 0;
}
.step-card-desc strong { color: var(--sapin-deep); font-weight: 500; }
.step-card-desc a {
	color: var(--sapin-deep);
	text-decoration: underline;
	text-decoration-color: var(--or);
	text-underline-offset: 3px;
}

/* ==========================================
   34. TIMELINE STEPS — étapes datées avec bandeau
   (Inspiré visuel 1 : J-15 / Jour J / J+30 + cards)
   Pour les processus à séquence temporelle réelle.
   ========================================== */
.timeline-block {
	margin: 2.5rem 0;
}
.timeline-band {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1.4rem;
	background: linear-gradient(90deg, var(--sapin-deep), var(--sapin));
	color: var(--creme);
	border-radius: 4px;
	margin-bottom: 0;
}
.timeline-band.past {
	background: linear-gradient(90deg, var(--or), var(--or-light));
	color: var(--sapin-deep);
}
.timeline-band.future {
	background: linear-gradient(90deg, var(--bleu), #4a7ca0);
	color: var(--creme);
}
.timeline-band-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.7rem;
	background: rgba(255,255,255,0.18);
	border-radius: 999px;
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	flex-shrink: 0;
}
.timeline-band.past .timeline-band-pill { background: rgba(15,61,46,0.15); }
.timeline-band-title {
	font-family: var(--serif);
	font-size: 1.05rem;
	font-weight: 500;
	font-style: italic;
	font-variation-settings: "opsz" 24;
	letter-spacing: -0.005em;
}
.timeline-cards {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin-top: 1rem;
}
.timeline-card {
	display: flex;
	gap: 1.2rem;
	padding: 1.4rem 1.6rem;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.08);
	border-radius: 4px;
}
.timeline-card-num {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--creme);
	border: 1.5px solid var(--or);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--or);
	font-weight: 500;
	font-variation-settings: "opsz" 24;
}
.timeline-card-body { flex: 1; min-width: 0; }
.timeline-card-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
}
.timeline-card-title {
	font-family: var(--serif);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--sapin-deep);
	margin: 0;
	line-height: 1.2;
	font-variation-settings: "opsz" 28;
}
.timeline-card-badge {
	display: inline-flex;
	padding: 0.2rem 0.55rem;
	background: var(--or-pale);
	color: var(--or);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 3px;
}
.timeline-card-meta {
	display: flex;
	gap: 1rem;
	font-family: var(--sans);
	font-size: 0.78rem;
	color: var(--greige);
	margin-bottom: 0.7rem;
}
.timeline-card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.timeline-card-meta-item svg { width: 12px; height: 12px; opacity: 0.7; }
.timeline-card-desc {
	font-family: var(--sans);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--encre);
	margin: 0;
}
.timeline-card-desc strong { color: var(--sapin-deep); font-weight: 500; }
.timeline-card-desc a {
	color: var(--sapin-deep);
	text-decoration: underline;
	text-decoration-color: var(--or);
	text-underline-offset: 3px;
}
.timeline-card-tip {
	margin-top: 0.8rem;
	padding: 0.7rem 1rem;
	background: rgba(45, 92, 127, 0.06);
	border-left: 2px solid var(--bleu);
	border-radius: 2px;
	font-family: var(--sans);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--encre);
}
.timeline-card-tip strong {
	color: var(--bleu);
	font-weight: 600;
	font-style: italic;
}

/* ==========================================
   35. STAT GRID — grille de statistiques en cards
   (Inspiré visuel 4 : Frais/Engagement/Coupure/Fournisseurs/Réseau/Mise en service)
   ========================================== */
.stat-grid {
	margin: 2rem 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8rem;
}
.stat-grid-card {
	padding: 1.4rem 1.5rem;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.1);
	border-radius: 4px;
	transition: border-color 0.25s ease;
}
.stat-grid-card:hover { border-color: var(--or); }
.stat-grid-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}
.stat-grid-icon {
	flex-shrink: 0;
	width: 28px; height: 28px;
	border-radius: 4px;
	background: var(--or-pale);
	color: var(--sapin-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}
.stat-grid-icon svg { width: 14px; height: 14px; }
.stat-grid-label {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--greige);
	font-weight: 500;
}
.stat-grid-value {
	font-family: var(--serif);
	font-size: 1.7rem;
	font-weight: 500;
	color: var(--sapin-deep);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 0.4rem;
	font-variation-settings: "opsz" 36;
}
.stat-grid-value .accent { color: var(--or); }
.stat-grid-sub {
	font-family: var(--sans);
	font-size: 0.82rem;
	color: var(--greige);
	line-height: 1.4;
}

/* ==========================================
   36. STAT INLINE — 4 mini-stats horizontales
   (Inspiré visuel 5 : 0,1940€ / 2×/an / EDF / CRE)
   ========================================== */
.stat-inline {
	margin: 2rem 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.8rem;
}
.stat-inline-card {
	padding: 1.4rem 1rem;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.1);
	border-radius: 4px;
	text-align: center;
}
.stat-inline-value {
	font-family: var(--serif);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--sapin-deep);
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 36;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.stat-inline-value .accent { color: var(--or); }
.stat-inline-label {
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--encre);
	font-weight: 500;
	margin-bottom: 0.2rem;
}
.stat-inline-sub {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--greige);
	font-style: italic;
}

/* ==========================================
   37. COMPARE 3-CARDS — comparateur prix/options
   (Inspiré visuel 3 : Mise en service standard/coupé/express)
   ========================================== */
.compare-cards {
	margin: 2rem 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.8rem;
}
.compare-card {
	padding: 1.6rem 1.5rem;
	background: var(--creme);
	border: 1px solid rgba(15,61,46,0.1);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.compare-card.recommended {
	border: 1.5px solid var(--bleu);
	background: linear-gradient(180deg, rgba(45, 92, 127, 0.05), var(--creme) 80%);
}
.compare-card-badge {
	position: absolute;
	top: -10px;
	left: 1.4rem;
	display: inline-flex;
	padding: 0.3rem 0.8rem;
	background: var(--bleu);
	color: var(--creme);
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 3px;
}
.compare-card-title {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--sapin-deep);
	margin: 0 0 0.5rem 0;
	font-variation-settings: "opsz" 28;
	line-height: 1.2;
}
.compare-card-meta {
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--greige);
	margin-bottom: 1rem;
	line-height: 1.5;
}
.compare-card-price {
	font-family: var(--serif);
	font-size: 2.2rem;
	font-weight: 500;
	color: var(--sapin-deep);
	letter-spacing: -0.025em;
	font-variation-settings: "opsz" 56;
	line-height: 1;
	margin-bottom: 0.8rem;
}
.compare-card-price .unit {
	font-family: var(--mono);
	font-size: 0.65rem;
	color: var(--greige);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-left: 0.3rem;
	vertical-align: super;
}
.compare-card-desc {
	font-family: var(--sans);
	font-size: 0.88rem;
	color: var(--encre);
	line-height: 1.55;
	margin-bottom: 1.2rem;
	flex: 1;
}
.compare-card-desc strong { color: var(--sapin-deep); font-weight: 500; }
.compare-card-bars {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(15,61,46,0.08);
}
.compare-card-bar {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.compare-card-bar-head {
	display: flex;
	justify-content: space-between;
	font-family: var(--sans);
	font-size: 0.75rem;
}
.compare-card-bar-label { color: var(--greige); }
.compare-card-bar-value { color: var(--sapin-deep); font-weight: 500; }
.compare-card-bar-track {
	height: 3px;
	background: rgba(15,61,46,0.08);
	border-radius: 2px;
	overflow: hidden;
}
.compare-card-bar-fill {
	height: 100%;
	background: var(--bleu);
	border-radius: 2px;
}

/* ==========================================
   38. SUMMARY BOX — bloc "En résumé" condensé
   (Inspiré visuel 6 : bloc final synthèse)
   ========================================== */
.summary-box {
	margin: 2rem 0;
	padding: 1.4rem 1.6rem;
	background: var(--creme-warm);
	border-radius: 4px;
	border: 1px solid rgba(15,61,46,0.06);
}
.summary-box-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or);
	font-weight: 600;
	margin-bottom: 0.8rem;
}
.summary-box-label::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--or);
}
.summary-box-row {
	font-family: var(--sans);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--encre);
	margin: 0 0 0.5rem 0;
}
.summary-box-row:last-child { margin-bottom: 0; }
.summary-box-row strong {
	color: var(--sapin-deep);
	font-weight: 600;
}

/* ==========================================
   39. RESPONSIVE des nouveaux composants
   ========================================== */
@media (max-width: 900px) {
	.stat-grid { grid-template-columns: repeat(2, 1fr); }
	.stat-inline { grid-template-columns: repeat(2, 1fr); }
	.compare-cards { grid-template-columns: 1fr; gap: 1.5rem; }
	.compare-card-badge { top: -10px; }
}
@media (max-width: 640px) {
	.stat-grid { grid-template-columns: 1fr; }
	.stat-inline { grid-template-columns: repeat(2, 1fr); }
	.callout-v2 { flex-direction: column; gap: 0.8rem; padding: 1.2rem 1.3rem; }
	.timeline-card { flex-direction: column; gap: 0.8rem; }
	.timeline-card-head { gap: 0.5rem; }
	.step-card { padding: 1rem 1.2rem; gap: 1rem; }
	.step-card-num { font-size: 1.4rem; min-width: 2rem; }
}