/*
 * mfg-theme — assets/css/style.css
 * ---------------------------------------------------------------------
 * Ce fichier ne contient QUE ce qui ne peut pas être exprimé via
 * theme.json (design system : couleurs, typographies, espacements,
 * largeurs, styles de boutons — voir theme.json). Il porte fidèlement
 * les styles spécifiques de la preview.html de référence : halo du
 * héro, montagnes SVG, cartes, bloc citation, timeline "ambition",
 * en-tête/navigation, formulaire de contact, pied de page.
 *
 * Chargé en front (wp_enqueue_scripts) ET dans l'éditeur (editor-styles)
 * afin que la saisie de contenu ressemble au rendu public.
 * ---------------------------------------------------------------------
 */

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

html,
body {
	overflow-x: hidden;
}

.wp-site-blocks img {
	display: block;
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--mfg-blue-light);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Conteneurs -------------------------------------------------------
   Les sections utilisent le layout "constrained" de WordPress
   (contentSize 768px / wideSize 1400px, définis dans theme.json — 18e
   étape : wideSize porté de 1152px à 1400px pour mieux exploiter les
   grands écrans, cf. les mêmes 1400px répétés sur chaque groupe "container"
   aligné "wide" dans patterns/*.php, qui doivent rester synchronisés avec
   cette valeur) ; on ajoute ici uniquement le padding horizontal, avec un
   palier supplémentaire à partir de 1280px (gouttière un peu plus généreuse
   à l'approche de la largeur maximale, plutôt qu'un contenu qui vient
   toucher les mêmes 32px qu'en petit desktop). */
.container,
.mfg-container-narrow {
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}
@media (min-width: 640px) {
	.container,
	.mfg-container-narrow {
		padding-left: 32px;
		padding-right: 32px;
	}
}
@media (min-width: 1280px) {
	.container,
	.mfg-container-narrow {
		padding-left: 40px;
		padding-right: 40px;
	}
}
.mfg-container-narrow {
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}

/* --- En-tête / Navigation --------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(5, 6, 8, 0.9);
	border-bottom: 1px solid var(--wp--preset--color--mfg-surface-border);
	-webkit-backdrop-filter: saturate(1.5);
	backdrop-filter: saturate(1.5);
	padding: 0 !important;
}

.site-header .nav-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	min-height: 4.5rem;
	width: 100%;
}
@media (min-width: 640px) {
	.site-header .nav-inner {
		padding: 0 32px;
	}
}
@media (min-width: 1280px) {
	.site-header .nav-inner {
		padding: 0 40px;
	}
}

.mfg-site-logo {
	margin: 0;
}
.mfg-site-logo img,
.footer-logo img {
	height: 2.5rem;
	width: auto;
	object-fit: contain;
}
.footer-logo img {
	height: 40px;
}

/* Navigation principale — balisage HTML autonome (plus le bloc Navigation
   natif de WordPress, remplacé à la 8e étape) : ce même balisage/CSS/JS,
   déjà testé et fiable dans preview.html, est repris à l'identique côté
   thème pour garantir un comportement mobile prévisible, indépendant des
   variations du bloc Navigation natif d'une version de WordPress à l'autre.
   Desktop : liens en ligne + sous-menu "Association" au survol/focus.
   Mobile (<640px) : bouton burger + volet plein écran + accordéon
   "Association" au tap — voir assets/js/mfg-theme.js. */
.nav-links {
	display: none;
	align-items: center;
	gap: 32px;
}
.nav-links a {
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--mfg-silver-dark);
	transition: color 0.2s ease;
}
.nav-links a:hover {
	color: var(--wp--preset--color--mfg-blue-light);
}

.nav-item-has-children {
	position: relative;
	display: flex;
	align-items: center;
}
.nav-parent-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--mfg-silver-dark);
	transition: color 0.2s ease;
}
.nav-parent-link:hover {
	color: var(--wp--preset--color--mfg-blue-light);
}
.nav-caret {
	width: 10px;
	height: 6px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.nav-item-has-children:hover .nav-caret,
.nav-item-has-children:focus-within .nav-caret {
	transform: rotate(180deg);
}
.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 280px;
	width: max-content;
	margin-top: 8px;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	background: var(--wp--preset--color--mfg-surface);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 60;
}
.nav-item-has-children:hover .nav-dropdown,
.nav-item-has-children:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-dropdown a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--mfg-silver);
	white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
	background: var(--wp--preset--color--mfg-black-soft);
	color: var(--wp--preset--color--mfg-blue-light);
}

.nav-cta {
	display: none;
}
.nav-cta .btn {
	white-space: nowrap;
}

.burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	background: transparent;
	color: var(--wp--preset--color--mfg-silver);
	cursor: pointer;
	padding: 0;
}

/* 16e étape — audit responsive : à 640px, la navigation desktop (7 liens +
   sous-menu Association + bouton CTA) ne tient plus sur une seule ligne et
   « Nous rejoindre » se met à passer sur 2 lignes, provoquant un
   chevauchement visuel avec le bouton CTA voisin (repéré en testant une
   tablette portrait 768px). Le seuil de bascule burger → navigation
   desktop est donc repoussé de 640px à 900px : en dessous, le menu burger
   (déjà pleinement fonctionnel, accessible et testé) reste utilisé ; à partir
   de 900px, tous les libellés de navigation tiennent sur une seule ligne
   (vérifié à 900/1024/1100/1366/1920px) — la version desktop (≥1024px)
   n'est donc pas affectée par ce changement. */
@media (min-width: 900px) {
	.nav-links,
	.nav-cta {
		display: flex;
	}
	.burger {
		display: none;
	}
}

/* Volet mobile plein écran (menu burger). Frère de <header>, jamais son
   descendant : voir le commentaire dans parts/header.html. */
.mobile-menu {
	position: fixed;
	top: 4.5rem;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--wp--preset--color--mfg-black);
	border-top: 1px solid var(--wp--preset--color--mfg-surface-border);
	padding: 24px 20px;
	overflow-y: auto;
	display: none;
}
.mobile-menu.open {
	display: block;
}
.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mobile-menu a {
	display: block;
	padding: 12px;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--mfg-silver);
}
.mobile-menu a:hover {
	background: var(--wp--preset--color--mfg-surface);
	color: var(--wp--preset--color--mfg-blue-light);
}
.mobile-menu .btn {
	width: 100%;
	margin-top: 16px;
}
body.menu-open {
	overflow: hidden;
}

/* Sous-menu "Association" à l'intérieur du volet mobile : un accordéon
   replié par défaut, affiché/masqué au tap sur son bouton bascule (classe
   `open`, pilotée par assets/js/mfg-theme.js) — jamais au survol, absent
   sur les écrans tactiles. En flux normal (pas de position absolue) : il
   ne peut donc jamais déborder de l'écran, contrairement au menu déroulant
   desktop (.nav-dropdown), positionné en absolu sous "Association". */
.mobile-submenu-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.mobile-submenu-row .mobile-link {
	flex: 1;
}
.mobile-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	background: transparent;
	color: var(--wp--preset--color--mfg-silver);
	cursor: pointer;
}
.mobile-submenu-toggle .nav-caret {
	width: 12px;
	height: 7px;
}
.mobile-submenu-toggle[aria-expanded="true"] .nav-caret {
	transform: rotate(180deg);
}
.mobile-submenu-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 12px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.mobile-submenu-list.open {
	max-height: 480px;
}
.mobile-submenu-list a {
	font-size: 16px;
}

/* Fil d'Ariane discret en haut des 6 pages de sous-rubriques Association */
.mfg-breadcrumb-wrap {
	padding-top: 32px;
}
.mfg-breadcrumb {
	font-size: 13px;
	margin: 0;
}
.mfg-breadcrumb a {
	color: var(--wp--preset--color--mfg-silver-dark);
	text-decoration: none;
}
.mfg-breadcrumb a:hover {
	color: var(--wp--preset--color--mfg-blue-light);
}

/* Grille de cartes-liens vers les 6 sous-rubriques, sur la page Association */
.association-links-grid a.card {
	display: block;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.association-links-grid a.card:hover {
	border-color: var(--wp--preset--color--mfg-blue-light);
}
.association-links-grid a.card h3 {
	color: var(--wp--preset--color--mfg-silver);
}
.association-links-grid a.card .mfg-card-arrow {
	color: var(--wp--preset--color--mfg-blue-light);
	font-size: 14px;
	display: inline-block;
	margin-top: 8px;
}

/* Pages légales (Mentions légales, Politique de confidentialité) */
.mfg-legal-heading {
	margin-top: 40px;
	font-size: 20px;
}
.mfg-legal-text {
	margin-top: 12px;
	color: var(--wp--preset--color--mfg-silver-dark);
	line-height: 1.7;
}
.mfg-legal-text a {
	color: var(--wp--preset--color--mfg-blue-light);
}
.mfg-legal-text em {
	color: var(--wp--preset--color--mfg-silver);
	font-style: normal;
	border-bottom: 1px dashed rgba(53, 124, 224, 0.5);
}
.mfg-legal-updated {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--mfg-surface-border);
	color: var(--wp--preset--color--mfg-silver-dark);
	font-size: 13px;
}

/* Cartes cliquables des 3 événements (accueil, section Agenda) */
.events-grid a.card {
	display: block;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.events-grid a.card:hover {
	border-color: var(--wp--preset--color--mfg-blue-light);
}
.events-grid a.card h3 {
	color: var(--wp--preset--color--mfg-silver);
}
.events-grid a.card .event-date {
	display: block;
	margin-bottom: 8px;
	color: var(--wp--preset--color--mfg-blue-light);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.events-grid a.card .mfg-card-arrow {
	color: var(--wp--preset--color--mfg-blue-light);
	font-size: 14px;
	display: inline-block;
	margin-top: 8px;
}

/* Page détail d'un événement */
.mfg-event-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
.mfg-event-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	background: var(--wp--preset--color--mfg-surface);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--wp--preset--color--mfg-silver);
}
.mfg-event-cta {
	margin-top: 32px;
}

/* --- Agenda : cartes événements « premium » (14e étape) ----------------- */

/* Icônes SVG (lieu / date / places / badges) : taille et alignement communs */
.mfg-agenda-card-badge svg,
.mfg-agenda-card-meta svg,
.mfg-event-visual-badge svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* 18e étape — largeur/responsive : l'ancien découpage à seuils fixes
   (1 colonne / 2 dès 640px / 3 dès 1100px, plafonné à 3 pour toujours)
   laissait les cartes s'étirer démesurément une fois le conteneur élargi
   à 1400px, sans jamais passer à 4+ colonnes. `auto-fit` + `minmax()`
   ajoute des colonnes en continu selon l'espace réellement disponible ;
   `min(300px, 100%)` évite tout débordement horizontal en dessous de
   300px de large (très petits mobiles).

   20e étape — correction : la borne haute `1fr` ci-dessus était la cause
   d'un nouveau problème (carte bien trop large/allongée). `auto-fit`
   calcule d'abord combien de pistes (colonnes) tiennent dans la largeur
   disponible, PUIS répartit l'espace restant entre les pistes réellement
   occupées ; avec `1fr` comme borne haute, cette répartition n'a aucune
   limite : avec un seul événement, l'unique carte absorbe alors tout
   l'espace libre du conteneur (jusqu'à ~1400px), d'où l'étirement
   constaté. Remplacer `1fr` par une largeur fixe (`400px`, la borne haute
   d'une vraie carte compacte plutôt qu'un multiplicateur élastique) plafonne
   la croissance de chaque piste : au-delà de ce plafond, l'espace en trop
   reste vide à droite du conteneur (alignement par défaut de Grid, qui
   correspond à l'alignement à gauche déjà utilisé par la grille), sans
   jamais agrandir la carte elle-même. En dessous de ce plafond (mobile,
   petite tablette), la carte continue de suivre fidèlement la largeur
   disponible exactement comme avant — seul le cas « plus de place que
   nécessaire » change de comportement. La borne basse `min(300px, 100%)`
   est conservée à l'identique (elle ne posait aucun problème). */
.mfg-agenda-grid {
	margin-top: 40px;
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 400px));
}

/* La carte Agenda est un unique lien <a> (15e étape) : nativement et
   entièrement cliquable, sans bloc de recouvrement séparé. Le retour
   visuel au survol/focus (bordure, légère translation, curseur, contour
   de focus clavier) est géré ici ; le contour de focus clavier lui-même
   provient de la règle générale `:focus-visible` du thème (voir plus haut
   dans ce fichier), déjà appliquée à tout élément focusable du site. */
.mfg-agenda-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 24px;
	border-radius: 18px;
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(53, 124, 224, 0.14) 0%, rgba(53, 124, 224, 0) 55%),
		linear-gradient(160deg, var(--wp--preset--color--mfg-surface) 0%, var(--wp--preset--color--mfg-black-soft) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mfg-agenda-card:hover,
.mfg-agenda-card:focus-visible {
	border-color: var(--wp--preset--color--mfg-blue-light);
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -20px rgba(5, 56, 227, 0.55);
}

/* Badge visuel (icône + libellé) : commun aux cartes Agenda et à la page
   dédiée d'un événement, avec un accent de couleur propre à chaque
   direction artistique — toujours issu de la palette existante du site
   (theme.json), pour rester cohérent avec l'identité MFGaming. */
.mfg-agenda-card-badge,
.mfg-event-visual-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid currentColor;
	background: rgba(255, 255, 255, 0.03);
}
.mfg-event-visual-badge {
	font-size: 14px;
	padding: 10px 20px 10px 14px;
	margin-bottom: 4px;
}
.mfg-event-visual-badge svg {
	width: 22px;
	height: 22px;
}

.accent-ouverture {
	color: var(--wp--preset--color--mfg-blue-light);
}
.accent-decouverte {
	color: var(--wp--preset--color--mfg-blue);
}
.accent-tournoi {
	color: var(--wp--preset--color--mfg-red);
}
.accent-default {
	color: var(--wp--preset--color--mfg-silver-dark);
}

.mfg-agenda-card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.25;
	color: var(--wp--preset--color--mfg-silver);
}

.mfg-agenda-card-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mfg-agenda-card-meta li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--wp--preset--color--mfg-silver-dark);
	line-height: 1.4;
}
.mfg-agenda-card-meta li svg {
	margin-top: 1px;
	color: var(--wp--preset--color--mfg-blue-light);
}
.mfg-agenda-card-meta li strong {
	color: var(--wp--preset--color--mfg-silver);
	font-weight: 700;
}

/* Page détail d'un événement : accroche */
.mfg-event-accroche {
	margin-top: 16px;
	max-width: 640px;
	font-size: 18px;
	color: var(--wp--preset--color--mfg-silver-dark);
	line-height: 1.6;
}

/* --- Sections génériques ------------------------------------------------ */
.mfg-section {
	padding: 64px 0;
}
@media (min-width: 640px) {
	.mfg-section {
		padding: 96px 0;
	}
}

.section-surface {
	background: var(--wp--preset--color--mfg-black-soft);
}

.mfg-section-title-lg {
	font-size: 40px;
}

.mfg-text-center {
	text-align: center;
	max-width: none !important;
}

/* Styles de blocs réutilisables (voir functions.php register_block_style) */
.is-style-mfg-eyebrow {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--mfg-blue-light);
	margin-bottom: 12px;
}

.is-style-mfg-section-desc {
	margin-top: 16px;
	color: var(--wp--preset--color--mfg-silver-dark);
	max-width: 640px;
	line-height: 1.6;
}

.is-style-mfg-placeholder {
	display: inline-flex;
	align-items: center;
	border: 1px dashed rgba(53, 124, 224, 0.5);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--mfg-blue-light);
	margin: 4px 8px 0 0;
}

/* --- Héro ---------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	padding: 96px 0 240px !important;
}

.hero-halo {
	position: absolute;
	top: -192px;
	left: 50%;
	transform: translateX(-50%);
	width: 672px;
	height: 448px;
	background: var(--wp--preset--color--mfg-blue);
	opacity: 0.2;
	filter: blur(120px);
	pointer-events: none;
}

/* Montagnes en fond du Hero : image fournie par l'utilisateur
   (assets/images/hero-mountains.png), un détourage déjà transparent
   (silhouette de montagnes enneigées sur fond alpha), utilisée telle
   quelle, sans recadrage ni retouche du fichier — seule son intégration
   CSS est ajustée ici. `background-size: contain` évite tout rognage des
   sommets ou des bords (contrairement à `cover`, qui découperait une
   image aussi panoramique dans une bande plus large qu'elle). Un léger
   fondu en haut de la bande adoucit la jonction avec le fond sombre du
   Hero (la transparence native de l'image gère déjà l'essentiel), et un
   filtre discret unifie sa tonalité avec le halo bleu du site. Le
   padding du .hero ci-dessus réserve tout l'espace utile au-dessus de la
   bande : le texte et les boutons restent toujours sur fond uni, jamais
   devant les montagnes. */
.hero-mountains {
	position: absolute;
	left: 50%;
	right: auto;
	bottom: 0;
	width: 100%;
	max-width: 2200px;
	transform: translateX(-50%);
	height: 320px;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	pointer-events: none;
	filter: brightness(0.92) saturate(0.92);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 12%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 12%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 100%);
}

@media (max-width: 1024px) {
	.hero {
		padding-bottom: 200px !important;
	}
	.hero-mountains {
		height: 260px;
	}
}

@media (max-width: 640px) {
	.hero {
		padding: 64px 0 170px !important;
	}
	.hero-mountains {
		height: 200px;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 10%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 100%);
	}
}

.hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 32px;
}

.hero-logo.wp-block-image,
.hero-logo {
	height: 112px;
	width: auto;
	margin: 0;
}
.hero-logo img {
	height: 112px;
	width: auto;
}
@media (min-width: 640px) {
	.hero-logo img {
		height: 144px;
	}
}

.hero-copy {
	max-width: 640px;
}
.hero-copy .is-style-mfg-eyebrow {
	margin-bottom: 16px;
}
.hero-copy h1 {
	line-height: 1.15;
}
.hero-copy p {
	margin-top: 24px;
	max-width: 560px;
	color: var(--wp--preset--color--mfg-silver-dark);
	font-size: 16px;
	line-height: 1.6;
}
@media (min-width: 640px) {
	.hero-copy p {
		font-size: 18px;
	}
}

.hero-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
@media (min-width: 640px) {
	.hero-actions {
		flex-direction: row;
	}
}

/* --- Cartes -------------------------------------------------------------- */
.value-grid {
	margin-top: 40px;
	gap: 20px;
}

.is-style-mfg-card.card {
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	background: var(--wp--preset--color--mfg-surface);
	border-radius: 16px;
	padding: 24px;
	transition: border-color 0.2s ease;
}
.is-style-mfg-card.card:hover {
	border-color: var(--wp--preset--color--mfg-blue-dark);
}
.is-style-mfg-card.card h3 {
	font-size: 18px;
	font-weight: 600;
}
.is-style-mfg-card.card p {
	margin-top: 12px;
	font-size: 14px;
	color: var(--wp--preset--color--mfg-silver-dark);
	line-height: 1.6;
}
/* --- Comité : cartes membres (page "Notre comité") ------------------------ */
.mfg-comite-grid {
	margin-top: 40px;
	gap: 20px;
}
.mfg-comite-card.card {
	text-align: left;
}
.mfg-comite-avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--mfg-blue-light) 0%, var(--wp--preset--color--mfg-blue-dark) 55%, var(--wp--preset--color--mfg-black-soft) 100%);
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	flex-shrink: 0;
}
.mfg-comite-avatar svg {
	width: 32px;
	height: 32px;
}
.mfg-comite-card.card h3 {
	margin-top: 0;
}
.mfg-comite-pseudo {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--mfg-silver-dark);
}
.mfg-comite-role {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--mfg-blue-light);
}
.mfg-comite-card.card p.mfg-comite-desc {
	margin-top: 10px;
}

.mfg-membre-fonction,
.mfg-event-meta {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--mfg-blue-light);
}

/* --- Événements (état vide) ---------------------------------------------- */
.events-empty {
	margin-top: 32px;
	border: 1px dashed var(--wp--preset--color--mfg-surface-border);
	border-radius: 16px;
	padding: 40px 24px;
	text-align: center;
	color: var(--wp--preset--color--mfg-silver-dark);
}

/* --- Nous rejoindre (CTA) -------------------------------------------------- */
.join-cta {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.join-cta p {
	margin-top: 16px;
	color: var(--wp--preset--color--mfg-silver-dark);
}
.join-cta .wp-block-buttons {
	margin-top: 32px;
}

/* --- Contact --------------------------------------------------------------- */
.contact-grid {
	margin-top: 32px;
	gap: 24px;
}

.contact-info p {
	color: var(--wp--preset--color--mfg-silver-dark);
}
.contact-info p strong {
	color: var(--wp--preset--color--mfg-silver);
}

/* Formulaire WPForms (formulaire existant créé et paramétré dans
   WordPress, voir la constante MFG_WPFORMS_CONTACT_ID dans functions.php) :
   habillage visuel uniquement, entièrement scopé sous `.mfg-wpforms-contact`
   pour ne jamais affecter un autre formulaire WPForms ailleurs sur le site.
   Le fonctionnement interne de WPForms (validation, envoi, confirmation,
   accessibilité) n'est jamais modifié, seule son apparence est alignée sur
   le design MFGaming. */
.mfg-wpforms-contact .wpforms-container {
	margin: 0;
}
.mfg-wpforms-contact .wpforms-form {
	max-width: none;
}
.mfg-wpforms-contact .wpforms-field {
	margin-bottom: 16px;
	padding: 0;
}
.mfg-wpforms-contact .wpforms-field-label,
.mfg-wpforms-contact .wpforms-field-sublabel {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--mfg-silver-dark);
}
.mfg-wpforms-contact .wpforms-required-label {
	color: var(--wp--preset--color--mfg-blue-light);
}
.mfg-wpforms-contact .wpforms-field input[type="text"],
.mfg-wpforms-contact .wpforms-field input[type="email"],
.mfg-wpforms-contact .wpforms-field input[type="tel"],
.mfg-wpforms-contact .wpforms-field input[type="number"],
.mfg-wpforms-contact .wpforms-field input[type="url"],
.mfg-wpforms-contact .wpforms-field textarea,
.mfg-wpforms-contact .wpforms-field select {
	width: 100%;
	background: var(--wp--preset--color--mfg-surface) !important;
	border: 1px solid var(--wp--preset--color--mfg-surface-border) !important;
	border-radius: 8px !important;
	padding: 10px 12px;
	color: var(--wp--preset--color--mfg-silver) !important;
	font-family: inherit;
	font-size: 14px;
	box-shadow: none;
}
.mfg-wpforms-contact .wpforms-field textarea {
	min-height: 110px;
}
.mfg-wpforms-contact .wpforms-field input:focus,
.mfg-wpforms-contact .wpforms-field textarea:focus,
.mfg-wpforms-contact .wpforms-field select:focus {
	outline: 2px solid var(--wp--preset--color--mfg-blue-light);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--mfg-blue-light) !important;
}
.mfg-wpforms-contact .wpforms-error,
.mfg-wpforms-contact label.wpforms-error {
	margin-top: 4px;
	font-size: 12px;
	color: var(--wp--preset--color--mfg-red);
}
.mfg-wpforms-contact .wpforms-submit-container {
	margin-top: 8px;
}
.mfg-wpforms-contact .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 999px !important;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	min-height: 44px;
	border: none !important;
	cursor: pointer;
	background: var(--wp--preset--color--mfg-blue) !important;
	color: #fff !important;
	font-family: inherit;
	transition: background-color 0.2s ease;
}
.mfg-wpforms-contact .wpforms-submit:hover {
	background: var(--wp--preset--color--mfg-blue-light) !important;
}
.mfg-wpforms-contact .wpforms-confirmation-container,
.mfg-wpforms-contact .wpforms-confirmation-container-full {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	background: rgba(53, 124, 224, 0.12);
	border: 1px solid var(--wp--preset--color--mfg-blue-light);
	color: var(--wp--preset--color--mfg-silver);
}

/* --- Pied de page ------------------------------------------------------------ */
.site-footer {
	border-top: 1px solid var(--wp--preset--color--mfg-surface-border);
	background: var(--wp--preset--color--mfg-black);
	padding: 48px 0 !important;
}

.footer-top {
	justify-content: center;
	text-align: center;
	gap: 40px;
}

.footer-brand,
.footer-social {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-brand p {
	margin-top: 16px;
	font-size: 14px;
	color: var(--wp--preset--color--mfg-silver-dark);
}

.footer-social p.label {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--mfg-silver);
	margin-bottom: 12px;
}
.footer-social p.value {
	font-size: 14px;
	color: var(--wp--preset--color--mfg-silver-dark);
}

.mfg-social-links {
	display: flex;
	justify-content: center;
	gap: 12px;
}
.mfg-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	color: var(--wp--preset--color--mfg-silver-dark);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.mfg-social-link svg {
	width: 20px;
	height: 20px;
}
.mfg-social-link:hover,
.mfg-social-link:focus-visible {
	color: var(--wp--preset--color--mfg-blue-light);
	border-color: var(--wp--preset--color--mfg-blue-light);
	background-color: var(--wp--preset--color--mfg-surface);
}
.mfg-social-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--mfg-blue-light);
	outline-offset: 2px;
}

.footer-bottom {
	margin-top: 40px;
	border-top: 1px solid var(--wp--preset--color--mfg-surface-border);
	padding-top: 24px;
	font-size: 12px;
	color: var(--wp--preset--color--mfg-silver-dark);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
}
.footer-legal {
	justify-content: center;
	gap: 20px;
}
.footer-legal a:hover {
	color: var(--wp--preset--color--mfg-blue-light);
}

/* --- Citation intergénérationnelle -------------------------------------------- */
.is-style-mfg-quote-block.quote-block {
	position: relative;
	border: 1px solid var(--wp--preset--color--mfg-blue-dark);
	background: var(--wp--preset--color--mfg-surface);
	border-radius: 16px;
	padding: 40px 24px;
	text-align: center;
	margin: 0;
}
@media (min-width: 640px) {
	.is-style-mfg-quote-block.quote-block {
		padding: 56px 48px;
	}
}
.quote-accent {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--mfg-red);
	display: block;
}
.quote-mark {
	display: block;
	font-size: 48px;
	line-height: 1;
	color: var(--wp--preset--color--mfg-blue-light);
	font-family: var(--wp--preset--font-family--display);
}
.mfg-quote-text.wp-block-quote {
	margin: 8px auto 0;
	max-width: 640px;
	border: none;
	padding: 0;
}
.mfg-quote-text.wp-block-quote p {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--mfg-silver);
	text-align: center;
}
@media (min-width: 640px) {
	.mfg-quote-text.wp-block-quote p {
		font-size: 30px;
	}
}
.mfg-quote-caption {
	margin-top: 24px;
	font-size: 14px;
	color: var(--wp--preset--color--mfg-silver-dark);
}

/* --- Timeline "Notre ambition" -------------------------------------------------- */
.ambition-timeline {
	position: relative;
	margin-top: 48px;
}
.ambition-line {
	position: absolute;
	top: 24px;
	left: 16.6%;
	right: 16.6%;
	height: 1px;
	background: linear-gradient(to right, var(--wp--preset--color--mfg-blue-dark), var(--wp--preset--color--mfg-blue-light), var(--wp--preset--color--mfg-blue-dark));
	display: none;
}
@media (min-width: 640px) {
	.ambition-line {
		display: block;
	}
}
.ambition-steps {
	gap: 40px;
	position: relative;
}
@media (min-width: 640px) {
	.ambition-steps.wp-block-columns {
		gap: 24px;
	}
}
.ambition-step {
	position: relative;
	display: flex;
	gap: 16px;
}
@media (min-width: 640px) {
	.ambition-step {
		flex-direction: column;
		gap: 0;
	}
}
.ambition-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 48px;
	height: calc(100% + 24px);
	width: 1px;
	background: var(--wp--preset--color--mfg-surface-border);
}
@media (min-width: 640px) {
	.ambition-step:not(:last-child)::before {
		display: none;
	}
}
.ambition-badge {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--mfg-blue-light);
	background: var(--wp--preset--color--mfg-black);
	color: var(--wp--preset--color--mfg-blue-light);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 14px;
}
.ambition-content h3 {
	font-size: 18px;
	font-weight: 600;
}
@media (min-width: 640px) {
	.ambition-content {
		margin-top: 16px;
	}
}
.ambition-content p {
	margin-top: 8px;
	font-size: 14px;
	color: var(--wp--preset--color--mfg-silver-dark);
}
.ambition-content ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ambition-content li {
	position: relative;
	padding-left: 14px;
	font-size: 14px;
	color: var(--wp--preset--color--mfg-silver-dark);
}
.ambition-content li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--mfg-blue-light);
}

/* --- Boutons secondaires (style "Contour" natif de core/button) -------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--mfg-silver);
	border: 1px solid var(--wp--preset--color--mfg-surface-border);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--mfg-blue-light);
	color: #fff;
	background: transparent;
}

/* --- Bouton d'inscription désactivé (16e étape) --------------------------
   Utilisé pour le bouton « Inscription prochainement » de la page Soirée
   d'ouverture, tant que les inscriptions ne sont pas ouvertes : un vrai
   <button disabled>, jamais un lien actif factice, jamais focusable/
   activable au clavier (comportement natif d'un bouton HTML désactivé).
   Contraste suffisant : fond gris clair (silver-dark) / texte sombre. */
.mfg-btn-disabled,
button.wp-block-button__link.mfg-btn-disabled {
	background-color: var(--wp--preset--color--mfg-silver-dark);
	color: var(--wp--preset--color--mfg-black-soft);
	cursor: not-allowed;
	opacity: 0.85;
	box-shadow: none;
	border: none;
	pointer-events: none;
	font-family: inherit;
}
.mfg-btn-disabled:hover,
.mfg-btn-disabled:focus {
	background-color: var(--wp--preset--color--mfg-silver-dark);
	color: var(--wp--preset--color--mfg-black-soft);
}