/** * Habillage de la page « Agenda du club » — Betton & Dragons * * Cette page n'est pas construite avec Elementor : sans cette feuille, OceanWP * la rend en gris d'usine 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. * * Elle habille un contenu **statique** : le mois y est écrit en dur, comme la * proposition de refonte le prévoit pour la recette (recette/AGENDA-REFONTE.md). * Les classes sont dessinées pour qu'un futur shortcode `[bd_agenda]` produise * exactement le même balisage sans toucher à cette feuille. */ /* Déclarées sur le et non sur le div de contenu : `.page-header` est un frère de `.bd-agenda`, 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-agenda` pour que le contenu reste habillé même si la classe de corps venait à manquer. */ body.bd-page-agenda-club, .bd-agenda { --bd-vert: #08403f; --bd-terracotta: #c0623e; --bd-noir: #282828; --bd-creme: #f6f7e9; --bd-filet: #ededed; /* Couleurs d'état, volontairement hors palette (charte, §6) : elles doivent se lire comme un signal, pas comme un décor. Reprises telles quelles de bd-parties.css pour que « libre » veuille dire la même chose partout. */ --bd-libre: #2e7d4f; --bd-complet: #8a8a8a; } /* --------------------------------------------------------------------------- * 1. Colonne de lecture * La charte limite un texte suivi à ~860 px : au-delà la ligne devient illisible. * La liste des séances et la fiche d'inscription s'y tiennent ; la grille du mois * et les cartes de rythme ont besoin de la largeur du conteneur (1200 px), d'où * le modificateur `--large`. * ------------------------------------------------------------------------ */ body.page .bd-agenda { font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--bd-noir); } body.page .bd-agenda__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 donc avec la bande crème et l'alternance ne se verrait pas. */ background-color: #fff; } body.page .bd-agenda__contenu { max-width: 860px; margin: 0 auto; } body.page .bd-agenda__contenu--large { max-width: 1200px; } /* Alternance des fonds, bande par bande : blanc → crème → blanc → crème → vert. Jamais deux fonds colorés côte à côte (charte, §1). */ body.page .bd-agenda__bande--creme { background-color: var(--bd-creme); /* Deux filets, sans quoi une bande crème est invisible sur le fond crème du site : c'est le piège relevé sur la page « Jeux de rôles ». */ border-top: 1px solid var(--bd-filet); border-bottom: 1px solid var(--bd-filet); } body.page .bd-agenda__bande--vert { background-color: var(--bd-vert); color: #fff; } /* --------------------------------------------------------------------------- * 1 bis. En-tête de page * Le H1 « Agenda du club » et le fil d'Ariane sont rendus par OceanWP dans * `.page-header`, hors de `.bd-agenda`. La personnalisation du thème la met déjà * en vert profond ; on ne reprend ici que la typographie de la charte, pour que * le titre soit un Oswald majuscule et non le réglage par défaut du thème. * ------------------------------------------------------------------------ */ body.bd-page-agenda-club .page-header { background-color: var(--bd-vert); } body.bd-page-agenda-club .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; } body.bd-page-agenda-club .page-header .site-breadcrumbs { color: rgba(255, 255, 255, .75); } body.bd-page-agenda-club .page-header .site-breadcrumbs a { color: #fff; } body.bd-page-agenda-club .page-header .site-breadcrumbs a:hover { color: var(--bd-terracotta); } /* --------------------------------------------------------------------------- * 2. Typographie * Oswald en majuscules espacées pour les titres, Roboto pour le corps * (charte, §2). L'échelle est celle d'une page intérieure : H2 à 24 px, * H3 à 20 px terracotta, sur-titre Roboto 700 à 13 px. * ------------------------------------------------------------------------ */ body.page .bd-agenda h2 { font-family: "Oswald", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); margin: 6px 0 0; } body.page .bd-agenda__bande--vert h2 { color: #fff; } body.page .bd-agenda h3 { font-family: "Oswald", sans-serif; font-size: 20px; font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); margin: 0; } body.page .bd-agenda__surtitre { font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); margin: 0; } /* Sur le vert profond, le terracotta du sur-titre ne fait que 2,6:1. On monte vers un terracotta désaturé et éclairci, qui garde la teinte d'accent tout en restant lisible. */ body.page .bd-agenda__bande--vert .bd-agenda__surtitre { color: #e6b9a3; } body.page .bd-agenda__chapeau { max-width: 62ch; margin: 14px 0 0; } /* --------------------------------------------------------------------------- * 3. Liste des séances * Quatre colonnes : pastille de date, horaire, intitulé, état. C'est la vue de * référence de la page — une colonne se lit au doigt, là où une grille de sept * jours demande un écran. * ------------------------------------------------------------------------ */ body.page .bd-agenda__semaine { margin-top: 44px; } body.page .bd-agenda__semaine-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 10px; border-bottom: 2px solid var(--bd-vert); } body.page .bd-agenda__semaine-titre h3 { color: var(--bd-vert); } body.page .bd-agenda__semaine-compte { font-size: 13px; color: rgba(40, 40, 40, .6); margin-left: auto; } body.page .bd-agenda__seances { list-style: none; margin: 0; padding: 0; } body.page .bd-agenda__seance { display: grid; grid-template-columns: 64px 104px 1fr auto; align-items: center; gap: 20px; margin: 0; padding: 16px 4px; border-bottom: 1px solid var(--bd-filet); } body.page .bd-agenda__seance:last-child { border-bottom: 0; } /* Pastille ronde : rayon 100 px de la charte (§4). */ body.page .bd-agenda__jour { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 100px; background-color: var(--bd-creme); line-height: 1; } body.page .bd-agenda__jour-nom { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); } body.page .bd-agenda__jour-num { font-family: "Oswald", sans-serif; font-size: 22px; font-weight: 600; color: var(--bd-vert); margin-top: 3px; } /* La séance du jour : pastille terracotta pleine. Posée par le shortcode, qui compare la date de la séance à celle du jour — un contenu écrit à la main ne pourrait pas s'en charger sans être faux dès le lendemain. */ body.page .bd-agenda__seance--aujourdhui .bd-agenda__jour { background-color: var(--bd-terracotta); } body.page .bd-agenda__seance--aujourdhui .bd-agenda__jour-nom { color: rgba(255, 255, 255, .85); } body.page .bd-agenda__seance--aujourdhui .bd-agenda__jour-num { color: #fff; } body.page .bd-agenda__heure { font-size: 15px; /* Les horaires s'alignent en colonne : chiffres à largeur fixe. */ font-variant-numeric: tabular-nums; white-space: nowrap; } body.page .bd-agenda__intitule { min-width: 0; } body.page .bd-agenda__intitule strong { display: block; font-family: "Oswald", sans-serif; font-size: 19px; font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: .5px; color: var(--bd-vert); } body.page .bd-agenda__intitule em { display: block; font-style: normal; font-size: 14px; color: rgba(40, 40, 40, .7); margin-top: 2px; } /* --------------------------------------------------------------------------- * 4. Étiquettes d'état * Trois valeurs seulement : libre, ouvert aux nouveaux, complet ou annulé. * Le terracotta reste réservé à ce qui appelle une action (charte, §1). * ------------------------------------------------------------------------ */ body.page .bd-agenda__etat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 5px 12px; border-radius: 100px; white-space: nowrap; } body.page .bd-agenda__etat--libre { background-color: rgba(46, 125, 79, .12); color: var(--bd-libre); } body.page .bd-agenda__etat--ouvert { background-color: var(--bd-terracotta); color: #fff; } body.page .bd-agenda__etat--cours { background-color: var(--bd-creme); color: rgba(40, 40, 40, .7); } /* Une campagne en cours accueille un joueur de plus, mais seulement s'il est adhérent : l'étiquette le dit, et la légende porte le lien vers « Adhérer ». Contour plutôt qu'aplat — c'est une condition, pas un appel à l'action. */ body.page .bd-agenda__etat--adherents { background-color: transparent; color: var(--bd-terracotta); box-shadow: inset 0 0 0 1px var(--bd-terracotta); } body.page .bd-agenda__etat--annule { background-color: rgba(138, 138, 138, .15); color: var(--bd-complet); } /* Une séance annulée reste affichée — la retirer ferait croire à un oubli — mais elle est barrée et repasse en gris de signal. */ body.page .bd-agenda__seance--annulee .bd-agenda__intitule strong { text-decoration: line-through; color: var(--bd-complet); } body.page .bd-agenda__seance--annulee .bd-agenda__heure, body.page .bd-agenda__seance--annulee .bd-agenda__intitule em { color: var(--bd-complet); } body.page .bd-agenda__legende { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--bd-filet); font-size: 14px; color: rgba(40, 40, 40, .7); } body.page .bd-agenda__legende-item { display: flex; align-items: center; gap: 9px; margin: 0; } body.page .bd-agenda__legende-item::before { content: ""; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 100px; background-color: var(--bd-complet); } body.page .bd-agenda__legende-item--libre::before { background-color: var(--bd-libre); } body.page .bd-agenda__legende-item--ouvert::before { background-color: var(--bd-terracotta); } /* Puce creuse : la condition d'adhésion n'est pas un état de la table, c'est une condition d'accès. Le lien « Adhérer » de cette ligne est un lien de texte courant, traité par la section 7. */ body.page .bd-agenda__legende-item--adherents::before { background-color: transparent; box-shadow: inset 0 0 0 2px var(--bd-terracotta); } /* Message affiché quand le calendrier ne renvoie rien : une page vide donnerait à croire que le club a fermé. */ body.page .bd-agenda__vide { margin: 26px 0 0; padding: 22px 24px; background-color: var(--bd-creme); border-left: 3px solid var(--bd-terracotta); border-radius: 2px; } /* --------------------------------------------------------------------------- * 5. Grille du mois * Vue secondaire. Elle déborde sur petit écran : elle défile dans son propre * conteneur plutôt que de faire défiler la page entière. * ------------------------------------------------------------------------ */ body.page .bd-agenda__mois { margin-top: 26px; overflow-x: auto; } body.page .bd-agenda__grille { width: 100%; min-width: 620px; border-collapse: collapse; background-color: #fff; border: 1px solid var(--bd-filet); border-radius: 15px; } /* Les angles sont posés sur les cellules d'angle et non par un `overflow: hidden` sur la table : le `` est rendu *au-dessus* de la boîte de bordure et se faisait rogner sa première lettre. */ body.page .bd-agenda__grille thead th:first-child { border-top-left-radius: 15px; } body.page .bd-agenda__grille thead th:last-child { border-top-right-radius: 15px; } body.page .bd-agenda__grille tbody tr:last-child td:first-child { border-bottom-left-radius: 15px; } body.page .bd-agenda__grille tbody tr:last-child td:last-child { border-bottom-right-radius: 15px; } body.page .bd-agenda__grille caption { caption-side: top; text-align: left; padding: 0 0 12px; font-size: 14px; color: rgba(40, 40, 40, .7); } body.page .bd-agenda__grille th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: left; padding: 11px 8px; background-color: var(--bd-vert); color: #fff; border: 0; } body.page .bd-agenda__grille td { width: 14.28%; height: 88px; vertical-align: top; padding: 9px 9px 11px; border: 1px solid var(--bd-filet); } body.page .bd-agenda__num { display: block; font-family: "Oswald", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--bd-vert); } body.page .bd-agenda__hors { background-color: #fbfbf4; } /* Période de fermeture : hachures plutôt qu'un aplat, pour que la case se lise comme « rien ne s'y passe » et non comme « jour ordinaire décoloré ». */ body.page .bd-agenda__ferme { background-image: repeating-linear-gradient(135deg, #fbfbf4 0 7px, #f1f1e3 7px 14px); } body.page .bd-agenda__ferme .bd-agenda__num { color: var(--bd-complet); } body.page .bd-agenda__mention { display: block; font-size: 11px; font-style: italic; color: var(--bd-complet); margin-top: 6px; } body.page .bd-agenda__courant { /* Cerne intérieur : une bordure changerait la largeur de la cellule et décalerait toute la colonne. */ box-shadow: inset 0 0 0 2px var(--bd-terracotta); } body.page .bd-agenda__entrees { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 6px 0 0; padding: 0; } body.page .bd-agenda__entree { position: relative; margin: 0; padding-left: 12px; font-size: 12px; line-height: 1.35; color: rgba(40, 40, 40, .85); } body.page .bd-agenda__entree::before { content: ""; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 100px; background-color: var(--bd-terracotta); } body.page .bd-agenda__entree--libre::before { background-color: var(--bd-libre); } body.page .bd-agenda__entree--annule { color: var(--bd-complet); text-decoration: line-through; } body.page .bd-agenda__entree--annule::before { background-color: var(--bd-complet); } /* --------------------------------------------------------------------------- * 6. Cartes de rythme, fiche d'inscription et bloc d'accès * Rayon 15 px pour les cartes, 20 px pour la fiche (charte, §4), et une ombre * très douce sur la seule fiche : la hiérarchie passe par les aplats, pas par * l'élévation. * ------------------------------------------------------------------------ */ body.page .bd-agenda__cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; list-style: none; margin: 30px 0 0; padding: 0; } body.page .bd-agenda__carte { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 26px 24px 28px; background-color: var(--bd-creme); border-radius: 15px; } body.page .bd-agenda__bande--creme .bd-agenda__carte { background-color: #fff; } body.page .bd-agenda__carte h3 { font-size: 20px; font-weight: 600; } body.page .bd-agenda__carte-heure { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--bd-vert); margin: 0; } body.page .bd-agenda__carte p { margin: 0; font-size: 15px; } body.page .bd-agenda__fiche { margin-top: 28px; padding: 30px 30px 32px; background-color: #fff; border-radius: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, .07); } body.page .bd-agenda__fiche-date { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); margin: 0; } body.page .bd-agenda__fiche h3 { font-size: 26px; font-weight: 600; color: var(--bd-vert); margin: 8px 0 0; } body.page .bd-agenda__etiquettes { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 18px 0 0; padding: 0; } body.page .bd-agenda__etiquettes li { margin: 0; padding: 5px 12px; font-size: 13px; background-color: var(--bd-creme); border-radius: 100px; } body.page .bd-agenda__fiche p:last-child { margin: 24px 0 0; } body.page .bd-agenda__acces { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 34px; list-style: none; margin: 28px 0 0; padding: 0; } body.page .bd-agenda__acces-item { margin: 0; } body.page .bd-agenda__acces-item p { margin: 0; color: rgba(246, 247, 233, .92); } body.page .bd-agenda__acces-libelle { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #e6b9a3; margin-bottom: 6px; } /* --------------------------------------------------------------------------- * 7. Boutons et liens de texte courant * Le bouton de la charte (§3) s'inverse au survol : fond blanc, texte vert * profond. Les règles de liens excluent les boutons — un bouton posé dans un * `

` prendrait sinon la couleur des liens de contenu, soit un libellé * terracotta sur fond terracotta. * ------------------------------------------------------------------------ */ body.page #content .bd-agenda__bouton { display: inline-block; background-color: var(--bd-terracotta); color: #fff; font-family: "Roboto", sans-serif; font-size: 14px; font-weight: bold; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; padding: 12px 40px; border-radius: 15px; } body.page #content .bd-agenda__bouton:hover, body.page #content .bd-agenda__bouton:focus { background-color: #fff; color: var(--bd-vert); } /* Variante secondaire : le même bouton en contour, pour ne pas mettre deux aplats terracotta côte à côte. */ body.page #content .bd-agenda__bouton--ligne { background-color: transparent; color: var(--bd-terracotta); box-shadow: inset 0 0 0 2px var(--bd-terracotta); } body.page #content .bd-agenda__bouton--ligne:hover, body.page #content .bd-agenda__bouton--ligne:focus { background-color: var(--bd-terracotta); color: #fff; box-shadow: none; } body.page .bd-agenda__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } body.page #content .bd-agenda p a:not(.bd-agenda__bouton), body.page #content .bd-agenda li a:not(.bd-agenda__bouton) { color: var(--bd-terracotta); } body.page #content .bd-agenda p a:not(.bd-agenda__bouton):hover, body.page #content .bd-agenda li a:not(.bd-agenda__bouton):hover { color: var(--bd-vert); } /* Sur le vert profond, le terracotta d'un lien tombe à 2,6:1 : les liens de la bande verte passent en blanc souligné. */ body.page #content .bd-agenda__bande--vert p a:not(.bd-agenda__bouton), body.page #content .bd-agenda__bande--vert li a:not(.bd-agenda__bouton) { color: #fff; } body.page #content .bd-agenda__bande--vert p a:not(.bd-agenda__bouton):hover, body.page #content .bd-agenda__bande--vert li a:not(.bd-agenda__bouton):hover { color: #e6b9a3; } /* --------------------------------------------------------------------------- * 8. Mobile * La grille de séance passe de quatre colonnes à deux : la pastille de date * garde sa colonne, tout le reste s'empile à sa droite. * ------------------------------------------------------------------------ */ @media (max-width: 767px) { body.page .bd-agenda__bande { padding: 40px 18px; } body.bd-page-agenda-club .page-header .page-header-title { font-size: 28px; } body.page .bd-agenda__seance { grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 18px 2px; } body.page .bd-agenda__jour { width: 48px; height: 48px; /* La pastille reste en tête de bloc quand les trois autres cellules s'empilent : elle occupe les quatre rangées de la colonne. */ grid-row: 1 / span 3; align-self: start; } body.page .bd-agenda__heure, body.page .bd-agenda__intitule, body.page .bd-agenda__etat { grid-column: 2; } body.page .bd-agenda__etat { justify-self: start; margin-top: 6px; } body.page .bd-agenda__semaine-compte { margin-left: 0; } body.page .bd-agenda__fiche { padding: 24px 20px 26px; } }