:root {
  --whyp-bg: #eef6f9;
  --whyp-bg-2: #e2eff4;
  --whyp-surface: #ffffff;
  --whyp-line: #d8e8ef;
  --whyp-soft: rgba(15,23,42,0.05);
  --whyp-soft-line: rgba(15,23,42,0.10);
  --whyp-text: #06171f;
  --whyp-text-2: #4c6470;
  --whyp-text-drive: #06171f;
  --whyp-blue: #0277b6;
  --whyp-on-blue: #ffffff;
  --whyp-blue-text: #0369a1;
  --whyp-blue-ring: #ffffff;
  --whyp-blue-sel-edge: #0277b6;
  --whyp-blue-hi: #0369a1;
  --whyp-blue-glass: rgba(2,119,182,1);
  --whyp-blue-glass-edge: rgba(255,255,255,0.45);
  --whyp-blue-tint: rgba(2,119,182,0.14);
  --whyp-pro-bg: #e1f0f8;
  --whyp-route: #0369a1;
  --whyp-route-casing: #ddeff8;
  --whyp-glow: rgba(2,119,182,0.20);
  --whyp-glow-strong: rgba(2,119,182,0.34);
  --whyp-glass: rgba(255,255,255,0.75);
  --whyp-glass-line: rgba(255,255,255,0.90);
  --whyp-glass-hi: #ffffff;
  --whyp-price-good: #13794c;
  --whyp-price-avg: #946200;
  --whyp-price-bad: #c81e1e;
  --whyp-price-good-soft: rgba(19,121,76,0.12);
  --whyp-price-avg-soft: rgba(148,98,0,0.12);
  --whyp-price-bad-soft: rgba(200,30,30,0.10);
  --whyp-save-bg: #6fddb0;
  --whyp-save-text: #0e1012;
  --whyp-pin-good: #22c55e;
  --whyp-pin-avg: #facc15;
  --whyp-pin-bad: #ef4444;
  --whyp-on-pin: #0e1012;
  --whyp-tile-hero-from: #0277b6;
  --whyp-tile-hero-to: #035a8a;
  --whyp-tile-hero-text: #ffffff;
  --whyp-tile-hero-text-2: #ffffff;
  --whyp-map-bg: #e8ecf1;
  --whyp-map-road: #ffffff;
  --whyp-map-road-2: #f6f8fa;
  --whyp-map-water: #bfd8ee;
  --whyp-map-park: #d3e7d1;
  --whyp-map-label: #5b6573;
  --whyp-map-done: #b4bcc8;
  --whyp-glass-shadow: 0 8px 24px rgba(15,23,42,0.14);
  --whyp-button-shadow: inset 0 1px 0 rgba(255,255,255,0.50), 0 4px 14px rgba(2,119,182,0.20);
  --whyp-pin-ring: 0 0 0 1.5px rgba(6,23,31,0.55);
  --whyp-pin-tail-ring: 0 0 0 1px rgba(6,23,31,0.55);
  --whyp-space-2: 2px;
  --whyp-space-4: 4px;
  --whyp-space-6: 6px;
  --whyp-space-8: 8px;
  --whyp-space-10: 10px;
  --whyp-space-12: 12px;
  --whyp-space-14: 14px;
  --whyp-space-16: 16px;
  --whyp-space-20: 20px;
  --whyp-space-24: 24px;
  --whyp-space-32: 32px;
  --whyp-space-40: 40px;
  --whyp-space-48: 48px;
  --whyp-space-56: 56px;
  --whyp-space-64: 64px;
  --whyp-radius-pill: 999px;
  --whyp-radius-sheet: 28px;
  --whyp-radius-panel: 24px;
  --whyp-radius-card-lg: 20px;
  --whyp-radius-card: 16px;
  --whyp-radius-field: 14px;
  --whyp-radius-tile-sm: 12px;
  --whyp-radius-chip: 11px;
  --whyp-radius-pro: 7px;
  --whyp-radius-pin: 6px;
  --whyp-radius-mini: 4px;
  --whyp-radius-bar: 3px;
  --whyp-size-button: 56px;
  --whyp-size-control: 44px;
  --whyp-size-tabbar: 64px;
  --whyp-size-list-row: 52px;
  --whyp-size-pin: 26px;
  --whyp-size-pin-selected: 34px;
  --whyp-size-maneuver: 64px;
  --whyp-size-icon: 22px;
  --whyp-size-icon-button: 20px;
  --whyp-site-container: 1040px;
  --whyp-site-gutter: 16px;
  --whyp-site-bp-md: 760px;
  --whyp-site-bp-sm: 380px;
  --whyp-site-logo-h: 32px;
  --whyp-site-button-h: 48px;
  --whyp-site-button-h-sm: 40px;
  --whyp-glass-blur: blur(24px) saturate(160%);
  --whyp-button-blur: blur(14px) saturate(180%);
  --whyp-glass-opacity: 0.75;
  --whyp-font-ui: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --whyp-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --whyp-font-brand: 'Fredoka', -apple-system, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --whyp-bg: #071318;
  --whyp-bg-2: #0b1b22;
  --whyp-surface: #0f212a;
  --whyp-line: #1d3340;
  --whyp-soft: rgba(255,255,255,0.08);
  --whyp-soft-line: rgba(255,255,255,0.14);
  --whyp-text: #ffffff;
  --whyp-text-2: #9db6c2;
  --whyp-text-drive: #e3ebef;
  --whyp-blue: #065aa9;
  --whyp-on-blue: #ffffff;
  --whyp-blue-text: #409cff;
  --whyp-blue-ring: #409cff;
  --whyp-blue-sel-edge: #409cff;
  --whyp-blue-hi: #8cc4ff;
  --whyp-blue-glass: rgba(6,90,169,1);
  --whyp-blue-glass-edge: rgba(255,255,255,0.30);
  --whyp-blue-tint: rgba(6,90,169,0.32);
  --whyp-pro-bg: rgba(6,90,169,0.24);
  --whyp-route: #409cff;
  --whyp-route-casing: #0d2a4a;
  --whyp-glow: rgba(64,156,255,0.40);
  --whyp-glow-strong: rgba(64,156,255,0.65);
  --whyp-glass: rgba(16,22,30,0.75);
  --whyp-glass-line: rgba(255,255,255,0.14);
  --whyp-glass-hi: rgba(255,255,255,0.20);
  --whyp-price-good: #6fddb0;
  --whyp-price-avg: #facc15;
  --whyp-price-bad: #ff7b72;
  --whyp-price-good-soft: rgba(111,221,176,0.16);
  --whyp-price-avg-soft: rgba(250,204,21,0.16);
  --whyp-price-bad-soft: rgba(255,123,114,0.16);
  --whyp-save-bg: rgba(111,221,176,0.16);
  --whyp-save-text: #6fddb0;
  --whyp-pin-good: #6fddb0;
  --whyp-pin-avg: #facc15;
  --whyp-pin-bad: #ff7b72;
  --whyp-on-pin: #0e1012;
  --whyp-tile-hero-from: #0f212a;
  --whyp-tile-hero-to: #0f212a;
  --whyp-tile-hero-text: #ffffff;
  --whyp-tile-hero-text-2: #9db6c2;
  --whyp-map-bg: #10151c;
  --whyp-map-road: #1d2632;
  --whyp-map-road-2: #18202a;
  --whyp-map-water: #13304a;
  --whyp-map-park: #122019;
  --whyp-map-label: #8a96a8;
  --whyp-map-done: #3a4452;
  --whyp-glass-shadow: 0 10px 30px rgba(0,0,0,0.35);
  --whyp-button-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  --whyp-pin-ring: 0 0 0 1px rgba(0,0,0,0.45);
  --whyp-pin-tail-ring: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --whyp-bg: #071318;
  --whyp-bg-2: #0b1b22;
  --whyp-surface: #0f212a;
  --whyp-line: #1d3340;
  --whyp-soft: rgba(255,255,255,0.08);
  --whyp-soft-line: rgba(255,255,255,0.14);
  --whyp-text: #ffffff;
  --whyp-text-2: #9db6c2;
  --whyp-text-drive: #e3ebef;
  --whyp-blue: #065aa9;
  --whyp-on-blue: #ffffff;
  --whyp-blue-text: #409cff;
  --whyp-blue-ring: #409cff;
  --whyp-blue-sel-edge: #409cff;
  --whyp-blue-hi: #8cc4ff;
  --whyp-blue-glass: rgba(6,90,169,1);
  --whyp-blue-glass-edge: rgba(255,255,255,0.30);
  --whyp-blue-tint: rgba(6,90,169,0.32);
  --whyp-pro-bg: rgba(6,90,169,0.24);
  --whyp-route: #409cff;
  --whyp-route-casing: #0d2a4a;
  --whyp-glow: rgba(64,156,255,0.40);
  --whyp-glow-strong: rgba(64,156,255,0.65);
  --whyp-glass: rgba(16,22,30,0.75);
  --whyp-glass-line: rgba(255,255,255,0.14);
  --whyp-glass-hi: rgba(255,255,255,0.20);
  --whyp-price-good: #6fddb0;
  --whyp-price-avg: #facc15;
  --whyp-price-bad: #ff7b72;
  --whyp-price-good-soft: rgba(111,221,176,0.16);
  --whyp-price-avg-soft: rgba(250,204,21,0.16);
  --whyp-price-bad-soft: rgba(255,123,114,0.16);
  --whyp-save-bg: rgba(111,221,176,0.16);
  --whyp-save-text: #6fddb0;
  --whyp-pin-good: #6fddb0;
  --whyp-pin-avg: #facc15;
  --whyp-pin-bad: #ff7b72;
  --whyp-on-pin: #0e1012;
  --whyp-tile-hero-from: #0f212a;
  --whyp-tile-hero-to: #0f212a;
  --whyp-tile-hero-text: #ffffff;
  --whyp-tile-hero-text-2: #9db6c2;
  --whyp-map-bg: #10151c;
  --whyp-map-road: #1d2632;
  --whyp-map-road-2: #18202a;
  --whyp-map-water: #13304a;
  --whyp-map-park: #122019;
  --whyp-map-label: #8a96a8;
  --whyp-map-done: #3a4452;
  --whyp-glass-shadow: 0 10px 30px rgba(0,0,0,0.35);
  --whyp-button-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  --whyp-pin-ring: 0 0 0 1px rgba(0,0,0,0.45);
  --whyp-pin-tail-ring: none;
  color-scheme: dark;
}
/* Styles of the server-rendered country pages (/fuel-prices/, /fr/prix-carburant/), loaded from https://whyp.app/assets/prices.css.
   build.py puts the design tokens in front of this file. Classes come from internal/publicprices/templates in the backend:
   wrap bar logo langs doc meta note prices chart cta button source legal, plus footer, figure and the plain elements. Light first, dark by system setting. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--whyp-bg); color: var(--whyp-text); font: 400 17px/26px var(--whyp-font-ui); -webkit-font-smoothing: antialiased; }
a { color: var(--whyp-blue-text); }
a:focus-visible { outline: 2px solid var(--whyp-blue-text); outline-offset: 3px; }
h1, h2 { margin: 0; font-family: var(--whyp-font-brand); font-weight: 700; color: var(--whyp-text); text-wrap: balance; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--whyp-site-container); margin: 0 auto; padding-left: max(var(--whyp-site-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--whyp-site-gutter), env(safe-area-inset-right, 0px)); }

/* header as on the home page: the logo (assets/logo-light.svg / logo-dark.svg, picked by the system theme) and EN · FR · DE */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--whyp-space-16); padding-block: var(--whyp-space-20); }
.logo { display: inline-flex; align-items: center; min-height: var(--whyp-size-control); color: var(--whyp-text); text-decoration: none; }
.logo img { display: block; height: var(--whyp-site-logo-h); width: auto; aspect-ratio: 2668.05 / 824.4; }
.langs { display: flex; gap: var(--whyp-space-4); font-size: 14px; line-height: 20px; font-weight: 600; }
.langs a { display: inline-flex; align-items: center; min-height: var(--whyp-size-control); padding: 0 var(--whyp-space-10); border-radius: var(--whyp-radius-pill); color: var(--whyp-text-2); text-decoration: none; }
.langs a[aria-current="page"] { background: var(--whyp-blue-tint); color: var(--whyp-blue-text); }

.doc { flex: 1; max-width: 46em; padding-block: var(--whyp-space-32) var(--whyp-space-64); }
.doc h1 { font-size: 26px; line-height: 30px; }
.doc h2 { margin-top: var(--whyp-space-40); font-size: 22px; line-height: 26px; }
.doc .meta { margin-top: var(--whyp-space-8); font-size: 14px; line-height: 20px; color: var(--whyp-text-2); }
.doc h1 + .meta + p { margin-top: var(--whyp-space-16); }
.doc .note { margin-top: var(--whyp-space-12); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--whyp-text-2); }

/* price tables: fuel or area in the first column, price and stations right-aligned; the first column wraps, so the page never scrolls sideways */
table.prices { width: 100%; margin-top: var(--whyp-space-16); overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid var(--whyp-line); border-radius: var(--whyp-radius-card); background: var(--whyp-surface); }
table.prices th, table.prices td { padding: var(--whyp-space-12) var(--whyp-space-16); vertical-align: baseline; text-align: right; font-size: 15px; line-height: 22px; border-top: 1px solid var(--whyp-line); font-variant-numeric: tabular-nums; }
table.prices thead th { border-top: 0; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--whyp-text-2); }
table.prices th:first-child { text-align: left; width: 100%; }
table.prices tbody th { font-weight: 600; }
table.prices td { font-family: var(--whyp-font-mono); font-weight: 600; white-space: nowrap; }

/* the 90-day line: server SVG with currentColor, so it follows the theme */
figure { margin: var(--whyp-space-16) 0 0; padding: var(--whyp-space-16); border: 1px solid var(--whyp-line); border-radius: var(--whyp-radius-card); background: var(--whyp-surface); color: var(--whyp-blue-text); }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--whyp-text-2); font-family: var(--whyp-font-ui); font-size: 24px; } /* the picture shrinks on a phone, so its labels are drawn larger there */

.cta { margin-top: var(--whyp-space-40); padding: var(--whyp-space-24); border: 1px solid var(--whyp-line); border-radius: var(--whyp-radius-panel); background: var(--whyp-pro-bg); }
.cta p + p { margin-top: var(--whyp-space-16); }
.button { display: inline-flex; text-align: center; align-items: center; justify-content: center; min-height: var(--whyp-site-button-h); padding: 0 var(--whyp-space-24); border: 1px solid var(--whyp-blue-glass-edge); border-radius: var(--whyp-radius-pill); background: var(--whyp-blue); color: var(--whyp-on-blue); font-size: 17px; font-weight: 600; text-decoration: none; }
.button:focus-visible { outline: 2px solid var(--whyp-blue-text); outline-offset: 3px; }

footer { border-top: 1px solid var(--whyp-line); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--whyp-space-12) var(--whyp-space-24); padding-block: var(--whyp-space-24) var(--whyp-space-32); font-size: 14px; line-height: 20px; color: var(--whyp-text-2); }
footer .source { flex-basis: 100%; }
footer .legal { display: flex; flex-wrap: wrap; gap: var(--whyp-space-8) var(--whyp-space-20); }
footer a { color: inherit; }

@media (min-width: 761px) {
  .chart text { font-size: 12px; }
  .doc { padding-block: var(--whyp-space-40) var(--whyp-space-64); }
  .doc h1 { font-size: 34px; line-height: 38px; }
  .cta { padding: var(--whyp-space-32); }
}
@media (max-width: 380px) {
  .langs a { padding: 0 var(--whyp-space-8); }
  table.prices th, table.prices td { padding-inline: var(--whyp-space-12); }
}