/* ==========================================================================
   Composants partagés « Forêt sombre »
   ========================================================================== */

/* Boutons ---------------------------------------------------------------- */

.bf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 700 15px var(--bf-font-ui);
	border-radius: var(--bf-r-btn);
	padding: 12px 22px;
	cursor: pointer;
	border: 0;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bf-btn--solid {
	background: var(--bf-orange);
	color: var(--bf-on-orange);
	box-shadow: var(--bf-shadow-cta);
}

.bf-btn--solid:hover {
	background: var(--bf-orange-hover);
	color: var(--bf-on-orange);
}

.bf-btn--ghost {
	background: transparent;
	color: var(--bf-text);
	border: 1px solid var(--bf-line-input);
}

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

/* Variantes sur fond crème */
.bf-btn--paper-ghost {
	background: transparent;
	color: var(--bf-orange-link);
	border: 1px solid var(--bf-orange-link);
}

.bf-btn--paper-ghost:hover {
	background: rgba(217, 123, 41, .1);
	color: var(--bf-orange-deep);
}

/* Badges & chips ---------------------------------------------------------- */

.bf-badge {
	display: inline-flex;
	align-items: center;
	font: 700 11px var(--bf-font-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: var(--bf-r-pill);
	padding: 5px 11px;
	white-space: nowrap;
}

.bf-badge--orange { background: var(--bf-orange); color: var(--bf-on-orange); }
.bf-badge--sage   { background: var(--bf-sage); color: #dfe8d5; }
.bf-badge--gold   { background: var(--bf-gold); color: #f4ead8; }
.bf-badge--brick  { background: var(--bf-gold-deep); color: #f4e2d5; }
.bf-badge--line   { background: transparent; color: var(--bf-gold-bright); border: 1px solid var(--bf-gold); }

.bf-chip {
	display: inline-flex;
	align-items: center;
	font: 600 13px var(--bf-font-ui);
	color: var(--bf-sage-light);
	border: 1px solid var(--bf-line-input);
	border-radius: var(--bf-r-pill);
	padding: 6px 13px;
}

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

.bf-overline {
	font: 700 11px var(--bf-font-ui);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bf-muted);
}

/* Étoiles (caractère ★, jamais d'icônes SVG) ------------------------------ */

.bf-stars {
	font-size: 15px;
	letter-spacing: 2px;
	color: var(--bf-star);
	white-space: nowrap;
}

.bf-stars .off {
	color: var(--bf-star-off);
}

.bf-stars--paper {
	color: var(--bf-star-paper);
}

.bf-stars--paper .off {
	color: var(--bf-star-off-paper);
}

/* Citation manuscrite du Bigfoot ------------------------------------------ */

.bf-hand {
	font-family: var(--bf-font-hand);
	font-weight: 600;
	font-size: clamp(17px, 2.2vw, 22px);
	line-height: 1.35;
}

/* Surfaces ----------------------------------------------------------------- */

.bf-card-paper {
	background: var(--bf-paper);
	border: 1px solid var(--bf-paper-line);
	border-radius: var(--bf-r-card);
	color: var(--bf-ink-body);
}

.bf-panel {
	background: var(--bf-panel);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-r-card);
}

/* Widgets HTML embarqués (calculateurs…) — décapsulés et scopés .bf-embed :
   leur style interne clair reste confiné dans une carte propre. */
.bf-embed {
	border-radius: var(--bf-r-card);
	overflow: hidden;
	padding: 18px 6px;
	margin: 14px 0;
}

/* Les embeds sont des cartes claires : la couleur héritée repasse à l'encre
   (sinon les textes non stylés par le widget — ex. #message du vérificateur —
   gardent la prose claire du thème, illisible sur carte claire). Leurs propres
   règles scopées gardent la main sur ce qu'elles stylent. */
.bf-content .bf-embed { color: #3c4638; }

/* Titres : encre sombre. Double classe : doit gagner sur
   « .bf-content :is(h2,h3,h4):not(...) » d'article.css, chargé après
   ce fichier et de même spécificité sinon. */
.bf-content .bf-embed.bf-embed :is(h1, h2, h3, h4, h5) {
	color: #24301f;
}