/* module-skin.css — style TOKENISÉ des modules montés (treadmill/resonance/mind) dans l'écosystème.
   Leur CSS vit dans leurs index.html standalone → absent ici. On le réécrit sur les tokens Cadence,
   avec un accent-signal par module (#app.mod-*). fithub (Corps) a son propre CSS (.fh-root). */

#app { --acc: var(--sig-souffle); }
#app.mod-walk { --acc: var(--sig-marche); }
#app.mod-breath { --acc: var(--sig-souffle); }
#app.mod-mind { --acc: var(--sig-mind); }
#app.mod-walk, #app.mod-breath, #app.mod-mind { align-items: center; text-align: center; }

[hidden] { display: none !important; }
.status { font: 600 var(--t-label-sm-size) var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--cad-text-3); }
.streak { font-weight: 600; color: var(--acc); min-height: 1.2em; }
.link { background: none; border: 0; color: var(--acc); font: inherit; cursor: pointer; text-decoration: underline; }
.guidance { min-height: 1.2em; color: var(--cad-text); opacity: .85; max-width: 30ch; }

/* boutons */
.btn { font: inherit; font-weight: 500; padding: 13px 20px; border: 1px solid var(--cad-hairline); border-radius: var(--r-md); color: var(--cad-text); background: var(--cad-surface-2); cursor: pointer; transition: transform .1s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--acc), color-mix(in oklab, var(--acc) 66%, #fff)); border-color: transparent; color: #06121e; font-weight: 600; box-shadow: 0 6px 24px color-mix(in oklab, var(--acc) 22%, transparent); }
.btn.ghost { opacity: .8; background: none; }
.btn.small { padding: 9px 14px; font-size: var(--t-body-sm-size); }

/* champs */
.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-l { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }
.inp { font: inherit; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--cad-hairline); background: var(--cad-surface-2); color: var(--cad-text); }
.inp:focus { outline: none; border-color: var(--acc); }
.inp:disabled { opacity: .6; }
.field .inp { width: 110px; text-align: center; }
.inp.tiny { width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.inp.num2 { width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
.set-section { margin: 14px 0 2px; font: 600 var(--t-label-sm-size) var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); text-align: left; opacity: .9; }

/* dropdown */
.picker { position: relative; display: flex; justify-content: center; }
.drop { font: inherit; padding: 11px 38px 11px 16px; min-width: 220px; border-radius: var(--r-md); cursor: pointer; color: var(--cad-text); background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); }
.droplist { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 260px; max-width: 86vw; z-index: 5; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-card); max-height: 60vh; overflow: auto; }
.item { font: inherit; text-align: left; padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--cad-text); cursor: pointer; }
.item:hover { background: color-mix(in oklab, var(--acc) 18%, transparent); }
.field .drop { min-width: 130px; padding: 10px 30px 10px 12px; }

/* métriques / chiffre sacré */
.metrics { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--cad-text-2); font-variant-numeric: tabular-nums; transition: opacity .6s; }
.metrics.dim { opacity: .12; }
.metric { font-size: var(--t-body-sm-size); }
.beat { font: 600 var(--n-lg-size) var(--font-data); color: var(--cad-text); }
.big { font: 600 var(--n-sacred-size) var(--font-data); line-height: .82; color: var(--cad-text); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px color-mix(in oklab, var(--acc) 40%, transparent); }
.unit { color: var(--cad-text-3); letter-spacing: .12em; }
.target { color: var(--acc); min-height: 1.1em; }
.today { color: var(--cad-text-3); font-variant-numeric: tabular-nums; }
.progwrap { width: 100%; max-width: 380px; height: 8px; background: rgba(255,255,255,.08); border-radius: var(--r-pill); overflow: hidden; margin-top: 8px; }
.progbar { height: 100%; background: linear-gradient(90deg, var(--acc), color-mix(in oklab, var(--acc) 66%, #fff)); transition: width .5s; }
.proginfo { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }
.proginfo.warn { color: var(--state-lost); }
.live-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; width: 100%; margin-top: 10px; }
.m { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 14px; font-variant-numeric: tabular-nums; }

/* résumé + zones */
.sum-title { font: 700 var(--t-h3-size) var(--font-ui); margin-bottom: 12px; }
.sum-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.sum-cell { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.sum-k { color: var(--cad-text-3); font-size: var(--t-body-sm-size); } .sum-v { font: 600 var(--n-stat-size) var(--font-data); font-variant-numeric: tabular-nums; }
.zones { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.zbar { display: grid; grid-template-columns: 36px 1fr 42px; align-items: center; gap: 8px; font-size: var(--t-body-sm-size); color: var(--cad-text-3); }
.ztrack { height: 10px; background: rgba(255,255,255,.07); border-radius: var(--r-pill); overflow: hidden; }
.zfill { height: 100%; border-radius: var(--r-pill); }
.z1 { background: #4fa3ff; } .z2 { background: var(--sig-marche); } .z3 { background: var(--sig-corps); } .z4 { background: #ff8c4b; } .z5 { background: var(--sig-coeur); }

/* historique / séances */
.hist-tot { color: var(--cad-text-3); font-size: var(--t-body-sm-size); margin-bottom: 10px; }
.hist-list { display: flex; flex-direction: column; gap: 6px; }
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--cad-surface); border-radius: var(--r-sm); font-size: var(--t-body-sm-size); font-variant-numeric: tabular-nums; }
.hrow.muted { color: var(--cad-text-3); }
.hist-title { font: 700 var(--t-h3-size) var(--font-ui); margin-bottom: 8px; }
.hist-sub { color: var(--cad-text-3); font-size: var(--t-body-sm-size); margin: 8px 0; }
.hist-empty { color: var(--cad-text-3); font-size: var(--t-body-sm-size); padding: 8px 0; }
.hist-chart { margin: 6px 0 4px; }
.hrow-info { display: flex; flex: 1; justify-content: space-between; gap: 8px; cursor: pointer; }
.del { padding: 6px 9px; opacity: .6; }

/* vitesse / inclinaison */
.speedctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { min-width: 48px; font-weight: 700; }
.step { font-size: 1.5rem; min-width: 54px; }
.pos { font: inherit; font-size: var(--t-body-sm-size); padding: 8px 13px; border-radius: var(--r-pill); cursor: pointer; color: var(--cad-text-3); background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); }
.pos.on { color: #06121e; background: var(--acc); border-color: transparent; font-weight: 600; }
.incline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.incline-label { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }

/* builder */
.builder { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 440px; padding: 14px; background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-lg); text-align: left; }
.seg-list, .setup, .workouts, .wk-list, .summary { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; }
.seg-row { display: flex; align-items: center; gap: 6px; }
.seg-i { color: var(--cad-text-3); width: 12px; text-align: center; }
.seg-u { color: var(--cad-text-3); font-size: .68rem; white-space: nowrap; }
.del-seg { width: 20px; height: 20px; border: 0; background: none; color: var(--cad-text-3); cursor: pointer; }
.kind { min-width: 54px; font-size: .74rem; border-radius: var(--r-sm); border: 1px solid var(--cad-hairline); padding: 6px 8px; }
.kind.effort { background: color-mix(in oklab, var(--sig-coeur) 22%, transparent); border-color: color-mix(in oklab, var(--sig-coeur) 45%, transparent); }
.kind.recovery { background: color-mix(in oklab, var(--sig-souffle) 22%, transparent); }
.kind.warmup { background: color-mix(in oklab, var(--sig-corps) 22%, transparent); }
.wk-sub { color: var(--cad-text-3); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin: 8px 0 2px; }

/* orbe (resonance/mind) — même langage que makeOrb */
.orb { width: clamp(170px,58vw,270px); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 36%, color-mix(in oklab, var(--acc) 38%, #fff), var(--acc)); box-shadow: 0 0 60px color-mix(in oklab, var(--acc) 50%, transparent);
  transform: scale(.72); transition: transform 1s cubic-bezier(.37,0,.63,1), box-shadow .9s, background .9s; cursor: pointer; }
.cue { font: 600 .78rem var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: rgba(6,18,30,.62); user-select: none; }

/* mind : état / eeg / correction */
.state { font: 700 var(--t-title-size) var(--font-ui); color: var(--cad-text); }
.why { color: var(--cad-text-3); font-size: var(--t-body-sm-size); max-width: 32ch; }
.eeg { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.eeg-bands, .eeg-depth, .eeg-hb { font: 500 var(--t-body-sm-size) var(--font-data); color: var(--cad-text-2); font-variant-numeric: tabular-nums; }
.eeg-hb { color: var(--sig-coherence); }
.correctWrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.correct, .chipbtn { font: inherit; font-size: var(--t-body-sm-size); padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--cad-hairline); background: var(--cad-surface-2); color: var(--cad-text-2); cursor: pointer; }

/* ── Marche : vue active (designer 03/26) — FC héros + zone bar + waveform + grille 6 cartes ── */
#app.mod-walk .metrics { width: 100%; max-width: 440px; align-items: stretch; text-align: left; gap: 12px; }
#app.mod-walk .progpill { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); }
#app.mod-walk .progpill-i { width: 18px; height: 18px; border-radius: 5px; background: color-mix(in oklab, var(--sig-marche) 32%, transparent); flex: 0 0 auto; }
#app.mod-walk .progpill-name { font: 600 var(--t-body-size) var(--font-ui); color: var(--cad-text); }
#app.mod-walk .progpill-seg { margin-left: auto; color: var(--cad-text-3); font-size: var(--t-body-sm-size); }
#app.mod-walk .hrhero { background: linear-gradient(180deg, color-mix(in oklab, var(--sig-coeur) 12%, var(--cad-surface)), var(--cad-surface)); border: 1px solid color-mix(in oklab, var(--sig-coeur) 24%, var(--cad-hairline)); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
#app.mod-walk .hrhero-l { font: 600 var(--t-label-sm-size) var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cad-text-3); }
#app.mod-walk .hrhero-row { display: flex; align-items: flex-end; gap: 8px; }
#app.mod-walk .hrbig { font: 600 var(--n-sacred-size) var(--font-data); line-height: .82; color: var(--cad-text); font-variant-numeric: tabular-nums; text-shadow: 0 0 34px color-mix(in oklab, var(--sig-coeur) 50%, transparent); }
#app.mod-walk .hrhero-u { font: 500 1.2rem var(--font-ui); color: var(--sig-coeur); margin-bottom: 6px; }
#app.mod-walk .hrhero-zone { margin-left: auto; text-align: right; }
#app.mod-walk .zonelabel { font: 600 var(--t-h3-size) var(--font-ui); color: var(--sig-coeur); }
#app.mod-walk .zonesub { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }
#app.mod-walk .zonebar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
#app.mod-walk .zseg { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); }
#app.mod-walk .zseg.z1 { background: #4fa3ff; } #app.mod-walk .zseg.z2 { background: var(--sig-marche); } #app.mod-walk .zseg.z3 { background: var(--sig-corps); } #app.mod-walk .zseg.z4 { background: #ff8c4b; } #app.mod-walk .zseg.z5 { background: var(--sig-coeur); }
#app.mod-walk .hrwave { height: 52px; }
#app.mod-walk .hrwave-svg { width: 100%; height: 52px; display: block; overflow: visible; }
#app.mod-walk .hrwave-base { fill: none; stroke: color-mix(in oklab, var(--sig-coeur) 42%, #000); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
#app.mod-walk .hrwave-live { fill: none; stroke: var(--sig-coeur); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 180 2200; filter: drop-shadow(0 0 5px color-mix(in oklab, var(--sig-coeur) 70%, transparent)); animation: ecgSweep 2.4s linear infinite; }
@keyframes ecgSweep { from { stroke-dashoffset: 2380; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { #app.mod-walk .hrwave-live { animation: none; stroke-dasharray: none; } }
/* carte Cadence (pas) — onde carrée signature, sous la grille */
#app.mod-walk .stepscard { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
#app.mod-walk .stepscard-head { display: flex; align-items: center; gap: 10px; }
#app.mod-walk .stepscard-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sig-marche); box-shadow: 0 0 10px var(--sig-marche); flex: 0 0 auto; }
#app.mod-walk .stepscard-name { font: 600 var(--t-body-size) var(--font-ui); color: var(--cad-text); }
#app.mod-walk .stepscard-sub { font: 400 var(--t-body-sm-size) var(--font-data); color: var(--cad-text-3); }
#app.mod-walk .stepscard-val { margin-left: auto; font: 500 var(--t-body-sm-size) var(--font-data); color: var(--sig-marche); }
#app.mod-walk .stepswave { height: 48px; }
#app.mod-walk .stepswave-svg { width: 100%; height: 48px; display: block; overflow: visible; }
#app.mod-walk .stepswave-line { fill: none; stroke: var(--sig-marche); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in oklab, var(--sig-marche) 55%, transparent)); transition: opacity .3s; }

/* compte à rebours de démarrage (5 s) */
.countdown { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(8,11,16,.86); backdrop-filter: blur(4px); }
.count-num { font: 700 clamp(90px,30vw,170px) var(--font-data); color: var(--sig-marche); line-height: 1; text-shadow: 0 0 44px color-mix(in oklab, var(--sig-marche) 55%, transparent); animation: cadPulse 1s ease-in-out infinite; }
.count-lbl { font: 600 var(--t-body-size) var(--font-ui); color: var(--cad-text-2); letter-spacing: .12em; text-transform: uppercase; }

/* ── Marche : résumé (designer 15) ── */
#app.mod-walk .summary { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
#app.mod-walk .sum-hero { background: linear-gradient(180deg, color-mix(in oklab, var(--sig-marche) 12%, var(--cad-surface)), var(--cad-surface)); border: 1px solid color-mix(in oklab, var(--sig-marche) 22%, var(--cad-hairline)); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow-card); }
#app.mod-walk .sum-hero-l { font: 600 var(--t-label-sm-size) var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--cad-text-3); text-align: center; }
#app.mod-walk .sum-hero-l b { color: var(--cad-text-2); font-weight: 600; }
#app.mod-walk .sum-time { font: 600 var(--n-sacred-size) var(--font-data); line-height: .85; color: var(--cad-text); font-variant-numeric: tabular-nums; text-shadow: 0 0 34px color-mix(in oklab, var(--sig-marche) 45%, transparent); }
#app.mod-walk .sum-streak { font: 600 var(--t-body-sm-size) var(--font-data); color: var(--sig-corps); padding: 6px 14px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--sig-corps) 14%, transparent); border: 1px solid color-mix(in oklab, var(--sig-corps) 26%, transparent); }
#app.mod-walk .sum-date { font: 500 var(--t-body-sm-size) var(--font-data); color: var(--cad-text-3); }
#app.mod-walk .summary .mcard-v i { font: 500 .72rem var(--font-ui); font-style: normal; color: var(--sig-marche); margin-left: 2px; }
#app.mod-walk .sum-zonecard { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
#app.mod-walk .sum-zone-head { display: flex; align-items: center; justify-content: space-between; }
#app.mod-walk .sum-zone-seg { font: 600 var(--t-label-sm-size) var(--font-data); color: var(--cad-text-3); }
#app.mod-walk .sum-zonebar { display: flex; gap: 3px; height: 12px; }
#app.mod-walk .sum-zseg { border-radius: var(--r-pill); min-width: 5px; }
#app.mod-walk .sum-zseg.z1 { background: #4fa3ff; } #app.mod-walk .sum-zseg.z2 { background: var(--sig-marche); } #app.mod-walk .sum-zseg.z3 { background: var(--sig-corps); } #app.mod-walk .sum-zseg.z4 { background: #ff8c4b; } #app.mod-walk .sum-zseg.z5 { background: var(--sig-coeur); }
#app.mod-walk .sum-zone-labels { display: flex; justify-content: space-between; font: 600 var(--t-label-sm-size) var(--font-ui); color: var(--cad-text-3); }

/* ── Marche : prêt / réglages / historique / séances (polish design system) ── */
#app.mod-walk .today { align-self: center; padding: 8px 16px; border-radius: var(--r-pill); background: var(--cad-surface); border: 1px solid var(--cad-hairline); color: var(--cad-text-3); font: 500 var(--t-body-sm-size) var(--font-data); font-variant-numeric: tabular-nums; }
#app.mod-walk .setup { width: 100%; max-width: 440px; background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
#app.mod-walk .setup .picker, #app.mod-walk .setup .drop { width: 100%; min-width: 0; }
#app.mod-walk .setup .droplist { width: 100%; }
#app.mod-walk .link { align-self: flex-start; }
#app.mod-walk .incline-row { width: 100%; max-width: 440px; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); flex-wrap: nowrap; }
#app.mod-walk .incline-label { color: var(--cad-text-2); font-size: var(--t-body-sm-size); }
#app.mod-walk .builder { box-shadow: var(--shadow-card); }
#app.mod-walk .sum-title { font: 700 var(--t-h3-size) var(--font-ui); margin-bottom: 6px; }
#app.mod-walk .hist-tot { color: var(--cad-text-3); font-size: var(--t-body-sm-size); margin-bottom: 4px; }
#app.mod-walk .hist-list, #app.mod-walk .wk-list { gap: 8px; }
#app.mod-walk .hrow { padding: 13px 15px; border: 1px solid var(--cad-hairline); border-radius: var(--r-md); background: var(--cad-surface); }
#app.mod-walk .hrow.tappable { cursor: pointer; }
#app.mod-walk .hrow.tappable:hover { border-color: color-mix(in oklab, var(--sig-marche) 40%, var(--cad-hairline)); }
#app.mod-walk .hrow.muted { border-style: dashed; background: none; color: var(--cad-text-3); }
#app.mod-walk .hrow .del { color: var(--cad-text-3); } #app.mod-walk .hrow .del:hover { color: var(--sig-coeur); }

/* ── Marche : Réglages · Marche (designer 16) ── */
#app.mod-walk .settings16 { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
#app.mod-walk .settings16 .set-section { margin: 6px 0 0; }
/* grille de programmes */
#app.mod-walk .prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#app.mod-walk .prog-card { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--cad-hairline); background: var(--cad-surface); cursor: pointer; }
#app.mod-walk .prog-card.on { border-color: var(--sig-marche); box-shadow: 0 0 0 1px var(--sig-marche), 0 0 18px color-mix(in oklab, var(--sig-marche) 22%, transparent); }
#app.mod-walk .prog-card-add { border-style: dashed; justify-content: center; align-items: flex-start; opacity: .85; }
#app.mod-walk .prog-card-n { font: 600 var(--t-body-size) var(--font-ui); color: var(--cad-text); }
#app.mod-walk .prog-card-s { font: 400 var(--t-body-sm-size) var(--font-ui); color: var(--cad-text-3); }
/* cartes de réglage (veste / objectif / démo) */
#app.mod-walk .set-card { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
#app.mod-walk .set-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#app.mod-walk .set-card-l { font: 600 var(--t-body-size) var(--font-ui); color: var(--cad-text); }
#app.mod-walk .set-card-v { font: 600 var(--t-body-size) var(--font-data); color: var(--sig-marche); font-variant-numeric: tabular-nums; }
#app.mod-walk .set-card-sub { font-size: var(--t-body-sm-size); color: var(--cad-text-3); }
/* slider */
#app.mod-walk .set-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--sig-marche), var(--cad-hairline-2, rgba(255,255,255,.12))); outline: none; }
#app.mod-walk .set-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px color-mix(in oklab, var(--sig-marche) 60%, transparent); cursor: pointer; }
#app.mod-walk .set-slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
#app.mod-walk .set-scale { display: flex; justify-content: space-between; font-size: var(--t-label-sm-size); color: var(--cad-text-3); }
/* segmented toggle (objectif) */
#app.mod-walk .seg { display: inline-flex; background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); border-radius: var(--r-pill); padding: 3px; gap: 2px; align-self: flex-start; }
#app.mod-walk .seg-btn { font: 600 var(--t-body-sm-size) var(--font-ui); padding: 6px 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--cad-text-3); cursor: pointer; }
#app.mod-walk .seg-btn.on { background: var(--sig-marche); color: #06121e; }
#app.mod-walk .mode-row { display: flex; gap: 8px; width: 100%; max-width: 440px; margin-bottom: 10px; }
#app.mod-walk .btn.mode-btn { flex: 1; opacity: .55; }
#app.mod-walk .btn.mode-btn.on { opacity: 1; border-color: var(--sig-marche); color: var(--sig-marche); }
#app.mod-walk .gps-prog { width: 100%; max-width: 440px; margin-bottom: 10px; }
#app.mod-walk .sum-splits { display: flex; flex-direction: column; gap: 2px; }
#app.mod-walk .split-row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-body-sm-size); font-variant-numeric: tabular-nums; padding: 5px 0; border-top: 1px solid var(--cad-hairline); }
#app.mod-walk .split-row.rest { color: var(--cad-text-3); }
#app.mod-walk .split-row.run span:first-child { color: var(--sig-marche); font-weight: 600; }
#app.mod-walk .set-goalval { width: 100%; text-align: left; font: 600 var(--n-stat-size) var(--font-data); background: none; border: 0; border-bottom: 1px solid var(--cad-hairline); border-radius: 0; padding: 4px 0; }
/* toggle switch (démo) */
#app.mod-walk .toggle { width: 46px; height: 26px; border-radius: var(--r-pill); border: 1px solid var(--cad-hairline); background: var(--cad-surface-2); position: relative; cursor: pointer; padding: 0; transition: background .2s; }
#app.mod-walk .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--cad-text-3); transition: transform .2s, background .2s; }
#app.mod-walk .toggle.on { background: color-mix(in oklab, var(--sig-marche) 40%, transparent); border-color: transparent; }
#app.mod-walk .toggle.on::after { transform: translateX(20px); background: var(--sig-marche); }
/* barre export */
#app.mod-walk .set-exportbar { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--cad-hairline); background: var(--cad-surface); cursor: pointer; }
#app.mod-walk .set-export-ic { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 5px; background: color-mix(in oklab, var(--sig-marche) 26%, transparent); }
#app.mod-walk .set-export-col { display: flex; flex-direction: column; flex: 1; }
#app.mod-walk .set-export-t { font: 600 var(--t-body-size) var(--font-ui); color: var(--cad-text); }
#app.mod-walk .set-export-s { font: 400 var(--t-body-sm-size) var(--font-data); color: var(--cad-text-3); }
#app.mod-walk .set-export-chev { color: var(--cad-text-3); font-size: 1.3rem; }
/* avancé */
#app.mod-walk .set-adv { border-top: 1px solid var(--cad-hairline); padding-top: 8px; }
#app.mod-walk .set-adv-sum { font: 600 var(--t-body-sm-size) var(--font-ui); color: var(--cad-text-3); cursor: pointer; padding: 8px 0; }
#app.mod-walk .set-adv[open] .set-adv-sum { color: var(--cad-text-2); }
#app.mod-walk .live-grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
#app.mod-walk .mcard { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 5px; text-align: left; }
#app.mod-walk .mcard-l { font: 600 var(--t-label-sm-size) var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--cad-text-3); }
#app.mod-walk .mcard-vrow { display: flex; align-items: baseline; gap: 4px; }
#app.mod-walk .mcard-v { font: 600 var(--n-stat-size) var(--font-data); color: var(--cad-text); font-variant-numeric: tabular-nums; }
#app.mod-walk .mcard-u { font: 500 .72rem var(--font-ui); color: var(--sig-marche); }
#app.mod-walk .speedctl { display: flex; align-items: stretch; gap: 10px; width: 100%; max-width: 440px; }
#app.mod-walk .sp-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 8px 0; }
#app.mod-walk .sp-val { font: 600 var(--n-lg-size) var(--font-data); color: var(--cad-text); font-variant-numeric: tabular-nums; line-height: 1; }
#app.mod-walk .sp-u { color: var(--cad-text-3); font-size: .7rem; letter-spacing: .1em; }
#app.mod-walk .step { font-size: 1.6rem; min-width: 56px; }
#app.mod-walk .pente-pill { display: flex; align-items: center; padding: 10px 14px; border-radius: var(--r-md); background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); color: var(--cad-text-2); font-size: var(--t-body-sm-size); white-space: nowrap; }
#app.mod-walk .quickrow { display: flex; gap: 6px; justify-content: center; width: 100%; max-width: 440px; }

/* ── Mind : vue état + EEG (designer 06/20) ── */
#app.mod-mind .status, #app.mod-mind .why, #app.mod-mind .loop, #app.mod-mind .suggest,
#app.mod-mind .correct, #app.mod-mind .eeg, #app.mod-mind .coh-card { width: 100%; max-width: 440px; }
#app.mod-mind { text-align: left; }
.mind-badges { display: flex; gap: 6px; justify-content: flex-end; width: 100%; max-width: 440px; }
.cbadge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--r-pill); font: 600 var(--t-label-sm-size) var(--font-ui); border: 1px solid var(--cad-hairline); background: var(--cad-surface-2); color: var(--cad-text-2); }
.cbadge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--state-connected, #4fe0a0); box-shadow: 0 0 8px var(--state-connected, #4fe0a0); }
.cbadge-muse { color: var(--sig-mind); } .cbadge-muse::before { background: var(--sig-mind); box-shadow: 0 0 8px var(--sig-mind); }
.cbadge-h10 { color: var(--sig-coeur); } .cbadge-h10::before { background: var(--sig-coeur); box-shadow: 0 0 8px var(--sig-coeur); }
.mind-head { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 440px; }
.mind-orb { width: clamp(84px, 22vw, 108px); flex: 0 0 auto; transform: none; cursor: default; }
.mind-headcol { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mind-staterow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#app.mod-mind .state { font: 700 var(--t-title-size) var(--font-ui); color: var(--cad-text); }
.confpill { padding: 4px 11px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--sig-mind) 16%, transparent); border: 1px solid color-mix(in oklab, var(--sig-mind) 34%, transparent); color: var(--sig-mind); font: 600 var(--t-label-sm-size) var(--font-ui); }
.confpill:empty { display: none; }
.mind-card { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
.eeg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.eeg-title { font: 600 var(--t-label-sm-size) var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cad-text-3); }
#app.mod-mind .eeg-depth { font: 600 var(--t-body-sm-size) var(--font-data); color: var(--cad-text-2); font-variant-numeric: tabular-nums; }
.bandchart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; height: 92px; }
.bandcol { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.band-pct { font: 600 var(--t-label-sm-size) var(--font-data); color: var(--cad-text-3); }
.band-track { width: 100%; flex: 1; display: flex; align-items: flex-end; background: rgba(255,255,255,.05); border-radius: var(--r-sm); overflow: hidden; }
.band-fill { width: 100%; min-height: 4px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--sig-mind) 55%, transparent); transition: height .5s; }
.band-alpha { background: var(--sig-mind); } .band-theta { background: color-mix(in oklab, var(--sig-mind) 70%, #fff 0%); } .band-delta { background: color-mix(in oklab, var(--sig-mind) 40%, transparent); } .band-beta { background: color-mix(in oklab, var(--sig-coherence) 60%, transparent); }
.band-l { font: 600 var(--t-body-size) var(--font-data); color: var(--cad-text-2); }
.coh-card { cursor: pointer; }
/* Cohérence plein écran (designer 02) — tap sur la carte → vue immersive */
#app.mod-mind .coh-card.coh-full { position: fixed; inset: 0; z-index: 40; margin: 0; max-width: none; border-radius: 0; background: var(--cad-bg, #080b10); justify-content: center; align-items: center; gap: 22px; padding: calc(30px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom)); }
#app.mod-mind .coh-card.coh-full .coh-head { display: none; }
#app.mod-mind .coh-card.coh-full .coh-msg { max-width: 30ch; text-align: center; color: var(--cad-text-2); font-size: var(--t-body-size); }
#app.mod-mind .coh-back { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 18px; background: none; border: 0; color: var(--cad-text); font: 700 var(--t-h3-size) var(--font-ui); cursor: pointer; }
.coh-head { display: flex; align-items: center; gap: 12px; }
.coh-ico { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 40% 35%, var(--sig-coeur), var(--sig-mind)); box-shadow: 0 0 16px color-mix(in oklab, var(--sig-coherence) 50%, transparent); }
.coh-col { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.coh-title { font: 600 var(--t-body-size) var(--font-ui); color: var(--cad-text); }
#app.mod-mind .eeg-hb { color: var(--sig-coherence); font: 500 var(--t-body-sm-size) var(--font-data); }
.coh-chev { color: var(--cad-text-3); font-size: 1.4rem; }

/* bouton danger (stop pleine largeur) — réutilisable */
.btn.danger { background: color-mix(in oklab, var(--sig-coeur) 15%, var(--cad-surface)); border-color: color-mix(in oklab, var(--sig-coeur) 42%, transparent); color: var(--sig-coeur); font-weight: 600; }
.stop-full { width: 100%; max-width: 440px; }

/* contrôles (bas) */
.controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }

/* Module Sommeil / Récup (bague R02) */
#app.mod-sleep { --sig: var(--sig-sommeil); }
.sleep-l { color: var(--cad-text-3); font-size: var(--t-body-sm-size); margin: 8px 0 12px; }
.sleep-status { color: var(--cad-text-2); font-size: var(--t-body-sm-size); margin: 10px 0; text-align: center; }
.sleep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; width: 100%; max-width: 440px; }
.sleep-card { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 12px 14px; }
.sleep-card-l { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }
.sleep-card-v { font: 700 1.4rem var(--font-data); color: var(--cad-text); font-variant-numeric: tabular-nums; margin-top: 4px; }
.sleep-goal { margin-top: 12px; color: var(--sig-sommeil); font: 600 var(--t-body-size) var(--font-ui); text-align: center; }
#sleepRec { margin-top: 16px; }

/* Panneau diagnostic « test bague » — replié, discret, technique. */
.sleep-diag { margin-top: 20px; width: 100%; max-width: 440px; border: 1px solid var(--cad-hairline); border-radius: var(--r-md); background: var(--cad-surface-3); }
.sleep-diag > summary { cursor: pointer; padding: 10px 14px; color: var(--cad-text-3); font-size: var(--t-body-sm-size); list-style: none; user-select: none; }
.sleep-diag > summary::-webkit-details-marker { display: none; }
.sleep-diag[open] > summary { border-bottom: 1px solid var(--cad-hairline); }
.sleep-diag-info { padding: 8px 14px 0; color: var(--cad-text-4); font: 500 var(--t-meta-size) var(--font-data); }
.sleep-diag-btns { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.sleep-diag-btns .btn.diag { padding: 5px 10px; font-size: var(--t-meta-size); background: var(--cad-surface-2); border: 1px solid var(--cad-hairline-2); border-radius: var(--r-sm); color: var(--cad-text-2); }
.sleep-diag-log { margin: 0 14px 14px; max-height: 220px; overflow: auto; padding: 10px; background: var(--cad-bg); border-radius: var(--r-sm); color: var(--sig-marche-lite); font: 400 11px var(--font-data); white-space: pre; line-height: 1.5; }