/* =====================================================================
   Tandem — Séance indoor (home trainer / tapis en Bluetooth).
   Même style que le Coach GPS (noir, cyan, Orbitron + Barlow) ; variables --cg-* de coach-gps.css.
   L'écran de séance est pensé pour un ordinateur regardé de loin : très gros chiffres.
   ===================================================================== */
body.route-indoor .view { background: var(--cg-bg); }

/* ----- préparation ----- */
.ind .ind-nobt { border: 2px solid var(--cg-red); }
.ind .ind-nobt b { font-size: 17px; }
.ind-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ind-seg button {
  min-height: 56px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line);
  font: 800 17px var(--cg-num); cursor: pointer;
}
.ind-seg button.on { background: var(--cg-cyan); color: #000; border-color: var(--cg-cyan); }
.ind-zwift { font-size: 15px; line-height: 1.4; border-left: 3px solid var(--cg-amber); padding: 6px 10px; color: #fff; }
.ind-check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; cursor: pointer; line-height: 1.35; }
.ind-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--cg-cyan); flex: none; }
.ind-check[hidden] { display: none; }
.ind-devst p { font-size: 16px; line-height: 1.4; margin: 2px 0; }
.ind-devst p.ok { color: #fff; } .ind-devst p.ok::first-letter { color: #2ECC71; }
.ind-devst p.bad { color: var(--cg-amber); }
.ind-devst small { color: var(--cg-sec); font-size: 14px; }
.ind-pick { min-height: 40px; max-width: 100%; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); font: 700 16px var(--cg-num); padding: 0 8px; }
.ind-text { min-height: 190px; }
.ind-prof { display: block; width: 100%; height: 110px; }
.ind-prof[hidden] { display: none; }
.ind-info { font-size: 16px; display: grid; gap: 6px; }
.ind-tg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ind-tg li { display: flex; align-items: center; gap: 6px; }
.ind-zl { display: inline-block; min-width: 46px; text-align: center; font: 700 12px var(--cg-title); padding: 4px 5px; background: var(--zc); color: #000; }
.ind-warn { color: var(--cg-amber); }
.ind-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ind-set label { display: grid; gap: 4px; font-size: 14px; color: var(--cg-sec); }
.ind-set input, .ind-pct input {
  width: 100%; min-height: 42px; background: #000; color: #fff; border: 0; border-bottom: var(--cg-lw) solid var(--cg-line);
  font: 800 19px var(--cg-num); font-variant-numeric: tabular-nums; padding: 0 6px;
}
.ind-pct { width: 100%; border-collapse: collapse; }
.ind-pct th { font: 700 12px var(--cg-title); letter-spacing: 1px; color: var(--cg-cyan); text-align: left; padding: 4px; }
.ind-pct tbody th { font: 800 14px var(--cg-num); color: #fff; letter-spacing: 0; white-space: nowrap; }
.ind-pct td { padding: 2px 4px; }
.ind-go { min-height: 64px; font-size: 16px; }
.ind-go:disabled { opacity: .45; cursor: not-allowed; }
.ind-goinfo { font-size: 15px; color: var(--cg-sec); text-align: center; }

/* ----- écran de séance (plein écran) ----- */
body.ind-open { overflow: hidden; }
.ind-run {
  --zc: var(--cg-cyan);
  position: fixed; inset: 0; z-index: 2000; background: #000; color: #fff; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px;
  font-family: var(--cg-num); font-weight: 600;
}
.ind-run b { font-weight: 800; }
.ind-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border-bottom: var(--cg-lw) solid var(--cg-line-2); padding-bottom: 10px; }
.ind-name { flex: 1; min-width: 200px; display: grid; }
.ind-name b { font: 900 20px var(--cg-title); letter-spacing: 1px; color: var(--cg-cyan); }
.ind-name small { font: 700 12px var(--cg-title); letter-spacing: 1.5px; color: var(--cg-sec); margin-top: 4px; }
.ind-tt { display: grid; text-align: right; }
.ind-tt b { font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ind-dev { font-size: 15px; color: #2ECC71; }
.ind-dev.bad { color: var(--cg-amber); }
.ind-stop {
  min-width: 170px; min-height: 76px; background: var(--cg-red); color: #fff; border: 3px solid #fff; cursor: pointer;
  font: 900 28px var(--cg-title); letter-spacing: 2px; display: grid; place-items: center; line-height: 1;
}
.ind-stop small { font: 700 12px var(--cg-num); letter-spacing: .5px; margin-top: 3px; }
.ind-stop:active { transform: scale(.97); }
.ind-alert { border: 2px solid var(--cg-red); padding: 8px 12px; font-size: 18px; }
.ind-alert[hidden] { display: none; }

.ind-main { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.ind-card { padding: 12px 16px; display: grid; align-content: start; gap: 4px; min-width: 0; }
.ind-card .cg-k em { font-style: normal; color: #fff; margin-left: 6px; }
.ind-big { display: flex; align-items: baseline; gap: 8px; }
.ind-big b { font-size: clamp(64px, 9vw, 150px); line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.ind-big span { font: 700 clamp(16px, 1.6vw, 26px) var(--cg-title); color: var(--cg-sec); }
.ind-card small { font-size: clamp(15px, 1.3vw, 20px); color: var(--cg-sec); }
.ind-target { --c: var(--zc); box-shadow: inset 0 -6px 0 var(--zc); }
.ind-target .ind-big b { color: var(--zc); }
.ind-real .ind-big b { color: #fff; }
.ind-real.off .ind-big b { color: var(--cg-amber); }
.ind-rem small { color: #fff; font-size: clamp(17px, 1.5vw, 24px); font-weight: 800; }

.ind-next { display: flex; align-items: baseline; gap: 12px; font-size: clamp(17px, 1.5vw, 24px); border-left: 3px solid var(--cg-cyan); padding-left: 12px; }
.ind-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ind-stats > div { border-left: var(--cg-lw) solid var(--cg-cyan); padding-left: 10px; }
.ind-stats b { font-size: clamp(24px, 2.4vw, 40px); font-variant-numeric: tabular-nums; }
.ind-adj > div { display: flex; align-items: center; gap: 10px; }
.ind-adj button { min-width: 64px; min-height: 48px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); font: 800 17px var(--cg-num); cursor: pointer; }
.ind-adj button:active { background: var(--cg-cyan); color: #000; }

.ind-anim { position: relative; height: 54px; overflow: hidden; }
.ind-ground {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 4px;
  background-image: repeating-linear-gradient(90deg, var(--cg-line) 0 26px, transparent 26px 52px);
}
.ind-rider { position: absolute; left: 22%; bottom: 8px; font-size: 40px; line-height: 1; display: inline-block; }

.ind-run .ind-prof { height: auto; flex: 1 1 120px; min-height: 100px; max-height: 280px; }
.ind-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; }
.ind-btns button { min-height: 64px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); font: 700 16px var(--cg-title); letter-spacing: 1px; cursor: pointer; }
.ind-btns button:active { background: var(--cg-cyan); color: #000; }
.ind-btns .ind-endbtn { color: #fff; border-color: var(--cg-red); }

.ind-flash { animation: indFlash .6s ease-out; }
@keyframes indFlash { from { box-shadow: inset 0 0 0 6px var(--zc); } to { box-shadow: inset 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ind-flash { animation: none; } }

/* compte à rebours, pause / arrêt, résumé : par-dessus l'écran */
.ind-cd, .ind-over, .ind-sum { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 16px; }
.ind-cd { background: rgba(0,0,0,.82); pointer-events: none; text-align: center; }
.ind-cd[hidden], .ind-over[hidden] { display: none; }
.ind-cd b { display: block; font: 900 clamp(120px, 22vw, 300px) var(--cg-title); color: var(--cg-cyan); line-height: 1; }
.ind-cd span { display: block; font-size: clamp(20px, 2vw, 30px); margin-top: 10px; }
.ind-over { background: rgba(0,0,0,.86); }
.ind-overin { width: min(560px, 100%); border: 3px solid var(--cg-red); background: #000; padding: 22px 20px; display: grid; gap: 14px; text-align: center; }
.ind-overin > b { font: 900 30px var(--cg-title); letter-spacing: 2px; }
.ind-overin p { font-size: 19px; line-height: 1.4; }
.ind-overbtns { display: grid; gap: 10px; }
.ind-overbtns button { min-height: 64px; background: #000; color: #fff; border: 2px solid #fff; font: 800 17px var(--cg-title); letter-spacing: 1px; cursor: pointer; }
.ind-overbtns button[hidden] { display: none; }
.ind-overbtns .ind-go { background: var(--cg-cyan); color: #000; border-color: var(--cg-cyan); }
.ind-simcut { position: fixed; left: 12px; bottom: 10px; z-index: 2050; background: #000; color: var(--cg-amber); border: 1px dashed var(--cg-amber); font: 600 13px var(--cg-num); padding: 6px 10px; cursor: pointer; }
.ind-simcut[hidden] { display: none; }

.ind-sum { background: rgba(0,0,0,.92); overflow-y: auto; }
.ind-sumin { width: min(760px, 100%); background: #000; border: var(--cg-lw) solid var(--cg-line); padding: 20px; display: grid; gap: 14px; }
.ind-sumgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ind-sumgrid > div { border-left: var(--cg-lw) solid var(--cg-cyan); padding-left: 10px; }
.ind-sumgrid b { font-size: 30px; font-variant-numeric: tabular-nums; }
.ind-h4 { font: 700 13px var(--cg-title); letter-spacing: 2px; color: var(--cg-cyan); }
.ind-zones { list-style: none; display: grid; gap: 6px; }
.ind-zones li { display: grid; grid-template-columns: 54px 1fr 70px; gap: 10px; align-items: center; font-size: 17px; }
.ind-zbar { height: 14px; background: rgba(255,255,255,.08); }
.ind-zbar i { display: block; height: 100%; }
.ind-zones b { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .ind-main { grid-template-columns: 1fr 1fr; }
  .ind-rem { grid-column: 1 / -1; }
  .ind-stats { grid-template-columns: 1fr 1fr; }
  .ind-sumgrid { grid-template-columns: 1fr 1fr; }
  .ind-stop { min-width: 120px; min-height: 64px; font-size: 22px; }
}
.ind-conn { min-height: 56px; font-size: 14px; color: #000; background: var(--cg-cyan); border-color: var(--cg-cyan); }

/* ----- décor animé de la séance ----- */
.ind-scenebox { position: relative; flex: 2 1 220px; min-height: 180px; max-height: 420px; border: var(--cg-lw) solid var(--cg-line-2); overflow: hidden; background: #02030a; }
.ind-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ind-lvl { position: absolute; left: 10px; top: 8px; font: 700 12px var(--cg-title); letter-spacing: 1.5px; color: #fff; background: rgba(0,0,0,.55); padding: 4px 8px; border-left: 3px solid var(--zc); }
.ind-run .ind-prof { flex: 0 0 90px; min-height: 70px; max-height: 110px; }
.ind-pts b { color: #FFB300; }
.ind-pts small { font: 700 12px var(--cg-num); color: #FFB300; min-height: 14px; }

/* ----- résumé : éclairs, niveau, badges, ressenti, duo ----- */
.ind-sum { background: rgba(0,0,0,.72); }
.ind-xp { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; border: var(--cg-lw) solid #FFB300; padding: 12px 16px; box-shadow: 0 0 24px rgba(255,179,0,.25); }
.ind-xpbig { display: grid; text-align: center; }
.ind-xpbig b { font: 900 clamp(38px, 6vw, 56px) var(--cg-title); color: #FFB300; line-height: 1; text-shadow: 0 0 18px rgba(255,179,0,.6); }
.ind-xpbig span { font: 700 12px var(--cg-title); letter-spacing: 2px; color: #FFB300; }
.ind-xpside { display: grid; gap: 6px; font-size: 17px; }
.ind-xpbar { display: block; height: 10px; background: rgba(255,255,255,.1); }
.ind-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #FFB300, #FF3B30); box-shadow: 0 0 10px #FFB300; }
.ind-up { font-style: normal; font: 900 12px var(--cg-title); color: #000; background: #FFB300; padding: 2px 6px; animation: indPop .8s ease-out; }
.ind-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.ind-badge { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border: var(--cg-lw) solid var(--cg-cyan); padding: 8px 12px; font-size: 15px; animation: indPop .7s ease-out both; }
.ind-badge i { grid-row: span 2; font-style: normal; font-size: 30px; }
.ind-badge b { font: 700 12px var(--cg-title); letter-spacing: 1.5px; color: var(--cg-cyan); }
@keyframes indPop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.ind-feel { display: grid; gap: 8px; }
.ind-feel > b { font: 700 13px var(--cg-title); letter-spacing: 2px; color: var(--cg-cyan); }
.ind-feel > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ind-feel button { min-height: 52px; background: #000; color: #fff; border: var(--cg-lw) solid var(--cg-line); font: 800 16px var(--cg-num); cursor: pointer; }
.ind-feel button.on { background: var(--cg-cyan); color: #000; }
.ind-feel button:disabled:not(.on) { opacity: .4; }
.ind-duo { list-style: none; display: grid; gap: 8px; }
.ind-duo li { display: grid; grid-template-columns: 34px 90px 1fr auto; gap: 10px; align-items: center; font-size: 17px; }
.ind-av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--u, var(--cg-cyan)); color: #fff; font: 900 14px var(--cg-title); flex: none; }

/* ----- onglet : bloc « programme automatique » ----- */
.ind .ind-auto { display: grid; gap: 10px; border: 2px solid #FFB300; box-shadow: 0 0 22px rgba(255,179,0,.18); }
.ind .ind-auto > div > b { font: 900 18px var(--cg-title); letter-spacing: 1px; color: #FFB300; }
.ind .ind-auto p { font-size: 16px; margin-top: 4px; }

/* ----- écran de lancement ----- */
.ind-launch { position: fixed; inset: 0; z-index: 1900; background: #000; color: #fff; overflow-y: auto; font-family: var(--cg-num); font-weight: 600; }
.ind-lbg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.ind-lin { position: relative; width: min(760px, calc(100% - 32px)); margin: 24px auto; background: rgba(0,0,0,.8); border: var(--cg-lw) solid var(--cg-line); padding: 18px 20px; display: grid; gap: 12px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ind-lhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ind-lx { background: #000; color: #fff; border: var(--cg-lw) solid var(--cg-line); width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.ind-ltitle { font: 900 clamp(24px, 4vw, 34px) var(--cg-title); letter-spacing: 1px; color: var(--cg-cyan); text-shadow: var(--cg-glow); }
.ind-lsub { font-size: 16px; color: var(--cg-sec); margin-top: -6px; }
.ind-lrow { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; align-items: center; }
.ind-lrow[hidden] { display: none; }
.ind-lsrc { grid-column: 2; font-size: 13px; color: var(--cg-sec); }
.ind-chips, .ind-who { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-chips button, .ind-who button { min-height: 42px; padding: 0 12px; background: #000; color: var(--cg-cyan); border: var(--cg-lw) solid var(--cg-line); font: 800 15px var(--cg-num); cursor: pointer; }
.ind-chips button.on { background: var(--cg-cyan); color: #000; border-color: var(--cg-cyan); }
.ind-who button { display: inline-flex; align-items: center; gap: 8px; color: #fff; min-height: 50px; }
.ind-who button small { color: var(--cg-sec); font-size: 13px; }
.ind-who button.on { border-color: var(--u); box-shadow: 0 0 0 1px var(--u), 0 0 16px var(--u); }
.ind-who .ind-av { width: 28px; height: 28px; }
.ind-lprof { height: 90px; }
.ind-lsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ind-lsum > div { border-left: var(--cg-lw) solid var(--cg-cyan); padding-left: 10px; display: grid; }
.ind-lsum b { font-size: 24px; font-variant-numeric: tabular-nums; }
.ind-lsum small { font-size: 12px; color: var(--cg-sec); }
.ind-why { list-style: none; display: grid; gap: 4px; font-size: 15px; line-height: 1.4; }
.ind-why li { padding-left: 16px; position: relative; }
.ind-why li::before { content: '›'; position: absolute; left: 2px; color: #FFB300; font-weight: 900; }
.ind-ldev { display: grid; gap: 8px; border-top: var(--cg-lw) solid var(--cg-line-2); padding-top: 12px; }
.ind-lgo { min-height: 72px; font-size: 20px; background: var(--cg-cyan); color: #000; border-color: var(--cg-cyan); box-shadow: 0 0 26px rgba(0,229,255,.5); animation: indGlow 2.2s ease-in-out infinite; }
.ind-lgo:disabled { animation: none; box-shadow: none; }
@keyframes indGlow { 50% { box-shadow: 0 0 46px rgba(0,229,255,.85); } }
.ind-ledit { justify-self: center; background: none; border: 0; color: var(--cg-sec); text-decoration: underline; font: 600 14px var(--cg-num); cursor: pointer; }

/* ----- tableau de bord : « séance du jour prête » ----- */
.ind-hero { position: relative; overflow: hidden; min-height: 170px; padding: 0 !important; background: #02030a !important; border: 2px solid #00E5FF !important; color: #fff; }
.ind-herobg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ind-heroin { position: relative; display: grid; gap: 6px; padding: 16px 18px; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.25) 70%, transparent); max-width: 100%; }
.ind-herok { font: 700 12px 'Orbitron', monospace; letter-spacing: 2px; color: #FFB300; }
.ind-herot { font: 900 24px 'Orbitron', monospace; color: #00E5FF; text-shadow: 0 0 10px rgba(0,229,255,.6); }
.ind-heros { font-size: 14px; color: #cfe9ff; }
.ind-herob { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.ind-herogo { min-height: 50px; padding: 0 18px; background: #00E5FF; color: #000; border: 0; font: 900 14px 'Orbitron', monospace; letter-spacing: 1px; cursor: pointer; box-shadow: 0 0 20px rgba(0,229,255,.55); }
.ind-herogo:active { transform: scale(.97); }
.ind-prop { display: grid; gap: 8px; }
.ind-propbg { width: 100%; height: 150px; display: block; border: 1px solid rgba(0,229,255,.4); }
/* séance du jour en extérieur : Coach GPS (sentier / piste cyclable) ou eau libre (montre) */
.ind-hero-gps { border-color: #2ECC71 !important; }
.ind-hero-swim { border-color: #4DA3FF !important; }
.ind-hero-gps .ind-herot { color: #7CF2A8; text-shadow: 0 0 10px rgba(46,204,113,.55); }
.ind-hero-swim .ind-herot { color: #8FD0FF; text-shadow: 0 0 10px rgba(77,163,255,.55); }
.ind-hero-gps .ind-herogo { background: #2ECC71; box-shadow: 0 0 20px rgba(46,204,113,.5); }
.ind-hero-swim .ind-herogo { background: #4DA3FF; box-shadow: 0 0 20px rgba(77,163,255,.5); }
.ind-hero-gps .ind-heroin, .ind-hero-swim .ind-heroin { background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.2) 75%, transparent); }
.ind-heroalt, .ind-propalt { justify-self: start; min-height: 44px; padding: 0 2px; background: none; border: 0; color: #cfe9ff; font: 600 14px 'Barlow Semi Condensed', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ind-propalt { color: var(--text-muted, #667); }
.ind-propbg-gps { border-color: rgba(46,204,113,.55); }
.ind-propbg-swim { border-color: rgba(77,163,255,.55); }

.btn-indoor { background: #1a1200; color: #FFB300; border-color: #FFB300; font-weight: 800; }
.btn-indoor:active { background: #FFB300; color: #000; }

@media (max-width: 600px) {
  .ind-lrow { grid-template-columns: 1fr; }
  .ind-lsrc { grid-column: 1; }
  .ind-xp { grid-template-columns: 1fr; }
  .ind-duo li { grid-template-columns: 30px 70px 1fr auto; font-size: 15px; }
  .ind-feel button { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ind-lgo, .ind-up, .ind-badge { animation: none; } }

/* ----- réglage « qualité de l'animation » ----- */
.ind-q3d { display: grid; gap: 6px; margin-top: 12px; }
.ind-q3d label { font-size: 14px; color: var(--cg-sec); }
.ind-q3d label small { font-size: 12px; opacity: .8; }
.ind-q3d select { max-width: 340px; }

/* fantômes : record du programme / l'autre profil */
.ind-ghost { position: absolute; right: 10px; top: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.ind-ghost span, .ind-ghostsum span { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--cg-title); letter-spacing: 1px; color: #fff; background: rgba(0,0,0,.55); padding: 4px 8px; border-right: 3px solid #2ECC71; }
.ind-ghost span.bad, .ind-ghostsum span.bad { border-right-color: #FFB300; }
.ind-ghost i, .ind-ghostsum i { width: 8px; height: 8px; border-radius: 50%; opacity: .8; box-shadow: 0 0 6px currentColor; }
.ind-ghost b, .ind-ghostsum b { font-size: 13px; }
.ind-ghost .ok b, .ind-ghostsum .ok b { color: #2ECC71; }
.ind-ghost .bad b, .ind-ghostsum .bad b { color: #FFB300; }
.ind-ghostsum { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ind-ghostsum p { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; }

/* défis de la semaine */
.ind-h4 small { font: 600 12px var(--cg-body, inherit); letter-spacing: 0; color: var(--cg-dim, #8a97a6); text-transform: none; }
.ind-chals { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0; padding: 0; }
.ind-chal { border: 1px solid rgba(0,229,255,.25); background: rgba(0,229,255,.04); padding: 10px 12px; display: grid; gap: 7px; }
.ind-chal.done { border-color: #2ECC71; background: rgba(46,204,113,.08); }
.ind-chalh { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; }
.ind-chalh i { grid-row: span 2; font-style: normal; font-size: 24px; text-align: center; }
.ind-chalh b { font: 800 14px var(--cg-title); letter-spacing: 1px; color: #fff; }
.ind-chalh small { font-size: 13px; color: var(--cg-dim, #8a97a6); }
.ind-chalu { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.ind-chalu .ind-av { width: 24px; height: 24px; font-size: 12px; }
.ind-chalu b { min-width: 34px; text-align: right; white-space: nowrap; }
.ind-chal.done .ind-chalh b { color: #2ECC71; }
.ind-chalwin { border-color: #2ECC71 !important; }
.ind .ind-chalp .ind-h4:first-child { margin-top: 0; }

/* carte « Partager ma séance » */
.ind-sharebtn { border-color: #FFB300 !important; color: #FFB300 !important; }
.ind-share { position: fixed; inset: 0; z-index: 2200; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 16px; }
.ind-sharein { background: #05070f; border: 1px solid rgba(0,229,255,.4); padding: 14px; display: grid; gap: 12px; max-width: min(520px, 100%); max-height: 100%; overflow: auto; }
.ind-sharein img { width: 100%; height: auto; display: block; max-height: 72dvh; object-fit: contain; }
.ind-sharein .cg-row { flex-wrap: wrap; justify-content: center; }
.ind-sharetop { justify-self: start; margin: 4px 0 10px; }

/* ---------- Dashboard : carte « Défis de la semaine » ---------- */
.ind-chalcard { background: #02030a !important; border: 1px solid rgba(255,179,0,.65) !important; color: #fff; display: grid; gap: 10px; }
.ind-cch { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ind-cch b { font: 900 15px var(--cg-title); letter-spacing: 1.5px; color: #FFB300; text-shadow: 0 0 10px rgba(255,179,0,.45); }
.ind-cch small { color: #8a97a6; font-size: 12px; }
.ind-ccs { display: flex; gap: 8px; flex-wrap: wrap; }
.ind-ccp { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; font-size: 14px; }
.ind-ccp .ind-av { width: 26px; height: 26px; font-size: 12px; }
.ind-ccp b { font: 900 15px var(--cg-title); color: #fff; }
.ind-ccp.lead { border-color: #FFB300; box-shadow: 0 0 14px rgba(255,179,0,.35); }
.ind-ccl { margin: 0; font-size: 14px; color: #FFD27A; }
.ind-cclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ind-cclist li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.ind-cclist li > i { font-style: normal; font-size: 22px; text-align: center; line-height: 1.2; }
.ind-cclist li > div { display: grid; gap: 4px; min-width: 0; }
.ind-ccn { font: 800 12px var(--cg-title); letter-spacing: 1px; color: #fff; }
.ind-ccn small { font: 600 12px system-ui, sans-serif; letter-spacing: 0; color: #8a97a6; margin-left: 4px; }
.ind-cclist li.done .ind-ccn { color: #2ECC71; }
.ind-ccb { display: grid; grid-template-columns: 20px 1fr 40px; gap: 8px; align-items: center; font-size: 12px; }
.ind-ccb .ind-av { width: 20px; height: 20px; font-size: 12px; }
.ind-ccb .ind-zbar { height: 8px; border-radius: 4px; overflow: hidden; }
.ind-ccb b { text-align: right; white-space: nowrap; }
.ind-ccnext { margin: 0; font-size: 13px; color: #cfd8e3; }
.ind-ccgo { justify-self: start; min-height: 42px; padding: 0 16px; background: #FFB300; color: #000; border: 0; font: 900 13px var(--cg-title); letter-spacing: 1px; cursor: pointer; box-shadow: 0 0 16px rgba(255,179,0,.45); }
.ind-ccgo:active { transform: scale(.97); }
.ind-cclast { margin: 0; padding: 8px 10px; border: 1px solid #FF3B30; background: rgba(255,59,48,.12); font-size: 14px; color: #fff; animation: ind-cclast 1.6s ease-in-out infinite alternate; }
@keyframes ind-cclast { from { box-shadow: 0 0 0 rgba(255,59,48,0); } to { box-shadow: 0 0 16px rgba(255,59,48,.5); } }
@media (prefers-reduced-motion: reduce) { .ind-cclast { animation: none; } }
.ind-ccbell { margin: 0; font-size: 12px; color: #8a97a6; }

/* ---------- Palmarès du duo ---------- */
.ind-ccpalm { margin: 0; font-size: 13px; color: #cfd8e3; }
.ind-ccpalm b { font: 900 14px var(--cg-title); color: #FFB300; }
.ind-cclastw { margin: 0; padding: 8px 10px; border: 1px solid rgba(255,179,0,.7); background: rgba(255,179,0,.1); font-size: 14px; color: #fff; }
.ind-palm { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.ind-palm .ind-ccp b { font: 900 16px var(--cg-title); color: #FFB300; }
.ind-palmw { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; padding: 0; }
.ind-palmw li { display: grid; justify-items: center; gap: 3px; min-width: 52px; padding: 6px 4px; border: 1px solid var(--u); background: color-mix(in srgb, var(--u) 12%, transparent); font-size: 12px; }
.ind-palmw li small { color: #8a97a6; font-size: 12px; }
.ind-palmw li .ind-av { width: 24px; height: 24px; font-size: 12px; }
.ind-palmw li b { font: 800 12px var(--cg-title); }

/* ---------- Trophée de saison ---------- */
.ind-ssn { color: #fff; }
.ind-cctn { margin-left: 2px; font-size: 14px; }
.ind-cctroph { margin: 0; padding: 10px 12px; border: 1px solid #FFD54F; background: linear-gradient(90deg, rgba(255,213,79,.22), rgba(255,179,0,.06)); font-size: 15px; font-weight: 700; color: #fff; box-shadow: 0 0 18px rgba(255,213,79,.3); }
.ind-ssbar { height: 6px; background: rgba(255,255,255,.08); margin: 4px 0 8px; }
.ind-ssbar i { display: block; height: 100%; background: linear-gradient(90deg, #FFB300, #FFD54F); }
.ind-vitr { display: grid; gap: 8px; }
.ind-vitu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ind-vitu small { color: #8a97a6; }
.ind-troph { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid #FFD54F; background: rgba(255,213,79,.1); font: 800 12px var(--cg-title); letter-spacing: .5px; color: #FFE082; }
.ind-troph i { font-style: normal; font-size: 18px; filter: drop-shadow(0 0 6px rgba(255,213,79,.7)); }

/* ---------- Cérémonie de remise du trophée ---------- */
.ind-trc { position: fixed; inset: 0; z-index: 2300; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(60,40,0,.92), rgba(2,3,10,.97) 70%); color: #fff; animation: indTrcIn .4s ease-out both; overflow: hidden; }
.ind-trc.out { animation: indTrcOut .35s ease-in both; }
.ind-trcfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ind-trcin { position: relative; display: grid; justify-items: center; gap: 10px; padding: 24px 16px; text-align: center; max-width: 560px; }
.ind-trcrays { position: absolute; left: 50%; top: 110px; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,213,79,.22) 0 10deg, rgba(255,213,79,0) 10deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 68%); mask: radial-gradient(circle, #000 15%, transparent 68%);
  animation: indTrcRays 14s linear infinite, indTrcFade 1s .6s ease-out both; }
.ind-trccup { position: relative; font-size: clamp(96px, 26vw, 150px); line-height: 1.15; margin-bottom: 6px; filter: drop-shadow(0 0 30px rgba(255,213,79,.85)); animation: indTrcDrop 1.1s cubic-bezier(.3,1.5,.5,1) both, indTrcGlow 1.8s 1.1s ease-in-out infinite alternate; }
.ind-trck { font: 700 13px var(--cg-title); letter-spacing: 2px; color: #FFD54F; animation: indTrcUp .5s 1s both; }
.ind-trct { font: 900 clamp(22px, 6vw, 34px) var(--cg-title); letter-spacing: 1px; color: #FFE082; text-shadow: 0 0 18px rgba(255,213,79,.7); animation: indTrcUp .5s 1.15s both; }
.ind-trcn { font: 900 26px var(--cg-title); color: var(--u); text-shadow: 0 0 12px var(--u); animation: indTrcUp .5s 1.3s both; }
.ind-trcs { font-size: 16px; color: #e8dcc0; animation: indTrcUp .5s 1.45s both; }
.ind-trcgo { margin-top: 14px; min-height: 52px; padding: 0 22px; border: 0; background: linear-gradient(90deg, #FFB300, #FFD54F); color: #000; font: 900 14px var(--cg-title); letter-spacing: 1px; cursor: pointer; box-shadow: 0 0 24px rgba(255,213,79,.6); animation: indTrcUp .5s 1.7s both; }
.ind-trcgo:active { transform: scale(.97); }
@keyframes indTrcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes indTrcOut { to { opacity: 0; transform: scale(1.04); } }
@keyframes indTrcDrop { 0% { transform: translateY(-110dvh) rotate(-25deg) scale(.6); } 70% { transform: translateY(0) rotate(6deg) scale(1.08); } 100% { transform: none; } }
@keyframes indTrcGlow { from { filter: drop-shadow(0 0 22px rgba(255,213,79,.6)) brightness(1); } to { filter: drop-shadow(0 0 46px rgba(255,213,79,1)) brightness(1.15); } }
@keyframes indTrcRays { to { transform: rotate(360deg); } }
@keyframes indTrcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes indTrcUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ind-trc.calm, .ind-trc.calm * { animation: none !important; }
.ind-trcsnd { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2; width: 48px; height: 48px; border: 1px solid rgba(255,213,79,.6); border-radius: 50%; background: rgba(0,0,0,.45); font-size: 22px; cursor: pointer; }
.ind-trchint { position: absolute; top: max(24px, calc(env(safe-area-inset-top) + 10px)); left: 50%; transform: translateX(-50%); z-index: 2; padding: 6px 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,213,79,.5); font-size: 14px; color: #FFE082; white-space: nowrap; animation: indTrcUp .4s both; }

/* ---------- Défi réussi en direct ---------- */
.ind-chalpop { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 18px; max-width: calc(100% - 24px); transform: translate(-50%, -50%); pointer-events: none;
  background: rgba(10,8,0,.82); border: 2px solid #FFD54F; box-shadow: 0 0 28px rgba(255,213,79,.55); color: #fff; animation: indChalPop 4.5s ease-out both; }
.ind-chalpop.first { border-color: #FFB300; box-shadow: 0 0 36px rgba(255,179,0,.8); }
.ind-chalpop i { font-style: normal; font-size: 36px; }
.ind-chalpop span { display: grid; min-width: 0; }
.ind-chalpop small { font: 700 12px var(--cg-title); letter-spacing: 1.5px; color: #FFD54F; }
.ind-chalpop b { font: 900 clamp(16px, 3vw, 24px) var(--cg-title); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-chalpop em { font: 900 clamp(18px, 3.4vw, 28px) var(--cg-title); font-style: normal; color: #FFB300; text-shadow: 0 0 12px rgba(255,179,0,.7); white-space: nowrap; }
@keyframes indChalPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 14% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -65%) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .ind-chalpop { animation: none; } }
.ind-chalpop.badge { border-color: #00E5FF; box-shadow: 0 0 28px rgba(0,229,255,.55); }
.ind-chalpop.badge small { color: #7fdcff; }

/* ---------- Collection de badges ---------- */
.ind-bcol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ind-bcol li { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 8px; text-align: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); font-size: 13px; color: #8a97a6; }
.ind-bcol li > i { font-style: normal; font-size: 30px; filter: grayscale(1) opacity(.45); }
.ind-bcol li.ok { border-color: rgba(255,179,0,.7); background: rgba(255,179,0,.08); color: #fff; }
.ind-bcol li.ok > i { filter: drop-shadow(0 0 8px rgba(255,179,0,.6)); }
.ind-bcol .ind-zbar { width: 100%; height: 5px; }
.ind-bcol .ind-zbar i { background: #FFB300; }
.ind-bcol small { font-size: 12px; }
.ind-bsw { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.ind-bsw .ind-ccp { cursor: pointer; background: transparent; color: #cfd8e3; font: inherit; font-size: 14px; }
.ind-bsw .ind-ccp.on { border-color: #FFB300; color: #fff; box-shadow: 0 0 12px rgba(255,179,0,.35); }
.ind-bsw .ind-ccp b { font: 900 14px var(--cg-title); color: #FFB300; }
.ind-bwho { display: flex; align-items: center; gap: 4px; font-style: normal; flex-wrap: wrap; justify-content: center; }
.ind-bwho .ind-av { width: 18px; height: 18px; font-size: 12px; }
.ind-bwho small { color: #FFD27A; }
.ind-bnews { margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 6px 8px 10px; border: 1px solid var(--u); border-left-width: 4px; background: color-mix(in srgb, var(--u) 12%, transparent); font-size: 14px; color: #fff; }
.ind-bnews i { font-style: normal; font-size: 24px; }
.ind-bnews b { color: var(--u); }
.ind-bnews button { width: 32px; height: 32px; border: 0; background: transparent; color: #8a97a6; font-size: 16px; cursor: pointer; }
.ind-bnews { grid-template-columns: auto 1fr auto auto; }
.ind-kbtn { min-height: 34px; padding: 0 12px; border: 1px solid var(--u) !important; background: rgba(0,0,0,.35) !important; color: #fff !important; font: 800 13px var(--cg-title); letter-spacing: .5px; cursor: pointer; width: auto !important; height: auto !important; white-space: nowrap; }
.ind-kbtn:active { transform: scale(.95); }
.ind-kdone { font-style: normal; font-size: 13px; color: #2ECC71; white-space: nowrap; }
.ind-kdone.pop { animation: indChalPop 1.2s ease-out both; animation-name: indKPop; }
@keyframes indKPop { 0% { transform: scale(.4); opacity: 0; } 40% { transform: scale(1.2); opacity: 1; } 100% { transform: none; } }
.ind-kudo { margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 6px 10px 12px; border: 2px solid var(--u); background: linear-gradient(90deg, color-mix(in srgb, var(--u) 25%, transparent), transparent); font-size: 15px; color: #fff; }
.ind-kudo i { font-style: normal; font-size: 30px; animation: indClap .5s ease-in-out 4 alternate; transform-origin: 50% 80%; }
.ind-kudo b { color: var(--u); }
.ind-kudo button { width: 32px; height: 32px; border: 0; background: transparent; color: #8a97a6; font-size: 16px; cursor: pointer; }
@keyframes indClap { from { transform: scale(1) rotate(-8deg); } to { transform: scale(1.25) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .ind-kudo i, .ind-kdone.pop { animation: none; } }
@media (max-width: 520px) { .ind-bnews { grid-template-columns: auto 1fr auto; } .ind-bnews .ind-kbtn, .ind-bnews .ind-kdone { grid-column: 2; justify-self: start; } }
.ind-bnews.troph { border-color: #FFD54F; border-left-color: var(--u); background: linear-gradient(90deg, rgba(255,213,79,.18), rgba(255,179,0,.04)); }

/* ---------- Récap de la semaine ---------- */
.ind-ccrow { display: flex; gap: 10px; flex-wrap: wrap; }
.ind-ccrec { min-height: 42px; padding: 0 16px; background: transparent; color: #7fdcff; border: 1px solid rgba(0,229,255,.6); font: 900 13px var(--cg-title); letter-spacing: 1px; cursor: pointer; }
.ind-ccrec.hot { background: #00E5FF; color: #000; border-color: #00E5FF; box-shadow: 0 0 16px rgba(0,229,255,.5); animation: indRecHot 1.6s ease-in-out infinite alternate; }
@keyframes indRecHot { to { box-shadow: 0 0 26px rgba(0,229,255,.85); } }
@media (prefers-reduced-motion: reduce) { .ind-ccrec.hot { animation: none; } }
.ind-recapbtns { float: right; display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px 10px; }

/* ---------- Records personnels ---------- */
.ind-chalpop.pr { border-color: #FF6E40; box-shadow: 0 0 30px rgba(255,110,64,.6); }
.ind-chalpop.pr small { color: #FFAB91; }
.ind-chalpop.pr em { color: #FFD54F; }
.ind-prwin { border-color: #FF6E40 !important; }
.ind-prwin b { color: #FFAB91 !important; }
.ind-recs { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 6px 0; }
.ind-recs > b { flex: 0 0 100%; font: 800 13px var(--cg-title); letter-spacing: 1px; color: #7fdcff; }
.ind-recs span { display: grid; gap: 2px; min-width: 120px; padding: 8px 12px; border: 1px solid rgba(255,110,64,.5); background: rgba(255,110,64,.07); }
.ind-recs small { font-size: 12px; color: #8a97a6; }
.ind-recs em { font: 900 18px var(--cg-title); font-style: normal; color: #fff; }
.ind-recs i { font-style: normal; font-size: 12px; color: #8a97a6; }

/* ---------- Objectif commun ---------- */
.ind-coop { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid rgba(255,213,79,.55); background: rgba(255,213,79,.06); margin: 0 0 8px; }
.ind-coop.done { border-color: #2ECC71; background: rgba(46,204,113,.1); }
.ind-cooph { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ind-cooph b { font: 900 13px var(--cg-title); letter-spacing: 1.5px; color: #FFD54F; }
.ind-coop.done .ind-cooph b { color: #2ECC71; }
.ind-cooph small { font-size: 13px; color: #cfd8e3; }
.ind-coopbar { display: flex; height: 12px; background: rgba(255,255,255,.08); overflow: hidden; border-radius: 6px; }
.ind-coopbar i { display: block; height: 100%; }
.ind-coopr { font-size: 12px; color: #8a97a6; }
.ind-chalpop.coop { border-color: #2ECC71; box-shadow: 0 0 30px rgba(46,204,113,.6); }
.ind-chalpop.coop small { color: #A5F3C4; }
.ind-coopwin { border-color: #2ECC71 !important; }
.ind-chalp .ind-coop { clear: both; }

/* ---------- Défi du week-end ---------- */
.ind-wk { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; margin: 0 0 8px; border: 2px solid #B388FF; background: linear-gradient(90deg, rgba(179,136,255,.22), rgba(0,229,255,.05)); color: #fff; clear: both; }
.ind-wk.done { border-color: #2ECC71; }
.ind-wk > i { font-style: normal; font-size: 34px; }
.ind-wk span { display: grid; gap: 2px; min-width: 0; }
.ind-wk small { font: 800 12px var(--cg-title); letter-spacing: 1.5px; color: #D1B3FF; }
.ind-wk b { font: 900 17px var(--cg-title); letter-spacing: .5px; }
.ind-wk em { font-style: normal; font-size: 13px; color: #cfd8e3; }
.ind-wk.done em { color: #2ECC71; }
.ind-wkgo { min-height: 42px; padding: 0 14px; border: 0; background: #B388FF; color: #000; font: 900 13px var(--cg-title); letter-spacing: 1px; cursor: pointer; box-shadow: 0 0 16px rgba(179,136,255,.5); white-space: nowrap; }
@media (max-width: 520px) { .ind-wk { grid-template-columns: auto 1fr; } .ind-wkgo { grid-column: 1 / -1; } }

/* ---------- Ma progression ---------- */
.ind-pg { margin: 10px 0; padding: 10px 12px 6px; border: 1px solid rgba(0,229,255,.25); background: rgba(0,229,255,.03); }
.ind-pgh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ind-pgh b { font: 800 13px var(--cg-title); letter-spacing: 1px; color: #7fdcff; }
.ind-pgleg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #cfd8e3; }
.ind-pgleg i { display: inline-block; width: 14px; height: 10px; }
.ind-pgleg i.dash { height: 0; border-top: 3px dashed; margin-left: 8px; }
.ind-pgsvg { display: block; width: 100%; height: auto; margin-top: 4px; }
.ind-pgsvg text { fill: #8a97a6; font: 600 15px 'Barlow Semi Condensed', sans-serif; }
.ind-pgsvg .ind-pgmax { fill: #cfd8e3; }
.ind-pgtrend { margin: 6px 0; font-size: 14px; }
.ind-pgtrend.up b { color: #2ECC71; }
.ind-pgtrend.down b { color: #FFB300; }

/* ---------- Express / Strava ---------- */
.ind-ccexp { color: #FFD54F; border-color: rgba(255,213,79,.6); }
.ind-strava { border-color: #FC4C02 !important; color: #FC4C02 !important; }
.ind-stravahint { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid #FC4C02; background: rgba(252,76,2,.08); font-size: 14px; }
.ind-stravahint a { color: #FC4C02; font-weight: 700; }

/* ---------- Plan de la semaine ---------- */
.ind-plan { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ind-plan li { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgba(0,229,255,.35); border-left: 4px solid #00E5FF; background: rgba(0,229,255,.05); }
.ind-plan li.added { border-left-color: #2ECC71; }
.ind-plan b { font: 900 14px var(--cg-title); letter-spacing: 1px; color: #fff; }
.ind-plan span { font-size: 15px; color: #fff; }
.ind-plan small { font-size: 12px; color: #8a97a6; }
.ind-plan em { font-style: normal; font-size: 12px; color: #2ECC71; }
.ind-plok { color: #2ECC71; font-size: 15px; }
/* ---------- Dérive cardiaque ---------- */
.ind-drift { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 4; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; width: min(620px, calc(100% - 20px)); padding: 10px 12px; background: rgba(30,0,6,.88); border: 2px solid #FF3B30; box-shadow: 0 0 24px rgba(255,59,48,.5); color: #fff; animation: indTrcUp .4s both; }
.ind-drift i { font-style: normal; font-size: 30px; animation: indClap .45s ease-in-out infinite alternate; }
.ind-drift span { display: grid; gap: 2px; min-width: 0; }
.ind-drift b { font: 900 15px var(--cg-title); color: #FF8A80; }
.ind-drift small { font-size: 13px; color: #f3d6d6; }
.ind-drift button { min-height: 40px; padding: 0 12px; border: 1px solid #FF8A80; background: transparent; color: #fff; font: 800 13px var(--cg-title); cursor: pointer; }
.ind-drift button[data-dr=down] { background: #FF3B30; border-color: #FF3B30; }
.ind-driftwin { border-color: #FF3B30 !important; }
.ind-driftwin b { color: #FF8A80 !important; }
@media (max-width: 520px) { .ind-drift { grid-template-columns: auto 1fr; } .ind-drift button { grid-row: 2; } .ind-drift button[data-dr=down] { grid-column: 1; } }

/* ---------- Pied de séance : ambiance + mode TV ---------- */
.ind-btns { grid-template-columns: repeat(3, 1fr) auto; }
.ind-smalls { display: grid; gap: 6px; }
.ind-btns .ind-small { min-height: 29px; padding: 0 10px; font-size: 12px; letter-spacing: .5px; white-space: nowrap; }
@media (max-width: 600px) { .ind-btns { grid-template-columns: repeat(3, 1fr); } .ind-smalls { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
/* ---------- Mode TV : décor en plein écran, chiffres géants par-dessus ---------- */
.ind-run.ind-tv { overflow: hidden; padding: 10px 16px 12px; gap: 10px; }
.ind-tv > .ind-scenebox { position: absolute; inset: 0; max-height: none; min-height: 0; border: 0; }
.ind-tv > .ind-scenebox > canvas { width: 100%; height: 100%; }
.ind-tv > .ind-scenebox::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.1) 45%, rgba(0,0,0,.55)); pointer-events: none; }
.ind-tv > .ind-top, .ind-tv > .ind-main, .ind-tv > .ind-next, .ind-tv > .ind-stats, .ind-tv > .ind-btns, .ind-tv > .ind-alert { position: relative; z-index: 1; }
.ind-tv > .ind-prof { display: none; }
.ind-tv .ind-card { background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.ind-tv .ind-big b { font-size: min(26dvh, 14vw); text-shadow: 0 4px 24px rgba(0,0,0,.8); }
.ind-tv .ind-big span { font-size: min(4dvh, 2.4vw); }
.ind-tv .ind-top b { font-size: min(6dvh, 3.4vw); }
.ind-tv .ind-name b { font-size: min(4dvh, 2.4vw); }
.ind-tv .ind-next b { font-size: min(4.4dvh, 2.8vw); }
.ind-tv .ind-stats b { font-size: min(7dvh, 4.4vw); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.ind-tv .ind-btns { margin-top: auto; }
.ind-tv .ind-btns button { background: rgba(0,0,0,.55); }
.ind-tv .ind-chalpop, .ind-tv .ind-drift { z-index: 5; }
.ind-tv .ind-chalpop { top: 62%; }
.ind-tv .ind-chalpop b { font-size: min(5dvh, 3vw); }
.ind-tv .ind-lvl { display: none; }
.ind-ccmonth { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #FFD54F; background: linear-gradient(90deg, rgba(255,213,79,.2), rgba(255,213,79,.03)); font-size: 15px; font-weight: 700; color: #fff; }
.ind-ccmonth .ind-ccrec { color: #FFD54F; border-color: #FFD54F; min-height: 36px; }
.ind-mwin { border-color: #FFB300; }

/* ---------- Aide ---------- */
.ind-help { display: grid; gap: 6px; }
.ind-help details { border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 10px; padding: 0 12px; }
.ind-help summary { display: flex; align-items: center; gap: 10px; min-height: 46px; cursor: pointer; list-style: none; }
.ind-help summary::-webkit-details-marker { display: none; }
.ind-help summary::after { content: '▾'; margin-left: auto; opacity: .5; }
.ind-help details[open] summary::after { content: '▴'; }
.ind-help summary i { font-style: normal; font-size: 20px; width: 26px; text-align: center; }
.ind-help p { margin: 0 0 12px 36px; line-height: 1.45; }
.ind-cchelp { width: 26px; height: 26px; margin-right: 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; font-size: 12px; cursor: pointer; vertical-align: middle; }
.ind-helpbtn { color: #cfd8e3; border-color: rgba(255,255,255,.3); }
.ind-free .ind-btns { grid-template-columns: repeat(2, 1fr) auto; }
@media (max-width: 600px) {
  .ind-recapbtns { float: none; display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 10px; }
  .ind-recapbtns .ind-ccrec { min-height: 44px; padding: 0 8px; font-size: 12px; }
  .ind-recapbtns .ind-helpbtn { grid-column: 1 / -1; }
}

/* ---------- Séance interrompue ---------- */
.ind-resume { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; background: #0b0d18 !important; border: 2px solid #FFB300 !important; color: #fff; }
.ind-resume > i { font-style: normal; font-size: 30px; }
.ind-resume span { display: grid; gap: 2px; min-width: 0; }
.ind-resume b { font: 900 15px var(--cg-title, sans-serif); color: #FFB300; letter-spacing: .5px; }
.ind-resume small { font-size: 13px; color: #cfd8e3; }
.ind-resgo { min-height: 44px; padding: 0 16px; border: 0; background: #FFB300; color: #000; font: 900 13px var(--cg-title, sans-serif); cursor: pointer; }
.ind-resx { min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #cfd8e3; cursor: pointer; }
@media (max-width: 600px) { .ind-resume { grid-template-columns: auto 1fr; } .ind-resgo, .ind-resx { grid-column: span 1; } }

/* ---------- Séance épique / légendaire ---------- */
.ind-epic { position: fixed; inset: 0; z-index: 2150; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 35%, rgba(90,30,10,.97), rgba(2,3,10,.98) 65%); animation: indTrcIn .35s ease-out both; }
.ind-epic.legend { background: radial-gradient(circle at 50% 35%, rgba(95,70,8,.97), rgba(2,3,10,.98) 65%); }
.ind-epic.out { animation: indTrcOut .3s ease-in both; }
.ind-epicin { display: grid; justify-items: center; gap: 12px; width: min(560px, 100%); max-height: 100%; overflow: auto; text-align: center; color: #fff; }
.ind-epick { font: 800 13px var(--cg-title); letter-spacing: 2px; color: #FFAB91; }
.ind-epic.legend .ind-epick { color: #FFD54F; }
.ind-epict { font: 900 clamp(24px, 6.5vw, 40px) var(--cg-title); letter-spacing: 1px; color: #FF8A65; text-shadow: 0 0 22px rgba(255,110,64,.8); animation: indEpicT .7s cubic-bezier(.3,1.6,.5,1) both; }
.ind-epic.legend .ind-epict { color: #FFE082; text-shadow: 0 0 26px rgba(255,213,79,.9); }
@keyframes indEpicT { from { transform: scale(.3) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ind-epic ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.ind-epic li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; padding: 8px 12px; text-align: left; border: 1px solid rgba(255,213,79,.5); background: rgba(0,0,0,.45); opacity: 0; animation: indEpicLi .5s var(--d) cubic-bezier(.3,1.4,.5,1) forwards; }
.ind-epic li i { font-style: normal; font-size: 30px; text-align: center; }
.ind-epic li span { display: grid; min-width: 0; }
.ind-epic li small { font: 800 12px var(--cg-title); letter-spacing: 1.5px; color: #FFD54F; }
.ind-epic li b { font-size: 17px; }
@keyframes indEpicLi { from { opacity: 0; transform: translateX(-30px) scale(.9); } to { opacity: 1; transform: none; } }
.ind-epicgo { margin-top: 8px; min-height: 50px; padding: 0 22px; border: 0; background: linear-gradient(90deg, #FF6E40, #FFD54F); color: #000; font: 900 14px var(--cg-title); letter-spacing: 1px; cursor: pointer; }
.ind-epic.calm, .ind-epic.calm * { animation: none !important; opacity: 1 !important; }

/* ---------- Défi lancé à l'autre ---------- */
.ind-dare { margin: 0; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 8px 10px 12px; border: 2px solid var(--u); background: linear-gradient(90deg, color-mix(in srgb, var(--u) 22%, transparent), rgba(0,0,0,.2)); color: #fff; font-size: 14px; }
.ind-dare > i { font-style: normal; font-size: 28px; }
.ind-dare b { color: var(--u); }
.ind-dare em { font-style: normal; font-weight: 800; color: #FFB300; }
.ind-dare.res { border-width: 1px; }
.ind-daregx { min-height: 40px; padding: 0 14px; border: 0; background: var(--u); color: #000; font: 900 13px var(--cg-title); letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
.ind-darex { width: 32px; height: 32px; border: 0; background: transparent; color: #8a97a6; font-size: 16px; cursor: pointer; }
.ind-darebtn { border-color: #B388FF !important; color: #D1B3FF !important; }
.ind-darewin { border-color: #B388FF !important; }
.ind-darewin.lost { border-color: #8a97a6 !important; }
.ind-chalpop.dare { border-color: #B388FF; box-shadow: 0 0 30px rgba(179,136,255,.6); }
@media (max-width: 520px) { .ind-dare { grid-template-columns: auto 1fr auto; } .ind-daregx { grid-column: 2; justify-self: start; } }

/* ---------- Fil « Quoi de neuf » ---------- */
.ind-feed { display: grid; gap: 6px; padding: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.ind-feedh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 2px; }
.ind-feedh b { font: 900 12px var(--cg-title); letter-spacing: 1.5px; color: #7fdcff; }
.ind-feedh small { font-size: 12px; color: #8a97a6; }
.ind-feed .ind-more { display: none; }
.ind-feed.open .ind-more { display: grid; }
.ind-feed.open .ind-ccmonth.ind-more { display: flex; }
.ind-feedmore { justify-self: start; min-height: 34px; padding: 0 12px; border: 1px solid rgba(0,229,255,.4); background: transparent; color: #7fdcff; font: 800 12px var(--cg-title); cursor: pointer; }

/* ---------- Tutoriel ---------- */
.ind-tuto { position: fixed; inset: 0; z-index: 2400; }
.ind-tutohole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.72), 0 0 0 3px #00E5FF, 0 0 24px rgba(0,229,255,.7); transition: all .35s ease; pointer-events: none; }
.ind-tutobox { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 24px)); padding: 16px; background: #05070f; border: 2px solid #00E5FF; color: #fff; display: grid; gap: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); transition: top .35s ease, left .35s ease; }
.ind-tutobox b { font: 900 17px var(--cg-title); letter-spacing: .5px; color: #00E5FF; }
.ind-tutobox p { margin: 0; font-size: 15px; line-height: 1.45; color: #e6edf5; }
.ind-tutobtns { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ind-tutobtns small { margin-right: auto; color: #8a97a6; }
.ind-tutobtns button { min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #cfd8e3; cursor: pointer; font: 800 13px var(--cg-title); }
.ind-tutobtns [data-t=next] { background: #00E5FF; border-color: #00E5FF; color: #000; }
@media (prefers-reduced-motion: reduce) { .ind-tutohole, .ind-tutobox { transition: none; } }

/* ---------- Mode sans appareil ---------- */
.ind-mancheck { border: 1px solid rgba(46,204,113,.5); background: rgba(46,204,113,.07); padding: 8px 10px; }
.ind-mancheck b { color: #2ECC71; }
.ind-nobt { border-left-color: #2ECC71 !important; }
.ind-manual .ind-target .ind-big b { color: var(--zc); }
.ind-manual .ind-adj { visibility: hidden; }
.ind-vols { display: grid; gap: 10px; margin: 10px 0; }
.ind-vols label { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 14px; }
.ind-vols small { color: #8a97a6; }
.ind-vols input[type=range] { grid-column: 1; width: 100%; accent-color: #00E5FF; }
.ind-vols output { grid-column: 2; grid-row: 2; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Depuis le début ---------- */
.ind-allt { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.ind-allt div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border: 1px solid rgba(255,213,79,.4); background: rgba(255,213,79,.05); text-align: center; }
.ind-allt i { font-style: normal; font-size: 24px; }
.ind-allt b { font: 900 20px var(--cg-title); color: #fff; }
.ind-allt small { font-size: 12px; color: #8a97a6; }
.ind-allfun { margin: 4px 0 10px; font-size: 15px; color: #FFD54F; font-weight: 700; }
.ind-allp { width: 100%; border-collapse: collapse; font-size: 14px; }
.ind-allp th, .ind-allp td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: right; }
.ind-allp tbody th { text-align: left; color: #8a97a6; font-weight: 600; }
.ind-allp thead th { font: 900 14px var(--cg-title); }
.ind-allp-s:empty { display: none; }

/* ---------- Sans matériel : carte + minuteur ---------- */
.ind-circh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ind-circh b { font: 900 15px var(--cg-title); letter-spacing: 1.5px; color: #2ECC71; }
.ind-circh small { color: #8a97a6; font-size: 13px; }
.ind-circbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ind-circbtns button { display: grid; gap: 3px; text-align: left; min-height: 64px; padding: 10px 12px; border: 1px solid rgba(46,204,113,.5); background: rgba(46,204,113,.07); color: #fff; cursor: pointer; }
.ind-circbtns button b { font: 900 15px var(--cg-title); }
.ind-circbtns button small { font-size: 12px; color: #a8e6bf; }
.ind-circbtns button:active { transform: scale(.98); }
.ind-circ { --zc: #00E5FF; position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto 1fr auto auto; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--zc) 22%, #05070f), #02030a 70%); color: #fff; font-family: var(--cg-num); }
.ind-circ header { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ind-circ header > b { flex: 1; font: 900 16px var(--cg-title); color: #00E5FF; }
.ind-circ header span { font-variant-numeric: tabular-nums; color: #cfd8e3; }
.ind-cpts b { color: #FFB300; font: 900 20px var(--cg-title); }
.ind-circ header button { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.ind-cmain { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 16px; text-align: center; }
.ind-cmain small { font: 800 13px var(--cg-title); letter-spacing: 2px; color: var(--zc); }
.ind-cmain h2 { margin: 0; font: 900 clamp(28px, 7vw, 56px) var(--cg-title); }
.ind-cmain p { margin: 0; max-width: 560px; font-size: clamp(15px, 2.6vw, 20px); color: #cfd8e3; }
.ind-cring { position: relative; width: min(52vw, 44dvh, 300px); aspect-ratio: 1; margin: 10px 0; }
.ind-cring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ind-cring circle { fill: none; stroke-width: 9; }
.ind-cring .bg { stroke: rgba(255,255,255,.1); }
.ind-cring .fg { stroke: var(--zc); stroke-linecap: round; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 8px var(--zc)); }
.ind-cring b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(56px, 16vw, 120px) var(--cg-num); font-variant-numeric: tabular-nums; }
.ind-cnext { font-size: 15px !important; color: #8a97a6 !important; }
.ind-circ.rest .ind-cmain h2 { color: #4DA3FF; }
.ind-cbar { height: 6px; background: rgba(255,255,255,.08); }
.ind-cbar i { display: block; height: 100%; background: var(--zc); transition: width .25s linear; }
.ind-circ footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.ind-circ footer button { min-height: 60px; background: rgba(0,0,0,.4); color: #00E5FF; border: 1px solid rgba(0,229,255,.5); font: 800 15px var(--cg-title); letter-spacing: 1px; cursor: pointer; }
.ind-circ footer .ind-endbtn { color: #fff; border-color: #FF3B30; }
.ind-circ.done { grid-template-rows: 1fr; place-items: center; overflow: auto; }
.ind-csum { display: grid; gap: 10px; justify-items: center; width: min(560px, 100%); padding: 20px 16px; text-align: center; }
.ind-csum small { font: 800 13px var(--cg-title); letter-spacing: 2px; color: #2ECC71; }
.ind-csum h2 { margin: 0; font: 900 26px var(--cg-title); color: #00E5FF; }
.ind-csum .ind-allt { width: 100%; }
.ind-cwin { margin: 0; padding: 8px 12px; border: 1px solid #2ECC71; background: rgba(46,204,113,.1); width: 100%; }

/* ---------- Mon matériel ---------- */
.ind-equip p { margin: 0 0 10px; }
.ind-equipl { display: grid; gap: 8px; margin-bottom: 10px; }
.ind-equipl button { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; text-align: left; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border, rgba(0,0,0,.15)); border-radius: 12px; background: var(--card, #fff); color: inherit; cursor: pointer; }
.ind-equipl button.on { border-color: #00A3E0; box-shadow: 0 0 0 2px rgba(0,163,224,.25); }
.ind-equipl i { font-style: normal; font-size: 28px; text-align: center; }
.ind-equipl span { display: grid; gap: 2px; }
.ind-equipl small { opacity: .7; }
.ind-equipline { margin: 0 0 10px; font-size: 14px; color: #cfd8e3; }
.ind-linkbtn { border: 0; background: none; padding: 0; color: #00E5FF; text-decoration: underline; cursor: pointer; font: inherit; }
.ind-circdash { background: #05070f !important; border: 1px solid rgba(46,204,113,.6) !important; color: #fff; }
/* Sans matériel : séance du jour, plan */
.ind-circbtns button.today { border-color: #FFD24D; background: rgba(255,210,77,.12); box-shadow: 0 0 0 1px #FFD24D inset; }
.ind-circbtns button.today small::after { content: ' · aujourd’hui'; color: #FFD24D; font-weight: 700; }
.ind-circh small b { color: #FFD24D; }
.ind-plan li { position: relative; }
.ind-plango { justify-self: start; margin-top: 4px; padding: 6px 14px; border: 0; background: #2ECC71; color: #04210f; font: 900 13px var(--cg-title); letter-spacing: .06em; cursor: pointer; }
.ind-csum .ind-allt { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 480px) { .ind-csum .ind-allt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ind-clen { display: inline-flex; margin: 0 0 10px; border: 1px solid rgba(46,204,113,.5); }
.ind-clen button { padding: 6px 14px; border: 0; background: transparent; color: #a8e6bf; font: 700 13px var(--cg-body, inherit); cursor: pointer; }
.ind-clen button + button { border-left: 1px solid rgba(46,204,113,.5); }
.ind-clen button.on { background: #2ECC71; color: #04210f; }
.ind-csumbtns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 8px; }
.ind-circ .ind-share { z-index: 5; }
/* Bonhomme animé des séances sans matériel */
.ind-cstage { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 4vw, 40px); flex-wrap: wrap; }
.ind-fig { width: min(40vw, 38dvh, 260px); aspect-ratio: 1; overflow: visible; }
.ind-fig .gnd { stroke: rgba(255,255,255,.18); stroke-width: 1.2; }
.ind-fig polyline, .ind-fig line[data-p], .ind-fig circle { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4.2; }
.ind-fig .fr * { stroke: #fff; filter: drop-shadow(0 0 3px var(--zc)); }
.ind-fig .fr circle { fill: #fff; }
.ind-fig .bd * { stroke: color-mix(in srgb, var(--zc) 70%, #fff); opacity: .75; }
.ind-circ.rest .ind-fig, .ind-circ.ready .ind-fig { opacity: .55; }
@media (max-width: 560px) { .ind-cstage { gap: 4px; } .ind-fig { width: min(38vw, 30dvh); } .ind-cstage .ind-cring { width: min(46vw, 34dvh); } }

/* Téléphones à encoche ou à barre de gestes (iPhone, Android) : rien sous l'heure ni sous la barre du bas */
.ind-run { padding: max(14px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.ind-lin { margin-top: max(24px, calc(env(safe-area-inset-top, 0px) + 8px)); margin-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px)); }
.ind-circ header { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
.ind-cd, .ind-over, .ind-sum, .ind-share, .ind-epic { padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- Plein écran : la 3D en fond, un bandeau d'infos semi-transparent en haut, une barre des blocs fine en bas,
   les commandes cachées pendant l'effort (elles reviennent au toucher / à la souris). STOP reste toujours visible. ---------- */
.ind-run.ind-full { display: block; padding: 0; gap: 0; overflow: hidden; }
.ind-full > .ind-scenebox { position: absolute; inset: 0; max-height: none; min-height: 0; border: 0; z-index: 0; }
.ind-full > .ind-scenebox::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 80%, rgba(0,0,0,.35)); }
.ind-full .ind-lvl { top: auto; bottom: 46px; left: 12px; }
.ind-full .ind-band { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 14px) 8px calc(env(safe-area-inset-left, 0px) + 14px);
  background: linear-gradient(rgba(3,7,16,.74), rgba(3,7,16,.52)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08); }
.ind-full b, .ind-full small { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* ligne 1 : nom de la séance, temps, éclairs, appareil, STOP */
.ind-full .ind-top { display: flex; align-items: center; gap: 6px 18px; flex-wrap: nowrap; border: 0; padding: 0; min-width: 0; }
.ind-full .ind-name { flex: 1 1 auto; min-width: 0; }
.ind-full .ind-name b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ind-full .ind-name small { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ind-full .ind-tt { text-align: left; }
.ind-full .ind-tt .cg-k { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.ind-full .ind-tt b { font-size: 17px; }
.ind-full .ind-pts small { display: none; }
.ind-full .ind-dev { font-size: 12px; white-space: nowrap; max-width: 22vw; overflow: hidden; text-overflow: ellipsis; }
.ind-full .ind-stop { min-width: 70px; min-height: 40px; font-size: 16px; border-width: 2px; flex: 0 0 auto; }
.ind-full .ind-stop small { display: none; }
.ind-full .ind-alert { font-size: 13px; padding: 4px 8px; }
/* ligne 2 : cible / réel / reste bloc, puis FC / cadence / distance / intensité */
.ind-full .ind-bandrow { display: flex; gap: 8px 14px; align-items: stretch; }
.ind-full .ind-main { flex: 3 1 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ind-full .ind-rem { grid-column: auto; }
.ind-full .ind-card { padding: 4px 10px 5px; gap: 0; background: rgba(255,255,255,.05); border-radius: 6px; box-shadow: none; }
.ind-full .ind-card::before, .ind-full .ind-card::after { display: none; }
.ind-full .ind-target { box-shadow: inset 0 -3px 0 var(--zc); }
.ind-full .ind-card .cg-k { font-size: 12px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-full .ind-card .cg-k em { margin-left: 3px; }
.ind-full .ind-big { gap: 3px; }
.ind-full .ind-big b { font-size: clamp(24px, 3vw, 42px); letter-spacing: 0; line-height: 1; }
.ind-full .ind-big span { font-size: 12px; }
.ind-full .ind-card small { font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ind-full .ind-rem small { font-size: 12px; }
.ind-full .ind-stats { flex: 4 1 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; }
.ind-full .ind-stats > div { padding-left: 8px; border-left-width: 2px; min-width: 0; }
.ind-full .ind-stats .cg-k { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.ind-full .ind-stats b { font-size: clamp(15px, 1.6vw, 22px); white-space: nowrap; }
.ind-full .ind-adj > div { gap: 6px; }
.ind-full .ind-adj button { min-width: 44px; min-height: 34px; font-size: 13px; background: rgba(0,0,0,.45); transition: opacity .25s; }
.ind-full:not(.ctl-on) .ind-adj button { opacity: 0; pointer-events: none; }
.ind-full .ind-next { font-size: 12px; gap: 8px; padding: 2px 0 0 8px; border-left-width: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-full .ind-next .cg-k { font-size: 12px; }
/* bas : barre des blocs fine et transparente, commandes au-dessus (cachées pendant l'effort) */
.ind-full > .ind-prof { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); width: 100%; height: 26px; min-height: 0; max-height: none; z-index: 2; opacity: .6; }
.ind-full .ind-btns { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 36px); z-index: 3; margin: 0; gap: 8px;
  transition: opacity .3s, transform .3s; }
.ind-full .ind-btns > button { min-height: 48px; background: rgba(3,7,16,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ind-full:not(.ctl-on) .ind-btns { opacity: 0; transform: translateY(12px); pointer-events: none; }
.ind-full .ind-simcut { bottom: auto; top: 46%; left: 12px; font-size: 12px; }
.ind-full .ind-chalpop { top: 52%; }
/* téléphone en hauteur : le bandeau passe sur deux lignes compactes */
@media (max-width: 760px) {
  .ind-full .ind-band { padding-left: 10px; padding-right: 10px; gap: 5px; }
  .ind-full .ind-top { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; align-items: end; gap: 2px 10px; }
  .ind-full .ind-name { grid-column: 1 / 5; grid-row: 1; }
  .ind-full .ind-tt { grid-row: 2; }
  .ind-full .ind-tt b { font-size: 16px; }
  .ind-full .ind-dev { grid-row: 2; grid-column: 4; justify-self: end; max-width: 100%; }
  .ind-full .ind-stop { grid-column: 5; grid-row: 1 / 3; min-width: 64px; min-height: 44px; }
  .ind-full .ind-bandrow { flex-direction: column; gap: 5px; }
  .ind-full .ind-main { gap: 5px; }
  .ind-full .ind-card { padding: 3px 7px 4px; }
  .ind-full .ind-big b { font-size: clamp(22px, 7.4vw, 30px); }
  .ind-full .ind-card small { font-size: 12px; }
  .ind-full .ind-stats { gap: 4px 6px; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .ind-full .ind-stats > div { padding-left: 6px; }
  .ind-full .ind-stats b { font-size: 14px; }
  .ind-full .ind-adj .cg-k { display: none; }
  .ind-full .ind-adj button { min-width: 38px; min-height: 30px; font-size: 12px; }
  .ind-full .ind-btns { grid-template-columns: repeat(3, 1fr); }
  .ind-full .ind-btns > button { min-height: 44px; font-size: 13px; }
  .ind-full .ind-smalls { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
/* téléphone couché : tout tient sur deux lignes en haut, le décor au milieu */
@media (max-height: 520px) and (orientation: landscape) {
  .ind-full .ind-band { gap: 4px; padding-top: calc(env(safe-area-inset-top, 0px) + 5px); padding-bottom: 5px; }
  .ind-full .ind-big b { font-size: 24px; }
  .ind-full .ind-card small { display: none; }
  .ind-full .ind-next { display: none; }
  .ind-full .ind-stop { min-height: 36px; }
  .ind-full .ind-btns > button { min-height: 40px; }
}

/* ---------- Personnage : éditeur dans le lanceur ---------- */
.ind-pedit { min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: #fff; font: 700 13px var(--cg-num, sans-serif); cursor: pointer; border-radius: 8px; }
.ind-perso { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(0,0,0,.35); }
.ind-perso[hidden] { display: none; }
.ind-sws button { min-width: 40px; padding: 4px; }
.ind-sw { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); vertical-align: middle; }
.ind-sws button.on .ind-sw { box-shadow: 0 0 0 3px #00E5FF; }

/* éditeur ouvert : seul le personnage et ses réglages restent, en bas ; l'aperçu 3D occupe le haut de l'écran */
.ind-pediting .ind-lin { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; margin: 0; max-height: 50vh; overflow-y: auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
.ind-pediting .ind-lin > :not([data-l=avrow]):not([data-l=perso]) { display: none; }
/* étiquettes du bandeau en police étroite (12 px minimum, sans déborder sur téléphone) */
.ind-full .cg-k, .ind-full .ind-name small { font-family: var(--cg-num, 'Barlow Semi Condensed', sans-serif); letter-spacing: .02em; text-transform: uppercase; font-weight: 700; }
.ind-full .ind-stats > div, .ind-full .ind-tt { min-width: 0; overflow: hidden; }
.ind-full .ind-stats .cg-k, .ind-full .ind-tt .cg-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 760px) {
  .ind-full .ind-top { grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, 1fr) auto; }
  .ind-full .ind-tt b { font-size: 15px; }
}

/* ---------- Transition T2 (enchaînement vélo → course) ---------- */
.ind-t2 { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: #040a14; color: #fff; overflow-y: auto; }
.ind-t2-in { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: center; }
.ind-t2-k { margin: 0; font: 800 15px/1.2 var(--cg-num, system-ui); letter-spacing: .14em; color: #00E5FF; }
.ind-t2-clock { font: 900 clamp(64px, 24vw, 120px)/1 var(--cg-num, system-ui); font-variant-numeric: tabular-nums; }
.ind-t2-tip { margin: 0; font-size: 16px; line-height: 1.45; color: #d6e2f0; }
.ind-t2-adj { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: #b9c7d8; }
.ind-t2-b, .ind-t2-w, .ind-t2-conn, .ind-t2-x { min-height: 48px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font: 700 16px/1.2 system-ui, sans-serif; cursor: pointer; }
.ind-t2-b { min-width: 72px; }
.ind-t2-where { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ind-t2-w { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px; font-size: 17px; }
.ind-t2-w small { font-size: 13px; font-weight: 600; color: #b9c7d8; }
.ind-t2-w.on { border-color: #00E5FF; background: rgba(0, 229, 255, .16); box-shadow: 0 0 0 2px rgba(0, 229, 255, .35) inset; }
.ind-t2-dev { margin: 0; min-height: 22px; font-size: 15px; color: #d6e2f0; }
.ind-t2-go { min-height: 60px; border: 0; border-radius: 14px; background: #00E676; color: #04210f; font: 900 20px/1.1 var(--cg-num, system-ui); letter-spacing: .06em; cursor: pointer; }
.ind-t2-x { background: transparent; border-color: transparent; color: #b9c7d8; text-decoration: underline; font-weight: 600; }
.ind-t2 button:focus-visible { outline: 3px solid #FFD54F; outline-offset: 2px; }