/* ==========================================================================
   MON CARBURANT — feuille unique, écrite mobile first.
   1. Jetons        2. Base       3. En-tête    4. Panneau de recherche
   5. Filtres       6. Résumé     7. Onglets    8. Carte
   9. Cartes station              10. États     11. Feuilles (sheets)
   12. Toasts       13. Pied      14. Points de rupture
   ========================================================================== */

/* ============================ 1. JETONS ================================== */
:root {
  /* — Couleurs */
  --bg:#F1F4F6; --bg-tint:#E3EEEB;
  --surface:#FFF; --surface-2:#F4F7F8; --surface-3:#E9EFF1;
  --overlay:rgba(255,255,255,.93);
  --border:#E1E7EA; --border-2:#CBD5DA;
  --text:#0D1519; --text-2:#3C4A53; --muted:#65757F;
  --brand:#0E7C66; --brand-2:#13A183; --brand-soft:#E2F3EF; --brand-ink:#0A5C4C;
  --ring:rgba(19,161,131,.20); --bshadow:rgba(14,124,102,.30);
  --danger:#B43125; --danger-soft:#FBEAE8;
  --warn:#7A5400; --warn-soft:#FCF2DA;
  --radar:#D93A2B;
  --blue:#2E7CF6;
  --gold:#C7900B;
  /* Échelle de prix : vert = bon marché → rouge = cher */
  --px-lo:#0E7C66; --px-lo-soft:#E2F3EF;
  --px-mid:#8A6A00; --px-mid-soft:#FBF3DC;
  --px-hi:#B43125;  --px-hi-soft:#FBEAE8;

  /* — Ombres */
  --sh1:0 1px 2px rgba(13,21,25,.06);
  --sh2:0 1px 2px rgba(13,21,25,.05),0 3px 10px rgba(13,21,25,.06);
  --sh3:0 4px 12px rgba(13,21,25,.08),0 12px 32px rgba(13,21,25,.10);
  --sh4:0 10px 40px rgba(13,21,25,.20);

  /* — Rayons, espaces, mesures */
  --r1:10px; --r2:14px; --r3:18px; --rf:999px;
  --s1:4px; --s2:6px; --s3:8px; --s4:10px; --s5:12px; --s6:14px; --s7:16px; --s8:20px; --s9:24px;
  --hh:56px; --tap:46px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --dur:.18s; --ease:cubic-bezier(.32,.72,0,1);
  --spring:cubic-bezier(.34,1.32,.64,1);
  /* Couleurs de marque, identiques à l'icône. Volontairement figées : un logo
     ne change pas de couleur avec le thème. */
  --lime:#C8FF3D; --ink:#0E1A1C;
}
html[data-theme="dark"] {
  --bg:#0A0E11; --bg-tint:#0D1A18;
  --surface:#141A1E; --surface-2:#1A2126; --surface-3:#232C33;
  --overlay:rgba(20,26,30,.94);
  --border:#242F36; --border-2:#3A4952;
  --text:#E8EEF1; --text-2:#BAC6CD; --muted:#8E9DA7;
  --brand:#23BC99; --brand-2:#34D6B2; --brand-soft:#0F302A; --brand-ink:#7EE8CD;
  --ring:rgba(52,214,178,.24); --bshadow:rgba(0,0,0,.5);
  --danger:#FF8578; --danger-soft:#331B18;
  --warn:#E8B84B; --warn-soft:#2C2513;
  --radar:#FF6B5C;
  --blue:#5A9BFF;
  --gold:#E5B93C;
  --px-lo:#23BC99; --px-lo-soft:#0F302A;
  --px-mid:#E0B44A; --px-mid-soft:#2C2513;
  --px-hi:#FF8578;  --px-hi-soft:#331B18;
  --sh1:0 1px 2px rgba(0,0,0,.5);
  --sh2:0 1px 3px rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.35);
  --sh3:0 4px 14px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.5);
  --sh4:0 12px 48px rgba(0,0,0,.65);
  color-scheme:dark;
}

/* ============================= 2. BASE =================================== */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; color:var(--text);
  background-color:var(--bg);
  background-image:linear-gradient(var(--bg-tint),var(--bg) 320px);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  /* `overflow-x:hidden` sur body fait de body un conteneur de défilement et
     casse le `position:sticky` de l'en-tête. `clip` coupe sans cet effet. */
  overflow-x:hidden;
  overflow-x:clip;
}
body.no-scroll { overflow:hidden; }
h1,h2,h3 { margin:0; font-weight:650; letter-spacing:-.02em; }
p { margin:0; }
button,input,select { font:inherit; color:inherit; }
button { border:0; background:none; cursor:pointer; }
a { color:inherit; }
svg { display:block; flex:none; }
dl,dd,dt { margin:0; }
[hidden] { display:none !important; }
.num { font-variant-numeric:tabular-nums; }

:focus-visible { outline:2.5px solid var(--brand-2); outline-offset:2px; border-radius:8px; }
.sheet-card:focus,.pane-list:focus,.pane-map:focus { outline:none; }

/* Lecteurs d'écran uniquement */
.sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Décalé par `top` et non par `transform` : si la feuille de style n'est pas
   encore appliquée, le lien reste en haut du flux et ne flotte pas au milieu. */
.skip {
  position:fixed; top:-120px; left:50%; z-index:3000;
  transform:translateX(-50%);
  padding:10px 16px; border-radius:var(--rf);
  background:var(--brand); color:#fff; font-size:13.5px; font-weight:650;
  text-decoration:none; box-shadow:var(--sh4);
  transition:top var(--dur) var(--ease);
}
.skip:focus { top:calc(var(--safe-t) + 6px); }

.lnk {
  padding:0; color:var(--brand); font-size:inherit; font-weight:640;
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px;
}
/* Masqué sur petit écran sans écraser le display naturel de l'élément. */
@media (max-width:599px) { .only-wide { display:none !important; } }

/* ============================ 3. EN-TÊTE ================================= */
.hdr {
  position:sticky; top:0; z-index:900;
  height:calc(var(--hh) + var(--safe-t)); padding-top:var(--safe-t);
  display:flex; align-items:center; gap:var(--s3); padding-left:var(--s6); padding-right:var(--s6);
  background:var(--overlay); border-bottom:1px solid var(--border);
  transition:box-shadow .3s ease, border-color .3s ease;
}
@supports (backdrop-filter:blur(10px)) {
  .hdr { backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); }
}
/* Indice de profondeur : l'en-tête ne se détache qu'une fois la page défilée. */
body.scrolled .hdr { border-bottom-color:transparent; box-shadow:0 1px 0 var(--border),0 8px 24px -10px rgba(13,21,25,.22); }
html[data-theme="dark"] body.scrolled .hdr { box-shadow:0 1px 0 var(--border),0 10px 28px -8px rgba(0,0,0,.7); }
.logo { display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto; overflow:hidden; }
/* Identique à l'icône installée sur l'écran d'accueil : la marque doit se
   reconnaître d'un écran à l'autre. */
.logo-mark {
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:9px; overflow:hidden;
  background:var(--lime); color:var(--ink);
  box-shadow:0 2px 8px rgba(120,165,20,.34);
}
html[data-theme="dark"] .logo-mark { box-shadow:0 2px 10px rgba(0,0,0,.5); }
.logo-mark svg { width:100%; height:100%; }
.logo-txt {
  font-size:15px; font-weight:700; letter-spacing:-.025em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.grow { flex:0 1 auto; min-width:0; }
.iconbtn {
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:var(--r1); border:1px solid var(--border);
  background:var(--surface); color:var(--text-2);
  transition:background var(--dur),color var(--dur),transform .1s;
}
.iconbtn:hover { background:var(--surface-2); color:var(--text); }
.iconbtn:active { transform:scale(.93); }
.iconbtn.hl {
  width:auto; padding:0 12px; gap:6px; grid-auto-flow:column;
  background:var(--brand-soft); border-color:transparent; color:var(--brand-ink); font-weight:650;
}
.iconbtn-txt { font-size:13px; }
.iconbtn.busy { animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ==================== 4. PANNEAU DE RECHERCHE ============================ */
.wrap { padding:var(--s7) var(--s6) calc(28px + var(--safe-b)); }
.hero { text-align:center; margin:2px 0 var(--s7); }
.hero h1 { font-size:24px; line-height:1.18; letter-spacing:-.03em; }
.hero em { font-style:normal; color:var(--brand); }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero em {
    background:linear-gradient(100deg,var(--brand-2),var(--brand));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
}
.hero-sub { margin-top:6px; font-size:13.5px; color:var(--muted); }
body.has-results .hero { display:none; }

.panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r3); box-shadow:var(--sh3); padding:var(--s5);
}
/* ---- Barre de contexte repliée ----------------------------------------- */
.ctx { display:none; align-items:center; gap:var(--s1); min-width:0; }
.ctx-i {
  display:inline-flex; align-items:center; gap:5px; min-height:42px; min-width:0;
  padding:0 var(--s4); border-radius:var(--r1); color:var(--text-2);
  font-size:14px; font-weight:620; white-space:nowrap;
}
.ctx-i:first-child { flex:1 1 auto; overflow:hidden; }
.ctx-i:first-child b { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ctx-i b { font-weight:700; color:var(--text); }
.ctx-i svg { color:var(--brand); }
.ctx-i:active { background:var(--surface-2); }
.ctx-i + .ctx-i { position:relative; }
.ctx-i + .ctx-i::before {
  content:""; position:absolute; left:-1px; top:11px; bottom:11px; width:1px; background:var(--border);
}
.ctx-e { display:grid; place-items:center; width:36px; height:40px; flex:none; border-radius:var(--r1); color:var(--muted); }
.ctx-e:active { background:var(--surface-2); }
.panel-x {
  display:none; position:absolute; top:6px; right:6px; z-index:3;
  width:32px; height:32px; place-items:center; border-radius:50%;
  background:var(--surface-2); color:var(--muted);
}
.panel { position:relative; }

/* < 1000 px : dès qu'il y a des résultats, le panneau se replie en une ligne.
   Sur grand écran la place ne manque pas, on garde tout ouvert. */
@media (max-width:999px) {
  body.has-results .panel:not(.expanded) { padding:var(--s1) var(--s2); }
  body.has-results .panel:not(.expanded) > .srow,
  body.has-results .panel:not(.expanded) > .fuels,
  body.has-results .panel:not(.expanded) > .fbar,
  body.has-results .panel:not(.expanded) > .adv { display:none; }
  body.has-results .panel:not(.expanded) .ctx { display:flex; }
  body.has-results .panel.expanded .panel-x { display:grid; }
  body.has-results .panel.expanded { padding-top:var(--s8); }
}

.srow { display:flex; gap:var(--s3); }
.field {
  position:relative; flex:1; min-width:0; display:flex; align-items:center;
  height:var(--tap); background:var(--surface-2);
  border:1.5px solid var(--border); border-radius:var(--r2);
  transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);
}
.field:focus-within { border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 4px var(--ring); }
.field .pin { padding-left:var(--s5); color:var(--muted); }
.field input {
  flex:1; min-width:0; height:100%; border:0; background:none; outline:none;
  padding:0 var(--s3) 0 9px; font-size:16px; letter-spacing:-.01em;
}
.field input::placeholder { color:var(--muted); }
.clr {
  display:none; margin-right:6px; width:32px; height:32px; flex:none;
  place-items:center; border-radius:50%; background:var(--surface-3); color:var(--muted);
}
.clr:hover { background:var(--border-2); color:var(--text); }
.field.filled .clr { display:grid; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:var(--tap); padding:0 var(--s7); border-radius:var(--r2);
  font-size:14.5px; font-weight:640; letter-spacing:-.01em;
  white-space:nowrap; text-decoration:none;
  transition:filter var(--dur),background var(--dur),transform .1s;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:linear-gradient(145deg,var(--brand-2),var(--brand)); color:#fff; box-shadow:0 2px 10px var(--bshadow); }
.btn-primary:hover { filter:brightness(1.06); }
.btn-ghost { background:var(--surface-2); border:1.5px solid var(--border); color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-3); color:var(--text); }
.btn-sq { width:var(--tap); padding:0; flex:none; }
.full-w { width:100%; }

/* — Suggestions */
.sugg {
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r2); box-shadow:var(--sh4);
  max-height:min(52vh,420px); overflow:hidden auto; overscroll-behavior:contain; z-index:1000;
}
.sugg.open { display:block; }
.sugg-hd {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:9px var(--s5) 5px; font-size:10.5px; font-weight:750;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.sugg-hd .lnk { font-size:11px; text-transform:none; letter-spacing:0; }
.sugg-i {
  display:flex; gap:var(--s4); align-items:center; width:100%;
  padding:11px var(--s5); text-align:left; border-bottom:1px solid var(--border);
}
.sugg-i:last-child { border-bottom:0; }
.sugg-i.on,.sugg-i:hover { background:var(--brand-soft); }
.sugg-i > svg { color:var(--muted); }
.sugg-i.on > svg,.sugg-i:hover > svg { color:var(--brand); }
.sugg-i .txt { min-width:0; flex:1; }
.sugg-i b { display:block; font-weight:640; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sugg-i .sub2 { display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* — Pastilles carburant */
.fuels {
  display:flex; gap:var(--s2); margin:var(--s5) calc(-1 * var(--s5)) 0; padding:0 var(--s5) 3px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.fuels::-webkit-scrollbar { display:none; }

/* Dégradé de bord sur les rangées qui débordent : sans lui, rien n'indique
   qu'il reste des carburants ou des rayons à droite. Piloté par JS. */
.fuels.more-r,.seg.more-r {
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
}
.fuels.more-l,.seg.more-l {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);
          mask-image:linear-gradient(90deg,transparent,#000 26px);
}
.fuels.more-l.more-r,.seg.more-l.more-r {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 32px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 32px),transparent);
}
.chip {
  flex:none; min-height:42px; padding:0 var(--s6); scroll-snap-align:start;
  display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center;
  border-radius:var(--r2); border:1.5px solid var(--border);
  background:var(--surface); color:var(--text-2);
  font-size:13.5px; font-weight:640; line-height:1.15;
  transition:background var(--dur),color var(--dur),border-color var(--dur),transform .1s;
}
.chip:hover { border-color:var(--border-2); }
.chip:active { transform:scale(.95); }
.chip .cl { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.chip i { font-style:normal; opacity:.65; font-weight:500; font-size:11.5px; }
.chip .cp { font-size:11px; font-weight:700; opacity:.72; margin-top:1px; font-variant-numeric:tabular-nums; }
.chip[aria-pressed="true"] {
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 2px 8px var(--bshadow);
}
.chip[aria-pressed="true"] i,.chip[aria-pressed="true"] .cp { opacity:.85; }

/* ============================ 5. FILTRES ================================= */
.fbar { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4); min-width:0; }
.fbtn {
  flex:none; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 var(--s5);
  border-radius:var(--rf); border:1.5px solid var(--border);
  background:var(--surface-2); color:var(--text-2); font-size:13.5px; font-weight:640;
  transition:background var(--dur),border-color var(--dur);
}
.fbtn:hover { background:var(--surface-3); }
.fbtn:not([data-n="0"]) { border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft); }
.fbtn .cnt {
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--rf);
  background:var(--brand); color:#fff; font-size:11px; font-weight:750;
  display:none; place-items:center;
}
.fbtn:not([data-n="0"]) .cnt { display:grid; }
.fbtn .chev { transition:transform .2s; }
.panel.open .chev { transform:rotate(180deg); }
.fbar .hint {
  flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
}

.adv { display:none; margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--border); }
.panel.open .adv { display:grid; gap:var(--s5); }
.flabel {
  display:block; margin-bottom:var(--s2); font-size:11px; font-weight:750;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.flabel.mt { margin-top:var(--s7); }
.flabel-x { text-transform:none; letter-spacing:0; font-weight:600; opacity:.8; }

.seg {
  display:flex; gap:3px; padding:3px; background:var(--surface-2);
  border:1.5px solid var(--border); border-radius:var(--r2);
  overflow-x:auto; scrollbar-width:none;
}
.seg::-webkit-scrollbar { display:none; }
.seg.wrap { flex-wrap:wrap; overflow:visible; }
.seg button {
  flex:1 0 auto; min-height:36px; padding:0 var(--s5); border-radius:11px;
  font-size:13px; font-weight:640; color:var(--muted); white-space:nowrap;
  transition:background var(--dur),color var(--dur);
}
.seg button:hover { color:var(--text); }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--text); box-shadow:var(--sh1); }
html[data-theme="dark"] .seg button[aria-pressed="true"] { background:var(--surface-3); }

.pills { display:flex; flex-wrap:wrap; gap:var(--s2); }
.pill {
  display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:0 var(--s5);
  border-radius:var(--rf); border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-2); font-size:12.5px; font-weight:620;
  transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.pill:hover { border-color:var(--border-2); }
.pill small { opacity:.6; font-size:11px; font-variant-numeric:tabular-nums; }
.pill[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }
.pill[aria-pressed="true"] small { opacity:.85; }

.trow { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:var(--tap); }
.trow > span { display:block; min-width:0; }
.trow b { display:block; font-size:14px; color:var(--text); font-weight:620; }
.trow small { display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.sw {
  position:relative; flex:none; width:48px; height:29px; border-radius:var(--rf);
  background:var(--surface-3); border:1.5px solid var(--border);
  transition:background var(--dur),border-color var(--dur);
}
.sw::after {
  content:""; position:absolute; top:2px; left:2px; width:21px; height:21px;
  border-radius:50%; background:var(--surface); box-shadow:var(--sh1);
  transition:transform .22s var(--ease);
}
/* L'interrupteur ne fait que 29 px de haut : on élargit la zone cliquable
   au doigt sans toucher au dessin. */
.sw::before { content:""; position:absolute; inset:-9px -8px; }
.sw[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); }
.sw[aria-pressed="true"]::after { transform:translateX(19px); background:#fff; }
.advft { display:flex; justify-content:flex-end; }

/* — Rappel des filtres actifs */
.fchips { display:none; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.fchips.on { display:flex; }
.fchip {
  display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:0 var(--s3) 0 var(--s5);
  border-radius:var(--rf); background:var(--brand-soft); color:var(--brand-ink);
  font-size:12px; font-weight:650; border:1px solid transparent;
}
.fchip.reset { background:var(--surface-2); color:var(--text-2); border-color:var(--border); padding-right:var(--s5); }
.fchip .x {
  display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,.08); color:inherit;
}
html[data-theme="dark"] .fchip .x { background:rgba(255,255,255,.12); }

/* ---- Bandeau démonstration & diagnostic -------------------------------- */
.demobar {
  display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4);
  padding:var(--s4) var(--s5); border-radius:var(--r2);
  background:var(--warn-soft); color:var(--warn);
  font-size:12.5px; border:1px solid rgba(133,92,0,.22);
}
html[data-theme="dark"] .demobar { border-color:rgba(232,184,75,.24); }
.demobar .dtxt { flex:1; min-width:0; }
.demobar b { font-weight:750; }
.demobar .dx {
  flex:none; min-height:32px; padding:0 var(--s4); border-radius:var(--rf);
  background:rgba(133,92,0,.12); color:inherit; font-size:12px; font-weight:700;
}
html[data-theme="dark"] .demobar .dx { background:rgba(232,184,75,.16); }

.diag { list-style:none; margin:var(--s5) auto 0; padding:0; max-width:340px; text-align:left; display:grid; gap:var(--s2); }
.diag li {
  display:flex; align-items:center; gap:var(--s3);
  padding:9px var(--s4); border-radius:var(--r1);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; color:var(--text-2);
}
.diag li.ok { background:var(--brand-soft); border-color:transparent; color:var(--brand-ink); }
.diag li.ko { background:var(--danger-soft); border-color:transparent; color:var(--danger); }
.diag li.dgn { background:none; border:0; display:block; color:var(--muted); font-size:11.5px; padding:2px var(--s4); }
.diag .dgs { flex:none; }
.diag b { font-weight:750; }

/* ============================= 6. RÉSUMÉ ================================= */
.sum { display:none; margin:var(--s7) 0 var(--s5); }
body.has-results .sum { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; }
.sum-l { min-width:0; flex:1 1 auto; }
.sum h2 { font-size:17px; }
.sum .sub { font-size:12.5px; color:var(--muted); margin-top:2px; }
.sum-r { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); }
.stats { display:flex; gap:var(--s2); flex-wrap:wrap; }
.stat {
  display:flex; flex-direction:column; padding:5px var(--s4); border-radius:var(--r1);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh1);
}
.stat u { font-size:9.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.stat b { font-size:14px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat.lo b { color:var(--px-lo); }
.stat.hi b { color:var(--px-hi); }
.spread {
  display:inline-flex; align-items:center; gap:5px; padding:6px var(--s5); border-radius:var(--rf);
  background:var(--brand-soft); color:var(--brand-ink); font-size:12.5px; font-weight:680;
}

/* ============================= 7. ONGLETS ================================ */
.tabsbar { display:none; }
body.has-results .tabsbar { display:block; }
.tabs { display:flex; gap:3px; padding:3px;
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--r2); }
.tabs button {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; border-radius:11px; font-size:13.5px; font-weight:650; color:var(--muted);
  transition:background var(--dur),color var(--dur);
}
.tabs button[aria-selected="true"] { background:var(--surface); color:var(--text); box-shadow:var(--sh1); }
html[data-theme="dark"] .tabs button[aria-selected="true"] { background:var(--surface-3); }
.tcnt { font-size:11.5px; font-weight:750; opacity:.65; font-variant-numeric:tabular-nums; }

/* Collante uniquement quand les deux panneaux ne cohabitent pas (< 1000 px).
   Le fond opaque est indispensable : les cartes défilent dessous. */
@media (max-width:999px) {
  .tabsbar {
    position:sticky; top:calc(var(--hh) + var(--safe-t)); z-index:800;
    padding:var(--s2) 0 var(--s4); background:var(--bg);
    scroll-margin-top:calc(var(--hh) + var(--safe-t));
    transition:box-shadow .3s ease;
  }
  body.scrolled .tabsbar { box-shadow:0 14px 14px -14px rgba(13,21,25,.3); }
  html[data-theme="dark"] body.scrolled .tabsbar { box-shadow:0 14px 16px -14px rgba(0,0,0,.8); }
}
@media (min-width:1000px) { .tabsbar { display:none !important; } }

.panes { display:grid; gap:var(--s6); }
.panes > * { min-width:0; grid-column:1/-1; }
/* Le panneau qui apparaît glisse au lieu de surgir : la bascule liste/carte
   doit se sentir comme un mouvement, pas comme un remplacement. */
@media (max-width:999px) {
  .pane-list,.pane-map { animation:panein .3s var(--ease) both; }
  @keyframes panein { from { opacity:0; transform:translateY(8px); } }
}
.pane-map { display:none; }
body.has-results.tab-map .pane-map { display:block; }
body.has-results.tab-map .pane-list { display:none; }

/* ============================== 8. CARTE ================================= */
.mapwrap { position:relative; }
#map {
  height:62vh; min-height:280px;
  border-radius:var(--r3); border:1px solid var(--border);
  box-shadow:var(--sh3); background:var(--surface-2); z-index:1;
}
/* Onglet carte : elle doit remplir l'écran une fois la barre d'onglets collée
   en haut (en-tête ~56 + onglets ~50 + respiration). */
@supports (height:100dvh) { #map { height:calc(100dvh - var(--hh) - 132px); min-height:320px; } }
body.map-big #map { height:76vh; }

.mapui { position:absolute; top:var(--s4); right:var(--s4); z-index:500; display:grid; gap:var(--s2); justify-items:end; }
.mpill {
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:36px; padding:0 var(--s5); border-radius:var(--rf);
  background:var(--overlay); border:1px solid var(--border);
  color:var(--text-2); font-size:12.5px; font-weight:640;
  box-shadow:var(--sh2);
}
@supports (backdrop-filter:blur(10px)) { .mpill { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } }
.mpill:active { transform:scale(.95); }
#b-radars[aria-pressed="true"] { background:var(--radar); border-color:var(--radar); color:#fff; }
.mpill.hidden { display:none; }

.legend {
  position:absolute; left:var(--s4); bottom:var(--s4); z-index:500;
  display:flex; gap:var(--s4); padding:7px var(--s4); border-radius:var(--r1);
  background:var(--overlay); border:1px solid var(--border); box-shadow:var(--sh2);
  font-size:11px; font-weight:640; color:var(--text-2);
}
@supports (backdrop-filter:blur(10px)) { .legend { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } }
.legend.dim { opacity:0; pointer-events:none; }
.legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
.legend .l-lo { background:var(--px-lo); }
.legend .l-mid { background:var(--px-mid); }
.legend .l-hi { background:var(--px-hi); }

.map-here {
  position:absolute; z-index:600; left:50%; bottom:var(--s6);
  transform:translateX(-50%) translateY(8px);
  opacity:0; pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.map-here.on { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.map-here .mpill {
  min-height:40px; padding:0 var(--s7);
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 3px 14px var(--bshadow);
}

/* — Marqueurs */
.pp { background:none !important; border:0 !important; }
.pp .b {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-width:58px; height:27px; padding:0 var(--s3) 0 var(--s2); border-radius:var(--rf);
  background:var(--surface); border:1.5px solid var(--border-2); color:var(--text);
  font-size:12px; font-weight:750; font-variant-numeric:tabular-nums;
  box-shadow:var(--sh2); white-space:nowrap; transition:transform .14s;
}
.pp .b svg { width:13px; height:13px; opacity:.75; }
/* Les prix « tombent » sur la carte quand les résultats arrivent. */
.pp .b { animation:pindrop .34s var(--spring) both; }
@keyframes pindrop { from { opacity:0; transform:translateY(-10px) scale(.86); } }
.pp .b::after {
  content:""; position:absolute; bottom:-5px; left:50%; width:8px; height:8px;
  background:inherit; border-right:1.5px solid var(--border-2); border-bottom:1.5px solid var(--border-2);
  transform:translateX(-50%) rotate(45deg);
}
.pp.lo  .b,.pp.lo  .b::after { border-color:var(--px-lo);  color:var(--px-lo);  background:var(--px-lo-soft); }
.pp.mid .b,.pp.mid .b::after { border-color:var(--px-mid); color:var(--px-mid); background:var(--px-mid-soft); }
.pp.hi  .b,.pp.hi  .b::after { border-color:var(--px-hi);  color:var(--px-hi);  background:var(--px-hi-soft); }
.pp.best .b,.pp.best .b::after { background:var(--brand); border-color:var(--brand); color:#fff; }
.pp.best .b { box-shadow:0 3px 12px var(--bshadow); }
.pp.best .b svg { opacity:1; }
.pp.on .b,.pp.on .b::after { background:var(--text); border-color:var(--text); color:var(--surface); }
.pp.on .b { transform:scale(1.16); z-index:5; }
.pp.fav .b::before {
  content:"★"; position:absolute; top:-8px; right:-5px; font-size:11px;
  color:var(--gold); text-shadow:0 0 3px rgba(0,0,0,.5);
}

.rd { background:none !important; border:0 !important; }
.rd .r { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; box-shadow:0 2px 7px rgba(0,0,0,.4); }
.rd .r.cam,.rd .r.feu { background:var(--radar); border:2.5px solid #fff; color:#fff; }
.rd .r.lim {
  background:#fff; border:4px solid var(--radar); color:#111;
  font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;
}

.up { background:none !important; border:0 !important; }
.up .dot {
  width:16px; height:16px; border-radius:50%; background:var(--blue);
  border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.35);
}
.up .halo { position:absolute; inset:-11px; border-radius:50%; background:rgba(46,124,246,.22); animation:pl 2.2s ease-out infinite; }
@keyframes pl { 0% { transform:scale(.55); opacity:.9; } 100% { transform:scale(1.4); opacity:0; } }

/* — Habillage Leaflet */
.leaflet-container { font-family:inherit !important; background:var(--surface-2) !important; }
.leaflet-popup-content-wrapper { background:var(--surface) !important; color:var(--text) !important; border-radius:var(--r2) !important; box-shadow:var(--sh4) !important; }
.leaflet-popup-tip { background:var(--surface) !important; }
.leaflet-popup-content { margin:var(--s5) var(--s6) !important; line-height:1.45 !important; min-width:180px; }
.leaflet-container a.leaflet-popup-close-button { color:var(--muted) !important; padding:6px 6px 0 0 !important; }
.leaflet-bar a { background:var(--surface) !important; color:var(--text) !important; border-color:var(--border) !important; }
.leaflet-bar a:hover { background:var(--surface-2) !important; }
.leaflet-control-attribution { background:var(--overlay) !important; color:var(--muted) !important; font-size:10px !important; }
.leaflet-control-attribution a { color:var(--muted) !important; }
.ppn { font-weight:680; font-size:14px; }
.ppa { font-size:12px; color:var(--muted); margin-top:1px; }
.ppp { font-size:20px; font-weight:750; letter-spacing:-.03em; margin-top:7px; }
.ppr { display:flex; gap:6px; margin-top:9px; }
.ppb {
  flex:1; display:block; text-align:center; padding:9px var(--s5);
  border-radius:var(--r1); background:var(--brand); color:#fff !important;
  text-decoration:none !important; font-weight:650; font-size:13px;
}
.ppb.alt { flex:none; background:var(--surface-2); color:var(--text-2) !important; border:1px solid var(--border); }

/* ======================== 9. CARTES STATION ============================== */
.list { display:grid; gap:var(--s4); }
.st {
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r2); padding:var(--s5); box-shadow:var(--sh2);
  transition:border-color .16s,box-shadow .16s;
  content-visibility:auto; contain-intrinsic-size:auto 190px;
}
.st:hover { border-color:var(--border-2); }
.st.best { border-color:var(--brand); }
.st.on { border-color:var(--brand); box-shadow:0 0 0 3px var(--ring),var(--sh3); }
.st-hd { display:flex; gap:var(--s5); align-items:flex-start; }
.st-rk {
  flex:none; width:22px; height:22px; margin-top:1px; border-radius:7px;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--muted);
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
}
.st.best .st-rk { background:var(--brand); color:#fff; }
.st-id { flex:1; min-width:0; }
.st-nm { display:flex; align-items:center; gap:var(--s2); min-width:0; flex-wrap:wrap; }
.st-nm .nm {
  font-size:15.5px; font-weight:680; letter-spacing:-.02em; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; max-width:100%;
}
button.nm { padding:0; }
button.nm:hover { color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
.st-ad {
  font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.st-pr { text-align:right; flex:none; }
.st-pr .v { display:block; font-size:25px; font-weight:750; letter-spacing:-.04em; line-height:1.02; }
.st-pr .u { font-size:11px; color:var(--muted); font-weight:600; }
.st-pr .d {
  display:inline-block; margin-top:4px; font-size:11px; font-weight:750;
  padding:2px 7px; border-radius:var(--rf);
}
.st-pr .d.lo  { background:var(--px-lo-soft);  color:var(--px-lo); }
.st-pr .d.mid { background:var(--px-mid-soft); color:var(--px-mid); }
.st-pr .d.hi  { background:var(--px-hi-soft);  color:var(--px-hi); }
.st.best .st-pr .v { color:var(--brand); }
/* Variation de prix depuis le dernier passage, collée au prix. */
.st-pr .tr { display:block; margin-top:3px; font-size:11px; font-weight:750; font-variant-numeric:tabular-nums; }
.st-pr .tr.dn { color:var(--px-lo); }
.st-pr .tr.up { color:var(--px-hi); }
.tag .tsub { opacity:.62; font-weight:600; margin-left:4px; }

.rib {
  flex:none; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 6px; border-radius:5px; background:var(--brand); color:#fff;
}
.rib.alt { background:var(--surface-3); color:var(--text-2); }
.rib.gold { background:var(--gold); color:#fff; }

/* Jauge : position du prix entre le mini et le maxi de la zone */
.gauge { position:relative; height:4px; margin:var(--s4) 0 0; border-radius:var(--rf);
  background:linear-gradient(90deg,var(--px-lo),var(--px-mid) 55%,var(--px-hi)); opacity:.28; }
.gauge i {
  position:absolute; top:-3px; left:var(--p,0%); width:10px; height:10px; margin-left:-5px;
  border-radius:50%; background:var(--text); border:2px solid var(--surface); box-shadow:var(--sh1);
}
.st.best .gauge { opacity:.45; }

.st-cost {
  margin-top:var(--s4); padding:var(--s3) var(--s4); border-radius:var(--r1);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; color:var(--text-2);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
}
.st-cost b { font-weight:750; color:var(--text); font-size:13.5px; }
.st-cost .sub2 { color:var(--muted); }
.st-cost .net { font-weight:750; white-space:nowrap; }
.st-cost .net.pos { color:var(--px-lo); }
.st-cost .net.neg { color:var(--px-hi); }
.st.best .st-cost { background:var(--brand-soft); border-color:transparent; }
.st.best .st-cost b,.st.best .st-cost .sub2,.st.best .st-cost .net { color:var(--brand-ink); }

.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:var(--s3); }
.tag {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:620; padding:4px var(--s3); border-radius:7px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); white-space:nowrap;
}
.tag.ok { background:var(--brand-soft); border-color:transparent; color:var(--brand-ink); }
.tag.wn { background:var(--warn-soft); border-color:transparent; color:var(--warn); }
.tag.ko { background:var(--danger-soft); border-color:transparent; color:var(--danger); }
.tag svg { width:12px; height:12px; }

/* Les autres carburants de la station */
.others { display:flex; flex-wrap:wrap; gap:5px; margin-top:var(--s3); }
.oth {
  display:inline-flex; align-items:center; gap:5px; min-height:34px;
  padding:0 var(--s4); border-radius:9px; border:1px dashed var(--border-2);
  background:none; color:var(--muted); font-size:11.5px; font-weight:600;
}
.oth b { color:var(--text-2); font-weight:750; font-variant-numeric:tabular-nums; }
.oth:hover { border-style:solid; border-color:var(--brand); color:var(--brand-ink); }
.oth:hover b { color:var(--brand-ink); }

.spark { display:block; width:64px; height:20px; overflow:visible; }
.spark polyline { fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.st-act { display:flex; gap:var(--s2); margin-top:var(--s5); }
.st-act .btn { flex:1; height:42px; font-size:13.5px; min-width:0; }
.st-act .btn-sq { flex:none; width:42px; padding:0; }
.st-act .btn-sq[aria-pressed="true"] { background:var(--brand-soft); border-color:var(--brand); color:var(--gold); }

/* ============================= 10. ÉTATS ================================= */
/* Squelette : des blocs qui ressemblent à une carte station. Un grand
   rectangle vide se lit comme une panne, pas comme un chargement. */
.sk { display:none; gap:var(--s4); }
.sk.on { display:grid; }
.sk > div {
  border-radius:var(--r2); border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--sh2); padding:var(--s5); display:grid; gap:var(--s3);
}
.sk i {
  display:block; height:12px; border-radius:6px; background:var(--surface-3);
  background-image:linear-gradient(100deg,transparent 20%,rgba(140,160,170,.34) 45%,transparent 70%);
  background-size:300% 100%; animation:sh 1.3s linear infinite;
}
html[data-theme="dark"] .sk i { background-image:linear-gradient(100deg,transparent 20%,rgba(190,210,220,.14) 45%,transparent 70%); }
.sk i.t { width:46%; height:17px; }
.sk i.s { width:72%; }
.sk i.b { width:100%; height:36px; border-radius:var(--r1); margin-top:2px; }
.sk i.p { width:58%; }
@keyframes sh { from { background-position:170% 0; } to { background-position:-70% 0; } }

.state {
  display:none; text-align:center; padding:var(--s9) var(--s8);
  background:var(--surface); border:1px dashed var(--border-2); border-radius:var(--r3);
}
.state.on { display:block; }
.state .em { font-size:34px; line-height:1; }
.state h3 { margin-top:var(--s5); font-size:17px; }
.state p { margin:7px auto 0; max-width:42ch; color:var(--muted); font-size:13.5px; }
.state .btn { margin-top:var(--s6); padding:0 var(--s8); }
.staterow { display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; }
.quick { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; margin-top:var(--s4); }
.quick .pill { background:var(--surface-2); }
.btn-xl { height:54px; font-size:16px; padding:0 var(--s9); width:100%; max-width:340px; }
.orsep { margin-top:var(--s7) !important; font-size:12px !important; color:var(--muted); }

/* Apparition en cascade : donne le sentiment que la liste « arrive ». */
.list > .st,.rec { animation:cin .3s var(--ease) both; }
.list > .st:nth-child(2) { animation-delay:.04s; }
.list > .st:nth-child(3) { animation-delay:.08s; }
.list > .st:nth-child(4) { animation-delay:.12s; }
.list > .st:nth-child(5) { animation-delay:.16s; }
.list > .st:nth-child(n+6) { animation-delay:.2s; }
@keyframes cin { from { opacity:0; transform:translateY(10px); } }
.st:active { transform:scale(.985); }

/* ---- Carte « Notre conseil » -------------------------------------------
   Une seule réponse, lisible sans rien toucher. Couleurs figées en dur pour
   garantir le contraste du texte blanc dans les deux thèmes. */
.rec {
  position:relative; overflow:hidden;
  margin-bottom:var(--s6); padding:var(--s7); border-radius:var(--r3);
  background:linear-gradient(150deg,#127F69,#0A5443); color:#fff;
  box-shadow:0 6px 22px rgba(10,84,67,.28);
}
/* Voile lumineux en haut à gauche : donne du volume sans ajouter d'élément. */
.rec::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 12% -14%,rgba(255,255,255,.18),transparent 62%);
}
.rec > * { position:relative; z-index:1; }
html[data-theme="dark"] .rec {
  background:linear-gradient(150deg,#144137,#0B2A24); color:#EAFBF5;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
}
.rec-k {
  font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  opacity:.72; display:flex; align-items:center; gap:5px;
}
.rec-n { margin-top:var(--s2); font-size:21px; font-weight:750; letter-spacing:-.03em; }
.rec-m { margin-top:3px; font-size:13.5px; opacity:.85; font-variant-numeric:tabular-nums; }
.rec-m b { font-size:19px; font-weight:780; letter-spacing:-.02em; opacity:1; }
.rec-w {
  margin-top:var(--s5); padding:var(--s4) var(--s5); border-radius:var(--r1);
  background:rgba(255,255,255,.14); font-size:13.5px; line-height:1.45;
}
.rec-w b { font-weight:800; }
.rec-a { display:flex; gap:var(--s3); margin-top:var(--s5); }
.rec-a .btn { flex:1; height:48px; font-size:15px; }
.rec-go { background:#fff; color:#0A5443; box-shadow:none; }
.rec-go:hover { background:#fff; filter:brightness(.96); }
html[data-theme="dark"] .rec-go { background:#7EE8CD; color:#08211C; }
.rec-alt { background:rgba(255,255,255,.16); color:inherit; border:0; }
.rec-alt:hover { background:rgba(255,255,255,.24); }

.favs { margin-bottom:var(--s7); }
.secttl {
  display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4);
  font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.secttl svg { color:var(--gold); }

.more {
  width:100%; min-height:46px; border-radius:var(--r2);
  border:1.5px dashed var(--border-2); color:var(--text-2);
  font-size:13.5px; font-weight:640; margin-top:var(--s4);
}
.more:hover { background:var(--surface); border-color:var(--brand); color:var(--brand-ink); }

/* ====================== 11. FEUILLES (SHEETS) ============================ */
.sheet { position:fixed; inset:0; z-index:1500; display:flex; align-items:flex-end; justify-content:center; }
.sheet-bg { position:absolute; inset:0; background:rgba(6,12,15,.55); animation:fade .2s ease; }
@keyframes fade { from { opacity:0; } }
.sheet-card {
  position:relative; width:100%; max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface);
  border-radius:var(--r3) var(--r3) 0 0;
  box-shadow:var(--sh4);
  padding-bottom:var(--safe-b);
  animation:up .28s var(--ease);
}
@supports (max-height:92dvh) { .sheet-card { max-height:92dvh; } }
@keyframes up { from { transform:translateY(100%); } }
.grabber { width:38px; height:4px; border-radius:var(--rf); background:var(--border-2); margin:8px auto 0; }
.sheet-hd {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding:var(--s5) var(--s7) var(--s5); border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface); z-index:2;
}
.sheet-hd h2 { font-size:17px; }
.sheet-body { padding:var(--s7); }
.sheet-ft {
  display:flex; gap:var(--s3); padding:var(--s5) var(--s7) var(--s7);
  border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--surface);
}
.sheet-ft .btn { flex:1; }

.numrow {
  display:flex; align-items:center; gap:var(--s4);
  height:var(--tap); padding:0 var(--s2) 0 var(--s6);
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--r2);
  transition:border-color var(--dur),box-shadow var(--dur);
}
.numrow:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }
.numrow input {
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.numrow input::-webkit-outer-spin-button,
.numrow input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.numrow input[type=number] { -moz-appearance:textfield; }
.numrow .unit { font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap; }
.numrow .stp {
  flex:none; width:34px; height:34px; border-radius:var(--r1);
  display:grid; place-items:center; background:var(--surface); border:1px solid var(--border);
  color:var(--text-2); font-size:18px; font-weight:700; line-height:1;
}
.numrow .stp:first-child { order:-1; margin-left:calc(-1 * var(--s2)); }
.numrow .stp:hover { background:var(--surface-3); color:var(--text); }

.mini { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.mini button {
  min-height:33px; padding:0 var(--s5); border-radius:var(--rf);
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-2); font-size:12.5px; font-weight:620;
}
.mini button[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }

.callout {
  margin-top:var(--s7); padding:var(--s5); border-radius:var(--r2);
  background:var(--brand-soft); color:var(--brand-ink); font-size:13px; font-weight:600;
}
.callout b { font-weight:800; font-variant-numeric:tabular-nums; }
.note { margin-top:var(--s7); font-size:12.5px; color:var(--muted); line-height:1.55; }
.note b { color:var(--text-2); }
.mt { margin-top:var(--s7); }

.hsub {
  margin:var(--s8) 0 var(--s4); font-size:11px; font-weight:750;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.hsub:first-child { margin-top:0; }
.defs { display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s5); align-items:baseline; font-size:13px; }
.defs dt { justify-self:start; }
.defs dd { color:var(--text-2); }
.defs.keys dt { min-width:0; }
kbd {
  display:inline-block; padding:2px 7px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--border-2); border-bottom-width:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; font-weight:650; color:var(--text);
}

/* — Détail station (feuille) */
.shst-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5); }
.shst-p { font-size:30px; font-weight:780; letter-spacing:-.04em; line-height:1; }
.shst-p small { display:block; font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:0; margin-top:3px; }
.shst-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s7); }
.shst-c { padding:var(--s4); border-radius:var(--r1); background:var(--surface-2); border:1px solid var(--border); }
.shst-c u { display:block; font-size:9.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.shst-c b { font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; }
.hours { display:grid; gap:2px; margin-top:var(--s4); font-size:12.5px; }
.hours div { display:flex; justify-content:space-between; gap:var(--s5); padding:3px 0; border-bottom:1px solid var(--border); }
.hours div:last-child { border-bottom:0; }
.hours .today { font-weight:750; color:var(--brand-ink); }
.hours span:last-child { font-variant-numeric:tabular-nums; color:var(--text-2); }

/* ============================= 12. TOASTS ================================ */
.tz {
  position:fixed; z-index:2000; left:50%; top:calc(var(--hh) + var(--safe-t) + 10px);
  transform:translateX(-50%); width:calc(100vw - 28px); max-width:440px;
  display:grid; gap:var(--s3);
}
.toast {
  display:flex; gap:9px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--brand); border-radius:var(--r2);
  box-shadow:var(--sh4); padding:11px var(--s5); font-size:13.5px;
  animation:ti .22s var(--ease);
}
.toast.err { border-left-color:var(--danger); }
.toast .tmsg { flex:1; min-width:0; }
.toast .tact { flex:none; color:var(--brand); font-weight:700; font-size:13px; white-space:nowrap; }
.toast .tx { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:var(--muted); }
.toast .tx:hover { background:var(--surface-3); color:var(--text); }
@keyframes ti { from { opacity:0; transform:translateY(-8px) scale(.97); } }

/* ============================== 13. PIED ================================= */
.foot { margin-top:var(--s9); text-align:center; font-size:11.5px; color:var(--muted); line-height:1.6; }
.foot a { color:var(--text-2); }
.foot-2 { margin-top:4px; }
.foot .lnk { font-size:11.5px; }

/* ====================== 14. POINTS DE RUPTURE ============================ */
/* ---- Téléphones (la grande majorité : 360–430 px) ---------------------- */
@media (max-width:599px) {
  /* Résumé : le titre et les statistiques ne tiennent pas côte à côte. Les
     stats défilent d'un bord à l'autre plutôt que de casser sur deux lignes. */
  body.has-results .sum { display:grid; gap:var(--s3); }
  .sum-r { width:100%; }
  .stats {
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin:0 calc(-1 * var(--s6)); padding:2px var(--s6);
  }
  .stats::-webkit-scrollbar { display:none; }
  .stat { flex:none; }
  /* Le résumé des filtres passe à la ligne au lieu d'être tronqué en « … ». */
  .fbar { flex-wrap:wrap; }
  .fbar .hint { flex:1 0 100%; text-align:left; }
  .sugg { max-height:min(46dvh,380px); }
  /* Ces deux informations sont déjà dans la barre de contexte et dans la
     carte-conseil : les répéter noie le regard. */
  .sum .sub,.sum .spread { display:none; }
}

@media (max-width:480px) {
  /* La colonne de prix mangeait la place du nom de la station. */
  .st { padding:var(--s5) var(--s4); }
  .st-hd { gap:var(--s3); }
  .st-rk { width:20px; height:20px; border-radius:6px; font-size:10.5px; }
  .st-pr .v { font-size:22px; }
  .st-nm .nm { font-size:14.8px; }
  .st-cost { font-size:12px; }
  .st-act { gap:5px; }
  .st-act .btn { height:44px; }          /* cible tactile confortable */
  .st-act .btn-sq { width:44px; }
  .hero h1 { font-size:22px; }
  .quick .pill { min-height:38px; }
  .state { padding:var(--s8) var(--s5); }
}

@media (max-width:359px) {
  .hdr { gap:var(--s1); padding-left:var(--s4); padding-right:var(--s4); }
  .iconbtn { width:34px; height:34px; }
  .logo-txt { font-size:13.5px; }
  .wrap { padding-left:var(--s4); padding-right:var(--s4); }
  .panel { padding:var(--s4); }
  .fuels { margin-left:calc(-1 * var(--s4)); margin-right:calc(-1 * var(--s4)); padding-left:var(--s4); padding-right:var(--s4); }
  .st { padding:11px; }
  .st-pr .v { font-size:22px; }
  .btn { padding:0 var(--s4); font-size:14px; }
  .st-act .btn-sq { width:42px; }
  .st-act .btn { height:42px; }
  .st-act { gap:4px; }
  .map-here .mpill { font-size:12px; padding:0 var(--s5); }
  .shst-grid { grid-template-columns:1fr; }
}

@media (min-width:600px) {
  :root { --hh:60px; }
  .wrap { max-width:760px; margin:0 auto; padding:var(--s9) var(--s9) calc(32px + var(--safe-b)); }
  .hero h1 { font-size:30px; }
  .hero-sub { font-size:14.5px; }
  .panel { padding:var(--s7); }
  .fuels { margin-left:calc(-1 * var(--s7)); margin-right:calc(-1 * var(--s7)); padding-left:var(--s7); padding-right:var(--s7); }
  .st { padding:var(--s6); }
  .st-pr .v { font-size:27px; }
  /* Grille de 6 colonnes : les interrupteurs se rangent côte à côte au lieu
     d'empiler trois bandes pleine largeur qui repoussaient les résultats. */
  .panel.open .adv { grid-template-columns:repeat(6,minmax(0,1fr)); align-items:end; }
  .panel.open .adv > div { grid-column:span 3; }
  .panel.open .adv .full { grid-column:span 6; }
  .panel.open .adv .trow { grid-column:span 3; border-top:1px solid var(--border); padding-top:var(--s3); }
  .panel.open .adv .advft { grid-column:span 6; }
  .sheet { align-items:center; padding:var(--s8); }
  .sheet-card { max-width:460px; border-radius:var(--r3); animation:pop .22s cubic-bezier(.2,.9,.3,1); }
  .grabber { display:none; }
  @keyframes pop { from { opacity:0; transform:scale(.96) translateY(8px); } }
}

@media (min-width:1000px) {
  .wrap { max-width:1200px; }
  .hero h1 { font-size:36px; }
  .tabs { display:none !important; }
  /* Les deux colonnes n'ont de sens qu'avec des résultats : sinon l'accueil,
     le squelette et les messages d'erreur se retrouvaient tassés à mi-largeur. */
  body.has-results .panes { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; }
  body.has-results .pane-list { order:1; grid-column:1; }
  body.has-results .pane-map  { order:2; grid-column:2; position:sticky; top:calc(var(--hh) + var(--safe-t) + 18px); display:block; }
  body.has-results.tab-map .pane-list { display:block; }
  #map,body.map-big #map { height:calc(100vh - var(--hh) - 60px); max-height:820px; }
  @supports (height:100dvh) { #map,body.map-big #map { height:calc(100dvh - var(--hh) - 60px); } }
  #b-expand { display:none; }
  .st-act .btn { height:40px; }
  .panel.open .adv .trow { grid-column:span 2; }
}

/* Retour au toucher sur tout ce qui est cliquable : sur mobile, l'enfoncement
   remplace le survol qui n'existe pas. */
.pill,.seg button,.mini button,.oth,.fchip,.mpill,.tabs button,.more,.fbtn,.ctx-i,.ctx-e,.sugg-i,.stp {
  transition:transform .12s var(--ease),background var(--dur),color var(--dur),border-color var(--dur);
}
.pill:active,.seg button:active,.mini button:active,.oth:active,.fchip:active,
.tabs button:active,.more:active,.fbtn:active,.sugg-i:active,.stp:active { transform:scale(.95); }
.rec-a .btn:active { transform:scale(.97); }

@media (hover:none) {
  .iconbtn:hover,.btn-ghost:hover,.fbtn:hover,.pill:hover,.more:hover,.oth:hover,
  .btn-primary:hover,.sugg-i:hover,button.nm:hover { background:inherit; filter:none; text-decoration:none; }
  .sugg-i:hover { background:inherit; }
}

@media (prefers-contrast:more) {
  :root { --border:#98A6AE; --border-2:#6B7B85; --muted:#4A585F; }
  html[data-theme="dark"] { --border:#5A6B75; --border-2:#7E8F99; --muted:#AFBEC7; }
  .st,.panel,.stat { border-width:1.5px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print {
  .hdr,.panel,.tabs,.pane-map,.foot,.tz,.sheet,.more,.st-act,.fchips,.skip { display:none !important; }
  body { background:#fff; color:#000; }
  .st { break-inside:avoid; box-shadow:none; border-color:#999; }
  .sum { display:block !important; }
}