/* utjb-classements.css - Widget « Classements » du Trail du Jura bernois.
   Charte : Design System UTJB v1.2. Base vert fonce #13353a + bleu La Grandiose #17a5b5,
   une couleur par parcours (jamais de texte de couleur sur fond clair : fonds, bordures, pastilles),
   Open Sans, radius 14 px max. Prefixe de classes : uc- .

   ROBUSTESSE face au theme d'utjb.ch (memes regles que le widget Parcours, releve du 29.09.2026) :
     1. aucune balise header, section, aside, footer ou nav dans le widget ;
     2. chaque selecteur commence par .utjb-classements ;
     3. remise a zero des balises utilisees, en tete de fichier ;
     4. chaque bouton fixe fond, couleur, bordure et marges, et les repete au survol et au focus.
   Deux etats poses par le script sur le bloc, selon SA largeur (pas celle de l'ecran) :
     .uc-etroit  moins de 720 px : tableau resserre, categorie et dossard sous le nom ;
     .uc-mini    moins de 460 px : podiums et courses en une colonne.                          */

.utjb-classements {
  --uc-vf: #13353a;
  --uc-bleu: #17a5b5;
  --uc-fond: #f2f5f4;
  --uc-carte: #ffffff;
  --uc-texte: #13353a;
  --uc-doux: #5a7176;
  --uc-bord: #dde5e3;
  --uc-rouge: #c0392b;
  --uc-c: #17a5b5;               /* couleur de la course affichee, posee par le script */
  display: block;
  position: relative;
  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(--uc-texte);
  background: var(--uc-fond);
  border-radius: 14px;
  box-sizing: border-box;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* ---------- remise a zero, face au theme ---------- */
.utjb-classements *, .utjb-classements *::before, .utjb-classements *::after { box-sizing: border-box; }
.utjb-classements div, .utjb-classements span, .utjb-classements p, .utjb-classements b,
.utjb-classements details, .utjb-classements summary, .utjb-classements 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-classements div, .utjb-classements p, .utjb-classements span, .utjb-classements summary { color: inherit; font-size: inherit; line-height: inherit; }
.utjb-classements table, .utjb-classements thead, .utjb-classements tbody, .utjb-classements tr,
.utjb-classements th, .utjb-classements td {
  margin: 0; padding: 0; border: 0; border-spacing: 0; background: none; font-family: inherit;
  font-size: inherit; color: inherit; letter-spacing: normal; text-transform: none; vertical-align: middle;
  text-align: left; box-shadow: none;
}
.utjb-classements button, .utjb-classements input, .utjb-classements select {
  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; line-height: 1.3; width: auto; max-width: 100%;
}
.utjb-classements :focus-visible { outline: 3px solid var(--uc-bleu); outline-offset: 2px; }

/* ---------- bande du haut : titre et editions ---------- */
.utjb-classements .uc-bande {
  display: block; background: var(--uc-vf); color: #ffffff; padding: 16px 24px;
  border-bottom: 4px solid var(--uc-c);
}
.utjb-classements .uc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.utjb-classements .uc-annees { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; width: 100%; }
.utjb-classements .uc-annees .uc-annee,
.utjb-classements .uc-annees .uc-annee:hover,
.utjb-classements .uc-annees .uc-annee:focus {
  padding: 8px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.28); width: 100%; text-align: center;
  background: transparent; color: #ffffff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.utjb-classements .uc-annees .uc-annee:hover { background: rgba(255, 255, 255, 0.12); }
.utjb-classements .uc-annees .uc-annee.uc-on,
.utjb-classements .uc-annees .uc-annee.uc-on:hover,
.utjb-classements .uc-annees .uc-annee.uc-on:focus {
  background: var(--uc-bleu); border-color: var(--uc-bleu); color: var(--uc-vf); font-weight: 700;
}

.utjb-classements .uc-corps { padding: 20px 24px 22px; }
.utjb-classements .uc-attente { padding: 40px 0; text-align: center; color: var(--uc-doux); }

/* ---------- les courses ---------- */
.utjb-classements .uc-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; }
.utjb-classements .uc-courses .uc-course,
.utjb-classements .uc-courses .uc-course:hover,
.utjb-classements .uc-courses .uc-course:focus {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 12px 14px 12px 16px; border-radius: 12px; cursor: pointer;
  background: var(--uc-carte); color: var(--uc-texte); border: 1px solid var(--uc-bord);
  border-left: 6px solid var(--uc-cc); font-size: 13px; font-weight: 400;
}
.utjb-classements .uc-courses .uc-course:hover { border-color: var(--uc-cc); border-left-width: 6px; }
.utjb-classements .uc-courses .uc-course.uc-on,
.utjb-classements .uc-courses .uc-course.uc-on:hover,
.utjb-classements .uc-courses .uc-course.uc-on:focus {
  background: color-mix(in srgb, var(--uc-cc) 16%, #ffffff); border: 2px solid var(--uc-cc); border-left: 6px solid var(--uc-cc);
}
.utjb-classements .uc-course-nom { font-size: 17px; font-weight: 700; line-height: 1.25; }
.utjb-classements .uc-course-nb { color: var(--uc-doux); margin: 0 0 4px; }
.utjb-classements .uc-course-l { display: flex; gap: 8px; width: 100%; justify-content: space-between; }
.utjb-classements .uc-course-l span { color: var(--uc-doux); }
.utjb-classements .uc-course-l b { font-weight: 600; }

/* ---------- podiums ---------- */
.utjb-classements .uc-podiums { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 0 0 20px; }
.utjb-classements .uc-podium { background: var(--uc-carte); border: 1px solid var(--uc-bord); border-radius: 12px; padding: 12px 14px 8px; }
.utjb-classements .uc-podium-t { font-size: 13px; font-weight: 700; color: var(--uc-doux); margin: 0 0 6px; }
.utjb-classements .uc-podium .uc-pod,
.utjb-classements .uc-podium .uc-pod:hover,
.utjb-classements .uc-podium .uc-pod:focus {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 6px; border: 0; border-top: 1px solid var(--uc-bord); border-radius: 0;
  background: transparent; color: var(--uc-texte); font-size: 15px; font-weight: 400;
}
.utjb-classements .uc-podium .uc-pod1 { border-top: 0; }
.utjb-classements .uc-podium .uc-pod:hover { background: var(--uc-fond); }
.utjb-classements .uc-pod-r {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; background: var(--uc-carte); color: var(--uc-vf); border: 2px solid var(--uc-c);
}
.utjb-classements .uc-pod1 .uc-pod-r { background: var(--uc-vf); color: #ffffff; border-color: var(--uc-c); box-shadow: 0 0 0 2px var(--uc-c); }
.utjb-classements .uc-podium .uc-pod-vide { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid var(--uc-bord); min-height: 55px; cursor: default; }
.utjb-classements .uc-pod-vide .uc-pod-r { border-style: dashed; border-color: var(--uc-bord); color: var(--uc-doux); background: transparent; box-shadow: none; }
.utjb-classements .uc-pod-note { font-size: 13px; color: var(--uc-doux); font-style: italic; }
.utjb-classements .uc-pod-n { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.utjb-classements .uc-pod-nom { font-weight: 700; line-height: 1.3; }
.utjb-classements .uc-pod-m { font-size: 13px; color: var(--uc-doux); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utjb-classements .uc-pod-t { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.utjb-classements .uc-pod-t b { font-weight: 700; }
.utjb-classements .uc-pod-t span { font-size: 13px; color: var(--uc-doux); }

/* ---------- record du parcours ---------- */
.utjb-classements .uc-tr { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.utjb-classements .uc-rec { display: inline-flex; flex: 0 0 auto; width: 16px; height: 16px; line-height: 0; cursor: help; }
.utjb-classements .uc-rec svg { display: block; width: 16px; height: 16px; max-width: none; }
.utjb-classements .uc-course-l b.uc-tr { font-weight: 600; }
.utjb-classements .uc-leg { display: inline-flex; align-items: center; gap: 6px; }
.utjb-classements .uc-leg .uc-rec { cursor: default; }
.utjb-classements .uc-podium-vide { min-height: 1px; }
.utjb-classements.uc-mini .uc-podium-vide { display: none; }

/* ---------- outils ---------- */
.utjb-classements .uc-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; }
.utjb-classements .uc-seg { display: inline-flex; border: 1px solid var(--uc-bord); border-radius: 10px; background: var(--uc-carte); padding: 3px; }
.utjb-classements .uc-seg .uc-seg-b,
.utjb-classements .uc-seg .uc-seg-b:hover,
.utjb-classements .uc-seg .uc-seg-b:focus {
  padding: 7px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--uc-texte);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.utjb-classements .uc-seg .uc-seg-b:hover { background: var(--uc-fond); }
.utjb-classements .uc-seg { align-items: center; }
.utjb-classements .uc-seg-lab { padding: 0 10px 0 9px; font-size: 12px; font-weight: 700; color: var(--uc-doux); border-right: 1px solid var(--uc-bord); margin-right: 3px; align-self: stretch; display: flex; align-items: center; }
.utjb-classements .uc-seg.uc-inactif { background: var(--uc-fond); cursor: not-allowed; }
.utjb-classements .uc-seg.uc-inactif .uc-seg-b,
.utjb-classements .uc-seg.uc-inactif .uc-seg-b:hover,
.utjb-classements .uc-seg.uc-inactif .uc-seg-b:focus { cursor: not-allowed; color: var(--uc-doux); background: transparent; }
.utjb-classements .uc-seg.uc-inactif .uc-seg-b.uc-on,
.utjb-classements .uc-seg.uc-inactif .uc-seg-b.uc-on:hover { background: #8fa3a6; color: #ffffff; }
.utjb-classements .uc-seg .uc-seg-b.uc-on,
.utjb-classements .uc-seg .uc-seg-b.uc-on:hover,
.utjb-classements .uc-seg .uc-seg-b.uc-on:focus { background: var(--uc-vf); color: #ffffff; }
.utjb-classements .uc-select,
.utjb-classements .uc-rech {
  height: 40px; border: 1px solid var(--uc-bord); border-radius: 10px; background-color: var(--uc-carte);
  color: var(--uc-texte); font-size: 14px; padding: 0 12px;
}
.utjb-classements .uc-select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2313353a' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.utjb-classements .uc-rech { flex: 1 1 220px; }
.utjb-classements .uc-rech::placeholder { color: var(--uc-doux); opacity: 1; }
.utjb-classements .uc-select:focus, .utjb-classements .uc-rech:focus { border-color: var(--uc-bleu); outline: none; box-shadow: 0 0 0 3px rgba(23, 165, 181, 0.25); }
.utjb-classements .uc-resume { font-size: 13px; color: var(--uc-doux); margin: 0 0 8px; }

/* ---------- classement ---------- */
.utjb-classements .uc-liste { background: var(--uc-carte); border: 1px solid var(--uc-bord); border-radius: 12px; overflow: hidden; }
.utjb-classements .uc-vide { padding: 28px 16px; text-align: center; color: var(--uc-doux); }
.utjb-classements .uc-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 15px; }
.utjb-classements .uc-table th {
  font-size: 12px; font-weight: 700; color: var(--uc-doux); padding: 10px 10px; background: var(--uc-fond);
  border-bottom: 1px solid var(--uc-bord); white-space: nowrap;
}
.utjb-classements .uc-table td { padding: 9px 10px; border-bottom: 1px solid var(--uc-bord); }
.utjb-classements .uc-table .uc-l { cursor: pointer; }
.utjb-classements .uc-table .uc-l:hover td { background: var(--uc-fond); }
.utjb-classements .uc-table .uc-l.uc-ouv td { background: color-mix(in srgb, var(--uc-c) 12%, #ffffff); border-bottom-color: transparent; }
.utjb-classements .uc-c-r { width: 64px; text-align: center; }
.utjb-classements .uc-table th.uc-c-r { text-align: center; }
.utjb-classements .uc-c-d { width: 64px; color: var(--uc-doux); font-size: 14px; }
.utjb-classements .uc-c-t { width: 96px; font-weight: 700; white-space: nowrap; }
.utjb-classements .uc-c-e { width: 90px; color: var(--uc-doux); font-size: 14px; white-space: nowrap; }
.utjb-classements .uc-c-k { width: 26%; }
.utjb-classements .uc-rg {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 8px; font-weight: 700;
}
.utjb-classements .uc-rg1, .utjb-classements .uc-rg2, .utjb-classements .uc-rg3 { border: 2px solid var(--uc-c); }
.utjb-classements .uc-rg1 { background: var(--uc-vf); color: #ffffff; }
.utjb-classements .uc-ab { font-size: 12px; font-weight: 700; color: var(--uc-rouge); }
.utjb-classements .uc-table .uc-nom,
.utjb-classements .uc-table .uc-nom:hover,
.utjb-classements .uc-table .uc-nom:focus {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%;
  padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--uc-texte); cursor: pointer; font-size: 15px; font-weight: 400;
}
.utjb-classements .uc-nom-n { font-weight: 700; line-height: 1.3; }
.utjb-classements .uc-nom-m { font-size: 13px; color: var(--uc-doux); line-height: 1.35; }
.utjb-classements .uc-nom-x { display: none; font-size: 13px; color: var(--uc-doux); line-height: 1.35; }
.utjb-classements .uc-cat { display: block; font-size: 14px; line-height: 1.3; }
.utjb-classements .uc-cat-r { display: block; font-size: 13px; color: var(--uc-doux); }
.utjb-classements .uc-t-e { display: none; }
.utjb-classements .uc-plus,
.utjb-classements .uc-plus:hover,
.utjb-classements .uc-plus:focus {
  display: block; width: 100%; padding: 13px; border: 0; border-radius: 0; background: var(--uc-fond);
  color: var(--uc-vf); font-size: 14px; font-weight: 700; cursor: pointer; text-align: center;
}
.utjb-classements .uc-plus:hover { background: color-mix(in srgb, var(--uc-c) 14%, #ffffff); }
.utjb-classements .uc-abandons { border-top: 1px solid var(--uc-bord); }
.utjb-classements .uc-abandons summary { padding: 12px 14px; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--uc-fond); list-style-position: inside; }
.utjb-classements .uc-abandons .uc-table { border-top: 1px solid var(--uc-bord); }

/* ---------- recherche dans toutes les courses ---------- */
.utjb-classements .uc-c-co { width: 150px; }
.utjb-classements .uc-pastille {
  display: inline-block; padding: 3px 8px 3px 8px; border-left: 5px solid var(--uc-cc); border-radius: 6px;
  background: color-mix(in srgb, var(--uc-cc) 16%, #ffffff); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.utjb-classements .uc-rg-s { display: block; font-size: 11px; color: var(--uc-doux); line-height: 1.2; }
.utjb-classements.uc-en-recherche .uc-seg,
.utjb-classements.uc-en-recherche .uc-select { opacity: 0.45; }
.utjb-classements.uc-etroit .uc-table-rech .uc-c-co { display: none; }

/* ---------- detail d'un coureur ---------- */
.utjb-classements .uc-table .uc-det > td { padding: 0 10px 14px; background: color-mix(in srgb, var(--uc-c) 12%, #ffffff); }
.utjb-classements .uc-det-box { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 14px 22px; padding: 4px 0 0 64px; }
.utjb-classements .uc-infos { display: flex; flex-direction: column; gap: 6px; }
.utjb-classements .uc-info { display: flex; flex-direction: column; }
.utjb-classements .uc-info-k { font-size: 12px; font-weight: 700; color: var(--uc-doux); }
.utjb-classements .uc-info-v { font-size: 14px; }
.utjb-classements .uc-pass-w { background: var(--uc-carte); border: 1px solid var(--uc-bord); border-radius: 10px; overflow-x: auto; }
.utjb-classements .uc-pass { width: 100%; border-collapse: collapse; font-size: 14px; }
.utjb-classements .uc-pass th { font-size: 12px; font-weight: 700; color: var(--uc-doux); padding: 8px 10px; border-bottom: 1px solid var(--uc-bord); white-space: nowrap; }
.utjb-classements .uc-pass td { padding: 7px 10px; border-bottom: 1px solid var(--uc-bord); white-space: nowrap; }
.utjb-classements .uc-pass tr:last-child td { border-bottom: 0; }
.utjb-classements .uc-pass .uc-fin td { font-weight: 700; }
.utjb-classements .uc-p-t { font-weight: 600; }
.utjb-classements .uc-p-s { color: var(--uc-doux); }
.utjb-classements .uc-p-rg { display: inline-block; min-width: 26px; }
.utjb-classements .uc-gain, .utjb-classements .uc-perte { font-size: 12px; font-weight: 700; margin-left: 6px; padding: 1px 6px; border-radius: 6px; }
.utjb-classements .uc-gain { background: #d9ecd0; color: var(--uc-vf); }
.utjb-classements .uc-perte { background: #f6dcd8; color: var(--uc-rouge); }
.utjb-classements .uc-note { font-size: 14px; color: var(--uc-doux); }
.utjb-classements .uc-pied { font-size: 12px; color: var(--uc-doux); margin: 12px 0 0; display: flex; flex-direction: column; gap: 4px; }

/* ---------- bloc etroit (moins de 720 px) ---------- */
.utjb-classements.uc-etroit .uc-bande { padding: 12px; }
.utjb-classements.uc-etroit .uc-corps { padding: 16px 12px 18px; }
.utjb-classements.uc-etroit .uc-annees { gap: 6px; }
.utjb-classements.uc-etroit .uc-annees .uc-annee { padding: 6px 4px; font-size: 14px; }
.utjb-classements.uc-etroit .uc-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.utjb-classements.uc-etroit .uc-c-d,
.utjb-classements.uc-etroit .uc-c-k,
.utjb-classements.uc-etroit .uc-c-e { display: none; }
.utjb-classements.uc-etroit .uc-nom-x { display: block; }
.utjb-classements.uc-etroit .uc-t-e { display: block; font-size: 13px; font-weight: 400; color: var(--uc-doux); }
.utjb-classements.uc-etroit .uc-c-r { width: 50px; }
.utjb-classements.uc-etroit .uc-c-t { width: auto; text-align: right; }
.utjb-classements.uc-etroit .uc-table th.uc-c-t { text-align: right; }
.utjb-classements.uc-etroit .uc-table td, .utjb-classements.uc-etroit .uc-table th { padding-left: 8px; padding-right: 8px; }
.utjb-classements.uc-etroit .uc-det-box { grid-template-columns: 1fr; padding-left: 0; }
.utjb-classements.uc-etroit .uc-infos { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.utjb-classements.uc-etroit .uc-rech { flex-basis: 100%; }
.utjb-classements.uc-etroit .uc-select { flex: 1 1 auto; }

/* ---------- bloc tres etroit (telephone, moins de 460 px) ---------- */
.utjb-classements.uc-mini .uc-courses { gap: 6px; }
.utjb-classements.uc-mini .uc-courses .uc-course { padding: 10px 10px 10px 12px; }
.utjb-classements.uc-mini .uc-course-nom { font-size: 15px; }
.utjb-classements.uc-mini .uc-course-l { flex-direction: column; gap: 0; }
.utjb-classements.uc-mini .uc-podiums { grid-template-columns: 1fr; }
.utjb-classements.uc-mini .uc-seg { width: 100%; }
.utjb-classements.uc-mini .uc-seg .uc-seg-b { flex: 1 1 0; }
.utjb-classements.uc-mini .uc-select { flex-basis: 100%; }
.utjb-classements.uc-mini .uc-pass { font-size: 13px; }
.utjb-classements.uc-mini .uc-pass td, .utjb-classements.uc-mini .uc-pass th { padding: 7px 5px; }
.utjb-classements.uc-mini .uc-pass td:first-child, .utjb-classements.uc-mini .uc-pass th:first-child { padding-left: 8px; white-space: normal; }
.utjb-classements.uc-mini .uc-gain, .utjb-classements.uc-mini .uc-perte { margin-left: 3px; padding: 1px 4px; }
.utjb-classements.uc-mini .uc-table .uc-det > td { padding: 0 6px 12px; }