/* * GREEN BAY — socle du thème. * * What lives here: the container rhythm, the section paddings, the few text * styles every pattern shares, the regulatory Interreg band, the sticky header, * the footer floors, the accessibility floor and reduced motion. Nothing * pattern-specific: that lives in assets/css/styles/.css, one file per * pattern, loaded only when its block is on the page. * * Colours: presets and currentColor only. No literal, ever (bun run check, n°3). * Type scale: theme.json (fluid: false, literal clamp() copied from the mockup). */ /* ───────────────────────────────────────────── page ── */ /* `clip` on BOTH: with body alone, documentElement still scrolls sideways when a full-bleed element overflows (design journal, 31/08). */ html { scroll-behavior: smooth; overflow-x: clip; } body { overflow-x: clip; -webkit-font-smoothing: antialiased; } b, strong { font-weight: 700; } /* ───────────────────────────────────── section rhythm ── */ /* A section = a full-width group with .gb-pan; its content sits in an alignwide child (1500 px, the « rive » of the mockup). */ /* An anchor lands under the sticky nav: the offset keeps the section title visible. */ html { scroll-padding-block-start: 6rem; } .gb-pan { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 7.5vw, 7.5rem); } .gb-pan--fin { padding-block: clamp(2rem, 4vw, 3.5rem); } .gb-pan--haut { padding-block: clamp(5rem, 10vw, 10rem); } .gb-pan--nul { padding-block: 0; } /* Sections are JOINED: a full-width ground never shows the page between it and the next one. WordPress puts one blockGap between siblings of the root (header, main, footer) and of the post content; two adjacent full-width blocks cancel it — on the front and in the editor alike, since the editor's root carries .wp-block-post-content too. A section following a plain paragraph keeps its gap (05/09). */ body .wp-site-blocks > * + * { margin-block-start: 0; } :is(.wp-block-post-content, .gb-main) > .alignfull + .alignfull { margin-block-start: 0; } /* Offsets: not every section starts on the same left edge. */ .is-style-gb-decale { margin-inline-start: clamp(0rem, 14vw, 17rem); } .is-style-gb-decale-fin { margin-inline-end: clamp(0rem, 10vw, 12rem); } /* One scale of rules, two values only: structural 22 %, accent = full ink. */ .gb-filet { border-block-start: 3px solid color-mix(in oklab, currentColor 22%, transparent); } /* Hard shadow, never blurred: the only relief admitted in a flat world. */ .is-style-gb-porte, .is-style-gb-porte img { box-shadow: 10px 10px 0 color-mix(in oklab, currentColor 22%, transparent); } .wp-block-image.is-style-gb-porte { box-shadow: none; } /* ───────────────────────────────────────── text styles ── */ /* Titles balance and never overflow a narrow screen. */ h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; margin: 0; } p { margin: 0; } /* Chapô: the lead paragraph. */ .is-style-gb-chapo { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.4; max-inline-size: 40ch; } /* Lyrique: the light second line under a title. */ .is-style-gb-lyrique { font-family: var(--wp--preset--font-family--body); font-weight: 300; text-transform: none; font-size: clamp(1.3rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.026em; } /* Note: secondary text. */ .is-style-gb-note { font-size: 0.9375rem; line-height: 1.5; opacity: 0.78; } /* Étiquette: Martian Mono label (dates, references, counts). Nothing below 0.6875 rem. */ .is-style-gb-cle { font-family: var(--wp--preset--font-family--data); font-size: 0.75rem; font-variation-settings: "wdth" 84; letter-spacing: 0.15em; text-transform: uppercase; font-feature-settings: "tnum"; } /* Index de section: « 01 / 08 », hanging in the margin. */ .is-style-gb-index { font-family: var(--wp--preset--font-family--data); font-size: 0.75rem; font-variation-settings: "wdth" 84; letter-spacing: 0.18em; opacity: 1; font-feature-settings: "tnum"; text-transform: uppercase; } /* Titre de section: index + title side by side. */ .gb-tete { display: flex; align-items: flex-start; gap: clamp(1rem, 2.6vw, 2.6rem); } .gb-tete > .is-style-gb-index { flex: none; padding-block-start: 0.7em; } /* Prose width for running text. */ .is-style-gb-texte { max-inline-size: var(--wp--custom--mesure); } /* ─────────────────────────────────────────── buttons ── */ /* `.wp-block-button > …` : one level above the core's inline `.wp-block-button__link{display:inline-block}`, printed late on long pages (after this sheet) where it won the cascade and dropped the video thumbnail (::before) to 0 — measured by the parity harness on the showcase, 15/09. */ .wp-block-button > .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.6em; min-block-size: 58px; cursor: pointer; transition: background-color 0.18s, color 0.18s, translate 0.18s, box-shadow 0.18s; } /* The shadow is transitioned: its colour must be resolvable — `currentColor` inside color-mix() is not, and Chrome painted the shadow transparent for the whole 0.18 s, then popped it (15/09, design/JOURNAL.md). The couple's ink, --gb-encre, is what the hard shadow meant anyway: on hover the button swaps its own colour, so currentColor had become the GROUND. */ .wp-block-button__link:hover { translate: -3px -3px; box-shadow: 6px 6px 0 color-mix(in oklab, var(--gb-encre) 40%, transparent); } /* Outline variant (native « outline » style) draws with the current ink. */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; } /* On hover it fills with the ink and writes in the ground — both read from the couple's variables, NEVER from currentColor. Two traps met on 08/09, both invisible on screen: « background: currentColor » resolves against the element's OWN computed colour, so a rule that also changes `color` paints the element in the very ink it is about to write with (ground on ground: nothing shows); and setting the ink on `> *` misses a label that is a plain text node — which is exactly what core/button renders. */ .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--gb-encre); color: var(--gb-fond); border-color: var(--gb-encre); } .wp-block-button.is-style-outline .wp-block-button__link:hover > * { color: inherit; } /* Links in running text. */ .wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button) { text-underline-offset: 0.24em; transition: text-decoration-color 0.18s; } /* ───────────────────────────── regulatory Interreg band ── */ /* LEGAL: the Programme logo is never modified and only exists in positive, so its band imposes a light ground whatever the page does (EU 2021/1059 art. 36: non-compliance makes the expense ineligible). Locked here, not left to care. */ .gb-interreg { background: var(--wp--preset--color--blanc) !important; color: var(--wp--preset--color--indigo) !important; } .gb-interreg__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; } /* The integrated block is the main logo of the page (client instruction of 29/07: top left, at least a quarter of the width). It also sets the ceiling for every other logo: the EU emblem must stay ≥ the largest of them (annex IX, reg. 2021/1060), so the partner logos below are sized against this one — never the other way round. */ .gb-interreg__bloc { display: block; inline-size: clamp(330px, 35vw, 540px); block-size: auto; } .gb-interreg__bloc img { display: block; inline-size: 100%; block-size: auto; } /* The EU flag INSIDE that block, measured on the delivered artwork and turned into the one number every other logo of the site is capped by (Pôle Europe, 17/09/2026: « les logos des partenaires doivent être de taille égale ou inférieure à celle du drapeau européen figurant sur le logo Interreg Maritime Green Bay »). interreg-greenbay.svg — viewBox 261.02 × 35.52, the blue rectangle of the emblem x=71.84 y=13.69 w=25.04 h=16.69. The block is laid out by its WIDTH, so the flag's rendered height is 16.69 / 261.02 = 0.06394 of that width, at every viewport. Measured: 21 px at 390, 32 px at 1440, 34 px from 1543 px up. Change the block's width and this follows by itself — which is the point: the two sizes can no longer drift apart, as they did between 08/09 and 16/09. */ :root { --gb-drapeau: calc(clamp(330px, 35vw, 540px) * 0.06394); } /* La rangée de logos insérée DANS une page s'affranchit de ce plafond depuis le 22/09 : ×2, soit 42 px à 390 et 64 px à 1440 (décision de Kevin, maintenue après que la contrainte lui a été rappelée chiffres en main). C'est un écart délibéré à la règle du Pôle Europe du 17/09 — il est isolé ici, dans UNE valeur, pour être annulé d'un geste (`* 1`) ou aligné sur un autre facteur. Le pied de page, lui, reste au drapeau : c'est là que le bloc intégré est le plus proche des logos partenaires. Voir technique.md. */ :root { --gb-logo-page: calc(var(--gb-drapeau) * 2); } /* The sails and the bilingual slogan sit at the right of the band on every page (Pôle Europe, 17/09/2026). They replace the line « Programme Interreg Italie-France Maritime 2021-2027 », which was ours, not the charter's, and which the logo carries anyway. `.gb-slogan` itself is styled with the footer's copy, further down. */ .gb-interreg__slogan { margin-block: 0; } /* Once the band wraps, the slogan falls under the logo: it aligns on the same left edge instead of staying pinned to a right margin it no longer shares. */ @media (max-width: 860px) { .gb-interreg__slogan { justify-content: start; } } /* ─────────────────────────────────────── sticky header ── */ /* The bar carries NO brand: the Pôle Europe forbids the GREEN BAY mark shown on its own, and the integrated Interreg block is the only logo allowed — it lives in the band above (15/09). The bar is therefore the menu, Candidater and the languages, nothing else. */ /* A sticky element only travels inside its own parent's box, and WordPress wraps a template part in
— a box barely taller than the header itself, which pinned the bar for ~120 px of scroll and no further. The wrapper's box is removed so the bar's parent becomes the page: the
element stays in the markup, and with it the banner landmark (RGAA 12.6). Never give this wrapper padding, a background or a margin — with display: contents they are dropped. */ header.wp-block-template-part:has(> .gb-nav) { display: contents; } .gb-nav { position: sticky; inset-block-start: 0; z-index: 3000; } .gb-nav__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: 1rem; } /* Type, letter-spacing and target width of the bar, in one place: the menu row and the language switcher must shrink together or they stop looking like one object. Outside the bar the switcher keeps its full size (the fallbacks below). */ .gb-nav { --gb-nav-taille: 0.6875rem; --gb-nav-espace: 0.08em; --gb-nav-cible: 44px; } .gb-nav .wp-block-navigation { gap: clamp(0.9rem, 2.2vw, 2.2rem); } .gb-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--heading); font-size: var(--gb-nav-taille); font-weight: 700; letter-spacing: var(--gb-nav-espace); text-transform: uppercase; text-decoration: none; padding: 0.6rem 0.2rem; position: relative; } .gb-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.15rem; block-size: 4px; background: currentColor; scale: 0 1; transform-origin: 0 50%; transition: scale 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); } .gb-nav .wp-block-navigation-item__content:hover::after, .gb-nav .current-menu-item > .wp-block-navigation-item__content::after { scale: 1 1; } /* The « Candidater » item is a filled button. */ .gb-nav .gb-nav__cta > .wp-block-navigation-item__content { border: 3px solid currentColor; padding-inline: 1rem; } .gb-nav .gb-nav__cta > .wp-block-navigation-item__content::after { display: none; } /* Language switcher: three native-language codes, comfortable targets (never under the 24 px floor of WCAG 2.2 · 2.5.8), current one inverted. */ .gb-langues { display: flex; gap: 0.3rem; list-style: none; margin: 0; padding: 0; } .gb-langues a, .gb-langues span { display: inline-block; min-inline-size: var(--gb-nav-cible, 44px); min-block-size: 24px; text-align: center; font-family: var(--wp--preset--font-family--heading); font-size: var(--gb-nav-taille, 0.6875rem); font-weight: 700; letter-spacing: var(--gb-nav-espace, 0.08em); text-transform: uppercase; text-decoration: none; padding: 0.6rem 0.2rem; } .gb-langues [aria-current] { background: var(--gb-encre); padding-inline: var(--gb-nav-marque-courante, 0.7rem); } .gb-langues [aria-current] > span { color: var(--gb-fond); } /* Polylang Pro's switcher block gets the same look. */ .gb-langues a[aria-current] > span { color: var(--gb-fond); } /* The menu is the widest object of the page, and between 1080 and 1440 px it used to wrap onto a second row — the bar measured 208 px tall at 1280 and 264 at 1100, with the language switcher dropped under the menu (15/09). Type, letter-spacing, gaps and target widths shrink FLUIDLY over 1100 → 1440 px and reach their full value exactly at 1440, so nothing above 1440 changes and there is no jump at the boundary. Weight, case and family never change: only the scale does. Below 1081 px the bar keeps its full size and its mobile behaviour (rule below). */ @media (min-width: 1081px) and (max-width: 1439.98px) { .gb-nav { --gb-nav-taille: clamp(0.625rem, 0.294vw + 0.4235rem, 0.6875rem); --gb-nav-espace: clamp(0.3px, 0.17vw - 1.57px, 0.88px); --gb-nav-cible: clamp(30px, 4.12vw - 15.3px, 44px); --gb-nav-marque-courante: clamp(0.45rem, 1.18vw - 0.36rem, 0.7rem); } .gb-nav .wp-block-navigation { gap: clamp(0.8rem, 5.55vw - 3.02rem, 2.2rem); } .gb-nav .gb-nav__cta > .wp-block-navigation-item__content { padding-inline: clamp(0.65rem, 1.65vw - 0.48rem, 1rem); } .gb-nav .gb-langues { gap: clamp(0.2rem, 0.47vw - 0.12rem, 0.3rem); } .gb-nav__in > .wp-block-group { gap: clamp(1rem, 2.35vw - 0.61rem, 1.5rem); } } @media (max-width: 1080px) { /* Folded on several rows, a sticky header would eat a third of a phone screen. */ .gb-nav { position: static; } } /* The phone menu — core's overlay, open under 600 px. Until 29/09/2026 the theme never styled it: white panel, labels flush against the left edge of the screen, in all three languages, live on day one. It now takes the bar's own couple (indigo · white), the page's side padding, and 44 px targets. */ /* Core paints it with `.wp-block-navigation:not(.has-background) … .is-menu-open` (white on black): the selector below matches that shape, one class heavier. */ .gb-nav .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--gb-fond); color: var(--gb-encre); padding: clamp(1.25rem, 5vw, 2rem) clamp(1.5rem, 7vw, 2.5rem) 2.5rem; } .gb-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-block-start: 3.5rem; gap: 0.5rem; } .gb-nav .is-menu-open .wp-block-navigation__container { gap: 0.5rem; } .gb-nav .is-menu-open .wp-block-navigation-item__content { font-size: 0.9375rem; min-block-size: 44px; display: inline-flex; align-items: center; } /* Core reaches the submenu through four classes; so do we, or its 32 px indent and 13 px link padding win and the current-page underline starts before the word. */ .gb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { padding: 0 0 0 1.25rem; gap: 0.25rem; } .gb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 0.8125rem; padding-inline: 0; } .gb-nav .is-menu-open .gb-nav__cta { margin-block-start: 1rem; } .gb-nav .is-menu-open .gb-nav__cta > .wp-block-navigation-item__content { padding-inline: 1.25rem; } /* The desktop dropdown of « La certification »: core painted it white on black — black is not in the charter. Same couple as the bar, a hairline to part it from the bar. */ .gb-nav .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background: var(--gb-fond); color: var(--gb-encre); border: 1px solid color-mix(in oklab, var(--gb-encre) 35%, transparent); padding-block: 0.5rem; } .gb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.6rem 1.1rem; } .gb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { inset-inline: 1.1rem; } /* Phone widths only: a `display` here beats core's rule that hides the open button from 600 px, and the burger showed on desktop above the menu (29/09/2026). */ @media (max-width: 599.98px) { .gb-nav .wp-block-navigation__responsive-container-close, .gb-nav .wp-block-navigation__responsive-container-open { color: currentColor; min-inline-size: 44px; min-block-size: 44px; display: inline-grid; place-items: center; } } /* ───────────────────────────────────────────── footer ── */ .gb-pied__haut { display: grid; grid-template-columns: minmax(19rem, 1.1fr) 2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } /* The indigo floor no longer carries an image: the GREEN BAY mark shown on its own is forbidden (Pôle Europe, 15/09), so only the co-financing sentence remains here. */ /* La mention est bien plus courte que les trois colonnes de liens : alignée en haut, elle laissait un grand vide sous elle et donnait un étage bancal (Kevin, 22/09). Elle se centre donc dans sa cellule — les colonnes, elles, restent en haut et continuent de fixer la hauteur de l'étage. Sous 760 px la grille passe à une colonne, chaque élément occupe sa propre rangée : la règle y est sans effet. */ .gb-pied__marque { display: grid; gap: 0.7rem; justify-items: start; align-self: center; } /* The co-financing mention, in italic and in both languages since 21/09/2026 (Pôle Europe). One sentence said twice: the two lines sit close, and neither is emphasised over the other — the bold we used to put on the programme and the amount is gone. Its size is its own since 22/09 (Marianne: « je trouve la mention un peu grosse ») — 1 rem, the calibre of the footer links, instead of the chapô's 24 px at 1440. The measure is restated with it: `is-style-gb-chapo` caps at 40ch, and `ch` follows the font size, so shrinking the type alone would have narrowed the paragraph into a column. 52ch at 1 rem keeps the block the width it has today — in practice the footer's left column is what governs. */ .gb-pied__marque .gb-cofinancement { margin-block: 0; font-style: italic; font-size: 1rem; max-inline-size: 52ch; } .gb-pied__cols { gap: clamp(1.5rem, 3vw, 3rem); } /* Le cœur pose un blockGap de 24 px en marge HAUTE des colonnes — sa règle `.wp-container-… > *` l'emporte sur le `.gb-pied__haut > *` plus bas, à spécificité égale mais écrite avant. Cette marge entre dans la piste de la grille : la mention, centrée, se centrait donc sur 244 px au lieu de 220 et paraissait 12 px trop haute. Sélecteur à deux classes pour repasser devant le cœur (22/09). */ .gb-pied__haut > .gb-pied__cols { margin-block-start: 0; } .gb-pied__haut > *, .gb-pied__cols > * { margin-block-start: 0; } .gb-pied__cols .wp-block-heading { font-size: 0.75rem; font-family: var(--wp--preset--font-family--data); letter-spacing: 0.15em; opacity: 0.85; margin-block-end: 0.9rem; text-transform: uppercase; font-weight: 500; } .gb-pied__cols .wp-block-navigation { gap: 0.55rem; } .gb-pied__cols .wp-block-navigation-item__content { text-decoration: none; display: inline-block; min-block-size: 24px; } .gb-pied__cols .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 0.22em; } /* The integrated Interreg block opens the white floor, on a row of its own above the partners and the slogan: it is the only admitted GREEN BAY logo (Pôle Europe, 15/09), in its standard colour version on white, with no plate around it. Same width as the header's block on purpose — it is the ceiling every partner logo is measured against (EU emblem ≥ the largest of them, annex IX of reg. 2021/1060; journal, 08/09). */ .gb-pied__interreg { display: block; inline-size: clamp(330px, 35vw, 540px); padding-block-end: var(--wp--preset--spacing--50); } .gb-pied__interreg img { display: block; inline-size: 100%; block-size: auto; } /* The space under the logo is a PADDING on the link, with the group's block gap set to zero in the pattern: padding lays out the same on the front and in the canvas. A margin on a sibling selector was front-only, and a flex gap mis-sized the HTML block wrapper in the canvas at mobile width (15/09). */ .gb-pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); } .gb-partenaires { display: flex; flex-wrap: wrap; align-items: center; /* L'écart suit le plafond : à 32 px de haut, un blanc de 56 px faisait quatre logos isolés au lieu d'une rangée. 1,25 × la hauteur les tient ensemble (21/09). */ gap: calc(var(--gb-drapeau) * 1.25); list-style: none; margin: 0; padding: 0; } /* Secondary logos, capped at the EU flag of the integrated block — --gb-drapeau, defined with the band at the top of this file. The four SVG were re-cropped on 21/09/2026 so their viewBox hugs the artwork: they used to carry 38 to 51 % of empty margin, which would have wasted half of an already small allowance. Box = drawing, so this height IS the height the Pôle Europe measures. */ .gb-partenaires img { display: block; block-size: var(--gb-drapeau); inline-size: auto; } .gb-pied__mentions { display: grid; gap: 1.2rem; justify-items: end; text-align: end; margin-inline-start: auto; } /* The slogan: mandatory in French AND Italian on every language version, EU blue, Montserrat. */ /* Two lines, one per language, the sails set against both: the slogan gives the partner logos the width they need instead of running across the whole row. */ .gb-slogan { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; column-gap: 0.9rem; row-gap: 0.35rem; font-family: var(--wp--preset--font-family--slogan); /* Never below 8 pt — the Programme's own floor (Pôle Europe, 17/09/2026). 8 pt is 10.67 px; the floor below is 11 px, and 0.8125rem renders at 13 px (9.75 pt) as long as the root size is the default. The max() keeps the rule true even if a visitor enlarges or shrinks the base text. */ font-size: max(0.8125rem, 11px); line-height: 1.3; color: var(--wp--custom--interreg--ue) !important; } .gb-slogan img { grid-area: 1 / 1 / 3 / 2; } /* Italian on top, French below, and BOTH in the same typographic treatment — the two languages of the Programme carry equal weight (Pôle Europe, 15/09). */ .gb-slogan [lang="it"] { grid-area: 1 / 2; } .gb-slogan [lang="fr"] { grid-area: 2 / 2; } .gb-slogan [lang] { font-weight: 700; font-style: normal; color: inherit; } .gb-slogan img { inline-size: 3.4rem; block-size: auto; } @media (max-width: 760px) { .gb-pied__haut { grid-template-columns: 1fr; } .gb-pied__mentions { justify-items: start; text-align: start; margin-inline-start: 0; } .gb-slogan { justify-content: start; } /* One column: the integrated block takes its whole width, capped at its own size. */ .gb-pied__interreg { inline-size: min(100%, 540px); } } /* ──────────────────────────── the ground and ink variables ── */ /* Each section variation names its own couple: --gb-fond its ground, --gb-encre its ink. An inverted element (outline button on hover, current language, current page number) reads BOTH from here instead of the [data-inverse] mechanism of the mockup. Why the ink is a variable and not currentColor: an element that fills itself with `background: currentColor` while changing its own `color` resolves currentColor against the new colour, and paints ground on ground — invisible, and invisible in review too, since nothing in the rule looks wrong. */ .is-style-couple-blanc-indigo { --gb-fond: var(--wp--preset--color--blanc); --gb-encre: var(--wp--preset--color--indigo); } .is-style-couple-blanc-bleu { --gb-fond: var(--wp--preset--color--blanc); --gb-encre: var(--wp--preset--color--bleu); } .is-style-couple-indigo-blanc { --gb-fond: var(--wp--preset--color--indigo); --gb-encre: var(--wp--preset--color--blanc); } .is-style-couple-indigo-chartreuse { --gb-fond: var(--wp--preset--color--indigo); --gb-encre: var(--wp--preset--color--chartreuse); } .is-style-couple-indigo-cyan { --gb-fond: var(--wp--preset--color--indigo); --gb-encre: var(--wp--preset--color--cyan); } .is-style-couple-glace-indigo { --gb-fond: var(--wp--preset--color--glace); --gb-encre: var(--wp--preset--color--indigo); } .is-style-couple-cyan-indigo { --gb-fond: var(--wp--preset--color--cyan); --gb-encre: var(--wp--preset--color--indigo); } .is-style-couple-cyan-clair-indigo { --gb-fond: var(--wp--preset--color--cyan-clair); --gb-encre: var(--wp--preset--color--indigo); } .is-style-couple-chartreuse-indigo { --gb-fond: var(--wp--preset--color--chartreuse); --gb-encre: var(--wp--preset--color--indigo); } .is-style-couple-chartreuse-clair-indigo { --gb-fond: var(--wp--preset--color--chartreuse-clair); --gb-encre: var(--wp--preset--color--indigo); } .is-style-couple-bleu-blanc { --gb-fond: var(--wp--preset--color--bleu); --gb-encre: var(--wp--preset--color--blanc); } :root { --gb-fond: var(--wp--preset--color--blanc); --gb-encre: var(--wp--preset--color--indigo); } /* ───────────────────────────── accessibility floor ── */ /* Sub-menu toggles of the navigation block: 24 px targets (WCAG 2.2 · 2.5.8). */ .wp-block-navigation-submenu__toggle { min-inline-size: 24px; min-block-size: 24px; } /* Opacity floor for text: every semi-transparent label keeps ≥ 4.5:1 on its ground (RGAA). Nothing below .78. */ :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } /* WCAG 2.2 · 2.5.8: every pointer target is at least 24 × 24 px. */ .wp-block-post-content a:not([class]), .gb-pied__cols a, button { display: inline-block; min-block-size: 24px; } /* Demo content banner (preprod only). */ .gb-bandeau-demo { background: var(--wp--preset--color--chartreuse); color: var(--wp--preset--color--indigo); font-family: var(--wp--preset--font-family--data); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0.6rem 1rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Mobile floor: « ENVIRONNEMENTALE » (16 Unbounded capitals) must fit one line at 390 px. */ @media (max-width: 430px) { h1 { font-size: 1.6rem; } h2 { font-size: 1.5rem; } }