/**
 * Habillage de la page « LE WARGAME À FAITES DES JEUX » — Betton & Dragons
 *
 * Slug `wargame-faites-des-jeux`. ONZIÈME feuille sur le modèle de
 * `bd-adherer.css`, après « Adhérer », « Murder party », « Atelier peinture »,
 * « Jeux de figurine », « Jeux de rôles », « Nos Activités », « Agenda du
 * club », « Contact », « FAITES DES JEUX » et les vues d'événements. Même
 * dispositif à la lettre, mêmes valeurs : toutes viennent de
 * CHARTE-GRAPHIQUE.md, aucune n'est inventée.
 *
 * La page est SŒUR de « FAITES DES JEUX » (943) : celle-ci porte les parties de
 * jeu de rôle de la journée (catégorie `faites-des-jeux`), celle-là les tables
 * de wargame du soir (catégorie `jeu-de-figurine`). D'où une feuille distincte
 * plutôt qu'une classe de plus dans `bd-fdj.css` — les deux ne se chargent
 * jamais ensemble, et le vocabulaire de bandes y est le même à un préfixe près.
 *
 * Page hors Elementor : le `<body>` n'a pas `elementor-page` et le thème
 * applique sa règle de liens de contenu en (0,6,1). Tout ce qui touche un lien
 * est donc ancré sur `#content`.
 *
 * TROIS BANDES, blanc → vert → blanc. Pas de bande crème : le fond du site est
 * lui-même #F6F7E9, une bande crème n'aurait aucune limite visible (acquis de
 * bd-contact.css et bd-fdj.css). La dernière bande est blanche, donc les 50 px
 * de `#content-wrap` sont CONSERVÉS — ils ne se lisent comme une coupure que
 * lorsque la dernière bande a la couleur verte du pied de page, ce qui n'est
 * pas le cas ici (voir la note de bd-fdj.css §1 ter).
 */

/* Déclarées sur le <body> aussi : `.page-header` n'est pas un descendant de
   `.bd-wargame`, et une variable non héritée y rendrait la déclaration invalide
   au calcul — le réglage du thème passerait au travers (voir CLAUDE.md). */
body.bd-page-wargame,
.bd-wargame {
	--bd-vert: #08403f;
	--bd-terracotta: #c0623e;
	/* Terracotta assombri, réservé au PETIT corps sur fond clair : #C0623E ne
	   vaut que 4,15:1 sur blanc et 3,99:1 sur crème, sous le seuil AA de 4,5:1
	   qui reste celui d'un texte de 14 px, même en gras (charte §2). */
	--bd-terracotta-texte: #a9542f;
	--bd-noir: #282828;
	--bd-creme: #f6f7e9;
	--bd-filet: #ededed;
}

/* ---------------------------------------------------------------------------
 * 1. Bandes et colonne de lecture
 * La charte limite un texte suivi à ~860 px (§5). Les deux conteneurs qui
 * portent une grille (les quatre univers, les vignettes de tables) prennent les
 * 1200 px du conteneur, d'où le modificateur `--large`.
 * ------------------------------------------------------------------------ */

body.page .bd-wargame {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--bd-noir);
}

body.page .bd-wargame__bande {
	padding: 56px 24px;
	/* Fond posé explicitement : le fond du site est le crème #F6F7E9, une bande
	   transparente ne se distinguerait pas. */
	background-color: #fff;
}

body.page .bd-wargame__bande--vert {
	background-color: var(--bd-vert);
	color: #fff;
}

body.page .bd-wargame__contenu {
	max-width: 860px;
	margin: 0 auto;
}

body.page .bd-wargame__contenu--large {
	max-width: 1200px;
}

/* Deux conteneurs dans la dernière bande (le programme à 860 px, la grille des
   tables à 1200 px) : il leur faut une respiration entre eux, la bande ne la
   donnant qu'à ses extrémités. */
body.page .bd-wargame__contenu + .bd-wargame__contenu {
	margin-top: 48px;
}

body.page .bd-wargame p {
	margin: 0 0 18px;
}

body.page .bd-wargame p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 1 bis. En-tête de page
 *
 * Elle porte le H1 : le contenu n'en pose pas un second, ses sections sont des
 * H2. Depuis la remise à la charte de la personnalisation OceanWP le thème sort
 * déjà le fond vert et le titre blanc — ces règles ne font que le tenir
 * indépendamment du réglage, comme sur les dix autres pages.
 * ------------------------------------------------------------------------ */

body.bd-page-wargame .page-header {
	background-color: #08403f;
}

body.bd-page-wargame .page-header .page-header-title {
	font-family: "Oswald", sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #fff;
}

/* Le fil d'Ariane est une aide à la navigation, pas un titre : mention
   secondaire (charte §2), en blanc atténué sur le fond vert. */
body.bd-page-wargame .page-header .site-breadcrumbs {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
}

body.bd-page-wargame .page-header .site-breadcrumbs a {
	color: #fff;
}

body.bd-page-wargame .page-header .site-breadcrumbs a:hover {
	color: #c0623e;
}

/* ---------------------------------------------------------------------------
 * 2. Typographie — Oswald en majuscules espacées, la signature du site
 * ------------------------------------------------------------------------ */

body.page .bd-wargame h2,
body.page .bd-wargame h3 {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	margin: 0 0 18px;
}

body.page .bd-wargame h2 {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--bd-vert);
}

body.page .bd-wargame h3 {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--bd-terracotta);
}

/* Sur fond vert, les titres passent en blanc (charte, règles de combinaison). */
body.page .bd-wargame__bande--vert h2,
body.page .bd-wargame__bande--vert h3 {
	color: #fff;
}

body.page .bd-wargame__chapeau {
	font-size: 18px;
	line-height: 1.65;
}

/* Sur-titre en VERT PROFOND et non en terracotta : à 14 px en gras le seuil AA
   reste 4,5:1. Acquis de bd-activites.css, bd-contact.css et bd-fdj.css. */
body.page .bd-wargame__surtitre {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bd-vert);
	margin-bottom: 14px;
}

/* Mention secondaire de la charte (§2) : 14 px, le noir de marque à ~72 %. */
body.page .bd-wargame__mention {
	font-size: 14px;
	color: rgba(40, 40, 40, .72);
}

body.page .bd-wargame__bande--vert .bd-wargame__mention {
	color: rgba(255, 255, 255, .8);
}

/* ---------------------------------------------------------------------------
 * 3. Les six univers — grille de cartes crème sur la bande verte
 *
 * Ce qui délimite chaque carte est le contraste de son aplat crème avec le vert
 * (10,69:1, très au-delà des 3:1 du critère 1.4.11) : pas de filet, il ne dirait
 * rien de plus. Même arbitrage que l'encart « maître de jeu » de bd-fdj.css.
 * ------------------------------------------------------------------------ */

body.page .bd-wargame__univers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 28px 0 24px;
}

body.page .bd-wargame__univer {
	background-color: var(--bd-creme);
	border-radius: 15px;
	padding: 24px 22px;
	color: var(--bd-noir);
}

/* Le H3 d'une carte n'est PAS sur le fond vert bien qu'il en soit un
   descendant : la règle `--vert h3` ci-dessus le passerait en blanc sur crème
   (1,15:1). Piège relevé sur bd-fdj.css, repris ici d'emblée. Le terracotta
   vaut 4,04:1 sur crème — sous le seuil d'un texte courant, mais c'est un titre
   de 18 px en 500, donc du « grand texte » (seuil 3:1). */
body.page .bd-wargame__bande--vert .bd-wargame__univer h3 {
	color: var(--bd-terracotta);
	font-size: 18px;
	margin-bottom: 10px;
}

/* Étiquette d'univers : 13 px en gras, donc le terracotta ASSOMBRI (4,81:1 sur
   crème) et non celui de la charte, qui n'y vaut que 3,99:1. */
body.page .bd-wargame__etiquette {
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bd-terracotta-texte);
	margin: 0 0 6px;
}

body.page .bd-wargame__univer p:last-child {
	margin-bottom: 0;
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * 4. Les deux créneaux du programme
 *
 * Aplat crème sur bande BLANCHE : le crème sur blanc ne vaut que 1,06:1, ce
 * n'est donc pas l'aplat qui délimite le bloc mais le filet vert profond à
 * gauche (10,7:1) — même raisonnement que l'`<address>` de bd-contact.css. Le
 * filet est à gauche seulement : la charte réserve les grandes surfaces colorées
 * aux bandes, pas aux encadrés.
 * ------------------------------------------------------------------------ */

body.page .bd-wargame__creneau {
	background-color: var(--bd-creme);
	border-left: 4px solid var(--bd-vert);
	border-radius: 2px 15px 15px 2px;
	padding: 26px 28px;
	margin: 0 0 22px;
}

body.page .bd-wargame__creneau:last-child {
	margin-bottom: 0;
}

/* L'heure est ce qu'on cherche du regard : pastille terracotta, blanc dessus
   (5,4:1, le sens de lecture que la charte donne au terracotta — un aplat
   d'appel, jamais du terracotta en petit texte sur fond clair). */
body.page .bd-wargame__heure {
	display: inline-block;
	background-color: var(--bd-terracotta);
	color: #fff;
	font-family: "Oswald", sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
	padding: 8px 18px;
	border-radius: 100px;
	margin: 0 0 14px;
}

body.page .bd-wargame__points {
	margin: 0 0 18px;
	padding-left: 22px;
}

body.page .bd-wargame__points li {
	margin-bottom: 8px;
}

body.page .bd-wargame__points li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 5. L'alerte « ces tables se réservent »
 *
 * C'est la seule contrainte que le visiteur doit avoir lue avant de cliquer sur
 * une vignette. Posée DANS le créneau crème, elle ne peut pas reprendre son
 * aplat : elle passe au blanc, avec le filet terracotta de bd-fdj.css.
 * ------------------------------------------------------------------------ */

body.page .bd-wargame__alerte {
	background-color: #fff;
	border-left: 4px solid var(--bd-terracotta);
	border-radius: 2px 15px 15px 2px;
	padding: 16px 20px;
	margin: 18px 0 0;
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * 6. Boutons — reproduction à l'identique de celui de la home (charte §3)
 *
 * Le survol INVERSE le bouton (fond blanc, texte vert profond), il ne
 * l'assombrit pas. Ancré sur `#content` : sans cela le lien de contenu
 * d'OceanWP (0,6,1) reprendrait la main sur la couleur du libellé.
 *
 * Aucun bouton dans le contenu actuel — l'appel à l'action est le clic sur une
 * vignette de table. Les règles restent : c'est le composant commun aux onze
 * feuilles, et un bouton peut revenir ici sans autre geste.
 * ------------------------------------------------------------------------ */

body.page .bd-wargame__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
}

body.page #content .bd-wargame__bouton {
	display: inline-block;
	background-color: var(--bd-terracotta);
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 12px 40px;
	border-radius: 15px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

body.page #content .bd-wargame__bouton:hover,
body.page #content .bd-wargame__bouton:focus {
	background-color: #fff;
	color: var(--bd-vert);
}

/* ---------------------------------------------------------------------------
 * 7. Liens de texte courant
 *
 * Le `:not()` exclut les boutons : posés dans un `<p>` ou un `<li>` ils
 * prendraient sinon la couleur des liens de contenu — libellé terracotta sur
 * fond terracotta (voir CLAUDE.md). Terracotta ASSOMBRI : ces liens sont en
 * 14 à 16 px, le terracotta de la charte n'y passe pas le seuil AA.
 * ------------------------------------------------------------------------ */

body.page #content .bd-wargame p a:not(.bd-wargame__bouton),
body.page #content .bd-wargame li a:not(.bd-wargame__bouton) {
	color: var(--bd-terracotta-texte);
}

body.page #content .bd-wargame p a:not(.bd-wargame__bouton):hover,
body.page #content .bd-wargame li a:not(.bd-wargame__bouton):hover {
	color: var(--bd-vert);
}

/* Sur le fond vert, le terracotta tombe sous le seuil : liens en blanc,
   soulignés pour rester distinguables du texte courant. Les cartes crème, elles,
   sont sur fond clair : leurs liens gardent le terracotta assombri. */
body.page #content .bd-wargame__bande--vert p a:not(.bd-wargame__bouton),
body.page #content .bd-wargame__bande--vert li a:not(.bd-wargame__bouton) {
	color: #fff;
	text-decoration: underline;
}

body.page #content .bd-wargame__bande--vert .bd-wargame__univer p a:not(.bd-wargame__bouton) {
	color: var(--bd-terracotta-texte);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 8. La grille des tables dans la bande
 *
 * `bd-parties.css` pose `margin: 2em 0` sur la grille et habille les vignettes :
 * cette feuille ne touche qu'à sa respiration et au message de liste vide.
 * ------------------------------------------------------------------------ */

body.page .bd-wargame .bd-parties {
	margin: 28px 0;
}

/* Le shortcode est seul sur sa ligne, `shortcode_unautop` retire donc le `<p>`
   que `wpautop` lui poserait. Garde-fou au cas où il cesserait d'y être seul. */
body.page .bd-wargame .bd-parties__vide {
	background-color: var(--bd-creme);
	border: 1px dashed var(--bd-filet);
	border-radius: 15px;
	padding: 28px;
	text-align: center;
	margin: 28px 0;
}

/* ---------------------------------------------------------------------------
 * 9. Intermédiaire et mobile
 *
 * Six cartes d'univers à 1200 px : trois par ligne (quatre laissaient une ligne
 * de deux orpheline) ; en dessous elles passent à deux, puis à une. Les noms de jeux sont longs (« Middle-earth
 * Strategy Battle Game ») : à trois colonnes ils se coupaient sur trois lignes.
 * ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
	body.page .bd-wargame__univers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	body.bd-page-wargame .page-header .page-header-title {
		font-size: 28px;
	}

	body.page .bd-wargame__bande {
		padding: 40px 18px;
	}

	body.page .bd-wargame__univers {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	body.page .bd-wargame__creneau {
		padding: 22px 20px;
	}

	body.page .bd-wargame__alerte {
		padding: 16px 18px;
	}

	body.page .bd-wargame__contenu + .bd-wargame__contenu {
		margin-top: 36px;
	}

	/* Le bouton prend toute la largeur : à 40 px de rembourrage horizontal, un
	   libellé court laissait une cible flottante au milieu. */
	body.page #content .bd-wargame__bouton {
		width: 100%;
		text-align: center;
		padding: 12px 20px;
	}
}