/* ============================================================
Events Manager — Frontend CSS
============================================================ */
:root {
--em-color-primary: #1a3a6b;
--em-color-primary-rgb: 26, 58, 107;
--em-color-secondary: #e63946;
--em-color-accent: #457b9d;
--em-color-bg: #f8f9fa;
--em-color-surface: #ffffff;
--em-color-border: #dee2e6;
--em-color-text: #212529;
--em-color-muted: #4b4848;
/* Semantic status tokens — badges, tags, filter checkmarks */
--em-color-success: #15803d;
--em-color-success-bg: #dcfce7;
--em-color-warning: #b45309;
--em-color-warning-bg: #fef3e2;
--em-color-warning-border: #fde68a;
--em-color-info-bg: #e8f4fd;
--em-color-info-border: #bee5fd;
--em-color-new: #10b981;
/* Attention a l'asymetrie : pour « En ligne » et « A la une », `--em-color-success` /
`--em-color-warning` sont des couleurs de TEXTE posees sur un fond clair (-bg). Pour
« Nouveau », `--em-color-new` est le FOND, et le texte etait code en dur en #fff — d'ou cette
variable, sans quoi un fond clair rendait le badge illisible. */
--em-color-new-text: #ffffff;
/* Surfaces et texte SUR FOND SOMBRE — utilises par les blocs a panneau sombre (carrousel
horizontal, bandeau tuiles, onglets, chiffres cles). Ces quatre jetons remplacent 23 valeurs
`#fff` / `rgba(255,255,255,…)` ecrites en dur : un client qui change de charte n'avait aucun
point d'entree pour les ajuster, alors que tout le reste du plugin passe par des variables.
Ils ne sont PAS des reglages back-office : quatre selecteurs de couleur de plus pour un gain
marginal. Une feuille de style de theme les surcharge une fois pour les quatre blocs. */
--em-on-dark: #fff;
--em-on-dark-surface: rgba(255, 255, 255, .07);
--em-on-dark-hover: rgba(255, 255, 255, .14);
--em-on-dark-line: rgba(255, 255, 255, .18);
--em-radius: 8px;
--em-shadow: 0 2px 8px rgba(0,0,0,.08);
--em-transition: 200ms ease;
--em-font: system-ui, -apple-system, sans-serif;
/* Vignettes : ratio + cadrage communs a TOUS les visuels d'evenement (cartes PHP et JS,
agenda, « a la une »). Regles back-office thumb_ratio / thumb_fit. */
--em-thumb-ratio: 16 / 9;
--em-thumb-fit: cover;
/* Espacement des grilles d'evenements (.em-events-grid) — reglage back-office grid_gap. */
--em-grid-gap: 1.25rem;
/* Hauteur COMMUNE des controles de la barre de filtres (champ de recherche, dropdowns,
bouton Reinitialiser). Jeton partage : .em-filters est en align-items:center, chaque
controle garde donc SA hauteur intrinseque — sans hauteur commune, l'input de recherche
(dimensionne par son padding + font-size, ~35px) etait plus bas que les dropdowns (42px). */
--em-filter-height: 38px;
/* Largeur de la vignette d'une ligne d'agenda — reglage back-office agenda_thumb_width.
NB : sa HAUTEUR suit celle de la carte (align-self: stretch), c'est donc la largeur qui
pilote son rendu sur l'agenda. Masquee sous 640px. */
--em-agenda-thumb-width: 250px;
/* Degrade de la zone « sans visuel » (reglages no_image_color_from / _to). Par defaut il suit la
palette : primaire -> accent. */
--em-noimg-from: var(--em-color-primary);
--em-noimg-to: var(--em-color-accent);
}
/* ---- Common ---- */
/* Racines REELLES de tous les blocs — porteuses de la police (reglage font_family).
Jusqu'en 2.5.179 la police etait posee sur `.em-agenda`, selecteur qui ne matche AUCUN element
du markup : le reglage n'avait donc d'effet que sur `.em-upcoming` (seul autre consommateur de
--em-font). Les vraies racines sont celles-ci, produites par templates/agenda.php (agenda +
layout sidebar), events-list.php (aussi utilise par le bloc « cards »), hero-carousel.php et
upcoming.php. Toute nouvelle racine de bloc doit etre ajoutee ici (garde : tests/test-css-roots.php). */
/* LES SEIZE RACINES, en UNE regle (2.5.347).
La police etait declaree dans QUATORZE regles — cinq ici, et une dans le bloc propre de chaque autre
racine. Deux d ntre elles, `.em-agenda-sidebar-wrap` et `.em-hero-carousel`, declaraient meme
`font-family: inherit` APRES celle-ci : a specificite egale, elles gagnaient, et le reglage « Police »
etait donc MORT sur ces deux blocs, sauf a cocher « forcer partout ».
Cette liste doit correspondre EXACTEMENT a `em_font_roots()`, la table que le PHP utilise pour la regle
`!important` de « forcer partout ». Deux listes de seize noms tenues a la main auraient diverge : une
garde les compare desormais, donc une dix-septieme racine ajoutee au PHP fait echouer le test jusqu a
ce qu elle soit ici aussi. */
.em-agenda-wrap,
.em-agenda-sidebar-wrap,
.em-list-wrap,
.em-hero-carousel,
.em-upcoming,
.em-dates-strip,
.em-city-list,
.em-contact,
.em-spotlight,
.em-posters,
.em-accordion,
.em-carousel,
.em-date-tiles,
.em-tabs,
.em-kpi-list,
.em-ticker,
.em-filtered-grid,
.em-event-banner,
.em-signup-list,
.em-campus-bar,
.em-event-row,
.em-photo-carousel,
.em-announce-ribbon,
.em-dates-panel,
.em-dates-card,
.em-titled-card {
font-family: var(--em-font);
}
/* Conserve : `.em-agenda` ne matche rien dans le markup du plugin, mais peut etre cible par le CSS
global d'un client ou un template personnalise. Ses declarations `color` / `box-sizing` etaient
donc mortes elles aussi ; elles ne sont volontairement PAS reportees sur les racines ci-dessus
(passer les blocs en border-box modifierait des paddings/largeurs existants). --em-color-text
reste applique par les 9 autres regles qui le consomment : le reglage text_color fonctionne. */
.em-agenda {
font-family: var(--em-font);
color: var(--em-color-text);
box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
/*
* L'attribut `hidden` DOIT masquer, dans tout le plugin. (2.5.380)
*
* ⚠ POURQUOI CETTE RÈGLE EXISTE, ET CE QU'ELLE RÉPARE.
*
* `hidden` ne vaut `display: none` que dans la feuille du NAVIGATEUR : n'importe quel `display` d'auteur
* le bat, à égalité de spécificité comme en dessous. Les six classes de flèches du plugin déclarent
* `display: inline-flex`, donc `element.hidden = true` ne masquait RIEN.
*
* Conséquence mesurée : `wireSlides()` posait bien `b.hidden = count <= 1` — avec le commentaire « les
* masquer plutôt que les désactiver » — et la ligne était **inerte**. Sur `spotlight` et `posters`, une
* slide unique laissait donc ses deux flèches affichées, ce que le code disait explicitement vouloir
* éviter. Le défaut était latent depuis l'écriture de ce helper.
*
* TROISIÈME occurrence de cette classe dans le dépôt. `admin.css` la traite génériquement depuis la
* 2.5.370 (`.em-admin-wrap [hidden]`), après DEUX rustines ponctuelles ; `frontend.css` n'avait rien.
* On applique donc directement le remède générique — une rustine par bloc laisserait le piège armé
* pour le quatrième.
*
* ⚠ PORTÉE MESURÉE AVANT D'ÉCRIRE : dans toute la façade, **une seule ligne** utilise `hidden` — celle
* qui est cassée. Aucun gabarit, aucun `render.php`, aucun autre point du JS. Cette règle ne peut donc
* rien casser : elle ne peut que faire fonctionner la seule intention qui existe. C'est ce qui rend le
* `!important` acceptable ici.
*
* Les racines sont celles de `em_font_roots()`, et une garde compare les deux listes : une dix-septième
* racine ajoutée là-bas devra venir ici, sinon `hidden` redeviendrait silencieusement inerte dans ce
* bloc-là. Scoper aux racines et non au document entier est délibéré — le plugin n'a pas à décider du
* comportement de `hidden` dans le reste de la page.
*/
.em-filtered-grid [hidden],
.em-event-banner [hidden],
.em-signup-list [hidden],
.em-campus-bar [hidden],
.em-event-row [hidden],
.em-photo-carousel [hidden],
.em-announce-ribbon [hidden],
.em-dates-panel [hidden],
.em-dates-card [hidden],
.em-titled-card [hidden],
.em-agenda-wrap [hidden],
.em-agenda-sidebar-wrap [hidden],
.em-list-wrap [hidden],
.em-hero-carousel [hidden],
.em-upcoming [hidden],
.em-dates-strip [hidden],
.em-city-list [hidden],
.em-contact [hidden],
.em-spotlight [hidden],
.em-posters [hidden],
.em-accordion [hidden],
.em-carousel [hidden],
.em-date-tiles [hidden],
.em-tabs [hidden],
.em-kpi-list [hidden],
.em-ticker [hidden] {
display: none !important;
}
/* ---- Filters ---- */
.em-agenda__filters {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.5rem;
}
.em-filter {
padding: .5rem .75rem;
border: 1px solid var(--em-color-border);
border-radius: var(--em-radius);
background: var(--em-color-surface);
font-size: .875rem;
cursor: pointer;
transition: border-color var(--em-transition);
}
.em-filter:focus { outline: none; border-color: var(--em-color-primary); }
.em-btn-reset {
padding: .5rem 1rem;
border: 1px solid var(--em-color-border);
border-radius: var(--em-radius);
background: transparent;
font-size: .875rem;
cursor: pointer;
transition: background var(--em-transition);
}
.em-btn-reset:hover { background: var(--em-color-bg); }
/* ---- Count ---- */
.em-agenda__count {
font-size: .875rem;
color: var(--em-color-muted);
margin-bottom: 1rem;
}
/* ---- Agenda rows ---- */
.em-event-card {
background: var(--em-color-surface);
border-radius: var(--em-radius);
box-shadow: var(--em-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--em-transition), box-shadow var(--em-transition);
}
.em-event-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.em-event-card__image {
width: 100%;
aspect-ratio: var(--em-thumb-ratio);
object-fit: var(--em-thumb-fit);
}
.em-event-card__image-placeholder {
width: 100%;
/* Meme ratio que l'image reelle : sans ca, un evenement sans visuel decalerait la grille */
aspect-ratio: var(--em-thumb-ratio);
background: linear-gradient(135deg, var(--em-color-primary) 0%, var(--em-color-accent) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
/* Card image container for JS-rendered cards */
.em-event-card__img {
width: 100%;
aspect-ratio: var(--em-thumb-ratio);
overflow: hidden;
background: var(--em-color-bg);
}
.em-event-card__img img {
width: 100%;
height: 100%;
object-fit: var(--em-thumb-fit);
display: block;
}
/* ---- Zone visuelle des evenements SANS image (reglage no_image_mode) ----
Meme markup pour les 3 rendus (carte de grille, ligne d'agenda, carte « a la une ») : le
conteneur parent porte deja le ratio (--em-thumb-ratio) ou la hauteur, d'ou height:100%. */
.em-noimg {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .125rem;
background: linear-gradient(135deg, var(--em-noimg-from) 0%, var(--em-noimg-to) 100%);
color: #fff;
overflow: hidden;
}
.em-noimg__main {
/* clamp : la meme zone sert une vignette d'agenda de 250px et une carte pleine largeur */
font-size: clamp(1rem, 3.2vw, 2rem);
font-weight: 800;
line-height: 1;
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
padding: 0 .375rem;
overflow-wrap: anywhere;
}
.em-noimg__sub {
font-size: clamp(.625rem, 1.4vw, .75rem);
font-weight: 700;
letter-spacing: .12em;
opacity: .85;
}
.em-event-card__body {
padding: 1rem;
flex: 1;
display: flex;
flex-direction: column;
}
.em-event-card__meta {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-bottom: .5rem;
}
.em-badge-tag {
font-size: .75rem;
padding: .25rem .5rem;
border-radius: 999px;
background: var(--em-color-bg);
color: var(--em-color-muted);
border: 1px solid var(--em-color-border);
}
.em-badge-tag--school { background: var(--em-color-info-bg); color: var(--em-color-primary); border-color: var(--em-color-info-border); }
.em-badge-tag--type { background: var(--em-color-warning-bg); color: var(--em-color-warning); border-color: var(--em-color-warning-border); }
.em-event-card__title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 .5rem;
line-height: 1.4;
color: var(--em-color-primary);
}
.em-event-card__date {
font-size: .875rem;
color: var(--em-color-muted);
margin-bottom: .5rem;
}
.em-event-card__address {
font-size: .875rem;
color: var(--em-color-muted);
margin-bottom: .75rem;
}
.em-event-card__desc {
font-size: .875rem;
color: var(--em-color-muted);
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: .75rem;
}
.em-event-card__actions {
display: flex;
gap: .5rem;
margin-top: auto;
}
/* ==========================================================================================
BOUTON D'ÉVÉNEMENT — base commune aux 7 blocs
==========================================================================================
Le même objet existait en SEPT déclarations divergentes (13, 13, 10, 9, 8, 4 et 2 propriétés) :
`.em-btn-cta`, `.em-agenda-item__cta`, `.em-fc__cta`, `.em-hc__event-cta`, `.em-upcoming__cta`,
`.em-asb__cta-btn`, `.em-ds__cta`. C'est mécaniquement pour cette raison que les blocs avaient
dérivé — l'icône globale n'atteignait que trois d'entre eux.
Trois règles d'architecture, chacune nécessaire :
1. La base est émise AVANT les sept règles historiques, qui sont conservées. À spécificité égale
(0,1,0) la dernière déclarée gagne : chaque bloc garde donc exactement son apparence actuelle,
et toute surcharge écrite côté thème ou client continue de s'appliquer. Zéro régression.
2. Les déclinaisons (`--solid`, `--outline`, `--ghost`) ont leur classe DOUBLÉE, donc (0,2,0) :
elles battent les règles de bloc. C'est indispensable — sinon choisir « solid » ne changerait
rien là où le bloc déclare déjà un `background`. Même procédé que `.em-events-grid.em-events-grid`.
3. La couleur passe par deux variables locales et jamais par `--em-color-primary` en dur. Le hero
et la bande de dates posent leur CTA sur une image ou un fond coloré : sans le contexte
`--on-dark`, demander « outline » y peindrait un bouton bleu marine sur fond sombre, donc
illisible. Les déclinaisons sont ainsi ORTHOGONALES au contexte.
========================================================================================== */
.em-btn-event {
--em-btn-c: var(--em-color-primary); /* couleur du bouton (bordure, texte, remplissage) */
--em-btn-on: #fff; /* texte posé SUR --em-btn-c quand il remplit */
display: inline-flex;
align-items: center;
gap: .375rem;
border-style: solid;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--em-transition), color var(--em-transition), opacity var(--em-transition);
}
/* Sur fond sombre ou coloré, les deux couleurs s'inversent. */
.em-btn-event--on-dark {
--em-btn-c: #fff;
--em-btn-on: var(--em-color-primary);
padding: .5rem 1rem;
font-size: .75rem;
border-width: 1px;
}
.em-btn-event .em-icon,
.em-btn-event > svg { flex-shrink: 0; transition: transform .15s; }
.em-btn-event:hover .em-icon { transform: translateX(3px); }
/* Déclinaisons — classe doublée pour primer sur les règles de bloc (cf. point 2 ci-dessus). */
.em-btn-event--outline.em-btn-event--outline {
background: transparent;
color: var(--em-btn-c);
border-color: var(--em-btn-c);
}
.em-btn-event--outline.em-btn-event--outline:hover {
background: var(--em-btn-c);
color: var(--em-btn-on);
opacity: 1;
}
.em-btn-event--solid.em-btn-event--solid {
background: var(--em-btn-c);
color: var(--em-btn-on);
border-color: var(--em-btn-c);
}
.em-btn-event--solid.em-btn-event--solid:hover { opacity: .85; }
/* `ghost` : ni fond ni bordure. La bordure reste DÉCLARÉE en transparent et non retirée, sinon le
bouton se décalerait de sa largeur au survol d'une autre déclinaison voisine. */
.em-btn-event--ghost.em-btn-event--ghost {
background: transparent;
color: var(--em-btn-c);
border-color: transparent;
padding-left: 0;
padding-right: 0;
}
.em-btn-event--ghost.em-btn-event--ghost:hover { text-decoration: underline; opacity: 1; }
.em-btn-cta {
display: inline-flex; align-items: center; gap: .375rem;
padding: .5rem 1rem;
background: transparent;
color: var(--em-color-primary);
border: 1.5px solid var(--em-color-primary);
border-radius: var(--em-radius);
font-size: .875rem;
cursor: pointer;
text-decoration: none;
transition: background var(--em-transition), color var(--em-transition);
}
.em-btn-cta:hover { background: var(--em-color-primary); color: #fff; }
.em-btn-cta .em-icon { transition: transform .15s; flex-shrink: 0; }
.em-btn-cta:hover .em-icon { transform: translateX(3px); }
.em-btn-ics {
padding: .5rem .75rem;
background: transparent;
color: var(--em-color-muted);
border: 1px solid var(--em-color-border);
border-radius: var(--em-radius);
font-size: .875rem;
cursor: pointer;
text-decoration: none;
transition: border-color var(--em-transition), color var(--em-transition);
}
.em-btn-ics:hover { border-color: var(--em-color-primary); color: var(--em-color-primary); }
/* ---- Event card ---- */
.em-agenda__list { display: flex; flex-direction: column; gap: 1rem; }
.em-agenda-month-group { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.em-agenda-month-group:last-child { margin-bottom: 0; }
.em-agenda-month-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--em-color-primary);
margin: 0 0 .25rem;
padding-bottom: .25rem;
border-bottom: 2px solid var(--em-color-border);
text-transform: capitalize;
}
.em-agenda-item-wrap {
display: flex;
flex-direction: column;
gap: 0;
}
.em-agenda-item__campus-label {
display: inline-flex;
align-items: center;
gap: .25rem;
align-self: flex-start;
background: var(--em-color-primary);
color: #fff;
font-size: .75rem;
font-weight: 600;
padding: .25rem .75rem;
border-radius: var(--em-radius) var(--em-radius) 0 0;
letter-spacing: .03em;
}
.em-agenda-item__campus-label .em-icon {
opacity: 1;
}
.em-agenda-item {
display: flex;
background: var(--em-color-surface);
border-radius: var(--em-radius);
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
transition: transform .2s ease, box-shadow .2s ease;
cursor: default;
}
.em-agenda-item-wrap:hover .em-agenda-item {
box-shadow: 0 8px 24px rgba(0,0,0,.13);
}
/* Left column: date block + campus below */
.em-agenda-item__date-col {
flex-shrink: 0;
width: 100px;
display: flex;
flex-direction: column;
align-self: stretch;
}
.em-agenda-item__date {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--em-color-primary);
color: #fff;
padding: 1rem .5rem .75rem;
text-align: center;
gap: .125rem;
}
/* Type label at the TOP of the date column, mirroring campus-below at the bottom */
.em-agenda-item__type-top {
background: var(--em-color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .25rem;
padding: .375rem .25rem;
font-size: .625rem;
font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,.15);
text-align: center;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: .08em;
}
.em-agenda-item__type-top .em-icon { opacity: 1; flex-shrink: 0; }
.em-agenda-item__day {
font-size: 2.25rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
}
.em-agenda-item__mon {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .85;
}
/* ---- Date range: two stacked date blocks ---- */
.em-agenda-item__date--range {
flex-direction: column;
justify-content: center;
gap: 0;
padding: .5rem .375rem;
}
.em-agenda-item__date-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
}
.em-agenda-item__date--range .em-agenda-item__day { font-size: 2.25rem; }
.em-agenda-item__date--range .em-agenda-item__mon { font-size: .75rem; }
.em-agenda-item__date-sep {
display: flex;
align-items: center;
justify-content: center;
padding: .25rem 0;
opacity: .55;
flex-shrink: 0;
}
.em-date-arrow { display: block; }
/* Campus label below the date block, inside the left column */
.em-agenda-item__campus-below {
background: var(--em-color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .25rem;
padding: .375rem .25rem;
font-size: .75rem;
font-weight: 500;
border-top: 1px solid rgba(255,255,255,.15);
text-align: center;
line-height: 1.3;
}
.em-agenda-item__campus-below .em-icon { opacity: 1; flex-shrink: 0; }
/* School name at top of card body */
/*
* ⚠ `secondary` ET NON `primary` DEPUIS LA 2.5.381, et c'est un changement de rendu assumé.
*
* Cette classe est rendue par la carte d'agenda ET par la carte de grille, où elle valait `primary` — la
* MEME couleur que le titre situé juste en dessous, donc l'école s'y fondait. La carte « à la une » a sa
* propre classe (`.em-fc__school`) et porte `secondary` depuis toujours : elle avait raison, et son choix
* évite précisément ce fondu.
*
* Même donnée, deux couleurs selon le bloc, sur la même page : c'est l'incohérence qu'on ferme, pas une
* préférence esthétique. Trouvée en mesurant les couleurs de texte des deux cartes, pas par une garde.
*
* Reste réglable : cette ligne appartient au groupe « métadonnées » des deux familles, donc
* `agenda_meta_color` et `fc_meta_color` la surchargent.
*/
.em-event-school {
font-size: .75rem;
font-weight: 700;
color: var(--em-color-secondary);
text-transform: uppercase;
letter-spacing: .06em;
margin: 0;
}
/* Main wrapper (right of date block) */
.em-agenda-item__main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
/* Top bar — meta + badges, above thumb & body */
.em-agenda-item__top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .375rem;
padding: .5rem 1rem;
background: var(--em-color-bg);
border-bottom: 1px solid var(--em-color-border);
min-height: 34px;
}
/* Row — thumb left, body right */
.em-agenda-item__row {
display: flex;
flex: 1;
align-items: stretch;
}
/* Body */
.em-agenda-item__body {
flex: 1;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: .375rem;
min-width: 0;
}
.em-agenda-item__title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
line-height: 1.3;
color: var(--em-color-primary);
}
.em-agenda-item__desc {
font-size: .875rem;
color: var(--em-color-muted);
margin-bottom: .5rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.em-agenda-item__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem 0rem;
font-size: .75rem;
color: var(--em-color-muted);
}
.em-agenda-item__meta > span + span::before {
content: "\00b7";
margin: 0 .25rem;
opacity: .5;
}
.em-agenda-item__address {
font-size: .75rem;
color: var(--em-color-muted);
margin: 0;
}
.em-agenda-item__actions {
margin-top: .5rem;
/* Alignement du CTA configurable en back-office (Affichage > Theme) : gauche (defaut) / droite.
.em-agenda-item__cta est inline-flex → text-align positionne le bouton horizontalement. */
text-align: var(--em-agenda-cta-align, left);
}
.em-agenda-item__cta {
display: inline-flex; align-items: center; gap: .375rem;
padding: .5rem .75rem;
border: 1.5px solid var(--em-color-primary);
color: var(--em-color-primary);
border-radius: calc(var(--em-radius) / 2);
font-size: .75rem;
font-weight: 600;
text-decoration: none;
transition: opacity .18s;
}
.em-agenda-item__cta:hover {
opacity: .75;
}
.em-agenda-item__cta .em-icon { transition: transform .15s; flex-shrink: 0; }
.em-agenda-item__cta:hover .em-icon { transform: translateX(3px); }
/* Thumbnail — landscape, adapts to card height */
.em-agenda-item__thumb {
flex-shrink: 0;
width: var(--em-agenda-thumb-width);
align-self: stretch;
overflow: hidden;
position: relative;
aspect-ratio: var(--em-thumb-ratio);
}
.em-agenda-item__thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: var(--em-thumb-fit);
display: block;
}
/* Featured badge inside agenda item */
.em-agenda-item__featured {
align-self: flex-start;
font-size: .625rem;
padding: .125rem .5rem;
border-radius: 999px;
}
/* ---- Load more ---- */
.em-load-more {
display: block;
margin: 2rem auto 0;
padding: .75rem 2rem;
background: transparent;
border: 2px solid var(--em-color-primary);
color: var(--em-color-primary);
border-radius: var(--em-radius);
font-size: 1rem;
cursor: pointer;
transition: background var(--em-transition), color var(--em-transition);
}
.em-load-more:hover { background: var(--em-color-primary); color: white; }
/* ---- Skeleton shimmer ----
COMPOSABLE depuis la 2.5.389, et c'est un releve Lighthouse qui l'a designe (« Eviter les animations
non composees : 1 element anime trouve »).
L'animation portait sur `background-position`, que le compositeur ne sait pas prendre en charge : chaque
image demandait donc un REPEINT sur le fil principal, en boucle INFINIE — et dans la zone ou l'image LCP
doit justement se peindre. Mesure du meme releve : 2 390 ms de « delai d'affichage de l'element » sur un
LCP de 2,9 s, la ressource elle-meme etant chargee en 160 ms.
`transform` est composable : le balayage vit desormais dans un pseudo-element translate, et le fil
principal n'a plus rien a repeindre.
⚠ L'EMPILEMENT est reproduit a l'identique, et c'est la seule subtilite. Les enfants `.em-skel-*`
portent des fonds BLANCS SEMI-TRANSPARENTS (`rgba(255,255,255,.15)` a `.3`) qui se superposaient au
degrade du parent. Un `::before` absolu paint dans la couche des descendants POSITIONNES, donc au-dessus
des enfants en flux : sans le `position: relative` ci-dessous, le balayage passerait PAR-DESSUS eux et
l'effet changerait d'aspect.
`overflow: hidden` n'est pas repose : `.em-agenda-item` et `.em-event-card` le portent deja, et c'est
verifie par une garde — le jour ou l'une des deux le perdrait, le balayage deborderait la carte. */
@keyframes em-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.em-skeleton {
position: relative;
background: #e9ecef;
border-radius: var(--em-radius);
}
.em-skeleton::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0, #f8f9fa 50%, transparent 100%);
animation: em-shimmer 1.4s infinite linear;
pointer-events: none;
}
/* Les enfants REPASSENT au-dessus du balayage — cf. la note d'empilement ci-dessus. */
.em-skeleton > * { position: relative; }
.em-skeleton-card {
height: 280px;
border-radius: var(--em-radius);
}
.em-skeleton-line {
height: 1em;
margin-bottom: .5rem;
border-radius: 4px;
}
.em-skeleton-line--short { width: 60%; }
.em-skeleton-line--med { width: 80%; }
/* ---- Skeleton sub-elements (agenda + card) ---- */
.em-agenda-item.em-skeleton { min-height: 180px; }
.em-skel-date {
width: 95px; flex-shrink: 0;
background: rgba(255,255,255,.15);
}
.em-skel-body {
flex: 1; padding: 1rem;
display: flex; flex-direction: column;
justify-content: center; gap: .5rem;
}
.em-skel-title {
height: 1rem; border-radius: 4px;
background: rgba(255,255,255,.3); width: 65%;
}
.em-skel-meta {
height: .75rem; border-radius: 4px;
background: rgba(255,255,255,.22); width: 45%;
}
.em-skel-meta.em-skel-meta--short { width: 30%; }
.em-event-card.em-skeleton { min-height: 280px; }
.em-skel-img {
height: 160px; flex-shrink: 0;
background: rgba(255,255,255,.2);
}
.em-skel-content {
flex: 1; padding: 1rem;
display: flex; flex-direction: column; gap: .5rem;
}
/* ---- Empty state ---- */
.em-empty-state {
text-align: center;
padding: 3rem 1rem;
color: var(--em-color-muted);
}
.em-empty-state svg, .em-empty-state .dashicons { font-size: 3rem; margin-bottom: 1rem; }
.em-empty-message {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
text-align: center;
padding: .5rem;
/*
* LA COULEUR DU TEXTE DE SON BLOC, attenuee a 75 % (2.5.447). Elle valait `--em-color-muted`, UNE couleur
* pour tous les blocs : sur les douze PANNEAUX SOMBRES, mesure, 1,25:1 avec la palette par defaut et 1:1 sur
* un site dont le « Texte attenue » egalait la primaire — message invisible. Aucune couleur unique ne peut
* convenir a un fond clair ET a un fond sombre ; l'HERITAGE, si : le message suit le texte du panneau qui le
* porte, et la « Couleur du texte » reglee sur un bloc. Aucun reglage de plus, aucun bloc a lister.
*
* Deux declarations, a dessein : `inherit` est le REPLI des navigateurs sans `color-mix()` (avant Chrome 111,
* Safari 16.2, Firefox 113), qui affichent alors la couleur pleine du texte — lisible. `currentColor` DANS la
* propriete `color` designe la couleur HERITEE, d'ou l'attenuation du texte du parent. Pas d'`opacity` : elle
* delaverait aussi le bouton « voir tous les evenements » rendu dans ce message.
*/
color: inherit;
color: color-mix(in srgb, currentColor 75%, transparent);
}
.em-empty-message__link {
display: inline-block;
padding: .5rem 1.25rem;
background: var(--em-color-primary);
color: #fff;
border-radius: var(--em-radius);
text-decoration: none;
font-weight: 600;
transition: opacity .15s;
}
.em-empty-message__link:hover { opacity: .85; color: #fff; }
/* ---- Responsive ---- */
@media (max-width: 640px) {
/* On mobile: date-col (fixed 92px) left, main fills right column */
.em-agenda-item {
display: grid;
grid-template-columns: 90px 1fr;
}
.em-agenda-item__date-col {
grid-column: 1;
grid-row: 1;
width: auto;
align-self: stretch;
}
.em-agenda-item__date {
padding: .625rem .375rem .5rem;
gap: .125rem;
}
.em-agenda-item__main {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.em-agenda-item__row {
flex: 1;
flex-direction: column;
}
.em-agenda-item__day { font-size: 1.5rem; }
.em-agenda-item__date--range .em-agenda-item__day { font-size: 1.75rem; }
.em-agenda-item__date--range { padding: .375rem .25rem; justify-content: flex-start; }
.em-agenda-item__date--range .em-agenda-item__date-block { flex: 0 0 auto; }
/* Hide thumbnail on mobile — keeps the card clean and readable at narrow widths */
.em-agenda-item__thumb { display: none; }
/*
* CTA CENTRE et non pleine largeur (2.5.261). Il occupait toute la largeur de la carte : sur un
* ecran de 360 px cela donne un bouton de plus de 300 px pour deux mots, qui pese plus lourd que
* le titre de l'evenement et fait lire la carte a l'envers.
*
* `inline-flex` + `width: auto` pour la taille, `text-align: center` sur la rangee pour le placer :
* le bouton contient une icone, donc il etablit son propre contexte de mise en page — mais il
* reste inline-level, et c'est ce qui permet a `text-align` de le deplacer.
*
* Le padding passe de `.25rem` a `.5rem 1.125rem` : sans largeur imposee, c'est lui seul qui donne
* au bouton sa surface tactile. En dessous de 44 px de haut, la cible devient difficile a viser au
* doigt — seuil des recommandations d'accessibilite mobile.
*/
.em-agenda-item__actions { width: 100%; margin-top: 0; padding: .375rem .75rem .625rem; text-align: center; }
.em-agenda-item__cta {
display: inline-flex; width: auto; justify-content: center;
padding: .5rem 1.125rem;
background: var(--em-color-primary); color: #fff;
border-color: var(--em-color-primary);
}
.em-agenda-item__cta:hover { opacity: .85; color: #fff; }
}
/* CLS prevention: hold layout space while JS is fetching & rendering */
.em-agenda-list:empty { min-height: 5rem; }
/* ===================================================================================================
RESERVATION DE HAUTEUR : ne pas pousser la page quand le JS remplit (2.5.343)
Constat 08, reponse A. Mesure sur un releve reel : CLS 0,019 — sous le seuil de 0,1, donc PAS un
probleme aujourd'hui. Ce qui change la donne est l'emplacement : un bloc en EN-TETE pousse tout ce qui
suit, sur chaque page. On reserve donc, et on le fait avec des nombres qu'on peut justifier.
⚠ L'agenda etait le premier suspect : Lighthouse lui imputait 0,018 des 0,019. Mesure faite, sa liste
reserve deja `max(500, par_page x 220)px` en style inline, et `.em-featured-zone--carousel` porte
`min-height: 500px`. Les deux gros conteneurs etaient donc DEJA reserves — et la premiere idee (« il
faut reserver la liste ») aurait ajoute une regle inutile en croyant corriger.
Ce qui restait sans reservation dans ce bloc : les conteneurs de DEROULANTE. `templates/agenda.php`
rend `.em-filter-select` vides et VISIBLES (trois d'entre eux sans `display:none`), donc a hauteur
nulle, jusqu'a ce que `buildFilterDropdown()` y ecrive un bouton haut de `--em-filter-height`. La
barre grandit alors, et tout le bloc avec.
Cette reservation-la ne coute AUCUNE estimation : la hauteur est le jeton que les trois controles de
la barre partagent deja (recherche, declencheur, bouton « reinitialiser »).
`:not(:has(*))` et non `:empty` : le conteneur recoit des ELEMENTS, et `:empty` echoue des qu'il y a
un blanc dans la source. La reservation se LIBERE donc d'elle-meme a l'arrivee du premier enfant, sans
une ligne de JavaScript, sans etat a synchroniser, et sans risque de laisser un vide permanent.
Sans `:has()` — Firefox anterieur a 121 — il n'y a simplement pas de reservation : le comportement
d'avant, jamais un affichage casse.
=================================================================================================== */
.em-filter-select:not(:has(*)) {
min-height: var(--em-filter-height);
}
/* ---------------------------------------------------------------------------------------------------
Les autres blocs : PROPHYLACTIQUE, et je le dis.
Aucun n'a ete signale par le releve — la page testee les portait tous, et seul l'agenda a bouge. Mais
aucun ne reserve quoi que ce soit, et c'est l'en-tete qui rend le defaut coûteux.
DEUX nombres, pas onze, et chacun s'explique :
· piste (`--em-track-reserve`, 260px) : une rangee de cartes. La carte la plus etroite du lot fait
190-240px de large, son visuel suit `--em-thumb-ratio` (16/9 par defaut) donc ~110-135px de haut,
et le corps — date, titre, ville — en ajoute ~120. Soit 230 a 255. On prend 260, legerement
au-dessus : sur-reserver ne provoque aucun decalage, sous-reserver en laisse un ;
· liste (`--em-list-reserve`, 180px) : environ quatre lignes. `.em-cl__item` porte `padding: .5rem 0`
autour d'une ligne de texte, soit ~44px par ligne — 4 x 44 = 176.
Les deux sont des VARIABLES : un site dont les cartes sont plus hautes les ajuste sans toucher au
plugin. Et comme la reservation se libere a l'arrivee du contenu, une valeur imparfaite ne coûte au
pire qu'un residu de decalage, jamais un vide durable.
--------------------------------------------------------------------------------------------------- */
/* `.em-tk__track` n'est PAS dans ce groupe : la bande fait une ligne, sa reservation propre est
quinze lignes plus bas. Il y figurait, et la seconde declaration le reprenait — une regle morte, que
j'avais ecrite moi-meme dans la version qui a introduit ces reservations (2.5.343). */
.em-ds__track:not(:has(*)),
.em-dt__track:not(:has(*)),
.em-car__track:not(:has(*)),
.em-hc__track:not(:has(*)) {
min-height: var(--em-track-reserve, 260px);
}
.em-cl__list:not(:has(*)),
.em-kpi__rows:not(:has(*)),
.em-ac__list:not(:has(*)),
.em-tb__grid:not(:has(*)),
.em-asb__events:not(:has(*)),
.em-upcoming__body:not(:has(*)) {
min-height: var(--em-list-reserve, 180px);
}
/* Le ticker fait UNE ligne : lui appliquer les 260px d'une piste de cartes serait absurde. Sa hauteur
reglable (`--em-tk-h`) vaut `auto` par defaut, donc ne reserve rien — on retombe sur une ligne. */
.em-tk__track:not(:has(*)) {
min-height: var(--em-tk-h, 2.75rem);
}
/* ===================== SEARCH INPUT ===================== */
/* Classe DOUBLEE : un theme qui ecrit `input[type=search] { background: #FFF; padding: 0 1rem }` pese
(0,1,1) et battait cette regle a (0,1,0). Deux degats, dont un tres visible : le `padding` gauche qui
loge la loupe disparaissait, et le RACCOURCI `background` reinitialisait `repeat` / `position` / `size`
— l'image survivant par ailleurs (elle vient d'une regle a 0,2,0), elle se TUILAIT sur toute la
largeur. Signale depuis un site reel : une trentaine de loupes.
On double le SELECTEUR plutot que de recopier la declaration : l'URI de donnees du SVG n'existe
toujours qu'une fois. Meme idiome que `.em-events-grid.em-events-grid`, et meme raison.
⚠ La regle mobile plus bas est doublee AUSSI : sans cela elle passerait sous celle-ci et le champ ne
prendrait plus toute la largeur sous 640 px. Corriger une fuite en creant un defaut n'est pas
corriger. */
.em-search-input.em-search-input {
flex: 1; min-width: 180px; max-width: 300px;
/* Hauteur alignee sur les dropdowns via le jeton commun. box-sizing explicite : la regle
globale `* { box-sizing: inherit }` est ancree sur .em-agenda, selecteur absent du markup,
donc la valeur heritee depend du theme hote — sans ca, `height` s'ajouterait au padding. */
box-sizing: border-box;
height: var(--em-filter-height);
padding: .5rem .75rem .5rem 2.25rem;
border: 1px solid var(--em-color-border);
border-radius: var(--em-radius);
font-size: .875rem;
background: var(--em-color-surface)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
no-repeat .625rem center;
background-size: 14px;
transition: border-color var(--em-transition);
}
.em-search-input:focus { outline: none; border-color: var(--em-color-primary); box-shadow: 0 0 0 .25rem rgba(26,58,107,.18); }
/* ===================== AGENDA WRAP ===================== */
.em-agenda-wrap { outline: none; }
.em-agenda-wrap:focus,
.em-agenda-wrap:focus-visible { outline: none; }
/* ===================== AGENDA CONTAINER (desktop only) =====================
RETOUR EN ARRIERE (2.5.259). La 2.5.256 avait pose un retrait lateral de 1 rem a TOUTES les largeurs,
pour qu'un bloc en « Pleine largeur » ne colle pas son contenu aux bords. L'intention etait juste, la
portee etait trop large : ce conteneur enveloppe AUSSI la liste d'evenements et la bande « a la une »,
donc le retrait s'ajoutait a leurs propres marges et decalait tout l'agenda sur mobile — y compris la
ou personne ne l'avait demande.
Lecon : un conteneur partage par trois zones n'est pas le bon endroit pour corriger le cadrage d'UNE
d'entre elles. Si le besoin revient, il faudra viser la zone concernee, pas leur ancetre commun.
========================================================================== */
/* ==========================================================================
LARGEUR ET RETRAIT DU CONTENEUR — un seul point, deux racines (2.5.344)
DEUX defauts signales depuis un site reel, et une seule cause : la contrainte de largeur n'existait
qu'a UN endroit, et une racine sur deux ne la traversait pas.
① « la page agenda a un prb de container entre 13XXpx et 768px, prb de padding left et right »
Exact, et la fenetre est precisement 768 px -> largeur maximale reglee. Au-dessus de 768 px la regle
ne posait AUCUN retrait lateral, en s'appuyant sur `margin: auto` — mais `margin: auto` ne produit une
marge que si la fenetre DEPASSE `max-width`. Entre les deux, le conteneur fait exactement la largeur de
la fenetre, la marge automatique vaut zero, et le contenu touche les deux bords.
La borne a 767 px avait une raison ecrite : « cumuler les deux rognerait la largeur maximale annoncee —
un 1280 qui rendrait 1248 ». La raison etait juste ; c'est la conclusion qui l'etait moins. On garde la
promesse en ELARGISSANT la boite de la valeur du retrait : `max-width` vaut la largeur reglee PLUS les
deux retraits, donc au-dela le contenu mesure exactement la largeur reglee, et en dessous il respire.
fenetre 1600 : boite 1312, retrait 2 x 16 -> contenu 1280 (identique a avant)
fenetre 1000 : boite 1000, retrait 2 x 16 -> contenu 968 (avant : 1000, bord a bord)
Rien ne bouge donc sur grand ecran, et la fenetre defectueuse est corrigee.
② « le bloc em-agenda-sidebar-wrap depasse le container par rapport aux autres blocs »
Exact aussi, et pour une raison structurelle : la disposition « sidebar » ne contient AUCUN
`.em-agenda-container`. Sa racine porte directement `.em-asb__inner`. Elle n'heritait donc ni de la
largeur maximale ni du centrage — elle prenait toute la largeur de son parent quand tous les autres
blocs s'arretaient a la largeur reglee.
Les deux racines partagent maintenant la MEME declaration. Un troisieme gabarit qui oublierait le
conteneur n'aurait qu'a s'ajouter a ce selecteur, au lieu de recopier quatre lignes qui divergeraient.
⚠ CONSEQUENCE ASSUMEE : entre 768 px et la largeur reglee, le panneau du widget est desormais en retrait
de 1rem comme les cartes de l'agenda. C'est le but — il touchait les bords quand ses voisins ne les
touchaient pas.
Sous 768 px : rien ne change ici. Les deux regles de retrait mobile qui suivent restent seules
responsables, et elles visent des zones precises pour la raison expliquee juste apres.
========================================================================== */
/*
CLASSE DOUBLEE (2.5.346). Signale : « quand j'applique un nv container en back office ca ne fonctionne
pas ».
La chaine du reglage est intacte — mesure de bout en bout : 1440 est enregistre, assaini, et emis en
`--em-container-max-width: 1440px`. Ce qui manquait est le POIDS de la regle qui la lit : a une seule
classe, elle pese (0,1,0), le minimum possible. N'importe quelle regle de theme a deux classes, ou a une
classe plus un type, la battait — et les feuilles de styles globaux d'un theme de blocs en sont pleines
(`--wp--style--global--content-size` y vaut typiquement 1130 px).
Troisieme fois que ce depot paie la specificite : la loupe de recherche (2.5.335), les puces de liste
(2.5.341), la largeur du conteneur maintenant. La parade est la meme, et elle est deja eprouvee ici.
⚠ Ce n'est PAS forcement la cause chez le signalant, et il faut le dire : une largeur maximale ne peut
rien montrer sur une fenetre plus etroite qu'elle. A 1280 px de fenetre, passer le reglage de 1280 a 1440
ne change RIEN — la fenetre est la contrainte. L'indice du champ le dit desormais.
Prix assume : un theme qui voudrait imposer sa propre largeur devra doubler sa classe a son tour. C'est
le but — le reglage du plugin doit gagner, sinon il ne sert a rien.
========================================================================== */
@media (min-width: 768px) {
.em-agenda-container.em-agenda-container,
.em-agenda-sidebar-wrap.em-agenda-sidebar-wrap {
/* `+ 2rem` = les deux retraits ci-dessous. C'est ce qui laisse le CONTENU a la largeur reglee. */
max-width: calc(var(--em-container-max-width, 1280px) + 2rem);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
}
/*
* Retrait lateral du conteneur DE LA BANDE DE FILTRES, sous 768 px uniquement.
*
* Deuxieme tentative, et la portee est le sujet. La 2.5.256 avait pose ce retrait sur
* `.em-agenda-container` tout court : or ce conteneur enveloppe TROIS zones — la bande de filtres, la
* bande « a la une » et la liste d'evenements. Le retrait s'ajoutait donc aux marges propres des deux
* dernieres et decalait tout l'agenda. Annule en 2.5.259.
*
* Ici il ne vise que le conteneur INTERIEUR a la bande. Le besoin est reel et limite a elle : quand le
* bloc est en « Pleine largeur », plus aucune colonne ne fournit de marge, et la barre de recherche
* touche les deux bords de l'ecran. Les deux autres zones ont leurs propres marges et n'ont jamais eu
* besoin de rien.
*
* Borne a 767 px : au-dela, le centrage par `max-width` + marges automatiques s'en charge, et cumuler
* les deux rognerait la largeur maximale annoncee — un « 1280 » qui rendrait 1248.
*/
@media (max-width: 767px) {
.em-filters-bar .em-agenda-container {
box-sizing: border-box;
}
}
/*
* Retrait lateral des ZONES DE CONTENU sous 768 px — bande « a la une » et liste d'evenements.
*
* Le selecteur est un ENFANT DIRECT, et c'est ce qui le distingue de la 2.5.256. Le gabarit contient
* DEUX `.em-agenda-container` :
* .em-agenda-wrap > .em-filters-bar > .em-agenda-container (les filtres, traite plus haut)
* .em-agenda-wrap > .em-agenda-container (les cartes — celui-ci)
* Viser la classe sans le `>` touchait les deux : les filtres recevaient donc un retrait EN PLUS du
* leur, ce qui decalait la bande. Le `>` separe proprement les deux besoins.
*
* Borne a 767 px : au-dela, le centrage par `max-width` + marges automatiques s'en charge, et cumuler
* les deux rognerait la largeur maximale annoncee.
*/
@media (max-width: 767px) {
.em-agenda-wrap > .em-agenda-container {
box-sizing: border-box;
/* Ces deux lignes avaient DISPARU du fichier entre la 2.5.261 et la 2.5.262 : la regle ne contenait
plus que `box-sizing`, donc les cartes touchaient les deux bords sur mobile. La garde du lot ne
verifiait que la PRESENCE du selecteur, pas celle de ses declarations — c'est exactement la meme
faute que « une cle presente ne dit pas qu'elle est remplie » (2.5.249). La garde exige desormais
les declarations elles-memes. */
padding-left: 1rem;
padding-right: 1rem;
}
}
/*
* Neutralisation d'une astuce de pleine largeur DEVENUE FAUSSE quand le bloc est deja en pleine largeur.
*
* Un theme sort couramment cette bande de sa colonne en annulant le retrait racine de chaque cote :
*
* .em-agenda-wrap .em-filters-bar {
* margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
* margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
* width: unset !important;
* }
*
* Le geste est juste tant qu'il y a un retrait a annuler. Quand le bloc est regle sur « Pleine largeur »,
* son conteneur est DEJA bord a bord : il n'y a plus rien a annuler, et les marges negatives ne peuvent
* plus que pousser la bande au-dela des deux bords. Mesure relevee chez le client : 390 px sur un ecran
* de 360, soit exactement deux fois les 15 px de retrait racine — et la premiere liste deroulante etait
* coupee.
*
* `!important` est necessaire ici, et c'est le seul endroit de la feuille ou il sert a contredire un
* theme. La difference avec la tentative de la 2.5.257, qui avait ete annulee : celle-la forcait la
* largeur et la position, donc elle retirait au theme des choix de PRESENTATION qui lui reviennent.
* Celle-ci ne corrige qu'un calcul dont le resultat est demontrablement hors sujet — il n'y a pas de
* retrait a annuler — et seulement sous `.alignfull`. Hors de ce cas, la regle du theme s'applique
* intacte.
*
* DEUX selecteurs : la classe atterrit sur `.em-block-frame` (le conteneur emis par le plugin), mais un
* theme peut aussi la poser sur un enveloppant a lui. En viser un seul laisserait la moitie des cas.
*/
.em-block-frame.alignfull .em-agenda-wrap .em-filters-bar,
.alignfull .em-agenda-wrap .em-filters-bar {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ===================== FILTERS BAR (full-width primary bg) ===================== */
.em-filters-bar {
background: var(--em-filters-bar-bg, var(--em-color-primary));
width: 100%;
margin-bottom: 3rem;
}
/* Filtre désactivé en back-office — masqué même après re-render JS (inline style non-important perd face au !important). */
.em-filter-hidden { display: none !important; }
/* Filters inside the bar: transparent bg, white text, no bottom margin */
.em-filters-bar .em-filters {
background: transparent;
margin-bottom: 0;
/* Retrait DESKTOP de la rangee de filtres, demande a 1.5rem en haut/bas et 0 sur les cotes : le
conteneur `.em-agenda-container` fournit deja le retrait lateral, l'ajouter ici le doublerait.
Le `!important` etait deja la — un theme repeint souvent ce genre de rangee. */
padding: 1.5rem .25rem !important;
color: #fff;
}
/* Search input */
.em-filters-bar .em-search-input {
background-color: rgba(255,255,255,.15);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
border-color: rgba(255,255,255,.3);
color: #fff;
}
.em-filters-bar .em-search-input::placeholder { color: rgba(255,255,255,.65); }
.em-filters-bar .em-search-input:focus { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 .25rem rgba(255,255,255,.2); }
/* Filter dropdown triggers */
.em-filters-bar .em-filter-select .em-fsd__trigger,
.em-filters-bar .em-filter-select .em-fsd__trigger:hover,
.em-filters-bar .em-filter-select .em-fsd__trigger:focus,
.em-filters-bar .em-filter-select .em-fsd__trigger:active,
.em-filters-bar .em-filter-select.em-fsd--open .em-fsd__trigger {
background: rgba(255,255,255,.15) !important;
border-color: rgba(255,255,255,.25) !important;
color: #fff !important;
text-shadow: none !important;
}
.em-filters-bar .em-filter-select .em-fsd__trigger:hover,
.em-filters-bar .em-filter-select.em-fsd--open .em-fsd__trigger {
background: rgba(255,255,255,.25) !important;
border-color: rgba(255,255,255,.55) !important;
}
.em-filters-bar .em-filter-select.em-fsd--open .em-fsd__trigger {
border-bottom-color: transparent !important;
}
/* Reset button */
.em-filters-bar .em-btn--reset {
border-color: rgba(255,255,255,.4);
color: rgba(255,255,255,.85);
background: transparent;
}
.em-filters-bar .em-btn--reset:hover {
background: rgba(255,255,255,.18);
border-color: rgba(255,255,255,.65);
color: #fff;
}
/* Per page label */
.em-filters-bar .em-per-page { color: rgba(255,255,255,.85); }
/* Focus ring inside bar */
.em-filters-bar .em-fsd__trigger:focus-visible,
.em-filters-bar .em-search-input:focus-visible {
/* outline: 2px solid rgba(255,255,255,.7); */
/* outline-offset: 2px; */
box-shadow: none;
}
/* ===================== FILTERS ROW ===================== */
.em-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
margin-bottom: 0;
width: 100%; box-sizing: border-box;
background: var(--em-color-surface);
}
.em-filters--stuck { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
/* Quand c'est la barre parente (.em-filters-bar) qui est collée, l'ombre est plus marquée */
.em-filters-bar.em-filters--stuck { box-shadow: 0 3px 12px rgba(0,0,0,.18); }
/* ---- Reset filters button ----
Meme jeton de hauteur que les autres controles de la barre : il apparait DES qu'un filtre est
actif, a cote des dropdowns (il etait dimensionne par son seul padding, ~28px). */
.em-btn--reset {
display: inline-flex;
align-items: center;
gap: .25rem;
box-sizing: border-box;
height: var(--em-filter-height);
background: transparent;
border: 0px solid var(--em-color-border);
border-radius: 999px;
color: var(--em-color-muted);
font-size: .875rem;
cursor: pointer;
white-space: nowrap;
line-height: 1;
transition: background .15s, border-color .15s, color .15s;
}
.em-btn--reset:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.em-per-page {
display: flex; align-items: center; gap: .375rem;
font-size: .875rem; color: var(--em-color-muted);
margin-left: auto;
}
.em-per-page__label { white-space: nowrap; }
/* Per-page custom dropdown: compact, no need to be as wide as filter dropdowns */
.em-per-page .em-filter-select { font-size: .875rem; }
/* ---- Filters responsive ---- */
@media (max-width: 640px) {
.em-filters {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: .375rem;
align-items: start;
padding: .5rem !important;
width: 100%;
}
/*
* MEME retrait, mais avec la specificite de `.em-filters-bar .em-filters` — et c'est indispensable.
*
* Entre deux declarations `!important`, c'est la SPECIFICITE qui tranche, pas l'ordre ni la media
* query. La regle de base vaut (0,2,0) et celle-ci (0,1,0) : sans ce doublon, le retrait desktop de
* `1.5rem 0rem` s'appliquerait AUSSI sur mobile, et le `.5rem` juste au-dessus n'aurait aucun effet.
*
* Le piege etait invisible jusqu'ici parce que les deux valeurs se ressemblaient (`.5rem .5rem` et
* `.5rem`). Il apparait des que la valeur desktop s'en ecarte.
*/
.em-filters-bar .em-filters { padding: .5rem !important; }
/* Mobile: cancel JS-driven auto width, take full grid cell */
.em-filter-select { --em-fsd-w: 100%; min-width: 0; width: 100%; display: block; }
/* Doublee comme la regle de base : a specificite egale c'est l'ordre qui tranche, et celle-ci vient
apres — donc elle gagne. A (0,1,0) elle aurait perdu, et le champ serait reste a 300 px. */
.em-search-input.em-search-input { grid-column: 1 / -1; max-width: 100%; min-width: 0; }
/* Trigger button shows ellipsis when label is wider than its 1/3 column */
.em-fsd__trigger { overflow: hidden; }
.em-fsd__label {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Dropdown panel: anchor to the RIGHT edge of the trigger on mobile so it never
overflows the viewport (the rightmost column / "Mois" filter would otherwise
extend off-screen with left:0). width/min-width already set in base styles. */
.em-fsd__panel {
left: auto;
right: 0;
max-width: min(90vw, 300px);
}
/*
* « Par page » MASQUÉ sous 640 px.
*
* Il occupait une rangée entière de la barre de filtres — la barre étant collante, cette hauteur est
* retirée à la lecture pendant tout le défilement. Et le choix qu'il offre (10, 15, 20) a peu de sens
* sur un écran où l'on défile de toute façon : la valeur par défaut de l'agenda est 10 et le réglage
* `mobile_pagination` permet désormais de basculer le mobile sur « Charger plus ».
*
* `display: none` et non un retrait du DOM : PHP ne connaît pas la largeur du viewport, la décision
* est donc forcément côté client. Le menu continue d'être construit par le JS — inerte, puisque
* `state.perPage` garde sa valeur — ce qui évite de toucher `buildFilterDropdown` et l'état pour un
* gain nul. Une garde exige la règle ICI et son ABSENCE au-dessus du seuil : masquer partout serait
* une régression sur ordinateur, où le choix est utile.
*/
.em-per-page { display: none; }
.em-btn--reset { grid-column: 1 / -1; }
}
/* Native select — Bootstrap 5 style (per-page) */
.em-select {
-webkit-appearance: none; appearance: none;
height: 38px;
padding: .375rem 2rem .375rem .75rem;
font-size: .875rem; color: var(--em-color-text);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .75rem center;
border: 1px solid var(--em-color-border);
border-radius: var(--em-radius);
cursor: pointer;
transition: border-color var(--em-transition), box-shadow var(--em-transition);
}
.em-select:focus {
outline: none;
border-color: var(--em-color-primary);
box-shadow: 0 0 0 .25rem rgba(26,58,107,.18);
}
/* ===================== CUSTOM FILTER DROPDOWN ===================== */
.em-filter-select {
position: relative;
/* width: auto on inline-block = shrink-to-fit naturally, cheaper than max-content keyword
(avoids intrinsic-size recalculation on every forced layout pass) */
width: auto;
display: inline-block;
vertical-align: top;
}
/* Desktop: give the 4 filter dropdowns a comfortable, uniform min-width so the panel
(locked to the trigger width) is wide enough for month labels like "Septembre 2026"
without wrapping. Scoped to direct children of .em-filters so the compact per-page
dropdown (.em-per-page .em-filter-select) is unaffected. Mobile (≤640px) keeps its
own full-width grid rule above. */
@media (min-width: 641px) {
.em-filters > .em-filter-select { min-width: 11rem; }
}
/* `margin` et `list-style` de cette liste : voir le bloc PARTAGE ci-dessous, qui traite les cinq listes
du plugin. Cette regle-ci les reposait pour la seule deroulante, en double du bloc partage — deux points
d emission pour la meme decision, donc deux occasions de diverger. Le `!important` n etait pas necessaire :
le `ul, ol { margin: 30px 0 }` de Neve pese (0,0,1), un `.entry-content ul` (0,1,1), et la classe doublee
du bloc partage (0,2,0) bat les deux. */
/* La PUCE d'un theme n'est presque jamais un `list-style` : c'est un `::before` avec du contenu genere,
pose a cote d'un `list-style: none` que le theme ecrit lui-meme. `list-style: none !important` ne peut
donc rien contre elle — il n'y a pas de marqueur a annuler, il y a du CONTENU a supprimer. Signale
depuis un site reel : des points devant chaque option du menu.
`padding` dans la meme regle (0,2,1) : le `.entry-content ul li { padding-left: .75em }` du theme pese
(0,1,2) et battait `.em-fsd__opt` a (0,1,0), donc les options etaient decalees. Pas besoin
d'`!important` ici — deux classes battent une classe, et un `!important` de plus rendrait ce padding
impossible a ajuster par un theme enfant legitime. */
/* ===================================================================================================
PUCES DE THEME : neutralisation sur les CINQ listes du plugin (2.5.341)
Signale depuis un site reel, la regle exacte du theme :
.entry-content ul li::before { content: ''; background-color: ...; border-radius: 50%;
position: absolute; left: .5rem; width: 3px; height: 3px; }
Corrige d'abord pour le SEUL menu deroulant de la barre de filtres (2.5.335), puis constate sur les
autres blocs. C'est la meme faute que les filets manquants de la 2.5.340, dans l'autre sens : un
correctif ecrit pour UN cas, la ou cinq listes partagent le probleme.
Les CINQ listes du plugin, et rien d'autre. Le balayage ne dit PAS `.em-block-frame li` : une
description d'evenement peut contenir une vraie liste a puces, et la puce y est le travail du theme.
On neutralise les listes que le plugin CONSTRUIT, pas tout ce qui se trouve dans un bloc.
CLASSE DOUBLEE et non un parent : `.em-fsd__panel.em-fsd__panel` pese (0,2,x) tout seul, alors que
`.em-filter-select .em-fsd__panel` — la forme de 2.5.335 — depend d'un ancetre. Les cinq conteneurs de
deroulante portent bien cette classe aujourd'hui, mais la prochaine instance posee ailleurs sortirait
du filet en silence.
`content: none` et non `content: ''` : il faut SUPPRIMER le pseudo-element, pas le vider. Un
`::before` vide reste une boite positionnee, avec son `background-color` et ses 3 px.
`!important` sur le seul `content` : (0,2,2) bat le (0,1,3) du theme signale, mais un theme un peu plus
imbrique — `.entry-content .wp-block-group ul li::before`, (0,2,3) — reprendrait la main. Un plugin
diffuse ne connait pas le theme qui l'accueille. Les autres proprietes s'en passent : deux classes
battent une classe, et un `!important` de plus les rendrait inajustables par un theme enfant legitime.
=================================================================================================== */
.em-fsd__panel.em-fsd__panel > li::before,
.em-fsd__panel.em-fsd__panel > li::after,
.em-cl__list.em-cl__list > li::before,
.em-cl__list.em-cl__list > li::after,
.em-ct__access-list.em-ct__access-list > li::before,
.em-ct__access-list.em-ct__access-list > li::after,
.em-kpi__rows.em-kpi__rows > li::before,
.em-kpi__rows.em-kpi__rows > li::after,
.em-asb__nav-list.em-asb__nav-list > li::before,
.em-asb__nav-list.em-asb__nav-list > li::after,
.em-fg__grid.em-fg__grid > li::before,
.em-fg__grid.em-fg__grid > li::after,
.em-eb__list.em-eb__list > li::before,
.em-eb__list.em-eb__list > li::after,
.em-sg__list.em-sg__list > li::before,
.em-sg__list.em-sg__list > li::after,
.em-cb__list.em-cb__list > li::before,
.em-cb__list.em-cb__list > li::after,
.em-rw__list.em-rw__list > li::before,
.em-rw__list.em-rw__list > li::after,
.em-rb__list.em-rb__list > li::before,
.em-rb__list.em-rb__list > li::after,
.em-dp__list.em-dp__list > li::before,
.em-dp__list.em-dp__list > li::after,
.em-dc__list.em-dc__list > li::before,
.em-dc__list.em-dc__list > li::after,
.em-tc__list.em-tc__list > li::before,
.em-tc__list.em-tc__list > li::after {
content: none !important;
}
/* Marqueur, retrait et marges : ce qu'un theme pose sur `ul` et `li` et qu'aucune de ces cinq listes ne
veut. `text-indent` est du lot parce qu'il ne se voit pas en relisant le CSS d'un theme : pose sur le
`ul`, il decale la PREMIERE ligne de chaque element. */
.em-fsd__panel.em-fsd__panel,
.em-fsd__panel.em-fsd__panel > li,
.em-cl__list.em-cl__list,
.em-cl__list.em-cl__list > li,
.em-ct__access-list.em-ct__access-list,
.em-ct__access-list.em-ct__access-list > li,
.em-kpi__rows.em-kpi__rows,
.em-kpi__rows.em-kpi__rows > li,
.em-asb__nav-list.em-asb__nav-list,
.em-asb__nav-list.em-asb__nav-list > li {
list-style: none;
text-indent: 0;
margin: 0;
}
/* PADDING GAUCHE : trois listes sur cinq n'en veulent aucun, et le `.entry-content ul li` du theme pese
(0,1,2) contre le (0,1,0) de `.em-cl__item` — donc il gagnait, et les lignes etaient decalees.
Les deux autres en veulent un : `.em-fsd__opt` (repose plus haut) et `.em-asb__nav-item`, dont les deux
regles — bureau et mobile — sont doublees sur place. Un `padding-left: 0` global ici les aurait ecrasees,
et c'est la raison de ne pas traiter les cinq d'un bloc. */
.em-cl__list.em-cl__list > li,
.em-ct__access-list.em-ct__access-list > li,
.em-kpi__rows.em-kpi__rows > li,
.em-eb__list.em-eb__list > li,
.em-sg__list.em-sg__list > li,
.em-cb__list.em-cb__list > li,
.em-rw__list.em-rw__list > li,
.em-rb__list.em-rb__list > li,
.em-dp__list.em-dp__list > li,
.em-dc__list.em-dc__list > li,
.em-tc__list.em-tc__list > li,
/* `.em-fg__grid` MANQUAIT depuis la 2.5.391 : le `.entry-content ul li` du theme pese (0,1,2) contre le
(0,1,0) de `.em-fg__item`, donc il gagnait et decalait chaque carte vers la droite. Signale a l'ecran,
invisible dans le CSS du plugin — la regle fautive n'y est pas. */
.em-fg__grid.em-fg__grid > li {
padding-left: 0;
}
.em-filter-select .em-fsd__panel li {
padding: .25rem .25rem;
}
.em-filter-select .em-fsd__trigger,
.em-filter-select .em-fsd__trigger:hover,
.em-filter-select .em-fsd__trigger:focus,
.em-filter-select .em-fsd__trigger:active,
.em-filter-select.em-fsd--open .em-fsd__trigger {
color: var(--em-color-text) !important;
text-shadow: none !important;
}
.em-filter-select .em-fsd__trigger:hover,
.em-filter-select.em-fsd--open .em-fsd__trigger {
background: #f4f6fb !important;
}
.em-fsd__trigger {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem; width: 100%;
box-sizing: border-box;
height: var(--em-filter-height);
padding: 0 .5rem;
background: #fff; border: 1px solid var(--em-color-border);
border-radius: var(--em-radius);
font-size: .875rem; color: var(--em-color-text);
cursor: pointer; user-select: none; text-align: left;
transition: border-color var(--em-transition), background var(--em-transition);
}
.em-fsd__trigger:hover {
border-color: var(--em-color-primary);
background: #f4f6fb;
}
.em-fsd--open .em-fsd__trigger {
border-color: var(--em-color-primary);
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: #f4f6fb;
box-shadow: none;
}
.em-fsd__label {
flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: flex; align-items: center; gap: .375rem;
}
.em-fsd__chevron { flex-shrink: 0; transition: transform .18s; }
.em-fsd--open .em-fsd__chevron { transform: rotate(180deg); }
/* Count badge shown inside trigger label in multi mode */
.em-fsd__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
background: var(--em-color-primary); color: #fff;
border-radius: 9px; font-size: .75rem; font-weight: 700;
line-height: 1; flex-shrink: 0;
}
.em-fsd__panel {
position: absolute; top: 100%; left: 0;
/* ⚠ `box-sizing` EXPLICITE, et ce n'est pas une precaution : la regle globale
`*, *::before, *::after { box-sizing: inherit }` est ancree sur `.em-agenda`, un selecteur ABSENT
du balisage (le commentaire de la barre de filtres le dit deja, 2.5.335). Le panneau restait donc
en `content-box` : `width: 100%` PLUS `border: 1px` le rendait 2 px plus large que son
declencheur, et il depassait visiblement a droite sur tous les blocs a deroulante. */
box-sizing: border-box;
/* Panel width is locked to the trigger width (never wider than the input) — options
that don't fit wrap to the next line instead of pushing the panel past the trigger. */
width: 100%;
min-width: 100%;
max-width: 100%;
overflow-x: hidden;
list-style: none; margin: 0; padding: .25rem 0;
background: #fff;
border: 1px solid var(--em-color-primary);
border-top: none;
border-radius: 0 0 var(--em-radius) var(--em-radius);
box-shadow: 0 6px 18px rgba(26,58,107,.13);
z-index: 1050; max-height: 260px; overflow-y: auto;
display: none;
animation: emFsdIn .12s ease;
}
@keyframes emFsdIn {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
.em-fsd--open .em-fsd__panel { display: block; }
.em-fsd__opt {
display: flex; align-items: center; gap: .5rem;
padding: .25rem .5rem; font-size: .875rem; color: var(--em-color-text);
cursor: pointer; user-select: none;
/* Wrap long option labels instead of clipping them — the panel is locked to the
trigger width, so an option wider than the trigger flows onto a second line. */
white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
transition: background .1s;
}
.em-fsd__opt:hover { background: rgba(var(--em-color-primary-rgb), .07); }
.em-fsd__opt--on { background: rgba(var(--em-color-primary-rgb), .05); color: var(--em-color-text); font-weight: 500; }
.em-fsd__opt--on:hover { background: rgba(var(--em-color-primary-rgb), .1); }
/* Checkbox tick box for multi-select mode */
.em-fsd__chk {
width: 16px; height: 16px; flex-shrink: 0;
border: 2px solid var(--em-color-primary); border-radius: 3px;
background: var(--em-color-surface); display: flex; align-items: center; justify-content: center;
transition: background .12s, border-color .12s;
}
.em-fsd__opt--on .em-fsd__chk {
background: var(--em-color-primary); border-color: var(--em-color-primary); color: #fff;
}
/* ===================== RESULTS COUNTER ===================== */
.em-results-count {
font-size: .875rem; font-weight: 600;
color: var(--em-color-muted);
margin-bottom: 1rem;
}
/* ===================== PAGINATION ===================== */
.em-pagination {
display: flex; align-items: center; justify-content: center;
gap: .25rem; padding: 1.75rem 0 .5rem; flex-wrap: wrap;
}
.em-page-btn {
width: 38px; height: 38px;
border-radius: var(--em-radius);
border: 1px solid var(--em-color-border);
background: var(--em-color-surface);
color: var(--em-color-text);
font-size: 1.25rem; line-height: 1;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all var(--em-transition);
}
.em-page-btn:disabled { opacity: .35; cursor: default; }
.em-page-btn:hover:not(:disabled) { border-color: var(--em-color-primary); color: var(--em-color-primary); }
.em-page-numbers { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.em-page-num {
min-width: 38px; height: 38px; padding: 0 .5rem;
border-radius: var(--em-radius);
border: 1px solid var(--em-color-border);
background: var(--em-color-surface);
color: var(--em-color-text);
font-size: .875rem; cursor: pointer;
transition: all var(--em-transition);
}
.em-page-num:hover { border-color: var(--em-color-primary); color: var(--em-color-primary); }
.em-page-num.active { background: var(--em-color-primary); border-color: var(--em-color-primary); color: white; font-weight: 600; }
.em-page-ellipsis { padding: 0 .25rem; color: var(--em-color-muted); font-size: .875rem; }
/* ===================== ACCESSIBILITY — focus-visible ===================== */
.em-event-card:focus-visible,
.em-agenda-item:focus-visible,
.em-filter:focus-visible,
.em-btn-reset:focus-visible,
.em-page-btn:focus-visible,
.em-page-num:focus-visible,
.em-fsd__trigger:focus-visible,
.em-fsd__opt:focus-visible,
.em-btn--share:focus-visible {
outline: 2px solid var(--em-color-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(var(--em-color-primary-rgb), .15);
}
.em-fsd__opt:focus-visible { outline-offset: -2px; }
.em-agenda[tabindex]:focus { outline: none; }
/* ===================== SHARE BUTTON ===================== */
.em-btn--share {
padding: .375rem .375rem;
background: transparent;
border: 1px solid var(--em-color-border);
border-radius: var(--em-radius);
color: var(--em-color-muted);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--em-transition);
}
.em-btn--share:hover { border-color: var(--em-color-accent); color: var(--em-color-accent); }
/* ===================== HIGHLIGHTED CARD ===================== */
.em-event-card--highlighted {
outline: 2px solid var(--em-color-primary);
outline-offset: 3px;
animation: em-highlight-pulse 2s ease-out;
}
@keyframes em-highlight-pulse {
0%, 100% { outline-color: var(--em-color-primary); }
50% { outline-color: var(--em-color-secondary); }
}
/* ===================== BADGES ===================== */
.em-event-card__badges,
.em-agenda-item__badges {
display: flex;
flex-wrap: wrap;
gap: .375rem;
margin-bottom: .5rem;
}
.em-badge {
display: inline-block;
padding: .25rem .5rem;
border-radius: 999px;
font-size: .625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .025em;
line-height: 1.3;
}
.em-badge--online {
background: var(--em-color-success-bg);
color: var(--em-color-success);
}
.em-badge--featured {
background: var(--em-color-warning-bg);
color: var(--em-color-warning);
}
.em-badge--new {
background: var(--em-color-new);
color: var(--em-color-new-text);
font-weight: 700;
letter-spacing: .04em;
}
/* ===================== ETAT « TERMINE » =====================
Fenetre entre l'heure de fin et minuit : l'evenement reste visible mais signale comme termine.
Passe cette fenetre, c'est le serveur qui le retire (EM_Rest::filter_past) — d'ou l'absence de
regle « masquer » ici.
L'effet est choisi en back-office (`ended_state_effect`). « Aucun » ne produit AUCUN modificateur :
seul le badge distingue alors la carte. */
.em-badge--ended {
background: var(--em-color-muted);
color: var(--em-color-surface);
}
/* `opacity` cree un contexte de composition : les descendants NE PEUVENT PAS remonter au-dessus de
l'opacite du parent — inutile d'esperer rendre le badge opaque depuis l'interieur. Le texte de la
carte subit donc l'estompage, et c'est ce qui FIXE la valeur plancher.
MESURE : sur #212529 / blanc, `.55` donne 3,60:1 — sous le minimum WCAG AA de 4,5:1 pour du texte
courant. `.65` donne 4,88:1. La valeur n'est pas une preference esthetique, c'est un seuil. */
.em-is-ended--dim { opacity: .65; }
.em-is-ended--grayscale { filter: grayscale(1); }
.em-is-ended--both { opacity: .65; filter: grayscale(1); }
/* ===================== TIME ===================== */
.em-event-time {
font-size: .75rem;
color: var(--em-color-muted);
/*
* `margin: 0` — la seule ligne de donnée des cartes qui ne le déclarait pas (2.5.375).
*
* Elle est rendue dans un `
`, donc elle portait la marge de la FEUILLE DU NAVIGATEUR (~1 em). Le
* corps de carte est en `display: flex; flex-direction: column; gap: .375rem` — et en flex les marges
* ne se replient PAS : elles s'AJOUTENT au `gap`. L'écart sous l'horaire valait donc ~22 px là où
* toutes les autres lignes en font 6.
*
* Le défaut existait avant l'échange horaire/adresse de la 2.5.372 — la marge tombait alors entre
* l'horaire et le bouton, où `margin-top: .5rem` des actions la rendait moins lisible. L'échange l'a
* placée ENTRE DEUX LIGNES DE DONNÉES, où elle se voit. Mesuré : 6 classes sur 49 portées par un `
`
* ne réinitialisaient aucune marge ; les cinq autres sont des messages autonomes, où la marge du
* navigateur est légitime.
*
* `.em-event-time` sert AUSSI sur un `` (ligne de date des cartes de grille) : un `` n'a
* aucune marge par défaut, donc cette déclaration n'y change rien.
*/
margin: 0;
}
/* Icon + text inline helper */
.em-ic-wrap {
display: inline-flex;
align-items: center;
gap: .25rem;
}
.em-ic-wrap svg, .em-icon { flex-shrink: 0; opacity: 1; vertical-align: middle; }
.em-ic-wrap svg { color: var(--em-color-secondary); }
/* ===================== FEATURED ZONE ===================== */
.em-featured-zone {
margin-bottom: 2.5rem;
/* Fond de la BANDE, distinct de celui des cartes. Les deux partageaient `--em-color-surface` :
regler « Fond des cartes » repeignait donc tout le carrousel en meme temps que ses cartes, sans
moyen de viser l'un sans l'autre. Le repli sur `--em-color-surface` garde le rendu identique
tant qu'aucun reglage dedie n'est saisi. */
background: var(--em-featured-zone-bg, var(--em-color-surface));
border-radius: var(--em-radius, .75rem);
}
/* CLS prevention: reserve space from initial paint so content doesn't shift on reveal */
.em-featured-zone--carousel {
opacity: 0;
min-height: 500px;
overflow: hidden;
transition: opacity 0.2s ease;
}
.em-featured-zone--carousel.em-featured-zone--ready {
opacity: 1;
overflow: visible;
min-height: 0;
}
.em-featured-zone__title {
margin: 0 0 1.25rem;
font-size: 1.375rem;
font-weight: 700;
color: var(--em-color-primary);
letter-spacing: .04em;
}
.em-featured-zone__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
/* ----- Carousel variant ----- */
.em-featured-zone--carousel .em-featured-zone__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.em-featured-zone--carousel .em-featured-zone__title { margin: 0; }
.em-featured-zone--carousel .em-featured-zone__nav {
display: flex;
gap: .5rem;
}
.em-featured-zone--carousel .em-featured-zone__btn {
/* Les TROIS declarations sont necessaires pour un cercle, et c'est la troisieme fois que ce piege
se presente (`.em-car__arrow` et `.em-dt__arrow` en 2.5.240, ces deux-ci oubliees) :
· `box-sizing: border-box` — la regle globale `*, *::before, *::after { box-sizing: inherit }`
est ancree sur `.em-agenda`, un selecteur ABSENT du markup. Tout est donc en `content-box`,
et la bordure de 1 px s'AJOUTE aux 36 px demandes ;
· `padding: 0` — un `