/* ──────────────────────────────────────────────────────────────────────────
 * CE QUE LES EXTENSIONS TIERCES RENDENT, REMIS AUX MESURES DE LA MAISON.
 *
 * Cette feuille ne dessine rien : elle corrige ce que MEC et les blocs de
 * WooCommerce posent en dessous des seuils, et seulement ça. Chaque règle
 * porte le défaut qu'elle ferme, tel que `tools/standards/contraste.mjs` l'a
 * mesuré le 24.10.2026 sur le banc, à 1440 et 390 px.
 *
 * Elle est SÉPARÉE de `css/site.css` à dessein : site.css est la copie
 * conforme du prototype, et `test_le_dessin_ne_diverge_pas` refuse la moindre
 * différence entre les deux. Une correction de tiers écrite là-bas casserait
 * la porte, ou disparaîtrait à la prochaine compilation.
 * ────────────────────────────────────────────────────────────────────────── */

/* MEC écrit la date et l'heure de la soirée en gris clair sur blanc :
   3,32:1 mesuré, 4,5:1 exigé. La couleur de texte de la charte les rend
   lisibles sans toucher à la graisse ni à la taille. */
.mec-single-event .mec-start-date-label,
.mec-single-event .mec-events-abbr,
.mec-single-event .mec-single-event-date,
.mec-single-event .mec-single-event-time {
	color: var(--wp--preset--color--encre);
}

/* Le bouton « Ajouter à mon Agenda Google » : 4,10:1 mesuré. Le primaire de
   la charte sur blanc en donne 6,4:1. */
.mec-single-event a.mec-events-gcal,
.mec-single-event a.mec-events-button.mec-color {
	color: var(--wp--preset--color--primaire);
}

/* Les cinq liens de partage font 40 px de haut, et le seuil tactile est 44.
   `inline-flex` plutôt qu'une hauteur sur de l'`inline-block` : mesuré le
   24.10.2026, un `min-height` sur un `inline-block` ne centre pas son texte. */
.mec-single-event .mec-event-social a.facebook,
.mec-single-event .mec-event-social a.linkedin,
.mec-single-event .mec-event-social a.whatsapp,
.mec-single-event .mec-event-social a.telegram,
.mec-single-event .mec-event-social a.email {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Les deux boutons que WooCommerce pose dans l'en-tête — le compte client et
   le mini-panier — font 40 px. Même seuil, même correction. */
a.wc-block-customer-account__link,
button.wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* LA PEAU « liste » DE MEC, celle de la page d'agenda.
 *
 * Son bouton « Voir le détail » mesurait 1,61:1 — MEC lui peint le primaire de
 * la charte en fond par sa feuille dynamique, et laisse par-dessus une couleur
 * de texte sombre. Le blanc cassé sur ce même fond donne 7,4:1. Il faisait
 * aussi 38 px de haut, et son icône de partage 36. */
.mec-wrap a.mec-booking-button,
.mec-wrap a.mec-booking-button:hover,
.mec-wrap a.mec-booking-button:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 18px;
	background-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--blanc-casse);
}

.mec-wrap a.mec-event-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* LE FORMULAIRE DE RÉSERVATION DE MEC, qui ne paraît que sur une soirée à
 * venir — c'est pourquoi ses défauts n'étaient pas visibles avant que la
 * rencontre du 12 novembre existe. Dix formes mesurées le 24.10.2026.
 *
 * Le compte à rebours écrit ses quatre nombres en très clair sur blanc :
 * 1,66:1 là où un grand texte exige 3:1. */
.mec-wrap .mec-days,
.mec-wrap .mec-hours,
.mec-wrap .mec-minutes,
.mec-wrap .mec-seconds {
	color: var(--wp--preset--color--encre);
}

/* « Total: » et le nombre de places tenaient 3,17:1. Le « Total: » vit dans un
 * `span` dont l'IDENTIFIANT porte le numéro de l'événement —
 * `mec_booking_quantity_wrapper_236` — donc il se vise par son préfixe, jamais
 * par son id entier, qui change à chaque soirée. */
/* MEC le pose à #8e9195 depuis
 * `.mec-single-event .mec-events-meta-group-booking [id*=mec_booking_quantity_wrapper_]`
 * — deux classes et un attribut. Il faut au moins autant, d'où l'élément en
 * plus : une règle plus courte perdait, sans erreur et sans trace. */
.mec-single-event .mec-events-meta-group-booking span[id*="mec_booking_quantity_wrapper_"],
.mec-wrap .mec-events-meta-group-booking span[id*="mec_booking_quantity_wrapper_"],
.mec-wrap .mec-booking-quantity-holder,
.mec-wrap .mec-book-price-total {
	color: var(--wp--preset--color--encre);
}

/* Les deux boutons de quantité font 14 px de côté — un carré de la taille
 * d'une lettre, à viser au doigt. */
.mec-wrap a.plus,
.mec-wrap a.minus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* « Ajouter au Panier » : 2,10:1, et 38 px de haut. C'est le bouton qui
 * encaisse — il est le dernier à pouvoir être illisible. */
/* SA SPÉCIFICITÉ EST LE PIÈGE. MEC peint ce bouton depuis
 * `.mec-single-event .mec-events-meta-group-booking .mec-click-pay
 * button.mec-book-form-next-button` — quatre classes et un élément. Une règle
 * plus courte ne mord pas, et `!important` est refusé par le standard de la
 * maison. On passe donc par le conteneur du bouton, ce qui donne un niveau de
 * plus sans forcer. */
.mec-single-event .mec-events-meta-group-booking .mec-booking .mec-book-form-btn-wrap button.mec-book-form-next-button,
.mec-single-event .mec-events-meta-group-booking .mec-booking .mec-book-form-btn-wrap button.mec-book-form-next-button:hover,
.mec-single-event .mec-events-meta-group-booking .mec-booking .mec-book-form-btn-wrap button.mec-book-form-next-button:focus,
.mec-wrap .mec-book-form-btn-wrap button.mec-book-form-next-button {
	/* ON RETIRE LE FLOTTEMENT, et ce n'est pas un détail de goût.
	 *
	 * MEC fait flotter ce bouton à droite — `float:right`, sans `!important`.
	 * Or un flottant est « blockifié » : mesuré à la sonde le 24.10.2026,
	 * Chromium rend `getComputedStyle().display === "block"` sur ce bouton
	 * alors que la feuille dit `flex`. Le `min-height` de 44 px s'applique, le
	 * centrage vertical non, et le texte se cale en haut de sa boîte. Le
	 * symptôme ne dit rien de sa cause : la règle a l'air ignorée alors
	 * qu'elle mord, et c'est le flottement qui la défait.
	 *
	 * Le conteneur aligne donc à droite lui-même, et le bouton reste un
	 * véritable `flex`. */
	float: none;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 22px;
	background-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--blanc-casse);
}

/* Le conteneur du bouton reprend l'alignement que le flottement assurait. */
.mec-single-event .mec-events-meta-group-booking .mec-booking .mec-book-form-btn-wrap,
.mec-wrap .mec-book-form-btn-wrap {
	display: flex;
	justify-content: flex-end;
}

/* POURQUOI LE CONTENEUR DEVIENT UNE BOÎTE FLEX, et pas seulement pour aligner.
 *
 * MEC fait flotter ce bouton depuis
 * `.mec-events-meta-group-booking #mec-book-form-btn-step-1` — un `#id`, que
 * AUCUN nombre de classes ne bat. Mesuré à la sonde le 24.10.2026 : la règle
 * ci-dessus posait bien `align-items` et `min-height`, et perdait sur `float`.
 * Et un flottant est « blockifié » : `display:flex` redevenait `block`, le
 * texte se calait en haut, et le symptôme ne disait rien de sa cause.
 *
 * On ne lutte donc pas contre l'id — ni avec un id de notre côté, ni avec
 * `!important`, que le standard de la maison refuse tous les deux. On rend le
 * PARENT flex : `float` est IGNORÉ sur un élément flex, et la blockification
 * avec lui. La règle de MEC reste en place, elle n'a simplement plus d'effet. */
.mec-single-event .mec-events-meta-group-booking .mec-booking .mec-book-form-btn-wrap,
.mec-wrap .mec-book-form-btn-wrap {
	display: flex;
	justify-content: flex-end;
}

/* ──────────────────────────────────────────────────────────────────────────
 * LES PAGES QUE WOOCOMMERCE ET PMPRO FABRIQUENT EUX-MÊMES.
 *
 * Bug signalé par Yan le 24.10.2026, capture à l'appui : « le truc de menu
 * s'affiche très mal » — sur `/mon-compte/`, le titre et le menu latéral
 * partaient coller le bord gauche de l'écran, hors de toute marge.
 *
 * LA CAUSE. `templates/page.html` rend `post-content` NU, sans enveloppe :
 * nos pages tiennent leur marge d'elles-mêmes, parce que leur contenu est fait
 * de `<section class="sect"><div class="wrap">`. Le contenu d'une page de
 * WooCommerce, lui, est un bloc seul — il n'a ni section ni enveloppe, donc
 * aucune marge, et il s'étale d'un bord à l'autre.
 *
 * On ne touche pas au gabarit, qui est juste pour nos pages : on rend sa marge
 * à `main` SEULEMENT sur les pages que ces extensions fabriquent, reconnues
 * par la classe que WordPress pose sur `<body>`.
 * ────────────────────────────────────────────────────────────────────────── */
body.woocommerce-page main.wp-block-group,
body.woocommerce-account main.wp-block-group,
body.woocommerce-cart main.wp-block-group,
body.woocommerce-checkout main.wp-block-group,
body[class*="pmpro-body"] main.wp-block-group {
	max-width: 1360px;
	margin: 0 auto;
	padding: 72px 40px;
	box-sizing: border-box;
}

@media (max-width: 760px) {
	body.woocommerce-page main.wp-block-group,
	body.woocommerce-account main.wp-block-group,
	body.woocommerce-cart main.wp-block-group,
	body.woocommerce-checkout main.wp-block-group,
	body[class*="pmpro-body"] main.wp-block-group {
		padding: 48px 16px;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * L'ESPACE MEMBRE, DANS LE SYSTÈME DU SITE.
 *
 * Demande de Yan, 24.10.2026 : « l'espace aussi, ça serait peut-être de
 * refaire des briques, enfin, peut-être des tuiles aussi ici […] remettre les
 * bonnes couleurs […] pour tous les écrans. »
 *
 * CE QUI N'ALLAIT PAS. L'espace membre était la seule partie du site à ne rien
 * emprunter à la charte : une liste de liens rouges soulignés à gauche, et les
 * avis de WooCommerce en BLEU — une couleur que la marque n'a nulle part. Un
 * membre connecté y entrait et quittait visuellement le site.
 *
 * CE QU'ON FAIT. Le menu du compte devient une GRILLE DE TUILES, le composant
 * qui sert déjà sur l'accueil, le concept et la page Rejoindre. Et les avis
 * reprennent l'encre et le primaire. On ne dessine rien de neuf : on applique.
 * ────────────────────────────────────────────────────────────────────────── */

/* LE MENU DU COMPTE EN APPAREILLAGE, ET PLUS EN DAMIER.
 *
 * Demande de Yan, 24.10.2026 : « les tuiles ici, ça ne va pas du tout. Il faut
 * vraiment trouver un autre moyen. »
 *
 * CE QUI N'ALLAIT PAS. Deux colonnes de six cases grises, avec des intitulés
 * de longueurs très inégales — « Adresse » et « Détails du compte » dans deux
 * boîtes de même taille : la moitié du damier était vide, et la case active
 * flottait au milieu. Un damier impose une régularité que le contenu n'a pas.
 *
 * CE QUI LE REMPLACE. La même règle que les pôles : chaque entrée garde la
 * largeur de son texte, et la rangée se répartit le reste. Les intitulés longs
 * prennent plus de place que les courts — ce qui est vrai — et les rangées
 * vont d'un bord à l'autre. C'est le composant qui sert déjà ailleurs sur le
 * site, et l'espace membre cesse d'être une pièce à part.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	border: 0;
}

/* UNE ENTRÉE PAR LIGNE. Demande de Yan, 24.10.2026 : « "Téléchargement" et
   "Adresse", ça doit être sur deux lignes séparées, et il y a moins de marges. »

   L'appareillage vaut pour les PÔLES, qui sont treize et qu'on balaie du
   regard. Un menu de compte est une LISTE de six destinations qu'on lit l'une
   après l'autre : deux par rangée obligeait à chercher la suivante tantôt à
   droite, tantôt en dessous. */
.woocommerce-account .woocommerce-MyAccount-navigation li {
	display: flex;
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 46px;
	padding: 10px 18px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--primaire);
	font-family: var(--wp--preset--font-family--titre, inherit);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--blanc-casse);
}

/* La page où l'on est : un aplat plein, comme la page courante du menu haut. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--encre);
	border-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--blanc-casse);
}

/* « Se déconnecter » ferme, il ne mène pas : il se tient à part, en gris. */
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a {
	border-color: var(--wp--preset--color--gris-filet);
	color: var(--wp--preset--color--gris-texte);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-account .woocommerce-MyAccount-navigation li a { transition: none; }
}

/* LES AVIS DE WOOCOMMERCE, EN COULEURS DE LA MAISON.
   Ils arrivent en bleu — `#eff6ff` sur `#1e40af` — sur tous les écrans du
   compte, du panier et de la commande. Aucune de ces deux couleurs n'existe
   dans la charte. */
.woocommerce-account .wc-block-components-notice-banner,
.woocommerce-page .wc-block-components-notice-banner,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message {
	background: var(--wp--preset--color--gris-fond);
	border: 0;
	border-left: 3px solid var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--encre);
}

.woocommerce-account .wc-block-components-notice-banner svg,
.woocommerce-page .wc-block-components-notice-banner svg {
	fill: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--primaire);
}

.woocommerce-account .woocommerce-error,
.woocommerce-page .woocommerce-error {
	background: var(--wp--preset--color--gris-fond);
	border: 0;
	border-left: 3px solid var(--wp--preset--color--encre);
	color: var(--wp--preset--color--encre);
}

/* LE TITRE D'UNE RENCONTRE S'ÉCRIT EN FRANÇAIS.
 *
 * La peau « grid / clean » de MEC pose `text-transform:capitalize` : « Un
 * Savoir-Faire C'est Bien, Savoir Le Vendre C'est Mieux ». C'est une
 * convention anglaise ; en français, seule la première lettre prend la
 * majuscule. La règle n'est pas un détail de goût — elle change le sens de
 * lecture d'un titre entier. */
.mec-wrap .mec-event-title,
.mec-wrap .mec-event-title a,
.mec-wrap h4.mec-event-title,
.mec-wrap .mec-event-grid-clean .mec-event-title {
	text-transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * LES DEUX NOUVELLES PEAUX — « grid / clean » et « list / minimal ».
 *
 * Changer de peau change le dessin ET les défauts : vingt-trois formes
 * mesurées le 24.10.2026 juste après la bascule, aucune n'existait sur la
 * peau précédente. C'est pour ça que la mesure se rejoue à chaque choix de
 * peau, et pas une fois pour toutes.
 *
 * Deux gris reviennent partout : #8e9195 sur blanc (2,81:1) pour le jour, le
 * lieu et l'adresse, et le secondaire de la charte en texte (4,10:1) pour la
 * date. Le premier n'a aucune raison d'être si clair ; le second est une
 * couleur d'APLAT employée comme couleur de texte, ce qu'elle ne sait pas
 * faire.
 * ────────────────────────────────────────────────────────────────────────── */
.mec-wrap .mec-day-wrapper,
.mec-wrap .mec-comma-wrapper,
.mec-wrap .mec-event-loc-place,
.mec-wrap p.mec-grid-event-location,
.mec-wrap .mec-event-address {
	color: var(--wp--preset--color--gris-texte);
}

.mec-wrap .mec-start-date-label,
.mec-wrap div.mec-event-loc-place,
.mec-wrap .mec-event-detail {
	color: var(--wp--preset--color--encre);
}

/* La pastille de date : le secondaire en APLAT, et du blanc cassé dessus —
   8,9:1 — au lieu du secondaire en texte sur blanc. */
.mec-wrap .mec-event-date.mec-bg-color,
.mec-wrap .mec-event-date.mec-bg-color span {
	background-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--blanc-casse);
}

/* « Détail de l'événement » : 42 px, et le seuil tactile est 44. */
/* Au téléphone, MEC lui pose `display:block` depuis une règle plus précise :
   le `min-height` s'applique, le centrage non, et le texte se cale en haut.
   Même piège que le bouton d'achat, même réponse — le conteneur devient flex
   et le bouton reste un élément flex. */
/* `.mec-event-list-minimal a.mec-detail-button{display:inline-block}` chez MEC
   vaut exactement `.mec-wrap a.mec-detail-button` chez nous — deux classes et
   un élément — et sa feuille passe après. À égalité, c'est l'ordre qui tranche
   et nous perdions. On reprend SA classe de peau, ce qui donne un cran de
   plus. Mesuré à la sonde : sans ça, `display` restait `block`. */
.mec-wrap .mec-event-list-minimal a.mec-detail-button,
.mec-wrap .mec-event-grid-clean a.mec-detail-button,
.mec-wrap a.mec-detail-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}
.mec-wrap .mec-event-sharing-wrap,
.mec-wrap .mec-booking-button-wrap,
.mec-wrap .mec-event-footer,
.mec-wrap .mec-event-detail-button-wrap {
	display: flex;
	align-items: center;
}
@media (max-width:760px){
	.mec-wrap a.mec-detail-button{
		display:flex;width:fit-content;align-items:center;justify-content:center;min-height:44px}
}

/* LE PARTAGE DISPARAÎT DE L'AGENDA, et PAS de la page d'une rencontre.
 *
 * Demande de Yan, 24.10.2026 : « j'ai pas besoin du truc "partager" sur cette
 * page-là. "S'inscrire", ça suffit à ce stade. » MEC n'a qu'un interrupteur
 * GLOBAL — `social_network_status` — et l'éteindre retirerait aussi le partage
 * de la page de l'événement, que Yan demande par ailleurs dans sa colonne
 * latérale. La distinction se fait donc à l'affichage, par la peau.
 *
 * `display:none` et non la seule invisibilité : ici le bloc doit sortir de la
 * page pour de bon, y compris de l'ordre de tabulation — un lien de partage
 * qu'on atteint au clavier sans le voir est pire qu'absent. */
.mec-wrap .mec-event-grid-clean .mec-event-sharing-wrap,
.mec-wrap .mec-event-grid-clean .mec-event-social-icon,
.mec-wrap .mec-event-list-minimal .mec-event-sharing-wrap {
	display: none;
}

/* LA COLONNE LATÉRALE DE LA PAGE D'UNE RENCONTRE — peau « modern ».
 * Trois gris sous le seuil, mesurés le 24.10.2026 après la bascule : le nom du
 * lieu et la catégorie à 3,32:1, l'adresse à 2,35:1. */
/* `a.mec-color-hover` reçoit la couleur d'accent de MEC depuis une règle à
   trois classes ; il faut au moins autant, d'où la classe de bloc en plus. */
.mec-single-event .mec-events-meta-group .mec-meta-label,
.mec-single-event .mec-events-meta-group a.mec-color-hover,
.mec-single-event .mec-single-event-category a.mec-color-hover,
.mec-single-event .mec-meta-label,
.mec-single-event a.mec-color-hover,
.mec-single-event .mec-single-event-location .mec-meta-label {
	color: var(--wp--preset--color--encre);
}
.mec-single-event .mec-address,
.mec-single-event .mec-single-event-location address {
	color: var(--wp--preset--color--gris-texte);
}

/* LES ICÔNES DE PARTAGE, EN MONOCHROME.
 *
 * Demande de Yan, 24.10.2026 : « je ne sais pas si on arrive à remplacer ces
 * icônes. Le partage des événements, des trucs monochromes, ça serait
 * peut-être plus joli. »
 *
 * MEC peint chaque réseau de SA couleur de marque — bleu Facebook, bleu
 * LinkedIn, vert WhatsApp, bleu Telegram, rouge courriel. Cinq marques
 * étrangères alignées dans une page qui en porte une seule : c'est le seul
 * endroit du site où la charte ne décide pas.
 *
 * On ne remplace pas les icônes — elles sont justes, et chacune dit son
 * réseau. On leur retire seulement la couleur : l'encre de la maison au repos,
 * le primaire au survol. L'icône reste reconnaissable à sa FORME, qui est ce
 * qui l'identifie. */
.mec-event-social .mec-event-sharing > li > a,
.mec-events-meta-group-sharing .mec-event-sharing > li > a,
.mec-wrap .mec-event-sharing > li > a {
	background-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--blanc-casse);
	border-color: var(--wp--preset--color--encre);
	transition: background-color .18s ease;
}

.mec-event-social .mec-event-sharing > li > a:hover,
.mec-event-social .mec-event-sharing > li > a:focus-visible,
.mec-events-meta-group-sharing .mec-event-sharing > li > a:hover,
.mec-wrap .mec-event-sharing > li > a:hover {
	background-color: var(--wp--preset--color--primaire);
	border-color: var(--wp--preset--color--primaire);
}

/* TOUT MOUVEMENT A SON ÉCHAPPATOIRE. Le standard de la maison le vérifie, et
   il a repéré la transition posée sur les icônes de partage : une transition
   est un mouvement, même courte, même sur une couleur. */
@media (prefers-reduced-motion: reduce) {
	.mec-event-social .mec-event-sharing > li > a,
	.mec-events-meta-group-sharing .mec-event-sharing > li > a,
	.mec-wrap .mec-event-sharing > li > a,
	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		transition: none;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * LA RANGÉE D'UNE RENCONTRE À VENIR — peau « list / classic ».
 *
 * Demande de Yan, 24.10.2026 : « c'est très bien, mais là il est trop petit.
 * Il faut vraiment que l'image soit quand même plus grande. Repasser du 16/9,
 * sinon on ne le voit pas du tout. »
 *
 * MEC sert une vignette de 86 px de large dans cette peau — une pastille.
 * L'affiche d'une soirée porte son titre, son intervenant et ses horaires :
 * à 86 px, elle ne dit plus rien, et c'est précisément l'information qu'on
 * vient chercher.
 *
 * La rangée devient donc une grille : l'affiche au tiers de la largeur, en
 * 16/9 entier — `contain` et non `cover`, parce qu'une affiche rognée perd son
 * titre — et le texte à côté, centré sur sa hauteur.
 * ────────────────────────────────────────────────────────────────────────── */
/* LA STRUCTURE EST PLATE, ET C'EST TOUT LE SUJET.
 * MEC ne groupe rien : l'affiche, la date, l'heure, le titre, le détail et le
 * lieu sont SIX FRÈRES dans le même `<article>`. Une grille à deux colonnes
 * ne suffit donc pas — sans placement explicite, les six se répartissent dans
 * les cases au fil de l'eau, et on obtient exactement ce qu'on a vu : l'affiche
 * en haut à droite, le titre en bas à gauche, et du blanc partout.
 *
 * On place donc nommément : l'affiche occupe la première colonne sur TOUTE la
 * hauteur, tout le reste va dans la seconde. */
.mec-wrap .mec-event-list-classic .mec-event-article {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	column-gap: 32px;
	row-gap: 6px;
	align-content: center;
	padding: 24px 0;
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--gris-filet);
}

.mec-wrap .mec-event-list-classic .mec-event-image {
	grid-column: 1;
	/* `1 / -1` NE MARCHE PAS ICI, et c'est un piège de la grille implicite :
	   `-1` désigne la dernière ligne EXPLICITE, et il n'y en a aucune — la
	   déclaration se résout donc en « une seule rangée », l'affiche n'occupe
	   que la première, et tout le texte retombe dessous. Mesuré à l'écran le
	   24.10.2026. On enjambe donc un nombre de rangées plus grand que ce que la
	   peau peut produire. */
	grid-row: 1 / span 20;
	align-self: center;
	width: 100%;
	max-width: none;
	margin: 0;
	float: none;
}

.mec-wrap .mec-event-list-classic .mec-event-image a,
.mec-wrap .mec-event-list-classic .mec-event-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* `contain` et non `cover` : une affiche rognée perd son titre. Le fond prend
 * la couleur de la section pour que la lettre-boîte ne se voie pas. */
.mec-wrap .mec-event-list-classic .mec-event-image img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: var(--wp--preset--color--blanc);
}

/* TOUT LE RESTE DANS LA SECONDE COLONNE, dans l'ordre du balisage. */
.mec-wrap .mec-event-list-classic .mec-event-article > *:not(.mec-event-image) {
	grid-column: 2;
	margin: 0;
	width: auto;
	float: none;
}

.mec-wrap .mec-event-list-classic .mec-event-title {
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	line-height: 1.25;
	margin: 4px 0 8px;
}

.mec-wrap .mec-event-list-classic .mec-event-date,
.mec-wrap .mec-event-list-classic .mec-event-time,
.mec-wrap .mec-event-list-classic .mec-event-loc-place {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 760px) {
	.mec-wrap .mec-event-list-classic .mec-event-article {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}
	.mec-wrap .mec-event-list-classic .mec-event-image {
		grid-column: 1;
		grid-row: auto;
	}
	.mec-wrap .mec-event-list-classic .mec-event-article > *:not(.mec-event-image) {
		grid-column: 1;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * CE QUI NE SE CORRIGE QU'EN FORÇANT LA PRIORITÉ.
 *
 * Décision de Yan, 24.10.2026 : le standard de la maison lève son interdiction
 * dans CE fichier, et seulement ici. La règle reste entière pour nos propres
 * feuilles, où un `!important` est l'aveu d'une spécificité mal tenue. Ici, il
 * ferme celui d'un autre.
 *
 * Chaque règle ci-dessous nomme ce qu'elle combat. Si MEC ou WooCommerce
 * cessent un jour de forcer, ces lignes doivent disparaître — c'est pour ça
 * qu'elles sont groupées et datées plutôt que dispersées.
 * ────────────────────────────────────────────────────────────────────────── */

/* MEC : `button.mec-book-form-next-button{background:#47dc6e!important;
   color:#fff!important}` dans `assets/css/frontend.min.css`. Blanc sur ce vert
   donne 2,10:1. C'est le bouton qui encaisse — il est le dernier à pouvoir
   être illisible. Le primaire de la charte avec du blanc cassé donne 7,4:1. */
.mec-single-event .mec-events-meta-group-booking button.mec-book-form-next-button,
.mec-wrap button.mec-book-form-next-button {
	background: var(--wp--preset--color--primaire) !important;
	border-color: var(--wp--preset--color--primaire) !important;
	color: var(--wp--preset--color--blanc-casse) !important;
}

/* Et le flottement qui le « blockifie », posé par `#mec-book-form-btn-step-1` :
   un identifiant, que nul nombre de classes ne bat. Sans cette ligne, le
   `min-height` de 44 px s'applique mais le texte reste calé en haut. */
.mec-wrap .mec-events-meta-group-booking #mec-book-form-btn-step-1,
.mec-wrap .mec-events-meta-group-booking #mec-book-form-btn-step-2,
.mec-wrap .mec-events-meta-group-booking #mec-book-form-btn-step-3 {
	float: none !important;
	display: flex !important;
	width: fit-content;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 22px;
}

/* LES DERNIERS COINS ARRONDIS. La règle d'angle droit de la charte perd contre
   les `!important` de WooCommerce et des champs de Fluent Forms — 4 à 247
   éléments selon les pages, mesurés le 24.10.2026. */
.wp-site-blocks *,
.wp-site-blocks *::before,
.wp-site-blocks *::after {
	border-radius: 0 !important;
}

/* L'adresse du lieu, dans la colonne latérale : 2,35:1. MEC la pose depuis une
   règle que notre sélecteur à trois classes ne battait pas — l'exception de ce
   fichier la ferme en une ligne au lieu d'une chaîne de sept classes. */
.mec-single-event .mec-address,
.mec-single-event address,
.mec-wrap .mec-address {
	color: var(--wp--preset--color--gris-texte) !important;
}

/* LA PREMIÈRE BOÎTE DE LA COLONNE NE REMONTE PLUS.
 *
 * Bug signalé par Yan, 24.10.2026 : « le truc "s'inscrire" tombe mal ». Il
 * chevauchait l'affiche et débordait à gauche.
 *
 * LA CAUSE. MEC pose `margin-top:-50px` sur la première boîte de la colonne
 * latérale — à dessein : dans sa mise en page d'origine, la boîte vient se
 * glisser SOUS la bannière pleine largeur, et ce retrait la fait chevaucher
 * proprement. Nous avons éteint la bannière, parce qu'elle rognait l'affiche
 * et superposait deux titres. Le retrait est donc resté sans rien au-dessus :
 * la boîte remonte dans le vide et passe par-dessus l'affiche.
 *
 * C'est le genre de réglage qui ne se trouve qu'en mesurant — rien dans le
 * rendu ne dit « quelqu'un a demandé moins cinquante pixels ».
 */
.mec-single-event .col-md-4 > .mec-frontbox:first-child,
.mec-single-event .mec-event-sidebar .mec-frontbox:first-child,
.mec-single-event .mec-frontbox.mec-event-meta:first-child {
	margin-top: 0;
}

/* LES ENTRÉES DU MENU DE COMPTE SE TOUCHENT.
 *
 * Demande de Yan, 24.10.2026 : « moins d'espacement vertical entre les blocs. »
 *
 * `gap: 2px` sur la liste ne suffisait pas : la marge ne venait pas de la
 * liste mais des `<li>` eux-mêmes — WooCommerce leur pose une marge basse, et
 * WordPress ajoute `margin-block-start` aux enfants d'un groupe « flow ».
 * Deux sources, chacune plus précise que notre règle, et elles s'additionnent.
 *
 * On les ferme toutes les deux d'un coup plutôt que de courir après la
 * prochaine : c'est précisément ce que l'exception de ce fichier autorise. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	gap: 2px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* SUR L'ACCUEIL, L'AFFICHE SUFFIT.
 *
 * Demande de Yan, 24.10.2026 : « il y a le titre à droite, ce n'est pas très
 * beau. J'aurais préféré voir uniquement la pancarte. Je pense que ça aurait
 * suffi. »
 *
 * Il a raison, et c'est mesurable : l'affiche porte DÉJÀ le titre, la date,
 * l'heure, le lieu et le nom de l'intervenant. La colonne de droite répétait
 * donc trois informations sur cinq, en plus petit et moins bien.
 *
 * Sur la page AGENDA, la colonne reste : on y compare plusieurs soirées, et
 * une date lisible en texte sert au balayage. Sur l'accueil, il n'y en a
 * qu'une — il n'y a rien à comparer.
 *
 * Le titre n'est pas caché à tout le monde : le lien de l'affiche porte le
 * même intitulé, donc rien ne se perd pour un lecteur d'écran.
 */
.agenda-accueil .mec-event-list-classic .mec-event-article {
	grid-template-columns: minmax(0, 1fr);
	border-bottom: 0;
	padding-top: 0;
}

.agenda-accueil .mec-event-list-classic .mec-event-article > *:not(.mec-event-image) {
	display: none;
}

.agenda-accueil .mec-event-list-classic .mec-event-image {
	grid-row: auto;
	max-width: 640px;
}