* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
}

body {
	font-family: ui-sans-serif, system-ui, sans-serif;
	background-color: #f0f6ff;
}

/*HEADER*/
header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	background-color: #fff;
}

header > div.container {
	height: 100%;
	margin-inline-start: 11px;
	margin-inline-end: 11px;
	padding-block-end: 24px;
	padding-block-start: 24px;
	padding-bottom: 24px;
	padding-top: 24px;
}

div.container > div.box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

div.box > .item {
	flex: 1;
}

footer {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	background-color: #fff;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

h1 {
	font-size: 16px;
	font-weight: normal;
	background: linear-gradient(
		90deg,
		oklch(0.546 0.245 262.881),
		oklch(62.7% 0.194 149.214)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-block-end: 8px;
}

h2 {
	font-size: 16px;
	font-weight: normal;
}

main {
	padding-block: 20px;
	padding-inline: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*SECTION INTRODUCTION */
section.introduction > h2 {
	margin-block-end: 16px;
}

section.introduction > p {
	margin-block-end: 32px;
}

section.introduction {
	text-align: center;
	max-width: 869px;
}

/*SECTION STAT-CARDS */
div.stat-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: 869px;
	margin: 0 auto;
	justify-content: center;
}

@media (min-width: 768px) {
	div.stat-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

div.stat-card {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: calc(0.25rem * 6);
	box-shadow:
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
		rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
	border-radius: 10px;
	align-items: center;
}

div.stat-card > img {
	width: 48px;
	margin-block-end: 12px;
}

div.stat-card > h3 {
	font-size: 16px;
	font-weight: normal;
	margin-block-end: 8px;
}

div.stat-card > p {
	font-size: 14px;
	color: oklch(44.6% 0.03 256.802);
}

section.choose-character {
	margin-block-start: 3rem;
	text-align: center;
	max-width: 992px;
	display: flex;
	justify-items: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

section.choose-character > h2 {
	font-size: 20px;
	font-weight: bold;
	color: black;
	margin-block-end: 16px;
}

section.choose-character > p {
	margin-inline: 112px;
}

div.characters {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-block-start: 2rem;
}

@media (min-width: 768px) {
	div.characters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

div.character-card {
	max-width: 320px;
	height: 206px;
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: grid;
	flex-direction: column;
	transition: transform 0.3s ease;
}

div.character-card:hover {
	transform: scale(1.03);
}

div.character-profile {
	height: 70%;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	display: flex;
	padding: 16px;
	align-items: center;
	font-size: 12px;
	line-height: 1.75;
	color: oklch(44.6% 0.03 256.802);
}

div.character-follow {
	display: flex;
	align-items: center;
	justify-content: center;
}

#character-one {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.932 0.032 255.585) 0%,
		oklch(0.977 0.013 236.62) 50%,
		oklch(0.882 0.059 254.128) 100%
	);
}

#character-two {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.956 0.045 203.388) 0%,
		oklch(0.984 0.014 180.72) 50%,
		oklch(0.882 0.059 254.128) 100%
	);
}

#character-three {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.962 0.044 156.743) 0%,
		oklch(0.979 0.021 166.113) 50%,
		oklch(0.938 0.127 124.321) 100%
	);
}

#character-four {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.946 0.033 307.174) 0%,
		oklch(0.962 0.018 272.314) 50%,
		oklch(0.929 0.013 255.508) 100%
	);
}

#character-five {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.962 0.059 95.617) 0%,
		oklch(0.98 0.016 73.684) 50%,
		oklch(0.945 0.129 101.54) 100%
	);
}

#character-six {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.954 0.038 75.164) 0%,
		oklch(0.971 0.013 17.38) 50%,
		oklch(0.924 0.12 95.746) 100%
	);
}

div.character-profile > img {
	width: 90px;
	height: 90px;
}

div.character-infos {
	text-align: left;
	margin-inline-start: 1rem;
}

span.character-name {
	font-size: 18px;
	color: black;
}

span.character-meta-age {
	font-weight: bold;
}

div.btn-follow {
	width: 80%;
	padding: 6px;
	border-radius: 15px;
	color: white;
	font-weight: 600;
	border: none;
	font-family: ui-sans-serif, system-ui, sans-serif;
}

div.btn-follow:hover {
	filter: brightness(0.85);
}

div#btn-follow-ajia {
	background-color: oklch(0.546 0.245 262.881);
}

div#btn-follow-camille {
	background-color: oklch(0.609 0.126 221.723);
}

div#btn-follow-isabelle {
	background-color: oklch(0.627 0.194 149.214);
}

div#btn-follow-liam {
	background-color: oklch(0.558 0.288 302.321);
}

div#btn-follow-lukas {
	background-color: oklch(0.666 0.179 58.318);
}

div#btn-follow-marco {
	background-color: oklch(0.646 0.222 41.116);
}

/*SECTION SCENARIO */
section.choose-scenario {
	margin-block-start: 3rem;
	text-align: center;
	max-width: 992px;
	display: flex;
	justify-items: center;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-block-end: 3rem;
}

section.choose-scenario > h2 {
	font-weight: 700;
}

section.choose-scenario > p#note {
	max-width: 672px;
	color: oklch(0.551 0.027 264.364);
	font-size: 14px;
	align-self: center;
}

section.choose-scenario > p {
	max-width: 768px;
	color: oklch(0.446 0.03 256.802);
}

div.scenarios {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-block-start: 2rem;
}

@media (min-width: 768px) {
	div.scenarios {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

div.scenario-card {
	width: 100%;
	max-width: 312px;
	min-height: 450px;
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease;
	background-color: #fff;
	overflow: hidden;
}

div.scenario-card:hover {
	transform: scale(1.03);
}

div.scenario-profile {
	flex-grow: 1;
	display: flex;
	padding: 24px;
	align-items: flex-start;
	text-align: left;
	font-size: 12px;
	line-height: 1.75;
	color: oklch(44.6% 0.03 256.802);
	flex-direction: column;
	gap: 1rem;
}

#scenario-one {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.982 0.018 155.826) 0%,
		oklch(0.95 0.052 163.051) 100%
	);
}

#scenario-two {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.98 0.016 73.684) 0%,
		oklch(0.962 0.059 95.617) 100%
	);
}

#scenario-three {
	background-image: linear-gradient(
		to right bottom,
		oklch(0.971 0.013 17.38) 0%,
		oklch(0.941 0.03 12.58) 100%
	);
}

div.scenario-header {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

div.scenario-header > img {
	width: 48px;
	justify-self: right;
}

div.scenario-header > h3 {
	font-size: 16px;
	font-weight: 600;
}

div.scenario-description > p {
	text-align: left;
}

div.scenario-global {
	background-color: oklch(0.962 0.044 156.743);
	height: 60px;
	width: 87%;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	padding: 12px 16px;
}

div.scenario-national {
	border: 1px solid oklch(0.627 0.194 149.214);
	height: 60px;
	width: 87%;
	border-radius: 8px;
	padding: 12px 16px;
}

p.temperature {
	color: oklch(0.627 0.194 149.214);
	font-size: 24px;
	margin-top: 4px;
}

div.scenario-profile > hr {
	border-color: black solid 0.5px;
	width: 100%;
	margin-top: auto;
}

div.scenario-profile {
	text-align: left;
}

div.scenario-selection {
	padding: 16px;
	background-image: linear-gradient(
		to right,
		oklch(0.723 0.219 149.579) 0%,
		oklch(0.596 0.145 163.225) 100%
	);
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
	color: white;
}

div#scenario-global-two {
	background-color: oklch(0.954 0.038 75.164);
}

div#scenario-national-two {
	background-color: oklch(0.954 0.038 75.164);
	border-color: oklch(0.837 0.128 66.29);
}

div#scenario-global-two > p.temperature {
	color: oklch(0.646 0.222 41.116);
}

div#scenario-national-two > p.temperature {
	color: oklch(0.646 0.222 41.116);
}

div#scenario-selection-two {
	background-image: linear-gradient(
		to right,
		oklch(0.705 0.213 47.604) 0%,
		oklch(0.666 0.179 58.318) 100%
	);
}

div#scenario-global-three {
	background-color: oklch(0.936 0.032 17.717);
}

div#scenario-national-three {
	background-color: oklch(0.936 0.032 17.717);
	border-color: oklch(0.808 0.114 19.571);
}

div#scenario-global-three > p.temperature {
	color: oklch(0.577 0.245 27.325);
}

div#scenario-national-three > p.temperature {
	color: oklch(0.577 0.245 27.325);
}

div#scenario-selection-three {
	background-image: linear-gradient(
		to right,
		oklch(0.637 0.237 25.331) 0%,
		oklch(0.586 0.253 17.585) 100%
	);
}

/*SECTION SELECTION*/
section.confirm-selection {
	display: flex;
	justify-content: center;
	padding: 40px 20px;
	width: 100%;
}

div.selection {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 32px;
	width: 100%;
	max-width: 768px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

div.selection h3 {
	text-align: center;
	margin: 0;
	font-size: 1.25rem;
	color: #111827;
	font-weight: 600;
}

div.summary {
	display: flex;
	gap: 24px;
}

div.person-selected,
div.scenario-selected {
	flex: 1;
	background-color: #f8fafc;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

div.selection button {
	width: 100%;
	background-color: #8b5cf6;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 16px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

div.selection button:hover {
	background-color: #7c3aed;
}

@media (max-width: 640px) {
	div.summary {
		flex-direction: column;
	}
}

/* ──────────────────────────────────────────── */
/* ── Page view ────────────────────────────── */
/* ──────────────────────────────────────────── */

/* ── En-tête de la page parcours ────────────────────────────── */
.story-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.5rem;
	background: var(--card-bg);
	border-bottom: 1px solid var(--border);
}

.story-nav .back-link {
	font-size: 0.9rem;
	color: var(--text);
}

.story-nav .character-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.story-nav-bottom {
	display: flex;
	justify-content: space-between;
	padding-block: 1.5rem;
	margin-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.btn-secondary {
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	background: transparent;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--text);
}

/*FORM*/
/* Cache le bouton radio natif du navigateur */
.hidden-radio {
	display: none;
}

/* Transforme le curseur en pointeur pour indiquer que la carte est cliquable */
.character-label,
.scenario-label {
	cursor: pointer;
	display: block; /* S'assure que le label prend toute la place de la carte */
}

/* Modifie l'apparence de la carte de personnage SI le bouton radio caché est coché */
.hidden-radio:checked + .character-card {
	border: 2px solid #155dfc; /* Bordure violette */
	box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); /* Ombre violette */
	background-color: #f5f3ff; /* Fond très légèrement teinté */
}

/* Modifie l'apparence de la carte de scénario SI le bouton radio caché est coché */
.hidden-radio:checked + .scenario-card {
	border: 2px solid #155dfc;
	box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}