/*
	BagzNetwork · thème "GTA" de la boutique (par-dessus bz.css)
	Coucher de soleil sur Los Santos, menu d'interaction, affiches d'écran de chargement, cash vert.
	Pour revenir au thème sobre : retirer le chargement de gta.css dans inc/header.php.
*/

@font-face { font-family: "Anton"; src: url("../../fonts/gta/Anton-latin.woff2") format("woff2"), url("../../fonts/gta/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("../../fonts/gta/Yellowtail-latin.woff2") format("woff2"), url("../../fonts/gta/Yellowtail-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
	--gta-black: #050506;
	--gta-panel: #0d0d10;
	--gta-panel-2: #16161b;
	--gta-white: #f5f3ee;
	--gta-green: #5fcb5a;
	--gta-green-d: #2f8f3a;
	--gta-yellow: #ffcf4a;
	--gta-blue: #5db6ff;
	--gta-pink: #e2536d;
	--gta-purple: #5b2a86;
	--gta-orange: #ff9f45;
	--gta-display: "Anton", Impact, "Arial Narrow", sans-serif;
	--gta-script: "Yellowtail", "Brush Script MT", cursive;
}

body.bz,
body.bz .wrap { background: var(--gta-black) !important; }

/* ---------- Barre haute ---------- */

.bz-top { background: rgba(5, 5, 6, .92); border-bottom: 2px solid #000; }

body.bz .bz-logo,
body.bz .bz-logo:hover { color: var(--gta-white); font-family: var(--gta-display); font-weight: 400; font-size: 20px; letter-spacing: .06em; }
.bz-logo .thin { color: var(--gta-yellow); font-weight: 400; }
.bz-logo-tag { border: 0; border-radius: 3px; background: var(--gta-green-d); color: #fff; font-family: var(--gta-display); font-size: 12px; letter-spacing: .1em; }

body.bz .bz-menu a {
	color: #c9c6bf;
	font-family: var(--gta-display);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 3px;
}

body.bz .bz-menu a:hover { background: var(--gta-white); color: #000; }
body.bz .bz-menu a.on { background: var(--gta-white); color: #000; }
.bz-menu a.on::after { display: none; }

body.bz .bz-btn-steam,
body.bz .bz-btn-steam:hover {
	border-radius: 3px;
	background: var(--gta-white);
	color: #000;
	font-family: var(--gta-display);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 4px 4px 0 #000;
}

body.bz .bz-btn-steam:hover { background: var(--gta-yellow); }
.bz-avatar { background: var(--gta-green-d); color: #fff; }
body.bz .bz-user, body.bz .bz-icon-btn { border-radius: 3px; border-color: #2a2a30; }

/* ---------- Coucher de soleil (en-tête) ---------- */

.gta-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 400px;
	margin-top: 8px;
	padding: 40px !important;
	border: 3px solid #000;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 10px 10px 0 #000;
	grid-template-columns: none;
}

.gta-sky {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.gta-sky .palm path { stroke: #0d0618; stroke-linecap: round; }
.gta-sky .gta-city .w { fill: #ffcf4a; opacity: .85; }

.gta-hero .bz-hero-text { position: relative; z-index: 1; max-width: 620px; }

.gta-script {
	display: block;
	margin: 0 0 -6px 6px;
	color: var(--gta-yellow);
	font-family: var(--gta-script);
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1;
	text-shadow: 3px 3px 0 #000;
	transform: rotate(-4deg);
	transform-origin: left bottom;
}

body.bz .gta-hero h1 {
	margin: 0 0 14px;
	color: var(--gta-white) !important;
	font-family: var(--gta-display) !important;
	font-size: clamp(56px, 9vw, 112px);
	font-weight: 400;
	line-height: .95;
	letter-spacing: .01em;
	text-transform: uppercase;
	-webkit-text-stroke: 3px #000;
	paint-order: stroke fill;
	text-shadow: 6px 6px 0 #000;
}

.gta-hero p {
	display: inline-block;
	max-width: 560px;
	padding: 10px 14px;
	background: rgba(0, 0, 0, .72);
	color: var(--gta-white);
	font-size: 16px;
	line-height: 1.5;
}

body.bz .gta-hero code { border-color: #000; background: var(--gta-yellow); color: #000; font-weight: 700; }

/* Étapes = objectifs de mission */
.gta-steps {
	margin: 22px 0 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	gap: 12px;
	overflow: visible !important;
}

.gta-steps li {
	padding: 16px 18px !important;
	border: 2px solid #000;
	background: var(--gta-panel) !important;
	color: #bdbab3 !important;
	box-shadow: 5px 5px 0 #000;
}

.gta-steps li + li { border-left: 2px solid #000 !important; }
.gta-steps .mono { color: var(--gta-yellow) !important; }
.gta-steps b { color: var(--gta-white) !important; font-family: var(--gta-display); font-size: 20px !important; font-weight: 400 !important; letter-spacing: .03em; text-transform: uppercase; }
.gta-steps em { font-style: normal; font-weight: 700; }
.gta-k-blue { color: var(--gta-blue); }
.gta-k-green { color: var(--gta-green); }
.gta-k-yellow { color: var(--gta-yellow); }

/* ---------- Barre d'outils = onglets du menu ---------- */

.bz-cats { border: 2px solid #000; border-radius: 3px; background: var(--gta-panel); box-shadow: 5px 5px 0 #000; }

body.bz .bz-cats .categoryLink {
	border-radius: 2px;
	color: #c9c6bf !important;
	font-family: var(--gta-display);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
}

body.bz .bz-cats .categoryLink:hover { background: #2a2a30 !important; }
body.bz .bz-cats .categoryLink.on { background: var(--gta-white) !important; color: #000 !important; }
.categoryLink.on .bz-count { background: #000; color: #fff; }

body.bz .bz-tools input,
body.bz .bz-tools select { border: 2px solid #000; border-radius: 3px; background-color: var(--gta-panel) !important; box-shadow: 5px 5px 0 #000; }

/* ---------- En-têtes de section = menu d'interaction ---------- */

.bz-section-head { display: block; margin: 28px 0 22px; }

.gta-menu-banner {
	position: relative;
	padding: 18px 24px 14px;
	border: 2px solid #000;
	border-bottom: 0;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 14px, transparent 14px 28px),
		linear-gradient(90deg, var(--gta-purple), var(--gta-pink) 70%, var(--gta-orange));
}

.bz-section:not([data-show]) .gta-menu-banner {
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px),
		linear-gradient(90deg, #14532d, var(--gta-green-d) 60%, #7ccf4f);
}

body.bz .gta-menu-banner h2 {
	margin: 0;
	color: #fff !important;
	font-family: var(--gta-script) !important;
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0;
	text-shadow: 3px 3px 0 #000;
}

.gta-menu-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px 10px 24px;
	border: 2px solid #000;
	background: #000;
	box-shadow: 8px 8px 0 rgba(0, 0, 0, .6);
}

.gta-menu-sub { color: var(--gta-white); font-family: var(--gta-display); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }

/* Bascule 30 JOURS / PERM : élément de menu sélectionné en blanc */
.bz-switch { border: 0; border-radius: 0; background: none; padding: 0; gap: 4px; }
.bz-switch::before { display: none; }

body.bz .bz-switch button {
	min-width: 110px;
	height: 38px;
	border-radius: 2px;
	background: var(--gta-panel-2);
	color: #c9c6bf;
	font-family: var(--gta-display);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .08em;
}

body.bz .bz-switch button:hover { background: #2a2a30; }
body.bz .bz-switch button.on { background: var(--gta-white); color: #000; }

/* ---------- Cartes = affiches d'écran de chargement ---------- */

.bz-grid { gap: 26px; }

.bz-card {
	border: 2px solid #000;
	border-radius: 3px;
	background: var(--gta-panel);
	box-shadow: 8px 8px 0 #000;
	overflow: visible;
	transition: transform .3s var(--bz-ease), box-shadow .3s var(--bz-ease);
}

.bz-card:hover { border-color: #000; transform: translate(-3px, -4px) rotate(-.6deg); box-shadow: 12px 12px 0 #000; }
.bz-card.is-featured { border-color: #000; box-shadow: 8px 8px 0 var(--gta-yellow), 8px 8px 0 2px #000; }
.bz-card.is-featured:hover { box-shadow: 12px 12px 0 var(--gta-yellow); }

.bz-card-media {
	margin: 10px 10px 0;
	border: 5px solid var(--gta-white);
	border-radius: 0;
	box-shadow: 4px 4px 0 #000;
}

.bz-card-main { overflow: hidden; }

body.bz .bz-card-title {
	font-family: var(--gta-display) !important;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.bz-duration { border: 2px solid var(--gta-white); border-radius: 2px; color: var(--gta-white); font-family: var(--gta-display) !important; font-size: 13px; font-weight: 400; letter-spacing: .1em; }
.bz-duration-perm { border-color: #000; background: var(--gta-yellow); color: #000; }

.bz-price {
	color: var(--gta-green);
	font-family: var(--gta-display);
	font-size: 36px;
	font-weight: 400;
	letter-spacing: .02em;
	-webkit-text-stroke: 1.5px #000;
	paint-order: stroke fill;
	text-shadow: 3px 3px 0 #000;
}

@media (min-width: 1100px) {
	.bz-section[data-show] .bz-card-title { font-size: 24px; }
	.bz-section[data-show] .bz-price { font-size: 32px; }
}

.bz-tag { border: 0; border-radius: 2px; background: #2a2a30; color: var(--gta-white); font-family: var(--gta-display); font-size: 12px; letter-spacing: .1em; }
.bz-tag-blue { background: var(--gta-yellow); color: #000; }

body.bz .bz-perks-btn { border-top-color: #26262c; font-family: var(--gta-display); font-size: 15px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.bz-plus { border-radius: 2px; border-color: var(--gta-white); }
.bz-plus::before, .bz-plus::after { background: var(--gta-white); }

/* Avantages au survol = menu d'interaction */
.bz-card-perks { padding: 0; gap: 0; border-top: 0; background: rgba(5, 5, 6, .97); }

.bz-perks-head {
	padding: 16px 18px;
	border: 0;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 12px, transparent 12px 24px),
		linear-gradient(90deg, var(--gta-purple), var(--gta-pink));
}

.bz-section:not([data-show]) .bz-perks-head {
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 12px, transparent 12px 24px),
		linear-gradient(90deg, #14532d, var(--gta-green-d));
}

.bz-perks-title { color: #fff; font-family: var(--gta-script); font-size: 30px; font-weight: 400; line-height: 1; text-shadow: 2px 2px 0 #000; }

.bz-card-perks .bz-card-desc { padding: 6px 0 12px; }
.bz-card-perks .bz-card-desc ul { margin: 0; }

.bz-card-perks .bz-card-desc li {
	padding: 9px 16px 9px 40px;
	border-top: 0;
	color: #d6d3cc;
	transition: background-color .15s, color .15s;
}

.bz-card-perks .bz-card-desc li:nth-child(odd) { background: rgba(255, 255, 255, .035); }
.bz-card-perks .bz-card-desc li:hover { background: var(--gta-white); color: #000; }
.bz-card-perks .bz-card-desc li:hover b { color: #000; }
.bz-card-perks .bz-card-desc li::before { left: 16px; top: 15px; border-color: var(--gta-green); }
.bz-card-perks .bz-card-desc small { padding: 0 16px; color: #8d8a84; }

/* Boutons d'achat */
body.bz .bz-btn-primary,
body.bz .bz-btn-primary:hover {
	border: 2px solid #000;
	border-radius: 3px;
	background: var(--gta-green-d);
	color: #fff;
	font-family: var(--gta-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 4px 4px 0 #000;
}

body.bz .bz-btn-primary:hover { background: var(--gta-green); color: #000; }

body.bz .bz-btn-ghost,
body.bz .bz-btn-ghost:hover {
	border: 2px solid var(--gta-white);
	border-radius: 3px;
	background: transparent;
	color: var(--gta-white);
	font-family: var(--gta-display);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
}

body.bz .bz-btn-ghost:hover { background: var(--gta-white); color: #000; }

.bz-note { border-radius: 2px; background: #10220f; color: var(--gta-green); }

/* ---------- Pages annexes et pied de page ---------- */

body.bz .header { font-family: var(--gta-display) !important; font-weight: 400 !important; letter-spacing: .03em; text-transform: uppercase; }
body.bz.bz-page-tos .content h2, body.bz.bz-page-privacy .content h2, body.bz.bz-page-cookies .content h2 { color: var(--gta-yellow) !important; font-family: var(--gta-display) !important; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }

.bz-foot { border-top: 2px solid #000; background: #000; }
.bz-foot-title { color: var(--gta-yellow); font-family: var(--gta-display); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
	.bz-menu { background: #000; }
	body.bz .bz-menu a.on, body.bz .bz-menu a:hover { background: var(--gta-white); color: #000; }
}

@media (max-width: 560px) {
	.gta-hero { min-height: 340px; padding: 22px !important; box-shadow: 6px 6px 0 #000; }
	.gta-sky .gta-sign { display: none; }
	body.bz .gta-hero h1 { -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; }
	.gta-hero p { font-size: 14px; }
	.gta-steps { gap: 8px; }
	.gta-steps li { box-shadow: 3px 3px 0 #000; }
	.gta-steps b { font-size: 15px !important; }
	.gta-menu-banner { padding: 14px 16px 10px; }
	.gta-menu-bar { padding: 10px; }
	.gta-menu-sub { display: none; }
	.bz-card, .bz-card:hover { box-shadow: 6px 6px 0 #000; transform: none; }
}

/* ---------- Barre de défilement GTA : piste noire, curseur blanc, jaune au survol, vert au clic ---------- */

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
	background:
		repeating-linear-gradient(180deg, transparent 0 22px, rgba(255, 255, 255, .03) 22px 24px),
		var(--gta-black);
	border-left: 2px solid #000;
}
::-webkit-scrollbar-thumb {
	min-height: 64px;
	border: 4px solid var(--gta-black);
	border-radius: 2px;
	background: var(--gta-white);
	box-shadow: inset 0 0 0 1px #000;
}
::-webkit-scrollbar-thumb:hover { background: var(--gta-yellow); }
::-webkit-scrollbar-thumb:active { background: var(--gta-green); }
::-webkit-scrollbar-corner { background: var(--gta-black); }

.bz-card-perks::-webkit-scrollbar { width: 8px; }
.bz-card-perks::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border: 0; }
.bz-card-perks::-webkit-scrollbar-thumb { min-height: 28px; border: 2px solid transparent; border-radius: 2px; background: var(--gta-white); background-clip: padding-box; box-shadow: none; }
.bz-card-perks::-webkit-scrollbar-thumb:hover { background: var(--gta-yellow); background-clip: padding-box; }

@supports (-moz-appearance: none) {
	html { scrollbar-color: var(--gta-white) var(--gta-black); }
	.bz-card-perks { scrollbar-color: var(--gta-white) transparent; }
}