:root{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#081018;
  color:#f7fafc;
  --panel:#101a24;
  --panel2:#142230;
  --line:#263746;
  --muted:#91a1af;
  --blue:#2d7ff9;
  --blue2:#1667d9;
  --green:#31d17c;
  --danger:#d85252;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#071018 0%,#0a131d 100%);min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{max-width:780px;margin:0 auto;padding:18px 14px 30px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 14px}
.eyebrow{font-size:11px;letter-spacing:.1em;font-weight:800;color:#7f94a5}
h1{font-size:30px;margin:3px 0 0}
h2{margin:3px 0 0;font-size:22px}
.version{background:#13283b;border:1px solid #27425a;color:#dcecff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.hero-card,.panel,.action-card,.drive-actions-card,.map-card{
  background:linear-gradient(145deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  margin-bottom:14px
}
.section-title{font-size:16px;font-weight:800;margin-bottom:12px}
.route-box{background:#0a141d;border:1px solid #233646;border-radius:18px;padding:4px 12px;position:relative}
.input-row{display:flex;gap:10px;align-items:center;padding:10px 0}
.input-row:first-of-type{border-bottom:1px solid #20313f}
.icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--green);font-size:10px}
.icon.destination{color:#ff6572}
.input-wrap{display:block;flex:1;min-width:0}
.input-wrap small,.choice-label{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
.input-wrap input{width:100%;border:0;background:transparent;color:#fff;font-size:18px;font-weight:700;padding:2px 0;outline:none}
.swap-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #33495c;background:#132431;color:#dcecff}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.choice-card{background:#0b1620;border:1px solid #243746;border-radius:16px;padding:12px}
.choice-card select,.choice-card input{
  width:100%;border:0;background:transparent;color:#fff;font-size:16px;font-weight:750;outline:none;padding:2px 0
}
.choice-card select option{color:#111}
.unit-input{display:flex;align-items:center;gap:6px}
.unit-input span{color:var(--muted);font-size:13px}
.start-btn,.primary-btn,.fuel-btn{
  width:100%;border:0;border-radius:15px;background:linear-gradient(180deg,var(--blue),var(--blue2));
  color:#fff;padding:15px 16px;font-weight:850;font-size:16px;margin-top:14px
}
.link-btn{width:100%;border:0;background:transparent;color:#9fc5ff;padding:12px 0 2px;font-weight:700}
.status{color:var(--muted);font-size:13px;min-height:18px;margin:8px 2px 0}
.hidden{display:none!important}
.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.close-btn,.secondary-btn,.danger-btn{
  border:1px solid #304557;background:#0c1822;color:#eaf3fb;border-radius:12px;padding:11px 14px;font-weight:750
}
.danger-btn{color:#ffaaaa;border-color:#5a3030;background:#231619}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid label{color:var(--muted);font-size:12px}
.form-grid input,.form-grid select{
  width:100%;margin-top:5px;background:#0b1620;color:#fff;border:1px solid #263a4a;border-radius:12px;padding:12px
}
.form-grid select option{color:#111}
.check-line{display:flex;gap:8px;align-items:center;color:#d6e1e9;margin:12px 0}
.garage-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.summary-strip div{background:#0e1a25;border:1px solid #243646;border-radius:14px;padding:12px}
.summary-strip span{display:block;color:var(--muted);font-size:11px}
.summary-strip strong{font-size:18px}
.map-card{padding:7px}
#map{height:420px;border-radius:16px;background:#d8e0e6}
.action-card p{color:var(--muted);margin:6px 0}
.fuel-btn{background:linear-gradient(180deg,#19a963,#12834c);margin-top:8px}
.nearby-result{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 0;border-top:1px solid #263746}
.nearby-price{color:var(--green);font-weight:850;text-align:right}
.nearby-result small{display:block;color:var(--muted);margin-top:3px}
.station-select-btn{border:0;background:#193855;color:#fff;border-radius:10px;padding:9px 11px;margin-top:8px;font-weight:750}
.gps-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.drive-card{background:#08131d;border:1px solid #2b4154;border-radius:22px;padding:18px;margin-bottom:14px}
.drive-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.drive-top span{color:var(--green);font-size:11px;font-weight:850;letter-spacing:.08em}
.drive-top strong{display:block;font-size:27px;margin-top:5px}
.drive-top>b{font-size:34px;white-space:nowrap}
.drive-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.drive-stats div{background:#10202c;border:1px solid #294053;border-radius:14px;padding:12px}
.drive-stats span{display:block;color:var(--muted);font-size:11px}
.drive-stats strong{font-size:18px}
.station-eta{background:#0b1620;border-radius:14px;padding:12px;margin:12px 0;color:var(--muted)}
.station-eta strong{float:right;color:#fff}
footer{text-align:center;color:#657887;font-size:11px;padding:10px}
@media(max-width:560px){
  .app-shell{padding:12px 10px 24px}
  h1{font-size:27px}
  .choice-grid,.form-grid{grid-template-columns:1fr}
  .choice-grid.compact{grid-template-columns:1fr 1fr}
  .garage-actions{grid-template-columns:1fr}
  .summary-strip{grid-template-columns:1fr 1fr}
  #map{height:360px}
  .drive-top{flex-direction:column}
  .drive-top>b{font-size:28px}
}

.fuel-field select{
  appearance:auto!important;
  -webkit-appearance:menulist!important;
  background:#ffffff!important;
  color:#111827!important;
  border:2px solid #5b7a93!important;
  min-height:48px!important;
  font-size:16px!important;
  font-weight:700!important;
  padding:10px 12px!important;
  cursor:pointer!important;
}
.fuel-field select option{
  background:#ffffff!important;
  color:#111827!important;
}

.manufacturer-search{
  margin-top:14px;
  padding:14px;
  background:#0a151f;
  border:1px solid #294154;
  border-radius:16px;
}
.manufacturer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.manufacturer-head strong{display:block;color:#fff;font-size:15px}
.manufacturer-head small{display:block;color:var(--muted);margin-top:3px}
.lookup-btn{
  border:0;
  background:#193d62;
  color:#fff;
  border-radius:11px;
  padding:10px 13px;
  font-weight:800;
  white-space:nowrap;
}
.lookup-btn:disabled{opacity:.55;cursor:not-allowed}
.manufacturer-results{margin-top:10px}
.vehicle-spec-result{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:11px 0;
  border-top:1px solid #243847;
}
.vehicle-spec-result:first-child{border-top:0}
.vehicle-spec-result strong{display:block;color:#fff}
.vehicle-spec-result small{display:block;color:var(--muted);margin-top:2px}
.vehicle-spec-consumption{
  text-align:right;
  color:var(--green);
  font-weight:900;
  font-size:18px;
}
.vehicle-spec-consumption small{
  color:var(--muted);
  font-size:11px;
  font-weight:500;
}
.use-spec-btn{
  margin-top:7px;
  border:1px solid #315272;
  background:#132c43;
  color:#fff;
  border-radius:9px;
  padding:7px 9px;
  font-weight:750;
}
@media(max-width:560px){
  .manufacturer-head{align-items:flex-start;flex-direction:column}
  .lookup-btn{width:100%}
  .vehicle-spec-result{grid-template-columns:1fr}
  .vehicle-spec-consumption{text-align:left}
}

.route-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px
}
.route-option{
  display:flex;
  align-items:center;
  gap:10px;
  background:#0b1620;
  border:1px solid #243746;
  border-radius:15px;
  padding:12px;
  cursor:pointer
}
.route-option input{
  width:20px;
  height:20px;
  accent-color:var(--blue);
  flex:0 0 auto
}
.route-option strong{
  display:block;
  color:#fff;
  font-size:14px
}
.route-option small{
  display:block;
  color:var(--muted);
  margin-top:2px
}
@media(max-width:560px){
  .route-options{grid-template-columns:1fr}
}

.routing-engine-note{
  margin-top:8px;
  color:#7890a3;
  font-size:11px;
  line-height:1.35
}

.cost-card,.compare-card{
  background:linear-gradient(145deg,#12202c,#0d1822);
  border:1px solid #2a3d4d;border-radius:18px;padding:14px;margin-bottom:12px
}
.cost-card>div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;color:var(--muted)}
.cost-card strong{color:#fff}
.cost-card .total{border-top:1px solid #2a3d4d;margin-top:5px;padding-top:12px;font-size:18px}
.cost-card .total strong{color:var(--green);font-size:22px}
.cost-card small{display:block;color:#718798;margin-top:5px}
.compare-card{border-color:#315b47}
.compare-card>div{display:flex;justify-content:space-between;gap:12px}
.compare-card span{color:var(--green);font-size:11px;font-weight:850;letter-spacing:.06em}
.compare-card strong{font-size:21px}
.compare-card p{color:var(--muted);margin:8px 0 0}

.route-type-title{
  margin-top:14px;
  margin-bottom:8px;
  color:#dce8f1;
  font-size:13px;
  font-weight:850
}
.route-type-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.route-type-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:66px;
  padding:11px;
  border:1px solid #284052;
  border-radius:15px;
  background:#0b1620;
  cursor:pointer
}
.route-type-card input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.route-type-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  background:#152b3d;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#b9d7f4
}
.route-type-card strong{
  display:block;
  color:#fff;
  font-size:14px
}
.route-type-card small{
  display:block;
  color:var(--muted);
  margin-top:2px;
  font-size:11px
}
.route-type-card:has(input:checked){
  border-color:#388ef8;
  background:#102a42;
  box-shadow:inset 0 0 0 1px rgba(56,142,248,.28)
}
.route-type-card:has(input:checked) .route-type-icon{
  background:var(--blue);
  color:white
}
.route-mode-line strong{color:#9fc5ff!important}
@media(max-width:560px){
  .route-type-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:390px){
  .route-type-grid{grid-template-columns:1fr}
}


/* ===== V19 : comparatif des 4 trajets ===== */
.route-type-card{
  align-items:flex-start;
  min-height:94px
}
.route-type-copy{
  min-width:0;
  flex:1
}
.route-metrics{
  display:block;
  margin-top:8px;
  color:#9fb3c3;
  font-size:12px;
  font-style:normal;
  font-weight:750;
  line-height:1.35
}
.route-type-card:has(input:checked) .route-metrics{
  color:#d9edff
}
.start-navigation-btn{
  background:linear-gradient(180deg,#1caf68,#11874f);
  margin-top:9px
}

/* ===== V19 : navigation plein écran ===== */
.drive-only-close{display:none}
.station-search-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}

body.navigation-active{
  overflow:hidden;
  overscroll-behavior:none
}
body.navigation-active .app-shell{
  width:100vw;
  max-width:none;
  height:100dvh;
  margin:0;
  padding:0
}
body.navigation-active .topbar,
body.navigation-active .hero-card,
body.navigation-active #garagePanel,
body.navigation-active footer{
  display:none!important
}
body.navigation-active #tripPanel{
  display:block!important;
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  z-index:1000;
  margin:0;
  padding:0;
  background:#071018;
  overflow:hidden
}
body.navigation-active #tripPanel>.summary-strip,
body.navigation-active #tripPanel>.cost-card,
body.navigation-active #tripPanel>.compare-card,
body.navigation-active #tripPanel>.drive-actions-card,
body.navigation-active #tripPanel>#navCard{
  display:none!important
}
body.navigation-active .map-card{
  display:block!important;
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#d8e0e6
}
body.navigation-active #map{
  width:100vw;
  height:100dvh!important;
  border-radius:0
}
body.navigation-active #driveCard{
  display:block!important;
  position:absolute;
  inset:0;
  z-index:1100;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:none
}
body.navigation-active .drive-top{
  position:absolute;
  top:max(10px,env(safe-area-inset-top));
  left:12px;
  right:12px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(99,130,155,.55);
  border-radius:18px;
  background:rgba(6,18,28,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  pointer-events:auto
}
body.navigation-active .drive-top>div{flex:1;min-width:0}
body.navigation-active .drive-top strong{
  font-size:clamp(18px,4.8vw,29px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
body.navigation-active .drive-top>b{
  font-size:clamp(25px,7vw,40px)
}
.drive-bottom-hud{
  display:none
}
body.navigation-active .drive-bottom-hud{
  position:absolute;
  left:10px;
  right:10px;
  bottom:max(10px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:minmax(150px,1.6fr) repeat(4,minmax(80px,1fr)) minmax(105px,.9fr) minmax(82px,.7fr) 52px;
  gap:7px;
  padding:9px;
  border:1px solid rgba(84,112,134,.65);
  border-radius:20px;
  background:rgba(5,16,25,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 35px rgba(0,0,0,.45);
  pointer-events:auto
}
.drive-fuel-btn{
  min-height:58px;
  border:0;
  border-radius:14px;
  padding:8px 12px;
  background:linear-gradient(180deg,#20ad68,#12834f);
  color:#fff;
  font-weight:900;
  font-size:15px
}
.drive-live-stat{
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px;
  border-radius:13px;
  background:#102330;
  border:1px solid #284153;
  text-align:center
}
.drive-live-stat span{
  color:#8fa4b4;
  font-size:10px
}
.drive-live-stat strong{
  color:#fff;
  font-size:18px;
  margin-top:3px;
  white-space:nowrap
}
.drive-icon-btn{
  min-height:58px;
  border:1px solid #314a5d;
  border-radius:14px;
  background:#102330;
  color:#fff;
  font-size:24px;
  font-weight:800
}
.drive-icon-btn.exit{
  background:#2b171a;
  border-color:#63343a;
  color:#ffb4ba
}

/* Station finder becomes a sheet over the navigation map */
body.navigation-active #stationSearchCard{
  display:none!important
}
body.navigation-active.drive-station-open #stationSearchCard{
  display:block!important;
  position:absolute;
  z-index:1300;
  left:10px;
  right:10px;
  bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px));
  max-height:62dvh;
  overflow:auto;
  margin:0;
  border-radius:20px;
  background:rgba(9,24,35,.98);
  box-shadow:0 18px 50px rgba(0,0,0,.55)
}
body.navigation-active.drive-station-open .drive-only-close{
  display:block
}
body.navigation-active #stationNavCard:not(.hidden){
  display:block!important;
  position:absolute;
  z-index:1350;
  left:10px;
  right:10px;
  bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px));
  margin:0;
  border-radius:20px;
  background:rgba(9,24,35,.98);
  box-shadow:0 18px 50px rgba(0,0,0,.55)
}

/* Landscape phone = panorama */
@media (orientation:landscape) and (max-height:650px){
  body.navigation-active .drive-top{
    top:8px;
    left:8px;
    right:8px;
    padding:9px 12px
  }
  body.navigation-active .drive-top strong{font-size:20px}
  body.navigation-active .drive-top>b{font-size:28px}
  body.navigation-active .drive-bottom-hud{
    left:8px;
    right:8px;
    bottom:8px;
    padding:6px;
    grid-template-columns:minmax(160px,1.5fr) repeat(4,minmax(72px,1fr)) minmax(100px,.9fr) minmax(76px,.7fr) 46px
  }
  .drive-fuel-btn,.drive-live-stat,.drive-icon-btn{min-height:48px}
  .drive-live-stat strong{font-size:16px}
}

@media(max-width:720px){
  body.navigation-active .drive-bottom-hud{
    grid-template-columns:1.45fr 1fr 1fr minmax(94px,.8fr) minmax(70px,.65fr) 46px
  }
  body.navigation-active .drive-bottom-hud .optional-stat{
    display:none
  }
}

@media(max-width:430px){
  body.navigation-active .drive-bottom-hud{
    grid-template-columns:1.2fr .85fr .85fr minmax(88px,.72fr) minmax(62px,.58fr) 42px;
  }
  body.navigation-active .drive-icon-btn.exit{
    min-width:42px
  }
  .drive-fuel-btn{font-size:13px}
  .drive-live-stat strong{font-size:16px}
}


/* ===== V19.1 : recentrage toujours visible ===== */
.drive-recenter-btn{
  min-height:58px;
  border:1px solid #31506a;
  border-radius:14px;
  background:#12324b;
  color:#fff;
  padding:7px 10px;
  font-size:13px;
  font-weight:900;
  white-space:nowrap
}
.drive-recenter-btn.following{
  background:#1766a5;
  border-color:#3a8ed0
}
.station-select-btn:disabled{
  opacity:.6;
  cursor:wait
}
body.navigation-active .station-route-loading{
  color:#9ed3ff!important;
  font-weight:800
}
@media(max-width:430px){
  .drive-recenter-btn{
    min-height:54px;
    font-size:11px;
    padding:5px 7px
  }
}

.resume-nav-btn{
  width:100%;
  margin-top:10px;
  background:linear-gradient(180deg,#2479c8,#175c9a);
  font-size:16px;
  font-weight:900;
}

.drive-voice-btn{
  min-height:58px;
  border:1px solid #31506a;
  border-radius:14px;
  background:#102330;
  color:#d7e6f2;
  padding:7px 9px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap
}
.drive-voice-btn.active{
  background:#164e38;
  border-color:#2f8b63;
  color:#dffbed
}
.drive-voice-btn.muted{
  background:#2b2021;
  border-color:#634046;
  color:#f3c2c6
}
@media(max-width:430px){
  .drive-voice-btn{
    min-height:54px;
    padding:5px 6px;
    font-size:10px
  }
}


/* ===== V20.3 : corrections affichage smartphone ===== */

/* La recherche carburant reste une petite fenêtre et son contenu défile. */
body.navigation-active.drive-station-open #stationSearchCard{
  left:50%;
  right:auto;
  width:min(calc(100vw - 20px),560px);
  transform:translateX(-50%);
  max-height:min(52dvh,430px);
  padding:12px;
  overflow:auto;
  overscroll-behavior:contain;
}

/* La fiche "ARRÊT CARBURANT" ne masque plus la carte en conduite.
   La reprise se fait depuis la barre du bas. */
body.navigation-active #stationNavCard:not(.hidden){
  display:none!important;
}

.drive-resume-btn{
  min-height:58px;
  border:0;
  border-radius:14px;
  padding:8px 12px;
  background:linear-gradient(180deg,#2d7ff9,#1667d9);
  color:#fff;
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
}
body.navigation-active.fuel-detour-active .drive-fuel-btn{
  display:none;
}

/* Portrait : 2 rangées lisibles au lieu de forcer tous les boutons sur une ligne. */
@media (orientation:portrait) and (max-width:720px){
  body.navigation-active .drive-bottom-hud{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-areas:
      "fuel fuel recenter exit"
      "speed time voice voice";
    gap:6px;
    padding:7px;
    left:7px;
    right:7px;
    bottom:max(7px,env(safe-area-inset-bottom));
  }

  body.navigation-active .drive-fuel-btn{grid-area:fuel}
  body.navigation-active .drive-speed-stat{grid-area:speed}
  body.navigation-active .drive-time-stat{grid-area:time}
  body.navigation-active .drive-recenter-btn{grid-area:recenter}
  body.navigation-active .drive-voice-btn{grid-area:voice}
  body.navigation-active .drive-icon-btn.exit{grid-area:exit}

  body.navigation-active .drive-fuel-btn,
  body.navigation-active .drive-resume-btn,
  body.navigation-active .drive-live-stat,
  body.navigation-active .drive-recenter-btn,
  body.navigation-active .drive-voice-btn,
  body.navigation-active .drive-icon-btn{
    min-height:48px;
  }

  body.navigation-active .drive-live-stat{
    padding:4px 3px;
  }
  body.navigation-active .drive-live-stat span{
    font-size:9px;
  }
  body.navigation-active .drive-live-stat strong{
    font-size:15px;
  }
  body.navigation-active .drive-fuel-btn,
  body.navigation-active .drive-resume-btn{
    font-size:12px;
    padding:6px 7px;
  }
  body.navigation-active .drive-recenter-btn{
    font-size:10px;
    padding:5px 4px;
    white-space:normal;
  }
  body.navigation-active .drive-voice-btn{
    font-size:10px;
  }

  body.navigation-active.fuel-detour-active .drive-bottom-hud{
    grid-template-areas:
      "resume resume resume exit"
      "speed time recenter voice";
  }
  body.navigation-active.fuel-detour-active .drive-resume-btn{
    display:block!important;
    grid-area:resume;
  }

  body.navigation-active.drive-station-open #stationSearchCard{
    width:calc(100vw - 14px);
    max-height:44dvh;
    bottom:max(118px,calc(env(safe-area-inset-bottom) + 118px));
    border-radius:16px;
    padding:10px;
  }
  body.navigation-active.drive-station-open #stationSearchCard h2{
    font-size:18px;
  }
  body.navigation-active.drive-station-open #stationSearchCard p{
    font-size:12px;
  }
  body.navigation-active.drive-station-open .nearby-result{
    padding:8px 0;
  }
}

/* Paysage téléphone : la fenêtre carburant ne prend plus tout l'écran. */
@media (orientation:landscape) and (max-height:650px){
  body.navigation-active.drive-station-open #stationSearchCard{
    left:8px;
    right:auto;
    transform:none;
    width:min(54vw,520px);
    max-height:56dvh;
    bottom:66px;
    border-radius:16px;
    padding:9px 11px;
  }
  body.navigation-active.drive-station-open #stationSearchCard h2{
    font-size:17px;
  }
  body.navigation-active.drive-station-open #stationSearchCard p{
    font-size:11px;
    margin:3px 0;
  }
  body.navigation-active.drive-station-open #stationSearchCard .fuel-btn{
    padding:9px 10px;
    margin-top:5px;
  }
  body.navigation-active.drive-station-open .nearby-result{
    padding:6px 0;
  }

  body.navigation-active .drive-resume-btn{
    min-height:48px;
    font-size:12px;
  }
}


/* TRAJETS ECO FAVORIS WEB */
.trajets-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.favorites-open-btn{
  background:#176fb8;
}

.favorites-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.favorites-overlay.hidden{
  display:none !important;
}

.favorites-modal{
  width:min(620px,96vw);
  max-height:90vh;
  overflow:auto;
  background:#050f17;
  color:#eef6fc;
  border:1px solid #235374;
  border-radius:22px;
  padding:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.favorites-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.favorites-head h2{
  margin:0 0 4px;
  font-size:25px;
}

.favorites-head small,
.favorites-help,
.favorites-empty{
  color:#a2b6c4;
}

.favorites-x{
  width:42px;
  height:42px;
  border:1px solid #235374;
  border-radius:12px;
  background:#0b1c28;
  color:white;
  font-size:18px;
}

.favorites-card{
  background:#0b1c28;
  border:1px solid #235374;
  border-radius:16px;
  padding:14px;
  margin:12px 0;
}

.favorites-card h3{
  margin:0 0 8px;
}

.favorites-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.favorites-grid button,
.favorites-primary,
.favorites-close-bottom{
  min-height:44px;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  background:#176fb8;
  color:white;
  font-weight:700;
}

.favorites-danger,
.favorite-route-delete{
  background:#913137 !important;
  color:white !important;
}

.favorite-route-card{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  background:#103148;
  border:1px solid #235374;
  border-radius:14px;
  padding:12px;
  margin-top:10px;
  cursor:pointer;
}

.favorite-route-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.favorite-route-main strong{
  font-size:15px;
}

.favorite-route-main small{
  color:#a2b6c4;
  line-height:1.35;
}

.favorite-route-delete{
  border:0;
  border-radius:10px;
  padding:9px;
  flex:0 0 auto;
}

.favorites-close-bottom{
  width:100%;
  background:#0b1c28;
  border:1px solid #235374;
  margin-top:6px;
}

@media(max-width:560px){
  .trajets-actions,
  .favorites-grid{
    grid-template-columns:1fr;
  }

  .favorite-route-card{
    align-items:stretch;
    flex-direction:column;
  }

  .favorite-route-delete{
    width:100%;
  }
}


/* TRAJETS ECO AUTOCOMPLETE WEB */
.address-suggestions{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:12000;
  background:#071722;
  border:1px solid #235374;
  border-radius:12px;
  margin-top:4px;
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}

.address-suggestions.hidden{
  display:none !important;
}

.address-suggestion-item{
  width:100%;
  border:0;
  border-bottom:1px solid #18394d;
  background:#071722;
  color:#eef6fc;
  text-align:left;
  padding:12px 14px;
  cursor:pointer;
  font-size:14px;
}

.address-suggestion-item:last-child{
  border-bottom:0;
}

.address-suggestion-item:hover,
.address-suggestion-item:focus{
  background:#103148;
}

/* ==========================================================
   TRAJETS ECO - FAVORIS STYLE V60
   ========================================================== */

#favoritesModal .favorites-content{
  background:#071923;
  color:#eef6fc;
  border-radius:20px;
}

#favoritesModal .favorites-header{
  padding-bottom:10px;
  border-bottom:0;
}

#favoritesModal .favorites-header h2{
  font-size:25px;
  font-weight:800;
  margin:0;
}

#favoritesModal .favorites-header::after{
  content:"Domicile et trajets enregistrés";
  display:block;
  margin-top:3px;
  color:#8fa6b8;
  font-size:13px;
}

#favoritesModal .favorites-card{
  background:#0b1c28;
  border:1px solid #245273;
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
}

#favoritesModal .favorites-card h3{
  margin:0 0 9px;
  font-size:19px;
  color:#f2f7fb;
}

#favoriteHomeLabel{
  color:#a9c1d2;
  font-size:14px;
  line-height:1.4;
  margin:4px 0 11px;
}

#favoritesModal .favorites-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#favoritesModal .favorites-home-edit,
#favoritesModal .favorites-home-destination,
#saveFavoriteRoute{
  width:100%;
  min-height:44px;
  border-radius:13px;
  font-weight:700;
}

#favoritesModal .favorites-home-destination,
#saveFavoriteRoute{
  background:#123149;
  border:1px solid #2d75a8;
  color:#39a5ff;
}

#favoritesModal .favorites-home-edit{
  background:#102634;
  border:1px solid #245273;
  color:#d5e7f3;
}

#favoriteRoutesList > *{
  border-radius:13px !important;
}

#favoritesModal .favorites-danger{
  border-radius:12px;
}

@media (max-width:700px){
  #favoritesModal .favorites-content{
    width:94vw;
    max-height:88vh;
  }
}