/* TRAIL MASTER HUB – fusion12-8l : éditeur des images podium + onglet Podiums adapté au mobile / APK */

/* ---------- Onglet Classements → Podiums (Top 3) : mobile ---------- */
#rankings-podiums .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#rankings-podiums table { min-width: 0; }
#rankings-podiums thead th { font-weight: 700; }
#rankings-podiums .tmh-nat { white-space: nowrap; }
@media (max-width: 640px) {
  #rankings-podiums .card { border-radius: 12px; }
  #rankings-podiums .card > div:first-child { padding: .5rem .75rem; }
  #rankings-podiums h3 { font-size: 1rem; line-height: 1.3; }
  #rankings-podiums table { font-size: .8rem; table-layout: auto; }
  #rankings-podiums thead th { padding: .45rem .35rem; font-size: .6rem; letter-spacing: .02em; }
  #rankings-podiums tbody td { padding: .5rem .35rem; font-size: .8rem; line-height: 1.25; }
  #rankings-podiums thead th:first-child, #rankings-podiums tbody td:first-child { padding-left: .6rem; width: 2rem; }
  #rankings-podiums tbody td:first-child { font-size: 1.05rem !important; }
  #rankings-podiums tbody td:nth-child(3) { white-space: normal; word-break: normal; overflow-wrap: break-word; min-width: 7rem; }
  #rankings-podiums thead th:nth-child(5) { font-size: 0; }
  #rankings-podiums thead th:nth-child(5)::after { content: 'NAT.'; font-size: .6rem; line-height: 1; display: inline-block; }
  #rankings-podiums tbody td:last-child { font-size: .74rem; }
  #rankings-podiums thead th:last-child, #rankings-podiums tbody td:last-child { padding-right: .6rem; white-space: nowrap; }
  #rankings-podiums .tmh-flag { margin-right: 3px; }
}
@media (max-width: 420px) {
  #rankings-podiums tbody td:nth-child(5) .tmh-nat { font-size: 0; gap: 0; } /* drapeau seul, le code reste en infobulle */
  #rankings-podiums tbody td:nth-child(3) { font-size: .78rem; }
}
@media (max-width: 380px) {
  #rankings-podiums tbody td, #rankings-podiums table { font-size: .74rem; }
  #rankings-podiums thead th { font-size: .56rem; padding: .4rem .25rem; }
  #rankings-podiums tbody td { padding: .45rem .25rem; }
}

/* ---------- Éditeur « Éditer l'image classement » – mode Podiums ---------- */
body.pfb-lock { overflow: hidden; }
.pfb-modal { position: fixed; inset: 0; z-index: 9990; background: rgba(15, 23, 42, .55); display: none; align-items: center; justify-content: center; padding: 16px; }
.pfb-modal.open { display: flex; }
.pfb-dialog { background: #fff; border-radius: 16px; width: min(1280px, 100%); height: min(860px, 100%); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(15, 23, 42, .35); }
.pfb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #e8e0d8; background: #fffaf6; }
.pfb-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.pfb-head h3 i { color: #4f46e5; }
.pfb-tag { font-size: .7rem; font-weight: 700; background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 2px 9px; }
.pfb-x { border: 0; background: transparent; font-size: 1.8rem; line-height: 1; color: #64748b; cursor: pointer; padding: 0 6px; }
.pfb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.pfb-prev { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f1f5f9; padding: 12px; gap: 8px; }
.pfb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pfb-bar .input { max-width: 260px; flex: 1 1 160px; }
.pfb-seg { display: inline-flex; background: #e2e8f0; border-radius: 10px; padding: 3px; }
.pfb-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: .8rem; color: #475569; cursor: pointer; }
.pfb-seg button.on { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pfb-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .8rem; font-weight: 600; color: #334155; }
.pfb-nav button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.pfb-canvas { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: auto; }
.pfb-canvas canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); background: #fff; }
.pfb-info { margin: 0; font-size: .72rem; color: #64748b; text-align: center; }
.pfb-demo { margin: 0; font-size: .75rem; color: #92400e; background: #fef3c7; border-radius: 8px; padding: 6px 10px; }
.pfb-panel { overflow-y: auto; border-left: 1px solid #e8e0d8; padding: 10px 12px 16px; background: #fff; }
.pfb-g { border: 1px solid #e8e0d8; border-radius: 12px; margin-bottom: 10px; background: #fff; }
.pfb-g > summary { cursor: pointer; list-style: none; padding: 10px 12px; font-weight: 700; font-size: .85rem; color: #0f172a; display: flex; gap: 8px; align-items: center; }
.pfb-g > summary::-webkit-details-marker { display: none; }
.pfb-g > summary i { color: #4f46e5; width: 16px; text-align: center; }
.pfb-g[open] > summary { border-bottom: 1px solid #f1f5f9; }
.pfb-g > *:not(summary) { margin: 8px 12px; }
.pfb-f { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; font-weight: 600; color: #475569; }
.pfb-f .input, .pfb-f input[type=range] { width: 100%; }
.pfb-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pfb-chk { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #1e293b; cursor: pointer; }
.pfb-chk input { width: 16px; height: 16px; accent-color: #4f46e5; }
.pfb-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.pfb-c { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: #334155; }
.pfb-c input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; flex: none; cursor: pointer; }
.pfb-help { font-size: .72rem; color: #64748b; margin: 6px 12px; }
.pfb-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid #e8e0d8; background: #fff; }
.pfb-sp { flex: 1; }

@media (max-width: 860px) {
  .pfb-modal { padding: 0; }
  .pfb-dialog { width: 100%; height: 100%; border-radius: 0; }
  .pfb-body { display: flex; flex-direction: column; overflow-y: auto; }
  .pfb-prev { flex: none; padding: 10px; }
  .pfb-canvas { flex: none; overflow: visible; }
  .pfb-canvas canvas { width: 100%; max-height: none; }
  .pfb-panel { flex: none; overflow: visible; border-left: 0; border-top: 1px solid #e8e0d8; }
  .pfb-bar .input { max-width: none; flex-basis: 100%; }
  .pfb-nav { margin-left: auto; }
  .pfb-foot { padding: 8px 10px; gap: 6px; }
  .pfb-foot .btn-primary, .pfb-foot .btn-secondary { flex: 1 1 calc(50% - 6px); justify-content: center; text-align: center; font-size: .74rem !important; padding: .45rem .5rem !important; white-space: nowrap; }
  .pfb-foot [data-act="save"] { flex-basis: 100%; }
  .pfb-sp { display: none; }
}
body.theme-dark .pfb-dialog, body.theme-dark .pfb-panel, body.theme-dark .pfb-g, body.theme-dark .pfb-foot { background: #1e293b; color: #f1f5f9; border-color: #334155; }
body.theme-dark .pfb-head { background: #0f172a; border-color: #334155; }
body.theme-dark .pfb-head h3, body.theme-dark .pfb-g > summary, body.theme-dark .pfb-chk { color: #f1f5f9; }
body.theme-dark .pfb-prev { background: #0f172a; }