/* 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__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;
  display: flex; flex-direction: column;
  background: var(--lt-main-surface); border-radius: 24px;
  box-shadow: var(--elevation-2);
  overflow: hidden;
}
.poip__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.smp__grip { display: none; }
/* Les tiroirs portent un display explicite, qui bat le display:none de l'attribut hidden
   de la feuille du navigateur : il faut le redire, sinon un tiroir ferme intercepte
   encore les clics. */
.panel[hidden], .poip[hidden], .stylepanel[hidden] { display: none !important; }
@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) {
  /* Tiroirs mobiles. Géométrie du composant de production : le tiroir occupe TOUT son
     conteneur et se glisse vers le bas ; la hauteur visible n'est plus une hauteur CSS
     mais la part du panneau restée dans l'écran, pilotée en JS par translateY. */
  .panel, .poip, .stylepanel {
    position: absolute; inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto; height: auto; max-height: none;
    z-index: 300;
    display: flex; flex-direction: column;
    padding: 0;
    background: var(--lt-main-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 16px rgb(115 135 147 / 28%);
    transform: translateY(100%);
    will-change: transform;
    overflow: hidden;
    /* touch-action piloté en JS, comme dans le composant de production */
  }
  /* Plein écran : le tiroir devient une page, plus de démarcation avec le haut de l'écran. */
  .panel.is-fullscreen, .poip.is-fullscreen, .stylepanel.is-fullscreen { border-radius: 0; }

  .smp__grip {
    display: block; width: 100%; padding: 10px 0 8px; border: none; background: transparent;
    touch-action: none; cursor: grab; flex: 0 0 auto;
  }
  .smp__grip span {
    display: block; width: 48px; height: 5px; margin: 0 auto;
    border-radius: var(--radius-pill); background: var(--lt-neutral-300);
  }

  .panel__scroll, .poip__scroll, .stylepanel__scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .panel__scroll.locked, .poip__scroll.locked, .stylepanel__scroll.locked {
    -webkit-overflow-scrolling: auto; touch-action: none;
  }
  .panel__head, .panel__modes { flex: 0 0 auto; }

  .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); }

  .poip__head { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .poip__title { font-size: var(--font-size-lg); line-height: 24px; }

  .stylepanel__scroll { padding: 0 var(--space-md) var(--space-md); }

  /* map-nav AU-DESSUS du tiroir, comme dans l'app */
  .lt-map-nav {
    bottom: calc(var(--sheet, 260px) + 12px);
    right: 12px; top: auto; z-index: 1110;
    transition: bottom .22s cubic-bezier(.2, .7, 0, 1);
  }
  body.sheet-dragging .lt-map-nav { transition: none; }
  /* Tiroir plein écran : il recouvre toute la carte. Laisser la barre de recherche et le
     map-nav flotter par-dessus donnerait deux interfaces empilées, et mapPadding
     compterait une place que la carte n'a plus. */
  body.sheet-full .lt-map-nav, body.sheet-full .mapbar { display: 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; }

  .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 Correze Tourisme, relevee sur le CSS de production de tourismecorreze.com :
   vert #8bc05a dominant, vert fonce #193424, orange d'action #e94e1b.
   Pose en app.overrides, le dernier layer declare : ces valeurs battent les tokens du DS
   sans toucher aux foundations.
   Les polices de marque aptly et dunbar-text sont servies par Typekit, chargees dans le HTML.
--------------------------------------------------------------------------- */
@layer app.overrides {
  :root {
    --cz-green-900:#142a1d; --cz-green-800:#193424; --cz-green-700:#53803f;
    --cz-green-600:#8bc05a; --cz-green-300:#b2d591; --cz-green-100:#e8f2de; --cz-green-50:#f3f8ee;
    --cz-ink-700:#313131; --cz-ink-600:#424242; --cz-ink-300:#9aa39a; --cz-ink-50:#f2f4f1;
    --cz-orange-600:#c93f14; --cz-orange-500:#e94e1b; --cz-orange-100:#fbdfd4;

    /* Marches intermediaires du vert, deduites des variantes de bouton de leur site :
       hover #476d36 et actif #426632 sur .btn-primary-rgaa. */
    --cz-green-650:#7fb44e; --cz-green-720:#476d36; --cz-green-750:#426632;
    --cz-green-200:#cfe6b4;
    /* Bleu d'information #1296c8 decline, et sa bordure de tableau #b9c2b2. */
    --cz-blue-500:#1296c8; --cz-blue-600:#0f7ba4; --cz-blue-700:#0c6183;
    --cz-blue-300:#55b6dc; --cz-blue-200:#9ed6ec; --cz-blue-50:#e7f4fa;
    --cz-turquoise-600:#058890;
    --cz-red-500:#e24b3c;

    /* Piles de polices copiees telles quelles de leur production
       (--body-font-family + les regles .text-style h1/h2) : Typekit d'abord,
       puis Roboto Condensed, la police de repli de leur propre site. */
    --cz-font-title:aptly, "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --cz-font-text:dunbar-text, "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-family-headings:var(--cz-font-title);
    --font-family-body:var(--cz-font-text);

    /* dunbar-text n'existe qu'en 500, 700 et 800 chez Typekit : demander 400 ou 600
       ferait synthetiser une graisse par le navigateur. On aligne les jetons du DS
       sur les fontes reellement livrees. */
    --fw-regular:500; --fw-medium:500; --fw-semi-bold:700; --fw-bold:700; --fw-extra-bold:800;
    /* Le crenage negatif du DS visait Figtree ; aptly et dunbar-text sont deja condensees. */
    --ls-heading-tight:normal; --ls-body-tight:normal;

    /* Rayon unique de leur charte : --btn-border-radius:10px sur tout leur systeme. */
    --cz-radius:10px;

    /* Neutres reteintes vers leur univers : texte #424242 / #313131, vert tres fonce
       #193424 pour les aplats sombres, bordure de tableau #b9c2b2. */
    --lt-neutral-0:#ffffff; --lt-neutral-50:#f2f4f1; --lt-neutral-100:#dfe4dc;
    --lt-neutral-200:#b9c2b2; --lt-neutral-300:#8c9a8b; --lt-neutral-400:#66755f;
    --lt-neutral-500:#5b6b5e; --lt-neutral-600:#4a5a4c; --lt-neutral-700:#313131;
    --lt-neutral-800:#26382b; --lt-neutral-900:#193424; --lt-neutral-950:#142a1d;

    /* Le jaune neon de La Trace n'a pas d'equivalent chez eux : toute l'echelle bascule
       sur le vert de marque. Remapper la primitive evite de reprendre les 25 regles
       du fichier qui la referencent. */
    --lt-neon-yellow-50:var(--cz-green-50); --lt-neon-yellow-100:var(--cz-green-100);
    --lt-neon-yellow-200:var(--cz-green-200); --lt-neon-yellow-300:var(--cz-green-600);
    --lt-neon-yellow-400:var(--cz-green-650); --lt-neon-yellow-500:var(--cz-green-700);
    --lt-neon-yellow-600:var(--cz-green-720); --lt-neon-yellow-700:var(--cz-green-750);
    --lt-neon-yellow-800:#2b4623; --lt-neon-yellow-900:var(--cz-green-800);
    --lt-neon-yellow-950:var(--cz-green-900);

    --lt-blue-50:var(--cz-blue-50); --lt-blue-100:#cbe9f4; --lt-blue-200:var(--cz-blue-200);
    --lt-blue-300:var(--cz-blue-300); --lt-blue-400:#2ca4d3; --lt-blue-500:var(--cz-blue-500);
    --lt-blue-600:var(--cz-blue-600); --lt-blue-700:var(--cz-blue-700);
    --lt-blue-800:#084257; --lt-blue-900:#04212c; --lt-blue-950:#021016;

    /* Bouton principal = leur .btn-primary-rgaa (#53803f), qui est le CTA reellement
       peint sur leur site (« Rechercher » dans l'en-tete). Le #8bc05a de marque porte
       les etats selectionnes : en aplat plein il ne tient pas le texte blanc (1,98:1). */
    --lt-action-primary-surface-default:var(--cz-green-700);
    --lt-action-primary-surface-hover:var(--cz-green-720);
    --lt-action-primary-surface-pressed:var(--cz-green-750);
    --lt-action-primary-surface-disabled:var(--cz-ink-50);
    --lt-action-primary-border-default:var(--cz-green-700);
    --lt-action-primary-text-default:#ffffff;
    --lt-action-primary-icon-default:#ffffff;

    --lt-action-secondary-surface-default:#ffffff;
    --lt-action-secondary-border-default:var(--cz-green-700);
    --lt-action-secondary-surface-hover:var(--cz-green-50);
    --lt-action-secondary-surface-pressed:var(--cz-green-100);
    --lt-action-tertiary-surface-hover:var(--cz-green-50);
    --lt-interactive-surface-hover:var(--cz-green-50);
    --lt-interactive-surface-selected:var(--cz-green-100);
    --lt-interactive-border-default:#dfe4dc;
    /* Anneau de focus : le bleu d'information assombri, pour ne pas se confondre
       avec le vert qui, lui, signale la selection. */
    --lt-interactive-border-focus:var(--cz-blue-600);
    --lt-inverse-surface-default:var(--cz-green-800);

    --lt-warning-surface-default:var(--cz-orange-100);
    --lt-warning-border-default:var(--cz-orange-500);
    --lt-warning-text-default:#a1330f;

    --lt-trace-a-default:var(--cz-green-700);
    --lt-trace-b-default:var(--cz-green-800);
    --lt-trace-c-default:var(--cz-orange-500);
    --lt-trace-d-default:var(--cz-green-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(--cz-green-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(--cz-ink-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(--cz-orange-500); border-color: var(--cz-orange-600);
  }
  input[type=range]::-moz-range-thumb {
    background: var(--cz-orange-500); border-color: var(--cz-orange-600);
  }
}

/* ---------------------------------------------------------------------------
   Charte Correze Tourisme, niveau composant.
   Valeurs relevees dans raw/site-source/correze-site.css :
   .btn -> radius 10px, padding 12/18, aptly, capitales, transition .3s
   .btn-sm -> 12px / 700       .btn-secondary -> 600 / capitales
   .text-style h1 -> aptly 700 capitales      h2 -> aptly 600 capitales #193424
   .text-style h3 -> dunbar-text 700 capitales, interlettre 1px
   .form-control -> padding 12/18, texte #424242
--------------------------------------------------------------------------- */
@layer app.overrides {

  /* ---------- typographie ---------- */
  /* dunbar-text n'a pas de coupe 400 : sans graisse explicite le navigateur en
     synthetiserait une a partir du 500. */
  body {
    color: var(--cz-ink-600); font-weight: var(--fw-regular);
    /* Reprise de leur regle `body` : sans ca le navigateur mobile peut gonfler
       certains blocs et faire deborder les onglets de mode. */
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  }
  h1, h2, h3, h4 { color: var(--cz-green-800); font-weight: 700; }
  a { color: var(--cz-green-700); }

  .panel__title, .allf__title, .boot h1, .blk h2 {
    font-family: var(--cz-font-title);
    font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15;
  }
  .blk h2 { margin-bottom: var(--space-2xs); }
  .panel__title { line-height: 1.1; }

  /* Leurs h3 : dunbar-text 700, capitales, interlettre 1px a 26px -> .05em ici. */
  .blk__h3, .stylepanel__head h3, .beyond h3, .allf__sectitle, .legend b {
    font-family: var(--cz-font-text);
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  }
  .beyond h3 { color: var(--cz-green-800); }

  /* Un nom de lieu ne passe pas en capitales : leur .node--title est en text-transform:none. */
  .poip__title { font-family: var(--cz-font-text); font-weight: 700; text-transform: none; }

  .metric .k, .kpi b { font-weight: 700; color: var(--cz-green-800); }
  .blk .hint, .allf__sub, .panel__sub { line-height: 1.45; }
  .day-nodes, .poi-sub, .data-note { line-height: 1.5; }

  /* ---------- boutons ---------- */
  .btn {
    font-family: var(--cz-font-title);
    font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    border-radius: var(--cz-radius);
    padding: 11px var(--space-md);
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .06s;
  }
  .btn--sm { font-weight: 700; padding: 7px var(--space-sm); }

  /* Leur .btn-outline-primary-rgaa : contour vert, remplissage plein au survol. */
  .btn--secondary {
    background: transparent; border-color: var(--cz-green-700); color: var(--cz-green-700);
  }
  .btn--secondary:hover { background: var(--cz-green-700); color: #ffffff; }
  .btn--secondary:active { background: var(--cz-green-720); color: #ffffff; }

  .btn--ghost { border-color: var(--lt-neutral-100); color: var(--cz-green-800); }
  .btn--ghost:hover { background: var(--cz-green-50); border-color: var(--cz-green-300); }

  /* Leur convention (opacite .65 sur le vert plein) laisserait un bouton desactive
     encore vert et encore lisible comme actif. On garde un aplat gris franc. */
  .btn--primary:disabled {
    background: var(--cz-ink-50); border-color: var(--lt-neutral-100);
    color: var(--lt-neutral-400); transform: none;
  }

  /* ---------- onglets de mode, chips ---------- */
  .seg {
    border-radius: var(--cz-radius);
    font-family: var(--cz-font-text); font-weight: 700;
    text-transform: uppercase; letter-spacing: .01em;
    min-width: 0; padding: 8px var(--space-2xs);
  }
  .seg[aria-selected="true"] {
    background: var(--cz-green-600); border-color: var(--cz-green-700); color: var(--cz-green-800);
  }
  .chip, .fchip { border-radius: var(--cz-radius); }
  .fchip[aria-pressed="true"] { color: var(--cz-green-800); }

  /* ---------- champs ---------- */
  .searchbar { border-radius: var(--cz-radius); border-color: var(--lt-neutral-200); }
  /* Taille de leur .form-control (1rem). En dessous de 16px, iOS zoome la page
     des qu'on touche le champ. */
  .searchbar input { font-size: var(--font-size-sm); }
  .searchbar:focus-within {
    border-color: var(--cz-green-700);
    box-shadow: var(--elevation-2), 0 0 0 3px rgb(83 128 63 / 20%);
  }
  .beyond select {
    border-radius: var(--cz-radius); border-color: var(--lt-neutral-200);
    padding: 10px 12px; color: var(--cz-ink-600);
  }
  .beyond select:focus-visible {
    outline: 2px solid var(--lt-interactive-border-focus); outline-offset: 2px;
  }
  input[type=range] { height: 6px; background: var(--cz-green-100); }

  /* ---------- surfaces ---------- */
  .panel, .poip, .allf__dlg { border-radius: 16px; }
  .metric, .day, .kpi, .searchres, .beyond-out, .data-note, .stylepanel, .legend,
  .roadbook, .styleopt__sw, .lt-map-nav__surface, .lt-icon-button, .toast {
    border-radius: var(--cz-radius);
  }
  .lt-map-nav__surface { border-color: var(--lt-neutral-100); }
  .day.is-active { border-color: var(--cz-green-700); background: var(--cz-green-100); }
  .boot .bar { background: rgb(255 255 255 / 16%); }

  /* ---------- carte ---------- */
  /* Le halo d'etape gagne un liser blanc : sur le fond satellite, un vert clair
     pose sur une foret ne se detache pas tout seul. */
  .poi-marker.is-stage .poi-pin::before {
    border-color: var(--cz-green-800);
    box-shadow: 0 0 0 3px var(--cz-green-600), 0 0 0 4.5px rgb(255 255 255 / 90%);
  }
  .legend-swatch { border-radius: 2px; }
  /* La pastille de jour prend sa couleur de DAY_COLORS : sur les teintes claires
     de la charte, du blanc pur n'y tiendrait pas seul. */
  .day-badge { text-shadow: 0 1px 2px rgb(9 11 12 / 55%); }

  /* ---------- mobile ---------- */
  /* Apres la media query du DS : sans ca, le rayon plein ci-dessus rearrondirait
     le bas du tiroir. */
  @media (max-width: 991px) {
    .panel, .poip, .allf__dlg { border-radius: 16px 16px 0 0; }
    .seg { font-size: 11px; letter-spacing: 0; gap: 4px; }
    .seg .ico { --s: 14px; }
  }
}

/* ---------------------------------------------------------------------------
   Mode reduit (hideAllUI) : la carte seule, sans son interface. C'est l'etat dans
   lequel une carte embarquee est servie sur mobile chez nos partenaires ; l'hote la
   revele en plein ecran via postMessage. L'attribution reste, elle est due aux
   fournisseurs de fond de plan.
--------------------------------------------------------------------------- */
@layer app.overrides {
  body.ui-hidden .panel,
  body.ui-hidden .mapbar,
  body.ui-hidden .poip,
  body.ui-hidden .allf,
  body.ui-hidden .lt-map-nav,
  body.ui-hidden .stylepanel,
  body.ui-hidden .legend,
  body.ui-hidden .toast {
    display: none !important;
  }
}