/* ==========================================================================
   Map-Retro — système visuel 2026
   Grand format éditorial, encre nocturne, vert prairie et accents solaires.
   ========================================================================== */

:root
{
	--night-950: #07100c;
	--night-900: #0b1711;
	--night-850: #102018;
	--night-800: #172b20;
	--night-700: #24412f;
	--paper: #f3f1e8;
	--paper-dim: #c9d0c4;
	--ink: #0d1711;
	--lime-200: #d9f7a2;
	--lime-300: #bce86f;
	--lime-400: #9fd650;
	--lime-500: #75ad35;
	--gold-200: #ffe6a0;
	--gold-300: #ffc94f;
	--gold-400: #f0a928;
	--red-400: #ec604c;
	--teal-300: #72dfcc;
	--line: rgba(220, 240, 196, .17);
	--line-strong: rgba(225, 245, 194, .35);
	--glass: rgba(8, 18, 13, .72);
	--glass-soft: rgba(20, 39, 29, .7);
	--shadow: 0 24px 70px rgba(0, 0, 0, .34);

	/* Alias conservés pour les pages historiques. */
	--wood-900: var(--night-950);
	--wood-800: var(--night-900);
	--wood-700: var(--night-850);
	--wood-600: var(--night-800);
	--wood-500: var(--night-700);
	--parch-100: #f7f6ee;
	--parch-200: #eeeee4;
	--parch-300: #d9ddcf;
	--parch-400: #b8c0ad;
	--gold-100: #fff0bc;
	--gold-500: #9b6814;
	--green-200: var(--lime-200);
	--green-300: var(--lime-300);
	--green-500: var(--lime-500);
	--green-600: #58892a;
	--green-700: #365b20;
	--teal-500: #2f9685;
	--teal-600: #247267;
	--ink-900: var(--ink);
	--ink-700: #344338;
	--ink-500: #687569;
	--cream: var(--paper);
	--cream-dim: var(--paper-dim);
	--rank-gold: #ffc84d;
	--rank-silver: #c7d1d6;
	--rank-bronze: #c77d43;

	--display: "Arial Narrow", "Aptos Display", "Segoe UI Variable Display", Impact, sans-serif;
	--body: "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif;
	--data: "Cascadia Mono", Consolas, ui-monospace, monospace;
	--gutter: clamp(1rem, 3vw, 3.75rem);
	--radius-sm: 12px;
	--radius: 22px;
	--radius-lg: 34px;
}

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

html
{
	scroll-behavior: smooth;
	background: var(--night-950);
}

body
{
	margin: 0;
	min-height: 100vh;
	color: var(--paper);
	font: 15px/1.6 var(--body);
	background:
		radial-gradient(circle at 10% 0%, rgba(112, 174, 53, .12), transparent 32rem),
		radial-gradient(circle at 90% 18%, rgba(240, 169, 40, .08), transparent 36rem),
		var(--night-950);
	-webkit-font-smoothing: antialiased;
}

body::before
{
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

img
{
	max-width: 100%;
	display: block;
}

a
{
	color: inherit;
	text-underline-offset: 3px;
}

button,
input,
select
{
	font: inherit;
}

:focus-visible
{
	outline: 3px solid var(--gold-300);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4
{
	margin: 0;
	font-family: var(--display);
	font-weight: 850;
	line-height: .98;
	letter-spacing: -.035em;
	text-wrap: balance;
}

p
{
	margin: 0;
}

.visuallyHidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.frame
{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: clip;
}

/* ---------- Navigation flottante ---------- */

.siteHeader
{
	position: sticky;
	top: 14px;
	z-index: 100;
	width: calc(100% - clamp(1rem, 4vw, 5rem));
	max-width: 1780px;
	min-height: 74px;
	margin: 14px auto 0;
	padding: .65rem .75rem .65rem 1rem;
	display: flex;
	align-items: center;
	gap: clamp(.8rem, 2vw, 2.4rem);
	border: 1px solid var(--line-strong);
	border-radius: 24px;
	background: rgba(5, 14, 9, .78);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
	backdrop-filter: blur(18px) saturate(140%);
}

.siteLogo
{
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	flex: none;
	text-decoration: none;
}

.siteLogoMark
{
	width: 45px;
	height: 45px;
	display: grid;
	place-items: center;
	flex: none;
}

.siteLogoMark svg
{
	width: 100%;
	height: 100%;
	overflow: visible;
}

.siteLogoMark path:first-child
{
	fill: var(--lime-400);
	filter: drop-shadow(0 5px 12px rgba(117, 173, 53, .28));
}

.siteLogoMark path:last-child
{
	fill: none;
	stroke: var(--night-950);
	stroke-width: 3.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.siteLogoType
{
	display: grid;
	text-transform: uppercase;
	line-height: .78;
}

.siteLogoType strong
{
	font: 900 1.36rem/1 var(--display);
	letter-spacing: -.02em;
}

.siteLogoType small
{
	color: var(--lime-300);
	font: 800 .72rem/1 var(--body);
	letter-spacing: .24em;
}

.siteNav
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.15rem, .6vw, .55rem);
	margin-inline: auto;
}

.siteNav a
{
	position: relative;
	padding: .65rem .72rem;
	color: rgba(243, 241, 232, .76);
	font-size: .84rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, background .2s ease;
	border-radius: 11px;
}

.siteNav a:not([aria-disabled="true"]):hover
{
	color: var(--paper);
	background: rgba(255, 255, 255, .06);
}

.siteNav a[aria-current="page"]
{
	color: var(--lime-200);
}

.siteNav a[aria-current="page"]::after
{
	content: "";
	position: absolute;
	left: .72rem;
	right: .72rem;
	bottom: .25rem;
	height: 2px;
	border-radius: 999px;
	background: var(--lime-400);
}

.headerActions
{
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: none;
}

.headerServerLink
{
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .7rem;
	color: var(--paper-dim);
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: .8rem;
	text-decoration: none;
	white-space: nowrap;
}

.headerServerLink strong
{
	color: var(--lime-200);
}

.headerServerLink:hover
{
	border-color: var(--line-strong);
	background: rgba(255, 255, 255, .06);
}

/* ---------- Boutons ---------- */

.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	min-height: 44px;
	padding: .72rem 1.05rem;
	border: 1px solid transparent;
	border-radius: 13px;
	font-size: .84rem;
	font-weight: 850;
	letter-spacing: .015em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.btn:not([aria-disabled="true"]):hover
{
	transform: translateY(-2px);
	filter: brightness(1.05);
}

.btn:not([aria-disabled="true"]):active
{
	transform: translateY(0);
}

/* Disabled entry links retain their place without behaving as navigation. */
.siteNav a[aria-disabled="true"],
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-green
{
	color: #101a0c;
	background: var(--lime-300);
	box-shadow: 0 12px 26px rgba(134, 193, 63, .18);
}

.btn-green:hover
{
	box-shadow: 0 15px 32px rgba(134, 193, 63, .25);
}

.btn-teal
{
	color: #071511;
	background: var(--teal-300);
}

.btn-ghost
{
	color: var(--paper);
	border-color: var(--line-strong);
	background: rgba(7, 16, 12, .46);
	backdrop-filter: blur(10px);
}

.btn-parch
{
	color: var(--paper);
	border-color: var(--line);
	background: rgba(255, 255, 255, .07);
}

.btn-lg
{
	min-height: 52px;
	padding: .85rem 1.35rem;
	font-size: .92rem;
}

/* ---------- Surfaces ---------- */

.parchment
{
	position: relative;
	color: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 50%),
		var(--glass-soft);
	box-shadow: var(--shadow);
}

.parchment h2,
.parchment h3,
.parchment h4
{
	color: var(--paper);
}

.parchment p
{
	color: var(--paper-dim);
}

.ribbon
{
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: .35rem .75rem;
	color: var(--night-950);
	background: var(--lime-300);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.siteMain
{
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.wrap
{
	width: min(1540px, 100%);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section,
.contentSection
{
	padding-block: clamp(3rem, 7vw, 7rem);
}

.sectionHead
{
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(18rem, .55fr);
	align-items: end;
	gap: 2rem;
	margin-bottom: clamp(1.6rem, 4vw, 3rem);
}

.sectionHead h2
{
	max-width: 14ch;
	color: var(--paper);
	font-size: clamp(2.1rem, 1.2rem + 3.7vw, 5.2rem);
	text-transform: uppercase;
}

.sectionHead p
{
	max-width: 58ch;
	color: var(--paper-dim);
	font-size: clamp(.94rem, .86rem + .25vw, 1.08rem);
}

.contentGrid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(.8rem, 1.5vw, 1.25rem);
}

.contentCard
{
	padding: clamp(1.2rem, 2.4vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.contentCard h3
{
	font-size: clamp(1.35rem, 1rem + .7vw, 2rem);
	letter-spacing: -.02em;
}

.contentCard p,
.contentCard li
{
	color: var(--paper-dim);
}

.contentCard strong
{
	color: var(--paper);
}

.more
{
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	align-self: flex-start;
	margin-top: auto;
	color: var(--lime-300);
	font-weight: 800;
	text-decoration: none;
}

.criteriaList,
.legendList,
.zoneList,
.statList
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.criteriaList,
.legendList
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: .75rem;
}

.criteriaList li,
.legendList li
{
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	padding: .8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .025);
}

.criteriaList .gem
{
	width: 12px;
	height: 12px;
	margin-top: .45rem;
	flex: none;
	border-radius: 4px;
	transform: rotate(45deg);
	background: var(--gold-300);
}

.legendList img
{
	width: 46px;
	height: 46px;
	flex: none;
	object-fit: contain;
	border-radius: 12px;
}

.legendList strong
{
	display: block;
}

.zoneList,
.statList
{
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.zoneList li,
.statList li
{
	display: flex;
	align-items: baseline;
	gap: .8rem;
	padding: .65rem 0;
	border-bottom: 1px solid var(--line);
}

.zoneList li:last-child,
.statList li:last-child
{
	border-bottom: 0;
}

.zoneList .count
{
	margin-left: auto;
	color: var(--lime-300);
	font: 700 .78rem/1 var(--data);
}

.statList b
{
	min-width: 3.6ch;
	color: var(--lime-300);
	font: 800 1.8rem/1 var(--display);
}

.progressTrack
{
	height: 9px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
}

.progressTrack span
{
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--lime-500), var(--lime-300), var(--gold-300));
}

.progressLegend
{
	display: flex;
	justify-content: space-between;
	margin-top: .5rem;
	color: var(--paper-dim);
	font-size: .78rem;
}

.stepList
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: .75rem;
	counter-reset: step;
}

.stepList li
{
	counter-increment: step;
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	padding: .75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.stepList li::before
{
	content: counter(step, decimal-leading-zero);
	color: var(--gold-300);
	font: 800 1rem/1 var(--data);
}

.donateBlock
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .8rem;
}

/* ---------- Pied de page ---------- */

.siteFooter
{
	position: relative;
	padding: clamp(2.2rem, 5vw, 4rem) var(--gutter) 1.5rem;
	background:
		radial-gradient(circle at 82% 20%, rgba(117, 173, 53, .1), transparent 28rem),
		#050c08;
	border-top: 1px solid var(--line);
}

.footerPledges
{
	width: min(1540px, 100%);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(250px, 1fr) auto auto;
	align-items: center;
	gap: clamp(1.4rem, 4vw, 4rem);
}

.footerBrand
{
	display: flex;
	align-items: center;
	gap: .9rem;
}

.footerBrand strong
{
	display: block;
	font: 900 1.45rem/1 var(--display);
	text-transform: uppercase;
}

.footerBrand p
{
	margin-top: .35rem;
	color: var(--paper-dim);
	font-size: .82rem;
}

.footerNumbers
{
	display: flex;
	gap: clamp(1.2rem, 3vw, 3rem);
}

.footerNumbers div
{
	display: grid;
}

.footerNumbers strong
{
	color: var(--lime-300);
	font: 850 1.5rem/1 var(--display);
}

.footerNumbers span
{
	color: var(--paper-dim);
	font-size: .72rem;
}

.footerBottom
{
	width: min(1540px, 100%);
	margin: 2.3rem auto 0;
	padding-top: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--line);
}

.footerLinks
{
	display: flex;
	flex-wrap: wrap;
	gap: .45rem 1.1rem;
}

.footerLinks a
{
	color: var(--paper-dim);
	font-size: .78rem;
	text-decoration: none;
}

.footerLinks a:hover
{
	color: var(--paper);
}

.footerLegal
{
	color: #718076;
	font-size: .74rem;
}

@media (max-width: 1050px)
{
	.headerServerLink > span:first-child
	{
		display: none;
	}

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

	.sectionHead h2
	{
		max-width: 16ch;
	}

	.footerPledges
	{
		grid-template-columns: 1fr auto;
	}

	.footerNumbers
	{
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
	}
}

@media (max-width: 780px)
{
	.siteHeader
	{
		top: 8px;
		width: calc(100% - 1rem);
		margin-top: 8px;
		padding: .55rem;
		border-radius: 18px;
		flex-wrap: wrap;
		gap: .5rem;
	}

	.siteLogoMark
	{
		width: 38px;
		height: 38px;
	}

	.siteLogoType
	{
		display: none;
	}

	.siteNav
	{
		order: 3;
		width: 100%;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: .15rem;
		scrollbar-width: none;
	}

	.siteNav::-webkit-scrollbar
	{
		display: none;
	}

	.siteNav a
	{
		font-size: .76rem;
		padding: .48rem .55rem;
	}

	.headerActions
	{
		margin-left: auto;
	}

	.headerActions .btn
	{
		min-height: 38px;
		padding: .5rem .7rem;
		font-size: .75rem;
	}

	.headerServerLink
	{
		padding: .45rem .55rem;
		font-size: .75rem;
	}

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

	.footerNumbers
	{
		grid-column: auto;
		grid-row: auto;
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce)
{
	*,
	*::before,
	*::after
	{
		scroll-behavior: auto !important;
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}