@charset "UTF-8";
/*
	The Hublot design system (lot 13), from the board validated on 2026-11-05
	(Docs/Saas/planche-interactive/hublot.css): navy and bright copper (F8), titles in Bricolage
	Grotesque, text in Source Sans 3. Load fonts/fonts.css first, this sheet next, then the
	audience's own sheet, which may rename these tokens but never redefines their values.
	Dark mode hangs on <html data-theme="dark">, set before the first paint by theme.js from the
	choice of the person ("auto" resolved against the system, light when nothing says, F6), never
	on a prefers-color-scheme query: forcing light on a dark system must win. The dark theme stays
	a lifted navy, never black (2026-11-03).
	Only names that cannot clash with Bootstrap live here: tokens, typography and the hull.
*/

:root {
	color-scheme: light;
	--ground: #F1F6F8; --surface: #FFFFFF; --raised: #EDF3F6;
	--ink: #0F2A3D; --ink2: #35505F; --ink3: #4E6877;
	--line: #D3E0E7; --line-strong: #6C8696;
	--primary: #15689B; --primary-hover: #115884; --on-primary: #FFFFFF;
	--cta: #EE7022; --cta-hover: #F58A45; --on-cta: #0F2A3D;
	--copper: #A8470E; --copper-deco: #D9590F;
	--ok: #0E6B62; --ok-soft: #DFF2EE; --warn: #855708; --warn-soft: #F9EDD3;
	--danger: #AF2E1C; --danger-soft: #FAE5E0; --info: #15689B; --info-soft: #E0EEF7;
	--focus: #15689B;
	--hull: #1F5678; --hull-2: #2A6A91; --hull-line: #3C7699; --hull-tick: #9CBDD1;
	--hull-ink: #FFFFFF; --hull-ink2: #E2EDF3; --hull-copper: #FFC08E; --on-copper: #0F2A3D;
	--sea: #0F3550; --ring: #F48A3C; --data: #8AD0F3; --tower-b: #FFA25C;
	--glass: #1A5578; --ring-2: #B95A18; --rivet: #FFD9BA; --on-glass: #FFFFFF;
	/* The four hues of the charts, in this order (board; validated side by side, light and dark). */
	--c1: #1B78B8; --c2: #D2691E; --c3: #12917F; --c4: #7A5BA8;
	--font-title: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
	--font-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--ground: #14324A; --surface: #1B3E57; --raised: #245069;
	--ink: #F2F7FA; --ink2: #D3E1E9; --ink3: #B9CCD8;
	--line: #3A6480; --line-strong: #86A8BC;
	--primary: #8FD0F3; --primary-hover: #AEDDF6; --on-primary: #0B2A3E;
	--cta: #F5842F; --cta-hover: #FF9D52; --on-cta: #0B2A3E;
	--copper: #FFB27D; --copper-deco: #F08A3C;
	--ok: #7FDCCB; --ok-soft: #16504C; --warn: #F2CA76; --warn-soft: #4A3C18;
	--danger: #FBB5A4; --danger-soft: #57291F; --info: #8FD0F3; --info-soft: #1C5272;
	--focus: #FFB27D;
	--hull: #0F2A3F; --hull-2: #1B3E57; --hull-line: #2E5570; --hull-tick: #86A8BC;
	--hull-ink: #F2F7FA; --hull-ink2: #D3E1E9; --hull-copper: #FFB27D;
	--c1: #3E96CC; --c2: #C9752B; --c3: #1F9B8B; --c4: #9A82D0;
}

/* ---------- typography ---------- */

body {
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-title);
	letter-spacing: -.01em;
	text-wrap: balance;
}

/* ---------- hull: the navigation of every audience, on the left ---------- */

.hull {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 16px;
	background: var(--hull);
	color: var(--hull-ink);
	border-right: 1px solid var(--hull-line);
	--focus: var(--hull-copper);
}

.hull-head {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.hull-head:hover {
	color: inherit;
}

.hull-head:focus-visible {
	outline: 2px solid var(--hull-copper);
	outline-offset: 2px;
}

.hull-title {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.05;
}

.hull-sub {
	display: block;
	margin-top: 2px;
	color: var(--hull-ink2);
	font-family: var(--font-text);
	font-weight: 400;
	font-size: 14px;
}

/* The depth gauge: the current page carries a copper rivet on the line. */
.depth {
	display: flex;
	flex-direction: column;
	margin-left: 12px;
	border-left: 1px solid var(--hull-tick);
}

.depth a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 12px;
	color: var(--hull-ink2);
	text-decoration: none;
}

.depth a:hover {
	background: var(--hull-2);
	color: var(--hull-ink);
}

.depth a:focus-visible {
	outline: 2px solid var(--hull-copper);
	outline-offset: -2px;
}

.depth a.active,
.depth a[aria-current="page"] {
	color: var(--hull-ink);
	font-weight: 700;
}

.depth a.active::before,
.depth a[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: -6.5px;
	width: 12px;
	height: 12px;
	background: var(--hull-copper);
	transform: rotate(45deg);
}

.hull-foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--hull-ink2);
	font-size: 15px;
}

@media (max-width: 800px) {
	.hull {
		padding-block: 12px;
		gap: 12px;
		border-right: 0;
		border-bottom: 1px solid var(--hull-line);
	}

	.depth {
		flex-direction: row;
		flex-wrap: wrap;
		margin-left: 0;
		border-left: 0;
	}

	.depth a.active,
	.depth a[aria-current="page"] {
		box-shadow: inset 0 -2px 0 var(--hull-copper);
	}

	.depth a.active::before,
	.depth a[aria-current="page"]::before {
		display: none;
	}

	.hull-foot {
		margin-top: 0;
	}
}

/* ---------- the porthole mark: provisional until the name and logo are settled (F4) ---------- */

.hublot-mark {
	flex: none;
}

.hublot-mark .mark-sea { fill: var(--sea); stroke: var(--ring); stroke-width: 22; }
.hublot-mark .mark-data { fill: var(--data); }
.hublot-mark .mark-tower { fill: var(--tower-b); }