/* ═════════════════════════════════════════════════════════════════
   Laboratoire Conscientiel — Direction « Observatoire »
   Palette froide minérale : perle, anthracite, acier, cuivre patiné
   Typographie : EB Garamond (titres) + Inter (corps)
   ═════════════════════════════════════════════════════════════════ */

:root {
	--lab-perle:        #F4F5F6;
	--lab-perle-soft:   #ECEEF0;
	--lab-anthracite:   #1F2428;
	--lab-anthracite-2: #3D4248;
	--lab-ardoise:      #6B7480;
	--lab-acier:        #4A6478;
	--lab-acier-soft:   #7A92A4;
	--lab-cuivre:       #B8826A;
	--lab-cuivre-soft:  #D4A586;
	--lab-trait:        #DCE0E4;
	--lab-white:        #FFFFFF;

	--lab-transition: 0.22s ease;
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
	background: var(--lab-perle);
	color: var(--lab-anthracite);
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
	line-height: 1.65;
}
a { color: var(--lab-acier); transition: color var(--lab-transition); }
a:hover { color: var(--lab-cuivre); }

/* ── Site header — FIXED ─────────────────────────────────────── */
.wp-site-blocks > header.wp-block-template-part {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important;
	width: 100% !important;
	z-index: 1000 !important;
	margin: 0 !important;
	background: rgba(244, 245, 246, 0.95);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	transition: box-shadow 0.2s ease;
}
.wp-site-blocks > header.wp-block-template-part.scrolled {
	box-shadow: 0 2px 12px rgba(31, 36, 40, 0.06);
}

body { padding-top: 96px; }
@media (max-width: 720px) { body { padding-top: 84px; } }

/* ── Supprime le gap FSE (padding-block-start injecté sur <main has-global-padding>) ── */
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > main.has-global-padding {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}

/* ── Supprime le gap FSE de 24px (margin-block-start injecté par WP sur les enfants
      de .wp-site-blocks) sur le <footer> : sinon une bande claire apparaît entre une
      section sombre de fin de page (ex. CTA articles) et le footer sombre.
      On délimite à la place les deux blocs par un trait fin d'1px. ── */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0 !important;
	border-top: 1px solid var(--lab-anthracite-2);
}

.lab-site-header {
	padding-block: 1.25rem;
	background: transparent;
	border-block-end: 1px solid var(--lab-trait);
	transition: padding 0.2s ease;
}
.wp-site-blocks > header.wp-block-template-part.scrolled .lab-site-header {
	padding-block: 0.85rem;
}

.lab-brand { display: flex; align-items: center; gap: 1rem; }
.lab-brand__text { display: flex; flex-direction: column; gap: 0; }

/* ── Logo : contraint à 56 px (header 96 px = 20 pad + 56 logo + 20 pad) ── */
.lab-site-logo { width: 56px !important; flex-shrink: 0; }
.lab-site-logo img.custom-logo { width: 56px !important; height: auto !important; display: block; }

/* ── Navigation principale ─────────────────────────────────────── */
.lab-site-header .wp-block-navigation .wp-block-navigation-item__content {
	font-family: "Inter", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lab-anthracite);
	padding: 0.5rem 0;
	transition: color var(--lab-transition);
}
.lab-site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--lab-acier);
}

/* ── Hero de page ─────────────────────────────────────────────── */
.lab-page-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem);
	background-color: var(--lab-perle);
	border-block-end: 1px solid var(--lab-trait);
	overflow: hidden;
}

/* Inner wrapper : identique au <div style="max-width:960px;margin:0 auto"> de home.php */
.lab-page-hero__inner {
	max-width: 960px;
	margin-inline: auto;
	text-align: center;
}

.lab-page-hero__title {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: clamp(1.5rem, 4.6vw, 2.75rem) !important;
	font-weight: 300 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	color: var(--lab-anthracite) !important;
	margin: 0 !important;
	text-align: center !important;
}
@media (max-width: 560px) {
	.lab-page-hero__title { white-space: normal !important; letter-spacing: 0.1em !important; }
}

.lab-page-hero__subtitle,
.lab-page-hero__subtitle .wp-block-post-excerpt__excerpt {
	font-family: "EB Garamond", Georgia, serif;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lab-anthracite-2);
}
.lab-page-hero__subtitle {
	max-width: 640px;
	margin-inline: auto;
	margin-block-start: 1.5rem;
}
.lab-page-hero__subtitle .wp-block-post-excerpt__excerpt { margin: 0; }
.lab-page-hero__subtitle em { font-style: normal; }

.lab-page-hero__rule {
	display: block;
	width: 64px;
	height: 1px;
	margin-block-start: 2rem;
	margin-inline: auto;
	background: linear-gradient(90deg, transparent 0%, var(--lab-cuivre) 50%, transparent 100%);
	border: 0;
}

/* Variante hero avec image de fond fractale (Accueil) */
.lab-hero--with-bg {
	position: relative;
	padding-block: clamp(5rem, 12vw, 9rem);
	background-color: #0f1b2d;
	overflow: hidden;
	text-align: center;
	color: var(--lab-perle);
	isolation: isolate;
}
.lab-hero--with-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--lab-hero-bg, none);
	background-size: cover;
	background-position: center;
	z-index: -2;
	opacity: 1;
}
.lab-hero--with-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #0f1b2d;
	opacity: 0.2;
	z-index: -1;
}
.lab-hero--with-bg .lab-page-hero__title { color: var(--lab-perle) !important; text-shadow: 0 2px 18px rgba(8, 14, 24, 0.55); }
.lab-hero--with-bg .lab-page-hero__subtitle,
.lab-hero--with-bg .lab-page-hero__subtitle .wp-block-post-excerpt__excerpt {
	color: rgba(244, 245, 246, 0.85);
}
.lab-hero--with-bg .lab-page-hero__rule {
	background: linear-gradient(90deg, transparent 0%, var(--lab-cuivre-soft) 50%, transparent 100%);
}

/* ── Container générique ──────────────────────────────────────── */
.lab-container       { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.lab-container--narrow { max-width: 720px;  margin: 0 auto; padding: 0 1.5rem; }

/* ── Sections génériques ──────────────────────────────────────── */
.lab-section {
	padding: 4rem 1.5rem 5rem;
}
.lab-section--anthracite {
	background: var(--lab-anthracite);
	color: var(--lab-perle);
}
.lab-section--anthracite h2,
.lab-section--anthracite h3 { color: var(--lab-perle) !important; }
.lab-section--perle-soft { background: var(--lab-perle-soft); }

/* ── Eyebrows (surtitres) ─────────────────────────────────────── */
.lab-eyebrow,
.lab-section__eyebrow {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lab-ardoise);
	margin: 0 0 1.25rem;
}
.lab-section--anthracite .lab-eyebrow { color: var(--lab-cuivre-soft); }

/* ── Lead paragraph ────────────────────────────────────────────── */
.lab-lead {
	font-family: "EB Garamond", Georgia, serif;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--lab-anthracite-2);
	margin-bottom: 2rem;
}

/* ── Boutons ──────────────────────────────────────────────────── */
.lab-btn {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.85rem 1.75rem;
	text-decoration: none;
	border-radius: 2px;
	transition: all 0.18s ease;
}
.lab-btn--primary {
	background: var(--lab-acier);
	color: var(--lab-white);
	border: 1px solid var(--lab-acier);
}
.lab-btn--primary:hover {
	background: var(--lab-anthracite);
	border-color: var(--lab-anthracite);
	color: var(--lab-white);
}
.lab-btn--ghost {
	background: transparent;
	color: var(--lab-anthracite);
	border: 1px solid var(--lab-trait);
}
.lab-btn--ghost:hover {
	border-color: var(--lab-acier);
	color: var(--lab-acier);
}
.lab-section--anthracite .lab-btn--ghost {
	color: var(--lab-perle);
	border-color: rgba(255, 255, 255, 0.25);
}
.lab-section--anthracite .lab-btn--ghost:hover {
	color: var(--lab-cuivre-soft);
	border-color: var(--lab-cuivre-soft);
}

/* ── Footer ───────────────────────────────────────────────────── */
.lab-site-footer a { color: var(--lab-perle-soft); text-decoration: none; }
.lab-site-footer a:hover { color: var(--lab-cuivre-soft); }
.lab-site-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--lab-perle-soft) !important;
}

/* ═════════════════════════════════════════════════════════════════
   FORMULAIRE CONTACT
   ═════════════════════════════════════════════════════════════════ */
.lab-contact-form { max-width: 640px; margin: 2rem 0; }
.lab-form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.lab-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}
.lab-form-row .lab-form-field { margin-bottom: 0; }
@media (max-width: 600px) { .lab-form-row { grid-template-columns: 1fr; } }

.lab-form-field { margin-bottom: 1.25rem; display: flex; flex-direction: column; }
.lab-form-field label {
	font-family: "Inter", sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lab-acier);
	margin-bottom: 0.5rem;
}
.lab-form-field input,
.lab-form-field textarea {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	padding: 0.85rem 1rem;
	border: 1px solid var(--lab-trait);
	border-radius: 2px;
	background: var(--lab-white);
	color: var(--lab-anthracite);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lab-form-field input:focus,
.lab-form-field textarea:focus {
	outline: none;
	border-color: var(--lab-acier);
	box-shadow: 0 0 0 3px rgba(74, 100, 120, 0.12);
}
.lab-form-field textarea { resize: vertical; min-height: 160px; }

.lab-input--capitalize { text-transform: capitalize; }
.lab-input--uppercase { text-transform: uppercase; letter-spacing: 0.04em; }

.lab-form-submit {
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.9rem 2rem;
	background: var(--lab-acier);
	color: var(--lab-white);
	border: 1px solid var(--lab-acier);
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.18s ease;
}
.lab-form-submit:hover { background: var(--lab-anthracite); border-color: var(--lab-anthracite); }

.lab-form-success {
	background: #E8F0F4;
	border-left: 3px solid var(--lab-acier);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
	color: var(--lab-anthracite);
}
.lab-form-error {
	background: #F4E5DD;
	border-left: 3px solid var(--lab-cuivre);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem;
	color: #6E2812;
}

/* ── Navigation prev/next article ─── */
.wp-block-post-navigation-link { flex: 1; min-width: 0; align-self: flex-start; }
.wp-block-post-navigation-link a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: opacity var(--lab-transition);
}
.wp-block-post-navigation-link a:hover { opacity: 0.72; }
.wp-block-post-navigation-link:last-child a { text-align: right; }
/* Libellé direction */
.post-navigation-link__label {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lab-cuivre);
	margin-bottom: 0.5rem;
}
/* Titre de l'article adjacent — 2 lignes max */
.post-navigation-link__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: "EB Garamond", serif;
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--lab-anthracite);
}

/* ═════════════════════════════════════════════════════════════════
   PAGE ARTICLES — listing type Sageocracy
   ═════════════════════════════════════════════════════════════════ */

.lab-articles-page { background: var(--lab-perle); }

.lab-articles-section { padding: 4rem 1.5rem 5rem; }
.lab-articles-container { max-width: 1180px; margin: 0 auto; }

/* Filtres */
.lab-articles-filters {
	display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
	margin-bottom: 2.5rem;
}
.lab-articles-filters__label {
	font-family: "Inter", sans-serif;
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--lab-ardoise); margin-right: 0.5rem;
}
.lab-articles-filter {
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem; font-weight: 500;
	padding: 0.35rem 1rem;
	border: 1px solid var(--lab-trait);
	border-radius: 999px;
	color: var(--lab-anthracite);
	text-decoration: none;
	transition: all 0.18s ease;
	background: transparent;
}
.lab-articles-filter:hover { border-color: var(--lab-acier); color: var(--lab-acier); }
.lab-articles-filter.is-active {
	background: var(--lab-acier); border-color: var(--lab-acier); color: var(--lab-white);
}

/* Grille */
.lab-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 980px) { .lab-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 640px) { .lab-blog-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Carte */
.lab-blog-card {
	background: var(--lab-white);
	border: 1px solid var(--lab-trait);
	display: flex; flex-direction: column;
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.lab-blog-card:hover {
	box-shadow: 0 12px 32px rgba(31, 36, 40, 0.08), 0 2px 6px rgba(31, 36, 40, 0.05);
	transform: translateY(-2px);
}
.lab-blog-card__img {
	display: block; aspect-ratio: 3 / 2; overflow: hidden;
	background: var(--lab-anthracite); position: relative;
}
.lab-blog-card__img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.45s ease;
}
.lab-blog-card:hover .lab-blog-card__img img { transform: scale(1.03); }
.lab-blog-card__img__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: "EB Garamond", serif;
	font-size: 3rem; color: var(--lab-cuivre);
	opacity: 0.45;
	background: linear-gradient(135deg, var(--lab-anthracite) 0%, var(--lab-acier) 100%);
}

.lab-blog-card__body {
	padding: 1.5rem 1.5rem 1.75rem;
	display: flex; flex-direction: column; flex: 1;
}
.lab-blog-card__meta {
	font-family: "Inter", sans-serif;
	font-size: 0.6875rem; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--lab-ardoise);
	margin: 0 0 0.75rem;
}
.lab-blog-card__sep { margin: 0 0.5rem; color: var(--lab-cuivre); }
.lab-blog-card__cat { color: var(--lab-acier); text-decoration: none; font-weight: 600; }
.lab-blog-card__cat:hover { text-decoration: underline; }

.lab-blog-card__title {
	font-family: "Inter", sans-serif;
	font-size: 1.125rem; font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
	margin: 0 0 0.75rem;
	color: var(--lab-anthracite);
}
.lab-blog-card__title a { color: inherit; text-decoration: none; }
.lab-blog-card__title a:hover { color: var(--lab-acier); }

.lab-blog-card__excerpt {
	font-family: "Inter", sans-serif;
	font-size: 0.9375rem; line-height: 1.65;
	color: var(--lab-anthracite-2);
	flex: 1; margin-bottom: 1.25rem;
}
.lab-blog-card__excerpt p { margin: 0; }

.lab-blog-card__read {
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem; font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--lab-acier);
	text-decoration: none;
	align-self: flex-start;
	border-bottom: 1px solid transparent;
	transition: border-color 0.18s ease;
}
.lab-blog-card__read:hover { border-bottom-color: var(--lab-acier); }

/* Pagination */
.lab-pagination { margin-top: 3.5rem; text-align: center; }
.lab-pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.9rem; margin: 0 0.15rem;
	font-family: "Inter", sans-serif; font-size: 0.875rem;
	color: var(--lab-anthracite);
	text-decoration: none;
	border: 1px solid var(--lab-trait);
	transition: all 0.18s ease;
}
.lab-pagination .page-numbers:hover { border-color: var(--lab-acier); color: var(--lab-acier); }
.lab-pagination .page-numbers.current {
	background: var(--lab-acier); border-color: var(--lab-acier); color: var(--lab-white);
}
.lab-pagination .page-numbers.dots { border: 0; }

/* Empty state */
.lab-articles-empty {
	text-align: center;
	padding: 4rem 1.5rem;
	max-width: 600px;
	margin: 0 auto;
}
.lab-articles-empty__diamond {
	font-family: "EB Garamond", serif;
	font-size: 3rem; color: var(--lab-cuivre); opacity: 0.6;
	margin: 0 0 1.5rem; line-height: 1;
}
.lab-articles-empty__title {
	font-family: "EB Garamond", serif;
	font-size: 1.625rem; font-weight: 500;
	color: var(--lab-anthracite); margin: 0 0 1.25rem;
}
.lab-articles-empty__text {
	font-family: "Inter", sans-serif;
	font-size: 1rem; line-height: 1.65;
	color: var(--lab-anthracite-2);
	margin: 0 0 2rem;
}

/* CTA final */
.lab-articles-cta {
	background: var(--lab-anthracite);
	color: var(--lab-perle);
	padding: 5rem 1.5rem;
	text-align: center;
}
.lab-articles-cta__inner { max-width: 720px; margin: 0 auto; }
.lab-articles-cta__quote {
	font-family: "EB Garamond", serif;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-style: italic; font-weight: 400;
	line-height: 1.35;
	color: var(--lab-cuivre-soft);
	margin: 0 0 2rem;
	letter-spacing: 0.01em;
}
.lab-articles-cta__text {
	font-family: "Inter", sans-serif;
	font-size: 1rem; line-height: 1.7;
	color: var(--lab-perle); opacity: 0.85;
	margin: 0 0 2.5rem;
}
.lab-articles-cta__buttons {
	display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
}
.lab-articles-cta .lab-btn--ghost {
	color: var(--lab-perle);
	border-color: rgba(255, 255, 255, 0.25);
}
.lab-articles-cta .lab-btn--ghost:hover {
	color: var(--lab-cuivre-soft);
	border-color: var(--lab-cuivre-soft);
}