:root {
  color-scheme: light;
  --paper: #f4f6f2;
  --paper-deep: #e7eae3;
  --ink: #0e1512;
  --muted: #4c5854;
  --line: #c6cfc8;
  --white: #ffffff;
  --green: #1e2a26;
  --green-deep: #131c19;
  --lime: #c8ff47;
  --orange: #ff5d38;
  --sand: #c8cec9;
  --shadow: 0 12px 34px rgba(4, 31, 24, .1);
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;

  /* Formes — la direction artistique fixe 6 px pour les commandes et 8 px pour
     les surfaces. La feuille avait dérivé vers vingt et un rayons différents,
     de 2 à 24 px : ces jetons ramènent tout à quatre valeurs, les mêmes que
     l'application iPhone. */
  --r-xs: 6px;      /* jauges, filets, marqueurs internes */
  --r-button: 12px;  /* toute commande cliquable */
  --r-card: 14px;    /* cartes, panneaux, lignes de liste */
  --r-sheet: 16px;  /* surfaces flottantes : dialogues, menus, popups */
  --r-pill: 999px;  /* badges de comptage uniquement */

  /* Hauteurs de contrôle — trois tailles au lieu de dix. */
  --h-control: 50px;     /* taille par défaut, cible tactile confortable */
  --h-control-sm: 44px;  /* commandes secondaires dans une ligne dense */
  --h-control-lg: 52px;  /* action principale d'un écran */

  /* Élévation — réservée à ce qui flotte réellement au-dessus du contenu. */
  --elevation-raised: 0 2px 6px rgba(16, 25, 23, .07);
  --elevation-floating: 0 14px 38px rgba(9, 29, 23, .18);
  --elevation-modal: 0 30px 90px rgba(9, 29, 23, .3);

  /* Espacements et alias de couleur.
     Des blocs entiers de la feuille étaient écrits avec ces noms sans qu'ils
     n'existent nulle part. Une déclaration qui appelle une variable inconnue
     est invalide : le navigateur la jette en silence. Le sélecteur de mode
     « Aventure / Sportif » demandait ainsi une bordure, une gouttière et du
     rembourrage, et n'obtenait rien — deux lignes nues collées l'une à
     l'autre. Les définir ici répare d'un coup tout ce qui les appelle. */
  /* Rythme 4 / 8 — la même échelle que RB.Space côté iPhone. */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  /* Mouvement — la transposition de RB.Motion. Quatre courbes, pas une de
     plus, pour que le site bouge partout de la même façon que l'iPhone. Un
     mouvement dit d'où vient un élément et où il va ; il reste court et ne
     retarde jamais une action. Les ressorts de SwiftUI sont approchés par des
     courbes à très léger dépassement — l'amortissement y est de 0,84 à 0,86,
     le rebond est donc à peine perceptible. */
  --motion-quick: 180ms;      /* sélection, appui, bascule d'état */
  --motion-standard: 260ms;   /* carte qui apparaît, panneau qui change */
  --motion-screen: 340ms;     /* arrivée d'un écran ou d'une feuille */
  --motion-progress: 250ms;   /* progressions continues, sans rebond */
  --ease-spring: cubic-bezier(.32, 1.06, .42, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --stagger-step: 35ms;       /* décalage entre deux voisines d'une liste */
  --stagger-cap: 280ms;       /* plafond : la dernière n'attend jamais 1 s */
  --separator: #e1e6df;
  --secondary: var(--muted);
  --line-strong: #a9b6af;   /* filet plus marqué que --line, pour une case à cocher */
  --alert: var(--orange);
  --lime-soft: #eef8d8;

  /* Repris des blocs qui redéfinissaient la palette plus bas. */
  --blue: #2586c8;
  --signal-gradient: linear-gradient(90deg, var(--lime) 0 58%, var(--orange) 58% 72%, var(--green-deep) 72%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(16, 25, 23, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 25, 23, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }
button, a, label, input, select { touch-action: manipulation; }

.app-shell { width: min(1180px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 28px 80px; }

.topbar {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
  .brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: var(--r-xs); color: var(--ink); background: var(--lime); font-family: var(--font-data); font-size: 11px; font-weight: 800; }
.topbar-actions { display: flex; gap: 8px; }
.icon-button { display: grid; width: 40px; height: 40px; padding: 10px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: var(--motion-quick) ease; }
.icon-button:hover { background: var(--white); transform: rotate(5deg); }
.icon-button svg, .drop-icon svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hero { max-width: 850px; margin: 0 auto; padding: 11vh 0 6vh; text-align: center; }
.hero-copy { margin: 0 auto 50px; }
.eyebrow { margin: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { text-wrap: balance; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.035em; }
.hero h1 { font-size: clamp(48px, 8vw, 88px); line-height: .94; }
.hero h1 em { color: var(--green); font-weight: 400; }
.hero-lede { max-width: 590px; margin: 30px auto 0; color: var(--muted); font-size: 17px; line-height: 1.65; }

.drop-zone { position: relative; display: flex; min-height: 220px; padding: 32px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; overflow: hidden; border: 1px dashed rgba(24, 53, 46, .35); border-radius: var(--r-sheet); background: rgba(255, 253, 248, .55); box-shadow: inset 0 0 0 7px rgba(255,255,255,.23); cursor: pointer; transition: var(--motion-standard) ease; }
.drop-zone::after { content: "GPX"; position: absolute; right: -5px; bottom: -31px; color: rgba(24, 53, 46, .035); font: 700 132px/1 Georgia, serif; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--green); background: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone strong { font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.drop-zone > span:not(.drop-icon) { color: var(--muted); font-size: 14px; }
.drop-icon { display: grid; width: 48px; height: 48px; margin-bottom: 8px; padding: 13px; place-items: center; border-radius: 50%; color: var(--white); background: var(--green); }
.text-button, .inline-link { border: 0; background: transparent; cursor: pointer; }
.text-button { margin-top: 26px; padding: 10px; font-weight: 720; }
.text-button span, .inline-link span { display: inline-block; margin-left: 5px; transition: transform var(--motion-quick) ease; }
.text-button:hover span, .inline-link:hover span { transform: translateX(4px); }
.privacy-note { margin: 9px 0 0; color: var(--muted); font-size: 12px; }

.route-view { padding-top: 62px; }
.route-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.route-heading h1 { max-width: 710px; font-size: clamp(42px, 6vw, 66px); line-height: 1; }
.preference-label { margin-top: 13px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; text-decoration: underline; text-decoration-color: rgba(24,53,46,.22); text-underline-offset: 4px; cursor: pointer; }
.primary-button, .secondary-button { display: inline-flex; min-height: 44px; padding: 0 18px; align-items: center; justify-content: center; gap: 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 780; cursor: pointer; transition: var(--motion-quick) ease; }
.primary-button { border: 1px solid var(--green); color: var(--white); background: var(--green); }
.primary-button:hover { background: var(--green-deep); transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: rgba(255,253,248,.55); }
.secondary-button:hover { border-color: rgba(24,53,46,.4); background: var(--white); }
.button-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(199,238,118,.15); }
.mode-switch { display: flex; flex-shrink: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(255,255,255,.35); }
.mode-button { padding: 10px 16px; border: 0; border-radius: var(--r-pill); color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
.mode-button.is-active { color: var(--white); background: var(--green); }

.section-tabs { display: flex; gap: 24px; margin: 46px 0 24px; border-bottom: 1px solid var(--line); }
.tab-button { position: relative; padding: 0 2px 14px; border: 0; color: var(--muted); background: transparent; font-size: 13px; font-weight: 760; cursor: pointer; }
.tab-button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; transform: scaleX(0); background: var(--ink); transition: transform var(--motion-quick) ease; }
.tab-button.is-active { color: var(--ink); }
.tab-button.is-active::after { transform: scaleX(1); }

.card { border: 1px solid rgba(24, 53, 46, .10); border-radius: var(--r-sheet); background: rgba(255, 253, 248, .75); box-shadow: var(--shadow); }
.route-canvas { position: relative; overflow: hidden; }
.route-canvas svg { display: block; width: 100%; height: auto; color: var(--ink); }
.map-bg { fill: #d8ddcd; }
.map-grid { color: #244239; }
.route-halo, .route-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-halo { stroke: rgba(255,253,248,.92); stroke-width: 13; }
.route-path { stroke: var(--green); stroke-width: 6; }
.map-marker { stroke: var(--white); stroke-width: 4; }
.map-marker.start { fill: var(--lime); }
.map-marker.end { fill: var(--orange); }
.map-label { position: absolute; z-index: 1; margin: 18px; padding: 8px 11px; border-radius: var(--r-pill); color: var(--green-deep); background: rgba(255,253,248,.88); backdrop-filter: blur(8px); font-size: 11px; font-weight: 750; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(199,238,118,.2); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
.stat-card { min-height: 155px; padding: 21px; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255, 253, 248, .45); }
.stat-label { display: block; margin-bottom: 35px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.stat-card strong { font-family: Georgia, serif; font-size: clamp(30px, 4vw, 44px); font-weight: 500; letter-spacing: -.03em; }
.stat-card small { color: var(--muted); font: 500 14px Inter, sans-serif; }
.accent-stat { color: var(--white); border-color: var(--green); background: var(--green); }
.accent-stat .stat-label, .accent-stat small { color: rgba(255,255,255,.68); }

.insight-card { margin: 12px 0; padding: 34px; color: var(--white); background: var(--green-deep); }
.section-kicker { display: flex; gap: 9px; align-items: center; margin-bottom: 28px; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-kicker > span:first-child { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(199,238,118,.4); border-radius: 50%; font-size: 15px; }
.insight-card h2 { max-width: 760px; font-size: clamp(28px, 4vw, 44px); }
.insight-card p { max-width: 720px; margin: 17px 0 24px; color: rgba(255,255,255,.68); line-height: 1.65; }
.inline-link { padding: 0; font-size: 12px; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(24,53,46,.3); text-underline-offset: 4px; }
.insight-card .inline-link { color: var(--white); text-decoration-color: rgba(255,255,255,.35); }

.mini-profile, .profile-card { margin-top: 12px; padding: 32px; overflow: hidden; }
.section-title-row { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.section-title-row h2, .upcoming-intro h2 { font-size: clamp(28px, 4vw, 41px); }
.mini-profile svg, .profile-card svg { display: block; width: 100%; margin-top: 24px; overflow: visible; }
.profile-area { fill: rgba(33,79,66,.11); }
.profile-line { fill: none; stroke: var(--green); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.profile-baseline { stroke: rgba(24,53,46,.15); stroke-width: 1; }
.profile-gridline { stroke: rgba(24,53,46,.1); stroke-width: 1; stroke-dasharray: 4 7; }
.axis-label { fill: var(--muted); font: 11px Inter, sans-serif; }
.climb-zone { fill: rgba(199,238,118,.3); }
.steep-zone { fill: rgba(237,116,75,.26); }
.profile-scale { padding-top: 9px; color: var(--muted); font-size: 12px; }
.profile-legend { display: flex; gap: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.profile-legend span { display: flex; gap: 7px; align-items: center; }
.profile-legend i { width: 20px; height: 3px; border-radius: var(--r-xs); background: var(--green); }
.profile-legend .legend-climb { height: 8px; background: rgba(199,238,118,.8); }
.profile-legend .legend-steep { height: 8px; background: rgba(237,116,75,.75); }
.section-title-row.compact { margin: 42px 0 18px; }
.count-pill { margin-top: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: 11px; }
.climb-list { display: grid; gap: 10px; }
.climb-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,253,248,.5); }
.climb-number { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: var(--green-deep); background: var(--lime); font: italic 22px Georgia, serif; }
.climb-card h3 { margin: 0 0 7px; font: 500 22px Georgia, serif; }
.climb-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.climb-grade { min-width: 75px; text-align: right; }
.climb-grade strong { display: block; font: 500 28px Georgia, serif; }
.climb-grade span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.empty-state { padding: 30px; border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--muted); text-align: center; }

.upcoming-intro { max-width: 760px; margin: 6px 0 40px; }
.upcoming-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.distance-filter { display: flex; gap: 7px; margin-top: 22px; }
.distance-button { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }
.distance-button.is-active { color: var(--white); border-color: var(--green); background: var(--green); }
.timeline { position: relative; margin-left: 18px; padding-left: 38px; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 1px; background: var(--line); }
.timeline-item { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 0 0 34px; }
.timeline-item::before { content: ""; position: absolute; top: 5px; left: -40px; width: 10px; height: 10px; border: 3px solid var(--paper); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.timeline-item.is-steep::before { background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.timeline-distance { font: 500 18px Georgia, serif; }
.timeline-distance small { display: block; margin-top: 3px; color: var(--muted); font: 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.timeline-content { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.timeline-content h3 { margin: 0 0 8px; font: 500 24px Georgia, serif; }
.timeline-content p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.timeline-tags { display: flex; gap: 7px; margin-top: 12px; }
.timeline-tag { padding: 5px 8px; border-radius: var(--r-button); color: var(--green-deep); background: rgba(199,238,118,.35); font-size: 10px; font-weight: 750; }
.timeline-tag.warning { color: #8f321d; background: rgba(237,116,75,.18); }
.empty-services { display: flex; gap: 18px; margin: 16px 0 0 56px; padding: 24px; box-shadow: none; }
.empty-services-icon { display: grid; width: 38px; height: 38px; flex-shrink: 0; place-items: center; border: 1px dashed var(--line); border-radius: 50%; }
.empty-services strong { font: 500 19px Georgia, serif; }
.empty-services p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.map-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 6px 0 24px; }
.map-toolbar h2 { font-size: clamp(30px, 4vw, 44px); }
.poi-filters { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.poi-filters::-webkit-scrollbar { display: none; }
.poi-filter { display: inline-flex; flex: 0 0 auto; padding: 9px 12px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); background: transparent; font-size: 11px; font-weight: 760; cursor: pointer; }
.poi-filter span { color: #b9bcb6; }
.poi-filter.is-active { color: var(--white); border-color: var(--green); background: var(--green); }
.poi-filter[data-category="water"] span { color: #65bce6; }
.poi-filter[data-category="food"] span { color: #f0b04f; }
.poi-filter[data-category="sleep"] span { color: #aa8de0; }
.poi-filter[data-category="repair"] span { color: var(--lime); }
.poi-filter[data-category="transport"] span { color: #f1f0e9; }
.poi-filter[data-category="health"] span { color: #ef796d; }
.poi-filter[data-category="utility"] span { color: #72c7b2; }
.poi-filter[data-category="tourism"] span { color: #f099c0; }
.interactive-map-card { position: relative; min-height: 570px; overflow: hidden; background: #d8ddcd; }
#leafletMap { width: 100%; height: 570px; z-index: 0; }
.leaflet-control-zoom { margin: 0 12px 12px 0 !important; border: 1px solid rgba(16,35,30,.22) !important; border-radius: 8px !important; overflow: hidden; box-shadow: 0 6px 18px rgba(16,35,30,.17); }
.leaflet-control-zoom a { color: var(--ink) !important; background: rgba(255,255,255,.96) !important; }
.leaflet-control-attribution { font-size: 9px !important; }
.leaflet-popup-content-wrapper { border-radius: var(--r-card); box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 14px 16px; font-family: Inter, sans-serif; }
.leaflet-popup-content strong { display: block; margin-bottom: 4px; font-family: Georgia, serif; font-size: 17px; }
.poi-map-marker { display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid var(--white); border-radius: 50%; color: var(--white); background: var(--green); box-shadow: 0 4px 10px rgba(24,53,46,.28); font-size: 10px; font-weight: 800; }
.poi-map-marker.water { background: #3e9dc9; }
.poi-map-marker.fuel { background: #d05235; }
.poi-map-marker.food { background: #d98a2f; }
.poi-map-marker.sleep { background: #7f63b8; }
.poi-map-marker.repair { color: var(--green-deep); background: var(--lime); }
.poi-map-marker.transport { background: #435b55; }
.poi-map-marker.health { background: #d55348; }
.poi-map-marker.utility { background: #348d79; }
.poi-map-marker.tourism { background: #c85e8d; }
.poi-map-cluster { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 3px solid rgba(255,255,255,.92); border-radius: 50%; color: var(--ink); background: var(--lime); box-shadow: 0 4px 14px rgba(16,25,23,.28); font: 900 13px/1 var(--font-data); cursor: pointer; }
.poi-map-cluster.water { background: #8bd5f1; }
.poi-map-cluster.food { background: #f3bf62; }
.poi-map-cluster.sleep { color: #fff; background: #7f63b8; }
.poi-map-cluster.health { color: #fff; background: #d55348; }
.map-status { position: absolute; z-index: 450; right: 14px; bottom: 14px; display: grid; max-width: calc(100% - 28px); padding: 8px 11px; gap: 3px; border-radius: var(--r-button); color: var(--green-deep); background: rgba(255,253,248,.92); box-shadow: 0 5px 20px rgba(24,53,46,.12); backdrop-filter: blur(8px); font-size: 10px; font-weight: 760; pointer-events: none; }
.map-status span + span { color: var(--muted); font-size: 9px; font-weight: 650; }
.map-unavailable { position: absolute; inset: 0; z-index: 2; display: flex; padding: 30px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; text-align: center; background: #d8ddcd; }
.map-unavailable strong { font: 500 24px Georgia, serif; }
.map-unavailable span { color: var(--muted); font-size: 13px; }
.poi-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 4px 12px; color: var(--muted); font-size: 11px; }
.poi-summary-row p { margin: 0; }
.poi-summary-row > span { flex-shrink: 0; font-size: 10px; }
.poi-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.poi-card { display: flex; min-height: 245px; padding: 19px; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,253,248,.55); }
.poi-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poi-type { color: var(--muted); font-size: 10px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.poi-distance { padding: 5px 7px; border-radius: var(--r-button); color: var(--green-deep); background: rgba(199,238,118,.35); font-size: 10px; font-weight: 760; }
.poi-card h3 { margin: 24px 0 7px; font: 500 20px Georgia, serif; }
.poi-card p { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.poi-arrival { display: flex; margin: 4px 0 12px; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.schedule-status { padding: 5px 7px; border-radius: var(--r-button); font-size: 9px; white-space: nowrap; }
.schedule-status.open { color: #28543a; background: rgba(116,201,125,.2); }
.schedule-status.closed { color: #923a28; background: rgba(237,116,75,.17); }
.schedule-status.unknown { color: var(--muted); background: rgba(24,53,46,.07); }
.detour-result { display: flex; margin-top: 2px; padding: 12px; align-items: center; justify-content: space-between; gap: 12px; border-radius: var(--r-card); color: var(--white); background: var(--green-deep); }
.detour-result strong { font: 500 20px Georgia, serif; }
.detour-result span { color: rgba(255,255,255,.6); font-size: 9px; text-align: right; }
.poi-actions { display: flex; gap: 7px; margin-top: auto; padding-top: 12px; }
.detour-button { min-height: 35px; padding: 7px 10px; flex: 1 1 auto; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); background: transparent; font-size: 10px; font-weight: 770; cursor: pointer; }
.detour-button:hover { color: var(--white); border-color: var(--green); background: var(--green); }
.detour-button:disabled { opacity: .55; cursor: wait; }
.detour-error { margin-top: 7px; color: #9a3f2b; font-size: 9px; line-height: 1.4; }
.google-maps-link { display: inline-flex; min-height: 35px; padding: 7px 10px; align-items: center; justify-content: center; border-radius: var(--r-card); color: var(--green-deep); background: rgba(199,238,118,.35); font-size: 10px; font-weight: 770; text-decoration: none; white-space: nowrap; }
.google-maps-link:hover { background: var(--lime); }
.leaflet-popup-content .popup-link { margin-top: 10px; }
.loading-card { grid-column: 1 / -1; padding: 32px; border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--muted); text-align: center; }
.poi-more-button { grid-column: 1 / -1; min-height: 52px; border: 1px dashed var(--line); border-radius: var(--r-button); color: var(--ink); background: transparent; font: 700 10px/1 var(--font-data); cursor: pointer; }
.poi-more-button span { margin-left: 7px; color: var(--muted); font-weight: 550; }
.poi-more-button:hover { border-color: var(--green); background: rgba(199,238,118,.18); }

.live-hero { padding: 34px; color: var(--white); background: var(--green-deep); }
.live-topline { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.live-topline .eyebrow { color: rgba(255,255,255,.55); }
.live-topline h2 { font-size: clamp(29px, 4vw, 45px); }
.live-status { display: inline-flex; flex-shrink: 0; padding: 8px 11px; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); color: rgba(255,255,255,.7); font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: .07em; }
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: #9ba9a4; }
.live-status.is-active i { background: var(--lime); box-shadow: 0 0 0 4px rgba(199,238,118,.15); }
.live-progress-track { height: 5px; margin: 40px 0 25px; overflow: hidden; border-radius: var(--r-button); background: rgba(255,255,255,.13); }
.live-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--lime); transition: width 450ms ease; }
.live-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.live-stats article { padding-right: 16px; border-right: 1px solid rgba(255,255,255,.14); }
.live-stats article:last-child { border-right: 0; }
.live-stats span { display: block; margin-bottom: 9px; color: rgba(255,255,255,.52); font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.live-stats strong { font: 500 clamp(34px, 5vw, 54px) Georgia, serif; }
.live-stats small { margin-left: 5px; color: rgba(255,255,255,.55); font-size: 11px; }
.live-actions { display: flex; gap: 8px; margin-top: 32px; }
.live-actions-primary { margin-top: 20px; }
.live-share-direct-link { width: fit-content; margin-top: 4px; color: var(--green); font: 800 10px/1.2 var(--font-data); text-decoration: underline; text-underline-offset: 3px; }
.live-hero .primary-button { color: var(--green-deep); border-color: var(--lime); background: var(--lime); }
.live-hero .secondary-button { color: var(--white); border-color: rgba(255,255,255,.22); background: transparent; }
.permission-note { margin: 13px 0 0; color: rgba(255,255,255,.44); font-size: 10px; }
.live-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.live-next-card { padding: 24px; box-shadow: none; }
.live-next-card > span { display: block; margin-bottom: 22px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.live-next-card strong { font: 500 25px Georgia, serif; }
.live-next-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.live-profile-card { position: relative; }
.live-position-line { stroke: var(--orange); stroke-width: 3; stroke-dasharray: 5 5; }
.live-position-dot { fill: var(--orange); stroke: var(--white); stroke-width: 4; }

.settings-dialog { width: min(680px, calc(100% - 28px)); max-height: min(820px, calc(100vh - 28px)); padding: 0; overflow: auto; border: 0; border-radius: var(--r-sheet); color: var(--ink); background: var(--paper); box-shadow: 0 30px 90px rgba(9,29,23,.3); }
.settings-dialog::backdrop { background: rgba(12,31,26,.58); backdrop-filter: blur(5px); }
.settings-sheet { padding: 30px; }
.settings-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.settings-header h2 { font-size: 37px; }
.settings-header .icon-button { padding: 0; font-size: 25px; font-weight: 300; }
.settings-group { margin: 27px 0 0; padding: 0; border: 0; }
.settings-group legend { margin-bottom: 12px; font-size: 11px; font-weight: 790; letter-spacing: .08em; text-transform: uppercase; }
.preference-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preference-card { position: relative; display: flex; min-height: 145px; padding: 20px; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,253,248,.48); cursor: pointer; }
.preference-card:has(input:checked) { color: var(--white); border-color: var(--green); background: var(--green); }
.preference-card input { position: absolute; opacity: 0; }
.preference-card strong { margin-top: auto; font: 500 22px Georgia, serif; }
.preference-card small { margin-top: 7px; color: var(--muted); line-height: 1.45; }
.preference-card:has(input:checked) small { color: rgba(255,255,255,.62); }
.preference-check { display: grid; width: 24px; height: 24px; place-items: center; align-self: end; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 11px; }
.preference-card:has(input:checked) .preference-check { color: var(--green-deep); border-color: var(--lime); background: var(--lime); }
.settings-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 27px; }
.field-label { display: flex; padding: 15px 17px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-card); font-size: 11px; font-weight: 720; }
.field-label span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.field-label input, .field-label select { max-width: 75px; padding: 6px 7px; border: 1px solid var(--line); border-radius: var(--r-button); color: var(--ink); background: var(--white); }
.field-label input[type="date"] { max-width: 132px; }
.field-label input[type="time"] { max-width: 92px; }
.switches-group { border-top: 1px solid var(--line); }
.switches-group legend { padding-top: 26px; }
.switch-row { display: flex; padding: 13px 0; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row span { display: flex; flex-direction: column; gap: 3px; }
.switch-row strong { font-size: 12px; }
.switch-row small { color: var(--muted); font-size: 10px; }
.switch-row input { width: 39px; height: 22px; accent-color: var(--green); }
.settings-save { width: 100%; margin-top: 27px; }

.error-toast { position: fixed; right: 24px; bottom: 24px; z-index: 5; display: flex; max-width: 390px; padding: 16px 20px; flex-direction: column; gap: 4px; border-radius: var(--r-card); color: #fff; background: #933f2c; box-shadow: var(--shadow); font-size: 13px; }
.error-toast span { color: rgba(255,255,255,.75); }
.is-hidden { display: none !important; }

@media (max-width: 760px) {
  .app-shell { padding: 0 18px 60px; }
  .topbar { height: 68px; }
  .hero { padding-top: 8vh; }
  .hero-copy { margin-bottom: 34px; }
  .hero h1 { font-size: clamp(45px, 14vw, 68px); }
  .hero-lede { font-size: 15px; }
  .drop-zone { min-height: 190px; }
  .route-view { padding-top: 42px; }
  .route-heading { align-items: start; flex-direction: column; }
  .route-heading .primary-button { width: 100%; }
  .mode-switch { width: 100%; }
  .mode-button { flex: 1; }
  .section-tabs { margin-top: 34px; }
  .route-canvas svg { min-height: 280px; object-fit: cover; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card { min-height: 125px; }
  .stat-label { margin-bottom: 24px; }
  .insight-card, .mini-profile, .profile-card { padding: 24px; }
  .section-title-row { align-items: start; flex-direction: column; }
  .profile-legend { gap: 11px; flex-wrap: wrap; }
  .climb-card { grid-template-columns: 56px 1fr; gap: 12px; }
  .climb-number { width: 46px; height: 46px; }
  .climb-grade { grid-column: 2; text-align: left; }
  .climb-grade strong { display: inline; margin-right: 5px; }
  .timeline { margin-left: 6px; padding-left: 30px; }
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
  .timeline-item::before { left: -32px; }
  .timeline-distance small { display: inline; margin-left: 5px; }
  .empty-services { margin-left: 36px; }
  .section-tabs { overflow-x: auto; scrollbar-width: none; }
  .tab-button { flex: 0 0 auto; }
  .map-toolbar { align-items: stretch; flex-direction: column; }
  .interactive-map-card, #leafletMap { min-height: 480px; height: 480px; }
  .poi-summary-row { align-items: start; flex-direction: column; gap: 4px; }
  .poi-list { grid-template-columns: 1fr; }
  .live-hero { padding: 24px; }
  .live-topline { flex-direction: column; }
  .live-stats { gap: 9px; }
  .live-stats strong { font-size: 33px; }
  .live-actions { flex-direction: column; }
  .live-next-grid { grid-template-columns: 1fr; }
  .settings-sheet { padding: 22px; }
  .preference-cards, .settings-columns { grid-template-columns: 1fr; }
}

/* Native iPhone: Capacitor reserves the status-bar itself (StatusBar
   overlaysWebView=false). No CSS safe-area padding is permitted here, or the
   header gets an invisible second status bar and the controls become untouchable. */
@media (max-width: 760px) {
  html.is-native-shell, html.is-native-shell body { min-height: 100dvh; overflow-x: clip; }
  html.is-native-shell .app-shell { width: 100%; padding: 0 14px calc(92px + env(safe-area-inset-bottom)) !important; }
  html.is-native-shell .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1600 !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 -14px !important;
    padding: 0 14px !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    background: #f5f6f3 !important;
  }
  html.is-native-shell .topbar-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
  html.is-native-shell .topbar-actions .icon-button,
  html.is-native-shell .topbar .menu-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  html.is-native-shell .route-view, html.is-native-shell .explore-view, html.is-native-shell .home-dashboard { padding-top: 24px !important; }
  html.is-native-shell .mobile-navigation { padding-bottom: max(7px, env(safe-area-inset-bottom)) !important; }
  html.is-native-shell .live-stats { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 4px !important; }
  html.is-native-shell .live-stats article { min-width: 0 !important; padding: 10px 5px !important; }
  html.is-native-shell .live-stats strong { font-size: clamp(23px,8.4vw,32px) !important; }
  html.is-native-shell .live-stats span { overflow-wrap: normal !important; font-size: 8px !important; letter-spacing: .03em !important; }
  html.is-native-shell .live-hero { padding: 20px 16px !important; }
}

/* Direction finale : surfaces calmes. Les repères servent au contenu, pas au décor. */
body { background: #f5f6f3; background-image: none !important; }
body::before, .hero-copy::before, .journey-library::before, .live-hero::before { display: none !important; }
.system-strip { display: none !important; }
.topbar { height: 72px; padding-inline: 0; border-bottom: 1px solid #dbe2dc; background: rgba(245,246,243,.94); box-shadow: 0 8px 22px rgba(7,18,15,.05); }
.topbar-actions { padding: 0; border: 0; background: transparent; }
.topbar-actions .icon-button, .topbar .menu-button { width: 42px; height: 42px; border: 1px solid #d5ddd7; border-radius: var(--r-card); background: #fff; box-shadow: 0 2px 5px rgba(7,18,15,.04); }
.topbar-actions .icon-button:hover, .topbar .menu-button:hover { border-color: var(--green); color: var(--green); background: #fff; }
.brand { gap: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: var(--r-card); box-shadow: none; }
.brand-mark::after, .brand-signal { display: none !important; }
.brand-copy { margin-left: 10px; }
.brand-copy strong { color: var(--green-deep); font-size: 12px; letter-spacing: .08em; }
.brand-copy small { display: none; }
.home-dashboard { padding-top: 30px; }
.hero { min-height: 0; padding: 48px 0 38px; }
.hero-copy { margin: 0; }
.home-dashboard .hero-copy h1, .hero h1 { max-width: 720px; font-size: clamp(42px, 6vw, 68px); line-height: .98; }
.hero-lede { max-width: 640px; margin-top: 18px; font-size: 17px; line-height: 1.5; }
.hero-capabilities { border-top: 0; gap: 8px; margin-top: 22px; }
.hero-capabilities li { min-height: 0; padding: 8px 0; border: 0 !important; }
.card, .home-atlas, .journey-library, .route-heading, .drop-zone, .saved-route-card, .plan-section, .journal-composer, .journal-entry { border-color: #dde4de; box-shadow: 0 8px 22px rgba(7,18,15,.045); }
.route-metadata, .route-metadata span { border: 0 !important; }
.section-tabs { border-color: #dbe2dc; box-shadow: 0 4px 12px rgba(7,18,15,.035); }
.tab-button { border-right-color: #e1e7e2; }

@media (max-width: 760px) {
  .topbar { height: 64px; margin-inline: -12px; padding-inline: 12px; }
  .topbar-actions .icon-button, .topbar .menu-button { width: 40px; height: 40px; border-radius: var(--r-card); }
  .brand-mark { width: 36px; height: 36px; border-radius: var(--r-card); }
  .brand-copy { display: none; }
  .home-dashboard { padding-top: 20px; }
  .hero { padding: 28px 0 24px; }
  .home-dashboard .hero-copy h1, .hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero-lede { font-size: 16px; }
  .hero-capabilities { display: none; }
}

/* POLISH 0.30 — lisibilité, actions et en-tête premium */
@media (min-width: 761px) {
  .topbar {
    display: grid;
    height: 78px;
    grid-template-columns: 46px minmax(220px,1fr) auto;
    align-items: center;
    gap: 14px;
    border-bottom-color: rgba(7,18,15,.82);
  }
  .topbar .menu-button { width: 42px; height: 42px; }
  .brand { min-width: 0; }
  .brand-copy { gap: 4px; }
  .brand-copy strong { font-size: 14px; letter-spacing: .11em; }
  .brand-copy small { font-size: 9px; letter-spacing: .14em; }
  .topbar-actions { justify-self: end; gap: 7px; padding: 5px; border: 1px solid rgba(7,18,15,.16); border-radius: var(--r-button); background: rgba(255,255,255,.58); }
  .topbar-actions .icon-button { border-color: transparent; background: transparent; }
  .topbar-actions .icon-button:hover { border-color: var(--ink); background: var(--white); }
  .account-button { min-height: 42px; padding: 5px 10px 5px 5px; border-color: transparent; background: var(--green-deep); color: var(--white); }
  .account-button:hover { border-color: var(--green-deep); background: var(--green); }
  .account-copy small { color: rgba(255,255,255,.64); }
}

@media (min-width: 761px) {
  .side-menu-install { display: none !important; }
}

.primary-button,
.secondary-button,
.icon-button,
.account-button,
.tab-button,
.poi-scope-button,
.route-visualization-toolbar button,
.live-roadbook-filters button {
  -webkit-tap-highlight-color: transparent;
}
.primary-button {
  border-color: var(--green-deep);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 0 rgba(4,31,24,.14);
}
.secondary-button {
  border-color: #7f9086;
  background: var(--white);
  box-shadow: inset 0 -1px 0 rgba(4,31,24,.08), 0 1px 0 rgba(4,31,24,.06);
}
.secondary-button:hover,
.secondary-button:focus-visible {
  border-color: var(--green-deep);
  color: var(--green-deep);
  background: #f8fbf5;
}
.icon-button {
  border-color: #87968e;
  box-shadow: inset 0 -1px 0 rgba(4,31,24,.08), 0 1px 0 rgba(4,31,24,.06);
}
.icon-button:hover,
.icon-button:focus-visible { border-color: var(--green-deep); }
.primary-button:focus-visible,
.secondary-button:focus-visible,
.icon-button:focus-visible,
.account-button:focus-visible,
.tab-button:focus-visible {
  outline: 3px solid rgba(185,255,40,.92);
  outline-offset: 2px;
}
button:disabled,
.secondary-button:disabled,
.primary-button:disabled { opacity: .52; filter: grayscale(.15); }

@media (max-width: 760px) {
  .side-menu-install { display: grid; }
  .install-dialog { width: min(620px, calc(100% - 20px)); }
  /* Header mobile: l'accès aux réglages reste immédiat, le compte passe dans le menu. */
  #settingsButton { display: grid !important; }
  #accountButton { display: none !important; }
}

/* Choix d'étape et météo : un seul geste avant de reprendre la navigation. */
.route-picker-list { display: grid; gap: 10px; margin: 18px 0; }
.route-picker-group { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.route-picker-group > small { color: var(--muted); font: 700 10px/1 var(--font-data); letter-spacing: .1em; }
.route-picker-choice { display: grid; width: 100%; min-height: 58px; padding: 10px 12px; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); background: var(--white); text-align: left; }
.route-picker-choice:hover,.route-picker-choice:focus-visible { border-color: var(--green); background: #f8fbf5; }
.route-picker-choice > span { display:grid; width:30px; height:30px; place-items:center; border-radius:6px; color:var(--green-deep); background:var(--lime); font:800 11px/1 var(--font-data); }
.route-picker-choice strong,.route-picker-choice small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-picker-choice small { margin-top:3px; color:var(--muted); font-size:11px; }
.route-picker-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.weather-local-card { min-height:130px; margin:18px 0; padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--green-deep); color:var(--white); }
.weather-local-card strong { display:block; font-size:23px; }
.weather-local-card p { margin:8px 0 0; color:rgba(255,255,255,.75); }
.weather-local-card .weather-local-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.weather-local-card .weather-local-grid span { color:rgba(255,255,255,.7); font:700 10px/1.2 var(--font-data); }
.weather-local-card .weather-local-grid b { display:block; margin-top:5px; color:var(--lime); font:800 17px/1 var(--font-data); }
@media (max-width: 420px) { .route-picker-actions { grid-template-columns:1fr; } }

/* Écran d'étape : lecture immédiate, pas de grille qui casse la navigation. */
.route-view { padding-top: 34px; }
.route-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,255,255,.62); }
.route-heading .eyebrow { display: inline-flex; width: fit-content; margin: 0 0 12px; padding: 5px 8px; color: var(--white); background: var(--green-deep); font-size: 10px !important; }
.route-heading h1 { margin: 0; font-size: clamp(34px, 4.8vw, 58px); line-height: .96; letter-spacing: -.06em; }
.route-metadata { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 0; }
.route-metadata span { padding: 10px 14px 0 0; border-right: 0; color: var(--muted); font-size: 11px !important; }
.route-heading .preference-label { min-height: 34px; margin-top: 14px; padding: 0; border: 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.route-heading .primary-button { min-width: 248px; min-height: 52px; padding-inline: 20px; border-radius: var(--r-card); box-shadow: 0 4px 0 rgba(4,31,24,.2); }
.section-tabs { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap; margin-top: 18px; overflow-x: auto; border-radius: var(--r-card); scrollbar-width: none; }
.section-tabs::-webkit-scrollbar { display: none; }
.tab-button { flex: 1 0 132px; min-width: 0; min-height: 50px; padding-inline: 12px; white-space: nowrap; }

@media (max-width: 760px) {
  .route-view { padding-top: 18px; }
  .route-heading { display: block; padding: 20px 16px 16px; border-radius: var(--r-card); }
  .route-heading .eyebrow { margin-bottom: 10px; }
  .route-heading h1 { font-size: clamp(34px, 11vw, 46px); }
  .route-metadata { margin-top: 14px; }
  .route-metadata span { padding-top: 8px; font-size: 10px !important; }
  .route-heading .preference-label { margin-top: 11px; }
  .route-heading .primary-button { width: 100%; min-width: 0; margin-top: 18px; }
  /* Même retrait déduit que pour les bandeaux : écrit en dur, il débordait de
     la coque dès que la marge changeait de palier. */
  .section-tabs { position: sticky; top: 60px; z-index: 1100; margin: 14px calc(50% - 50vw); padding: 0 calc(50vw - 50%); border-right: 0; border-left: 0; border-radius: 0; background: rgba(244,246,242,.97); }
  .tab-button { flex: 0 0 auto; min-width: 102px; min-height: 46px; padding-inline: 12px; font-size: 11px; }
}

/* 0.31 — interface terrain: less prose, stronger hierarchy, reliable targets. */
/* Palette consolidée dans l'unique :root du haut de la feuille. */


@media (max-width: 760px) {
  .app-shell { padding: 0 16px calc(94px + env(safe-area-inset-bottom)); }
  .topbar { height: 72px; gap: 9px; }
  .brand { gap: 8px; }
  .brand-signal, .brand-copy small, .account-copy, #settingsButton { display: none; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .icon-button, .account-button { width: 44px; min-width: 44px; height: 44px; padding: 7px; }
  .hero { padding: 34px 0 24px; text-align: left; }
  .hero-copy { margin-bottom: 27px; }
  .hero h1 { font-size: clamp(46px, 14vw, 66px); line-height: .91; }
  .hero-lede { margin-top: 17px; font-size: 16px; line-height: 1.45; }
  .library-heading { align-items: flex-start; gap: 12px; }
  .library-heading h2 { font-size: 30px; }
  .library-heading p { margin-top: 6px; font-size: 14px; }
  .home-atlas-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .home-atlas-actions button { width: 100%; min-width: 0; padding-inline: 9px; font-size: 11px; }
  .drop-zone { min-height: 148px; padding: 20px; border-radius: var(--r-card); }
  .drop-zone strong { font-size: 18px; }
  .route-view { padding-top: 24px; }
  .route-heading { align-items: stretch; flex-direction: column; gap: 16px; }
  .route-heading h1 { font-size: clamp(34px, 11vw, 50px); }
  .route-heading > .primary-button { width: 100%; }
  .section-tabs { position: sticky; z-index: 100; top: 0; display: flex; margin: 20px -16px 15px; padding: 9px 16px 0; overflow-x: auto; background: rgba(244,246,242,.97); box-shadow: 0 6px 14px rgba(16,25,23,.06); scrollbar-width: none; }
  .section-tabs::-webkit-scrollbar { display: none; }
  .tab-button { flex: 0 0 auto; min-height: 45px; padding: 0 12px 12px; font-size: 13px; }
  .tab-button span { display: none; }
  .section-title-row { gap: 12px; }
  .section-title-row h2, .overview-map-heading h2 { font-size: 29px; }
  .overview-map-heading { display: grid; }
  .overview-map-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .overview-map-actions .secondary-button { min-width: 0; padding-inline: 8px; font-size: 11px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .stat-card { min-height: 116px; padding: 15px; border-radius: var(--r-card); }
  .stat-label { margin-bottom: 18px; font-size: 11px; }
  .stat-card strong { font-size: 33px; }
  .card { border-radius: var(--r-card); box-shadow: 0 5px 16px rgba(16,25,23,.07); }
  .interactive-map-card, #leafletMap { min-height: 420px; height: 58vh; }
  .explore-header, .standalone-header { gap: 16px; }
  .explore-header h1, .standalone-header h1 { font-size: clamp(38px,12vw,54px); }
  .explore-header p:not(.eyebrow), .standalone-header p:not(.eyebrow) { font-size: 15px; }
  .mobile-navigation button { min-height: 56px; font-size: 10px; }
  .mobile-navigation button > span { font-size: 22px; }
  .live-topline h2 { font-size: 31px; }
  .live-stats article { min-height: 92px; padding: 12px 8px; }
  .live-stats strong { font-size: 27px; }
  .live-actions-primary { grid-template-columns: 1fr 1fr; }
  .live-actions-primary button { min-width: 0; padding-inline: 9px; }
  .live-checkin-console { gap: 14px; }
  .live-checkin-console > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); }
  .live-checkin-console > div:last-child button { min-width: 0; padding-inline: 5px; font-size: 10px; }
}

/* Release 0.30.1: explicit final mobile Live header geometry.  This must
   remain last because earlier legacy responsive blocks also style this area. */
@media (max-width: 760px) {
  .is-live-mode .live-mode-header {
    margin-inline: -10px;
    padding-inline: 14px;
  }
}

/* Every primary command keeps a 44 px hit area, including Leaflet's native
   controls and the desktop brand shortcut. */
.brand { min-height: 44px; }
.leaflet-control-zoom a {
  width: 44px !important;
  height: 44px !important;
  line-height: 42px !important;
  font-size: 24px !important;
}
@media (min-width: 761px) {
  .topbar .menu-button { width: 44px; height: 44px; }
  .account-button { min-height: 44px; }
}

/* RELEASE 0.30 — terrain-first clarity and accessible controls */
button { min-height: 44px; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select):focus-visible {
  outline: 3px solid #97d900;
  outline-offset: 3px;
}

.live-advanced-controls {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(2,25,19,.42);
}
.live-advanced-controls > summary {
  display: flex;
  min-height: 48px;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  cursor: pointer;
  font: 800 12px/1 var(--font-data);
  letter-spacing: .045em;
  list-style: none;
}
.live-advanced-controls > summary::-webkit-details-marker { display: none; }
.live-advanced-controls > summary::after { content: "+"; color: var(--lime); font: 800 20px/1 var(--font-data); }
.live-advanced-controls[open] > summary { border-bottom: 1px solid rgba(255,255,255,.16); }
.live-advanced-controls[open] > summary::after { content: "−"; }
.live-advanced-controls .live-timing-console { margin: 0; border: 0; border-left: 3px solid var(--lime); border-radius: 0; }
.live-advanced-controls .live-field-health { margin: 0; padding: 14px 16px; }
.live-advanced-controls .permission-note,
.live-advanced-controls .live-capability-note { margin: 0; padding: 0 16px 16px; }

.live-timing-heading div > span,
.live-timing-heading > span,
.live-timing-fields label,
.live-km-range-label,
.live-timing-console > p {
  font-size: 11px;
  line-height: 1.4;
}
.live-timing-fields label { letter-spacing: .02em; }
.live-timing-fields input { min-height: 32px; font-size: 18px; }
.live-poi-order small,
.live-poi-main span,
.live-poi-main small,
.live-poi-eta small,
.live-poi-eta a { font-size: 11px; line-height: 1.38; }
.live-poi-main strong { font-size: 16px; line-height: 1.2; }
.live-poi-eta > span { font-size: 26px; }

@media (min-width: 761px) {
  .topbar { box-shadow: 0 10px 28px rgba(8,25,20,.04); }
  .topbar-actions { min-height: 54px; align-items: center; }
  .topbar-actions .icon-button { min-width: 44px; }
  .live-advanced-controls { max-width: 100%; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .live-mode-header {
    position: sticky;
    z-index: 1200;
    top: 0;
    /* Le panneau Live conserve 10 px de gouttière sur mobile : annuler
       exactement cette valeur évite de couper le premier caractère du titre. */
    margin-inline: -10px;
    padding-inline: 14px;
    border-bottom: 2px solid var(--line);
    background: rgba(244,246,242,.98);
    backdrop-filter: blur(12px);
  }
  .live-actions-primary { grid-template-columns: 1fr; }
  .live-actions-primary > button { width: 100%; min-height: 52px; }
  .live-checkin-console > div:last-child { gap: 8px; }
  .live-checkin-console > div:last-child button { min-height: 48px; }
  .live-advanced-controls > summary { min-height: 52px; font-size: 12px; }
  .live-timing-fields .primary-button { min-height: 52px; }
  .route-visualization-toolbar button,
  .live-roadbook-filters button { min-height: 44px; }
  .profile-help,
  .dialog-intro,
  .permission-note,
  .live-capability-note { font-size: 13px; line-height: 1.5; }
  .map-status { font-size: 11px; line-height: 1.35; }
  .map-status span + span { font-size: 10px; }
}

/* INFORMATION ARCHITECTURE + FIELD UI 0.18 */
/* Palette consolidée dans l'unique :root du haut de la feuille. */


.topbar { position: sticky; z-index: 1200; top: 0; height: 70px; background: rgba(242,244,240,.94); backdrop-filter: blur(14px); }
.brand-copy { display: grid; gap: 2px; }
.brand-copy small { color: var(--muted); font: 700 8px/1 var(--font-data); letter-spacing: .12em; }
.primary-button, .secondary-button { min-height: 46px; padding-inline: 17px; border-radius: var(--r-button); font-size: 13px; }
.icon-button { border-radius: var(--r-button); }
.icon-button:hover { transform: none; }

.side-menu { width: min(410px, 94vw); padding-inline: 24px; background: #0c211b; }
.side-menu nav button { min-height: 70px; padding-block: 12px; grid-template-columns: 35px 1fr; }
.side-menu nav button strong { font-size: 16px; }
.side-menu nav button small { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.35; }

.home-dashboard { max-width: none; padding-top: 68px; text-align: left; }
.home-dashboard .hero-copy { display: grid; max-width: none; margin-bottom: 34px; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); column-gap: 50px; align-items: end; }
.home-dashboard .hero-copy .eyebrow, .home-dashboard .hero-copy h1, .home-dashboard .hero-copy .hero-lede { grid-column: 1; }
.home-dashboard .hero-copy h1 { max-width: 760px; font-size: clamp(48px, 7vw, 78px); }
.home-dashboard .hero-copy .hero-lede { max-width: 680px; margin: 24px 0 0; }
.home-dashboard .hero-capabilities { grid-column: 2; grid-row: 1 / 4; margin: 0; grid-template-columns: 1fr; }
.home-dashboard .hero-capabilities li { display: grid; padding: 13px 0; grid-template-columns: 34px 1fr; align-items: center; border-bottom: 1px solid var(--line); font-size: 12px; }
.home-dashboard .hero-capabilities span { margin: 0; }

.home-atlas { width: 100%; padding: 24px; border: 1px solid var(--line); background: rgba(251,252,249,.9); text-align: left; }
.home-atlas-heading { align-items: center; }
.home-atlas-heading h2 { font-family: var(--font-ui); font-size: clamp(28px,4vw,42px); font-weight: 720; letter-spacing: -.045em; }
.home-atlas-heading p:not(.eyebrow) { max-width: 620px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.home-atlas-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.home-map-shell { position: relative; min-height: 520px; margin-top: 20px; overflow: hidden; border: 1px solid var(--line); background: #dce2db; }
.home-route-map { width: 100%; height: 520px; }
.home-map-empty { position: absolute; z-index: 500; inset: 0; display: grid; place-content: center; gap: 8px; color: var(--muted); background: rgba(227,232,226,.88); text-align: center; pointer-events: none; }
.home-map-empty strong { color: var(--ink); font-size: 18px; }
.home-map-legend { position: absolute; z-index: 500; right: 12px; bottom: 12px; display: flex; padding: 9px 11px; gap: 14px; border: 1px solid var(--line); background: rgba(251,252,249,.94); font: 700 10px/1 var(--font-data); }
.home-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.home-map-legend i { width: 20px; height: 4px; background: var(--green); }
.home-map-legend i.done { height: 2px; background: #77827d; }
.home-atlas-summary { padding-top: 12px; color: var(--muted); font: 700 10px/1 var(--font-data); letter-spacing: .05em; text-transform: uppercase; }

.journey-library { border-radius: var(--r-button); }
.journey-library .library-heading h2, .route-library .library-heading h2 { font-family: var(--font-ui); font-weight: 700; letter-spacing: -.04em; }
.drop-zone { border-radius: var(--r-button); box-shadow: none; }
.saved-route-open > strong, .library-empty strong { font-family: var(--font-ui); font-weight: 700; }

.explore-view { padding-top: 50px; }
.explore-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.explore-header h1 { max-width: 780px; font-family: var(--font-ui); font-size: clamp(38px,6vw,62px); font-weight: 760; line-height: .98; }
.explore-header p:not(.eyebrow) { max-width: 700px; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.explore-mode-switch { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--white); }
.explore-mode-switch button { display: grid; min-height: 94px; padding: 17px 20px; gap: 5px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.explore-mode-switch button:last-child { border-right: 0; }
.explore-mode-switch button.is-active { color: var(--white); background: var(--green); box-shadow: inset 0 4px 0 var(--lime); }
.explore-mode-switch button:disabled { color: var(--muted); background: var(--paper-deep); cursor: not-allowed; }
.explore-mode-switch span { font: 700 9px/1 var(--font-data); letter-spacing: .1em; }
.explore-mode-switch strong { font-size: 18px; }
.explore-mode-switch small { color: var(--muted); font-size: 12px; }
.explore-mode-switch .is-active small { color: rgba(255,255,255,.7); }

.explore-command { padding: 18px; border: 1px solid var(--line); border-top: 0; background: rgba(251,252,249,.84); }
.explore-around-controls, .explore-route-controls { display: grid; grid-template-columns: auto minmax(210px,1fr) auto minmax(120px,.35fr) auto; align-items: end; gap: 8px; }
.explore-route-controls { grid-template-columns: minmax(250px,1fr) minmax(220px,.6fr) auto; }
.explore-command label { display: grid; gap: 7px; color: var(--muted); font: 700 10px/1 var(--font-data); letter-spacing: .04em; text-transform: uppercase; }
.explore-command input, .explore-command select { width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--ink); background: var(--white); font-size: 16px; }
.explore-filter-row { display: flex; margin-top: 12px; padding-top: 12px; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.explore-filter-row span { color: var(--muted); font: 700 10px/1 var(--font-data); }
.explore-progress { margin-top: 12px; padding: 15px; border: 1px solid var(--green); background: var(--white); }
.explore-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.explore-progress small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.explore-progress.has-error { border-color: var(--orange); }
.explore-progress.is-complete { border-color: #79a436; }
.explore-view .nearby-status { min-height: 46px; margin-top: 12px; padding: 13px 15px; border: 1px solid var(--line); background: rgba(251,252,249,.9); font-size: 12px; }
.explore-map-shell { position: relative; }
.explore-view .nearby-map { height: min(67vh,680px); min-height: 500px; margin-top: 8px; }
.explore-map-badge { position: absolute; z-index: 500; top: 20px; left: 12px; padding: 9px 11px; border: 1px solid var(--line); color: var(--ink); background: rgba(251,252,249,.94); font: 700 9px/1 var(--font-data); letter-spacing: .08em; pointer-events: none; }
.explore-view .nearby-poi-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.explore-view .nearby-poi-list article { min-height: 92px; grid-template-columns: 32px minmax(0,1fr); grid-template-rows: auto auto; }
.explore-poi-actions { display: flex !important; grid-column: 2; flex-direction: row !important; align-items: center; gap: 8px !important; }
.explore-add-button { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); color: var(--ink); background: var(--white); font: 700 10px/1 var(--font-data); cursor: pointer; }
.explore-add-button.is-added { border-color: var(--green); background: var(--lime); }

.section-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.tab-button { justify-content: center; border-left: 1px solid var(--line); }
.tab-button:first-child { border-left: 0; }

.wind-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wind-summary { display: grid; margin-top: 22px; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.wind-summary article { min-width: 0; padding: 18px; border-right: 1px solid var(--line); background: var(--white); }
.wind-summary article:last-child { border-right: 0; }
.wind-summary article.has-risk { box-shadow: inset 0 4px 0 var(--orange); }
.wind-summary span { display: block; color: var(--muted); font: 700 9px/1 var(--font-data); letter-spacing: .06em; }
.wind-summary strong { display: block; margin-top: 18px; overflow: hidden; font: 750 clamp(22px,3.2vw,38px)/1 var(--font-data); letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.wind-summary small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.wind-ribbon { display: grid; margin-top: 10px; grid-template-columns: repeat(9,1fr); border: 1px solid var(--line); }
.wind-ribbon-segment { display: grid; min-width: 0; padding: 11px 6px; justify-items: center; gap: 5px; border-right: 1px solid var(--line); background: var(--paper-deep); }
.wind-ribbon-segment:last-child { border-right: 0; }
.wind-ribbon-segment.medium { background: #efe3b9; }
.wind-ribbon-segment.high { background: #ffd0c2; }
.wind-ribbon-segment.tail { background: #d7eacb; }
.wind-ribbon-segment span, .wind-ribbon-segment small { overflow: hidden; max-width: 100%; color: var(--muted); font: 700 8px/1 var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.wind-ribbon-segment i { display: block; transform: rotate(var(--wind-angle)); font: 700 24px/1 var(--font-data); font-style: normal; }
.wind-ribbon-segment strong { font: 750 15px/1 var(--font-data); }
.weather-segments { grid-template-columns: repeat(3,1fr); }
.weather-card.wind-card { min-height: 210px; }
.wind-card-main { display: flex !important; margin-top: 18px !important; align-items: center; gap: 12px !important; color: var(--ink) !important; }
.wind-card-main i { transform: rotate(var(--wind-angle)); font: 700 32px/1 var(--font-data); font-style: normal; }
.wind-card-main strong { margin: 0; font: 750 30px/1 var(--font-data); }
.wind-card-main strong small { font-size: 11px; }
.weather-card.wind-card > b { margin-top: 9px; font-size: 13px; }

@media (max-width: 900px) {
  .home-dashboard .hero-copy { grid-template-columns: 1fr; }
  .home-dashboard .hero-capabilities { grid-column: 1; grid-row: auto; margin-top: 28px; }
  .explore-around-controls { grid-template-columns: 1fr 1fr; }
  .explore-around-controls label { grid-column: span 1; }
  .explore-route-controls { grid-template-columns: 1fr 1fr; }
  .explore-route-controls .primary-button { grid-column: 1 / -1; }
  .explore-view .nearby-poi-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .topbar { margin-inline: -14px; padding-inline: 14px; }
  .brand-copy small { display: none; }
  .system-strip { overflow: hidden; }
  .system-strip span:nth-child(n+3) { display: none; }
  .home-dashboard { padding-top: 38px; }
  .home-dashboard .hero-copy { margin-bottom: 24px; }
  .home-dashboard .hero-copy h1 { font-size: clamp(38px,11vw,52px); }
  .home-dashboard .hero-lede { font-size: 15px; }
  .home-atlas { padding: 14px; }
  .home-atlas-heading, .explore-header { align-items: stretch; flex-direction: column; }
  .home-atlas-actions { display: grid; grid-template-columns: 1fr; }
  .home-map-shell, .home-route-map { min-height: 420px; height: 420px; }
  .journey-library { margin-top: 34px; }
  .route-library { margin-top: 42px; }
  .explore-view { padding-top: 30px; }
  .explore-header h1 { font-size: clamp(36px,10vw,48px); }
  .explore-mode-switch { grid-template-columns: 1fr; }
  .explore-mode-switch button, .explore-mode-switch button:last-child { min-height: 80px; border-right: 0; border-bottom: 1px solid var(--line); }
  .explore-mode-switch button:last-child { border-bottom: 0; }
  .explore-around-controls, .explore-route-controls { grid-template-columns: 1fr; }
  .explore-route-controls .primary-button { grid-column: auto; }
  .explore-command .primary-button, .explore-command .secondary-button { width: 100%; }
  .explore-filter-row { align-items: stretch; flex-direction: column; }
  .explore-view .nearby-map { height: 55dvh; min-height: 410px; }
  .explore-view .nearby-poi-list { grid-template-columns: 1fr; }
  .explore-view .nearby-poi-list article { min-height: 104px; }
  .section-tabs { position: sticky; grid-template-columns: repeat(4,1fr); }
  .tab-button { min-width: 0; padding-inline: 4px; font-size: 10px; }
  .tab-button span { display: none; }
  .wind-actions { display: grid; width: 100%; }
  .weather-section .section-title-row { flex-direction: column; }
  .wind-summary { grid-template-columns: 1fr; }
  .wind-summary article, .wind-summary article:last-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .wind-summary article:last-child { border-bottom: 0; }
  .wind-ribbon { grid-template-columns: repeat(3,1fr); }
  .wind-ribbon-segment { border-bottom: 1px solid var(--line); }
  .weather-segments { grid-template-columns: 1fr; }
}

/* v0.16 — relief terrain, cartes cumulées et mode économie */
.leaflet-attribution-flag { display: none !important; }
.menu-button { flex: 0 0 auto; }
.side-menu-backdrop { position: fixed; inset: 0; z-index: 2998; border: 0; background: rgba(5,15,12,.58); backdrop-filter: blur(3px); }
.side-menu { position: fixed; z-index: 2999; top: 0; bottom: 0; left: 0; width: min(390px, 92vw); padding: max(22px, env(safe-area-inset-top)) 20px 24px; color: var(--white); background: #10231e; box-shadow: 26px 0 70px rgba(0,0,0,.32); transform: translateX(-104%); transition: transform var(--motion-standard) ease; }
.side-menu.is-open { transform: translateX(0); }
.side-menu-head { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 11px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.16); }
.side-menu-head > div { display: grid; gap: 4px; }
.side-menu-head strong { font-size: 15px; letter-spacing: .08em; }
.side-menu-head small { color: var(--lime); font: 700 10px/1 var(--font-data); letter-spacing: .12em; }
.side-menu-head .icon-button { color: var(--white); border-color: rgba(255,255,255,.2); font-size: 24px; }
.side-menu nav { display: grid; margin-top: 18px; gap: 18px; }
.side-menu-primary,.side-menu-secondary { display: grid; }
.side-menu-secondary { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
/* Une ligne du menu : une pastille facultative à gauche, le nom et sa
   précision à droite. La colonne de gauche n'était réservée que pour la
   pastille, mais une seule ligne sur quatorze en porte une — l'avatar du
   compte. Sur les treize autres, le nom se retrouvait placé tout seul dans
   cette colonne étroite et débordait par-dessus sa propre description :
   « Aventures » et « Vos voyages, dans l'ordre où ils arrivent » imprimés l'un
   sur l'autre. Le nom et la description sont donc explicitement rangés dans la
   colonne de texte, et la colonne de gauche disparaît quand il n'y a rien à y
   mettre. */
.side-menu nav button { display: grid; min-height: 75px; padding: 13px 5px; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; gap: 6px 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--white); background: transparent; text-align: left; cursor: pointer; }
.side-menu nav button > span { grid-column: 1; grid-row: 1 / 3; color: var(--lime); font: 700 11px/1.4 var(--font-data); }
.side-menu nav button strong { grid-column: 2; grid-row: 1; font-size: 15px; }
.side-menu nav button small { grid-column: 2; grid-row: 2; color: rgba(255,255,255,.58); font-size: 12px; }
/* Sans pastille, le texte prend toute la largeur : pas de colonne vide ni de
   gouttière à franchir. */
.side-menu nav button:not(:has(> span)) { grid-template-columns: minmax(0,1fr); }
.side-menu nav button:not(:has(> span)) strong,
.side-menu nav button:not(:has(> span)) small { grid-column: 1; }
.side-menu > p { margin: 24px 4px 0; color: rgba(255,255,255,.5); font: 600 11px/1.55 var(--font-data); }

.nearby-explorer { margin-top: 44px; padding: 26px; border: 1px solid var(--line); background: var(--paper); }
.nearby-heading { align-items: end; }
.nearby-heading p:not(.eyebrow) { max-width: 680px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.nearby-search-row { display: grid; margin: 22px 0 12px; grid-template-columns: minmax(180px,1fr) auto auto auto; align-items: end; gap: 8px; }
.nearby-search-row label { grid-column: 1 / -1; font: 700 11px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.nearby-search-row input { min-width: 0; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 0; background: var(--white); font-size: 16px; }
.nearby-status { min-height: 38px; padding: 11px 13px; color: var(--muted); border-left: 3px solid var(--lime); background: rgba(200,255,71,.09); font-size: 12px; line-height: 1.4; }
.nearby-status.is-loading { display: grid; gap: 7px; color: var(--ink); border: 1px solid var(--green); border-left-width: 5px; background: var(--white); }
.nearby-status.is-loading strong, .nearby-status.is-loading span { display: block; }
.nearby-status.is-loading i { display: block; height: 8px; overflow: hidden; background: var(--line); }
.nearby-status.is-loading b { display: block; height: 100%; background: var(--lime); transition: width var(--motion-standard) ease; }
.nearby-route-status-filter { display: flex; margin: 20px 0 12px; padding: 14px; flex-wrap: wrap; gap: 10px 22px; border: 1px solid var(--line); }
.nearby-route-status-filter legend { padding: 0 8px; font: 700 10px/1 var(--font-data); }
.nearby-route-status-filter label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.nearby-route-journeys { display: grid; max-height: 40vh; overflow: auto; border-top: 1px solid var(--line); }
.nearby-route-journeys label { display: grid; padding: 12px; grid-template-columns: 22px 1fr; align-items: center; border-bottom: 1px solid var(--line); cursor: pointer; }
.nearby-route-journeys span { display: grid; gap: 4px; }
.nearby-route-journeys small { color: var(--muted); }
.nearby-map { height: min(54vh, 520px); min-height: 360px; margin-top: 12px; border: 1px solid var(--line); background: #dce2db; }
.nearby-poi-list { display: grid; margin-top: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.nearby-poi-list article { display: grid; min-width: 0; min-height: 66px; padding: 10px; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--white); }
.nearby-poi-list article > div { display: grid; min-width: 0; gap: 4px; }
.nearby-poi-list article strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.nearby-poi-list article small { color: var(--muted); font-size: 11px; }
.nearby-poi-list article a { color: var(--green); font: 700 11px/1.2 var(--font-data); }
.nearby-knowledge-links { display: flex; flex-wrap: wrap; gap: 8px; }
.knowledge-link { color: var(--green); font: 700 11px/1.25 var(--font-data); text-decoration: underline; text-underline-offset: 2px; }

.climb-detection-panel { margin: 16px 0 30px; padding: 22px; }
.climb-detection-copy { max-width: 670px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.climb-threshold-summary { display: grid; margin-top: 14px; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: var(--r-button); overflow: hidden; }
.climb-threshold-summary > span { display: flex; min-height: 48px; padding: 10px 12px; align-items: center; justify-content: space-between; gap: 8px; border-right: 1px solid var(--line); }
.climb-threshold-summary > span:last-child { border-right: 0; }
.climb-threshold-summary small { color: var(--muted); font: 700 11px/1 var(--font-data); }
.climb-threshold-summary strong { white-space: nowrap; font: 750 16px/1 var(--font-data); }
.climb-preset-grid { display: grid; margin-top: 18px; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.climb-preset-button { display: grid; min-height: 86px; padding: 13px; align-content: center; gap: 7px; border: 1px solid var(--line); color: var(--ink); background: var(--white); text-align: left; cursor: pointer; }
.climb-preset-button strong { font-size: 13px; }
.climb-preset-button span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.climb-preset-button.is-active { border-color: var(--green); background: var(--lime); box-shadow: inset 0 -4px 0 var(--green); }
.climb-dialog { width: min(900px,calc(100% - 24px)); }
#climbDialogProfile { display: block; width: 100%; height: auto; margin: 18px 0; color: var(--muted); background: #eef1ec; touch-action: none; cursor: crosshair; }
.climb-dialog-area { fill: rgba(19,32,26,.06); }
.climb-dialog-line { fill: none; stroke: var(--green); stroke-width: 5; stroke-linejoin: round; }
/* Mêmes quatre tranches de pente que l'application iPhone : la courbe, la
   légende et la carte de répartition ne peuvent pas se contredire. */
.climb-grade-segment { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.climb-grade-segment.grade-easy, .climb-color-legend .grade-easy, .climb-grade-distribution b.grade-easy, .climb-cursor-readout strong.grade-easy { stroke: #8fbf6a; background: #8fbf6a; }
.climb-grade-segment.grade-medium, .climb-color-legend .grade-medium, .climb-grade-distribution b.grade-medium, .climb-cursor-readout strong.grade-medium { stroke: #e7c74b; background: #e7c74b; }
.climb-grade-segment.grade-hard, .climb-color-legend .grade-hard, .climb-grade-distribution b.grade-hard, .climb-cursor-readout strong.grade-hard { stroke: #ff9b3f; background: #ff9b3f; }
.climb-grade-segment.grade-severe, .climb-color-legend .grade-severe, .climb-grade-distribution b.grade-severe, .climb-cursor-readout strong.grade-severe { stroke: #ff7048; background: #ff7048; }
.climb-cursor-readout strong.grade-easy, .climb-cursor-readout strong.grade-medium, .climb-cursor-readout strong.grade-hard, .climb-cursor-readout strong.grade-severe { padding: 0 6px; background: none; }
.climb-cursor-readout strong.grade-easy { color: #4d7a30; }
.climb-cursor-readout strong.grade-medium { color: #97781a; }
.climb-cursor-readout strong.grade-hard { color: #b45c12; }
.climb-cursor-readout strong.grade-severe { color: #c33d18; }
.climb-cursor-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .55; }
.climb-cursor-dot { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.climb-cursor-help { margin: -8px 0 12px; color: var(--muted); font-size: 11px; }
.climb-cursor-readout { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.climb-cursor-readout article { display: grid; padding: 10px 12px; align-content: center; gap: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.climb-cursor-readout span { color: var(--muted); font: 700 9px/1.2 var(--font-data); text-transform: uppercase; }
.climb-cursor-readout strong { font: 700 15px/1 var(--font-data); }
.climb-cursor-readout small { color: var(--muted); font: 700 9px/1 var(--font-data); }
@media (max-width: 620px) { .climb-cursor-readout { grid-template-columns: repeat(2,1fr); } }
.climb-color-legend { display: flex !important; margin-bottom: 8px; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px 14px; }
.climb-color-legend span { display: inline-flex; align-items: center; gap: 5px; font: 700 9px/1 var(--font-data); }
.climb-color-legend i { width: 18px; height: 6px; }
#climbDialogProfile text { fill: var(--muted); font: 700 12px var(--font-data); }
.climb-dialog-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.climb-dialog-stats article { display: grid; min-height: 90px; padding: 15px; align-content: center; gap: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.climb-dialog-stats span { color: var(--muted); font: 700 11px/1 var(--font-data); text-transform: uppercase; }
.climb-dialog-stats strong { font: 500 24px/1 Georgia,serif; }
.climb-grade-distribution { display: grid; margin-top: 16px; gap: 8px; }
.climb-grade-distribution > div { display: grid; grid-template-columns: 65px 1fr 42px; align-items: center; gap: 9px; font: 700 11px/1 var(--font-data); }
.climb-grade-distribution i { height: 8px; overflow: hidden; background: var(--line); }
.climb-grade-distribution b { display: block; height: 100%; background: var(--lime); }
.climb-settings-dialog { width: min(820px,calc(100% - 24px)); }
.climb-setting-fields { display: grid; margin-top: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.climb-setting-button { display: grid; min-width: 0; min-height: 132px; padding: 18px; align-content: start; gap: 9px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: var(--white); text-align: left; cursor: pointer; }
.climb-setting-button span { color: var(--muted); font: 700 10px/1.2 var(--font-data); text-transform: uppercase; }
.climb-setting-button strong { font: 700 24px/1 var(--font-data); }
.climb-setting-button small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.climb-setting-button.is-selected { box-shadow: inset 0 -4px var(--lime); background: rgba(200,255,71,.1); }
.threshold-picker { display: grid; margin-top: 12px; padding: 16px; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; border: 1px solid var(--green); background: var(--white); }
.threshold-picker > div:first-child { display: grid; gap: 5px; }
.threshold-picker span { font: 700 11px/1 var(--font-data); }
.threshold-picker small { color: var(--muted); font-size: 11px; }
.threshold-stepper { display: grid; grid-template-columns: 52px minmax(100px,auto) 52px; align-items: center; gap: 8px; }
.threshold-stepper button { min-width: 52px; padding: 0; font-size: 22px; }
.threshold-stepper strong { text-align: center; }
.climb-settings-preview { display: flex; margin-top: 16px; padding: 15px; align-items: center; justify-content: space-between; gap: 16px; border-left: 4px solid var(--lime); background: rgba(200,255,71,.1); }
.climb-settings-preview span { font: 700 13px/1.3 var(--font-data); }
.climb-settings-preview small { color: var(--muted); font-size: 11px; }

.live-mode-header { display: none; align-items: center; justify-content: space-between; gap: 18px; padding: max(14px,env(safe-area-inset-top)) 0 15px; border-bottom: 1px solid var(--line); }
.live-mode-header > div { display: grid; gap: 4px; }
.live-mode-header span { color: var(--orange); font: 750 11px/1 var(--font-data); letter-spacing: .08em; }
.live-mode-header strong { font-size: 16px; }
.live-map-card { margin: 12px 0; padding: 18px; }
#liveMap { height: min(58vh,600px); min-height: 390px; margin-top: 13px; background: #dce2db; }
.live-profile-card { margin-top: 12px; }
.live-profile-controls { display: grid; margin: 12px 0 4px; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 9px; }
.live-profile-controls input { width: 100%; accent-color: var(--green); }
.live-profile-viewport { overflow: hidden; border: 1px solid var(--line); background: var(--paper); touch-action: none; }
#liveProfile { display: block; width: 100%; height: auto; min-height: 240px; touch-action: none; user-select: none; }
.live-poi-profile-line { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.live-poi-profile-label { fill: var(--orange); font: 800 11px var(--font-data); }
.live-profile-readout { display: grid; margin-top: 9px; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.live-profile-readout > span { display: grid; min-width: 0; min-height: 66px; padding: 10px; align-content: center; gap: 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.live-profile-readout small { color: var(--muted); font: 700 10px/1 var(--font-data); }
.live-profile-readout strong { font-size: 13px; }
.profile-title-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.profile-landscape-hint { max-width: 245px; color: var(--muted); font: 600 9px/1.35 var(--font-data); text-align: right; }
.live-capability-note { padding: 10px 12px; border-left: 3px solid var(--lime); background: rgba(200,255,71,.08); font-size: 12px !important; line-height: 1.5; }

.in-app-alerts { position: fixed; z-index: 5000; top: max(14px,env(safe-area-inset-top)); right: 14px; display: grid; width: min(390px,calc(100vw - 28px)); gap: 8px; pointer-events: none; }
.in-app-alert { display: grid; padding: 15px; grid-template-columns: 1fr 32px; gap: 10px; color: var(--white); border-left: 5px solid var(--lime); background: #10231e; box-shadow: 0 16px 45px rgba(0,0,0,.28); pointer-events: auto; animation: alert-in var(--motion-quick) ease-out; }
.in-app-alert > div { display: grid; gap: 5px; }
.in-app-alert span { color: var(--lime); font: 750 10px/1 var(--font-data); letter-spacing: .08em; }
.in-app-alert strong { font-size: 14px; }
.in-app-alert p { margin: 0; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.45; }
.in-app-alert button { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.22); color: var(--white); background: transparent; font-size: 20px; cursor: pointer; }
@keyframes alert-in { from { opacity: 0; transform: translateY(-10px); } }

.sponsor-slot:empty { display: none; }
.sponsor-slot:not(:empty) { display: grid; min-height: 72px; max-height: 96px; margin: 28px 0 0; place-items: center; overflow: hidden; border: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: 12px; }
.is-live-mode [data-ad-slot] { display: none !important; }
.is-live-mode .topbar, .is-live-mode .system-strip, .is-live-mode .route-heading, .is-live-mode .section-tabs { display: none !important; }
.is-live-mode .app-shell { max-width: 1440px; padding-top: 0; }
.is-live-mode .live-mode-header { display: flex; position: sticky; z-index: 1200; top: 0; background: rgba(244,246,242,.96); backdrop-filter: blur(14px); }
.is-live-mode #livePanel { display: block !important; }
.is-live-mode .tab-panel:not(#livePanel) { display: none !important; }

/* Les libellés de terrain restent lisibles sur petit écran. */
.eyebrow, .system-strip, .route-metadata, .poi-type, .poi-arrival, .timeline-content p,
.live-poi-main span, .live-poi-main small, .live-poi-order small, .dialog-intro,
.permission-note, .profile-help, .profile-pan-label, .count-pill,
.journey-empty span, .journey-card p, .journey-stages button small, .journey-no-stage,
.saved-route-card small, .poi-progress small, .live-deviation-card span { font-size: 11px !important; }

@media (max-width: 900px) {
  .climb-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .climb-preset-button:last-child { grid-column: 1 / -1; }
  .nearby-poi-list { grid-template-columns: 1fr; }
  .climb-setting-fields { grid-template-columns: repeat(3,minmax(148px,1fr)); overflow-x: auto; }
  .live-profile-readout { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .topbar { grid-template-columns: 44px minmax(0,1fr) auto; }
  .brand-copy small { font-size: 9px; }
  .nearby-explorer { margin: 30px -2px 0; padding: 16px; }
  .nearby-heading { align-items: stretch; flex-direction: column; }
  .nearby-heading .primary-button { width: 100%; }
  .nearby-search-row { grid-template-columns: 1fr 1fr; }
  .nearby-search-row input { grid-column: 1 / -1; }
  .poi-load-command { position: sticky; z-index: 890; top: 64px; padding: 13px; align-items: stretch; flex-direction: column; box-shadow: 3px 3px 0 var(--lime); }
  .poi-load-command .primary-button { width: 100%; min-width: 0; }
  .threshold-picker { grid-template-columns: 1fr; }
  .threshold-stepper { width: 100%; grid-template-columns: 54px 1fr 54px; }
  .profile-title-actions { align-items: flex-end; flex-direction: column; }
  .profile-landscape-hint { max-width: 190px; font-size: 8px; }
  .nearby-map { height: 52dvh; min-height: 350px; }
  .climb-detection-panel { padding: 15px; }
  .climb-preset-grid { grid-template-columns: 1fr; }
  .climb-preset-button:last-child { grid-column: auto; }
  .climb-dialog-stats { grid-template-columns: repeat(2,1fr); }
  .climb-threshold-summary { grid-template-columns: repeat(3,minmax(142px,1fr)); overflow-x: auto; }
  .climb-settings-preview { align-items: flex-start; flex-direction: column; }
  .climb-dialog-stats strong { font-size: 20px; }
  .live-mode-header { padding-right: 2px; padding-left: 2px; }
  .live-mode-header .secondary-button { padding: 0 12px; }
  .is-live-mode .app-shell { padding-right: 10px; padding-bottom: 24px; padding-left: 10px; }
  .is-live-mode #livePanel { padding-top: 0; }
  #liveMap { height: 53dvh; min-height: 360px; }
  #liveProfile { min-height: 210px; }
  .live-map-card, .live-profile-card { padding: 13px; }
  .live-profile-readout { grid-template-columns: repeat(2,1fr); }
  .in-app-alerts { right: 8px; width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Navigation terrain : le Live reste actif, mais ne bloque plus l'application. */
.mobile-navigation { display: none; }
.analysis-hub { padding: clamp(18px,3vw,32px); }
.analysis-dashboard { display: grid; gap: 16px; margin-top: 20px; }
.analysis-key-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); background: var(--white); }
.analysis-key-grid article { display: grid; min-height: 108px; padding: 17px; align-content: center; gap: 9px; border-right: 1px solid var(--line); }
.analysis-key-grid article:last-child { border-right: 0; }
.analysis-key-grid span { color: var(--muted); font: 750 10px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.analysis-key-grid strong { font-size: clamp(20px,3vw,32px); letter-spacing: -.04em; }
.analysis-climbs, .analysis-road-block { padding: 19px; border: 1px solid var(--line); background: rgba(255,255,255,.72); }
.analysis-climbs h3, .analysis-road-block h3 { margin: 0; font-size: 20px; }
.analysis-climbs p, .analysis-road-block > p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.analysis-climb-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.analysis-climb-list button { display: grid; min-height: 84px; padding: 13px; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 4px 10px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); background: var(--white); text-align: left; cursor: pointer; }
.analysis-climb-list button:hover { background: #f5f8f1; }
.analysis-climb-list span { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; color: var(--white); background: var(--orange); font: 800 11px/1 var(--font-data); }
.analysis-climb-list small { color: var(--muted); font-size: 12px; }
.analysis-road-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.is-live-mode .topbar, .is-live-mode .route-heading, .is-live-mode .section-tabs { display: inherit !important; }
.is-live-mode .topbar { display: grid !important; }
.is-live-mode .section-tabs { display: grid !important; }
.is-live-mode .app-shell { padding-top: inherit; }
.is-live-mode #livePanel:not(.is-hidden) { display: block; }
.is-live-mode #livePanel.is-hidden { display: none !important; }
.is-live-mode .tab-panel:not(#livePanel) { display: block; }
.is-live-mode .tab-panel.is-hidden { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-navigation { position: fixed; z-index: 1800; right: 0; bottom: 0; left: 0; display: grid; min-height: calc(66px + env(safe-area-inset-bottom)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); grid-template-columns: repeat(5,1fr); gap: 4px; border-top: 1px solid var(--line); background: rgba(250,252,248,.97); box-shadow: 0 -10px 30px rgba(12,33,27,.12); backdrop-filter: blur(16px); }
  .mobile-navigation button { display: grid; min-width: 0; min-height: 54px; place-items: center; gap: 3px; border: 0; color: var(--muted); background: transparent; font: 750 9px/1 var(--font-data); cursor: pointer; }
  .mobile-navigation button > span { font: 800 21px/1 var(--font-ui); }
  .mobile-navigation button.is-active { color: var(--green); }
  .mobile-navigation button.is-active::before { content: ""; position: absolute; width: 24px; height: 3px; margin-top: -57px; border-radius: var(--r-xs); background: var(--lime); }
  .mobile-navigation .mobile-live-button { margin-top: -21px; min-height: 67px; border: 1px solid #0c211b; border-radius: 14px 14px 8px 8px; color: var(--white); background: var(--green-deep); box-shadow: 0 7px 18px rgba(12,33,27,.24); }
  .mobile-navigation .mobile-live-button > span { color: var(--lime); font-size: 25px; }
  .mobile-navigation .mobile-live-button.is-active { color: var(--white); background: #123d32; }
  .mobile-navigation .mobile-live-button.is-active::before { display: none; }
  .side-menu-primary > button[data-menu-action="live"], .side-menu-primary > button[data-menu-action="home"], .side-menu-primary > button[data-menu-action="explore"], .side-menu-primary > button[data-menu-action="route"], .side-menu-primary > button[data-menu-action="preparation"] { display: none; }
  /* « Rouler » ne contenait que le Départ, qui vit dans la barre du bas sur
     téléphone : le titre restait seul, au-dessus du vide. */
  .side-menu-primary > .side-menu-group[data-family="rouler"] { display: none; }
  .analysis-key-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analysis-key-grid article:nth-child(2) { border-right: 0; }
  .analysis-key-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .analysis-climb-list, .analysis-road-copy { grid-template-columns: 1fr; }
  .is-live-mode .app-shell { padding-bottom: 0; }
  .is-live-mode .live-mode-header { top: 70px; }
}

/* Account and production presentation */
.account-button {
  display: inline-flex;
  min-height: 40px;
  padding: 4px 10px 4px 5px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  background: rgba(251,252,249,.92);
  cursor: pointer;
}
.account-avatar {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--r-button);
  color: var(--ink);
  background: var(--lime);
  font: 800 10px/1 var(--font-data);
}
.account-copy { display: grid; min-width: 76px; gap: 3px; text-align: left; }
.account-copy strong { max-width: 118px; overflow: hidden; font-size: 10px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { color: var(--muted); font: 700 7px/1 var(--font-data); letter-spacing: .1em; }
.account-sheet { width: min(560px, calc(100vw - 24px)); }
.account-state-card { display: grid; gap: 14px; margin-top: 24px; }
.account-state-card > p { margin: 6px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.account-state-card label { display: grid; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.account-state-card input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-button); background: var(--white); font-size: 16px; }
.account-security-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--ink); border-radius: var(--r-card); background: var(--lime); font: 800 14px/1 var(--font-data); }
.account-state-card > div > p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.account-google-button { min-height: 48px; }
.account-google-button span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #1a73e8; background: white; font: 800 12px/1 Arial,sans-serif; }
.account-separator { position: relative; text-align: center; }
.account-separator::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; border-top: 1px solid var(--line); }
.account-separator span { position: relative; padding: 0 10px; color: var(--muted); background: var(--paper); font-size: 10px; }
.account-user-line { display: flex; padding: 16px; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--r-button); background: var(--white); }
.account-avatar-large { width: 48px; height: 48px; font-size: 14px; }
.account-user-line > div { display: grid; min-width: 0; gap: 4px; }
.account-user-line small, .account-sync-grid small { color: var(--muted); font: 700 8px/1 var(--font-data); letter-spacing: .1em; }
.account-user-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-user-line span:not(.account-avatar) { color: var(--muted); font-size: 11px; }
.account-sync-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.account-sync-grid > div { display: grid; min-height: 92px; padding: 16px; align-content: space-between; border: 1px solid var(--line); border-radius: var(--r-button); }
.account-sync-grid strong { font-size: 20px; }
.account-message { min-height: 20px; margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.account-message[data-kind="success"] { color: #276d46; }
.account-message[data-kind="error"] { color: #a13f2b; }

@media (max-width: 620px) {
  .account-copy { display: none; }
  .account-button { width: 38px; height: 38px; padding: 4px; justify-content: center; }
  .account-avatar { width: 28px; height: 28px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .icon-button { width: 38px; height: 38px; }
}

/* FIELD SYSTEM 0.5 — technical interface layer */
.app-shell { width: min(1240px, 100%); }

.topbar { height: 68px; border-color: var(--line); }
.brand { gap: 10px; font-size: 12px; letter-spacing: .06em; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font: 800 12px/1 var(--font-data); letter-spacing: .08em; }
.brand-copy small { margin-top: 4px; color: var(--muted); font: 600 8px/1 var(--font-data); letter-spacing: .16em; }
.icon-button { width: 36px; height: 36px; padding: 9px; border-radius: var(--r-button); background: var(--white); }
.icon-button:hover { border-color: var(--ink); background: var(--lime); transform: none; }

.system-strip {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  min-height: 29px;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 600 8px/1 var(--font-data);
  letter-spacing: .08em;
  white-space: nowrap;
}
.system-strip span { display: inline-flex; min-height: 28px; padding: 0 13px; align-items: center; gap: 7px; border-right: 1px solid var(--line); }
.system-strip span:first-child { padding-left: 0; color: var(--ink); }
.status-led { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #55b879; box-shadow: 0 0 0 3px rgba(85,184,121,.12); }

.hero {
  display: grid;
  max-width: none;
  min-height: calc(100vh - 98px);
  margin: 0;
  padding: clamp(64px, 10vh, 110px) 0 72px;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(46px, 8vw, 110px);
  text-align: left;
}
.hero-copy { margin: 0; align-self: center; }
.hero h1 { max-width: 740px; font: 720 clamp(44px, 6.4vw, 78px)/.96 var(--font-ui); letter-spacing: -.06em; }
.hero h1 em { color: var(--green); font-style: normal; font-weight: 720; }
.hero-lede { max-width: 590px; margin: 28px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.eyebrow { margin-bottom: 14px; color: var(--green); font: 750 10px/1 var(--font-data); letter-spacing: .13em; }
.hero-capabilities { display: grid; max-width: 590px; margin: 34px 0 0; padding: 0; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); list-style: none; }
.hero-capabilities li { padding: 15px 12px 0 0; color: var(--muted); font: 650 10px/1.4 var(--font-ui); }
.hero-capabilities span { display: block; margin-bottom: 8px; color: var(--ink); font: 700 9px/1 var(--font-data); }
.drop-zone { grid-column: 2; grid-row: 1 / span 3; min-height: 430px; padding: 36px; align-self: stretch; border: 1px dashed #98a29c; border-radius: var(--r-card); background: rgba(251,252,249,.82); box-shadow: none; }
.drop-zone::before { content: none; }
.drop-zone::after { right: 19px; bottom: 15px; color: rgba(16,25,23,.055); font: 800 72px/1 var(--font-data); }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--ink); background: var(--white); transform: none; box-shadow: inset 0 -4px 0 var(--lime); }
.drop-zone strong { font: 760 16px/1 var(--font-data); letter-spacing: .04em; }
.drop-zone > span:not(.drop-icon) { font: 500 10px/1.5 var(--font-data); }
.drop-icon { width: 52px; height: 52px; margin-bottom: 18px; padding: 15px; border: 1px solid var(--ink); border-radius: var(--r-button); color: var(--ink); background: var(--lime); }
.text-button { width: max-content; margin-top: 34px; padding: 10px 0; font: 720 9px/1 var(--font-data); letter-spacing: .05em; }
.privacy-note { display: flex; max-width: 570px; margin: 12px 0 0; align-items: flex-start; gap: 8px; font: 500 9px/1.55 var(--font-data); }
.privacy-note .status-led { margin-top: 3px; }

h1, h2 { font-family: var(--font-ui); font-style: normal; font-weight: 690; }
.route-view { padding-top: 48px; }
.route-heading h1 { max-width: 820px; font: 720 clamp(38px, 5vw, 60px)/.98 var(--font-ui); letter-spacing: -.055em; }
.route-metadata { display: flex; gap: 0; margin-top: 18px; border-block: 1px solid var(--line); }
.route-metadata span { padding: 9px 14px; border-right: 1px solid var(--line); color: var(--muted); font: 650 9px/1 var(--font-data); letter-spacing: .06em; }
.route-metadata span:first-child { padding-left: 0; color: var(--ink); }
.preference-label { margin-top: 11px; font: 570 10px/1 var(--font-data); text-decoration: none; }

.primary-button, .secondary-button { min-height: 40px; padding: 0 15px; border-radius: var(--r-button); font: 720 10px/1 var(--font-data); letter-spacing: .035em; text-transform: uppercase; }
.primary-button:hover { transform: none; }
.button-pulse { width: 6px; height: 6px; box-shadow: none; }
.section-tabs { margin-top: 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tab-button { display: flex; min-height: 46px; padding: 0 18px; align-items: center; gap: 11px; border-right: 1px solid var(--line); font: 650 10px/1 var(--font-ui); }
.tab-button span { color: #909994; font: 650 8px/1 var(--font-data); }
.tab-button.is-active { color: var(--ink); box-shadow: inset 0 -3px 0 var(--lime); }
.tab-button.is-active span { color: var(--green); }

.card, .stat-card, .climb-card, .poi-card, .preference-card, .field-label, .loading-card, .empty-state {
  border-color: var(--line);
  border-radius: var(--r-card);
  background: rgba(251,252,249,.9);
  box-shadow: none;
}
.route-canvas { border-radius: var(--r-card); }
.route-canvas svg .map-bg { rx: 7px; }
.map-label { border-radius: var(--r-xs); font: 650 8px/1 var(--font-data); letter-spacing: .05em; }
.stats-grid { gap: 8px; }
.stat-card { min-height: 138px; padding: 18px; }
.stat-label { font: 650 9px/1 var(--font-data); letter-spacing: .08em; }
.stat-card strong { font: 720 clamp(30px, 4.3vw, 48px)/1 var(--font-data); letter-spacing: -.06em; }
.stat-card strong small { font-family: var(--font-data); font-size: 9px; letter-spacing: 0; }
.accent-stat { color: var(--ink); background: var(--lime); }
.insight-card { border-left: 4px solid var(--lime); border-radius: var(--r-card); color: var(--white); background: var(--ink); }
.insight-card h2 { font-size: clamp(25px, 3.5vw, 37px); }
.section-kicker, .count-pill, .profile-scale, .profile-legend, .climb-meta, .poi-type, .poi-distance, .poi-arrival, .schedule-status, .map-status, .live-status, .field-label, .settings-group legend { font-family: var(--font-data); }
.section-title-row h2, .upcoming-intro h2, .map-toolbar h2 { letter-spacing: -.04em; }
.profile-line { stroke-width: 2.5; }
.profile-gridline { stroke-dasharray: 2 5; }
.axis-label { font-family: var(--font-data); }
.climb-number { border-radius: var(--r-button); font: 700 15px/1 var(--font-data); }
.climb-card h3, .timeline-content h3, .empty-services strong, .leaflet-popup-content strong, .map-unavailable strong, .poi-card h3, .live-next-card strong, .preference-card strong { font-family: var(--font-ui); font-style: normal; font-weight: 680; }
.climb-grade strong, .timeline-distance, .detour-result strong, .live-stats strong { font-family: var(--font-data); font-style: normal; font-weight: 700; }
.count-pill, .distance-button, .poi-filter, .live-status { border-radius: var(--r-button); }
.timeline-item::before { border-radius: var(--r-xs); }
.timeline-tag { border-radius: var(--r-xs); font-family: var(--font-data); }
.interactive-map-card { border-radius: var(--r-card); background: #dce2db; }
.leaflet-popup-content-wrapper { border-radius: var(--r-button); box-shadow: var(--shadow); }
.leaflet-popup-content { font-family: var(--font-ui); }
.poi-map-marker { border-width: 2px; border-radius: var(--r-xs); box-shadow: 0 3px 9px rgba(16,25,23,.25); font-family: var(--font-data); }
.map-status { right: 12px; bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-xs); box-shadow: none; }
.poi-card h3 { margin-top: 20px; }
.detour-result { border-radius: var(--r-button); }
.detour-button, .google-maps-link { border-radius: var(--r-xs); font-family: var(--font-data); }
.live-hero { border: 1px solid #26312e; border-left: 4px solid var(--lime); border-radius: var(--r-card); background: var(--ink); }
.live-progress-track, .live-progress-track span { border-radius: 0; }
.settings-dialog { border: 1px solid #323b38; border-radius: var(--r-card); background: var(--paper); box-shadow: 0 24px 80px rgba(9,18,15,.35); }
.settings-dialog::backdrop { background: rgba(9,18,15,.72); backdrop-filter: blur(2px); }
.settings-header h2 { font-family: var(--font-ui); font-weight: 700; }
.preference-card { border-radius: var(--r-button); }
.preference-check { border-radius: var(--r-xs); }
.field-label input, .field-label select { border-radius: var(--r-xs); font-family: var(--font-data); }
.error-toast { border: 1px solid #742f20; border-radius: var(--r-button); box-shadow: var(--shadow); font-family: var(--font-data); }

@media (max-width: 860px) {
  .hero { display: block; min-height: auto; padding-top: 64px; }
  .hero-copy { margin-bottom: 36px; }
  .drop-zone { min-height: 260px; }
  .hero-capabilities { margin-top: 28px; }
}

@media (max-width: 760px) {
  body { padding-top: env(safe-area-inset-top); }
  .app-shell {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(60px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .system-strip { margin-inline: -14px; padding-left: 14px; }
  .system-strip span:first-child { padding-left: 0; }
  .hero { padding: 52px 0 56px; }
  .hero h1 { font-size: clamp(40px, 12vw, 59px); }
  .hero-capabilities { grid-template-columns: 1fr; }
  .hero-capabilities li { display: flex; gap: 12px; padding-top: 10px; }
  .hero-capabilities span { margin: 1px 0 0; }
  .drop-zone { min-height: 230px; margin-top: 32px; }
  .route-view { padding-top: 36px; }
  .route-metadata { overflow-x: auto; }
  .route-metadata span { flex: 0 0 auto; }
  .section-tabs { position: sticky; top: 0; z-index: 700; margin-top: 28px; background: rgba(244,246,242,.96); backdrop-filter: blur(12px); }
  .tab-button { min-height: 48px; padding: 0 14px; }
  .stat-card { min-height: 116px; }
  .primary-button, .secondary-button, .icon-button, .distance-button, .poi-filter, .detour-button, .google-maps-link { min-height: 44px; }
  .icon-button { min-width: 44px; }
  .field-label input, .field-label select { min-height: 40px; font-size: 16px; }
  .interactive-map-card, #leafletMap { height: min(62vh, 560px); min-height: 420px; }
  .settings-dialog { max-height: calc(100dvh - 16px); }
  .settings-sheet { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

@media (display-mode: standalone) {
  body { min-height: 100dvh; }
  .topbar { padding-top: env(safe-area-inset-top); height: calc(68px + env(safe-area-inset-top)); }
}

/* PRODUCT LAYER 0.9 */
.tab-button b { display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: var(--r-xs); color: var(--ink); background: var(--lime); font: 700 8px/1 var(--font-data); }
.operations-card { margin-top: 8px; padding: 28px; }
.analysis-state { display: inline-flex; padding: 7px 9px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); font: 650 8px/1 var(--font-data); letter-spacing: .06em; }
.analysis-state i { width: 6px; height: 6px; border-radius: 50%; background: #55b879; }
.operations-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-block: 1px solid var(--line); }
.operations-grid article { padding: 18px 20px 18px 0; border-right: 1px solid var(--line); }
.operations-grid article + article { padding-left: 20px; }
.operations-grid article:last-child { border-right: 0; }
.operations-grid span, .plan-summary-card > span { display: block; margin-bottom: 18px; color: var(--muted); font: 650 8px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.operations-grid strong { display: block; font: 700 clamp(26px, 4vw, 42px)/1 var(--font-data); letter-spacing: -.06em; }
.operations-grid small, .plan-summary-card small { display: block; margin-top: 8px; color: var(--muted); font: 500 9px/1.4 var(--font-data); }
.route-risk-strip { display: flex; min-height: 32px; margin-top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--paper-deep); }
.route-risk-strip.large { min-height: 46px; margin-top: 26px; }
.risk-segment { display: grid; min-width: 3px; place-items: center; border-right: 2px solid var(--white); background: #b9d6c2; }
.risk-segment:nth-child(even) { background: #a8c9b3; }
.risk-segment.is-critical { background: var(--orange); }
.risk-segment i { overflow: hidden; color: var(--ink); font: 700 8px/1 var(--font-data); font-style: normal; white-space: nowrap; }
.risk-empty { display: grid; width: 100%; place-items: center; color: var(--muted); font: 650 8px/1 var(--font-data); letter-spacing: .08em; }
.operations-actions { display: flex; margin-top: 17px; align-items: center; justify-content: space-between; gap: 20px; }
.operations-actions p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.plan-header { display: flex; margin: 4px 0 30px; align-items: end; justify-content: space-between; gap: 32px; }
.plan-header h2 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -.055em; }
.plan-header p:not(.eyebrow) { max-width: 680px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.plan-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.plan-summary-card { min-height: 150px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-button); background: rgba(251,252,249,.9); }
.plan-summary-card strong { display: block; font: 700 clamp(25px, 3.5vw, 40px)/1 var(--font-data); letter-spacing: -.055em; }
.plan-finish-card { color: var(--ink); border-color: #afd63d; background: var(--lime); }
.plan-finish-card > span, .plan-finish-card small { color: #334020; }
#planTargetStatus.is-late { color: #9a301c; font-weight: 700; }
.plan-section { margin-top: 12px; padding: 28px; }
.plan-section h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.045em; }
.count-pill.has-risk { color: #8d2d1a; border-color: rgba(255,112,72,.55); background: rgba(255,112,72,.12); }
.supply-gap-list { display: grid; margin-top: 18px; }
.supply-gap-row { display: grid; padding: 12px 0; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.supply-gap-row > span { width: max-content; padding: 5px 6px; border-radius: var(--r-xs); color: #36523d; background: rgba(85,184,121,.12); font: 700 8px/1 var(--font-data); }
.supply-gap-row.is-critical > span { color: #8d2d1a; background: rgba(255,112,72,.16); }
.supply-gap-row strong { display: block; font-size: 12px; }
.supply-gap-row small { display: block; margin-top: 5px; color: var(--muted); font: 500 9px/1 var(--font-data); }
.supply-gap-row > b { font: 700 14px/1 var(--font-data); }
.plan-stop-list { display: grid; margin-top: 22px; }
.plan-stop-row { display: grid; padding: 16px 0; grid-template-columns: 42px minmax(0, 1fr) 126px 36px; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); }
.plan-stop-index { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--r-xs); color: var(--ink); background: var(--lime); font: 700 10px/1 var(--font-data); }
.plan-stop-main > span { display: block; margin-bottom: 5px; color: var(--muted); font: 650 8px/1 var(--font-data); letter-spacing: .07em; }
.plan-stop-main > strong { display: block; font-size: 15px; }
.plan-stop-main > small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.plan-stop-main .schedule-status { display: inline-block; font-size: 8px; }
.plan-stop-row label { color: var(--muted); font: 600 9px/1 var(--font-data); }
.plan-stop-row input { width: 58px; min-height: 36px; margin: 0 4px 0 7px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--ink); background: var(--white); font: 650 12px/1 var(--font-data); }
.plan-remove { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: var(--r-xs); background: transparent; cursor: pointer; }
.plan-remove:hover { color: var(--white); border-color: var(--orange); background: var(--orange); }
.plan-empty { padding: 34px 0 8px; color: var(--muted); text-align: center; }
.plan-empty strong { color: var(--ink); font-size: 16px; }
.plan-empty p { margin: 8px auto 18px; font-size: 11px; line-height: 1.5; }
.plan-empty.compact { padding: 24px; border: 1px dashed var(--line); border-radius: var(--r-button); }
.plan-empty.compact p { margin-bottom: 0; }
.poi-card.is-planned { border-color: #96b835; box-shadow: inset 0 3px 0 var(--lime); }
.plan-toggle { width: 100%; min-height: 37px; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--white); font: 700 9px/1 var(--font-data); cursor: pointer; }
.plan-toggle:hover, .plan-toggle.is-active { border-color: var(--green); color: var(--ink); background: var(--lime); }
.timeline-item.is-planned::before { width: 12px; height: 12px; left: -41px; border-radius: var(--r-xs); background: var(--lime); box-shadow: 0 0 0 1px var(--green); }
.timeline-tag.planned { color: var(--ink); background: var(--lime); }

.weather-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.weather-segments { display: grid; margin-top: 22px; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.weather-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--r-button); background: var(--white); }
.weather-card.has-risk { border-color: rgba(255,112,72,.8); box-shadow: inset 0 3px 0 var(--orange); }
.weather-card > span { display: block; overflow: hidden; color: var(--muted); font: 600 8px/1.4 var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.weather-card > strong { display: block; margin-top: 20px; font: 700 32px/1 var(--font-data); letter-spacing: -.06em; }
.weather-card > b { display: block; margin-top: 6px; font-size: 11px; }
.weather-card > div { display: grid; gap: 5px; margin-top: 16px; color: var(--muted); font: 500 8px/1.2 var(--font-data); }
.weather-card.is-unavailable { color: var(--muted); background: var(--paper); }

@media (max-width: 900px) {
  .plan-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .weather-segments { grid-template-columns: repeat(2, 1fr); }
  .weather-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .operations-card, .plan-section { padding: 20px; }
  .operations-grid { grid-template-columns: 1fr; }
  .operations-grid article, .operations-grid article + article { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .operations-grid article:last-child { border-bottom: 0; }
  .operations-actions, .plan-header { align-items: stretch; flex-direction: column; }
  .plan-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .plan-actions .primary-button { grid-column: 1 / -1; }
  .plan-stop-row { grid-template-columns: 38px minmax(0, 1fr) 34px; }
  .plan-stop-row label { grid-column: 2 / -1; }
  .plan-stop-row input { min-height: 40px; font-size: 16px; }
  .supply-gap-row { grid-template-columns: 54px 1fr; }
  .supply-gap-row > b { grid-column: 2; }
  .weather-segments { grid-template-columns: 1fr; }
  .weather-card:last-child { grid-column: auto; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { color: #101917; background: #fff; }
  .app-shell { width: 100%; padding: 0; }
  .topbar, .system-strip, .section-tabs, .route-heading .primary-button, .plan-actions, .weather-section button, .plan-empty button, .error-toast { display: none !important; }
  .route-view { padding: 0; }
  .route-heading { margin-bottom: 8mm; }
  .route-heading h1 { font-size: 30pt; }
  .tab-panel { display: none !important; }
  #planPanel { display: block !important; }
  .plan-summary-grid { grid-template-columns: repeat(4, 1fr); }
  .plan-summary-card, .plan-section { break-inside: avoid; background: #fff; }
  .plan-section { padding: 16px; }
  .plan-stop-row, .supply-gap-row { break-inside: avoid; }
  .plan-remove { display: none; }
  .plan-stop-row { grid-template-columns: 32px 1fr 100px; }
}

/* PREPARATION + INTERACTIVE PROFILE 0.10 */
.route-library { width: 100%; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); text-align: left; }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.library-heading h2 { font-size: clamp(30px, 5vw, 46px); }
.library-heading > span { padding-bottom: 5px; color: var(--muted); font: 700 9px/1 var(--font-data); letter-spacing: .07em; text-transform: uppercase; }
.saved-route-grid { display: grid; margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.library-empty { display: grid; grid-column: 1 / -1; min-height: 116px; padding: 24px; place-content: center; gap: 7px; border: 1px dashed var(--line); border-radius: var(--r-button); color: var(--muted); text-align: center; }
.library-empty strong { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; }
.library-empty span { font-size: 11px; }
.saved-route-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-button); background: rgba(251,252,249,.72); transition: border-color var(--motion-quick) ease, transform var(--motion-quick) ease; }
.saved-route-card:hover { border-color: rgba(23,62,52,.48); transform: translateY(-2px); }
.saved-route-open { display: grid; width: 100%; min-width: 0; min-height: 136px; padding: 19px 46px 18px 19px; align-content: start; gap: 11px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.saved-route-open > span { color: var(--muted); font: 700 8px/1 var(--font-data); letter-spacing: .08em; }
.saved-route-open > strong { overflow: hidden; font: 500 23px/1.05 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }
.saved-route-open > small { color: var(--muted); font: 600 9px/1.5 var(--font-data); }
.saved-route-delete { position: absolute; top: 10px; right: 10px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid transparent; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.saved-route-delete:hover { color: var(--white); border-color: var(--orange); background: var(--orange); }
.saved-route-complete { position: absolute; right: 10px; bottom: 10px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green); background: var(--white); cursor: pointer; }
.saved-route-card.is-completed { border-color: rgba(23,62,52,.45); background: rgba(200,255,71,.07); }
.saved-route-card.is-completed .saved-route-open strong { text-decoration: line-through; text-decoration-color: rgba(23,62,52,.35); }
.journey-map-button { width: calc(100% - 28px); margin: 0 14px 14px; }
.poi-load-command { display: flex; margin: 12px 0; padding: 16px 18px; align-items: center; justify-content: space-between; gap: 18px; border: 2px solid var(--green); background: var(--white); box-shadow: 4px 4px 0 var(--lime); }
.poi-load-command > div { display: grid; gap: 5px; }
.poi-load-command span { color: var(--muted); font: 700 9px/1 var(--font-data); letter-spacing: .08em; }
.poi-load-command strong { font-size: 15px; }
.poi-load-command small { color: var(--muted); font-size: 11px; }
.poi-load-command .primary-button { min-width: 210px; }

.service-filter-bar { display: flex; margin-bottom: 12px; align-items: center; justify-content: space-between; gap: 14px; }
.service-filter-bar span { color: var(--muted); font: 650 9px/1.3 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.service-filter-dialog { width: min(610px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 0; border-radius: var(--r-card); color: var(--ink); background: var(--white); box-shadow: 0 28px 90px rgba(16,25,23,.26); }
.service-filter-dialog::backdrop { background: rgba(16,25,23,.58); backdrop-filter: blur(4px); }
.service-filter-sheet { padding: 26px; }
.service-check-list { display: grid; margin-top: 22px; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-check-list label { position: relative; display: flex; min-width: 0; min-height: 92px; padding: 15px; align-items: start; gap: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.service-check-list label:has(input:checked) { background: rgba(200,255,71,.11); box-shadow: inset 0 3px 0 var(--lime); }
.service-check-list input { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--green); }
.service-check-list label > span { display: grid; min-width: 0; grid-template-columns: 10px minmax(0,1fr); column-gap: 8px; }
.service-check-list strong { min-width: 0; font-size: 12px; }
.service-check-list small { grid-column: 2; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.service-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: var(--sand); }
.service-dot.water { background: #3e9dc9; }
.service-dot.fuel { background: #d05235; }
.service-dot.food { background: #d98a2f; }
.service-dot.sleep { background: #7f63b8; }
.service-dot.repair { background: #96bd35; }
.service-dot.transport { background: #435b55; }
.service-dot.health { background: #d55348; }
.service-dot.utility { background: #348d79; }
.service-dot.tourism { background: #c85e8d; }
.service-filter-actions { display: flex; margin-top: 20px; justify-content: space-between; gap: 10px; }
.popup-plan-button { display: block; width: 100%; min-height: 37px; margin-top: 12px; padding: 0 12px; border: 1px solid var(--green); border-radius: var(--r-xs); color: var(--white); background: var(--green); font: 700 9px/1 var(--font-data); cursor: pointer; }
.popup-plan-button.is-active { color: var(--ink); border-color: #9abe38; background: var(--lime); }
.popup-link { display: inline-flex !important; width: 100%; min-height: 34px; margin-top: 7px !important; align-items: center; justify-content: center; }

.profile-controls { display: flex; margin-top: 24px; padding: 10px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-button); background: var(--paper-deep); }
.profile-controls > label { display: grid; min-width: 160px; flex: 1; grid-template-columns: auto 1fr; align-items: center; gap: 8px; color: var(--muted); font: 650 9px/1 var(--font-data); text-transform: uppercase; letter-spacing: .06em; }
.profile-controls input { grid-column: 1 / -1; width: 100%; accent-color: var(--green); }
.profile-controls .secondary-button { min-width: 44px; padding: 0 13px; border-radius: var(--r-button); }
.profile-viewport { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-button); background: linear-gradient(180deg, rgba(200,255,71,.07), transparent 46%); cursor: crosshair; }
.profile-viewport svg { width: 100%; min-width: 0; margin: 0; overflow: hidden; touch-action: none; user-select: none; }
.profile-pan-label { display: grid; margin-top: 13px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px; color: var(--muted); font: 650 9px/1 var(--font-data); letter-spacing: .04em; text-transform: uppercase; }
.profile-pan-label input { width: 100%; accent-color: var(--green); }
.profile-pan-label input:disabled { opacity: .36; }
.profile-readout { display: grid; margin-top: 14px; padding: 14px 16px; grid-template-columns: auto auto auto auto auto auto; align-items: center; gap: 8px 12px; border-left: 3px solid var(--lime); background: var(--green-deep); color: var(--white); }
.profile-readout span { color: rgba(255,255,255,.52); font: 650 7px/1 var(--font-data); letter-spacing: .08em; }
.profile-readout strong { font: 700 13px/1 var(--font-data); }
.profile-cursor-line { stroke: rgba(16,25,23,.45); stroke-width: 1.5; stroke-dasharray: 4 4; }
.profile-cursor-dot { fill: var(--white); stroke: var(--green); stroke-width: 4; }
.profile-live-line { stroke: var(--orange); stroke-width: 3; }
.profile-live-arrow, .profile-live-dot { fill: var(--orange); stroke: var(--white); stroke-width: 3; }
.climb-zone-label { fill: #4a5e1a; font: 700 9px var(--font-data); }
.legend-position { height: 8px !important; background: var(--orange) !important; }
.climb-focus-button { margin-top: 11px; padding: 0; border: 0; color: var(--green); background: transparent; font: 700 9px/1 var(--font-data); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 760px) {
  .route-library { margin-top: 48px; }
  .saved-route-grid { grid-template-columns: 1fr; }
  .saved-route-open { min-height: 122px; }
  .service-filter-bar { align-items: stretch; flex-direction: column; }
  .service-filter-bar .secondary-button { width: 100%; }
  .service-filter-sheet { padding: 18px; }
  .service-check-list { grid-template-columns: 1fr; }
  .service-check-list label { min-height: 78px; }
  .service-filter-actions { display: grid; grid-template-columns: 1fr; }
  .service-filter-actions button { width: 100%; }
  .profile-card { padding: 18px; }
  .profile-card .section-title-row { flex-direction: column; gap: 4px; }
  .profile-controls { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; }
  .profile-controls #profileLocateButton { width: 100%; grid-column: 1 / -1; }
  .profile-viewport { margin-inline: -8px; }
  .profile-pan-label { grid-template-columns: 1fr; gap: 8px; }
  .profile-readout { grid-template-columns: auto 1fr; gap: 8px 14px; }
  .profile-readout strong { text-align: right; }
  .profile-legend { flex-wrap: wrap; gap: 10px 16px; }
  .climb-card { grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 15px; }
  .climb-number { width: 42px; height: 42px; font-size: 18px; }
  .climb-card h3 { font-size: 18px; }
  .climb-grade { grid-column: 2; display: flex; align-items: baseline; gap: 7px; min-width: 0; text-align: left; }
  .climb-grade strong { font-size: 22px; }
}

/* MOBILE LIVE + RELIABLE MAP 0.9.1 */
.map-toolbar-actions { display: flex; gap: 7px; flex-wrap: wrap; }
#leafletMap {
  background-color: #dce2db;
  background-image:
    linear-gradient(rgba(16,25,23,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,25,23,.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.live-timing-console { margin-top: 28px; padding: 20px; border: 1px solid rgba(255,255,255,.16); border-left: 3px solid var(--lime); border-radius: var(--r-button); background: rgba(255,255,255,.035); }
.live-timing-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.live-timing-heading div > span, .live-timing-heading > span { display: block; color: rgba(255,255,255,.5); font: 650 8px/1 var(--font-data); letter-spacing: .08em; }
.live-timing-heading div > strong { display: block; margin-top: 7px; font-size: 15px; }
.live-timing-fields { display: grid; margin-top: 18px; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.live-timing-fields label { display: flex; min-height: 52px; padding: 8px 10px; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xs); color: rgba(255,255,255,.6); font: 600 8px/1 var(--font-data); }
.live-timing-fields label span { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.55); }
.live-timing-fields input { width: 74px; padding: 4px; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); color: var(--white); background: transparent; font: 700 16px/1 var(--font-data); }
.live-km-range-label { display: block; margin-top: 18px; color: rgba(255,255,255,.5); font: 600 8px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.live-km-range { width: 100%; margin-top: 9px; accent-color: var(--lime); }
.live-timing-console > p { margin: 10px 0 0; color: rgba(255,255,255,.48); font: 500 9px/1.5 var(--font-data); }
.live-poi-panel { margin: 12px 0; padding: 28px; }
.live-poi-panel h2 { font-size: clamp(26px, 4vw, 38px); }
.live-poi-timings { display: grid; margin-top: 22px; }
.live-poi-row { display: grid; padding: 15px 0; grid-template-columns: 58px minmax(0, 1fr) 110px; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.live-poi-row.is-planned { padding-left: 12px; box-shadow: inset 3px 0 0 var(--lime); }
.live-poi-order { display: flex; align-items: center; flex-direction: column; gap: 6px; }
.live-poi-order > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--r-xs); color: var(--ink); background: var(--lime); font: 700 10px/1 var(--font-data); }
.live-poi-order small { color: var(--muted); font: 650 7px/1 var(--font-data); }
.live-poi-main strong { display: block; font-size: 14px; }
.live-poi-main span, .live-poi-main small { display: block; margin-top: 5px; color: var(--muted); font: 500 9px/1.4 var(--font-data); }
.live-poi-eta { text-align: right; }
.live-poi-eta > span { display: block; font: 700 24px/1 var(--font-data); letter-spacing: -.05em; }
.live-poi-eta small { display: block; margin-top: 4px; color: var(--muted); font: 650 7px/1 var(--font-data); }
.live-poi-eta a { display: inline-block; margin-top: 8px; color: var(--green); font: 650 8px/1 var(--font-data); }
.interactive-map-card.has-tile-error #leafletMap::after { content: "FOND OSM INDISPONIBLE — TRACE SEULE"; position: absolute; inset: auto 12px 12px 12px; z-index: 400; padding: 8px; color: var(--muted); background: rgba(244,246,242,.9); font: 650 8px/1 var(--font-data); text-align: center; }

@media (max-width: 760px) {
  .route-view, .tab-panel, .card, .route-heading, .plan-header, .map-toolbar { min-width: 0; max-width: 100%; }
  .section-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .tab-button { width: 100%; min-width: 0; padding: 0 6px; justify-content: center; border-bottom: 1px solid var(--line); font-size: 9px; }
  .tab-button span { display: none; }
  .route-metadata { flex-wrap: wrap; overflow: visible; }
  .system-strip { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
  .system-strip span:nth-child(n+3) { display: none; }
  .poi-filters { flex-wrap: wrap; overflow: visible; }
  .poi-filter { flex: 1 1 calc(33.333% - 7px); justify-content: center; }
  .map-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .map-toolbar-actions button { width: 100%; }
  .map-status { right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .live-timing-heading { flex-direction: column; gap: 10px; }
  .live-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .live-stats article { min-width: 0; padding-right: 6px; }
  .live-stats span { overflow-wrap: anywhere; font-size: 7px; letter-spacing: .04em; }
  .live-timing-fields { grid-template-columns: 1fr; }
  .live-timing-fields .primary-button { width: 100%; }
  .live-timing-fields input { font-size: 16px; }
  .live-poi-panel { padding: 20px; }
  .live-poi-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .live-poi-eta { grid-column: 2; display: flex; align-items: center; gap: 9px; text-align: left; }
  .live-poi-eta > span { font-size: 21px; }
  .live-poi-eta small { margin: 0; }
  .live-poi-eta a { margin: 0 0 0 auto; }
  .poi-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .google-maps-link { flex: 1 1 100%; }
  .poi-actions .google-maps-link { grid-column: 1 / -1; }
}

/* EUROPE + PERSONAL ROADBOOK 0.11 */
.notification-button { position: relative; }
.notification-led { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border: 2px solid var(--paper); border-radius: 50%; background: var(--sand); }
.notification-led.is-active { background: var(--lime); box-shadow: 0 0 0 2px rgba(200,255,71,.22); }

.route-heading { padding-bottom: 4px; }
.route-heading h1 { text-wrap: pretty; }
.section-title-row h2, .map-toolbar h2, .plan-header h2, .upcoming-intro h2 { line-height: 1.02; text-wrap: pretty; }
.overview-map-section { margin-top: 4px; }
.overview-map-heading { margin-bottom: 18px; align-items: end; }
.overview-map-heading h2 { font-size: clamp(30px, 4vw, 45px); }
.overview-map-heading p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.overview-map-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.route-canvas { height: clamp(390px, 48vw, 540px); }
#overviewLeafletMap { width: 100%; height: 100%; z-index: 0; background: #dce2db; }
.overview-map-fallback { position: absolute; inset: 0; z-index: 1; background: #d8ddcd; }
.overview-map-fallback svg { width: 100%; height: 100%; object-fit: cover; }
.route-canvas .map-label { z-index: 500; top: 0; left: 0; }
.poi-map-marker.personal { color: var(--ink); border-color: var(--ink); background: var(--lime); box-shadow: 0 0 0 4px rgba(200,255,71,.28); }
.popup-edit-button { display: block; width: 100%; min-height: 34px; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--ink); background: var(--white); font: 700 9px/1 var(--font-data); cursor: pointer; }

.service-filter-bar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.poi-scope-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-button); background: var(--paper-deep); }
.poi-scope-button { min-height: 34px; padding: 0 11px; border: 0; border-radius: var(--r-xs); color: var(--muted); background: transparent; font: 650 8px/1 var(--font-data); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.poi-scope-button.is-active { color: var(--white); background: var(--green); }
.roadbook-scope { margin-top: 10px; }
.poi-card.is-personal { border-color: #8baa33; box-shadow: inset 3px 0 0 var(--lime); }
.personal-poi-badge { display: inline-flex; width: max-content; margin-top: 14px; padding: 5px 7px; color: var(--ink); background: var(--lime); font: 700 7px/1 var(--font-data); letter-spacing: .08em; }
.personal-poi-note { padding: 10px !important; border-left: 2px solid var(--lime); background: var(--paper-deep); color: var(--ink) !important; }

.dialog-intro { max-width: 520px; margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.notification-dialog { width: min(720px, calc(100% - 24px)); }
.notification-permission-row { display: flex; margin-top: 22px; padding: 16px; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-left: 3px solid var(--lime); background: var(--white); }
.notification-permission-row div { display: grid; gap: 6px; }
.notification-permission-row span { color: var(--muted); font: 650 8px/1 var(--font-data); letter-spacing: .08em; }
.notification-permission-row strong { font-size: 13px; }
.notification-distance-grid { margin-top: 18px; }
.notification-actions { display: flex; margin-top: 24px; justify-content: space-between; gap: 10px; }
.personal-poi-dialog { width: min(680px, calc(100% - 24px)); }
.personal-poi-fields { display: grid; margin-top: 24px; grid-template-columns: 1fr 1fr; gap: 9px; }
.personal-poi-fields .wide-field { grid-column: 1 / -1; }
.personal-poi-fields .wide-field span { flex: 1; }
.personal-poi-fields input[type="text"] { width: 100%; max-width: none; }
.personal-poi-fields select { max-width: 145px; }
.personal-notify-distance { margin-top: 12px; }

.profile-help { margin: 10px 0 0; color: var(--muted); font: 550 9px/1.5 var(--font-data); }
.profile-selection-zone { fill: rgba(255,112,72,.16); }
.profile-selection-line { stroke: var(--orange); stroke-width: 2; }
.profile-viewport:has(.profile-selection-zone) { cursor: ew-resize; }
.profile-readout:has(strong:nth-of-type(5)) { grid-template-columns: repeat(5, auto 1fr); }

@media (max-width: 900px) {
  .profile-readout:has(strong:nth-of-type(5)) { grid-template-columns: auto 1fr auto 1fr; }
}

@media (max-width: 760px) {
  .topbar-actions { gap: 5px; }
  .overview-map-heading { align-items: stretch; }
  .overview-map-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .overview-map-actions button { width: 100%; }
  .route-canvas { height: 420px; }
  .route-canvas svg { min-height: 0; }
  .service-filter-bar > div { align-items: stretch; flex-direction: column; }
  .poi-scope-switch { display: grid; width: 100%; grid-template-columns: 1fr; }
  .poi-scope-button { width: 100%; }
  .notification-permission-row, .notification-actions { align-items: stretch; flex-direction: column; }
  .notification-permission-row button, .notification-actions button { width: 100%; }
  .personal-poi-fields { grid-template-columns: 1fr; }
  .personal-poi-fields .wide-field { grid-column: auto; }
  .profile-controls { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .profile-controls #profileLocateButton, .profile-controls #profileZoomSelectionButton, .profile-controls #profileClearSelectionButton { grid-column: 1 / -1; width: 100%; }
  .profile-readout:has(strong:nth-of-type(5)) { grid-template-columns: auto 1fr; }
}

/* TRIP OPERATIONS 0.13 */
.journey-library { width: 100%; margin-top: 64px; padding: 30px; border-radius: var(--r-card); color: var(--white); background: var(--green-deep); text-align: left; }
.hero-copy + .journey-library { margin-top: 0; }
.journey-library + .drop-zone { margin-top: 26px; }
.journey-library .eyebrow { color: var(--lime); }
.journey-library .library-heading { align-items: center; }
.journey-library .library-heading h2 { color: var(--white); }
.journey-library .library-heading p:not(.eyebrow) { max-width: 580px; margin: 8px 0 0; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.5; }
.journey-grid { display: grid; margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.journey-empty { display: grid; min-height: 176px; grid-column: 1 / -1; place-content: center; justify-items: center; gap: 8px; border: 1px dashed rgba(255,255,255,.22); text-align: center; }
.journey-empty strong { font: 500 23px/1.1 Georgia, serif; }
.journey-empty span { color: rgba(255,255,255,.55); font-size: 11px; }
.journey-empty button { margin-top: 7px; color: var(--white); border-color: rgba(255,255,255,.28); }
.journey-card { min-width: 0; padding: 18px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.045); }
.journey-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.journey-card-head > div > span { color: var(--lime); font: 650 8px/1 var(--font-data); letter-spacing: .08em; }
.journey-card h3 { margin: 10px 0 7px; font: 500 25px/1.05 Georgia, serif; }
.journey-card p { margin: 0; color: rgba(255,255,255,.56); font: 550 9px/1.4 var(--font-data); }
.journey-card .icon-button { flex: 0 0 auto; color: var(--white); border-color: rgba(255,255,255,.2); }
.journey-stages { display: grid; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.journey-stages button { display: grid; min-width: 0; padding: 12px 0; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--white); background: transparent; text-align: left; cursor: pointer; }
.journey-stages button:hover { color: var(--lime); }
.journey-stages button span { display: grid; width: 27px; height: 27px; place-items: center; color: var(--ink); background: var(--lime); font: 700 8px/1 var(--font-data); }
.journey-stages button strong { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.journey-stages button small, .journey-no-stage { color: rgba(255,255,255,.48); font: 550 8px/1 var(--font-data); }
.journey-no-stage { padding: 16px 0 2px; }
.journey-dialog { width: min(760px, calc(100% - 24px)); }
.journey-fields { display: grid; margin-top: 22px; grid-template-columns: 1fr 1fr; gap: 9px; }
.journey-fields input { min-width: 0; }
.journey-stage-picker { margin-top: 18px; }
.journey-stage-picker > div { display: grid; margin-top: 10px; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.journey-stage-picker label { display: grid; min-width: 0; min-height: 74px; padding: 12px; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.journey-stage-picker label:has(input:checked) { background: rgba(200,255,71,.14); box-shadow: inset 3px 0 0 var(--lime); }
.journey-stage-picker input { width: 17px; height: 17px; accent-color: var(--green); }
.journey-stage-picker label span { display: grid; min-width: 0; gap: 5px; }
.journey-stage-picker label strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.journey-stage-picker label small { color: var(--muted); font: 550 8px/1.4 var(--font-data); }
.journey-order { display: grid; margin-top: 14px; gap: 5px; }
.journey-order article { display: grid; padding: 9px; grid-template-columns: 34px minmax(0,1fr) 34px 34px; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--paper); }
.journey-order article > span { display: grid; width: 28px; height: 28px; place-items: center; color: var(--ink); background: var(--lime); font: 700 8px/1 var(--font-data); }
.journey-order article div { display: grid; min-width: 0; gap: 3px; }
.journey-order article strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.journey-order article small { color: var(--muted); font: 550 8px/1 var(--font-data); }
.journey-order article button { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }

.poi-progress { display: grid; margin: 12px 0; padding: 16px; gap: 10px; border-left: 4px solid var(--lime); color: var(--white); background: var(--green-deep); box-shadow: 0 10px 28px rgba(16,25,23,.16); }
.poi-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.poi-progress strong { font-size: 12px; }
.poi-progress > div > span { color: var(--lime); font: 700 13px/1 var(--font-data); }
.poi-progress small { color: rgba(255,255,255,.56); font: 550 9px/1.45 var(--font-data); }
.poi-progress-track { height: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.poi-progress-track span { display: block; width: 0; height: 100%; background: var(--lime); transition: width var(--motion-standard) ease; }
.poi-progress.is-complete { border-left-color: #70c982; }
.poi-progress.has-error { border-left-color: var(--orange); }
.poi-progress.has-error .poi-progress-track span { background: var(--orange); }
.poi-mobile-sheet { position: relative; }
.poi-sheet-handle { display: none; }
.live-deviation-card { display: flex; margin: 12px 0; padding: 22px 24px; align-items: center; justify-content: space-between; gap: 18px; border-left: 4px solid var(--lime); }
.live-deviation-card > div { min-width: 0; }
.live-deviation-card span { color: var(--muted); font: 650 8px/1 var(--font-data); letter-spacing: .08em; }
.live-deviation-card strong { display: block; margin-top: 8px; font: 500 23px/1 Georgia, serif; }
.live-deviation-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

@media (max-width: 760px) {
  .app-shell { padding-right: 14px; padding-bottom: 110px; padding-left: 14px; }
  .system-strip span:nth-child(1), .system-strip span:nth-child(4) { display: none; }
  .system-strip span:nth-child(3) { display: flex; }
  .hero { padding-top: 48px; }
  .hero-copy { margin-bottom: 30px; }
  .hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .journey-library { margin-top: 42px; padding: 19px; }
  .journey-library .library-heading { align-items: stretch; flex-direction: column; }
  .journey-library .library-heading button { width: 100%; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-fields, .journey-stage-picker > div { grid-template-columns: 1fr; }
  .route-library .library-heading { align-items: start; flex-direction: column; }
  .section-tabs { position: sticky; top: 0; z-index: 1100; margin-right: -14px; margin-left: -14px; padding: 0 14px; background: rgba(244,246,242,.96); backdrop-filter: blur(12px); }
  #leafletMap, .interactive-map-card { height: 62dvh; min-height: 430px; }
  .poi-mobile-sheet { position: sticky; bottom: 0; z-index: 950; max-height: 58px; margin: 10px -2px 0; overflow: auto; border: 1px solid var(--line); border-radius: 16px 16px 0 0; background: var(--paper); box-shadow: 0 -18px 45px rgba(16,25,23,.2); transition: max-height var(--motion-standard) ease; overscroll-behavior: contain; }
  .poi-mobile-sheet.is-expanded { max-height: 70dvh; }
  .poi-sheet-handle { position: sticky; top: 0; z-index: 2; display: grid; width: 100%; min-height: 57px; padding: 8px 14px; grid-template-columns: 1fr auto; align-items: center; gap: 3px 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: var(--white); text-align: left; cursor: pointer; }
  .poi-sheet-handle > span { grid-column: 1 / -1; width: 42px; height: 4px; margin: 0 auto 2px; border-radius: var(--r-pill); background: var(--line); }
  .poi-sheet-handle strong { font-size: 11px; }
  .poi-sheet-handle small { color: var(--muted); font: 600 8px/1 var(--font-data); }
  .poi-summary-row { padding: 15px; align-items: start; flex-direction: column; }
  .poi-list { padding: 0 12px 18px; grid-template-columns: 1fr; }
  .poi-card { min-height: 222px; }
  .poi-progress { position: sticky; top: 94px; z-index: 900; }
  .live-deviation-card { align-items: stretch; flex-direction: column; }
  .live-deviation-card a { width: 100%; }
}

/* 0.18 cascade lock */
.hero.home-dashboard { display: block; }
.weather-section .weather-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.explore-view .nearby-map { height: min(67vh, 680px); min-height: 500px; }

@media (max-width: 760px) {
  .section-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .tab-button { width: 100%; min-width: 0; padding-inline: 4px; }
  .weather-section .weather-segments { grid-template-columns: 1fr; }
  .explore-view .nearby-map { height: 55dvh; min-height: 410px; }
}

/* FIELD RELIABILITY 0.19 */
.push-delivery-row {
  display: grid;
  margin-top: 10px;
  padding: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  background: var(--paper-deep);
}
.push-delivery-row > div { display: grid; gap: 5px; }
.push-delivery-row span, .live-field-health b { color: var(--muted); font: 700 9px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.push-delivery-row strong { font-size: 15px; }
.push-delivery-row small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.push-delivery-row.is-ready { border-color: #94b636; box-shadow: inset 4px 0 0 var(--lime); }
.push-delivery-row.is-error { border-color: var(--orange); }
.live-field-health { display: grid; margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-button); background: rgba(255,255,255,.045); }
.live-field-health > span { display: grid; min-width: 0; padding: 12px; grid-template-columns: 9px 1fr; gap: 5px 8px; align-items: center; }
.live-field-health > span + span { border-left: 1px solid rgba(255,255,255,.12); }
.live-field-health i { width: 8px; height: 8px; grid-row: 1 / span 2; border-radius: 50%; background: #75807c; }
.live-field-health i.is-active { background: var(--lime); box-shadow: 0 0 0 4px rgba(200,255,71,.12); }
.live-field-health i.is-warning { background: var(--orange); }
.live-field-health b { color: rgba(255,255,255,.48); }
.live-field-health strong { min-width: 0; overflow: hidden; color: var(--white); font: 650 11px/1.25 var(--font-data); text-overflow: ellipsis; white-space: nowrap; }
.explore-poi-sheet { position: relative; z-index: 4; }
.explore-sheet-handle { display: none; }
.field-check-summary { display: flex; margin: 6px 0 16px; padding: 18px; align-items: center; gap: 18px; color: var(--white); border-radius: var(--r-button); background: var(--green-deep); }
.field-check-summary strong { color: var(--lime); font: 750 30px/1 var(--font-data); }
.field-check-summary span { font-size: 14px; }
.field-check-list { display: grid; border-top: 1px solid var(--line); }
.field-check-item { display: grid; padding: 14px 4px; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; border-bottom: 1px solid var(--line); }
.field-check-item > i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--white); background: var(--orange); font: 800 10px/1 var(--font-data); }
.field-check-item.is-ready > i { color: var(--ink); background: var(--lime); }
.field-check-item div { display: grid; gap: 4px; }
.field-check-item strong { font-size: 13px; }
.field-check-item small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.journey-progress { height: 6px; margin: 14px 0 8px; overflow: hidden; border-radius: var(--r-pill); background: rgba(255,255,255,.1); }
.journey-progress span { display: block; height: 100%; background: var(--lime); }
.journey-progress-label { color: rgba(255,255,255,.62); font: 700 9px/1 var(--font-data); letter-spacing: .05em; }
.journey-stages button.is-completed { opacity: .62; }
.journey-stages button.is-next { outline: 1px solid var(--lime); outline-offset: -1px; }
.journey-stages button em { color: var(--lime); font: 700 8px/1 var(--font-data); font-style: normal; letter-spacing: .06em; }
.journey-next-button { width: calc(100% - 28px); margin: 0 14px 8px; border-color: var(--lime); color: var(--ink); background: var(--lime); }
@media (max-width: 680px) {
  .push-delivery-row { grid-template-columns: 1fr; }
  .push-delivery-row button { width: 100%; }
  .live-field-health { grid-template-columns: 1fr; }
  .live-field-health > span + span { border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .explore-view { padding-bottom: 84px; }
  .explore-poi-sheet { position: fixed; right: 0; bottom: 0; left: 0; z-index: 850; max-height: min(72vh, 620px); padding: 0 14px calc(10px + env(safe-area-inset-bottom)); transform: translateY(calc(100% - 76px)); transition: transform .24s ease; border-top: 1px solid var(--line); background: rgba(247,249,245,.98); box-shadow: 0 -16px 40px rgba(16,25,23,.16); }
  .explore-poi-sheet.is-open { transform: translateY(0); }
  .explore-sheet-handle { display: grid; width: 100%; min-height: 66px; padding: 8px 0 10px; grid-template-columns: 1fr auto; align-items: center; border: 0; color: var(--ink); background: transparent; text-align: left; }
  .explore-sheet-handle > span { width: 42px; height: 4px; grid-column: 1 / -1; margin: 0 auto 5px; border-radius: var(--r-pill); background: var(--line); }
  .explore-sheet-handle strong { font-size: 14px; }
  .explore-sheet-handle small { color: var(--muted); font: 700 10px/1 var(--font-data); }
  .explore-poi-sheet .nearby-poi-list { max-height: calc(min(72vh, 620px) - 76px); overflow-y: auto; overscroll-behavior: contain; }
  .explore-poi-sheet:not(.is-open) .nearby-poi-list { visibility: hidden; }
  .field-check-summary { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .explore-poi-sheet { transition: none; } }

/* Mobile lists are explicit accordions, never sliding drawers. A vertical
   page remains easier to understand and prevents accidental gestures. */
@media (max-width: 760px) {
  .poi-mobile-sheet {
    position: relative;
    bottom: auto;
    z-index: auto;
    max-height: none;
    margin: 14px 0 0;
    overflow: visible;
    border-radius: var(--r-card);
    box-shadow: none;
    transition: none;
  }
  .poi-mobile-sheet:not(.is-expanded) > :not(.poi-sheet-handle) { display: none; }
  .poi-sheet-handle {
    position: relative;
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 0;
    background: var(--white);
  }
  .poi-mobile-sheet.is-expanded .poi-sheet-handle { border-bottom: 1px solid var(--line); }
  .poi-sheet-handle > span { display: none; }
  .explore-poi-sheet {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    max-height: none;
    padding: 0;
    transform: none;
    transition: none;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--paper);
    box-shadow: none;
  }
  .explore-poi-sheet.is-open { transform: none; }
  .explore-sheet-handle { min-height: 54px; padding: 8px 14px; }
  .explore-sheet-handle > span { display: none; }
  .explore-poi-sheet .nearby-poi-list { max-height: none; padding: 0 12px 12px; }
  .explore-poi-sheet:not(.is-open) .nearby-poi-list { display: none; visibility: visible; }
}

/* TRAVEL PREPARATION + AUDIO PHRASEBOOK 0.20 */
.standalone-view { width: min(1500px, calc(100% - 64px)); margin: 0 auto; padding: 62px 0 96px; }
.standalone-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.standalone-header > div { max-width: 840px; }
.standalone-header h1 { margin: 8px 0 12px; font-size: clamp(36px, 5vw, 72px); line-height: .98; letter-spacing: -.045em; }
.standalone-header p:last-child { max-width: 720px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.standalone-header > .secondary-button { flex: none; }
.preparation-command { display: grid; grid-template-columns: minmax(250px,.8fr) minmax(320px,1.4fr) minmax(260px,.8fr); gap: 1px; margin-bottom: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--line); }
.preparation-command > * { min-height: 124px; padding: 22px; background: var(--paper); }
.preparation-command label,.phrasebook-command label,.preparation-custom label { display: grid; align-content: center; gap: 8px; color: var(--muted); font: 700 11px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.preparation-command select,.phrasebook-command select,.phrasebook-command input,.preparation-custom select,.preparation-custom input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--r-button); color: var(--ink); background: var(--white); font: 650 15px/1.2 var(--font-ui); }
.preparation-departure { display: grid; align-content: center; gap: 5px; }
.preparation-departure > span { color: #4f760f; font: 800 10px/1 var(--font-data); letter-spacing: .12em; }
.preparation-departure strong { font-size: 21px; text-transform: capitalize; }
.preparation-departure small { color: var(--muted); font-size: 13px; }
.preparation-score { display: grid; align-content: center; gap: 12px; }
.preparation-score > span { font: 800 14px/1.2 var(--font-data); text-transform: uppercase; }
.preparation-score > div { height: 10px; overflow: hidden; border-radius: var(--r-pill); background: #d9ded9; }
.preparation-score i { display: block; width: 0; height: 100%; background: var(--lime); transition: width var(--motion-progress) ease; }
.preparation-timeline { display: grid; gap: 18px; max-width: 1120px; margin: 0 auto; }
.preparation-milestone { display: grid; grid-template-columns: 160px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); box-shadow: 0 10px 34px rgba(20,35,30,.05); }
.preparation-milestone > header { display: grid; align-content: start; gap: 12px; padding: 24px; color: var(--white); background: #15342c; }
.preparation-milestone > header > span { display: grid; width: 76px; min-height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-button); color: var(--lime); font: 850 13px/1 var(--font-data); letter-spacing: .08em; }
.preparation-milestone > header h2 { margin: 0; font-size: 18px; line-height: 1.15; }
.preparation-milestone > header small { display: block; margin-top: 5px; color: rgba(255,255,255,.62); font-size: 11px; }
.preparation-milestone > header > strong { color: rgba(255,255,255,.72); font: 750 11px/1 var(--font-data); }
.preparation-milestone.is-current { outline: 3px solid var(--lime); outline-offset: 2px; }
.preparation-milestone > div { display: grid; }
.preparation-task { position: relative; display: grid; min-height: 82px; padding: 15px 18px; grid-template-columns: 28px 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.preparation-task:last-child { border-bottom: 0; }
.preparation-task input { position: absolute; opacity: 0; pointer-events: none; }
.preparation-check { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-button); color: transparent; background: var(--paper); font-size: 14px; }
.preparation-task input:checked + .preparation-check { border-color: #183e34; color: #10231e; background: var(--lime); }
.preparation-task > span:nth-of-type(2) { display: grid; gap: 5px; }
.preparation-task small { color: var(--muted); font: 750 9px/1 var(--font-data); letter-spacing: .12em; }
.preparation-task strong { font-size: 15px; line-height: 1.4; }
.preparation-task.is-done strong { color: var(--muted); text-decoration: line-through; }
.preparation-task > button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 22px; cursor: pointer; }
.preparation-custom { display: grid; max-width: 1120px; margin: 28px auto 0; padding: 24px; grid-template-columns: 1.2fr .6fr 1.4fr auto; align-items: end; gap: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: #e6ebe4; }
.preparation-custom h2 { margin: 4px 0 0; font-size: 20px; }
.preparation-custom .primary-button { min-height: 48px; }
.journey-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.journey-secondary-actions .journey-map-button { margin: 0; width: auto; }
.phrasebook-command { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(280px,1.4fr) minmax(210px,.8fr) auto; align-items: end; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: #e5eae3; }
.phrase-favorite-filter { min-height: 48px; white-space: nowrap; }
.phrase-favorite-filter.is-active { border-color: #163c32; color: #10231e; background: var(--lime); }
.phrase-offline-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 0; padding: 18px 20px; border: 1px solid #2c5146; border-radius: var(--r-card); color: var(--white); background: #17372f; }
.phrase-offline-card > div { display: flex; align-items: center; gap: 15px; }
.phrase-offline-icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 50%; color: #11251f; background: var(--lime); font-size: 22px; font-weight: 800; }
.phrase-offline-card strong,.phrase-offline-card small { display: block; }
.phrase-offline-card small { max-width: 690px; margin-top: 4px; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.45; }
.phrasebook-status { display: flex; justify-content: space-between; gap: 16px; padding: 10px 4px 18px; color: var(--muted); font: 700 11px/1.35 var(--font-data); text-transform: uppercase; }
.phrasebook-status .is-ready { color: #29633c; }
.phrasebook-status .is-warning { color: #8a541e; }
.phrase-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.phrase-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); box-shadow: 0 8px 28px rgba(19,37,31,.055); transition: .18s; }
.phrase-card.is-speaking { border-color: #74a914; box-shadow: 0 0 0 3px rgba(188,255,50,.34); }
.phrase-card > header { display: flex; min-height: 46px; padding: 8px 12px 8px 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.phrase-card > header > span { color: var(--muted); font: 800 10px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; }
.phrase-favorite { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #748079; background: transparent; font-size: 23px; cursor: pointer; }
.phrase-favorite.is-active { color: #10231e; background: var(--lime); }
.phrase-pair { display: grid; min-height: 154px; grid-template-columns: 1fr 1fr; }
.phrase-pair > div { padding: 20px; }
.phrase-pair > div + div { border-left: 1px solid var(--line); background: #f1f5ee; }
.phrase-pair small { color: var(--muted); font: 750 9px/1 var(--font-data); letter-spacing: .11em; }
.phrase-pair p { margin: 10px 0 0; font-size: clamp(16px,1.8vw,21px); font-weight: 720; line-height: 1.35; }
.phrase-pair > div + div p { color: #123d31; }
.phrase-play { display: grid; width: 100%; min-height: 62px; padding: 10px 16px; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 11px; border: 0; border-top: 1px solid var(--line); color: var(--white); background: #15372e; text-align: left; cursor: pointer; }
.phrase-play > span { grid-row: 1/3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #10231e; background: var(--lime); font-size: 11px; }
.phrase-play strong { font-size: 14px; }
.phrase-play small { color: rgba(255,255,255,.58); font-size: 10px; }
.phrase-card.is-speaking .phrase-play > span { animation: phrase-pulse 1s ease infinite; }
.phrase-empty { grid-column: 1/-1; display: grid; min-height: 280px; place-items: center; align-content: center; gap: 8px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); color: var(--muted); text-align: center; }
.phrase-empty strong { color: var(--ink); font-size: 22px; }
@keyframes phrase-pulse { 50% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(188,255,50,.18); } }
@media (max-width:900px) {
  .standalone-view { width: min(100% - 34px,760px); padding-top: 38px; }
  .preparation-command { grid-template-columns: 1fr 1fr; }
  .preparation-score { grid-column: 1/-1; min-height: 88px; }
  .preparation-custom,.phrasebook-command { grid-template-columns: 1fr 1fr; }
  .preparation-custom > div,.preparation-custom .primary-button,.phrase-search { grid-column: 1/-1; }
  .phrase-search { grid-row: 1; }
  .phrase-list { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
  .standalone-view { width: 100%; padding: 28px 14px 88px; }
  .standalone-header { display: grid; gap: 18px; margin-bottom: 22px; }
  .standalone-header h1 { font-size: 38px; }
  .standalone-header p:last-child { font-size: 15px; }
  .standalone-header > .secondary-button { width: 100%; min-height: 46px; }
  .preparation-command,.preparation-custom,.phrasebook-command { display: grid; grid-template-columns: 1fr; }
  .preparation-command > * { min-height: 96px; padding: 16px; }
  .preparation-score,.preparation-custom > div,.preparation-custom .primary-button,.phrase-search { grid-column: auto; }
  .phrase-search { grid-row: auto; }
  .preparation-milestone { display: block; }
  .preparation-milestone > header { padding: 14px; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; }
  .preparation-milestone > header > span { width: 66px; min-height: 38px; }
  .preparation-milestone > header h2 { font-size: 16px; }
  .preparation-task { min-height: 78px; padding: 13px; gap: 11px; }
  .preparation-task strong { font-size: 14px; }
  .preparation-custom { padding: 17px; }
  .journey-secondary-actions { grid-template-columns: 1fr; }
  .phrase-favorite-filter,.phrase-offline-card .primary-button { width: 100%; }
  .phrase-offline-card { display: grid; padding: 15px; }
  .phrasebook-status { display: grid; font-size: 10px; }
  .phrase-pair { min-height: 0; grid-template-columns: 1fr; }
  .phrase-pair > div { min-height: 94px; padding: 16px; }
  .phrase-pair > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .phrase-pair p { font-size: 17px; }
}

/* FIELD DIAGNOSTICS + BACKUP 0.21 */
.terrain-session-card { display: flex; min-height: 112px; padding: 22px 24px; align-items: center; justify-content: space-between; gap: 22px; border-radius: var(--r-card); color: var(--white); background: #102a23; box-shadow: 0 12px 34px rgba(12,33,27,.16); }
.terrain-session-card > div { display: flex; min-width: 0; align-items: center; gap: 16px; }
.terrain-session-card > div > div { display: grid; gap: 5px; }
.terrain-session-card small { color: var(--lime); font: 800 10px/1 var(--font-data); letter-spacing: .12em; }
.terrain-session-card strong { font-size: 19px; }
.terrain-session-card span:last-child { color: rgba(255,255,255,.66); font-size: 12px; }
.terrain-session-led { width: 18px; height: 18px; flex: none; border: 4px solid rgba(255,255,255,.12); border-radius: 50%; background: #7d8884; }
.terrain-session-led.is-active { border-color: rgba(188,255,50,.25); background: var(--lime); box-shadow: 0 0 0 7px rgba(188,255,50,.09); animation: terrain-record 1.6s ease infinite; }
.terrain-session-card .is-recording { border-color: #ff8b6a; color: var(--white); background: #8c3827; }
@keyframes terrain-record { 50% { box-shadow: 0 0 0 12px rgba(188,255,50,0); } }
.terrain-readiness { margin: 16px 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.terrain-readiness > header,.terrain-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.terrain-readiness h2,.terrain-panel h2 { margin: 5px 0 0; font-size: 25px; line-height: 1.1; }
.terrain-readiness-score { display: grid; min-width: 130px; text-align: right; }
.terrain-readiness-score strong { font: 850 24px/1 var(--font-data); }
.terrain-readiness-score span { margin-top: 6px; color: var(--muted); font-size: 11px; }
.terrain-readiness-grid { display: grid; margin: 22px 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.terrain-readiness-item { display: grid; min-height: 80px; padding: 13px; grid-template-columns: 26px minmax(0,1fr); align-items: start; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.terrain-readiness-item > i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--white); background: var(--orange); font: 800 10px/1 var(--font-data); font-style: normal; }
.terrain-readiness-item.is-ready > i { color: var(--ink); background: var(--lime); }
.terrain-readiness-item div { display: grid; gap: 4px; }
.terrain-readiness-item strong { font-size: 13px; }
.terrain-readiness-item small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.terrain-readiness-actions,.terrain-test-actions,.terrain-backup-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.terrain-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(340px,.8fr); gap: 16px; align-items: start; }
.terrain-panel { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); box-shadow: 0 8px 28px rgba(19,37,31,.045); }
.terrain-panel > header > span { color: var(--muted); font: 700 10px/1.4 var(--font-data); text-align: right; }
.terrain-diagnostic { grid-row: span 2; }
.terrain-device-grid { display: grid; margin: 22px 0; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.terrain-device-item { display: grid; min-height: 112px; padding: 15px; align-content: start; gap: 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.terrain-device-item > span { color: var(--muted); font: 750 9px/1 var(--font-data); letter-spacing: .1em; }
.terrain-device-item > strong { font-size: 18px; }
.terrain-device-item > small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.terrain-device-item.is-ok > strong { color: #276139; }
.terrain-device-item.is-warning > strong { color: #9a512e; }
.terrain-test-actions { justify-content: flex-start; }
.terrain-log-head { display: flex; margin-top: 24px; padding: 14px 0 10px; justify-content: space-between; border-top: 1px solid var(--line); }
.terrain-log-head strong { font-size: 13px; }
.terrain-log-head span { color: var(--muted); font: 700 10px/1 var(--font-data); }
.terrain-log { display: grid; max-height: 430px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
.terrain-log-entry { display: grid; min-height: 58px; padding: 10px 4px; grid-template-columns: 68px 1fr; gap: 10px; border-bottom: 1px solid var(--line); }
.terrain-log-entry time { color: var(--muted); font: 700 10px/1.35 var(--font-data); }
.terrain-log-entry div { display: grid; gap: 3px; }
.terrain-log-entry strong { font-size: 12px; }
.terrain-log-entry small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.terrain-log-entry.is-error { border-left: 3px solid var(--orange); padding-left: 9px; }
.terrain-log-entry.is-success { border-left: 3px solid var(--lime); padding-left: 9px; }
.terrain-offline-summary,.terrain-backup-summary { display: grid; margin: 20px 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.terrain-offline-summary article,.terrain-backup-summary article { display: grid; min-height: 90px; padding: 13px; align-content: start; gap: 5px; border: 1px solid var(--line); background: var(--paper); }
.terrain-offline-summary span,.terrain-backup-summary span { color: var(--muted); font: 750 9px/1 var(--font-data); letter-spacing: .1em; }
.terrain-offline-summary strong,.terrain-backup-summary strong { font: 800 21px/1.1 var(--font-data); }
.terrain-offline-summary small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.terrain-route-packs { display: grid; border-top: 1px solid var(--line); }
.terrain-route-packs > article { display: flex; min-height: 72px; padding: 10px 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.terrain-route-packs > article > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.terrain-route-packs i { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 50%; color: var(--white); background: #7a8580; font: 800 12px/1 var(--font-data); font-style: normal; }
.terrain-route-packs i.is-ready { color: var(--ink); background: var(--lime); }
.terrain-route-packs article span { display: grid; min-width: 0; gap: 4px; }
.terrain-route-packs article strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.terrain-route-packs article small { color: var(--muted); font-size: 10px; }
.terrain-route-packs .secondary-button { min-height: 38px; padding-inline: 12px; }
.terrain-backup > p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.terrain-backup-actions { justify-content: stretch; }
.terrain-backup-actions > button { flex: 1; }
.terrain-empty { display: grid; min-height: 120px; place-items: center; align-content: center; gap: 5px; color: var(--muted); text-align: center; }
.terrain-empty strong { color: var(--ink); font-size: 14px; }
.terrain-empty span { font-size: 11px; }
@media (max-width:1050px) {
  .terrain-layout { grid-template-columns: 1fr; }
  .terrain-diagnostic { grid-row: auto; }
}
@media (max-width:760px) {
  .terrain-session-card { display: grid; }
  .terrain-session-card > button { width: 100%; }
  .terrain-readiness-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:520px) {
  .terrain-session-card,.terrain-readiness,.terrain-panel { padding: 16px; }
  .terrain-session-card strong { font-size: 16px; }
  .terrain-readiness > header { display: grid; }
  .terrain-readiness-score { text-align: left; }
  .terrain-readiness-grid,.terrain-device-grid,.terrain-offline-summary,.terrain-backup-summary { grid-template-columns: 1fr; }
  .terrain-readiness-actions,.terrain-test-actions,.terrain-backup-actions { display: grid; }
  .terrain-readiness-actions > button,.terrain-test-actions > button,.terrain-backup-actions > button { width: 100%; }
  .terrain-route-packs > article { align-items: stretch; flex-direction: column; }
  .terrain-route-packs > article > button { width: 100%; }
}
@media (prefers-reduced-motion:reduce) { .terrain-session-led.is-active { animation: none; } }

/* COMMUNITY + DYNAMIC MAP 0.23 */
.community-view { display: block; }
.community-profile-card { display: grid; margin-bottom: 16px; padding: 24px; grid-template-columns: 84px minmax(240px,1fr) minmax(360px,.9fr); align-items: center; gap: 22px; border-radius: var(--r-card); color: var(--white); background: #102a23; box-shadow: 0 16px 40px rgba(12,33,27,.14); }
.community-avatar { display: grid; width: 78px; height: 78px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--ink); background: var(--lime); font: 900 22px/1 var(--font-data); }
.community-profile-copy { display: grid; gap: 6px; }
.community-profile-copy > span { color: var(--lime); font: 800 10px/1 var(--font-data); letter-spacing: .14em; }
.community-profile-copy h2 { margin: 0; font-size: 25px; }
.community-profile-copy p { max-width: 620px; margin: 0 0 7px; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.5; }
.community-profile-copy .secondary-button { width: fit-content; border-color: rgba(255,255,255,.24); color: var(--white); background: transparent; }
.community-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.15); }
.community-stats article { display: grid; min-height: 82px; padding: 14px; align-content: center; gap: 5px; border-right: 1px solid rgba(255,255,255,.15); }
.community-stats article:last-child { border-right: 0; }
.community-stats span { color: rgba(255,255,255,.55); font: 750 9px/1 var(--font-data); letter-spacing: .09em; }
.community-stats strong { color: var(--lime); font: 850 21px/1 var(--font-data); }
.community-tabs { display: flex; position: sticky; z-index: 12; top: 68px; margin-bottom: 16px; padding: 5px; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(248,250,247,.94); backdrop-filter: blur(12px); }
.community-tabs button,.community-feed-filters button,.route-visualization-toolbar button,.live-roadbook-filters button { min-height: 40px; border: 0; border-radius: var(--r-button); color: var(--muted); background: transparent; font: 750 11px/1 var(--font-data); cursor: pointer; }
.community-tabs button { flex: 1; }
.community-tabs button.is-active,.community-feed-filters button.is-active,.route-visualization-toolbar button.is-active,.live-roadbook-filters button.is-active { color: var(--ink); background: var(--lime); }
.community-panel { min-width: 0; }
.journal-composer { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.journal-composer-head,.journal-actions,.community-feed-toolbar,.audio-library-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.journal-composer-head h2,.community-feed-toolbar h2,.audio-library-heading h2 { margin: 4px 0 0; font-size: 25px; }
.journal-composer-head > span { padding: 8px 10px; border-radius: var(--r-pill); color: #315246; background: #e7ede8; font: 750 10px/1 var(--font-data); }
.journal-fields { display: grid; margin-top: 20px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.journal-fields label,.audio-link-form label { display: grid; gap: 7px; color: var(--muted); font: 750 10px/1 var(--font-data); letter-spacing: .05em; }
.journal-fields input,.journal-fields select,.journal-fields textarea,.audio-link-form input,.audio-link-form select { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); background: var(--paper); padding: 11px 12px; font: 600 14px/1.45 var(--font-ui); }
.journal-fields textarea { resize: vertical; }
.journal-text-field,.journal-media-field { grid-column: 1/-1; }
.journal-media-field { min-height: 80px; padding: 14px; border: 1px dashed #9eb0a7; border-radius: var(--r-card); background: #f1f4ef; }
.journal-media-field input { min-height: 38px; padding: 6px; background: var(--white); }
.journal-media-field small { color: var(--muted); font: 500 11px/1.45 var(--font-ui); letter-spacing: 0; }
.journal-media-preview { display: grid; margin-top: 12px; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 8px; }
.journal-media-preview article { position: relative; min-height: 118px; overflow: hidden; border-radius: var(--r-card); background: #152b25; }
.journal-media-preview img,.journal-media-preview video { width: 100%; height: 118px; object-fit: cover; }
.journal-media-preview span { position: absolute; right: 6px; bottom: 6px; left: 6px; padding: 5px 7px; border-radius: var(--r-button); color: white; background: rgba(12,28,23,.82); font: 700 9px/1.2 var(--font-data); }
.journal-actions { margin-top: 16px; align-items: center; }
.journal-actions > span { color: var(--muted); font-size: 11px; }
.journal-list,.community-feed { display: grid; margin-top: 14px; gap: 12px; }
.journal-entry,.feed-entry { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.journal-entry-main,.feed-entry-main { padding: 20px; }
.journal-entry-head,.feed-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.journal-entry-head span,.feed-entry-head span { color: var(--muted); font: 750 9px/1.3 var(--font-data); letter-spacing: .08em; }
.journal-entry h3,.feed-entry h3 { margin: 7px 0 8px; font-size: 21px; }
.journal-entry p,.feed-entry p { margin: 0; color: #4e5f58; font-size: 13px; line-height: 1.6; white-space: pre-line; }
.journal-entry-meta { display: flex; margin-top: 14px; flex-wrap: wrap; gap: 6px; }
.journal-entry-meta span { padding: 6px 8px; border-radius: var(--r-button); color: #355147; background: #edf1ed; font: 700 9px/1 var(--font-data); }
.journal-entry-media { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 2px; background: #10231e; }
.journal-entry-media img,.journal-entry-media video { width: 100%; height: min(260px,32vw); min-height: 150px; object-fit: cover; }
.journal-entry-actions,.feed-entry-actions { display: flex; padding: 10px 14px; align-items: center; gap: 6px; border-top: 1px solid var(--line); background: #f7f8f5; }
.journal-entry-actions button,.feed-entry-actions button { min-height: 38px; border: 0; border-radius: var(--r-button); padding: 0 11px; color: #3d5149; background: #e8ece8; font: 750 10px/1 var(--font-data); }
.journal-entry-actions button.is-active,.feed-entry-actions button.is-active { color: var(--ink); background: var(--lime); }
.community-feed-toolbar { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.community-feed-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.community-feed-filters button { padding-inline: 12px; background: #edf0ec; }
.community-following { display: flex; margin: 12px 0; overflow-x: auto; gap: 8px; scrollbar-width: thin; }
.community-follow-card { display: grid; min-width: 230px; padding: 14px; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.community-follow-card > i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font: 800 12px/1 var(--font-data); font-style: normal; }
.community-follow-card span { display: grid; gap: 3px; }
.community-follow-card strong { font-size: 12px; }
.community-follow-card small { color: var(--muted); font-size: 10px; }
.community-follow-card button { min-height: 34px; border: 0; border-radius: var(--r-button); padding: 0 8px; color: var(--white); background: var(--ink); font: 700 9px/1 var(--font-data); }
.audio-link-form { display: grid; margin-top: 16px; padding: 20px; grid-template-columns: 160px 1fr 1fr auto; align-items: end; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.audio-link-grid { display: grid; margin-top: 12px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 9px; }
.audio-link-card { display: grid; min-height: 105px; padding: 16px; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.audio-link-card > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); }
.audio-link-card div { display: grid; gap: 5px; min-width: 0; }
.audio-link-card small { color: var(--muted); font: 700 9px/1 var(--font-data); }
.audio-link-card strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.audio-link-card a { color: var(--ink); font-size: 11px; font-weight: 750; }
.audio-link-card button { border: 0; color: var(--muted); background: transparent; font-size: 20px; cursor: pointer; }
.community-profile-fields { display: grid; gap: 12px; }
.community-profile-fields label { display: grid; gap: 7px; color: var(--muted); font: 750 10px/1 var(--font-data); }
.community-profile-fields input,.community-profile-fields textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 11px 12px; color: var(--ink); background: var(--paper); font: 600 14px/1.45 var(--font-ui); }
.community-profile-fields textarea { resize: vertical; }

.route-visualization-toolbar { display: flex; position: absolute; z-index: 500; top: 12px; left: 12px; right: 12px; min-height: 48px; padding: 6px; align-items: center; gap: 8px; border: 1px solid rgba(16,35,30,.12); border-radius: var(--r-card); background: rgba(248,250,247,.94); box-shadow: 0 6px 18px rgba(16,35,30,.12); backdrop-filter: blur(10px); }
.route-visualization-toolbar > span { padding-left: 7px; color: var(--muted); font: 800 9px/1 var(--font-data); letter-spacing: .1em; }
.route-visualization-toolbar > div { display: flex; flex: 1; gap: 3px; }
.route-visualization-toolbar button { min-height: 34px; padding-inline: 10px; background: #edf0ec; }
.route-visualization-toolbar .wind-overlay-toggle { margin-left: auto; color: #244c74; background: #e4edf6; }
.route-visualization-toolbar .wind-overlay-toggle[aria-pressed="true"] { color: var(--white); background: #244c74; }
.live-map-card { position: relative; }
.live-map-card .route-visualization-toolbar { position: static; margin: 12px 0 8px; box-shadow: none; }
.map-segment-popup { display: grid; gap: 4px; min-width: 160px; }
.map-segment-popup strong { font-size: 13px; }
.map-segment-popup span { color: #52635c; font-size: 11px; }
.climb-map-marker { display: grid; min-width: 30px; height: 30px; place-items: center; padding: 0 7px; border: 3px solid white; border-radius: var(--r-card); color: white; background: #d74c31; box-shadow: 0 3px 10px rgba(15,30,25,.28); font: 850 9px/1 var(--font-data); }
.climb-map-marker.is-hard { background: #111; }
.wind-map-arrow { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid white; border-radius: 50%; color: #0d4f79; background: rgba(226,242,251,.92); box-shadow: 0 3px 10px rgba(15,30,25,.22); font: 900 21px/1 var(--font-data); transform: rotate(var(--wind-angle)); }
.live-roadbook-filters { display: flex; margin: 12px 0; overflow-x: auto; gap: 5px; scrollbar-width: thin; }
.live-roadbook-filters button { flex: none; padding-inline: 12px; background: #e9ede9; }
.live-roadbook-row { cursor: pointer; }
.live-roadbook-row.is-next { border-color: #8dbf22; box-shadow: inset 4px 0 0 var(--lime); background: #fbfff1; }
.live-roadbook-row .live-poi-order.climb span { color: white; background: #d14a31; }
.live-roadbook-row .live-poi-order.steep span { color: white; background: #111; }
.live-roadbook-row .live-poi-main b { color: #294b40; font-size: 11px; }
.live-poi-eta em { color: var(--muted); font: 700 9px/1.3 var(--font-data); font-style: normal; }

@media (max-width:980px) {
  .community-profile-card { grid-template-columns: 72px 1fr; }
  .community-stats { grid-column: 1/-1; }
  .audio-link-form { grid-template-columns: 1fr 1fr; }
  .audio-link-form .primary-button { min-height: 48px; }
}
@media (max-width:680px) {
  .community-profile-card,.journal-composer,.community-feed-toolbar { padding: 16px; }
  .community-profile-card { grid-template-columns: 58px 1fr; gap: 12px; }
  .community-avatar { width: 56px; height: 56px; font-size: 16px; }
  .community-profile-copy h2 { font-size: 20px; }
  .community-stats { grid-template-columns: repeat(3,1fr); }
  .community-stats article { min-height: 72px; padding: 10px; }
  .community-stats strong { font-size: 17px; }
  .community-tabs { top: 58px; }
  .community-tabs button { font-size: 10px; }
  .journal-fields,.audio-link-form { grid-template-columns: 1fr; }
  .journal-text-field,.journal-media-field { grid-column: auto; }
  .journal-actions,.community-feed-toolbar { display: grid; }
  .journal-actions .primary-button { width: 100%; }
  .community-feed-filters { overflow-x: auto; flex-wrap: nowrap; }
  .journal-entry-media img,.journal-entry-media video { height: 210px; }
  .route-visualization-toolbar { top: 8px; right: 8px; left: 8px; overflow-x: auto; }
  .route-visualization-toolbar > span { display: none; }
  .route-visualization-toolbar > div { flex: none; }
  .route-visualization-toolbar button { min-width: 74px; padding-inline: 8px; font-size: 9px; }
  .route-visualization-toolbar .wind-overlay-toggle { min-width: 106px; }
  .live-map-card .route-visualization-toolbar { margin-top: 10px; }
}

/* Final production pass — keyboard, touch and small-screen legibility */
.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  color: var(--white);
  background: var(--green-deep);
  border-radius: var(--r-button);
  font-weight: 800;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #6f9913;
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; }

@media (max-width:760px) {
  .brand { min-height: 44px; }
  .icon-button, .account-button { min-width: 44px; min-height: 44px; }
  .account-button { width: 44px; height: 44px; }
  .saved-route-delete, .saved-route-complete { width: 44px; height: 44px; }
  .saved-route-open { padding-right: 60px; }
  .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; }
  .leaflet-control-attribution { font-size: 10px !important; }
  .home-atlas-summary, .privacy-note, .route-metadata span, .saved-route-open > span,
  .saved-route-open > small, .library-heading > span, .profile-landscape-hint,
  .live-stats span, .live-poi-main span, .live-poi-main small, .live-poi-eta small,
  .live-poi-eta a, .interactive-map-card.has-tile-error #leafletMap::after,
  .account-copy small, .account-user-line small, .account-sync-grid small,
  .journal-entry-head span, .feed-entry-head span { font-size: 11px !important; line-height: 1.35; }
  .tab-button { min-height: 44px; font-size: 11px; }
  .route-visualization-toolbar { flex-wrap: wrap; overflow: visible; }
  .route-visualization-toolbar > div { display: grid; width: 100%; flex: 1 0 100%; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .route-visualization-toolbar button { min-width: 0; min-height: 44px; font-size: 10px; }
  .route-visualization-toolbar .wind-overlay-toggle { width: 100%; min-width: 0; margin-left: 0; }
  .community-tabs button, .community-feed-filters button, .live-roadbook-filters button,
  .journal-entry-actions button, .feed-entry-actions button, .community-follow-card button,
  .audio-link-card button, .popup-edit-button, .poi-scope-button { min-height: 44px; }
}

/* PERFORMANCE UI 0.25 — sport, technique, lisible */
/* Palette consolidée dans l'unique :root du haut de la feuille. */


body {
  font-size: 15px;
  line-height: 1.5;
  background-image:
    linear-gradient(rgba(11, 21, 18, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 21, 18, .032) 1px, transparent 1px);
  background-size: 40px 40px;
}

.app-shell { width: min(1320px, 100%); padding-inline: 24px; }
.topbar {
  position: sticky;
  z-index: 1200;
  top: 0;
  height: 66px;
  padding-inline: 2px;
  background: rgba(243, 245, 241, .94);
  backdrop-filter: blur(16px);
}
.brand-mark { width: 34px; height: 34px; border-radius: var(--r-xs); background: var(--lime); font-size: 11px; }
.brand-copy strong { font-size: 13px; letter-spacing: .075em; }
.brand-copy small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.icon-button, .account-button { border-color: var(--line); border-radius: var(--r-button); background: var(--white); box-shadow: none; }
.icon-button:hover, .account-button:hover { border-color: var(--ink); background: var(--lime); transform: none; }

.side-menu { width: min(360px, 94vw); overflow-y: auto; padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); background: var(--green-deep); }
.side-menu-head { position: sticky; z-index: 2; top: -20px; padding-top: 20px; background: var(--green-deep); }
.side-menu nav { gap: 5px; }
.side-menu nav button {
  min-height: 66px;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-bottom-color: rgba(255,255,255,.13);
  border-radius: var(--r-button);
  grid-template-columns: 44px minmax(0,1fr);
  transition: background var(--motion-quick) ease, border-color var(--motion-quick) ease;
}
.side-menu nav button:hover, .side-menu nav button:focus-visible { border-color: rgba(186,255,50,.52); background: rgba(186,255,50,.08); }
.side-menu nav button > span { display: grid; min-height: 34px; place-items: center; color: var(--lime); border: 1px solid rgba(186,255,50,.34); border-radius: var(--r-xs); font-size: 10px; }
.side-menu nav button strong { font-size: 14px; letter-spacing: -.01em; }
.side-menu nav button small { color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.35; }
.side-menu nav .side-menu-live { margin-top: 12px; color: var(--ink); border-color: var(--lime); background: var(--lime); }
.side-menu nav .side-menu-live > span { color: var(--ink); border-color: rgba(11,21,18,.34); }
.side-menu nav .side-menu-live small { color: #314310; }
.side-menu nav .side-menu-live:hover, .side-menu nav .side-menu-live:focus-visible { border-color: var(--white); background: #ccff63; }
.side-menu > p { color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .09em; }

.home-dashboard { padding-top: clamp(38px, 7vh, 72px); }
.home-dashboard .hero-copy { margin-bottom: 28px; align-items: center; }
.home-dashboard .hero-copy h1 { max-width: 700px; font-size: clamp(44px, 6vw, 70px); line-height: .94; }
.home-dashboard .hero-copy h1 em { color: var(--green); }
.hero-lede { max-width: 640px; margin-top: 20px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.hero-capabilities li { color: var(--muted); font-weight: 680; }
.hero-capabilities span { color: var(--green); }
.home-atlas, .journey-library, .drop-zone, .saved-route-card, .card, .stat-card, .plan-section, .journal-composer, .journal-entry, .audio-link-card {
  border-radius: var(--r-button);
}
.home-atlas { padding: 22px; box-shadow: 0 1px 0 rgba(11,21,18,.04); }
.home-map-shell { border-radius: var(--r-button); }
.journey-library { background: var(--green-deep); }
.journey-library .library-heading p:not(.eyebrow) { color: rgba(255,255,255,.74); }
.drop-zone { min-height: 190px; border-style: solid; background: rgba(252,253,251,.82); }
.saved-route-card:hover { transform: none; box-shadow: inset 0 -3px 0 var(--lime); }

h1, h2, h3 { color: inherit; font-family: var(--font-ui); }
h1, h2 { font-weight: 780; letter-spacing: -.045em; }
.eyebrow { color: #315d12; font-size: 10px; letter-spacing: .12em; }
.primary-button, .secondary-button { min-height: 44px; padding-inline: 16px; border-radius: var(--r-xs); font-size: 11px; letter-spacing: .035em; }
.primary-button { color: var(--white); border-color: var(--green-deep); background: var(--green-deep); }
.primary-button:hover { color: var(--ink); border-color: var(--lime); background: var(--lime); transform: none; }
.secondary-button { background: var(--white); }
.secondary-button:hover { border-color: var(--ink); background: var(--paper-deep); }

.standalone-view { width: 100%; max-width: 1240px; padding-top: 48px; }
.standalone-header { margin-bottom: 26px; align-items: center; }
.standalone-header h1 { max-width: 820px; font-size: clamp(38px, 5vw, 64px); }
.standalone-header p:last-child { color: var(--muted); font-size: 15px; }
.standalone-actions { display: flex; flex: none; align-items: center; gap: 8px; }

.journal-view { display: block; }
.journal-private-banner { display: flex; margin-bottom: 14px; padding: 14px 16px; align-items: center; gap: 12px; border: 1px solid #8eb531; border-left: 5px solid var(--lime); border-radius: var(--r-button); background: #f8ffe9; }
.journal-private-banner .status-led { width: 8px; height: 8px; background: #3e7d24; }
.journal-private-banner > div { display: grid; gap: 2px; }
.journal-private-banner strong { font-size: 13px; }
.journal-private-banner small { color: #43513b; font-size: 12px; }
.community-tabs { top: 66px; padding: 4px; border-radius: var(--r-button); }
.community-tabs button { min-height: 44px; border-radius: var(--r-xs); color: var(--muted); font-size: 11px; }
.community-tabs button.is-active { color: var(--ink); background: var(--lime); }
.journal-composer { box-shadow: none; }
.journal-composer-head > span { color: #234b14; background: #e8f8c9; }
.journal-fields input, .journal-fields select, .journal-fields textarea, .audio-link-form input, .audio-link-form select { color: var(--ink); border-color: var(--line); border-radius: var(--r-xs); background: var(--white); font-size: 16px; }
.journal-entry-actions { justify-content: flex-end; }
.journal-entry-actions button { color: #7b2d1c; background: #f6e8e3; }

.section-tabs { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-button); background: var(--white); }
.tab-button { flex: 1; min-height: 48px; padding: 0 14px; justify-content: center; border-right: 1px solid var(--line); font-size: 11px; }
.tab-button:last-child { border-right: 0; }
.tab-button::after { display: none; }
.tab-button.is-active { color: var(--ink); background: var(--lime); box-shadow: none; }
.route-heading h1 { font-size: clamp(38px, 5vw, 58px); }
.stat-card { min-height: 132px; padding: 18px; background: var(--white); }
.stat-label { margin-bottom: 26px; color: var(--muted); }
.accent-stat { color: var(--white); background: var(--green-deep); }
.accent-stat .stat-label, .accent-stat small { color: rgba(255,255,255,.78); }
.live-hero { background: var(--green-deep); }

.drop-zone strong, .climb-card h3, .timeline-content h3, .empty-services strong,
.leaflet-popup-content strong, .map-unavailable strong, .poi-card h3, .detour-result strong,
.preference-card strong, .live-next-card strong, .library-empty strong, .saved-route-open > strong,
.journey-empty strong, .journey-card h3 { font-family: var(--font-ui); font-style: normal; }
.stat-card strong, .climb-number, .climb-grade strong, .timeline-distance, .live-stats strong,
.climb-threshold-summary strong, .climb-dialog-stats strong, .live-deviation-card strong { font-family: var(--font-data); font-style: normal; }

:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #557d00; outline-offset: 3px; }
.side-menu :where(button, a):focus-visible, .live-hero :where(button, a):focus-visible { outline-color: var(--lime); }

@media (max-width: 900px) {
  .standalone-header { align-items: stretch; flex-direction: column; }
  .standalone-actions { width: 100%; }
  .standalone-actions > * { flex: 1; }
}

@media (max-width: 760px) {
  body { font-size: 15px; background-size: 32px 32px; }
  .app-shell { padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); }
  .topbar { height: 60px; margin-inline: -12px; padding-inline: 12px; }
  .brand { gap: 7px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-copy small { display: none; }
  .topbar-actions { gap: 4px; }
  .side-menu { width: min(350px, 96vw); }
  .side-menu nav button { min-height: 64px; }
  .home-dashboard { padding-top: 34px; }
  .home-dashboard .hero-copy { margin-bottom: 20px; }
  .home-dashboard .hero-copy h1 { font-size: clamp(40px, 12vw, 52px); line-height: .96; }
  .hero-lede { margin-top: 18px; font-size: 15px; line-height: 1.55; }
  .hero-capabilities { margin-top: 22px; }
  .hero-capabilities li { min-height: 44px; padding: 12px 0; align-items: center; }
  .home-atlas { padding: 12px; }
  .home-atlas-heading h2 { font-size: 28px; }
  .home-atlas-heading p:not(.eyebrow) { font-size: 13px; }
  .home-atlas-actions { gap: 6px; }
  .home-atlas-actions > * { width: 100%; }
  .standalone-view { padding: 30px 12px 88px; }
  .standalone-header h1 { font-size: clamp(36px, 10vw, 44px); }
  .standalone-actions { display: grid; grid-template-columns: 1fr; }
  .standalone-actions > * { width: 100%; }
  .community-tabs { top: 60px; }
  .journal-fields { grid-template-columns: 1fr; }
  .journal-text-field, .journal-media-field { grid-column: auto; }
  .journal-actions { display: grid; gap: 12px; }
  .journal-actions .primary-button { width: 100%; }
  .section-tabs { position: sticky; top: 60px; margin-inline: -12px; padding: 0 12px; border-right: 0; border-left: 0; border-radius: 0; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .tab-button { min-width: 0; padding-inline: 3px; border-right: 1px solid var(--line); font-size: 11px; }
  .route-heading { align-items: stretch; flex-direction: column; }
  .route-heading .primary-button { width: 100%; }
  .route-metadata { max-width: 100%; }
  .stat-card { min-height: 116px; }
  .primary-button, .secondary-button, .icon-button, .account-button, .tab-button { min-height: 44px; }
  .eyebrow, .route-metadata span, .home-atlas-summary, .privacy-note, .saved-route-open > span, .saved-route-open > small { font-size: 11px !important; line-height: 1.35; }
}

@media (max-width: 390px) {
  .brand-copy strong { font-size: 11px; }
  .home-dashboard .hero-copy h1 { font-size: 42px; }
  .tab-button { font-size: 10px; }
}

@media (max-width: 360px) {
  .brand-copy { display: none; }
}

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

/* ROADBOOK SIGNAL SYSTEM 0.26 — identité terrain, contraste et lecture rapide */
/* Palette consolidée dans l'unique :root du haut de la feuille. */


body::before {
  content: "";
  position: fixed;
  z-index: 2000;
  inset: 0 0 auto;
  height: 4px;
  background: var(--signal-gradient);
  pointer-events: none;
}

.topbar { border-bottom: 2px solid var(--ink); }
.brand { gap: 8px; }
.brand-mark {
  position: relative;
  color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(7, 18, 15, .12);
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--paper);
  background: var(--orange);
}
.brand-signal { display: flex; width: 23px; height: 34px; align-items: flex-end; gap: 2px; }
.brand-signal i { display: block; width: 4px; background: var(--green-deep); }
.brand-signal i:nth-child(1) { height: 8px; }
.brand-signal i:nth-child(2) { height: 15px; }
.brand-signal i:nth-child(3) { height: 23px; background: var(--lime); box-shadow: inset 0 0 0 1px #6d970e; }
.brand-signal i:nth-child(4) { height: 31px; background: var(--orange); }
.brand-copy strong { font-weight: 900; letter-spacing: .105em; }
.brand-copy small { font-weight: 800; }

.hero-copy { position: relative; }
.hero-copy::before {
  content: none;
  display: none;
  background: var(--green-deep);
  font: 800 10px/1 var(--font-data);
  letter-spacing: .09em;
}
.hero-copy::after {
  content: none;
  display: none;
}

.eyebrow { color: #315b19; font-weight: 900; }
.route-heading .eyebrow, .standalone-header .eyebrow { display: inline-flex; padding: 6px 8px; color: var(--white); background: var(--green-deep); }
h1 { line-height: .98; }
h2 { line-height: 1.06; }
p, li, label, button, input, select, textarea { letter-spacing: -.005em; }

.card, .home-atlas, .journey-library, .drop-zone, .saved-route-card, .plan-section {
  position: relative;
}
.card::before, .home-atlas::before, .journey-library::before, .plan-section::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 18px;
  width: 54px;
  height: 4px;
  background: var(--lime);
  pointer-events: none;
}
.journey-library::before, .live-hero::before { background: var(--orange); }
.live-hero { position: relative; overflow: hidden; }
.live-hero::after {
  content: "LIVE";
  position: absolute;
  right: -14px;
  bottom: -36px;
  color: rgba(185, 255, 40, .055);
  font: 950 160px/1 var(--font-data);
  letter-spacing: -.12em;
  pointer-events: none;
}

.primary-button, .secondary-button, .tab-button, .icon-button, .account-button {
  font-weight: 850;
}
.primary-button { box-shadow: inset 0 -3px 0 rgba(255,255,255,.1); }
.primary-button:active, .secondary-button:active { transform: translateY(1px); }
.side-menu nav .side-menu-install { color: var(--white); border-color: rgba(185,255,40,.46); background: rgba(185,255,40,.09); }
.side-menu nav .side-menu-install > span { color: var(--ink); border-color: var(--lime); background: var(--lime); }
.side-menu nav .side-menu-install small { color: rgba(255,255,255,.78); }
.side-menu nav .side-menu-guide { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); }
.side-menu nav .side-menu-guide > span { color: var(--white); border-color: rgba(255,255,255,.38); }

.overview-terrain-legend {
  position: absolute;
  z-index: 460;
  right: 12px;
  bottom: 12px;
  display: flex;
  min-height: 38px;
  padding: 7px 9px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(7,18,15,.2);
  border-radius: var(--r-xs);
  color: var(--ink);
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 18px rgba(4,31,24,.12);
  backdrop-filter: blur(8px);
  font: 750 9px/1 var(--font-data);
}
.overview-terrain-legend strong { font-size: 9px; letter-spacing: .08em; }
.overview-terrain-legend span { display: inline-flex; align-items: center; gap: 4px; }
.overview-terrain-legend i, .route-scale-legend i { display: inline-block; width: 18px; height: 5px; }
.overview-terrain-legend .is-descent { background: #2586c8; }
.overview-terrain-legend .is-flat { background: #56a34a; }
.overview-terrain-legend .is-climb { background: #ed8a2d; }
.overview-terrain-legend .is-steep { background: #8f1f22; }

.route-scale-legend {
  position: absolute;
  z-index: 501;
  top: 72px;
  left: 12px;
  display: flex;
  min-height: 32px;
  padding: 6px 8px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(7,18,15,.18);
  border-radius: var(--r-xs);
  color: var(--ink);
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 16px rgba(4,31,24,.1);
  font: 750 9px/1 var(--font-data);
  pointer-events: none;
}
.route-scale-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.route-scale-legend.is-live { position: static; width: fit-content; margin: 0 12px 8px; box-shadow: none; }
.route-scale-legend .alt-low { background: hsl(210 68% 42%); }
.route-scale-legend .alt-mid { background: hsl(115 68% 45%); }
.route-scale-legend .alt-high { background: hsl(20 68% 46%); }
.route-scale-legend .grade-down { background: #2586c8; }
.route-scale-legend .grade-flat { background: #56a34a; }
.route-scale-legend .grade-up { background: #ed8a2d; }
.route-scale-legend .grade-hard { background: #8f1f22; }
.route-scale-legend .wind-help { background: linear-gradient(90deg,#176d4e,#e0bb39,#8f1f22); }

.install-dialog {
  width: min(900px, calc(100% - 24px));
  max-height: min(880px, calc(100dvh - 24px));
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--r-button);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 100px rgba(4,31,24,.36);
}
.install-dialog::backdrop { background: rgba(4,23,18,.74); backdrop-filter: blur(6px); }
.install-sheet { padding: 26px; }
.install-header { display: grid; padding-bottom: 22px; grid-template-columns: 72px 1fr 44px; align-items: start; gap: 18px; border-bottom: 2px solid var(--ink); }
.install-header h2 { max-width: 680px; font-size: clamp(31px,5vw,50px); }
.install-header p:last-child { max-width: 690px; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.install-brand-lockup { display: grid; width: 64px; height: 64px; padding: 7px; grid-template-columns: 1fr 7px 7px 7px; align-items: end; gap: 3px; color: var(--ink); background: var(--lime); }
.install-brand-lockup span { align-self: center; font: 950 18px/1 var(--font-data); }
.install-brand-lockup i { display: block; height: 18px; background: var(--green-deep); }
.install-brand-lockup i:nth-of-type(2) { height: 30px; }
.install-brand-lockup i:nth-of-type(3) { height: 44px; background: var(--orange); }
.install-benefits { display: grid; margin: 16px 0; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); background: var(--white); }
.install-benefits article { display: grid; min-height: 126px; padding: 16px; align-content: start; gap: 7px; border-right: 1px solid var(--line); }
.install-benefits article:last-child { border-right: 0; }
.install-benefits span, .permission-index { color: #315b19; font: 900 10px/1 var(--font-data); letter-spacing: .08em; }
.install-benefits strong { font-size: 15px; }
.install-benefits small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.install-platform-guide { display: grid; padding: 18px; grid-template-columns: minmax(180px,.7fr) minmax(280px,1.3fr) auto; align-items: center; gap: 18px; color: var(--white); background: var(--green-deep); }
.install-platform-guide .eyebrow { color: var(--lime); }
.install-platform-guide h3 { margin: 0; font-size: 20px; }
.install-platform-guide ol { display: grid; margin: 0; padding-left: 22px; gap: 7px; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.4; }
.install-platform-guide .primary-button { color: var(--ink); border-color: var(--lime); background: var(--lime); }
.install-permissions { display: grid; margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 10px; }
.install-permissions article { display: grid; padding: 17px; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--white); }
.install-permissions article > div { display: grid; gap: 5px; }
.install-permissions strong { font-size: 14px; }
.install-permissions small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.install-permissions p { grid-column: 1/-1; margin: 0; color: var(--muted); font: 750 10px/1.4 var(--font-data); }
.install-permissions p.is-ready { color: #286313; }
.install-permissions p.is-error { color: #9a321f; }
.install-footer { display: flex; margin-top: 16px; padding-top: 16px; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.install-footer p { max-width: 420px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.install-footer-actions { display: flex; flex-shrink: 0; gap: 8px; }

.poi-progress:not(.is-hidden), .explore-progress:not(.is-hidden) {
  border-left: 5px solid var(--lime);
  box-shadow: 0 8px 22px rgba(4,31,24,.08);
}
.poi-progress-track { height: 9px; background: #cfd7d1; }
.poi-progress-track span { background: var(--signal-gradient); transition: width var(--motion-standard) ease; }

@keyframes signalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185,255,40,.38); }
  50% { box-shadow: 0 0 0 7px rgba(185,255,40,0); }
}
.is-live-mode .live-dot, .is-live-mode .button-pulse { animation: signalPulse 1.8s ease-in-out infinite; }

@media (max-width: 760px) {
  .brand-signal { width: 16px; gap: 1px; }
  .brand-signal i { width: 3px; }
  .overview-terrain-legend { right: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow-x: auto; }
  .route-scale-legend { top: 112px; right: 8px; left: 8px; overflow-x: auto; }
  .route-scale-legend.is-live { width: calc(100% - 16px); margin-inline: 8px; }
  .install-sheet { padding: 16px; }
  .install-header { grid-template-columns: 52px 1fr 44px; gap: 11px; }
  .install-brand-lockup { width: 50px; height: 50px; padding: 6px; }
  .install-brand-lockup span { font-size: 14px; }
  .install-header h2 { font-size: 30px; }
  .install-header p:last-child { grid-column: 1/-1; font-size: 14px; }
  .install-benefits { grid-template-columns: 1fr; }
  .install-benefits article { min-height: 96px; border-right: 0; border-bottom: 1px solid var(--line); }
  .install-benefits article:last-child { border-bottom: 0; }
  .install-platform-guide { grid-template-columns: 1fr; }
  .install-platform-guide .primary-button { width: 100%; }
  .install-permissions { grid-template-columns: 1fr; }
  .install-permissions article { grid-template-columns: 1fr; }
  .install-permissions article > button { width: 100%; }
  .install-footer { align-items: stretch; flex-direction: column; }
  .install-footer-actions { flex-direction: column; }
  .install-footer-actions .primary-button, .install-footer-actions .secondary-button { width: 100%; }
}

@media (max-width: 390px) {
  .brand-signal { display: none; }
  .overview-terrain-legend strong { display: none; }
  .overview-terrain-legend { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-live-mode .live-dot, .is-live-mode .button-pulse { animation: none; }
}

@media (max-width: 760px) {
  .saved-route-open > span,
  .saved-route-open > small,
  .home-atlas-summary,
  .privacy-note,
  .route-metadata span,
  .dialog-intro,
  .nearby-poi-list article small,
  .poi-progress small,
  .service-check-list small,
  .live-deviation-card p,
  .live-field-health small,
  .live-poi-main span,
  .live-poi-main small,
  .live-poi-eta small,
  .live-poi-eta a {
    font-size: 12px !important;
    line-height: 1.45;
  }
  .tab-button,
  .primary-button,
  .secondary-button,
  .route-visualization-toolbar button {
    font-size: 12px;
  }
  .overview-terrain-legend,
  .overview-terrain-legend strong,
  .route-scale-legend {
    font-size: 10px;
  }
  .live-stats span { font-size: 12px !important; }
  .live-stats strong { font-size: clamp(24px, 8vw, 34px); }
}

/* FIELD LAYER 0.27 — suivi partagé, briefing et comptes rendus */
.field-briefing-grid {
  display: grid;
  margin: 18px 0 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.field-briefing-grid article {
  display: grid;
  min-height: 112px;
  padding: 15px;
  align-content: start;
  gap: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.field-briefing-grid span,
.ride-report-summary span {
  color: var(--muted);
  font: 850 10px/1.15 var(--font-data);
  letter-spacing: .08em;
}
.field-briefing-grid strong { font: 850 21px/1.05 var(--font-data); letter-spacing: -.045em; }
.field-briefing-grid small { color: var(--muted); font-size: 12px; line-height: 1.4; }

.live-checkin-console {
  display: flex;
  margin-top: 12px;
  padding: 15px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(185,255,40,.35);
  background: rgba(4,31,24,.72);
}
.live-checkin-console > div:first-child { display: grid; gap: 5px; }
.live-checkin-console > div:first-child > span { color: var(--lime); font: 850 10px/1 var(--font-data); letter-spacing: .09em; }
.live-checkin-console > div:first-child > strong { color: var(--white); font-size: 15px; }
.live-checkin-console > div:first-child > small { color: rgba(255,255,255,.72); font-size: 12px; }
.live-checkin-console > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.live-checkin-console .secondary-button { color: var(--white); border-color: rgba(255,255,255,.34); background: transparent; }

.live-share-dialog { width: min(760px, calc(100% - 24px)); }
.live-share-status-card {
  display: grid;
  margin: 18px 0;
  padding: 17px;
  gap: 6px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  background: var(--white);
}
.live-share-status-card.is-active { border-left-color: var(--lime); background: #f7ffe9; }
.live-share-status-card.has-error { border-left-color: var(--orange); background: #fff4ef; }
.live-share-status-card span { color: var(--muted); font: 850 10px/1 var(--font-data); letter-spacing: .09em; }
.live-share-status-card strong { font-size: 18px; }
.live-share-status-card small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.live-share-settings { margin-bottom: 12px; }
.live-share-privacy { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.terrain-reports { grid-column: 1 / -1; }
.terrain-report-note { margin: 16px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.terrain-report-list { display: grid; border-top: 1px solid var(--line); }
.terrain-report-list article { border-bottom: 1px solid var(--line); }
.terrain-report-list button {
  display: flex;
  width: 100%;
  min-height: 76px;
  padding: 12px 4px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.terrain-report-list button:hover { background: var(--paper); }
.terrain-report-list button span { display: grid; min-width: 0; gap: 4px; }
.terrain-report-list button small { color: var(--muted); font: 800 10px/1 var(--font-data); }
.terrain-report-list button strong { font-size: 15px; }
.terrain-report-list button em { color: var(--muted); font-size: 12px; font-style: normal; }
.terrain-report-list button b { flex: none; color: #315b19; font: 850 11px/1 var(--font-data); }

.ride-report-dialog { width: min(820px, calc(100% - 24px)); }
.ride-report-summary {
  display: grid;
  margin: 18px 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.ride-report-summary article {
  display: grid;
  min-height: 104px;
  padding: 14px;
  align-content: start;
  gap: 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.ride-report-summary strong { font: 850 23px/1 var(--font-data); letter-spacing: -.045em; }
.ride-report-timeline { display: grid; border-top: 1px solid var(--line); }
.ride-report-timeline article { display: grid; min-height: 52px; padding: 10px 2px; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.ride-report-timeline time { color: var(--muted); font: 800 11px/1 var(--font-data); }
.ride-report-timeline strong { font-size: 13px; }

@media (max-width: 760px) {
  .field-briefing-grid { grid-template-columns: 1fr 1fr; }
  .field-briefing-grid article { min-height: 104px; }
  .live-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .live-actions > button { width: 100%; }
  .live-checkin-console { align-items: stretch; flex-direction: column; }
  .live-checkin-console > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .live-checkin-console #liveFinishButton { grid-column: 1 / -1; }
  .live-share-actions { display: grid; }
  .ride-report-summary { grid-template-columns: 1fr 1fr; }
  .ride-report-summary article { min-height: 94px; }
}

@media (max-width: 390px) {
  .field-briefing-grid { grid-template-columns: 1fr; }
  .field-briefing-grid article { min-height: 90px; }
}

/* PRODUCTION RESPONSIVE PASS 0.28.1 */
body.has-side-menu-open { overflow: hidden; }

dialog {
  max-width: calc(100vw - 24px);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
dialog > form,
dialog .settings-header > div,
dialog .install-header > div { min-width: 0; }
dialog .settings-header h2,
dialog .install-header h2 { overflow-wrap: anywhere; text-wrap: pretty; }
dialog button.icon-button[value="close"] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  flex: none;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: var(--r-button);
  color: var(--ink);
  background: var(--white);
  font: 800 24px/1 var(--font-ui);
}
dialog button.icon-button[value="close"]:hover,
dialog button.icon-button[value="close"]:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--lime);
}

@media (max-width: 760px) {
  body { padding-top: 0 !important; }
  .topbar {
    display: grid;
    height: calc(64px + env(safe-area-inset-top));
    min-height: calc(64px + env(safe-area-inset-top));
    margin-inline: -12px;
    padding: env(safe-area-inset-top) 12px 0;
    grid-template-columns: 44px minmax(44px, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--ink);
  }
  .topbar .menu-button,
  .topbar-actions .icon-button,
  .topbar .account-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .topbar .menu-button { padding: 10px; }
  .brand {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    justify-self: start;
    justify-content: center;
    gap: 0;
  }
  .brand-mark { width: 36px; height: 36px; }
  .brand-signal,
  .brand-copy,
  .account-copy,
  #settingsButton { display: none !important; }
  .topbar-actions {
    min-width: 0;
    justify-self: end;
    gap: 6px;
  }
  .account-button { padding: 4px; justify-content: center; }
  .account-avatar { width: 32px; height: 32px; }

  .home-atlas-heading,
  .explore-header,
  .standalone-header,
  .library-heading {
    width: 100%;
    min-width: 0;
    align-items: stretch;
    flex-direction: column;
  }
  .home-atlas-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .home-atlas-actions > *,
  .explore-header > button,
  .standalone-header > .secondary-button { width: 100%; }
  .home-atlas-heading > div,
  .explore-header > div,
  .standalone-header > div { min-width: 0; }

  .side-menu {
    width: min(360px, calc(100vw - 16px));
    padding-right: 14px;
    padding-left: 14px;
    overscroll-behavior: contain;
  }
  .side-menu-head {
    top: calc(-1 * max(20px, env(safe-area-inset-top)));
    grid-template-columns: 42px minmax(0,1fr) 44px;
  }
  .side-menu-head .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .side-menu nav button {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    grid-template-columns: 42px minmax(0,1fr);
  }

  dialog.settings-dialog,
  dialog.service-filter-dialog,
  dialog.install-dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    margin: auto;
    border-radius: var(--r-button);
  }
  .settings-sheet,
  .service-filter-sheet,
  .install-sheet { padding: 16px; }
  .settings-header {
    display: grid;
    padding-bottom: 16px;
    grid-template-columns: minmax(0,1fr) 44px;
    align-items: start;
    gap: 12px;
  }
  .settings-header h2 { font-size: clamp(27px, 8vw, 36px); line-height: 1; }
  .settings-header .icon-button,
  .install-header .icon-button {
    position: sticky;
    z-index: 8;
    top: 8px;
  }
  .install-header {
    grid-template-columns: 50px minmax(0,1fr) 44px;
    gap: 10px;
  }
  .install-header h2 { font-size: clamp(27px, 8vw, 34px); }
  .install-header p:last-child { grid-column: 1 / -1; }

  .settings-sheet > .notification-actions:last-child,
  .service-filter-sheet > .service-filter-actions:last-child,
  .install-footer {
    position: sticky;
    z-index: 7;
    bottom: 0;
    margin-right: -2px;
    margin-left: -2px;
    padding: 12px 2px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(241,244,238,.97);
    backdrop-filter: blur(12px);
  }
  .settings-sheet > .notification-actions:last-child,
  .service-filter-sheet > .service-filter-actions:last-child,
  .install-footer-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .settings-sheet > .notification-actions:last-child > *,
  .service-filter-sheet > .service-filter-actions:last-child > *,
  .install-footer-actions > * { width: 100%; }
}

@media (max-width: 390px) {
  #newRouteButton { display: none !important; }
  .topbar { grid-template-columns: 44px minmax(44px,1fr) auto; }
  .topbar-actions { gap: 5px; }
  .home-dashboard .hero-copy h1 { font-size: clamp(38px, 12vw, 46px); }
}

/* Roadbook 0.29 — préparation rapide, lecture terrain et analyse de route */
.departure-picker {
  display: grid;
  padding: 13px;
  grid-column: 1 / -1;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--white);
}
.field-label-title {
  color: var(--muted);
  font: 800 11px/1 var(--font-data);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.departure-picker-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.departure-picker-fields label { display: grid; gap: 7px; color: var(--muted); font: 750 11px/1 var(--font-data); }
.departure-picker-fields input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); font-size: 16px; }
.departure-presets, .pause-choice { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.departure-presets button, .pause-choice button {
  min-height: 44px;
  padding: 7px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper);
  font: 800 11px/1 var(--font-data);
}
.departure-presets button:active, .pause-choice button.is-active { border-color: var(--green); background: var(--lime); }
.plan-stop-dialog { width: min(620px,calc(100% - 20px)); }
.plan-stop-dialog .primary-button { width: 100%; margin-top: 16px; }

.road-analysis-card { display: grid; margin-top: 12px; padding: clamp(16px,3vw,25px); gap: 16px; }
.road-analysis-command { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.road-analysis-command h2 { margin: 5px 0 6px; font-size: clamp(24px,4vw,36px); }
.road-analysis-command p { max-width: 760px; margin: 0; color: var(--muted); }
.road-analysis-command .primary-button { flex: none; }
.road-analysis-progress { display: grid; gap: 7px; }
.road-analysis-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; font: 800 11px/1 var(--font-data); }
.road-analysis-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.road-analysis-summary > section { padding: 14px; border: 1px solid var(--line); background: var(--paper); }
.road-analysis-summary > section h3 { margin: 0 0 12px; font-size: 16px; }
.road-analysis-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.road-analysis-heading h3 { margin-bottom: 12px !important; }
.road-analysis-heading span { color: var(--muted); font: 700 10px/1.2 var(--font-data); text-align: right; }
.road-analysis-summary > section article { display: grid; margin-top: 10px; gap: 6px; }
/* Le nom du revêtement à gauche, sa part à droite. Le nom peut être long
   (« Bande / aménagement vélo ») : c'est lui qui cède la place, jamais le
   chiffre — un pourcentage tronqué ne veut plus rien dire. */
.road-analysis-summary > section article > div:first-child { display: flex; justify-content: space-between; gap: 10px; font: 750 11px/1.25 var(--font-data); }
.road-analysis-summary > section article > div:first-child strong { min-width: 0; }
.road-analysis-summary > section article > div:first-child span { flex: 0 0 auto; }
.road-analysis-summary > section article span { color: var(--muted); text-align: right; }
.road-analysis-summary > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.road-analysis-bar { height: 9px; overflow: hidden; background: var(--paper-deep); }
.road-analysis-bar i { display: block; height: 100%; }
.road-analysis-group { padding: 14px; border: 1px solid var(--line); background: var(--paper); }
.road-analysis-group > strong { display: block; margin-bottom: 12px; font-size: 15px; }
.road-analysis-bars { display: grid; gap: 8px; }
.road-analysis-row { display: grid; grid-template-columns: minmax(105px,auto) 1fr 46px; align-items: center; gap: 9px; font: 750 11px/1.2 var(--font-data); }
.road-analysis-row i { height: 9px; overflow: hidden; background: var(--paper-deep); }
.road-analysis-row i b { display: block; height: 100%; background: var(--analysis-color,var(--green)); }
.road-analysis-row > b { text-align: right; }
.road-analysis-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.live-share-choices { margin-top: 16px; }
.live-share-privacy { margin: 12px 0 0; padding: 12px 14px; border-left: 4px solid var(--lime); color: var(--muted); background: var(--paper); font-size: 13px; line-height: 1.5; }
.live-share-actions { margin-top: 16px; }

.is-live-mode #livePanel { width: 100%; max-width: 1180px; margin-inline: auto; overflow: clip; }
.live-profile-card .section-title-row { align-items: flex-start; }
.live-profile-card .profile-title-actions { max-width: 430px; }
.live-profile-card .profile-landscape-hint { max-width: 310px; }
.live-poi-panel { overflow: hidden; }
.live-roadbook-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: visible; }
.live-roadbook-filters button { min-width: 0; padding: 8px; white-space: normal; }
.live-poi-row, .live-poi-main { min-width: 0; }
.live-poi-main strong, .live-poi-main span, .live-poi-main small { overflow-wrap: anywhere; }
.live-profile-viewport { min-height: 0; }
#liveProfile { min-height: 0; aspect-ratio: 16 / 7; }
.route-visualization-toolbar > div { flex-wrap: wrap; }

@media (max-width: 760px) {
  .departure-picker-fields, .road-analysis-summary { grid-template-columns: 1fr; }
  .departure-presets, .pause-choice { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .road-analysis-command { align-items: stretch; flex-direction: column; }
  .road-analysis-command .primary-button { width: 100%; }
  .road-analysis-row { grid-template-columns: 96px 1fr 42px; }
  .road-analysis-note { grid-column: auto; }

  .live-mode-header { min-height: 72px; }
  .live-mode-header > div { min-width: 0; }
  .live-mode-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .live-mode-header .secondary-button { min-width: 136px; }
  .live-profile-card .section-title-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .live-profile-card .profile-title-actions { display: grid; width: 100%; max-width: none; grid-template-columns: 1fr; align-items: stretch; }
  .live-profile-card .profile-landscape-hint { max-width: none; text-align: left; }
  .live-profile-card .profile-title-actions .secondary-button { width: 100%; }
  .live-profile-controls { grid-template-columns: 52px minmax(0,1fr) 52px; }
  .live-profile-controls .secondary-button { min-width: 52px; min-height: 52px; padding: 0; font-size: 20px; }
  .live-roadbook-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .live-roadbook-filters button { width: 100%; padding-inline: 7px; font-size: 11px; line-height: 1.2; }
  .live-poi-panel { padding: 16px; }
  .live-poi-panel h2 { max-width: 100%; margin: 0; font-size: clamp(25px,8vw,34px); overflow-wrap: anywhere; }
  .live-poi-row { padding-block: 14px; grid-template-columns: 44px minmax(0,1fr); gap: 11px; }
  .live-poi-row.is-planned { padding-left: 7px; }
  .live-poi-eta { grid-column: 2; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 5px 10px; }
  .live-poi-eta a { grid-column: 1 / -1; width: fit-content; margin: 3px 0 0; }
  .live-timing-console { padding: 16px; }
  .live-timing-fields { grid-template-columns: 1fr; }
  .live-timing-fields label { min-height: 64px; }
  .live-timing-fields input { width: 100%; }
  .route-visualization-toolbar > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 390px) {
  .departure-presets, .pause-choice { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .live-mode-header .secondary-button { min-width: 124px; padding-inline: 8px; font-size: 10px; }
  .live-profile-readout > span { min-height: 72px; padding: 9px; }
  .live-profile-readout strong { font-size: 14px; }
}

/* Final interface pass: these rules intentionally follow the legacy layers. */
@media (min-width: 761px) {
  .topbar {
    display: grid;
    height: 78px;
    grid-template-columns: 46px minmax(220px,1fr) auto;
    align-items: center;
    gap: 14px;
    border-bottom-color: rgba(7,18,15,.82);
  }
  .topbar .menu-button { width: 42px; height: 42px; }
  .brand { min-width: 0; }
  .brand-copy { gap: 4px; }
  .brand-copy strong { font-size: 14px; letter-spacing: .11em; }
  .brand-copy small { font-size: 9px; letter-spacing: .14em; }
  .topbar-actions { justify-self: end; gap: 7px; padding: 5px; border: 1px solid rgba(7,18,15,.16); border-radius: var(--r-button); background: rgba(255,255,255,.58); }
  .topbar-actions .icon-button { border-color: transparent; background: transparent; }
  .topbar-actions .icon-button:hover { border-color: var(--ink); background: var(--white); }
  .account-button { min-height: 42px; padding: 5px 10px 5px 5px; border-color: transparent; background: var(--green-deep); color: var(--white); }
  .account-button:hover { border-color: var(--green-deep); background: var(--green); }
  .account-copy small { color: rgba(255,255,255,.64); }
  .side-menu-install { display: none !important; }
}

.primary-button { border-color: var(--green-deep); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 0 rgba(4,31,24,.14); }
.secondary-button { border-color: #7f9086; background: var(--white); box-shadow: inset 0 -1px 0 rgba(4,31,24,.08), 0 1px 0 rgba(4,31,24,.06); }
.secondary-button:hover,.secondary-button:focus-visible { border-color: var(--green-deep); color: var(--green-deep); background: #f8fbf5; }
.icon-button { border-color: #87968e; box-shadow: inset 0 -1px 0 rgba(4,31,24,.08), 0 1px 0 rgba(4,31,24,.06); }
.icon-button:hover,.icon-button:focus-visible { border-color: var(--green-deep); }
.primary-button:focus-visible,.secondary-button:focus-visible,.icon-button:focus-visible,.account-button:focus-visible,.tab-button:focus-visible { outline: 3px solid rgba(185,255,40,.92); outline-offset: 2px; }
button:disabled,.secondary-button:disabled,.primary-button:disabled { opacity: .52; filter: grayscale(.15); }

/* Button colours must never depend on the colour of their parent card. */
.primary-button { color: var(--white); }
.secondary-button { color: var(--ink); }
.journey-empty .secondary-button {
  color: var(--green-deep);
  border-color: var(--white);
  background: var(--white);
}
.journey-empty .secondary-button:hover,
.journey-empty .secondary-button:focus-visible {
  color: var(--green-deep);
  border-color: var(--lime);
  background: var(--lime);
}
.journey-card .secondary-button { color: var(--ink); background: var(--white); }

@media (max-width: 760px) {
  .side-menu-install { display: grid; }
  .install-dialog { width: min(620px, calc(100% - 20px)); }
}

/* Responsive guardrails — intentionally last to override the earlier prototype layers. */
@media (max-width: 760px) {
  .topbar {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    height: 64px !important;
    min-height: 64px !important;
    margin-inline: -12px;
    padding: 0 12px !important;
    border-bottom: 1px solid #dbe2dc !important;
  }
  .topbar-actions { display: flex !important; gap: 6px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  /* Le compte reste toujours accessible : c’est l’entrée de connexion et de
     synchronisation, y compris sur les PWA iOS/Safari. */
  #accountButton { display: inline-flex !important; }
  #newRouteButton { display: none !important; }
  #notificationButton, #settingsButton { display: grid !important; }
  .topbar-actions .icon-button, .topbar .menu-button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 9px !important; border: 1px solid #d5ddd7 !important; border-radius: 11px !important; background: #fff !important; }
  .topbar .account-button { flex: 0 0 40px; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 4px !important; justify-content: center; border: 1px solid #d5ddd7 !important; border-radius: 11px !important; background: var(--green-deep) !important; }
  .topbar .account-button .account-copy { display: none !important; }
  .topbar .account-button .account-avatar { width: 28px; height: 28px; }
  .brand { min-width: 0; }
  .brand-copy, .brand-signal { display: none !important; }
  .brand-mark { width: 36px !important; height: 36px !important; }
  .app-shell { width: 100%; padding-right: 12px !important; padding-left: 12px !important; }
  .route-heading, .standalone-header, .explore-header, .library-heading { min-width: 0; }
  .route-heading h1, .standalone-header h1, .explore-header h1 { overflow-wrap: anywhere; }
  .section-tabs { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .section-tabs .tab-button { flex: 0 0 auto !important; min-width: 104px !important; }
  .stats-grid, .analysis-key-grid, .wind-summary, .profile-readout { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .route-visualization-toolbar, .overview-map-actions, .home-atlas-actions { min-width: 0; }
  input, select, textarea { max-width: 100%; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .app-shell { padding-inline: 24px; }
  .topbar { grid-template-columns: 42px minmax(0,1fr) auto; }
  .route-heading { grid-template-columns: minmax(0,1fr); align-items: stretch; }
  .route-heading .primary-button { width: 100%; }
  .section-tabs { display: flex !important; grid-template-columns: none !important; overflow-x: auto; }
  .tab-button { flex: 0 0 140px; }
  .hero { grid-template-columns: minmax(0,1fr); }
}

.poi-coverage-ribbon { display: grid; margin: 10px 0 16px; padding: 10px 12px; grid-template-columns: auto minmax(80px,1fr) auto; align-items: center; gap: 10px; border-radius: var(--r-card); background: #eef2ed; color: var(--muted); }
.poi-coverage-ribbon > span,.poi-coverage-ribbon > small { font: 750 9px/1 var(--font-data); letter-spacing: .08em; white-space: nowrap; }
.poi-coverage-ribbon > div { display: flex; gap: 3px; }
.poi-coverage-ribbon i { min-width: 5px; height: 7px; flex: 1; border-radius: var(--r-button); background: #cfd7d1; }
.poi-coverage-ribbon i.is-loaded { background: var(--lime); }
.live-roadbook-more { width: 100%; margin-top: 10px; }
@media (max-width: 760px) {
  .poi-coverage-ribbon { padding: 9px 10px; grid-template-columns: 1fr auto; }
  .poi-coverage-ribbon > div { grid-column: 1 / -1; grid-row: 2; }
}

/* Écrans d'étape : actions courtes, relief en premier, lecture non technique. */
.primary-button,.secondary-button,.tab-button,.count-pill,.profile-help,.profile-scale,.route-metadata span,.wind-actions a,.wind-actions button { font-family: var(--font-ui); letter-spacing: 0; }
.section-title-actions { display: flex; align-items: center; gap: 9px; }
.section-title-actions .secondary-button,.wind-actions .primary-button,.wind-actions .secondary-button { min-height: 40px; padding-inline: 14px; white-space: nowrap; }
.wind-actions { display: flex !important; width: auto !important; align-items: center; gap: 8px; }
.wind-actions .primary-button,.wind-actions .secondary-button { width: auto !important; }
.overview-panel, #overviewPanel { display: flex; flex-direction: column; }
#overviewPanel > .overview-map-section { order: 0; }
#overviewPanel > .mini-profile { order: 1; margin-top: 16px; }
#overviewPanel > .operations-card,#overviewPanel > .road-analysis-card,#overviewPanel > .insight-card { order: 2; }
.mini-profile { padding: 20px; }
.mini-profile .section-title-row { align-items: center; }
.mini-profile h2 { margin: 0; font-size: 24px; }
.mini-profile .inline-link { min-height: 38px; padding: 0 12px; border: 1px solid var(--green); border-radius: var(--r-card); color: var(--white); background: var(--green); text-decoration: none; }
.mini-profile svg { margin-top: 12px; }
.profile-card { padding: 20px; }
.profile-card .section-title-row { align-items: center; }
.profile-card h2 { margin: 0; font-size: clamp(28px,4vw,38px); }
.profile-title-actions { gap: 7px; }
.profile-landscape-hint { max-width: 180px; color: var(--muted); font: 500 11px/1.3 var(--font-ui); text-align: right; }
.profile-controls { margin: 10px 0 0; padding: 7px 8px; border: 0; border-radius: var(--r-card); background: #eef2ed; }
.profile-controls > label { min-width: 0; font: 650 10px/1 var(--font-ui); letter-spacing: 0; text-transform: none; }
.profile-controls .secondary-button { min-width: 36px; min-height: 36px; padding: 0 9px; border-radius: var(--r-card); }
.profile-controls #profileLocateButton,.profile-controls #profileZoomSelectionButton,.profile-controls #profileClearSelectionButton { min-height: 36px; font-size: 11px; }
.profile-help { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.profile-viewport { margin-top: 8px; }
.climb-detection-panel { padding: 16px 18px; }
.climb-detection-panel .section-title-row { align-items: center; }
.climb-detection-panel h2 { margin: 0; font-size: 24px; }
.climb-detection-copy { margin: 3px 0 0; font-size: 13px; }
.climb-detection-panel .secondary-button { min-height: 38px; padding-inline: 12px; }
.climb-threshold-summary { margin-top: 12px; }
.climb-threshold-summary article { min-height: 54px !important; padding: 9px 11px !important; }
.climb-threshold-summary article span { font-family: var(--font-ui) !important; font-size: 10px !important; letter-spacing: 0 !important; }
.climb-threshold-summary article strong { font-size: 19px !important; }

@media (max-width: 760px) {
  .section-title-actions { width: 100%; justify-content: space-between; }
  .section-title-actions .secondary-button { flex: 1; }
  .weather-section .section-title-row { align-items: flex-start !important; flex-direction: column; }
  .wind-actions { width: 100% !important; }
  .wind-actions > * { flex: 1; min-width: 0; }
  .wind-actions .primary-button,.wind-actions .secondary-button { width: auto !important; padding-inline: 8px; font-size: 11px; }
  .mini-profile { padding: 16px; }
  .mini-profile .section-title-row { align-items: center; flex-direction: row; }
  .mini-profile h2 { font-size: 22px; }
  .profile-card { padding: 16px; }
  .profile-card .section-title-row { align-items: flex-start; flex-direction: row; }
  .profile-title-actions { align-items: flex-end; flex-direction: column; }
  .profile-landscape-hint { max-width: 130px; font-size: 10px; }
  .profile-controls { grid-template-columns: 36px minmax(0,1fr) 36px; }
  .profile-controls .secondary-button { min-width: 36px; min-height: 36px; }
  .profile-controls #profileLocateButton,.profile-controls #profileZoomSelectionButton,.profile-controls #profileClearSelectionButton { grid-column: auto; width: auto; min-height: 34px; padding-inline: 7px; }
  .profile-help { font-size: 11px; }
  .climb-detection-panel { padding: 14px; }
  .climb-detection-panel .section-title-row { align-items: center; flex-direction: row; }
  .climb-detection-copy { display: none; }
  .climb-detection-panel h2 { font-size: 21px; }
  .climb-threshold-summary { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; }
  .climb-threshold-summary article { min-height: 50px !important; padding: 8px !important; }
  .climb-threshold-summary article strong { font-size: 16px !important; }
}

/* Home: one confident headline, no decorative forced line break. */
.home-dashboard .hero-copy h1 { white-space: nowrap; }

/* Action groups share a compact horizontal rhythm before they wrap. */
.home-atlas-actions,
.map-toolbar-actions,
.journey-card-actions,
.route-actions,
.weather-actions,
.wind-actions,
.section-title-actions {
  align-items: center;
}
@media (max-width: 760px) {
  .home-dashboard .hero-copy h1 { font-size: clamp(38px, 11vw, 52px); letter-spacing: -.055em; }
  .home-atlas-actions,
  .map-toolbar-actions,
  .journey-card-actions,
  .route-actions,
  .weather-actions,
  .wind-actions { display: flex !important; flex-wrap: nowrap; gap: 8px; }
  .home-atlas-actions > *,
  .map-toolbar-actions > *,
  .journey-card-actions > *,
  .route-actions > *,
  .weather-actions > *,
  .wind-actions > * { min-width: 0; flex: 1 1 0; }
}
@media (max-width: 340px) {
  .home-dashboard .hero-copy h1 { white-space: normal; }
}

/* Guides : éditorial lisible, volontairement plus calme que l'interface terrain. */
.articles-header { margin-bottom: 28px; }
.article-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.article-filters button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); background: var(--white); font: 650 13px/1 var(--font-ui); }
.article-filters button.is-active { border-color: var(--green-deep); color: var(--white); background: var(--green-deep); }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.article-card { display: flex; min-height: 270px; padding: 22px; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.article-card > p:first-child { margin: 0 0 18px; color: var(--green); font: 800 11px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; }
.article-card h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; letter-spacing: -.04em; }
.article-card .article-excerpt { margin: 14px 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.article-card footer { display: flex; margin-top: auto; align-items: center; justify-content: space-between; gap: 12px; }
.article-card footer span { color: var(--muted); font-size: 12px; }
.article-card .secondary-button { min-height: 38px; padding-inline: 12px; white-space: nowrap; }
.article-reader { max-width: 760px; padding: clamp(22px, 5vw, 54px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.article-reader .inline-link { margin-bottom: 28px; }
.article-reader h1 { max-width: 680px; margin: 12px 0 18px; font-size: clamp(36px, 6vw, 64px); line-height: .98; letter-spacing: -.055em; }
.article-reader p { max-width: 660px; font-size: 17px; line-height: 1.7; }
.article-reader .article-reader-lede { color: var(--muted); font-size: 20px; line-height: 1.45; }
.article-reader aside { margin-top: 30px; padding: 20px; border-left: 4px solid var(--lime); background: #f1f5ec; }
.article-reader aside strong { font-size: 15px; }
.article-reader aside ul { margin: 10px 0 0; padding-left: 20px; }
.article-reader aside li { margin: 7px 0; line-height: 1.4; }
@media (max-width: 760px) {
  .article-grid { grid-template-columns: 1fr; }
  .article-card { min-height: 0; padding: 18px; }
  .article-reader { padding: 20px; }
  .article-reader p { font-size: 16px; }
  .article-reader .article-reader-lede { font-size: 18px; }
}

/* Mobile release guardrails: no component may create horizontal page movement. */
html, body { max-width: 100%; overflow-x: clip; }
main, .app-shell, .route-view, .tab-panel, .card, dialog { min-width: 0; }
@media (min-width: 761px) {
  .topbar-actions { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
  .account-button { width: auto !important; max-width: 220px; min-width: 44px; overflow: hidden; }
  .account-copy { min-width: 0; overflow: hidden; }
  .account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: 44px minmax(0, 1fr) auto !important; margin-inline: -12px !important; }
  .topbar-actions { min-width: 0; border: 0 !important; background: transparent !important; }
  .topbar-actions .icon-button, .topbar .menu-button { flex: 0 0 42px; width: 42px !important; min-width: 42px !important; height: 42px !important; }
  .settings-dialog, .live-share-dialog, .climb-settings-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; margin: auto; }
  .settings-sheet { width: 100%; padding: 18px !important; overflow-x: clip; }
  .settings-header { gap: 12px; padding-bottom: 16px; }
  .settings-header h2 { font-size: 27px; line-height: 1.04; }
  .settings-columns, .live-share-settings { grid-template-columns: minmax(0,1fr) !important; }
  .profile-card .section-title-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .profile-title-actions { min-width: 0; }
  .profile-landscape-hint { display: none; }
  .profile-controls { display: grid !important; grid-template-columns: 38px minmax(0,1fr) 38px !important; gap: 7px !important; padding: 7px !important; }
  .profile-controls > label { min-width: 0 !important; }
  .profile-controls .secondary-button { min-width: 0 !important; width: 100% !important; min-height: 38px !important; padding: 0 7px !important; font-size: 10px !important; line-height: 1.05; }
  #profileLocateButton { grid-column: 1 / 2 !important; }
  #profileZoomSelectionButton { grid-column: 2 / 4 !important; }
  #profileClearSelectionButton { grid-column: 1 / -1 !important; }
  .climb-detection-panel .section-title-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .climb-detection-panel .secondary-button { min-width: 0; padding-inline: 11px; }
  .climb-threshold-summary { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; overflow: hidden !important; }
  .climb-threshold-summary > * { min-width: 0; padding: 8px !important; }
  .climb-threshold-summary small { font-size: 9px !important; }
  .climb-threshold-summary strong { font-size: 15px !important; }
  .climb-setting-fields { grid-template-columns: 1fr !important; overflow: visible !important; }
  .is-live-mode .section-tabs { display: none !important; }
  .is-live-mode .route-view { padding-top: 14px; }
}

/* Étape : navigation visible d'un coup, sans carrousel horizontal. */
@media (max-width: 760px) {
  .route-view .section-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    position: sticky;
    top: 60px;
    z-index: 700;
    margin: 14px -12px 16px !important;
    padding: 0 8px;
    overflow: hidden !important;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: rgba(244,246,242,.98);
    box-shadow: 0 4px 12px rgba(16,25,23,.06);
  }
  .route-view .section-tabs .tab-button {
    display: grid;
    width: 100%;
    min-width: 0 !important;
    min-height: 48px;
    padding: 4px 2px;
    place-items: center;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    font-size: 10px;
    line-height: 1.05;
    white-space: normal;
  }
  .route-view .section-tabs .tab-button:last-child { border-right: 0; }
  .route-view .section-tabs .tab-button span { display: none; }
  .route-view .section-tabs .tab-button b { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; font-size: 7px; }
}

/* Le Live continue en arrière-plan, mais une seule vue est visible à la fois.
   L'ancienne règle avec :not(#livePanel) prenait le dessus sur .is-hidden et
   empilait Carte, Relief et Roadbook au retour du Live. */
.is-live-mode .tab-panel:not(#livePanel).is-hidden { display: none !important; }
.is-live-mode .tab-panel:not(#livePanel):not(.is-hidden) { display: block !important; }
.is-live-mode #livePanel.is-hidden { display: none !important; }
.is-live-mode #livePanel:not(.is-hidden) { display: block !important; }

/* Dernière passe mobile : hiérarchie calme, aucun contrôle ne doit empiéter
   sur les données de route ni sur la zone sûre du téléphone. */
.route-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 21px;
  line-height: 1;
}
.route-heading { position: relative; padding-right: 48px; }
.route-close-button:hover, .route-close-button:focus-visible { border-color: var(--line); color: var(--ink); background: var(--white); }

.live-session-menu { position: relative; flex: 0 0 auto; }
.live-session-menu > summary {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--ink);
  background: var(--white);
  cursor: pointer;
  font: 800 15px/1 var(--font-data);
  list-style: none;
}
.live-session-menu > summary::-webkit-details-marker { display: none; }
.live-session-menu > button {
  position: absolute;
  z-index: 4;
  top: calc(100% + 7px);
  right: 0;
  min-width: 146px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 8px 22px rgba(7,18,15,.14);
  font: 750 11px/1 var(--font-data);
}
.live-session-menu > button:hover, .live-session-menu > button:focus-visible { border-color: var(--orange); color: #9f351e; }

.live-stats { gap: 0; }
.live-stats article { min-width: 0; padding-inline: 12px; }
.live-stats span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.live-stats strong { font-size: clamp(26px, 5.2vw, 52px); letter-spacing: -.045em; }
.side-menu-account > .account-avatar { width: 31px; height: 31px; margin: 0; border-radius: var(--r-button); color: var(--ink); background: var(--lime); }
.side-menu-account > strong { align-self: end; }
.side-menu-account > small { align-self: start; }
.side-menu-account { position: relative; }
.side-menu-account > em {
  position: absolute;
  top: 12px;
  right: 10px;
  color: var(--lime);
  font: 700 10px/1 var(--font-data);
  font-style: normal;
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .topbar {
    height: max(68px, calc(58px + env(safe-area-inset-top))) !important;
    min-height: max(68px, calc(58px + env(safe-area-inset-top))) !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    align-items: center;
  }
  .topbar-actions { gap: 5px !important; }
  .topbar-actions .icon-button, .topbar .menu-button { flex-basis: 40px; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; }
  /* Le compte est volontairement dans le menu latéral ; le header reste
     utilisable même avec la barre d’état iOS et les indicateurs réseau. */
  #accountButton { display: grid !important; }
  .topbar > .account-button, .topbar #accountButton { display: none !important; }
  .gps-header-indicator {
    width: 12px;
    height: 12px;
    margin-left: -10px;
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(190,255,46,.27);
  }
  .is-live-mode .live-mode-header {
    top: max(0px, env(safe-area-inset-top));
    min-height: 56px;
    padding: 8px 0 10px;
    border-bottom: 0;
  }
  .live-mode-header span { font-size: 9px; }
  .live-mode-header strong { font-size: 14px; }
  .live-hero { padding: 18px 16px 20px; }
  .live-topline { gap: 10px; }
  .live-topline h2 { font-size: clamp(29px, 9vw, 38px); line-height: .98; }
  .live-status { min-height: 38px; padding: 7px 10px; font-size: 9px; }
  .live-stats { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 14px; }
  .live-stats article { min-height: 94px; padding: 10px 8px; }
  .live-stats span { margin-bottom: 7px; font-size: 9px !important; letter-spacing: .02em; }
  .live-stats strong { font-size: clamp(25px, 8vw, 34px); }
  .live-stats small { margin-left: 2px; font-size: 9px; }
  .live-actions-primary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .live-actions-primary > button { width: 100%; min-height: 48px; padding: 0 8px; font-size: 11px; line-height: 1.1; }
  .settings-dialog { padding-top: max(16px, calc(env(safe-area-inset-top) + 10px)) !important; }
  .settings-header { min-width: 0; }
  .settings-header > div { min-width: 0; }
  .settings-header h2 { overflow-wrap: anywhere; }
  .settings-header .icon-button { flex: 0 0 48px; }
  .settings-columns label, .settings-sheet label, .departure-picker-fields label { min-width: 0; }
}

@media (max-width: 370px) {
  .live-stats strong { font-size: 24px; }
  .live-stats article { padding-inline: 6px; }
  .live-actions-primary { grid-template-columns: 1fr; }
}

/* État GPS : visible dans le header sans concurrencer les actions. */
.gps-header-indicator:not(.is-hidden) {
  display: inline-flex;
  min-width: 46px;
  height: 24px;
  margin-left: -4px;
  padding: 0 8px 0 6px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(55,104,28,.22);
  border-radius: var(--r-pill);
  color: #244e1d;
  background: #edffd4;
  box-shadow: 0 0 0 0 rgba(185,255,40,.46);
  animation: gps-header-flash 1.25s ease-in-out infinite;
  font: 850 9px/1 var(--font-data);
  letter-spacing: .07em;
}
.gps-header-indicator i { width: 9px; height: 9px; border-radius: 50%; background: #a8f51c; box-shadow: 0 0 0 3px rgba(168,245,28,.2); }
.gps-header-indicator b { display: block; }
@keyframes gps-header-flash {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(185,255,40,.44); }
  50% { opacity: .52; box-shadow: 0 0 0 6px rgba(185,255,40,0); }
}
@media (max-width: 760px) {
  .gps-header-indicator:not(.is-hidden) { min-width: 48px; height: 26px; margin-left: -6px; padding-right: 9px; }
  .gps-header-indicator i { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) { .gps-header-indicator:not(.is-hidden) { animation: none; } }

/* Mobile header and Live: keep the system area outside the app layout.
   Some iOS browsers report a transiently oversized safe-area inset; using it
   as a header height created a large blank band before the controls. */
@media (max-width: 760px) {
  .topbar {
    position: sticky !important;
    top: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    margin-inline: -12px !important;
    padding: 0 12px !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    background: rgba(248,250,247,.98) !important;
  }
  .topbar-actions .icon-button,
  .topbar .menu-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
  .gps-header-indicator:not(.is-hidden) {
    display: grid;
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #d5ddd7;
    border-radius: var(--r-card);
    color: #17331d;
    background: #efffd8;
    box-shadow: inset 0 0 0 1px rgba(190,255,46,.28);
    font: 850 9px/1 var(--font-data);
  }
  .gps-header-indicator i { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #87c81b; box-shadow: 0 0 0 3px rgba(190,255,46,.18); }
  .gps-header-indicator b { display: block; }

  /* The Live is its own focused screen: no stage heading or view tabs above it. */
  body.is-live-mode .route-heading,
  body.is-live-mode .section-tabs { display: none !important; }
  body.is-live-mode .route-view { padding-top: 0 !important; }
  body.is-live-mode #livePanel { margin-top: 0 !important; }
  body.is-live-mode .live-mode-header {
    display: grid !important;
    position: relative !important;
    top: auto !important;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    min-height: 52px !important;
    padding: 8px 0 !important;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    overflow: visible;
  }
  body.is-live-mode .live-mode-header > div { min-width: 0; overflow: hidden; }
  body.is-live-mode .live-mode-header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-live-mode .live-session-menu { width: 42px; min-width: 42px; justify-self: end; }
  body.is-live-mode .live-session-menu > summary { width: 42px; height: 42px; }
  body.is-live-mode .live-session-menu > button { right: 0; max-width: min(230px, calc(100vw - 32px)); }
  body.is-live-mode .live-mode-header > div > span { font-size: 9px; }
  body.is-live-mode .live-mode-header > div > strong { font-size: 15px; }
}

/* iOS finalisation: no CSS safe-area padding is allowed to create a second
   status bar. GPS lives with the other device controls, not in the logo. */
@media (max-width: 760px) {
  body { padding-top: 0 !important; }
  @media (display-mode: standalone) {
    .topbar { padding-top: 0 !important; height: 64px !important; }
  }
  .topbar-actions { gap: 6px !important; }
  .gps-header-indicator:not(.is-hidden) {
    display: grid;
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #d5ddd7;
    border-radius: var(--r-card);
    color: #17331d;
    background: #efffd8;
    box-shadow: inset 0 0 0 1px rgba(190,255,46,.28);
    font: 850 9px/1 var(--font-data);
  }
  .gps-header-indicator i {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #87c81b;
    box-shadow: 0 0 0 3px rgba(190,255,46,.18);
  }
  .gps-header-indicator b { display: block; }

  body.is-live-mode .live-mode-header {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 8px 0 !important;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    overflow: visible;
  }
  body.is-live-mode .live-mode-header > div { min-width: 0; overflow: hidden; }
  body.is-live-mode .live-mode-header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-live-mode .live-session-menu { width: 42px; min-width: 42px; justify-self: end; }
  body.is-live-mode .live-session-menu > summary { width: 42px; height: 42px; }
  body.is-live-mode .live-session-menu > button { right: 0; max-width: min(230px, calc(100vw - 32px)); }
}

/* Relief : réglage discret, critères disponibles sans alourdir la lecture. */
.climb-list-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.climb-settings-gear { display: grid; width: 40px; min-width: 40px; height: 40px; padding: 0; place-items: center; border-radius: var(--r-card); color: var(--green-deep); font-size: 22px; line-height: 1; }
.climb-settings-gear:hover, .climb-settings-gear:focus-visible { border-color: var(--green-deep); background: var(--lime); }
.climb-criteria-footer { margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.climb-criteria-footer > small { display: block; margin-bottom: 8px; color: var(--muted); font: 700 10px/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; }
.climb-criteria-footer .climb-threshold-summary { margin: 0; border-radius: var(--r-card); background: var(--paper); }
.climb-criteria-footer .climb-threshold-summary > span { min-height: 50px; padding: 10px 12px; }

/* Choix d'étape : toutes les traces, structurées par aventure plutôt qu'en vrac. */
.route-picker-filters { display: flex; margin-bottom: 2px; flex-wrap: wrap; gap: 7px; }
.route-picker-filter { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); background: var(--white); font: 700 12px/1 var(--font-ui); }
.route-picker-filter.is-active { border-color: var(--green-deep); color: var(--white); background: var(--green-deep); }
.route-picker-group { padding: 13px; border-radius: var(--r-card); }
.route-picker-group-heading { display: grid; margin: 1px 1px 5px; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 4px 10px; }
.route-picker-group-heading small { grid-column: 1 / -1; color: var(--green); font: 750 10px/1 var(--font-data); letter-spacing: .1em; }
.route-picker-group-heading strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.route-picker-group-heading span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.route-picker-choice { min-height: 60px; border-radius: var(--r-card); }
.route-picker-choice > span { width: 32px; height: 32px; border-radius: var(--r-card); }

/* Alignement cohérent : les groupes d'actions n'étirent plus des boutons isolés. */
.section-title-row.compact { align-items: center; gap: 12px; }
.secondary-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.route-picker-actions .secondary-button { min-width: 0; min-height: 44px; }
@media (max-width: 760px) {
  .section-title-row.compact { align-items: flex-start; }
  .climb-list-actions { padding-top: 1px; }
  .climb-settings-gear { width: 38px; min-width: 38px; height: 38px; font-size: 21px; }
  .climb-criteria-footer { margin-top: 18px; }
  .climb-criteria-footer .climb-threshold-summary > span { min-height: 54px; padding: 8px !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
  .route-picker-filters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .route-picker-filter { min-width: 0; padding-inline: 7px; font-size: 11px; white-space: nowrap; }
  .route-picker-group { padding: 11px; }
  .route-picker-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Version condensée : trois écrans, indicateur GPS et météo locale cartographiée. */
.gps-header-indicator { width: 9px; height: 9px; margin-left: -5px; align-self: flex-start; border: 2px solid var(--white); border-radius: var(--r-pill); background: var(--lime); box-shadow: 0 0 0 3px rgba(190,255,46,.22); animation: gps-pulse 1.5s ease-out infinite; }
@keyframes gps-pulse { 0% { box-shadow: 0 0 0 0 rgba(190,255,46,.55); } 70% { box-shadow: 0 0 0 7px rgba(190,255,46,0); } 100% { box-shadow: 0 0 0 0 rgba(190,255,46,0); } }
.weather-local-map { height: 154px; margin-top: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-card); background: #dce2db; }
.weather-wind-marker { background: transparent; border: 0; }
.weather-wind-marker span { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid var(--white); border-radius: 50%; color: var(--green-deep); background: var(--lime); box-shadow: 0 3px 10px rgba(8,20,16,.28); font-size: 25px; font-weight: 800; line-height: 1; }
.weather-local-map .leaflet-tooltip { padding: 5px 8px; border: 0; border-radius: var(--r-button); color: var(--white); background: var(--green-deep); font: 700 10px/1 var(--font-data); }
.weather-local-map .leaflet-tooltip-top:before { border-top-color: var(--green-deep); }

@media (max-width: 760px) {
  .route-view .section-tabs { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .route-view .section-tabs .tab-button { min-height: 50px; font-size: 12px; }
  .weather-local-map { height: 140px; }
}

/* Carte et relief : commandes compactes, toujours hors du fond cartographique. */
.route-heading { display: block; margin: 0 0 14px; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; }
.route-heading .eyebrow { margin: 0 0 4px; padding: 0; color: var(--green); background: transparent; font-size: 10px !important; }
.route-heading h1 { margin: 0; font-size: clamp(19px, 2.6vw, 28px); line-height: 1.1; letter-spacing: -.03em; }
.route-heading .route-metadata { margin-top: 5px; }
.route-heading .route-metadata span { padding: 0; border: 0; color: var(--muted); font-size: 11px; }
.map-reading-tools { display: flex; margin-top: 10px; align-items: center; justify-content: space-between; gap: 10px; }
.map-reading-tools .route-scale-legend { min-height: 38px; margin: 0; flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.map-reading-tools .wind-overlay-toggle { min-height: 38px; flex: 0 0 auto; padding: 0 12px; border-radius: var(--r-card); }
.profile-controls { display: grid !important; gap: 8px !important; padding: 0 !important; background: transparent !important; }
.profile-zoom-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; align-items: center; gap: 8px; }
.profile-zoom-row .secondary-button { width: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; }
.profile-zoom-row label { display: grid; min-width: 0; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 7px; font-size: 13px; }
.profile-action-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); gap: 8px; }
.profile-action-row .secondary-button { min-height: 40px !important; padding-inline: 10px !important; font-size: 12px !important; }
.profile-action-row #profileClearSelectionButton { grid-column: 1 / -1; }
.roadbook-service-actions { display: flex; margin-top: 12px; gap: 8px; }
.roadbook-service-actions > button { min-height: 42px; }
@media (max-width: 760px) {
  .route-heading { padding: 8px 0 4px; }
  .route-heading h1 { font-size: 20px; }
  .route-heading .route-metadata { display: flex; margin-top: 3px; }
  .route-heading .route-metadata span { font-size: 10px; }
  .map-reading-tools { align-items: stretch; flex-direction: column; }
  .map-reading-tools .route-scale-legend { width: 100%; }
  .map-reading-tools .wind-overlay-toggle { width: 100%; }
  .profile-controls { grid-template-columns: 1fr !important; }
  .profile-zoom-row { grid-template-columns: 40px minmax(0,1fr) 40px; }
  .profile-zoom-row .secondary-button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; }
  .profile-action-row { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
  .roadbook-service-actions > button { flex: 1; min-width: 0; }
}

/* Lecture de carte : les modes et leur légende ne recouvrent jamais le fond. */
.map-reading-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "modes wind" "legend legend"; }
.map-reading-tools .route-visualization-toolbar { position: static !important; grid-area: modes; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.map-reading-tools .route-visualization-toolbar > div { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; }
.map-reading-tools .route-visualization-toolbar button { min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); font-family: var(--font-ui); font-size: 12px; }
.map-reading-tools .route-visualization-toolbar button.is-active { border-color: var(--green-deep); background: var(--lime); }
.map-reading-tools .route-scale-legend { position: static !important; grid-area: legend; margin-top: 2px; box-shadow: none; }
.map-reading-tools .wind-overlay-toggle { grid-area: wind; }
.map-toolbar-actions .icon-button { display: grid; width: 42px; min-width: 42px; height: 42px; place-items: center; padding: 0; font-size: 20px; }
.compact-settings-sheet { max-width: 520px; }
.map-style-picker { display: grid; margin-top: 4px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.map-style-picker button { min-height: 48px; }
.compact-settings-sheet .settings-actions { margin-top: 10px; }
.compact-settings-sheet .settings-actions button { width: 100%; }
.live-poi-row { grid-template-columns: 44px minmax(0,1fr) 86px; gap: 12px; padding: 16px 8px; border-radius: var(--r-card); }
.live-poi-row.is-next { border: 1px solid rgba(149,230,23,.72); box-shadow: inset 3px 0 0 var(--lime); }
.live-poi-order { align-self: start; padding-top: 2px; }
.live-poi-order small { max-width: 58px; text-align: center; line-height: 1.15; }
.live-poi-main strong { font-size: 16px; line-height: 1.15; }
.live-poi-main span { font: 600 11px/1.35 var(--font-ui); }
.live-poi-main b { display: block; margin-top: 4px; font-size: 12px; }
.live-poi-main small { font: 500 11px/1.35 var(--font-ui); }
.live-poi-eta > span { font: 750 22px/1 var(--font-ui); letter-spacing: -.04em; }
.live-poi-eta small,.live-poi-eta em { font-family: var(--font-ui); }
.analysis-road-copy > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.analysis-road-copy h4 { margin: 0 0 12px; font-size: 15px; }
.analysis-road-copy > section > p, .analysis-road-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 760px) {
  .map-reading-tools { grid-template-columns: 1fr; grid-template-areas: "modes" "wind" "legend"; }
  .map-reading-tools .route-visualization-toolbar > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .map-reading-tools .route-visualization-toolbar button { min-width: 0; font-size: 11px; }
  .map-reading-tools .route-scale-legend { grid-column: auto; }
  .map-style-picker { grid-template-columns: 1fr; }
  .live-poi-row { grid-template-columns: 40px minmax(0,1fr); gap: 10px; padding: 14px 4px; }
  .live-poi-eta { grid-column: 2; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .live-poi-eta > span { font-size: 20px; }
  .live-poi-eta small { margin: 0; }
}

/* Final iOS header override — must remain at end of this legacy stylesheet. */
@media (max-width: 760px) {
  body { padding-top: 0 !important; }
  .topbar { padding-top: 0 !important; height: 64px !important; min-height: 64px !important; }
  .topbar-actions { gap: 6px !important; }
  .gps-header-indicator:not(.is-hidden) {
    display: grid;
    position: relative;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid #d5ddd7;
    border-radius: var(--r-card);
    color: #17331d;
    background: #efffd8;
    box-shadow: inset 0 0 0 1px rgba(190,255,46,.28);
    font: 850 9px/1 var(--font-data);
  }
  .gps-header-indicator i { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #87c81b; box-shadow: 0 0 0 3px rgba(190,255,46,.18); }
  .gps-header-indicator b { display: block; }
  body.is-live-mode .live-mode-header { display: grid !important; width: 100%; max-width: 100%; margin: 0 !important; padding: 8px 0 !important; grid-template-columns: minmax(0,1fr) 42px; gap: 10px; overflow: visible; }
  body.is-live-mode .live-mode-header > div { min-width: 0; overflow: hidden; }
  body.is-live-mode .live-mode-header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.is-live-mode .live-session-menu { width: 42px; min-width: 42px; justify-self: end; }
  body.is-live-mode .live-session-menu > summary { width: 42px; height: 42px; }
  body.is-live-mode .live-session-menu > button { right: 0; max-width: min(230px, calc(100vw - 32px)); }
}

/* Final mobile layout guardrail: status area, GPS control and Live overflow. */
@media (max-width: 760px) {
  body { padding-top: 0 !important; }
  .topbar { position: sticky !important; top: 0 !important; height: 64px !important; min-height: 64px !important; margin-inline: -12px !important; padding: 0 12px !important; grid-template-columns: 42px minmax(0,1fr) auto !important; align-items: center !important; background: rgba(248,250,247,.98) !important; }
  .topbar-actions .icon-button, .topbar .menu-button { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; }
  .gps-header-indicator:not(.is-hidden) { display: grid; position: relative; width: 42px; min-width: 42px; height: 42px; min-height: 42px; margin: 0; padding: 0; place-items: center; border: 1px solid #d5ddd7; border-radius: var(--r-card); color: #17331d; background: #efffd8; box-shadow: inset 0 0 0 1px rgba(190,255,46,.28); font: 850 9px/1 var(--font-data); }
  .gps-header-indicator i { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #87c81b; box-shadow: 0 0 0 3px rgba(190,255,46,.18); }
  .gps-header-indicator b { display: block; }
  body.is-live-mode .route-heading, body.is-live-mode .section-tabs { display: none !important; }
  body.is-live-mode .route-view, body.is-live-mode #livePanel { padding-top: 0 !important; margin-top: 0 !important; }
  body.is-live-mode .live-mode-header { display: grid !important; position: relative !important; top: auto !important; width: 100%; max-width: 100%; margin: 0 !important; min-height: 52px !important; padding: 8px 0 !important; grid-template-columns: minmax(0,1fr) 42px; gap: 10px; overflow: visible; }
  body.is-live-mode .live-mode-header > div { min-width: 0; overflow: hidden; }
  body.is-live-mode .live-mode-header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  body.is-live-mode .live-mode-header > div > span { font-size: 9px; }
  body.is-live-mode .live-session-menu { width: 42px; min-width: 42px; justify-self: end; }
  body.is-live-mode .live-session-menu > summary { width: 42px; height: 42px; }
  body.is-live-mode .live-session-menu > button { right: 0; max-width: min(230px, calc(100vw - 32px)); }
}

/* iOS PWA reserves a translucent status bar over the web viewport.  Keep a
   single, fixed protected band in standalone mode; do not combine this with
   body padding or env() values, which previously produced the overlaps. */
@media (max-width: 760px) and (display-mode: standalone) {
  .topbar {
    box-sizing: border-box !important;
    height: 126px !important;
    min-height: 126px !important;
    padding: 62px 12px 0 !important;
  }
}

/* Application iPhone (Capacitor)
   La WebView iOS n'a pas le même mode "standalone" que Safari. On réserve
   donc explicitement la zone système ici, sans héritage des anciens réglages
   PWA, et on empêche la sélection longue des éléments d'interface. */
html.is-native-shell,
html.is-native-shell body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html.is-native-shell img,
html.is-native-shell svg {
  -webkit-user-drag: none;
}
html.is-native-shell input,
html.is-native-shell textarea,
html.is-native-shell select,
html.is-native-shell [contenteditable="true"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}
@media (max-width: 760px) {
  html.is-native-shell body { padding-top: 0 !important; }
  html.is-native-shell .topbar {
    position: sticky !important;
    top: 0 !important;
    box-sizing: border-box !important;
    height: calc(64px + env(safe-area-inset-top)) !important;
    min-height: calc(64px + env(safe-area-inset-top)) !important;
    margin-inline: -12px !important;
    padding: env(safe-area-inset-top) 12px 0 !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  html.is-native-shell .app-shell { padding-top: 0 !important; }
}

/* Conseiller d’aventure — lecture éditoriale d’une trace, sans routage. */
.adventure-command { display: grid; margin: 22px 0 12px; padding: 16px; grid-template-columns: minmax(0,1fr) 170px auto; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
.adventure-command label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.adventure-command select { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); background: var(--white); font-size: 15px; }
.adventure-command .primary-button { align-self: end; min-height: 44px; white-space: nowrap; }
.adventure-note { max-width: 780px; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.adventure-ai-card { display: grid; margin: 16px 0; padding: 16px; grid-template-columns: minmax(0,1fr) auto; gap: 10px 18px; border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: var(--r-card); background: var(--paper); }.adventure-ai-card h2 { margin: 3px 0 5px; font-size: 20px; }.adventure-ai-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; }.adventure-ai-card .secondary-button { align-self: center; }.adventure-ai-output { padding: 12px; grid-column: 1 / -1; border-radius: var(--r-button); background: var(--white); color: var(--ink); white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.adventure-progress { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.adventure-map-card { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }.adventure-map-card h2 { margin: 3px 0 13px; font-size: 21px; }.adventure-map { height: min(48vw, 390px); min-height: 260px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #e4e9e3; }.adventure-map-marker { display: grid; width: 30px; height: 30px; place-items: center; border: 3px solid var(--white); border-radius: 50%; color: var(--white); background: var(--green-deep); box-shadow: 0 3px 9px rgba(0,0,0,.26); font: 850 12px/1 var(--font-data); }.adventure-map-marker.viewpoint { background: #c94830; }.adventure-map-marker.nature { background: #357a55; }.adventure-map-marker.heritage { background: #875523; }.adventure-map-marker.village { background: #476b96; }.adventure-map-marker.food { background: #ad5f22; }.adventure-map-marker.swim { background: #287fb4; }.adventure-map-cluster { display: grid; width: 38px; height: 38px; place-items: center; border: 3px solid var(--white); border-radius: 50%; color: var(--ink); background: var(--lime); box-shadow: 0 3px 9px rgba(0,0,0,.26); font: 850 12px/1 var(--font-data); }.adventure-map .leaflet-popup-content { display: grid; gap: 4px; }.adventure-map .leaflet-popup-content span { color: var(--muted); font-size: 11px; }.adventure-map .leaflet-popup-content a { color: var(--green-deep); font-weight: 800; font-size: 12px; }
.adventure-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.adventure-progress small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.adventure-summary { display: flex; margin: 22px 0 10px; padding: 16px; align-items: baseline; justify-content: space-between; gap: 12px; border-left: 4px solid var(--lime); background: var(--green-deep); color: var(--white); }
.adventure-summary strong { font-size: 18px; }.adventure-summary span { color: rgba(255,255,255,.7); font-size: 12px; text-align: right; }
.adventure-filters { display: flex; margin: 12px 0 14px; flex-wrap: wrap; gap: 7px; }
.adventure-scope, .journey-discovery-actions { display: flex; margin: 0 0 16px; flex-wrap: wrap; gap: 8px; }.adventure-scope button, .journey-discovery-actions button { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--green-deep); background: var(--white); font-weight: 800; }.adventure-scope button.is-active, .journey-discovery-actions button:first-child { border-color: var(--green-deep); background: var(--lime); color: var(--ink); }.journey-discovery-actions button:disabled { opacity: .45; }
.adventure-filters button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); background: var(--white); font-weight: 700; }
.adventure-filters button.is-active { border-color: var(--green-deep); background: var(--lime); }
.adventure-results { display: grid; gap: 9px; }
.adventure-result { display: grid; padding: 15px; grid-template-columns: 46px minmax(0,1fr) auto; gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.adventure-score { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--r-card); color: var(--ink); background: var(--lime); font: 850 14px/1 var(--font-data); }
.adventure-result p { margin: 0 0 3px; color: var(--green); font: 800 9px/1 var(--font-data); letter-spacing: .08em; }
.adventure-result h2 { margin: 0 0 5px; font-size: 18px; }.adventure-result small { color: var(--muted); font-size: 12px; }
.adventure-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }.adventure-links a { min-height: 34px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-button); color: var(--green-deep); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.adventure-empty { display: grid; min-height: 190px; place-content: center; gap: 8px; padding: 24px; border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--muted); text-align: center; }.adventure-empty strong { color: var(--ink); font-size: 18px; }
@media (max-width: 760px) { .adventure-command { grid-template-columns: 1fr 1fr; }.adventure-command label:first-child, .adventure-command .primary-button { grid-column: 1 / -1; }.adventure-ai-card { grid-template-columns: 1fr; }.adventure-ai-card .secondary-button { justify-self: start; }.adventure-summary { display: grid; }.adventure-summary span { text-align: left; }.adventure-result { grid-template-columns: 42px minmax(0,1fr); gap: 10px; }.adventure-links { grid-column: 2; justify-content: start; }.adventure-map { height: 320px; min-height: 0; } }
@media (max-width: 760px) {
  html.is-ios-standalone .topbar {
    box-sizing: border-box !important;
    height: 126px !important;
    min-height: 126px !important;
    padding: 62px 12px 0 !important;
  }
}

/* Dossier d’aventure : une vue courte, utile avant et pendant le voyage. */
.journey-dossier-overview { display: grid; margin: 18px 0; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.journey-dossier-overview > div { display: grid; min-height: 88px; padding: 14px; align-content: center; border-right: 1px solid var(--line); gap: 6px; }.journey-dossier-overview > div:last-child { border: 0; }
.journey-dossier-overview span, .journey-stage-dossier-list p { color: var(--muted); font: 800 10px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }.journey-dossier-overview strong { font-size: 24px; line-height: 1; }.journey-dossier-overview small { font-size: 12px; color: var(--muted); }
.journey-dossier-tabs { display: flex; margin: 0 0 22px; gap: 8px; }.journey-dossier-tabs button { flex: 1; min-height: 46px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--green-deep); background: var(--white); font-weight: 800; }.journey-dossier-tabs button.is-active { border-color: var(--green-deep); background: var(--green-deep); color: var(--white); }
.journey-dossier-section-head { display: flex; margin: 0 0 14px; align-items: end; justify-content: space-between; gap: 16px; }.journey-dossier-section-head h2 { margin: 3px 0 0; font-size: clamp(24px, 4vw, 36px); }.journey-dossier-section-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); }
.journey-alerts { display: flex; max-width: 420px; flex-wrap: wrap; justify-content: end; gap: 6px; }.journey-alerts span { padding: 7px 9px; border-radius: var(--r-pill); color: #6f4700; background: #fff0c9; font-size: 11px; font-weight: 800; }
.journey-stage-dossier-list, .journey-lodging-list, .journey-discovery-list { display: grid; gap: 9px; }.journey-stage-dossier-list article { display: grid; padding: 15px; grid-template-columns: 44px minmax(0,1fr) auto; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }.journey-stage-day { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--r-card); color: var(--green-deep); background: var(--lime); font: 850 14px/1 var(--font-data); }.journey-stage-dossier-list h3 { margin: 3px 0; font-size: 18px; }.journey-stage-dossier-list span, .journey-stage-dossier-list small { display: block; color: var(--muted); font-size: 12px; }.journey-stage-dossier-list small { margin-top: 5px; color: var(--green); }.journey-stage-actions { display: flex; gap: 7px; }.journey-stage-actions button, .journey-lodging-row button, .journey-discovery-stage button { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-button); color: var(--green-deep); background: var(--white); font-size: 12px; font-weight: 800; }
.journey-lodging-row { display: grid; padding: 14px; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }.journey-lodging-row > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--muted); background: var(--paper); font: 800 12px/1 var(--font-data); }.journey-lodging-row.is-ready > span { color: var(--green-deep); background: var(--lime); }.journey-lodging-row strong, .journey-lodging-row small, .journey-lodging-row em { display: block; }.journey-lodging-row small { margin-top: 3px; color: var(--muted); font-size: 12px; }.journey-lodging-row em { margin-top: 4px; color: var(--green); font-size: 12px; font-style: normal; }.journey-logistics-tip { display: grid; margin-top: 14px; padding: 15px; gap: 5px; border-left: 4px solid var(--lime); border-radius: var(--r-card); background: var(--paper); }.journey-logistics-tip span { color: var(--muted); font-size: 13px; }
.journey-discovery-stage { display: grid; padding: 15px; grid-template-columns: minmax(0,1fr) auto; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }.journey-discovery-stage span { color: var(--green); font: 800 10px/1 var(--font-data); }.journey-discovery-stage h3 { margin: 5px 0 3px; font-size: 18px; }.journey-discovery-stage p { margin: 0; color: var(--muted); font-size: 13px; }.journey-discovery-stage ul { margin: 2px 0 0; padding-left: 18px; grid-column: 1 / -1; color: var(--green); font-size: 13px; }
.journey-saved-ideas { display: grid; margin: 0 0 16px; padding: 14px; gap: 7px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }.journey-saved-ideas > .eyebrow { margin: 0 0 3px; }.journey-saved-ideas article { display: grid; padding: 10px; grid-template-columns: 130px minmax(0,1fr) auto; gap: 10px; border-radius: var(--r-button); background: var(--white); align-items: center; }.journey-saved-ideas article span { color: var(--green); font-size: 11px; font-weight: 800; }.journey-saved-ideas article small { color: var(--muted); font-size: 11px; }
.saved-route-rename { position: absolute; top: 10px; right: 48px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green); background: var(--white); cursor: pointer; }.saved-route-rename:hover { border-color: var(--green-deep); background: var(--lime); }
.route-name-suggestion { display: grid; margin: 14px 0; padding: 14px; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; border-left: 4px solid var(--lime); border-radius: var(--r-card); background: var(--paper); }.route-name-suggestion span { grid-column: 1 / -1; color: var(--muted); font: 800 9px/1 var(--font-data); letter-spacing: .08em; }.route-name-suggestion strong { align-self: center; font-size: 15px; }.route-name-suggestion button { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-button); color: var(--green-deep); background: var(--white); font-weight: 800; }.route-name-suggestion button:disabled { opacity: .5; }
@media (max-width: 760px) { .journey-dossier-overview { grid-template-columns: repeat(2, 1fr); }.journey-dossier-overview > div:nth-child(2) { border-right: 0; }.journey-dossier-overview > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.journey-dossier-tabs { position: sticky; z-index: 700; top: 64px; padding: 10px 0; background: var(--paper); box-shadow: 0 8px 12px -10px rgba(16,25,23,.35); }.journey-dossier-tabs button { min-height: 42px; padding: 0 7px; font-size: 12px; }.journey-dossier-section-head { display: block; }.journey-alerts { margin-top: 12px; justify-content: start; }.journey-stage-dossier-list article { grid-template-columns: 40px minmax(0,1fr); }.journey-stage-actions { grid-column: 2; }.journey-lodging-row { grid-template-columns: 38px minmax(0,1fr); }.journey-lodging-row button { grid-column: 2; justify-self: start; }.journey-discovery-stage { grid-template-columns: 1fr; }.journey-discovery-stage button { justify-self: start; }.journey-saved-ideas article { grid-template-columns: 1fr; gap: 3px; }.saved-route-rename { width: 44px; height: 44px; top: 10px; right: 58px; } }

/* Roadbook IA — présent, mais jamais indispensable au terrain. */
.roadbook-assistant-launcher { position: fixed; z-index: 18; right: 24px; bottom: 24px; display: inline-flex; min-height: 48px; padding: 0 16px; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill); color: #fff; background: var(--green); box-shadow: 0 14px 30px rgba(6,37,28,.25); font: 700 13px/1 var(--font-ui); letter-spacing: .01em; }
.roadbook-assistant-launcher span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 14px; }.roadbook-assistant-launcher:hover,.roadbook-assistant-launcher:focus-visible { color: var(--ink); background: var(--lime); outline: 3px solid rgba(174,255,33,.28); outline-offset: 3px; }
.roadbook-assistant-dialog { width: min(640px,calc(100% - 24px)); }.assistant-sheet { gap: 18px; }.assistant-context { display: flex; min-height: 52px; padding: 12px 14px; align-items: center; justify-content: space-between; gap: 14px; border-radius: var(--r-card); background: #eef2ed; }.assistant-context span { color: var(--muted); font: 700 10px/1 var(--font-data); letter-spacing: .12em; }.assistant-context strong { color: var(--green); font-size: 14px; text-align: right; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }.assistant-suggestions button { min-height: 36px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); background: var(--white); font: 650 12px/1 var(--font-ui); }.assistant-suggestions button:hover,.assistant-suggestions button:focus-visible { border-color: var(--green); color: var(--green); background: #f2f8ea; }
.assistant-messages { display: grid; min-height: 106px; max-height: min(42dvh,360px); padding: 2px; overflow: auto; gap: 10px; }.assistant-message { max-width: 88%; padding: 12px 13px; border-radius: var(--r-card); white-space: pre-wrap; font-size: 14px; line-height: 1.45; }.assistant-message.is-user { justify-self: end; color: var(--ink); background: var(--lime); border-bottom-right-radius: 3px; }.assistant-message.is-roadbook { justify-self: start; color: var(--ink); background: #eef2ed; border-bottom-left-radius: 3px; }.assistant-message strong { display: block; margin-bottom: 4px; color: var(--green); font-size: 10px; letter-spacing: .1em; }
.assistant-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }.assistant-composer input { min-width: 0; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); background: var(--white); font: 500 14px/1.3 var(--font-ui); }.assistant-composer input:focus { border-color: var(--green); outline: 3px solid rgba(13,76,57,.12); }.assistant-composer .primary-button { min-height: 46px; padding-inline: 16px; }.assistant-disclaimer { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
@media (max-width: 760px) { .roadbook-assistant-launcher { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); min-height: 46px; padding: 0 13px; font-size: 12px; }.roadbook-assistant-dialog { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px) !important; }.assistant-composer { grid-template-columns: 1fr; }.assistant-composer .primary-button { width: 100%; } }

/* iPhone native final layer — this is intentionally last: older PWA
   safe-area rules must never alter Capacitor's already safe viewport. */
@media (max-width: 760px) {
  html.is-native-shell, html.is-native-shell body { min-height: 100dvh; overflow-x: clip; }
  html.is-native-shell .app-shell { width: 100%; padding: 0 14px calc(92px + env(safe-area-inset-bottom)) !important; }
  html.is-native-shell .topbar { position: sticky !important; top: 0 !important; z-index: 1600 !important; height: 64px !important; min-height: 64px !important; margin: 0 -14px !important; padding: 0 14px !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; background: #f5f6f3 !important; }
  html.is-native-shell .topbar-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
  html.is-native-shell .topbar-actions .icon-button, html.is-native-shell .topbar .menu-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  html.is-native-shell .route-view, html.is-native-shell .explore-view, html.is-native-shell .home-dashboard { padding-top: 24px !important; }
  html.is-native-shell .mobile-navigation { padding-bottom: max(7px, env(safe-area-inset-bottom)) !important; }
  html.is-native-shell .live-stats { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 4px !important; }
  html.is-native-shell .live-stats article { min-width: 0 !important; padding: 10px 5px !important; }
  html.is-native-shell .live-stats strong { font-size: clamp(23px,8.4vw,32px) !important; }
  html.is-native-shell .live-stats span { overflow-wrap: normal !important; font-size: 8px !important; letter-spacing: .03em !important; }
  html.is-native-shell .live-hero { padding: 20px 16px !important; }
}

/* ==========================================================================
   FIELD SYSTEM AFFINÉ — alignement du site sur l'application iOS
   Couche ajoutée en fin de feuille : elle surcharge sans rien supprimer.
   Pour revenir en arrière, supprimer ce bloc ou restaurer styles.css.avant-da.
   Principes : rayons ≤ 8 px, cartes séparées par l'espace et non par un trait,
   vert acide réservé à l'action principale, orange réservé au risque.
   ========================================================================== */

:root {
  --rb-ink: #101917;
  --rb-panel: #FBFCF9;
  --rb-bg: #F4F6F2;
  --rb-active: #C8FF47;
  --rb-alert: #FF7048;
  --rb-muted: #69736F;
  --rb-line: #CDD4CF;
  --rb-radius-card: 8px;
  --rb-radius-button: 6px;
}

/* Boutons : même géométrie et même hauteur tactile que dans l'application. */
.primary-button,
.secondary-button,
.text-button,
.mode-button,
.distance-button,
.poi-scope-button {
  min-height: 44px;
  border-radius: var(--rb-radius-button);
  font-weight: 600;
  letter-spacing: 0;
}

.primary-button {
  border: 1px solid var(--rb-active);
  color: var(--rb-ink);
  background: var(--rb-active);
}

.primary-button:hover {
  background: #bdf52f;
  transform: none;
}

.secondary-button {
  border: 1px solid var(--rb-line);
  color: var(--rb-ink);
  background: var(--rb-bg);
}

.secondary-button:hover {
  border-color: var(--rb-ink);
  background: var(--rb-panel);
}

.icon-button {
  border-radius: var(--rb-radius-button);
}

/* Cartes : plus de trait dur, une élévation très douce suffit à les détacher. */
.card,
.stat-card,
.plan-summary-card,
.weather-card,
.live-next-card,
.insight-card,
.operations-card {
  border: 0;
  border-radius: var(--rb-radius-card);
  background: var(--rb-panel);
  box-shadow: 0 2px 10px rgba(16, 25, 23, .06);
}

/* Les chiffres reviennent au monospace : ce sont des données, pas du décor. */
.stat-card strong,
.plan-summary-card strong,
.live-stats strong,
.operations-grid strong {
  font-family: var(--font-data, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 600;
  letter-spacing: -.01em;
}

.stat-card {
  min-height: 0;
  padding: 16px;
}

/* Interrupteurs de mode : rectangles nets, état actif souligné en vert. */
.mode-switch,
.poi-scope-switch,
.distance-filter {
  border-radius: var(--rb-radius-button);
}

.mode-button.is-active,
.poi-scope-button.is-active,
.distance-button.is-active {
  background: var(--rb-active);
  color: var(--rb-ink);
}

/* Zone d'import : même sobriété que la carte d'import de l'application. */
.drop-zone {
  border-radius: var(--rb-radius-card);
  box-shadow: none;
  background: var(--rb-panel);
}

/* L'orange ne sert qu'au risque, jamais à la décoration. */
.risk-segment.is-critical,
.supply-gap-row.is-critical span,
.count-pill.has-risk {
  background: var(--rb-alert);
}

/* ==========================================================================
   Repères de navigation et retours d'attente (ui-flow.js)
   Une barre fine, toujours au même endroit : d'où l'on vient à gauche, où
   l'on se trouve à droite, et ce que l'application est en train de faire
   juste en dessous.
   ========================================================================== */

.section-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -28px;
  padding: 7px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 246, 242, .94);
  backdrop-filter: blur(8px);
}
.section-bar.is-hidden { display: none; }

.section-bar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.section-bar-back::before { content: "‹"; font-size: 18px; line-height: 1; }
.section-bar-back:hover { background: var(--white); }

.section-bar-title {
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-activity {
  position: sticky;
  top: 48px;
  z-index: 39;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -28px;
  padding: 6px 28px 8px;
  background: rgba(200, 255, 71, .30);
  border-bottom: 1px solid var(--line);
}
.global-activity.is-hidden { display: none; }
.global-activity-label { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: var(--ink); }
.global-activity-percent { font-family: var(--font-data); font-size: 11px; color: var(--muted); }

.global-activity-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.global-activity-track::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--progress, .28) * 100%);
  background: var(--ink);
  transition: width var(--motion-standard) ease;
}
.global-activity.is-indeterminate .global-activity-track::after {
  width: 28%;
  animation: roadbook-activity 1.15s ease-in-out infinite;
}
@keyframes roadbook-activity {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Les blocs hors écran ne sont plus calculés tant qu'on ne les atteint pas :
   c'est ce qui rend le défilement des longues pages franc. */
.standalone-view .terrain-panel,
.standalone-view .community-panel,
.journey-dossier-panel,
.plan-section,
.analysis-hub {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

@media (max-width: 720px) {
  /* Ces deux bandeaux vont d'un bord à l'autre. Ils débordaient d'un retrait
     écrit en dur — -16px — alors que la marge de la coque descend à 12px sur
     les écrans étroits : quatre pixels de fond dépassaient de chaque côté, et
     la coque devenait scrollable à l'horizontale pour rien. Le retrait se
     déduit maintenant de la largeur réellement disponible, quel que soit le
     palier. */
  .section-bar { margin-inline: calc(50% - 50vw); padding: 6px calc(50vw - 50%); }
  .global-activity { margin-inline: calc(50% - 50vw); padding: 6px calc(50vw - 50%) 8px; top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .global-activity.is-indeterminate .global-activity-track::after { animation: none; width: 100%; }
}

/* Reprendre : la première chose à voir en arrivant, quand une étape est ouverte. */
.resume-card {
  margin: 18px 0 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow);
}
.resume-card.is-hidden { display: none; }
.resume-card .eyebrow { margin-bottom: 6px; }
.resume-card-title { font-size: 22px; line-height: 1.15; }
.resume-card-meta { margin: 6px 0 0; color: var(--muted); font-family: var(--font-data); font-size: 12px; }
.resume-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.resume-card-actions button { min-height: 44px; }

/* --- Logistique : contacts, documents et réservations ------------------- */
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.contact-actions .secondary-button { min-height: 38px; padding: 0 13px; font-size: 12px; text-decoration: none; }
.contact-actions-preview:empty { display: none; }
.contact-actions-preview { margin: 14px 0 4px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--paper); }
.contact-actions-preview .contact-actions { margin-top: 0; }

.document-editor { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.document-editor-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.document-editor-head h3 { margin: 2px 0 0; font-size: 15px; }
.document-add { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; cursor: pointer; }
.document-empty { margin: 0; color: var(--muted); font-size: 13px; }
.document-list { display: grid; margin: 0; padding: 0; gap: 8px; list-style: none; }
.document-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.document-list li > button:first-child { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: center; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); color: inherit; text-align: left; cursor: pointer; }
.document-list i { display: grid; height: 32px; place-items: center; border-radius: var(--r-button); background: var(--paper); color: var(--muted); font: 800 10px/1 var(--font-data); font-style: normal; }
.document-list strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.document-list small { color: var(--muted); font: 700 11px/1.4 var(--font-data); }
.document-remove { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); color: var(--muted); font-size: 18px; cursor: pointer; }
.document-remove:hover { border-color: var(--alert); color: var(--alert); }

.journey-bookings { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.journey-booking-row { display: grid; margin-top: 10px; padding: 14px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.journey-booking-row .booking-kind { padding: 5px 9px; border-radius: var(--r-button); background: var(--lime); color: var(--green-deep); font: 800 10px/1 var(--font-data); text-transform: uppercase; }
.journey-booking-row strong { display: block; font-size: 14px; }
.journey-booking-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.journey-booking-row em { display: block; margin-top: 4px; color: var(--green); font-size: 12px; font-style: normal; }
.journey-booking-row > button:last-child { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); font: 700 11px/1 var(--font-data); text-transform: uppercase; cursor: pointer; }
.booking-documents { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.booking-documents button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); font: 700 11px/1 var(--font-data); cursor: pointer; }
@media (max-width: 760px) {
  .journey-booking-row { grid-template-columns: auto minmax(0, 1fr); }
  .journey-booking-row > button:last-child { grid-column: 2; justify-self: start; }
}

/* Les fiches de voyage sont du texte long, pas des réglages numériques :
   l'étiquette passe au-dessus et le champ prend toute la largeur. Sans cela
   « Traversée Calais → Douvres » s'affichait tronqué dans 75 px. */
.journey-fields .field-label { display: grid; gap: 7px; align-items: start; justify-content: stretch; }
.journey-fields .field-label > span { display: block; width: 100%; }
.journey-fields .field-label input,
.journey-fields .field-label input[type="date"],
.journey-fields .field-label input[type="time"],
.journey-fields .field-label select,
.journey-fields .field-label textarea { width: 100%; max-width: none; min-height: 42px; padding: 9px 11px; font-size: 14px; }
.journey-fields .field-label textarea { min-height: 78px; resize: vertical; }
.journey-fields .field-label:has(textarea) { grid-column: 1 / -1; }

/* --- Densité mobile ------------------------------------------------------
   Sur un écran de téléphone, l'en-tête d'une vue mangeait près de 470 px avant
   le premier contenu utile : titre en 38 px, boutons empilés pleine largeur,
   bandeau de chiffres en deux rangées hautes. On garde la même hiérarchie,
   en plus serré, pour que la page commence là où le doigt regarde. */
@media (max-width: 600px) {
  .explore-header h1, .standalone-header h1 { margin: 6px 0 8px; font-size: 27px; letter-spacing: -.03em; }
  .standalone-header { gap: 12px; margin-bottom: 16px; }
  .standalone-header p:last-child { font-size: 14px; line-height: 1.45; }
  .standalone-view { padding-top: 18px; }

  /* Les actions d'en-tête tiennent sur une ligne au lieu de s'empiler. */
  .standalone-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .standalone-actions > button { flex: 1 1 auto; width: auto; min-height: 42px; padding: 0 14px; font-size: 12px; }
  .standalone-header > .secondary-button { width: auto; min-height: 42px; }

  .journey-dossier-overview { margin: 12px 0; grid-template-columns: repeat(4, 1fr); }
  .journey-dossier-overview > div { min-height: 62px; padding: 9px 6px; gap: 3px; text-align: center; justify-items: center; }
  .journey-dossier-overview > div:nth-child(2) { border-right: 1px solid var(--line); }
  .journey-dossier-overview > div:nth-child(-n+2) { border-bottom: 0; }
  .journey-dossier-overview strong { font-size: 17px; }
  .journey-dossier-overview span { font-size: 8px; letter-spacing: .05em; }
  .journey-dossier-overview small { font-size: 10px; }

  /* Une barre d'outils de carte lisible : l'action principale sur sa ligne,
     les commandes secondaires alignées dessous. */
  .map-toolbar h2 { font-size: 22px; }
  .map-toolbar-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
  /* Une règle plus haut impose `display: flex !important; flex-wrap: nowrap`
     à cette barre : avec quatre boutons, « Ajouter ou modifier les POI »
     tombait sur quatre lignes. On autorise le retour à la ligne et on donne
     sa propre ligne à l'action principale. */
  .map-toolbar-actions { flex-wrap: wrap !important; }
  .map-toolbar-actions .primary-button { flex: 1 0 100%; min-height: 46px; }
  .map-toolbar-actions .secondary-button { min-height: 42px; padding: 0 12px; font-size: 12px; }

  .roadbook-service-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .roadbook-service-actions .primary-button { grid-column: 1 / -1; }
}
.map-toolbar-note { margin: 5px 0 0; color: var(--muted); font-size: 13px; }

@media (max-width: 600px) {
  /* Le Roadbook enchaîne plan d'étape puis timeline : sans resserrer les
     en-têtes et les cartes de synthèse, il fallait deux écrans de défilement
     avant d'atteindre la première halte. */
  .plan-header { margin: 2px 0 16px; }
  .plan-header h2, .upcoming-intro h2, .section-title-row h2 { font-size: 25px; letter-spacing: -.03em; }
  .plan-header p:not(.eyebrow) { margin-top: 8px; font-size: 13px; }
  .plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .plan-actions .secondary-button { flex: 1 1 auto; min-height: 42px; padding: 0 12px; font-size: 12px; }
  .plan-summary-card { min-height: 92px; padding: 12px; }
  .plan-summary-card strong { font-size: 22px; }
  .operations-grid span, .plan-summary-card > span { margin-bottom: 7px; }
  .plan-summary-card small { margin-top: 5px; }
  .upcoming-intro { margin-bottom: 20px; }
  .map-toolbar h2 { font-size: 24px; }
}

/* ==========================================================================
   FINITION VISUELLE — une seule grammaire de formes
   Couche additive en fin de feuille : elle ne supprime rien et se retire en
   effaçant ce bloc. Elle achève le travail commencé par la direction
   artistique plus haut, qui ne couvrait que les boutons principaux et les
   cartes, en étendant les mêmes règles aux commandes de liste, aux popups de
   carte, aux dialogues et aux widgets d'état.
   ========================================================================== */

/* Un seul jeu de jetons : l'ancien préfixe pointe désormais sur le nouveau. */
:root {
  --rb-radius-card: var(--r-card);
  --rb-radius-button: var(--r-button);
}

/* --- Commandes -----------------------------------------------------------
   Trois hauteurs, un rayon, une graisse. Le relief en creux appliqué au
   bouton principal simulait un bouton physique : la direction artistique
   réserve l'ombre à ce qui flotte, on la retire. */
.primary-button,
.secondary-button {
  min-height: var(--h-control);
  padding: 0 18px;
  border-radius: var(--r-button);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color var(--motion-quick) ease, border-color var(--motion-quick) ease, color var(--motion-quick) ease;
}
.primary-button:hover,
.secondary-button:hover { transform: none; }
.primary-button:active,
.secondary-button:active { transform: translateY(1px); }

/* L'icône seule est une commande comme une autre : même rayon, même cible. */
.icon-button {
  width: var(--h-control);
  height: var(--h-control);
  border-radius: var(--r-button);
  box-shadow: none;
  transition: background-color var(--motion-quick) ease, border-color var(--motion-quick) ease;
}
.icon-button:hover { transform: none; background: var(--white); }

/* Un seul anneau de focus dans toute l'interface. */
.primary-button:focus-visible,
.secondary-button:focus-visible,
.icon-button:focus-visible,
.account-button:focus-visible,
.tab-button:focus-visible,
.text-button:focus-visible,
.mode-button:focus-visible,
.distance-button:focus-visible,
.poi-scope-button:focus-visible,
.journey-lodging-row button:focus-visible,
.journey-booking-row > button:last-child:focus-visible,
.journey-stage-actions button:focus-visible,
.document-list li > button:focus-visible,
.document-remove:focus-visible,
.popup-plan-button:focus-visible,
.popup-edit-button:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 2px;
}

/* --- Boutons de modification dans les listes ----------------------------
   « Ouvrir », « Nuit », « Modifier », « Ajouter » : quatre apparences
   différentes selon la liste. Une seule désormais. */
.journey-stage-actions button,
.journey-lodging-row button,
.journey-booking-row > button:last-child,
.terrain-report-list button,
.feed-entry-actions button,
.journal-entry-actions button {
  min-height: var(--h-control-sm);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  color: var(--ink);
  background: var(--white);
  font: 700 11px/1 var(--font-data);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--motion-quick) ease, background-color var(--motion-quick) ease;
}
.journey-stage-actions button:hover,
.journey-lodging-row button:hover,
.journey-booking-row > button:last-child:hover,
.terrain-report-list button:hover,
.feed-entry-actions button:hover,
.journal-entry-actions button:hover {
  border-color: var(--green-deep);
  background: var(--paper);
}

/* --- Popups de carte -----------------------------------------------------
   La bulle flotte au-dessus de la carte : c'est une surface, donc rayon de
   feuille et élévation franche. Ses boutons suivent la grammaire commune. */
.leaflet-popup-content-wrapper {
  border-radius: var(--r-sheet);
  box-shadow: var(--elevation-floating);
}
.leaflet-popup-content { margin: 14px 16px; font-family: var(--font-ui); }
.leaflet-popup-content strong { font-size: 15px; font-weight: 700; }
.leaflet-popup-content span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.leaflet-popup-tip { box-shadow: none; }
.popup-plan-button,
.popup-edit-button,
.leaflet-popup-content .popup-link {
  min-height: var(--h-control-sm);
  margin-top: 8px;
  border-radius: var(--r-button);
  font: 700 11px/1 var(--font-data);
  letter-spacing: .03em;
}
.popup-plan-button { border-color: var(--green-deep); }
.leaflet-control-zoom { border-radius: var(--r-button) !important; box-shadow: var(--elevation-raised) !important; }

/* --- Dialogues -----------------------------------------------------------
   Le rayon de 24 px faisait flotter une bulle molle au-dessus d'une interface
   anguleuse. En-tête, intro et barre d'actions deviennent identiques partout. */
.settings-dialog {
  border-radius: var(--r-sheet);
  box-shadow: var(--elevation-modal);
}
.settings-sheet { padding: 24px; }
.settings-header { padding-bottom: 18px; }
.settings-header h2 { font-size: 26px; letter-spacing: -.03em; }
.settings-header .dialog-intro { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.settings-header .icon-button { flex: none; font-size: 20px; font-weight: 400; }
.notification-actions,
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}
.notification-actions button,
.settings-actions button { min-height: var(--h-control); }

/* --- Widgets d'état ------------------------------------------------------
   Pastilles, jauges et interrupteurs partagent enfin la même géométrie. */
.count-pill {
  display: inline-flex;
  min-height: 26px;
  padding: 0 11px;
  align-items: center;
  border-radius: var(--r-pill);
  font: 700 10px/1 var(--font-data);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.poi-progress-track,
.progress-track { height: 6px; border-radius: var(--r-pill); overflow: hidden; }
.poi-progress-track span,
.progress-track span { border-radius: var(--r-pill); }
.switch-row { padding: 14px 0; gap: 16px; }
.switch-row strong { font-size: 13px; font-weight: 700; }
.switch-row small { color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Les libellés de catégorie sont des étiquettes, pas des boutons : forme de
   badge, jamais de bordure cliquable. */
.journey-booking-row .booking-kind {
  align-self: start;
  border-radius: var(--r-pill);
  padding: 6px 11px;
  letter-spacing: .06em;
}

/* --- Repères sur la carte ------------------------------------------------
   Les marqueurs ne sont pas des commandes : ils gardent leur langage propre.
   Une montée porte un libellé de largeur variable (« M1 », « M12 ») : c'est
   une pastille. Un service porte un pictogramme de taille fixe : c'est une
   puce carrée. La normalisation générale des rayons avait transformé les
   pastilles en rectangles, ce qui les faisait ressembler à des étiquettes. */
.climb-map-marker { border-radius: var(--r-pill); }
.poi-map-marker { border-radius: var(--r-xs); }

/* --- Hiérarchie des actions dans les popups ------------------------------
   L'action principale d'une bulle est une action principale : elle porte la
   même couleur que partout ailleurs. Elle était restée vert foncé, héritée
   d'avant le passage au vert acide, et lisait comme un bouton d'un autre
   produit. */
.popup-plan-button {
  border: 1px solid #a9d637;
  color: var(--ink);
  background: var(--lime);
}
.popup-plan-button:hover { background: #bdf52f; }
.popup-plan-button.is-active {
  border-color: var(--line);
  color: var(--ink);
  background: var(--white);
}
.popup-edit-button { border-color: var(--line); }
.popup-edit-button:hover { border-color: var(--green-deep); background: var(--paper); }

/* --- Compteur des onglets de trace --------------------------------------
   La pastille était un carré posé dans l'angle, invisible sur l'onglet actif
   puisque lime sur lime. Elle devient une vraie pastille, cerclée de blanc
   pour tenir sur les deux fonds. */
.tab-button b {
  border-radius: var(--r-pill);
  color: var(--lime);
  background: var(--green-deep);
}
.route-view .section-tabs .tab-button b {
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  box-shadow: 0 0 0 2px var(--white);
  font-size: 8px;
}
.route-view .section-tabs .tab-button.is-active b { box-shadow: 0 0 0 2px var(--lime); }

/* --- Un seul langage d'onglets ------------------------------------------
   Le dossier d'aventure utilisait trois boutons séparés à état actif encre,
   l'étape un bloc segmenté à état actif vert acide. Deux grammaires pour la
   même fonction. On garde celle de l'étape, conforme à la règle « le vert
   acide signifie actif ». */
.journey-dossier-tabs {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
}
.journey-dossier-tabs button {
  min-height: var(--h-control);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  font-weight: 700;
  transition: background-color var(--motion-quick) ease, color var(--motion-quick) ease;
}
.journey-dossier-tabs button:last-child { border-right: 0; }
.journey-dossier-tabs button:hover { background: var(--paper); }
.journey-dossier-tabs button.is-active {
  color: var(--ink);
  background: var(--lime);
}
.journey-dossier-tabs button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: -2px; }

/* Le bandeau de chiffres doit tenir sur une seule ligne par cellule : un
   « +11 975 m » qui passe à la ligne décale toute la rangée. */
.journey-dossier-overview strong { white-space: nowrap; }
.journey-dossier-overview small { white-space: nowrap; }
@media (max-width: 600px) {
  .journey-dossier-overview strong { font-size: 15px; }
  .journey-dossier-overview strong small { font-size: 9px; }
}

/* --- Champs de formulaire ------------------------------------------------
   Dans les fiches de voyage, chaque champ était une boîte bordée contenant
   une seconde boîte bordée : deux rectangles empilés pour une seule saisie.
   L'étiquette n'a pas besoin de cadre, seul le champ en porte un. */
.journey-fields .field-label {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.journey-fields .field-label > span { padding: 0; }
.journey-fields .field-label input,
.journey-fields .field-label select,
.journey-fields .field-label textarea {
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  background: var(--white);
  transition: border-color var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
}
.journey-fields .field-label input:focus,
.journey-fields .field-label select:focus,
.journey-fields .field-label textarea:focus {
  outline: none;
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(200, 255, 71, .45);
}
.journey-fields { gap: 14px; }
.journey-fields .field-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* Derniers rayons codés en dur : la barre de navigation basse, la feuille des
   services et les commandes de l'en-tête gardaient leurs propres valeurs. */
.mobile-navigation .mobile-live-button { border-radius: var(--r-card) !important; }
.poi-mobile-sheet { border-radius: var(--r-card) var(--r-card) 0 0 !important; }
.topbar-actions .icon-button,
.topbar .menu-button,
.topbar .account-button { border-radius: var(--r-button) !important; }

/* Sur mobile, une règle plus spécifique ramenait les dialogues à 6 px : un même
   composant n'avait pas la même forme selon la taille d'écran. */
dialog.settings-dialog,
dialog.service-filter-dialog,
dialog.install-dialog { border-radius: var(--r-sheet); }

/* Les commandes du profil altimétrique avaient gardé le rayon des cartes.
   Ce sont des boutons : elles suivent le rayon des boutons. */
.profile-controls .secondary-button,
.live-profile-controls .secondary-button { border-radius: var(--r-button); }

/* --- Cartes de la bibliothèque d'étapes ---------------------------------
   Les trois commandes étaient posées en absolu à trois endroits : le crayon
   et la croix en haut à droite, la coche en bas à droite. Elles flottaient
   dans le vide, de tailles et de formes différentes des autres commandes du
   site. Elles forment désormais une seule rangée, alignée sur le titre. */
.saved-route-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}
.saved-route-actions button,
.saved-route-rename,
.saved-route-complete,
.saved-route-delete {
  position: static;
  display: grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  color: var(--muted);
  background: var(--white);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--motion-quick) ease, color var(--motion-quick) ease, background-color var(--motion-quick) ease;
}
.saved-route-actions button:hover {
  border-color: var(--green-deep);
  color: var(--ink);
  background: var(--paper);
}
.saved-route-delete:hover {
  border-color: var(--orange) !important;
  color: var(--white) !important;
  background: var(--orange) !important;
}
.saved-route-actions button:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* Le titre laisse la place aux trois commandes et la carte respire moins. */
.saved-route-open { min-height: 0; padding: 16px 130px 16px 18px; gap: 8px; }
.saved-route-open > strong { font: 700 19px/1.15 var(--font-ui); letter-spacing: -.02em; white-space: normal; }
.saved-route-open > small { font-size: 11px; line-height: 1.5; }

/* Une étape terminée se signale par son fond et son étiquette, pas par un
   titre barré : le texte rayé donnait l'impression d'un défaut d'affichage. */
.saved-route-card.is-completed .saved-route-open strong { text-decoration: none; }
.saved-route-card.is-completed .saved-route-open > span { color: var(--green); }
.saved-route-card.is-completed .saved-route-complete {
  border-color: #a9d637;
  color: var(--green-deep);
  background: var(--lime);
}

/* Sur téléphone, les trois commandes gardent une cible confortable. */
@media (max-width: 600px) {
  .saved-route-actions { top: 10px; right: 10px; gap: 5px; }
  .saved-route-actions button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .saved-route-open { padding: 14px 14px 14px 16px; }
  .saved-route-open > strong { padding-right: 142px; }
}

/* ==========================================================================
   HEADER ET MENU
   ========================================================================== */

/* --- En-tête -------------------------------------------------------------
   Un trait noir de 2 px coupait la page en deux sous l'en-tête. Une barre
   d'application se signale par un filet fin et une ombre qui n'apparaît qu'au
   défilement, pas par une frontière opaque. */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(246, 248, 244, .92);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(16, 25, 23, .04);
}

/* La marque retrouve son signal et sa ligne de service : trois niveaux de
   lecture au lieu d'un mot isolé. */
.brand { gap: 11px; }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--r-button);
  box-shadow: inset 0 0 0 1px rgba(16, 25, 23, .12);
}
.brand-signal {
  display: inline-flex !important;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.brand-signal i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: var(--green);
  opacity: .32;
}
.brand-signal i:nth-child(1) { height: 5px; }
.brand-signal i:nth-child(2) { height: 9px; opacity: .5; }
.brand-signal i:nth-child(3) { height: 13px; opacity: .7; }
.brand-signal i:nth-child(4) { height: 16px; background: var(--green); opacity: 1; }
.brand-copy { display: grid; margin-left: 2px; gap: 3px; }
.brand-copy strong { color: var(--green-deep); font: 800 13px/1 var(--font-ui); letter-spacing: .1em; }
.brand-copy small {
  display: block !important;
  color: var(--muted);
  font: 700 8px/1 var(--font-data);
  letter-spacing: .14em;
}
.topbar-actions { gap: 8px; }

@media (max-width: 600px) {
  .brand-signal { display: none !important; }
  .brand-copy small { display: none !important; }
}

/* --- Menu latéral --------------------------------------------------------
   Le vert très sombre (#041f18) ne figure pas dans la palette. On passe à
   l'encre documentée, « encre et surfaces opérationnelles » : le vert acide
   redevient le seul accent et les libellés gagnent en contraste. */
.side-menu {
  color: #f4f6f2;
  background: var(--ink);
  box-shadow: 26px 0 70px rgba(0, 0, 0, .45);
}
.side-menu-head { padding-bottom: 18px; border-bottom-color: rgba(255, 255, 255, .14); }
.side-menu-head strong { font: 800 14px/1 var(--font-ui); letter-spacing: .1em; }
.side-menu-head small { color: var(--lime); }

/* Le bouton de fermeture était blanc sur blanc : le × était invisible. */
.side-menu-head .icon-button,
#closeMenuButton {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: var(--r-button) !important;
  color: #f4f6f2 !important;
  background: rgba(255, 255, 255, .06) !important;
  font-size: 20px;
}
.side-menu-head .icon-button:hover,
#closeMenuButton:hover {
  border-color: var(--lime) !important;
  color: var(--ink) !important;
  background: var(--lime) !important;
}

/* Les sous-titres étaient masqués : il ne restait qu'une colonne de numéros
   encadrés, plus visible que les libellés eux-mêmes. */
.side-menu nav button {
  min-height: 0;
  padding: 14px 12px;
  gap: 3px 14px;
  border-bottom-color: rgba(255, 255, 255, .09);
  border-radius: var(--r-button);
  transition: background-color var(--motion-quick) ease;
}
.side-menu nav button > span {
  align-self: center;
  border: 0;
  color: rgba(200, 255, 71, .55);
  font: 700 10px/1 var(--font-data);
  letter-spacing: .06em;
}
.side-menu nav button strong { font: 700 15px/1.25 var(--font-ui); }
.side-menu nav button small {
  display: block !important;
  color: rgba(244, 246, 242, .55);
  font: 500 12px/1.4 var(--font-ui);
}
.side-menu nav button:hover { background: rgba(255, 255, 255, .05); }

/* L'élément actif se signale par une barre, pas par un pavé plein qui écrase
   le reste de la liste. */
.side-menu-live,
.side-menu nav button.is-active {
  position: relative;
  background: rgba(200, 255, 71, .1) !important;
}
.side-menu-live::before,
.side-menu nav button.is-active::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--lime);
}
.side-menu-live strong { color: var(--lime); }
.side-menu-live > span { color: var(--lime) !important; }

.side-menu-account {
  border-radius: var(--r-button);
  border-bottom-color: rgba(255, 255, 255, .14) !important;
}
.side-menu-secondary { border-top-color: rgba(255, 255, 255, .14); }
.side-menu > p { color: rgba(244, 246, 242, .42); letter-spacing: .08em; }

/* Correctifs de contraste du menu : l'ancien style « pavé lime » laissait
   derrière lui un texte encre et un sous-titre olive posés sur fond sombre,
   donc illisibles, ainsi qu'un cadre lime et un en-tête resté vert. */
.side-menu { background: #0d1512 !important; }
.side-menu-head { background: transparent !important; }
.side-menu-live {
  border: 1px solid rgba(200, 255, 71, .26) !important;
  color: #f4f6f2 !important;
}
.side-menu-live strong { color: var(--lime) !important; }
.side-menu-live small { color: rgba(244, 246, 242, .62) !important; }
.side-menu nav button.is-active strong { color: var(--lime) !important; }
.side-menu nav button.is-active small { color: rgba(244, 246, 242, .62) !important; }

/* Le compte reprend la même lecture que les autres entrées. */
.side-menu-account { color: #f4f6f2 !important; background: transparent !important; }
.side-menu-account strong { color: #f4f6f2 !important; }
.side-menu-account small { color: rgba(244, 246, 242, .55) !important; }
.side-menu-account em { color: rgba(200, 255, 71, .55) !important; font-style: normal; }

/* ==========================================================================
   MENU LATÉRAL EN CLAIR
   Le menu de l'application iPhone est un panneau clair. Le site gardait un
   panneau sombre : deux produits, deux ambiances. Ce bloc annule le thème
   sombre défini plus haut plutôt que de le supprimer, pour rester réversible.
   ========================================================================== */
.side-menu {
  color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: 22px 0 60px rgba(16, 25, 23, .18) !important;
  border-right: 1px solid var(--line);
}
.side-menu-backdrop { background: rgba(16, 25, 23, .38); }

.side-menu-head { border-bottom-color: var(--line) !important; }
.side-menu-head strong { color: var(--ink); }
.side-menu-head small { color: var(--green) !important; }

.side-menu-head .icon-button,
#closeMenuButton {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--white) !important;
}
.side-menu-head .icon-button:hover,
#closeMenuButton:hover {
  border-color: var(--green-deep) !important;
  color: var(--ink) !important;
  background: var(--lime) !important;
}

.side-menu nav button {
  color: var(--ink);
  border-bottom-color: var(--line) !important;
}
.side-menu nav button > span { color: var(--green) !important; opacity: .55; }
.side-menu nav button strong { color: var(--ink); }
.side-menu nav button small { color: var(--muted) !important; }
.side-menu nav button:hover { background: var(--white) !important; }

.side-menu-live,
.side-menu nav button.is-active {
  border: 1px solid rgba(23, 62, 52, .18) !important;
  background: rgba(200, 255, 71, .22) !important;
}
.side-menu-live strong,
.side-menu nav button.is-active strong { color: var(--green-deep) !important; }
.side-menu-live small,
.side-menu nav button.is-active small { color: var(--muted) !important; }
.side-menu-live > span { color: var(--green) !important; opacity: 1; }
.side-menu-live::before,
.side-menu nav button.is-active::before { background: var(--green); }

.side-menu-account { color: var(--ink) !important; border-bottom-color: var(--line) !important; }
.side-menu-account strong { color: var(--ink) !important; }
.side-menu-account small { color: var(--muted) !important; }
.side-menu-account em { color: var(--muted) !important; }
.account-avatar { color: var(--ink); background: var(--lime); }

.side-menu-secondary { border-top-color: var(--line) !important; }
.side-menu > p { color: var(--muted) !important; }

.journey-itinerary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.journey-itinerary-actions .secondary-button { min-height: var(--h-control-sm); padding: 0 14px; font-size: 12px; }
@media (max-width: 600px) {
  .journey-itinerary-actions { margin-top: 10px; }
  .journey-itinerary-actions .secondary-button { flex: 1 1 auto; }
}

.journey-rename-block { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.journey-rename-block.is-hidden { display: none; }
.journey-rename-note { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* --- Choix du mode dans les réglages ------------------------------------- */
/* Deux cartes plutôt qu'un interrupteur : le mode change le rythme et ce qui
   s'affiche, il mérite d'être lu avant d'être choisi. */
.ride-mode-picker {
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
}

.ride-mode-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-s);
  margin-top: var(--space-xs);
}

.ride-mode-options label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-s);
  border: 1px solid var(--separator);
  border-radius: var(--r-button);
  cursor: pointer;
  background: var(--paper);
}

.ride-mode-options label:has(input:checked) {
  border-color: var(--ink);
  background: var(--lime-soft, #eef8d8);
}

.ride-mode-options input { margin-top: 3px; }
.ride-mode-options strong { display: block; font-size: 14px; }
.ride-mode-options small { display: block; color: var(--secondary); font-size: 11px; margin-top: 2px; }
.ride-mode-note { font-size: 11px; color: var(--secondary); margin-top: var(--space-s); }

/* Mode sportif : le roadbook se lit d'un coup d'œil sur le guidon. La ligne
   tertiaire disparaît, le titre grossit. Rien n'est perdu — repasser en
   aventure la fait revenir. */
.live-roadbook-row.is-compact .live-poi-main small { display: none; }
.live-roadbook-row.is-compact .live-poi-main strong { font-size: 16px; }

/* --------------------------------------------------------------------------
   Le Briefing
   La page reprend le vocabulaire du reste : cartes plates, trait de 1 px,
   chiffres en chasse fixe. Elle est volontairement proche de l'image exportée
   — ce qu'on lit à l'écran doit être ce qu'on envoie.
   -------------------------------------------------------------------------- */
.briefing-dialog .settings-sheet { max-width: 720px; }
.briefing-scope { display: flex; gap: 8px; margin-bottom: 16px; }
.briefing-scope .is-active { background: var(--ink, #101917); color: #fff; border-color: var(--ink, #101917); }
.briefing-page { display: flex; flex-direction: column; gap: 16px; }
.briefing-head h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.briefing-head p { margin: 4px 0 0; color: #69736f; font-size: 13px; }
.briefing-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  background: #fbfcf9; border: 1px solid #cdd4cf; border-radius: 8px;
}
.briefing-figures article { padding: 12px 14px; border-left: 1px solid #cdd4cf; }
.briefing-figures article:first-child { border-left: 0; }
.briefing-figures span { display: block; font: 600 9px ui-monospace, monospace; color: #69736f; letter-spacing: .06em; }
.briefing-figures strong { display: block; margin-top: 4px; font: 700 17px ui-monospace, monospace; color: #101917; }
.briefing-figures small { font: 400 10px ui-monospace, monospace; color: #69736f; }
.briefing-section {
  background: #fbfcf9; border: 1px solid #cdd4cf; border-radius: 8px; padding: 12px 14px;
}
.briefing-section > .eyebrow { margin: 0 0 8px; }
/* Une barre pleine hauteur plutôt qu'une pastille : sur une image redimensionnée
   dans une conversation, un point de 6 px disparaît. */
.briefing-item { border-left: 3px solid #c8ff47; padding: 2px 0 2px 10px; margin-bottom: 8px; }
.briefing-item.is-alert { border-left-color: #ff7048; }
.briefing-item:last-child { margin-bottom: 0; }
.briefing-item strong { display: block; font-size: 13px; font-weight: 600; color: #101917; }
.briefing-item small { display: block; margin-top: 1px; font: 400 10.5px ui-monospace, monospace; color: #69736f; }

/* --------------------------------------------------------------------------
   Confiance sur les horaires
   Le poids visuel porte la confiance, pas le verdict : « ouvert » constaté
   hier s'affiche plein et net, « ouvert » lu sur un horaire jamais vérifié
   s'affiche en retrait. Une forme se distingue au soleil, une nuance de
   couleur non — d'où la pastille pleine, cerclée ou pointillée.
   -------------------------------------------------------------------------- */
.schedule-badge { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font: 400 11px ui-monospace, monospace; color: #69736f; }
.schedule-badge i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.schedule-badge.is-open { color: #3f8f4f; }
.schedule-badge.is-closed { color: #ff7048; }
.schedule-badge.is-unknown { color: #69736f; }
.schedule-badge.is-high { font-weight: 600; }
.schedule-badge.is-high i { background: currentColor; }
.schedule-badge.is-medium i { border: 1.5px solid currentColor; }
.schedule-badge.is-low { color: #69736f; }
.schedule-badge.is-low i { border: 1px dashed #69736f; }
.schedule-badge small { display: block; width: 100%; margin-left: 12px;
  font: 400 10px ui-monospace, monospace; color: #69736f; }

/* Le geste de retour : dire ce qu'on a vu, devant la porte. */
.poi-report { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0; padding-top: 8px; border-top: 1px solid #cdd4cf; }
.poi-report > span { font: 600 9px ui-monospace, monospace; letter-spacing: .06em;
  color: #69736f; text-transform: uppercase; width: 100%; }
.poi-report button { font: 400 11px system-ui, sans-serif; padding: 4px 8px;
  border: 1px solid #cdd4cf; border-radius: 6px; background: #fbfcf9; color: #101917;
  cursor: pointer; }
.poi-report button:hover { border-color: #101917; }
.poi-report.is-set > span { width: auto; text-transform: none; letter-spacing: 0;
  font: 600 11px system-ui, sans-serif; color: #101917; }

/* --------------------------------------------------------------------------
   La recherche d'alternative
   Le chiffre qui décide est à droite, gros : c'est le temps que ça coûte.
   Le demi-tour est marqué, parce que c'est lui qui change tout et que le
   chiffre seul ne le dit pas.
   -------------------------------------------------------------------------- */
.alternative-dialog .settings-sheet { max-width: 640px; }
.alternative-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.alternative-filters .is-active { background: #c8ff47; border-color: #101917; }
.alternative-list { display: flex; flex-direction: column; gap: 10px; }
.alternative-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: start;
  padding: 12px 14px; background: #fbfcf9; border: 1px solid #cdd4cf; border-radius: 8px;
}
.alternative-main { min-width: 0; }
.alternative-main .eyebrow { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }
.alternative-main strong { display: block; font-size: 14px; color: #101917; }
.alternative-main small { display: block; margin-top: 2px;
  font: 400 10px ui-monospace, monospace; color: #69736f; }
.alternative-uturn { background: #e7c74b; color: #101917; border-radius: 3px;
  padding: 1px 4px; font: 700 8px ui-monospace, monospace; letter-spacing: .04em; }
.alternative-cost { text-align: right; }
.alternative-cost strong { display: block; font: 700 22px ui-monospace, monospace; color: #101917; }
.alternative-cost span { font: 400 9px ui-monospace, monospace; color: #69736f; }
.alternative-cost small { display: block; font: 400 10px ui-monospace, monospace; color: #69736f; }
.alternative-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.poi-alternative { margin: 8px 0; }
.poi-alternative button { width: 100%; font: 400 11px system-ui, sans-serif; padding: 6px 8px;
  border: 1px solid #cdd4cf; border-radius: 6px; background: #fbfcf9; color: #101917; cursor: pointer; }
.poi-alternative button:hover { border-color: #101917; }

/* --------------------------------------------------------------------------
   Les essentiels
   La raison de chaque halte est en gras dans la ligne : c'est elle qu'on lit
   pour accepter ou décocher, pas le nom du commerce.
   -------------------------------------------------------------------------- */
.essential-dialog .settings-sheet { max-width: 620px; }
.essential-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.essential-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; background: #fbfcf9; border: 1px solid #cdd4cf; border-radius: 8px; }
.essential-row.is-on { border-color: #101917; }
.essential-row input { margin-top: 3px; flex: 0 0 auto; }
.essential-row .eyebrow { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }
.essential-row strong { display: block; font-size: 14px; color: #101917; }
.essential-row em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: #101917; }
.essential-row small { display: block; margin-top: 2px;
  font: 400 10px ui-monospace, monospace; color: #69736f; }
.essential-planned { background: #c8ff47; color: #101917; border-radius: 3px;
  padding: 1px 4px; font: 700 8px ui-monospace, monospace; }

/* Le titre d'une des quatre familles du menu. Le numéro est ici, une fois, au
   lieu d'être répété sur chaque ligne — c'est la famille qu'on cherche d'abord.
   Il est compté, pas écrit : sur téléphone, « Rouler » disparaît du menu parce
   que le Départ tient déjà la barre du bas, et un numéro figé aurait laissé la
   liste sauter de 02 à 04. Un élément masqué n'incrémente pas le compteur, donc
   la numérotation se referme d'elle-même. */
.side-menu-primary { counter-reset: menu-family; }
.side-menu-group { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px;
  counter-increment: menu-family;
  font: 600 10px ui-monospace, monospace; letter-spacing: .12em; color: #101917; }
.side-menu-group:first-child { margin-top: 0; }
.side-menu-group span { font-weight: 700; color: #69736f; letter-spacing: .06em; }
.side-menu-group span::before { content: counter(menu-family, decimal-leading-zero); }
.side-menu-group::after { content: ""; flex: 1; height: 1px; background: #cdd4cf; }

/* La qualité du GPS, dite plutôt que masquée : un kilométrage affiché au
   dixième sur un point à 200 m près serait un mensonge confortable. */
.live-gps-quality { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid #cdd4cf; background: #fbfcf9;
  font: 400 12px system-ui, sans-serif; color: #69736f; }
.live-gps-quality::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto; background: #e7c74b; }
.live-gps-quality.is-unusable::before { background: #ff7048; }

/* --------------------------------------------------------------------------
   Le calendrier d'aventure
   Une aventure est une suite de jours, dont certains sans vélo. Un jour sans
   étape n'est pas un trou : c'est une décision, et il s'affiche comme telle.
   -------------------------------------------------------------------------- */
.journey-today { padding: 14px 16px; margin-bottom: 14px; border-radius: 8px;
  border: 1px solid #cdd4cf; background: #c8ff47; }
.journey-today .eyebrow { margin: 0 0 4px; }
.journey-today strong { display: block; font-size: 15px; color: #101917; }
.journey-today span { font: 400 12px system-ui, sans-serif; color: #101917; opacity: .75; }
.journey-day-list { display: flex; flex-direction: column; gap: 8px; }
.journey-day { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 14px;
  align-items: start; padding: 12px 14px; background: #fbfcf9;
  border: 1px solid #cdd4cf; border-radius: 8px; }
.journey-day.is-today { border-color: #101917; }
.journey-day.is-rest { background: #f4f6f2; }
.journey-day-index { min-width: 52px; }
.journey-day-index strong { display: block; font: 700 14px ui-monospace, monospace; color: #101917; }
.journey-day.is-today .journey-day-index strong { background: #c8ff47; border-radius: 4px;
  padding: 0 4px; display: inline-block; }
.journey-day-index small { font: 400 9px ui-monospace, monospace; color: #69736f; }
.journey-day-main strong { display: block; font-size: 14px; color: #101917; }
.journey-day-main strong.is-rest { color: #69736f; }
.journey-day-main small { display: block; font: 400 10px ui-monospace, monospace; color: #69736f; }
.journey-day-night.is-missing { color: #b8860b; }
.journey-day-state { font: 600 9px ui-monospace, monospace; color: #69736f;
  border: 1px solid #cdd4cf; border-radius: 4px; padding: 2px 5px; white-space: nowrap; }
.journey-day-state.is-late { color: #ff7048; border-color: #ff7048; }
.journey-day-actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.journey-day-actions button { font: 400 11px system-ui, sans-serif; padding: 5px 10px;
  border: 1px solid #cdd4cf; border-radius: 6px; background: #fff; color: #101917; cursor: pointer; }
.journey-day-actions button:hover { border-color: #101917; }

/* --------------------------------------------------------------------------
   Calendrier d'aventure, en grille mensuelle
   La forme est celle du calendrier de l'iPhone parce que c'est celle qu'on
   sait lire sans l'apprendre : une grille, un point sous les jours occupés, et
   le détail du jour touché en dessous.
   -------------------------------------------------------------------------- */
.journey-calendar { background: #fbfcf9; border: 1px solid #cdd4cf; border-radius: 8px;
  padding: 12px 10px; margin-bottom: 14px; }
.journey-cal-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; }
.journey-cal-head strong { font-size: 16px; color: #101917; }
.journey-cal-head button { border: 0; background: none; font-size: 20px; line-height: 1;
  color: #101917; cursor: pointer; padding: 0 10px; }
.journey-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.journey-cal-weekdays span { text-align: center;
  font: 600 10px ui-monospace, monospace; color: #69736f; }
.journey-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.journey-cal-cell { display: flex; flex-direction: column; align-items: center; gap: 3px;
  height: 44px; border: 0; background: none; cursor: pointer; padding: 0; }
.journey-cal-cell.is-empty { cursor: default; }
.journey-cal-cell b { display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font: 600 15px system-ui, sans-serif; color: #101917; }
.journey-cal-cell.is-outside b { font-weight: 400; color: #69736f; }
.journey-cal-cell.is-selected b { background: #c8ff47; }
.journey-cal-cell.is-today b { background: #101917; color: #fff; }
/* Un point plein pour une étape, creux pour une journée sur place : la forme
   se lit avant la couleur. */
.journey-cal-cell i { width: 5px; height: 5px; border-radius: 50%; background: #101917; }
.journey-cal-cell i.is-missing { background: #e7c74b; }
.journey-cal-cell i.is-rest { background: none; border: 1px solid #69736f; }
.journey-cal-detail { background: #fbfcf9; border: 1px solid #cdd4cf; border-radius: 8px;
  padding: 14px 16px; }
.journey-cal-detail .eyebrow { margin: 0 0 2px; }
.journey-cal-detail h3 { margin: 0 0 8px; font-size: 15px; color: #101917; }
.journey-cal-detail strong { display: block; font-size: 14px; color: #101917; }
.journey-cal-detail strong.is-empty { color: #69736f; }
.journey-cal-detail small { display: block; margin-top: 2px;
  font: 400 10px ui-monospace, monospace; color: #69736f; }

/* --------------------------------------------------------------------------
   Toutes les aventures, dans l'ordre où elles arrivent
   L'accueil mélange traces isolées et aventures : quand on en a plusieurs,
   « quelle est la prochaine » s'y perd.
   -------------------------------------------------------------------------- */
.journeys-section { margin-bottom: 22px; }
.journeys-section > .eyebrow { margin: 0 0 8px; }
.journeys-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px;
  align-items: start; padding: 14px 16px; margin-bottom: 8px;
  background: #fbfcf9; border: 1px solid #cdd4cf; border-radius: 8px; }
.journeys-row h3 { margin: 0; font-size: 16px; color: #101917; }
.journeys-row small { display: block; margin-top: 2px;
  font: 400 10px ui-monospace, monospace; color: #69736f; }
.journeys-row p { margin: 6px 0 0; font: 400 11px ui-monospace, monospace; color: #101917; }
.journeys-missing { color: #b8860b !important; margin-top: 4px !important; }
.journeys-day { font: 600 10px ui-monospace, monospace; color: #101917;
  background: #c8ff47; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.journeys-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

/* La date d'une étape, sur sa ligne dans « Modifier l'aventure » : c'est
   l'écran où l'on ordonne les jours, donc celui où l'on en change un. */
.journey-stage-date { position: relative; display: inline-flex; align-items: center;
  margin-top: 3px; padding: 2px 6px; border: 1px solid #cdd4cf; border-radius: 4px;
  font: 400 10px ui-monospace, monospace; color: #69736f; cursor: pointer; }
.journey-stage-date.is-set { border-color: #101917; color: #101917; font-weight: 600; }
.journey-stage-date:hover { border-color: #101917; }
/* Le champ natif couvre l'étiquette : on garde le calendrier du navigateur
   sans son apparence, qui jure avec le reste. */
.journey-stage-date input { position: absolute; inset: 0; opacity: 0; width: 100%;
  height: 100%; cursor: pointer; }

/* La croix qui ferme l'étape est posée en absolu dans l'en-tête. La place
   qu'elle occupe était réservée par un padding-right, mais deux règles plus
   basses redéfinissent le padding de l'en-tête et l'effaçaient : le nom de la
   trace passait dessous, illisible sur les noms longs — « OR-6159397--Jausiers:
   Les 7 Majeurs » s'arrêtait pile sous la croix. La réservation est refaite
   ici, après tout le reste, et seulement quand la croix existe. */
.route-heading:has(> .route-close-button) { position: relative; padding-right: 46px; }

/* Les onglets d'une étape défilent horizontalement quand ils ne tiennent pas.
   Sans marge de fin, la pastille de compte du dernier onglet touchait le bord
   de l'écran et paraissait coupée. */
@media (max-width: 720px) {
  .section-tabs { scroll-padding-inline-end: 12px; }
  .section-tabs > .tab-button:last-child { margin-right: 12px; }
}

/* Une ligne de réglage tient trois choses sur une seule rangée : l'intitulé, la
   commande, et la phrase qui explique. Sur un téléphone, les trois ne tiennent
   pas : « Vitesse sur le plat » se cassait en trois lignes d'un mot pendant que
   l'explication se serrait à côté. L'intitulé et sa commande restent sur la
   même rangée, l'explication passe dessous, sur toute la largeur. */
@media (max-width: 560px) {
  .field-label:not(:is(.journey-fields *)) { flex-wrap: wrap; }
  .field-label:not(:is(.journey-fields *)) > span { margin-left: auto; }
  .field-label:not(:is(.journey-fields *)) > small { flex: 1 0 100%; margin-top: 2px; }
}
/* L'explication n'est pas un second intitulé : elle héritait du gras de la
   ligne et pesait autant que le réglage qu'elle commente. */
.field-label:not(:is(.journey-fields *)) > small { color: var(--muted); font-weight: 500; }

/* La date d'une étape dans la feuille « Nuit & date » : l'indication du rang
   sous le champ, et le retrait sur sa propre ligne. */
#journeyStageDateHint { display: block; flex: 1 0 100%; margin-top: 4px; color: var(--muted);
  font-weight: 500; font-size: 11px; line-height: 1.4; }
.stage-date-clear { align-self: start; margin-top: calc(-1 * var(--space-s)); }
.rest-day-actions { display: flex; gap: var(--space-s); justify-content: space-between; }

/* Le calendrier d'une aventure sur un large écran.
   La grille du mois y devient énorme et pousse la fiche du jour sous la ligne
   de flottaison : on touchait une date, rien ne semblait bouger, et « Nuit &
   date » restait hors de portée sans savoir qu'il fallait défiler. Sur
   téléphone la grille est étroite et la fiche suit juste dessous — d'où un bug
   qui n'existait que sur ordinateur. La fiche passe donc à côté de la grille,
   et reste visible pendant qu'on change de jour. */
@media (min-width: 900px) {
  #journeyDossierCalendar:has(.journey-cal-detail) {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  #journeyDossierCalendar .journey-cal-detail { position: sticky; top: 84px; }
  /* Des cases de 170 px de large ne se lisent pas mieux : le mois garde la
     taille où l'œil embrasse la semaine d'un coup. */
  .journey-calendar { max-width: 420px; }
}

/* L'indication du rang, sous la date : c'est une phrase, pas une étiquette de
   champ — elle héritait des capitales et de la chasse fixe du formulaire. */
#journeyStageDateHint { text-transform: none; letter-spacing: 0; font-family: var(--font-ui); }

/* ==========================================================================
   Mouvement partagé avec l'application — transposition de RB.Motion
   ========================================================================== */

/* Une carte qui arrive glisse de quelques pixels et se révèle. Le décalage
   entre voisines fait lire la liste dans l'ordre, sans la ralentir. C'est
   `.appears(index)` de l'app, en CSS : le rang vient de nth-child, donc aucun
   JavaScript à changer dans les listes déjà rendues par innerHTML. */
@keyframes rb-appear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.journeys-section > article,
.journey-stage-dossier-list > article,
.journey-lodging-row,
.route-library-list > article,
.poi-list > article,
.climb-list > article {
  animation: rb-appear var(--motion-standard) var(--ease-spring) both;
}
.journeys-section > article:nth-of-type(1),
.journey-stage-dossier-list > article:nth-of-type(1),
.route-library-list > article:nth-of-type(1) { animation-delay: 0ms; }
.journeys-section > article:nth-of-type(2),
.journey-stage-dossier-list > article:nth-of-type(2),
.route-library-list > article:nth-of-type(2) { animation-delay: calc(1 * var(--stagger-step)); }
.journeys-section > article:nth-of-type(3),
.journey-stage-dossier-list > article:nth-of-type(3),
.route-library-list > article:nth-of-type(3) { animation-delay: calc(2 * var(--stagger-step)); }
.journeys-section > article:nth-of-type(4),
.journey-stage-dossier-list > article:nth-of-type(4),
.route-library-list > article:nth-of-type(4) { animation-delay: calc(3 * var(--stagger-step)); }
.journeys-section > article:nth-of-type(5),
.journey-stage-dossier-list > article:nth-of-type(5),
.route-library-list > article:nth-of-type(5) { animation-delay: calc(4 * var(--stagger-step)); }
.journeys-section > article:nth-of-type(6),
.journey-stage-dossier-list > article:nth-of-type(6),
.route-library-list > article:nth-of-type(6) { animation-delay: calc(5 * var(--stagger-step)); }
.journeys-section > article:nth-of-type(7),
.journey-stage-dossier-list > article:nth-of-type(7),
.route-library-list > article:nth-of-type(7) { animation-delay: calc(6 * var(--stagger-step)); }
/* Au-delà, tout le monde attend le plafond : la vingtième carte d'une longue
   liste ne doit pas se faire attendre une seconde. */
.journeys-section > article:nth-of-type(n+8),
.journey-stage-dossier-list > article:nth-of-type(n+8),
.route-library-list > article:nth-of-type(n+8) { animation-delay: var(--stagger-cap); }

/* Un écran qui arrive a un peu plus de course qu'une carte. */
#mainContent > section:not(.is-hidden),
.journey-dossier-panel:not(.is-hidden) {
  animation: rb-appear var(--motion-screen) var(--ease-spring) both;
}

/* « Réduire les animations » est un réglage système, pas une préférence
   décorative : on ne l'atténue pas, on l'obéit. L'app fait de même en
   remplaçant l'animation demandée par aucune animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Boutons — alignés sur PrimaryButtonStyle / SecondaryButtonStyle de l'app
   ==========================================================================
   Les commandes principales du site étaient écrites en capitales, en chasse
   fixe, à 10 px : elles se lisaient comme des étiquettes techniques, pas
   comme des boutons. L'app les pose en 14 pt demi-gras, casse normale, et
   44 px de haut — la cible tactile confortable. C'est la même action des deux
   côtés, elle doit avoir la même allure.

   La chasse fixe en capitales reste là où elle veut dire quelque chose : les
   surtitres, les pastilles de comptage, les filtres — des étiquettes, pas des
   actions. */
.primary-button, .secondary-button {
  min-height: var(--h-control);
  padding: 0 var(--space-l);
  border-radius: var(--r-button);
  font: 600 14px/1.2 var(--font-ui);
  letter-spacing: -.01em;
  text-transform: none;
}
.secondary-button { font-weight: 500; font-size: 13px; padding-inline: var(--space-m); }

/* Les commandes d'une fiche de jour ou d'une étape suivaient la même règle. */
.journey-day-actions button,
.journey-stage-actions button,
.journeys-actions button {
  min-height: var(--h-control-sm);
  border-radius: var(--r-button);
  font: 600 13px/1.2 var(--font-ui);
  letter-spacing: -.01em;
  text-transform: none;
}

/* Un alias qui pointait sur une valeur en dur : deux sources pour un rayon. */
:root { --rb-radius-card: var(--r-card); --rb-radius-button: var(--r-button); }

/* ==========================================================================
   Tour 01-1B — couleur, boutons, lisibilité
   ==========================================================================
   Repris du document Claude Design « Roadbook UI ». Trois règles y sont
   énoncées, et elles se tiennent :

   COULEUR — le vert lime cesse d'être un fond de bouton générique. Il ne
   signale plus que l'action du moment et l'état Live. Ce sont les actions
   primaires qui portent l'encre profonde : quand tout est vert, plus rien
   ne l'est.

   BOUTONS — trois niveaux au lieu de deux quasi identiques : primaire encre,
   secondaire à contour épais de 1,5 px, icône seule en carré. Hauteur 50 px,
   rayon 12, un seul primaire par carte.

   LISIBILITÉ — plus rien sous 11 px, et le gris secondaire passe de #69736F
   à #4C5854. Le premier ne tient pas en plein soleil. */

.primary-button {
  min-height: var(--h-control);
  border: 1.5px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
  font: 600 16px/1.2 var(--font-ui);
}
.primary-button:hover { border-color: var(--green-deep); background: var(--green-deep); transform: none; }

.secondary-button {
  min-height: var(--h-control);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font: 600 15px/1.2 var(--font-ui);
}
.secondary-button:hover { background: rgba(14,21,18,.06); }

/* L'action du moment — le départ, le Live. Le seul endroit où le lime reste
   un fond, parce qu'il n'y en a qu'un à l'écran. */
.accent-button,
.side-menu nav .side-menu-live,
.live-hero .primary-button {
  border: 1.5px solid var(--lime);
  color: var(--ink);
  background: var(--lime);
  font: 600 16px/1.2 var(--font-ui);
}

/* Une icône seule est un carré, pas un rectangle étiré. */
.icon-button {
  width: var(--h-control-sm);
  height: var(--h-control-sm);
  min-width: var(--h-control-sm);
  border-radius: var(--r-button);
}

/* Plus rien sous 11 px. Le surtitre était à 10, à la limite du lisible sur
   un guidon ; il gagne un point et du gras plutôt que de l'espacement. */
.eyebrow, .section-kicker { font-size: 11px; font-weight: 700; }
body { font-size: 15px; }

/* Le menu reste un tiroir, à toutes les largeurs.
   La colonne permanente du document tenait sur le papier, mais à l'usage elle
   occupe 284 px en permanence pour une navigation qu'on ouvre trois fois par
   séance — et elle décale tout le contenu vers la droite. Le tiroir se
   convoque quand on en a besoin et rend la place le reste du temps, sur un
   ordinateur comme sur un téléphone. */

/* ==========================================================================
   Tour 01-1B — navigation : un seul repère par écran
   ==========================================================================
   L'onglet actif portait un aplat de lime pleine largeur. Le document le
   ramène à un trait de 26 × 3 : l'état se lit, il ne crie pas, et le lime
   reste réservé à l'action du moment. */
.tab-button.is-active {
  position: relative;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.tab-button.is-active::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: 6px;
  left: 50%;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime);
  transform: translateX(-50%);
}
.journey-dossier-tabs button.is-active {
  position: relative;
  color: var(--ink);
  border-color: var(--ink);
  background: var(--white);
}
.journey-dossier-tabs button.is-active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime);
  transform: translateX(-50%);
}


/* Le fil de navigation vit maintenant dans la barre du haut : plus de bandeau
   collant sous un autre bandeau collant. Il perd donc tout ce qui faisait de
   lui une barre — fond, filet, position collante — et ne garde que son
   contenu : d'où l'on vient, et où l'on est. */
.topbar .section-bar {
  position: static;
  flex: 1;
  min-width: 0;
  margin: 0 0 0 var(--space-s);
  padding: 0;
  gap: var(--space-m);
  justify-content: flex-start;
  border: 0;
  background: none;
  backdrop-filter: none;
}
.topbar .section-bar-title {
  /* Sans base de croissance, un élément à min-width:0 et overflow:hidden se
     laisse écraser jusqu'à zéro : le titre était là, large de rien. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 600 15px/1.2 var(--font-ui);
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.topbar .section-bar-back { flex: 0 0 auto; }
/* Quand le fil est là, il dit où l'on est mieux que la marque ne le ferait. */
.topbar:has(.section-bar:not(.is-hidden)) > .brand { display: none; }
/* La barre du haut est une grille taillée pour [menu][marque][commandes] : le
   fil qu'on y glisse tombait dans une colonne large de 38 px. Avec un fil, la
   barre redevient une simple rangée. */
.topbar:has(.section-bar:not(.is-hidden)) {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.topbar:has(.section-bar:not(.is-hidden)) > .topbar-actions { flex: 0 0 auto; margin-left: auto; }

/* Sur téléphone, la rangée porte déjà le menu, le retour, le titre et deux
   commandes. Le libellé du retour — « Accueil », « Étape » — est le seul
   élément qu'on peut retirer sans rien perdre : le chevron dit la même chose,
   et le titre récupère la place au lieu d'être coupé au milieu d'un mot. */
@media (max-width: 560px) {
  .topbar .section-bar-back { font-size: 0; padding-inline: 4px; }
  .topbar .section-bar-back::before { font-size: 20px; }
  .topbar .section-bar { margin-left: 0; gap: var(--space-xs); }
}

/* ==========================================================================
   Tour 01-1B — les chiffres du Live se lisent à bout de bras
   ==========================================================================
   Le document les pose en monospace de 24 à 34 px. Ils étaient en Georgia,
   un romain à empattements : élégant sur un écran de bureau, mou dès qu'on
   le lit en roulant. Une chasse fixe aligne les chiffres d'une mesure à
   l'autre — le kilométrage ne danse plus quand il change de dizaine — et
   c'est déjà la police des données partout ailleurs dans Roadbook.

   Les étiquettes suivent la règle des 11 px : elles étaient à 10. */
.live-stats span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.62); }
.live-stats strong { font: 600 clamp(24px, 4.4vw, 34px)/1.05 var(--font-data); letter-spacing: -.02em; }
.live-stats small { font-size: 12px; color: rgba(255,255,255,.6); }
.live-status { font-size: 11px; }

/* ==========================================================================
   Le dossier d'aventure en PDF
   ==========================================================================
   Pas de bibliothèque : le navigateur fabrique déjà des PDF, avec du texte
   sélectionnable et la bonne police. Tout le travail est de lui donner une
   page à imprimer plutôt qu'un écran à photographier. */
@media print {
  .journey-dossier-view .standalone-actions,
  .journey-dossier-tabs,
  .mobile-navigation,
  .side-menu,
  .side-menu-backdrop,
  .journey-day-actions,
  .journey-stage-actions,
  .journey-discovery-actions,
  .journey-dossier-view button { display: none !important; }

  .app-shell { padding: 0 !important; }
  .journey-dossier-panel { display: block !important; }

  /* Une section par page tant qu'il y a de quoi la remplir : le calendrier,
     puis l'itinéraire, puis les nuits, puis les idées. */
  .journey-dossier-panel + .journey-dossier-panel { break-before: page; }
  .journey-dossier-overview { break-inside: avoid; }
  .journey-stage-dossier-list > article,
  .journey-lodging-row,
  .journey-cal-detail,
  .journey-calendar { break-inside: avoid; }

  /* Les aplats sombres vident une cartouche pour rien. */
  .eyebrow { color: #101917 !important; background: none !important; padding: 0 !important; }
  .journey-dossier-view .card,
  .journey-dossier-view article,
  .journey-calendar { border: 1px solid #c6cfc8; background: #fff !important; box-shadow: none !important; }

  /* La grille du mois retrouve sa largeur de lecture : à côté d'elle, la fiche
     du jour n'a plus de raison d'être — elle ne décrit qu'un jour, et le
     calendrier les porte tous. */
  #journeyDossierCalendar { display: block !important; }
  .journey-calendar { max-width: none; }
  .journey-cal-detail { display: none !important; }
}

/* Pendant la préparation de l'impression, l'écran ne doit pas sauter : les
   sections rouvertes restent hors du flux visible. */
body.is-exporting-dossier .journey-dossier-panel.is-hidden { display: block; }

/* Le tracé du circuit n'existe que pour le PDF : à l'écran, la carte du
   calendrier montre déjà mieux, et en couleur. */
.journey-dossier-route { display: none; }
@media print {
  .journey-dossier-route:not(.is-hidden) {
    display: block;
    margin: 0 0 8mm;
    break-inside: avoid;
  }
  .journey-dossier-route canvas { width: 100%; height: auto; }
  .journey-dossier-route figcaption {
    margin-top: 3mm;
    color: #4c5854;
    font: 700 9pt/1 ui-monospace, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

/* Le PDF d'aventure s'adresse à la famille : il montre le circuit, les étapes,
   les distances et le dénivelé. Les nuits, les contacts et les réservations
   restent dans l'application — on n'envoie pas l'adresse de son lit avec son
   itinéraire. */
@media print {
  #journeyDossierLogistics,
  #journeyDossierDiscover { display: none !important; }
  /* La ligne « ☾ hébergement » de chaque étape tombe avec le reste. */
  .journey-stage-dossier-list > article small { display: none; }
}

/* ==========================================================================
   Le lime redescend d'un cran dans la carte d'aventure
   ==========================================================================
   Neuf pastilles lime pleines empilées, plus la barre d'avancement, plus le
   cadre de l'étape prochaine : le vert finissait par occuper la moitié du
   bloc et ne signalait plus rien. C'est exactement ce que le document
   reproche. Les numéros de jour deviennent des jetons discrets sur l'encre ;
   le lime ne reste que sur l'étape prochaine et l'avancement — ce qu'on
   cherche vraiment du regard. */
.journey-stages button span {
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-xs);
  color: rgba(255,255,255,.8);
  background: transparent;
}
.journey-stages button.is-next span,
.journey-stages button[aria-current="true"] span {
  color: var(--ink);
  border-color: var(--lime);
  background: var(--lime);
}

/* Le bouton d'un panneau sombre héritait de l'encre sur l'encre : un carré
   blanc où l'on ne voyait plus la croix. Sur fond sombre, il s'éclaire. */
.journey-card .icon-button,
.live-hero .icon-button,
.journey-dossier-dark .icon-button {
  color: var(--white);
  border-color: rgba(255,255,255,.28);
  background: transparent;
}
.journey-card .icon-button:hover,
.live-hero .icon-button:hover { color: var(--ink); background: var(--white); }

/* Sur l'accueil, une aventure se présente d'abord : son nom, ses dates, son
   volume, son avancement. Neuf étapes déroulées sous chaque voyage font une
   page qu'on ne lit plus — on cherchait « Pays Bas », on tombait sur une liste
   de villes. Le détail s'ouvre d'un clic, et reste ouvert tant qu'on le veut. */
.journey-stages-fold { margin-top: 14px; }
.journey-stages-fold > summary {
  padding: 9px 0;
  color: rgba(255,255,255,.72);
  font: 700 11px/1 var(--font-data);
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
}
.journey-stages-fold > summary::-webkit-details-marker { display: none; }
.journey-stages-fold > summary::before { content: "▸ "; color: var(--lime); }
.journey-stages-fold[open] > summary::before { content: "▾ "; }
.journey-stages-fold > summary:hover { color: var(--white); }
.journey-stages-fold .journey-stages { margin-top: 0; }