/* ComptesPro — article and page layout (design-reference/article-guide-*.html).
   Most articles are classic HTML: the rules target direct children of .body so that plugin output
   (tabelle, Kadence, GenerateBlocks) keeps its own styles. */

.article-head { padding: 36px 0 28px; border-bottom: 1px solid var(--cp-border); }
.article-head .wrap { display: flex; flex-direction: column; gap: 18px; }
.article-head-main { max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.article-head h1 { font-size: 44px; }
.article-lead { font-size: 20px; line-height: 1.55; color: var(--cp-muted); }
.article-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 820px; }
.article-layout { padding-top: 40px; padding-bottom: 32px; }
.article-foot { padding-bottom: 64px; display: flex; flex-direction: column; gap: 20px; }
.article-foot > * { max-width: var(--cp-article-col); }
.landing-hero { padding: 40px 0 32px; background: var(--cp-bg-alt); border-bottom: 1px solid var(--cp-border); }
.landing-hero .wrap { display: flex; flex-direction: column; gap: 16px; }
.landing-hero h1 { font-size: 44px; max-width: 22ch; }

.body { max-width: var(--cp-article-col); font-size: var(--cp-article); line-height: 1.7; color: var(--cp-ink); min-width: 0; }
.body > p { margin: 0 0 22px; }
.body > h2, .body > .wp-block-heading:is(h2) { font-size: 28px; font-weight: 800; margin: 44px 0 16px; scroll-margin-top: 24px; }
.body > h3, .body > .wp-block-heading:is(h3) { font-size: 21px; font-weight: 700; margin: 30px 0 12px; color: var(--cp-ink); }
.body > h4 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; color: var(--cp-ink); }
.body > ul { margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.body > ul > li { position: relative; padding-left: 22px; }
.body > ul > li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-pink); }
.body > ol { list-style: decimal; padding-left: 24px; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.body > blockquote, .body > .wp-block-quote {
	margin: 0 0 26px; padding: 18px 22px; background: var(--cp-bg-alt); border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg); font-size: 17px;
}
.body > blockquote p:last-child { margin-bottom: 0; }
/* Low specificity on purpose: component links inside .body (toc, verdict…) set their own decoration. */
.body :where(a:not(.btn):not([class*="kb-"]):not(.chip)) { text-decoration: underline; text-underline-offset: 2px; }
.body .toc-links a, .body .verdict-method { text-decoration: none; }
.body img { border-radius: var(--cp-radius-md); }
.body > figure, .body > .wp-block-image { margin: 0 0 26px; }
.body figcaption { font-size: 13px; color: var(--cp-muted); margin-top: 8px; }
.body hr, .body > .wp-block-separator { border: 0; border-top: 1px solid var(--cp-border); margin: 36px 0; }

/* Tables: header row in spaced capitals on grey, first column bold, no zebra; horizontal scroll in a rounded frame. */
.tbl-wrap { border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); overflow-x: auto; margin: 0 0 26px; -webkit-overflow-scrolling: touch; }
.tbl-hint { display: none; font-size: 12px; color: var(--cp-muted); margin: -18px 0 22px; }
.tbl-wrap.is-scrollable + .tbl-hint { display: block; }
.body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; margin: 0 0 26px; }
.tbl-wrap table, .body .wp-block-table table { margin: 0; }
.body .wp-block-table { margin: 0 0 26px; overflow-x: auto; }
.body th, .body thead td {
	text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted);
	font-weight: 700; padding: 10px 14px; background: var(--cp-bg-alt); border-bottom: 1px solid var(--cp-border);
}
.body td { padding: 12px 14px; border-bottom: 1px solid var(--cp-border); vertical-align: top; }
.body tr:last-child td { border-bottom: 0; }
.body tbody td:first-child { font-weight: 600; }

/* Kadence / GenerateBlocks wrappers from legacy content: never wider than the column. */
.body .wp-block-kadence-rowlayout, .body .gb-container, .body .kb-row-layout-wrap { max-width: 100%; }
.body .alignwide, .body .alignfull { margin-left: 0; margin-right: 0; width: auto; max-width: 100%; }

@media (max-width: 640px) {
	.article-head { padding: 24px 0 20px; }
	.article-head h1, .landing-hero h1 { font-size: var(--cp-h1); }
	.article-lead { font-size: 17px; }
	.article-layout { padding-top: 28px; }
	.body > h2 { font-size: 24px; margin-top: 36px; }
}

/* Two-column layout with sticky sidebar (article boards): 740 + 300, gap 64 */
.article-layout.has-sidebar { display: grid; grid-template-columns: minmax(0, var(--cp-article-col)) var(--cp-sidebar-col); gap: var(--cp-col-gap); justify-content: space-between; }
.article-layout:not(.has-sidebar) .article-side { display: none; }
.article-main { min-width: 0; max-width: var(--cp-article-col); }
.article-side { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.article-foot { padding: 28px 0 64px; margin-top: 12px; border-top: 1px solid var(--cp-border); display: flex; flex-direction: column; gap: 28px; }
.article-foot > * { max-width: none; }
.read-progress { display: none; }

/* Table of contents (components 04) */
.toc-sidebar { padding: 20px 20px 14px; }
.toc-sidebar .eyebrow { margin-bottom: 10px; }
.toc-links a {
	display: block; padding: 7px 0 7px 14px; font-size: 14px; line-height: 1.4; color: var(--cp-muted);
	text-decoration: none; border-left: 2px solid var(--cp-border);
}
.toc-links a:hover { color: var(--cp-petrol); }
.toc-links a.on { color: var(--cp-petrol); font-weight: 600; border-left-color: var(--cp-pink); }
.toc-progress { margin-top: 12px; height: 4px; background: var(--cp-bg-alt); border-radius: 2px; overflow: hidden; }
.toc-progress span { display: block; width: 0; height: 100%; background: var(--cp-pink); }
.toc-progress-label { font-size: 11px; color: var(--cp-muted); margin-top: 6px; }
.toc-inline { display: none; padding: 14px 16px; margin: 0 0 26px; }
.toc-inline summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; min-height: var(--cp-touch); color: var(--cp-petrol); }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary svg { transform: rotate(90deg); transition: transform .15s; }
.toc-inline[open] summary svg { transform: rotate(-90deg); }
.toc-inline .toc-links { margin-top: 10px; }
.toc-inline .toc-links a { min-height: var(--cp-touch); display: flex; align-items: center; }

/* "L'essentiel à retenir" (components 06): petrol border, pink numbers, once after the intro */
.cp-essentiel { border: 1.5px solid var(--cp-petrol); border-radius: var(--cp-radius-lg); padding: 22px 24px; background: #fff; margin: 0 0 26px; }
.cp-essentiel-title { display: flex; align-items: center; gap: 10px; font-family: var(--cp-font-display); font-weight: 800; font-size: 16px; color: var(--cp-petrol); margin-bottom: 14px; }
.cp-essentiel-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-pink); }
.cp-essentiel ol { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; }
.cp-essentiel li { display: flex; gap: 12px; }
.cp-essentiel .num { font-family: var(--cp-font-display); font-weight: 800; color: var(--cp-pink); flex: none; width: 20px; }

/* Editorial boxes from the block patterns: "À retenir" (grey, repeatable), "Exemple pratique" (white), pros/cons */
.body .cp-box { border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 22px 24px; margin: 0 0 26px; background: var(--cp-bg-alt); font-size: 16px; line-height: 1.6; }
.body .cp-box-exemple { background: #fff; }
.body .cp-box > :last-child { margin-bottom: 0; }
.body .cp-box p { margin: 0 0 10px; }
.body .cp-box ul { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.body .cp-box ul > li { position: relative; padding-left: 22px; }
.body .cp-box ul > li::before, .body .cp-pros-cons ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-pink); }
.body .cp-box-title { display: flex; align-items: center; gap: 10px; font-family: var(--cp-font-display); font-weight: 800; font-size: 16px; color: var(--cp-petrol); margin: 0 0 12px; }
.body .cp-pros-cons { gap: 16px; margin: 0 0 26px; }
.body .cp-pros-cons > .wp-block-column { border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 20px 22px; font-size: 15px; }
.body .cp-pros-cons ul { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.body .cp-pros-cons ul > li { position: relative; padding-left: 22px; }
.body .cp-cons .cp-box-title { color: var(--cp-muted); }

/* Review summary (article-avis board) */
.verdict { display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; margin: 0 0 30px; font-size: 15px; line-height: 1.5; }
.verdict-no-rating { grid-template-columns: 1fr; }
.verdict-score { background: var(--cp-petrol); color: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.verdict-score .eyebrow { color: var(--cp-footer-text); }
.verdict-total { font-family: var(--cp-font-display); font-weight: 800; font-size: 56px; line-height: 1; color: #fff; }
.verdict-total span { font-size: 18px; color: var(--cp-footer-text); font-weight: 600; }
.verdict-bars { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.verdict-bar-label { display: flex; justify-content: space-between; margin-bottom: 4px; }
.bar { display: block; height: 6px; background: rgba(255, 255, 255, .2); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--cp-pink); border-radius: 3px; }
.verdict-method { font-size: 12px; color: var(--cp-footer-text); }
.verdict-method:hover { color: #fff; }
.verdict-body { padding: 26px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; align-content: start; }
.verdict-body .eyebrow { margin-bottom: 8px; }
.verdict-body .dots li { font-size: 15px; }
.verdict-actions { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--cp-border); padding-top: 18px; }
.verdict-note { font-size: 12px; color: var(--cp-muted); margin-left: auto; }
.verdict-body > .risk-inline { grid-column: 1 / -1; }

@media (max-width: 1000px) {
	.article-layout.has-sidebar { display: block; }
	.article-side { display: none; }
	.toc-inline { display: block; }
	.read-progress { display: block; position: sticky; top: 0; z-index: 15; height: 3px; background: var(--cp-bg-alt); }
	.read-progress span { display: block; width: 0; height: 100%; background: var(--cp-pink); }
	.verdict { grid-template-columns: 1fr; }
	.verdict-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 12px; }
}
@media (max-width: 640px) {
	.verdict-score { padding: 20px 18px; }
	.verdict-total { font-size: 44px; }
	.verdict-body { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
	.verdict-actions .btn { width: 100%; }
	.verdict-note { margin-left: 0; width: 100%; text-align: center; }
	.body .cp-box, .cp-essentiel { padding: 18px; }
}

/* /avis/<slug>/ — record texts */
.offer-shot { margin: 0 0 26px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); overflow: hidden; }
.offer-shot img { display: block; width: 100%; height: auto; border-radius: 0; }
.offer-shot figcaption { font-size: 13px; color: var(--cp-muted); padding: 10px 16px; border-top: 1px solid var(--cp-border); margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; margin: 0 0 10px; border-radius: var(--cp-radius-lg); overflow: hidden; background: var(--cp-bg-alt); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.faq { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; }
.faq details { border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 0 18px; background: #fff; }
.faq summary { cursor: pointer; min-height: var(--cp-touch); display: flex; align-items: center; font-weight: 600; font-size: 16px; color: var(--cp-petrol); padding: 12px 0; }
.faq-answer { font-size: 16px; padding-bottom: 14px; }
.faq-answer p { margin: 0 0 10px; }
.hub-group + .hub-group { padding-top: 0; }