/* Pages par ville (villes.go) : les couleurs de l'app, lisibles sans JavaScript. */
:root {
  --fond: #faf7ef;
  --carte: #ffffff;
  --encre: #1f2937;
  --doux: #6b7280;
  --vert: #15803d;
  --vert-clair: #dcfce7;
  --trait: #e7e1d1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #111a14;
    --carte: #18241c;
    --encre: #ecfdf5;
    --doux: #9ca3af;
    --vert: #4ade80;
    --vert-clair: #14532d;
    --trait: #26362b;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--vert); }
.haut { padding: 12px 16px; border-bottom: 1px solid var(--trait); }
.marque { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; text-decoration: none; color: var(--encre); }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; }
.fil { font-size: 14px; color: var(--doux); }
.fil a { color: var(--doux); }
h1 { color: var(--vert); font-size: 28px; line-height: 1.2; margin: 14px 0 8px; text-wrap: balance; }
h2 { font-size: 19px; margin: 32px 0 10px; text-wrap: balance; }
.intro { margin: 0 0 4px; }
.liens-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lien-moyen { font-weight: 600; }
.maj { margin: 0 0 14px; font-size: 14px; color: var(--doux); }
.cta { display: inline-block; padding: 10px 16px; border-radius: 10px; background: var(--vert); color: #fff; font-weight: 600; text-decoration: none; }
@media (prefers-color-scheme: dark) { .cta { color: #0b1a10; } }
.cta:focus-visible, a:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
.resume { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 20px 0 8px; }
.resume .carte { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--carte); border: 1px solid var(--trait); text-decoration: none; color: var(--encre); }
.resume .carb { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }
.resume b { font-size: 22px; color: var(--vert); font-variant-numeric: tabular-nums; }
.resume .moy { font-size: 13px; color: var(--doux); }
.stations { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: rang; }
.stations li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--carte); border: 1px solid var(--trait); counter-increment: rang; }
.stations li:first-child { border-color: var(--vert); background: var(--vert-clair); }
.stations .nom { font-weight: 600; }
.stations .nom::before { content: counter(rang) ". "; color: var(--doux); font-weight: 400; }
.stations .adr { grid-column: 1; font-size: 14px; color: var(--doux); }
.stations .prix { grid-column: 2; grid-row: 1; font-size: 18px; font-variant-numeric: tabular-nums; }
.stations .age { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--doux); text-align: right; }
.liste ul { list-style: none; padding: 0; margin: 0; columns: 2 240px; column-gap: 24px; }
.liste li { break-inside: avoid; padding: 4px 0; }
.liste li span { display: block; font-size: 13px; color: var(--doux); }
.app { margin-top: 36px; padding: 16px; border-radius: 12px; background: var(--carte); border: 1px solid var(--trait); }
.app p { margin: 0 0 10px; }
.bas { max-width: 760px; margin: 0 auto; padding: 16px 16px 32px; font-size: 13px; color: var(--doux); }
.bas a { color: var(--doux); }

/* Page des prix moyens (prixmoyens.go) */
:root { --hausse: #dc2626; --baisse: #15803d; --courbe: #16a34a; --aire: rgba(22, 163, 74, .14); --grille: #e9e3d3; }
@media (prefers-color-scheme: dark) {
  :root { --hausse: #f87171; --baisse: #4ade80; --courbe: #4ade80; --aire: rgba(74, 222, 128, .16); --grille: #26362b; }
}
.pays { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pays a, .pays span { padding: 5px 12px; border-radius: 999px; font-size: 14px; text-decoration: none; border: 1px solid var(--trait); background: var(--carte); color: var(--encre); }
.pays span { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .pays span { color: #0b1a10; } }
.tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.tete .jour { margin: 0; font-size: 18px; font-weight: 600; }
.tete .maj { margin: 2px 0 0; }
.conseil { display: flex; align-items: center; gap: 12px; max-width: 340px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); }
.conseil img { flex: none; }
.conseil p { margin: 0; font-weight: 600; }
.stats .resume, .cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 22px 0 6px; }
.stats main { max-width: 980px; }
.stats .bas { max-width: 980px; }
.accroche { margin: 10px 0 0; font-size: 18px; max-width: 560px; }
.accroche b { color: var(--vert); }
.cartes .carte { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 14px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); text-decoration: none; color: var(--encre); transition: border-color .15s; }
.cartes .carte:hover { border-color: var(--vert); }
.cartes .carb { grid-column: 1 / -1; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); }
.cartes b { font-size: 32px; line-height: 1.1; color: var(--vert); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spark { width: 96px; height: 30px; }
.spark polyline { fill: none; stroke: var(--courbe); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ecarts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ec { font-size: 12.5px; font-weight: 700; padding: 3px 7px; white-space: nowrap; border-radius: 999px; background: var(--fond); font-variant-numeric: tabular-nums; }
.ec i { font-style: normal; font-weight: 500; color: var(--doux); }
.ec.hausse { color: var(--hausse); }
.ec.baisse { color: var(--baisse); }
.ec.stable { color: var(--doux); }
.plein { grid-column: 1 / -1; font-size: 13px; color: var(--doux); }
.evolution { margin-top: 34px; scroll-margin-top: 12px; }
.periodes { position: relative; }
.periodes input { position: absolute; opacity: 0; pointer-events: none; }
.onglets { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); margin-bottom: 8px; }
.onglets label { padding: 5px 12px; border-radius: 999px; font-size: 14px; cursor: pointer; color: var(--doux); }
.r0:checked ~ .onglets .l0, .r1:checked ~ .onglets .l1, .r2:checked ~ .onglets .l2 { background: var(--vert); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .r0:checked ~ .onglets .l0, .r1:checked ~ .onglets .l1, .r2:checked ~ .onglets .l2 { color: #0b1a10; } }
.r0:focus-visible ~ .onglets .l0, .r1:focus-visible ~ .onglets .l1, .r2:focus-visible ~ .onglets .l2 { outline: 3px solid var(--vert); outline-offset: 2px; }
.g { display: none; padding: 8px 6px 2px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); }
.r0:checked ~ .g0, .r1:checked ~ .g1, .r2:checked ~ .g2 { display: block; }
.graphe { display: block; width: 100%; height: auto; }
.graphe .gr { stroke: var(--grille); stroke-width: 1; }
.graphe .ax { fill: var(--doux); font: 12px system-ui, sans-serif; }
.graphe .ar { fill: var(--aire); }
.graphe .ln { fill: none; stroke: var(--courbe); stroke-width: 2.5; stroke-linejoin: round; }
.graphe .pt { fill: var(--courbe); stroke: var(--carte); stroke-width: 3; }
.graphe .val { fill: var(--encre); font: 700 14px system-ui, sans-serif; }
.faits { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--doux); }
.depts .deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.depts .deux > div { padding: 12px 14px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); }
.depts h3 { margin: 0 0 8px; font-size: 15px; }
.depts ol { margin: 0; padding-left: 22px; }
.depts li { padding: 3px 0; }
.depts li b { float: right; font-variant-numeric: tabular-nums; }
.methode { margin-top: 30px; font-size: 14px; color: var(--doux); }
.methode h2 { color: var(--encre); font-size: 16px; }

/* Page Europe (europe_page.go) */
.classement h2 { margin-top: 18px; }
.rangs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.rangs li { display: grid; grid-template-columns: 28px minmax(110px, 160px) 1fr auto minmax(120px, auto); align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; }
.rangs li:nth-child(odd) { background: var(--carte); }
.rangs li.france { background: var(--vert-clair); border: 1px solid var(--vert); font-weight: 700; }
.rangs .rang { color: var(--doux); font-variant-numeric: tabular-nums; text-align: right; }
.rangs a { color: var(--encre); text-decoration: none; }
.rangs a:hover { color: var(--vert); text-decoration: underline; }
.rangs b { font-variant-numeric: tabular-nums; }
.rangs .ec { justify-self: end; }
.barre { width: 100%; height: 14px; }
.barre .b { fill: var(--courbe); fill-opacity: .55; }
.barre .b.fr { fill-opacity: 1; }
.note { font-size: 13px; color: var(--doux); }
.voisins ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.voisins li { padding: 12px 14px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); }
.voisins li.baisse { border-left: 4px solid var(--baisse); }
.voisins li.hausse { border-left: 4px solid var(--hausse); }
.voisins a { font-weight: 700; font-size: 17px; }
.voisins p { margin: 4px 0 0; font-size: 14px; }
@media (max-width: 560px) {
  .rangs li { grid-template-columns: 24px 1fr auto; }
  .rangs .barre { display: none; }
  .rangs .ec { grid-column: 2 / -1; justify-self: start; }
}

/* Page Monde (monde_page.go) */
.g.visible { display: block; }
.cartes.monde .carte { align-items: baseline; }
.cartes.monde .carte.fr { border-color: var(--vert); background: var(--vert-clair); }
.cartes.monde .gaz { font-size: 15px; font-weight: 600; color: var(--doux); justify-self: end; }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 10px 0 0; font-size: 14px; }
.legende li::before { content: ""; display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--courbe); }
.legende .s1::before { background: #2563eb; }
.legende .s2::before { background: #9333ea; }
.legende .s3::before { background: #dc2626; }
.legende .s4::before { background: #ea580c; }
.graphe .ln.s1 { stroke: #2563eb; } .graphe .val.s1 { fill: #2563eb; }
.graphe .ln.s2 { stroke: #9333ea; } .graphe .val.s2 { fill: #9333ea; }
.graphe .ln.s3 { stroke: #dc2626; } .graphe .val.s3 { fill: #dc2626; }
.graphe .ln.s4 { stroke: #ea580c; } .graphe .val.s4 { fill: #ea580c; }
.graphe .val.s0 { fill: var(--courbe); }
@media (prefers-color-scheme: dark) {
  .graphe .ln.s1 { stroke: #60a5fa; } .graphe .val.s1 { fill: #60a5fa; }
  .graphe .ln.s2 { stroke: #c084fc; } .graphe .val.s2 { fill: #c084fc; }
  .graphe .ln.s3 { stroke: #f87171; } .graphe .val.s3 { fill: #f87171; }
  .graphe .ln.s4 { stroke: #fb923c; } .graphe .val.s4 { fill: #fb923c; }
  .legende .s1::before { background: #60a5fa; }
  .legende .s2::before { background: #c084fc; }
  .legende .s3::before { background: #f87171; }
  .legende .s4::before { background: #fb923c; }
}