/* utjb-parcours.css - Widget « Parcours » du Trail du Jura bernois.
   Charte : Design System UTJB v1.2 (vert fonce + bleu La Grandiose, une couleur par parcours,
   Open Sans, radius 14 px max, aucun degrade decoratif). Prefixe de classes : up- .
   Carte : charger maplibre-gl.css avant ce fichier (leaflet.css seulement pour le repli sans WebGL).

   DISPOSITION (v3, 29.09.2026). De haut en bas : en-tete, profil avec ses reperes et ses
   troncons, navigateur de zoom, carte, tableau. Trois etats poses par le script sur le bloc :
     .up-cote    carte a cote du profil (grille a trois colonnes, separateur au milieu) ;
     .up-plein   plein ecran (carte sur tout l'ecran, profil en tiroir, navigateur en haut) ;
     .up-etroit  bloc de moins de 720 px de large (remplace les requetes media : le bloc peut
                 vivre dans une colonne etroite d'un ecran large).

   ROBUSTESSE (29.09.2026, premier essai sur utjb.ch). Le widget vit dans la page d'un theme
   WordPress qui style les balises nues. Releve sur utjb.ch : « header { width: 100vw !important } »,
   boutons gris a bordure (y compris au survol et au focus), tableaux a bordures, marges sur p et
   dd, couleur des titres. Quatre regles en decoulent, a tenir :
     1. aucune balise header, section, aside, footer ou nav dans le widget (des div) ;
     2. CHAQUE selecteur commence par .utjb-parcours, pour passer devant les regles du theme ;
     3. une remise a zero des balises utilisees, en tete de fichier ;
     4. chaque bouton fixe lui-meme fond, couleur, bordure et marges, et les repete au survol
        et au focus (le theme colore « button:hover » et « button:focus »).
   Le mode sombre ne suit PAS le systeme du visiteur : le site est clair. Il ne s'active que sur
   demande, par data-theme="dark" sur la page ou sur le bloc. */

.utjb-parcours {
  --up-vert-fonce: #13353a;
  --up-bleu: #17a5b5;
  --up-fond: #f2f5f4;
  --up-carte: #ffffff;
  --up-texte: #13353a;
  --up-doux: #5a7176;
  --up-bord: #dde5e3;
  --up-rouge: #c0392b;
  --up-ligne: #13353a;          /* trait du profil */
  --up-grille: rgba(19, 53, 58, 0.14);
  --up-guide: rgba(19, 53, 58, 0.30);
  --up-ombre: 0 2px 8px rgba(19, 53, 58, 0.12);
  --up-c: #17a5b5;              /* couleur du parcours, posee par le script */
  --up-c-fond: rgba(23, 165, 181, 0.22);
  --up-marq-texte: #13353a;     /* texte des pastilles sur la couleur du parcours */
  --up-nav-fond: rgba(19, 53, 58, 0.07);
  --up-fort: #13353a;           /* poignees, tiroir : le ton le plus marque */
  --up-fort-texte: #ffffff;
  --up-voile: rgba(255, 255, 255, 0.92);
  --up-part: 0.5;               /* part du profil quand la carte est a cote */
  --up-dock-h: 0px;             /* hauteur du tiroir en plein ecran, posee par le script */
  display: block;
  position: relative;
  isolation: isolate;
  width: auto;
  max-width: 100%;
  margin: 0;
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--up-texte);
  background: var(--up-fond);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-sizing: border-box;
  overflow: hidden;
}
:root[data-theme="dark"] .utjb-parcours,
.utjb-parcours[data-theme="dark"] {
  --up-fond: #13353a; --up-carte: #1b4449; --up-texte: #ffffff; --up-doux: #b8c9c6; --up-bord: #2b565b;
  --up-ligne: #e8f0ef; --up-grille: rgba(255, 255, 255, 0.14); --up-guide: rgba(255, 255, 255, 0.32);
  --up-ombre: 0 2px 8px rgba(0, 0, 0, 0.35); --up-nav-fond: rgba(255, 255, 255, 0.10);
  --up-fort: #e8f0ef; --up-fort-texte: #13353a; --up-voile: rgba(27, 68, 73, 0.92);
  /* le rouge de la charte eclairci de moitie : il porte du texte (4,75:1 sur la carte sombre, 1,96 sans cela) */
  --up-rouge: #e09c95;
}

/* ---------- remise a zero, face au theme ---------- */
.utjb-parcours *, .utjb-parcours *::before, .utjb-parcours *::after { box-sizing: border-box; }
.utjb-parcours div, .utjb-parcours span, .utjb-parcours h2, .utjb-parcours h3, .utjb-parcours p,
.utjb-parcours dl, .utjb-parcours dt, .utjb-parcours dd, .utjb-parcours small, .utjb-parcours b,
.utjb-parcours strong, .utjb-parcours sup, .utjb-parcours label {
  margin: 0; padding: 0; border: 0; float: none; width: auto; max-width: none; min-width: 0;
  font-family: inherit; font-style: normal; letter-spacing: normal; text-transform: none;
  text-indent: 0; text-shadow: none; background: none; box-shadow: none;
}
.utjb-parcours div, .utjb-parcours p, .utjb-parcours dl, .utjb-parcours dt, .utjb-parcours dd { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.utjb-parcours table, .utjb-parcours thead, .utjb-parcours tbody, .utjb-parcours tr, .utjb-parcours th, .utjb-parcours td {
  margin: 0; padding: 0; border: 0; border-spacing: 0; background: none; font-family: inherit;
  letter-spacing: normal; text-transform: none; vertical-align: middle;
}
.utjb-parcours button, .utjb-parcours a {
  margin: 0; font-family: inherit; font-style: normal; letter-spacing: normal; text-transform: none;
  text-decoration: none; text-shadow: none; box-shadow: none; min-width: 0; min-height: 0;
  -webkit-appearance: none; appearance: none;
}
.utjb-parcours svg { max-width: none; }
.utjb-parcours img { max-width: none; border: 0; box-shadow: none; }
.utjb-parcours [hidden] { display: none !important; }
.utjb-parcours :focus-visible { outline: 3px solid var(--up-bleu); outline-offset: 2px; }

/* ---------- en-tete : titre, legende, telechargement, barrieres ---------- */
.utjb-parcours .up-entete { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.utjb-parcours .up-titre { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--up-texte); }
.utjb-parcours .up-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; font-size: 13px; line-height: 1.4; }
.utjb-parcours .up-controles-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-left: auto; }
.utjb-parcours .up-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--up-doux); }
.utjb-parcours .up-legende span { display: inline-flex; align-items: center; gap: 6px; color: var(--up-doux); font-size: 13px; }
.utjb-parcours .up-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--up-c); border: 2px solid var(--up-carte); box-shadow: 0 0 0 1px var(--up-doux); }
.utjb-parcours .up-legende i.eau { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.utjb-parcours .up-legende i.controle { border-radius: 3px; background: var(--up-carte); }
.utjb-parcours .up-legende i.depart { background: var(--up-vert-fonce); }
.utjb-parcours .up-btn,
.utjb-parcours a.up-btn:link, .utjb-parcours a.up-btn:visited {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--up-bord); background: var(--up-carte); color: var(--up-texte);
  font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  min-height: 34px; width: auto; transition: background 150ms, border-color 150ms;
}
.utjb-parcours .up-btn:hover, .utjb-parcours .up-btn:focus,
.utjb-parcours a.up-btn:hover, .utjb-parcours a.up-btn:focus { border-color: var(--up-bleu); background: var(--up-carte); color: var(--up-texte); }
.utjb-parcours .up-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-bascule { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--up-texte); }
.utjb-parcours .up-bascule span { color: var(--up-texte); font-size: 13px; font-weight: 600; }
.utjb-parcours .up-inter, .utjb-parcours .up-inter:hover, .utjb-parcours .up-inter:focus {
  display: inline-flex; align-items: center; flex: none; width: 40px; height: 22px; padding: 0 3px;
  border: 0; border-radius: 9px; background: #9fb0ad; color: inherit; font-size: 0; line-height: 1;
  cursor: pointer; transition: background 150ms;
}
.utjb-parcours .up-inter[aria-checked="true"], .utjb-parcours .up-inter[aria-checked="true"]:hover,
.utjb-parcours .up-inter[aria-checked="true"]:focus { background: var(--up-bleu); }
.utjb-parcours .up-inter-bouton { display: block; width: 16px; height: 16px; border-radius: 6px; background: #ffffff; box-shadow: 0 1px 2px rgba(19, 53, 58, 0.25); transition: transform 150ms; }
.utjb-parcours .up-inter[aria-checked="true"] .up-inter-bouton { transform: translateX(18px); }

/* ---------- la rangee : profil, navigateur, carte ---------- */
.utjb-parcours .up-rang { display: flex; flex-direction: column; gap: 10px; }
.utjb-parcours .up-col-profil { position: relative; min-width: 0; }
.utjb-parcours .up-col-carte { min-width: 0; }
.utjb-parcours .up-nav-rang { display: flex; justify-content: center; padding: 6px 0; min-width: 0; }
.utjb-parcours .up-separateur { display: none; }
.utjb-parcours .up-dock-bouton, .utjb-parcours .up-dock-bouton:hover, .utjb-parcours .up-dock-bouton:focus { display: none; }

/* carte a cote du profil */
.utjb-parcours.up-cote .up-rang {
  display: grid; align-items: stretch; gap: 10px 4px;
  grid-template-columns: calc(var(--up-part) * 100% - 10px) 12px minmax(0, 1fr);
  grid-template-areas: "profil sep carte" "nav nav nav";
}
.utjb-parcours.up-cote .up-col-profil { grid-area: profil; }
.utjb-parcours.up-cote .up-col-carte { grid-area: carte; }
.utjb-parcours.up-cote .up-nav-rang { grid-area: nav; }
.utjb-parcours.up-cote .up-separateur { grid-area: sep; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.utjb-parcours .up-separateur-poignee { display: flex; align-items: center; justify-content: center; padding: 9px 1px; border-radius: 9px; background: var(--up-fort); color: var(--up-fort-texte); }
.utjb-parcours .up-separateur-poignee svg { display: block; width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours.up-cote .up-profil { height: 100%; }
.utjb-parcours.up-cote .up-mapwrap { height: 100%; }
.utjb-parcours.up-cote .up-map { height: 100%; min-height: 440px; }

/* ---------- profil ---------- */
.utjb-parcours .up-profil { position: relative; background: var(--up-carte); border: 1px solid var(--up-bord); border-radius: 14px; padding: 8px 12px 6px; }
.utjb-parcours .up-barrieres { position: relative; z-index: 1; height: 44px; }
.utjb-parcours .up-barriere { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 0 0 3px; color: var(--up-rouge); }
.utjb-parcours .up-barriere-h { font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--up-texte); font-variant-numeric: tabular-nums; }
.utjb-parcours .up-barriere svg { display: block; flex: none; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-graphe { position: relative; z-index: 2; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.utjb-parcours .up-svg { display: block; width: 100%; overflow: visible; }
.utjb-parcours .up-svg text { font-family: "Open Sans", Arial, sans-serif; }
.utjb-parcours .up-svg .grille { stroke: var(--up-grille); stroke-width: 1; }
.utjb-parcours .up-svg .axe-txt { font-size: 12px; fill: var(--up-doux); font-variant-numeric: tabular-nums; }
.utjb-parcours .up-svg .ligne { fill: none; stroke: var(--up-ligne); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.utjb-parcours .up-svg .base { stroke: var(--up-guide); stroke-width: 1; }
.utjb-parcours .up-svg .guide { stroke: var(--up-guide); stroke-width: 1; stroke-dasharray: 3 3; }
.utjb-parcours .up-svg .barriere-ligne { stroke: var(--up-rouge); stroke-opacity: 0.75; stroke-width: 1; stroke-dasharray: 3 3; }

/* les pastilles sur le profil : les memes que sur la carte, un peu plus petites */
.utjb-parcours .up-marques { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.utjb-parcours .up-pm, .utjb-parcours .up-pm:hover, .utjb-parcours .up-pm:focus {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; font-size: 12px; font-weight: 400; line-height: 1;
  cursor: pointer; pointer-events: auto;
}
.utjb-parcours .up-pm .up-mk { width: 24px; height: 24px; font-size: 11px; transition: transform 150ms, box-shadow 150ms; }
.utjb-parcours .up-pm .up-mk svg { width: 13px; height: 13px; }
.utjb-parcours .up-pm.petit, .utjb-parcours .up-pm.petit:hover, .utjb-parcours .up-pm.petit:focus { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.utjb-parcours .up-pm.petit .up-mk { width: 12px; height: 12px; font-size: 0; border-width: 2px; box-shadow: 0 0 0 1px #13353a; }
.utjb-parcours .up-pm.petit .up-mk svg { display: none; }
.utjb-parcours .up-pm.survol, .utjb-parcours .up-pm.actif { z-index: 10; }
.utjb-parcours .up-pm.survol .up-mk { transform: scale(1.18); }
.utjb-parcours .up-pm.survol .up-mk.eau { transform: rotate(-45deg) scale(1.18); }
.utjb-parcours .up-pm.petit.survol .up-mk { transform: scale(1.5); }
.utjb-parcours .up-pm.petit.survol .up-mk.eau { transform: rotate(-45deg) scale(1.5); }
.utjb-parcours .up-pm.actif .up-mk { box-shadow: 0 0 0 2px #13353a, 0 0 0 6px var(--up-c-fond); }

/* la zone tiree pour zoomer, le curseur */
.utjb-parcours .up-brosse { position: absolute; top: 0; bottom: 0; background: var(--up-c-fond); border-left: 2px solid var(--up-c); border-right: 2px solid var(--up-c); pointer-events: none; }
.utjb-parcours .up-cur-ligne { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--up-doux); pointer-events: none; }
.utjb-parcours .up-cur-pt { position: absolute; z-index: 11; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--up-c); border: 2px solid #ffffff; box-shadow: 0 0 0 1.5px #13353a; pointer-events: none; }

/* lecture au curseur : prochain point et pente, puis kilometre, altitude, montee, descente */
.utjb-parcours .up-tip { position: absolute; z-index: 12; width: 252px; max-width: calc(100% - 20px); overflow: hidden; background: var(--up-carte); color: var(--up-texte); border: 1px solid var(--up-bord); border-radius: 9px; box-shadow: var(--up-ombre); font-size: 13px; line-height: 1.3; pointer-events: none; }
.utjb-parcours .up-tip-tete { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-bottom: 1px solid var(--up-bord); }
.utjb-parcours .up-tip-suite { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--up-doux); font-size: 12.5px; }
.utjb-parcours .up-tip-suite b { color: var(--up-texte); font-weight: 600; }
.utjb-parcours .up-tip-pente { margin-left: auto; white-space: nowrap; color: var(--up-texte); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.utjb-parcours .up-tip-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.utjb-parcours .up-tip-grille > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-left: 1px solid var(--up-bord); white-space: nowrap; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.utjb-parcours .up-tip-grille > div:first-child { border-left: 0; }
.utjb-parcours .up-tip-grille span { color: var(--up-texte); font-size: 13px; font-weight: 600; }
.utjb-parcours .up-tip-grille svg { display: block; width: 14px; height: 14px; stroke: var(--up-doux); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* bulle d'un point survole : le kilometre en gras, le nom dessous */
.utjb-parcours .up-bulle { position: absolute; z-index: 13; transform: translateX(-50%); padding: 6px 12px; background: var(--up-carte); border: 1px solid var(--up-bord); border-radius: 12px; box-shadow: var(--up-ombre); white-space: nowrap; text-align: left; pointer-events: none; }
.utjb-parcours .up-bulle-km { font-size: 14px; font-weight: 700; line-height: 1.15; color: var(--up-texte); font-variant-numeric: tabular-nums; }
.utjb-parcours .up-bulle-nom { font-size: 14px; font-weight: 400; line-height: 1.25; color: var(--up-texte); }

/* sous le profil : reperes nommes et troncons */
.utjb-parcours .up-bande { position: relative; z-index: 1; height: 76px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.utjb-parcours .up-bande-trait { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--up-guide); }
.utjb-parcours .up-bande-km { position: absolute; top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--up-texte); font-variant-numeric: tabular-nums; }
.utjb-parcours .up-bande-nom { position: absolute; top: 19px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 400; line-height: 1.25; color: var(--up-texte); }
.utjb-parcours .up-bande-point { position: absolute; top: 27px; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--up-c); box-shadow: 0 0 0 1px var(--up-ligne); }
.utjb-parcours .up-troncon { position: absolute; bottom: 2px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.utjb-parcours .up-troncon-pil { display: flex; flex-direction: column; align-items: center; padding: 2px 7px; border-radius: 4px; background: var(--up-fond); white-space: nowrap; font-size: 12px; line-height: 1.3; color: var(--up-texte); font-variant-numeric: tabular-nums; }
.utjb-parcours .up-troncon-pil b { font-size: 12px; font-weight: 700; color: var(--up-texte); }
.utjb-parcours .up-troncon-pil span { font-size: 12px; font-weight: 600; color: var(--up-doux); }

/* ---------- navigateur de zoom ---------- */
.utjb-parcours .up-mini { display: flex; align-items: center; gap: 22px; max-width: 100%; min-width: 0; }
.utjb-parcours .up-mini-piste { position: relative; flex: none; width: 426px; max-width: 100%; height: 56px; background: var(--up-nav-fond); border: 1.5px solid var(--up-bord); border-radius: 12px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.utjb-parcours .up-mini-int { position: absolute; top: 0; bottom: 0; left: 14px; right: 14px; }
.utjb-parcours .up-mini-fond { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.utjb-parcours .up-mini-fond .mini-aire-pale { fill: var(--up-nav-fond); }
.utjb-parcours .up-mini-fond .mini-ligne-pale { fill: none; stroke: var(--up-doux); stroke-opacity: 0.55; stroke-width: 1.2; }
.utjb-parcours .up-mini-bout { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff; pointer-events: none; }
.utjb-parcours .up-mini-depart { left: 0; transform: translate(-50%, -50%); background: var(--up-c); box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #13353a; }
.utjb-parcours .up-mini-arrivee { right: 0; transform: translate(50%, -50%); background-color: #ffffff; background-image: conic-gradient(#13353a 25%, #ffffff 0 50%, #13353a 0 75%, #ffffff 0); background-size: 50% 50%; box-shadow: 0 0 0 1px #13353a; }
.utjb-parcours .up-mini-fen { position: absolute; top: -3px; bottom: -3px; background: var(--up-carte); cursor: grab; box-shadow: var(--up-ombre), inset 0 2px var(--up-fort), inset 0 -2px var(--up-fort); }
.utjb-parcours .up-mini-fen.up-tire { cursor: grabbing; }
.utjb-parcours .up-mini-clip { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.utjb-parcours .up-mini-echelle { position: absolute; top: 3px; bottom: 3px; }
.utjb-parcours .up-mini-echelle svg { display: block; width: 100%; height: 100%; }
.utjb-parcours .up-mini-echelle .mini-ligne { fill: none; stroke: var(--up-ligne); stroke-width: 1.5; }
.utjb-parcours .up-mini-poignee { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 18px; background: var(--up-fort); color: var(--up-fort-texte); cursor: ew-resize; touch-action: none; }
.utjb-parcours .up-mini-g { right: 100%; border-radius: 8px 0 0 8px; }
.utjb-parcours .up-mini-d { left: 100%; border-radius: 0 8px 8px 0; }
.utjb-parcours .up-mini-poignee svg { display: block; width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-mini-reset, .utjb-parcours .up-mini-reset:hover, .utjb-parcours .up-mini-reset:focus {
  position: absolute; top: -10px; right: -10px; z-index: 3; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 1px solid var(--up-bord); border-radius: 50%;
  background: var(--up-carte); color: var(--up-texte); font-size: 12px; line-height: 1; cursor: pointer; box-shadow: var(--up-ombre);
}
.utjb-parcours .up-mini-reset:hover, .utjb-parcours .up-mini-reset:focus { border-color: var(--up-bleu); }
.utjb-parcours .up-mini-reset svg { display: block; width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-mini-stats { flex: none; font-variant-numeric: tabular-nums; }
.utjb-parcours .up-mini-km { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--up-texte); }
.utjb-parcours .up-mini-deniv { font-size: 13.5px; line-height: 1.35; white-space: nowrap; color: var(--up-doux); }

/* ---------- carte ---------- */
.utjb-parcours .up-mapwrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--up-bord); background: var(--up-carte); }
.utjb-parcours .up-map { height: 500px; width: 100%; background: #e9eeec; z-index: 0; }
/* carte en relief (MapLibre GL) : les commandes restent sur fond blanc, quel que soit le theme */
.utjb-parcours .up-map.maplibregl-map { font-family: "Open Sans", Arial, sans-serif; }
.utjb-parcours .up-map .maplibregl-ctrl-group { border-radius: 9px; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px #dde5e3, 0 2px 8px rgba(19, 53, 58, 0.12); }
.utjb-parcours .up-map .maplibregl-ctrl-group button { width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0; background-color: transparent; color: #13353a; line-height: 1; display: block; cursor: pointer; }
.utjb-parcours .up-map .maplibregl-ctrl-group button + button { border-top: 1px solid #dde5e3; }
.utjb-parcours .up-map .maplibregl-ctrl-group button:hover { background-color: #f2f5f4; }
.utjb-parcours .up-ctrl button svg { width: 16px; height: 16px; display: block; margin: auto; stroke: #13353a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-fonds { display: flex; background: #ffffff; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 1px #dde5e3, 0 2px 8px rgba(19, 53, 58, 0.12); }
.utjb-parcours .up-fonds button { font-size: 12.5px; font-weight: 600; line-height: 1.2; padding: 0 11px; height: 34px; width: auto; border: 0; border-right: 1px solid #dde5e3; border-radius: 0; background: #ffffff; color: #13353a; cursor: pointer; transition: background 150ms; }
.utjb-parcours .up-fonds button:last-child { border-right: 0; }
.utjb-parcours .up-fonds button:hover, .utjb-parcours .up-fonds button:focus { background: #f2f5f4; color: #13353a; }
.utjb-parcours .up-fonds button[aria-pressed="true"] { background: #13353a; color: #ffffff; }
.utjb-parcours .up-fonds button.up-3d { font-weight: 700; letter-spacing: 0.02em; }
.utjb-parcours .up-fonds button.up-3d[aria-pressed="true"] { background: #17a5b5; color: #13353a; }
.utjb-parcours .up-map .maplibregl-ctrl-attrib { font-size: 10.5px; line-height: 1.4; }
.utjb-parcours .up-map .maplibregl-ctrl-attrib a { color: rgba(0, 0, 0, 0.75); font-weight: 400; }
.utjb-parcours .up-map .maplibregl-ctrl-attrib-button { padding: 0; border: 0; border-radius: 50%; }
.utjb-parcours .up-map .maplibregl-cooperative-gesture-screen { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; padding: 16px; text-align: center; color: #ffffff; }
.utjb-parcours .up-mkw { width: 28px; height: 28px; cursor: pointer; }
.utjb-parcours .up-curseur { width: 16px; height: 16px; border-radius: 50%; background: var(--up-c); border: 2.5px solid #ffffff; box-shadow: 0 0 0 1.5px #13353a, 0 2px 6px rgba(19, 53, 58, 0.4); pointer-events: none; }
.utjb-parcours .up-mk { width: 28px; height: 28px; border-radius: 50%; background: var(--up-c); color: var(--up-marq-texte); border: 2px solid #ffffff; box-shadow: 0 0 0 1.5px #13353a, 0 2px 6px rgba(19, 53, 58, 0.35); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; line-height: 1; font-family: "Open Sans", Arial, sans-serif; transition: transform 150ms; cursor: pointer; }
.utjb-parcours .up-mk svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-mk.depart, .utjb-parcours .up-mk.arrivee { background: #13353a; color: #ffffff; }
.utjb-parcours .up-mk.eau { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.utjb-parcours .up-mk.eau svg { transform: rotate(45deg); }
.utjb-parcours .up-mk.controle { border-radius: 6px; background: #ffffff; color: #13353a; }
.utjb-parcours .up-mkw .up-mk.survol { transform: scale(1.18); }
.utjb-parcours .up-mkw .up-mk.eau.survol { transform: rotate(-45deg) scale(1.18); }
.utjb-parcours .up-mkw .up-mk.actif { transform: scale(1.25); box-shadow: 0 0 0 2px #13353a, 0 0 0 6px var(--up-c-fond); }
.utjb-parcours .up-mkw .up-mk.eau.actif { transform: rotate(-45deg) scale(1.25); }
/* repli Leaflet (sans WebGL) */
.utjb-parcours .up-map .leaflet-control-layers, .utjb-parcours .up-map .leaflet-bar { border: 1px solid #dde5e3 !important; box-shadow: 0 2px 8px rgba(19, 53, 58, 0.12) !important; border-radius: 9px !important; }
.utjb-parcours .up-map .leaflet-bar a { color: #13353a; }
.utjb-parcours .up-map .leaflet-control-layers { font-family: inherit; font-size: 13px; }
/* l'image du bouton des fonds n'est pas livree avec Leaflet ici : on la dessine */
.utjb-parcours .up-map .leaflet-control-layers-toggle { width: 34px; height: 34px; background-size: 18px 18px; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313353a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.utjb-parcours .up-map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.75); }
.utjb-parcours .up-recentrer { background: #ffffff; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.utjb-parcours .up-recentrer svg { width: 16px; height: 16px; stroke: #13353a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-chev { width: 18px; height: 18px; pointer-events: none; }
.utjb-parcours .up-chev svg { width: 18px; height: 18px; fill: #ffffff; stroke: #13353a; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }

/* ---------- fiche du point : posee sur la carte, ou a cote du point sur le profil ---------- */
.utjb-parcours .up-card { position: absolute; top: 56px; right: 12px; left: auto; bottom: auto; z-index: 900; width: 300px; max-width: calc(100% - 24px); max-height: calc(100% - 68px); overflow: auto; background: var(--up-carte); color: var(--up-texte); border-radius: 14px; box-shadow: var(--up-ombre), 0 0 0 1px var(--up-bord); padding: 16px 16px 14px; font-size: 14px; line-height: 1.45; cursor: default; user-select: text; -webkit-user-select: text; }
.utjb-parcours .up-card.up-card-profil { top: 8px; right: auto; z-index: 20; width: 360px; max-width: calc(100% - 16px); max-height: none; overflow: visible; }
.utjb-parcours .up-card-type { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; padding: 2px 8px; border-radius: 8px; background: var(--up-c); color: var(--up-marq-texte); }
.utjb-parcours .up-card-type.depart, .utjb-parcours .up-card-type.arrivee { background: var(--up-vert-fonce); color: #ffffff; }
.utjb-parcours .up-card-type.controle { background: transparent; border: 1px solid var(--up-bord); color: var(--up-doux); }
.utjb-parcours .up-card h3 { font-size: 18px; font-weight: 700; line-height: 1.2; margin: 8px 0 0; padding: 0 28px 0 0; color: var(--up-texte); }
.utjb-parcours .up-card-km { font-variant-numeric: tabular-nums; color: var(--up-doux); font-weight: 600; margin: 2px 0 0; }
.utjb-parcours .up-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.utjb-parcours .up-card dt { color: var(--up-doux); font-size: 13px; font-weight: 400; }
.utjb-parcours .up-card dd { margin: 0; font-weight: 600; color: var(--up-texte); }
.utjb-parcours .up-card dd .prov { color: var(--up-doux); font-weight: 400; font-size: 12px; }
.utjb-parcours .up-card-services { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.utjb-parcours .up-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.4; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--up-bord); color: var(--up-texte); background: var(--up-fond); }
.utjb-parcours .up-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-card-note { margin: 10px 0 0; font-size: 13px; color: var(--up-doux); }
.utjb-parcours .up-card-actions { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.utjb-parcours .up-card-fermer, .utjb-parcours .up-card-fermer:hover, .utjb-parcours .up-card-fermer:focus { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--up-bord); background: var(--up-carte); color: var(--up-texte); cursor: pointer; font-size: 18px; font-weight: 400; line-height: 1; display: flex; align-items: center; justify-content: center; }
.utjb-parcours .up-card-fermer:hover, .utjb-parcours .up-card-fermer:focus { border-color: var(--up-bleu); }

/* ---------- tableau ---------- */
.utjb-parcours .up-tableau { margin: 16px 0 0; background: var(--up-carte); border: 1px solid var(--up-bord); border-radius: 14px; overflow: hidden; }
.utjb-parcours .up-tableau-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 12px 14px 8px; }
.utjb-parcours .up-tableau-titre h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--up-texte); }
.utjb-parcours .up-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.utjb-parcours .up-table { width: 100%; min-width: 880px; margin: 0; border: 0; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; font-variant-numeric: tabular-nums; table-layout: auto; }
.utjb-parcours .up-table th, .utjb-parcours .up-table td { padding: 9px 8px; text-align: left; border: 0; border-top: 1px solid var(--up-bord); vertical-align: middle; white-space: nowrap; color: var(--up-texte); font-size: 13.5px; font-weight: 400; }
.utjb-parcours .up-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--up-doux); border-top: 0; background: var(--up-fond); }
.utjb-parcours .up-table th:first-child, .utjb-parcours .up-table td:first-child { padding-left: 14px; position: sticky; left: 0; background: var(--up-carte); z-index: 1; }
.utjb-parcours .up-table th:first-child { background: var(--up-fond); }
.utjb-parcours .up-table tbody tr { cursor: pointer; transition: background 150ms; background: none; }
.utjb-parcours .up-table tbody tr:hover td, .utjb-parcours .up-table tbody tr.survol td { background: var(--up-fond); }
.utjb-parcours .up-table tbody tr.actif td { background: var(--up-c-fond); }
.utjb-parcours .up-table tbody tr.actif td:first-child { box-shadow: inset 4px 0 0 var(--up-c); }
.utjb-parcours .up-point { display: flex; align-items: center; gap: 9px; }
.utjb-parcours .up-point .up-mk { width: 24px; height: 24px; font-size: 11px; flex: none; cursor: inherit; }
.utjb-parcours .up-point .up-mk svg { width: 13px; height: 13px; }
.utjb-parcours .up-point b { display: block; font-weight: 700; line-height: 1.2; color: var(--up-texte); }
.utjb-parcours .up-point small { display: block; font-size: 11.5px; color: var(--up-doux); line-height: 1.2; }
/* une barriere horaire : l'icone et l'heure, en rouge (tableau et fiche d'un point) */
.utjb-parcours .up-limite { display: inline-flex; align-items: center; gap: 6px; color: var(--up-rouge); font-weight: 700; white-space: nowrap; vertical-align: middle; }
.utjb-parcours .up-limite svg { display: block; flex: none; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-table td.inter { color: var(--up-doux); }
.utjb-parcours .up-serv { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--up-bord); margin: 0 3px 0 0; color: var(--up-texte); background: var(--up-fond); vertical-align: middle; font-size: 9.5px; font-weight: 700; line-height: 1; }
.utjb-parcours .up-serv svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours .up-notes { padding: 10px 14px 12px; font-size: 12.5px; line-height: 1.5; color: var(--up-doux); border-top: 1px solid var(--up-bord); display: grid; gap: 4px; }
.utjb-parcours .up-notes p { max-width: none; margin: 0; color: var(--up-doux); font-size: 12.5px; }
.utjb-parcours .up-notes b { color: var(--up-texte); font-weight: 600; }
.utjb-parcours .up-etat { padding: 24px; text-align: center; color: var(--up-doux); }
.utjb-parcours .up-etat.erreur { color: var(--up-rouge); }

/* ---------- plein ecran : la carte partout, le profil en tiroir, le navigateur en haut ---------- */
.utjb-parcours.up-plein { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; width: auto; height: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; background: #e9eeec; }
.utjb-parcours.up-plein .up-entete, .utjb-parcours.up-plein .up-tableau, .utjb-parcours.up-plein .up-separateur { display: none; }
.utjb-parcours.up-plein .up-rang { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.utjb-parcours.up-plein .up-col-carte { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.utjb-parcours.up-plein .up-mapwrap { height: 100%; border: 0; border-radius: 0; }
.utjb-parcours.up-plein .up-map { height: 100%; }
.utjb-parcours.up-plein .up-col-profil { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; max-width: 1100px; margin: 0 auto; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.utjb-parcours.up-plein.up-dock-cache .up-col-profil { transform: translateY(calc(100% + 12px)); }
.utjb-parcours.up-plein .up-profil { padding: 4px 12px 2px; background: var(--up-voile); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--up-ombre); }
.utjb-parcours.up-plein .up-barrieres { height: 40px; }
.utjb-parcours.up-plein .up-bande { height: 72px; }
.utjb-parcours.up-plein .up-dock-bouton, .utjb-parcours.up-plein .up-dock-bouton:hover, .utjb-parcours.up-plein .up-dock-bouton:focus {
  position: absolute; top: -30px; left: 50%; z-index: 6; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 30px; margin: 0 0 0 -32px; padding: 0; border: 0; border-radius: 14px 14px 0 0;
  background: var(--up-fort); color: var(--up-fort-texte); font-size: 12px; line-height: 1; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.utjb-parcours .up-dock-bouton svg { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.utjb-parcours.up-plein .up-nav-rang { position: absolute; z-index: 5; top: 12px; left: 50%; padding: 10px 22px; background: var(--up-carte); border: 1px solid var(--up-bord); border-radius: 14px; box-shadow: var(--up-ombre); transform: translateX(-50%); transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.utjb-parcours.up-plein.up-dock-cache .up-nav-rang { transform: translate(-50%, calc(-100% - 14px)); }
.utjb-parcours.up-plein.up-sans-nav .up-nav-rang { display: none; }
/* les sources de la carte restent lisibles : elles montent au-dessus du tiroir */
.utjb-parcours.up-plein .up-map .maplibregl-ctrl-bottom-right, .utjb-parcours.up-plein .up-map .maplibregl-ctrl-bottom-left,
.utjb-parcours.up-plein .up-map .leaflet-bottom { bottom: calc(var(--up-dock-h) + 22px); transition: bottom 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.utjb-parcours.up-plein.up-dock-cache .up-map .maplibregl-ctrl-bottom-right, .utjb-parcours.up-plein.up-dock-cache .up-map .maplibregl-ctrl-bottom-left,
.utjb-parcours.up-plein.up-dock-cache .up-map .leaflet-bottom { bottom: 0; }

/* ---------- bloc etroit (moins de 720 px) ---------- */
.utjb-parcours.up-etroit { padding: 14px 12px 12px; border-radius: 12px; }
.utjb-parcours.up-etroit.up-plein { padding: 0; border-radius: 0; }
.utjb-parcours.up-etroit .up-controles-fin { margin-left: 0; }
.utjb-parcours.up-etroit .up-profil { padding: 8px 8px 6px; }
.utjb-parcours.up-etroit .up-map { height: 380px; }
.utjb-parcours.up-etroit.up-plein .up-map { height: 100%; }
.utjb-parcours.up-etroit .up-fonds button { padding: 0 8px; font-size: 12px; }
.utjb-parcours.up-etroit .up-card { top: auto; right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 62%; }
.utjb-parcours.up-etroit .up-card.up-card-profil { top: 8px; bottom: auto; max-height: none; }
.utjb-parcours.up-etroit.up-plein .up-card { top: 56px; bottom: auto; max-height: calc(100% - var(--up-dock-h) - 90px); }
.utjb-parcours.up-etroit .up-mini { flex-direction: column; gap: 8px; width: 100%; }
.utjb-parcours.up-etroit .up-mini-piste { width: 100%; }
.utjb-parcours.up-etroit .up-mini-stats { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.utjb-parcours.up-etroit.up-plein .up-col-profil { left: 6px; right: 6px; bottom: 6px; }
.utjb-parcours.up-etroit.up-plein .up-profil { padding: 4px 6px 2px; }

@media (prefers-reduced-motion: reduce) {
  .utjb-parcours * { transition: none !important; }
}