@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap");

/* Tertiaire 2030 reuses the Parksun design system (sunpark/src/app/globals.css): same tokens, type and components.
   Monochrome ground, one green for what matters. Light is primary; dark follows the system or the moon button. */
:root {
  --ground: #eceeed; --surface: #f6f7f6; --surface-raised: #ffffff; --surface-glass: rgba(255, 255, 255, 0.74); --surface-sunken: #e3e6e4;
  --line: #dde1de; --line-strong: #c5cbc7;
  --ink: #0f1211; --ink-soft: #3b423f; --ink-mute: #5f6763; --ink-faint: #a3aaa6;
  --graphite: #151917; --graphite-hover: #2a302d; --on-graphite: #f4f6f5;
  --solar: #27c46b; --solar-hover: #1faf5d; --on-solar: #06140c; --solar-ink: #0b7a3e; --solar-soft: #dcf5e6; --solar-line: #8fdcb0;
  --parcel: #0f1211; --alert: #b5360d; --alert-soft: #fbe8e0; --caution: #8a5a00; --caution-soft: #f8efd9; --focus: #0b7a3e; --scrim: rgba(11, 13, 12, 0.5);
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif; --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-hairline: 0 1px 0 rgba(15, 18, 17, 0.04); --shadow-float: 0 1px 2px rgba(15, 18, 17, 0.06), 0 16px 40px rgba(15, 18, 17, 0.1); --shadow-glow: 0 0 0 6px rgba(39, 196, 107, 0.18); --blur-glass: 18px;
  --duration-fast: 120ms; --duration-base: 220ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b0d0c; --surface: #121514; --surface-raised: #191c1b; --surface-glass: rgba(25, 28, 27, 0.72); --surface-sunken: #070908;
    --line: #262b29; --line-strong: #3a413e; --ink: #eef1ef; --ink-soft: #bcc4c0; --ink-mute: #8f9894; --ink-faint: #59615d;
    --graphite: #eef1ef; --graphite-hover: #d4dad7; --on-graphite: #0f1211;
    --solar: #39d67f; --solar-hover: #5ee39a; --on-solar: #04110a; --solar-ink: #5ee39a; --solar-soft: #10291b; --solar-line: #1f6b41;
    --parcel: #eef1ef; --alert: #ff8a5c; --alert-soft: #33170d; --caution: #f2b84b; --caution-soft: #2e230b; --focus: #5ee39a; --scrim: rgba(0, 0, 0, 0.6);
    --shadow-hairline: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 6px rgba(57, 214, 127, 0.22);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0b0d0c; --surface: #121514; --surface-raised: #191c1b; --surface-glass: rgba(25, 28, 27, 0.72); --surface-sunken: #070908;
  --line: #262b29; --line-strong: #3a413e; --ink: #eef1ef; --ink-soft: #bcc4c0; --ink-mute: #8f9894; --ink-faint: #59615d;
  --graphite: #eef1ef; --graphite-hover: #d4dad7; --on-graphite: #0f1211;
  --solar: #39d67f; --solar-hover: #5ee39a; --on-solar: #04110a; --solar-ink: #5ee39a; --solar-soft: #10291b; --solar-line: #1f6b41;
  --parcel: #eef1ef; --alert: #ff8a5c; --alert-soft: #33170d; --caution: #f2b84b; --caution-soft: #2e230b; --focus: #5ee39a; --scrim: rgba(0, 0, 0, 0.6);
  --shadow-hairline: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 6px rgba(57, 214, 127, 0.22);
  color-scheme: dark;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--ground); color: var(--ink); font: 400 15px/22px var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sp-icon { flex: none; display: block; }
.sp-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.sp-label { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 11px/14px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.sp-body { margin: 0; color: var(--ink-soft); font: 400 15px/22px var(--font-sans); }
.sp-body-sm { margin: 0; color: var(--ink-mute); font: 400 13px/18px var(--font-sans); }
.sp-subtitle { margin: 0; color: var(--ink); font: 600 15px/20px var(--font-sans); }
.sp-data { font: 500 13px/18px var(--font-mono); color: var(--ink-mute); }
.sp-data-sm { font: 500 11px/14px var(--font-mono); color: var(--ink-mute); }
.sp-error { color: var(--alert); font: 500 14px/20px var(--font-sans); }
.sp-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--solar); display: block; flex: none; }

/* ---- Button ---- */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-pill); font: 600 14px/20px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); }
.sp-btn--md { height: 44px; padding: 0 var(--space-5); }
.sp-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.sp-btn--primary { background: var(--graphite); color: var(--on-graphite); }
.sp-btn--primary:hover { background: var(--graphite-hover); }
.sp-btn--solar { background: var(--solar); color: var(--on-solar); }
.sp-btn--solar:hover { background: var(--solar-hover); }
.sp-btn--ghost { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.sp-btn--ghost:hover { border-color: var(--ink); }
.sp-btn--quiet { background: transparent; color: var(--ink-soft); padding-left: var(--space-2); padding-right: var(--space-2); }
.sp-btn--quiet:hover { color: var(--ink); }
.sp-btn[disabled] { opacity: 0.5; cursor: wait; }
.sp-iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-soft); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.sp-iconbtn:hover { color: var(--ink); border-color: var(--line-strong); }

/* ---- AddressSearch ---- */
.sp-search { position: relative; max-width: 680px; width: 100%; text-align: left; }
.sp-search__field { display: flex; align-items: center; gap: var(--space-2); padding: 6px 6px 6px var(--space-4); border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.sp-search__field:focus-within { border-color: var(--ink); }
.sp-search__lead { color: var(--ink-mute); }
.sp-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 16px/24px var(--font-sans); padding: 8px 0; }
.sp-search input::placeholder { color: var(--ink-mute); }
.sp-search input:focus { outline: none; }
.sp-search__list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); z-index: 1100; }
.sp-search__list button { display: flex; width: 100%; align-items: center; gap: var(--space-2); padding: 10px 12px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 14px; text-align: left; cursor: pointer; }
.sp-search__list button:hover, .sp-search__list button:focus { background: var(--surface); color: var(--ink); outline: none; }
@media (max-width: 640px) { .sp-search__field .sp-btn span { display: none; } .sp-search__field .sp-btn { padding: 0 var(--space-3); } }

/* ---- Panel, Metric, Badge, Stats ---- */
.sp-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-hairline); display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: var(--space-4); min-width: 0; }
.sp-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.sp-panel__title { margin: 2px 0 0; font: 600 18px/24px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.sp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 420px) { .sp-grid2 { grid-template-columns: 1fr; } }
.sp-metric { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: var(--radius-sm); min-width: 0; }
.sp-metric--plain { background: transparent; padding: 0; }
.sp-metric__value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font: 300 30px/34px var(--font-display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-metric--md .sp-metric__value { font-size: 24px; line-height: 28px; }
.sp-metric__unit { font: 500 14px/20px var(--font-sans); letter-spacing: 0; color: var(--ink-mute); }
.sp-metric__cap { font: 400 13px/18px var(--font-sans); color: var(--ink-mute); }
.sp-metric--solar .sp-metric__value { color: var(--solar-ink); }
.sp-metric--alert .sp-metric__value { color: var(--alert); }
.sp-metric--caution .sp-metric__value { color: var(--caution); }
.sp-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 12px/16px var(--font-sans); background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; }
.sp-badge--solar { background: var(--solar-soft); color: var(--solar-ink); border-color: transparent; }
.sp-badge--alert { background: var(--alert-soft); color: var(--alert); border-color: transparent; }
.sp-badge--caution { background: var(--caution-soft); color: var(--caution); border-color: transparent; }
.sp-badge--live { background: var(--graphite); color: var(--on-graphite); border-color: transparent; }
.sp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.sp-card { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--duration-fast); }
.sp-card:hover { border-color: var(--ink); }
.sp-card__title { font: 600 15px/22px var(--font-sans); }
.sp-card__meta { color: var(--ink-mute); font: 400 13px/18px var(--font-sans); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chips a, .sp-chips button { padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font: 600 13px/18px var(--font-sans); text-decoration: none; cursor: pointer; }
.sp-chips a:hover, .sp-chips button:hover { border-color: var(--ink); }

/* ---- Viewport (the aerial photo) ---- */
.sp-viewport { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); background-image: radial-gradient(circle at 50% 40%, var(--surface) 0%, var(--surface-sunken) 75%); border: 1px solid var(--line); }
.sp-viewport__stamp { position: absolute; right: var(--space-4); bottom: var(--space-4); font: 500 11px/14px var(--font-mono); color: var(--on-graphite); background: rgba(15, 18, 17, 0.6); padding: 3px 8px; border-radius: var(--radius-xs); z-index: 500; }
.sp-viewport__fill { position: absolute; inset: 0; }
.sp-viewport__fill img { position: absolute; width: 256px; height: 256px; max-width: none; display: block; }
.sp-viewport__fill svg, .sp-viewport > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.sp-ov { position: absolute; z-index: 500; }
.sp-ov--tl { left: var(--space-4); top: var(--space-4); }
.sp-hint { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--graphite); color: var(--on-graphite); font: 600 13px/20px var(--font-sans); box-shadow: var(--shadow-float); white-space: nowrap; }

/* ---- Hero ---- */
.sp-hero { min-height: calc(100vh - 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-12) var(--space-4); text-align: center; }
.sp-hero--short { min-height: 0; padding-top: var(--space-8); padding-bottom: var(--space-5); }
.sp-hero__brand { font: 300 22px/28px var(--font-display); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; }
.sp-hero h1 { font: 300 64px/64px var(--font-display); letter-spacing: -0.035em; max-width: 820px; text-wrap: balance; }
.sp-hero .sp-body { max-width: 600px; }
.sp-hero__examples { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); align-items: center; }
@media (max-width: 640px) { .sp-hero h1 { font-size: 40px; line-height: 44px; } .sp-hero { min-height: 0; padding-top: var(--space-8); } }

/* ---- Site pages: header, footer, page, article ---- */
.sp-top { position: sticky; top: 0; z-index: 700; background: var(--surface-glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); border-bottom: 1px solid var(--line); }
.sp-top__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); height: 60px; display: flex; align-items: center; gap: var(--space-5); }
.sp-top__brand { font: 300 20px/28px var(--font-display); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.sp-top__brand b { font-weight: 500; }
.sp-top__nav { display: flex; gap: var(--space-1); flex: 1; overflow-x: auto; scrollbar-width: none; }
.sp-top__nav a { padding: 6px 12px; border-radius: var(--radius-pill); color: var(--ink-soft); font: 600 13px/20px var(--font-sans); text-decoration: none; white-space: nowrap; }
.sp-top__nav a:hover, .sp-top__nav a.is-on { color: var(--ink); background: var(--surface); }
.sp-top__cta { flex: none; }
.sp-top__theme { flex: none; }
.sp-top__theme .sp-iconbtn { width: 36px; height: 36px; }
@media (max-width: 720px) { .sp-top__cta { display: none; } }
.sp-page { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
.sp-page h1 { font: 300 44px/48px var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
@media (max-width: 640px) { .sp-page h1 { font-size: 32px; line-height: 36px; } .sp-page { padding-top: var(--space-5); } }
.sp-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font: 500 12px/16px var(--font-sans); color: var(--ink-mute); margin-bottom: var(--space-5); }
.sp-crumbs a { color: var(--ink-soft); text-decoration: none; }
.sp-crumbs a:hover { text-decoration: underline; }
.sp-crumbs__sep { margin-right: 6px; color: var(--ink-faint); }
.sp-article { max-width: 780px; }
.sp-article__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.sp-article__lead { margin: 0; color: var(--ink-soft); font: 400 18px/28px var(--font-sans); }
.sp-prose { color: var(--ink-soft); font: 400 16px/26px var(--font-sans); display: flex; flex-direction: column; gap: var(--space-4); }
.sp-prose h2 { margin-top: var(--space-6); color: var(--ink); font: 300 30px/36px var(--font-display); letter-spacing: -0.02em; }
.sp-prose h3 { margin-top: var(--space-3); color: var(--ink); font: 600 17px/24px var(--font-sans); }
.sp-prose p { margin: 0; }
.sp-prose strong, .sp-prose b { color: var(--ink); font-weight: 600; }
.sp-prose ul, .sp-prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.sp-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
.sp-prose a:hover { text-decoration-color: var(--ink); }
.sp-prose dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sp-prose dt { color: var(--ink); font: 600 15px/22px var(--font-sans); }
.sp-prose dd { margin: 2px 0 0; }
.sp-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); }
.sp-table th, .sp-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sp-table th { font: 600 11px/14px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.sp-table td b, .sp-table td strong { color: var(--ink); font-weight: 600; }
.sp-table .num { text-align: right; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-table tr.is-me td { background: var(--solar-soft); }
.sp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.sp-table-wrap .sp-table th { background: var(--surface); }
.sp-callout { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); }
.sp-callout p { margin: 0; }
.sp-faq { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); }
.sp-faq h2 { color: var(--ink); font: 300 30px/36px var(--font-display); letter-spacing: -0.02em; margin-bottom: var(--space-3); }
.sp-faq details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); padding: 0 var(--space-4); }
.sp-faq summary { cursor: pointer; padding: 14px 0; color: var(--ink); font: 600 15px/22px var(--font-sans); list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: '+'; color: var(--ink-mute); font: 300 22px/22px var(--font-display); }
.sp-faq details[open] summary::after { content: '−'; }
.sp-faq p { margin: 0 0 var(--space-4); color: var(--ink-soft); font: 400 15px/24px var(--font-sans); }
.sp-cta-box { margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-hairline); }
.sp-cta-box--compact { margin-top: 0; padding: var(--space-5); }
.sp-cta-box__title { color: var(--ink); font: 300 28px/32px var(--font-display); letter-spacing: -0.02em; }
.sp-cta-box .sp-search { max-width: none; }
.sp-section { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); }
.sp-section h2 { color: var(--ink); font: 300 30px/36px var(--font-display); letter-spacing: -0.02em; }
.sp-page__head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; margin-bottom: var(--space-6); }
.sp-page__head .sp-body { font-size: 17px; line-height: 26px; }
.sp-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 960px) { .sp-two { grid-template-columns: 1fr; } }
.sp-title { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.sp-title h1 { font: 300 34px/38px var(--font-display); letter-spacing: -0.03em; }
.sp-title p { margin: 4px 0 0; color: var(--ink-mute); font: 500 11px/14px var(--font-mono); }
.sp-title__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sp-site-footer { border-top: 1px solid var(--line); margin-top: var(--space-8); padding: var(--space-8) var(--space-4) var(--space-10); }
.sp-site-footer__in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
.sp-site-footer ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 400 14px/20px var(--font-sans); }
.sp-site-footer a { color: var(--ink-soft); text-decoration: none; }
.sp-site-footer a:hover { color: var(--ink); text-decoration: underline; }
.sp-site-footer__law { max-width: 1200px; margin: var(--space-6) auto 0; color: var(--ink-mute); font: 400 12px/18px var(--font-sans); }
@media (max-width: 760px) { .sp-site-footer__in { grid-template-columns: 1fr; } }

/* ---- Lead form, fields ---- */
.sp-lead { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-hairline); }
.sp-lead h2 { color: var(--ink); font: 300 28px/32px var(--font-display); letter-spacing: -0.02em; }
.sp-lead__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); align-items: end; }
.sp-field { display: flex; flex-direction: column; gap: 6px; font: 600 12px/16px var(--font-sans); color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase; min-width: 0; }
.sp-field input, .sp-field select { height: 44px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 15px/22px var(--font-sans); letter-spacing: 0; text-transform: none; width: 100%; }
.sp-field input:focus, .sp-field select:focus { outline: none; border-color: var(--ink); }
.sp-field--mono input { font-family: var(--font-mono); font-size: 14px; }
.sp-check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font: 400 14px/20px var(--font-sans); }
.sp-check input { margin-top: 3px; accent-color: var(--solar); }
.sp-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); align-items: end; }

/* ---- Tertiaire 2030: levers, chart ---- */
.sp-levers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.sp-lever { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; transition: border-color var(--duration-fast); }
.sp-lever:hover, .sp-lever:focus-within { border-color: var(--ink); }
.sp-lever input { margin-top: 4px; accent-color: var(--solar); }
.sp-lever b { color: var(--ink); font: 600 14px/20px var(--font-sans); }
.sp-lever small { display: block; color: var(--ink-mute); font: 400 12px/16px var(--font-sans); }
.sp-chart { width: 100%; height: auto; display: block; }
.sp-chart text { font: 500 11px var(--font-mono); fill: var(--ink-mute); }
.sp-chart text.k { fill: var(--ink); font-family: var(--font-sans); font-weight: 600; }
.sp-nearby { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-status { min-height: 20px; }
.sp-prose .sp-btn, .sp-cta-box .sp-btn { text-decoration: none; align-self: flex-start; }
.sp-prose .sp-cta-box__title { margin-top: 0; }
.sp-prose a.sp-btn--primary, .sp-cta-box a.sp-btn--primary { color: var(--on-graphite); }
/* ---- Brand mark: one file per ground, the theme shows one ---- */
.sp-brandmark { display: block; width: 22px; height: 22px; }
.sp-brandmark[data-on="dark"] { display: none; }
:root[data-theme="dark"] .sp-brandmark[data-on="light"] { display: none; }
:root[data-theme="dark"] .sp-brandmark[data-on="dark"] { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sp-brandmark[data-on="light"] { display: none; }
  :root:not([data-theme="light"]) .sp-brandmark[data-on="dark"] { display: block; }
}