/* ==========================================================================
   Ragnarök : Absolution — feuille de style principale
   Refonte 2026. Thème sombre « nuit glacée », repris des couleurs du logo.

   Organisation :
     1. Jetons de design (couleurs, rayons, typographie)
     2. Réinitialisation et base
     3. Mise en page (conteneurs, sections, grilles)
     4. En-tête et navigation
     5. Boutons
     6. Cartes, panneaux, statistiques
     7. Composants de page (héros, étapes, actualités, staff, règlement)
     8. Formulaires
     9. Pied de page
    10. Adaptatif et préférences d'accessibilité

   Aucune dépendance externe : ni police distante, ni jQuery, ni CDN.
   ========================================================================== */

/* -- 1. Jetons ------------------------------------------------------------ */

:root {
	/* Fonds, du plus profond au plus clair */
	--nuit-900: #05080f;
	--nuit-800: #090e1a;
	--nuit-700: #0f1727;
	--nuit-600: #162034;

	/* Surfaces translucides posées sur le fond */
	--voile:      rgba(255, 255, 255, .038);
	--voile-fort: rgba(255, 255, 255, .07);
	--bord:       rgba(150, 190, 255, .13);
	--bord-fort:  rgba(150, 190, 255, .30);

	/* Texte */
	--texte:   #e9eefb;
	--texte-2: #a7b5d0;
	--texte-3: #75879f;

	/* Accents : le bleu glacé vient du logo, l'or de l'Emperium */
	--glace:   #63d9ff;
	--glace-2: #2f9fd6;
	--or:      #f3c563;
	--violet:  #9b8cff;
	--vert:    #57e08f;
	--rouge:   #ff6f6f;

	/* Rayons */
	--r-s:  8px;
	--r-m:  14px;
	--r-l:  20px;
	--r-xl: 28px;

	/* Ombres */
	--ombre-1: 0 1px 0 rgba(255, 255, 255, .05) inset;
	--ombre-2: 0 18px 40px -24px rgba(0, 0, 0, .9);
	--ombre-3: 0 30px 70px -30px rgba(0, 0, 0, .95);

	/* Typographie : piles système uniquement, aucun appel réseau */
	--police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
	          Arial, "Noto Sans", sans-serif;
	--police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
	                "Times New Roman", serif;

	/* Rythme */
	--largeur: 1180px;
	--gouttiere: clamp(16px, 4vw, 32px);
}

/* -- 2. Réinitialisation et base ------------------------------------------ */

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

/* [hidden] doit l'emporter sur les display: flex/grid des composants */
[hidden] { display: none !important; }

html {
	scroll-behavior: smooth;
	/* Décale les ancres pour qu'elles ne passent pas sous l'en-tête collant */
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--police);
	font-size: 16px;
	line-height: 1.65;
	color: var(--texte);
	background-color: var(--nuit-900);
	/* Aurores : trois halos fixes et très diffus, qui donnent la profondeur */
	background-image:
		radial-gradient(900px 620px at 12% -6%,   rgba(47, 159, 214, .22), transparent 60%),
		radial-gradient(760px 520px at 92% 4%,    rgba(155, 140, 255, .16), transparent 62%),
		radial-gradient(1100px 700px at 50% 108%, rgba(99, 217, 255, .10), transparent 60%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }

/* Les sprites de Ragnarök sont du pixel art : pas de lissage à l'agrandissement */
img.sprite { image-rendering: pixelated; }

a { color: var(--glace); text-decoration: none; }
a:hover { color: #9be9ff; }

h1, h2, h3, h4 {
	font-family: var(--police-titre);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: .01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; color: #fff; }

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--bord), transparent);
	margin: 2.5rem 0;
}

::selection { background: rgba(99, 217, 255, .3); color: #fff; }

:focus-visible {
	outline: 2px solid var(--glace);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Lien d'évitement, pour la navigation au clavier */
.skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 200;
	padding: 10px 18px;
	background: var(--glace);
	color: #04121b;
	border-radius: var(--r-s);
	font-weight: 600;
}
.skip:focus { left: 12px; }

/* -- 3. Mise en page ------------------------------------------------------ */

.conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--serre { padding: clamp(32px, 4vw, 52px) 0; }

.section-tete {
	max-width: 720px;
	margin-bottom: clamp(28px, 4vw, 44px);
}
.section-tete--centre { margin-inline: auto; text-align: center; }

.surtitre {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--glace);
	margin-bottom: 12px;
}
.surtitre::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .6;
}
.section-tete--centre .surtitre::after {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .6;
}

.section-titre { margin-bottom: .35em; }

.section-chapo {
	color: var(--texte-2);
	font-size: 1.05rem;
	margin: 0;
}

/* Grilles automatiques : le nombre de colonnes suit la largeur disponible */
.grille { display: grid; gap: 18px; }
.grille--auto  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--2     { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* -- 4. En-tête et navigation --------------------------------------------- */

.entete {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(6, 10, 18, .78);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--bord);
}

.entete-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 72px;
}

/* Marque : gemme + lockup typographique. L'image du logo d'origine tient sur
   deux lignes et devient illisible sous 60px : elle est reservee au pied. */
.marque {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	color: var(--texte);
}
.marque:hover { color: #fff; }

.marque-gemme {
	position: relative;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	transform: rotate(45deg);
	background: linear-gradient(135deg, var(--glace), var(--violet));
	box-shadow: 0 0 18px rgba(99, 217, 255, .55);
	transition: box-shadow .25s ease, transform .25s ease;
}
.marque-gemme::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 3px;
	background: var(--nuit-900);
}
.marque:hover .marque-gemme {
	transform: rotate(135deg);
	box-shadow: 0 0 26px rgba(99, 217, 255, .85);
}

.marque-mot {
	font-family: var(--police-titre);
	font-size: 1.16rem;
	font-weight: 600;
	letter-spacing: .03em;
	white-space: nowrap;
}
.marque-sep { color: var(--texte-3); margin: 0 7px; font-weight: 400; }
.marque-mot b {
	font-weight: 600;
	background: linear-gradient(120deg, var(--glace), var(--violet) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

.nav > a {
	position: relative;
	display: block;
	padding: 9px 13px;
	border-radius: var(--r-s);
	color: var(--texte-2);
	font-size: .93rem;
	font-weight: 550;
	white-space: nowrap;
	transition: color .18s ease, background-color .18s ease;
}
.nav > a:hover { color: var(--texte); background: var(--voile); }

.nav > a.actif { color: #fff; }
.nav > a.actif::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--glace), var(--violet));
	box-shadow: 0 0 12px rgba(99, 217, 255, .8);
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: 12px;
	padding-left: 16px;
	border-left: 1px solid var(--bord);
}

/* Bouton hamburger, affiché seulement en dessous de 1080px (voir § 10) */
.nav-bascule {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 40px;
	padding: 0;
	background: var(--voile);
	border: 1px solid var(--bord);
	border-radius: var(--r-s);
	color: var(--texte);
	cursor: pointer;
}
.nav-bascule span {
	display: block;
	width: 18px;
	height: 2px;
	margin: 4px auto;
	background: currentColor;
	border-radius: 2px;
	transition: transform .22s ease, opacity .22s ease;
}
.nav-bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-bascule[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-bascule[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -- 5. Boutons ----------------------------------------------------------- */

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: .93rem;
	font-weight: 650;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease,
	            background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bouton:active { transform: translateY(1px); }

.bouton--principal {
	background: linear-gradient(135deg, var(--glace) 0%, var(--glace-2) 55%, var(--violet) 130%);
	color: #04121b;
	box-shadow: 0 10px 28px -12px rgba(99, 217, 255, .8);
}
.bouton--principal:hover {
	color: #04121b;
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -12px rgba(99, 217, 255, .95);
}

.bouton--fantome {
	background: var(--voile);
	border-color: var(--bord-fort);
	color: var(--texte);
}
.bouton--fantome:hover {
	color: #fff;
	background: var(--voile-fort);
	border-color: var(--glace);
	transform: translateY(-2px);
}

.bouton--or {
	background: linear-gradient(135deg, #ffd982, var(--or) 60%, #d99b2f);
	color: #2a1c02;
	box-shadow: 0 10px 28px -12px rgba(243, 197, 99, .75);
}
.bouton--or:hover { color: #2a1c02; transform: translateY(-2px); }

.bouton--grand { padding: 15px 30px; font-size: 1.02rem; }
.bouton--pleine { width: 100%; }
.bouton[disabled], .bouton--inactif {
	opacity: .5;
	pointer-events: none;
	box-shadow: none;
}

.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.boutons--centre { justify-content: center; }

/* -- 6. Cartes, panneaux, statistiques ------------------------------------ */

.carte {
	position: relative;
	padding: 22px;
	border: 1px solid var(--bord);
	border-radius: var(--r-l);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
	box-shadow: var(--ombre-1), var(--ombre-2);
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.carte--survol:hover {
	transform: translateY(-4px);
	border-color: var(--bord-fort);
	box-shadow: var(--ombre-1), var(--ombre-3);
}

/* Une carte peut etre un lien entier : on neutralise la couleur heritee */
a.carte { display: block; color: inherit; }
a.carte:hover { color: inherit; }
a.carte-fonction { display: flex; }

.carte-titre {
	display: block;
	font-family: var(--police-titre);
	font-size: 1.16rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 8px;
}

.carte-texte {
	display: block;
	color: var(--texte-2);
	font-size: .95rem;
	margin: 0;
}

/* Vignette : sprite ou illustration posée en haut de carte */
.carte-vignette {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 84px;
	margin-bottom: 14px;
}
.carte-vignette img { max-height: 84px; width: auto; }

/* Variante « fonctionnalité » : sprite à gauche, texte à droite */
.carte-fonction { display: flex; gap: 16px; align-items: flex-start; }
.carte-fonction .fonction-icone {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 70px;
	height: 70px;
	border-radius: var(--r-m);
	border: 1px solid var(--bord);
	background:
		radial-gradient(110% 110% at 50% 10%, rgba(99, 217, 255, .16), transparent 70%),
		rgba(99, 217, 255, .05);
}
.carte-fonction .fonction-icone img {
	max-height: 58px;
	max-width: 58px;
	width: auto;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6));
}

/* Fiche technique : libellé à gauche, valeur à droite */
.fiche { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fiche li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--bord);
	font-size: .93rem;
}
.fiche li:last-child { border-bottom: 0; padding-bottom: 0; }
.fiche .cle { color: var(--texte-2); }
.fiche .val {
	color: #fff;
	font-weight: 650;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Pastilles d'information */
.pastilles { display: flex; flex-wrap: wrap; gap: 9px; }

.pastille {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border: 1px solid var(--bord);
	border-radius: 999px;
	background: var(--voile);
	font-size: .82rem;
	font-weight: 600;
	color: var(--texte-2);
	white-space: nowrap;
}
.pastille b { color: var(--glace); font-weight: 700; }
.pastille--or b { color: var(--or); }
.pastille--code {
	font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
	font-size: .8rem;
	font-weight: 500;
	color: var(--glace);
	background: rgba(99, 217, 255, .08);
	padding: 4px 10px;
}

/* Statistiques chiffrées */
.stat { text-align: center; }
.stat-valeur {
	display: block;
	font-family: var(--police-titre);
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	background: linear-gradient(135deg, #fff, var(--glace));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.stat-libelle {
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--texte-3);
}

/* État des serveurs */
.etat-liste { list-style: none; margin: 0; padding: 0; }
.etat-liste li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--bord);
	font-size: .93rem;
}
.etat-liste li:last-child { border-bottom: 0; }
.etat-nom { color: var(--texte-2); }

.etat-valeur {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 650;
	font-size: .85rem;
	letter-spacing: .04em;
}
.etat-valeur--on  { color: var(--vert); }
.etat-valeur--off { color: var(--rouge); }
.etat-valeur--nc  { color: var(--texte-3); }

.puce {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}
.etat-valeur--on .puce { animation: battement 2.4s ease-in-out infinite; }

@keyframes battement {
	0%, 100% { box-shadow: 0 0 0 0 rgba(87, 224, 143, .45); }
	50%      { box-shadow: 0 0 0 7px rgba(87, 224, 143, 0); }
}

/* Barre d'etat sous le heros : verdict a gauche, detail des services a droite */
.etat-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	padding: 16px 24px;
}
.etat-titre {
	flex: 0 0 auto;
	padding-right: 28px;
	border-right: 1px solid var(--bord);
}
.etat-titre .etat-valeur { font-size: .96rem; letter-spacing: .01em; }

.etat-liste--enligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 26px;
	flex: 1 1 auto;
}
.etat-liste--enligne li {
	border-bottom: 0;
	padding: 0;
	gap: 9px;
	justify-content: flex-start;
}
.etat-liste--enligne .etat-nom { font-size: .86rem; }

/* -- 7. Composants de page ------------------------------------------------ */

/* 7.1 Héros de la page d'accueil */
.heros {
	position: relative;
	isolation: isolate;
	padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 84px);
	overflow: hidden;
}
.heros::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url(../images/large.PayonGreatTree.jpg.6511793618365019bed20923906a33fa.jpg);
	background-size: cover;
	background-position: center 38%;
	opacity: .42;
	transform: scale(1.04);
}
.heros::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(5, 8, 15, .55) 0%, rgba(5, 8, 15, .82) 55%, var(--nuit-900) 100%),
		linear-gradient(90deg, rgba(5, 8, 15, .85) 0%, rgba(5, 8, 15, .25) 60%, rgba(5, 8, 15, .7) 100%);
}

.heros-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
	gap: clamp(28px, 5vw, 56px);
	align-items: center;
}

.heros-titre {
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	margin-bottom: .3em;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .8);
}
.heros-titre .accent {
	background: linear-gradient(120deg, var(--glace), var(--violet) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.heros-chapo {
	max-width: 56ch;
	font-size: clamp(1rem, 1.7vw, 1.14rem);
	color: var(--texte-2);
	margin-bottom: 26px;
}

.heros .pastilles { margin-bottom: 28px; }

/* Le personnage d'accueil, posé sur un halo */
.heros-illustration {
	position: relative;
	display: grid;
	place-items: center;
}
.heros-illustration::before {
	content: "";
	position: absolute;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(99, 217, 255, .30), transparent 68%);
	filter: blur(6px);
}
.heros-illustration img {
	position: relative;
	max-height: 420px;
	width: auto;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .75));
	animation: flottement 7s ease-in-out infinite;
}

@keyframes flottement {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* Bandeau d'appel à l'action en bas de page */
.appel {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 5vw, 56px);
	border: 1px solid var(--bord-fort);
	border-radius: var(--r-xl);
	text-align: center;
	background:
		radial-gradient(120% 160% at 50% -30%, rgba(99, 217, 255, .20), transparent 60%),
		linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
	box-shadow: var(--ombre-1), var(--ombre-3);
}
.appel h2 { margin-bottom: .35em; }
.appel p { color: var(--texte-2); max-width: 60ch; margin-inline: auto; margin-bottom: 26px; }

/* 7.2 Bandeau de titre des pages secondaires */
.page-tete {
	position: relative;
	padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
	border-bottom: 1px solid var(--bord);
	background:
		radial-gradient(80% 140% at 20% 0%, rgba(47, 159, 214, .16), transparent 65%);
}
.page-tete h1 { margin-bottom: .25em; }
.page-tete p { color: var(--texte-2); max-width: 68ch; margin: 0; }

/* Fil d'ancres (sommaire d'une page longue) */
.ancres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
}
.ancres a {
	padding: 7px 14px;
	border: 1px solid var(--bord);
	border-radius: 999px;
	background: var(--voile);
	color: var(--texte-2);
	font-size: .84rem;
	font-weight: 600;
	transition: all .18s ease;
}
.ancres a:hover {
	color: #fff;
	border-color: var(--glace);
	background: rgba(99, 217, 255, .12);
	transform: translateY(-1px);
}

/* 7.3 Bloc thématique : illustration à gauche, cartes à droite */
.bloc {
	scroll-margin-top: 96px;
	padding: clamp(30px, 4vw, 48px) 0;
	border-top: 1px solid var(--bord);
}
.bloc:first-of-type { border-top: 0; }

.bloc-tete {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 26px;
}
.bloc-embleme {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border-radius: var(--r-l);
	border: 1px solid var(--bord);
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(99, 217, 255, .18), transparent 70%),
		var(--voile);
	box-shadow: var(--ombre-1);
}
.bloc-embleme img { max-height: 72px; max-width: 72px; width: auto; }

/* Variante « capture d'écran » : l'image remplit la vignette */
.bloc-embleme--photo { overflow: hidden; padding: 0; }
.bloc-embleme--photo img {
	max-height: none;
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bloc-tete h2 { margin: 0; }
.bloc-tete .bloc-soustitre { color: var(--texte-2); font-size: .96rem; margin: 4px 0 0; }

/* 7.4 Étapes numérotées */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 14px; }
.etapes li {
	counter-increment: etape;
	position: relative;
	padding: 16px 18px 16px 66px;
	border: 1px solid var(--bord);
	border-radius: var(--r-m);
	background: var(--voile);
	color: var(--texte-2);
}
.etapes li::before {
	content: counter(etape);
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--glace), var(--glace-2));
	color: #04121b;
	font-weight: 800;
	font-size: .92rem;
	font-variant-numeric: tabular-nums;
}
.etapes li strong { color: #fff; }

/* 7.4bis Carte de téléchargement et mise en avant du vote */
.telechargement { text-align: center; }
.telechargement-visuel {
	max-height: 110px;
	width: auto;
	margin: 0 auto 16px;
	display: block;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7));
}
.telechargement .carte-titre { text-align: center; }
.telechargement .alerte { text-align: left; }

.vote-recompense { display: flex; flex-direction: column; justify-content: center; }
.vote-gain {
	display: block;
	font-family: var(--police-titre);
	font-size: 1.4rem;
	color: var(--texte-2);
	margin-bottom: 10px;
}
.vote-gain b {
	font-size: 3.2rem;
	line-height: 1;
	margin-right: 10px;
	background: linear-gradient(135deg, #ffe6a8, var(--or) 70%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Code en ligne (commandes du jeu, noms de fichiers) */
code {
	font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
	font-size: .88em;
	padding: 2px 7px;
	border-radius: 6px;
	border: 1px solid var(--bord);
	background: rgba(99, 217, 255, .08);
	color: var(--glace);
}

/* 7.5 Actualités */
.actus { display: grid; gap: 16px; }

/* Le contenu vient de patcher/news.html, également lu par le patcher du jeu :
   on ne le modifie pas, on neutralise seulement ses couleurs en ligne. */
.actu-corps { color: var(--texte-2); font-size: .96rem; max-width: 860px; }
.actu-corps [style*="color"] { color: inherit !important; }
/* Le fichier contient des <br> orphelins entre les billets : sans effet ici */
.actu-corps > br { display: none; }
.actu-corps div {
	padding: 18px 20px;
	margin-bottom: 14px;
	border: 1px solid var(--bord);
	border-left: 3px solid var(--glace);
	border-radius: var(--r-m);
	background: var(--voile);
}
.actu-corps div:last-child { margin-bottom: 0; }
.actu-corps b { color: #fff; }
.actu-corps i { color: var(--texte-3); font-size: .88rem; }

/* 7.6 Cartes du staff */
.staff-carte { display: flex; gap: 20px; align-items: center; }
.staff-portrait {
	flex: 0 0 auto;
	width: 116px;
	height: 116px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	border: 1px solid var(--bord-fort);
	background: radial-gradient(120% 120% at 50% 0%, rgba(99, 217, 255, .18), transparent 70%);
}
.staff-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.staff-nom { font-family: var(--police-titre); font-size: 1.3rem; color: #fff; margin: 0; }
.staff-role {
	display: inline-block;
	margin: 6px 0 10px;
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(243, 197, 99, .12);
	border: 1px solid rgba(243, 197, 99, .35);
	color: var(--or);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.staff-desc { color: var(--texte-2); font-size: .95rem; margin: 0; }

/* 7.7 Règlement */
.reglement { padding: clamp(22px, 3vw, 36px); }
.regle-groupe { margin-bottom: 26px; }
.regle-groupe:last-child { margin-bottom: 0; }
.regle-numero {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-right: 12px;
	border-radius: var(--r-s);
	background: rgba(99, 217, 255, .12);
	border: 1px solid var(--bord);
	color: var(--glace);
	font-family: var(--police);
	font-weight: 800;
	font-size: .92rem;
	vertical-align: middle;
}
.regle-groupe h3 { display: flex; align-items: center; margin-bottom: 14px; }

.regle-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.regle-liste li {
	position: relative;
	padding-left: 26px;
	color: var(--texte-2);
	font-size: .95rem;
}
.regle-liste li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--glace);
	box-shadow: 0 0 8px rgba(99, 217, 255, .7);
}

.note {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: var(--r-m);
	border: 1px solid var(--bord);
	border-left: 3px solid var(--or);
	background: rgba(243, 197, 99, .06);
	color: var(--texte-2);
	font-size: .89rem;
}

/* Encarts d'information / succès / erreur */
.alerte {
	display: flex;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--r-m);
	border: 1px solid var(--bord);
	background: var(--voile);
	color: var(--texte-2);
	font-size: .95rem;
}
.alerte strong { display: block; color: #fff; margin-bottom: 2px; }
.alerte--succes { border-color: rgba(87, 224, 143, .45); background: rgba(87, 224, 143, .08); }
.alerte--erreur { border-color: rgba(255, 111, 111, .45); background: rgba(255, 111, 111, .08); }
.alerte--info   { border-color: rgba(243, 197, 99, .40);  background: rgba(243, 197, 99, .07); }

/* -- 8. Formulaires ------------------------------------------------------- */

.formulaire { display: grid; gap: 18px; max-width: 520px; }

.champ { display: grid; gap: 7px; }

.champ label {
	font-size: .86rem;
	font-weight: 650;
	color: var(--texte-2);
	letter-spacing: .02em;
}

.champ input[type="text"],
.champ input[type="password"],
.champ input[type="email"] {
	width: 100%;
	padding: 12px 15px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--texte);
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--bord);
	border-radius: var(--r-m);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.champ input::placeholder { color: var(--texte-3); }
.champ input:focus {
	outline: 0;
	border-color: var(--glace);
	background: rgba(0, 0, 0, .4);
	box-shadow: 0 0 0 3px rgba(99, 217, 255, .18);
}
.champ input:user-invalid { border-color: rgba(255, 111, 111, .6); }

.aide { font-size: .8rem; color: var(--texte-3); }

/* Choix du genre : deux pastilles cliquables */
.genre { display: flex; gap: 12px; }
.genre input { position: absolute; opacity: 0; width: 0; height: 0; }
.genre label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1px solid var(--bord);
	border-radius: 999px;
	background: var(--voile);
	color: var(--texte-2);
	cursor: pointer;
	transition: all .18s ease;
}
.genre label img { width: 24px; height: 24px; }
.genre label:hover { border-color: var(--bord-fort); color: var(--texte); }
.genre input:checked + label {
	border-color: var(--glace);
	background: rgba(99, 217, 255, .14);
	color: #fff;
	box-shadow: 0 0 20px -6px rgba(99, 217, 255, .8);
}
.genre input:focus-visible + label { outline: 2px solid var(--glace); outline-offset: 3px; }

.erreurs-formulaire { display: grid; gap: 6px; }

/* -- 9. Pied de page ------------------------------------------------------ */

.pied {
	margin-top: clamp(48px, 7vw, 90px);
	border-top: 1px solid var(--bord);
	background: rgba(5, 8, 15, .6);
	padding: clamp(36px, 5vw, 56px) 0 26px;
}

.pied-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px;
	margin-bottom: 30px;
}

/* L'illustration du logo tient sur deux lignes : elle a besoin de hauteur */
.pied-marque img {
	height: 86px;
	width: auto;
	margin-bottom: 14px;
	filter: brightness(1.15) drop-shadow(0 0 18px rgba(99, 217, 255, .3));
}
.pied-marque p { color: var(--texte-3); font-size: .9rem; max-width: 42ch; }

.pied h4 {
	font-family: var(--police);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--texte-3);
	margin-bottom: 12px;
}

.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied-liens a { color: var(--texte-2); font-size: .92rem; }
.pied-liens a:hover { color: var(--glace); }

.pied-bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 22px;
	border-top: 1px solid var(--bord);
	color: var(--texte-3);
	font-size: .84rem;
}

/* -- 10. Adaptatif -------------------------------------------------------- */

@media (max-width: 1080px) {
	.nav {
		position: fixed;
		inset: 72px 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		margin: 0;
		padding: 16px var(--gouttiere) 22px;
		background: rgba(6, 10, 18, .97);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--bord);
		box-shadow: var(--ombre-3);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	.nav.ouvert { transform: none; opacity: 1; visibility: visible; }
	.nav > a { padding: 12px 14px; font-size: 1rem; }
	.nav > a.actif::after { left: 14px; right: auto; width: 22px; bottom: 6px; }

	/* Les actions descendent dans le panneau : l'en-tete ne garde que
	   la marque et le bouton du menu, meme sur un ecran de 320px. */
	.nav-actions {
		margin: 12px 0 0;
		padding: 14px 0 0;
		border-left: 0;
		border-top: 1px solid var(--bord);
	}
	.nav-actions .bouton { flex: 1 1 0; }

	.nav-bascule { display: block; margin-left: auto; }
}

@media (max-width: 860px) {
	/* Une colonne : le texte d'abord, l'illustration ensuite — sinon le titre
	   et les boutons passent sous la ligne de flottaison. */
	.heros-grille { grid-template-columns: 1fr; }
	.heros { padding-bottom: 0; }
	.heros-illustration img { max-height: 230px; }
	.staff-carte { flex-direction: column; text-align: center; }
	.pied-grille { grid-template-columns: 1fr 1fr; }

	.etat-barre { gap: 12px 20px; padding: 16px 18px; }
	.etat-titre {
		flex: 1 1 100%;
		padding: 0 0 12px;
		border-right: 0;
		border-bottom: 1px solid var(--bord);
	}
}

@media (max-width: 720px) {
	.marque img { height: 38px; }
	.entete-inner { min-height: 64px; }
	.nav { inset-block-start: 64px; }
	.bloc-tete { flex-direction: column; align-items: flex-start; text-align: left; }
	.bloc-embleme { width: 72px; height: 72px; }
	.bloc-embleme img { max-height: 56px; max-width: 56px; }
}

@media (max-width: 520px) {
	.pied-grille { grid-template-columns: 1fr; }
	.boutons .bouton { width: 100%; }
	.carte { padding: 18px; }
}

/* L'animation ne doit jamais s'imposer à qui la refuse */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}