/** * Habillage de la page « Atelier peinture » — Betton & Dragons * * Troisième page de contenu hors Elementor, après « Adhérer » et « Murder * party » : sans cette feuille, OceanWP la rend en gris d'usine. Toutes les * valeurs viennent de CHARTE-GRAPHIQUE.md — aucune n'est inventée. * * 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. * * Le vocabulaire de classes reprend celui de bd-adherer.css et bd-murder.css * (bande, contenu, surtitre, étapes, cartes, boutons) : ce sont les mêmes * composants, pour le même genre de page. C'est la troisième feuille sur ce * modèle — le moment est venu de les fondre en une feuille commune * `bd-contenu.css`, chantier laissé de côté ici pour ne pas remettre en jeu * deux pages déjà recettées en production. * * La seule addition propre à cette page est la section 8 bis : le lexique des * quatre gestes de peinture, en liste de définitions. */ /* Déclarées sur le aussi : `.page-header` n'est pas un descendant de `.bd-peinture`, 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-peinture, .bd-peinture { --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-peinture { font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--bd-noir); } body.page .bd-peinture__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-peinture__contenu { max-width: 860px; margin: 0 auto; } /* Alternance des fonds, section par section : blanc → crème → vert. Jamais deux fonds colorés côte à côte (charte, §1). */ body.page .bd-peinture__bande--creme { background-color: var(--bd-creme); } body.page .bd-peinture__bande--vert { background-color: var(--bd-vert); color: #fff; } /* --------------------------------------------------------------------------- * 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. * 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 * actualités. 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-peinture .page-header { background-color: #08403f; } body.bd-page-peinture .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-peinture .page-header .site-breadcrumbs { font-family: "Roboto", sans-serif; font-size: 14px; color: rgba(255, 255, 255, .75); } body.bd-page-peinture .page-header .site-breadcrumbs a { color: #fff; } body.bd-page-peinture .page-header .site-breadcrumbs a:hover { color: #c0623e; } /* --------------------------------------------------------------------------- * 2. Typographie — Oswald en majuscules espacées, la signature du site * ------------------------------------------------------------------------ */ body.page .bd-peinture h2, body.page .bd-peinture h3 { font-family: "Oswald", sans-serif; text-transform: uppercase; margin: 0 0 18px; } body.page .bd-peinture h2 { font-size: 24px; font-weight: 600; letter-spacing: 1px; color: var(--bd-vert); } body.page .bd-peinture 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-peinture__bande--vert h2, body.page .bd-peinture__bande--vert h3 { color: #fff; } body.page .bd-peinture__surtitre { font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); margin: 0 0 8px; } /* Sur fond vert, le terracotta du sur-titre tombe à 2.79:1 de contraste : illisible. Blanc atténué, comme sur « Adhérer ». */ body.page .bd-peinture__bande--vert .bd-peinture__surtitre { color: #fff; opacity: .8; } body.page .bd-peinture__chapeau { font-size: 18px; line-height: 1.65; } body.page .bd-peinture__mention { font-size: 14px; color: rgba(40, 40, 40, .7); } body.page .bd-peinture__bande--vert .bd-peinture__mention { color: rgba(255, 255, 255, .75); } /* --------------------------------------------------------------------------- * 3. Déroulé et démarches — étapes numérotées * Pastille de rayon 100px (charte, §4). Le compteur CSS plutôt que les puces * de

ou un

correspond aussi à ces sélecteurs, qui valent une classe de plus que la règle du bouton et lui repeignaient donc le libellé en terracotta — terracotta sur terracotta, texte illisible. Le survol, lui, gagnait la cascade : d'où un bouton qui ne se lisait qu'au passage de la souris. */ body.page #content .bd-peinture p a:not(.bd-peinture__bouton), body.page #content .bd-peinture li a:not(.bd-peinture__bouton) { color: var(--bd-terracotta); } body.page #content .bd-peinture p a:not(.bd-peinture__bouton):hover, body.page #content .bd-peinture li a:not(.bd-peinture__bouton):hover { color: var(--bd-vert); } body.page #content .bd-peinture__bande--vert p a:not(.bd-peinture__bouton), body.page #content .bd-peinture__bande--vert li a:not(.bd-peinture__bouton) { color: #fff; } /* --------------------------------------------------------------------------- * 8. Encart « à compléter » — visible en l'état, à retirer quand les * informations manquantes auront été tranchées. * ------------------------------------------------------------------------ */ body.page .bd-peinture__todo { border: 2px dashed var(--bd-terracotta); border-radius: 15px; background-color: #fff; padding: 20px 24px; margin: 0 0 32px; } body.page .bd-peinture__todo p:first-child { font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); margin-bottom: 8px; } body.page .bd-peinture__todo ul { margin: 0; padding-left: 20px; } body.page .bd-peinture__todo p:last-child, body.page .bd-peinture__todo ul:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * 8 bis. Lexique — les gestes de peinture, en liste de définitions * * Un
plutôt qu'une liste de cartes : ce sont des termes et leur * définition, l'élément le dit. Deux colonnes au-delà de 600 px, une seule en * dessous — le terme reste collé à sa définition dans les deux cas. * ------------------------------------------------------------------------ */ body.page .bd-peinture__lexique { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 32px; margin: 0; } /* La cellule de grille, c'est la PAIRE, pas le terme puis la définition séparément : sans ce div enveloppant, `dt` et `dd` étant des enfants directs du `dl`, chacun prend la case suivante et « Aplat » se retrouve en colonne 3 avec sa définition en colonne 1 de la ligne d'en dessous. */ body.page .bd-peinture__lexique > div { min-width: 0; } body.page .bd-peinture__lexique dt { font-family: "Oswald", sans-serif; font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); margin: 0 0 4px; } body.page .bd-peinture__lexique dd { margin: 0; } body.page .bd-peinture__bande--vert .bd-peinture__lexique dt { color: #fff; } /* --------------------------------------------------------------------------- * 9. Mobile — H1 à 28 px (charte, échelle de page intérieure) * ------------------------------------------------------------------------ */ @media (max-width: 767px) { body.bd-page-peinture .page-header .page-header-title { font-size: 28px; } body.page .bd-peinture__bande { padding: 40px 18px; } body.page #content .bd-peinture__bouton { display: block; text-align: center; padding: 12px 20px; } }