/* Tollcut v2 — mobile-first, thème clair, accent vert « économie ». */
:root {
  --green: #0e9f5d;
  --green-dark: #0a7d49;
  --green-soft: #e6f6ee;
  --blue: #2f6fd6;
  /* Bleu « action » (inspiré du panneau autoroute officiel) : boutons, liens, focus — le vert
     reste réservé aux éléments liés à l'économie réalisée (badges, bandeau de prix, paliers). */
  --action-blue: #1a41b8;
  --action-blue-dark: #0a2a7a;
  --ink: #17241d;
  --muted: #5f6e66;
  --bg: #f4f7f5;
  --card: #ffffff;
  --line: #e3e9e5;
  --danger: #c0392b;
  --danger-soft: #fdeceb;
  --warn: #9a6b00;
  --warn-soft: #fdf1d8;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(20, 40, 30, .08), 0 6px 20px rgba(20, 40, 30, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- barre du haut ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: inherit; text-decoration: none; }
a.brand:hover { opacity: .85; }
a.brand:focus-visible { outline: 2px solid var(--action-blue); outline-offset: 3px; border-radius: 8px; }
.brand svg { border-radius: 8px; display: block; }
.lang {
  font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  padding: 7px 8px;
}
/* actions à droite du header : bouton café + sélecteur de langue groupés */
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.kofi-header {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: var(--green-soft); color: var(--green-dark);
  border: 1px solid #cdeeda; font-size: 13.5px; font-weight: 600;
}
.kofi-header:hover { background: #d8f0e2; }
.kofi-header svg { flex: none; }
/* mobile : icône seule (le libellé prendrait trop de place à côté de la marque + langue) */
@media (max-width: 600px) {
  .kofi-header-label { display: none; }
  .kofi-header { padding: 7px; border-radius: 50%; }
}

/* ---- contenu ---- */
.wrap { max-width: 680px; margin: 0 auto; padding: 16px 16px 48px; }
.tagline { margin: 0; color: var(--muted); font-size: 15px; flex: 1 1 auto; }

/* ---- bouton « Informations » + panneau explicatif ---- */
.tagline-row { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 14px; flex-wrap: wrap; }
.info-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px; font-size: 13px; font-weight: 600;
  color: var(--action-blue-dark); background: #e6ecf9;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.info-btn:hover { border-color: var(--action-blue); }
.info-btn:focus-visible { outline: 2px solid var(--action-blue); outline-offset: 1px; }
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--action-blue); color: #fff; font-size: 12px; font-weight: 700;
  font-style: italic; font-family: Georgia, "Times New Roman", serif; line-height: 1;
}
.info-panel { padding: 16px 18px; margin: 0 2px 14px; }
.info-panel h2 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.info-panel p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.info-panel .info-more { margin-top: 10px; }
.info-panel .info-more a { color: var(--action-blue-dark); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.info-panel .info-more a:hover { text-decoration: underline; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---- formulaire ---- */
.form { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.route-fields { display: flex; flex-direction: column; gap: 10px; position: relative; }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.field label, .field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
/* option télépéage : sa propre ligne pleine largeur (flex-basis:100% pour casser la rangée desktop).
   N'affecte QUE le libellé des instructions (pas le prix : mêmes options avec ou sans badge). */
.tele-toggle { display: flex; align-items: center; gap: 8px; flex-basis: 100%; font-size: 13.5px; color: var(--ink); cursor: pointer; user-select: none; }
.tele-toggle input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex: none; margin: 0; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px;
  padding: 12px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fbfdfc; color: var(--ink);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .lang:focus {
  outline: 2px solid var(--action-blue); outline-offset: 1px; border-color: var(--action-blue);
}
/* champs départ/arrivée en type=search (dissuade les gestionnaires de mots de passe de
   s'y accrocher) — on neutralise l'apparence native pour garder le rendu d'un input texte */
.field input[type="search"] { -webkit-appearance: none; appearance: none; }
.field input[type="search"]::-webkit-search-cancel-button,
.field input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
/* sélecteur de classe véhicule : pictogrammes compacts + popover de détail au survol */
.vclass-group {
  display: inline-flex; gap: 4px;
  padding: 4px; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfdfc;
}
.vclass-opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 42px; padding: 5px 2px 4px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.vclass-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.vclass-icon { width: 26px; height: 16px; display: block; }
.vclass-icon svg { width: 100%; height: 100%; display: block; }
.vclass-num { font-size: 10px; font-weight: 700; line-height: 1; }
.vclass-opt:hover { color: var(--ink); background: #eef2f0; }
.vclass-opt:has(input:checked), .vclass-opt.selected {
  background: #e6ecf9; color: var(--action-blue-dark);
}
.vclass-opt:has(input:focus-visible) { outline: 2px solid var(--action-blue); outline-offset: 1px; }
/* popover de détail : au survol / focus, libellé de la classe au-dessus du picto */
.vclass-pop {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 3px 8px; border-radius: 6px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 600;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 6;
}
.vclass-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--ink);
}
.vclass-opt:hover .vclass-pop, .vclass-opt:focus-within .vclass-pop { opacity: 1; }
/* libellé de la classe sélectionnée, sous la rangée (rappel permanent) */
/* libellé de la classe sélectionnée, en ligne avec le titre du champ (garde la hauteur du champ
   égale à celle d'un input → le bouton Calculer s'aligne sur l'encart en desktop) */
.vclass-current { font-size: 12px; font-weight: 600; color: var(--action-blue-dark); }
.vclass-current:not(:empty)::before { content: " · "; color: var(--muted); font-weight: 400; }

/* enveloppe du bouton d'inversion : le `.swap-spacer` reproduit EXACTEMENT les propriétés
   typographiques de `.field label` (masqué visuellement), afin que le bouton s'aligne au pixel
   près sur la zone de saisie en desktop — quelle que soit la police système réellement rendue,
   plutôt qu'une marge fixe devinée à l'œil (source du désalignement observé). */
.swap-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; flex: none; }
.swap-spacer { display: none; font-size: 13px; font-weight: 600; visibility: hidden; }
.swap {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  cursor: pointer; flex: none;
}
.swap:hover { color: var(--action-blue); border-color: var(--action-blue); }

/* autocomplétion */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 4px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 240px; overflow-y: auto;
}
.ac-list li { padding: 10px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.ac-list li:hover, .ac-list li.active { background: #e6ecf9; }
.ac-list li.empty { color: var(--muted); cursor: default; }
.ac-list li.empty:hover { background: none; }
.ac-list li.ac-hist { display: flex; align-items: center; gap: 8px; }
.ac-hist-ic { flex: none; font-size: 12px; opacity: .55; }
.ac-hist-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-hist-del {
  flex: none; font: inherit; font-size: 17px; line-height: 1;
  width: 22px; height: 22px; padding: 0; margin: -2px;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.ac-hist-del:hover { background: var(--danger-soft); color: var(--danger); }

.go {
  font: inherit; font-size: 17px; font-weight: 700;
  background: var(--action-blue); color: #fff;
  border: 0; border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s;
}
.go:hover { background: var(--action-blue-dark); }
.go:disabled { opacity: .7; cursor: wait; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.err {
  background: var(--danger-soft); color: var(--danger);
  border-radius: 10px; padding: 10px 12px; font-size: 14px;
}

/* ---- résultats ---- */
#results { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
/* l'attribut `hidden` doit l'emporter sur le `display:flex` ci-dessus (sinon le bloc résultats
   — carte vide comprise — s'affiche avant toute recherche) */
#results[hidden] { display: none; }

.banner { padding: 16px; text-align: center; }
.banner-prices { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.banner-prices .strike { text-decoration: line-through; color: var(--muted); font-size: 20px; }
.banner-prices .arrow { color: var(--muted); }
.banner-prices .best { font-size: 32px; font-weight: 800; color: var(--green-dark); letter-spacing: -.02em; }
.banner-save {
  display: inline-block; margin-top: 8px;
  background: var(--green-soft); color: var(--green-dark);
  font-weight: 700; font-size: 15px;
  border-radius: 999px; padding: 5px 14px;
}
.banner-dist { margin-top: 6px; color: var(--muted); font-size: 13px; }

.best-msg { padding: 14px 16px; background: var(--green-soft); border-color: #cdeeda; color: var(--green-dark); font-weight: 600; text-align: center; }

.map-card { overflow: hidden; padding: 0; }
/* puces POI sur la carte (carburant / recharge affichés au clic) */
.poi-marker {
  position: relative; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* picto SVG sur pastille blanche (lisibilité carte) ; couleur = code couleur du type de POI */
.poi-marker-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.poi-marker-emoji .ic { width: 14px; height: 14px; }
.poi-marker-fuel .poi-marker-emoji { color: #a05a00; }
.poi-marker-ev .poi-marker-emoji { color: var(--blue); }
/* badge numéroté "N.M" (arrêt.POI), même langage visuel que .stop-marker (pastille verte des arrêts) */
.poi-marker-num {
  position: absolute; right: -6px; bottom: -4px;
  background: var(--ink); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  border-radius: 999px; padding: 2px 4px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  white-space: nowrap;
}
.poi-marker-fuel .poi-marker-num { background: #a05a00; }
.poi-marker-ev .poi-marker-num { background: var(--blue); }
#map { height: 46vh; min-height: 280px; width: 100%; }
.legend { margin: 0 4px; color: var(--muted); font-size: 12.5px; }

.sections-title { font-size: 17px; margin: 10px 2px 0; }

#sections { display: flex; flex-direction: column; gap: 14px; }

/* vignette de section */
.sec { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* pastille de couleur = couleur du sous-tracé de cette section sur la carte */
.sec-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.sec-net {
  background: #eef2f9; color: var(--blue);
  font-weight: 700; font-size: 12.5px; letter-spacing: .03em;
  border-radius: 6px; padding: 3px 8px;
  white-space: nowrap; max-width: 100%;
}
.badge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; margin-left: auto; }
.badge.reco { background: var(--green-soft); color: var(--green-dark); }
.badge.low { background: #f2f4f3; color: var(--muted); }
/* rappel du trajet de la section (gauche) + plein tarif (droite), tarif en NEUTRE (pas de vert) */
.sec-route { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 15px; }
.sec-route .arr { color: var(--muted); font-weight: 400; padding: 0 4px; }
.sec-route-path { min-width: 0; }
.sec-full-price { flex: none; font-weight: 800; font-size: 19px; color: var(--ink); }
.sec-stops { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sec-stops li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 14px; color: var(--ink);
  background: #fafcfb; border: 1px dashed var(--line); border-radius: 9px;
  padding: 8px 10px;
}
.sec-stops .dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center; margin-top: 1px;
}
.stop-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

/* Timeline « paiement par gare » : entrée → arrêts → sortie. Flèche verticale CONTINUE reliant
   chaque gare à la suivante ; le prix payé s'affiche aligné à droite sur la gare concernée. */
.sec-journey { margin: 0; padding: 0; list-style: none; }
.jn-node {
  position: relative;
  display: grid; grid-template-columns: 24px 1fr; column-gap: 10px;
  align-items: start; padding-bottom: 16px;
}
.jn-node:last-child { padding-bottom: 0; }
.jn-mark {
  grid-column: 1; justify-self: center; position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; box-sizing: border-box;
  font-size: 11.5px; font-weight: 700; color: #fff; margin-top: 1px;
}
/* jalons/flèche aux couleurs de la SECTION (--sec-color posée par le JS sur la carte de section,
   même teinte que le sous-tracé et la chip) ; repli vert si absente */
.jn-stop .jn-mark { background: var(--sec-color, var(--green)); }
.jn-start .jn-mark { background: #fff; border: 2px solid var(--sec-color, var(--green)); }
.jn-start .jn-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sec-color, var(--green)); }
.jn-end .jn-mark { background: var(--sec-color, var(--green-dark)); }
.jn-end .jn-mark::after { content: "■"; font-size: 8px; color: #fff; }
/* flèche continue : ligne du bas du marqueur jusqu'au marqueur suivant + tête au-dessus de celui-ci */
.jn-node:not(:last-child)::before {
  content: ""; position: absolute; left: 11px; top: 25px; bottom: 1px; width: 2px;
  background: var(--sec-color, var(--green));
}
.jn-node:not(:last-child)::after {
  content: ""; position: absolute; left: 7px; bottom: -1px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--sec-color, var(--green));
}
.jn-body { grid-column: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jn-namerow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jn-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
/* badges façon panneau AVANT le nom : n° d'autoroute (rouge officiel) + n° de sortie (panneau) */
.jn-au {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1;
  color: #fff; background: #d2231f; border-radius: 3px; padding: 3px 5px; white-space: nowrap;
}
.jn-exit-badge {
  flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 800;
  line-height: 1; color: var(--ink); background: #fff; border: 1.5px solid var(--ink);
  border-radius: 4px; padding: 2px 5px; white-space: nowrap; cursor: help;
}
/* bloc d'instructions à l'impératif sous chaque gare (sortir / payer / reprendre) — remplace les
   libellés passifs « paiement N · X € » (retour testeur 2026-07-25). Une ligne = un geste : picto + verbe. */
.jn-actions { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.jn-act { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); line-height: 1.35; }
.jn-act .ic { width: 1.05em; height: 1.05em; color: var(--muted); }
/* la reprise immédiate (nouveau ticket) est le geste contre-intuitif du fractionnement → mis en avant */
.jn-act-go { color: var(--green-dark); font-weight: 600; }
.jn-act-go .ic { color: var(--green-dark); }

/* POI (carburant / recharge) sous un arrêt */
.stop-poi { display: flex; flex-wrap: wrap; gap: 6px; }
.poi-none { font-size: 12.5px; color: var(--muted); font-style: italic; }
/* pictos SVG inline (rond-point / carburant / recharge) : taille du texte, couleur du contexte */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; flex: none; }
.poi-pill .ic { margin-right: 5px; }
/* résumé compact dans les tuiles d'option : chaque picto garde sa couleur sémantique habituelle.
   Agrandi + espacé (cf. demande utilisateur : pictos trop petits/serrés en capture) : icône plus
   grande, plus d'air vers son chiffre, et un vrai espacement entre chaque groupe rond-point/
   carburant/recharge (poi-sum-item, un <span> par groupe — un simple espace texte ne suffisait pas). */
.poi-sum { margin-left: 5px; }
.poi-sum .ic { width: 1.15em; height: 1.15em; margin-right: 3px; }
.poi-sum-item { margin-right: 8px; }
.poi-sum-item:last-child { margin-right: 0; }
.poi-sum .ic-fuel { color: #a05a00; }
.poi-sum .ic-ev { color: var(--blue); }
/* alerte rond-point dans le résumé compact : juste le picto ⚠ rouge (libellé en infobulle), à la
   même taille que les pictos voisins (1.15em). On ne signale que le PROBLÈME (rond-point éloigné ou
   absent), pas la présence normale. */
.poi-warn { color: var(--danger); font-size: 1.15em; font-weight: 700; line-height: 1; cursor: help; }
.poi-pill {
  font: inherit; font-size: 12px; font-weight: 600;
  background: #eef2f9; color: var(--blue);
  border: 0; border-radius: 999px; padding: 4px 10px;
  cursor: pointer;
}
.poi-fuel-toggle { background: #fdf1e3; color: #a05a00; }
/* pastille rond-point : uniquement pour un problème (éloigné/absent), style d'alerte rouge cohérent
   avec le ⚠ compact — la présence normale n'affiche plus de pastille (rd-at/rd-near supprimés). */
.rd-pill { cursor: default; background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.rd-warn { margin-right: 3px; font-weight: 700; }
.sec-partial {
  font-size: 12.5px; color: var(--warn);
  background: var(--warn-soft); border-radius: 9px; padding: 7px 10px;
}
.sec-partial::before { content: "⚠ "; }
.freeflow-note {
  padding: 12px 16px; background: var(--warn-soft); border-color: #f0dcae;
  color: var(--warn); font-size: 13px; font-weight: 600;
}
.freeflow-note::before { content: "⚠ "; }
.poi-detail {
  flex-basis: 100%; margin: 2px 0 0; padding: 8px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  font-size: 12.5px; color: var(--muted);
}
/* bouton « Voir sur la carte » en tête du détail POI (déclenche le recentrage, plus l'ouverture) */
.poi-map-btn {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 8px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--blue); background: #eef2f9; border: 0; border-radius: 999px; padding: 4px 10px;
}
.poi-map-btn:hover { background: #e2e9f5; }
.poi-map-btn .ic { width: .95em; height: .95em; }
/* Bannière d'économie carburant : vert = économie (cohérent avec le reste du site) */
.poi-fuel-saving {
  margin: 0 0 3px; padding: 7px 10px;
  background: var(--green-soft); color: var(--green-dark);
  border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.35;
}
.poi-fuel-saving u { text-decoration: none; border-bottom: 2px solid currentColor; }
.poi-fuel-saving-vs { margin: 0 0 8px; font-size: 11px; color: var(--muted); font-style: italic; }
.poi-price-at { margin: 0 0 6px; font-size: 11.5px; color: var(--muted); font-style: italic; }
.poi-price-list, .poi-ev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.poi-price-list li, .poi-ev-list li { display: flex; flex-direction: column; gap: 1px; }
/* aère la liste : fin séparateur horizontal entre chaque station/borne */
.poi-price-list li + li { border-top: 1px solid var(--line); padding-top: 7px; }
.poi-price-name { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.poi-price-num {
  display: inline-block; margin-right: 5px;
  background: var(--green-soft); color: var(--green-dark);
  font-weight: 700; font-size: 11px;
  border-radius: 5px; padding: 1px 5px;
}
.poi-price-addr { color: var(--muted); font-weight: 400; }
.poi-price-values { color: var(--muted); font-size: 12px; }
/* état actif d'une bascule (carburant/recharge ouvert) */
.poi-pill[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px currentColor; }
/* chips (carburant coloré par type, puissance recharge croissante) */
.poi-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
.fuel-chip, .pw-chip {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.fc-diesel { background: #fbf0c9; color: #7a5c00; }   /* gazole/diesel — jaune */
.fc-sp98   { background: #cfe8d6; color: #0b5c32; }   /* SP98 — vert foncé */
.fc-sp95   { background: #e7f7ec; color: #1f8a4c; }   /* SP95 / E10 — vert clair */
.fc-e85    { background: #ece0f6; color: #6b2b8a; }   /* E85 — violet */
.fc-gpl    { background: #ffe1c2; color: #b25e12; }   /* GPL / GPLc — orange clair (bleu réservé à l'électrique) */
.fc-other  { background: #eef0f2; color: #55606b; }
/* puissance de recharge : dégradé de bleu croissant (clair = peu puissant, foncé = puissant) */
.pw-1 { background: #e7f0fb; color: #2b6cb0; }        /* ≤22 kW — AC lente */
.pw-2 { background: #cfe1f6; color: #1e5aa0; }        /* <50 kW — accélérée */
.pw-3 { background: #9fc2ea; color: #123f70; }        /* <150 kW — rapide */
.pw-4 { background: #4a86c8; color: #ffffff; }        /* <300 kW — haute puissance */
.pw-5 { background: #1e5aa0; color: #ffffff; }        /* ≥300 kW — ultra-rapide */
.ev-conn { font-size: 11px; color: var(--muted); align-self: center; }
/* disponibilité horaire d'une borne */
.ev-hours-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: #eef0f2; color: #55606b; }
.ev-hours-chip.ev-24 { background: var(--green-soft); color: var(--green-dark); }
/* tarif : texte libre déclaré par l'opérateur, parfois long → tronqué (texte complet en tooltip) */
.ev-tarif-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; background: #eef0f2; color: #55606b; text-decoration: none; cursor: help; }
.ev-tarif-chip.ev-tarif-link { cursor: pointer; }
/* unité non confirmée : même chip, signalé par une bordure pointillée (incertitude) */
.ev-tarif-chip.ev-tarif-unsure { background: transparent; border: 1px dashed #b7c0c8; }
.ev-tarif-chip.ev-tarif-link:hover { background: #e2e6ea; }
/* accès réservé : signalé en ambre, et la ligne entière estompée */
.ev-access-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: #fdeacf; color: #97590a; }
.poi-ev-list li.ev-reserved { opacity: .62; }

/* toutes les options de fractionnement, par palier de sorties */
.alt-wrap { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.alt-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* économie max de la section, à côté du titre « Choisissez votre fractionnement » (en vert) */
.alt-title-save { flex: none; font-size: 13px; color: var(--green-dark); background: var(--green-soft); border-radius: 999px; padding: 2px 10px; }
.alt-title-save.low { color: var(--muted); background: #f2f4f3; }
/* pastille « recommandé » d'un palier (meilleur compromis rond-point + économie) */
.alt-reco {
  flex: none; align-self: flex-start; font-size: 11px; font-weight: 700;
  background: var(--green-soft); color: var(--green-dark);
  border-radius: 999px; padding: 2px 8px; margin-right: 2px;
}
/* liste dense : pas de carte par option, juste des lignes fines séparées par un filet
   (rendu "tableau compact" — demande user 2026-07-22, à la place des vignettes encadrées). */
.alt-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alt-option { border-bottom: 1px solid var(--line); }
.alt-option:last-child { border-bottom: 0; }
/* séparateur discret de groupe « ── N sorties ── » : libellé centré entre deux filets fins. Le
   groupe précédent ferme sa dernière ligne par la bordure, donc pas de double trait ici. */
.alt-group-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 4px; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.alt-group-sep:first-child { margin-top: 2px; }
.alt-group-sep::before, .alt-group-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* la ligne d'option juste avant un séparateur ne doit pas doubler le filet */
.alt-option:has(+ .alt-group-sep) { border-bottom: 0; }
.alt-option-head {
  width: 100%; font-size: 12.5px;
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; padding: 8px 6px 4px;
}
/* étiquette « Option N : » à largeur fixe : les itinéraires démarrent tous au même point,
   quel que soit le nombre de sorties (repère stable d'un palier à l'autre). */
.alt-ord {
  flex: none; width: 70px; white-space: nowrap;
  font-weight: 700; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* itinéraire inline CONDENSÉ : noms de sortie séparés par une flèche « → » alignée au texte
   (taille normale + vertical-align:middle → plus de décrochage), + éventuelle alerte rond-point. */
.alt-route { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; line-height: 1.6; }
.alt-arrow { color: var(--muted); font-weight: 700; margin: 0 5px; vertical-align: baseline; }
.alt-route .poi-warn { vertical-align: baseline; margin-left: 3px; }
.alt-price { flex: none; margin-left: 16px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alt-price b { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.alt-price .alt-save { font-size: 12px; font-weight: 700; color: var(--green-dark); margin-left: 6px; }
/* bouton « Voir le détail » : discret, aligné sous l'itinéraire */
.alt-detail-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--blue); background: none; border: 0; padding: 0 6px 8px; margin: 0;
}
.alt-detail-btn:hover { text-decoration: underline; }
/* Mobile : l'itinéraire à plusieurs sorties n'a plus la place de tenir sur la même ligne que le
   libellé + le prix (≈110px résiduels sur 375px). On passe en 2 lignes — ligne 1 « Option N : » +
   prix/économie (justifiés), ligne 2 l'itinéraire pleine largeur. Desktop inchangé (une seule ligne). */
@media (max-width: 560px) {
  .alt-option-head { flex-wrap: wrap; align-items: baseline; }
  .alt-ord { order: 1; }
  .alt-price { order: 2; margin-left: auto; }
  .alt-route { order: 3; flex-basis: 100%; margin-top: 3px; }
}
.alt-option-detail[hidden] { display: none; }
.alt-option-detail { padding: 2px 9px 9px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); }

.sec.uncovered { padding: 10px 16px; opacity: .75; flex-direction: row; align-items: center; gap: 10px; box-shadow: none; }
.sec.uncovered .sec-net { background: #f2f4f3; color: var(--muted); }
.sec.uncovered .txt { font-size: 13.5px; color: var(--muted); }

/* marqueurs de carte */
.stop-marker {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); border: 2.5px solid #fff; /* fond surchargé en JS = couleur de la section */
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  color: #fff; font-weight: 800; font-size: 13px;
  display: grid; place-items: center;
  cursor: pointer;
  font-family: inherit;
}
.maplibregl-popup-content { font-family: inherit; font-size: 13.5px; border-radius: 10px; padding: 10px 12px; }
/* bulle POI riche : mêmes infos que le panneau (prix carburant / puissance·horaires·tarif borne) */
.poi-popup { max-width: 240px; }
.poi-popup-head { color: var(--ink); font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.poi-popup-sub { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.poi-popup .poi-chips { margin-top: 5px; }

/* ---- pied de page (liens légaux) ---- */
.site-footer { max-width: 680px; margin: 8px auto 0; padding: 0 16px 32px; text-align: center; }
/* bouton de soutien Ko-fi : simple lien (aucun script tiers, aucun cookie), teinte « économies » */
.kofi-btn {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px;
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  background: var(--green-soft); color: var(--green-dark);
  border: 1px solid #cdeeda; font-size: 13.5px; font-weight: 600;
}
.kofi-btn:hover { background: #d8f0e2; }
.site-footer nav { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.site-footer a, .footer-btn {
  color: var(--muted); font-size: 12.5px; text-decoration: none;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
}
.site-footer a:hover, .footer-btn:hover { color: var(--ink); text-decoration: underline; }

/* modale de suggestion de don (Ko-fi) : overlay centré, douce, fermable */
.don-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(23, 36, 29, .45); }
.don-modal[hidden] { display: none; }
.don-card {
  position: relative; background: var(--card); border-radius: 16px;
  padding: 30px 26px 24px; max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
}
.don-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.don-close:hover { color: var(--ink); }
.don-icon { color: var(--green); margin-bottom: 4px; }
.don-card h2 { margin: 6px 0 10px; font-size: 18px; color: var(--ink); }
.don-card p { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.don-give {
  display: block; width: 100%; box-sizing: border-box; padding: 12px;
  background: var(--green); color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 12px; text-decoration: none;
}
.don-give:hover { background: var(--green-dark); }
.don-secondary { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.don-later, .don-already { background: none; border: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; text-decoration: underline; }
.don-later:hover, .don-already:hover { color: var(--ink); }

/* formulaire de contact */
.contact-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
/* honeypot : hors écran plutôt que display:none (certains bots simples ignorent les styles calculés) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { font-size: 13.5px; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.contact-status.ok { background: var(--green-soft); color: var(--green-dark); }
.contact-status.err { background: var(--danger-soft); color: var(--danger); }

/* ---- page légale (mentions, confidentialité, fractionnement) ---- */
.legal-wrap { padding-top: 8px; }
.legal-back { display: inline-block; margin: 4px 0 10px; font-size: 13.5px; color: var(--action-blue-dark); text-decoration: none; }
.legal-back:hover { text-decoration: underline; }
.legal-wrap h1 { font-size: 21px; margin: 0 0 4px; }
.legal-updated { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; }
.legal-nav { display: flex; flex-direction: column; padding: 6px; margin-bottom: 16px; }
.legal-nav a { padding: 9px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.legal-nav a:hover { background: #e6ecf9; color: var(--action-blue-dark); }
.legal-section { padding: 18px 18px 20px; margin-bottom: 14px; scroll-margin-top: 14px; }
.legal-section h2 { font-size: 17px; margin: 0 0 12px; }
.legal-body p { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body ul { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.legal-body li { margin-bottom: 5px; }
.legal-body a { color: var(--blue); }
.legal-body strong { color: var(--ink); }
/* Divulgation de l'identité de l'éditeur : masquée par défaut, un clic la charge depuis le serveur
   (voir src/server/editor-identity.mjs — elle n'est jamais dans le HTML servi). */
.reveal-btn {
  display: inline-flex; align-items: center; padding: 6px 14px; margin-bottom: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--action-blue-dark); background: #e6ecf9;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.reveal-btn:hover { border-color: var(--action-blue); }
.reveal-btn:focus-visible { outline: 2px solid var(--action-blue); outline-offset: 1px; }
.reveal-btn[disabled] { opacity: .6; cursor: default; }
.legal-body .reveal-note { font-size: 12.5px; color: var(--muted); }
@media (min-width: 720px) {
  .legal-nav { flex-direction: row; }
  .legal-nav a { flex: 1; text-align: center; }
}

/* ---- écran plus large ---- */
@media (min-width: 720px) {
  .wrap { max-width: 860px; }
  .route-fields { flex-direction: row; align-items: flex-end; }
  .swap-wrap { gap: 5px; } /* même gap que `.field` entre son label et son input */
  .swap-spacer { display: block; }
  .form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .route-fields { flex: 1 1 100%; }
  .form > .field { flex: 1; }
  .go { flex: 1; padding: 12px; }
  .err { flex-basis: 100%; }
  #map { height: 420px; }
}