/* ============================================================================
   Fooko — Espace membre · Design system « Registre »
   ----------------------------------------------------------------------------
   Concept : un registre calme et précis pour l'argent de l'association.
   Identité VOLONTAIREMENT distincte de la vitrine (crème chaude + navy/or +
   serif Spectral + rayons 2–6px). Ici : tokens repris du dashboard Tsenta
   (shadcn/ui) — neutres PURS (vrais gris zéro-chroma), DM Sans + Jost,
   rayon 10px, élévation subtile — vocabulaire d'app back-office, jamais
   éditorial : fond neutre, beaucoup de blanc, un seul accent (la marque)
   employé avec parcimonie, vert/rouge réservés à la santé des chiffres.

   Signature : un SYSTÈME NUMÉRIQUE unifié — montants tabulaires signés
   (vert crédit / rouge débit), matricules en mono « ticket de caisse »,
   et un rail de navigation sectionné à icônes. Toute l'app se lit comme
   un seul livre de comptes cohérent.

   Architecture : light-first, sombre opt-in via [data-theme="dark"].
   La couleur de marque (--fk-primary) est INJECTÉE inline depuis les réglages
   (templates/app.php) et n'est utilisée qu'en ACCENT (action + « vous êtes ici »).
   Tout est scopé sous .fk-app → aucun conflit avec le thème / Elementor.
   ========================================================================== */

/* ---- Mode plein écran autonome (gabarit page-app.php) ----------------- */
html, body.fk-standalone { margin: 0; padding: 0; }
body.fk-standalone { background: #F6F6F6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.fk-standalone:has(.fk-app[data-theme="dark"]) { background: #0A0A0A; }
/* Dashboard : l'app occupe EXACTEMENT le viewport et ne grandit pas → le rail et
   le contenu défilent indépendamment (le rail ne défile plus avec la page). */
body.fk-standalone .fk-app { height: 100dvh; border: none; border-radius: 0; box-shadow: none; }
/* Connexion : pas de rail → l'app grandit et la page défile normalement. */
body.fk-standalone .fk-app:not(:has(.fk-sidebar)) { height: auto; min-height: 100dvh; overflow: visible; }
body.fk-standalone .fk-login { min-height: 100dvh; }

/* ---- Tokens (mode clair, neutres froids) ----------------------------- */
.fk-app {
	/* Marque — injectée inline depuis le réglage primary_color (accent uniquement).
	   Défaut = vert profond Fooko (#174235), la couleur de base de l'espace membre.
	   Le ton foncé -600 (#13362b) est dérivé via Util::darken() pour les survols. */
	--fk-primary: #174235;
	--fk-primary-600: #13362b;

	/* Neutres PURS (chroma 0) — repris des tokens shadcn du dashboard Tsenta.
	   De vrais gris (pas de teinte bleue), comme la référence. */
	--fk-bg: #F6F6F6;          /* fond appli — gris neutre */
	--fk-surface: #FFFFFF;     /* cartes, panneaux */
	--fk-surface-2: #F5F5F5;   /* inset, entête de table, zébrure (Tsenta --muted) */
	--fk-surface-3: #ECECEC;   /* hover sourd */
	--fk-sidebar-bg: #FAFAFA;  /* rail (Tsenta --sidebar) */
	--fk-border: #E5E5E5;      /* filets (Tsenta --border) */
	--fk-border-strong: #D4D4D4;
	--fk-text: #0A0A0A;        /* encre (Tsenta --foreground) — 19.8:1 */
	--fk-text-2: #525252;      /* secondaire — 7.8:1 */
	--fk-text-3: #6B6B6B;      /* tertiaire / sourd — 4.9:1 sur le fond (WCAG AA) */

	/* Sémantiques data — indépendantes de la marque (santé des chiffres) */
	--fk-success: #0A7C55;     /* crédit / sain — 5.2:1 (AA, lisible en badge) */
	--fk-warning: #B45309;     /* attention */
	--fk-danger:  #D92D20;     /* débit / déficit */
	--fk-info:    #2563EB;     /* information */

	/* Dérivés de la primaire (accent) */
	--fk-primary-soft:   color-mix(in srgb, var(--fk-primary) 9%, #fff);
	--fk-primary-soft-2: color-mix(in srgb, var(--fk-primary) 14%, #fff);
	--fk-primary-ink:    color-mix(in srgb, var(--fk-primary) 80%, #1B2233);
	--fk-focus-ring:     color-mix(in srgb, var(--fk-primary) 32%, transparent);
	--fk-shadow-focus:   0 0 0 3px var(--fk-focus-ring);

	/* Accent secondaire OR — signature « navy + or » reprise de la page de
	   connexion (.fk-auth). Couleur fixe (≠ marque) : tient en clair comme en sombre. */
	--fk-gold:      #d81417;
	--fk-gold-ink:  #b11013;
	--fk-gold-600:  #c61013;
	--fk-gold-soft: color-mix(in srgb, var(--fk-gold) 16%, var(--fk-surface));

	/* Polices — mêmes que le dashboard Tsenta : DM Sans (texte/UI/chiffres) +
	   Jost (titres géométriques, à la place de Century Gothic propriétaire). */
	--fk-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--fk-display: 'Jost', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fk-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	/* Rayons — 10px = .625rem, identique à Tsenta (--radius). */
	--fk-radius-sm: 7px;
	--fk-radius: 10px;
	--fk-radius-lg: 14px;

	/* Élévation — ombres neutres, discrètes (shadcn-like). */
	--fk-shadow-xs: 0 1px 2px rgba(10, 10, 10, .04);
	--fk-shadow-sm: 0 1px 2px rgba(10, 10, 10, .05), 0 1px 3px rgba(10, 10, 10, .04);
	--fk-shadow-md: 0 4px 12px -2px rgba(10, 10, 10, .07), 0 2px 6px -2px rgba(10, 10, 10, .05);
	--fk-shadow-lg: 0 18px 44px -14px rgba(10, 10, 10, .16), 0 6px 14px -6px rgba(10, 10, 10, .08);

	/* Layout */
	--fk-sidebar-w: 256px;
	--fk-topbar-h: 64px;

	font-family: var(--fk-sans);
	color: var(--fk-text);
	background: var(--fk-bg);
	display: grid;
	grid-template-columns: var(--fk-sidebar-w) 1fr;
	grid-template-rows: var(--fk-topbar-h) 1fr;
	grid-template-areas: "sidebar topbar" "sidebar main";
	min-height: 80vh;
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	overflow: hidden;
	box-shadow: var(--fk-shadow-sm);
}

/* ---- Mode sombre opt-in (neutres froids, encre claire) --------------- */
.fk-app[data-theme="dark"] {
	--fk-bg: #0A0A0A;
	--fk-surface: #171717;
	--fk-surface-2: #1F1F1F;
	--fk-surface-3: #2A2A2A;
	--fk-sidebar-bg: #121212;
	--fk-border: #2A2A2A;
	--fk-border-strong: #404040;
	--fk-text: #FAFAFA;
	--fk-text-2: #A3A3A3;
	--fk-text-3: #7D7D7D;
	--fk-success: #34D399;
	--fk-warning: #FBBF24;
	--fk-danger:  #F87171;
	--fk-info:    #60A5FA;
	/* Base des teintes claires dérivées de la marque, sur fond sombre.
	   Neutre froid, sans dominante : la couleur de marque est injectée par
	   l'association, donc toute base teintée (ici, autrefois, un vert menthe)
	   déviait la teinte — un navy #0257AD en ressortait turquoise. */
	--fk-tint-base: #F5F7FA;
	--fk-primary-soft:   color-mix(in srgb, var(--fk-primary) 40%, var(--fk-surface));
	--fk-primary-soft-2: color-mix(in srgb, var(--fk-primary) 52%, var(--fk-surface));
	--fk-primary-ink:    color-mix(in srgb, var(--fk-primary) 42%, var(--fk-tint-base));
	--fk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
	--fk-shadow-md: 0 6px 18px -4px rgba(0, 0, 0, .55);
	--fk-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .65);
}

/* Mode sombre : le vert forêt (#15362B) est trop sombre sur fond noir → on
   l'éclaircit sur les surfaces PLEINES (boutons, pastille, indicateur actif). */
.fk-app[data-theme="dark"] .fk-btn:not(.fk-btn--secondary):not(.fk-btn--ghost):not(.fk-btn--danger),
.fk-app[data-theme="dark"] #fk-loginform #wp-submit {
	background: color-mix(in srgb, var(--fk-primary) 45%, var(--fk-tint-base)); color: var(--fk-bg);
}
.fk-app[data-theme="dark"] .fk-btn:not(.fk-btn--secondary):not(.fk-btn--ghost):not(.fk-btn--danger):hover,
.fk-app[data-theme="dark"] #fk-loginform #wp-submit:hover { background: color-mix(in srgb, var(--fk-primary) 62%, var(--fk-tint-base)); }
.fk-app[data-theme="dark"] .fk-nav__item.is-active::before { background: var(--fk-gold); }
.fk-app[data-theme="dark"] .fk-avatar { color: color-mix(in srgb, var(--fk-primary) 40%, var(--fk-tint-base)); }

/* ---- Reset scopé (anti-conflit thème / Elementor) --------------------- *
   La page autonome charge quand même la CSS du thème vitrine (Spectral serif
   sur les titres, etc.). On REFORCE la police et les bases sous .fk-app pour
   que rien du thème ne fuite. .fk-app * = spécificité (0,1,0) → bat un sélecteur
   d'élément du thème ; les utilitaires .fk-mono (0,2,0) restent prioritaires. */
.fk-app, .fk-app * { font-family: var(--fk-sans); }
.fk-app .fk-mono, .fk-app .fk-receipt__no { font-family: var(--fk-mono); }
.fk-app, .fk-app *, .fk-app *::before, .fk-app *::after { box-sizing: border-box; }
.fk-app h1, .fk-app h2, .fk-app h3, .fk-app h4, .fk-app h5, .fk-app h6 {
	margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--fk-text);
}
.fk-app p, .fk-app figure { margin: 0; }
.fk-app ul, .fk-app ol { margin: 0; padding: 0; list-style: none; }
.fk-app a { color: inherit; text-decoration: none; }
.fk-app button { line-height: inherit; }
.fk-app img, .fk-app svg { display: block; max-width: 100%; }
.fk-app :focus { outline: none; }

/* Système numérique « registre » : chiffres tabulaires partout. */
.fk-kpi__value, .fk-table .num, .fk-mono, .fk-balance strong,
.fk-statgrid .v, .fk-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv05' 1; }
.fk-mono { font-family: var(--fk-mono); letter-spacing: .01em; font-size: 12.5px; color: var(--fk-text-2); }
.num--pos { color: var(--fk-success); }
.num--neg { color: var(--fk-danger); }

/* Titres « display » géométriques (à la Tsenta) — texte seulement, jamais les
   chiffres (qui restent en DM Sans tabulaire). */
.fk-app .fk-brand, .fk-page-head h2, .fk-topbar__title {
	font-family: var(--fk-display); letter-spacing: -.005em;
}

/* ---- Rail de navigation ---------------------------------------------- */
.fk-sidebar {
	grid-area: sidebar;
	background: var(--fk-sidebar-bg);
	border-right: 1px solid var(--fk-border);
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow-y: auto;
}
.fk-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 8px 16px;
	margin-bottom: 4px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -.01em;
	color: var(--fk-text);
	border-bottom: 1px solid var(--fk-border);
}
.fk-brand__dot {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--fk-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	flex: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent), var(--fk-shadow-xs);
}
/* Variante logo : plaque blanche (le logo du client est coloré et se perdrait
   sur la primaire), image contenue pour ne pas déformer une rondelle. */
.fk-brand__dot--logo { background: #fff; padding: 2px; overflow: hidden; }
.fk-brand__dot--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* En sombre, le sidebar est presque noir → on relève légèrement le navy de la pastille pour qu'elle reste lisible (lettre blanche). */
.fk-app[data-theme="dark"] .fk-brand__dot { background: color-mix(in srgb, var(--fk-primary) 70%, #2b3c57); }
/* La plaque du logo reste blanche en thème sombre : le logo y est posé, pas teinté. */
.fk-app[data-theme="dark"] .fk-brand__dot--logo { background: #fff; }
/* Eyebrow de section (la structure encode le métier) */
.fk-nav__group {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fk-text-3);
	padding: 0 10px;
	margin: 16px 0 6px;
}
.fk-nav__group:first-of-type { margin-top: 10px; }
.fk-nav__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 10px;
	border-radius: 9px;
	color: var(--fk-text-2);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	position: relative;
	transition: background .12s ease, color .12s ease;
}
.fk-nav__item:hover { background: var(--fk-surface-2); color: var(--fk-text); }
.fk-nav__item.is-active { background: var(--fk-primary-soft); color: var(--fk-primary-ink); font-weight: 600; }
.fk-nav__item.is-active::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 9px;
	bottom: 9px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--fk-gold);
}
.fk-nav__item:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-nav__icon { width: 18px; height: 18px; flex: none; stroke-width: 1.7; color: var(--fk-text-3); transition: color .12s ease; }
.fk-nav__item:hover .fk-nav__icon, .fk-nav__item.is-active .fk-nav__icon { color: currentColor; }
.fk-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-nav__count {
	font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--fk-text-2); background: var(--fk-surface-2);
	border: 1px solid var(--fk-border); border-radius: 999px; padding: 0 7px; line-height: 17px;
}
.fk-nav__item.is-active .fk-nav__count { background: var(--fk-surface); border-color: var(--fk-primary-soft-2); }
.fk-sidebar__spacer { flex: 1 1 auto; }
/* Ancre de compte en bas du rail */
.fk-sidebar__foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--fk-border); display: flex; flex-direction: column; gap: 1px; }
/* Rétro-compat : ancien séparateur texte */
.fk-nav__sep {
	font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--fk-text-3); margin: 16px 10px 6px;
}

/* ---- Rail rétractable (collapse) — slide animé ----------------------- */
/* --fk-sidebar-w enregistrée comme propriété animable → la colonne de grille
   glisse en douceur quand on réduit/déploie le rail (façon Tsenta). */
@property --fk-sidebar-w { syntax: "<length>"; inherits: true; initial-value: 256px; }
.fk-app { transition: --fk-sidebar-w .22s cubic-bezier(.4, 0, .2, 1); }

.fk-sidebar__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--fk-border); }
.fk-sidebar__head .fk-brand { flex: 1 1 auto; min-width: 0; padding: 8px 8px 0; margin: 0; border: none; }
.fk-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-sidebar__collapse {
	flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--fk-border); border-radius: 8px; background: var(--fk-surface);
	color: var(--fk-text-3); cursor: pointer; transition: background .12s ease, color .12s ease;
}
.fk-sidebar__collapse:hover { background: var(--fk-surface-2); color: var(--fk-text); }
.fk-sidebar__collapse:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-sidebar__collapse svg { width: 16px; height: 16px; }

/* État réduit — DESKTOP uniquement (sur mobile le rail est un tiroir). */
@media (min-width: 783px) {
	.fk-app--collapsed { --fk-sidebar-w: 74px; }
	.fk-app--collapsed .fk-sidebar { padding: 14px 10px; }
	.fk-app--collapsed .fk-brand__name,
	.fk-app--collapsed .fk-nav__label,
	.fk-app--collapsed .fk-nav__count { display: none; }
	.fk-app--collapsed .fk-sidebar__head { flex-direction: column; gap: 12px; }
	.fk-app--collapsed .fk-sidebar__head .fk-brand { padding: 6px 0 0; justify-content: center; }
	.fk-app--collapsed .fk-nav__item { justify-content: center; padding: 9px 0; }
	.fk-app--collapsed .fk-nav__item.is-active::before { left: -10px; }
	/* L'eyebrow de section devient un fin filet de séparation. */
	.fk-app--collapsed .fk-nav__group { height: 1px; margin: 10px 12px; padding: 0; font-size: 0; background: var(--fk-border); overflow: hidden; }
	.fk-app--collapsed .fk-sidebar__foot .fk-nav__item { justify-content: center; }
}

/* ---- Barre supérieure ------------------------------------------------ */
.fk-topbar {
	grid-area: topbar;
	background: var(--fk-surface);
	border-bottom: 1px solid var(--fk-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	gap: 16px;
}
.fk-topbar__title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--fk-text); }
.fk-topbar__role { font-size: 12px; color: var(--fk-text-3); margin-top: 1px; }
.fk-topbar__actions { display: flex; align-items: center; gap: 10px; }
.fk-topbar__user { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--fk-text-2); }
.fk-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--fk-primary-soft);
	border: 1px solid var(--fk-primary-soft-2);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; color: var(--fk-primary-ink); flex: none;
}
/* Bouton-icône du topbar (bascule de thème, etc.) */
.fk-iconbtn {
	width: 38px; height: 38px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--fk-border); border-radius: 9px;
	background: var(--fk-surface); color: var(--fk-text-2); cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.fk-iconbtn:hover { background: var(--fk-surface-2); color: var(--fk-text); border-color: var(--fk-border-strong); }
.fk-iconbtn:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-iconbtn svg { width: 18px; height: 18px; }

/* ---- Menu du compte (avatar → nom · rôle · profil · déconnexion) ----- */
.fk-usermenu { position: relative; flex: none; }
.fk-usermenu__trigger {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 2px; border: 1px solid transparent; border-radius: 50%;
	background: none; cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.fk-usermenu__trigger:hover { border-color: var(--fk-border-strong); }
.fk-usermenu__trigger.is-open { border-color: var(--fk-primary-soft-2); box-shadow: var(--fk-shadow-focus); }
.fk-usermenu__trigger:focus-visible { outline: none; box-shadow: var(--fk-shadow-focus); }

.fk-usermenu__pop {
	position: absolute; top: calc(100% + 9px); right: 0; z-index: 60;
	min-width: 232px; padding: 6px;
	background: var(--fk-surface); border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius); box-shadow: var(--fk-shadow-lg);
	transform-origin: top right; animation: fk-pop .14s ease both;
}
@keyframes fk-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.fk-usermenu__head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; }
.fk-usermenu__id { display: flex; flex-direction: column; min-width: 0; }
.fk-usermenu__id strong { font-size: 13.5px; font-weight: 650; color: var(--fk-text); letter-spacing: -.01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-usermenu__id span { font-size: 12px; color: var(--fk-text-3); margin-top: 1px; }
.fk-avatar--lg { width: 40px; height: 40px; font-size: 15px; }
.fk-usermenu__sep { height: 1px; background: var(--fk-border); margin: 2px 6px 4px; }

.fk-usermenu__item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: var(--fk-radius-sm);
	font-size: 13.5px; font-weight: 500; color: var(--fk-text-2);
	text-decoration: none; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.fk-usermenu__item:hover { background: var(--fk-surface-2); color: var(--fk-text); }
.fk-usermenu__item:focus-visible { outline: none; box-shadow: var(--fk-shadow-focus); }
.fk-usermenu__ico { width: 17px; height: 17px; flex: none; color: var(--fk-text-3); }
.fk-usermenu__item:hover .fk-usermenu__ico { color: var(--fk-text-2); }
.fk-usermenu__item--danger { color: var(--fk-danger); }
.fk-usermenu__item--danger .fk-usermenu__ico { color: var(--fk-danger); }
.fk-usermenu__item--danger:hover { background: color-mix(in srgb, var(--fk-danger) 9%, var(--fk-surface)); color: var(--fk-danger); }
.fk-usermenu__item--danger:hover .fk-usermenu__ico { color: var(--fk-danger); }

/* Petit signe de la main du tableau de bord */
.fk-wave { display: inline-block; transform-origin: 70% 70%; }
@media (prefers-reduced-motion: no-preference) {
	.fk-wave { animation: fk-wave 2.4s ease-in-out 1s 2; }
}
@keyframes fk-wave {
	0%, 60%, 100% { transform: none; }
	10%, 30% { transform: rotate(14deg); }
	20%, 40% { transform: rotate(-8deg); }
}

/* ---- Contenu --------------------------------------------------------- */
/* Colonne flex : le corps de la vue absorbe l'espace libre (flex: 1 0 auto) et
   pousse la signature en pied de zone quand l'écran est court — plus de crédit
   collé sous deux lignes de contenu. Contenu long → le corps garde sa hauteur
   naturelle et c'est .fk-main qui défile. */
.fk-main {
	grid-area: main; padding: 28px 32px; overflow: auto; overscroll-behavior: contain;
	display: flex; flex-direction: column; min-height: 0;
}
.fk-main > * { flex-shrink: 0; }
.fk-main__body { flex: 1 0 auto; min-height: 0; }
@media (max-width: 600px) { .fk-main { padding: 20px 16px; } }
/* Le bandeau « view-as » est fixe en bas : on réserve sa hauteur pour ne pas
   passer la signature dessous. */
.fk-app:has(.fk-impersonate) .fk-main { padding-bottom: 74px; }

/* Barres de défilement fines et neutres (rail + contenu défilent séparément). */
.fk-main, .fk-sidebar { scrollbar-width: thin; scrollbar-color: var(--fk-border-strong) transparent; }
.fk-main::-webkit-scrollbar, .fk-sidebar::-webkit-scrollbar { width: 11px; height: 11px; }
.fk-main::-webkit-scrollbar-thumb, .fk-sidebar::-webkit-scrollbar-thumb {
	background: var(--fk-border-strong); border-radius: 999px;
	border: 3px solid transparent; background-clip: padding-box;
}
.fk-main::-webkit-scrollbar-thumb:hover, .fk-sidebar::-webkit-scrollbar-thumb:hover { background: var(--fk-text-3); background-clip: padding-box; }

/* ---- Signature du studio -------------------------------------------- */
/* Clôt le contenu de chaque écran : filet, monogramme, mention lisible. */
.fk-credit {
	margin: 36px 0 4px; padding-top: 16px; border-top: 1px solid var(--fk-border);
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; line-height: 1.4; color: var(--fk-text-2);
}
.fk-credit__mark {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--fk-radius-sm);
	display: grid; place-items: center;
	background: var(--fk-surface-2); border: 1px solid var(--fk-border);
	font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--fk-text);
}
.fk-credit a {
	color: var(--fk-text); font-weight: 600; text-decoration: none;
	border-bottom: 1px solid var(--fk-border-strong); padding-bottom: 1px;
	transition: color .15s, border-color .15s;
}
.fk-credit a:hover { color: var(--fk-primary); border-bottom-color: currentColor; }
.fk-credit a:focus-visible { outline: 2px solid var(--fk-primary); outline-offset: 3px; border-radius: 2px; }

.fk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.fk-card {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	box-shadow: var(--fk-shadow-xs);
	padding: 20px;
}
/* Tuile « registre » : libellé · valeur tabulaire · delta de santé */
.fk-kpis .fk-card { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.fk-kpis .fk-card:hover { box-shadow: var(--fk-shadow-md); transform: translateY(-1px); }

/* Teintes pastel des tuiles KPI — « un peu de couleur ». Dérivées par color-mix
   sur la surface → douces en clair, discrètes en sombre. */
.fk-card--tint-green  { background: color-mix(in srgb, #16A34A 10%, var(--fk-surface)); border-color: color-mix(in srgb, #16A34A 24%, var(--fk-surface)); }
.fk-card--tint-blue   { background: color-mix(in srgb, #2563EB 9%,  var(--fk-surface)); border-color: color-mix(in srgb, #2563EB 22%, var(--fk-surface)); }
.fk-card--tint-amber  { background: color-mix(in srgb, #F59E0B 14%, var(--fk-surface)); border-color: color-mix(in srgb, #F59E0B 30%, var(--fk-surface)); }
.fk-card--tint-violet { background: color-mix(in srgb, #7C5CFC 11%, var(--fk-surface)); border-color: color-mix(in srgb, #7C5CFC 24%, var(--fk-surface)); }
.fk-card--tint-rose   { background: color-mix(in srgb, #F43F5E 9%,  var(--fk-surface)); border-color: color-mix(in srgb, #F43F5E 22%, var(--fk-surface)); }
/* En sombre on remonte un peu la teinte pour qu'elle reste perceptible. */
.fk-app[data-theme="dark"] .fk-card--tint-green  { background: color-mix(in srgb, #16A34A 18%, var(--fk-surface)); }
.fk-app[data-theme="dark"] .fk-card--tint-blue   { background: color-mix(in srgb, #2563EB 18%, var(--fk-surface)); }
.fk-app[data-theme="dark"] .fk-card--tint-amber  { background: color-mix(in srgb, #F59E0B 16%, var(--fk-surface)); }
.fk-app[data-theme="dark"] .fk-card--tint-violet { background: color-mix(in srgb, #7C5CFC 20%, var(--fk-surface)); }
.fk-app[data-theme="dark"] .fk-card--tint-rose   { background: color-mix(in srgb, #F43F5E 18%, var(--fk-surface)); }
.fk-kpi__label { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fk-text-3); }
.fk-kpi__value { font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--fk-text); margin-top: 8px; }
.fk-kpi__sub { font-size: 12.5px; color: var(--fk-text-2); margin-top: 4px; }
.fk-kpi__hint { font-size: 12.5px; color: var(--fk-text-3); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.fk-kpi__delta {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
	padding: 2px 8px; border-radius: 999px; margin-top: 10px;
}
.fk-kpi__delta--up   { color: var(--fk-success); background: color-mix(in srgb, var(--fk-success) 12%, var(--fk-surface)); }
.fk-kpi__delta--down { color: var(--fk-danger);  background: color-mix(in srgb, var(--fk-danger) 12%, var(--fk-surface)); }
.fk-kpi__delta--flat { color: var(--fk-text-2);  background: var(--fk-surface-2); }
.fk-empty { color: var(--fk-text-2); font-size: 14px; line-height: 1.55; }

/* ---- Badges ---------------------------------------------------------- */
.fk-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 9px; border-radius: 999px;
	font-size: 12px; font-weight: 600; line-height: 1.4;
}
.fk-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.fk-badge--success, .fk-badge--phase { color: var(--fk-success); background: color-mix(in srgb, var(--fk-success) 11%, var(--fk-surface)); border: 1px solid color-mix(in srgb, var(--fk-success) 28%, var(--fk-surface)); }
.fk-badge--warning { color: var(--fk-warning); background: color-mix(in srgb, var(--fk-warning) 11%, var(--fk-surface)); border: 1px solid color-mix(in srgb, var(--fk-warning) 28%, var(--fk-surface)); }
.fk-badge--danger  { color: var(--fk-danger);  background: color-mix(in srgb, var(--fk-danger) 11%, var(--fk-surface));  border: 1px solid color-mix(in srgb, var(--fk-danger) 28%, var(--fk-surface)); }
.fk-badge--info    { color: var(--fk-info);    background: color-mix(in srgb, var(--fk-info) 11%, var(--fk-surface));    border: 1px solid color-mix(in srgb, var(--fk-info) 28%, var(--fk-surface)); }
.fk-badge--neutral { color: var(--fk-text-2);  background: var(--fk-surface-2); border: 1px solid var(--fk-border); }

/* ---- Boutons --------------------------------------------------------- */
.fk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 40px; padding: 0 16px;
	background: var(--fk-primary); color: #fff;
	border: 1px solid transparent; border-radius: 10px;
	font-size: 14px; font-weight: 600; cursor: pointer;
	box-shadow: var(--fk-shadow-xs);
	transition: background .15s ease, box-shadow .15s ease, transform .05s ease, border-color .15s ease;
}
.fk-app a.fk-btn { color: #fff; } /* lien stylé en bouton : bat .fk-app a (color:inherit) */
.fk-app a.fk-btn--secondary { color: var(--fk-text); } /* lien-bouton secondaire : texte foncé (pas blanc-sur-blanc) */
.fk-app a.fk-btn--ghost { color: var(--fk-primary-ink); }
.fk-btn:hover { background: var(--fk-primary-600); color: #fff; box-shadow: var(--fk-shadow-sm); }
.fk-btn:active { transform: translateY(1px); }
.fk-btn:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-btn--secondary { background: var(--fk-surface); color: var(--fk-text); border-color: var(--fk-border-strong); box-shadow: var(--fk-shadow-xs); }
.fk-btn--secondary:hover { background: var(--fk-surface-2); border-color: var(--fk-text-3); color: var(--fk-text); }
.fk-btn--ghost { background: transparent; color: var(--fk-primary-ink); box-shadow: none; }
.fk-btn--ghost:hover { background: var(--fk-primary-soft); }
.fk-btn--danger { background: var(--fk-danger); color: #fff; }
.fk-btn--danger:hover { background: color-mix(in srgb, var(--fk-danger) 84%, #000); color: #fff; }
.fk-btn--sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; gap: 6px; }
.fk-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---- Tables ---------------------------------------------------------- */
.fk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.fk-table thead th {
	background: var(--fk-surface-2);
	color: var(--fk-text-3);
	font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
	text-align: left; padding: 11px 16px;
	border-bottom: 1px solid var(--fk-border);
	position: sticky; top: 0; z-index: 1;
}
.fk-table tbody td { padding: 13px 16px; color: var(--fk-text); border-bottom: 1px solid var(--fk-border); }
.fk-table tbody tr { transition: background .1s ease; }
.fk-table tbody tr:hover { background: var(--fk-surface-2); cursor: pointer; }
.fk-table tbody tr:last-child td { border-bottom: none; }
.fk-table tr.is-selected { background: var(--fk-primary-soft); box-shadow: inset 3px 0 0 var(--fk-primary); }
.fk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fk-table .num--neg { color: var(--fk-danger); }
.fk-table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fk-surface-2) 55%, var(--fk-surface)); }

/* ---- Champs ---------------------------------------------------------- */
.fk-input,
#fk-loginform input[type=text],
#fk-loginform input[type=password] {
	width: 100%; box-sizing: border-box; height: 42px; padding: 0 13px;
	background: var(--fk-surface);
	border: 1px solid var(--fk-border-strong);
	border-radius: 10px; font-size: 14px; color: var(--fk-text);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.fk-input::placeholder { color: var(--fk-text-3); }
.fk-input:hover { border-color: var(--fk-text-3); }
.fk-input:focus,
#fk-loginform input:focus { outline: none; border-color: var(--fk-primary); box-shadow: var(--fk-shadow-focus); }

/* ---- Module Membres : toolbar, table, modal, drawer, formulaire ------ */
.fk-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.fk-page-head .fk-row-actions { flex-wrap: wrap; }
.fk-page-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--fk-text); }
.fk-page-head p { margin: 5px 0 0; font-size: 13.5px; color: var(--fk-text-3); }

.fk-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.fk-toolbar__spacer { flex: 1 1 auto; }
/* Petite barre pour héberger le sélecteur de colonnes hors de la carte
   (overflow:hidden de .fk-table-card clipperait le menu déroulant). */
.fk-table-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 12px; }
/* Recherche : grandit pour partager la ligne avec les filtres, mais plafonnée
   (ne prend plus toute la largeur). */
.fk-search { width: auto; height: 40px; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.fk-select { height: 40px; padding: 0 12px; border: 1px solid var(--fk-border-strong); border-radius: 10px; background: var(--fk-surface); color: var(--fk-text); font-size: 14px; cursor: pointer; }
.fk-select:focus { outline: none; border-color: var(--fk-primary); box-shadow: var(--fk-shadow-focus); }

/* ---- Sélecteur de colonnes -------------------------------------------- */
.fk-colpicker { position: relative; display: inline-flex; }
.fk-colpicker > .fk-btn svg { margin-right: -2px; }
.fk-colpicker__count { font-variant-numeric: tabular-nums; color: var(--fk-text-3); font-weight: 600; }
.fk-colpicker__menu {
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
	min-width: 230px; background: var(--fk-surface);
	border: 1px solid var(--fk-border); border-radius: var(--fk-radius);
	box-shadow: var(--fk-shadow-lg); padding: 6px;
}
.fk-colpicker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fk-text-3); border-bottom: 1px solid var(--fk-border); margin-bottom: 4px; }
.fk-colpicker__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--fk-text); cursor: pointer; user-select: none; }
.fk-colpicker__item:hover { background: var(--fk-surface-2); }
.fk-colpicker__item.is-locked { color: var(--fk-text-3); cursor: default; }
.fk-colpicker__item input { accent-color: var(--fk-primary); width: 15px; height: 15px; flex: none; }

.fk-table-card { padding: 0; overflow: hidden; box-shadow: var(--fk-shadow-sm); }
/* Le SCROLL vit dans la table : le corps défile à l'intérieur, l'en-tête
   (thead collant) reste figé et la pagination reste sous la table. La toolbar
   et le titre de page au-dessus ne bougent pas → meilleure expérience. */
.fk-table-wrap { overflow: auto; max-height: calc(100dvh - 330px); overscroll-behavior: contain; }
@media (max-width: 600px) { .fk-table-wrap { max-height: calc(100dvh - 250px); } }
.fk-cellname { display: flex; flex-direction: column; gap: 1px; }
.fk-cellname strong { font-weight: 600; color: var(--fk-text); }
.fk-cellname span { font-size: 12.5px; color: var(--fk-text-3); }

.fk-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fk-border); background: var(--fk-surface); font-size: 13px; color: var(--fk-text-2); flex-wrap: wrap; }
.fk-pagination__info { color: var(--fk-text-3); }
.fk-pagination__info strong { color: var(--fk-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.fk-pagination__page { color: var(--fk-text-3); margin-right: 4px; font-variant-numeric: tabular-nums; }
.fk-pagination__btns { display: flex; align-items: center; gap: 8px; }

.fk-state { padding: 56px 16px; text-align: center; color: var(--fk-text-3); font-size: 14px; }

/* ---- Skeletons (chargement) ------------------------------------------ *
   Leurres « registre » : sobres, sans spinner. Un bloc neutre (surface-2) qui
   respire doucement vers surface-3 → perceptible en clair ET en sombre, sans
   clignotement. Dérivé des tokens → cohérent avec le reste. */
.fk-skel {
	display: inline-block;
	vertical-align: middle;
	background: var(--fk-surface-2);
	border-radius: var(--fk-radius-sm);
	animation: fk-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes fk-skel-pulse {
	0%, 100% { background-color: var(--fk-surface-2); }
	50%      { background-color: var(--fk-surface-3); }
}
/* Lignes fantômes dans une table : occupent la cellule, sans hover ni curseur. */
.fk-skel-rows td { vertical-align: middle; }
.fk-skel-rows tr:hover { background: transparent; cursor: default; }
/* Documenté : neutralise le battement sous mouvement réduit (bat la règle
   globale .fk-app * { animation-duration: .01ms !important }). */
@media (prefers-reduced-motion: reduce) {
	.fk-skel { animation: none !important; }
}

.fk-link { background: none; border: none; padding: 0; color: var(--fk-primary-ink); font: inherit; font-weight: 600; cursor: pointer; }
.fk-link:hover { text-decoration: underline; }
.fk-row-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Overlays */
.fk-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, .48); backdrop-filter: blur(2px); z-index: 9998; display: flex; }
.fk-modal { margin: auto; width: 100%; max-width: 540px; background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius-lg); box-shadow: var(--fk-shadow-lg); max-height: 88vh; display: flex; flex-direction: column; }
/* Formulaires de dossier : deux colonnes de champs date-heure et d'intitulés longs
   ne tiennent pas dans 540 px. La marge de 32 px garde la modale respirante sur
   un portable 13 pouces, où l'overlay ferait sinon bord à bord. */
.fk-modal--wide { max-width: min(780px, calc(100vw - 32px)); }
.fk-drawer { margin-left: auto; width: 100%; max-width: 480px; height: 100%; background: var(--fk-surface); border-left: 1px solid var(--fk-border); box-shadow: var(--fk-shadow-lg); display: flex; flex-direction: column; }
.fk-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--fk-border); }
.fk-panel__head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.fk-panel__body { padding: 22px; overflow: auto; }
.fk-panel__foot { padding: 16px 22px; border-top: 1px solid var(--fk-border); display: flex; gap: 10px; justify-content: flex-end; background: var(--fk-surface-2); }
.fk-x { background: none; border: none; cursor: pointer; color: var(--fk-text-3); font-size: 22px; line-height: 1; padding: 4px; border-radius: 8px; transition: color .12s ease, background .12s ease; }
.fk-x:hover { color: var(--fk-text); background: var(--fk-surface-2); }

/* Dialogue confirm/alert (remplace les natifs du navigateur) */
.fk-confirm {
	margin: auto; width: 100%; max-width: 420px;
	background: var(--fk-surface); border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-lg); box-shadow: var(--fk-shadow-lg);
	padding: 24px;
}
.fk-confirm--danger { border-top: 3px solid var(--fk-danger); }
.fk-confirm__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; color: var(--fk-text); }
.fk-confirm__msg { font-size: 14px; line-height: 1.55; color: var(--fk-text-2); margin: 0 0 22px; white-space: pre-line; }
.fk-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Formulaire */
.fk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Un <select> se dimensionne sur sa plus longue option : dans une grille, il
   élargit sa colonne au-delà du 1fr et pousse la colonne voisine hors de la
   modale. Dans un formulaire il suit la colonne, comme les autres champs.
   `min-width: 0` lève la taille minimale automatique des éléments de grille,
   sans laquelle aucune colonne ne peut se réduire sous son contenu. */
.fk-form-grid .fk-select { width: 100%; box-sizing: border-box; }
.fk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fk-field--full { grid-column: 1 / -1; }
.fk-field label { font-size: 13px; font-weight: 550; color: var(--fk-text-2); }
.fk-field__hint { font-size: 12.5px; line-height: 1.5; color: var(--fk-text-3); margin: 0; }
.fk-field__req { color: var(--fk-danger); font-weight: 700; }
/* Échec de soumission : posé contre le bouton qui vient d'échouer, jamais en tête
   d'un panneau défilable où il passerait hors écran. */
.fk-panel__foot .fk-panel__err { flex: 1 1 auto; min-width: 0; margin: 0; align-self: center; text-align: left; color: var(--fk-danger); font-size: 13px; line-height: 1.45; }
.fk-panel__foot .fk-btn { flex: 0 0 auto; white-space: nowrap; }

/* Choix exclusif présenté en cartes (mode de règlement) : la cible cliquable est
   toute la carte, le bouton radio reste la vraie commande pour le clavier. */
.fk-choice { display: grid; gap: 8px; }
.fk-choice__opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--fk-border); border-radius: 10px; cursor: pointer; font-weight: 400; transition: border-color .12s ease, background .12s ease; }
.fk-choice__opt:hover { border-color: var(--fk-text-3); }
.fk-choice__opt.is-active { border-color: var(--fk-primary); background: color-mix(in srgb, var(--fk-primary) 6%, transparent); }
.fk-choice__opt.is-disabled { opacity: .55; cursor: not-allowed; }
.fk-choice__opt input { accent-color: var(--fk-primary); margin-top: 2px; flex: 0 0 auto; }
.fk-choice__opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk-choice__opt strong { font-size: 14px; font-weight: 600; color: var(--fk-text); }
.fk-choice__opt em { font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--fk-text-3); }
.fk-choice__opt:focus-within { box-shadow: var(--fk-shadow-focus); }
.fk-error { color: var(--fk-danger); font-size: 13px; margin: 0 0 12px; }

/* Détail membre */
.fk-detail__name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.fk-detail__meta { font-size: 13px; color: var(--fk-text-3); margin: 3px 0 18px; }
.fk-deflist { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14px; margin: 0 0 20px; }
.fk-deflist dt { color: var(--fk-text-3); }
.fk-deflist dd { margin: 0; color: var(--fk-text); }
.fk-sub-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fk-text-3); margin: 22px 0 12px; }
.fk-chip-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--fk-border); font-size: 14px; }
.fk-hist { font-size: 13px; color: var(--fk-text-2); padding: 7px 0; border-bottom: 1px solid var(--fk-border); display: flex; justify-content: space-between; gap: 12px; }

@media (max-width: 600px) {
	.fk-form-grid { grid-template-columns: 1fr; }
}

/* ---- Sous-onglets de module (RPN, etc.) ------------------------------ */
.fk-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fk-border); margin-bottom: 20px; flex-wrap: wrap; }
.fk-subtab { padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--fk-text-2); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; outline: none; -webkit-appearance: none; appearance: none; transition: color .12s ease, border-color .12s ease; }
.fk-subtab:hover { color: var(--fk-text); }
.fk-subtab:focus-visible { box-shadow: var(--fk-shadow-focus); border-radius: 6px; }
.fk-subtab.is-active { color: var(--fk-primary-ink); border-bottom-color: var(--fk-primary); font-weight: 650; }
.fk-subtab__count { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fk-surface-2); color: var(--fk-text-2); border-radius: 999px; padding: 1px 7px; }
.fk-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.fk-statgrid .v { font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
.fk-statgrid .l { font-size: 12px; color: var(--fk-text-3); margin-top: 3px; }

/* ---- Finances : solde, reçu ------------------------------------------ */
.fk-balance { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; background: var(--fk-surface-2); border: 1px solid var(--fk-border); border-radius: 10px; margin-bottom: 12px; }
.fk-balance span { font-size: 13px; font-weight: 500; color: var(--fk-text-2); }
.fk-balance strong { font-size: 23px; font-weight: 700; letter-spacing: -.01em; color: var(--fk-text); }
.fk-balance strong.num--neg { color: var(--fk-danger); }

.fk-receipt { text-align: center; padding: 8px 0; }
.fk-receipt__org { font-size: 18px; font-weight: 700; color: var(--fk-primary-ink); }
.fk-receipt__no { font-size: 13px; font-family: var(--fk-mono); color: var(--fk-text-3); margin-top: 3px; }
.fk-receipt .fk-deflist { text-align: left; }

@media print {
	body * { visibility: hidden; }
	.fk-receipt, .fk-receipt * { visibility: visible; }
	.fk-receipt { position: fixed; inset: 0; margin: auto; height: max-content; }
}

/* ---- Rapports & exports ---------------------------------------------- */
.fk-result-list { display: flex; flex-direction: column; gap: 2px; }
.fk-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fk-report-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: var(--fk-surface); box-shadow: var(--fk-shadow-xs); transition: box-shadow .15s ease, border-color .15s ease; }
.fk-report-card:hover { box-shadow: var(--fk-shadow-md); border-color: var(--fk-border-strong); }
.fk-report-card__title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--fk-text); }
.fk-report-card__desc { font-size: 13px; color: var(--fk-text-3); margin-top: 5px; line-height: 1.55; }
.fk-report-card .fk-btn { align-self: flex-start; }

/* ---- Accès rapide (portail) ------------------------------------------ */
/* Tuiles de navigation iconées : la pastille reprend l'icône du rail de
   destination (même vocabulaire), le descriptif dit ce qu'on y trouve.
   La pastille PLEINE (--action) est réservée aux tuiles qui déclenchent
   une action (ex. ajouter un membre de famille) — navigation = teinte douce. */
.fk-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.fk-quick__tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; font: inherit; color: var(--fk-text); background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.fk-quick__tile:hover { border-color: var(--fk-border-strong); box-shadow: var(--fk-shadow-md); }
.fk-quick__tile:hover .fk-quick__chev { transform: translateX(2px); color: var(--fk-text-2); }
.fk-quick__tile:focus-visible { outline: none; box-shadow: var(--fk-shadow-focus); }
.fk-quick__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--fk-radius-sm); background: var(--fk-primary-soft); color: var(--fk-primary-ink); }
.fk-quick__ico .fk-nav__icon { width: 18px; height: 18px; }
.fk-quick__ico--action { background: var(--fk-primary); color: #fff; }
/* Sur fond sombre, la pastille d'action s'inverse : plaque claire teintée
   marque, glyphe presque noir — même logique que le bouton primaire. */
.fk-app[data-theme="dark"] .fk-quick__ico--action { background: color-mix(in srgb, var(--fk-primary) 45%, var(--fk-tint-base)); color: var(--fk-bg); }
.fk-quick__txt { flex: 1; min-width: 0; }
.fk-quick__label { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.fk-quick__desc { display: block; font-size: 12px; color: var(--fk-text-3); margin-top: 1px; line-height: 1.4; }
.fk-quick__chev { flex: none; width: 16px; height: 16px; color: var(--fk-text-3); transition: transform .15s ease, color .15s ease; }

/* ---- Mes demandes (portail) : fil de suivi ---------------------------- */
/* Une demande = un dossier déposé au bureau. Le rail vertical porte l'état
   (en attente / validée / refusée) et relie les demandes dans l'ordre du dépôt ;
   le corps montre EXACTEMENT ce qui a été demandé (avant → après). */
.fk-reqs { display: flex; flex-direction: column; }
.fk-req { display: grid; grid-template-columns: 26px 1fr; gap: 14px; }
.fk-req__rail { display: flex; flex-direction: column; align-items: center; }
.fk-req__node {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--fk-surface); color: var(--fk-text-3);
	border: 1.5px solid var(--fk-border-strong);
}
.fk-req__ico { width: 13px; height: 13px; }
.fk-req__line { flex: 1 1 auto; width: 2px; min-height: 8px; background: var(--fk-border); margin: 6px 0; border-radius: 2px; }
.fk-req.is-last .fk-req__line { display: none; }
.fk-req.is-pending .fk-req__node { color: var(--fk-warning); border-color: var(--fk-warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fk-warning) 13%, transparent); }
.fk-req.is-approved .fk-req__node { background: var(--fk-success); border-color: var(--fk-success); color: #fff; }
.fk-req.is-rejected .fk-req__node { color: var(--fk-danger); border-color: var(--fk-danger); }
.fk-app[data-theme="dark"] .fk-req.is-approved .fk-req__node { color: #07130D; }

.fk-req__body { min-width: 0; padding-bottom: 22px; }
.fk-req.is-last .fk-req__body { padding-bottom: 2px; }
.fk-req__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fk-req__title { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--fk-text); }
.fk-req__summary { margin: 8px 0 0; font-size: 13px; color: var(--fk-text-2); }
.fk-req__meta { margin: 8px 0 0; font-size: 12px; color: var(--fk-text-3); }

/* Détail : ce que la demande change, ligne à ligne. */
.fk-req__diff { margin-top: 10px; background: var(--fk-surface-2); border-radius: var(--fk-radius-sm); padding: 2px 12px; }
.fk-req__row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--fk-border); }
.fk-req__row:last-child { border-bottom: none; }
.fk-req__k { color: var(--fk-text-3); }
.fk-req__v { color: var(--fk-text); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.fk-req__old { color: var(--fk-text-3); font-weight: 400; text-decoration: line-through; }
.fk-req__arrow { color: var(--fk-text-3); margin: 0 6px; }
.fk-req__note { margin: 10px 0 0; padding-left: 10px; font-size: 13px; color: var(--fk-text-2); border-left: 2px solid var(--fk-danger); }
.fk-req__note strong { color: var(--fk-danger); }
/* Demande remplacée : ce n'est pas un refus — le filet et le libellé restent neutres. */
.fk-req__note--neutral { border-left-color: var(--fk-border); }
.fk-req__note--neutral strong { color: var(--fk-text-3); }

@media (max-width: 600px) {
	.fk-req__row { flex-direction: column; gap: 2px; }
	.fk-req__v { text-align: left; }
}

/* La page de connexion (logged-out) est rendue par templates/app.php avec sa
   propre identité « Charte » (navy + or, Spectral + Manrope) en CSS auto-contenu
   sous .fk-auth — miroir du parcours d'adhésion. Voir templates/app.php. */

/* ---- Accessibilité : mouvement réduit -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fk-app * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Bouton menu (mobile) -------------------------------------------- */
.fk-topbar__menu { display: none; }
.fk-sidebar__backdrop { display: none; }

/* ---- Responsive : le rail devient un tiroir coulissant --------------- */
@media (max-width: 782px) {
	.fk-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
	.fk-sidebar__collapse { display: none; }
	.fk-topbar { padding: 0 16px; }
	.fk-topbar__menu {
		display: inline-flex; align-items: center; justify-content: center;
		width: 38px; height: 38px; flex: none; border-radius: 9px;
		border: 1px solid var(--fk-border); background: var(--fk-surface);
		color: var(--fk-text-2); cursor: pointer;
	}
	.fk-topbar__menu:hover { background: var(--fk-surface-2); color: var(--fk-text); }
	.fk-topbar__menu:focus-visible { box-shadow: var(--fk-shadow-focus); }

	.fk-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0;
		width: min(84vw, 300px); z-index: 9997;
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: var(--fk-shadow-lg);
	}
	.fk-sidebar.is-open { transform: none; }

	.fk-sidebar__backdrop {
		display: block; position: fixed; inset: 0;
		background: rgba(10, 10, 10, .44); z-index: 9996;
		opacity: 0; pointer-events: none; transition: opacity .2s ease;
	}
	.fk-sidebar__backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ============ Assistant d'ingestion — « Registre d'ouverture » ============ */
.fk-ingest__lead {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
	margin: -2px 0 18px; font-size: 13px; color: var(--fk-text-3);
}
.fk-ingest__progress { font-weight: 650; color: var(--fk-text-2); font-family: var(--fk-mono); }
.fk-ingest__note { color: var(--fk-text-3); }

.fk-ledger { display: flex; flex-direction: column; }
.fk-ledger__step { display: grid; grid-template-columns: 40px 1fr; gap: 18px; }

/* Épine : nœud numéroté + connecteur qui se remplit */
.fk-ledger__rail { display: flex; flex-direction: column; align-items: center; }
.fk-ledger__node {
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--fk-mono); font-size: 14px; font-weight: 700;
	background: var(--fk-surface); color: var(--fk-text-3);
	border: 1.5px solid var(--fk-border-strong);
	transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.fk-ledger__line { flex: 1 1 auto; width: 2px; min-height: 14px; background: var(--fk-border); margin: 4px 0; transition: background .35s ease; }
.fk-ledger__line.is-filled { background: var(--fk-success); }

.fk-ledger__step.is-active .fk-ledger__node {
	background: var(--fk-surface); color: var(--fk-primary);
	border-color: var(--fk-gold);
	box-shadow: 0 0 0 4px var(--fk-gold-soft);
}
.fk-ledger__step.is-done .fk-ledger__node {
	background: var(--fk-success); color: #fff; border-color: var(--fk-success);
}
.fk-ledger__step.is-blocked .fk-ledger__node { opacity: .55; }

/* Panneau d'étape */
.fk-ledger__panel { padding-bottom: 18px; }
.fk-ledger__step:last-child .fk-ledger__panel { padding-bottom: 0; }
.fk-ledger__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fk-ledger__title { font-size: 16px; font-weight: 650; color: var(--fk-text); letter-spacing: -.01em; }
.fk-ledger__step.is-blocked .fk-ledger__title { color: var(--fk-text-3); }
.fk-ledger__desc { font-size: 13px; color: var(--fk-text-2); margin: 0 0 12px; max-width: 56ch; }
.fk-ledger__action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fk-ledger__report { margin-top: 10px; font-size: 13px; }
.fk-ledger__report.is-ok { color: var(--fk-text-2); }
.fk-ledger__report.is-err { color: var(--fk-danger); }
.fk-ledger__report b { color: var(--fk-text); }

/* Récap du classeur chargé */
.fk-ingest__sheets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fk-ingest__sheet {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 6px 11px; border-radius: var(--fk-radius-sm);
	background: var(--fk-surface-2); border: 1px solid var(--fk-border);
	font-size: 12.5px; color: var(--fk-text-2);
}
.fk-ingest__sheet b { font-family: var(--fk-mono); font-size: 14px; color: var(--fk-text); }
.fk-ingest__file { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fk-text-2); }

/* Input fichier : bouton natif stylé en bouton secondaire (input natif intact = accessible) */
.fk-app input[type="file"].fk-input {
	height: auto; padding: 7px 12px; font-size: 13px; color: var(--fk-text-3);
	display: inline-flex; align-items: center; max-width: 420px;
}
.fk-app input[type="file"].fk-input::file-selector-button {
	margin-right: 12px; padding: 8px 14px;
	background: var(--fk-surface); color: var(--fk-text);
	border: 1px solid var(--fk-border-strong); border-radius: 8px;
	font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
	box-shadow: var(--fk-shadow-xs);
	transition: background .15s ease, border-color .15s ease;
}
.fk-app input[type="file"].fk-input::file-selector-button:hover {
	background: var(--fk-surface-2); border-color: var(--fk-text-3);
}

@media (prefers-reduced-motion: reduce) {
	.fk-ledger__node, .fk-ledger__line { transition: none; }
}

/* ============ Composer e-mail — canvas pleine page, deux volets ===========
   Volet GAUCHE : composition (destinataires · objet · éditeur WYSIWYG léger).
   Volet DROIT : aperçu FIDÈLE de l'e-mail tel que reçu — il reproduit
   volontairement les couleurs FIXES du gabarit Mailer::wrap() (un e-mail ne
   peut pas utiliser nos variables CSS), d'où les hex en dur ci-dessous. */
.fk-compose__bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.fk-compose__spacer { flex: 1 1 auto; }
.fk-compose__title { font-family: var(--fk-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--fk-text); }
.fk-compose__sub { font-size: 12.5px; color: var(--fk-text-3); margin-top: 2px; }
.fk-compose__flash {
	font-size: 13px; color: var(--fk-success);
	background: color-mix(in srgb, var(--fk-success) 10%, var(--fk-surface));
	border: 1px solid color-mix(in srgb, var(--fk-success) 28%, var(--fk-surface));
	border-radius: var(--fk-radius-sm); padding: 9px 13px; margin: 0 0 14px;
}

.fk-compose__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fk-compose__pane { display: flex; flex-direction: column; gap: 18px; }
.fk-compose__preview { position: sticky; top: 0; }
.fk-compose__previewhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fk-compose__previewhead .lbl { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fk-text-3); }
.fk-compose__previewhead .who { font-size: 12px; color: var(--fk-text-3); }
.fk-compose__hint { font-size: 12px; color: var(--fk-text-3); line-height: 1.55; margin: 0; }

@media (max-width: 1040px) {
	.fk-compose__grid { grid-template-columns: 1fr; }
	.fk-compose__preview { position: static; }
}

/* ---- Éditeur WYSIWYG -------------------------------------------------- */
.fk-editorwrap {
	border: 1px solid var(--fk-border-strong); border-radius: var(--fk-radius);
	background: var(--fk-surface); overflow: hidden;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.fk-editorwrap:focus-within { border-color: var(--fk-primary); box-shadow: var(--fk-shadow-focus); }
.fk-compose__toolbar { display: flex; align-items: center; gap: 2px; padding: 6px; background: var(--fk-surface-2); border-bottom: 1px solid var(--fk-border); flex-wrap: wrap; }
.fk-compose__tool {
	width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid transparent; border-radius: 7px; background: transparent;
	color: var(--fk-text-2); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.fk-compose__tool:hover { background: var(--fk-surface); border-color: var(--fk-border); color: var(--fk-text); }
.fk-compose__tool.is-active { background: var(--fk-primary-soft); border-color: var(--fk-primary-soft-2); color: var(--fk-primary-ink); }
.fk-compose__tool:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-compose__tool svg { width: 17px; height: 17px; }
.fk-compose__toolsep { width: 1px; height: 20px; background: var(--fk-border); margin: 0 5px; flex: none; }

.fk-editor { min-height: 220px; max-height: 440px; overflow: auto; padding: 14px 16px; font-size: 14px; line-height: 1.65; color: var(--fk-text); }
.fk-editor:focus { outline: none; }
.fk-editor.is-empty::before { content: attr(data-ph); color: var(--fk-text-3); pointer-events: none; }
.fk-editor p { margin: 0 0 10px; }
.fk-editor h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.fk-editor ul { list-style: disc; padding-left: 22px; margin: 0 0 10px; }
.fk-editor li { margin: 2px 0; }
.fk-editor a { color: var(--fk-primary-ink); text-decoration: underline; }
.fk-editor strong, .fk-editor b { font-weight: 700; }

.fk-linkbar { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--fk-surface-2); border-top: 1px solid var(--fk-border); }
.fk-linkbar .fk-input { flex: 1 1 auto; }

.fk-tokens { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 11px; background: var(--fk-surface-2); border-top: 1px solid var(--fk-border); }
.fk-tokens__lbl { font-size: 12px; color: var(--fk-text-3); }
.fk-token {
	display: inline-flex; align-items: center; height: 27px; padding: 0 10px;
	border: 1px dashed var(--fk-border-strong); border-radius: 999px; background: var(--fk-surface);
	color: var(--fk-text-2); font-family: var(--fk-mono); font-size: 12px; cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.fk-token:hover { border-color: var(--fk-primary); border-style: solid; color: var(--fk-primary-ink); background: var(--fk-primary-soft); }
.fk-token:focus-visible { box-shadow: var(--fk-shadow-focus); }

/* ---- Aperçu e-mail (couleurs FIXES = miroir de Mailer::wrap()) -------- */
.fk-mailframe { background: #f4f5f7; border: 1px solid var(--fk-border); border-radius: var(--fk-radius-lg); padding: 22px; }
.fk-app[data-theme="dark"] .fk-mailframe { background: #0e0e0e; }
.fk-mailmeta { max-width: 560px; margin: 0 auto 12px; display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.fk-mailmeta__from { font-size: 12px; color: #8b94a3; }
.fk-mailmeta__subj { font-size: 14px; font-weight: 650; color: #1f2430; letter-spacing: -.01em; }
.fk-app[data-theme="dark"] .fk-mailmeta__subj { color: #e9edf2; }

.fk-mailcard { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #e6e8eb; border-radius: 12px; overflow: hidden; box-shadow: var(--fk-shadow-sm); }
.fk-mailcard__head { background: var(--fk-primary); padding: 18px 24px; }
.fk-mailcard__org { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.fk-mailcard__body { padding: 24px; font-size: 15px; line-height: 1.6; color: #1f2430; }
.fk-mailcard__body--empty { color: #9aa3b2; font-style: italic; }
.fk-mailcard__body p { margin: 0 0 12px; }
.fk-mailcard__body h3 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: #1f2430; }
.fk-mailcard__body ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.fk-mailcard__body li { margin: 3px 0; }
.fk-mailcard__body a { color: var(--fk-primary); text-decoration: underline; }
.fk-mailcard__body strong, .fk-mailcard__body b { font-weight: 700; }
.fk-mailcard__foot { padding: 16px 24px; border-top: 1px solid #eef0f2; color: #8b94a3; font-size: 12px; line-height: 1.5; }

@media (max-width: 600px) {
	.fk-compose__bar .fk-btn { flex: 1 1 auto; }
	.fk-mailframe { padding: 14px; }
}

/* ============ Paramètres système — rail de sections + panneau ============= */
/* Shell deux colonnes : navigation verticale (gauche) + panneau actif (droite). */
.fk-settings { display: grid; grid-template-columns: 264px 1fr; gap: 20px; align-items: start; }

/* --- Rail de sections (gauche) --- */
.fk-settings__rail { position: sticky; top: calc(var(--fk-topbar-h) + 16px); }
.fk-settings__eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--fk-text-3); margin: 2px 0 10px; padding-left: 4px;
}
.fk-secnav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fk-secnav__item {
	display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
	padding: 11px 12px; border: 1px solid transparent; border-radius: var(--fk-radius);
	background: transparent; cursor: pointer; color: var(--fk-text-2);
	-webkit-appearance: none; appearance: none; outline: none;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.fk-secnav__item:hover { background: var(--fk-surface-2); color: var(--fk-text); }
.fk-secnav__item:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-secnav__item.is-active {
	background: var(--fk-surface); border-color: var(--fk-border);
	box-shadow: var(--fk-shadow-xs); color: var(--fk-text);
}
.fk-secnav__icon {
	flex: none; width: 34px; height: 34px; display: grid; place-items: center;
	border-radius: var(--fk-radius-sm); background: var(--fk-surface-2);
	border: 1px solid var(--fk-border); color: var(--fk-text-3);
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.fk-secnav__icon svg { width: 18px; height: 18px; }
.fk-secnav__item.is-active .fk-secnav__icon {
	background: var(--fk-primary-soft); border-color: var(--fk-primary-soft-2); color: var(--fk-primary);
}
.fk-secnav__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk-secnav__title { font-size: 14px; font-weight: 600; line-height: 1.25; }
.fk-secnav__sub { font-size: 12px; line-height: 1.35; color: var(--fk-text-3); }

/* --- Panneau actif (droite) --- */
.fk-settings__panel { margin: 0; }
.fk-panel-head { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--fk-border); }
.fk-panel-head__icon {
	flex: none; width: 44px; height: 44px; display: grid; place-items: center;
	border-radius: var(--fk-radius); background: var(--fk-primary-soft);
	border: 1px solid var(--fk-primary-soft-2); color: var(--fk-primary);
}
.fk-panel-head__icon svg { width: 22px; height: 22px; }
.fk-panel-head__text h3 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--fk-text); margin: 0; }
.fk-panel-head__text p { font-size: 13px; color: var(--fk-text-3); margin: 3px 0 0; }
.fk-set-saved { font-size: 12px; font-weight: 600; color: var(--fk-success); }

/* Empilement : rail au-dessus, sous-titres masqués, items en rangée scrollable. */
@media (max-width: 860px) {
	.fk-settings { grid-template-columns: 1fr; gap: 16px; }
	.fk-settings__rail { position: static; }
	.fk-secnav { flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.fk-secnav__item { flex: none; }
	.fk-secnav__sub { display: none; }
}

/* Barre d'enregistrement : message à gauche, action à droite. */
.fk-set-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fk-border); flex-wrap: wrap; }
.fk-set-msg { font-size: 13px; margin-right: auto; }
.fk-set-msg.is-ok { color: var(--fk-success); }
.fk-set-msg.is-err { color: var(--fk-danger); }

/* Champ couleur : pastille native + valeur hex en mono. */
.fk-colorfield { display: flex; align-items: center; gap: 10px; }
.fk-colorfield input[type="color"] {
	width: 44px; height: 42px; flex: none; padding: 4px; cursor: pointer;
	background: var(--fk-surface); border: 1px solid var(--fk-border-strong); border-radius: var(--fk-radius);
}
.fk-colorfield input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fk-colorfield input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.fk-colorfield .fk-mono { text-transform: uppercase; }

/* Interrupteur (case à cocher stylée) — accessible : vraie checkbox masquée. */
.fk-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; height: 42px; }
.fk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fk-switch__track {
	position: relative; width: 40px; height: 23px; flex: none;
	background: var(--fk-surface-3); border: 1px solid var(--fk-border-strong);
	border-radius: 999px; transition: background .15s ease, border-color .15s ease;
}
.fk-switch__thumb {
	position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
	background: var(--fk-surface); border-radius: 50%; box-shadow: var(--fk-shadow-xs);
	transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.fk-switch input:checked + .fk-switch__track { background: var(--fk-primary); border-color: var(--fk-primary); }
.fk-switch input:checked + .fk-switch__track .fk-switch__thumb { transform: translateX(17px); }
.fk-switch input:focus-visible + .fk-switch__track { box-shadow: var(--fk-shadow-focus); }
.fk-switch__text { font-size: 13.5px; color: var(--fk-text-2); }

/* ============ Bandeau de consultation « view-as » =======================
   Pilule fixe en bas, traitée comme un overlay système (encre sombre + accent
   OR de la marque, indépendant du thème) : impossible d'oublier qu'on consulte
   l'espace d'un membre. Sortie en un clic. */
.fk-impersonate {
	position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
	z-index: 9990; display: flex; align-items: center; gap: 12px;
	max-width: calc(100vw - 24px);
	padding: 8px 8px 8px 16px; border-radius: 999px;
	background: #1b2230; color: #fff;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: var(--fk-shadow-lg);
	animation: fk-imp-in .26s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes fk-imp-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fk-impersonate__eye { display: inline-flex; color: var(--fk-gold); flex: none; }
.fk-impersonate__eye svg { width: 18px; height: 18px; }
.fk-impersonate__txt { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-impersonate__txt strong { font-weight: 700; }
.fk-impersonate__txt .fk-mono { color: rgba(255, 255, 255, .65); }
.fk-impersonate__quit {
	flex: none; height: 32px; padding: 0 15px; border: none; border-radius: 999px;
	background: var(--fk-gold); color: #fff; font-size: 13px; font-weight: 650; cursor: pointer;
	transition: background .14s ease;
}
.fk-impersonate__quit:hover { background: var(--fk-gold-600); }
.fk-impersonate__quit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(216, 20, 23, .5); }
.fk-impersonate__quit:disabled { opacity: .6; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .fk-impersonate { animation: none; } }

/* ============ Bibliothèque de documents ==================================
   Une pastille d'extension sert de repère typé (le format se lit avant le
   titre), et les actions restent secondaires : « consulter » avant
   « télécharger », l'inverse des interfaces de partage de fichiers. */

/* Pastille de format — même objet dans la table, la fiche et le portail. */
.fk-doc-cell__ext {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 26px; padding: 0 7px;
	border-radius: 7px; background: var(--fk-surface-2); border: 1px solid var(--fk-border);
	font-family: var(--fk-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
	color: var(--fk-text-2); text-transform: uppercase;
}
.fk-doc-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* Table des documents : le titre a la place, le reste ne se coupe jamais. */
.fk-table--docs th { white-space: nowrap; }
.fk-table--docs td:first-child { width: 34%; min-width: 240px; }
.fk-table--docs td:nth-child(2) { min-width: 155px; }
.fk-table--docs td:nth-child(3),
.fk-table--docs td:nth-child(4),
.fk-table--docs td:nth-child(5) { white-space: nowrap; }
.fk-table--docs td:last-child { width: 1%; }

/* Fiche du fichier courant, dans le tiroir de modification. */
.fk-doc-file {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 13px 14px; margin-bottom: 20px;
	background: var(--fk-surface-2); border: 1px solid var(--fk-border); border-radius: 10px;
}
.fk-doc-file__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 12rem; min-width: 0; }
.fk-doc-file__body strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-doc-file__body .fk-mono { font-size: 11.5px; }

/* Bouton « parcourir » : le champ fichier reste focalisable mais invisible,
   l'étiquette porte l'apparence du bouton. */
.fk-filebtn { position: relative; overflow: hidden; cursor: pointer; }
.fk-filebtn__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fk-filebtn:focus-within { box-shadow: var(--fk-shadow-focus); }

/* Zone de dépôt : la cible cliquable EST l'étiquette (l'input reste masqué
   mais focalisable, donc accessible au clavier). */
.fk-dropzone {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 26px 18px; margin-bottom: 20px; text-align: center; cursor: pointer;
	border: 1.5px dashed var(--fk-border-strong); border-radius: var(--fk-radius);
	background: var(--fk-surface-2);
	transition: border-color .14s ease, background .14s ease;
}
.fk-dropzone:hover { border-color: var(--fk-primary); background: var(--fk-surface-3); }
.fk-dropzone.is-filled { border-style: solid; border-color: var(--fk-primary); background: color-mix(in srgb, var(--fk-primary) 6%, var(--fk-surface)); }
.fk-dropzone__input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fk-dropzone:focus-within { border-color: var(--fk-primary); box-shadow: var(--fk-shadow-focus); }
.fk-dropzone__ico { width: 26px; height: 26px; color: var(--fk-text-3); }
.fk-dropzone.is-filled .fk-dropzone__ico { color: var(--fk-primary); }
.fk-dropzone__label { font-size: 14px; font-weight: 600; color: var(--fk-text); word-break: break-word; }
.fk-dropzone__hint { font-size: 12.5px; color: var(--fk-text-3); }

/* Aide sous un champ (texte explicatif, non bloquant). */
.fk-hint { font-size: 12.5px; line-height: 1.55; color: var(--fk-text-3); margin: 6px 0 0; }

/* Liseuse plein cadre : le document occupe la place, le châssis s'efface. */
.fk-viewer {
	margin: auto; width: 100%; max-width: 940px; height: min(88vh, 900px);
	background: var(--fk-surface); border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-lg); box-shadow: var(--fk-shadow-lg);
	display: flex; flex-direction: column; overflow: hidden;
}
.fk-viewer__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk-viewer__head h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-viewer__meta { font-size: 11.5px; color: var(--fk-text-3); }
.fk-viewer__tools { display: flex; align-items: center; gap: 10px; flex: none; }
.fk-viewer__body {
	flex: 1; min-height: 0; padding: 14px; background: var(--fk-surface-2);
	display: flex; align-items: center; justify-content: center;
}
.fk-viewer__frame { width: 100%; height: 100%; border: none; border-radius: 8px; background: #fff; }
.fk-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.fk-viewer__foot {
	flex: none; padding: 10px 16px; font-size: 12.5px; color: var(--fk-text-3);
	background: var(--fk-surface); border-top: 1px solid var(--fk-border);
}

/* Liste du portail membre : une ligne = un document, actions à droite. */
.fk-doclist { display: flex; flex-direction: column; gap: 10px; }
.fk-doccard {
	display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
	padding: 14px 15px; border: 1px solid var(--fk-border); border-radius: var(--fk-radius);
	background: var(--fk-surface); transition: border-color .14s ease, box-shadow .14s ease;
}
.fk-doccard:hover { border-color: var(--fk-border-strong); box-shadow: var(--fk-shadow-xs); }
.fk-doccard__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 14rem; min-width: 0; }
.fk-doccard__title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--fk-text); }
.fk-doccard__desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fk-text-2); }
.fk-doccard__meta { margin: 0; font-size: 11.5px; color: var(--fk-text-3); }
.fk-doccard__actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }

/* Icône dans un bouton texte + variante compacte du bouton-icône. */
.fk-btn__ico { width: 15px; height: 15px; flex: none; }
.fk-iconbtn--sm { width: 32px; height: 32px; border-radius: 8px; }
.fk-iconbtn--sm svg { width: 16px; height: 16px; }
/* L'intention destructrice n'apparaît qu'au survol / focus. */
.fk-iconbtn--danger:hover { color: var(--fk-danger); border-color: color-mix(in srgb, var(--fk-danger) 45%, var(--fk-surface)); background: color-mix(in srgb, var(--fk-danger) 10%, var(--fk-surface)); }
.fk-iconbtn--danger:focus-visible { color: var(--fk-danger); }

/* Les zones de texte gardent la hauteur dictée par `rows` (la règle .fk-input
   impose 42px, taillée pour les champs d'une ligne). */
textarea.fk-input { height: auto; padding: 10px 13px; line-height: 1.55; resize: vertical; }

@media (max-width: 640px) {
	.fk-viewer { height: 92vh; max-width: none; border-radius: 0; }
	.fk-doccard__actions { width: 100%; }
	.fk-doccard__actions .fk-btn { flex: 1; justify-content: center; }
}

/* ── Onglets de panneau (détail événement, etc.) ─────────────────────── */
.fk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--fk-border); margin-top: 4px; }
.fk-tab {
	appearance: none; background: none; border: 0; cursor: pointer;
	padding: 9px 13px; font: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--fk-text-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
	transition: color .15s, border-color .15s;
}
.fk-tab:hover { color: var(--fk-text-1); }
.fk-tab.is-active { color: var(--fk-primary-ink); border-bottom-color: var(--fk-primary); }
.fk-tab:focus-visible { outline: 2px solid var(--fk-primary); outline-offset: -2px; border-radius: 4px; }

/* Case à cocher avec libellé (formulaires) */
.fk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fk-text-2); cursor: pointer; padding: 8px 0; }
.fk-check input { accent-color: var(--fk-primary); width: 15px; height: 15px; }

/* ══ Recette « compte ADMIN » (docs/PLAN-RECETTE-ADMIN.md) ═══════════════
   Camembert cliquable (#1/#2), filtres avancés + sélection (#3/#4),
   renouvellements (#6/#7), état financier (#5).
   ───────────────────────────────────────────────────────────────────── */

/* ---- Palette de graphe -------------------------------------------------
   Les quatre statuts reprennent les HUES des cartes KPI (vert / ambre /
   bleu / rose) — le camembert et la carte parlent donc la même langue.
   Le PAS de chaque teinte, lui, n'est pas choisi à l'œil : il a été calé
   pour passer la séparation daltonienne ET la bande de clarté dans les
   deux thèmes (vert↔ambre ΔE 6,2 protanopie ; pire paire vision normale
   ΔE 20,0). Les avertissements de contraste restants sont couverts par
   l'encodage secondaire imposé plus bas : libellé + effectif + part sur
   chaque entrée de légende, et filet de fond entre les parts.
   Ne pas retoucher ces valeurs sans repasser le validateur.             */
.fk-app {
	--fk-chart-active:    #16A34A;
	--fk-chart-pending:   #D97706;
	--fk-chart-inactive:  #2563EB;
	--fk-chart-suspended: #BE123C;
}

/* ---- Camembert de répartition (#1) ------------------------------------ */
.fk-donut {
	/* La légende est bornée : étirée sur toute la largeur d'une carte de 1 100 px,
	   l'effectif et la part finissent à l'autre bout de l'écran et l'œil doit
	   traverser le vide pour relier une couleur à son chiffre. */
	display: grid; grid-template-columns: auto minmax(0, 400px); gap: 28px; align-items: center;
	justify-content: start;
}
.fk-donut__plot { position: relative; width: 176px; height: 176px; flex: none; }
.fk-donut__svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
/* Filet de la couleur du fond entre deux parts : la frontière reste lisible
   même quand deux teintes voisines se ressemblent en vision daltonienne. */
.fk-donut__arc { fill: none; stroke-width: 22; stroke: currentColor; transition: opacity .15s ease, stroke-width .15s ease; }
.fk-donut__arc--track { stroke: var(--fk-surface-2); }
.fk-donut__slice { cursor: pointer; outline: none; }
.fk-donut__slice .fk-donut__arc { paint-order: stroke; }
.fk-donut__slice:hover .fk-donut__arc,
.fk-donut__slice:focus-visible .fk-donut__arc { stroke-width: 27; }
.fk-donut__slice:focus-visible .fk-donut__arc { opacity: .85; }
.fk-donut.is-dimmed .fk-donut__slice:not(.is-hovered) .fk-donut__arc { opacity: .35; }
.fk-donut__center {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.fk-donut__total { font-family: var(--fk-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fk-text); font-variant-numeric: tabular-nums; }
.fk-donut__unit { font-size: 12px; color: var(--fk-text-3); margin-top: 5px; }

/* La légende EST la surface d'interaction : des cibles de 40 px, pas des
   arcs de 22 px. Chaque ligne mène à la liste filtrée correspondante. */
.fk-donut__legend { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fk-legrow {
	display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
	width: 100%; padding: 9px 10px; border: 0; border-radius: var(--fk-radius-sm);
	background: transparent; font: inherit; color: var(--fk-text-2); text-align: left; cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.fk-legrow:hover { background: var(--fk-surface-2); color: var(--fk-text); }
.fk-legrow:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-legrow__dot { width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.fk-legrow__label { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fk-text); }
.fk-legrow__value { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fk-text); }
.fk-legrow__share { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fk-text-3); min-width: 38px; text-align: right; }
.fk-legrow[aria-disabled="true"] { cursor: default; opacity: .55; }
.fk-legrow[aria-disabled="true"]:hover { background: transparent; }

/* Carte KPI devenue bouton : elle mène à sa liste filtrée (#2). */
.fk-card--link { cursor: pointer; text-align: left; width: 100%; font: inherit; appearance: none; transition: box-shadow .14s ease, transform .14s ease; }
.fk-card--link:hover { box-shadow: var(--fk-shadow-md); }
.fk-card--link:active { transform: translateY(1px); }
.fk-card--link:focus-visible { box-shadow: var(--fk-shadow-focus); }

@media (max-width: 720px) {
	.fk-donut { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
	.fk-donut__legend { width: 100%; }
}

/* ---- Filtres avancés de la liste des membres (#3) --------------------- */
.fk-filters { border: 1px solid var(--fk-border); border-radius: var(--fk-radius); background: var(--fk-surface); margin-bottom: 14px; overflow: hidden; }
.fk-filters__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.fk-filters__toggle {
	appearance: none; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--fk-text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px;
}
.fk-filters__toggle:focus-visible { box-shadow: var(--fk-shadow-focus); }
.fk-filters__chev { transition: transform .15s ease; }
.fk-filters__toggle[aria-expanded="true"] .fk-filters__chev { transform: rotate(90deg); }
.fk-filters__count { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fk-primary-soft-2); color: var(--fk-primary-ink); border-radius: 999px; padding: 2px 8px; }
.fk-filters__spacer { flex: 1; }
.fk-filters__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; padding: 4px 14px 16px; border-top: 1px solid var(--fk-border); }
.fk-filters__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fk-filters__label { font-size: 12px; font-weight: 600; color: var(--fk-text-2); }
.fk-filters__range { display: flex; align-items: center; gap: 6px; }
.fk-filters__range .fk-input { min-width: 0; }
.fk-filters__sep { color: var(--fk-text-3); font-size: 12px; }
.fk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.fk-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px;
	background: var(--fk-primary-soft); border: 1px solid color-mix(in srgb, var(--fk-primary) 22%, var(--fk-surface));
	color: var(--fk-primary-ink); font-size: 12.5px; font-weight: 500;
}
.fk-chip__x { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 999px; opacity: .7; }
.fk-chip__x:hover { opacity: 1; background: color-mix(in srgb, var(--fk-primary) 14%, transparent); }
.fk-chip__x:focus-visible { box-shadow: var(--fk-shadow-focus); opacity: 1; }

/* ---- Barre de sélection → communication (#4) -------------------------- */
.fk-selbar {
	position: sticky; bottom: 14px; z-index: 5;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 14px 0 0; padding: 11px 14px;
	background: var(--fk-primary-ink); color: #fff;
	border-radius: var(--fk-radius); box-shadow: var(--fk-shadow-lg);
}
.fk-selbar__count { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fk-selbar__spacer { flex: 1; }
.fk-selbar__link { appearance: none; border: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 2px; border-radius: 4px; opacity: .9; }
.fk-selbar__link:hover { opacity: 1; }
.fk-selbar__link:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.4); opacity: 1; }
.fk-selbar .fk-btn { background: #fff; color: var(--fk-primary-ink); border-color: #fff; }
.fk-selbar .fk-btn:hover { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.fk-tick { width: 16px; height: 16px; accent-color: var(--fk-primary); cursor: pointer; vertical-align: middle; }
.fk-table td.fk-td--tick, .fk-table th.fk-th--tick { width: 34px; padding-right: 0; }

/* ---- Renouvellements & état financier (#5, #6, #7) -------------------- */
.fk-noticebar {
	display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
	border: 1px solid var(--fk-border); border-left: 3px solid var(--fk-warning);
	border-radius: var(--fk-radius); background: var(--fk-surface);
}
.fk-noticebar--danger { border-left-color: var(--fk-danger); }
.fk-noticebar--ok { border-left-color: var(--fk-success); }
.fk-noticebar__txt { flex: 1; font-size: 13.5px; color: var(--fk-text-2); line-height: 1.5; }
.fk-noticebar__txt strong { color: var(--fk-text); }
.fk-pricegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fk-pricecard { border: 1px solid var(--fk-border); border-radius: var(--fk-radius-sm); padding: 12px 14px; background: var(--fk-surface-2); }
.fk-pricecard__label { font-size: 12.5px; color: var(--fk-text-2); }
.fk-pricecard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 7px; }
.fk-pricecard__row span { font-size: 12.5px; color: var(--fk-text-3); }
.fk-pricecard__row strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.fk-ledger { width: 100%; border-collapse: collapse; }
/* Le libellé prend la place restante, les colonnes chiffrées gardent la leur :
   sans respiration horizontale, les en-têtes se touchent et se lisent comme un
   seul mot (« POSTE1 PERSONNECOUPLE… »). */
.fk-ledger th:first-child, .fk-ledger td:first-child { width: 100%; padding-left: 0; }
.fk-ledger th { text-align: left; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--fk-text-3); padding: 8px 0 8px 20px; border-bottom: 1px solid var(--fk-border); white-space: nowrap; }
.fk-ledger td { padding: 9px 0 9px 20px; border-bottom: 1px solid var(--fk-border); font-size: 13.5px; }
.fk-ledger td.num, .fk-ledger th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fk-ledger tr:last-child td { border-bottom: 0; }
.fk-ledger tr.is-total td { font-weight: 700; border-top: 1px solid var(--fk-border-strong); border-bottom: 0; }
.fk-ledger__empty { padding: 14px 0; color: var(--fk-text-3); font-size: 13.5px; }

/* ---- Champ date + effacement explicite ---------------------------------
   Le sélecteur natif n'offre pas partout de bouton d'effacement (et Chrome le
   retire des champs requis) : le bouton est donc à nous, toujours au même endroit. */
.fk-dateinput { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.fk-dateinput .fk-input { flex: 1 1 auto; min-width: 0; }
.fk-dateinput__clear {
	flex: 0 0 auto;
	padding: 0 10px;
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-sm, 6px);
	background: var(--fk-surface);
	color: var(--fk-text-3);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.fk-dateinput__clear:hover:not(:disabled) { background: var(--fk-surface-2); color: var(--fk-text-1); }
.fk-dateinput__clear:disabled { opacity: .45; cursor: default; }