/** * Habillage de la page « Nos Activités » — Betton & Dragons * * Sixième page de contenu, après « Adhérer », « Murder party », « Atelier * peinture », « Jeux de figurine » et « Jeux de rôles ». Même dispositif à la * lettre, mêmes valeurs : toutes viennent de CHARTE-GRAPHIQUE.md, aucune n'est * inventée. * * La page était rendue par Elementor : quatre conteneurs « icon box » sortis * sans habillage propre (icônes SVG à la taille brute, titres au fil du texte, * « + d'infos » en simple lien). Elle en est sortie par * `bin/sortir-page-elementor.py 842`, comme « Jeux de rôles » avant elle. * * Les textes du jeu de rôles et du jeu de figurines sont repris mot pour mot. * Ceux de la peinture de figurines et de la murder party ont été écrits ici : * le premier n'avait qu'une ligne, le second rien du tout. Ils ne disent que * ce que les pages « Atelier peinture » et « Murder party » disent déjà, sans * avancer un chiffre que l'association n'a pas confirmé. * * Sélecteurs préfixés `body.page` pour la même raison que sur les cinq * feuilles précédentes (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 SIXIÈME feuille sur ce modèle. La fusion en un `bd-contenu.css` * commun n'est plus en retard, elle est franchement due. */ /* Déclarées sur le aussi : `.page-header` n'est pas un descendant de `.bd-activites`, 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-activites, .bd-activites { --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-activites { font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--bd-noir); } body.page .bd-activites__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 confondrait avec la bande crème et l'alternance ne se verrait pas. */ background-color: #fff; } body.page .bd-activites__contenu { max-width: 860px; margin: 0 auto; } /* La grille des quatre activités n'est pas un texte suivi : à 860 px les cartes tiennent deux par deux, on laisse la bande respirer jusqu'à 1100 px pour qu'elles restent confortables. */ body.page .bd-activites__contenu--large { max-width: 1100px; } /* Alternance des fonds, section par section : blanc → crème → vert. Jamais deux fonds colorés côte à côte (charte, §1). LA BANDE CRÈME NE POSE PAS DE FOND, et c'est délibéré. Le fond du site est lui-même #F6F7E9 depuis la remise à plat d'OceanWP : une bande crème a donc exactement la couleur de ses marges et du fond de page. Le correctif tenté sur « Jeux de rôles » — deux filets #EDEDED en haut et en bas — a été mesuré à la recette du 2026-08-28 et NE MARCHE PAS : #EDEDED sur #F6F7E9 vaut 1,08:1 de contraste, le filet est invisible, et il ne court de toute façon pas sur les côtés (les bandes font 1152 px, pas la largeur de l'écran). Échantillonnage de pixels à hauteur de bande, de x=30 à x=1250 : aucune rupture, du crème d'un bout à l'autre. On assume donc ce qui est réellement perçu : la zone des cartes est le fond de page, bornée en haut par la bande blanche et en bas par la bande verte, toutes deux à bords francs. Les cartes blanches donnent la texture. Passer les bandes en pleine largeur (`calc(-50vw + 50%)`) aurait été l'autre voie, écartée ici : avec une barre de défilement, 100vw dépasse la zone visible et crée un débordement horizontal — la page n'en a aucun aujourd'hui (mesuré : scrollWidth == clientWidth à 390 comme à 1280 px), on ne le remet pas en jeu pour une bande. */ body.page .bd-activites__bande--creme { background-color: transparent; } body.page .bd-activites__bande--vert { background-color: var(--bd-vert); color: #fff; } body.page .bd-activites p { margin: 0 0 18px; } body.page .bd-activites p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * 1 bis. En-tête de page * * C'est elle qui porte le H1 (« Nos Activités ») : le contenu n'en pose pas un * second, et les quatre activités y sont donc des H2. 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 cinq autres pages de contenu. * ------------------------------------------------------------------------ */ body.bd-page-activites .page-header { background-color: #08403f; } body.bd-page-activites .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-activites .page-header .site-breadcrumbs { font-family: "Roboto", sans-serif; font-size: 14px; color: rgba(255, 255, 255, .75); } body.bd-page-activites .page-header .site-breadcrumbs a { color: #fff; } body.bd-page-activites .page-header .site-breadcrumbs a:hover { color: #c0623e; } /* --------------------------------------------------------------------------- * 2. Typographie — Oswald en majuscules espacées, la signature du site * ------------------------------------------------------------------------ */ body.page .bd-activites h2, body.page .bd-activites h3 { font-family: "Oswald", sans-serif; text-transform: uppercase; margin: 0 0 18px; } body.page .bd-activites h2 { font-size: 24px; font-weight: 600; letter-spacing: 1px; color: var(--bd-vert); } body.page .bd-activites 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-activites__bande--vert h2, body.page .bd-activites__bande--vert h3 { color: #fff; } body.page .bd-activites__chapeau { font-size: 18px; line-height: 1.65; } /* Sur-titre de la charte : Roboto 700, 14 px, majuscules espacées. La charte le veut terracotta — mais #C0623E sur blanc vaut 4,15:1 (mesuré le 2026-08-28), et à 14 px en gras le seuil AA reste 4,5:1 : « grand texte » commence à 18,66 px en gras. Il passe donc au vert profond #08403F, l'autre couleur d'identité de la charte, à 11,57:1. Aucune teinte inventée : on choisit entre deux valeurs de la charte celle qui est lisible. Le défaut est LATENT DANS LES CINQ AUTRES FEUILLES de page de contenu, qui posent toutes le sur-titre en terracotta sur fond blanc. Non corrigé chez elles ici pour ne pas remettre en jeu des pages déjà recettées — à reprendre au moment de la fusion en `bd-contenu.css`. Sur fond vert le terracotta tombait déjà à 2,79:1 (mesuré le 2026-08-27 sur « Atelier peinture ») : la règle de repli le passe en blanc, on la garde. */ body.page .bd-activites__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; } body.page .bd-activites__bande--vert .bd-activites__surtitre { color: #fff; } /* --------------------------------------------------------------------------- * 3. Les quatre activités — cartes blanches, rayon 15 px, ombre très douce * (charte, §4) * * C'étaient quatre conteneurs Elementor empilés, dont deux quasi vides. Une * grille `auto-fit` les met sur une ou deux colonnes selon la place, et * `align-items: stretch` (défaut) leur donne la même hauteur. Le bouton est * poussé en bas de carte par `margin-top: auto` pour que les quatre appels à * l'action s'alignent malgré des textes de longueurs très inégales. * ------------------------------------------------------------------------ */ /* DEUX colonnes, pas `auto-fit`. Mesuré à la recette du 2026-08-28 : à 1280 px, `repeat(auto-fit, minmax(300px, 1fr))` sortait TROIS colonnes de 350 px et laissait « La murder party » seule sur la deuxième rangée, avec 750 px de vide à sa droite. Les activités sont quatre et le resteront : une grille 2 x 2 est la seule qui se ferme. */ body.page .bd-activites__cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; } body.page .bd-activites__carte { display: flex; flex-direction: column; background-color: #fff; border: 1px solid var(--bd-filet); border-radius: 15px; padding: 32px 28px; box-shadow: 0 2px 6px rgba(0, 0, 0, .07); margin: 0; } body.page .bd-activites__carte h2 { margin-bottom: 16px; } body.page .bd-activites__carte p { font-size: 15px; } /* --------------------------------------------------------------------------- * 3 bis. Les pictogrammes * * Les quatre dessins sont ceux d'origine (dé, joueurs, pinceau, suspect * masqué), bornés à 40 px et posés au terracotta, couleur des accents de la * charte — un fond vert les bascule en blanc d'une seule règle. * * Ils sont posés en `mask-image` et NON en SVG dans le contenu de la page. * Motif : les `

` ou un `

`, * ils prendraient sinon la couleur des liens de contenu — libellé terracotta * sur fond terracotta (voir CLAUDE.md). * ------------------------------------------------------------------------ */ body.page #content .bd-activites p a:not(.bd-activites__bouton), body.page #content .bd-activites li a:not(.bd-activites__bouton) { color: var(--bd-terracotta); } body.page #content .bd-activites p a:not(.bd-activites__bouton):hover, body.page #content .bd-activites li a:not(.bd-activites__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-activites__bande--vert p a:not(.bd-activites__bouton), body.page #content .bd-activites__bande--vert li a:not(.bd-activites__bouton) { color: #fff; text-decoration: underline; } /* --------------------------------------------------------------------------- * 6. Mobile — H1 à 28 px (charte, échelle de page intérieure) * ------------------------------------------------------------------------ */ @media (max-width: 767px) { body.bd-page-activites .page-header .page-header-title { font-size: 28px; } body.page .bd-activites__bande { padding: 40px 18px; } /* Une colonne : c'est `auto-fit` qui s'en chargeait avant le passage à deux colonnes fixes. */ body.page .bd-activites__cartes { grid-template-columns: 1fr; } body.page .bd-activites__carte { padding: 28px 22px; } /* Le bouton prend toute la largeur de la carte : à 40 px de rembourrage horizontal, un libellé court laissait une cible flottante au milieu. */ body.page #content .bd-activites__bouton { width: 100%; text-align: center; padding: 12px 20px; } }