/* Traceur d'itinéraire (UC-ITI-01) : panneau, barre d'outils, bulles et curseurs. Mêmes jetons que style.css. */

/* La zone de la carte garde les jetons clairs dans les deux thèmes (style.css) : sa couleur de texte aussi, sinon
   tout ce qui y est posé (bulles, menus, barre, profil, messages) hérite de l'encre crème du thème sombre. */
.zone-carte {
  color: var(--encre);
}

/* ---------- Entrée « Tracer » dans l'en-tête ---------- */
.recherche-ligne {
  display: flex;
  gap: 8px;
  align-items: center;
}
.recherche-ligne .recherche {
  flex: 1;
  min-width: 0;
}
.bouton-tracer {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--action-fonce);
  font-size: 13.5px;
  font-weight: 600;
}
.bouton-tracer:hover {
  background: var(--action-doux);
}
.actions-entete {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.actions-entete .bouton-tracer {
  flex: 1;
  justify-content: center;
  height: 36px;
}
.bouton-tracer svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.traceur-actif .bouton-tracer:not(.bouton-suggerer),
.bouton-suggerer[aria-expanded="true"] {
  background: var(--action);
  border-color: var(--action);
  color: var(--sur-action);
}
.entete {
  position: relative;
}
.tracer-vers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--action);
  color: var(--sur-action);
  font-size: 13px;
  font-weight: 600;
}
.tracer-vers:hover {
  background: var(--encre-2);
}
/* Niveau de confiance des itinéraires proposés (RG-ITI-18) */
.confiance {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  vertical-align: 1px;
  white-space: nowrap;
}
.confiance-documente {
  background: var(--action-doux);
  color: var(--action-fonce);
}
.confiance-balise {
  background: var(--peche-doux);
  color: var(--peche-encre);
}
/* Aucun texte sous 12 px dans le traceur et les propositions (les <small> compris). */
.traceur small,
.suggestions-panneau small,
.tr-encart small,
.traceur-barre small {
  font-size: 12px;
}
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Panneau de l'éditeur ---------- */
.traceur {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tr-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--trait);
}
.tr-quitter {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 5px 8px 5px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre-2);
  font-size: 13px;
  font-weight: 500;
}
.tr-quitter:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.tr-quitter svg,
.tr-b svg,
.tr-segmente svg,
.tr-mode svg,
.tr-suppr svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tr-nom {
  flex: 1;
  min-width: 0;
}
.tr-nom input {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: 400 18px var(--titre);
  outline: none;
}
.tr-nom input:hover {
  border-color: var(--trait);
}
.tr-nom input:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-doux);
}
.tr-dyn {
  padding: 4px 0 8px;
}
.tr-bloc {
  padding: 10px 18px;
}
.tr-libelle {
  margin-bottom: 6px;
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 600;
}
.tr-libelle small {
  color: var(--encre-3);
  font-weight: 400;
}
/* Résumé des réglages (« Rando · T3 »), à droite du libellé : le même que sur le téléphone. */
.tr-libelle:has(.tr-reglages-puce) {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tr-reglages-puce {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--r-s);
  background: var(--survol);
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tr-aide {
  margin: 0;
  padding: 10px 18px;
  color: var(--encre-2);
  font-size: 13px;
}
.tr-bloc .tr-aide {
  padding: 6px 0 0;
}
.tr-ski p {
  margin: 0 0 6px;
  color: var(--encre-2);
  font-size: 12.5px;
}
.tr-ski a {
  font-weight: 600;
}

/* Plafond T1–T6, aux couleurs du balisage : non choisi, un contour et un filet de la couleur de la marque, texte
   lisible ; choisi, la marque pleine (badge de cotation), cerclée. */
.tr-plafond {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.tr-t {
  height: 30px;
  border: 0;
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 800;
}
.tr-t.cot-t1 {
  --filet: var(--t1);
}
.tr-t.cot-t23 {
  --filet: var(--t23);
}
.tr-t.cot-t46 {
  --filet: var(--t46);
}
.tr-t:not([aria-checked="true"], [aria-pressed="true"]) {
  background: var(--papier);
  color: var(--encre);
  box-shadow:
    inset 0 0 0 1px var(--trait-2),
    inset 0 -4px 0 var(--filet, var(--trait-2));
}
.tr-t:not([aria-checked="true"], [aria-pressed="true"]):hover:not(:disabled) {
  background: var(--survol);
}
.tr-t[aria-checked="true"],
.tr-t[aria-pressed="true"] {
  box-shadow:
    0 0 0 1px var(--bord-badge),
    0 0 0 2px var(--papier),
    0 0 0 4px var(--encre);
}

/* Statistiques */
.tr-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
  margin: 4px 18px 8px;
  padding: 12px;
  border-radius: var(--rayon);
  background: var(--fond-ui);
}
.tr-stats div {
  min-width: 0;
}
.tr-stats dt {
  color: var(--encre-3);
  font-size: 12px;
}
.tr-stats dt small {
  font-size: 12px;
}
.tr-stats dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tr-stats .tr-stat-fort dd {
  font-size: 16px;
  font-weight: 700;
}
.tr-stats .cot {
  min-width: 0;
  height: auto;
  min-height: 22px;
  padding: 5px 7px;
  white-space: normal;
}
.tr-stats dd:has(.cot) {
  white-space: normal;
}
.tr-stats-vide p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--encre-2);
}
.tr-partiel {
  margin-left: 4px;
  color: var(--encre-3);
  font-size: 12px;
  font-weight: 500;
}

/* Alertes */
.tr-alertes {
  margin: 0;
  padding: 0 18px;
  list-style: none;
}
.tr-alerte {
  margin: 0 0 8px;
  padding: 9px 11px;
  border-left: 3px solid var(--encre-2);
  border-radius: 6px;
  background: var(--fond-ui);
  font-size: 12.5px;
}
.tr-alerte p {
  margin: 0;
  color: var(--encre-2);
}
.tr-alerte-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-weight: 600;
}
.tr-alerte-ferme {
  border-left-color: var(--fermeture);
}
.tr-alerte-attente {
  border-left-color: var(--trait-2);
}
.tr-alerte-ml {
  border-left-color: var(--c2c);
}
.tr-alerte-nc {
  border-left-color: var(--nc);
}
.tr-alerte-auto {
  border-left-color: var(--peche-encre);
  background: var(--peche-doux);
}
.tr-source {
  margin-top: 2px !important;
  color: var(--encre-3) !important;
  font-size: 12px;
}
.tr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tr-actions button,
.tr-secondaire {
  padding: 5px 10px;
  border: 1px solid var(--trait-2);
  border-radius: 7px;
  background: var(--papier);
  font-size: 12.5px;
  font-weight: 500;
}
.tr-actions button:hover,
.tr-secondaire:hover {
  background: var(--survol);
}
.tr-actions .tr-principal,
.tr-principal {
  padding: 6px 14px;
  border: 1px solid var(--action);
  border-radius: var(--r-s);
  background: var(--action);
  color: var(--sur-action);
  font-size: 13px;
  font-weight: 600;
}
.tr-actions .tr-principal:hover,
.tr-principal:hover {
  background: var(--encre-2);
}
.tr-principal:disabled {
  border-color: var(--trait-2);
  background: var(--fond-ui);
  color: var(--encre-3);
  cursor: not-allowed;
}

/* Suggestions (extension 1d) */
.tr-suggestions h3 {
  margin: 0;
  font-size: 13px;
}
.tr-mention {
  margin: 2px 0 8px;
  color: var(--peche-encre);
  font-size: 12px;
  font-weight: 600;
}
.tr-suggestions ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tr-suggestions li + li {
  margin-top: 4px;
}
.tr-suggestions li:not(.sg-ligne) button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--papier);
  text-align: left;
}
.tr-suggestions li:not(.sg-ligne) button:hover {
  border-color: var(--action);
  background: var(--survol);
}
.tr-suggestions .cot {
  grid-row: span 2;
  align-self: center;
}
.tr-sugg-titre {
  font-weight: 600;
  font-size: 13px;
}
.tr-sugg-meta {
  color: var(--encre-3);
  font-size: 12px;
}

.tr-suggestions > .tr-principal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}
.tr-suggestions > .tr-principal svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.tr-suggestions .tr-libelle {
  margin: 8px 0 4px;
}
.tr-suggestions .tr-actions {
  margin: 0 0 6px;
}
.tr-suggestions button[aria-current="true"] {
  border-color: var(--action);
  box-shadow: inset 3px 0 0 var(--action);
}
.tr-suggestions .tr-mention {
  margin-top: 10px;
}
.tr-lien {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-size: 12.5px;
  font-weight: 600;
}
.tr-lien:hover {
  text-decoration: underline;
}
.tr-attente-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-attente-ligne .tr-lien {
  margin: 0 0 0 auto;
}
.tr-roue {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--action-doux);
  border-top-color: var(--action);
  border-radius: 50%;
  animation: tr-tourne 0.8s linear infinite;
}
@keyframes tr-tourne {
  to {
    transform: rotate(360deg);
  }
}
.traceur-attente {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: var(
    --surface-inverse
  ); /* posé sur la carte : le thème clair reste épinglé sur .zone-carte */
  color: var(--sur-surface-inverse);
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: var(--ombre-flottant);
}
.traceur-attente .tr-roue {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}
.traceur-attente button {
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.traceur-attente button:hover {
  background: rgba(255, 255, 255, 0.28);
}
.traceur-menu .tr-actions {
  margin: 6px 0 8px;
}
.tr-menu-point {
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre-2);
  font-size: 12.5px;
}
.tr-menu-point:hover {
  color: var(--encre);
  text-decoration: underline;
}

/* « Trouver une rando » : réglages (zone ou sommet visé, étapes, accès, durée, difficulté) */
.zr {
  margin: 2px 0 10px;
}
.zr-ligne {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.zr-ligne > span {
  color: var(--encre-2);
  font-weight: 600;
}
.zr-ligne .tr-actions {
  margin: 0;
  gap: 4px;
}
.zr-ligne .tr-actions button {
  padding: 4px 8px;
}
.zr-ligne .tr-actions button[aria-pressed="true"] {
  border-color: var(--action);
  background: var(--action-doux);
  color: var(--action-fonce);
  font-weight: 600;
}
/* Cible saisie au clavier (distance, dénivelé) : même facture que les champs du formulaire. */
.zr-nombre {
  width: 68px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--trait-2);
  border-radius: 7px;
  background: var(--papier);
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.zr-nombre:focus {
  border-color: var(--action);
}
.zr-ligne > div > small,
.zr-valeur small {
  margin-left: 4px;
  color: var(--encre-3);
  font-weight: 400;
}
/* Valeur de la cible (distance, dénivelé), sous ses puces */
.zr-valeur {
  display: block;
  margin-top: 5px;
}
.zr-plafond + .zr-note {
  margin: 4px 0 0;
}
.zr-ligne > span small {
  font-weight: 400;
  color: var(--encre-3);
}
.zr-note {
  color: var(--encre-3);
  font-size: 12px;
}
.zr-plafond {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.zr-plafond .tr-t {
  height: 28px;
  font-size: 12px;
}
.tr-bloc-ski {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--fond-ui);
  font-size: 12.5px;
}
.tr-bloc-ski p {
  margin: 0 0 4px;
  color: var(--encre-2);
}
.tr-bloc-ski a {
  font-weight: 600;
}
.zr-chercher {
  width: 100%;
  margin-top: 4px;
}
.zr-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 10px;
  color: var(--encre-2);
  font-size: 12.5px;
}
.zr-resume .tr-lien {
  margin: 0;
  font-size: 12.5px;
}
.zr-zone {
  align-items: start;
}
.zr-zone > span {
  padding-top: 5px;
}
.zr-zone .zr-note {
  margin: 4px 0 0;
  line-height: 1.4;
}
.zr-consigne {
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--action-doux);
  color: var(--action-fonce) !important;
  font-weight: 600;
}
.zr-zone .tr-lien {
  margin: 0;
  font-size: 12px;
}
.zr-ligne > span small {
  color: var(--encre-3);
  font-weight: 400;
}
.zr-etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.zr-etape {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 2px 2px 3px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
  font-size: 12px;
}
.zr-etape b {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--peche-encre);
  color: var(--papier);
  font-size: 12px;
}
.zr-etape button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--encre-3);
  font-size: 14px;
  line-height: 1;
}
.zr-etape button:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.zr-etape-ajout {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.zr-etape-ajout .zr-recherche-boite {
  flex-basis: 100%;
}
.zr-etape-ajout > button {
  flex: none;
  padding: 5px 8px;
  border: 1px solid var(--trait-2);
  border-radius: 7px;
  background: var(--papier);
  font-size: 12px;
}
.zr-recherche-boite {
  position: relative;
  flex: 1;
  min-width: 0;
}
.zr-recherche {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--trait-2);
  border-radius: 7px;
  background: var(--papier);
  font-size: 12.5px;
  outline: none;
}
.zr-recherche::placeholder {
  color: var(--encre-3);
}
.zr-recherche:focus {
  border-color: var(--action);
}
.zr-resultats {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 2;
  margin: 0;
  padding: 4px;
  border-radius: 8px;
  background: var(--papier);
  box-shadow: var(--ombre-flottant);
  list-style: none;
}
.zr-resultats button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 12.5px;
  text-align: left;
}
.zr-resultats button:hover {
  background: var(--survol);
}
.zr-resultats small {
  color: var(--encre-3);
  white-space: nowrap;
}
.sg-ordre {
  grid-column: 3;
  color: var(--encre-2);
  font-size: 12px;
}
.sg-ordre b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--peche-encre);
  color: var(--papier);
  font-size: 12px;
}
.zone-choix #carte canvas.maplibregl-canvas {
  cursor: crosshair !important;
}
.poignee-zone {
  border-radius: 50%;
  cursor: grab;
  box-shadow: var(--ombre-1);
}
.poignee-zone:active {
  cursor: grabbing;
}
.poignee-centre {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  background: var(--action);
}
.poignee-centre::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}
.poignee-bord {
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--action);
  background: #fff;
  cursor: ew-resize;
}

/* Formulaire et propositions (panneau ou feuille du bas, éditeur) : jetons du panneau, clairs ou sombres */
.suggestions-panneau {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 18px;
}
.suggestions-panneau .sg-entete h2 {
  font: 400 18px/1.25 var(--titre);
}
.sg-entete {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.sg-entete h2,
.sg-entete h3 {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.sg-fermer {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--encre-3);
}
.sg-fermer:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.sg-fermer svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.sg-durees {
  margin: 0 0 8px;
}
.sg-durees button[aria-pressed="true"] {
  border-color: var(--action);
  color: var(--action-fonce);
  font-weight: 600;
}
.sg-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-ligne {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border: 1px solid var(--trait);
  border-radius: 9px;
  background: var(--papier);
}
.sg-ligne + .sg-ligne {
  margin-top: 6px;
}
.sg-ligne:hover {
  border-color: var(--trait-2);
}
.sg-ligne.vue {
  border-color: var(--encre);
  box-shadow: inset 3px 0 0 var(--encre);
}
.sg-corps {
  display: grid;
  flex: 1;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  padding: 8px 4px 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
}
.sg-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--papier);
  box-shadow: inset 0 0 0 1.5px var(--encre);
  font-size: 12px;
  font-weight: 700;
}
.sg-ligne.vue .sg-num {
  background: var(--encre);
  color: var(--papier);
}
.sg-corps .cot {
  min-width: 34px;
}
.sg-titre {
  font-size: 13px;
  font-weight: 600;
}
.sg-par {
  color: var(--encre-2);
  font-weight: 500;
}
.sg-meta,
.sg-mention {
  grid-column: 3;
  font-size: 12px;
}
.sg-meta {
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.sg-meta span {
  white-space: nowrap;
}
.sg-mention {
  color: var(--peche-encre);
}
.sg-meta strong {
  color: var(--encre);
  font-weight: 700;
}
.sg-ecart {
  color: var(--encre-2);
  white-space: nowrap;
}
.sg-ecart.proche {
  color: var(--action-fonce);
  font-weight: 600;
}
/* Une seule mention en tête de liste (extension 1d1) */
.sg-avis {
  margin: 2px 0 8px;
  color: var(--peche-encre);
  font-size: 12px;
  font-weight: 600;
}
/* Plafond suggéré (moteur de graphe) : une ligne d'info, jamais appliquée seule ; le bouton relance la recherche. */
.sg-plafond {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 8px;
  padding: 7px 8px 7px 10px;
  border-radius: 8px;
  background: var(--fond-ui);
  color: var(--encre-2);
  font-size: 12.5px;
}
.sg-plafond span {
  flex: 1 1 200px;
}
.sg-plafond .tr-secondaire {
  flex: none;
}
.tr-aide + .sg-plafond {
  margin-top: 8px;
}
.zr-vers b {
  background: var(--encre);
}
.zr-vers b svg {
  width: 9px;
  height: 9px;
  fill: var(--papier);
}
.zr-vers small {
  color: var(--encre-2);
}

/* Téléphone : proposition choisie, en une ligne dans l'en-tête de la feuille */
.sg-ligne-mobile {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 2px 4px 2px 8px;
  border-radius: var(--rayon);
  background: var(--fond-ui);
}
.sg-ligne-mobile .sg-num {
  flex: none;
}
/* Ordinateur, panneau replié : la même ligne dans la barre de la carte, à la place de la pilule « Sommets et randos ». */
.sg-ligne-carte {
  flex: 0 1 460px;
  min-width: 0;
  margin-top: 0;
  border: 1px solid var(--trait);
  border-radius: 22px;
  background: var(--papier);
  box-shadow: var(--ombre-flottant);
}
.barre-carte:has(> .sg-ligne-carte:not([hidden])) > .deplier-panneau {
  display: none;
}
.sg-ligne-resume {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  text-align: left;
}
.sg-ligne-titre,
.sg-ligne-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-ligne-titre {
  font-size: 13px;
  font-weight: 600;
}
.sg-ligne-meta {
  color: var(--encre-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sg-nav {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.sg-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sg-nav:disabled {
  color: var(--encre-3);
  cursor: default;
}
.sg-ligne-mobile .sg-modifier {
  min-height: 44px;
  margin: 0;
}
.sg-modifier {
  flex: none;
  align-self: center;
  margin-right: 8px;
  padding: 5px 9px;
  border: 1px solid var(--action);
  border-radius: 7px;
  background: var(--papier);
  color: var(--action-fonce);
  font-size: 12px;
  font-weight: 600;
}
.sg-modifier:hover {
  background: var(--action);
  color: var(--sur-action);
}
/* « Modifier » et « Enregistrer » (dans Mes randos) l'un sous l'autre, à droite de la proposition. */
.sg-boutons {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin-right: 8px;
}
.sg-boutons .sg-modifier {
  margin-right: 0;
}
.sg-enregistrer {
  border-color: var(--trait-2);
  color: var(--encre-2);
}

/* Points de passage */
.tr-volet {
  margin: 4px 0 0;
  border-top: 1px solid var(--trait);
}
.tr-volet summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.tr-volet summary::-webkit-details-marker {
  display: none;
}
.tr-points {
  margin: 0;
  padding: 0 10px 6px 12px;
  list-style: none;
}
.tr-points li {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
}
.tr-points li.choisi {
  background: var(--peche-doux);
}
.tr-point {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}
.tr-point:hover {
  background: var(--survol);
}
.tr-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fond-ui);
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 700;
}
.tr-point-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.tr-point-alt {
  color: var(--encre-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tr-mode {
  display: grid;
  place-items: center;
  width: 24px;
  color: var(--encre-3);
}
.tr-mode svg {
  width: 15px;
  height: 15px;
}
.tr-mode-ml {
  color: var(--c2c);
}
.tr-suppr {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--encre-3);
}
.tr-suppr:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.tr-suppr svg {
  width: 15px;
  height: 15px;
}

/* Avertissement et sources */
.tr-pied {
  padding: 8px 18px 16px;
  color: var(--encre-3);
  font-size: 12px;
}
.tr-pied p {
  margin: 0 0 6px;
}
.tr-avertissement {
  color: var(--encre-2);
}
.tr-bandeau {
  margin: 8px 18px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--encre);
  color: var(--papier);
  font-size: 12.5px;
}

/* ---------- Barre d'outils flottante ---------- */
.traceur-barre {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: var(--papier);
  box-shadow: var(--ombre-flottant);
}
.tr-b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  min-width: 38px;
  justify-content: center;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre);
  font-size: 13px;
  font-weight: 500;
}
/* Outils libellés : l'icône au-dessus d'un mot court (les infobulles n'existent pas au toucher). */
.tr-b-libelle,
.tr-segmente button {
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.tr-b-export {
  color: var(--action-fonce);
}
.tr-b-mode {
  display: none;
}
.tr-b-mode[aria-pressed="true"] {
  background: var(--fond-ui);
  color: var(--c2c);
  box-shadow: inset 0 0 0 2px var(--c2c);
}
.tr-b-export[aria-disabled="true"] {
  color: var(--encre-3);
}
.tr-b:hover:not(:disabled) {
  background: var(--fond-ui);
}
.tr-b:disabled {
  color: var(--trait-2);
  cursor: default;
}
.tr-b-quitter {
  display: none;
}
.tr-sep {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--trait);
}
.tr-segmente {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--fond-ui);
}
.tr-segmente button {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--encre-2);
}
.tr-segmente button[aria-checked="true"] {
  background: var(--papier);
  color: var(--action-fonce);
  box-shadow: var(--ombre-1);
}
.tr-segmente button[data-v="MainLevee"][aria-checked="true"] {
  color: var(--c2c);
}

/* Ligne de résumé (téléphone, panneau en position basse), avec « Exporter » */
.traceur-resume {
  display: none;
}
.tr-resume-texte {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-resume-export {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--action);
  color: var(--sur-action);
  font-size: 13.5px;
  font-weight: 600;
}
.tr-resume-export[aria-disabled="true"] {
  background: var(--fond-ui);
  color: var(--encre-2);
}
.tr-resume-export svg,
.tr-b-export svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Choix du format d'export */
.tr-export-menu {
  position: absolute;
  z-index: 6;
  width: 260px;
  padding: 10px;
  border-radius: var(--rayon);
  background: var(--papier);
  box-shadow: var(--ombre-flottant);
}
.tr-export-titre {
  margin: 0 2px 6px;
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 600;
}
.tr-export-menu button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  background: var(--papier);
  font-size: 13px;
  text-align: left;
}
.tr-export-menu button + button {
  margin-top: 6px;
}
.tr-export-menu button:hover {
  border-color: var(--action);
  background: var(--survol);
}
.tr-export-menu b {
  color: var(--action-fonce);
}
.tr-export-menu span {
  color: var(--encre-2);
  font-size: 12px;
}

button ~ .tr-export-titre {
  margin-top: 12px;
}

/* Envoi au téléphone : QR code (SVG en image) et adresse en clair dessous */
.tr-qr {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
}
.tr-qr img {
  width: min(240px, 70vw);
  height: auto;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  image-rendering: pixelated;
}
.tr-qr-url {
  margin: 0 0 8px;
  text-align: center;
  font-size: 13px;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Avertissement (RG-ITI-11) et décision en cours : encarts, pas de voile sur la carte */
.tr-averti,
.tr-decision {
  padding: 12px 14px;
  border-left: 3px solid var(--encre-2);
  border-radius: 8px;
  background: var(--fond-ui);
}
.tr-dyn > .tr-averti {
  margin: 8px 18px 4px;
}
.tr-averti h3,
.tr-decision h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.tr-averti p,
.tr-decision p {
  margin: 0 0 10px;
  color: var(--encre-2);
  font-size: 13px;
}
.tr-decision {
  border-left-color: var(--t23);
}
.tr-decision-titre {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tr-decision-titre h3 {
  flex: 1;
}
.tr-encart {
  margin-top: 10px;
}
.tr-encart > * + * {
  margin-top: 8px;
}
.tr-effacer-tout {
  display: none;
}

/* ---------- Bulles, infos et boîte de dialogue ---------- */
/* Bulles de décision et menu du clic droit : au-dessus des contrôles de la carte (légende, fond, barre d'outils). */
.traceur-popup {
  z-index: 4;
}
.traceur-bulle p {
  margin-bottom: 8px;
}
.tr-choix {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tr-choix li + li {
  margin-top: 4px;
}
.tr-choix button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--trait-2);
  border-radius: 7px;
  background: var(--papier);
  font-size: 12.5px;
  text-align: left;
}
.tr-choix button:hover {
  border-color: var(--action);
  background: var(--survol);
}
.tr-choix li:first-child button {
  border-color: var(--action);
}
.tr-choix kbd {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--fond-ui);
  color: var(--encre-2);
  font: 600 12px var(--texte);
}
.traceur-info {
  position: absolute;
  left: 50%;
  bottom: 44px;
  z-index: 5;
  max-width: min(420px, calc(100% - 32px));
  padding: 8px 12px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: var(--encre);
  color: var(--papier);
  font-size: 12.5px;
  box-shadow: var(--ombre-flottant);
}
.traceur-info button {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.traceur-survol {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-inverse) 92%, transparent);
  color: var(--sur-surface-inverse);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.traceur-modale {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--voile);
}
.traceur-modale-boite {
  max-width: 420px;
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: var(--papier);
  box-shadow: var(--ombre-flottant);
}
.traceur-modale-boite h2 {
  margin: 0 0 8px;
  font-size: 17px;
}
.traceur-modale-boite p {
  margin: 0 0 14px;
  color: var(--encre-2);
}
.traceur-modale-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.traceur-modale-actions button {
  padding: 8px 16px;
  font-size: 13.5px;
}

/* Entrées de légende ajoutées pendant l'édition */
.trait.tr-ml {
  height: 4px;
  background: var(--c2c);
}
.trait.tr-attente {
  height: 0;
  border-top: 3px dashed var(--trait-2);
}

/* ---------- Curseurs et chargement ---------- */
.traceur-actif #carte canvas.maplibregl-canvas {
  cursor: crosshair !important;
}
.traceur-actif #carte [data-traceur="ligne"] canvas.maplibregl-canvas {
  cursor: copy !important;
}
.traceur-actif #carte [data-traceur="point"] canvas.maplibregl-canvas {
  cursor: grab !important;
}
.traceur-actif #carte [data-traceur="glisse"] canvas.maplibregl-canvas,
.traceur-actif #carte .maplibregl-canvas-container:active canvas.maplibregl-canvas {
  cursor: grabbing !important;
}
.barre-chargement.traceur-calcul::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  background: var(--action);
  animation: glissement 1.1s ease-in-out infinite;
}

/* ---------- Profil altimétrique ---------- */
.traceur-profil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* La hauteur est celle du graphique (--tp-h, posée par traceur.js : 180 px, 140 px sur téléphone, réglable de 100
     à 400 px) plus l'en-tête. */
  border-top: 1px solid var(--trait);
  background: var(--papier);
  box-shadow: 0 -2px 12px rgba(16, 24, 32, 0.08);
}
.traceur-profil[data-ouvert="false"] .tp-corps,
.traceur-profil[data-ouvert="false"] .tp-poignee {
  display: none;
}
/* Poignée du bord haut : règle la hauteur du graphique. Ordinateur : bande à cheval sur le bord, au-dessus du panneau. */
.tp-poignee {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 12px;
  cursor: ns-resize;
  touch-action: none;
}
.tp-poignee::before {
  content: "";
  width: 44px;
  height: 6px;
  margin-bottom: -2px;
  border: 1px solid var(--encre-3);
  border-radius: 3px;
  background: var(--papier);
}
.tp-poignee:hover::before,
.tp-poignee:focus-visible::before,
.tp-redimensionne .tp-poignee::before {
  border-color: var(--action);
  background: var(--action);
}
.tp-poignee:focus-visible {
  outline: none;
}
.tp-redimensionne {
  user-select: none;
}
.tp-entete {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 28px;
  padding: 0 12px 0 6px;
}
.tp-bascule {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
}
.tp-bascule::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.tp-bascule[aria-expanded="false"]::after {
  transform: translateY(1px) rotate(-135deg);
}
.tp-bascule:hover {
  background: var(--fond-ui);
}
/* Retour au tracé entier, visible seulement sous un zoom */
.tp-tout {
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--papier);
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tp-tout:hover {
  background: var(--fond-ui);
}
.tp-tout[hidden] {
  display: none;
}
/* Pente la plus forte du tracé, à côté du titre */
.tp-pente-max {
  color: var(--encre);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tp-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-left: auto;
  color: var(--encre-3);
  font-size: 12px;
}
.tp-legende span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tp-legende i {
  width: 12px;
  height: 9px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 32, 0.12);
}
.tp-corps {
  position: relative;
  flex: none;
  height: var(--tp-h, 180px);
  min-height: 0;
}
.tp-corps canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tp-dessus {
  cursor: crosshair;
  touch-action: pan-y;
}
.tp-bulle {
  position: absolute;
  top: 16px;
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-inverse) 92%, transparent);
  color: var(--sur-surface-inverse);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
/* --profil-total : hauteur du panneau du profil mesurée par traceur.js (replié ou ouvert) */
.traceur-profil-visible .maplibregl-ctrl-bottom-left,
.traceur-profil-visible .maplibregl-ctrl-bottom-right {
  bottom: var(--profil-total, 209px);
}
.traceur-profil-visible .traceur-info {
  bottom: calc(var(--profil-total, 209px) + 44px);
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .bouton-tracer {
    padding: 0 9px;
    gap: 4px;
  }
  .traceur-actif .traceur-resume {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .tr-pastille {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--t23);
  }
  .traceur-actif .bouton-tracer {
    display: none;
  }
  .traceur-barre {
    left: 8px;
    right: 8px;
    top: 8px;
    justify-content: space-between;
    transform: none;
  }
  .tr-b-quitter {
    display: inline-flex;
  }
  /* Barre d'outils à libellés et cibles de 44 px sur 374 px : le choix Sentiers / Main levée devient un interrupteur
     « Main levée » ; « Effacer » passe dans le volet des points, « Exporter » dans la ligne de résumé. */
  .tr-segmente,
  .tr-b-effacer,
  .tr-b-export,
  .tr-sep-export {
    display: none !important;
  }
  .tr-b-mode {
    display: inline-flex;
  }
  .tr-b-mode span {
    max-width: 3.6em;
    white-space: normal;
    text-align: center;
  }
  .tr-b-libelle svg {
    width: 16px;
    height: 16px;
  }
  .tr-effacer-tout {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 6px 18px;
  }
  .bouton-suggerer .libelle-long {
    display: none;
  }
  .traceur-info {
    display: flex;
    align-items: center;
    padding-block: 0;
  }
  .traceur-info button {
    min-height: 44px;
  }
  /* Formulaire et propositions dans la feuille : cibles de 44 px, « Chercher » toujours visible en bas. */
  .suggestions-panneau {
    padding: 6px 14px 18px;
    scroll-padding-bottom: 76px; /* sous « Chercher », toujours visible en bas */
  }
  .suggestions-panneau .sg-fermer {
    width: 44px;
    height: 44px;
  }
  .zr-ligne .tr-actions button,
  .zr-etape-ajout > button,
  .sg-durees button,
  .sg-modifier,
  .zr-chercher {
    min-height: 44px;
  }
  .zr-plafond .tr-t {
    height: 44px;
  }
  .zr-recherche {
    height: 44px;
    font-size: 16px;
  }
  .zr-nombre {
    height: 44px;
    font-size: 16px;
  }
  .zr-note .tr-lien,
  .zr-resume .tr-lien,
  .suggestions-panneau .tr-aide .tr-lien {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .suggestions-panneau .zr-chercher {
    position: sticky;
    bottom: 0;
    box-shadow:
      0 0 0 8px var(--creme),
      0 26px 0 8px var(--creme);
  }
  .traceur-actif .maplibregl-ctrl-top-left,
  .traceur-actif .maplibregl-ctrl-top-right {
    top: 62px;
  }
  .tr-entete .tr-quitter {
    display: none;
  }
  .zr-ligne {
    grid-template-columns: 78px 1fr;
  }
  .traceur-profil {
    position: static;
    border-bottom: 1px solid var(--trait);
    box-shadow: none;
  }
  /* Téléphone : la poignée est une rangée au-dessus de l'en-tête, dans le panneau (cible de 28 px). */
  .tp-poignee {
    position: static;
    align-items: center;
    height: 28px;
  }
  .tp-poignee::before {
    margin-bottom: 0;
  }
  .tp-corps {
    height: var(--tp-h, 140px);
  }
  .tp-entete {
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding: 0 12px 4px 6px;
  }
  .tp-bascule,
  .tp-tout {
    min-height: 44px;
  }
  .tp-legende {
    gap: 1px 6px;
    margin-left: 0;
  }
  .tp-long {
    display: none;
  }
  .tr-sep {
    display: none;
  }
  .traceur-barre .tr-b {
    min-width: 44px;
    padding: 0 4px;
  }
  .traceur-barre {
    gap: 2px;
    overflow-x: auto;
  }
  .tr-entete {
    padding-top: 6px;
  }
  /* Cibles de 44 px dans l'éditeur, les encarts, les menus et les poignées de la zone. */
  .tr-nom input,
  .tr-t,
  .tr-actions button,
  .tr-principal,
  .tr-secondaire,
  .tr-choix button,
  .tr-point,
  .tr-volet summary,
  .zr-resultats button,
  .tr-menu-point {
    min-height: 44px;
  }
  .tr-t {
    height: 44px;
  }
  .tr-actions button {
    min-width: 44px;
  }
  .traceur-attente button {
    min-height: 44px;
  }
  .tr-suppr,
  .tr-decision .sg-fermer,
  .traceur-popup .maplibregl-popup-close-button {
    width: 44px;
    height: 44px;
  }
  .traceur .tr-lien,
  .tr-encart .tr-lien {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .tr-menu-point {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .sg-nav {
    width: 44px;
  }
  .zr-etape {
    min-height: 44px;
  }
  .zr-etape button {
    width: 44px;
    height: 44px;
    margin: -2px -2px -2px -8px;
  }
  .poignee-zone {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .poignee-zone::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    box-shadow: var(--ombre-1);
  }
  .poignee-centre::before {
    inset: 11px;
    border: 3px solid #fff;
    background: var(--action);
  }
  .poignee-centre::after {
    inset: 19px;
  }
  .poignee-bord::before {
    inset: 14px;
    border: 2.5px solid var(--action);
    background: #fff;
  }
}

/* Fiche d'un sommet : « Tracer vers ce sommet » et « Trouver une rando vers ce sommet » côte à côte. */
.fiche-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Menu d'un point du tracé : infos, note (Markdown), actions, formulaire du repère (nom, emoji, note) */
.tr-pt {
  min-width: 220px;
  max-width: 270px;
}
.tr-pt-emoji-titre {
  font-size: 18px;
  line-height: 1;
}
.tr-pt-role {
  margin: -2px 0 6px;
  color: var(--encre-3) !important;
  font-size: 12px;
}
.tr-pt-infos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--trait);
}
.tr-pt-infos div {
  min-width: 0;
}
.tr-pt-infos dt {
  color: var(--encre-3);
  font-size: 11px;
}
.tr-pt-infos dd {
  margin: 0;
  color: var(--encre);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tr-pt-note {
  max-height: 150px;
  margin-top: 8px;
  padding: 6px 8px;
  overflow-y: auto;
  border-left: 3px solid var(--trait-2);
  border-radius: 4px;
  background: var(--fond-ui);
  color: var(--encre-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.tr-pt-note > :first-child {
  margin-top: 0;
}
.tr-pt-note > :last-child {
  margin-bottom: 0;
}
.tr-pt-note p,
.tr-pt-note ul,
.tr-pt-note ol {
  margin: 0 0 6px;
}
.tr-pt-note ul,
.tr-pt-note ol {
  padding-left: 18px;
}
.tr-pt-note h4,
.tr-pt-note h5,
.tr-pt-note h6 {
  margin: 6px 0 3px;
  color: var(--encre);
  font-weight: 600;
}
.tr-pt-note h4 {
  font-size: 14px;
}
.tr-pt-note h5 {
  font-size: 13.5px;
}
.tr-pt-note h6 {
  font-size: 13px;
}
.tr-pt-note a {
  color: var(--action-fonce);
  text-decoration: underline;
}
.tr-pt-note code {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--survol);
  font-size: 12px;
}
.tr-pt .tr-pt-suppr {
  margin-left: auto;
}
.tr-pt-champ {
  display: block;
  margin-top: 8px;
}
.tr-pt-champ > span {
  display: block;
  margin-bottom: 3px;
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
}
.tr-pt-champ small {
  color: var(--encre-3);
  font-weight: 400;
}
.tr-pt-champ input[type="text"],
.tr-pt-champ textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--trait-2);
  border-radius: 7px;
  background: var(--papier);
  color: var(--encre);
  font: inherit;
  font-size: 13px;
}
.tr-pt-champ textarea {
  resize: vertical;
}
.tr-pt-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tr-pt-emojis .tr-pt-emoji {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  background: var(--papier);
  font-size: 17px;
  line-height: 1;
}
.tr-pt-emojis .tr-pt-emoji:hover {
  background: var(--survol);
}
.tr-pt-emojis .tr-pt-emoji[aria-pressed="true"] {
  border-color: var(--action);
  background: var(--peche-doux);
  box-shadow: 0 0 0 1px var(--action);
}
.tr-pt-champ input.tr-pt-emoji-libre[type="text"] {
  width: 52px;
  height: 32px;
  padding: 0 4px;
  text-align: center;
}
.tr-point-emoji {
  font-size: 14px;
}
.tr-point-note {
  font-size: 11px;
}
@media (max-width: 760px) {
  .tr-pt-note {
    max-height: 110px;
  }
  .tr-pt-emojis .tr-pt-emoji {
    width: 44px;
    height: 44px;
  }
  .tr-pt-champ input.tr-pt-emoji-libre[type="text"] {
    width: 56px;
    height: 44px;
  }
  .tr-pt-champ input[type="text"],
  .tr-pt-champ textarea {
    min-height: 44px;
    font-size: 16px; /* moins de 16 px : le navigateur du téléphone zoome sur le champ */
  }
}
/* Téléphone : le formulaire du repère, en haut de l'écran (le clavier prend le bas). */
.tr-repere {
  place-items: start center;
  overflow-y: auto;
  padding: 10px;
  overscroll-behavior: contain;
}
.tr-repere .traceur-modale-boite {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: 14px 16px;
}
.tr-repere .tr-pt {
  min-width: 0;
  max-width: none;
}