/**
* Habillage de la page « FAITES DES JEUX » — Betton & Dragons
*
* Page 943, slug `faites-des-jeux`. NEUVIÈ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 » et « Contact ». Même dispositif à la lettre, mêmes valeurs : toutes
* viennent de CHARTE-GRAPHIQUE.md, aucune n'est inventée.
*
* État d'avant : la page était rendue par Elementor et n'affichait que le
* TEXTE DE GABARIT resté de sa création (« Une section d'introduction : ce
* qu'est la Fête des Jeux, date, lieu… »), signalé comme défaut public dans
* AUDIT-SITE.md §3.5. Elle a été SORTIE d'Elementor
* (`bin/sortir-page-elementor.py 943`) — troisième page après « Jeux de
* rôles » et « Nos Activités » — et se modifie désormais par
* `bin/poser-contenu-page.sh 943 recette/faites-des-jeux-contenu.html`.
*
* Corollaire de la sortie d'Elementor : le `` perd `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 depuis la remise à plat d'OceanWP, et les deux filets
* #EDEDED tentés sur « Jeux de rôles » ont été mesurés à 1,08:1 — une bande
* crème n'a aucune limite visible. Même arbitrage que bd-contact.css, qui a
* supprimé la sienne plutôt que de la rafistoler.
*
* La grille des parties (shortcode `[bd_parties]`) est habillée par
* `bd-parties.css`, pas ici : cette feuille ne pose que les bandes, la
* typographie et les composants de texte autour d'elle.
*/
/* Déclarées sur le aussi : `.page-header` n'est pas un descendant de
`.bd-fdj`, 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-fdj,
.bd-fdj {
--bd-vert: #08403f;
--bd-terracotta: #c0623e;
--bd-noir: #282828;
--bd-creme: #f6f7e9;
--bd-filet: #ededed;
}
/* ---------------------------------------------------------------------------
* 1. Bandes et colonne de lecture
* La charte limite un texte suivi à ~860 px (§5). La bande des parties, elle,
* porte une grille de trois cartes : elle a besoin des 1200 px du conteneur,
* d'où le modificateur `--large`.
* ------------------------------------------------------------------------ */
body.page .bd-fdj {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--bd-noir);
}
body.page .bd-fdj__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-fdj__bande--vert {
background-color: var(--bd-vert);
color: #fff;
}
body.page .bd-fdj__contenu {
max-width: 860px;
margin: 0 auto;
}
body.page .bd-fdj__contenu--large {
max-width: 1200px;
}
body.page .bd-fdj p {
margin: 0 0 18px;
}
body.page .bd-fdj p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
* 1 bis. En-tête de page
*
* Elle porte le H1 (« FAITES DES JEUX ») : 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 huit autres pages.
* ------------------------------------------------------------------------ */
body.bd-page-fdj .page-header {
background-color: #08403f;
}
body.bd-page-fdj .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-fdj .page-header .site-breadcrumbs {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, .75);
}
body.bd-page-fdj .page-header .site-breadcrumbs a {
color: #fff;
}
body.bd-page-fdj .page-header .site-breadcrumbs a:hover {
color: #c0623e;
}
/* ---------------------------------------------------------------------------
* 1 ter. Les 50 px de #content-wrap sont CONSERVÉS
*
* OceanWP pose `#content-wrap { padding: 50px 0 }` en (1,0,0). Ces 50 px n'ont
* aucun fond propre : c'est le `` crème qui transparaît, en un liseré
* entre la page-header verte et la première bande, puis entre la dernière bande
* et le pied de page.
*
* `bd-contact.css` les annule, et cette feuille l'a d'abord recopié — à tort.
* Sur « Contact » la dernière bande est VERTE et le pied de page l'est aussi
* (#08403F) : deux aplats identiques séparés par un filet crème, la bande avait
* l'air coupée puis recollée. Il fallait les souder.
*
* Ici la première et la dernière bande sont BLANCHES. Le crème ne s'intercale
* donc pas entre deux aplats jumeaux : il sépare deux couleurs déjà distinctes
* et se lit comme la respiration qu'il est. C'est le rendu de « Nos activités »,
* « Jeux de rôles », « Adhérer » et « Murder party », qui n'ont jamais eu de
* règle ici — et celui demandé le 2026-09-11.
*
* Donc : AUCUNE règle sur #content-wrap dans cette feuille. Le retrait des 50 px
* n'est pas un acquis à répercuter partout, c'est un correctif propre au cas
* « dernière bande de la même couleur que le pied de page ».
* ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
* 2. Typographie — Oswald en majuscules espacées, la signature du site
* ------------------------------------------------------------------------ */
body.page .bd-fdj h2,
body.page .bd-fdj h3 {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
margin: 0 0 18px;
}
body.page .bd-fdj h2 {
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
color: var(--bd-vert);
}
body.page .bd-fdj 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-fdj__bande--vert h2,
body.page .bd-fdj__bande--vert h3 {
color: #fff;
}
body.page .bd-fdj__chapeau {
font-size: 18px;
line-height: 1.65;
}
/* Sur-titre en VERT PROFOND et non en terracotta : #C0623E sur blanc vaut
4,15:1, et à 14 px en gras le seuil AA reste 4,5:1 (le « grand texte »
commence à 18,66 px en gras). Acquis de bd-activites.css et bd-contact.css. */
body.page .bd-fdj__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-fdj__mention {
font-size: 14px;
color: rgba(40, 40, 40, .72);
}
body.page .bd-fdj__bande--vert .bd-fdj__mention {
color: rgba(255, 255, 255, .8);
}
/* ---------------------------------------------------------------------------
* 3. L'encart « maître de jeu » — aplat crème sur la bande verte
*
* Le docx le donnait en note de bas de page appelée par un astérisque. Une note
* de bas de page ne se lit pas sur un écran : elle devient un encart, à sa
* place dans le fil.
*
* Sur la bande verte, ce qui délimite le bloc 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. Le texte y repasse en noir de marque, le
* blanc hérité de la bande serait illisible sur crème.
* ------------------------------------------------------------------------ */
body.page .bd-fdj__encart {
background-color: var(--bd-creme);
border-radius: 15px;
padding: 26px 28px;
margin: 0 0 18px;
color: var(--bd-noir);
}
/* Le H3 de l'encart 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). Il reprend donc le terracotta, qui vaut 4,04:1 sur crème — sous le
seuil AA pour du texte courant, mais c'est un titre de 20 px en 500, donc du
« grand texte » (seuil 3:1). */
body.page .bd-fdj__bande--vert .bd-fdj__encart h3 {
color: var(--bd-terracotta);
}
body.page .bd-fdj__encart p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
* 4. L'alerte « une inscription par personne »
*
* C'est la seule contrainte que le visiteur doit avoir lue avant de cliquer sur
* une vignette. Filet terracotta épais à gauche plutôt qu'un aplat : la charte
* réserve le terracotta à ce qui appelle une action ou structure, et ne l'emploie
* « jamais en fond de grande surface » (§1).
* ------------------------------------------------------------------------ */
body.page .bd-fdj__alerte {
background-color: var(--bd-creme);
border-left: 4px solid var(--bd-terracotta);
border-radius: 2px 15px 15px 2px;
padding: 18px 24px;
margin: 0 0 8px;
}
/* ---------------------------------------------------------------------------
* 5. 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 de la page — l'appel à l'action est le
* clic sur une vignette de partie. Les règles restent : c'est le composant
* commun aux neuf feuilles, et un bouton peut revenir ici sans autre geste.
* ------------------------------------------------------------------------ */
body.page .bd-fdj__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
}
body.page #content .bd-fdj__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-fdj__bouton:hover,
body.page #content .bd-fdj__bouton:focus {
background-color: #fff;
color: var(--bd-vert);
}
body.page #content .bd-fdj__bouton--ligne {
background-color: transparent;
color: #fff;
box-shadow: inset 0 0 0 2px #fff;
}
body.page #content .bd-fdj__bouton--ligne:hover,
body.page #content .bd-fdj__bouton--ligne:focus {
background-color: #fff;
color: var(--bd-vert);
}
/* ---------------------------------------------------------------------------
* 6. Liens de texte courant — terracotta, comme partout ailleurs
*
* Le `:not()` exclut les boutons : posés dans un `` ou un `
` ils
* prendraient sinon la couleur des liens de contenu — libellé terracotta sur
* fond terracotta (voir CLAUDE.md).
* ------------------------------------------------------------------------ */
body.page #content .bd-fdj p a:not(.bd-fdj__bouton),
body.page #content .bd-fdj li a:not(.bd-fdj__bouton) {
color: var(--bd-terracotta);
}
body.page #content .bd-fdj p a:not(.bd-fdj__bouton):hover,
body.page #content .bd-fdj li a:not(.bd-fdj__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. L'encart crème, lui,
est sur fond clair : ses liens gardent le terracotta. */
body.page #content .bd-fdj__bande--vert p a:not(.bd-fdj__bouton),
body.page #content .bd-fdj__bande--vert li a:not(.bd-fdj__bouton) {
color: #fff;
text-decoration: underline;
}
body.page #content .bd-fdj__bande--vert .bd-fdj__encart p a:not(.bd-fdj__bouton) {
color: var(--bd-terracotta);
text-decoration: none;
}
/* ---------------------------------------------------------------------------
* 7. La grille des parties dans la bande
*
* `bd-parties.css` pose `margin: 2em 0` sur la grille. Dans une bande qui a
* déjà ses 56 px de respiration, la marge du haut s'ajoute à celle de l'alerte
* qui la précède : ramenée à une valeur unique.
* ------------------------------------------------------------------------ */
body.page .bd-fdj .bd-parties {
margin: 28px 0;
}
/* Le shortcode est seul sur sa ligne, `shortcode_unautop` retire donc le ``
que `wpautop` lui poserait. Garde-fou au cas où il cesserait d'y être seul. */
body.page .bd-fdj .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;
}
/* ---------------------------------------------------------------------------
* 8. Mobile — H1 à 28 px (charte, échelle de page intérieure)
* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
body.bd-page-fdj .page-header .page-header-title {
font-size: 28px;
}
body.page .bd-fdj__bande {
padding: 40px 18px;
}
body.page .bd-fdj__encart {
padding: 22px 20px;
}
body.page .bd-fdj__alerte {
padding: 16px 18px;
}
/* Le bouton prend toute la largeur : à 40 px de rembourrage horizontal, un
libellé court laissait une cible flottante au milieu. */
body.page #content .bd-fdj__bouton {
width: 100%;
text-align: center;
padding: 12px 20px;
}
}