/* Direction artistique La Trace.
   Tokens repris a l'identique de front/projects/lt-design-system/src/foundations/.
   L'ordre des layers reproduit celui du DS. */
/* `vendor` en premier = le CSS de MapLibre a la plus faible priorite (cf. index.html) */
@layer vendor, lt.base, lt.foundations, lt.utilities, app.overrides;

@layer lt.foundations {
  @font-face {
    font-family: "Bricolage Grotesque 48pt Condensed";
    src: url("/assets/fonts/Bricolage/BricolageGrotesque_48pt_Condensed-ExtraBold.ttf") format("truetype");
    font-style: normal; font-weight: 800; font-display: swap;
  }
  @font-face {
    font-family: "Figtree";
    src: url("/assets/fonts/Figtree/Figtree-VariableFont_wght.ttf") format("truetype");
    font-style: normal; font-weight: 1 1000; font-display: swap;
  }

  :root {
    /* neutrals */
    --lt-neutral-0:#fcfbfb; --lt-neutral-50:#e8ebed; --lt-neutral-100:#d1d8db;
    --lt-neutral-200:#a3b0b8; --lt-neutral-300:#738793; --lt-neutral-400:#62747f;
    --lt-neutral-500:#52616b; --lt-neutral-600:#404c53; --lt-neutral-700:#313a3f;
    --lt-neutral-800:#21272b; --lt-neutral-900:#101214; --lt-neutral-950:#090b0c;
    /* primary */
    --lt-neon-yellow-50:#faffeb; --lt-neon-yellow-100:#f5fed2; --lt-neon-yellow-200:#eafea5;
    --lt-neon-yellow-300:#e0fd79; --lt-neon-yellow-400:#d4fc45; --lt-neon-yellow-500:#c7fb0e;
    --lt-neon-yellow-600:#a5d303; --lt-neon-yellow-700:#7a9c02; --lt-neon-yellow-800:#536a02;
    --lt-neon-yellow-900:#273201; --lt-neon-yellow-950:#141900;
    /* secondary */
    --lt-blue-50:#e8f3fc; --lt-blue-100:#d1e7fa; --lt-blue-200:#a8d1f5; --lt-blue-300:#79b8f0;
    --lt-blue-400:#4ca0eb; --lt-blue-500:#1e88e6; --lt-blue-600:#156bb7; --lt-blue-700:#0f508a;
    --lt-blue-800:#0a355c; --lt-blue-900:#051b2e; --lt-blue-950:#030d17;
    /* traces */
    --lt-trace-a-default:#536a02; --lt-trace-b-default:#156bb7;
    --lt-trace-c-default:#65380c; --lt-trace-d-default:#a01242;
    --lt-trace-border-default:#ffffff;
    /* alpha */
    --lt-alpha-10:rgb(9 11 12 / 10%); --lt-alpha-20:rgb(9 11 12 / 20%);
    --lt-alpha-40:rgb(9 11 12 / 40%); --lt-alpha-60:rgb(9 11 12 / 60%);
    --lt-alpha-80:rgb(9 11 12 / 80%);
    /* semantiques */
    --lt-action-primary-surface-default:var(--lt-neon-yellow-300);
    --lt-action-primary-surface-hover:var(--lt-neon-yellow-400);
    --lt-action-primary-surface-pressed:var(--lt-neon-yellow-500);
    --lt-action-primary-surface-disabled:var(--lt-neutral-50);
    --lt-action-primary-border-default:var(--lt-neon-yellow-500);
    --lt-action-primary-text-default:var(--lt-neutral-900);
    --lt-action-secondary-surface-default:var(--lt-neutral-0);
    --lt-action-secondary-surface-hover:var(--lt-neon-yellow-100);
    --lt-action-secondary-surface-pressed:var(--lt-neon-yellow-200);
    --lt-action-secondary-border-default:var(--lt-neon-yellow-500);
    --lt-action-tertiary-surface-hover:var(--lt-neon-yellow-100);
    --lt-main-surface:var(--lt-neutral-0);
    --lt-interactive-surface-hover:var(--lt-neutral-50);
    --lt-interactive-surface-selected:var(--lt-blue-50);
    --lt-interactive-border-default:var(--lt-neutral-100);
    --lt-interactive-border-focus:var(--lt-blue-300);
    --lt-inverse-surface-default:var(--lt-neutral-900);
    --lt-inverse-text-default:var(--lt-neutral-0);
    --lt-warning-surface-default:#ffd78c; --lt-warning-border-default:#ffbc40;
    --lt-warning-text-default:#b87912;
    /* familles POI (couleurs marqueurs = poiTypesWithConfig, pas les --tag-*) */
    --poi-lodging-text:#f97a33; --poi-lodging-bg:#fbd0a9;
    --poi-food-text:#f46161;    --poi-food-bg:#fec6c6;
    --poi-bike-text:#4fe9ff;    --poi-bike-bg:#c6f7fe;
    --poi-nature-text:#66b700;  --poi-nature-bg:#e2fec6;
    --poi-culture-text:#ffda55; --poi-culture-bg:#fef5c6;
    --poi-transport-text:#ec6aa8; --poi-transport-bg:#fec6ee;
    --poi-practical-text:#62ff8e; --poi-practical-bg:#c6fed6;
    /* spacing / radius / elevation */
    --space-3xs:2px; --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
    --space-lg:24px; --space-xl:32px; --space-2xl:40px; --space-3xl:52px;
    --radius-none:0; --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
    --radius-xl:16px; --radius-2xl:32px; --radius-pill:9999px;
    --elevation-1:0 1px 3px 1px #73879340; --elevation-2:0 2px 6px 2px #73879340;
    --elevation-3:0 4px 8px 3px #73879340; --elevation-4:0 6px 10px 4px #73879340;
    --elevation-5:0 8px 12px 6px #73879340;
    /* typo */
    --font-family-body:Figtree;
    --font-family-headings:"Bricolage Grotesque 48pt Condensed";
    --font-size-2xs:.75rem; --font-size-xs:.875rem; --font-size-sm:1rem; --font-size-md:1.125rem;
    --font-size-lg:1.25rem; --font-size-xl:1.5rem; --font-size-2xl:1.875rem;
    --font-size-3xl:2.125rem; --font-size-4xl:2.5rem;
    --fw-regular:400; --fw-medium:500; --fw-semi-bold:600; --fw-bold:700; --fw-extra-bold:800;
    --ls-heading-tight:-2%; --ls-body-tight:-3.5%;
    --icon-size-xs:16px; --icon-size-sm:18px; --icon-size-md:20px; --icon-size-lg:24px;
    --icon-size-xl:32px;
  }
}

@layer lt.base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: var(--font-family-body), system-ui, sans-serif;
    letter-spacing: var(--ls-body-tight);
    color: var(--lt-neutral-900);
    background: var(--lt-main-surface);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-family-headings), var(--font-family-body), sans-serif;
    font-weight: var(--fw-extra-bold);
    letter-spacing: var(--ls-heading-tight);
    margin: 0;
  }
  button { font-family: inherit; letter-spacing: inherit; cursor: pointer; }
  a { color: var(--lt-blue-600); }
}

@layer app.overrides {

/* ---------- topbar (comme l'app) ---------- */
/* lt-top-bar : padding 32/32/16, logo 24px -> hauteur 72px */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 32px 32px 16px;
  background: var(--lt-main-surface);
}
.topbar__logo { display: block; height: 24px; width: auto; }
.topbar__nav { display: flex; align-items: center; gap: 16px; }
.topbar__link {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--radius-md);
  font-size: var(--font-size-xs); font-weight: var(--fw-semi-bold);
  line-height: 20px; color: inherit; text-decoration: none;
  background: transparent; transition: background 150ms ease;
}
.topbar__link:hover { background: var(--lt-neon-yellow-50); }
.topbar__link:active { background: var(--lt-neon-yellow-100); }
.topbar__link.is-active { background: var(--lt-neon-yellow-300); }
.topbar__link.is-active:active { background: var(--lt-neon-yellow-400); }
@media (max-width: 767px) {
  .topbar { padding: 12px 16px; }
  .topbar__nav { gap: 4px; }
  .topbar__link { padding: 6px 10px; font-size: var(--font-size-2xs); }
}

/* ---------- scene ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; }
#map { width: 100%; height: 100%; }


/* ---------- panneau flottant ---------- */
/* explore-page__left-panel-surface : absolute 32/32/32, 388px, radius 24, elevation-2 */
.panel {
  position: absolute; top: 32px; left: 32px; bottom: 32px; z-index: 2;
  width: 388px;
  display: flex; flex-direction: column;
  background: var(--lt-main-surface);
  border-radius: 24px;
  box-shadow: var(--elevation-2);
  overflow: hidden;
}
@media (min-width: 577px) and (max-width: 1024px) { .panel { width: 342px; } }
.panel__grip { display: none; }
.panel__head { padding: var(--space-md) var(--space-md) var(--space-xs); }
.panel__title { font-size: var(--font-size-2xl); line-height: 32px; }
.panel__sub { margin: 2px 0 0; font-size: var(--font-size-2xs); color: var(--lt-neutral-500); }
.panel__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

.panel__modes {
  display: flex; gap: var(--space-2xs); padding: 0 var(--space-md) var(--space-sm);
  flex: 0 0 auto;
}
.seg {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3xs);
  padding: 8px var(--space-xs); border-radius: var(--radius-pill);
  border: 1px solid var(--lt-interactive-border-default); background: var(--lt-neutral-0);
  font-size: var(--font-size-2xs); font-weight: var(--fw-semi-bold); color: var(--lt-neutral-500);
  transition: background .12s, color .12s, border-color .12s;
}
.seg:hover { background: var(--lt-interactive-surface-hover); color: var(--lt-neutral-900); }
.seg[aria-selected="true"] {
  background: var(--lt-action-primary-surface-default);
  border-color: var(--lt-action-primary-border-default);
  color: var(--lt-action-primary-text-default);
}
.seg .ico { --s: 16px; }

.blk { padding: var(--space-md); border-top: 1px solid var(--lt-interactive-border-default); }
.blk:first-child { border-top: none; padding-top: 0; }
.blk h2 { font-size: var(--font-size-md); line-height: 22px; margin-bottom: var(--space-2xs); }
.blk__h3 { font-size: var(--font-size-sm); margin-top: var(--space-md); }
.blk .hint { font-size: var(--font-size-2xs); color: var(--lt-neutral-500); line-height: 16px; margin: 0; }
.blk--last { margin-top: auto; }

/* ---------- search + filtres sur la carte ---------- */
/* explore-page__search-filter-on-map */
.mapbar {
  position: absolute; top: 32px; left: 436px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: 100%; max-width: 600px; pointer-events: none;
}
@media (min-width: 577px) and (max-width: 1024px) { .mapbar { left: 386px; right: 32px; width: auto; } }

/* lt-search-bar : 48px, radius 8, bord neutre, ombre posee par le lt-surface parent */
.searchbar {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-2xs);
  width: 100%; padding: 0 var(--space-xs); height: 48px;
  background: var(--lt-neutral-0); border-radius: var(--radius-md);
  border: 1px solid var(--primitives-border-color-default, #d1d8db);
  box-shadow: var(--elevation-2);
}
.searchbar:focus-within { border-color: var(--primitives-border-color-focused, #79b8f0); }
.searchbar input {
  flex: 1; border: none; outline: none; background: transparent; min-width: 0;
  font-family: var(--font-family-body); font-size: var(--font-size-xs);
  line-height: 20px; font-weight: var(--fw-medium); color: var(--lt-neutral-900);
}
.searchbar input::placeholder { color: var(--lt-neutral-400); opacity: 1; font-weight: var(--fw-medium); }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar__clear {
  border: none; background: transparent; color: var(--lt-neutral-500);
  display: grid; place-items: center; padding: 4px; border-radius: 50%;
}
.searchbar__clear:hover { background: var(--lt-interactive-surface-hover); }

.filterchips { pointer-events: auto; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* lt-chip enveloppe d'un lt-surface : h40, radius 8, bord neutre, elevation-2 */
.fchip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 40px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md);
  background: var(--lt-neutral-0); border: 1px solid var(--lt-interactive-border-default);
  box-shadow: var(--elevation-2);
  font-size: var(--font-size-xs); font-weight: var(--fw-medium); line-height: 18px;
  letter-spacing: -0.49px; color: var(--lt-neutral-900);
  transition: background .12s, border-color .12s;
}
.fchip:hover { background: var(--lt-interactive-surface-hover); }
.fchip:active { background: var(--lt-interactive-surface-pressed); }
.fchip[aria-pressed="true"] {
  background: var(--lt-neon-yellow-300);
  border-color: var(--lt-neon-yellow-500);
}
.fchip .dot { width: 8px; height: 8px; border-radius: 50%; }
.fchip__ico { width: 20px; height: 20px; display: block; }
.fchip .n { color: var(--lt-neutral-500); font-weight: var(--fw-regular); }
.fchip[aria-pressed="true"] .n { color: var(--lt-neutral-700); }

.searchres {
  pointer-events: auto; width: min(520px, 100%); max-height: 320px; overflow-y: auto;
  background: var(--lt-neutral-0); border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3); padding: var(--space-2xs);
}
.searchres__row {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs); border-radius: var(--radius-sm); cursor: pointer;
}
.searchres__row:hover { background: var(--lt-interactive-surface-hover); }
.searchres__badge {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 5px;
  border-radius: var(--radius-xs); border: 1.5px solid var(--lt-neutral-900);
  font-size: var(--font-size-2xs); font-weight: var(--fw-bold);
}
.searchres__t { font-size: var(--font-size-2xs); font-weight: var(--fw-semi-bold); }
.searchres__s { font-size: 10px; color: var(--lt-neutral-500); }

/* ---------- lt-map-nav (valeurs du DS) ---------- */
.lt-map-nav {
  position: absolute; bottom: 32px; right: 32px; z-index: 10;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs);
}

.lt-map-nav__surface {
  border-radius: var(--radius-xl);
  background: var(--lt-action-secondary-surface-default);
  border: 1px solid var(--lt-action-secondary-border-default);
  box-shadow: var(--elevation-2);
}
.lt-icon-button {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-xl); border: none; background: transparent;
  color: var(--lt-neutral-900);
  transition: background .12s;
}
.lt-icon-button:hover { background: var(--lt-action-secondary-surface-hover); }
.lt-icon-button:active { background: var(--lt-action-secondary-surface-pressed); }
.lt-icon-button:focus-visible { outline: 2px solid var(--lt-interactive-border-focus); outline-offset: -2px; }
.lt-icon-button[aria-pressed="true"] { background: var(--lt-action-primary-surface-default); }
.lt-icon-button .ico { --s: 20px; }
.lt-icon-button--tertiary { width: 36px; height: 36px; }

.lt-map-nav__zoom-controls {
  display: flex; height: 40px; justify-content: center; align-items: center;
  gap: var(--space-xs); border-radius: var(--radius-lg); padding: 0;
}
.lt-map-nav__zoom-label {
  width: 45px; max-width: 45px; text-align: center;
  color: var(--lt-neutral-900);
  font-family: var(--font-family-body), sans-serif;
  font-size: var(--font-size-md); font-weight: var(--fw-semi-bold);
  line-height: 20px; letter-spacing: -0.63px;
}
@media (max-width: 767px) { .lt-map-nav__zoom-surface { display: none; } }

/* ---------- panneau de style ---------- */
/* lt-map-nav__style-panel-surface : a gauche du bouton, radius 16 */
.stylepanel {
  position: absolute; bottom: 32px; right: 84px; z-index: 210; width: 268px;
  background: var(--semantic-surface-primary, #fcfbfb); border-radius: var(--radius-xl);
  box-shadow: var(--elevation-2); padding: var(--space-md); overflow: hidden;
}
.stylepanel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.stylepanel__head h3 { font-size: var(--font-size-sm); }
.stylepanel__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
.styleopt {
  border: 2px solid transparent; border-radius: var(--radius-md); padding: 0;
  background: transparent; cursor: pointer; text-align: center;
}
.styleopt__sw {
  display: block; width: 100%; height: 54px;   /* sans display:block, le span fait 0 de large */
  border-radius: var(--radius-sm); border: 1px solid var(--lt-interactive-border-default);
  background-size: cover; background-position: center;
}
.styleopt__l { display: block; font-size: 10px; font-weight: var(--fw-semi-bold); margin-top: 3px; color: var(--lt-neutral-600); }
.styleopt[aria-pressed="true"] { border-color: var(--lt-neon-yellow-500); }
.styleopt[aria-pressed="true"] .styleopt__l { color: var(--lt-neutral-900); }

/* ---------- controles ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-sm); }
.field > label {
  font-size: var(--font-size-2xs); font-weight: var(--fw-semi-bold); color: var(--lt-neutral-500);
  display: flex; justify-content: space-between; align-items: baseline;
}
.field .val { color: var(--lt-neutral-900); font-size: var(--font-size-sm); font-weight: var(--fw-bold); }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: var(--radius-pill); background: var(--lt-neutral-100); outline: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--lt-neon-yellow-300); border: 2px solid var(--lt-neon-yellow-500);
  box-shadow: var(--elevation-1); cursor: grab;
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--lt-neon-yellow-300);
  border: 2px solid var(--lt-neon-yellow-500); cursor: grab;
}
input[type=range]:focus-visible { outline: 2px solid var(--lt-interactive-border-focus); outline-offset: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: 10px var(--space-md); border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); font-weight: var(--fw-semi-bold);
  border: 1px solid transparent; transition: background .12s, border-color .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--lt-interactive-border-focus); outline-offset: 2px; }
.btn--primary {
  background: var(--lt-action-primary-surface-default);
  border-color: var(--lt-action-primary-border-default);
  color: var(--lt-action-primary-text-default);
}
.btn--primary:hover { background: var(--lt-action-primary-surface-hover); }
.btn--primary:active { background: var(--lt-action-primary-surface-pressed); }
.btn--primary:disabled {
  background: var(--lt-action-primary-surface-disabled);
  border-color: var(--lt-neutral-100); color: var(--lt-neutral-200); cursor: not-allowed;
}
.btn--secondary {
  background: var(--lt-action-secondary-surface-default);
  border-color: var(--lt-action-secondary-border-default);
  color: var(--lt-neutral-900);
}
.btn--secondary:hover { background: var(--lt-action-secondary-surface-hover); }
.btn--ghost { background: transparent; border-color: var(--lt-interactive-border-default); color: var(--lt-neutral-700); }
.btn--ghost:hover { background: var(--lt-interactive-surface-hover); }
.btn--full { width: 100%; }
.btn--sm { padding: 6px var(--space-sm); font-size: var(--font-size-2xs); }
.btn-row { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); flex-wrap: wrap; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--lt-interactive-border-default); background: var(--lt-neutral-0);
  font-size: var(--font-size-2xs); font-weight: var(--fw-medium); color: var(--lt-neutral-700);
  transition: background .12s, border-color .12s;
}
.chip:hover { background: var(--lt-interactive-surface-hover); }
.chip[aria-pressed="true"] {
  background: var(--lt-neon-yellow-100); border-color: var(--lt-neon-yellow-500);
  color: var(--lt-neutral-900); font-weight: var(--fw-semi-bold);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- icones (mask, comme lt-icon) ---------- */
.ico {
  display: inline-block; flex: 0 0 auto;
  width: var(--s, var(--icon-size-md)); height: var(--s, var(--icon-size-md));
  background-color: currentColor;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
}

/* ---------- resultat ---------- */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); margin-top: var(--space-sm); }
.metric {
  border: 1px solid var(--lt-interactive-border-default); border-radius: var(--radius-md);
  padding: var(--space-xs); text-align: center; background: var(--lt-neutral-0);
}
.metric .k {
  display: block; font-family: var(--font-family-headings); font-size: var(--font-size-lg);
  line-height: 24px; letter-spacing: var(--ls-heading-tight);
}
.metric .l { display: block; font-size: 10px; text-transform: uppercase; color: var(--lt-neutral-500);
  font-weight: var(--fw-semi-bold); letter-spacing: .04em; margin-top: 2px; }

.roadbook {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs);
  margin-top: var(--space-sm); padding: var(--space-sm);
  background: var(--lt-neutral-900); border-radius: var(--radius-md);
  max-height: 132px; overflow-y: auto;
}
.rb-node {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px;
  border-radius: var(--radius-xs);
  background: var(--lt-neutral-0); color: var(--lt-neutral-900);
  font-size: var(--font-size-2xs); font-weight: var(--fw-bold);
  border: 1.5px solid var(--lt-neutral-900);
  cursor: pointer; transition: transform .1s, background .1s;
}
.rb-node:hover { transform: scale(1.14); background: var(--lt-neon-yellow-300); }
.rb-node.is-start { background: var(--lt-neon-yellow-300); border-color: var(--lt-neon-yellow-600); }
.rb-node.is-end { background: var(--lt-neutral-900); color: var(--lt-neon-yellow-300); border-color: var(--lt-neon-yellow-300); }
.rb-sep { color: var(--lt-neutral-400); font-size: 10px; }

.net-trail { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-top: var(--space-xs); }
.net-pill {
  font-size: 10px; font-weight: var(--fw-semi-bold); padding: 3px var(--space-xs);
  border-radius: var(--radius-pill); background: var(--lt-blue-50); color: var(--lt-blue-700);
  border: 1px solid var(--lt-blue-200);
}

/* ---------- etapes ---------- */
.day {
  border: 1px solid var(--lt-interactive-border-default); border-radius: var(--radius-md);
  padding: var(--space-sm); margin-top: var(--space-xs); background: var(--lt-neutral-0);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.day:hover { background: var(--lt-interactive-surface-hover); border-color: var(--lt-neutral-300); }
.day.is-active { border-color: var(--lt-blue-300); background: var(--lt-interactive-surface-selected); }
.day-head { display: flex; align-items: center; gap: var(--space-xs); }
.day-badge {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--font-size-2xs); font-weight: var(--fw-bold); color: #fff;
}
.day-title { font-size: var(--font-size-xs); font-weight: var(--fw-semi-bold); }
.day-meta { margin-left: auto; font-size: var(--font-size-2xs); color: var(--lt-neutral-500); }
.day-nodes { margin-top: var(--space-xs); font-size: 11px; color: var(--lt-neutral-500); line-height: 15px;
  word-break: break-word; }
.day-lodging {
  margin-top: var(--space-xs); padding-top: var(--space-xs);
  border-top: 1px dashed var(--lt-interactive-border-default);
  display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-2xs);
}
.day-lodging .ico { --s: 16px; color: var(--poi-lodging-text); }

/* ---------- POIs ---------- */
.poi-row {
  display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs);
  border-radius: var(--radius-sm); cursor: pointer;
}
.poi-row:hover { background: var(--lt-interactive-surface-hover); }
.poi-dot {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.poi-dot .ico { --s: 14px; color: var(--lt-neutral-900); }
.poi-name { font-size: var(--font-size-2xs); font-weight: var(--fw-medium); line-height: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poi-sub { font-size: 10px; color: var(--lt-neutral-500); }
.poi-d { margin-left: auto; font-size: 10px; color: var(--lt-neutral-400); white-space: nowrap; }

/* marqueur POI : la goutte de POIMarker2 */
.poi-marker { cursor: pointer; }
.poi-pin { position: relative; width: 30px; height: 33px; }
.poi-pin svg { position: absolute; overflow: visible; }
/* valentine-markers.scss : .val-markerIcon */
.poi-pin .glyph { position: absolute; left: 4px; top: 3px; height: 21px; width: 22px; }
/* hebergement d'arrivee d'etape : un halo, pas un chiffre */
.poi-marker.is-stage .poi-pin::before {
  content: ''; position: absolute; left: 50%; top: 8px;
  width: 34px; height: 34px; transform: translateX(-50%);
  border-radius: 50%; border: 2px solid var(--lt-neutral-900);
  box-shadow: 0 0 0 3px var(--lt-neon-yellow-300);
  pointer-events: none;
}

.maplibregl-popup-content {
  border-radius: var(--radius-md); box-shadow: var(--elevation-3);
  font-family: var(--font-family-body); padding: var(--space-sm);
}

/* pastille point-noeud (marqueur DOM eventuel) */
.pn {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--lt-neutral-0); color: var(--lt-neutral-900);
  border: 2px solid var(--lt-neutral-900);
  font-family: var(--font-family-body); font-weight: var(--fw-bold);
  box-shadow: 0 1px 3px rgb(9 11 12 / 35%);
  cursor: pointer; user-select: none;
}

/* ---------- « Tous les filtres » (calquee sur new-all-filter-dialogue) ---------- */
.allf {
  position: absolute; inset: 0; z-index: 400; display: grid; place-items: center;
  background: var(--lt-alpha-40); padding: var(--space-md);
}
/* sans ça, `display: grid` bat le [hidden] du navigateur : la modale reste
   invisible mais capte tous les clics de la carte */
.allf[hidden] { display: none; }
.allf__dlg {
  width: min(560px, 100%); max-height: min(720px, calc(100% - 32px));
  display: flex; flex-direction: column;
  background: var(--lt-main-surface); border-radius: 24px; box-shadow: var(--elevation-4);
  overflow: hidden;
}
.allf__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-md) 0;
}
.allf__title { font-size: var(--font-size-xl); }
.allf__sub { margin: var(--space-2xs) var(--space-md) 0; font-size: var(--font-size-2xs); color: var(--lt-neutral-500); }
.allf__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-md); }
.allf__sec + .allf__sec { margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--lt-interactive-border-default); }
.allf__sechead { display: flex; align-items: center; gap: var(--space-xs); }
.allf__secico { width: 22px; height: 22px; }
.allf__sectitle { font-size: var(--font-size-xs); font-weight: var(--fw-bold); }
.allf__seccount { font-size: var(--font-size-2xs); color: var(--lt-neutral-400); }
.allf__all { margin-left: auto; }
.allf__list { margin-top: var(--space-xs); }
.allf__item {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs); border-radius: var(--radius-sm); cursor: pointer;
}
.allf__item:hover { background: var(--lt-interactive-surface-hover); }
.allf__itemico { width: 20px; height: 20px; flex: 0 0 auto; }
.allf__itemlabel { font-size: var(--font-size-xs); }
.allf__itemn { margin-left: auto; font-size: 10px; color: var(--lt-neutral-400); }
.allf__item input { position: absolute; opacity: 0; pointer-events: none; }
/* lt-switch-btn */
.allf__switch {
  width: 40px; height: 24px; border-radius: var(--radius-pill); flex: 0 0 auto;
  background: var(--lt-neutral-100); position: relative; transition: background .14s;
}
.allf__switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--lt-neutral-0); box-shadow: var(--elevation-1);
  transition: transform .14s;
}
.allf__item input:checked + .allf__switch { background: var(--lt-neon-yellow-500); }
.allf__item input:checked + .allf__switch::after { transform: translateX(16px); }
.allf__item input:focus-visible + .allf__switch { outline: 2px solid var(--lt-interactive-border-focus); outline-offset: 2px; }
.allf__foot {
  display: flex; gap: var(--space-xs); padding: var(--space-md);
  border-top: 1px solid var(--lt-interactive-border-default);
}
.fchip--all { font-weight: var(--fw-semi-bold); }
.fchip[data-status="partial"] {
  background: var(--lt-neon-yellow-100); border-color: var(--lt-neon-yellow-500);
}

/* ---------- fiche POI (calquee sur lt-poi-panel) ---------- */
/* meme geometrie que le panneau gauche : la fiche le recouvre, elle ne se pose pas a cote */
.poip {
  position: absolute; top: 32px; left: 32px; bottom: 32px; z-index: 16; width: 388px;
  overflow-y: auto;
  background: var(--lt-main-surface); border-radius: 24px;
  box-shadow: var(--elevation-2);
}
@media (min-width: 577px) and (max-width: 1024px) { .poip { width: 342px; } }
.poip__head { position: relative; padding: var(--space-lg) var(--space-md) var(--space-md); }
.poip__close {
  position: absolute; top: var(--space-xs); right: var(--space-xs);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: rgb(252 251 251 / 70%); color: var(--lt-neutral-900);
}
.poip__close:hover { background: var(--lt-neutral-0); }
.poip__ico { width: 40px; height: 40px; display: block; margin-bottom: var(--space-xs); }
.poip__title { font-size: var(--font-size-xl); line-height: 28px; }
.poip__types { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.poip__type {
  font-size: 10px; font-weight: var(--fw-semi-bold); padding: 2px var(--space-xs);
  border-radius: var(--radius-pill); background: var(--lt-neutral-0);
  border: 1px solid; color: var(--lt-neutral-700);
}
.poip__body { padding: var(--space-md); }
.poip__row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) 0; font-size: var(--font-size-xs); color: var(--lt-neutral-700);
  border-bottom: 1px solid var(--lt-interactive-border-default);
}
.poip__row:last-of-type { border-bottom: none; }
.poip__row--link { text-decoration: none; color: var(--lt-neutral-900); }
.poip__row--link:hover { color: var(--lt-blue-600); }
.poip__actions { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); flex-wrap: wrap; }
.poip__src { font-size: 10px; color: var(--lt-neutral-400); margin: var(--space-sm) 0 0; }

/* ---------- legende / attribution ---------- */
.legend {
  position: absolute; left: 436px; bottom: 40px; z-index: 8;
  background: var(--lt-neutral-0); border-radius: var(--radius-md); box-shadow: var(--elevation-2);
  padding: var(--space-xs) var(--space-sm); font-size: 10px; color: var(--lt-neutral-600);
  display: flex; flex-direction: column; gap: 3px; max-width: 220px;
}
.legend b { font-size: var(--font-size-2xs); color: var(--lt-neutral-900); }
.legend-row { display: flex; align-items: center; gap: var(--space-xs); }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; }
@media (max-width: 1200px) { .legend { display: none; } }

/* custom-attribution : pill sombre, liens blancs */
.attribution {
  /* a droite du panneau, pas sous le map-nav : la pill de zoom fait ~150 px de large
     et l'attribution venait la toucher */
  position: absolute; bottom: 8px; left: 436px; z-index: 1000;
  display: flex; gap: 10px; align-items: center;
  padding: 4px 8px; background: rgb(0 0 0 / 25%); border-radius: 10px;
  font-size: 12px; line-height: 16px; color: rgb(255 255 255 / 80%);
}
.attribution a { color: rgb(255 255 255 / 80%); text-decoration: none; font-size: 12px; line-height: 16px; }

/* ---------- divers ---------- */
.empty { text-align: center; padding: var(--space-lg) var(--space-md); color: var(--lt-neutral-400); }
.empty p { font-size: var(--font-size-2xs); margin: 0; line-height: 16px; }

.boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--lt-neutral-900); color: var(--lt-neutral-0); gap: var(--space-md);
  transition: opacity .35s ease; text-align: center;
}
.boot.is-gone { opacity: 0; pointer-events: none; }
.boot h1 { font-size: var(--font-size-2xl); color: var(--lt-neutral-0); }
.boot p { font-size: var(--font-size-2xs); color: var(--lt-neutral-300); margin: 0; }
.boot .bar { width: 190px; height: 3px; border-radius: 2px; background: var(--lt-neutral-700); overflow: hidden; }
.boot .bar i { display: block; height: 100%; width: 30%; background: var(--lt-neon-yellow-300);
  animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%);} 100% { transform: translateX(430%);} }

.toast {
  /* en bas, centre sur la partie visible de la carte (a droite du panneau),
     au-dessus de la legende et de l'attribution */
  position: absolute; bottom: 88px; left: calc(436px + (100% - 436px - 32px) / 2);
  transform: translateX(-50%);
  z-index: 410; background: var(--lt-neutral-900); color: var(--lt-neutral-0);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  font-size: var(--font-size-2xs); font-weight: var(--fw-medium);
  box-shadow: var(--elevation-3); display: flex; align-items: center; gap: var(--space-xs);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  max-width: min(560px, 80vw);
}
.toast.is-on { opacity: 1; }

.toast.is-warn { background: var(--lt-warning-surface-default); color: var(--lt-warning-text-default); }

.data-note {
  margin-top: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-sm);
  background: var(--lt-neon-yellow-50); border: 1px solid var(--lt-neon-yellow-200);
  font-size: 10px; line-height: 14px; color: var(--lt-neutral-700);
}
.data-note b { color: var(--lt-neutral-900); }

.kpi-strip { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); }
.kpi {
  flex: 1 1 auto; border-radius: var(--radius-sm); padding: var(--space-xs);
  background: var(--lt-neutral-50); text-align: center;
}
.kpi b { display: block; font-family: var(--font-family-headings); font-size: var(--font-size-md); }
.kpi span { font-size: 9px; text-transform: uppercase; color: var(--lt-neutral-500); font-weight: var(--fw-semi-bold); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   MOBILE — en dernier, volontairement : une media query n'augmente pas la
   spécificité, seul l'ordre tranche. Tout ce qui suit écrase les règles de base.
   ============================================================================ */
@media (max-width: 991px) {
  /* Bottom sheet posé SUR la carte, hauteur pilotée au doigt via --sheet. */
  .panel {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: var(--sheet, 46dvh); max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 16px rgb(115 135 147 / 28%);
    transition: height .22s cubic-bezier(.2, .7, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 20;
  }
  .panel.is-dragging { transition: none; }
  .panel__grip {
    display: block; width: 100%; padding: 10px 0 6px; border: none; background: transparent;
    touch-action: none; cursor: grab; flex: 0 0 auto;
  }
  .panel__grip span {
    display: block; width: 40px; height: 4px; margin: 0 auto;
    border-radius: var(--radius-pill); background: var(--lt-neutral-200);
  }
  .panel__head { padding: var(--space-2xs) var(--space-md) var(--space-xs); }
  .panel__title { font-size: var(--font-size-xl); line-height: 26px; }
  .panel__modes { padding: 0 var(--space-md) var(--space-xs); }

  /* la fiche POI est un bottom sheet, posé par-dessus le premier */
  .poip {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: auto; max-height: 76dvh; border-radius: 20px 20px 0 0;
    z-index: 22; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .poip__head { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .poip__title { font-size: var(--font-size-lg); line-height: 24px; }

  /* map-nav AU-DESSUS du sheet, comme dans l'app */
  .lt-map-nav {
    bottom: calc(var(--sheet, 46dvh) + 12px);
    right: 12px; top: auto; z-index: 1110;
    transition: bottom .22s cubic-bezier(.2, .7, 0, 1);
  }
  .panel.is-dragging ~ .lt-map-nav { transition: none; }
  .lt-icon-button { width: 44px; height: 44px; }        /* cible tactile */
  .lt-map-nav__zoom-surface { display: none; }

  /* search + filtres : une seule ligne qui glisse */
  .mapbar { top: 8px; left: 8px; right: 8px; max-width: none; width: auto; gap: 6px; }
  .searchbar { height: 44px; }
  .filterchips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    scroll-snap-type: x proximity; width: 100%;
  }
  .filterchips::-webkit-scrollbar { display: none; }
  .fchip {
    flex: 0 0 auto; height: 34px; padding: 0 var(--space-sm);
    font-size: var(--font-size-2xs); scroll-snap-align: start;
  }
  .fchip__ico { width: 16px; height: 16px; }
  .searchres { max-height: 46dvh; }

  .stylepanel { right: 12px; bottom: calc(var(--sheet, 46dvh) + 12px); z-index: 1120; }
  .toast { left: 50%; right: auto; bottom: auto; top: 100px; z-index: 1200; }
  .legend, .attribution { display: none; }

  /* la modale plein écran, comme lt-dialogue en mobile */
  .allf { padding: 0; align-items: end; }
  .allf__dlg { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; }
}
}

/* ---------------------------------------------------------------------------
   Charte Province de Luxembourg, relevee sur leur CSS de production
   (www.province.luxembourg.be) : rouge #a91314 dominant, bleu nuit #1f2e57, or #f1be48.
   Pose en app.overrides, le dernier layer declare : ces valeurs battent les tokens du DS
   sans avoir a toucher aux foundations.
   La police de marque est Effra, sous licence Dalton Maag : pas de fichier a heberger,
   on reste sur la pile systeme plutot que d'approcher au hasard.
--------------------------------------------------------------------------- */
@layer app.overrides {
  :root {
    --pl-red-900:#5c0a0b; --pl-red-800:#710d0e; --pl-red-700:#8d1011;
    --pl-red-600:#a91314; --pl-red-300:#d4726f; --pl-red-100:#f3d0d0; --pl-red-50:#fbeded;
    --pl-navy-700:#141f3b; --pl-navy-600:#1f2e57; --pl-navy-300:#8b96b5; --pl-navy-50:#eef0f6;
    --pl-gold-600:#c99a2e; --pl-gold-500:#f1be48; --pl-gold-100:#fbeed0;

    --lt-action-primary-surface-default:var(--pl-red-600);
    --lt-action-primary-surface-hover:var(--pl-red-700);
    --lt-action-primary-surface-pressed:var(--pl-red-800);
    --lt-action-primary-border-default:var(--pl-red-600);
    --lt-action-primary-text-default:#ffffff;
    --lt-action-primary-icon-default:#ffffff;

    --lt-action-secondary-border-default:var(--pl-red-600);
    --lt-action-secondary-surface-hover:var(--pl-red-50);
    --lt-action-secondary-surface-pressed:var(--pl-red-100);
    --lt-action-tertiary-surface-hover:var(--pl-red-50);
    --lt-interactive-surface-hover:var(--pl-red-50);

    --lt-trace-a-default:var(--pl-red-600);
    --lt-trace-b-default:var(--pl-navy-600);
    --lt-trace-c-default:var(--pl-gold-600);
    --lt-trace-d-default:var(--pl-red-300);
  }
}

@layer app.overrides {
  .beyond { margin-top:16px; padding-top:14px; border-top:1px solid var(--lt-neutral-100); }
  .beyond h3 { font-size:14px; font-weight:700; margin:0 0 6px; color:var(--pl-red-600); }
  .beyond select {
    width:100%; padding:8px 10px; border-radius:8px; font:inherit;
    border:1px solid var(--lt-neutral-100); background:var(--lt-neutral-0); color:inherit;
  }
  .beyond-out { margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--pl-navy-50); }
  .beyond-line { font-size:13px; line-height:1.5; }
  .beyond-total { margin-top:4px; padding-top:6px; border-top:1px solid var(--lt-neutral-100); }
  .beyond-note { margin-top:6px; font-size:12px; color:var(--lt-neutral-400); }
}

@layer app.overrides {
  /* La pastille du slider etait restee au jaune neon du design system La Trace,
     seule tache hors charte sur le panneau. */
  input[type=range]::-webkit-slider-thumb {
    background: var(--pl-gold-500); border-color: var(--pl-gold-600);
  }
  input[type=range]::-moz-range-thumb {
    background: var(--pl-gold-500); border-color: var(--pl-gold-600);
  }
}