@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
	--optimiste: #16a34a;
	--optimiste-light: #f0fdf4;
	--optimiste-mid: #dcfce7;
	--median: #ea580c;
	--median-light: #fff7ed;
	--median-mid: #fed7aa;
	--pessimiste: #dc2626;
	--pessimiste-light: #fef2f2;
	--pessimiste-mid: #fecaca;

	--bg: #ffffff;
	--bg-subtle: #f8fafc;
	--bg-muted: #f1f5f9;

	--text: #0f172a;
	--text-secondary: #334155;
	--text-muted: #94a3b8;
	--text-dim: #cbd5e1;

	--border: #e2e8f0;
	--border-strong: #cbd5e1;

	--accent: #0ea5e9;
	--accent-light: #e0f2fe;

	--radius-sm: 0.5rem;
	--radius: 0.75rem;
	--radius-lg: 1rem;

	--shadow-sm:
		0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04);
	--shadow-md:
		0 8px 32px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

::selection {
	background: var(--accent-light);
	color: var(--accent);
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.15s var(--ease);
}
a:hover {
	color: #0284c7;
}

img {
	display: block;
	max-width: 100%;
	border-radius: var(--radius);
}

img.icone {
	width: 52px;
	height: 52px;
	object-fit: cover;
	transition:
		border-color 0.2s var(--ease),
		transform 0.2s var(--ease-out);
}
img.icone:hover {
	border-color: var(--accent);
	transform: scale(1.06);
}

h1,
h2,
h3,
h4 {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--text);
}

p {
	color: var(--text-secondary);
	line-height: 1.75;
}

.container {
	width: min(980px, 100% - 2.5rem);
	margin-inline: auto;
	padding-block: 2.5rem;
}

div.container {
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

div.buttonstart {
	text-align: center;
	margin-top: 3rem;
}

/* ── TOP BAR ── */
.top-bar {
	width: 100%;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	padding: 0.85rem 2rem;
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.btn-home {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	background: var(--text);
	padding: 0.45rem 1rem;
	border-radius: var(--radius-sm);
	transition:
		background 0.15s var(--ease),
		transform 0.15s var(--ease-out);
}
.btn-home:hover {
	background: #1e293b;
	transform: translateY(-1px);
	text-decoration: none;
	color: #fff;
}

.btn-change-perso {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
	padding: 0.45rem 1rem;
	border: 2px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--bg);
	box-shadow: var(--shadow-sm);
	transition:
		color 0.15s var(--ease),
		border-color 0.15s var(--ease),
		background 0.15s var(--ease),
		transform 0.15s var(--ease-out);
}
.btn-change-perso:hover {
	color: var(--text);
	border-color: var(--text);
	background: var(--bg-subtle);
	transform: translateY(-1px);
	text-decoration: none;
}

.btn-change-scenario {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
	padding: 0.45rem 1rem;
	border: 2px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--bg);
	box-shadow: var(--shadow-sm);
	transition:
		color 0.15s var(--ease),
		border-color 0.15s var(--ease),
		background 0.15s var(--ease),
		transform 0.15s var(--ease-out);
}
.btn-change-scenario:hover {
	color: var(--text);
	border-color: var(--text);
	background: var(--bg-subtle);
	transform: translateY(-1px);
	text-decoration: none;
}

/* ── HOME HEADER ── */
.home-header {
	text-align: center;
	padding-block: 3rem 1.5rem;
}

.home-header h1 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	color: var(--text);
	margin-bottom: 0.75rem;
}

.home-header p {
	color: var(--text-muted);
	max-width: 440px;
	margin-inline: auto;
	font-size: 1rem;
	font-weight: 400;
}

/* ── STATS ── */
.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-block: 2rem;
}

.stat-card {
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.25rem;
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow 0.2s var(--ease),
		transform 0.2s var(--ease-out),
		border-color 0.2s var(--ease);
}
.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: var(--border-strong);
}

.stat-card .stat-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 0.25rem;
}
.stat-card .stat-label {
	font-size: 0.78rem;
	color: var(--text-muted);
	letter-spacing: 0.01em;
}

/* ── SECTION TITLES ── */
.section-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin-block: 2.5rem 0.4rem;
	letter-spacing: -0.01em;
}

.section-subtitle {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 1.25rem;
}

/* ── CHARACTER GRID ── */
.character-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.character-card {
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-shadow: var(--shadow-sm);
	transition:
		border-color 0.2s var(--ease),
		box-shadow 0.2s var(--ease),
		transform 0.2s var(--ease-out);
}
.character-card:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}
.character-card.selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-light);
}

.character-card .character-name {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--text);
}
.character-card .character-meta {
	font-size: 0.78rem;
	color: var(--text-muted);
	line-height: 1.5;
}

.character-card .btn-follow {
	margin-top: auto;
	padding: 0.6rem 1rem;
	border: none;
	border-radius: var(--radius-sm);
	color: #000;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	display: block;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition:
		opacity 0.15s var(--ease),
		transform 0.15s var(--ease-out),
		box-shadow 0.15s var(--ease);
}
.character-card .btn-follow:hover {
	opacity: 0.88;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	color: #000;
}

.character-card.ajla .btn-follow {
	background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
}
.character-card.camille .btn-follow {
	background: linear-gradient(135deg, #2dd4bf, #0d9488, #0f766e);
}
.character-card.isabelle .btn-follow {
	background: linear-gradient(135deg, #4ade80, #22c55e, #16a34a);
}
.character-card.liam .btn-follow {
	background: linear-gradient(135deg, #a78bfa, #8b5cf6, #7c3aed);
}
.character-card.lukas .btn-follow {
	background: linear-gradient(135deg, #fb923c, #f97316, #ea580c);
}
.character-card.marco .btn-follow {
	background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
}

/* ── SCENARIO GRID ── */
.scenario-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.scenario-card {
	background: var(--bg);
	border: 2px solid var(--border);
	gap: 1.25rem;
}

.scenario-card {
	background: var(--glass);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	padding: 1.6rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow 0.2s var(--ease),
		transform 0.2s var(--ease-out),
		border-color 0.2s var(--ease);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--shadow);
	transition:
		background 0.3s var(--ease-in-out),
		border-color 0.3s var(--ease-in-out),
		transform 0.35s var(--ease-out);
	position: relative;
}

.scenario-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}
.scenario-card.optimiste::before {
	background: linear-gradient(90deg, #4ade80, #22c55e, #16a34a);
}
.scenario-card.median::before {
	background: linear-gradient(90deg, #fb923c, #f97316, #ea580c);
}
.scenario-card.pessimiste::before {
	background: linear-gradient(90deg, #f87171, #ef4444, #dc2626);
}

.scenario-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.scenario-card.optimiste {
	border-color: #86efac;
	background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 50%);
}
.scenario-card.median {
	border-color: #fdba74;
	background: linear-gradient(160deg, #fff7ed 0%, #ffffff 50%);
}
.scenario-card.pessimiste {
	border-color: #fca5a5;
	background: linear-gradient(160deg, #fef2f2 0%, #ffffff 50%);
}

.scenario-card .scenario-name {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--text);
}
.scenario-card .scenario-desc {
	font-size: 0.8rem;
	color: var(--text-muted);
	line-height: 1.55;
	background: var(--glass-border);
	transition: background 0.3s var(--ease-in-out);
}

.scenario-card.optimiste::before {
	background: linear-gradient(
		90deg,
		transparent,
		var(--optimiste),
		transparent
	);
}
.scenario-card.median::before {
	background: linear-gradient(90deg, transparent, var(--median), transparent);
}
.scenario-card.pessimiste::before {
	background: linear-gradient(
		90deg,
		transparent,
		var(--pessimiste),
		transparent
	);
}

.scenario-card:hover {
	background: var(--glass-hover);
	transform: translateY(-5px);
}

.scenario-card.optimiste {
	border-color: rgba(34, 197, 94, 0.22);
}
.scenario-card.median {
	border-color: rgba(249, 115, 22, 0.22);
}
.scenario-card.pessimiste {
	border-color: rgba(239, 68, 68, 0.22);
}

.scenario-card .scenario-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--text);
}
.scenario-card .scenario-desc {
	font-size: 0.82rem;
	color: var(--text-muted);
	line-height: 1.55;
	font-weight: 300;
}

.scenario-card .temp-row {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.875rem;
}

.scenario-card .temp-global {
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -0.03em;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.scenario-card .temp-swiss {
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -0.03em;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: var(--optimiste);
	font-weight: 700;
	font-size: 1.4rem;
	font-family: var(--font-display);
	letter-spacing: -0.03em;
}
.scenario-card .temp-swiss {
	color: var(--pessimiste);
	font-weight: 700;
	font-size: 1.4rem;
	font-family: var(--font-display);
	letter-spacing: -0.03em;
}
.scenario-card .scenario-code {
	font-size: 0.7rem;
	color: var(--text-dim);
	letter-spacing: 0.06em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.scenario-card .btn-select {
	padding: 0.65rem 1rem;
	border: none;
	border-radius: var(--radius-sm);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.55rem 1rem;
	border: none;
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	display: block;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	transition:
		opacity 0.15s var(--ease),
		transform 0.15s var(--ease-out),
		box-shadow 0.15s var(--ease);
}
.scenario-card .btn-select:hover {
	opacity: 0.88;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	text-decoration: none;
	color: #fff;
}
.scenario-card.optimiste .btn-select {
	background: linear-gradient(135deg, #4ade80, #22c55e, #16a34a);
}
.scenario-card.median .btn-select {
	background: linear-gradient(135deg, #fb923c, #f97316, #ea580c);
}
.scenario-card.pessimiste .btn-select {
	background: linear-gradient(135deg, #f87171, #ef4444, #dc2626);
	transition:
		opacity 0.2s var(--ease-in-out),
		transform 0.2s var(--ease-out);
	position: relative;
	z-index: 1;
}
.scenario-card .btn-select:hover {
	opacity: 0.85;
	transform: translateY(-2px);
	text-decoration: none;
}

.scenario-card.optimiste .btn-select {
	background: linear-gradient(135deg, var(--optimiste), #16a34a);
}
.scenario-card.median .btn-select {
	background: linear-gradient(135deg, var(--median), #ea580c);
}
.scenario-card.pessimiste .btn-select {
	background: linear-gradient(135deg, var(--pessimiste), #dc2626);
}

.scenario-card .selected-label {
	text-align: center;
	font-size: 0.75rem;
	color: var(--optimiste);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ── SELECTION SUMMARY ── */
.selection-summary {
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	margin-top: 1.75rem;
	text-align: center;
	box-shadow: var(--shadow-sm);
}

.selection-summary h3 {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 1.25rem;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	color: var(--optimiste);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.selection-summary .selection-values {
	display: flex;
	justify-content: center;
	gap: 3rem;
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-bottom: 1.25rem;
}

.selection-summary .selection-values strong {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 0.1rem;
}

/* ── BUTTONS ── */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.75rem;
	background: var(--text);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: -0.01em;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition:
		background 0.15s var(--ease),
		transform 0.15s var(--ease-out),
		opacity 0.15s var(--ease);
}
.btn-primary:hover {
	background: #1e293b;
	transform: translateY(-2px);
	text-decoration: none;
	color: #fff;
	opacity: 1;
}
.btn-primary:active {
	transform: translateY(0);
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
	cursor: pointer;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-secondary);
	text-decoration: none;
	transition:
		background 0.15s var(--ease),
		border-color 0.15s var(--ease),
		color 0.15s var(--ease);
}
.btn-secondary:hover {
	background: var(--bg-subtle);
	border-color: var(--border-strong);
	color: var(--text);
	text-decoration: none;
}
.btn-secondary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.btn-block {
	display: block;
	width: 100%;
	padding: 0.75rem;
	background: var(--optimiste);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	margin-top: 1rem;
	text-align: center;
	text-decoration: none;
	transition:
		opacity 0.15s var(--ease),
		transform 0.15s var(--ease-out);
}
.btn-block:hover {
	opacity: 0.88;
	transform: translateY(-1px);
	color: #fff;
	text-decoration: none;
}

.btn-back-home {
	display: block;
	text-align: center;
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 0.75rem;
	transition: color 0.15s var(--ease);
}
.btn-back-home:hover {
	color: var(--text-secondary);
}

/* ── STORY NAV (top bar inside story) ── */
.story-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 2rem;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 900;
}

.story-nav .back-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 0.4rem;
	transition: color 0.15s var(--ease);
}
.story-nav .back-link:hover {
	color: var(--text);
	text-decoration: none;
}

.story-nav .character-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.3rem 0.85rem 0.3rem 0.35rem;
}

/* ── SCENARIO TABS ── */
.scenario-tabs {
	display: flex;
	gap: 0.6rem;
	padding: 0.85rem 2rem;
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border);
	align-items: center;
}

.scenario-tabs label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted);
	margin-right: 0.25rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.scenario-tab {
	flex: 1;
	padding: 0.55rem 0.75rem;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	text-align: center;
	font-size: 0.8rem;
	cursor: pointer;
	background: var(--bg);
	color: var(--text-secondary);
	transition:
		background 0.15s var(--ease),
		border-color 0.15s var(--ease),
		color 0.15s var(--ease);
}
.scenario-tab:hover {
	background: var(--bg-muted);
	border-color: var(--border-strong);
}

.scenario-tab .tab-name {
	font-weight: 700;
}
.scenario-tab .tab-temps {
	font-size: 0.7rem;
	opacity: 0.7;
}

.scenario-tab.optimiste.active {
	border-color: var(--optimiste);
	background: var(--optimiste-light);
	color: var(--optimiste);
}
.scenario-tab.median.active {
	border-color: var(--median);
	background: var(--median-light);
	color: var(--median);
}
.scenario-tab.pessimiste.active {
	border-color: var(--pessimiste);
	background: var(--pessimiste-light);
	color: var(--pessimiste);
}

.scenario-tabs .hint {
	font-size: 0.72rem;
	color: var(--text-muted);
	padding: 0.25rem 0.75rem;
}

/* ── STORY LAYOUT ── */
.story-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 0;
	min-height: calc(100vh - 60px);
}

/* ── SIDEBAR ── */
.sidebar {
	padding: 1.75rem 1.25rem;
	background: var(--bg-subtle);
	border-right: 1px solid var(--border);
	position: sticky;
	top: 60px;
	height: calc(100vh - 60px);
	overflow-y: auto;
}

.sidebar h2 {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 1rem;
	bottom: 1rem;
	width: 1px;
	background: var(--border);
}

.timeline-item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.75rem 0.6rem;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s var(--ease);
	position: relative;
	z-index: 1;
}
.timeline-item:hover {
	background: var(--bg-muted);
	text-decoration: none;
}

.timeline-item.active {
	background: var(--bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-sm);
}

.timeline-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--border-strong);
	background: var(--bg);
	flex-shrink: 0;
	margin-top: 0.3rem;
	position: relative;
	z-index: 2;
	transition:
		background 0.2s var(--ease),
		border-color 0.2s var(--ease);
}
.timeline-item.done .timeline-dot {
	background: var(--optimiste);
	border-color: var(--optimiste);
}
.timeline-item.active .timeline-dot {
	background: var(--text);
	border-color: var(--text);
}

.timeline-item .stage-name {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--text-muted);
}
.timeline-item.active .stage-name {
	color: var(--text);
}
.timeline-item.done .stage-name {
	color: var(--text-secondary);
}

.timeline-item .stage-meta {
	font-size: 0.75rem;
	color: var(--text-dim);
}

.badge-en-cours {
	margin-left: auto;
	background: var(--text);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 600;
	padding: 0.18rem 0.5rem;
	border-radius: 999px;
	white-space: nowrap;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ── STORY CONTENT ── */
.story-content {
	padding: 2.5rem 3rem;
	max-width: 720px;
	margin-inline: auto;
	width: 100%;
}

.story-content .stage-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.4rem;
}

.story-content h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.025em;
}

.story-content .stage-meta {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 1.5rem;
}

/* ── RCP BADGE ── */
.rcp-badge {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	padding: 0.22rem 0.65rem;
	border-radius: 999px;
}
.rcp-badge.rcp-26 {
	background: linear-gradient(135deg, #22c55e, #16a34a);
}
.rcp-badge.rcp-45 {
	background: linear-gradient(135deg, #f97316, #ea580c);
}
.rcp-badge.rcp-7 {
	background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* ── STORY IMAGE ── */
.story-image {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-block: 1.5rem;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border);
}

/* ── NARRATIVE ── */
.narrative {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.narrative p {
	line-height: 1.85;
	color: var(--text-secondary);
	font-size: 0.95rem;
	font-weight: 400;
}
.narrative hr {
	border: none;
	border-top: 1px solid var(--border);
	margin-block: 0.5rem;
}

/* ── IMPACTS ── */
.impacts-title {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-block: 2rem 0.85rem;
}

.impacts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.impact-card {
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.9rem 1rem;
	font-size: 0.82rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	transition:
		border-color 0.15s var(--ease),
		box-shadow 0.15s var(--ease);
}
.impact-card:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow);
}
.impact-card .impact-name {
	font-weight: 600;
	color: var(--text);
	margin-bottom: 0.15rem;
}
.impact-card .impact-desc {
	color: var(--text-muted);
	line-height: 1.5;
}

p.empty-impact {
	font-size: 0.82rem;
	color: var(--text-muted);
	grid-column: span 2;
	font-style: italic;
}

/* ── NAV BOTTOM ── */
.story-nav-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 1.75rem;
	margin-top: 1.75rem;
	border-top: 1px solid var(--border);
}

/* ── STORY END ── */
.story-end {
	text-align: center;
	padding: 2.5rem 2rem;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	margin-top: 1.5rem;
}

.story-end .checkmark {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--text);
	color: #fff;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	margin-bottom: 1.25rem;
}

.story-end h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 0.6rem;
}
.story-end p {
	font-size: 0.9rem;
	color: var(--text-muted);
	max-width: 400px;
	margin-inline: auto;
}

/* ── SOURCES ── */
.sources-box {
	background: var(--bg);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-top: 1.5rem;
	font-size: 0.82rem;
	color: var(--text-secondary);
}
.sources-box strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--text);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.story-end .sources-box {
	text-align: left;
	margin-bottom: 1.5rem;
}
.story-end .sources-box a {
	color: var(--accent);
	font-weight: 500;
	transition: color 0.15s var(--ease);
}
.story-end .sources-box a:hover {
	color: #0284c7;
}

/* ── DEMO ── */
.demo-section {
	margin-block: 3rem 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}
.demo-section h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 0.25rem;
}
.demo-section p {
	font-size: 0.82rem;
	color: var(--text-muted);
}
.demo-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 1.25rem;
}
.swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	color: var(--text-muted);
}
.swatch-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--border);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
	.character-grid,
	.scenario-grid,
	.stats {
		grid-template-columns: 1fr 1fr;
	}

	.story-layout {
		grid-template-columns: 1fr;
	}

	.sidebar {
		border-right: none;
		border-bottom: 1px solid var(--border);
		position: static;
		height: auto;
	}

	.story-content {
		padding: 1.5rem;
		max-width: 100%;
	}

	.impacts-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.character-grid,
	.scenario-grid,
	.stats {
		grid-template-columns: 1fr;
	}

	.scenario-tabs {
		flex-direction: column;
	}
	.top-bar,
	.story-nav {
		padding: 0.75rem 1rem;
	}
	.story-content {
		padding: 1.25rem 1rem;
		/* La barre qui contient le bouton */
		.top-bar {
			width: 100%;
			background-color: #ffffff; /* Fond blanc */
			padding: 12px 20px;
			box-sizing: border-box;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Petite ombre légère */
			position: sticky; /* Reste accrochée en haut au scroll */
			top: 0;
			z-index: 1000; /* Passe par-dessus le reste du contenu */
			display: flex;
			justify-content: space-between;
		}

		.btn-home {
			display: inline-flex;
			align-items: center;
			gap: 8px; /* Espace entre l'icône et le texte */
			text-decoration: none;
			color: #374151; /* Gris foncé */
			font-weight: 600;
			font-size: 0.95rem;
			transition: color 0.2s ease;
		}
		.btn-home:hover {
			color: #2563eb;
			.story-end {
				background: var(--card-bg);
				border: 1px solid var(--border);
				border-radius: var(--radius);
				padding: 2.5rem 2rem;
				box-shadow: var(--shadow);
				text-align: center;
				margin-top: 1.5rem;
			}

			/* Icône de validation de fin (Checkmark) */
			.story-end .checkmark {
				font-size: 3rem;
				color: var(
					--optimiste
				); /* Réutilisation de la couleur verte officielle */
				line-height: 1;
				margin-bottom: 1rem;
			}

			/* Titre de fin de parcours (H3) */
			.story-end h3 {
				font-size: 1.25rem;
				font-weight: 700;
				color: var(--text);
				margin-top: 0;
				margin-bottom: 0.75rem;
			}

			/* Texte courant de description */
			.story-end p {
				font-size: 1rem;
				line-height: 1.6;
				color: var(--text);
				margin-bottom: 1.5rem;
			}

			/* Note : Le bloc .sources-box est déjà stylisé nativement dans le CSS des profs.
   Les lignes ci-dessous garantissent simplement son parfait alignement 
   et l'utilisation des variables au cas où.
*/
			.story-end .sources-box {
				background: var(--card-bg);
				border: 1px solid var(--border);
				border-left: 4px solid var(--accent); /* Bordure gauche reprenant la couleur accent de MétéoSuisse */
				border-radius: var(--radius);
				padding: 1rem;
				margin-top: 1rem;
				margin-bottom: 2rem;
				text-align: left;
			}

			/* Lien à l'intérieur des sources */
			.story-end .sources-box a {
				color: var(--accent);
				font-weight: 600;
			}

			/* Alignement vertical et espacement des boutons du bas */
			.story-end style,
			.story-end div[style*="flex-direction: column"] {
				display: flex;
				flex-direction: column;
				gap: 0.75rem;
			}

			/* Bouton secondaire d'accueil adapté aux contraintes du guide */
			.story-end .btn-secondary {
				display: inline-block;
				padding: 0.65rem 2rem;
				background: transparent;
				color: var(--text-muted);
				border: 1px solid var(--border);
				border-radius: 0.5rem;
				font-weight: 600;
				cursor: pointer;
				font-size: 1rem;
				transition:
					background 0.15s,
					color 0.15s;
			}

			.story-end .btn-secondary:hover {
				background: var(--bg);
				color: var(--text);
				text-decoration: none;
			}

			/* Bouton pleine largeur utilitaire (si utilisé) */
			.btn-block {
				display: block;
				width: 100%;
				padding: 0.65rem 2rem;
				background: var(--accent);
				color: #fff;
				border: none;
				border-radius: 0.5rem;
				font-weight: 600;
				cursor: pointer;
				font-size: 1rem;
				text-align: center;
			}

			.btn-block:hover {
				background: #0284c7;
			}
		}
	}
}

.footer {
	border-top: 1px solid var(--border);
	padding: 1rem 2rem;
	margin-top: auto;
	text-align: center;
	font-size: 0.78rem;
	color: var(--text-dim);
	background: linear-gradient(to bottom, #ffffff, #f8fafc);
}

.footer a {
	color: var(--text);
	font-weight: 600;
	transition: color 0.15s var(--ease);
}
.footer a:hover {
	color: var(--text-secondary);
}