/**
* Habillage de la page « Jeux de rôles » — Betton & Dragons
*
* Cinquième page de contenu, après « Adhérer », « Murder party », « Atelier
* peinture » et « Jeux de figurine ». 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 — coquilles comprises
* (« on tappe des barbarres », « les missions qui vous serons confiées »,
* « Betton & Dragon » au singulier) : la consigne était de garder les mots
* tels quels. Seules la mise en forme et la hiérarchie de titres changent :
* la page sortait huit H2 de rang égal, les quatre univers passent en H3
* puisqu'ils sont subordonnés à « Les univers de Jeux de rôles ».
*
* Les quatre visuels de couverture sont conservés, aux mêmes URL et avec leur
* `srcset` d'origine.
*
* 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 CINQUIÈME feuille sur ce modèle. bd-adherer, bd-murder,
* bd-peinture, bd-figurines et celle-ci partagent l'essentiel de leurs règles
* à un préfixe près : la fusion en un `bd-contenu.css` commun n'est plus
* « mûre », elle est franchement en retard.
*/
/* Déclarées sur le aussi : `.page-header` n'est pas un descendant de
`.bd-jdr`, 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-jdr,
.bd-jdr {
--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-jdr {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--bd-noir);
}
body.page .bd-jdr__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-jdr__contenu {
max-width: 860px;
margin: 0 auto;
}
/* La galerie d'univers n'est pas un texte suivi : quatre cartes à 860 px
tiennent deux par deux, on laisse la bande respirer jusqu'à 1100 px pour
qu'elles s'alignent sur une ligne dès le grand écran. */
body.page .bd-jdr__contenu--large {
max-width: 1100px;
}
/* Alternance des fonds, section par section : blanc → crème → blanc → vert.
Jamais deux fonds colorés côte à côte (charte, §1).
Les filets, eux, ne sont pas décoratifs. Mesuré à la recette du 2026-08-28 :
les bandes font la largeur du conteneur (1200 px) et non celle de l'écran,
or le fond du site est LUI-MÊME le crème #F6F7E9 depuis la remise à plat
d'OceanWP. La bande crème avait donc exactement la couleur de ses marges
gauche et droite comme du fond de page : aucune limite visible nulle part,
l'alternance se lisant « blanc → rien → blanc → vert ». Deux filets au gris
de séparation de la charte (§1, « filets, bordures discrètes ») lui rendent
ses bords haut et bas, sans inventer une teinte hors charte ni passer les
bandes en pleine largeur — ce qui aurait remis en jeu les quatre autres
pages de contenu, construites à l'identique. */
body.page .bd-jdr__bande--creme {
background-color: var(--bd-creme);
border-top: 1px solid var(--bd-filet);
border-bottom: 1px solid var(--bd-filet);
}
body.page .bd-jdr__bande--vert {
background-color: var(--bd-vert);
color: #fff;
}
body.page .bd-jdr p {
margin: 0 0 18px;
}
body.page .bd-jdr p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
* 1 bis. En-tête de page
*
* C'est elle qui porte le H1 (« Jeux de rôles ») : le contenu n'en pose pas un
* second. Depuis la remise à la charte de la personnalisation OceanWP, le
* thème sort déjà un fond vert profond et un titre blanc à 40 px — ces règles
* ne font que le tenir indépendamment du réglage, comme sur les quatre 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-jdr .page-header {
background-color: #08403f;
}
body.bd-page-jdr .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-jdr .page-header .site-breadcrumbs {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, .75);
}
body.bd-page-jdr .page-header .site-breadcrumbs a {
color: #fff;
}
body.bd-page-jdr .page-header .site-breadcrumbs a:hover {
color: #c0623e;
}
/* ---------------------------------------------------------------------------
* 2. Typographie — Oswald en majuscules espacées, la signature du site
* ------------------------------------------------------------------------ */
body.page .bd-jdr h2,
body.page .bd-jdr h3 {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
margin: 0 0 18px;
}
body.page .bd-jdr h2 {
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
color: var(--bd-vert);
}
body.page .bd-jdr 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-jdr__bande--vert h2,
body.page .bd-jdr__bande--vert h3 {
color: #fff;
}
body.page .bd-jdr__chapeau {
font-size: 18px;
line-height: 1.65;
}
/* « ça vit vieux un Elfe… » est une aparté, pas une phrase du propos : c'est le
sur-titre de la charte (Roboto 700, 14 px, majuscules espacées, terracotta).
Sur fond vert il passerait à 2,79:1 de contraste — il n'y en a pas là, mais
la règle de repli est reprise des autres feuilles par précaution. */
body.page .bd-jdr__surtitre {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--bd-terracotta);
margin-bottom: 14px;
}
body.page .bd-jdr__bande--vert .bd-jdr__surtitre {
color: #fff;
}
/* ---------------------------------------------------------------------------
* 3. Les univers — quatre cartes, rayon 15 px, ombre très douce (charte, §4)
*
* C'étaient quatre colonnes Elementor de hauteurs inégales, chacune avec son
* image brute et son H2. Une grille `auto-fit` les met sur une, deux ou quatre
* colonnes selon la place, et `align-items: stretch` (défaut) leur donne la
* même hauteur.
*
* Les couvertures pèsent 650 à 790 px de large pour un affichage à ~250 : on
* fixe un rapport 3/4 (celui de toutes les quatre, à 2 % près) et un
* `object-fit: cover`, qui ne rogne donc quasiment rien tout en alignant les
* quatre visuels au pixel.
* ------------------------------------------------------------------------ */
body.page .bd-jdr__univers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
body.page .bd-jdr__jeu {
display: flex;
flex-direction: column;
background-color: #fff;
border: 1px solid var(--bd-filet);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, .07);
margin: 0;
}
body.page .bd-jdr__visuel {
margin: 0;
}
body.page .bd-jdr__visuel img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
}
body.page .bd-jdr__jeu h3 {
font-size: 18px;
margin: 20px 20px 12px;
}
body.page .bd-jdr__jeu p {
margin: 0 20px 20px;
font-size: 15px;
}
/* La phrase de renvoi vers l'association ferme la section : centrée sous les
cartes, un cran au-dessus du corps courant.
Elle prend toute la largeur de la bande (celle des quatre cartes, 1100 px) et
non la colonne de lecture à 860 px : ce n'est pas un texte suivi mais une
ligne de conclusion, et elle s'aligne ainsi sur la grille qu'elle referme.
Demandé le 2026-08-28. Le retrait est en `padding-top` et non en marge : la
marge du dernier paragraphe est déjà remise à zéro plus haut. */
body.page .bd-jdr__conclusion {
max-width: none;
margin: 0;
padding-top: 20px;
text-align: center;
font-size: 18px;
line-height: 1.65;
}
/* ---------------------------------------------------------------------------
* 4. Les deux voies d'entrée — Discord et adhésion
*
* Deux colonnes de même nature sur le fond vert. Le Discord porte le seul
* appel à l'action de la page, l'adhésion n'est qu'une précision : pas de
* second bouton, pour ne pas mettre deux appels de même poids côte à côte.
* ------------------------------------------------------------------------ */
body.page .bd-jdr__voies {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px;
margin-top: 32px;
}
body.page .bd-jdr__voie {
margin: 0;
}
/* ---------------------------------------------------------------------------
* 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é.
* ------------------------------------------------------------------------ */
body.page .bd-jdr__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
}
body.page #content .bd-jdr__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-jdr__bouton:hover,
body.page #content .bd-jdr__bouton:focus {
background-color: #fff;
color: var(--bd-vert);
}
/* ---------------------------------------------------------------------------
* 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 : ici le bouton Discord est bien
* dans une `div.bd-jdr__actions` et non dans un ``, mais l'exclusion est
* reprise telle quelle des quatre 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-jdr p a:not(.bd-jdr__bouton),
body.page #content .bd-jdr li a:not(.bd-jdr__bouton) {
color: var(--bd-terracotta);
}
body.page #content .bd-jdr p a:not(.bd-jdr__bouton):hover,
body.page #content .bd-jdr li a:not(.bd-jdr__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-jdr__bande--vert p a:not(.bd-jdr__bouton),
body.page #content .bd-jdr__bande--vert li a:not(.bd-jdr__bouton) {
color: #fff;
text-decoration: underline;
}
/* ---------------------------------------------------------------------------
* 7. Mobile — H1 à 28 px (charte, échelle de page intérieure)
* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
body.bd-page-jdr .page-header .page-header-title {
font-size: 28px;
}
body.page .bd-jdr__bande {
padding: 40px 18px;
}
/* Une seule carte par ligne : la couverture y est large, on la borne pour
qu'elle ne mange pas tout l'écran. */
body.page .bd-jdr__visuel img {
max-height: 420px;
object-fit: contain;
background-color: #fff;
}
}