* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Inter, Arial, sans-serif;
}

:root {
	--primary: #0f4c81;
	--bg: #f4f7fb;
	--text: #1f2a37;
	--muted: #6b7280;
	--card: #ffffff;
}

/* 🌙 Dark mode auto */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b1220;
		--text: #e5e7eb;
		--muted: #9ca3af;
		--card: #111827;
	}
}

body {
	background: var(--bg);
	color: var(--text);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ===== CONTAINER ===== */
.container {
	max-width: 720px;
	padding: 20px;
	animation: fadeIn 0.6s ease-out;
}

/* ===== CARD ===== */
.card {
	background: var(--card);
	padding: 40px;
	border-radius: 16px;
	box-shadow: 0 15px 40px rgba(0,0,0,0.1);
	text-align: center;
	animation: slideUp 0.6s ease-out;
}

/* ===== TITRES ===== */
h1 {
	font-size: 44px;
	color: var(--primary);
	margin-bottom: 15px;
}

h2 {
	font-size: 26px;
	margin-bottom: 10px;
}

/* ===== TEXT ===== */
p {
	font-size: 16px;
	color: var(--muted);
	line-height: 1.7;
	&:last-of-type {
		margin-bottom: 25px;
	}
}

/* ===== BADGES ===== */
.badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	margin-bottom: 15px;
	&.blue {background: #e6f0ff;}
	&.red {background: #ffe6e6;}
	&.orange {background: #fff4e5;}
}

.blue {color: #0f4c81;}
.red {color: #b91c1c;}
.orange {color: #b45309;}

/* ===== BUTTON ===== */
.btn {
	display: inline-block;
	padding: 12px 22px;
	background: var(--primary);
	color: white;
	border-radius: 10px;
	text-decoration: none;
	transition: 0.25s;
}

.btn:hover {
	transform: translateY(-2px);
	background: #0b3a63;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { transform: translateY(15px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* ===== SMALL ICON EFFECT ===== */
.icon {
	font-size: 42px;
	margin-bottom: 10px;
	display: block;
}