/* ==========================================================================
   Article — valeurs du prototype Article.dc.html + content-skin legacy
   ========================================================================== */

/* Barre de progression de lecture ------------------------------------------ */

.bf-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	z-index: var(--bf-z-progress);
	background: rgba(38, 56, 42, .6);
}

.bf-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--bf-orange);
}

/* En-tête ------------------------------------------------------------------ */

.bf-article__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 26px;
}

.bf-article__title {
	margin: 0;
	font: 800 clamp(28px, 5vw, 46px)/1.12 var(--bf-font-display);
	color: var(--bf-title);
	max-width: 880px;
}

.bf-article__chapo {
	margin: 0;
	font: 400 19px/1.55 var(--bf-font-ui);
	color: var(--bf-body-soft);
	max-width: 760px;
}

.bf-article__layout { padding-bottom: 80px; }

.bf-article__main {
	flex: 1 1 580px;
	min-width: 0;
	max-width: 820px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.bf-article__hero img {
	width: 100%;
	height: clamp(220px, 46vw, 360px);
	object-fit: cover;
	border-radius: 16px;
}

/* Corps -------------------------------------------------------------------- */

.bf-article__content { font-size: 16.5px; line-height: 1.75; }

.bf-disclosure {
	font: italic 400 13px/1.5 var(--bf-font-ui);
	color: var(--bf-muted);
	margin: 0 0 18px;
}

.bf-article__content h2 {
	font: 800 clamp(22px, 3.6vw, 30px) var(--bf-font-display);
	color: var(--bf-text);
	margin: 22px 0 10px;
}

.bf-article__content h3 {
	font: 800 20px var(--bf-font-display);
	color: var(--bf-text);
	margin: 18px 0 8px;
}

.bf-article__content blockquote {
	margin: 18px 0;
	background: var(--bf-paper);
	border-radius: 12px;
	padding: 16px 20px;
	color: var(--bf-ink);
	font-family: var(--bf-font-hand);
	font-size: 20px;
}

.bf-article__content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14.5px;
}

.bf-article__content th,
.bf-article__content td {
	border: 1px solid var(--bf-line-card);
	padding: 8px 12px;
	text-align: left;
}

.bf-article__content th { background: var(--bf-panel); color: var(--bf-text); }

.bf-side-read {
	font: 600 14px/1.45 var(--bf-font-ui);
	color: var(--bf-body-soft);
	padding: 7px 0;
	border-bottom: 1px solid var(--bf-line);
}

.bf-side-read:last-of-type { border-bottom: 0; }

.bf-side-read:hover { color: var(--bf-orange-bright); }

.bf-side-read__meta { font: 600 12px var(--bf-font-ui); color: var(--bf-ink-muted); letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   Content-skin : remap du contenu legacy (Stackable/Kadence pensés pour fond
   clair) vers la DA sombre. Politique « surfaces papier » : les fonds clairs
   posés en dur deviennent des cartes crème cohérentes.
   -------------------------------------------------------------------------- */

.bf-content { color: var(--bf-body); }

.bf-content p, .bf-content li { color: inherit; }

.bf-content a { color: var(--bf-orange-hover); }

.bf-content a:hover { color: var(--bf-orange-bright); }

/* Titres hérités avec couleur sombre codée en dur → clair. */
.bf-content :is(h2, h3, h4):not([class*="has-"]) { color: var(--bf-text); }

/* Prose composée à l'intérieur des fiches papier (bf-fiche__desc porte
   .bf-content) : l'encre reprend la main sur la prose claire du thème. */
.bf-content.bf-fiche__desc,
.bf-fiche .bf-content {
	color: var(--bf-ink-body);
}

.bf-content.bf-fiche__desc :is(h2, h3, h4):not([class*="has-"]),
.bf-fiche .bf-content :is(h2, h3, h4):not([class*="has-"]) {
	color: var(--bf-ink);
}

/* Fond clair dominant du site legacy (#d7d5c5) → carte papier. */
.bf-content [style*="d7d5c5"],
.bf-content .has-d-7-d-5-c-5-background-color {
	background: var(--bf-paper) !important;
	border-radius: 12px;
	color: var(--bf-ink-body) !important;
}

.bf-content [style*="d7d5c5"] :is(p, li, h2, h3, h4, strong, span) {
	color: var(--bf-ink-body) !important;
}

.bf-content [style*="d7d5c5"] :is(h2, h3, h4) { color: var(--bf-ink) !important; }

/* Colonnes Stackable à fond clair par classe générée. */
.bf-content .stk-block-column .stk-container[style*="background"] {
	border-radius: 12px;
}

/* Texte olive legacy sur fond sombre → sauge lisible. */
.bf-content [style*="color:#7a763d"],
.bf-content [style*="color: #7a763d"] { color: var(--bf-sage-light) !important; }

/* Séparateurs legacy. */
.bf-content hr { border: 0; border-top: 1px solid var(--bf-line); margin: 24px 0; }

/* Listes legacy « has-link-color » : l'éditeur y a figé des liens noirs
   (var --wp--style--color--link) → invisibles sur fond sombre. Reprise en
   orange, spécificité au-dessus des styles block-supports de WP. */
.bf-content .has-link-color a:not(.bf-link-ink) {
	color: var(--bf-orange-hover);
}

/* Légendes d'images legacy (#333 codé en dur → invisible sur fond sombre). */
.bf-content figcaption {
	color: var(--bf-muted) !important;
	font-size: 13px;
}

/* Liens posés sur les cartes Stackable : orange vif + souligné (fonds olive
   ou sombres). Sur carte CLAIRE générée, main.js mesure la luminance et pose
   .bf-link-ink → encre (les fonds Stackable sont des classes hashées,
   indétectables en CSS pur). */
.bf-content .stk-column-wrapper a:not([class*="button"]) {
	color: var(--bf-orange-bright);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bf-content .stk-column-wrapper a.bf-link-ink,
.bf-content a.bf-link-ink { color: var(--bf-ink); }

/* --------------------------------------------------------------------------
   Tableaux HTML bruts : défilement interne + habillage sombre
   (les <table border="1"> des articles débordaient jusqu'à 450 px à 390 px).
   -------------------------------------------------------------------------- */

.bf-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 18px 0;
	border: 1px solid var(--bf-line-card);
	border-radius: 12px;
}

.bf-content .bf-table-scroll table,
.bf-content table {
	border-collapse: collapse;
	width: 100%;
	min-width: 560px;
	font-size: 14.5px;
	line-height: 1.5;
	border: 0;
	margin: 0;
	background: var(--bf-card);
}

.bf-content table th,
.bf-content table td {
	border: 1px solid var(--bf-line);
	padding: 10px 14px;
	text-align: left;
	color: var(--bf-body);
	vertical-align: top;
}

.bf-content table th {
	background: var(--bf-panel);
	color: var(--bf-text);
	font-weight: 700;
	white-space: nowrap;
}

.bf-content table tr:nth-child(even) td { background: rgba(16, 26, 19, .45); }

.bf-content table caption {
	caption-side: bottom;
	font: 500 12.5px var(--bf-font-ui);
	color: var(--bf-muted);
	padding: 8px 0;
}

/* Dans les cartes papier (fiches, embeds), les tables repassent en encre et
   l'habillage sombre est entièrement neutralisé — spécificité calée au-dessus
   de « .bf-content .bf-table-scroll table » et du zébrage nth-child. */
.bf-fiche .bf-table-scroll table,
.bf-content .bf-embed table,
.bf-embed table { background: var(--bf-paper-light); min-width: 0; }

.bf-fiche table th, .bf-fiche table td,
.bf-content .bf-embed table th,
.bf-content .bf-embed table td,
.bf-embed table th, .bf-embed table td {
	color: var(--bf-ink-body);
	border-color: var(--bf-paper-line);
	background: none;
}

.bf-content .bf-embed table tr:nth-child(even) td { background: none; }

.bf-content .bf-embed .bf-table-scroll { border-color: var(--bf-paper-line); }

/* --------------------------------------------------------------------------
   Illustrations SVG legacy aux tracés quasi noirs (#010101 / #231f20) :
   invisibles sur fond sombre → recolorées sauge (234 occurrences).
   -------------------------------------------------------------------------- */

.bf-content svg [fill="#010101"],
.bf-content svg[fill="#010101"],
.bf-content svg [fill="#231f20"],
.bf-content svg[fill="#231f20"] {
	fill: var(--bf-sage-light);
}

.bf-content svg [stroke="#010101"],
.bf-content svg [stroke="#231f20"] {
	stroke: var(--bf-sage-light);
}

/* Figures/images à largeur fixe inline (style="width:800px" des articles
   générés) : plafonnées à la colonne — cause n°1 des débordements mobiles. */
.bf-content figure {
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Conteneurs Stackable à largeur générée fixe : confinés à la colonne. */
.bf-content :is(.stk-block, .stk-block-content, .stk-column-wrapper, .stk-row, .stk-container) {
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Couvertures legacy « alignfull » (bandeaux pleine largeur à -50vw) :
   confinées à la colonne de lecture — elles recouvraient la sidebar. */
.bf-content .wp-block-cover {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	border-radius: 14px;
	overflow: hidden;
}

.bf-content figure img,
.bf-content .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* Fonds blancs posés en dur par l'éditeur → carte papier cohérente. */
.bf-content .has-white-background-color {
	background-color: var(--bf-paper) !important;
	border-radius: 12px;
	color: var(--bf-ink-body) !important;
}

.bf-content .has-white-background-color :is(p, li, h2, h3, h4, strong, span) {
	color: var(--bf-ink-body) !important;
}

/* Composants éditoriaux du design (utilisables dans les contenus refreshés) -- */

.bf-callout-bigfoot {
	background: var(--bf-paper);
	border-radius: 14px;
	padding: 20px 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	color: var(--bf-ink);
}

.bf-callout-bigfoot img { width: 52px; height: auto; flex: none; }

.bf-callout-bigfoot .bf-callout__label {
	font: 800 11px var(--bf-font-ui);
	letter-spacing: .18em;
	color: var(--bf-gold);
	display: block;
	margin-bottom: 6px;
}

.bf-callout-bigfoot .bf-callout__text {
	font: 600 21px/1.4 var(--bf-font-hand);
	color: var(--bf-ink);
}

.bf-securite {
	border: 1px solid var(--bf-alert);
	border-radius: 12px;
	overflow: hidden;
}

.bf-securite__head {
	background: var(--bf-alert);
	color: #fff;
	font: 800 12px var(--bf-font-ui);
	letter-spacing: .16em;
	padding: 9px 16px;
}

.bf-securite__body {
	background: rgba(217, 107, 74, .08);
	padding: 14px 16px;
	font: 400 15px/1.6 var(--bf-font-ui);
	color: var(--bf-body);
}

/* --------------------------------------------------------------------------
   Sommaire pleine largeur (gabarit standard) : panneau en grille numérotée
   sous le bandeau héro, contenu pleine largeur partout. Un bouton flottant
   reprend la navigation quand le panneau est sorti de l'écran.
   -------------------------------------------------------------------------- */

.bf-toc--wide {
	counter-reset: bftoc;
	margin: 26px 0 32px;
}

.bf-toc--wide .bf-toc__item {
	counter-increment: bftoc;
	display: flex;
	align-items: baseline;
	gap: 11px;
}

.bf-toc--wide .bf-toc__item::before {
	content: counter(bftoc, decimal-leading-zero);
	font: 800 12px var(--bf-font-display);
	color: var(--bf-orange-bright);
	letter-spacing: .06em;
	flex-shrink: 0;
}

/* Ancres sous le header sticky. */
.bf-content :is(h2, h3)[id] { scroll-margin-top: 96px; }

.bf-toc-fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--bf-line-input);
	background: var(--bf-panel);
	color: var(--bf-text);
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bf-toc-fab:hover { color: var(--bf-orange-bright); border-color: var(--bf-orange-deep); }

.bf-toc-pop {
	position: fixed;
	right: 22px;
	bottom: 86px;
	z-index: 60;
	width: min(340px, calc(100vw - 44px));
	max-height: min(60vh, 480px);
	overflow-y: auto;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease;
}

.bf-toc-pop.is-open { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.bf-toc-pop { transition: none; }
}

@media (max-width: 920px) {
	.bf-article__main { max-width: none; }
	.bf-toc--wide { margin: 20px 0 26px; }
}