/** * Habillage de la page « Jeux de figurine » — Betton & Dragons * * Quatrième page de contenu hors Elementor, après « Adhérer », « Murder * party » et « Atelier peinture ». Même dispositif à la lettre, mêmes valeurs : * toutes viennent de CHARTE-GRAPHIQUE.md, aucune n'est inventée. * * Le texte de la page n'a pas bougé d'une virgule — seule la mise en forme * change. D'où une feuille plus courte que bd-peinture.css : ni étapes * numérotées, ni lexique, ni encart « à compléter », le contenu n'en a pas. * * Sélecteurs préfixés `body.page` pour la même raison que sur la fiche * d'événement (voir CLAUDE.md) : à spécificité égale c'est le dernier chargé * qui gagne, et on ne veut pas dépendre de l'ordre d'enqueue d'OceanWP. Ce qui * touche un lien est en plus ancré sur `#content` : le thème défend les liens * de contenu en (0,6,1), aucune combinaison de classes ne passe devant. * * C'est la QUATRIÈME feuille sur ce modèle. bd-adherer, bd-murder, bd-peinture * et celle-ci partagent l'essentiel de leurs règles à un préfixe près : la * fusion en un `bd-contenu.css` commun est mûre, et n'est toujours pas faite * ici pour ne pas remettre en jeu trois pages déjà recettées en production. */ /* Déclarées sur le aussi : `.page-header` n'est pas un descendant de `.bd-figurines`, et une variable non héritée y rendrait la déclaration invalide au calcul. Voir le même commentaire dans bd-adherer.css. */ body.bd-page-figurines, .bd-figurines { --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 : au-delà la ligne devient * illisible. Les bandes, elles, filent d'un bord à l'autre du conteneur. * ------------------------------------------------------------------------ */ body.page .bd-figurines { font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--bd-noir); } body.page .bd-figurines__bande { padding: 56px 24px; /* Fond posé explicitement : depuis la remise à plat de la personnalisation OceanWP, le fond du site est le crème #F6F7E9 de la charte. Une bande transparente se confondait donc avec la bande crème et l'alternance ne se voyait pas. */ background-color: #fff; } body.page .bd-figurines__contenu { max-width: 860px; margin: 0 auto; } /* Alternance des fonds, section par section : blanc → crème → blanc → vert. Jamais deux fonds colorés côte à côte (charte, §1). */ body.page .bd-figurines__bande--creme { background-color: var(--bd-creme); } body.page .bd-figurines__bande--vert { background-color: var(--bd-vert); color: #fff; } body.page .bd-figurines p { margin: 0 0 18px; } body.page .bd-figurines p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * 1 bis. En-tête de page * * C'est elle qui porte le H1 de la page — le contenu n'en pose pas un second, * et n'en posait pas avant non plus : il commençait directement aux H3. * Le réglage de thème lui met un fond noir pur, que la charte (§1) réserve aux * overlays d'image : on repasse en vert profond, titre en blanc, comme sur les * autres pages de contenu. Sélecteur ancré sur la classe posée par le plugin, * qui vaut (0,2,1) et passe donc devant les (0,2,0) du thème quel que soit * l'ordre de chargement. * ------------------------------------------------------------------------ */ body.bd-page-figurines .page-header { background-color: #08403f; } body.bd-page-figurines .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-figurines .page-header .site-breadcrumbs { font-family: "Roboto", sans-serif; font-size: 14px; color: rgba(255, 255, 255, .75); } body.bd-page-figurines .page-header .site-breadcrumbs a { color: #fff; } body.bd-page-figurines .page-header .site-breadcrumbs a:hover { color: #c0623e; } /* --------------------------------------------------------------------------- * 2. Typographie — Oswald en majuscules espacées, la signature du site * ------------------------------------------------------------------------ */ body.page .bd-figurines h2, body.page .bd-figurines h3 { font-family: "Oswald", sans-serif; text-transform: uppercase; margin: 0 0 18px; } body.page .bd-figurines h2 { font-size: 24px; font-weight: 600; letter-spacing: 1px; color: var(--bd-vert); } body.page .bd-figurines 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-figurines__bande--vert h2, body.page .bd-figurines__bande--vert h3 { color: #fff; } body.page .bd-figurines__chapeau { font-size: 18px; line-height: 1.65; } /* --------------------------------------------------------------------------- * 3. Présentation des Compagnons de la Duchesse Anne — sigle et texte * * Le sigle était jusqu'ici un `alignright` de Gutenberg, c'est-à-dire un * flottant : le paragraphe s'enroulait autour et la mise en page cassait dès * que la colonne se réduisait. Une grille de deux colonnes tient la même * intention sans flottant, et retombe proprement en une colonne sur mobile. * * L'image fait 800 × 800 px pour un affichage à 220 : `object-fit: contain` * sur un aplat blanc, jamais `cover`, qui recadrerait le sigle. * ------------------------------------------------------------------------ */ body.page .bd-figurines__presentation { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; } body.page .bd-figurines__sigle { margin: 0; } body.page .bd-figurines__sigle img { display: block; width: 220px; height: 220px; object-fit: contain; background-color: #fff; border-radius: 15px; padding: 12px; } /* --------------------------------------------------------------------------- * 4. Cartes — rayon 15px, ombre très douce (charte, §4) * * Les trois familles de jeux étaient trois titres suivis de trois listes à la * queue leu leu. Ce sont trois blocs de même nature : la grille le dit, et * `auto-fit` les met sur une, deux ou trois colonnes selon la place. * ------------------------------------------------------------------------ */ body.page .bd-figurines__cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; align-items: start; } body.page .bd-figurines__carte { background-color: #fff; border: 1px solid var(--bd-filet); border-radius: 15px; padding: 24px; box-shadow: 0 2px 6px rgba(0, 0, 0, .07); margin: 0; } body.page .bd-figurines__carte h3 { font-size: 18px; margin-bottom: 12px; } /* --------------------------------------------------------------------------- * 5. Listes — puces terracotta, pas le disque gris d'usine * ------------------------------------------------------------------------ */ body.page .bd-figurines__liste { list-style: none; margin: 0; padding: 0; } body.page .bd-figurines__liste li { position: relative; padding-left: 26px; margin-bottom: 10px; } body.page .bd-figurines__liste li:last-child { margin-bottom: 0; } body.page .bd-figurines__liste li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius: 100px; background-color: var(--bd-terracotta); } body.page .bd-figurines__bande--vert .bd-figurines__liste li::before { background-color: #fff; } /* --------------------------------------------------------------------------- * 6. Liens de texte courant — terracotta, comme partout ailleurs * * Sans l'ancrage sur #content, le lien de contenu d'OceanWP l'emporterait * (0,6,1). Le `:not()` exclut les boutons : la page n'en a pas aujourd'hui, * mais la règle est reprise telle quelle des trois autres feuilles, où son * absence avait donné un libellé terracotta sur fond terracotta (voir * CLAUDE.md, « Un bouton dans un

prend la couleur des liens de contenu »). * ------------------------------------------------------------------------ */ body.page #content .bd-figurines p a:not(.bd-figurines__bouton), body.page #content .bd-figurines li a:not(.bd-figurines__bouton) { color: var(--bd-terracotta); } body.page #content .bd-figurines p a:not(.bd-figurines__bouton):hover, body.page #content .bd-figurines li a:not(.bd-figurines__bouton):hover { color: var(--bd-vert); } /* Sur le fond vert, le terracotta tombe sous le seuil de contraste : les liens y passent en blanc, soulignés pour rester distinguables du texte courant. */ body.page #content .bd-figurines__bande--vert p a:not(.bd-figurines__bouton), body.page #content .bd-figurines__bande--vert li a:not(.bd-figurines__bouton) { color: #fff; text-decoration: underline; } /* --------------------------------------------------------------------------- * 7. Mobile — H1 à 28 px (charte, échelle de page intérieure) * ------------------------------------------------------------------------ */ @media (max-width: 767px) { body.bd-page-figurines .page-header .page-header-title { font-size: 28px; } body.page .bd-figurines__bande { padding: 40px 18px; } /* Une colonne : le sigle passe au-dessus du texte, centré. */ body.page .bd-figurines__presentation { grid-template-columns: 1fr; gap: 20px; justify-items: center; text-align: center; } }