:root {
  --ink: #17231f;
  --ink-soft: #53625c;
  --muted: #76837e;
  --paper: #f6f8f3;
  --paper-deep: #edf2eb;
  --surface: rgba(255, 255, 255, .92);
  --surface-solid: #ffffff;
  --line: #dfe7df;
  --line-strong: #ccd8cf;
  --green: #167453;
  --green-2: #20a271;
  --green-soft: #e0f3ea;
  --green-pale: #f0faf5;
  --blue: #225a8f;
  --blue-soft: #e9f2fb;
  --orange: #d87b31;
  --red: #bd4a4a;
  --shadow-sm: 0 8px 24px rgba(38, 58, 47, .07);
  --shadow-md: 0 22px 62px rgba(38, 58, 47, .12);
  --shadow-lg: 0 32px 90px rgba(32, 67, 51, .18);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 4%, rgba(98, 191, 146, .15), transparent 26rem),
    radial-gradient(circle at 94% 20%, rgba(89, 143, 194, .10), transparent 29rem),
    linear-gradient(180deg, #fbfcf8 0%, var(--paper) 48%, #f0f4ee 100%);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
svg { display: block; }
.hidden { display: none !important; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.page-noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .025; z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.topbar {
  height: 86px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative; z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 15px; background: var(--green); color: white;
  box-shadow: 0 12px 28px rgba(22, 116, 83, .23);
}
.brand-mark svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; }
.brand-word { font-family: var(--font-display); font-size: 1.22rem; letter-spacing: -.035em; }
.brand-word strong { font-weight: 800; }
.brand-word em { font-style: normal; font-weight: 700; color: var(--green); margin-left: 3px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.data-pill, .icon-button, .ghost-button, .danger-button, .primary-button, .coverage-link {
  border: 0; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.data-pill:hover, .icon-button:hover, .ghost-button:hover, .coverage-link:hover { transform: translateY(-1px); }
.data-pill {
  display: inline-flex; align-items: center; gap: 9px; min-height: 42px;
  padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.72);
  border: 1px solid var(--line); color: var(--ink-soft); font-size: .82rem; font-weight: 700;
  box-shadow: var(--shadow-sm); backdrop-filter: blur(18px);
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #d7a544; box-shadow: 0 0 0 5px rgba(215,165,68,.13); }
.status-dot.good { background: var(--green-2); box-shadow: 0 0 0 5px rgba(32,162,113,.12); }
.status-dot.bad { background: var(--red); box-shadow: 0 0 0 5px rgba(189,74,74,.12); }
.icon-button {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.72); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hero {
  min-height: 500px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 80px;
  padding-top: 58px; padding-bottom: 92px; position: relative;
}
.hero-copy-block { position: relative; z-index: 2; }
.eyebrow, .section-kicker {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; color: var(--green);
}
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 6px rgba(32,162,113,.12); }
.hero h1 {
  margin: 0; max-width: 720px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.1rem, 6.4vw, 5.9rem); line-height: .98; letter-spacing: -.065em;
}
.hero h1 span { color: var(--green); }
.hero-copy { margin: 28px 0 0; max-width: 650px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.68; }
.trust-row { display: flex; flex-wrap: wrap; gap: 11px 20px; margin-top: 30px; color: var(--ink-soft); font-size: .88rem; font-weight: 650; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.hero-visual { position: relative; height: 360px; display: grid; place-items: center; }
.visual-orbit { position: absolute; border: 1px dashed rgba(22,116,83,.22); border-radius: 50%; }
.visual-orbit.one { width: 360px; height: 360px; }
.visual-orbit.two { width: 255px; height: 255px; }
.visual-card {
  position: absolute; background: rgba(255,255,255,.93); border: 1px solid rgba(210,224,214,.9);
  border-radius: 23px; box-shadow: var(--shadow-md); backdrop-filter: blur(18px);
}
.route-demo { width: min(360px, 90%); padding: 24px; transform: rotate(-3deg) translate(-20px, -28px); z-index: 2; }
.visual-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.visual-card-head span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.visual-card-head strong { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.04em; }
.mini-route { display: flex; align-items: center; padding: 36px 3px 10px; }
.mini-route i { width: 12px; height: 12px; border-radius: 50%; border: 3px solid white; background: #a9b7b0; box-shadow: 0 0 0 2px #a9b7b0; flex: 0 0 auto; }
.mini-route i.start { background: var(--green); box-shadow: 0 0 0 2px var(--green); }
.mini-route i.end { background: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.mini-route span { height: 3px; flex: 1; background: linear-gradient(90deg, var(--green), #bfd3c8, var(--blue)); }
.route-demo-foot { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.saving-demo { right: -12px; bottom: 22px; z-index: 3; padding: 18px 20px; display: flex; align-items: center; gap: 15px; transform: rotate(3deg); }
.saving-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 1.4rem; font-weight: 800; }
.saving-demo div { display: grid; }
.saving-demo small { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.saving-demo strong { color: var(--green); font: 800 1.45rem/1.25 var(--font-display); }
.saving-demo span:last-child { color: var(--ink-soft); font-size: .77rem; }

.search-shell { position: relative; z-index: 3; margin-top: -26px; }
.search-card {
  background: var(--surface); border: 1px solid rgba(207,222,211,.92); border-radius: var(--radius-lg);
  padding: clamp(23px, 4vw, 42px); box-shadow: var(--shadow-lg); backdrop-filter: blur(22px);
}
.search-head, .panel-heading, .modal-head, .source-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.search-head { margin-bottom: 28px; }
.search-head h2, .panel-heading h2, .modal-head h2, .source-heading h3 { margin: 7px 0 0; font-family: var(--font-display); letter-spacing: -.035em; }
.search-head h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.ghost-button, .danger-button {
  min-height: 42px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--surface-solid); color: var(--ink-soft); font-weight: 750; box-shadow: 0 5px 16px rgba(40,65,52,.04);
}
.ghost-button:hover { border-color: #b5c9bc; background: var(--green-pale); color: var(--green); }
.ghost-button.small { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; }
.ghost-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.danger-button { color: var(--red); }
.danger-button:hover { background: #fff4f4; border-color: #efc7c7; }

.route-fields { display: grid; grid-template-columns: .72fr 1.3fr 28px 1.3fr; gap: 13px; align-items: end; }
.field { display: grid; gap: 8px; position: relative; }
.field > span, .field-label { color: var(--muted); font-size: .78rem; font-weight: 750; }
.field input, .field select, .unit-input {
  width: 100%; min-height: 55px; border: 1px solid var(--line-strong); border-radius: 15px;
  background: #fbfcfa; color: var(--ink); outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field input, .field select { padding: 0 15px; }
.location-field input { padding-left: 43px; }
.field input:focus, .field select:focus { background: white; border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(32,162,113,.10); }
.input-icon { position: absolute; left: 17px; bottom: 20px; width: 13px; height: 13px; border-radius: 50%; z-index: 2; }
.start-icon { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.end-icon { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.route-link { height: 55px; display: grid; place-items: center; }
.route-link span { width: 100%; height: 1px; background: repeating-linear-gradient(90deg, #b8c8bf 0 4px, transparent 4px 8px); position: relative; }
.route-link span::after { content: ">"; position: absolute; right: -2px; top: -10px; color: #9aaba1; font-size: 15px; }
.vehicle-section { margin-top: 25px; }
.vehicle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.vehicle-choice {
  min-height: 84px; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfa;
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  text-align: left; padding: 12px 13px; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.vehicle-choice:hover { transform: translateY(-2px); border-color: #bed1c5; }
.vehicle-choice.active { background: var(--green-pale); border-color: var(--green-2); box-shadow: 0 8px 24px rgba(22,116,83,.09); }
.vehicle-icon { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 11px; background: white; display: grid; place-items: center; font-size: 1.15rem; }
.vehicle-choice strong { font-size: .84rem; align-self: end; }
.vehicle-choice small { color: var(--muted); font-size: .69rem; align-self: start; }
.search-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.form-note { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.primary-button {
  min-height: 56px; padding: 0 23px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(135deg, var(--green), #0d8a5d); color: white; font-weight: 800; box-shadow: 0 16px 30px rgba(22,116,83,.24);
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 20px 36px rgba(22,116,83,.29); }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.primary-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.primary-button.compact-button { min-height: 45px; border-radius: 13px; padding-inline: 18px; box-shadow: 0 10px 24px rgba(22,116,83,.18); }

.coverage-strip {
  margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 1px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); box-shadow: var(--shadow-sm);
}
.coverage-strip article, .coverage-link { background: rgba(255,255,255,.84); min-height: 84px; padding: 16px 20px; display: flex; align-items: center; gap: 13px; }
.coverage-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font: 800 1rem var(--font-display); }
.coverage-strip article div { display: grid; }
.coverage-strip article strong { font: 800 1.22rem var(--font-display); letter-spacing: -.03em; }
.coverage-strip article small { color: var(--muted); font-size: .7rem; }
.coverage-link { justify-content: center; border: 0; color: var(--green); font-weight: 800; }
.coverage-link span { font-size: 1.2rem; }

.sync-banner {
  margin-top: 18px; min-height: 82px; padding: 16px 20px; border-radius: 18px; background: #f2f8f4; border: 1px solid #cfe3d6;
  display: grid; grid-template-columns: 42px 1fr auto; grid-template-rows: auto 4px; gap: 8px 14px; align-items: center;
}
.sync-icon { width: 38px; height: 38px; border-radius: 13px; background: white; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.sync-icon span { width: 17px; height: 17px; border: 2px solid #b5d2c1; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
.sync-copy { display: grid; gap: 2px; }
.sync-copy strong { font-size: .85rem; }
.sync-copy span { color: var(--muted); font-size: .75rem; }
.sync-progress { grid-column: 2 / 4; height: 4px; overflow: hidden; border-radius: 99px; background: #dce9e0; }
.sync-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), #55bb8f); transition: width .25s ease; }
@keyframes spin { to { transform: rotate(360deg); } }

.results { padding-top: 38px; }
.result-hero-card {
  border-radius: 28px; padding: clamp(24px, 4vw, 40px); color: white;
  background:
    radial-gradient(circle at 85% 18%, rgba(135,230,188,.23), transparent 18rem),
    linear-gradient(135deg, #123d31, #176448 66%, #1b7353);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.result-hero-card::after { content: ""; position: absolute; right: -110px; bottom: -150px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,255,255,.035), 0 0 0 88px rgba(255,255,255,.025); }
.result-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.result-label { display: block; color: #bde3d0; text-transform: uppercase; letter-spacing: .12em; font: 800 .7rem var(--font-display); margin-bottom: 8px; }
.result-title { max-width: 690px; font: 700 clamp(1.4rem, 3vw, 2.25rem)/1.25 var(--font-display); letter-spacing: -.04em; }
.result-price { text-align: right; flex: 0 0 auto; }
.result-price strong { display: block; font: 800 clamp(2.35rem, 5vw, 4rem)/1 var(--font-display); letter-spacing: -.07em; }
.result-price span { color: #c8ded3; font-size: .74rem; }
.result-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 32px; gap: 10px; }
.metric { min-height: 86px; border-radius: 17px; padding: 15px 17px; background: rgba(255,255,255,.095); border: 1px solid rgba(255,255,255,.12); display: grid; align-content: center; gap: 4px; }
.metric.highlight { background: rgba(209,255,231,.16); }
.metric span { color: #c3d8cd; font-size: .72rem; }
.metric strong { font: 800 1.25rem var(--font-display); }
.results-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 20px; margin-top: 20px; }
.options-panel, .route-panel, .method-card {
  background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow-sm);
}
.options-panel, .route-panel { padding: 24px; }
.panel-heading { margin-bottom: 17px; }
.panel-heading.compact { margin-bottom: 12px; }
.panel-heading h2 { font-size: 1.25rem; }
.option-list { display: grid; gap: 10px; }
.route-option {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfa; padding: 15px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 7px 15px; text-align: left; cursor: pointer; transition: .16s ease;
}
.route-option:hover { border-color: #b8cec0; transform: translateY(-1px); }
.route-option.selected { border-color: var(--green-2); background: var(--green-pale); box-shadow: 0 10px 26px rgba(22,116,83,.08); }
.option-name { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-weight: 800; }
.option-check { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #b9c7bf; }
.selected .option-check { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px white; }
.option-badge { padding: 4px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: .61rem; text-transform: uppercase; letter-spacing: .06em; }
.option-badge.soft { background: var(--blue-soft); color: var(--blue); }
.option-badge.direct { background: #edf0ee; color: var(--muted); }
.option-badge.smart { background: #dff5e8; color: #0d6b48; box-shadow: inset 0 0 0 1px rgba(13,107,72,.12); }
.option-badge.fastest { background: #e7f0fb; color: #225a8f; }
.option-badge.cheapest { background: #fff1d9; color: #9b5b00; }
.option-badge.alternative { background: #edf0ee; color: #5c6761; }
.option-badge.split { background: #fbeade; color: #9a4e13; }
.option-price { font: 800 1.15rem var(--font-display); }
.option-details { grid-column: 1; color: var(--muted); font-size: .72rem; display: grid; gap: 3px; }
.option-saving { grid-column: 2; align-self: end; color: var(--green); font-size: .72rem; font-weight: 800; }
.route-visual { padding: 5px 2px 8px; }
.route-step { display: grid; grid-template-columns: 22px 1fr; gap: 12px; min-height: 70px; position: relative; }
.route-step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 23px; bottom: -4px; width: 2px; background: repeating-linear-gradient(180deg, #b9c9c0 0 5px, transparent 5px 9px); }
.step-dot { width: 20px; height: 20px; border-radius: 50%; margin-top: 2px; background: white; border: 5px solid var(--green); box-shadow: 0 0 0 4px var(--green-soft); z-index: 1; }
.route-step.exit .step-dot { border-color: var(--orange); box-shadow: 0 0 0 4px #fbeade; }
.step-copy { display: grid; align-content: start; gap: 4px; }
.step-copy strong { font-size: .86rem; }
.step-copy span { color: var(--muted); font-size: .71rem; line-height: 1.45; }
.navigation-block { border-top: 1px solid var(--line); padding-top: 18px; }
.navigation-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.nav-button { min-height: 43px; border-radius: 12px; border: 1px solid var(--line); background: white; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; font-size: .7rem; font-weight: 800; }
.nav-button:hover { border-color: #b7c9be; }
.nav-button span { font: 800 .88rem var(--font-display); }
.nav-button.google span { color: #4285f4; }.nav-button.waze span { color: #29b6d8; }.nav-button.apple span { color: #222; }
.navigation-note { margin: 10px 0 0; color: var(--muted); font-size: .67rem; line-height: 1.5; }
.method-card { margin-top: 20px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; }
.method-icon { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-weight: 800; }
.method-card strong { font-size: .83rem; }.method-card p { margin: 5px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }

.empty-state { margin-top: 36px; min-height: 250px; display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 44px; padding: 35px 52px; border: 1px dashed #cbd8cf; border-radius: 25px; background: rgba(255,255,255,.45); }
.empty-state h2 { margin: 8px 0 8px; font: 750 clamp(1.35rem, 3vw, 2rem) var(--font-display); letter-spacing: -.04em; }
.empty-state p { margin: 0; max-width: 640px; color: var(--muted); line-height: 1.6; }
.empty-illustration { height: 165px; position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, #e4f3eb, #edf4fa); }
.empty-illustration .road { position: absolute; width: 280px; height: 56px; border: 22px solid white; border-left: 0; border-right: 0; transform: rotate(-28deg); left: -25px; top: 55px; box-shadow: 0 0 0 1px #dfe8e1; }
.empty-illustration .road-b { transform: rotate(29deg); top: 58px; opacity: .55; }
.empty-illustration i { position: absolute; left: 45px; top: 49px; width: 15px; height: 15px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(32,162,113,.14); }
.empty-illustration b { position: absolute; right: 38px; bottom: 28px; width: 48px; height: 48px; border-radius: 17px; background: white; display: grid; place-items: center; color: var(--green); box-shadow: var(--shadow-md); font: 800 1.35rem var(--font-display); }

.footer { padding-block: 70px 45px; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; color: var(--muted); font-size: .72rem; }
.footer-brand { display: grid; gap: 4px; }.footer-brand strong { color: var(--ink); font: 800 1rem var(--font-display); }.footer p { max-width: 650px; margin: 0; text-align: right; line-height: 1.55; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 22px; display: grid; place-items: center; background: rgba(25,39,32,.42); backdrop-filter: blur(12px); }
.modal { width: min(680px, 100%); max-height: calc(100vh - 44px); overflow: auto; background: #fbfcfa; border: 1px solid rgba(255,255,255,.7); border-radius: 25px; padding: clamp(22px, 4vw, 32px); box-shadow: 0 36px 100px rgba(16,37,27,.25); }
.wide-modal { width: min(1080px, 100%); }
.modal-head { margin-bottom: 22px; }
.modal-head h2 { font-size: 1.55rem; }
.close-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; background: white; cursor: pointer; color: var(--muted); font-size: 1.35rem; }
.close-button:hover { color: var(--ink); background: var(--paper); }
.national-reference-card { display: grid; grid-template-columns: 1fr 310px; gap: 25px; align-items: center; padding: 22px; border-radius: 20px; background: linear-gradient(135deg, #edf7f1, #f0f5fb); border: 1px solid #d6e5da; }
.reference-badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: white; color: var(--green); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.reference-copy h3 { margin: 13px 0 7px; font: 750 1.28rem var(--font-display); letter-spacing: -.035em; }
.reference-copy p { margin: 0 0 16px; color: var(--ink-soft); font-size: .8rem; line-height: 1.55; }
.france-map-card { height: 220px; display: grid; place-items: center; }
.france-map-card svg { width: 100%; height: 100%; }
.france-shape { fill: rgba(255,255,255,.72); stroke: #b9d1c2; stroke-width: 3; }
.map-dot { fill: var(--green); opacity: .55; }
.map-dot.interchange { fill: var(--blue); opacity: .25; }
.coverage-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 26px; }
.coverage-stat { min-height: 88px; border: 1px solid var(--line); border-radius: 15px; background: white; padding: 15px; display: grid; align-content: center; gap: 3px; }
.coverage-stat span { color: var(--muted); font-size: .69rem; }.coverage-stat strong { font: 800 1.35rem var(--font-display); letter-spacing: -.04em; }
.source-heading { align-items: end; margin-bottom: 12px; }
.source-heading h3 { font-size: 1.08rem; }
.source-legend { color: var(--muted); font-size: .68rem; max-width: 300px; text-align: right; }
.source-list { display: grid; gap: 8px; }
.source-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, .8fr); gap: 12px; align-items: center; padding: 14px 15px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.source-name { font-size: .8rem; font-weight: 800; }.source-meta { color: var(--muted); font-size: .66rem; line-height: 1.45; }
.source-state { justify-self: start; padding: 5px 8px; border-radius: 999px; background: #eef1ef; color: var(--muted); font-size: .64rem; font-weight: 800; }
.source-state.success { background: var(--green-soft); color: var(--green); }.source-state.error { background: #fae7e7; color: var(--red); }.source-state.warning { background: #fff1dd; color: #9b631f; }.source-state.running { background: var(--blue-soft); color: var(--blue); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.modal-footnote { margin: 16px 0 0; color: var(--muted); font-size: .67rem; line-height: 1.55; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.unit-input { display: grid; grid-template-columns: 1fr auto; align-items: center; padding-right: 14px; }
.unit-input input { min-height: 53px; border: 0; background: transparent; box-shadow: none !important; }
.unit-input em { color: var(--muted); font-size: .75rem; font-style: normal; font-weight: 700; }
.settings-callout { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--blue-soft); color: #42637f; font-size: .72rem; line-height: 1.55; }
.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 120; display: grid; gap: 9px; width: min(390px, calc(100% - 44px)); }
.toast { padding: 14px 16px; border-radius: 14px; background: #193c31; color: white; box-shadow: var(--shadow-lg); font-size: .78rem; line-height: 1.45; animation: toastIn .25s ease; }
.toast.warning { background: #7d5928; }.toast.error { background: #8b3d3d; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 30px; padding-top: 45px; }
  .hero-copy-block { max-width: 800px; }
  .hero-visual { display: none; }
  .route-fields { grid-template-columns: 1fr 1fr; }
  .network-field { grid-column: 1 / -1; }
  .route-link { display: none; }
  .vehicle-grid { grid-template-columns: repeat(3, 1fr); }
  .coverage-strip { grid-template-columns: repeat(3, 1fr); }
  .coverage-link { grid-column: 1 / -1; min-height: 54px; }
  .results-grid { grid-template-columns: 1fr; }
  .national-reference-card { grid-template-columns: 1fr 260px; }
  .coverage-summary { grid-template-columns: 1fr 1fr; }
  .source-row { grid-template-columns: 1fr auto; }.source-row > .source-meta:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .wrap { width: min(100% - 24px, 1180px); }
  .topbar { height: 72px; }
  .data-pill { max-width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-word { font-size: 1.05rem; }
  .hero { padding-top: 34px; padding-bottom: 62px; }
  .hero h1 { font-size: clamp(2.75rem, 14vw, 4.15rem); }
  .hero-copy { font-size: .96rem; }
  .trust-row { display: grid; gap: 9px; }
  .search-shell { margin-top: -18px; }
  .search-card { border-radius: 23px; padding: 21px 16px; }
  .search-head { align-items: center; }
  .search-head h2 { font-size: 1.35rem; }
  .route-fields { grid-template-columns: 1fr; gap: 13px; }
  .network-field { grid-column: auto; }
  .vehicle-grid { grid-template-columns: 1fr 1fr; }
  .vehicle-choice:last-child { grid-column: 1 / -1; }
  .search-footer { align-items: stretch; flex-direction: column-reverse; }
  .primary-button { width: 100%; }
  .coverage-strip { grid-template-columns: 1fr; }
  .coverage-link { grid-column: auto; }
  .coverage-strip article { min-height: 70px; }
  .sync-banner { grid-template-columns: 38px 1fr; }.sync-banner > button { grid-column: 1 / -1; }.sync-progress { grid-column: 1 / -1; }
  .result-top { flex-direction: column; }.result-price { text-align: left; }
  .result-metrics { grid-template-columns: 1fr 1fr; }
  .options-panel, .route-panel { padding: 19px 15px; }
  .option-details { grid-column: 1 / -1; }.option-saving { grid-column: 1 / -1; }
  .navigation-buttons { grid-template-columns: 1fr; }
  .empty-state { grid-template-columns: 1fr; padding: 24px 18px; gap: 22px; }
  .empty-illustration { height: 135px; }
  .footer { flex-direction: column; padding-top: 50px; }.footer p { text-align: left; }
  .modal-backdrop { padding: 10px; align-items: end; }.modal { max-height: 92vh; border-radius: 24px 24px 16px 16px; padding: 22px 16px; }
  .national-reference-card { grid-template-columns: 1fr; }.france-map-card { height: 190px; }
  .coverage-summary { grid-template-columns: 1fr 1fr; }
  .source-heading { display: block; }.source-legend { text-align: left; margin-top: 8px; }
  .source-row { grid-template-columns: 1fr; }.source-state { justify-self: start; }.source-row > .source-meta:last-child { grid-column: auto; }
  .settings-grid { grid-template-columns: 1fr; }
  .modal-actions { justify-content: stretch; }.modal-actions > * { width: 100%; }
}

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

/* V3 - saisie de lieux et détection automatique du réseau */
.field > label { color: var(--muted); font-size: .78rem; font-weight: 750; }
.auto-route-fields { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: start; gap: 16px; }
.route-fields.auto-route-fields { position: relative; isolation: isolate; }
.autocomplete-field { z-index: 1; }
.autocomplete-field:focus-within { z-index: 140; }
.autocomplete-field:focus-within .location-input-shell { z-index: 141; }
.location-input-shell { position: relative; }
.location-input-shell input { padding-left: 45px; padding-right: 48px; }
.autocomplete-field .input-icon { left: 17px; top: 21px; bottom: auto; }
.geo-button {
  position: absolute; right: 9px; top: 9px; width: 37px; height: 37px; border: 0; border-radius: 12px;
  background: var(--green-pale); color: var(--green); display: grid; place-items: center; cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.geo-button:hover { transform: translateY(-1px); background: var(--green-soft); }
.geo-button:disabled { opacity: .55; cursor: wait; }
.geo-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.location-status { min-height: 17px; color: var(--muted); font-size: .69rem; line-height: 1.35; }
.location-status[data-tone="success"] { color: var(--green); font-weight: 700; }
.location-status[data-tone="warning"] { color: var(--orange); }
.location-status[data-tone="error"] { color: var(--red); }
.location-status[data-tone="loading"] { color: var(--blue); }
.location-suggestions {
  position: absolute; z-index: 320; left: 0; right: 0; top: calc(100% + 8px); max-height: 310px; overflow-y: auto;
  padding: 7px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.98);
  box-shadow: 0 24px 60px rgba(30,55,43,.18); backdrop-filter: blur(20px);
}
.location-suggestion {
  width: 100%; min-height: 57px; border: 0; border-radius: 12px; background: transparent; padding: 9px 10px;
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
}
.location-suggestion:hover, .location-suggestion.active { background: var(--green-pale); }
.suggestion-pin { width: 30px; height: 30px; border-radius: 10px; background: var(--green-soft); position: relative; flex: 0 0 auto; }
.suggestion-pin::before { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--green); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); left: 10px; top: 8px; }
.suggestion-copy { display: grid; min-width: 0; gap: 2px; }
.suggestion-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.suggestion-copy small { color: var(--muted); font-size: .67rem; }
.suggestion-empty { padding: 15px; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.route-map {
  min-height: 180px; margin: 4px 0 13px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 18% 15%, rgba(32,162,113,.13), transparent 8rem),
    linear-gradient(135deg, #f8fbf8, #eef5f1);
  position: relative;
}
.route-map svg { width: 100%; height: 180px; }
.route-map .map-grid { stroke: rgba(92,118,104,.08); stroke-width: 1; }
.route-map .map-route-shadow { fill: none; stroke: white; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.route-map .map-route { fill: none; stroke: url(#routeGradient); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.route-map .map-marker { stroke: white; stroke-width: 4; }
.route-map .map-marker.start { fill: var(--green); }
.route-map .map-marker.end { fill: var(--blue); }
.route-map .map-marker.stop { fill: var(--orange); }
.route-map-empty { height: 180px; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); font-size: .76rem; }
.route-network-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.network-chip { padding: 5px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .66rem; font-weight: 800; }
.network-chip.road { background: #edf0ee; color: var(--ink-soft); }
.network-chip.warning { background: #fff4df; color: #9a5d22; }
.route-summary-line { margin-top: 7px; color: #c7ddd2; font-size: .76rem; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.route-summary-line strong { color: white; }
.result-unpriced { background: linear-gradient(135deg, #18364f, #225a8f 72%, #2e6ca5); }
.result-unpriced .result-label { color: #c8e4fb; }
.coverage-diagnostic { margin-top: 12px; color: var(--muted); font-size: .7rem; line-height: 1.45; }

@media (max-width: 900px) {
  .auto-route-fields { grid-template-columns: 1fr 32px 1fr; }
}
@media (max-width: 680px) {
  .auto-route-fields { grid-template-columns: 1fr; gap: 10px; }
  .auto-route-fields .route-link { height: 17px; transform: rotate(90deg); width: 28px; justify-self: center; }
  .location-suggestions { max-height: 250px; }
  .route-map, .route-map svg, .route-map-empty { height: 154px; min-height: 154px; }
}

@media (max-width: 520px) {
  .data-pill { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 14px; }
  .data-pill #dataPillText { display: none; }
  .data-pill .status-dot { margin: 0; }
  .top-actions { gap: 7px; }
}


/* V3.8.2 - optimisation relative au trajet selectionne + animations */
.option-badge.ultra {
  background: linear-gradient(135deg, #e9ddff, #d9f2ff);
  color: #55348f;
  box-shadow: inset 0 0 0 1px rgba(85,52,143,.14);
}
.option-badge.reference-selected { background: #fff0cf; color: #8a5b00; }
.ultra-corridor-line { color: #55348f; font-weight: 750; }
.ultra-search-box {
  margin-top: 16px; padding: 16px; border: 1px solid rgba(85,52,143,.16); border-radius: 18px;
  background: linear-gradient(135deg, rgba(239,231,255,.78), rgba(229,247,255,.78));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 15px;
  position: relative; overflow: hidden; isolation: isolate; transition: border-color .25s ease, box-shadow .25s ease;
}
.ultra-search-box > * { position: relative; z-index: 1; }
.ultra-search-box.searching { border-color: rgba(85,52,143,.34); box-shadow: 0 14px 34px rgba(85,52,143,.12); animation: ultraBoxPulse 1.8s ease-in-out infinite; }
.ultra-search-box.searching::before {
  content: ""; position: absolute; z-index: 0; inset: -45% -25%;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.7) 48%, transparent 62%);
  transform: translateX(-55%); animation: ultraShimmer 2.2s ease-in-out infinite;
}
.ultra-search-box.search-complete { border-color: rgba(22,116,83,.32); box-shadow: 0 13px 30px rgba(22,116,83,.11); }
.ultra-search-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ultra-search-copy strong { display: block; font-family: var(--font-display); font-size: .96rem; }
.ultra-search-copy p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.ultra-search-icon {
  width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 13px;
  background: #55348f; color: white; font: 850 1rem var(--font-display); box-shadow: 0 8px 18px rgba(85,52,143,.2);
  position: relative;
}
.ultra-search-icon > span { position: relative; z-index: 2; }
.searching .ultra-search-icon { animation: ultraIconPulse 1.15s ease-in-out infinite; }
.searching .ultra-search-icon::before {
  content: ""; position: absolute; inset: -5px; border-radius: 16px; border: 2px solid rgba(85,52,143,.2); border-top-color: #8d65cf;
  animation: spin .9s linear infinite;
}
.searching .ultra-search-icon::after {
  content: ""; position: absolute; width: 6px; height: 6px; left: 16px; top: -7px; border-radius: 50%;
  background: #5dd5ba; box-shadow: 0 0 0 4px rgba(93,213,186,.18); transform-origin: 3px 26px;
  animation: ultraOrbit 1.35s linear infinite;
}
.ultra-search-button {
  border: 0; border-radius: 13px; padding: 11px 14px; background: #55348f; color: white;
  font: 800 .75rem var(--font-body); cursor: pointer; white-space: nowrap; transition: .16s ease; position: relative;
}
.ultra-search-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(85,52,143,.2); }
.ultra-search-button:disabled { opacity: .68; cursor: default; }
.searching .ultra-search-button { padding-left: 37px; }
.searching .ultra-search-button::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 13px; height: 13px; margin-top: -7px;
  border: 2px solid rgba(255,255,255,.38); border-top-color: white; border-radius: 50%; animation: spin .72s linear infinite;
}
.ultra-live-progress { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 2px; }
.ultra-progress-track { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(85,52,143,.12); box-shadow: inset 0 1px 2px rgba(85,52,143,.08); }
.ultra-progress-track span {
  display: block; width: 2%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #55348f, #8d65cf, #37bda0, #55348f); background-size: 220% 100%;
  transition: width .28s ease; animation: ultraProgressFlow 1.15s linear infinite;
}
.ultra-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #5d4d73; font-size: .69rem; }
.ultra-progress-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ultra-progress-meta strong { flex: 0 0 auto; font: 800 .68rem var(--font-display); color: #55348f; }
.ultra-progress-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ultra-progress-steps span {
  min-height: 25px; border-radius: 9px; display: grid; place-items: center; padding: 3px 5px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(85,52,143,.09); color: #8b8098; font-size: .61rem; font-weight: 750;
  transition: .2s ease;
}
.ultra-progress-steps span.active { background: white; color: #55348f; border-color: rgba(85,52,143,.25); transform: translateY(-1px); box-shadow: 0 5px 13px rgba(85,52,143,.09); animation: ultraStepPulse 1.2s ease-in-out infinite; }
.ultra-progress-steps span.done { background: rgba(223,245,232,.9); color: #0d6b48; border-color: rgba(13,107,72,.14); }
.ultra-progress-steps span.done::before { content: "\2713"; margin-right: 4px; }
@keyframes ultraBoxPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes ultraShimmer { 0% { transform: translateX(-58%); } 65%,100% { transform: translateX(58%); } }
@keyframes ultraIconPulse { 0%,100% { box-shadow: 0 8px 18px rgba(85,52,143,.2); } 50% { box-shadow: 0 8px 25px rgba(85,52,143,.4); } }
@keyframes ultraOrbit { to { transform: rotate(360deg); } }
@keyframes ultraProgressFlow { to { background-position: -220% 0; } }
@keyframes ultraStepPulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }

@media (max-width: 760px) {
  .ultra-search-box { grid-template-columns: 1fr; }
  .ultra-search-button { width: 100%; }
  .ultra-progress-meta { align-items: flex-start; }
  .ultra-progress-steps { gap: 4px; }
  .ultra-progress-steps span { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ultra-search-box, .ultra-search-box::before, .ultra-search-icon, .ultra-search-icon::before,
  .ultra-search-icon::after, .ultra-search-button::before, .ultra-progress-track span,
  .ultra-progress-steps span { animation: none !important; }
}


/* V3.8.3 - animation de la premiere recherche */
.base-search-progress {
  margin-top: 15px; padding: 15px 16px 14px; border-radius: 18px;
  border: 1px solid rgba(34,90,143,.15);
  background: linear-gradient(135deg, rgba(234,246,255,.86), rgba(236,249,242,.92));
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 12px 28px rgba(34,90,143,.07);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.base-search-progress > * { position: relative; z-index: 2; }
.base-search-progress.searching { border-color: rgba(34,90,143,.3); box-shadow: 0 15px 34px rgba(34,90,143,.12); }
.base-search-progress.searching::before {
  content: ""; position: absolute; z-index: 0; inset: -65% -30%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.82) 49%, transparent 63%);
  transform: translateX(-58%); animation: baseSearchShimmer 2.15s ease-in-out infinite;
}
.base-search-progress.search-complete { border-color: rgba(22,116,83,.32); background: linear-gradient(135deg, rgba(230,248,238,.94), rgba(239,251,246,.98)); }
.base-search-progress.search-error { border-color: rgba(191,74,58,.28); background: linear-gradient(135deg, rgba(255,239,235,.95), rgba(255,248,244,.98)); }
.base-search-head { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.base-search-icon {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(145deg, #167453, #225a8f); color: white; position: relative;
  box-shadow: 0 8px 20px rgba(34,90,143,.2);
}
.base-search-icon b { position: relative; z-index: 3; font: 850 .88rem var(--font-display); }
.base-search-icon i { position: absolute; inset: 7px; border: 2px dashed rgba(255,255,255,.48); border-radius: 50%; }
.searching .base-search-icon i { animation: spin 1.7s linear infinite; }
.searching .base-search-icon::before,
.searching .base-search-icon::after {
  content: ""; position: absolute; border-radius: 50%; background: #74dec6;
  box-shadow: 0 0 0 4px rgba(116,222,198,.16);
}
.searching .base-search-icon::before { width: 5px; height: 5px; top: 5px; left: 19px; transform-origin: 2.5px 16px; animation: baseRouteOrbit 1.35s linear infinite; }
.searching .base-search-icon::after { width: 4px; height: 4px; bottom: 7px; right: 7px; animation: baseDotPulse .9s ease-in-out infinite; }
.base-search-copy { min-width: 0; }
.base-search-copy strong { display: block; font: 800 .91rem var(--font-display); color: #183b4b; }
.base-search-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.42; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-search-head em { font: 850 .7rem var(--font-display); color: #225a8f; font-style: normal; white-space: nowrap; }
.base-progress-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: rgba(34,90,143,.11); box-shadow: inset 0 1px 2px rgba(34,90,143,.08); }
.base-progress-track span {
  display: block; width: 2%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #225a8f, #167453, #55caae, #225a8f); background-size: 230% 100%;
  transition: width .3s ease; animation: baseProgressFlow 1.1s linear infinite;
}
.base-search-progress.search-complete .base-progress-track span { background: #167453; animation: none; }
.base-search-progress.search-error .base-progress-track span { background: #bf4a3a; animation: none; }
.base-progress-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 9px; }
.base-progress-steps span {
  min-height: 25px; padding: 3px 5px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.58); border: 1px solid rgba(34,90,143,.08); color: #81909a;
  font-size: .61rem; font-weight: 750; transition: .2s ease;
}
.base-progress-steps span.active { color: #225a8f; background: white; border-color: rgba(34,90,143,.24); box-shadow: 0 5px 13px rgba(34,90,143,.09); transform: translateY(-1px); animation: baseStepPulse 1.15s ease-in-out infinite; }
.base-progress-steps span.done { color: #0d6b48; background: rgba(223,245,232,.92); border-color: rgba(13,107,72,.14); }
.base-progress-steps span.done::before { content: "\2713"; margin-right: 4px; }
.base-progress-steps span.failed { color: #a23b2e; background: rgba(255,231,226,.94); border-color: rgba(191,74,58,.17); }
.base-progress-steps span.failed::before { content: "!"; margin-right: 4px; }
.primary-button.calculating { position: relative; padding-left: 47px; overflow: hidden; }
.primary-button.calculating::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 15px; height: 15px; margin-top: -9px;
  border: 2px solid rgba(255,255,255,.38); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite;
}
.primary-button.calculating svg { opacity: .35; animation: baseArrowPulse 1s ease-in-out infinite; }
@keyframes baseSearchShimmer { 0% { transform: translateX(-60%); } 68%,100% { transform: translateX(60%); } }
@keyframes baseRouteOrbit { to { transform: rotate(360deg); } }
@keyframes baseDotPulse { 0%,100% { opacity: .45; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes baseProgressFlow { to { background-position: -230% 0; } }
@keyframes baseStepPulse { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes baseArrowPulse { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (max-width: 620px) {
  .base-search-progress { padding: 14px 13px 13px; }
  .base-search-head { grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; }
  .base-search-icon { width: 38px; height: 38px; border-radius: 12px; }
  .base-search-copy strong { font-size: .82rem; }
  .base-search-copy span { white-space: normal; font-size: .65rem; }
  .base-progress-steps { gap: 4px; }
  .base-progress-steps span { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .base-search-progress::before, .base-search-icon i, .base-search-icon::before, .base-search-icon::after,
  .base-progress-track span, .base-progress-steps span, .primary-button.calculating::before,
  .primary-button.calculating svg { animation: none !important; }
}


/* V3.9.0 - choix du compromis, cartes decisionnelles, onglets et selection persistante */
.preference-section { margin-top: 24px; padding-top: 23px; border-top: 1px solid var(--line); }
.preference-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.preference-heading > div { display: grid; gap: 5px; }
.preference-heading strong { font: 750 .92rem var(--font-display); letter-spacing: -.02em; }
.preference-heading > span { color: var(--green); font-size: .7rem; font-weight: 750; text-align: right; max-width: 390px; }
.preference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.preference-choice {
  min-height: 78px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfa;
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  text-align: left; cursor: pointer; transition: .17s ease;
}
.preference-choice:hover { transform: translateY(-1px); border-color: #b8cec0; }
.preference-choice.active { border-color: var(--green-2); background: linear-gradient(135deg, var(--green-pale), #f4fbf8); box-shadow: 0 9px 25px rgba(22,116,83,.09); }
.preference-choice > span { grid-row: 1 / span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: white; color: var(--green); font: 800 1rem var(--font-display); }
.preference-choice strong { align-self: end; font-size: .82rem; }
.preference-choice small { align-self: start; color: var(--muted); font-size: .68rem; }
.result-price em { display: block; margin-top: 6px; color: #e4f4ec; font-size: .72rem; font-style: normal; font-weight: 750; }
.selected-trip-bar {
  position: sticky; top: 12px; z-index: 45; margin-top: 14px; padding: 12px 13px 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(22,116,83,.18);
  border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 14px 35px rgba(28,61,45,.13); backdrop-filter: blur(18px);
}
.selected-trip-copy { min-width: 0; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 10px; }
.selected-trip-copy span { grid-column: 1 / -1; color: var(--green); text-transform: uppercase; letter-spacing: .09em; font: 800 .61rem var(--font-display); }
.selected-trip-copy strong { font: 800 1.2rem var(--font-display); }
.selected-trip-copy small { min-width: 0; color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selected-trip-bar button { flex: 0 0 auto; min-height: 39px; padding: 0 14px; border: 0; border-radius: 12px; background: #55348f; color: white; font-size: .72rem; font-weight: 800; cursor: pointer; }
.selected-trip-bar button:disabled { opacity: .58; cursor: default; }
.result-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; padding: 5px; border-radius: 14px; background: #eef2ef; }
.result-tabs button { min-height: 39px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 800; cursor: pointer; }
.result-tabs button span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.72); font-size: .62rem; }
.result-tabs button.active { color: var(--green); background: white; box-shadow: 0 5px 14px rgba(38,58,47,.08); }
.result-tabs button:disabled { opacity: .45; cursor: default; }
.route-option { overflow: hidden; }
.option-decision { grid-column: 1 / -1; margin-top: 1px; padding: 9px 10px; border-radius: 11px; background: rgba(22,116,83,.06); color: #245b47; font-size: .73rem; line-height: 1.42; font-weight: 750; }
.route-option.selected .option-decision { background: rgba(22,116,83,.10); }
.option-cost-line { grid-column: 1; color: var(--muted); font-size: .67rem; }
.option-cost-line strong { color: var(--ink); }
.tab-empty { padding: 24px 18px; display: grid; gap: 6px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 16px; background: #fbfcfa; }
.tab-empty strong { font: 750 .86rem var(--font-display); }
.tab-empty span { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.comparison-panel { margin-top: 13px; padding: 15px; border: 1px solid rgba(85,52,143,.16); border-radius: 17px; background: linear-gradient(135deg, rgba(243,238,255,.82), rgba(238,250,247,.9)); }
.compare-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.compare-heading > div { display: grid; gap: 4px; }
.compare-heading strong { font: 800 .91rem var(--font-display); }
.compare-saving { padding: 6px 9px; border-radius: 999px; background: white; color: var(--green); font-size: .67rem; font-weight: 800; white-space: nowrap; }
.compare-grid { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 8px; align-items: center; margin-top: 12px; }
.compare-column { min-height: 100px; padding: 12px; display: grid; align-content: center; gap: 3px; border-radius: 13px; background: rgba(255,255,255,.78); border: 1px solid rgba(85,52,143,.09); }
.compare-column > span { color: var(--muted); font-size: .63rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.compare-column strong { font: 800 1.3rem var(--font-display); }
.compare-column small { color: var(--ink-soft); font-size: .68rem; }
.compare-column em { color: var(--green); font-size: .66rem; font-style: normal; font-weight: 750; }
.compare-column.optimized { border-color: rgba(22,116,83,.22); background: rgba(240,250,245,.95); }
.compare-arrow { color: #7253a7; font-size: 1.2rem; font-weight: 800; text-align: center; }
.compare-deltas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.compare-deltas span, .compare-deltas strong { padding: 5px 8px; border-radius: 999px; background: white; color: var(--ink-soft); font-size: .63rem; }
.compare-deltas strong { color: var(--green); }
@media (max-width: 680px) {
  .preference-heading { display: grid; gap: 7px; }
  .preference-heading > span { text-align: left; }
  .preference-grid { grid-template-columns: 1fr; }
  .preference-choice { min-height: 68px; }
  body.selected-bar-visible { padding-bottom: 92px; }
  .selected-trip-bar { position: fixed; top: auto; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 90; margin: 0; padding: 11px 11px 11px 13px; border-radius: 16px; opacity: 0; transform: translateY(calc(100% + 28px)); pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
  body.selected-bar-visible .selected-trip-bar:not(.hidden) { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .selected-trip-copy { grid-template-columns: auto 1fr; gap: 2px 8px; }
  .selected-trip-copy span { grid-column: 1 / -1; }
  .selected-trip-copy small { font-size: .62rem; }
  .selected-trip-bar button { min-height: 42px; max-width: 145px; padding-inline: 11px; white-space: normal; line-height: 1.15; }
  .option-cost-line, .option-saving { grid-column: 1 / -1; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-arrow { transform: rotate(90deg); }
  .compare-heading { align-items: flex-start; }
}


/* V3.10.0 - carte multi-traces, recommandation centrale et progression en direct */
.result-recommendation-copy { max-width: 720px; }
.result-decision-line { max-width: 680px; margin: 10px 0 0; color: #e2f2e9; font-size: .84rem; line-height: 1.55; font-weight: 650; }
.result-recommendation-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.result-recommendation-actions button { min-height: 44px; padding: 0 17px; border-radius: 13px; font-size: .75rem; font-weight: 850; cursor: pointer; }
.recommendation-primary { border: 0; background: white; color: #126047; box-shadow: 0 9px 25px rgba(5,35,25,.16); }
.recommendation-secondary { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: white; }
.recommendation-primary:hover, .recommendation-secondary:hover { transform: translateY(-1px); }

.progress-live-finding { justify-self: start; margin-top: 1px; padding: 6px 9px; border-radius: 999px; background: rgba(22,116,83,.10); color: #126047; font-size: .66rem; font-weight: 850; animation: liveFindingPulse 1.4s ease-in-out infinite; }
.progress-live-finding.compact { margin-top: 0; background: rgba(85,52,143,.09); color: #55348f; }
@keyframes liveFindingPulse { 0%,100% { opacity: .82; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } }

.route-map { min-height: 300px; padding: 13px; overflow: visible; }
.multi-route-map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.multi-route-map-head > div { display: grid; gap: 2px; }
.multi-route-map-head strong { font: 800 .82rem var(--font-display); }
.multi-route-map-head span { color: var(--muted); font-size: .64rem; line-height: 1.4; }
.multi-route-map-head em { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: white; color: var(--green); font-size: .61rem; font-style: normal; font-weight: 850; }
.route-map svg { height: 205px; border-radius: 13px; background: rgba(255,255,255,.44); cursor: crosshair; }
.route-map .map-route-shadow.multi { fill: none; stroke: white; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.route-map .map-route-line { fill: none; stroke: #a9b6af; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .72; cursor: pointer; transition: stroke-width .16s ease, opacity .16s ease, filter .16s ease; }
.route-map .map-route-line:hover { stroke-width: 7; opacity: 1; filter: drop-shadow(0 3px 4px rgba(27,53,40,.18)); }
.route-map .map-route-line.direct { stroke: #225a8f; opacity: .9; }
.route-map .map-route-line.recommended { stroke: #20a271; stroke-width: 7; opacity: 1; }
.route-map .map-route-line.selected { stroke: #0e7a52; stroke-width: 8; opacity: 1; filter: drop-shadow(0 4px 5px rgba(14,122,82,.20)); }
.route-map .map-route-line.optimized { stroke: #6b48a8; stroke-width: 6; opacity: .96; stroke-dasharray: 13 7; }
.route-map .map-route-shadow.multi.selected, .route-map .map-route-shadow.multi.recommended { stroke-width: 12; opacity: .92; }
.route-map-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.map-legend-item { min-height: 30px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.86); color: var(--ink-soft); cursor: pointer; font-size: .61rem; }
.map-legend-item i { width: 16px; height: 4px; border-radius: 99px; background: #a9b6af; }
.map-legend-item strong { font-size: .61rem; color: var(--ink); }
.map-legend-item.direct i { background: #225a8f; }
.map-legend-item.recommended i, .map-legend-item.selected i { background: #20a271; }
.map-legend-item.optimized i { background: #6b48a8; }
.map-legend-item.selected { border-color: rgba(22,116,83,.35); background: var(--green-pale); }

.compare-grid.triple { grid-template-columns: 1fr 24px 1fr 24px 1fr; }
.compare-column.selected { border-color: rgba(34,90,143,.20); background: rgba(237,245,252,.94); }
.compare-column.pending { border-style: dashed; background: rgba(255,255,255,.52); }
.compare-column.pending strong { font-size: .98rem; color: var(--muted); }

@media (max-width: 820px) {
  .compare-grid.triple { grid-template-columns: 1fr; }
  .compare-grid.triple .compare-arrow { transform: rotate(90deg); }
}
@media (max-width: 680px) {
  .result-top { display: grid; }
  .result-price { text-align: left; }
  .result-recommendation-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .route-map, .route-map-empty { height: auto; min-height: 280px; }
  .route-map svg { height: 170px; min-height: 170px; }
  .multi-route-map-head span { display: none; }
  .map-legend-item { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .progress-live-finding { border-radius: 10px; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-live-finding { animation: none !important; }
}


/* V3.11.0 - favoris, historique, retour et partage */
.saved-trips { margin-top: 26px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.76); box-shadow: var(--shadow-soft); }
.saved-trips-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.saved-trips-head > div { display: grid; gap: 4px; }
.saved-trips-head h2 { margin: 0; font: 800 1.22rem var(--font-display); letter-spacing: -.035em; }
.saved-trips-head p { margin: 0; color: var(--muted); font-size: .72rem; }
.saved-trips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.saved-trips-column { min-width: 0; padding: 12px; border-radius: 17px; background: #f5f7f4; }
.saved-column-head { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 9px; }
.saved-column-head strong { font: 800 .78rem var(--font-display); }
.saved-column-head span { min-width: 26px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: white; color: var(--green); font-size: .61rem; font-weight: 850; }
.saved-trip-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(27,62,43,.08); border-radius: 14px; background: white; box-shadow: 0 6px 16px rgba(29,57,43,.04); }
.saved-trip-card + .saved-trip-card { margin-top: 8px; }
.saved-trip-card.is-favorite { border-color: rgba(22,116,83,.18); background: linear-gradient(135deg, #fff, #f2faf6); }
.saved-trip-route { min-width: 0; display: grid; gap: 3px; }
.saved-trip-route > span { color: var(--green); text-transform: uppercase; letter-spacing: .08em; font: 850 .54rem var(--font-display); }
.saved-trip-route strong { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: .71rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-trip-route strong i { color: var(--green); font-style: normal; flex: 0 0 auto; }
.saved-trip-route small { color: var(--muted); font-size: .62rem; }
.saved-trip-actions { display: flex; align-items: center; gap: 5px; }
.saved-trip-actions button { min-height: 31px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: #fafbf9; color: var(--ink-soft); font-size: .6rem; font-weight: 800; cursor: pointer; }
.saved-trip-actions button:hover { border-color: #9ebaaa; color: var(--green); }
.saved-trip-actions .saved-star, .saved-trip-actions .saved-remove { width: 31px; padding: 0; font-size: .9rem; }
.saved-trip-actions .saved-star.active { background: var(--green-pale); border-color: rgba(22,116,83,.22); color: var(--green); }
.saved-trip-actions .saved-remove { color: #a15c51; }
.saved-trips-empty { min-height: 66px; padding: 14px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 13px; color: var(--muted); text-align: center; font-size: .67rem; line-height: 1.45; }
.trip-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 13px 0; }
.trip-action { min-height: 53px; padding: 8px 7px; display: grid; place-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 13px; background: #fafbf9; color: var(--ink-soft); cursor: pointer; transition: .16s ease; }
.trip-action span { color: var(--green); font-size: 1rem; line-height: 1; }
.trip-action strong { font-size: .61rem; line-height: 1.2; }
.trip-action:hover { transform: translateY(-1px); border-color: #a7c2b2; background: white; }
.trip-action.active { border-color: rgba(22,116,83,.25); background: var(--green-pale); color: var(--green); }
.trip-action:disabled { opacity: .45; cursor: default; transform: none; }
@media (max-width: 860px) {
  .saved-trips-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .saved-trips { margin-top: 18px; padding: 16px 12px; border-radius: 19px; }
  .saved-trips-head { align-items: flex-start; }
  .saved-trips-head p { max-width: 250px; }
  .saved-trip-card { grid-template-columns: 1fr; gap: 9px; }
  .saved-trip-actions { justify-content: flex-start; }
  .saved-trip-actions button:not(.saved-star):not(.saved-remove) { flex: 1 1 auto; }
  .trip-quick-actions { position: sticky; bottom: 8px; z-index: 20; padding: 7px; border: 1px solid rgba(22,116,83,.12); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 10px 28px rgba(28,61,45,.12); backdrop-filter: blur(16px); }
}


/* V3.11.0 - références de calcul visibles sous le véhicule */
.calculation-settings {
  margin-top: 18px; padding: 18px; border: 1px solid rgba(22,116,83,.13); border-radius: 19px;
  background: linear-gradient(135deg, rgba(245,250,247,.98), rgba(255,255,255,.98));
  box-shadow: 0 8px 24px rgba(28,61,45,.05); scroll-margin-top: 90px; transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.calculation-settings.settings-focus { border-color: rgba(22,116,83,.46); box-shadow: 0 0 0 5px rgba(22,116,83,.08), 0 12px 30px rgba(28,61,45,.09); transform: translateY(-1px); }
.calculation-settings-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.calculation-settings-head > div { display: grid; gap: 3px; }
.calculation-settings-head h3 { margin: 0; color: var(--ink); font: 800 1rem var(--font-display); letter-spacing: -.03em; }
.calculation-settings-head p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.settings-grid-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.settings-grid-inline .field { min-width: 0; }
.settings-grid-inline .field > span { font-size: .63rem; }
.settings-grid-inline .unit-input, .settings-grid-inline select { background: white; }
.calculation-settings .settings-callout { margin-top: 12px; padding: 11px 13px; font-size: .65rem; }
@media (max-width: 860px) {
  .settings-grid-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .calculation-settings { margin-top: 14px; padding: 15px 12px; border-radius: 16px; }
  .calculation-settings-head { align-items: flex-start; }
  .calculation-settings-head p { max-width: 230px; }
  .settings-grid-inline { grid-template-columns: 1fr 1fr; gap: 9px; }
  .calculation-settings .settings-callout { line-height: 1.45; }
}
@media (max-width: 410px) {
  .settings-grid-inline { grid-template-columns: 1fr; }
  .calculation-settings-head { display: grid; grid-template-columns: 1fr auto; }
}


/* V3.11.1 - réglages essentiels visibles, paramètres techniques repliés */
.settings-grid-essential { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.advanced-settings { margin-top: 12px; border: 1px solid rgba(22,116,83,.12); border-radius: 14px; background: rgba(255,255,255,.72); overflow: hidden; }
.advanced-settings summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 11px 14px; color: var(--ink); user-select: none; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary span { display: grid; gap: 2px; }
.advanced-settings summary strong { font: 750 .75rem var(--font-display); }
.advanced-settings summary small { color: var(--muted); font-size: .61rem; }
.advanced-settings summary i { position: relative; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--green-soft); }
.advanced-settings summary i::before, .advanced-settings summary i::after { content: ''; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; border-radius: 2px; background: var(--green); transition: transform .2s ease; }
.advanced-settings summary i::after { transform: rotate(90deg); }
.advanced-settings[open] summary i::after { transform: rotate(0); }
.advanced-settings[open] summary { border-bottom: 1px solid rgba(22,116,83,.1); }
.settings-grid-advanced { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.settings-grid-advanced select, .settings-grid-advanced .unit-input { background: #fff; }
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: .58rem; line-height: 1.35; }
@media (max-width: 620px) {
  .settings-grid-essential, .settings-grid-advanced { grid-template-columns: 1fr 1fr; gap: 9px; }
  .advanced-settings summary { padding-inline: 12px; }
  .settings-grid-advanced { padding: 12px; }
}
@media (max-width: 410px) {
  .settings-grid-essential, .settings-grid-advanced { grid-template-columns: 1fr; }
}


/* V3.12.0 - finitions UX : guide, confiance, trajet prêt et reprise d'erreur */
.guide-button span { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--ink-soft); font: 800 .72rem var(--font-display); }
.geo-button { width: auto; min-width: 42px; padding: 0 11px; gap: 6px; }
.geo-button span { font-size: .62rem; font-weight: 800; white-space: nowrap; }
.location-input-shell input { padding-right: 112px; }

.search-retry-button { justify-self: start; margin-top: 12px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(191,74,58,.25); border-radius: 11px; background: #fff; color: #a23b2e; font-size: .7rem; font-weight: 850; cursor: pointer; }
.search-retry-button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(162,59,46,.10); }

.result-trust-row, .option-trust-row, .trip-ready-confidence { display: flex; flex-wrap: wrap; gap: 6px; }
.result-trust-row { margin-top: 12px; }
.option-trust-row { margin-top: 8px; }
.trust-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid rgba(35,73,53,.10); border-radius: 999px; background: rgba(255,255,255,.78); color: var(--ink-soft); font-size: .58rem; line-height: 1.15; font-weight: 800; }
.trust-badge.verified { border-color: rgba(22,116,83,.18); background: rgba(226,247,236,.92); color: #126047; }
.trust-badge.live { border-color: rgba(34,90,143,.17); background: rgba(232,243,252,.94); color: #225a8f; }
.trust-badge.fallback { border-color: rgba(150,104,28,.16); background: rgba(255,247,224,.94); color: #88601d; }
.trust-badge.date, .trust-badge.source { background: rgba(246,248,243,.92); }
.result-hero-card .trust-badge { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.20); color: #eff8f3; }
.result-hero-card .trust-badge.verified { background: rgba(171,238,204,.16); color: #e7fff3; }
.result-hero-card .trust-badge.live { background: rgba(166,213,250,.15); color: #edf8ff; }

.trip-ready-card { display: grid; gap: 14px; margin: 16px 0; padding: 17px; border: 1px solid rgba(22,116,83,.18); border-radius: 18px; background: linear-gradient(145deg, rgba(244,251,247,.98), rgba(255,255,255,.98)); box-shadow: 0 12px 28px rgba(25,69,46,.08); }
.trip-ready-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.trip-ready-head > div { display: grid; gap: 4px; }
.trip-ready-head strong { font: 800 1rem var(--font-display); letter-spacing: -.02em; }
.trip-ready-check { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 900; box-shadow: 0 7px 16px rgba(22,116,83,.20); }
.trip-ready-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.trip-ready-metrics > div { min-width: 0; display: grid; gap: 3px; padding: 9px; border-radius: 11px; background: rgba(238,245,241,.82); }
.trip-ready-metrics span { color: var(--muted); font-size: .56rem; font-weight: 750; }
.trip-ready-metrics strong { font: 800 .75rem var(--font-display); white-space: nowrap; }
.trip-ready-metrics .positive { background: rgba(222,246,232,.96); }
.trip-ready-metrics .positive strong { color: var(--green); }
.trip-ready-start { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 13px; background: var(--green); color: white; text-decoration: none; box-shadow: 0 12px 24px rgba(22,116,83,.18); }
.trip-ready-start span { font-size: .76rem; font-weight: 900; }
.trip-ready-start small { color: rgba(255,255,255,.78); font-size: .58rem; font-weight: 700; }
.trip-ready-start:hover { transform: translateY(-1px); }

.onboarding-modal { width: min(560px, 100%); }
.onboarding-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.onboarding-skip { border: 0; background: transparent; color: var(--muted); font-size: .68rem; font-weight: 800; cursor: pointer; }
.onboarding-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 18px 0 24px; }
.onboarding-progress span { height: 5px; border-radius: 99px; background: #e4eae5; transition: background .18s ease, transform .18s ease; }
.onboarding-progress span.active { background: var(--green); transform: scaleY(1.25); }
.onboarding-progress span.done { background: #9bcbb2; }
.onboarding-content { min-height: 240px; display: grid; align-content: start; justify-items: start; gap: 13px; }
.onboarding-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--green-pale); color: var(--green); font: 900 1.25rem var(--font-display); }
.onboarding-content h2 { margin: 3px 0 0; font: 800 clamp(1.35rem, 4vw, 1.8rem) var(--font-display); letter-spacing: -.04em; }
.onboarding-content p { margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: .83rem; }
.onboarding-tip { width: 100%; padding: 12px 13px; border-left: 3px solid var(--green); border-radius: 0 11px 11px 0; background: rgba(234,246,239,.78); color: #315746; font-size: .7rem; line-height: 1.5; font-weight: 700; }
.onboarding-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.onboarding-actions .primary-button { margin-left: auto; }

@media (max-width: 680px) {
  .geo-button { padding-inline: 9px; }
  .geo-button span { font-size: .58rem; }
  .location-input-shell input { padding-right: 100px; }
  .trip-ready-metrics { grid-template-columns: repeat(2, 1fr); }
  .trip-ready-start { align-items: flex-start; flex-direction: column; gap: 2px; }
  .onboarding-content { min-height: 220px; }
  .result-trust-row, .option-trust-row { gap: 4px; }
  .trust-badge { font-size: .54rem; }
}


/* V3.12.1 - voiture automatique et guide premier lancement fiabilisé */
.vehicle-autofill { position: relative; margin: 16px 0 13px; padding: 15px; border: 1px solid rgba(22,116,83,.14); border-radius: 16px; background: linear-gradient(145deg, rgba(241,249,244,.9), rgba(255,255,255,.95)); transition: opacity .18s ease, filter .18s ease; }
.vehicle-autofill.is-disabled { opacity: .62; filter: grayscale(.15); }
.vehicle-autofill-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.vehicle-autofill-heading > div { display: grid; gap: 3px; }
.vehicle-autofill-heading .field-label { display: flex; gap: 6px; align-items: center; }
.vehicle-autofill-heading .field-label em { padding: 2px 5px; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--muted); font-size: .52rem; font-style: normal; font-weight: 800; }
.vehicle-autofill-heading strong { font: 800 .86rem var(--font-display); letter-spacing: -.015em; }
.vehicle-database-badge { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(22,116,83,.13); border-radius: 999px; background: #fff; color: var(--green); font-size: .55rem; font-weight: 850; }
.vehicle-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.vehicle-search-field { position: relative; min-width: 0; }
.vehicle-search-field > input { width: 100%; min-height: 50px; padding: 0 44px 0 14px; border: 1px solid var(--line-strong); border-radius: 13px; background: #fff; color: var(--ink); outline: none; font: 600 .76rem var(--font-display); }
.vehicle-search-field > input:focus { border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(32,162,113,.10); }
.vehicle-find-button { min-height: 50px; padding-inline: 16px; }
.vehicle-loading { position: absolute; top: 16px; right: 15px; width: 17px; height: 17px; border: 2px solid #c8ddd0; border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }
.vehicle-finder-help { display: block; margin-top: 7px; color: var(--muted); font-size: .59rem; line-height: 1.45; }
.vehicle-suggestions { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; right: 0; max-height: 310px; overflow: auto; padding: 5px; border: 1px solid rgba(37,73,52,.15); border-radius: 14px; background: rgba(255,255,255,.99); box-shadow: 0 18px 45px rgba(20,55,36,.16); }
.vehicle-suggestion-item { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 0; border-bottom: 1px solid #edf1ed; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.vehicle-suggestion-item:last-child { border-bottom: 0; }
.vehicle-suggestion-item:hover, .vehicle-suggestion-item:focus-visible { background: var(--green-pale); outline: none; }
.vehicle-suggestion-item > span { min-width: 0; display: grid; gap: 3px; }
.vehicle-suggestion-item strong { overflow: hidden; color: var(--ink); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-suggestion-item small { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-suggestion-item em { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: .58rem; font-style: normal; font-weight: 900; }
.vehicle-suggestion-empty { display: grid; gap: 4px; padding: 12px; }
.vehicle-suggestion-empty strong { font-size: .7rem; }
.vehicle-suggestion-empty span { color: var(--muted); font-size: .59rem; line-height: 1.45; }
.vehicle-selected-summary { margin-top: 11px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: rgba(225,245,234,.9); }
.vehicle-selected-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--green); color: #fff; font-weight: 900; }
.vehicle-selected-summary > div { min-width: 0; display: grid; gap: 2px; }
.vehicle-selected-summary strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-selected-summary small { overflow: hidden; color: #41705a; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-selected-summary button { border: 0; background: transparent; color: var(--green); font-size: .59rem; font-weight: 900; cursor: pointer; }
@media (max-width: 620px) {
  .vehicle-autofill { padding: 13px; }
  .vehicle-autofill-heading { align-items: center; }
  .vehicle-database-badge { font-size: .5rem; }
  .vehicle-search-row { grid-template-columns: 1fr; }
  .vehicle-find-button { width: 100%; min-height: 42px; }
  .vehicle-suggestions { max-height: 270px; }
}

/* V3.13.0 - redesign premium complet */
:root {
  --ink: #0f1815;
  --ink-soft: #45524d;
  --muted: #6e7b76;
  --paper: #f4f6f1;
  --paper-deep: #edf1ea;
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: rgba(255, 255, 255, .94);
  --line: #dbe3dc;
  --line-strong: #c7d2c8;
  --green: #0d6b52;
  --green-2: #1fb27d;
  --green-soft: #dbf2e7;
  --green-pale: #f1fbf5;
  --blue: #2d68a9;
  --blue-soft: #edf4fd;
  --orange: #d98a2f;
  --shadow-soft: 0 18px 48px rgba(12, 26, 20, .08);
  --shadow-sm: 0 18px 42px rgba(12, 26, 20, .07);
  --shadow-md: 0 28px 76px rgba(12, 26, 20, .11);
  --shadow-lg: 0 42px 120px rgba(12, 26, 20, .16);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 34px;
}

body.premium-ui {
  background:
    radial-gradient(circle at 12% 10%, rgba(35, 122, 230, .10), transparent 24rem),
    radial-gradient(circle at 88% 8%, rgba(31, 178, 125, .13), transparent 24rem),
    radial-gradient(circle at 50% 100%, rgba(13, 107, 82, .09), transparent 26rem),
    linear-gradient(180deg, #f8faf7 0%, #f1f4ef 46%, #edf1eb 100%);
  position: relative;
}
body.premium-ui::before,
body.premium-ui::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: blur(28px);
  opacity: .55;
}
body.premium-ui::before {
  width: 22rem;
  height: 22rem;
  top: -6rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(31, 178, 125, .18), transparent 68%);
}
body.premium-ui::after {
  width: 20rem;
  height: 20rem;
  right: -5rem;
  top: 24rem;
  background: radial-gradient(circle, rgba(45, 104, 169, .14), transparent 70%);
}
body.premium-ui main,
body.premium-ui .footer,
body.premium-ui .topbar { position: relative; z-index: 1; }
.wrap { width: min(1220px, calc(100% - 40px)); }
.page-noise { opacity: .018; }

.topbar {
  position: sticky;
  top: 14px;
  margin-top: 14px;
  height: auto;
  min-height: 78px;
  padding: 12px 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.58));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 18px 44px rgba(12, 26, 20, .10);
  backdrop-filter: blur(22px);
}
.brand { gap: 14px; }
.brand-mark {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background: linear-gradient(145deg, #0d6b52, #16a36f);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 16px 36px rgba(13,107,82,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
}
.brand-word { font-size: 1.28rem; letter-spacing: -.04em; }
.brand-word em {
  background: linear-gradient(135deg, #1fb27d, #2d68a9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.top-actions { gap: 9px; }
.data-pill,
.icon-button {
  background: rgba(255,255,255,.62);
  border-color: rgba(220, 229, 221, .92);
  box-shadow: 0 10px 30px rgba(12, 26, 20, .06);
  backdrop-filter: blur(16px);
}
.icon-button { border-radius: 15px; }
.icon-button:hover,
.data-pill:hover { box-shadow: 0 14px 34px rgba(12,26,20,.09); }

.hero {
  min-height: 560px;
  gap: 72px;
  padding-top: 72px;
  padding-bottom: 105px;
}
.hero-copy-block { max-width: 700px; }
.eyebrow {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: 0 10px 30px rgba(12,26,20,.06);
  backdrop-filter: blur(14px);
}
.hero h1 {
  max-width: 760px;
  letter-spacing: -.072em;
  text-wrap: balance;
}
.hero h1 span {
  background: linear-gradient(135deg, #0d6b52 0%, #1fb27d 45%, #2d68a9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy {
  max-width: 610px;
  font-size: clamp(1rem, 1.42vw, 1.12rem);
  line-height: 1.78;
}
.trust-row { gap: 12px; margin-top: 34px; }
.trust-row span {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(12,26,20,.05);
}
.hero-visual { height: 412px; }
.visual-orbit.one { width: 392px; height: 392px; border-color: rgba(13,107,82,.18); }
.visual-orbit.two { width: 280px; height: 280px; border-color: rgba(45,104,169,.15); }
.visual-card {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.73));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 30px 70px rgba(12,26,20,.12);
  backdrop-filter: blur(22px);
}
.route-demo { transform: rotate(-4deg) translate(-22px, -32px); }
.route-demo,
.saving-demo { overflow: hidden; }
.route-demo::before,
.saving-demo::before,
.search-card::before,
.options-panel::before,
.route-panel::before,
.saved-trips::before,
.result-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.30), transparent 45%, rgba(255,255,255,.14));
  pointer-events: none;
}
.saving-demo {
  right: -6px;
  bottom: 20px;
  transform: rotate(4deg);
  padding: 18px 22px;
}
.saving-icon {
  background: linear-gradient(135deg, rgba(31,178,125,.16), rgba(45,104,169,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.search-shell { margin-top: -36px; }
.search-card,
.options-panel,
.route-panel,
.method-card,
.saved-trips,
.empty-state,
.coverage-strip,
.sync-banner,
.calculation-settings {
  position: relative;
}
.search-card {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.70));
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 34px 110px rgba(12, 26, 20, .14);
  backdrop-filter: blur(24px);
}
.search-card::before {
  height: 150px;
  inset: 0 0 auto 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(31,178,125,.12), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(45,104,169,.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.26), transparent 100%);
}
.search-head,
.search-footer,
.route-fields,
.vehicle-section,
.calculation-settings,
.preference-section,
.base-search-progress,
.saved-trips-head,
.saved-trips-grid,
.result-top,
.result-metrics,
.result-recommendation-actions,
.route-map,
.route-visual,
.navigation-block,
.trip-ready-card,
.trip-quick-actions,
.method-card > * {
  position: relative;
  z-index: 1;
}
.search-head { margin-bottom: 30px; }
.search-head h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
.section-kicker,
.field-label,
.field > span { letter-spacing: .13em; }
.ghost-button,
.danger-button {
  background: rgba(255,255,255,.84);
  border-color: rgba(212,223,214,.95);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(12,26,20,.05);
}
.ghost-button:hover { background: rgba(255,255,255,.98); }
.primary-button {
  min-height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d6b52 0%, #1b9c70 52%, #2d68a9 100%);
  box-shadow: 0 18px 34px rgba(13,107,82,.24);
}
.primary-button:hover { box-shadow: 0 24px 42px rgba(13,107,82,.29); }

.field input,
.field select,
.unit-input,
.vehicle-search-field > input,
.location-input-shell input,
.saved-trip-actions button,
.nav-button,
.trip-action,
.route-option,
.saved-trip-card,
.coverage-strip article,
.coverage-link {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
}
.field input,
.field select,
.unit-input,
.vehicle-search-field > input {
  border-color: rgba(203, 214, 204, .98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.field input:hover,
.field select:hover,
.vehicle-search-field > input:hover { border-color: #b7c6bb; }
.field input:focus,
.field select:focus,
.vehicle-search-field > input:focus {
  border-color: rgba(31,178,125,.92);
  box-shadow: 0 0 0 5px rgba(31,178,125,.12), inset 0 1px 0 rgba(255,255,255,.55);
}
.location-input-shell,
.vehicle-search-field { position: relative; }
.location-suggestions,
.vehicle-suggestions {
  border: 1px solid rgba(220,228,221,.95);
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 56px rgba(12,26,20,.12);
  backdrop-filter: blur(18px);
}
.settings-callout,
.vehicle-autofill,
.advanced-settings,
.saved-trips-column,
.selected-trip-bar,
.comparison-panel,
.comparison-card,
.route-map svg,
.trip-ready-card,
.coverage-stat,
.source-row,
.national-reference-card,
.modal,
.sync-banner,
.base-search-progress,
.ultra-search-box,
.reference-copy .ghost-button,
.empty-state {
  box-shadow: 0 16px 40px rgba(12,26,20,.07);
}
.vehicle-grid,
.preference-grid,
.settings-grid,
.saved-trips-grid,
.results-grid { gap: 14px; }
.vehicle-choice,
.preference-choice {
  border-radius: 18px;
  border-color: rgba(210,220,211,.96);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  box-shadow: 0 10px 24px rgba(12,26,20,.04);
}
.vehicle-choice:hover,
.preference-choice:hover { box-shadow: 0 14px 28px rgba(12,26,20,.08); }
.vehicle-choice.active,
.preference-choice.active {
  background: linear-gradient(145deg, rgba(241,251,245,.98), rgba(227,246,236,.98));
  border-color: rgba(31,178,125,.68);
  box-shadow: 0 16px 32px rgba(13,107,82,.11);
}
.vehicle-icon {
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 16px rgba(12,26,20,.06);
}
.calculation-settings {
  border-color: rgba(214,225,215,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,250,247,.88));
}
.vehicle-autofill {
  border-color: rgba(31,178,125,.18);
  background: linear-gradient(135deg, rgba(242,250,246,.96), rgba(255,255,255,.86));
}
.advanced-settings {
  border-color: rgba(220,228,222,.95);
  background: rgba(255,255,255,.62);
}
.advanced-settings summary {
  min-height: 56px;
  align-items: center;
}
.settings-callout {
  border: 1px solid rgba(205, 220, 232, .9);
  background: linear-gradient(135deg, rgba(239,246,254,.98), rgba(248,252,255,.98));
}
.base-search-progress,
.ultra-search-box {
  border: 1px solid rgba(220,228,222,.96);
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,250,248,.92));
  border-radius: 22px;
}
.base-progress-track,
.ultra-progress-track,
.sync-progress { background: rgba(204,218,208,.64); }
.base-progress-track span,
.ultra-progress-track span,
.sync-progress span { background: linear-gradient(90deg, #0d6b52, #1fb27d, #2d68a9); }

.coverage-strip {
  border-radius: 24px;
  border-color: rgba(217,225,218,.95);
  background: rgba(224,231,225,.82);
  box-shadow: 0 20px 52px rgba(12,26,20,.08);
}
.coverage-strip article,
.coverage-link {
  min-height: 92px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.76));
}
.coverage-icon {
  background: linear-gradient(145deg, rgba(219,242,231,.95), rgba(255,255,255,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 22px rgba(12,26,20,.05);
}
.coverage-link { font-size: .88rem; }

.saved-trips {
  border-color: rgba(220,228,221,.94);
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.66));
  overflow: hidden;
}
.saved-trips::before {
  height: 120px;
  inset: 0 0 auto 0;
  background: radial-gradient(circle at 20% 0%, rgba(31,178,125,.09), transparent 38%), radial-gradient(circle at 85% 0%, rgba(45,104,169,.07), transparent 35%);
}
.saved-trips-column {
  border: 1px solid rgba(226,232,227,.95);
  background: rgba(248,250,248,.72);
}
.saved-trip-card {
  border-radius: 16px;
  border-color: rgba(221,228,223,.94);
  box-shadow: 0 10px 24px rgba(12,26,20,.05);
}
.saved-trip-card.is-favorite {
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(241,251,245,.95));
}
.saved-trip-actions button {
  border-radius: 10px;
  border-color: rgba(212,221,214,.94);
}

.result-hero-card {
  background:
    radial-gradient(circle at 88% 15%, rgba(136,214,255,.17), transparent 18rem),
    radial-gradient(circle at 4% 10%, rgba(67, 209, 143, .18), transparent 18rem),
    linear-gradient(135deg, #0f2a23 0%, #114a39 40%, #0d6b52 72%, #245f8f 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 34px 90px rgba(10,23,18,.24);
}
.result-hero-card::after {
  right: -90px;
  bottom: -135px;
  width: 320px;
  height: 320px;
}
.result-hero-card::before {
  border-radius: 28px;
}
.result-title { max-width: 760px; }
.result-metrics { gap: 12px; }
.metric {
  min-height: 92px;
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
}
.metric.highlight {
  background: linear-gradient(180deg, rgba(215,255,234,.18), rgba(255,255,255,.12));
  border-color: rgba(210,255,232,.24);
}
.recommendation-primary {
  color: #0d6b52;
  border-radius: 14px;
}
.recommendation-secondary { border-radius: 14px; }
.selected-trip-bar {
  border: 1px solid rgba(111,89,168,.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(243,240,252,.95), rgba(255,255,255,.88));
  box-shadow: 0 20px 44px rgba(45,31,83,.10);
}
.selected-trip-bar button {
  border-radius: 12px;
  background: linear-gradient(135deg, #5d3f98, #7750b5);
  box-shadow: 0 12px 22px rgba(93,63,152,.18);
}

.options-panel,
.route-panel,
.method-card {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  border: 1px solid rgba(220,228,221,.95);
  box-shadow: 0 20px 56px rgba(12,26,20,.08);
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.options-panel::before,
.route-panel::before {
  height: 80px;
  inset: 0 0 auto 0;
}
.route-panel { position: sticky; top: 110px; align-self: start; }
.result-tabs {
  background: rgba(245,247,245,.84);
  padding: 6px;
  border: 1px solid rgba(220,228,221,.96);
  border-radius: 16px;
}
.result-tabs button {
  border-radius: 12px;
  font-weight: 850;
}
.result-tabs button.active {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,248,242,.98));
  box-shadow: 0 12px 24px rgba(12,26,20,.06);
}
.route-option {
  border-radius: 18px;
  border-color: rgba(219,227,220,.94);
  box-shadow: 0 10px 24px rgba(12,26,20,.05);
}
.route-option:hover { box-shadow: 0 14px 28px rgba(12,26,20,.08); }
.route-option.selected {
  background: linear-gradient(145deg, rgba(241,251,245,.98), rgba(232,247,239,.98));
  border-color: rgba(31,178,125,.58);
  box-shadow: 0 16px 36px rgba(13,107,82,.10);
}
.option-badge,
.trust-badge,
.map-legend-item,
.source-state,
.reference-badge,
.vehicle-database-badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.route-map {
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(245,248,245,.88), rgba(255,255,255,.72));
  border: 1px solid rgba(220,228,221,.94);
}
.route-map svg {
  border: 1px solid rgba(220,228,221,.94);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(242,248,244,.78));
}
.route-network-line,
.route-visual,
.navigation-block { position: relative; z-index: 1; }
.trip-ready-card {
  border-color: rgba(31,178,125,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,250,246,.95));
}
.trip-ready-check {
  background: linear-gradient(135deg, #0d6b52, #1fb27d);
}
.trip-ready-start {
  border-radius: 14px;
  background: linear-gradient(135deg, #0d6b52, #158662);
}
.trip-quick-actions { gap: 9px; }
.trip-action {
  border-radius: 15px;
  border-color: rgba(216,224,217,.94);
  box-shadow: 0 10px 18px rgba(12,26,20,.04);
}
.trip-action.active {
  background: linear-gradient(145deg, rgba(241,251,245,.98), rgba(232,247,239,.98));
}
.navigation-block { border-color: rgba(220,228,221,.95); }
.nav-button {
  min-height: 46px;
  border-radius: 14px;
  border-color: rgba(217,225,218,.95);
  box-shadow: 0 10px 18px rgba(12,26,20,.04);
}
.nav-button:hover {
  background: rgba(255,255,255,.98);
  box-shadow: 0 14px 26px rgba(12,26,20,.07);
}
.method-card {
  align-items: center;
  border-radius: 22px;
}
.method-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(145deg, rgba(237,244,253,.98), rgba(255,255,255,.98));
  border: 1px solid rgba(204,220,236,.85);
}
.empty-state {
  border-style: solid;
  border-color: rgba(219,227,220,.94);
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.58));
  box-shadow: 0 20px 56px rgba(12,26,20,.08);
}
.empty-illustration {
  background: linear-gradient(145deg, #e9f7ef, #eef4fb);
  border: 1px solid rgba(220,228,221,.94);
}
.footer {
  padding-block: 82px 48px;
  color: #62706a;
}
.footer-brand strong { font-size: 1.08rem; }

.modal-backdrop {
  background: rgba(16, 28, 23, .45);
  backdrop-filter: blur(16px);
}
.modal {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,248,.94));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 34px 100px rgba(12,26,20,.28);
  backdrop-filter: blur(24px);
}
.national-reference-card {
  border-color: rgba(220,228,221,.95);
  background: linear-gradient(135deg, rgba(240,248,243,.96), rgba(240,245,252,.94));
}
.coverage-stat,
.source-row,
.france-map-card,
.reference-copy .ghost-button {
  background: rgba(255,255,255,.82);
}
.close-button { box-shadow: 0 10px 20px rgba(12,26,20,.05); }
.toast {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, #183c31, #0f2d24);
}

@media (max-width: 980px) {
  .topbar {
    top: 10px;
    min-height: 74px;
    padding: 10px 12px;
  }
  .hero {
    gap: 34px;
    padding-top: 46px;
    padding-bottom: 88px;
  }
  .route-panel { position: static; }
}

@media (max-width: 680px) {
  .wrap { width: min(100%, calc(100% - 24px)); }
  .topbar {
    gap: 10px;
    margin-top: 10px;
    border-radius: 20px;
    padding: 10px;
  }
  .brand-mark { width: 46px; height: 46px; }
  .brand-word { font-size: 1.12rem; }
  .hero {
    padding-top: 34px;
    padding-bottom: 74px;
  }
  .eyebrow { padding: 8px 12px; }
  .trust-row span { min-height: 36px; padding-inline: 12px; }
  .search-shell { margin-top: -22px; }
  .search-card,
  .options-panel,
  .route-panel,
  .saved-trips,
  .coverage-strip,
  .result-hero-card,
  .empty-state,
  .modal {
    border-radius: 22px;
  }
  .vehicle-grid,
  .preference-grid,
  .results-grid,
  .saved-trips-grid { gap: 10px; }
  .selected-trip-bar {
    left: 10px;
    right: 10px;
    border-radius: 16px;
  }
  .trip-quick-actions {
    padding: 8px;
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
  }
}

/* V3.13.1 - finition premium, micro-interactions et mobile */
::selection { background: rgba(31,178,125,.22); color: #0f1815; }
:focus-visible { outline: 3px solid rgba(45,104,169,.38); outline-offset: 3px; }

body.premium-ui .brand-mark,
body.premium-ui .visual-card,
body.premium-ui .search-card,
body.premium-ui .route-option,
body.premium-ui .metric,
body.premium-ui .trip-action,
body.premium-ui .nav-button,
body.premium-ui .vehicle-choice,
body.premium-ui .preference-choice {
  will-change: transform;
}

.brand-mark { transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease; }
.brand:hover .brand-mark { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 20px 42px rgba(13,107,82,.32), inset 0 1px 0 rgba(255,255,255,.22); }
.brand-word { transition: letter-spacing .2s ease; }
.brand:hover .brand-word { letter-spacing: -.045em; }

.hero-copy-block { animation: premiumReveal .65s cubic-bezier(.2,.8,.2,1) both; }
.hero-visual { animation: premiumReveal .75s .08s cubic-bezier(.2,.8,.2,1) both; }
.route-demo { animation: premiumFloatA 7s ease-in-out infinite; }
.saving-demo { animation: premiumFloatB 6.2s ease-in-out infinite; }
.visual-orbit.one { animation: premiumOrbit 24s linear infinite; }
.visual-orbit.two { animation: premiumOrbit 18s linear infinite reverse; }
@keyframes premiumReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes premiumFloatA { 0%,100% { transform: rotate(-4deg) translate(-22px,-32px); } 50% { transform: rotate(-2.8deg) translate(-22px,-40px); } }
@keyframes premiumFloatB { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(2.8deg) translateY(-9px); } }
@keyframes premiumOrbit { to { transform: rotate(360deg); } }

.primary-button,
.trip-ready-start,
.selected-trip-bar button,
.ultra-search-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.primary-button::after,
.trip-ready-start::after,
.selected-trip-bar button::after,
.ultra-search-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70%;
  left: -35%;
  width: 26%;
  height: 240%;
  transform: rotate(23deg) translateX(-260%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition: transform .65s ease;
}
.primary-button:hover::after,
.trip-ready-start:hover::after,
.selected-trip-bar button:hover::after,
.ultra-search-button:hover::after { transform: rotate(23deg) translateX(650%); }

.search-card,
.saved-trips,
.options-panel,
.route-panel,
.empty-state,
.coverage-strip { transition: box-shadow .25s ease, border-color .25s ease; }
.search-card:hover { box-shadow: 0 40px 125px rgba(12,26,20,.16); }
.options-panel:hover,
.route-panel:hover,
.saved-trips:hover { border-color: rgba(202,215,204,.98); box-shadow: 0 26px 64px rgba(12,26,20,.10); }

.vehicle-choice,
.preference-choice,
.route-option,
.trip-action,
.nav-button,
.saved-trip-card {
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.vehicle-choice:hover,
.preference-choice:hover { transform: translateY(-3px); }
.route-option:hover { transform: translateY(-2px); }
.trip-action:hover,
.nav-button:hover { transform: translateY(-2px); }
.saved-trip-card:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(12,26,20,.08); }

.route-option.selected {
  position: relative;
  overflow: hidden;
}
.route-option.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 4px;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(180deg, #1fb27d, #2d68a9);
}
.route-option.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.24), transparent 45%);
}

.metric { transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.metric:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.20); }
.metric.highlight:hover { background: rgba(215,255,234,.22); }

.map-legend-item,
.trust-badge,
.option-badge { transition: transform .16s ease, box-shadow .16s ease; }
.map-legend-item:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(12,26,20,.07); }
.map-legend-item.selected { box-shadow: 0 8px 18px rgba(13,107,82,.10); }

.trip-ready-card { overflow: hidden; }
.trip-ready-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #0d6b52, #1fb27d, #2d68a9);
}
.trip-ready-check { animation: premiumCheck 2.8s ease-in-out infinite; }
@keyframes premiumCheck { 0%,100% { box-shadow: 0 7px 16px rgba(22,116,83,.20); } 50% { box-shadow: 0 7px 24px rgba(31,178,125,.34); } }

.base-search-icon,
.ultra-search-icon { box-shadow: 0 10px 24px rgba(13,107,82,.12); }
.progress-live-finding { box-shadow: 0 8px 18px rgba(13,107,82,.08); }

.footer { border-top: 1px solid rgba(205,216,207,.75); margin-top: 70px; }
.footer-brand strong {
  background: linear-gradient(135deg, #0f1815, #0d6b52);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 680px) {
  .topbar { backdrop-filter: blur(18px); }
  .hero h1 { font-size: clamp(2.85rem, 15vw, 4.4rem); }
  .hero-copy { font-size: .98rem; line-height: 1.68; }
  .trust-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .trust-row span { justify-content: flex-start; }
  .search-card { padding-inline: 17px; }
  .result-hero-card { padding-inline: 20px; }
  .result-metrics { grid-template-columns: repeat(2, 1fr); }
  .route-option { padding: 14px 13px 14px 17px; }
  .navigation-buttons { grid-template-columns: 1fr; }
  .nav-button { min-height: 48px; }
  .trip-quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trip-action strong { font-size: .58rem; }
  .footer { margin-top: 48px; padding-top: 42px; }
}

@media (hover: none) {
  .search-card:hover,
  .options-panel:hover,
  .route-panel:hover,
  .saved-trips:hover { box-shadow: inherit; }
  .vehicle-choice:hover,
  .preference-choice:hover,
  .route-option:hover,
  .trip-action:hover,
  .nav-button:hover,
  .saved-trip-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy-block,
  .hero-visual,
  .route-demo,
  .saving-demo,
  .visual-orbit.one,
  .visual-orbit.two,
  .trip-ready-check { animation: none !important; }
  .primary-button::after,
  .trip-ready-start::after,
  .selected-trip-bar button::after,
  .ultra-search-button::after { display: none; }
}

/* V3.14.0 - catalogue véhicule étendu */
.vehicle-catalog-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}
.vehicle-catalog-filters label {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.vehicle-catalog-filters label > span {
  color: var(--muted);
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vehicle-catalog-filters select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 11px;
  border: 1px solid rgba(203, 214, 204, .98);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  outline: none;
  font-size: .67rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.vehicle-catalog-filters select:focus {
  border-color: rgba(31,178,125,.92);
  box-shadow: 0 0 0 4px rgba(31,178,125,.10);
}
.vehicle-catalog-filters select:disabled { opacity: .5; }
.vehicle-catalog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(31,178,125,.13);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(241,250,245,.86), rgba(255,255,255,.72));
}
.vehicle-catalog-meta strong {
  color: var(--green);
  font-size: .59rem;
  font-weight: 900;
}
.vehicle-catalog-meta span {
  color: var(--muted);
  font-size: .55rem;
  line-height: 1.35;
}
.vehicle-suggestion-item { align-items: flex-start; }
.vehicle-suggestion-item.official { border-left: 3px solid rgba(31,178,125,.55); }
.vehicle-suggestion-item.historical { border-left: 3px solid rgba(45,104,169,.48); }
.vehicle-suggestion-side {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 5px;
}
.vehicle-suggestion-side b {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(219,242,231,.9);
  color: var(--green);
  font-size: .46rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vehicle-suggestion-item.historical .vehicle-suggestion-side b {
  background: rgba(237,244,253,.95);
  color: var(--blue);
}
.vehicle-suggestion-side em {
  padding: 5px 7px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: .58rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.vehicle-suggestion-item > span:first-child small {
  white-space: normal;
  line-height: 1.35;
}
@media (max-width: 620px) {
  .vehicle-catalog-filters { grid-template-columns: 1fr 1fr; }
  .vehicle-catalog-filters label:first-child { grid-column: 1 / -1; }
  .vehicle-catalog-meta { align-items: flex-start; flex-direction: column; }
  .vehicle-suggestion-item { gap: 8px; }
}
@media (max-width: 390px) {
  .vehicle-catalog-filters { grid-template-columns: 1fr; }
  .vehicle-catalog-filters label:first-child { grid-column: auto; }
}

/* V3.14.1 - recherche véhicule simplifiée */
.vehicle-search-row-simple {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
.vehicle-search-row-simple .vehicle-search-field > input {
  min-height: 54px;
  padding-left: 16px;
  font-size: .78rem;
}
.vehicle-search-row-simple .vehicle-find-button {
  min-width: 148px;
  min-height: 54px;
  border-color: rgba(31,178,125,.24);
  background: linear-gradient(145deg, rgba(244,252,247,.98), rgba(255,255,255,.94));
  color: var(--green);
  box-shadow: 0 10px 24px rgba(13,107,82,.07);
}
.vehicle-search-row-simple .vehicle-find-button:hover {
  border-color: rgba(31,178,125,.48);
  box-shadow: 0 14px 28px rgba(13,107,82,.11);
}
.vehicle-catalog-meta-simple {
  margin-top: 9px;
  padding: 8px 11px;
  border-color: rgba(31,178,125,.11);
  background: rgba(244,250,246,.72);
}
.vehicle-catalog-meta-simple strong {
  color: var(--ink-soft);
  font-size: .59rem;
}
.vehicle-catalog-meta-simple span {
  font-size: .57rem;
}
@media (max-width: 620px) {
  .vehicle-search-row-simple { grid-template-columns: 1fr; }
  .vehicle-search-row-simple .vehicle-find-button { width: 100%; min-width: 0; min-height: 44px; }
  .vehicle-catalog-meta-simple { display: grid; gap: 3px; }
}

/* V3.15.0 - navigation terrain, confiance, retour et validation */
.trust-badge.confidence {
  min-height: 27px;
  padding-inline: 10px;
  border-color: rgba(34,90,143,.18);
  background: linear-gradient(135deg, rgba(235,244,253,.98), rgba(255,255,255,.94));
  color: #245b91;
  font-weight: 900;
}
.trust-badge.confidence.excellent {
  border-color: rgba(20,142,92,.25);
  background: linear-gradient(135deg, rgba(218,246,231,.98), rgba(246,255,250,.98));
  color: #0e704d;
}
.trust-badge.confidence.high { color: #176b54; background: rgba(230,247,238,.96); }
.trust-badge.confidence.medium { color: #7a5a17; background: rgba(255,247,224,.96); }
.trust-badge.confidence.low { color: #964f32; background: rgba(255,238,230,.96); }
.trust-badge.confirmed { border-color: rgba(107,72,168,.18); background: rgba(243,239,252,.96); color: #63439d; }
.trust-badge.observed { border-color: rgba(13,107,82,.14); background: rgba(242,250,246,.96); color: #315f4d; }
.result-hero-card .trust-badge.confidence,
.result-hero-card .trust-badge.confirmed,
.result-hero-card .trust-badge.observed {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.12);
  color: #f2fff8;
}

.trip-ready-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trip-ready-secondary-actions button {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(13,107,82,.15);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(12,26,20,.05);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.trip-ready-secondary-actions button:hover { transform: translateY(-1px); border-color: rgba(13,107,82,.35); box-shadow: 0 13px 25px rgba(12,26,20,.08); }
.trip-ready-secondary-actions button:disabled { opacity: .6; cursor: wait; transform: none; }
.trip-ready-secondary-actions button span { color: var(--green); font-size: 1rem; font-weight: 900; }
.trip-ready-secondary-actions button strong { font-size: .64rem; line-height: 1.25; }

.locked-navigation-panel {
  position: relative;
  display: grid;
  gap: 13px;
  margin: 16px 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(45,104,169,.17);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45,104,169,.10), transparent 13rem),
    linear-gradient(145deg, rgba(244,249,254,.96), rgba(255,255,255,.92));
  box-shadow: 0 16px 36px rgba(22,54,86,.08);
}
.locked-navigation-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%);
}
.locked-navigation-head,
.locked-navigation-actions,
.locked-step-list { position: relative; z-index: 1; }
.locked-navigation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.locked-navigation-head > div { display: grid; gap: 3px; }
.locked-navigation-head strong { font: 850 .92rem var(--font-display); letter-spacing: -.02em; }
.locked-navigation-head small { color: var(--muted); font-size: .61rem; line-height: 1.45; }
.locked-navigation-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(45,104,169,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: var(--blue);
  font-size: .56rem;
  font-weight: 900;
}
.locked-navigation-actions { display: grid; grid-template-columns: 1.3fr .7fr .9fr; gap: 7px; }
.locked-navigation-actions a,
.locked-navigation-actions button {
  min-height: 44px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(205,218,230,.95);
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(22,54,86,.05);
}
.locked-navigation-actions .locked-navigation-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #245f99, #2d78bc);
  color: white;
  box-shadow: 0 12px 24px rgba(45,104,169,.20);
}
.locked-navigation-actions span { font: 900 .62rem var(--font-display); }
.locked-navigation-actions strong { font-size: .6rem; }
.locked-step-list { display: grid; gap: 6px; }
.locked-step-item {
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(214,225,235,.92);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}
.locked-step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue);
  font: 900 .68rem var(--font-display);
}
.locked-step-copy { min-width: 0; display: grid; gap: 2px; }
.locked-step-copy strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.locked-step-copy small { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.locked-step-links { display: flex; gap: 5px; }
.locked-step-links a {
  min-height: 29px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(206,219,230,.94);
  border-radius: 9px;
  background: white;
  color: #356b9b;
  font-size: .55rem;
  font-weight: 900;
  text-decoration: none;
}

.round-trip-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(107,72,168,.17);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(246,243,253,.96), rgba(255,255,255,.94));
  box-shadow: 0 13px 28px rgba(68,45,112,.08);
}
.round-trip-loading { min-height: 68px; display: flex; align-items: center; gap: 12px; }
.round-trip-loading > span {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 3px solid rgba(107,72,168,.18);
  border-top-color: #6b48a8;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.round-trip-loading div { display: grid; gap: 3px; }
.round-trip-loading strong { font-size: .72rem; }
.round-trip-loading small { color: var(--muted); font-size: .58rem; line-height: 1.4; }
.round-trip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.round-trip-head > div { display: grid; gap: 3px; }
.round-trip-head strong { font: 850 .76rem var(--font-display); }
.round-trip-saving { padding: 6px 8px; border-radius: 999px; background: rgba(107,72,168,.10); color: #63439d; font-size: .55rem; font-weight: 900; }
.round-trip-table { overflow: hidden; border: 1px solid rgba(219,214,231,.92); border-radius: 12px; background: rgba(255,255,255,.75); }
.round-trip-row { min-height: 34px; display: grid; grid-template-columns: 1.2fr .8fr .8fr; align-items: center; gap: 7px; padding: 6px 9px; border-bottom: 1px solid rgba(228,224,235,.84); }
.round-trip-row:last-child { border-bottom: 0; }
.round-trip-row.heading { background: rgba(241,238,249,.84); }
.round-trip-row.total { background: rgba(234,247,240,.84); }
.round-trip-row span { color: var(--muted); font-size: .55rem; }
.round-trip-row strong { text-align: right; font: 800 .61rem var(--font-display); }
.round-trip-row strong:last-child { color: var(--green); }
.round-trip-start {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5e4098, #7954b5);
  color: white;
  text-decoration: none;
  box-shadow: 0 11px 22px rgba(94,64,152,.17);
}
.round-trip-start span { font-size: .65rem; font-weight: 900; }
.round-trip-start small { color: rgba(255,255,255,.78); font-size: .53rem; text-align: right; }

.trip-feedback-modal { width: min(590px, 100%); }
.trip-feedback-intro { margin: -8px 0 16px; color: var(--ink-soft); font-size: .76rem; line-height: 1.6; }
.trip-feedback-route {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(13,107,82,.14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(240,249,244,.96), rgba(255,255,255,.92));
}
.trip-feedback-route strong { font: 850 .77rem var(--font-display); }
.trip-feedback-route span { color: var(--muted); font-size: .62rem; line-height: 1.45; }
.trip-feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.trip-feedback-wide { grid-column: 1 / -1; }
.trip-feedback-grid select { width: 100%; min-height: 55px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 15px; background: #fbfcfa; color: var(--ink); outline: none; }
.trip-feedback-grid select:focus { border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(32,162,113,.10); }
.trip-feedback-note { margin-top: 14px; padding: 11px 12px; border-radius: 12px; background: var(--blue-soft); color: #42637f; font-size: .62rem; line-height: 1.5; }

@media (max-width: 680px) {
  .trip-ready-secondary-actions { grid-template-columns: 1fr; }
  .locked-navigation-actions { grid-template-columns: 1fr 1fr; }
  .locked-navigation-actions .locked-navigation-primary { grid-column: 1 / -1; }
  .locked-navigation-head { display: grid; }
  .locked-navigation-status { justify-self: start; }
  .locked-step-item { grid-template-columns: 28px minmax(0,1fr); }
  .locked-step-links { grid-column: 2; }
  .round-trip-head { display: grid; }
  .round-trip-saving { justify-self: start; }
  .round-trip-start { align-items: flex-start; flex-direction: column; gap: 3px; }
  .round-trip-start small { text-align: left; }
  .trip-feedback-grid { grid-template-columns: 1fr; }
  .trip-feedback-wide { grid-column: auto; }
}

/* V3.15.1 - alignement des champs carburant et consommation */
.settings-grid-essential {
  align-items: start;
}
.settings-grid-essential > .field {
  align-self: start;
  align-content: start;
}

/* V3.19.0 - couverture nationale par installations physiques */
.map-dot.direct { fill: var(--green); opacity: .82; }
.map-dot.network { fill: var(--blue); opacity: .48; }
.map-dot.unmapped { fill: #a8b2ac; opacity: .24; }
.coverage-stat small { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.coverage-summary .coverage-wide {
  grid-column: 1 / -1;
  margin: 2px 2px 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.coverage-summary .coverage-wide strong { color: var(--ink-soft); }


/* V3.19.4 - autocompletion dans le flux, sans chevauchement */
.auto-route-fields {
  align-items: start;
}
.autocomplete-field {
  align-content: start;
  min-width: 0;
  z-index: auto;
}
.autocomplete-field:focus-within,
.autocomplete-field:focus-within .location-input-shell {
  z-index: auto;
}
.location-suggestions {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  max-height: 265px;
  margin-top: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(205, 218, 208, .98);
  box-shadow: 0 16px 34px rgba(12, 26, 20, .11);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.location-suggestion {
  background: #ffffff;
}
.location-suggestion + .location-suggestion {
  border-top: 1px solid rgba(222, 230, 224, .72);
}
.location-suggestion:hover,
.location-suggestion.active {
  background: var(--green-pale);
}
.vehicle-section {
  position: relative;
  z-index: 1;
}
@media (max-width: 680px) {
  .location-suggestions {
    max-height: 230px;
  }
}

/* V3.21.1 — une optimisation moins chère en péage mais plus chère au total
   doit être impossible à confondre avec une économie réelle. */
.route-option.not-profitable {
  border-color: rgba(194,65,12,.34);
  background: linear-gradient(135deg, rgba(255,247,237,.98), rgba(255,251,235,.92));
}
.route-option.not-profitable:hover { border-color: rgba(194,65,12,.58); }
.route-option.not-profitable .option-decision {
  color: #9a3412;
  background: rgba(251,146,60,.12);
}
.option-saving.negative,
.route-option.not-profitable .option-saving { color: #b42318; }
.comparison-panel.cost-warning {
  border-color: rgba(194,65,12,.30);
  background: linear-gradient(135deg, rgba(255,247,237,.94), rgba(255,251,235,.92));
}
.comparison-panel.cost-warning .compare-saving,
.comparison-panel.cost-warning .compare-deltas strong { color: #b42318; }


/* V3.21.2 — expliquer chaque euro économisé, sans calcul mental. */
.saving-explanation {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 16px;
  border-radius: 17px;
  border: 1px solid rgba(22,116,83,.18);
  background: linear-gradient(135deg, rgba(240,250,245,.96), rgba(247,252,249,.98));
  color: var(--ink);
}
.saving-explanation.negative {
  border-color: rgba(194,65,12,.26);
  background: linear-gradient(135deg, rgba(255,247,237,.97), rgba(255,251,235,.95));
}
.saving-explanation.in-result-hero {
  margin-top: 12px;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: white;
  backdrop-filter: blur(10px);
}
.saving-explanation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.saving-explanation-head > div { display: grid; gap: 3px; }
.saving-explanation-head span { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.saving-explanation-head strong { font: 800 1.03rem var(--font-display); }
.saving-explanation-head em { padding: 6px 9px; border-radius: 999px; background: white; color: var(--ink-soft); font-size: .65rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.saving-explanation.in-result-hero .saving-explanation-head span { color: #c3d8cd; }
.saving-explanation.in-result-hero .saving-explanation-head em { background: rgba(255,255,255,.13); color: white; }
.saving-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.saving-reasons > span { min-height: 68px; display: grid; align-content: center; gap: 3px; padding: 10px 11px; border-radius: 12px; background: white; border: 1px solid rgba(22,116,83,.10); }
.saving-reasons b { color: var(--green); font-size: .75rem; line-height: 1.35; }
.saving-reasons small { color: var(--muted); font-size: .61rem; }
.saving-explanation.negative .saving-reasons b { color: #b42318; }
.saving-explanation.in-result-hero .saving-reasons > span { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.13); }
.saving-explanation.in-result-hero .saving-reasons b { color: #effff6; }
.saving-explanation.in-result-hero .saving-reasons small { color: #c3d8cd; }
.cost-comparison-table { margin-top: 12px; overflow: hidden; border-radius: 12px; border: 1px solid rgba(22,116,83,.12); background: rgba(255,255,255,.88); }
.cost-table-row { display: grid; grid-template-columns: 1.1fr .8fr .8fr; align-items: center; min-height: 36px; padding: 0 11px; border-top: 1px solid rgba(22,116,83,.08); font-size: .68rem; }
.cost-table-row:first-child { border-top: 0; }
.cost-table-row span { color: var(--muted); }
.cost-table-row b, .cost-table-row strong { text-align: right; }
.cost-table-row.cost-table-head { min-height: 38px; background: rgba(22,116,83,.06); }
.cost-table-row.cost-table-head strong { color: var(--ink-soft); font-size: .64rem; }
.cost-table-row.total { background: rgba(22,116,83,.07); font-weight: 850; }
.cost-table-row.total b:last-child { color: var(--green); }
.saving-explanation.in-result-hero .cost-comparison-table { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.10); }
.saving-explanation.in-result-hero .cost-table-row { border-top-color: rgba(255,255,255,.10); }
.saving-explanation.in-result-hero .cost-table-row.cost-table-head,
.saving-explanation.in-result-hero .cost-table-row.total { background: rgba(255,255,255,.08); }
.saving-explanation.in-result-hero .cost-table-row span,
.saving-explanation.in-result-hero .cost-table-row.cost-table-head strong { color: #c3d8cd; }
.saving-explanation.in-result-hero .cost-table-row.total b:last-child { color: #d7ffea; }
.saving-formula { margin-top: 10px; color: var(--muted); font-size: .69rem; text-align: right; }
.saving-formula strong { color: var(--green); }
.saving-explanation.in-result-hero .saving-formula { color: #c3d8cd; }
.saving-explanation.in-result-hero .saving-formula strong { color: #e7fff3; }
.route-option .option-saving { font-size: .76rem; }
@media (max-width: 680px) {
  .saving-explanation-head { display: grid; }
  .saving-explanation-head em { justify-self: start; white-space: normal; }
  .saving-reasons { grid-template-columns: 1fr; }
  .saving-reasons > span { min-height: 56px; }
  .cost-table-row { grid-template-columns: 1fr .82fr .82fr; padding-inline: 8px; }
  .saving-formula { text-align: left; line-height: 1.45; }
}


/* V3.21.2 — ne jamais classer financièrement un tracé dont le péage manque. */
.unpriced-comparison-notice {
  display: grid;
  gap: 9px;
  padding: 17px 18px;
  border: 1px solid rgba(180,83,9,.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,251,235,.98), rgba(255,247,237,.96));
}
.unpriced-comparison-notice > div { display: grid; gap: 3px; }
.unpriced-comparison-notice span { color: #92400e; font-size: .65rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.unpriced-comparison-notice strong { color: #7c2d12; font: 800 1rem var(--font-display); }
.unpriced-comparison-notice p { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.55; }
.unpriced-comparison-notice p b { color: var(--ink); }
.comparison-panel.cost-pending { border-color: rgba(180,83,9,.18); }
.route-option .option-saving:not(.negative) { line-height: 1.4; }


/* V3.22.1 — bloc de comparaison compact, sans collision avec le héros de la page. */
.saving-explanation.in-result-hero {
  min-height: 0;
  width: 100%;
  margin-top: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(390px, 1.22fr);
  grid-template-areas:
    "saving-head saving-table"
    "saving-reasons saving-table"
    "saving-formula saving-formula";
  gap: 12px 18px;
  align-items: start;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.115), rgba(255,255,255,.075));
  color: white;
  backdrop-filter: blur(10px);
}
.saving-explanation.in-result-hero .saving-explanation-head {
  grid-area: saving-head;
  min-width: 0;
}
.saving-explanation.in-result-hero .saving-reasons {
  grid-area: saving-reasons;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.saving-explanation.in-result-hero .saving-reasons > span {
  min-height: 62px;
}
.saving-explanation.in-result-hero .cost-comparison-table {
  grid-area: saving-table;
  width: 100%;
  margin-top: 0;
  align-self: stretch;
}
.saving-explanation.in-result-hero .saving-formula {
  grid-area: saving-formula;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: right;
}
@media (max-width: 920px) {
  .saving-explanation.in-result-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "saving-head"
      "saving-reasons"
      "saving-table"
      "saving-formula";
  }
}
@media (max-width: 560px) {
  .saving-explanation.in-result-hero { padding: 15px; gap: 10px; }
  .saving-explanation.in-result-hero .saving-reasons { grid-template-columns: 1fr; }
  .saving-explanation.in-result-hero .saving-reasons > span { min-height: 52px; }
  .saving-explanation.in-result-hero .saving-formula { text-align: left; }
}

/* V3.22.18 — vraie expérience mobile-first */
.mobile-cost-toggle,
.mobile-action-dock { display: none; }

@media (max-width: 720px) {
  :root {
    --mobile-gap: 10px;
    --mobile-radius: 18px;
  }
  html { scroll-padding-top: 86px; }
  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #f8faf6 0%, #f1f5ef 100%);
  }
  body.premium-ui::before,
  .page-noise { display: none !important; }
  button, input, select { touch-action: manipulation; }
  input, select, textarea { font-size: 16px !important; }
  .wrap { width: calc(100% - 16px); }

  .topbar {
    position: sticky !important;
    top: max(8px, env(safe-area-inset-top));
    z-index: 80 !important;
    width: calc(100% - 16px);
    min-height: 60px;
    height: 60px;
    margin-top: 8px;
    padding: 7px 8px !important;
    border-radius: 17px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(210,222,213,.96);
    box-shadow: 0 10px 30px rgba(20,45,32,.10);
    backdrop-filter: none !important;
  }
  .brand { gap: 8px; min-width: 0; }
  .brand-mark { width: 40px !important; height: 40px !important; border-radius: 13px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .brand-word { font-size: 1rem !important; white-space: nowrap; }
  .top-actions { gap: 6px; }
  .data-pill, .icon-button {
    width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    padding: 0; justify-content: center; border-radius: 13px;
    box-shadow: none; background: #f8faf7;
  }
  .data-pill #dataPillText { display: none; }
  .icon-button svg { width: 18px; height: 18px; }

  .hero {
    display: block;
    min-height: 0;
    padding: 27px 5px 46px;
  }
  .hero-copy-block { max-width: none; }
  .eyebrow { margin-bottom: 14px; padding: 7px 10px !important; font-size: .63rem; }
  .eyebrow-dot { width: 7px; height: 7px; }
  .hero h1 {
    max-width: 350px;
    font-size: clamp(2.35rem, 12.5vw, 3.45rem) !important;
    line-height: .98;
    letter-spacing: -.058em;
  }
  .hero-copy {
    margin-top: 17px;
    font-size: .91rem !important;
    line-height: 1.55 !important;
  }
  .trust-row {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 18px -3px 0;
    padding: 2px 3px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .trust-row::-webkit-scrollbar,
  .vehicle-grid::-webkit-scrollbar,
  .preference-grid::-webkit-scrollbar,
  .coverage-strip::-webkit-scrollbar { display: none; }
  .trust-row span {
    flex: 0 0 auto;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    font-size: .68rem;
    scroll-snap-align: start;
  }

  .search-shell { margin-top: -22px; }
  .search-card {
    padding: 16px 12px 14px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.97);
    box-shadow: 0 16px 42px rgba(24,55,39,.12);
    backdrop-filter: none !important;
  }
  .search-head { align-items: center; gap: 10px; margin-bottom: 18px; }
  .search-head h2 { margin-top: 5px; font-size: 1.18rem !important; line-height: 1.2; }
  .search-head .section-kicker { font-size: .61rem; }
  #swapButton {
    width: 44px; min-width: 44px; height: 44px; padding: 0;
    display: grid; place-items: center; font-size: 0;
  }
  #swapButton svg { width: 20px; height: 20px; }

  .auto-route-fields { gap: 9px !important; }
  .auto-route-fields .route-link { display: none !important; }
  .location-input-shell,
  .field input, .field select, .unit-input { border-radius: 14px; }
  .field input, .field select, .unit-input { min-height: 52px; }
  .location-field label { font-size: .72rem; }
  .location-input-shell input { padding-right: 49px; }
  .geo-button { width: 42px; min-width: 42px; padding: 0; }
  .geo-button span { display: none; }
  .location-status { min-height: 15px; font-size: .62rem; }
  .location-suggestions {
    max-height: 245px !important;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(18,40,29,.14);
  }
  .location-suggestion { min-height: 54px; padding: 10px 11px; }

  .vehicle-section { margin-top: 18px; }
  .vehicle-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    margin: 9px -2px 0;
    padding: 2px 2px 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .vehicle-choice,
  .vehicle-choice:last-child {
    grid-column: auto !important;
    flex: 0 0 105px;
    min-width: 105px;
    min-height: 82px;
    padding: 10px 8px;
    gap: 1px;
    border-radius: 15px;
    scroll-snap-align: start;
  }
  .vehicle-choice .vehicle-icon { font-size: 1.3rem; }
  .vehicle-choice strong { font-size: .72rem; }
  .vehicle-choice small { font-size: .59rem; }

  .mobile-cost-toggle {
    width: 100%; min-height: 58px;
    margin-top: 15px; padding: 10px 13px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid rgba(22,116,83,.18); border-radius: 16px;
    background: linear-gradient(135deg, #f2faf6, #f8fbf9);
    color: var(--ink); text-align: left; cursor: pointer;
  }
  .mobile-cost-toggle > span { display: grid; gap: 2px; }
  .mobile-cost-toggle strong { font: 800 .78rem var(--font-display); }
  .mobile-cost-toggle small { color: var(--muted); font-size: .62rem; }
  .mobile-cost-toggle i {
    width: 10px; height: 10px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
    transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
  }
  .mobile-cost-toggle.active i { transform: rotate(225deg) translate(-2px,-2px); }
  .calculation-settings.mobile-collapsed { display: none !important; }
  .calculation-settings {
    margin-top: 9px !important;
    padding: 13px 10px !important;
    border-radius: 16px !important;
    background: #f8faf7;
    box-shadow: none !important;
    transform: none !important;
  }
  .calculation-settings-head { align-items: start; gap: 8px; margin-bottom: 12px; }
  .calculation-settings-head h3 { font-size: .9rem; }
  .calculation-settings-head p { max-width: 210px !important; font-size: .61rem; }
  .calculation-settings-head #saveSettingsButton { padding-inline: 10px; }
  .vehicle-autofill { padding: 11px !important; border-radius: 14px; }
  .vehicle-autofill-heading { align-items: flex-start !important; gap: 8px; }
  .vehicle-autofill-heading strong { font-size: .69rem; }
  .vehicle-database-badge { font-size: .48rem !important; }
  .vehicle-search-row-simple { grid-template-columns: 1fr !important; }
  .vehicle-search-row-simple .vehicle-find-button { min-height: 46px !important; }
  .settings-grid { gap: 10px; }
  .advanced-settings summary { min-height: 48px; }
  .settings-callout { font-size: .62rem !important; }

  .preference-section { margin-top: 18px; }
  .preference-heading { display: grid; gap: 6px; }
  .preference-heading > span { justify-self: start; text-align: left; font-size: .61rem; }
  .preference-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    margin: 10px -2px 0;
    padding: 2px 2px 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .preference-choice {
    flex: 0 0 174px;
    min-width: 174px;
    min-height: 76px;
    padding: 10px 11px;
    border-radius: 15px;
    scroll-snap-align: start;
  }
  .preference-choice > span { font-size: 1.05rem; }
  .preference-choice strong { font-size: .72rem; }
  .preference-choice small { font-size: .6rem; }

  .search-footer { margin-top: 17px; }
  .search-footer .form-note { display: none; }
  .primary-button { min-height: 56px; border-radius: 16px; }
  .base-search-progress { margin-top: 12px; padding: 13px 11px; border-radius: 15px; }
  .base-progress-steps { font-size: .52rem; }

  .saved-trips { margin-top: 18px; padding: 17px 12px; }
  .saved-trips-head { display: grid; gap: 10px; }
  .saved-trips-head > button { justify-self: start; }
  .saved-trip-card { padding: 12px; }

  .coverage-strip {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    margin-top: 14px;
    padding: 2px 0 8px;
    overflow-x: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    scroll-snap-type: x mandatory;
  }
  .coverage-strip article,
  .coverage-strip .coverage-link {
    flex: 0 0 208px;
    min-width: 208px;
    min-height: 70px !important;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(24,55,39,.06);
    scroll-snap-align: start;
  }
  .coverage-strip article strong { font-size: 1.05rem; }
  .coverage-strip article small { font-size: .62rem; }
  .coverage-link { justify-content: center; }

  .results { margin-top: 16px; }
  .result-hero-card { padding: 18px 14px !important; border-radius: 20px !important; }
  .result-hero-card::after { display: none; }
  .result-top { gap: 10px; }
  .result-price strong { font-size: 2rem; }
  .result-metrics {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    margin: 14px -2px 0;
    padding: 2px 2px 5px;
    overflow-x: auto;
  }
  .result-metrics > div { flex: 0 0 132px; min-width: 132px; }
  .options-panel, .route-panel { padding: 15px 11px !important; border-radius: 20px !important; }
  .panel-heading h2 { font-size: 1.08rem; }
  .result-tabs { overflow-x: auto; white-space: nowrap; }
  .result-tabs button { min-width: 150px; }
  .route-option { padding: 13px 11px 13px 15px !important; border-radius: 15px; }
  .option-top { gap: 8px; }
  .option-metrics { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .option-details, .option-saving { grid-column: 1 / -1; }
  .selected-trip-bar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .trip-ready-metrics { grid-template-columns: repeat(2, 1fr); }
  .trip-quick-actions { gap: 6px; }
  .trip-action { min-height: 56px; padding: 8px 5px; }
  .trip-action strong { font-size: .54rem !important; }
  .navigation-buttons { gap: 8px; }

  .empty-state { margin-top: 15px; padding: 18px 14px !important; border-radius: 20px !important; }
  .empty-illustration { height: 112px !important; }
  .empty-state h2 { font-size: 1.18rem; }
  .empty-state p { font-size: .73rem; line-height: 1.55; }

  .footer { margin-top: 30px; padding: 30px 4px 24px; gap: 12px; }
  .footer p { font-size: .68rem; line-height: 1.5; }

  .modal-backdrop {
    padding: 0 !important;
    align-items: end !important;
    background: rgba(11,24,18,.48);
    backdrop-filter: none !important;
  }
  .modal {
    width: 100% !important;
    max-height: calc(96dvh - env(safe-area-inset-top));
    padding: 17px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0;
    backdrop-filter: none !important;
  }
  .modal-head { position: sticky; top: -17px; z-index: 4; margin: -17px -12px 14px; padding: 16px 12px 11px; background: rgba(250,252,250,.97); border-bottom: 1px solid var(--line); }
  .modal-head h2 { font-size: 1.22rem; }
  .close-button { width: 42px; height: 42px; }
  .national-reference-card { padding: 13px; }
  .france-map-card { display: none; }
  .coverage-summary { grid-template-columns: 1fr 1fr !important; gap: 7px; }
  .coverage-stat { padding: 11px; }
  .coverage-summary .coverage-wide { grid-column: 1 / -1; padding: 11px; font-size: .64rem; }
  .source-row { padding: 11px; gap: 7px; }
  .source-name { font-size: .72rem; }
  .source-meta { font-size: .59rem; }
  .modal-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); z-index: 5; margin: 16px -12px -18px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(250,252,250,.97); border-top: 1px solid var(--line); }

  .toast-region { right: 8px; bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100% - 16px); }

  .mobile-action-dock {
    position: fixed;
    left: 8px; right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 90;
    display: block;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 19px;
    background: rgba(247,250,247,.96);
    box-shadow: 0 16px 42px rgba(9,35,22,.24);
    transform: translateY(calc(120% + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .mobile-action-dock.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-action-dock button {
    width: 100%; min-height: 58px;
    display: grid; place-items: center; gap: 1px;
    border: 0; border-radius: 14px;
    background: linear-gradient(135deg, #0d6b52, #15956c);
    color: white; box-shadow: 0 8px 22px rgba(13,107,82,.25); cursor: pointer;
  }
  .mobile-action-dock span { font: 800 .82rem var(--font-display); }
  .mobile-action-dock small { color: rgba(255,255,255,.78); font-size: .57rem; }
}

@media (max-width: 390px) {
  .brand-word { font-size: .92rem !important; }
  .guide-button { display: none; }
  .hero h1 { font-size: 2.32rem !important; }
  .search-head h2 { font-size: 1.08rem !important; }
  .vehicle-choice { flex-basis: 96px; min-width: 96px; }
  .preference-choice { flex-basis: 158px; min-width: 158px; }
  .coverage-strip article, .coverage-strip .coverage-link { flex-basis: 188px; min-width: 188px; }
  .coverage-summary { grid-template-columns: 1fr !important; }
  .coverage-summary .coverage-wide { grid-column: auto; }
}

@media (max-width: 720px) and (orientation: landscape) {
  .hero { padding-top: 18px; padding-bottom: 38px; }
  .hero-copy { max-width: 720px; }
  .modal { max-height: 94dvh; }
}


/* V3.22.19 — garde anti-gel mobile pendant la saisie et le clavier virtuel */
@media (max-width: 720px) {
  .route-fields.auto-route-fields { overflow: visible; isolation: isolate; }
  .autocomplete-field { position: relative; z-index: 2; }
  .autocomplete-field:focus-within { z-index: 400; }
  .autocomplete-field:focus-within .location-suggestions { z-index: 500; }
  .location-suggestions {
    top: calc(100% + 4px);
    max-height: min(38dvh, 280px) !important;
    background: #fff;
    contain: content;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .location-suggestion { touch-action: manipulation; }
  body.keyboard-active { overscroll-behavior-y: contain; }
  body.keyboard-active .topbar { position: relative !important; top: auto !important; }
  body.keyboard-active .topbar,
  body.keyboard-active .hero-copy-block,
  body.keyboard-active .search-card,
  body.keyboard-active .mobile-action-dock { transition: none !important; }
  body.keyboard-active .mobile-action-dock { display: none !important; }
  body.keyboard-active .trust-row,
  body.keyboard-active .vehicle-grid,
  body.keyboard-active .preference-grid { scroll-snap-type: none !important; }
  button, a, summary { touch-action: manipulation; }
  input, select, textarea { touch-action: auto; }
}