/* ========================================================================== GRAMMAIRE VISUELLE — qui prend quoi (DOCS/plan-grammaire-visuelle.md) ========================================================================== tokens.css dit ce qui EXISTE ; cette feuille dit ce qu'on UTILISE OÙ. Chargée en DERNIER (front et éditeur) : elle gagne à spécificité égale. Principe : un rôle = une règle. Les classes historiques des patterns (__eyebrow, __surtitre, __badge, __tag…) sont RATTACHÉES ici par sélecteur groupé, sans toucher au PHP ni aux contenus. Pour changer l'apparence d'un surtitre sur tout le site : modifier la règle ci-dessous, et elle seule. :is() prend la spécificité de son argument le plus fort (ici 0,3,0) : chaque classe rattachée gagne donc sur sa règle d'origine, même préfixée (.entry-content.single-content …). Les !important passent devant les styles inline de Gutenberg (couleur, fond, taille, graisse et interlettrage écrits dans le bloc : le badge du hero d'accueil) et devant `#colophon .site-footer-section p` (1,1,2), qui impose son encre aux surtitres du pied. Les deux sont porteurs, mesuré le 09/11/2026 (phase 6) : sans l'argument factice, l'accueil change de hauteur ; sans les !important, 103 écarts (encre des surtitres du pied sur toutes les pages, hero d'accueil). Phase 6 (09/11/2026) : les déclarations des règles d'origine que cette feuille rendait sans effet ont été retirées (220, prouvé sans écart de rendu). Les règles d'origine ne gardent que la mise en page (marges, display, largeurs). Exceptions gardées exprès : la règle .jm-badge (partagée avec des badges non rattachés) et les icônes des cartes focus. ========================================================================== */ /* ── 1. SURTITRE — « de quoi parle cette section », au-dessus d'un titre ── Texte seul, sans fond ni pilule. 13 px, capitales espacées, bleu JM. */ :is( .jm-surtitre, .jm-badge-pill, p.jm-badge, .jm-section-triptyque__eyebrow, .jm-actualites-section__eyebrow, .jm-membership-grid__eyebrow, .jm-juridique-cas__surtitre, .jm-juridique-event__surtitre, .jm-impact-combats__eyebrow, .jm-bibliotheque-intro__eyebrow, .jm-editorial-proof-block__eyebrow, .jm-espace-legal__eyebrow, .jm-mon-profil__eyebrow, .entry-content.single-content .jm-grammaire-specificite ) { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--jm-blue) !important; font-size: var(--jm-text-xs) !important; font-weight: var(--jm-weight-accent) !important; line-height: var(--jm-lh-titre); letter-spacing: 0.08em !important; text-transform: uppercase; } /* Sur fond sombre : même objet, encre inversée. */ :is( .jm-surtitre--inverse, .jm-bloc-bleu__eyebrow, .jm-juridique-hero__surtitre, .jm-footer-pave__eyebrow, .jm-footer-pave__campaign-eyebrow, .jm-espace-hero__eyebrow, .jm-leisure-login-panel__footer-eyebrow, .entry-content.single-content .jm-grammaire-specificite ) { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--jm-texte-inverse-corps) !important; font-size: var(--jm-text-xs) !important; font-weight: var(--jm-weight-accent) !important; line-height: var(--jm-lh-titre); letter-spacing: 0.08em !important; text-transform: uppercase; } /* ── 2. PASTILLE — catégorie, statut, format d'un contenu ────────────────── Pilule, fond --jm-fond-vignette, texte bleu JM, casse normale. Exception assumée, NON rattachée ici : les 5 badges de couleur du bloc « Notre impact » (.jm-impact-combats-card__badge--*), seul endroit où la couleur code un thème. */ :is( .jm-pastille, .jm-actualite-card__badge, .jm-carte-focus__tag, .jm-event-card__category, .jm-section-video__eyebrow, .jm-section-video__duration, .entry-content.single-content .jm-grammaire-specificite ) { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 var(--jm-space-3); border: 0; border-radius: var(--jm-radius-pill); background: var(--jm-fond-vignette) !important; color: var(--jm-blue) !important; font-size: var(--jm-text-xs); font-weight: var(--jm-weight-accent); line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; } /* ── 3. TITRES — trois paliers, bleu nuit, casse de phrase ───────────────── H1 du hero d'accueil : --jm-display-xl. Autres H1 : --jm-display-lg. H2 de section, partout : --jm-display-md. Le bleu JM est réservé à ce qui se clique, et à UN mot d'accent au plus ( du titre bicolore, coloré dans un titre). Sur fond sombre, le titre reste blanc. Les !important passent devant les styles inline des blocs et les !important des règles d'origine (taille fluide de l'ancien hero). ⚠️ .jm-titre-bicolore n'est PAS rattaché ici : sa règle (typography.css) garde des paliers mobiles 24/20 px pour que « d'administration » tienne à 320 px ; elle a été mise à la grammaire sur place. */ /* H1 */ :is(.jm-hero h1, .jm-hero__title, .entry-content.single-content .jm-grammaire-specificite) { color: var(--jm-night) !important; font-size: var(--jm-display-lg) !important; font-weight: var(--jm-weight-strong) !important; line-height: var(--jm-lh-display) !important; letter-spacing: normal !important; text-transform: none !important; text-wrap: balance; } body.home :is(.jm-hero h1, .jm-grammaire-specificite.jm-grammaire-specificite.jm-grammaire-specificite) { font-size: var(--jm-display-xl) !important; } /* H2 de section, fond clair */ :is( .jm-h2, .jm-join-split__title, .jm-actualites-section__title, .jm-impact-combats__title, .jm-nos-combats-slider__header h2, .jm-section-video__heading, .jm-events-showcase__title, .jm-section-triptyque__title, .jm-avantages-grid__title, .jm-membership-grid__title, .jm-testimonials-grid__title, .jm-juridique-section__titre, .entry-content.single-content .jm-grammaire-specificite ) { color: var(--jm-night) !important; font-size: var(--jm-display-md) !important; font-weight: var(--jm-weight-strong) !important; line-height: var(--jm-lh-display) !important; letter-spacing: normal !important; text-transform: none !important; text-wrap: balance; } /* Titres sur fond sombre : même palier, encre inversée, casse de phrase. */ :is(.jm-juridique-hero__titre, .entry-content.single-content .jm-grammaire-specificite) { font-size: var(--jm-display-lg) !important; line-height: var(--jm-lh-display) !important; letter-spacing: normal !important; text-transform: none !important; text-wrap: balance; } :is(.jm-juridique-video__titre, .jm-juridique-cta__titre, .jm-bloc-bleu__titre, .entry-content.single-content .jm-grammaire-specificite) { font-size: var(--jm-display-md) !important; line-height: var(--jm-lh-display) !important; letter-spacing: normal !important; text-transform: none !important; text-wrap: balance; } /* Titres de bloc dans une section juridique (« 1. Une question juridique ? ») : palier inchangé (28), encre nuit au lieu du bleu CTA. */ :is(.jm-juridique-section h2.wp-block-heading:not(.jm-juridique-section__titre), .entry-content.single-content .jm-grammaire-specificite) { color: var(--jm-night) !important; } /* Le mot d'accent : toujours le bleu JM. */ :is( .jm-impact-combats__title :is(span, mark, strong), .jm-section-video__heading :is(span, mark, strong), .entry-content.single-content .jm-grammaire-specificite ) { color: var(--jm-blue) !important; background: none !important; }