/* Betton & Dragons – habillage de la fiche d'événement (single tribe_events). Aligné sur la charte de la page d'accueil : voir CHARTE-GRAPHIQUE.md. Chargé uniquement sur les fiches d'événement (bd_parties_enqueue_event_style). */ body.single-tribe_events { --bd-vert: #08403f; --bd-terracotta: #c0623e; --bd-noir: #282828; --bd-creme: #f6f7e9; --bd-filet: #ededed; --bd-titre: "Oswald", "Montserrat", sans-serif; --bd-texte-police: "Roboto", "Montserrat", sans-serif; } /* --------------------------------------------------------------------------- * 0. Neutraliser le jeu de variables de The Events Calendar * * TEC ne pose presque aucune valeur en dur : ses feuilles consomment 208 * variables `--tec-*` déclarées sur `:root`, et la fiche d'événement en hérite * tout son texte. Trois d'entre elles sont **nommément hors charte** (§7) : * l'accent bleu `#334aff`, le gris de titre `#141827` et la pile de polices * système `"Helvetica Neue", Helvetica, …`. C'est ce qui faisait sortir la * description, les cartes de méta et la navigation en Helvetica grise alors * que la feuille posait bien Roboto sur le conteneur : TEC repose sa propre * famille **plus bas dans l'arbre** (`.tribe-events-content`, * `.tribe-events-back a`…), donc l'héritage du conteneur ne l'atteint jamais. * * Redéfinir les variables sur le `` règle le problème à la source, en * une déclaration par valeur, plutôt qu'en pourchassant chaque sélecteur de * TEC — et cela couvre du même coup tout ce que cette feuille n'énumère pas * (icônes, focus, bordures, états). C'est la méthode déjà retenue pour les * `--wpforms-*` du formulaire de la page d'accueil. * * Aucune de ces déclarations ne fuit hors de la fiche d'événement : la feuille * n'est mise en file que sur `is_singular('tribe_events')`, et elles sont * portées par `body.single-tribe_events`. Les vues calendrier (mois, liste), * qui partagent ces variables, ne sont pas concernées. * * Seules les variables **racines** sont réécrites : les quelque quatre-vingts * autres sont définies en `var()` de celles-ci et suivent d'elles-mêmes. * ------------------------------------------------------------------------ */ body.single-tribe_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. La couleur secondaire est le noir à 70 %, valeur de la « mention secondaire ». */ --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); /* 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 — la convention du reste du site. `--tec-color-link-primary` dérive sinon du texte. */ --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-active: #08403f; --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; /* Boutons de TEC, au cas où il en rendrait un hors de l'encart RSVP. */ --tec-color-button-primary: #c0623e; --tec-color-button-primary-hover: #a9542f; --tec-color-button-primary-active: #a9542f; --tec-color-button-secondary: #08403f; } /* --------------------------------------------------------------------------- * En-tête de page : le titre ne doit pas passer sous le fil d'Ariane * * OceanWP pose le fil d'Ariane en **`position: absolute`** (`top: 28px`, collé * à droite du `.page-header-inner`, qui est `relative`), tandis que le `

` * reste un bloc occupant les 1200 px du conteneur. Les deux ne se poussent donc * pas : dès que le titre est long, son texte passe sous le fil d'Ariane. * Mesuré sur « Bienvenus à Sakura Onsen — Empire des Cerisiers » : texte du * titre jusqu'à x = 1019, fil d'Ariane à partir de x = 909, soit **110 px de * recouvrement**, superposés verticalement. * * Les titres d'événement sont les plus exposés du site — ce sont des noms de * scénarios, pas des libellés de menu. * * On borne le titre plutôt que de retoucher le positionnement du thème : passer * `.page-header-inner` en grille flexible marchait aussi, mais renvoyait le fil * d'Ariane à la ligne et sur la gauche, ce qui change le dessin de l'en-tête de * toutes les fiches pour un cas qui ne concerne que les titres longs. La borne * est `50 %` parce que c'est exactement le `max-width` que le thème donne au fil * d'Ariane : elle tient donc quelle que soit la profondeur du fil. * * Uniquement au-dessus de 959 px : sous ce seuil, OceanWP repasse le fil en * `position: inherit` (`only screen and (max-width: 959px)` dans `style.min.css`), * donc dans le flux, sous le titre — plus aucun chevauchement possible, et la * borne y serait nuisible : mesurée à 390 px, elle réduisait le titre à 152 px * de large et 9 lignes de haut. * ------------------------------------------------------------------------ / @media only screen and (min-width: 960px) { html body.single-tribe_events .page-header .page-header-inner .page-header-title { max-width: calc(50% - 24px); } } / ---------- Largeur de lecture ---------- La sidebar est retirée côté PHP (filtre ocean_post_layout_class). Sans elle le contenu occuperait les 1200 px du conteneur. On le ramène à 1100 px, de quoi aligner les trois cartes de méta, et on borne le texte suivi séparément. / body.single-tribe_events #tribe-events-content.tribe-events-single { max-width: 1100px; margin-inline: auto; font-family: var(--bd-texte-police); color: var(--bd-noir); } / ---------- Retour à la liste ---------- / body.single-tribe_events .tribe-events-back { margin-bottom: 8px; } body.single-tribe_events .tribe-events-back a { font-family: var(--bd-texte-police); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); border-bottom: 0; } body.single-tribe_events .tribe-events-back a:hover, body.single-tribe_events .tribe-events-back a:focus { color: var(--bd-vert); } / ---------- Titre ---------- / body.single-tribe_events .tribe-events-single-event-title { margin: .3em 0 .5em; font-family: var(--bd-titre); font-size: 42px; font-weight: 600; line-height: 1.15; text-transform: uppercase; letter-spacing: 1.5px; color: var(--bd-vert); } body.single-tribe_events .tribe-events-single-event-title::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 18px; background: var(--bd-terracotta); } / ---------- Date et tarif ---------- / body.single-tribe_events .tribe-events-schedule { align-items: center; gap: 14px; margin: 0 0 32px; } / Demandé : la date en noir de marque, plus le gris OceanWP par défaut (#4a4a4a). / body.single-tribe_events .tribe-events-schedule .tribe-event-date-start, body.single-tribe_events .tribe-events-schedule .tribe-event-date-end, body.single-tribe_events .tribe-events-schedule .tribe-event-time, body.single-tribe_events .tribe-events-schedule .tribe-events-schedule__datetime, body.single-tribe_events .tribe-events-schedule > div { font-family: var(--bd-titre); font-size: 20px; font-weight: 500; letter-spacing: .5px; color: var(--bd-noir); } / Le tarif devient une pastille, comme les badges de la home. / body.single-tribe_events .tribe-events-schedule .tribe-events-cost { margin: 0; padding: 5px 16px; border-radius: 100px; background: var(--bd-terracotta); color: #fff; font-family: var(--bd-texte-police); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } / ---------- Image à la une ---------- TEC la rend à sa taille naturelle, calée à gauche d'une cellule qui fait toute la largeur : un visuel de 600 px laissait 500 px de blanc à sa droite, sans rayon ni cadrage, comme une image déposée là. On la centre, on lui pose le rayon des cartes (§4) et on la borne à la largeur de lecture pour qu'elle ne domine pas le titre. Pas d'agrandissement : `width` reste `auto`, un visuel plus petit que la colonne garde sa résolution plutôt que de flouter — même parti pris que la vignette par défaut des actualités. La hauteur est bornée en plus de la largeur, parce que les visuels de parties ne sont pas tous au même format : l'affiche carrée de « Sakura Onsen » sortait en 860 × 860 px, soit un plein écran à franchir avant d'atteindre la description, là où le visuel paysage de « Naheulbeuk » tient en 600 × 444. Borner la hauteur plutôt que recadrer en `object-fit: cover` : une affiche de partie porte du texte et un crédit d'illustrateur, un recadrage automatique en couperait. Les deux contraintes s'appliquent à ratio conservé, donc aucun visuel n'est déformé. / body.single-tribe_events .tribe-events-event-image { margin: 0 0 36px; text-align: center; } body.single-tribe_events .tribe-events-event-image img { display: inline-block; width: auto; max-width: min(100%, 860px); height: auto; max-height: 560px; border-radius: 15px; } / ---------- Corps du texte ---------- / / Le texte suivi garde une longueur de ligne lisible même si le conteneur s'élargit pour accueillir les trois cartes de méta. / body.single-tribe_events .tribe-events-single-event-description { max-width: 860px; margin-bottom: 36px; font-family: var(--bd-texte-police); font-size: 16px; line-height: 1.7; color: var(--bd-noir); } body.single-tribe_events .tribe-events-content h2, body.single-tribe_events .tribe-events-content h3 { font-family: var(--bd-titre); text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); } body.single-tribe_events .tribe-events-content a { color: var(--bd-terracotta); border-bottom-color: var(--bd-terracotta); } / ---------- « Ajouter au calendrier » ---------- / body.single-tribe_events .tribe-events-c-subscribe-dropdown__button { border: 1px solid var(--bd-vert); border-radius: 15px; background: transparent; color: var(--bd-vert); } body.single-tribe_events .tribe-events-c-subscribe-dropdown__button-text { font-family: var(--bd-texte-police); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); } body.single-tribe_events .tribe-events-c-subscribe-dropdown__button:hover, body.single-tribe_events .tribe-events-c-subscribe-dropdown__button:focus-within { background: var(--bd-vert); } body.single-tribe_events .tribe-events-c-subscribe-dropdownbutton:hover .tribe-events-c-subscribe-dropdownbutton-text, body.single-tribe_events .tribe-events-c-subscribe-dropdownbutton:focus-within .tribe-events-c-subscribe-dropdownbutton-text { color: #fff; } / Le picto d'export suit le libellé, comme les SVG des boutons de la home. / body.single-tribe_events .tribe-events-c-subscribe-dropdown__export-icon { color: var(--bd-vert); } body.single-tribe_events .tribe-events-c-subscribe-dropdownbutton:hover .tribe-events-c-subscribe-dropdownexport-icon, body.single-tribe_events .tribe-events-c-subscribe-dropdownbutton:focus-within .tribe-events-c-subscribe-dropdownexport-icon { color: #fff; } body.single-tribe_events .tribe-events-c-subscribe-dropdown__content { border-radius: 15px; } / ---------- Blocs Détails / Organisateur / Lieu ---------- The Events Calendar répartit les groupes de méta dans un ou deux conteneurs « section » selon qu'un lieu est renseigné (« primary » porte Détails et Organisateur, « secondary » le Lieu et la carte ; avec un lieu sans carte, les trois se retrouvent dans « primary »). Pour les aligner sur une seule ligne dans les deux cas sans toucher au template, on fait de l'article une grille à trois colonnes et on efface les conteneurs intermédiaires avec display: contents — leurs enfants deviennent alors des cellules de cette grille, quel que soit leur nombre. Tout le reste (image, description, bouton calendrier, encart d'inscription) reprend la largeur entière. / body.single-tribe_events #tribe-events-content > .tribe_events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } body.single-tribe_events #tribe-events-content > .tribe_events > { grid-column: 1 / -1; min-width: 0; } body.single-tribe_events .tribe-events-single-section.tribe-events-event-meta { display: contents; margin: 0; padding: 0; border: 0; background: none; } /* Chaque groupe devient sa propre carte crème, et le tout descend en fin de page : l'ordre voulu est titre, image, date, description, calendrier, inscription, puis les méta. Le DOM les place avant l'encart d'inscription, on rétablit avec « order » — les conteneurs en display: contents ne portent pas de boîte, donc l'ordre se règle sur les cellules elles-mêmes. `align-self: stretch` aligne le bas des trois cartes malgré des contenus de longueurs inégales : sans lui, l'`align-items: start` de la grille les laissait finir à trois hauteurs différentes (375, 247 et 250 px mesurés). / body.single-tribe_events .tribe-events-meta-group { order: 2; align-self: stretch; grid-column: span 1; width: auto; margin: 16px 0 0; padding: 24px 26px; border: 0; border-radius: 15px; background: var(--bd-creme); font-family: var(--bd-texte-police); color: var(--bd-noir); } body.single-tribe_events .tribe-events-meta-group .tribe-events-single-section-title { margin: 0 0 14px; font-family: var(--bd-titre); font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); } body.single-tribe_events .tribe-events-meta-list { font-size: 15px; } body.single-tribe_events .tribe-events-meta-item { padding: 8px 0; border-bottom: 1px solid rgba(8, 64, 63, .1); } body.single-tribe_events .tribe-events-meta-item:last-child { border-bottom: 0; } body.single-tribe_events .tribe-events-meta-label { font-family: var(--bd-texte-police); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); } body.single-tribe_events .tribe-events-meta-value, body.single-tribe_events .tribe-events-meta-value abbr, body.single-tribe_events .tribe-events-address { font-family: var(--bd-texte-police); color: var(--bd-noir); } / L'adresse est rendue dans un
, que les navigateurs mettent en italique — comme sur la page « Contact ». / body.single-tribe_events .tribe-events-address { font-style: normal; } body.single-tribe_events .tribe-events-meta-value a, body.single-tribe_events .tribe-events-event-categories a { color: var(--bd-vert); font-weight: 600; } body.single-tribe_events .tribe-events-meta-value a:hover, body.single-tribe_events .tribe-events-meta-value a:focus, body.single-tribe_events .tribe-events-event-categories a:hover, body.single-tribe_events .tribe-events-event-categories a:focus { color: var(--bd-terracotta); } / La carte Google est supprimée à la source (filtre tribe_get_embedded_map) : plus de .tribe-events-venue-map à habiller. / / ---------- Encart d'inscription (RSVP) ---------- / / TEC bride le wrapper à max-width: 580px, ce qui laissait l'encart d'inscription dans un tiers de la page. On le libère et on lui retire son habillage propre (fond blanc, bordure, rayon 4px) : c'est .tribe-tickets__rsvp qui porte la carte. / body.single-tribe_events #rsvp-now { order: 1; } body.single-tribe_events .tribe-tickets__rsvp-wrapper { max-width: none; width: 100%; margin: 40px 0 0; border: 0; border-radius: 20px; background: none; } / Fond blanc et non crème : le fond du site est lui-même `#F6F7E9` depuis la remise à plat d'OceanWP, si bien que la carte crème avait exactement la couleur de la page (1,0:1) et ne se détachait que par son liseré vert. Même piège que les bandes crème de « Jeux de rôles » et de « Contact ». Le blanc ne vaut lui non plus que 1,06:1 sur le crème : ce qui délimite l'encart reste le liseré vert, désormais doublé d'un filet sur les trois autres côtés. / body.single-tribe_events .tribe-tickets__rsvp { align-items: center; margin: 0; padding: 30px; border: 1px solid var(--bd-filet); border-left: 5px solid var(--bd-vert); border-radius: 20px; background: #fff; } body.single-tribe_events .tribe-tickets__rsvp-title { font-family: var(--bd-titre); font-size: 26px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); } body.single-tribe_events .tribe-tickets__rsvp-description, body.single-tribe_events .tribe-tickets__rsvp-attendance, body.single-tribe_events .tribe-tickets__rsvp-availability { font-family: var(--bd-texte-police); color: var(--bd-noir); } body.single-tribe_events .tribe-tickets__rsvp-attendance-number { font-family: var(--bd-titre); font-size: 34px; font-weight: 600; color: var(--bd-terracotta); } body.single-tribe_events .tribe-tickets__rsvp-availability-quantity { font-weight: 700; color: var(--bd-terracotta); } / Les gouttières négatives de la grille TEC débordaient de la carte. / body.single-tribe_events .tribe-tickets__rsvp-details-wrapper { flex: 1 1 0; width: auto; justify-content: flex-start; text-align: left; } body.single-tribe_events .tribe-tickets__rsvp-details { text-align: left; } body.single-tribe_events .tribe-tickets__rsvp-actions-wrapper { flex: 0 0 auto; width: auto; } / Le libellé « Réserver ici » (renommé côté PHP). / body.single-tribe_events .tribe-tickets__rsvp-actions-rsvp > .tribe-common-h2 { display: block; margin-bottom: 12px; font-family: var(--bd-titre); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-vert); } / Bouton : reprise exacte du bouton de la home. / body.single-tribe_events .tribe-tickets__rsvp-actions-button-going, body.single-tribe_events .tribe-tickets__rsvp-form-button--submit, body.single-tribe_events .tribe-common .tribe-common-c-btn { padding: 12px 40px; border: 0; border-radius: 15px; background-color: var(--bd-terracotta); color: #fff; font-family: var(--bd-texte-police); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: background-color .2s ease, color .2s ease; } / Le bouton d'inscription était ÉCRASÉ : `rsvp.css` le borne à `max-width: 125px` depuis `.event-tickets .tribe-tickets__rsvp-actions .tribe-common-c-btn`, soit (0,3,0) — au-dessus des (0,2,1) de la règle ci-dessus, qui ne pouvait donc pas l'annuler. Avec 40 px de rembourrage de chaque côté il ne restait que 45 px pour le libellé : « JE M'INSCRIS » tombait sur trois lignes dans un bouton de 125 × 92 px, en desktop comme en mobile, où le `width: 100%` de la requête média était battu par le même max-width. On reprend la main en (0,4,1), et `white-space: nowrap` garantit la ligne unique quel que soit le libellé rendu par le filtre gettext. / body.single-tribe_events .event-tickets .tribe-tickets__rsvp-actions .tribe-common-c-btn, body.single-tribe_events .event-tickets .tribe-ticketsrsvp-actions .tribe-ticketsrsvp-actions-button-going { max-width: none; width: auto; white-space: nowrap; } body.single-tribe_events .tribe-tickets__rsvp-actions-button-going:hover, body.single-tribe_events .tribe-tickets__rsvp-actions-button-going:focus, body.single-tribe_events .tribe-tickets__rsvp-form-button--submit:hover, body.single-tribe_events .tribe-tickets__rsvp-form-button--submit:focus, body.single-tribe_events .tribe-common .tribe-common-c-btn:hover, body.single-tribe_events .tribe-common .tribe-common-c-btn:focus { background-color: #fff; color: var(--bd-vert); box-shadow: inset 0 0 0 1px var(--bd-vert); } / Le lien « Non merci » ne doit pas devenir un bouton plein. / body.single-tribe_events .tribe-common .tribe-common-c-btn-link, body.single-tribe_events .tribe-common .tribe-common-c-btn-link:hover, body.single-tribe_events .tribe-common .tribe-common-c-btn-link:focus { padding: 0; background-color: transparent; box-shadow: none; color: var(--bd-terracotta); text-transform: none; letter-spacing: normal; } / ---------- Champs de saisie ---------- Event Tickets ne pose aucun fond : les champs héritent de celui de l'encart. Ils restent blancs, mais leur filet passe au vert profond plein depuis que l'encart est blanc lui aussi : un champ blanc sur fond blanc n'a plus aucune limite d'aplat, et le `rgba(8,64,63,.25)` d'avant ne tenait que ~1,6:1 — sous les 3:1 du critère 1.4.11. Le vert profond y tient 10,7:1. C'est exactement le défaut corrigé sur le formulaire de la page d'accueil (v1.19.1), où les champs sans limite franche donnaient un formulaire qui « paraissait vide ». / body.single-tribe_events .event-tickets .tribe-tickets__form-field-input, body.single-tribe_events .event-tickets .tribe-common .tribe-common-form-control-text__input, body.single-tribe_events .tribe-tickets__rsvp input[type="text"], body.single-tribe_events .tribe-tickets__rsvp input[type="email"], body.single-tribe_events .tribe-tickets__rsvp input[type="number"], body.single-tribe_events .tribe-tickets__rsvp textarea, body.single-tribe_events .tribe-tickets__rsvp select { padding: 10px 14px; border: 1px solid var(--bd-vert); border-radius: 8px; background-color: #fff; color: var(--bd-noir); font-family: var(--bd-texte-police); font-size: 15px; } body.single-tribe_events .event-tickets .tribe-tickets__form-field-input:focus, body.single-tribe_events .event-tickets .tribe-common .tribe-common-form-control-text__input:focus { border-color: var(--bd-vert); outline: 2px solid rgba(8, 64, 63, .25); outline-offset: 1px; } body.single-tribe_events .event-tickets .tribe-tickets__form-field-input::placeholder, body.single-tribe_events .event-tickets .tribe-common .tribe-common-form-control-text__input::placeholder { color: #8a8a8a; } body.single-tribe_events .tribe-tickets__form-field-label, body.single-tribe_events .tribe-common .tribe-common-form-control-text__label { font-family: var(--bd-texte-police); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bd-terracotta); } / Les boutons +/- de quantité restent des ronds, mais blancs sur la crème. / body.single-tribe_events .tribe-tickets__rsvp-ar-quantity-input-number { background-color: #fff; border-color: var(--bd-vert); } body.single-tribe_events .tribe-tickets__rsvp-ar-quantity-input input[type="number"] { border: 1px solid var(--bd-vert); border-radius: 8px; background-color: #fff; } / ---------- Navigation d'événements ---------- Les deux liens « événement précédent / suivant » sortaient en Helvetica grise (#5D5D5D, `--tec-color-text-secondary`) sans aucun traitement : c'est le seul chemin entre deux parties d'un même week-end, il valait mieux qu'un bas de page par défaut. On le sépare du contenu par un filet et on reprend la typographie des libellés de la charte. Avec un seul événement au calendrier, les deux
sont vides et laissent deux blocs de blanc : le bloc entier disparaît alors. / body.single-tribe_events .tribe-events-nav-pagination:not(:has(a)) { display: none; } body.single-tribe_events .tribe-events-nav-pagination:has(a) { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--bd-filet); } / TEC défend ces deux liens en (0,3,0) (`.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a`) : une règle en `body.single-tribe_events .tribe-events-sub-nav a`, soit (0,2,1), est écrasée en silence et le lien reste au gris `--tec-color-text-secondary`. Mesuré : la couleur calculée restait `rgba(40,40,40,.7)` malgré la règle. On reprend son sélecteur en le préfixant, ce qui donne (0,4,1). / body.single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a, body.single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a { font-family: var(--bd-texte-police); font-size: 14px; font-weight: 700; color: var(--bd-vert); border-bottom: 0; } body.single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a:hover, body.single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a:focus, body.single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a:hover, body.single-tribe_events .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a:focus { color: var(--bd-terracotta); } / ---------- Mobile ---------- / @media (max-width: 782px) { body.single-tribe_events #tribe-events-content > .tribe_events { grid-template-columns: 1fr; } body.single-tribe_events .tribe-events-meta-group { grid-column: 1 / -1; } body.single-tribe_events .tribe-tickets__rsvp { display: block; } body.single-tribe_events .tribe-events-single-event-title { font-size: 28px; letter-spacing: 1px; } body.single-tribe_events .tribe-events-meta-group, body.single-tribe_events .tribe-tickets__rsvp { padding: 20px; } / Même spécificité que la règle qui libère le max-width plus haut, sans quoi le `width: auto` qu'elle pose l'emporterait sur un `width: 100%` écrit en (0,2,1). */ body.single-tribe_events .event-tickets .tribe-tickets__rsvp-actions .tribe-common-c-btn, body.single-tribe_events .event-tickets .tribe-ticketsrsvp-actions .tribe-ticketsrsvp-actions-button-going { width: 100%; padding: 12px 20px; } }