/* Trek Népal — stylesheet
   Charte Cause We Are Young (2026-10-10) : sous-marque Trek (vert sapin des sentiers), rouge népalais pour les actions,
   bandeau bleu nuit, fond gris froid, polices Archivo / Atkinson Hyperlegible / IBM Plex Mono. Light/dark via prefers-color-scheme.
   Les noms historiques des variables sont gardés (comments.css et photos.css, partagés, les utilisent) :
   --blue = couleur du site (vert Trek), --red = rouge des actions, --blue-deep = bleu nuit profond,
   --sand = paper, --sand-2 = mist, --paper = surface. Les couleurs propres à la carte (routes, bus, jeep, avion) restent en dur. */

:root {
  --red: #C0122F;
  --red-deep: #9C0E26;
  --blue: #1D6A4B;
  --blue-deep: #10233F;
  --sand: #F4F6F8;
  --sand-2: #E6EBF1;
  --paper: #FFFFFF;
  --ink: #121A26;
  --ink-2: #4E5968;
  --ink-3: #5B6675;
  --line: #D5DBE2;
  --ok: #1F7A4D;
  --ok-bg: #E4F3EA;
  --skip: #8A94A2;
  --skip-bg: #EEF1F5;
  --warn: #9A5A00;
  --warn-bg: #FFF3DC;
  --on-red: #FFFFFF;
  --on-blue: #FFFFFF;
  --link: #1D6A4B;
  --link-hover: #15523A;
  /* Refonte du 2026-10-14 (design de Guides Népal validé par Vincent) : ombres douces et coins plus ronds */
  --shadow: 0 0 0 1px rgba(16, 35, 63, .05), 0 1px 2px rgba(16, 35, 63, .06), 0 6px 18px rgba(16, 35, 63, .06);
  --hover-shadow: 0 0 0 1px rgba(16, 35, 63, .05), 0 14px 32px rgba(16, 35, 63, .14);
  --radius: 16px;
  --radius-s: 8px;
  --site-soft: #E4F1EA;     /* fond doux vert Trek (cases d'icônes) */
  --site-ink: #175A3F;      /* vert Trek sur --site-soft (7:1) */
  --font-head: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --hero-bg: linear-gradient(160deg, #0B1A30 0%, #10233F 55%, #1A3560 100%);
  --hero-ink: #F4F6F8;
  --map-mark: #10233F; /* repères neutres de la carte : villes, aéroports, détours (le vert est réservé au fanion de départ) */
  --hero-accent: #9FD9BE; /* vert clair : accents et anneau de focus sur les fonds bleu nuit (bandeau, en-têtes, pied de page) */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #0E141C;
    --sand-2: #1E2834;
    --paper: #18202B;
    --ink: #E8EDF3;
    --ink-2: #A3AEBB;
    --ink-3: #8F9AA8;
    --line: #2B3542;
    --ok: #6FCB94;
    --ok-bg: #163224;
    --skip: #6F7A88;
    --skip-bg: #1E2834;
    --warn: #F0B45B;
    --warn-bg: #3A2A10;
    --red: #F2596E;
    --red-deep: #F47A8B;
    --blue: #69C49B;
    --on-red: #0E141C;
    --on-blue: #0E141C;
    --link: #69C49B;
    --link-hover: #94D6B6;
    --map-mark: #B9CDF3;
    --hero-bg: linear-gradient(160deg, #080F18 0%, #0E1B30 55%, #142849 100%);
    --shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, .3);
    --hover-shadow: 0 0 0 1px var(--line), 0 14px 32px rgba(0, 0, 0, .5);
    --site-soft: #17291F;
    --site-ink: #8ED3B1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sand: #0E141C; --sand-2: #1E2834; --paper: #18202B; --ink: #E8EDF3; --ink-2: #A3AEBB; --ink-3: #8F9AA8;
  --line: #2B3542; --ok: #6FCB94; --ok-bg: #163224; --skip: #6F7A88; --skip-bg: #1E2834; --warn: #F0B45B; --warn-bg: #3A2A10;
  --red: #F2596E; --red-deep: #F47A8B; --blue: #69C49B; --on-red: #0E141C; --on-blue: #0E141C; --link: #69C49B; --link-hover: #94D6B6; --map-mark: #B9CDF3;
  --hero-bg: linear-gradient(160deg, #080F18 0%, #0E1B30 55%, #142849 100%);
  --shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, .3); --hover-shadow: 0 0 0 1px var(--line), 0 14px 32px rgba(0, 0, 0, .5);
  --site-soft: #17291F; --site-ink: #8ED3B1;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hero :focus-visible, .pagehead :focus-visible, .pricebar :focus-visible, .footer :focus-visible { outline-color: var(--hero-accent); }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; }
code { font-family: var(--font-data); font-size: .92em; background: var(--sand-2); padding: .1em .35em; border-radius: 4px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--red); color: var(--on-red); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--sand) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__in { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.brand em { font-style: normal; color: var(--blue); }
.brand__mark { width: 32px; height: 32px; display: block; }
/* Tampon : version claire, inverse (anneaux blancs) en thème sombre */
.stamp-inverse { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { display: none; } :root:not([data-theme="light"]) .stamp-inverse { display: block; } }
:root[data-theme="dark"] .stamp { display: none; }
:root[data-theme="dark"] .stamp-inverse { display: block; }
.nav { display: none; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--red); }
.lang { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.nav + .lang { margin-left: 0; }
@media (min-width: 900px) { .nav { display: flex; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--hero-bg); color: var(--hero-ink); overflow: hidden; }
.hero__in { position: relative; z-index: 2; padding: clamp(56px, 9vw, 120px) 0 clamp(120px, 16vw, 200px); max-width: 780px; }
.eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--hero-accent); margin-bottom: 18px; }
.hero h1 span { color: var(--hero-accent); }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: #D9DEE8; max-width: 640px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--radius-s); font-family: var(--font-head); font-weight: 700; text-decoration: none; font-size: 1rem; border: 2px solid transparent; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--red); color: var(--on-red); }
.btn--primary:hover { background: var(--red-deep); color: var(--on-red); }
.btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 30px; }
.hero__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .92rem; color: #C5CDDC; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--tint { background: var(--sand-2); }
.section__title { max-width: 820px; }
.section__intro { color: var(--ink-2); max-width: 720px; font-size: 1.08rem; margin-bottom: 32px; }
.note { color: var(--ink-3); font-size: .92rem; }

/* ---------- Wizard ---------- */
.wizard { display: grid; gap: 22px; }
.wizard__q { border: 0; padding: 0; margin: 0; }
.wizard__q legend { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.08rem; margin-bottom: 12px; padding: 0; }
.num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: var(--on-blue); font-family: var(--font-head); font-size: .95rem; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--paper);
  border: 1.5px solid var(--line); font-weight: 600; font-size: .95rem; color: var(--ink-2); cursor: pointer; transition: all .15s;
}
.chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--red) 40%, transparent); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.chip:hover span { border-color: var(--blue); }

.result { margin-top: 32px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 36px); animation: pop .3s ease; }
.result__tag { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--red); margin-bottom: 8px; }
.result h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.result__why { color: var(--ink-2); }
.result__steps { display: grid; gap: 10px; margin: 18px 0; }
.result__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- Boutons secondaires et encarts (utilisés sur toutes les pages) ---------- */
.btn--small { padding: 9px 16px; font-size: .92rem; }
.btn--blue { background: var(--blue); color: var(--on-blue); }
.btn--blue:hover { background: var(--blue-deep); color: #fff; }
.callout { border-radius: var(--radius-s); padding: 14px 16px; font-size: .95rem; }
.callout--warn { background: var(--warn-bg); color: var(--warn); }
.callout--ok { background: var(--ok-bg); color: var(--ok); }
.callout--info { background: var(--sand-2); color: var(--ink-2); }

@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.table-wrap { overflow-x: auto; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.table tr:last-child td { border-bottom: 0; }
.table td:last-child { white-space: nowrap; font-weight: 700; color: var(--blue); }

/* ---------- Requirements grid ---------- */
.grid3 { display: grid; gap: 18px; }
@media (min-width: 860px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.card h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.card ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.card li { margin-bottom: .5em; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flags span { font-size: .82rem; background: var(--sand-2); padding: 3px 9px; border-radius: 999px; }
/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--paper); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 0 20px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-family: var(--font-head); font-size: 1.4rem; color: var(--red); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 0 18px; color: var(--ink-2); font-size: .97rem; }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--blue-deep); color: #B9C2D3; padding: 48px 0 36px; font-size: .9rem; }
.footer a { color: var(--hero-accent); }
.footer__brand { margin: 0 0 14px; }
.footer__brand a { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; }
.footer__brand a:hover { color: var(--hero-accent); }
.footer__disclaimer { max-width: 780px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 6px; }
.footer__nav a { color: #F4F6F8; font-weight: 600; }
.footer__navlabel { color: #8C97AB; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0; }
.footer__feedback { margin: 0 0 14px; color: #D9DEE8; }
.footer__feedback a { font-weight: 700; }
.footer__meta { margin: 0; color: #8C97AB; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .door__inside { transition: none; animation: none; } }

/* ---------- Multi-pages (v0.2) ---------- */
.lang a { display: inline-block; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .85rem; padding: 6px 12px; }
.lang a[aria-current="true"] { background: var(--blue); color: var(--on-blue); }
.nav a[aria-current="page"] { color: var(--red); }

.pagehead { background: var(--hero-bg); color: var(--hero-ink); padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); }
.pagehead h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 860px; }
.pagehead .lead { max-width: 720px; margin-bottom: 0; }
.pagehead .path__tags { margin-top: 18px; }
.pagehead .tag { background: rgba(255,255,255,.12); color: #fff; }
.pagehead .tag--ok { background: rgba(111,203,148,.22); color: #C9F0D8; }
.pagehead .tag--warn { background: rgba(240,180,91,.22); color: #FFE0AE; }

.col-title--next { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line); }
.col-title { font-family: var(--font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 12px; }
.card__title { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.path--page .path__body { padding-top: 28px; }

.pcards { display: grid; gap: 18px; }
@media (min-width: 720px) { .pcards { grid-template-columns: repeat(2, 1fr); } }
.pcard { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; color: inherit; text-decoration: none; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.pcard:hover { transform: translateY(-2px); border-color: var(--blue); color: inherit; }
.pcard--3:hover { border-color: var(--red); }
.pcard__top { margin-bottom: 6px; }
.pcard__top .mini-timeline { gap: 4px; }
.pcard__top .mini { padding: 5px 10px; font-size: .8rem; }
.pcard__top .pill { font-size: .7rem; padding: 2px 8px; }
.pcard h3 { font-size: 1.3rem; margin: 0; }
.pcard__tag { margin: 0; color: var(--red); font-weight: 700; font-size: .9rem; }
.pcard__desc { margin: 0; color: var(--ink-2); font-size: .95rem; }
.pcard__more { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--blue); font-size: .92rem; }
.center { text-align: center; margin-top: 28px; }

.linkgrid { display: grid; gap: 14px; }
@media (min-width: 720px) { .linkgrid { grid-template-columns: repeat(4, 1fr); } }
.linkcard { display: flex; flex-direction: column; gap: 6px; background: var(--paper); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 18px; text-decoration: none; color: inherit; border: 2px solid transparent; transition: border-color .15s; }
.linkcard:hover { border-color: var(--blue); color: inherit; }
.linkcard strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--blue); }
.linkcard span { font-size: .88rem; color: var(--ink-2); }
/* ---------- Partage ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.share__label { font-weight: 700; font-size: .9rem; color: var(--ink-2); margin-right: 4px; }
.share a, .share button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line); color: var(--ink); font: inherit; font-weight: 600; font-size: .88rem; text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s; }
.share a:hover, .share button:hover { border-color: var(--blue); transform: translateY(-1px); color: var(--ink); }
.share svg { width: 16px; height: 16px; }
.share .is-done { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pagehead .share { margin-top: 22px; }
.pagehead .share__label { color: #C5CDDC; }
.pagehead .share a, .pagehead .share button { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.pagehead .share a:hover, .pagehead .share button:hover { border-color: #fff; color: #fff; }
.hero .share { margin-top: 26px; }
.hero .share__label { color: #C5CDDC; }
.hero .share a, .hero .share button { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.hero .share a:hover, .hero .share button:hover { border-color: #fff; color: #fff; }

/* ---------- Date de vérification ---------- */
.updated { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 0; font-size: .85rem; font-weight: 600; color: #C9F0D8; background: rgba(111,203,148,.16); padding: 5px 12px 5px 9px; border-radius: 999px; }
.updated svg { width: 15px; height: 15px; }
.updated + .share, .updated + .pagehead-share { margin-top: 18px; }
/* ---------- Tableau des tarifs empilé sur mobile (pas de défilement latéral) ---------- */
@media (max-width: 640px) {
  .table thead { display: none; }
  .table tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 16px; }
  .table tr:last-child { border-bottom: 0; }
  .table td { display: block; padding: 2px 0; border-bottom: 0; }
  .table td:last-child { white-space: normal; padding-bottom: 4px; }
}

/* ---------- Navigation sur mobile et tablette : liens en ligne sous la marque ---------- */
@media (max-width: 899px) {
  .topbar__in { flex-wrap: wrap; height: auto; padding: 10px 0 0; row-gap: 6px; }
  .nav { display: flex; order: 3; width: 100%; margin: 0; gap: 18px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: .9rem; }
}
/* ---------- Page FAQ : rubriques, filtre, ouverture par ancre ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faq__toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; max-width: 860px; }
.faq__filter { flex: 1 1 240px; }
.faq__filter input { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem; }
.faq__filter input:focus { outline: 3px solid color-mix(in srgb, var(--red) 40%, transparent); border-color: var(--blue); }
.faq__toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.faq__toc a { text-decoration: none; font-size: .85rem; font-weight: 700; color: var(--blue); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.faq__toc a:hover { border-color: var(--blue); }
.faq__section { display: grid; gap: 10px; }
.faq__section + .faq__section { margin-top: 18px; }
.faq__group { font-size: 1.15rem; margin: 6px 0 0; color: var(--blue); scroll-margin-top: 90px; }
.faq details { scroll-margin-top: 90px; }
.faq details.is-target { outline: 2px solid var(--red); }
.faq [hidden] { display: none !important; }

/* ---------- Partage compact sur mobile : un bouton, partage natif ou liste dépliée ---------- */
.share__items { display: contents; }
.share .share__toggle { display: none; }
@media (max-width: 699px) {
  .share .share__toggle { display: inline-flex; }
  .share__items { display: none; width: 100%; flex-wrap: wrap; gap: 8px; }
  .share.is-open .share__items { display: flex; }
}
.section__title--sub { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 44px 0 16px; }
.section__title--sub:first-child { margin-top: 0; }
.grid2 { display: grid; gap: 18px; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.stack { display: grid; gap: 10px; }
.prose { max-width: 820px; }
.prose > p, .prose li { color: var(--ink-2); }

/* ---------- Pastilles de valeur (guide, oui/non) ---------- */
.val { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.val--ok { background: var(--ok-bg); color: var(--ok); }
.val--warn { background: var(--warn-bg); color: var(--warn); }
.val--maybe { background: var(--sand-2); color: var(--ink-2); }   /* neutre : le vert du site se confondait avec « Oui » */
.val--no { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }

/* ---------- Niveau (4 points) ---------- */
.lvl { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.lvl__dots { display: inline-flex; gap: 3px; }
.lvl__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.lvl__dot.is-on { background: var(--blue); }
.lvl--4 .lvl__dot.is-on, .lvl--5 .lvl__dot.is-on { background: var(--red); }

/* ---------- Cartes de trek ---------- */
.tcards { display: grid; gap: 18px; }
@media (min-width: 700px) { .tcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tcards { grid-template-columns: repeat(3, 1fr); } }
.tcard { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 20px; color: inherit; text-decoration: none; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.tcard:hover { transform: translateY(-2px); border-color: var(--blue); color: inherit; }
.tcard__region { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); }
.tcard__name { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.tcard__tag { color: var(--ink-2); font-size: .95rem; }
.tcard__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tcard__why { font-size: .88rem; color: var(--ink-2); background: var(--sand-2); border-radius: 10px; padding: 8px 10px; }
.tcard__warn { color: var(--warn); font-weight: 600; }
.tcard__more { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--blue); font-size: .92rem; }
.tcards--result { margin: 16px 0; }


/* ---------- Sommaire interne d'une page ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.toc a { text-decoration: none; font-size: .85rem; font-weight: 700; color: var(--blue); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.toc a:hover { border-color: var(--blue); }
.tsec { scroll-margin-top: 90px; }
.tsec + .tsec { margin-top: 56px; }
.tsec > h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.tsec__intro { color: var(--ink-2); max-width: 780px; }
.tsec h3 { font-size: 1.1rem; margin: 22px 0 10px; }

/* ---------- Profil d'altitude ---------- */
.pf { margin: 0 0 18px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 12px 10px; }
.pf svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf__grid { stroke: var(--line); stroke-width: 1; }
.pf__axis { fill: var(--ink-3); font-size: 11px; font-family: var(--font-body); }
.pf__zone { fill: color-mix(in srgb, var(--blue) 6%, transparent); }
.pf__zonelab { fill: var(--ink-3); font-size: 10.5px; font-family: var(--font-body); font-style: italic; }
.pf__area { fill: color-mix(in srgb, var(--blue) 14%, transparent); }
.pf__line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.pf__spike { stroke: var(--red); stroke-width: 1.8; stroke-dasharray: 4 3; }
.pf__dot { fill: var(--paper); stroke: var(--blue); stroke-width: 2; }
.pf__dot--rest { fill: var(--ok); stroke: var(--ok); }
.pf__dot--top { fill: var(--red); stroke: var(--paper); stroke-width: 2; }
.pf__lab--top { fill: var(--red); }
.pf__lab { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font-body); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.pf__cap { font-size: .8rem; color: var(--ink-3); padding: 6px 8px 0; }
@media (max-width: 640px) { .pf__lab { font-size: 16px; } .pf__axis { font-size: 15px; } .pf__zonelab { display: none; } }

/* ---------- Étapes jour par jour ---------- */
.stages { list-style: none; padding: 0; margin: 0; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.stages li { display: grid; grid-template-columns: 64px 1fr auto 76px; align-items: baseline; gap: 10px; padding: 9px 16px; margin: 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.stages li:last-child { border-bottom: 0; }
.stages li.is-rest { background: var(--ok-bg); }
.stages__day { font-weight: 700; color: var(--ink-3); font-size: .85rem; }
.stages__place { font-weight: 600; }
.stages__place small { display: block; font-weight: 500; color: var(--ink-3); font-size: .82rem; }
.stages__alt { font-weight: 700; color: var(--blue); white-space: nowrap; }
.stages__diff { font-size: .8rem; font-weight: 700; text-align: right; white-space: nowrap; }
.stages__diff--up { color: var(--warn); }
.stages__diff--down { color: var(--ok); }
@media (max-width: 520px) { .stages li { grid-template-columns: 46px 1fr auto; } .stages__diff { grid-column: 3; } }
details.stages-wrap > summary { cursor: pointer; font-weight: 700; color: var(--blue); margin: 0 0 12px; }

/* ---------- Saisons (12 mois) ---------- */
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 760px; }
.month { display: grid; place-items: center; height: 42px; border-radius: 8px; font-size: .78rem; font-weight: 700; }
.month--good { background: var(--ok); color: #fff; }
.month--ok { background: var(--warn-bg); color: var(--warn); }
.month--bad { background: var(--skip-bg); color: var(--skip); }
.months__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--ink-2); margin: 10px 0 0; }
.months__key::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.months__key--good::before { background: var(--ok); }
.months__key--ok::before { background: var(--warn-bg); border: 1px solid var(--warn); }
.months__key--bad::before { background: var(--skip-bg); border: 1px solid var(--skip); }
@media (max-width: 520px) { .month { height: 34px; font-size: .66rem; } }

/* ---------- Tableau comparatif des treks ---------- */
.ctable { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ctable th, .ctable td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ctable thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; }
.ctable tbody th a { font-family: var(--font-head); font-size: 1.05rem; color: var(--blue); text-decoration: none; }
.ctable tbody th a:hover { color: var(--red); }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
  .ctable thead { display: none; }
  .ctable tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .ctable tbody th { grid-column: 1 / -1; padding: 0 0 2px; border: 0; }
  .ctable td { padding: 0; border: 0; font-size: .88rem; }
  .ctable td::before { content: attr(data-col); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 2px; }
}

/* ---------- Tableaux génériques : première colonne en gras ---------- */
.table td:first-child { font-weight: 700; }
.table td:last-child { white-space: normal; font-weight: 400; color: var(--ink-2); }
.table--money td:last-child { white-space: nowrap; font-weight: 700; color: var(--blue); }
@media (max-width: 640px) {
  .table td[data-col]::before { content: attr(data-col); display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-top: 6px; }
  .table td:first-child[data-col]::before { display: none; }
  .table--money td:last-child { white-space: normal; }
}

/* ---------- Cartes (permis, bureaux) ---------- */
.cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card p { color: var(--ink-2); font-size: .95rem; }
.card p:last-child { margin-bottom: 0; }
.card__kicker { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 4px; }
.card .card__price { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; color: var(--blue); margin: 0 0 8px; line-height: 1.2; }
.card__price small { font-family: var(--font-body); font-size: .85rem; color: var(--ink-3); font-weight: 600; }
.card .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .92rem; margin: 10px 0 0; }
.card .kv dt { color: var(--ink-3); font-weight: 600; }
.card .kv dd { margin: 0; color: var(--ink); }

/* ---------- Transports : trajets ---------- */
.legs { display: grid; gap: 12px; }
.leg { display: grid; grid-template-columns: 40px 1fr; gap: 12px; background: var(--paper); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 16px 18px; }
.leg__ico { width: 40px; height: 40px; border-radius: 10px; background: var(--sand-2); display: grid; place-items: center; font-size: 1.2rem; }
.leg__title { font-weight: 700; margin: 0 0 2px; }
.leg__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; color: var(--ink-3); font-weight: 600; margin: 0 0 6px; }
.leg__meta b { color: var(--blue); }
.leg p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.leg p + p { margin-top: 6px; }

/* ---------- Divers ---------- */
.linkgrid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .linkgrid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .linkgrid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .linkgrid--5 { grid-template-columns: repeat(5, 1fr); } }
.pricebar { margin: 0 0 18px; background: var(--blue-deep); color: var(--hero-ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.pricebar__label { font-weight: 700; font-size: 1.05rem; flex: 1 1 260px; }
.pricebar__label small { display: block; font-weight: 400; font-size: .85rem; color: #C5CDDC; margin-top: 4px; }
.pricebar__items { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pricebar__item { display: flex; flex-direction: column; }
.pricebar__big { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.pricebar__small { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hero-accent); }
.crosslink { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px clamp(20px, 3vw, 28px); }
.crosslink p { margin: 0; flex: 1 1 320px; color: var(--ink-2); }
.crosslink strong { color: var(--ink); }
/* Encadré « Guides pour ce trek » rempli par assets/js/guides.js : cartes des premiers guides de l'annuaire Guides Népal */
.gcards { list-style: none; margin: 0; padding: 0; flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gcards[hidden] { display: none; }
.gcard { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--sand); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; }
.gcard:hover { border-color: var(--blue); }
.gcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gcard__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--sand-2); }
.gcard__photo--empty { display: grid; place-items: center; color: var(--blue); font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; }
.gcard__body { display: grid; gap: 2px; min-width: 0; }
.gcard__name { font-size: .98rem; line-height: 1.3; overflow-wrap: anywhere; }
.gcard__meta, .gcard__langs { font-size: .84rem; color: var(--ink-2); }
.gcard__langs { font-family: var(--font-data, inherit); letter-spacing: .03em; }
.gcard__badge { justify-self: start; margin-top: 2px; font-size: .74rem; font-weight: 700; color: var(--ok, #1F7A4D); border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; }
@media print {
  .topbar, .share, .section--tint, .footer__links, .toc { display: none !important; }
  .pagehead, .section { padding: 12px 0; }
  .card, .table-wrap, .tcard, .stages, .pf { box-shadow: none; border: 1px solid #ccc; }
}
.cards + .callout, .cards + .stack { margin-top: 14px; }

/* ---------- Départ / arrivée / détours au choix (pages trek) ---------- */
.rp { display: grid; gap: 14px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin: 0 0 16px; }
.rp__group { border: 0; padding: 0; margin: 0; }
.rp__group legend { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 8px; padding: 0; }
.rp .chip span { padding: 8px 14px; font-size: .9rem; }
.rp .chip input[type="checkbox"]:checked + span { background: var(--red); border-color: var(--red); }
.rp__sum { font-size: 1.05rem; margin: 0 0 8px; }
.rp__sum b { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--blue); font-size: 1.2rem; }
.rp__notes { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: .92rem; color: var(--ink-2); }
.rp__notes li { background: var(--sand-2); border-radius: 10px; padding: 8px 12px; margin: 0; }
.rp__notes strong { color: var(--ink); }

/* ---------- Carte du trek ---------- */
.tm { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; margin: 0 0 14px; }
.tm__svg { display: block; width: 100%; height: auto; border-radius: 12px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tm__bg { fill: color-mix(in srgb, var(--sand-2) 70%, var(--paper)); }
.tm__grid { fill: none; stroke: color-mix(in srgb, var(--line) 55%, transparent); stroke-width: 1; }
.tm__rock { fill: #8D96A6; }
.tm__snow { fill: #fff; }
.tm__peaklab { font: 600 11px var(--font-body); fill: var(--ink-3); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.tm__peakalt { font-weight: 500; }
.tm__city rect { fill: var(--map-mark); }
.tm__city text { font: 700 12px var(--font-body); fill: var(--map-mark); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.tm__all { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.tm__all--extra { stroke: var(--red); opacity: .5; }
.tm__sel-halo { fill: none; stroke: var(--paper); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.tm__sel { fill: none; stroke: var(--red); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.tm__night { fill: var(--paper); stroke: var(--red); stroke-width: 2; }
.tm__top circle { fill: var(--paper); stroke: var(--red); stroke-width: 2; }
.tm__top path { fill: var(--red); }
.tm__top text { font: 700 11.5px var(--font-body); fill: var(--red); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; }
.tm__opt { cursor: pointer; }
.tm__opt circle { fill: var(--paper); stroke: var(--map-mark); stroke-width: 2.5; transition: r .15s; }
.tm__opt text { font-size: 13px; }
.tm__optlab { font: 700 12.5px var(--font-body); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.tm__toplab { font: 700 11.5px var(--font-body); fill: var(--red); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; }
.tm__citylab { font: 700 12px var(--font-body); fill: var(--map-mark); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.tm__labels { pointer-events: none; }
.tm__opt:hover circle, .tm__opt.is-target circle { stroke: var(--red); stroke-width: 3.5; }
.tm__pin { cursor: grab; outline: none; }
.tm__pin.is-drag { cursor: grabbing; }
.tm__pin rect, .tm__pin path { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .28)); }
/* pointe : contour fin (sinon le blanc mange la couleur sur un triangle si petit) */
.tm__pin path { stroke-width: 1; }
.tm__pin--start rect, .tm__pin--start path { fill: var(--ok); }
.tm__pin--end rect, .tm__pin--end path { fill: var(--red); }
.tm__pin text { font: 800 12.5px var(--font-body); fill: var(--on-red); pointer-events: none; }
.tm__pin:focus-visible rect { stroke: var(--ink); stroke-width: 3; }
.tm__xbtn { cursor: pointer; outline: none; }
.tm__xbtn rect { fill: var(--paper); stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tm__xbtn text { font: 700 12px var(--font-body); fill: var(--red); }
.tm__xdot { fill: var(--red); }
.tm__xbtn--sm text { font-size: 10px; }
.tm__xbtn--sm rect { stroke-width: 1.2; }
.tm__xbtn.is-on rect { fill: var(--red); stroke-dasharray: none; }
.tm__xbtn.is-on text { fill: var(--on-red); }
.tm__xbtn:hover rect, .tm__xbtn:focus-visible rect { stroke-width: 2.5; }
.tm__north path { fill: var(--ink-3); }
.tm__north text { font: 700 10px var(--font-body); fill: var(--ink-3); }
.tm__hint { margin: 8px 6px 2px; font-size: .85rem; color: var(--ink-3); }
@media (max-width: 640px) {
  .tm { padding: 4px; }
  .tm__xbtn text { font-size: 13px; }
}

/* ---------- Tuiles du tronçon choisi ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.tile { display: flex; flex-direction: column; gap: 2px; background: var(--paper); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 12px 14px; }
.tile__ico { font-size: 1.3rem; line-height: 1; }
.tile__big { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; color: var(--blue); line-height: 1.2; margin-top: 4px; }
.tile--txt .tile__big { font-family: var(--font-head); font-variant-numeric: normal; }   /* noms de lieux, pas des chiffres */
.tile--txt .tile__big { font-family: var(--font-body); font-size: .98rem; }
.tile__small { font-size: .78rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.rp-more { margin: 10px 0 0; }
.rp-more > summary { cursor: pointer; font-weight: 700; color: var(--blue); font-size: .92rem; margin-bottom: 10px; }

/* ---------- Carte : zoom et déplacement ---------- */
.tm { position: relative; }
.tm__zoom { display: none; position: absolute; top: 18px; left: 18px; z-index: 2; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.js .tm__zoom { display: flex; }
.tm__zoom button { width: 36px; height: 36px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--blue); font: 700 1.3rem/1 var(--font-body); cursor: pointer; display: grid; place-items: center; }
.tm__zoom button:last-child { border-bottom: 0; font-size: 1.05rem; }
.tm__zoom button:hover { background: var(--sand-2); }
.tm__zoom button:disabled { color: var(--ink-3); opacity: .45; cursor: default; background: var(--paper); }
.tm__zoom button:focus-visible { outline: 3px solid color-mix(in srgb, var(--red) 45%, transparent); outline-offset: -3px; }
.tm.is-zoomed .tm__svg { touch-action: none; cursor: grab; }
.tm.is-panning .tm__svg { cursor: grabbing; }

.tm__via { fill: var(--paper); stroke: var(--red); stroke-width: 1.3; opacity: .9; }
.tm__nightlab { font: 600 11px var(--font-body); fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; }
.tm__vialab { font: 500 9.5px var(--font-body); fill: var(--ink-3); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }

/* ---------- Carte : fond illustré / topographique ---------- */
.tm__base { display: none; position: absolute; top: 18px; right: 18px; z-index: 2; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.js .tm__base { display: flex; }
.tm__base button { border: 0; background: var(--paper); color: var(--ink-2); font: 700 .8rem var(--font-body); padding: 8px 12px; cursor: pointer; }
.tm__base button + button { border-left: 1px solid var(--line); }
.tm__base button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); }
.tm__base button:focus-visible { outline: 3px solid color-mix(in srgb, var(--red) 45%, transparent); outline-offset: -3px; }
.tm__tiles image { image-rendering: auto; }
.tm__veil { fill: var(--paper); opacity: .35; pointer-events: none; }
.tm--topo .tm__all { opacity: .8; stroke: #333; }
.tm__credit { margin: 6px 6px 0; font-size: .72rem; color: var(--ink-3); text-align: right; }
.tm__credit a { color: inherit; }
@media (max-width: 520px) { .tm__base button { padding: 7px 9px; font-size: .74rem; } }

/* profil : colonnes des journées, distance et dénivelés */
.pf__day { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
/* détail jour par jour : jour | nuit | altitude | écart avec la veille | distance, D+, D− */
.stages li { grid-template-columns: 52px minmax(0, 1fr) 76px 72px 210px; }
.stages .stages__head { padding-top: 10px; padding-bottom: 6px; background: var(--sand-2); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.stages__net { font-size: .85rem; font-weight: 700; text-align: right; white-space: nowrap; }
.stages__diff--flat { color: var(--ink-3); }
.stages__climb { display: flex; gap: 10px; justify-content: flex-end; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.stages__km { color: var(--ink-3); }
@media (max-width: 640px) {
  .stages li { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .stages .stages__head span:last-child { display: none; }
  .stages__climb { grid-column: 2 / -1; justify-content: flex-start; }
  .stages__climb:empty { display: none; }
}

/* ---------- Téléchargement GPX ---------- */
.gpx { display: none; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; }
.js .gpx { display: flex; }
.gpx__help { flex: 1 1 280px; font-size: .9rem; color: var(--ink-2); }
.gpx__help summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.gpx__help div { margin-top: 8px; background: var(--paper); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 12px 16px; }
.gpx__help ul { margin: 0 0 8px; }
.gpx__help p:last-child { margin: 0; }

/* ---------- Carte : routes, pistes, aérodromes, légende ---------- */
.tm__road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tm__road--bus-case { stroke: #7A7F87; stroke-width: 5; opacity: .75; }
.tm__road--bus { stroke: #F4F1EA; stroke-width: 2.4; }
.tm__road--jeep-case { stroke: transparent; stroke-width: 6; }
.tm__road--jeep { stroke: #9A6B3A; stroke-width: 2.4; stroke-dasharray: 7 4; opacity: .9; }
.tm__air circle { fill: var(--paper); stroke: var(--map-mark); stroke-width: 1.5; }
.tm__air path { fill: var(--map-mark); }
.tm__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 6px 0; padding: 0; font-size: .78rem; color: var(--ink-2); }
.tm__legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.lg { display: inline-block; width: 22px; height: 0; font-style: normal; }
.lg--bus { border-top: 5px solid #7A7F87; box-shadow: inset 0 0 0 0; position: relative; }
.lg--bus::after { content: ""; position: absolute; left: 1px; right: 1px; top: -3.5px; border-top: 2px solid #F4F1EA; }
.lg--jeep { border-top: 2.5px dashed #9A6B3A; }
.lg--trail { border-top: 3.5px solid var(--red); }
.lg--opt { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--map-mark); background: var(--paper); }
.lg--air { width: auto; height: auto; color: var(--map-mark); font-size: .95rem; line-height: 1; }

/* détail jour par jour : jour | nuit | altitude | vs veille | distance | D+ | D− */
.stages li { grid-template-columns: 48px minmax(0, 1fr) 72px 70px 62px 66px 66px; }
.stages__km, .stages__up, .stages__down { font-size: .85rem; font-weight: 700; text-align: right; white-space: nowrap; }
.stages__km { color: var(--ink-3); }
.stages__up { color: var(--warn); }
.stages__down { color: var(--ok); }
.stages .stages__head span:nth-child(n+3) { text-align: right; }
.stages .stages__head span:last-child { display: inline; }
.stages__export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.stages__exportnote { font-size: .8rem; color: var(--ink-3); }
.js .stages__export { display: flex; }
.stages__export { display: none; }
@media (max-width: 640px) {
  .stages li { grid-template-columns: 38px minmax(0, 1fr) auto auto; row-gap: 2px; }
  .stages li > span:nth-child(5) { grid-row: 2; grid-column: 2; text-align: left; }
  .stages li > span:nth-child(6) { grid-row: 2; grid-column: 3; }
  .stages li > span:nth-child(7) { grid-row: 2; grid-column: 4; }
  .stages .stages__head span:nth-child(n+5) { display: none; }
}

/* ---------- Pages et treks « bientôt » ---------- */
.soon { max-width: 720px; background: var(--paper); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--warn); padding: clamp(22px, 4vw, 36px); }
.soon h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.soon p { color: var(--ink-2); }
.soon__badge { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); margin-bottom: 10px; }
.tcard--soon { opacity: .78; }
.tcard--soon:hover { opacity: 1; }
.tcard__soon { display: inline-block; margin-left: 6px; font-size: .66rem; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); letter-spacing: .06em; vertical-align: 1px; }

/* ---------- Carte en plein écran (la carte seule) ---------- */
.tm.is-fs { display: flex; flex-direction: column; margin: 0; border-radius: 0; padding: 8px; background: var(--paper); }
.tm.is-full { position: fixed; inset: 0; z-index: 1000; }
.tm.is-fs .tm__svg { flex: 0 0 auto; width: 100%; height: auto; }
.tm.is-fs .tm__hint { display: none; }
.tm.is-fs .tm__zoom { top: 16px; left: 16px; }
.tm.is-fs .tm__base { top: 16px; right: 16px; }
.tm__zoom button.is-on { background: var(--blue); color: var(--on-blue); }
.tn-noscroll, .tn-noscroll body { overflow: hidden; }

/* ---------- Carte : pictogrammes bus / jeep ---------- */
.tm__veh--bus .tm__vb { fill: #6B7079; }
.tm__veh--jeep .tm__vb { fill: #9A6B3A; }
.tm__vw { fill: #fff; opacity: .9; }
.tm__vt { fill: #2A2A2A; stroke: #fff; stroke-width: .8; }
.tm__veh { pointer-events: auto; }
.lg__veh { flex: none; margin-left: -2px; }

/* pastilles de transport : blanc sur fond de pictogramme bleu pour les fenêtres */
.tm__air .tm__icw { fill: var(--paper); }
.tm__air rect, .tm__air g circle { fill: var(--map-mark); }

/* ---------- Icônes de transport au trait (style « icône seule ») ---------- */
.tm__ico path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tm__ico .tm__g path { stroke-width: 2; }
.tm__ico .tm__ghalo path { stroke: var(--paper); stroke-width: 5; }
.tm__ico--bus .tm__g path { stroke: #5F5E5A; }
.tm__ico--jeep .tm__g path { stroke: #854F0B; }
.tm__ico--air .tm__g path { stroke: #185FA5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tm__ico--bus .tm__g path { stroke: #B4B2A9; }
  :root:not([data-theme="light"]) .tm__ico--jeep .tm__g path { stroke: #EF9F27; }
  :root:not([data-theme="light"]) .tm__ico--air .tm__g path { stroke: #85B7EB; }
}

/* Sommets (fond illustré) : plus discrets, pour laisser la priorité à l'itinéraire */
.tm__peak { opacity: .55; }
.tm__peaklab { opacity: .75; }

/* ---------- Carte du Népal (accueil) ---------- */
.nm { margin: 0 0 28px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.nm svg { display: block; width: 100%; height: auto; }
.nm__land { fill: color-mix(in srgb, var(--sand-2) 70%, var(--paper)); stroke: var(--ink-3); stroke-width: 1.2; stroke-linejoin: round; }
.nm__country { font: italic 500 13px var(--font-body); fill: var(--ink-3); letter-spacing: .08em; }
.nm__city rect { fill: var(--map-mark); }
.nm__city text { font: 700 12px var(--font-body); fill: var(--map-mark); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.nm__peak path { fill: #8D96A6; opacity: .7; }
.nm__peak text { font: 600 11px var(--font-body); fill: var(--ink-3); }
.nm__trek, .nm__lab { cursor: pointer; }
.nm__halo { fill: none; stroke: var(--paper); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.nm__line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nm__dot { fill: var(--red); stroke: var(--paper); stroke-width: 1.5; }
/* fil de rappel point → pastille : gris pointillé, pour ne pas être pris pour un tracé */
.nm__lead { stroke: #5b554e; stroke-width: 1; stroke-dasharray: 2 2.5; opacity: .75; }
.nm__name { font: 700 14px var(--font-head); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.nm__sub { font: 600 11.5px var(--font-body); fill: var(--ink-3); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; }
.nm__trek.is-soon .nm__line, .nm__trek.is-soon .nm__dot { stroke: #9A948C; }
.nm__trek.is-soon .nm__dot { fill: #9A948C; }
.nm__lead.is-soon { stroke: #9A948C; }
.nm__lab.is-soon .nm__name { fill: var(--ink-2); }
.nm__trek:hover .nm__line, .nm__trek.is-hl .nm__line { stroke-width: 3; }
.nm__lab.is-hl .nm__name, .nm__trek--num.is-hl .nm__name { fill: var(--red); text-decoration: underline; }
.nm__cap { font-size: .8rem; color: var(--ink-3); margin: 8px 4px 0; }
.nm--mob { display: none; }
@media (max-width: 640px) { .nm--desk { display: none; } .nm--mob { display: block; padding: 6px; } }
.nm--mob .nm__sub, .nm--mob .nm__peak text { display: none; }

/* ---------- Carte du Népal : zoom et déplacement ---------- */
.nm { position: relative; }
.nm .tm__zoom { top: 18px; left: 18px; }
.nm__svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; border-radius: 10px; }
.nm.is-zoomed .nm__svg { touch-action: none; cursor: grab; }
.nm.is-panning .nm__svg { cursor: grabbing; }
.nm__halo, .nm__line, .nm__land { vector-effect: non-scaling-stroke; }

/* ---------- Graphe de dénivelé : titre et infobulle ---------- */
.pf__title { font-size: 1.1rem; margin: 22px 0 10px; }
.pf { position: relative; }
.pf svg { touch-action: pan-y; }
.pf__hline { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pf__hdot { fill: var(--red); stroke: var(--paper); stroke-width: 2; }
.pf__tip { position: absolute; pointer-events: none; background: var(--blue-deep); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: .82rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.pf__tip[hidden] { display: none; }
.pf__tip b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.pf__tip span { color: #C5CDDC; font-size: .75rem; }

.pf__tip em { font-style: normal; font-weight: 700; font-size: .8rem; color: var(--hero-accent); }

/* ---------- Aperçu au survol d'un point de départ / d'arrivée ---------- */
#route-out.is-preview .tiles, #route-out.is-preview .pf, #route-out.is-preview .rp__notes, #route-out.is-preview .stages-wrap { opacity: .7; }
#route-out.is-preview .tm__hint { color: var(--red); font-weight: 700; }

.lg--other { border-top: 2.5px dashed #8C8A84; }
.lg--extra { border-top: 2.5px dashed var(--red); opacity: .7; }

/* interrupteur « Routes » : appuyé = affichées */
.tm__base .tm__layer { border-left: 1px solid var(--line); }
.tm__base .tm__layer[aria-pressed="false"] { background: var(--paper); color: var(--ink-3); text-decoration: line-through; }
.tm__base .tm__layer[aria-pressed="true"] { background: var(--sand-2); color: var(--ink); }

.tm__xbtn--dot circle { fill: var(--paper); stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 3 2; }
.tm__xbtn--dot.is-on circle { fill: var(--red); stroke-dasharray: none; }
.tm__xbtn--dot text { font: 800 12px var(--font-body); fill: var(--red); }
.tm__xbtn--dot.is-on text { fill: var(--on-red); }

.tm__xlead { stroke: var(--red); stroke-width: 1.2; opacity: .75; }
.tm__xdot { stroke: var(--paper); stroke-width: 1.5; }

/* tuiles Départ / Arrivée cliquables : la liste native couvre toute la tuile */
.tile--pick { position: relative; cursor: pointer; border: 1.5px solid transparent; transition: border-color .15s; }
.tile--pick:hover, .tile--pick:focus-within { border-color: var(--blue); }
.tile__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.tile__chev { color: var(--blue); text-transform: none; letter-spacing: 0; font-weight: 700; }

/* détour actif : son sommet (point et nom) le retire au clic */
.tm__xoff { cursor: pointer; pointer-events: auto; }
.tm__xoff:hover .tm__toplab, .tm__xoff:focus-visible .tm__toplab { text-decoration: underline; }
.tm__top.tm__xoff:hover circle { stroke-width: 3; }

/* ---------- Menu Départ / Arrivée ---------- */
.tiles { position: relative; }
.tile--pick { text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1.5px solid transparent; transition: border-color .15s, box-shadow .15s; }
.tile--pick:hover, .tile--pick[aria-expanded="true"], .tile--pick:focus-visible { border-color: var(--blue); outline: none; }
.tile__chev { color: var(--blue); text-transform: none; letter-spacing: 0; font-weight: 700; }
.tpick { position: absolute; z-index: 30; min-width: 250px; max-width: calc(100vw - 32px); background: var(--paper); border-radius: 14px; box-shadow: 0 14px 40px rgba(11, 31, 60, .22), 0 2px 8px rgba(11, 31, 60, .08); padding: 6px; display: grid; gap: 2px; animation: pop .15s ease; }
.tpick__opt { display: grid; grid-template-columns: 1fr auto 18px; grid-template-areas: "name days check" "warn days check"; align-items: center; column-gap: 12px; width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.tpick__opt:hover, .tpick__opt:focus-visible { background: var(--sand-2); outline: none; }
.tpick__opt.is-cur { background: color-mix(in srgb, var(--blue) 10%, var(--paper)); }
.tpick__name { grid-area: name; font-weight: 700; font-size: .95rem; }
.tpick__name small { font-weight: 500; color: var(--ink-3); font-size: .8rem; }
.tpick__warn { grid-area: warn; justify-self: start; font-size: .7rem; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 8px; margin-top: 3px; }
.tpick__days { grid-area: days; font-size: .8rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.tpick__check { grid-area: check; color: var(--blue); font-weight: 800; }

.tile__climb { display: flex; flex-wrap: wrap; gap: 2px 10px; text-transform: none; letter-spacing: 0; font-size: .82rem; }
.tile__climb .up { color: var(--warn); }
.tile__climb .down { color: var(--ok); }

/* Programme : titre comme les autres sous-titres, table juste sous la carte */
.stages-wrap { margin: 6px 0 16px; }
details.stages-wrap > summary { font-family: var(--font-head); font-size: 1.1rem; color: var(--ink); margin: 8px 0 10px; }

.trek-alert { margin: 0 0 22px; font-size: 1rem; }

/* aperçu au survol : l'épingle redessinée sur le point survolé ne doit pas « voler » la souris (sinon l'aperçu s'annule et clignote) */
.is-preview .tm__pin { pointer-events: none; }
.tpick__head { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 8px 12px 2px; }

/* épingles : le doigt les déplace sans faire défiler la page */
.tm__pin { touch-action: none; }

/* Commentaires : styles dans le dépôt commun comments-backend/assets/comments.css (copié au build) */


/* Carte du Népal : relief ombré, pays voisins estompés, Népal détouré */
.nm__relief { image-rendering: auto; }
.nm__veil { fill: var(--paper); opacity: .58; }
.nm__land--relief { fill: none; stroke: var(--ink-2); stroke-width: 1.6; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.nm__country { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nm__relief { filter: brightness(.5) saturate(.7); } }
:root[data-theme="dark"] .nm__relief { filter: brightness(.5) saturate(.7); }
.nm__peak text { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.nm__sub { fill: var(--ink-2); }

/* Carte du Népal : noms des treks en pastille, lisibles sur le relief */
.nm__pill { fill: var(--paper); fill-opacity: .9; stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .18)); transition: stroke .15s; }
.nm__lab .nm__name, .nm__lab .nm__sub { stroke: none; }
.nm__lab.is-hl .nm__pill { stroke: var(--red); stroke-width: 1.5; fill-opacity: 1; }
/* mobile : boutons de zoom à droite, au-dessus du Tibet (à gauche, ils cachaient le lac Rara) */
.nm--mob .tm__zoom { left: auto; right: 18px; }

/* Carte du Népal sur mobile : pastilles numérotées sur la carte, liste des treks dessous (trop de noms pour la petite carte) */
.nm__num { fill: var(--red); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.nm__numtxt { font: 800 11px var(--font-body); fill: var(--on-red); pointer-events: none; }
.nm__trek--num:hover .nm__num, .nm__trek--num:focus .nm__num { fill: var(--blue); }
.nm__list { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.nm__list a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.nm__list a:hover, .nm__list a:focus-visible { background: var(--sand-2); }
.nm__listnum { width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: var(--on-red); font: 800 11px/22px var(--font-body); text-align: center; }
.nm__listname { font: 700 .95rem var(--font-head); }
.nm__listsub { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }


/* Carte du Népal (ordinateur) : treks secondaires nommés au survol ou au focus seulement */
.nm__trek--minor .nm__pill, .nm__trek--minor .nm__name, .nm__trek--minor .nm__sub, .nm__lead--minor { opacity: 0; pointer-events: none; transition: opacity .15s; }
/* nom au survol ou au focus : copie dans le calque .nm__over (homemap.js), au-dessus de tout */
.nm__over { pointer-events: none; }
.nm__over .nm__pill { stroke: var(--red); stroke-width: 1.5; fill-opacity: 1; }
.nm__over .nm__name, .nm__over .nm__sub { stroke: none; }
/* bulle du nom sur la carte numérotée (premier toucher) : touchable, elle ouvre la page du trek */
.nm__over .nm__tap { pointer-events: auto; }
.nm__trek--minor .nm__line { transition: stroke-width .15s; }
.nm__trek--minor:hover .nm__line, .nm__trek--minor.is-hl .nm__line { stroke-width: 4; }
.nm__hit { fill: transparent; stroke: transparent; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; pointer-events: all; vector-effect: non-scaling-stroke; }
path.nm__hit { fill: none; pointer-events: stroke; }
/* carte zoomée : treks secondaires nommés quand il y a la place (homemap.js → is-shown) */
.nm__trek--minor.is-shown .nm__pill, .nm__trek--minor.is-shown .nm__name, .nm__trek--minor.is-shown .nm__sub { opacity: 1; pointer-events: auto; }
.nm__lead--minor.is-shown, .nm__over .nm__lead { opacity: .75; }
/* tracé survolé recopié au-dessus des autres (tronçons communs) */
.nm__over .nm__line { stroke-width: 3.5; }
.nm__over .nm__halo { stroke-width: 6; }
/* écrans tactiles sans survol (tablettes au-delà de 640 px) : la carte numérotée et sa liste, comme sur téléphone */
/* largeur plafonnée : la carte mobile (400 unités) n'est pas agrandie 2,5 fois sur une tablette */
@media (hover: none) and (pointer: coarse) { .nm--desk { display: none; } .nm--mob { display: block; max-width: 560px; margin-left: auto; margin-right: auto; } }

/* équivalent en euros ajouté après les prix NPR/USD (assets/js/eur.js) */
.eur { color: var(--ink-3); font-family: var(--font-body); font-size: min(.85em, .95rem); font-weight: 400; letter-spacing: normal; white-space: nowrap; }
.hero .eur, .pagehead .eur, .pricebar .eur, .cover .eur { color: var(--hero-accent); }   /* équivalent en euros lisible sur les fonds bleu nuit */

/* ===================== Refonte du design (2026-10-14, design de Guides Népal v1.24 validé par Vincent) =====================
   Bandeau photo de l'accueil + barre de recherche arrondie, cartes de trek à bande photo et pastilles, icônes au trait
   (sprite assets/img/icons.svg, R.icon()), fil d'Ariane, couverture photo des pages de trek avec le titre dessus,
   colonne de droite collante, sections en cartes. Jamais de bordure colorée sur un seul côté d'un bloc (charte CWAY). */
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.btn { border-radius: 10px; }
.btn .icon { width: 18px; height: 18px; }
.btn--block { display: flex; width: 100%; justify-content: center; text-align: center; }
.btn--pill { border-radius: 999px; padding: 9px 16px; font-size: .92rem; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn--pill:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.ibox { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; background: var(--site-soft); color: var(--site-ink); }
.ibox .icon { width: 22px; height: 22px; }
.ibox--sm { width: 36px; height: 36px; border-radius: 10px; }
.ibox--sm .icon { width: 19px; height: 19px; }

/* Bandeau de l'accueil : photo + voile bleu nuit (texte lisible à gauche) */
.hero--photo { background: #0B1A30; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture, .hero__bg img { display: block; width: 100%; height: 100%; }
/* recadrage ancré en bas à droite (photo d’accueil sans signature depuis le 2026-10-14, assets/img/hero) */
.hero__bg img { object-fit: cover; object-position: 100% 100%; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 18, 34, .88) 0%, rgba(8, 18, 34, .64) 50%, rgba(8, 18, 34, .14) 88%), linear-gradient(0deg, rgba(8, 18, 34, .6), transparent 55%); }
@media (max-width: 640px) { .hero--photo::after { background: linear-gradient(0deg, rgba(8, 18, 34, .92) 0%, rgba(8, 18, 34, .74) 60%, rgba(8, 18, 34, .5) 100%); } }
/* texte calé à gauche, sur la partie sombre du voile (le .wrap porte la largeur, .hero__in la colonne de texte) */
.hero--home.hero--photo .hero__in { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 64px); max-width: 760px; margin: 0; }
.hero--photo h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.hero--photo .lead { color: rgba(255, 255, 255, .9); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.hero--photo .hero__cta { margin: 0 0 22px; gap: 10px; }
.hero__facts li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.hero__facts .icon { color: var(--hero-accent); width: 17px; height: 17px; }

/* Barre de recherche : liste des treks + bouton, une seule barre arrondie ; empilée sur téléphone */
.finder { color-scheme: light; display: flex; align-items: center; gap: 4px; margin: 26px 0 18px; max-width: 620px; padding: 6px; background: #fff; color: #121A26; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.finder__f { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 2px 8px 2px 16px; color: #5B6675; cursor: pointer; }
.finder__lab { display: grid; flex: 1 1 auto; min-width: 0; }
.finder__lab small { font: 700 .66rem var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: #5B6675; }
.finder select { width: 100%; min-width: 0; font: inherit; font-size: 1rem; padding: 2px 0; border: 0; background: transparent; color: #121A26; cursor: pointer; text-overflow: ellipsis; }
.finder .btn { border-radius: 999px; flex: none; }
.hero .finder :focus-visible { outline: 2px solid #1D6A4B; outline-offset: 2px; border-radius: 6px; }   /* fond blanc : pas le vert clair du bandeau */
.hero .finder .btn:focus-visible { border-radius: 999px; }
@media (max-width: 640px) {
  .finder { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 8px; gap: 2px; }
  .finder__f { padding: 6px 8px 8px; }
  .finder .btn { justify-content: center; margin-top: 4px; }
}

/* Fil d'Ariane */
.crumbs { padding: 16px 0 12px; font-size: .88rem; color: var(--ink-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.pagehead .crumbs :focus-visible { outline-color: var(--blue); }

/* En-tête des pages intérieures : bloc bleu nuit arrondi sous le fil d'Ariane */
.pagehead { background: none; color: inherit; padding: 0 0 clamp(4px, 1vw, 8px); }
.pagehead__box { background: var(--hero-bg); color: var(--hero-ink); border-radius: 18px; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px); box-shadow: var(--shadow); }
.pagehead__box > :last-child { margin-bottom: 0; }

/* Page de trek : couverture photo avec le titre dessus, pastilles, colonne de droite collante */
.trekhead { padding-bottom: 4px; }
.cover { position: relative; border-radius: 18px; overflow: hidden; background: var(--blue-deep); box-shadow: var(--shadow); }
.cover .photohero { margin: 0; background: none; }
.cover .photohero picture { max-width: none; }
/* voile limité à la zone du titre (en bas à gauche) : la signature incrustée en bas à droite de nos photos reste visible */
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 18, 34, .72) 0%, rgba(8, 18, 34, .45) 35%, transparent 60%), linear-gradient(0deg, rgba(8, 18, 34, .3) 0%, transparent 45%); }
@media (max-width: 640px) { .cover::after { background: linear-gradient(90deg, rgba(8, 18, 34, .7) 0%, rgba(8, 18, 34, .4) 55%, transparent 80%), linear-gradient(0deg, rgba(8, 18, 34, .35) 0%, transparent 55%); } }
.cover__txt { position: absolute; left: clamp(16px, 3vw, 34px); right: clamp(120px, 30%, 360px); bottom: clamp(14px, 2.6vw, 28px); z-index: 1; color: #fff; }
.cover__txt .eyebrow { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #121A26; letter-spacing: .06em; }
.cover__txt h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .45); }
.cover--plain { background: var(--hero-bg); min-height: 200px; }
.cover--plain::after { content: none; }
/* légende et crédit de la photo : discrets, sous la couverture */
.trekhead .photohero__cap { width: auto; margin: 8px 2px 0; font-size: .76rem; line-height: 1.4; color: var(--ink-3); text-align: right; }
.trekhead__lead { margin: 18px 0 0; max-width: 780px; font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--ink-2); }
.trekhead .share { margin-top: 18px; }
@media (max-width: 640px) { .cover__txt { right: 16px; } .cover__txt h1 { font-size: 1.55rem; } .trekhead .photohero__cap { text-align: left; } }

.pchips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; max-width: 100%; margin: 0; padding: 7px 13px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
.pchip .icon { width: 16px; height: 16px; color: var(--blue); }
.pchip strong { color: var(--ink); font-weight: 700; }
.pchip__data { font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums; }
.pchip .lvl { color: var(--ink); font-weight: 700; font-size: inherit; }
.pchip--ok { background: var(--ok-bg); color: var(--ok); box-shadow: none; }
.pchip--warn { background: var(--warn-bg); color: var(--warn); box-shadow: none; }
.pchip--no { background: color-mix(in srgb, var(--red) 12%, var(--paper)); color: var(--red); box-shadow: none; }
@media (max-width: 640px) {
  .pchips { gap: 6px; }
  .pchip { padding: 5px 10px; font-size: .84rem; gap: 4px 6px; }
  .pchip .icon { width: 14px; height: 14px; }
  .pchip__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pchip .lvl__dots { display: none; }
}
.pchip--ok .icon, .pchip--ok strong, .pchip--warn .icon, .pchip--warn strong, .pchip--no .icon, .pchip--no strong { color: inherit; }

.section--trek { padding-top: clamp(24px, 4vw, 40px); }
.trekcols { display: grid; gap: 28px; align-items: start; }
.trekcols__main { min-width: 0; }
.trekcols__cross { margin-top: 28px; }
.trekside { display: none; }
@media (min-width: 1040px) {
  .trekcols { grid-template-columns: minmax(0, 1fr) 260px; }
  .trekside { display: grid; gap: 16px; position: sticky; top: 84px; }
  .toc--inline { display: none; }
}
.sidebox { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.sidebox__title { font: 700 .74rem var(--font-head); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.sidebox p { margin: 0 0 12px; font-size: .92rem; }
.sidebox .val { white-space: normal; }
.sidetoc { display: grid; gap: 2px; margin: 0 -6px; }
.sidetoc a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.sidetoc a:hover { background: var(--sand-2); color: var(--blue); }
.sidetoc .icon { width: 16px; height: 16px; color: var(--blue); }

/* sections de la page de trek en cartes ; les blocs qu'elles contiennent passent sur fond doux ou derrière un filet */
.tsec { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(14px, 3vw, 30px); }
.tsec + .tsec { margin-top: 20px; }
.tsec > h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tsec .card, .tsec .leg, .tsec .tile { background: var(--sand); box-shadow: none; }
.tsec .pf, .tsec .tm, .tsec .stages, .tsec .table-wrap, .tsec .rp, .tsec .crosslink, .tsec .gpx__help div { box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 640px) { .tsec .tm:not(.is-full), .tsec .pf { margin-left: -6px; margin-right: -6px; } }
.toc a { background: var(--paper); border: 0; box-shadow: var(--shadow); padding: 7px 13px; }
.toc a:hover { box-shadow: var(--hover-shadow); }

/* Photos : coins de la charte ; crédits Wikimedia sur la page Crédits photos, pas sous les images */
/* préfixés : photos.css (commun) est chargé après style.css */
.tsec .pgal { gap: 16px; }
.pgal .pgal__fig figcaption { font-size: .8rem; }

/* Page Crédits photos + lien discret sous la grille des treks (accueil) */
.photonote { margin: 14px 0 0; font-size: .85rem; text-align: right; }
.photonote a { color: var(--ink-3); }
.creditlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.creditlist li { display: flex; gap: 14px; align-items: center; margin: 0; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.creditlist__img { flex: none; }
.creditlist img { display: block; width: 112px; height: 75px; object-fit: cover; border-radius: var(--radius-s); }
.creditlist li > span { display: grid; gap: 3px; min-width: 0; font-size: .92rem; }
.creditlist strong a { color: var(--ink); text-decoration: none; }
.creditlist strong a:hover { color: var(--blue); text-decoration: underline; }
.creditlist__alt { color: var(--ink-2); font-size: .86rem; }
.creditlist small { color: var(--ink-3); font-size: .82rem; overflow-wrap: anywhere; }
.creditlist small a { color: inherit; }

/* Cartes de trek à bande photo */
.tcards { gap: 20px; }
.tcard { padding: 0; gap: 0; overflow: hidden; border: 0; transition: box-shadow .2s, transform .2s; }
.tcard:hover { border-color: transparent; box-shadow: var(--hover-shadow); transform: translateY(-2px); }
.tcard:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.tcard__band { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #10233F, #1D6A4B); }
.tcard__band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tcard:hover .tcard__band img { transform: scale(1.04); }
.tcard__region { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #121A26; font: 700 .72rem var(--font-head); letter-spacing: .06em; }
.tcard__soon { position: absolute; z-index: 1; right: 12px; top: 12px; margin: 0; padding: 3px 10px; font-size: .72rem; font-weight: 700; }
.tcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 16px 18px 16px; }
.tcard__name { font-size: 1.28rem; font-weight: 800; }
.tcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sand); font-size: .85rem; color: var(--ink-2); }
.tchip b { font-family: var(--font-data); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.tchip .icon { width: 15px; height: 15px; color: var(--blue); }
.tchip .lvl { font-size: .82rem; }
.section--tint .tchip, .tsec .tchip { background: var(--sand-2); }
.tcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; }
.tcard__more .icon { width: 16px; height: 16px; transition: transform .2s; }
.tcard:hover .tcard__more .icon { transform: translateX(3px); }

/* Cartes à icône (trois questions de l'accueil), cartes « Préparer son trek » */
.card--ico .ibox { margin-bottom: 14px; }
.card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.card__link .icon { width: 16px; height: 16px; }
.linkcard { gap: 8px; padding: 18px; border: 0; transition: box-shadow .2s, transform .2s; }
.linkcard:hover { border-color: transparent; box-shadow: var(--hover-shadow); transform: translateY(-2px); }
.linkcard .ibox { width: 38px; height: 38px; border-radius: 10px; color: var(--site-ink); }
.linkcard .ibox .icon { width: 19px; height: 19px; }
.pcard { border: 0; transition: box-shadow .2s, transform .2s; }
.pcard:hover { border-color: transparent; box-shadow: var(--hover-shadow); }

/* Divers : FAQ, focus visibles (≥ 3:1 sur le fond) */
.faq details { border-radius: 12px; }
.faq__filter input:focus { outline: none; }
.faq__filter input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.tm__zoom button:focus-visible, .tm__base button:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.faq__toc a { border: 0; box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard__band img, .tcard__more .icon, .linkcard, .pcard, .btn { transition: none; }
  .tcard:hover, .linkcard:hover, .btn:hover, .tcard:hover .tcard__band img, .tcard:hover .tcard__more .icon { transform: none; }
  .pgal .pgal__item img { transition: none; }
  .pgal .pgal__item:hover img, .pgal .pgal__item:focus-visible img { transform: none; }
  .result, .tpick { animation: none; }
}
@media print {
  .trekside, .finder, .hero__bg, .crumbs { display: none !important; }
  .tsec, .sidebox, .tcard, .pchip { box-shadow: none; border: 1px solid #ccc; }
}