/* =============================================================================
 * style.css — Tablette 4:3 (iPad 1024x768), PC et téléphone ; profils adulte/enfant.
 * Compatible Safari iOS 12 : pas de `gap` sur flexbox (Safari 14.1+), pas de
 * :is()/:where(), SVG en position absolue dans les blocs flex.
 * ============================================================================= */
:root {
  --bg: #eef1f5;
  --bar: #1e293b;
  --bar-fg: #f1f5f9;
  --panel: #ffffff;
  --fg: #0f172a;
  --muted: #64748b;
  --line: #d6dbe3;
  --accent: #2563eb;
  --ok: #16a34a;
  --warn: #f59e0b;
  --bad: #dc2626;
  --early: #7c3aed;
  --late: #ea580c;
  --key: #ffffff;
  --key-stroke: #334155;
  --btn: #334155;
  --btn-fg: #f8fafc;
  --paper: #fffdf8;
  --band: rgba(250, 204, 21, .16);
  --band-line: rgba(234, 179, 8, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --bar: #0f172a; --panel: #111a2b; --fg: #e2e8f0;
    --muted: #94a3b8; --line: #22304a; --key: #1c2740; --key-stroke: #94a3b8;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --bar: #0f172a; --panel: #111a2b; --fg: #e2e8f0;
  --muted: #94a3b8; --line: #22304a; --key: #1c2740; --key-stroke: #94a3b8;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
.hidden { display: none !important; }
.adult .kid-only, .kid .adult-only { display: none !important; }
.small { font-size: 13px; color: var(--muted); }

/* ---------------- Barre d'outils ---------------- */
.toolbar {
  -webkit-flex: 0 0 auto; flex: 0 0 auto;
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  padding: 4px 6px;
  padding-top: calc(4px + env(safe-area-inset-top));
  background: var(--bar);
  color: var(--bar-fg);
}
.toolbar > * { margin: 3px 3px; }
.brand { font-weight: 700; font-size: 17px; white-space: nowrap; margin-right: 6px; }

select, input[type=number] {
  font: inherit;
  font-size: 15px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #f8fafc;
  padding: 0 6px;
  max-width: 200px;
}
.btn {
  display: inline-block;
  font: inherit;
  font-size: 15px;
  height: 36px;
  line-height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid #475569;
  background: var(--btn);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.btn:active { opacity: .7; }
.btn.sq { width: 38px; padding: 0; }
.btn.small { height: 30px; line-height: 28px; font-size: 14px; padding: 0 10px; }
.btn.mini { height: 26px; line-height: 24px; width: 32px; padding: 0; font-size: 14px; float: right; }
.btn.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn.danger { background: var(--bad); border-color: var(--bad); font-weight: 600; }
.btn.on, .btn.toggle.on { background: #0f766e; border-color: #14b8a6; }
.btn.err { background: #7f1d1d; }
.btn.libbtn { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.btn input[type=file], .scard input[type=file] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.seg { display: -webkit-flex; display: flex; border: 1px solid #475569; border-radius: 9px; overflow: hidden; }
.seg button {
  font: inherit; font-size: 15px; height: 34px; padding: 0 11px;
  border: 0; background: transparent; color: var(--bar-fg); cursor: pointer; white-space: nowrap;
}
.seg button + button { border-left: 1px solid #475569; }
.seg button.on { background: var(--accent); color: #fff; font-weight: 600; }

.tempo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.tempo input { width: 56px; text-align: center; margin: 0 3px; }
.tempo .unit { margin-left: 4px; font-size: 13px; color: #94a3b8; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #475569; vertical-align: -1px; margin-right: 5px; }
.dot.beat { background: #facc15; }
.dot.accent { background: #f43f5e; }

/* ---------------- Zone principale ---------------- */
main {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  min-height: 0;
}

/* Partition : toujours sur fond papier clair, comme une vraie partition */
#scoreWrap {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  min-height: 120px;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  background: var(--paper);
  color: #111;
  position: relative;
}
#scoreHead {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 5px 12px 0; font-size: 14px; color: #475569; min-height: 30px;
}
#scoreHead .titles { -webkit-flex: 0 1 auto; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#scoreHead strong { color: #0f172a; font-size: 16px; margin-right: 6px; }
.fb {
  -webkit-flex: 1 1 auto; flex: 1 1 auto; text-align: right; margin-left: 10px;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-transition: opacity .6s; transition: opacity .6s;
}
.fb.fade { opacity: 0; }
.fb.bad, .fb.wrong { color: var(--bad); }
.fb.warn { color: #b45309; }
.fb.early { color: var(--early); }
.fb.late { color: var(--late); }
.fb.missed { color: #737373; }
#scoreScroll { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; }
#scoreTrack { position: relative; }
#score { width: 100%; }
#fx { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
/* Défilement horizontal : la piste glisse (GPU), la clé reste collée à gauche */
.layout-scroll #scoreScroll { overflow: hidden; }
.layout-scroll #scoreTrack { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; }
#stickyClef {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; display: none;
  background: linear-gradient(90deg, var(--paper) 80%, rgba(255, 253, 248, 0));
  padding-right: 18px;
}
#stickyClef.on { display: block; }
#stickyClef svg { display: block; }
/* Décompte : à droite, loin de la note en cours de lecture (au tiers gauche) */
#countIn {
  position: absolute; right: 4%; top: 50%; width: 96px; height: 96px; margin-top: -48px;
  border-radius: 50%; background: rgba(245, 158, 11, .92); color: #fff; z-index: 7;
  font-size: 54px; font-weight: 800; line-height: 96px; text-align: center; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
#countIn.go { background: rgba(34, 197, 94, .95); font-size: 38px; }

.score-svg { display: block; color: #111; }
.score-svg .sl { stroke: #555; stroke-width: 1; }
.score-svg .bl { stroke: #222; stroke-width: 1.2; }
.score-svg .lg { stroke: #333; stroke-width: 1.2; }
.score-svg .clef { fill: none; stroke: #111; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.score-svg .clef.thick { stroke-width: 2.8; }
.score-svg .acc { fill: none; stroke: currentColor; stroke-width: 1.2; }
.score-svg .acc.thick { stroke-width: 2.6; }
.score-svg .ts { font: bold 21px Georgia, "Times New Roman", serif; text-anchor: middle; fill: #111; }
.score-svg .mn { font-size: 10px; fill: #999; }
.score-svg .tie { fill: #222; }
.score-svg .breath { fill: none; stroke: #0369a1; stroke-width: 1.8; stroke-linecap: round; }
.score-svg .cursor { fill: rgba(37, 99, 235, .12); stroke: rgba(37, 99, 235, .45); stroke-width: 1; }
.score-svg .nn { font-size: 11px; font-weight: 700; text-anchor: middle; fill: #64748b; }
.score-svg .ly { font-size: 12.5px; text-anchor: middle; fill: #334155; }
.score-svg .startline { stroke: #16a34a; stroke-width: 2; stroke-dasharray: 3 3; }
.score-svg .startflag { fill: #16a34a; }

/* Ligne en cours : bande surlignée ; les autres sont estompées */
.sys { -webkit-transition: opacity .35s; transition: opacity .35s; }
.sys.dim { opacity: .35; }
.sysbg { fill: transparent; stroke: none; }
.sys.cur .sysbg { fill: var(--band); stroke: var(--band-line); stroke-width: 1.2; }

/* Balle rebondissante */
/* Balle : la couleur dit quoi faire */
.ball { fill: #94a3b8; stroke: #64748b; stroke-width: 1; -webkit-transition: fill .08s; transition: fill .08s; }
.ball-glow { fill: transparent; }
.bs-go .ball { fill: #22c55e; stroke: #15803d; }
.bs-go .ball-glow { fill: rgba(34, 197, 94, .3); }
.bs-hold .ball { fill: #3b82f6; stroke: #1d4ed8; }
.bs-rest .ball { fill: #e2e8f0; stroke: #94a3b8; }
.bs-ready .ball { fill: #f59e0b; stroke: #b45309; }
.bs-idle .ball { fill: #f43f5e; stroke: #be123c; }
.legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin: 0 3px 0 8px; }
.legend .lg.go { background: #22c55e; }
.legend .lg.hold { background: #3b82f6; }
.legend .lg.rest { background: #e2e8f0; border: 1px solid #94a3b8; }
.legend .lg.ready { background: #f59e0b; }
.ball-hi { fill: rgba(255, 255, 255, .75); }
.ball-sh { fill: rgba(15, 23, 42, .22); }
.score-svg.kid .bs-idle .ball { fill: #facc15; stroke: #ca8a04; }

.nt { color: #111; cursor: pointer; }
.nt .hd { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.nt .hd.hollow { fill: var(--paper); stroke-width: 1.8; }
.nt .stem { stroke: currentColor; stroke-width: 1.3; }
.nt .flag, .nt .rest { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nt rect, .nt circle { fill: currentColor; }
.nt .halo { fill: none; stroke: transparent; stroke-width: 3; }
.nt.cur { color: var(--accent); }
.nt.cur .ly { fill: var(--accent); font-weight: 700; }
.nt.st-ok { color: var(--ok); }
.nt.st-retry { color: #ca8a04; }
.nt.st-early { color: var(--early); }
.nt.st-late { color: var(--late); }
.nt.st-wrong { color: var(--bad); }
.nt.st-missed { color: #a3a3a3; }
.kid .nt .halo { fill: none; }
.kid .nt.cur .halo { stroke: var(--accent); }
.kid .nt.st-ok .halo { stroke: var(--ok); fill: rgba(22, 163, 74, .15); }
.kid .nt.st-retry .halo { stroke: #ca8a04; }
.kid .nt.st-wrong .halo { stroke: var(--bad); }
.kid .nt.st-missed .halo { stroke: #a3a3a3; }
.score-svg.kid .nn { font-size: 13px; }
.score-svg.kid .ly { font-size: 15px; font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", sans-serif; }

/* Effets : étoiles et confettis */
.pop {
  position: absolute; font-size: 28px; pointer-events: none;
  -webkit-animation: pop 1s ease-out forwards; animation: pop 1s ease-out forwards;
}
@-webkit-keyframes pop { 0% { -webkit-transform: scale(.3); opacity: 0; } 20% { -webkit-transform: scale(1.3); opacity: 1; } 100% { -webkit-transform: translateY(-50px) scale(1); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 20% { transform: scale(1.3); opacity: 1; } 100% { transform: translateY(-50px) scale(1); opacity: 0; } }
#confetti { position: fixed; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 70; overflow: hidden; }
#confetti i {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px;
  -webkit-animation: fall 2.5s linear forwards; animation: fall 2.5s linear forwards;
}
@-webkit-keyframes fall { to { -webkit-transform: translateY(110vh) rotate(540deg); } }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* ---------------- Accordeur plein écran ---------------- */
#tunerView {
  display: none;
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 16px;
  background: var(--panel);
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.mode-tune #scoreWrap, .mode-tune .run-ctrl, .mode-tune #tunerBox, .mode-tune #statsBox, .mode-tune #libBtn { display: none !important; }
.mode-tune #tunerView { display: -webkit-flex; display: flex; }
.mode-tune #panel { height: 34%; }
.mode-listen #tunerBox .only-run { display: none; }
.tv-main {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  width: 100%; max-width: 900px;
}
.tv-gauge { -webkit-flex: 1 1 55%; flex: 1 1 55%; max-width: 460px; position: relative; }
.tv-gauge svg { width: 100%; height: auto; display: block; }
.tv-read { -webkit-flex: 1 1 45%; flex: 1 1 45%; text-align: center; padding-left: 12px; }
.tv-note { font-size: 72px; font-weight: 800; line-height: 1; }
.tv-note.dim { color: var(--muted); opacity: .5; }
.tv-sub { color: var(--muted); margin-top: 6px; font-size: 15px; }
.tv-cents { font-size: 30px; font-weight: 700; margin-top: 8px; min-height: 36px; }
.tv-advice { font-size: 20px; margin-top: 6px; min-height: 26px; font-weight: 600; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.tv-strings { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin-top: 10px; }
.tv-strings .btn { margin: 4px; height: auto; min-height: 44px; line-height: 1.2; padding: 6px 14px; font-size: 18px; font-weight: 600; }
.tv-strings .btn small { display: block; font-size: 11px; font-weight: 400; opacity: .8; }
.tv-hint { max-width: 760px; color: var(--muted); font-size: 14px; text-align: center; margin: 10px 0 0; -webkit-user-select: text; user-select: text; }

/* ---------------- Panneau bas ---------------- */
#panel {
  -webkit-flex: 0 0 auto; flex: 0 0 auto;
  height: 280px;
  display: -webkit-flex; display: flex;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 6px 3px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 3px;
  padding: 6px 8px;
  min-width: 0;
  overflow: hidden;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.box-title { -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 20px; font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#diagramBox { -webkit-flex: 1.6 1 0; flex: 1.6 1 0; }
#diagram { -webkit-flex: 1 1 auto; flex: 1 1 auto; position: relative; min-height: 50px; }
#diagram > svg, #vkbd > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#vkbd { -webkit-flex: 0 1 64px; flex: 0 1 64px; min-height: 34px; position: relative; margin-top: 4px; }
#tunerBox { -webkit-flex: 1 1 0; flex: 1 1 0; }
.gauge-wrap { -webkit-flex: 1 1 auto; flex: 1 1 auto; position: relative; min-height: 70px; }
.gauge-wrap svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.readout { font-size: 15px; }
.readout b { font-size: 20px; }
.readout .lbl { display: inline-block; width: 64px; color: var(--muted); font-size: 13px; }
.readout .small { margin: 2px 0 4px 64px; min-height: 17px; }
.level { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.level div { height: 100%; width: 0; background: var(--ok); }
.mode-tune .only-run { display: none; }
#statsBox { -webkit-flex: 0.75 1 0; flex: 0.75 1 0; }
.stats { list-style: none; margin: 4px 0 0; padding: 0; font-size: 15px; }
.stats li { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 3px 2px; border-bottom: 1px solid var(--line); }
.stats li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin: 4px 8px 0 0; background: currentColor; }
.stats li span { -webkit-flex: 1 1 auto; flex: 1 1 auto; color: var(--fg); }
li.early { color: var(--early); }
li.late { color: var(--late); }
li.wrong { color: var(--bad); }
li.missed { color: #a3a3a3; }
li.ok { color: var(--ok); }
.mode-wait .only-play, .mode-listen .only-play { display: none; }
.score-big { margin-top: auto; text-align: center; }
.score-big span { font-size: 34px; font-weight: 800; }
.score-big small { display: block; color: var(--muted); }

/* Mascotte et étoiles (profil enfant) */
.mascot { -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
#mascotFace { font-size: 74px; line-height: 1.1; }
.bubble {
  margin-top: 8px; background: #fef9c3; color: #713f12; border-radius: 16px; padding: 8px 14px;
  font: 600 18px/1.25 "Chalkboard SE", "Comic Sans MS", "Marker Felt", sans-serif; max-width: 100%;
}
.kidstats { -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; text-align: center; }
.kid-stars { font-size: 40px; font-weight: 800; color: #ca8a04; }
.kid-bar { height: 16px; border-radius: 8px; background: var(--line); overflow: hidden; margin: 10px 6px 4px; }
.kid-bar div { height: 100%; width: 0; background: linear-gradient(90deg, #f43f5e, #f59e0b, #22c55e); -webkit-transition: width .3s; transition: width .3s; }
.kid-streak { font-size: 18px; font-weight: 700; color: #ea580c; min-height: 24px; margin-top: 6px; }

/* Diagrammes */
.diag .ks { fill: var(--key); stroke: var(--key-stroke); stroke-width: 2; }
.diag .key.on .ks { fill: var(--accent); stroke: var(--accent); }
.diag .stem { fill: var(--key-stroke); }
.diag .kl { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.diag .kl.in { fill: var(--fg); font-weight: 600; }
.diag .key.on .kl.in { fill: #fff; }
.diag .kl.big { font-size: 26px; }
.diag .hand { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.diag .sep { stroke: var(--muted); stroke-dasharray: 4 4; }
.diag.none { opacity: .3; }
.hole .hs { fill: var(--key); stroke: var(--key-stroke); stroke-width: 2; }
.hole .hs.half { fill: none; stroke: none; }
.hole.on .hs { fill: var(--accent); }
.hole.half .hs.half, .hole.half .hs.dbl { fill: var(--accent); }
.diag .string { stroke: #b59a68; }
.diag .fret { stroke: #94a3b8; stroke-width: 2; }
.diag .nut { stroke: var(--key-stroke); stroke-width: 6; }
.diag .inlay { fill: var(--muted); opacity: .35; }
.diag .fdot { fill: var(--accent); }
.diag .fdot.open { fill: var(--panel); stroke: var(--accent); stroke-width: 3; }
.diag .fdot + .kl.in { fill: #fff; }
.diag .fdot.open + .kl.in { fill: var(--accent); }
.kbd .w { fill: #fbfbfb; stroke: #334155; stroke-width: 1; }
.kbd .b { fill: #1e293b; stroke: #0f172a; }
.kbd .exp { fill: #93c5fd; }
.kbd .b.exp { fill: #2563eb; }
.kbd .pl-ok { fill: #22c55e; }
.kbd .pl-warn { fill: #f59e0b; }
.kbd .pl-bad { fill: #ef4444; }
.kbd .kn { font-size: 9px; text-anchor: middle; fill: #64748b; pointer-events: none; }

/* Jauge */
.gauge path { fill: none; stroke-width: 14; }
.gauge .z-ok { stroke: var(--ok); }
.gauge .z-warn { stroke: var(--warn); }
.gauge .z-bad { stroke: var(--bad); opacity: .75; }
.gauge .tick { stroke: var(--muted); stroke-width: 2; }
.gauge .gl { font-size: 16px; fill: var(--muted); text-anchor: middle; }
.needle line { stroke: var(--fg); stroke-width: 3.5; stroke-linecap: round; }
.needle circle { fill: var(--fg); }
.needle.ok line, .needle.ok circle { stroke: var(--ok); fill: var(--ok); }
.needle.warn line, .needle.warn circle { stroke: var(--warn); fill: var(--warn); }
.needle.bad line, .needle.bad circle { stroke: var(--bad); fill: var(--bad); }
.needle.off { opacity: .25; }
#playedName.ok { color: var(--ok); }
#playedName.warn { color: var(--warn); }
#playedName.bad { color: var(--bad); }

/* ---------------- Fenêtres ---------------- */
.modal, .sheet {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 50;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  padding: 16px;
}
.card {
  background: var(--panel); color: var(--fg);
  border-radius: 16px; padding: 20px 22px; width: 100%; max-width: 460px; text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.card h1 { margin: 0 0 6px; font-size: 26px; }
.card h2 { margin: 4px 0 8px; }
.card .btn.big { display: block; width: 100%; height: 50px; line-height: 48px; font-size: 17px; margin-top: 10px; }
.card .warn { color: var(--bad); font-weight: 600; }
.summary { max-width: 560px; text-align: left; }
.summary h2, .summary .big-num, .summary .stars { text-align: center; }
.big-num { font-size: 50px; font-weight: 800; margin: 0; }
.stars { font-size: 40px; color: #f59e0b; margin: 0; letter-spacing: 6px; }
.stars span { color: var(--line); }
.explain { margin: 6px 0; font-size: 15px; }
.goal { font-weight: 600; text-align: center; margin: 4px 0; }
.goal.ok { color: var(--ok); }
.kpis { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 10px -4px; }
.kpis div { -webkit-flex: 1 1 22%; flex: 1 1 22%; margin: 4px; background: var(--bg); border-radius: 10px; padding: 8px 4px; text-align: center; }
.kpis b { display: block; font-size: 20px; }
.kpis span { font-size: 12px; color: var(--muted); }
.summary h4 { margin: 12px 0 4px; }
.tips { margin: 0; padding-left: 20px; }
.tips li { margin: 5px 0; }
.summary details { margin-top: 10px; }
.summary summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.errs { list-style: none; padding: 0; margin: 6px 0; font-size: 14px; max-height: 180px; overflow-y: auto; }
.errs li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.profiles { display: -webkit-flex; display: flex; margin: 6px -5px 4px; }
.pf {
  -webkit-flex: 1 1 0; flex: 1 1 0; margin: 5px; padding: 12px 6px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.pf .em { display: block; font-size: 40px; }
.pf small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pf.on { border-color: var(--accent); background: rgba(37, 99, 235, .1); }

/* Bibliothèque */
.lib {
  background: var(--panel); color: var(--fg); border-radius: 16px; width: 100%; max-width: 900px; height: 100%;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow: hidden;
}
.lib-head { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 10px 12px; background: var(--bar); }
.lib-head .seg button { font-size: 16px; height: 38px; padding: 0 16px; }
#libBody { -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 20px; }
#libBody h3 { margin: 16px 0 6px; }
.grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -5px; }
.scard {
  position: relative; -webkit-flex: 0 0 calc(25% - 10px); flex: 0 0 calc(25% - 10px); margin: 5px; min-height: 110px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--fg);
  font: inherit; text-align: center; padding: 8px 6px 26px; cursor: pointer; overflow: hidden;
}
.scard.sel { border-color: var(--accent); }
.scard .em { display: block; font-size: 34px; }
.scard .t { display: block; font-weight: 600; font-size: 14px; margin-top: 4px; }
.scard .lv { position: absolute; left: 8px; bottom: 6px; font-size: 10px; color: #f59e0b; letter-spacing: 1px; }
.badge { position: absolute; right: 6px; bottom: 5px; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--line); color: var(--muted); }
.badge.ok { background: #dcfce7; color: #166534; }
.badge.lock { background: #fef3c7; color: #92400e; }
.scard.open { border-style: dashed; }

.sheet { -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: stretch; align-items: stretch; padding: 0; }
.sheet-body {
  background: var(--panel); color: var(--fg);
  width: 100%; max-width: 460px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 18px calc(24px + env(safe-area-inset-bottom));
}
.sheet-head { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; }
.sheet h2 { margin: 6px 0; }
.sheet h3 { margin: 18px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sheet label {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.sheet label > span, .sheet label > select, .sheet label > input { margin-left: 12px; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.sheet input[type=number] { width: 76px; text-align: center; }
.sheet input[type=checkbox] { width: 22px; height: 22px; }
.sheet input[type=range] { width: 150px; }
.sheet select, .sheet input[type=number] { background: var(--bg); color: var(--fg); border-color: var(--line); }
.about { font-size: 13px; color: var(--muted); margin-top: 18px; -webkit-user-select: text; user-select: text; }

#toast {
  position: fixed; left: 50%; bottom: 24px; -webkit-transform: translateX(-50%); transform: translateX(-50%);
  background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 80;
  max-width: 90%; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* ---------------- Profil enfant : plus grand, plus coloré ---------------- */
.kid .toolbar { background: linear-gradient(90deg, #7c3aed, #db2777 60%, #f59e0b); }
.kid .btn, .kid .seg, .kid select { border-color: rgba(255, 255, 255, .45); border-radius: 14px; }
.kid .btn { background: rgba(255, 255, 255, .18); height: 42px; line-height: 40px; font-size: 17px; }
.kid .btn.sq { width: 44px; }
.kid .btn.primary { background: #22c55e; border-color: #16a34a; }
.kid .btn.danger { background: #ef4444; }
.kid .seg button { height: 40px; font-size: 16px; }
.kid .seg button.on { background: #fff; color: #7c3aed; }
.kid select { background: rgba(255, 255, 255, .92); color: #4c1d95; height: 42px; font-weight: 600; }
.kid .brand { font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", sans-serif; }
.kid #scoreHead strong { font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", sans-serif; font-size: 19px; color: #7c3aed; }
.kid .box { border-radius: 18px; border-width: 2px; }
.kid #tunerBox { background: #fff7ed; border-color: #fed7aa; }
.kid #statsBox { background: #fefce8; border-color: #fde68a; }
.kid .lib-head { background: linear-gradient(90deg, #7c3aed, #db2777); }
.kid .scard { border-radius: 20px; }
.kid .lib .seg button { color: #fff; }
.kid .lib .seg button.on { color: #7c3aed; }
.kid .card .btn.big { color: #fff; }
.kid .card .btn.big:not(.primary) { background: #7c3aed; }
.kid #stepBar .btn, .kid .lib-head > .btn { color: #fff; background: #7c3aed; }
.kid .pf.on { border-color: #db2777; background: #fdf2f8; }
.kid .btn.mini { height: 28px; line-height: 26px; width: 34px; font-size: 14px; }
.kid .box .btn { background: #7c3aed; border-color: #7c3aed; }
.kid .tempo input { background: rgba(255, 255, 255, .92); color: #4c1d95; font-weight: 700; border-radius: 12px; height: 42px; }

/* ---------------- Adaptations d'écran ---------------- */
/* iPad portrait (768x1024) : doigté en haut sur toute la largeur */
@media (orientation: portrait) and (min-width: 600px) {
  #panel { height: 40%; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  #diagramBox { -webkit-flex: 1 1 100%; flex: 1 1 100%; height: 54%; margin-bottom: 6px; }
  #tunerBox, #statsBox { -webkit-flex: 1 1 40%; flex: 1 1 40%; height: calc(46% - 6px); }
  .mode-tune #panel { height: 30%; }
  .mode-tune #diagramBox { height: 100%; }
  #mascotFace { font-size: 48px; }
  .bubble { font-size: 16px; padding: 5px 10px; margin-top: 4px; }
  .scard { -webkit-flex-basis: calc(33.3% - 10px); flex-basis: calc(33.3% - 10px); }
}
/* Tablette paysage : barre compacte pour garder de la hauteur à la partition */
@media (max-width: 1100px) and (orientation: landscape) {
  .toolbar .lbl { display: none; }
  .brand span { display: none; }
  .btn.libbtn { max-width: 170px; }
  select { max-width: 165px; }
}
/* Petits écrans (téléphone) */
@media (max-width: 700px) {
  .brand span, .toolbar .lbl { display: none; }
  select { max-width: 140px; }
  .btn, .seg button { padding: 0 8px; }
  .btn.libbtn { max-width: 130px; }
  #panel { height: 46%; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  #diagramBox { -webkit-flex: 1 1 100%; flex: 1 1 100%; height: 48%; margin-bottom: 6px; }
  #tunerBox, #statsBox { -webkit-flex: 1 1 40%; flex: 1 1 40%; height: calc(52% - 6px); }
  .readout b { font-size: 16px; }
  .score-big span { font-size: 24px; }
  .tv-main { -webkit-flex-direction: column; flex-direction: column; }
  .tv-read { padding-left: 0; }
  .tv-note { font-size: 56px; }
  .scard { -webkit-flex-basis: calc(50% - 10px); flex-basis: calc(50% - 10px); }
  #mascotFace { font-size: 40px; }
  .bubble { font-size: 14px; }
  .kid-stars { font-size: 28px; }
  #scoreHead .fb { display: none; }
}
@media (max-height: 700px) and (orientation: landscape) {
  #panel { height: 240px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #panel { height: 180px; }
  .stats li { padding: 1px 2px; font-size: 13px; }
}

/* =============================================================================
 * Vues : Parcours (accueil), Plan d'apprentissage, Partition
 * ============================================================================= */
main { position: relative; }
.view {
  display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); z-index: 5;
}
.view-home #home, .view-plan #planView { display: block; }
.view-home #scoreWrap, .view-home #tunerView, .view-home #panel,
.view-plan #scoreWrap, .view-plan #tunerView, .view-plan #panel { visibility: hidden; }
.view-home .play-only, .view-home .run-ctrl, .view-plan .play-only, .view-plan .run-ctrl { display: none !important; }
.view-home #homeBtn { background: var(--accent); border-color: var(--accent); }
.home-inner { max-width: 860px; margin: 0 auto; padding: 14px 14px 90px; }

/* En-tête joueur */
.home-head { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: var(--panel); border-radius: 18px; padding: 12px 14px; border: 1px solid var(--line); }
.avatar { font-size: 46px; width: 64px; height: 64px; line-height: 64px; text-align: center; border-radius: 50%; background: var(--bg); margin-right: 12px; }
.hinfo { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.hlevel { font-weight: 800; font-size: 20px; }
.xpbar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 5px 0 3px; }
.xpbar div { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #22c55e, #84cc16); -webkit-transition: width .8s; transition: width .8s; }
.hstats b { display: block; font-size: 20px; text-align: right; margin-left: 10px; white-space: nowrap; }
.hbadges { margin: 8px 2px 0; font-size: 22px; }
.badge-i { display: inline-block; margin: 2px; opacity: .22; -webkit-filter: grayscale(1); filter: grayscale(1); }
.badge-i.got { opacity: 1; -webkit-filter: none; filter: none; }
.hmascot { margin: 6px 4px; color: var(--muted); font-size: 15px; }
.home-actions { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 4px -5px; }
.bigcard {
  -webkit-flex: 1 1 40%; flex: 1 1 40%; margin: 5px; min-height: 70px; border-radius: 18px; border: 2px solid var(--line);
  background: var(--panel); color: var(--fg); font: inherit; text-align: left; padding: 10px 14px; cursor: pointer;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
}
.bigcard:active { -webkit-transform: scale(.98); transform: scale(.98); }
.bigcard .bc-e { font-size: 30px; margin-right: 12px; }
.bigcard b { display: block; font-size: 17px; }
.bigcard small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.bigcard.main { -webkit-flex-basis: 100%; flex-basis: 100%; background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; border: 0; min-height: 80px; }
.bigcard.main small { color: rgba(255, 255, 255, .85); }
.bigcard.main .bc-e { width: 52px; height: 52px; line-height: 52px; text-align: center; border-radius: 50%; background: rgba(255, 255, 255, .22);
  -webkit-animation: breathe 1.8s ease-in-out infinite; animation: breathe 1.8s ease-in-out infinite; }
@-webkit-keyframes breathe { 50% { -webkit-transform: scale(1.12); } }
@keyframes breathe { 50% { transform: scale(1.12); } }
.path-title { margin: 18px 4px 6px; }

/* Le chemin des leçons */
.lgroup { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; margin: 12px 0; padding: 10px 10px 4px; }
.lgroup.current { border-color: var(--accent); }
.lgroup.done { border-color: #86efac; }
.lgroup.future { opacity: .7; }
.lghead { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.lnum { -webkit-flex: 0 0 36px; flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; text-align: center; line-height: 36px; margin-right: 10px; }
.lgroup.done .lnum { background: var(--ok); }
.lgroup.future .lnum { background: var(--muted); }
.lgt { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.lgt b { display: block; font-size: 16px; }
.lgt small { color: var(--muted); }
.lgs { font-weight: 700; color: #ca8a04; white-space: nowrap; margin-left: 8px; }
.tip { background: #fef9c3; color: #713f12; border-radius: 10px; padding: 8px 10px; margin: 8px 0 0; }
.nodes { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; padding: 6px 0 14px; }
.node { position: relative; width: 104px; margin: 6px 4px; border: 0; background: transparent; color: var(--fg); font: inherit; cursor: pointer; text-align: center; }
.node.z1 { -webkit-transform: translateY(12px); transform: translateY(12px); }
.node.z3 { -webkit-transform: translateY(-8px); transform: translateY(-8px); }
.node .ne {
  display: block; width: 66px; height: 66px; line-height: 62px; margin: 0 auto; border-radius: 50%; font-size: 30px;
  background: var(--bg); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line);
}
.node.song .ne { border-radius: 18px; }
.node.done .ne { border-color: #22c55e; background: #dcfce7; box-shadow: 0 4px 0 #16a34a; }
.node.current .ne {
  border-color: var(--accent); background: #dbeafe; box-shadow: 0 4px 0 #1d4ed8;
  -webkit-animation: bob 1.4s ease-in-out infinite; animation: bob 1.4s ease-in-out infinite;
}
.node.locked .ne { opacity: .45; }
@-webkit-keyframes bob { 50% { -webkit-transform: translateY(-6px); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
.node .nst { display: block; height: 16px; color: #f59e0b; font-size: 14px; letter-spacing: 1px; margin-top: 3px; }
.node .nt { display: block; font-size: 12px; line-height: 1.2; font-weight: 600; }
.node .nt small { display: block; font-weight: 400; color: var(--muted); }

/* Plan d'une chanson */
.back { margin-bottom: 6px; }
#planView h2 { margin: 6px 0 2px; }
.pstep {
  width: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; text-align: left;
  border: 2px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); font: inherit; padding: 8px 10px; margin: 7px 0; cursor: pointer;
}
.pstep.done { border-color: #86efac; }
.pstep.current { border-color: var(--accent); background: #eff6ff; }
.pn { -webkit-flex: 0 0 30px; flex: 0 0 30px; height: 30px; line-height: 30px; border-radius: 50%; background: var(--muted); color: #fff; text-align: center; font-weight: 800; margin-right: 8px; }
.pstep.done .pn { background: var(--ok); }
.pstep.current .pn { background: var(--accent); }
.pe { font-size: 24px; margin-right: 8px; }
.pt { -webkit-flex: 1 1 auto; flex: 1 1 auto; font-weight: 700; }
.pt small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.ps { color: #ca8a04; font-weight: 700; white-space: nowrap; }
.go { margin-top: 10px; }

/* Barre d'étape, HUD, progression, karaoké */
#stepBar { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: #e0e7ff; color: #1e1b4b; padding: 4px 10px; font-size: 14px; }
#stepBar span { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-right: 8px; }
#hud { margin-left: 10px; white-space: nowrap; text-align: right; }
#hudPts { font-size: 20px; color: #1d4ed8; }
#hudCombo { color: #ea580c; font-weight: 800; margin-right: 8px; }
.runbar { height: 4px; background: #e2e8f0; margin: 3px 0 0; }
.runbar div { height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #3b82f6); -webkit-transition: width .3s; transition: width .3s; }
#karaoke {
  padding: 4px 12px; font-size: 20px; text-align: center; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", sans-serif;
}
#karaoke .sung { color: #334155; }
#karaoke .now { color: #fff; background: #7c3aed; border-radius: 8px; padding: 0 4px; }

/* Carte d'introduction */
#intro { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; z-index: 6; pointer-events: none; }
.intro-card {
  display: inline-block; pointer-events: auto; background: var(--panel); color: var(--fg); border-radius: 18px; padding: 12px 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25); max-width: 92%; border: 2px solid var(--accent);
  -webkit-animation: rise .35s ease-out; animation: rise .35s ease-out;
}
@-webkit-keyframes rise { from { -webkit-transform: translateY(30px); opacity: 0; } }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.intro-card h3 { margin: 0 0 4px; }
.intro-card p { margin: 3px 0; }
.intro-card .btn.big { height: 50px; line-height: 48px; font-size: 19px; padding: 0 30px; margin-top: 6px; }

/* Décompte animé */
#countIn.pulse { -webkit-animation: pulse .5s ease-out; animation: pulse .5s ease-out; }
@-webkit-keyframes pulse { from { -webkit-transform: scale(1.5); opacity: .4; } }
@keyframes pulse { from { transform: scale(1.5); opacity: .4; } }

/* Bandeau central (combo, leçon validée...) */
#banner {
  position: fixed; left: 50%; top: 38%; z-index: 75; pointer-events: none; opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(.6); transform: translate(-50%, -50%) scale(.6);
  background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; font-size: 30px; font-weight: 900; padding: 12px 26px; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); white-space: nowrap;
  -webkit-transition: opacity .25s, -webkit-transform .25s; transition: opacity .25s, transform .25s;
}
#banner.show { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }

/* Verdicts discrets, dans le couloir au-dessus de la portée */
.judge {
  position: absolute; z-index: 4; pointer-events: none; font-weight: 700; font-size: 12px; letter-spacing: .03em; white-space: nowrap;
  -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0;
  -webkit-animation: judge 1.1s ease-out forwards; animation: judge 1.1s ease-out forwards;
}
.kid .judge { font-size: 14px; }
.judge.perfect { color: #16a34a; }
.judge.good { color: #2563eb; }
.judge.early { color: var(--early); }
.judge.late { color: var(--late); }
.judge.retry { color: #ca8a04; }
.judge.wrong { color: var(--bad); }
.judge.missed { color: #8a8a8a; }
@-webkit-keyframes judge { 0% { opacity: 0; -webkit-transform: translate(-50%, 4px); } 15% { opacity: .9; -webkit-transform: translate(-50%, 0); } 70% { opacity: .9; } 100% { opacity: 0; -webkit-transform: translate(-50%, -6px); } }
@keyframes judge { 0% { opacity: 0; transform: translate(-50%, 4px); } 15% { opacity: .9; transform: translate(-50%, 0); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.shake { -webkit-animation: shake .35s; animation: shake .35s; }
@-webkit-keyframes shake { 20% { -webkit-transform: translateX(-6px); } 40% { -webkit-transform: translateX(6px); } 60% { -webkit-transform: translateX(-4px); } 80% { -webkit-transform: translateX(3px); } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* Bibliothèque */
.lib-head input[type=search] {
  -webkit-flex: 1 1 auto; flex: 1 1 auto; height: 38px; border-radius: 10px; border: 0; padding: 0 12px; font: inherit; font-size: 16px;
  margin-right: 8px; min-width: 0; -webkit-appearance: none;
}
.lib-head .small { color: #cbd5e1; margin-right: 8px; white-space: nowrap; }
.lib-cats { padding: 8px 10px 0; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lib-cats button {
  display: inline-block; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--fg);
  padding: 5px 12px; margin: 0 4px 6px 0; cursor: pointer;
}
.lib-cats button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.scard .bst { position: absolute; left: 8px; top: 6px; color: #f59e0b; font-size: 12px; }
.sheet-card { max-width: 480px; }
.shv {
  width: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font: inherit; font-size: 16px; text-align: left;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); padding: 10px 12px; margin: 6px 0; cursor: pointer;
}
.shv .em { font-size: 24px; margin-right: 10px; }
.shv span:nth-child(2) { -webkit-flex: 1 1 auto; flex: 1 1 auto; font-weight: 600; }
.shv .bst { color: #ca8a04; font-weight: 700; }

/* Accordeur : missions */
.tv-mission { font-weight: 700; margin: 8px 0 0; text-align: center; }
.tv-strings .btn { position: relative; overflow: hidden; }
.tv-strings .btn.tuned { background: #16a34a; border-color: #16a34a; }
.tv-strings .ring { position: absolute; left: 0; bottom: 0; height: 5px; width: 0; background: #22c55e; display: block; }

/* Bilan */
.summary .stars { font-size: 46px; letter-spacing: 8px; margin: 0; min-height: 56px; }
.summary .stars .st { display: inline-block; color: var(--line); }
.summary .stars .st.on { color: #f59e0b; -webkit-animation: starpop .45s ease-out; animation: starpop .45s ease-out; }
@-webkit-keyframes starpop { 0% { -webkit-transform: scale(0) rotate(-60deg); } 70% { -webkit-transform: scale(1.4); } }
@keyframes starpop { 0% { transform: scale(0) rotate(-60deg); } 70% { transform: scale(1.4); } }
.sum-pts { text-align: center; margin: 0; color: #1d4ed8; font-weight: 700; }
.sum-xp { margin: 8px 0; text-align: center; font-weight: 700; color: #15803d; }
.newbadge { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: #fef3c7; border-radius: 12px; padding: 6px 10px; margin: 6px 0;
  -webkit-animation: rise .5s ease-out; animation: rise .5s ease-out; }
.newbadge span { font-size: 30px; margin-right: 10px; }
.newbadge b { margin-right: 8px; }
.newbadge small { color: #92400e; }

/* Profil enfant : accueil plus grand et plus coloré */
.kid .home-head { background: linear-gradient(90deg, #fdf2f8, #ede9fe); border: 0; }
.kid .hlevel, .kid .lgt b, .kid .bigcard b, .kid #planView h2 { font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", sans-serif; }
.kid .bigcard.main { background: linear-gradient(90deg, #22c55e, #14b8a6); }
.kid .node .ne { width: 76px; height: 76px; line-height: 72px; font-size: 36px; }
.kid .node { width: 112px; }
.kid .hmascot { font-size: 18px; color: #6d28d9; font-weight: 600; }

@media (max-width: 700px) {
  .bigcard { -webkit-flex-basis: 100%; flex-basis: 100%; }
  .node { width: 86px; }
  .node .ne { width: 56px; height: 56px; line-height: 52px; font-size: 26px; }
  #hud { display: none; }
}

/* Sauvegarde */
#syncBox { margin: 6px 0; }
.sync-code { font-size: 26px; font-weight: 800; letter-spacing: .08em; text-align: center; background: var(--bg); border-radius: 12px; padding: 8px; margin: 6px 0; -webkit-user-select: text; user-select: text; }
.sync-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 6px 0; }
.sync-row input { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-right: 8px; text-transform: uppercase; background: var(--bg); color: var(--fg); border-color: var(--line); }
.sync-status { font-size: 13px; color: var(--muted); margin: 4px 0; }
.sync-status.ok { color: var(--ok); }
.sync-status.error { color: var(--bad); }
.row-btns .btn { margin: 4px 6px 4px 0; }
.sheet .row-btns .btn, .sheet #syncBox .btn { background: var(--btn); }

/* Coffres et trésors */
.chestcard { background: linear-gradient(90deg, #fde68a, #fbbf24); border: 0; }
.chestcard .bc-e { -webkit-animation: wiggle 1.2s ease-in-out infinite; animation: wiggle 1.2s ease-in-out infinite; }
@-webkit-keyframes wiggle { 0%, 60%, 100% { -webkit-transform: rotate(0); } 70% { -webkit-transform: rotate(-12deg); } 80% { -webkit-transform: rotate(12deg); } 90% { -webkit-transform: rotate(-6deg); } }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-6deg); } }
.chestbtn { background: linear-gradient(90deg, #f59e0b, #eab308) !important; border: 0 !important; color: #fff; font-weight: 800; }
.chest-card { max-width: 480px; }
.chest-box { display: block; margin: 6px auto; font-size: 96px; line-height: 1.1; background: none; border: 0; cursor: pointer; }
.chest-box.shaking { -webkit-animation: chestshake .9s linear; animation: chestshake .9s linear; }
.chest-box.open { -webkit-animation: chestopen .5s ease-out; animation: chestopen .5s ease-out; }
@-webkit-keyframes chestshake { 10%, 30%, 50%, 70%, 90% { -webkit-transform: rotate(-10deg) scale(1.05); } 20%, 40%, 60%, 80% { -webkit-transform: rotate(10deg) scale(1.1); } }
@keyframes chestshake { 10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg) scale(1.05); } 20%, 40%, 60%, 80% { transform: rotate(10deg) scale(1.1); } }
@-webkit-keyframes chestopen { from { -webkit-transform: scale(.3); } 70% { -webkit-transform: scale(1.3); } }
@keyframes chestopen { from { transform: scale(.3); } 70% { transform: scale(1.3); } }
.reward {
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; text-align: left;
  background: #fffbeb; border: 2px solid #fcd34d; border-radius: 14px; padding: 8px 10px; margin: 8px 0; color: #1f2937;
  -webkit-animation: rise .45s ease-out both; animation: rise .45s ease-out both;
}
.reward .re { font-size: 38px; margin-right: 10px; }
.reward .rt { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.reward .rt b { display: block; }
.reward .rt small { color: #92400e; }
.reward .btn { margin-left: 8px; }
.treas-card { max-width: 620px; text-align: left; }
.treas-card h3 { margin: 12px 0 4px; }
.treas-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -4px; }
.titem { width: 84px; margin: 4px; padding: 6px 2px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; text-align: center; }
.titem span { display: block; width: 46px; height: 46px; line-height: 46px; margin: 0 auto; border-radius: 50%; font-size: 28px; }
.titem small { display: block; font-size: 11px; line-height: 1.2; margin-top: 3px; }
.titem.on { border-color: var(--accent); background: #dbeafe; }
.titem.locked { opacity: .45; }
.titem.locked span { font-weight: 800; color: var(--muted); }
.scard.locked { opacity: .65; }
.badge.gift { background: #fef3c7; color: #b45309; }
.score-svg .ball-emoji { text-anchor: middle; }

/* Code PIN */
.modal.pin { z-index: 90; background: linear-gradient(160deg, #1e293b, #4c1d95); }
.pin-card { max-width: 340px; }
.pin-ico { font-size: 44px; }
.pin-dots { margin: 10px 0 16px; }
.pin-dots i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); margin: 0 8px; }
.pin-dots i.on { background: var(--accent); border-color: var(--accent); }
.pin-pad { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin: 0 auto; max-width: 270px; }
.pin-pad button {
  width: 76px; height: 64px; margin: 5px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  font: inherit; font-size: 28px; font-weight: 700; cursor: pointer;
}
.pin-pad button:active { background: var(--accent); color: #fff; }
.pin-pad button.fn { font-size: 16px; font-weight: 600; }
.parent-card { max-width: 560px; text-align: left; }
.parent-card h3 { margin: 14px 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.prow { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.prow select, .prow input[type=password] { margin-left: 10px; max-width: 60%; background: var(--bg); color: var(--fg); border-color: var(--line); }
.prow input[type=checkbox] { width: 22px; height: 22px; }
#parSongs { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================================
 * iPad mini 2 (iOS 12) : 1024 x ~690 px utiles en paysage dans Safari,
 * 768 x ~950 en portrait. Barre d'outils sur une ligne, cibles >= 44 px.
 * ============================================================================= */
.backbtn.on { background: #0f766e; border-color: #14b8a6; }
@media (max-width: 1100px) and (orientation: landscape) {
  .toolbar { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; overflow: hidden; padding: 3px 4px; }
  .toolbar > * { margin: 2px 2px; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
  .btn, .seg button { height: 44px; line-height: 42px; min-width: 44px; }
  .btn.sq { width: 44px; }
  .seg button { padding: 0 10px; font-size: 18px; }
  .seg .lbl, .backbtn .lbl, .home-btn .lbl { display: none; }
  .view-play #instrument, .profile-btn { display: none; }
  select, input[type=number] { height: 44px; }
  .tempo input { width: 50px; }
  .btn.libbtn { max-width: 190px; }
  #panel { height: 230px; }
  #scoreHead { min-height: 26px; padding-top: 3px; }
}
@media (max-width: 800px) and (orientation: portrait) {
  .toolbar > * { margin: 2px 2px; }
  .btn, .seg button { height: 44px; line-height: 42px; }
  .seg .lbl, .backbtn .lbl, .toolbar .lbl { display: none; }
  .seg button { font-size: 18px; padding: 0 12px; }
  .view-play #instrument, .profile-btn { display: none; }
  .btn.libbtn { max-width: 220px; }
}
.kid .toolbar .btn { min-width: 44px; }

/* Joueurs */
.players { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin: 6px -4px; }
.pcard {
  width: 128px; margin: 4px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--fg);
  font: inherit; cursor: pointer; text-align: center;
}
.pcard .em { display: block; font-size: 38px; line-height: 1.1; }
.pcard b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard small { display: block; font-size: 11px; color: var(--muted); }
.pcard.on { border-color: var(--accent); background: #dbeafe; }
.pcard.add { border-style: dashed; }
.pcard.add .em { color: var(--accent); }
.np-card input[type=text] {
  width: 100%; height: 46px; font: inherit; font-size: 20px; text-align: center; border-radius: 12px; border: 2px solid var(--line);
  background: var(--bg); color: var(--fg); margin: 6px 0;
}
.np-av { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin: 6px 0; }
.np-av button { width: 50px; height: 50px; margin: 3px; font-size: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); cursor: pointer; }
.np-av button.on { border-color: var(--accent); background: #dbeafe; }

/* Objectif tempo dans le bilan */
.sum-tempo { background: #eff6ff; border: 2px solid #bfdbfe; border-radius: 14px; padding: 8px 12px; margin: 8px 0; color: #1e3a8a; text-align: center; }
.sum-tempo.done { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.sum-tempo .tbar { height: 10px; border-radius: 5px; background: #dbeafe; overflow: hidden; margin: 6px 0 3px; }
.sum-tempo .tbar div { height: 100%; width: 0; background: linear-gradient(90deg, #60a5fa, #22c55e); -webkit-transition: width .8s; transition: width .8s; }
.sum-tempo .btn.big { margin-top: 6px; }
.shv .bst small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }

/* =============================================================================
 * Téléphone en paysage (hauteur < 460 px) : partition en grand, doigté sur une
 * colonne à droite, barre minimale ; métronome et accompagnement dans ⚙.
 * ============================================================================= */
@media (max-height: 460px) and (orientation: landscape) {
  body { font-size: 14px; }
  .toolbar { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; overflow: hidden; padding: 2px 4px; padding-top: calc(2px + env(safe-area-inset-top)); }
  .toolbar > * { margin: 1px 2px; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
  .btn, .seg button, select, input[type=number] { height: 38px; line-height: 36px; font-size: 15px; min-width: 38px; }
  .kid .btn, .kid .seg button, .kid select, .kid .tempo input { height: 38px; line-height: 36px; }
  .btn.sq, .kid .btn.sq { width: 38px; }
  .seg button { padding: 0 8px; }
  .toolbar .lbl, .seg .lbl, #metroBtn, #backingBtn, #loopBtn, .profile-btn, .tempo .btn, .tempo .unit, .view-play #instrument { display: none !important; }
  .btn.libbtn { max-width: 150px; }
  .tempo input { width: 56px; padding: 0 2px; }
  .view-play main { -webkit-flex-direction: row; flex-direction: row; }
  .view-play #scoreWrap { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
  #panel {
    height: auto !important; width: 30%; -webkit-flex: 0 0 30%; flex: 0 0 30%; -webkit-flex-direction: column; flex-direction: column;
    -webkit-flex-wrap: nowrap !important; flex-wrap: nowrap !important; padding: 4px; border-top: 0; border-left: 1px solid var(--line);
  }
  #tunerBox, #statsBox { display: none !important; }
  #diagramBox { -webkit-flex: 1 1 auto !important; flex: 1 1 auto !important; height: auto !important; margin: 0 !important; }
  #vkbd { -webkit-flex-basis: 46px; flex-basis: 46px; }
  #scoreInfo, #feedback, #stepList { display: none !important; }
  #stepBar { font-size: 12px; padding: 2px 8px; }
  #karaoke { font-size: 15px; padding: 1px 8px; }
  .intro-card { padding: 6px 12px; }
  .intro-card #introHelp, .intro-card #introBest { display: none; }
  .intro-card .btn.big { height: 40px; line-height: 38px; font-size: 16px; }
  #countIn { width: 70px; height: 70px; margin-top: -35px; line-height: 70px; font-size: 38px; }
  .mode-tune #panel { display: none; }
  .tv-main { -webkit-flex-direction: row; flex-direction: row; }
  .tv-note { font-size: 46px; }
  .tv-cents { font-size: 22px; }
  .home-inner { padding: 8px 10px 60px; }
  .home-head { padding: 6px 10px; }
  .avatar { width: 46px; height: 46px; line-height: 46px; font-size: 32px; }
  .bigcard { -webkit-flex-basis: 30%; flex-basis: 30%; min-height: 54px; padding: 6px 10px; }
  .bigcard.main { -webkit-flex-basis: 100%; flex-basis: 100%; min-height: 56px; }
  .bigcard .bc-e { font-size: 24px; }
  .card { padding: 10px 14px; }
  .card h1 { font-size: 20px; margin: 0; }
  .card .btn.big { height: 42px; line-height: 40px; margin-top: 6px; }
  .pcard { width: 108px; padding: 4px; }
  .pcard .em { font-size: 28px; }
  .pin-ico { display: none; }
  .pin-card h2 { font-size: 17px; margin: 0; }
  .pin-dots { margin: 6px 0 8px; }
  .pin-pad button { height: 46px; width: 70px; margin: 3px; font-size: 22px; }
  .summary .stars { font-size: 32px; min-height: 40px; }
  .big-num { font-size: 36px; }
}

/* Installation */
.installcard { background: linear-gradient(90deg, #dbeafe, #e0e7ff); border: 0; }
.install-card { max-width: 480px; text-align: left; }
.install-card h2 { text-align: center; }
.isteps { padding-left: 22px; font-size: 17px; line-height: 1.5; }
.isteps li { margin: 8px 0; }
.ikey { display: inline-block; min-width: 30px; height: 30px; line-height: 28px; text-align: center; border: 2px solid var(--accent); border-radius: 8px; color: var(--accent); font-weight: 800; }
#installArrow {
  position: fixed; z-index: 95; top: 4px; right: 70px; font-size: 44px; color: #fff; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  -webkit-animation: point 1s ease-in-out infinite; animation: point 1s ease-in-out infinite; pointer-events: none;
}
#installArrow small { display: block; font-size: 13px; font-weight: 700; }
#installArrow.phone { top: auto; bottom: 6px; right: 50%; margin-right: -24px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
@-webkit-keyframes point { 50% { -webkit-transform: translateY(-8px); } }
@keyframes point { 50% { transform: translateY(-8px); } }

/* iPad en paysage dans Safari (barre d'onglets : ~650 px utiles) : plus de place pour la partition */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 720px) and (min-height: 461px) {
  #panel { height: 205px; }
  #stepBar { font-size: 13px; padding: 2px 10px; }
  #stepBar .btn.small { height: 30px; line-height: 28px; }
  #scoreHead { min-height: 24px; padding-top: 2px; }
  #karaoke { font-size: 17px; padding: 1px 10px; }
  #mascotFace { font-size: 52px; }
  .bubble { font-size: 16px; padding: 5px 10px; }
  .kid-stars { font-size: 30px; }
}

/* Personnage « Mélo » et vestiaire */
.melo { display: block; width: 100%; height: 100%; }
.avatar { overflow: visible; background: transparent !important; }
#mascotFace { width: 110px; height: 130px; line-height: normal; }
#mascotFace .melo { -webkit-animation: idle 2.4s ease-in-out infinite; animation: idle 2.4s ease-in-out infinite; }
@-webkit-keyframes idle { 50% { -webkit-transform: translateY(-3px) rotate(-2deg); } }
@keyframes idle { 50% { transform: translateY(-3px) rotate(-2deg); } }
.ward-top { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.ward-char { width: 140px; height: 170px; -webkit-flex: 0 0 140px; flex: 0 0 140px; margin-right: 12px; }
.ward-side { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.ward-colors button { width: 34px; height: 34px; border-radius: 50%; margin: 3px; border: 3px solid transparent; cursor: pointer; }
.ward-colors button.on { border-color: var(--fg); }
.ward-tabs { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.ward-tabs button {
  display: inline-block; font: inherit; font-size: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--fg);
  padding: 6px 10px; margin: 0 4px 4px 0; cursor: pointer; text-align: center;
}
.ward-tabs button small { display: block; font-size: 10px; color: var(--muted); }
.ward-tabs button .lbl { font-size: 13px; }
.ward-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ward-tabs button.on small { color: #e0e7ff; }
.newbadge.gift { background: #ede9fe; }
.newbadge.gift .btn { margin-left: auto; }
@media (max-height: 460px) and (orientation: landscape) {
  .ward-char { width: 90px; height: 110px; -webkit-flex-basis: 90px; flex-basis: 90px; }
  #mascotFace { width: 70px; height: 84px; }
}

/* ---------------- Profil adulte : tableau de bord d'entraînement ---------------- */
:root[data-theme="sepia"] { --bg: #f4ecdf; --bar: #3b2f24; --panel: #fbf6ee; --fg: #2b2118; --muted: #7a6a58; --line: #e2d5c3; --accent: #9a5b2a; }
:root[data-theme="ardoise"] { --bg: #e5e9ec; --bar: #2f3b45; --panel: #f6f8f9; --fg: #1d262d; --muted: #5b6872; --line: #cfd6db; --accent: #0f766e; }
:root[data-theme="foret"] { --bg: #e8efe8; --bar: #1f3a2c; --panel: #f7faf6; --fg: #142218; --muted: #5a6e5f; --line: #cddbcf; --accent: #15803d; }
:root[data-theme="minuit"] { --bg: #0d1117; --bar: #010409; --panel: #161b22; --fg: #e6edf3; --muted: #8b949e; --line: #30363d; --accent: #58a6ff; --key: #21262d; --key-stroke: #8b949e; }
:root[data-theme="jazz"] { --bg: #17110f; --bar: #0e0907; --panel: #221a16; --fg: #f3e9dc; --muted: #a8998a; --line: #3a2d25; --accent: #d4a24c; --key: #2a201b; --key-stroke: #a8998a; }
.pro { margin-top: 8px; }
.pro-stats { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -4px; }
.pro-stat { -webkit-flex: 1 1 18%; flex: 1 1 18%; min-width: 120px; margin: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.pro-stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.pro-stat small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pro-stat.rank b { color: var(--accent); font-size: 18px; }
.pro-row { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -4px; }
.pro-card { -webkit-flex: 1 1 300px; flex: 1 1 300px; margin: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pro-card h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.goal { margin: 6px 0; }
.goal .gl { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; font-size: 14px; }
.goal .gb { height: 6px; border-radius: 3px; background: var(--line); margin-top: 3px; overflow: hidden; }
.goal .gb div { height: 100%; background: var(--accent); }
.goal.done .gl { color: var(--ok); }
.goal.done .gb div { background: var(--ok); }
.daily b { display: block; font-size: 17px; margin: 2px 0; }
.daily .btn { margin-top: 8px; }
.cal { display: -webkit-flex; display: flex; }
.cal-col { margin-right: 3px; }
.cal-col i { display: block; width: 14px; height: 14px; border-radius: 3px; margin-bottom: 3px; background: var(--line); }
.cal-col i.l1 { background: rgba(22, 163, 74, .35); }
.cal-col i.l2 { background: rgba(22, 163, 74, .6); }
.cal-col i.l3 { background: rgba(22, 163, 74, .85); }
.cal-col i.l4 { background: #15803d; }
.cal-col i.fut { background: transparent; }
.cal-col i.today { box-shadow: 0 0 0 2px var(--accent); }
.board-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.board-row:last-child { border-bottom: 0; }
.board-row .bm { width: 28px; text-align: center; }
.board-row .bn { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.board-row .bx { font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; }
.board-row.me .bn { font-weight: 700; }
.adult .avatar.plain { font-size: 38px; }
@media (max-height: 460px) and (orientation: landscape) {
  .pro-row { display: none; }
  .pro-stat { min-width: 90px; padding: 4px 8px; }
  .pro-stat b { font-size: 17px; }
}
/* Thèmes sombres : textes du parcours et sélection lisibles (la classe .nt de la partition force #111) */
.node .nt { color: var(--fg); }
.titem.on { background: rgba(37, 99, 235, .16); }
:root[data-theme="minuit"] .tip, :root[data-theme="jazz"] .tip, :root[data-theme="dark"] .tip { background: rgba(250, 204, 21, .14); color: var(--fg); }