/* Betton & Dragons – habillage des VUES d'événements de The Events Calendar (/events/, /events/liste/, /events/mois/, /events/aujourdhui/ et les archives de catégorie d'événement). Aligné sur la charte de la page d'accueil : voir CHARTE-GRAPHIQUE.md. Chargée par bd_parties_enqueue_events_style(), qui pose aussi la classe `bd-vue-events` sur le . Ne PAS confondre avec bd-event.css, qui habille la *fiche* d'un événement (is_singular('tribe_events')). Les deux feuilles ne se chargent jamais ensemble : une archive n'est pas un contenu singulier. */ body.bd-vue-events { --bd-vert: #08403f; --bd-vert-clair: rgba(8, 64, 63, .08); --bd-terracotta: #c0623e; --bd-terracotta-fonce: #a9542f; /* v1.29.1 — l'heure d'un événement est écrite en 14 px gras (12 px dans la grille du mois), sous les 18,66 px du « grand texte » : le terracotta de la charte n'y fait que 4,15:1 sur blanc, en dessous du 4,5:1 du critère 1.4.3. Le terracotta assombri du survol tient 5,21:1 sur blanc et 4,81:1 sur crème. Il est réservé à cet usage — les boutons, eux, portent des libellés blancs sur aplat terracotta et ne sont pas concernés. */ --bd-heure: #a9542f; --bd-noir: #282828; --bd-creme: #f6f7e9; --bd-filet: #ededed; --bd-titre: "Oswald", "Montserrat", sans-serif; --bd-texte-police: "Roboto", "Montserrat", sans-serif; --bd-rayon: 15px; } /* --------------------------------------------------------------------------- * 0. Neutraliser le jeu de variables de The Events Calendar * * Même dispositif que sur la fiche d'événement (bd-event.css §0), et pour la * même raison : TEC ne pose presque aucune valeur en dur, ses feuilles * consomment 208 variables `--tec-*` déclarées sur `:root`, dont trois sont * nommément hors charte (§7) — la pile de polices système * `"Helvetica Neue", Helvetica, …`, le gris de texte `#141827` et l'accent * bleu `#334aff`. * * Les vues d'archive en consomment encore plus que la fiche : la barre de * navigation, le sélecteur de vue, le sélecteur de dates, les liens de titre * et toute la grille du mois sont écrits en `var(--tec-…)`. Redéfinir les * variables **racines** sur le `` habille donc d'un coup ce que cette * feuille n'énumère pas — états de focus, icônes, bordures, désactivés. * * Aucune déclaration ne fuit hors des vues d'événement : la feuille n'est mise * en file que sur `bd_parties_est_vue_events()` et tout est porté par * `body.bd-vue-events`. * ------------------------------------------------------------------------ */ body.bd-vue-events { /* Police : la pile système de TEC, remplacée par celle de la charte (§2). */ --tec-font-family-sans-serif: "Roboto", "Montserrat", sans-serif; /* Textes : le noir de marque, pas le #141827 de TEC. */ --tec-color-text-primary: #282828; --tec-color-text-primary-light: rgba(40, 40, 40, .62); --tec-color-text-secondary: rgba(40, 40, 40, .7); --tec-color-text-disabled: rgba(40, 40, 40, .38); --tec-color-text-events-title: #08403f; --tec-color-text-event-title: #08403f; --tec-color-text-event-date: #282828; /* Accents : le bleu #334aff devient le terracotta d'action, l'accent secondaire le vert profond d'identité. */ --tec-color-accent-primary: #c0623e; --tec-color-accent-primary-hover: #a9542f; --tec-color-accent-primary-active: #a9542f; --tec-color-accent-primary-background: rgba(192, 98, 62, .08); --tec-color-accent-secondary: #08403f; --tec-color-accent-secondary-hover: rgba(8, 64, 63, .8); --tec-color-accent-secondary-active: rgba(8, 64, 63, .9); --tec-color-accent-secondary-background: rgba(8, 64, 63, .07); /* Liens : vert profond au repos, terracotta au survol. */ --tec-color-link-primary: #08403f; --tec-color-link-accent: #c0623e; --tec-color-link-accent-hover: #a9542f; /* Icônes : plus de gris #5d5d5d ni de focus bleu. */ --tec-color-icon-primary: #08403f; --tec-color-icon-primary-alt: #08403f; --tec-color-icon-active: #08403f; --tec-color-icon-hover: #c0623e; --tec-color-icon-focus: #c0623e; --tec-color-icon-disabled: rgba(40, 40, 40, .38); --tec-color-event-icon: #08403f; --tec-color-event-icon-hover: #c0623e; /* Filets : le gris de séparation de la charte (§1). */ --tec-color-border-default: #ededed; --tec-color-border-secondary: #ededed; --tec-color-border-tertiary: rgba(8, 64, 63, .3); --tec-color-border-hover: #c0623e; --tec-color-border-active: #08403f; /* Fonds. `--tec-color-background-secondary` est le gris `#f7f6f6` que TEC pose au survol d'une case du mois et sur le sélecteur de dates : il passe au crème de la charte. `--tec-color-background-events` (fond du conteneur) et `--tec-color-background-transparent` (fondu de bas de case) sont laissées d'usine — la première est déjà transparente, la seconde sert un dégradé que le blanc de TEC rend correctement. */ --tec-color-background: #ffffff; --tec-color-background-secondary: #f6f7e9; --tec-color-background-secondary-hover: #eff0dd; /* Boutons de TEC. */ --tec-color-button-primary: #c0623e; --tec-color-button-primary-hover: #a9542f; --tec-color-button-primary-active: #a9542f; --tec-color-button-secondary: #08403f; /* Numéros de jour de la grille du mois. Ce sont des couleurs de TEXTE, pas de fond : TEC n'expose aucune variable de fond pour le marqueur de jour, l'aplat du jour courant est posé plus bas en CSS (§4). Le blanc ci-dessous est donc la couleur du chiffre sur la pastille terracotta. */ --tec-color-day-marker-month: #282828; --tec-color-day-marker-month-hover: #c0623e; --tec-color-day-marker-month-active: #c0623e; --tec-color-day-marker-past-month: rgba(40, 40, 40, .45); --tec-color-day-marker-current-month: #ffffff; --tec-color-day-marker-month-current-hover: #ffffff; --tec-color-day-marker-month-current-active: #ffffff; } /* --------------------------------------------------------------------------- * 1. Mise en page générale * * Les vues d'événement utilisent le gabarit de page de TEC * (`tribe-events-page-template`) : le `
` est * posé **directement dans `
`**, sans le `#content-wrap` * d'OceanWP. Il n'hérite donc d'aucune respiration verticale — la liste * commençait collée sous l'en-tête de page vert et finissait collée au pied * de page, lui aussi vert. * * Le corps de la page n'a par ailleurs aucune couleur de fond propre : il * laisse passer le crème `#F6F7E9` du ``. C'est voulu — les cartes * d'événement sont blanches et se détachent dessus, sur le modèle des cartes * d'actualité. * ------------------------------------------------------------------------ */ body.bd-vue-events .tribe-events-view { padding-block: 50px; font-family: var(--bd-texte-police); color: var(--bd-noir); } body.bd-vue-events .tribe-events-l-container { max-width: 1200px; padding-inline: 20px; } /* La sidebar n'est pas rendue par ce gabarit, mais le porte tout de même `has-sidebar content-right-sidebar`. Garde-fou au cas où un réglage du thème la ferait revenir un jour : le contenu reste centré. */ body.bd-vue-events .tribe-events-view--list, body.bd-vue-events .tribe-events-view--month, body.bd-vue-events .tribe-events-view--day { width: 100%; } /* --------------------------------------------------------------------------- * 2. Barre d'en-tête : sélecteur de vue, navigation, sélecteur de dates * * TEC rend l'en-tête en `flex` `row-reverse wrap` : la barre du haut (titre de * période, flèches, « Aujourd'hui ») et le sélecteur de vue sont donc DÉJÀ sur * une seule ligne, le second à droite. On en fait une barre d'outils dans un * bandeau blanc à rayon 15 px (§4), comme une carte de contenu, ce qui sépare * nettement les commandes de la liste qui suit. * * Refait le 2026-09-11 (1.29.3) : rembourrage et marge basse rétablis (ils * étaient écrasés par TEC, cf. plus bas), filet interne parasite retiré, * titre de période remis en tête de ligne. * ------------------------------------------------------------------------ */ /* ⚠️ `.tribe-events` est indispensable dans le sélecteur, et pas décoratif : `views-skeleton.css` pose `.tribe-common--breakpoint-medium.tribe-events .tribe-events-header { margin: 0; padding: 0 }` en (0,3,0), contre (0,2,1) pour un `body.bd-vue-events .tribe-events-header`. Le rembourrage et la marge basse écrits ici depuis la 1.29.0 étaient donc MORTS en desktop — mesuré le 2026-09-11 : le contenu de la carte commençait à 1 px de son propre filet et la pastille du mois se collait à son bord inférieur. Ils ne tenaient que sous 767 px, où TEC ne pose pas la classe de point de rupture. Le conteneur de vue porte les deux classes : (0,3,1) repasse devant. */ body.bd-vue-events .tribe-events .tribe-events-header { gap: 14px 24px; margin: 0 0 32px; padding: 16px 22px; border: 1px solid var(--bd-filet); border-radius: var(--bd-rayon); background: #fff; } /* Le titre de vue est un `

` lecteur d'écran seul dans un conteneur que TEC met à 100 % de large : élément flex de hauteur nulle, il prenait une LIGNE entière du `flex-wrap` et ajoutait un interligne de 14 px au-dessus de la barre d'outils. `display: contents` retire la boîte sans retirer le titre de l'arbre d'accessibilité — le `

` est en position absolue hors écran, donc il ne devient pas un élément flex à son tour. Un `display: none` aurait supprimé le seul H1 de la page. */ body.bd-vue-events .tribe-events .tribe-events-header__content-title { display: contents; } /* TEC empile deux rangées de 32 px de marge basse dans un en-tête qui est pourtant un `flex` en `row-reverse wrap` : sur une seule ligne, ces marges ne séparent plus rien et décalaient le contenu vers le haut de la carte (14 px au-dessus, 32 px en dessous). Le `gap` de la carte les remplace. */ body.bd-vue-events .tribe-events .tribe-events-header__events-bar, body.bd-vue-events .tribe-events .tribe-events-header__top-bar { margin-bottom: 0; } /* ---------- Sélecteur de vue (Liste / Mois / Jour) ---------- */ /* ⚠️ `padding` est une déclaration MORTE en desktop, et c'est volontaire de la laisser telle quelle : TEC pose `.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector__button { padding: var(--tec-spacer-1) }` en (0,3,0), contre (0,2,1) ici — il gagne, et son rembourrage de 8 px convient. Pour reprendre la main il faudrait ajouter `.tribe-events` au sélecteur, ce qui élargirait la capsule d'une vue déjà recettée. Sous 767 px, la règle du §9 s'applique bien, la media query passant devant à spécificité supérieure. Le reste de ce bloc (contour, rayon, couleurs, typographie) est actif dans les deux cas. */ body.bd-vue-events .tribe-events-c-view-selector__button { padding: 8px 14px; border: 1px solid var(--bd-vert); border-radius: var(--bd-rayon); background: transparent; color: var(--bd-vert); font-family: var(--bd-texte-police); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } body.bd-vue-events .tribe-events-c-view-selector__button:hover, body.bd-vue-events .tribe-events-c-view-selector__button:focus { background: var(--bd-vert); color: #fff; } body.bd-vue-events .tribe-events-c-view-selector__button:hover .tribe-common-c-svgicon__svg-fill, body.bd-vue-events .tribe-events-c-view-selector__button:focus .tribe-common-c-svgicon__svg-fill { fill: #fff; } body.bd-vue-events .tribe-events-c-view-selector__content { border: 1px solid var(--bd-filet); border-radius: var(--bd-rayon); background: #fff; overflow: hidden; } body.bd-vue-events .tribe-events-c-view-selector__list-item-link { font-family: var(--bd-texte-police); font-size: 14px; color: var(--bd-noir); } body.bd-vue-events .tribe-events-c-view-selector__list-item-link:hover, body.bd-vue-events .tribe-events-c-view-selector__list-item-link:focus, body.bd-vue-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link { background: var(--bd-creme); color: var(--bd-vert); } /* ---------- Barre du haut : dates et navigation ---------- */ /* Le filet qui séparait les deux rangées est retiré : elles sont côte à côte, pas empilées. Il ne courait que sur la largeur de la barre du haut (1057 px sur 1116) et s'arrêtait sous le vide, à gauche du sélecteur de vue. */ body.bd-vue-events .tribe-events .tribe-events-c-top-bar { gap: 12px; margin-top: 0; padding-top: 0; border-top: 0; } /* Le libellé de période est le titre visible de la vue : il passe en tête de la barre d'outils, devant les flèches et « Aujourd'hui », que la marge automatique de TEC repousse alors contre le sélecteur de vue. Sans cet `order`, le titre sortait en troisième position, après deux commandes. */ body.bd-vue-events .tribe-events-c-top-bar__datepicker { order: -1; } /* Le libellé de période (« À venir », « septembre 2026 ») est le vrai titre visible de la vue : il passe en Oswald majuscules vert profond (§2). */ /* Même piège : le bouton porte `tribe-common-h3`, dont la taille est posée en (0,3,0). Les 22 px écrits en 1.29.0 n'ont jamais rien donné, le libellé sort en 28 px. On garde ces 28 px — entre le H1 de 40 px de l'en-tête de page et les 24 px des titres d'événement, la hiérarchie est juste — mais on les écrit explicitement, avec le sélecteur qui gagne : une valeur subie n'est pas une valeur choisie. */ body.bd-vue-events .tribe-common .tribe-events-c-top-bar__datepicker-button { font-family: var(--bd-titre); font-size: 28px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); } body.bd-vue-events .tribe-events-c-top-bar__datepicker-button:hover, body.bd-vue-events .tribe-events-c-top-bar__datepicker-button:focus { color: var(--bd-terracotta); } body.bd-vue-events .tribe-events-c-top-bar__datepicker-button .tribe-events-c-top-bar__datepicker-time { color: inherit; } /* Flèches précédent / suivant : pastilles rondes (§4, rayon 100 px). */ body.bd-vue-events .tribe-events-c-top-bar__nav-link { width: 34px; height: 34px; border: 1px solid var(--bd-filet); border-radius: 100px; background: #fff; } body.bd-vue-events .tribe-events-c-top-bar__nav-link:not([disabled]):hover, body.bd-vue-events .tribe-events-c-top-bar__nav-link:not([disabled]):focus { border-color: var(--bd-terracotta); background: var(--bd-terracotta); } body.bd-vue-events .tribe-events-c-top-bar__nav-link:not([disabled]):hover .tribe-common-c-svgicon__svg-fill, body.bd-vue-events .tribe-events-c-top-bar__nav-link:not([disabled]):focus .tribe-common-c-svgicon__svg-fill { fill: #fff; } body.bd-vue-events .tribe-events-c-top-bar__nav-link[disabled] { opacity: .5; } /* Bouton « Aujourd'hui » : bouton secondaire de la charte (contour vert). */ body.bd-vue-events .tribe-events-c-top-bar__today-button { padding: 8px 20px; border: 1px solid var(--bd-vert); border-radius: var(--bd-rayon); background: transparent; color: var(--bd-vert); font-family: var(--bd-texte-police); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } body.bd-vue-events .tribe-events-c-top-bar__today-button:hover, body.bd-vue-events .tribe-events-c-top-bar__today-button:focus { background: var(--bd-vert); color: #fff; } /* Sélecteur de dates déroulant (bootstrap-datepicker), rendu en JS. */ body.bd-vue-events .datepicker.dropdown-menu { border: 1px solid var(--bd-filet); border-radius: var(--bd-rayon); font-family: var(--bd-texte-police); } body.bd-vue-events .datepicker td.active, body.bd-vue-events .datepicker td.active:hover { background: var(--bd-terracotta); color: #fff; } body.bd-vue-events .datepicker td.today { background: var(--bd-creme); color: var(--bd-vert); } /* --------------------------------------------------------------------------- * 3. Vue LISTE * ------------------------------------------------------------------------ */ /* ---------- Séparateur de mois ---------- */ /* Le séparateur est un titre de section de la liste, pas un badge. La pastille verte posée en 1.29.0 répétait l'aplat des pastilles de date de chaque événement, trois centimètres plus bas et dans la même colonne : deux blocs verts de même famille pour deux natures d'information différentes. Il passe en titre de section de la charte (§2 : Oswald 600 majuscules, `ls 1px`, vert profond) prolongé d'un filet — le dessin classique du séparateur, et celui que TEC dessine déjà. La marge basse est laissée à TEC, qui pose `.month-separator + .event-row { margin-top: var(--tec-spacer-8) }`. */ body.bd-vue-events .tribe-events-calendar-list__month-separator { margin: 48px 0 0; border-top: 0; } /* `::after` est le filet de TEC (`flex: 1 1 auto`, 1 px, 20 px de retrait), masqué jusqu'ici. Il est repris tel quel, seule sa couleur est reprise à la charte : rien à construire, le balisage porte déjà l'élément. */ body.bd-vue-events .tribe-events-calendar-list__month-separator::after { display: block; height: 1px; margin-left: 20px; background-color: var(--bd-filet); } /* ⚠️ `.tribe-common` dans le sélecteur pour la même raison que `.tribe-events` sur l'en-tête : le `