/* ════════════════════════════════════════════════════════════════
   Carbu-Malin V2 · CSS composants & layout  [LOT A · A5/A6]
   Reproduit verbatim depuis le prototype v10. Seul changement :
   chemins d'assets DesignSystem/Images/ → assets/Images/.
   ════════════════════════════════════════════════════════════════ */

/* ── RESET & SCROLL MASQUÉ ── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
*{scrollbar-width:none;}
*::-webkit-scrollbar{display:none;}
html,body{height:100%;overflow:hidden;margin:0;padding:0;font-family:var(--font);color:var(--n900);}

/* ── APP ── */
.app{height:100dvh;max-width:430px;width:100%;margin:0 auto;display:flex;flex-direction:column;
  background:var(--bg);background-image:url('../assets/site-internal-bg.webp');
  background-size:cover;background-position:center top;overflow:hidden;}

/* ── HEADER ── */
.hdr{height:var(--hdr);background:white;border-bottom:2px solid var(--border);position:relative;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--px) 0 0;
  box-shadow:0 1px 6px oklch(0.17 0.006 183/0.06);z-index:30;flex-shrink:0;overflow:hidden;}
/* Bouton « Installer l'appli » centré dans le header (mobile uniquement) */
body.is-mobile .hdr-install{margin:0 auto;justify-content:center;}   /* centré dans l'espace entre le logo et le bloc de droite */
.hdr-right{display:flex;align-items:center;gap:6px;}
/* docx7 — sur desktop, le groupe de navigation (Stats · Accueil · Ma voiture) est CENTRÉ sur la page,
   indépendamment des largeurs du logo (gauche) et du bloc compte (droite) → « Accueil » au centre. */
body.is-desktop .hdr-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.btn-login{height:35px;padding:0 18px;border-radius:9999px;border:none;
  background:var(--teal);color:white;font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;}
body.is-desktop .btn-login{height:44px;padding:0 26px;font-size:16px;}
/* Badge « C'est gratuit ! » qui dépasse de derrière le bouton S'inscrire */
.signup-wrap{position:relative;display:inline-flex;}
.signup-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-4deg);z-index:0;
  background:var(--green-text);color:#fff;font-family:var(--font);font-size:9px;font-weight:800;letter-spacing:.01em;
  padding:3px 8px 6px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 6px oklch(0.3 0.03 183/.25);pointer-events:none;}
.signup-wrap .btn-signup{position:relative;z-index:1;}
body.is-desktop .signup-badge{font-size:11px;top:-11px;padding:4px 11px 8px;}

/* ── VIEW ── */
.view{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.scroll-page{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}

/* ── TOP TAB NAV ── */
.top-tab-nav{background:white;border-bottom:2px solid var(--border);
  display:flex;flex-shrink:0;z-index:29;overflow-x:auto;}
.top-tab-nav.hidden{display:none;}
.ttab{flex:1;height:42px;padding:0 10px;border:none;background:none;cursor:pointer;
  white-space:nowrap;font-family:var(--font);font-size:12px;font-weight:500;
  color:var(--n600);border-bottom:2.5px solid transparent;
  transition:color 120ms,border-color 120ms;text-align:center;position:relative;bottom:-1px;}
.ttab.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:700;}
body.is-desktop .top-tab-nav{display:none!important;}

/* ── SUB NAV (juste sous le top-tab-nav) ── */
.sub-nav{background:var(--n50);border-top:3px solid oklch(0.60 0.004 183);border-bottom:2px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;z-index:28;}
.sub-nav.hidden{display:none;}
.sub-row{display:flex;}
.sub-row2{border-top:1px solid var(--border);background:white;}
.stab{flex:1;height:44px;padding:0 6px;border:none;background:none;cursor:pointer;
  white-space:nowrap;font-family:var(--font);font-size:13.5px;font-weight:600;
  color:var(--n600);border-bottom:2.5px solid transparent;transition:all 120ms;text-align:center;
  border-right:1px solid var(--border);}
.stab:last-child{border-right:none;}
.stab.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:700;background:white;}
/* ── SUB NAV 2 (sous-menu d'un sous-onglet, ex. Classements) ── */
.sub-nav2{display:flex;background:white;border-bottom:1px solid var(--border);}
.stab2{flex:1;height:40px;padding:0 8px;border:none;background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--font);font-size:12px;font-weight:600;color:var(--n600);
  border-bottom:2.5px solid transparent;transition:all 120ms;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.stab2.active{color:var(--teal);border-bottom-color:var(--teal);}
/* ── ÉTIQUETTE SCORE SUR LA CARTE ── */
.geo-score-ic{background:none;border:none;}
.geo-score{transform:translate(-50%,-50%);display:inline-block;background:rgba(255,255,255,.92);
  border:1.5px solid;border-radius:6px;padding:0 4px;font:700 10px/1.5 'Outfit',sans-serif;
  color:#173a2a;box-shadow:0 1px 3px rgba(0,0,0,.22);white-space:nowrap;font-variant-numeric:tabular-nums;}
.geo-score-lg{font-size:12px;padding:3px 9px;border-radius:8px;}
/* ── BULLES D'ITINÉRAIRE (mode trajet) ── */
/* ── Rectangle d'itinéraire posé sur la carte ─────────────────────────────
   Même grille que les cartes du panneau gauche : l'icône du mode (péage /
   péage barré / MIX) occupe 15 % de la largeur sur TOUTE la hauteur ; le reste
   est coupé en 2 horizontalement — coûts en haut, temps + distance en bas. */
.route-bubble-ic{background:none;border:none;}
.route-bubble{transform:translate(-50%,-50%) scale(0.92);display:inline-flex;flex-direction:row;align-items:stretch;overflow:hidden;
  width:210px;background:white;border:2px solid var(--border);border-radius:12px;
  font-family:var(--font);font-size:11.5px;font-weight:700;color:var(--n900);
  box-shadow:0 2px 9px rgba(0,0,0,.22);white-space:nowrap;cursor:pointer;line-height:1.15;}
/* Colonne icône : 15 % de la largeur, pleine hauteur */
.route-bubble .rb-ico{flex:0 0 15%;min-width:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:4px 2px;border-right:2px solid var(--border);}
.route-bubble .rb-ico svg{width:100%;max-width:24px;height:auto;}
.route-bubble .rb-rank{font-size:8px;font-weight:800;color:var(--n500);line-height:1;}
.route-bubble .rb-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
/* Moitié HAUTE : détail des coûts + total */
.route-bubble .rb-cost{padding:5px 8px 4px;border-bottom:1.5px solid var(--divider);}
.route-bubble .rb-cost-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.route-bubble .rb-cost-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--n500);line-height:1;}
.route-bubble .rb-cost-val{font-size:16px;font-weight:800;color:var(--teal-800);font-variant-numeric:tabular-nums;line-height:1;}
.route-bubble .rb-cost-det{font-size:8.5px;font-weight:600;color:var(--n600);font-variant-numeric:tabular-nums;margin-top:3px;}
/* Moitié BASSE : temps + km + vitesse */
.route-bubble .rb-time{padding:4px 8px 5px;font-size:10.5px;font-weight:700;color:var(--n800);font-variant-numeric:tabular-nums;}
.route-bubble .rb-star{color:var(--yellow-dk);font-size:10px;line-height:1;}
.route-bubble.rec{border-color:var(--yellow-dk);}
.route-bubble.rec .rb-ico{border-right-color:var(--yellow-dk);}
.route-bubble.rec .rb-star{color:var(--yellow-text);}
.route-bubble.sel{outline:3px solid oklch(0.40 0.10 183);outline-offset:1px;}
/* Mobile : rectangle d'itinéraire légèrement agrandi (échelle autour de son point d'ancrage) */
body.is-mobile .route-bubble{transform:translate(-50%,-50%) scale(1.02);}
/* Date+heure d'actualisation des données (header) */
.hdr-fresh{font-size:11px;color:var(--n700);font-weight:800;white-space:nowrap;margin-right:10px;align-self:center;}
/* Mobile : logo grand à gauche ; App + Connexion groupés à droite, MÊME hauteur et alignés
   verticalement ; le libellé « Données du… » passe EN DESSOUS, centré sous les 2 boutons. */
body.is-mobile .hdr{height:auto;min-height:calc(var(--hdr) + 18px);overflow:visible;align-items:flex-start;padding-top:9px;}
body.is-mobile .hdr-left{flex-shrink:0;}
body.is-mobile .hdr-left img{height:48px!important;max-width:150px!important;}         /* logo compacté en mobile pour laisser la place à App + Connexion */
body.is-mobile .hdr-install{flex-shrink:0;margin:0 auto;height:36px;}                  /* App recentré dans l'espace logo↔bloc droite */
body.is-mobile .hdr-right{flex-shrink:0;min-width:0;gap:8px;align-items:center;}
body.is-mobile .btn-login{flex-shrink:0;padding:0 16px;height:36px;}                   /* même hauteur que App */
body.is-mobile .hdr-fresh{position:absolute;left:50%;right:var(--px);bottom:5px;font-size:10.5px;font-weight:800;line-height:1.1;white-space:nowrap;max-width:none;text-align:center;margin:0;}
/* Header avec Inscription + Connexion : données centrées sous les 2 boutons, App dans l'espace restant */
.hdr-auth-col{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.hdr-auth-row{display:flex;align-items:center;gap:6px;}
.hdr-fresh--auth{position:static!important;font-size:10px;font-weight:800;color:var(--n700);text-align:center;white-space:nowrap;margin:0;line-height:1.1;width:100%;}
/* Mobile : « Données du… » sorti du flux (sinon il élargit la colonne et pousse Connexion hors écran) → ligne basse alignée à droite */
body.is-mobile .hdr-fresh--auth{position:absolute!important;left:8px;right:var(--px);bottom:5px;width:auto!important;text-align:right!important;font-size:10.5px;}
/* Connecté : texte « Données du… » aligné à DROITE, sous le bouton de déconnexion */
.hdr-auth-col--right{align-items:flex-end;}
body.is-desktop .hdr-fresh--right{text-align:right!important;}
/* Bouton de fermeture des bulles (stations + itinéraire) sur la carte : plus gros + contour */
.leaflet-popup-close-button{width:26px!important;height:26px!important;font:700 19px/22px var(--font)!important;
  top:6px!important;right:6px!important;color:var(--n700)!important;background:#fff!important;
  border:2px solid var(--n400)!important;border-radius:50%!important;box-shadow:0 1px 5px rgba(0,0,0,.22)!important;}
.leaflet-popup-close-button:hover{color:var(--n900)!important;border-color:var(--teal)!important;}
/* ── TOGGLE SEGMENTÉ + BOUTON FILTRE ── */
.seg{display:inline-flex;background:var(--n100);border-radius:9999px;padding:3px;gap:2px;}
.seg button{border:none;background:none;height:32px;padding:0 16px;border-radius:9999px;
  font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--n600);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all 120ms;white-space:nowrap;}
.seg button.on{background:var(--teal);color:white;box-shadow:0 1px 5px rgba(0,0,0,.16);}
.filter-btn{width:38px;height:38px;flex-shrink:0;border-radius:11px;border:2px solid var(--border);
  background:white;color:var(--n600);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  position:relative;transition:all 120ms;}
.filter-btn.on{background:var(--teal);border-color:var(--teal);color:white;}
.filter-btn .fdot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:9999px;
  background:var(--yellow-dk,#b8860b);border:2px solid white;}

/* ── BOTTOM NAV ── */
.bottom-nav{height:var(--bnav);background:white;border-top:1px solid var(--border);
  display:flex;align-items:center;flex-shrink:0;z-index:40;
  box-shadow:0 -2px 12px oklch(0.17 0.006 183/0.07);
  padding-bottom:env(safe-area-inset-bottom,0px);}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border:none;background:none;cursor:pointer;font-family:var(--font);
  font-size:10px;font-weight:600;color:var(--n900);transition:color 120ms;padding:6px 4px;}
.bnav-item.active{color:var(--teal);}
.bnav-item svg{width:22px;height:22px;flex-shrink:0;}
.bnav-pip{width:4px;height:4px;border-radius:9999px;background:var(--yellow);
  opacity:0;transition:opacity 120ms;margin-top:1px;}
.bnav-item.active .bnav-pip{opacity:1;}
.bnav-home{width:72px;height:38px;align-self:center;margin-top:0;border-radius:12px;background:var(--yellow);border:1.5px solid var(--yellow-dk);box-shadow:0 2px 10px rgba(0,0,0,0.20);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform 100ms;}
.bnav-home:active{transform:scale(0.88);}
.bnav-home svg{width:22px;height:22px;stroke:var(--yellow-text);}

/* ── ROUTE CARDS (itinéraires) ── */
.route-card{display:flex;align-items:center;padding:9px 11px;border-radius:10px;border:2px solid var(--border);background:white;cursor:pointer;gap:10px;transition:all 100ms;}
.route-card.sel{border-color:var(--teal);background:var(--teal-lite);}
.route-card:active{transform:scale(0.98);}
.rc-ico{font-size:16px;flex-shrink:0;}
.rc-body{flex:1;min-width:0;}
.rc-label{font-size:12px;font-weight:700;color:var(--n900);}
.rc-card.sel .rc-label{color:var(--teal-800);}
.rc-meta{font-size:11px;color:var(--n600);margin-top:1px;}
.rc-peage{font-size:10px;font-weight:600;color:var(--orange-text);background:var(--orange-bg);padding:1px 6px;border-radius:9999px;}
.rc-check{width:18px;height:18px;border-radius:9999px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.route-card.sel .rc-check{background:var(--teal);border-color:var(--teal);color:white;}

/* ── ZONE OVERLAY ── */
#zone-overlay{pointer-events:all;}
#zone-overlay.active{display:flex!important;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,0.45);}
.zo-sheet{background:white;border-radius:20px 20px 0 0;max-height:92%;display:flex;flex-direction:column;overflow:hidden;}
.zo-tile{border-radius:10px;border:2px solid var(--border);background:white;color:var(--n900);font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;transition:all 80ms;}
.zo-tile.sel{border-color:var(--teal);background:var(--teal);color:white;}
.zo-tile:active{transform:scale(0.90);}
.zo-scroll::-webkit-scrollbar{display:none;}
.zo-scroll{-ms-overflow-style:none;scrollbar-width:none;}
/* Filtre de zone — régions en en-tête + numéros de département affichés immédiatement */
.zo-reg{display:flex;flex-direction:column;gap:6px;}
.zo-reghead{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:38px;padding:0 12px;border-radius:10px;border:2px solid var(--border);background:white;color:var(--n900);font-family:var(--font);font-size:13px;font-weight:800;cursor:pointer;transition:all 80ms;}
.zo-reghead .zo-reg-cnt{font-size:10.5px;font-weight:700;color:var(--n400);text-transform:none;}
.zo-reghead.partial{border-color:var(--teal);color:var(--teal);background:var(--teal-lite);}
.zo-reghead.partial .zo-reg-cnt{color:var(--teal);}
.zo-reghead.sel{border-color:var(--teal);background:var(--teal);color:white;}
.zo-reghead.sel .zo-reg-cnt{color:rgba(255,255,255,.85);}
.zo-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px;margin-bottom:2px;}
.zo-num{height:34px;border-radius:8px;border:1.5px solid var(--border);background:white;color:var(--n800);font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;transition:all 80ms;}
.zo-num.sel{border-color:var(--teal);background:var(--teal);color:white;}
.zo-num:active{transform:scale(0.88);}
/* Mobile : nom de région + départements EN LIGNE (flux qui s'enroule sans trou) */
.zo-reg-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.zo-reg-flow .zo-num{height:32px;min-width:38px;padding:0 6px;}
.zo-regname{height:32px;padding:0 14px;border-radius:9999px;border:1.5px solid var(--border);background:#fff;color:var(--teal-800);font-family:var(--font);font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;transition:all 80ms;}
.zo-regname.partial{border-color:var(--teal);color:var(--teal);background:var(--teal-lite);}
.zo-regname.sel{border-color:var(--teal);background:var(--teal);color:#fff;}
.zo-regname:active{transform:scale(0.94);}


/* ── MAP PAGES ── */
.map-page{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;}
/* Desktop : .view est centré (align-items:center) pour les scroll-page ; la carte plein
   écran doit s'étirer sur toute la largeur, sinon elle se réduit à 0 (rien ne s'affiche). */
body.is-desktop .map-page{align-self:stretch;width:100%;}

/* ── RECHERCHE OVERLAY ── */
.search-overlay{position:absolute;top:10px;left:10px;right:10px;z-index:20;
  background:white;border:2px solid oklch(0.68 0.006 183);border-radius:16px;padding:10px;
  box-shadow:0 4px 20px oklch(0.17 0.006 183/0.16);
  transform-origin:top center;
  transition:transform 280ms cubic-bezier(0.4,0,0.2,1),opacity 200ms;}
.search-overlay.collapsed{transform:translateY(-110%) scale(0.95);opacity:0;pointer-events:none;}

/* ── DESKTOP : panneau gauche — search overlay ancrée à gauche ── */
body.is-desktop .search-overlay{
  top:16px !important;left:16px !important;right:auto !important;
  width:420px !important;overflow-y:auto;
  max-height:calc(100vh - 100px);
}
body.is-desktop .search-overlay.collapsed{
  transform:translateX(calc(-100% - 30px)) !important;opacity:0;
}
.search-loupe{position:absolute;top:10px;left:10px;z-index:20;width:52px;height:52px;
  border-radius:9999px;background:var(--teal);border:1.5px solid rgba(0,0,0,.5);cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.30);display:flex;align-items:center;
  justify-content:center;color:white;transition:opacity 200ms;}
.search-loupe svg{width:27px;height:27px;stroke-width:2.6;}   /* loupe : icône plus grande + trait plus épais */
.search-loupe.hidden{opacity:0;pointer-events:none;}
.mode-toggle{display:flex;background:var(--n100);border:2px solid oklch(0.68 0.006 183);border-radius:13px;padding:4px;gap:4px;margin-bottom:12px;}
.mode-btn{flex:1;height:44px;border:none;border-radius:10px;background:transparent;
  font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--n600);white-space:nowrap;
  cursor:pointer;transition:all 150ms;display:flex;align-items:center;justify-content:center;gap:6px;}
.mode-btn svg{flex-shrink:0;}
.mode-btn.on{background:var(--teal);color:white;font-weight:700;box-shadow:0 3px 10px oklch(0.42 0.10 183/.32);}
.route-row{display:flex;align-items:center;gap:8px;height:38px;border-radius:10px;
  background:white;padding:0 10px;border:2px solid var(--border);margin-bottom:6px;}
.route-row:last-of-type{margin-bottom:0;}
.route-row input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--font);
  font-size:13px;outline:none;color:var(--n900);}
.route-row>button{flex-shrink:0;}
.route-dot{width:8px;height:8px;border-radius:9999px;flex-shrink:0;}
/* ── FILTRES homogènes ── */
.flt-label{font-size:10px;font-weight:700;color:var(--n400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.mode-section{background:var(--teal-lite);border:1.5px solid var(--teal-100);border-radius:14px;padding:10px;margin-bottom:12px;}
.seg{display:flex;gap:6px;}
.seg-btn{flex:1;height:38px;border-radius:10px;border:2px solid var(--border);background:white;color:var(--n600);font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;transition:all 120ms;}
.seg-btn.on{border-color:var(--teal);background:var(--teal);color:white;}
.peage-toggle{display:flex;background:var(--n100);border-radius:11px;padding:4px;gap:4px;}
.peage-btn{flex:1;height:38px;border:none;border-radius:8px;background:transparent;font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--n600);cursor:pointer;transition:all 150ms;}
.peage-btn.on-eco{background:var(--yellow);color:var(--yellow-text);box-shadow:var(--shadow-sm);}
.peage-btn.on-mix{background:var(--teal-lite);color:var(--teal-800);box-shadow:var(--shadow-sm);}
.peage-btn.on-toll{background:var(--green-bg);color:var(--green-text);box-shadow:var(--shadow-sm);}
.peage-btn-lock{color:var(--n400);}
.flt-select{width:100%;height:38px;border:2px solid var(--border);border-radius:10px;font-family:var(--font);font-size:13px;padding:0 10px;background:white;color:var(--n900);outline:none;cursor:pointer;appearance:auto;}
.chip-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;}
.chip{height:28px;padding:0 10px;border-radius:9999px;font-family:var(--font);
  font-size:11px;font-weight:600;border:none;cursor:pointer;transition:all 100ms;white-space:nowrap;}
.chip.on{background:var(--teal);color:white;}
.chip.off{background:var(--n100);color:var(--n600);}
.chip.outline{background:transparent;border:2px solid var(--border);color:var(--n600);}
.chip.outline.on{background:var(--teal-lite);color:var(--teal);border-color:var(--teal);}

/* ── BOTTOM SHEET ── */
.bottom-sheet{position:absolute;left:0;right:0;bottom:0;
  background:white;border-radius:20px 20px 0 0;
  box-shadow:0 -6px 28px oklch(0.17 0.006 183/0.16);
  display:flex;flex-direction:column;overflow:hidden;z-index:15;
  will-change:transform;transition:transform 340ms cubic-bezier(0.4,0,0.2,1);}

.sheet-drag{flex-shrink:0;padding:10px var(--px) 8px;
  background:white;cursor:pointer;user-select:none;touch-action:none;}
.sheet-drag-bar{width:36px;height:4px;border-radius:9999px;background:var(--n100);margin:0 auto 10px;}

/* Cartes best solutions dans le sheet */
.sheet-sol-row{display:flex;gap:8px;}
.sol-card{flex:1;border-radius:12px;padding:10px 12px;overflow:hidden;box-shadow:var(--shadow-card);}
.sol-card.eco{background:var(--yellow-bg);border:2px solid var(--yellow-bdr);}
.sol-card.proche{background:var(--green-bg);border:2px solid oklch(0.78 0.10 150);}
body.is-mobile .sol-card{border-width:1px;}
.sol-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;}
.sol-card.eco .sol-label{color:var(--yellow-text);}
.sol-card.proche .sol-label{color:var(--green-text);}
.sol-name{font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;}
.sol-price{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;}
.sol-card.eco .sol-price{color:var(--yellow-text);}
.sol-card.proche .sol-price{color:var(--green-text);}
.sol-card.sol-active{box-shadow:0 3px 14px rgba(0,0,0,.13);transform:translateY(-1px);}
.sol-sub{font-size:10px;color:var(--n600);margin-top:2px;}
.sol-bar{height:2.5px;border-radius:9999px;margin:5px 0 7px;}
.sol-card.eco .sol-bar{background:var(--yellow-dk);}
.sol-card.proche .sol-bar{background:var(--green-text);}

/* ── CALC BUTTONS ── */
.calc-btn{flex:1;height:42px;border-radius:10px;font-family:var(--font);font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid;transition:all 150ms;line-height:1.3;padding:0 6px;}
.eco-inactive{background:var(--yellow-bg);border-color:var(--yellow-bdr);color:var(--yellow-text);}
.eco-active{background:var(--yellow);border-color:var(--yellow-dk);color:var(--yellow-text);}
.alt-inactive{background:var(--green-bg);border-color:oklch(0.82 0.08 150);color:var(--green-text);}
.alt-active{background:var(--green-text);border-color:var(--green-text);color:white;}

/* ── RANGE (valorisation du temps) ── */
.temps-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:9999px;
  background:var(--teal-100);outline:none;cursor:pointer;margin:0;}
.temps-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:9999px;
  background:var(--teal);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;}
.temps-range::-moz-range-thumb{width:24px;height:24px;border-radius:9999px;background:var(--teal);
  border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;}

.sheet-list-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--n400);padding:8px var(--px) 5px;background:var(--n50);
  border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);flex-shrink:0;}
.sheet-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ── Filtre « meilleur jour pour faire le plein » ── */
.flt-fc{margin-top:14px;border:1.5px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff;}
.fc-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none;position:relative;}
.fc-ttl{font-size:13px;font-weight:700;color:var(--n800);}
.fc-sub{font-size:10px;font-weight:700;color:var(--n400);background:var(--n100);padding:1px 6px;border-radius:9999px;margin-left:2px;}
.cm-sw{width:40px;height:23px;border-radius:9999px;background:#d8dede;position:relative;flex-shrink:0;transition:background .2s;}
.cm-sw.on{background:var(--teal);}
.cm-sw-dot{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s;}
.cm-sw.on .cm-sw-dot{left:19px;}
.fc-body{margin-top:10px;}
.fc-msg{font-size:12px;color:var(--n500);padding:6px 0;}
.fc-head{font-size:13px;line-height:1.35;}
.fc-line{font-size:11.5px;color:var(--n600);margin-top:3px;}
.fc-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;height:52px;margin:12px 2px 4px;}
.fc-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.fc-bar-fill{width:62%;max-width:18px;border-radius:4px 4px 0 0;}
.fc-bar-lbl{font-size:9px;color:var(--n500);margin-top:3px;}
.fc-bar-lbl.best{color:var(--green-text);font-weight:800;}
.fc-note{font-size:10px;color:var(--n400);line-height:1.4;margin-top:6px;}
.fc-wins{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.fc-wins-lbl{font-size:11px;font-weight:700;color:var(--n600);margin-right:2px;}
.fc-win{font-size:11px;font-weight:700;color:var(--n600);background:var(--n100);border:1.5px solid var(--border);border-radius:9999px;padding:2px 9px;cursor:pointer;transition:all .15s;}
.fc-win.on{background:var(--teal);border-color:var(--teal);color:#fff;}
.fc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.fc-conf{font-size:10px;font-weight:800;color:var(--teal-800);background:var(--teal-50,#e8f3f1);border-radius:9999px;padding:2px 8px;}
.fc-brent{font-size:10px;font-weight:700;color:var(--n600);background:var(--n100);border-radius:9999px;padding:2px 8px;}
.fc-stb{display:inline-block;margin-top:4px;font-size:9.5px;font-weight:800;border-radius:9999px;padding:2px 7px;line-height:1.3;}
.fc-stb.up{background:var(--green-bg);color:var(--green-text);}
.fc-stb.dn{background:var(--teal-50,#e8f3f1);color:var(--teal-800);}
.fc-stb.stbl{background:var(--n100);color:var(--n500);}
.flt-fc.fc-locked{display:flex;align-items:center;justify-content:space-between;gap:8px;opacity:.85;}
.fc-locktxt{font-size:10.5px;color:var(--n400);font-weight:600;}
.m-dock-scroll.auto3{max-height:none;}   /* « autour » = exactement 3 stations → pas de scroll, tout est visible */
/* En-tête fusionné : titre dans la colonne station + croix « Réduire » à droite, sur la ligne des en-têtes */
.m-hd-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--n600);line-height:1.2;}
.m-row-hd .m-hd-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);visibility:visible;z-index:2;}
/* ── DOCK MOBILE : onglets Itinéraire / Tableau repliables (bas gauche) ── */
.m-dock{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--accbar,0px));z-index:16;display:flex;flex-direction:column;align-items:flex-start;gap:3px;pointer-events:none;}
.m-dock-tabs{display:flex;gap:7px;pointer-events:auto;align-self:stretch;width:100%;}
.m-dock-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 8px;border-radius:14px;border:2px solid var(--border);
  background:#fff;color:var(--teal-800);font-family:var(--font);font-size:12.5px;font-weight:700;line-height:1.12;text-align:center;box-shadow:0 2px 11px rgba(0,0,0,.17);cursor:pointer;}
.m-dock-btn svg{width:16px;height:16px;flex-shrink:0;}
.m-dock-btn.on{background:var(--teal);color:#fff;border-color:var(--teal);}
.m-dock-panel{position:relative;align-self:stretch;width:100%;max-height:60vh;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:16px;border:2px solid var(--border);box-shadow:0 8px 30px rgba(0,0,0,.22);pointer-events:auto;}
.m-dock-close{position:absolute;top:7px;right:7px;z-index:3;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(0,0,0,.5);
  background:#fff;color:var(--n700);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.18);}
.m-dock-close svg{width:15px;height:15px;}
/* Croix pour replier les 2 meilleurs résultats (dans l'en-tête du panneau) */
.m-dock-collapse{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(0,0,0,.5);background:#fff;color:var(--teal-800);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.m-dock-collapse svg{width:14px;height:14px;}
/* Pastille verte ronde (pompe) = les 2 meilleurs résultats repliés */
.m-dock-pill{pointer-events:auto;width:52px;height:52px;border-radius:9999px;background:var(--teal);color:#fff;border:1.5px solid rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.30);}
.m-dock-pill svg{width:26px;height:26px;}
.m-dock-pill.on{outline:3px solid var(--teal-800);outline-offset:2px;}
/* Trajet sélectionné : rail de pastilles rondes à GAUCHE + panneau des stations à droite */
.m-dock-chosen{flex-direction:column;align-items:stretch;gap:8px;}
.m-dock-rail{display:flex;flex-direction:row;gap:10px;pointer-events:auto;}
.m-dock-chosen .m-dock-panel{width:100%;align-self:stretch;}
/* Étoile « favori » sur les cartes résultats */
.fav-star{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:0 2px;color:var(--n300);flex-shrink:0;}
.fav-star.on{color:#f5b50a;}
.m-dock-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--n400);padding:11px 44px 8px var(--px);flex-shrink:0;}
/* En-tête liste stations + bouton « Masquer » discret intégré (au lieu d'un grand bouton teal). */
.m-dock-hd-flex{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:8px;}
.m-dock-hide{display:inline-flex;align-items:center;gap:3px;background:#fff;border:1.5px solid rgba(0,0,0,.5);color:var(--teal-800);font-size:10.5px;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer;padding:3px 9px;border-radius:9999px;flex-shrink:0;pointer-events:auto;}
.m-dock-hide svg{width:12px;height:12px;}
.m-dock-hide:active{background:var(--teal-lite);}
/* Bouton « Afficher les stations » discret (vue 2-meilleurs). */
.m-dock-showrow{padding:7px var(--px) 9px;display:flex;pointer-events:auto;}
.m-dock-show{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:33px;border-radius:10px;border:1.5px solid var(--teal);background:white;color:var(--teal-800);font-size:12px;font-weight:700;cursor:pointer;}
.m-dock-show svg{width:15px;height:15px;}
.m-dock-show:active{background:var(--teal-lite);}
.m-dock-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
body.is-desktop .m-dock{display:none;}
/* croix de réduction du filtre (mobile) */
.search-x{position:absolute;top:6px;right:6px;z-index:5;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(0,0,0,.5);
  background:#fff;color:var(--teal-800);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.search-x svg{width:16px;height:16px;stroke-width:2.6;}
body.is-desktop .search-x{display:none;}
body.is-mobile .search-overlay{padding-top:14px;}
/* Bouton « Installer » dans le header, à droite du logo (mobile uniquement) */
.hdr-install{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;flex-shrink:0;white-space:nowrap;
  border:2px solid var(--yellow-dk);background:var(--yellow);color:var(--yellow-text);border-radius:9999px;
  font-family:var(--font);font-size:11.5px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.hdr-install svg{width:15px;height:15px;}
body.is-mobile .hdr-left{padding-left:12px;gap:8px;}
body.is-desktop .hdr-install{display:none;}
/* ── Bouton « porte » de déconnexion (rouge, haut-droite, desktop uniquement) ── */
.hdr-logout{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  border:1.5px solid var(--red-text,#c0392b);background:var(--red-bg,#fdecea);color:var(--red-text,#c0392b);
  border-radius:10px;cursor:pointer;transition:background .15s,color .15s;}
.hdr-logout:hover{background:var(--red-text,#c0392b);color:#fff;}
.hdr-logout svg{width:19px;height:19px;}
body.is-mobile .hdr-logout{display:inline-flex;width:36px;height:36px;margin-left:2px;}
body.is-mobile .hdr-logout svg{width:18px;height:18px;}
/* ── PWA : bannière « Installer sur l'écran d'accueil » ── */
#pwa-banner{position:fixed;left:10px;right:10px;bottom:10px;z-index:3000;display:flex;align-items:center;gap:11px;
  background:#fff;border:2px solid var(--teal);border-radius:16px;padding:9px 11px;box-shadow:0 8px 30px rgba(0,0,0,.24);
  max-width:460px;margin:0 auto;transform:translateY(160%);opacity:0;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s;}
#pwa-banner.show{transform:translateY(0);opacity:1;}
#pwa-banner .pwa-ic{width:42px;height:42px;border-radius:10px;flex-shrink:0;}
#pwa-banner .pwa-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1;}
#pwa-banner .pwa-txt b{font-size:13.5px;color:var(--teal-800);font-weight:800;}
#pwa-banner .pwa-txt span{font-size:11px;color:var(--n600);}
#pwa-banner .pwa-go{flex-shrink:0;background:var(--teal);color:#fff;border:none;border-radius:9999px;
  font-family:var(--font);font-size:13px;font-weight:700;padding:8px 16px;cursor:pointer;}
#pwa-banner .pwa-x{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:none;background:var(--n100);
  color:var(--n600);font-size:19px;line-height:1;cursor:pointer;}
/* Guide iOS (Safari) */
.pwa-ios{position:fixed;inset:0;z-index:3100;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;
  padding:0 12px 0;animation:pwa-fade .2s;}
@keyframes pwa-fade{from{opacity:0}to{opacity:1}}
.pwa-ios-card{position:relative;background:#fff;border-radius:20px;padding:18px 16px 18px;max-width:440px;width:100%;margin-bottom:96px;
  box-shadow:0 8px 34px rgba(0,0,0,.30);text-align:center;}
.pwa-ios-x{position:absolute;top:8px;right:10px;width:30px;height:30px;border:none;background:var(--n100);border-radius:50%;color:var(--n600);font-size:21px;line-height:1;cursor:pointer;}
.pwa-ios-ic{width:52px;height:52px;border-radius:13px;margin-bottom:6px;}
.pwa-ios-title{font-size:17px;font-weight:800;color:var(--teal-800);margin-bottom:6px;line-height:1.2;}
/* 3 étapes VISUELLES (icône + 1 mot), peu de texte */
.pwa-ios-row{display:flex;align-items:stretch;justify-content:center;gap:5px;margin:16px 0 2px;}
.pwa-vstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--teal-lite);border:1.5px solid var(--teal-100);border-radius:14px;padding:16px 5px 11px;position:relative;}
.pwa-vstep.on{border-color:var(--teal);box-shadow:0 0 0 3px oklch(0.42 0.10 183/.14);}
.pwa-step-n{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:23px;height:23px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.pwa-vico{color:var(--teal-800);height:34px;display:flex;align-items:center;}
.pwa-vico svg{width:32px;height:32px;display:block;}
.pwa-vico-go{color:var(--green-text);}
.pwa-vstep.on .pwa-vico{animation:pwa-pop 1.4s ease-in-out infinite;}
.pwa-vlbl{font-size:11px;font-weight:800;color:var(--teal-800);line-height:1.15;text-align:center;}
.pwa-vsep{align-self:center;color:var(--n400);font-size:20px;font-weight:800;}
@keyframes pwa-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
/* Pointeur animé vers le bouton « Partager » de Safari (barre du bas iPhone) */
.pwa-ios-pointer{position:fixed;left:50%;bottom:7px;transform:translateX(-50%);z-index:3200;display:flex;flex-direction:column;align-items:center;pointer-events:none;}
.pwa-ios-pulse{width:50px;height:50px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;animation:pwa-ring 1.6s infinite;}
.pwa-ios-pulse svg{width:26px;height:26px;}
.pwa-ios-arrow{color:#fff;font-size:30px;line-height:.7;margin-top:2px;animation:pwa-bounce2 1.2s infinite;text-shadow:0 1px 6px rgba(0,0,0,.55);}
@keyframes pwa-ring{0%{box-shadow:0 0 0 0 oklch(0.42 0.10 183/.55)}70%{box-shadow:0 0 0 16px oklch(0.42 0.10 183/0)}100%{box-shadow:0 0 0 0 oklch(0.42 0.10 183/0)}}
@keyframes pwa-bounce2{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
body.is-desktop #pwa-banner{left:auto;right:18px;bottom:18px;margin:0;}
/* ── STATION ROW ── */
.st-row{display:flex;align-items:center;gap:10px;padding:9px var(--px);
  background:white;border-bottom:1px solid var(--divider);cursor:pointer;transition:background 100ms;}
.st-row:active{background:var(--teal-lite);}
/* ── Ligne station MOBILE : Enseigne · Nom/Adresse(copiable) · Détour+litres · Prix/L+score · Prix réel+plein · Nav ── */
.m-row{gap:5px;padding:8px 9px;align-items:center;}
.m-row .st-logo{width:30px;height:30px;}
.m-row .st-body{flex:1;min-width:50px;}
.m-row .st-name{font-size:12px;font-weight:700;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.m-row .st-addr-row{display:flex;align-items:center;gap:3px;margin-top:1px;min-width:0;}
.m-row .st-addr{flex:1;font-size:9.5px;color:var(--n600);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.m-row .st-copy{flex-shrink:0;background:none;border:none;padding:0 2px;font-size:12px;color:var(--n400);cursor:pointer;line-height:1;}
/* Colonne « Meilleur jour » (mobile, flexibilité active) à gauche du détour */
.m-row .m-jour{width:50px;}
.m-row .m-jour-d{font-size:9px;font-weight:700;line-height:1.15;}
.m-row .m-jour-c{font-size:8px;color:var(--n500);margin-top:1px;font-variant-numeric:tabular-nums;}
.m-row .st-copy:active{color:var(--teal-800);}
.m-row .m-col{flex-shrink:0;text-align:center;line-height:1.12;}
.m-row .m-dist{width:74px;}
.m-row .m-dist-km{font-size:10px;font-weight:700;color:var(--n800);font-variant-numeric:tabular-nums;white-space:nowrap;}
.m-row .m-dist-l{font-size:8.5px;color:var(--n500);margin-top:2px;}
.m-row .m-pl{width:48px;}
.m-row .m-pump{font-size:11px;font-weight:700;color:var(--n900);font-variant-numeric:tabular-nums;}
.m-row .m-pump .m-u{font-size:8px;font-weight:600;color:var(--n600);}
.m-row .m-score{display:inline-block;font-size:10px;font-weight:800;border-radius:9999px;padding:0 5px;margin-top:2px;font-variant-numeric:tabular-nums;}
.m-row .m-real{width:52px;}
.m-row .m-perl-big{font-size:11.5px;font-weight:800;color:var(--teal-800);font-variant-numeric:tabular-nums;}
.m-row .m-perl-big .m-u{font-size:8px;font-weight:600;color:var(--n600);}
.m-row .m-plein-sm{font-size:9.5px;font-weight:700;color:var(--n600);font-variant-numeric:tabular-nums;margin-top:2px;}
/* Équilibrage vertical : ligne « valeur » à hauteur CONSTANTE → les sous-lignes (score, plein, litres) s'alignent entre toutes les colonnes */
.m-row .m-col{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.m-row .m-dist-km,.m-row .m-pump,.m-row .m-perl-big,.m-row .m-jour-d{min-height:15px;display:flex;align-items:center;justify-content:center;}
.m-row .m-nav{flex-shrink:0;display:flex;flex-direction:column;gap:3px;width:50px;}
.m-row .m-nav .navbtn{width:100%;height:20px;padding:0 4px;font-size:9px;gap:2px;justify-content:center;box-shadow:none;}
/* Bouton Maps : logo + libellé « Maps » entièrement visibles dans la colonne nav (50px) */
.m-row .m-nav .navbtn-maps{padding:0;gap:2px;}
.m-row .m-nav .navbtn-maps .nb-logobox{width:16px;border-right:none;}
.m-row .m-nav .navbtn-maps .nb-lbl{padding:0 3px;font-size:9px;}
.m-row.m-cheap{background:var(--yellow-bg);box-shadow:inset 4px 0 0 var(--yellow-dk);}
.m-row-hd{padding:5px 9px 3px;background:var(--n50);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--border);}
.m-row-hd .m-hd{font-size:8px;font-weight:800;color:var(--n500);line-height:1.1;text-transform:uppercase;letter-spacing:.2px;}
/* Cartes « 2 meilleures stations » : mêmes colonnes que le tableau (Prix Carburant | Prix réel) */
.sol-card{cursor:pointer;border-radius:11px;border:1.5px solid rgba(0,0,0,.06);}
.sol-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;display:flex;align-items:center;gap:5px;line-height:1.1;}
.sol-hd{position:static;background:transparent;border-bottom:none;padding:0 9px 1px;}
.sol-hd .m-hd{color:var(--n600);}
.st-logo{width:32px;height:32px;border-radius:8px;object-fit:contain;
  border:1.5px solid var(--border);flex-shrink:0;background:white;padding:2px;}
.st-body{flex:1;min-width:0;}
.st-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-meta{font-size:11px;color:var(--n600);margin-top:1px;}
.st-price{text-align:right;flex-shrink:0;}
.price-big{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;}
.price-unit{font-size:10px;color:var(--n400);}

/* ── MAP MARKERS ── */
.map-marker{padding:3px 7px;border-radius:9999px;font-size:10px;font-weight:700;
  white-space:nowrap;border:2px solid white;box-shadow:0 1px 4px rgba(0,0,0,.25);font-family:var(--font);}
.map-marker.low{background:var(--green-text,#2a6b3c);color:white;}
.map-marker.mid{background:oklch(0.48 0.14 55);color:white;}
.map-marker.high{background:oklch(0.40 0.18 25);color:white;}
.map-marker.best{background:var(--yellow);color:var(--teal-800);}

.fab{position:absolute;right:12px;z-index:16;width:44px;height:44px;
  border-radius:9999px;background:white;border:1px solid rgba(0,0,0,.3);cursor:pointer;
  box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--teal);}

/* ── Bandeau noir permanent (mention légale DGCCRF) — page accueil ── */
:root{--accbar:0px;}
.accueil-banner{background:#000;color:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--font);}
.accueil-banner span{display:block;}
.accueil-banner a{color:var(--yellow);font-weight:700;text-decoration:underline;}
/* Mobile : collé tout en bas, pleine largeur — fait office de bottom header */
body.is-mobile .accueil-banner{position:absolute;left:0;right:0;bottom:0;z-index:17;
  padding:8px 14px;font-size:12.5px;line-height:1.3;border-top:2px solid #000;border-radius:16px 16px 0 0;}
/* Desktop : juste sous le header, de la droite jusqu'à la zone de filtres (s'arrête avant) */
body.is-desktop .accueil-banner{position:absolute;top:0;left:max(22%,360px);right:0;z-index:2;
  padding:8px 24px;font-size:14.5px;line-height:1.4;border-radius:0 0 16px 16px;}
/* Saut de ligne après « …changement. » sur desktop uniquement */
.accueil-banner .acc-br{display:none;}
body.is-desktop .accueil-banner .acc-br{display:inline;}
/* Croix blanche tout à droite pour masquer le bandeau */
.accbar-x{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:none;background:transparent;color:#fff;cursor:pointer;opacity:.85;border-radius:8px;flex:none;}
.accbar-x:hover{opacity:1;background:rgba(255,255,255,.15);}
body.is-desktop .accbar-x{right:12px;}
/* on réserve symétriquement la place de la croix → le texte reste centré sans passer dessous */
body.is-mobile .accueil-banner{padding-left:40px;padding-right:40px;}
body.is-desktop .accueil-banner{padding-left:48px;padding-right:48px;}

/* ── STATS ── */
.map-area{position:absolute;inset:0;}
#stats-map{width:100%;height:100%;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px var(--px);}
.stat-card{background:white;border:2px solid var(--border);border-radius:12px;padding:11px 12px;box-shadow:var(--shadow-card);}
.stat-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--n400);margin-bottom:3px;}
.stat-val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--teal);}
.chart-ph{background:linear-gradient(135deg,var(--teal-lite) 0%,oklch(0.94 0.02 183) 100%);
  border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--teal);}
.sec-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--n400);padding:10px var(--px) 5px;}
/* Légende de la carte « meilleurs prix » : plus grosse + contour foncé (mobile & desktop). */
.carte-leg{position:absolute;top:12px;right:12px;z-index:20;background:oklch(1 0 0/.98);border-radius:14px;
  padding:13px 15px;box-shadow:var(--shadow-card);border:2.5px solid var(--teal-800);
  font-size:12.5px;color:var(--n700);pointer-events:none;max-width:210px;line-height:1.25;}
/* Desktop : rapprochée de la France (décollée du coin) + un poil plus grande. */
body.is-desktop .carte-leg{top:9%;right:9%;font-size:13px;padding:15px 17px;max-width:230px;}
/* Classement enseignes (desktop) : tableau (filtré par zone) à gauche + carte leader (nationale) à droite */
body.is-desktop .ens-split{display:flex;gap:16px;align-items:flex-start;}
body.is-desktop .ens-split-table{flex:1 1 0;min-width:0;max-width:560px;}   /* tableau à gauche (cadré) */
body.is-desktop .ens-split-map{flex:1.6 1 0;min-width:0;}                   /* carte à droite, plus grande */

/* ── TABLE ── */
.dt{width:100%;border-collapse:collapse;table-layout:fixed;}
.dt th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--n400);padding:6px 10px;border-bottom:2px solid var(--border);text-align:left;background:var(--n50);}
.dt td{font-size:13px;padding:8px 10px;border-bottom:1px solid var(--divider);vertical-align:middle;}
.dt tr:last-child td{border-bottom:none;}
.dt tr:hover td{background:var(--teal-lite);}
.dt tr{cursor:pointer;}
/* table compacte (résultats trajet) : moins de padding, icône enseigne dans la colonne rang */
/* Classement enseignes : colonnes équilibrées (#/prix/score étroites, Enseigne prend le reste → moins de lignes) */
.dt-ens-table th:first-child,.dt-ens-table td:first-child{width:38px;}
.dt-ens-table th:nth-child(3),.dt-ens-table td:nth-child(3){width:82px;}
.dt-ens-table th:nth-child(4),.dt-ens-table td:nth-child(4){width:72px;}
.dt-ens-table .dt-ens{overflow:hidden;text-overflow:ellipsis;}
.dt-tight td,.dt-tight th{padding:7px 5px;}
.dt-tight td:first-child,.dt-tight th:first-child{padding-left:8px;}
.dt-tight td:last-child,.dt-tight th:last-child{padding-right:9px;}
.rank-ens{display:flex;flex-direction:column;align-items:center;gap:3px;}
.rank-ens img{width:26px;height:26px;object-fit:contain;border-radius:5px;border:1px solid var(--border);background:white;padding:1px;}
.rank-ens .rank{width:17px;height:17px;font-size:9px;}
.thinfo{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:9999px;
  background:var(--n400);color:white;font-size:9px;font-weight:800;font-style:normal;margin-left:3px;
  cursor:pointer;vertical-align:middle;line-height:1;}
.thinfo:active{background:var(--teal);}
.navbtn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:9px;text-decoration:none;flex-shrink:0;font-size:11.5px;font-weight:700;font-family:var(--font);cursor:pointer;border:1.5px solid var(--border);background:white;color:var(--n900);box-shadow:0 1px 3px rgba(0,0,0,.12);white-space:nowrap;overflow:hidden;}
/* !important : bat la couleur de lien par défaut de Leaflet (.leaflet-container a) dans les bulles */
.navbtn-waze{background:#33CCFF;border-color:#23b6e0;color:#fff!important;}
.navbtn-waze .nb-ico{color:#fff;flex-shrink:0;}
/* Maps : logo plein bord à gauche (que de la couleur), libellé « Maps » à droite */
.navbtn-maps{padding:0;gap:0;background:#fff;color:var(--n900)!important;}
.navbtn-maps .nb-logobox{height:100%;width:30px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border-right:1.5px solid var(--border);}
.navbtn-maps .nb-logobox img{width:150%;height:150%;object-fit:cover;display:block;}
.navbtn-maps .nb-lbl{padding:0 11px;color:var(--n900);}
.rank{width:22px;height:22px;border-radius:9999px;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.r1{background:oklch(0.97 0.05 88);color:var(--yellow-text);}
.r2{background:var(--n100);color:var(--n600);}
.rn{background:var(--teal-lite);color:var(--teal);}
.pbadge{display:inline-block;padding:2px 7px;border-radius:9999px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.pbadge.low{background:var(--green-bg);color:var(--green-text);}
.pbadge.mid{background:var(--orange-bg);color:var(--orange-text);}
.pbadge.high{background:oklch(0.96 0.05 25);color:var(--red-text);}
.pbadge.top{background:#FDE047;color:#713F12;}   /* 20/20 = jaune/or (score parfait) */

/* ── CLASSEMENTS : cellule station/enseigne ── */
.cl-st{display:flex;align-items:center;gap:9px;min-width:0;}
.cl-logo{width:30px;height:30px;flex-shrink:0;object-fit:contain;border-radius:6px;border:1.5px solid var(--border);background:white;padding:2px;}
.cl-dot{width:8px;height:8px;border-radius:9999px;flex-shrink:0;}
.cl-stxt{min-width:0;flex:1;}
.cl-name{font-size:13px;font-weight:600;color:var(--n900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25;}
.cl-city{font-size:11px;font-weight:600;color:var(--n700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-addr{font-size:10px;color:var(--n400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ens-chip{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;height:30px;padding:0 11px 0 8px;border-radius:9999px;border:2px solid var(--border);background:white;color:var(--n700);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.ens-chip img{width:18px;height:18px;object-fit:contain;border-radius:4px;}
.ens-chip.on{background:var(--teal);border-color:var(--teal);color:white;}
/* ── PLAGE DE DATES PERSONNALISÉE ── */
.prange{display:none;align-items:flex-end;gap:8px;margin-top:9px;}
.prange.open{display:flex;}
.prange-f{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.prange-f span{font-size:9px;font-weight:700;color:var(--n400);text-transform:uppercase;letter-spacing:.05em;}
.prange-f input{height:34px;border:2px solid var(--border);border-radius:9px;background:white;padding:0 9px;font-family:var(--font);font-size:12px;font-weight:600;color:var(--n900);width:100%;box-sizing:border-box;}
.prange-f input:focus{outline:none;border-color:var(--teal);}
.prange-ar{font-size:13px;color:var(--n400);padding-bottom:8px;flex-shrink:0;}

/* ── SETTINGS ── */
.settings-row{display:flex;align-items:center;padding:11px var(--px);
  background:white;border-bottom:1px solid var(--divider);gap:12px;}
/* Variante compacte : listes denses (dépenses, relevés, prestations entretien) — lignes basses, texte serré */
.settings-row.compact{padding:6px var(--px);gap:8px;}
.settings-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toggle{width:44px;height:26px;border-radius:9999px;border:none;cursor:pointer;
  position:relative;transition:background 200ms;flex-shrink:0;}
.toggle.on{background:var(--teal);}
.toggle.off{background:var(--n100);}
.toggle::after{content:'';position:absolute;top:3px;width:20px;height:20px;
  border-radius:9999px;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left 200ms;}
.toggle.on::after{left:21px;}
.toggle.off::after{left:3px;}
.radio-btn{height:26px;padding:0 9px;border-radius:9999px;border:2px solid var(--border);
  background:transparent;font-family:var(--font);font-size:11px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all 100ms;color:var(--n600);}
.radio-btn.on{background:var(--teal-lite);color:var(--teal);border-color:var(--teal);}

/* ── INPUTS / BTNS ── */
.inp{width:100%;height:69px;padding:0 14px;background:white;border:2px solid var(--border);
  border-radius:10px;font-family:var(--font);font-size:14px;outline:none;color:var(--n900);}
.inp:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-lite);}
/* modif : carnet d'entretien — hauteur des champs d'ajout/modif de prestation réduite d'environ 60 % (69px → 28px). */
.maint-compact .inp{height:28px;font-size:12.5px;padding:0 10px;border-radius:8px;}
.btn{height:44px;padding:0 18px;border-radius:9999px;border:none;font-family:var(--font);
  font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.btn-teal{background:var(--teal);color:white;}
.btn-yellow{background:var(--yellow);color:var(--teal-800);}
.btn-sm{height:34px;font-size:12px;padding:0 12px;}
.btn-outline{background:transparent;color:var(--teal);border:1.5px solid oklch(0.70 0.08 183);}
.avatar{width:32px;height:32px;border-radius:9999px;background:var(--yellow);
  color:var(--teal-800);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;cursor:pointer;flex-shrink:0;}

/* ── LOGIN ── */
.login-hero{background:oklch(0.62 0.10 183);padding:40px 20px 28px;display:flex;
  flex-direction:column;align-items:center;gap:14px;text-align:center;}
.login-sheet{background:white;border-radius:24px 24px 0 0;padding:24px 20px 32px;flex:1;}
.auth-toggle{display:flex;background:var(--n100);border-radius:9999px;padding:3px;gap:3px;margin-bottom:18px;border:2px solid var(--border);}
.auth-tab{flex:1;height:42px;border:none;border-radius:9999px;background:transparent;
  font-family:var(--font);font-size:14px;font-weight:600;color:var(--n400);cursor:pointer;transition:all 150ms;letter-spacing:-.01em;}
.auth-tab.on{background:var(--teal);color:white;font-weight:700;box-shadow:0 2px 8px oklch(0.42 0.10 183/0.35);}
/* ── LOGIN desktop : carte 2 colonnes (atouts à gauche, formulaire à droite) ── */
body.is-desktop .login-scroll-d{max-width:none;width:100%;}
.login-wrap-d{min-height:100%;display:flex;align-items:center;justify-content:center;padding:40px 24px;}
.login-card-d{display:flex;width:100%;max-width:880px;background:#fff;border-radius:22px;overflow:hidden;
  border:2px solid var(--border);box-shadow:0 18px 50px oklch(0.17 0.006 183/.16);}
.login-side{flex:0 0 42%;background:radial-gradient(ellipse 130% 110% at 25% 0%,oklch(0.64 0.10 183) 0%,oklch(0.50 0.10 183) 100%);
  color:#fff;padding:44px 36px;display:flex;flex-direction:column;gap:24px;justify-content:center;}
.login-side-tag{font-family:var(--font-d);font-size:25px;font-weight:800;line-height:1.18;letter-spacing:-.01em;}
.login-side-list{display:flex;flex-direction:column;gap:17px;}
.login-side-item{display:flex;align-items:flex-start;gap:12px;}
.login-side-ic{font-size:21px;line-height:1.05;flex-shrink:0;}
.login-side-t{font-size:14.5px;font-weight:700;line-height:1.2;}
.login-side-s{font-size:12px;opacity:.86;line-height:1.3;margin-top:1px;}
.login-form-d{flex:1;padding:40px 42px;display:flex;flex-direction:column;justify-content:center;min-width:0;}

/* ── TOAST ── */
.toast-wrap{position:fixed;top:calc(var(--hdr) + 8px);left:16px;right:16px;
  z-index:99;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.toast{padding:10px 14px;border-radius:12px;font-size:13px;font-weight:500;
  color:white;opacity:1;transition:opacity 400ms;}
.toast--default{background:var(--n900);}
.toast--success{background:var(--green-text);}
.toast--warning{background:var(--orange-text);}
.toast--error{background:var(--red-text);}

/* ── AUTOCOMPLETE ── */
.ac-drop{background:white;border-radius:12px;box-shadow:0 4px 24px oklch(0.17 0.006 183/.16);overflow:hidden;border:1px solid var(--border);}
.ac-item{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--border);}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item:active{background:var(--green-lt);}
.ac-main{font-size:13px;font-weight:600;color:var(--n900);}
.ac-sub{font-size:11px;color:var(--n600);margin-top:1px;}

/* ── HEADER NAV (desktop uniquement) ── */
.hdr-nav{flex:1;display:flex;justify-content:center;align-items:center;gap:0;}
.hdr-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--hdr);padding:0 20px;border:none;background:transparent;cursor:pointer;font-family:var(--font);font-size:10px;font-weight:600;color:var(--n900);transition:color 120ms;}
.hdr-nav-btn.active{color:var(--teal);}
.hdr-nav-btn:hover:not(.active){color:var(--teal-800);background:transparent;}
.hdr-sep{width:1px;height:24px;background:var(--border);flex-shrink:0;align-self:center;}
body.is-mobile .hdr-nav{display:none;}
body.is-mobile .hdr-sep{display:none;}
body.is-mobile .hdr{border-bottom:3px solid oklch(0.64 0.008 183);}
body.is-mobile .bottom-nav{border-top:3px solid oklch(0.64 0.008 183);}
body.is-desktop .bottom-nav{display:none!important;}
body.is-desktop .view{order:1;align-items:center;}/* sub-nav (order 0 par défaut) remonte avant view sur desktop */
body.is-desktop .scroll-page{max-width:760px;width:100%;}
/* Suivi des prix : graphiques + filtres sur toute la largeur de l'écran (lisibilité) */
body.is-desktop .scroll-page.suivi-wide,body.is-desktop .scroll-page.class-wide{max-width:none;}

/* ══ DESKTOP — HEADER : Accueil centré, séparateurs épais & centrés ══ */
/* Col 1 = largeur de la sidebar (logo) ; col 2 = zone carte → la nav (Accueil au centre) est centrée sur la carte. */
body.is-desktop .hdr{display:grid;grid-template-columns:max(20%,300px) minmax(0,1fr) auto;align-items:center;padding:0;gap:0;}
.hdr-left{display:flex;align-items:center;gap:10px;justify-self:start;min-width:0;padding-left:26px;}
.hdr-left>img{margin-left:0!important;}
body.is-desktop .hdr-center{grid-column:2;grid-row:1;height:100%;display:flex;align-items:center;justify-self:center;}
body.is-desktop .hdr-right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:14px;padding-right:26px;}
body.is-mobile .hdr-center{display:none;}
body.is-mobile .hdr-nav-btn{display:none;}
.hdr-sep{width:2.5px;height:30px;background:oklch(0.78 0.012 183);border-radius:2px;flex-shrink:0;margin:0 18px;align-self:center;}
.hdr-home{display:flex;align-items:center;gap:9px;height:40px;padding:0 22px;border:2px solid var(--yellow-dk);
  border-radius:9999px;background:var(--yellow);color:var(--yellow-text);font-family:var(--font);font-size:14px;
  font-weight:700;cursor:pointer;transition:all 140ms;white-space:nowrap;}
.hdr-home svg{width:19px;height:19px;}
.hdr-home:hover{box-shadow:0 3px 12px oklch(0.68 0.17 87/.40);}
.hdr-home.active{box-shadow:0 2px 11px oklch(0.68 0.17 87/.50);}
body.is-mobile .hdr-home{display:none;}
body.is-desktop .hdr-nav-btn{flex-direction:row;gap:9px;height:40px;padding:0 20px;border-radius:9999px;font-size:14px;font-weight:600;color:var(--n900);}
body.is-desktop .hdr-nav-btn svg{width:19px;height:19px;}
body.is-desktop .hdr-nav-btn .bnav-pip{display:none;}
.hdr-avatar{width:26px;height:26px;border-radius:9999px;background:var(--yellow);color:var(--teal-800);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
/* Bouton « Mon compte » (Paul) à droite du header, à côté de Se déconnecter */
.hdr-profile-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:none;background:transparent;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;color:var(--n900);border-radius:9999px;transition:background 120ms,color 120ms;}
.hdr-profile-btn.active{background:var(--teal-lite);color:var(--teal);}
.hdr-profile-btn:hover:not(.active){background:var(--green-lt-bdr);color:var(--teal-800);}
body.is-mobile .hdr-profile-btn{height:36px;padding:0 2px;gap:0;}
body.is-mobile .hdr-profile-name{display:none;}   /* mobile : avatar seul, sans le nom */
/* Séparateurs verticaux pleine hauteur entre les items de la bottom-nav (mobile) + 3 portions égales */
.bnav-div{width:1px;align-self:stretch;background:var(--border);flex-shrink:0;}
.bnav-third-home{flex:1;display:flex;align-items:center;justify-content:center;}
body.is-desktop .hdr-nav-btn.active{background:var(--teal-lite);color:var(--teal);font-weight:700;}
body.is-desktop .hdr-nav-btn:hover:not(.active){background:transparent;color:var(--teal-800);}
/* Liste déroulante multi-sélection des enseignes (classement stations) */
.ens-drop{position:absolute;z-index:60;top:calc(100% + 5px);left:0;background:#fff;border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.16);padding:5px;max-height:300px;overflow-y:auto;min-width:230px;}
.ens-opt{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;cursor:pointer;font-family:var(--font);font-size:13px;color:var(--n900);padding:8px 9px;border-radius:8px;text-align:left;}
.ens-opt:hover{background:var(--n50);}
.ens-cbx{width:16px;height:16px;border-radius:5px;border:2px solid var(--border);flex-shrink:0;position:relative;}
.ens-cbx.on{background:var(--teal);border-color:var(--teal);}
.ens-cbx.on::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
/* Séparateurs verticaux PLEINE HAUTEUR du header entre Statistiques · Accueil · Ma voiture (desktop) */
.hdr-vsep{width:2px;align-self:stretch;background:var(--border);flex-shrink:0;margin:0 24px;}   /* épaisseur fixe (crisp) + triple espace */
body.is-mobile .hdr-vsep{display:none;}

/* ══ DESKTOP — page Recherche en deux colonnes ══ */
.dk-search{display:none;}
body.is-desktop .dk-search{display:block;position:relative;width:100%;flex:1;min-height:0;}
/* Carte = fond plein écran, visible derrière les panneaux flottants */
body.is-desktop .dk-search>#map-slot{position:absolute!important;inset:0!important;z-index:0;}
#map-slot{overflow:hidden;}
/* Sidebar gauche flottante (transparente → la carte apparaît derrière les résultats) */
body.is-desktop .dk-sidebar{position:absolute;left:0;top:0;bottom:0;width:max(22%,360px);z-index:3;
  background:transparent;border:none;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:0 14px 14px;pointer-events:none;}
body.is-desktop .dk-sidebar>*{pointer-events:auto;}
/* Filtres collés à la barre de navigation (haut), bloc coûts poussé en bas → les 2 blocs occupent toute la hauteur */
body.is-desktop .dk-results{margin-top:auto;}
.dk-form{background:white;border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);padding:18px 18px 20px;flex-shrink:0;}
.dk-form .mode-btn{height:46px;font-size:14px;}
.dk-results{display:flex;flex-direction:column;gap:10px;background:transparent;}
/* Bloc itinéraires (desktop) : panneau blanc arrondi, détaché des filtres du haut (gap sidebar) */
.dk-itin-panel{background:#fff;border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);padding:14px 15px;}
/* Bouton d'inversion départ ↔ arrivée */
.swap-btn{width:30px;height:30px;border-radius:9999px;border:1.5px solid var(--border);background:#fff;cursor:pointer;
  color:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.swap-btn:hover{background:var(--teal-lite);}
.dk-sol-row{display:flex;flex-direction:column;gap:10px;padding:0;}
.dk-sol-row .st-row{border:2px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);padding:13px 15px;}
.dk-results .st-logo{width:40px;height:40px;}
.dk-results .st-name{font-size:14px;}
.dk-results .st-meta{font-size:12px;}
.dk-results .price-big{font-size:20px;}
/* Tableau bas-droit : panneau blanc OPAQUE, lignes COLLÉES, arrondi UNIQUEMENT en haut */
body.is-desktop .dk-table{position:absolute;left:max(22%,360px);right:0;bottom:0;height:50%;z-index:2;
  overflow-y:auto;background:#fff;border:none;border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.10);padding:0;}
.dk-table .dk-thead{position:sticky;top:0;z-index:3;background:#fff;border-radius:16px 16px 0 0;
  box-shadow:var(--shadow-sm);border-bottom:2px solid var(--border);}
/* Barre haute du tableau : titre + bouton Réduire/Afficher (toujours visible, même réduit) */
.dk-table-bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 18px 7px;}
.dk-table-bar-ttl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--n600);}
.dk-table-toggle{flex-shrink:0;border:1.5px solid rgba(0,0,0,.5);background:#fff;color:var(--teal-800);
  font-family:var(--font);font-size:11px;font-weight:700;border-radius:9999px;padding:3px 12px;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.12);transition:background 120ms;}
.dk-table-toggle:hover{background:var(--green-lt-bdr,#e6f1ee);}
/* État réduit : seule la barre reste, la carte récupère l'espace */
.dk-table.is-collapsed{height:auto!important;overflow:visible;}
.dk-table.is-collapsed .dk-thead{border-bottom:none;box-shadow:none;border-radius:16px 16px 0 0;}
.dk-table.is-collapsed .dk-thead-cols,
.dk-table.is-collapsed .st-row,
.dk-table.is-collapsed .dk-norow{display:none;}
.dk-thead-cols{padding:14px 18px;}
/* en-têtes : sur 2 lignes si besoin (le « i » reste visible), gris bien contrasté */
.dk-table .dk-thead .dk-th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--n600);display:block;white-space:normal;line-height:1.25;text-align:center;}
.dk-table .dk-thead .dk-th .thinfo{vertical-align:middle;}
/* En-têtes triables : curseur + flèche de tri */
.dk-table .dk-thead .dk-sortable{cursor:pointer;user-select:none;}
.dk-table .dk-thead .dk-sortable:hover{color:var(--n900);}
.dk-table .dk-thead .dk-sort-ar{font-size:9px;color:var(--n400);vertical-align:middle;}
.dk-table .dk-thead .dk-sort-ar.on{color:var(--teal-800);font-size:10px;}
.dk-th-logo{width:40px;flex-shrink:0;}
/* Colonne Station : alignée à gauche (avec le nom) */
.dk-table .dk-thead .st-body.dk-th{text-align:left;}
/* lignes collées (séparateur fin, fond blanc opaque) ; chaque champ centré sur la hauteur */
.dk-table .st-row{background:#fff;border:none;border-bottom:1.5px solid var(--divider);border-radius:0;box-shadow:none;margin:0;padding:11px 18px;}
.dk-table .st-row:last-child{border-bottom:none;}
.dk-table .st-row.dk-cheap{background:var(--yellow-bg);box-shadow:inset 4px 0 0 var(--yellow-dk);}   /* station à pastille jaune (n°1) */
.dk-table .st-logo{width:40px;height:40px;}
.dk-table .st-name{font-size:15px;font-weight:700;}
.dk-table .st-meta{font-size:12.5px;color:var(--n600);}
.dk-table .price-big{font-size:20px;font-weight:800;}
/* Colonnes (alignées entête ↔ lignes) : # · logo · Station · Réservoir · Prix/L pompe(+score) · Détour · Prix/L réel · S'y rendre.
   Toutes les colonnes de données sont centrées ; seule « Station » reste alignée à gauche. */
.dk-table .dk-trow{display:flex;align-items:center;gap:13px;}
.dk-table .dk-trow .st-body{flex:1;min-width:0;}
.dk-table .dk-col-rank{flex-shrink:0;width:24px;text-align:center;font-size:14px;font-weight:800;color:var(--n500);}
.dk-table .dk-col-tank{flex-shrink:0;width:124px;text-align:center;line-height:1.2;}
.dk-table .dk-tank-pct{font-size:15px;font-weight:800;color:var(--n900);font-variant-numeric:tabular-nums;}
.dk-table .dk-tank-lit{font-size:10px;font-weight:600;color:var(--n600);margin-top:1px;line-height:1.25;}
.dk-table .dk-col-perl{flex-shrink:0;width:114px;text-align:center;line-height:1.15;}
.dk-table .dk-perl-val{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--n900);}
.dk-table .dk-perl-u{font-size:11px;font-weight:600;color:var(--n600);}
.dk-table .dk-perl-score{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px;}
.dk-table .dk-col-det{flex-shrink:0;width:78px;text-align:center;line-height:1.2;}
.dk-table .dk-det-km{font-size:14px;font-weight:700;color:var(--n900);font-variant-numeric:tabular-nums;}
.dk-table .dk-det-min{font-size:11.5px;font-weight:600;color:var(--n600);}
.dk-table .st-price{flex-shrink:0;width:112px;text-align:center;line-height:1.15;}
.dk-table .dk-trow .st-price{width:112px;}
.dk-table .dk-price-perl{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--teal-800);}
.dk-table .dk-price-u{font-size:11px;font-weight:700;color:var(--teal-800);}
.dk-table .dk-price-sub{font-size:10.5px;font-weight:600;color:var(--n600);margin-top:1px;}
/* Équilibrage vertical desktop : ligne « valeur » à hauteur CONSTANTE → sous-lignes alignées entre colonnes */
.dk-table .dk-col-tank,.dk-table .dk-col-perl,.dk-table .dk-col-det,.dk-table .st-price{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.dk-table .dk-tank-pct,.dk-table .dk-perl-val,.dk-table .dk-det-km,.dk-table .dk-price-perl{min-height:22px;display:flex;align-items:center;justify-content:center;}
.dk-table .dk-col-nav{flex-shrink:0;width:160px;display:flex;gap:7px;justify-content:center;}
/* Colonne « Jour » (Tendance prix activée) : meilleur jour pour le plein + fiabilité */
.dk-table .dk-col-jour{flex-shrink:0;width:106px;text-align:center;line-height:1.2;}
.dk-table .dk-jour-d{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.dk-table .dk-jour-c{font-size:10px;color:var(--n500);margin-top:2px;}
/* FAB en haut à droite (le bas est occupé par le tableau) */
body.is-desktop .dk-search .fab{position:absolute!important;top:calc(24px + var(--accbar,0px));right:24px;bottom:auto!important;left:auto;width:48px;height:48px;z-index:4;}
/* Loader « croco » : centré à l'écran, agrandi ×2.5 sur desktop */
body.is-desktop #croco-loader{transform:translate(-50%,-50%) scale(1.75)!important;transform-origin:center;z-index:30!important;}
/* Bandeau d'information (clic sur un « i » d'en-tête) : largeur de la carte, en haut, 1 seul à la fois */
.dk-colinfo{position:absolute;top:16px;left:max(20%,300px);right:84px;margin-left:14px;z-index:6;display:none;
  align-items:center;gap:11px;background:#fff;border:2px solid var(--n500);border-radius:12px;
  box-shadow:var(--shadow-pop);padding:11px 12px 11px 13px;font-size:12.5px;color:var(--n700);line-height:1.45;}
.dk-colinfo .ci-i{flex-shrink:0;width:22px;height:22px;border-radius:9999px;background:var(--teal);color:#fff;
  font-size:13px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center;}
.dk-colinfo .ci-txt{flex:1;min-width:0;}
.dk-colinfo .ci-close{flex-shrink:0;border:none;background:var(--n100,#eef2f2);color:var(--n600);width:22px;height:22px;
  border-radius:9999px;cursor:pointer;font-size:12px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;}
.dk-route-hd{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:2px solid var(--border);
  background:var(--teal-lite);position:sticky;top:0;z-index:3;}
.dk-hint{padding:40px 30px;text-align:center;color:var(--n600);font-size:14px;font-weight:600;line-height:1.55;
  display:flex;flex-direction:column;align-items:center;gap:14px;}
.dk-hint .dk-hint-ic{width:54px;height:54px;border-radius:9999px;background:var(--teal-lite);color:var(--teal);
  display:flex;align-items:center;justify-content:center;}

/* ══ DESKTOP — Statistiques : conteneur élargi ══ */
body.is-desktop .scroll-wide{max-width:1120px;}
/* Suivi : descendre le menu carburant d'un cran + graphiques côte à côte */
body.is-desktop .suivi-page{padding-top:16px;}
body.is-desktop .suivi-fuelbar{border:1px solid var(--border);border-radius:12px;margin:0 var(--px) 6px;}
body.is-desktop .suivi-graphs{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-items:start;}
/* Classements : filtres à gauche, résultats à droite */
.cls-desktop{display:contents;}
body.is-desktop .cls-desktop{display:grid;grid-template-columns:296px 1fr;gap:24px;align-items:start;padding:20px var(--px) 26px;}
.cls-filters{display:flex;flex-direction:column;gap:18px;background:white;border:2px solid var(--border);
  border-radius:14px;padding:18px;box-shadow:var(--shadow-card);position:sticky;top:14px;}
.cls-flabel{font-size:10px;font-weight:700;color:var(--n400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px;}
.cls-ens-chips{display:flex;flex-wrap:wrap;gap:6px;}
.cls-results{background:white;border:2px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);min-width:0;}
.cls-results .sec-hd{position:sticky;top:0;z-index:2;}
.cls-results>div:last-child{border-bottom:none!important;}

@keyframes croco-bounce{0%,100%{transform:rotate(-6deg) scale(0.96);}50%{transform:rotate(6deg) scale(1.04);}}
@keyframes croco-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.85);}}
@keyframes dot-blink{0%,80%,100%{opacity:0.15;}40%{opacity:1;}}
.leaflet-popup-content-wrapper{border-radius:14px!important;padding:0!important;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)!important;}
.leaflet-popup-content{margin:13px 15px!important;width:auto!important;}
.leaflet-popup-tip-container{display:none;}
.leaflet-marker-icon{background:none!important;border:none!important;}

/* ══ CADRE — plein écran (plus de simulation iPhone : ni contours, ni barre d'état/encoche/home) ══ */
#page-stage{position:fixed;inset:0;background:var(--bg);}
#phone-wrapper{position:relative;width:100%;height:100%;}
#phone-screen{position:relative;width:100%;height:100%;overflow:hidden;}
/* App plein écran dans les deux modes ; la bottom-nav (dernier enfant flex) reste collée en bas du viewport. */
body.is-mobile .app,
body.is-desktop .app{max-width:100%!important;height:100dvh!important;margin:0!important;padding-top:0!important;}
body.is-mobile .toast-wrap{top:calc(var(--hdr) + 8px)!important;}

/* ── MA VOITURE ── */
.v-wrap{padding:12px var(--px) 48px;}
.vstat-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px;}
.vstat{background:white;border:2px solid var(--border);border-radius:14px;padding:12px 13px;box-shadow:var(--shadow-sm);min-width:0;}
.vstat .lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--n400);}
.vstat .val{font-size:25px;font-weight:800;color:var(--teal-800);font-variant-numeric:tabular-nums;line-height:1.05;margin-top:3px;}
.vstat .sub{font-size:10px;color:var(--n600);margin-top:3px;line-height:1.3;}
.vcard{background:white;border:2px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:12px;}
.vcard-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-bottom:1px solid var(--divider);background:var(--n50);}
.vcard-hd h3{margin:0;font-size:13px;font-weight:800;color:var(--n900);}
.cat-dot{width:9px;height:9px;border-radius:9999px;flex-shrink:0;}
.freq-badge{display:inline-block;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:1px 6px;border-radius:9999px;margin-top:3px;}
.st-pill{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;padding:2px 7px;border-radius:9999px;white-space:nowrap;margin-top:3px;}
.add-line{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px 13px;border:none;background:var(--n50);cursor:pointer;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--teal);}
.add-line:active{background:var(--teal-lite);}
.vform{background:var(--teal-lite);border-top:1.5px solid var(--teal-100);padding:13px;}
.vform label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--n600);display:block;margin-bottom:4px;}
.vform .fld{width:100%;height:38px;border:2px solid var(--border);border-radius:10px;padding:0 11px;font-family:var(--font);font-size:13px;background:white;color:var(--n900);box-sizing:border-box;outline:none;}
.vform .fld:focus{border-color:var(--teal);}
.chart-box{position:relative;height:240px;width:100%;}
.v-wrap .dt th{background:white;}
.seg-lg{border:2.5px solid oklch(0.62 0.05 183);}
.seg-lg button{height:36px;padding:0 22px;font-size:13px;}
.seg-sm button{height:30px;padding:0 16px;font-size:12px;}
.bnav-avatar{width:22px;height:22px;border-radius:9999px;background:var(--yellow);color:var(--teal-800);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
.bnav-item.active .bnav-avatar{box-shadow:0 0 0 2px var(--teal);}
.vlbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--n600);display:block;margin-bottom:5px;}
.fld2{width:100%;height:44px;border:2px solid var(--border);border-radius:11px;padding:0 13px;font-family:var(--font);font-size:14px;background:white;color:var(--n900);box-sizing:border-box;outline:none;}
.fld2:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-lite);}
.syn-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--n400);}
.syn-val{font-size:25px;font-weight:800;color:var(--teal-800);font-variant-numeric:tabular-nums;line-height:1.05;margin-top:3px;}
.syn-sub{font-size:10px;color:var(--n600);margin-top:3px;}
.v-sechd{display:flex;align-items:baseline;justify-content:space-between;padding:16px 3px 8px;}
.v-sechd .t{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--n600);}
.v-sechd .r{font-size:11px;color:var(--n400);}
.scan-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;padding:16px;border:1.5px dashed var(--teal);border-radius:12px;background:var(--teal-lite);color:var(--teal-800);font-size:13px;font-weight:700;cursor:pointer;text-align:center;margin-bottom:12px;}
.scan-zone small{font-weight:500;color:var(--n600);font-size:10.5px;}
.scan-zone.scanning{cursor:default;}
.scan-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;border:2px solid var(--border);flex-shrink:0;}
.spinner{width:26px;height:26px;border:3px solid var(--teal-100);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.vplus{width:40px;height:40px;border-radius:12px;border:2.5px solid var(--yellow-dk);background:var(--yellow);color:var(--teal-800);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm);transition:transform 100ms;}
.vplus svg{width:22px;height:22px;}
.vplus:active{transform:scale(.9);}
.vplus.on{background:var(--teal);border-color:var(--teal-800);color:white;}
.add-menu{display:flex;gap:9px;margin-bottom:14px;}
.add-menu button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:46px;border-radius:13px;border:1.5px solid var(--teal);background:var(--teal-lite);color:var(--teal-800);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;}
.add-menu button:active{background:var(--teal-100);}

/* ── Placeholder LOT B (pages non encore reconstruites) ── */
.lotb-ph{padding:40px 26px;text-align:center;color:var(--n600);display:flex;flex-direction:column;align-items:center;gap:14px;}
.lotb-ph .ic{width:60px;height:60px;border-radius:9999px;background:var(--teal-lite);color:var(--teal);display:flex;align-items:center;justify-content:center;}
.lotb-ph h2{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--teal-800);text-transform:uppercase;letter-spacing:.04em;margin:0;}
.lotb-ph p{font-size:13px;line-height:1.5;max-width:300px;margin:0;}
.lotb-ph .tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow-text);background:var(--yellow-bg);border:1px solid var(--yellow-bdr);padding:4px 12px;border-radius:9999px;}

/* ════ Lisibilité globale (docx 2026-06-30) ════
   Fond BLANC sous tous les tableaux et leurs lignes : le fond texturé de la page nuisait
   à la lecture. Les en-têtes/lignes teintés gardent leur couleur (styles inline prioritaires). */
table{background:#fff;}
table td,table th{background-color:transparent;}
.dk-table,.dt,.cls-results,.dk-table .st-row,.settings-row,.st-row{background:#fff;}
table tbody tr{background:#fff;}

/* Suppression des flèches (spinners) de TOUS les champs numériques. */
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}