/* ────────────────────────────────────────────────────────────────────────── * 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); } /* LE COMPTEUR DE BILLETS — ET LE JOUR OÙ LE CONFORT TACTILE A CASSÉ L'ACHAT. * * Signalé par Yan le 25.10.2026 : « les compteurs, quand on clique dessus, * c'est comme si les flèches étaient inversées […] on n'arrive pas à mettre * le chiffre 1 ». Personne ne pouvait réserver. * * LA CAUSE ÉTAIT ICI. MEC dessine deux flèches de 14 px EMPILÉES dans la * boîte de 40 px du champ, et il les y tient en `position:absolute` — * `.plus` accroché par `top:5px`, `.minus` par `bottom:5px`. La règle de * confort tactile leur imposait 44 px de côté : mesuré à la sonde, `.plus` * occupait alors y 5→49 et `.minus` y −9→35 dans une boîte haute de 40. Ils * se recouvraient sur trente pixels, et le `.minus`, écrit APRÈS dans le * document, recevait les clics destinés au `.plus`. * * Le symptôme ne disait rien de la cause : les flèches avaient l'air * inversées alors qu'elles étaient simplement l'une sur l'autre. Playwright * l'a nommé en une ligne — « intercepts pointer * events » — là où l'œil ne voyait qu'un bouton qui ne répond pas. * * LA LEÇON, ET ELLE VAUT AU-DELÀ D'ICI : une cible de 44 px qui déclenche * l'autre commande est pire qu'une cible de 17 px qui marche. On ne gonfle * pas un élément positionné en absolu sans lui donner la place. * * On ne gonfle donc plus : on remet le compteur À PLAT. Les deux flèches * sortent du positionnement absolu et reprennent leur rang dans une ligne — * moins, champ, plus — chacune avec ses 44 px et aucun recouvrement. C'est * aussi la disposition que tout le monde connaît. */ /* LA SPÉCIFICITÉ, ENCORE, ET C'EST LA DEUXIÈME FOIS DANS CE FICHIER. * MEC tient ces flèches depuis * `.mec-booking .mec-event-tickets-list .mec-ticket-style-row .minus` — * quatre classes. Une première correction écrite en trois classes n'a pas * mordu : la sonde montrait les flèches TOUJOURS en absolu, toujours * superposées, et seule la hauteur du conteneur avait bougé. On reprend donc * la chaîne de MEC et on ajoute un cran. * * ET ELLES SE REMPILENT, COMME AU DÉPART. Posées côte à côte, elles * marchaient — mais Yan : « normalement, les flèches ici pour mettre les 1 et * 2, ça doit être l'une sous l'autre ». Il a raison, et le dessin le dit * avant lui : MEC fournit un chevron HAUT et un chevron BAS. Deux chevrons * verticaux posés à gauche et à droite d'un champ ne veulent plus rien dire. * * CE QUI AVAIT CASSÉ LA PREMIÈRE FOIS, ET QUI NE SE REPRODUIT PAS : on leur * imposait 44 px de haut CHACUNE dans une boîte de 40, l'une accrochée en * haut et l'autre en bas — trente pixels de recouvrement, et le « moins » * recevait les clics du « plus ». Cette fois la colonne est dimensionnée * POUR elles : 2 × 28 px, et le champ prend la même hauteur. Rien ne se * chevauche parce que rien n'est plus en absolu. * * Le compromis est écrit : 28 px de haut au lieu de 44, compensés par 44 px * de large. Une cible de 44 × 28 se vise au doigt ; une cible de 44 × 44 qui * déclenche l'autre commande, non — on l'a mesuré. */ .mec-booking .mec-event-tickets-list .mec-ticket-style-row .mec-event-ticket-input-wrapper { display: grid; grid-template-columns: 64px 44px; grid-template-rows: 28px 28px; gap: 0 6px; width: auto; min-width: 0; align-items: stretch; justify-content: start; } /* UNE GRILLE, ET NON UN `flex-wrap`. Premier essai avec `wrap` : la ligne était assez large pour tenir les trois éléments, donc rien ne pliait et les flèches restaient côte à côte — mesuré, « minus x=1115, plus x=1065 ». Une grille ne négocie pas : le champ occupe la colonne 1 sur deux rangs, les flèches la colonne 2, un rang chacune. */ .mec-booking .mec-event-tickets-list .mec-ticket-style-row .mec-event-ticket-input-wrapper input { grid-column: 1; grid-row: 1 / span 2; width: 64px; min-width: 0; height: 100%; text-align: center; } .mec-booking .mec-event-tickets-list .mec-ticket-style-row .mec-event-ticket-input-wrapper .plus, .mec-booking .mec-event-tickets-list .mec-ticket-style-row .mec-event-ticket-input-wrapper .minus { position: static; display: flex; align-items: center; justify-content: center; grid-column: 2; width: 44px; min-width: 44px; height: 28px; min-height: 28px; margin: 0; right: auto; left: auto; top: auto; bottom: auto; } .mec-booking .mec-event-tickets-list .mec-ticket-style-row .mec-event-ticket-input-wrapper .plus { grid-row: 1; } .mec-booking .mec-event-tickets-list .mec-ticket-style-row .mec-event-ticket-input-wrapper .minus { grid-row: 2; } /* « 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 `
`. 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.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-MyAccount-navigation ul { display: flex; flex-wrap: wrap; align-items: stretch; /* TROISIÈME TENTATIVE, ET LA CAUSE DES DEUX PREMIÈRES ÉCHECS. * * Yan l'a demandé trois fois : « ajouter du margin entre chaque bloc, ou * alors faire que les lignes se superposent ». Mes deux corrections * précédentes étaient justes et ne s'appliquaient pas : elles étaient * préfixées de `.woocommerce-account`, une classe que le `body` ne porte * PAS sur ce thème de blocs. Exactement le piège rencontré deux fois le * même jour sur `ul.products` et sur les boutons du catalogue — une * règle écrite pour les modèles PHP de WooCommerce, appliquée à une page * rendue en blocs. * * La leçon tient en une ligne : un sélecteur qui ne s'applique pas est * indiscernable d'un sélecteur qui n'existe pas. Quand une correction ne * change rien deux fois de suite, ce n'est pas la valeur qu'il faut * revoir, c'est le chemin. * * Seize pixels : assez pour que deux entrées se lisent comme deux * boutons, et non comme un cadre fendu. */ gap: 16px; 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-MyAccount-navigation li { display: flex; flex: 1 1 100%; min-width: 0; margin: 0; border: 0; } .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-MyAccount-navigation li a:hover, .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-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-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-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-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 `
`. 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. */ /* L'AFFICHE EST LE CONTENU, PAS L'ILLUSTRATION. Retour de Yan, 25.10.2026 : « agrandis l'image, c'est pas lisible », et « trop d'espace à droite, pas structuré ». Les deux défauts n'en faisaient qu'un. L'affiche à 38 % mesurait 456 px pour une source de 1920 : le programme imprimé dessus — l'intervenant, les horaires, le lieu — devenait illisible. Et le texte à côté, qui ne portait que trois lignes, s'étalait sur 744 px en laissant le reste vide. L'affiche passe à 52 %, et la colonne de droite se cale à 30ch : elle n'a plus à remplir l'espace, elle a juste à être lue. Ce qui reste à droite n'est pas du vide perdu, c'est de la marge — et c'est la différence entre une mise en page qui respire et une qui a raté sa cible. */ .mec-wrap .mec-event-list-classic .mec-event-article { display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 34ch); column-gap: 36px; row-gap: 4px; align-content: center; justify-content: start; padding: 28px 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; } /* LES QUATRE LIGNES D'INFORMATION, TOUTES BÂTIES PAREIL. Date, heure, lieu et prix viennent de quatre endroits différents du balisage de MEC, avec quatre habillages d'origine. Les aligner sur une seule forme — icône, puis texte, même graisse, même gouttière — est ce qui fait qu'on les lit comme une fiche et non comme des restes empilés. */ .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, .mec-wrap .mec-event-list-classic .mec-event-price, .mec-wrap .mec-event-list-classic .mec-price-details { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--texte); font-size: 0.95rem; line-height: 1.5; color: var(--wp--preset--color--encre); margin: 0; } /* LA DATE PREND LA TÊTE. C'est elle qu'on cherche dans un agenda — pas le titre, qu'on lit ensuite pour décider. */ .mec-wrap .mec-event-list-classic .mec-event-date { font-family: var(--wp--preset--font-family--titre); font-weight: 600; letter-spacing: 0.3px; } /* LE GESTE FERME LA FICHE, et ressemble aux autres boutons du site. MEC le rend en `.mec-booking-button`, avec son propre habillage. */ .mec-wrap .mec-event-list-classic .mec-booking-button, .mec-wrap .mec-event-list-classic .mec-modal-booking-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; padding: 10px 20px; border: 0; border-radius: 0; background: var(--wp--preset--color--primaire); color: var(--wp--preset--color--blanc); font-family: var(--wp--preset--font-family--titre); font-size: 0.95rem; font-weight: 600; text-decoration: none; width: fit-content; } .mec-wrap .mec-event-list-classic .mec-booking-button:hover, .mec-wrap .mec-event-list-classic .mec-modal-booking-button:hover { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--blanc); } /* LE PRIX RESTE DÉCLARÉ ET NE SORT PAS, et ce n'est pas un oubli : les rencontres de La Fabrique n'ont pas de « coût » saisi dans MEC — leur prix vit sur les produits WooCommerce qui leur servent de billets. L'option est allumée pour le jour où quelqu'un en saisira un ; d'ici là, la règle `:empty` ci-dessous empêche la ligne de creuser un trou. Une ligne vide ne doit pas creuser un trou : MEC rend toujours le `div`, rempli ou non. */ .mec-wrap .mec-event-list-classic .mec-event-time:empty, .mec-wrap .mec-event-list-classic .mec-event-price:empty, .mec-wrap .mec-event-list-classic .mec-event-detail:empty { display: none; } @media (max-width: 860px) { .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 `
  • ` 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-MyAccount-navigation ul { gap: 2px !important; } .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; } /* L'AFFICHE PREND TOUTE LA LARGEUR. Demande de Yan, 25.10.2026 : « on peut faire encore plus grand pour la prochaine rencontre ; finalement, s'il n'y a qu'un seul élément, ça peut prendre pleine largeur de page. » Elle était plafonnée à 640 px — une mesure héritée de la liste, où plusieurs affiches se partagent la place. Ici il n'y en a qu'une : rien ne justifie de la brider, et le programme imprimé dessus devient enfin lisible sans ouvrir la fiche. */ .agenda-accueil .mec-event-list-classic .mec-event-image { grid-row: auto; max-width: none; } /** * LE BOUTON D'ENVOI VERT DE FLUENT FORMS. * * La charte habille déjà `.fluentform .ff-btn-submit`, et ça suffisait tant * que les formulaires repris de production portaient un style personnalisé * enregistré chez eux — `form.fluent_form_8 .wpf_has_custom_css.ff-btn-submit`, * qui passe en dernier et gagne. * * Le questionnaire de satisfaction n'en a pas. Il tombait donc sur * `.ff-default .ff_btn_style` de `fluentform-public-default.css` : MÊME * spécificité que la règle de la charte (deux classes de chaque côté), et * chargée après elle. Un vert pomme au bas d'une page noire et brique. * * On ne force pas la priorité, on ajoute de la spécificité : quatre classes * contre deux, et la couleur de la charte reprend la main sur TOUS les * formulaires, y compris ceux que le client créera plus tard sans style. */ .fluentform.ff-default .ff-btn-submit.ff_btn_style { font-family: var(--font-titre); font-size: 1rem; font-weight: 600; background: var(--primaire); color: var(--blanc); border: none; border-radius: 0; padding: 12px 24px; min-height: 48px; box-shadow: none; } .fluentform.ff-default .ff-btn-submit.ff_btn_style:hover, .fluentform.ff-default .ff-btn-submit.ff_btn_style:focus { background: var(--noir); color: var(--blanc); } /** * LE CATALOGUE EN DEUX COLONNES. * * Demande de Yan, 25.10.2026 : « tu fais deux colonnes pour les produits ». * L'option `woocommerce_catalog_columns` est posée à 2 — et le thème de blocs * n'en tient pas compte : il pose sa propre grille, en trois. L'option reste * écrite parce qu'elle est ce que WooCommerce lit ailleurs (widgets, blocs de * produits), mais l'affichage du catalogue se décide ici. * * Avec quatre articles, trois colonnes laissent une ligne solitaire en bas ; * deux en font deux rangées pleines, et chaque fiche gagne la largeur qui * rendra sa photo lisible le jour où il y en aura une. */ .woocommerce ul.products, .wp-block-woocommerce-product-collection .wc-block-product-template, .woocommerce .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px; } @media (max-width: 640px) { .woocommerce ul.products, .wp-block-woocommerce-product-collection .wc-block-product-template, .woocommerce .wc-block-product-template { grid-template-columns: minmax(0, 1fr) !important; } } /** * LE BOUTON D'UN PRODUIT EXTERNE. * * WooCommerce habille `.add_to_cart_button` et laisse le bouton d'un produit * externe — `.product_type_external` — avec le gris de son thème. Sur la * fiche de l'adhésion, le seul geste possible avait donc l'air désactivé. */ /* LE SÉLECTEUR EST CELUI DES BLOCS, PAS CELUI DES MODÈLES PHP. Mesuré : seul le bouton d'un produit EXTERNE sortait gris — les autres héritent de `.wp-element-button`, qui porte déjà la charte, parce qu'ils ont la classe `add_to_cart_button` que WooCommerce habille. Celui-ci ne l'a pas : il tombait sur le gris par défaut du bloc, et le seul geste possible sur la fiche de l'adhésion avait l'air désactivé. */ /* LE SHORTCODE `[products]` REND DES `a.button` EN `inline-block`, et non les boutons de bloc. Le `min-height` de 44 px s'y applique, mais le texte se cale en haut — la cible est à la bonne taille et le mot flotte dessus. C'est le même piège que sur le bandeau de consentement : une hauteur minimale est là pour le doigt, pas pour l'œil. */ /* ET SANS LE PRÉFIXE `.woocommerce` : le shortcode `[products]` posé dans une page de la chaîne rend sa liste SANS l'enveloppe `.woocommerce` que WooCommerce ajoute sur ses propres pages. Toutes les règles qui en dépendaient tombaient donc à côté, y compris celle-ci à sa première écriture. */ /* LA SPÉCIFICITÉ SE COMPTE, ELLE NE S'ESTIME PAS. WooCommerce écrit `.woocommerce ul.products li.product .button` — quatre classes. Mon premier sélecteur en avait trois et perdait sans bruit : le bouton restait `inline-block`, le contrôle restait rouge, et rien dans le code ne disait pourquoi. On égale donc la chaîne, plutôt que de forcer la priorité. */ ul.products li.product a.button, .woocommerce ul.products li.product a.button, .woocommerce ul.products a.button, .wc-block-components-product-button__button.product_type_external, .woocommerce a.button.product_type_external, .woocommerce a.button.product_type_variable, .woocommerce a.button.add_to_cart_button, .woocommerce a.button.single_add_to_cart_button, .woocommerce button.single_add_to_cart_button { background: var(--wp--preset--color--primaire) !important; color: var(--wp--preset--color--blanc) !important; border: 0; border-radius: 0; font-family: var(--wp--preset--font-family--titre); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; } .wc-block-components-product-button__button.product_type_external:hover, .woocommerce a.button.product_type_external:hover, .woocommerce a.button.product_type_variable:hover, .woocommerce a.button.add_to_cart_button:hover, .woocommerce a.button.single_add_to_cart_button:hover, .woocommerce button.single_add_to_cart_button:hover { background: var(--wp--preset--color--encre) !important; color: var(--wp--preset--color--blanc) !important; } /** * LES ICÔNES BLEUES DES MESSAGES DE WOOCOMMERCE. * * Retour de Yan, 25.10.2026 : « le petit point d'interrogation et le point * d'exclamation sont encore sur un fond bleu ». WooCommerce pose ses bandeaux * d'information avec une icône SVG en `#1e1e1e` sur une pastille bleue — * `--wp--preset--color--vivid-cyan-blue` du noyau, qu'aucun thème ne lui a * dit de changer. * * Un bleu vif dans un site brique et encre ne se lit pas comme une * information : il se lit comme une pièce qui vient d'ailleurs. On aligne * l'icône sur la couleur du message qu'elle accompagne. */ .wc-block-components-notice-banner > svg, .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { background: transparent !important; color: var(--wp--preset--color--primaire) !important; fill: var(--wp--preset--color--primaire) !important; } .wc-block-components-notice-banner.is-info > svg, .wc-block-components-notice-banner.is-success > svg { background: var(--wp--preset--color--primaire) !important; fill: var(--wp--preset--color--blanc) !important; color: var(--wp--preset--color--blanc) !important; } .wc-block-components-notice-banner.is-error > svg { background: var(--wp--preset--color--encre) !important; fill: var(--wp--preset--color--blanc) !important; } /* Le filet du bandeau suit la même couleur, sinon le bleu revient par le bord. */ .wc-block-components-notice-banner.is-info, .wc-block-components-notice-banner.is-success { border-color: var(--wp--preset--color--primaire) !important; background-color: var(--wp--preset--color--gris-fond) !important; } .woocommerce-info, .woocommerce-message { border-top-color: var(--wp--preset--color--primaire) !important; } /** * TROIS PRODUITS PAR RANGÉE. * * Retour de Yan, 25.10.2026 : « j'aimerais que tu mettes 3 produits par * colonne, c'est trop gros sinon ». À deux, chaque fiche faisait près de cinq * cents pixels de large pour une vignette et trois lignes de texte — la photo * prenait la place d'une affiche. */ /* SANS LE PRÉFIXE `.woocommerce`, ENCORE. Le shortcode `[products]` posé dans une page de la chaîne rend sa liste sans l'enveloppe que WooCommerce ajoute sur ses propres pages : la règle tombait à côté, et la boutique restait à deux colonnes alors que l'option et la feuille en demandaient trois. Même cause que pour le centrage des boutons, deux heures plus tôt. */ /* ET `grid-template-columns` NE FAIT RIEN SUR UN `display:block`. Mesuré le 25.10.2026 sur `/boutique/` : la règle ci-dessous était bien appliquée — le navigateur rendait `repeat(3, minmax(0px, 1fr))` — mais la liste était en `display:block`, et chaque fiche en `float:left; width:547px`, c'est-à-dire la grille à deux colonnes que WooCommerce pose lui-même à partir de la classe `columns-2`. Une valeur calculée NON RÉSOLUE est le signe : sur une vraie grille, le navigateur rend des pixels, pas la déclaration. Donc la liste prend la grille, ET les fiches rendent le flottant. Les deux vont ensemble : neutraliser l'un sans l'autre laisse la largeur de WooCommerce par-dessus la colonne de la grille. */ ul.products, .woocommerce ul.products, .wp-block-woocommerce-product-collection .wc-block-product-template, .woocommerce .wc-block-product-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } ul.products > li.product, .woocommerce ul.products > li.product { float: none !important; clear: none !important; width: auto !important; margin-right: 0 !important; margin-bottom: 0 !important; } /* ET LE CLEARFIX DE WOOCOMMERCE DEVIENT UNE CASE VIDE. Vu par Yan le 25.10.2026 : « 1er produit vide ». La première fiche du catalogue partait en DEUXIÈME colonne, et la grille montrait un trou avant elle. LA CAUSE. `ul.products` porte `::before` et `::after` en `content:" "; display:table` — le clearfix d'une mise en page flottante, écrit pour un monde où ces pseudo-éléments ne sont rien de plus qu'une purge. Mais sur un conteneur de grille, TOUT pseudo-élément avec un `content` devient un ÉLÉMENT DE GRILLE à part entière : il prend une case, et décale tout le reste d'un cran. Le `display:table` n'y change rien, la grille le reclasse en bloc. Le piège se referme exactement au moment où l'on répare la grille : tant que la liste était en `display:block`, le clearfix faisait son travail et ne se voyait pas. `content:none` supprime la boîte — `display:none` la laisserait dans l'arbre de mise en page de certaines versions. */ ul.products::before, ul.products::after, .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce .wc-block-product-template::before, .woocommerce .wc-block-product-template::after { content: none !important; } @media (max-width: 900px) { ul.products, .woocommerce ul.products, .wp-block-woocommerce-product-collection .wc-block-product-template, .woocommerce .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { ul.products, .woocommerce ul.products, .wp-block-woocommerce-product-collection .wc-block-product-template, .woocommerce .wc-block-product-template { grid-template-columns: minmax(0, 1fr) !important; } } /** * LE HAUT DE LA PAGE D'UN ÉVÉNEMENT. * * Retour de Yan, 25.10.2026 : « la marge sur la page de l'événement est un * peu trop grande en haut ». Mesuré : 217 px entre le bandeau et le titre, * pour une page dont le contenu — l'affiche, la date, le bouton de * réservation — est précisément ce qu'on vient chercher. * * Le gabarit `single` est partagé : son `.sect` de 72 px convient à un * article, qu'on lit, pas à une fiche d'événement, qu'on consulte. On ne * touche donc pas au gabarit — on resserre pour ce type de contenu, et pour * lui seul. */ .single-mec-events main > .sect:first-child { padding-top: 28px; } .single-mec-events main > .sect:first-child > .wrap > .h1, .single-mec-events main > .sect:first-child > .wrap > h1 { margin-bottom: 18px; } /** * LE RETOUR À LA BOUTIQUE, À LA PLACE DU FIL D'ARIANE. * * Il prend la place exacte du bloc qu'il remplace — en haut de la fiche, * au-dessus du titre — et le même retrait que le reste de la page. La * flèche est DANS le texte du lien, pas un pseudo-élément : un lecteur * d'écran annonce alors « retour à la boutique » et non « lien ». */ .retour-boutique { margin: 0 0 20px; } .retour-boutique .lien { padding: 10px 0; font-size: .95rem; } /** * LA FENÊTRE DE RÉSERVATION DE MEC FAIT 150 PIXELS DE HAUT. * * Vu par Yan le 25.10.2026 : « trop petit ». Mesuré sur `/agenda/` : le clic * sur « Réserver l'événement » ouvre une lightbox `featherlight` dont * l'iframe sort à 700 × 150 px — la taille par défaut de MEC, posée en * attributs sur l'élément. Un formulaire de réservation n'y tient pas : on * voit le titre, la date, et deux filets. Tout le reste est hors cadre, et * l'iframe ne défile pas de lui-même. * * LA TAILLE EST RELATIVE À LA FENÊTRE, pas fixe. Une hauteur en pixels * conviendrait à un écran et déborderait du suivant ; `vh` et `vw` suivent * l'écran qui la reçoit, et les bornes hautes empêchent la fenêtre de * s'étaler sur un très grand moniteur, où un formulaire large se lit mal. * * `!important` est nécessaire : MEC écrit la taille en attributs HTML, et * c'est l'un des cas que cette feuille existe pour traiter. */ .featherlight .featherlight-content, .featherlight .featherlight-inner, .featherlight iframe.featherlight-inner { width: min(920px, 94vw) !important; height: min(780px, 86vh) !important; max-width: 94vw !important; max-height: 86vh !important; } .featherlight .featherlight-content { padding: 0 !important; border-bottom: 0 !important; } /** * LE FOND DE LA FENÊTRE DE RÉSERVATION. * * MEC peint le `body` de sa vue en modale en `#E6F7FF` — un bleu pâle qui ne * vient d'aucune charte et qui encadrait la fiche blanche d'un liseré clair. * La marque n'a pas de bleu ; son fond clair est le gris de la charte. * * Le sélecteur vise la CLASSE que WordPress pose sur le `body` de la vue * d'un événement, et non le `body` tout court : la règle ne vaut que là. */ body.mec-events-template-default { background: var(--wp--preset--color--gris-fond) !important; } /** * LES PRODUITS SIMILAIRES NE SONT PAS LE CATALOGUE. * * Vu le 25.10.2026 sous la fiche du bon atelier : « Bon découverte » sortait * à une lettre par ligne — « Bon / déc / ouve / rte » — avec une vignette de * quarante pixels. * * LA CAUSE. La règle des trois colonnes vise `ul.products` sans distinction, * et ce bloc-ci vit dans la colonne de TEXTE de la fiche, pas sur la pleine * largeur du catalogue. Trois colonnes d'une colonne étroite font trois * timbres-poste. * * Un nombre fixe de colonnes suppose une largeur connue. Ici elle ne l'est * pas : `auto-fill` avec un plancher de 220 px pose autant de colonnes que la * place en autorise, et une seule quand il n'y a de place que pour une. */ .related ul.products, .up-sells ul.products, .cross-sells ul.products, .wc-block-product-template.columns-5 { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important; gap: 24px; } /* `columns-5` EST LA SIGNATURE DU BLOC « produits similaires » : c'est le nombre de colonnes que WooCommerce lui donne par défaut, là où le catalogue porte `columns-3`, posé par l'option du site. On distingue donc les deux par ce que WooCommerce écrit lui-même, et non par un marqueur ajouté à la main qui se perdrait à la première mise à jour du gabarit. */ .wc-block-product-template.columns-5 > li { width: auto !important; margin: 0 !important; max-width: none !important; } /** * LE COMPTE ET LE PANIER FONT UNE PAIRE, PAS DEUX OBJETS SÉPARÉS. * * Retour de Yan, 25.10.2026 : « il y a trop d'espace entre le bonhomme et le * panier ». * * CE QUI LE CAUSAIT, mesuré : l'écart de la rangée ne vaut que 8 px, mais le * lien du compte sort en 60 × 60 pour un pictogramme de 20. Chaque icône * porte donc vingt pixels de vide de chaque côté, et le blanc entre les deux * glyphes atteint quarante — plus qu'entre deux entrées du menu. * * Les deux boîtes passent à 44 px, le plancher tactile, et l'écart de rangée * tombe à zéro : ce sont les rembourrages qui espacent, et ils sont égaux des * deux côtés. Le groupe se détache du menu par une marge à gauche, qui dit * qu'on change de registre — les pages d'un côté, l'état de l'autre. * * L'ORDRE NE CHANGE PAS, et c'est l'usage : le panier est TOUJOURS le dernier * élément à droite. C'est là que la main le cherche sur toutes les boutiques, * et un compte placé après lui ferait hésiter au moment de payer. */ .bandeau .wp-block-woocommerce-customer-account { margin-left: 20px; } /* L'ÉCART DE RANGÉE EST ANNULÉ ENTRE LES DEUX. Les huit pixels de `gap` du bandeau séparent les entrées du menu, et c'est bien ; entre deux icônes qui portent déjà vingt-deux pixels de rembourrage chacune, ils s'ajoutent à ce rembourrage et font trente pixels de blanc — plus qu'entre deux mots du menu. On les retire ici, et là seulement. */ .bandeau .wp-block-woocommerce-mini-cart { margin-left: -8px; } .bandeau .wc-block-customer-account__link, .bandeau .wc-block-mini-cart__button { min-width: 44px; min-height: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } .bandeau .wc-block-customer-account__account-icon, .bandeau .wc-block-mini-cart__button svg { width: 22px; height: 22px; margin: 0; } /** * LA PAGE DE CONNEXION TIENT DANS UNE COLONNE, AU MILIEU. * * Demande de Yan, 25.10.2026 : « réduis la largeur du bloc et tu centres * toute l'information ». * * Mesuré avant : le formulaire faisait 1000 px de large, pour deux champs de * saisie. Une page qui ne demande qu'une chose — s'identifier — n'a aucune * raison d'occuper la largeur d'un catalogue : l'œil part chercher au loin ce * qui tient dans un empan. * * `.woocommerce` ET SON ENFANT : le conteneur porte la mesure, le formulaire * la remplit. Les cibler tous les deux évite la surprise du jour où * WooCommerce ajoute une enveloppe entre les deux. * * LE TEXTE EST CENTRÉ, LES CHAMPS NE LE SONT PAS. Un intitulé de champ centré * au-dessus de sa boîte flotte, et l'œil perd le bord gauche qui lui sert de * repère pour remplir. Le centrage s'arrête donc au titre et à la phrase. */ /* ET SEULEMENT L'ÉCRAN DE CONNEXION. Retour de Yan, 25.10.2026 : « attention, je parlais uniquement de l'écran de login, pas une fois que la page est ouverte ». `/mon-compte/` est DEUX pages sous une seule adresse : le formulaire pour qui n'est pas connecté, le tableau de bord pour qui l'est. La colonne de 520 px convient au premier et étouffe le second, dont le menu latéral et le contenu se partageaient alors la même largeur qu'un champ de saisie. `body:not(.logged-in)` les distingue : WordPress pose cette classe lui-même, et c'est le seul marqueur qui soit vrai avant que WooCommerce n'ait rien rendu. Un sélecteur sur la présence du formulaire aurait marché aussi, mais il aurait dépendu du balisage d'une extension plutôt que d'un état. ET LES DEUX CLASSES SONT SUR LE MÊME ÉLÉMENT. `woocommerce-account` est posée sur le `body`, pas sur un conteneur : écrire `body:not(.logged-in) .woocommerce-account` demandait un SECOND élément portant cette classe, et la règle ne s'appliquait nulle part. Mesuré — 1000 px au lieu de 520. C'est le même piège que `.woocommerce ul.products` ce matin, pris par l'autre bout : une classe du `body` se compose, elle ne se descend pas. */ body:not(.logged-in).woocommerce-account .entry-content > .woocommerce, body:not(.logged-in).woocommerce-account form.woocommerce-form-login { max-width: 520px; margin-left: auto; margin-right: auto; } body:not(.logged-in) .compte-qui { max-width: 520px; margin: 0 auto 28px; text-align: center; } body:not(.logged-in).woocommerce-account .entry-content > .woocommerce > h2 { text-align: center; } body:not(.logged-in).woocommerce-account form.woocommerce-form-login .form-row label, body:not(.logged-in).woocommerce-account form.woocommerce-form-login .form-row input { text-align: left; } /* ── « RÉSERVER L'ÉVÉNEMENT » REDEVIENT UN BOUTON ─────────────────────────── * * Retour de Yan, 25.10.2026 : « je trouvais que c'était quand même bien que * le bouton Réserver l'événement soit en bouton ». * * C'EST NOTRE CORRECTION PRÉCÉDENTE QUI L'AVAIT APLATI. En décrochant la * modale, on remplaçait la classe `mec-modal-booking-button` par un nom * neutre — et c'était elle, pas `mec-mb-button`, qui portait le dessin du * bouton chez MEC. Mesuré : `display:block`, fond transparent, aucun * remplissage. Le lien marchait, il ne se voyait plus. * * On ne remet pas la classe de MEC : elle annonce une modale qui n'existe * plus. On dessine le bouton nous-mêmes, dans la grammaire de la maison — * carré, brique, cible de 44 px — ce qui le rend du même coup indépendant de * ce que l'extension décidera à sa prochaine version. */ .mec-wrap a.mec-booking-page-button, .mec-wrap a.mec-booking-page-button:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px; background: var(--wp--preset--color--primaire); color: var(--wp--preset--color--blanc); font-family: var(--wp--preset--font-family--titre); font-size: .95rem; font-weight: 600; letter-spacing: .2px; text-decoration: none; border: 2px solid var(--wp--preset--color--primaire); transition: background .14s ease, color .14s ease; } .mec-wrap a.mec-booking-page-button:hover, .mec-wrap a.mec-booking-page-button:focus-visible { background: var(--wp--preset--color--blanc-casse); color: var(--wp--preset--color--primaire); } /* ── LE PAYS SE RANGE ENTRE LA VILLE ET LE TÉLÉPHONE ─────────────────────── * * Demande de Yan, 25.10.2026 : « le pays doit être après le code postal et * la ville, et avant le numéro de téléphone ». * * LA PRIORITÉ NE SUFFIT PAS, ET C'EST MESURÉ DEUX FOIS. `priority` ordonne * bien les champs de l'ancien tunnel, et le paiement en blocs l'applique à * tous — SAUF au pays, qu'il rend toujours en tête. C'est défendable de sa * part : le format du code postal, la liste des cantons et les champs requis * se déduisent du pays, et il lui faut cette réponse avant de dessiner le * reste. Essayé à 200 puis à 75 : le champ n'a pas bougé d'un pixel. * * Le conteneur est un `flex` de sept enfants : `order` les range sans * toucher au document. C'EST LE SEUL CHEMIN, ET IL A UN COÛT : l'ordre de * tabulation reste celui du document, donc le pays reçoit le focus en * premier alors qu'il s'affiche en sixième. Un seul champ décalé, sur un * formulaire qui en compte sept, et il reste atteignable et compréhensible — * c'est pesé, pas ignoré. */ .wc-block-components-address-form > .wc-block-components-address-form__first_name { order: 1; } .wc-block-components-address-form > .wc-block-components-address-form__last_name { order: 2; } .wc-block-components-address-form > .wc-block-components-address-form__address_1 { order: 3; } .wc-block-components-address-form > .wc-block-components-address-form__postcode { order: 4; } .wc-block-components-address-form > .wc-block-components-address-form__city { order: 5; } .wc-block-components-address-form > .wc-block-components-address-form__country { order: 6; } .wc-block-components-address-form > .wc-block-components-address-form__phone { order: 7; } /* ── « COMMANDE REÇUE » PREND LA CHARTE ──────────────────────────────────── * * Demande de Yan, 25.10.2026 : « on peut restyliser la page de validation de * commande, histoire qu'elle soit plus raccord avec le site ». * * ON HABILLE, ON NE REDESSINE PAS. Le tableau, les intitulés et l'ordre des * informations restent ceux de WooCommerce : ce sont des blocs qu'il met à * jour, et une reprise complète serait à refaire à chaque version. Ce qui * change est ce qui appartient à la maison — la typographie, les encres, les * filets, les respirations. * * Le titre de la page sortait en très gros noir, deux fois plus haut que les * titres du site : il reprend l'échelle des autres pages. */ .woocommerce-order-received .entry-content > .wp-block-heading, .woocommerce-order-received .wc-block-order-confirmation-status { font-family: var(--wp--preset--font-family--titre); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -.6px; color: var(--wp--preset--color--encre); margin: 0 0 8px; } .woocommerce-order-received .wc-block-order-confirmation-status-description { font-family: var(--wp--preset--font-texte, var(--wp--preset--font-family--texte)); font-size: 1.05rem; line-height: 1.6; color: var(--wp--preset--color--gris-texte); margin: 0 0 28px; } /* Le récapitulatif en bandeau : un filet au-dessus, de l'air, et les intitulés en capitales de la maison plutôt qu'en gras nu. */ .woocommerce-order-received ul.wc-block-order-confirmation-summary { list-style: none; margin: 0 0 32px; padding: 20px 0 0; border-top: 2px solid var(--wp--preset--color--encre); display: flex; flex-wrap: wrap; gap: 18px 40px; } .woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key { display: block; font-family: var(--wp--preset--font-family--titre); font-size: .78rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wp--preset--color--gris-texte); margin-bottom: 4px; } .woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value { font-size: 1rem; color: var(--wp--preset--color--encre); } /* Le tableau : pas de bordure de cadre, un filet par ligne — comme l'annuaire et le pied du site. */ .woocommerce-order-received .wc-block-order-confirmation-totals table { width: 100%; border-collapse: collapse; border: 0; } .woocommerce-order-received .wc-block-order-confirmation-totals th, .woocommerce-order-received .wc-block-order-confirmation-totals td { border: 0; border-bottom: 1px solid var(--wp--preset--color--gris-filet); padding: 14px 0; text-align: left; vertical-align: top; } .woocommerce-order-received .wc-block-order-confirmation-totals th { font-family: var(--wp--preset--font-family--titre); font-size: .78rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wp--preset--color--gris-texte); border-bottom-color: var(--wp--preset--color--encre); } .woocommerce-order-received .wc-block-order-confirmation-totals td:last-child, .woocommerce-order-received .wc-block-order-confirmation-totals th:last-child { text-align: right; } .woocommerce-order-received .wc-block-order-confirmation-totals tfoot td { font-weight: 600; color: var(--wp--preset--color--encre); } /* L'adresse de facturation : une boîte sobre, sur le gris de la maison. * * ELLE NE SE PEINT QUE SI ELLE PORTE QUELQUE CHOSE. Signalé par Yan le * 25.10.2026 — « une espèce de bande grise ». Sur la variante de la page qui * demande de confirmer son adresse de courriel, la commande n'est pas encore * ouverte : WooCommerce rend le conteneur d'adresse VIDE, et le fond gris en * faisait une barre qui ne dit rien. Un décor posé sans condition finit * toujours par décorer du vide. `:has()` le réserve au cas où l'adresse est * là. */ .woocommerce-order-received .wc-block-order-confirmation-address-wrapper { background: transparent; padding: 0; border: 0; } .woocommerce-order-received .wc-block-order-confirmation-address-wrapper:has(address) { background: var(--wp--preset--color--gris-fond); padding: 20px 24px; } .woocommerce-order-received .wc-block-order-confirmation-address-wrapper address { font-style: normal; line-height: 1.6; } /* Les liens de la page suivent l'encre de la marque. */ .woocommerce-order-received .entry-content a { color: var(--wp--preset--color--primaire); text-underline-offset: 3px; } /* Le titre de la page sort du gabarit, pas du bloc de confirmation : il échappait donc à la règle précédente, qui ne visait que `.entry-content`. Il tenait 64 px — deux fois le h1 des autres pages. */ .woocommerce-order-received .wp-block-post-title, .woocommerce-order-received h1.entry-title { font-family: var(--wp--preset--font-family--titre); font-size: clamp(1.9rem, 4.2vw, 2.6rem); font-weight: 600; letter-spacing: -.8px; line-height: 1.1; color: var(--wp--preset--color--encre); margin: 0 0 24px; } /* La boîte d'adresse portait un cadre DANS un cadre : MEC n'y est pour rien, c'est WooCommerce qui encadre l'adresse à l'intérieur du bloc qu'on vient de peindre en gris. Un seul contenant suffit. */ .woocommerce-order-received .wc-block-order-confirmation-address-wrapper address, .woocommerce-order-received .wc-block-order-confirmation-address-wrapper > div { border: 0; padding: 0; background: transparent; } .woocommerce-order-received .wc-block-order-confirmation-address-wrapper h2, .woocommerce-order-received .wc-block-order-confirmation-totals + * h2 { font-family: var(--wp--preset--font-family--titre); font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; color: var(--wp--preset--color--encre); } /* « Détails de la commande » : un intertitre, pas un titre de page. */ .woocommerce-order-received .wc-block-order-confirmation-totals h2, .woocommerce-order-received .entry-content h2 { font-family: var(--wp--preset--font-family--titre); font-size: 1.25rem; font-weight: 600; letter-spacing: -.2px; margin: 36px 0 4px; color: var(--wp--preset--color--encre); }