/* Foire du Partage — édition 2026 Cible : toute page portant le template « Foire du Partage 2026 » — pas un ID. Aujourd'hui 21835 et 30988 ; pour en ajouter une, l'assigner dans WordPress, ce fichier n'a pas à changer. Dérivé de template-foire-partage.css (archive 2025, ID 30571). POINT D'ENTRÉE DESIGN : les tokens --fdp-* sont émis par functions.php (fdp_2026_tokens(), action wp_head). Les valeurs en fallback ci-dessous ne servent que si le style inline ne sort pas et doivent rester alignées sur ce tableau. Pour brancher le design 2026 : éditer functions.php. SCOPE : « :is(#contenuPage, main) ». - #contenuPage est le conteneur des anciens templates ; il n'existe pas sur les pages construites avec Jet Theme Core. - main (#jet-theme-core-page) est la zone de contenu de ces pages-là. - :is() prend la spécificité de son argument le plus fort, ici un ID : le scope garde donc le dessus sur l'Elementor Kit même quand c'est « main » qui matche. NE PAS y ajouter .jet-theme-core-document : ce wrapper englobe aussi le header et le pied de page, qui héritaient alors de la typographie et du fond de la page. */ @import 'theme-base.css'; /* template3-page.css n'est volontairement PAS importé ici, contrairement à l'archive 2025 : ses 49 lignes ne sont que la palette T3 « Terre rouge », et elle impose les couleurs en !important (#contenuPage h1,h2,h3… color). Tant qu'elle est chargée, aucune couleur choisie dans Elementor ne s'applique. Les couleurs de cette page se règlent donc entièrement dans l'éditeur. */ /* === Fond global : écrase l'Elementor Kit et les wrappers du thème === */ html.page-template-template-foire-partage-2026, body.page-template-template-foire-partage-2026, body.elementor-default.elementor-kit-17332.page-template-template-foire-partage-2026, .page-template-template-foire-partage-2026 .elementor-location-body, .page-template-template-foire-partage-2026 .site, .page-template-template-foire-partage-2026 .site-content, .page-template-template-foire-partage-2026 #primary, .page-template-template-foire-partage-2026 #content { background: none !important; background-color: var(--fdp-page-bg, #c4ff17) !important; } /* Neutraliser les fonds posés par les sections du Template Body Elementor, qui recouvriraient le fond de page */ body.page-template-template-foire-partage-2026 .elementor-location-body .elementor-section, body.page-template-template-foire-partage-2026 .elementor-location-body .elementor-top-section, body.page-template-template-foire-partage-2026 .elementor-location-body .elementor-container, body.page-template-template-foire-partage-2026 .elementor-location-body .elementor-column, body.page-template-template-foire-partage-2026 .elementor-location-body .elementor-widget-wrap, body.page-template-template-foire-partage-2026 .elementor-location-body .elementor-background-overlay, body.page-template-template-foire-partage-2026 .elementor-location-body .wp-block-group.has-background, body.page-template-template-foire-partage-2026 .elementor-location-body [class*="stk-block"], body.page-template-template-foire-partage-2026 .elementor-location-body [class*="stk-container"] { background: none !important; background-color: transparent !important; } /* === Zone de contenu === Les couleurs sont posées SANS !important : elles servent de valeur par défaut, et un réglage fait dans Elementor sur un widget précis reste prioritaire. */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) { --teriBold-bg-color: var(--fdp-bold, #44331A); --teriMedium-bg-color: var(--fdp-medium, #9A8964); --teriLight-bg-color: var(--fdp-light, #C5B489); --page-bg-color: var(--fdp-page-bg, #c4ff17); --font-body: var(--fdp-font-body, "Comfortaa", system-ui, sans-serif); --font-display: var(--fdp-font-display, "Palmer Lake Print", "Comfortaa", system-ui, sans-serif); font-family: var(--font-body) !important; font-size: var(--fdp-fs-body, clamp(1rem, 0.95rem + 0.35vw, 1.375rem)); font-weight: var(--fdp-weight-body, 300); /* theme-base.css pose « body #contenuPage { background-color: var(--chartelight-paper-color) !important } », un blanc cassé qui recouvre le fond de page. On le remplace ici plutôt qu'au chargement en JavaScript : sinon la zone de contenu apparaît blanche le temps que le script s'exécute. */ --chartelight-paper-color: var(--fdp-page-bg, #c4ff17); background-color: var(--fdp-page-bg, #c4ff17) !important; background-image: none !important; color: var(--fdp-bold, #44331A); } /* Titres (Heading Elementor inclus) — familles et interlignage seulement. Le « * » final n'est pas décoratif : dans l'éditeur, le texte d'un titre est souvent enveloppé (, …), et cet enfant serait sinon repris par la règle du corps ci-dessous — le titre s'afficherait en Comfortaa alors que le style calculé sur le h1 annoncerait bien Palmer Lake. */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) :is(h1, h2, h3, h4, h5, h6), body.page-template-template-foire-partage-2026 :is(#contenuPage, main) :is(h1, h2, h3, h4, h5, h6) *, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-heading .elementor-heading-title, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-heading .elementor-heading-title * { font-family: var(--font-display) !important; font-weight: normal !important; /* Palmer Lake n'a qu'une graisse : pas de faux gras */ line-height: var(--fdp-lh-display, 0.85) !important; color: var(--fdp-bold, #44331A); } /* Corps (Text Editor, Dynamic Field, Theme Post Content). Les classes sont enveloppées dans :where(), qui ne compte pas dans la spécificité : sans ça « .elementor * » (2 classes) l'emporterait sur la règle des titres ci-dessus (1 classe) et imposerait Comfortaa aux H1/H2/H3. Le :where(:not(…)) final, lui aussi neutre, met les icônes hors d'atteinte — leur police est portée par la balise, pas héritée. */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main), body.page-template-template-foire-partage-2026 :is(#contenuPage, main) :where(.elementor), body.page-template-template-foire-partage-2026 :is(#contenuPage, main) :where(.elementor) *:where(:not(i, svg, svg *, [class*="fa-"], [class*="eicon"], [class*="icon-"])), body.page-template-template-foire-partage-2026 :is(#contenuPage, main) :where(.elementor-widget-text-editor), body.page-template-template-foire-partage-2026 :is(#contenuPage, main) :where(.elementor-widget-theme-post-content), body.page-template-template-foire-partage-2026 :is(#contenuPage, main) :where(.jet-listing-dynamic-field__content) { font-family: var(--font-body) !important; } /* Lisibilité */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) p, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) li { line-height: var(--fdp-line-height, 1.6); } /* Rendre la main à Elementor sur la couleur du texte courant. theme-base.css pose « #contenuPage p, h5, li { color: … } » : un sélecteur à ID, qui bat les classes qu'Elementor génère (.elementor-element-xxxx) — la couleur choisie dans l'éditeur restait donc sans effet sur les paragraphes. « inherit » ne fixe aucune couleur : il restaure l'héritage, donc le paragraphe prend la couleur posée sur son widget par Elementor. */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) p, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) li, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) h5 { color: inherit; } /* Les liens n'héritent pas de la couleur : le navigateur leur en impose une. On les ramène donc explicitement au brun du texte courant. */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) a { color: var(--fdp-bold, #44331A); } /* =================================================================== ÉDITION 2026 — typographie de la maquette, et rien d'autre. Familles : Palmer Lake Print sur les titres, Comfortaa Light sur le corps. Tailles : H1 135pt / H2 80pt / H3 60pt / P 22pt, transposées en clamp() — la borne haute reproduit la maquette sur grand écran, la borne basse garde la page lisible en mobile. Les couleurs ne sont PAS traitées ici : elles restent celles du thème, en attente de la charte 2026. Chaque niveau est doublé de sa variante Elementor (h1.elementor-heading-title) pour passer devant les tailles imposées par l'Elementor Kit. =================================================================== */ /* H1 — « 7e Foire du Partage » */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) h1, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-heading h1.elementor-heading-title { font-size: var(--fdp-fs-h1, clamp(4.5rem, 1.2rem + 7.5vw, 8.4375rem)) !important; margin: 0.1em 0 !important; } /* H2 — « Célébrons le patrimoine vivant ! » : seul niveau en couleur d'accent. Les descendants sont visés eux aussi (le texte d'un titre est souvent enveloppé dans un par l'éditeur), sinon ils reprendraient le brun de la règle des titres ci-dessus. */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) h2, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-heading h2.elementor-heading-title { font-size: var(--fdp-fs-h2, clamp(2.5rem, 0.9rem + 4.2vw, 5rem)) !important; margin: 0 !important; } body.page-template-template-foire-partage-2026 :is(#contenuPage, main) h2, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) h2 *, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-heading h2.elementor-heading-title, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-heading h2.elementor-heading-title * { color: var(--fdp-accent, #DF4013); } /* H3 — dates */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) h3, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-heading h3.elementor-heading-title { font-size: var(--fdp-fs-h3, clamp(2rem, 0.8rem + 3vw, 3.75rem)) !important; margin: 0 !important; } /* Corps — Comfortaa Light */ body.page-template-template-foire-partage-2026 :is(#contenuPage, main) p, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) li, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-text-editor, body.page-template-template-foire-partage-2026 :is(#contenuPage, main) .elementor-widget-theme-post-content { font-size: var(--fdp-fs-body, clamp(1rem, 0.95rem + 0.35vw, 1.375rem)); font-weight: var(--fdp-weight-body, 300); } /* =================================================================== FILET DÉCORATIF — teinte « brownFDP » ajoutée au composant du site Le composant .separator-svg EXISTE DÉJÀ (CSS global du site) : il gère le pleine largeur (left:50% / margin:20px -50vw / width:100vw), les variantes .double, .triple et .boxed, l'empilement des .layer, et un jeu de teintes déclarées par [data-color] pointant vers /wp-content/uploads/design/. On ne le redéfinit surtout pas — le dupliquer ici cassait son calage. On se contente d'enregistrer une teinte de plus, au même format que les siennes : le SVG fait 1419 × 28 px, contre 1390 × 16 pour les autres, et fonctionne donc pareil en repeat-x / background-size: auto 100%. Usage, en bloc HTML Gutenberg — filet simple :
ou en superposition, comme les autres pages du site :
=================================================================== */ body.page-template-template-foire-partage-2026 .separator-svg[data-color="brownFDP"], body.page-template-template-foire-partage-2026 .layer[data-color="brownFDP"] { background-image: url('../images/fdp-2026/brownFDP@1x.svg'); } /* =================================================================== ÉDITION 2026 — bloc de travail Ajouter ici les règles restantes du design au fur et à mesure. Préfixer tous les sélecteurs par body.page-template-template-foire-partage-2026 pour ne pas fuir sur le reste du site. =================================================================== */