/**
* Habillage de la page « Adhérer » — Betton & Dragons
*
* Cette page n'est pas construite avec Elementor : sans cette feuille, OceanWP
* la rend en gris d'usine (#4a4a4a) avec une sidebar vide. Les valeurs ci-dessous
* viennent toutes de CHARTE-GRAPHIQUE.md — aucune n'est inventée.
*
* Les sélecteurs sont préfixés `body.page` pour la même raison que sur la fiche
* d'événement : à 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) — `.page:not(.elementor-page):not(.woocommerce-page) .entry
* a:not(…):not(…)` — et aucune combinaison de classes ne passe devant.
*/
/* Déclarées sur le et non sur le div de contenu : `.page-header` est un
frère de `.bd-adherer`, pas un descendant, et une variable non héritée rend la
déclaration invalide au calcul — le fond du thème passe alors au travers.
Répétées sur `.bd-adherer` pour que le contenu reste habillé même si la classe
de corps venait à manquer. */
body.bd-page-adherer,
.bd-adherer {
--bd-vert: #08403f;
--bd-terracotta: #c0623e;
--bd-noir: #282828;
--bd-creme: #f6f7e9;
--bd-filet: #ededed;
}
/* ---------------------------------------------------------------------------
* 1. Colonne de lecture
* La charte limite un texte suivi à ~860 px : au-delà la ligne devient illisible.
* ------------------------------------------------------------------------ */
body.page .bd-adherer {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--bd-noir);
}
body.page .bd-adherer__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-adherer__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-adherer__bande--creme {
background-color: var(--bd-creme);
}
body.page .bd-adherer__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 et la murder party. 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-adherer .page-header {
background-color: var(--bd-vert);
}
body.bd-page-adherer .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-adherer .page-header .site-breadcrumbs {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, .75);
}
body.bd-page-adherer .page-header .site-breadcrumbs a {
color: #fff;
}
body.bd-page-adherer .page-header .site-breadcrumbs a:hover {
color: var(--bd-terracotta);
}
/* ---------------------------------------------------------------------------
* 2. Typographie — Oswald en majuscules espacées, la signature du site
* ------------------------------------------------------------------------ */
body.page .bd-adherer h2,
body.page .bd-adherer h3 {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
margin: 0 0 18px;
}
body.page .bd-adherer h2 {
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
color: var(--bd-vert);
}
body.page .bd-adherer 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-adherer__bande--vert h2,
body.page .bd-adherer__bande--vert h3 {
color: #fff;
}
body.page .bd-adherer__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;
}
body.page .bd-adherer__bande--vert .bd-adherer__surtitre {
color: #fff;
opacity: .8;
}
body.page .bd-adherer__chapeau {
font-size: 18px;
line-height: 1.65;
}
body.page .bd-adherer__mention {
font-size: 14px;
color: rgba(40, 40, 40, .7);
}
body.page .bd-adherer__bande--vert .bd-adherer__mention {
color: rgba(255, 255, 255, .75);
}
/* ---------------------------------------------------------------------------
* 3. Le tarif — pastille rayon 100px (charte, §4)
* ------------------------------------------------------------------------ */
body.page .bd-adherer__tarif {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
background-color: #fff;
border: 1px solid var(--bd-filet);
border-radius: 20px;
padding: 28px 32px;
margin: 0 0 8px;
}
body.page .bd-adherer__pastille {
flex: 0 0 auto;
width: 118px;
height: 118px;
border-radius: 100px;
background-color: var(--bd-terracotta);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Oswald", sans-serif;
line-height: 1;
}
body.page .bd-adherer__pastille strong {
font-size: 38px;
font-weight: 600;
letter-spacing: 1px;
}
body.page .bd-adherer__pastille span {
font-family: "Roboto", sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 6px;
}
body.page .bd-adherer__tarif-texte {
flex: 1 1 300px;
}
body.page .bd-adherer__tarif-texte p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
* 4. Étapes et cartes — rayon 15px, ombre très douce (charte, §4)
* ------------------------------------------------------------------------ */
body.page .bd-adherer__etapes {
list-style: none;
margin: 0;
padding: 0;
counter-reset: bd-etape;
}
body.page .bd-adherer__etapes > li {
position: relative;
counter-increment: bd-etape;
padding: 0 0 0 62px;
margin: 0 0 28px;
}
body.page .bd-adherer__etapes > li:last-child {
margin-bottom: 0;
}
body.page .bd-adherer__etapes > li::before {
content: counter(bd-etape);
position: absolute;
left: 0;
top: 0;
width: 42px;
height: 42px;
border-radius: 100px;
background-color: var(--bd-vert);
color: #fff;
font-family: "Oswald", sans-serif;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
body.page .bd-adherer__etapes h3 {
margin-bottom: 6px;
}
body.page .bd-adherer__cartes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
body.page .bd-adherer__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);
}
body.page .bd-adherer__carte h3 {
font-size: 18px;
margin-bottom: 8px;
}
body.page .bd-adherer__carte p:last-child {
margin-bottom: 0;
}
/* Liste des avantages : puces terracotta, pas de disque gris d'usine. */
body.page .bd-adherer__liste {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
body.page .bd-adherer__liste li {
position: relative;
padding-left: 26px;
margin-bottom: 10px;
}
body.page .bd-adherer__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-adherer__bande--vert .bd-adherer__liste li::before {
background-color: #fff;
}
/* ---------------------------------------------------------------------------
* 5. Boutons — reproduits à l'identique de la home (charte, §3)
* Le survol INVERSE le bouton (fond blanc, texte vert profond), il ne
* l'assombrit pas.
* ------------------------------------------------------------------------ */
body.page .bd-adherer__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
body.page #content .bd-adherer__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-adherer__bouton:hover,
body.page #content .bd-adherer__bouton:focus {
background-color: #fff;
color: var(--bd-vert);
}
/* Variante secondaire : contour, pour ne pas mettre deux appels d'action
de même poids côte à côte. */
body.page #content .bd-adherer__bouton--ligne {
background-color: transparent;
color: var(--bd-vert);
box-shadow: inset 0 0 0 2px var(--bd-vert);
}
body.page #content .bd-adherer__bouton--ligne:hover,
body.page #content .bd-adherer__bouton--ligne:focus {
background-color: var(--bd-vert);
color: #fff;
}
body.page .bd-adherer__bande--vert #content .bd-adherer__bouton--ligne,
body.page #content .bd-adherer__bande--vert .bd-adherer__bouton--ligne {
color: #fff;
box-shadow: inset 0 0 0 2px #fff;
}
body.page #content .bd-adherer__bande--vert .bd-adherer__bouton--ligne:hover,
body.page #content .bd-adherer__bande--vert .bd-adherer__bouton--ligne:focus {
background-color: #fff;
color: var(--bd-vert);
}
/* Liens de texte courant : terracotta, comme partout ailleurs. Sans l'ancrage
sur #content, le lien de contenu d'OceanWP l'emporterait — voir l'en-tête.
Le `:not()` exclut les boutons : un bouton posé DANS un 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-adherer p a:not(.bd-adherer__bouton),
body.page #content .bd-adherer li a:not(.bd-adherer__bouton) {
color: var(--bd-terracotta);
}
body.page #content .bd-adherer p a:not(.bd-adherer__bouton):hover,
body.page #content .bd-adherer li a:not(.bd-adherer__bouton):hover {
color: var(--bd-vert);
}
body.page #content .bd-adherer__bande--vert p a:not(.bd-adherer__bouton),
body.page #content .bd-adherer__bande--vert li a:not(.bd-adherer__bouton) {
color: #fff;
}
/* ---------------------------------------------------------------------------
* 6. Mobile — H1 à 28 px (charte, échelle de page intérieure)
* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
body.bd-page-adherer .page-header .page-header-title {
font-size: 28px;
}
body.page .bd-adherer__bande {
padding: 40px 18px;
}
body.page .bd-adherer__tarif {
padding: 22px;
}
body.page .bd-adherer__pastille {
width: 96px;
height: 96px;
}
body.page .bd-adherer__pastille strong {
font-size: 30px;
}
body.page #content .bd-adherer__bouton {
display: block;
text-align: center;
padding: 12px 20px;
}
}