/* Keep header / viewer / footer flush — no fixed header, no spacer.
 * Theme tokens (--rfb-*) come from Vue / reader-chrome.js (see themeTokens.ts).
 */

:root {
	--rfb-bg: #f3f4f6;
	--rfb-chrome: #ffffff;
	--rfb-chrome-muted: #f3f4f6;
	--rfb-border: #e5e7eb;
	--rfb-ink: #111827;
	--rfb-ink-muted: #6b7280;
	--rfb-accent: #9d3f50;
	--rfb-accent-hover: #7a2f3d;
	--rfb-on-accent: #ffffff;
	--rfb-brand: #9d3f50;
	--rfb-brand-mark-bg: #3f2028;
	--rfb-brand-mark-ink: #fffef9;
	--rfb-brand-mark-rule: #9d3f50;
}

/* Scrollbar suit le thème (tokens --rfb-*) */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--rfb-ink-muted) var(--rfb-border);
}

*::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

*::-webkit-scrollbar-track {
	background: var(--rfb-border);
}

*::-webkit-scrollbar-thumb {
	background: var(--rfb-ink-muted);
	border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--rfb-ink);
}

html,
body {
	margin: 0;
	padding: 0;
	background-color: var(--rfb-bg);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--rfb-bg);
	color: var(--rfb-ink);
}

#content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* Stretch only the SPA mount — pas les pages légales (article.rfb-page). */
#content > div,
#content [id^="jsembed-app-"] {
	margin: 0;
	padding: 0;
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}

#content > article:has([id^="jsembed-app-"]) {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: none;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}

/* Pages légales / contenu éditorial — container indépendant de Tailwind. */
.rfb-page {
	width: 100%;
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	padding: 3rem 1rem;
	box-sizing: border-box;
	flex: 0 0 auto;
	color: var(--rfb-ink);
}

.rfb-page__title {
	color: var(--rfb-ink);
}

.rfb-page__muted {
	color: var(--rfb-ink-muted);
}

.rfb-page .rfb-content {
	color: var(--rfb-ink-muted);
}

#content > article:has([id^="jsembed-app-"]) .rfb-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	margin: 0;
}

#content > article:has([id^="jsembed-app-"]) > h1 {
	display: none;
}

#content [id^="jsembed-app-"] {
	min-height: 100%;
}

/* Site chrome — colors from --rfb-* tokens */
.rfb-site-header {
	background-color: var(--rfb-chrome);
	border-bottom: 1px solid var(--rfb-border);
	color: var(--rfb-ink);
	box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.rfb-site-header__title {
	color: var(--rfb-ink);
}

.rfb-site-header__title:hover,
.rfb-site-header a.group:hover .rfb-site-header__title {
	color: var(--rfb-accent);
}

.rfb-site-header__tagline {
	color: var(--rfb-ink-muted);
}

/* Logo mark — sigle RFB + trait accent (comme Didéa : fond sombre, trait bordeaux app). */
.rfb-brand-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 3.125rem;
	height: 3.125rem;
	padding: 0.35rem 0.38rem 0.3rem;
	border-radius: 0.625rem;
	background-color: var(--rfb-brand-mark-bg, #3f2028);
	color: var(--rfb-brand-mark-ink, #fffef9);
}

.rfb-brand-mark__letters {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1;
	font-family: Inter, system-ui, sans-serif;
}

.rfb-brand-mark__rule {
	display: block;
	width: 100%;
	height: 0.16rem;
	margin-top: 0.22rem;
	border-radius: 999px;
	background-color: var(--rfb-brand-mark-rule, #9d3f50);
}

body.rfb-theme-planche .rfb-brand-mark {
	border: 2px solid #1a1a1a;
	box-shadow: 2px 2px 0 #1a1a1a;
}

body.rfb-theme-planche .rfb-brand-mark__rule {
	background-color: #9d3f50;
}

.rfb-site-footer {
	margin: 0;
	flex-shrink: 0;
	background-color: var(--rfb-chrome-muted);
	border-top: 1px solid var(--rfb-border);
	color: var(--rfb-ink);
}

.rfb-site-footer__title,
.rfb-site-footer__heading,
.rfb-site-footer__label {
	color: var(--rfb-ink);
}

.rfb-site-footer__muted,
.rfb-site-footer__muted a {
	color: var(--rfb-ink-muted);
}

.rfb-site-footer__muted a:hover {
	color: var(--rfb-accent);
}

.rfb-site-footer__accent {
	color: var(--rfb-accent);
}

/* Contact icons — brand bordeaux (stable across light / sepia / dark). */
.rfb-site-footer__icon {
	background-color: color-mix(in srgb, var(--rfb-brand, #9d3f50) 16%, transparent);
}

.rfb-site-footer__icon-svg {
	color: var(--rfb-brand, #9d3f50);
}

.rfb-site-footer__rule {
	border-color: var(--rfb-border);
}

.rfb-site-footer__dot {
	color: var(--rfb-border);
}

/* Fichier ouvert (event rfb-file-opened) : masquer chrome PHP */
body.rfb-has-file .rfb-site-header,
body.rfb-has-file .rfb-site-footer,
body.rfb-reader-active .rfb-site-header,
body.rfb-reader-active .rfb-site-footer {
	display: none !important;
}

body.rfb-has-file #content > div,
body.rfb-has-file #content [id^="jsembed-app-"],
body.rfb-reader-active #content > div,
body.rfb-reader-active #content [id^="jsembed-app-"] {
	min-height: 100vh;
	height: 100%;
	flex: 1 1 auto;
}

/* Legal / page content: Tailwind preflight zeroes p/h margins; prose not compiled. */
.rfb-content > * + * {
	margin-top: 1rem;
}

.rfb-content h2 {
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
	font-size: 1.35rem;
	line-height: 1.35;
	color: var(--rfb-ink);
}

.rfb-content h2:first-child {
	margin-top: 0;
}

.rfb-content p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.7;
	color: var(--rfb-ink);
}

.rfb-content p + p {
	margin-top: 1rem;
}

.rfb-content a {
	color: var(--rfb-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rfb-content a:hover {
	color: var(--rfb-accent-hover);
}

.rfb-content strong {
	color: var(--rfb-ink);
	font-weight: 600;
}

/* 404 CTA spacing (mb-10 not in compiled Tailwind). */
.rfb-404-cta {
	margin-top: 2.5rem;
	display: inline-flex;
}

/* Cookie consent — center privacy link; --cc-* set by reader-chrome.js per theme */
.cm__link-group {
	justify-content: center !important;
	text-align: center !important;
	width: 100%;
}

/* Reject only (data-role=necessary) — outline; preferences keep secondary fill */
#cc-main button[data-role='necessary'] {
	background-color: transparent !important;
	border: 1px solid var(--cc-btn-primary-bg) !important;
	color: var(--cc-btn-primary-bg) !important;
}

#cc-main button[data-role='necessary']:hover {
	background-color: color-mix(in srgb, var(--cc-btn-primary-bg) 12%, transparent) !important;
	border-color: var(--cc-btn-primary-hover-bg) !important;
	color: var(--cc-btn-primary-hover-bg) !important;
}