/* Overrides spécifiques à l'accueil */
:root {
--bg:#000000;
}
body, html {
	height: 100%;
}
body.home {
	background: #000000;
}
.home-wrap {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 24px;
	background: #000000;
}
.hero {
	display: grid;
	gap: 18px;
	justify-items: center;
	text-align: center;
}
.hero .logo {
	width: min(120px, 70vw);
	height: auto;
	filter: drop-shadow(0 20px 60px rgba(0,0,0,.65));
}
.tagline {
	font-size: 14px;
	color: var(--muted);
	letter-spacing: .4px;
}
.card-slab {
	margin-top: 10px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: radial-gradient(120% 160% at 100% -40%, rgba(252,177,15,.06), transparent 40%),  linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
	box-shadow: var(--shadow);
	font-size: 13px;
	color: #cfd7e6;
}
/* Menu type jeu vidéo */
.menu {
	margin-top: 18px;
	display: grid;
	gap: 10px;
	width: min(520px, 92vw);
}
.menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 18px;
	border-radius: 16px;
	border: 1px solid #252831;
	cursor: pointer;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
	user-select: none;
	background: linear-gradient(180deg, #15161a, #0f1013);
	color: #ffffff; /* texte blanc par défaut */
	box-shadow: 0 2px 0 #000;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
	outline: none;
}
.menu-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px rgba(0,0,0,.45);
	border-color: #3a3219;
	background: #fcb10f;   /* surbrillance jaune */
	color: #000;           /* texte noir lisible */
	text-shadow: none;
}
 .menu-btn.selected,  .menu-btn:focus-visible {
 background:#fcb10f;  /* surbrillance */
 color:#000000;        /* texte noir en surbrillance */
 border-color:#3a3219;
 text-shadow:none;
}
.menu small {
	opacity: .8;
	font-weight: 600;
}
/* Aide clavier */
.helper {
	margin-top: 12px;
	font-size: 12px;
	color: #9aa3b2;
}
/* --- Fond moderne, sobre (override) --- */
:root {
 --bg-0:#0a0b0e;
 --bg-1:#0d0f14;
 --bg-2:#0f1218;
 --accent-gold: rgba(252,177,15,.08);  /* lueur OR (très légère) */
 --accent-blue: rgba(114,160,255,.06); /* lueur BLEUE (très légère) */
}
/* Base : noir charbon en dégradé */
body.home {
	background: var(--bg-0);
}
.home-wrap {
	position: relative;
	isolation: isolate; /* garantit que les overlays restent derrière le contenu */
	background: radial-gradient(120% 160% at 110% -20%, var(--accent-gold), transparent 40%),  radial-gradient(120% 160% at -10% 120%, var(--accent-blue), transparent 45%),  linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
/* Vignette douce sur les bords (assombrit subtilement) */
.home-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at center,  transparent 40%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.75) 100%);
	z-index: 0;
}
/* Grille super fine (look “tech”, presque invisible) */
.home-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .05;
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 22px 22px, 22px 22px;
	/* fondu de la grille vers les bords */
	mask-image: radial-gradient(ellipse at 50% 35%, black, transparent 70%);
	z-index: 0;
}
/* S’assure que le contenu passe AU-DESSUS des overlays */
.hero {
	position: relative;
	z-index: 1;
}
/* Optionnel : halo subtil sous le logo pour le détacher un peu */
.hero .logo {
	filter: drop-shadow(0 14px 40px rgba(0,0,0,.55));
}