/* Pages de référencement des bornes (accueil, opérateur, département, ville, ville + opérateur, fiche borne, baromètre) --
   HTML rendu par le serveur (backend/app/seo/render.py), AUCUN script : tri par liens (?tri=), lignes en trop repliées par
   une case à cocher. Présentation : pack_pages_bornes_kargit (13/10/2026). Palette et bandeau/pied du site (design-v3.css).
   Version dans render.py (SEO_CSS_VERSION) : à monter à chaque modification. */
:root {
  --bg:#F4F1EC; --card:#FFFFFF; --card2:#F0EBE4; --line:#E2DBD1; --line2:#EDE8E1; --ink:#221E1A; --ink2:#4E4740; --ink3:#6F675E;
  --rose:#E01B5D; --roseh:#C11550; --teal:#0B5C6B; --mintt:#0B7387; --tealbg:#EEF7F9; --tsub:#CFE6EA;
  --head:#FBF9F6; --cheap:#F6FBF8; --cheapbd:#BFE3CC; --okbg:#E3F3E9; --ok:#1F6B3E; --badge:#000;
  --p0:#2E9E5B; --p1:#8FBF3F; --p2:#F0A11E; --p3:#E2683C; --p4:#C1272D;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0E1116; --card:#1C222B; --card2:#232A34; --line:#2E3641; --line2:#2A313B; --ink:#EAF0F7; --ink2:#C2CBD6; --ink3:#96A1AF;
    --rose:#FF4D80; --roseh:#FF6B95; --teal:#0E4A56; --mintt:#37C2DC; --tealbg:#12303A; --tsub:#B7D6DC;
    --head:#20262F; --cheap:#16251D; --cheapbd:#2B5A3D; --okbg:#1B3A28; --ok:#7FD39E;
  }
}
* { box-sizing: border-box; }
body.kgs { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 Archivo, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
.kgs a { color: var(--mintt); }
.kgs b, .kgs-pill, .kgs-live, .kgs-count, .kgs-kpi b, .kgs table { font-variant-numeric: tabular-nums; }
.kgs-m { display: none; }

/* ---- bandeau (comme #kg-header) */
.kgs-top { display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 28px; background: var(--card); border-bottom: 1px solid var(--line); }
.kgs-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink) !important; font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.kgs-tabs { display: flex; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex: 0 0 auto; }
.kgs-tabs a { padding: 6px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink3) !important; text-decoration: none; }
.kgs-tabs a:hover { color: var(--ink) !important; }
.kgs-baseline { color: var(--ink3); font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgs-account { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.kgs-signup { color: var(--rose) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.kgs-user { display: flex; align-items: center; gap: 9px; color: var(--ink) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.kgs-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--ink2); }

/* ---- page */
.kgs-main { max-width: 1080px; margin: 0 auto; padding: 22px 28px 26px; }
.kgs-crumbs { font-size: 13px; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.kgs-crumbs a { color: var(--ink2); }
.kgs-crumbs > span[aria-hidden] { color: var(--ink3); }
.kgs-h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 14px; font-weight: 800; display: flex; align-items: center; gap: 14px; }
.kgs h2 { font-size: 20px; letter-spacing: -.01em; margin: 34px 0 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kgs h2 small { font-size: 12.5px; font-weight: 400; color: var(--ink3); }
.kgs-intro { font-size: 16px; color: var(--ink2); max-width: 780px; margin: 0 0 18px; }
.kgs-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.kgs-btn, .kgs-btn2 { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; }
.kgs-btn { background: var(--rose); color: #fff !important; }
.kgs-btn:hover { background: var(--roseh); }
.kgs-btn svg { width: 17px; height: 17px; }
.kgs-btn2 { background: var(--card); color: var(--ink) !important; border: 1px solid var(--line); }
.kgs-btn2:hover { border-color: var(--ink3); }
.kgs-updated { font-size: 12.5px; color: var(--ink3); margin: 26px 0 14px; }

/* ---- logo d'opérateur (tuile blanche, coins 28 %) */
.kgs-logo { --s: 22px; width: var(--s); height: var(--s); flex: 0 0 var(--s); display: inline-grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: calc(var(--s) * .28); overflow: hidden; vertical-align: middle; }
.kgs-logo img { width: 80%; height: 80%; object-fit: contain; }
.kgs-logo-txt { font-size: calc(var(--s) * .5); font-weight: 800; color: #6F675E; }
.kgs-h1 .kgs-logo { align-self: flex-start; margin-top: 2px; }

/* ---- pastilles de prix (échelle de la carte des bornes) */
.kgs-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.kgs-p0 { background: var(--p0); color: #FFFFFF; } .kgs-p1 { background: var(--p1); color: #1B2A0E; } .kgs-p2 { background: var(--p2); color: #3A2606; }
.kgs-p3 { background: var(--p3); color: #FFFFFF; } .kgs-p4 { background: var(--p4); color: #FFFFFF; }
.kgs-na { color: var(--ink3); }

/* ---- disponibilité (codes des bulles de la carte) */
.kgs-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.kgs-live i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.kgs-live-ok { color: var(--ok); } .kgs-live-ok i { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.18); }
.kgs-live-full { color: #C1272D; } .kgs-live-full i { background: #C1272D; box-shadow: 0 0 0 3px rgba(193,39,45,.16); }
.kgs-live-out { color: var(--ink3); font-weight: 500; } .kgs-live-out i { background: #A39A90; }

/* ---- chiffres clés + réglette */
.kgs-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: start; margin-bottom: 8px; }
.kgs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kgs-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kgs-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.kgs-kpi span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); line-height: 1.25; }
.kgs-kpi b { display: block; font-size: 24px; font-weight: 800; margin-top: 2px; white-space: nowrap; }
.kgs-kpi small { display: block; font-size: 12.5px; color: var(--ink3); margin-top: 2px; }
.kgs-green { color: var(--ok); } .kgs-teal { color: var(--mintt); }
.kgs-ruler { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; min-width: 0; }
.kgs-rl-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kgs-rl-head span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.kgs-rl-head small { font-size: 12px; color: var(--ink3); white-space: nowrap; }
.kgs-rl-bar { position: relative; display: flex; gap: 2px; height: 8px; margin: 16px 0 14px; }
.kgs-seg { position: relative; height: 8px; border-radius: 4px; background: none; min-width: 0; }
.kgs-seg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; }
.kgs-seg.kgs-p0::before { background: var(--p0); } .kgs-seg.kgs-p1::before { background: var(--p1); } .kgs-seg.kgs-p2::before { background: var(--p2); }
.kgs-seg.kgs-p3::before { background: var(--p3); } .kgs-seg.kgs-p4::before { background: var(--p4); }
.kgs-seg::before { opacity: .35; }
.kgs-seg.kgs-p0, .kgs-seg.kgs-p1, .kgs-seg.kgs-p2, .kgs-seg.kgs-p3, .kgs-seg.kgs-p4 { background: none; }
.kgs-seg i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.kgs-seg.kgs-p0 i { background: var(--p0); } .kgs-seg.kgs-p1 i { background: var(--p1); } .kgs-seg.kgs-p2 i { background: var(--p2); }
.kgs-seg.kgs-p3 i { background: var(--p3); } .kgs-seg.kgs-p4 i { background: var(--p4); }
.kgs-rl-bar em { position: absolute; top: -7px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.kgs-rl-labels { position: relative; height: 36px; font-size: 12px; color: var(--ink3); white-space: nowrap; }
.kgs-rl-labels > span { position: absolute; top: 0; line-height: 1.3; }
.kgs-rl-labels b { display: block; font-size: 13.5px; color: var(--ink); }
.kgs-rl-min { left: 0; } .kgs-rl-max { right: 0; text-align: right; }
.kgs-rl-med { transform: translateX(-50%); text-align: center; }

/* ---- tri */
.kgs-sort { display: flex; align-items: center; gap: 12px; margin: -2px 0 14px; flex-wrap: wrap; }
.kgs-sort > span { font-size: 13px; font-weight: 600; color: var(--ink2); }
.kgs-sort nav { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.kgs-sort a { padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink2) !important; text-decoration: none; white-space: nowrap; }
.kgs-sort a.on { background: #221E1A; color: #fff !important; }
.kgs-sort a:not(.on):hover { background: var(--card2); }
.kgs-sort { scroll-margin-top: 64px; }   /* ancre des liens de tri (sans script) : le titre de la section reste visible */
/* seo.js : la pastille noire glisse vers l'option choisie (comme .kg-nav-pill-indicator du site, 0,22 s) */
.kgs-sort nav { position: relative; }
.kgs-sort-ind { position: absolute; border-radius: 999px; background: #221E1A; transition: left .22s ease, width .22s ease, top .22s ease; z-index: 0; pointer-events: none; }
.kgs-sort.kgs-js a { position: relative; z-index: 1; transition: color .22s ease; }
.kgs-sort.kgs-js a.on { background: none; }
.kgs-loading { opacity: .55; transition: opacity .15s ease; }
@keyframes kgs-enter { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.kgs-enter { animation: kgs-enter .24s ease both; }
@media (prefers-reduced-motion: reduce) { .kgs-sort-ind { transition: none; } .kgs-enter { animation: none; } }

/* ---- repli sans script : une case à cocher (cachée) + son étiquette « Voir les N autres… » */
.kgs-more-in { position: absolute; opacity: 0; pointer-events: none; }
.kgs-tablewrap .kgs-x, .kgs-gridwrap .kgs-x { display: none; }
.kgs-more-in:checked + .kgs-table tr.kgs-x { display: table-row; }
.kgs-more-in:checked + .kgs-grid .kgs-x { display: flex; }
.kgs-more-in:checked + .kgs-table .kgs-more, .kgs-more-in:checked ~ .kgs-more { display: none; }
.kgs-more { display: block; text-align: center; padding: 11px; font-size: 14px; font-weight: 700; color: var(--mintt); cursor: pointer; user-select: none; }
.kgs-more:hover { text-decoration: underline; }
.kgs-more-in:focus-visible + .kgs-table .kgs-more, .kgs-more-in:focus-visible ~ .kgs-more { outline: 2px solid var(--mintt); outline-offset: -2px; border-radius: 10px; }
.kgs-table .kgs-more { border-top: 1px solid var(--line); }

/* ---- tableaux */
.kgs-table { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.kgs-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kgs-table th { background: var(--head); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kgs-table td { padding: 11px 14px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.kgs-table tbody tr:last-child td { border-bottom: 0; }
.kgs-table .kgs-c-num { text-align: right; white-space: nowrap; }
.kgs-table th.kgs-c-num { text-align: right; }
.kgs-table .kgs-c-price { text-align: center; } .kgs-table th.kgs-c-price { text-align: center; }
.kgs-c-name a { font-weight: 700; color: var(--mintt); }
.kgs-c-name small, .kgs-c-sub small { display: block; color: var(--ink3); font-size: 12.5px; }
.kgs-c-sub b { color: var(--mintt); font-weight: 800; }
.kgs-c-op a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink) !important; text-decoration: none; white-space: nowrap; }
.kgs-c-op a:hover { text-decoration: underline; }
.kgs-cheap td { background: var(--cheap); }
.kgs-badge { display: inline-block; margin: 0 0 0 8px; padding: 2px 8px; border-radius: 999px; background: var(--okbg); color: var(--ok); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.kgs-c-name .kgs-m-logo, .kgs-c-name .kgs-m-op, .kgs-c-name .kgs-m-meta, .kgs-c-name .kgs-m-sub { display: none; }
.kgs-table-plain td:first-child { white-space: nowrap; }

/* ---- grilles de liens */
.kgs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kgs-card { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink) !important; }
.kgs-card:hover { border-color: var(--ink3); }
.kgs-card-t { flex: 1; min-width: 0; }
.kgs-card-t b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgs-card-t small { display: block; font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kgs-count { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: var(--card2); font-size: 12px; font-weight: 800; color: var(--ink2); }
.kgs-gridwrap .kgs-more { margin-top: 4px; }

/* ---- abonnements (page opérateur) */
.kgs-subcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kgs-subcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kgs-subcard b { display: block; font-size: 14.5px; }
.kgs-subcard > small { display: block; color: var(--ink3); font-size: 12.5px; }
.kgs-subprice { display: block; font-size: 24px; font-weight: 800; color: var(--mintt); margin: 4px 0 2px; }
.kgs-subprice small { font-size: 13px; font-weight: 600; color: var(--ink3); margin-left: 3px; }
.kgs-best { border: 1px solid var(--mintt); background: var(--tealbg); }

/* ---- FAQ */
.kgs-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 13px; margin-bottom: 8px; }
.kgs-faq summary { cursor: pointer; list-style: none; padding: 13px 44px 13px 16px; font-weight: 700; position: relative; }
.kgs-faq summary::-webkit-details-marker { display: none; }
.kgs-faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: translateY(-70%) rotate(45deg); }
.kgs-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.kgs-faq details p { margin: -4px 16px 14px; color: var(--ink2); }

/* ---- appel à l'action */
.kgs-cta { display: flex; align-items: center; gap: 22px; margin-top: 38px; padding: 22px 26px; background: #0B5C6B; border-radius: 18px; color: #fff; }
.kgs-cta-sheep { flex: 0 0 76px; height: 76px; border-radius: 16px; background: #F4F1EC; display: grid; place-items: center; }
.kgs-cta-t { flex: 1; min-width: 0; }
.kgs-cta-t b { display: block; font-size: 20px; letter-spacing: -.01em; }
.kgs-cta-t span { display: block; color: var(--tsub); font-size: 14px; margin-top: 3px; }
.kgs-cta-btn { flex: 0 0 auto; background: #fff; color: #E01B5D !important; font-weight: 800; padding: 13px 22px; border-radius: 999px; text-decoration: none; }
.kgs-cta-btn:hover { background: #FBE9EF; }

/* ---- badges des magasins + pied (comme #kg-footer) */
.kgs-stores { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.kgs-store { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px 0 11px; border-radius: 8px; background: #000; border: 1px solid #A6A6A6; color: #fff !important; text-decoration: none; }
.kgs-store svg { width: 22px; height: 22px; }
.kgs-store span { display: flex; flex-direction: column; line-height: 1.05; }
.kgs-store small { font-size: 9.5px; font-weight: 500; }
.kgs-store b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.kgs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 22px; flex-wrap: wrap; padding: 12px 28px; margin-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink3); }
.kgs-foot a { color: var(--ink3); text-decoration: none; }
.kgs-foot a:hover { color: var(--ink); text-decoration: underline; }
.kgs-foot-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.kgs-foot-links a { display: inline-flex; align-items: center; gap: 5px; }
.kgs-foot-links svg { width: 12px; height: 12px; }
.kgs-oandev { font-weight: 800; }
.kgs-oandev span:first-child { color: #0B2A5B; } .kgs-oandev span:last-child { color: #2F6FDB; }
@media (prefers-color-scheme: dark) { .kgs-oandev span:first-child { color: #9DB8E8; } }

/* ---- fiche borne : deux colonnes */
.kgs-st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); grid-template-areas: "id price" "live price" "btns price" "more price"; grid-template-rows: auto auto auto 1fr; column-gap: 26px; align-items: start; }
.kgs-st-id { grid-area: id; } .kgs-st-live { grid-area: live; } .kgs-st-btns { grid-area: btns; } .kgs-st-price { grid-area: price; } .kgs-st-more { grid-area: more; }
.kgs-st .kgs-h1 { margin-top: 14px; }
.kgs-addr { color: var(--ink2); margin: 0 0 12px; font-size: 15.5px; }
.kgs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kgs-chips > span { padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.kgs-chips small { color: var(--ink3); font-size: 13px; }
.kgs-livebox { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.kgs-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46,158,91,.18); }
.kgs-livebox-full .kgs-dot { background: #C1272D; box-shadow: 0 0 0 4px rgba(193,39,45,.16); }
.kgs-livebox-out .kgs-dot { background: #A39A90; box-shadow: none; }
.kgs-livebox-t { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.kgs-livebox-t b { font-size: 16px; color: var(--ok); }
.kgs-livebox-full .kgs-livebox-t b { color: #C1272D; } .kgs-livebox-out .kgs-livebox-t b { color: var(--ink2); }
.kgs-livebox-t small { font-size: 12px; color: var(--ink3); }
.kgs-bars { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 6px; }
.kgs-bars i { flex: 1; height: 7px; border-radius: 3px; background: var(--line); }
.kgs-bars i.on { background: #2E9E5B; }
.kgs-pricecard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 6px 22px rgba(34,30,26,.06); }
.kgs-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.kgs-bigprice { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.kgs-bigprice b { font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; white-space: nowrap; }
.kgs-bigprice span { font-size: 14px; color: var(--ink2); line-height: 1.25; }
.kgs-bigprice small { display: block; font-size: 12.5px; color: var(--ink3); }
.kgs-bigprice em { display: block; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mintt); }
.kgs-plines { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.kgs-plines li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; font-size: 14px; }
.kgs-plines li.kgs-subline { border: 1px solid var(--mintt); background: var(--tealbg); }
.kgs-subline b { display: block; color: var(--mintt); }
.kgs-subline small { display: block; color: var(--ink3); font-size: 12.5px; }
.kgs-hourly { margin-bottom: 14px; }
.kgs-hourly-t { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 4px; }
.kgs-hourly-t b { color: var(--mintt); }
.kgs-hourly table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.kgs-hourly th { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); text-align: right; padding: 6px 12px; background: var(--head); }
.kgs-hourly th:first-child, .kgs-hourly td:first-child { text-align: left; }
.kgs-hourly td { padding: 8px 12px; text-align: right; border-top: 1px solid var(--line2); white-space: nowrap; font-weight: 600; }
.kgs-hourly td:first-child { font-weight: 400; }
.kgs-hourly .kgs-pill { min-width: 58px; height: 24px; font-size: 13px; }
/* tranche en cours : cadre intérieur (ombres) plutôt que des bordures, qui doublaient celle du tableau en dernière ligne */
.kgs-hourly tr.kgs-now td { background: var(--tealbg); border-top-color: transparent; box-shadow: inset 0 1px 0 var(--mintt), inset 0 -1px 0 var(--mintt); }
.kgs-hourly tr.kgs-now td:first-child { box-shadow: inset 0 1px 0 var(--mintt), inset 0 -1px 0 var(--mintt), inset 1px 0 0 var(--mintt); }
.kgs-hourly tr.kgs-now td:last-child { box-shadow: inset 0 1px 0 var(--mintt), inset 0 -1px 0 var(--mintt), inset -1px 0 0 var(--mintt); }
.kgs-hourly tr.kgs-now + tr td { border-top-color: transparent; }
.kgs-hourly tbody tr:last-child.kgs-now td:first-child { border-bottom-left-radius: 10px; }
.kgs-hourly tbody tr:last-child.kgs-now td:last-child { border-bottom-right-radius: 10px; }
.kgs-hourly tr.kgs-now td:first-child { color: var(--mintt); font-weight: 700; }

/* Lignes « variable selon l'horaire » : un clic affiche leur grille (boutons radio cachés, sans script ; render.py,
   HOURLY_CHOICES_MAX = 6) -- comme la fiche de l'onglet Bornes du site. */
.kgs-hyp-in { position: absolute; opacity: 0; pointer-events: none; }
.kgs-plines li.kgs-pl { padding: 0; transition: border-color .15s ease, background .15s ease; }
.kgs-pl label { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; cursor: pointer; border-radius: 11px; }
.kgs-pl:hover { border-color: var(--ink3); }
.kgs-pl-t small { display: block; font-size: 12px; color: var(--mintt); }
.kgs-pl-t small::after { content: " ▾"; }
.kgs-hourly-pick .kgs-hb { display: none; }
@keyframes kgs-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kgs-h0:checked ~ .kgs-hourly .kgs-hb0 { display: block; animation: kgs-fade .15s ease; }
.kgs-h0:checked ~ .kgs-plines .kgs-pl0 { border: 1px solid var(--mintt); background: var(--tealbg); }
.kgs-h0:checked ~ .kgs-plines .kgs-pl0 .kgs-pl-t small::after { content: " ▴"; }
.kgs-h0:focus-visible ~ .kgs-plines .kgs-pl0 { outline: 2px solid var(--mintt); outline-offset: 2px; }
.kgs-h1:checked ~ .kgs-hourly .kgs-hb1 { display: block; animation: kgs-fade .15s ease; }
.kgs-h1:checked ~ .kgs-plines .kgs-pl1 { border: 1px solid var(--mintt); background: var(--tealbg); }
.kgs-h1:checked ~ .kgs-plines .kgs-pl1 .kgs-pl-t small::after { content: " ▴"; }
.kgs-h1:focus-visible ~ .kgs-plines .kgs-pl1 { outline: 2px solid var(--mintt); outline-offset: 2px; }
.kgs-h2:checked ~ .kgs-hourly .kgs-hb2 { display: block; animation: kgs-fade .15s ease; }
.kgs-h2:checked ~ .kgs-plines .kgs-pl2 { border: 1px solid var(--mintt); background: var(--tealbg); }
.kgs-h2:checked ~ .kgs-plines .kgs-pl2 .kgs-pl-t small::after { content: " ▴"; }
.kgs-h2:focus-visible ~ .kgs-plines .kgs-pl2 { outline: 2px solid var(--mintt); outline-offset: 2px; }
.kgs-h3:checked ~ .kgs-hourly .kgs-hb3 { display: block; animation: kgs-fade .15s ease; }
.kgs-h3:checked ~ .kgs-plines .kgs-pl3 { border: 1px solid var(--mintt); background: var(--tealbg); }
.kgs-h3:checked ~ .kgs-plines .kgs-pl3 .kgs-pl-t small::after { content: " ▴"; }
.kgs-h3:focus-visible ~ .kgs-plines .kgs-pl3 { outline: 2px solid var(--mintt); outline-offset: 2px; }
.kgs-h4:checked ~ .kgs-hourly .kgs-hb4 { display: block; animation: kgs-fade .15s ease; }
.kgs-h4:checked ~ .kgs-plines .kgs-pl4 { border: 1px solid var(--mintt); background: var(--tealbg); }
.kgs-h4:checked ~ .kgs-plines .kgs-pl4 .kgs-pl-t small::after { content: " ▴"; }
.kgs-h4:focus-visible ~ .kgs-plines .kgs-pl4 { outline: 2px solid var(--mintt); outline-offset: 2px; }
.kgs-h5:checked ~ .kgs-hourly .kgs-hb5 { display: block; animation: kgs-fade .15s ease; }
.kgs-h5:checked ~ .kgs-plines .kgs-pl5 { border: 1px solid var(--mintt); background: var(--tealbg); }
.kgs-h5:checked ~ .kgs-plines .kgs-pl5 .kgs-pl-t small::after { content: " ▴"; }
.kgs-h5:focus-visible ~ .kgs-plines .kgs-pl5 { outline: 2px solid var(--mintt); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kgs-hourly-pick .kgs-hb { animation: none !important; } }
.kgs-cheaper { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: var(--okbg); text-decoration: none; color: var(--ink) !important; margin-bottom: 12px; }
.kgs-cheaper > span:not(.kgs-logo) { flex: 1; min-width: 0; }
.kgs-cheaper b { display: block; color: var(--ok); font-size: 14px; }
.kgs-cheaper small { display: block; font-size: 13px; }
.kgs-cheaper i { font-style: normal; color: var(--ok); font-size: 18px; }
.kgs-note { font-size: 12.5px; color: var(--ink3); margin: 0; }
.kgs-facts { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kgs-facts > div { padding: 11px 15px; border-bottom: 1px solid var(--line2); min-width: 0; }
.kgs-facts > div:nth-child(odd) { border-right: 1px solid var(--line2); }
.kgs-facts span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.kgs-facts b { display: block; font-weight: 400; overflow-wrap: anywhere; }
.kgs-st-more .kgs-sec:first-child h2 { margin-top: 8px; }

/* ---- baromètre */
.kgs-barocards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }

/* ---- tablette */
@media (max-width: 1000px) {
  .kgs-head-grid { grid-template-columns: 1fr; }
  .kgs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kgs-table { overflow-x: auto; }
}

/* ---- téléphone (P7) */
@media (max-width: 759px) {
  .kgs-d { display: none !important; }
  .kgs-m { display: inline; }
  .kgs-top { height: 46px; padding: 0 12px; gap: 8px; position: relative; }
  .kgs-brand { font-size: 17px; gap: 5px; }
  .kgs-brand img { width: 19px; height: 19px; }
  .kgs-baseline { display: none; }
  .kgs-tabs { position: absolute; left: 50%; transform: translateX(-50%); padding: 2px; }
  .kgs-tabs a { padding: 5px 9px; font-size: 11px; }
  .kgs-account { gap: 8px; }
  .kgs-signup { font-size: 12.5px; }
  .kgs-avatar { width: 28px; height: 28px; }
  .kgs-main { padding: 14px 16px 18px; }
  .kgs-h1 { font-size: 25px; margin: 12px 0 10px; gap: 10px; }
  .kgs-h1 .kgs-logo { --s: 34px !important; }
  .kgs h2 { font-size: 18px; margin: 26px 0 10px; }
  .kgs-intro { font-size: 15px; }
  .kgs-btns { flex-direction: column; }
  .kgs-btn, .kgs-btn2 { justify-content: center; width: 100%; }
  .kgs-kpis, .kgs-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgs-kpis-3 .kgs-kpi:nth-child(3) { grid-column: 1 / -1; }
  .kgs-kpi b { font-size: 21px; }
  .kgs-rl-head small { display: none; }
  .kgs-rl-labels { display: flex; justify-content: space-between; gap: 8px; height: auto; }
  .kgs-rl-labels > span { position: static; transform: none; left: auto !important; }
  .kgs-grid, .kgs-subcards, .kgs-barocards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgs-subcards { grid-template-columns: 1fr; }
  .kgs-card { padding: 9px 10px; gap: 8px; }
  .kgs-card-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13.5px; line-height: 1.2; }
  /* lignes des tableaux de bornes en cartes */
  .kgs-tablewrap .kgs-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  .kgs-tablewrap thead { display: none; }
  .kgs-tablewrap table, .kgs-tablewrap tbody { display: block; }
  .kgs-tablewrap tr { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; margin-bottom: 8px; }
  .kgs-tablewrap .kgs-more-in:checked + .kgs-table tr.kgs-x { display: flex; }
  .kgs-tablewrap tr.kgs-cheap { background: var(--cheap); border: 1px solid var(--cheapbd); }
  .kgs-tablewrap td { display: none; padding: 0; border: 0 !important; background: none !important; }
  .kgs-tablewrap td.kgs-c-name, .kgs-tablewrap td.kgs-c-price { display: block; }
  .kgs-tablewrap td.kgs-c-name { flex: 1; min-width: 0; position: relative; padding-left: 46px; min-height: 36px; }
  .kgs-c-name .kgs-m-logo { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  .kgs-tablewrap .kgs-c-name a { color: var(--ink) !important; text-decoration: none; font-size: 14.5px; }
  .kgs-c-name .kgs-m-op { display: inline; }
  .kgs-badge, .kgs-d-where { display: none !important; }
  .kgs-m-meta { display: block !important; font-size: 12.5px; color: var(--ink3); }
  .kgs-m-meta .kgs-live { gap: 4px; }
  .kgs-m-meta .kgs-live i { width: 7px; height: 7px; flex-basis: 7px; box-shadow: none; }
  .kgs-c-name .kgs-m-sub { display: block; font-size: 12.5px; color: var(--ink2); }
  .kgs-m-sub b { color: var(--mintt); }
  .kgs-tablewrap .kgs-more { border: 0; padding: 6px; }
  .kgs-table-plain { overflow-x: auto; }
  /* fiche borne : disponibilité et prix sous le titre, avant les boutons */
  .kgs-st { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "live" "price" "btns" "more"; }
  .kgs-pricecard { padding: 15px; margin-bottom: 16px; }
  .kgs-bigprice b { font-size: 38px; }
  .kgs-hourly th, .kgs-hourly td { padding-left: 8px; padding-right: 8px; }
  .kgs-hourly td:first-child { white-space: normal; }
  .kgs-hourly .kgs-pill { min-width: 52px; }
  .kgs-facts { grid-template-columns: 1fr; }
  .kgs-facts > div { display: flex; justify-content: space-between; gap: 12px; border-right: 0 !important; }
  .kgs-facts span { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; flex: 0 0 auto; }
  .kgs-facts b { text-align: right; font-weight: 600; }
  /* appel, badges, pied */
  .kgs-cta { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px 12px; padding: 18px; }
  .kgs-cta-sheep { width: 52px; height: 52px; border-radius: 12px; }
  .kgs-cta-sheep img { width: 38px; height: 38px; }
  .kgs-cta-t { display: contents; }
  .kgs-cta-t b { font-size: 18px; line-height: 1.2; }
  .kgs-cta-t span { grid-column: 1 / -1; margin-top: 0; }
  .kgs-cta-btn { grid-column: 1 / -1; text-align: center; }
  .kgs-card-t small { white-space: normal; }
  .kgs-foot { flex-direction: column; justify-content: center; text-align: center; padding: 14px 16px 22px; }
  .kgs-foot-links { justify-content: center; }
}