/* essenceo.fr — design system */
:root {
  --ink: #16202a;
  --ink-soft: #48566a;
  --muted: #7c8798;
  --line: #e6eaf0;
  --line-soft: #eff2f6;
  --bg: #f6f8fb;
  --card: #ffffff;
  --brand: #0aa05a;
  --brand-dark: #078048;
  --brand-tint: #e8f7ef;
  --accent: #ff7a1a;
  --shadow: 0 1px 2px rgba(20,30,45,.06), 0 6px 20px rgba(20,30,45,.06);
  --shadow-lg: 0 10px 40px rgba(20,30,45,.14);
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1120px;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.ic { width: 19px; height: 19px; flex: none; display: inline-block; vertical-align: -.22em; }
.ic-lg { width: 24px; height: 24px; }
.ic-sm { width: 15px; height: 15px; vertical-align: -.18em; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.02em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
img { max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.28rem; color: var(--ink); letter-spacing: -.03em; }
.logo:hover { text-decoration: none; }
.logo .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.logo-mark { width: 30px; height: 30px; display: block; flex: none; }
.logo-txt { display: inline-flex; align-items: baseline; }
.logo b { color: var(--brand); }
.nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
/* nowrap : un libellé de menu ne se casse JAMAIS en deux lignes. Sans ça, quand
   la place manque, les liens se replient sur 2 lignes au lieu de déborder — le
   header grandit et se chevauche au lieu de signaler franchement le manque. */
.nav a { color: var(--ink-soft); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.nav a:hover { color: var(--brand-dark); text-decoration: none; }
/* Liens du menu desktop : inline-flex pour un gap icône/libellé EXACT (l'espace
   typographique du HTML varie avec la police) et un centrage vertical fiable.
   L'icône reste discrète et ne s'allume qu'au survol / sur la page active — même
   convention que .rt-mode ailleurs sur le site. */
.nav a.hide-sm { display: inline-flex; align-items: center; gap: 6px; }
.nav a.hide-sm .ic { color: var(--muted); transition: color .15s; }
.nav a.hide-sm:hover .ic { color: var(--brand); }
.nav a.hide-sm.on { color: var(--brand-dark); font-weight: 700; }
.nav a.hide-sm.on .ic { color: var(--brand); }
.nav a.btn { color: #fff; }
.nav a.btn:hover { color: #fff; }
.nav a.btn .ic { color: #fff; margin-right: 3px; }
/* Bouton « Autour de moi » actif : inversé (fond blanc, bord + texte verts) */
.nav a.btn.on { background: #fff; color: var(--brand-dark); box-shadow: inset 0 0 0 1.5px var(--brand); }
.nav a.btn.on:hover { background: var(--brand-tint); color: var(--brand-dark); }
.nav a.btn.on .ic { color: var(--brand-dark); }
/* Bouton localisation compact (mobile) à gauche du burger */
.nav a.loc-btn { display: none; color: var(--brand); }
.nav a.loc-btn .ic { width: 22px; height: 22px; margin: 0; }
.nav a.loc-btn:hover { border-color: var(--brand); background: var(--brand-tint); }
.nav a.loc-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Recherche du header (loupe) ─────────────────────────────────────────
   Même bouton que la cloche / le compte (44×42) pour une rangée homogène. */
.search-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; color: var(--brand); }
.search-btn .ic { width: 22px; height: 22px; }
.search-btn:hover { border-color: var(--brand); background: var(--brand-tint); }
.hsearch[hidden] { display: none; }
/* ORDI : recouvre le header sur toute sa largeur. `fixed` calé sur le viewport
   (le panneau vit HORS du header — cf. layout.php : le backdrop-filter du header
   captive les descendants fixed). z-index 60 > 50 du header → il passe dessus.
   Les suggestions tombent dessous via .ac (absolute/top:100%) → d'où le
   .hsearch-in en position:relative. */
.hsearch { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 60; border-bottom: 1px solid var(--line); }
.hsearch-in { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.hsearch-bar { display: flex; align-items: center; gap: 12px; height: 61px; }
.hsearch-ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
/* Pas d'`outline:none` ici : le halo de focus global (input:focus-visible) doit
   s'appliquer — c'est l'indicateur d'accessibilité de tous les champs du site.
   `padding` explicite : sans lui l'input garde le 1px/2px par défaut du navigateur,
   et le texte vient coller au halo de focus (qui épouse la boîte à 2px près). */
.hsearch-bar input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--ink); padding: 9px 12px; }
.hsearch-bar input::-webkit-search-cancel-button { display: none; }
/* Croix ROUGE sur rond BLANC. Le liseré n'est pas décoratif : le panneau est
   blanc, sans lui le rond disparaîtrait. Même construction que les boutons du
   header (fond blanc + 1px var(--line)) ; rouge #e8330a = celui du badge de la
   cloche, à deux doigts de là. Teinte de survol reprise de .notif-ic.up. */
.hsearch-x { flex: none; background: #fff; border: 1px solid var(--line); width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #e8330a; display: flex; align-items: center; justify-content: center; }
.hsearch-x:hover { border-color: #e8330a; background: #fdecec; }

/* Menu hamburger (mobile) */
.burger { display: none; flex-direction: column; justify-content: center; gap: 4.5px; width: 44px; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; }
.burger span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .26s cubic-bezier(.2,.9,.3,1), opacity .2s; }
body.drawer-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.drawer-open .burger span:nth-child(2) { opacity: 0; }
body.drawer-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer[hidden] { display: none; }
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer-bd { position: absolute; inset: 0; background: rgba(16,24,34,.5); opacity: 0; transition: opacity .25s; }
.drawer.open .drawer-bd { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(84vw, 320px); background: #fff; box-shadow: -12px 0 44px rgba(16,24,34,.28); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: 14px 18px calc(20px + env(safe-area-inset-bottom)); }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.drawer-close { background: var(--line-soft); border: 0; width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.drawer-nav { display: flex; flex-direction: column; margin-top: 8px; overflow-y: auto; }
.drawer-nav a { display: flex; align-items: center; gap: 14px; padding: 15px 6px; font-weight: 600; font-size: 1.06rem; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.drawer-nav a .ic { width: 21px; height: 21px; color: var(--brand); }
.drawer-nav a:active { background: var(--brand-tint); }
.drawer-nav a:hover { color: var(--brand-dark); text-decoration: none; }
.drawer-nav a.on { background: var(--brand-tint); color: var(--brand-dark); border-radius: 10px; }
/* CTA « Autour de moi » mis en avant en tête du drawer */
.drawer-cta { background: var(--brand); color: #fff !important; border-radius: 12px !important; border-bottom: 0 !important; margin-bottom: 10px; padding: 14px 16px !important; box-shadow: 0 4px 14px rgba(10,160,90,.28); }
.drawer-cta .ic { color: #fff !important; }
.drawer-cta:hover, .drawer-cta:active { background: var(--brand-dark); color: #fff; }
body.drawer-open { overflow: hidden; }
/* Bascule vers le burger à 1080px (et non 860) : le contenu est plafonné à
   --maxw (1120px), donc le menu ne dispose JAMAIS que de ~939px une fois le logo
   posé. En dessous de ~1080px de fenêtre il n'y a pas la place des 6 libellés —
   l'ancien seuil à 860px laissait donc une plage entière (860→1160px, soit les
   portables courants) où la barre débordait en silence. Ce seuil doit rester
   cohérent avec `.nav a.hide-sm { display: none }` : mêmes bornes, sinon on
   récupère un header sans liens ET sans burger. */
/* MOBILE : plein écran (façon Amazon) — le champ en haut, les suggestions sur
   toute la hauteur restante, une croix pour sortir. Même DOM que l'ordi. */
@media (max-width: 760px) {
  /* top/left/right sont déjà à 0 : `bottom:0` suffit à passer en plein écran. */
  .hsearch { bottom: 0; z-index: 130; border-bottom: 0; display: flex; flex-direction: column; }
  /* `margin: 0` OBLIGATOIRE : le `margin: 0 auto` du desktop (centrage) s'applique
     ici à un flex item, or une marge auto sur l'axe transverse ANNULE l'étirement
     et centre l'élément à la largeur de son contenu — la barre et la liste
     tombaient à 308px au lieu de 390. */
  .hsearch-in { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: none; margin: 0; padding: 0 14px env(safe-area-inset-bottom); }
  .hsearch-bar { height: 58px; border-bottom: 1px solid var(--line); }
  .hsearch-bar input { font-size: 1.06rem; }
  /* La liste quitte le mode « dropdown flottant » pour remplir la page.
     Sélecteur à 2 classes VOLONTAIREMENT : `.ac` (1 classe) est déclaré plus bas
     dans le fichier — à spécificité égale il gagnerait, une media query n'ajoutant
     aucune spécificité. C'est ce qui laissait la liste en absolute à 308px de large. */
  .hsearch .hsearch-ac { position: static; flex: 1; min-height: 0; overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; }
  .hsearch .hsearch-ac a { padding: 15px 4px; }
  body.hsearch-open { overflow: hidden; }
}

@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .nav { gap: 10px; }
  .nav a.hide-sm { display: none; }
  .nav a.loc-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-bd, .burger span, .btn, .site-header { transition: none !important; }
}
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.btn.sm { padding: 8px 14px; font-size: .88rem; }

/* Encart « À lire » (bouclage page-outil → article de blog) */
.blog-cta-sec { padding-top: 8px; }
.blog-cta { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow); transition: border-color .15s, transform .08s, box-shadow .15s; }
.blog-cta:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.blog-cta-ic { display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; background: var(--brand-tint); border-radius: 12px; }
.blog-cta-ic .ic { color: var(--brand); width: 22px; height: 22px; }
.blog-cta-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.blog-cta-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }
.blog-cta b { color: var(--ink); font-size: 1.02rem; line-height: 1.25; }
.blog-cta-go .ic { color: var(--muted); transform: rotate(-90deg); }
.blog-cta:hover .blog-cta-go .ic { color: var(--brand); }

/* Fuel selector */
.fuelbar { display: flex; gap: 6px; flex-wrap: wrap; }
.fuelbar a {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft); font-weight: 600; font-size: .88rem;
}
.fuelbar a:hover { border-color: var(--brand); text-decoration: none; }
.fuelbar a.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* App hero */
.app-hero {
  /* Cercle décoratif en dégradé RADIAL (fond, clippé au bloc) au lieu d'un ::after
     absolu — ça évite le overflow:hidden qui coupait la liste de suggestions. */
  background: radial-gradient(340px 340px at calc(100% + 20px) -60px, rgba(255,255,255,.09), transparent 70%),
              linear-gradient(160deg, #063d24 0%, #0aa05a 100%);
  color: #fff; padding: 46px 0 40px; position: relative;
}
.app-hero-top { position: relative; z-index: 1; }
.app-hero h1 { color: #fff; font-size: clamp(1.7rem, 4.2vw, 2.6rem); }
.app-hero h1 span { color: #bff4d6; }
.app-hero .lead { color: rgba(255,255,255,.9); font-size: 1.08rem; margin: 0; }
.app-searchrow { position: relative; z-index: 40; margin-top: 22px; display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-searchrow .searchbox { flex: 1 1 auto; min-width: 260px; max-width: none; margin: 0; }
.geo-hero { flex: none; background: #fff; color: var(--brand-dark); white-space: nowrap; padding: 15px 24px; box-shadow: var(--shadow); }
.geo-hero:hover { background: #eafaf1; color: var(--brand-dark); }
.hero-note { position: relative; z-index: 1; margin: 12px 0 0; color: rgba(255,255,255,.92); font-size: .9rem; font-weight: 500; }
.hero-note:empty { display: none; }
.app-searchrow .fuelbar a { background: rgba(255,255,255,.14); border-color: transparent; color: #eafaf1; }
.app-searchrow .fuelbar a:hover { background: rgba(255,255,255,.26); }
.app-searchrow .fuelbar a.on { background: #fff; color: #063d24; border-color: #fff; }

/* Locate CTA */
#locate-cta { margin-top: -26px; margin-bottom: 10px; position: relative; z-index: 3; }
.locate-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 20px 24px; display: flex; align-items: center; gap: 20px;
}
.locate-ico { font-size: 2rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--brand-tint); border-radius: 14px; flex: none; }
.locate-actions { display: flex; gap: 8px; flex: none; }
.locate-card .btn { flex: none; }
.locate-card.approx { border-color: #ffd9b0; background: #fff9f2; }
.locate-card.approx .locate-ico { background: #fff3e6; }

/* Résultats app */
.app-results { padding-top: 34px; padding-bottom: 40px; scroll-margin-top: 74px; }

/* Bandeau stats */
.statband { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.statband-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.statband .stats { display: flex; gap: 22px; }
.statband .stat { background: transparent; padding: 0; text-align: left; }
.feat-ico { width: 48px; height: 48px; display: grid; place-items: center; background: var(--brand-tint); border-radius: 13px; margin-bottom: 12px; color: var(--brand-dark); }
.feat-ico .ic { width: 26px; height: 26px; }
.btn .ic { width: 17px; height: 17px; }
.pill .ic { width: 13px; height: 13px; vertical-align: -.15em; }
.loc .ic { color: var(--brand); vertical-align: -.18em; }

/* Hero (legacy) */
.hero { padding: 46px 0 34px; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 span { color: var(--brand); }
.hero p.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 34ch; }
.searchbox { position: relative; margin-top: 22px; }
.searchbox input {
  width: 100%; padding: 16px 18px 16px 48px; font-size: 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237c8798' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center;
  box-shadow: var(--shadow);
}
.searchbox input:focus { outline: none; border-color: var(--brand); }
.ac { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 20; display: none; }
.ac a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 16px; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.ac a:last-child { border-bottom: 0; }
.ac a:hover, .ac a.hl { background: var(--brand-tint); text-decoration: none; }
.geo-btn { margin-top: 12px; }
.hero-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; border: 1px solid var(--line); }
.hero-card h3 { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.stat { background: var(--bg); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.stat .v { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.stat .k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* Sections */
.section { padding: 30px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head p { margin: 0; color: var(--muted); }

/* Cards grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* Station card */
.station {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform .08s, box-shadow .15s, border-color .15s; overflow: hidden;
}
.station:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #d7dde6; }
.station-main { display: flex; flex-direction: column; gap: 10px; padding: 16px; flex: 1; color: inherit; }
.station-main:hover { text-decoration: none; }
a.station { padding: 16px; display: flex; flex-direction: column; gap: 10px; } /* variante lien simple (listes légères) */
a.station:hover { text-decoration: none; }
.station .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.station .name { margin: 0; font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 7px; }
.station .name .pill.cheap { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.station .loc { font-size: .9rem; color: var(--ink-soft); font-weight: 600; margin-top: 1px; }
.station .loc b { color: var(--ink); font-weight: 700; }
.station .addr { color: var(--muted); font-size: .82rem; margin-top: 1px; }
.price-tag { text-align: right; white-space: nowrap; }
.price-tag .p { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.price-tag .u { font-size: .78rem; color: var(--muted); }
.trend { display: inline-block; margin-top: 3px; font-size: .78rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.trend.down { color: var(--brand-dark); background: var(--brand-tint); }
.trend.up { color: #b4560a; background: #fff3e6; }
.station .meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-soft); margin-top: auto; }

/* Itinéraire : la ville d'abord, en évidence (on repère la station sur le trajet) */
.rt-station .rt-town { display: flex; align-items: center; gap: 5px; line-height: 1.15; }
.rt-station .rt-town .ic { color: var(--brand); flex: none; }
.rt-station .rt-ville { font-weight: 800; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.rt-station .rt-cp { font-weight: 600; font-size: .82rem; color: var(--muted); margin-left: 6px; }
.rt-station .name { font-size: .92rem; font-weight: 700; color: var(--ink-soft); margin-top: 3px; }
.rt-station .addr { margin-top: 2px; }
.rt-station.station:hover { border-color: var(--brand); }
.navbtn.rt-locate { border: 0; cursor: pointer; font-family: inherit; }
.navbtn.rt-locate:hover { background: var(--brand-tint); color: var(--brand-dark); }

/* Actions navigation (Waze / Maps) */
.station-actions { display: flex; gap: 0; border-top: 1px solid var(--line-soft); }
.navbtn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; font-weight: 700; font-size: .84rem; color: var(--ink-soft);
  background: #fbfcfd; transition: background .12s, color .12s;
}
.navbtn + .navbtn { border-left: 1px solid var(--line-soft); }
.navbtn:hover { text-decoration: none; background: var(--brand-tint); color: var(--brand-dark); }
.navbtn svg { width: 15px; height: 15px; }
.navbtn.waze:hover { background: #e8f3ff; color: #1a73e8; }
.nav-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-inline .navbtn { flex: 0 1 auto; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 9px 16px; }

/* Statut ouverture */
.status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .8rem; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.open::before, .status.h24::before { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.status.open, .status.h24 { color: var(--brand-dark); }
.status.closed::before { background: #e8620c; }
.status.closed { color: #b4560a; }
.pill.rupture { background: #fdeceb; color: #c0261c; }
.pill.h24 { background: #eef2ff; color: #3651c9; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--line-soft); color: var(--ink-soft); font-weight: 600; font-size: .78rem; }
.pill.dist { background: var(--brand-tint); color: var(--brand-dark); }
.dist-inline { color: var(--brand-dark); font-weight: 700; }
.dist-self { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; font-size: .85rem; }
.pill.hw { background: #eef2ff; color: #3651c9; }
/* Badge de tête (« La moins chère / La plus proche… ») : vert PLEIN pour trancher
   avec les pills d'info pâles (distance, 24h/24) — c'est une distinction, pas une
   simple étiquette. Sert aussi aux badges de tête de l'itinéraire (moins chère du
   trajet, la plus puissante). */
.pill.cheap { background: var(--brand); color: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(10,160,90,.35); }
.pill.cheap .ic { width: 12px; height: 12px; }

/* Grade badge */
.grade { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 1rem; flex: none; }
.grade.lg { width: 54px; height: 54px; font-size: 1.9rem; border-radius: 12px; }
.grade-wrap { display: inline-flex; align-items: center; gap: 8px; }

/* Table */
.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.tbl th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #fafbfc; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.rank { color: var(--muted); font-weight: 700; width: 34px; }

/* Map */
#map { height: 460px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); z-index: 1; }
.map-tall { height: 74vh; min-height: 460px; }

/* Marqueurs prix (pin ancré) */
.mk-wrap { background: none !important; border: 0 !important; }
.mk {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 7px));
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 12.5px;
  font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: 10px;
  border: 1.5px solid #cbd3dd; box-shadow: 0 3px 8px rgba(20,30,45,.28);
  cursor: pointer; transition: transform .1s;
}
.mk::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff;
}
.mk::before {
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #cbd3dd;
}
.mk .mk-g { width: 15px; height: 15px; border-radius: 4px; color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.mk.best { background: var(--brand); color: #fff; border-color: var(--brand-dark); font-size: 13.5px; padding: 6px 11px; }
.mk.best::after { border-top-color: var(--brand); }
.mk.best::before { border-top-color: var(--brand-dark); }
.mk.cheap { border-color: #93d3ad; }
.mk.cheap::before { border-top-color: #93d3ad; }
.mk.secondary { background: #f4f6f9; color: #8894a5; border-color: #dfe4ea; font-size: 11.5px; padding: 3px 7px; box-shadow: 0 2px 5px rgba(20,30,45,.16); }
.mk.secondary::after { border-top-color: #f4f6f9; }
.mk.secondary::before { border-top-color: #dfe4ea; }
/* Marqueurs prix : ville sous le prix (top 3 du trajet) + surbrillance au survol de la liste */
.mk.has-v { flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 4px; line-height: 1.05; }
.mk .mk-v { font-size: 9.5px; font-weight: 700; opacity: .8; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk.best .mk-v { opacity: .95; }
.mk.mk-hi { transform: translate(-50%, calc(-100% - 7px)) scale(1.12); z-index: 1200; box-shadow: 0 6px 16px rgba(20,30,45,.4); }

/* Popups */
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 8px 30px rgba(20,30,45,.25); }
.leaflet-popup-content { margin: 0; font-family: inherit; width: 232px !important; }
.pop { padding: 14px 15px 12px; }
.pop-head { display: flex; align-items: center; gap: 9px; }
.leaflet-popup-close-button { top: 6px !important; right: 7px !important; }
.pop-price { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.pop-price small { font-size: .68rem; color: var(--muted); font-weight: 600; }
.pop-name { font-weight: 700; margin-top: 2px; }
.pop-loc { font-weight: 600; color: var(--ink-soft); font-size: .86rem; margin-top: 1px; }
.pop-loc b { color: var(--ink); }
.pop-addr { color: var(--muted); font-size: .82rem; margin-top: 1px; }
.pop-nav { display: flex; gap: 7px; margin-top: 11px; }
.pop-nav a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 700; font-size: .84rem; border: 1px solid var(--line); color: var(--ink-soft); }
.pop-nav a.waze { background: #e8f3ff; color: #1a73e8; border-color: #cfe4ff; }
.pop-nav a.maps { background: var(--brand-tint); color: var(--brand-dark); border-color: #cdeeda; }
.pop-nav a:hover { text-decoration: none; filter: brightness(.97); }
.pop-link { display: block; text-align: center; margin-top: 8px; font-weight: 700; font-size: .86rem; }
.pop-g { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: none; }

/* Toolbar mobile fixe (page station) */
.mobilebar { display: none; }
@media (max-width: 760px) {
  .mobilebar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(20,30,45,.1);
  }
  .mobilebar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border-radius: 12px; font-weight: 800; font-size: .98rem; }
  .mobilebar a svg { width: 18px; height: 18px; }
  .mobilebar .waze { background: #1a73e8; color: #fff; }
  .mobilebar .maps { background: var(--brand); color: #fff; }
  .mobilebar a:hover { text-decoration: none; }
  body.has-mobilebar { padding-bottom: 80px; }

  /* Variante « outils » (pages article) : 3 onglets icône + label, pas de gros boutons colorés. */
  .mobilebar.tools { gap: 4px; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); }
  .mobilebar.tools a { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: .72rem; font-weight: 700; color: var(--ink); background: transparent; }
  .mobilebar.tools a svg { width: 23px; height: 23px; color: var(--brand); }
  .mobilebar.tools a:active { background: var(--brand-tint); }
  .mobilebar.tools a.active { background: var(--brand-tint); color: var(--brand-dark); }
  .mobilebar.tools a.active svg { color: var(--brand-dark); }
  /* Les 3 cartes CTA de l'aside deviennent redondantes avec la toolbar → masquées sur mobile. */
  .post-aside .pa-cta { display: none; }
}

/* Badges (moat) */
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; background: var(--brand-tint); color: var(--brand-dark); border: 1px solid #cdeeda; }
.badge.warn { background: #fff3e6; color: #b4560a; border-color: #ffd9b0; }
.badge.bad { background: #fdeceb; color: #c0261c; border-color: #f6c9c5; }

/* Panels */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
/* Fiche station : en-tête pleine largeur ; desktop = carte en haut de la colonne
   droite + prix à gauche ; mobile = carte JUSTE sous l'en-tête (avant badges/prix).
   grid-template-areas → position visuelle découplée de l'ordre DOM. */
.station-layout { display: grid; gap: 20px; align-items: start; grid-template-columns: 1.6fr 1fr;
  grid-template-areas: "head head" "main side"; }
.station-layout.has-badges { grid-template-areas: "head head" "badges badges" "main side"; }
.station-layout.has-map { grid-template-areas: "head head" "main map" "main side"; }
.station-layout.has-map.has-badges { grid-template-areas: "head head" "badges badges" "main map" "main side"; }
.station-layout > .section-head { grid-area: head; }
.station-layout > .badges { grid-area: badges; }
.station-layout > .st-main { grid-area: main; }
.station-layout > #map { grid-area: map; }
.station-layout > .st-side { grid-area: side; }
@media (min-width: 861px) { .station-layout > .section-head { margin-bottom: 0; } }
@media (max-width: 860px) {
  /* Empilement naturel dans l'ordre DOM : en-tête → carte → badges → prix → repères. */
  .station-layout { display: block; }
  .station-layout > #map { width: 100%; height: 300px; margin: 0 0 16px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.chip:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }

/* Graphique cours carburant */
.chart-card { padding: 20px 22px 16px; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chart-delta { text-align: right; flex: none; padding: 6px 12px; border-radius: 12px; background: var(--line-soft); }
.chart-delta.down { background: var(--brand-tint); }
.chart-delta.up { background: #fff3e6; }
.chart-delta .v { display: block; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.chart-delta.down .v { color: var(--brand-dark); }
.chart-delta.up .v { color: #b4560a; }
.chart-delta .k { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
.chart-card .price-chart { margin-top: 14px; }
.chart-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
/* Puces de période du graphe (1 mois → 2 ans) : réutilisent .chip, en boutons. */
.range-chips { margin-top: 14px; }
.range-chips .chip { font: inherit; font-weight: 600; font-size: .86rem; line-height: 1.25; padding: 7px 14px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.range-chips .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.range-chips .chip.on:hover { color: #fff; }
.range-chips .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Chargement d'une autre période : le graphe s'estompe, la hauteur ne bouge pas. */
.chart-card.is-loading .price-chart { opacity: .4; transition: opacity .15s; }
.chart-card.is-loading .range-chips { pointer-events: none; }
#fuel-page.is-swapping { opacity: .5; transition: opacity .12s; }

/* FAQ */
.faq { margin-top: 30px; }
.faq > h2 { margin-bottom: 12px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; font-weight: 400; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq-a { padding: 14px 18px 16px; color: var(--ink-soft); line-height: 1.65; }
.faq-a p { margin: 0; }

/* Breadcrumb */
.crumbs { font-size: .85rem; color: var(--muted); padding-top: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand-dark); }
@media (max-width: 640px) { .wrap.crumbs { padding-top: 24px; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #fff; margin-top: 40px; padding: 34px 0; color: var(--ink-soft); font-size: .9rem; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 22px; }
.site-footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.site-footer a { display: block; color: var(--ink-soft); padding: 3px 0; }
.site-footer a:hover { color: var(--brand-dark); }
.disclaimer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .82rem; }

/* Notice banners */
.notice { background: #fff9ec; border: 1px solid #fce9bf; color: #8a6414; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; }
.notice.info { background: var(--brand-tint); border-color: #cdeeda; color: var(--brand-dark); }

/* SVG sparkline */
.spark { width: 100%; height: 52px; display: block; }

/* Graphique historique interactif */
.price-chart { position: relative; width: 100%; margin-top: 6px; }
.pc-svg { display: block; width: 100%; }
.pc-grid { stroke: var(--line-soft); stroke-width: 1; }
.pc-ylab, .pc-xlab { fill: var(--muted); font-size: 11px; }
.pc-area { fill: rgba(10,160,90,.10); }
.pc-line { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pc-guide { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.pc-dot { fill: #fff; stroke: var(--brand); stroke-width: 2.5; }
.pc-hit { cursor: crosshair; }
.pc-tip { position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: #fff; padding: 7px 11px; border-radius: 9px; font-size: .8rem; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-lg); z-index: 5; text-align: center; }
.pc-tip b { display: block; font-size: 1rem; letter-spacing: -.01em; }
.pc-tip span { color: rgba(255,255,255,.72); font-size: .72rem; }

/* Vote communautaire du prix (fiche station) */
.vote { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.vote-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vote-q { font-weight: 600; font-size: .92rem; color: var(--ink); }
.vote-btns { display: flex; gap: 8px; }
.vote-yes, .vote-no, .vote-send { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--ink); }
.vote-yes:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.vote-no:hover { border-color: #e8620c; background: #fff3e6; color: #b4560a; }
.vote-count { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.vote-thx { font-weight: 700; color: var(--brand-dark); }
.vote-price { display: flex; gap: 8px; margin-top: 6px; }
.vote-input { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; width: 130px; font-size: .95rem; }
.vote-input:focus { outline: none; border-color: var(--brand); }
.vote-send { background: var(--brand); color: #fff; border-color: var(--brand); }
.vote.near { background: var(--brand-tint); border: 1px solid #cdeeda; border-radius: 12px; padding: 14px; }
.vote.near .vote-q { color: var(--brand-dark); }

/* Itinéraire */
.route-form { padding: 20px; }
.route-inputs { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.route-field { flex: 1 1 240px; }
.route-field label { display: block; font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.route-ac-wrap { position: relative; }
.route-ac-wrap input { width: 100%; padding: 13px 44px 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 1rem; }
.route-ac-wrap input:focus { outline: none; border-color: var(--brand); }
.route-me { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--brand-tint); border: 0; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.route-me:hover { background: #d5f0e0; }
.route-arrow { color: var(--muted); font-size: 1.4rem; font-weight: 700; padding-bottom: 9px; }
#rt-go { flex: none; padding: 13px 24px; }
.route-summary { background: var(--brand-tint); border: 1px solid #cdeeda; border-radius: 12px; padding: 14px 18px; }
.rt-sum-main { font-size: 1.05rem; }
.rt-sum-cheap { margin-top: 6px; color: var(--brand-dark); font-weight: 600; }

/* Barre de contrôle liste : tri + volume du plein */
.rt-listbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.rt-sort { display: inline-flex; background: var(--line-soft); border-radius: 999px; padding: 3px; gap: 2px; }
.rt-sort-b { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font-weight: 700; font-size: .86rem; color: var(--ink-soft); padding: 7px 14px; border-radius: 999px; font-family: inherit; }
.rt-sort-b .ic { color: var(--muted); }
.rt-sort-b.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.rt-sort-b.on .ic { color: var(--brand); }
.rt-vol { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
.rt-vol input { width: 58px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-weight: 800; text-align: center; color: var(--ink); background: #fff; }
.rt-vol input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.rt-station .rt-plein { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9rem; color: var(--ink-soft); font-weight: 600; margin-top: -2px; }
.rt-station .rt-plein .ic { color: var(--muted); flex: none; }
.rt-station .rt-plein b { color: var(--ink); font-weight: 800; }
.rt-save { color: var(--brand-dark); background: var(--brand-tint); font-weight: 800; font-size: .8rem; padding: 1px 8px; border-radius: 999px; }
@media (max-width: 560px) { .rt-listbar { justify-content: stretch; } .rt-sort { flex: 1; } .rt-sort-b { flex: 1; justify-content: center; } }

/* Barre d'actions itinéraire : Maps trajet complet + enregistrer */
.rt-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.rt-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.rt-actions .rt-maps { background: var(--brand); }
.rt-maps-sub { font-weight: 600; font-size: .8rem; opacity: .82; }
.rt-save-btn.done { color: var(--brand-dark); border-color: #cdeeda; background: var(--brand-tint); cursor: default; }
@media (max-width: 560px) { .rt-actions { flex-direction: column; } .rt-actions .btn { justify-content: center; } .rt-maps-sub { display: block; width: 100%; } }

/* Panneau « Coût du trajet » (véhicule principal) */
.rt-cost { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px; }
.rtc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.rtc-veh { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); min-width: 0; }
.rtc-veh .ic { color: var(--brand); flex: none; }
.rtc-vehspec { font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
.rtc-change { font-size: .84rem; font-weight: 700; color: var(--muted); text-decoration: underline; white-space: nowrap; }
.rtc-change:hover { color: var(--brand-dark); }
.rtc-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.rtc-total { display: flex; flex-direction: column; }
.rtc-total-lbl { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rtc-total-val { font-size: 2.2rem; font-weight: 800; line-height: 1.05; color: var(--ink); }
.rtc-rt { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--ink-soft); background: var(--line-soft); padding: 8px 14px; border-radius: 999px; cursor: pointer; user-select: none; }
.rtc-rt input { width: auto; margin: 0; accent-color: var(--brand); }
.rtc-dist { margin-top: 4px; color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
.rtc-rows { margin-top: 14px; display: grid; gap: 8px; }
.rtc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rtc-k { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-weight: 600; }
.rtc-k .ic { color: var(--muted); flex: none; }
.rtc-v { font-weight: 600; color: var(--ink); text-align: right; }
.rtc-v b { font-weight: 800; }
.rtc-mut { color: var(--muted); font-weight: 600; font-size: .9em; }
.rtc-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.rtc-eco { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--brand-dark); font-weight: 700; margin-bottom: 12px; }
.rtc-eco .ic { color: var(--brand); flex: none; }
.rtc-eco b { font-weight: 800; }
.rtc-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.rtc-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--line-soft); color: var(--ink-soft); font-weight: 700; font-size: .86rem; padding: 7px 12px; border-radius: 999px; }
.rtc-chip .ic { color: var(--muted); }
.rtc-chip b { color: var(--ink); min-width: 12px; text-align: center; }
.rtc-elec { background: #eaf5fd; color: #0a5a8a; }
.rtc-elec svg { color: #0a86d8; }
.rtc-pax .rtc-paxb { border: 0; background: #fff; color: var(--ink); width: 22px; height: 22px; border-radius: 6px; font-weight: 800; cursor: pointer; line-height: 1; box-shadow: var(--shadow); }
.rtc-pax .rtc-paxb:hover { color: var(--brand-dark); }
@media (max-width: 560px) {
  .rt-cost { padding: 16px; }
  .rtc-total-val { font-size: 1.9rem; }
  .rtc-hero { gap: 10px; }
}

/* Page « Mes itinéraires » (compte) */
.rt-saved-list { display: flex; flex-direction: column; gap: 12px; }
.rt-saved { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rt-saved-name { font-weight: 800; font-size: 1.08rem; color: var(--ink); }
.rt-saved-trip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
.rt-saved-pt { display: inline-flex; align-items: center; gap: 4px; }
.rt-saved-pt .ic { color: var(--brand); }
.rt-saved-arrow .ic { color: var(--muted); transform: rotate(-90deg); }
.rt-saved-badges { margin-top: 8px; }
.rt-saved-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rt-saved-actions .btn.sm, .rt-saved-actions .navbtn { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .84rem; cursor: pointer; color: var(--ink-soft); }
.rt-saved-actions .btn.sm { background: var(--brand); color: #fff; border-color: var(--brand-dark); }
.rt-saved-actions .navbtn:hover { background: var(--brand-tint); color: var(--brand-dark); border-color: #cdeeda; }
.rt-saved-actions .rt-saved-del:hover { background: #fdeceb; color: #c0261c; border-color: #f5c6c2; }
@media (max-width: 620px) { .rt-saved { align-items: stretch; } .rt-saved-actions { width: 100%; } .rt-saved-actions .btn.sm { flex: 1; justify-content: center; } }
@media (max-width: 620px) {
  .route-inputs { flex-direction: column; align-items: stretch; gap: 12px; }
  .route-field { flex: 0 0 auto; }   /* sinon flex-basis 240px = 240px de HAUTEUR en colonne */
  .route-field label { margin-bottom: 4px; }
  .route-arrow { display: none; }
  #rt-go { width: 100%; margin-top: 2px; }
}

/* Résultats app : carte pleine largeur + liste aérée */
.results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.results-head h2 { margin: 0; }
/* Carte à la largeur du contenu (dans .wrap), en carte arrondie */
.map-full { width: 100%; height: 52vh; min-height: 360px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin: 20px 0 24px; z-index: 1; }
.results-grid { gap: 16px; }

/* Contrôles tri/filtres — barre aérée type toolbar */
.nb-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 15px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); margin-top: 4px; }
.nb-grp { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.nb-grp-label { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nb-divider { width: 1px; align-self: stretch; background: var(--line); }
.nb-controls select {
  padding: 10px 34px 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-weight: 700; font-size: .9rem; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2348566a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.nb-controls select:focus { outline: none; border-color: var(--brand); }
/* Tri = segmented control (même motif que .rt-sort, page Itinéraire) : un choix
   EXCLUSIF. Volontairement distinct des chips de filtre juste à côté, qui sont
   des bascules indépendantes — une chip verte « Moins cher » se lirait comme un
   filtre actif de plus, pas comme l'ordre de la liste. */
.nb-sort { display: inline-flex; background: var(--line-soft); border-radius: 999px; padding: 3px; gap: 2px; }
.nb-s {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0;
  background: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .87rem;
  color: var(--ink-soft); padding: 8px 15px; border-radius: 999px; white-space: nowrap;
}
.nb-s .ic { width: 14px; height: 14px; color: var(--muted); }
.nb-s:hover { color: var(--ink); }
.nb-s.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.nb-s.on .ic, .nb-s.on .nb-s-ic { color: var(--brand); }
.nb-s-ic { display: inline-flex; align-items: center; }
/* .nb-s pose display:inline-flex → il écrase le [hidden] du navigateur. */
.nb-s[hidden] { display: none; }
.nb-controls .chip { cursor: pointer; font-size: .87rem; padding: 9px 14px; }
.nb-controls .chip .ic { width: 14px; height: 14px; vertical-align: -.15em; margin-right: 3px; }
.nb-controls .chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.nb-reset { background: none; border: 0; padding: 6px 4px; color: var(--muted); font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.nb-reset:hover { color: var(--brand-dark); }
.nb-clear-inline, .nb-expand { margin-top: 12px; }
.chip-cnt { margin-left: 6px; opacity: .55; font-weight: 700; font-variant-numeric: tabular-nums; }
.nb-controls .chip.on .chip-cnt { opacity: .85; }
.nb-f.is-empty, .nb-ef.is-empty { opacity: .4; cursor: not-allowed; }
.nb-controls select.is-set { border-color: var(--brand); color: var(--brand-dark); font-weight: 800; }

/* Bandeau « Maintenant ou j'attends ? » (moteur de timing) */
.timing { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.timing-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.timing-ico .ic { width: 22px; height: 22px; }
.timing-head { font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.timing-sub { color: var(--ink-soft); font-size: .92rem; margin-top: 3px; }
.timing-best { margin-top: 9px; font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.timing-best .ic { color: var(--brand); vertical-align: -.15em; margin-right: 5px; }
.timing-foot { margin-top: 6px; font-size: .76rem; color: var(--muted); }
.timing-up .timing-ico { background: #fff3e6; color: #b4560a; }
.timing-up { border-color: #ffd9b0; }
.timing-down .timing-ico, .timing-flat .timing-ico { background: var(--brand-tint); color: var(--brand-dark); }
.timing-down { border-color: #cdeeda; }
/* Badges « villes voisines » sous la carte (page ville) : rebond de commune en
   commune sans repasser par la recherche, et maillage interne pour le SEO.
   Réutilise .chip ; seule la pastille de prix est spécifique. */
.near-villes { margin-top: 14px; }
.near-villes-h { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px; }
.near-villes-l { display: flex; flex-wrap: wrap; gap: 7px; }
.vchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 12px; }
.vchip-n { white-space: nowrap; }
.vchip-p { font-weight: 800; font-size: .78rem; color: var(--brand-dark); background: var(--brand-tint); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.vchip:hover .vchip-p { background: #fff; }

/* Le bandeau timing passe SOUS la barre de contrôles (voir home.php) : l'espace
   passe donc au-dessus (avant : 2px sous le titre, 14px avant les contrôles).
   La marge du bas est portée ici et non déléguée à .map-full : sur la home mobile
   la carte est masquée (.map-desktop), le bandeau collerait sinon à la 1re carte.
   Elle fusionne avec les 20px du haut de .map-full quand la carte est là → 20px,
   l'écart d'origine sur grand écran est inchangé.
   :not(:empty) → aucun blanc quand il n'y a pas de conseil (updateTiming() vide
   le slot en mode bornes ou sans résultats). */
.timing-slot:not(:empty) { margin: 14px 0 20px; }

/* « Votre plein ici » (fiche station) — ligne compacte, réservoir mémorisé (une fois) */
.fill { background: var(--brand-tint); border: 1px solid #cdeeda; border-radius: 14px; padding: 12px 14px; }
.fill-line, .fill-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; color: var(--ink); line-height: 1.5; }
.fill-line > .ic, .fill-set > .ic { color: var(--brand); flex: none; }
.fill-line b { font-size: 1rem; }
.fill-save, .fill-best { color: var(--brand-dark); }
.fill-edit { background: none; border: 0; color: var(--muted); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0; margin-left: auto; }
.fill-edit:hover { color: var(--brand-dark); }
.fill-inp { display: inline-flex; align-items: center; gap: 6px; }
.fill-inp input { width: 66px; text-align: right; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 700; color: var(--ink); }
.fill-inp input:focus { outline: none; border-color: var(--brand); }
.fill-cta { background: none; border: 0; padding: 0; font: inherit; font-size: .92rem; font-weight: 600; color: var(--brand-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-align: left; line-height: 1.4; }
.fill-cta > .ic { color: var(--brand); flex: none; }
.fill-cta:hover { text-decoration: underline; }
.fill-sub { font-size: .85rem; color: var(--ink-soft); margin-top: 3px; }
.fill-sub b { color: var(--ink); }

/* Icônes de services (cartes station + fiche) — ton clair, premium, ceux présents seulement */
.svc { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.svc-i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); flex: none; }
.svc-i .ic { width: 16px; height: 16px; }
.svc-i:hover { border-color: var(--brand); color: var(--brand-dark); }
.nb-sheet-head, .nb-apply { display: none; }   /* visibles uniquement dans le sheet mobile ouvert */

/* FAB filtres (mobile) */
.nb-fab { display: none; }

@media (max-width: 760px) {
  .map-full { height: 46vh; min-height: 320px; }
  /* Home : la carte est réservée au grand écran. Sur mobile, la liste des
     stations suffit et occupe tout l'espace utile. Le JS lit ce display:none
     pour ne pas initialiser Leaflet du tout (voir mapHidden() dans app.js). */
  .map-desktop { display: none; }
  .results-head { gap: 10px; }

  /* Le TRI est l'action principale : il reste TOUJOURS visible, hors du panneau.
     Seul le reste (rayon, enseigne, filtres) part dans le sheet du FAB — d'où
     `:not(.nb-grp-sort)` plutôt que l'ancien `display:none` sur tout l'hôte.
     Sticky sous le header (62px) : la liste est sous la carte, sans ça il
     faudrait remonter à chaque changement de tri. `body.filters-open` repasse
     l'hôte en position:fixed (le sheet), ce qui neutralise ce sticky. */
  /* Bande de fond (couleur page) + respiration : sans elle, la barre blanche se
     collait au bas du header (62px) et le contenu défilait à ras. Le fond opaque
     masque proprement les cartes qui passent dessous ; le padding crée l'écart
     visible au-dessus/dessous de la barre. */
  #nb-controls-host { display: block; position: sticky; top: 62px; z-index: 40; background: var(--bg); padding: 10px 0 12px; }
  .nb-controls { gap: 10px; padding: 9px 12px; margin: 0; }
  .nb-controls > :not(.nb-grp-sort) { display: none; }
  .nb-grp-sort { flex: 1; }
  .nb-sort { flex: 1; }
  .nb-s { flex: 1; }

  .nb-fab {
    display: inline-flex; align-items: center; gap: 8px; position: fixed;
    left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 60; background: var(--ink); color: #fff; border: 0; padding: 13px 24px;
    border-radius: 999px; font-weight: 800; font-size: .96rem; cursor: pointer;
    box-shadow: 0 8px 26px rgba(20,30,45,.34);
  }
  .nb-fab .cnt { background: var(--brand); border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; font-size: .78rem; }

  body.filters-open { overflow: hidden; }
  .nb-backdrop { position: fixed; inset: 0; background: rgba(16,24,34,.5); z-index: 80; animation: fadein .2s ease; }
  body.filters-open #nb-controls-host {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 81;
    background: #fff; border-radius: 22px 22px 0 0; max-height: 90vh; overflow-y: auto;
    padding: 6px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 44px rgba(16,24,34,.3); animation: sheetup .28s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

  body.filters-open .nb-controls { flex-direction: column; align-items: stretch; gap: 4px; background: none; border: 0; box-shadow: none; padding: 0; }
  /* Sheet ouvert : on ré-affiche les groupes masqués de la barre inline. Volontairement
     SANS !important, pour ne pas écraser le display inline posé par showFuelFilters()
     (carburant ↔ bornes) — le style inline reste prioritaire, le JS garde la main. */
  body.filters-open .nb-grp { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
  body.filters-open .nb-grp-label { font-size: .8rem; }
  body.filters-open .nb-controls select { width: 100%; font-size: 1rem; padding: 14px 16px; }
  body.filters-open .nb-controls .chip { font-size: 1rem; padding: 14px 16px; text-align: center; }
  body.filters-open .nb-divider { display: none; }
  body.filters-open .nb-reset { align-self: flex-start; font-size: .95rem; padding: 8px 0; }

  /* Scopés à `filters-open` : l'hôte étant désormais visible en permanence (barre
     de tri), ces deux-là débarqueraient dans la barre inline sans ce garde-fou. */
  body.filters-open .nb-sheet-head { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 0 6px; position: sticky; top: 0; background: #fff; z-index: 2; }
  .nb-sheet-head h3 { margin: 0; font-size: 1.15rem; }
  .nb-sheet-close { background: var(--line-soft); border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
  body.filters-open .nb-apply { display: block !important; width: 100%; margin-top: 16px; padding: 15px; font-size: 1.02rem; }
}

/* Empty / loading */
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
.btn .spinner, .spinner-light { width: 16px; height: 16px; border-width: 2px; }
.spinner-light { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .grid2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  /* .nav a.hide-sm : déplacé au bloc 1080px, avec le burger (même seuil). */
  .statband { gap: 14px; }
  .statband .stats { width: 100%; justify-content: space-between; gap: 10px; }
  .grid2 .map-tall { height: 52vh; min-height: 300px; }
  /* sur mobile : la liste avant la carte pour la home/nearby */
  .app-results .grid2, #results .grid2 { display: flex; flex-direction: column-reverse; }
}
/* ORDI : les 3 boutons d'action (recherche / notifications / compte) forment un
   groupe — on les resserre ENTRE EUX sans toucher à l'espacement des liens de nav.
   Le `gap` flex étant global à la barre, on le compense par une marge négative
   entre boutons qui se suivent : 18 (gap) − 10 = 8 px effectifs.
   Borné à min-width:561px : sous ce seuil le gap tombe à 8px et cette marge
   passerait l'espacement en NÉGATIF (boutons superposés). */
@media (min-width: 561px) {
  .nav .search-btn, .nav .bell-btn, .nav .acct-btn { width: 40px; }
  .nav .search-btn + .bell-btn, .nav .bell-btn + .acct-btn { margin-left: -10px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 15px; }
  /* Le header porte 5 actions (localisation, recherche, notifs, compte, menu) :
     5 × 44 + gouttières = 260px, auquel s'ajoute le logo (123) — soit 416px de
     contenu là où un écran de 390 n'offre que 360. D'où le scroll horizontal de
     TOUT le site (le <nav> imposait son scrollWidth au document).
     Spécificité à 2 classes VOLONTAIRE : .bell-btn / .acct-btn sont déclarés dans
     des <style> inline de layout.php, donc plus bas dans le document — à
     spécificité égale ils l'emporteraient sur cette feuille. */
  .site-header .wrap { gap: 10px; }
  .site-header .logo { font-size: 1.12rem; gap: 6px; }
  .site-header .logo-mark { width: 26px; height: 26px; }
  .nav { gap: 7px; }
  .nav a.loc-btn, .nav .search-btn, .nav .bell-btn, .nav .acct-btn, .nav .burger { width: 40px; }
  .locate-card { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
  .locate-ico { margin: 0 auto; }
  .locate-actions { flex-direction: column; }
  .locate-card .btn { width: 100%; }
  .geo-hero { width: 100%; }
  .app-searchrow .searchbox { flex-basis: 100%; max-width: none; }
  .statband { flex-direction: column; align-items: stretch; }
  .statband-title { white-space: normal; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .price-tag .p { font-size: 1.3rem; }
  h1 { font-size: 1.6rem; }
  .app-hero { padding: 30px 0 26px; }
}

/* Focus visible accessibilité */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

/* ---------- Bandeau de consentement RGPD ---------- */
.consent[hidden] { display: none; }
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(120%); transition: transform .32s cubic-bezier(.2,.9,.3,1);
}
.consent.show { transform: translateY(0); }
.consent-in {
  max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 16px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.consent-txt { flex: 1 1 320px; }
.consent-txt b { display: block; font-size: 1rem; margin-bottom: 3px; }
.consent-txt p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.consent-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.consent-more { font-size: .82rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
  .consent-actions { width: 100%; flex-wrap: wrap; }
  .consent-actions .btn { flex: 1; }
  .consent-more { width: 100%; text-align: center; margin-top: 2px; }
}

/* ≤385px : le nom de marque RESTE — c'est l'identité du site, il ne se sacrifie pas.
   Mais 5 boutons + « essenceo » ne tiennent pas à taille pleine : on rétrécit tout
   d'un cran (logo, boutons à 36px, gouttières) au lieu de retirer le mot.
   DOIT rester APRÈS le bloc 560px : les deux ciblent les mêmes sélecteurs à
   spécificité égale, donc c'est le dernier déclaré qui gagne. Placé avant, il
   était purement et simplement ignoré (boutons figés à 40px). */
@media (max-width: 385px) {
  .site-header .wrap { gap: 8px; }
  .site-header .logo { font-size: 1rem; gap: 5px; }
  .site-header .logo-mark { width: 24px; height: 24px; }
  .nav { gap: 5px; }
  .nav a.loc-btn, .nav .search-btn, .nav .bell-btn, .nav .acct-btn, .nav .burger { width: 36px; }
  .nav .search-btn .ic, .nav .bell-btn .ic, .nav .acct-btn .ic, .nav a.loc-btn .ic { width: 19px; height: 19px; }
}

/* ≤345px (iPhone SE 1re gén., pliables repliés) : même au cran ci-dessus, 5 boutons
   débordent de 29px de la colonne — le burger viendrait toucher le bord de l'écran.
   Il faut renoncer à quelque chose : c'est l'ÉPINGLE, seule action dupliquée
   (« Autour de moi » est le CTA vert en tête du drawer, et la barre d'outils du bas
   la reprend sur les pages outil). Le nom du site, lui, reste. */
@media (max-width: 345px) {
  .nav a.loc-btn { display: none; }
}

/* ---------- Lien « Installer l'app » (menu) ---------- */
.drawer-install { color: var(--brand-dark) !important; }
.drawer-install .ic { color: var(--brand) !important; }
[data-install][hidden] { display: none !important; }

/* ---------- Modale d'installation PWA ---------- */
.imodal[hidden] { display: none; }
.imodal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 18px; }
.imodal-bd { position: absolute; inset: 0; background: rgba(16,24,34,.5); opacity: 0; transition: opacity .24s; }
.imodal.show .imodal-bd { opacity: 1; }
.imodal-panel {
  position: relative; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: min(440px, 100%); padding: 26px 24px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.3,1), opacity .26s;
}
.imodal.show .imodal-panel { transform: none; opacity: 1; }
.imodal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--line-soft); color: var(--ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.imodal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.imodal-head .ic { color: var(--brand); }
.imodal-head h3 { margin: 0; }
.install-steps { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 14px; }
.install-steps li { display: flex; align-items: center; gap: 12px; font-size: .95rem; }
.istep-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-tint); display: inline-flex; align-items: center; justify-content: center; }
.istep-ic .ic { color: var(--brand-dark); width: 20px; height: 20px; }
#install-android { margin-top: 16px; }
#install-android .btn { width: 100%; justify-content: center; }

/* ---------- Pages légales ---------- */
.legal h2 { margin-top: 28px; font-size: 1.15rem; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal p { color: var(--ink-soft); }
.linklike { background: none; border: 0; padding: 0; color: var(--brand-dark); font: inherit; cursor: pointer; text-decoration: underline; }
.tbl-wrap { overflow-x: auto; margin: 12px 0; }
.legal-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 480px; }
.legal-tbl th, .legal-tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-tbl th { color: var(--ink); font-weight: 700; background: var(--line-soft); }
.legal-tbl code { background: var(--brand-tint); padding: 1px 6px; border-radius: 6px; font-size: .85em; }

/* ===== Navigation article précédent / suivant ===== */
.post-more { padding: 6px 0 40px; }
.post-adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 34px; }
.pa-nav { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: var(--ink); transition: transform .12s, border-color .12s, box-shadow .12s; }
.pa-nav:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); text-decoration: none; transform: translateY(-2px); }
.pa-nav.next { text-align: right; align-items: flex-end; }
.pa-dir { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pa-dir svg { width: 15px; height: 15px; }
.pa-nav.prev .pa-dir svg { transform: rotate(90deg); }
.pa-nav.next .pa-dir svg { transform: rotate(-90deg); }
.pa-nav .pa-t { font-weight: 600; font-size: 1rem; line-height: 1.32; color: var(--ink); }
.pa-nav:hover .pa-t { color: var(--brand-dark); }

/* ===== Carousel d'articles — RÉUTILISABLE : [data-carousel] ===== */
.carousel { margin: 0 0 30px; }
.carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.carousel-head h2 { display: flex; align-items: center; gap: 9px; font-size: 1.3rem; margin: 0; color: var(--ink); }
.carousel-head h2 svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.carousel-nav { display: flex; gap: 8px; flex: none; }
.carousel-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); box-shadow: var(--shadow); transition: border-color .12s, color .12s, opacity .12s; }
.carousel-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn svg { width: 18px; height: 18px; }
[data-carousel-prev] svg { transform: rotate(90deg); }
[data-carousel-next] svg { transform: rotate(-90deg); }
.carousel.no-scroll .carousel-nav { display: none; }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px; margin: 0 -2px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-card { flex: 0 0 260px; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--ink); transition: transform .12s, box-shadow .12s; }
.carousel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.cc-cover { aspect-ratio: 16/9; background: var(--brand-tint) center/cover no-repeat; display: block; }
.cc-cover.ph { display: flex; align-items: center; justify-content: center; color: var(--brand); }
.cc-cover.ph svg { width: 34px; height: 34px; opacity: .5; }
.cc-body { padding: 12px 14px 15px; display: flex; flex-direction: column; gap: 6px; }
.cc-date { font-size: .76rem; font-weight: 700; color: var(--muted); }
.cc-title { font-weight: 600; font-size: .98rem; line-height: 1.32; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carousel-card:hover .cc-title { color: var(--brand-dark); }
@media (max-width: 640px) {
  .post-adjacent { grid-template-columns: 1fr; }
  .carousel-card { flex-basis: 76vw; max-width: 300px; }
  .carousel-head h2 { font-size: 1.14rem; }
}

/* ── Sous-menu « Calculateur » (deux calculateurs distincts) — desktop ──────
   .site-header est sticky sans overflow:hidden → le panneau absolu n'est pas
   clippé. Masqué ≤1080px : le drawer prend le relais (mêmes bornes que hide-sm). */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-top { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 600; }
.nav-dd-top .ic { color: var(--muted); transition: color .15s; }
.nav-dd:hover .nav-dd-top, .nav-dd:focus-within .nav-dd-top { color: var(--brand-dark); }
.nav-dd:hover .nav-dd-top .ic, .nav-dd-top.on .ic { color: var(--brand); }
.nav-dd-top.on { color: var(--brand-dark); font-weight: 700; }
.nav-dd-caret { width: 15px; height: 15px; transition: transform .18s; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); }
.nav-dd::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 300px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 34px rgba(16,24,34,.14); padding: 7px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu a { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border-radius: 10px; color: var(--ink); white-space: normal; }
.nav-dd-menu a:hover { background: var(--brand-tint); text-decoration: none; }
.nav-dd-menu a .ic { color: var(--brand); margin-top: 2px; flex: none; }
.nav-dd-menu a span { display: flex; flex-direction: column; line-height: 1.3; }
.nav-dd-menu a b { font-size: .92rem; font-weight: 700; }
.nav-dd-menu a small { color: var(--muted); font-size: .78rem; margin-top: 2px; }
@media (max-width: 1080px) { .nav-dd { display: none; } }