/* ============================================================
   Résineo Guides — page template styles
   Loaded only on pages using the "Guide Résineo" template.
   ============================================================ */

/* ─── Reading progress bar ──────────────────────────────── */
.guide-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 50;
	background: transparent;
	pointer-events: none;
}
.guide-progress__bar {
	height: 100%;
	width: 0;
	background: var(--c-brown);
	transition: width 0.1s linear;
}

/* ─── Reset OceanWP wrappers for full-bleed sections ─────
   OceanWP's Customizer "Site Width" setting injects max-width on
   #wrap / #main / #content-wrap. Override to free our layout to
   the .container 1280px max-width (children manage their own centering).
   ──────────────────────────────────────────────────────── */
.guide-template #outer-wrap,
.guide-template #wrap,
.guide-template #main,
.guide-template #main #content-wrap,
.guide-template #content-wrap,
.guide-template .site-main {
	max-width: none !important;
	width: 100% !important;
	float: none !important;
}

/* Allow sticky sidebar — `overflow-x: hidden` on body (set in child
   style.css) creates a scrollable BFC that breaks position: sticky on
   descendants. `overflow-x: clip` prevents horizontal scroll without
   creating a scroll context. Also ensure no ancestor wrapper clips. */
body.guide-template,
html:has(body.guide-template) {
	overflow-x: clip;
}
.guide-template #outer-wrap,
.guide-template #wrap,
.guide-template #main,
.guide-template .site-main,
.guide-template .guide-main,
.guide-template .guide-layout {
	overflow: visible !important;
}
.guide-template #main {
	padding: 0 !important;
	margin: 0 !important;
}
.guide-template #main #content-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ─── Breadcrumb ────────────────────────────────────────── */
.guide-breadcrumb {
	background: var(--c-sand-light);
}
.guide-breadcrumb__inner {
	font-size: 12px;
	color: var(--c-body);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	font-family: var(--font-sans);
}
/* Neutralize OceanWP's positioning/sizing on .site-breadcrumbs
   (intended for the page header that we disabled on Guide template).
   Parent style.css:6126 sets absolute positioning, height 32px,
   max-width 50%, overflow hidden, light grey color — all of which
   make the breadcrumb invisible in our flow context. */
.guide-template .guide-breadcrumb .site-breadcrumbs {
	position: static !important;
	right: auto !important;
	top: auto !important;
	transform: none !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	color: var(--c-body) !important;
	font-size: 12px !important;
}
.guide-template .guide-breadcrumb .site-breadcrumbs a {
	color: var(--c-body) !important;
	text-decoration: none !important;
}
.guide-template .guide-breadcrumb .site-breadcrumbs a:hover {
	color: var(--c-brown) !important;
}
.guide-template .guide-breadcrumb .breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
}
.guide-template .guide-breadcrumb .breadcrumb li {
	display: inline;
}
.guide-template .guide-breadcrumb .breadcrumb-item.active span,
.guide-template .guide-breadcrumb .breadcrumb-item[aria-current="page"] span {
	color: var(--c-brown);
	font-weight: 600;
}
/* SEOPress markup: <span><a>...</a></span> separator and current */
.guide-breadcrumb__inner a {
	color: var(--c-body);
	text-decoration: none;
	transition: color 0.2s ease;
}
.guide-breadcrumb__inner a:hover {
	color: var(--c-brown);
}
.guide-breadcrumb__inner .seopress-breadcrumb-current,
.guide-breadcrumb__inner > span > span:last-child {
	color: var(--c-brown);
	font-weight: 600;
}

/* ─── Main layout ───────────────────────────────────────── */
.guide-main {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	font-family: var(--font-sans);
	color: var(--c-body);
	line-height: 1.6;
}
.guide-layout {
	display: block;
}
@media (min-width: 1024px) {
	.guide-layout {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) 340px;
		gap: 3rem;
	}
}

/* ─── Headings (page template scope) ────────────────────── */
.guide-main h1, .guide-main h2, .guide-main h3, .guide-main h4, .guide-main h5, .guide-main h6 {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--c-brown);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
}

/* ─── Article header ────────────────────────────────────── */
.guide-article {
	min-width: 0;
}
.guide-article__header {
	margin-bottom: 2rem;
}
.guide-article__title {
	font-size: 30px;
	line-height: 1.2;
	margin-bottom: 0.75rem;
}
.guide-article__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 14px;
	color: rgba(113, 121, 125, 0.7);
}
.guide-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}
.guide-article__meta-item svg {
	width: 16px;
	height: 16px;
}
.guide-article__meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-sand);
}

/* ─── Article body (prose) ──────────────────────────────── */
.prose-resineo h2 {
	font-size: 26px;
	font-weight: 600;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--c-sand);
	line-height: 1.25;
}
.prose-resineo p {
	color: #4A4A4A;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

/* Inline links in prose — match the Résineo brand colours instead of the
   parent theme's Customizer "Primary Color" (which is blue on production).
   Underline kept for accessibility. */
.prose-resineo a {
	color: var(--c-brown-dark);
	text-decoration: underline;
	transition: color 0.2s ease;
}
.prose-resineo a:hover {
	color: var(--c-brown);
}

/* Explicit H3/H4 rules — the .guide-main h1..h6 reset above zeroes margins
   and the parent theme sets very tight line-heights (h3 inherits 1.0 from
   OceanWP). Override here so headings inside prose breathe. */
.prose-resineo h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}
.prose-resineo h4 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.prose-resineo ul,
.prose-resineo ol {
	margin: 0.75rem 0 1.5rem;
	list-style: none;
}
.prose-resineo ol {
	padding-left: 0;
}
/* Bullet list sits inside the content column, slightly indented from the
   paragraph above. Bullet sits at the start of <li> and the text indents
   to leave a comfortable gap between bullet and first letter. */
.prose-resineo ul {
	padding-left: 1.5rem;
}
.prose-resineo ul li,
.prose-resineo ol li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	color: #4A4A4A;
	line-height: 1.55;
}
.prose-resineo ul li {
	padding-left: 2rem;
}
.prose-resineo ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-brown);
}
.prose-resineo ol { counter-reset: step; }
.prose-resineo ol li {
	counter-increment: step;
	padding-left: 3rem;
	min-height: 2.25rem;
}
.prose-resineo ol li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--c-sand-light);
	color: var(--c-brown);
	font-weight: 600;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-sand);
}
.prose-resineo img {
	border-radius: 6px;
	margin: 1.5rem 0;
	width: 100%;
	height: auto;
}
.prose-resineo blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--c-brown);
	background: var(--c-sand-light);
	border-radius: 0 0.5rem 0.5rem 0;
}
.prose-resineo blockquote p {
	font-style: italic;
	color: #333333;
	margin: 0;
}

/* CTA inline styles moved to blocks/cta-resineo/style.css (auto-loaded
   when the block is used). The block markup is self-contained and the
   styles ship with the block to keep one source of truth. */

/* ─── Sidebar ───────────────────────────────────────────── */
.guide-sidebar {
	display: none;
}
@media (min-width: 1024px) {
	.guide-sidebar { display: block; }
}

/* ─── Mobile inline TOC (collapsible, after 1st <p>) ────── */
.guide-toc-mobile {
	display: none;
}
@media (max-width: 1023px) {
	.guide-toc-mobile {
		display: block;
		background: var(--c-sand-light);
		border-radius: 10px;
		margin: 1.5rem 0;
		overflow: hidden;
	}
	.guide-toc-mobile__summary {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.875rem 1rem;
		font-family: var(--font-serif);
		font-style: italic;
		font-weight: 400;
		font-size: 17px;
		color: var(--c-brown);
		cursor: pointer;
		list-style: none;
	}
	.guide-toc-mobile__summary::-webkit-details-marker { display: none; }
	.guide-toc-mobile__summary svg { width: 18px; height: 18px; }
	.guide-toc-mobile__summary::after {
		content: '+';
		margin-left: auto;
		font-family: var(--font-sans);
		font-style: normal;
		font-size: 22px;
		line-height: 1;
		color: var(--c-body);
		transition: transform 0.15s ease;
	}
	.guide-toc-mobile[open] .guide-toc-mobile__summary::after {
		content: '−';
	}
	.guide-toc-mobile__list {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		padding: 0 1rem 1rem;
	}
	/* !important needed because the inline TOC is moved by JS into
	   .prose-resineo, whose parent-theme rule adds an underline to nested
	   anchors (.prose-resineo a { text-decoration: underline }). */
	.guide-toc-mobile__list .guide-toc__link {
		display: block;
		font-size: 14px;
		color: var(--c-body);
		padding: 0.35rem 0.5rem;
		border-radius: 6px;
		border-left: 2px solid transparent;
		text-decoration: none !important;
		line-height: 1.5;
	}
	.guide-toc-mobile__list .guide-toc__link.is-active {
		border-left-color: var(--c-brown);
		color: var(--c-brown);
	}
}

/* ─── Mobile inline Related guides (after last CTA) ─────── */
.guide-related-mobile {
	display: none;
}
@media (max-width: 1023px) {
	.guide-related-mobile {
		display: block;
		border: 1px solid var(--c-sand);
		border-radius: 12px;
		padding: 1.25rem;
		margin: 2rem 0 0;
	}
	.guide-main .guide-related-mobile__title {
		font-family: var(--font-serif);
		font-style: italic;
		font-weight: 400;
		color: var(--c-brown);
		font-size: 18px;
		margin: 0 0 1rem;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	.guide-related-mobile__title svg { width: 16px; height: 16px; color: var(--c-brown); }
	.guide-related-mobile__list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
	.guide-related-mobile__item {
		display: block;
		text-decoration: none;
	}
	.guide-related-mobile__name {
		font-size: 15px;
		font-weight: 500;
		color: var(--c-body);
		line-height: 1.35;
		margin: 0;
	}
	.guide-related-mobile__time {
		font-size: 12px;
		color: rgba(113, 121, 125, 0.6);
		margin: 0.125rem 0 0;
	}
	.guide-related-mobile__sep {
		border-top: 1px solid var(--c-sand);
	}
}
.guide-sidebar__sticky {
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ─── Sidebar block — TOC ───────────────────────────────── */
.guide-toc {
	background: var(--c-sand-light);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.10);
}
/* Specificity note: .guide-main h1..h6 { margin: 0 } above wins over a
   bare .guide-toc__title rule. Use .guide-main .guide-toc__title (0,2,0)
   to match and let source order win — otherwise margin-bottom is clobbered
   to 0 and the title sits flush against the list. */
.guide-main .guide-toc__title {
	font-size: 18px;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.guide-toc__title svg {
	width: 18px;
	height: 18px;
	color: var(--c-brown);
}
.guide-toc__list {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.guide-toc__link {
	display: block;
	font-size: 14px;
	color: var(--c-body);
	padding: 0.35rem 0.75rem;
	border-radius: 6px;
	border-left: 2px solid transparent;
	text-decoration: none;
	line-height: 1.5;
	transition: all 0.15s ease;
}
.guide-toc__link:hover,
.guide-toc__link.is-active {
	border-left-color: var(--c-brown);
	color: var(--c-brown);
	background: rgba(201, 187, 160, 0.06);
}

/* ─── Sidebar block — CTA Devis ─────────────────────────── */
.cta-resineo-sidebar {
	--cta-gold:    var(--c-brown);
	--cta-content: #4E4E4E;
	--cta-white:   #fff;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.cta-resineo-sidebar .cta-resineo-sidebar__body {
	background: var(--cta-content);
	padding: 26px 20px;
	text-align: center;
}
.cta-resineo-sidebar .cta-resineo-sidebar__title {
	font-family: var(--font-heading);
	font-style: normal;
	font-weight: 400;
	font-size: 21px;
	line-height: 27px;
	color: var(--cta-white);
	margin: 0 0 12px;
}
.cta-resineo-sidebar .cta-resineo-sidebar__title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: var(--cta-gold);
}
.cta-resineo-sidebar .cta-resineo-sidebar__lead {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 auto 16px;
}
.cta-resineo-sidebar .cta-resineo-sidebar__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 5px 5px 16px;
	border-radius: 100px;
	background: var(--cta-white);
	color: var(--cta-content);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.2s ease;
}
.cta-resineo-sidebar .cta-resineo-sidebar__btn:hover {
	background: var(--c-sand-light);
	transform: translateY(-1px);
}
.cta-resineo-sidebar .cta-resineo-sidebar__btn-arrow {
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cta-content);
	color: var(--cta-white);
	transition: transform 0.3s ease;
}
.cta-resineo-sidebar .cta-resineo-sidebar__btn:hover .cta-resineo-sidebar__btn-arrow {
	transform: translate(2px, -2px);
}
.cta-resineo-sidebar .cta-resineo-sidebar__btn-arrow svg {
	width: 12px;
	height: 12px;
}

/* ─── Sidebar block — Press ─────────────────────────────── */
.guide-press {
	border: 1px solid var(--c-sand);
	border-radius: 12px;
	padding: 1.25rem;
}
.guide-press__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.guide-press__icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(184, 150, 78, 0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.guide-press__icon svg {
	width: 14px;
	height: 14px;
	color: var(--c-gold);
}
/* Same specificity bump (avoid .guide-main h1..h6 reset). */
.guide-main .guide-press__title {
	font-size: 16px;
}
.guide-press__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: center;
	justify-items: center;
}
.guide-press__logo {
	height: 28px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.25s ease, opacity 0.25s ease;
}
.guide-press__logo:hover {
	filter: grayscale(0%);
	opacity: 1;
}
.guide-press__logo--wide {
	height: 24px;
	grid-column: span 2;
}

/* ─── Sidebar block — Trust pictos ──────────────────────── */
.guide-trust {
	background: #fff;
	border: 1px solid var(--c-sand);
	border-radius: 12px;
	padding: 1.25rem;
}
.guide-trust__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	align-items: start;
}
.guide-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}
.guide-trust__picto {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.guide-trust__picto svg {
	width: 100%;
	height: 100%;
}
.guide-trust__label {
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-dark);
	line-height: 1.25;
}

/* ─── Sidebar block — Related guides ────────────────────── */
.guide-related {
	border: 1px solid var(--c-sand);
	border-radius: 12px;
	padding: 1.25rem;
}
/* Same specificity dance as .guide-toc__title — the .guide-main h1..h6
   { margin: 0 } reset above wins over a bare .guide-related__title rule
   (0,2,0 vs 0,1,0). Prefix with .guide-main so the margin-bottom holds. */
.guide-main .guide-related__title {
	font-size: 16px;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.guide-related__title svg {
	width: 16px;
	height: 16px;
	color: var(--c-brown);
}
.guide-related__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.guide-related__item {
	display: block;
	text-decoration: none;
}
.guide-related__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--c-body);
	line-height: 1.35;
	margin: 0;
	transition: color 0.2s ease;
}
.guide-related__item:hover .guide-related__name {
	color: var(--c-brown);
}
.guide-related__time {
	font-size: 12px;
	color: rgba(113, 121, 125, 0.5);
	margin: 0.125rem 0 0;
}
.guide-related__sep {
	border-top: 1px solid var(--c-sand);
}

/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.animate-in           { animation: fadeInUp 0.4s ease-out both; }
.animate-in--delay-1  { animation-delay: 0.1s; }
.animate-in--delay-2  { animation-delay: 0.2s; }
.animate-in--delay-3  { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
	.animate-in {
		animation: none;
		opacity: 1;
	}
}