/* « Mes randos » (mesrandos.js) : une page de données dense (sections.css) dont la liste est un tableau — une rando
   par ligne, ses chiffres à droite, ses actions au bout. « Ouvrir » montre la rando dans une carte posée sur la carte. */

.mr-actions,
.mr-sous {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mr-sous {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--fond-ui);
}
.mr-action {
  padding: 5px 10px;
  border: 1px solid var(--trait-2);
  border-radius: 7px;
  background: var(--papier);
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 600;
}
.mr-action:hover,
.mr-action[aria-expanded="true"] {
  border-color: var(--action);
  color: var(--action-fonce);
}
.mr-action b {
  margin-right: 4px;
}
/* L'action principale d'une rando, à l'encre pleine (ADR 0029) ; les autres restent au trait. */
.mr-action[data-principal="true"] {
  border-color: var(--action);
  background: var(--action);
  color: var(--sur-action);
}
/* « Envoyer à la montre : GPX TCX » : un seul libellé d'export pour une rando (revue du 19.10.2026, G2). */
.mr-etiquette {
  color: var(--encre2);
  font-size: 12.5px;
}
/* « Juste me situer » : un lien discret, jamais une action principale (revue du 19.10.2026, B1). */
.mr-situer {
  margin: 6px 0 0;
}
.mr-lien {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--encre2);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mr-action[data-danger="true"] {
  border-color: #b3261e;
  background: #b3261e;
  color: #ffffff;
}
.mr-confirmer span {
  flex-basis: 100%;
  font-size: 13px;
}
.mr-message {
  margin: 0;
  color: var(--encre-2);
  font-size: 12.5px;
}
.mr-message:empty {
  display: none;
}
.mr-message[data-erreur="true"] {
  color: #b3261e;
}
.mr-vide {
  max-width: 46ch;
  margin: 24px auto;
  color: var(--encre-2);
  text-align: center;
}

/* Rando ouverte : dans le panneau, par-dessus sa liste, comme la feuille d'un itinéraire (revue du 19.10.2026, G11). */
.mr-fiche {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  box-sizing: border-box;
  padding: 14px 18px 12px;
  overflow-y: auto;
  border-top: 1px solid var(--filet);
  background: var(--papier);
  color: var(--encre);
}
.mr-nom {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .mr-nom:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.mr-fiche[hidden] {
  display: none;
}
.mr-fiche-tete {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mr-fiche-tete h2 {
  flex: 1;
  margin: 0;
  font: 400 28px/1.05 var(--police-titre); /* le titre d'une fiche du panneau, comme celui d'un itinéraire */
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.mr-fiche .saison-fermer {
  margin: -6px -8px 0 0;
}
/* La fiche garde son souffle propre : chiffres, date puis actions sous l'en-tête. */
.mr-fiche .mr-actions {
  margin-top: 10px;
}
/* Les quatre cases de la rando (maquette de la météo par jour) : distance, montée, descente, temps. */
.mr-cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0 0;
  padding: 10px 0;
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--filet);
}
.mr-cases div + div {
  padding-left: 10px;
  border-left: 1px solid var(--filet);
}
.mr-cases dt {
  color: var(--encre-3);
  font: 600 10.5px/1.2 var(--police-etroite);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mr-cases dd {
  margin: 4px 0 0;
  font: 600 20px/1 var(--police-etroite);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mr-cases dd small {
  margin: 0 1px 0 2px;
  color: var(--encre-2);
  font: 500 12px/1 var(--police);
  letter-spacing: 0;
}
.mr-fiche-chiffres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
.mr-date {
  margin: 0;
  color: var(--encre-3);
  font-size: 12.5px;
}
/* Une copie : l'étiquette qui la distingue de la rando reçue dont elle vient (ADR 0084). */
.mr-copie {
  display: inline-block;
  margin: 0 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--creux);
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
/* Le bloc Course : la fiche préparée, la ligne de météo (meteo.css), puis « Préparer la course ». */
.mr-course {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--encre);
}
.mr-course > .mr-action {
  margin-top: 12px;
  min-height: 36px;
}
.mr-profil {
  margin: 8px 0 0;
}
.mr-profil svg {
  display: block;
  width: 100%;
  height: 64px;
}
.mr-profil-surface {
  fill: var(--graphe-aplat);
}
.mr-profil-ligne {
  fill: none;
  stroke: var(--graphe-profil);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.mr-avertissement,
.mr-attributions {
  margin: 8px 0 0;
  color: var(--encre-3);
  font-size: 11.5px;
}

@media (max-width: 760px) {
  .mr-corps {
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .mr-action {
    min-height: 44px;
  }
  /* Dans la feuille du bas du téléphone, la rando recouvre la liste comme sur ordinateur. */
  .mr-fiche {
    padding-inline: var(--e-l);
  }
}