/* Barre de sections et pages de l'application web (sections.js). Le vocabulaire visuel vient du paquet partagé des
   jetons (packages/jetons → jetons.css), comme sur le téléphone : aucune couleur ni aucune mesure n'est écrite ici à la
   main. La barre est posée en haut de l'écran, fixe comme la carte sur téléphone ; ce qu'elle couvre se décale de
   « --decalage-haut » (hauteur de la barre plus la sécurité du haut de l'écran).
   Direction Topo (ADR 0029) : une ligne de papier sur un filet, le mot sisum, les sections en texte seul (l'active
   à l'encre, soulignée d'un trait de 2 px posé sur le filet, comme une règle), la recherche, le compte de vos sommets. */

:root {
  --hauteur-barre: 56px;
  --decalage-haut: calc(var(--hauteur-barre) + env(safe-area-inset-top));
}

/* À ordinateur, la carte et son panneau sont dans le flux de « .appli » : ils démarrent sous la barre, sinon l'en-tête
   du panneau passe derrière elle. À téléphone, ils sont posés en « fixed » et comptent déjà le décalage. */
@media (min-width: 761px) {
  .appli {
    margin-top: var(--decalage-haut);
  }
}

.barre-sections {
  position: fixed;
  inset: 0 0 auto;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 36px;
  box-sizing: border-box;
  height: var(--decalage-haut);
  padding: env(safe-area-inset-top) 20px 0;
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
  color: var(--encre);
}

/* La marque : le mot sisum en tracés, sans couleur, à la taille de l'en-tête du site. Elle ramène à la Carte. */
.barre-sections .marque {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  color: var(--encre);
  text-decoration: none;
}
.barre-sections .marque:hover {
  text-decoration: none;
}
.barre-sections .logo {
  display: block;
  width: auto;
  height: 26px;
}

/* Les sections, en texte seul. Elles tiennent toute la hauteur de la barre : le trait de l'active se pose sur le filet. */
.barre-liens {
  display: flex;
  align-self: stretch;
  gap: 28px;
  min-width: 0;
}
.lien-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px; /* cible tactile, comme sur le téléphone */
  color: var(--encre-2);
  font: 500 14.5px/1 var(--police);
  text-decoration: none;
  white-space: nowrap;
}
/* Le lien de « Cartes », tant qu'il est masqué, ne prend aucune place : « display: flex » battrait l'attribut « hidden ». */
.lien-section[hidden] {
  display: none;
}
.lien-section[aria-current="page"] {
  color: var(--encre);
}
.lien-section[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--encre);
}
/* Un onglet n'est pas un lien de texte : « a:hover » (style.css) ne le souligne pas, l'encre suffit. */
.lien-section:hover {
  color: var(--encre);
  text-decoration: none;
}
.lien-section:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* ---------- La recherche, dans la barre ---------- */
.barre-sections .recherche {
  position: relative;
  flex: 0 1 420px;
  min-width: 0;
  margin-left: auto;
}
.recherche input {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 36px;
  border: 1px solid var(--filet);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font: 400 14px/1 var(--police);
  outline: none;
  text-overflow: ellipsis;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.recherche input::-webkit-search-cancel-button {
  display: none;
}
.recherche input::placeholder {
  color: var(--encre-3);
}
.recherche input:hover {
  border-color: var(--filet-fort);
}
.recherche input:focus {
  border-color: var(--encre);
  box-shadow: 0 0 0 3px var(--action-doux);
}
.recherche-icone {
  position: absolute;
  left: 11px;
  top: 10px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
/* « / » : le raccourci, rappelé tant que le champ est vide et sans le focus. */
.recherche-raccourci {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--filet);
  border-radius: var(--r-xs);
  color: var(--encre-3);
  font: 500 11.5px/1 var(--police);
  pointer-events: none;
}
.recherche input:not(:placeholder-shown) ~ .recherche-raccourci,
.recherche:focus-within .recherche-raccourci {
  display: none;
}
.recherche-effacer {
  position: absolute;
  right: 2px;
  top: 2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
}
.recherche-effacer:hover {
  background: var(--creux);
}
.recherche-effacer svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 2;
  stroke-linecap: round;
}
.recherche .resultats {
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  z-index: 20;
  max-height: min(460px, calc(100vh - 110px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
}

/* Sous 1 100 px, la recherche se réduit à sa loupe ; au focus, elle s'ouvre sur toute la barre. */
@media (max-width: 1100px) {
  .barre-sections .recherche {
    flex: none;
    width: 36px;
  }
  .barre-sections .recherche:not(:focus-within) input {
    padding: 0;
    color: transparent;
    cursor: pointer;
  }
  .barre-sections .recherche:not(:focus-within) input::placeholder {
    color: transparent;
  }
  .barre-sections .recherche:not(:focus-within) .recherche-effacer,
  .barre-sections .recherche-raccourci {
    display: none;
  }
  .barre-sections .recherche:focus-within {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top) + 10px);
    z-index: 3;
    width: auto;
  }
}

/* ---------- Le compte de vos sommets ---------- */
.compteur-collection {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 6px;
  color: var(--encre-2);
  font: 400 12.5px/1 var(--police);
  text-decoration: none;
  white-space: nowrap;
}
.compteur-collection[hidden] {
  display: none;
}
.compteur-collection:hover {
  color: var(--encre);
  text-decoration: none;
}
.compteur-collection svg {
  width: 11px;
  height: 10px;
  align-self: center;
  fill: var(--accent);
}
.compteur-nombre {
  color: var(--encre);
  font: 400 22px/1 var(--police-titre);
  font-variant-numeric: tabular-nums;
}
/* La recherche à droite de la barre : le compteur la suit. Sans elle (réduite), il garde sa marge. */
.barre-sections .recherche + .compteur-collection {
  margin-left: -16px;
}

/* ---------- Les pages : une section à la fois, sous la barre ---------- */
.pages {
  position: fixed;
  inset: var(--decalage-haut) 0 0;
  z-index: 6;
  display: none;
}
.appli:not([data-section="carte"]) > .pages {
  display: block;
}
/* Une section ouverte prend toute la place : la carte et son panneau restent derrière la barre. */
.appli:not([data-section="carte"]) > .panneau,
.appli:not([data-section="carte"]) > .zone-carte {
  display: none;
}
.page {
  height: 100%;
  overflow: hidden;
  background: var(--papier);
  color: var(--encre);
}
.page[hidden] {
  display: none;
}
/* Le « × » hérité des fenêtres n'a plus sa place sur une page : l'onglet Carte, la touche Échap et le Retour du
   navigateur ferment la section. */
.page .saison-fermer {
  display: none;
}
/* Les pages reprennent le dessin des fenêtres qu'elles remplaçaient, aux dimensions de l'écran près. */
.page.saison {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--papier);
}

/* ---------- L'en-tête commun d'une page ----------
   Un surtitre étroit en capitales, le titre en serif, une ligne de mention ou de chiffres, les actions à droite ; un
   filet d'encre le sépare du corps. Le même gabarit sert à Mes randos, Objectifs et Collection. L'intérieur est borné
   et centré (une ligne de texte ne traverse pas l'écran) ; les listes deviennent des tableaux denses. */
.page > .saison-cadre {
  max-width: 1180px;
  margin: 0 auto;
}
.page .saison-entete {
  padding: 26px 32px 18px;
}
.surtitre {
  display: block;
  margin: 0;
  color: var(--encre-3);
  font: var(--texte-surtitre-poids) var(--texte-surtitre-taille) / var(--texte-surtitre-hauteur)
    var(--texte-surtitre-police);
  letter-spacing: 0.1em;
  text-transform: var(--texte-surtitre-casse);
}
.page .saison-titre-ligne {
  flex-wrap: wrap;
  align-items: flex-end;
}
.page .saison-titre-ligne h2,
.page .mc-titre {
  margin: 8px 0 0;
  color: var(--encre);
  font: var(--texte-titre-ecran-poids) 46px/1 var(--police-titre);
  letter-spacing: -0.02em;
}
/* Sans surtitre au-dessus, le titre n'a pas besoin de sa marge du haut. */
.page .saison-entete > .saison-titre-ligne:first-child h2,
.page .mc-titre:first-child {
  margin-top: 0;
}
.page .saison-mention {
  margin: 10px 0 0;
  color: var(--encre-2);
  font-size: 13.5px;
}
/* Les actions d'une page, à droite de son titre : la principale à l'encre, l'autre en contour. À l'étroit, elles
   passent sous le titre. */
.actions-page {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-s);
  margin-left: auto;
}
.bouton-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font: 600 13.5px/1 var(--police);
  white-space: nowrap;
  cursor: pointer;
}
.bouton-page .ic-trait {
  width: 16px;
  height: 16px;
}
.bouton-page.plein {
  background: var(--action);
  color: var(--sur-action);
}
.bouton-page.plein:hover {
  background: var(--encre-2);
}
.bouton-page.tonal {
  border-color: var(--filet-fort);
  background: transparent;
  color: var(--encre);
}
.bouton-page.tonal:hover {
  background: var(--creux);
}
.page .saison-corps {
  padding: 0 32px var(--e-l);
}

/* Un tableau dense : en-tête collant pendant le défilement de la page, lignes à la cible du pouce, nombres
   alignés à droite pour que les colonnes de chiffres se comparent d'un coup d'œil. */
.tableau-dense {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tableau-dense caption {
  padding: var(--e-l) 0 var(--e-xs);
  color: var(--encre-3);
  font: 600 10.5px/16px var(--police-etroite);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.tableau-dense th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--e-xs) var(--e-s);
  border-bottom: 1px solid var(--encre);
  background: var(--papier);
  color: var(--encre-3);
  font: 600 10.5px/16px var(--police-etroite);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.tableau-dense td {
  height: var(--cible);
  padding: var(--e-xs) var(--e-s);
  border-bottom: 1px solid var(--filet);
  vertical-align: middle;
}
.tableau-dense tbody tr:hover td {
  background: var(--survol);
}
.tableau-dense .n {
  text-align: right;
  /* Sans cet écart, le nombre se lit comme collé aux boutons de la colonne suivante. */
  padding-right: var(--e-l);
}
.tableau-dense .nom {
  font-weight: 600;
}
.tableau-dense .sous {
  display: block;
  color: var(--encre-2);
  font-size: 12px;
  line-height: 16px;
}

/* Entre téléphone et ordinateur : la barre se serre. */
@media (max-width: 960px) {
  .barre-sections {
    gap: 20px;
  }
  .barre-liens {
    gap: 18px;
  }
}

@media (max-width: 760px) {
  .barre-sections {
    gap: 14px;
    padding-inline: 12px;
  }
  /* Le mot reste, plus petit, pour laisser la place aux quatre sections. Le compteur se lit dans la Collection. */
  .barre-sections .logo {
    height: 20px;
  }
  .compteur-collection {
    display: none;
  }
  .barre-liens {
    flex: 1;
    gap: 14px;
    justify-content: space-between;
  }
  .lien-section {
    font-size: 13.5px;
  }
  .barre-sections .recherche:focus-within {
    left: 8px;
    right: 8px;
  }
  /* Pendant la saisie, les résultats prennent tout l'écran sous la barre. */
  .appli.en-saisie .recherche .resultats {
    position: fixed;
    top: var(--decalage-haut);
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }
  .appli.en-saisie .resultat {
    min-height: 44px;
  }
  .recherche input {
    font-size: 16px; /* sous 16 px, le navigateur du téléphone zoome sur le champ */
  }
  .recherche-effacer {
    top: -4px;
    right: -4px;
    width: 44px;
    height: 44px;
  }
  /* La sécurité du haut est déjà rendue par la barre : l'en-tête d'une page ne la compte pas une seconde fois. */
  .page .saison-entete {
    padding: 18px var(--e-l) 12px;
  }
  .page .saison-titre-ligne h2,
  .page .mc-titre {
    font-size: 38px;
  }
  .page .saison-corps {
    padding-inline: var(--e-l);
  }
  .bouton-page {
    min-height: 44px; /* cible tactile, comme sur le téléphone */
  }
  /* À téléphone, le tableau ne garde que ses colonnes utiles : celles marquées « serre » s'effacent et les autres
     reprennent la place, la ligne restant une cible du pouce. */
  .tableau-dense .serre {
    display: none;
  }
  .tableau-dense th,
  .tableau-dense td {
    padding-inline: var(--e-xs);
  }
}

/* Le mot, les quatre sections et la loupe tiennent ensemble dès 360 px, la largeur courante d'un téléphone. */
@media (max-width: 430px) {
  .barre-sections {
    gap: 8px;
    padding-inline: 10px;
  }
  .barre-sections .logo {
    height: 18px;
  }
  .barre-liens {
    gap: 8px;
  }
  .lien-section {
    font-size: 12.5px;
  }
}

/* La carte posée par-dessus la page d'une sortie (« Voir sur la carte ») : un bandeau nomme la trace et ramène à la
   sortie (revue de l'interface du 19.10.2026). Papier, filet, texte à l'encre ; il ne se voit que sur cette carte-là. */
.bandeau-retour {
  position: absolute;
  z-index: 5;
  top: var(--e-m);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--e-m);
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  padding: 6px 6px 6px var(--e-l);
  border: 1px solid var(--filet);
  border-radius: var(--r-plein);
  background: var(--surface);
  color: var(--encre);
  box-shadow: var(--ombre-1);
}
.bandeau-retour[hidden],
.appli:not([data-sous-la-carte="sortie"]) .bandeau-retour {
  display: none;
}
.bandeau-retour-titre {
  overflow: hidden;
  font-family: var(--police-titre);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bandeau-retour-bouton {
  flex: none;
  min-height: 36px;
  padding: 0 var(--e-l);
  border: 0;
  border-radius: var(--r-plein);
  background: var(--action);
  color: var(--sur-action);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 720px) {
  .bandeau-retour {
    top: 64px;
  }
  .bandeau-retour-bouton {
    min-height: 44px;
  }
}