/* ===== VARIABLES — Okontak : Nuit & Ultraviolet, répartition B ===== */
:root {
	--color-primary: #7C3AED;
	--color-primary-rgb: 124, 58, 237;
	--color-primary-dark: #5B21B6;
	--color-accent: #FDE047;

	--color-bg: #F6F3FD;
	--color-surface: #FFFFFF;
	--color-text: #1E1033;
	--color-text-2: #47346B;
	--color-text-muted: #6B5A8E;
	--color-text-faint: #8B7BA8;
	--color-border: #E3DBF3;
	--color-border-strong: #C9BCE3;
	--color-divider: #EEE8F9;

	--color-positive: #047857;
	--color-negative: #BE123C;

	--pastel-run-bg: #EADFFC;  --pastel-run-fg: #5B21B6;
	--pastel-done-bg: #D5F5EC; --pastel-done-fg: #065F46;
	--pastel-fail-bg: #FFE0E8; --pastel-fail-fg: #9F1239;
	--pastel-queue-bg: #EEE8F9; --pastel-queue-fg: #47346B;
	--pastel-warn-bg: #FDEBC8; --pastel-warn-fg: #92400E;

	--font-title: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;

	--radius: 6px;
	--radius-pill: 999px;
	--shadow-drawer: -4px 0 24px rgba(30, 16, 51, 0.12);
	--shadow-float: 0 4px 16px rgba(30, 16, 51, 0.12);
	--transition: 150ms ease;
	--nav-h: 60px;
	--bottom-h: 60px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
}

html, body {
	margin: 0;
	max-width: 100%;
	overflow-x: hidden;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-title); margin: 0; line-height: 1.2; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

a, button, [role="button"], [role="option"], label { touch-action: manipulation; }

[hidden] { display: none !important; }

/* ===== ICÔNES ===== */
.i {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.i--lg { width: 20px; height: 20px; }
.i--xl { width: 24px; height: 24px; }
.spin { animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== UTILITAIRES ===== */
.muted { color: var(--color-text-muted); }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ===== TITRES DE PAGE ===== */
.page-title { font-size: 28px; font-weight: 700; }
.page-sub { margin-top: 4px; color: var(--color-text-2); }