:root {
	--brand: #1e9bff;
	--brand-light: #4db4ff;
	--brand-dark: #0b5fb3;
	--cyan: #22d3ee;
	--navy: #0b2a4a;
	--bg: #1a1a1a;
	--surface: #1f1f1f;
	--surface-2: #1f1f1f;
	--black-card: #0f0f0f;
	--border: transparent;
	--text: #e5e5e5;
	--muted: #a3a3a3;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: Roboto, sans-serif;
	line-height: 1.5;
}

::-webkit-scrollbar { width: 16px; background: transparent; }
::-webkit-scrollbar-thumb { background: #3a4452; border-radius: 16px; border: 5px solid var(--bg); }
::-webkit-scrollbar-button { display: none; }

.wrapper {
	display: flex; flex-direction: column; min-height: 100vh;
	max-width: 64rem; margin: 0 1.5rem;
}
@media (min-width: 1024px) { .wrapper { margin: 0 auto; } }

/* Header */
.header { display: flex; align-items: center; justify-content: space-between; padding: 1.75rem 0 1.5rem; }
.brand { display: flex; align-items: center; }
.brand img { height: 1.75rem; width: auto; }
@media (min-width: 1024px) { .brand img { height: 1.5rem; } }
.nav { display: none; margin-left: 2rem; margin-right: auto; gap: 1.5rem; font-weight: 600; }
.nav a, .socials a { color: #d1d5db; transition: all .2s; }
.nav a:hover, .socials a:hover { color: #fff; }
.socials { display: none; gap: 1rem; }
.socials a { padding: 0 .5rem; font-size: 1.1rem; }
.menu-btn { display: flex; align-items: center; color: #d1d5db; }
.menu-btn svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) {
	.nav, .socials { display: flex; }
	.menu-btn { display: none; }
}

/* Menu mobile */
.mobile-menu {
	position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column;
	align-items: center; justify-content: space-between; padding: 2rem 0;
	background: rgba(0, 0, 0, .8); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
}
.mobile-menu.open { display: flex; animation: fadeIn .3s ease-out; }
.mobile-menu .close { position: absolute; top: 1rem; right: 1.25rem; font-size: 2.5rem; line-height: 1; color: #d1d5db; }
.mm-logo { height: 3rem; width: 3rem; border-radius: 50%; margin-top: 1rem; }
.mobile-menu ul { text-align: center; font-size: 1.5rem; font-weight: 600; display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-menu ul a:hover { color: #fff; }
.mm-socials { display: flex; gap: 1rem; font-size: 1.9rem; color: #d1d5db; }

/* Grille bento */
.main { flex: 1; display: flex; }
.bento {
	display: grid; gap: 1rem; margin: 0 auto; width: 100%;
	grid-template-columns: 1fr; grid-auto-rows: 12rem;
}
@media (min-width: 475px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11.4rem; } }

.card {
	position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
	border-radius: 1.25rem; border: 1px solid #222; background: #2a2a2a;
	transition: all .5s cubic-bezier(.4, 0, .2, 1);
}
.card:active { transform: scale(.95); }

.row-2 { grid-row: span 2; }
@media (min-width: 475px) { .col-2 { grid-column: span 2; } }
@media (min-width: 640px) { .col-3 { grid-column: span 3; } }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: flex; } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 475px) and (max-width: 639px) {
	.home-profile { grid-column: 1; grid-row: 1 / span 2; }
	.home-neyzury-youtube { grid-column: 2; grid-row: 1; }
	.home-millitair-twitch { grid-column: 2; grid-row: 2; }
	.home-gaming { grid-column: 1; grid-row: 3; }
	.home-neyzury-twitch { grid-column: 2; grid-row: 3; }
	.home-join { grid-column: 1 / span 2; grid-row: 4; }
	.home-about { grid-column: 1; grid-row: 5; }
	.home-millitair-youtube { grid-column: 2; grid-row: 5; }
	.home-friend { grid-column: 1 / span 2; grid-row: 6; }
}
@media (min-width: 640px) and (max-width: 1023px) {
	.home-profile { grid-column: 1; grid-row: 1 / span 2; }
	.home-neyzury-youtube { grid-column: 2; grid-row: 1; }
	.home-millitair-twitch { grid-column: 3; grid-row: 1; }
	.home-code { grid-column: 3; grid-row: 2; }
	.home-banner { grid-column: 1 / span 3; grid-row: 3; }
	.home-gaming { grid-column: 1; grid-row: 4; }
	.home-neyzury-twitch { grid-column: 2; grid-row: 4; }
	.home-about { grid-column: 3; grid-row: 4; }
	.home-join { grid-column: 1 / span 2; grid-row: 5; }
	.home-millitair-youtube { grid-column: 3; grid-row: 5; }
	.home-friend { grid-column: 1 / span 3; grid-row: 6; }
}
@media (min-width: 1024px) {
	.home-profile { grid-column: 1; grid-row: 1 / span 2; }
	.home-neyzury-youtube { grid-column: 2; grid-row: 1; }
	.home-code { grid-column: 3; grid-row: 1; }
	.home-millitair-twitch { grid-column: 4; grid-row: 1; }
	.home-banner { grid-column: 2 / span 3; grid-row: 2; }
	.home-gaming { grid-column: 1; grid-row: 3; }
	.home-neyzury-twitch { grid-column: 2; grid-row: 3; }
	.home-join { grid-column: 3 / span 2; grid-row: 3; }
	.home-about { grid-column: 1; grid-row: 4; }
	.home-millitair-youtube { grid-column: 2; grid-row: 4; }
	.home-friend { grid-column: 3 / span 2; grid-row: 4; }
}

/* Carte d'identité */
.card-id {
	background: radial-gradient(circle at 30% 20%, rgba(34, 211, 238, .35), transparent 50%),
		linear-gradient(160deg, var(--brand), var(--navy));
}
.id-badge { position: relative; margin: 1.5rem 1.25rem 0; top: 2rem; border: 1px solid #3b4857; border-radius: 1.25rem; }
.id-top {
	position: relative; background: var(--black-card); padding: 1.5rem .75rem 4.5rem;
	border-radius: 1.25rem 1.25rem 0 0; min-height: 11rem;
}
.id-top h2 { font-size: 1.9rem; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.1; }
.id-top p { color: #fff; font-size: 1rem; margin-bottom: .25rem; }
.id-top h3 { font-size: .875rem; font-weight: 600; color: var(--brand); }
.id-logo { position: absolute; right: .25rem; bottom: .5rem; height: 6rem; width: 6rem; border-radius: 50%; }
.id-bottom { background: var(--black-card); height: 3rem; border-radius: 0 0 1.25rem 1.25rem; padding: .6rem 1rem; }
.barcode {
	display: block; width: 7rem; height: 1.8rem;
	background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 13px);
}

/* Cartes lien */
.card-link { background: var(--black-card); transition: all .1s; }
.card-link:hover { transform: scale(1.03) rotate(2deg); }
.card-link.tilt-l:hover { transform: scale(1.03) rotate(-2deg); }
.card-title {
	background: var(--surface-2); padding: 1rem; text-align: center; font-weight: 700;
	font-size: 1.125rem; text-transform: uppercase; border-radius: 1.25rem 1.25rem 0 0;
}
.card-body.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; }
.big { font-size: 3.2rem; color: var(--brand); }
.sub { color: var(--muted); font-size: .8rem; }
.card-link:hover .big { color: var(--cyan); }

/* Cartes icône */
.icon-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.icon-card i { font-size: 3rem; }
.icon-card span { font-weight: 700; text-transform: uppercase; font-size: .95rem; letter-spacing: .05em; }
.card-accent { background: var(--brand); color: #fff; }
.card-accent:hover { background: var(--brand-light); }
.card-dark { background: var(--surface-2); }
.card-dark i { color: var(--cyan); }
.card-grid {
	background-color: var(--black-card); border-color: #444;
}
.card-grid::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(#3a4452 1px, transparent 1px, transparent calc(100% - 1px), #3a4452 calc(100% - 1px)),
		linear-gradient(90deg, #3a4452 1px, transparent 1px, transparent calc(100% - 1px), #3a4452 calc(100% - 1px));
	background-size: 14% 20%;
	-webkit-mask-image: linear-gradient(to right, #000, transparent);
	mask-image: linear-gradient(to right, #000, transparent);
}
.card-grid > * { position: relative; z-index: 1; }
.card-grid i { color: var(--brand); }

/* Bannière */
.card-banner { background: #fff; align-items: center; justify-content: center; }
.card-banner img { width: 100%; height: 100%; object-fit: cover; }

/* Rejoindre */
.card-join {
	background: radial-gradient(circle at 85% 50%, rgba(34, 211, 238, .25), transparent 45%),
		linear-gradient(120deg, #071a2e, var(--navy));
	border-color: #1c3a5c;
}
.join-inner { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; height: 100%; justify-content: center; }
.join-inner h2 { font-family: Sora, sans-serif; font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.2; }
.join-inner p { color: var(--muted); font-size: .85rem; }
.join-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* Bouton slide-fill */
.btn { position: relative; display: inline-block; font-size: .95rem; }
.btn-face {
	position: relative; z-index: 10; display: block; overflow: hidden; padding: .6rem 1rem;
	border: 2px solid rgba(255, 255, 255, .2); border-radius: .5rem; font-weight: 500; line-height: 1.25;
	color: #fff; background: var(--surface); transition: color .3s ease-out;
}
.btn-fill {
	position: absolute; left: 0; width: 12rem; height: 12rem; margin-left: -.5rem;
	background: var(--brand); transform-origin: top right;
	transform: translate(-100%, 3rem) rotate(-90deg); transition: all .3s ease-out;
}
.btn:hover .btn-fill { transform: translate(-100%, 3rem) rotate(-180deg); }
.btn-label { position: relative; white-space: nowrap; }
.btn-shadow {
	position: absolute; bottom: 0; right: 0; width: 100%; height: 3rem; margin: 0 -.25rem -.25rem 0;
	background: #3a4452; border-radius: .5rem; transition: all .2s linear;
}
.btn:hover .btn-shadow { margin: 0; }
.btn.alt .btn-fill { background: var(--cyan); }
.btn.alt:hover .btn-label { color: #06293a; }

/* Footer */
.footer {
	margin: .75rem 0; padding: 0 1rem; text-align: center; font-size: .875rem;
	font-style: italic; color: #9ca3af; display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
@media (min-width: 1024px) { .footer { flex-direction: row; } }
@media (min-width: 1024px) { .footer { justify-content: space-between; text-align: left; } }

/* Pages */
.page-fade { flex: 1; width: 100%; animation: fadeIn .2s ease-out; }
.underline { text-decoration: underline; }
.nav a.active { color: #fff; }
.page-fade-in { flex: 1; width: 100%; }
.page-fade-in > *:not(.pageContainer) { animation: pageFadeIn .2s ease-out; }
.card-photo { padding: 0; }
.card-photo .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card-photo:hover .photo { transform: scale(1.08); }
.card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 60%); }
.photo-label { position: absolute; z-index: 2; left: 1rem; bottom: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.card-channel { background: #1f1f1f; }
.card-channel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.card-channel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .85)); }
.card-channel:hover > img { transform: scale(1.06); }
.channel-label { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: .85rem; display: flex; align-items: center; gap: .65rem; color: #fff; text-shadow: 0 1px 5px #000; }
.channel-label > i { color: var(--brand-light); font-size: 1.4rem; }
.channel-label > span { display: flex; flex-direction: column; font-weight: 700; line-height: 1.2; }
.channel-label small { margin-top: .15rem; color: #e5e5e5; font-size: .75rem; font-weight: 500; }
.card-channel.tilt-r, .card-channel.tilt-l { transition: all .1s cubic-bezier(.4, 0, .2, 1); }
.card-channel.tilt-r:hover { transform: scale(1.03) rotate(2deg); }
.card-channel.tilt-l:hover { transform: scale(1.03) rotate(-2deg); }
.card-channel.tilt-r:active, .card-channel.tilt-l:active { transform: scale(.95); }
.card-friend { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1.5rem; background: radial-gradient(circle at 85% 50%, rgba(30, 155, 255, .18), transparent 42%), #2a2a2a; }
.card-friend > i { color: var(--brand-light); font-size: 2rem; }
.card-friend > div { display: flex; flex-direction: column; }
.card-friend strong { color: #fff; }
.card-friend span { color: var(--muted); font-size: .8rem; }

.hero { text-align: center; padding: 1rem 0 2.5rem; }
.tag { display: inline-block; padding: .2rem .8rem; border-radius: 999px; background: rgba(30, 155, 255, .15); color: var(--brand-light); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.hero h1 { margin: .75rem 0 .5rem; font-family: Sora, sans-serif; font-size: 2.25rem; line-height: 1.2; color: #fff; }
.hero p { max-width: 36rem; margin: 0 auto; color: var(--muted); }
@media (min-width: 768px) { .hero h1 { font-size: 3rem; } }

.pill {
	display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border-radius: 999px;
	background: var(--brand); color: #fff; font-weight: 600; transition: all .2s;
}
.pill:hover { background: var(--brand-light); transform: translateY(-2px); }

.split {
	display: grid; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; padding: 1.5rem;
	background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; overflow: hidden;
}
@media (min-width: 768px) {
	.split { grid-template-columns: 1fr 1fr; padding: 2rem; }
	.split.reverse .split-img { order: -1; }
}
.split-text h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: .75rem; color: #fff; }
.split-text h2 i { color: var(--brand); margin-right: .5rem; }
.split-text p { color: var(--muted); margin-bottom: 1rem; }
.checks { margin-bottom: 1.25rem; display: grid; gap: .4rem; }
.checks li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--cyan); margin-right: .6rem; }
.split-img { width: 100%; border-radius: 1rem; border: 1px solid var(--border); }
.split-img.light { background: #fff; }

.about { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; }
@media (min-width: 768px) { .about { grid-template-columns: 14rem 1fr; padding: 2rem; } }
.about-logo { width: 12rem; height: 12rem; margin: 0 auto; border-radius: 50%; }
.about-text p { color: var(--muted); margin-bottom: .75rem; }
.about-text strong { color: #fff; }

.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.25rem; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 1.25rem; transition: all .2s; }
.stat:hover { transform: translateY(-4px); border-color: var(--brand); }
.stat i { font-size: 1.8rem; color: var(--brand); margin-bottom: .25rem; }
.stat span { color: var(--muted); font-size: .8rem; }
.banner-wide { background: #fff; border-radius: 1.25rem; overflow: hidden; margin-bottom: 1.5rem; }

.contact-grid { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2rem 1.5rem; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 1.25rem; transition: all .2s; }
.contact-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--brand); }
.contact-card i { font-size: 3rem; color: var(--brand); }
.contact-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; }
.contact-card p { color: var(--muted); font-size: .9rem; }
.contact-card span { color: var(--cyan); font-weight: 500; }

.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.notfound h1 { font-family: Sora, sans-serif; font-size: 8rem; line-height: 1; color: var(--brand); opacity: .9; }
.notfound p { color: var(--muted); }