/*
Theme Name: Meilleurs Jeux PC
Description: Thème enfant GeneratePress de meilleurs-jeux-pc.com. Maquette B « Choisis ton joueur » : l'accueil est un écran de sélection de joueur pour celui qui offre ; huit profils, chacun avec ses jauges, ses jeux, son matériel et son combo cadeau. Design sombre seulement (une arène de nuit). Motifs en blocs natifs et cartes Fox Blocks, Chakra Petch et Barlow hébergées. Socle Fox embarqué (fox-socle/). Présentation seulement.
Author: Fox
Template: generatepress
Version: 1.0.3
Fox Socle: 1.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meilleursjeuxpc-theme
*/

/*
 * Colours: the GeneratePress palette of inc/site.php, through its variables
 * (--contrast light ink, --contrast-2 lavender, --contrast-3 violet line,
 * --base sunken, --base-2 arena, --base-3 panel, --accent selection yellow,
 * --on-accent, the eight player colours and the three gauge colours).
 * Fonts: Barlow (text), Chakra Petch 700 italic (titles, names), hosted.
 *
 * The selector: .mjpc-roster holds one link per player, each aiming at the
 * anchor of a .mjpc-profil panel. Without JavaScript every panel shows; with
 * it (html.mjpc-js) only the chosen one (.is-on). Gauges: .mjpc-jauge-1 to
 * -5 set the bar. No text is ever written by this file.
 */

:root {
	color-scheme: dark;
	--mjpc-display: "Chakra Petch", "Arial Narrow", sans-serif;
	--mjpc-radius: 12px;
	--mjpc-glow: color-mix(in srgb, var(--violet, #5b2bd6) 34%, transparent);
}

html {
	overflow-x: clip; /* an .alignfull band is 100vw wide, scrollbar included */
}

body {
	font-family: Barlow, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.main-title {
	font-family: var(--mjpc-display);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
	text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.3rem; }

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

.entry-content a:not([class]) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---- Header ---- */

.site-header {
	border-bottom: 1px solid var(--contrast-3);
}

.main-title a {
	font-size: 1.45rem;
	text-decoration: none;
	box-shadow: inset 0 -0.18em 0 var(--accent);
}

.main-navigation .main-nav ul li a {
	font-weight: 600;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	box-shadow: inset 0 -3px 0 var(--accent);
}

/*
 * Group wrappers. Without theme.json layout support (GeneratePress), WordPress
 * wraps the inner blocks of every group in .wp-block-group__inner-container.
 * The grids and flows below are written for the blocks themselves, so the
 * wrapper steps aside: its children become the children of the group.
 */
[class*="mjpc-"] > .wp-block-group__inner-container {
	display: contents;
}

/* ---- Scene (home) ---- */

.mjpc-scene {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 5vw, 48px) max(20px, env(safe-area-inset-right, 0px)) clamp(36px, 6vw, 56px) max(20px, env(safe-area-inset-left, 0px));
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, var(--mjpc-glow), transparent 70%),
		linear-gradient(180deg, var(--base-2) 0%, var(--base) 100%);
	text-align: center;
}

.mjpc-scene::after {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: 0;
	height: 120px;
	background:
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--contrast) 5%, transparent) 0 2px, transparent 2px 60px),
		linear-gradient(0deg, color-mix(in srgb, var(--violet, #5b2bd6) 22%, transparent), transparent);
	transform: perspective(300px) rotateX(55deg);
	transform-origin: bottom;
	pointer-events: none;
}

.mjpc-scene > *,
.mjpc-scene > :where(.wp-block-group__inner-container) > * {
	position: relative;
	z-index: 1;
	max-width: 1220px;
	margin-left: auto;
	margin-right: auto;
}

.mjpc-round,
.mjpc-kicker {
	font-family: var(--mjpc-display);
	font-style: italic;
	font-size: 0.8rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin-bottom: 0.4em;
}

.mjpc-titre {
	font-size: clamp(2.6rem, 8vw, 5.4rem);
	line-height: 0.92;
	margin: 0.15em auto 0.25em;
	text-shadow: 0 4px 0 var(--violet, #5b2bd6);
}

.mjpc-accroche {
	max-width: 56ch;
	color: var(--contrast-2);
	font-size: 1.1rem;
	margin-bottom: 1.6em;
}

/* ---- Roster ---- */

.mjpc-roster {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 10px;
	text-align: left;
}

.mjpc-fighter {
	margin: 0;
}

.mjpc-fighter a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4.1;
	max-width: 100%;
	padding: 10px;
	border: 2px solid var(--contrast-3);
	border-radius: 10px;
	background: var(--mjpc-portrait, var(--base-3));
	position: relative;
	overflow: hidden;
	font-family: var(--mjpc-display);
	font-style: italic;
	font-size: 0.92rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--contrast);
	text-decoration: none;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
	transition: transform 0.12s, border-color 0.12s;
}

/* Silhouette: head and shoulders drawn by gradients, decorative. */
.mjpc-fighter a::before {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	top: 16%;
	bottom: 26%;
	background:
		radial-gradient(circle at 50% 22%, rgb(11 6 32 / 0.82) 0 19%, transparent 20%),
		radial-gradient(ellipse 50% 46% at 50% 100%, rgb(11 6 32 / 0.82) 0 98%, transparent 100%);
	pointer-events: none;
	z-index: -1;
}

.mjpc-fighter a::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(0deg, rgb(11 6 32 / 0.9), transparent);
	z-index: -1;
}

.mjpc-fighter a {
	isolation: isolate;
}

.mjpc-fighter a:hover {
	transform: translateY(-3px);
}

.mjpc-fighter.is-on a,
.mjpc-fighter a[aria-pressed="true"] {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 30px rgb(0 0 0 / 0.4);
	transform: translateY(-4px);
}

.mjpc-c1 { --mjpc-portrait: linear-gradient(160deg, var(--rose), var(--violet)); }
.mjpc-c2 { --mjpc-portrait: linear-gradient(160deg, var(--cyan), #1a5bd6); }
.mjpc-c3 { --mjpc-portrait: linear-gradient(160deg, var(--orange), #9b1c31); }
.mjpc-c4 { --mjpc-portrait: linear-gradient(160deg, #ffd23f, #e0532b); }
.mjpc-c5 { --mjpc-portrait: linear-gradient(160deg, var(--vert), #1e8e5a); }
.mjpc-c6 { --mjpc-portrait: linear-gradient(160deg, #b79cff, #3a2a8f); }
.mjpc-c7 { --mjpc-portrait: linear-gradient(160deg, #ff5d5d, #311b6b); }
.mjpc-c8 { --mjpc-portrait: linear-gradient(160deg, var(--sable), #8c5e3c); }

/* ---- Player panels ---- */

/*
 * The home page runs full width (FoxPilot: content_container full-width), so
 * the bands below the scene keep their own measure and gutter.
 */
.mjpc-profils,
.mjpc-derniers {
	box-sizing: border-box;
	max-width: 1260px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.mjpc-profils {
	display: grid;
	gap: 48px;
	padding-block: clamp(28px, 5vw, 44px);
}

.mjpc-js .mjpc-profils .mjpc-profil:not(.is-on) {
	display: none;
}

.mjpc-profil {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
	gap: 28px;
	align-items: start;
	scroll-margin-top: 24px;
}

.mjpc-profil > *,
.mjpc-profil > :where(.wp-block-group__inner-container) > * {
	margin: 0;
	min-width: 0;
}

.mjpc-fiche {
	position: relative;
	padding: 22px;
	border: 1px solid var(--contrast-3);
	border-radius: 16px;
	background: var(--base-3);
	overflow: hidden;
}

.mjpc-fiche::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--mjpc-portrait, var(--accent));
}

.mjpc-nom {
	font-size: clamp(1.7rem, 3vw, 2.1rem);
	margin: 0.2em 0 0.35em;
}

.mjpc-citation {
	color: var(--contrast-2);
}

.mjpc-jauges {
	display: grid;
	gap: 10px;
	margin: 1.2em 0;
}

.mjpc-jauge {
	display: grid;
	grid-template-columns: 9.5em minmax(0, 1fr) 2.6em;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--mjpc-display);
	font-style: italic;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mjpc-jauge::after {
	content: "";
	grid-column: 2;
	grid-row: 1;
	height: 12px;
	border: 1px solid var(--contrast-3);
	border-radius: 2px;
	background:
		linear-gradient(90deg, var(--mjpc-bar, var(--accent)) 0 var(--mjpc-niveau, 0%), transparent var(--mjpc-niveau, 0%)),
		var(--base);
}

.mjpc-jauge__val {
	grid-column: 3;
	grid-row: 1;
	text-align: right;
	color: var(--contrast-2);
	font-variant-numeric: tabular-nums;
}

.mjpc-jauge--budget { --mjpc-bar: var(--jauge-budget); }
.mjpc-jauge--groupe { --mjpc-bar: var(--jauge-groupe); }
.mjpc-jauge--config { --mjpc-bar: var(--jauge-config); }
.mjpc-jauge-1 { --mjpc-niveau: 20%; }
.mjpc-jauge-2 { --mjpc-niveau: 40%; }
.mjpc-jauge-3 { --mjpc-niveau: 60%; }
.mjpc-jauge-4 { --mjpc-niveau: 80%; }
.mjpc-jauge-5 { --mjpc-niveau: 100%; }

.mjpc-conseil {
	margin: 0;
	padding: 12px 14px;
	border-left: 3px solid var(--accent);
	border-radius: 0 10px 10px 0;
	background: var(--base);
	font-size: 0.97rem;
}

.mjpc-coups__titre {
	display: flex;
	align-items: baseline;
	margin: 0 0 12px;
	font-size: 1.25rem;
}

.mjpc-coups__titre:not(:first-child) {
	margin-top: 26px;
}

.mjpc-liste {
	display: grid;
	gap: 10px;
}

.mjpc-liste > *,
.mjpc-liste > :where(.wp-block-group__inner-container) > * {
	margin: 0;
}

/* Fox Blocks compact cards, dressed as rows of the roster. */
.mjpc-liste .fxb-product-card--compact {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--contrast-3);
	border-radius: var(--mjpc-radius);
	background: var(--base);
	box-shadow: none;
}

.mjpc-liste .fxb-product-card__logo {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	flex: none;
}

.mjpc-liste .fxb-product-card__title {
	flex: 1;
	min-width: 0;
}

.mjpc-liste .fxb-product-card__name {
	margin: 0;
	font-family: Barlow, system-ui, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 1.02rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--contrast);
}

.mjpc-liste .fxb-product-card__tagline,
.mjpc-liste .fxb-product-card__note {
	margin: 2px 0 0;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--contrast-2);
}

.mjpc-liste .fxb-cta-button,
.mjpc-scene .wp-block-button__link,
.mjpc-combo .wp-block-button__link {
	flex: none;
	padding: 9px 13px;
	border-radius: 6px;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--mjpc-display);
	font-style: italic;
	font-size: 0.85rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.mjpc-liste .fxb-cta-button:hover {
	background: var(--contrast);
	color: var(--base-2);
}

.mjpc-combo {
	margin-top: 22px;
	padding: 18px 22px;
	border-radius: 16px;
	background: linear-gradient(90deg, var(--violet), #b0306b);
	color: #fff;
}

.mjpc-combo > *,
.mjpc-combo > :where(.wp-block-group__inner-container) > * {
	margin: 0;
}

.mjpc-combo .mjpc-kicker {
	color: #fff;
}

.mjpc-combo__texte {
	font-size: 1.05rem;
	margin-top: 4px;
}

/* ---- Latest posts ---- */

/* No post yet: the band and its title stay out of sight. */
.mjpc-derniers:not(:has(li)) {
	display: none;
}

.mjpc-derniers {
	padding-block: 8px 40px;
}

.mjpc-section__titre {
	margin-bottom: 16px;
}

.mjpc-articles.wp-block-latest-posts {
	margin: 0;
	padding: 0;
	gap: 14px;
}

.mjpc-articles.wp-block-latest-posts.is-grid li {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--contrast-3);
	border-radius: 14px;
	background: var(--base-3);
}

.mjpc-articles > li > a {
	display: block;
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.25;
	color: var(--contrast);
	text-decoration: none;
}

.mjpc-articles > li > a:hover {
	color: var(--accent-text);
}

.mjpc-articles .wp-block-latest-posts__post-excerpt {
	margin-top: 8px;
	font-size: 0.95rem;
	color: var(--contrast-2);
}

/* ---- Footer ---- */

.site-info {
	border-top: 1px solid var(--contrast-3);
	font-size: 0.9rem;
}

.mjpc-foot-name {
	display: block;
	font-family: var(--mjpc-display);
	font-style: italic;
	text-transform: uppercase;
	color: var(--contrast);
}

.mjpc-foot-line {
	display: block;
	max-width: 80ch;
	margin: 4px auto 6px;
}

.mjpc-foot-end {
	display: block;
}

/* ---- Narrow screens ---- */

@media (max-width: 980px) {
	.mjpc-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mjpc-profil { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.mjpc-liste .fxb-product-card--compact { flex-wrap: wrap; }
	.mjpc-liste .fxb-product-card__title { flex-basis: calc(100% - 70px); }
	.mjpc-liste .fxb-cta-button { margin-left: 70px; }
	.mjpc-fighter a { aspect-ratio: 3 / 2; font-size: 0.85rem; }
	.mjpc-fighter a::before { left: auto; right: 6%; width: 42%; top: 10%; bottom: 0; }
	.mjpc-jauge { grid-template-columns: 8em minmax(0, 1fr) 2.4em; }
}

@media (max-width: 460px) {
	.mjpc-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.mjpc-fighter a { transition: none; }
	.mjpc-fighter a:hover,
	.mjpc-fighter.is-on a { transform: none; }
}