/** * Habillage de la page « Contact » — Betton & Dragons * * v1.24.1 — les deux sections « Passer nous voir » (les créneaux) et « Avant de * venir » (l'appel à l'action) ont été RETIRÉES à la demande. La page ne compte * donc plus que DEUX bandes : les canaux, puis l'adresse et la carte. * * Conséquence sur le dessin : la bande de l'adresse passe en VERT PROFOND. Les * deux sections restantes étaient toutes deux blanches ; côte à côte elles ne * formaient plus qu'un seul aplat et l'alternance de la charte (§1, §5) * disparaissait. Le vert profond est le seul des trois fonds qui la rétablisse * franchement — la bande crème, elle, a la couleur du fond du site (voir plus * bas pourquoi elle a été supprimée de cette feuille). * * Huitième page de contenu, après « Adhérer », « Murder party », « Atelier * peinture », « Jeux de figurine », « Jeux de rôles », « Nos Activités » et * « Agenda du club ». Même dispositif à la lettre, mêmes valeurs : toutes * viennent de CHARTE-GRAPHIQUE.md, aucune n'est inventée. * * La page (59) était restée en blocs Gutenberg d'origine : quatre paragraphes * et deux listes à puces forcés en `has-black-color` (le noir pur #000, hors * charte), l'adresse en `` centré, et le shortcode de carte OSM posé * au fil du texte. Elle n'a JAMAIS été une page Elementor * (`_elementor_edit_mode` vide) : elle se modifie par * `bin/poser-contenu-page.sh 59 recette/contact-contenu.html`. * * Sélecteurs préfixés `body.page` pour la même raison que sur les sept * 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 HUITIÈME feuille sur ce modèle. La fusion en un `bd-contenu.css` * commun est une dette : chaque correctif de contraste ou de bande doit * désormais être répété huit fois. */ /* Déclarées sur le aussi : `.page-header` n'est pas un descendant de `.bd-contact`, 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-contact, .bd-contact { --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-contact { font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--bd-noir); } body.page .bd-contact__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-contact__contenu { max-width: 860px; margin: 0 auto; } /* Alternance des fonds : blanc → vert. Jamais deux fonds colorés côte à côte (charte, §1). IL N'Y A PLUS DE BANDE CRÈME dans cette feuille, et son modificateur a été retiré plutôt que laissé mort : le fond du site est lui-même #F6F7E9 depuis la remise à plat d'OceanWP, une bande crème n'a donc aucune limite visible (les deux filets #EDEDED tentés sur « Jeux de rôles » ont été mesurés à 1,08:1). Avec deux sections seulement, blanc puis vert est la seule alternance qui se lise. */ body.page .bd-contact__bande--vert { background-color: var(--bd-vert); color: #fff; } body.page .bd-contact p { margin: 0 0 18px; } body.page .bd-contact p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * 1 bis. En-tête de page * * C'est elle qui porte le H1 (« Contact ») : le contenu n'en pose pas un * second, et les deux sections 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 sept autres pages de contenu. * ------------------------------------------------------------------------ */ body.bd-page-contact .page-header { background-color: #08403f; } body.bd-page-contact .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-contact .page-header .site-breadcrumbs { font-family: "Roboto", sans-serif; font-size: 14px; color: rgba(255, 255, 255, .75); } body.bd-page-contact .page-header .site-breadcrumbs a { color: #fff; } body.bd-page-contact .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 du `` (#F6F7E9) qui transparaît, * entre la page-header et la première bande d'une part, entre la dernière * bande et le pied de page d'autre part. * * Ils ont été ANNULÉS ici du 2026-09-09 au 2026-09-11 : la dernière bande est * verte et le pied de page l'est aussi (#08403F), le filet crème coupait donc * deux aplats identiques et la bande avait l'air recollée. Le raccord a été * préféré à la respiration. * * Arbitrage inverse le 2026-09-11, à la demande : la page doit respirer entre * l'en-tête et le pied comme « Nos Activités », « Jeux de rôles », « Adhérer », * « Murder party » et « Faites des Jeux », dont aucune ne porte de règle ici. * Le filet crème sous la carte est assumé — il se lit comme la fin de la page, * pas comme une coupure. La cohérence entre pages l'emporte sur le raccord * d'aplats d'une seule d'entre elles. * * Donc : AUCUNE règle sur #content-wrap dans cette feuille. * ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- * 2. Typographie — Oswald en majuscules espacées, la signature du site * ------------------------------------------------------------------------ */ body.page .bd-contact h2, body.page .bd-contact h3 { font-family: "Oswald", sans-serif; text-transform: uppercase; margin: 0 0 18px; } body.page .bd-contact h2 { font-size: 24px; font-weight: 600; letter-spacing: 1px; color: var(--bd-vert); } body.page .bd-contact 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-contact__bande--vert h2, body.page .bd-contact__bande--vert h3 { color: #fff; } body.page .bd-contact__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 (« grand texte » commence à 18,66 px en gras). Le vert profond est l'autre couleur d'identité de la charte, à 11,57:1 — aucune teinte inventée, on choisit la lisible des deux. Même arbitrage que bd-activites.css. */ body.page .bd-contact__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-contact__bande--vert .bd-contact__surtitre { color: #fff; } /* Mention secondaire de la charte (§2) : 14 px, le noir de marque à ~70 %. Posée en `color-mix` serait plus juste mais inutilement fragile ici — la valeur est écrite en rgba du même #282828. */ body.page .bd-contact__mention { font-size: 14px; color: rgba(40, 40, 40, .72); } body.page .bd-contact__bande--vert .bd-contact__mention { color: rgba(255, 255, 255, .8); } /* --------------------------------------------------------------------------- * 3. Les trois canaux — cartes blanches, rayon 15 px, ombre très douce * (charte, §4) * * C'était une liste à puces de trois liens nus. Une grille de trois colonnes * les met au même rang : ils ne sont pas hiérarchisés entre eux. Trois et * elles le resteront tant que le club n'ouvre pas un quatrième canal — d'où * `repeat(3, 1fr)` plutôt qu'un `auto-fit` qui laisserait un orphelin. * ------------------------------------------------------------------------ */ body.page .bd-contact__canaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 28px 0 0; padding: 0; list-style: none; } body.page .bd-contact__carte { display: flex; flex-direction: column; background-color: #fff; border: 1px solid var(--bd-filet); border-radius: 15px; padding: 28px 24px; box-shadow: 0 2px 6px rgba(0, 0, 0, .07); margin: 0; } body.page .bd-contact__carte h3 { margin-bottom: 12px; } /* L'adresse de courriel fait 27 caractères : dans une colonne de ~250 px elle déborderait. `overflow-wrap` la coupe plutôt que d'élargir la grille. */ body.page .bd-contact__valeur { font-size: 15px; font-weight: 500; overflow-wrap: break-word; } /* La mention pousse le bas de carte : les trois cartes gardent la même hauteur (`stretch` par défaut de la grille) et leurs mentions s'alignent. */ body.page .bd-contact__carte .bd-contact__mention { margin-top: auto; padding-top: 8px; margin-bottom: 0; } /* --------------------------------------------------------------------------- * 4. L'adresse et la carte * * L'adresse était un `` centré au fil du texte. Elle passe dans un * `
` sur aplat crème, désormais posé sur la bande VERTE : le contraste * des deux fonds fait 10,69:1 et délimite le bloc à lui seul. * * Le filet vert profond de la règle de base reste utile : il n'y a plus de * bande blanche derrière l'adresse aujourd'hui, mais sur blanc le crème ne * vaudrait que 1,06:1 et ce serait alors le filet qui bornerait le bloc (≥ 3:1, * critère 1.4.11 — même leçon que les champs du formulaire de la home). La * variante verte plus bas le neutralise, la règle de base couvre le cas où la * section repasserait sur fond clair. * * `font-style: normal` : les navigateurs mettent `address` en italique, ce qui * n'est ni dans la charte ni lisible sur trois lignes. * ------------------------------------------------------------------------ */ body.page .bd-contact__adresse { font-family: "Oswald", sans-serif; font-size: 20px; font-weight: 500; font-style: normal; line-height: 1.5; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); background-color: var(--bd-creme); border: 1px solid var(--bd-vert); border-radius: 15px; padding: 22px 26px; margin: 0 0 18px; } /* Sur la bande verte, le filet vert profond de l'adresse serait invisible : ce qui délimite le bloc est alors le contraste de son aplat crème avec le fond (10,69:1, très au-delà des 3:1 du critère 1.4.11). Le filet est donc retiré plutôt que recoloré — un filet crème sur aplat crème ne dirait rien de plus. Le texte reste vert profond sur le crème : 10,69:1. */ body.page .bd-contact__bande--vert .bd-contact__adresse { border-color: transparent; } /* Le shortcode OSM sort un conteneur de 450 px de haut avec sa propre bordure fine (attribut `map_border` du shortcode, conservé tel quel). Le rayon est posé ici, sur un `overflow: hidden`, pour qu'il rogne aussi les tuiles. Le bloc n'est PAS bridé en largeur au-delà de la colonne de lecture : une carte est une image, pas un texte suivi. */ body.page .bd-contact__carteosm { border-radius: 15px; overflow: hidden; line-height: 0; } /* `shortcode_unautop` retire le `
` que `wpautop` pose autour d'un shortcode seul sur sa ligne — mais seulement s'il y est seul. Garde-fou au cas où un jour il ne le serait plus : la marge du paragraphe ne doit pas s'ajouter. */ body.page .bd-contact__carteosm p { margin: 0; } body.page .bd-contact__carteosm img { max-width: none; } /* --------------------------------------------------------------------------- * 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-contact__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; } body.page #content .bd-contact__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-contact__bouton:hover, body.page #content .bd-contact__bouton:focus { background-color: #fff; color: var(--bd-vert); } /* Variante en ligne, pour un second appel à l'action de moindre poids : sur le fond vert, contour blanc qui se remplit au survol. Reprise de bd-activites. */ body.page #content .bd-contact__bouton--ligne { background-color: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; } body.page #content .bd-contact__bouton--ligne:hover, body.page #content .bd-contact__bouton--ligne: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 : 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-contact p a:not(.bd-contact__bouton), body.page #content .bd-contact li a:not(.bd-contact__bouton), body.page #content .bd-contact dd a:not(.bd-contact__bouton) { color: var(--bd-terracotta); } body.page #content .bd-contact p a:not(.bd-contact__bouton):hover, body.page #content .bd-contact li a:not(.bd-contact__bouton):hover, body.page #content .bd-contact dd a:not(.bd-contact__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-contact__bande--vert p a:not(.bd-contact__bouton), body.page #content .bd-contact__bande--vert li a:not(.bd-contact__bouton) { color: #fff; text-decoration: underline; } /* --------------------------------------------------------------------------- * 7. Mobile — H1 à 28 px (charte, échelle de page intérieure) * ------------------------------------------------------------------------ */ @media (max-width: 900px) { /* Les trois canaux ne tiennent plus côte à côte : l'adresse de courriel commençait à se couper en trois morceaux. */ body.page .bd-contact__canaux { grid-template-columns: 1fr; } } @media (max-width: 767px) { body.bd-page-contact .page-header .page-header-title { font-size: 28px; } body.page .bd-contact__bande { padding: 40px 18px; } body.page .bd-contact__carte { padding: 24px 20px; } body.page .bd-contact__adresse { font-size: 18px; padding: 18px 20px; } /* Le bouton prend toute la largeur : à 40 px de rembourrage horizontal, un libellé court laissait une cible flottante au milieu. */ body.page #content .bd-contact__bouton { width: 100%; text-align: center; padding: 12px 20px; } }