/* ==========================================================================
   Le Blog Immobilier — corps d'article et blocs de rédaction (b-*).
   Chargé sur le site et dans l'éditeur (add_editor_style).
   Référence de rédaction : docs/blocs-redaction.md.

   Portée :
   - la typographie du corps vise .ib-prose (site) et .is-root-container
     (éditeur), via :where() pour rester facile à surcharger ;
   - les blocs .b-* ne dépendent d'aucun parent.
   ========================================================================== */

/* Corps d'article --------------------------------------------------------- */
:where(.ib-prose, .is-root-container) {
	font-family: var(--ib-serif);
	font-size: 18px;
	line-height: 1.65;
	color: var(--ib-body);
	overflow-wrap: break-word;
}
@media (min-width: 600px) {
	:where(.ib-prose, .is-root-container) { font-size: 19px; }
}
@media (min-width: 1100px) {
	:where(.ib-prose, .is-root-container) { font-size: 20px; }
}

/* Rythme vertical : l'équivalent des « gap » 22 à 28 px des maquettes. */
.ib-prose > * { margin-top: 0; margin-bottom: 0; }
.ib-prose > * + * { margin-top: 24px; }
.ib-prose > h2 { margin-top: 44px; }
.ib-prose > h3 { margin-top: 32px; }
.ib-prose > :is(h2, h3, h4) + * { margin-top: 14px; }
.ib-prose > :first-child { margin-top: 0; }

:where(.ib-prose, .is-root-container) h2 {
	font-family: var(--ib-serif);
	font-weight: 500;
	font-size: clamp(26px, 2.4vw + 14px, 32px);
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--ib-ink);
	scroll-margin-top: 24px;
	text-wrap: balance;
}
:where(.ib-prose, .is-root-container) h3 {
	font-family: var(--ib-sans);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.35;
	color: var(--ib-ink);
	scroll-margin-top: 24px;
}
:where(.ib-prose, .is-root-container) h4 {
	font-family: var(--ib-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ib-ink);
}
:where(.ib-prose, .is-root-container) :is(strong, b) { font-weight: 600; }
:where(.ib-prose, .is-root-container) a {
	color: var(--ib-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:where(.ib-prose, .is-root-container) a:hover { color: var(--ib-accent-dark); text-decoration-thickness: 2px; }
:where(.ib-prose, .is-root-container) :is(ul, ol) { padding-left: 24px; }
:where(.ib-prose, .is-root-container) li + li { margin-top: 6px; }
:where(.ib-prose, .is-root-container) li > :is(ul, ol) { margin-top: 6px; }
:where(.ib-prose, .is-root-container) li::marker { color: var(--ib-accent); }
:where(.ib-prose, .is-root-container) ol > li::marker { font-family: var(--ib-mono); font-size: .8em; }
:where(.ib-prose, .is-root-container) hr { border: 0; border-top: 1px solid var(--ib-rule); }
:where(.ib-prose, .is-root-container) :is(code, kbd) { font-family: var(--ib-mono); font-size: .85em; background: var(--ib-soft); padding: 1px 5px; }
:where(.ib-prose, .is-root-container) sup { font-size: .65em; line-height: 0; }
:where(.ib-prose, .is-root-container) mark { background: var(--ib-amber-tint); color: inherit; padding: 0 2px; }

/* Citation simple (sans classe) : filet vert à gauche. */
:where(.ib-prose, .is-root-container) blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 2px 0 2px 20px;
	border-left: 3px solid var(--ib-accent);
	font-style: italic;
	color: var(--ib-ink-2);
}
:where(.ib-prose, .is-root-container) blockquote > * { margin: 0; }
:where(.ib-prose, .is-root-container) blockquote > * + * { margin-top: 10px; }
:where(.ib-prose, .is-root-container) blockquote :is(cite, footer) { display: block; font: normal 13px/1.5 var(--ib-sans); color: var(--ib-muted); }

/* Images et médias. */
:where(.ib-prose, .is-root-container) figure { margin-left: 0; margin-right: 0; }
:where(.ib-prose, .is-root-container) :is(img, video) { max-width: 100%; height: auto; }
:where(.ib-prose, .is-root-container) iframe { max-width: 100%; }
:where(.ib-prose, .is-root-container) .wp-block-image img { width: 100%; }
:where(.ib-prose, .is-root-container) :is(figcaption, .wp-caption-text, .wp-element-caption) {
	margin-top: 8px;
	font: 13px/1.5 var(--ib-sans);
	color: var(--ib-muted);
}
:where(.ib-prose, .is-root-container) .wp-caption { max-width: 100%; }
:where(.ib-prose, .is-root-container) :is(.aligncenter, .wp-block-image.aligncenter) { margin-left: auto; margin-right: auto; }
@media (min-width: 600px) {
	:where(.ib-prose, .is-root-container) .alignleft { float: left; max-width: 45%; margin: 6px 24px 12px 0; }
	:where(.ib-prose, .is-root-container) .alignright { float: right; max-width: 45%; margin: 6px 0 12px 24px; }
}
.ib-prose::after { content: ""; display: table; clear: both; }

/* Tableaux : tout tableau du corps (bloc Tableau, HTML importé) prend le style
   de la maquette (en-tête sombre, filets, chiffres alignés). Le défilement
   horizontal se fait dans le conteneur, jamais sur la page. */
/* Défilement dans le conteneur partout, même hors .ib-prose. */
:where(.wp-block-table, .b-tableau, .ib-table) { overflow-x: auto; max-width: 100%; }
:where(.ib-prose, .is-root-container) :is(.wp-block-table, .b-tableau, .ib-table) {
	overflow-x: auto;
	border: 1px solid var(--ib-rule);
	background: var(--ib-white);
	-webkit-overflow-scrolling: touch;
}
:where(.ib-prose, .is-root-container) table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font: 14px/1.45 var(--ib-sans);
	font-variant-numeric: tabular-nums;
	color: var(--ib-ink);
	background: var(--ib-white);
}
/* Tableau nu (HTML importé sans conteneur) : bordure propre, défilement sur mobile. */
.ib-prose > table { border: 1px solid var(--ib-rule); }
@media (max-width: 600px) {
	.ib-prose > table { display: block; overflow-x: auto; }
}
/* .wp-block-table : même poids que la feuille du bloc Tableau de WordPress, chargée avant. */
:where(.ib-prose, .is-root-container) :is(th, td),
.wp-block-table :is(th, td) {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-top: 1px solid var(--ib-rule);
}
:where(.ib-prose, .is-root-container) tbody th,
:where(.ib-prose, .is-root-container) tbody td:first-child { font-weight: 500; }
/* En-tête : thead, ou première ligne faite uniquement de th (HTML ancien). */
:where(.ib-prose, .is-root-container) thead :is(th, td),
.wp-block-table thead :is(th, td),
:where(.ib-prose, .is-root-container) table > tbody:first-child > tr:first-child:not(:has(> td)) > th,
:where(.ib-prose, .is-root-container) table > tr:first-child:not(:has(> td)) > th {
	background: var(--ib-ink);
	color: var(--ib-on-dark);
	font-weight: 500;
	font-size: 13px;
	border-top: 0;
	vertical-align: bottom;
}
:where(.ib-prose, .is-root-container) tfoot td,
.wp-block-table tfoot td { font-weight: 600; background: var(--ib-panel); }
.wp-block-table :is(thead, tfoot) { border: 0; }
.wp-block-table :where(figcaption) { text-align: left; color: var(--ib-muted); }
:where(.ib-prose, .is-root-container) :is(.wp-block-table, .b-tableau) :is(figcaption, .wp-element-caption) {
	margin: 0;
	padding: 10px 14px;
	border-top: 1px solid var(--ib-rule);
	background: var(--ib-white);
}
:where(.ib-prose, .is-root-container) table caption {
	caption-side: bottom;
	text-align: left;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--ib-muted);
}
/* Le bloc Tableau de WordPress force des colonnes égales : on laisse le contenu décider. */
:where(.ib-prose, .is-root-container) .wp-block-table table.has-fixed-layout { table-layout: auto; }

/* Accordéon par défaut (details), repris par la FAQ. */
:where(.ib-prose, .is-root-container) details,
.b-faq details {
	border-top: 1px solid var(--ib-rule);
	font-family: var(--ib-sans);
}
:where(.ib-prose, .is-root-container) details > summary,
.b-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	list-style: none;
	cursor: pointer;
	font: 500 17px/1.4 var(--ib-sans);
	color: var(--ib-ink);
}
:where(.ib-prose, .is-root-container) details > summary::-webkit-details-marker,
.b-faq summary::-webkit-details-marker { display: none; }
:where(.ib-prose, .is-root-container) details > summary::after,
.b-faq summary::after {
	content: "+";
	flex: none;
	font: 400 20px/1 var(--ib-mono);
	color: var(--ib-accent);
}
:where(.ib-prose, .is-root-container) details[open] > summary::after,
.b-faq details[open] > summary::after { content: "−"; }
:where(.ib-prose, .is-root-container) details > summary:hover,
.b-faq summary:hover { color: var(--ib-accent); }
:where(.ib-prose, .is-root-container) details > :not(summary),
.b-faq details > :not(summary) {
	margin: 0 0 16px;
	font: 15px/1.65 var(--ib-sans);
	color: var(--ib-ink-2);
	max-width: 72ch;
}
.ib-prose > details + details { margin-top: 0; }
.ib-prose > details:not(:has(+ details)) { border-bottom: 1px solid var(--ib-rule); }

/* Valeurs bonnes ou mauvaises (tableaux, exemples, budget, versus). */
.is-pos { color: var(--ib-up); }
.is-neg { color: var(--ib-red); }
.is-mieux { color: var(--ib-up); font-weight: 600; }

/* ==========================================================================
   Socle commun des blocs
   ========================================================================== */
:is(.b-resume, .b-chiffre, .b-focus, .b-info, .b-definition, .b-exemple, .b-astuce, .b-cta,
	.b-proscons, .b-tableau, .b-attention, .b-danger, .b-etapes, .b-checklist, .b-versus,
	.b-budget, .b-cartes, .b-criteres, .b-conseils, .b-expert, .b-faq, .b-retenir, .b-sources,
	.b-note, .b-suivant, .b-formule, .b-leviers) {
	font-family: var(--ib-sans);
	font-style: normal;
	box-sizing: border-box;
}
:is(.b-resume, .b-chiffre, .b-focus, .b-info, .b-definition, .b-exemple, .b-astuce, .b-cta,
	.b-proscons, .b-attention, .b-danger, .b-etapes, .b-checklist, .b-budget, .b-cartes,
	.b-criteres, .b-conseils, .b-expert, .b-faq, .b-retenir, .b-sources, .b-note, .b-suivant,
	.b-citation) :is(p, ul, ol, li, h3, h4, figure, blockquote, table, details) {
	margin: 0;
}
:is(.b-resume, .b-focus, .b-info, .b-definition, .b-exemple, .b-astuce, .b-proscons,
	.b-attention, .b-danger, .b-etapes, .b-checklist, .b-budget, .b-cartes, .b-criteres,
	.b-retenir, .b-leviers) :is(ul, ol) {
	list-style: none;
	padding: 0;
}

/* Étiquette en capitales (mono) : première ligne de la plupart des blocs. */
.b-label {
	font-family: var(--ib-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-style: normal;
}
/* Mention secondaire à droite de l'étiquette : <em> ou .b-checklist__count. */
.b-label > em {
	margin-left: auto;
	font: normal 13px/1.4 var(--ib-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ib-muted);
}

/* Listes à puces autorisées dans les encadrés de texte. */
:is(.b-info, .b-astuce, .b-attention, .b-danger, .b-focus, .b-definition, .b-sources) ul {
	list-style: disc;
	padding-left: 20px;
}
:is(.b-info, .b-astuce, .b-attention, .b-danger, .b-focus, .b-definition) li + li { margin-top: 4px; }

/* ==========================================================================
   Blocs
   ========================================================================== */

/* Résumé / L'essentiel ---------------------------------------------------- */
.b-resume { border: 1px solid var(--ib-ink); background: var(--ib-white); }
.b-resume > .b-label { background: var(--ib-ink); color: var(--ib-on-dark); padding: 10px 18px; }
.b-resume > :is(ol, ul) { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; counter-reset: b-resume; }
.b-resume > :not(.b-label, ol, ul) { padding: 16px 18px 0; font-size: 15px; line-height: 1.55; }
.b-resume li { position: relative; padding-left: 32px; counter-increment: b-resume; }
.b-resume li::before { position: absolute; left: 0; top: 0; font-family: var(--ib-mono); color: var(--ib-accent); }
.b-resume ol > li::before { content: counter(b-resume, decimal-leading-zero); }
.b-resume ul > li { padding-left: 20px; }
.b-resume ul > li::before { content: "•"; font-family: var(--ib-sans); }

/* Chiffre clé ------------------------------------------------------------- */
.b-chiffre {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(14px, 3vw, 24px);
	align-items: center;
	padding: 24px 0;
	border-top: 3px solid var(--ib-accent);
	border-bottom: 1px solid var(--ib-rule);
}
.b-chiffre > * { grid-column: 2; }
.b-chiffre > * + * { margin-top: 4px; }
.b-chiffre > .b-chiffre__valeur {
	grid-column: 1;
	grid-row: 1 / span 12;
	align-self: center;
	margin: 0;
	font-family: var(--ib-serif);
	font-weight: 400;
	font-size: clamp(48px, 13vw, 84px);
	line-height: .9;
	letter-spacing: -.03em;
	color: var(--ib-accent);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.b-chiffre > .b-titre { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ib-ink); }
.b-chiffre > :not(.b-chiffre__valeur, .b-titre) { font-size: 14px; line-height: 1.5; color: var(--ib-muted); }
/* Variante actualité (maquette Article) : chiffre en Plex Sans gras. */
.b-chiffre--sans { padding: 20px 0; }
.b-chiffre--sans > .b-chiffre__valeur { font-family: var(--ib-sans); font-weight: 600; font-size: clamp(44px, 11vw, 64px); letter-spacing: -.04em; }

/* Focus (encadré sombre) -------------------------------------------------- */
.b-focus { background: var(--ib-ink); color: var(--ib-on-dark); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.b-focus > .b-label { color: var(--ib-accent-on-dark); }
.b-focus > .b-titre { font-family: var(--ib-serif); font-size: 26px; line-height: 1.2; font-weight: 400; color: var(--ib-on-dark); }
.b-focus > :not(.b-label, .b-titre) { font-size: 15px; line-height: 1.65; color: #D5D3CD; }
.b-focus strong { color: var(--ib-on-dark); }
.b-focus a { color: var(--ib-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.b-focus a:hover { color: var(--ib-accent-on-dark); }
.b-focus > .b-lien { font-size: 13px; font-weight: 600; }
@media (max-width: 480px) { .b-focus { padding: 22px 20px; } }

/* Encadrés « Bon à savoir », « Conseil », « Attention » ------------------- */
:is(.b-info, .b-astuce, .b-attention) { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
:is(.b-info, .b-astuce, .b-attention) > .b-label { display: flex; align-items: center; gap: 10px; }
:is(.b-info, .b-astuce, .b-attention) > .b-label::before {
	content: "";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--ib-white);
	letter-spacing: 0;
	font-weight: 700;
}
:is(.b-info, .b-astuce, .b-attention) > :not(.b-label) { font-size: 15px; line-height: 1.6; }

.b-info { background: var(--ib-blue-tint); }
.b-info > .b-label { color: var(--ib-blue); }
.b-info > .b-label::before { content: "i"; border-radius: 50%; background: var(--ib-blue); font: 700 12px/1 var(--ib-serif); }
.b-info > :not(.b-label) { color: var(--ib-blue-ink); }
.b-info a { color: var(--ib-blue); }

.b-astuce { background: var(--ib-accent-tint); }
.b-astuce > .b-label { color: var(--ib-accent); }
.b-astuce > .b-label::before { content: "✓"; background: var(--ib-accent); font: 700 13px/1 var(--ib-sans); }
.b-astuce > :not(.b-label) { color: #173F35; }

.b-attention { background: var(--ib-amber-tint); }
.b-attention > .b-label { color: var(--ib-amber); }
.b-attention > .b-label::before {
	width: 0;
	height: 0;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 19px solid var(--ib-amber);
}
.b-attention > :not(.b-label) { color: var(--ib-amber-ink); }
.b-attention a { color: var(--ib-amber-ink); }

/* Danger ------------------------------------------------------------------ */
.b-danger { border: 2px solid var(--ib-red); background: var(--ib-red-tint); }
.b-danger > .b-label { background: var(--ib-red); color: var(--ib-white); padding: 10px 18px; display: flex; gap: 10px; align-items: center; }
.b-danger > .b-label::before {
	content: "!";
	flex: none;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid var(--ib-white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 12px/1 var(--ib-sans);
	letter-spacing: 0;
}
.b-danger > :not(.b-label) { padding: 0 18px; font-size: 15px; line-height: 1.6; color: var(--ib-red-ink); }
.b-danger > .b-label + * { padding-top: 16px; }
.b-danger > :not(.b-label) + :not(.b-label) { padding-top: 10px; }
.b-danger > :last-child:not(.b-label) { padding-bottom: 16px; }
.b-danger a { color: var(--ib-red-ink); }

/* Définition -------------------------------------------------------------- */
.b-definition { border: 1px dashed var(--ib-ink); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.b-definition > .b-label { color: var(--ib-muted); }
.b-definition > .b-titre { font-family: var(--ib-serif); font-size: 22px; line-height: 1.3; font-style: italic; color: var(--ib-ink); }
.b-definition > :not(.b-label, .b-titre) { font-size: 15px; line-height: 1.6; color: var(--ib-ink-2); }

/* Exemple chiffré --------------------------------------------------------- */
.b-exemple { border: 1px solid var(--ib-rule); background: var(--ib-white); }
.b-exemple > .b-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 12px 18px; border-bottom: 1px solid var(--ib-rule); color: var(--ib-ink); }
.b-exemple > :not(.b-label) { padding: 8px 18px 16px; }
.b-exemple > :not(.b-label) + :not(.b-label) { padding-top: 0; }
.b-exemple :is(.wp-block-table, figure) { border: 0; background: none; overflow: visible; }
/* Tableau direct sans figure : la marge remplace le padding (ignoré en border-collapse). */
.b-exemple > table { margin: 8px 18px 16px; width: calc(100% - 36px); padding: 0; }
.b-exemple table { width: 100%; border-collapse: collapse; font: 15px/1.45 var(--ib-sans); background: none; }
.b-exemple :is(th, td) { padding: 8px 0; border: 0; border-bottom: 1px dashed var(--ib-rule); background: none; color: var(--ib-ink); font-weight: 400; font-size: 15px; vertical-align: baseline; }
.b-exemple :is(th, td):last-child { text-align: right; font-family: var(--ib-mono); white-space: nowrap; padding-left: 16px; }
.b-exemple :is(th, td):first-child { text-align: left; font-weight: 400; }
.b-exemple tfoot :is(th, td), .b-exemple tr.b-total > * { padding: 12px 0 0; border-bottom: 0; font-weight: 600; font-size: 16px; background: none; }
.b-exemple tfoot :is(th, td):last-child, .b-exemple tr.b-total > :last-child { color: var(--ib-accent); }
.b-exemple tbody tr:last-child > * { border-bottom-style: dashed; }
.b-exemple .is-neg { color: var(--ib-red); }
.b-exemple :is(figcaption, .wp-element-caption) { padding: 10px 0 0; border: 0; font-size: 13px; }

/* Appel vers un simulateur ------------------------------------------------- */
.b-cta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: center;
	border: 2px solid var(--ib-accent);
	padding: 18px 20px;
	color: var(--ib-ink);
}
.b-cta > * { grid-column: 1; }
.b-cta > * + * { margin-top: 4px; }
.b-cta > .b-label { color: var(--ib-accent); }
.b-cta > .b-titre { font-size: 17px; font-weight: 600; line-height: 1.35; }
.b-cta > :not(.b-label, .b-titre, .b-cta__bouton) { font-size: 14px; line-height: 1.5; color: var(--ib-muted); }
.b-cta > .b-cta__bouton { grid-column: 2; grid-row: 1 / span 12; align-self: center; margin: 0; }
.b-cta__bouton a,
a.b-cta__bouton {
	display: inline-block;
	background: var(--ib-accent);
	color: var(--ib-paper);
	padding: 11px 16px;
	font: 600 14px/1.2 var(--ib-sans);
	text-decoration: none;
	white-space: nowrap;
}
/* Tout l'encadré est cliquable. */
.b-cta__bouton a::after { content: ""; position: absolute; inset: 0; }
.b-cta:hover .b-cta__bouton a { background: var(--ib-accent-dark); color: var(--ib-paper); }
.b-cta:hover > .b-titre { color: var(--ib-accent); }
.b-cta a:not(.b-cta__bouton a) { position: relative; z-index: 1; }

/* Bandeau vert plein (maquettes Article et Simulateur). */
.b-cta--plein { background: var(--ib-accent); border: 0; color: var(--ib-panel); padding: 22px 24px; column-gap: 18px; }
.b-cta--plein > .b-label { color: var(--ib-accent-light); }
.b-cta--plein > .b-titre { font: 400 23px/1.2 var(--ib-serif); }
.b-cta--plein > :not(.b-label, .b-titre, .b-cta__bouton) { color: var(--ib-accent-light); }
.b-cta--plein .b-cta__bouton a { background: var(--ib-panel); color: var(--ib-ink); }
.b-cta--plein:hover .b-cta__bouton a { background: var(--ib-white); color: var(--ib-ink); }
.b-cta--plein:hover > .b-titre { color: var(--ib-white); }
@media (max-width: 520px) {
	.b-cta { grid-template-columns: minmax(0, 1fr); }
	.b-cta > .b-cta__bouton { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
}

/* Pour / Contre ----------------------------------------------------------- */
.b-proscons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	border: 1px solid var(--ib-ink);
	background: var(--ib-white);
	overflow: hidden;
}
/* Filet entre les colonnes, vertical ou horizontal selon la place. */
.b-proscons > * { padding: 20px; box-shadow: -1px -1px 0 var(--ib-rule); }
.b-proscons .b-titre { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ib-ink); }
.b-proscons .b-titre::before {
	content: "+";
	flex: none;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ib-up);
	color: var(--ib-white);
	font-weight: 700;
}
.b-proscons > .b-contre .b-titre::before { content: "−"; background: var(--ib-red); }
.b-proscons ul { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }
.b-proscons > :not(.b-titre) > :not(.b-titre, ul) { font-size: 15px; line-height: 1.5; }

/* Tableau (classe facultative : tout tableau du corps a déjà ce style) ------ */
.b-tableau--chiffres td:not(:first-child) { font-family: var(--ib-mono); }

/* Étapes ------------------------------------------------------------------ */
.b-etapes > .b-label { padding-bottom: 10px; border-bottom: 2px solid var(--ib-ink); color: var(--ib-ink); }
.b-etapes ol { counter-reset: b-etape; }
.b-etapes li {
	position: relative;
	counter-increment: b-etape;
	padding: 16px 0 16px 72px;
	min-height: 68px;
	border-bottom: 1px solid var(--ib-rule);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ib-ink-3);
}
.b-etapes li::before {
	content: counter(b-etape, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 16px;
	font: 400 36px/1 var(--ib-serif);
	color: var(--ib-accent);
}
.b-etapes li > strong:first-of-type { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: var(--ib-ink); }
.b-etapes .b-duree { font-family: var(--ib-mono); font-size: 12px; color: var(--ib-muted); white-space: nowrap; font-style: normal; }
@media (min-width: 560px) {
	.b-etapes li:has(.b-duree) { padding-right: 110px; }
	.b-etapes .b-duree { position: absolute; right: 0; top: 19px; }
}
@media (max-width: 559px) {
	.b-etapes li { padding-left: 56px; }
	.b-etapes li::before { font-size: 30px; }
	.b-etapes .b-duree { display: block; margin-top: 6px; }
}

/* Leviers (liste numérotée 01 à 04, maquette Simulateur) -------------------- */
.b-leviers { list-style: none; padding: 0; margin-left: 0; counter-reset: b-levier; }
.b-leviers > li {
	position: relative;
	counter-increment: b-levier;
	padding: 14px 0 14px 62px;
	border-top: 1px solid var(--ib-rule);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ib-ink-3);
}
.ib-prose .b-leviers > li + li, .b-leviers > li + li { margin-top: 0; }
.b-leviers > li::before {
	content: counter(b-levier, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 14px;
	font: 400 30px/1 var(--ib-serif);
	color: var(--ib-accent);
}
.b-leviers > li > strong:first-of-type { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: var(--ib-ink); }

/* Citation ---------------------------------------------------------------- */
.b-citation {
	margin-left: 0;
	margin-right: 0;
	padding: 24px 0;
	border: 0;
	border-top: 1px solid var(--ib-ink);
	border-bottom: 1px solid var(--ib-ink);
	font-family: var(--ib-serif);
	font-style: normal;
	color: var(--ib-ink);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.b-citation blockquote { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; font-style: normal; color: var(--ib-ink); }
.b-citation blockquote p, .b-citation > p { font-size: clamp(21px, 1.4vw + 15px, 25px); line-height: 1.35; font-style: italic; color: var(--ib-ink); }
.b-citation :is(cite, figcaption) { display: block; margin: 0; font: normal 13px/1.5 var(--ib-sans); color: var(--ib-muted); }
.b-citation :is(cite, figcaption) strong { color: var(--ib-ink); font-weight: 600; }
/* Avec photo : portrait rond à gauche. */
.b-citation:has(> figure img[src]) { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; row-gap: 0; align-items: start; }
.b-citation:has(> figure img[src]) > :not(figure) { grid-column: 2; }
.b-citation > figure { grid-column: 1; grid-row: 1 / span 6; width: 72px; height: 72px; margin: 0; border-radius: 50%; overflow: hidden; background: var(--ib-rule); border: 0; }
.b-citation > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-citation > figure:not(:has(img[src])) { display: none; }
@media (max-width: 420px) {
	.b-citation:has(> figure img[src]) { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
	.b-citation > figure { width: 52px; height: 52px; }
}
/* Citation mise en avant du cœur WordPress : même rendu. */
:where(.ib-prose, .is-root-container) .wp-block-pullquote { margin: 0; padding: 24px 0; border-top: 1px solid var(--ib-ink); border-bottom: 1px solid var(--ib-ink); text-align: left; }
:where(.ib-prose, .is-root-container) .wp-block-pullquote blockquote { border: 0; padding: 0; color: var(--ib-ink); font-size: clamp(21px, 1.4vw + 15px, 25px); line-height: 1.35; }

/* Checklist --------------------------------------------------------------- */
.b-checklist { border: 1px solid var(--ib-rule); background: var(--ib-white); }
.b-checklist > .b-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ib-rule); color: var(--ib-ink); }
.b-checklist__count { margin-left: auto; font-size: 12px; letter-spacing: 0; color: var(--ib-accent); white-space: nowrap; }
.b-checklist li {
	position: relative;
	padding: 12px 18px 12px 50px;
	border-bottom: 1px solid var(--ib-rule-3);
	font-size: 15px;
	line-height: 1.45;
	color: var(--ib-ink);
	cursor: pointer;
	user-select: none;
}
.b-checklist li:last-child { border-bottom: 0; }
.b-checklist li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 12px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid #C9C4B8;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ib-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.b-checklist li:hover::before { border-color: var(--ib-accent); }
.b-checklist li.is-done { color: var(--ib-muted); text-decoration: line-through; }
.b-checklist li.is-done::before { content: "✓"; background: var(--ib-accent); border-color: var(--ib-accent); }
.b-checklist li:focus-visible { outline-offset: -2px; }

/* Versus (deux options face à face) --------------------------------------- */
.b-versus { border: 1px solid var(--ib-ink); background: var(--ib-white); overflow: hidden; }
:where(.ib-prose, .is-root-container) .b-versus { overflow: hidden; border-color: var(--ib-ink); }
.b-versus table { display: block; width: 100%; border: 0; background: none; font: 14px/1.45 var(--ib-sans); }
.b-versus :is(thead, tbody, tfoot) { display: block; }
.b-versus tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.b-versus :is(th, td) { padding: 6px 18px 12px; border: 0; background: none; color: var(--ib-ink); font-weight: 400; font-size: 14px; }
.b-versus :is(th, td):nth-child(3) { text-align: right; }
.b-versus tbody tr { border-top: 1px solid var(--ib-rule); }
/* Ligne : critère centré au-dessus des deux valeurs. */
.b-versus tbody :is(th, td):first-child {
	grid-column: 1 / -1;
	padding: 8px 18px 0;
	text-align: center;
	font: 400 10px/1.4 var(--ib-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ib-muted);
}
/* En-tête : option A sur fond noir, option B sur fond vert. */
.b-versus thead :is(th, td) { padding: 14px 18px; font-size: 16px; font-weight: 600; line-height: 1.3; vertical-align: top; }
.b-versus thead :is(th, td):first-child { display: none; }
.b-versus thead :is(th, td):nth-child(2) { background: var(--ib-ink); color: var(--ib-on-dark); }
.b-versus thead :is(th, td):nth-child(3) { background: var(--ib-accent); color: var(--ib-panel); }
.b-versus thead em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 400; color: var(--ib-on-dark-muted); }
.b-versus thead :nth-child(3) em { color: var(--ib-accent-light); }
.b-versus tbody :is(strong, .is-mieux) { color: var(--ib-up); font-weight: 600; }
.b-versus :is(figcaption, .wp-element-caption, caption) {
	display: block;
	margin: 0;
	padding: 12px 18px;
	background: var(--ib-panel);
	border-top: 1px solid var(--ib-rule);
	font: 13px/1.5 var(--ib-sans);
	color: var(--ib-ink-2);
	text-align: left;
}
.b-versus :is(figcaption, .wp-element-caption) strong { color: var(--ib-ink); font-weight: 600; }
@media (max-width: 400px) {
	.b-versus :is(th, td) { padding-left: 12px; padding-right: 12px; }
	.b-versus thead :is(th, td) { font-size: 14px; }
}

/* Budget (compte d'exploitation avec barres) ------------------------------ */
.b-budget { border: 1px solid var(--ib-rule); background: var(--ib-white); }
.b-budget > .b-label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 18px;
	background: var(--ib-ink);
	color: var(--ib-on-dark);
	font: 500 13px/1.4 var(--ib-sans);
	letter-spacing: 0;
	text-transform: none;
}
.b-budget > .b-label > em { color: var(--ib-on-dark); font-weight: 500; }
.b-budget li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 12px;
	row-gap: 1px;
	padding: 12px 18px;
	border-top: 1px solid var(--ib-rule-3);
	font-size: 14px;
	line-height: 1.4;
}
.b-budget > ul > li:first-child { border-top: 0; }
.b-budget li > strong { grid-column: 1; grid-row: 1; font-weight: 500; color: var(--ib-ink); }
.b-budget li > em { grid-column: 1; grid-row: 2; font-style: normal; font-size: 12px; color: var(--ib-muted); }
.b-budget li > span { grid-column: 2; grid-row: 1; font-family: var(--ib-mono); white-space: nowrap; color: var(--ib-accent); }
.b-budget li > span.is-neg { color: var(--ib-red); }
/* Barre proportionnelle : largeur donnée par style="--part:56%". */
.b-budget li::after {
	content: "";
	grid-column: 1 / -1;
	grid-row: 3;
	height: 4px;
	margin-top: 5px;
	background: linear-gradient(var(--ib-accent), var(--ib-accent)) left / var(--part, 0%) 100% no-repeat, var(--ib-rule-3);
}
.b-budget li:has(> .is-neg)::after { background: linear-gradient(var(--ib-red), var(--ib-red)) left / var(--part, 0%) 100% no-repeat, var(--ib-rule-3); }
.b-budget > .b-budget__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: var(--ib-accent-tint);
	border-top: 1px solid var(--ib-rule);
	font-size: 17px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ib-accent);
}
.b-budget > .b-budget__total > :last-child { font-family: var(--ib-mono); white-space: nowrap; }
.b-budget > .b-budget__total.is-neg { color: var(--ib-red); background: var(--ib-red-tint); }

/* Cartes (profils, options) ----------------------------------------------- */
.b-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.b-cartes > * {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--ib-rule);
	border-top: 3px solid var(--ib-blue);
	background: var(--ib-white);
	margin: 0;
}
.b-cartes > :nth-child(4n+2) { border-top-color: var(--ib-accent); }
.b-cartes > :nth-child(4n+3) { border-top-color: var(--ib-amber); }
.b-cartes > :nth-child(4n+4) { border-top-color: var(--ib-plum); }
.b-cartes > .b-carte--bleu { border-top-color: var(--ib-blue); }
.b-cartes > .b-carte--vert { border-top-color: var(--ib-accent); }
.b-cartes > .b-carte--ambre { border-top-color: var(--ib-amber); }
.b-cartes > .b-carte--rouge { border-top-color: var(--ib-red); }
.b-cartes .b-titre { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ib-ink); }
.b-cartes > * > :not(.b-titre, ul) { font-size: 13px; line-height: 1.55; color: var(--ib-ink-3); }
.b-cartes ul { display: flex; flex-wrap: wrap; gap: 5px; }
.b-cartes ul > li { padding: 3px 7px; background: var(--ib-panel); color: var(--ib-ink-2); font-size: 11px; line-height: 1.4; }

/* Critères (liste numérotée avec étiquettes) ------------------------------ */
.b-criteres { display: flex; flex-direction: column; gap: 8px; }
.b-criteres > .b-label { padding-bottom: 10px; border-bottom: 2px solid var(--ib-ink); margin-bottom: 4px; color: var(--ib-ink); }
.b-criteres > ol { display: flex; flex-direction: column; gap: 8px; counter-reset: b-critere; }
.b-criteres > ol > li {
	counter-increment: b-critere;
	display: grid;
	border: 1px solid var(--ib-rule);
	background: var(--ib-white);
	padding: 12px 16px 12px 68px;
	position: relative;
	min-height: 52px;
	font-size: 15px;
	line-height: 1.4;
}
.b-criteres > ol > li::before {
	content: counter(b-critere);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ib-accent);
	color: var(--ib-panel);
	font: 400 24px/1 var(--ib-serif);
}
.b-criteres > ol > li > strong { font-weight: 600; color: var(--ib-ink); }
.b-criteres li ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.b-criteres li li { padding: 3px 8px; border: 1px solid var(--ib-accent-light); background: #F4F8F6; color: var(--ib-accent); font-size: 12px; line-height: 1.4; }

/* Conseils (grille de puces ✓ et !) --------------------------------------- */
.b-conseils { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.b-conseils > :not(.b-label) {
	position: relative;
	margin: 0;
	padding: 14px 16px 14px 52px;
	border: 1px solid var(--ib-rule);
	background: var(--ib-white);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ib-ink);
}
.b-conseils > :not(.b-label)::before {
	content: "✓";
	position: absolute;
	left: 16px;
	top: 14px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ib-accent);
	color: var(--ib-white);
	font-size: 12px;
	font-weight: 700;
}
.b-conseils > :is(.is-alerte, .is-neg) { background: var(--ib-amber-tint); border-color: var(--ib-amber-rule); }
.b-conseils > :is(.is-alerte, .is-neg)::before { content: "!"; background: var(--ib-amber); }
.b-conseils > .b-label { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 2px solid var(--ib-ink); }
.b-conseils > ul { display: contents; }

/* Avis d'expert ----------------------------------------------------------- */
.b-expert { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--ib-blue-tint); }
.b-expert:has(> figure img[src]) { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 0; }
.b-expert:has(> figure img[src]) > :not(figure) { grid-column: 2; }
.b-expert:has(> figure img[src]) > :not(figure) + * { margin-top: 6px; }
.b-expert > figure { grid-column: 1; grid-row: 1 / span 8; width: 64px; height: 64px; margin: 0; border-radius: 50%; overflow: hidden; background: var(--ib-rule); border: 0; }
.b-expert > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-expert > figure:not(:has(img[src])) { display: none; }
.b-expert > .b-label { color: var(--ib-blue); }
.b-expert > :not(.b-label, figure, .b-signature) { font-size: 15px; line-height: 1.6; color: var(--ib-blue-ink); }
.b-expert > .b-signature { font-size: 13px; line-height: 1.5; color: var(--ib-blue); }
.b-expert > .b-signature strong { font-weight: 600; }
@media (max-width: 420px) {
	.b-expert:has(> figure img[src]) { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; }
	.b-expert > figure { width: 48px; height: 48px; }
}

/* FAQ --------------------------------------------------------------------- */
.b-faq { border-bottom: 1px solid var(--ib-rule); }
.b-faq > .b-label { padding-bottom: 10px; }

/* À retenir --------------------------------------------------------------- */
.b-retenir { background: var(--ib-accent); color: var(--ib-panel); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.b-retenir > .b-label { color: var(--ib-panel); }
.b-retenir > :not(.b-label, ol, ul) { font: 400 22px/1.4 var(--ib-serif); color: var(--ib-panel); }
.b-retenir a { color: var(--ib-white); text-decoration: underline; }
.b-retenir strong { color: var(--ib-white); }
/* Variante liste numérotée sur fond sombre (maquette Article). */
.b-retenir--liste { background: var(--ib-ink); color: var(--ib-on-dark); padding: 22px 24px; }
.b-retenir--liste > .b-label { color: var(--ib-accent-on-dark); }
.b-retenir > :is(ol, ul) { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.55; counter-reset: b-retenir; }
.b-retenir li { position: relative; padding-left: 30px; counter-increment: b-retenir; }
.b-retenir li::before { content: counter(b-retenir, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--ib-mono); color: var(--ib-accent-on-dark); }
.b-retenir ul > li { padding-left: 18px; }
.b-retenir ul > li::before { content: "•"; }
.b-retenir:not(.b-retenir--liste) li::before { color: var(--ib-accent-light); }
.b-retenir--liste > :not(.b-label, ol, ul) { font-size: 15px; font-family: var(--ib-sans); line-height: 1.55; color: var(--ib-on-dark); }
@media (max-width: 480px) {
	.b-retenir { padding: 20px; }
	.b-retenir > :not(.b-label, ol, ul) { font-size: 20px; }
}

/* Sources et mises à jour ------------------------------------------------- */
.b-sources { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--ib-rule); font-size: 13px; line-height: 1.6; color: var(--ib-muted); }
.b-sources > .b-label { color: var(--ib-ink); }
.b-sources a { color: var(--ib-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.b-sources a:hover { color: var(--ib-accent); }
.b-sources li + li { margin-top: 2px; }

/* Note de l'article (étoiles) --------------------------------------------- */
.b-note { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; border: 1px solid var(--ib-rule); background: var(--ib-white); text-align: center; }
.b-note > .b-titre { font: 400 22px/1.3 var(--ib-serif); color: var(--ib-ink); }
.b-note__etoiles { display: flex; gap: 6px; }
.b-note button {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ib-rule);
	background: var(--ib-white);
	color: #C9C4B8;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
/* Survol : l'étoile visée et celles qui la précèdent ; .is-on posé par site.js. */
.b-note button.is-on, .b-note__etoiles:hover button { background: var(--ib-accent); border-color: var(--ib-accent); color: var(--ib-paper); }
.b-note__etoiles button:hover ~ button { background: var(--ib-white); border-color: var(--ib-rule); color: #C9C4B8; }
.b-note > :not(.b-titre, .b-note__etoiles) { font-size: 13px; color: var(--ib-muted); }

/* Article précédent / suivant --------------------------------------------- */
.b-suivant { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.b-suivant > * { margin: 0; }
.b-suivant a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--ib-rule);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ib-ink);
	text-decoration: none;
}
.b-suivant a:hover { border-color: var(--ib-accent); color: var(--ib-accent); }
.b-suivant em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--ib-muted); }
.b-suivant > :nth-child(2) a, .b-suivant > a:nth-child(2) { text-align: right; }

/* Formule (encadré pointillé) --------------------------------------------- */
.b-formule {
	border: 1px dashed var(--ib-ink);
	padding: 16px 20px;
	font-family: var(--ib-mono);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	color: var(--ib-ink);
}
:where(.ib-prose, .is-root-container) .b-formule { font-family: var(--ib-mono); }
@media (max-width: 420px) { .b-formule { font-size: 14px; padding: 14px; } }