/* ========================================================================== GovXRay — Humane UI layer · "4 · 2 · 3" 4 type sizes · 2 weights · 3 radii · 1 accent + 3 semantics Load LAST in . Spec: docs/HUMANE_UI_AUDIT_APPLE_2026-09-09.md Principle: a small normalizer that snaps the whole page to the scale, then a short component section that only touches colour and shape. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* type: exactly four sizes, two weights */ --gx-type:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Helvetica Neue","Segoe UI",ui-sans-serif,sans-serif; --fs-meta:13px; /* captions, table cells, chips, footers */ --fs-body:15px; /* everything else */ --fs-head:22px; /* section titles, KPI values */ --fs-title:42px; /* page title / home hero */ --fw-text:400;--fw-strong:600; --lh-text:1.45;--lh-head:1.15; /* shape: exactly three radii */ --r-field:12px;--r-card:20px;--r-pill:999px; --gx-radius-sm:var(--r-field);--gx-radius-md:var(--r-field); --gx-radius-lg:var(--r-card);--gx-radius-xl:var(--r-card);--gx-radius-2xl:var(--r-card); --gx-radius-pill:var(--r-pill);--gx-radius-flag:6px; --gx-radius-ctl:var(--r-field);--gx-radius-card:var(--r-card);--gx-radius-chapter:var(--r-card); --gx-ease:220ms cubic-bezier(.25,.1,.25,1); } /* Derived tokens must be declared on BOTH theme scopes: a custom property resolves its var() references where it is *declared*, so a :root-only color-mix(var(--gx-text)) would freeze the dark text colour and paint white-on-white bubbles in light mode. */ :root,body.light-theme{ /* identity: colour is the ledger — five hues, five fixed meanings */ --c-in:var(--gx-accent); /* money in · brand */ --c-out:var(--gx-warning); /* money out */ --c-own:var(--gx-info); /* what they own */ --c-owe:var(--gx-owe); /* what they owe */ --c-rule:var(--gx-rule); /* rules · method · tax */ --c-in-soft:color-mix(in srgb,var(--c-in) 14%,transparent); /* orange never appears as a wash: a 14 % orange tint reads yellow on white */ --c-out-soft:var(--gx-neutral-soft); --c-own-soft:color-mix(in srgb,var(--c-own) 12%,transparent); --c-owe-soft:color-mix(in srgb,var(--c-owe) 12%,transparent); --c-rule-soft:color-mix(in srgb,var(--c-rule) 12%,transparent); --gx-spectrum:linear-gradient(90deg,var(--c-in),var(--c-own),var(--c-rule),var(--c-owe),var(--c-out)); --gx-surf:var(--gx-surface);--gx-surf2:var(--gx-surface-subtle); --gx-fill-primary:var(--gx-accent);--gx-ink-positive:var(--gx-accent-ink); --gx-primary-soft:color-mix(in srgb,var(--gx-accent) 14%,transparent); --gx-ink-info:var(--gx-info);--gx-info-soft:color-mix(in srgb,var(--gx-info) 12%,transparent); --gx-fill-warning:var(--gx-warning);--gx-warning-soft:var(--gx-neutral-soft); --gx-danger-soft:color-mix(in srgb,var(--gx-danger) 12%,transparent); --gx-neutral-soft:color-mix(in srgb,var(--gx-text) 9%,transparent); --gx-sem-ok:var(--gx-accent-ink);--gx-sem-bad:var(--gx-ink-danger); --gx-sem-warn:var(--gx-ink-warning);--gx-sem-miss:var(--gx-text-secondary); --gx-focus:var(--gx-info);--gx-ui-focus:var(--gx-info); } /* dark by default at :root (gx17 convention — composed vars depend on it) */ :root{ --gx-page:#1C1C1E;--gx-surface:#2C2C2E;--gx-surface-raised:#3A3A3C; --gx-surface-subtle:#242426;--gx-surface-sunken:#161618; --gx-text:#F5F5F7;--gx-text-secondary:#AEAEB2;--gx-text-muted:#8E8E93; --gx-border:rgba(84,84,88,.55);--gx-border-strong:rgba(84,84,88,.9); --gx-accent:#30D158;--gx-accent-ink:#30D158; --gx-info:#0A84FF;--gx-warning:#FF9F0A;--gx-danger:#FF453A; --gx-owe:#FF375F;--gx-rule:#BF5AF2; --gx-ink-primary:var(--gx-accent);--gx-ink-primary-hover:#5CE07A; --gx-ink-warning:#FFB340;--gx-ink-danger:#FF6961; --gx-fill-liability:#636366;--gx-ink-liability:#C7C7CC; --gx-chart-1:#40C8E0;--gx-chart-2:#FF9F0A;--gx-chart-3:#30D158; --gx-chart-4:#FF375F;--gx-chart-5:#5E5CE6;--gx-chart-6:#0A84FF;--gx-chart-7:#64D2FF; --gx-shadow-sm:none;--gx-shadow-md:none; } body.light-theme{ /* neutral canvas (systemGroupedBackground) — no warm/yellow cast */ --gx-page:#F2F2F7;--gx-surface:#FFFFFF;--gx-surface-raised:#FFFFFF; --gx-surface-subtle:#F7F7FA;--gx-surface-sunken:#E5E5EA; --gx-text:#1D1D1F;--gx-text-secondary:#6E6E73;--gx-text-muted:#8E8E93; --gx-border:rgba(60,60,67,.12);--gx-border-strong:rgba(60,60,67,.24); --gx-accent:#34C759;--gx-accent-ink:#1E8E3E; --gx-info:#007AFF;--gx-warning:#FF9500;--gx-danger:#FF3B30; --gx-owe:#FF2D55;--gx-rule:#AF52DE; --gx-ink-primary:var(--gx-accent-ink);--gx-ink-primary-hover:#187436; --gx-ink-warning:#B25E00;--gx-ink-danger:#C7271C; --gx-fill-liability:#8E8E93;--gx-ink-liability:#3A3A3C; --gx-chart-1:#30B0C7;--gx-chart-2:#FF9500;--gx-chart-3:#34C759; --gx-chart-4:#FF2D55;--gx-chart-5:#5856D6;--gx-chart-6:#007AFF;--gx-chart-7:#5AC8FA; --gx-shadow-sm:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.05); --gx-shadow-md:0 2px 4px rgba(0,0,0,.05),0 14px 36px rgba(0,0,0,.07); } /* ---------- 2. Normalizer: one font, four sizes, two weights ---------- */ html body,html body.light-theme{ background:var(--gx-page)!important;color:var(--gx-text)!important; font-family:var(--gx-type)!important;font-size:var(--fs-body);line-height:var(--lh-text); -webkit-font-smoothing:antialiased; } /* Everything on the page snaps to body size / text weight, no tracking, no caps. Plotly SVG text is left alone (it sizes its own ticks). */ /* :where() keeps this at zero specificity so the size/weight lists below win. */ body :where(*:not(svg):not(svg *):not([class^="fa-"]):not([class*=" fa-"])){ font-family:var(--gx-type)!important; font-size:var(--fs-body)!important; font-weight:var(--fw-text)!important; letter-spacing:0!important;text-transform:none!important; line-height:var(--lh-text)!important; } /* meta size: captions, cells, chips, footers, eyebrows */ small,sub,sup,figcaption,caption,time,footer,footer *, th,td,td *,th *, .gx-note,.gx-note *,.gx-hd,.gx-hd *,.gx-ki,.gx-ki *,.gx-hl,.gx-hb,.gx-hq, .gx-lg,.gx-lg *,.gx-src-meta,.gx-src-kind,.gx-src-off,.gx-src-n, .gx-module-eyebrow,.gx-page-eyebrow,.gx-chapter-num,.gx-table-hint,.gx-scope-k,.gx-toc17 .lbl, .gx-kpi-l,.gx-kpi-u,.gx-infra-kpi-l,.gx-cmp-excl-date,.gx-home-trust,.city-subtitle,.city-subtitle *, nav[aria-label*="il d"],nav[aria-label*="il d"] *,.gx-crumb,.gx-crumb *, .gx-dd-badge,.gx-kpi-badge,.gx-ratio-badge,.gx-qchip,.gx-qchip *,.gx-paused-chip,.gx-recent-chip, .gx-cmp-dock-chip,.gx-flag-chip,.gx-ch-badge,.gx-page-status,.gx-status,.gx-status *, [class*="badge"],[class*="chip"],.gx-toc17 a,.gx-map-caption,.gx-home-stage figcaption, #omnibar-trigger span{ font-size:var(--fs-meta)!important; } /* heading size: section titles + KPI values */ h2,h2 *,.gx-kpi-gh,.gx-kpi b,.gx-kpi-v,.gx-hub-ad-tot,.gx-infra-kpi-v,.gx-pal-v, .gx-home-cta-title,.city-name,.gx-city-banner h1,.gx-city-banner h1 *{ font-size:var(--fs-head)!important;line-height:var(--lh-head)!important;letter-spacing:-.01em!important; } /* title size: one per page (home hero uses .gx-home-h1, often outside
) */ main h1,main h1 *,.gx-page-header h1,.gx-home-title,.gx-home-title *, .gx-home-h1,.gx-home-h1 *{ font-size:var(--fs-title)!important;line-height:var(--lh-head)!important;letter-spacing:-.02em!important; } /* Actifs / Dettes: a bit larger than meta chips */ .gx-hub-ad-k{font-size:16px!important;font-weight:var(--fw-strong)!important;letter-spacing:-.01em!important} /* Finances combinées: captions under Dépenses / Recettes */ .gx-hub-flux-lab{font-size:var(--fs-body)!important;font-weight:var(--fw-strong)!important} .gx-hub-flux-why,.gx-hub-flux-why *{font-size:14px!important;font-weight:var(--fw-text)!important; color:var(--gx-text-secondary)!important;white-space:normal!important} /* Closing line above a bar: meta, never a second heading */ .gx-fund-total,.gx-fund-total *{font-size:var(--fs-meta)!important;line-height:var(--lh-text)!important} .gx-fund-total b{font-size:var(--fs-body)!important;font-weight:var(--fw-strong)!important} /* strong weight: headings, emphasis, controls, active states, table heads */ h1,h1 *,h2,h2 *,h3,h3 *,h4,h4 *,b,strong,th,dt,summary,legend,#home-link,#home-link *,.gx-x-mark, button,.gx-tb-btn,.gx-zone,.gx-map-mode,.gx-home-view-btn,.gx-cmp-s,.gx-cmp-addc,.gx-toc17 a, .gx-kpi b,.gx-kpi-v,.gx-hub-ad-tot,.gx-infra-kpi-v,.gx-pal-v,.gx-hub-eq b, [class*="badge"],[class*="chip"],.gx-status-lab,.gx-scope-v,.gx-home-cta-title, nav[aria-current],[aria-current="page"],.is-on,[aria-pressed="true"],.num b,td.num b{ font-weight:var(--fw-strong)!important; } /* numerals: same family, tabular */ .num,td.num,th.num,[data-v],.gx-kpi b,.gx-hub-ad-tot,.gx-hub-eq,.gx-fund-total,.gx-rk{ font-variant-numeric:tabular-nums; } a{color:var(--gx-info)} ::selection{background:color-mix(in srgb,var(--gx-accent) 28%,transparent)} :focus-visible{outline:2px solid var(--gx-focus)!important;outline-offset:3px!important} .gx-page-lead,.gx-home-lead,.gx-cmp-cov,main section>p,main article>p{max-width:72ch;color:var(--gx-text-secondary)} .gx-page-eyebrow,.gx-module-eyebrow,.gx-chapter-num,.gx-table-hint,.gx-scope-k,.gx-toc17 .lbl, .gx-hl,.gx-kpi-l,.gx-kpi-u,.gx-hub-ad-k,.gx-crumb,.gx-crumb a,nav[aria-label*="il d"] a, .gx-home-trust,footer,footer *{color:var(--gx-text-secondary)!important} /* ---------- 3. Shape normalizer: three radii ---------- */ /* fields & small containers */ input,select,textarea,details,summary,.gx-scope-band,.gx-toc17,.gx-note,.gx-hub-ad-note,.gx-cmp-warn, .gx-fresh-warn,.gx-cmp-excl,.gx-facts-sense,.gx-fb-recall,.gx-flux-piste, [style*="border-radius:2px"],[style*="border-radius:3px"],[style*="border-radius:4px"],[style*="border-radius:5px"], [style*="border-radius:6px"],[style*="border-radius:8px"],[style*="border-radius:10px"],[style*="border-radius:14px"], [style*="border-radius: 4px"],[style*="border-radius: 6px"],[style*="border-radius: 8px"]{ border-radius:var(--r-field)!important; } /* cards & sheets */ .gx-hub-ad,.gx-home-card,.gx-home-cta,.gx-chapter,.gx-card,.gx-kpi,.gx-facts,.gx-profil, .gx-city-banner,.gx-home-stage,main article,main section.gx-section, [style*="border-radius:12px"],[style*="border-radius:16px"],[style*="border-radius:18px"],[style*="border-radius:24px"]{ border-radius:var(--r-card)!important; } /* capsules: every button, chip, bar, search */ button:where(:not(#gx-stack-app *)),.gx-tb-btn,.gx-zone,.gx-map-mode,.gx-home-view-btn,.gx-home-regions button,.gx-home-regions a, .gx-cmp-s,.gx-cmp-addc,.gx-cmp-tabs a,.gx-toc17 a,#gx-currency,#omnibar-trigger,#omnibar-trigger span, .gx-home-search,.gx-home-search input,.gx-home-search-pill,.gx-stack, [class*="badge"],[class*="chip"],.gx-status{ border-radius:var(--r-pill)!important; } img.gx-flag,img.gx-flag-s,img.gx-flag-v{border-radius:var(--gx-radius-flag)!important} /* ---------- 4. Surfaces: borderless, tonal, equal ---------- */ .gx-hub-ad,.gx-home-card,.gx-home-cta,.gx-chapter,.gx-card,.gx-kpi,.gx-facts,.gx-profil, .gx-home-stage,main article,main section.gx-section, [style*="border: 1px solid #333"],[style*="border:1px solid #333"], [style*="border: 1px solid #2C2C2C"],[style*="border:1px solid #2C2C2C"]{ border-color:transparent!important;background:var(--gx-surface)!important;box-shadow:var(--gx-shadow-sm); } body:not(.light-theme) .gx-kpi,body:not(.light-theme) .gx-hub-ad,body:not(.light-theme) .gx-home-cta{ background:var(--gx-surface-raised)!important; } /* a card inside a card carries no frame of its own */ .gx-city-intro .gx-city-facts,.gx-city-facts{border:0!important;box-shadow:none!important;background:transparent!important} /* one card padding, equal heights in every row */ .gx-kpi,.gx-hub-ad,.gx-home-cta,.gx-chapter,main section.gx-chapter,.gx-card{padding:20px!important;height:100%} .gx-kpi-row,.gx-home-primary-grid,.gx-kpi-grid-responsive{align-items:stretch!important;gap:12px!important} hr,.gx-sep,.gx-page-header,.gx-lg a{border-color:var(--gx-border)!important} .gx-topbar-v2,nav.gx-sections-sticky,.gx-toc17{ background:color-mix(in srgb,var(--gx-page) 82%,transparent)!important;border:0!important; backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); } .gx-topbar-v2,nav.gx-sections-sticky{border-bottom:1px solid var(--gx-border)!important} /* one notice shape; §7 gives each its ledger colour */ .gx-scope-band,.gx-note,.gx-hub-ad-note,.gx-facts-sense,.gx-fb-recall,.gx-qchip, .gx-cmp-warn,.gx-fresh-warn,.gx-cmp-excl,[class*="warn"],[class*="danger"],[class*="error"]{ border:0!important;background:var(--gx-neutral-soft)!important;color:var(--gx-text)!important;padding:12px 16px!important; } /* Barres recettes/dépenses: même épaisseur que le comparateur. */ .gx-stack{height:36px!important;background:var(--gx-neutral-soft)!important; border-radius:6px!important} .gx-stack a{height:36px!important;border-radius:0!important} [fill="#4ade80"],[fill="#4ADE80"],[stroke="#4ade80"],[stroke="#4ADE80"]{fill:var(--gx-accent);stroke:#fff} .js-plotly-plot .modebar{opacity:.4}.js-plotly-plot .modebar:hover{opacity:1} .js-plotly-plot .modebar-btn path{fill:var(--gx-text-secondary)!important} .gx-home-cta-icon i,.gx-tb-btn i{opacity:.9} /* links: one colour — the accent. A filled action pill is not a link colour: green ink on a green fill is an invisible label, so the two home-picker buttons keep their own contrast. */ a:not(.gx-home-pick-open):not(.gx-home-pick-cmp), .gx-cmp-excl a, main a:not(.gx-home-pick-open):not(.gx-home-pick-cmp){color:var(--gx-accent-ink)!important} html body .gx-home-pick-open{background:var(--gx-accent-ink)!important;color:#fff!important} html body .gx-home-pick-cmp{background:var(--gx-neutral-soft)!important;color:var(--gx-text)!important} html body .gx-home-pick{background:var(--gx-surface)!important} html body .gx-home-pick-meta{color:var(--gx-text)!important} html body .gx-home-pick-meta span{color:var(--gx-text-secondary)!important} /* the flag stays a watermark on one side, never a wash under the text */ html body .gx-home-pick-bg{opacity:.10!important;inset:0 0 0 auto!important;width:46%!important} .gx-cmp-warn b,.gx-fresh-warn b,[class*="warn"] b,[class*="danger"] b,[class*="error"] b{color:var(--gx-text)!important} /* ---------- 5. Bubbles: TWO roles, ONE tint, ONE gap ---------- control = you can press it → 36px capsule (buttons, tabs, TOC, search, currency) label = it tells you something → 24px capsule (badges, status, legend items) Same tint, same radius, same type; only the height says "press me" vs "read me". */ button:where(:not(#gx-stack-app *)),.gx-tb-btn,.gx-zone,.gx-map-mode,.gx-home-view-btn,.gx-home-regions button,.gx-home-regions a, .gx-cmp-s,.gx-cmp-addc,.gx-cmp-tabs a,nav[aria-label*="omparaison"] a,.gx-toc17 a,.gx-toc17 .lbl, #gx-currency,#omnibar-trigger,#theme-toggle-btn,#share-btn,#gx-nav-sheet-x,.gx-tgrp a,.gx-tgrp button, .gx-tb-right>div[style*="border-radius"], [class*="badge"],[class*="chip"],.gx-status-lab,summary.gx-status-lab,.gx-lg a{ display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important; box-sizing:border-box!important;height:36px!important;min-height:36px!important;max-height:36px!important; padding:0 14px!important;margin:0!important; border:0!important;border-radius:var(--r-pill)!important;box-shadow:none!important; font-size:var(--fs-meta)!important;font-weight:var(--fw-strong)!important;line-height:1!important; white-space:nowrap!important;text-decoration:none!important; background:var(--gx-neutral-soft)!important;color:var(--gx-text)!important; transition:background-color var(--gx-ease),color var(--gx-ease),transform var(--gx-ease)!important; } /* Compare subject pills: a bit larger */ .gx-cmp-s{height:44px!important;min-height:44px!important;max-height:44px!important; padding:0 18px!important;font-size:15px!important} /* Legend chips: allow wrap; never crush multi-line .gx-lgi */ .gx-lgi,.gx-cmp-leg .gx-lgi,button.gx-lgi{ display:inline-flex!important;align-items:center!important;justify-content:flex-start!important; height:auto!important;min-height:28px!important;max-height:none!important; white-space:normal!important;padding:6px 10px!important;margin:0!important; border-radius:var(--r-field)!important;line-height:1.25!important; } .gx-cmp-leg,.gx-lgrow{display:flex!important;flex-wrap:wrap!important;gap:10px!important; align-items:flex-start!important;max-width:100%!important} /* labels: same capsule, shorter */ [class*="badge"],[class*="chip"],.gx-status-lab,summary.gx-status-lab,.gx-lg a{ height:24px!important;min-height:24px!important;max-height:24px!important;padding:0 10px!important; vertical-align:middle!important; } /* an is never a bubble: flags named *-chip / *-flag keep their own size, no padding, no tint */ html:root body img[class*="chip"],html:root body img[class*="badge"],html:root body img[class*="flag"]{ display:inline-block!important;padding:0!important;margin:0!important;background:transparent!important; height:16px!important;min-height:0!important;max-height:none!important;width:24px!important; border-radius:4px!important;object-fit:cover!important;vertical-align:middle!important;box-shadow:0 0 0 1px var(--gx-border) inset} html:root body .gx-city-banner img[class*="flag"]{width:42px!important;height:28px!important;border-radius:6px!important} html:root body img.gx-flag-s,html:root body img.gx-flag-v{width:22px!important;height:15px!important;border-radius:3px!important} .gx-kpi-l{display:flex!important;align-items:center!important;gap:8px!important} /*
is only a wrapper: no capsule of its own */ .gx-status{display:inline-block!important;background:transparent!important;padding:0!important;border:0!important; vertical-align:middle!important} .gx-status-why{display:block;font-size:var(--fs-meta)!important;color:var(--gx-text-secondary)!important; white-space:normal!important;margin:6px 0 0!important;max-width:40ch} /* the profile score is a two-line block, not a capsule */ .gx-score-chip,.gx-score-chip>span{ display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important; height:auto!important;min-height:0!important;max-height:none!important;white-space:normal!important; border-radius:var(--r-field)!important;padding:10px 14px!important;text-align:left!important; } .gx-score-chip>span{padding:0!important;background:transparent!important} .gx-score-chip small{font-weight:var(--fw-text)!important;color:var(--gx-text-secondary)!important} .gx-score-why{display:block!important;flex:1 1 100%!important;white-space:normal!important; font-size:var(--fs-meta)!important;font-weight:var(--fw-text)!important;line-height:var(--lh-text)!important; color:var(--gx-text-secondary)!important;margin:0!important;max-width:36ch} .gx-toc17 .lbl{background:transparent!important;padding:0 6px!important;color:var(--gx-text-secondary)!important;font-weight:var(--fw-text)!important} .gx-lg a{font-weight:var(--fw-text)!important} .gx-lg a b{font-weight:var(--fw-strong)!important;font-size:inherit!important} .gx-lg a i{width:8px;height:8px;border-radius:50%;flex:0 0 auto} button:where(:not(#gx-stack-app *)):hover,.gx-zone:hover,.gx-map-mode:hover,.gx-home-view-btn:hover,.gx-home-regions button:hover, .gx-home-regions a:hover,.gx-cmp-s:hover,.gx-cmp-tabs a:hover,.gx-toc17 a:hover,.gx-lg a:hover{ background:color-mix(in srgb,var(--gx-text) 11%,transparent)!important; } button:where(:not(#gx-stack-app *)):active,.gx-zone:active,.gx-map-mode:active,.gx-cmp-s:active{transform:scale(.98)} /* the one accent: active state only */ html body .gx-zone[aria-pressed="true"],html body .gx-map-mode.is-on,html body .gx-home-view-btn.is-on, html body .gx-home-regions .is-on,html body .gx-cmp-s.is-on,html body .gx-cmp-s[aria-pressed="true"], html body .gx-cmp-s.is-selected,html body .gx-cmp-tabs a[aria-current="page"], html body nav[aria-label*="omparaison"] a[aria-current="page"],html body .gx-toc17 a[aria-current="true"]{ background:var(--gx-accent)!important;color:#fff!important; } /* icon-only chrome buttons are circles of the same height */ #theme-toggle-btn,#share-btn,#gx-nav-sheet-x,.gx-tb-btn{width:36px!important;padding:0!important} #omnibar-trigger{width:320px!important;justify-content:flex-start!important;font-weight:var(--fw-text)!important;color:var(--gx-text-secondary)!important} #omnibar-trigger span:last-child{margin-left:auto!important;background:transparent!important;border:0!important;padding:0!important} /* the select lives inside its wrapper bubble */ .gx-tb-right>div[style*="border-radius"] #gx-currency{ background:transparent!important;border:0!important;padding:0!important;min-height:0!important;height:auto!important; font:inherit!important;color:inherit!important;cursor:pointer;appearance:none!important;-webkit-appearance:none!important} .gx-tb-right>div[style*="border-radius"] label:not(.sr-only){ font:inherit!important;font-size:var(--fs-meta)!important;font-weight:var(--fw-strong)!important; line-height:1!important;margin:0!important;color:var(--gx-text-secondary)!important} .gx-tb-right>div[style*="border-radius"]::after{content:'▾';color:var(--gx-text-secondary)} /* the hero search is a bubble too */ .gx-home-search,.gx-home-search input,.gx-home-search-pill{ height:44px!important;min-height:44px!important;border:0!important;border-radius:var(--r-pill)!important; background:var(--gx-surface)!important;box-shadow:var(--gx-shadow-sm)!important; } /* every bubble container: same gap, wrap, aligned — 12px min so 36–44px pills breathe */ .gx-home-map-modes,.gx-home-regions,.gx-cmp-sujet,.gx-toc17,.gx-lg,.gx-tgrp,.gx-paused-list, .gx-cmp-tabs,nav[aria-label*="omparaison"],.gx-tb-right,.gx-tb-right>div{ display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:center!important; width:auto!important;max-width:100%!important;margin:0 0 12px!important;text-align:left!important; } .gx-home-map-modes,.gx-home-regions{justify-content:center!important;margin:0 auto 12px!important} .gx-tb-right,.gx-tb-right>div{margin:0!important} /* nav tabs: text only, one underline */ nav.gx-sections-sticky a,nav.gx-sections-sticky summary,nav.gx-sections-sticky span[aria-current]{ color:var(--gx-text-secondary)!important;border-bottom:0!important;padding:8px 2px!important; } nav.gx-sections-sticky summary:not([aria-current]){font-weight:var(--fw-text)!important} nav.gx-sections-sticky span[aria-current="page"],nav.gx-sections-sticky a[aria-current="page"]{ color:var(--gx-text)!important;box-shadow:inset 0 -2px 0 var(--gx-accent)!important; } .gx-home-cta-icon{width:36px!important;height:36px!important;border-radius:var(--r-pill)!important; background:var(--gx-neutral-soft)!important;color:var(--gx-text)!important} /* ---------- 7. Identity: colour is the ledger ---------- Same shapes, same sizes as above. This section only adds colour, and every colour means the same thing everywhere: green = money in · brand orange = money out blue = what they own pink = what they owe purple = rules · method · tax */ /* 7.1 signature: the spectrum line on top of every page, the gradient X mark */ html body::before{content:'';position:fixed;top:0;left:0;right:0;height:4px;z-index:10000;background:var(--gx-spectrum)} .gx-x-mark{background:linear-gradient(135deg,var(--c-in),var(--c-own))!important;color:#fff!important; border-radius:10px!important;box-shadow:0 2px 8px color-mix(in srgb,var(--c-in) 45%,transparent)} #home-link .gx-word-gov{color:var(--gx-text)!important} /* 7.2 hero: a colour mesh behind the promise, and the promise is the legend */ html body main{position:relative;isolation:isolate} html body main::before{ content:'';position:absolute;inset:0 0 auto 0;height:560px;pointer-events:none;z-index:-1; /* cool mesh only (green · blue · purple): no orange, so the canvas never reads yellow */ background: radial-gradient(42% 60% at 12% 8%,var(--c-in-soft),transparent 70%), radial-gradient(38% 55% at 88% 4%,var(--c-own-soft),transparent 70%), radial-gradient(26% 40% at 40% 38%,var(--c-rule-soft),transparent 70%); mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent); } .gx-word-in{color:var(--c-in)!important}.gx-word-out{color:var(--c-out)!important} .gx-word-own{color:var(--c-own)!important}.gx-word-owe{color:var(--c-owe)!important} html body .gx-word-in,html body .gx-word-out,html body .gx-word-own,html body .gx-word-owe{font-weight:var(--fw-strong)!important} /* 7.3 controls: brand-tinted at rest, brand-filled when active */ button:where(:not(#gx-stack-app *)),.gx-tb-btn,.gx-zone,.gx-map-mode,.gx-home-view-btn,.gx-home-regions button,.gx-home-regions a, .gx-cmp-s,.gx-cmp-addc,.gx-cmp-tabs a,nav[aria-label*="omparaison"] a,.gx-toc17 a,.gx-tgrp a,.gx-tgrp button, #gx-currency,#theme-toggle-btn,#share-btn,#gx-nav-sheet-x,.gx-tb-right>div[style*="border-radius"]{ background:var(--c-in-soft)!important;color:var(--gx-accent-ink)!important; } button:where(:not(#gx-stack-app *)):hover,.gx-zone:hover,.gx-map-mode:hover,.gx-home-view-btn:hover,.gx-home-regions button:hover, .gx-home-regions a:hover,.gx-cmp-s:hover,.gx-cmp-tabs a:hover,.gx-toc17 a:hover,.gx-lg a:hover{ background:color-mix(in srgb,var(--c-in) 22%,transparent)!important; } #omnibar-trigger{background:var(--gx-surface)!important;box-shadow:var(--gx-shadow-sm)!important;color:var(--gx-text-secondary)!important} /* the compare subject tabs wear their subject */ .gx-cmp-s[data-s="flux"]{background:var(--c-out-soft)!important;color:var(--c-out)!important} .gx-cmp-s[data-s="bilan"]{background:var(--c-own-soft)!important;color:var(--c-own)!important} .gx-cmp-s[data-s="fiscalite"]{background:var(--c-rule-soft)!important;color:var(--c-rule)!important} html body .gx-cmp-s[data-s="flux"].is-on{background:var(--c-out)!important;color:#fff!important} html body .gx-cmp-s[data-s="bilan"].is-on{background:var(--c-own)!important;color:#fff!important} html body .gx-cmp-s[data-s="fiscalite"].is-on{background:var(--c-rule)!important;color:#fff!important} /* 7.4 labels: each badge family has one colour */ .gx-status-lab,summary.gx-status-lab{background:var(--c-in-soft)!important;color:var(--gx-accent-ink)!important} .gx-kpi-badge,.gx-ch-badge,.gx-page-status{background:var(--c-own-soft)!important;color:var(--c-own)!important} .gx-dd-badge,.gx-ratio-badge{background:var(--c-rule-soft)!important;color:var(--c-rule)!important} .gx-lg a{background:var(--gx-neutral-soft)!important} /* legend dots already carry their colour */ /* 7.5 cards: a coloured crown bar on every card, tinted eyebrow */ /* `html:root body` outranks gx17's `body.light-theme .x{border-color:#E5E7EB}` */ html:root body :is(.gx-kpi,.gx-hub-story,.gx-hub-ad,.gx-dd-card,.gx-home-cta,.gx-module-hub,.gx-ceiling){ border-top:4px solid var(--c-in)!important; } html:root body :is(.gx-hub-story,#flux){border-top-color:var(--c-out)!important} html:root body :is(.gx-hub-ad,#patrimoine){border-top-color:var(--c-own)!important} html:root body :is(.gx-module-hub,.gx-dd-hub){border-top-color:var(--c-rule)!important} html:root body .gx-dd-link:nth-of-type(1) .gx-dd-card{border-top-color:var(--c-out)!important} html:root body .gx-dd-link:nth-of-type(2) .gx-dd-card{border-top-color:var(--c-own)!important} html:root body .gx-dd-link:nth-of-type(3) .gx-dd-card{border-top-color:var(--c-rule)!important} .gx-hub-story .gx-module-eyebrow{color:var(--c-out)!important} .gx-hub-ad .gx-module-eyebrow{color:var(--c-own)!important} .gx-module-hub .gx-module-eyebrow,.gx-dd-hub .gx-module-eyebrow{color:var(--c-rule)!important} .gx-module-eyebrow,.gx-page-eyebrow{font-weight:var(--fw-strong)!important} .gx-module-eyebrow::before,.gx-page-eyebrow::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:middle} /* actifs / dettes totals wear their colour */ .gx-hub-ad-stack[data-gxad-tot^="a"] .gx-hub-ad-tot,.gx-hub-ad-stack[data-gxad-tot^="a"] .gx-hub-ad-k{color:var(--c-own)!important} .gx-hub-ad-stack[data-gxad-tot^="p"] .gx-hub-ad-tot,.gx-hub-ad-stack[data-gxad-tot^="p"] .gx-hub-ad-k{color:var(--c-owe)!important} /* three modules, three columns: no orphan card */ @media (min-width:980px){.gx-dd-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} /* deep-dive cards: soft wash of their colour */ .gx-dd-link:nth-of-type(1) .gx-dd-card{background:var(--gx-surface)!important} /* orange stays a line, never a wash */ .gx-dd-link:nth-of-type(2) .gx-dd-card{background:linear-gradient(180deg,var(--c-own-soft),var(--gx-surface) 55%)!important} .gx-dd-link:nth-of-type(3) .gx-dd-card{background:linear-gradient(180deg,var(--c-rule-soft),var(--gx-surface) 55%)!important} /* 7.6 home CTA: filled icon tiles, one hue each */ .gx-home-cta-icon{color:#fff!important;width:44px!important;height:44px!important;border-radius:14px!important;font-size:18px} /* each card is wrapped in its own /
: count the wrappers, not the cards */ html:root body .gx-home-primary-grid>:nth-child(1) .gx-home-cta{border-top-color:var(--c-own)!important} .gx-home-primary-grid>:nth-child(1) .gx-home-cta-icon{background:var(--c-own)!important;box-shadow:0 6px 16px var(--c-own-soft)} html:root body .gx-home-primary-grid>:nth-child(2) .gx-home-cta{border-top-color:var(--c-rule)!important} .gx-home-primary-grid>:nth-child(2) .gx-home-cta-icon{background:var(--c-rule)!important;box-shadow:0 6px 16px var(--c-rule-soft)} .gx-home-cta-go a,.gx-home-cta-go summary{color:var(--gx-accent-ink)!important} /* 7.7 notices: tinted by what they say, with a colour spine */ .gx-note,.gx-hub-ad-note,.gx-facts-sense,.gx-fb-recall{background:var(--c-own-soft)!important;box-shadow:inset 4px 0 0 var(--c-own)!important} .gx-cmp-warn,.gx-fresh-warn,[class*="warn"]{background:var(--c-out-soft)!important;box-shadow:inset 4px 0 0 var(--c-out)!important} .gx-cmp-excl,[class*="danger"],[class*="error"]{background:var(--c-owe-soft)!important;box-shadow:inset 4px 0 0 var(--c-owe)!important} .gx-scope-band,.gx-qchip{background:var(--c-rule-soft)!important;box-shadow:inset 4px 0 0 var(--c-rule)!important} .gx-cmp-warn b,.gx-fresh-warn b,[class*="warn"] b{color:var(--c-out)!important} .gx-cmp-excl b,[class*="danger"] b,[class*="error"] b{color:var(--c-owe)!important} .gx-note b,.gx-hub-ad-note b,.gx-facts-sense b{color:var(--c-own)!important} .gx-scope-band b,.gx-qchip b{color:var(--c-rule)!important} /* the "Dépenses" / "Recettes" lead-ins above the bars */ .gx-hub-story div[style*="margin-top:14px"]>div:first-child{color:var(--c-out)!important;font-weight:var(--fw-strong)!important} .gx-hub-story div[style*="margin-top:14px"]>div:first-child span{color:var(--gx-text-secondary)!important} /* 7.8 sections & definitions: green rail, green chevrons */ main details>summary{color:var(--gx-accent-ink)!important} main h2::before,.gx-kpi-gh::before{content:'';display:inline-block;width:6px;height:.75em;border-radius:3px;background:var(--gx-spectrum);margin-right:10px;vertical-align:-.05em} .gx-hub-story h2::before{background:var(--c-out)}.gx-hub-ad h2::before{background:var(--c-own)} .gx-module-hub h2::before,.gx-dd-hub h2::before{background:var(--c-rule)} .gx-dd-card h2::before{display:none} /* 7.8b removed chrome: the region filter row above the map, and a one-item mode nav */ html body .gx-home-regions,html body nav.gx-cmp-modes{display:none!important} /* 7.8c city hero: flags, name and profile on one tight line — no dead space */ html body .gx-city-facts{padding:0!important} html body .gx-city-banner{margin:0!important;min-height:0!important} html body .gx-city-banner .banner-content{padding:14px 20px!important;gap:16px!important;align-items:center!important;flex-wrap:wrap!important} html body .gx-city-banner .city-info{align-items:center!important;gap:14px!important} html body .gx-city-banner .city-flag-pair{gap:8px!important} /* the faded flag watermark peeks out as a colour sliver behind the profile block: the three crisp flags suffice */ html:root body .gx-city-intro .gx-city-banner :is(.flag-bg,.flag-bg-overlay),html:root body .gx-facts-flag{display:none!important} html body .gx-city-banner .city-flag-crisp,html body .gx-city-banner .city-flag-mid,html body .gx-city-banner .city-flag-own{ width:42px!important;height:28px!important;border-radius:6px!important;border:0!important; box-shadow:0 0 0 1px var(--gx-border) inset!important;object-fit:cover!important} html body .gx-city-banner .city-name{margin:0!important;line-height:1.1!important} html body .gx-city-banner .city-subtitle{margin-top:2px!important} html body .city-banner-trailing{max-width:52%!important;margin-left:auto!important;display:flex!important;justify-content:flex-end!important} /* profile: one line of numbers, one line of explanation */ html body .gx-score-chip{flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline!important;gap:4px 10px!important;padding:8px 14px!important} html body .gx-score-chip>span{flex-direction:row!important;align-items:baseline!important;gap:8px!important} html body .gx-score-why{max-width:none!important} html body .gx-kpi-g{margin-top:12px!important} /* 7.8d coverage pills: status colour in the text only; amber wash removed */ html:root body .gx-cov-pill{background:var(--gx-neutral-soft)!important} html:root body .gx-cov-pill.pause{color:var(--c-out)!important} html:root body .gx-cov-pill.quarantaine{color:var(--c-owe)!important} html:root body .gx-cov-pill.partiel{color:var(--c-own)!important} html:root body .gx-cov-pill.indisponible,html:root body .gx-cov-pill.autre{color:var(--gx-text-secondary)!important} /* the document root wears the canvas too (no dark band when the window over-scrolls) */ html{background:var(--gx-page)!important} html:has(body.light-theme){background:#F2F2F7!important} /* 7.9 footer: a solid brand band. The ink is the dark green the site already writes on an accent fill (the primary button, the 404 actions), not white. Measured on the band itself: white gives 2.02:1 at the green end and 2.66:1 at the teal end in dark mode (2.22:1 / 2.94:1 in light) — a fail for 12-16px text. #07120a gives 9.44:1 / 7.19:1 in dark and 8.60:1 / 6.48:1 in light, so the mission line, the data version and both links clear AA everywhere on the gradient. */ html body footer{margin:0!important;padding:4px 0!important;background:linear-gradient(135deg,var(--c-in),color-mix(in srgb,var(--c-in) 60%,var(--c-own)))!important} html body footer,html body footer *{color:#07120a!important;font-size:var(--fs-meta)!important} html body footer a{text-decoration:underline!important;text-underline-offset:3px} /* 7.10 dark mode: same hues, a little more light */ body:not(.light-theme) .gx-x-mark{box-shadow:0 2px 12px color-mix(in srgb,var(--c-in) 60%,transparent)} body:not(.light-theme) button:where(:not(#gx-stack-app *)),body:not(.light-theme) .gx-toc17 a,body:not(.light-theme) .gx-zone, body:not(.light-theme) .gx-map-mode,body:not(.light-theme) .gx-cmp-tabs a{color:var(--c-in)!important} /* ---------- 8. Comparator city search (gx-cmp-search.js) ---------- A real list under the field instead of the three-row native datalist: 44px rows, flag · name · country, scrolls, works with the iOS keyboard. */ html body .gx-cmp-pk{flex:1 1 260px!important;min-width:min(260px,100%)!important} html body .gx-cmp-pk.gx-ta-host{position:relative} html body .gx-ta{ position:absolute;top:100%;left:0;z-index:400;margin-top:6px; width:max(100%,320px);max-width:calc(100vw - 32px); max-height:min(52vh,440px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; background:var(--gx-surface);color:var(--gx-text); border:1px solid var(--gx-border);border-radius:var(--r-field); box-shadow:0 2px 4px rgba(0,0,0,.06),0 18px 44px rgba(0,0,0,.14);padding:6px;box-sizing:border-box} body:not(.light-theme) .gx-ta{box-shadow:0 18px 44px rgba(0,0,0,.6)} html body .gx-ta[hidden]{display:none} html body .gx-ta-it{ display:flex!important;align-items:center;gap:10px;min-height:44px;padding:6px 10px; border-radius:8px;cursor:pointer;font-size:var(--fs-body);line-height:1.2;color:var(--gx-text)} html body .gx-ta-it.is-sel{background:var(--c-in-soft)} @media (hover:hover){html body .gx-ta-it:hover{background:var(--c-in-soft)}} html body .gx-ta-it.is-sel .gx-ta-n{color:var(--gx-accent-ink)} html body .gx-ta-flag{flex:0 0 22px;display:inline-flex;height:15px} html body .gx-ta-flag img{width:22px!important;height:15px!important;border-radius:3px!important;margin:0!important} html body .gx-ta-n{flex:1 1 auto;font-weight:var(--fw-strong);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html body .gx-ta-c{flex:0 1 auto;font-size:var(--fs-meta);color:var(--gx-text-secondary);white-space:nowrap} html body .gx-ta-hint{padding:6px 10px 2px;font-size:var(--fs-meta);color:var(--gx-text-secondary)} html body .gx-ta-empty{padding:12px 10px;font-size:var(--fs-body);color:var(--gx-text)} html body .gx-ta-empty span{display:block;margin-top:4px;font-size:var(--fs-meta);color:var(--gx-text-secondary)} @media (max-width:719px){ html body .gx-cmp-pickers{flex-direction:column!important;align-items:stretch!important} html body .gx-cmp-pk{flex-basis:auto!important;min-width:0!important;width:100%!important} html body .gx-ta{width:100%;max-width:none;max-height:min(46vh,380px)} html body .gx-cmp-addc{align-self:flex-start!important} } /* 8b. site-wide ⌘K city box: same rows, theme-aware (its inline style is dark-only) */ html body #gxs-box{background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} html body #gxs-panel{background:var(--gx-surface);border:1px solid var(--gx-border);border-radius:var(--r-card); box-shadow:0 2px 4px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.22)} html body #gxs-panel input{background:var(--gx-surface);color:var(--gx-text);font-size:var(--fs-body);padding:16px 18px; border-bottom:1px solid var(--gx-border);border-radius:0} html body #gxs-panel input::placeholder{color:var(--gx-text-secondary)} /* the panel is the focus target; no ring clipped by its rounded corners */ html body #gxs-panel input:focus,html body #gxs-panel input:focus-visible{outline:none!important;box-shadow:none!important;border-color:var(--gx-border)!important} html body #gxs-list{padding:6px} html body .gxs-it{align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:8px; color:var(--gx-text);font-size:var(--fs-body)} html body .gxs-it>span:first-child{display:inline-flex;align-items:center;gap:10px;font-weight:var(--fw-strong)} html body .gxs-it .gx-flag-s{width:22px!important;height:15px!important;border-radius:3px!important} html body .gxs-it .gx-flag-pays{display:none} html body .gxs-it.gxs-sel{background:var(--c-in-soft)} html body .gxs-it.gxs-sel>span:first-child{color:var(--gx-accent-ink)} @media (hover:hover){html body .gxs-it:hover{background:var(--c-in-soft)}} html body .gxs-c{color:var(--gx-text-secondary);font-size:var(--fs-meta)} /* ---------- 6. Motion ---------- */ @media (prefers-reduced-motion:reduce){ :root{--gx-ease:1ms linear} *{transition-duration:1ms!important;animation-duration:1ms!important} } /* ---------- 9. Sticky « Sur cette page » / Sections ---------- Stick while content scrolls. Inside `.gx-main-area` the topbar is already outside the scrollport, so `top` is 0; elsewhere leave room for the topbar. Never let `
` overflow clip sticky into a no-op. */ html body .gx-toc17, html body .gx-ab-toc, html body nav.gx-sections-sticky{ position:-webkit-sticky!important; position:sticky!important; top:var(--gx-head,52px)!important; z-index:140!important; background:var(--gx-page)!important; backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); box-shadow:0 1px 0 var(--gx-border); } html body .gx-main-area .gx-toc17, html body .gx-main-area .gx-ab-toc, html body .gx-main-area nav.gx-sections-sticky{ top:0!important; } html body .gx-main-area > main, html body .gx-main-area main#main-content, html body .gx-main-area #module-content, html body .gx-main-area #compare-content{ overflow:visible!important; } @media (max-width:400px){ html body nav.gx-sections-sticky, html body .gx-toc17, html body .gx-ab-toc{position:sticky!important;top:0!important} } /* ---------- 10. Comparateur + hub: air entre blocs (11/09) ---------- Les chiffres restent denses; ce qui manquait, c'est l'espace ENTRE sections et entre colonnes de villes, pas une réduction d'information. */ html body #cols{gap:18px!important} html body .gx-cmp-pickers{gap:14px!important;margin:20px 0 18px!important} html body .gx-cmp-leg,html body .gx-lgrow{gap:12px!important;row-gap:10px!important;margin:10px 0 14px!important} html body table.gx-bs th,html body table.gx-bs td{padding:12px 14px!important} html body .gx-cmp-table tr.gx-cmp-section td{padding:16px 12px 10px!important} html body .gx-cmp-table tr.gx-cmp-block-gap td{height:22px!important} html body .gx-cmp-table tr.gx-cmp-seg td{padding-top:13px!important;padding-bottom:13px!important} html body #bars{margin:8px 0 20px!important} html body .gx-cmp-sujet{gap:14px!important;row-gap:12px!important;margin:14px 0 18px!important} html body .gx-cmp-pk-ops{gap:8px!important} html body .gx-cmp-dock{gap:12px!important} html body .gx-cmp-city{padding:16px 16px 14px!important;margin-bottom:14px!important} html body .gx-cmp-line{margin:10px 0!important;gap:12px!important} html body .gx-cmp-k{font-size:10px!important} html body .gx-lgi-labs{gap:4px!important} html body .gx-cmp-track{height:36px!important} /* Même contrat partout: barres recettes/dépenses = 36px (ville, citoyen, compare). */ html body .bar,html body .gx-stack,html body .gx-stack a{height:36px!important;min-height:36px!important;max-height:36px!important} html body .gx-city-banner .banner-content{padding:18px 22px!important} html body .gx-kpi-row,html body .gx-home-primary-grid,html body .gx-kpi-grid-responsive{gap:16px!important} html body .gx-ledger,html body .gx-fin-block,html body section.gx-block{margin-bottom:28px!important} html body .gx-rail,html body .gx-fill{height:10px!important} html body .gx-hd-decomp{gap:6px!important} html body .gx-fund-total{margin-bottom:8px!important} html body .gx-bmun-tab th,html body .gx-bmun-tab td{padding:8px 10px!important} html body .gx-hub-flux-lab{margin-bottom:10px!important} /* ---------- 11. One green (2026-09-24) ---------- Legacy greens (#4ade80, #147c3b, #22c55e, #16a34a, #166534, #15803d) written inline by older builders snap to the brand pair: fill #34C759 / ink #1E8E3E (dark: #30D158). */ html body [style*="color:#4ade80"],html body [style*="color: #4ade80"],html body [style*="color:#4ADE80"], html body [style*="color:#147c3b"],html body [style*="color: #147c3b"],html body [style*="color:#22c55e"], html body [style*="color:#16a34a"],html body [style*="color:#166534"],html body [style*="color:#15803d"]{color:var(--gx-accent-ink)!important} html body [style*="background:#4ade80"],html body [style*="background: #4ade80"],html body [style*="background:#147c3b"], html body [style*="background:#22c55e"],html body [style*="background:#16a34a"],html body [style*="background-color:#4ade80"]{background-color:var(--gx-accent)!important} html body #home-link .gx-x-mark{background:var(--gx-accent)!important;color:#fff!important} html body #home-link span[style*="#4ade80"],html body #home-link span[style*="#4ADE80"]{color:var(--gx-accent-ink)!important} /* The footer band is already brand green (§7.9): snapping its inline greens to the brand ink put « la méthode » and « Signaler un problème » green on green. Inside the band the white of §7.9 wins; the attribute selector here outranks §11. */ html body footer [style*="color:#4ade80"],html body footer [style*="color: #4ade80"], html body footer [style*="color:#4ADE80"],html body footer [style*="color:#147c3b"], html body footer [style*="color: #147c3b"],html body footer [style*="color:#22c55e"], html body footer [style*="color:#16a34a"],html body footer [style*="color:#166534"], html body footer [style*="color:#15803d"]{color:#fff!important} /* EOD 25/09: Notebook = icon circle (match theme/share); cascade stack continuous */ html body .gx-tb-nb{width:36px!important;height:36px!important;min-width:36px!important;padding:0!important; justify-content:center!important;border-radius:50%!important;gap:0!important;position:relative!important} html body .gx-tb-nb .gx-btn-label,html body .gx-tb-nb [data-nb-label]{ /* Icon-only: never show the kit's language string next to theme/share circles. display:none beats clip (and survives a stale humane sheet if export-kit.css loads). */ display:none!important} html body .gx-tb-nb [data-nb-count]{position:absolute!important;top:-2px!important;right:-2px!important; min-width:16px!important;height:16px!important;padding:0 4px!important;border-radius:8px!important; background:var(--gx-brand,#16A34A)!important;color:#fff!important;font-size:10px!important;line-height:16px!important;text-align:center!important} html body .gx-tb-nb [data-nb-count][hidden]{display:none!important} html body #gx-stack-app .gx-cascade{gap:14px!important} html body #gx-stack-app .gx-cascade-row{display:grid!important;gap:6px!important;min-width:0!important} html body #gx-stack-app .gx-cascade-total{padding-bottom:14px!important;margin-bottom:0!important} html body #gx-stack-app .gx-cascade-level{padding-top:14px!important;position:relative!important;z-index:1!important} html body #gx-stack-app .gx-cascade-stack{border-radius:6px!important;overflow:hidden!important;gap:0!important} html body #gx-stack-app .gx-cascade-stack>span{border-radius:0!important;min-width:2px!important} html body #gx-stack-app .gx-cascade-stack>span:first-child{border-radius:6px 0 0 6px!important} html body #gx-stack-app .gx-cascade-stack>span:last-child{border-radius:0 6px 6px 0!important} html body #gx-stack-app .gx-cascade-stack>span:only-child{border-radius:6px!important}