/* Sommets — application web. Les valeurs du système de design viennent de `packages/jetons`, le paquet lu aussi par
   l'app mobile (ADR 0021, direction Topo de l'ADR 0029) ; `jetons.css` les pose en propriétés CSS (généré par
   scripts/gen-navigateur.ts). Ce fichier ne fait que les nommer pour le vocabulaire du panneau, et garder ce qui est
   propre au web. La zone de la carte (légende, bulles, barre d'outils, profil) garde les jetons clairs dans les deux
   thèmes : ses repères sont dessinés pour un fond clair.
   Papier, encre, un accent : `--papier`, `--surface`, `--creux`, `--encre`, `--encre2`, `--encre3`, `--filet` et
   `--accent` viennent tels quels de jetons.css. `--accent` est ce qui est à vous (votre trace, vos sommets gravis, le
   compteur), jamais un bouton ni un lien : l'action principale et les liens sont `--action`, à l'encre. */
/* Polices embarquées (ADR 0029 et 0083, SIL OFL 1.1 : polices/OFL-InstrumentSans.txt et polices/OFL-Newsreader.txt).
   Instrument Sans pour le texte et les chiffres, Newsreader pour les titres et les noms de lieux, l'instance
   semi-étroite pour les surtitres et les chiffres vedettes. Les étiquettes de la carte restent en Figtree (glyphes).
   Newsreader : le Light aux titres d'écran seulement, le Regular partout ailleurs. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/InstrumentSans-Regular.f28af62faa9e.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("polices/InstrumentSans-Medium.65d25fc111c4.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("polices/InstrumentSans-SemiBold.04235f235483.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("polices/InstrumentSans-Bold.3e67cdb08813.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans SemiCondensed";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("polices/InstrumentSansSemiCondensed-SemiBold.3e78d9da5900.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 100 300;
  font-display: swap;
  src: url("polices/Newsreader-Light.5cfb40eca85e.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("polices/Newsreader-Regular.9cfa6284cb5b.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("polices/Newsreader-Italic.331d0d264271.woff2") format("woff2");
}

:root,
.zone-carte {
  /* Vocabulaire du web, branché sur les rôles Topo partagés. */
  --creme: var(--papier); /* fond du panneau : le papier de la feuille */
  --fond-ui: var(--creux); /* contrôles segmentés, pastilles, tuiles */
  --survol: var(--creux);
  --encre-2: var(--encre2);
  --encre-3: var(--encre3);
  --trait: var(--filet); /* filets décoratifs */
  --trait-2: var(--filet-fort); /* bord des champs et boutons (≥ 3:1) */
  --action-fonce: var(--encre); /* texte d'un lien, d'un bouton tonal ; survol d'un bouton plein */
  --action-doux: var(--creux); /* fond d'une action choisie, halo du focus */
  /* Balisage et repères de la carte : `@sommets/map-style`, identique dans les deux thèmes. */
  --t1: var(--carte-t1); /* losange jaune */
  --t1-encre: var(--carte-t1-texte);
  --t23: var(--carte-t23); /* blanc-rouge-blanc */
  --t46: var(--carte-t46); /* blanc-bleu-blanc */
  --sur-t: #ffffff; /* texte sur les marques de balisage */
  --bande: #ffffff; /* bandes blanches des marques */
  --bord-badge: rgba(0, 0, 0, 0.3);
  --nc: var(--carte-non-cote);
  /* Chemin officiel français sans cotation : trait neutre « balisé ». */
  --balise: var(--carte-balise-non-cote);
  --ski: var(--carte-ski); /* bleu glacier : traces de ski et de raquette */
  --c2c: var(--carte-hors-sentier);
  --fermeture: var(--carte-fermeture);
  --glacier: var(--carte-glacier);
  --rayon: var(--r-m);
  --titre: var(--police-titre); /* titres et noms de lieux, 400 ; 300 aux titres d'écran */
  --texte: var(--police);
  --etroite: var(--police-etroite); /* surtitres, chiffres vedettes */
  --largeur-panneau: 388px;
}

/* Alpenglow (ADR 0007) : couleur locale du web pour l'objectif, absente des rôles partagés.
   Elle n'est jamais jaune (couleur de T1) et jamais rouge (alerte). */
:root,
.zone-carte {
  --peche: #f2b9a0;
  --peche-doux: #fbe3d6;
  --peche-encre: #8a3a22; /* brique : texte sur pêche */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --peche-doux: #3b2a22;
    --peche-encre: #f2b9a0;
    --bord-badge: rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --peche-doux: #3b2a22;
  --peche-encre: #f2b9a0;
  --bord-badge: rgba(0, 0, 0, 0.5);
}
/* La web app est toujours claire (ADR 0083) : « only » refuse aussi l'assombrissement imposé par un navigateur de
   téléphone. Le sombre reste écrit : il revient en retirant data-theme de <html>. */
:root[data-theme="light"] {
  color-scheme: only light;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--papier);
  color: var(--encre);
  font: 14px/1.45 var(--texte);
  /* Le serif n'a pas de gras : une règle qui lui en demande garde le dessin du Regular, sans faux gras. */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: var(--action);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}
svg {
  flex: none;
}
[hidden] {
  display: none !important;
}
.chiffres {
  font-variant-numeric: tabular-nums;
}

/* ---------- Mise en page ---------- */
/* La barre des sections (sections.css) est fixée en haut de l'écran : tout le reste descend d'autant. */
.appli {
  display: grid;
  grid-template-columns: var(--largeur-panneau) 1fr;
  height: calc(100vh - var(--decalage-haut, 0px));
  height: calc(100dvh - var(--decalage-haut, 0px));
}
.zone-carte {
  position: relative;
  min-width: 0;
}
#carte {
  position: absolute;
  inset: 0;
  background: var(--carte-fond);
}

/* ---------- Panneau ---------- */
.panneau {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--creme);
  border-right: 1px solid var(--trait);
}
.poignee {
  display: none;
}
.entete {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--trait);
}
/* Le bouton de repli tient seul en tête du panneau : la marque est montée dans la barre des sections. */
.entete-actions {
  display: flex;
  justify-content: flex-end;
  margin: -6px -8px 6px;
}
/* Le résumé du cran du bas d'une feuille n'existe qu'à téléphone (voir la règle plus bas). */
.feuille-resume {
  display: none;
}

/* Sélecteur d'activité : un contrôle segmenté, l'activité choisie à l'encre pleine */
.activites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  overflow: hidden;
}
.activites button {
  padding: 7px 4px;
  border: 0;
  border-left: 1px solid var(--trait);
  background: transparent;
  color: var(--encre-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.activites button:first-child {
  border-left: 0;
}
.activites button:hover {
  color: var(--encre);
}
.activites button[aria-checked="true"] {
  background: var(--action);
  color: var(--sur-action);
  font-weight: 600;
}

/* Barre de la carte, en haut à gauche : le bouton qui rouvre le panneau replié, et la ligne des suggestions de
   l'éditeur. La recherche est montée dans la barre des sections (sections.css). Elle est dans la zone de la carte :
   jetons clairs dans les deux thèmes, comme la légende et les bulles. */
.barre-carte {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: calc(100% - 100px); /* les contrôles de droite restent dégagés */
}
.resultats ul {
  list-style: none;
  margin: 0;
  padding: 4px;
}
.resultats-note {
  margin: 0;
  padding: 9px 12px 4px;
  color: var(--encre-3);
  font-size: 12px;
}
.resultat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  cursor: pointer;
}
.resultat[aria-selected="true"],
.resultat:hover {
  background: var(--survol);
}
.resultat-nom {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resultat-nom mark {
  background: none;
  color: var(--action-fonce);
}
.resultat-alt {
  color: var(--encre-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.resultat-meta {
  grid-column: 1 / -1;
  color: var(--encre-3);
  font-size: 12px;
}
.resultats-vide {
  padding: 14px 12px;
  color: var(--encre-3);
  font-size: 13px;
}
.resultats-groupe {
  padding: 10px 10px 3px;
  color: var(--encre-3);
  font: 600 10.5px/1.2 var(--etroite);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.resultat-iti .cot {
  align-self: start;
  height: 20px;
  min-width: 30px;
  padding: 0 6px;
  font-size: 12px;
}

/* Contenu défilant */
.contenu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pied {
  padding: 10px 18px 12px;
  border-top: 1px solid var(--trait);
  color: var(--encre-3);
  font-size: 12px;
}
/* Ligne de la recherche dans l'en-tête : la recherche est sur la carte, il n'y reste que « Tracer » et « Trouver une
   rando » sur téléphone (traceur.js les range dans .actions-entete sur ordinateur). */
.recherche-ligne:not(:has(> *)) {
  display: none;
}
.recherche-ligne:not(:has(> *)) + .actions-entete {
  margin-top: 0;
}

/* ---------- Panneau repliable (ordinateur) ---------- */
.replier-panneau {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--encre-2);
}
.replier-panneau:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.replier-panneau svg,
.deplier-panneau svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deplier-panneau {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
  color: var(--encre);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.deplier-panneau:hover {
  background: var(--creux);
}
@media (min-width: 761px) {
  .appli {
    position: relative;
  }
  .panneau {
    transition:
      transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s;
  }
  /* Replié : la carte prend toute la largeur tout de suite (un seul redimensionnement), le panneau glisse
     au-dessus d'elle vers la gauche, puis disparaît (inert, app.js). */
  .appli[data-panneau="replie"] {
    grid-template-columns: 1fr;
  }
  .appli[data-panneau="replie"] .panneau {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--largeur-panneau);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform 0.22s cubic-bezier(0.4, 0, 0.6, 1),
      visibility 0s 0.22s;
  }
  .appli.sans-transition .panneau {
    transition: none;
  }
  /* La légende passe sous la barre de la carte quand celle-ci montre quelque chose (panneau replié, suggestions). */
  .zone-carte:has(.barre-carte > :not([hidden])) .maplibregl-ctrl-top-left {
    top: 56px;
  }
  /* Éditeur ouvert : sa barre d'outils occupe le haut de la carte, la barre de la carte et la légende passent dessous. */
  body.traceur-actif .barre-carte {
    top: 72px;
  }
  body.traceur-actif .maplibregl-ctrl-top-left {
    top: 60px;
  }
  body.traceur-actif .zone-carte:has(.barre-carte > :not([hidden])) .maplibregl-ctrl-top-left {
    top: 116px;
  }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .panneau,
  .appli[data-panneau="replie"] .panneau {
    transition: none;
  }
}

/* ---------- Lieux trouvés par la recherche ---------- */
.resultat-lieu .resultat-nom {
  grid-column: 1 / -1;
}
/* Repère temporaire du lieu choisi : étiquette avec son nom et une croix, au-dessus d'une épingle. */
.repere-lieu {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.repere-lieu-etiquette {
  display: flex;
  align-items: center;
  max-width: 260px;
  margin-bottom: 3px;
  padding: 3px 3px 3px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
  color: var(--encre);
  font: 600 13px/1.25 var(--texte);
  pointer-events: auto;
}
.repere-lieu-etiquette span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repere-lieu-fermer {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--encre-2);
}
.repere-lieu-fermer:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.repere-lieu-fermer svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.repere-lieu-epingle {
  width: 26px;
  height: 34px;
  filter: drop-shadow(0 1px 2px rgba(30, 43, 38, 0.35));
}
.repere-lieu-epingle path {
  fill: var(--action);
  stroke: var(--papier);
  stroke-width: 2;
}
.repere-lieu-epingle circle {
  fill: var(--papier);
}

/* ---------- Liste des sommets ---------- */
/* ---------- Onglets « Sommets | Randonnées » en tête de la liste ---------- */
.onglets {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  padding: 0 18px;
  border-bottom: 1px solid var(--trait);
  background: var(--creme);
}
.onglet {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 46px;
  padding: 15px 0 13px;
  margin-right: 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--encre-3);
  font: 600 15px/1 var(--texte);
}
.onglet .compte {
  padding: 0;
  background: none;
  color: var(--encre-3);
  font: 500 12px/1 var(--texte);
}
.onglet .compte:empty {
  display: none;
}
.onglet:hover {
  color: var(--encre);
}
.onglet[aria-selected="true"] {
  border-bottom-color: var(--encre);
  color: var(--encre);
}
.onglet:focus-visible {
  outline-offset: -2px;
}
.volet {
  padding-top: 12px;
}
.volet-chevron {
  width: 18px;
  height: 18px;
  margin-left: auto;
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.volet-corps {
  padding-bottom: 4px;
}

/* Filtres de la section « Randonnées » */
.filtres {
  display: flex;
  gap: 8px;
  padding: 2px 18px 10px;
}
.filtre-texte {
  position: relative;
  flex: 1;
  min-width: 0;
}
.filtre-texte svg {
  position: absolute;
  left: 10px;
  top: 9px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--encre-3);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.filtre-texte input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  background: var(--papier);
  font-size: 13px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.filtre-texte input::-webkit-search-cancel-button {
  display: none;
}
.filtres select {
  flex: none;
  max-width: 46%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  background: var(--papier);
  color: var(--encre);
  font-size: 13px;
}
.filtre-texte input:focus,
.filtres select:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-doux);
  outline: none;
}

/* Liste des randonnées, regroupées par sommet */
.liste-randos {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}
.rando-sommet {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 18px 3px;
  border-top: 1px solid var(--trait);
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 600;
}
.liste-randos > .rando-sommet:first-child {
  border-top-color: transparent;
}
.rando-sommet span {
  color: var(--encre-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ligne-rando {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1px 10px;
  width: 100%;
  padding: 6px 18px;
  border: 0;
  background: transparent;
  text-align: left;
}
.ligne-rando:hover,
.ligne-rando:focus-visible {
  background: var(--survol);
}
.ligne-rando:focus-visible {
  outline-offset: -2px;
}
.ligne-rando .cot {
  grid-row: span 2;
  justify-self: start;
  margin-top: 1px;
}
.rando-titre {
  font-weight: 550;
  line-height: 1.35;
}
.rando-meta {
  color: var(--encre-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.bouton-secondaire {
  display: block;
  margin: -18px auto 20px;
  padding: 7px 12px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font-size: 13px;
  font-weight: 500;
}
.bouton-secondaire:hover {
  background: var(--survol);
}
.compte {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--fond-ui);
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.aide {
  margin: 0;
  padding: 0 18px 10px;
  color: var(--encre-3);
  font-size: 12.5px;
}
.bandeau {
  margin: 4px 18px 12px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  background: var(--fond-ui);
  color: var(--encre-2);
  font-size: 12.5px;
}
.liste-sommets {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}
.ligne-sommet {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 2px 12px;
  width: 100%;
  padding: 9px 18px;
  border: 0;
  border-top: 1px solid var(--trait);
  background: transparent;
  text-align: left;
}
.liste-sommets li:first-child .ligne-sommet {
  border-top-color: transparent;
}
.ligne-sommet:hover,
.ligne-sommet:focus-visible {
  background: var(--survol);
}
.ligne-sommet:focus-visible {
  outline-offset: -2px;
}
.ligne-sommet .tri {
  grid-row: span 2;
  width: 14px;
  height: 12px;
  fill: var(--encre-3);
}
.ligne-sommet .tri.avec {
  fill: var(--encre);
}
.ligne-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14.5px;
}
.ligne-alt {
  grid-row: span 2;
  color: var(--encre-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ligne-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--encre-3);
  font-size: 12.5px;
}
/* Une ligne sans second texte (sommet sans détail) tient sur une seule rangée, sans écart en dessous. */
.ligne-sommet:not(:has(.ligne-meta)) :is(.tri, .ligne-alt) {
  grid-row: auto;
}
.suite {
  margin: 0;
  padding: 10px 18px 18px;
  color: var(--encre-3);
  font-size: 12.5px;
}

/* États vides */
.vide {
  padding: 36px 28px;
  text-align: center;
  color: var(--encre-2);
}
.vide svg {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--trait-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.vide-titre {
  margin: 0 0 4px;
  color: var(--encre);
  font: 400 22px/1.15 var(--titre);
}
.vide p:not(.vide-titre) {
  margin: 0;
  font-size: 13px;
}

/* Squelette de chargement */
.squelette {
  padding: 4px 18px;
}
.squelette span {
  display: block;
  height: 12px;
  margin: 14px 0;
  border-radius: 6px;
  background: var(--fond-ui);
  animation: pulsation 1.2s ease-in-out infinite;
}
.squelette span:nth-child(2) {
  width: 70%;
}
.squelette span:nth-child(3) {
  width: 85%;
}
.squelette-liste span {
  height: 38px;
  margin: 12px 0;
  border-radius: 8px;
}
@keyframes pulsation {
  50% {
    opacity: 0.45;
  }
}

/* ---------- Fiche sommet ---------- */
.fiche-entete {
  padding: 12px 18px 16px;
  border-bottom: 1px solid var(--trait);
}
.retour {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 10px -6px;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre-2);
  font-size: 13px;
  font-weight: 500;
}
.retour:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.retour svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fiche-titre {
  margin: 0;
  font: var(--texte-titre-ecran-poids) var(--texte-titre-ecran-taille) /
    var(--texte-titre-ecran-hauteur) var(--titre);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.fiche-sous-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 6px;
  color: var(--encre-2);
}
.fiche-croix,
.fiche-acces {
  color: var(--encre-3);
  font-size: 12.5px;
}
.fiche-croix::before,
.fiche-acces::before {
  content: "· ";
}
/* Altitude seule en vedette : Instrument Sans 600, tabulaire, comme un chiffre de topo. */
.fiche-alt {
  color: var(--encre);
  font: 600 21px/1 var(--texte);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.groupe {
  padding: 6px 0 4px;
}
.groupe + .groupe {
  border-top: 1px solid var(--trait);
}
.groupe-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 18px 6px;
  color: var(--encre-3);
  font: 600 11px/1.25 var(--etroite);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.groupe-titre .compte {
  letter-spacing: 0;
  text-transform: none;
}
.groupe-titre.courant {
  color: var(--action-fonce);
}
.itineraires {
  list-style: none;
  margin: 0;
  padding: 0 8px;
}
.iti {
  position: relative;
  border-radius: var(--r-s);
}
.iti + .iti {
  margin-top: 1px;
}
.iti.actif {
  background: var(--action-doux);
}
.iti-c2c {
  display: block;
  padding: 0 10px 6px;
  text-align: right;
  font-size: 11.5px;
  color: var(--encre-3);
}
.iti.actif::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--c2c);
}
.iti-corps {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 2px 10px;
  width: 100%;
  padding: 9px 10px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}
.iti-corps:disabled {
  cursor: default;
}
.iti:not(.actif) .iti-corps:not(:disabled):hover {
  background: var(--survol);
}
.iti-corps .cot {
  grid-row: span 2;
  justify-self: start;
  margin-top: 1px;
}
.iti-titre {
  font-weight: 550;
  line-height: 1.35;
}
.iti-corps {
  padding-bottom: 9px;
}
.iti-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-height: 2px;
  color: var(--encre-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.iti-detail {
  margin: -2px 10px 0 72px;
  padding: 0 0 10px;
}
.iti-parcours {
  margin: 0 0 4px;
  color: var(--encre);
  font-size: 13px;
  line-height: 1.4;
}
.iti-alerte {
  margin: 0 0 6px;
  padding-left: 8px;
  border-left: 3px solid var(--fermeture);
  color: var(--encre);
  font-size: 12.5px;
  font-weight: 500;
}
.iti-source {
  margin: 0;
  color: var(--encre-3);
  font-size: 12px;
}
.iti-source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--trait-2);
  text-underline-offset: 2px;
}
.iti-source a:hover {
  color: var(--encre-2);
}

/* Itinéraires sans tracé : une ligne qui renvoie à Camptocamp, sous les itinéraires tracés */
.sans-trace {
  margin: 4px 18px 20px;
  padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-size: 13px;
}
.sans-trace a {
  color: var(--action-fonce);
  text-decoration: underline;
  text-decoration-color: var(--trait-2);
  text-underline-offset: 3px;
}
.sans-trace a:hover {
  text-decoration-color: currentColor;
}
.neige-masquee {
  margin: 6px 18px 0;
  color: var(--encre-3);
  font-size: 12.5px;
}

/* ---------- Pile de feuilles ---------- */
/* L'itinéraire choisi recouvre le contenu du panneau, sur sa mesure tenue à jour par app.js ; la fiche du sommet dessous
   garde sa place et son défilement. La rando ouverte et ses pages en font autant. */
.feuille-iti,
.mr-fiche,
.mt-page {
  top: var(--contenu-haut);
  height: var(--contenu-hauteur);
}
.feuille-iti {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--creme);
}
.feuille-iti[hidden] {
  display: none;
}
.iti-feuille-titre {
  margin: 0;
  font: 400 28px/1.05 var(--titre);
  letter-spacing: -0.015em;
}
.iti-feuille-titre .type-iti {
  display: table;
  margin: 0 0 8px;
  font-family: var(--texte);
  letter-spacing: 0;
}
.feuille-iti .fiche-sous-titre {
  align-items: center;
}
.iti-cot {
  display: inline-flex;
}
.feuille-iti .iti-detail {
  margin: 0;
  padding: 14px 18px 6px;
}
.feuille-iti .itineraires,
.feuille-iti .liste-randos {
  padding: 8px;
}
.iti-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 18px 0;
}
.iti-action {
  padding: 8px 14px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font-size: 13px;
  font-weight: 600;
  touch-action: manipulation;
}
.iti-action:hover:not(:disabled) {
  background: var(--survol);
}
.iti-action.principale {
  border-color: var(--action);
  background: var(--action);
  color: var(--sur-action);
}
.iti-action.principale:hover:not(:disabled) {
  background: var(--encre-2);
}
.iti-action:disabled {
  opacity: 0.6;
  cursor: default;
}
.iti-message {
  margin: 8px 18px 0;
  color: var(--encre-2);
  font-size: 12.5px;
}
.iti-message:empty {
  display: none;
}
.iti-message[data-erreur="true"] {
  padding-left: 8px;
  border-left: 3px solid var(--fermeture);
  color: var(--encre);
  font-weight: 500;
}
.iti-lien {
  margin: 14px 18px 20px;
  font-size: 13px;
}
/* Hiérarchie des actions (revue de l'interface du 19.10.2026, G4 et G6) : la fiche d'un itinéraire nomme son sommet en
   surtitre et montre son profil ; dans la fiche d'un sommet, « Tracer vers ce sommet » est au trait, à côté de l'action
   pleine, et « Viser » et « Gravi » sont deux bascules sur une ligne. */
.iti-surtitre {
  margin: 0 0 4px;
  color: var(--encre2);
  font-family: var(--police-etroite);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.iti-profil {
  margin: 10px 0 0;
}
.iti-profil svg {
  display: block;
  width: 100%;
  height: 64px;
}
.iti-profil-aplat {
  fill: var(--graphe-aplat);
}
.iti-profil-ligne {
  fill: none;
  stroke: var(--graphe-profil);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.tracer-vers.tracer-vers-contour {
  border: 1px solid var(--filet-fort);
  background: transparent;
  color: var(--encre);
}
@media (hover: hover) {
  .tracer-vers.tracer-vers-contour:hover {
    background: var(--creux);
  }
}
.iti-proposition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 18px 0;
  padding: 10px 12px;
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
  background: var(--creux);
}
.iti-proposition p {
  flex: 1 1 220px;
  margin: 0;
  font-size: 13px;
}
.fiche-bascules {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.fiche-bascules > p {
  margin: 0;
}
/* La réponse à un geste : un message bref, fixe au-dessus du bas de la fenêtre, qui s'efface (revue G8). Fond inversé,
   comme au téléphone ; une erreur porte le filet de l'alerte. */
.message-bref {
  position: fixed;
  z-index: 40;
  bottom: 24px;
  left: 50%;
  box-sizing: border-box;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--r-s);
  background: var(--surface-inverse);
  color: var(--sur-surface-inverse);
  font-size: 14px;
  box-shadow: var(--ombre-2);
  transform: translateX(-50%);
}
.message-bref[hidden] {
  display: none;
}
.message-bref[data-erreur="true"] {
  border-left: 4px solid var(--erreur);
}

/* Une fiche ouverte porte ses propres « Trouver une rando » et « Tracer vers ce sommet » : les boutons génériques de
   l'en-tête du panneau s'effacent, plus de doublon. */
#panneau:has(> #contenu[data-vue="fiche"]) #bouton-tracer,
#panneau:has(> #contenu[data-vue="fiche"]) #bouton-suggerer {
  display: none;
}
.iti-lien a {
  color: var(--action-fonce);
  text-decoration: underline;
  text-decoration-color: var(--trait-2);
  text-underline-offset: 3px;
}
/* Bouton « Fermer » en haut à gauche des bulles, de la légende et des fonds de carte */
.bulle-feuille .retour {
  margin: -4px 0 6px -8px;
}
.maplibregl-popup-content:has(.bulle-feuille) .maplibregl-popup-close-button {
  display: none;
}
.legende-corps .retour {
  margin: 2px 0 0 -6px;
}

/* ---------- Itinéraires proposés (fiche) et officiels (section « Randonnées ») ---------- */
.groupe-entete {
  margin: 0;
  font: inherit;
}
.groupe-bouton {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}
.groupe-bouton:hover {
  background: var(--survol);
}
.groupe-bouton:focus-visible {
  outline-offset: -2px;
}
.groupe-bouton .volet-chevron {
  width: 16px;
  height: 16px;
}
.groupe-bouton[aria-expanded="false"] .volet-chevron {
  transform: rotate(-90deg);
}
.groupe-aide {
  margin: 0;
  padding: 0 18px 6px;
  color: var(--encre-3);
  font-size: 12px;
}
/* Type d'itinéraire : Boucle, Traversée, Aller-retour, Transport */
.type-iti {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 0 5px;
  border: 1px solid var(--trait-2);
  border-radius: 4px;
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0;
  vertical-align: 1px;
  white-space: nowrap;
}
.lieux {
  display: inline;
}
.lieu {
  white-space: normal;
}
.vers {
  margin: 0 5px;
  color: var(--encre-3);
}
svg.moyen {
  width: 15px;
  height: 15px;
  margin: 0 4px 0 0;
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -2px;
}
.iti-long {
  padding: 0 5px;
  border-radius: 4px;
  background: var(--peche-doux);
  color: var(--peche-encre);
  font-size: 12px;
  font-weight: 600;
}
.liste-randos .officiel {
  position: relative;
}
.liste-randos .officiel.actif {
  background: var(--action-doux);
}
.liste-randos .officiel.actif::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--c2c);
}
.liste-randos .officiel.actif .ligne-rando:hover {
  background: transparent;
}
.liste-randos .officiel .iti-detail {
  margin: -2px 18px 0 80px;
}
.rando-officiels {
  color: var(--action-fonce);
}
.rando-suite {
  padding: 2px 18px 6px 80px;
  color: var(--encre-3);
  font-size: 12px;
}
/* Rando Camptocamp de la liste, dépliée sur place comme un itinéraire officiel */
.liste-randos .rando-c2c {
  position: relative;
}
.liste-randos .rando-c2c.actif {
  background: var(--action-doux);
}
.liste-randos .rando-c2c.actif::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--c2c);
}
.liste-randos .rando-c2c.actif .ligne-rando:hover {
  background: transparent;
}
.liste-randos .rando-c2c .iti-detail {
  margin: -2px 18px 0 80px;
}
/* « Voir <sommet> » sous un itinéraire déplié de la liste */
.lien-sommet {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 8px 8px 0 0;
  padding: 4px 12px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--action-fonce);
  font-size: 13px;
  font-weight: 600;
  touch-action: manipulation;
}
.lien-sommet:hover {
  background: var(--survol);
}
/* Niveau de confiance (traceur.css) : au moins 12 px dans les listes */
.liste-randos .confiance,
.itineraires .confiance {
  font-size: 12px;
}

/* Aide « ? » : cotations T1 à T6 et D+ */
.aide-cot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -6px -4px -6px 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--encre-2);
  vertical-align: middle;
  touch-action: manipulation;
}
.aide-cot span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--trait-2);
  border-radius: 50%;
  font: 700 12px/1 var(--texte);
  letter-spacing: 0;
  text-transform: none;
}
.aide-cot:hover span,
.aide-cot[aria-expanded="true"] span {
  border-color: var(--action);
  background: var(--action);
  color: var(--sur-action);
}
.aide-cotations {
  margin: 0 18px 12px;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--encre-2);
  font-size: 13px;
}
.aide-cotations ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aide-cotations li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 10px;
}
.aide-cotations .cot {
  min-width: 38px;
}
.aide-dplus {
  justify-self: start;
  color: var(--encre);
  font-weight: 800;
}
.aide-cotations p {
  margin: 8px 0 0;
  color: var(--encre-3);
  font-size: 12.5px;
}

/* Lien d'évitement « Aller à la carte » : visible au focus seulement */
.evitement {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 30;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.evitement:focus {
  width: auto;
  height: auto;
  padding: 12px 16px;
  clip-path: none;
  border-radius: var(--r-s);
  background: var(--action);
  color: var(--sur-action);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ombre-flottant);
}

/* Badges de cotation : les marques du terrain, littéralement (ADR 0007). T1 : losange jaune ;
   T2–T3 : blanc-rouge-blanc ; T4–T6 : blanc-bleu-blanc. Les bandes blanches détachent le badge de tout fond
   (crème, sombre, aérien). Servent aussi aux boutons de difficulté maximale du traceur (.tr-t). */
.cot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 38px;
  height: 22px;
  padding: 0 7px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--bord-badge);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cot-t1 {
  background: var(--t1);
  color: var(--t1-encre);
}
.cot.cot-t1::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}
.cot-t23,
.cot-t46 {
  background:
    linear-gradient(var(--bande), var(--bande)) top / 100% 4px no-repeat,
    linear-gradient(var(--bande), var(--bande)) bottom / 100% 4px no-repeat,
    var(--t23);
  color: var(--sur-t);
}
.cot-t46 {
  background-color: var(--t46);
}
.cot-autre {
  background: var(--papier);
  color: var(--encre);
  box-shadow: inset 0 0 0 1.5px var(--encre);
}
.cot-nc {
  background: var(--papier);
  color: var(--encre-2);
  box-shadow: none;
  outline: 1.5px dashed var(--trait-2);
  outline-offset: -1.5px;
}
.cot-ferme {
  background: repeating-linear-gradient(-45deg, var(--fermeture) 0 5px, #3a4045 5px 7px);
  color: #fff;
}

/* ---------- Contrôles de la carte ---------- */
.maplibregl-ctrl-group {
  border: 1px solid var(--trait) !important;
  border-radius: var(--r-s) !important;
  box-shadow: var(--ombre-flottant) !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button {
  width: 34px;
  height: 34px;
}
.maplibregl-ctrl-top-right,
.maplibregl-ctrl-top-left {
  padding-top: 2px;
}
.maplibregl-ctrl-attrib {
  font: 12px/1.4 var(--texte);
}
.maplibregl-ctrl-attrib a {
  color: var(--encre-2);
}
.maplibregl-ctrl-scale {
  border-color: var(--encre-2);
  color: var(--encre);
  font: 12px var(--texte);
  background: var(--fond-mentions);
}

/* Choix du fond */
.ctrl-fond {
  position: relative;
}
.fond-bouton {
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: var(--rayon);
  background: var(--fond-ui) center / cover no-repeat;
  box-shadow: var(--ombre-flottant);
  overflow: hidden;
}
.fond-bouton span,
.fond-option span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 0 4px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.fond-menu {
  position: absolute;
  right: 74px;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
}
.fond-menu[hidden] {
  display: none;
}
.fond-menu .retour {
  align-self: flex-start;
  margin: -2px 0 0 -4px;
}
.fond-options {
  display: flex;
  gap: 8px;
}
.fond-option {
  position: relative;
  width: 84px;
  height: 66px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--fond-ui) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(30, 43, 38, 0.12);
  overflow: hidden;
}
.fond-option span {
  border-radius: 0 0 8px 8px;
}
.fond-option[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--papier),
    0 0 0 4px var(--action);
}
/* « Mode léger » (niveau.js) : sous les fonds, une case et deux lignes. */
.fond-leger {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--trait);
  color: var(--encre);
  cursor: pointer;
}
.fond-leger[hidden] {
  display: none;
}
.fond-leger input {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--action);
}
.fond-leger > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fond-leger-titre {
  font-size: 14px;
  font-weight: 600;
}
.fond-leger small {
  max-width: 230px;
  color: var(--encre-2, var(--encre));
  font-size: 12px;
  line-height: 1.3;
}
.vignette-plan {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23f2f0e9'/%3E%3Cpath d='M0 44c10-6 18-4 26 2s20 8 30 0 16-4 16-4v30H0z' fill='%23a8cde4'/%3E%3Cpath d='M30 0h42v26c-8 6-16 4-22-2S36 14 30 0z' fill='%23cfe0bf'/%3E%3Cpath d='M0 18c14-4 26 6 38 4s22-10 34-6' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath d='M12 72 24 30l18-10 22 6' fill='none' stroke='%23d1312a' stroke-width='2'/%3E%3Cpath d='M8 36l14 4' fill='none' stroke='%23f0b400' stroke-width='2'/%3E%3C/svg%3E");
}
.vignette-aerien {
  background-image: url("https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swissimage-product/default/current/3857/13/4262/2912.jpeg");
}

/* Bouton des sentiers */
.ctrl-sentiers button {
  display: grid;
  place-items: center;
}
.ctrl-sentiers svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctrl-sentiers .chemin {
  stroke: var(--t23);
  stroke-width: 2.2;
  stroke-dasharray: 3 3;
}
.ctrl-sentiers .barre {
  stroke: var(--encre);
  stroke-width: 2;
  display: none;
}
.ctrl-sentiers button[aria-pressed="false"] .chemin {
  stroke: var(--encre-3);
}
.ctrl-sentiers button[aria-pressed="false"] .barre {
  display: inline;
}

/* Légende */
.ctrl-legende {
  width: 232px;
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
  font: 12px/1.35 var(--texte);
  color: var(--encre);
}
.legende-bouton {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px 8px 12px;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
}
.legende-bouton svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
/* Repliée (par défaut) : une puce « Légende » (direction Topo). */
.ctrl-legende[data-ouverte="false"] {
  width: auto;
  border-radius: var(--r-plein);
}
.ctrl-legende[data-ouverte="false"] .legende-bouton {
  padding: 6px 10px 6px 14px;
  border-radius: var(--r-plein);
}
.ctrl-legende[data-ouverte="false"] .legende-corps {
  display: none;
}
.ctrl-legende[data-ouverte="false"] .legende-bouton svg {
  transform: rotate(-90deg);
}
.legende-corps {
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding: 0 12px 10px;
}
/* Puce « Fond de carte seulement » (RG-DON-08) : sous la puce Légende, quand le centre de la vue est hors de la zone
   complète ; un toucher ouvre une feuille courte. */
.ctrl-couverture {
  width: auto;
  border: 1px solid var(--trait);
  border-radius: var(--r-plein);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
  font: 12px/1.35 var(--texte);
  color: var(--encre);
}
.ctrl-couverture[hidden] {
  display: none;
}
.couverture-bouton {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-plein);
  background: transparent;
  color: inherit;
  font-size: 12.5px;
  font-weight: 600;
}
.couverture-corps {
  display: none;
  width: 232px;
  padding: 0 12px 10px;
}
.ctrl-couverture[data-ouverte="true"] {
  border-radius: var(--r-s);
}
.ctrl-couverture[data-ouverte="true"] .couverture-corps {
  display: block;
}
.couverture-corps h3 {
  margin: 4px 0 6px;
  font: 600 13px/1.25 var(--texte);
}
.couverture-corps p {
  margin: 0 0 6px;
}
.legende-corps h3 {
  margin: 10px 0 4px;
  color: var(--encre-3);
  font: 600 10.5px/1.2 var(--etroite);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legende-corps h3 small {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.legende-corps ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legende-corps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 7px;
  padding: 1.5px 0;
  transition: opacity 0.2s;
}
.legende-corps .deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6px;
}
.legende-corps .deux-colonnes li {
  grid-template-columns: 18px 1fr;
  gap: 6px;
}
.legende-corps .deux-colonnes li.large {
  grid-column: 1 / -1;
}
.legende-corps .deux-colonnes .tache,
.legende-corps .deux-colonnes .trait {
  width: 18px;
}
/* Entrées qui ne concernent pas l'activité choisie : le symbole s'efface, le texte reste lisible (≥ 4,5:1). */
.legende-corps li.estompe > :first-child {
  opacity: 0.35;
}
.legende-corps li.estompe {
  color: var(--encre-3);
}
.trait {
  display: block;
  height: 4px;
  border-radius: 2px;
}
.trait.t1 {
  background: var(--t1);
  box-shadow: 0 0 0 1px #5a4300;
}
.trait.t23 {
  background: var(--t23);
}
.trait.t46 {
  background: var(--t46);
}
.trait.nc {
  height: 0;
  border-top: 3px dashed var(--nc);
  box-shadow: 0 -1.5px 0 1px #fff;
}
/* Chemin officiel français sans cotation : plein, de la largeur d'un non coté (3 px), sans liseré. */
.trait.balise {
  height: 3px;
  background: var(--balise);
}
.trait.ski {
  height: 0;
  border-top: 3px dashed var(--ski);
}
.trait.c2c {
  height: 3px;
  background: var(--c2c);
}
.trait.neige {
  height: 3px;
  background: var(--ski);
  box-shadow: 0 0 0 1px #fff;
}
.trait.choisi {
  height: 5px;
  margin: 0 2px;
  background: var(--t23);
  box-shadow:
    0 0 0 1.2px #ffffff,
    0 0 0 2.4px var(--encre);
}
/* Route ou chemin de desserte emprunté par un itinéraire proposé ou officiel : gris clair à liseré sombre. */
.trait.route {
  height: 5px;
  margin: 0 1px;
  background: #dcdcd5;
  box-shadow: 0 0 0 1.3px var(--encre);
}
.trait.arete {
  height: 1.5px;
  background: #5e5246;
}
/* Limite de la zone complète (RG-DON-08) : le fil fin du bord de la zone couverte, à l'encre des étiquettes. */
.trait.limite {
  height: 1.5px;
  background: var(--encre-2);
}
.tache {
  display: block;
  width: 26px;
  height: 14px;
  border-radius: 3px;
}
.tache.glacier {
  background: #f0f5f8;
  box-shadow: inset 0 0 0 1px var(--glacier);
}
.tache.rocher {
  background: #98979480;
  box-shadow: inset 0 0 0 1px #7c7b79;
}
.tache.eboulis {
  background: radial-gradient(circle, #3f3a36 1px, transparent 1.4px) 0 0 / 6px 6px;
}
/* Icônes de la carte (maîtres SVG de packages/map-style/icones) : à 18 px, comme sur la carte, où elles se lisent. */
.legende-corps li svg {
  width: 18px;
  height: 18px;
  justify-self: center;
}
.legende-corps li svg.echantillon {
  width: 26px;
  height: 10px;
  fill: none;
}
.legende-regle {
  margin: 6px 0 0;
  color: var(--encre-3);
  font-size: 11.5px;
  line-height: 1.35;
}
.legende-note {
  margin: 8px 0 0;
  color: var(--encre-3);
  font-size: 12px;
}
/* « Fermer la légende » : sur téléphone seulement, où la légende recouvre une grande part de la carte. */
.legende-fermer {
  display: none;
}

/* Bulles (popups) */
.maplibregl-popup-content {
  padding: 12px 14px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-flottant);
  font: 13px/1.45 var(--texte);
  color: var(--encre);
}
.maplibregl-popup-content {
  border: 1px solid var(--trait);
  background: var(--surface);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--surface);
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--surface);
}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--surface);
}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--surface);
}
.maplibregl-popup-close-button {
  width: 26px;
  height: 26px;
  font-size: 18px;
  color: var(--encre-3);
  border-radius: 0 var(--rayon) 0 8px;
}
.maplibregl-popup-close-button:hover {
  background: var(--fond-ui);
}
.bulle {
  max-width: 260px;
}
.bulle-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 6px 0;
  font-weight: 600;
}
.bulle p {
  margin: 0;
  color: var(--encre-2);
}
.bulle .bulle-fort {
  color: var(--encre);
  font-weight: 600;
}
.bulle-alerte {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid var(--encre);
  border-radius: 4px;
  background: var(--fond-ui);
  color: var(--encre-2);
  font-size: 12.5px;
}
.bulle .details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--trait);
  color: var(--encre-3);
  font-size: 12px;
}
.bulle .details div + div {
  margin-top: 2px;
}
/* Parking, point d'eau, point de vue : icône de la carte devant le titre (même taille que sur la carte). */
.bulle-titre svg {
  flex: none;
  width: 18px;
  height: 18px;
}
/* Bulle de survol (souris) : compacte, sans bouton, et ne capte pas le pointeur. */
.bulle-survol {
  pointer-events: none;
}
.bulle-survol .maplibregl-popup-content {
  padding: 8px 11px;
}
.bulle-survol .bulle-titre {
  margin: 0 0 3px;
}

/* Barre de chargement et état */
.barre-chargement {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.barre-chargement.actif::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  background: var(--action);
  animation: glissement 1.1s ease-in-out infinite;
}
@keyframes glissement {
  to {
    left: 100%;
  }
}
#etat {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 4;
  max-width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: var(--r-s);
  background: var(--surface-inverse);
  color: var(--sur-surface-inverse);
  font-size: 12px;
  box-shadow: var(--ombre-flottant);
}
#etat:not([data-etat="erreur"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Téléphone : panneau du bas qu'on remonte ---------- */
@media (max-width: 760px) {
  .appli {
    display: block;
  }
  .zone-carte {
    position: fixed;
    inset: var(--decalage-haut, 0px) 0 0;
  }
  .panneau {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 168px;
    max-height: calc(100dvh - var(--decalage-haut, 0px) - 8px);
    border-right: 0;
    border-top: 1px solid var(--trait);
    border-radius: var(--r-l) var(--r-l) 0 0;
    box-shadow: 0 -2px 18px rgba(23, 25, 27, 0.16);
    transition: height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .panneau.glisse {
    transition: none;
  }
  .poignee {
    display: grid;
    place-items: center;
    height: 44px; /* cible tactile ≥ 44 px */
    flex: none;
    cursor: grab;
    touch-action: none;
  }
  .poignee span {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--trait-2);
  }
  .entete {
    padding: 0 14px 12px;
    touch-action: none;
  }
  .entete input,
  .entete button {
    touch-action: manipulation;
  }
  /* Le repli du panneau n'existe qu'à ordinateur ; la marque est passée dans la barre des sections. */
  .entete-actions {
    display: none;
  }
  /* Cran du bas de la feuille (décision de Tibo du 16.10.2026) : la poignée, un titre, une ligne de résumé, et aucun
     bouton d'action. Les activités, « Tracer » et « Trouver une rando » n'apparaissent qu'au cran suivant. */
  .panneau[data-feuille="bas"] .activites,
  .panneau[data-feuille="bas"] .recherche-ligne {
    display: none;
  }
  .panneau[data-feuille="bas"] .feuille-resume {
    display: grid;
    gap: 2px;
    padding-bottom: 2px;
  }
  .feuille-resume-titre {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--encre);
  }
  .feuille-resume-ligne {
    font-size: 0.84rem;
    color: var(--encre-3);
  }
  .activites {
    margin-bottom: 10px;
    padding: 3px;
  }
  /* Cibles tactiles ≥ 44 px : boutons, puces, liens d'action, contrôles de la carte */
  .activites button,
  .recherche-ligne > button,
  .fiche-actions button,
  .retour,
  .bouton-secondaire,
  .lien-sommet,
  .legende-bouton,
  .couverture-bouton {
    min-height: 44px;
  }
  /* « Tracer » et « Trouver une rando » se partagent la ligne laissée par la recherche (passée sur la carte). */
  .recherche-ligne > button {
    flex: 1;
    justify-content: center;
    min-width: 44px;
  }
  .recherche-ligne .bouton-suggerer .libelle-long {
    display: inline;
  }
  /* La recherche est montée dans la barre des sections : la légende remonte en haut de la carte. */
  .barre-carte {
    top: 10px;
    left: 10px;
    right: 72px;
    max-width: none;
  }
  .repere-lieu-etiquette {
    padding: 0 0 0 14px;
  }
  .repere-lieu-fermer {
    width: 44px;
    height: 44px;
    margin-left: 0;
  }
  .filtre-texte input,
  .filtres select {
    height: 44px;
  }
  .filtre-texte svg {
    top: 14px;
  }
  .retour {
    margin-bottom: 4px;
  }
  .groupe-bouton,
  .iti-action {
    min-height: 44px;
  }
  .iti-lien a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Lien vers Camptocamp (itinéraires sans tracé) : une ligne de 44 px */
  .sans-trace a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Liens de source et de licence dans le texte : zone de toucher agrandie, sans changer la mise en page */
  .iti-source a {
    padding: 15px 0;
  }
  .aide-cot {
    width: 44px;
    height: 44px;
    margin: -12px -10px -12px -4px;
  }
  .maplibregl-ctrl-group button {
    width: 44px;
    height: 44px;
  }
  /* Attributions repliées derrière ⓘ (app.js) : bouton de 44 px */
  .maplibregl-ctrl-attrib.maplibregl-compact {
    min-height: 40px;
    padding-right: 44px;
    border-radius: 22px;
  }
  .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
    width: 44px;
    height: 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
  }
  /* Légende ouverte : au-dessus des autres contrôles du haut, avec son bouton « Fermer » en bas. */
  .maplibregl-ctrl-top-left:has(.ctrl-legende[data-ouverte="true"]) {
    z-index: 4;
  }
  .legende-fermer {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    border: 1px solid var(--trait-2);
    border-radius: var(--r-s);
    background: transparent;
    color: var(--encre);
    font-size: 14px;
    font-weight: 600;
  }
  /* Pendant la saisie (sections.css : la recherche couvre la barre, les résultats tout l'écran sous elle) : la
     feuille du bas est masquée ; elle garde sa hauteur, retrouvée en quittant le champ. */
  .appli.en-saisie .panneau {
    visibility: hidden;
  }
  /* Éditeur ouvert : sa barre d'outils occupe le haut de l'écran, la légende passe dessous. */
  body.traceur-actif .barre-carte {
    top: 66px;
  }
  body.traceur-actif .maplibregl-ctrl-top-left {
    top: 56px;
  }
  .pied {
    display: none;
  }
  .ctrl-legende {
    width: 214px;
  }
  .couverture-corps {
    width: 214px;
  }
  /* La légende tient au-dessus de la feuille basse (app.js la pose en bas à l'ouverture). */
  .legende-corps {
    max-height: calc(100dvh - var(--decalage-haut, 0px) - var(--decalage-bas, 168px) - 150px);
  }
  .fond-bouton {
    width: 52px;
    height: 52px;
  }
  .fond-menu {
    right: 60px;
  }
  .fond-option {
    width: 76px;
    height: 60px;
  }
  .maplibregl-ctrl-bottom-left,
  .maplibregl-ctrl-bottom-right {
    bottom: var(--decalage-bas, 168px);
    transition: bottom 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  #etat {
    bottom: calc(var(--decalage-bas, 168px) + 40px);
  }
}

/* Sur un téléphone, le titre d'une fiche prend la taille de celui de la page Météo : à 360 px, le mot le plus long du
   catalogue tient dans la colonne. */
@media (max-width: 430px) {
  .fiche-titre {
    font-size: 34px;
    line-height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}